/* =====================================================================
   CRIAR CONTA — o fluxo de entrada na Vnt (16/09/2026)

   ⚠️ ESTA FOLHA NÃO DEFINE COR, FONTE, RAIO NEM SOMBRA PRÓPRIOS. Ela
   entra DEPOIS do portal.css e só arruma o que é exclusivo do cadastro:
   a tela dividida, o stepper, os cartões escolhíveis e o preparo. Tudo
   que é identidade vem de lá — é o que faz o cadastro parecer a mesma
   casa sem ninguém precisar sincronizar dois lugares na mão.

   ⚠️ O VERDE AQUI É `--vnt-verde`, NUNCA `--green`. O `--green` é
   sobrescrito em tempo de execução pelo `produto_css()` com a cor do
   braço da página (vermelho no CRM, laranja no Marketing). O cadastro
   ainda não é produto nenhum — é Vnt —, então ele precisa do verde que
   NÃO muda. Ver includes/bracos.php:produto_css().

   ⚠️ VERMELHO NÃO APARECE EM NENHUMA TELA DAQUI. Vermelho é do Vnt crm e
   só entra depois que a pessoa abre o CRM. A única exceção é o cartão do
   braço "Vendas e CRM" no passo 3, onde a cor é a identidade do produto
   sendo escolhido, não a da tela.
   ===================================================================== */

.cad{
  --cad-verde:var(--vnt-verde, #84BC25);
  min-height:100vh; background:var(--surface-0);
  color:var(--text-primary);
}
.cad *{ box-sizing:border-box; }

/* ⚠️ ESTA LINHA É OBRIGATÓRIA E NÃO É ENFEITE (16/09/2026, achado na
   primeira conferência: as telas apareciam TODAS empilhadas).
   O atributo `hidden` esconde pela folha padrão do navegador, que tem a
   menor força de todas — e logo abaixo eu dou `display:grid` à tela
   dividida e `display:flex` às outras. Qualquer `display` escrito por
   nós GANHA do `hidden`, e o esconder simplesmente não acontece.
   Quem troca de tela é o JS mexendo em `.hidden`; sem isto aqui, ele
   mexe e nada muda. */
.cad-tela[hidden]{ display:none !important; }

/* ---------------------------------------------------------------------
   TELA DIVIDIDA (criar conta) — escuro à esquerda, formulário à direita
   ⚠️ Abaixo de 900px o lado escuro SOME em vez de virar um cabeçalho: no
   celular ele empurraria o formulário para baixo da dobra, e o formulário
   é a razão de a pessoa estar aqui.
   --------------------------------------------------------------------- */
.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;
}
/* o brilho verde de fundo: a única cor no escuro, e é a da marca */
.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; }

/* ---- os três métodos de entrada ---- */
.cad-metodos{ display:flex; flex-direction:column; gap:10px; }
/* ⚠️ MESMA ALTURA DOS CAMPOS (44px) e mesma pílula dos botões do portal:
   são botões, e botão do Vnt é pílula. */
/* ⚠️ `text-decoration:none` porque o do Google é um <a> DE VERDADE (leva
   para fora do site, ver criar_conta.php) e herdava o sublinhado dos
   links do portal — ficava com cara de link de texto no meio de botões. */
.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; }

/* ⚠️ O BOTÃO PRINCIPAL É VERDE AQUI, e só aqui. No portal `.btn-primary`
   é preto; no cadastro a cor institucional é que conduz, porque a pessoa
   ainda não escolheu produto nenhum. */
.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; }

/* ---------------------------------------------------------------------
   TELAS SOLTAS (senha, código, preparo) — cartão centrado
   --------------------------------------------------------------------- */
.cad-centro{ min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:40px 24px; gap:22px; }

/* =====================================================================
   TUDO NO MEIO DA PÁGINA (16/09/2026: *"tá vendo que tá tudo muito pra
   cima? deixa mais no centro da página, tudo"*).

   ⚠️ NÃO É `justify-content:center`, e a diferença importa. Com
   `center`, quando o conteúdo fica MAIS ALTO que a tela (o passo 2 e o
   passo 4 ficam), ele transborda para os DOIS lados — e o topo vira uma
   parte inalcançável: a pessoa rola para cima e o começo do formulário
   não está lá. É um defeito clássico, e silencioso.

   A margem automática no primeiro e no último filho faz as duas coisas
   certas sozinha: sobrando espaço, ela divide e centraliza; faltando
   espaço, ela vira zero e o conteúdo começa no topo, inteiro e rolável.
   ===================================================================== */
