/* ===================================================================
 * Tokens: fonte única. Componente que usa valor cru é defeito de revisão.
 * A superfície escura troca os tokens semânticos via [data-surface="dark"];
 * os componentes não sabem em que tema estão.
 * =================================================================== */
:root{
  /* -- primitivas de cor -- */
  --amber:#E87722;          /* MARCA: preenchimento, filete, ícone. NÃO é cor de texto:
                               mede 2,75:1 sobre bone, abaixo do AA (4,5:1). */
  --amber-ink:#c75f10;      /* Texto âmbar. 5,17:1 sobre bone, 5,75:1 sobre tinta. */
  --amber-soft:#FFF8F0;
  --amber-line:#f3ddc4;
  --bone:#FAF6EF;
  --paper:#FFFFFF;
  --carbon:#211C18;
  --clay:#5f564c;
  --clay-soft:#6b6157;
  --mist:#e6dbc9;
  --approve:#2f7d5b;

  /* -- semânticas: claro (padrão) -- */
  --surface:var(--bone);
  --surface-raised:var(--paper);
  --ink:var(--carbon);
  --ink-muted:var(--clay);
  --ink-soft:var(--clay-soft);
  --accent:var(--amber);
  --accent-ink:var(--amber-ink);
  --accent-wash:var(--amber-soft);
  --accent-line:var(--amber-line);
  --rule:var(--mist);

  /* -- grid e espaço -- */
  --container:1160px;
  --container-pad:clamp(20px,5vw,44px);
  --gutter:clamp(20px,4vw,64px);
  --measure:64ch;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --s-section:clamp(64px,9vw,128px);

  /* -- tipografia --
   * Sora/Inter são a marca e ficam. O acréscimo é a família MONO: rótulo,
   * índice de seção e fonte de estatística. É ela que separa esta página de
   * um template, e é de sistema, então não custa uma requisição de rede. */
  --font-display:Sora,Inter,ui-sans-serif,system-ui,sans-serif;
  --font-ui:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono","IBM Plex Mono",Menlo,Consolas,monospace;

  --text-display:clamp(31px,5.2vw,50px);
  --text-h2:clamp(25px,3.4vw,36px);
  --text-h3:18px;
  --text-lead:clamp(16px,2.1vw,19px);
  --text-base:16px;
  --text-sm:14.5px;
  --text-mono:12px;
  --text-stat:clamp(40px,6vw,64px);

  --lead-tight:1.08;
  --lead-h2:1.12;
  --lead-body:1.6;

  /* -- superfície --
   * Raios maiores e sombra mais discreta: a referência de varejo (Instacart)
   * apoia a leveza no RAIO e no respiro, não em sombra. A sombra antiga era um
   * halo âmbar de 16px que puxava o olho para o botão em vez do conteúdo, o
   * oposto da sobriedade pedida. */
  --r:20px;
  --r-lg:28px;
  --r-pill:999px;
  --hair:1px;
  --shadow:0 1px 2px rgba(33,28,24,.04), 0 8px 24px rgba(33,28,24,.05);
  --shadow-press:0 1px 2px rgba(33,28,24,.10);

  /* Proporções dos blocos de foto. Estão em token porque a foto ainda não
   * existe: hoje entra placeholder, e o dia em que a imagem real chegar o
   * enquadramento já está decidido e nada no layout se mexe. */
  --ratio-wide:16/9;
  --ratio-card:4/3;
  --ratio-portrait:3/4;
}

/* Pontuação escura: usada UMA vez na página, na seção de prova. Existe para
 * quebrar a alternância bone/branco que fazia cinco seções lerem igual. */
[data-surface="dark"]{
  --surface:var(--carbon);
  --surface-raised:#2b2521;
  --ink:var(--bone);
  --ink-muted:#c9bfb2;
  --ink-soft:#c9bfb2;
  --accent-ink:var(--amber);   /* 5,75:1 sobre carbon: âmbar puro vira texto aqui */
  --accent-wash:rgba(232,119,34,.10);
  --accent-line:rgba(232,119,34,.32);
  --rule:rgba(250,246,239,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--font-ui);font-size:var(--text-base);
  -webkit-font-smoothing:antialiased;line-height:var(--lead-body)}
