/* =====================================================================
   PLAYBOOK IMOBILIARIO - style.css (unico CSS do site)
   Tema claro (branco + preto + azul da marca) em todas as paginas.
   Tokens no :root, nenhum hex solto fora desta camada.
   Decisao Carlos 15/07/2026: site claro; simulacao no padrao Google
   Sheets (branco/cinza/azul; verde so no selo do Sheets).
   ===================================================================== */

/* ---------- FONTE (Inter, auto-hospedada, variavel latin) ----------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- TOKENS DE MARCA (fixos) --------------------------------- */
:root {
  --preto:       #0D0F12;
  --branco:      #FFFFFF;
  --cinza:       #9CA3AF;
  --azul:        #2563EB;
  --azul-hover:  #1D4FD7;
  --azul-fraco:  #E8F0FE;   /* selecao/realce azul claro (padrao Sheets) */
  --alerta:      #DC2626;

  /* Neutros do tema claro */
  --papel:       #FFFFFF;   /* fundo */
  --elev:        #F7F8FA;   /* superficies elevadas / celulas alt */
  --linha:       #E4E7EC;   /* bordas e grade */
  --grafite:     #0D0F12;   /* texto principal */
  --cinza-2:     #4B5563;   /* texto secundario (AA sobre branco ~7.5:1) */
  --sheets-verde:#188038;   /* EXCLUSIVO do selo Google Sheets */

  /* Tipo: escala modular 1.25, base 16 */
  --texto-xs:  0.8rem;  --texto-sm: 1rem;   --texto-md: 1.25rem;
  --texto-lg:  1.563rem; --texto-xl: 2.441rem; --texto-2xl: 3.052rem;
  --h1-fluido: clamp(2.2rem, 1.3rem + 4.4vw, 3.6rem);
  --h2-fluido: clamp(1.6rem, 1.15rem + 2.1vw, 2.5rem);

  /* Espaco: grid 8pt */
  --esp-1: 0.5rem; --esp-2: 1rem; --esp-3: 1.5rem; --esp-4: 2rem;
  --esp-6: 3rem; --esp-8: 4rem; --esp-12: 6rem;

  /* Forma */
  --raio: 8px; --raio-card: 12px; --container: 1100px; --linha-max: 65ch;
  --sombra: 0 1px 2px rgba(13,15,18,.06), 0 8px 24px rgba(13,15,18,.06);
  --sombra-forte: 0 2px 6px rgba(13,15,18,.08), 0 16px 40px rgba(13,15,18,.10);

  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --peso-regular: 400; --peso-bold: 700; --peso-black: 800; --transicao: 150ms ease;
}

/* ---------- RESET --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--grafite);
  font-family: var(--fonte);
  font-weight: var(--peso-regular);
  font-size: var(--texto-sm);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-hover); }
ul, ol { margin: 0; padding: 0; }

/* ---------- TIPOGRAFIA ---------------------------------------------- */
h1, h2, h3 { margin: 0; font-weight: var(--peso-black); letter-spacing: -0.03em; line-height: 1.04; color: var(--grafite); }
h1 { font-size: var(--h1-fluido); }
h2 { font-size: var(--h2-fluido); letter-spacing: -0.025em; line-height: 1.08; }
h3 { font-size: var(--texto-md); letter-spacing: -0.02em; line-height: 1.2; }

/* marca-texto (destaque de palavra-chave, estilo inlead, em azul da marca) */
.marca {
  background: var(--azul); color: var(--branco);
  padding: 0.02em 0.22em; border-radius: 8px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  display: inline-block; transform: rotate(-1.5deg);
}
p { margin: 0; max-width: var(--linha-max); }
.kicker { font-size: var(--texto-xs); font-weight: var(--peso-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--azul); }
.lead { font-size: clamp(1.05rem, 1rem + 0.6vw, 1.25rem); color: var(--cinza-2); max-width: var(--linha-max); }
.acento { color: var(--azul); }
.nao-quebra { white-space: nowrap; }

/* ---------- LAYOUT -------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
section { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }

/* ---------- BOTAO --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-1);
  font-family: inherit; font-size: var(--texto-sm); font-weight: var(--peso-bold); line-height: 1.2;
  padding: var(--esp-2) var(--esp-4); border: 0; border-radius: var(--raio);
  cursor: pointer; text-align: center; transition: background var(--transicao), transform var(--transicao); max-width: 100%;
}
.btn-primario { background: var(--azul); color: var(--branco); }
.btn-primario:hover { background: var(--azul-hover); color: var(--branco); }
.btn-primario:active { transform: translateY(1px); }
.btn-primario:focus-visible { outline: 2px solid var(--azul-hover); outline-offset: 3px; }
.btn--sm { padding: var(--esp-1) var(--esp-2); font-size: var(--texto-xs); }

/* CTA com micro-animacao (respiracao + seta), sem glow/gradiente.
   Vale para todo CTA grande (exclui o pequeno do header). */
.seta { display: inline-block; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .btn-primario:not(.btn--sm) { animation: cta-respira 2.8s ease-in-out infinite; }
  .btn-primario:not(.btn--sm):hover { animation-play-state: paused; }
  .seta { animation: cta-seta 1.4s ease-in-out infinite; }
}
@keyframes cta-respira { 0%,100% { transform: scale(1); } 50% { transform: scale(1.022); } }
@keyframes cta-seta { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* ---------- HEADER --------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--linha);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); padding-block: var(--esp-2); }
.site-header .logo-icone { height: 34px; width: auto; }

/* Barra de progresso de leitura (30/07). A pagina e longa; sem nocao de fim
   a pessoa abandona no meio sem saber quanto faltava. Fica na borda de baixo
   do header, sem ocupar altura propria (position:absolute) -> CLS zero. */
.progresso {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--azul); transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .progresso { transition: transform 120ms linear; }
}

/* ---------- HERO ----------------------------------------------------- */
.hero { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
.hero h1 { margin-top: var(--esp-2); overflow-wrap: break-word; }
.hero .lead { margin-top: var(--esp-3); }
.hero__cta { margin-top: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-2); align-items: flex-start; }
.hero__garantia { font-size: var(--texto-xs); color: var(--cinza-2); }
.hero__visual { display: flex; justify-content: center; min-width: 0; }

/* hero A: documentos + tarja */
.docs { position: relative; width: 100%; max-width: 380px; }
.doc { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); height: 150px; padding: var(--esp-2); box-shadow: var(--sombra); }
.doc + .doc { margin-top: var(--esp-2); }
.doc__linha { height: 8px; background: var(--linha); border-radius: 999px; margin-bottom: 10px; }
.doc__linha.curta { width: 55%; }
.hero-a .tarja { position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%) rotate(-5deg); }

/* hero C: video institucional em loop, com botao proprio de som
   (sem os controles nativos do navegador por cima do video) */
.hero__video { position: relative; width: 100%; max-width: 300px; margin-inline: auto; border-radius: var(--raio-card); overflow: hidden; box-shadow: var(--sombra-forte); }
/* O institucional saiu do hero e virou secao propria depois da oferta (30/07). */
.institucional .hero__video { max-width: 280px; }
/* aspect-ratio explicito (30/07): sem isto o <video> nasce com altura de
   placeholder e so assume a altura real quando os metadados chegam, empurrando
   a pagina inteira pra baixo. Medido: 0 -> 533px, e no hero, ou seja, acima da
   dobra. O arquivo e 720x1280. Mesma familia de armadilha de CLS documentada
   em quiz-v3-arte-e-performance. */
.hero__video video { width: 100%; height: auto; display: block; aspect-ratio: 720 / 1280; }
.hero__video-som {
  position: absolute; right: var(--esp-2); bottom: var(--esp-2); z-index: 1;
  width: 44px; height: 44px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--preto) 55%, transparent); color: var(--branco);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--transicao);
}
.hero__video-som:hover { background: color-mix(in srgb, var(--preto) 72%, transparent); }
.hero__video-som:focus-visible { outline: 2px solid var(--branco); outline-offset: 2px; }
.hero__video-som svg { width: 20px; height: 20px; }
.hero__video-som .icone-som-on { display: none; }
.hero__video.tem-som .icone-som-off { display: none; }
.hero__video.tem-som .icone-som-on { display: block; }

/* ---------- BLOCO GENERICO ------------------------------------------- */
/* Densidade das LPs de campanha no mobile (30/07). Escopo em body.lp de
   proposito: as 11 secoes gastavam 96px de respiro cada uma, 1.056px so de
   padding numa pagina que ja era longa demais pro preco ser visto. As outras
   28 paginas do site ficam como estao. */
@media (max-width: 767px) {
  .lp main > section { padding-block: 2.25rem; }
  .lp .hero { padding-block: 2.25rem 2rem; }
  .lp .bloco__intro { margin-top: var(--esp-1); }
}
.bloco .kicker { display: block; margin-bottom: var(--esp-2); }
.bloco > .container > h2 { max-width: var(--linha-max); }
.bloco__intro { margin-top: var(--esp-2); color: var(--cinza-2); }
.bloco--superficie { background: var(--elev); border-block: 1px solid var(--linha); }
.bloco--azul { background: var(--azul); }

/* =====================================================================
   CARD DE INTERFACE (resumo do produto) - tema claro
   ===================================================================== */
.card-checklist {
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-card);
  padding: var(--esp-3); width: 100%; max-width: 420px; font-size: var(--texto-sm);
  color: var(--cinza-2); box-shadow: var(--sombra);
}
.card-checklist__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-2); margin-bottom: var(--esp-2); }
.card-checklist__titulo { font-size: var(--texto-xs); font-weight: var(--peso-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cinza-2); }
.card-checklist__contador { font-size: var(--texto-md); font-weight: var(--peso-bold); color: var(--grafite); }
.card-checklist__contador span { color: var(--cinza-2); font-size: var(--texto-sm); }
.barra { height: 8px; background: var(--linha); border-radius: 999px; overflow: hidden; margin-bottom: var(--esp-3); }
.barra__preenchida { height: 100%; background: var(--azul); border-radius: 999px; transition: width 500ms ease; }
.card-checklist__acao { background: var(--azul-fraco); border: 1px solid var(--azul); border-radius: var(--raio); padding: var(--esp-2); margin-bottom: var(--esp-3); }
.card-checklist__acao-rotulo { font-size: var(--texto-xs); font-weight: var(--peso-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--azul); display: block; margin-bottom: 4px; }
.card-checklist__acao-texto { color: var(--grafite); }
.etapas { list-style: none; }
.etapas li { display: flex; align-items: center; gap: var(--esp-2); padding-block: var(--esp-1); border-top: 1px solid var(--linha); color: var(--cinza-2); }
.etapas li:first-child { border-top: 0; }
.etapas li.feito { color: var(--grafite); }
.check { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; }
.check--ok { background: var(--azul); color: var(--branco); }
.check--vazio { border: 1px solid var(--cinza); background: transparent; }
.check--alerta { background: var(--alerta); color: var(--branco); }

