/* ===========================================================================
   Folha de estilo única de zerasync.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.
   --------------------------------------------------------------------------- */
:root{
  /* superfícies */
  --bg:#080C12;
  --bg-soft:#0D131C;
  --bg-raise:#131C27;
  --bg-lift:#18232F;
  --line:#233040;
  --line-strong:#31435A;

  /* texto */
  --tx:#E8EEF5;
  --tx-soft:#A9B8C9;
  --tx-mute:#7A8B9E;

  /* Zera, institucional */
  --zera:#5B7A99;
  --zera-light:#8AA2B8;
  --zera-dark:#47617B;
  --zera-soft:#16202C;

  /* WhatsApp, ação */
  --brand:#25D366;
  --brand-ink:#0B1F16;
  --brand-deep:#1EBA57;
  --brand-soft:#0E2A1C;
  --brand-line:#1F6E43;

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

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

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

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

/* NÃO EXISTE TEMA CLARO AQUI, E É DE PROPÓSITO.
   A versão anterior deste arquivo trocava a paleta inteira por
   prefers-color-scheme, e o resultado prático era um segundo site que ninguém
   revisava: metade dos visitantes via um layout que nunca passou por conferência
   de contraste, a marca trocava de arquivo no cabeçalho, e o herói 3D, que é
   luz aditiva sobre fundo escuro, ficava lavado e sem leitura no claro.
   O site é escuro sempre. O <meta name="theme-color"> das páginas acompanha.
   Para fundo claro (e-mail, apresentação, documento) existe
   /img/zerasync-logo-escuro.svg, que não é usado por nenhuma página. */

/* ---------------------------------------------------------------------------
   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. */
.brand img{display:block; height:44px; width:auto}
/* A marca do ZeraSync é imagem. O bloco .mark abaixo é o antigo losango e
   continua no CSS porque o painel e o checkout ainda o usam no cabeçalho
   curto deles. Não apagar sem varrer painel/ e comecar.html. */
.brand .mark{width:26px;height:26px;border-radius:8px;background:var(--brand);display:grid;place-items:center;flex:0 0 auto}
.brand .mark svg{width:15px;height:15px;display:block}

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; margin-left:auto; flex:0 0 auto}

/* 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:44px; padding-top:26px; border-top:1px solid var(--line);
  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{
  display:inline-flex; align-items:center; gap:10px; padding:10px 15px;
  border:1px solid var(--line); border-radius:12px; background:var(--bg-raise);
  font-size:.84rem; font-weight:600; color:var(--tx-soft); line-height:1.3; text-decoration:none;
}
.selo svg{width:20px; height:20px; flex:0 0 auto; color:var(--brand)}
.selo b{display:block; color:var(--tx); font-weight:700}
.selos{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}

.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)}
.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); 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);
}
.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}
.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)}
.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}

.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); 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)}
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)}
.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)}
.case .logo{height:34px; display:flex; align-items:center}
/* As logos vêm do site institucional, que é claro: são artes ESCURAS, e sobre
   este fundo elas simplesmente sumiam. `brightness(0) invert(1)` achata cada
   uma para branco puro e devolve a legibilidade sem precisar refazer arquivo
   por cliente. A opacidade abaixo de 1 evita que a logo grite mais que o texto
   do próprio case. */
.case .logo img{
  max-height:34px; width:auto; max-width:150px; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.82;
  transition:opacity .2s ease;
}
.case:hover .logo img{opacity:1}
.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}
.case .marca{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  font-size:.88rem; color:var(--brand); font-weight:650;
}

/* 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.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}
}