/* ============================================================
   A CAMPANHA — diagnóstico do Apogeu como RPG de tabuleiro.
   CSS puro, mobile-first, zero dependências.
   Identidade Apogeu: marfim + grafite + brasa + bronze.

   Performance: anima só transform/opacity. Nada de width, height,
   box-shadow ou filter em transição (Android médio é o alvo).
   ============================================================ */

:root{
  --brasa-300:#FBC97A; --brasa-400:#FBB44C; --brasa-500:#ED7D2B; --brasa-600:#D9641A; --brasa-700:#B23E0C;
  --grafite-950:#141417; --grafite-900:#1C1C20; --grafite-800:#2A2A30; --grafite-700:#3A3A42;
  --grafite-500:#5C5C66; --grafite-400:#8A8A94;
  --marfim:#F6F4F1; --areia:#ECE8E2; --nevoa:#CFCBC4; --bronze:#C9A24B; --bronze-claro:#E4C97E;
  --gelo:#7FA8C4;                       /* frio: o Mercado e as peças inimigas */
  --serif:"Cormorant Garamond",Georgia,serif;
  --label:"Jost",system-ui,sans-serif;
  --ui:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --brasa-grad:linear-gradient(135deg,#FBB44C,#ED7D2B 50%,#C2470F);
  --bronze-grad:linear-gradient(135deg,#E4C97E,#C9A24B 55%,#9A7728);
  --raio:14px;
  --sombra:0 18px 50px rgba(20,20,23,.28);
  --t-lento:.62s cubic-bezier(.2,.7,.2,1);
  --t-medio:.34s cubic-bezier(.2,.7,.2,1);
  --t-rapido:.16s ease;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--grafite-950); color:var(--marfim);
  font-family:var(--ui); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100dvh;
}
body.travado{overflow:hidden}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brasa-400);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.honeypot{position:absolute;left:-9999px;opacity:0;pointer-events:none;height:0}

/* ============================================================ FICHA (HUD)
   `sticky` (não `fixed`): ocupa espaço no fluxo, então nenhum padding precisa
   adivinhar a altura dela — era essa adivinhação que fazia a ficha cobrir o
   texto das cenas. Fundo sólido: com gradiente translúcido dava para ler o
   conteúdo passando por trás. */
.hud{
  position:sticky;top:0;z-index:40;
  background:var(--grafite-950);
  border-bottom:1px solid rgba(201,162,75,.14);
  padding:8px 14px 9px;display:none;
}
body.jogando .hud{display:block}
.ficha{max-width:660px;margin:0 auto}
.ficha-topo{display:flex;align-items:center;gap:10px}

.ficha-peca{
  font-size:20px;line-height:1;width:32px;height:32px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(201,162,75,.13);border:1px solid rgba(201,162,75,.34);
  color:var(--bronze-claro);
}
.ficha-peca.subiu{animation:pecaSobe .7s cubic-bezier(.2,.7,.2,1)}
@keyframes pecaSobe{0%{transform:scale(1)}35%{transform:scale(1.26)}100%{transform:scale(1)}}

.ficha-id{flex:1;min-width:0}
.ficha-nome{
  font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.15;margin:0;
  color:var(--marfim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ficha-sub{
  font-family:var(--label);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grafite-400);margin:1px 0 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ficha-xp{flex:none;text-align:right;font-family:var(--label);min-width:64px}
.ficha-xp b{
  display:block;font-size:15px;font-weight:600;color:var(--bronze-claro);line-height:1;
  font-variant-numeric:tabular-nums;
}
.ficha-xp span{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grafite-500)}

/* selos: um traço por território, na mesma linha dos atributos */
.ficha-selos{display:none}

/* atributos: 4 barras que sobem a cada resposta */
.atributos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:7px 0 0}
.atr{min-width:0}
.atr-nome{
  font-family:var(--label);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grafite-500);margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.atr-trilho{height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.atr-preenche{
  height:100%;width:100%;border-radius:2px;background:var(--brasa-grad);
  transform:scaleX(.02);transform-origin:left;transition:transform var(--t-lento);
}
.atr.pleno .atr-preenche{background:var(--bronze-grad)}

/* XP flutuante — um nó reaproveitado */
.xp-voa{
  position:fixed;z-index:60;pointer-events:none;
  font-family:var(--label);font-size:15px;font-weight:600;color:var(--bronze-claro);
  opacity:0;text-shadow:0 2px 12px rgba(20,20,23,.9);
}
.xp-voa.ativo{animation:xpVoa .95s cubic-bezier(.2,.7,.2,1)}
@keyframes xpVoa{
  0%{opacity:0;transform:translate3d(0,6px,0) scale(.9)}
  22%{opacity:1;transform:translate3d(0,-4px,0) scale(1)}
  100%{opacity:0;transform:translate3d(0,-34px,0) scale(1)}
}

/* ============================================================ TABULEIRO
   Faixa de altura fixa. O tabuleiro é ABSOLUTO e centrado dentro dela, para
   que sua caixa de 220px não empurre o layout: sob rotateX(60deg) ele ocupa
   ~110px de altura visual e cabe na faixa. Nada de `overflow:hidden` aqui —
   isso quebraria `preserve-3d` no WebKit (armadilha conhecida do projeto). */
.palco{
  position:relative;height:150px;display:none;
}
body.jogando .palco,body.analisando .palco{display:block}
.palco::after{                                   /* "chão": dá volume ao 3D */
  content:"";position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  width:230px;height:44px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(201,162,75,.2),transparent 72%);
  pointer-events:none;
}
.tab-wrap{
  position:absolute;top:50%;left:50%;
  width:220px;height:220px;margin:-110px 0 0 -110px;
  perspective:760px;
  transition:transform var(--t-lento);
}
.tab-wrap.plano{transform:scale(1.06)}
.tabuleiro{
  position:relative;width:100%;height:100%;
  transform:rotateX(60deg);transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transition:transform var(--t-lento);
}
.casa{
  position:absolute;top:0;left:0;width:12.5%;height:12.5%;
  background:rgba(246,244,241,.085);
}
.casa.escura{background:rgba(246,244,241,.022)}