/* animacao de entrada do card + pulso do alerta */
@keyframes anim-barra { from { width: 0; } }
@keyframes anim-item { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes anim-pulso { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: no-preference) {
  .card-checklist--animado .barra__preenchida { animation: anim-barra 1.2s ease-out .3s backwards; }
  .card-checklist--animado .etapas li:nth-child(1) { animation: anim-item .45s ease-out .9s backwards; }
  .card-checklist--animado .etapas li:nth-child(2) { animation: anim-item .45s ease-out 1.3s backwards; }
  .card-checklist--animado .etapas li:nth-child(3) { animation: anim-item .45s ease-out 1.7s backwards; }
  .card-checklist--animado .etapas li:nth-child(4) { animation: anim-item .45s ease-out 2.1s backwards; }
  .card-checklist--animado .check--alerta { animation: anim-pulso 2.4s ease-in-out 2.8s infinite; }
}

/* =====================================================================
   SIMULACAO DA PLANILHA - padrao Google Sheets (interativa)
   ===================================================================== */
.sim-wrap { max-width: 640px; margin-inline: auto; }
.sim-popup-row { display: flex; justify-content: flex-end; padding-right: 14px; margin-bottom: -10px; position: relative; z-index: 3; }
.sheet {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-forte);
  width: 100%;
  overflow: hidden;
}
.sheet__bar { display: flex; align-items: center; gap: var(--esp-1); padding: 10px var(--esp-2); border-bottom: 1px solid var(--linha); background: var(--elev); }
.sheet__logo { flex: 0 0 auto; width: 20px; height: 20px; display: block; }
.sheet__nome { font-size: var(--texto-xs); color: var(--cinza-2); font-weight: var(--peso-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet__marca { margin-left: auto; font-size: 0.7rem; color: var(--sheets-verde); font-weight: var(--peso-bold); white-space: nowrap; }

.sheet__resumo { display: grid; gap: var(--esp-2); padding: var(--esp-2) var(--esp-3); border-bottom: 1px solid var(--linha); }
.sheet__prog { display: flex; align-items: center; gap: var(--esp-2); }
.sheet__prog-num { font-weight: var(--peso-bold); color: var(--grafite); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet__prog .barra { flex: 1; margin: 0; }
.sheet__acao { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; color: var(--grafite); max-width: none; }
.sheet__acao-rot { font-size: var(--texto-xs); font-weight: var(--peso-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--azul); }
[data-sim-next] { font-weight: var(--peso-bold); }

.sheet__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sheet__grid { border-collapse: collapse; width: 100%; min-width: 460px; font-size: var(--texto-sm); }
.sheet__grid th, .sheet__grid td { border: 1px solid var(--linha); padding: 10px 12px; text-align: left; vertical-align: middle; }
.sheet__grid thead th { background: var(--elev); color: var(--cinza-2); font-size: var(--texto-xs); font-weight: var(--peso-bold); letter-spacing: 0.04em; text-transform: uppercase; position: sticky; top: 0; }
.sheet__rownum { background: var(--elev); color: var(--cinza-2); text-align: center; width: 34px; font-variant-numeric: tabular-nums; font-size: var(--texto-xs); }
.sheet__grid tbody tr { transition: background var(--transicao); }
.sheet__grid tbody tr:hover { background: var(--azul-fraco); }
.sheet__grid tbody tr.is-done { background: color-mix(in srgb, var(--azul-fraco) 55%, var(--branco)); }
.sheet__grid tbody tr.is-done [data-sim-item] { color: var(--cinza-2); }
.sheet__item { color: var(--grafite); }
.sheet__check { width: 52px; text-align: center; }
.sheet__check input { width: 24px; height: 24px; accent-color: var(--azul); cursor: pointer; margin: 0; }
.status { display: inline-block; font-size: var(--texto-xs); font-weight: var(--peso-bold); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.status[data-state="ok"] { background: var(--azul-fraco); color: var(--azul); }
.status[data-state="pend"] { background: var(--elev); color: var(--cinza-2); border: 1px solid var(--linha); }

/* balao "sem mensalidade": flui acima do widget, sem corte */
.sheet__popup {
  position: relative;
  display: inline-block;
  background: var(--grafite); color: var(--branco);
  font-size: var(--texto-xs); font-weight: var(--peso-bold);
  padding: 6px 14px; border-radius: 999px; box-shadow: var(--sombra);
  max-width: 100%;
}
.sheet__popup::after { content: ""; position: absolute; bottom: -4px; right: 20px; width: 9px; height: 9px; background: var(--grafite); transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .sheet__popup { animation: pop-flutua 3s ease-in-out infinite; }
}
@keyframes pop-flutua { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (max-width: 479px) { .sheet__popup { font-size: 0.72rem; padding: 5px 10px; } .sim-popup-row { padding-right: 8px; } }

/* selecao de celula estilo Sheets + flash de reacao por acao.
   30/07: a linha inteira marca o item, entao o cursor tem que dizer isso.
   Antes: 'cursor: cell' no texto (que nao marcava nada) e 'cursor: default'
   no checkbox (a unica coisa que marcava). Estava invertido. */
.sheet__grid tbody td { cursor: pointer; }
.sheet__grid thead th { cursor: default; }
/* touch-action: sem isso o duplo toque rapido vira zoom do navegador em vez
   de dois toques, e o usuario acha que o widget travou. */
.sheet__grid { touch-action: manipulation; }
.sheet__grid td.is-sel { outline: 2px solid var(--azul); outline-offset: -2px; background: var(--azul-fraco); }
/* Feedback de toque: :hover nao dispara em touch. Foi o conserto de maior
   efeito nos cards de quiz em 28/07. */
.sheet__grid tbody tr:active { background: var(--azul-fraco); }
.sheet__grid tbody tr:active .sheet__item { color: var(--grafite); }
.sheet__grid:focus { outline: none; }
.sheet__grid:focus-visible { outline: 2px solid var(--azul-hover); outline-offset: -1px; }
@media (prefers-reduced-motion: no-preference) {
  .sheet__grid tbody tr.flash td { animation: linha-flash 0.6s ease-out; }
}
@keyframes linha-flash { from { background: var(--azul-fraco); } }
.sheet.is-complete .sheet__prog-num { color: var(--azul); }
.sim-nota { margin-top: var(--esp-2); font-size: var(--texto-xs); color: var(--cinza-2); text-align: center; }

/* A nota tinha uma instrucao so de teclado ("use as setas", "Espaco marca o
   item") servida tambem pra quem esta no celular. Dois spans, um por
   dispositivo, trocados por CSS: sem JS e sem duplicar a nota no HTML. */
.sim-nota .so-toque { display: inline; }
.sim-nota .so-teclado { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sim-nota .so-toque { display: none; }
  .sim-nota .so-teclado { display: inline; }
}

/* MOBILE: a coluna Status vivia em 370-477px num viewport de 375px, ou seja,
   invisivel. O usuario marcava o item e a etiqueta "Feito" - que e o payoff
   da demonstracao inteira - nunca aparecia. Escondendo a coluna Nº (que e
   decorativa) as tres colunas que importam cabem sem rolagem horizontal. */
@media (max-width: 560px) {
  .sheet__grid { min-width: 0; }
  .sheet__grid .sheet__rownum { display: none; }
  .sheet__grid th, .sheet__grid td { padding: 10px 8px; }
  .sheet__check { width: 44px; }
  .status { padding: 2px 8px; }
}

/* ---------- TARJA DE ALERTA (hero A) --------------------------------- */
.tarja {
  display: inline-block; background: var(--alerta); color: var(--branco);
  font-weight: var(--peso-bold); font-size: var(--texto-xs); letter-spacing: 0.18em;
  text-transform: uppercase; padding: var(--esp-1) var(--esp-3); transform: rotate(-5deg);
  box-shadow: var(--sombra); max-width: 92vw;
}

/* ---------- LISTA DE ERROS ------------------------------------------- */
.erros { list-style: none; counter-reset: erro; max-width: var(--linha-max); }
.erros li { counter-increment: erro; position: relative; padding-left: var(--esp-6); padding-block: var(--esp-2); border-top: 1px solid var(--linha); }
.erros li:first-child { border-top: 0; }
.erros li::before { content: counter(erro, decimal-leading-zero); position: absolute; left: 0; top: var(--esp-2); font-weight: var(--peso-bold); color: var(--azul); font-variant-numeric: tabular-nums; }
.erros .erro-etapa { display: block; font-weight: var(--peso-bold); color: var(--grafite); }
.erros .erro-desc { color: var(--cinza-2); }

/* MOBILE: a etapa em display:block gastava uma linha inteira por item, e os
   12 itens somavam 1.661px - 15% da pagina so nesta lista. Inline com um
   separador, recuo menor e respiro menor derruba isso quase pela metade sem
   tirar nenhum dos 12 erros, que sao o argumento da secao. */
@media (max-width: 767px) {
  .erros li { padding-left: var(--esp-4); padding-block: 0.5rem; font-size: var(--texto-xs); line-height: 1.35; }
  .erros li::before { top: 0.5rem; font-size: var(--texto-xs); }
  .erros .erro-etapa { display: inline; }
  .erros .erro-etapa::after { content: " · "; color: var(--cinza); font-weight: var(--peso-regular); }
  .erros .erro-desc { display: inline; }
}

/* ---------- FAQ ------------------------------------------------------- */
.faq { max-width: var(--linha-max); margin-inline: auto; }
.faq details { border-top: 1px solid var(--linha); padding-block: var(--esp-2); }
.faq details:last-child { border-bottom: 1px solid var(--linha); }
/* min-height 44px: o alvo de toque era 32px, e errar o alvo de um acordeao
   e a mesma frustracao silenciosa do widget (a pessoa toca, nada abre, e ela
   toca de novo). Vale pro FAQ de todas as paginas do site. */
.faq summary { cursor: pointer; list-style: none; font-weight: var(--peso-bold); color: var(--grafite); display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--azul); font-weight: var(--peso-bold); font-size: var(--texto-md); flex: 0 0 auto; }
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-resposta { color: var(--cinza-2); margin-top: var(--esp-2); }
#faq > .container { text-align: center; }
#faq > .container > h2 { max-width: var(--linha-max); margin-inline: auto; }
.faq { text-align: left; }

/* =====================================================================
   FLUXOGRAMA 12 ETAPAS (home, CSS puro)
   ===================================================================== */
.fluxo { margin-top: var(--esp-4); position: relative; }
.fluxo__radio { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.fluxo__nos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.fluxo__nos label { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.5rem 0.85rem; cursor: pointer; color: var(--cinza-2); font-size: var(--texto-xs); font-weight: var(--peso-bold); transition: border-color var(--transicao), color var(--transicao), background var(--transicao); background: var(--branco); }
.fluxo__nos label:hover { border-color: var(--azul); color: var(--grafite); }
.fluxo__num { color: var(--azul); font-variant-numeric: tabular-nums; }
.fluxo__paineis { margin-top: var(--esp-3); }
.fluxo__painel { display: none; background: var(--elev); border: 1px solid var(--linha); border-radius: var(--raio-card); padding: var(--esp-3); }
.fluxo__painel h3 { color: var(--grafite); }
.fluxo__erro { margin-top: var(--esp-2); color: var(--cinza-2); }
.fluxo__erro b { color: var(--grafite); }
.fluxo__meta { display: block; margin-top: var(--esp-2); font-size: var(--texto-xs); font-weight: var(--peso-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--azul); }
#fx1:checked ~ .fluxo__nos label[for="fx1"], #fx2:checked ~ .fluxo__nos label[for="fx2"],
#fx3:checked ~ .fluxo__nos label[for="fx3"], #fx4:checked ~ .fluxo__nos label[for="fx4"],
#fx5:checked ~ .fluxo__nos label[for="fx5"], #fx6:checked ~ .fluxo__nos label[for="fx6"],
#fx7:checked ~ .fluxo__nos label[for="fx7"], #fx8:checked ~ .fluxo__nos label[for="fx8"],
#fx9:checked ~ .fluxo__nos label[for="fx9"], #fx10:checked ~ .fluxo__nos label[for="fx10"],
#fx11:checked ~ .fluxo__nos label[for="fx11"], #fx12:checked ~ .fluxo__nos label[for="fx12"] {
  background: var(--azul); border-color: var(--azul); color: var(--branco);
}
#fx1:checked ~ .fluxo__nos label[for="fx1"] .fluxo__num, #fx2:checked ~ .fluxo__nos label[for="fx2"] .fluxo__num,
#fx3:checked ~ .fluxo__nos label[for="fx3"] .fluxo__num, #fx4:checked ~ .fluxo__nos label[for="fx4"] .fluxo__num,
#fx5:checked ~ .fluxo__nos label[for="fx5"] .fluxo__num, #fx6:checked ~ .fluxo__nos label[for="fx6"] .fluxo__num,
#fx7:checked ~ .fluxo__nos label[for="fx7"] .fluxo__num, #fx8:checked ~ .fluxo__nos label[for="fx8"] .fluxo__num,
#fx9:checked ~ .fluxo__nos label[for="fx9"] .fluxo__num, #fx10:checked ~ .fluxo__nos label[for="fx10"] .fluxo__num,
#fx11:checked ~ .fluxo__nos label[for="fx11"] .fluxo__num, #fx12:checked ~ .fluxo__nos label[for="fx12"] .fluxo__num { color: var(--branco); }
#fx1:checked ~ .fluxo__paineis .fluxo__painel--1 { display: block; }
#fx2:checked ~ .fluxo__paineis .fluxo__painel--2 { display: block; }
#fx3:checked ~ .fluxo__paineis .fluxo__painel--3 { display: block; }
#fx4:checked ~ .fluxo__paineis .fluxo__painel--4 { display: block; }
#fx5:checked ~ .fluxo__paineis .fluxo__painel--5 { display: block; }
#fx6:checked ~ .fluxo__paineis .fluxo__painel--6 { display: block; }
#fx7:checked ~ .fluxo__paineis .fluxo__painel--7 { display: block; }
#fx8:checked ~ .fluxo__paineis .fluxo__painel--8 { display: block; }
#fx9:checked ~ .fluxo__paineis .fluxo__painel--9 { display: block; }
#fx10:checked ~ .fluxo__paineis .fluxo__painel--10 { display: block; }
#fx11:checked ~ .fluxo__paineis .fluxo__painel--11 { display: block; }
#fx12:checked ~ .fluxo__paineis .fluxo__painel--12 { display: block; }

/* ---------- TILES ---------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--esp-3); margin-top: var(--esp-4); }
.tile { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-card); padding: var(--esp-3); text-align: center; box-shadow: var(--sombra); }
.tile b { display: block; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.441rem); font-weight: var(--peso-bold); color: var(--azul); letter-spacing: -0.02em; line-height: 1.1; }
.tile span { display: block; margin-top: var(--esp-1); font-size: var(--texto-xs); color: var(--cinza-2); font-weight: var(--peso-bold); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- JANELA / PAINEL (mockups LPs) - tema claro --------------- */
.janela { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-card); overflow: hidden; width: 100%; box-shadow: var(--sombra); }
.janela__barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--linha); background: var(--elev); }
.janela__ponto { width: 9px; height: 9px; border-radius: 999px; background: var(--linha); flex: 0 0 auto; }
.janela__titulo { margin-left: 6px; font-size: var(--texto-xs); color: var(--cinza-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.janela__corpo { padding: var(--esp-2); }
.janela .etapas { font-size: var(--texto-xs); }
.neg { border-top: 1px solid var(--linha); padding-block: var(--esp-1); }
.neg:first-child { border-top: 0; }
.neg__topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-2); }
.neg__nome { font-weight: var(--peso-bold); color: var(--grafite); font-size: var(--texto-xs); }
.neg__pct { color: var(--azul); font-weight: var(--peso-bold); font-size: var(--texto-xs); font-variant-numeric: tabular-nums; }
.neg .barra { height: 5px; margin: 6px 0; }
.neg__acao { font-size: var(--texto-xs); color: var(--cinza-2); }
.neg__acao b { color: var(--azul); font-weight: var(--peso-bold); letter-spacing: 0.06em; }
.neg__vencido { display: inline-block; background: var(--alerta); color: var(--branco); font-size: var(--texto-xs); font-weight: var(--peso-bold); border-radius: 4px; padding: 1px 7px; }
.prova__legenda { margin-top: var(--esp-1); font-size: var(--texto-xs); color: var(--cinza-2); }

/* ---------- FERRAMENTA ------------------------------------------------ */
.ferramenta__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; margin-top: var(--esp-4); }
.automacoes { list-style: none; }
.automacoes li { padding-block: var(--esp-2); border-top: 1px solid var(--linha); }
.automacoes li:first-child { border-top: 0; }
.automacoes b { color: var(--grafite); display: block; }
.automacoes span { color: var(--cinza-2); }