.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); }

/* ---- medidor de força da senha ---- */
.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;
}
/* ⚠️ O CHECK É VERDE (regra da identidade): check é confirmação da Vnt */
.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:7px; height:4px; border:1.6px solid #fff; border-top:0; border-right:0;
  transform:rotate(-45deg) translate(0,-1px);
}

/* ---- os 6 campos do código ---- */
.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; }

/* ---------------------------------------------------------------------
   O WIZARD — stepper + cartão
   --------------------------------------------------------------------- */
/* ⚠️ O ESPAÇO DEPOIS DA LOGO É MAIOR QUE O RESTO (16/09/2026: *"os
   números lá em cima ficaram muito perto da logo"*). A marca precisa de ar
   à volta dela; o stepper e o cartão podem conversar mais perto. Por isso
   `gap` pequeno no conjunto e uma margem só embaixo da logo. */
.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; }

/* ⚠️ O STEPPER FOI REFEITO (16/09/2026): *"achei muito feio e simples,
   quero mais criatividade"*. Ver o ⚠️ de cad_stepper() no criar_conta.php
   para o que mudou e por quê. O truque de construção: os cinco passos são
   um flex com `space-between`, e o TRILHO é uma barra absoluta atrás
   deles — assim o preenchimento é uma largura em % e não cinco tracinhos
   coloridos um a um. */
.cad-passos{
  position:relative; display:flex; justify-content:space-between;
  width:100%; max-width:520px; padding:0 4px;
}
/* o trilho e o que já andou; `left/right` param no meio do 1º e do 5º */
.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);
  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;
}
/* ⚠️ VERDE EM TUDO QUE É PROGRESSO — é a cor da Vnt conduzindo. Nenhuma
   cor de braço entra no stepper: aqui ainda não se escolheu produto. */
.cad-passo.agora .cad-passo-bola{
  background:var(--cad-verde); border-color:var(--cad-verde); color:#fff;
  transform:scale(1.12);
  /* o halo: o passo de agora precisa saltar sem gritar */
  box-shadow:0 0 0 5px 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:9px; height:5px; border:2px solid #fff; border-top:0; border-right:0;
  transform:rotate(-45deg) translate(0,-1px);
}
.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; }

/* o selo "em breve" da tela de boas-vindas */
.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;
}
/* ⚠️ Não é <button>: não dá para clicar no que ainda não existe. Fica
   visível de propósito, para a pessoa saber que vem aí. */
.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; }

/* ---- grupos de escolha única (pílulas) ---- */
.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);
}

/* ---- cartões dos braços (passo 3) ----
   ⚠️ AQUI, E SÓ AQUI, ENTRA A COR DO BRAÇO: `--cor` é impressa no
   elemento a partir de VNT_BRACOS. O cartão marcado acende na cor do
   PRODUTO, porque é o produto que está sendo escolhido. A marcação em si
   (o check) continua verde? Não: aqui o check acompanha o produto, senão
   o cartão teria duas cores brigando. */
.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:8px; height:4.5px; border:1.7px solid #fff; border-top:0; border-right:0;
  transform:rotate(-45deg) translate(0,-1px);
}

/* ---- passo 5: a conexão ---- */
.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;
}

/* ---------------------------------------------------------------------
   PREPARO — o spinner e a lista que acende
   --------------------------------------------------------------------- */
.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); } }
/* quem prefere menos movimento vê um pulso em vez de um giro */
@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:8px; height:4.5px; border:1.7px solid #fff; border-top:0; border-right:0;
  transform:rotate(-45deg) translate(0,-1px);
}

/* ---------------------------------------------------------------------
   CELULAR
   --------------------------------------------------------------------- */
@media (max-width:900px){
  .cad-split{ grid-template-columns:minmax(0,1fr); }
  /* ver o ⚠️ do topo: o lado escuro sai em vez de virar cabeçalho */
  .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%; }
  /* ⚠️ OS NOMES DOS PASSOS SOMEM NO CELULAR: cinco rótulos em 375px viram
     sopa de letra cortada. Ficam as bolas e o trilho, que já dizem onde a
     pessoa está; o nome do passo continua escrito na linha de baixo. */
  .cad-passo-nome{ display:none; }
  .cad-passo{ width:auto; }
  .cad-passos{ max-width:100%; }
}