/* =====================================================================
   JURERÊ NIGHT RUN 2027 · COSMIC EDITION — núcleo visual
   Tokens, tipografia, componentes e o chassi (boot, HUD, céu, índice).
   Capítulo nunca edita este arquivo: estilos de capítulo ficam em
   css/chapters/NN-id.css, todos sob #id.
   ===================================================================== */

/* ---------- Fontes ---------- */
@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: '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: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/anton-latin-400-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: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/anton-latin-ext-400-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: '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 {
  --void: #000000;
  --ink: #05010f;
  --ink-2: #0b0620;
  --deep: #200058;
  --cyan: #00d8f8;
  --violet: #7800f0;
  --magenta: #f000f0;
  --ember: #f00018;
  --white: #f4f6fa;
  --mute: #a9a3c2;
  --mute-2: #6f6890;
  --line: rgba(160, 150, 220, .18);

  --neon: linear-gradient(90deg, var(--cyan), var(--violet) 50%, var(--magenta));
  --neon-v: linear-gradient(180deg, var(--cyan), var(--violet) 50%, var(--magenta));
  --chrome: linear-gradient(178deg, #ffffff 0%, #eef1f6 26%, #b9bfcc 44%, #6e7383 53%, #d9dde6 62%, #ffffff 76%, #aab0bd 100%);
  --glow-c: 0 0 18px rgba(0, 216, 248, .55), 0 0 42px rgba(0, 216, 248, .25);
  --glow-m: 0 0 18px rgba(240, 0, 240, .55), 0 0 42px rgba(240, 0, 240, .25);

  --f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-mega: 'Anton', 'Barlow Condensed', Impact, 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(16px, 5vw, 72px);
  --maxw: 1320px;
  --hud-h: 64px;
  --bevel: 18px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --vh: 1svh;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); color: var(--white); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--void); font-family: var(--f-body); font-size: clamp(16px, 1.05vw + 8px, 19px); 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 { 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(--magenta); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 1000; padding: 10px 14px; background: var(--cyan); color: #000; 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; }

/* ---------- Chassi fixo ---------- */
#sky, #stage3d { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; pointer-events: none; }
#sky { z-index: 0; }
#stage3d { z-index: 40; }
main { position: relative; z-index: 2; }
/* Astronauta fotorrealista (vídeo com alfa, js/astro.js) — mesma altura do palco 3D */
.astro { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: clip; visibility: hidden; }
.astro__rig { position: absolute; left: 0; top: 0; will-change: transform, opacity; filter: drop-shadow(0 18px 40px rgba(32, 0, 88, .55)); }
.astro__flip { position: absolute; inset: 0; }
.astro__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .45s ease; }
.astro__v.is-on { opacity: 1; }
.fx-vignette { position: fixed; inset: 0; z-index: 45; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.fx-grain { position: fixed; inset: -50%; z-index: 46; pointer-events: none; opacity: .06; 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(80% 70% at 50% 50%, rgba(255, 255, 255, .9), rgba(120, 0, 240, .45) 50%, transparent 80%); mix-blend-mode: screen; }

/* ---------- Capítulo ---------- */
.ch { position: relative; padding-block: clamp(96px, 14vh, 180px); isolation: isolate; }
.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); }
.stage { position: relative; height: 100vh; height: 100svh; width: 100%; overflow: clip; }
.stage > .wrap { height: 100%; }
.ch--todo { min-height: 80vh; display: grid; place-items: center; border-top: 1px dashed var(--line); }

