/* ===========================================================================
   Folha de estilo única de zeracompany.com
   ---------------------------------------------------------------------------
   POR QUE ESTE ARQUIVO EXISTE
   O projeto não tem build. Antes, cada página carregaria a própria cópia do
   CSS dentro de uma tag <style>, e cinco cópias divergem em uma semana: alguém
   corrige o contraste do botão numa página e esquece das outras. Aqui é um
   arquivo só, servido por <link rel="stylesheet" href="/estilo.css"> em todas
   as páginas, inclusive a inicial.

   ONDE ELE PODE MORAR
   Fora de /assets/. O contrato escrito em public/_headers é claro: só entra em
   /assets/ arquivo com hash no nome, porque aquele diretório tem cache de um
   ano e imutável. Este arquivo não tem hash, então fica na raiz e segue o
   padrão do Pages para HTML e asset curto: revalidação a cada carga.

   CSP
   As duas políticas do projeto trazem style-src 'self' 'unsafe-inline'. Esta
   folha é servida do próprio domínio, então passa pelo 'self'. O JavaScript
   das páginas NÃO pode ser inline: script-src é 'self' sem 'unsafe-inline' e
   sem hash, então todo script fica em /js/.

   IDENTIDADE (revisão de 29/07/2026)
   A paleta antiga era verde genérico e não tinha relação com a marca. Agora:
     - AZUL-AÇO #5B7A99 é a Zera. É a cor institucional, a mesma do
       zeracompany.com. Usada em superfícies, bordas, eyebrow e detalhe.
     - VERDE #25D366 é o WhatsApp, e por isso é a cor de AÇÃO: botão de
       compra, item incluído, indicador de "sim". Verde aqui significa canal
       e conversão, nunca decoração.
   Quem confundir os dois papéis quebra a leitura da página: se tudo é verde,
   nada é ação.

   ORGANIZAÇÃO
   1. Variáveis e tema claro e escuro
   2. Base e tipografia
   3. Layout, cabeçalho, rodapé
   4. Botões
   5. Componentes da página de vendas
   6. Formulários, modal e estados de envio
   7. Páginas legais
   8. Animações de entrada
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. Fonte
   Inter variável, subset latin, servida do próprio domínio. Um arquivo cobre
   400 a 900. O Google Fonts por <link> custava ~1.360ms de render-blocking no
   site institucional, e a lição veio de lá. font-src no CSP é 'self'.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:"Inter";
  src:url("/fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------------------------------------------------------------------------
   1. Variáveis
   O site nasce escuro. O tema claro existe para quem configurou o sistema
   assim, e é derivado, não o contrário.
   --------------------------------------------------------------------------- */
/* CLARO NO MIOLO, ESCURO NAS ÂNCORAS.
   Esta é a mesma estrutura do zeracompany.com: herói escuro, corpo claro,
   rodapé escuro. Não é preferência de gosto, e a versão anterior deste arquivo
   (escura de ponta a ponta) errou por quatro motivos concretos:

   1. A página é feita de texto longo. São dezesseis perguntas, uma tabela
      comparativa e duas páginas legais inteiras. Texto corrido em fundo escuro
      cansa mais, e pior para quem tem astigmatismo.
   2. Os ativos da casa são desenhados para fundo claro. As logos de cliente são
      artes escuras, e no escuro só cabiam depois de inverter (matando a cor da
      marca) ou de ganhar uma placa clara por baixo. Quando todo asset precisa de
      adaptação, o fundo é que está errado.
   3. Tem cartão de crédito no fluxo. Fundo claro lê como instituição, e é o que
      as duas referências do mercado (Poli e 360dialog) usam.
   4. O herói 3D não some: ele continua escuro, que é onde luz aditiva funciona.

   Quem quiser conferir contraste: o par --tx sobre --bg passa em AA para texto
   normal, e --tx-soft sobre --bg-soft também. Não usar --tx-mute sobre --bg-soft
   em texto pequeno. */
:root{
  /* superfícies claras */
  --bg:#FFFFFF;
  --bg-soft:#F4F7FA;
  --bg-raise:#FFFFFF;
  --bg-lift:#F8FAFC;
  --line:#E1E8F0;
  --line-strong:#C3CEDB;

  /* texto */
  --tx:#111C29;
  --tx-soft:#44566B;
  --tx-mute:#61748A;

  /* Zera, institucional */
  --zera:#5B7A99;
  --zera-light:#47617B;
  --zera-dark:#35495E;
  --zera-soft:#EDF2F7;

  /* A COR DA MARCA no cabeçalho. É a mesma do logo-zera-azul.png que o
     zeracompany.com usa no header dele: #5B7A99, conferido pixel a pixel no
     arquivo. Fica em token próprio porque não pode seguir --tx: herdando a cor
     do texto, o "ZERA" saía quase preto e as duas marcas da casa apareciam em
     cores diferentes lado a lado. */
  --marca:#5B7A99;

  /* WhatsApp, ação. São três tokens porque o verde tem três papéis diferentes,
     e usar um só reprova em contraste:
       --brand     SUPERFÍCIE (botão, preenchimento). É o verde do WhatsApp,
                   sem diluir, porque aqui a cor é reconhecimento de marca.
       --brand-ink LETRA SOBRE o verde. Escuro, não branco: branco sobre este
                   verde dá 2,6:1 e reprova. Escuro dá 8,4:1.
       --brand-tx  quando o verde É a letra, sobre fundo claro. Precisa ser
                   escurecido: o verde de superfície sobre branco dá 1,9:1. */
  --brand:#25D366;
  --brand-tx:#0A7C3E;
  --brand-ink:#04231A;
  --brand-deep:#1EBA57;
  --brand-soft:#E8F7EF;
  --brand-line:#A9DEC2;

  /* compatibilidade: o checkout e as páginas legais usam --accent no foco */
  --accent:#47617B;

  --warn-bg:#FFF8EA;
  --warn-line:#E8CA92;
  --erro-bg:#FDECEC;
  --erro-line:#E0A2A2;
  --erro-tx:#96201F;
  --ok-bg:#E8F7EF;
  --ok-line:#A9DEC2;

  --shadow:0 1px 2px rgba(17,28,41,.05), 0 6px 20px rgba(17,28,41,.06);
  --shadow-lift:0 2px 6px rgba(17,28,41,.07), 0 18px 44px rgba(17,28,41,.11);
  --glow:0 0 0 1px rgba(18,184,92,.24), 0 12px 32px rgba(18,184,92,.16);

  --radius:16px;
  --radius-sm:11px;
  --maxw:1180px;
}

