/* =====================================================================
   MMIF 2027 · "Ao vivo de Florianópolis" — núcleo visual
   Tokens, tipografia, a gramática de leitura (grade, véu, tarja, lower third,
   placar, cartão, números) e o chassi (largada, barra de transmissão, cortes
   de ato, índice). Capítulo nunca edita este arquivo: estilos de capítulo
   ficam em css/chapters/NN-id.css, todos sob #id. Ver design/CHAPTER_GUIDE.md.
   ===================================================================== */

/* ---------- Fontes ---------- */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-condensed-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-condensed-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-latin-700-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-latin-ext-700-italic.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-latin-800-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-latin-ext-800-italic.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 900; font-display: swap; src: url(../fonts/barlow-condensed-latin-900-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 900; font-display: swap; src: url(../fonts/barlow-condensed-latin-ext-900-italic.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  /* escala de texto da peça inteira (24/09/2026: +10% a pedido do cliente, "pequeno para apresentação").
     Todo font-size absoluto é calc(V * var(--ts)) — scripts/textscale.py; em/% herdam. ?ts=1.2 muda na hora. */
  --ts: 1.1;
  --ts-page: var(--ts);   /* a escala da página (já com o ?ts=): base de quem sobe a escala localmente, como o pré-show em tela grande */
  --ink: #0e0713;
  --ink-2: #160a1d;
  --acai-dark: #280532;
  --acai: #4a1f60;
  --acai-light: #7d5596;
  --violet: #8e44a6;
  --honey: #f4b223;
  --honey-2: #ffd66b;
  --offwhite: #f5eee0;
  --paper: #efe6d4;
  --signal: #ff4b5f;
  --text: #f5eee0;
  --text-2: rgba(245, 238, 224, .8);
  --text-3: rgba(245, 238, 224, .56);
  --line: rgba(245, 238, 224, .14);
  --line-2: rgba(245, 238, 224, .26);
  --ink-text: #1d0b27;       /* texto sobre off-white */
  --ink-text-2: rgba(29, 11, 39, .74);
  --ink-line: rgba(74, 31, 96, .18);

  --f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: clamp(20px, 4.6vw, 72px);
  --maxw: 1320px;
  --gap: clamp(16px, 2vw, 32px);
  --hud-h: 64px;
  --cut: clamp(22px, 3.6vw, 60px);   /* inclinação do corte dos capítulos claros */
  --r: 6px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 2px 6px rgba(0, 0, 0, .28), 0 18px 48px rgba(0, 0, 0, .42);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 2px 6px rgba(40, 5, 50, .08), 0 18px 44px rgba(40, 5, 50, .14);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--text); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--ink); font-family: var(--f-body); font-size: calc((clamp(16px, .55vw + 10px, 19px)) * var(--ts, 1)); line-height: 1.55; font-weight: 400; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, ol, ul, figure, blockquote, table { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--honey); color: var(--acai-dark); }
:focus-visible { outline: 2px solid var(--honey); outline-offset: 3px; border-radius: 2px; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 1000; padding: 10px 14px; background: var(--honey); color: var(--acai-dark); font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Camadas globais ---------- */
main { position: relative; z-index: 2; }
.fx-streaks { position: fixed; inset: 0; z-index: 44; width: 100vw; height: 100vh; pointer-events: none; mix-blend-mode: screen; opacity: 0; }
.fx-vignette { position: fixed; inset: 0; z-index: 45; pointer-events: none; background: radial-gradient(125% 95% at 50% 45%, transparent 60%, rgba(8, 2, 12, .42) 100%); }
.fx-grain { position: fixed; inset: -50%; z-index: 46; pointer-events: none; opacity: .055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,3%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)} }
.fx-flash { position: fixed; inset: 0; z-index: 47; pointer-events: none; opacity: 0; background: radial-gradient(90% 80% at 50% 50%, #fff 0%, rgba(255, 244, 214, .9) 40%, rgba(244, 178, 35, .35) 75%, transparent 100%); }

/* ---------- Capítulo ---------- */
.ch { position: relative; padding-block: clamp(104px, 15vh, 190px); isolation: isolate; overflow-x: clip; } /* clip não cria contêiner de rolagem: sticky e pin continuam valendo */
.ch:has(> .stage, > .pin-spacer > .stage), .ch.ch--flush { padding-block: 0; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 1560px; }
.stage { position: relative; height: 100vh; height: 100svh; width: 100%; overflow: clip; background: var(--ink); }
.stage > .wrap { height: 100%; }
.ch--todo { min-height: 80vh; display: grid; place-items: center; border-top: 1px dashed var(--line); }

/* Capítulo claro (dados, tabelas, meio ambiente): off-white com os dois cortes inclinados do deck.
   A chapa é o ::before, recortada; o canto que sobra mostra o --ink da página. */
.ch--light { color: var(--ink-text); padding-block: calc(clamp(104px, 15vh, 190px) + var(--cut)); }
.ch--light::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(125, 85, 150, .10), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(244, 178, 35, .10), transparent 60%),
    var(--offwhite);
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.ch--light.ch--flat-top::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); }
.ch--light.ch--flat-bottom::before { clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); }
.ch--acai { background: linear-gradient(180deg, var(--ink), var(--acai-dark) 18%, var(--acai-dark) 82%, var(--ink)); }

/* ---------- Grade ----------
   .lay = 12 colunas. O capítulo só posiciona: style="--span: 1 / 7" ou as classes prontas. */
