/* ==========================================================================
   styles.css — O CIRCUITO (AVEDRA Academy)

   Gênero: PÁGINA DE VENDA. O DESIGN.md da AVEDRA descreve a marca
   institucional de uma consultoria B2B; ele governa cor, tipo e voz, e NÃO
   governa o gênero desta página. Henrique autorizou em 12/09, como exceção
   desta LP: cartão, sombra, raio, acento forte, contraste agressivo de
   tamanho e campo claro. A regra de uma afirmação por viewport (§5.3) não
   se aplica aqui e está declarada como exceção, não como esquecimento.

   O que continua valendo sem exceção: a paleta da §2.1, as duas famílias da
   §3.1, o campo escuro dominante da §5.2, a proibição de glow e partículas
   da §2.4/§7.4, e a proibição de laranja de fornecedor (modelagem 08 §10.6).
   ========================================================================== */

/* --- Fontes -------------------------------------------------------------
   font-display:optional em TODAS as faces, com fallback de métrica casada.
   Medido na rodada anterior e mantido: com swap sobra CLS (a manchete
   re-quebra linha depois do primeiro paint); com optional + preload dá
   0,0000. Custo declarado: numa primeira visita muito lenta a página sai
   no fallback inteira, nunca meio a meio. ------------------------------ */
@font-face { font-family:"Lora"; font-style:normal; font-weight:500;
  font-display:optional; src:url("../fonts/lora-500-latin.woff2") format("woff2"); }
@font-face { font-family:"Figtree"; font-style:normal; font-weight:400;
  font-display:optional; src:url("../fonts/figtree-400-latin.woff2") format("woff2"); }
@font-face { font-family:"Figtree"; font-style:normal; font-weight:500;
  font-display:optional; src:url("../fonts/figtree-500-latin.woff2") format("woff2"); }
@font-face { font-family:"Figtree"; font-style:normal; font-weight:600;
  font-display:optional; src:url("../fonts/figtree-600-latin.woff2") format("woff2"); }
@font-face { font-family:"Figtree"; font-style:normal; font-weight:700;
  font-display:optional; src:url("../fonts/figtree-700-latin.woff2") format("woff2"); }
@font-face { font-family:"Figtree"; font-style:normal; font-weight:800;
  font-display:optional; src:url("../fonts/figtree-800-latin.woff2") format("woff2"); }

/* Métricas medidas com fontTools na rodada anterior; sem elas o fallback
   re-quebra linha e o deslocamento de layout deixa de ser zero. */
@font-face { font-family:"Lora Fallback"; src:local("Georgia"), local("Times New Roman");
  size-adjust:104.99%; ascent-override:95.82%; descent-override:26.10%; line-gap-override:0%; }
@font-face { font-family:"Figtree Fallback"; src:local("Helvetica Neue"), local("Arial");
  size-adjust:103.6%; ascent-override:91.7%; descent-override:24.13%; line-gap-override:0%; }

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-gutter:stable; }
body {
  margin:0;
  background-color:var(--bg);
  color:var(--fg);
  font-family:var(--ff-sistema);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Malha de 48px, fio de 1px em Bone a 6% sobre Ink. É o que faz o campo
     escuro deixar de ser superfície vazia. Aplicação desta página, submetida
     como aplicação e não como pattern de marca (modelagem 08 §10.4). */
  background-image:
    linear-gradient(to right, rgba(244,240,232,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,240,232,.055) 1px, transparent 1px);
  background-size:48px 48px;
}
img { max-width:100%; height:auto; display:block; }
/* icone desenhado, nunca glifo unicode: glifo quebra no render e muda de
   largura com a fonte (exigencia da copy aprovada, secao 6). */
svg[aria-hidden="true"] { width:14px; height:14px; flex:0 0 auto; }
a { color:inherit; }
p { margin:0 0 var(--e-4); }
p:last-child { margin-bottom:0; }
ol,ul { margin:0; padding:0; list-style:none; }
strong { font-weight:700; color:var(--fg); }

/* --- Estrutura ----------------------------------------------------------- */
.wrap { width:min(100% - (var(--pad-lado) * 2), var(--maxw)); margin-inline:auto; }
.ler  { max-width:var(--maxw-ler); }
.pular {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--acento); color:var(--av-ink); padding:12px 20px;
  font-weight:700; text-decoration:none;
}
.pular:focus { left:var(--e-3); top:var(--e-3); }