/* ÂNCORAS ESCURAS.
   Herói, rodapé e qualquer seção marcada com .escuro redefinem os mesmos tokens
   em versão escura. Como todo componente lê de variável, nada precisa de regra
   própria: o cartão, o botão e a tabela funcionam nos dois contextos sem
   duplicação. Foi por isso que a troca de tema coube em um bloco. */
.escuro{
  --bg:#0B1119;
  --bg-soft:#111925;
  --bg-raise:#16202D;
  --bg-lift:#1B2735;
  --line:#26344655;
  --line-strong:#33455C;

  --tx:#EAF0F7;
  --tx-soft:#AFBECE;
  --tx-mute:#8195A9;

  --zera:#8AA2B8;
  --zera-light:#A8BCCD;
  --zera-dark:#5B7A99;
  --zera-soft:#18222F;
  --marca:#FFFFFF;

  --brand:#25D366;
  --brand-tx:#3BE07A;
  --brand-ink:#07240F;
  --brand-deep:#1EBA57;
  --brand-soft:#102A1C;
  --brand-line:#1F6E43;

  --accent:#8AA2B8;

  --warn-bg:#241D10;
  --warn-line:#5A4523;
  --erro-bg:#2A1416;
  --erro-line:#6B2C30;
  --erro-tx:#FFB4B4;
  --ok-bg:#102A1C;
  --ok-line:#1F6E43;

  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --shadow-lift:0 2px 8px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.4);
  --glow:0 0 0 1px rgba(37,211,102,.22), 0 12px 40px rgba(37,211,102,.14);

  background:var(--bg);
  color:var(--tx);
}

/* ---------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{line-height:1.15; margin:0 0 .5em; letter-spacing:-.025em; font-weight:750}
h1{font-size:clamp(2.05rem, 5.6vw, 3.6rem)}
h2{font-size:clamp(1.65rem, 4.2vw, 2.55rem)}
h3{font-size:clamp(1.12rem, 2.4vw, 1.4rem)}
p{margin:0 0 1em}
ul{margin:0 0 1em; padding-left:1.1em}
li{margin:.3em 0}
strong{font-weight:650}
:focus-visible{outline:3px solid var(--zera-light); outline-offset:3px; border-radius:6px}
::selection{background:rgba(37,211,102,.26); color:var(--tx)}

/* ---------------------------------------------------------------------------
   3. Layout
   --------------------------------------------------------------------------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px}
.wrap.narrow{max-width:780px}
section{padding:clamp(56px,7.5vw,104px) 0; border-top:1px solid var(--line); position:relative}
section.plain{border-top:0}
.soft{background:var(--bg-soft)}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.76rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--zera-light);
  background:var(--zera-soft); border:1px solid var(--line);
  border-radius:999px; padding:6px 14px; margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 0 3px rgba(37,211,102,.18);
}
.lead{font-size:clamp(1.04rem,2.1vw,1.2rem); color:var(--tx-soft); max-width:64ch}
.muted{color:var(--tx-mute); font-size:.93rem}
.skip{position:absolute; left:-9999px; top:0; background:var(--bg); padding:12px 16px; z-index:100}
.skip:focus{left:12px; top:12px}
.center{text-align:center}
.center .lead{margin-inline:auto}
.center .eyebrow{margin-inline:auto}

/* cabeçalho de seção com o texto contido, para não virar parede de letra */
.sec-head{max-width:62ch}
.sec-head.center{margin-inline:auto}

/* ---------------------------------------------------------------------------
   3.1. Cabeçalho
   --------------------------------------------------------------------------- */
header.site{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background-color .2s ease;
}
@supports not (backdrop-filter: blur(4px)){ header.site{background:var(--bg)} }
header.site.rolou{border-bottom-color:var(--line); background:color-mix(in srgb, var(--bg) 94%, transparent)}

.bar{display:flex; align-items:center; gap:18px; min-height:70px; padding-block:12px}

.brand{display:flex; align-items:center; gap:9px; text-decoration:none; flex:0 0 auto; font-weight:750; letter-spacing:-.02em; font-size:1.06rem}
/* 44px é o piso: abaixo disso o "SYNC" da lockup, que tem um terço da altura
   do "ZERA", cai para menos de 10px e deixa de ser legível.
   A marca é SVG INLINE, não <img src>. O Pages estava devolvendo o HTML da home
   no lugar do arquivo .svg (Content-Type text/html), e com o X-Content-Type-Options
   nosniff da política o navegador recusa: a logo virava texto alternativo e o
   cabeçalho inteiro esticava para os 270px do atributo height. Inline não depende
   de roteamento nem de Content-Type, e ainda economiza uma requisição. */
.brand img, .brand svg.logo{display:block; height:44px; width:auto}
.brand svg.logo .zera{fill:var(--marca)}

/* Profundidade na marca.
   Chapada sobre o branco ela ficava sem peso, parecendo texto qualquer. Duas
   sombras em drop-shadow, e não box-shadow: drop-shadow acompanha o RECORTE do
   SVG, então a sombra nasce da forma das letras e dos cortes diagonais, em vez
   de um retângulo atrás. A primeira é curta e define a borda; a segunda é larga
   e difusa, e é ela que descola a marca do fundo.
   Valores contidos de propósito: sombra forte em logo de cabeçalho envelhece a
   página e briga com o conteúdo. */
.brand svg.logo{
  filter:
    drop-shadow(0 1px 0 rgba(17,28,41,.16))
    drop-shadow(0 3px 8px rgba(17,28,41,.16));
  transition:filter .22s ease, transform .22s ease;
}
.brand:hover svg.logo{
  filter:
    drop-shadow(0 1px 0 rgba(17,28,41,.2))
    drop-shadow(0 5px 14px rgba(17,28,41,.22));
  transform:translateY(-1px);
}
/* Dentro de âncora escura a sombra preta some no fundo. Ali o que dá relevo é
   um halo do próprio verde da marca, bem discreto. */
