/* ==========================================================================
   site.css — sistema de design do site de marketing PigBank (protótipo v2).
   Compartilhado por index, funcionalidades, como-funciona, precos, blog,
   contato, login, cadastro. Consome as fontes/tokens de brand.css.
   ========================================================================== */

:root {
  --pink:       #FF2D8E;
  --pink-dark:  #C7186B;
  --pink-soft:  rgba(255,45,142,.12);
  --neon:       #C6F11A;
  --neon-ink:   #10140a;
  --bg:         #0c0c0d;
  --bg-elev:    #141416;
  --card:       #17171a;
  --card-2:     #1d1d21;
  --line:       rgba(255,255,255,.08);
  --line-2:     rgba(255,255,255,.15);
  --ink:        #ffffff;
  --ink-2:      rgba(255,255,255,.62);
  --ink-3:      rgba(255,255,255,.48);  /* era .40 → 3,8:1 sobre --bg; .48 dá 5,0:1 */
  --radius:     20px;
  --radius-sm:  14px;
  --radius-lg:  26px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shadow:     0 20px 60px rgba(0,0,0,.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ─── Ambient pink glow ─────────────────────────────────────────────── */
.glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.glow::before, .glow::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(120px); opacity: .30;
}
.glow::before { width: 620px; height: 620px; background: radial-gradient(circle,#FF2D8E,transparent 70%); top: -240px; left: -180px; }
.glow::after  { width: 520px; height: 520px; background: radial-gradient(circle,#C7186B,transparent 70%); top: 30%; right: -220px; opacity: .22; }

.wrap { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ─── Nav ───────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 16px; z-index: 50;
  display: flex; align-items: center; gap: 22px;
  margin: 16px auto 0; max-width: 1200px;
  background: rgba(20,20,22,.72);
  backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.nav-logo .logo-badge {
  width: 34px; height: 34px; border-radius: 10px; object-fit: cover;
  box-shadow: 0 4px 14px rgba(255,45,142,.4);
}
/* Logo completo (ícone + wordmark) — asset único, dispensa o texto ao lado */
.nav-logo .logo-full { height: 30px; width: auto; display: block; }
/* Só o ícone (rodapé / lugares compactos) — acompanha o texto "PigBank" */
.nav-logo .logo-icon { width: 30px; height: 30px; object-fit: contain; display: block; }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: 12px; }
.nav-links a { color: var(--ink-2); font-size: .88rem; font-weight: 500; transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-right .link-entrar { color: var(--ink-2); font-size: .88rem; font-weight: 600; }
.nav-right .link-entrar:hover { color: var(--ink); }

/* ─── Botões ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 700; font-size: .9rem;
  border: none; cursor: pointer; border-radius: 12px; padding: 11px 20px;
  transition: transform .12s, box-shadow .15s, background .15s; white-space: nowrap;
}
.btn-primary { background: linear-gradient(135deg,var(--pink),var(--pink-dark)); color: #fff; box-shadow: 0 8px 24px rgba(255,45,142,.35); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(255,45,142,.45); }
.btn-primary:active { transform: scale(.98); }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-outline:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }
.btn-neon { background: var(--neon); color: var(--neon-ink); box-shadow: 0 8px 24px rgba(198,241,26,.28); }
.btn-neon:hover { transform: translateY(-1px); }
.btn-lg { padding: 14px 26px; font-size: .98rem; }
.btn-block { width: 100%; }

/* ─── Badges / pills ────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--pink-soft); border: 1px solid rgba(255,45,142,.28);
  color: var(--pink); border-radius: 999px; padding: 6px 14px;
  font-size: .74rem; font-weight: 800; letter-spacing: .04em;
}
.pill .tag-novo { background: var(--pink); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: .64rem; font-weight: 800; letter-spacing: .06em; }
/* Pílula da VSL (index.html). Único consumidor entre as 17 páginas que carregam
   este arquivo — as outras tiveram o <div> removido do HTML pela ONDA 1. */
.eyebrow {
  display: inline-flex; background: rgba(198,241,26,.12); border: 1px solid rgba(198,241,26,.28);
  color: var(--neon); border-radius: 999px; padding: 6px 14px;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px;
}

/* ─── Seções ────────────────────────────────────────────────────────── */
.section { padding: 92px 0; }

/* Cabeçalho de seção. Era: centralizado + CAIXA ALTA + metade do título em
   gradiente rosa, repetido oito vezes entre index, whatsapp, suporte, comandos
   e changelog. Oito seções iguais lidas em sequência é o que faz o site parecer
   gerado. Caixa alta agora é privilégio do hero (.hero-title); o resto usa
   caixa baixa, como /precos e /termos já faziam — e são as páginas que a
   auditoria apontou como as mais bem resolvidas. */
.section-head { max-width: 640px; margin: 0 0 52px; }
.section-head :is(h1,h2) { font-size: clamp(1.75rem,3.4vw,2.35rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.1; margin-bottom: 14px; text-wrap: balance; }
.section-head p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.65; }

/* Centralizar é opt-in, não padrão: usar só onde o conteúdo abaixo também é
   centralizado (planos, FAQ). Alinhado à esquerda por padrão dá ritmo diferente
   a cada seção sem precisar inventar composição nova pra cada uma. */
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.grad { background: linear-gradient(135deg,var(--pink),#FF7AB8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ─── Cards genéricos ───────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
}
.icon-box {
  display: flex; align-items: center; justify-content: flex-start;
  color: var(--pink); font-size: 1.5rem; line-height: 1; margin-bottom: 14px;
}
.icon-box.neon { color: var(--neon-ink-on-dark, var(--neon)); }

/* Feature card com seta circular (landing) */
.feature-card { position: relative; }
.feature-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.feature-card p { color: var(--ink-2); font-size: .9rem; line-height: 1.55; }
.arrow-btn {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-top: 18px; font-size: 1.05rem; font-weight: 700;
  background: linear-gradient(135deg,var(--pink),var(--pink-dark)); color: #fff;
}
.arrow-btn.neon { background: var(--neon); color: var(--neon-ink); }

/* ─── Footer ────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 46px 0 40px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; align-items: start; justify-items: start; }
.footer-brand { max-width: 320px; }
.footer-brand .nav-logo { margin-bottom: 12px; }
.footer-brand p { color: var(--ink-3); font-size: .86rem; line-height: 1.6; }
.footer-cols { display: contents; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col .footer-title { color: var(--ink); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.footer-col a { color: var(--ink-2); font-size: .86rem; }
.footer-col a:hover { color: var(--ink); }
.footer-copy { text-align: center; color: var(--ink-3); font-size: .8rem; margin-top: 36px; }
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}

/* ─── Landing: hero ─────────────────────────────────────────────────── */
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px;
  align-items: center; padding: 64px 0 40px;
}
.hero-title { font-size: clamp(2.3rem,5vw,3.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.03; margin: 22px 0 18px; text-transform: uppercase; }
.hero-sub { color: var(--ink-2); font-size: 1.06rem; line-height: 1.65; max-width: 470px; margin-bottom: 28px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.trust { display: flex; gap: 20px; flex-wrap: wrap; color: var(--ink-3); font-size: .82rem; font-weight: 500; }
.trust span { display: inline-flex; align-items: center; gap: 7px; }
.trust .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px rgba(198,241,26,.6); }

.hero-visual { position: relative; min-height: 500px; }
.hero-mascot { position: absolute; left: -18px; bottom: -10px; width: 208px; height: auto; z-index: 3; filter: drop-shadow(0 16px 30px rgba(0,0,0,.55)); pointer-events: none; }

.chat-card {
  position: relative; z-index: 2; margin: 0 0 -30px auto; width: min(300px,86%);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow);
}
.chat-head { display: flex; align-items: center; gap: 8px; font-size: .9rem; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.chat-head img { width: 26px; height: 26px; border-radius: 50%; }
.chat-head .online { margin-left: auto; color: var(--ink-3); font-size: .72rem; display: inline-flex; align-items: center; gap: 5px; }
.chat-head .online i { width: 6px; height: 6px; border-radius: 50%; background: var(--neon); }
.bubble { font-size: .82rem; line-height: 1.5; padding: 10px 13px; border-radius: 14px; margin-bottom: 10px; max-width: 88%; }
.bubble.user { background: linear-gradient(135deg,var(--pink),var(--pink-dark)); color: #fff; margin-left: auto; border-bottom-right-radius: 5px; }
.bubble.bot { background: var(--card-2); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 5px; }

.summary-card {
  position: relative; z-index: 2; margin-left: auto; width: min(340px,100%);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
.sum-head { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: var(--ink-2); margin-bottom: 4px; }
.delta-up { color: #00F078; font-weight: 800; font-size: .82rem; }
.delta-up small { color: var(--ink-3); font-weight: 500; }
.sum-balance { font-size: .74rem; color: var(--ink-3); margin-bottom: 16px; }
.sum-balance b { display: block; font-size: 1.7rem; color: var(--ink); letter-spacing: -.02em; margin-top: 2px; }
.sum-body { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.donut-legend { list-style: none; font-size: .74rem; color: var(--ink-2); display: grid; gap: 7px; }
.donut-legend li { display: flex; align-items: center; gap: 8px; }
.donut-legend i { width: 9px; height: 9px; border-radius: 3px; }
.donut-legend b { color: var(--ink); margin-left: auto; }
.sum-chart { position: relative; border-top: 1px solid var(--line); padding-top: 12px; }
.chart-badge { position: absolute; top: 10px; right: 0; background: rgba(0,240,120,.14); color: #00F078; font-size: .72rem; font-weight: 800; padding: 3px 8px; border-radius: 8px; }
.chart-months { display: flex; justify-content: space-between; color: var(--ink-3); font-size: .6rem; margin-top: 4px; }

/* ─── Landing: feature cards ────────────────────────────────────────── */
.features-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; padding: 30px 0 40px; }

/* ─── Grids genéricos + tech split ──────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.tech-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 30px 0 90px; }
.tech-copy h2 { font-size: clamp(1.7rem,3.4vw,2.3rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.1; margin-bottom: 24px; text-wrap: balance; }
.tech-list { list-style: none; display: grid; gap: 14px; margin-bottom: 28px; }
.tech-list li { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: 1rem; }
.tick { width: 24px; height: 24px; border-radius: 7px; background: rgba(198,241,26,.12); border: 1px solid rgba(198,241,26,.3); color: var(--neon); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; flex-shrink: 0; }
.tech-visual { display: flex; justify-content: center; }

/* Vocabulário real do Piggy — substitui o cubo "AI". Mono porque é o texto que
   a pessoa DIGITA, não prosa de marketing; é o mesmo tratamento que /comandos
   já dá aos exemplos, e ali funciona. */
.phrasebook { display: flex; flex-wrap: wrap; gap: 10px; align-content: center; max-width: 460px; }
.phrase {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86rem; color: var(--ink-2); line-height: 1.3;
  /* Overlay relativo, não cor fixa: var(--card) era idêntico ao fundo do .card
     e o chip sumia dentro dele em /funcionalidades. Branco translúcido clareia
     sobre --bg (#0c0c0d) E sobre --card (#17171a); a borda a 33% é o que
     desenha o chip: 3,0:1 sobre o card e 2,9:1 sobre --bg, contra 1,2:1 da
     versão anterior (piso 3:1 de contraste não-textual, WCAG 1.4.11). */
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.33);
  border-radius: var(--radius-sm); padding: 9px 13px;
}
.phrase::before { content: "“"; color: var(--pink); }
.phrase::after  { content: "”"; color: var(--pink); }

/* ─── Responsivo ────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 440px; margin-top: 20px; }
  .features-row { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .tech-split { grid-template-columns: 1fr; }
  .tech-visual { order: -1; }
}
@media (max-width: 900px) {
  .nav { flex-wrap: wrap; }
  /* Os links só recolhem depois que o botão do menu está disponível. Eles
     ficam fora do fluxo desde o primeiro paint: assim, o nav-burger.js pode
     escondê-los sem reduzir a altura da barra e puxar a página inteira para
     cima. Se o script falhar, continuam visíveis e utilizáveis como painel. */
  .nav-links {
    position: absolute; inset: calc(100% + 8px) 0 auto;
    display: flex; flex-wrap: wrap; width: 100%;
    margin: 0; padding: 12px;
    background: rgba(20,20,22,.96); backdrop-filter: blur(26px) saturate(160%);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: 0 16px 36px rgba(0,0,0,.42);
  }
  .section { padding: 60px 0; }
  /* Alvo de toque na barra mobile: 44px (mínimo iOS/WCAG 2.5.5), o mesmo piso
     que o .pb-burger do nav-burger.js já respeita — e 900px é o mesmo gate que ele
     usa para entrar em modo mobile, por isso estas três moram AQUI, no bloco de
     900 que já existia, em vez de num segundo bloco igual (a ordem dos blocos da
     nav fica 900 -> 480 -> 340, monotônica).
     Antes: CTA 137×40, "Entrar" 44×21 e o botão do menu da conta 154×37 — três
     alvos abaixo de 44 numa barra tocada com o polegar.
     O custo em altura NÃO é zero, e depende da página (16 carregam esta .nav):
       · as 12 com nav-auth.js — o burger de 44px já ditava a altura, então a
         barra não muda: 66px a 320 e 70px a 500/700/899, antes e depois;
       · as 4 SEM nav-auth.js (cadastro, completar-cadastro, reset-password: sem
         burger e sem CTA; login: com CTA) — aí a barra CRESCE em toda largura
         <=900, e é a consequência desejada de dar 44px ao "Entrar":
             cadastro / completar-cadastro / reset-password   52->66  e  56->70
             login                                          62,4->66  e  69,6->70
     Acima de 900 nada disto vale (o bloco não se aplica): 56 e 69,6 intactos.
     No desktop o CTA segue com 43,6px (medido a 901 e a 1280, base e branch;
     os 40,4px são a figura do bloco <=480), acima do piso de 24px da WCAG 2.5.8.
     `.nav .pb-acct-btn` (0,2,0) precisa vencer o `.pb-acct-btn` (0,1,0) que o
     nav-auth.js injeta — mesma razão do `.nav.nav` no bloco de 340 abaixo. */
  .nav .btn { min-height: 44px; }
  .nav-right .link-entrar { min-height: 44px; display: flex; align-items: center; }
  .nav .pb-acct-btn { min-height: 44px; }
}

/* Nav em tela estreita: o mínimo necessário era 374px (padding 36 + logo 111 +
   gap 22 + "Entrar" 41 + gap 16 + botão 148). Como .nav é flex nowrap e o .btn
   tem white-space:nowrap, nada quebrava linha — o CTA "Começar agora" era
   empurrado pra fora da viewport e a parte cortada não recebia toque em Android
   de 360px e iPhone SE. Apertando padding/gaps/botão o mínimo cai pra 326px
   ("Ir para o dashboard", do usuário logado, fica em 352px — também cabe). */
@media (max-width: 480px) {
  .nav { gap: 10px; padding: 10px 12px; }
  .nav-right { gap: 6px; }
  .nav .btn { padding: 10px 10px; font-size: .85rem; }
}
/* Abaixo de 340px (320 e 328 na prática) a barra ainda pedia mais do que cabia:
   deslogado, 320px dava 2 linhas e faltavam 54,2px. Com "Criar conta" no lugar
   de "Começar agora" a linha já fecha sozinha a partir de 329px, então este
   bloco só existe para a faixa 320-328 — o corte em 340 deixa 11px de folga e
   NÃO altera 360/375/390. Ponto mais apertado acima do corte: 341px, 8,8px de
   sobra.

   `.nav.nav` NÃO é typo, e trocar por `.nav` mata o conserto em silêncio: o
   nav-burger.js injeta um <style id="pb-nav-css"> no <head> em RUNTIME contendo
   `.nav{...column-gap:6px}` dentro de @media (max-width:900px). Mesma
   especificidade (0,1,0) e documento posterior => o injetado ganha. Repetir a
   classe sobe para (0,2,0) e passa a valer. Reproduzir, no console de qualquer
   página com nav-auth.js e viewport ≤900px:
       getComputedStyle(document.querySelector('.nav')).columnGap
   escrito `.nav     {column-gap:4px}` -> "6px"  (perde para o injetado)
   escrito `.nav.nav {column-gap:4px}` -> "4px"  (vence)
   É a mesma razão de `.nav{gap:10px}` no bloco de 480 já ser letra morta no
   eixo horizontal nas páginas que carregam o nav-auth.js. */
@media (max-width: 340px) {
  .nav.nav { padding-left: 8px; padding-right: 8px; column-gap: 4px; }
  .nav-right { gap: 4px; }
  .nav .btn { padding-left: 8px; padding-right: 8px; }
  .nav .pb-acct-btn { padding-left: 10px; padding-right: 10px; }
}
/* O painel da conta (288px fixos, `right:0` ancorado no .pb-acct) transbordava
   PELA ESQUERDA e o corte é permanente: `documentElement.scrollWidth` continua
   igual a `innerWidth`, então não há rolagem que alcance o pedaço cortado.
   O mecanismo: com a barra numa linha só, o botão da conta deixou de ficar
   sozinho numa 2ª linha colada na borda direita e passou a ficar À ESQUERDA do
   burger — a âncora andou 44px e os 288px pararam de caber.
   Medido em varredura de 1px, borda esquerda do painel (negativo = cortado),
   com o rótulo de perfil REAL ("Ana Beatriz"; com o placeholder "Minha conta" a
   base vira 1 faixa só em 338 e a tabela muda inteira — é a mesma medição em
   outra condição, não outro resultado):
     largura    base 45f4987    sem esta regra    com esta regra
     316-331    +15 a +30          -29 a -14          +14      <- regressão nossa
     332-340    -19 a -11          -13 a  -5          +14      <- melhoramos a base
     341-350    -10 a  -1          -10 a  -1           +8      <- herdado, idêntico
     351-358    +0 a +7            +0 a +7             +8
      >=359     ok                 ok            (no-op: o min() escolhe 288)
   Ou seja: a faixa que o conserto piorou é 316-331 (onde a base estava em 2
   faixas e sobrava espaço); de 332 a 340 o branch SEM esta regra já era melhor
   que a base; de 341 para cima os dois são iguais e o corte é herdado. A base
   cortava de 332 a 350 (1 a 19px), e não "340 a 354".
   O clamp é por LARGURA, não por estado, e isso tem um efeito cosmético
   conhecido: no layout de 2 faixas (rótulo longo abaixo de ~332px), onde o botão
   volta a ficar colado na borda direita e caberiam os 288px inteiros, o painel
   ainda assim encolhe (245-249px a 316-320). Não corta nada e não some conteúdo;
   distinguir os dois estados custaria mais CSS do que vale.
   `min()` em vez de @media: acima de 359px o 288px ganha sozinho e a regra vira
   no-op, então não há breakpoint novo para manter. Os 71px são a maior distância
   medida entre a borda direita do painel e a da viewport (44 do burger + 6 do
   column-gap + 12 do padding + 1 da borda) mais 8 de respiro.
   ponytail: `100vw` inclui a barra de rolagem clássica; num desktop com janela
   abaixo de 359px e scrollbar não-overlay sobra ~15px a menos — ainda assim
   melhor que o corte de 25px de hoje. Se isso um dia importar, a saída sem
   número mágico é `.pb-acct{position:static}` + `width:min(288px,100%)`, que
   ancora no .nav e se autoajusta, ao custo de descer o painel 12px. */
.nav .pb-acct-dd { width: min(288px, calc(100vw - 71px)); }
/* Abaixo de 380px (iPhone SE e afins) esconde o nome ao lado do mascote:
   o mínimo cai pra ~249px e sobra folga até em 320px. */
@media (max-width: 380px) {
  .nav-logo span { display: none; }
}
@media (max-width: 560px) {
  .features-row { grid-template-columns: 1fr; }
  /* .grid-3 parava em 2 colunas e ia até 0px: em 375 sobra ~146px por card e o
     título quebra em 3 linhas. Uma coluna abaixo de 560. */
  .grid-3 { grid-template-columns: 1fr; }
  .hero-mascot { width: 150px; }
}

/* ─── Como funciona: passos + phone + CTA band ──────────────────────── */
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 20px 0 40px; }
.steps { display: grid; gap: 22px; }
.step { display: flex; gap: 18px; }
.step-num { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; background: linear-gradient(135deg,var(--pink),var(--pink-dark)); color: #fff; box-shadow: 0 6px 18px rgba(255,45,142,.3); }
.step:nth-child(even) .step-num { background: var(--neon); color: var(--neon-ink); box-shadow: 0 6px 18px rgba(198,241,26,.25); }
.step h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 6px; }
.step p { color: var(--ink-2); font-size: .94rem; line-height: 1.55; }
.phone { justify-self: center; width: min(300px,90%); background: var(--card); border: 1px solid var(--line); border-radius: 30px; padding: 16px 14px; box-shadow: var(--shadow); position: relative; }
.phone-notch { width: 54px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 2px auto 14px; }
.cta-band { text-align: center; background: linear-gradient(180deg, rgba(255,45,142,.10), rgba(255,255,255,.02)); border: 1px solid rgba(255,45,142,.28); border-radius: var(--radius-lg); padding: 56px 30px; margin: 46px 0 20px; }
.cta-band h2 { font-size: clamp(1.6rem,3.5vw,2.3rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.cta-band p { color: var(--ink-2); margin-bottom: 24px; }

/* ─── Preços: planos ────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(2,minmax(0,360px)); justify-content: center; gap: 20px; padding: 10px 0 30px; }
.plan { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; }
.plan.featured { border-color: rgba(255,45,142,.4); background: linear-gradient(180deg, rgba(255,45,142,.10), var(--card)); box-shadow: 0 20px 50px rgba(255,45,142,.14); }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg,var(--pink),var(--pink-dark)); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; }
.plan-trial { position: absolute; top: 14px; right: 14px; background: var(--neon); color: var(--neon-ink); font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.plan h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.plan .plan-sub { color: var(--ink-3); font-size: .86rem; margin-bottom: 14px; }
.plan .price { font-size: 2.5rem; font-weight: 850; letter-spacing: -.03em; margin: 6px 0 4px; }
.plan .price span { font-size: .9rem; color: var(--ink-2); font-weight: 600; }
.plan ul { list-style: none; display: grid; gap: 11px; margin: 20px 0 24px; }
.plan li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: .9rem; line-height: 1.4; }
.plan li .tick { width: 20px; height: 20px; font-size: .7rem; margin-top: 1px; }
.plan .btn { margin-top: auto; }
.plans-note { text-align: center; color: var(--ink-3); font-size: .84rem; margin: 6px auto 40px; max-width: 620px; line-height: 1.6; }

/* ─── Blog: cards de artigo ─────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding: 10px 0 40px; }
.article { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, border-color .15s; }
.article:hover { transform: translateY(-3px); border-color: var(--line-2); }
.article-thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, rgba(255,45,142,.28), rgba(198,241,26,.14)); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; }
.article-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.article .tag-cat { align-self: flex-start; background: var(--pink-soft); border: 1px solid rgba(255,45,142,.28); color: var(--pink); font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: 12px; }
.article h3 { font-size: 1.02rem; font-weight: 700; line-height: 1.35; margin-bottom: 8px; }
.article .meta { color: var(--ink-3); font-size: .78rem; margin-top: auto; }
/* Cards de notícia são links (link-out pra fonte) — sem sublinhado, herda cor */
a.article { text-decoration: none; color: inherit; }
/* Foto real da matéria preenche o thumb; o gradiente só aparece no fallback emoji */
.article-thumb { overflow: hidden; }
.article-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.article .article-summary { color: var(--ink-2); font-size: .88rem; line-height: 1.5; margin-bottom: 14px; }
.article .article-source-cta { color: var(--pink); font-size: .8rem; font-weight: 700; margin-top: 10px; }
a.article:hover .article-source-cta { text-decoration: underline; }
/* Sub-cabeçalhos das seções do blog (Notícias / Guias) */
.blog-subhead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 22px 0 4px; }
.blog-subhead h3 { font-size: 1.28rem; font-weight: 800; }
.blog-subhead-note { color: var(--ink-3); font-size: .82rem; }
.news-section { margin-bottom: 8px; }

/* ── Barra de progresso de leitura ────────────────────────────────────────── */
.read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1000;
  background: linear-gradient(90deg, var(--pink), var(--neon)); box-shadow: 0 0 10px rgba(255,45,142,.5);
  transition: width .12s linear; }

/* ── Página de artigo do blog (/blog/<slug>) ──────────────────────────────── */
.guide { max-width: 720px; margin: 0 auto; padding: 12px 0 8px; }
.guide-back { display: inline-block; color: var(--ink-3); font-size: .84rem; font-weight: 600; margin-bottom: 8px; }
.guide-back:hover { color: var(--ink); }

/* Hero: sticker do Piggy num disco gradiente + título centralizado */
.guide-hero { text-align: center; padding: 12px 0 34px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.guide-sticker-wrap { width: 168px; height: 168px; margin: 6px auto 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(255,45,142,.20), rgba(198,241,26,.10) 65%, transparent 72%); }
.guide-sticker { width: 132px; height: 132px; object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.5)); animation: guideStickerIn .5s ease both; }
@keyframes guideStickerIn { from { opacity: 0; transform: translateY(10px) scale(.9) rotate(-4deg); } to { opacity: 1; transform: none; } }
.guide-hero .tag-cat { display: inline-block; background: var(--pink-soft); border: 1px solid rgba(255,45,142,.28); color: var(--pink); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; margin-bottom: 16px; }
.guide-hero h1 { font-size: 2.3rem; font-weight: 800; line-height: 1.16; letter-spacing: -.015em; max-width: 16ch; margin: 0 auto; }
.guide-byline { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--ink-3); font-size: .88rem; }
.guide-byline strong { color: var(--ink-2); font-weight: 700; }
.byline-avatar { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); }

/* Prosa */
.guide-prose { color: var(--ink-2); font-size: 1.07rem; line-height: 1.75; }
.guide-prose > p:first-of-type { font-size: 1.2rem; line-height: 1.6; color: var(--ink); }
.guide-prose p { margin: 0 0 18px; }
.guide-prose h2 { color: var(--ink); font-size: 1.4rem; font-weight: 800; line-height: 1.3; margin: 38px 0 14px; padding-left: 14px; border-left: 3px solid var(--pink); }
.guide-prose ul { margin: 0 0 20px; padding-left: 0; list-style: none; }
.guide-prose li { position: relative; margin: 0 0 10px; padding-left: 24px; }
.guide-prose li::before { content: "•"; color: var(--pink); font-weight: 900; position: absolute; left: 7px; top: -1px; }
.guide-prose strong { color: var(--ink); font-weight: 700; }
.guide-prose em { font-style: italic; }
.more-guides { border-top: 1px solid var(--line); margin-top: 52px; padding-top: 12px; }

/* Thumb dos cards de guia = sticker do Piggy sobre o gradiente do card */
.article-thumb-sticker { display: flex; align-items: center; justify-content: center; }
.card-sticker { width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); transition: transform .2s ease; }
a.article:hover .card-sticker { transform: scale(1.07) rotate(-3deg); }

/* ── Blocos ricos embutidos no corpo dos guias (.guide-prose) ─────────────── */
/* 1 — Callout "Dica do Piggy" */
.guide-prose .g-callout { display: flex; gap: 15px; background: var(--pink-soft); border: 1px solid rgba(255,45,142,.28); border-left: 3px solid var(--pink); border-radius: 14px; padding: 17px 19px; margin: 26px 0; }
.g-callout-ico { font-size: 1.6rem; line-height: 1; flex: none; margin-top: 2px; }
.g-callout-k { display: block; color: var(--pink); font-weight: 800; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 5px; }
.guide-prose .g-callout p { margin: 0; color: var(--ink); font-size: 1.02rem; }
/* 2 — Números grandes */
.g-stats { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin: 28px 0; }
.g-stat { flex: 1; min-width: 128px; background: var(--card-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px; text-align: center; }
.g-stat .n { display: block; font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.g-stat.win { border-color: rgba(198,241,26,.35); background: rgba(198,241,26,.06); }
.g-stat.win .n { color: var(--neon); }
.g-stat .l { display: block; color: var(--ink-3); font-size: .8rem; margin-top: 4px; }
.g-arrow { display: flex; align-items: center; color: var(--ink-3); font-size: 1.2rem; }
/* 3 — Gráfico */
.g-chart { margin: 28px 0; background: var(--card-2); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.g-chart-t { font-weight: 700; font-size: 1rem; color: var(--ink); }
.g-chart-s { color: var(--ink-3); font-size: .82rem; margin: 2px 0 14px; }
.g-chart figcaption { color: var(--ink-3); font-size: .8rem; margin-top: 10px; }
/* 4 — Barras por categoria */
.g-bars { display: flex; flex-direction: column; gap: 11px; margin: 26px 0; }
.g-bar { display: grid; grid-template-columns: 110px 1fr 48px; align-items: center; gap: 12px; }
.g-bar-l { color: var(--ink-2); font-size: .9rem; }
.g-bar-track { display: block; height: 11px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; }
.g-bar-f { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(255,45,142,.55), var(--pink)); }
.g-bar.top .g-bar-f { background: linear-gradient(90deg, var(--pink), var(--neon)); }
.g-bar-v { color: var(--ink); font-weight: 700; font-size: .88rem; text-align: right; font-variant-numeric: tabular-nums; }
/* 5 — Barra de meta / 6 — Card de caixinha (réplica do produto) */
.g-goal, .g-cardshot { background: var(--card-2); border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin: 28px 0; }
.g-goal-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 13px; }
.g-goal-name { font-weight: 700; color: var(--ink); }
.g-goal-pct { color: var(--neon); font-weight: 800; font-variant-numeric: tabular-nums; }
.g-track { height: 15px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; }
.g-track-f { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pink), var(--neon)); }
.g-goal-nums { display: flex; justify-content: space-between; color: var(--ink-3); font-size: .84rem; margin-top: 9px; font-variant-numeric: tabular-nums; }
.g-goal-nums b { color: var(--ink); }
.g-cardshot { max-width: 430px; }
.g-cardshot-top { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.g-cardshot-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.g-cardshot-name { font-weight: 700; color: var(--ink); }
.g-cardshot-val { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.g-cardshot-sub { color: var(--ink-3); font-size: .85rem; margin-top: 9px; font-variant-numeric: tabular-nums; }
/* 7 — Antes × Depois */
.g-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0; }
.g-vs-col { border: 1px solid var(--line); border-radius: 14px; padding: 17px; }
.g-vs-col.good { background: rgba(198,241,26,.05); border-color: rgba(198,241,26,.3); }
.g-vs-h { font-weight: 800; font-size: .92rem; margin-bottom: 11px; color: var(--ink); }
.g-vs-col.good .g-vs-h { color: var(--neon); }
.g-vs-li { display: flex; gap: 8px; color: var(--ink-2); font-size: .9rem; margin-bottom: 8px; }
.g-vs-li:last-child { margin-bottom: 0; }
.g-vs-li .m { flex: none; font-weight: 800; }
.g-vs-col.bad .m { color: #ff5b6a; }
.g-vs-col.good .m { color: var(--neon); }
/* 8 — Resumindo */
.g-takeaways { background: linear-gradient(180deg, rgba(255,45,142,.08), rgba(255,45,142,.03)); border: 1px solid rgba(255,45,142,.25); border-radius: 16px; padding: 22px; margin: 34px 0 8px; }
.g-takeaways h4 { margin: 0 0 15px; font-size: 1.08rem; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.g-tk { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 10px; color: var(--ink); font-size: .98rem; }
.g-tk:last-child { margin-bottom: 0; }
.g-tk .c { flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--neon); color: #10140a; font-weight: 900; font-size: .75rem; display: flex; align-items: center; justify-content: center; margin-top: 2px; }

@media (max-width: 560px) {
  .g-bar { grid-template-columns: 82px 1fr 44px; }
  .g-vs { grid-template-columns: 1fr; }
}

/* Animação ao rolar — opt-in via JS (.g-anim colapsa; .in-view dispara).
   Sem JS os blocos ficam no estado cheio; JS respeita prefers-reduced-motion. */
.g-anim .g-bar-f, .g-anim .g-track-f { transform: scaleX(0); transform-origin: left center; transition: transform 1s cubic-bezier(.2,.85,.25,1); }
.g-anim.in-view .g-bar-f, .g-anim.in-view .g-track-f { transform: scaleX(1); }
.g-bars.g-anim .g-bar:nth-child(2) .g-bar-f { transition-delay: .07s; }
.g-bars.g-anim .g-bar:nth-child(3) .g-bar-f { transition-delay: .14s; }
.g-bars.g-anim .g-bar:nth-child(4) .g-bar-f { transition-delay: .21s; }
.g-bars.g-anim .g-bar:nth-child(5) .g-bar-f { transition-delay: .28s; }
.g-bars.g-anim .g-bar:nth-child(6) .g-bar-f { transition-delay: .35s; }
.g-anim .g-chart-area, .g-anim .g-chart-dot, .g-anim .g-chart-endlabel { opacity: 0; }
.g-anim.in-view .g-chart-area, .g-anim.in-view .g-chart-dot, .g-anim.in-view .g-chart-endlabel { opacity: 1; transition: opacity .55s ease .55s; }
@media (prefers-reduced-motion: reduce) {
  .g-anim .g-bar-f, .g-anim .g-track-f { transform: none; transition: none; }
  .g-anim .g-chart-area, .g-anim .g-chart-dot, .g-anim .g-chart-endlabel { opacity: 1; }
}

@media (max-width: 640px) {
  .guide-hero h1 { font-size: 1.7rem; }
  .guide-sticker-wrap { width: 140px; height: 140px; }
  .guide-sticker { width: 110px; height: 110px; }
  .guide-prose { font-size: 1.02rem; }
  .guide-prose > p:first-of-type { font-size: 1.1rem; }
}

/* ─── Contato ───────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; padding: 10px 0 40px; }
.contact-info { display: grid; gap: 18px; align-content: start; }
.contact-item { display: flex; gap: 14px; align-items: flex-start; }
.contact-item .icon-box { margin-bottom: 0; }
.contact-item h4 { font-size: .95rem; font-weight: 700; margin-bottom: 2px; }
.contact-item p, .contact-item a { color: var(--ink-2); font-size: .9rem; }
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.contact-msg { display: none; padding: 11px 14px; border-radius: 10px; font-size: .84rem; margin-bottom: 16px; line-height: 1.45; }
.contact-msg.show { display: block; }
.contact-msg.err { background: rgba(255,45,45,.1); border: 1px solid rgba(255,45,45,.3); color: #ffb4b4; }
.contact-msg.ok { background: rgba(0,240,120,.1); border: 1px solid rgba(0,240,120,.3); color: #93f7c4; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.field input, .field textarea, .field select { width: 100%; background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; color: var(--ink); font-family: var(--font); font-size: .92rem; outline: none; transition: border-color .15s; }
.field input:focus, .field textarea:focus { border-color: var(--pink); }
.field textarea { resize: vertical; min-height: 110px; }

/* ─── Legal / prose (termos, privacy) ───────────────────────────────── */
.legal { max-width: 800px; margin: 0 auto; padding: 30px 0 60px; }
.legal .breadcrumb { color: var(--neon); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.legal h1 { font-size: clamp(2rem,4vw,2.8rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.legal .updated { color: var(--ink-3); font-size: .84rem; margin-bottom: 30px; }
.legal .privacy-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 34px 20px; }
.legal .intro p, .legal section p, .legal li { color: var(--ink-2); font-size: .95rem; line-height: 1.7; margin-bottom: 12px; }
.legal section { margin-bottom: 28px; padding-top: 6px; border-top: 1px solid var(--line); }
.legal .intro { margin-bottom: 20px; }
.legal h2 { font-size: 1.18rem; font-weight: 700; margin: 14px 0 12px; color: var(--ink); }
.legal h3 { font-size: 1rem; font-weight: 700; margin: 16px 0 8px; color: var(--ink); }
.legal ul, .legal ol { padding-left: 20px; margin-bottom: 12px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--pink); }
.legal strong { color: var(--ink); font-weight: 700; }

/* ─── Comandos ("O que pedir") ──────────────────────────────────────── */
.cmds-page .hero { text-align: center; max-width: 680px; margin: 0 auto 40px; padding-top: 20px; }
.cmds-page .hero h1 { font-size: clamp(2rem,4.5vw,3rem); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; line-height: 1.06; margin: 16px 0; }
.cmds-page .hero p { color: var(--ink-2); line-height: 1.65; }
.cmds-page .section-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cmds-page .cat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.cmds-page .cat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.cmds-page .cat-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--pink-soft); border: 1px solid rgba(255,45,142,.3); font-size: 1.15rem; }
.cmds-page .cat-head h2 { font-size: 1.05rem; font-weight: 700; }
.cmds-page .cat-desc { color: var(--ink-3); font-size: .85rem; line-height: 1.5; margin-bottom: 16px; }
.cmds-page .cmds { display: grid; gap: 8px; }
.cmds-page .cmd { position: relative; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; font-size: .85rem; color: var(--ink); cursor: pointer; font-family: ui-monospace,"SF Mono",Menlo,monospace; transition: border-color .15s, background .15s; }
.cmds-page .cmd:hover { border-color: var(--line-2); background: var(--card-2); }
.cmds-page .cmd-note { display: block; font-family: var(--font); font-size: .72rem; color: var(--ink-3); margin-top: 4px; }
.cmds-page .copied { position: absolute; top: 10px; right: 12px; font-family: var(--font); font-size: .68rem; color: var(--neon); opacity: 0; transition: opacity .15s; }
.cmds-page .cmd.just-copied .copied { opacity: 1; }
.cmds-page .callout { text-align: center; background: linear-gradient(180deg,rgba(255,45,142,.08),transparent); border: 1px solid rgba(255,45,142,.2); border-radius: var(--radius); padding: 30px; margin-top: 24px; }
.cmds-page .callout h3 { font-size: 1.1rem; margin-bottom: 8px; }
.cmds-page .callout p { color: var(--ink-2); max-width: 560px; margin: 0 auto; line-height: 1.6; }
@media (max-width: 760px) { .cmds-page .section-list { grid-template-columns: 1fr; } }

/* ─── Auth (login/cadastro) ─────────────────────────────────────────── */
.auth-wrap { min-height: 82vh; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.auth-card { width: min(420px,100%); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 38px 32px; box-shadow: var(--shadow); }
.auth-card .auth-logo { display: flex; align-items: center; gap: 10px; justify-content: center; font-weight: 800; font-size: 1.1rem; margin-bottom: 22px; }
.auth-card .auth-logo img { width: 34px; height: 34px; object-fit: contain; }
.auth-card h1 { text-align: center; font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
.auth-card .auth-sub { text-align: center; color: var(--ink-2); font-size: .9rem; margin-bottom: 26px; }
.purchase-intent { display: flex; align-items: flex-start; gap: 12px; padding: 14px 15px; margin: -8px 0 22px; border: 1px solid rgba(255,45,142,.28); border-radius: 12px; background: rgba(255,45,142,.07); text-align: left; }
.purchase-intent__icon { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,45,142,.16); color: var(--pink); font-size: .78rem; font-weight: 900; }
.purchase-intent strong, .purchase-intent > span:last-child > span { display: block; }
.purchase-intent strong { color: var(--ink); font-size: .88rem; }
.purchase-intent > span:last-child > span { color: var(--ink-2); font-size: .78rem; line-height: 1.45; margin-top: 2px; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: .76rem; margin: 20px 0; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.social-btns { display: grid; gap: 10px; }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px; color: var(--ink); font-weight: 600; font-size: .9rem; cursor: pointer; transition: background .15s, border-color .15s; }
.social-btn:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }
.auth-alt { text-align: center; color: var(--ink-2); font-size: .86rem; margin-top: 20px; }
.auth-alt a { color: var(--pink); font-weight: 600; }
.forgot { text-align: right; margin-top: -6px; margin-bottom: 4px; }
.forgot a { color: var(--ink-3); font-size: .8rem; }
.forgot a:hover { color: var(--pink); }
.checkbox-row { display: flex; align-items: flex-start; gap: 9px; font-size: .82rem; color: var(--ink-2); line-height: 1.4; margin-bottom: 18px; }
.checkbox-row input { margin-top: 2px; accent-color: var(--pink); }

@media (max-width: 900px) {
  .how-grid, .contact-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: minmax(0,380px); }
}
@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   Landing contínua (index) — faixa de valor, FAQ acordeão, reveal on scroll
   e respiro de âncora sob a nav sticky. Classes opt-in: não afetam layout
   das outras páginas que não as usam.
   ══════════════════════════════════════════════════════════════════════ */

/* Âncora: compensa a nav sticky ao pular pra uma seção via #hash */
section[id] { scroll-margin-top: 96px; }

/* Faixa de propostas de valor (logo abaixo do hero) */
.value-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 4px 0 64px; }
.value-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; color: var(--ink-2); font-size: .86rem; font-weight: 600;
}
.value-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px rgba(198,241,26,.6); flex: none; }