/* MOBILE: cada automacao gastava 83px porque o nome ficava numa linha e a
   descricao noutra. Inline, sao 4 linhas em vez de 8, e a lista deixa de
   competir em altura com o widget que demonstra essas mesmas 4 automacoes
   funcionando logo abaixo. */
@media (max-width: 767px) {
  .automacoes li { padding-block: 0.5rem; font-size: var(--texto-xs); line-height: 1.35; }
  .automacoes b { display: inline; }
  .automacoes b::after { content: " "; }
}
.painel-nota { margin-top: var(--esp-3); color: var(--cinza-2); }
.painel-nota b { color: var(--grafite); }

/* ---------- 12 ETAPAS lista (LPs) ------------------------------------ */
.etapas-lista { list-style: none; counter-reset: et; display: grid; gap: var(--esp-1); margin-top: var(--esp-3); }
.etapas-lista li { counter-increment: et; position: relative; padding-left: var(--esp-6); padding-block: var(--esp-1); color: var(--grafite); }
.etapas-lista li::before { content: counter(et) "."; position: absolute; left: 0; color: var(--azul); font-weight: var(--peso-bold); font-variant-numeric: tabular-nums; }

/* ---------- PROVA ---------------------------------------------------- */
.prova__grid { display: grid; gap: var(--esp-3); grid-template-columns: 1fr; margin-top: var(--esp-4); align-items: start; }
.print-real { border-radius: var(--raio-card); border: 1px solid var(--linha); width: 100%; }

/* midia: video do produto + gif */
.midia__grid { display: grid; gap: var(--esp-4); margin-top: var(--esp-4); grid-template-columns: 1fr; }
.midia { margin: 0; }
.midia__ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--elev); border: 2px dashed var(--linha); border-radius: var(--raio-card);
  color: var(--cinza-2); text-align: center; padding: var(--esp-4);
}
.midia--video .midia__ph { aspect-ratio: 16 / 9; }
.midia--gif .midia__ph { aspect-ratio: 4 / 3; }
.midia__play { width: 56px; height: 56px; border-radius: 999px; background: var(--azul); color: var(--branco); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; padding-left: 4px; }
.midia__label { font-weight: var(--peso-bold); color: var(--grafite); }
.midia__nota { font-size: var(--texto-xs); }
.midia video, .midia img { width: 100%; border-radius: var(--raio-card); border: 1px solid var(--linha); display: block; }
.midia figcaption { margin-top: var(--esp-1); }
.video-solo { max-width: 520px; margin-inline: auto; margin-top: var(--esp-4); }
/* produto.mp4 e 1080x1080. Mesmo motivo do video do hero: reservar a caixa
   antes dos metadados chegarem. */
.midia__video { width: 100%; height: auto; aspect-ratio: 1 / 1; }
@media (min-width: 768px) { .midia__grid { grid-template-columns: 1.5fr 1fr; align-items: start; } }

/* ---------- O QUE RECEBE (grade de beneficios, numero em destaque) ---- */
.recebe { list-style: none; display: grid; gap: var(--esp-2); margin-top: var(--esp-4); }
.recebe li {
  display: flex; align-items: center; gap: var(--esp-3); color: var(--grafite);
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-card);
  padding: var(--esp-3); box-shadow: var(--sombra);
}
.recebe__num, .recebe__ico {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--raio);
  background: var(--azul-fraco); color: var(--azul);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--peso-black); font-size: var(--texto-md); font-variant-numeric: tabular-nums;
}
.recebe__ico { font-size: 20px; }
@media (min-width: 768px) { .recebe { grid-template-columns: repeat(2, 1fr); } }

/* Largura reservada pro numero que anima a contagem: sem isso o "7" vira
   "72" no meio da animacao e a caixa pula. Mesma armadilha de CLS do
   contador de pergunta do quiz em 28/07. */
.recebe__num[data-contar] { min-width: 48px; }

/* MOBILE: 7 cartoes empilhados em linha custavam 1.056px. Duas colunas com o
   numero acima do texto cabem na mesma leitura em ~metade da altura. */
@media (max-width: 767px) {
  .recebe { gap: var(--esp-1); }
  .recebe li { gap: var(--esp-2); padding: 0.6rem var(--esp-2); font-size: var(--texto-xs); line-height: 1.3; }
  .recebe__num, .recebe__ico { width: 34px; height: 34px; font-size: var(--texto-sm); }
  .recebe__ico { font-size: 16px; }
  .recebe__num[data-contar] { min-width: 34px; }
}

/* ---------- TUTORIAL EM PASSOS (/obrigado/) -------------------------- */
.passos { list-style: none; padding: 0; margin: var(--esp-6) 0 0; display: grid; gap: var(--esp-8); counter-reset: passo; }
.passo { display: grid; gap: var(--esp-3); }
.passo__cabeca { display: flex; gap: var(--esp-2); align-items: baseline; }
.passo__num { flex: 0 0 auto; font-size: var(--texto-md); font-weight: var(--peso-black); color: var(--azul); font-variant-numeric: tabular-nums; line-height: 1.2; }
.passo__titulo { font-size: var(--texto-md); margin: 0; }
.passo__texto { color: var(--cinza-2); margin: var(--esp-1) 0 0; max-width: var(--linha-max); }
.passo__figura { margin: 0; }
/* Print real da tela, nunca reconstrucao: interface fake destroi a prova.
   width/height batem com o arquivo para nao gerar CLS. */
.passo__figura img { width: 100%; height: auto; display: block; border: 1px solid var(--linha); border-radius: var(--raio-card); box-shadow: var(--sombra); }
.passo__figura figcaption { margin-top: var(--esp-1); font-size: var(--texto-xs); color: var(--cinza-2); }

/* ---------- SOCORRO (deflexao de suporte) ---------------------------- */
.socorro { background: var(--elev); border: 1px solid var(--linha); border-radius: var(--raio-card); padding: var(--esp-3); margin-top: var(--esp-8); max-width: var(--linha-max); }
.socorro h3 { font-size: var(--texto-sm); margin: 0 0 var(--esp-1); }
.socorro p { color: var(--cinza-2); margin: 0; }

/* ---------- PARA QUEM ------------------------------------------------ */
.publico { display: grid; gap: var(--esp-3); margin-top: var(--esp-4); grid-template-columns: 1fr; }
.publico__col { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-card); padding: var(--esp-3); box-shadow: var(--sombra); }
.publico__col h3 { margin-bottom: var(--esp-2); }
.publico__col.sim h3 { color: var(--azul); }
.publico__col.nao h3 { color: var(--cinza-2); }
.publico__col p { color: var(--cinza-2); }

/* =====================================================================
   OFERTA (bloco de compra) - conversao
   ===================================================================== */
.oferta {
  max-width: 560px; margin-inline: auto; text-align: center;
  background: var(--branco); border: 1px solid var(--linha); border-top: 3px solid var(--azul);
  border-radius: var(--raio-card); box-shadow: var(--sombra-forte);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.oferta .kicker { display: block; }
.oferta__valor { font-size: clamp(2.6rem, 2rem + 3vw, 3.4rem); font-weight: var(--peso-bold); letter-spacing: -0.02em; margin-top: var(--esp-2); line-height: 1; }
.preco__cifra { color: var(--cinza-2); font-size: 0.42em; vertical-align: super; }
.oferta__unico { display: inline-block; font-size: var(--texto-xs); font-weight: var(--peso-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--azul); background: var(--azul-fraco); border-radius: 999px; padding: 4px 10px; vertical-align: middle; }
.oferta__sub { color: var(--cinza-2); margin: var(--esp-2) auto 0; }

/* Ancoragem de/por (decisao do Carlos, 30/07). */
.oferta__de { margin-top: var(--esp-2); font-size: var(--texto-md); color: var(--cinza-2); }
.oferta__de s { color: var(--alerta); text-decoration-thickness: 2px; font-weight: var(--peso-bold); }
.oferta__economia {
  margin: var(--esp-2) auto 0; max-width: 34ch;
  font-size: var(--texto-sm); font-weight: var(--peso-bold); color: var(--grafite);
}
.oferta__economia b { color: var(--azul); }
.oferta__conta { margin: var(--esp-2) auto 0; max-width: 40ch; font-size: var(--texto-sm); color: var(--cinza-2); }
.oferta__lista { list-style: none; display: grid; gap: var(--esp-1); margin: var(--esp-3) auto; max-width: 34ch; text-align: left; }
.oferta__lista li { display: flex; gap: var(--esp-2); align-items: flex-start; color: var(--grafite); font-size: var(--texto-sm); }
.oferta__lista li::before { content: "\2713"; color: var(--azul); font-weight: var(--peso-bold); flex: 0 0 auto; }
.oferta .btn-primario { font-size: var(--texto-md); padding: var(--esp-3) clamp(1.5rem, 6vw, 3rem); margin-top: var(--esp-2); width: 100%; max-width: 420px; }
.oferta__garantia { margin-top: var(--esp-3); font-size: var(--texto-sm); color: var(--cinza-2); }
.oferta__legal { margin: var(--esp-2) auto 0; font-size: var(--texto-xs); color: var(--cinza-2); max-width: 42ch; }

/* ---------- CTA FINAL ------------------------------------------------ */
.cta-final { text-align: center; }
.cta-final h2 { max-width: 24ch; margin-inline: auto; }
.cta-final .btn-primario { margin-top: var(--esp-4); font-size: var(--texto-md); padding: var(--esp-3) clamp(1.5rem, 5vw, 3rem); }
.cta-final .oferta__garantia { display: block; }

.centro { text-align: center; }
.centro p, .centro .lead { margin-inline: auto; }

/* ---------- REVEAL DE SECAO (30/07) ----------------------------------
   So opacity e transform. Nada aqui pode mexer em altura ou posicionamento:
   foi exatamente isso que gerou CLS 0.378 nos quizzes em 28/07. O elemento
   ocupa o espaco dele desde o primeiro quadro; o efeito e puramente visual. */
   O estado inicial escondido depende da classe .tem-ganchos, que o proprio
   ganchos.js poe no <html>. Se o arquivo nao carregar (404, CSP, rede), a
   classe nunca entra e o conteudo nasce visivel. Fazer o contrario -
   esconder por CSS e revelar por JS - deixaria a pagina de vendas em branco
   sempre que um script falhasse. */
[data-reveal] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .tem-ganchos [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 480ms ease, transform 480ms cubic-bezier(.22,.8,.28,1); }
  .tem-ganchos [data-reveal].is-visivel { opacity: 1; transform: none; }
}

