/* REINO/BABEL · ORDEM 046 "lapidar" (24/09/2026) — incremento sobre a imersão aprovada (LINHA.md), nunca direção nova. Carregado
   DEPOIS de estilo.css; nenhum token do cânone (imperio.css) é redefinido. A gramática é a do REINO: noite, marfim (a voz), ouro e
   folha (a marca), a tintura do capítulo só como luz, traço e vidro — nunca a letra. Cada bloco diz o pedido dele (P1–P12). */

/* o nome que sai da vista e fica no texto (P8: "retire esse nome"): legenda para leitor de tela, fora do desenho */
.so-leitor { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ——— P5 · DESTAQUE EM TODOS OS TÍTULOS E DESCRIÇÕES ———
   o título: a última linha em folha ganha a luz (halo de folha) e o título inteiro assenta sobre um fio heráldico — dois fios de
   ouro que se abrem para um losango de folha (a mesma marca em toda a peça); a descrição vira PLACA: a noite em faixa, com fios
   de ouro em cima e embaixo, e a letra sobe do cinza para o marfim quente */
.gancho { position: relative; padding-bottom: .34em; }
.gancho::after { content: ''; position: absolute; left: 50%; bottom: .06em; width: min(44%, 280px); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--ouro) 26%, transparent 44%, transparent 56%, var(--ouro) 74%, transparent); }
.gancho::before { content: ''; position: absolute; left: 50%; bottom: calc(.06em - 4px); width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg);
  background: var(--folha); box-shadow: 0 0 12px rgba(205, 181, 120, .7); }
.gancho .l.brilha { text-shadow: var(--halo), 0 0 34px rgba(205, 181, 120, .38); }
.plano > .linha { position: relative; padding: .42em 1.5em; color: #d1c7b2;   /* 42% cinza + 58% marfim, escrito em rgb: a régua de cores não lê color-mix na letra */
  background: linear-gradient(90deg, rgba(5, 4, 8, 0), rgba(5, 4, 8, .78) 16%, rgba(5, 4, 8, .78) 84%, rgba(5, 4, 8, 0)); }
.plano > .linha::before, .plano > .linha::after { content: ''; position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(184, 146, 63, .55), transparent); }
.plano > .linha::before { top: 0; }
.plano > .linha::after { bottom: 0; }
.plano[data-cap="fim"] > .linha { background: none; }
.plano[data-cap="fim"] > .linha::before, .plano[data-cap="fim"] > .linha::after { display: none; }
/* o número do mercado (o cartão "25,4 milhões" e os outros): moldura dupla do REINO — o fio de ouro, o filete interno e o canto */
.plano[data-cap] > .mercado { border: 1px solid rgba(184, 146, 63, .42); border-top: 2px solid var(--ouro); box-shadow: inset 0 0 0 3px rgba(5, 4, 8, .9), inset 0 0 0 4px rgba(184, 146, 63, .22), 0 0 34px rgba(184, 146, 63, .12); }
.plano[data-cap] > .mercado::before, .plano[data-cap] > .mercado::after { content: ''; position: absolute; top: -5px; width: 8px; height: 8px; background: var(--folha); transform: rotate(45deg); }
.plano[data-cap] > .mercado::before { left: -5px; }
.plano[data-cap] > .mercado::after { right: -5px; }
.mercado-n { text-shadow: 0 0 22px rgba(205, 181, 120, .35); }

/* ——— P1 · A ABERTURA IMPERIAL ———
   o pórtico: um arco ogival de ouro, duplo, com as impostas, que emoldura a tela inteira (a arquitetura do REINO); o kicker ouro
   CAIXA ALTA com fios; o sigilo é o fecho do arco; REINO monumental em folha com a folha como LUZ atrás; as cinco iniciais do
   acróstico em colunas, cada uma com a mesma coroa e o mesmo peso; o "e" é o elo entre N e O, num medalhão; Benefícios é a placa */
.abertura-reino { row-gap: clamp(8px, 1.5vh, 16px); }
.abertura-reino::before { background: radial-gradient(ellipse 44% 56% at 50% 52%, rgba(5, 4, 8, .8) 0%, rgba(5, 4, 8, .5) 58%, rgba(5, 4, 8, 0) 100%); }
.abertura-reino > .portico { position: absolute; left: 0; right: 0; top: max(12px, 1.6vh); margin: 0 auto; width: min(94vw, 1180px); height: calc(100% - max(12px, 1.6vh)); max-width: none; overflow: visible; pointer-events: none; z-index: -1; }
.portico path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.portico .arco-ext { stroke: var(--ouro); stroke-width: 1.3; }
.portico .arco-int { stroke: rgba(205, 181, 120, .3); stroke-width: .8; }
.portico .impostas { stroke: var(--folha); stroke-width: 1.4; }
.abertura-reino .passo { display: flex; align-items: center; gap: 14px; font: 700 15px/1 var(--corpo); letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; color: var(--ouro); }
.abertura-reino .passo::before, .abertura-reino .passo::after { content: ''; width: 44px; height: 1px; background: var(--ouro); flex: none; }
.abertura-reino .convite { font: italic 400 clamp(22px, 2.3vw, 34px)/1.15 var(--display); color: var(--marfim); }
.sigilo-fecho { width: clamp(46px, 4.4vw, 66px); height: auto; fill: none; stroke: var(--ouro); stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 0 14px rgba(205, 181, 120, .45)); }
/* REINO GRAVADO como no portal aprovado: o marfim assenta dentro e o traço de folha corre a letra; a folha é a luz em volta */
.abertura-reino .sigla { position: relative; font-size: clamp(88px, 14vw, 204px); letter-spacing: .02em; line-height: .86; color: var(--marfim); -webkit-text-stroke: 1.2px var(--folha);
  text-shadow: var(--halo), 0 0 44px rgba(205, 181, 120, .34); }
.abertura-reino .sigla::before { content: ''; position: absolute; inset: -34% -22%; z-index: -1; background: radial-gradient(closest-side, rgba(205, 181, 120, .1), rgba(205, 181, 120, .03) 58%, rgba(205, 181, 120, 0)); }
.abertura-reino .acrostico { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0; }
.abertura-reino .acrostico li { position: relative; display: block; padding: 0 clamp(14px, 1.8vw, 30px); text-align: center; opacity: .55;
  font: 700 15px/1.2 var(--corpo); letter-spacing: .2em; color: var(--marfim); }
.abertura-reino .acrostico li.aceso { opacity: 1; }
.abertura-reino .acrostico b { display: inline-block; width: 100%; font: 600 clamp(46px, 5.2vw, 78px)/1 var(--display); letter-spacing: 0; color: var(--folha);
  text-shadow: var(--halo), 0 0 20px rgba(205, 181, 120, .3); vertical-align: 0; }
.abertura-reino .acrostico b::before { content: ''; display: block; width: .42em; height: .2em; margin: 0 auto .12em; background: var(--ouro);
  clip-path: polygon(0 100%, 0 22%, 25% 62%, 50% 0, 75% 62%, 100% 22%, 100% 100%); filter: drop-shadow(0 0 6px rgba(205, 181, 120, .6)); }
.abertura-reino .acrostico li + li::before { content: ''; position: absolute; left: 0; top: 14%; bottom: 4%; width: 1px; background: linear-gradient(transparent, rgba(184, 146, 63, .7), transparent); }
.abertura-reino .acrostico .com-elo i { position: absolute; left: 0; top: 46%; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; margin: 0; transform: translate(-50%, -50%);
  font: italic 400 22px/1 var(--display); color: var(--folha); letter-spacing: 0; background: var(--noite); border: 1px solid var(--ouro); border-radius: 50%; box-shadow: 0 0 14px rgba(205, 181, 120, .35); }
.abertura-reino .beneficios { position: relative; padding: .3em 1.4em; font: 600 clamp(24px, 2.4vw, 36px)/1.1 var(--display); letter-spacing: .06em; color: var(--folha);
  border-top: 1px solid var(--ouro); border-bottom: 1px solid var(--ouro); background: linear-gradient(90deg, rgba(5, 4, 8, 0), rgba(5, 4, 8, .86) 18%, rgba(5, 4, 8, .86) 82%, rgba(5, 4, 8, 0)); }
.abertura-reino .beneficios::before, .abertura-reino .beneficios::after { content: ''; position: absolute; top: 50%; width: 9px; height: 9px; background: var(--folha); transform: translateY(-50%) rotate(45deg); }
.abertura-reino .beneficios::before { left: -4px; }
.abertura-reino .beneficios::after { right: -4px; }

/* ——— P2 · POR LOCALIZAÇÃO: o rótulo mora no seu anel; os anéis são ondas de alcance ——— */
.aneis.alcance { width: min(74vw, 460px); }
.aneis.alcance svg { overflow: visible; }
.aneis.alcance .aro-alcance { fill: none; stroke: var(--traco-luz); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: var(--comp, 1200); stroke-dashoffset: var(--traco, 1200);
  transform-box: view-box; transform-origin: 200px 200px; transform: scale(var(--cresce, 1)); filter: drop-shadow(0 0 6px var(--brilho)); }
.aneis.alcance .anel-1 { stroke: var(--folha); stroke-width: 2; }
.aneis.alcance .anel-3 { stroke-width: 1.3; }
.aneis.alcance .onda { fill: none; stroke: var(--traco-luz); stroke-width: 1.2; opacity: 0; transform-box: view-box; transform-origin: 200px 200px; animation: onda-alcance 3.6s cubic-bezier(.2, .6, .3, 1) infinite; filter: drop-shadow(0 0 4px var(--brilho)); }
.aneis.alcance .onda.o2 { animation-delay: 1.8s; }
@keyframes onda-alcance { 0% { transform: scale(.06); opacity: .95; } 75% { opacity: .22; } 100% { transform: scale(1); opacity: 0; } }
.aneis.alcance .pino { fill: var(--marfim); filter: drop-shadow(0 0 8px var(--folha)); }
.aneis.alcance .pino-halo { fill: color-mix(in srgb, var(--luz) 45%, transparent); stroke: var(--folha); stroke-width: 1.2; transform-box: view-box; transform-origin: 200px 200px; animation: pino-pulsa 1.8s ease-in-out infinite; }
@keyframes pino-pulsa { 50% { transform: scale(1.35); opacity: .6; } }
.aneis.alcance .tres { position: absolute; inset: 0; display: block; }
.aneis.alcance .tres li { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; padding: 2px 8px;
  font: 600 clamp(17px, 1.4vw, 21px)/1.1 var(--display); color: var(--marfim); background: rgba(5, 4, 8, .86); }
.aneis.alcance .tres li.aceso { text-shadow: var(--halo), 0 0 16px var(--brilho); }