.escuro .brand svg.logo{
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.45))
    drop-shadow(0 0 12px rgba(37,211,102,.18));
}
/* O "SYNC" acompanha o contexto pelo mesmo motivo do resto: o verde de
   superfície some sobre branco. No cabeçalho claro ele usa a variante escura,
   e dentro de .escuro volta ao verde cheio do WhatsApp. */
.brand svg.logo .sync{fill:var(--brand-tx)}

nav.main{display:flex; gap:4px; margin-left:6px; flex:1 1 auto; align-items:center}
nav.main a{
  color:var(--tx-soft); text-decoration:none; font-size:.945rem; font-weight:550;
  white-space:nowrap; padding:9px 12px; border-radius:9px;
  transition:color .15s ease, background-color .15s ease;
}
nav.main a:hover{color:var(--tx); background:var(--bg-raise)}
nav.main a[aria-current="page"]{color:var(--tx); font-weight:650}
nav.main a[aria-current="page"]::after{
  content:""; display:block; height:2px; margin-top:5px; border-radius:2px; background:var(--brand);
}

.bar .actions{display:flex; gap:10px; align-items:center; flex:0 0 auto}

/* Seletor de idioma.
   São links de verdade, não um <select> com JavaScript: o buscador segue link,
   e quem quer abrir a outra versão em nova aba consegue. Cada um leva hreflang
   e lang próprios, então o leitor de tela anuncia "English" em inglês, e não com
   sotaque português. */
.idiomas{
  display:flex; align-items:center; gap:2px; margin-left:auto; flex:0 0 auto;
  border:1px solid var(--line); border-radius:10px; padding:3px; background:var(--bg-soft);
}
.idiomas a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; padding:6px 8px; border-radius:7px;
  font-size:.78rem; font-weight:700; letter-spacing:.04em;
  color:var(--tx-mute); text-decoration:none;
  transition:color .15s ease, background-color .15s ease;
}
.idiomas a:hover{color:var(--tx); background:var(--bg-raise)}
.idiomas a[aria-current="true"]{color:var(--tx); background:var(--bg-raise); box-shadow:var(--shadow)}
@media (max-width:1000px){
  /* No celular ele sai da barra e entra no fim do menu, onde há espaço.
     Na barra ele espremeria a marca ou o botão de compra. */
  .idiomas{margin-left:0; order:2}
}
@media (max-width:420px){
  .idiomas a{min-width:32px; padding:5px 6px; font-size:.72rem}
}

/* botão de menu no celular. Sem JavaScript ele não aparece, e a navegação
   inteira continua alcançável pelo rodapé, que repete todos os links. */
.menu-btn{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-strong); border-radius:11px;
  cursor:pointer; color:var(--tx); flex:0 0 auto;
}
.menu-btn span{display:block; width:19px; height:2px; background:currentColor; border-radius:2px; position:relative; transition:transform .2s ease, background-color .2s ease}
.menu-btn span::before,.menu-btn span::after{content:""; position:absolute; left:0; width:19px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease}
.menu-btn span::before{top:-6px}
.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1000px){
  nav.main{
    position:fixed; inset:70px 0 auto; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--bg); border-bottom:1px solid var(--line); padding:14px 22px 22px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .2s ease, opacity .2s ease; max-height:calc(100dvh - 70px); overflow-y:auto;
  }
  nav.main.aberto{transform:none; opacity:1; pointer-events:auto}
  nav.main a{padding:13px 12px; font-size:1.02rem}
  nav.main a[aria-current="page"]::after{display:none}
  .menu-btn{display:flex}
  .bar .actions .btn.ghost{display:none}
}
@media (max-width:420px){
  .bar{gap:10px}
  .brand img{height:32px}
  .bar .actions .btn{padding:9px 13px; font-size:.87rem}
}

/* ---------------------------------------------------------------------------
   3.2. Rodapé
   --------------------------------------------------------------------------- */
footer.site{
  border-top:1px solid var(--line); background:var(--bg-soft);
  padding:56px 0 40px; color:var(--tx-soft); font-size:.93rem;
}
footer.site .cols{display:grid; gap:34px 24px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
footer.site .cols .sobre{grid-column:span 2; min-width:0}
@media (max-width:760px){ footer.site .cols .sobre{grid-column:span 1} }
footer.site a{color:var(--tx-soft); text-decoration:none; transition:color .15s ease}
footer.site a:hover{color:var(--tx); text-decoration:underline}
footer.site .fbrand{font-weight:700; color:var(--tx); margin-bottom:10px; font-size:.95rem}
footer.site .flinks{list-style:none; padding:0; margin:0; display:grid; gap:9px}
footer.site .flogo{height:36px; width:auto; margin-bottom:14px; display:block}
footer.site .fim{
  margin-top:26px; padding-top:22px;
  display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between;
}
footer.site .fim p{margin:0; font-size:.86rem; color:var(--tx-mute); max-width:78ch}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Selo. É componente de confiança, então o texto dele é conferido contra a
   fonte: a Zera é Tech Provider aprovado pela Meta, e NÃO é BSP nem Solution
   Partner nem Meta Business Partner. Trocar este texto por um selo de programa
   que a empresa não tem é alegação falsa de parceria, e o concorrente checa. */
/* Selo oficial Meta Tech Provider.
   É a arte que a Meta emite para o programa, com o ano. Substituiu um selo
   tipográfico que eu havia desenhado por não ter encontrado a arte oficial na
   busca pública. Ela existe, e o Rodrigo a tem.
   A credencial que o selo afirma é a que a Zera possui: Tech Provider. Não
   trocar por "Meta Business Partner" nem "Solution Partner", que são programas
   de outro nível e a empresa não tem. */
/* O selo tem faixa própria, entre as colunas e a linha final.
   Antes ele ficava empilhado dentro da primeira coluna, espremido entre a
   descrição e os links, num canto que já estava cheio. Aqui ele fica isolado,
   com ar em volta, que é o tratamento que uma credencial pede. */
.faixa-selo{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:22px; margin-top:40px; padding-top:30px; border-top:1px solid var(--line);
}
.selos{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:14px}
/* Sem placa por baixo, de propósito.
   A primeira versão punha o selo dentro de um retângulo branco arredondado, e o
   resultado parecia adesivo colado no rodapé em vez de fazer parte dele.
   A arte já tem forma própria (escudo) e recorte limpo: só 1,4% dos pixels são
   semitransparentes, e são o antialiasing da borda, não sombra. Então ela assenta
   direto sobre o escuro. O leve halo claro da borda ajuda a destacar do fundo. */
.selo-oficial{height:104px; width:auto; flex:0 0 auto; display:block}
.selo-nota{
  margin:0; font-size:.88rem; color:var(--tx-soft); line-height:1.55;
  max-width:34ch; flex:1 1 220px;
}
.selo-nota b{display:block; color:var(--tx); font-weight:700; margin-bottom:3px}

.endereco{font-style:normal; color:var(--tx-soft); line-height:1.7}
.endereco a{text-decoration:none}
.mapa{
  margin-top:14px; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--bg-raise); display:block; text-decoration:none;
}
.mapa img{display:block; width:100%; height:auto}
.mapa .cap{display:block; padding:11px 14px; font-size:.86rem; color:var(--tx-soft)}