/* ---------- NOTICIA: DECISAO DO STJ (30/07) --------------------------
   Bloco de citacao de uma decisao real: REsp 1.810.652/SP, 3a Turma, rel.
   min. Nancy Andrighi. O texto de decisao judicial e de dominio publico
   (Lei 9.610/98, art. 8, IV), entao a citacao literal do acordao pode.

   O cabecalho carrega STJ, e nao a marca de quem publicou: o orgao e a
   autoridade real do argumento, e a fonte fica atribuida em texto com link
   no rodape do card. Ver a nota no HTML. */
.noticia-stj__tarja {
  display: inline-block; background: var(--alerta); color: var(--branco);
  font-size: var(--texto-xs); font-weight: var(--peso-black);
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: var(--esp-1) var(--esp-3);
}
.noticia-stj__card {
  background: var(--branco); border: 1px solid var(--linha); border-top: 3px solid var(--alerta);
  border-radius: 0 0 var(--raio-card) var(--raio-card);
  padding: var(--esp-3); box-shadow: var(--sombra); max-width: 62ch;
}
.noticia-stj__topo {
  display: flex; align-items: center; gap: var(--esp-2);
  padding-bottom: var(--esp-2); border-bottom: 1px solid var(--linha); margin-bottom: var(--esp-3);
}
.noticia-stj__sigla {
  flex: 0 0 auto; font-size: var(--texto-md); font-weight: var(--peso-black);
  letter-spacing: 0.06em; color: var(--grafite);
  border: 2px solid var(--grafite); border-radius: 4px; padding: 2px 8px;
}
.noticia-stj__orgao { font-size: var(--texto-xs); color: var(--cinza-2); font-weight: var(--peso-bold); line-height: 1.3; }
.noticia-stj__titulo { font-size: var(--texto-lg); line-height: 1.2; letter-spacing: -0.02em; color: var(--grafite); }
.noticia-stj__linha { margin-top: var(--esp-2); color: var(--grafite); font-weight: var(--peso-bold); }
.noticia-stj__linha b { color: var(--alerta); }
.noticia-stj__citacao {
  margin: var(--esp-3) 0 0; padding: var(--esp-2) 0 var(--esp-2) var(--esp-3);
  border-left: 3px solid var(--azul); color: var(--cinza-2); font-size: var(--texto-sm);
}
.noticia-stj__citacao p { font-style: italic; }
.noticia-stj__citacao cite { display: block; margin-top: var(--esp-1); font-style: normal; font-size: var(--texto-xs); font-weight: var(--peso-bold); color: var(--grafite); }
.noticia-stj__fonte { margin-top: var(--esp-3); padding-top: var(--esp-2); border-top: 1px solid var(--linha); font-size: var(--texto-xs); color: var(--cinza-2); }
.noticia-stj__fonte a { color: var(--azul); }
.noticia-stj__ponte { margin-top: var(--esp-4); max-width: 62ch; }
.noticia-stj__ponte p { color: var(--grafite); font-size: var(--texto-md); font-weight: var(--peso-bold); }
.noticia-stj__ponte .destaque { color: var(--azul); }
.noticia-stj__ponte .apoio { margin-top: var(--esp-2); font-size: var(--texto-sm); font-weight: var(--peso-regular); color: var(--cinza-2); }

/* ---------- FAIXA DE CHOQUE (abertura, 30/07) ------------------------
   Bloco curto logo abaixo do hero, com a pergunta financeira. Fundo grafite
   pra cortar o ritmo da pagina e forcar a leitura. */
.faixa-choque { background: var(--grafite); color: var(--branco); padding-block: var(--esp-6); }
.faixa-choque p { max-width: 46ch; }
.faixa-choque__pergunta {
  font-size: var(--h2-fluido); font-weight: var(--peso-black); letter-spacing: -0.02em;
  line-height: 1.15; color: var(--branco);
}
.faixa-choque__valor { color: var(--branco); background: var(--alerta); padding: 0 0.3em; border-radius: 4px; white-space: nowrap; }
.faixa-choque__apoio { margin-top: var(--esp-3); color: var(--cinza); font-size: var(--texto-md); }

/* ---------- FAQ RAPIDO (2 perguntas adiantadas, 30/07) ---------------
   As duas objecoes operacionais que travam a leitura no celular saem do FAQ
   do fim e vem pra ca, logo depois da simulacao. */
.faq-rapido { display: grid; gap: var(--esp-2); margin-top: var(--esp-4); max-width: var(--linha-max); }
.faq-rapido details { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--esp-2) var(--esp-3); }
.faq-rapido summary { cursor: pointer; font-weight: var(--peso-bold); color: var(--grafite); list-style-position: inside; min-height: 44px; display: flex; align-items: center; }
.faq-rapido summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.faq-rapido .faq-resposta { margin-top: var(--esp-1); color: var(--cinza-2); font-size: var(--texto-sm); }

/* ---------- BARRA CTA FIXA (mobile) ---------------------------------- */
.cta-fixa { display: none; }
@media (max-width: 767px) {
  .cta-fixa {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: color-mix(in srgb, var(--papel) 94%, transparent);
    backdrop-filter: saturate(140%) blur(8px);
    border-top: 1px solid var(--linha); padding: 0.6rem clamp(1rem, 4vw, 2rem);
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
  }
  .cta-fixa .btn { width: 100%; }
  /* A barra ganhou o rotulo de preco acima do botao (30/07), entao cresceu de
     71px para ~96px. Este padding tem que acompanhar, senao a barra cobre o
     rodape. */
  body { padding-bottom: 104px; }
  /* O botao do header media 156x28px: abaixo do minimo de 44px de alvo de
     toque. Erra o alvo e a pessoa acha que o site nao respondeu. */
  .site-header .btn--sm { min-height: 44px; padding-inline: var(--esp-3); }
}

/* Rotulo de preco da barra fixa: o preco saiu de dentro dos botoes (decisao
   de 30/07), entao ele precisa existir em algum lugar visivel pra 100% dos
   visitantes - nao so pros 7,7% que chegam ao #preco. */
.cta-fixa__oferta {
  display: flex; align-items: baseline; justify-content: center; gap: 0.4rem;
  margin-bottom: 0.4rem; font-size: var(--texto-xs); color: var(--cinza-2);
  text-align: center; line-height: 1.2;
}
.cta-fixa__de { color: var(--alerta); text-decoration: line-through; }
.cta-fixa__por { color: var(--grafite); font-weight: var(--peso-black); font-size: var(--texto-sm); }

/* ---------- LOGO / RODAPE ------------------------------------------- */
.logo-icone { height: 52px; width: auto; }
.rodape { border-top: 1px solid var(--linha); padding-block: var(--esp-6); color: var(--cinza-2); font-size: var(--texto-xs); }
.rodape .logo-icone { height: 40px; }
.rodape a { color: var(--cinza-2); }
.rodape a:hover { color: var(--grafite); }
.rodape__links { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-2); }

/* =====================================================================
   ENTRADA NO SCROLL (CSS puro). So anima o que entra DEPOIS de sair da
   dobra (entry-crossing), e apenas em blocos marcados .revela, para nao
   prender conteudo acima da dobra em opacity 0.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .revela {
      animation: surge linear both;
      animation-timeline: view();
      animation-range: entry-crossing 0% entry-crossing 100%;
    }
  }
}
@keyframes surge { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ---------- RESPONSIVO ----------------------------------------------- */
@media (max-width: 419px) {
  .site-header .btn { font-size: 0.72rem; padding: 0.45rem 0.7rem; }
  .card-checklist { padding: var(--esp-2); }
}
@media (min-width: 480px) {
  .prova__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (min-width: 768px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; }
  .ferramenta__grid { grid-template-columns: 1fr 1fr; }
  .publico { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .prova__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ACESSIBILIDADE ------------------------------------------ */
/* ---------- PAGINAS LEGAIS ------------------------------------------
   Texto corrido. O reset zera margin de p/h2/ul, entao o espacamento
   vertical vive aqui, escopado em .legal para nao vazar no resto do site. */
.legal { max-width: var(--linha-max); }
.legal > h2 { font-size: var(--texto-md); margin-top: var(--esp-6); }
.legal > h2:first-of-type { margin-top: var(--esp-4); }
.legal p, .legal ul { margin-top: var(--esp-2); }
.legal ul { padding-left: var(--esp-3); }
.legal li { margin-top: var(--esp-1); }
.legal a { color: var(--azul); }
.legal a:hover { color: var(--azul-hover); }
.legal strong { font-weight: var(--peso-bold); }
.legal__vigencia { margin-top: var(--esp-6); padding-top: var(--esp-3);
  border-top: 1px solid var(--linha); color: var(--cinza-2); font-size: var(--texto-xs); }
.legal__identidade { margin-top: var(--esp-3); padding: var(--esp-3);
  background: var(--elev); border: 1px solid var(--linha); border-radius: var(--raio); }

/* =====================================================================
   INSTITUCIONAL (19/07/2026): navegacao, esteira, e-book, conteudo e quiz.
   Ate aqui o site tinha 1 decisao por pagina (Lei de Hick, skill 1.1).
   Com a esteira de 3 produtos isso deixou de ser possivel na home, entao
   a navegacao existe SO na home e nas paginas de conteudo. As 3 LPs de
   campanha continuam sem menu: la a regra de 1 decisao segue valendo.
   ===================================================================== */

/* --- Navegacao (so no institucional) --- */
.nav { display: none; gap: var(--esp-3); align-items: center; }
.nav a { color: var(--cinza-2); font-size: var(--texto-sm); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--grafite); }
@media (min-width: 860px) { .nav { display: flex; } }

/* Menu no celular: <details> nativo, zero JS, mesma escolha do FAQ.
   O painel ancora no HEADER e nao no <details>. Ancorado no <details>, que
   fica no meio do header, um painel de 220px estourava para fora da tela
   pela esquerda e ficava cortado no celular. Ancorado no header ele ocupa
   a largura toda e nunca vaza, em nenhuma largura de tela. */
.site-header { position: relative; }
.menu-mobile summary { list-style: none; cursor: pointer; padding: var(--esp-1);
  color: var(--grafite); font-weight: var(--peso-bold); font-size: var(--texto-sm);
  display: inline-flex; align-items: center; gap: 6px; }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile summary::after { content: "\25BE"; font-size: 0.7em; color: var(--cinza-2);
  transition: transform 150ms; }
.menu-mobile[open] summary::after { transform: rotate(180deg); }
.menu-mobile__painel { position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  background: var(--branco); border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha); box-shadow: var(--sombra);
  padding: var(--esp-2) clamp(1rem, 4vw, 2rem); display: grid; gap: 2px; }
.menu-mobile__painel a { padding: var(--esp-2) 0; color: var(--grafite);
  border-bottom: 1px solid var(--linha); }
