/* O SITE DA SPORE (07/10/2026; v2 no mesmo dia). A linguagem do kit aprovado (src/remotion/marketing-kv/Kit.tsx):
   tinta e lima, grade e grão de filme, Big Shoulders nos títulos, Instrument Sans no texto e Martian Mono nos rótulos.
   Fontes servidas daqui (nada do Google na visita). Sem cookie e sem pixel. Gerado por scripts/marketing/site.mjs.
   Quatro peles por seção (tinta, painel, papel e lima); os heróis, a mesa e o HD são desenhados aqui, sem vídeo. */

/* a fonte que não chega a tempo não troca depois (o layout pulava no computador); as três vêm com preload */
@font-face { font-family: "Big Shoulders"; src: url("/a/fontes/big-shoulders.woff2") format("woff2"); font-weight: 100 900; font-display: optional; }
@font-face { font-family: "Instrument Sans"; src: url("/a/fontes/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("/a/fontes/martian-mono.woff2") format("woff2"); font-weight: 100 800; font-display: optional; }

:root {
  --lima: #C6F43C; --tinta: #0A0D0B; --tinta-2: #121814; --papel: #EEF0E6; --papel-claro: #F2EFE6;
  --apoio: #8D978F; --apoio-claro: #5E625C; --barra: #1A221D; --barra-2: #232D27; --linha: #252E28; --texto-2: #C9D0C7;
  --big: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --txt: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --raio: 14px;
  --foco: var(--lima);
  --sec-y: clamp(64px, 9vw, 136px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--tinta); color: var(--papel); font: 400 1.0625rem/1.6 var(--txt); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
/* o grão de filme do kit: leve e sem mistura no celular (a mistura recompunha a tela a cada quadro de rolagem) */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"); }
@media (min-width: 900px) and (hover: hover) { body::after { mix-blend-mode: overlay; opacity: .06; } }
img, video, svg { max-width: 100%; }
a { color: var(--lima); text-underline-offset: .2em; }
a, summary, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--lima); color: var(--tinta); }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
@media (min-width: 760px) { .wrap { width: min(1200px, 100% - 96px); } }
.estreito { max-width: 780px; }
.pular { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--lima); color: var(--tinta); padding: 10px 14px; border-radius: 6px; font-weight: 600; }
.pular:focus { left: 16px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ── tipo ── */
h1, h2 { font-family: var(--big); font-weight: 900; line-height: .95; letter-spacing: -.005em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(3.1rem, 8.6vw, 7.4rem); }
h2 { font-size: clamp(2.5rem, 5.8vw, 4.6rem); }
h3 { font-weight: 600; }
mark { background: var(--lima); color: var(--tinta); padding: 0 .1em .02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* nos títulos, o marca-texto fica entre o alto da maiúscula e o pé da letra (com a entrelinha curta, a caixa cheia invadia a linha de cima) */
h1 mark, h2 mark { padding: 0 .08em; background: linear-gradient(transparent .13em, var(--lima) .13em, var(--lima) calc(100% - .09em), transparent calc(100% - .09em)) no-repeat; background-size: 100% 100%; }
/* o destaque curto não se parte nos títulos de seção (no título grande do herói ele vazaria da coluna) */
@media (min-width: 400px) { h2 mark.curto { white-space: nowrap; } }
.lead, .sec p { text-wrap: pretty; }
.kicker { display: flex; align-items: center; gap: .75em; margin: 0; font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--lima); line-height: 1.6; }
.kicker > span[aria-hidden] { flex: none; width: .62em; height: .62em; background: var(--lima); box-shadow: 0 0 12px var(--lima); }
.lead { font-size: clamp(1.1rem, 1.55vw, 1.32rem); line-height: 1.55; color: #D5D9CF; max-width: 62ch; margin: 0; }
.fonte { font-family: var(--mono); font-size: .7rem; line-height: 1.7; letter-spacing: .02em; color: var(--apoio); margin: 18px 0 0; max-width: 90ch; }
.selo { display: inline-block; margin-right: .7em; padding: 1px 6px; border-radius: 3px; box-shadow: inset 0 0 0 1px currentColor; letter-spacing: .14em; text-transform: uppercase; }
.link-seco { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font: 600 .7rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--apoio); text-decoration: none; }
.link-seco:hover { color: var(--papel); }
.escopo-linha { margin: 14px 0 0; max-width: 58ch; font: .7rem/1.75 var(--mono); letter-spacing: .03em; color: var(--apoio); }
.nota-botao { margin: 16px 0 0; max-width: 56ch; font: .7rem/1.7 var(--mono); color: var(--apoio); }

/* o marca-texto que passa: no herói, ao abrir; nos títulos das seções, quando chegam à tela (ou preso à rolagem) */
.hero, .sec { --grifo-antes: var(--papel); --grifo-depois: var(--tinta); }
.sec.claro { --grifo-antes: var(--tinta); }
.sec.lima { --grifo-antes: var(--tinta); --grifo-depois: var(--lima); }
@keyframes grifo { from { background-size: 0% 100%; color: var(--grifo-antes); } 70% { color: var(--grifo-antes); } to { background-size: 100% 100%; color: var(--grifo-depois); } }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 mark { animation: grifo .75s cubic-bezier(.75,0,.2,1) .35s both; }
  .js .sec h2 mark { background-size: 0% 100%; color: var(--grifo-antes); transition: background-size .8s cubic-bezier(.75,0,.2,1) .2s, color .2s linear .7s; }
  .js .sec .visivel h2 mark, .js .sec h2.visivel mark { background-size: 100% 100%; color: var(--grifo-depois); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .sec h2 { view-timeline-name: --titulo; }
    .js .sec h2 mark { transition: none; animation: grifo linear both; animation-timeline: --titulo; animation-range: entry 40% cover 45%; }
  }
}