/* ---------------------------------------------------------------------------
   4. Botões
   --------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:inherit; font-weight:650; font-size:.98rem; line-height:1.2;
  padding:14px 22px; border-radius:12px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; position:relative;
  transition:transform .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .2s ease;
}
.btn.primary{background:var(--brand); color:var(--brand-ink); border-color:var(--brand); font-weight:700}
.btn.primary:hover{background:var(--brand-deep); border-color:var(--brand-deep); box-shadow:var(--glow); transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--tx); border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--zera-light); background:var(--bg-raise)}
.btn.small{padding:10px 16px; font-size:.9rem; border-radius:10px}
.btn.block{width:100%}
.btn:active{transform:translateY(1px)}
.btn[disabled], .btn[aria-disabled="true"]{opacity:.6; cursor:progress; transform:none; box-shadow:none}
.btn.perigo{background:transparent; color:var(--erro-tx); border-color:var(--erro-line)}
.btn.perigo:hover{background:var(--erro-bg)}
.cta-pair{display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 16px}
.cta-pair .btn{flex:1 1 240px}
@media (min-width:620px){ .cta-pair .btn{flex:0 0 auto} }
.center .cta-pair{justify-content:center}

/* seta que anda no hover, só onde o link é de avanço */
.btn .seta{transition:transform .15s ease}
.btn:hover .seta{transform:translateX(3px)}

/* ---------------------------------------------------------------------------
   5. Componentes da página de vendas
   --------------------------------------------------------------------------- */

/* 5.1. Hero com fundo 3D
   O canvas é decorativo e fica atrás do conteúdo. Se o WebGL não existir, o
   motor cai para canvas 2D sozinho; se nem isso, o gradiente abaixo segura a
   composição e nada quebra. */
.hero{
  position:relative; padding:clamp(64px,9vw,124px) 0 clamp(48px,6vw,84px);
  border-top:0; overflow:hidden; isolation:isolate;
}
.hero-fx{position:absolute; inset:0; z-index:-2; pointer-events:none}
.hero-fx canvas{display:block}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 62% 52% at 78% 18%, rgba(37,211,102,.13), transparent 62%),
    radial-gradient(ellipse 58% 60% at 12% 8%, rgba(91,122,153,.16), transparent 66%);
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:180px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bg));
}
.hero h1{max-width:16ch}
.hero .lead{max-width:58ch; font-size:clamp(1.06rem,2.3vw,1.28rem)}
.hero .trustbar{max-width:74ch}

.credline{
  border-left:3px solid var(--brand); padding:6px 0 6px 16px;
  color:var(--tx-soft); font-size:.95rem; max-width:60ch;
}

.trustbar{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; padding:0; list-style:none}
.trustbar li{
  font-size:.85rem; font-weight:600; color:var(--tx-soft);
  border:1px solid var(--line); border-radius:999px; padding:8px 15px;
  background:color-mix(in srgb, var(--bg-raise) 76%, transparent);
  display:inline-flex; align-items:center; gap:8px;
}
.trustbar li::before{
  content:""; width:14px; height:8px; flex:0 0 auto; margin-top:-3px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}

/* 5.2. Números de confiança, no padrão do 360dialog: pouco texto, número
   grande, e a fonte do dado ao lado. */
.numeros{
  display:grid; gap:2px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--line);
}
.numeros li{list-style:none; margin:0; background:var(--bg-raise); padding:26px 24px}
.numeros .num{
  display:block; font-size:clamp(1.9rem,4.4vw,2.5rem); font-weight:780;
  letter-spacing:-.035em; color:var(--tx); line-height:1.05;
}
.numeros .num em{font-style:normal; color:var(--brand-tx)}
.numeros .cap{display:block; font-size:.92rem; color:var(--tx-soft); margin-top:8px}

/* 5.3. Cartões */
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{
  background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow); position:relative;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card h3{margin-top:0}
.card p:last-child, .card ul:last-child{margin-bottom:0}
.card.hover:hover{transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--shadow-lift)}

.step-num{
  display:inline-grid; place-items:center; width:36px; height:36px; border-radius:11px;
  background:var(--brand-soft); color:var(--brand-tx); font-weight:780; font-size:1.02rem;
  border:1px solid var(--brand-line); margin-bottom:14px;
}
.note{
  background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:13px;
  padding:18px 20px; font-size:.96rem; color:var(--tx-soft); margin-top:24px;
}
.note strong{color:var(--tx)}

/* 5.4. Passos curtos. O pedido era bloco pequeno, uma palavra de título e o
   prazo. A explicação longa saiu daqui e virou a página /como-funciona. */
.passos{
  list-style:none; padding:0; margin:0; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); counter-reset:passo;
}
.passos li{
  background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px; position:relative; counter-increment:passo;
}
.passos li::before{
  content:counter(passo,decimal-leading-zero);
  font-size:.8rem; font-weight:780; letter-spacing:.1em; color:var(--brand-tx);
}
.passos b{display:block; margin:10px 0 6px; font-size:1.12rem; letter-spacing:-.02em}
.passos span{display:block; color:var(--tx-soft); font-size:.93rem}
.passos .prazo{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:.84rem; font-weight:650; color:var(--zera-light);
}