h1,h2,h3,.display{font-family:var(--font-display);letter-spacing:-.02em;line-height:var(--lead-tight);margin:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--container-pad)}
.num{font-family:var(--font-display);font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}

/* Rótulo mono: a assinatura tipográfica da página. Eyebrow, índice de seção,
 * fonte de estatística e etiqueta dentro do chat usam TODOS esta classe. */
.mono{font-family:var(--font-mono);font-size:var(--text-mono);letter-spacing:.08em;
  text-transform:uppercase;font-weight:500;line-height:1.4}

/* Botões: pill cheia, generosa, plana.
 * A forma vem da referência de varejo; a COR continua a da Sabiá. O halo âmbar
 * saiu (ver --shadow): botão sóbrio se apoia em tamanho e contraste, não em
 * brilho. O feedback de toque virou afundar, não levitar. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 28px;border-radius:var(--r-pill);border:none;cursor:pointer;
  font-family:var(--font-ui);font-weight:700;font-size:15.5px;background:var(--accent);color:#fff;
  box-shadow:none;transition:background .16s ease, transform .09s ease, box-shadow .16s ease}
.btn:hover{background:var(--amber-ink)}
.btn:active{transform:translateY(1px);box-shadow:var(--shadow-press)}
.btn svg{flex:none}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--rule)}
.btn.ghost:hover{border-color:var(--accent);background:var(--accent-wash)}
.btn.sm{min-height:44px;padding:0 20px;font-size:14.5px}

/* Bloco de foto. `.shot` carrega a proporção e o recorte; `.shot--ph` é o
 * estado SEM imagem, que é o estado de hoje: uma superfície calma com o rótulo
 * do que vai ali. Não simula foto e não finge conteúdo que não temos. */
.shot{display:block;position:relative;overflow:hidden;border-radius:var(--r);
  aspect-ratio:var(--ratio-card);background:var(--accent-wash);
  border:var(--hair) solid var(--accent-line)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot--wide{aspect-ratio:var(--ratio-wide)}
.shot--portrait{aspect-ratio:var(--ratio-portrait)}
.shot--ph{display:grid;place-items:center;text-align:center;padding:var(--s5)}
.shot--ph span{color:var(--accent-ink);opacity:.75;max-width:26ch}
.shot--ph::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(232,119,34,.05) 11px 22px)}

/* canto symbol */
.mark{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:18px}
.mark .sym{width:30px;height:30px;flex:none}
.mark small{display:block;font-family:var(--font-mono);font-weight:500;font-size:10.5px;
  color:var(--ink-muted);letter-spacing:.06em;text-transform:uppercase;margin-top:3px}

/* header */
header.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bone) 86%,transparent);
  backdrop-filter:blur(10px);border-bottom:var(--hair) solid var(--rule)}
header.top .wrap{display:flex;align-items:center;gap:var(--s5);height:66px}
header .btn{min-height:42px;font-size:14px;padding:0 20px}

/* Navegação. A LP não tinha NENHUMA: só a marca e um CTA, então não havia para
 * onde ir a partir dela. Sem JS: no desktop é uma linha de links; no celular
 * vira uma faixa rolável horizontalmente logo abaixo da marca, que não depende
 * de menu sanduíche (um menu que abre exige script, e a página precisa
 * funcionar sem ele). */