.menu-mobile__painel a:last-child { border-bottom: 0; }
.menu-mobile__painel a:hover { color: var(--azul); }
@media (min-width: 860px) { .menu-mobile { display: none; } }

/* --- Esteira de produtos --- */
.esteira { display: grid; gap: var(--esp-3); margin-top: var(--esp-4); }
@media (min-width: 780px) { .esteira { grid-template-columns: repeat(3, 1fr); } }

.produto-card { display: flex; flex-direction: column; background: var(--branco);
  border: 1px solid var(--linha); border-radius: var(--raio-card, 12px);
  padding: var(--esp-3); }
.produto-card--destaque { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.produto-card__papel { font-size: var(--texto-xs); font-weight: var(--peso-bold);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--azul); }
.produto-card h3 { margin-top: var(--esp-1); font-size: var(--texto-md); }
.produto-card__resumo { margin-top: var(--esp-2); color: var(--cinza-2); font-size: var(--texto-sm); }
.produto-card__itens { list-style: none; margin-top: var(--esp-2); display: grid; gap: 6px; }
.produto-card__itens li { position: relative; padding-left: 18px; font-size: var(--texto-sm); color: var(--cinza-2); }
.produto-card__itens li::before { content: ""; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 999px; background: var(--azul); }
.produto-card__rodape { margin-top: auto; padding-top: var(--esp-3); }
.produto-card__preco { font-size: var(--texto-lg); font-weight: var(--peso-bold); color: var(--grafite); }
.produto-card__preco span { font-size: var(--texto-sm); color: var(--cinza-2); font-weight: 400; }
.produto-card .btn { margin-top: var(--esp-2); width: 100%; justify-content: center; }
.produto-card__link { display: inline-block; margin-top: var(--esp-2); font-size: var(--texto-sm); }

.selo { display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: var(--texto-xs); font-weight: var(--peso-bold);
  background: var(--elev); color: var(--cinza-2); border: 1px solid var(--linha); }
.selo--breve { background: var(--azul-fraco); color: var(--azul); border-color: var(--azul); }

/* --- Formulario de captacao (e-book e quiz) --- */
.form-lead { display: grid; gap: var(--esp-2); max-width: 460px; margin-top: var(--esp-3); }
.form-lead label { font-size: var(--texto-sm); font-weight: var(--peso-bold); color: var(--grafite); }
.form-lead input[type="text"],
.form-lead input[type="email"],
.form-lead input[type="tel"] {
  width: 100%; padding: var(--esp-2); font: inherit; color: var(--grafite);
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio);
}
.form-lead input:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.form-lead__campo { display: grid; gap: 6px; }
.form-lead__consent { display: flex; gap: var(--esp-1); align-items: flex-start;
  font-size: var(--texto-xs); color: var(--cinza-2); font-weight: 400; }
.form-lead__consent input { margin-top: 3px; flex: 0 0 auto; }
.form-lead__erro { color: var(--alerta); font-size: var(--texto-sm); }
.form-lead .btn { justify-content: center; }
/* Honeypot: invisivel para gente, preenchido por bot. Nao usa display:none
   porque parte dos bots ignora campo escondido assim. */
.form-lead__pote { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lead-sucesso { margin-top: var(--esp-3); padding: var(--esp-3);
  background: var(--azul-fraco); border: 1px solid var(--azul); border-radius: var(--raio); }
.lead-sucesso h3 { color: var(--grafite); }
.lead-sucesso p { margin-top: var(--esp-1); color: var(--cinza-2); }

/* --- E-book --- */
.ebook__grid { display: grid; gap: var(--esp-4); align-items: center; margin-top: var(--esp-3); }
@media (min-width: 820px) { .ebook__grid { grid-template-columns: 1.1fr 0.9fr; } }
.ebook__capa { display: flex; justify-content: center; align-items: center; }
.ebook__capa img { width: 100%; max-width: 340px; height: auto; }
.ebook__capa-kicker { font-size: var(--texto-xs); font-weight: var(--peso-bold);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--azul); }
.ebook__capa-titulo { margin-top: var(--esp-2); font-size: var(--texto-lg); line-height: 1.15; color: var(--grafite); }
.ebook__capa-sub { margin-top: var(--esp-2); color: var(--cinza-2); font-size: var(--texto-sm); }

/* --- Blog e noticias --- */
.posts { display: grid; gap: var(--esp-3); margin-top: var(--esp-4); }
@media (min-width: 720px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .posts--3 { grid-template-columns: repeat(3, 1fr); } }
.post-card { display: flex; flex-direction: column; background: var(--branco);
  border: 1px solid var(--linha); border-radius: var(--raio-card, 12px); padding: var(--esp-3); }
.post-card__meta { font-size: var(--texto-xs); color: var(--cinza-2);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--peso-bold); }
.post-card h3 { margin-top: var(--esp-1); font-size: var(--texto-md); }
.post-card h3 a { color: var(--grafite); }
.post-card h3 a:hover { color: var(--azul); }
.post-card p { margin-top: var(--esp-2); color: var(--cinza-2); font-size: var(--texto-sm); }
.post-card__link { margin-top: auto; padding-top: var(--esp-2); font-size: var(--texto-sm); }
.post-card__capa { margin: calc(var(--esp-3) * -1) calc(var(--esp-3) * -1) var(--esp-3);
  border-radius: var(--raio-card, 12px) var(--raio-card, 12px) 0 0; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--elev); }
.post-card__capa img { display: block; width: 100%; height: 100%; object-fit: cover; }

.artigo { max-width: var(--linha-max); }
.artigo h2 { margin-top: var(--esp-6); }
.artigo h3 { margin-top: var(--esp-4); }
.artigo p, .artigo ul, .artigo ol { margin-top: var(--esp-2); color: var(--cinza-2); }
.artigo ul, .artigo ol { padding-left: var(--esp-3); }
.artigo li { margin-top: 6px; }
.artigo__meta { font-size: var(--texto-xs); color: var(--cinza-2);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--peso-bold); }
.artigo__capa { margin-top: var(--esp-3); border-radius: var(--raio-card, 12px);
  overflow: hidden; border: 1px solid var(--linha); aspect-ratio: 16 / 9; background: var(--elev); }
.artigo__capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.artigo__figura { margin-top: var(--esp-4); }
.artigo__figura img { display: block; width: 100%; height: auto; border-radius: var(--raio-card, 12px);
  border: 1px solid var(--linha); }
.artigo__figura figcaption { margin-top: var(--esp-1); font-size: var(--texto-xs); color: var(--cinza-2); }
.artigo__tabela-wrap { margin-top: var(--esp-3); overflow-x: auto; }
.artigo table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: var(--texto-sm); }
.artigo th, .artigo td { text-align: left; padding: var(--esp-2); border-bottom: 1px solid var(--linha); }
.artigo th { color: var(--grafite); font-weight: var(--peso-bold); background: var(--elev); }
.artigo td { color: var(--cinza-2); }

/* --- Quiz --- */
.quiz { max-width: 620px; margin-inline: auto; }
.quiz__progresso { height: 6px; background: var(--linha); border-radius: 999px;
  overflow: hidden; margin-bottom: var(--esp-2); }
.quiz__progresso-barra { height: 100%; width: 0; background: var(--azul);
  border-radius: 999px; transition: width 300ms ease; transform-origin: center; }
.quiz__conta { display: block; height: 1.1em; margin-bottom: var(--esp-3);
  font-size: var(--texto-xs); font-weight: var(--peso-bold); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cinza-2); }
/* O contador so aparece na segunda metade do quiz, mas o espaco dele fica
   reservado o tempo todo. Com display:none ele empurrava o palco e o
   rodape 44px para baixo e para cima a cada troca de etapa -- medido em
   28/07 como 137→181→137 no topo do palco, e sozinho ja valia CLS. Por
   isso visibility e nao display. */
.quiz__conta[hidden] { display: block; visibility: hidden; }

/* PALCO. Grid de uma celula so: todos os paineis ocupam 1/1, entao dois
   paineis coexistindo na troca nao empurram um ao outro.

   O min-height nao e estetico, e o conserto do CLS. As etapas tem alturas
   muito diferentes (uma pergunta de 4 opcoes contra o pitch inteiro), e
   cada mudanca de altura do palco move tudo que vem DEPOIS dele. Medido
   em 28/07: com o palco em 487px o rodape ficava em y=672 numa janela de
   812 -- dentro da tela -- e cada troca de etapa o empurrava, somando
   CLS 1.56 no percurso completo.

   Dimensionado para o palco ocupar o resto da janela: o rodape sai da
   dobra e para de participar da conta, porque shift de elemento fora da
   viewport nao conta. O teto de 700px evita um vazio absurdo no desktop.

   svh e nao vh de proposito: com vh a caixa muda de tamanho quando a
   barra de endereco do mobile recolhe, e isso tambem e shift. */
.quiz__palco { display: grid; position: relative;
  min-height: clamp(420px, calc(100svh - 150px), 700px); }
.quiz__passo { grid-area: 1 / 1; }
.quiz__passo[hidden] { display: none; }
/* O painel que SAI sai do fluxo: para de contribuir para a altura no
   mesmo frame em que o novo entra, entao a troca custa zero layout. */
.quiz__passo.is-saindo { position: absolute; inset: 0; pointer-events: none; }

.quiz__contagem { font-size: var(--texto-xs); font-weight: var(--peso-bold);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--azul); }
.quiz__pergunta { margin-top: var(--esp-2); font-size: var(--texto-lg); line-height: 1.2; }
.quiz__ajuda { margin-top: var(--esp-2); color: var(--cinza-2); font-size: var(--texto-sm); }
.quiz__opcoes { list-style: none; display: grid; gap: var(--esp-2); margin-top: var(--esp-3); }
.quiz__opcoes.is-travada { pointer-events: none; }

.quiz__opcao { position: relative; overflow: hidden; width: 100%; text-align: left;
  font: inherit; cursor: pointer;
  padding: var(--esp-2) var(--esp-3); background: var(--branco); color: var(--grafite);
  border: 1px solid var(--linha); border-radius: var(--raio);
  transition: border-color 150ms, background 150ms, transform 100ms ease-out;
  -webkit-tap-highlight-color: transparent; }

/* ESTADO DE TOQUE. O :hover sozinho nunca dispara em touch, e era por
   isso que tocar num card nao confirmava nada -- a origem do Click
   Recurrence de 3.67-4.0 medido em 27/07. O :active pinta no frame
   seguinte ao toque, ANTES do JS rodar, que e exatamente o que o INP
   mede. O hover fica atras de (hover: hover) para nao grudar no mobile
   depois do toque. */
.quiz__opcao:active { transform: scale(.985); border-color: var(--azul); background: var(--azul-fraco); }
@media (hover: hover) {
  .quiz__opcao:hover { border-color: var(--azul); background: var(--azul-fraco); }
}
.quiz__opcao:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.quiz__opcao.is-escolhida { border-color: var(--azul); background: var(--azul-fraco);
  box-shadow: inset 0 0 0 1px var(--azul); }

/* Tique que desenha no card escolhido. */
.quiz__tique { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
  color: var(--azul); opacity: 0; transform: scale(.5); transition: opacity 120ms, transform 160ms; }
.quiz__tique svg { display: block; width: 100%; height: 100%; }
.quiz__opcao.is-escolhida .quiz__tique { opacity: 1; transform: none; }

/* Inserção condicional: a tela que responde a objeção que o lead acabou
   de declarar. Ver METODO_QUIZ-FUNNEL_01, inserção 4. */
.quiz__resposta { padding: var(--esp-3); background: var(--azul-fraco);
  border: 1px solid var(--azul); border-radius: var(--raio); margin-top: var(--esp-3); }
.quiz__resposta h3 { color: var(--grafite); font-size: var(--texto-md); }
.quiz__resposta p { margin-top: var(--esp-2); color: var(--cinza-2); }

.quiz__carregando { text-align: center; padding-block: var(--esp-8); }
.quiz__carregando-texto { margin-top: var(--esp-3); color: var(--cinza-2); }

.quiz__diagnostico { padding: var(--esp-4); background: var(--branco);
  border: 1px solid var(--azul); border-radius: var(--raio-card, 12px); }
.quiz__diagnostico-nota { font-size: var(--texto-2xl); font-weight: var(--peso-bold);
  color: var(--azul); line-height: 1; }