:where(a,button,summary,details):focus-visible {
  outline:3px solid var(--foco); outline-offset:3px; border-radius:2px;
}

/* --- Barra fixa ---------------------------------------------------------
   A barra existe por dois motivos medidos: o preço precisa aparecer antes da
   palavra 50 (a versão reprovada punha na 163), e o mercado mantém o CTA à
   mão (11 botões na referência). ---------------------------------------- */
.barra {
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(11,11,10,.94);
  border-bottom:1px solid var(--fio);
  backdrop-filter:saturate(140%) blur(6px);
}
.barra__linha {
  display:flex; align-items:center; gap:var(--e-2);
  height:52px;
}
.barra__nome {
  font-weight:800; font-size:var(--fs-meta); letter-spacing:.14em;
  white-space:nowrap;
}
.barra__desc {
  color:var(--fg-2); font-size:var(--fs-meta); white-space:nowrap;
  padding-left:var(--e-2); border-left:1px solid var(--fio);
}
.barra__preco {
  margin-left:auto; font-weight:800; font-size:var(--fs-meta);
  color:var(--acento); white-space:nowrap;
}
.barra__selos {
  display:none; color:var(--fg-2); font-size:var(--fs-meta);
  padding-left:var(--e-2); border-left:1px solid var(--fio);
}
@media (min-width:1080px) {
  .barra__linha { height:56px; }
  .barra__selos { display:inline; }
}
@media (max-width:719px) { .barra__desc { display:none; } }

/* --- Chamada ------------------------------------------------------------
   Âmbar sólido com texto Ink: 9,13:1 medido. A referência resolve o botão
   por acabamento porque a cor dela dá 3,11:1; aqui a cor faz o trabalho E o
   acabamento entra junto (fio + deslocamento sólido, sem blur). -------- */
.cta {
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--e-2); min-height:56px; padding:16px var(--e-5);
  background:var(--acento); color:var(--av-ink);
  font-family:var(--ff-sistema); font-weight:800; font-size:var(--fs-peq);
  letter-spacing:.04em; text-decoration:none;
  border:1px solid var(--av-ink); border-radius:var(--raio);
  box-shadow:4px 4px 0 rgba(232,163,61,.30);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.cta:hover { background:var(--av-ambar-alto); transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(232,163,61,.42); }
.cta:active { transform:translate(0,0); box-shadow:2px 2px 0 rgba(232,163,61,.30); }
.cta--cheio { display:flex; width:100%; }
.cta--barra {
  /* 44px de altura e objetivo de projeto do agent, nao o minimo de 24px da
     WCAG 2.2 AA 2.5.8. Medido: antes tinha 37px. */
  min-height:44px; padding:10px 14px; font-size:var(--fs-meta);
  box-shadow:none; margin-left:var(--e-2);
}
.cta--barra:hover { transform:none; box-shadow:none; }
.cta-nota { margin:var(--e-2) 0 0; color:var(--fg-2); font-size:var(--fs-meta); }
.cta-bloco { margin-top:var(--e-6); }

/* --- Rótulos e cabeçalho de seção ---------------------------------------
   A hierarquia é o conserto principal: 76px de manchete contra 13px de
   rótulo. Na versão reprovada tudo pesava quase igual e é isso que produz
   cara de template. ---------------------------------------------------- */
.rotulo {
  display:flex; align-items:center; gap:var(--e-2);
  margin:0 0 var(--e-4);
  font-size:var(--fs-meta); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-2);
}
.rotulo__n { color:var(--acento); font-weight:800; }
.rotulo::after { content:""; flex:1 1 auto; height:1px; background:var(--fio); }

.sec { padding-block:var(--e-7); }
@media (min-width:900px) { .sec { padding-block:var(--e-8); } }
.sec__h {
  margin:0 0 var(--e-4);
  font-size:var(--fs-h2); font-weight:800; line-height:1.06;
  letter-spacing:-.025em; text-wrap:balance;
}
.sec__lead {
  max-width:var(--maxw-ler); margin:0 0 var(--e-6);
  font-size:var(--fs-lead); line-height:1.5; color:var(--fg);
}
.corpo { max-width:var(--maxw-ler); color:var(--fg-2); }
.acento { color:var(--acento); }

/* --- Faixa de respiro ---------------------------------------------------
   Modelada da referência em ESTRUTURA, não em forma: ela usa dois marquees
   de 69 e 128px entre blocos de 937 a 2.664px, e é isso que tira a página
   do metrônomo. Aqui é estática — §7.4 proíbe animação que não altera
   compreensão. --------------------------------------------------------- */