.nav{display:flex;align-items:center;gap:var(--s5);margin-left:auto}
.nav a{font-size:14.5px;color:var(--ink-muted);white-space:nowrap;
  padding:6px 0;border-bottom:2px solid transparent;transition:color .16s, border-color .16s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.nav .hdr-cta{margin-left:var(--s3)}

@media(max-width:900px){
  header.top .wrap{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:0;gap:var(--s3)}
  .nav{width:100%;margin-left:0;order:3;gap:var(--s5);
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    border-top:var(--hair) solid var(--rule);padding-top:10px;margin-top:10px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding-bottom:10px}
}

/* A 375px as quatro abas somavam 392px numa faixa de 335: "Para quem" ficava
 * CORTADO na borda, sem nenhum sinal de que a barra rolava — lia como link
 * quebrado, não como conteúdo além da dobra. Duas medidas:
 *
 * 1. "Início" sai da nav no celular. O wordmark ao lado já leva pra home e é o
 *    gesto que todo mundo conhece; manter os dois gastava 62px (link + vão) no
 *    lugar onde eles faltavam. As três abas restantes cabem com folga.
 * 2. Máscara de esmaecimento na borda direita, que só aparece quando ainda há
 *    conteúdo para rolar. É rede de segurança: se a cópia crescer ou o usuário
 *    estiver com fonte ampliada, a barra volta a transbordar — e aí ela ao menos
 *    ANUNCIA que rola, em vez de fingir que acabou. */
@media(max-width:640px){
  .nav a:first-child{display:none}          /* "Início" — o wordmark faz esse papel */
  .nav{gap:var(--s4);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  /* Sem transbordo não há o que anunciar: a máscara sairia comendo a última aba. */
  .nav:not([data-transborda]){-webkit-mask-image:none;mask-image:none}
}

/* Barra fixa de rodapé no celular. Substitui o `display:none` que escondia o
 * ÚNICO CTA persistente justamente no canal onde o público está: sem ela, o
 * botão só existia no topo e no fim da página. */
.m-cta{display:none}
@media(max-width:640px){
  header .hdr-cta{display:none}
  .m-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:45;
    padding:10px var(--s4) calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--bone) 92%,transparent);backdrop-filter:blur(10px);
    border-top:var(--hair) solid var(--rule)}
  .m-cta .btn{width:100%}
  body{padding-bottom:84px}   /* o rodapé não fica embaixo da barra */
}

/* ===================================================================
 * Seção editorial: índice + título numa coluna estreita, conteúdo numa
 * coluna larga. Substitui o `.sec-h{text-align:center;margin:auto}` que
 * repetia a MESMA composição centralizada em seis seções seguidas.
 * =================================================================== */
section{padding:var(--s-section) 0;background:var(--surface);color:var(--ink)}
section + section{border-top:var(--hair) solid var(--rule)}
.ed{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gutter);align-items:start}
@media(max-width:860px){.ed{grid-template-columns:1fr;gap:var(--s6)}}
.ed__aside{position:sticky;top:calc(66px + var(--s5))}
@media(max-width:860px){.ed__aside{position:static}}
/* `flex-start` + deslocamento: quando o rótulo quebra em duas linhas (celular),
   centralizar deixava o filete flutuando no meio do bloco em vez de ancorado
   na primeira linha. O 0.55em alinha o filete à altura-x do texto. */
.ed__index{display:flex;align-items:flex-start;gap:var(--s3);color:var(--accent-ink);margin-bottom:var(--s4)}
.ed__index::before{content:"";width:var(--s6);height:1.5px;background:var(--accent);flex:none;margin-top:.55em}
.ed__title{font-size:var(--text-h2);font-weight:800;line-height:var(--lead-h2)}
.ed__lead{color:var(--ink-muted);font-size:var(--text-base);margin:var(--s4) 0 0;max-width:42ch}

/* eyebrow do herói: mesmo rótulo mono, com o filete. Nada de pílula. */
.eyebrow{display:flex;align-items:flex-start;gap:var(--s3);color:var(--accent-ink);margin-bottom:var(--s5)}
.eyebrow::before{content:"";width:var(--s6);height:1.5px;background:var(--accent);flex:none;margin-top:.55em}

/* hero */
.hero{position:relative;overflow:hidden;padding:var(--s8) 0 var(--s7);border-top:0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:30px}}
h1{font-size:var(--text-display);font-weight:800}
.lead{font-size:var(--text-lead);color:var(--ink-muted);max-width:52ch;margin:var(--s5) 0 var(--s6)}
.cta-row{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.microcopy{font-size:13px;color:var(--ink-soft)}
.proof{margin-top:var(--s6);display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  border-top:var(--hair) solid var(--rule);padding-top:var(--s5)}
.proof .lbl{font-size:13.5px;color:var(--ink-muted);max-width:420px}
.seal{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:14.5px;color:var(--ink);
  background:var(--accent-wash);border:var(--hair) solid var(--accent-line);border-radius:12px;padding:10px 14px}
.seal .ck{width:20px;height:20px;border-radius:50%;background:var(--approve);display:grid;place-items:center;flex:none}
.pill{display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-ink);background:var(--surface-raised);
  border:var(--hair) solid var(--accent-line);border-radius:6px;padding:3px 7px}