.quiz__espelho { list-style: none; display: grid; gap: var(--esp-1); margin-top: var(--esp-3); }
.quiz__espelho li { padding-left: 22px; position: relative; color: var(--cinza-2); font-size: var(--texto-sm); }
.quiz__espelho li::before { content: "\2713"; position: absolute; left: 0; color: var(--azul); font-weight: var(--peso-bold); }
.quiz__voltar { background: none; border: 0; padding: 0; margin-top: var(--esp-3);
  color: var(--cinza-2); font: inherit; font-size: var(--texto-sm); cursor: pointer; text-decoration: underline; }

/* =====================================================================
   PAGINAS DE PRODUTO v2 (19/07/2026)
   A v1 era uma parede de texto: toda secao com o mesmo kicker, o mesmo h2
   e a mesma lista. Sem ritmo visual o leitor desiste antes do preco.
   Estes componentes existem para VARIAR o formato a cada secao.

   Cor segue a regra 60-30-10 da skill: azul e acento, nao preenchimento.
   Quem carrega peso e o espaco e a hierarquia de tamanho, nao a cor.
   ===================================================================== */

/* --- BUG CORRIGIDO: .recebe li e flex, entao <b> virava item separado
   e o texto quebrava numa linha solta. Esta lista aceita titulo + texto. --- */
.lista-rica { list-style: none; display: grid; gap: var(--esp-3); margin-top: var(--esp-3); }
.lista-rica li { display: grid; grid-template-columns: 22px 1fr; gap: var(--esp-2);
  align-items: start; }
.lista-rica li::before { content: "\2713"; color: var(--azul);
  font-weight: var(--peso-bold); line-height: 1.5; grid-row: 1; grid-column: 1; }
/* b e span precisam ser FORCADOS na coluna 2. Sem isto o span cai na
   coluna 1 da linha 2, ou seja, embaixo do check, e o texto desalinha.
   Foi esse tipo de vazamento de grid que quebrou a v1 desta pagina. */
.lista-rica b { grid-column: 2; grid-row: 1; color: var(--grafite); }
.lista-rica span { grid-column: 2; grid-row: 2; margin-top: 2px;
  color: var(--cinza-2); font-size: var(--texto-sm); }

/* --- Faixa de afirmacao: quebra o ritmo entre secoes de lista --- */
.faixa { background: var(--azul-fraco); border-block: 1px solid var(--azul);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }
.faixa__frase { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: var(--peso-bold); line-height: 1.2; letter-spacing: -0.02em;
  color: var(--grafite); max-width: 22ch; }
.faixa__apoio { margin-top: var(--esp-3); color: var(--cinza-2); max-width: 52ch; }

/* --- Grade numerada: para "o que tem dentro" --- */
.grade-num { display: grid; gap: var(--esp-3); margin-top: var(--esp-4);
  counter-reset: gnum; }
@media (min-width: 700px) { .grade-num { grid-template-columns: repeat(2, 1fr); } }
.grade-num__item { background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--raio-card, 12px); padding: var(--esp-3); counter-increment: gnum; }
.grade-num__item::before { content: counter(gnum, decimal-leading-zero);
  display: block; font-size: var(--texto-lg); font-weight: var(--peso-bold);
  color: var(--azul); line-height: 1; margin-bottom: var(--esp-2); }
.grade-num__item h3 { font-size: var(--texto-md); color: var(--grafite); }
.grade-num__item p { margin-top: var(--esp-1); color: var(--cinza-2); font-size: var(--texto-sm); }

/* --- Comparativo: usa cor para separar os dois lados sem gritar --- */
.comparativo { display: grid; gap: var(--esp-3); margin-top: var(--esp-4); }
@media (min-width: 780px) { .comparativo { grid-template-columns: repeat(2, 1fr); } }
.comparativo__col { border-radius: var(--raio-card, 12px); padding: var(--esp-3);
  border: 1px solid var(--linha); background: var(--branco); }
.comparativo__col--sim { border-color: var(--azul); background: var(--azul-fraco); }
.comparativo__col h3 { font-size: var(--texto-md); color: var(--grafite); }
.comparativo__col ul { list-style: none; display: grid; gap: var(--esp-2); margin-top: var(--esp-3); }
.comparativo__col li { display: grid; grid-template-columns: 20px 1fr; gap: var(--esp-1);
  color: var(--cinza-2); font-size: var(--texto-sm); }
.comparativo__col--sim li::before { content: "\2713"; color: var(--azul); font-weight: var(--peso-bold); }
.comparativo__col--nao li::before { content: "\2013"; color: var(--cinza); font-weight: var(--peso-bold); }

/* --- Linha do tempo: para cadencia e processo --- */
.linha-tempo { list-style: none; margin-top: var(--esp-4); display: grid; gap: 0; }
.linha-tempo li { display: grid; grid-template-columns: 88px 1fr; gap: var(--esp-3);
  padding-block: var(--esp-3); border-top: 1px solid var(--linha); }
.linha-tempo li:first-child { border-top: 0; }
.linha-tempo__quando { font-size: var(--texto-xs); font-weight: var(--peso-bold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--azul); padding-top: 3px; }
.linha-tempo b { display: block; color: var(--grafite); }
.linha-tempo span { display: block; margin-top: 4px; color: var(--cinza-2); font-size: var(--texto-sm); }

/* --- Numero grande de apoio: ancora visual barata e forte --- */
.destaque-num { display: grid; gap: var(--esp-2); align-items: center; margin-top: var(--esp-4); }
@media (min-width: 720px) { .destaque-num { grid-template-columns: auto 1fr; gap: var(--esp-6); } }
.destaque-num__valor { font-size: clamp(3.4rem, 2rem + 8vw, 5.5rem); font-weight: var(--peso-bold);
  color: var(--azul); line-height: 0.9; letter-spacing: -0.04em; }
.destaque-num__texto { color: var(--cinza-2); max-width: 46ch; }
.destaque-num__texto b { color: var(--grafite); }

/* --- Amostra de script: prova concreta em vez de descricao --- */
.amostra { background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--raio-card, 12px); padding: var(--esp-3); margin-top: var(--esp-3); }
.amostra__rotulo { font-size: var(--texto-xs); font-weight: var(--peso-bold);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--azul); }
.amostra__balao { margin-top: var(--esp-2); padding: var(--esp-2) var(--esp-3);
  background: var(--azul-fraco); border-left: 3px solid var(--azul);
  border-radius: 0 var(--raio) var(--raio) 0; color: var(--grafite); }
.amostra__nota { margin-top: var(--esp-2); font-size: var(--texto-sm); color: var(--cinza-2); }

/* =====================================================================
   GALERIA DE PRODUTO (28/07/2026)
   Captura de tela real da planilha/Notion, moldurada como janela de app.
   Reaproveita .janela (definido para mockup e nunca usado em HTML ate
   hoje) em vez de criar frame novo: mesmo chrome de barra com pontinhos
   que o resto do site ja usa para representar "isto e uma interface".
   A prova aqui e o produto de verdade, nao teoria (regra da skill: prova
   visual = prints reais da planilha).
   ===================================================================== */
.produto-galeria__grid { display: grid; gap: var(--esp-4); margin-top: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
/* margin:0 no <figure>: a margem padrao do navegador e '1em 40px', ou seja,
   80px horizontais comidos de cada card. Num carrossel de 295px isso deixava
   a janela com 215px, com o print espremido e a legenda em 4 linhas - era o
   que fazia a secao de prova parecer quebrada. */
.produto-galeria__item { margin: 0; }
.produto-galeria__item .janela { height: 100%; display: flex; flex-direction: column; }
/* Modificador sem padding: a captura de tela ja tem respiro proprio
   (e um print de pagina inteira), padding duplo so desperdicaria altura.

   ALTURA FIXA (aspect-ratio) + object-fit:contain, e nao img solta com
   height:auto. As 3 capturas tem proporcao bem diferente entre si (uma
   quase quadrada, uma bem larga e baixa, uma alta) -- com height:auto
   cada card nascia com uma altura diferente, a grade ficava serrilhada
   e lia como quebrada. Com a caixa em proporcao fixa e a imagem inteira
   dentro dela (contain, nunca cover: e texto, cortar arriscaria cortar
   palavra), as 3 janelas nascem exatamente do mesmo tamanho, alinhadas
   em linha, e nenhuma imagem perde nitidez por corte. */
.janela__corpo--imagem { padding: 0; background: var(--elev); aspect-ratio: 4 / 3; }
.janela__corpo--imagem img { display: block; width: 100%; height: 100%; object-fit: contain; }
.produto-galeria__legenda { padding: var(--esp-2) var(--esp-3); font-size: var(--texto-sm);
  color: var(--cinza-2); border-top: 1px solid var(--linha); }

/* O print virou botao (30/07): o Contentsquare mostrou gente clicando nele
   sem que nada acontecesse. Botao de verdade, e nao div com onclick, pra
   ganhar teclado e leitor de tela de graca. */
.produto-galeria__zoom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: zoom-in; position: relative;
}
.produto-galeria__zoom:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
/* A pastilha fica FORA da imagem, numa faixa propria embaixo da janela.
   Sobreposta ela cobria o print - e o print do painel tem so 94px de altura
   no carrossel, entao a pastilha de 32px comia um terco da unica coisa que a
   secao existe pra mostrar. */
.produto-galeria__lupa {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin-top: var(--esp-1);
  background: var(--grafite); color: var(--branco);
  font-size: var(--texto-xs); font-weight: var(--peso-bold);
  padding: 8px 12px; border-radius: var(--raio);
}
.produto-galeria__lupa svg { width: 14px; height: 14px; flex: 0 0 auto; }
.produto-galeria__zoom:hover .produto-galeria__lupa { background: var(--azul); }

/* MOBILE: os 3 prints empilhados custavam 1.968px de altura, 17% da pagina.
   Viram carrossel com scroll-snap (CSS puro, sem lib). O 2o print aparece
   cortado na borda de proposito: sem essa "sobra" visivel ninguem descobre
   que da pra arrastar. */
@media (max-width: 767px) {
  .produto-galeria__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--esp-3);
    padding-bottom: var(--esp-2); -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .produto-galeria__grid::-webkit-scrollbar { display: none; }
  /* 'start', nao 'center': com center o carrossel abria ja centralizado no
     2o card em vez do primeiro. */
  .produto-galeria__item { scroll-snap-align: start; }
  /* 16/9 no lugar de 4:3. Os 3 prints tem proporcoes muito diferentes (3,1:1
     o painel, 1:1 o COMO USAR). Com altura livre os cards ficavam de 291 a
     489px e, como a linha do grid tem a altura do maior, sobrava um vao de
     214px depois do primeiro card. Com caixa unica e mais baixa os 3 cards
     nascem iguais e o vao some. */
     Altura fixa em vez de aspect-ratio: a caixa e item de um flex column, e
     item flex tem min-height:auto, entao ela crescia com a imagem e a
     proporcao era ignorada (media: 165, 209 e 292px em vez de 165 nos tres). */
  .produto-galeria__item .janela__corpo--imagem { aspect-ratio: auto; height: 172px; flex: 0 0 auto; min-height: 0; }
  .produto-galeria__item .janela__corpo--imagem img { height: 100%; object-fit: contain; }
}

/* =====================================================================
   ZOOM DOS PRINTS (30/07/2026)
   Overlay sempre position:fixed -> nao empurra nada, CLS zero.
   ===================================================================== */
.tem-zoom { overflow: hidden; }
.zoom {
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-rows: auto 1fr auto;
  /* opaco de verdade: a 94% o texto da pagina atravessava e competia com o
     print, que e justamente o que a pessoa abriu pra conseguir ler */
  background: var(--preto);
}
.zoom[hidden] { display: none; }
.zoom__topo { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-3); }
.zoom__topo .zoom__ampliar { margin-left: auto; }
.zoom__contador { color: var(--cinza); font-size: var(--texto-xs); font-weight: var(--peso-bold);
  letter-spacing: 0.08em; text-transform: uppercase; }
