/* ═══════════════════════════════════════════════════════════════════════
 * site.css — o que é de TODAS as páginas (19/09/2026)
 *
 * Extraído porque o site chegou a nove páginas e cada uma carregava a sua
 * cópia do mesmo sistema: 32 regras repetidas em 6+ arquivos, 24 KB de
 * duplicação. O custo não era o peso — era a deriva. O cabeçalho quebrou em
 * 19/09 justamente por copiar CSS entre páginas com expressão regular.
 *
 * ⚠️ CARREGA ANTES do <style> de cada página, sempre. A folha local existe
 * para o que é SÓ daquela página e precisa poder sobrescrever esta.
 *
 * ⚠️ Cache: sem build, o nome do arquivo nunca muda e nada invalida o cache.
 * Este arquivo tem de expirar junto com o HTML — ver a nota do .js no
 * CLAUDE.md, que documenta o dia em que esta lição custou caro.
 * ═══════════════════════════════════════════════════════════════════════ */
/* ═══ A RÉGUA, para todas as páginas ═══
 * ⚠️ Estava só dentro do <style> de cada página, e cada uma tinha um PEDAÇO
 * diferente: a /empresa não conhecia `--s-800` nem `--r-3xl`, então o herói
 * novo nascia sem respiro no topo e sem canto arredondado — e o sintoma é
 * silencioso, porque `padding:var(--nao-existe)` não é erro, é zero.
 * Token novo entra AQUI, nunca na folha de uma página só. */
:root{
  --s-25:2px;   --s-50:4px;   --s-75:8px;   --s-100:12px; --s-200:16px;
  --s-300:24px; --s-400:32px; --s-500:40px; --s-600:48px; --s-700:64px;
  --s-800:80px; --s-900:96px;
  --r-md:6px; --r-lg:8px; --r-xl:12px; --r-2xl:16px; --r-3xl:24px; --r-full:9999px;
  --ease:cubic-bezier(.32,.72,0,1);
  /* ⚠️ A medida da página CRESCE com a tela. Vive aqui e não na folha de cada
     página: travada em 1360, uma janela de 1920 deixava 29% de vazio nas
     laterais. As colunas de TEXTO têm teto próprio, então quem ganha largura
     são as grades — onde largura vira informação, não linha longa demais. */
  --maxw:1360px;
}
@media (min-width:1600px){:root{--maxw:1520px}}
@media (min-width:1900px){:root{--maxw:1660px}}
@media (min-width:2400px){:root{--maxw:1820px}}


@font-face{ font-family:Geist; src:url('/geist.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }

*,*::before,*::after{box-sizing:border-box}

a{color:inherit;text-decoration:none}

p{margin:0;text-wrap:pretty}

.wrap{max-width:720px;margin:0 auto;padding:0 var(--s-300)}

.skip:focus{top:var(--s-100)}

header{border-bottom:1px solid var(--line);padding:var(--s-200) 0}

.logo__selo{width:30px;height:25px;flex:none;display:block;margin-right:8px}

.logo b{color:var(--marca)}

.foot-cnpj{margin:12px 0 0;font-size:12px;line-height:16px;color:var(--txt-3)}

.foot-cnpj a{color:inherit}

.foot-cnpj a:hover{color:var(--marca)}

/* ═══ CABEÇALHO ÚNICO DO SITE (19/09/2026) ═══ * ⚠️ Escrito à mão, NÃO copiado do index por regex. A primeira tentativa foi * extrair as regras com expressão regular, e ela puxou junto o conteúdo de * dentro das media queries — o menu de celular virou regra de topo e o link do * desktop ficou com padding de 16x24 px, estourando a barra em 102 px. Copiar * CSS por regex entre páginas não funciona; o certo é uma folha compartilhada. */ header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86); backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid transparent;transition:border-color .4s var(--ease),background-color .4s var(--ease)}

header.scrolled{border-bottom-color:var(--line);background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}

/* ⚠️ Acompanha a medida do conteúdo. Travado em 1360 enquanto o corpo
   crescia, o cabeçalho ficava mais estreito que a página embaixo dele. */