/* chat mock */
.chat{background:var(--surface-raised);border:var(--hair) solid var(--rule);border-radius:22px;box-shadow:var(--shadow);
  padding:14px;max-width:400px;margin:0 auto;position:relative}
.chat-hd{display:flex;align-items:center;gap:10px;padding:4px 6px 12px;border-bottom:var(--hair) solid var(--rule)}
.chat-hd .av{width:34px;height:34px;border-radius:50%;background:var(--accent-wash);display:grid;place-items:center;flex:none}
.chat-hd b{font-family:var(--font-display);font-size:14px}
.chat-hd .st{font-size:11px;color:var(--approve);display:flex;align-items:center;gap:5px}
.chat-hd .st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--approve)}
.selo{margin:12px 6px 4px;color:var(--accent-ink);
  background:var(--accent-wash);border:var(--hair) solid var(--accent-line);border-radius:8px;padding:6px 10px;
  display:inline-flex;gap:7px;align-items:center}
.stream{display:flex;flex-direction:column;gap:9px;padding:10px 4px 4px}
.msg{max-width:86%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.42}
.msg.bot{background:#f6efe4;border:var(--hair) solid #efe5d6;border-bottom-left-radius:5px;align-self:flex-start}
.msg.me{background:var(--accent);color:#fff;border-bottom-right-radius:5px;align-self:flex-end;font-weight:600}
.msg.sim{background:var(--approve);color:#fff;align-self:flex-end;font-weight:800;letter-spacing:.5px;
  display:inline-flex;align-items:center;gap:7px}
.approved{align-self:flex-end;font-size:11px;color:var(--approve);font-weight:600;margin-top:-3px}
.reclabel{align-self:flex-start;display:inline-flex;gap:6px;align-items:center;color:var(--accent-ink)}
.msg .save{display:block;margin-top:5px;color:var(--amber-ink);font-weight:800;font-size:13.5px}
.reveal-chat{opacity:0;transform:translateY(6px)}
.reveal-chat.in{opacity:1;transform:none;transition:opacity .4s ease, transform .4s ease}
.msg .tm{display:block;margin-top:5px;font-size:10px;font-weight:400;color:var(--ink-soft)}
.msg.me .tm,.msg.sim .tm{color:rgba(255,255,255,.82)}
.msg .line{display:block;margin-top:3px}
.qr{align-self:flex-end;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  color:var(--amber-ink);background:var(--surface-raised);border:1.5px solid var(--accent-line);border-radius:999px;padding:6px 13px}
.chat-note{text-align:center;font-size:11px;color:var(--ink-soft);margin:11px 0 0}

/* cartões de dado + declaração */
.chips{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--gutter)}
@media(max-width:760px){.chips{grid-template-columns:1fr}}
.chip{max-width:var(--measure)}
.chip::before{content:"";display:block;width:var(--s6);height:1.5px;background:var(--accent);margin-bottom:var(--s4)}
.chip .n{font-family:var(--font-display);font-weight:800;font-size:var(--text-stat);color:var(--accent-ink);
  line-height:1;font-variant-numeric:tabular-nums}
.chip .d{color:var(--ink);font-size:var(--text-lead);margin-top:var(--s3);line-height:1.5}
.chip .src{color:var(--ink-soft);margin-top:var(--s4)}
/* Cartão de DECLARAÇÃO: existe porque a terceira métrica não tinha fonte
 * verificável. Em vez de publicar um número atribuído a "referências do
 * setor", a afirmação vira texto, sem número, sem fonte inventada. */
.chip.stmt::before{background:var(--rule)}
.chip.stmt .d{font-family:var(--font-display);font-weight:700;font-size:var(--text-h3);line-height:1.35;margin-top:0}

/* auto-fit em vez de `repeat(3,1fr)`: os passos agora moram na coluna larga da
   seção editorial (~680px), não na largura inteira. Fixar 3 colunas ali dava
   ~215px por card e quebrava cada título em duas linhas. */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;position:relative}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface-raised);border:var(--hair) solid var(--rule);border-radius:var(--r);padding:24px;box-shadow:var(--shadow);position:relative}