.zoom__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--esp-2);
  border: 1px solid color-mix(in srgb, var(--cinza) 40%, transparent);
  border-radius: var(--raio); background: color-mix(in srgb, var(--branco) 10%, transparent);
  color: var(--branco); font: inherit; font-size: var(--texto-xs); font-weight: var(--peso-bold);
  cursor: pointer; transition: background var(--transicao);
}
.zoom__btn:hover { background: color-mix(in srgb, var(--branco) 20%, transparent); }
.zoom__btn:focus-visible { outline: 2px solid var(--branco); outline-offset: 2px; }
.zoom__btn svg { width: 22px; height: 22px; }
.zoom__palco { overflow: auto; padding: 0 var(--esp-2); display: grid; align-content: center;
  touch-action: pan-x pan-y pinch-zoom; overscroll-behavior: contain; }
.zoom__palco img { display: block; width: 100%; height: auto; margin: 0 auto;
  border-radius: var(--raio); background: var(--branco); cursor: zoom-in; }
.zoom__palco.is-ampliado { align-content: start; }
.zoom__palco.is-ampliado img { max-width: none; cursor: zoom-out; }
/* As setas eram brancas a 10% de opacidade sobre um print branco: sumiam.
   Agora sao pastilhas solidas escuras com borda clara, legiveis por cima de
   qualquer imagem. */
.zoom__nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; padding: 0; border-radius: 999px;
  background: var(--grafite); border: 2px solid var(--branco);
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.zoom__nav:hover { background: var(--azul); }
.zoom__nav--ant { left: var(--esp-2); }
.zoom__nav--prox { right: var(--esp-2); }
.zoom__nav[hidden] { display: none; }
.zoom__nav svg { width: 26px; height: 26px; }
.zoom__base { display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-2); padding: var(--esp-2) var(--esp-3) var(--esp-3); }
.zoom__legenda { color: var(--cinza); font-size: var(--texto-xs); margin: 0; max-width: 60ch; }

/* Pontinhos de posicao: e o que anuncia que da pra arrastar. */
.zoom__pontos { display: flex; gap: 8px; flex: 0 0 auto; }
.zoom__pontos[hidden] { display: none; }
.zoom__ponto {
  width: 24px; height: 24px; padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center;
}
.zoom__ponto::before {
  content: ""; width: 9px; height: 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--cinza) 70%, transparent);
  transition: background var(--transicao), width var(--transicao);
}
.zoom__ponto.is-atual::before { background: var(--branco); width: 22px; }
.zoom__ponto:focus-visible { outline: 2px solid var(--branco); outline-offset: 0; border-radius: 4px; }

/* O CTA sobe da base depois de alguns segundos com a imagem aberta. Sai de
   baixo pra nao cobrir a imagem que a pessoa foi ver. */
.zoom__cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1;
  display: grid; gap: var(--esp-2); justify-items: center;
  padding: var(--esp-3) var(--esp-3) calc(var(--esp-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--preto) 97%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--cinza) 30%, transparent);
  transform: translateY(100%);
}
.zoom__cta[hidden] { display: none; }
.zoom__cta.is-visivel { transform: translateY(0); }
.zoom__cta-texto { margin: 0; color: var(--branco); font-weight: var(--peso-bold); text-align: center; }
.zoom__cta .btn { width: 100%; max-width: 420px; }
@media (prefers-reduced-motion: no-preference) {
  .zoom__cta { transition: transform 320ms cubic-bezier(.22,.8,.28,1); }
}

/* =====================================================================
   DEPOIMENTO EM AUDIO, ESTILO MENSAGEM DE VOZ (28/07/2026)
   Excecao pontual, registrada em SKILL-Site-LPS.md secao 8: a marca nao
   usa depoimento (secao 4 do briefing, "marca dark nao usa depoimento"),
   e "avatar" esta na lista de proibicoes absolutas. Aqui os dois abrem
   excecao, restrita A ESTE COMPONENTE: e depoimento REAL (audio
   original do cliente, so recomprimido, nao dublado nem escrito), e o
   circulo do "avatar" e um icone generico de contato -- nao foto de
   pessoa real, so o elemento de chrome que faz a bolha ler como
   mensagem de app, do jeito que o Carlos pediu ("parece que ele ta
   abrindo um audio no whatsapp").

   Mecanica: duas fileiras de barra IDENTICAS sobrepostas -- uma cinza
   (base) e uma azul (progresso), a azul dentro de um wrapper com
   overflow:hidden cuja largura o JS atualiza no timeupdate do <audio>.
   Da o efeito de "trilha ja ouvida fica azul" sem mask/clip-path, que
   tem suporte de browser mais irregular. As alturas de barra vem de
   amplitude real do audio (pico por trecho), nao de padrao aleatorio.
   ===================================================================== */
.audio-msg { position: relative; display: flex; align-items: center; gap: var(--esp-2);
  max-width: 420px; margin-top: var(--esp-3); padding: 10px var(--esp-2);
  background: var(--branco); border: 1px solid var(--linha); border-radius: 18px;
  box-shadow: var(--sombra); }
.audio-msg__play { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px;
  border: 0; background: var(--azul); color: var(--branco); cursor: pointer;
  display: grid; place-items: center; transition: background 150ms; }
.audio-msg__play:hover { background: var(--azul-hover); }
.audio-msg__play:focus-visible { outline: 2px solid var(--azul-hover); outline-offset: 2px; }
.audio-msg__play svg { width: 16px; height: 16px; display: block; }
.audio-msg__play .audio-msg__icone-pausa { display: none; }
.audio-msg.is-tocando .audio-msg__icone-play { display: none; }
.audio-msg.is-tocando .audio-msg__icone-pausa { display: block; }

/* overflow:hidden e gap de 1px (30/07): as 46 barras tem min-width de 2px e
   nao encolhem, entao pediam 46*2 + 45*2 = 182px num espaco de 151px. O
   excedente vazava por cima do tempo ("1:02") e do avatar. Com gap 1px cabem
   em 137px, e o overflow corta o resto em telas mais estreitas que 375px.
   Nao afeta o clip-path do progresso, que e visual e nao mexe no flex. */
.audio-msg__onda { position: relative; flex: 1 1 auto; height: 32px; min-width: 0; cursor: pointer; overflow: hidden; }
.audio-msg__onda-base, .audio-msg__onda-progresso { position: absolute; inset: 0; width: 100%;
  display: flex; align-items: center; gap: 1px; pointer-events: none; }
.audio-msg__onda i { flex: 1 1 auto; min-width: 2px; height: var(--h, 30%);
  border-radius: 2px; background: var(--linha); }
.audio-msg__onda-progresso i { background: var(--azul); }
/* As duas fileiras tem as MESMAS barras (mesma altura, mesma ordem) e
   ocupam 100% da largura o tempo todo -- os bares sao flex:1, entao
   encolher a LARGURA do wrapper reamostraria as barras em vez de
   revelar um prefixo delas. clip-path corta visualmente sem afetar o
   calculo de flex, e e isso que da o efeito "trilha ja ouvida" real:
   corta a fileira azul por cima da cinza, da direita para a esquerda,
   conforme o audio toca. O JS atualiza a custom property --progresso. */
.audio-msg__onda-progresso { clip-path: inset(0 calc(100% - var(--progresso, 0%)) 0 0);
  will-change: clip-path; }

.audio-msg__tempo { flex: 0 0 auto; min-width: 38px; white-space: nowrap;
  font-size: var(--texto-xs); font-variant-numeric: tabular-nums; color: var(--cinza-2); }
.audio-msg__avatar { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 999px;
  background: var(--elev); border: 1px solid var(--linha); color: var(--cinza);
  display: grid; place-items: center; }
.audio-msg__avatar svg { width: 16px; height: 16px; }

.depoimento__legenda { margin-top: var(--esp-2); font-size: var(--texto-sm); color: var(--cinza-2); }

/* --- Secao de conteudo separada por tipo (noticias vs artigos) --- */
/* .secao-dupla e um <section> aninhado, entao herdava o padding-block
   global de section (ate 6rem cada lado). Isso somava ~16rem entre as
   duas subsecoes. Zeramos o padding: o espacamento fica so no margin. */
.secao-dupla { padding-block: 0; }
.secao-dupla:first-of-type { margin-top: var(--esp-4); } /* respiro da intro, igual as demais secoes */
.secao-dupla + .secao-dupla { margin-top: var(--esp-8); }
.secao-dupla__topo { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--esp-2); flex-wrap: wrap; padding-bottom: var(--esp-2);
  border-bottom: 1px solid var(--linha); }
.secao-dupla__topo h2 { font-size: var(--texto-lg); }
.vazio { margin-top: var(--esp-3); padding: var(--esp-4);
  background: var(--elev); border: 1px dashed var(--linha);
  border-radius: var(--raio-card, 12px); color: var(--cinza-2); }
.vazio b { color: var(--grafite); }

/* =====================================================================
   QUIZ v3 (28/07/2026) — seis formatos de pergunta, foto e movimento
   Base: METODO_QUIZ-FUNNEL_01 a _04.
   - Opcao visual (padrao 3 do Seca Bucho): reduz atrito na pergunta
     simples. Imovel e nicho visual, entao cabe.
   - Pitch final substitui a captura de e-mail: o metodo manda o quiz
     terminar VENDENDO, e o diagnostico e o degrau para a oferta.

   MUDANCA DE REGRA EM 28/07/2026 (decisao do Carlos, revoga a v2):
   o quiz PODE usar foto de pessoa e de local, e emoji. Ate a v2 as
   figuras eram so SVG da marca porque a skill proibia stock photo,
   rosto e avatar; essa proibicao nao vale mais aqui. As fotos ficam
   auto-hospedadas em /assets/img/quiz/ (origem: banco Pexels/Pixabay
   ja licenciado, em images/broker) e nao vindas de CDN de terceiro --
   o img-src do CSP aceitaria https: qualquer, mas domino de peso e
   cache vale mais. Emoji entra so nas perguntas EMOCIONAIS; nas
   tecnicas ele le como barato.
   ===================================================================== */

/* --- Foto de apoio das telas de prova / story / diagnostico ---------
   A caixa tem aspect-ratio e fundo proprios, entao existe ANTES da
   imagem chegar. Imagem lazy que aterrissa depois nao empurra nada. */
.quiz__foto { aspect-ratio: 16 / 9; margin-bottom: var(--esp-3);
  background: var(--elev); border-radius: var(--raio-card); overflow: hidden; }
.quiz__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Corpo comum de toda opcao --- */
.quiz__opcao-corpo { display: grid; gap: 2px; min-width: 0; }
.quiz__opcao-rotulo { font-weight: var(--peso-bold); }
.quiz__opcao-nota { font-size: var(--texto-xs); color: var(--cinza-2); }

/* --- Formato RETRATO: a tela de identidade. Duas fotos grandes. ----- */
.quiz__opcoes--retrato { grid-template-columns: 1fr 1fr; }
.quiz__opcao--retrato { padding: 0; }
.quiz__opcao-foto { display: block; aspect-ratio: 1; background: var(--elev); }
.quiz__opcao-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.quiz__opcao--retrato .quiz__opcao-corpo { padding: var(--esp-2); text-align: center; justify-items: center; }

/* --- Formato ICONE (era "visual" na v2; os dois nomes valem) -------- */
.quiz__opcoes--visual,
.quiz__opcoes--icone { grid-template-columns: repeat(2, 1fr); gap: var(--esp-2); }
.quiz__opcao--visual,
.quiz__opcao--icone { display: grid; gap: var(--esp-2); justify-items: center;
  text-align: center; padding: var(--esp-3) var(--esp-2); }
.quiz__figura { width: 100%; max-width: 96px; height: auto; display: block; }
.quiz__opcao--visual .quiz__opcao-rotulo,
.quiz__opcao--icone .quiz__opcao-rotulo { font-size: var(--texto-sm); }
/* O traco das figuras acompanha o estado do botao. */
.quiz__figura [stroke] { stroke: var(--cinza); transition: stroke 150ms; }
.quiz__opcao.is-escolhida .quiz__figura [stroke] { stroke: var(--azul); }
@media (hover: hover) {
  .quiz__opcao:hover .quiz__figura [stroke] { stroke: var(--azul); }
}

/* --- Formato EMOJI: so nas perguntas de dor ------------------------
   Caixa de tamanho FIXO. Emoji sempre vem da fonte de emoji do sistema
   (o unicode-range do @font-face la em cima nao cobre essas faixas),
   entao o desenho e a metrica mudam entre iOS, Android e Windows. Com
   a caixa reservada, essa variacao nao vira layout shift. */