header .wrap{max-width:var(--maxw,1360px)}

.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-300);height:64px}

.logo{display:flex;align-items:center;font-size:18px;line-height:28px;font-weight:700;letter-spacing:-.03em;flex:none}

.nav-links{display:flex;align-items:center;gap:var(--s-400);font-size:14px;line-height:20px;color:var(--txt-2);font-weight:500}

.nav-links a{padding:var(--s-75) 0;border-bottom:2px solid transparent;white-space:nowrap; transition:color .3s var(--ease),border-color .3s var(--ease)}

.nav-links a:hover{color:var(--marca);border-bottom-color:var(--marca)}

.nav-links a[aria-current="page"]{color:var(--marca);font-weight:600;border-bottom-color:var(--marca)}

.nav-cta{display:flex;align-items:center;gap:var(--s-100);flex:none}

/* ⚠️ Mora AQUI, como o `.btn`. Estava só no `<style>` do index e o "Entrar"
   saía com caixa e 14px na home e sem caixa, a 16px, em todas as outras. */
.nav-entrar{
  font-size:14px;line-height:20px;font-weight:600;color:var(--txt-2);
  padding:var(--s-75) var(--s-100);border-radius:var(--r-lg);border:1px solid var(--line);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.nav-entrar:hover{color:var(--txt);border-color:var(--line-2);background:rgba(255,255,255,.03)}
.nav-entrar:active{transform:translateY(1px)}

.so-no-menu{display:none}

.burger{display:none;position:relative;width:var(--s-400);height:var(--s-400);background:none; border:1px solid var(--line-2);border-radius:var(--r-lg);cursor:pointer;padding:0}

.burger span{position:absolute;left:var(--s-75);width:var(--s-200);height:2px;background:var(--txt); border-radius:var(--r-full);transition:transform .5s var(--ease)}

.burger span:nth-child(1){top:11px}

.burger span:nth-child(2){bottom:11px}

.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}

.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

@media (max-width:1250px){.nav-links{gap:var(--s-300)}}

/* ⚠️ A faixa entre o hambúrguer e a largura folgada é APERTADA, não confortável.
   A fileira de computador mede 985px de conteúdo; a 1024px sobram 976px depois
   do recuo do `.wrap`, e por 9px ela não cabia. O vão menor recupera 24px. */
@media (max-width:1060px){.nav-links{gap:var(--s-100)}.nav{gap:var(--s-200)}.nav-cta{gap:var(--s-75)}.nav-cta .btn{padding:var(--s-75)}}

/* ⚠️ 1023px, NÃO 760px. Medido em 19/09/2026: a fileira de computador pede
   985px de conteúdo e o `.wrap` come 48px de recuo, então abaixo de ~1033px
   ela não cabe. Com o corte em 760px, toda largura de tablet (768, 800, 820,
   912) abria a página com rolagem horizontal — 220px dela. O número aqui é
   consequência da medida da fileira: mexer nos itens do menu obriga a medir
   de novo. */
@media (max-width:1023px){ .nav-links{display:none;position:absolute;top:100%/* ⚠️ NÃO 64px: o cabeçalho mede 96px (16 de recuo + 64 da fileira) e o painel abria por cima dele */;left:0;right:0;flex-direction:column;align-items:stretch; gap:0;background:var(--bg-2);border-bottom:1px solid var(--line);padding:var(--s-75) 0} .nav-links.open{display:flex} .nav-links a{padding:var(--s-200) var(--s-300);border-bottom:1px solid var(--line);border-top:0} .nav-links a:last-child{border-bottom:0} .burger{display:block} .nav-cta .btn,.nav-entrar{display:none} .nav-links .so-no-menu{display:block} }

/* ⚠️ Sem `scroll-margin-top`, a âncora encosta a seção no topo da janela e o
   cabeçalho fixo cobre o título dela — o visitante clica em "Preço" e vê o
   meio da seção. O valor é a altura do cabeçalho mais o mesmo respiro que a
   foto grudada usa, para os dois pararem na mesma linha. */