.lay { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(28px, 4vh, 56px); align-items: start; }
.lay > * { grid-column: var(--span, 1 / -1); min-width: 0; }
.lay--center { align-items: center; }
.lay--end { align-items: end; }
.left { --span: 1 / 7; } .right { --span: 7 / 13; }
.left-5 { --span: 1 / 6; } .right-7 { --span: 6 / 13; }
.left-4 { --span: 1 / 5; } .right-8 { --span: 5 / 13; }
.left-7 { --span: 1 / 8; } .right-5 { --span: 8 / 13; }
.center-8 { --span: 3 / 11; } .center-10 { --span: 2 / 12; }
.stack { display: grid; gap: clamp(14px, 2vh, 24px); align-content: start; }
.stack--lg { gap: clamp(22px, 3.4vh, 40px); }

/* ---------- Tipografia ---------- */
.display, .h2, .h3, .num { font-family: var(--f-display); font-style: italic; text-transform: uppercase; }
.display { font-weight: 900; font-size: calc((clamp(56px, 7.6vw, 140px)) * var(--ts, 1)); line-height: 1.12; letter-spacing: -.005em; padding-top: .06em; }
.display--xl { font-size: calc((clamp(80px, 12vw, 230px)) * var(--ts, 1)); line-height: 1.02; }
.display--sm { font-size: calc((clamp(44px, 5.4vw, 96px)) * var(--ts, 1)); }
.h2 { font-weight: 900; font-size: calc((clamp(36px, 4vw, 68px)) * var(--ts, 1)); line-height: 1.12; }
.h3 { font-weight: 800; font-size: calc((clamp(22px, 1.7vw, 30px)) * var(--ts, 1)); line-height: 1.15; letter-spacing: .005em; }
.num { font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; padding-top: .08em; }
.num--honey { color: var(--honey); }
.label { font-family: var(--f-display); font-style: normal; font-weight: 700; font-size: calc((clamp(13px, .45vw + 9px, 16px)) * var(--ts, 1)); letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; color: var(--text-3); }
.label--honey { color: var(--honey); }
.ch--light .label { color: var(--acai-light); }
.lede { font-size: calc((clamp(19px, .9vw + 10px, 25px)) * var(--ts, 1)); line-height: 1.45; color: var(--text); max-width: 36ch; font-weight: 400; text-wrap: pretty; }
.body { color: var(--text-2); max-width: 60ch; text-wrap: pretty; }
.body + .body { margin-top: 1em; }
.lede b, .body b { color: var(--text); font-weight: 600; }
.ch--light .lede { color: var(--ink-text); }
.ch--light .body { color: var(--ink-text-2); }
.ch--light .body b, .ch--light .lede b { color: var(--ink-text); }
.mono { font-family: var(--f-mono); font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.u-honey { color: var(--honey); } .u-violet { color: var(--violet); } .u-acai { color: var(--acai); } .u-off { color: var(--offwhite); }
.footnote { font-size: calc(13px * var(--ts, 1)); line-height: 1.5; color: var(--text-3); max-width: 90ch; }
.ch--light .footnote { color: var(--ink-text-2); }
.credit { font-family: var(--f-mono); font-size: calc(10.5px * var(--ts, 1)); letter-spacing: .12em; text-transform: uppercase; color: rgba(245, 238, 224, .72); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }

/* SplitText com máscara: folga para til e circunflexo (herdado da Night Run) */
.sl-mask, .sw-mask, .sc-mask { padding-top: .24em; margin-top: -.24em; padding-bottom: .08em; margin-bottom: -.08em; }
.sw, .sc { display: inline-block; }

/* ---------- Tarja (paralelogramo do deck) ---------- */
.tag {
  display: inline-block; padding: .3em .95em .24em; font-family: var(--f-display); font-style: italic; font-weight: 900;
  font-size: calc((clamp(14px, .6vw + 9px, 21px)) * var(--ts, 1)); letter-spacing: .015em; line-height: 1.1; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(.55em 0, 100% 0, calc(100% - .55em) 100%, 0 100%);
  background: var(--acai); color: var(--offwhite);
}
.tag--honey { background: var(--honey); color: var(--acai-dark); }
.tag--violet { background: var(--violet); color: #fff; }
.tag--ink { background: var(--ink); color: var(--honey); }
.tag--off { background: var(--offwhite); color: var(--acai-dark); }
.tag--lg { font-size: calc((clamp(18px, 1vw + 10px, 28px)) * var(--ts, 1)); }

/* ---------- Lower third (legenda de transmissão) ---------- */
.lt { display: inline-grid; grid-template-columns: 5px auto; column-gap: 12px; align-items: center; }
.lt::before { content: ''; grid-row: 1 / span 2; align-self: stretch; background: var(--honey); }
.lt b { font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: calc((clamp(16px, .6vw + 11px, 22px)) * var(--ts, 1)); line-height: 1.15; letter-spacing: .01em; }
.lt span { font-family: var(--f-mono); font-size: calc(11px * var(--ts, 1)); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); line-height: 1.4; }
.lt--box { padding: 10px 16px 10px 12px; background: rgba(14, 7, 19, .82); box-shadow: var(--shadow-1); }
.ch--light .lt span { color: var(--ink-text-2); }

/* Selo "AO VIVO" / câmera */
.cam { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: calc(11px * var(--ts, 1)); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.cam i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(255, 75, 95, .2); animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { opacity: .35; } }

/* Chip (veículo, fato curto): paralelogramo com fio mel */
.chip { display: inline-flex; align-items: center; gap: .5em; padding: .42em 1em .36em; font-family: var(--f-display); font-weight: 700; font-size: calc((clamp(13px, .4vw + 10px, 16px)) * var(--ts, 1)); letter-spacing: .08em; text-transform: uppercase; color: var(--offwhite); background: rgba(245, 238, 224, .06); box-shadow: inset 0 0 0 1px rgba(244, 178, 35, .55); clip-path: polygon(.5em 0, 100% 0, calc(100% - .5em) 100%, 0 100%); }
.chip--honey { background: var(--honey); color: var(--acai-dark); box-shadow: none; }
.ch--light .chip { color: var(--ink-text); background: rgba(74, 31, 96, .06); box-shadow: inset 0 0 0 1px rgba(74, 31, 96, .4); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Véu (texto sobre foto sempre tem véu) ---------- */
.scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.scrim--l { background: linear-gradient(90deg, rgba(14, 7, 19, .94) 0%, rgba(14, 7, 19, .78) 26%, rgba(40, 5, 50, .42) 50%, rgba(40, 5, 50, 0) 70%); }
.scrim--r { background: linear-gradient(270deg, rgba(14, 7, 19, .94) 0%, rgba(14, 7, 19, .78) 26%, rgba(40, 5, 50, .42) 50%, rgba(40, 5, 50, 0) 70%); }
.scrim--b { background: linear-gradient(0deg, rgba(14, 7, 19, .95) 0%, rgba(14, 7, 19, .7) 26%, rgba(14, 7, 19, 0) 58%); }
.scrim--t { background: linear-gradient(180deg, rgba(14, 7, 19, .85) 0%, rgba(14, 7, 19, 0) 26%); }
.scrim--acai { background: linear-gradient(90deg, rgba(40, 5, 50, .96) 0%, rgba(74, 31, 96, .82) 30%, rgba(74, 31, 96, .3) 55%, rgba(74, 31, 96, 0) 72%); }
.scrim--all { background: rgba(14, 7, 19, .55); }
.scrim--lit { background: linear-gradient(90deg, rgba(245, 238, 224, .96) 0%, rgba(245, 238, 224, .8) 30%, rgba(245, 238, 224, 0) 64%); }
/* halo colado na letra quando não dá para escurecer a foto inteira (aura de glifo, sem forma de véu) */
.aura { text-shadow: 0 0 2px rgba(14, 7, 19, .6), 0 2px 12px rgba(14, 7, 19, .55), 0 6px 34px rgba(14, 7, 19, .5); }

/* ---------- Mídia ---------- */
.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--acai-dark); }
.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo { position: relative; overflow: hidden; background: var(--acai-dark); border-radius: var(--r); box-shadow: var(--shadow-1); isolation: isolate; }
.photo > img, .photo > picture > img, .photo > video { width: 100%; height: 100%; object-fit: cover; }
.photo > .credit { position: absolute; right: 12px; bottom: 10px; z-index: 2; }
.photo--flat { border-radius: 0; box-shadow: none; }
.ch--light .photo { box-shadow: var(--shadow-2); }
.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
.fade-r { -webkit-mask-image: linear-gradient(270deg, transparent, #000 22%); mask-image: linear-gradient(270deg, transparent, #000 22%); }
.fade-b { -webkit-mask-image: linear-gradient(0deg, transparent, #000 24%); mask-image: linear-gradient(0deg, transparent, #000 24%); }

/* ---------- Cartão e placa ---------- */
.card { position: relative; padding: clamp(20px, 2vw, 32px); border-radius: var(--r); background: rgba(22, 10, 29, .78); border: 1px solid var(--line); box-shadow: var(--shadow-1); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
.card::after { content: ''; position: absolute; inset: 0 0 auto; height: 1px; border-radius: var(--r) var(--r) 0 0; background: linear-gradient(90deg, transparent, rgba(245, 238, 224, .35), transparent); pointer-events: none; }
.card--light { background: #fbf7ef; border-color: var(--ink-line); box-shadow: var(--shadow-2); color: var(--ink-text); }
.card--acai { background: linear-gradient(160deg, var(--acai) 0%, var(--acai-dark) 100%); border-color: rgba(245, 238, 224, .12); }
.card--honey { background: var(--honey); color: var(--acai-dark); border-color: transparent; }

/* ---------- Números ---------- */
.stat { display: grid; gap: .35em; align-content: start; }
.stat__n { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc((clamp(44px, 4.6vw, 86px)) * var(--ts, 1)); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; padding-top: .08em; }
.stat__n small { font-size: .5em; letter-spacing: 0; margin-left: .06em; }
.stat__l { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: calc((clamp(14px, .5vw + 10px, 18px)) * var(--ts, 1)); line-height: 1.2; color: var(--text-2); max-width: 22ch; }
.ch--light .stat__l { color: var(--ink-text-2); }
.stat--honey .stat__n { color: var(--honey); }
.stat--acai .stat__n { color: var(--acai); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border-top: 1px solid var(--line-2); }
.stat-row > .stat { padding: clamp(16px, 2vh, 24px) clamp(14px, 1.6vw, 26px) 0 0; }
.stat-row > .stat + .stat { padding-left: clamp(14px, 1.6vw, 26px); border-left: 1px solid var(--line); }
.ch--light .stat-row { border-top-color: var(--ink-line); }
.ch--light .stat-row > .stat + .stat { border-left-color: var(--ink-line); }

/* Odômetro */
.odo { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
/* folga lateral: algarismo itálico passa da caixa e o overflow cortaria o canto. Brilho em odômetro
   só com filter: drop-shadow no pai — text-shadow é recortado coluna a coluna e vira caixinhas */
.odo__col { display: inline-block; height: 1.04em; overflow: hidden; vertical-align: bottom; padding-inline: .06em; margin-inline: -.06em; }
/* onde existe overflow: clip, corta só em cima e embaixo: o itálico passa inteiro para os lados */
@supports (overflow: clip) { .odo__col { overflow: visible; overflow-y: clip; padding-inline: 0; margin-inline: 0; } }
.odo > span { white-space: pre; } /* "26 + DF": espaço dentro do odômetro não colapsa */
.odo__strip { display: flex; flex-direction: column; }
.odo__strip > span { height: 1.04em; line-height: 1.04; }

/* ---------- Placar (tabelas de entregas) ---------- */
.board { width: 100%; border-collapse: separate; border-spacing: 0; font-size: calc((clamp(14px, .35vw + 11px, 17px)) * var(--ts, 1)); }
.board th, .board td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--line); }
.board th:first-child, .board td:first-child { text-align: left; padding-left: 18px; }
.board thead th { position: sticky; top: var(--board-top, calc(var(--hud-h) + 8px)); z-index: 3; background: var(--acai-dark); color: var(--offwhite); font-family: var(--f-display); font-weight: 700; font-size: calc((clamp(13px, .4vw + 10px, 16px)) * var(--ts, 1)); letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid var(--honey); }
.board thead th.is-hl { background: var(--acai); color: var(--honey); }
.board td { color: var(--text-2); }
.board td:first-child { color: var(--text); font-weight: 500; }
.board tr.board__group td { background: rgba(125, 85, 150, .16); color: var(--honey); font-family: var(--f-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .06em; padding-top: 16px; }
.yes { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(244, 178, 35, .16); color: var(--honey); }
.yes svg { width: 16px; height: 16px; }
.no { color: var(--text-3); }
.n { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 1.35em; color: var(--offwhite); }
.board td.is-hl { background: rgba(244, 178, 35, .06); }
.ch--light .board th, .ch--light .board td { border-bottom-color: var(--ink-line); }
.ch--light .board td { color: var(--ink-text-2); }
.ch--light .board td:first-child { color: var(--ink-text); }
.ch--light .board tr.board__group td { background: rgba(125, 85, 150, .14); color: var(--acai); }
.ch--light .yes { background: rgba(74, 31, 96, .1); color: var(--acai); }
.ch--light .no { color: rgba(29, 11, 39, .35); }
.ch--light .n { color: var(--acai); }
.ch--light .board td.is-hl { background: rgba(244, 178, 35, .12); }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 0 28px; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc(19px * var(--ts, 1)); letter-spacing: .04em; text-transform: uppercase; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: transform .25s var(--ease-out), filter .25s, background .25s, color .25s; text-decoration: none; }
.btn:disabled { opacity: .35; cursor: progress; }
.btn--primary { background: var(--honey); color: var(--acai-dark); }
.btn--primary:not(:disabled):hover { transform: translateX(3px); filter: brightness(1.06); }
.btn--ghost { color: var(--offwhite); background: rgba(245, 238, 224, .07); box-shadow: inset 0 0 0 1px rgba(245, 238, 224, .3); }
.btn--ghost:not(:disabled):hover { background: rgba(245, 238, 224, .14); }
.btn svg { width: 18px; height: 18px; fill: none; }

/* ---------- Linha amarela e xadrez ---------- */
.route { fill: none; stroke: url(#g-route); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(244, 178, 35, .45)); vector-effect: non-scaling-stroke; }
.route--thin { stroke-width: 3; }
.checker { position: absolute; width: min(46vw, 720px); aspect-ratio: 1; pointer-events: none; z-index: -1; color: var(--offwhite); opacity: .06;
  background: repeating-conic-gradient(currentColor 0 25%, transparent 0 50%) 0 0 / 64px 64px;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  transform: perspective(900px) rotateX(48deg) rotateZ(-24deg); }
.stage .checker { z-index: 1; } /* dentro de cena fixada o z negativo cairia atrás do fundo do .stage */
.checker--tl { left: -12vw; top: -14vw; }
.checker--br { right: -12vw; bottom: -14vw; }
.ch--light .checker { color: var(--acai); opacity: .07; }

/* ---------- Pré-show (largada) ---------- */
.boot { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: var(--ink); overflow: hidden; }
.boot__bg { position: absolute; inset: -4%; background: radial-gradient(70% 60% at 70% 40%, rgba(125, 85, 150, .35), transparent 70%), radial-gradient(60% 50% at 20% 90%, rgba(244, 178, 35, .14), transparent 70%), url(../assets/img/s-ponte-1280.webp) center / cover no-repeat; filter: saturate(.9) brightness(.42) blur(2px); transform: scale(1.04); }
.boot__checker { position: absolute; left: -10vw; top: -12vw; width: 60vw; aspect-ratio: 1; color: var(--offwhite); opacity: .07; background: repeating-conic-gradient(currentColor 0 25%, transparent 0 50%) 0 0 / 72px 72px; -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent 100%); mask-image: radial-gradient(closest-side, #000 15%, transparent 100%); transform: perspective(900px) rotateX(50deg) rotateZ(-24deg); }
.boot__center { position: relative; width: min(820px, 100% - 40px); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 22px; }
.boot__live { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: calc(12px * var(--ts, 1)); letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); }
.boot__live i { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(255, 75, 95, .22); animation: live 1.6s ease-in-out infinite; }
.boot__title { width: min(640px, 86vw); margin: 0; }
.boot__logo { width: 100%; height: auto; filter: drop-shadow(0 10px 40px rgba(0, 0, 0, .6)); }
.boot__logo-text { font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: calc((clamp(40px, 6vw, 80px)) * var(--ts, 1)); line-height: 1.05; }
.boot__logo-text b { display: block; color: var(--honey); }
.boot__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; font-family: var(--f-display); font-weight: 700; font-size: calc(18px * var(--ts, 1)); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.boot__clock { width: min(520px, 100%); display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.boot__time { font-family: var(--f-mono); font-weight: 700; font-size: calc((clamp(34px, 3.6vw, 48px)) * var(--ts, 1)); letter-spacing: .02em; color: var(--offwhite); font-variant-numeric: tabular-nums; }
.boot__pct { font-family: var(--f-mono); font-size: calc(12px * var(--ts, 1)); letter-spacing: .16em; color: var(--honey); }
.boot__bar { width: min(520px, 100%); height: 4px; background: rgba(245, 238, 224, .12); overflow: hidden; clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.boot__bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--acai-light), var(--honey)); }
.boot__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.boot__hint { font-size: calc(13px * var(--ts, 1)); color: var(--text-3); letter-spacing: .02em; }
.boot__count { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.boot__count b { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc((min(62vh, 56vw)) * var(--ts, 1)); line-height: 1; color: var(--honey); opacity: 0; text-shadow: 0 20px 80px rgba(244, 178, 35, .35); }
html:not(.is-booting) .boot { display: none; }
/* TV e projetor grandes (≥ 1800 × 1000): o pré-show é a primeira tela da reunião e ficava com 1/3 da largura.
   Sobe a escala só dele (nunca abaixo da página) e as larguras junto; o 3·2·1 já enche o quadro e fica na escala da página. */
@media (min-width: 1800px) and (min-height: 1000px) {
  .boot { --ts: calc(var(--ts-page, 1.1) * 1.18); }
  .boot__center { width: min(980px, 100% - 40px); gap: 26px; }
  .boot__title { width: min(760px, 86vw); }
  .boot__clock, .boot__bar { width: min(620px, 100%); }
  .boot .btn { min-height: 60px; padding: 0 34px; }
  .boot__count { --ts: var(--ts-page, 1.1); }
}
@media (min-width: 2400px) and (min-height: 1300px) {
  .boot { --ts: calc(var(--ts-page, 1.1) * 1.45); }
  .boot__center { width: min(1200px, 100% - 40px); gap: 32px; }
  .boot__title { width: min(940px, 86vw); }
  .boot__clock, .boot__bar { width: min(760px, 100%); }
  .boot__bar { height: 5px; }
  .boot .btn { min-height: 72px; padding: 0 42px; }
}

/* ---------- Barra de transmissão ---------- */
.hud { position: fixed; z-index: 60; inset: 0 0 auto 0; height: var(--hud-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 clamp(14px, 2vw, 28px); pointer-events: none; transition: transform .6s var(--ease-out), opacity .6s; }
.hud::before { content: ''; position: absolute; inset: 0 0 -30px; z-index: -1; background: linear-gradient(180deg, rgba(14, 7, 19, .86), rgba(14, 7, 19, .42) 62%, transparent); pointer-events: none; }
.hud > * { pointer-events: auto; }
.is-booting .hud, .is-booting .hud__progress { opacity: 0; transform: translateY(-14px); }
.hud__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; justify-self: start; }
.hud__live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px 4px; background: var(--signal); color: #fff; font-family: var(--f-display); font-weight: 800; font-style: italic; font-size: calc(13px * var(--ts, 1)); letter-spacing: .08em; text-transform: uppercase; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.hud__live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: live 1.4s ease-in-out infinite; }
.hud__selo { width: 34px; height: 34px; border-radius: 50%; }
.hud__name { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc(20px * var(--ts, 1)); letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.hud__name b { color: var(--honey); margin-left: .25em; }
.hud__chapter { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: calc(15px * var(--ts, 1)); letter-spacing: .1em; text-transform: uppercase; color: var(--offwhite); white-space: nowrap; padding: 6px 14px; background: rgba(14, 7, 19, .5); border: 1px solid var(--line); }
.hud__chapter b { font-family: var(--f-mono); color: var(--honey); font-weight: 700; font-size: calc(13px * var(--ts, 1)); }
.hud__sep { width: 16px; height: 2px; background: var(--honey); }
.hud__right { justify-self: end; display: inline-flex; align-items: center; gap: 6px; }
.hud__tele { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 11px 6px; font-family: var(--f-display); font-weight: 700; font-size: calc(12px * var(--ts, 1)); letter-spacing: .12em; color: var(--text-3); text-transform: uppercase; background: rgba(14, 7, 19, .62); border: 1px solid var(--line); }
.hud__tele output { font-family: var(--f-mono); color: var(--offwhite); font-weight: 700; font-size: calc(14px * var(--ts, 1)); letter-spacing: .02em; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.hud__tele span { color: var(--honey); }
.hud__tele--clock output { min-width: 7ch; }
.hud__tele small { font-size: calc(11px * var(--ts, 1)); }
.hud__btn { width: 40px; height: 40px; display: grid; place-items: center; color: var(--offwhite); border: 1px solid var(--line); background: rgba(14, 7, 19, .62); transition: color .2s, border-color .2s, background .2s; }
.hud__btn svg { width: 18px; height: 18px; }
.hud__btn:hover, .hud__btn[aria-pressed="true"], .hud__btn[aria-expanded="true"] { color: var(--honey); border-color: rgba(244, 178, 35, .6); background: rgba(244, 178, 35, .1); }
.hud__progress { position: fixed; z-index: 61; left: 0; right: 0; top: 0; height: 8px; overflow: clip; pointer-events: none; transition: opacity .5s; }
.hud__progress > i { position: absolute; inset: 0 0 auto 0; height: 3px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--acai-light), var(--honey)); }
.hud__progress > b { position: absolute; left: -4px; top: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--honey); box-shadow: 0 0 10px var(--honey); }
.hud__acts { position: absolute; inset: 0; }
.hud__acts li { position: absolute; top: 0; width: 2px; height: 8px; background: rgba(245, 238, 224, .55); }

/* Barra clara sobre capítulo claro (core.js marca html[data-tone]) */
.hud::before, .hud__name, .hud__progress > i { transition: background .5s, color .5s, opacity .5s; }
[data-tone="light"] .hud::before { background: linear-gradient(180deg, rgba(245, 238, 224, .94), rgba(245, 238, 224, .55) 62%, rgba(245, 238, 224, 0)); }
[data-tone="light"] .hud__name { color: var(--acai-dark); }
[data-tone="light"] .hud__name b { color: var(--acai); }
[data-tone="light"] .hud__chapter, [data-tone="light"] .hud__tele, [data-tone="light"] .hud__btn { background: rgba(40, 5, 50, .88); border-color: rgba(40, 5, 50, .9); }

/* Índice */
.index { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(14, 7, 19, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow-y: auto; padding: 96px var(--gutter) 40px; }
/* Com o texto 10% maior (24/09/2026): os 5 atos numa fileira (a faixa passa a 1400 para as colunas crescerem
   junto com a letra); em janela até 1300 px com altura para duas fileiras (e sempre abaixo de 1100) vira 3 + 2,
   com colunas largas — o antigo auto-fit caía em 4 + 1 em 1024×768 e o índice passava da tela. Linha partida
   sai equilibrada (sem palavra sozinha embaixo). */
.index__inner { width: min(1400px, 100%); display: grid; gap: 28px; }
.index__acts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 24px; }
@media (max-width: 1300px) and (min-height: 760px), (max-width: 1099px) { .index__acts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 24px; } }
@media (max-width: 680px) { .index__acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-height: 820px) { .index { padding-top: 84px; padding-bottom: 24px; } .index__inner { gap: 20px; } }
.index__act a span { text-wrap: balance; }
.index__act h3 { font-family: var(--f-display); font-weight: 800; font-style: italic; font-size: calc(15px * var(--ts, 1)); letter-spacing: .1em; text-transform: uppercase; color: var(--honey); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--honey); }
.index__act a { display: flex; gap: 10px; padding: 7px 0; text-decoration: none; font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: calc(20px * var(--ts, 1)); line-height: 1.12; color: var(--text-2); border-bottom: 1px solid var(--line); transition: color .2s, padding .25s var(--ease-out); }
.index__act a small { font-family: var(--f-mono); font-style: normal; font-weight: 500; font-size: calc(11px * var(--ts, 1)); color: var(--acai-light); padding-top: 5px; }
.index__act a:hover, .index__act a[aria-current="true"] { color: var(--offwhite); padding-left: 6px; }
.index__act a[aria-current="true"] small { color: var(--honey); }

/* ---------- Corte de ato ----------
   Vinheta de transmissão (fx.js, "Cortes de ato"; HTML gerado por scripts/build.mjs, actCard).
   .act-card__wipe é FIXA na tela e fica fora do .stage: como a seção vem depois do capítulo anterior
   no documento, ela pinta por cima dele — as lâminas varrem o fim do capítulo anterior e a cortina
   esconde a costura. Fica visibility:hidden fora da janela da vinheta (a timeline liga e desliga).
   Tudo anima por transform/opacity (o chip, por clip-path). Nenhuma pessoa: só grafismo e a cena. */
.act-card { padding-block: 0; }
.act-card__stage { background: radial-gradient(70% 60% at 68% 42%, rgba(74, 31, 96, .55), transparent 72%), radial-gradient(50% 40% at 12% 90%, rgba(244, 178, 35, .08), transparent 70%), var(--ink); }

/* cena: a imagem do ato em fatias verticais (photo-finish). Cada fatia recorta a mesma imagem de tela
   cheia; cqw (contêiner = .act-card__bg) mantém fatia e imagem alinhadas ao pixel. */
.act-card__bg { position: absolute; inset: 0; container-type: size; transform-origin: 62% 50%; }
.act-card__slice { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 100cqw / var(--n)); width: calc(100cqw / var(--n) + 1px); overflow: clip; }
.act-card__slice img { position: absolute; top: 0; left: calc(var(--i) * -100cqw / var(--n)); width: 100cqw; height: 100%; max-width: none; object-fit: cover; }
.act-card__veil { position: absolute; inset: 0; pointer-events: none;
  background:
    /* horizontal ancorado na grade (1320): em tela larga o texto fica no meio e o véu vai junto */
    linear-gradient(90deg, rgba(14, 7, 19, .92) 0%, rgba(14, 7, 19, .8) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .3), rgba(14, 7, 19, .42) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .58), rgba(14, 7, 19, .1) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .84), rgba(14, 7, 19, .26) 100%),
    linear-gradient(0deg, rgba(14, 7, 19, .9) 0%, rgba(14, 7, 19, .45) 22%, rgba(14, 7, 19, 0) 44%),
    linear-gradient(180deg, rgba(14, 7, 19, .5) 0%, rgba(14, 7, 19, 0) 16%); }