.step .k{color:var(--accent-ink);font-family:var(--font-mono);font-size:var(--text-mono);letter-spacing:.08em}
.step h3{font-size:var(--text-h3);margin:8px 0 6px}
.step p{color:var(--ink-muted);font-size:var(--text-sm);margin:0}
.step.approve{border-color:var(--accent-line);background:linear-gradient(180deg,var(--accent-wash),var(--surface-raised) 60%)}
.step .selo3{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--surface-raised);border:var(--hair) solid var(--accent-line);border-radius:999px;padding:5px 11px}
/* Os conectores tracejados tinham posições fixas (`left:18%;right:55%`)
   calibradas para três colunas ocupando a largura inteira. Com os passos numa
   coluna editorial de largura variável e número de colunas variável, essas
   porcentagens apontam para o vazio. Ficam desligados até haver uma régua que
   acompanhe a grade. */
.connect{display:none!important}

/* banda de prova (superfície escura) */
.band{position:relative;overflow:hidden}
.band .stmt{font-family:var(--font-display);font-weight:800;font-size:var(--text-h2);
  line-height:var(--lead-h2);max-width:20ch}
.band .sub{font-size:var(--text-lead);color:var(--ink-muted);margin:var(--s5) 0 0;max-width:var(--measure)}
.band .cav{color:var(--ink-soft);font-size:var(--text-sm);max-width:var(--measure);margin:var(--s5) 0 0}
/* z-index 0 + conteúdo em 1: sem isso o traço decorativo passava POR CIMA do
   ledger e lia como rabisco em cima do texto. */
.band .wing{position:absolute;inset:auto 0 0 0;height:200px;opacity:.12;pointer-events:none;z-index:0}
.band > *:not(.wing){position:relative;z-index:1}
.ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--gutter);
  margin-top:var(--s7);border-top:var(--hair) solid var(--rule);padding-top:var(--s6)}
@media(max-width:560px){.ledger{grid-template-columns:1fr}}
.ledger dt{color:var(--accent-ink)}
.ledger dd{margin:var(--s2) 0 0;font-size:var(--text-sm);color:var(--ink-muted)}

/* mesmo motivo dos passos: três colunas fixas dentro da coluna editorial
   deixavam cada selo com ~215px e quebravam os títulos no meio */
.badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
@media(max-width:760px){.badges{grid-template-columns:1fr}}
.badge{background:var(--surface-raised);border:var(--hair) solid var(--rule);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.badge .ic{width:44px;height:44px;border-radius:12px;background:var(--accent-wash);display:grid;place-items:center;margin-bottom:14px}
.badge h3{font-size:16px;margin:0 0 6px}
.badge p{color:var(--ink-muted);font-size:14px;margin:0}
.guia{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2.6vw,24px);
  margin:var(--s7) 0 0;color:var(--ink);max-width:30ch}
.guia b{color:var(--accent-ink)}

/* ===================================================================
 * Cabeçalho das páginas internas. As abas não repetem o herói da home
 * (com o chat e o CTA duplo): abrem com rótulo, título e uma linha.
 * =================================================================== */
.phead{padding:var(--s8) 0 var(--s7);border-bottom:var(--hair) solid var(--rule)}
.phead h1{font-size:clamp(28px,4.4vw,44px);font-weight:800;max-width:18ch}
.phead .sub{color:var(--ink-muted);font-size:var(--text-lead);margin:var(--s5) 0 0;max-width:var(--measure)}

/* Departamentos: a taxonomia do que a Sabiá cota. Espelha o menu de
 * departamentos da referência, mas com as categorias REAIS do produto
 * (secos, descartáveis, embalagens, limpeza, facilities). */
.depts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s6) var(--gutter)}
.dept{display:flex;flex-direction:column;gap:var(--s4)}
.dept h3{font-size:var(--text-h3);font-weight:700}
.dept p{color:var(--ink-muted);font-size:var(--text-sm);margin:0}
.dept ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2)}
.dept li{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  color:var(--ink-muted);background:var(--surface-raised);
  border:var(--hair) solid var(--rule);border-radius:var(--r-pill);padding:4px 11px}

/* Perfis de operação (para quem). Foto em retrato + a dor daquele perfil. */
.profiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s6) var(--gutter)}
.profile h3{font-size:var(--text-h3);font-weight:700;margin:var(--s4) 0 var(--s2)}
.profile p{color:var(--ink-muted);font-size:var(--text-sm);margin:0}

/* comparação */
table.cmp{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface-raised);
  border:var(--hair) solid var(--rule);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
table.cmp th,table.cmp td{padding:14px 16px;text-align:left;font-size:14px;border-bottom:var(--hair) solid var(--rule)}
table.cmp th{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-muted);background:#faf4ea;font-weight:500}
table.cmp tr:last-child td{border-bottom:none}
table.cmp .sab{background:var(--accent-wash);font-weight:600}
table.cmp th.sab{background:#f7e3cb;color:var(--accent-ink)}
table.cmp td.asp{font-weight:600;color:var(--ink)}
.cmp-wrap{overflow-x:auto}
.cmp-cards{display:none}
.cmp-cards .cc{background:var(--surface-raised);border:var(--hair) solid var(--rule);border-radius:var(--r);padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow)}
.cmp-cards .cc .asp{font-family:var(--font-display);font-weight:700;font-size:14px;margin-bottom:8px}
.cmp-cards .cc .row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:5px 0;border-top:var(--hair) solid var(--rule)}
.cmp-cards .cc .row:first-of-type{border-top:none}
.cmp-cards .cc .row .who{color:var(--ink-muted)}
.cmp-cards .cc .row.sab{color:var(--accent-ink);font-weight:700}
@media(max-width:680px){.cmp-wrap{display:none}.cmp-cards{display:block}}
.cmp-note{color:var(--ink-muted);font-size:14px;margin-top:18px;max-width:var(--measure)}

/* faq */
.faq{display:flex;flex-direction:column;gap:0}
.qa{border-top:var(--hair) solid var(--rule)}
.qa:last-child{border-bottom:var(--hair) solid var(--rule)}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 4px;cursor:pointer;text-align:left;user-select:none;
  font-family:var(--font-display);font-weight:600;font-size:15.5px;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::marker{content:"";font-size:0}
.qa .ico{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--rule);
  display:grid;place-items:center;color:var(--accent);font-size:18px;transition:transform .2s, border-color .2s}
.qa[open] .ico{transform:rotate(45deg);border-color:var(--accent)}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .25s ease}
.qa .ans p{margin:0;padding:0 4px 20px;color:var(--ink-muted);font-size:var(--text-sm);max-width:var(--measure)}

/* cta final */
.final{position:relative;overflow:hidden}
.final h2{font-size:clamp(26px,4vw,38px);font-weight:800;max-width:16ch}
.final p{color:var(--ink-muted);font-size:17px;margin:var(--s5) 0 var(--s6);max-width:var(--measure)}
.final .btn{min-height:60px;font-size:17px;padding:0 32px}
.final .mc{font-size:13px;color:var(--ink-soft);margin-top:14px;max-width:var(--measure)}

footer{border-top:var(--hair) solid var(--rule);padding:var(--s7) 0 var(--s6)}
footer .ft{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
footer .guia2{color:var(--accent-ink);font-family:var(--font-display);font-weight:700;margin:14px 0 0;font-size:15px}
footer .links{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--ink-muted)}
footer .cpr{color:var(--ink-soft);font-size:12.5px;margin-top:22px}

@media(max-width:720px){
  /* links legais viram alvos de toque de 44px (WCAG) e ganham respiro */
  footer .links{gap:2px 20px}
  footer .links a{min-height:44px;display:inline-flex;align-items:center;padding:6px 0}
}
@media(max-width:560px){
  /* menos espaço morto no topo: aproxima o CTA da dobra em telas pequenas */
  .hero{padding:26px 0 28px}
}

/* scroll reveal */
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;transition:opacity .5s ease, transform .5s ease}

.canto{position:absolute;opacity:.5;pointer-events:none}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important}
  .rv,.reveal-chat{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
  /* o mascote é intencional: mantém voo + asa mesmo sob reduced-motion */
  #birdie{transition:transform 1.35s cubic-bezier(.36,.66,.28,1)!important}
  #birdie .wrap{animation:sb-bob 3.6s ease-in-out infinite!important}
  #birdie .wl{animation:sb-flap-l 2.8s ease-in-out infinite!important}
  #birdie .wr{animation:sb-flap-r 2.8s ease-in-out infinite!important}
}