:target,[id]{scroll-margin-top:calc(97px + var(--s-300, 24px))}
/* ---------- progresso por rolagem ----------
 * ⚠️ Fica DENTRO do cabeçalho fixo, na borda de baixo: uma barra solta no topo
 * da janela briga com a barra do próprio navegador. E é `transform:scaleX`, não
 * `width` — largura repagina a cada quadro, transform não. */
.progresso{position:fixed;top:0;left:0;right:0;height:2px;z-index:61;pointer-events:none}
.progresso i{display:block;height:100%;width:100%;background:var(--marca);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}
@media (prefers-reduced-motion:reduce){.progresso{display:none}}


/* ---------- o traço do rótulo desenha ao entrar na tela ----------
 * ⚠️ Nasce com largura ZERO; quem acende é o site.js, no mesmo
 * IntersectionObserver dos blocos `.rv`. Sem JavaScript o <noscript> de cada
 * página devolve a largura cheia. */
.eyebrow::before,.rotulo::before{width:0;transition:width .7s var(--ease) .08s}
.eyebrow.in::before,.rotulo.in::before{width:var(--s-300,24px)}

/* ---------- microinterações que valem para o site inteiro ----------
 * ⚠️ Lista de propriedades FECHADA, nunca `transition:all`, e movimento de 2 a
 * 4 px: cartão que pula 12 px parece defeito, não resposta. */
/* ---------- O BOTÃO, e ele existe SÓ AQUI ----------
 * ⚠️ NÃO redefina `.btn` no `<style>` de uma página. Cada uma tinha a sua cópia
 * e o "Testar 14 dias" do cabeçalho saiu em QUATRO tamanhos diferentes na mesma
 * navegação: 162x42 na home, 176x48 em empresa/segurança/novidades/parceiros,
 * 202x58 em baixar (com sombra AZUL debaixo de botão âmbar) e 175x58 com raio
 * de 14px em entrar/excluir-conta. Medido em 19/09/2026.
 * O mesmo botão mudando de tamanho a cada clique é o que faz um site parecer
 * remendado — e nenhuma das cópias estava errada sozinha, só diferente.
 * Precisa de variação? Cria um modificador AQUI (`.btn-lg`, `.btn-block`). */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-75);
  padding:var(--s-75) var(--s-100);border-radius:var(--r-lg);
  font-family:inherit;font-size:16px;line-height:24px;font-weight:600;
  border:1px solid transparent;cursor:pointer;text-align:center;text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
             background .3s var(--ease),border-color .3s var(--ease),filter .3s var(--ease);
}
/* ⚠️ A sombra acompanha a COR DO BOTÃO. Ela já ficou azul debaixo do âmbar,
   resíduo da troca automática de tinta quando o tema clareou: sombra de uma cor
   sob superfície de outra suja a borda em vez de dar profundidade. */
.btn-primary{position:relative;background:var(--amber);color:#111827;
  box-shadow:0 2px 14px rgba(146,110,0,.30)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 26px rgba(146,110,0,.40)}
.btn-ghost{border-color:var(--line-2);color:var(--txt);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--marca);color:var(--marca)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn[disabled]{opacity:.55;cursor:default;transform:none;filter:none;box-shadow:none}
.btn-lg{padding:var(--s-200) var(--s-400)}
.btn-block{width:100%}
.btn svg{flex:none;width:20px;height:20px}
/* ⚠️ A seta anda 3px e volta. É a única animação de conteúdo no site: sugere
   "prossiga" sem escrever mais uma palavra. */
.btn-primary::after{content:"→";display:inline-block;margin-left:var(--s-75,8px);transition:transform .5s var(--ease)}
.btn-primary:hover::after{transform:translateX(3px)}
@media (max-width:560px){.hero-actions .btn,.enterprise .btn{width:100%}}
@media (prefers-reduced-motion:reduce){.btn,.btn-primary::after{transition:none}}