/* ABAIXO DA DOBRA da landing (split perf 20/08). Fonte da verdade: era o 3º
   <style> inline do landing-page.html; o crítico (hero/base/header) ficou lá.
   REGRA: mudou este arquivo -> muda o hash no nome E no <link> do HTML
   (o /assets/* é servido com immutable de 1 ano). */
/* ============ ATMOSFERA — um fundo só para a página inteira ============ */
.atmosfera{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--cream);overflow:hidden}
.atmosfera i{position:absolute;display:block;border-radius:50%;filter:blur(110px);will-change:transform}
.atmosfera .a1{width:min(62vw,860px);height:min(62vw,860px);background:#c9d0fa;opacity:.5;top:-16vh;right:-8vw}
.atmosfera .a2{width:min(54vw,720px);height:min(54vw,720px);background:#fde0a6;opacity:.42;bottom:-20vh;left:-10vw}
@media(prefers-reduced-motion:no-preference){
.atmosfera i{transition:transform 1.6s var(--ez-entra),opacity 1.6s ease}
}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15}
a{text-decoration:none;color:inherit}
.accent{color:var(--indigo)}
/* ============ MINI-UI ============
   Fonte: design system canônico da branch radix — src/design-system/foundations/
   (Radix Colors v3: sand/grass/amber + escala proprietária bizzu). NÃO usar
   brand-tokens.css (.app-foco-humano): a própria radix marca aquilo como "Fundação legada". */
.ux{
  --x-canvas:#f9f9f8;  /* sand-2  · --ds-canvas   */
  --x-card:#fdfdfc;    /* sand-1  · --ds-panel    */
  --x-sub:#f1f0ef;     /* sand-3  · --ds-surface-subtle */
  --x-hover:#e9e8e6;   /* sand-4  · --ds-surface-hover  */
  --x-hair:#dad9d6;    /* sand-6  · --ds-border-subtle  */
  --x-border:#cfceca;  /* sand-7  · --ds-border-default */
  --x-ink:#21201c;     /* sand-12 · --ds-text-primary   */
  --x-sec:#63635e;     /* sand-11 · --ds-text-secondary */
  --x-ter:#63635e;     /* sand-11 · --ds-text-tertiary  */
  --x-accent:#5b6ce0;  /* bizzu-9  · --ds-accent-solid */
  --x-atext:#3f4aa8;   /* bizzu-11 · --ds-accent-text  */
  --x-asurf:#f0f1fe;   /* bizzu-3  · --ds-accent-surface */
  --x-abord:#bec5f2;   /* bizzu-7  · --ds-accent-border  */
  --x-green:#46a758;   /* grass-9 · --ds-success-solid */
  --x-amber:#ffc53d;   /* amber-9 · --ds-warning-solid */
  --x-track:#e9e8e6;--x-done:#e9f6e9;  /* grass-3 · --ds-success-surface */
  /* O dourado é EXCLUSIVO do Sinal (contrato de marca §2, PrioridadeCelula.jsx): pintar
     a banda mais alta de ouro punha 6 ouros no Raio-X e nenhum era o Sinal. A escala é
     periwinkle de ação descendo para cinza — DOT_COR: primary-text, primary, text-secondary, border-info. */
  --x-gold:#ffc53d;
  --x-b1:#3f4aa8;--x-b2:#5b6ce0;--x-b3:#63635e;--x-b4:#8C8794;--x-b5:#bcbbb5;
  font-family:var(--font-head);
  color:var(--x-ink);line-height:1.45;
}
.ux .mono{font-family:var(--font-metric);font-variant-numeric:tabular-nums}
.ux .etiq{display:inline-flex;align-items:center;gap:6px;background:var(--x-asurf);border:1px solid var(--x-abord);border-radius:4.5px;color:var(--x-atext);font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;padding:3px 8px}
.ux .banda{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600}
.ux .banda i{width:8px;height:8px;border-radius:50%;border:1px solid var(--x-border)}
/* "Muito alta" usa o periwinkle de AÇÃO (--primary-text, 7,00:1), nunca o dourado:
   o ouro é reservado ao Sinal da próxima tarefa. grass-3/8/12 para o estado concluído. */
.ux{--x-alta:#3f4aa8;--x-alta-glifo:#3f4aa8;
    --x-gsurf:#e9f6e9;--x-gbord:#65ba74;--x-gtext:#203c25;--x-hl:#f0f1fe}
.n-lab{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--x-sec)}
.n-prio{font-size:10.5px;font-weight:700;color:var(--x-alta);display:inline-flex;align-items:center;gap:5px}
.n-prio::before{content:"";width:9px;height:8px;
  background:linear-gradient(to top,var(--x-alta-glifo) 34%,transparent 34%),linear-gradient(to top,var(--x-alta-glifo) 67%,transparent 67%),linear-gradient(to top,var(--x-alta-glifo) 100%,transparent 100%);
  background-size:2px 100%,2px 100%,2px 100%;background-position:0 100%,3.5px 100%,7px 100%;background-repeat:no-repeat}
/* PLANO DE ESTUDO */
.pl-meta{display:flex;align-items:center;gap:10px;background:var(--x-card);border:1px solid var(--x-border);border-radius:12px;padding:8px 11px}
.pl-anel{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:700;color:var(--x-ink);background:conic-gradient(var(--x-accent) 36%,var(--x-hair) 0);position:relative}
.pl-anel::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--x-card)}
.pl-anel span{position:relative;z-index:1}
.pl-metalab{line-height:1.25;flex:none}
.pl-metalab b{display:block;font-size:9.5px;color:var(--x-sec);font-weight:500}
.pl-dias{display:flex;gap:4px;flex:1;min-width:0}
/* Os dias ganharam inicial: na tela real cada barra é rotulada (Seg·hoje, Ter, Qua…),
   e barra sem rótulo não diz que dia é. */
.pl-dias i{flex:1;height:15px;border-radius:4px;background:var(--x-sub);border:1px solid var(--x-hair);
  display:grid;place-items:center;font-style:normal;font-family:var(--font-metric);font-size:7px;
  font-weight:700;color:var(--x-ter);line-height:1}
.pl-dias i.hoje{color:var(--x-atext)}
/* Rodapé de progresso do plano: existe na tela real e faltava aqui. */
.pl-rodape{display:flex;align-items:center;gap:10px;margin-top:9px;background:var(--x-card);
  border:1px solid var(--x-border);border-radius:12px;padding:8px 11px}