/* ---------- Tipografia ---------- */
.kicker { display: inline-flex; align-items: center; gap: .8em; font-family: var(--f-mono); font-weight: 500; font-size: clamp(11px, .75vw + 4px, 13px); letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
.kicker::before { content: ''; width: 44px; height: 2px; background: currentColor; box-shadow: 0 0 10px currentColor; flex: none; }
.kicker--m { color: var(--magenta); }
.kicker--plain::before { display: none; }

.title-chrome, .title-neon, .title-flat {
  font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(52px, 8.4vw, 148px); line-height: 1.12; letter-spacing: -.005em;
  padding-top: .06em; /* folga do acento */
}
.title-chrome {
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(-2px 0 0 rgba(0, 216, 248, .75)) drop-shadow(2px 0 0 rgba(240, 0, 240, .7)) drop-shadow(0 6px 18px rgba(0, 0, 0, .85));
}
/* SplitText: o pai para de pintar, cada pedaço pinta o próprio degradê */
.title-chrome:has(.sw, .sc) { background: none; }
.title-chrome .sw, .title-chrome .sc { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title-chrome .sw:has(.sc) { background: none; } /* palavra partida em letras: só as letras pintam (senão sobra letra fantasma) */
.title-neon { color: transparent; -webkit-text-stroke: 2px var(--cyan); filter: drop-shadow(0 0 10px rgba(0, 216, 248, .7)); }
.title-neon--m { -webkit-text-stroke-color: var(--magenta); filter: drop-shadow(0 0 10px rgba(240, 0, 240, .7)); }
.title-flat { color: var(--white); }
.h2 { font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(32px, 3.6vw, 60px); line-height: 1.12; }
.h3 { font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 1.8vw, 30px); line-height: 1.15; letter-spacing: .01em; }
.mega { font-family: var(--f-mega); font-weight: 400; line-height: 1.02; letter-spacing: -.01em; display: inline-block; transform: skewX(-8deg); font-size: clamp(72px, 13vw, 240px); padding-top: .06em; }
.lede { font-size: clamp(19px, 1.25vw + 8px, 26px); line-height: 1.45; color: #e6e2f5; max-width: 34ch; font-weight: 400; }
.body { color: #cfc9e6; max-width: 58ch; }
.body + .body { margin-top: 1em; }
.body b, .lede b { color: #fff; font-weight: 600; }
.tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4em .9em; font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(16px, 1.2vw + 6px, 24px); }
.tags > * + *::before { content: '•'; color: var(--cyan); margin-right: .9em; }
.grad-text { background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.u-cyan { color: var(--cyan); } .u-magenta { color: var(--magenta); } .u-violet { color: var(--violet); }
.glow-c { text-shadow: var(--glow-c); } .glow-m { text-shadow: var(--glow-m); }
.mono { font-family: var(--f-mono); letter-spacing: .08em; text-transform: uppercase; font-size: .78em; }
.footnote { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: var(--mute-2); text-transform: uppercase; }

/* SplitText com máscara: folga em cima para til e circunflexo não serem cortados */
.sl-mask, .sw-mask, .sc-mask { padding-top: .24em; margin-top: -.24em; padding-bottom: .08em; margin-bottom: -.08em; }
/* Máscaras de linha seguidas: as margens negativas colapsam (−.08 com −.24 vira −.24) e cada linha
   ganha ~.08em de entrelinha. É o preço da folga para o Ç; conte com isso ao medir títulos. */
.sw, .sc { display: inline-block; }

/* ---------- Placa metálica (a moldura do PDF) ----------
   A placa inteira é pintada com o degradê neon; o ::before é a chapa, recuada
   pela espessura da borda com o mesmo chanfro. Assim o filete acompanha
   também as diagonais dos cantos. O ::after põe os 4 parafusos e o brilho. */
.plate {
  --c1: var(--cyan); --c2: var(--magenta); --b: 2px;
  --oct: polygon(var(--bevel) 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)), 0 var(--bevel));
  position: relative; isolation: isolate; padding: clamp(18px, 1.6vw, 28px) clamp(20px, 2vw, 32px);
  clip-path: var(--oct);
  background: linear-gradient(135deg, var(--c1), var(--violet) 50%, var(--c2));
}
.plate::before {
  content: ''; position: absolute; inset: var(--b); z-index: -1; pointer-events: none;
  --bi: calc(var(--bevel) - var(--b) * .42);
  clip-path: polygon(var(--bi) 0, calc(100% - var(--bi)) 0, 100% var(--bi), 100% calc(100% - var(--bi)), calc(100% - var(--bi)) 100%, var(--bi) 100%, 0 calc(100% - var(--bi)), 0 var(--bi));
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 38%),
    linear-gradient(160deg, #2a2640 0%, #0a0717 55%, #16122a 100%);
}
.plate::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  --s: calc(var(--bevel) * .95);
  background:
    radial-gradient(circle at var(--s) var(--s), #d6dae3 0 1.6px, #43465a 2.2px 3.4px, transparent 3.9px),
    radial-gradient(circle at calc(100% - var(--s)) var(--s), #d6dae3 0 1.6px, #43465a 2.2px 3.4px, transparent 3.9px),
    radial-gradient(circle at var(--s) calc(100% - var(--s)), #d6dae3 0 1.6px, #43465a 2.2px 3.4px, transparent 3.9px),
    radial-gradient(circle at calc(100% - var(--s)) calc(100% - var(--s)), #d6dae3 0 1.6px, #43465a 2.2px 3.4px, transparent 3.9px);
}
.plate--c { --c1: var(--cyan); --c2: var(--cyan); }
.plate--m { --c1: var(--magenta); --c2: var(--magenta); }
.plate--glow { filter: drop-shadow(0 0 14px rgba(120, 0, 240, .55)); }
.plate--flat::before { background: rgba(6, 3, 16, .9); }

/* Estatística numa placa */
.stat { display: grid; align-content: center; justify-items: center; text-align: center; gap: .15em; }
.stat__n { font-family: var(--f-mega); font-size: clamp(40px, 4.6vw, 84px); line-height: 1.04; display: inline-block; transform: skewX(-8deg); padding-top: .06em; }
.stat__l { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(14px, 1vw + 4px, 20px); color: #e9e6f7; line-height: 1.15; }
.stat--c .stat__n { color: var(--cyan); filter: drop-shadow(0 0 10px rgba(0, 216, 248, .55)) drop-shadow(0 0 26px rgba(0, 216, 248, .25)); }
.stat--m .stat__n { color: var(--magenta); filter: drop-shadow(0 0 10px rgba(240, 0, 240, .55)) drop-shadow(0 0 26px rgba(240, 0, 240, .25)); }
/* brilho por filter, nunca text-shadow: o odômetro recorta coluna a coluna e o text-shadow vira caixinhas */

/* Chip / selo */
.chip { display: inline-flex; align-items: center; gap: .5em; padding: .5em .9em; border: 1px solid rgba(0, 216, 248, .45); font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #dff9ff; background: rgba(0, 216, 248, .07); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.chip--m { border-color: rgba(240, 0, 240, .5); background: rgba(240, 0, 240, .08); color: #ffe3ff; }
.chip--y { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .05); }
.sold { /* "ATIVAÇÃO VENDIDA" */
  display: inline-grid; justify-items: center; gap: 6px; padding: 12px 18px 14px; transform: rotate(-4deg);
  border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(0, 0, 0, .6), 0 0 22px rgba(240, 0, 240, .55), inset 0 0 18px rgba(240, 0, 240, .25);
  background: rgba(8, 4, 18, .86); font-family: var(--f-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .06em;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.sold__k { font-size: 15px; color: #fff; border-bottom: 2px solid var(--magenta); padding-bottom: 4px; }
.sold__v { font-size: clamp(20px, 1.6vw, 28px); line-height: 1; }
.sold img { max-height: 54px; width: auto; }

/* Moldura octogonal de foto */
.frame-oct { --bv: clamp(22px, 3.2vw, 56px); position: relative; isolation: isolate; padding: 6px; background: linear-gradient(135deg, var(--cyan), var(--violet) 50%, var(--magenta)); clip-path: polygon(var(--bv) 0, calc(100% - var(--bv)) 0, 100% var(--bv), 100% calc(100% - var(--bv)), calc(100% - var(--bv)) 100%, var(--bv) 100%, 0 calc(100% - var(--bv)), 0 var(--bv)); filter: drop-shadow(0 0 18px rgba(120, 0, 240, .5)); }
.frame-oct > img, .frame-oct > video, .frame-oct > picture > img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(calc(var(--bv) - 3px) 0, calc(100% - var(--bv) + 3px) 0, 100% calc(var(--bv) - 3px), 100% calc(100% - var(--bv) + 3px), calc(100% - var(--bv) + 3px) 100%, calc(var(--bv) - 3px) 100%, 0 calc(100% - var(--bv) + 3px), 0 calc(var(--bv) - 3px)); background: #000; }

/* Filme / imagem de cena */
.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.veil-l { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 34%, transparent 62%); }
.veil-b { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .35) 38%, transparent 62%); }
.veil-t { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .75) 0%, transparent 28%); }
.fade-edges { -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }

/* Botões */
.btn { display: inline-flex; align-items: center; gap: .6em; min-height: 52px; padding: 0 26px; font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); transition: transform .25s var(--ease-out), filter .25s, opacity .3s; }
.btn:disabled { opacity: .35; cursor: progress; }
.btn--primary { background: var(--neon); color: #fff; filter: drop-shadow(0 0 14px rgba(120, 0, 240, .7)); }
.btn--primary:not(:disabled):hover { transform: translateY(-2px); filter: drop-shadow(0 0 22px rgba(240, 0, 240, .85)); }
.btn--ghost { color: #dcd7f2; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.btn--ghost:not(:disabled):hover { color: #fff; background: rgba(255, 255, 255, .09); }
.btn svg { fill: currentColor; }

/* Raio elétrico (SVG desenhado pelo NR.bolt) */
.bolt-line { fill: none; stroke: url(#g-neon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(120, 0, 240, .9)) drop-shadow(0 0 10px rgba(0, 216, 248, .6)); }

/* Odômetro */
.odo { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.odo__col { display: inline-block; height: 1.04em; overflow: hidden; vertical-align: bottom; }
.odo__strip { display: flex; flex-direction: column; }
.odo__strip > span { height: 1.04em; line-height: 1.04; }

/* ---------- Pré-show ---------- */
.boot { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: #000; overflow: hidden; }
.boot__grid { position: absolute; inset: -10%; background-image: linear-gradient(rgba(120, 0, 240, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 0, 240, .14) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(700px) rotateX(58deg) translateY(28%); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 70%); mask-image: linear-gradient(0deg, #000 10%, transparent 70%); animation: boot-grid 3s linear infinite; }
@keyframes boot-grid { to { background-position: 0 64px, 0 0; } }
.boot__scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); pointer-events: none; }
.boot__center { position: relative; width: min(760px, 100% - 32px); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 18px; }
.boot__kicker { font-family: var(--f-mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); }
.boot__title { width: min(560px, 86vw); }
.boot__logo { width: 100%; height: auto; filter: drop-shadow(0 0 30px rgba(120, 0, 240, .6)); }
.boot__logo-text { font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: clamp(44px, 8vw, 96px); line-height: 1.05; }
.boot__logo-text b { display: block; background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.boot__logo-text i { display: block; font-size: .32em; letter-spacing: .3em; color: var(--cyan); }
.boot__log { width: min(520px, 100%); min-height: 7.6em; text-align: left; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #9ce9ff; line-height: 1.26; }
.boot__log li { display: flex; gap: .6em; white-space: nowrap; overflow: hidden; }
.boot__log li::after { content: attr(data-ok); margin-left: auto; color: var(--magenta); }
.boot__log li .dots { flex: 1; min-width: 0; overflow: hidden; color: rgba(156, 233, 255, .35); }
.boot__bar { width: min(520px, 100%); height: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.boot__bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--neon); box-shadow: 0 0 12px var(--magenta); }
.boot__meta { width: min(520px, 100%); display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--mute); text-transform: uppercase; }
.boot__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.boot__hint { font-size: 12px; color: var(--mute-2); letter-spacing: .04em; }
.boot__count { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.boot__count b { font-family: var(--f-mega); font-weight: 400; font-size: min(52vh, 60vw); line-height: 1; color: transparent; -webkit-text-stroke: 3px var(--cyan); filter: drop-shadow(0 0 30px rgba(0, 216, 248, .9)); opacity: 0; }
html:not(.is-booting) .boot { display: none; }

/* ---------- HUD ---------- */
.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, 2.4vw, 32px); pointer-events: none; transition: transform .5s var(--ease-out), opacity .5s; }
.hud::before { content: ''; position: absolute; inset: 0 0 -28px; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .38) 60%, transparent); pointer-events: none; }
.hud > * { pointer-events: auto; }
.is-booting .hud, .is-booting .hud__progress { opacity: 0; transform: translateY(-12px); }
.hud__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 17px; letter-spacing: .04em; line-height: 1; justify-self: start; }
.hud__brand small { display: block; margin-top: 3px; font-family: var(--f-mono); font-style: normal; font-weight: 500; font-size: 10px; letter-spacing: .16em; color: var(--mute); }
.hud__bolt { width: 14px; height: 24px; fill: url(#g-neon-v); filter: drop-shadow(0 0 6px rgba(240, 0, 240, .8)); }
.hud__chapter { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #e8e4f7; white-space: nowrap; }
.hud__chapter b { color: var(--cyan); font-weight: 700; }
.hud__sep { width: 18px; height: 1px; background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }
.hud__right { justify-self: end; display: inline-flex; align-items: center; gap: 6px; }
.hud__tele { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: var(--mute); text-transform: uppercase; border: 1px solid rgba(255, 255, 255, .1); background: rgba(10, 6, 24, .55); }
.hud__tele output { color: #fff; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.hud__tele span { color: var(--magenta); }
.hud__tele--alt span { color: var(--cyan); }
.hud__btn { width: 40px; height: 40px; display: grid; place-items: center; color: #e8e4f7; border: 1px solid rgba(255, 255, 255, .12); background: rgba(10, 6, 24, .55); 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(--cyan); border-color: rgba(0, 216, 248, .6); background: rgba(0, 216, 248, .08); }
.hud__progress { position: fixed; z-index: 61; left: 0; right: 0; top: 0; height: 7px; 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: var(--neon); box-shadow: 0 0 10px rgba(240, 0, 240, .8); }
.hud__acts { position: absolute; inset: 0; }
.hud__acts li { position: absolute; top: 0; width: 1px; height: 7px; background: rgba(255, 255, 255, .5); }

/* Índice */
.index { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(0, 0, 0, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow-y: auto; padding: 90px var(--gutter) 40px; }
.index__inner { width: min(1100px, 100%); display: grid; gap: 28px; }
.index__acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px 22px; }
.index__act h3 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--magenta); margin-bottom: 10px; }
.index__act a { display: flex; gap: 10px; padding: 6px 0; text-decoration: none; font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 20px; line-height: 1.1; color: #d8d3ee; border-bottom: 1px solid rgba(255, 255, 255, .06); 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: 11px; color: var(--cyan); padding-top: 4px; }
.index__act a:hover, .index__act a[aria-current="true"] { color: #fff; padding-left: 6px; }
.index__act a[aria-current="true"] small { color: var(--magenta); }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) { .hud__tele--alt { display: none; } }
@media (max-width: 820px) {
  :root { --hud-h: 56px; --bevel: 12px; }
  .hud { grid-template-columns: 1fr auto; }
  .hud__chapter { display: none; }
  .hud__brand small { display: none; }
  .hud__tele { padding: 5px 7px; }
  .hud__btn { width: 36px; height: 36px; }
  .hud__btn--full { display: none; }
  .ch { padding-block: clamp(72px, 12vh, 120px); }
}
@media (max-width: 420px) { .hud__brand span { font-size: 15px; } .hud__tele small { display: none; } }

/* ---------- Movimento reduzido ---------- */
.reduced .fx-grain, .reduced .boot__grid { animation: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }