/* REINO/BABEL · "A NAVE DAS SETE TOCHAS" (ordem 038, escolha dele: "REINO inteiro") · o DESIGN DO REINO publicado dentro da
   estrutura aprovada da B (abertura, viagem, câmera, sequência, copys: LINHA.md §2–§5). O cânone mora em imperio.css (carregado
   ANTES deste arquivo; nenhum token dele é redefinido aqui). A noite é o palco; o marfim é a voz; o ouro e a folha são a marca;
   cada capítulo é aceso por UMA tocha heráldica (as 7 cores dos títulos do REINO) que pinta só luz, halo, traço e espaço —
   nunca a letra. As sete só se encontram no clímax (a rosácea da BABEL) e no fim (o nó do empresário): o pico da peça. */
:root {
  --halo: 0 0 1px var(--noite), 0 0 6px var(--noite), 0 0 16px var(--noite), 0 2px 28px var(--noite);
  --luz: var(--folha);
}
* { box-sizing: border-box; }
html { background: var(--noite); color: var(--marfim); scroll-behavior: auto; }
body { margin: 0; font-family: var(--corpo); font-weight: 500; font-size: 18px; line-height: 1.35; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
#abobada { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#rolagem { height: 4850vh; } /* 150vh por batida (mais a folga das pontas): o tempo de ler; o JS escreve o valor exato */
body.portal { overflow: hidden; height: 100vh; }
body.portal #rolagem { height: 0; }
body.portal #planos, body.portal .trilho, body.portal #anel { display: none; }
body.palco { overflow: hidden; height: 100vh; }
body.palco #rolagem { height: 0; }
#planos { position: fixed; inset: 0; z-index: 2; pointer-events: none; }

/* cada plano é um lugar no espaço: entra em FOCO quando a câmera chega, SEGURA (o tempo de ler) e sai crescendo (o JS escreve --escala, --desfoque) */
.plano { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; row-gap: clamp(12px, 2.2vh, 22px); text-align: center;
  padding: max(64px, env(safe-area-inset-top) + 56px) 24px max(24px, env(safe-area-inset-bottom)); opacity: 0; will-change: transform, filter, opacity;
  filter: blur(var(--desfoque, 0px)); transform: scale(var(--escala, 1)); transform-origin: 50% 50%; text-shadow: var(--halo); }
.plano::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 40% 52% at 50% 54%, rgba(5, 4, 8, .72) 0%, rgba(5, 4, 8, .42) 55%, rgba(5, 4, 8, 0) 100%); }   /* a noite já é o palco: a placa só assenta a letra, não apaga as tochas */
/* no Cadastro o mapa do Brasil é a prova (ordem do juiz cego): a elipse de pedra abre para o mapa aparecer; o texto segue com o halo */
.plano[data-cap="cadastro"]::before { background: linear-gradient(180deg, rgba(5, 4, 8, .88) 0%, rgba(5, 4, 8, 0) 20%), radial-gradient(ellipse 50% 56% at 50% 50%, rgba(5, 4, 8, .94) 0%, rgba(5, 4, 8, .8) 50%, rgba(5, 4, 8, 0) 100%); }
/* medido por cores.mjs (9 textos abaixo do WCAG com a elipse aberta): o núcleo sob o texto volta a .92, a arquitrave ganha uma faixa
   de pedra no alto, e o mapa aparece pelas bordas e pela metade de baixo, onde não há letra */
.nichos .etc { opacity: 1; }
/* o rótulo "exemplo de tela" sobre o mapa vira um selo de pedra (medido: #bfe0ff sobre #4c79a8 dava 3,3:1 a 390) */
.plano[data-cap="cadastro"] .rotulo { background: rgba(5, 4, 8, .88); padding: 3px 12px; border-radius: 999px; }
.plano.longe { display: none; }
.plano.vivo { pointer-events: auto; }
.plano[data-cap="abertura"] { --luz: var(--visconde); }
.plano[data-cap="cadastro"] { --luz: var(--conde); }
.plano[data-cap="match"] { --luz: var(--marques); }
.plano[data-cap="clube"] { --luz: var(--duque); }
.plano[data-cap="app"] { --luz: var(--imperador); }
.plano[data-cap="passagem"] { --luz: var(--principe); }
.plano[data-cap="babel"], .plano[data-cap="fim"] { --luz: var(--rei); }
/* a tocha como TRAÇO visível sobre a noite (a tintura heráldica é escura para virar linha fina): sobe para a luz dela, nunca letra */
.plano { --traco-luz: color-mix(in oklab, var(--luz) 58%, var(--marfim)); --brilho: color-mix(in srgb, var(--luz) 70%, transparent); }
.plano > * { margin: 0; max-width: min(92vw, 1100px); }
/* o ritmo de ler (incremento 2): as partes de um plano entram em FOCO na sua vez — título (e1), frase (e2), prova (e3); o JS
   escreve --e1/--e2/--e3 (0→1) pela distância da câmera; cada parte desembaça e assenta (escala), nunca fade-and-slide */
.plano > .e1, .plano > .e2, .plano > .e3 { opacity: var(--e, 1); filter: blur(calc((1 - var(--e, 1)) * 9px)); transform: scale(calc(.955 + .045 * var(--e, 1))); }
.plano > .e1 { --e: var(--e1, 1); }
.plano > .e2 { --e: var(--e2, 1); }
.plano > .e3 { --e: var(--e3, 1); }
.reduzido .plano > .e1, .reduzido .plano > .e2, .reduzido .plano > .e3 { opacity: 1; filter: none; transform: none; }

/* CENA 0 · o portal: a noite do REINO, o sigilo se traça em ouro, REINO é gravado (o traço de ouro corre a letra e o marfim
   assenta dentro), BABEL embaixo em folha — o lettering único; o botão é o do REINO (moldura marfim, caixa alta) */