.respiro {
  border-block:1px solid var(--fio);
  background:var(--bg-2);
}
.respiro__linha {
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--e-2) var(--e-4);
  min-height:150px; padding-block:var(--e-4);
  font-size:var(--fs-meta); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-2);
}
.respiro__linha b { color:var(--acento); font-weight:800; }

/* --- Dobra --------------------------------------------------------------- */
.hero { padding-top:calc(52px + var(--e-6)); padding-bottom:var(--e-7); }
.hero__grade { display:grid; gap:var(--e-6); }
.hero__olho {
  margin:0 0 var(--e-4); color:var(--fg-2);
  font-size:var(--fs-peq); line-height:1.45;
}
.hero__h1 {
  margin:0 0 var(--e-4);
  font-size:var(--fs-h1); font-weight:800; line-height:1.01;
  letter-spacing:-.032em; text-wrap:balance;
}
.hero__sub {
  max-width:34rem; margin:0 0 var(--e-4);
  font-size:var(--fs-lead); line-height:1.5; color:var(--fg);
}
/* Pré-requisito como OFERTA. Nas 18 páginas medidas o jargão aparece 52
   vezes ofertado e 4 exigido — e as 4 exigidas eram todas nossas. */
.hero__compat {
  max-width:34rem; margin:0 0 var(--e-5); padding:var(--e-3) var(--e-4);
  border:1px solid var(--fio-acento); border-radius:var(--raio);
  background:var(--acento-fraco);
  font-size:var(--fs-peq); line-height:1.5; color:var(--fg);
}
.hero__prova {
  margin:var(--e-5) 0 0; padding-top:var(--e-4);
  border-top:1px solid var(--fio);
  font-size:var(--fs-peq); color:var(--fg-2);
}
.hero__selos {
  display:flex; flex-wrap:wrap; gap:var(--e-1) var(--e-4);
  margin:var(--e-4) 0 0; font-size:var(--fs-meta); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--fg-2);
}
.hero__selos li { display:flex; align-items:center; gap:var(--e-1); }
.hero__selos svg { color:var(--acento); }
.hero__figura { justify-self:center; max-width:300px; margin:0; }
.hero__figura img { width:100%; height:auto; }

@media (min-width:900px) {
  .hero { padding-top:calc(56px + var(--e-7)); padding-bottom:var(--e-8); }
  .hero__grade { grid-template-columns:minmax(0,1fr) 420px; align-items:center; gap:var(--e-6); }
  .hero__figura { max-width:420px; justify-self:end; }
}

/* --- Dor: três frases reais, em escada ----------------------------------
   Lora entra aqui e SÓ aqui: DESIGN §3.1 restringe a família a uma frase
   humana curta. Três frases escritas por pessoas reais é exatamente isso. */
.escada { display:grid; gap:var(--e-5); max-width:860px; }
.frase {
  padding-left:var(--e-4);
  border-left:2px solid var(--fio-acento);
}
.frase blockquote {
  margin:0 0 var(--e-2);
  font-family:var(--ff-editorial); font-weight:500;
  font-size:var(--fs-h3); line-height:1.45; color:var(--fg);
}
.frase figcaption { font-size:var(--fs-meta); color:var(--fg-2); letter-spacing:.02em; }
.frase figcaption b { color:var(--fg); font-weight:600; }
@media (min-width:900px) {
  .frase--b { margin-left:var(--e-7); }
  .frase--c { margin-left:calc(var(--e-7) * 2); }
}
.fecho-secao {
  max-width:var(--maxw-ler); margin-top:var(--e-6);
  font-size:var(--fs-lead); line-height:1.5; color:var(--fg);
}

/* --- Mecanismo: trilho, não mosaico de cards ---------------------------
   §5.3 manda lista longa virar faixa operacional, "não mosaicos de cards".
   O trilho é o próprio argumento: as etapas se chamam entre si. ------- */