/* 5.5. Vitrine de produto. Produto tem que aparecer cedo e ter cara de
   produto: um símbolo, o nome, o preço e o caminho de compra. */
.vitrine{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:stretch}
/* A régua entre a capa e o corpo saía em alturas diferentes, porque a descrição
   de cada produto tem um número diferente de linhas. Com subgrid, capa e corpo
   viram linhas do MESMO grid: a divisória nasce na mesma altura nos três, e
   continua assim se o texto mudar. Sem subgrid (navegador antigo), o flex de
   antes segue valendo e o resultado é o de sempre. */
@supports (grid-template-rows: subgrid){
  @media (min-width:900px){
    .vitrine{grid-template-rows:auto auto}
    .produto{display:grid; grid-row:span 2; grid-template-rows:subgrid; gap:0}
  }
}
.produto{
  display:flex; flex-direction:column; background:var(--bg-raise);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.produto:hover{transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--shadow-lift)}
.produto .capa{
  position:relative; padding:30px 24px 24px; border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 90% 120% at 82% 0%, rgba(37,211,102,.10), transparent 60%),
    linear-gradient(160deg, var(--bg-lift), var(--bg-raise));
}
.produto .icone{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--zera-soft); border:1px solid var(--line-strong); color:var(--zera-light); margin-bottom:16px;
}
.produto .icone svg{width:26px; height:26px}
.produto.destaque .icone{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand-tx)}
.produto .capa h3{margin:0 0 6px; font-size:1.3rem}
.produto .capa .who{margin:0; color:var(--tx-soft); font-size:.94rem}
.produto .corpo{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1 1 auto}
.produto .de-por{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:4px}
.produto .valor{font-size:1.9rem; font-weight:780; letter-spacing:-.035em}
.produto .unid{font-size:.86rem; color:var(--tx-mute)}
.produto ul{list-style:none; padding:0; margin:16px 0 0; font-size:.94rem}
.produto ul li{position:relative; padding-left:25px; margin:.52em 0; color:var(--tx-soft)}
.produto ul li::before{
  content:""; position:absolute; left:2px; top:.5em; width:12px; height:6px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(-45deg);
}
.produto .pe{margin-top:auto; padding-top:22px}
.produto .tag{
  position:absolute; top:18px; right:18px; background:var(--brand); color:var(--brand-ink);
  font-size:.7rem; font-weight:780; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
}

/* 5.6. Tabela de preços
   Os cartões desalinhavam porque cada um tinha texto de tamanho diferente e
   nada amarrava as linhas entre eles. Agora cada cartão é um subgrid do mesmo
   grid, então título, descrição, preço, botão e lista começam na MESMA altura
   nos três. Onde não há subgrid, o flex antigo continua valendo e o resultado
   é o de antes: aceitável, não quebrado. */
.plans{
  display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  align-items:stretch;
}
@supports (grid-template-rows: subgrid){
  @media (min-width:900px){
    .plans{grid-template-rows:auto auto auto auto auto}
    .plan{display:grid; grid-row:span 5; grid-template-rows:subgrid; gap:0}
  }
}
.plan{
  background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px; display:flex; flex-direction:column; box-shadow:var(--shadow); position:relative;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.plan:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.plan.featured{border-color:var(--brand); box-shadow:var(--glow)}
.plan .badge{
  position:absolute; top:-13px; left:24px; background:var(--brand); color:var(--brand-ink);
  font-size:.72rem; font-weight:780; letter-spacing:.09em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
}
.plan h3{margin-bottom:8px; font-size:1.32rem}
.plan .who{color:var(--tx-soft); font-size:.94rem; margin-bottom:18px}
.price{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin:0}
.price .was{color:var(--tx-mute); font-size:1.05rem; text-decoration:line-through}
.price .now{font-size:2.5rem; font-weight:790; letter-spacing:-.04em}
.price .per{color:var(--tx-mute); font-size:.9rem}
.total{font-size:.92rem; color:var(--tx-soft); margin:8px 0 0; font-weight:600}
.plan ul{list-style:none; padding:0; margin:16px 0 0; font-size:.945rem}
.plan ul li{position:relative; padding-left:25px; margin:.52em 0; color:var(--tx-soft)}
.plan ul li::before{
  content:""; position:absolute; left:2px; top:.5em; width:12px; height:6px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(-45deg);
}
.plan ul li.no{color:var(--tx-mute)}
.plan ul li.no::before{
  content:""; width:11px; height:2px; border:0; background:var(--line-strong); transform:none; top:.85em;
}
.plan .inc-title{font-size:.79rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-mute); margin:22px 0 0}
.plan-foot{margin-top:auto; padding-top:22px}
@supports (grid-template-rows: subgrid){
  @media (min-width:900px){
    .plan-foot{margin-top:0}
    .plan > *{margin-left:0; margin-right:0}
  }
}