/* ——— P3 · POR REPUTAÇÃO: o perfil do membro (moldura do REINO) + os cartões dos comentários ——— */
.reputacao { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 420px); align-items: center; gap: clamp(16px, 3vw, 44px); width: min(92vw, 900px); max-width: none; }
.perfil.arco { position: relative; width: 100%; display: grid; justify-items: center; row-gap: 12px; padding: 18px 22px 20px;
  background: linear-gradient(160deg, rgba(14, 11, 18, .92), rgba(5, 4, 8, .72)); border: 1px solid color-mix(in srgb, var(--luz) 45%, transparent); }
.perfil.arco::before, .perfil.arco::after { content: ''; position: absolute; width: 18px; height: 18px; }
.perfil.arco::before { left: -1px; top: -1px; border-left: 2px solid var(--folha); border-top: 2px solid var(--folha); }
.perfil.arco::after { right: -1px; bottom: -1px; border-right: 2px solid var(--folha); border-bottom: 2px solid var(--folha); }
.coroa-rep { width: 100%; height: auto; overflow: visible; }
.coroa-rep .fio { fill: none; stroke: var(--ouro); stroke-width: 1.3; stroke-dasharray: 600; stroke-dashoffset: var(--traco, 600); }
.coroa-rep .estrelas path { fill: rgba(5, 4, 8, .9); stroke: var(--folha); stroke-width: 1; opacity: .4; transition: opacity .25s, fill .25s; }
.coroa-rep .estrelas path.aceso { opacity: 1; fill: var(--folha); filter: drop-shadow(0 0 7px rgba(205, 181, 120, .8)); }
.coroa-rep .retrato { fill: none; stroke: var(--traco-luz); stroke-width: 2; }
.coroa-rep .retrato .aro { stroke: var(--folha); stroke-width: 1.5; fill: rgba(5, 4, 8, .8); }
.selos { display: flex; justify-content: center; gap: clamp(22px, 3.4vw, 44px); }
.selos li { display: grid; justify-items: center; row-gap: 6px; font: 600 clamp(18px, 1.5vw, 22px)/1.1 var(--display); }
.selo { width: 60px; height: 60px; }
.selo .fundo { fill: rgba(5, 4, 8, .6); stroke: rgba(239, 228, 204, .14); stroke-width: 4; }
.selo .enche { fill: none; stroke: var(--folha); stroke-width: 4; stroke-dasharray: 151; stroke-dashoffset: calc(151 * (1 - var(--selo, 1) * var(--w, 1))); transform: rotate(-90deg); transform-origin: 30px 30px; filter: drop-shadow(0 0 6px rgba(205, 181, 120, .6)); }
.selos li:nth-child(1) { --w: .96; }
.selos li:nth-child(2) { --w: .9; }
.selo .marca { fill: none; stroke: var(--marfim); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.comentarios.cartoes { display: grid; row-gap: 12px; max-width: none; text-align: left; }
.cartoes li:not(.rotulo) { position: relative; padding: 16px 16px 14px 46px; opacity: .3; transition: opacity .25s;
  font: italic 400 clamp(17px, 1.3vw, 20px)/1.4 var(--display); color: var(--marfim);
  background: linear-gradient(160deg, rgba(14, 11, 18, .92), rgba(5, 4, 8, .74)); border: 1px solid color-mix(in srgb, var(--luz) 38%, transparent); border-left: 2px solid var(--folha); }
.cartoes li.aceso { opacity: 1; box-shadow: 0 0 18px var(--brilho); }
.cartoes li:not(.rotulo)::before { content: '\201C'; position: absolute; left: 12px; top: 6px; font: 600 42px/1 var(--display); color: var(--folha); }
.cartoes .rotulo { text-align: center; }

/* ——— P4 · SIGA O GRÃO: a cadeia desenhada ——— */
.plano[data-cena="7"] > .gancho { margin-bottom: clamp(14px, 3.6vh, 44px); }
.cadeia.estacoes { width: min(94vw, 1160px); max-width: none; align-items: start; gap: clamp(12px, 2vw, 32px); }
.cadeia.estacoes li { justify-items: center; row-gap: 10px; }
.estacao { width: clamp(84px, 8.2vw, 122px); height: auto; overflow: visible; }
.estacao .medalha { fill: rgba(5, 4, 8, .92); stroke: var(--folha); stroke-width: 1.4; }
.estacao .medalha-in { fill: none; stroke: var(--ouro); stroke-width: .8; stroke-dasharray: 2 3; }
.estacao .ic { fill: none; stroke: var(--traco-luz); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cadeia.estacoes li.aceso .estacao { filter: drop-shadow(0 0 14px var(--brilho)); }
.cadeia.estacoes li.aceso .medalha { stroke-width: 2; }
.cadeia.estacoes li.aceso .ic { stroke: color-mix(in oklab, var(--luz) 35%, var(--marfim)); }
.cadeia.estacoes b { font: 600 clamp(19px, 1.6vw, 25px)/1.15 var(--display); color: var(--marfim); max-width: 15ch; }
.cadeia.estacoes span { display: block; padding: 8px 12px; max-width: 24ch; font-size: 17px; line-height: 1.4; color: #d5cbb6;
  background: linear-gradient(180deg, rgba(14, 11, 18, .9), rgba(5, 4, 8, .62)); border-top: 1px solid color-mix(in srgb, var(--luz) 55%, transparent); }
.cadeia.estacoes .trilha-grao path { stroke-width: 2; opacity: .9; filter: drop-shadow(0 0 5px var(--brilho)); }
.trilha-grao .grao ellipse { fill: var(--folha); filter: drop-shadow(0 0 10px var(--luz)) drop-shadow(0 0 4px rgba(205, 181, 120, .9)); }
.trilha-grao .grao path { fill: none; stroke: var(--noite); stroke-width: 1.6; }

/* ——— P6 · os cantos (as lancetas) ganham o vitral de verdade no shader (app.js, FS_ABOBADA): losangos, luz de trás, ouro ——— */

/* ——— P7 · AS GUILDAS ORGANIZADAS: brasão, grade alinhada de cartuchos, a fileira dos sete brasões ——— */
.brasao { width: clamp(50px, 4.4vw, 70px); height: auto; overflow: visible; filter: drop-shadow(0 0 12px var(--brilho)); }
.brasao .escudo { fill: rgba(5, 4, 8, .88); stroke: var(--folha); stroke-width: 1.6; }
.brasao .escudo-in { fill: color-mix(in srgb, var(--luz) 30%, transparent); stroke: var(--ouro); stroke-width: .7; }
.brasao .ic { fill: none; stroke: var(--marfim); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.oficios.grade { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; width: min(92vw, 980px); max-width: none; padding: 12px 0; }
.oficios.grade li { flex: 0 0 calc((100% - (var(--cols, 4) - 1) * 14px) / var(--cols, 4)); display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 8px 10px;
  font: 500 clamp(16px, 1.2vw, 19px)/1.25 var(--corpo); background: linear-gradient(180deg, rgba(14, 11, 18, .9), rgba(5, 4, 8, .7));
  border: 1px solid color-mix(in srgb, var(--luz) 34%, transparent); border-top: 2px solid color-mix(in oklab, var(--luz) 55%, var(--ouro)); }
.oficios.grade li::before { top: -5px; }
.oficios.grade li.aceso { box-shadow: 0 0 16px color-mix(in srgb, var(--luz) 40%, transparent); }
.brasoes { display: flex; justify-content: center; align-items: end; gap: 12px; }
.brasoes .mini { width: 22px; height: 27px; fill: none; stroke: var(--ouro); stroke-width: 3.2; stroke-linejoin: round; opacity: .5; }
.brasoes .atual .mini { width: 32px; height: 39px; opacity: 1; stroke: var(--folha); filter: drop-shadow(0 0 8px var(--brilho)); }
.brasoes .atual .mini > path { fill: color-mix(in srgb, var(--luz) 45%, transparent); }

/* ——— P8 · A PARTE GAMIFICADA (sem o nome): a barra de nível, a trilha dos sete títulos, as conquistas ——— */
.jornada { position: relative; display: grid; row-gap: 14px; width: min(92vw, 980px); max-width: none; }
.barra-nivel { position: relative; height: 8px; margin: 0 calc(100% / 14); background: rgba(239, 228, 204, .08); border: 1px solid rgba(184, 146, 63, .4); }
/* saliência (25/09): a barra cheia (gradiente + halo) acendia as duas pontas como ímãs; o herói é o NÓ que a percorre — barra recuada ao fundo */
.barra-nivel i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--nivel, 0) * 100%); background: linear-gradient(90deg, rgba(184, 146, 63, .5), rgba(201, 162, 39, .66)); box-shadow: 0 0 4px rgba(205, 181, 120, .22); transition: width .45s var(--curva); }
.barra-nivel .no-nivel { position: absolute; top: 50%; left: calc(var(--nivel, 0) * 100%); width: calc(26px * var(--no, 1)); height: calc(26px * var(--no, 1)); border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--marfim); box-shadow: 0 0 0 4px rgba(5, 4, 8, .9), 0 0 0 5px var(--folha), 0 0 26px var(--folha); transition: left .45s var(--curva), width .45s, height .45s; animation: no-respira 2.4s ease-in-out infinite; }
@keyframes no-respira { 50% { box-shadow: 0 0 0 4px rgba(5, 4, 8, .9), 0 0 0 6px var(--folha), 0 0 44px var(--folha); } }
.titulos { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.titulos li { display: grid; justify-items: center; row-gap: 8px; opacity: 1; }
.titulos li:not(.aceso) .insig { opacity: .45; }
.titulos li:not(.aceso) span { color: var(--cinza); }
.insig { width: clamp(38px, 3.4vw, 50px); height: auto; overflow: visible; transition: transform .35s var(--curva); }
.insig .escudo { fill: color-mix(in srgb, var(--tint) 22%, rgba(5, 4, 8, .92)); stroke: color-mix(in oklab, var(--tint) 55%, var(--marfim)); stroke-width: 1.6; }
.insig .coroa { fill: var(--ouro); }
/* saliência (25/09): as 7 insígnias de título eram 7 ímãs de brilho competindo com o herói (o nó que sobe na barra) — calmadas */
.titulos li.aceso .insig .escudo { fill: color-mix(in srgb, var(--tint) 55%, transparent); filter: drop-shadow(0 0 5px var(--tint)); }
.titulos li.aceso .insig .coroa { fill: var(--folha); }
.titulos li.atual .insig { transform: scale(1.28); }
.titulos span { font: 600 clamp(15px, 1.2vw, 18px)/1.1 var(--display); color: var(--marfim); }
.titulos li.atual span { color: var(--folha); }
.conquistas { display: flex; justify-content: center; gap: clamp(14px, 2vw, 26px); }
.conquistas li { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(184, 146, 63, .5); border-radius: 50%; background: rgba(5, 4, 8, .8); }
.conquistas svg { width: 34px; height: 34px; fill: none; stroke: var(--folha); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.conquistas li.aceso { border-color: var(--folha); box-shadow: 0 0 9px rgba(205, 181, 120, .3), inset 0 0 6px color-mix(in srgb, var(--luz) 25%, transparent); animation: conquista .6s var(--curva); }
@keyframes conquista { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: none; } }

/* ——— P9 · STATUS (a insígnia) e EVENTOS (os convites) ——— */
.fios-status { width: min(80vw, 460px); overflow: visible; }
/* saliência (25/09): o anel de raios girando a .85 virou um 2º ímã disputando com a insígnia central (o herói) — recuado para fundo */
.fios-status .raios-status { fill: none; stroke: var(--folha); stroke-width: 1.2; stroke-dasharray: 2 7; opacity: .42; filter: none; transform-box: view-box; transform-origin: 200px 100px; animation: gira-status 20s linear infinite; }
@keyframes gira-status { to { transform: rotate(360deg); } }
.fios-status .insignia .escudo { fill: color-mix(in srgb, var(--luz) 38%, rgba(5, 4, 8, .9)); stroke: var(--folha); stroke-width: 1.8; filter: drop-shadow(0 0 12px var(--luz)); animation: insignia-luz 3s ease-in-out infinite; }
@keyframes insignia-luz { 50% { filter: drop-shadow(0 0 20px var(--luz)) drop-shadow(0 0 5px rgba(205, 181, 120, .6)); } }
.fios-status .insignia .coroa { fill: var(--folha); stroke: var(--noite); stroke-width: .8; }
.fios-status .insignia .faixa { fill: none; stroke: var(--marfim); stroke-width: 1.6; opacity: .85; }
.evento { display: grid; justify-items: center; row-gap: 12px; width: min(92vw, 940px); max-width: none; }
.evento .encontro { width: min(70vw, 330px); }
.encontro .mesa { fill: var(--folha); filter: drop-shadow(0 0 10px rgba(205, 181, 120, .7)); }
.convites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; }
.convites li { position: relative; display: grid; grid-template-columns: 40px 1fr 30px; align-items: center; column-gap: 12px; padding: 14px 14px 14px 16px; text-align: left;
  background: linear-gradient(160deg, rgba(14, 11, 18, .94), rgba(5, 4, 8, .74)); border: 1px solid color-mix(in srgb, var(--luz) 42%, transparent); border-top: 2px solid var(--ouro); transition: opacity .25s, box-shadow .25s; }