/* quadrantes = territórios (um nó por estado, nunca 16 casas) */
.quadrante{
  position:absolute;width:50%;height:50%;
  border:1px solid rgba(201,162,75,.16);
  background:rgba(20,20,23,.55);
  transition:opacity var(--t-lento),background var(--t-lento),border-color var(--t-lento);
}
.quadrante.ativo{background:rgba(237,125,43,.05);border-color:rgba(251,180,76,.42)}
.quadrante.conquistado{background:rgba(201,162,75,.14);border-color:rgba(201,162,75,.55)}
.quad-selo{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transition:opacity var(--t-lento);
}
.quadrante.conquistado .quad-selo{opacity:1}
.quad-num{
  transform:rotateX(-60deg);
  font-family:var(--serif);font-size:22px;font-weight:600;color:var(--bronze-claro);
  text-shadow:0 3px 14px rgba(20,20,23,.8);
}

/* peças */
.peca,.guardiao,.rei,.inimigo{
  position:absolute;top:0;left:0;width:12.5%;height:12.5%;
  display:grid;place-items:center;
  transition:transform var(--t-lento),opacity var(--t-medio);
}
.peca span,.guardiao span,.rei span,.inimigo span{
  transform:rotateX(-60deg);font-size:20px;line-height:1;display:block;
}
.peca span{color:var(--brasa-300);font-size:23px;text-shadow:0 3px 10px rgba(237,125,43,.75),0 0 20px rgba(251,201,122,.35)}
.peca.promovendo span{animation:promove .9s cubic-bezier(.2,.7,.2,1)}
@keyframes promove{
  0%{transform:rotateX(-60deg) scale(.6);opacity:.2}
  45%{transform:rotateX(-60deg) scale(1.3);opacity:1}
  100%{transform:rotateX(-60deg) scale(1);opacity:1}
}
.guardiao span{color:var(--grafite-400);text-shadow:0 3px 10px rgba(0,0,0,.6)}
.guardiao.nomeado span{color:var(--gelo)}
.guardiao.caido{opacity:0;transform:translate3d(var(--gx,0),var(--gy,0),0) !important}
.guardiao.caido span{transform:rotateX(-60deg) rotate(70deg) scale(.85)}
.rei span{color:var(--marfim);font-size:24px;text-shadow:0 4px 16px rgba(246,244,241,.4)}
.inimigo span{color:var(--gelo);text-shadow:0 3px 10px rgba(127,168,196,.35)}
.inimigo.caindo span{animation:inimigoCai .42s cubic-bezier(.2,.7,.2,1)}
@keyframes inimigoCai{
  0%{transform:rotateX(-60deg) translateY(-26px);opacity:0}
  100%{transform:rotateX(-60deg) translateY(0);opacity:1}
}
.oculto{opacity:0;pointer-events:none}

@supports not (transform-style:preserve-3d){
  .tabuleiro{transform:none}
  .peca span,.guardiao span,.rei span,.inimigo span,.quad-num{transform:none}
}

/* ============================================================ CENAS */
.cena{
  position:relative;z-index:20;display:none;
  padding:18px 20px 40px;
}
.cena-inner{position:relative;z-index:1;max-width:600px;margin:0 auto;text-align:center}

/* arte de território: atmosfera atrás do texto, nunca competindo com ele */
.cena.com-arte::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--arte);background-size:cover;background-position:center 30%;
  opacity:.5;
}
.cena.com-arte::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(20,20,23,.55),rgba(20,20,23,.35) 35%,rgba(20,20,23,.92));
}