.pricing-controls{
  background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; margin:28px 0 26px; box-shadow:var(--shadow);
  display:grid; gap:22px;
}
@media (min-width:840px){ .pricing-controls{grid-template-columns:1fr 1fr; align-items:start} }
.ctrl-label{display:block; font-weight:650; font-size:.98rem; margin-bottom:12px}
.ctrl-help{font-size:.86rem; color:var(--tx-mute); margin:10px 0 0}
.seg{display:flex; flex-wrap:wrap; gap:8px}
.seg input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.seg label{
  display:inline-flex; align-items:center; justify-content:center; min-width:54px;
  padding:11px 15px; border:1px solid var(--line-strong); border-radius:11px;
  font-weight:650; font-size:.95rem; cursor:pointer; background:var(--bg);
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.seg label:hover{border-color:var(--zera-light)}
.seg input:checked + label{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.seg input:focus-visible + label{outline:3px solid var(--zera-light); outline-offset:3px}
.switch{display:flex; align-items:flex-start; gap:13px; cursor:pointer}
.switch input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.switch .track{
  flex:0 0 auto; width:52px; height:30px; border-radius:999px; background:var(--bg-soft);
  border:1px solid var(--line-strong); position:relative; margin-top:2px;
  transition:background-color .15s ease, border-color .15s ease;
}
.switch .track::after{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:var(--tx-mute); transition:transform .15s ease, background-color .15s ease;
}
.switch input:checked + .track{background:var(--brand); border-color:var(--brand)}
.switch input:checked + .track::after{transform:translateX(22px); background:var(--brand-ink)}
.switch input:focus-visible + .track{outline:3px solid var(--zera-light); outline-offset:3px}
.switch .txt{font-size:.95rem}
.switch .txt b{display:block; font-weight:650}
.config-line{font-size:.92rem; color:var(--tx-soft); margin:0}

/* 5.6.1. Interruptor mensal/anual
   O seletor de período reaproveita o .seg da calculadora, então ele já nasce
   com estado marcado visível e com foco de teclado. O que muda é só o entorno:
   nas páginas sem calculadora (a inicial e as três de plano anual) ele aparece
   sozinho, e por isso ganha caixa própria.
   As linhas de parcela, economia e selo NÃO são exclusivas do JavaScript: elas
   estão escritas no HTML, e sem JavaScript aparecem junto com o bloco mensal,
   uma embaixo da outra. Nenhum preço some da página. */
.ciclo-switch{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin:26px 0 22px; padding:16px 18px;
  background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius);
}
.ciclo-switch .ctrl-label{margin-bottom:0}
.ciclo-nota{font-size:.9rem; color:var(--tx-soft); margin:0; flex:1 1 240px}
.selo-economia{
  display:inline-block; padding:5px 11px; border-radius:999px;
  background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--brand-tx);
  font-size:.78rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase;
}
.parcela{font-size:.92rem; color:var(--tx-soft); margin:8px 0 0; font-weight:600}
.economia{display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:10px 0 0; font-size:.9rem; color:var(--tx-soft)}
.plan .price.anual .now, .produto .de-por.anual .valor{color:var(--brand-tx)}
.riscado{text-decoration:line-through}
/* Duas utilidades de espaçamento, para o HTML novo não precisar de style=""
   no elemento. Estilo inline funciona neste site (o style-src tem
   'unsafe-inline' por causa do SDK da Meta), mas ele é invisível para quem lê
   a folha de estilo e some do radar na hora de mudar o espaçamento de tudo. */
.sem-margem-fim{margin-bottom:0}
.espaco-acima{margin-top:20px}
/* O bloco de preço é UM item do grid, com todas as linhas do período dentro.
   Sem esse embrulho, cada linha nova do plano anual (parcela, total, economia)
   viraria uma linha a mais do subgrid dos três cartões, e o botão de cada um
   pararia numa altura diferente. */
.preco-bloco{display:block}

.addon{
  margin-top:24px; border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:13px; padding:24px; background:var(--bg-raise);
}
.strip{
  margin-top:18px; border:1px dashed var(--line-strong); border-radius:13px; padding:18px 20px;
  font-size:.95rem; color:var(--tx-soft); display:flex; gap:14px; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
}

/* 5.7. Tabela comparativa */
.table-scroll{
  overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-raise); -webkit-overflow-scrolling:touch;
}
table{border-collapse:collapse; width:100%; min-width:820px; font-size:.92rem}
caption{text-align:left; padding:16px 18px; color:var(--tx-mute); font-size:.88rem}
th,td{padding:13px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
thead th{background:var(--bg-soft); font-size:.83rem; letter-spacing:.03em; position:sticky; top:0; color:var(--tx)}
tbody th{font-weight:600; color:var(--tx)}
td.yes{color:var(--brand-tx); font-weight:650}
td.no{color:var(--tx-mute)}
tr.highlight td, tr.highlight th{background:var(--brand-soft)}
tr.highlight td.yes{color:var(--brand-tx)}
tr:last-child th, tr:last-child td{border-bottom:0}

/* 5.8. Prova e segmentos */
.stats{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin:26px 0 8px; padding:0; list-style:none}
.stats li{background:var(--bg-raise); border:1px solid var(--line); border-radius:13px; padding:22px}
.stats .num{display:block; font-size:clamp(1.8rem,4vw,2.2rem); font-weight:780; letter-spacing:-.035em; color:var(--brand-tx)}
.stats .cap{display:block; font-size:.9rem; color:var(--tx-soft); margin-top:6px}

.segments{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(262px,1fr)); padding:0; list-style:none; margin:26px 0 0}
.segments li{border:1px solid var(--line); border-radius:13px; padding:20px; background:var(--bg-raise); transition:border-color .2s ease, transform .2s ease}
.segments li:hover{border-color:var(--line-strong); transform:translateY(-2px)}
.segments li.first{border-color:var(--brand-line); border-left-width:4px}
.segments b{display:block; margin-bottom:7px; font-size:1.02rem}
.segments span{color:var(--tx-soft); font-size:.93rem}

/* 5.9. Cases. Cada cartão traz cliente, segmento e o que a operação faz.
   Sem número inventado: onde não há métrica publicável, o cartão descreve o
   uso real e nada mais. */