#portal { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; align-content: center; row-gap: clamp(20px, 4.4vh, 48px); text-align: center; padding: 24px; will-change: transform, opacity; }
#portal.subindo { pointer-events: none; }
.sigilo-grande, .marca { fill: none; stroke: var(--ouro); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.sigilo-grande .s5, .marca .s5 { fill: var(--folha); stroke: none; }
.sigilo-grande { width: clamp(64px, 7vw, 96px); height: auto; filter: drop-shadow(0 0 18px rgba(184, 146, 63, .35)); }
.sigilo-grande .s1, .sigilo-grande .s2, .sigilo-grande .s3, .sigilo-grande .s4 { stroke-dasharray: 300; stroke-dashoffset: 300; animation: tracar 1.2s var(--curva) .1s forwards; }
.sigilo-grande .s5 { opacity: 0; animation: aparecer .6s var(--curva) 1.2s forwards; }
@keyframes tracar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }
.marca { position: fixed; right: clamp(18px, 3vw, 40px); bottom: max(18px, env(safe-area-inset-bottom)); width: 28px; height: 28px; opacity: .5; z-index: 3; pointer-events: none; }
body.portal .marca { display: none; }
.lettering { margin: 0; display: grid; justify-items: center; row-gap: 0; font-family: var(--display); line-height: .86; }
.lettering .reino { width: clamp(320px, 66vw, 1000px); height: auto; overflow: visible; font-family: var(--display); font-weight: 600; font-size: 250px; letter-spacing: -.035em; }
.lettering .reino text { fill: var(--marfim); fill-opacity: 0; stroke: var(--folha); stroke-width: 1.4px; stroke-dasharray: 900; stroke-dashoffset: 900; paint-order: stroke fill;
  animation: gravar 2.2s var(--curva) .35s forwards, assentar 1.1s var(--curva) 1.5s forwards; }
@keyframes gravar { to { stroke-dashoffset: 0; } }
@keyframes assentar { to { fill-opacity: 1; stroke-width: .6px; } }
.lettering .babel { position: relative; margin-top: .12em; font-weight: 400; font-size: clamp(34px, 5.4vw, 84px); letter-spacing: .42em; padding-left: .42em; color: var(--folha);
  opacity: 0; animation: aparecer 1s var(--curva) 1.9s forwards; text-shadow: 0 0 34px rgba(205, 181, 120, .35); }
.lettering .babel::before { content: ''; position: absolute; left: 12%; right: 12%; top: -.34em; height: 1px; background: linear-gradient(90deg, transparent, var(--ouro), transparent); }
#conhecer { appearance: none; border: 1px solid var(--marfim); background: transparent; color: var(--marfim); font: 700 15px/1 var(--corpo); letter-spacing: .28em; text-transform: uppercase; padding: 17px 30px; cursor: pointer;
  opacity: 0; animation: aparecer .9s var(--curva) 2.4s forwards; transition: background .4s, color .4s; }
#conhecer:hover, #conhecer:focus-visible { background: var(--marfim); color: var(--noite); outline: 2px solid var(--marfim); outline-offset: 3px; }

/* o KICKER do REINO: o nome do capítulo em ouro, CAIXA ALTA, no alto do eixo, sempre no mesmo lugar; um fio de ouro de cada lado
   e, embaixo, o traço curto na tocha do capítulo (a cor é traço, nunca letra) */
.capitulo { position: absolute; top: max(24px, env(safe-area-inset-top) + 6px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
  font: 700 15px/1 var(--corpo); letter-spacing: .34em; text-transform: uppercase; color: var(--ouro); white-space: nowrap; padding-left: .34em; }
.capitulo::before, .capitulo::after { content: ''; width: 36px; height: 1px; background: var(--ouro); flex: none; }
.plano > .capitulo { max-width: none; }
.capitulo.babel-nome { font: 600 clamp(26px, 2.6vw, 40px)/1 var(--display); letter-spacing: .3em; text-transform: none; color: var(--folha); text-shadow: var(--halo), 0 0 30px rgba(205, 181, 120, .3); }
/* Benefício do REINO: a frase-sub do kicker (itálico cinza) */
.beneficio-rotulo { position: absolute; top: calc(max(24px, env(safe-area-inset-top) + 6px) + 34px); left: 50%; transform: translateX(-50%); font-family: var(--display); font-style: italic; font-size: 18px; color: var(--cinza); white-space: nowrap; }
.babel-nome + .beneficio-rotulo { top: calc(max(24px, env(safe-area-inset-top) + 6px) + 56px); }
/* o título do REINO: Fraunces 600 monumental, em linhas; a ÚLTIMA acesa em folha, e uma varredura de luz passa por ela uma vez
   quando o plano assenta (o brilho só no impacto) */
.gancho { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 6.2vw, 100px); line-height: .96; letter-spacing: -.035em; max-width: 16ch; color: var(--marfim); }
.gancho .l { display: block; }
.gancho .l.brilha { position: relative; color: var(--folha); }
.gancho .l.brilha::after { content: ''; position: absolute; inset: -8% -3%; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(239, 228, 204, .55) 50%, transparent 65%); mix-blend-mode: screen; transform: translateX(-130%); opacity: 0; }
.plano.vivo .gancho .l.brilha::after { animation: varre 1.3s var(--curva) .2s 1 forwards; }
@keyframes varre { 0% { transform: translateX(-130%); opacity: 1; } 100% { transform: translateX(130%); opacity: 0; } }
.gancho.pequeno { font-size: clamp(32px, 3.8vw, 60px); }
/* o índice do item (o grau do REINO): marfim firme, com o risco da tocha embaixo */
.indice { position: relative; font: 700 clamp(15px, 1.2vw, 18px)/1.2 var(--corpo); letter-spacing: .16em; text-transform: uppercase; color: var(--marfim); padding-bottom: 12px; }
.indice::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 64px; height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--traco-luz) 30%, var(--ouro) 70%, transparent); box-shadow: 0 0 10px var(--brilho); }
/* a frase-sub do REINO: Fraunces itálico, cinza */
.linha { font: italic 400 clamp(18px, 1.6vw, 25px)/1.38 var(--display); color: var(--cinza); max-width: 40ch; }
.rotulo { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 17px; color: var(--cinza); }
.acendem > li { opacity: .34; transition: opacity .2s, color .2s; }
.acendem > li.aceso { opacity: 1; }
ol, ul { list-style: none; margin: 0; padding: 0; }
/* o rosto de empresário (ícone, como ele pediu): um busto num aro de luz */
.rosto { width: clamp(40px, 4vw, 64px); height: auto; fill: none; stroke: var(--traco-luz); stroke-width: 2; filter: drop-shadow(0 0 8px var(--brilho)); }
.rosto .aro { stroke: var(--folha); stroke-width: 1.5; }