/* Selo "seção" opcional (número/rótulo) acima do título */
.plans-cta { text-align: center; margin: 8px 0 4px; }
.plans-cta a { color: var(--pink); font-weight: 700; font-size: .9rem; }
.plans-cta a:hover { text-decoration: underline; }

/* FAQ — acordeão */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
/* Sem `overflow: hidden`: o botão .faq-q encosta na borda (folga 0), e o recorte
   comia os 4px do anel de foco (2 de largura + 2 de offset) — 0 pixel de anel
   visível, WCAG 2.4.7. O `overflow` aqui não segurava nada: quem recorta a
   sanfona é o próprio .faq-a. Medido: 0 px de diferença aberto e fechado,
   em / e /suporte, 1280x800 e 375x812. */
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.faq-item.open { border-color: var(--line-2); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  color: var(--ink); font-family: var(--font); font-weight: 700; font-size: 1rem;
  padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-q .chev { color: var(--pink); font-size: 1.35rem; line-height: 1; transition: transform .2s var(--ease); flex: none; }
.faq-item.open .faq-q .chev { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s var(--ease); }
.faq-a p { color: var(--ink-2); font-size: .92rem; line-height: 1.65; padding: 0 20px 18px; margin: 0; }

/* Reveal on scroll — progressive enhancement: a classe .reveal só é aplicada
   por JS. Sem JS (ou reduced-motion), o conteúdo já nasce visível. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
/* ══════════════════════════════════════════════════════════════════════
   Acessibilidade — piso do site público.

   `:is()`, não `:where()`. O `:where()` zera a especificidade dos argumentos,
   então a regra ficava em (0,1,0) — vinda só do `:focus-visible` — e PERDIA
   para `.field input, .field textarea, .field select { outline: none }` da
   linha 488, que é (0,1,1). Resultado medido: os 13 campos de /login,
   /cadastro, /reset-password e /suporte ficavam com `outline-style: none`,
   justamente onde o usuário de teclado digita. O `:is()` herda a
   especificidade do argumento mais forte — `[tabindex]`, (0,1,0) — e a regra
   sobe para (0,2,0), que vence o (0,1,1) pelo `b`.

   Não é "ordem de cascata": ordem só desempata especificidade IGUAL.

   Alcance medido dos dois lados: 281 focáveis em 13 rotas, 13 mudam — os 13
   campos. Nenhum outro seletor é atropelado. Guardado por
   tests/frontend/faq_focus_ring.test.mjs.
   ══════════════════════════════════════════════════════════════════════ */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

/* O site já desligava .reveal. Isto fecha o resto: são 17 `transition:`,
   2 `animation:` e 2 @keyframes só neste arquivo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* Comando real fechando um bloco (card de funcionalidade, passo de /como-funciona)
   — reusa .phrase, o mesmo tratamento mono do vocabulário da home. */
.phrase.cmd { display: inline-block; margin-top: 12px; font-size: .8rem; }

/* /como-funciona: a numeração descreve uma sequência real, então numerar não é o
   problema — o círculo em gradiente rosa é, porque dá peso de decoração a um
   ordinal. Aqui ele vira ordinal discreto e o peso vai pra frase que a pessoa
   digita. /whatsapp não tem esta classe e mantém os círculos. */
.steps-typed .step { gap: 14px; }
.steps-typed .step-num,
.steps-typed .step:nth-child(even) .step-num {
  width: 22px; height: auto; border-radius: 0; background: none; box-shadow: none;
  color: var(--ink-3); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
  align-items: flex-start; justify-content: flex-start; padding-top: 3px;
}

/* Faixa curta de agentes na home — não duplica /agents: 3 dos 8, com a arte e a
   copy da própria página, e link pra ela. */
/* Sticker (xerife.png, 265×433, fundo transparente) e não a arte _hero de
   1200×600: as três _hero pesavam 3.020 KB pra renderizar a 327 px. Mesmo
   tratamento do .card-sticker dos guias. */
.agent-mini img { width: auto; height: 150px; object-fit: contain; margin-bottom: 14px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.agent-mini h3 { font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; }
.agent-mini p { color: var(--ink-2); font-size: .93rem; line-height: 1.6; }

/* /funcionalidades: segurança tinha virado oração subordinada no subtítulo do
   CTA. Bloco próprio, largura cheia, reusando .card. */
.sec-note { display: flex; gap: 16px; align-items: flex-start; margin-top: 18px; }
.sec-note .icon-box { margin: 2px 0 0; font-size: 1.6rem; flex: none; }
.sec-note h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.sec-note p { color: var(--ink-2); font-size: .95rem; line-height: 1.6; }

/* Mantém nomes longos na linha da navegação sem reduzir os alvos de toque. */
@media (max-width: 480px) {
  .nav .pb-acct-lbl { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* iOS Safari dá zoom automático ao focar campo com fonte <16px, e o zoom desloca
   o layout inteiro. Os campos públicos vinham de `.field input{font-size:.92rem}`
   (14,72px), na linha 582 deste arquivo.

   ESTE É O QUARTO LUGAR com o mesmo conserto, e a divergência é deliberada — os
   outros três são de OUTRAS superfícies, nenhum alcança as páginas públicas:
     · dashboard-mobile.css:86-88 — todo controle, ≤640px, `!important`. Só
       carrega no dashboard (o <link> tem media ≤900px) e o `!important` existe
       para vencer `.filter-input`/`.piggy-input`, que aqui não existem.
     · admin-dashboard.html:507   — inline, página de admin, sem rota pública.
     · chat-app.css               — escopado no painel de chat.
   Por que `.field` e não todo input: `.field` é o wrapper dos formulários
   públicos — as seis páginas públicas que usam `.field` (login, cadastro,
   suporte, comecar, completar-cadastro, reset-password; só as três primeiras
   têm caso de teste) — e é de onde vem o 14,72px. Alargar para
   `input` global mexeria em campo que ninguém mediu, sem sintoma relatado (§0.3).
   Por que 900px e não 640: o breakpoint de tablet já usado no repo, e o zoom do
   iOS vale no iPad também; a faixa 641–900 não tem regra concorrente aqui.
   FICA DE FORA, conscientemente: input público que não esteja dentro de
   `.field`. Varridas as seis, o único é o checkbox de
   completar-cadastro.html:59 — e o `:not()` abaixo o exclui de propósito. Se
   aparecer outro, ele não herda esta regra.
   O `:not([type=checkbox]):not([type=radio])` deixa as caixas de marcação em
   paz: nelas `font-size` muda o tamanho do controle. */
@media (max-width: 900px) {
  .field input:not([type="checkbox"]):not([type="radio"]),
  .field select,
  .field textarea { font-size: 16px; }
}

/* ── Embed do blog Soro na /blog ────────────────────────────────────────────
   O embed injeta a folha CLARA `soro-blog-styles-light` (texto #1a1a1a sobre
   fundo transparente) — sobre o fundo escuro do site o texto some. Os
   seletores com #soro-blog na frente ganham da especificidade da folha deles
   e traduzem tudo pros tokens do site. */
#soro-blog .soro-blog {
  color: var(--ink);
  font-family: var(--font);
  max-width: 760px;
}
#soro-blog .soro-blog-list { gap: 16px; }

/* Card de artigo (vista de lista) — no molde dos cards .article do site */
#soro-blog .soro-blog-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  transition: transform .15s, border-color .15s;
}
#soro-blog .soro-blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: none;
}
#soro-blog .soro-blog-card:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}
#soro-blog .soro-blog-card-image {
  width: 168px;
  height: 118px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
#soro-blog .soro-blog-card-title {
  color: var(--ink);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
#soro-blog .soro-blog-card-excerpt {
  color: var(--ink-2);
  -webkit-line-clamp: 3;
}
#soro-blog .soro-blog-card-date {
  color: var(--ink-3);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Vista de artigo — no molde do .guide dos guias próprios */