.cena-selo{
  font-family:var(--label);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--bronze);margin:0 0 12px;
}
.cena-num{
  font-family:var(--serif);font-size:52px;line-height:1;color:var(--bronze-claro);
  margin:0 0 2px;font-weight:600;
}
.cena-titulo{
  font-family:var(--serif);font-weight:600;font-size:clamp(28px,7.6vw,40px);line-height:1.08;
  margin:0 0 8px;color:var(--marfim);letter-spacing:-.015em;
}
.cena-sub{
  font-family:var(--serif);font-style:italic;font-size:clamp(16px,4.2vw,19px);
  color:var(--nevoa);margin:0 0 18px;line-height:1.4;
}
.cena-texto{font-size:15.5px;color:var(--areia);margin:0 0 16px;line-height:1.62}
.cena-narrador{
  font-family:var(--serif);font-style:italic;font-size:17px;color:var(--brasa-300);
  margin:0 0 20px;line-height:1.45;
}
.cena-narrador::before{content:"— "}

/* beats: aparecem em sequência, colapsam no turbo */
.beat{opacity:0;transform:translate3d(0,10px,0);transition:opacity var(--t-lento),transform var(--t-lento)}
.beat.ver{opacity:1;transform:none}

/* selo de lacre da conquista */
.lacre{
  width:82px;height:82px;margin:0 auto 16px;border-radius:50%;
  background:var(--bronze-grad);display:grid;place-items:center;
  transform:scale(.4);opacity:0;transition:transform .5s cubic-bezier(.2,1.5,.4,1),opacity var(--t-medio);
}
.lacre.ver{transform:scale(1);opacity:1}
.lacre span{font-family:var(--serif);font-size:34px;color:#3A2C0B;font-weight:600}

/* insight = a leitura da planilha (recompensa de conteúdo) */
.insight{
  background:var(--marfim);color:var(--grafite-900);border-radius:14px;
  padding:18px 20px;margin:0 0 18px;text-align:left;
  border-left:3px solid var(--bronze);
}
.insight p{margin:0;font-family:var(--serif);font-size:19px;line-height:1.42;color:var(--grafite-900)}
.insight p.insight-rot{
  font-family:var(--label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brasa-600);margin:0 0 8px;line-height:1.3;
}
.insight cite{
  display:block;margin:10px 0 0;font-style:normal;font-family:var(--label);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grafite-400);
}

/* guardião derrotado */
.derrotado{
  display:flex;align-items:center;gap:11px;justify-content:center;
  margin:0 0 18px;color:var(--grafite-400);font-size:14px;
}
.derrotado b{color:var(--nevoa);font-weight:600;text-decoration:line-through;text-decoration-thickness:1px}

/* promoção (2º beat da conquista) */
.promo-pecas{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 12px}
.promo-de,.promo-para{font-size:38px;line-height:1}
.promo-de{color:var(--grafite-500);opacity:.5}
.promo-para{color:var(--bronze-claro);text-shadow:0 4px 18px rgba(201,162,75,.4)}
.promo-seta{color:var(--grafite-500);font-size:20px}

/* prólogo */
.prologo-campo{max-width:340px;margin:0 auto 8px;text-align:left}
.prologo-campo label{
  display:block;font-family:var(--label);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brasa-400);margin:0 0 7px;
}
.prologo-campo input{
  width:100%;min-height:58px;padding:14px 16px;font-size:20px;font-family:var(--serif);
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16);
  border-radius:12px;color:var(--marfim);text-align:center;
}
.prologo-campo input:focus{border-color:var(--brasa-400);outline:none;background:rgba(255,255,255,.09)}
.prologo-ajuda{font-size:12.5px;color:var(--grafite-400);margin:0 0 20px;text-align:center}
.prologo-tempo{font-size:12.5px;color:var(--grafite-400);margin:14px 0 0}

.cena-acao{margin:6px auto 0;max-width:340px}

/* ============================================================ CARD DE PERGUNTA */
.painel{
  position:relative;z-index:10;
  background:none;color:var(--marfim);
  padding:6px 20px 44px;display:none;
}
.painel-inner{max-width:640px;margin:0 auto}

/* fala do Mestre no topo da pergunta (a reação à jogada anterior) */
.mestre{
  display:flex;gap:9px;align-items:baseline;margin:0 0 14px;
  font-family:var(--serif);font-style:italic;font-size:16px;color:var(--nevoa);
  border-left:2px solid var(--bronze);padding-left:11px;line-height:1.4;
}
.mestre:empty{display:none}

/* guardião presente na pergunta */
.guardiao-card{
  background:linear-gradient(135deg,rgba(127,168,196,.1),rgba(127,168,196,.04));
  border:1px solid rgba(127,168,196,.3);border-radius:12px;
  padding:13px 15px;margin:0 0 16px;
}
.guardiao-rot{
  font-family:var(--label);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gelo);margin:0 0 4px;
}
.guardiao-nome{
  font-family:var(--serif);font-size:20px;font-weight:600;color:var(--marfim);margin:0 0 4px;line-height:1.2;
}
.guardiao-fala{font-size:14.5px;color:var(--nevoa);margin:0;line-height:1.45;font-style:italic}