/* Sabiá voador: personagem interativo que acompanha o scroll e responde ao toque */
/* absolute (não fixed): a posição é relativa ao DOCUMENTO, então pousado ele
   rola junto com o card em vez de flutuar colado na tela */
#birdie{position:absolute;left:0;top:0;z-index:35;line-height:0;
  transform:translate(12vw,20vh);transition:transform 1.35s cubic-bezier(.36,.66,.28,1);
  cursor:pointer;will-change:transform;-webkit-tap-highlight-color:transparent}
#birdie .wrap{animation:sb-bob 3.6s ease-in-out infinite}
/* durante a travessia: SOBE e desce (arco de voo) em cima do deslocamento
   horizontal do #birdie → o caminho vira parábola, não uma reta */
/* !important vence o bloco reduced-motion (o mascote é intencionalmente exceção) */
/* follow do scroll: HOP curto e suave (arco pequeno) - casa com a transição de .56s,
   então o arco fecha inteiro em vez de ser cortado no meio (leap grande ficava
   esquisito ao seguir o scroll: o bicho pulava pra CIMA quando você descia) */
#birdie.flying.hop .wrap{animation:sb-hop .56s ease-in-out!important}
/* voo por clique (easter egg): SWOOP grande e brincalhão - casa com a transição de 1.15s */
#birdie.flying.leap .wrap{animation:sb-swoop 1.15s ease-in-out!important}
#birdie.perched .wrap{animation:none!important}   /* pousado: pés PLANTADOS na linha (sem bob) */
#birdie svg{display:block;overflow:visible;filter:drop-shadow(0 6px 10px rgba(33,28,24,.22))}
#birdie .bird-front{width:55px;height:66px}   /* pousado, perfil inclinado (viewBox 62x74) */
#birdie .bird-side{width:71px;height:50px;display:none}  /* voando (80x56) na MESMA escala do pousado (~0.887px/un) */
/* troca de pose: asas abertas voando, pousado inclinado ao parar */
#birdie.flying .bird-front{display:none}
#birdie.flying .bird-side{display:block}
#birdie.goleft .bird-side,#birdie.goleft .bird-front{transform:scaleX(-1)}  /* vira p/ a direção */
/* asas de frente (simétricas): respiram devagar quando pousado */
#birdie .wl{transform-origin:82% 24%;animation:sb-flap-l .5s ease-in-out infinite}
#birdie .wr{transform-origin:18% 24%;animation:sb-flap-r .5s ease-in-out infinite}
#birdie.perched .wl,#birdie.perched .wr{animation-duration:2.8s}
/* asa de perfil: bate forte durante o voo */
#birdie .swing{transform-box:fill-box;transform-origin:95% 93%;animation:sb-wingbeat .42s ease-in-out infinite!important}
#birdie .swing-far{transform-box:fill-box;transform-origin:93% 93%;animation:sb-wingbeat .42s ease-in-out infinite!important} /* as duas batem juntas */
@keyframes sb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes sb-swoop{0%{transform:translateY(0) rotate(0)}22%{transform:translateY(-42px) rotate(-8deg)}60%{transform:translateY(-34px) rotate(5deg)}100%{transform:translateY(0) rotate(0)}}
/* hop de follow: leve rise + descida, sem lurch - o arco fecha em .56s */
@keyframes sb-hop{0%{transform:translateY(0) rotate(0)}45%{transform:translateY(-12px) rotate(-3deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes sb-flap-l{0%,100%{transform:rotate(2deg)}50%{transform:rotate(22deg)}}
@keyframes sb-flap-r{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(-22deg)}}
@keyframes sb-wingbeat{0%,100%{transform:rotate(6deg)}55%{transform:rotate(-40deg)}}
/* Balões de fala removidos por ora (decisão 2026-07-12): o mascote só voa/pousa. */
@media(max-width:560px){#birdie .bird-front{width:47px;height:56px}#birdie .bird-side{width:61px;height:42px}}