/* Tokens extraídos de apps/lua-vision-site (tailwind.config.ts + src/index.css), 05/10/2026:
   cor — surface #f8f9fa, on-surface #191c1d, on-surface-variant #4c4546, platinum #d9dadb, secondary/mint-dim #006b5b.
   tipografia — display-xl 72/1.0/-0.04em/800 (H1); headline-lg 48/1.1/-0.02em/700 (H2); headline-md 24/1.3/-0.02em/600 (H3);
   body-lg 18/1.6/0/400; body-md 16/1.5/0/400; label-sm mono 12/1/0.05em/500; label-xs mono 10/1/0.15em/700 (nav/eyebrow/botão).
   layout — .section-container = max-width 1280px + padding-inline 32px (px-8); header h-20 = 80px sticky com blur;
   seção = py-32 (128px) predominante, py-24 (96px) em bloco menor; .card = bg branco, borda 0.5px platinum, padding 32px (p-8);
   footer = border-top 0.5px platinum, py-12 (48px), mt-32 (128px) de separação. Base de espaçamento: 8px.
   Esta folha usa só os tokens abaixo — nenhum valor solto de tamanho, espaçamento ou cor fora deles. */

:root{
  /* cor */
  --bg:#f8f9fa; --tx:#191c1d; --mu:#4c4546; --mu2:#7e7576; --ac:#006b5b; --ac2:#00d2aa;
  --bd:#d9dadb; --card:#ffffff; --card-baixo:#f3f4f5; --nula:#a4262c; --aviso:#8a5a00;
  --serif:"Hanken Grotesk",system-ui,sans-serif; --corpo:Manrope,system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;

  /* tipografia — escala real do site (fontSize do tailwind.config.ts) */
  --h1-tam:clamp(40px,5.2vw,72px); --h1-alt:1.0; --h1-esp:-0.04em; --h1-peso:800;
  --h2-tam:clamp(28px,3.6vw,48px); --h2-alt:1.1; --h2-esp:-0.02em; --h2-peso:700;
  --h3-tam:24px; --h3-alt:1.3; --h3-esp:-0.02em; --h3-peso:600;
  --corpo-g-tam:18px; --corpo-g-alt:1.6; --corpo-g-esp:0em;
  --corpo-m-tam:16px; --corpo-m-alt:1.5; --corpo-m-esp:0em;
  --rot-sm-tam:12px; --rot-sm-alt:1; --rot-sm-esp:.05em; --rot-sm-peso:500;
  --rot-xs-tam:10px; --rot-xs-alt:1; --rot-xs-esp:.15em; --rot-xs-peso:700;
  --linha-max:68ch;

  /* layout — container e ritmo vertical (base 8px, igual ao site) */
  --largura-max:1280px; --gutter:32px; --altura-cabecalho:80px;
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:40px; --sp-6:48px;
  --sp-8:64px; --sp-10:80px; --sp-12:96px; --sp-16:128px;
  --borda:0.5px solid var(--bd);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font:var(--corpo-m-tam)/var(--corpo-m-alt) var(--corpo);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:var(--ac)}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