.cases{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.case{
  background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; display:flex; flex-direction:column; gap:14px;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.case:hover{transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--shadow-lift)}
/* A logo do cliente vai INTEIRA, na cor original da marca dele. Com o corpo do
   site claro ela não precisa de inversão nem de placa por baixo: é a superfície
   para a qual esses arquivos foram desenhados. Foram duas tentativas até chegar
   aqui, e as duas anteriores existiam só para compensar o fundo escuro. */
.case .logo{align-self:flex-start; display:flex; align-items:center; min-height:40px}
.case .logo img{max-height:38px; width:auto; max-width:158px; object-fit:contain; display:block}
.case .seg{
  font-size:.72rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase;
  color:var(--zera-light);
}
.case h3{margin:0; font-size:1.1rem}
.case p{margin:0; color:var(--tx-soft); font-size:.94rem}
/* A base do cartão precisa alinhar entre os quatro. `margin-top:auto` já joga
   este bloco para o fim, mas as frases têm comprimentos diferentes: umas
   ocupam uma linha e outras duas, então a régua acima delas terminava em
   alturas diferentes e a fileira ficava torta.
   Reservar SEMPRE duas linhas resolve sem cortar texto: quem usa uma linha fica
   com uma de folga, e a régua nasce na mesma altura nos quatro. */
.case .marca{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  font-size:.88rem; color:var(--brand-tx); font-weight:650; line-height:1.45;
  min-height:calc(2 * 1.45em + 14px);
  display:flex; align-items:flex-start;
}

/* faixa de logos, no padrão do institucional */
.logos{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:20px 40px; padding:0; margin:0; list-style:none;
}
.logos li{display:flex; align-items:center}
.logos img{
  height:30px; width:auto; opacity:.62; filter:grayscale(1);
  transition:opacity .2s ease, filter .2s ease;
}
.logos li:hover img{opacity:1; filter:grayscale(0)}

/* 5.10. Perguntas */
.faq{max-width:82ch}
details{
  border:1px solid var(--line); border-radius:13px; background:var(--bg-raise);
  margin-bottom:10px; transition:border-color .18s ease;
}
details[open]{border-color:var(--line-strong)}
summary{
  cursor:pointer; list-style:none; padding:18px 50px 18px 20px;
  font-weight:650; position:relative; border-radius:13px;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:""; position:absolute; right:22px; top:24px; width:9px; height:9px;
  border-right:2px solid var(--tx-mute); border-bottom:2px solid var(--tx-mute);
  transform:rotate(45deg); transition:transform .18s ease;
}
details[open] summary::after{transform:rotate(225deg); top:27px}
details .answer{padding:0 20px 20px; color:var(--tx-soft); font-size:.97rem}
details .answer p:last-child{margin-bottom:0}

/* busca do FAQ. Roda no navegador, sobre o texto que já está na página.
   Não chama servidor, não chama modelo e não custa token nenhum. */
.busca{position:relative; margin:26px 0 20px; max-width:640px}
/* O seletor precisa incluir [type="text"]. A regra genérica de campo, na seção 6,
   é `input[type="text"]`, que tem a MESMA especificidade de `.busca input` e vem
   depois nesta folha: ela vencia o desempate e zerava o padding-left de 48px,
   fazendo o texto passar por baixo do ícone da lupa. */
.busca input[type="text"]{
  width:100%; font:inherit; color:var(--tx); background:var(--bg-raise);
  border:1px solid var(--line-strong); border-radius:13px; padding:15px 17px 15px 48px;
}
.busca input::placeholder{color:var(--tx-mute)}
.busca svg{
  position:absolute; left:17px; top:50%; transform:translateY(-50%);
  width:19px; height:19px; color:var(--tx-mute); pointer-events:none;
}
.busca-status{margin:0 0 18px; font-size:.92rem; color:var(--tx-soft); min-height:1.4em}
details[hidden]{display:none !important}
mark{background:rgba(37,211,102,.26); color:inherit; border-radius:3px; padding:0 2px}
.faq-grupo{margin:0 0 12px; font-size:.79rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-mute)}
.faq-grupo:not(:first-child){margin-top:34px}

/* 5.10b. Seção de alcance, com o globo
   O globo é acompanhamento, não conteúdo: se ele não carregar (tela pequena,
   economia de dados, sem WebGL), o texto continua de pé sozinho e a seção não
   fica com um buraco. Por isso o palco tem altura só a partir do tamanho em que
   ele realmente entra. */
.alcance-grid{display:grid; gap:38px; align-items:center}
@media (min-width:900px){
  .alcance-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
}
.globo-palco{display:none}
@media (min-width:900px){
  .globo-palco{
    display:block; position:relative; width:100%; aspect-ratio:1/1;
    max-width:520px; margin-inline:auto;
  }
  #globo{position:absolute; inset:0}
  #globo canvas{display:block}
  /* NAO colocar halo de CSS aqui. Existiu um, e ele somava com a atmosfera
     Fresnel do shader: o resultado era um lado do globo estourado em ciano e o
     outro sumindo no fundo. O brilho da borda é responsabilidade do shader, que
     sabe onde está a silhueta; o CSS não sabe. */
}

/* 5.11. Fecho */
.final{background:var(--bg-soft)}
.final .box{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-raise);
  padding:clamp(28px,5vw,56px); box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.final .box::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 88% 0%, rgba(37,211,102,.10), transparent 62%);
}
.final .box > *{position:relative}

/* trilha de migalhas nas sub-páginas */
.trilha{font-size:.87rem; color:var(--tx-mute); margin:0 0 18px}
.trilha a{color:var(--tx-soft); text-decoration:none}
.trilha a:hover{color:var(--tx); text-decoration:underline}
.trilha span{margin:0 7px; opacity:.55}

/* cabeçalho curto das sub-páginas */
.topo-pagina{
  padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,44px); border-top:0; position:relative; overflow:hidden;
}
.topo-pagina::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 70% at 20% 0%, rgba(91,122,153,.14), transparent 66%);
}
.topo-pagina > *{position:relative}

/* ---------------------------------------------------------------------------
   6. Formulários, modal e estados de envio
   Bloco preservado do arquivo anterior. As classes daqui são usadas por
   comecar.html, diagnostico.html, entrar.html e painel/, e os scripts dessas
   telas procuram por elas pelo nome. Renomear qualquer uma quebra o checkout
   sem erro visível.
   --------------------------------------------------------------------------- */
.form-card{
  background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(22px,3vw,32px); box-shadow:var(--shadow);
}
.campos{display:grid; gap:18px}
@media (min-width:680px){ .campos.duas{grid-template-columns:1fr 1fr} }
.campo{display:flex; flex-direction:column; gap:6px}
.campo.largo{grid-column:1 / -1}
.campo > label, .grupo > legend{font-weight:650; font-size:.96rem}
.campo .dica{font-size:.86rem; color:var(--tx-mute)}
input[type="text"], input[type="email"], input[type="tel"], select, textarea{
  font:inherit; color:var(--tx); background:var(--bg);
  border:1px solid var(--line-strong); border-radius:11px; padding:13px 14px; width:100%;
}
textarea{min-height:130px; resize:vertical; line-height:1.55}
select{appearance:none; background-image:none}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:3px solid var(--zera-light); outline-offset:2px}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"]{border-color:var(--erro-line); background:var(--erro-bg)}
.campo .erro-campo{font-size:.86rem; color:var(--erro-tx); font-weight:600; min-height:0}