/* ── botões: uma linha, o ícone do WhatsApp, aperto no toque e hover só com mouse ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: .95em 1.35em; border-radius: 7px; background: var(--lima); color: var(--tinta); font: 600 .8rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; box-shadow: 0 0 34px rgba(198,244,60,.32); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s; }
.btn .ic { width: 1.3em; height: 1.3em; flex: none; margin-left: -.2em; }
.btn > span[aria-hidden] { display: inline-block; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); box-shadow: 0 0 52px rgba(198,244,60,.5); } .btn:hover > span[aria-hidden] { transform: translateX(4px); } }
.btn:active { transform: scale(.98); transition-duration: .08s; }
.btn:focus-visible { outline-offset: 4px; }
.btn-linha { background: transparent; color: var(--papel); box-shadow: inset 0 0 0 1px #3A453E; }
@media (hover: hover) { .btn-linha:hover { box-shadow: inset 0 0 0 1px var(--lima); } }
.btn-tinta { background: var(--tinta); color: var(--lima); box-shadow: none; }
@media (hover: hover) { .btn-tinta:hover { box-shadow: 0 16px 30px -14px rgba(10,13,11,.7); } }
.btn-pequeno { min-height: 40px; padding: .7em 1em; font-size: .68rem; box-shadow: none; }
.btn-grande { font-size: .92rem; padding: 1.25em 1.9em; margin-top: 34px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (max-width: 480px) { .acoes { display: grid; gap: 10px; } .acoes .btn { width: 100%; font-size: .74rem; letter-spacing: .06em; } .btn-grande { width: 100%; font-size: .78rem; letter-spacing: .06em; padding: 1.15em 1em; } }
@media (max-width: 359px) { .btn { white-space: normal; } }

/* ── o topo ── */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(10,13,11,.78); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(238,240,230,.07); view-transition-name: topo; }
.topo-in { display: flex; align-items: center; gap: 18px; height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--papel); text-decoration: none; }
.logo svg { width: 30px; height: auto; display: block; fill: var(--lima); }
.logo span { font-family: var(--big); font-weight: 800; font-size: 1.4rem; letter-spacing: .14em; }
.nav-principal { display: flex; gap: 22px; margin-left: auto; margin-right: 6px; }
.nav-principal a, .menu nav a { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--apoio); text-decoration: none; }
.nav-principal a:hover, .nav-principal a[aria-current="page"] { color: var(--papel); }
.nav-quiz { color: var(--lima) !important; }
.nav-quiz::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; vertical-align: 1px; background: var(--lima); box-shadow: 0 0 8px var(--lima); }
.menu { display: none; position: relative; margin-left: auto; }
.menu summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; box-shadow: inset 0 0 0 1px #3A453E; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.hamb, .hamb::before, .hamb::after { content: ""; display: block; width: 18px; height: 2px; background: var(--papel); transition: transform .25s, opacity .2s; }
.hamb { position: relative; }
.hamb::before, .hamb::after { position: absolute; left: 0; }
.hamb::before { top: -6px; } .hamb::after { top: 6px; }
.menu[open] .hamb { background: transparent; }
.menu[open] .hamb::before { transform: translateY(6px) rotate(45deg); }
.menu[open] .hamb::after { transform: translateY(-6px) rotate(-45deg); }
.menu nav { position: absolute; right: 0; top: calc(100% + 12px); z-index: 70; display: grid; min-width: 250px; padding: 8px; background: var(--tinta-2); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.menu nav a { padding: 13px 12px; border-radius: 8px; font-size: .72rem; color: var(--papel); }
.menu nav a:hover, .menu nav a:focus-visible { background: var(--barra); }
@media (max-width: 1100px) { .nav-principal { display: none; } .menu { display: block; } }
/* a barra de leitura, presa à rolagem da página */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--lima); box-shadow: 0 0 10px rgba(198,244,60,.6); transform-origin: 0 50%; animation: leitura linear both; animation-timeline: scroll(root); }
  }
}
@keyframes leitura { from { transform: scaleX(0); } }
/* no celular, o topo some quando a pessoa desce e volta quando ela sobe */
@media (max-width: 820px) { .topo { transition: transform .35s cubic-bezier(.2,.8,.2,1); } .topo.some { transform: translateY(-100%); } .topo.some:focus-within { transform: none; } }

/* ── o herói ── */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 104px) 0 clamp(56px, 8vw, 112px); background: radial-gradient(120% 90% at 18% 12%, var(--tinta-2) 0%, var(--tinta) 62%); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(80% 70% at 30% 35%, #000 0%, transparent 100%); mask-image: radial-gradient(80% 70% at 30% 35%, #000 0%, transparent 100%); }
.hero::after { content: ""; position: absolute; right: -10%; top: 10%; width: 70vw; height: 70vw; max-width: 1000px; max-height: 1000px; pointer-events: none; background: radial-gradient(closest-side, rgba(198,244,60,.13), transparent 70%); }
.marca-gigante { position: absolute; right: -14%; top: -30%; width: min(1150px, 125vw); opacity: .17; transform: rotate(-12deg); pointer-events: none; z-index: 0; }
.marca-gigante svg { width: 100%; height: auto; display: block; fill: none; stroke: var(--lima); stroke-width: 1.2; }
@supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .marca-gigante { animation: gira-rolagem linear both; animation-timeline: scroll(root); animation-range: 0 120vh; } } }
@keyframes gira-rolagem { from { transform: rotate(-12deg); } to { transform: rotate(6deg) translateY(10%); } }
@media (max-width: 760px) { .marca-gigante { top: auto; bottom: 4%; right: -46%; width: 130vw; opacity: .12; } }
.hero-grade { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
.hero-so-texto .hero-grade { grid-template-columns: minmax(0, 1fr); }
.hero-texto h1, .hero-home h1 { margin: 0 0 .32em; }
.h1-com-kicker .kicker { margin: 0 0 calc(clamp(3.1rem, 8.6vw, 7.4rem) * .3); }
.h1-com-kicker .h1-frase { display: block; }
/* o título longo (o de mandatos tem 58 letras) desce um degrau: com o tamanho cheio, o herói passava de sete linhas */
.h1-longo { font-size: clamp(2.8rem, 6.4vw, 5.6rem); }
.h1-com-kicker.h1-longo .kicker { margin-bottom: calc(clamp(2.8rem, 6.4vw, 5.6rem) * .3); }
.quiz-no-heroi { position: relative; z-index: 1; margin-top: clamp(28px, 4vw, 52px); }
@media (prefers-reduced-motion: no-preference) { .hero .kicker > span[aria-hidden] { animation: pulsa 1.1s ease-out .2s 2; } }
@keyframes pulsa { 50% { box-shadow: 0 0 0 6px rgba(198,244,60,.16), 0 0 18px var(--lima); } }
.hero-visual { align-self: center; }
.migalha { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; margin-bottom: 14px; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--apoio); }
.migalha a { display: inline-flex; align-items: center; min-height: 44px; color: var(--apoio); text-decoration: none; }
.migalha a:hover { color: var(--papel); }
.migalha [aria-current] { color: var(--papel); }
.hero-simples { padding-bottom: clamp(32px, 5vw, 64px); }
.hero-simples h1 { margin-top: .3em; font-size: clamp(2.8rem, 7vw, 5.6rem); }
.hero-simples .lead { margin-top: 18px; }
@media (max-width: 900px) { .hero-grade { grid-template-columns: 1fr; align-items: start; } .hero-visual { margin-top: 8px; } }

/* a home: o horizonte da operação vira o chão do herói, de ponta a ponta */
.hero-home { padding-bottom: 20px; }
.hero-home .hero-grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hero-home h1 { font-size: clamp(3.1rem, 7.8vw, 7.8rem); line-height: .9; max-width: 14ch; }
.hero-home .h1-com-kicker .kicker { margin-bottom: .55em; font-size: .74rem; line-height: 1.6; }
@media (min-width: 1100px) {
  .hero-home .hero-grade { grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr); column-gap: clamp(40px, 5vw, 88px); align-items: end; }
  .hero-home h1 { margin-bottom: 0; }
  .hero-home .hero-apoio { padding-bottom: .4em; }
}
.hero-fonte { position: relative; z-index: 1; }
.hero-fonte .fonte { margin-top: 10px; }