.categoria{
  font-family:var(--label);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brasa-400);margin:0 0 9px;
}
.pergunta{
  font-family:var(--serif);font-weight:600;font-size:clamp(21px,5.4vw,27px);line-height:1.22;
  margin:0 0 18px;color:var(--marfim);letter-spacing:-.01em;
}
.ajuda{font-size:14.5px;color:var(--nevoa);margin:-10px 0 16px}

.opcoes{display:grid;gap:10px;margin:0 0 18px}
.opcao{
  position:relative;display:flex;gap:12px;align-items:center;text-align:left;width:100%;
  min-height:54px;padding:13px 15px;
  background:linear-gradient(180deg,rgba(44,44,50,.94),rgba(26,26,30,.96));
  border:1px solid rgba(201,162,75,.22);border-radius:11px;
  cursor:pointer;transition:border-color var(--t-rapido),background var(--t-rapido),transform .12s;
  font-size:15.5px;line-height:1.42;color:var(--areia);
}
.opcao:hover{border-color:rgba(251,180,76,.5)}
.opcao:active{transform:scale(.995)}
.opcao.sel{border-color:var(--brasa-400);background:linear-gradient(180deg,rgba(237,125,43,.24),rgba(178,62,12,.16));color:var(--marfim)}
/* a marca vira a coordenada da casa: o lance ganha endereco no tabuleiro */
.opcao .marca{
  flex:none;width:27px;height:27px;border-radius:7px;
  border:1px solid rgba(201,162,75,.35);display:grid;place-items:center;
  font-family:var(--label);font-size:12px;font-weight:600;
  color:var(--bronze-claro);background:rgba(20,20,23,.55);transition:all var(--t-rapido);
}
.opcao.sel .marca{background:var(--brasa-grad);border-color:transparent;color:#2C1605}


/* matriz item-a-item */
.matriz-prog{font-size:13px;color:var(--grafite-400);margin:0 0 10px;font-family:var(--label);letter-spacing:.06em}
.matriz-item{font-family:var(--serif);font-size:clamp(19px,4.8vw,23px);line-height:1.28;margin:0 0 16px;color:var(--marfim)}
.matriz-passos{display:flex;gap:5px;margin:0 0 18px}
.passo{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.1)}
.passo.ok{background:var(--brasa-500)}
.passo.agora{background:var(--brasa-300)}

/* ranking */
.rank-item{position:relative;padding-right:44px}
.rank-badge{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--brasa-500);color:#fff;font-size:12.5px;font-weight:700;font-family:var(--label);
}
.rank-item.inimigo-sel{border-color:var(--gelo);background:linear-gradient(180deg,rgba(127,168,196,.22),rgba(127,168,196,.1))}
.rank-item.inimigo-sel .rank-badge{background:var(--gelo)}
/* peça inimiga: a marca acompanha o azul do badge (estava laranja) */
.rank-item.eh-inimigo.sel .marca{background:var(--gelo);border-color:transparent;color:#0E1F2A}
.rank-dica{font-size:13.5px;color:var(--grafite-400);margin:0 0 14px}

/* slider */
.slider-box{margin:6px 0 22px;text-align:center}
.slider-valor{font-family:var(--serif);font-size:64px;line-height:1;color:var(--brasa-300);font-weight:600;display:block;margin-bottom:6px}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--brasa-500) var(--pct,70%),rgba(255,255,255,.12) var(--pct,70%));
  outline:none;margin:10px 0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:30px;height:30px;border-radius:50%;
  background:#fff;border:3px solid var(--brasa-500);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2);
}
input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid var(--brasa-500);cursor:pointer}
.slider-legenda{display:flex;justify-content:space-between;font-size:12.5px;color:var(--grafite-400);font-family:var(--label)}

/* formulário */
.campo{margin:0 0 14px}
.campo label{display:block;font-size:13.5px;font-weight:600;color:var(--areia);margin:0 0 6px}
.campo input,.campo textarea{
  width:100%;min-height:50px;padding:12px 14px;font-size:16px;font-family:var(--ui);
  border:1px solid rgba(201,162,75,.25);border-radius:11px;
  background:rgba(20,20,23,.6);color:var(--marfim);
}
.campo textarea{min-height:88px;resize:vertical}
.campo input:focus,.campo textarea:focus{border-color:var(--brasa-400);outline:none;background:rgba(20,20,23,.82)}
.opcional{font-weight:400;color:var(--grafite-400)}
.erros{background:rgba(178,62,12,.2);border:1px solid rgba(251,180,76,.4);border-radius:10px;padding:10px 13px;color:var(--brasa-300);font-size:14px;margin:0 0 14px;display:none}
.erros.ver{display:block}
.erros ul{margin:0;padding-left:18px}
.privacidade{font-size:12.5px;color:var(--grafite-400);margin:12px 0 0;line-height:1.45}