/* 1 · a chegada */
.passo { font-size: 17px; }
.convite { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.4vw, 36px); }
.sigla { font-family: var(--display); font-weight: 600; font-size: clamp(64px, 11vw, 168px); line-height: .9; letter-spacing: -.04em; color: var(--folha); text-shadow: var(--halo), 0 0 40px var(--brilho); }
.acrostico { display: flex; justify-content: center; gap: clamp(14px, 2.4vw, 40px); flex-wrap: wrap; }
.acrostico li { font-family: var(--display); font-weight: 400; font-size: clamp(17px, 1.2vw, 20px); letter-spacing: .04em; display: block; }
.acrostico b { font-weight: 600; font-size: clamp(30px, 3.4vw, 50px); line-height: .8; vertical-align: -.08em; color: var(--marfim); text-shadow: var(--halo), 0 0 22px var(--brilho); }
.acrostico i { font-style: italic; margin-right: .3em; }
.acrostico li { opacity: .5; transition: opacity .2s; }
.acrostico li.aceso { opacity: 1; }
.beneficios { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.6vw, 40px); color: var(--marfim); text-shadow: var(--halo), 0 0 22px var(--brilho); }

/* 2–5 · Cadastro (o mapa do Brasil, no canvas, responde a cada busca) */
.busca { display: inline-flex; align-items: center; gap: 10px; min-width: min(80vw, 560px); padding: 14px 22px; border: 1px solid rgba(239, 228, 204, .35); border-radius: 999px; font-size: clamp(18px, 1.6vw, 26px); text-align: left; background: rgba(5, 4, 8, .55); }
.busca .por { font-size: 17px; color: var(--marfim); white-space: nowrap; }
.busca .digitado { clip-path: inset(0 calc((1 - var(--dig, 0)) * 100%) 0 0); }  /* a barra digita revelando o texto inteiro: a letra nunca muda, só aparece */
.busca .cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--traco-luz); animation: pisca 1s steps(2) infinite; }
@keyframes pisca { to { opacity: 0; } }
.nichos { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 2vw, 34px); padding: 12px 8px; font-family: var(--display); font-size: clamp(22px, 2.4vw, 38px); }
.nichos li { position: relative; z-index: 1; }
.nichos li.aceso { color: var(--marfim); }
.nichos .etc { color: var(--marfim); }
/* os fios entre os nichos ("linkando os nichos"): um SVG atrás das palavras, desenhado pelo JS sobre as posições reais */
.fios-nichos, .constelacao { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.fios-nichos line, .constelacao line { stroke: var(--traco-luz); stroke-width: 1.2; opacity: .7; stroke-dasharray: var(--comp, 300); stroke-dashoffset: var(--traco, 300); filter: drop-shadow(0 0 4px var(--brilho)); }
.aneis { position: relative; width: min(64vw, 380px); aspect-ratio: 1; display: grid; place-items: center; }
.aneis svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.aneis circle { fill: none; stroke: var(--traco-luz); stroke-width: 1.5; stroke-dasharray: 1200; stroke-dashoffset: var(--traco, 1200); filter: drop-shadow(0 0 6px var(--brilho)); }
.tres, .duas { display: grid; row-gap: 6px; font-family: var(--display); font-size: clamp(19px, 1.7vw, 27px); }
.tres li.aceso, .duas li.aceso { color: var(--marfim); }
.arco { width: min(84vw, 460px); display: grid; row-gap: 8px; }
.arco svg { width: 100%; height: auto; }
.arco .fio { fill: none; stroke: var(--traco-luz); stroke-width: 1.5; stroke-dasharray: 600; stroke-dashoffset: var(--traco, 600); }
.arco .estrelas circle { fill: var(--traco-luz); opacity: .3; filter: drop-shadow(0 0 6px var(--brilho)); }
.arco .estrelas circle.aceso { opacity: 1; }
.duas { grid-auto-flow: column; column-gap: clamp(24px, 4vw, 60px); }
.comentarios { display: grid; row-gap: 6px; font-size: 17px; max-width: 46ch; }
.comentarios li { font-style: italic; }

/* 6–7 · match */
.pontas { display: grid; grid-template-columns: auto minmax(80px, 320px) auto; align-items: center; gap: clamp(10px, 2vw, 28px); font-family: var(--display); font-size: clamp(20px, 2.2vw, 34px); }
.pontas .ponta { display: grid; justify-items: center; row-gap: 8px; opacity: .35; transition: opacity .2s; }
.pontas .ponta.aceso { opacity: 1; color: var(--marfim); }
.fio-pontas, .fio-ia .fio { width: 100%; height: 24px; }
.fio-pontas path, .fio-ia .fio path { fill: none; stroke: var(--traco-luz); stroke-width: 1.5; stroke-dasharray: 420; stroke-dashoffset: var(--traco, 420); filter: drop-shadow(0 0 5px var(--brilho)); vector-effect: non-scaling-stroke; }
.cadeia { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 28px); max-width: min(92vw, 1100px); }
.cadeia li { position: relative; z-index: 1; display: grid; row-gap: 6px; text-align: center; }
/* siga o grão: a trilha passa pelos 4 elos reais (cena.js a desenha) e o grão anda por ela */
.trilha-grao { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.trilha-grao path { fill: none; stroke: var(--traco-luz); stroke-width: 1.2; opacity: .6; stroke-dasharray: var(--comp, 3000); stroke-dashoffset: var(--traco, 3000); }
.trilha-grao .grao { fill: var(--marfim); filter: drop-shadow(0 0 10px var(--luz)); }
.cadeia b { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.5vw, 24px); }
.cadeia span { font-size: 17px; line-height: 1.35; }
.cadeia li.aceso b { color: var(--marfim); }

/* 8 · Clube */
.glifo { font-family: var(--display); font-weight: 600; font-size: clamp(120px, 22vw, 320px); line-height: .8; color: var(--marfim); text-shadow: var(--halo), 0 0 50px var(--brilho); }
/* o % CORRE pela rede: entra pela esquerda (−22vw) e chega ao eixo quando o mecanismo termina (cena.js escreve --corre) */
.plano > .glifo.e1 { transform: translateX(calc((var(--corre, 1) - 1) * 22vw)) scale(calc(.955 + .045 * var(--e, 1))); }
.oferta { font-family: var(--display); font-size: clamp(20px, 2vw, 32px); max-width: 30ch; }
.oferta .onda { opacity: .4; transition: opacity .2s, color .2s; }
.oferta .onda.aceso { opacity: 1; color: var(--marfim); }

