/* Palco de partículas (palco.js). Exceção registrada no design system: palco escuro fixo atrás de todo o conteúdo,
   com partículas, grão e duas manchas de luz fracas. O canvas fica atrás do DOM: o grão nunca passa por cima de
   texto, botões, mockups ou seções claras. Só vale com WebGL (html[data-palco]); sem ele nada muda. */
.palco{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100lvh;z-index:-1;pointer-events:none;display:block}
html[data-palco] body{background:#120B16}
/* o cabeçalho continua branco como antes */
html[data-palco="live"] body > header.site-header{background:#FFFFFF}
/* seções escuras ficam transparentes: o palco aparece através delas */
html[data-palco] main .hero,
html[data-palco] main .content-section.numbers-band,
html[data-palco] main #conversa.section-5{background-color:transparent}
/* os pedaços em vídeo da faixa de números saem de cena (o caos do palco ocupa o lugar); o espaço fica reservado */
html[data-palco] .band-media canvas,
html[data-palco] .band-media .band-still{visibility:hidden}
/* C33: hero segue direto para os resultados. Sem reserva de imagem
   nem compensação da antiga sobreposição do mockup. */
main #resultado.content-section{padding-top:120px}
@media(max-width:720px){main #resultado.content-section{padding-top:72px}}
/* fechamento no computador: texto à esquerda (como a primeira tela) e o cérebro inteiro à direita, no .brain-dock */
@media (min-width:1001px){
html[data-palco] #conversa .section-wrap{display:grid;grid-template-columns:52% minmax(0,1fr);gap:0 4vw;max-width:1240px;align-items:center;text-align:left}
html[data-palco] #conversa .brain-dock{grid-column:2;grid-row:1/3;height:auto;min-height:62vh;margin:0}
html[data-palco] #conversa .section-heading,html[data-palco] #conversa .section-body{grid-column:1;margin-left:0;margin-right:0;text-align:left;align-items:flex-start}
html[data-palco] #conversa .section-heading{display:flex;flex-direction:column;align-items:flex-start}
html[data-palco] #conversa .section-heading h2,html[data-palco] #conversa .section-heading p{text-align:left;margin-left:0;margin-right:0}
html[data-palco] #conversa .section-body>p.cta-wrap{justify-content:flex-start}
html[data-palco] #conversa .section-body>p.section-note,html[data-palco] #conversa .section-body>p.cta-line{margin-left:0;margin-right:0;text-align:left}
}
@media print{.palco{display:none}html[data-palco] body{background:#fff}}
/* Destaque semântico no palco escuro: rosa para os rótulos das pílulas. */
html[data-palco] main .hero,
html[data-palco] main #conversa{--destaque:#F7F5F8}
html[data-palco] main .hero .hero-tag,
html[data-palco] main #conversa .section-heading .eyebrow{color:var(--destaque)}

/* C34: tokens titulo-faixa desktop e titulo-secao-celular. */
main #resultado .section-heading h2{font-size:40px;line-height:1.15;font-weight:600;letter-spacing:-.03em}
@media(max-width:720px){main #resultado .section-heading h2{font-size:32px}}