.grupo{border:1px solid var(--line); border-radius:13px; padding:18px 20px; margin:0}
.grupo legend{padding:0 6px}
.grupo .dica{font-size:.88rem; color:var(--tx-mute); margin:2px 0 12px}
.opcoes{display:grid; gap:10px}
@media (min-width:620px){ .opcoes.duas{grid-template-columns:1fr 1fr} }
.opcao{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  border:1px solid var(--line); border-radius:11px; background:var(--bg); cursor:pointer; font-size:.95rem;
}
.opcao:hover{border-color:var(--line-strong)}
.opcao input{margin:3px 0 0; flex:0 0 auto; width:18px; height:18px; accent-color:var(--brand)}
.opcao:has(input:checked){border-color:var(--brand); background:var(--brand-soft)}
.opcao span{color:var(--tx-soft)}
.opcao:has(input:checked) span{color:var(--tx)}

.consent{
  display:flex; align-items:flex-start; gap:11px; font-size:.93rem; color:var(--tx-soft);
  border:1px solid var(--line); border-radius:13px; padding:15px 17px; background:var(--bg);
}
.consent input{margin:3px 0 0; flex:0 0 auto; width:18px; height:18px; accent-color:var(--brand)}

/* Honeypot. Fica fora da tela em vez de display:none porque parte dos robôs
   ignora campo escondido por display, e ninguém que usa leitor de tela chega
   nele: aria-hidden e tabindex -1 tiram do caminho de quem é gente. */
.armadilha{position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden}

.resumo{
  border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:13px;
  background:var(--bg-raise); padding:22px 24px; box-shadow:var(--shadow);
}
.resumo h2{font-size:1.15rem; margin-bottom:12px}
.resumo dl{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:0 0 4px; font-size:.96rem}
.resumo dt{color:var(--tx-mute)}
.resumo dd{margin:0; font-weight:600; text-align:right}
.resumo .linha-total{border-top:1px solid var(--line); margin-top:12px; padding-top:12px; display:flex; justify-content:space-between; align-items:baseline; gap:14px}
.resumo .linha-total .valor{font-size:1.5rem; font-weight:780; letter-spacing:-.03em}
.resumo .obs{font-size:.86rem; color:var(--tx-mute); margin:12px 0 0}
.resumo .trocar{font-size:.9rem; margin:10px 0 0}

.aviso{border-radius:13px; padding:15px 17px; font-size:.95rem; margin:0 0 18px}
.aviso.erro{background:var(--erro-bg); border:1px solid var(--erro-line); color:var(--erro-tx)}
.aviso.ok{background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--tx)}
.aviso.info{background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--tx-soft)}
.aviso strong{color:inherit}
.aviso p:last-child{margin-bottom:0}
[hidden]{display:none !important}

.enviando{display:inline-flex; align-items:center; gap:9px}
.enviando::before{
  content:""; width:15px; height:15px; border-radius:50%; flex:0 0 auto;
  border:2px solid currentColor; border-top-color:transparent; animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}

/* Modal de pré-requisitos. <dialog> nativo, sem biblioteca. O ::backdrop só
   existe quando a caixa foi aberta por showModal(); no caminho de reserva
   (atributo open), a caixa aparece no fluxo da página e continua utilizável. */
dialog.caixa{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-raise); color:var(--tx);
  padding:0; max-width:640px; width:calc(100% - 32px); box-shadow:var(--shadow-lift);
}
dialog.caixa::backdrop{background:rgba(4,8,12,.72)}
dialog.caixa .cabeca{padding:26px 26px 4px}
dialog.caixa .corpo{padding:0 26px}
dialog.caixa .pe{padding:20px 26px 26px; display:flex; flex-wrap:wrap; gap:10px; align-items:center}
dialog.caixa h2{font-size:1.3rem}
dialog.caixa .opcoes{margin-bottom:14px}

/* Sem JavaScript, o formulário não envia (a chamada é por fetch e o servidor
   espera JSON). Em vez de deixar o botão enviar por GET e vazar e-mail e
   documento na barra de endereço, o botão nasce desligado no HTML e o aviso
   abaixo aparece. */
.sem-js{margin-bottom:22px}

/* ---------------------------------------------------------------------------
   7. Páginas legais
   --------------------------------------------------------------------------- */
.legal{max-width:76ch}
.legal h2{margin-top:1.8em; font-size:clamp(1.3rem,3vw,1.7rem)}
.legal h3{margin-top:1.4em}
.legal h2:first-of-type{margin-top:1em}
.legal ul{padding-left:1.2em}
.legal li{margin:.45em 0}
.legal .destaque{border-left:3px solid var(--brand); padding:2px 0 2px 16px; color:var(--tx-soft); margin:1.2em 0}
.legal table{min-width:0; width:100%; font-size:.93rem}
.legal .table-scroll{margin:1.2em 0}
.indice{border:1px solid var(--line); border-radius:13px; background:var(--bg-raise); padding:20px 22px; margin:26px 0 6px}
.indice p{font-weight:650; margin:0 0 8px; font-size:.95rem}
.indice ol{margin:0; padding-left:1.3em; font-size:.95rem; columns:2; column-gap:26px}
@media (max-width:620px){ .indice ol{columns:1} }
.indice a{color:var(--tx-soft)}
.indice a:hover{color:var(--tx)}
.datas{font-size:.9rem; color:var(--tx-mute); border-top:1px solid var(--line); padding-top:16px; margin-top:34px}

/* ---------------------------------------------------------------------------
   8. Animações de entrada
   O elemento nasce visível no CSS e só é escondido quando o JavaScript
   confirma que vai animar (classe .js no <html>). Sem isso, quem entra com
   JavaScript bloqueado veria a página em branco, que é a falha clássica
   desse padrão.
   --------------------------------------------------------------------------- */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1)}
.js .reveal.dentro{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1 !important; transform:none !important}
}

/* Relógio da oferta de lançamento. Ver /js/contador.js, que explica o que ele
   é e o que ele deliberadamente não faz. */
.oferta-relogio{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;
  margin:0 0 1.25rem;padding:.6rem .9rem;border-radius:8px;
  background:color-mix(in srgb, var(--acento, #ff6b4a) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--acento, #ff6b4a) 35%, transparent);
  font-size:.92rem}
.oferta-relogio strong{font-weight:700}
.oferta-tempo{font-variant-numeric:tabular-nums;font-weight:700}
@media (max-width:520px){.oferta-relogio{font-size:.85rem}}