/* As duas perguntas de qualificação dentro do card de contato. Ficam separadas
   dos campos por um filete: são pergunta, não dado cadastral, e sem essa quebra
   o card lê como um formulário de oito campos. */
.qual{margin:15px 0 0;padding-top:13px;border-top:1px solid rgba(255,255,255,.09)}
.qual-pergunta{
  font-size:14px;line-height:1.45;color:var(--areia);font-weight:600;margin:0 0 9px;
}
/* Opções bem mais compactas que as do tabuleiro. O card de captura já tem
   seis campos acima e as duas listas somam doze opções: no tamanho normal a
   tela passava de 2,7 rolagens de celular, no momento em que menos se pode
   pedir esforço. Aqui a opção é um item de lista, não um lance. */
.opcoes-compactas{gap:5px;margin:0}
.opcoes-compactas .opcao{
  padding:8px 11px;font-size:13.5px;line-height:1.38;gap:9px;border-radius:9px;
}
.opcoes-compactas .marca{width:18px;height:18px;font-size:10px;flex:0 0 18px}

/* ações */
.acoes{display:flex;gap:10px;align-items:center;margin-top:18px}
.btn{
  border:0;border-radius:12px;padding:15px 24px;font-family:var(--label);font-weight:500;
  font-size:15.5px;letter-spacing:.03em;cursor:pointer;transition:filter var(--t-rapido),opacity var(--t-rapido);
  min-height:52px;
}
.btn-primario{background:var(--brasa-grad);color:#fff;flex:1;box-shadow:0 6px 18px rgba(237,125,43,.22)}
.btn-primario:hover{filter:brightness(1.06)}
.btn-primario[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none}
.btn-bronze{background:var(--bronze-grad);color:#2C2107;box-shadow:0 6px 18px rgba(201,162,75,.2);width:100%}
.btn-voltar{background:transparent;border:1px solid rgba(255,255,255,.16);color:var(--grafite-400);padding:15px 18px;flex:none}
.btn-voltar:hover{border-color:rgba(255,255,255,.32);color:var(--areia)}
.btn-grande{font-size:17px;padding:18px 30px;width:100%}

.retomar{background:rgba(255,255,255,.06);border:1px solid rgba(251,180,76,.3);border-radius:12px;padding:14px 16px;margin:0 0 18px;text-align:left}
.retomar p{margin:0 0 10px;font-size:14.5px;color:var(--areia)}
.retomar-btns{display:flex;gap:8px}
.btn-mini{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:var(--marfim);border-radius:9px;padding:9px 14px;font-size:14px;cursor:pointer;font-family:var(--label)}
.btn-mini.forte{background:var(--brasa-grad);border-color:transparent;color:#fff}

/* ============================================================ ANÁLISE */
.analise{display:none;padding:14px 0 60px}
.analise-inner{max-width:640px;margin:0 auto;padding:0 20px}

/* barra Você × Mercado */
.avaliacao{margin:22px 0 26px}
.aval-rot{display:flex;justify-content:space-between;font-family:var(--label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grafite-400);margin:0 0 7px}
.aval-rot .voce{color:var(--brasa-400)}
.aval-rot .mercado{color:var(--gelo)}
.aval-trilho{position:relative;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--gelo),rgba(255,255,255,.14) 50%,var(--brasa-500));overflow:hidden}
.aval-marca{position:absolute;top:-4px;left:50%;width:3px;height:16px;background:var(--marfim);border-radius:2px;transform:translate3d(0,0,0);transition:transform var(--t-lento)}
.aval-txt{text-align:center;font-family:var(--serif);font-size:17px;color:var(--nevoa);margin:10px 0 0;font-style:italic}

/* revelação das duas peças */
.revelacao{
  background:linear-gradient(135deg,rgba(201,162,75,.12),rgba(237,125,43,.06));
  border:1px solid rgba(201,162,75,.3);border-radius:16px;padding:22px 20px;margin:0 0 26px;text-align:center;
}
.rev-pecas{display:flex;align-items:center;justify-content:center;gap:22px;margin:0 0 14px}
.rev-bloco{text-align:center}
.rev-glifo{font-size:44px;line-height:1;display:block;margin:0 0 5px}
.rev-bloco.campanha .rev-glifo{color:var(--bronze-claro)}
.rev-bloco.mercado .rev-glifo{color:var(--gelo)}
.rev-rot{font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grafite-400)}
.rev-vs{font-family:var(--serif);font-size:19px;color:var(--grafite-500);font-style:italic}
.rev-txt{font-family:var(--serif);font-size:clamp(18px,4.6vw,22px);line-height:1.35;color:var(--marfim);margin:0}

.sel-titulo{
  font-family:var(--label);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brasa-400);margin:0 0 14px;text-align:center;
}
.pilares{display:grid;gap:11px;margin:0 0 26px}
.pilar{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:center}
.pilar-nome{font-size:14px;color:var(--areia)}
.pilar-nivel{font-family:var(--label);font-size:12.5px;color:var(--bronze-claro);font-variant-numeric:tabular-nums}
.pilar-trilho{grid-column:1/-1;height:6px;background:rgba(255,255,255,.09);border-radius:3px;overflow:hidden}
.pilar-preenche{height:100%;width:100%;background:var(--brasa-grad);border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform var(--t-lento)}