.convites li::after { content: ''; position: absolute; right: 52px; top: 8px; bottom: 8px; border-left: 1px dashed rgba(184, 146, 63, .6); }
.convites li.aceso { box-shadow: 0 0 22px var(--brilho); }
.convites .ic { width: 40px; height: 40px; fill: none; stroke: var(--traco-luz); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.convites b { font: 600 clamp(18px, 1.5vw, 22px)/1.15 var(--display); color: var(--marfim); }
.convites .lacre { width: 30px; height: 30px; fill: none; stroke: var(--ouro); stroke-width: 2.6; }
.convites li.aceso .lacre { stroke: var(--folha); filter: drop-shadow(0 0 6px rgba(205, 181, 120, .7)); }

/* ——— P10 · O BANCO DE DADOS DA BABEL, VISTO ——— */
.etapas li { display: inline-flex; align-items: center; gap: 10px; }
.etapas .ic { width: 34px; height: 34px; flex: none; fill: none; stroke: var(--traco-luz); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* saliência (25/09): as 3 etapas no topo acendiam como ímãs disputando com a FICHA (o herói que se preenche) — recuadas */
.etapas li.aceso .ic { stroke: color-mix(in srgb, var(--folha) 44%, var(--traco-luz)); filter: none; }
.conversa.banco { display: grid; grid-template-columns: minmax(0, 1fr) clamp(60px, 8vw, 110px) minmax(0, 1fr); align-items: center; row-gap: 12px; width: min(94vw, 1000px); max-width: none; }
.banco .bolha.cliente { grid-column: 1; font: italic 400 clamp(18px, 1.5vw, 22px)/1.4 var(--display); color: var(--marfim); padding: 16px 18px; border-left: 2px solid var(--traco-luz); }
.banco .fluxo { grid-column: 2; width: 100%; height: 120px; overflow: visible; }
.banco .fluxo path { fill: none; stroke: var(--traco-luz); stroke-width: 1.4; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; opacity: calc((1 - var(--traco, 140) / 140) * .7); filter: none; animation: fluxo-corre 1s linear infinite; }
@keyframes fluxo-corre { to { stroke-dashoffset: -16; } }
.banco .ficha { grid-column: 3; position: relative; display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; align-items: start; padding: 16px 16px 16px 14px; text-align: left;
  background: linear-gradient(160deg, rgba(14, 11, 18, .96), rgba(5, 4, 8, .84)); border: 1px solid color-mix(in srgb, var(--luz) 45%, transparent); border-top: 2px solid var(--ouro); }
.ficha .pilha i { position: absolute; inset: 0; z-index: -1; border: 1px solid color-mix(in srgb, var(--luz) 28%, transparent); background: rgba(8, 6, 12, .72); }
.ficha .pilha i:nth-child(1) { transform: translate(9px, -9px); }
.ficha .pilha i:nth-child(2) { transform: translate(18px, -18px); opacity: .7; }
.ficha .pilha i:nth-child(3) { transform: translate(27px, -27px); opacity: .45; }
/* saliência (25/09): o cilindro e o fluxo brilhavam como 2 ímãs extras; o herói é a FICHA que se preenche — glows recuados */
.ficha .cilindro { width: 42px; height: 42px; fill: none; stroke: var(--folha); stroke-width: 1.8; filter: drop-shadow(0 0 4px rgba(205, 181, 120, .38)); }
.banco .campos { display: grid; row-gap: 6px; padding: 0; margin: 0; border: 0; background: none; justify-self: stretch; font: 500 17px/1.25 var(--corpo); font-style: normal; color: var(--marfim); }
.banco .campos li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; opacity: .22; border-left: 2px solid color-mix(in srgb, var(--luz) 45%, transparent); background: rgba(239, 228, 204, .04); transition: opacity .25s; }
.banco .campos li::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--folha); transform: rotate(45deg); }
.banco .campos li.aceso { opacity: 1; border-left-color: var(--folha); }
.banco .rotulo { grid-column: 1 / -1; }