::selection{background:rgba(0,107,91,.15);color:#000}

/* contêiner único — mesma largura máxima e gutter em toda a página */
.envolucro{max-width:var(--largura-max);margin:0 auto;padding:0 var(--gutter)}
.num{font-variant-numeric:tabular-nums}

/* cabeçalho: mesma estrutura do site (fixo, h-20, blur, logo + nav + CTA) */
header.topo{position:sticky;top:0;z-index:50;height:var(--altura-cabecalho);display:flex;align-items:center;border-bottom:var(--borda);background:rgba(248,249,250,.86);backdrop-filter:blur(10px)}
.topo-barra{width:100%;max-width:var(--largura-max);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.marca{font:700 var(--rot-sm-tam)/1 var(--mono);letter-spacing:var(--rot-sm-esp);text-transform:uppercase}
.marca span{color:var(--ac)}
nav.topo-nav{display:flex;gap:var(--sp-4);font:var(--rot-xs-peso) var(--rot-xs-tam)/var(--rot-xs-alt) var(--mono)}
nav.topo-nav a{color:var(--mu);text-decoration:none;letter-spacing:var(--rot-xs-esp);text-transform:uppercase;transition:color .3s}
nav.topo-nav a:hover{color:var(--tx)}

.botao{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);border:1px solid var(--tx);background:var(--tx);color:var(--bg);font:var(--rot-xs-peso) var(--rot-xs-tam)/1 var(--mono);text-transform:uppercase;letter-spacing:var(--rot-xs-esp);text-decoration:none;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.botao:hover{background:var(--ac);border-color:var(--ac);color:#fff}
.botao.fantasma{background:transparent;color:var(--tx);border:var(--borda)}
.botao.fantasma:hover{border-color:var(--ac);color:var(--ac);background:transparent}

/* rótulo mono — "section-eyebrow" do site: legível, espaçamento moderado */
.k{font:var(--rot-xs-peso) var(--rot-xs-tam)/var(--rot-xs-alt) var(--mono);letter-spacing:var(--rot-xs-esp);text-transform:uppercase;color:var(--ac);margin-bottom:var(--sp-2);display:block}

/* hero: título + CTA numa coluna, widget de decisão na outra — mesmo
   contêiner das demais seções, colapsa cedo (sem grid off-axis frágil) */
section.hero{padding:var(--sp-12) 0;border-bottom:var(--borda)}
.hero-grade{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--sp-8);align-items:center}
h1{font:var(--h1-peso) var(--h1-tam)/var(--h1-alt) var(--serif);letter-spacing:var(--h1-esp);margin:var(--sp-2) 0 var(--sp-4);text-wrap:balance}
h1 em{font-style:normal;color:var(--ac)}
.hero p.lead{font:var(--corpo-g-tam)/var(--corpo-g-alt) var(--corpo);letter-spacing:var(--corpo-g-esp);color:var(--mu);max-width:var(--linha-max)}
.hero-cta{display:flex;gap:var(--sp-2);margin-top:var(--sp-4);flex-wrap:wrap}

/* widget "A Fase decidindo, ao vivo" — herda o componente .card do site */
.ilustracao{border:var(--borda);background:var(--card);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
.ilustracao-cabeca{display:flex;flex-direction:column;gap:var(--sp-1)}
.ilustracao-tag{font:var(--rot-xs-peso) var(--rot-xs-tam)/var(--rot-xs-alt) var(--mono);color:var(--mu);text-transform:uppercase;letter-spacing:var(--rot-xs-esp);border:var(--borda);padding:var(--sp-1);display:inline-block;width:fit-content}
/* widget com esqueleto estável: cada área que muda de caso a caso (citação,
   pergunta, título da decisão, aviso) reserva altura fixa em em/linhas —
   texto mais longo trunca com reticências dentro da área, nunca estica o
   bloco. Isso impede que qualquer coisa abaixo do widget se mova durante o
   ciclo (ver medição de getBoundingClientRect em final5-*.png). */
.palco{display:flex;flex-direction:column;gap:var(--sp-3)}
.palco-texto{font:var(--corpo-m-tam)/var(--corpo-m-alt) var(--corpo);color:var(--tx)}
.palco-texto .rotulo{display:block;font:var(--rot-xs-peso) var(--rot-xs-tam)/var(--rot-xs-alt) var(--mono);color:var(--mu);text-transform:uppercase;letter-spacing:var(--rot-xs-esp);margin-bottom:var(--sp-2)}
.palco-texto blockquote{margin:0 0 var(--sp-2);padding-left:var(--sp-2);border-left:2px solid var(--bd);color:var(--tx);font-style:normal;
  min-height:calc(var(--corpo-m-alt) * 2em);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.palco-pergunta{font:var(--rot-sm-tam)/var(--corpo-g-alt) var(--mono);letter-spacing:.01em;color:var(--mu);
  min-height:calc(var(--corpo-g-alt) * 2em);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.palco-corrida .linha{display:grid;grid-template-columns:1fr auto;gap:var(--sp-1);margin-bottom:var(--sp-1);font:var(--rot-sm-tam)/1 var(--mono);color:var(--mu)}
.palco-corrida .trilha{position:relative;height:10px;background:var(--bg);border:var(--borda);overflow:hidden;margin-bottom:var(--sp-2)}
.palco-corrida .trilha i{position:absolute;inset:0 auto 0 0;width:0%;background:var(--ac);transition:none}
.palco-corrida .trilha.nula i{background:var(--nula)}
.palco-corrida .trilha .limiar{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--tx);opacity:.6;left:70%}
.palco-decisao{margin-top:var(--sp-1);padding-top:var(--sp-3);border-top:1px dashed var(--bd)}
.palco-decisao .status{font:var(--rot-xs-peso) var(--rot-xs-tam)/var(--rot-xs-alt) var(--mono);text-transform:uppercase;letter-spacing:var(--rot-xs-esp);color:var(--mu)}
.palco-decisao .texto-decisao{font:700 21px/1.2 var(--serif);margin:var(--sp-1) 0;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;color:var(--tx);
  min-height:2.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.palco-decisao.revelado .texto-decisao{opacity:1;transform:translateY(0)}
.palco-decisao .texto-decisao.sem-base{color:var(--nula)}
.palco-decisao .confianca{font:var(--rot-sm-tam)/var(--corpo-g-alt) var(--mono);color:var(--mu);min-height:calc(var(--corpo-g-alt) * 1em);display:block}
.palco-decisao .aviso{margin-top:var(--sp-2);border:1px solid transparent;color:transparent;padding:var(--sp-2);font:var(--rot-sm-tam)/1.4 var(--mono);
  min-height:calc(1.4em * 2 + var(--sp-4) + 2px);box-sizing:border-box;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:border-color .2s,color .2s}
.palco-decisao.tem-aviso .aviso{border-color:var(--aviso);color:var(--aviso)}
.pontos{display:flex;gap:var(--sp-1);justify-content:center;padding-top:var(--sp-1)}
.pontos i{width:22px;height:2px;background:var(--bd);display:block;transition:background .3s}
.pontos i.ativo{background:var(--ac)}

/* ritmo vertical: todas as seções usam o mesmo espaçamento de base */
section{padding:var(--sp-12) 0}
section.alt{background:var(--card);border-top:var(--borda);border-bottom:var(--borda)}
h2{font:var(--h2-peso) var(--h2-tam)/var(--h2-alt) var(--serif);letter-spacing:var(--h2-esp);margin:0 0 var(--sp-2);max-width:26ch}
.secao-sub{font:var(--corpo-g-tam)/var(--corpo-g-alt) var(--corpo);color:var(--mu);max-width:var(--linha-max);margin-bottom:var(--sp-6)}
h3{font:var(--h3-peso) var(--h3-tam)/var(--h3-alt) var(--serif);letter-spacing:var(--h3-esp);margin:0 0 var(--sp-1);color:var(--tx)}
p{margin:0 0 var(--sp-2);max-width:var(--linha-max)}
.mu{color:var(--mu)}

/* cartão — mesmo padrão do site: branco, borda 0.5px, acende no hover */
.grade-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
.cartao{border:var(--borda);background:var(--card);padding:var(--sp-4);transition:border-color .3s}
.cartao:hover{border-color:var(--ac)}
.cartao h3{font-size:17px}
.num-etapa{font:var(--rot-xs-peso) var(--rot-xs-tam)/var(--rot-xs-alt) var(--mono);color:var(--ac);letter-spacing:var(--rot-xs-esp);display:block;margin-bottom:var(--sp-2)}

/* scrollytelling: cada etapa tem seu próprio painel; no desktop o painel
   gruda (sticky) enquanto o texto da etapa passa por ele; no tablet/celular
   vira coluna única com o painel acima do texto — CSS puro, sem JS. */
.etapas{display:flex;flex-direction:column;gap:var(--sp-3)}
.etapa{display:grid;grid-template-columns:1fr 320px;gap:var(--sp-4);border:var(--borda);background:var(--card);align-items:start}
.etapa-texto{padding:var(--sp-4)}
.etapa-texto .num-etapa{color:var(--ac)}
.etapa-texto .base{font:var(--rot-xs-peso) var(--rot-xs-tam)/var(--corpo-g-alt) var(--mono);color:var(--mu);text-transform:uppercase;letter-spacing:var(--rot-xs-esp);margin-top:var(--sp-2);display:block;max-width:var(--linha-max)}
.etapa-painel{position:sticky;top:calc(var(--altura-cabecalho) + var(--sp-3));align-self:start;background:var(--card-baixo);border-left:var(--borda);padding:var(--sp-3);min-height:200px;display:flex;flex-direction:column;justify-content:center}
.painel-rotulo{font:var(--rot-xs-peso) var(--rot-xs-tam)/var(--rot-xs-alt) var(--mono);color:var(--mu);text-transform:uppercase;letter-spacing:var(--rot-xs-esp);margin-bottom:var(--sp-3)}
.painel-linha{display:grid;grid-template-columns:1fr auto;gap:var(--sp-1);font:var(--rot-sm-tam)/1 var(--mono);color:var(--mu);margin-bottom:var(--sp-1)}
.painel-trilha{height:9px;background:var(--bg);border:var(--borda);position:relative;margin-bottom:var(--sp-2);overflow:hidden}
.painel-trilha i{position:absolute;inset:0 auto 0 0;background:var(--ac)}
.painel-trilha.vence i{background:var(--ac)}
.painel-trilha.nula i{background:var(--nula)}
.painel-trilha .limiar{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--tx);opacity:.5;left:70%}
.painel-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.painel-chip{font:var(--rot-xs-peso) var(--rot-xs-tam)/1 var(--mono);border:var(--borda);color:var(--mu);padding:var(--sp-1) var(--sp-2)}
.painel-destaque{font:700 26px/1 var(--serif);color:var(--ac);margin:var(--sp-1) 0}
.painel-aviso{border:1px solid var(--aviso);color:var(--aviso);padding:var(--sp-2);font:var(--rot-xs-tam)/var(--corpo-g-alt) var(--mono);margin-top:var(--sp-2)}
.painel-nota{font:var(--rot-xs-tam)/var(--corpo-g-alt) var(--mono);color:var(--mu);margin-top:var(--sp-1)}

section#placar .secao-sub{margin-bottom:var(--sp-2)}

/* placar: mesmo padrão de cartão, barras lado a lado por banco */
.placar-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-1)}
.placar-banco{border:var(--borda);background:var(--card);padding:var(--sp-4);transition:border-color .3s}
.placar-banco:hover{border-color:var(--ac)}
.placar-banco h3{font-size:16px;margin-bottom:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-1)}
.placar-banco-sub{font:var(--rot-xs-peso) var(--rot-xs-tam)/1 var(--mono);color:var(--mu);text-transform:none;letter-spacing:0;font-weight:400}
.placar-barra{margin-bottom:var(--sp-3)}
.placar-rotulo{display:block;font:var(--rot-xs-peso) var(--rot-xs-tam)/var(--rot-xs-alt) var(--mono);color:var(--mu);text-transform:uppercase;letter-spacing:var(--rot-xs-esp);margin-bottom:var(--sp-1)}
.placar-trilha{height:10px;background:var(--bg);border:var(--borda);position:relative;overflow:hidden;margin-bottom:var(--sp-1)}
.placar-trilha .placar-preenche{position:absolute;inset:0 auto 0 0;background:var(--mu2);width:0%}
.placar-barra.fase .placar-rotulo{color:var(--ac)}
.placar-barra.fase .placar-preenche{background:var(--ac)}
.placar-valor{font:700 16px/1 var(--mono);color:var(--tx)}
.placar-barra.fase .placar-valor{color:var(--ac)}
.placar-metodo{font-size:var(--rot-sm-tam);margin-top:var(--sp-3);margin-bottom:0}
.placar-rodape{margin-top:var(--sp-4);font-size:var(--rot-sm-tam);max-width:var(--linha-max)}
.selo{display:inline-block;font:var(--rot-xs-peso) var(--rot-xs-tam)/var(--rot-xs-alt) var(--mono);letter-spacing:var(--rot-xs-esp);text-transform:uppercase;border:1px solid var(--ac);color:var(--ac);padding:var(--sp-1) var(--sp-2);margin-bottom:var(--sp-2)}

.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.nao-serve{border-left:2px solid var(--nula);padding-left:var(--sp-3)}
ul.lista{margin:0;padding-left:var(--sp-3);max-width:var(--linha-max)}
ul.lista li{margin-bottom:var(--sp-2)}

.cta-final{text-align:center}
.cta-final h2{margin:0 auto var(--sp-2);max-width:none}
.cta-final p{max-width:var(--linha-max);margin:0 auto var(--sp-4)}

/* rodapé — mesma estrutura do site: marca + grid de links + barra inferior */
footer{border-top:var(--borda);padding:var(--sp-6) 0;margin-top:var(--sp-16)}
footer .envolucro{display:flex;flex-direction:column;gap:var(--sp-2)}
footer .linha-marca{font:700 var(--h3-tam)/1 var(--serif);letter-spacing:-.01em;color:var(--tx)}
footer .mono-label{font:var(--rot-xs-peso) var(--rot-xs-tam)/1 var(--mono);color:var(--mu);text-transform:uppercase;letter-spacing:var(--rot-xs-esp)}
footer a{color:var(--mu);text-decoration:underline}

.entra{opacity:1;transform:translateY(var(--sp-1));transition:transform .6s ease}
.entra.visivel{transform:translateY(0)}

@media (max-width: 1100px){
  .hero-grade{grid-template-columns:1fr}
  .etapa{grid-template-columns:1fr}
  .etapa-texto{padding:var(--sp-3)}
  .etapa-painel{position:static;border-left:0;border-top:var(--borda)}
}

@media (max-width: 900px){
  .grade-4{grid-template-columns:1fr 1fr}
  .duas-colunas{grid-template-columns:1fr}
  .placar-grade{grid-template-columns:1fr}
  nav.topo-nav{display:none}
  h1{max-width:none}
}

@media (max-width: 560px){
  :root{--gutter:20px}
  .grade-4{grid-template-columns:1fr}
  section{padding:var(--sp-8) 0}
  section.hero{padding:var(--sp-6) 0}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .botao{justify-content:center}
  footer .envolucro{align-items:flex-start}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .entra{opacity:1;transform:none}
  .pontos{display:none}
}