.pl-rodape .pl-anel{width:30px;height:30px;font-size:8px}
.pl-prog{font-size:11px;color:var(--x-sec);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-prog b{color:var(--x-ink);font-family:var(--font-metric);font-weight:700}
.pl-dias i.ok{background:var(--x-gsurf);border-color:var(--x-gbord)}
.pl-dias i.hoje{border-color:var(--x-accent);background:var(--x-asurf)}
.pl-tarefa{padding:13px 14px;display:grid;gap:7px;margin-top:9px}
.pl-rot{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pl-acerto{margin-left:auto;font-size:10px;color:var(--x-sec);background:var(--x-sub);border:1px solid var(--x-hair);border-radius:999px;padding:3px 10px}
.pl-acerto b{color:var(--x-ink);font-family:var(--font-metric)}
.pl-acerto b.pct{color:#a8720c}
.pl-mat{font-family:var(--font-head);font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.pl-top{font-size:12px;font-weight:650;color:var(--x-ink);line-height:1.3}
.pl-acoes{display:flex;align-items:center;gap:8px;margin-top:3px;flex-wrap:wrap}
.pl-fin{font-size:11px;color:var(--x-sec);display:inline-flex;align-items:center;gap:5px}
.pl-fin::before{content:"";width:11px;height:11px;border-radius:50%;border:1.5px solid var(--x-border)}
/* QUESTOES — o player */
.qz-topo{display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--x-hair);padding-bottom:8px;flex-wrap:wrap}
.qz-nums{display:flex;gap:4px}
.qz-nums i{font-style:normal;width:16px;height:16px;border-radius:4px;display:grid;place-items:center;font-size:9px;font-weight:700;font-family:var(--font-metric);background:var(--x-sub);border:1px solid var(--x-hair);color:var(--x-sec)}
.qz-nums i.certo{background:var(--x-gbord);border-color:var(--x-gbord);color:#fff}
.qz-nums i.errado{background:transparent;border:1.5px dashed #e54666;color:#a1132e}
.qz-nums i.agora{background:var(--x-asurf);border-color:var(--x-accent);color:var(--x-atext);box-shadow:0 0 0 2px var(--x-card),0 0 0 3.5px var(--x-accent)}
/* Placar e cabeçalho da questão: existem na tela real (o topo mostra
   "acertou: N · errou: N" ao lado da trilha, e o card abre com o código da questão
   e o botão de salvar para revisar) e faltavam no mockup. */
.qz-placar{font-family:var(--font-metric);font-size:9px;color:var(--x-sec);white-space:nowrap}
.qz-placar b{font-weight:700}
.qz-placar .ok{color:var(--x-gtext)}
.qz-placar .no{color:#a1132e}
.qz-cab{display:flex;align-items:center;gap:8px;margin-top:2px}
.qz-cod{font-size:9.5px;color:var(--x-ter)}
.qz-cod b{font-family:var(--font-metric);font-size:9.5px;font-weight:700;color:var(--x-ink)}
.qz-salvar{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:700;
  color:var(--x-sec);border:1px solid var(--x-hair);border-radius:6px;padding:3px 8px;white-space:nowrap}
.qz-salvar::before{content:"";width:7px;height:9px;flex:none;border:1.4px solid var(--x-sec);border-bottom:none;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%)}
.qz-fonte{font-size:9.5px;font-weight:700;color:var(--x-ink);letter-spacing:.02em}
.qz-fonte span{font-weight:500;color:var(--x-sec)}
.qz-timer{margin-left:auto;font-family:var(--font-metric);font-size:10px;color:var(--x-ink);background:var(--x-sub);border:1px solid var(--x-hair);border-radius:6px;padding:2px 7px}
.qz-enun{font-family:var(--font-read);font-style:normal;font-size:11.5px;line-height:1.5;color:var(--x-ink);background:var(--x-card);border:1px solid var(--x-border);border-radius:10px;padding:11px 12px}
.qz-alts{display:grid;gap:1px;background:var(--x-hair);border:1px solid var(--x-border);border-radius:10px;overflow:hidden}
.qz-alt{display:flex;align-items:center;gap:9px;background:var(--x-card);padding:7px 11px;font-size:11px;color:var(--x-ink)}
.qz-alt i{font-style:normal;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:700;background:var(--x-sub);border:1px solid var(--x-hair);color:var(--x-sec)}
.qz-alt.marcada{background:var(--x-asurf)}
.qz-alt.marcada i{background:var(--x-accent);border-color:var(--x-accent);color:#fff}
/* COMENTARIO DA BIZZU */
.cm-tit{display:flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:800;font-size:12px;color:var(--x-ink)}
.cm-tit::before{content:"✦";color:var(--orange);font-size:11px}
.cm-h{font-family:var(--font-head);font-weight:700;font-size:10.5px;color:var(--x-ink);margin-top:2px}
.cm-p{font-size:10px;line-height:1.5;color:var(--x-sec)}
.cm-p b{color:var(--x-ink)}
.cm-p em,.cm-td em{font-style:normal;background:var(--x-hl);border-radius:3px;padding:0 3px;color:var(--x-atext);font-weight:600}
.cm-tab{width:100%;border-collapse:collapse;border:1px solid var(--x-border);border-radius:8px;overflow:hidden;font-size:9px}
.cm-tab th{background:var(--x-sub);color:var(--x-ink);font-weight:700;text-align:left;padding:5px 7px;border-bottom:1px solid var(--x-border);font-size:8.5px}
.cm-td{padding:5px 7px;color:var(--x-sec);line-height:1.4;border-bottom:1px solid var(--x-hair);vertical-align:top}
.cm-tab tr:last-child .cm-td{border-bottom:none}
.cm-td.ok{color:var(--x-gtext);font-weight:650;white-space:nowrap}
/* REVISOES — entra no plano como tarefa numerada */
.rv-linha{display:flex;align-items:center;gap:10px;background:var(--x-card);border:1px solid var(--x-border);border-radius:10px;padding:7px 10px;font-size:11px}
.rv-linha.rev{border-color:var(--x-abord);background:var(--x-asurf)}
.rv-n{font-family:var(--font-metric);font-size:9.5px;color:var(--x-sec);flex:none;width:18px}
.rv-nm{flex:1;min-width:0;line-height:1.25;color:var(--x-ink);font-weight:600}
.rv-nm small{display:block;font-size:9.5px;font-weight:500;color:var(--x-sec)}
.rv-linha.rev .rv-nm small{color:var(--x-atext)}
.rv-h{font-family:var(--font-metric);font-size:9.5px;color:var(--x-sec);flex:none}
/* o produto lava a linha concluída com --done-wash em vez de apagá-la com opacity */
.rv-feito{background:var(--x-done)}
/* riscar só o subtítulo lia como falha de render; o check marca "feito" sem sujar o texto */
.rv-feito .rv-h::before{content:"✓";color:#2E7D60;font-weight:700;margin-right:6px}
/* PRE-EDITAL */
.pe-linha{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--x-sec)}
.pe-linha b{color:var(--x-ink);font-weight:650}
.pe-passo{display:flex;align-items:center;gap:8px;background:var(--x-card);border:1px solid var(--x-border);border-radius:10px;padding:8px 11px}
.pe-passo .n{font-family:var(--font-metric);font-size:9px;color:var(--x-atext);background:var(--x-asurf);border:1px solid var(--x-abord);border-radius:5px;padding:2px 6px;flex:none}
.pe-seta{height:14px;margin-left:14px;border-left:2px dotted var(--x-border)}
.pe-passo.agora{border-color:var(--x-abord);background:var(--x-asurf)}
.seq{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:650;color:#4f3422;flex:none}
.f-mat{font-family:var(--font-head);font-size:19px;font-weight:700;letter-spacing:-.02em;margin-top:8px;line-height:1.2}
.f-mat small{color:#63635e;font-weight:600;font-size:12px}
.f-top{font-family:var(--font-head);font-size:14.5px;font-weight:700;margin:2px 0 6px}
.f-leis{display:flex;gap:6px;margin-bottom:7px}
.f-por{font-size:11.5px;color:#63635e}
.f-nota{font-size:10.5px;color:#63635e;text-align:right;margin-top:6px}
.porta{display:flex;align-items:center;gap:12px;padding:11px 14px}
.porta .txt{font-size:11.5px;color:#63635e}
.porta .txt b{color:#21201c;font-weight:650}
/* Os 6px de baixo colavam a faixa no título da busca (44px do logo à pergunta,
   com logo de 38px e título de 2rem no meio): os selos pareciam parte do bloco
   de busca em vez de um lastro que veio antes dele. Eles são passivos — quem
   respira em volta deles é que os deixa ler como prova, não como ruído. */
.selos-sec{padding:48px 0 30px}
.selos-label{text-align:center;font-size:1rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:28px}
.selos-wrap{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* `--selo-gap` existe para o keyframe poder ler o mesmo número (ver `scrollX`):
   com os selos separados por um vão, o `-50%` sozinho não fecha o loop. */
.selos{--selo-gap:76px;display:flex;gap:var(--selo-gap);width:max-content;animation:scrollX 26s linear infinite}
.selos:hover{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
.selos{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}
/* logos oficiais (svg vetorial), em cor real: são prova de confiança, não podem sumir na página */
.selo-pill{display:inline-flex;align-items:center;gap:11px;opacity:.92;transition:opacity .3s}
.selo-pill:hover{opacity:1}
.selo-pill img{height:38px;width:auto;flex:none}
.selo-pill img.lg-wordmark{height:32px}
.selo-pill span{font-size:1.5rem;font-weight:700;color:var(--ink);white-space:nowrap}
/* "by" é preposição entre duas marcas, não uma terceira marca: peso e corpo
   menores para "Shiva" e o wordmark da monashees continuarem sendo o que se lê. */
.selo-pill span.selo-by{font-size:1rem;font-weight:500;color:var(--ink-soft);margin:0 -2px}
/* O arquivo é um WORDMARK (viewBox 175x35, proporção 5:1) e estava saindo em
   16x16 — esmagado a ponto de não se ler "monashees". Altura própria, menor que
   a dos outros wordmarks, para casar com a altura do texto "Shiva" ao lado. */
.selo-pill img.selo-mona{height:22px}
/* marquee */
.marquee-wrap{padding:36px 0 10px;overflow:hidden;position:relative}
.marquee-label{text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px}
.marquee{display:flex;gap:0;width:max-content;animation:scrollX 30s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee span{font-family:var(--font-head);font-weight:700;font-size:1.25rem;color:#b9b5aa;padding:0 34px;white-space:nowrap}
/* O conteúdo é duplicado, então a volta é meia largura — mas com `gap` a metade
   cai MEIO VÃO antes do começo da cópia (largura = pilhas + 9 vãos; metade =
   pilhas/2 + 4,5 vãos, e a cópia começa em 5). Daí o tranco a cada 26s. Somar
   meio vão fecha o ciclo. O `.marquee` usa este mesmo keyframe com `gap:0` e
   não declara `--selo-gap`: o fallback 0px o deixa exatamente como estava. */
@keyframes scrollX{to{transform:translateX(calc(-50% - var(--selo-gap, 0px) / 2))}}
/* 104px em cima e embaixo davam 208px de nada entre duas seções — um quarto de tela
   vazio a cada troca (medido: 22% da página era buraco vertical). 72px ainda separa. */
section{padding:72px 0;position:relative}
/* A seção de recursos é a mais alta da página (o palco do carrossel passa de
   1100px) e é onde a escolha do edital aterrissa. Menos respiro em cima faz o
   título, as pills e o palco caberem juntos na tela em vez de o palco nascer
   cortado embaixo da dobra. */
#recursos{padding-top:44px}
#recursos .sec-head{margin-bottom:34px}
.sec-head{text-align:center;max-width:880px;margin:0 auto 56px;position:relative}
/* abertura de capítulo: um fio dourado abre cada seção — é o que faz sentir a virada */
.sec-head::before{content:"";display:block;width:0;height:2px;margin:0 auto 26px;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--indigo) 22%,var(--orange) 78%,transparent);opacity:0}
@media(prefers-reduced-motion:reduce){
.sec-head::before{width:min(300px,62%);opacity:.9}
}
.sec-tag{display:inline-block;background:var(--indigo-soft);color:var(--indigo-deep);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:7px 18px;margin-bottom:18px}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;letter-spacing:-.02em;margin-bottom:14px}
.sec-head p{color:var(--ink-soft);font-size:1.05rem}
/* A grade .features-grid saiu junto com a pilha vertical (e com ela a espinha pontilhada
   .features-grid::before, que costurava 01 → 07): hoje as sete fichas vivem no carrossel
   .cf, mais abaixo. Nenhum elemento do HTML carrega mais essa classe e nenhum .feat-card é
   filho de grid — por isso os grid-column que sobravam aqui foram junto. */
.feat-prova{font-size:.82rem;color:var(--ink-soft)}
.feat-prova b{font-family:var(--font-metric);color:var(--indigo-deep)}
.fq-esq{padding:14px;display:grid;gap:8px;align-self:start;margin-top:26px}
.fq-chip{display:inline-flex;align-self:flex-start;background:#e9f6e9;border:1px solid #65ba74;color:#203c25;border-radius:999px;font-size:10.5px;font-weight:650;padding:3px 10px}
.fq-fio{width:56px;height:150px}
.fq-dir{display:grid;gap:10px}
.fq-q{padding:10px 12px;display:grid;gap:6px}
/* réplica dark do Bizzu do Tópico real (print do app) */
.feat-ui.bt-real{background:var(--x-canvas);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:40px 36px;font-family:var(--font-body)}
.bt-tabs{display:flex;flex-wrap:wrap;gap:5px}
.bt-tabs i{font-style:normal;font-size:9px;color:var(--x-sec);background:var(--x-sub);border:1px solid var(--x-hair);border-radius:99px;padding:3.5px 9px;white-space:nowrap}
.bt-tabs i b{font-family:var(--font-metric);font-weight:700;color:var(--x-atext);margin-right:2px}
.bt-tabs i.on{background:var(--x-asurf);border-color:var(--x-abord);color:var(--x-atext)}
.bt-tabs i.on b{color:var(--x-accent)}
.bt-sec{font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--x-ink);padding-bottom:5px;border-bottom:1px solid var(--x-hair);display:flex;align-items:baseline;gap:7px}
.bt-sec .bt-n{font-family:var(--font-metric);font-size:9px;color:var(--x-atext)}
.bt-par{font-size:10.5px;line-height:1.55;color:var(--x-sec)}
.bt-par em,.bt-armadilha em{font-style:normal;background:var(--x-hl);border-radius:4px;padding:0 4px;color:var(--x-atext);font-weight:600}
.bt-armadilha{font-size:10px;line-height:1.5;color:#7a5406;background:var(--orange-soft);border:1px solid #f0dcae;border-left:2.5px solid var(--orange);border-radius:10px;padding:9px 11px}
.bt-armadilha b{display:block;font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:#a8720c;margin-bottom:3px}
/* ARMADILHAS EM DUAS COLUNAS — é o formato que o produto gera de verdade
   ("Como a banca escreve (Errado)" × "Como é de verdade (Certo)"). A coluna do
   erro fica em laranja e a da verdade em verde: o par lado a lado é o argumento,
   e sem a cor separando os dois lados o olho lê duas frases parecidas. */
.bt-arm{width:100%;border-collapse:collapse;font-size:10px;line-height:1.4;table-layout:fixed}
.bt-arm th{text-align:left;font-family:var(--font-head);font-size:8.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--x-ter);
  padding:0 8px 5px;border-bottom:1px solid var(--x-hair)}
.bt-arm th span{font-weight:600;opacity:.7}
.bt-arm td{padding:7px 8px;vertical-align:top;color:var(--x-sec);border-bottom:1px solid var(--x-hair)}
.bt-arm tr:last-child td{border-bottom:none}
.bt-arm td:first-child{background:var(--orange-soft);color:#7a5406;border-left:2px solid var(--orange)}
.bt-arm td:last-child{background:#eafaee;color:#20502c;border-left:2px solid #46a758}
.bt-arm em{font-style:normal;font-weight:700}
/* A FILA DO PLANO — réplica da tabela do HubPlanoFiel. A linha de REVISÃO é a
   única com fundo próprio: ela é o argumento da ficha (nasce numerada no meio
   das tarefas normais), e sem destaque some no meio das outras seis. */
.pl-tab{width:100%;border-collapse:collapse;font-size:10.5px;table-layout:fixed}
.pl-tab th{text-align:left;font-family:var(--font-head);font-size:8px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--x-ter);
  padding:0 7px 6px;border-bottom:1px solid var(--x-hair);white-space:nowrap}
.pl-tab td{padding:7px;border-bottom:1px solid var(--x-hair);vertical-align:middle;color:var(--x-sec)}
.pl-tab tr:last-child td{border-bottom:none}
.pl-tab td b{display:block;font-weight:700;color:var(--x-ink);font-size:11px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-tab td small{display:block;font-size:9px;color:var(--x-ter);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-tab .c-ok{width:30px}
.pl-tab .c-n{width:26px;color:var(--x-ter)}
.pl-tab .c-d,.pl-tab .c-h{width:48px}
.pl-tab .c-a{width:74px;text-align:right}
/* o "feito" é o mesmo check verde do produto, desenhado em CSS para não custar
   mais um SVG numa página que conta bytes */
.pl-tab .tick{display:inline-block;width:11px;height:11px;border-radius:50%;background:#46a758;position:relative}
.pl-tab .tick::after{content:"";position:absolute;left:3px;top:1.5px;width:3px;height:6px;
  border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.pl-tab tr.feita td b{color:var(--x-sec)}
.pl-tab .pr{display:inline-block;font-size:8.5px;font-weight:700;border-radius:99px;padding:2.5px 7px;white-space:nowrap}
.pl-tab .pr-ma{background:var(--orange-soft);color:#8a5c07;border:1px solid #f0dcae}
.pl-tab .pr-a{background:var(--x-sub);color:var(--x-sec);border:1px solid var(--x-hair)}
.pl-tab .pr-rev{background:var(--x-asurf);color:var(--x-atext);border:1px solid var(--x-abord)}
.pl-tab tr.rev td{background:var(--x-asurf)}
.pl-tab tr.rev td:first-child{border-left:2px solid var(--x-accent)}
.pl-tab tr.rev td b{color:var(--x-atext)}
/* TELA DE MATÉRIAS (ficha do pré-edital). Mesma linha do Raio-X, mas sem os
   grupos: aqui o que importa é que o plano JÁ ESTÁ ABERTO e tem tamanho. */
.pe-aviso{font-size:9.5px;line-height:1.45;color:var(--x-atext);background:var(--x-asurf);
  border:1px solid var(--x-abord);border-left:2.5px solid var(--x-accent);
  border-radius:9px;padding:7px 10px}
.pe-aviso b{font-weight:700}
.mat-lista{display:flex;flex-direction:column;gap:3px}
/* a barra de progresso é o FUNDO da linha, como no produto: um preenchimento
   que avança da esquerda, não uma barrinha separada pedindo espaço */
.mat-linha{position:relative;display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;
  background:var(--x-card);border:1px solid var(--x-hair);overflow:hidden}
.mat-linha::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--pct,0);
  background:linear-gradient(90deg,var(--x-asurf),rgba(91,108,224,.07));pointer-events:none}
.mat-linha>*{position:relative;z-index:1}
.mat-linha .nm{flex:1;min-width:0;font-family:var(--font-head);font-weight:700;font-size:11px;
  color:var(--x-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* fração de concluídos: o número que andou em destaque, o total apagado */
.mat-linha .fr{flex:none;font-family:var(--font-metric);font-size:9.5px;color:var(--x-ter)}
.mat-linha .fr b{font-weight:700;color:var(--x-accent);font-size:10.5px}
/* acerto na banda de nivelDesempenho: >=70 forte, >=50 atenção, abaixo frágil */
.mat-linha .ac{flex:none;font-family:var(--font-metric);font-size:9.5px;font-weight:700;
  border-radius:99px;padding:2.5px 7px}
.mat-linha .ac.forte{color:#2e7d60;background:rgba(63,169,138,.16)}
.mat-linha .ac.atencao{color:#9a6b12;background:rgba(217,164,65,.2)}
.mat-linha .ac.fragil{color:#a8453a;background:rgba(210,107,94,.18)}
.mat-linha .chev{flex:none;width:6px;height:6px;border-right:1.5px solid var(--x-ter);
  border-bottom:1.5px solid var(--x-ter);transform:rotate(-45deg);margin-left:2px}
.bt-texto{font-size:10.5px;color:#21201c;line-height:1.5}
.fq-troca{display:inline-grid}
.fq-troca i{grid-area:1/1;font-style:normal;font-size:10.5px;color:var(--x-sec);opacity:0}
.fq-troca i:nth-child(1){opacity:1}
@media(prefers-reduced-motion:no-preference){
.feat-card.in-view .bt-par{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ez-entra) .45s}
.feat-card.in-view .bt-tabs i{opacity:1;transform:none;transition:opacity .4s ease,transform .45s var(--ez-entra)}
/* a régua acende capítulo a capítulo, 01 → 07: o stagger é o que faz o visitante LER a
     lista em vez de ver um bloco de chips. Passo curto (.07s) porque agora são sete e não
     três — no passo antigo o último chip chegava meio segundo depois do primeiro. */
.feat-card.in-view .bt-tabs i:nth-child(1){transition-delay:.1s}
.feat-card.in-view .bt-tabs i:nth-child(2){transition-delay:.17s}
.feat-card.in-view .bt-tabs i:nth-child(3){transition-delay:.24s}
.feat-card.in-view .bt-tabs i:nth-child(4){transition-delay:.31s}
.feat-card.in-view .bt-tabs i:nth-child(5){transition-delay:.38s}
.feat-card.in-view .bt-tabs i:nth-child(6){transition-delay:.45s}
.feat-card.in-view .bt-tabs i:nth-child(7){transition-delay:.52s}
.feat-card.in-view .bt-armadilha{opacity:1;transform:none;transition:opacity .45s ease 1.35s,transform .5s cubic-bezier(.34,1.4,.64,1) 1.35s}
.rx-anima i{transform-origin:left}
.feat-card.in-view .rx-anima i{transform:scaleX(1);transition:transform .7s var(--ez-entra) calc(var(--i,0)*.12s + .3s)}
.feat-card.in-view .rx-linha{opacity:1;transform:none;transition:opacity .4s,transform .45s var(--ez-entra)}
.feat-card.in-view .rx-linha:nth-of-type(1){transition-delay:.9s}
.feat-card.in-view .rx-linha:nth-of-type(2){transition-delay:1s}
.feat-card.in-view .rx-linha:nth-of-type(3){transition-delay:1.1s}
.feat-card.in-view .qz-alt,.feat-card.in-view .cm-tab tr,
  .feat-card.in-view .rv-linha,.feat-card.in-view .pe-passo{opacity:1;transform:none;transition:opacity .45s ease,transform .5s var(--ez-entra)}
.feat-card.in-view .qz-alt:nth-child(1),.feat-card.in-view .rv-linha:nth-child(1),.feat-card.in-view .pe-passo:nth-of-type(1){transition-delay:.5s}
.feat-card.in-view .qz-alt:nth-child(2),.feat-card.in-view .rv-linha:nth-child(2),.feat-card.in-view .pe-passo:nth-of-type(2){transition-delay:.62s}
.feat-card.in-view .rv-linha:nth-child(3),.feat-card.in-view .pe-passo:nth-of-type(3){transition-delay:.74s}
.feat-card.in-view .cm-tab tbody tr:nth-child(1){transition-delay:.6s}
.feat-card.in-view .cm-tab tbody tr:nth-child(2){transition-delay:.72s}
.feat-card.in-view .pl-tarefa{opacity:1;transform:none;transition:opacity .5s ease .35s,transform .55s var(--ez-entra) .35s}
.fq-troca i{animation:trocaConc 6s infinite paused}
.fq-troca i:nth-child(2){animation-delay:2s}
.fq-troca i:nth-child(3){animation-delay:4s}
@keyframes trocaConc{0%,28%{opacity:1}33%,95%{opacity:0}100%{opacity:1}}
.feat-card:hover .fq-troca i{animation-play-state:running}
.feat-card:hover .coment-linha:nth-of-type(2){background:var(--indigo-soft);border-radius:6px;transition:background .3s}
}
@media(max-width:1020px){
.fq-fio{display:none}
/* sem largura pra duas colunas, o card grande volta a empilhar (e o flip perde o sentido) */
.feat-card:not(.compacto){display:flex;flex-direction:column}
.feat-card.flip:not(.compacto) .feat-ui{order:0}
.feat-ui{margin:22px;padding:26px 22px}
.feat-ui.bt-real{padding:26px 22px}
}
@media(max-width:640px){
.feat-ui{padding:18px 16px}
.feat-ui.bt-real{padding:18px 16px}
}
/* o card é a superfície morna; a tela do app é o branco puro dentro dele.
   creme (página) → off-white (card) → branco (produto): o mockup é o ponto mais claro, então ele salta */
.feat-card{position:relative;z-index:1;background:#FBFAF7;border-radius:var(--radius);border:1.5px solid #e2ddd0;overflow:hidden;transition:transform .35s var(--ez-entra),box-shadow .35s;display:flex;flex-direction:column;
  box-shadow:0 2px 0 rgba(33,32,28,.03),0 24px 50px -30px rgba(33,32,28,.28)}
/* o passo exclusivo é o que mais importa: puxa a atenção sem sair do sistema */
.feat-card.destaque{border-color:var(--indigo-border);background:linear-gradient(168deg,#f7f8ff 0%,#FBFAF7 58%);
  box-shadow:0 2px 0 rgba(91,108,224,.05),0 30px 60px -30px rgba(91,108,224,.4)}
.feat-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.feat-ui{box-shadow:none!important;border-color:#eceadf!important}
.feat-card.encerra{background:linear-gradient(180deg,var(--orange-soft) 0%,var(--white) 46%)}
/* card grande vira duas colunas. empilhado, a tela do app esticava pra 1261px de largura por 280 de altura
   (proporção de outdoor, não de tela) e o texto deixava 780px de vazio ao lado. lado a lado resolve os dois. */
.feat-card:not(.compacto){display:grid;grid-template-columns:1.16fr .84fr;align-items:stretch}
.feat-card:not(.compacto) .feat-ui{margin:30px 0 30px 30px;flex:1}
/* alterna o lado a cada card grande pro olho não repetir o mesmo caminho três vezes */
.feat-card.flip:not(.compacto){grid-template-columns:.84fr 1.16fr}
.feat-card.flip:not(.compacto) .feat-ui{order:2;margin:30px 30px 30px 0}
/* flex-start, não center: com a barra de topo o conteúdo tem que encostar no alto,
   senão a "tela" flutua no meio da moldura e perde o ar de screenshot */
.feat-ui{background:var(--white);border:1px solid #e5e1d8;border-radius:16px;margin:28px 28px 0;padding:32px 30px;min-height:0;
  display:flex;flex-direction:column;justify-content:flex-start;gap:9px;
  box-shadow:0 12px 28px -16px rgba(33,32,28,.3),0 1px 0 rgba(255,255,255,.9) inset;
  transition:transform .35s,box-shadow .35s}
.feat-ui-inner{display:contents}
/* ---- casca real do app: Sidebar + <main> (components/redesign/AppShell.jsx).
   Só nos cards grandes, que têm largura. Medidas do rail de tablet do produto
   (Sidebar.jsx: 92px, ícone 19px stroke 1.8, rótulo curto 11px, ativo = primary sobre primary-wash). */
.feat-card:not(.compacto) .feat-ui{flex-direction:row;align-items:stretch;padding:0;gap:0;overflow:hidden}
/* o <main> real herda --bg-page e os cards por cima é que são brancos. o mockup estava
   todo branco (invertido), então nada dentro dele lia como card. */
.feat-card:not(.compacto) .feat-ui-inner{display:flex;flex-direction:column;gap:9px;flex:1;min-width:0;
  padding:26px 28px;background:var(--x-canvas)}
/* estes overrides precisam vir DEPOIS das regras acima: mesma especificidade, quem vence é a ordem */
@media(max-width:1020px){
/* sem largura para duas colunas o card grande EMPILHA. sem isto ele seguia em grid e
     espremia a tela do app em ~180px, com o conteúdo cortado pelo overflow:hidden do card. */
.feat-card:not(.compacto){display:flex;flex-direction:column}
.feat-card.flip:not(.compacto) .feat-ui{order:0}
/* a casca (rail + main) continua: o padding fica no miolo, não na moldura */
.feat-card:not(.compacto) .feat-ui,.feat-card.flip:not(.compacto) .feat-ui{margin:22px 22px 0;padding:0}
.feat-card:not(.compacto) .feat-ui-inner{padding:26px 22px}
}
/* abaixo de 768px o produto troca a sidebar por top bar + tab bar: aqui ela sai e o miolo volta a empilhar */
@media(max-width:767px){
.feat-card:not(.compacto) .feat-ui,.cf-item .feat-card .feat-ui{flex-direction:column}
.feat-card:not(.compacto) .feat-ui-inner{padding:18px 16px}
}
/* mesma lógica dos grandes: o fundo da tela é --bg-page, quem é branco são os cards dentro */
.feat-card.compacto .feat-ui{margin:22px 22px 0;padding:26px 22px;flex:1;background:var(--x-canvas)}
.feat-card.compacto .feat-ui .qz-enun,.feat-card.compacto .feat-ui .rx-linha,
.feat-card.compacto .feat-ui .rv-nm,.feat-card.compacto .feat-ui .pe-passo{font-size:12px}
.feat-card.compacto .feat-ui .pl-mat{font-size:17px}
.feat-card.compacto .feat-ui .bt-sec{font-size:14px}
/* o número é a informação; do jeito que estava, o rótulo pesava mais que a métrica */
.feat-ui .rx-h .n{font-size:23px;margin-right:5px;color:var(--indigo-deep)}
.feat-ui .qz-enun{font-size:15px;padding:14px 15px}
.feat-ui .qz-alt{font-size:13.5px;padding:9px 13px}
.feat-ui .qz-fonte{font-size:11.5px}
.feat-ui .qz-timer{font-size:12px;padding:4px 9px}
.feat-ui .bt-tabs i{font-size:10.5px;padding:5px 11px}
.feat-ui .bt-sec{font-size:16px}
.feat-ui .bt-par{font-size:13px}
.feat-ui .bt-armadilha{font-size:12px;padding:12px 14px}
.feat-ui .rx-h{font-size:16px}
.feat-ui .rx-linha{font-size:13px}
.feat-ui .cm-tit{font-size:14px}
.feat-ui .cm-h{font-size:12.5px}
.feat-ui .cm-p{font-size:12px}
.feat-ui .cm-tab{font-size:11px}
.feat-ui .cm-td{padding:8px 10px}
.feat-ui .pl-mat{font-size:20px}
.feat-ui .pl-top{font-size:14px}
.feat-ui .n-lab{font-size:11px}
.feat-ui .n-prio{font-size:12px}
.feat-ui .rv-nm{font-size:13px}
.feat-ui .rv-h{font-size:11px}
.feat-ui .pe-passo{font-size:13px;padding:11px 14px}
.feat-ui .pe-passo .n{font-size:10.5px;padding:3px 8px}
.feat-card:hover .feat-ui{box-shadow:0 18px 38px -18px rgba(33,32,28,.34)}
.feat-card:hover .feat-ui{transform:scale(1.02)}
.center-cta{text-align:center;margin-top:52px}
/* 660 e não 620: com o 16:10 travado, a largura é que decide o tamanho da tela.
   Não passa disto porque o gênio mora em `left:-96px` com até 312px de corpo — a
   660 a ficha ativa começa em 250px e ainda sobra vão; a 700 ele já entraria por
   cima do conteúdo dela, e não da vizinha (que é a oclusão desejada). */
.cf{--cf-w:min(660px,69%);--gesc:1.15;position:relative;max-width:1160px;margin:6px auto 0}
/* as duas camadas de fundo do palco (wash + grão) andam mais devagar que as fichas:
   é o parallax que separa gênio (frente), fichas (meio) e fundo. */
.cf-brilho,.cf-grao{display:none}
.cf-viewport{position:relative;z-index:1;overflow:hidden;padding:20px 0 30px}
.cf-track{position:relative}
/* sem JS as fichas seguem empilhadas, uma embaixo da outra */
.cf-item{position:relative;width:100%;margin:0 auto 34px}
/* a fala do gênio mora aqui: fonte única do texto do balão, e a lista estática (sem JS ou
   sob reduced-motion) mostra a frase acima da ficha, na ordem da história. */
.cf-fala{margin:0 0 12px;font-family:var(--font-read);font-size:1.02rem;line-height:1.45;color:var(--ink-soft)}
/* A NARRAÇÃO INTEIRA MORA AQUI. Com o corpo de texto fora das fichas, o balão é o único
   lugar que diz O QUE a tela é: progressão (01/07) + NOME da feature + a frase. Sem o
   nome o visitante vê sete screenshots sem saber o que está olhando.
   Nada em dourado: aqui dourado é luz (halo/wash), índigo é a cor que nomeia. */
.cf-passo{display:inline-block;font-family:var(--font-metric);font-size:.64rem;font-weight:700;
  letter-spacing:.11em;color:var(--ink-soft);opacity:.62;vertical-align:.14em;margin-right:9px}
.cf-passo i{font-style:normal;opacity:.55}
.cf-nome{font-family:var(--font-head);font-size:1.06rem;font-weight:800;letter-spacing:-.022em;
  color:var(--indigo-deep)}
.cf-frase{display:block;margin-top:5px;font-weight:500;color:var(--ink-soft)}
/* MATERIALIZAÇÃO em papel claro: não é flare, é a ficha se assentando enquanto a sombra
   nasce (a transição de box-shadow acima) e o anel chega por último (o delay no border) */
@keyframes cfChega{from{transform:translate3d(0,11px,0) scale(.955)}to{transform:translate3d(0,0,0) scale(1)}}
/* dentro do carrossel a ficha é SÓ o mockup: o corpo de texto (passo, rótulo, título,
   frase e botão) saiu, e a narração passou a viver inteira no balão do gênio. A moldura
   ganhou margem simétrica: sem o corpo embaixo, o margin-bottom:0 antigo encostava a tela
   do app na borda inferior da ficha. */
.feat-print{display:block;width:100%;height:auto;border-radius:10px;position:relative;z-index:4;
  box-shadow:0 1px 0 rgba(16,20,60,.06)}
/* ---- TODA FICHA É UMA TELA DE COMPUTADOR ----
   A queixa era que a landing parecia vender app de celular. A causa não era o
   conteúdo: era GEOMETRIA. A ficha media 620×455 e a "tela" dentro dela 578×413
   — proporção 1.40, que é tablet em pé com sorte. E metade dos mockups (os
   .compacto) não tinha a sidebar do produto, então o que sobrava era uma coluna
   única de cards empilhados: a assinatura visual de um telefone.

   Dois consertos, e os dois são de forma, não de conteúdo:

   1. `aspect-ratio:16/10` na tela. Antes a altura vinha do conteúdo, então cada
      mockup tinha a sua proporção e nenhuma era de monitor. Agora a moldura é
      16:10 SEMPRE — a mesma proporção de uma janela de navegador — e o conteúdo
      que passar é cortado embaixo pelo overflow. Isso não é perda: é justamente
      o que um screenshot é, uma tela cortada na dobra. E como a altura passou a
      derivar da largura, o `medir()` do JS continua mandando no trilho.
   2. a sidebar deixa de ser privilégio dos cards grandes. Rail + <main> em TODAS
      as fichas (menos as duas que já SÃO print de desktop, que trazem a própria
      sidebar dentro da imagem — duas sidebars seria o erro oposto).            */
.cf-item .feat-card{display:flex;flex-direction:column}
.cf-item .feat-card .feat-ui{order:0;margin:18px;padding:0;flex:none;
  flex-direction:row;align-items:stretch;gap:0;overflow:hidden;aspect-ratio:16/10}
.cf-item .feat-card .feat-ui-inner{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;
  padding:16px 18px;background:var(--x-canvas);overflow:hidden}
/* o Bizzu do Tópico é a única tela sem cards internos: o texto ocupa o <main>
   inteiro, então ele centraliza o que tem em vez de encostar no alto. */
.cf-item .feat-ui.bt-real .feat-ui-inner{justify-content:center;gap:9px}
/* as duas fichas que já são print: a imagem É a tela inteira, sidebar inclusa.
   `cover` + canto superior esquerdo porque o 3:2 do arquivo é mais alto que o
   16:10 da moldura — o corte tem que sair do rodapé, nunca da sidebar. */
.cf-item .feat-ui.foto{padding:0;background:var(--x-canvas)}
.cf-item .feat-ui.foto .feat-print{width:100%;height:100%;object-fit:cover;object-position:left top;border-radius:0}
.cf-item .feat-ui .qz-enun{font-size:11.5px;padding:9px 10px;line-height:1.45}
.cf-item .feat-ui .qz-alt{font-size:10.5px;padding:6px 9px}
.cf-item .feat-ui .qz-fonte{font-size:9px}
.cf-item .feat-ui .qz-timer{font-size:9px;padding:3px 7px}
.cf-item .feat-ui .bt-tabs i{font-size:8.5px;padding:4px 8px}
.cf-item .feat-ui .bt-sec{font-size:12px}
.cf-item .feat-ui .bt-par{font-size:10px}
.cf-item .feat-ui .bt-armadilha{font-size:9.5px;padding:9px 11px}
.cf-item .feat-ui .cm-tit{font-size:11px}
.cf-item .feat-ui .cm-h{font-size:9.5px}
.cf-item .feat-ui .cm-p{font-size:9.5px}
.cf-item .feat-ui .cm-tab{font-size:8.5px}
.cf-item .feat-ui .cm-td{padding:6px 8px}
.cf-item .feat-card.compacto .feat-ui .pl-mat,.cf-item .feat-ui .pl-mat{font-size:15px}
.cf-item .feat-ui .pl-top{font-size:11px}
.cf-item .feat-ui .n-lab{font-size:9px}
.cf-item .feat-ui .n-prio{font-size:9.5px}
.cf-item .feat-ui .rv-nm{font-size:10.5px}
.cf-item .feat-ui .rv-h{font-size:9px}
.cf-item .feat-card.compacto .feat-ui .rv-nm,
.cf-item .feat-card.compacto .feat-ui .rx-linha{font-size:10.5px}
.cf-item .feat-ui .pe-passo,.cf-item .feat-card.compacto .feat-ui .pe-passo{font-size:10.5px;padding:9px 11px}
.cf-item .feat-ui .pe-passo .n{font-size:8.5px;padding:2px 6px}
.cf-item .feat-ui .rx-mat{font-size:11px}
.cf-item .feat-ui .rx-tit{font-size:11.5px}
/* ---- O GÊNIO GUIA ----
   Ele mora FORA do trilho: dentro de um .cf-item a rotação 3D da pilha o entortaria junto
   com a ficha. Aqui ele é irmão do palco, ancorado na lateral, e troca de pose junto com a
   ficha ativa. Três coisas o prendem à cena (sem elas ele vira adesivo de canto):
   (a) sombra de contato no MESMO plano das fichas, (b) oclusão — o corpo dele passa por
   cima da borda da ficha vizinha, (c) o corpo inclinado na direção da ficha ativa.
   E a luz: o halo quente que sai dele é o mesmo dourado que vaza na borda da ficha ativa. */
.cf-guia{position:relative;z-index:6;display:flex;align-items:flex-end;gap:14px;margin:0 0 18px}
.cf-balao{position:relative;flex:1;min-width:0;background:var(--white);border:1.5px solid #e5e1d8;border-radius:20px;
  padding:14px 16px;font-size:.96rem;line-height:1.45;font-weight:600;color:var(--ink);
  transform-origin:33% 100%;
  box-shadow:0 0 0 1px rgba(52,48,86,.05),0 2px 3px rgba(52,48,86,.045),0 10px 18px rgba(52,48,86,.05),
             0 30px 48px rgba(52,48,86,.05)}
.cf-balao b{color:var(--indigo-deep);font-weight:800}
.cf-balao-txt{display:block}
/* o rabicho é o mesmo papel das fichas: duas camadas (borda embaixo, papel em cima).
   33% e não 26%: varrendo o alpha das sete artes coluna a coluna, é em ~33% da largura do
   balão que a MAIS BAIXA das silhuetas fica mais alta (242px do chão, contra 177px a 26%)
   — ou seja, a coluna em que o rabicho encontra corpo em todas as poses. */
.cf-balao::before,.cf-balao::after{content:"";position:absolute;clip-path:polygon(0 0,100% 0,24% 100%)}
.cf-balao::before{left:33%;bottom:-21px;width:34px;height:22px;background:#e5e1d8}
.cf-balao::after{left:calc(33% + 2px);bottom:-17.5px;width:30px;height:18px;background:var(--white)}
@keyframes cfFalaEntra{0%,34%{opacity:0}100%{opacity:1}}
.cf-halo{display:none}
/* o pó da materialização: mesmo sistema de partícula da busca, outra tela */
.cf-po{display:none}
/* controles: no rodapé, flanqueando as bolinhas. Ficavam como fantasmas circulares NA BORDA
   do palco — mas a borda esquerda é onde o gênio mora: medido por alpha, o botão "anterior"
   caía 84% a 100% em cima do corpo dele nas sete poses (no rosto, na pose 4). Entre "não
   parecer slider de e-commerce" e "não plantar um botão na cara do personagem", a segunda
   ganha; a faixa livre à esquerda da ficha ativa tem 26px e não cabe um alvo de 52px. */
.cf-ctrl{margin:0 0 104px;display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px;min-height:30px}
.cf-nav{width:52px;height:52px;flex:none;padding:0;border-radius:50%;border:1.5px solid var(--indigo-border);
  background:var(--white);color:var(--indigo-deep);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 12px 26px -16px rgba(33,32,28,.55);transition:background .25s,border-color .25s,opacity .25s}
.cf-nav:hover:not([disabled]){background:var(--indigo-soft);border-color:var(--indigo)}
.cf-nav:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
.cf-nav[disabled]{opacity:.32;cursor:default;box-shadow:none}
.cf-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* barra de tempo do avanço automático: mostra que a troca vai acontecer, e some
   quando o visitante assume o controle. */
.cf-dot{position:relative}
.cf-dot[aria-current="true"] i{width:24px}
.cf-auto .cf-dot[aria-current="true"] i{background:linear-gradient(90deg,var(--indigo) 0 var(--auto,0%),#d3cebf var(--auto,0%) 100%)}
/* setas: só no desktop */
@media(max-width:900px){
.cf-palco>.cf-nav{display:none}
}
/* CHIPS COM NOME. A bolinha não dizia o que havia do outro lado: o visitante via
   uma ficha e ia embora sem saber que existiam mais oito. O chip é navegação e é,
   ao mesmo tempo, a lista do que a Bizzu entrega — e sai de cima do desenho, que
   era o problema das setas flutuando sobre a ficha. */
.cf-dots{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;max-width:1200px;margin:0 auto}
.cf-dot{width:auto;height:auto;padding:6px 10px;border-radius:99px;border:1.5px solid transparent;
  background:rgba(255,255,255,.62);color:var(--ink-soft);display:inline-flex;align-items:center;gap:0;
  font:inherit;font-size:.755rem;font-weight:600;line-height:1;cursor:pointer;position:relative;overflow:hidden;
  transition:background .22s,color .22s,border-color .22s}
.cf-dot i{display:none}
.cf-dot-nome{position:relative;z-index:2;white-space:nowrap}
.cf-dot:hover{background:var(--white);border-color:var(--indigo-border);color:var(--ink)}
.cf-dot[aria-current="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
.cf-dot:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
/* barra do avanço automático: preenche o chip ativo por baixo do texto */
.cf-dot::after{content:"";position:absolute;left:0;top:0;bottom:0;z-index:1;width:0;
  background:rgba(255,255,255,.28);pointer-events:none;border-radius:99px}
.cf-dot[aria-current="true"]::after{animation:cfEnche var(--passo,5s) linear forwards}
.cf-dots.cf-pausado .cf-dot[aria-current="true"]::after{animation-play-state:paused}
@keyframes cfEnche{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){
.cf-dot[aria-current="true"]::after{animation:none;width:100%}
}
@media(max-width:900px){
/* no celular a fila rola de lado em vez de quebrar em quatro linhas */
.cf-dots{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:2px 4px 6px}
.cf-dots::-webkit-scrollbar{display:none}
.cf-dot{flex:none;scroll-snap-align:center}
.cf-nav{width:44px;height:44px}
}
/* narração do estado só para leitor de tela */
.cf-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:1181px) and (max-width:1339px){
.cf{--gesc:.98}
}
@media(min-width:901px) and (max-width:1180px){
.cf{--gesc:.79}
}
@media(min-width:901px) and (max-height:780px){
.cf{--gesc:.77}
}
/* tela pequena: coverflow come área útil demais — vira carrossel plano, uma ficha por vez */
@media(max-width:900px){
.cf{--cf-w:min(460px,88%)}
/* no celular o gênio fica à DIREITA do balão, então o rabicho vira de lado: apontar pro
     lado errado é o detalhe que faz o balão parecer colado no lugar errado. */
.cf-balao::before,.cf-balao::after{clip-path:polygon(0 0,100% 0,76% 100%)}
.cf-balao::before{left:auto;right:14%}
.cf-balao::after{left:auto;right:calc(14% + 2px)}
.cf-balao{transform-origin:74% 100%}
.cf-nav{width:44px;height:44px}
.cf-nav svg{width:18px;height:18px}
.cf-ctrl{gap:12px}
/* o 16:10 é uma regra de DESKTOP e morre aqui: numa ficha de 460px ele daria
     287px de altura, e a citação não caberia. No celular a altura volta a vir do
     conteúdo, que é o que o resto deste bloco recorta à mão. */
.cf-item .feat-card .feat-ui{margin:14px;flex:1;aspect-ratio:auto}
.cf-item .feat-card .feat-ui-inner{padding:14px;gap:8px}
.cf-item .feat-ui.bt-real .feat-ui-inner{padding:14px;gap:8px}
.cf-item .feat-ui .qz-alt{font-size:12px;padding:8px 11px}
.cf-item .feat-ui .bt-sec{font-size:14px}
.cf-item .feat-ui .bt-par{font-size:12.5px}
.cf-item .feat-ui .bt-armadilha{font-size:11.5px}
.cf-item .feat-ui .pl-mat{font-size:17px}
.cf-item .feat-ui .pl-top{font-size:12.5px}
.cf-item .feat-ui .pe-passo{font-size:12px}
.cf-item .feat-ui .rv-nm{font-size:12px}
/* 01 Plano: fica a TAREFA, que é a promessa. Meta da semana, rodapé de progresso e o
     terceiro botão são contexto e custavam 170px juntos. */
.cf-item .pl-meta,.cf-item .pl-rodape,.cf-item .pl-fin{display:none}
/* 02 Questões: fica banca → enunciado → alternativas. Código da questão, "salvar para
     revisar", cronômetro e o botão (repetido pelas alternativas) saem; a fonte da prova
     vira uma linha só e o enunciado para em três. */
.cf-item .qz-cab,.cf-item .qz-timer,.cf-item .qz-alts+.pl-acoes{display:none}
.cf-item .qz-fonte{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-item .qz-enun{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;padding:11px 13px}
/* 03 Raio-X: as abas (9,5px) e o rótulo de grupo (8px) eram ruído ilegível. O que sobra
     — os fatos do cargo e as linhas de matéria, que são o argumento — cresce. */
.cf-item .rx-abas,.cf-item .rx-grupo{display:none}
.cf-item .rx-capa .fatos{font-size:11px}
.cf-item .rx-mat{font-size:12.5px}
.cf-item .rv-nm small{font-size:10.5px}
/* 04 Comentário: três colunas em 240px não se leem. Fica trecho → status (a coluna do
     meio sai), com fonte maior, e a referência final cede lugar à tabela. */
.cf-item .cm-tab th:nth-child(2),.cf-item .cm-tab td:nth-child(2){display:none}
.cf-item .cm-tab{font-size:12px}
.cf-item .cm-p{font-size:13px}
.cf-item .cm-tab+.cm-p{display:none}
/* 05 Bizzu do Tópico: a régua dos 7 capítulos sai no celular. Ela é o argumento no
     desktop (mostra o tamanho do que o aluno recebe), mas aqui custaria ~5 linhas de
     10,5px — ilegíveis — empurrando para fora da tela o trecho que prova o conteúdo. */
.cf-item .bt-tabs{display:none}
}
/* sem rotação e sem transição: o carrossel vira lista simples empilhada, e a história do
   gênio vira a frase acima de cada ficha (o .cf-fala sai do sr-only e aparece).
   NO CELULAR TAMBÉM: o PostHog mostrou que o carrossel no toque era uma foto de
   um recurso (172 pessoas viam a 1ª ficha, 41 a 2ª — perda de 76%). Vertical,
   cada recurso é um bloco rolável — o formato das referências medidas. O motor
   JS não roda em max-width:760px (ver `mobileLanding` no carrossel). */
@media (prefers-reduced-motion:reduce),(max-width:760px){
.cf-ctrl,.cf-status{display:none}
}
/* ---- Raio-X: estrutura da tela real (branch radix, commit 7aa5aee "método do dossiê").
   A faixa de rótulo/valor e o gráfico de barras SAÍRAM do produto; entraram a capa de
   laudo (órgão → fatos), a régua numerada de seções e as linhas de matéria com contagem
   de tópicos + quantas são muito alta. ---- */
.rx-capa{padding-bottom:9px;border-bottom:1px solid var(--x-hair)}
.rx-capa .org{display:block;font-family:var(--font-head);font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--x-ink)}
.rx-capa .fatos{display:block;margin-top:2px;font-size:10px;color:var(--x-sec)}
.rx-abas{display:flex;gap:5px;margin:9px 0 2px}
.rx-abas span{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;
  font-size:9.5px;font-weight:700;color:var(--x-sec);white-space:nowrap}
.rx-abas span b{font-family:var(--font-metric);font-size:8.5px;font-weight:700;opacity:.75}
.rx-abas span.on{background:var(--x-asurf);color:var(--x-atext)}
.rx-tit{display:flex;align-items:baseline;gap:7px;margin-top:8px;padding-bottom:5px;border-bottom:1px solid var(--x-hair);
  font-family:var(--font-head);font-size:12.5px;font-weight:700;letter-spacing:-.01em}
.rx-tit b{font-family:var(--font-metric);font-size:9px;color:var(--x-atext);font-weight:700}
.rx-grupo{margin-top:8px;font-family:var(--font-metric);font-size:8px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--x-ter)}
.rx-mat{display:flex;align-items:center;gap:7px;padding:6px 0;border-top:1px solid var(--x-hair);font-size:11px}
.rx-mat:first-of-type{border-top:none}
.rx-mat .nm{font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-mat .chev{flex:none;width:9px;height:9px;border-right:1.5px solid var(--x-abord);border-bottom:1.5px solid var(--x-abord);
  transform:rotate(45deg) translate(-2px,-2px)}
.rx-h{font-family:var(--font-head);font-size:14px;font-weight:700;letter-spacing:-.01em}
.rx-h .n{font-family:var(--font-metric);font-size:10px;color:#3f4aa8;font-weight:700;margin-right:6px}
.rx-linha{display:flex;align-items:baseline;gap:8px;font-size:11.5px;padding:4px 0;border-top:1px solid #dad9d6}
.rx-linha .pos{font-family:var(--font-metric);font-size:9.5px;color:#63635e}
.rx-linha .nm{font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-linha .banda{margin-left:auto;flex:none}
.q-head{display:flex;gap:6px;align-items:center}
.q-enun{font-size:11px;color:#21201c;line-height:1.5}
.q-alt{display:flex;gap:8px;align-items:center;font-size:10.5px;color:#63635e;padding:4px 8px;border:1px solid #dad9d6;border-radius:8px;background:#fdfdfc}
.q-alt b{font-family:var(--font-metric);font-size:9px;color:#63635e}
.q-alt.certa{border-color:#65ba74;background:#e9f6e9;color:#203c25;font-weight:600}
.q-alt.certa b{color:#2E7D60}
.callout{background:#f0f1fe;border:1px solid #bec5f2;border-radius:12px;padding:12px;display:flex;gap:10px}
.callout .bulb{flex:none;width:26px;height:26px;border-radius:50%;background:#5b6ce0;display:grid;place-items:center}
.callout .lab{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:#3f4aa8;font-weight:700;margin-bottom:3px}
.callout p{font-size:10.5px;color:#21201c;line-height:1.5}
.coment-linha{font-size:10.5px;color:#63635e;padding:5px 0;border-top:1px dashed #dad9d6;line-height:1.5}
.coment-linha b{color:#21201c}
.rev-linha{display:flex;align-items:center;gap:9px;padding:6px 8px;border:1px solid #dad9d6;border-radius:10px;background:#fdfdfc;font-size:11px}
.rev-linha .cx{width:16px;height:16px;border-radius:5px;border:1.5px solid #cfceca;background:#f1f0ef;flex:none;display:grid;place-items:center;color:#3f4aa8}
.rev-linha .quando{margin-left:auto;flex:none}
.conf-ico{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.conf-eles .conf-ico{background:rgba(255,255,255,.08)}
.conf-bizzu .conf-ico{background:rgba(255,255,255,.16)}
/* ============ HISTÓRIA ============ */
.historia{background:transparent;width:min(1240px,92%);margin:0 auto}
.historia-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.historia-visual{position:relative;text-align:center}
.historia-visual img{width:min(300px,80%);margin:0 auto;filter:drop-shadow(0 24px 40px rgba(33,32,28,.25))}
.verbete{background:var(--cream);border:1px solid #e5e1d8;border-radius:16px;padding:16px 22px;margin-top:26px;text-align:left;font-family:var(--font-read);font-style:italic;font-size:1.05rem;color:var(--ink)}
.verbete b{font-family:var(--font-head);font-style:normal}
.historia-selo{position:absolute;top:-6px;right:6%;background:var(--orange);color:var(--ink);border-radius:18px;padding:14px 20px;font-family:var(--font-head);font-weight:800;font-size:.85rem;box-shadow:0 16px 34px -10px rgba(246,168,28,.6);animation:floaty 5s ease-in-out infinite;rotate:3deg}
.historia-selo small{display:block;font-weight:600;font-size:.68rem;opacity:.8}
.historia h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;margin-bottom:20px;letter-spacing:-.02em}
.historia p{color:var(--ink-soft);margin-bottom:16px;font-size:1.02rem}
.historia p strong{color:var(--ink)}
.historia blockquote{border-left:4px solid var(--orange);padding:6px 0 6px 20px;margin:24px 0;font-family:var(--font-read);font-style:italic;font-weight:500;font-size:1.35rem;color:var(--ink)}
/* ============ COMO FUNCIONA ============ */
.passos{counter-reset:passo}
.passos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.passo-card{background:var(--white);border-radius:var(--radius);padding:34px 26px;border:1px solid #eceadf;transition:transform .35s,box-shadow .35s}
.passo-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.passo-num{counter-increment:passo;width:52px;height:52px;border-radius:50%;background:var(--indigo);color:#fff;font-family:var(--font-metric);font-weight:700;font-size:1.15rem;display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 10px 24px -8px rgba(91,108,224,.55)}
.passo-num::before{content:counter(passo,decimal-leading-zero)}
.passo-card:nth-child(even) .passo-num{background:var(--orange);color:var(--ink);box-shadow:0 10px 24px -8px rgba(246,168,28,.55)}
.passo-card h3{font-size:1.05rem;margin-bottom:10px}
.passo-card p{font-size:.9rem;color:var(--ink-soft)}
/* Uma ideia só, legível sem ler: a Bizzu é UMA figurinha reta; o resto é pilha
   torta. A moldura reusa a gramática do card da busca (tinta grossa + sombra
   dura, sem blur). A faixa índigo NÃO é mais posicionada por JS: cada célula
   pinta o próprio fundo e o bloco fecha o raio nas pontas. */
.arsenal{max-width:1060px;margin:0 auto}
.vs-intro{text-align:center;max-width:730px;margin:0 auto 30px}
.arsenal-h3{font-size:clamp(1.35rem,2.6vw,1.95rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.18;margin:0 0 12px;text-align:center}
.vs-tabela{position:relative;background:var(--white);border:2.5px solid var(--ink);
  border-radius:24px;box-shadow:4px 5px 0 rgba(33,32,28,.16);padding:10px 20px 22px}
.vs-row{display:grid;grid-template-columns:196px minmax(0,1.12fr) minmax(0,1fr);
  gap:0 18px;align-items:stretch}
/* ---- cabeçalho das colunas ---- */
.vs-head{align-items:end;padding:12px 0 16px}
.vs-h-bizzu{display:flex;align-items:center;gap:9px;padding:10px 16px;color:#fff;
  background:var(--indigo);border:2.5px solid var(--ink);border-radius:14px;
  box-shadow:4px 5px 0 rgba(33,32,28,.16);
  font-family:var(--font-head);font-weight:800;font-size:1.1rem;line-height:1}
/* virou <a>: precisa se comportar como um. A seta só aparece no hover para não
   competir com "uma assinatura", que é a informação da célula. */
.vs-h-bizzu{text-decoration:none;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.vs-h-bizzu:hover{background:var(--indigo-deep);transform:translate(-1px,-2px);
  box-shadow:6px 8px 0 rgba(33,32,28,.2)}
.vs-h-bizzu:active{transform:translate(1px,1px);box-shadow:2px 3px 0 rgba(33,32,28,.18)}
.vs-h-bizzu:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
.vs-h-bizzu small::after{content:" →";opacity:0;transition:opacity .2s ease}
.vs-h-bizzu:hover small::after{opacity:1}
.vs-h-bizzu i{font-style:normal;color:var(--orange)}
.vs-h-bizzu small{margin-left:auto;font-family:var(--font-body);font-weight:600;
  font-size:.7rem;letter-spacing:.03em;opacity:.85}
/* o Sinal perdeu o halo borrado: o canon de movimento proíbe glow. Fica o anel. */
.vs-sinal{flex:none;width:10px;height:10px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 4px rgba(246,168,28,.3);animation:pulseSinal 2.4s ease-in-out infinite}
@keyframes pulseSinal{50%{box-shadow:0 0 0 7px rgba(246,168,28,.12)}}
.vs-h-hoje{align-self:end;padding-bottom:3px}
.vs-h-hoje-tit{display:block;font-family:var(--font-head);font-weight:700;font-size:.84rem;
  color:#8a877c;margin-bottom:9px}
.vs-pilha{display:flex;flex-wrap:wrap;gap:5px}
.vs-pilha i{font-style:normal;font-size:.66rem;font-weight:600;color:#9a978c;line-height:1.25;
  background:var(--cream);border:1.5px dashed rgba(33,32,28,.2);border-radius:8px;padding:3px 8px;
  transition:rotate .6s var(--ez-entra),opacity .4s ease}
.vs-pilha i:nth-child(1){rotate:-2.5deg}
.vs-pilha i:nth-child(2){rotate:1.8deg}
.vs-pilha i:nth-child(3){rotate:-1.2deg}
.vs-pilha i:nth-child(4){rotate:2.6deg}
/* ---- capítulos ---- */
.vs-grupo-tit{display:flex;align-items:center;gap:11px;padding:20px 0 10px;
  font-family:var(--font-head);font-size:.7rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#a5a299}
.vs-grupo-tit b{font-family:var(--font-metric);font-size:.66rem;font-weight:700;color:var(--indigo)}
.vs-grupo-tit::after{content:"";flex:1;height:1px;background:#eeebe0}
/* ---- células ---- */
.vs-dim{display:flex;align-items:center;gap:10px;padding:15px 4px;
  font-family:var(--font-head);font-weight:700;font-size:.9rem;line-height:1.25;color:var(--ink)}
.vs-dim svg{flex:none;color:#a6aeee;transition:color .3s ease}
.vs-txt{flex:1;min-width:0}
.vs-bizzu b{font-weight:800}
/* a faixa índigo contínua, feita de célula em célula */
.vs-bizzu{display:flex;align-items:flex-start;gap:11px;padding:15px 16px;
  font-size:.92rem;font-weight:600;line-height:1.45;color:var(--ink);
  background:var(--indigo-soft);
  border-left:1.5px solid var(--indigo-border);border-right:1.5px solid var(--indigo-border);
  transition:background .25s ease}
.vs-ini .vs-bizzu{border-top:1.5px solid var(--indigo-border);border-radius:16px 16px 0 0}
.vs-fim .vs-bizzu{border-bottom:1.5px solid var(--indigo-border);border-radius:0 0 16px 16px}
.vs-row+.vs-row .vs-bizzu{border-top:1px solid rgba(190,197,242,.7)}
.vs-hoje{display:flex;align-items:flex-start;gap:10px;padding:15px 6px 15px 4px;
  font-size:.87rem;line-height:1.45;color:#8a877c;transition:color .25s ease}
.vs-row+.vs-row .vs-dim,.vs-row+.vs-row .vs-hoje{border-top:1px solid #f2efe6}
/* O selo substituiu o disco branco com check. Ele traz dourado, que até aqui era
   exclusividade da linha de preço — a nota logo acima ("único ouro da tabela")
   deixou de valer, e é uma escolha de desenho, não um descuido: o ouro agora
   aparece 13 vezes em miniatura e uma vez em bloco, no preço.
   Sem disco, sem borda: a moldura é o próprio selo. */
.vs-ok{flex:none;width:26px;height:32px;margin-top:-2px;display:block}
.vs-ok svg{display:block;width:100%;height:100%}
/* 22 e não os 7 do arquivo: 7 unidades num viewBox de 310 dão 0,5px na tela, e o
   check simplesmente sumia. A espessura é o que sobrevive à miniatura. */
.selo-tick{fill:none;stroke:#3a3347;stroke-width:22;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:128}
.vs-x{flex:none;width:21px;height:21px;margin-top:1px;border-radius:50%;display:grid;place-items:center;
  background:#efece2;color:#a5a299;font-size:.95rem;font-weight:700;line-height:1}
/* rótulo de coluna: invisível no desktop (o cabeçalho já diz), crachá no celular */
.vs-col-tag{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;
  overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
/* ---- preço ---- */
.vs-preco{margin-top:18px}
.vs-preco .vs-dim{padding:18px 4px}
.vs-preco .vs-bizzu{padding:16px;background:var(--orange-soft);border:2px solid var(--orange);
  border-radius:16px}
.vs-preco .vs-hoje{padding:16px 6px}
.vs-preco .vs-txt{display:flex;flex-direction:column;gap:3px}
.vs-valor{font-family:var(--font-metric);font-variant-numeric:tabular-nums;font-size:1.6rem;
  font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.vs-valor-hoje{font-family:var(--font-metric);font-variant-numeric:tabular-nums;font-size:1.02rem;
  font-weight:700;color:#8a877c;line-height:1.2}
.vs-preco small{font-size:.75rem;font-weight:500;line-height:1.35;color:var(--ink-soft)}
.vs-preco .vs-hoje small{color:#9a978c}
/* ---- fecho ---- */
.vs-cta{margin-top:20px;align-items:center}
.vs-fecho{font-family:var(--font-read);font-style:italic;font-size:.88rem;line-height:1.4;
  color:var(--ink-soft);padding-left:4px}
.compare-nota{font-size:.74rem;color:#a5a299;margin-top:14px;text-align:center;line-height:1.45}
/* ---- hover: nada que quebre a costura da faixa ---- */
@media(hover:hover){
.vs-row:not(.vs-head):not(.vs-cta):hover .vs-dim svg{color:var(--indigo)}
.vs-row:not(.vs-head):not(.vs-cta):not(.vs-preco):hover .vs-bizzu{background:#e7e9fd}
.vs-row:not(.vs-head):not(.vs-cta):hover .vs-hoje{color:#6f6c62}
}
/* ---- entrada ---- */
@media(prefers-reduced-motion:no-preference){
.arsenal.in-view .vs-row,.arsenal.in-view .vs-grupo-tit{opacity:1;transform:none;filter:blur(0);
    transition:opacity .5s ease calc(var(--i,0)*55ms),
               transform .55s var(--ez-entra) calc(var(--i,0)*55ms),
               filter .5s ease calc(var(--i,0)*55ms)}
.arsenal.in-view .vs-ok{scale:1;transition:scale .45s cubic-bezier(.34,1.56,.64,1) calc(var(--i,0)*55ms + 300ms)}
.arsenal.in-view .selo-tick{stroke-dashoffset:0;
    transition:stroke-dashoffset .5s var(--ez-entra) calc(var(--i,0)*55ms + 520ms)}
.arsenal.in-view .vs-pilha i:nth-child(1){transition-delay:.30s}
.arsenal.in-view .vs-pilha i:nth-child(2){transition-delay:.38s}
.arsenal.in-view .vs-pilha i:nth-child(3){transition-delay:.46s}
.arsenal.in-view .vs-pilha i:nth-child(4){transition-delay:.54s}
}
/* ---- CELULAR: a tabela de 3 colunas vira uma pilha de fichas ---- */
@media(max-width:760px){
.vs-tabela{padding:10px 14px 18px;border-width:2px;border-radius:20px;
    box-shadow:3px 4px 0 rgba(33,32,28,.16)}
.vs-row{grid-template-columns:1fr;gap:8px}
.vs-head{grid-template-columns:1fr;gap:14px;padding:10px 0 6px;align-items:stretch}
.vs-head-vazio{display:none}
.vs-h-bizzu{font-size:1rem;padding:9px 14px}
.vs-h-hoje{align-self:auto;padding-bottom:0}
.vs-dim{padding:16px 0 0;font-size:.76rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.08em;color:#9a978c;border-top:none!important}
.vs-dim svg{width:14px;height:14px}
.vs-bizzu{border:1.5px solid var(--indigo-border)!important;border-radius:14px!important;
    padding:12px 14px;gap:9px}
.vs-hoje{border-top:none!important;padding:0 2px 14px;gap:9px}
/* sem o cabeçalho, cada lado se apresenta sozinho */
.vs-col-tag{position:static;width:auto;height:auto;overflow:visible;clip-path:none;
    display:inline-flex;align-items:center;flex:none;margin-top:2px;
    font-family:var(--font-head);font-weight:800;font-size:.6rem;letter-spacing:.09em;
    text-transform:uppercase;line-height:1.2;border-radius:999px;padding:3px 8px}
.vs-bizzu .vs-col-tag{background:var(--indigo);color:#fff}
.vs-hoje .vs-col-tag{background:#efece2;color:#8a877c}
.vs-ok,.vs-x{display:none}
.vs-grupo-tit{padding:22px 0 4px}
.vs-preco{margin-top:14px}
.vs-preco .vs-dim{padding-bottom:0}
.vs-preco .vs-hoje{padding:0 2px 4px}
.vs-cta{margin-top:18px}
.vs-cta>span:first-child{display:none}
.vs-fecho{text-align:center;padding:10px 4px 0}
}
/* ============ PRICING ============ */
.pricing{background:transparent;width:min(1320px,92%);margin:0 auto}
.custo-tempo{font-family:var(--font-read);font-style:italic;font-size:1.05rem;color:var(--ink-soft);text-align:center;max-width:620px;margin:44px auto 34px}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:860px;margin:0 auto}
.price-card{border-radius:24px;padding:40px 36px;border:2px solid #eceadf;background:var(--cream);position:relative;transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.price-card.destaque{background:linear-gradient(160deg,var(--indigo),var(--indigo-deep));color:#fff;border:none;box-shadow:0 30px 60px -18px rgba(91,108,224,.55)}
.price-tag{position:absolute;top:-14px;right:24px;background:var(--orange);color:var(--ink);font-family:var(--font-head);font-weight:800;font-size:.8rem;letter-spacing:.04em;border-radius:999px;padding:7px 18px;box-shadow:0 8px 20px -6px rgba(246,168,28,.6)}
.price-card .plano{font-family:var(--font-head);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-bottom:16px}
.price-valor{display:flex;align-items:baseline;gap:6px}
.price-valor .moeda{font-weight:600;font-size:1.25rem;opacity:.85}
.price-valor .num{font-family:var(--font-metric);font-weight:700;font-size:4.5rem;line-height:1;letter-spacing:-.04em}
.price-card:not(.destaque) .price-valor .num{font-size:3rem}
.price-valor .per{font-size:1rem;opacity:.7}
.price-ancora{font-size:.95rem;font-weight:600;margin:10px 0 24px}
.price-ancora s{font-weight:400;opacity:.55;margin-left:6px;text-decoration-thickness:1.5px}
.price-card.destaque .price-ancora s{color:#c7cbf2}
.price-feats{list-style:none;display:grid;gap:12px;margin-bottom:28px;font-size:.95rem;font-weight:500;line-height:1.45}
.price-feats li{display:flex;gap:9px;align-items:flex-start}
.price-feats li svg{flex:none;margin-top:3px}
.checkout-nota{font-size:.8rem;font-weight:500;color:var(--ink-soft);margin-top:12px;text-align:center;opacity:.85}
@media(max-width:640px){
.price-card.destaque .price-valor .num{font-size:3.75rem}
}
.price-card.destaque .checkout-nota{color:#c7cbf2}
.garantia-faixa{max-width:860px;margin:26px auto 0;display:flex;align-items:center;justify-content:center;gap:14px;background:var(--orange-soft);border-radius:16px;padding:16px 22px;font-size:.95rem;line-height:1.5;color:#7a5406;font-weight:600;text-align:center}
.garantia-faixa svg{flex:0 0 auto}
.garantia-faixa span{min-width:0}
@media(max-width:600px){
.garantia-faixa{flex-direction:column;gap:8px;padding:16px 18px}
}
/* ============ FUNDADOR ============ */
.fundador-card{max-width:760px;margin:0 auto;background:var(--white);border-radius:28px;padding:44px;display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;box-shadow:var(--shadow)}
.fundador-foto{width:140px;height:140px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--indigo),var(--indigo-deep))}
.fundador-foto span{font-family:var(--font-head);font-weight:800;font-size:2.4rem;color:#fff}
.fundador-card h3{font-size:1.35rem;margin-bottom:4px}
.fundador-card .cargo{color:var(--indigo-deep);font-weight:700;font-size:.85rem;margin-bottom:14px}
.fundador-card p{font-size:.96rem;color:var(--ink-soft)}
/* ============ FAQ ============ */
.faq-list{max-width:760px;margin:0 auto;display:grid;gap:14px}
.faq-item{background:var(--white);border-radius:18px;border:1px solid #eceadf;overflow:hidden;transition:box-shadow .3s}
.faq-item.open{box-shadow:var(--shadow)}
.faq-q{width:100%;background:none;border:none;font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--ink);padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;text-align:left}
.faq-q .chev{flex:none;width:32px;height:32px;border-radius:50%;background:var(--indigo-soft);display:flex;align-items:center;justify-content:center;transition:transform .35s,background .35s}
.faq-item.open .chev{transform:rotate(180deg);background:var(--indigo)}
.faq-item.open .chev svg path{stroke:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ez-entra)}
.faq-a-inner{padding:0 26px 24px;color:var(--ink-soft);font-size:.94rem}
/* ============ CTA FINAL ============ */
.cta-final{background:linear-gradient(150deg,var(--indigo),var(--indigo-deep));border-radius:40px;width:min(1440px,96%);margin:0 auto;color:#fff;text-align:center;overflow:hidden;position:relative}
.cta-final::before,.cta-final::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.07)}
.cta-final::before{width:420px;height:420px;top:-180px;left:-140px}
.cta-final::after{width:340px;height:340px;bottom:-160px;right:-100px}
.cta-final h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;margin-bottom:14px;position:relative}
.cta-final p{color:#d9dcf7;font-size:1.12rem;max-width:560px;margin:0 auto 32px;position:relative}
/* O campo de busca do CTA final saiu: a busca passou a viver na própria página
   (bloco #busca, abaixo do hero) e o CTA virou âncora para lá. As regras
   .cta-busca vieram junto — eram 8 linhas calibradas para um input branco sobre
   o gradiente índigo, e CSS de elemento que não existe mais é peso que ninguém
   percebe pagar. */
.cta-final .prazo{margin-top:18px;font-size:.98rem;color:#dfe2fb;position:relative}
/* ============ FOOTER — o céu da marca ============ */
footer{padding:26px 0 0}
.footer-ceu{background:transparent;color:var(--ink);width:min(1440px,96%);margin:0 auto;padding:70px 0 30px;position:relative;border-top:1px solid #e5e1d8}
.footer-word{font-family:var(--font-head);font-weight:800;font-size:clamp(3.2rem,8vw,6rem);letter-spacing:-.03em;line-height:1;color:var(--indigo);display:inline-block}
.footer-word i{font-style:normal;color:var(--orange)}
.footer-frase{margin-top:12px;font-family:var(--font-read);font-style:italic;font-size:1.05rem;color:var(--ink-soft)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:44px;padding:0 6% 38px;border-bottom:1px solid #e5e1d8}
.footer-grid h4{font-family:var(--font-head);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;color:#9a978c}
.footer-grid ul{list-style:none;display:grid;gap:10px;font-size:.92rem;color:var(--ink-soft)}
.footer-grid ul a{transition:color .25s}
.footer-grid ul a:hover{color:var(--indigo-deep)}
.footer-cta-col h4{color:var(--ink);font-size:1rem;text-transform:none;letter-spacing:0}
.footer-bottom{padding:26px 6% 0;text-align:center;font-size:.82rem;color:#9a978c}
.count{font-variant-numeric:tabular-nums}
/* ============ RESPONSIVO ============ */
@media(max-width:1020px){
.passos-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
.passos-grid{grid-template-columns:1fr}
.fundador-card{grid-template-columns:1fr;text-align:center}
.fundador-foto{margin:0 auto}
.footer-grid{grid-template-columns:1fr}
}
.sec-cta-final{padding:10px 0 36px}
/* A busca é a ação da página e precisa chegar como um momento próprio, não como
   rodapé da faixa de selos. Os 8px do topo faziam a pergunta nascer grudada nos
   logos; o respiro aqui é o que separa "recebi a promessa" de "agora eu ajo". */
.busca-sec{padding:64px 0 72px;position:relative}
.busca-head{text-align:center;max-width:760px;margin:0 auto 22px}
.busca-head h2{font-size:clamp(1.5rem,2.8vw,2.15rem);font-weight:800;letter-spacing:-.02em;margin:0}
.busca-form{display:flex;gap:10px;align-items:stretch;justify-content:center;max-width:720px;margin:0 auto}
/* Medidas emprestadas do .cta-busca do rodapé; as CORES não — aquele é
   calibrado contra o gradiente índigo escuro e some sobre o creme. */
.busca-form input{flex:1 1 320px;min-width:0;height:56px;border-radius:999px;padding:0 24px;
  font-family:var(--font-body);font-size:1rem;color:var(--ink);background:var(--white);
  border:1.5px solid rgba(33,32,28,.14);box-shadow:0 10px 30px -18px rgba(33,32,28,.35);
  transition:border-color .25s ease,box-shadow .25s ease}
.busca-form input::placeholder{color:#9a9a94}
.busca-form input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 4px rgba(91,108,224,.16)}
/* Chamada de atenção de quem chegou aqui pelo CTA do hero: dois pulsos LENTOS,
   longos o bastante para o olho encontrar o campo depois da rolagem, e curtos o
   bastante para não virar um piscar infinito. */
@media(prefers-reduced-motion:no-preference){
.busca-form input.chamando{animation:buscaChama 2.4s var(--ez-entra) 2}
@keyframes buscaChama{
    0%,100%{box-shadow:0 0 0 0 rgba(91,108,224,0);border-color:rgba(33,32,28,.14)}
    38%{box-shadow:0 0 0 9px rgba(91,108,224,.18);border-color:var(--indigo)}
  }
}
/* O cursor que acompanha o exemplo sendo digitado sozinho. */
.busca-form input::placeholder{transition:color .2s ease}
.busca-form.digitando input::placeholder{color:var(--ink-soft)}
.busca-form input:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
@media(max-width:640px){
.busca-form{flex-wrap:wrap}
}
/* A segunda porta agora é uma FIGURINHA de decisão, não uma linha de formulário.
   O bulb é o `doodle-color-296-bulb` do Lordicon convertido para SVG inline:
   geometria e paleta do arquivo real, com o hover-pinch refeito em CSS para não
   carregar um player de animação inteiro na landing. */
.busca-depois{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:15px;
  max-width:720px;margin:17px auto 0;padding:14px 16px 14px 14px;border:2.5px solid var(--ink);
  border-radius:20px;background:linear-gradient(128deg,var(--white) 0%,var(--white) 58%,var(--orange-soft) 125%);
  box-shadow:5px 6px 0 rgba(33,32,28,.16);color:var(--ink);text-decoration:none;overflow:hidden;
  transition:transform .28s var(--ez-entra),border-color .2s ease,box-shadow .28s ease}
.busca-bulb{position:relative;width:72px;height:72px;display:grid;place-items:center;border-radius:18px;
  background:rgba(246,168,28,.1);border:1.5px solid rgba(246,168,28,.32)}
.busca-bulb svg{width:68px;height:68px;display:block;overflow:visible}
.bulb-glow{fill:rgba(246,168,28,.17);transform-origin:96px 85px}
.bulb-corpo{transform-origin:96px 104px}
.bulb-lamp{fill:#F6A81C;stroke:#17171c;stroke-width:2.2;stroke-linejoin:round}
.bulb-base{fill:#109121;stroke:#17171c;stroke-width:3;stroke-linejoin:round}
.bulb-base-clara{fill:#16c72e;stroke:#17171c;stroke-width:3;stroke-linejoin:round}
.bulb-detalhe{fill:none;stroke:#17171c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bulb-raio{fill:none;stroke:#F6A81C;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.busca-depois-copy{min-width:0;line-height:1.2}
.busca-depois-copy small{display:inline-flex;margin-bottom:4px;padding:3px 8px;border-radius:999px;
  background:var(--orange-soft);color:#8a4e0b;font-size:.61rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.busca-depois-copy strong{display:block;font-family:var(--font-head);font-size:1.08rem;font-weight:850;
  letter-spacing:-.015em;color:var(--ink)}
.busca-depois-copy>span{display:block;margin-top:3px;font-size:.79rem;font-weight:550;color:var(--ink-soft)}
.busca-depois-cta{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 15px;
  border-radius:14px;background:var(--indigo);color:#fff;font-family:var(--font-head);font-size:.84rem;
  font-weight:800;line-height:1.15;text-align:center;box-shadow:0 10px 24px -14px rgba(91,108,224,.9);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease}
.busca-depois-cta b{font-size:1.1rem;line-height:1;transition:transform .2s ease}
.busca-depois:hover{border-color:var(--indigo);box-shadow:7px 9px 0 rgba(33,32,28,.2)}
.busca-depois:hover .busca-depois-cta{background:var(--indigo-deep);box-shadow:0 13px 28px -13px rgba(91,108,224,.95)}
.busca-depois:hover .busca-depois-cta b{transform:translateX(3px)}
.busca-depois:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
@media(prefers-reduced-motion:no-preference){
.busca-depois:hover{transform:translateY(-3px) rotate(-.25deg)}
.bulb-corpo{animation:bulbPinch 2.8s var(--ez-entra) infinite}
.bulb-raios{transform-origin:96px 88px;animation:bulbAcende 2.8s ease-in-out infinite}
.bulb-glow{animation:bulbGlow 2.8s ease-in-out infinite}
.bulb-raio{stroke-dasharray:45;animation:bulbRisca 2.8s ease-in-out infinite}
@keyframes bulbPinch{
    0%,58%,100%{transform:scale(1)}
    68%{transform:scale(.94,1.055) rotate(-1.5deg)}
    78%{transform:scale(1.045,.96) rotate(1deg)}
    88%{transform:scale(.99,1.01)}
  }
@keyframes bulbAcende{0%,54%,100%{opacity:.38;transform:scale(.92)}68%,88%{opacity:1;transform:scale(1.04)}}
@keyframes bulbGlow{0%,54%,100%{opacity:.18;transform:scale(.78)}68%,88%{opacity:1;transform:scale(1.08)}}
@keyframes bulbRisca{0%,54%,100%{stroke-dashoffset:45}72%,88%{stroke-dashoffset:0}}
}
@media(max-width:640px){
.busca-depois{grid-template-columns:62px minmax(0,1fr);gap:11px;padding:13px}
.busca-bulb{width:62px;height:62px;border-radius:16px}
.busca-bulb svg{width:59px;height:59px}
.busca-depois-copy strong{font-size:1rem}
.busca-depois-copy>span{font-size:.76rem}
.busca-depois-cta{grid-column:1/-1;width:100%;min-height:46px;margin-top:1px;padding:11px 14px;
    border-top:1.5px dashed rgba(33,32,28,.16)}
}
.busca-res{max-width:900px;margin:26px auto 0}
.busca-res:empty{margin:0}
/* A tela de pó cobre o bloco inteiro e não intercepta clique nenhum. */
.busca-po{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:7}
.busca-msg{text-align:center;color:var(--ink-soft);font-size:1rem;padding:18px 0}
.busca-titulo{font-family:var(--font-head);font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:800;
  letter-spacing:-.015em;text-align:center;margin:0 0 8px;color:var(--ink)}
/* ---- CONFETE da confirmação ----
   SVG inline com a paleta UNIFICADA da casa (traço #121331 do original; pedaços
   no dourado #F6A81C e no índigo #5B6CE0 — o ícone vinha com #ffc738/#4bb3fd
   alheios, trocados 20/08). O popper fica parado e o que voa são cinco
   quadradinhos: só transform/opacity, sem repintar o traço a cada quadro. */
.busca-titulo.com-confete{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
/* ---- CONFETE ----
   A primeira versão era um SPRAY: 1,5s, cinco pedaços saindo em linha reta e
   sumindo no ponto mais alto. Confete de verdade não faz isso — ele sobe, perde
   velocidade, VIRA e cai. Três coisas dão essa leitura, e nenhuma delas é
   "aumentar a duração":

   1. ARCO, não vetor. Cada pedaço tem um pico (`--pk`, negativo) e um chão
      (`--fy`, positivo, abaixo de onde nasceu). A subida usa ease-OUT e a queda
      ease-IN, declarados DENTRO do keyframe — é a troca de easing no meio do
      caminho que faz a gravidade aparecer.
   2. TOMBO. O `scaleX` fecha para ~0,2 e reabre: papel girando de canto, visto
      de lado. Sem isso o pedaço é um quadradinho que translada.
   3. FIM ESCALONADO. Cada pedaço tem duração PRÓPRIA (2,4s a 3,4s). Se todos
      terminassem juntos, o fim viraria um corte seco — que era a queixa. Assim
      eles pousam um a um, e o último ainda está caindo quando os primeiros já
      sumiram.

   Custa 10 elementos vazios e nenhum script: a animação inteira é CSS. */
.confete{position:relative;flex:0 0 auto;width:44px;height:44px;display:block;pointer-events:none}
.confete svg{width:100%;height:100%;overflow:visible}
.confete .cone{fill:none;stroke:#121331;stroke-width:3;stroke-linejoin:round}
.confete .fita{fill:none;stroke:#5B6CE0;stroke-width:3;stroke-linecap:round}
.confete .pe{position:absolute;left:56%;top:32%;width:6px;height:6px;border-radius:1.5px;
  background:#F6A81C;opacity:0;will-change:transform,opacity}
/* paleta do arquivo original do Lordicon + o índigo da página, para o confete
   pertencer à landing e não parecer adesivo de outro sistema */
.confete .pe2{background:#5B6CE0;width:5px;height:5px}
.confete .pe3{background:#121331;width:4px;height:4px}
.confete .pe4{background:#F6A81C;width:4px;height:9px;border-radius:1px}
.confete .pe5{background:#5B6CE0;width:6px;height:6px;border-radius:50%}
.confete .pe6{background:var(--indigo);width:5px;height:5px}
.confete .pe7{background:#F6A81C;width:3px;height:8px;border-radius:1px}
.confete .pe8{background:#121331;width:5px;height:5px;border-radius:50%}
.confete .pe9{background:var(--indigo);width:4px;height:9px;border-radius:1px}
.confete .pe10{background:#5B6CE0;width:4px;height:4px}
@media(prefers-reduced-motion:no-preference){
.confete .pe{animation-name:confeteVoa;animation-fill-mode:forwards}
/* --dx destino horizontal · --pk pico da subida · --fy chão · --r giro total */
.confete .pe1{--dx: 20px;--pk:-30px;--fy: 30px;--r: 420deg;animation-duration:2.7s;animation-delay:.04s}
.confete .pe2{--dx: 34px;--pk:-19px;--fy: 40px;--r:-330deg;animation-duration:3.0s;animation-delay:.10s}
.confete .pe3{--dx:  7px;--pk:-36px;--fy: 34px;--r: 520deg;animation-duration:2.5s;animation-delay:.16s}
.confete .pe4{--dx: 41px;--pk:-33px;--fy: 26px;--r:-260deg;animation-duration:3.3s;animation-delay:.07s}
.confete .pe5{--dx: 27px;--pk:-42px;--fy: 44px;--r: 300deg;animation-duration:2.9s;animation-delay:.22s}
.confete .pe6{--dx:-13px;--pk:-27px;--fy: 38px;--r:-460deg;animation-duration:3.1s;animation-delay:.13s}
.confete .pe7{--dx: 48px;--pk:-14px;--fy: 46px;--r: 380deg;animation-duration:2.6s;animation-delay:.28s}
.confete .pe8{--dx:-21px;--pk:-38px;--fy: 28px;--r: 240deg;animation-duration:3.4s;animation-delay:.19s}
.confete .pe9{--dx: 14px;--pk:-47px;--fy: 42px;--r:-350deg;animation-duration:2.8s;animation-delay:.34s}
.confete .pe10{--dx: 37px;--pk:-24px;--fy: 50px;--r: 480deg;animation-duration:2.4s;animation-delay:.42s}
@keyframes confeteVoa{
    0%{opacity:0;transform:translate(0,0) rotate(0deg) scaleX(1);
       animation-timing-function:cubic-bezier(.09,.86,.28,1)}
    7%{opacity:1}
    /* pico do arco: aqui a subida termina e a queda começa — daí o easing virar */
    40%{transform:translate(calc(var(--dx) * .66),var(--pk)) rotate(calc(var(--r) * .4)) scaleX(.2);
        animation-timing-function:cubic-bezier(.45,0,.75,.72)}
    70%{transform:translate(calc(var(--dx) * .87),calc(var(--pk) * .1)) rotate(calc(var(--r) * .72)) scaleX(1)}
    /* a opacidade só cede no último terço: sumir no ápice era o que fazia o
       efeito parecer interrompido em vez de terminado */
    82%{opacity:1;scale:1}
    100%{opacity:0;scale:.86;transform:translate(var(--dx),var(--fy)) rotate(var(--r)) scaleX(.72)}
  }
}
/* Sem animação os pedaços ficam pousados: o ícone continua sendo um confete. */
@media(prefers-reduced-motion:reduce){
.confete .pe{opacity:1}
.confete .pe1{transform:translate(16px,-20px)}
.confete .pe2{transform:translate(26px,-8px)}
.confete .pe3{transform:translate(6px,-26px)}
.confete .pe4{transform:translate(30px,-24px)}
.confete .pe5{transform:translate(20px,-32px)}
.confete .pe6{transform:translate(-12px,-16px)}
.confete .pe7{transform:translate(38px,-6px)}
.confete .pe8{transform:translate(-18px,-28px)}
.confete .pe9{transform:translate(12px,-38px)}
.confete .pe10{transform:translate(33px,-16px)}
}
.busca-sub{text-align:center;color:var(--ink-soft);font-size:1rem;max-width:640px;margin:0 auto 22px}
/* ---- FIGURINHAS. Cada concurso é um adesivo: borda grossa e clara, canto
       arredondado, leve inclinação e a sombra deslocada que dá o descolado do
       papel. O que sobressai é o que o concurseiro decide por: BANCA, UF, ano e
       se o edital já saiu — nessa ordem. ---- */
.busca-lista{list-style:none;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
/* O card INTEIRO é o gesto — o cursor precisa dizer isso antes do clique. */
.busca-item{min-width:0;position:relative;background:var(--white);border:2.5px solid var(--ink);
  border-radius:18px;padding:15px 16px 13px;box-shadow:4px 5px 0 rgba(33,32,28,.16);
  display:flex;flex-direction:column;gap:9px;cursor:pointer;
  transition:transform .28s var(--ez-entra),box-shadow .28s ease}
/* O card já escolhido não é mais um alvo. */
.busca-escolha .busca-item{cursor:default}
@media(prefers-reduced-motion:no-preference){
.busca-item:hover{transform:translateY(-4px) rotate(-.7deg);box-shadow:7px 9px 0 rgba(33,32,28,.2)}
}
/* Quatro níveis de leitura, e a ordem é a da decisão de quem busca:
   1. CARGO   — é o que se escolhe. Preenchido, colorido e clicável.
   2. NOME    — a identidade do concurso. O maior, o mais escuro.
   3. BANCA   — o qualificador que mais pesa para concurseiro (define o estilo
                da prova). Ganha cor própria, mas não compete com o cargo.
   4. ÓRGÃO, UF, ANO — contexto. Cinza, pequeno, sem peso.
   Achatar isso — que era o estado anterior — obriga a ler tudo para achar
   qualquer coisa. */
.busca-selo{position:absolute;top:-11px;right:12px;font-size:.66rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;border-radius:999px;padding:4px 11px;border:2px solid var(--ink);
  background:var(--cream);color:var(--ink-soft)}
/* Pós-edital é o que dá para agir hoje — só ele ganha o destaque quente, e é
   isso que faz a ordem pós→pré ser visível antes de ser lida. */
.busca-item[data-tipo="pos"] .busca-selo{background:var(--orange);color:var(--ink)}
.busca-nome{font-family:var(--font-head);font-weight:800;font-size:1.14rem;line-height:1.22;
  color:var(--ink);padding-right:74px;overflow-wrap:anywhere}
.busca-orgao{font-size:.8rem;color:var(--ink-soft);line-height:1.35;margin-top:-3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.busca-fatos{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.busca-fato{font-size:.75rem;font-weight:600;color:var(--ink-soft);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A banca é a única meta que vira pílula: as outras são texto solto de propósito,
   porque tudo em pílula é o mesmo que nada em pílula. */
.busca-fato.banca{font-weight:700;border-radius:8px;padding:3px 9px;
  background:var(--indigo-soft);border:1.5px solid var(--indigo-border);color:var(--indigo-deep)}
/* Zona de ação, separada por um picote — a figurinha "destaca" aqui. */
.busca-acao{margin-top:auto;padding-top:11px;border-top:1.5px dashed rgba(33,32,28,.16)}
/* Evidência de por que o edital casou. Informa, não pede decisão. */
.busca-resumo{font-size:.8rem;line-height:1.35;color:var(--ink-soft);margin-bottom:9px}
.busca-tem{display:block;font-weight:700;color:var(--ink)}
.busca-mais-cargos{display:block;font-size:.76rem;margin-top:1px}
/* Uma decisão por card, e ela é do EDITAL. */
.busca-escolher{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  font-family:var(--font-head);font-size:.9rem;font-weight:700;text-align:left;line-height:1.25;
  border-radius:12px;padding:11px 14px;cursor:pointer;
  color:#fff;background:var(--indigo);border:1.5px solid var(--indigo);
  transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.busca-escolher::after{content:"→";font-weight:800;flex:0 0 auto;transition:transform .2s ease}
.busca-escolher:hover{background:var(--indigo-deep);border-color:var(--indigo-deep);
  box-shadow:0 10px 24px -12px rgba(91,108,224,.85)}
.busca-escolher:hover::after{transform:translateX(3px)}
.busca-escolher:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
/* ---- O CHECK. Confirma a escolha ANTES de a tela mudar: sem esse instante, o
       clique some junto com os outros cards e a pessoa não vê o que escolheu.
       O círculo cresce e o traço se desenha. ---- */
.busca-check{position:absolute;inset:0;z-index:4;display:none;place-items:center;
  border-radius:16px;background:rgba(245,243,238,.82);backdrop-filter:blur(1.5px)}
.busca-item.escolhida .busca-check{display:grid}
.busca-check svg{width:64px;height:64px;fill:none;stroke:var(--indigo);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.busca-check circle{opacity:.28}
.busca-check path{stroke:var(--green);stroke-width:3.2;stroke-dasharray:24;stroke-dashoffset:24}
@media(prefers-reduced-motion:no-preference){
.busca-item.escolhida .busca-check{animation:checkEntra .22s ease forwards}
.busca-item.escolhida .busca-check path{animation:checkRisca .34s var(--ez-entra) .12s forwards}
.busca-item.escolhida{animation:checkPulo .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes checkEntra{from{opacity:0}to{opacity:1}}
@keyframes checkRisca{to{stroke-dashoffset:0}}
@keyframes checkPulo{40%{transform:scale(1.035)}100%{transform:none}}
}
/* Sem animação, o check aparece pronto — nunca some. */
@media(prefers-reduced-motion:reduce){
.busca-check path{stroke-dashoffset:0}
}
/* O trecho que casou com a busca. Sem fundo amarelo de navegador: aqui ele
   marca "foi por isto que este concurso apareceu", e precisa conviver com o
   índigo do botão — inclusive no hover, quando o botão inverte. */
.busca-item mark{background:none;color:inherit;font-weight:800;
  box-shadow:inset 0 -.42em 0 rgba(246,168,28,.42);border-radius:2px;padding:0 1px}
.busca-correlatos{margin-top:26px}
.busca-correlatos h3{font-family:var(--font-head);font-size:.95rem;font-weight:700;color:var(--ink-soft);
  text-align:center;margin-bottom:12px}
/* Enquanto a busca interpretada não chegou, o que está na tela é o literal. */
.busca-refinando{text-align:center;font-size:.82rem;color:var(--ink-soft);margin-top:14px;opacity:.85}
/* ---- ESCOLHIDO: a figurinha fica, as outras saem de cena ---- */
.busca-escolha{max-width:560px;margin:0 auto}
.busca-escolha .busca-item{border-color:var(--indigo);box-shadow:5px 6px 0 rgba(91,108,224,.35)}
.busca-escolha-acoes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:18px}
/* ---- AUTOAVANÇO: a contagem corre DENTRO do botão ----
   Barra por baixo do rótulo, não ao lado: o botão é o destino, então é nele que
   o tempo tem que aparecer. `overflow:hidden` + `isolation` prendem a barra na
   pílula e evitam que ela passe por cima do `.shine`, que é o brilho do botão. */
.auto-ir{position:relative;overflow:hidden;isolation:isolate}
.auto-ir .auto-rot{position:relative;z-index:2}
.auto-barra{position:absolute;left:0;top:0;bottom:0;width:0;z-index:1;
  background:rgba(255,255,255,.34);pointer-events:none;border-right:2px solid rgba(255,255,255,.6)}
/* 5s aqui e 5000ms no JS são o MESMO prazo escrito duas vezes — mudou um, muda o
   outro, senão a barra mente sobre quanto falta. `linear` porque é relógio: com
   easing a barra desacelera no fim e a navegação parece chegar antes da hora. */
.auto-ir.contando .auto-barra{width:100%;transition:width 5s linear}
/* pausado: a barra fica onde parou (largura fixada pelo JS), só perde o fio */
.auto-ir.parado .auto-barra{border-right-color:transparent;transition:none}
.auto-nota{margin:9px 0 0;text-align:center;font-size:.8rem;color:var(--ink-soft);min-height:1em}
/* Discreto de propósito: quem quer parar procura; quem não quer não é
   interrompido por um botão competindo com o CTA logo acima. */
.auto-pausar{background:none;border:0;padding:0 2px;cursor:pointer;font:inherit;
  color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px;opacity:.75}
.auto-pausar:hover{opacity:1;color:var(--indigo-deep)}
.auto-pausar:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
.auto-barra{display:none}
}
.busca-trocar{background:none;border:none;cursor:pointer;font-family:var(--font-body);font-weight:700;
  font-size:.9rem;color:var(--ink-soft);text-decoration:underline;padding:8px}
.busca-trocar:hover{color:var(--indigo-deep)}
.busca-trocar:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
@media(prefers-reduced-motion:no-preference){
.busca-item.saindo{transition:opacity .3s ease,transform .3s ease;opacity:0;transform:scale(.9) translateY(8px)}
}
/* CTA de saída dos depoimentos. `data-preco` no valor: o bloco de preço da
   página reescreve todo elemento com esse atributo, então este número segue o
   A/B junto com os demais em vez de virar um preço fixo esquecido no HTML. */
.dep-cta{text-align:center;margin-top:30px}
.dep-cta-nota{margin-top:14px;font-size:.9rem;color:var(--ink-soft);font-weight:500}
.dep-cta-nota b{color:var(--ink)}
/* ============ SETAS DO CARROSSEL DE RECURSOS ============
   Ancoradas à borda do CARD (`--cf-w`), não à do palco: o palco é largo e o
   gênio transborda 96px à esquerda dele, então seta colada na borda do palco
   cairia em cima do gênio. Medido no vão mais apertado (≥1340px, onde o gênio
   não desloca): 54px entre o gênio e o card — os 40px da seta cabem com folga
   dos dois lados. Abaixo de 1340px o gênio recua mais 40px e sobra ainda mais.
   Em ≤900px o palco empilha e não há vão nenhum: ali elas descem para baixo do
   card, lado a lado, como no carrossel de depoimentos. */
.cf-seta{position:absolute;top:52%;transform:translateY(-50%);z-index:6;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-size:1.5rem;line-height:1;color:var(--ink);
  background:var(--white);border:1.5px solid rgba(33,32,28,.14);border-radius:50%;
  cursor:pointer;box-shadow:0 6px 18px -8px rgba(33,32,28,.4);
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.cf-seta span{margin-top:-3px}
.cf-seta:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}
.cf-seta:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
.cf-prev{left:calc(50% - var(--cf-w)/2 - 47px)}
.cf-next{right:calc(50% - var(--cf-w)/2 - 47px)}
@media(prefers-reduced-motion:no-preference){
.cf-prev:hover{transform:translateY(-50%) translateX(-2px)}
.cf-next:hover{transform:translateY(-50%) translateX(2px)}
}
@media(max-width:900px){
.cf-seta{position:static;transform:none;top:auto}
.cf-prev,.cf-next{left:auto;right:auto}
/* order/margin colocam as duas centralizadas abaixo do palco */
.cf{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cf-palco{order:1;flex:1 1 100%}
.cf-prev{order:2}
.cf-next{order:3}
}
/* Sem o motor (celular e reduced-motion) as setas seriam dois botões mortos.
   Esta regra mora DEPOIS da base .cf-seta de propósito: antes dela, perdia na
   ordem da cascata e as setas voltavam. */
@media (prefers-reduced-motion:reduce),(max-width:760px){
.cf-seta{display:none}
}
/* Cargo no título das ferramentas: linha própria e corpo menor, para o nome
   caber INTEIRO. Nome de cargo tem 80 caracteres com frequência, e no tamanho
   do <h2> isso vira parede — mas cortar devolveria um cargo que não existe. */
.rec-cargo{display:block;margin-top:8px;font-size:.62em;line-height:1.3;
  color:var(--indigo-deep);letter-spacing:-.01em}
@media(max-width:640px){
.rec-cargo{font-size:.7em}
}
/* Entrada dos cards injetados: NÃO usa .reveal — aquele nasce opacity:0 e só o
   IntersectionObserver montado no parse o revela, então elemento criado depois
   ficaria invisível para sempre. */
@media(prefers-reduced-motion:no-preference){
.busca-res .entra{opacity:0;transform:translateY(10px);animation:buscaEntra .45s var(--ez-entra) forwards}
@keyframes buscaEntra{to{opacity:1;transform:none}}
}
/* carregando: o caminho com LLM leva alguns segundos, e silêncio nesse tempo
   é indistinguível de "quebrou". */
.busca-load{display:flex;align-items:center;justify-content:center;gap:12px;padding:26px 0;color:var(--ink-soft)}
.busca-load i{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--indigo-border);
  border-top-color:var(--indigo);display:block}
@media(prefers-reduced-motion:no-preference){
.busca-load i{animation:buscaGira .8s linear infinite}
}
@keyframes buscaGira{to{transform:rotate(360deg)}}
/* erro NUNCA se parece com "não achamos": um é problema nosso e tem retentativa,
   o outro é resposta e abre o formulário. Confundir os dois já machucou aluno. */
.busca-erro{text-align:center;padding:22px;background:var(--orange-soft);border-radius:16px;color:var(--ink)}
.busca-erro p{max-width:520px;margin:0 auto}
/* Duas saídas lado a lado: seguir mesmo assim (laranja, a que interessa) e
   repetir a busca. A falha é nossa, mas o caminho da pessoa não fecha por isso. */
.busca-erro-acoes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  align-items:center;margin-top:16px}
/* "opcional" ao lado do rótulo, e não asterisco no obrigatório: marcar o que é
   dispensável é mais honesto que marcar o que é exigido, porque a pessoa lê o
   campo e já sabe que pode pular. Peso normal e cor apagada — é informação de
   serviço, não hierarquia. */
.busca-lead-opc{font-family:var(--font-body);font-size:11.5px;font-weight:500;
  text-transform:lowercase;letter-spacing:0;color:var(--ink-soft);opacity:.8}
/* As três provas: restauradas em 19/08 a pedido do dono. Elas existem para
   responder a pergunta que decide se a pessoa preenche o formulário — "o que
   exatamente eu recebo quando ficar pronto?" — antes de ela olhar os campos.
   Em ≤520px viram lista de uma coluna alinhada à esquerda: três cartões lado a
   lado num celular espremem o rótulo em duas linhas e perdem legibilidade. */
.busca-lead-provas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  list-style:none;padding:0;margin:0 0 20px}
.busca-lead-provas li{background:var(--indigo-soft);border-radius:12px;
  padding:12px 10px;text-align:center}
.busca-lead-provas b{display:block;font-family:var(--font-head);font-size:15px;
  color:var(--indigo-deep);line-height:1.2;margin-bottom:3px}
.busca-lead-provas span{display:block;font-size:11.5px;line-height:1.35;color:var(--ink-soft)}
@media(max-width:520px){
.busca-lead-provas{grid-template-columns:1fr;gap:7px}
.busca-lead-provas li{display:flex;align-items:baseline;gap:8px;text-align:left;padding:10px 12px}
.busca-lead-provas b{margin:0;flex:none}
}
.busca-erro-tag{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#9a6714;background:var(--orange-soft);
  padding:5px 11px;border-radius:100px;margin-bottom:12px}
.busca-erro-tag::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--orange);flex:none}
.busca-erro-tit{margin:0 0 6px;font-family:var(--font-head);font-size:19px;
  line-height:1.25;color:var(--ink)}
.busca-erro-txt{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);
  max-width:52ch}
/* Estado sem resultado: status, explicação e próximo passo. Os três ganhos da
   assinatura repetiam a landing e escondiam o que acontece depois do pedido. */
.busca-lead{position:relative;overflow:hidden;background:var(--white);border:1.5px solid #e8e5db;
  border-radius:var(--radius);padding:26px 24px;max-width:620px;margin:0 auto;
  box-shadow:0 18px 46px -32px rgba(52,48,86,.34)}
.busca-lead::before{content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,var(--indigo) 0 72%,var(--orange) 72%)}
.busca-lead-cabecalho{display:grid;grid-template-columns:46px minmax(0,1fr);gap:13px;
  align-items:start;margin-bottom:18px}
.busca-lead-icone{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;
  color:var(--indigo-deep);background:var(--indigo-soft);border:1px solid rgba(91,108,224,.18)}
.busca-lead-icone svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.busca-lead-tag{margin:0 0 7px;padding:4px 9px;font-size:10px}
.busca-lead-titulo{margin:0 0 5px;font-family:var(--font-head);font-size:20px;
  line-height:1.2;letter-spacing:-.015em;color:var(--ink);overflow-wrap:anywhere}
.busca-lead-sub{margin:0;font-size:14px;line-height:1.48;color:var(--ink-soft);max-width:48ch}
.busca-lead-sub strong{color:var(--ink);font-weight:700}
.busca-lead-etapas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  list-style:none;padding:0;margin:0 0 20px;counter-reset:lead-etapa}
.busca-lead-etapas li{position:relative;min-width:0;padding:11px 8px 10px;text-align:center;
  border:1px solid rgba(91,108,224,.14);border-radius:12px;background:#f8f8fd}
.busca-lead-etapas li:not(:last-child)::after{content:"›";position:absolute;z-index:2;right:-8px;
  top:50%;width:15px;height:22px;display:grid;place-items:center;transform:translateY(-50%);
  color:var(--indigo);font-size:18px;font-weight:800;background:var(--white)}
.busca-lead-etapas b{display:grid;place-items:center;width:22px;height:22px;margin:0 auto 6px;
  border-radius:50%;font-family:var(--font-head);font-size:11px;color:#fff;background:var(--indigo)}
.busca-lead-etapas span{display:block;font-size:11px;line-height:1.25;font-weight:650;color:var(--ink)}
.busca-lead-campos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:640px){
.busca-lead-campos{grid-template-columns:1fr}
}
.busca-lead label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.busca-lead label span{display:block;margin-top:2px;font-size:.7rem;line-height:1.3;font-weight:500;color:var(--ink-soft)}
.busca-lead input{width:100%;height:50px;border-radius:14px;padding:0 16px;font-family:var(--font-body);
  font-size:.98rem;color:var(--ink);background:var(--white);border:1.5px solid rgba(33,32,28,.14)}
.busca-lead input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 4px rgba(91,108,224,.16)}
.busca-lead input:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
.busca-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;
  overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.busca-consent{font-size:.8rem;color:var(--ink-soft);margin-top:12px;line-height:1.5;text-align:center}
.busca-consent a{color:var(--indigo-deep);text-decoration:underline}
.busca-lead-erro{font-size:.85rem;color:#B3261E;margin-top:10px;text-align:center}
.busca-ok{text-align:center;padding:8px 0}
.busca-ok h3{font-family:var(--font-head);font-size:1.25rem;font-weight:800;margin-bottom:8px}
.busca-ok p{color:var(--ink-soft);margin-bottom:18px}
@media(max-width:520px){
.busca-lead{padding:23px 18px 21px}
.busca-lead-cabecalho{grid-template-columns:40px minmax(0,1fr);gap:11px;margin-bottom:16px}
.busca-lead-icone{width:40px;height:40px;border-radius:12px}
.busca-lead-titulo{font-size:18px}
.busca-lead-etapas{gap:6px;margin-bottom:18px}
.busca-lead-etapas li{padding:9px 5px}
.busca-lead-etapas span{font-size:10px}
}
.cf-fim{display:none}
@media(max-width:760px){
section{padding:52px 0}
/* Prova institucional sem marquee ou cópias no celular. A Shiva é o apoio
     mais próximo da história da Bizzu e, por isso, fecha a grade em destaque
     próprio — não pode ser cortada junto com a cópia usada no loop desktop. */
.selos-sec{padding:30px 0 38px}
.selos-label{margin-bottom:16px;font-size:.68rem;letter-spacing:.12em}
.selos-wrap{overflow:visible;mask-image:none;-webkit-mask-image:none}
.selos{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;animation:none}
.selo-pill{min-width:0;min-height:50px;justify-content:center;gap:6px;padding:8px 6px;
    border:1px solid rgba(33,32,28,.08);border-radius:14px;background:rgba(255,255,255,.6)}
.selo-pill:nth-child(n+6){display:none}
.selo-pill img{max-width:28px;height:20px}
.selo-pill img.lg-wordmark{max-width:68px;height:20px}
.selo-pill span{font-size:.68rem;white-space:normal;line-height:1.15}
.selo-pill span.selo-by,.selo-pill img.selo-mona{display:none}
.selo-pill:nth-child(5){grid-column:1/-1;min-height:58px;gap:8px;
    border-color:rgba(91,108,224,.22);background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(240,241,254,.86));
    box-shadow:0 12px 28px -24px rgba(63,74,168,.65)}
.selo-pill:nth-child(5)>img:first-child{width:29px;max-width:29px;height:29px}
.selo-pill:nth-child(5)>span{font-size:.8rem;white-space:nowrap}
.selo-pill:nth-child(5)>span.selo-by{display:inline;margin:0 -3px;font-size:.62rem;color:var(--ink-soft)}
.selo-pill:nth-child(5)>img.selo-mona{display:block;width:auto;max-width:96px;height:19px}
/* Busca: duas portas de entrada com o mesmo acabamento, sem um segundo botão gigante. */
.busca-sec{padding:44px 0 54px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.42),transparent)}
.busca-head{margin-bottom:16px;text-align:left}
.busca-head h2{font-size:clamp(1.75rem,8vw,2.2rem);letter-spacing:-.035em}
.busca-form{padding:7px;gap:7px;border:1.5px solid rgba(63,74,168,.2);border-radius:22px;
    background:var(--white);box-shadow:0 20px 42px -30px rgba(52,48,86,.65)}
.busca-form input{height:50px;padding:0 15px;border:0;border-radius:15px;background:#f8f7f3;box-shadow:none;font-size:.91rem}
.busca-form input:focus{box-shadow:inset 0 0 0 2px var(--indigo)}
.busca-depois{grid-template-columns:52px minmax(0,1fr) 44px;gap:11px;margin-top:11px;
    padding:11px;border-width:1.5px;border-color:rgba(63,74,168,.3);border-radius:20px;
    box-shadow:0 16px 36px -30px rgba(52,48,86,.36);background:rgba(255,255,255,.72)}
.busca-bulb{width:52px;height:52px;border-radius:14px}
.busca-bulb svg{width:50px;height:50px}
.busca-depois-copy small{display:none}
.busca-depois-copy strong{font-size:.96rem}
.busca-depois-copy>span{font-size:.72rem;line-height:1.3}
.busca-depois-cta{grid-column:auto;width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:13px}
.busca-depois-cta>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.busca-res{margin-top:20px}
.busca-lista{grid-template-columns:1fr;gap:12px}
.busca-item{padding:15px;border-width:2px;border-radius:18px}
/* Recursos: lista vertical (o bloco compartilhado com prefers-reduced-motion,
     lá em cima, já empilhou as fichas e revelou o .cf-fala). Aqui só o traje
     mobile: a fala vira o texto-guia acima de cada ficha, no mesmo desenho que
     o balão do gênio tinha. */
#recursos{padding:50px 0;background:linear-gradient(180deg,rgba(240,241,254,.34),transparent 72%)}
#recursos .sec-head{margin-bottom:18px;text-align:left}
#recursos .sec-head::before{margin:0 0 18px;width:84px;opacity:.9}
#recursos .sec-head h2{font-size:clamp(1.8rem,8.3vw,2.35rem);line-height:1.07;text-wrap:balance}
.cf{--cf-w:100%;width:100%;margin:0}
.cf-palco{min-width:0}
/* ===== Clareza dos passos (spec do painel, 19/08): três degraus francos —
     pill-metadado ("PASSO 01/09") → nome-manchete → frase de apoio. Zero
     mudança de markup nos 9 blocos: tudo CSS. ===== */
#recursos .cf-fala{margin:0 0 16px}
#recursos .cf-passo{display:block;width:max-content;margin:0 0 10px;padding:4px 10px;
    font-family:var(--font-metric);font-size:.62rem;font-weight:500;letter-spacing:.09em;
    text-transform:uppercase;color:var(--indigo-deep);background:var(--indigo-soft);
    border:1px solid var(--indigo-border);border-radius:999px}
#recursos .cf-passo::before{content:"passo "}
#recursos .cf-passo i{font-style:normal;opacity:.55}
#recursos .cf-nome{display:block;font-family:var(--font-head);font-size:1.35rem;
    font-weight:700;line-height:1.18;letter-spacing:-.01em;color:var(--indigo-deep)}
#recursos .cf-frase{display:block;margin-top:8px;max-width:36ch;
    font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
/* Tag de evidência: diz o que o cartão prova. Última linha da fala (o chip na
     borda do cartão foi vetado: .feat-card tem overflow:hidden e o cortaria). */
#recursos .cf-fala::after{content:"tela real da Bizzu";display:block;margin-top:10px;
    font-family:var(--font-metric);font-size:.54rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-soft)}
/* O fio da jornada: costura tracejada entre um cartão e o passo seguinte.
     In-flow de propósito (não depende da altura do vão). O seletor do painel
     (.feat-card + .cf-fala) não casa nesta estrutura — cada par vive dentro do
     próprio .cf-item, então a costura é entre itens. */
#recursos .cf-item+.cf-item .cf-fala::before{content:"";display:block;width:2px;height:28px;
    margin:0 0 14px 15px;border-radius:1px;
    background:repeating-linear-gradient(to bottom,var(--indigo-border) 0 4px,transparent 4px 9px)}
/* Fecho da jornada: o fio termina num nó cheio + frase-bookend, antes do CTA. */
#recursos .cf-fim{display:block;margin:26px 0 22px;font-family:var(--font-head);
    font-size:1.3rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
#recursos .cf-fim::before{content:"";display:block;width:12px;height:44px;margin:0 0 14px 10px;
    background:radial-gradient(circle at 6px calc(100% - 5px),var(--indigo) 0 4px,transparent 5px),
      repeating-linear-gradient(to bottom,var(--indigo-border) 0 4px,transparent 4px 9px) 5px 0/2px calc(100% - 12px) no-repeat}
#recursos .cf-fim-marca{box-shadow:inset 0 -.42em 0 rgba(246,168,28,.42)}
.cf-item .feat-card .feat-ui{margin:10px;border-radius:15px}
/* Comparativo mobile: a tabela detalhada continua no desktop; aqui a decisão cabe em uma ficha. */
#assineja{padding:54px 0}
.pricing{width:calc(100% - 20px)}
.vs-intro{margin-bottom:17px;text-align:left}
.arsenal-h3{font-size:1.04rem;line-height:1.38;color:var(--ink-soft)}
.vs-tabela{display:none}
.vs-mobile{display:block;overflow:hidden;border:2px solid var(--ink);border-radius:24px;
    background:var(--white);box-shadow:6px 7px 0 rgba(33,32,28,.13)}
.vs-mobile-top{display:flex;align-items:center;gap:10px;padding:17px 16px;color:#fff;
    background:linear-gradient(135deg,var(--indigo),var(--indigo-deep))}
.vs-mobile-sinal{width:9px;height:9px;flex:none;border-radius:50%;background:var(--orange);
    box-shadow:0 0 0 4px rgba(246,168,28,.17)}
.vs-mobile-top div{flex:1;min-width:0}
.vs-mobile-top small{display:block;color:#dfe2fb;font-size:.68rem;font-weight:700}
.vs-mobile-top strong{display:block;margin-top:3px;font-family:var(--font-head);font-size:1.05rem}
.vs-mobile-logo{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:12px;
    background:rgba(255,255,255,.13);font-family:var(--font-head);font-weight:800;color:var(--orange)}
.vs-mobile-beneficios{display:grid;gap:0;padding:5px 14px}
.vs-mobile-beneficios>div{display:flex;align-items:center;gap:13px;padding:12px 3px;border-bottom:1px solid #eeebe0;
    border-radius:13px;transition:background .22s ease,transform .22s var(--ez-entra)}
.vs-mobile-beneficios>div:last-child{border-bottom:0}
.vs-mobile-ico{position:relative;width:44px;height:44px;display:grid;place-items:center;flex:none;overflow:visible;
    border:1px solid rgba(91,108,224,.19);border-radius:14px;color:var(--indigo-deep);
    background:linear-gradient(145deg,#fbfbff 4%,#eaecff 94%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 17px -13px rgba(63,74,168,.95);
    transition:transform .25s var(--ez-entra),box-shadow .25s ease}
.vs-mobile-ico::after{content:"";position:absolute;inset:4px;border-radius:10px;pointer-events:none;
    background:radial-gradient(circle at 28% 20%,rgba(255,255,255,.95),transparent 43%)}
.vs-mobile-ico svg{position:relative;z-index:1;width:27px;height:27px;overflow:visible;fill:none;
    stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vs-mobile-ico .ico-fill{fill:rgba(91,108,224,.12);stroke:currentColor}
.vs-mobile-ico .ico-accent{stroke:var(--orange);stroke-width:2.4}
.vs-mobile-ico .ico-accent-fill{fill:var(--orange);stroke:var(--orange)}
.vs-mobile-ico .ico-check,.vs-mobile-ico .ico-chart{stroke-dasharray:24;stroke-dashoffset:0}
.vs-mobile-beneficios>div:active{transform:scale(.985);background:rgba(240,241,254,.62)}
.vs-mobile-beneficios>div:active .vs-mobile-ico{transform:scale(.88) rotate(-4deg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 9px -7px rgba(63,74,168,.85)}
.vs-mobile-beneficios p{min-width:0}
.vs-mobile-beneficios b{display:block;font-family:var(--font-head);font-size:.92rem}
/* O texto secundario vive dentro do <p>. Limitar o seletor impede que esta
     regra sobrescreva o display:grid do quadrado do icone, que precisa manter
     o SVG centralizado nos dois eixos. */
.vs-mobile-beneficios p span{display:block;margin-top:2px;font-size:.76rem;line-height:1.3;color:var(--ink-soft)}
.vs-mobile-rotina{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:5px 12px 0;
    padding:12px;border:1px dashed rgba(33,32,28,.2);border-radius:15px;background:#f8f7f3}
.vs-mobile-rotina span{min-width:0}
.vs-mobile-rotina small{display:block;font-size:.62rem;font-weight:800;text-transform:uppercase;color:#8a877c}
.vs-mobile-rotina b{display:block;margin-top:3px;font-size:.72rem;line-height:1.28}
.vs-mobile-rotina span:last-child b{color:var(--indigo-deep)}
.vs-mobile-rotina i{font-style:normal;color:var(--orange);font-weight:900}
.vs-mobile-footer{padding:15px 16px 17px}
.vs-mobile-footer p{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.vs-mobile-footer small{font-size:.72rem;color:var(--ink-soft)}
.vs-mobile-footer p b{font-family:var(--font-metric);font-size:1.14rem}
.compare-nota{margin-top:14px;font-size:.68rem;line-height:1.4}
/* Preço: anual é a escolha principal; mensal vira a alternativa compacta. */
.pricing-grid{gap:14px;margin-top:38px}
.price-card{padding:26px 20px;border-radius:22px}
.price-card:hover{transform:none}
.price-card.destaque{box-shadow:0 24px 52px -26px rgba(63,74,168,.5)}
.price-tag{top:-12px;right:16px;padding:6px 14px;font-size:.72rem}
.price-card .plano{margin-bottom:12px}
.price-card.destaque .price-valor .num{font-size:3.3rem}
.price-ancora{margin:8px 0 18px;font-size:.86rem;line-height:1.4}
.price-feats{gap:10px;margin-bottom:20px;font-size:.82rem;line-height:1.35}
.price-card:not(.destaque){display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;padding:20px}
.price-card:not(.destaque) .plano{grid-column:1;margin:0}
.price-card:not(.destaque) .price-valor{grid-column:1}
.price-card:not(.destaque) .price-valor .num{font-size:2.3rem}
.price-card:not(.destaque) .price-ancora{grid-column:1/-1;margin:2px 0 8px;font-size:.76rem}
.price-card:not(.destaque) .price-feats{display:none}
.garantia-faixa{flex-direction:row;align-items:flex-start;gap:10px;margin-top:16px;padding:14px;
    border-radius:16px;text-align:left;font-size:.78rem;line-height:1.42}
.garantia-faixa svg{width:22px;height:22px}
/* Depoimentos, FAQ e fechamento com o mesmo ritmo de cartões. */
#depoimentos{padding:50px 0}
#depoimentos .sec-head,#faq .sec-head{text-align:left;margin-bottom:24px}
#depoimentos .sec-head::before,#faq .sec-head::before{margin:0 0 18px;width:84px;opacity:.9}
#depoimentos .sec-head h2,#faq .sec-head h2{font-size:clamp(1.8rem,8vw,2.25rem);line-height:1.08}
.dep{overflow:visible}
.dep-trilho{gap:12px}
.dep-card{min-height:258px;padding:22px 19px;border-radius:21px;
    box-shadow:0 18px 38px -30px rgba(52,48,86,.3)}
.dep-card blockquote{font-size:1rem;line-height:1.55}
.dep-ctrl{gap:5px;margin-top:14px}
.dep-nav{width:44px;height:44px}
.dep-dots{gap:0}
.dep-dot,.dep-dot[aria-current="true"]{position:relative;width:30px;height:44px;background:transparent}
.dep-dot::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:99px;
    transform:translate(-50%,-50%);background:#d3cebf;transition:width .2s,background .2s}
.dep-dot[aria-current="true"]::after{width:20px;background:var(--indigo)}
.dep-cta{margin-top:20px}
.dep-cta-nota{font-size:.75rem}
#faq{padding:50px 0}
#faq .sec-head p{font-size:.9rem}
.faq-list{gap:9px}
.faq-item{border-radius:16px}
/* Seis à mostra + as marcadas .faq-vital (a de preço não pode sumir: era a
     única resposta de preço da página e ficava atrás do "ver todas"). */
.faq-item:nth-child(n+7):not(.faq-vital){display:none}
.faq-list.mobile-expanded .faq-item{display:block}
.faq-q{min-height:62px;padding:15px 16px;font-size:.9rem;line-height:1.35}
.faq-q .chev{width:34px;height:34px}
.faq-a-inner{padding:0 16px 18px;font-size:.86rem;line-height:1.55}
.faq-mobile-more{width:100%;min-height:50px;display:flex;align-items:center;justify-content:center;gap:8px;
    margin-top:12px;border:1.5px solid var(--indigo-border);border-radius:15px;background:var(--white);
    color:var(--indigo-deep);font-family:var(--font-head);font-size:.84rem;font-weight:800;cursor:pointer}
.faq-mobile-more span{transition:transform .2s ease}
.faq-mobile-more[aria-expanded="true"] span{transform:rotate(180deg)}
.cta-final{width:calc(100% - 20px);border-radius:26px;text-align:left}
.cta-final::before{width:220px;height:220px;top:-120px;left:-110px}
.cta-final::after{width:190px;height:190px;right:-90px;bottom:-100px}
.cta-final h2{font-size:clamp(1.7rem,8vw,2.15rem);line-height:1.08}
.cta-final p{margin:0 0 22px;font-size:.93rem;line-height:1.48}
.cta-final .prazo{margin:14px 0 0;font-size:.72rem}
footer{padding-top:18px}
.footer-ceu{width:calc(100% - 20px);padding:46px 0 24px;border-radius:26px 26px 0 0}
.footer-word{font-size:3.8rem}
.footer-grid{grid-template-columns:1fr 1fr;gap:28px 18px;padding:0 0 28px}
.footer-cta-col{grid-column:1/-1}
.footer-bottom{padding:20px 0 0}
}
@media(max-width:760px) and (hover:hover){
.vs-mobile-beneficios>div:hover{background:rgba(240,241,254,.52)}
.vs-mobile-beneficios>div:hover .vs-mobile-ico{transform:translateY(-2px) rotate(-2deg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 13px 22px -14px rgba(63,74,168,.95)}
}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
@keyframes mobileAuraB{to{transform:translate3d(20px,-16px,0) scale(.94)}}
.vs-mobile-ico{animation:vsIconRespira 6.4s ease-in-out var(--ico-delay,0s) infinite}
.vs-mobile-ico .ico-paper{transform-origin:16px 17px;animation:vsPaper 6.4s var(--ez-entra) var(--ico-delay,0s) infinite}
.vs-mobile-ico .ico-radar{transform-origin:16px 16px;animation:vsRadar 6.4s ease-out var(--ico-delay,0s) infinite}
.vs-mobile-ico .ico-check,.vs-mobile-ico .ico-chart{
    animation:vsDraw 6.4s var(--ez-entra) var(--ico-delay,0s) infinite}
.vs-mobile-ico .ico-dot{transform-origin:center;animation:vsDot 6.4s ease-out var(--ico-delay,0s) infinite}
@keyframes vsIconRespira{0%,18%,100%{transform:none}7%{transform:translateY(-2px) rotate(-2deg)}12%{transform:translateY(0) rotate(1deg)}}
@keyframes vsPaper{0%,18%,100%{transform:none}6%{transform:translateY(-1px) scale(.96,1.04)}12%{transform:translateY(0) scale(1.02,.98)}}
@keyframes vsRadar{0%,3%,18%,100%{opacity:.15;transform:scale(.72)}8%,12%{opacity:.9;transform:scale(1.16)}}
@keyframes vsDraw{0%,2%,100%{stroke-dashoffset:24}10%,24%{stroke-dashoffset:0}35%{stroke-dashoffset:0}}
@keyframes vsDot{0%,5%,100%{transform:scale(.55);opacity:.4}11%,22%{transform:scale(1.28);opacity:1}}
}
@media(max-width:380px){
.dep-dot,.dep-dot[aria-current="true"]{width:25px}
}
/* leitura em F: termos-âncora do balão em negrito índigo (desktop e mobile),
   como o balão do desktop sempre fez — o olho escaneia a ficha pelos <b> */
#recursos .cf-frase b{font-weight:700;color:var(--indigo,#3B45B0)}
@media(max-width:760px){
.m-press{transform:scale(.94)!important;transition:transform .18s var(--ez-acerto)}
/* ===== REPARO DA PODA DO COMENTÁRIO (dono, 20/08: "mock incompleto") =====
     A poda do carrossel (≤900px, cartão de 240px) escondia a coluna "Por que
     está errada" — o mock virava letras B/C/D/E sem explicação nenhuma. No
     card vertical de ~343px a tabela inteira cabe e lê (provado no protótipo);
     na faixa 761-900px (leque estreito) a poda continua valendo. */
.cf-item .cm-tab th:nth-child(2),.cf-item .cm-tab td:nth-child(2){display:table-cell}
.cf-item .feat-ui .cm-h{font-size:11px}
.cf-item .feat-ui .cm-p{font-size:13px}
.cf-item .feat-ui .cm-tab{font-size:11.5px}
@keyframes mDesce{0%{opacity:0;transform:translateY(-14px)}100%{opacity:1;transform:none}}
@keyframes mRecebe{0%,32%,64%,100%{transform:none}
    16%{transform:translateY(1.6px) rotate(.3deg)}
    48%{transform:translateY(1.6px) rotate(-.3deg)}
    80%{transform:translateY(1.4px)}}
/* ===== F3: O GÊNIO-GUIA NAS 9 FICHAS =====
     A fala vira balão de quadrinho; o gênio da pose oficial vive num palco
     entre o balão e o cartão (cabeça sob o rabicho, cauda sobre a ficha),
     com halo respirando (radial já difuso, sem filter) e pó do gesto.
     Artes: variantes -m (148,9 KB nas 9) via data-src-m + loading=lazy. */
#recursos .cf-fala{position:relative;margin:0;background:var(--white);
    border:1.5px solid #e5e1d8;border-radius:20px;padding:14px 16px;transform-origin:22% 100%;
    box-shadow:0 0 0 1px rgba(52,48,86,.05),0 2px 3px rgba(52,48,86,.045),
      0 10px 18px rgba(52,48,86,.05),0 30px 48px rgba(52,48,86,.05)}
/* o fio da jornada sai do ::before do cf-fala (ocupado pelo balão) e o
     rabicho ganha as DUAS camadas nos pseudos livres do palco */
#recursos .cf-item+.cf-item .cf-fala::before{display:none}
.m-palco{position:relative;height:118px;margin:0 0 14px;
    background:radial-gradient(50% 9px at 62px calc(100% - 4px),rgba(52,48,86,.28),transparent 72%)}
.m-palco::before,.m-palco::after{content:"";position:absolute;
    clip-path:polygon(0 0,100% 0,24% 100%)}
.m-palco::before{left:20%;top:-1px;width:34px;height:22px;background:#e5e1d8}
.m-palco::after{left:calc(20% + 2px);top:-1px;width:30px;height:18px;background:var(--white)}
.m-halo{position:absolute;left:-10px;top:6px;width:260px;height:120px;z-index:0;
    pointer-events:none;opacity:0;
    background:radial-gradient(46% 48% at 30% 55%,rgba(246,168,28,.28),transparent 72%)}
.m-po{position:absolute;left:118px;top:34px;width:58px;height:46px;pointer-events:none;opacity:0;z-index:3;
    background:radial-gradient(circle 3px at 14% 66%,rgba(214,138,10,.9),transparent 65%),
      radial-gradient(circle 2.4px at 36% 26%,rgba(246,168,28,.85),transparent 65%),
      radial-gradient(circle 2px at 58% 54%,rgba(91,108,224,.8),transparent 65%),
      radial-gradient(circle 2.4px at 80% 28%,rgba(214,138,10,.85),transparent 65%),
      radial-gradient(circle 1.8px at 46% 80%,rgba(246,168,28,.8),transparent 65%)}
/* o selo "tela real" vira carimbo físico batido */
#recursos .cf-fala::after{display:inline-block;margin-top:11px;padding:3px 9px;
    border:1.5px solid rgba(91,108,224,.5);border-radius:5px;
    transform:rotate(-2.5deg);color:rgba(59,69,176,.75)}
@keyframes mHalo{0%{opacity:0}12%,100%{opacity:.8;transform:scale(1)}55%{opacity:1;transform:scale(1.05)}}
@keyframes mPo{0%{opacity:0;transform:scale(.5)}25%{opacity:1}
    100%{opacity:0;transform:scale(1.6) translateY(-12px)}}
@keyframes mCarta{0%{opacity:0;transform:translate3d(0,11px,0) scale(.96)}
    100%{opacity:1;transform:none}}
/* a VOZ DO BALÃO (correção do dono: a fonte do artefato lia melhor) —
     sans limpa e tinta escura na frase; serifada fica para a prosa longa */
#recursos .cf-frase{font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    font-size:.85rem;line-height:1.55;font-weight:500;color:var(--ink)}
@keyframes mRespira{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes mPulo{0%{transform:translateY(0) rotate(2deg)}35%{transform:translateY(-12px) scale(1.06) rotate(6deg)}
    100%{transform:translateY(0) rotate(2deg)}}
.m-po2{position:absolute;width:58px;height:46px;pointer-events:none;opacity:0;z-index:6;
    background:radial-gradient(circle 3px at 14% 66%,rgba(214,138,10,.9),transparent 65%),
      radial-gradient(circle 2.4px at 36% 26%,rgba(246,168,28,.85),transparent 65%),
      radial-gradient(circle 2px at 58% 54%,rgba(91,108,224,.8),transparent 65%),
      radial-gradient(circle 2.4px at 80% 28%,rgba(214,138,10,.85),transparent 65%);
    animation:mPo .75s ease-out both}
.m-brilho{position:absolute;left:6%;right:6%;top:0;height:54px;pointer-events:none;
    border-radius:18px;opacity:0;
    background:radial-gradient(62% 100% at 50% 0,rgba(246,168,28,.45),transparent 72%);
    animation:mBrilho .9s ease both}
@keyframes mBrilho{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
/* A TROCA no comparativo: os chips reais entram, são riscados um a um, e
     o pill "Bizzu · uma assinatura" carimba com o Sinal pulsando */
.vs-mobile-rotina{align-items:start}
.vs-mobile-rotina>i{align-self:center}
.vs-mobile-rotina .vs-pilha{display:flex;flex-wrap:wrap;margin-top:8px;gap:4px}
.vs-mobile-rotina .vs-pilha i{position:relative;font-style:normal;font-size:.6rem;
    font-weight:600;color:#9a978c;line-height:1.25;padding:2px 6px;background:var(--cream);
    border:1.5px dashed rgba(33,32,28,.2);border-radius:8px}
.vs-mobile-rotina .vs-pilha i::after{content:"";position:absolute;left:5%;right:5%;top:52%;
    height:1.5px;background:rgba(33,32,28,.55);transform:scaleX(0) rotate(-2deg);transform-origin:0 50%}
.vs-mobile-rotina .vs-h-bizzu{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
    padding:6px 10px;color:#fff;background:var(--indigo);border:2px solid var(--ink);
    border-radius:12px;box-shadow:3px 3px 0 rgba(33,32,28,.16);text-decoration:none;
    font-family:var(--font-head);font-weight:800;font-size:.82rem;line-height:1}
.vs-mobile-rotina .vs-h-bizzu small{display:inline!important;margin:0;font-size:.62rem;
    font-weight:600;text-transform:none;color:rgba(255,255,255,.88)}
.vs-mobile-rotina .vs-h-bizzu .vs-sinal{width:9px;height:9px;flex:none;border-radius:50%;
    background:var(--orange);box-shadow:0 0 0 3px rgba(246,168,28,.2)}
@keyframes mRisco{to{transform:scaleX(1) rotate(-2deg)}}
@keyframes mCarimboEl{0%{opacity:0;transform:scale(1.35)}60%{opacity:1;transform:scale(.96)}
    100%{opacity:1;transform:scale(1)}}
@keyframes mTag{0%{opacity:0;transform:rotate(-8deg) scale(1.25)}70%{opacity:1;transform:rotate(2deg) scale(.98)}
    100%{opacity:1;transform:rotate(0) scale(1)}}
@keyframes mQuica{0%{opacity:0;transform:translateY(12px) scale(.94)}70%{opacity:1;transform:translateY(-2px) scale(1.02)}
    100%{opacity:1;transform:none}}
@keyframes mVarre{0%{opacity:0;transform:translateX(-12px)}100%{opacity:1;transform:none}}
/* barra de leitura: o fio de tinta que preenche com o scroll */
@supports (animation-timeline: scroll()){
/* o fio da jornada: a costura se desenha na margem enquanto as 9 fichas
       passam, morrendo no nó do "virou estudo" */
#recursos{position:relative}
#recursos::after{content:"";position:absolute;left:5px;top:120px;bottom:190px;width:2px;
      background:repeating-linear-gradient(to bottom,var(--indigo-border) 0 4px,transparent 4px 10px);
      opacity:.55;clip-path:inset(0 0 100% 0);
      animation:mFio linear both;animation-timeline:view();animation-range:entry 30% exit 85%}
@keyframes mFio{to{clip-path:inset(0 0 0% 0)}}
}
/* papelaria: canto dobrado nos cartões das fichas + fita nos screenshots */
.m-dobra{position:absolute;top:-1px;right:-1px;width:24px;height:24px;z-index:4;pointer-events:none;
    background:linear-gradient(225deg,transparent 0 49%,rgba(33,32,28,.13) 49% 52%,#edeade 52% 100%);
    border-radius:0 18px 0 9px}
.feat-ui.foto{position:relative;overflow:visible}
.m-fita{position:absolute;top:-8px;left:50%;width:88px;height:22px;z-index:5;
    transform:translateX(-50%) rotate(-3deg);background:rgba(91,108,224,.16);
    border-left:1px dashed rgba(91,108,224,.28);border-right:1px dashed rgba(91,108,224,.28)}
/* selos: de volta ao marquee, em sussurro (logos soltos, uma linha, loop
     lento) — decisão do protótipo aprovada; ver flag sobre o destaque Shiva */
.selos-wrap{overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.selos{display:flex;grid-template-columns:none;width:max-content;--selo-gap:34px;
    gap:var(--selo-gap);animation:scrollX 32s linear infinite}
.selo-pill,.selo-pill:nth-child(5){min-height:0;padding:0;border:none;background:none;
    box-shadow:none;gap:7px;justify-content:flex-start;grid-column:auto}
.selo-pill:nth-child(n+6){display:inline-flex}
.selo-pill img,.selo-pill:nth-child(5)>img:first-child{max-width:none;width:auto;height:20px}
.selo-pill img.lg-wordmark{max-width:none;width:auto;height:17px}
.selo-pill span,.selo-pill:nth-child(5)>span{font-size:.82rem;white-space:nowrap;line-height:1}
.selo-pill span.selo-by,.selo-pill:nth-child(5)>span.selo-by{display:inline;font-size:.62rem;margin:0 -2px}
.selo-pill img.selo-mona,.selo-pill:nth-child(5)>img.selo-mona{display:block;height:13px;width:auto;max-width:none}
@media (prefers-reduced-motion:reduce){
.selos{animation:none;width:100%;flex-wrap:wrap;justify-content:center;row-gap:12px}
.m-dobra,.m-fita{opacity:.8}
}
}
/* ===== ECO DAS LISTAS MISTAS (fix 20/08) =====
   Regras que vivem no critico inline de carona num seletor de hero, mas
   tambem vestem elementos daqui. No arquivo unico elas venciam por ordem;
   com o split, a base externa passava a vencer o empate (foi o bug do
   pricing-grid em 2 colunas no celular). O eco no FIM devolve a ordem. */

@media (prefers-reduced-motion:reduce),(max-width:760px){.cf-guia{display:none}}
@media(max-width:1020px){.pricing-grid,.historia-grid{grid-template-columns:1fr}}
@media(max-width:640px){.busca-form input{width:100%;flex:1 1 100%}}
.vs-mobile,.faq-mobile-more{display:none}
@media(max-width:760px){main,footer,.busca-sec{max-width:100%;overflow-x:clip}}
@media(max-width:760px){.atmosfera,.cf-po{display:none!important}}
@media(min-width:761px){.m-palco,.m-dobra,.m-fita{display:none!important}}
@media (prefers-reduced-motion:reduce){#recursos::after{animation:none}}