/* 9–10 · App: o celular com o feed (o espaço do material dele, sem frase de bastidor: três posts em silhueta) */
.celular { width: min(60vw, 240px); aspect-ratio: 9 / 17; border: 1.5px solid rgba(239, 228, 204, .45); border-radius: 28px; display: grid; align-content: start; row-gap: 14px; padding: 26px 16px; background: rgba(5, 4, 8, .5); }
.material { outline: 1px dashed var(--luz); outline-offset: 6px; }
.celular .post { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: 10px 10px 54px; gap: 6px 10px; }
.celular .post::before { content: ''; grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; background: var(--traco-luz); opacity: .8; box-shadow: 0 0 10px var(--brilho); }
.celular .post::after { content: ''; grid-column: 1 / -1; border-radius: 8px; background: linear-gradient(135deg, rgba(239, 228, 204, .16), rgba(239, 228, 204, .04)); }
.celular .post i { display: none; }
.fio-ia { display: grid; grid-template-columns: auto minmax(120px, 420px) auto; align-items: center; gap: 12px; width: min(90vw, 560px); }
.legenda-fio { grid-column: 1 / -1; font-size: 17px; color: var(--marfim); }
/* a IA varre a coluna de candidatos (o foco corre) e trava um match: o escolhido fica na tinta, os outros se apagam */
.candidatos { display: grid; row-gap: 4px; }
.candidatos .rosto.mini { width: clamp(22px, 2.2vw, 30px); opacity: .35; filter: none; transition: opacity .12s, filter .2s; }
.candidatos li.olhado .rosto { opacity: 1; filter: drop-shadow(0 0 10px var(--luz)); }
.candidatos li.match .rosto { opacity: 1; stroke: var(--marfim); filter: drop-shadow(0 0 14px var(--luz)); }
.varredura.travado .candidatos li:not(.match) .rosto { opacity: .15; }

/* 11–17 · as Guildas: os ofícios reais ligados entre si (a constelação é desenhada pelo JS sobre as posições reais das palavras) */
.conta { font-family: var(--display); font-size: clamp(18px, 1.5vw, 24px); }
.conta [data-conta] { font-weight: 600; color: var(--marfim); }
.o-que-e { font-family: var(--display); font-style: italic; }
.nome-guilda { color: var(--marfim); }
.refrao { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(20px, 2vw, 32px); color: var(--marfim); }
.oficios { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(20px, 2.6vw, 44px); padding: 12px 6px; max-width: min(92vw, 940px); font-size: clamp(17px, 1.3vw, 21px); }
.oficios li { position: relative; z-index: 1; padding: 2px 6px; }
.oficios li::before { content: ''; position: absolute; left: 50%; top: -8px; width: 7px; height: 7px; border-radius: 50%; transform: translateX(-50%); background: var(--traco-luz); opacity: 0; box-shadow: 0 0 8px var(--brilho); transition: opacity .35s; }
/* a estrela nasce (incremento 2): o ofício assenta com um pulso único e a estrela dele abre em luz; as ligações ganham corpo e brilho */
.oficios li.aceso { color: var(--marfim); animation: nasce-oficio .55s cubic-bezier(.2, .8, .2, 1); }
.oficios li.aceso::before { opacity: 1; box-shadow: 0 0 10px var(--luz), 0 0 22px var(--brilho); animation: cintila 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.37s); }
@keyframes nasce-oficio { from { transform: scale(.86); } 40% { transform: scale(1.06); } to { transform: none; } }
@keyframes cintila { 50% { opacity: .45; transform: translateX(-50%) scale(.8); } }
.constelacao line { stroke-width: 1.6; opacity: .9; filter: drop-shadow(0 0 6px var(--brilho)) drop-shadow(0 0 1px var(--luz)); }
.anel { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.anel .guilda { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--marfim); white-space: nowrap; text-shadow: 0 0 14px rgba(184, 146, 63, .5), 0 1px 2px var(--noite); opacity: 0; }

