/* =============================================================
   SHELL — a faixa promocional, o topbar e o rodapé, compartilhados
   por /, /planos, /termos e /privacidade.

   Existe porque o markup era copiado em cada página e o CSS morava
   no <style> inline de cada uma: em setembro/2026 o topbar do /planos
   passou meses divergindo do da home sem ninguém notar. Aqui é a
   fonte única — mudou aqui, mudou nas quatro.

   Regras de convivência, porque este arquivo entra em páginas com
   sistemas visuais diferentes (a home tem o seu inline; as legais
   têm o legal.css):

   1. NENHUM reset global. Nada de `p{margin:0}`, `a{color:inherit}`
      ou estilo em `body`/`h1`. O `p{margin:0}` da home colaria os
      parágrafos dos documentos jurídicos.
   2. NENHUM token `--ink`. A home usa #0a0a0a, o legal.css usa
      #150430 para o corpo do texto. Mesmo nome, valores diferentes:
      declarar aqui mudaria a cor de páginas inteiras conforme a
      ordem dos <link>. Onde o shell precisa, o valor vai literal.
   3. `font-family` DECLARADA em todo componente. Herdar do body
      faria os botões saírem em Jakarta na home e em Inter nas
      legais — a diferença mais fácil de passar batido numa revisão.
   ============================================================= */

:root{
  --roxo:#7231FF; --roxo-nav:#8348FF; --violeta:#3D0BA9;
  --tinta:#06070B; --paper:#fafaf7;
  --on-1:#f4f4f5; --on-2:#c9c4d6; --on-3:#8f88a3; --borda-esc:rgba(255,255,255,.12);
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e7:48px; --e8:64px;
  --t-eyebrow:11px; --t-body:15px;
  --z-sticky:40;
  --topo-h:112px; --topo-shift:-112px;
  --fs:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --fe:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:12px; --r-btn:12px; --r-pill:9999px;
}
*{box-sizing:border-box;}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--e5);}

/* ---------- lockup da marca ----------
   respiro símbolo↔wordmark = 0,1 do símbolo · wordmark↔sufixo = 0,25em
   mínimo: símbolo 24px · "M" ≥ 16px. O text-stroke faz o ultra-black. */