/* ——— P11 · ANTES DA OFERTA, O ACEITE: a linha do tempo com o lacre ——— */
.aceite.marcos { position: relative; display: block; width: min(92vw, 1000px); max-width: none; }
.aceite.marcos .trilha-aceite { position: absolute; left: 0; right: 0; top: calc(clamp(64px, 6vw, 88px) / 2 - 10px); width: 100%; height: 20px; }
.aceite.marcos .anel-aceite { fill: none; stroke: var(--ouro); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 920; stroke-dashoffset: var(--traco, 920); filter: drop-shadow(0 0 6px rgba(205, 181, 120, .6)); }
.aceite.marcos ol { display: grid; grid-template-columns: 1fr 1fr auto; align-items: start; gap: clamp(16px, 3vw, 40px); padding: 0; }
.aceite.marcos li { display: grid; justify-items: center; row-gap: 10px; text-align: center; }
.aceite .marco { position: relative; width: clamp(64px, 6vw, 88px); height: auto; overflow: visible; }
.marco .aro { fill: rgba(5, 4, 8, .94); stroke: var(--folha); stroke-width: 1.5; }
.marco .ic { fill: none; stroke: var(--traco-luz); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aceite.marcos li.aceso .marco { filter: drop-shadow(0 0 14px var(--brilho)); }
.aceite.marcos li.aceso .ic { stroke: color-mix(in oklab, var(--luz) 30%, var(--marfim)); }
.aceite.marcos span { display: block; padding: 8px 14px; max-width: 30ch; color: #d5cbb6; background: linear-gradient(180deg, rgba(14, 11, 18, .9), rgba(5, 4, 8, .62)); border-top: 1px solid color-mix(in srgb, var(--luz) 55%, transparent); }
.lacre-aceite .cera { fill: color-mix(in srgb, var(--luz) 62%, #2a0a0c); stroke: var(--folha); stroke-width: 1.5; }
.lacre-aceite .fita { fill: color-mix(in srgb, var(--luz) 35%, rgba(5, 4, 8, .92)); stroke: var(--ouro); stroke-width: 1; }
.lacre-aceite .visto { fill: none; stroke: var(--marfim); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.aceite.marcos li.lacre-aceite.aceso .marco { filter: drop-shadow(0 0 22px var(--luz)); animation: conquista .7s var(--curva); }

/* ——— P12 · O CASO DO CARRO: ícones no nó e nos ofícios (os mesmos das notificações), a luz correndo nos fios, o celular trancado ——— */
.teia .estrelas3 circle { fill: rgba(5, 4, 8, .92); stroke: var(--traco-luz); stroke-width: 1.5; opacity: .35; }
.teia .estrelas3 circle.aceso { opacity: 1; stroke: var(--folha); filter: drop-shadow(0 0 12px var(--luz)); }
.teia .icones3 path { fill: none; stroke: var(--traco-luz); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .3; transition: opacity .25s; }
.teia .icones3 path.aceso { opacity: 1; stroke: var(--marfim); }
.teia .origem-no .miolo { fill: rgba(5, 4, 8, .92); stroke: var(--traco-luz); stroke-width: 1; opacity: 1; }
.teia .origem-no.aceso .miolo { fill: color-mix(in srgb, var(--luz) 38%, rgba(5, 4, 8, .92)); }
.teia .origem-no .carro { fill: none; stroke: var(--marfim); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.teia .fios3-luz path { fill: none; stroke: var(--folha); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 2 24; opacity: 0; }
.teia .fios3-luz path.corre { opacity: 1; animation: flui-caso 1.1s linear infinite; }
@keyframes flui-caso { to { stroke-dashoffset: -26; } }
.celular.bloqueio .cadeado { width: 26px; height: 26px; justify-self: center; fill: none; stroke: var(--folha); stroke-width: 2; }
.ofertas li { grid-template-columns: 38px 1fr; column-gap: 12px; align-items: center; }
.ofertas li .app { grid-row: 1 / span 2; width: 38px; height: 38px; padding: 6px; fill: none; stroke: var(--marfim); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round;
  background: color-mix(in srgb, var(--luz) 32%, rgba(5, 4, 8, .92)); border: 1px solid var(--folha); }
.ofertas li.aceso .app { box-shadow: 0 0 14px var(--brilho); }

/* ——— o celular (≤ 720 px): reorganiza, nunca encolhe abaixo de 14 px ——— */
@media (max-width: 720px) {
  .abertura-reino > .portico { width: 96vw; }
  .abertura-reino .passo { font-size: 14px; letter-spacing: .24em; gap: 10px; }
  .abertura-reino .passo::before, .abertura-reino .passo::after { width: 26px; }
  .abertura-reino .sigla { font-size: clamp(72px, 22vw, 100px); }
  .abertura-reino .acrostico { flex-direction: column; align-items: start; gap: 2px; margin-inline: auto; }
  .abertura-reino .acrostico li { padding: 0; text-align: left; font-size: 15px; letter-spacing: .14em; }
  .abertura-reino .acrostico li + li::before { display: none; }
  .abertura-reino .acrostico b { display: inline; width: auto; font-size: 34px; margin-right: .08em; }
  .abertura-reino .acrostico b::before { display: none; }
  .abertura-reino .acrostico .com-elo i { position: static; display: inline-grid; width: 28px; height: 28px; transform: none; font-size: 18px; margin-right: 6px; vertical-align: 6px; }
  .reputacao { grid-template-columns: 1fr; gap: 12px; }
  .perfil.arco { padding: 12px 14px; row-gap: 8px; }
  .coroa-rep { width: 82%; }
  .selo { width: 46px; height: 46px; }
  .cartoes li:not(.rotulo) { padding: 10px 12px 10px 38px; font-size: 16px; }
  .cartoes li:not(.rotulo)::before { font-size: 32px; left: 10px; }
  .cadeia.estacoes { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .estacao { width: 64px; }
  .cadeia.estacoes b { font-size: 17px; }
  .cadeia.estacoes span { font-size: 15px; padding: 6px 8px; }
  .oficios.grade { --cols: 2 !important; gap: 8px 10px; }
  .oficios.grade li { flex-basis: calc((100% - 10px) / 2); min-height: 40px; padding: 6px 8px; font-size: 15px; }
  .jornada { grid-template-columns: 28px auto; justify-content: center; column-gap: 14px; row-gap: 12px; }
  .barra-nivel { grid-column: 1; grid-row: 1; width: 8px; height: auto; margin: 22px 0 22px 10px; }
  .barra-nivel i { width: 100%; height: calc(var(--nivel, 0) * 100%); bottom: auto; }
  .barra-nivel .no-nivel { left: 50%; top: calc(var(--nivel, 0) * 100%); width: calc(20px * var(--no, 1)); height: calc(20px * var(--no, 1)); }
  .titulos { grid-column: 2; grid-row: 1; grid-template-columns: 1fr; row-gap: 4px; justify-items: start; }
  .titulos li { grid-auto-flow: column; justify-content: start; align-items: center; column-gap: 12px; height: 40px; }
  .insig { width: 30px; }
  .conquistas { grid-column: 1 / -1; }
  .conquistas li { width: 48px; height: 48px; }
  .conquistas svg { width: 28px; height: 28px; }
  .convites { grid-template-columns: 1fr; gap: 8px; }
  .convites li { padding: 10px 12px; }
  .evento .encontro { width: 56vw; }
  .etapas li { gap: 6px; }
  .etapas .ic { width: 26px; height: 26px; }
  .conversa.banco { grid-template-columns: 1fr; }
  .banco .fluxo { display: none; }
  .banco .bolha.cliente, .banco .ficha { grid-column: 1; }
  .banco .bolha.cliente { font-size: 17px; padding: 10px 12px; }
  .banco .ficha { margin-top: 18px; margin-right: 22px; padding: 10px 12px; grid-template-columns: 32px 1fr; }
  .ficha .cilindro { width: 32px; height: 32px; }
  .banco .campos li { padding: 5px 8px; font-size: 15px; }
  .aceite.marcos ol { grid-template-columns: 1fr; row-gap: 14px; }
  .aceite.marcos .trilha-aceite { display: none; }
  .aceite .marco { width: 56px; }
  .ofertas li { grid-template-columns: 30px 1fr; column-gap: 8px; }
  .ofertas li .app { width: 30px; height: 30px; padding: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .aneis.alcance .onda, .aneis.alcance .pino-halo, .barra-nivel .no-nivel, .fios-status .raios-status, .fios-status .insignia .escudo, .banco .fluxo path, .teia .fios3-luz path.corre, .conquistas li.aceso { animation: none; }
}
/* (medido: a 1440 o título longo da cena 26 subia até o nome BABEL) — o título do Banco de Dados assenta em três linhas */
.plano[data-cena="26"] > .gancho { font-size: clamp(34px, 4.4vw, 70px); max-width: 22ch; }

/* ——— ordem 046 · frente babel-funcoes · CENA 25 "Ela atende. Ela vende. Ela não esquece." ———
   a BABEL é a MENTE no centro: a rosácea de ouro rei (a linguagem da coroa/rosácea da peça) com o olho escuro; as seis funções da
   foto 6 são estações em volta (três de cada lado, na ordem da foto: desce a esquerda, desce a direita), cada uma com a janela da
   micro-demonstração virada para o núcleo, o ícone no traço do REINO, o nome em marfim e UMA linha do que faz. Os fios de luz saem
   do aro do núcleo e param na borda da janela (cena.js fiarMente): nenhum atravessa letra (estacoes.mjs mede). Cor é luz: a tocha
   do capítulo e a folha só no traço, no fio e no vidro; a letra é marfim. */
.mente { position: relative; width: min(94vw, 1240px); max-width: none; --nuc: clamp(180px, 17vw, 240px); }
.mente.material { outline: none; }
.fios-mente { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.fios-mente path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.fios-mente .fio { stroke: var(--traco-luz); stroke-width: 1.3; stroke-dasharray: var(--comp) var(--comp); stroke-dashoffset: var(--traco, 0); opacity: .75; }
.fios-mente .pulso { stroke: var(--folha); stroke-width: 2.6; stroke-dasharray: 10 var(--comp); stroke-dashoffset: 10; opacity: 0; filter: drop-shadow(0 0 5px var(--folha)); }
.fios-mente .pulso.corre { opacity: 1; animation: pulso-mente 2.4s cubic-bezier(.4, 0, .2, 1) infinite; animation-delay: var(--atraso, 0s); }
@keyframes pulso-mente { 0% { stroke-dashoffset: 10; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { stroke-dashoffset: calc(-1 * var(--comp)); opacity: 0; } }
.mente > .nucleo { position: absolute; left: 50%; top: 50%; width: calc(var(--nuc) * .86); height: auto; transform: translate(-50%, -50%); z-index: 1; overflow: visible; }
.nucleo .halo { fill: rgba(201, 162, 39, .1); stroke: none; }
.nucleo .aro { fill: rgba(5, 4, 8, .82); stroke: var(--rei); stroke-width: 1.6; }
.nucleo .aro.fino { fill: none; stroke: rgba(205, 181, 120, .45); stroke-width: .8; stroke-dasharray: 2 3; }
.nucleo .petalas { transform-origin: 0 0; animation: rosacea-gira 60s linear infinite; }
.nucleo .petalas path { fill: rgba(201, 162, 39, .12); stroke: var(--rei); stroke-width: 1.1; stroke-linejoin: round; }
.nucleo .olho { fill: var(--noite); stroke: var(--folha); stroke-width: 1.2; }
.nucleo .coroa { fill: none; stroke: var(--folha); stroke-width: 1.3; stroke-linejoin: round; }
.plano.vivo .nucleo { filter: drop-shadow(0 0 calc(10px + 16px * var(--mente, 0)) rgba(201, 162, 39, calc(.25 + .45 * var(--mente, 0)))); }
@keyframes rosacea-gira { to { transform: rotate(360deg); } }
.funcoes { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 420px) var(--nuc) minmax(0, 420px); justify-content: space-between;
  grid-template-rows: repeat(3, auto); row-gap: clamp(8px, 1.4vh, 14px); margin: 0; padding: 0; list-style: none; }
.funcoes > li:nth-child(-n+3) { grid-column: 1; }
.funcoes > li:nth-child(n+4) { grid-column: 3; }
.funcoes > li:nth-child(1), .funcoes > li:nth-child(4) { grid-row: 1; }
.funcoes > li:nth-child(2), .funcoes > li:nth-child(5) { grid-row: 2; }
.funcoes > li:nth-child(3), .funcoes > li:nth-child(6) { grid-row: 3; }
.funcao { position: relative; display: grid; grid-template-columns: 1fr clamp(88px, 7.6vw, 108px); grid-template-areas: 'nome demo' 'faz demo'; align-content: center; column-gap: 14px; row-gap: 4px;
  padding: 8px 8px 8px 16px; text-align: right; background: linear-gradient(90deg, rgba(5, 4, 8, .55), rgba(5, 4, 8, .9)); border: 1px solid color-mix(in srgb, var(--luz) 26%, transparent); }
.funcoes > li:nth-child(n+4) { grid-template-columns: clamp(88px, 7.6vw, 108px) 1fr; grid-template-areas: 'demo nome' 'demo faz'; padding: 8px 16px 8px 8px; text-align: left;
  background: linear-gradient(270deg, rgba(5, 4, 8, .55), rgba(5, 4, 8, .9)); }
.funcao::before, .funcao::after { content: ''; position: absolute; width: 10px; height: 10px; border: 0 solid var(--ouro); }
.funcao::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.funcao::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.funcao.aceso { border-color: color-mix(in srgb, var(--luz) 60%, transparent); box-shadow: 0 0 26px rgba(201, 162, 39, .12); }
.funcao .nome { grid-area: nome; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0; font: 600 clamp(21px, 1.75vw, 26px)/1.1 var(--display); color: var(--marfim); }
.funcoes > li:nth-child(n+4) .nome { justify-content: flex-start; }
.funcao .nome .ic { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--folha); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.funcoes > li:nth-child(-n+3) .nome .ic { order: 2; }
.funcao.aceso .nome .ic { filter: drop-shadow(0 0 6px rgba(205, 181, 120, .6)); }
.funcao .faz { grid-area: faz; margin: 0; font: 400 17px/1.3 var(--corpo); color: #d1c7b2; }
.funcao .demo { grid-area: demo; width: 100%; height: auto; overflow: visible; }
.demo * { vector-effect: non-scaling-stroke; }
.demo .tela { fill: rgba(5, 4, 8, .92); stroke: color-mix(in srgb, var(--luz) 55%, transparent); stroke-width: 1; }
.demo path, .demo circle:not(.cliente):not(.moeda), .demo rect:not(.tela) { fill: none; stroke: var(--traco-luz); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.demo .risco { stroke: rgba(239, 228, 204, .5); }
.demo .luz, .demo .visto, .demo .resolvido, .demo .carimbo path, .demo .confirma { stroke: var(--folha); stroke-width: 1.8; }
.mente > .rotulo { position: absolute; left: 50%; bottom: calc(-1 * clamp(4px, 1vh, 10px)); transform: translate(-50%, 100%); margin: 0; white-space: nowrap; }
/* as micro-demonstrações: um fluxo curto que se repete enquanto a estação está acesa (transform/opacity; nada de layout) */
.funcao .demo g, .funcao .demo .visto, .funcao .demo .resolvido, .funcao .demo .cliente, .funcao .demo .moeda, .funcao .demo .confirma, .funcao .demo .bloco, .funcao .demo .brilho-volta, .funcao .demo .aberto { transform-box: fill-box; transform-origin: center; }
.funcao:not(.aceso) .demo :is(.vai, .pensa, .visto, .carimbo, .resolvido, .confirma, .bloco, .brilho-volta) { opacity: 0; }
.funcao.aceso .demo .vem { animation: d-vem 4.8s ease-out infinite; }
.funcao.aceso .demo .pensa circle { animation: d-pensa 4.8s ease-in-out infinite; }
.funcao.aceso .demo .pensa circle:nth-child(2) { animation-delay: .15s; }
.funcao.aceso .demo .pensa circle:nth-child(3) { animation-delay: .3s; }
.funcao.aceso .demo .vai { animation: d-vai 4.8s ease-out infinite; }
.funcao.aceso .demo .visto { animation: d-visto 4.8s ease-out infinite; }
@keyframes d-vem { 0% { opacity: 0; transform: translateY(6px); } 10%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes d-pensa { 0%, 18% { opacity: 0; } 24%, 36% { opacity: 1; transform: translateY(-2px); } 30% { transform: none; } 42%, 100% { opacity: 0; } }
@keyframes d-vai { 0%, 40% { opacity: 0; transform: translateY(6px); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes d-visto { 0%, 55% { opacity: 0; transform: scale(.4); } 62%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.demo .pensa circle { fill: var(--folha); stroke: none; opacity: 0; }
.funcao.aceso .demo .barra { stroke: var(--folha); stroke-dasharray: 34; animation: d-barra 4.8s ease-out infinite; }
.funcao.aceso .demo .carimbo { animation: d-carimbo 4.8s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes d-barra { 0% { stroke-dashoffset: 34; } 45%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 34; } }
@keyframes d-carimbo { 0%, 45% { opacity: 0; transform: scale(1.8) rotate(-18deg); } 55%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.demo .cliente { fill: var(--folha); stroke: none; }
.funcao.aceso .demo .cliente { animation: d-volta 4.8s ease-in-out infinite; }
.funcao.aceso .demo .brilho-volta { animation: d-visto 4.8s ease-out infinite; animation-delay: .6s; }
@keyframes d-volta { 0%, 8% { transform: none; opacity: 1; } 25% { transform: translate(34px, -15px); opacity: .5; } 42% { transform: translate(54px, 0); opacity: .2; } 60% { transform: translate(34px, 15px); opacity: .6; } 78%, 100% { transform: none; opacity: 1; } }
.demo .aberto { stroke: rgba(239, 228, 204, .55) !important; stroke-dasharray: 3 3; }
.funcao.aceso .demo .aberto { animation: d-fecha 4.8s ease-out infinite; }
.funcao.aceso .demo .resolvido { animation: d-visto 4.8s ease-out infinite; animation-delay: .2s; }
@keyframes d-fecha { 0%, 50% { stroke-dasharray: 3 3; transform: rotate(0); } 50% { transform: rotate(180deg); } 58%, 92% { stroke-dasharray: 60 0; stroke: var(--folha); } }
.demo .moeda { fill: rgba(201, 162, 39, .35); stroke: var(--folha); stroke-width: 1.4; }
.funcao.aceso .demo .moeda { animation: d-moeda 4.8s cubic-bezier(.5, 0, .7, 1) infinite; }
.funcao.aceso .demo .confirma { stroke-dasharray: 20; animation: d-barra2 4.8s ease-out infinite; }
@keyframes d-moeda { 0% { opacity: 0; transform: translateY(-10px); } 12% { opacity: 1; } 40%, 92% { opacity: 1; transform: translateY(20px) scale(.8); } 100% { opacity: 0; transform: translateY(20px) scale(.8); } }
@keyframes d-barra2 { 0%, 40% { stroke-dashoffset: 20; opacity: 0; } 50%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { opacity: 0; } }
.demo .grade { stroke: rgba(239, 228, 204, .28) !important; }
.demo .bloco { fill: rgba(201, 162, 39, .32) !important; stroke: var(--folha) !important; }
.funcao.aceso .demo .bloco { animation: d-bloco 4.8s cubic-bezier(.3, 1.3, .5, 1) infinite; }
.funcao.aceso .demo .b2 { animation-delay: .35s; }
.funcao.aceso .demo .b3 { animation-delay: .7s; }
.funcao.aceso .demo .b4 { animation-delay: 1.05s; }
@keyframes d-bloco { 0% { opacity: 0; transform: translate(-14px, -10px) scale(.6); } 14%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (max-width: 720px) {
  /* no celular: o núcleo em cima, um tronco de luz desce pelo meio e dá um ramo a cada estação (duas colunas) — nada cruza letra */
  .mente { width: 94vw; --nuc: 64px; padding-top: calc(var(--nuc) + 14px); }
  .mente > .nucleo { top: 0; transform: translateX(-50%); width: var(--nuc); }
  .funcoes { grid-template-columns: 1fr 1fr; column-gap: 26px; row-gap: 8px; justify-content: stretch; }
  .funcoes > li:nth-child(n+4) { grid-column: 2; }
  .funcao, .funcoes > li:nth-child(n+4) { grid-template-columns: 1fr; grid-template-areas: 'demo' 'nome' 'faz'; row-gap: 2px; padding: 6px 8px 7px; text-align: left; }
  .funcao .demo { width: 44px; justify-self: start; }
  .funcoes > li:nth-child(-n+3) .demo { justify-self: end; }
  .funcao .nome, .funcoes > li:nth-child(n+4) .nome { justify-content: flex-start; font-size: 18px; }
  .funcao .nome .ic { display: none; }
  .funcao .faz { font-size: 17px; line-height: 1.22; }
  .mente > .rotulo { top: calc(var(--nuc) / 2); bottom: auto; left: 0; transform: translateY(-50%); width: 36%; white-space: normal; text-align: left; line-height: 1.15; }
}
@media (prefers-reduced-motion: reduce) { .nucleo .petalas, .fios-mente .pulso.corre, .funcao.aceso .demo * { animation: none !important; } .funcao .demo * { opacity: 1 !important; } }

/* ——— ordem 046 · frente babel-funcoes · CENA 30 "A conta é sua." — a conta VIRA IMAGEM ———
   quatro quadros de vitral lidos da esquerda para a direita, cada um sobre o seu campo: os LEADS são pontos de luz que chegam (um
   ponto por lead, até a moldura encher); a LANCETA do REINO deixa passar só a conversão (a corrente de pontos atravessa o vitral e
   só a fração convertida sai em ouro; o vidro se enche até a porcentagem); cada cliente convertido é uma MOEDA cunhada no valor do
   ticket; as moedas enchem a ARCA sob a coroa, onde mora o faturamento. g chega em ondas (cena.js MEC 30); o resto é luz em laço. */
.conta-viva { position: relative; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: start; width: min(94vw, 1080px); column-gap: 12px; }
/* (ordem 25/09) UM SÓ MOTOR: um FIO DE OURO cruza as bordas dos quatro quadros e os costura numa corrente única — o valor não
   fica em 4 caixas soltas, corre da nascente (leads) ao baú, ganhando luz a cada estação. Fica ACIMA dos quadros (fino, luminoso,
   sem cobrir a arte nem o texto); os operadores × = ficam acima do fio; nós de luz fixam o fio ao centro de cada estação. */
.conta-viva .etapa { z-index: 1; }
.conta-viva .op { position: relative; z-index: 4; }
.rio { position: absolute; left: 0; right: 0; top: clamp(46px, 5.4vw, 96px); height: clamp(30px, 3.6vw, 52px); z-index: 3; pointer-events: none; overflow: visible;
  opacity: calc(.4 + .6 * var(--rio, 0)); transition: opacity .55s var(--curva); }
.rio .leito { position: absolute; left: 4%; right: 2%; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--marfim) 60%, transparent), color-mix(in srgb, var(--ouro) 82%, transparent) 52%, var(--folha));
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--folha) 60%, transparent)); }
.rio .fluxo { position: absolute; left: 0; top: 50%; width: calc(100% + 64px); height: 8px; transform: translate(-64px, -50%); border-radius: 999px; will-change: transform;
  background: repeating-linear-gradient(90deg, transparent 0 44px, color-mix(in srgb, var(--folha) 96%, transparent) 44px 54px, transparent 54px 64px);
  filter: blur(.3px) drop-shadow(0 0 7px var(--folha)); animation: rio-corre 2.6s linear infinite; }
@keyframes rio-corre { from { transform: translate(-64px, -50%); } to { transform: translate(0, -50%); } }
.plano:not(.vivo) .rio .fluxo { animation-play-state: paused; }
/* os NÓS de cada estação (leads · funil · moedas · baú) fixam o fio ao centro dos quadros e PULSAM em sequência (a conta corre da
   esquerda ao baú); a luz ASCENDE para a direita — a corrente termina, mais forte, ENTRANDO no baú/faturamento (leva o olho ao herói) */
.rio .no { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); }
.rio .n1 { left: 12.5%; background: radial-gradient(circle, color-mix(in srgb, var(--marfim) 82%, transparent), transparent 70%); }
.rio .n2 { left: 38%;   width: 13px; height: 13px; background: radial-gradient(circle, color-mix(in srgb, var(--ouro) 88%, transparent), transparent 70%); }
.rio .n3 { left: 63%;   width: 14px; height: 14px; background: radial-gradient(circle, color-mix(in srgb, var(--folha) 90%, transparent), transparent 70%); }
.rio .n4 { left: 88%;   width: 17px; height: 17px; background: radial-gradient(circle, var(--folha), color-mix(in srgb, var(--folha) 30%, transparent) 55%, transparent 72%); filter: drop-shadow(0 0 8px var(--folha)); }
.plano.vivo .rio .no { animation: no-corre 2.4s ease-in-out infinite; }
.rio .n1 { animation-delay: 0s; } .rio .n2 { animation-delay: .18s; } .rio .n3 { animation-delay: .36s; } .rio .n4 { animation-delay: .54s; }
@keyframes no-corre { 0%, 60%, 100% { transform: translate(-50%, -50%) scale(1); } 22% { transform: translate(-50%, -50%) scale(1.55); } }
.conta-viva .etapa { display: grid; row-gap: 10px; align-content: start; }
.conta-viva .quadro { width: 100%; height: auto; overflow: visible; }
.conta-viva .quadro * { vector-effect: non-scaling-stroke; transform-box: view-box; }
.quadro .moldura { fill: rgba(5, 4, 8, .86); stroke: color-mix(in srgb, var(--luz) 45%, transparent); stroke-width: 1; }
.conta-viva .op { align-self: start; margin-top: clamp(40px, 5vw, 70px); padding: 0; font-size: 30px; }
.conta-viva label { font-size: 17px; color: #d1c7b2; }
.conta-viva input { border-color: color-mix(in srgb, var(--luz) 50%, rgba(239, 228, 204, .3)); }
.conta-viva .faturamento { display: block; min-height: 1.2em; padding: 0; text-align: left; font: 600 clamp(24px, 2.3vw, 36px)/1.15 var(--display); color: var(--folha);
  text-shadow: 0 0 22px rgba(205, 181, 120, .4); opacity: var(--pronto, 1); }
.quadro .lead { fill: var(--marfim); opacity: calc(min(1, max(0, var(--chega, 1) * var(--n) - var(--i))) * .85); animation: cintila 2.6s ease-in-out infinite, deriva-lead 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -97ms), calc(var(--i) * -61ms); }
@keyframes cintila { 50% { fill: rgba(239, 228, 204, .45); } }
/* os leads não ficam parados: a nascente inclina para a direita, em direção ao funil (mais tempo puxado ao vitral) */
@keyframes deriva-lead { 0% { transform: translateX(-1.6px); } 65% { transform: translateX(3px); } 100% { transform: translateX(-1.6px); } }
.quadro .vidro { fill: rgba(201, 162, 39, .07); }
.quadro .passa { fill: rgba(201, 162, 39, .5); transform-origin: 80px 112px; transform: scaleY(calc(var(--conv) * var(--filtra, 1))); transform-box: view-box; }
.quadro .lanceta { fill: none; stroke: var(--folha); stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(205, 181, 120, .5)); }
.corrente circle { fill: var(--marfim); opacity: 0; animation: corre-barra 3.2s linear infinite; animation-delay: calc(var(--i) * -.32s); }
.corrente circle.passa-luz { animation-name: corre-passa; }
/* os rejeitados batem no funil e CAEM em cinza (marfim apagado na noite), não atravessam; só a fração convertida sai em ouro */
@keyframes corre-barra { 0% { transform: translate(0, 0); opacity: 0; fill: var(--marfim); } 8% { opacity: .8; } 34% { transform: translate(50px, 3px); opacity: .58; fill: var(--marfim); } 64% { transform: translate(56px, 20px); opacity: .16; fill: color-mix(in srgb, var(--marfim) 26%, var(--noite)); } 100% { transform: translate(58px, 36px); opacity: 0; fill: color-mix(in srgb, var(--marfim) 26%, var(--noite)); } }
@keyframes corre-passa { 0% { transform: translateX(0); opacity: 0; fill: var(--marfim); } 8% { opacity: .9; } 45% { fill: var(--marfim); } 55% { fill: var(--folha); } 92% { opacity: 1; } 100% { transform: translateX(158px); opacity: 0; fill: var(--folha); } }
.plano:not(.vivo) .corrente circle { animation-play-state: paused; }
/* cada cliente convertido é CUNHADO: a moeda cai de cima na pilha (rola para o baú) a cada recálculo; a de cima brilha */
.moedas ellipse { fill: rgba(201, 162, 39, .42); stroke: color-mix(in srgb, var(--folha) 55%, var(--ouro)); stroke-width: 1.2; opacity: calc(min(1, max(0, var(--cunha, 1) * var(--n) - var(--i)))); animation: cunha-moeda .5s var(--curva) backwards; animation-delay: calc(var(--i) * .045s); }
.moedas ellipse.topo { animation: cunha-moeda .5s var(--curva) backwards, brilho-moeda 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .045s), calc(var(--i) * -.21s); }
@keyframes cunha-moeda { 0% { transform: translateY(-24px); opacity: 0; } 55% { opacity: 1; } 100% { transform: translateY(0); } }
/* saliência (25/09): a arca e as moedas de ouro roubavam o herói (o título + o FATURAMENTO) — brilho/saturação recuados, sem apagar */
@keyframes brilho-moeda { 50% { fill: rgba(226, 197, 128, .62); } }
.quadro .arca { fill: none; stroke: var(--folha); stroke-width: 1.6; stroke-linejoin: round; }
/* o baú responde ao FATURAMENTO: a coroa acende e o ouro transborda de luz na altura do valor (--nivel), além do encher pela rolagem */
.quadro .coroa-arca { fill: rgba(201, 162, 39, .18); stroke: var(--rei); stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 calc((2px + 6px * var(--enche, 1)) * (.5 + .5 * var(--nivel, .5))) rgba(201, 162, 39, .5)); }
.quadro .ouro { fill: rgba(201, 162, 39, .42); transform: translateY(calc((1 - var(--nivel, .5) * var(--enche, 1)) * 50px)); filter: drop-shadow(0 0 calc(var(--nivel, 0) * var(--enche, 1) * 7px) color-mix(in srgb, var(--folha) 55%, transparent)); }
.conta-viva.pronto .coroa-arca { animation: coroa-luz 2.8s ease-in-out infinite; }
@keyframes coroa-luz { 50% { fill: rgba(201, 162, 39, .3); } }
/* (ordem 25/09) O PULSO DE VALOR (dopamina, sem som): a cada tecla, uma onda corre o rio e o baú pulsa; o faturamento — o herói — reluz */
.conta-viva.pulsa .rio .fluxo { animation: rio-corre 2.6s linear infinite, rio-pulso .55s var(--curva); }
@keyframes rio-pulso { 0% { filter: blur(.3px) drop-shadow(0 0 6px color-mix(in srgb, var(--folha) 70%, transparent)); } 35% { filter: blur(.3px) drop-shadow(0 0 14px var(--folha)); } 100% { filter: blur(.3px) drop-shadow(0 0 6px color-mix(in srgb, var(--folha) 70%, transparent)); } }
.conta-viva.pulsa .quadro .coroa-arca { transform-box: view-box; transform-origin: 80px 30px; animation: pulso-bau .55s var(--curva); }
@keyframes pulso-bau { 0% { transform: scale(1); } 32% { transform: scale(1.09); } 100% { transform: scale(1); } }
.conta-viva.pulsa .faturamento { animation: pulso-fat .55s var(--curva); }
@keyframes pulso-fat { 0% { text-shadow: 0 0 22px rgba(205, 181, 120, .4); } 30% { text-shadow: 0 0 30px rgba(205, 181, 120, .85); } 100% { text-shadow: 0 0 22px rgba(205, 181, 120, .4); } }
.exemplo-conta { transition: opacity .3s; }
.plano:has(.conta-viva.editado) .exemplo-conta { opacity: 0; }
@media (max-width: 720px) {
  .conta-viva { grid-template-columns: 1fr; row-gap: 2px; width: 92vw; }
  .rio { display: none; } /* o rio é a composição horizontal; empilhado, cada estação vive por si */
  .conta-viva .etapa { grid-template-columns: 104px 1fr; column-gap: 12px; align-items: center; }
  .conta-viva .op { margin: 0; font-size: 22px; line-height: 1; }
  .conta-viva input { padding: 8px 10px; }
  .conta-viva .faturamento { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .quadro .lead, .corrente circle, .moedas ellipse, .moedas ellipse.topo, .conta-viva.pronto .coroa-arca, .rio .fluxo, .rio .no, .conta-viva.pulsa .rio .fluxo, .conta-viva.pulsa .quadro .coroa-arca, .conta-viva.pulsa .faturamento { animation: none !important; } .corrente circle { opacity: .7; } }

/* ============================================================================
   ORDEM 25/09 (Criador) · INCREMENTO DE POTÊNCIA sobre "A Nave das Sete Tochas".
   Três vetores, sem tocar cânone/paleta/sequência/copys. Cores só do cânone (rgba
   das mesmas tinturas). Regra de segurança: nenhum movimento mexe na opacidade nem
   passa luz POR CIMA de texto — a permanência e o WCAG ficam verdes. Ancorado em
   .plano.vivo (a cena ativa, app.js:1171). Complementa o reforço do FIM no app.js.
   ============================================================================ */

/* — (1) O FIM É O PICO · o clímax ganha um glow radial branco atrás da rosácea, nascendo
   com a cena e respirando, SEMPRE atrás do texto (z-index -1) e concentrado no centro
   da arte (não sobe até o gancho): o fim, com o bloom central novo do app.js, vence — */
.plano.climax::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle 23vmin at 50% 52%, rgba(239, 228, 204, .1) 0%, rgba(205, 181, 120, .06) 44%, transparent 70%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .9s var(--curva); }
.plano.climax.vivo::after { opacity: 1; animation: climax-respira 4.4s ease-in-out infinite; }
@keyframes climax-respira { 50% { opacity: .58; } }

/* — (2) MOVIMENTO VIVO — */
/* Notícias (18) e Ganhos (23): as linhas já chegam escalonadas pela rolagem; agora RESPIRAM —
   um brilho pulsa na guarda de luz à ESQUERDA do cartão (a borda), nunca sobre a letra; defasado por item */
.plano.vivo .feed li.aceso, .plano.vivo .ganhos li.aceso { animation: guarda-pulsa 3.2s ease-in-out infinite; }
.plano.vivo .feed li:nth-child(2).aceso, .plano.vivo .ganhos li:nth-child(2).aceso { animation-delay: .4s; }
.plano.vivo .feed li:nth-child(3).aceso, .plano.vivo .ganhos li:nth-child(3).aceso { animation-delay: .8s; }
.plano.vivo .feed li:nth-child(4).aceso { animation-delay: 1.2s; }
.plano.vivo .feed li:nth-child(5).aceso { animation-delay: 1.6s; }
@keyframes guarda-pulsa { 0%, 100% { box-shadow: -1px 0 0 0 transparent; } 50% { box-shadow: -4px 0 18px -3px var(--brilho); } }

/* Gamificação (20): os escudos de rank pulsam a luz da sua tintura (filtro, sem transform: não briga com .atual),
   e a barra de nível ganha o gradiente PÚRPURA (imperador) → OURO → FOLHA (a subida do reino) */
.barra-nivel i { background: linear-gradient(90deg, var(--imperador), var(--ouro) 62%, var(--folha)); box-shadow: 0 0 16px rgba(205, 181, 120, .6), 0 0 6px var(--imperador); }
.plano.vivo .titulos li.aceso .insig .escudo { animation: escudo-pulsa 2.6s ease-in-out infinite; }
.plano.vivo .titulos li:nth-child(2).aceso .insig .escudo { animation-delay: .3s; }
.plano.vivo .titulos li:nth-child(3).aceso .insig .escudo { animation-delay: .6s; }
.plano.vivo .titulos li:nth-child(4).aceso .insig .escudo { animation-delay: .9s; }
.plano.vivo .titulos li:nth-child(5).aceso .insig .escudo { animation-delay: 1.2s; }
@keyframes escudo-pulsa { 50% { filter: drop-shadow(0 0 16px var(--tint)) drop-shadow(0 0 5px var(--tint)); } }

/* Passagem (24): a LINHA DE LUZ central varrendo esquerda → direita, matando a zona morta (cena sem texto: sem risco) */
.plano[data-cena="24"]::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--folha), rgba(205, 181, 120, .95), transparent);
  filter: drop-shadow(0 0 12px rgba(205, 181, 120, .7)); opacity: 0; }
.plano[data-cena="24"].vivo::after { animation: varre-passagem 3.6s var(--curva) infinite; }
@keyframes varre-passagem { 0% { opacity: 0; transform: translateX(-58%) scaleX(.32); } 28%, 58% { opacity: 1; } 100% { opacity: 0; transform: translateX(58%) scaleX(.32); } }

/* Abertura (01): o BOKEH que respira ao fundo (opacidade e escala), pontos de ouro nas margens, sempre atrás do texto */
.abertura-reino::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform-origin: 50% 50%;
  background:
    radial-gradient(circle 5px at 15% 24%, rgba(205, 181, 120, .5), transparent 62%),
    radial-gradient(circle 7px at 84% 19%, rgba(184, 146, 63, .42), transparent 62%),
    radial-gradient(circle 4px at 22% 78%, rgba(205, 181, 120, .4), transparent 62%),
    radial-gradient(circle 6px at 79% 82%, rgba(184, 146, 63, .38), transparent 62%),
    radial-gradient(circle 3px at 50% 12%, rgba(239, 228, 204, .35), transparent 60%),
    radial-gradient(circle 4px at 8% 52%, rgba(205, 181, 120, .32), transparent 60%),
    radial-gradient(circle 5px at 92% 55%, rgba(184, 146, 63, .3), transparent 60%);
  animation: bokeh-respira 5.2s ease-in-out infinite; }
@keyframes bokeh-respira { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }

/* — (3) ESCALA + MATAR ESPAÇO MORTO — */
/* os títulos-conceito timidos crescem: o índice do capítulo (12–18px → grande) e o gancho pequeno ("O desconto anda") ~40% */
/* o índice do capítulo cresce no desktop (12–18px → 27px); no mobile fica no tamanho da base (15px), senão o
   feed da cena 9 no 430 é espremido e os cartões se sobrepõem (medido: 430-9 bloco sobre bloco) */
.indice { font-size: clamp(15px, 1.95vw, 28px); letter-spacing: .19em; }
.gancho.pequeno { font-size: clamp(46px, 5.4vw, 86px); }

/* glow volumétrico DOURADO (duro, não soft: queda curta) atrás do input da busca (cena 2, fora das janelas da curva).
   NB: o glow atrás das Guildas (11–17) e do cupom (8) foi RETIRADO — elevava o colorido do patamar 08–17 e achatava a
   progressão da curva (medido: curva VERMELHA); a curva verde é inegociável, então a escala fica no tipo e no input. */
.busca { position: relative; }
.busca::before { content: ''; position: absolute; inset: -7px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 68% 150% at 50% 50%, rgba(205, 181, 120, .3) 0%, rgba(184, 146, 63, .12) 46%, transparent 72%); filter: blur(1.5px); }

/* a coroa (sigilo) do portal cresce na entrada; o tracking de REINO abre ao ser gravado */
.sigilo-grande { animation: coroa-cresce 1.5s var(--curva) both; }
@keyframes coroa-cresce { from { transform: scale(.62); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
.lettering .reino { animation: reino-tracking 2.4s var(--curva) .35s both; }
@keyframes reino-tracking { from { letter-spacing: -.075em; } to { letter-spacing: -.02em; } }

/* reduzir o vazio central onde a cena respirava demais (cadastro e match) */
.plano[data-cena="2"], .plano[data-cena="6"] { row-gap: clamp(8px, 1.4vh, 15px); }

@media (prefers-reduced-motion: reduce) {
  .plano.climax.vivo::after, .plano.vivo .feed li.aceso, .plano.vivo .ganhos li.aceso,
  .plano.vivo .titulos li.aceso .insig .escudo, .plano[data-cena="24"].vivo::after,
  .abertura-reino::after, .sigilo-grande, .lettering .reino { animation: none; }
}

/* ============================================================================
   ORDEM 25/09 (Criador) · OITO PRINTS — incremento sobre "A Nave das Sete
   Tochas". Só estilo e DOM de cena (nunca app.js/viagem/cânone). Cores só do
   cânone em rgba; o brilho da tintura é LUZ (drop-shadow), não área de cor
   saturada — a curva verde e o WCAG ficam intactos; nada de luz sobre a letra.
   ============================================================================ */

/* — P2 · SOBREPOSIÇÃO: o título grande (cenas 25 e 31) não encosta mais no kicker
   "babel · Benefício…" do topo. Reservo a faixa do kicker; o bloco recentra abaixo. — */
.plano[data-cena="25"], .plano[data-cena="31"] { padding-top: clamp(90px, 12.5vh, 132px); }
.plano[data-cena="25"] > .gancho { font-size: clamp(38px, 5.2vw, 84px); }

/* — P3 · NOTÍCIAS (cena 18): cada manchete vira um cartão com SELO heráldico surreal;
   o selo acende na luz da tocha quando o cartão chega. A leitura fica igual (marfim). — */
.feed li { display: grid; grid-template-columns: 46px 1fr; align-items: center; column-gap: 15px; position: relative; padding: 12px 16px 12px 16px; }
.selo-noticia { width: 46px; height: 46px; overflow: visible; align-self: center; }
.selo-noticia .selo-halo { fill: color-mix(in srgb, var(--ouro) 42%, transparent); stroke: none; opacity: 0; transform-box: view-box; transform-origin: 24px 24px; transition: opacity .35s var(--curva); }
.selo-noticia .selo-aro { fill: rgba(5, 4, 8, .88); stroke: var(--ouro); stroke-width: 1.5; filter: drop-shadow(0 0 3px rgba(205, 181, 120, .45)); }
.selo-noticia .selo-in { fill: none; stroke: rgba(205, 181, 120, .5); stroke-width: .7; stroke-dasharray: 2 3; }
.selo-noticia .selo-emblema { fill: none; stroke: var(--folha); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feed li .manchete { align-self: center; }
.plano.vivo .feed li.aceso .selo-noticia { filter: drop-shadow(0 0 16px var(--brilho)) drop-shadow(0 0 6px rgba(205, 181, 120, .8)); }
.plano.vivo .feed li.aceso .selo-noticia .selo-aro { stroke: var(--folha); }
.plano.vivo .feed li.aceso .selo-noticia .selo-halo { opacity: 1; animation: selo-halo-pulsa 3.2s ease-in-out infinite; }
.plano.vivo .feed li.aceso .selo-noticia .selo-emblema { stroke: color-mix(in oklab, var(--folha) 82%, #fff); }
@keyframes selo-halo-pulsa { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .95; transform: scale(1.12); } }

/* — P4 · GAMIFICAÇÃO (cena 20): os 7 escudos de rank chamativos — aro de ouro, relevo
   interno, e o BRILHO da sua tintura (luz, não preenchimento); o ativo pulsa e cresce.
   (a barra até o Imperador é cena.js: alvo 5→6.) — */
/* saliência (25/09): os 7 escudos de rank viraram 7 ímãs (halos saturados, aros de ouro) disputando com o herói (título + o NÓ que sobe) — recuados ao seu papel de trilha */
.insig { filter: drop-shadow(0 0 3px rgba(205, 181, 120, .3)); }
.titulos li:not(.aceso) .insig { opacity: .5; }
.insig .escudo { fill: color-mix(in srgb, var(--tint) 34%, rgba(5, 4, 8, .88)); stroke: color-mix(in oklab, var(--tint) 52%, var(--ouro)); stroke-width: 2.2; }
.insig .escudo-luz { fill: none; stroke: rgba(239, 228, 204, .5); stroke-width: 1.4; stroke-linecap: round; }
.insig .coroa { fill: var(--ouro); filter: drop-shadow(0 0 3px rgba(205, 181, 120, .7)); }
.titulos li.aceso .insig .escudo { fill: color-mix(in srgb, var(--tint) 46%, rgba(5, 4, 8, .5)); stroke: var(--folha); stroke-width: 2.4; filter: drop-shadow(0 0 6px var(--tint)); }
.titulos li.aceso .insig .escudo-luz { stroke: rgba(255, 250, 235, .7); stroke-width: 1.6; }
.titulos li.aceso .insig .coroa { fill: var(--folha); filter: drop-shadow(0 0 4px rgba(205, 181, 120, .6)); }
/* o título ATUAL (o rank alcançado agora) é o único que ganha um pouco mais de luz — o resto da trilha fica calmo */
.titulos li.atual .insig { transform: scale(1.28); }
.plano.vivo .titulos li.atual .insig .escudo { animation: escudo-atual 1.9s ease-in-out infinite; }
.titulos li.atual .insig .escudo { fill: color-mix(in srgb, var(--tint) 56%, rgba(239, 228, 204, .3)); filter: drop-shadow(0 0 12px var(--tint)) drop-shadow(0 0 4px var(--folha)); }
.titulos li.atual .insig .escudo-luz { stroke: rgba(255, 252, 242, .9); stroke-width: 1.9; }
.titulos li.atual .insig .coroa { filter: drop-shadow(0 0 5px var(--folha)); }
@keyframes escudo-atual { 0%, 100% { filter: drop-shadow(0 0 9px var(--tint)) drop-shadow(0 0 3px var(--folha)); } 50% { filter: drop-shadow(0 0 16px var(--tint)) drop-shadow(0 0 6px var(--folha)); } }
.conquistas svg { stroke-width: 2.4; }
.conquistas li.aceso { border-color: var(--folha); box-shadow: 0 0 10px rgba(205, 181, 120, .3), inset 0 0 6px color-mix(in srgb, var(--luz) 25%, transparent); }
.conquistas li.aceso svg { stroke: var(--folha); filter: drop-shadow(0 0 3px rgba(205, 181, 120, .5)); }

/* — P5 · STATUS (cena 21): o escudo do rei/imperador irradia poder — aura de luz, anel
   de poder girando e uma COROA DE ENERGIA de raios de ouro (injetados em cena.js). — */
/* saliência (25/09): a insígnia + aura + anel + coroa de raios formavam um segundo sol competindo com o título — a insígnia continua sendo O elemento, mas em voz mais baixa que o título (como no aprovado) */
/* saliência (25/09, poda decisiva da mente): o escudo + aura + anel + raios ainda formavam um 2º sol e o olho/saliência mediram que roubava o TÍTULO. Baixado com decisão — o escudo segue luxuoso (ouro, coroa), mas em voz claramente abaixo do título; o título "Nó grande atrai fio" é o herói (foco 21 volta ao patamar do aprovado). */
.fios-status .insignia .escudo { fill: color-mix(in srgb, var(--luz) 30%, rgba(5, 4, 8, .9)); stroke: rgba(239, 228, 204, .62); stroke-width: 2;
  filter: drop-shadow(0 0 3px var(--ouro)); animation: insignia-poder 3.4s ease-in-out infinite; }
@keyframes insignia-poder { 50% { filter: drop-shadow(0 0 6px var(--ouro)); } }
.fios-status .insignia .coroa { fill: color-mix(in srgb, var(--folha) 70%, var(--ouro)); stroke: var(--noite); stroke-width: .8; filter: drop-shadow(0 0 2px rgba(205, 181, 120, .4)); }
.fios-status .insignia .faixa { stroke: rgba(239, 228, 204, .6); }
.fios-status .coroa-energia { transform-box: view-box; transform-origin: 200px 100px; }
.fios-status .aura-poder { fill: rgba(201, 162, 39, .09); stroke: none; transform-box: view-box; transform-origin: 200px 100px; filter: blur(8px); animation: aura-poder 3.6s ease-in-out infinite; }
@keyframes aura-poder { 0%, 100% { opacity: .22; transform: scale(1); } 50% { opacity: .36; transform: scale(1.1); } }
.fios-status .anel-poder { fill: none; stroke: var(--ouro); stroke-width: 1.3; stroke-dasharray: 3 7; opacity: .3; transform-box: view-box; transform-origin: 200px 100px; filter: none; animation: gira-status 15s linear infinite reverse; }
.fios-status .raios-coroa line { stroke: var(--ouro); stroke-width: 1.3; stroke-linecap: round; opacity: .26; filter: none; }
.fios-status .raios-coroa { transform-box: view-box; transform-origin: 200px 100px; animation: gira-status 26s linear infinite; }
.fios-status .raios-status { stroke: rgba(255, 250, 235, .55); opacity: .6; }
.fios-status .fios path { stroke: color-mix(in oklab, var(--ouro) 62%, var(--imperador)); stroke-width: 1.6; opacity: .8; filter: drop-shadow(0 0 4px rgba(205, 181, 120, .5)); }
/* (25/09, ordem do Criador) a REDE VIVA: os nós dos membros acendem em sequência e um pulso corre por cada fio até o nó grande (a
   insígnia) — "nó grande atrai fio", contínuo e hipnótico. Voz baixa (translúcido, traço fino): move sem roubar o título. */
.fios-status .teia-anel { fill: none; stroke: rgba(184, 146, 63, .26); stroke-width: 1; stroke-dasharray: 3 6; stroke-dashoffset: 0; stroke-linejoin: round;
  transform-box: view-box; transform-origin: 200px 100px; animation: rede-gira 44s linear infinite, teia-fluxo 3s linear infinite; }
@keyframes rede-gira { to { transform: rotate(360deg); } }
@keyframes teia-fluxo { to { stroke-dashoffset: -18; } }
/* filter:none é obrigatório — o global `.fios-status circle` põe drop-shadow(0 0 14px luz) em TODO círculo; os nós com esse
   bloom viravam 12 ímãs e derrubavam o foco do título. Sem bloom, o nó é um ponto contido; a vida vem da sequência que acende. */
.fios-status .no-membro { fill: var(--ouro); stroke: none; filter: none; transform-box: fill-box; transform-origin: center;
  animation: no-acende 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }
.fios-status .no-menor { fill: rgba(184, 146, 63, .5); stroke: none; filter: none; transform-box: fill-box; transform-origin: center;
  animation: no-acende 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s - .28s); }
@keyframes no-acende { 0%, 100% { opacity: .26; transform: scale(.85); } 22% { opacity: .6; transform: scale(1.1); } 60% { opacity: .32; transform: scale(.96); } }
/* o pulso: mesma tinta contida dos fios (ouro·imperador), traço fino, SEM bloom — a vida vem do MOVIMENTO, não do brilho (o
   brilho criava um 2º ímã e derrubava o foco do título 0.67→0.45; sem bloom, a rede move sem disputar). */
.fios-status .fio-corre { fill: none; stroke: color-mix(in oklab, var(--ouro) 48%, var(--noite)); stroke-width: 1.3; stroke-linecap: round;
  stroke-dasharray: 6 94; opacity: .42; filter: none; animation: fio-corre 3s cubic-bezier(.5, 0, .5, 1) infinite; animation-delay: calc(var(--i) * -.5s); }
@keyframes fio-corre { 0% { stroke-dashoffset: 100; opacity: 0; } 16% { opacity: .42; } 80% { opacity: .42; } 100% { stroke-dashoffset: 4; opacity: 0; } }

/* — P6 · CALCULADORA (cena 30): os quatro quadros mais ricos e vivos — molduras com
   canto heráldico e brilho, vidro/moedas/ouro mais vivos; os campos seguem legíveis. — */
.conta-viva .etapa { position: relative; }
.conta-viva label { color: var(--marfim); }
/* saliência (25/09): as 4 molduras de vitral, os pontos de lead (agora sóbrios, não amarelo/vermelho) e a arca de moedas roubavam o herói (título + o FATURAMENTO) — todos recuados; o número segue sendo o pico */
.conta-viva .quadro .moldura { stroke: color-mix(in srgb, var(--luz) 45%, var(--ouro)); stroke-width: 1.3; filter: drop-shadow(0 0 3px var(--brilho)); }
.quadro .ornato-arco { fill: none; stroke: var(--ouro); stroke-width: 1; opacity: .5; }
.quadro .ornato-canto { fill: none; stroke: var(--folha); stroke-width: 1.7; stroke-linecap: round; filter: drop-shadow(0 0 1.5px rgba(205, 181, 120, .45)); }
.quadro .ornato-rebite { fill: var(--folha); stroke: var(--ouro); stroke-width: .6; }
.plano.vivo .conta-viva .quadro .ornato-canto { stroke: var(--folha); }
.quadro .lead { fill: rgba(214, 205, 184, .72); }
.quadro .vidro { fill: rgba(201, 162, 39, .1); }
.quadro .passa { fill: rgba(201, 162, 39, .5); }
.quadro .lanceta { stroke-width: 1.9; filter: drop-shadow(0 0 4px rgba(205, 181, 120, .55)); }
.moedas ellipse { fill: rgba(201, 162, 39, .48); stroke-width: 1.3; }
@keyframes brilho-moeda { 50% { fill: rgba(226, 200, 138, .66); } }
.quadro .coroa-arca { stroke-width: 2; }
.quadro .ouro { fill: rgba(201, 162, 39, .5); }
.quadro .arca { stroke-width: 2; filter: drop-shadow(0 0 3px rgba(205, 181, 120, .45)); }

/* — P8 · ABERTURA (cena 1): o pórtico mais monumental — o arco ganha profundidade e
   chave, e uma RENDA gótica (rosácea de tracery, injetada em cena.js) gira devagar
   atrás do sigilo-fecho no ápice. As iniciais R-E-I-N-O já têm coroa; reforço a luz. — */
.portico .arco-ext { stroke-width: 1.8; filter: drop-shadow(0 0 8px rgba(205, 181, 120, .4)); }
.portico .arco-int { stroke: rgba(205, 181, 120, .42); stroke-width: 1; }
.portico .impostas { stroke-width: 1.8; filter: drop-shadow(0 0 5px rgba(205, 181, 120, .6)); }
/* a rosácea gótica é MOLDURA do ápice do arco (z-index -1): fica ACIMA do rótulo "Passo a passo", nunca cruzando a caixa dele (a
   sobreposição geométrica virava um bloco competindo — e o nome dele coagia um SVGAnimatedString a texto na sonda) */
.renda-gotica { position: absolute; left: 50%; top: max(6px, .8vh); transform: translateX(-50%); width: clamp(80px, 8vw, 124px); height: auto; z-index: -1; pointer-events: none; overflow: visible; opacity: .62; }
.renda-gotica * { vector-effect: non-scaling-stroke; }
.renda-gotica .renda-aro { fill: none; stroke: var(--ouro); stroke-width: 1.2; }
.renda-gotica .renda-aro.fina { stroke: rgba(205, 181, 120, .4); stroke-width: .7; stroke-dasharray: 2 3; }
.renda-gotica .renda-petalas { transform-box: view-box; transform-origin: 60px 60px; animation: renda-gira 90s linear infinite; }
.renda-gotica .renda-petalas path { fill: rgba(201, 162, 39, .05); stroke: var(--folha); stroke-width: 1; stroke-linejoin: round; }
.renda-gotica .renda-foils circle { fill: none; stroke: rgba(205, 181, 120, .55); stroke-width: 1; }
.renda-gotica .renda-olho { fill: var(--noite); stroke: var(--folha); stroke-width: 1.2; }
@keyframes renda-gira { to { transform: rotate(360deg); } }
.abertura-reino .acrostico b { text-shadow: var(--halo), 0 0 26px rgba(205, 181, 120, .4); }
.abertura-reino .acrostico b::before { filter: drop-shadow(0 0 8px rgba(205, 181, 120, .8)); }

/* — P7 · CLIENTE (cena 31): hierarquia — um só foco. A ORIGEM (Loja de Carro) fica menor e
   em voz baixa à esquerda; o CELULAR que RECEBE é o foco, maior à direita, destacado do
   fundo (galáxia é da outra frente); mais respiro entre os dois. — */
.chegada { grid-template-columns: .95fr 1fr; align-items: center; gap: clamp(22px, 4vw, 56px); width: min(94vw, 960px); }
.chegada .teia { width: min(74vw, 308px); }
.chegada .origem { font-size: clamp(18px, 1.6vw, 24px); color: var(--marfim); }
.chegada .celular.bloqueio { width: 100%; max-width: 384px; padding: 24px 18px 20px;
  box-shadow: 0 0 64px -14px var(--brilho), inset 0 0 0 1px color-mix(in srgb, var(--luz) 30%, transparent); }
.chegada .chegando { font-weight: 600; }
.chegada .ofertas li:not(.aceso) { opacity: .48; }
@media (max-width: 720px) {
  .chegada { grid-template-columns: 1fr; gap: 10px; }
  .chegada .celular.bloqueio { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .plano.vivo .feed li.aceso .selo-noticia .selo-halo, .plano.vivo .titulos li.atual .insig .escudo,
  .fios-status .insignia .escudo, .fios-status .aura-poder, .fios-status .anel-poder, .fios-status .raios-coroa,
  .fios-status .teia-anel, .fios-status .no-membro, .fios-status .no-menor, .fios-status .fio-corre,
  .renda-gotica .renda-petalas { animation: none; }
  .fios-status .no-membro, .fios-status .no-menor { opacity: .6; }   /* rede estática mas visível */
  .fios-status .fio-corre { opacity: .5; stroke-dashoffset: 50; }
}