/* 18–23 · a rede viva */
.feed { display: grid; row-gap: 8px; width: min(92vw, 720px); font-family: var(--display); font-size: clamp(18px, 1.5vw, 24px); text-align: left; }
.feed li { padding: 10px 14px 10px 18px; border-left: 2px solid var(--luz); background: rgba(5, 4, 8, .5); }
.placar { width: min(70vw, 380px); height: auto; }
.placar path { fill: none; stroke: var(--traco-luz); stroke-width: 1.5; filter: drop-shadow(0 0 6px var(--brilho)); }
.placar path.aceso { fill: var(--traco-luz); }
.placar stop.cheia { stop-color: var(--luz); }
.placar path.aceso.meia { fill: url(#meia); }
/* as barras de Confiança e Credibilidade (retomam a cena 5), sem dígito: crescem com o mecanismo (cena.js escreve --g) */
.barras { display: grid; row-gap: 8px; width: min(70vw, 380px); font-size: 17px; text-align: left; }
.barras li { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 10px; }
.barras i { position: relative; display: block; height: 6px; border-radius: 3px; background: rgba(239, 228, 204, .12); overflow: hidden; }
.barras i::after { content: ''; position: absolute; inset: 0; width: calc(var(--w) * var(--g, 0) * 100%); border-radius: 3px; background: var(--traco-luz); box-shadow: 0 0 10px var(--brilho); }
.barras li:nth-child(1) i { --w: .92; }
.barras li:nth-child(2) i { --w: .84; }
.no-cresce { width: min(40vw, 200px); height: auto; }
.no-cresce .halo { fill: color-mix(in srgb, var(--luz) 22%, transparent); stroke: var(--traco-luz); stroke-width: 1; }
.no-cresce .nucleo { fill: var(--traco-luz); filter: drop-shadow(0 0 12px var(--luz)); }
.fios-status { width: min(80vw, 400px); height: auto; }
.fios-status path { fill: none; stroke: var(--traco-luz); stroke-width: 1.2; stroke-dasharray: 260; stroke-dashoffset: var(--traco, 260); }
.fios-status circle { fill: var(--traco-luz); filter: drop-shadow(0 0 14px var(--luz)); }
.encontro { width: min(84vw, 400px); height: auto; }
.encontro .gente circle { fill: var(--traco-luz); transition: transform .5s; }
.encontro .ponto { fill: none; stroke: var(--traco-luz); stroke-width: 1.5; }
.encontro.junto .ponto { fill: color-mix(in srgb, var(--luz) 40%, transparent); }
.ganhos { display: grid; row-gap: 10px; font-family: var(--display); font-size: clamp(20px, 2vw, 32px); max-width: 30ch; }
.ganhos .chama.aceso { color: var(--folha); text-shadow: var(--halo), 0 0 26px rgba(205, 181, 120, .7); }

/* 25–31 · BABEL */
.orbita { position: relative; width: min(84vw, 520px); height: clamp(220px, 34vh, 320px); font-family: var(--display); font-size: clamp(19px, 1.8vw, 28px); outline: none; }
.orbita li { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); white-space: nowrap; }
.orbita li.aceso { color: var(--marfim); }
.etapas { display: grid; grid-auto-flow: column; gap: clamp(12px, 2vw, 36px); font-family: var(--display); font-size: clamp(18px, 1.7vw, 26px); }
.etapas li { position: relative; }
.etapas li + li::before { content: '→'; position: absolute; left: calc(-1 * clamp(12px, 2vw, 36px) / 2); transform: translateX(-50%); color: var(--marfim); opacity: .8; }
.etapas li.aceso { color: var(--marfim); }
.conversa { display: grid; row-gap: 8px; width: min(90vw, 520px); outline: none; }
.bolha { opacity: 0; transition: opacity .2s; padding: 12px 16px; border-radius: 18px; font-size: 17px; text-align: left; border: 1px solid rgba(239, 228, 204, .3); background: rgba(5, 4, 8, .55); }
.bolha.aceso { opacity: 1; }
.bolha.guardado { justify-self: end; border-color: var(--folha); color: var(--marfim); }
/* os dados da operação (o material dele): só o nome, no espaço marcado — quadros vazios liam "não há dados" (juiz cego) */
.operacao-nome { font-family: var(--display); font-size: clamp(18px, 1.5vw, 24px); color: var(--folha); padding: 8px 14px; }
/* o exemplo dele: o número é monumental (a única vez que um número da foto é o herói) */
.heroi { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.6vw, 56px); line-height: 1.1; max-width: 22ch; display: grid; row-gap: 4px; }
.heroi strong { display: block; font-weight: 600; font-size: clamp(64px, 9vw, 150px); line-height: .95; letter-spacing: -.03em; color: var(--marfim); text-shadow: var(--halo), 0 0 36px var(--brilho); }
.rotulo-exemplo { font-style: italic; font-size: 18px; color: var(--marfim); }
.calculadora { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: end; gap: 10px; width: min(94vw, 1000px); pointer-events: auto; }
.calculadora label { display: grid; row-gap: 6px; font-size: 17px; text-align: left; }
.calculadora input { font: 500 20px/1.2 var(--corpo); color: var(--marfim); background: rgba(5, 4, 8, .6); border: 1px solid rgba(239, 228, 204, .4); border-radius: 12px; padding: 12px 14px; width: 100%; min-width: 0; }
.calculadora input:focus { outline: none; border-color: var(--luz); box-shadow: 0 0 14px var(--brilho); }
.calculadora .op { font-family: var(--display); font-size: 28px; color: var(--marfim); padding-bottom: 10px; }
.calculadora .faturamento { font-family: var(--display); font-size: clamp(20px, 2.2vw, 34px); color: var(--marfim); padding-bottom: 6px; }
.nota { font-size: 17px; font-style: italic; }
.aceite { position: relative; display: grid; place-items: center; width: min(90vw, 620px); }
.aceite svg { position: absolute; width: min(70vw, 420px); height: auto; }
.anel-aceite { fill: none; stroke: var(--traco-luz); stroke-width: 1.5; stroke-dasharray: 560; stroke-dashoffset: var(--traco, 560); filter: drop-shadow(0 0 8px var(--brilho)); }
.aceite ol { position: relative; display: grid; row-gap: 18px; padding: 40px 20px; }
.aceite li { display: grid; row-gap: 4px; }
.aceite b { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.4vw, 38px); }
.aceite span { font-size: clamp(17px, 1.3vw, 21px); }
.aceite li.aceso b { color: var(--marfim); }
/* o clímax: a constelação de Carros volta — a Loja de Carro acesa solta três fios até três ofícios dela, e cada chegada é uma
   notificação na tela de bloqueio do MESMO celular da cena 9 (a rosácea do canvas fecha em volta) */
.climax { row-gap: 10px; }
.climax .gancho { font-size: clamp(34px, 4.4vw, 64px); }
.chegada { display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; gap: clamp(16px, 3vw, 40px); width: min(92vw, 880px); }
.carros-no { display: grid; justify-items: center; row-gap: 6px; width: 100%; }
.teia { width: min(80vw, 320px); height: auto; overflow: visible; }
.fios3 path { fill: none; stroke: var(--traco-luz); stroke-width: 1.5; stroke-dasharray: 200; stroke-dashoffset: var(--traco, 200); filter: drop-shadow(0 0 6px var(--brilho)); }
.estrelas3 circle { fill: var(--traco-luz); opacity: .25; transition: opacity .2s; }
.estrelas3 circle.aceso { opacity: 1; filter: drop-shadow(0 0 12px var(--luz)); }
.origem-no .aro { fill: none; stroke: var(--folha); stroke-width: 1.5; }
.origem-no .miolo { fill: var(--traco-luz); opacity: .3; transition: opacity .2s; }
.origem-no.aceso .miolo { opacity: 1; filter: drop-shadow(0 0 12px var(--luz)); }
.origem { font-family: var(--display); font-size: clamp(19px, 1.8vw, 28px); color: var(--marfim); }
.climax .refrao { font-size: clamp(17px, 1.3vw, 21px); }
.celular.bloqueio { width: min(90vw, 340px); aspect-ratio: auto; padding: 22px 14px 18px; row-gap: 10px; text-align: left; }
.chegando { font-size: 17px; color: var(--marfim); text-align: center; }
.ofertas { display: grid; row-gap: 8px; }
.ofertas li { display: grid; row-gap: 2px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(239, 228, 204, .25); background: rgba(5, 4, 8, .6); transform: translateY(-8px); transition: opacity .2s, transform .3s; }
.ofertas li.aceso { transform: none; border-color: var(--luz); box-shadow: 0 0 18px var(--brilho); }
.ofertas b { font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.4vw, 22px); color: var(--marfim); }
.ofertas span { font-size: 17px; }