.lockup{display:inline-flex;align-items:center;}
.lockup .wm{display:flex;flex-direction:column;align-items:flex-start;line-height:1;}
.word{font-family:var(--fs);font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  line-height:1;-webkit-text-stroke:.04em currentColor;paint-order:stroke fill;color:#000;}
.suf{font-family:var(--fs);font-weight:700;text-transform:uppercase;letter-spacing:.34em;
  margin-right:-.34em;line-height:1;}
/* Base compartilhada com o lockup do cabeçalho do Tasks: 25px × 1,857 = 46,425px. */
.lk-head{font-size:25px;gap:.1857em;}
.lk-head svg{height:1.857em;width:1.857em;}
/* #0a0a0a literal, não var(--ink): ver regra 2 no topo do arquivo. */
.lk-head .word{font-size:1em;color:#0a0a0a;}
.lk-head .suf{font-size:.58em;color:var(--roxo-nav);margin-top:.25em;}
@media(max-width:860px){.lk-head .wm{display:none;}}

/* ---------- faixa promocional ----------
   @keyframes ticker desloca -25%: exige EXATAMENTE 4 .announcement-group
   no markup. Com 3, a faixa dá um salto visível a cada volta. */
.announcement{align-items:center;background:var(--tinta);color:#fff;display:flex;height:44px;
  overflow:hidden;text-decoration:none;white-space:nowrap;}
.announcement-track{align-items:center;animation:ticker 32s linear infinite;display:flex;
  min-width:max-content;will-change:transform;}
.announcement:hover .announcement-track{animation-play-state:paused;}
.announcement-group{align-items:center;display:flex;gap:var(--e4);height:100%;padding:0 var(--e4) 0 0;}
.announcement-strong{font-family:var(--fe);font-size:13px;font-weight:800;letter-spacing:.025em;
  line-height:1.3;padding-left:var(--e4);text-transform:uppercase;}
.announcement-copy{font-family:var(--fe);color:#d5d1dc;font-size:13px;font-weight:600;line-height:1.3;}
.announcement-cta{align-items:center;display:inline-flex;font-family:var(--fe);font-size:13px;
  font-weight:800;gap:var(--e2);letter-spacing:.02em;line-height:1.3;text-transform:uppercase;}
.announcement-dot{background:var(--roxo);border-radius:var(--r-pill);
  box-shadow:0 0 14px rgba(114,49,255,.72);height:7px;width:7px;}
.announcement-separator{font-family:var(--fe);color:#6e687a;font-size:13px;line-height:1.3;}
@keyframes ticker{to{transform:translateX(-25%);}}

/* ---------- topbar ----------
   O margin-bottom negativo puxa o header para DENTRO do que vem
   depois — na home e no /planos quem absorve é o hero escuro, com
   padding-top:calc(... + var(--topo-h)). Página sem hero precisa
   compensar esse recuo por conta própria. */
.topo{position:sticky;top:0;z-index:var(--z-sticky);background:transparent;
  margin-bottom:var(--topo-shift);padding:var(--e4) var(--e5) var(--e3);
  transition:background-color .24s var(--ease);}
.topo.is-floating{background:transparent;}
.topo .in{align-items:center;background:var(--paper);border:1px solid rgba(255,255,255,.68);
  border-radius:var(--r);box-shadow:0 20px 48px -28px rgba(0,0,0,.58);display:flex;
  gap:var(--e5);justify-content:space-between;margin:0 auto;max-width:1120px;
  min-height:84px;padding:var(--e4) var(--e5);transition:box-shadow .24s var(--ease),transform .24s var(--ease);}
.topo.is-floating .in{box-shadow:0 24px 58px -20px rgba(6,7,11,.54);transform:translateY(-4px);}
.topo .lockup{flex:none;text-decoration:none;}
section[id]{scroll-margin-top:var(--topo-h);}
.topo-actions{align-items:center;display:flex;gap:var(--e4);}
.topo-links{align-items:center;display:flex;gap:var(--e5);}
.topo-links a{color:#312b38;font-family:var(--fe);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-decoration:none;text-transform:uppercase;}
.topo-links a:hover{color:var(--violeta);}
.topo-links a[aria-current="page"]{color:var(--violeta);}
.topo-links a,.topo .btn{white-space:nowrap;}
/* a barra inteira ocupa 728px; abaixo de ~840 o menu sai e o "Entrar" encurta */
@media(max-width:840px){.topo-links{display:none!important;}.entrar-longo{display:none;}}
@media(max-width:520px){
  :root{--topo-h:90px;--topo-shift:-90px;}
  .announcement{height:40px;}
  .announcement-strong,.announcement-copy,.announcement-cta,.announcement-separator{font-size:12px;}
  .topo{padding:var(--e3) var(--e4) var(--e2);}
  .topo .in{gap:var(--e4);min-height:70px;padding:var(--e3) var(--e4);}
  .topo .btn-sm{min-height:42px;padding:var(--e3);}
}

/* ---------- botões ----------
   position/overflow/isolation NÃO são decoração: o ::before do .btn-1
   é absolute. Sem ancestral posicionado no próprio botão ele sobe até
   o .topo (sticky cria contexto) e pinta um retângulo colorido atrás
   do header inteiro. Sem overflow:hidden o wipe escapa do raio. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  font-family:var(--fs);font-weight:700;font-size:var(--t-body);line-height:1;letter-spacing:-.01em;
  padding:var(--e4) var(--e5);border-radius:var(--r-btn);border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;position:relative;overflow:hidden;isolation:isolate;min-height:48px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
.btn .s{transition:transform .26s var(--ease);}
.btn-1{background:var(--roxo);color:#fff;}
.btn-1::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--violeta);
  transform:translateX(-101%);transition:transform .42s var(--ease);}
.btn-1:hover::before{transform:translateX(0);}
.btn-1:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(114,49,255,.55);}
.btn-1:hover .s{transform:translateX(4px);}
.btn-sm{padding:var(--e3) var(--e4);font-size:var(--t-body);min-height:44px;}
/* depois do .btn de propósito: o shorthand `border` dele reseta o border-color */
.btn-nav-outline{background:transparent;border-color:var(--roxo);color:var(--violeta);gap:var(--e1);}
.btn-nav-outline:hover{box-shadow:none;transform:none;}
/* verde do WhatsApp escurecido no mesmo matiz (142deg) do #25D366 de marca: com
   texto branco o verde claro dava 1,98:1 e reprovava o AA da WCAG. #128040 da 5:1,
   e o #0D6B35 do hover da 6,6:1 — o estado de hover nao pode piorar o contraste.
   Depois de .btn-1::before, senao o hover desliza roxo por baixo do botao verde. */
.btn-wa{background:#128040;color:#fff;}
.btn-wa::before{background:#0D6B35;}
.btn-wa:hover{box-shadow:0 16px 32px -12px rgba(18,128,64,.55);}
.btn:active{transform:scale(.98);}
.btn:focus-visible{outline:2px solid var(--roxo-nav);outline-offset:3px;}

/* ---------- rodapé ---------- */
.site-footer{background:var(--tinta);color:var(--on-1);padding:var(--e7) 0 var(--e8);}
.f-grid{display:grid;gap:var(--e7);
  grid-template-columns:minmax(220px,1.35fr) repeat(3,minmax(132px,.75fr));}
@media(max-width:900px){ .f-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:520px){ .f-grid{grid-template-columns:1fr;} }
.f-grid .h{color:var(--on-3);font-family:var(--fe);font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:.14em;margin-bottom:var(--e3);text-transform:uppercase;}
.f-grid a{color:var(--on-2);display:block;font-family:var(--fs);font-size:var(--t-body);
  font-weight:500;line-height:1.55;padding:var(--e1) 0;text-decoration:none;transition:color .2s;}
.f-grid a:hover{color:var(--paper);}
.f-grid a:focus-visible{outline:2px solid var(--roxo-nav);outline-offset:2px;border-radius:2px;}
.footer-parent{color:var(--roxo-nav);font-family:var(--fe);font-size:var(--t-eyebrow);font-weight:700;
  letter-spacing:.08em;margin:0 0 var(--e3);text-transform:uppercase;}
.f-grid .footer-brand{color:var(--on-1);display:inline-flex;padding:0;}
.footer-logo{align-items:center;display:inline-flex;gap:11px;}
.footer-logo-symbol{color:var(--on-1);height:30px;width:30px;}
.footer-logo-word{color:var(--on-1);font-family:var(--fs);font-size:18px;font-weight:800;
  letter-spacing:.02em;line-height:1;paint-order:stroke fill;text-transform:uppercase;
  -webkit-text-stroke:.04em currentColor;}
.footer-copy{color:var(--on-3);font-family:var(--fs);font-size:var(--t-body);line-height:1.55;
  margin:var(--e4) 0 0;max-width:36ch;}
.f-base{border-top:1px solid var(--borda-esc);color:var(--on-3);display:flex;flex-wrap:wrap;
  font-family:var(--fs);font-size:var(--t-body);line-height:1.55;gap:var(--e4);
  justify-content:space-between;margin-top:var(--e7);padding-top:var(--e5);}

/* Escopado ao shell, não `*`: a home usa `*{transition:none!important}` no
   inline dela, mas aqui isso apagaria as transições da página hospedeira. */
@media(prefers-reduced-motion:reduce){
  .topo,.topo .in,.btn,.btn .s,.btn-1::before,.f-grid a{transition:none!important;}
  .announcement-track{animation:none!important;}
}