/* ===================================================================== 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); /* ⚠️ O CHECK É UM ÍCONE, NÃO MAIS UMA BORDA ROTACIONADA (17/09/2026, achado medindo: "os checks estão desalinhados"). As quatro marcas de "concluído" (stepper, senha, cartão escolhido, lista do preparo) desenhavam o visto com um truque clássico de CSS — uma caixa com borda só embaixo e à esquerda, rotacionada -45° — e cada uma tinha um `translate()` cravado no olho tentando recentralizar o resultado. O problema é geométrico, não de medida errada: `place-items:center` centraliza o CENTRO DA CAIXA invisível, mas a tinta do "L" fica toda no canto inferior-esquerdo dela — o PESO VISUAL do risco sobra bem acima desse centro. Rotacionar em torno do centro da caixa não muda isso: o cotovelo do "L" (o canto onde as duas bordas se encontram) é que cai no centro, não o meio do risco. Provado com um ponto vermelho marcando o centro geométrico de verdade: ele caía exatamente no cotovelo do check, com o risco inteiro sobrando por cima — daí "desalinhado para cima" em todo lugar que usava o truque. A saída troca a caixa-com-borda pelo MESMO desenho que já existe e nunca foi motivo de reclamação — o ícone de check usado na lista de provas (cad_check() em criar_conta.php, o mesmo traço de qualquer ícone do portal). Um ícone desenhado por fora É simétrico em volta do próprio centro; `place-items`/`align-items:center` finalmente centraliza o que se vê, não um cotovelo invisível. */ --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; } /* ⚠️ 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 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:9px; height:9px; background-image:var(--cad-check-svg); background-size:contain; background-repeat:no-repeat; } /* ---- 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); /* ⚠️ O ANEL SÓLIDO (17/09/2026, foto dele: "a linha atravessa o check — não está centralizado"). Antes disto, o trilho (a linha do progresso) ficava "escondido" por trás da bolinha só porque os dois números coincidiam matematicamente — e coincidência de pixel é exatamente o tipo de coisa que quebra num zoom diferente, numa tela de outra densidade, ou num navegador que arredonda diferente. NÃO SE MEDE coincidência, se CONSTRÓI a garantia: este anel de 4px, opaco, na mesma cor da página, cria uma faixa de segurança em volta do círculo — qualquer pedacinho da linha que escorregasse para essa faixa é apagado por ela, sem depender de nada estar "exatamente" alinhado. Vale para os três estados (falta/agora/feito); o "agora" acrescenta o brilho translúcido dele por cima, não troca este anel por ele. */ 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; } /* ⚠️ 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); /* ⚠️ DUAS SOMBRAS NA MESMA LISTA: o anel sólido de 4px (a garantia contra a linha, ver o ⚠️ acima) MAIS o brilho translúcido — o passo de agora precisa saltar sem gritar. Uma troca a outra fora; as duas juntas é que valem. */ 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; } /* 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 é