.maturidade{text-align:center;margin:0 0 30px}
.mat-num{font-family:var(--serif);font-size:60px;line-height:1;color:var(--bronze-claro);font-weight:600;font-variant-numeric:tabular-nums}
.mat-rot{font-family:var(--label);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--grafite-400);margin:4px 0 0}

.devolutiva{
  background:var(--marfim);color:var(--grafite-900);border-radius:18px;
  padding:26px 22px;margin:0 0 26px;box-shadow:var(--sombra);
}
.devolutiva h2{font-family:var(--serif);font-size:24px;margin:0 0 4px;color:var(--grafite-950)}
.devolutiva .assina{font-family:var(--label);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brasa-600);margin:0 0 18px}
.devolutiva p{margin:0 0 15px;font-size:16.5px;line-height:1.68}
.devolutiva p:last-child{margin-bottom:0}
.devolutiva strong{color:var(--grafite-950)}

/* A análise agora vem em seções. Os h3 são a única âncora de leitura numa
   página longa: sem o filete e o respiro acima, o texto vira um bloco só. */
.devolutiva h3{
  font-family:var(--label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brasa-600);margin:26px 0 12px;padding-top:16px;
  border-top:1px solid rgba(24,24,27,.1);
}
.devolutiva h3:first-child{margin-top:0;padding-top:0;border-top:0}
/* "O que trava aqui" — subordinado à leitura do pilar, não um parágrafo novo */
.devolutiva em{
  display:block;font-style:normal;font-size:15px;line-height:1.6;
  color:var(--grafite-600);border-left:2px solid var(--bronze-claro);
  padding-left:11px;margin-top:-6px;
}
.devolutiva ul{margin:0 0 15px;padding-left:0;list-style:none}
.devolutiva li{
  position:relative;padding-left:22px;margin:0 0 9px;font-size:16px;line-height:1.6;
}
.devolutiva li::before{
  content:"♟";position:absolute;left:0;top:0;color:var(--bronze-claro);font-size:15px;
}
.devolutiva hr{border:0;border-top:1px solid rgba(24,24,27,.12);margin:24px 0 18px}
.pensando{display:flex;align-items:center;gap:11px;color:var(--grafite-500);font-size:15px;font-style:italic;font-family:var(--serif)}
.pontinhos{display:inline-flex;gap:4px}
.pontinhos i{width:6px;height:6px;border-radius:50%;background:var(--brasa-400);animation:pulsa 1.3s infinite}
.pontinhos i:nth-child(2){animation-delay:.18s}
.pontinhos i:nth-child(3){animation-delay:.36s}
@keyframes pulsa{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

.cta-bloco{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px 20px;margin:0 0 16px}
.cta-rot{font-family:var(--label);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--brasa-400);margin:0 0 8px}
.cta-titulo{font-family:var(--serif);font-size:22px;margin:0 0 8px;color:var(--marfim);line-height:1.25}
.cta-desc{font-size:14.5px;color:var(--nevoa);margin:0 0 16px}
.cta-btn{display:block;text-align:center;text-decoration:none;background:var(--brasa-grad);color:#fff;border-radius:12px;padding:16px 22px;font-family:var(--label);font-size:16px;box-shadow:0 6px 18px rgba(237,125,43,.22)}
.solucoes{display:grid;gap:9px;margin:0 0 16px}
.solucao{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:13px 15px;font-size:14.5px;color:var(--areia)}
.solucao b{display:block;font-family:var(--serif);font-size:17px;color:var(--marfim);margin:0 0 3px;font-weight:600}
.zap{display:block;text-align:center;color:var(--nevoa);font-size:14.5px;text-decoration:none;padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:12px}

/* ============================================================ DESKTOP */
@media (min-width:820px){
  .palco{height:240px}
  .tab-wrap{width:320px;height:320px;margin:-160px 0 0 -160px}
  .painel{margin:0 auto;max-width:760px;padding:10px 32px 44px}
  .cena{padding:24px 20px 48px}
  body{font-size:17.5px}
}

/* ---- duas colunas: o tabuleiro deixa de ser um enfeite no topo e vira
   o painel esquerdo fixo, com a pergunta ocupando a direita. Sem isso o
   desktop era mobile esticado, com metade da tela vazia. */
@media (min-width:1000px){
  body.jogando:not(.analisando){
    display:grid;
    grid-template-columns:minmax(380px,44vw) 1fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:"ficha ficha" "palco conteudo";
    min-height:100dvh;
  }
  body.jogando:not(.analisando) .hud{grid-area:ficha}
  /* `sticky`, nao `center`: a coluna da direita agora pode ser bem mais alta
     que a tela (o card de contato tem seis campos e duas perguntas), e com
     align-self:center o tabuleiro centralizava no meio dessa coluna inteira —
     ou seja, ficava fora da dobra, deixando um vazio enorme no lugar dele.
     Grudado, ele acompanha a leitura. */
  body.jogando:not(.analisando) .palco{
    grid-area:palco;align-self:start;
    position:sticky;top:96px;
    height:min(72dvh,560px);min-height:420px;
  }
  body.jogando:not(.analisando) .painel,
  body.jogando:not(.analisando) .cena{
    grid-area:conteudo;align-self:center;
    max-width:620px;margin:0;padding:32px 44px 32px 8px;
  }
  .tab-wrap{width:min(38vw,430px);height:min(38vw,430px);margin:0;
    top:50%;left:50%;transform:translate(-50%,-50%)}
  .tab-wrap.plano{transform:translate(-50%,-50%) scale(1.06)}
  .palco::after{width:min(40vw,450px);height:70px;bottom:8%}
  .cena-inner{text-align:left;margin:0}
  .cena-num{font-size:64px}
  .cena-acao{margin-left:0;max-width:380px}
}

/* ============================================================ ESTADOS
   Toda a visibilidade das telas vive AQUI, no fim do arquivo e num bloco só.
   Antes estava espalhada: `body.em-cena .painel{display:none}` aparecia antes
   de `body.jogando .painel{display:block}` e, com a mesma especificidade, o
   segundo vencia — era o painel branco vazio surgindo por baixo das cenas. */
body.jogando .painel{display:block}
body.jogando.em-cena .painel{display:none}
body.em-prologo .hud{display:none}
body.jogando.em-cena .cena{display:block}
body.analisando .analise{display:block}
body.analisando .painel,
body.analisando .hud,
body.analisando .cena,
body.analisando .intro{display:none}
body.analisando .palco{height:216px;margin-top:6px}
/* no desktop o tabuleiro é maior (300px), então a faixa da análise cresce junto */
@media (min-width:820px){ body.analisando .palco{height:340px} }
@media (min-width:1000px){ body.analisando .tab-wrap{width:360px;height:360px} }

/* ============================================================ ACESSIBILIDADE */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .beat{opacity:1;transform:none}
  .lacre{transform:scale(1);opacity:1}
}
/* turbo: teste automatizado e revisão de texto */
body.turbo *,body.turbo *::before,body.turbo *::after{
  animation-duration:.001ms !important;transition-duration:.001ms !important;
}
body.turbo .beat{opacity:1;transform:none}
body.turbo .lacre{transform:scale(1);opacity:1}