.quiz__opcao--emoji { display: grid; grid-template-columns: 44px 1fr;
  gap: var(--esp-2); align-items: center; }
.quiz__emoji { width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 30px; line-height: 1; }

/* --- Formato ESCALA: volume, tempo, frequencia ---------------------
   Quatro barrinhas crescentes. Comunica "mais/menos" antes da leitura. */
.quiz__opcao--escala { display: grid; grid-template-columns: 34px 1fr;
  gap: var(--esp-3); align-items: center; }
.quiz__nivel { display: flex; align-items: flex-end; gap: 3px; width: 34px; height: 26px; }
.quiz__nivel i { flex: 1; background: var(--linha); border-radius: 2px; transition: background 150ms; }
.quiz__nivel i:nth-child(1) { height: 30%; }
.quiz__nivel i:nth-child(2) { height: 53%; }
.quiz__nivel i:nth-child(3) { height: 77%; }
.quiz__nivel i:nth-child(4) { height: 100%; }
.quiz__nivel i.is-cheia { background: var(--azul); }

/* --- Compromisso: opcoes em bloco largo, sem figura --- */
.quiz__opcao--compromisso { text-align: center; }
.quiz__opcao--compromisso .quiz__opcao-corpo { justify-items: center; }

/* --- Pergunta de NOME ----------------------------------------------
   Unico campo de texto do quiz. O botao nasce desabilitado e so libera
   com nome valido, entao {nome} nunca interpola vazio no meio de uma
   frase la na frente. */
.quiz__nome { display: grid; gap: var(--esp-2); margin-top: var(--esp-3); }
.quiz__nome-campo { width: 100%; font: inherit; font-size: var(--texto-md);
  padding: var(--esp-2) var(--esp-3); color: var(--grafite); background: var(--branco);
  border: 1px solid var(--linha); border-radius: var(--raio); }
.quiz__nome-campo::placeholder { color: var(--cinza); }
.quiz__nome-campo:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.quiz__nome .btn-primario:disabled { opacity: .45; cursor: not-allowed; }

/* --- ANALISE: a tela entre uma pergunta e a seguinte ----------------
   Anel fechando + a frase que devolve o que a pessoa acabou de
   responder. Substitui o salto seco para a proxima pergunta.

   ANCORADA NO TOPO, nao centralizada. Centralizar parece melhor e e uma
   armadilha: a posicao passa a depender da altura do palco, e quando o
   painel vira .is-saindo (position:absolute) ele salta de lugar. Medido
   em 28/07: sozinho isso valia CLS 0.378 num percurso completo. Com
   offset fixo a caixa nasce e morre no mesmo y. */
.quiz__passo--analise { align-content: start; padding-top: clamp(56px, 13svh, 120px); }
.quiz__analise { text-align: center; padding-inline: var(--esp-3); }
.quiz__analise-emoji { display: block; height: 52px; font-size: 42px; line-height: 1;
  margin-bottom: var(--esp-2); }
.quiz__analise-anel { display: block; width: 48px; height: 48px; margin: 0 auto var(--esp-3); }
.quiz__analise-anel svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.quiz__anel-trilha { stroke: var(--linha); }
.quiz__anel-traco { stroke: var(--azul); }
.quiz__analise-texto { font-size: var(--texto-md); line-height: 1.35; color: var(--grafite);
  max-width: 30ch; margin-inline: auto; }

/* --- Dobra do mobile (26/07/2026, revisado em 28/07) -----------------
   O Contentsquare de 24/07 mostrou o padrao: mobile com 88% de rolagem e
   so 21% de taxa de atividade. Num quiz que e stepper (uma pergunta por
   tela), rolagem alta NAO significa interesse: significa que a pergunta
   nao cabe na tela e o usuario tem que rolar para achar as opcoes.
   Muitos desistem antes de tocar.

   Regra: pergunta + TODAS as opcoes cabem em 560px de altura visivel,
   medido em 360x640. A figura cai para 56px, o retrato vira 4/5 em vez
   de quadrado, e os respiros encolhem. Nao mexo no tamanho da pergunta:
   ela e o gancho e continua com o peso visual que tem no desktop. */
@media (max-width: 767px) {
  .quiz__conta { margin-bottom: var(--esp-2); }
  .quiz__ajuda { margin-top: var(--esp-1); }
  .quiz__opcoes { margin-top: var(--esp-2); gap: var(--esp-1); }
  /* Os cards de icone vem em 2x2, entao o respiro vertical conta duas
     vezes. Com pergunta de 3 linhas (a mais longa dos tres quizzes) o
     bloco estourava a dobra em 360x640; estes numeros devolvem ~36px. */
  .quiz__opcao--visual,
  .quiz__opcao--icone { gap: var(--esp-1); padding: 10px var(--esp-1); }
  .quiz__figura { max-width: 50px; }
  .quiz__opcao-foto { aspect-ratio: 4 / 5; }
  .quiz__opcao--emoji { grid-template-columns: 34px 1fr; }
  .quiz__emoji { width: 34px; height: 34px; font-size: 24px; }
  .quiz__foto { margin-bottom: var(--esp-2); }
  /* Listas verticais respiram menos no mobile para as 4 opcoes caberem
     acima da dobra (medido em 360x640, 28/07: as de emoji estouravam por
     30-40px). O min-height segura o alvo de toque em 48px, que e o piso
     recomendado -- encolher o respiro nao pode custar acerto de dedo.
     Retrato e icone ficam de fora: um nao tem padding e o outro ja foi
     ajustado acima. */
  .quiz__opcao--emoji,
  .quiz__opcao--escala,
  .quiz__opcao--compromisso,
  .quiz__opcao--texto { min-height: 48px; padding: var(--esp-1) var(--esp-2); }
}

/* --- Movimento do quiz ---------------------------------------------
   Vocabulario continua o do site (entrada curta, translate pequeno,
   nada de bounce). Tudo em opacity/transform, que rodam no compositor
   e nao contam como layout shift. O kill-switch global de
   prefers-reduced-motion no fim do arquivo desliga tudo isto. */
@keyframes q-entra   { from { opacity: 0; transform: translateX(14px); } }
@keyframes q-sai     { to   { opacity: 0; transform: translateX(-14px); } }
@keyframes op-entra  { from { opacity: 0; transform: translateY(8px); } }
@keyframes tique-risca { from { stroke-dashoffset: 26; } }
@keyframes brilho-passa { from { transform: translateX(-120%); } to { transform: translateX(240%); } }
@keyframes barra-pulo { 50% { transform: scaleY(2); } }
@keyframes anel-gira { to { transform: rotate(270deg); } }

@media (prefers-reduced-motion: no-preference) {
  .quiz__passo.is-entrando { animation: q-entra 260ms ease-out both; }
  .quiz__passo.is-saindo { animation: q-sai 200ms ease-in both; }

  /* Cards entram escalonados. 60ms entre eles: quatro opcoes terminam
     em 240ms, rapido o bastante para nao atrasar o toque. */
  .quiz__opcoes li { animation: op-entra 300ms ease-out both;
    animation-delay: calc(var(--ordem, 0) * 60ms); }
  .quiz__espelho li { animation: op-entra 320ms ease-out both;
    animation-delay: calc(var(--ordem, 0) * 70ms); }

  .quiz__opcao.is-escolhida .quiz__tique path { stroke-dasharray: 26;
    animation: tique-risca 320ms ease-out both; }

  /* Varredura de brilho no card escolhido. E o unico enfeite puro daqui,
     e existe para o toque ter recompensa visivel. */
  .quiz__opcao::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 42%, rgba(37, 99, 235, .18) 50%, transparent 58%);
    transform: translateX(-120%); }
  .quiz__opcao.is-escolhida::after { animation: brilho-passa 620ms ease-out; }

  .quiz__progresso-barra.is-pulo { animation: barra-pulo 320ms ease-out; }

  /* O anel gira devagar enquanto o traco fecha. Duas leituras ao mesmo
     tempo: "esta trabalhando" (giro) e "falta pouco" (traco). Rotacao e
     transform, entao nao custa layout. */
  .quiz__analise-anel svg { animation: anel-gira 1100ms linear; }
}

/* --- Diagnostico com metrica real --- */
.quiz__metrica { display: grid; gap: var(--esp-1); margin-top: var(--esp-3);
  padding: var(--esp-3); background: var(--azul-fraco);
  border: 1px solid var(--azul); border-radius: var(--raio); }
.quiz__metrica-valor { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.2rem);
  font-weight: var(--peso-bold); color: var(--azul); line-height: 1; letter-spacing: -0.03em; }
.quiz__metrica-rotulo { color: var(--grafite); font-weight: var(--peso-bold); }
.quiz__metrica-nota { font-size: var(--texto-sm); color: var(--cinza-2); }

/* --- Comparativo antes/depois em barras (padrao universal 5, 4/4 funis).
   Aqui SEM numero inventado: as barras sao qualitativas e a legenda diz
   isso, porque a marca nao publica estatistica que nao mediu. --- */
.barras-cmp { display: grid; gap: var(--esp-3); margin-top: var(--esp-3); }
.barra-cmp__rotulo { font-size: var(--texto-sm); color: var(--grafite); font-weight: var(--peso-bold); }
.barra-cmp__trilha { height: 10px; background: var(--linha); border-radius: 999px;
  overflow: hidden; margin-top: 6px; }
.barra-cmp__fill { height: 100%; border-radius: 999px; }
.barra-cmp__fill--antes { background: var(--cinza); }
.barra-cmp__fill--depois { background: var(--azul); }
.barra-cmp__legenda { font-size: var(--texto-xs); color: var(--cinza-2); margin-top: 4px; }

/* --- Pitch final --- */
.pitch { margin-top: var(--esp-6); }
.pitch__abertura { font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.2rem); font-weight: var(--peso-bold);
  line-height: 1.15; letter-spacing: -0.02em; color: var(--grafite); }
.pitch__bloco { margin-top: var(--esp-6); }
.pitch__bloco h3 { font-size: var(--texto-md); color: var(--grafite); }
.pitch__bloco p { margin-top: var(--esp-2); color: var(--cinza-2); }
.pitch__etapas { list-style: none; counter-reset: pe; display: grid; gap: var(--esp-2); margin-top: var(--esp-3); }
.pitch__etapas li { display: grid; grid-template-columns: 28px 1fr; gap: var(--esp-2);
  counter-increment: pe; color: var(--cinza-2); }
.pitch__etapas li::before { content: counter(pe); font-weight: var(--peso-bold);
  color: var(--azul); }
.pitch__etapas b { color: var(--grafite); }

/* --- Cascata de valor + cupom com validade real (19/07/2026) ---
   A cascata usa os PREÇOS DE TABELA REAIS de cada produto, então o valor
   riscado é um preço que existe e é praticado. Cascata com valor inflado
   ("bônus de R$297" que nunca custou isso) é preço riscado fake, que é
   proibido e é o mesmo problema do "189 compras" da Cakto. */
.cascata { display: grid; gap: var(--esp-1); margin-top: var(--esp-3);
  padding: var(--esp-3); background: var(--branco);
  border: 1px solid var(--linha); border-radius: var(--raio); text-align: left; }
.cascata__linha { display: flex; justify-content: space-between; gap: var(--esp-2);
  color: var(--cinza-2); font-size: var(--texto-sm); }
.cascata__linha--total { margin-top: var(--esp-2); padding-top: var(--esp-2);
  border-top: 1px solid var(--linha); color: var(--grafite); font-weight: var(--peso-bold); }
.cascata__valor { white-space: nowrap; }
.cascata__valor--riscado { text-decoration: line-through; color: var(--cinza); }

.cupom { display: grid; gap: 4px; justify-items: center; margin-top: var(--esp-2);
  padding: var(--esp-2) var(--esp-3); background: var(--azul-fraco);
  border: 1px dashed var(--azul); border-radius: var(--raio); }
.cupom__rotulo { font-size: var(--texto-xs); color: var(--cinza-2); }
.cupom__codigo { font-size: var(--texto-md); font-weight: var(--peso-bold);
  letter-spacing: 0.12em; color: var(--azul); }
.cupom__relogio { font-size: var(--texto-xs); font-weight: var(--peso-bold); color: var(--grafite); }

:focus-visible { outline: 2px solid var(--azul-hover); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}