/* o horizonte da operação (o gráfico do kit) */
.horizonte { margin: 0; }
.hz-area { position: relative; }
.horizonte svg { display: block; width: 100%; height: auto; overflow: visible; }
.horizonte rect { fill: var(--barra-2); stroke: #2F3B34; stroke-width: 1; transform-box: fill-box; transform-origin: 50% 100%; animation: cresce 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 20ms + 150ms); }
.horizonte rect.pico { fill: var(--lima); stroke: none; filter: drop-shadow(0 0 10px rgba(198,244,60,.65)); }
.horizonte .rotulo-pico { position: absolute; left: calc(var(--px) * 1%); bottom: calc(var(--py) * 1% + 10px); translate: -50% 0; font: 600 clamp(.62rem, 1.05vw, .82rem) var(--mono); color: var(--lima); white-space: nowrap; text-shadow: 0 0 14px rgba(198,244,60,.55); animation: aparece .6s 1.25s both; }
.horizonte figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #2F3B34; font: .68rem var(--mono); color: var(--apoio); }
.horizonte figcaption span:nth-child(2) { color: var(--papel); }
.horizonte-cheio { position: relative; z-index: 1; margin: clamp(26px, 4vw, 60px) 0 0; }
.horizonte-cheio svg { width: 100%; height: clamp(104px, 19vw, 270px); }
.horizonte-cheio rect { vector-effect: non-scaling-stroke; animation-timing-function: cubic-bezier(.2,1.25,.35,1); animation-delay: calc(var(--i) * 14ms + 250ms); }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .hero-home .hz-area { transform-origin: 50% 100%; animation: assenta linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; } } }
@keyframes assenta { to { transform: scaleY(.5); opacity: .35; } }
@keyframes cresce { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── os quadros vivos: a ideia da página desenhada na linguagem do kit ── */
.quadro-vivo { position: relative; isolation: isolate; display: grid; align-content: space-between; gap: 16px; width: 100%; min-height: clamp(250px, 34vw, 520px); margin: 0; padding: clamp(18px, 4.5%, 34px); border-radius: var(--raio); overflow: hidden; background: radial-gradient(120% 90% at 18% 8%, #19211C 0%, var(--tinta-2) 55%, #0E120F 100%); box-shadow: 0 0 0 1px rgba(238,240,230,.07), 0 50px 120px -50px rgba(0,0,0,.85); }
.quadro-vivo::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(90% 75% at 35% 30%, #000, transparent); mask-image: radial-gradient(90% 75% at 35% 30%, #000, transparent); }
/* as marcas de corte do kit nos quatro cantos */
.quadro-vivo::after { content: ""; position: absolute; inset: 12px; z-index: -1; pointer-events: none; opacity: .4; --c: linear-gradient(var(--papel), var(--papel)); background: var(--c) 0 0 / 14px 1px, var(--c) 0 0 / 1px 14px, var(--c) 100% 0 / 14px 1px, var(--c) 100% 0 / 1px 14px, var(--c) 0 100% / 14px 1px, var(--c) 0 100% / 1px 14px, var(--c) 100% 100% / 14px 1px, var(--c) 100% 100% / 1px 14px; background-repeat: no-repeat; }
.qv-rot { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; font: 600 .64rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--apoio); }
.qv-rot b { color: var(--lima); font-weight: 600; }
.qv-leg { margin: 0; font: .64rem/1.55 var(--mono); letter-spacing: .03em; color: var(--apoio); }
.qv-leg b { color: var(--lima); font-weight: 600; }
@media (max-width: 900px) { .quadro-vivo { min-height: 0; } }
/* obra: as etapas, cada uma com o antes, o durante e o depois, acendendo em cascata */
.obra-etapas { position: relative; list-style: none; margin: 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.obra-etapas::before, .obra-etapas::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #2F3B34; }
.obra-etapas::after { background: var(--lima); box-shadow: 0 0 12px rgba(198,244,60,.6); transform-origin: 0 50%; animation: linha-obra 1.7s cubic-bezier(.6,0,.2,1) .4s both; }
.obra-etapas li { display: grid; gap: 8px; align-content: start; }
.obra-etapas .qv-rot { font-size: .56rem; letter-spacing: .08em; color: var(--papel); }
.tres { display: grid; gap: 6px; }
.tres i { --a: .35; aspect-ratio: 16 / 9; border-radius: 4px; background: rgb(198 244 60 / var(--a)); box-shadow: 0 0 14px rgb(198 244 60 / calc(var(--a) * .5)); animation: tres-acende .45s ease both; animation-delay: calc(.55s + var(--c) * .4s + var(--k, 0) * .1s); }
.tres i:nth-child(2) { --k: 1; --a: .65; }
.tres i:nth-child(3) { --k: 2; --a: 1; }
.obra-etapas li { --c: 0; }
.rec { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 8px #FF3B30; animation: rec 1.2s steps(1, end) 6; }
@keyframes linha-obra { from { transform: scaleX(0); } }
@keyframes tres-acende { from { background: rgba(238,240,230,.05); box-shadow: none; } }
@keyframes rec { 50% { opacity: .25; } }
/* dez: a mesma imagem dez vezes, ou dez imagens */
.dez-fila { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.dez-fila i { aspect-ratio: 16 / 9; border-radius: 4px; }
.igual i { background: linear-gradient(160deg, #2A322D 0 45%, #222924 45%); opacity: .55; }
.fabrica i { box-shadow: 0 0 0 1px rgba(198,244,60,.18); animation: vira .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.6s + var(--n) * 90ms); }
.fabrica .f0 { background: repeating-linear-gradient(45deg, #2B352E 0 5px, #1A221D 5px 10px); }
.fabrica .f1 { background: radial-gradient(circle at 30% 62%, var(--lima) 0 7%, transparent 8%), radial-gradient(circle at 70% 40%, #2F3B34 0 18%, transparent 19%), #1A221D; }
.fabrica .f2 { background: linear-gradient(transparent 58%, rgba(198,244,60,.55) 58% 63%, transparent 63%), repeating-linear-gradient(90deg, #232D27 0 9px, #1A221D 9px 18px); }
.fabrica .f3 { background: conic-gradient(from 210deg at 72% 38%, rgba(198,244,60,.6), #1A221D 22%, #1A221D 78%, rgba(198,244,60,.6)); }
.fabrica .f4 { background: repeating-radial-gradient(circle at 50% 130%, #2F3B34 0 3px, #1A221D 3px 8px); }
.fabrica .f5 { background: linear-gradient(115deg, #1A221D 42%, var(--lima) 42% 46%, #1A221D 46%); }
.fabrica .f6 { background: repeating-linear-gradient(0deg, #232D27 0 2px, #121814 2px 7px); }
.fabrica .f7 { background: radial-gradient(60% 90% at 50% 100%, rgba(198,244,60,.45), transparent 70%), #121814; }
.fabrica .f8 { background: repeating-linear-gradient(-30deg, #2B352E 0 2px, transparent 2px 8px), #1A221D; }
.fabrica .f9 { background: linear-gradient(90deg, transparent 46%, var(--lima) 46% 48%, transparent 48%), linear-gradient(#1A221D 62%, #2F3B34 62%); }
@keyframes vira { from { opacity: 0; transform: perspective(300px) rotateY(80deg); } }
/* piso: a pergunta à agência e os 100 quadros acesos */
.qv-piso { align-content: center; gap: 14px; }
.fileira-q, .grade-100 { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.fileira-q i { display: grid; place-items: center; aspect-ratio: 2 / 3; border: 1px dashed #4A544D; border-radius: 2px; font: 600 clamp(.42rem, 1.1vw, .6rem) var(--mono); font-style: normal; color: var(--apoio); opacity: calc(1 - var(--n) * .03); }
.grade-100 i { aspect-ratio: 2 / 3; border-radius: 2px; background: rgb(198 244 60 / var(--a)); box-shadow: 0 0 6px rgba(198,244,60,.18); animation: entra-piso .45s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(.45s + var(--n) * 11ms); }
@keyframes entra-piso { from { opacity: 0; transform: scale(.3); } }
/* arco: um compromisso, três momentos, uma série */
.arco-area { position: relative; height: 110px; }
.arco-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arco-area path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.arco-base { stroke: #2F3B34; }
.arco-luz { stroke: var(--lima); stroke-dasharray: 1; filter: drop-shadow(0 0 6px rgba(198,244,60,.7)); animation: desenha 1.6s cubic-bezier(.6,0,.2,1) .4s both; }
.arco-area .no { position: absolute; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; background: var(--lima); box-shadow: 0 0 14px rgba(198,244,60,.7); animation: no-acende .35s ease both; animation-delay: calc(.4s + var(--c) * .8s); }
.momentos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.momentos li { display: grid; justify-items: center; align-content: start; gap: 10px; }
.momentos .qv-rot { color: var(--papel); }
.pilha { display: grid; gap: 5px; width: 74%; }
.pilha i { aspect-ratio: 16 / 9; border-radius: 3px; background: rgba(198,244,60,.75); box-shadow: 0 0 10px rgba(198,244,60,.3); animation: pilha-acende .4s ease both; animation-delay: calc(.6s + var(--c) * .8s + var(--k, 0) * 90ms); }
.pilha i:nth-child(2) { --k: 1; } .pilha i:nth-child(3) { --k: 2; } .pilha i:nth-child(4) { --k: 3; }
@keyframes desenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes no-acende { from { background: var(--tinta); box-shadow: inset 0 0 0 2px #3A453E; } }
@keyframes pilha-acende { from { background: rgba(238,240,230,.06); box-shadow: none; transform: translateY(6px); } }
/* mês: as duas meias diárias que somam o piso do mês */
.cal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal li { aspect-ratio: 1; border-radius: 4px; background: rgba(238,240,230,.05); box-shadow: inset 0 0 0 1px rgba(238,240,230,.06); }
.cal li.md { background: var(--lima); box-shadow: 0 0 0 12px rgba(198,244,60,0), 0 0 16px rgba(198,244,60,.55); animation: dia-marca .9s ease-out both; animation-delay: calc(.5s + var(--k) * .9s); }
.mes-barra { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 10px; }
.mes-barra span { position: relative; overflow: hidden; border-radius: 3px; background: #1F2722; }
.mes-barra span::after { content: ""; position: absolute; inset: 0; background: var(--lima); transform-origin: 0 50%; animation: enche-mes .8s cubic-bezier(.6,0,.2,1) both; }
.mes-barra span:first-child::after { animation-delay: .9s; }
.mes-barra span:last-child::after { animation-delay: 1.8s; }
@keyframes dia-marca { 0% { background: rgba(238,240,230,.05); box-shadow: 0 0 0 0 rgba(198,244,60,.7), 0 0 0 rgba(198,244,60,0); } 45% { background: var(--lima); } }
@keyframes enche-mes { from { transform: scaleX(0); } }
@media (max-width: 900px) { .cal li { aspect-ratio: 1.7; } }

/* ── as seções e as quatro peles ── */
.sec { position: relative; padding: var(--sec-y) 0; }
.sec h2 { margin: .32em 0 .42em; max-width: 19ch; }
.sec.painel { background: var(--tinta-2); }
.sec.claro { background: var(--papel-claro); color: var(--tinta); --foco: var(--tinta); }
.claro .kicker { color: var(--tinta); }
.claro .kicker > span[aria-hidden] { background: var(--tinta); box-shadow: none; }
.claro .lead, .claro p { color: #2A2E2A; }
.claro ::selection, .lima ::selection { background: var(--tinta); color: var(--lima); }
.claro a:not(.btn), .lima a:not(.btn) { color: var(--tinta); }
.sec.lima { background: var(--lima); color: var(--tinta); --foco: var(--tinta); }
.sec.lima .kicker, .sec.lima .quem { color: var(--tinta); }
.sec.lima .kicker > span[aria-hidden] { background: var(--tinta); box-shadow: none; }
.sec.lima p, .sec.lima .lead { color: #1B2210; }
.sec.lima .fonte { color: #3B4A16; }
.sec.lima h2 mark { background-image: linear-gradient(transparent .13em, var(--tinta) .13em, var(--tinta) calc(100% - .09em), transparent calc(100% - .09em)); color: var(--lima); }
/* a costura entre duas seções escuras: o fio com as marcas de corte do kit nas pontas */
.sec:not(.claro):not(.lima):not(.painel) + .sec:not(.claro):not(.lima):not(.painel)::before { content: ""; position: absolute; top: -7px; left: 50%; translate: -50% 0; width: min(1200px, 100% - 32px); height: 15px; pointer-events: none; --c: linear-gradient(#3A453E, #3A453E); background: var(--c) 0 7px / 15px 1px, var(--c) 7px 0 / 1px 15px, var(--c) 100% 7px / 15px 1px, var(--c) calc(100% - 7px) 0 / 1px 15px, linear-gradient(90deg, transparent 24px, rgba(238,240,230,.07) 24px calc(100% - 24px), transparent 0) 0 7px / 100% 1px; background-repeat: no-repeat; }
/* o número da seção no rótulo, como índice de revista */
main { counter-reset: sec; }
.sec .kicker::after { order: -1; counter-increment: sec; content: counter(sec, decimal-leading-zero) " ·"; color: var(--apoio); }
.sec .kicker > span[aria-hidden] { order: -2; }
.sec.claro .kicker::after, .sec.lima .kicker::after { color: inherit; opacity: .55; }
.chamada .kicker::after, .faixa-zap .kicker::after { content: none; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .duas { grid-template-columns: 1fr; } }

/* o que entra */
.escopo-grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 16px; margin-top: 44px; }
.coluna { background: var(--tinta); border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px 24px; }
.claro .coluna { background: #fff; border-color: #DCD7CA; }
.coluna h3 { margin: 0 0 16px; font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--apoio); }
.claro .coluna h3 { color: var(--apoio-claro); }
.coluna ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.coluna li { display: flex; gap: .7em; align-items: baseline; }
.coluna li::before { flex: none; display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 5px; font-size: .8em; font-weight: 700; transform: translateY(.12em); }
.entra { border-color: rgba(198,244,60,.35); box-shadow: 0 40px 90px -50px rgba(198,244,60,.35); }
.claro .entra { border-color: #9DBD2A; box-shadow: 0 30px 70px -40px rgba(20,23,20,.3); }
.entra ul { grid-template-columns: 1fr 1fr; }
.entra li::before { content: "✓"; background: var(--lima); color: var(--tinta); }
.contratado li::before { content: "+"; box-shadow: inset 0 0 0 1px var(--apoio); color: inherit; }
/* com o tráfego: a base pronta e a indicação das peças que mais rendem (decisão do dono, 07/10: o tráfego não fica "fora") */
.trafego li::before { content: "↗"; box-shadow: inset 0 0 0 1px rgba(198,244,60,.6); color: var(--lima); }
.claro .trafego li::before { box-shadow: inset 0 0 0 1px var(--tinta); color: var(--tinta); }
@media (max-width: 980px) { .escopo-grade { grid-template-columns: 1fr 1fr; } .entra { grid-column: 1 / -1; } }
@media (max-width: 560px) { .escopo-grade { grid-template-columns: 1fr; } .entra ul { grid-template-columns: 1fr; } }

/* os números: painel de instrumento */
.numeros-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 40px 0 28px; border-top: 1px solid var(--linha); }
.numero { padding: 26px 24px 26px 0; border-bottom: 1px solid var(--linha); }
@media (min-width: 981px) { .numero { border-bottom: 0; } .numero + .numero { padding-left: 24px; border-left: 1px solid var(--linha); } }
@media (max-width: 980px) { .numeros-grade { grid-template-columns: 1fr 1fr; } .numero:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--linha); } }
.numero .n { margin: 0; font-family: var(--big); font-weight: 900; font-size: clamp(3.2rem, 6.2vw, 5.4rem); line-height: .9; color: var(--lima); text-shadow: 0 0 44px rgba(198,244,60,.26); font-variant-numeric: tabular-nums; white-space: nowrap; }
.numero .n.chegou { animation: chegou .7s ease-out; }
@keyframes chegou { 40% { text-shadow: 0 0 60px rgba(198,244,60,.7); } }
.numero .suf { font-size: .55em; }
.numero .r { margin: 12px 0 6px; font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--papel); }
.numero .t { margin: 0; font-size: .95rem; color: var(--apoio); }
@media (max-width: 480px) { .numero { padding: 20px 12px 20px 0; } .numero .n { font-size: clamp(2.3rem, 11vw, 3rem); } .numero .r { letter-spacing: .1em; } .numero .t { font-size: .84rem; } }
.numeros .horizonte { margin-top: 8px; }
.piso-grade { grid-template-columns: repeat(2, minmax(0, 340px)); margin-bottom: 24px; }
@media (max-width: 480px) { .piso-grade { grid-template-columns: 1fr 1fr; } }

/* como funciona: a linha do tempo */
.passos-lista { position: relative; list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: 1fr; }
.passos-lista::before, .passos-lista::after { content: ""; position: absolute; left: 21px; top: 30px; bottom: 30px; width: 2px; background: var(--linha); }
.passos-lista::after { background: var(--lima); box-shadow: 0 0 12px rgba(198,244,60,.55); transform-origin: 50% 0; transform: scaleY(0); }
.passos-lista li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 18px 0; }
.passos-lista .num { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tinta); box-shadow: inset 0 0 0 1px #3A453E; font: 600 .78rem var(--mono); color: var(--apoio); transition: background .4s, color .4s, box-shadow .4s; }
.painel .passos-lista .num { background: var(--tinta-2); }
.passos-lista li.ativo .num, html:not(.js) .passos-lista .num { background: var(--lima); color: var(--tinta); box-shadow: 0 0 18px rgba(198,244,60,.5); }
.passos-lista h3 { margin: 9px 0 6px; font-size: 1.28rem; text-wrap: balance; }
.passos-lista p { margin: 0; color: var(--texto-2); }
.passos-conta { display: none; }
@media (min-width: 980px) {
  .passos-grade { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
  .passos-cabeca { position: sticky; top: 110px; }
  .passos-lista { margin-top: 0; }
  .passos-conta { display: block; margin: 28px 0 0; font: 900 clamp(4rem, 8vw, 7.5rem)/.85 var(--big); color: transparent; -webkit-text-stroke: 1px #3A453E; font-variant-numeric: tabular-nums; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .passos-lista { view-timeline-name: --passos; }
    .passos-lista::after { animation: enche-linha linear both; animation-timeline: --passos; animation-range: entry 20% exit 70%; }
  }
}
@supports not (animation-timeline: view()) { .passos-lista::after { transform: none; opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .passos-lista::after { transform: none; } }
@keyframes enche-linha { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* já vem embalado: a mesa de aprovação desenhada */
.recursos { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 20px; }
.recursos li { padding-top: 18px; border-top: 1px solid #DCD7CA; }
.recursos h3 { margin: 0 0 6px; font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.recursos p { margin: 0; }
.mesa-demo { margin: 0; }
.mesa-cartao { position: relative; display: grid; grid-template-columns: 34% 1fr; gap: clamp(14px, 3vw, 28px); padding: clamp(14px, 3vw, 26px); border-radius: 18px; background: #FFFFFF; box-shadow: 0 30px 70px -30px rgba(20,23,20,.35), 0 1px 0 rgba(20,23,20,.06); }
.mesa-reel { position: relative; display: grid; place-items: center; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #26302A, #0B0E0C 70%); }
.mesa-reel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 45%, rgba(198,244,60,.28), transparent 70%); }
.mesa-reel svg { position: relative; width: 32%; height: auto; fill: var(--lima); }
.mesa-reel span { position: absolute; left: 10px; bottom: 10px; font: 600 .6rem var(--mono); letter-spacing: .08em; color: var(--papel); }
.mesa-corpo { display: grid; align-content: start; gap: 12px; min-width: 0; }
.mesa-estado { display: grid; margin: 0; font: 600 .62rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--apoio-claro) !important; }
.mesa-estado > span, .b-aprovar > span { grid-area: 1 / 1; }
.mesa-titulo { margin: 0; font: 800 clamp(1.2rem, 2.2vw, 1.7rem)/1.02 var(--big); color: var(--tinta) !important; }
.mesa-botoes { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.mesa-botoes > span { padding: .55em 1.1em; border-radius: 999px; font: 600 .82rem var(--txt); color: var(--tinta); box-shadow: inset 0 0 0 1px #C9C4B6; }
.mesa-botoes .b-aprovar { display: inline-grid; background: var(--lima); box-shadow: none; }
.mesa-linhas { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 8px; border-top: 1px solid #E6E1D4; font-size: .86rem; color: #3E423D; }
.mesa-linhas li { display: flex; align-items: center; gap: 9px; }
.mesa-linhas li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lima); }
.mesa-linhas li.vazio::before { background: transparent; box-shadow: inset 0 0 0 1px #B9B4A6; }
.mesa-demo .cursor { position: absolute; left: 0; top: 0; width: 24px; height: 24px; opacity: 0; pointer-events: none; }
.mesa-demo .cursor path { fill: var(--tinta); stroke: #FFFFFF; stroke-width: 1.4; stroke-linejoin: round; }
.mesa-demo figcaption { margin-top: 14px; font: .66rem/1.6 var(--mono); letter-spacing: .04em; color: var(--apoio-claro); }
.mesa-demo .nova, .mesa-demo .e2 { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mesa-demo .nova, .mesa-demo .e2 { opacity: 1; } .mesa-demo .e1 { opacity: 0; } }
html:not(.js) .mesa-demo .nova, html:not(.js) .mesa-demo .e2 { opacity: 1; }
html:not(.js) .mesa-demo .e1 { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .mesa-demo.visivel .cursor { animation: cursor-vai 1.1s cubic-bezier(.6,0,.2,1) .5s both, cursor-aperta .22s ease 1.7s, cursor-sai .4s ease 3.4s forwards; }
  .js .mesa-demo.visivel .b-aprovar { animation: aperta .22s ease 1.7s; }
  .js .mesa-demo.visivel .e1 { animation: some .2s 1.85s both; }
  .js .mesa-demo.visivel .e2 { animation: surge .2s 1.85s both; }
  .js .mesa-demo.visivel .nova { animation: surge .4s 2.05s both; }
}
@keyframes cursor-vai { from { opacity: 0; transform: translate(180px, 70px); } 25% { opacity: 1; } to { opacity: 1; transform: translate(26px, 12px); } }
@keyframes cursor-aperta { 50% { transform: translate(26px, 12px) scale(.85); } }
@keyframes cursor-sai { from { opacity: 1; transform: translate(26px, 12px); } to { opacity: 0; transform: translate(26px, 12px); } }
@keyframes aperta { 50% { transform: scale(.93); } }
@keyframes some { to { opacity: 0; } }
@keyframes surge { to { opacity: 1; } }
@media (max-width: 480px) { .mesa-cartao { grid-template-columns: 30% 1fr; } .mesa-botoes > span { padding: .5em .8em; font-size: .72rem; } }

/* o que se perde: o HD desenhado */
.arco { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 16px; }
.arco li { padding: 4px 0 4px 20px; border-left: 3px solid var(--lima); }
.arco h3 { margin: 0 0 4px; font-family: var(--big); font-weight: 800; font-size: 1.7rem; }
.arco p { margin: 0; color: var(--texto-2); }
.perde .lead { margin-top: 4px; }
.duas.inverte > :first-child { order: 0; }
.hd-plano { position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 5; max-height: 620px; border-radius: var(--raio); overflow: hidden; background: radial-gradient(90% 70% at 50% 20%, #18201B, var(--tinta) 72%); box-shadow: 0 0 0 1px rgba(238,240,230,.07), 0 50px 120px -50px rgba(0,0,0,.85); }
.hd-cena { position: absolute; inset: -10% -40% 0; perspective: 1000px; -webkit-mask-image: linear-gradient(#000 25%, transparent 85%); mask-image: linear-gradient(#000 25%, transparent 85%); }
.hd-chao { --t: 52px; --g: 6px; --th: calc(var(--t) * .5625); position: absolute; inset: 0; transform: rotateX(52deg) rotateZ(-17deg); transform-origin: 50% 20%; background: linear-gradient(90deg, var(--tinta) var(--g), transparent 0) 0 0 / calc(var(--t) + var(--g)) calc(var(--th) + var(--g)), linear-gradient(var(--tinta) var(--g), transparent 0) 0 0 / calc(var(--t) + var(--g)) calc(var(--th) + var(--g)), rgba(238,240,230,.06); }
.hd-chao i { position: absolute; left: calc(var(--x) * (var(--t) + var(--g)) + var(--g)); top: calc(var(--y) * (var(--th) + var(--g)) + var(--g)); width: var(--t); height: var(--th); border-radius: 2px; background: var(--lima); box-shadow: 0 0 26px rgba(198,244,60,.75); }
@media (prefers-reduced-motion: no-preference) {
  .js .hd-chao i { background: rgba(198,244,60,.08); box-shadow: none; }
  .js .hd-plano.visivel .hd-chao i { animation: acende-hd .5s ease forwards; animation-delay: calc(.5s + var(--k) * .6s); }
}
@keyframes acende-hd { to { background: var(--lima); box-shadow: 0 0 26px rgba(198,244,60,.75); } }
.hd-pe { position: absolute; left: 22px; right: 22px; bottom: 18px; display: grid; gap: 10px; }
.hd-legenda { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 600 .64rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--apoio); }
.hd-legenda span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; vertical-align: -1px; background: #3A443E; }
.hd-legenda .vira::before { background: var(--lima); box-shadow: 0 0 8px var(--lima); }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .hd-chao { animation: deriva linear both; animation-timeline: view(); } } }
@keyframes deriva { from { transform: rotateX(52deg) rotateZ(-20deg) translateY(3%); } to { transform: rotateX(52deg) rotateZ(-13deg) translateY(-3%); } }
@media (max-width: 900px) { .hd-plano { aspect-ratio: 16 / 11; } }

/* o caso medido: em lima, as colunas sobem do chão */
.quem { display: block; margin: 0 0 .7em; font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; line-height: 1.6; color: var(--apoio); }
.caso-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.caso h2 { max-width: 16ch; }
.caso .ponte { margin: 0 0 14px; max-width: 60ch; font-size: .98rem; }
.barras { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; height: clamp(220px, 30vw, 420px); border-bottom: 2px solid currentColor; }
.barras .col { height: calc(var(--h) * 1%); min-height: 8px; border-radius: 10px 10px 0 0; background: rgba(10,13,11,.16); transform-origin: 50% 100%; }
.barras .depois { background: var(--tinta); }
.sec:not(.lima) .barras .antes { background: #2F3B34; }
.sec:not(.lima) .barras .depois { background: var(--lima); box-shadow: 0 0 34px rgba(198,244,60,.4); }
.legendas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 14px; }
.cl .cr { margin: 0; font: 600 .66rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.cl .cn { margin: 6px 0; font: 900 clamp(2.2rem, 4.6vw, 3.6rem)/.9 var(--big); font-variant-numeric: tabular-nums; }
.cl.depois .cn { font-size: clamp(3rem, 7vw, 5.6rem); }
.cl .ct { margin: 0; font-size: .9rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .caso-colunas .col { transition: transform 1.3s cubic-bezier(.2,1.15,.3,1) .2s; }
  .js .caso-colunas .depois { transition-delay: .55s; }
  .js .caso-colunas:not(.visivel) .col { transform: scaleY(0); }
}
@media (max-width: 900px) { .caso-grade { grid-template-columns: 1fr; } .barras { height: 220px; } }

/* pergunte antes de assinar */
.perguntas-lista { list-style: none; padding: 0; margin: 40px 0 0; }
.perguntas-lista li { display: grid; grid-template-columns: 58px 1fr 1.1fr; gap: 14px 28px; align-items: start; padding: 30px 0; border-top: 1px solid var(--linha); }
.perguntas-lista .num { font-family: var(--mono); font-weight: 600; color: var(--lima); padding-top: 6px; }
.perguntas-lista h3 { margin: 0; text-wrap: balance; font-family: var(--big); font-weight: 800; font-size: clamp(1.6rem, 2.5vw, 2.15rem); line-height: 1.04; }
.perguntas-lista p { margin: 0; color: var(--texto-2); }
.perguntas-lista .por-escrito { grid-column: 2 / -1; padding: 12px 14px; border-left: 3px solid var(--lima); background: rgba(198,244,60,.06); font-size: .97rem; color: var(--papel); }
@media (max-width: 860px) { .perguntas-lista li { grid-template-columns: 44px 1fr; gap: 12px 16px; } .perguntas-lista p, .perguntas-lista .por-escrito { grid-column: 2; } }
.mais-link, .faq-fim, .chamada-quiz { margin: 26px 0 0; }
.mais-link a, .faq-fim a, .chamada-quiz a { display: inline-flex; align-items: center; min-height: 44px; font: 600 .74rem var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.mais-link a:hover, .faq-fim a:hover, .chamada-quiz a:hover { text-decoration: underline; }

/* para quem: os cartões (no celular, um índice) */
.cartoes { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cartoes a { position: relative; display: block; height: 100%; padding: 26px 22px 60px; border-radius: var(--raio); background: var(--tinta-2); border: 1px solid var(--linha); color: inherit; text-decoration: none; overflow: hidden; isolation: isolate; transition: border-color .2s, transform .2s, background .2s; }
.painel .cartoes a { background: var(--tinta); }
.cartoes a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(198,244,60,.13), transparent 60%); opacity: 0; transition: opacity .3s; }
@media (hover: hover) { .cartoes a:hover { border-color: var(--lima); transform: translateY(-3px); } .cartoes a:hover::before { opacity: 1; } .cartoes a:hover .seta { transform: translateX(6px); } }
@media (hover: none) { .cartoes a:active { border-color: var(--lima); } }
.cartoes h3 { margin: 0 0 8px; text-wrap: balance; font-family: var(--big); font-weight: 800; font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 1; }
.cartoes p { margin: 0; color: var(--apoio); }
.cartoes .seta { position: absolute; left: 22px; bottom: 18px; font-size: 1.4rem; color: var(--lima); transition: transform .2s; }
.cartoes .c-quiz a { background: transparent; border: 1px dashed rgba(198,244,60,.55); }
.selo-quiz { display: block; width: max-content; margin-bottom: 12px; padding: 3px 8px; border-radius: 4px; background: var(--lima); color: var(--tinta); font: 600 .6rem var(--mono); letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 980px) { .cartoes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .cartoes { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--linha); }
  .cartoes a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; min-height: 76px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; background: none !important; }
  .cartoes h3 { margin: 0; font-size: 1.7rem; }
  .cartoes p { grid-column: 1; font-size: .95rem; }
  .cartoes .seta { position: static; grid-column: 2; grid-row: 1 / span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linha); font-size: 1.05rem; }
  .cartoes a:active .seta { background: var(--lima); color: var(--tinta); }
  .cartoes .c-quiz a { border: 0; border-bottom: 1px dashed rgba(198,244,60,.55); }
  .selo-quiz { grid-column: 1; margin-bottom: 6px; }
}

/* o que vira peça, o sigilo e a equipe */
.lista-itens { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.lista-itens li { position: relative; padding: 20px 0 20px 34px; border-top: 1px solid var(--linha); font-size: 1.12rem; }
.lista-itens li::before { content: ""; position: absolute; left: 3px; top: 29px; width: 11px; height: 11px; background: var(--lima); box-shadow: 0 0 12px var(--lima); }
.claro .lista-itens li { border-top-color: #DCD7CA; }
.claro .lista-itens li::before { background: var(--tinta); box-shadow: none; }
@media (max-width: 760px) { .lista-itens { grid-template-columns: 1fr; } }

/* capítulos (a obra, a agenda, o mês) */
.capitulos-lista { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.capitulos-lista li { position: relative; padding: 28px 22px 0 0; border-top: 2px solid var(--linha); }
.capitulos-lista li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--lima); box-shadow: 0 0 12px var(--lima); }
.capitulos-lista .num { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; color: var(--lima); }
.capitulos-lista h3 { margin: 8px 0 6px; font-family: var(--big); font-weight: 800; font-size: 1.6rem; line-height: 1; text-wrap: balance; }
.capitulos-lista p { margin: 0; color: var(--texto-2); }
@media (max-width: 900px) {
  .capitulos-lista { grid-template-columns: 1fr; margin-left: 6px; }
  .capitulos-lista li { padding: 4px 0 26px 26px; border-top: 0; border-left: 2px solid var(--linha); }
  .capitulos-lista li::before { top: 6px; left: -7px; }
}

/* a grade de objetivos, o elenco, a tabela e o texto que aprofunda */
.grade-itens { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.grade-itens li { padding: 24px 22px; border-radius: var(--raio); background: var(--tinta-2); border: 1px solid var(--linha); }
.grade-itens h3 { margin: 0 0 8px; font-family: var(--big); font-weight: 800; font-size: 1.75rem; line-height: 1; }
.grade-itens p { margin: 0; color: var(--texto-2); }
.claro .grade-itens li { background: #fff; border-color: #DCD7CA; }
.claro .grade-itens p { color: #2A2E2A; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-content: center; }
.chips li { padding: .7em 1.1em; border-radius: 999px; border: 1px solid #3A453E; font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.chips li:first-child { border-color: var(--lima); color: var(--lima); }
.tabela-rolar { margin-top: 40px; overflow-x: auto; }
.tabela-rolar:focus-visible { outline-offset: 6px; }
.tabela table { width: 100%; min-width: 560px; border-collapse: collapse; }
.tabela th, .tabela td { padding: 18px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--linha); }
.tabela thead th, .tabela thead td { border-top: 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lima); }
.tabela tbody th { width: 26%; font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--apoio); }
.tabela tbody td { color: var(--texto-2); }
@media (max-width: 620px) {
  .tabela table { min-width: 0; table-layout: fixed; }
  .tabela th, .tabela td { padding: 14px 8px; font-size: .95rem; }
  .tabela th:first-child, .tabela td:first-child { padding-left: 0; }
  .tabela tbody th { width: 30%; font-size: .62rem; letter-spacing: .1em; }
  .tabela thead th { font-size: .64rem; letter-spacing: .12em; }
}
.aprofunda .lead { margin-bottom: 8px; }
.aprofunda h3 { margin: 1.5em 0 .3em; font-family: var(--big); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.02; }
.aprofunda p { margin: 0; color: var(--texto-2); font-size: 1.08rem; }

/* a faixa de WhatsApp (lima) */
.sec.faixa-zap { padding: 34px 0; }
.faixa-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.faixa-in p { margin: 0; max-width: 32ch; font-family: var(--big); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.05; color: var(--tinta) !important; }
@media (max-width: 480px) { .faixa-in .btn { width: 100%; font-size: .74rem; letter-spacing: .06em; } }

/* o glossário */
.glossario-lista { margin: 40px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.glossario-lista div { padding: 18px 0; border-top: 1px solid var(--linha); scroll-margin-top: 90px; }
.glossario-lista dt { font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lima); }
.glossario-lista dfn { font-style: normal; }
.glossario-lista dd { margin: 6px 0 0; color: var(--texto-2); }
@media (max-width: 760px) { .glossario-lista { grid-template-columns: 1fr; } }

/* perguntas frequentes: acordeão (abre uma, fecha a outra) */
.faq-lista { margin-top: 36px; border-top: 1px solid var(--linha); max-width: 960px; }
.faq-lista details { border-bottom: 1px solid var(--linha); }
.faq-lista summary { display: grid; grid-template-columns: 40px 1fr 22px; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary:focus-visible { outline-offset: 4px; border-radius: 6px; }
.faq-lista summary:active { background: rgba(238,240,230,.03); }
.faq-n { font: 600 .7rem var(--mono); color: var(--apoio); transition: color .2s; }
.faq-lista summary h3 { margin: 0; font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.3; transition: transform .3s cubic-bezier(.2,.8,.2,1), color .2s; }
@media (hover: hover) { .faq-lista summary:hover h3 { transform: translateX(6px); } }
.faq-lista details[open] h3, .faq-lista details[open] .faq-n { color: var(--lima); }
.faq-lista details p { margin: 0 0 26px 56px; max-width: 70ch; color: var(--texto-2); }
.mais { position: relative; flex: none; width: 22px; height: 22px; }
.mais::before, .mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: var(--lima); transform: translate(-50%, -50%); transition: transform .2s; }
.mais::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-lista details[open] .mais::after { transform: translate(-50%, -50%) rotate(0); }
@media (max-width: 560px) { .faq-lista summary { grid-template-columns: 28px 1fr 22px; gap: 12px; } .faq-lista details p { margin-left: 40px; } }
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .faq-lista { interpolate-size: allow-keywords; }
    .faq-lista details::details-content { block-size: 0; overflow-y: clip; opacity: 0; transition: block-size .4s cubic-bezier(.2,.8,.2,1), opacity .3s, content-visibility .4s allow-discrete; }
    .faq-lista details[open]::details-content { block-size: auto; opacity: 1; }
  }
}

/* as regras (mandatos) e o texto (privacidade) */
.regras h2 { max-width: 22ch; }
.texto h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 1.5em 0 .35em; }
.texto h2:first-child { margin-top: 0; }
.texto p { color: var(--texto-2); overflow-wrap: anywhere; }

/* a faixa do quiz: o texto e o maço de cartas que se abre */
.qf-grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.qf-texto .btn { margin-top: 28px; }
.quiz-cartas { position: relative; display: block; height: clamp(240px, 28vw, 340px); text-decoration: none; }
.qc { position: absolute; left: 50%; top: 50%; width: min(70%, 300px); aspect-ratio: 4 / 5; translate: -50% -50%; display: grid; align-content: start; gap: 10px; padding: 18px; border-radius: 16px; background: var(--tinta); box-shadow: 0 30px 60px -30px rgba(10,13,11,.6); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.qc:nth-child(1) { z-index: 3; transform: rotate(-3deg); }
.qc:nth-child(2) { z-index: 2; background: #1A221D; transform: rotate(5deg) translate(16px, 6px); }
.qc:nth-child(3) { z-index: 1; background: #232D27; transform: rotate(12deg) translate(32px, 12px); }
.js .quiz-cartas:not(.visivel) .qc { transform: none; }
@media (hover: hover) { .quiz-cartas:hover .qc:nth-child(2) { transform: rotate(9deg) translate(40px, 4px); } .quiz-cartas:hover .qc:nth-child(3) { transform: rotate(18deg) translate(78px, 10px); } }
.qc-n { font: 600 .62rem var(--mono); letter-spacing: .16em; color: var(--lima); }
.qc-p { font: 900 clamp(1.5rem, 2.4vw, 2rem)/1 var(--big); color: var(--papel); text-wrap: balance; }
.qc-op { display: block; padding: .6em .9em; border-radius: 10px; box-shadow: inset 0 0 0 1px #3A453E; font: 500 .74rem/1.3 var(--txt); color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-op.on { background: #1A2412; color: var(--papel); box-shadow: inset 0 0 0 1px var(--lima); }
@media (max-width: 900px) { .qf-grade { grid-template-columns: 1fr; } .quiz-cartas { order: -1; height: 320px; margin-bottom: 8px; } .qc { width: min(60%, 236px); } }

/* a chamada do fim */
.chamada { background: radial-gradient(55% 120% at 85% 50%, rgba(198,244,60,.14), transparent 70%), var(--tinta); }
.chamada h2 { max-width: 20ch; }
.chamada .lead { margin-top: 6px; }

/* o rodapé: a assinatura */
.rodape { padding: 60px 0 34px; border-top: 1px solid var(--linha); color: var(--apoio); font-size: .95rem; overflow: hidden; }
.rodape-grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.rodape p { margin: 14px 0 0; max-width: 40ch; }
.rodape h2 { margin: 0 0 6px; font-family: var(--mono); font-weight: 600; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--papel); }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.rodape li a, .rodape li .link { display: inline-flex; align-items: center; min-height: 40px; color: var(--apoio); text-decoration: none; }
.rodape a:hover { color: var(--papel); }
.rodape .logo { color: var(--papel); }
.rodape-marca { margin: clamp(40px, 6vw, 80px) 0 0 !important; max-width: none !important; overflow: hidden; font: 900 clamp(5.5rem, 31vw, 27rem)/.78 var(--big); letter-spacing: -.01em; text-align: center; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px #2A342D; user-select: none; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .rodape-marca { animation: contorno linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; } } }
@keyframes contorno { to { -webkit-text-stroke-color: rgba(198,244,60,.6); } }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(238,240,230,.06); font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; }
.legal p { margin: 0; max-width: none; }
@media (max-width: 980px) { .rodape-grade { grid-template-columns: 1fr 1fr; } .rodape-marca-col { grid-column: 1 / -1; } }
@media (max-width: 560px) { .rodape-grade { gap: 28px 20px; } .rodape-grade > nav[aria-label="Páginas"] { grid-column: 1 / -1; } }

/* o botão do WhatsApp que acompanha a rolagem: some quando outro botão está na tela */
.flutuante { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 95; display: inline-flex; align-items: center; min-width: 56px; height: 56px; padding: 0 13px; border-radius: 28px; background: var(--lima); color: var(--tinta); text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 30px rgba(198,244,60,.35); }
.flutuante svg { width: 30px; height: 30px; flex: none; }
.flutuante .rotulo { max-width: 10ch; margin-left: 10px; overflow: hidden; white-space: nowrap; font: 600 .74rem var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: max-width .45s cubic-bezier(.2,.8,.2,1), margin .45s, opacity .3s; }
.flutuante.recolhe .rotulo { max-width: 0; margin-left: 0; opacity: 0; }
@media (hover: hover) { .flutuante.recolhe:hover .rotulo { max-width: 10ch; margin-left: 10px; opacity: 1; } }
.js .flutuante { opacity: 0; pointer-events: none; transform: translateY(14px); transition: opacity .3s, transform .3s; }
.js .flutuante.mostra { opacity: 1; pointer-events: auto; transform: none; }

/* a entrada ao rolar (só com JavaScript: sem ele, tudo aparece); as listas entram item a item */
.js .rev { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js .rev.visivel { opacity: 1; transform: none; }
.js .rev:is(ol, ul) { opacity: 1; transform: none; }
.js .rev:is(ol, ul) > li { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d, 0) * 60ms); }
.js .rev.visivel:is(ol, ul) > li { opacity: 1; transform: none; }

/* a troca de página: a página cruza e o topo fica parado */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rev, .js .rev:is(ol, ul) > li { opacity: 1; transform: none; }
  .js .caso-colunas:not(.visivel) .col { transform: none; }
}

/* ── o quiz (site/quiz.js): uma pergunta por tela, nada guardado ── */
.quiz-sec { padding-top: 0; }
.quiz { position: relative; max-width: 880px; margin-inline: auto; border: 1px solid var(--linha); border-radius: 20px; background: linear-gradient(180deg, #111712, #0C100D); box-shadow: 0 40px 120px -60px rgba(198,244,60,.35); overflow: hidden; scroll-margin-top: 84px; }
.quiz-barra { height: 4px; background: #1A221D; }
.quiz-barra span { display: block; height: 100%; width: 0; background: var(--lima); box-shadow: 0 0 14px var(--lima); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.quiz-palco { padding: clamp(22px, 5vw, 56px); min-height: 440px; }
.quiz-passo { border: 0; margin: 0; padding: 0; min-width: 0; transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.quiz-passo.entra { opacity: 0; transform: translateY(14px); }
.quiz-passo h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); max-width: 22ch; margin: .1em 0 .35em; outline: none; }
.quiz-contador { font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lima); padding: 0; margin: 0 0 6px; }
.quiz-ajuda { color: var(--apoio); margin: 0 0 6px; }
.quiz-opcoes { display: grid; gap: 10px; margin-top: 22px; }
.quiz-opcoes.duas { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .quiz-opcoes.duas { grid-template-columns: 1fr; } }
.quiz-opcao { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; text-align: left; font: 500 1.02rem/1.35 var(--txt); color: var(--papel); background: #141B16; border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
@media (hover: hover) { .quiz-opcao:hover { border-color: #4A5A4F; transform: translateY(-1px); } }
.quiz-opcao:active { transform: scale(.99); }
.quiz-opcao[aria-pressed="true"] { border-color: var(--lima); background: #1A2412; box-shadow: inset 0 0 0 1px var(--lima); }
.quiz-opcao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.quiz-tecla { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; font: 600 .78rem var(--mono); color: var(--apoio); box-shadow: inset 0 0 0 1px #3A453E; }
.quiz-opcao[aria-pressed="true"] .quiz-tecla { background: var(--lima); color: var(--tinta); box-shadow: none; }
.quiz-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.quiz-acoes.fim { justify-content: flex-start; }
.quiz-acoes .btn[disabled] { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }
.quiz-voltar { background: none; border: 0; color: var(--apoio); font: 600 .74rem var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; padding: 12px 2px; min-height: 44px; }
.quiz-voltar:hover { color: var(--papel); }
.quiz-resultado h2 { max-width: 20ch; }
.quiz-texto { font-size: 1.12rem; color: #D5D9CF; max-width: 62ch; margin: 0; }
.quiz-placar { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: center; margin: 26px 0 0; padding: 20px 22px; border-radius: 14px; background: #141B16; border: 1px solid rgba(198,244,60,.35); }
.quiz-placar .pts { grid-row: span 2; font: 900 clamp(3rem, 7vw, 4.4rem)/.9 var(--big); color: var(--lima); font-variant-numeric: tabular-nums; }
.quiz-placar h3 { margin: 0; font: 600 .72rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--papel); }
.quiz-placar p { margin: 0; color: var(--texto-2); }
.quiz-placar ul { grid-column: 1 / -1; list-style: none; margin: 12px 0 0; padding: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; border-top: 1px solid var(--linha); font-size: .92rem; color: var(--texto-2); }
.quiz-placar li::before { content: "✓"; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-right: .5em; border-radius: 4px; background: var(--lima); color: var(--tinta); font-size: .8em; font-weight: 700; }
.quiz-placar li.falta::before { content: "?"; background: transparent; color: var(--apoio); box-shadow: inset 0 0 0 1px #3A453E; }
@media (max-width: 620px) { .quiz-placar ul { grid-template-columns: 1fr; } }
.quiz-blocos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
@media (max-width: 720px) { .quiz-blocos { grid-template-columns: 1fr; } }
.quiz-bloco { background: #141B16; border: 1px solid var(--linha); border-radius: 14px; padding: 20px 22px; }
.quiz-bloco h3 { margin: 0 0 12px; font: 600 .72rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--lima); }
.quiz-bloco ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--texto-2); }
.quiz-formato { margin: 18px 0 0; padding: 16px 20px; border-left: 3px solid var(--lima); background: rgba(198,244,60,.06); border-radius: 0 10px 10px 0; color: #D5D9CF; }
.quiz-ramo { margin: 16px 0 0; }
.quiz-nota { margin: 18px 0 0; font: .7rem/1.6 var(--mono); color: var(--apoio); }
.quiz-lista { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
.quiz-lista li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--linha); }
.quiz-lista .num { font: 600 .74rem var(--mono); color: var(--lima); padding-top: 4px; }
.quiz-lista h3 { margin: 0 0 6px; font: 800 1.35rem/1.1 var(--big); }
.quiz-lista p { margin: 4px 0 0; color: var(--texto-2); font-size: .95rem; }
.quiz-lista b { color: var(--papel); font-weight: 600; }
.quiz.vivo .quiz-semjs { display: none; }
@media (prefers-reduced-motion: reduce) { .quiz-passo, .quiz-barra span { transition: none; } }