/* ============================================================ ATERRISSAGEM
   A LP que existia antes do jogo, recuperada do commit 622b213 e renomeada
   com prefixo `lp-` para não colidir com as classes do jogo.

   Mesma identidade, outro registro: os tokens são os mesmos (brasa, grafite,
   marfim, as três fontes) — o que muda é o modo. Aqui é claro; quando o jogo
   começa, `na-portada` sai e tudo volta ao escuro.
   ============================================================ */

body.na-portada{background:var(--marfim);color:var(--grafite-900)}
body.na-portada .intro{max-width:none;margin:0;padding:0;display:block}

.lp-wrap{max-width:1140px;margin:0 auto;padding:0 48px}

.lp-display{
  font-family:var(--serif);font-weight:600;letter-spacing:-.015em;
  line-height:1.02;margin:0;
}
.lp-display em{font-style:italic;font-weight:500;color:var(--brasa-600)}

.lp-kicker{
  font-family:var(--label);font-weight:500;font-size:12.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--brasa-600);
  display:flex;align-items:center;gap:14px;margin:0 0 24px;
}
.lp-kicker::before{content:"";width:30px;height:1px;background:var(--brasa-500)}
.lp-kicker.center{justify-content:center}
.lp-kicker.center::after{content:"";width:30px;height:1px;background:var(--brasa-500)}