/* 32 · o fim: o nó vazio do empresário e o botão do cadastro (o link entra por data-material) */
.seu-lugar { font-size: clamp(56px, 9vw, 150px); }
.no-vazio { width: min(46vw, 200px); height: auto; }
/* o nó cresce conforme os fios chegam (--no) e o botão nasce quando o aro fecha (--botao); cena.js escreve os dois */
.plano > .no-vazio.e3 { transform: scale(calc((.35 + .65 * var(--no, 1)) * (.955 + .045 * var(--e, 1)))); }
.plano > .cadastro.e3 { opacity: calc(var(--e, 1) * var(--botao, 1)); }
.no-vazio circle { fill: none; stroke: var(--traco-luz); }
.no-vazio .orbita-vazia { stroke: var(--folha); stroke-width: 1; opacity: .6; stroke-dasharray: 6 8; }
.no-vazio .aro { stroke-width: 1.5; stroke-dasharray: 260; stroke-dashoffset: var(--traco, 260); filter: drop-shadow(0 0 10px var(--brilho)); animation: respira 3.2s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes respira { 50% { filter: drop-shadow(0 0 26px var(--luz)); transform: scale(1.06); } }
.no-vazio .centro { fill: var(--marfim); stroke: none; }
/* todos os fios convergem no nó vazio (incremento 2): raios que nascem na borda do plano e param no aro do nó (cena.js os desenha
   sobre a posição real do SVG); ficam atrás do texto, e a rosácea do canvas se recolhe em volta do mesmo ponto */
.fios-fim { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; z-index: 0; }
.fios-fim line { stroke: var(--traco-luz); stroke-width: 1.1; opacity: .75; stroke-linecap: round; stroke-dasharray: var(--comp, 900); stroke-dashoffset: var(--traco, 900); filter: drop-shadow(0 0 5px var(--brilho)); }
/* desenhados, os fios seguem CONVERGINDO: a luz corre pelos raios para dentro do nó (régua vida.mjs: o fim não pode parar) */
.fios-fim line.pronto { stroke-dasharray: 5 13; animation: flui 1.4s linear infinite; }
@keyframes flui { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }
.plano[data-cap="fim"] > :not(.fios-fim) { position: relative; z-index: 1; }
/* o botão do cadastro, no pico da peça: o botão do REINO (marfim cheio, caixa alta) com a coroa das sete tochas girando em volta */
.cadastro { position: relative; display: inline-block; margin-top: 10px; padding: 18px 34px; background: var(--marfim); color: var(--noite); font: 700 15px/1 var(--corpo); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; text-shadow: none; pointer-events: auto; isolation: isolate;
  box-shadow: 0 0 44px rgba(205, 181, 120, .45); }
.cadastro::before { content: ''; position: absolute; inset: -3px; z-index: -1; background: conic-gradient(from var(--gira, 0deg), var(--visconde), var(--conde), var(--marques), var(--duque), var(--principe), var(--rei), var(--imperador), var(--visconde)); filter: saturate(1.6) brightness(1.5); animation: coroa 6s linear infinite; }
@property --gira { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* o miolo marfim por cima da coroa: sem ele o anel (z-index -1 dentro do isolate) pintava o botão inteiro e a letra noite caía sobre
   o gradiente saturado (olho, 24/09: "faixa amarelo→rosa→verde com texto preto") — a coroa fica só nos 3 px da borda */
.cadastro::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--marfim); }
@keyframes coroa { to { --gira: 360deg; } }
@keyframes respira-botao-antigo { 50% { box-shadow: 0 0 70px var(--brilho), 0 0 0 4px rgba(245, 217, 127, .28); transform: scale(1.03); } }
.cadastro:hover, .cadastro:focus-visible { box-shadow: 0 0 64px var(--brilho), 0 0 0 3px rgba(245, 217, 127, .35); outline: none; }

/* o trilho: a profundidade já percorrida, uma linha fina à direita na luz do capítulo ATUAL (o JS escreve --luz-atual): nunca um arco-íris à parte da cena */
.trilho { position: fixed; right: 10px; top: 12vh; height: 76vh; width: 2px; background: rgba(239, 228, 204, .1); z-index: 3; }
.trilho i { display: block; width: 100%; height: var(--andado, 0%); background: var(--luz-atual, var(--folha)); opacity: .75; box-shadow: 0 0 8px var(--luz-atual, var(--folha)); }
/* as notas do apresentador (tecla N no palco) */
#notas { position: fixed; left: 16px; bottom: 16px; z-index: 5; max-width: 420px; padding: 14px 18px; background: rgba(5, 4, 8, .92); border-left: 2px solid var(--folha); font-size: 17px; line-height: 1.4; }
.sem-webgl #abobada { display: none; }