.act-card__flag2 { right: -14vw; top: -20vw; left: auto; bottom: auto; opacity: .05; }

/* linha amarela até o posto de cronometragem (fx.js desenha o caminho em pixels do quadro) */
.act-card__line { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; z-index: 2; overflow: visible; pointer-events: none; }
.act-card__line path { fill: none; stroke: url(#g-route); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(244, 178, 35, .5)); }
/* posto: âncora de tamanho zero na borda direita da grade, 18vh acima do pé do quadro */
.act-card__post { position: absolute; z-index: 3; width: 0; height: 0; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: 18vh; }
.act-card__post::before { content: ''; position: absolute; left: -1px; bottom: 10px; width: 2px; height: 20px; background: var(--honey); opacity: .9; }
.act-card__dot { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--honey); box-shadow: 0 0 0 5px rgba(244, 178, 35, .22), 0 0 22px rgba(244, 178, 35, .85); }
.act-card__dot::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(244, 178, 35, .7); animation: act-ping 1.8s var(--ease-out) infinite; }
@keyframes act-ping { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
/* chip "Parcial": KM e tempo da barra de transmissão naquele ponto (relógio da apresentação, não dado da prova) */
.act-card__split { position: absolute; right: -8px; bottom: 30px; display: flex; align-items: stretch; white-space: nowrap; background: rgba(14, 7, 19, .86); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-2); font-family: var(--f-display); text-transform: uppercase; }
.act-card__split-k { display: flex; align-items: center; padding: 0 20px 0 14px; background: var(--honey); color: var(--acai-dark); font-style: italic; font-weight: 900; font-size: calc((clamp(15px, .45vw + 10px, 20px)) * var(--ts, 1)); letter-spacing: .05em; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.act-card__split-f { display: inline-flex; align-items: baseline; gap: 9px; padding: clamp(8px, .7vw, 12px) clamp(12px, 1vw, 18px) clamp(7px, .6vw, 11px); }
.act-card__split-f + .act-card__split-f { border-left: 1px solid var(--line-2); }
.act-card__split-f small { font-weight: 700; font-size: calc((clamp(11px, .25vw + 8px, 14px)) * var(--ts, 1)); letter-spacing: .12em; color: var(--honey); }
.act-card__split-f b { font-family: var(--f-mono); font-weight: 700; font-size: calc((clamp(17px, .7vw + 9px, 26px)) * var(--ts, 1)); line-height: 1.1; letter-spacing: .01em; color: var(--offwhite); font-variant-numeric: tabular-nums; }

/* texto: centrado entre a barra (64 px) e a faixa da linha */
.act-card__txt { position: relative; z-index: 4; height: 100%; display: grid; align-content: center; justify-items: start; gap: 14px; padding-top: var(--hud-h); padding-bottom: 17vh; }
.act-card__cam { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: calc(12px * var(--ts, 1)); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.act-card__cam i { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(255, 75, 95, .2); animation: live 1.6s ease-in-out infinite; }
.act-card__num .tag { transform-origin: 0 50%; }
.act-card__title { position: relative; font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: calc((clamp(88px, 14vw, 250px)) * var(--ts, 1)); line-height: 1.04; letter-spacing: -.01em; padding: .06em .08em 0 0; color: var(--offwhite); text-shadow: 0 2px 18px rgba(14, 7, 19, .42), 0 10px 60px rgba(14, 7, 19, .55); }
.act-card__title-in { display: inline-block; }
/* tablet em pé: a tela alta sobrava vazia embaixo do título medido pela largura (14vw); o título cresce até
   ~85% da faixa do texto ("A Chegada", o mais longo, cabe numa linha de 768 a 1024 px de largura) */
@media (orientation: portrait) and (min-width: 700px) {
  .act-card__title { font-size: calc((clamp(88px, 18vw, 250px)) * var(--ts, 1)); }
  /* com o título quase na largura toda, o fim dele sai do véu lateral: faixa de véu presa à altura do bloco de
     texto (centrado entre a barra e a linha amarela), que some antes do chip "Parcial". Contraste do pior
     quinto do título, fundo p95: 2,6 → 5,0 (medido no WebKit 1024×1366 e 768×1024) */
  .act-card__veil::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 7, 19, 0) 18%, rgba(14, 7, 19, .52) 33%, rgba(14, 7, 19, .52) 60%, rgba(14, 7, 19, 0) 76%); }
}
/* tarja do corte de TV: cobre o título, o texto corta por baixo, a tarja recolhe para a direita */
.act-card__title-bar { position: absolute; left: -.06em; right: -.02em; top: .2em; bottom: .06em; background: var(--honey); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.act-card__list { display: flex; flex-wrap: wrap; gap: 6px 22px; max-width: min(900px, 64%); margin-top: 10px; }
.act-card__list a { display: inline-flex; gap: 8px; align-items: baseline; text-decoration: none; font-family: var(--f-display); font-weight: 700; font-size: calc((clamp(14px, .5vw + 10px, 18px)) * var(--ts, 1)); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.act-card__list small { font-family: var(--f-mono); font-size: calc(11px * var(--ts, 1)); color: var(--honey); }
.act-card__list a:hover { color: var(--offwhite); }

/* vinheta: lâminas em paralelogramo (skew −18°, a inclinação da tarja do deck puxada para a velocidade)
   + cortina escura; a ordem no DOM, da esquerda para a direita, é: lâminas de trás · cortina · lâminas
   da frente (mel na ponta). O conjunto anda só por translateX. */
.act-card__wipe { position: fixed; inset: 0; z-index: 8; pointer-events: none; visibility: hidden; overflow: clip; }
/* fora da janela em volta do corte (fx.js liga .is-near) a vinheta fica desligada mesmo que a timeline,
   ainda alcançando um salto longo pelo índice, a esteja mostrando: senão ela pinta por cima do destino */
.act-card:not(.is-near) .act-card__wipe { visibility: hidden !important; }
.act-card__rig { position: absolute; top: -12vh; bottom: -12vh; left: 0; display: flex; will-change: transform; }
.act-card__rig > * { flex: none; height: 100%; transform: skewX(-18deg); }
.act-card__blade--honey { width: 3.2vh; background: var(--honey); box-shadow: 0 0 40px rgba(244, 178, 35, .45); }
.act-card__blade--off { width: 1.4vh; margin-inline: 2.8vh; background: var(--offwhite); }
.act-card__blade--violet { width: 9vh; background: var(--violet); }
.act-card__blade--acai { width: 22vh; background: linear-gradient(90deg, var(--acai), #3a1350); }
.act-card__blade--acai:last-child, .act-card__curtain + .act-card__blade--acai { background: linear-gradient(90deg, #3a1350, var(--acai)); }
.act-card__curtain { position: relative; width: calc(100vw + 38vh); overflow: clip; background: linear-gradient(90deg, var(--acai-dark), var(--ink) 22%, var(--ink) 78%, var(--acai-dark)); }
.act-card__curtain-in { position: absolute; inset: 0 -30vh; transform: skewX(18deg); } /* endireita o que vai dentro */
.act-card__glow { position: absolute; left: 50%; top: 50%; width: 96vh; aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(closest-side, rgba(142, 68, 166, .42), rgba(74, 31, 96, .2) 50%, transparent 100%); }
/* letreiro gigante vazado atrás do selo: corre para a direita durante a cortina (fx.js, xPercent) */
.act-card__type { position: absolute; left: 0; top: calc(50% - .52em); margin: 0; display: flex; white-space: nowrap; font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: calc(30vh * var(--ts, 1)); line-height: 1; letter-spacing: -.01em; color: transparent; -webkit-text-stroke: max(1.5px, .16vh) rgba(245, 238, 224, .2); will-change: transform; }
.act-card__type span { padding-right: .42em; }
.act-card__type span:nth-child(odd) { -webkit-text-stroke-color: rgba(244, 178, 35, .4); }
.act-card__hair { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent 0%, rgba(244, 178, 35, .85) 26%, rgba(244, 178, 35, .85) 74%, transparent 100%); }
.act-card__flag { position: absolute; left: calc(50% - 50vw - 18vh); top: -8vh; width: 70vh; aspect-ratio: 1; color: var(--offwhite); opacity: .07;
  background: repeating-conic-gradient(currentColor 0 25%, transparent 0 50%) 0 0 / 7vh 7vh;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); }
.act-card__next { position: absolute; left: 50%; top: calc(50% + min(20vh, 21vw, 280px) + 3.2vh); translate: -50% 0; display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.act-card__next-bar { position: absolute; left: 0; right: 0; bottom: -12px; height: 3px; background: linear-gradient(90deg, var(--acai-light), var(--honey)); transform: scaleX(0); transform-origin: 0 50%; }
.act-card__next b { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: calc((clamp(18px, 1.1vw + 10px, 30px)) * var(--ts, 1)); letter-spacing: .04em; text-transform: uppercase; color: var(--offwhite); }
/* selo da prova + aro de cronômetro, no centro da tela; voa para o selo da barra no fim do corte */
.act-card__seal { position: absolute; left: 50%; top: 50%; width: min(40vh, 42vw, 560px); aspect-ratio: 1; translate: -50% -50%; will-change: transform, opacity; }
.act-card__seal img { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; max-width: none; object-fit: contain; filter: drop-shadow(0 0 34px rgba(8, 2, 12, .6)); }
.act-card__bezel { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.act-card__bezel circle { fill: rgba(14, 7, 19, .35); stroke: rgba(245, 238, 224, .2); stroke-width: 1; }
.act-card__bezel-t { fill: none; stroke: rgba(245, 238, 224, .5); stroke-width: 1.4; }
.act-card__bezel-h { fill: none; stroke: var(--honey); stroke-width: 3.2; }

/* ---------- Responsivo (tablet em pé e janelas estreitas; o celular não abre) ---------- */
@media (max-width: 1180px) { .hud__tele--days { display: none; } }
@media (max-width: 980px) {
  .hud { grid-template-columns: 1fr auto; }
  .hud__chapter { display: none; }
  .lay { grid-template-columns: minmax(0, 1fr); }
  .lay > * { grid-column: 1 / -1; }
}
@media (max-width: 720px) { .hud__tele--clock { display: none; } .hud__btn--full { display: none; } }

/* ---------- Movimento reduzido ---------- */
.reduced .fx-grain, .reduced .cam i, .reduced .hud__live i, .reduced .boot__live i, .reduced .act-card__cam i, .reduced .act-card__dot::after { animation: none; }
.reduced .fx-streaks { display: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

/* =================== Aparelho =================== */
.phone-gate { display: none; }
.is-phone, .is-phone body { height: 100%; overflow: hidden; background: var(--ink); }
.is-phone body > :not(.phone-gate) { display: none !important; }
.is-phone .phone-gate {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-content: safe center; justify-items: center; gap: 16px; overflow-y: auto; overscroll-behavior: contain;
  padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); text-align: center; color: var(--offwhite);
  background: radial-gradient(90% 55% at 50% 28%, rgba(125, 85, 150, .42), transparent 70%), radial-gradient(70% 40% at 50% 100%, rgba(244, 178, 35, .16), transparent 70%), var(--ink);
}
.phone-gate__logo { width: min(80vw, 340px); height: auto; margin-bottom: 6px; }
.phone-gate__k { margin: 0; font-family: var(--f-mono); font-size: calc(11px * var(--ts, 1)); letter-spacing: .26em; text-transform: uppercase; color: var(--honey); }
.phone-gate__t { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: calc((clamp(32px, 9.4vw, 44px)) * var(--ts, 1)); line-height: 1.06; max-width: 12ch; }
.phone-gate__p { margin: 0; max-width: 32ch; font-size: calc(15px * var(--ts, 1)); line-height: 1.5; color: var(--text-2); }
.phone-gate__btn { margin-top: 6px; padding: 14px 22px; border: 0; cursor: pointer; font: italic 900 calc(16px * var(--ts, 1))/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--acai-dark); background: var(--honey); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
/* celular deitado: em coluna a tela de aviso não cabe em 360 px de altura (o logo e o botão saíam da tela);
   logo à esquerda, texto à direita, título em duas linhas equilibradas */
@media (orientation: landscape) and (max-height: 540px) {
  .is-phone .phone-gate { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); column-gap: clamp(20px, 5vw, 48px); row-gap: 10px; justify-items: start; align-content: safe center; text-align: left;
    padding: max(20px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); }
  .phone-gate__logo { grid-column: 1; grid-row: 1 / span 4; align-self: center; width: 100%; max-width: 340px; margin: 0; }
  .phone-gate > :not(.phone-gate__logo) { grid-column: 2; }
  .phone-gate__t { max-width: none; text-wrap: balance; }
}

/* Tablet: desfoque de fundo custa caro na GPU do iPad durante a rolagem */
.is-tablet *, .is-tablet *::before, .is-tablet *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ?diag */
.mf-diag { position: fixed; left: 8px; bottom: 8px; z-index: 2000; max-width: min(520px, calc(100vw - 16px)); max-height: 60vh; overflow: auto; padding: 10px 12px; font: 11px/1.45 var(--f-mono); color: #fff3d6; background: rgba(14, 7, 19, .9); border: 1px solid var(--honey); white-space: pre-wrap; pointer-events: auto; }