/* ---- Hero: o único bloco escuro da aterrissagem ---- */
.lp-hero{
  background:radial-gradient(80% 70% at 50% 0%, #26262C, var(--grafite-950) 75%);
  color:var(--marfim);padding:0 0 96px;position:relative;overflow:hidden;
}
/* o motivo de tabuleiro que assina a página */
.lp-hero::before{
  content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:
    linear-gradient(45deg, var(--marfim) 25%, transparent 25%, transparent 75%, var(--marfim) 75%),
    linear-gradient(45deg, var(--marfim) 25%, transparent 25%, transparent 75%, var(--marfim) 75%);
  background-size:96px 96px;
  background-position:0 0, 48px 48px;
  mask-image:radial-gradient(70% 60% at 50% 30%, #000, transparent 80%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000, transparent 80%);
}
.lp-hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:200px;
  background:radial-gradient(60% 100% at 50% 100%, rgba(237,125,43,.18), transparent 75%);
  pointer-events:none;
}
.lp-nav{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:26px 48px;
}
.lp-brand{
  font-family:var(--serif);font-weight:600;font-size:21px;line-height:1;
  color:var(--marfim);letter-spacing:-.01em;
}
.lp-brand .do{font-style:italic;font-weight:500;color:var(--brasa-400)}
.lp-nav-btn{min-height:46px;padding:8px 22px;font-size:12.5px}

.lp-hero__inner{text-align:center;padding-top:52px;position:relative}
.lp-overline{
  font-family:var(--label);font-size:12.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--brasa-400);margin:0 0 30px;font-weight:500;
}
.lp-hero .lp-display{font-size:clamp(54px,7.6vw,104px);color:var(--marfim);max-width:14ch;margin:0 auto}
.lp-hero .lp-display em{color:var(--brasa-400)}
.lp-sub{font-size:19px;color:var(--nevoa);max-width:52ch;margin:30px auto 38px}
.lp-micro{
  font-family:var(--label);font-size:12.5px;letter-spacing:.08em;
  color:var(--grafite-400);margin:18px 0 0;
}
.lp-hero .retomar{max-width:440px;margin:0 auto 26px}

/* ---- Por que ---- */
.lp-porque{padding:100px 0}
.lp-porque .lp-wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.lp-porque .lp-display{font-size:clamp(34px,4.2vw,50px)}
.lp-col p{font-size:17px;color:var(--grafite-700);margin:0 0 18px}
.lp-bullets{margin:28px 0 0;display:grid;gap:14px;padding:0;list-style:none}
.lp-bullets li{display:flex;gap:14px;align-items:baseline;font-size:16px;color:var(--grafite-700)}
.lp-bullets li::before{
  content:"";width:8px;height:8px;background:var(--brasa-500);flex:none;
  transform:rotate(45deg) translateY(-1px);
}

/* ---- Como funciona ---- */
.lp-passos{padding:0 0 100px}
.lp-head{text-align:center;margin-bottom:52px}
.lp-passos .lp-display{font-size:clamp(30px,3.8vw,44px)}
.lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.lp-passo{background:#fff;border:1px solid var(--areia);border-radius:18px;padding:34px 30px}
.lp-passo .n{
  font-family:var(--serif);font-size:46px;font-weight:600;line-height:1;
  color:transparent;-webkit-text-stroke:1.2px var(--brasa-500);display:block;margin-bottom:16px;
}
.lp-passo h3{font-family:var(--ui);font-weight:600;font-size:17.5px;margin:0 0 8px;color:var(--grafite-900)}
.lp-passo p{margin:0;font-size:15px;color:var(--grafite-500)}
.lp-acao{text-align:center;margin:52px auto 0}

/* Botao da aterrissagem: pill compacto, como na LP original. NAO reusa as
   classes do jogo — `.btn-bronze` e `.btn-grande` levam `width:100%`, que
   aqui esticava o CTA de ponta a ponta e quebrava a marca do nav em duas
   linhas. A cor e a brasa, a mesma do CTA que fecha a analise. */
.lp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--label);font-weight:500;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  padding:10px 32px;min-height:54px;border-radius:999px;border:0;
  background:var(--brasa-grad);color:#fff;
  box-shadow:0 10px 28px rgba(217,100,26,.32);
  transition:transform .15s ease,box-shadow .15s ease;
}
.lp-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(217,100,26,.4)}
.lp-btn--grande{font-size:14.5px;padding:12px 40px;min-height:58px}
.lp-nav-btn{min-height:46px;padding:8px 22px;font-size:12.5px;flex:none}
.lp-brand{white-space:nowrap}

/* ---- Responsivo (os breakpoints da LP original) ---- */
@media(max-width:980px){
  .lp-porque .lp-wrap{grid-template-columns:1fr;gap:36px}
  .lp-grid{grid-template-columns:1fr}
}
@media(max-width:880px){
  .lp-wrap{padding:0 26px}
  .lp-nav{padding:22px 26px}
}
@media(max-width:640px){
  .lp-nav{padding:18px 26px;gap:12px;justify-content:center}
  .lp-brand{font-size:18px}
  .lp-nav-btn{display:none}          /* o botão do hero está logo abaixo */
  .lp-hero{padding:0 0 60px}
  .lp-hero__inner{padding-top:30px}
  .lp-hero .lp-display{font-size:clamp(38px,10vw,54px)}
  .lp-sub{font-size:16px;margin:20px auto 28px}
  .lp-overline{font-size:11px;letter-spacing:.26em;margin-bottom:20px}
  .lp-micro{font-size:11.5px}
  .lp-porque{padding:60px 0}
  .lp-porque .lp-display{font-size:clamp(28px,7.5vw,38px)}
  .lp-col p{font-size:15.5px}
  .lp-bullets li{font-size:15px}
  .lp-passos{padding:0 0 64px}
  .lp-head{margin-bottom:34px}
  .lp-passo{padding:28px 24px}
  .lp-btn--grande{width:100%;padding:12px 24px}
}