.trilho { position:relative; display:grid; gap:var(--e-5); max-width:860px; }
.trilho::before {
  content:""; position:absolute; left:15px; top:10px; bottom:10px;
  width:1px; background:linear-gradient(to bottom, var(--fio-acento), var(--fio));
}
.passo { position:relative; display:grid; grid-template-columns:32px 1fr; gap:var(--e-3); }
.passo__n {
  position:relative; z-index:1;
  width:31px; height:31px; display:grid; place-items:center;
  background:var(--bg); border:1px solid var(--fio-acento); border-radius:var(--raio);
  font-size:var(--fs-meta); font-weight:800; color:var(--acento);
}
.passo__t { margin:0; font-size:var(--fs-body); line-height:1.55; color:var(--fg-2); padding-top:3px; }
.passo__t b { display:block; font-weight:700; font-size:var(--fs-h3); color:var(--fg); line-height:1.3; margin-bottom:4px; }
@media (min-width:900px) {
  .passo { grid-template-columns:32px minmax(0,1fr); gap:var(--e-4); }
  .passo__t b { display:inline; font-size:inherit; margin:0; }
}

/* --- Artefato: matéria, e o buraco declarado quando ela não existe ------ */
.artefato {
  margin-top:var(--e-6);
  border:1px solid var(--fio); border-radius:var(--raio-g);
  background:var(--bg-2); overflow:hidden;
}
.artefato__cab {
  display:flex; flex-wrap:wrap; gap:var(--e-1) var(--e-3);
  align-items:center; padding:var(--e-2) var(--e-3);
  border-bottom:1px solid var(--fio);
  font-size:var(--fs-meta); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-2);
}
.artefato__cab b { color:var(--acento); font-weight:800; }
.artefato img { width:100%; height:auto; }
/* Slot ainda vazio: dimensionado, nomeado e visivelmente pendente. Não é
   decoração e não vai ser preenchido por conta própria. */
.artefato--slot .artefato__area {
  display:grid; place-items:center; gap:var(--e-2);
  aspect-ratio:1180 / 300; padding:var(--e-4);
  border:1px dashed var(--fio-forte); margin:var(--e-3);
  text-align:center; color:var(--fg-2); font-size:var(--fs-meta);
  letter-spacing:.06em; text-transform:uppercase;
}
.artefato--slot .artefato__area b { color:var(--acento); font-weight:800; }
.artefato__cap {
  padding:var(--e-2) var(--e-3); border-top:1px solid var(--fio);
  font-size:var(--fs-meta); color:var(--fg-2);
}

/* --- Ficha de entrega: 11 linhas com fio, não 11 cards ------------------ */
.ficha { border-top:1px solid var(--fio); max-width:860px; }
.ficha__l {
  display:grid; grid-template-columns:14px 1fr; gap:var(--e-2);
  padding:var(--e-3) 0; border-bottom:1px solid var(--fio);
}
.ficha__l svg { margin-top:6px; color:var(--acento); }
.ficha__l b { font-weight:700; color:var(--fg); }
.ficha__l b::after { content:" · "; color:var(--acento); font-weight:700; }
.ficha__txt > span { color:var(--fg-2); }
@media (min-width:760px) {
  /* no desktop a linha vira 3 colunas: o wrapper some do fluxo e nome e
     beneficio alinham em grade. No mobile ele fica, e os dois correm na
     mesma linha em vez de empilhar. */
  .ficha__txt { display:contents; }
  .ficha__l { grid-template-columns:14px 250px 1fr; gap:var(--e-4); align-items:baseline; }
  .ficha__l b::after { content:none; }
}
.nota-fonte {
  max-width:var(--maxw-ler); margin-top:var(--e-4);
  font-size:var(--fs-meta); line-height:1.55; color:var(--fg-2);
}
.junto { margin-top:var(--e-6); max-width:860px; }
.junto__t { margin:0 0 var(--e-3); font-size:var(--fs-meta); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--acento); }
.junto ul { display:grid; gap:var(--e-2); }
.junto li { padding-left:var(--e-3); border-left:1px solid var(--fio-acento); color:var(--fg-2); }

details.tecnica { margin-top:var(--e-5); border-top:1px solid var(--fio); max-width:860px; }
details.tecnica > summary {
  list-style:none; cursor:pointer; padding:var(--e-3) 0;
  font-size:var(--fs-meta); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-2);
}
details.tecnica > summary::-webkit-details-marker { display:none; }
details.tecnica > summary::after { content:" +"; color:var(--acento); font-weight:800; }
details.tecnica[open] > summary::after { content:" −"; }
details.tecnica > summary:hover { color:var(--fg); }
.tecnica__c { padding-bottom:var(--e-4); color:var(--fg-2); font-size:var(--fs-peq); max-width:var(--maxw-ler); }

