/* Ato III · betocanuto.com (Ato II inteiro + Ato III inteiro; cena 3.1 aprovada em 05/10)
   Mundo sem lente: nenhuma cor. Cinza #16161A (onde a ponte do Ato I termina), grão e tela velha.
   Fontes oficiais só na moldura do teste; os cards usam a fonte do sistema de propósito (é o mundo genérico). */
@font-face{font-family:'PP Neue Montreal';src:url('fonts/neue-montreal-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Tallica';src:url('fonts/tallica-vf.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'PP Neue Montreal Text';src:url('fonts/neue-montreal-text-book.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PT Mono';src:url('fonts/pt-mono.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  --mundo:#16161a;
  --card:#202026; --card-fio:#34343c; --barra:#33333b; --midia:#28282f;
  --texto-card:#8e8e98; --texto-forte:#b4b4bd;
  --moldura:#d8d8de;
  --font-mono:'PT Mono',ui-monospace,Consolas,monospace;
  --font-estrutura:'PP Neue Montreal','Helvetica Neue',Arial,sans-serif;
  --font-generica:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --prata:#e9eaee; --prata-texto:#16161a; --card-um:#2a2a31; --texto-um:#ececf0;
  --font-tensao:'Tallica','Arial Narrow',sans-serif;
  --font-leitura:'PP Neue Montreal Text','PP Neue Montreal','Helvetica Neue',Arial,sans-serif;
  /* Tallica: maiúscula mede 1,35 em; escala, entrelinha e espaço entre palavras do Visor */
  --tallica-escala:.74; --tallica-lh:1.5; --tallica-lh-bloco:1.8; --tallica-palavra:.3em;  /* bloco de várias linhas: acento sobe até 1,7 em */
  --vh:100vh;
  --a1:8;      /* Ato I (teste de 07/10): o vídeo comandado pela rolagem ocupa 8 telas antes do Ato II (js/ato1.js, A1.telas) */
  --telas:83.55;  /* Ato VIII inteiro: fim da 8.2 em 82,55 (o celular soma 0,5 na 8.1 e 0,3 na 8.2 quando as colunas não cabem; js/ato8.js e js/ato8b.js ajustam) */
  --core:#ff6400; --campo-lente:#00000a;
  --cw:220px; --ch:330px;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--mundo); overscroll-behavior:none}
body{margin:0; background:var(--mundo); color:var(--moldura); font-family:var(--font-estrutura); overflow-x:hidden}
body.prologo-aberto, body.travado{overflow:hidden}
p{margin:0}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
:focus-visible{outline:2px solid #d8d8de; outline-offset:3px}
.mono{font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase}

#trilho{height:calc(var(--vh) * (var(--telas) + var(--a1))); pointer-events:none}
#palco{position:fixed; inset:0; overflow:hidden; background:var(--mundo)}

/* ---------- Ato I · O Visor: o vídeo comandado pela rolagem e o texto do hero (teste de 07/10) ---------- */
#ato1{position:absolute; inset:0; z-index:5; background:#000; pointer-events:none}
#a1-video{position:absolute; inset:0; display:block}
#a1-vivo{position:absolute; left:0; top:0; display:block; opacity:0}   /* rosto vivo v3, por cima do quadro 0 do vídeo */
.a1-canto{position:absolute; left:clamp(16px,4vw,56px); top:clamp(18px,3.2vh,32px); color:#fff; font-size:11px; letter-spacing:.16em; opacity:0}
.a1-hero{position:absolute; left:clamp(16px,5.4vw,96px); top:50%; width:min(44vw, 40rem); translate:0 -50%; display:grid; gap:26px; justify-items:start; transform-origin:0 50%; will-change:transform}
.a1-tese{margin:0; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:#fff; letter-spacing:.01em;
  font-size:calc(clamp(2.6rem, 5vw, 6rem) * var(--tallica-escala)); line-height:var(--tallica-lh-bloco); word-spacing:var(--tallica-palavra); padding-top:.2em}
.a1-linha{display:block; opacity:0; transform:translateY(calc((1 - var(--e,0)) * .45em)); will-change:transform, opacity, filter}
.a1-tese .hl{background:linear-gradient(90deg,#ff9600,#ff6400 22%,#ff0063 55%,#8a3dff 82%,#384fe1); -webkit-background-clip:text; background-clip:text; color:transparent}
.a1-apoio{font-family:var(--font-leitura); font-size:clamp(1rem, 1.25vw, 1.18rem); line-height:1.6; color:rgba(255,255,255,.8); max-width:40ch; opacity:0}
.a1-botoes{display:flex; flex-wrap:wrap; gap:12px 14px; align-items:center; opacity:0}
.a1-botao{display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:13px 24px; border-radius:999px; border:1px solid rgba(255,255,255,.32); color:#fff; text-decoration:none;
  font-family:var(--font-estrutura); font-weight:600; font-size:clamp(.98rem, 1.1vw, 1.06rem); transition:background .25s, border-color .25s, box-shadow .35s}
.a1-botao.principal{border-color:var(--core); background:rgba(255,100,0,.12)}
.a1-botao .seta{color:var(--core); font-family:var(--font-mono); transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.a1-botao:hover, .a1-botao:focus-visible{background:rgba(255,255,255,.08); border-color:#fff}
.a1-botao.principal:hover, .a1-botao.principal:focus-visible{background:rgba(255,100,0,.22); border-color:var(--core); box-shadow:0 0 42px rgba(255,100,0,.28)}
.a1-botao.principal:hover .seta{transform:translateX(4px)}
.a1-hero.vivo .a1-botao{pointer-events:auto}
.a1-carga{position:absolute; left:50%; bottom:22px; width:120px; height:1px; translate:-50% 0; background:rgba(255,255,255,.14); transition:opacity .6s}
.a1-carga i{display:block; height:100%; width:calc(var(--carga,0) * 100%); background:linear-gradient(90deg,#ff6400,#ff0063,#8a3dff); transition:width .4s}
@media (max-width:759px){
  .a1-hero{left:16px; right:16px; width:auto; top:auto; bottom:22px; translate:none; gap:16px; transform-origin:50% 100%}
  .a1-tese{font-size:calc(clamp(2.2rem, 10.4vw, 3rem) * var(--tallica-escala))}
  .a1-apoio{font-size:.95rem; line-height:1.5}
  .a1-botoes{gap:10px}
  .a1-botao{min-height:46px; padding:11px 18px; font-size:.95rem}
}

/* ---------- o mar de iguais ---------- */
#mundo{position:absolute; inset:0; z-index:1; opacity:0}
#grade{position:absolute; inset:0; will-change:transform, filter}
.card{position:absolute; left:0; top:0; width:var(--cw); height:var(--ch); will-change:transform; contain:layout paint;
  background:var(--card); border:1px solid var(--card-fio); border-radius:8px; padding:calc(var(--cw) * .045);
  display:flex; flex-direction:column; gap:calc(var(--cw) * .04)}
.cab{display:flex; align-items:center; gap:calc(var(--cw) * .04); flex:none}
.avatar{width:calc(var(--cw) * .13); height:calc(var(--cw) * .13); border-radius:50%; object-fit:cover; flex:none; background:var(--midia)}
.barras{display:flex; flex-direction:column; gap:5px; flex:1}
.barras i{display:block; height:6px; border-radius:3px; background:var(--barra)}
.barras i:first-child{width:62%}
.barras i:last-child{width:38%; opacity:.7}
.midia{position:relative; flex:none; aspect-ratio:1/1; border-radius:4px; overflow:hidden; background:var(--midia)}
.midia img{width:100%; height:100%; object-fit:cover; display:block}
.midia .bloco{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:12%; text-align:center;
  font-family:var(--font-generica); font-weight:700; font-size:calc(var(--cw) * .085); line-height:1.15; color:var(--texto-forte);
  background:linear-gradient(160deg,#26262c,#1c1c21)}
.legenda{font-family:var(--font-generica); font-size:calc(var(--cw) * .064); line-height:1.35; color:var(--texto-card);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; transition:opacity .25s linear}
.legenda.troca{opacity:0}
.pes{display:flex; gap:6px; margin-top:auto}
.pes i{display:block; width:14px; height:6px; border-radius:3px; background:var(--barra)}
.pes i:last-child{margin-left:auto; width:28px}

/* ---------- T3: um card para tudo ---------- */
#escuro{position:absolute; inset:0; z-index:2; background:var(--mundo); opacity:0; pointer-events:none}
#um{position:absolute; left:50%; top:50%; z-index:2; width:min(680px, calc(100vw - 32px)); transform:translate(-50%,-50%); visibility:hidden; pointer-events:none}
.um-fundo{position:absolute; inset:0; background:var(--card-um); border:1px solid var(--card-fio); border-radius:8px; transform-origin:0 0}
.um-texto{position:relative; padding:clamp(28px,5vw,56px); display:flex; flex-direction:column; gap:clamp(18px,2.6vw,28px)}
.um-frase{font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:var(--texto-um);
  font-size:calc(clamp(2.2rem,4.6vw,3.6rem) * var(--tallica-escala)); line-height:var(--tallica-lh-bloco); word-spacing:var(--tallica-palavra); letter-spacing:-.01em; padding-top:.2em; text-wrap:balance}
.um-apoio{font-family:var(--font-leitura); font-size:clamp(.98rem,1.25vw,1.12rem); line-height:1.6; color:#a9a9b3; max-width:56ch}

/* ---------- T4 e T5: seis sinais ---------- */
#sinais{position:absolute; inset:0; z-index:2; pointer-events:none}
.sinal{--aceso:0; position:absolute; left:50%; top:0; width:min(470px, calc(100vw - 48px)); padding:22px 24px 24px; border-radius:8px;
  display:flex; flex-direction:column; gap:12px; visibility:hidden;
  background:color-mix(in srgb, var(--prata) calc(var(--aceso) * 100%), var(--card));
  border:1px solid color-mix(in srgb, var(--prata) calc(var(--aceso) * 100%), var(--card-fio));
  box-shadow:0 0 calc(var(--aceso) * 60px) rgba(233,234,238,calc(var(--aceso) * .14))}
.sinal-n{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, #5c5c66 calc(var(--aceso) * 100%), #6f6f79)}
.sinal p{font-family:var(--font-estrutura); font-weight:600; font-size:clamp(1.15rem,1.75vw,1.5rem); line-height:1.35; letter-spacing:-.005em;
  color:color-mix(in srgb, var(--prata-texto) calc(var(--aceso) * 100%), #7d7d87)}

/* ---------- fecho e ponto de luz ---------- */
#fecho{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 16px; pointer-events:none}
.fecho-frase{font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:var(--texto-um); text-align:center; max-width:26ch;
  font-size:calc(clamp(2.3rem,5vw,4.6rem) * var(--tallica-escala)); line-height:var(--tallica-lh-bloco); word-spacing:var(--tallica-palavra); letter-spacing:-.01em; text-wrap:balance; opacity:0}
.fecho-aviso{position:absolute; left:16px; right:16px; bottom:clamp(28px,6vh,56px); text-align:center; font-family:var(--font-leitura); font-size:clamp(.88rem,1vw,.98rem); line-height:1.5; color:#d8d8de; opacity:0}
#ponto{position:absolute; left:50%; top:50%; z-index:2; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; opacity:0; pointer-events:none;
  background:radial-gradient(circle, #fff 0%, rgba(255,255,255,.85) 28%, rgba(233,234,238,.25) 58%, transparent 72%); box-shadow:0 0 22px 6px rgba(233,234,238,.18)}

/* ---------- Ato III: a lente liga ---------- */
#ato3{position:absolute; inset:0; z-index:2; visibility:hidden; background:var(--campo-lente); overflow:hidden}
#aurora{position:absolute; inset:0; width:100%; height:100%; display:block}
#campo{position:absolute; inset:0}
.marca{position:absolute; left:0; top:0; border-radius:6px; overflow:hidden; will-change:transform; background:var(--c); box-shadow:0 18px 40px rgba(0,0,10,.45)}
.marca img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.marca-area{position:absolute; left:9%; right:9%; bottom:8%; margin:0; color:var(--tinta); font-size:calc(var(--w, 160px) * .1); line-height:1.15}
.marca.fundo{filter:blur(2.2px) saturate(.85); opacity:.55}
.marca.meio{filter:blur(.6px); opacity:.85}
.marca.frente{z-index:1}
.c-cheia .marca-area{color:#fff; text-shadow:0 1px 12px rgba(0,0,10,.5)}
.c-cheia::after{content:""; position:absolute; inset:45% 0 0; background:linear-gradient(to top, color-mix(in srgb, var(--c) 85%, transparent), transparent)}
.c-cheia .marca-area{z-index:1}
.c-moldura img{inset:7% 7% 30% 7%; width:86%; height:63%; border-radius:3px}
.c-circulo{background:#0b0b18}
.c-circulo img{inset:10% 18% auto; width:64%; height:auto; aspect-ratio:1; border-radius:50%; outline:2px solid var(--c); outline-offset:3px}
.c-circulo .marca-area{color:var(--c); text-align:center}
.c-faixa img{height:66%}
.c-faixa .marca-area{bottom:10%}
.f-tensao{font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; letter-spacing:.01em; line-height:1.5!important; padding-top:.2em}
.f-estrutura{font-family:var(--font-estrutura); font-weight:600; letter-spacing:-.01em}
.f-mono{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em; font-size:.62em!important}
.f-leitura{font-family:var(--font-leitura)}
.marca .marca-area{font-size:clamp(11px, 1.05vw, 16px)}
.marca.fundo .marca-area{font-size:clamp(9px, .75vw, 12px)}
.marca .f-tensao{font-size:clamp(12px, 1.15vw, 18px)}
.marca.fundo .f-tensao{font-size:clamp(9px, .8vw, 12px)}
#faixa{position:absolute; left:-10%; right:-10%; top:0; height:24vh; pointer-events:none; mix-blend-mode:screen; opacity:0; filter:blur(18px);
  background:linear-gradient(90deg, rgba(255,100,0,.55), rgba(255,0,99,.6), rgba(85,0,160,.55), rgba(56,79,225,.6));
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 75%)}
#voce{position:absolute; left:50%; top:46%; z-index:2; width:min(300px, 62vw); aspect-ratio:4/5; transform:translate(-50%,-50%); opacity:0; margin:0;
  display:flex; align-items:center; justify-content:center; border-radius:8px; background:var(--campo-lente);
  border:1px solid rgba(255,100,0,.45); box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 30px 80px rgba(0,0,10,.6), 0 0 90px rgba(255,100,0,.18)}
#voce p{margin:0; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:var(--core);
  font-size:calc(clamp(4.2rem, 9vw, 6.4rem) * var(--tallica-escala)); line-height:var(--tallica-lh); padding-top:.25em; letter-spacing:.005em}
#legenda{position:absolute; left:16px; right:16px; bottom:clamp(28px, 7vh, 64px); z-index:3; margin:0; opacity:0; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none}
.legenda-quem{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7)}
.legenda-fala{font-family:var(--font-leitura); font-size:clamp(1rem, 1.3vw, 1.2rem); line-height:1.45; color:#fff; padding:10px 16px; border-radius:4px; background:rgba(0,0,10,.82); max-width:40ch}
#clarao{position:absolute; inset:0; z-index:5; background:#fff; opacity:0; pointer-events:none}

/* ---------- Ato III, 3.2 e 3.3 ---------- */
#ato3b{position:absolute; inset:0; z-index:2; visibility:hidden; pointer-events:none}
.tese{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:clamp(28px, 5vh, 56px); padding:24px clamp(16px, 5vw, 72px)}
.tese-titulo{margin:0; max-width:18ch; text-align:center; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:#fff;
  font-size:calc(clamp(2.8rem, 6.4vw, 7rem) * var(--tallica-escala)); line-height:var(--tallica-lh-bloco); word-spacing:var(--tallica-palavra); letter-spacing:-.01em; text-wrap:balance; opacity:0}
.tese-pars{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(24px, 4vw, 64px); max-width:1040px; width:100%}
.tese-pars p{margin:0; font-family:var(--font-leitura); font-size:clamp(1rem, 1.25vw, 1.18rem); line-height:1.65; color:#f2f2f5; opacity:0}
.ruido{color:#8e8e98}
#grao-frases, #linha{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.lugares-entrada{position:absolute; left:50%; top:clamp(56px, 13vh, 140px); transform:translateX(-50%); width:min(36ch, calc(100vw - 32px)); margin:0; text-align:center;
  font-family:var(--font-estrutura); font-weight:600; font-size:clamp(1.25rem, 2vw, 1.85rem); line-height:1.35; letter-spacing:-.01em; color:#fff; opacity:0; text-wrap:balance}
#caminho{position:absolute; inset:0}
.ponta{position:absolute; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#fff; opacity:0; white-space:nowrap}
.lugares{list-style:none; margin:0; padding:0}
.lugar{position:absolute; width:min(232px, 17vw); display:flex; flex-direction:column; gap:6px; opacity:0; text-align:center; align-items:center}
.lugar-n{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; color:rgba(255,255,255,.7)}
.lugar h3{margin:0; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:#fff; font-size:calc(2rem * var(--tallica-escala)); line-height:var(--tallica-lh); padding-top:.15em; letter-spacing:.01em}
.lugar p{margin:0; font-family:var(--font-leitura); font-size:.95rem; line-height:1.5; color:rgba(255,255,255,.88)}
.frase-tese{position:absolute; left:50%; top:60%; transform:translate(-50%,-50%); width:min(980px, calc(100vw - 32px)); display:flex; flex-direction:column; align-items:center; gap:clamp(18px, 3vh, 28px); text-align:center; opacity:0}
.ft-1{margin:0; max-width:32ch; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:#fff;
  font-size:calc(clamp(2.3rem, 4.6vw, 4.6rem) * var(--tallica-escala)); line-height:var(--tallica-lh-bloco); word-spacing:var(--tallica-palavra); letter-spacing:-.01em; text-wrap:balance}
.ft-2{margin:0; max-width:44ch; font-family:var(--font-leitura); font-size:clamp(1.05rem, 1.5vw, 1.35rem); line-height:1.55; color:rgba(255,255,255,.9)}
@media (max-width:759px){
  .tese{justify-content:flex-start; padding-top:clamp(72px, 12vh, 120px); overflow:hidden}
  .tese-pars{grid-template-columns:1fr; gap:18px}
  .tese-pars p{font-size:.98rem; line-height:1.55}
  .lugar{width:calc(100vw - 12vw - 48px); text-align:left; align-items:flex-start; gap:2px}
  .lugar h3{font-size:calc(1.7rem * var(--tallica-escala))}
  .lugar p{font-size:.88rem; line-height:1.4}
  .lugar:not(.destaque) p{display:none}   /* no celular a frase inteira só no lugar aceso */
  .lugares-entrada{top:clamp(40px, 7vh, 72px); font-size:1.12rem}
}

/* ---------- textura de tela velha e grão ---------- */
#tela-velha{position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.55) 100%)}
#grao{position:absolute; inset:-64px; z-index:4; pointer-events:none; opacity:.085; mix-blend-mode:screen; background-size:256px 256px}

/* ---------- moldura do teste ---------- */
#dica{position:absolute; left:50%; bottom:36px; transform:translateX(-50%); z-index:6; color:rgba(216,216,222,.7); animation:respira 2.4s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:.35}50%{opacity:.9}}
#fim{position:absolute; left:50%; top:64px; transform:translateX(-50%); z-index:6; color:var(--moldura); text-align:center; padding:14px 18px;
  background:rgba(22,22,26,.86); border:1px solid rgba(216,216,222,.25); max-width:calc(100vw - 32px)}
#pular, #botao-som{position:absolute; z-index:7; top:16px; color:rgba(216,216,222,.75); padding:8px 10px}
#pular{left:16px}
#botao-som{right:16px}

/* ---------- entrada ---------- */
#prologo{position:fixed; inset:0; z-index:20; background:var(--mundo); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; padding:24px 16px; text-align:center}
#prologo .mono{color:rgba(216,216,222,.6); max-width:36ch; line-height:1.7}
.portas{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.porta{font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; padding:14px 20px; border:1px solid rgba(216,216,222,.35); border-radius:999px; transition:border-color .2s, background .2s}
.porta:hover{border-color:#d8d8de; background:rgba(216,216,222,.06)}

@media (max-width:760px){
  .barras i{height:4px}
  .pes i{height:4px}
}

/* Ato IV, teste T1 e T2 */
#ato4{position:absolute; inset:0; z-index:3; visibility:hidden; pointer-events:none}
#foto4{position:absolute; inset:0; width:100%; height:100%; display:block}
#rubrica{position:absolute; visibility:hidden}
#rubrica svg{display:block; width:100%; height:auto; overflow:visible}
#legenda4{position:absolute; left:5vw; bottom:9vh; margin:0; display:flex; flex-direction:column; gap:8px; align-items:flex-start; opacity:0}
@media (max-width:759px){ #legenda4{left:16px; right:16px; bottom:5vh} }

/* Ato IV, cena 4.2: a trajetória */
#ato4b{position:absolute; inset:0; visibility:hidden}
.traj-coluna{position:absolute; top:13vh; display:flex; flex-direction:column; gap:clamp(16px, 2.6vh, 26px)}
.traj-titulo{margin:0; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:#fff; opacity:0;
  font-size:calc(clamp(2.4rem, 4.4vw, 4.4rem) * var(--tallica-escala)); line-height:var(--tallica-lh-bloco); word-spacing:var(--tallica-palavra); letter-spacing:-.01em; padding-top:.2em; text-wrap:balance}
.traj-b1, .traj-b2, .traj-b3{margin:0; font-family:var(--font-leitura); font-size:clamp(1.02rem, 1.3vw, 1.2rem); line-height:1.65; color:rgba(255,255,255,.9); max-width:46ch; opacity:0}
.traj-frase{color:rgba(255,255,255,.34); transition:color .45s ease}
.traj-frase.acesa{color:#fff}
.traj-frase.lida{color:rgba(255,255,255,.78)}
.traj-b3{position:absolute; left:0; top:0; font-size:clamp(1.1rem, 1.6vw, 1.45rem); line-height:1.6}
.traj-citacao{position:absolute; inset:0; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(16px, 3vh, 28px); text-align:center; padding:0 16px; opacity:0}
.cit-frase{margin:0; max-width:24ch; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:#fff;
  font-size:calc(clamp(2.3rem, 4.6vw, 4.6rem) * var(--tallica-escala)); line-height:var(--tallica-lh-bloco); word-spacing:var(--tallica-palavra); letter-spacing:-.01em; text-wrap:balance}
.cit-apoio{max-width:44ch; font-family:var(--font-leitura); font-size:clamp(1rem, 1.3vw, 1.18rem); line-height:1.55; color:rgba(255,255,255,.82); opacity:0}
.cit-link{color:#ff6400; text-decoration:none; border-bottom:1px solid rgba(255,100,0,.6); padding-bottom:4px; opacity:0; pointer-events:none}
.cit-link:hover, .cit-link:focus-visible{color:#ff8a3d; border-color:#ff8a3d; outline:none}
@media (max-width:759px){
  .traj-coluna{top:49vh; left:16px; right:16px; gap:12px}
  .traj-b1, .traj-b2{font-size:.94rem; line-height:1.5}
  .traj-b3{font-size:1.02rem; position:absolute; right:0}
  .cit-frase{max-width:18ch}
}
@media (prefers-reduced-motion:reduce){ .traj-frase{transition:none} }

/* Ato V, teste T1 e T2: o caminho */
#ato5{position:absolute; inset:0; z-index:3; visibility:hidden; pointer-events:none; overflow:hidden}
#fio5{position:absolute; inset:0; width:100%; height:100%; display:block}
.met-coluna{position:absolute; left:5vw; top:50%; transform:translateY(-50%); width:min(38vw, 560px); display:flex; flex-direction:column; gap:clamp(18px, 3vh, 30px)}
.met-titulo{margin:0; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:#fff; opacity:0;
  font-size:calc(clamp(2.5rem, 4.6vw, 4.6rem) * var(--tallica-escala)); line-height:var(--tallica-lh-bloco); word-spacing:var(--tallica-palavra); letter-spacing:-.01em; padding-top:.2em; text-wrap:balance}
.met-titulo .receita{background:linear-gradient(90deg, #ff6400, #ff0063 40%, #8a3dff 72%, #384fe1); -webkit-background-clip:text; background-clip:text; color:transparent}
.met-par{margin:0; font-family:var(--font-leitura); font-size:clamp(1.02rem, 1.3vw, 1.2rem); line-height:1.65; color:rgba(255,255,255,.9); max-width:44ch; opacity:0}
.paradas{margin:0; padding:0; list-style:none}
.parada{position:absolute; left:0; top:0; transform-origin:0 0; visibility:hidden; width:min(470px, 40vw)}
.parada.direita .parada-corpo{transform:perspective(900px) rotateY(-9deg); transform-origin:0 50%}
.parada.rosa .parada-n{color:#ff0063}
.parada.rosa .parada-resp{border-image:linear-gradient(90deg, #ff0063, #ff6400) 1}
.parada.dupla .parada-n{background:linear-gradient(90deg, #ff0063, #ff6400); -webkit-background-clip:text; background-clip:text; color:transparent}
.parada.dupla .parada-resp{border-image:linear-gradient(90deg, #ff0063 50%, #ff6400 50%) 1}
.parada.tripla .parada-n{color:#e9eaee}
.parada.tripla .parada-resp{border-image:linear-gradient(90deg, #ff6400 33%, #2e82d4 33% 66%, #8a3dff 66%) 1}
.met-fecho{position:absolute; left:5vw; top:50%; transform:translateY(-50%); width:min(30vw, 440px); margin:0; opacity:0;
  font-family:var(--font-estrutura); font-weight:600; font-size:clamp(1.25rem, 2vw, 1.8rem); line-height:1.35; letter-spacing:-.01em; color:#fff; text-wrap:balance}
.parada-corpo{display:flex; flex-direction:column; gap:12px; transform:perspective(900px) rotateY(9deg); transform-origin:100% 50%}
.parada-n{font-family:var(--font-mono); font-size:13px; letter-spacing:.16em; color:#ff6400}
.parada h3{margin:0; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:#fff; font-size:calc(4.4rem * var(--tallica-escala)); line-height:var(--tallica-lh-bloco); word-spacing:var(--tallica-palavra); padding-top:.15em; letter-spacing:.01em; text-wrap:balance}
.parada p{margin:0; font-family:var(--font-leitura); font-size:1.15rem; line-height:1.55; color:rgba(255,255,255,.9); max-width:34ch}
.parada-resp{font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62); padding-top:6px; border-top:1px solid rgba(255,100,0,.5); align-self:flex-start}
@media (max-width:759px){
  .met-coluna{left:16px; right:16px; width:auto; top:7vh; bottom:6vh; transform:none; justify-content:space-between}
  .met-par{font-size:.98rem; line-height:1.55}
  .parada{width:min(330px, calc(100vw - 32px)); text-align:center}
  .parada-corpo, .parada.direita .parada-corpo{transform:none; align-items:center}
  .met-fecho{left:16px; right:16px; width:auto; top:auto; bottom:7vh; transform:none; text-align:center; font-size:1.2rem}
  .parada-resp{align-self:center}
  .parada h3{font-size:calc(3.4rem * var(--tallica-escala))}
  .parada p{font-size:1.02rem}
}

/* Ato VI, teste: a órbita */
#ato6{position:absolute; inset:0; z-index:4; visibility:hidden; pointer-events:none; overflow:hidden}
#orbita6{position:absolute; inset:0; width:100%; height:100%; display:block}
.eco-coluna{position:absolute; left:5vw; top:50%; transform:translateY(-50%); width:min(36vw, 520px); display:flex; flex-direction:column; gap:clamp(18px, 3vh, 30px)}
.eco-formula{margin:0; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:#fff;
  font-size:calc(clamp(2.1rem, 3.5vw, 3.6rem) * var(--tallica-escala)); line-height:var(--tallica-lh-bloco); word-spacing:var(--tallica-palavra); letter-spacing:-.01em; padding-top:.2em}
.eco-formula .fl{display:block; opacity:0}
.eco-formula b{font-weight:inherit}
.eco-formula .hl{background:linear-gradient(90deg, #ff6400, #ff0063 40%, #8a3dff 72%, #384fe1); -webkit-background-clip:text; background-clip:text; color:transparent}
.eco-lead{margin:0; font-family:var(--font-leitura); font-size:clamp(1.02rem, 1.3vw, 1.2rem); line-height:1.65; color:rgba(255,255,255,.9); max-width:42ch; opacity:0}
.cartoes{position:absolute; inset:0}
.cartao{position:absolute; left:5vw; top:50%; transform:translateY(-50%); width:min(34vw, 480px); display:flex; flex-direction:column; gap:12px; visibility:hidden; opacity:0}
.cartao.ativo .cartao-link{pointer-events:auto}
.cartao-chave{margin:0; font-family:var(--font-mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--cor))}
.cartao h3{margin:0; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:#fff; font-size:calc(4.4rem * var(--tallica-escala)); line-height:var(--tallica-lh-bloco); word-spacing:var(--tallica-palavra); padding-top:.15em; letter-spacing:.01em}
.cartao-par{margin:0; font-family:var(--font-leitura); font-size:1.15rem; line-height:1.55; color:rgba(255,255,255,.92); max-width:36ch}
.cartao-lista{margin:4px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-family:var(--font-leitura); font-size:.98rem; line-height:1.45; color:rgba(255,255,255,.72); max-width:40ch}
.cartao-lista li{padding-left:22px; position:relative}
.cartao-lista li::before{content:""; position:absolute; left:0; top:.72em; width:12px; height:1px; background:rgb(var(--cor))}
.cartao-link{align-self:flex-start; margin-top:10px; font-family:var(--font-mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--cor)); text-decoration:none; border-bottom:1px solid rgba(var(--cor),.6); padding-bottom:4px; pointer-events:none}
.cartao-link:hover, .cartao-link:focus-visible{color:#fff; border-color:#fff; outline:none}
@media (max-width:759px){
  .eco-coluna{left:16px; right:16px; width:auto; top:auto; bottom:6vh; transform:none; gap:14px}
  .eco-formula{font-size:calc(1.75rem * var(--tallica-escala))}
  .eco-lead{font-size:.96rem; line-height:1.5}
  .cartao{left:16px; right:16px; width:auto; top:45vh; transform:none; align-items:center; text-align:center; gap:8px}
  .cartao h3{font-size:calc(3.2rem * var(--tallica-escala))}
  .cartao-par{font-size:1rem}
  .cartao-lista{font-size:.9rem; gap:6px; align-items:center}
  .cartao-lista li{padding-left:0}
  .cartao-lista li::before{display:none}
  .cartao-link{align-self:center}
}

/* Ato VII, teste: a ponte e o campo de peças */
body.caixa-aberta{overflow:hidden}
#ato7{position:absolute; inset:0; z-index:4; visibility:hidden; pointer-events:none; overflow:hidden}
#luz7{position:absolute; inset:0; width:100%; height:100%; display:block; mix-blend-mode:screen}
.campo7{position:absolute; inset:0}
.peca7{position:absolute; left:0; top:0; padding:0; border:0; border-radius:3px; overflow:hidden; visibility:hidden; pointer-events:auto; cursor:zoom-in;
  transform-origin:50% 50%; background:#0d0d12; backface-visibility:hidden;
  box-shadow:0 0 0 1px rgba(var(--cor),.28), 0 0 34px rgba(var(--cor),.22)}
.peca7 canvas, .peca7 img{position:absolute; inset:0; width:100%; height:100%; display:block}
.peca7 img{object-fit:cover; opacity:var(--nit,0)}
.peca7::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.0); transition:box-shadow .25s}
.peca7.sob::after, .peca7:focus-visible::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)}
.peca7:focus-visible{outline:none}
.port-titulo{position:absolute; left:50%; top:50%; margin:0; width:min(90vw, 1100px); text-align:center; visibility:hidden; pointer-events:none;
  font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:#fff;
  font-size:calc(clamp(2.6rem, 6vw, 6.4rem) * var(--tallica-escala)); line-height:var(--tallica-lh); word-spacing:var(--tallica-palavra); padding-top:.2em;
  text-shadow:0 0 40px rgba(0,0,10,.9), 0 0 12px rgba(0,0,10,.8); will-change:transform, opacity}
.port-titulo.perto{text-shadow:none}
.port-titulo .hl{background:linear-gradient(90deg, #ff6400, #ff0063 40%, #8a3dff 72%, #384fe1); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none}
.port-coluna{position:absolute; left:5vw; bottom:7vh; z-index:3000; width:min(38vw, 520px); display:flex; flex-direction:column; gap:18px; visibility:hidden; opacity:0;
  padding:22px 24px; margin:-22px -24px; background:radial-gradient(closest-side, rgba(0,0,10,.82), rgba(0,0,10,.55) 70%, rgba(0,0,10,0))}
.port-lead{margin:0; font-family:var(--font-leitura); font-size:clamp(1.02rem, 1.3vw, 1.2rem); line-height:1.6; color:rgba(255,255,255,.92); max-width:40ch}
.port-acoes{display:flex; gap:12px; flex-wrap:wrap}
.port-btn{font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#fff; padding:12px 16px; border:1px solid rgba(255,255,255,.4); border-radius:2px; background:rgba(0,0,10,.5); pointer-events:none; transition:border-color .2s, background .2s}
.port-coluna.ativo .port-btn{pointer-events:auto}
.port-btn.primario{border-color:#ff6400; color:#ff6400}
.port-btn:hover, .port-btn:focus-visible{border-color:#fff; background:rgba(255,255,255,.08); color:#fff; outline:none}
@media (max-width:759px){
  .port-titulo{font-size:calc(3.4rem * var(--tallica-escala)); line-height:var(--tallica-lh-bloco)}
  .port-coluna{left:16px; right:16px; width:auto; bottom:5vh; gap:14px}
  .port-lead{font-size:.96rem; line-height:1.5}
  .port-btn{font-size:11px; padding:10px 12px}
}
/* peça aberta */
#caixa7{position:fixed; inset:0; z-index:40; background:rgba(0,0,10,.0); display:flex; flex-direction:column; transition:background .26s}
#caixa7.aberta{background:rgba(0,0,10,.94)}
.caixa-palco{flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:4vh 4vw 0}
.caixa-palco img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; border-radius:3px; opacity:0; transition:opacity .2s}
#caixa7.aberta .caixa-palco img{opacity:1}
.caixa-barra{display:flex; align-items:center; gap:20px; padding:18px 4vw 22px; color:rgba(255,255,255,.8); opacity:0; transition:opacity .3s .1s}
#caixa7.aberta .caixa-barra{opacity:1}
.caixa-leg{flex:1; color:#fff}
.caixa-nav{display:flex; gap:8px}
.caixa-nav button{padding:10px 14px; border:1px solid rgba(255,255,255,.35); border-radius:2px}
.caixa-nav button:hover, .caixa-nav button:focus-visible{border-color:#fff; outline:none}
/* todo o portfólio */
#todo7{position:fixed; inset:0; z-index:30; background:#00000a; overflow-y:auto; overscroll-behavior:contain; padding:0 4vw 6vh}
.todo-topo{position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; padding:20px 0; background:linear-gradient(#00000a 70%, rgba(0,0,10,0))}
.todo-fechar{padding:10px 14px; border:1px solid rgba(255,255,255,.35); border-radius:2px}
.todo-grade{columns:4 220px; column-gap:12px}
.todo-peca{display:block; width:100%; margin:0 0 12px; break-inside:avoid; border-radius:3px; overflow:hidden; cursor:zoom-in}
.todo-peca img{width:100%; height:auto; display:block; transition:transform .4s}
.todo-peca:hover img, .todo-peca:focus-visible img{transform:scale(1.03)}
@media (max-width:759px){ .todo-grade{columns:2 140px; column-gap:8px} .todo-peca{margin-bottom:8px} .caixa-barra{flex-wrap:wrap; gap:10px} }

/* Ato VII inteiro: casos, quem já embarcou, transmissões */
.campo7.mudo .peca7{pointer-events:none}
#ato7b{position:absolute; inset:0; z-index:4; visibility:hidden; pointer-events:none; overflow:hidden}
#caso7{position:absolute; inset:0; width:100%; height:100%; display:block}
.casos-rotulo{position:absolute; left:5vw; top:7vh; margin:0; color:rgba(255,255,255,.55); opacity:0}
.caso7{position:absolute; left:5vw; top:50%; width:min(36vw, 500px); translate:0 -50%; display:flex; flex-direction:column; gap:14px; visibility:hidden}
.caso7.ativo .caso-link{pointer-events:auto}
.caso-chave{margin:0; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#ff6400}
.caso7 h3{margin:0; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:#fff; font-size:calc(4rem * var(--tallica-escala)); line-height:var(--tallica-lh); word-spacing:var(--tallica-palavra); padding-top:.15em}
.caso7 dl{margin:0; display:flex; flex-direction:column; gap:12px}
.bloco-caso{display:flex; flex-direction:column; gap:3px; opacity:0}
.bloco-caso dt{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55)}
.bloco-caso.partida dt{color:rgba(255,255,255,.4)}
.bloco-caso dd{margin:0; font-family:var(--font-leitura); font-size:clamp(.95rem, 1.1vw, 1.08rem); line-height:1.5; color:rgba(255,255,255,.9); max-width:44ch}
.bloco-caso.partida dd{color:rgba(255,255,255,.62)}
.caso-link{align-self:flex-start; margin-top:4px; font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#ff6400; text-decoration:none; border:1px solid #ff6400; padding:12px 16px; border-radius:2px; opacity:0; pointer-events:none}
.caso-link:hover, .caso-link:focus-visible{color:#fff; border-color:#fff; outline:none}
.creditos-cab{position:absolute; left:50%; top:0; width:min(90vw, 900px); text-align:center; visibility:hidden}
.creditos-titulo, .tx-titulo{margin:0; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:#fff;
  font-size:calc(clamp(2.4rem, 4.6vw, 5rem) * var(--tallica-escala)); line-height:var(--tallica-lh-bloco); word-spacing:var(--tallica-palavra); padding-top:.2em}
.creditos-titulo .hl, .tx-titulo .hl{background:linear-gradient(90deg, #ff6400, #ff0063 40%, #8a3dff 72%, #384fe1); -webkit-background-clip:text; background-clip:text; color:transparent}
.creditos-lead{margin:10px auto 0; font-family:var(--font-leitura); font-size:1.08rem; line-height:1.55; color:rgba(255,255,255,.75); max-width:46ch}
.faixa7{position:absolute; left:0; right:0; top:56%; translate:0 -40%; display:grid; gap:clamp(18px, 3vh, 30px); visibility:hidden; opacity:0;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent)}
.linha7{overflow:hidden}
.trilho7{display:flex; width:max-content; will-change:transform}
.rosto7{margin:0 10px; width:clamp(128px, 12vw, 184px); flex:none; display:grid; gap:10px}
.rosto7 i{display:block; width:100%; aspect-ratio:1; border-radius:4px; box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.rosto7 figcaption{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tx-titulo{position:absolute; left:50%; top:8vh; width:min(90vw, 1000px); text-align:center; visibility:hidden}
#onda7{position:absolute; left:50%; top:30vh; width:min(70vw, 760px); height:80px; translate:-50% 0; opacity:0}
.tx{position:absolute; left:50%; top:calc(30vh + 100px); width:min(86vw, 720px); translate:-50% 0; margin:0; visibility:hidden; display:flex; flex-direction:column; gap:22px}
.tx blockquote{margin:0; font-family:var(--font-leitura); font-size:clamp(1.05rem, 1.35vw, 1.3rem); line-height:1.6; color:rgba(255,255,255,.92)}
.tx blockquote .r{color:rgba(255,255,255,.35); font-family:var(--font-mono)}
.tx blockquote .m{transition:color .5s}
.tx.sintonizada blockquote .m{color:#ff6400}
.tx figcaption{display:flex; align-items:center; gap:14px}
.tx-rosto{width:52px; height:52px; border-radius:50%; flex:none}
.tx figcaption strong{display:block; font-family:var(--font-mono); font-weight:400; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#fff}
.tx figcaption span span{display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:3px}
#estatica7{position:absolute; inset:0; width:100%; height:100%; opacity:0; image-rendering:pixelated; mix-blend-mode:screen}
@media (max-width:759px){
  .casos-rotulo{display:none}
  .caso7{left:16px; right:16px; width:auto; top:auto; bottom:3vh; translate:none; gap:6px}
  .caso-chave{font-size:10px}
  .caso7 h3{font-size:calc(2.8rem * var(--tallica-escala))}
  .caso7 dl{gap:7px}
  .bloco-caso dd{font-size:.86rem; line-height:1.4}
  .caso-link{font-size:11px; padding:9px 12px}
  .creditos-lead{font-size:.95rem}
  .faixa7{translate:0 -30%}
  .rosto7{width:118px; margin:0 6px}
  .rosto7 figcaption{font-size:9.5px}
  .tx-titulo{top:6vh}
  #onda7{top:24vh; width:86vw; height:56px}
  .tx{top:calc(24vh + 70px); gap:14px}
  .tx blockquote{font-size:.98rem; line-height:1.5}
}

/* ---------- Ato VIII · 8.1 · A BCtv liga (TV variação A aprovada em 06/10, mesmas medidas e cores) ---------- */
#ato8{position:absolute; inset:0; z-index:4; visibility:hidden; pointer-events:none; overflow:hidden;
  --tinta:#ececf0; --tinta-2:#a9a9b3; --tinta-3:#6f6f79; --fio:#232330}
#ato8 a{color:inherit}
.cena8{height:100%; display:grid; grid-template-columns:minmax(0,42fr) minmax(0,58fr); align-items:center;
  gap:clamp(24px,4vw,64px); padding:clamp(32px,6vh,72px) clamp(16px,5vw,80px); will-change:transform}
.texto8{display:flex; flex-direction:column; gap:clamp(18px,2.4vh,26px); max-width:560px}
.e8{opacity:0}
.faixa8{color:var(--core)}
.bctv-titulo{margin:0; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; letter-spacing:-.01em; color:var(--tinta);
  font-size:calc(clamp(2.4rem,4.3vw,4.2rem) * var(--tallica-escala)); line-height:var(--tallica-lh); word-spacing:var(--tallica-palavra); padding-top:.15em; text-wrap:balance}
.bctv-titulo .bctv-marca{color:var(--core); text-transform:none}
.leitura8{font-family:var(--font-leitura); font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.6; color:var(--tinta-2); max-width:50ch}
.guia8{display:flex; flex-direction:column; gap:14px; margin-top:4px}
.grupo8{display:flex; flex-direction:column}
.grupo-rotulo8{color:var(--tinta-3); padding-bottom:8px; border-bottom:1px solid var(--fio)}
.canal8{display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:14px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--fio); outline-offset:-2px}
#ato8.no-ar .canal8, #ato8.no-ar .botao8{pointer-events:auto}
.canal-n8{font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--tinta-3); transition:color .25s}
.canal-nome8{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; font-weight:600; font-size:clamp(1rem,1.15vw,1.08rem); letter-spacing:-.005em; color:var(--tinta); transition:color .25s}
.canal-desc8{font-family:var(--font-leitura); font-size:.94rem; line-height:1.5; color:var(--tinta-2); margin-top:3px}
.no-ar8{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--core)}
.no-ar8 i{display:block; width:7px; height:7px; border-radius:50%; background:var(--core); box-shadow:0 0 10px 2px rgba(255,100,0,.6); animation:pulso8 2.4s ease-in-out infinite}
.canal8.ativo .canal-nome8{color:#fff}
.canal8.ativo .canal-n8{color:var(--core)}
.canal8.previa .canal-n8{color:var(--core)}
.canal8.previa .canal-nome8{color:#fff}
@keyframes pulso8{0%,100%{opacity:1; box-shadow:0 0 10px 2px rgba(255,100,0,.6)} 50%{opacity:.55; box-shadow:0 0 4px 0 rgba(255,100,0,.3)}}
.botao8{align-self:flex-start; display:inline-flex; align-items:center; gap:12px; margin-top:6px; padding:13px 22px 12px; border:1px solid var(--core); border-radius:4px;
  text-decoration:none; font-weight:600; font-size:.98rem; letter-spacing:-.005em; color:var(--tinta); transition:background .25s, color .25s}
.botao8::after{content:""; width:7px; height:7px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); margin-top:-1px}
.botao8:hover{background:var(--core); color:#00000a}
.palco8{position:relative; display:flex; align-items:center; justify-content:center; min-width:0}
.palco8 svg{display:block; width:100%; height:auto; max-height:88vh; overflow:visible}
.palco8 .tela-viva{animation:respirar8 5.6s ease-in-out infinite}
@keyframes respirar8{0%,100%{opacity:1} 38%{opacity:.975} 55%{opacity:.99} 72%{opacity:.968}}
.palco8 .faixa-rolante{animation:rolar8 9s linear infinite}
@keyframes rolar8{from{transform:translateY(-14%)} to{transform:translateY(114%)}}
.tv-placa-rotulo{font-family:var(--font-mono); font-size:8.5px; letter-spacing:2px; text-transform:uppercase; fill:rgba(236,236,240,.55)}
.tv-placa-nome{font-family:var(--font-tensao); font-weight:650; fill:#fff; letter-spacing:-.2px}
@media (prefers-reduced-motion:reduce){
  .palco8 .tela-viva, .palco8 .faixa-rolante, .no-ar8 i{animation:none}
  .palco8 .faixa-rolante{display:none}
}
@media (max-width:820px){
  .cena8{grid-template-columns:minmax(0,1fr); align-items:start; gap:28px; padding:28px 16px 96px}
  .palco8{order:0; margin:0 auto; width:min(100%,340px)}
  .palco8 svg{max-height:none}
  .texto8{order:1; max-width:none}
  .bctv-titulo{font-size:calc(clamp(2.1rem,9vw,2.6rem) * var(--tallica-escala))}
}

/* ---------- Ato VIII · 8.2 · O que eu penso, por escrito (js/ato8b.js) ---------- */
#ato8b{position:absolute; inset:0; z-index:4; visibility:hidden; pointer-events:none; overflow:hidden;
  --tinta:#ececf0; --tinta-2:#a9a9b3; --tinta-3:#6f6f79; --fio:#232330; --quente:#ffe9d6}
#ato8b a{color:inherit; text-decoration:none}
.cena8b{height:100%; display:grid; align-content:center; justify-items:start; gap:clamp(22px,3.4vh,40px); padding:clamp(24px,4vh,56px) clamp(16px,5vw,80px); will-change:transform}
.cab8b{display:flex; flex-direction:column; gap:clamp(12px,1.8vh,20px)}
.faixa8b{color:var(--core); min-height:1.3em}
.blog-titulo{margin:0; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; letter-spacing:-.01em; color:var(--tinta);
  font-size:calc(clamp(2.4rem,4.3vw,4.2rem) * var(--tallica-escala)); line-height:var(--tallica-lh); word-spacing:var(--tallica-palavra); padding-top:.15em}
.blog-titulo .hl{background:linear-gradient(90deg, #ff6400, #ff0063 40%, #8a3dff 72%, #384fe1); -webkit-background-clip:text; background-clip:text; color:transparent}
.abertura8b{max-width:62ch}
.e8b{opacity:0}
.tx8b-grade{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,48px); width:100%}
.tx8b{display:flex; flex-direction:column; gap:12px; min-width:0}
.sinal8b{display:block; width:100%; height:22px}
/* a capa de cada postagem: slot 16:9 acima do carimbo, lido de data-capa no article (caminho da imagem). Sem imagem, o marcador:
   fundo escuro com varredura fina, a palavra do pilar em Tallica grande e apagada e um toque do gradiente da marca no canto.
   Chega como transmissão: o canvas de ruído por cima sintoniza (js/ato8b.js) enquanto o filete de sinal assenta. */
.tx8b-capa{position:relative; margin:0; width:100%; aspect-ratio:16/9; border-radius:4px; overflow:hidden; border:1px solid var(--fio); background:#07070f;
  container-type:inline-size; opacity:0; isolation:isolate; transform:translateZ(0)}
.tx8b-capa::before{content:""; position:absolute; inset:0; opacity:.85; transition:opacity .5s, transform .7s; transform-origin:100% 0;
  background:radial-gradient(ellipse 78% 92% at 100% 0%, rgba(255,100,0,.26), rgba(255,0,99,.13) 38%, rgba(138,61,255,.06) 62%, rgba(56,79,225,0) 100%)}
.tx8b-capa::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px)}
.tx8b-capa-marca{position:absolute; left:4.5cqw; bottom:-.07em; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; letter-spacing:-.012em;
  font-size:15.4cqw; line-height:1; white-space:nowrap; color:rgba(236,236,240,.085); transition:color .5s; will-change:transform}
.tx8b-capa img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.2,.7,.2,1); will-change:transform}
.tx8b-capa.com-imagem .tx8b-capa-marca, .tx8b-capa.com-imagem::before{display:none}
.tx8b-capa.com-imagem::after{background:linear-gradient(180deg, rgba(0,0,10,0) 55%, rgba(0,0,10,.28))}  /* vinheta baixa, para a imagem assentar no fundo */
.ruido8b{position:absolute; inset:-2px; width:calc(100% + 4px); height:calc(100% + 4px); display:block; pointer-events:none; z-index:2}
.tx8b.aceso:hover .tx8b-capa img, .tx8b.aceso:focus-within .tx8b-capa img{transform:scale(1.035)}
.tx8b.aceso:hover .tx8b-capa-marca, .tx8b.aceso:focus-within .tx8b-capa-marca{color:rgba(236,236,240,.15)}
.tx8b.aceso:hover .tx8b-capa::before, .tx8b.aceso:focus-within .tx8b-capa::before{opacity:1; transform:scale(1.1)}
#fim{left:auto; right:24px; top:14px; transform:none}   /* com as capas, a cena ocupa a altura toda: o marcador de fim vai para o canto, sem cobrir o título */
.tx8b-rotulo{display:flex; gap:10px; color:var(--tinta-3); transform-origin:left center}
.tx8b-rotulo .tx8b-tema{color:var(--tinta-2)}
.tx8b-titulo{margin:0; font-family:var(--font-estrutura); font-weight:600; font-size:clamp(1.1rem,1.35vw,1.3rem); line-height:1.3; letter-spacing:-.008em; color:var(--tinta); min-height:2.6em; transition:color .3s}
.tx8b-resumo{font-family:var(--font-leitura); font-size:.95rem; line-height:1.6; color:var(--tinta-2); margin:0}
.tx8b-link{display:inline-flex; gap:10px; align-items:center; margin-top:auto; padding-top:4px; font-weight:600; font-size:.95rem; letter-spacing:-.005em; color:var(--tinta)}
.tx8b-link span{transition:transform .3s; color:var(--core)}
.tx8b.aceso{pointer-events:auto}
.tx8b.aceso:hover .tx8b-titulo, .tx8b.aceso:focus-within .tx8b-titulo{color:var(--core)}
.tx8b.aceso:hover .tx8b-link span, .tx8b.aceso:focus-within .tx8b-link span{transform:translateX(6px)}
#ato8b.aceso .botao8b{pointer-events:auto}
#ponto8{position:absolute; left:0; top:0; z-index:6; width:12px; height:12px; border-radius:50%; background:var(--quente); opacity:0; pointer-events:none; will-change:transform}
/* teletipo: letra a letra, cursor na última */
.tipo .pal{white-space:nowrap}
.tipo .ch{visibility:hidden}
.tipo .ch.v{visibility:inherit}   /* inherit, não visible: visible furaria o visibility:hidden da seção */
.tipo.rm .ch{visibility:inherit}
.tipo .ch.ult::after, .tipo.cursor-ini::before{content:""; display:inline-block; width:2px; height:.95em; background:var(--quente); box-shadow:0 0 8px rgba(255,233,214,.55);
  margin-left:.12em; vertical-align:-.08em; animation:pisca8 1.05s steps(1) infinite}
.tipo.cursor-ini::before{margin-left:0; margin-right:.12em}
.blog-titulo .ch.ult::after{height:1.3em; width:.07em; vertical-align:-.02em}
.tx8b-titulo .ch.ult::after{height:1em}
@keyframes pisca8{0%,55%{opacity:1} 56%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .tipo .ch.ult::after, .tipo.cursor-ini::before{animation:none}
  .tx8b-capa img, .tx8b-capa-marca, .tx8b-capa::before{transition:none; transform:none!important}
}
@media (max-width:820px){
  .cena8b{align-content:start; gap:26px; padding:28px 16px 96px}
  .cab8b{gap:16px}
  .blog-titulo{font-size:calc(clamp(2.1rem,9vw,2.6rem) * var(--tallica-escala))}
  .tx8b-grade{grid-template-columns:minmax(0,1fr); gap:26px}
  .tx8b-titulo{min-height:0; font-size:1.15rem}
  .tx8b-capa-marca{font-size:15cqw}
  #fim{left:50%; right:auto; transform:translateX(-50%); top:auto; bottom:14px}   /* a cena 8.2 termina com a coluna deslizada: o marcador de fim fica embaixo, no respiro, sem cobrir texto */
}

/* ---------- Epílogo, cena E.1 (teste): de volta ao visor ---------- */
#epi{position:absolute; inset:0; z-index:5; visibility:hidden; pointer-events:none; overflow:hidden}
.epi-cap{position:absolute; left:0; top:0; transform-origin:50% 50%; will-change:transform}
.epi-cap canvas, .epi-cap svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.epi-aurora{visibility:hidden; -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat}
.epi-svg{overflow:visible}
#pena{position:absolute; left:0; top:0; width:12px; height:12px; border-radius:50%; background:#fff4ea; opacity:0; pointer-events:none; will-change:transform; z-index:2}
.epi-texto{position:absolute; left:57vw; right:5vw; top:50%; transform:translateY(-50%); display:grid; gap:22px; max-width:40rem}
.epi-quem{color:rgba(255,255,255,.62); font-size:11px; letter-spacing:.16em; opacity:0}
.epi-frase{margin:0; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:#fff; letter-spacing:.01em;
  font-size:calc(clamp(2rem, 3.6vw, 3.6rem) * var(--tallica-escala)); line-height:var(--tallica-lh-bloco); word-spacing:var(--tallica-palavra); padding-top:.2em; text-wrap:balance}
.epi-frase .pal-e{display:inline-block; opacity:0; will-change:transform, opacity, filter}
.epi-frase .hl.pal-e{background:linear-gradient(90deg,#ff9600,#ff6400 22%,#ff0063 55%,#8a3dff 82%,#384fe1); -webkit-background-clip:text; background-clip:text; color:transparent}
@media (max-width:820px){
  .epi-texto{left:16px; right:16px; top:auto; bottom:clamp(40px,9vh,96px); transform:none; gap:14px}
  .epi-frase{font-size:calc(clamp(1.7rem, 7.4vw, 2.4rem) * var(--tallica-escala))}
}

/* ---------- Epílogo, cena E.2 (a conversa) e o rodapé ---------- */
.epi-pagina{position:absolute; inset:0; will-change:transform}
#epi.ativo .epi-botao, #epi.ativo .epi-cap, #epi.ativo .epi-rodape a{pointer-events:auto}
#epi a{color:inherit; text-decoration:none}
.epi-conversa{position:absolute; left:57vw; right:5vw; top:50%; transform:translateY(-50%); display:grid; gap:22px; justify-items:start; max-width:38rem; visibility:hidden}
.epi-kicker{color:rgba(255,255,255,.5); font-size:11px; letter-spacing:.16em; opacity:0}
.epi-titulo{margin:0; font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; color:#fff; letter-spacing:.01em;
  font-size:calc(clamp(2rem, 3.4vw, 3.4rem) * var(--tallica-escala)); line-height:var(--tallica-lh-bloco); word-spacing:var(--tallica-palavra); padding-top:.2em; text-wrap:balance}
.epi-titulo .pal-e{display:inline-block; opacity:0; will-change:transform, opacity, filter}
.epi-titulo .hl{color:var(--core)}
.epi-lead{font-family:var(--font-leitura); font-size:clamp(1rem, 1.25vw, 1.18rem); line-height:1.6; color:rgba(255,255,255,.78); max-width:44ch; opacity:0}
.epi-botao{display:inline-flex; align-items:center; gap:14px; min-height:60px; padding:16px 30px; margin-top:6px; border-radius:999px; border:1px solid var(--core);
  background:rgba(255,100,0,.12); color:#fff; font-family:var(--font-estrutura); font-weight:600; font-size:clamp(1.05rem, 1.3vw, 1.2rem); opacity:0;
  transition:background .25s, box-shadow .35s}
.epi-botao .seta{color:var(--core); font-family:var(--font-mono); transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.epi-botao:hover, .epi-botao:focus-visible{background:rgba(255,100,0,.22); box-shadow:0 0 42px rgba(255,100,0,.28)}
.epi-botao:hover .seta{transform:translateX(4px)}
.epi-zap{color:rgba(255,255,255,.5); font-size:12px; letter-spacing:.08em; text-transform:none; user-select:all; opacity:0}
.epi-rodape{position:absolute; left:0; right:0; top:100%; background:#00000a; padding:clamp(64px,8vw,104px) clamp(16px,5vw,80px) 32px}
.epi-rodape::before{content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:linear-gradient(92deg,#18feb5 0%,#2e82d4 18%,#384fe1 32%,#5500a0 48%,#ff0063 64%,#ff6400 82%,#ffff3c 100%)}
.epi-rodape .in{display:grid; gap:40px; max-width:1280px}
.epi-rod-kicker{color:rgba(255,255,255,.5); font-size:11px; letter-spacing:.16em; text-transform:none}
.epi-assinatura{font-family:var(--font-tensao); font-weight:600; text-transform:uppercase; color:#fff; font-size:calc(clamp(2rem,4vw,3.5rem) * var(--tallica-escala)); line-height:var(--tallica-lh); max-width:24ch; text-wrap:balance; word-spacing:var(--tallica-palavra); padding-top:.2em}
.epi-assinatura .hl{color:var(--core)}
.cols-rodape{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px}
.col-rodape{display:grid; gap:12px; align-content:start}
.col-rodape .rotulo{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5)}
.col-rodape ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.col-rodape a{display:inline-block; padding-block:6px; color:rgba(255,255,255,.72); font-family:var(--font-leitura); font-size:15.5px; transition:color .2s}
.col-rodape a:hover{color:#fff}
.legal{padding-top:22px; border-top:1px solid rgba(255,255,255,.14); font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:rgba(255,255,255,.34)}
@media (max-width:820px){
  .epi-conversa{left:16px; right:16px; top:auto; bottom:clamp(32px,6vh,72px); transform:none; gap:14px}
  .epi-titulo{font-size:calc(clamp(1.7rem, 7.4vw, 2.4rem) * var(--tallica-escala))}
  .epi-botao{width:100%; justify-content:space-between}
  .cols-rodape{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 18px}
  .epi-rodape .in{gap:32px}
  #fim{top:10px; bottom:auto; padding:8px 12px; font-size:10px; white-space:nowrap}   /* o Epílogo termina com o rodapé embaixo: o marcador de fim sobe, numa linha, sobre a sobra da cena */
}
@media (prefers-reduced-motion: reduce){ .epi-botao, .epi-botao .seta{transition:none} }

/* home-v2 (07/10): a frase da 3.2 sobe por cima das fotos em cor; sombra suave para ler sobre elas */
.tese-titulo{text-shadow:0 2px 24px rgba(0,0,10,.75), 0 0 2px rgba(0,0,10,.6)}
.tese-pars p{text-shadow:0 1px 14px rgba(0,0,10,.9)}

/* home-v3 (07/10, pedido de Beto): o bloco do rodapé fica no centro da tela, com o conteúdo centrado */
.epi-rodape .in{margin-inline:auto; justify-items:center; text-align:center}
.epi-assinatura{margin-inline:auto}
.cols-rodape{width:100%; max-width:980px; justify-items:center}
.col-rodape{justify-items:center}
.legal{width:100%}

/* home-v6: na cena 8.2 o topo reserva a altura do cabeçalho fixo (a marca não cobre mais o título). Quando a cena não cabe na
   altura (medido em 1900×870: 891 px de cena e o título nascendo debaixo da marca), o botão "Ver todos os textos" sobe para a
   linha do título, à direita; se ainda faltar altura (notebook baixo), a cena sobe com a rolagem como no celular (js/ato8b.js) */
@media (min-width:821px){
  .cena8b{padding-top:max(clamp(24px,4vh,56px), 92px); padding-bottom:max(clamp(24px,4vh,56px), 28px); gap:clamp(18px,3.4vh,40px)}
  .blog-titulo{font-size:calc(clamp(2.4rem,min(4.3vw,7vh),4.2rem) * var(--tallica-escala))}
  .cena8b.nao-cabe{align-content:start; grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(24px,3vw,48px)}
  .cena8b.nao-cabe .cab8b{grid-column:1; grid-row:1}
  .cena8b.nao-cabe .tx8b-grade{grid-column:1 / -1; grid-row:2}
  .cena8b.nao-cabe .botao8b{grid-column:2; grid-row:1; align-self:end; justify-self:end}
}