#soro-blog .soro-blog-back {
  background: var(--card-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  font-weight: 600;
}
#soro-blog .soro-blog-back:hover {
  background: var(--card);
  border-color: var(--pink);
  color: var(--ink);
}
#soro-blog .soro-blog-article-title {
  color: var(--ink);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.015em;
  text-wrap: balance;
}
#soro-blog .soro-blog-article-date {
  color: var(--ink-3);
  font-weight: 600;
}
#soro-blog .soro-blog-article-image {
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
#soro-blog .soro-blog-article-content {
  color: var(--ink-2);
  font-size: 1.07rem;
  line-height: 1.75;
}
#soro-blog .soro-blog-article-content h1,
#soro-blog .soro-blog-article-content h2,
#soro-blog .soro-blog-article-content h3 { color: var(--ink); font-weight: 800; }
#soro-blog .soro-blog-article-content h2 { font-size: 1.4rem; }
#soro-blog .soro-blog-article-content h3 { font-size: 1.2rem; }
#soro-blog .soro-blog-article-content strong { color: var(--ink); }
#soro-blog .soro-blog-article-content a { color: var(--pink); font-weight: 600; }
#soro-blog .soro-blog-article-content a:hover { text-decoration: underline; text-underline-offset: 3px; }
#soro-blog .soro-blog-article-content blockquote,
#soro-blog .soro-blog-article-content pre {
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin: 0 0 16px;
  padding: 16px 20px;
}
#soro-blog .soro-blog-article-content blockquote { color: var(--ink); }
#soro-blog .soro-blog-article-content pre { overflow-x: auto; }
#soro-blog .soro-blog-article-content img { border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* Loading / vazio / erro / spinner */
#soro-blog .soro-blog-empty,
#soro-blog .soro-blog-loading,
#soro-blog .soro-blog-error { color: var(--ink-3); }
#soro-blog .soro-blog-spinner { border-color: var(--line-2); border-top-color: var(--pink); }

/* Mobile: card vira coluna com foto 16:9, como os .article do site */
@media (max-width: 640px) {
  #soro-blog .soro-blog-card { flex-direction: column; gap: 14px; }
  #soro-blog .soro-blog-card-image { width: 100%; height: auto; aspect-ratio: 16/9; }
}