/* --- Prova ------------------------------------------------------------- */
.lacuna {
  max-width:860px; margin-top:var(--e-6); padding:var(--e-4);
  border:1px solid var(--fio); border-left:3px solid var(--fio-forte);
  border-radius:var(--raio); background:var(--bg-2); color:var(--fg-2);
}
.lacuna b { color:var(--fg); }
.tres { display:grid; gap:var(--e-4); margin-top:var(--e-5); max-width:860px; }
@media (min-width:760px) { .tres { grid-template-columns:repeat(3,1fr); } }
.tres li {
  padding-top:var(--e-3); border-top:1px solid var(--fio-acento);
  font-size:var(--fs-peq); color:var(--fg-2);
}

/* --- Oferta: a peça central ---------------------------------------------
   Cartão, sombra dura, raio e acento forte entram aqui dentro da exceção
   autorizada. É o único objeto da página com sombra âmbar: o peso é do
   momento da decisão, não de todo bloco. ------------------------------ */
.oferta { background:var(--bg-2); border-block:1px solid var(--fio); }
/* Coluna unica e centrada: e a unica secao da pagina que abandona o
   alinhamento a esquerda, e a quebra e deliberada — e o momento da decisao. */
.oferta__grade { display:grid; gap:var(--e-6); justify-items:center; text-align:center; }
.oferta__topo { max-width:760px; }
.oferta-caixa { width:100%; max-width:540px; text-align:left; }
.oferta-caixa {
  background:var(--bg); border:1px solid var(--fio-forte); border-radius:var(--raio-g);
  box-shadow:var(--sombra);
  padding:var(--e-5) var(--e-4);
}
@media (min-width:560px) { .oferta-caixa { padding:var(--e-6) var(--e-5); } }
.ancora { margin:0 0 var(--e-1); font-size:var(--fs-peq); color:var(--fg); }
.ancora b { color:var(--fg); font-weight:700; }
.ancora-nota { margin:0 0 var(--e-5); font-size:var(--fs-meta); line-height:1.5; color:var(--fg-2); }
.preco {
  margin:0; font-size:var(--fs-preco); font-weight:800; line-height:.92;
  letter-spacing:-.04em; color:var(--acento);
}
.preco-sub { margin:var(--e-2) 0 var(--e-5); font-size:var(--fs-peq); color:var(--fg-2); }
.incluso__t {
  margin:0 0 var(--e-2); padding-top:var(--e-4); border-top:1px solid var(--fio);
  font-size:var(--fs-meta); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-2);
}
.incluso { display:grid; gap:6px; margin:0 0 var(--e-5); }
.incluso li { display:grid; grid-template-columns:14px 1fr; gap:var(--e-2); font-size:var(--fs-peq); color:var(--fg); }
.incluso svg { width:14px; height:14px; margin-top:5px; color:var(--acento); }
.bonus-caixa {
  padding:var(--e-3); margin-bottom:var(--e-2);
  border:1px dashed var(--fio-acento); border-radius:var(--raio);
  font-size:var(--fs-peq); color:var(--fg-2);
}
.bonus-caixa b { display:block; color:var(--acento); font-weight:800;
  font-size:var(--fs-meta); letter-spacing:.08em; text-transform:uppercase; margin-bottom:2px; }
.confira {
  margin:var(--e-5) 0 var(--e-4); padding:var(--e-3);
  border:1px solid var(--fio); border-radius:var(--raio);
  font-size:var(--fs-meta); line-height:1.55; color:var(--fg-2);
}
.confira b { color:var(--fg); }
.reforco { margin:var(--e-3) 0 0; font-size:var(--fs-meta); line-height:1.55; color:var(--fg-2); }
.selos-pag {
  display:flex; flex-wrap:wrap; gap:var(--e-1) var(--e-3);
  margin-top:var(--e-4); padding-top:var(--e-3); border-top:1px solid var(--fio);
  font-size:var(--fs-meta); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-2);
}
.selos-pag li { display:flex; align-items:center; gap:6px; }
.selos-pag svg { width:13px; height:13px; color:var(--acento); }

