.cad{
--cad-verde:var(--vnt-verde, #84BC25);
--cad-check-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.6 17 4 11.4'/%3E%3C/svg%3E");
min-height:100vh; background:var(--surface-0);
color:var(--text-primary);
}
.cad *{ box-sizing:border-box; }
.cad-tela[hidden]{ display:none !important; }
.cad-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:100vh; }
.cad-lado{
background:var(--vnt-navy, #0B1226); color:#fff;
padding:48px 56px; display:flex; flex-direction:column; gap:28px;
position:relative; overflow:hidden;
}
.cad-lado::after{
content:""; position:absolute; width:560px; height:560px; right:-220px; bottom:-260px;
border-radius:50%; pointer-events:none;
background:radial-gradient(circle, rgba(132,188,37,.20) 0%, rgba(132,188,37,0) 70%);
}
.cad-lado > *{ position:relative; z-index:1; }
.cad-lado-marca img{ height:34px; display:block; }
.cad-lado-frase{
font-size:29px; font-weight:400; line-height:1.22; letter-spacing:-.025em;
margin:auto 0 0; max-width:12em;
}
.cad-provas{ display:flex; flex-direction:column; gap:13px; margin:0; padding:0; list-style:none; }
.cad-prova{ display:flex; align-items:flex-start; gap:11px; font-size:13.5px; color:rgba(255,255,255,.82); }
.cad-prova svg{ width:18px; height:18px; flex:none; color:var(--cad-verde); margin-top:1px; }
.cad-palco{
display:flex; align-items:center; justify-content:center;
padding:40px 24px; background:var(--surface-2);
}
.cad-caixa{ width:100%; max-width:392px; }
.cad-tit{ font-size:27px; font-weight:400; letter-spacing:-.025em; line-height:1.15; margin:0 0 6px; }
.cad-sub{ font-size:13px; color:var(--text-muted); line-height:1.55; margin:0 0 26px; }
.cad-sub a{ color:var(--text-secondary); font-weight:500; }
.cad-metodos{ display:flex; flex-direction:column; gap:10px; }
.cad-social{
display:flex; align-items:center; justify-content:center; gap:10px;
width:100%; height:46px; border-radius:999px;
background:#fff; border:1px solid var(--border-strong);
font-family:inherit; font-size:13.5px; font-weight:500; color:var(--text-primary);
text-decoration:none; cursor:pointer; transition:border-color .14s ease, background .14s ease;
}
.cad-social:hover{ text-decoration:none; color:var(--text-primary); }
.cad-social:hover:not(:disabled){ border-color:var(--text-secondary); background:var(--surface-1); }
.cad-social:disabled{ opacity:.45; cursor:not-allowed; }
.cad-social img, .cad-social svg{ width:18px; height:18px; flex:none; }
.cad-social-nota{ font-size:11px; color:var(--text-muted); margin-left:2px; }
.cad-ou{ display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--text-muted); font-size:11.5px; }
.cad-ou::before, .cad-ou::after{ content:""; height:1px; background:var(--border); flex:1; }
.cad-campo{ margin-bottom:16px; }
.cad-campo > label{
display:block; font-size:11.5px; font-weight:650; letter-spacing:.03em;
color:var(--text-secondary); margin-bottom:8px; text-transform:uppercase;
}
.cad-campo .dica{ font-size:11.5px; color:var(--text-muted); margin-top:7px; display:block; }
.cad-campo .erro{ font-size:12px; color:#B4322F; margin-top:7px; display:block; }
.cad-bt{
width:100%; height:46px; border-radius:999px; border:1px solid transparent;
background:var(--cad-verde); color:#fff;
font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
transition:filter .14s ease, opacity .14s ease; box-shadow:none;
}
.cad-bt:hover:not(:disabled){ filter:brightness(.94); }
.cad-bt:disabled{ opacity:.4; cursor:not-allowed; }
.cad-bt-leve{
background:transparent; color:var(--text-secondary);
border-color:var(--border-strong); font-weight:500;
}
.cad-bt-leve:hover:not(:disabled){ background:var(--surface-1); color:var(--text-primary); filter:none; }
.cad-legal{ font-size:11px; color:var(--text-muted); line-height:1.5; margin:18px 0 0; text-align:center; }
.cad-legal a{ color:var(--text-secondary); text-decoration:underline; }
.cad-centro{ min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:40px 24px; gap:22px; }
.cad-wiz > :first-child,
.cad-centro > :first-child{ margin-top:auto; }
.cad-wiz > :last-child,
.cad-centro > :last-child{ margin-bottom:auto; }
.cad-centro-marca img{ height:30px; display:block; }
.cad-cartao{
width:100%; max-width:432px; background:#fff;
border:1px solid rgba(17,19,21,.05); border-radius:var(--radius-xl, 22px);
box-shadow:0 6px 22px rgba(17,19,21,.06); padding:32px 34px;
}
.cad-voltar{
display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0;
font-family:inherit; font-size:12.5px; color:var(--text-muted); cursor:pointer; margin-bottom:14px;
}
.cad-voltar:hover{ color:var(--text-primary); }
.cad-forca{ display:flex; gap:5px; margin-top:10px; }
.cad-forca i{ height:4px; flex:1; border-radius:99px; background:var(--border); transition:background .18s ease; }
.cad-regras{ list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; }
.cad-regra{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-muted); }
.cad-regra i{
width:14px; height:14px; border-radius:50%; flex:none;
border:1.5px solid var(--border-strong); display:grid; place-items:center;
}
.cad-regra.ok{ color:var(--text-secondary); }
.cad-regra.ok i{ background:var(--cad-verde); border-color:var(--cad-verde); }
.cad-regra.ok i::after{
content:""; width:9px; height:9px;
background-image:var(--cad-check-svg); background-size:contain; background-repeat:no-repeat;
}
.cad-codigo{ display:flex; gap:9px; justify-content:space-between; margin:6px 0 4px; }
.cad-codigo input{
width:100%; height:56px; text-align:center; padding:0;
font-size:22px; font-weight:600; font-variant-numeric:tabular-nums;
}
.cad-reenviar{ font-size:12px; color:var(--text-muted); margin:16px 0 20px; text-align:center; }
.cad-reenviar button{
background:none; border:0; padding:0; font-family:inherit; font-size:12px;
color:var(--text-primary); font-weight:600; cursor:pointer; text-decoration:underline;
}
.cad-reenviar button:disabled{ color:var(--text-muted); text-decoration:none; cursor:default; font-weight:400; }
.cad-wiz{ min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:40px 24px; gap:18px; }
.cad-wiz-marca{ margin-bottom:14px; }
.cad-wiz-marca img{ height:30px; display:block; }
.cad-centro-marca{ margin-bottom:4px; }
.cad-passos{
position:relative; display:flex; justify-content:space-between;
width:100%; max-width:520px; padding:0 4px;
}
.cad-trilho{
position:absolute; left:18px; right:18px; top:15px; height:2px;
background:var(--border); border-radius:99px; overflow:hidden;
}
.cad-trilho span{
display:block; height:100%; background:var(--cad-verde); border-radius:99px;
transition:width .35s cubic-bezier(.4,0,.2,1);
}
.cad-passo{
position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px;
flex:0 0 auto; width:84px; min-width:0;
}
.cad-passo-bola{
width:32px; height:32px; border-radius:50%; flex:none;
display:grid; place-items:center;
font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;
background:var(--surface-2); color:var(--text-muted);
border:2px solid var(--border);
box-shadow:0 0 0 4px var(--surface-0);
transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cad-passo-nome{
font-size:11px; line-height:1.25; text-align:center; color:var(--text-muted);
max-width:100%; transition:color .2s ease, font-weight .2s ease;
}
.cad-passo.agora .cad-passo-bola{
background:var(--cad-verde); border-color:var(--cad-verde); color:#fff;
transform:scale(1.12);
box-shadow:0 0 0 4px var(--surface-0), 0 0 0 9px rgba(132,188,37,.18);
}
.cad-passo.agora .cad-passo-nome{ color:var(--text-primary); font-weight:600; }
.cad-passo.feito .cad-passo-bola{
background:var(--cad-verde); border-color:var(--cad-verde); color:transparent; font-size:0;
}
.cad-passo.feito .cad-passo-bola::after{
content:""; width:16px; height:16px;
background-image:var(--cad-check-svg); background-size:contain; background-repeat:no-repeat;
}
.cad-passo.feito .cad-passo-nome{ color:var(--text-secondary); }
.cad-wiz-onde{ width:100%; max-width:560px; font-size:12px; color:var(--text-muted); margin:0; }
.cad-selo-breve{
display:inline-block; margin-left:7px; padding:2px 8px; border-radius:999px;
background:var(--surface-1); border:1px solid var(--border);
font-size:10px; font-weight:600; color:var(--text-muted); vertical-align:1px;
}
.cad-card-breve{ cursor:default; opacity:.7; background:var(--surface-1); }
.cad-card-breve:hover{ border-color:var(--border); }
.cad-wiz-cartao{
width:100%; max-width:560px; background:#fff;
border:1px solid rgba(17,19,21,.05); border-radius:var(--radius-xl, 22px);
box-shadow:0 6px 22px rgba(17,19,21,.06); padding:30px 34px 32px;
}
.cad-wiz-tit{ font-size:24px; font-weight:400; letter-spacing:-.025em; line-height:1.2; margin:0 0 6px; }
.cad-wiz-sub{ font-size:13px; color:var(--text-muted); line-height:1.55; margin:0 0 24px; }
.cad-dupla{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.cad-acoes{ display:flex; gap:10px; align-items:center; margin-top:26px; }
.cad-acoes .cad-bt{ width:auto; min-width:150px; padding:0 26px; }
.cad-acoes .cad-bt-leve{ min-width:0; padding:0 18px; }
.cad-grupo{ margin-bottom:22px; }
.cad-grupo > span{
display:block; font-size:11.5px; font-weight:650; letter-spacing:.03em;
color:var(--text-secondary); margin-bottom:9px; text-transform:uppercase;
}
.cad-grupo .leve{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--text-muted); }
.cad-opcoes{ display:flex; flex-wrap:wrap; gap:8px; }
.cad-opcao{
border:1px solid var(--border); background:#fff; border-radius:999px;
padding:9px 16px; font-family:inherit; font-size:13px; font-weight:500;
color:var(--text-secondary); cursor:pointer; transition:border-color .14s ease, background .14s ease, color .14s ease;
}
.cad-opcao:hover{ border-color:var(--border-strong); color:var(--text-primary); }
.cad-opcao.on{
border-color:var(--cad-verde); color:var(--text-primary); font-weight:600;
background:rgba(132,188,37,.12);
}
.cad-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cad-card{
position:relative; text-align:left; display:flex; gap:12px; align-items:flex-start;
padding:15px 15px 15px 14px; border-radius:var(--radius-lg, 18px);
border:1.5px solid var(--border); background:#fff; cursor:pointer;
font-family:inherit; transition:border-color .14s ease, background .14s ease;
}
.cad-card:hover{ border-color:var(--border-strong); }
.cad-card.on{ border-color:var(--cor); background:color-mix(in srgb, var(--cor) 6%, #fff); }
@supports not (color: color-mix(in srgb, red 50%, white)){
.cad-card.on{ background:var(--surface-1); }
}
.cad-card-ico{
width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center;
background:color-mix(in srgb, var(--cor) 13%, transparent); color:var(--cor); line-height:0;
}
@supports not (color: color-mix(in srgb, red 50%, transparent)){
.cad-card-ico{ background:rgba(17,19,21,.05); }
}
.cad-card-ico svg{ width:20px; height:20px; display:block; }
.cad-card-txt b{ display:block; font-size:13.5px; font-weight:600; color:var(--text-primary); }
.cad-card-txt i{ display:block; font-style:normal; font-size:11.5px; color:var(--text-muted); line-height:1.45; margin-top:2px; }
.cad-card-check{
position:absolute; top:12px; right:12px; width:18px; height:18px; border-radius:50%;
border:1.5px solid var(--border-strong); display:grid; place-items:center; background:#fff;
}
.cad-card.on .cad-card-check{ background:var(--cor); border-color:var(--cor); }
.cad-card.on .cad-card-check::after{
content:""; width:11px; height:11px;
background-image:var(--cad-check-svg); background-size:contain; background-repeat:no-repeat;
}
.cad-conexao{
display:flex; align-items:center; gap:14px; padding:16px;
border:1px solid var(--border); border-radius:var(--radius-lg, 18px); background:#fff;
}
.cad-conexao img{ width:38px; height:38px; flex:none; object-fit:contain; }
.cad-conexao-txt{ min-width:0; flex:1; }
.cad-conexao-txt b{ display:block; font-size:13.5px; font-weight:600; }
.cad-conexao-txt i{ display:block; font-style:normal; font-size:11.5px; color:var(--text-muted); line-height:1.45; margin-top:2px; }
.cad-conexao .cad-bt{ width:auto; height:38px; padding:0 20px; font-size:13px; flex:none; }
.cad-conexao.ligado{ border-color:var(--cad-verde); background:rgba(132,188,37,.07); }
.cad-ligado{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#5C8F14; flex:none; }
.cad-aviso{
margin:16px 0 0; padding:13px 15px; border-radius:var(--radius, 12px);
background:var(--surface-1); border:1px solid var(--border);
font-size:12px; color:var(--text-secondary); line-height:1.5;
}
.cad-preparo{ text-align:center; max-width:392px; }
.cad-spin{
width:42px; height:42px; margin:0 auto 22px; border-radius:50%;
border:3px solid var(--border); border-top-color:var(--cad-verde);
animation:cad-girar .8s linear infinite;
}
@keyframes cad-girar{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
.cad-spin{ animation:cad-pulsar 1.4s ease-in-out infinite; }
@keyframes cad-pulsar{ 50%{ opacity:.4; } }
}
.cad-tarefas{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; text-align:left; }
.cad-tarefa{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-muted); opacity:.45; transition:opacity .3s ease, color .3s ease; }
.cad-tarefa i{ width:16px; height:16px; border-radius:50%; flex:none; border:1.5px solid var(--border-strong); display:grid; place-items:center; }
.cad-tarefa.feito{ opacity:1; color:var(--text-primary); }
.cad-tarefa.feito i{ background:var(--cad-verde); border-color:var(--cad-verde); }
.cad-tarefa.feito i::after{
content:""; width:10px; height:10px;
background-image:var(--cad-check-svg); background-size:contain; background-repeat:no-repeat;
}
.cad-modal-fundo{
position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
background:rgba(11,18,38,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); padding:18px;
}
.cad-modal{
width:min(400px, 100%); background:#fff;
border:1px solid rgba(17,19,21,.06); border-radius:var(--radius-lg, 18px);
box-shadow:0 24px 60px rgba(15,20,35,.22); padding:26px 28px;
}
.cad-modal-tit{ font-size:19px; font-weight:600; letter-spacing:-.01em; margin:0 0 10px; color:var(--text-primary); }
.cad-modal-txt{ font-size:13.5px; line-height:1.55; color:var(--text-secondary); margin:0 0 22px; }
.cad-modal-acoes{ display:flex; flex-direction:column; gap:10px; }
.cad-modal-acoes .cad-bt{ width:100%; }
@media (max-width:900px){
.cad-split{ grid-template-columns:minmax(0,1fr); }
.cad-lado{ display:none; }
.cad-palco{ min-height:100vh; }
}
@media (max-width:560px){
.cad-wiz{ padding:24px 16px 48px; }
.cad-wiz-cartao, .cad-cartao{ padding:24px 20px 26px; border-radius:var(--radius-lg, 18px); }
.cad-dupla, .cad-cards{ grid-template-columns:minmax(0,1fr); }
.cad-regras{ grid-template-columns:minmax(0,1fr); }
.cad-codigo{ gap:6px; }
.cad-codigo input{ height:50px; font-size:19px; }
.cad-acoes{ flex-direction:column-reverse; align-items:stretch; }
.cad-acoes .cad-bt{ width:100%; }
.cad-passo-nome{ display:none; }
.cad-passo{ width:auto; }
.cad-passos{ max-width:100%; }
}
.cad-campo-caixa{ position:relative; display:block; }
.cad-campo-senha input{ padding-right:44px; }
.cad-olho{
position:absolute; right:6px; top:50%; transform:translateY(-50%);
width:34px; height:34px; padding:0; border:0; border-radius:50%;
background:transparent; color:var(--text-muted); cursor:pointer;
display:flex; align-items:center; justify-content:center; box-shadow:none;
}
.cad-olho:hover{ background:var(--surface-1); color:var(--text-primary); }
.cad-olho svg{ width:17px; height:17px; }
.cad-olho.on::after{
content:""; position:absolute; left:8px; right:8px; top:50%;
height:1.6px; background:currentColor; transform:rotate(-45deg); border-radius:2px;
}
.cad-aviso{
display:flex; align-items:flex-start; gap:9px;
padding:11px 14px; border-radius:12px; margin:0 0 18px;
font-size:12.5px; line-height:1.5;
}
.cad-aviso b{ font-weight:650; }
.cad-aviso--erro{ background:rgba(180,50,47,.08); color:#8E2A27; }
.cad-aviso--ok{ background:color-mix(in srgb, var(--cad-verde) 12%, transparent); color:#4A6B12; }
.cad-aviso svg{ width:16px; height:16px; flex:none; margin-top:1px; }
.cad-campo-topo{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.cad-campo-topo > label{
display:block; font-size:11.5px; font-weight:650; letter-spacing:.03em;
color:var(--text-secondary); margin-bottom:8px; text-transform:uppercase;
}
.cad-campo-topo a{ font-size:11.5px; color:var(--text-muted); text-decoration:none; }
.cad-campo-topo a:hover{ color:var(--text-primary); text-decoration:underline; }
.cad-volta{ text-align:center; margin:16px 0 0; font-size:12.5px; color:var(--text-muted); }
.cad-volta a{ color:var(--text-secondary); font-weight:500; }
.cad-palco-marca{ display:none; margin:0 0 26px; }
.cad-palco-marca img{ height:26px; display:block; }
@media (max-width: 900px){
.cad-palco-marca{ display:block; }
}
.cad-selo{
width:52px; height:52px; border-radius:50%; margin:0 0 18px;
display:flex; align-items:center; justify-content:center;
background:var(--surface-0); color:var(--text-secondary);
}
.cad-selo svg{ width:25px; height:25px; }
.cad-selo--ok{ background:color-mix(in srgb, var(--cad-verde) 14%, transparent); color:var(--cad-verde); }
.cad-selo--erro{ background:rgba(180,50,47,.1); color:#B4322F; }