@media (max-width: 720px) {
  body { font-size: 17px; }
  .plano { padding-top: max(72px, env(safe-area-inset-top) + 60px); row-gap: 12px; }
  .capitulo { font-size: 17px; white-space: normal; max-width: 80vw; }
  .capitulo.babel-nome { font-size: 24px; }
  .beneficio-rotulo { top: calc(max(22px, env(safe-area-inset-top)) + 32px); }
  .babel-nome + .beneficio-rotulo { top: calc(max(22px, env(safe-area-inset-top)) + 42px); }
  .climax .gancho { font-size: 32px; }
  .gancho { font-size: clamp(34px, 9.6vw, 46px); max-width: 12ch; }
  .gancho.pequeno { font-size: 30px; }
  .sigla { font-size: clamp(64px, 24vw, 104px); }
  .acrostico { flex-direction: column; gap: 2px; align-items: start; margin-inline: auto; }
  .acrostico b { font-size: 28px; }
  .busca { flex-wrap: wrap; row-gap: 4px; border-radius: 22px; }
  .cadeia { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .cadeia b { font-size: 17px; }
  .pontas { grid-template-columns: 1fr; gap: 6px; }
  .fio-pontas { width: 60vw; margin-inline: auto; }
  .fio-ia { grid-template-columns: auto 1fr auto; }
  .glifo { font-size: 130px; }
  .celular { width: min(52vw, 200px); padding: 20px 12px; row-gap: 10px; }
  .celular .post { grid-template-rows: 8px 8px 40px; }
  .orbita { height: 260px; font-size: 18px; }
  .etapas { grid-auto-flow: row; row-gap: 6px; }
  .etapas li + li::before { content: '↓'; left: 50%; top: -1.15em; transform: translateX(-50%); }
  .calculadora { grid-template-columns: 1fr; }
  .calculadora .op { padding: 0; font-size: 22px; }
  .heroi { font-size: 28px; max-width: 16ch; }
  .seu-lugar { font-size: clamp(56px, 20vw, 88px); }
  .feed { font-size: 17px; }
  .aceite ol { padding: 24px 12px; }
  .comentarios { max-width: 90vw; }
  /* o clímax no celular: tudo numa coluna e compacto (medido pelo olhar(): a linha final saía da tela a 430) */
  .plano[data-cap="cadastro"]::before { background: linear-gradient(180deg, rgba(5, 4, 8, .9) 0%, rgba(5, 4, 8, 0) 22%), radial-gradient(ellipse 62% 60% at 50% 50%, rgba(5, 4, 8, .94) 0%, rgba(5, 4, 8, .82) 55%, rgba(5, 4, 8, 0) 100%); }
  .climax { row-gap: 2px; }
  .climax .gancho { font-size: 24px; }
  .chegada { grid-template-columns: 1fr; gap: 0; }
  .carros-no { row-gap: 0; }
  .teia { width: 17vw; }
  .climax .refrao, .chegando { font-size: 15px; }
  .celular.bloqueio { width: min(88vw, 340px); padding: 8px 10px 8px; row-gap: 4px; }
  .ofertas { row-gap: 3px; }
  .ofertas li { padding: 4px 10px; }
  .ofertas b { font-size: 15px; line-height: 1.15; }
  .ofertas span { font-size: 15px; line-height: 1.15; }
  .anel .guilda { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .plano { filter: none !important; transform: none !important; }
  .busca .cursor, .oficios li.aceso::before, .no-vazio .aro, .fios-fim line.pronto, .cadastro { animation: none; }
}

/* ——— A GRAMÁTICA DO REINO nas provas (ordem 038): as molduras são as do REINO (noite em degradê, borda na tocha a 34%, cantos de
   esquadro marfim/tocha, nunca pílula); os números e as marcas em folha; a letra nunca na cor do capítulo ——— */
.busca, .celular, .feed li, .bolha, .ofertas li, .calculadora input { border-radius: 0; }
.busca, .feed li, .bolha, .ofertas li, .celular { background: linear-gradient(160deg, rgba(14, 11, 18, .86), rgba(5, 4, 8, .62)); border: 1px solid color-mix(in srgb, var(--luz) 40%, transparent); }
.feed li { border-left: 2px solid var(--traco-luz); }
.busca { position: relative; }
.busca::after, .celular::after { content: ''; position: absolute; right: -1px; top: -1px; width: 18px; height: 18px; border-top: 2px solid var(--traco-luz); border-right: 2px solid var(--traco-luz); }
.celular { position: relative; }
.sigla { color: var(--folha); text-shadow: var(--halo), 0 0 50px rgba(205, 181, 120, .35); letter-spacing: -.02em; }
.acrostico b, .beneficios, .glifo, .heroi strong, .origem, .ganhos .chama.aceso, .conta [data-conta], .refrao, .operacao-nome { color: var(--folha); }
.glifo { text-shadow: var(--halo), 0 0 60px var(--brilho); }
.heroi strong { text-shadow: var(--halo), 0 0 44px rgba(205, 181, 120, .4); }
.busca .por, .legenda-fio, .chegando, .calculadora .op, .calculadora .faturamento { color: var(--folha); }
.ofertas b { color: var(--marfim); }
.ofertas li.aceso { border-color: var(--traco-luz); box-shadow: 0 0 22px var(--brilho); }
.bolha.guardado { border-color: var(--ouro); color: var(--folha); font-family: var(--display); font-style: italic; }
.comentarios li { color: var(--cinza); font-family: var(--display); }
.anel .guilda { font-family: var(--corpo); font-weight: 700; font-size: 15px; letter-spacing: .3em; text-transform: uppercase; color: var(--ouro); }
.material { outline: none; }
/* o fim é o PICO (a correção dele ao REINO publicado): os fios que convergem no nó vêm, cada um, de uma das sete tochas — as
   sete cores se encontram pela segunda vez (a primeira foi a rosácea da BABEL) e param no nó do empresário */
.fios-fim line { stroke-width: 1.6; opacity: .95; }
.fios-fim line:nth-child(7n+1) { stroke: color-mix(in oklab, var(--visconde) 70%, #fff); filter: drop-shadow(0 0 6px var(--visconde)); }
.fios-fim line:nth-child(7n+2) { stroke: color-mix(in oklab, var(--conde) 70%, #fff); filter: drop-shadow(0 0 6px var(--conde)); }
.fios-fim line:nth-child(7n+3) { stroke: color-mix(in oklab, var(--marques) 70%, #fff); filter: drop-shadow(0 0 6px var(--marques)); }
.fios-fim line:nth-child(7n+4) { stroke: color-mix(in oklab, var(--duque) 70%, #fff); filter: drop-shadow(0 0 6px var(--duque)); }
.fios-fim line:nth-child(7n+5) { stroke: color-mix(in oklab, var(--principe) 70%, #fff); filter: drop-shadow(0 0 6px var(--principe)); }
.fios-fim line:nth-child(7n+6) { stroke: color-mix(in oklab, var(--rei) 70%, #fff); filter: drop-shadow(0 0 6px var(--rei)); }
.fios-fim line:nth-child(7n) { stroke: color-mix(in oklab, var(--imperador) 70%, #fff); filter: drop-shadow(0 0 6px var(--imperador)); }
.seu-lugar .l.brilha { text-shadow: var(--halo), 0 0 60px rgba(205, 181, 120, .45); }
.no-vazio .aro { stroke: var(--folha); }
.no-vazio .orbita-vazia { stroke: var(--ouro); }
@media (max-width: 720px) {
  .capitulo { font-size: 15px; letter-spacing: .2em; gap: 10px; white-space: normal; width: max-content; max-width: 86vw; text-align: center; line-height: 1.35; }
  .capitulo::before, .capitulo::after { display: none; }
  .capitulo.babel-nome { font-size: 24px; }
  .beneficio-rotulo { top: calc(max(24px, env(safe-area-inset-top) + 6px) + 28px); font-size: 17px; }
  .babel-nome + .beneficio-rotulo { top: calc(max(24px, env(safe-area-inset-top) + 6px) + 40px); }
  .gancho { font-size: clamp(34px, 9.4vw, 46px); max-width: 13ch; }
  .indice { font-size: 15px; letter-spacing: .12em; }
  .linha { font-size: 18px; }
  .lettering .babel { letter-spacing: .3em; padding-left: .3em; }
  #conhecer { font-size: 14px; letter-spacing: .2em; padding: 16px 22px; }
  .cadastro { font-size: 14px; letter-spacing: .14em; padding: 16px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sigilo-grande *, .lettering .reino text, .lettering .babel, #conhecer { animation: none !important; stroke-dashoffset: 0; opacity: 1; fill-opacity: 1; }
  .plano.vivo .gancho .l.brilha::after, .cadastro::before { animation: none; }
}
/* o clímax: a placa de noite sai — a letra fica no olho escuro da rosácea, com o halo; o vitral das sete aparece inteiro */
.plano.climax::before { background: radial-gradient(ellipse 30% 40% at 50% 50%, rgba(5, 4, 8, .55) 0%, rgba(5, 4, 8, 0) 100%); }
.plano[data-cap="fim"]::before { background: radial-gradient(ellipse 34% 40% at 50% 42%, rgba(5, 4, 8, .78) 0%, rgba(5, 4, 8, .5) 50%, rgba(5, 4, 8, 0) 100%); }
/* a frase do fim fica sobre o pico de luz: marfim (a voz), com o halo da noite dobrado (medido por cores.mjs: o cinza dava 2,7:1) */
.plano[data-cap="fim"] .linha { color: var(--marfim); text-shadow: var(--halo), 0 0 24px var(--noite), 0 0 40px var(--noite); }
.fios-fim line { stroke-width: 2.6; opacity: 1; }

/* ——— A VIAGEM (ordem 041): os créditos literais dos dados reais (HYG, Edenhofer, NASA), letra de 15 px, enquanto a viagem dura ——— */
.creditos-viagem { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 5; display: none; max-width: min(92vw, 46rem);
  font: 500 15px/1.45 var(--corpo); color: var(--cinza); text-shadow: var(--halo); pointer-events: none; opacity: 0; }
.creditos-viagem span { display: block; }
body.viajando .creditos-viagem { display: block; animation: aparecer .8s var(--curva) .5s forwards; }
/* ——— O FIM, por cima do fim aprovado (ordem 041): BABEL no meio da coroa de luz, acima do título; o canvas desenha a coroa, o REINO
   nas sete tinturas e um fio da coroa a cada cidade. A palavra fica fora do fluxo (absoluta): o fim aprovado não se move ——— */
.plano[data-cap="fim"] > .coroa-nome { position: absolute; left: 50%; top: 12%; transform: translate(-50%, -50%); max-width: none; margin: 0; z-index: 2;
  font: 400 clamp(22px, 2vw, 30px)/1 var(--display); letter-spacing: .42em; padding-left: .42em; color: var(--folha); white-space: nowrap;
  opacity: var(--coroa, 0); text-shadow: var(--halo), 0 0 30px rgba(205, 181, 120, .5); }
/* ——— OS NÚMEROS DO MERCADO (ordem 041): um por etapa, sempre no mesmo lugar (o pé do plano), na moldura do REINO (noite em degradê,
   fio de ouro no alto); o número em folha, a frase em marfim, a fonte com o ANO em cinza claro — nunca um número sem fonte ——— */
.plano[data-cap] > .mercado { position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom) + 10px); margin: 0 auto; width: fit-content; max-width: min(88vw, 760px);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 10px; row-gap: 2px; padding: 10px 18px 9px; z-index: 2;
  background: linear-gradient(180deg, rgba(14, 11, 18, .9), rgba(5, 4, 8, .82)); border-top: 1px solid var(--ouro); text-shadow: none; }
.mercado-n { font: 600 clamp(24px, 2.2vw, 32px)/1 var(--display); color: var(--folha); letter-spacing: -.01em; }
.mercado-frase { font: italic 400 17px/1.3 var(--display); color: var(--marfim); }
.mercado-fonte { flex-basis: 100%; font: 500 15px/1.3 var(--corpo); font-style: normal; color: var(--cinza); letter-spacing: .02em; }
@media (max-width: 720px) { .plano[data-cap] > .mercado { max-width: 92vw; padding: 8px 12px 7px; } .mercado-n { font-size: 24px; } .mercado-frase { font-size: 16px; }
  /* o cartão de mercado é ABSOLUTO no pé; no celular o conteúdo centrado não reservava o espaço dele e a roda (.mente) caía por cima (cena 25) */
  .plano:not([data-cap="fim"]):has(> .mercado) { padding-bottom: 134px; } }
@media (min-width: 721px) { .plano:not([data-cap="fim"]):has(> .mercado) { padding-bottom: 104px; } }
/* (ordem 041, medido por cores.mjs a 390: o refrão de Carros no clímax caía sobre a constelação acesa, 2,23:1) — uma faixa de noite sob ele */
.climax .refrao-volta { background: rgba(5, 4, 8, .82); padding: 2px 10px; }

/* ——— WCAG (25/09): a casa dos créditos ("ⓘ créditos") herda marfim a .55 E o summary abre em .55 → efetivo .30 (~2,4:1 no quase-preto,
   63 textos abaixo em cores.mjs). As cores vivem neste .css (index.html só dá o esqueleto): chapa de noite + marfim opaco = ≥4,5:1
   sobre QUALQUER cena (inclusive o ouro da abertura), mantendo o canto discreto (não compete: saliência intacta). ——— */
body .creditos-fonte > summary { opacity: 1; color: #cabfa9; background: rgba(5, 4, 8, .82); border-radius: 7px; }
/* "Loja de Carro" (.origem) no clímax caía sobre a teia cinza (#777, 3,55:1 a 390): a mesma chapa de noite do refrão devolve o contraste */
.climax .origem { position: relative; z-index: 1; display: inline-block; margin-inline: auto; padding: 1px 10px; background: rgba(5, 4, 8, .82); border-radius: 6px; }