/* --- Quem é / quem não é ------------------------------------------------- */
.duas { display:grid; gap:var(--e-6); max-width:960px; }
@media (min-width:760px) { .duas { grid-template-columns:1fr 1fr; gap:var(--e-7); } }
.duas h3 {
  margin:0 0 var(--e-3); padding-bottom:var(--e-2);
  border-bottom:1px solid var(--fio);
  font-size:var(--fs-meta); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.duas--sim h3 { color:var(--acento); }
.duas--nao h3 { color:var(--fg-2); }
.duas ul { display:grid; gap:var(--e-3); }
.duas li { display:grid; grid-template-columns:14px 1fr; gap:var(--e-2); color:var(--fg-2); font-size:var(--fs-peq); }
.duas svg { width:14px; height:14px; margin-top:5px; }
.duas--sim svg { color:var(--acento); }
.duas--nao svg { color:var(--av-graphite); }

/* --- Garantia: a inversão de campo -------------------------------------
   Somos campo escuro; a quebra é clara. A referência faz o inverso pelo
   mesmo motivo estrutural (modelagem 08 §9.4). ------------------------ */
.garantia { background:var(--bg-claro); color:var(--fg-claro); }
.garantia .rotulo { color:var(--fg-2-claro); }
.garantia .rotulo::after { background:var(--fio-claro); }
.garantia .rotulo__n { color:var(--av-ink); }
.garantia__grade { display:grid; gap:var(--e-5); align-items:start; }
@media (min-width:860px) { .garantia__grade { grid-template-columns:200px minmax(0,1fr); gap:var(--e-7); } }
.garantia__nums { display:flex; gap:var(--e-5); }
@media (min-width:860px) { .garantia__nums { display:grid; gap:var(--e-4); } }
.garantia__n { font-size:var(--fs-num); font-weight:800; line-height:1; letter-spacing:-.04em; }
.garantia__n span { display:block; font-size:var(--fs-meta); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--fg-2-claro); margin-top:6px; }
.garantia__h { margin:0 0 var(--e-4); font-size:var(--fs-h2); font-weight:800;
  line-height:1.06; letter-spacing:-.025em; }
.garantia p { color:var(--fg-2-claro); max-width:var(--maxw-ler); }

/* --- FAQ ----------------------------------------------------------------- */
.faq { max-width:860px; border-top:1px solid var(--fio); }
.faq details { border-bottom:1px solid var(--fio); }
.faq summary {
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:28px 1fr 20px; gap:var(--e-2);
  padding:var(--e-4) 0; font-size:var(--fs-h3); font-weight:700; color:var(--fg);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary i {
  font-style:normal; font-size:var(--fs-meta); font-weight:800;
  color:var(--acento); padding-top:6px;
}
.faq summary em { font-style:normal; }
.faq summary u { text-decoration:none; color:var(--acento); font-weight:800; text-align:right; }
.faq details[open] summary u::before { content:"−"; }
.faq summary u::before { content:"+"; }
.faq__r { padding:0 0 var(--e-4) 36px; color:var(--fg-2); max-width:var(--maxw-ler); }

/* --- Fechamento e rodapé -------------------------------------------------- */
.fecho { text-align:left; }
.fecho__h { margin:0 0 var(--e-4); font-size:var(--fs-h2); font-weight:800;
  line-height:1.06; letter-spacing:-.025em; text-wrap:balance; max-width:20ch; }
.rodape { border-top:1px solid var(--fio); padding-block:var(--e-6); color:var(--fg-2); font-size:var(--fs-meta); }
.rodape p { margin:0 0 var(--e-2); }
.rodape a { color:var(--fg-2); display:inline-block; padding:14px 8px; margin:-14px 0; }
.selo-slot {
  display:inline-block; margin-top:var(--e-3); padding:var(--e-2) var(--e-3);
  border:1px dashed var(--fio-forte); border-radius:var(--raio);
  font-size:var(--fs-meta); color:var(--acento); font-weight:700;
}
.selo-slot span { display:block; color:var(--fg-2); font-weight:400; }

/* --- Motion: rede de proteção antes do efeito ---------------------------
   Regra 4 e 5 das promovidas: conteúdo legível por padrão; hero e LCP nunca
   entram escondidos. Só o que está ABAIXO da dobra recebe reveal, e mesmo
   assim só quando o JS marcou a raiz. ---------------------------------- */
.js-motion .reveal:not(.is-visivel):not(.is-liberado) { opacity:.001; transform:translateY(14px); }
.js-motion .reveal { transition:opacity .32s var(--ease), transform .32s var(--ease); }
.js-motion .reveal.is-visivel, .js-motion .reveal.is-liberado { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  .cta:hover { transform:none; }
}