/* =====================================================================
   Night Run Natal Luz Koerich 2026 · "Floripa no globo de neve" — núcleo visual
   Tokens, fontes, a gramática de leitura (grade, véu, cápsula, legenda, carimbo, cartão, números, tabela de
   cotas, polaroide, etiqueta de presente, moldura dourada) e o chassi (pré-show do globo, HUD com o fio de
   luzinhas, vinhetas de presente, índice, portão do celular, mockups de marca). 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 (auto-hospedadas, subconjuntos latin + latin-ext) ---------- */
@font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url(../fonts/josefin-sans-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url(../fonts/josefin-sans-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Fraunces com todos os eixos (opsz, wght, SOFT, WONK): o acento é o itálico; o normal só baixa se alguém usar */
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../fonts/fraunces-latin-full-italic.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../fonts/fraunces-latin-ext-full-italic.woff2) format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/fraunces-latin-full-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/fraunces-latin-ext-full-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/poppins-latin-300-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/poppins-latin-ext-300-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  /* escala de texto da peça inteira (1,1: o cliente pediu texto maior nas peças irmãs).
     Todo font-size absoluto é calc(V * var(--ts)); em/% herdam. ?ts=1.2 muda na hora (grava --ts-page). */
  --ts-page: 1.1;
  --ts-screen: 1;
  --ts: var(--ts-page);

  /* paleta medida no PPTX (ART_BIBLE) */
  --night: #07120d;
  --pine: #15351f;
  --pine-2: #1d4429;
  --pine-3: #0d2415;
  --wine: #7d0a0e;
  --wine-2: #5c0609;             /* vinho fundo: sombra do veludo, faixas */
  --red: #b3141b;
  --red-2: #d62a2a;
  --red-3: #ff7a6b;              /* vermelho que LÊ sobre escuro (rótulo/acento pequeno): 5:1 no pinho */
  --gold: #e9a24b;
  --gold-2: #f7c978;
  --gold-3: #b9772c;
  --cream: #fff4e2;
  --snow: #f3f7fb;
  --silver: #c9d2da;
  --glow: #46e3a4;               /* verde das luzes da ponte: só luz, nunca texto pequeno */

  --text: var(--cream);
  --text-2: rgba(255, 244, 226, .86);
  --text-3: rgba(255, 244, 226, .68);   /* 6:1 no vinho, 7:1 no pinho */
  --line: rgba(255, 244, 226, .14);
  --line-2: rgba(255, 244, 226, .28);
  --line-gold: rgba(233, 162, 75, .5);
  --ink: #3a0508;                /* texto sobre creme (cartão, polaroide, etiqueta) */
  --ink-2: rgba(58, 5, 8, .78);
  --ink-3: rgba(58, 5, 8, .68);

  --f-display: 'Josefin Sans', 'Poppins', 'Avenir Next', 'Futura', sans-serif;
  --f-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-accent: 'Fraunces', 'Georgia', serif;

  --gutter: clamp(20px, 4.6vw, max(72px, calc(62.6px * var(--ts-screen))));   /* 66 no 1440, 72 no 1920, 95 no 2560 */
  --maxw: 1320px;
  --gap: clamp(16px, 2vw, 32px);
  --hud-h: 64px;
  --garland-h: 32px;             /* o fio de luzinhas do progresso, logo abaixo do HUD */
  --top-safe: calc(var(--hud-h) + var(--garland-h));
  --r: 10px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --shadow-1: 0 1px 0 rgba(255, 244, 226, .06) inset, 0 2px 6px rgba(0, 0, 0, .28), 0 18px 48px rgba(0, 0, 0, .42);
  --shadow-2: 0 2px 6px rgba(20, 2, 4, .18), 0 18px 44px rgba(20, 2, 4, .32);

  /* Veludo do deck: estrias verticais irregulares (turbulência esticada em y) + grão fino. Duas camadas por cima
     da cor, em data-URI (sem requisição). Luz de veludo: poça clara no alto à esquerda, sombra embaixo à direita. */
  --velvet-streaks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42 .0045' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .75 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");
  --velvet-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .4 -.16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --velvet-wine:
    radial-gradient(110% 80% at 14% 6%, rgba(214, 42, 42, .32), transparent 58%),
    radial-gradient(90% 70% at 96% 104%, rgba(38, 2, 4, .62), transparent 62%),
    radial-gradient(60% 60% at 70% 30%, rgba(233, 162, 75, .07), transparent 70%),
    var(--velvet-grain), var(--velvet-streaks), var(--wine);
  --velvet-pine:
    radial-gradient(110% 80% at 12% 6%, rgba(70, 140, 88, .2), transparent 58%),
    radial-gradient(90% 70% at 96% 104%, rgba(3, 12, 6, .7), transparent 62%),
    radial-gradient(60% 60% at 72% 28%, rgba(233, 162, 75, .06), transparent 70%),
    var(--velvet-grain), var(--velvet-streaks), var(--pine);
}
/* Projetor 1080p (≥ 1800 × 1000), o formato principal da reunião: coluna mais larga (1520, 79% da tela) e texto 15%
   maior — sem o degrau, o 1920 mostrava a composição do notebook com margens largas e letra no mesmo px do 1440. */
@media (min-width: 1800px) and (min-height: 1000px) {
  :root { --ts-screen: 1.15; --maxw: 1520px; --hud-h: 72px; --garland-h: 36px; }
}
/* Projetor 2560 (≥ 2400 × 1300): a composição de 1920 ampliada 4/3 (coluna, letra e HUD na mesma proporção). */
@media (min-width: 2400px) and (min-height: 1300px) {
  :root { --ts-screen: 1.52; --maxw: 2020px; --hud-h: 96px; --garland-h: 48px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); color: var(--text); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
/* sem âncora de rolagem: no WebKit ela empurrava o salto imediato para dentro de pins 15–30 mil px adiante */
html, body { overflow-anchor: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
/* Tokens de escala: moram no body (e não no :root) porque var(--ts) dentro de uma variável é resolvido ONDE ela é
   declarada — no :root o --ts ainda não tem o --ts-screen.
   --title-fs: título de capítulo (h2). ~60 px no 1440 × 900, ~74 no 1920 × 1080, ~97 no 2560 × 1440; em tela baixa
   (1280 × 720) a altura segura (6,1vh). Use com teto pela coluna: classe .ch-title (min com 100cqi / --title-em).
   --note-fs: ressalva do deck / nota de rodapé; --credit-fs: crédito de imagem. Crescem no projetor com o --ts. */
body {
  --ts: calc(var(--ts-page) * var(--ts-screen));
  --title-fs: calc(min(clamp(40px, .83vw + 42.5px, 76px), 6.1vh) * var(--ts, 1));
  --title-lh: 1.04;
  --note-fs: calc(13px * var(--ts, 1));
  --credit-fs: calc(12px * var(--ts, 1));
}
body { margin: 0; background: var(--night); 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(--gold); color: var(--pine-3); }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 2px; }
.skip-link { position: fixed; left: 12px; bottom: calc(100% + 8px); z-index: 1000; padding: 10px 14px; background: var(--gold); color: var(--pine-3); font-weight: 600; }
.skip-link:focus { top: 12px; bottom: auto; }
.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; }
.nowrap { white-space: nowrap; }

/* ---------- Camadas globais ---------- */
main { position: relative; z-index: 2; }
/* neve global (js/snow.js): por cima da página, abaixo do HUD; sobre as caixas de texto do capítulo ela cai a 25% */
.fx-snow { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 44; pointer-events: none; }
.fx-vignette { position: fixed; inset: 0; z-index: 45; pointer-events: none; background: radial-gradient(125% 95% at 50% 45%, transparent 62%, rgba(4, 10, 7, .4) 100%); }
.fx-grain { position: fixed; inset: -50%; z-index: 46; pointer-events: none; opacity: .045; 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)} }
.reduced .fx-grain { animation: none; }
/* clarão dourado (NL.cut, entrada do pré-show, presente abrindo) */
.fx-flash { position: fixed; inset: 0; z-index: 47; pointer-events: none; opacity: 0; background: radial-gradient(90% 80% at 50% 50%, #fffaf0 0%, rgba(255, 226, 166, .92) 32%, rgba(233, 162, 75, .42) 66%, rgba(125, 10, 14, 0) 100%); }

/* ---------- Capítulo ---------- */
.ch { position: relative; padding-block: clamp(110px, 15vh, 190px); isolation: isolate; overflow-x: clip; }
.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: calc(var(--maxw) * 1.18); }
.stage { position: relative; height: 100vh; height: 100svh; width: 100%; overflow: clip; background: var(--night); }
/* a .wrap do palco ocupa a altura toda; uma segunda .wrap posta em absoluto no palco (um piso ancorado embaixo) leva
   .wrap--abs e fica fora da regra */
.stage > .wrap:not(.wrap--abs) { height: 100%; }

/* Seção longe da tela (core.js, IntersectionObserver): .is-far (a mais de 1 tela) não pinta; .is-off (fora da tela)
   pausa toda animação CSS de dentro — animação infinita em SVG roda na thread principal mesmo fora da tela e o
   Layerize custa pelo documento inteiro. Nada muda no layout (pins e alturas intactos). html.nl-far-off desliga
   (captura de página inteira). */
html:not(.nl-far-off) main .ch.is-far { visibility: hidden; }
main .ch.is-off *, main .ch.is-off *::before, main .ch.is-off *::after { animation-play-state: paused !important; }

/* Costura entre capítulos do mesmo ato (core.js marca .has-seam): a borda de cima é uma fita de cetim dourada com um
   laço pequeno — a troca de veludo vira um embrulho novo. Absoluta sobre a borda: não rouba altura; na parada do
   topo fica sob o HUD. data-seam="off" na seção tira. */
/* o laço pende da fita: as alças começam exatamente na borda (nada sobe para o capítulo anterior — na parada final
   dele as alças apareciam cortadas no pé da tela; conferência de 29/09/2026) */
.ch.has-seam { --seam-h: clamp(9px, .72vw, 15px); --seam-bow: clamp(56px, 4.4vw, 104px); }
.ch.has-seam::before { content: ''; position: absolute; z-index: 40; left: 0; right: 0; top: 0; height: var(--seam-h); pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, rgba(255, 255, 255, 0) 1px 3px), linear-gradient(180deg, #7a4a14, #d9973f 16%, #ffe6b0 44%, #f7c978 58%, #e9a24b 80%, #6d3f10);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45), 0 -2px 8px rgba(0, 0, 0, .3); }
.ch.has-seam::after { content: ''; position: absolute; z-index: 41; left: calc(50% - var(--seam-bow) / 2); top: calc(var(--seam-bow) * -.029); width: var(--seam-bow); aspect-ratio: 240 / 170; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 170'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe2a6'/%3E%3Cstop offset='.42' stop-color='%23f0ae52'/%3E%3Cstop offset='1' stop-color='%239c5f1f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Cpath d='M113 72C103 96 88 124 66 158L86 152L96 167C112 134 122 104 125 76Z'/%3E%3Cpath d='M127 72C137 96 150 122 172 154L152 150L144 165C130 132 120 104 115 76Z'/%3E%3Cpath d='M112 57C93 30 60 7 33 10C10 13 3 40 19 57C35 74 78 76 110 71Z'/%3E%3Cpath d='M128 57C147 30 180 7 207 10C230 13 237 40 221 57C205 74 162 76 130 71Z'/%3E%3C/g%3E%3Cpath d='M110 62C89 45 59 31 40 34C27 36 27 49 39 55C55 63 83 67 110 67Z' fill='%23000' fill-opacity='.28'/%3E%3Cpath d='M130 62C151 45 181 31 200 34C213 36 213 49 201 55C185 63 157 67 130 67Z' fill='%23000' fill-opacity='.28'/%3E%3Cpath d='M104 52C87 33 62 18 39 18M136 52C153 33 178 18 201 18' fill='none' stroke='%23fff' stroke-opacity='.45' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M104 50C104 43 136 43 136 50L138.5 75C138.5 83 101.5 83 101.5 75Z' fill='url(%23g)'/%3E%3Cpath d='M109 50.5C115 47.6 125 47.6 131 50.5' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
/* Fundos: veludo vinho, veludo pinho, noite. O palco fixado repete o fundo (fica parado enquanto a seção rola). */
.ch--wine, .ch--wine .stage { background: var(--velvet-wine); }
.ch--pine, .ch--pine .stage { background: var(--velvet-pine); }
.ch--night, .ch--night .stage { background: radial-gradient(120% 70% at 50% 0%, #0f2418, transparent 70%), linear-gradient(180deg, #050d09, var(--night) 40%, #0a1a12); }

/* Capítulo ainda não escrito (placeholder do build): veludo, estrela do deck girando no canto, título dourado */
.ch--todo { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: clip; }
.ch--todo .wrap { position: relative; z-index: 1; display: grid; gap: 18px; justify-items: start; }
.ch--todo .display { max-width: 16ch; }
.ch--todo .todo__star { position: absolute; right: -9vmin; top: -10vmin; width: 52vmin; height: 52vmin; opacity: .9; z-index: 0; pointer-events: none; }
.ch--todo .todo__star svg { width: 100%; height: 100%; animation: spin 90s linear infinite; }
.ch--todo.ch--wine .todo__star { --star8-c: #9a0c12; --star8-core: #3a0508; }
.ch--todo.ch--pine .todo__star, .ch--todo.ch--night .todo__star { --star8-c: #a8141a; --star8-core: #07120d; }
.ch--todo .todo__spark { position: absolute; width: clamp(18px, 2vw, 30px); height: clamp(18px, 2vw, 30px); color: var(--gold-2); pointer-events: none; animation: twinkle 3.2s ease-in-out infinite; }
.ch--todo .todo__foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
.reduced .ch--todo .todo__star svg, .reduced .ch--todo .todo__spark { animation: none; }

/* ---------- 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: Josefin Sans em caixa alta (a do deck), dourada por padrão, tracking +.02em. Acento: .fr (Fraunces
   itálico, SOFT 100, WONK 1) — uma palavra de emoção por quadro. Texto: Poppins. */
.display, .h2, .h3, .num { font-family: var(--f-display); text-transform: uppercase; font-kerning: normal; }
.display { font-weight: 400; font-size: calc((clamp(42px, 5vw, 96px)) * var(--ts, 1)); line-height: 1.04; letter-spacing: .02em; padding-top: .08em; text-wrap: balance; color: var(--gold); }
.display--xl { font-size: calc((clamp(60px, 8.4vw, 160px)) * var(--ts, 1)); line-height: 1; }
.display--sm { font-size: calc((clamp(36px, 4.2vw, 76px)) * var(--ts, 1)); }
.display--cream { color: var(--cream); }
/* Título de capítulo (todo h2 de capítulo): o token --title-fs com teto pela coluna. --title-em = largura, em em, da
   linha (ou palavra) mais larga que não pode quebrar (padrão 9: "FLORIANÓPOLIS" na Josefin 400 ≈ 8,6 em); o teto é
   100cqi / --title-em, então o ancestral que mede a coluna precisa de container-type: inline-size (sem contêiner o
   cqi cai na janela e o teto some). Título longo quebra em 2–3 linhas (text-wrap: balance) — nada de nowrap
   encolhido. */
.ch-title { font-size: min(var(--title-fs), calc(100cqi / var(--title-em, 9))); line-height: var(--title-lh, 1.04); text-wrap: balance; }
.h2 { font-weight: 500; font-size: calc((clamp(30px, 3.1vw, 56px)) * var(--ts, 1)); line-height: 1.08; letter-spacing: .02em; text-wrap: balance; color: var(--gold); padding-top: .06em; }
.h3 { font-weight: 600; font-size: calc((clamp(19px, 1.45vw, 26px)) * var(--ts, 1)); line-height: 1.14; letter-spacing: .03em; color: var(--gold); padding-top: .08em; }
/* acento de emoção: Fraunces itálico (em caixa normal mesmo dentro do título em caixa alta) */
.fr { font-family: var(--f-accent); font-style: italic; font-weight: 400; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 96; text-transform: none; letter-spacing: -.005em; font-size: 1.08em; line-height: .9; }
.display .fr, .h2 .fr { color: var(--gold-2); }
.num { font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; padding-top: .1em; }
.num--gold { color: var(--gold); }
.num--cream { color: var(--cream); }
.label { font-family: var(--f-body); font-style: normal; font-weight: 600; font-size: calc((clamp(12px, .42vw + 8.6px, 15px)) * var(--ts, 1)); letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; color: var(--text-3); }
.label--gold { color: var(--gold-2); } /* rótulo pequeno: o dourado claro (o --gold dá 3,9:1 no veludo vinho, reprova AA) */
.label--red { color: var(--red-3); }
.lede { font-size: calc((clamp(19px, .9vw + 10px, 25px)) * var(--ts, 1)); line-height: 1.45; color: var(--text); max-width: 38ch; 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; }
.u-gold { color: var(--gold); } .u-gold2 { color: var(--gold-2); } .u-cream { color: var(--cream); } .u-red { color: var(--red-3); } .u-glow { color: var(--glow); }
.footnote { box-sizing: content-box; font-size: var(--note-fs, calc(13px * var(--ts, 1))); line-height: 1.5; color: var(--text-3); max-width: 90ch; }
.credit { font-family: var(--f-body); font-weight: 500; font-size: var(--credit-fs, calc(12px * var(--ts, 1))); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 244, 226, .78); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
/* crédito dentro de foto: plaqueta própria (crédito solto sobre foto clara mediu 2,3:1 nas peças irmãs) */
.photo > .credit, .credit--plate { padding: 4px 10px 3px; border-radius: 999px; background: rgba(7, 18, 13, .66); color: rgba(255, 244, 226, .9); text-shadow: none; }
.credit--plate { display: inline-block; }

/* SplitText com máscara: folga para til e circunflexo */
.sl-mask, .sw-mask, .sc-mask { padding-top: .26em; margin-top: -.26em; padding-bottom: .1em; margin-bottom: -.1em; }
.sw, .sc { display: inline-block; }
/* palavra partida em letras nunca quebra entre letras (inline-block encolhe e embrulha por dentro: "OPORTU/NIDADE") */
.sw { white-space: nowrap; }

/* ---------- Cápsula ---------- */
.tag {
  display: inline-block; padding: .5em 1.1em .38em; border-radius: 999px; font-family: var(--f-display); font-weight: 600;
  font-size: calc((clamp(12px, .5vw + 8.4px, 17px)) * var(--ts, 1)); letter-spacing: .12em; line-height: 1.1; text-transform: uppercase; white-space: nowrap;
  background: var(--red); color: var(--cream); /* creme no vermelho: 6,8:1 */
}
.tag--gold { background: var(--gold); color: var(--pine-3); }
.tag--red { background: var(--red); color: var(--cream); }
.tag--cream { background: var(--cream); color: var(--wine); }
.tag--line { background: rgba(7, 18, 13, .28); color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--line-gold); }
.tag--lg { font-size: calc((clamp(15px, .8vw + 9px, 23px)) * var(--ts, 1)); }

/* ---------- Legenda de cena (lower third): faísca dourada no lugar do ponto ---------- */
.lt { display: inline-grid; grid-template-columns: 14px auto; column-gap: 12px; align-items: center; row-gap: 3px; }
.lt::before { content: ''; grid-row: 1 / span 2; width: 14px; height: 14px; align-self: center; background: var(--gold-2); filter: drop-shadow(0 0 6px rgba(247, 201, 120, .8));
  -webkit-mask: var(--sparkle-mask) center / contain no-repeat; mask: var(--sparkle-mask) center / contain no-repeat; }
.lt b { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; font-size: calc((clamp(15px, .55vw + 10px, 20px)) * var(--ts, 1)); line-height: 1.15; letter-spacing: .04em; padding-top: .1em; }
.lt span { font-family: var(--f-body); font-weight: 500; font-size: calc(12px * var(--ts, 1)); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); line-height: 1.4; }
.lt--box { padding: 12px 18px 12px 14px; border-radius: var(--r); background: rgba(7, 18, 13, .82); box-shadow: var(--shadow-1); }
:root { --sparkle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath d='M0 -50C3.2 -13 13 -3.2 50 0C13 3.2 3.2 13 0 50C-3.2 13 -13 3.2 -50 0C-13 -3.2 -3.2 -13 0 -50Z'/%3E%3C/svg%3E"); }

/* Carimbo de lugar e data ("Beira-Mar Continental · 19/12") */
.stamp { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-body); font-weight: 600; font-size: calc(12px * var(--ts, 1)); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.stamp i { flex: none; width: 12px; height: 12px; background: var(--gold-2); filter: drop-shadow(0 0 5px rgba(247, 201, 120, .8)); -webkit-mask: var(--sparkle-mask) center / contain no-repeat; mask: var(--sparkle-mask) center / contain no-repeat; }
.stamp--plate { padding: 7px 14px 6px 11px; border-radius: 999px; color: var(--text); background: rgba(7, 18, 13, .68); box-shadow: 0 2px 14px rgba(0, 0, 0, .28), inset 0 0 0 1px var(--line); }

/* Chip (fato curto): cápsula com fio dourado */
.chip { display: inline-flex; align-items: center; gap: .5em; padding: .54em 1.05em .42em; border-radius: 999px; font-family: var(--f-display); font-weight: 600; font-size: calc((clamp(12px, .4vw + 9.4px, 15px)) * var(--ts, 1)); letter-spacing: .1em; text-transform: uppercase; color: var(--cream); background: rgba(255, 244, 226, .06); box-shadow: inset 0 0 0 1.5px var(--line-gold); }
.chip--gold { background: var(--gold); color: var(--pine-3); box-shadow: none; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Véu (texto sobre foto sempre tem véu; neve fica por baixo do texto) ---------- */
.scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.scrim--l { background: linear-gradient(90deg, rgba(5, 13, 9, .95) 0%, rgba(7, 18, 13, .82) 26%, rgba(7, 18, 13, .42) 50%, rgba(7, 18, 13, 0) 70%); }
.scrim--r { background: linear-gradient(270deg, rgba(5, 13, 9, .95) 0%, rgba(7, 18, 13, .82) 26%, rgba(7, 18, 13, .42) 50%, rgba(7, 18, 13, 0) 70%); }
.scrim--b { background: linear-gradient(0deg, rgba(5, 13, 9, .95) 0%, rgba(7, 18, 13, .72) 26%, rgba(7, 18, 13, 0) 58%); }
.scrim--t { background: linear-gradient(180deg, rgba(5, 13, 9, .88) 0%, rgba(7, 18, 13, 0) 28%); }
.scrim--all { background: rgba(7, 18, 13, .56); }
.scrim--warm { background: linear-gradient(90deg, rgba(46, 3, 5, .95) 0%, rgba(92, 6, 9, .8) 28%, rgba(125, 10, 14, .38) 52%, rgba(125, 10, 14, 0) 72%); }
/* halo quente na letra: no pai, por filter (máscara do SplitText corta text-shadow) */
.aura { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)) drop-shadow(0 4px 18px rgba(5, 13, 9, .55)) drop-shadow(0 0 26px rgba(233, 162, 75, .28)); }

/* ---------- Mídia ---------- */
.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--pine-3); }
.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo { position: relative; overflow: hidden; background: var(--pine-3); 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; }
/* Polaroide: moldura branca, sombra de papel e leve giro (--rot). O giro é a propriedade `rotate` — se o GSAP
   animar a própria polaroide, ele engole o giro: anime um filho ou ponha a polaroide num invólucro. */
.photo--polaroid { padding: 4% 4% 0; border-radius: 3px; background: #fbf6ec; box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 10px 24px rgba(0, 0, 0, .32), 0 30px 60px rgba(0, 0, 0, .28); rotate: var(--rot, -2deg); overflow: visible; }
.photo--polaroid > img, .photo--polaroid > picture > img { height: auto; aspect-ratio: var(--ar, 1 / 1); border-radius: 1px; background: #d9d2c4; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.photo--polaroid > figcaption, .photo--polaroid > .photo__cap { display: block; padding: .7em .2em .9em; font-family: var(--f-body); font-weight: 500; font-size: calc((clamp(13px, .4vw + 9px, 16px)) * var(--ts, 1)); line-height: 1.3; color: var(--ink); text-align: center; }
.photo--polaroid > .credit { position: static; display: block; padding: 0 .2em .8em; background: none; color: var(--ink-3); text-align: right; font-size: calc(11px * var(--ts, 1)); letter-spacing: .06em; }
.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%); }
/* Moldura dourada fina, afastada da foto (vitrine) */
.frame-gold { outline: 1.5px solid var(--gold); outline-offset: clamp(8px, .9vw, 14px); box-shadow: var(--shadow-1), 0 0 0 clamp(8px, .9vw, 14px) rgba(233, 162, 75, 0), 0 0 26px rgba(233, 162, 75, .16); }

/* ---------- Cartão ---------- */
.card { position: relative; padding: clamp(20px, 2vw, 32px); border-radius: var(--r); background: rgba(13, 36, 21, .86); border: 1px solid var(--line); box-shadow: var(--shadow-1); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); }
.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(247, 201, 120, .6), transparent); pointer-events: none; }
.card--wine { background: var(--velvet-wine); border-color: rgba(247, 201, 120, .22); backdrop-filter: none; -webkit-backdrop-filter: none; }
.card--pine { background: var(--velvet-pine); border-color: rgba(247, 201, 120, .22); backdrop-filter: none; -webkit-backdrop-filter: none; }
.card--cream { background: #fdf6ea; color: var(--ink); border-color: rgba(185, 119, 44, .35); box-shadow: var(--shadow-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
.card--cream .h3, .card--cream .display, .card--cream .num--gold, .card--cream .label--gold { color: var(--gold-3); } /* ouro escuro sobre creme */
.card--cream .label--red, .card--cream .u-red { color: var(--red); }
.card--cream .body { color: var(--ink-2); }
.card--cream .lede { color: var(--ink); }
.card--glass { background: rgba(255, 244, 226, .07); border-color: rgba(255, 244, 226, .18); }
.is-tablet .card { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(13, 36, 21, .95); }
.is-tablet .card--wine { background: var(--velvet-wine); }
.is-tablet .card--pine { background: var(--velvet-pine); }
.is-tablet .card--cream { background: #fdf6ea; }
.is-tablet .card--glass { background: rgba(20, 42, 28, .9); }

/* ---------- Números ---------- */
.stat { display: grid; gap: .35em; align-content: start; }
.stat__n { font-family: var(--f-display); font-weight: 700; font-size: calc((clamp(42px, 4.4vw, 84px)) * var(--ts, 1)); line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums lining-nums; padding-top: .1em; color: var(--gold); }
.stat__n small { font-size: .5em; letter-spacing: .02em; margin-left: .06em; }
.stat__l { font-family: var(--f-body); font-weight: 500; font-size: calc((clamp(14px, .45vw + 10px, 18px)) * var(--ts, 1)); line-height: 1.35; color: var(--text-2); max-width: 26ch; }
.stat--cream .stat__n { color: var(--cream); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border-top: 1px solid var(--line-gold); }
.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); }
/* brilho do número-herói: no pai (filter), nunca text-shadow (odômetro recorta coluna a coluna) */
.glow { filter: drop-shadow(0 0 14px rgba(233, 162, 75, .45)) drop-shadow(0 0 36px rgba(233, 162, 75, .2)); }

/* 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; padding-inline: .06em; margin-inline: -.06em; }
@supports (overflow: clip) { .odo__col { overflow: visible; overflow-y: clip; padding-inline: 0; margin-inline: 0; } }
.odo > span { white-space: pre; }
.odo__strip { display: flex; flex-direction: column; }
.odo__strip > span { height: 1.04em; line-height: 1.04; }

/* ---------- Tabela de cotas (.board) ----------
   Como o slide 14: cabeçalho pinho escuro com letra dourada, faixas de seção douradas (tr.board__sec), linhas
   pinho alternadas, fio dourado. Incluído: <td><span class="yes" aria-label="Incluído"><svg><use href="#sparkle"/></svg></span>
   Não incluído: <span class="no" aria-label="Não incluído"></span>. Coluna vendida: .is-sold (+ .sold no cabeçalho). */
.board { width: 100%; border-collapse: separate; border-spacing: 0; font-size: calc((clamp(14px, .35vw + 11px, 17px)) * var(--ts, 1)); border: 1.5px solid var(--gold); border-radius: 6px; overflow: clip; background: var(--pine); box-shadow: var(--shadow-1); }
.board th, .board td { padding: 11px 14px 10px; text-align: center; vertical-align: middle; border-bottom: 1px solid rgba(233, 162, 75, .32); border-left: 1px solid rgba(233, 162, 75, .32); }
.board tr > :first-child { text-align: left; border-left: 0; }
.board thead th { position: sticky; top: var(--board-top, calc(var(--top-safe) + 6px)); z-index: 3; background: var(--pine-3); color: var(--gold); font-family: var(--f-display); font-weight: 700; font-size: calc((clamp(12px, .42vw + 9px, 16px)) * var(--ts, 1)); letter-spacing: .08em; line-height: 1.15; text-transform: uppercase; padding-top: 16px; padding-bottom: 13px; border-bottom: 1.5px solid var(--gold); }
.board tbody tr:nth-child(odd of :not(.board__sec)) td { background: #102c19; }
.board tbody tr:nth-child(even of :not(.board__sec)) td { background: #17391f; }
.board .board__sec > * { background: var(--gold); color: var(--pine-3); font-family: var(--f-display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: calc((clamp(13px, .45vw + 9.4px, 17px)) * var(--ts, 1)); text-align: left; padding: 9px 14px 7px; border-left: 0; }
.board td { color: var(--cream); font-weight: 500; }
.board td:first-child { color: var(--text); font-weight: 400; }
.board td.is-sold, .board th.is-sold { background-image: linear-gradient(rgba(247, 201, 120, .07), rgba(247, 201, 120, .07)); }
.board .yes { display: inline-grid; place-items: center; width: 26px; height: 26px; color: var(--gold-2); vertical-align: middle; filter: drop-shadow(0 0 5px rgba(247, 201, 120, .55)); }
.board .yes svg { width: 22px; height: 22px; }
.board .no { display: inline-block; width: 16px; height: 2px; border-radius: 2px; background: rgba(255, 244, 226, .38); vertical-align: middle; }
/* selo "Vendido" (vermelho inclinado sobre o cabeçalho, como no deck) */
.sold { display: inline-block; padding: .34em .8em .22em; border-radius: 5px; background: var(--red-2); color: #fff; font-family: var(--f-display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: calc(13px * var(--ts, 1)); line-height: 1.1; transform: rotate(-7deg); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); margin-bottom: .45em; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: .1em 28px 0; border-radius: 999px; font-family: var(--f-display); font-weight: 600; font-size: calc(16px * var(--ts, 1)); letter-spacing: .1em; text-transform: uppercase; transition: transform .25s var(--ease-out), filter .25s, background .25s, color .25s; text-decoration: none; }
.btn:disabled { opacity: .35; cursor: progress; }
.btn--primary { background: linear-gradient(180deg, var(--gold-2), var(--gold) 60%, #d88d36); color: var(--pine-3); box-shadow: 0 6px 20px rgba(233, 162, 75, .28), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn--primary:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn--ghost { color: var(--cream); background: rgba(7, 18, 13, .4); box-shadow: inset 0 0 0 1.5px rgba(255, 244, 226, .5); }
.btn--ghost:not(:disabled):hover { background: rgba(255, 244, 226, .1); }
.btn svg { width: 18px; height: 18px; flex: none; margin-top: -.1em; }

/* ---------- Etiqueta de presente (.tagcard): papel creme recortado, furo com ilhós dourado e barbante ----------
   Em pé (furo em cima, barbante subindo) por padrão; .tagcard--h deitada (furo à esquerda). */
.tagcard { position: relative; isolation: isolate; display: grid; gap: .4em; justify-items: center; text-align: center; padding: 3.2em 1.4em 1.5em; color: var(--ink); min-width: 9em; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.tagcard::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 4px;
  background: radial-gradient(120% 70% at 30% 10%, #fffaf1, #f6ead3 70%), #f6ead3;
  clip-path: polygon(22% 0, 78% 0, 100% 14%, 100% 100%, 0 100%, 0 14%); }
.tagcard::after { content: ''; position: absolute; left: 50%; top: calc(-1 * var(--string, 70px)); width: 26px; height: calc(var(--string, 70px) + 2.2em); margin-left: -13px; pointer-events: none;
  background:
    radial-gradient(circle at 50% calc(100% - 1.1em), var(--pine-3) 0 4px, transparent 4.5px),
    radial-gradient(circle at 50% calc(100% - 1.1em), transparent 0 5px, var(--gold) 5.5px 8px, transparent 8.5px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 100' preserveAspectRatio='none'%3E%3Cpath d='M13 0C9 25 17 50 13 100' fill='none' stroke='%23c9a46a' stroke-width='2'/%3E%3C/svg%3E") top / 100% calc(100% - 1.1em) no-repeat; }
.tagcard .num, .tagcard .stat__n { color: var(--wine); }
.tagcard .stat__l, .tagcard .body { color: var(--ink-2); }
.tagcard--h { justify-items: start; text-align: left; padding: 1.2em 1.6em 1.2em 3.4em; }
.tagcard--h::before { clip-path: polygon(0 50%, 12% 0, 100% 0, 100% 100%, 12% 100%); }
.tagcard--h::after { left: calc(-1 * var(--string, 60px)); top: 50%; width: calc(var(--string, 60px) + 2.3em); height: 26px; margin: -13px 0 0;
  background:
    radial-gradient(circle at calc(100% - 1.1em) 50%, var(--pine-3) 0 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 1.1em) 50%, transparent 0 5px, var(--gold) 5.5px 8px, transparent 8.5px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 26' preserveAspectRatio='none'%3E%3Cpath d='M0 13C25 9 50 17 100 13' fill='none' stroke='%23c9a46a' stroke-width='2'/%3E%3C/svg%3E") left / calc(100% - 1.1em) 100% no-repeat; }

/* ---------- Motivos (SVG do núcleo) ----------
   <svg class="star8"><use href="#star8"/></svg> · <svg class="sparkle"><use href="#sparkle"/></svg> · .bauble · .bulb · .bow */
.star8 { width: var(--size, 120px); height: var(--size, 120px); overflow: visible; max-width: none; }
/* Estrela do deck no canto (regra única): nunca sob o HUD (topo ≥ --top-safe) nem sobre texto ou plaqueta de
   crédito; meio fora do quadro, girando devagar. <svg class="star8 star8--corner star8--tr"><use href="#star8"/></svg>
   no palco (ou na seção). Cantos: --tr --tl (abaixo do HUD) · --br --bl. Tamanho por --size. A animação pausa com a
   seção fora da tela; o reduzido fica parado. Para animar a entrada, anime um invólucro (o giro é do CSS). */
.star8--corner { position: absolute; z-index: 1; --size: min(34vmin, 380px); pointer-events: none; animation: spin 110s linear infinite; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45)); --star8-c: #a8141a; --star8-core: #07120d; }
.star8--tr { top: var(--top-safe); right: calc(var(--size) * -.4); }
.star8--tl { top: var(--top-safe); left: calc(var(--size) * -.4); }
.star8--br { bottom: calc(var(--size) * -.42); right: calc(var(--size) * -.4); }
.star8--bl { bottom: calc(var(--size) * -.42); left: calc(var(--size) * -.4); }
.reduced .star8--corner { animation: none; }
.sparkle { width: var(--size, 22px); height: var(--size, 22px); color: var(--gold-2); overflow: visible; max-width: none; filter: drop-shadow(0 0 6px rgba(247, 201, 120, .7)); }
.bauble { width: var(--size, 120px); height: calc(var(--size, 120px) * 1.28); max-width: none; --bauble-c: var(--red); filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .4)); }
.bulb { width: var(--size, 14px); height: calc(var(--size, 14px) * 1.7); max-width: none; }
.bow { width: var(--size, 160px); height: calc(var(--size, 160px) * .708); color: var(--gold); max-width: none; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35)); }
.snowflake { width: var(--size, 40px); height: var(--size, 40px); color: var(--snow); max-width: none; }
.sleigh { width: var(--size, 320px); height: calc(var(--size, 320px) * .344); color: var(--gold-2); max-width: none; filter: drop-shadow(0 0 8px rgba(247, 201, 120, .6)); }
.icon-line { width: var(--size, 64px); height: var(--size, 64px); color: var(--gold); max-width: none; }

/* ---------- MOTIVOS ANIMADOS (js/fx.js) ----------
   .garland (NL.garland) · .gift (NL.gift / NL.openGift) · .marquee (NL.marquee) · .swing (NL.swing).
   Contrato e exemplos: design/CHAPTER_GUIDE.md, "Motivos natalinos". */

/* Fio de luzinhas: el é a caixa (o capítulo dá posição e tamanho); o SVG ocupa a caixa em px reais */
.nl-garland { position: relative; pointer-events: none; }
.garland__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; max-width: none; }
.garland__svg .glw { fill: none; stroke: #0a1c10; stroke-linecap: round; stroke-linejoin: round; }
.garland__svg .glw2 { fill: none; stroke: rgba(126, 178, 126, .42); stroke-linecap: round; stroke-linejoin: round; }
.garland__svg .glb__off { --bulb-socket: #173020; }
.garland__svg .glb__on { --bulb-socket: #1f3d28; }
/* piscar das acesas como um pisca-pisca de verdade: os halos vão em três circuitos (.gl__ph--0/1/2, lâmpada i no
   circuito i % 3), cada um com o seu período (≤ 0,56 Hz) e fase — três animações por fio, e não duas por lâmpada
   (100 lâmpadas = 200 animações na thread principal). Só com o fio na tela; reduzido = aceso fixo. */
.nl-garland.is-vis .gl__ph { animation: glb-ph var(--tw, 2s) ease-in-out var(--dl, 0s) infinite; }
@keyframes glb-ph { 0%, 100% { opacity: 1; } 50% { opacity: .36; } }
.reduced .nl-garland .gl__ph { animation: none !important; }

/* Presente CSS 3D. <div class="gift gift--red" style="--size: 200px"></div> (NL.gift monta o miolo).
   Geometria: caixa --w × --h × --d, tampa com espessura --t e sobra --o, fita --rib. A cena gira pela vista
   (--gift-rx, --gift-ry); o laço e o facho de luz são "cartazes" virados para quem vê. */
.gift {
  --w: var(--size, 180px); --h: calc(var(--w) * .64); --d: calc(var(--w) * .8);
  --t: calc(var(--w) * .15); --o: calc(var(--w) * .035);
  --lw: calc(var(--w) + 2 * var(--o)); --ld: calc(var(--d) + 2 * var(--o));
  --rib: calc(var(--w) * .12);
  --rx: var(--gift-rx, -16deg); --ry: var(--gift-ry, -28deg);
  --r1: #8a5418; --r2: #e9a24b; --r3: #ffe6b0; --bow-c: #f0ae52; --inside: #2a1206;
  --ribbon: linear-gradient(90deg, var(--r1), var(--r2) 16%, var(--r3) 44%, var(--r2) 62%, var(--r1));
  --ribbon-h: linear-gradient(180deg, var(--r1), var(--r2) 16%, var(--r3) 44%, var(--r2) 62%, var(--r1));
  --paper: radial-gradient(130% 110% at 28% 12%, #e5262f, #b3141b 45%, #7a0a10);
  position: relative; display: inline-block; vertical-align: bottom; flex: none;
  width: calc(var(--w) * 1.36); height: calc(var(--w) * 1.34);
  perspective: calc(var(--w) * 7); perspective-origin: 50% 26%;
  pointer-events: none;
}
.gift__scene { position: absolute; left: 50%; top: calc(var(--w) * 1.12); width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.gift__shadow, .gift__pool { position: absolute; left: 50%; top: calc(var(--w) * 1.12); border-radius: 50%; pointer-events: none; }
.gift__shadow { width: calc(var(--w) * 1.56); height: calc(var(--w) * .42); margin: calc(var(--w) * -.2) 0 0 calc(var(--w) * -.8); background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0, 0, 0, .3) 55%, rgba(0, 0, 0, 0)); }
.gift__pool { width: calc(var(--w) * 2.3); height: calc(var(--w) * .8); margin: calc(var(--w) * -.4) 0 0 calc(var(--w) * -1.15); opacity: 0; background: radial-gradient(closest-side, rgba(255, 214, 140, .42), rgba(233, 162, 75, .16) 52%, rgba(233, 162, 75, 0)); }
.gift__box, .gift__lidpos, .gift__lid, .gift__beam, .gift__bowpos { position: absolute; transform-style: preserve-3d; }
.gift__box, .gift__lidpos, .gift__beam { left: 0; top: 0; width: 0; height: 0; }
.gift__f, .gift__l { position: absolute; display: block; width: var(--fw); height: var(--fh); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--paper); }
.gift__f::after, .gift__l::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--shade, none); }
/* caixa: faces com o centro na origem (o chão, no meio da caixa) */
.gift__f { left: calc(var(--fw) / -2); top: calc(var(--fh) / -2); }
.gift__f--front { --fw: var(--w); --fh: var(--h); transform: translateY(calc(var(--h) / -2)) translateZ(calc(var(--d) / 2));
  --shade: linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .16) 40%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .12) 62%, rgba(0, 0, 0, .34)); }
.gift__f--back { --fw: var(--w); --fh: var(--h); transform: translateY(calc(var(--h) / -2)) translateZ(calc(var(--d) / -2)) rotateY(180deg); --shade: rgba(0, 0, 0, .5); }
.gift__f--right { --fw: var(--d); --fh: var(--h); transform: translateY(calc(var(--h) / -2)) translateX(calc(var(--w) / 2)) rotateY(90deg);
  --shade: linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .42)), linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .22)); }
.gift__f--left { --fw: var(--d); --fh: var(--h); transform: translateY(calc(var(--h) / -2)) translateX(calc(var(--w) / -2)) rotateY(-90deg); --shade: rgba(0, 0, 0, .5); }
/* a boca da caixa (vista quando a tampa sobe): escura, com a luz de dentro */
.gift__f--in { --fw: var(--w); --fh: var(--d); transform: translateY(calc(var(--h) * -1 + 1px)) rotateX(90deg);
  background: radial-gradient(70% 70% at 50% 50%, #4a220a, var(--inside) 70%), var(--inside); box-shadow: inset 0 0 calc(var(--w) * .08) rgba(0, 0, 0, .8); }
.gift__inglow { position: absolute; inset: 0; opacity: 0; background: radial-gradient(62% 62% at 50% 50%, #fffaf0, #ffe2a6 26%, rgba(247, 190, 100, .75) 52%, rgba(185, 110, 30, .35) 100%); }
/* tampa: .gift__lidpos põe a base da tampa no alto da caixa; .gift__lid (a caixa --lw × --t) é o que o GSAP anima */
.gift__lidpos { transform: translateY(calc(var(--h) * -1)); }
.gift__lid { left: calc(var(--lw) / -2); top: calc(var(--t) * -1); width: var(--lw); height: var(--t); }
.gift__l { left: calc((var(--lw) - var(--fw)) / 2); top: calc((var(--t) - var(--fh)) / 2); }
.gift__l--front { --fw: var(--lw); --fh: var(--t); transform: translateZ(calc(var(--ld) / 2)); --shade: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .16)), linear-gradient(0deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 22%); }
.gift__l--back { --fw: var(--lw); --fh: var(--t); transform: translateZ(calc(var(--ld) / -2)) rotateY(180deg); --shade: rgba(0, 0, 0, .5); }
.gift__l--right { --fw: var(--ld); --fh: var(--t); transform: translateX(calc(var(--lw) / 2)) rotateY(90deg); --shade: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .38)); }
.gift__l--left { --fw: var(--ld); --fh: var(--t); transform: translateX(calc(var(--lw) / -2)) rotateY(-90deg); --shade: rgba(0, 0, 0, .5); }
.gift__l--top { --fw: var(--lw); --fh: var(--ld); transform: translateY(calc(var(--t) / -2)) rotateX(90deg);
  --shade: linear-gradient(200deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06) 48%, rgba(0, 0, 0, .06)); }
.gift__l--under { --fw: var(--lw); --fh: var(--ld); transform: translateY(calc(var(--t) / 2)) rotateX(-90deg); background: var(--inside);
  --shade: radial-gradient(70% 70% at 50% 50%, rgba(255, 214, 140, .3), rgba(0, 0, 0, 0)); }
/* fita de cetim em cruz (vertical em cada face; na tampa, as duas) */
.gift__rib { position: absolute; z-index: 1; top: -1px; bottom: -1px; left: calc(50% - var(--rib) / 2); width: var(--rib); background: var(--ribbon); box-shadow: 0 0 calc(var(--w) * .025) rgba(0, 0, 0, .38); }
.gift__rib::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, rgba(255, 255, 255, 0) 1px 3px); }
.gift__rib--x { top: calc(50% - var(--rib) / 2); bottom: auto; left: -1px; right: -1px; width: auto; height: var(--rib); background: var(--ribbon-h); }
.gift__rib--x::after { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, rgba(255, 255, 255, 0) 1px 3px); }
/* laço: cartaz no centro do alto da tampa, virado para quem vê e puxado para a frente (nunca atravessa a tampa) */
.gift__bowpos { left: calc(var(--lw) / 2); top: 0; width: 0; height: 0; transform: rotateY(calc(var(--ry) * -1)) rotateX(calc(var(--rx) * -1)) translateZ(calc(var(--ld) * .62)); }
.gift__bow { position: absolute; left: calc(var(--w) * -.33); top: calc(var(--w) * -.176); width: calc(var(--w) * .66); height: calc(var(--w) * .4675); max-width: none; overflow: visible; color: var(--bow-c); transform-origin: 50% 38%; filter: drop-shadow(0 calc(var(--w) * .03) calc(var(--w) * .04) rgba(0, 0, 0, .45)); }
/* facho de luz: cartaz que nasce da boca da caixa (a parte de baixo fica dentro dela e some atrás das faces) */
.gift__beam { transform: translateY(calc(var(--h) * -1)) rotateY(calc(var(--ry) * -1)) rotateX(calc(var(--rx) * -1)); }
.gift__beam > i { position: absolute; left: calc(var(--w) * -.7); bottom: calc(var(--w) * -.3); width: calc(var(--w) * 1.4); height: calc(var(--w) * 1.9); transform-origin: 50% 84%; opacity: 0; pointer-events: none;
  background:
    radial-gradient(34% 22% at 50% 84%, rgba(255, 252, 240, .95), rgba(255, 236, 190, .5) 60%, rgba(255, 236, 190, 0)),
    radial-gradient(46% 62% at 50% 84%, rgba(255, 220, 150, .55), rgba(247, 190, 100, .2) 55%, rgba(233, 162, 75, 0)),
    repeating-conic-gradient(from -30deg at 50% 84%, rgba(255, 230, 170, .16) 0 3deg, rgba(255, 230, 170, 0) 3deg 9deg);
  -webkit-mask: radial-gradient(52% 84% at 50% 84%, #000 30%, rgba(0, 0, 0, 0) 100%); mask: radial-gradient(52% 84% at 50% 84%, #000 30%, rgba(0, 0, 0, 0) 100%); }
/* papéis: vermelho lustroso com estrelinhas, folha dourada e prateada amassadas, pinho com flocos, listrado de
   bengala, papel pardo com barbante (sem laço) */
.gift {
  --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23f7c978' fill-opacity='.55'%3E%3Cpath d='M15 6C15.4 10.6 16.4 11.6 21 12C16.4 12.4 15.4 13.4 15 18C14.6 13.4 13.6 12.4 9 12C13.6 11.6 14.6 10.6 15 6Z'/%3E%3Cpath d='M45 36C45.3 39.2 46 39.9 49.2 40.2C46 40.5 45.3 41.2 45 44.4C44.7 41.2 44 40.5 40.8 40.2C44 39.9 44.7 39.2 45 36Z'/%3E%3Ccircle cx='42' cy='12' r='1.1'/%3E%3Ccircle cx='12' cy='44' r='1.1'/%3E%3Ccircle cx='30' cy='28' r='.8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / calc(var(--w) * .34) auto;
  --flakes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23fff4e2' stroke-opacity='.5' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M15 8V22M8.9 11.5L21.1 18.5M8.9 18.5L21.1 11.5'/%3E%3Cpath d='M45 38V48M40.7 40.5L49.3 45.5M40.7 45.5L49.3 40.5'/%3E%3C/g%3E%3Cg fill='%23f7c978' fill-opacity='.5'%3E%3Ccircle cx='44' cy='14' r='1.2'/%3E%3Ccircle cx='14' cy='44' r='1.2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / calc(var(--w) * .34) auto;
  --crinkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .03' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.4 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") 0 0 / calc(var(--w) * 1.1) auto;
  --fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .12' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .16 0 0 0 0 .08 0 0 0 .7 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E") 0 0 / calc(var(--w) * .8) auto;
}
.gift--red { --paper: var(--stars), radial-gradient(130% 110% at 28% 12%, #e5262f, #b3141b 45%, #7a0a10); }
.gift--gold { --paper: var(--crinkle), linear-gradient(125deg, #7a4a14 0%, #c98a3a 14%, #ffe2a6 27%, #d9973f 40%, #f7c978 54%, #a86a24 68%, #f2c070 82%, #8a5418 100%);
  --r1: #4a0407; --r2: #a3121a; --r3: #ff5a50; --bow-c: #c8161e; }
.gift--silver { --paper: var(--crinkle), linear-gradient(125deg, #57616a 0%, #9aa5b0 14%, #f3f7fb 27%, #aab4be 40%, #e3e9ee 54%, #7c8791 68%, #d2dae1 82%, #535c65 100%);
  --r1: #4a0407; --r2: #a3121a; --r3: #ff5a50; --bow-c: #c8161e; }
.gift--green { --paper: var(--flakes), radial-gradient(130% 110% at 28% 12%, #2f8a4e, #1f5a33 45%, #0e361d); }
.gift--stripe { --paper: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .1)), repeating-linear-gradient(135deg, #f6ead3 0 calc(var(--w) * .045), #c4161e calc(var(--w) * .045) calc(var(--w) * .09)); }
.gift--kraft { --paper: var(--fiber), linear-gradient(160deg, #bf9160, #a47a4c 50%, #8a6238);
  --rib: calc(var(--w) * .034); --inside: #3a2410;
  --ribbon: repeating-linear-gradient(35deg, #efe0bf 0 2px, #b89a6a 2px 4px); --ribbon-h: repeating-linear-gradient(55deg, #efe0bf 0 2px, #b89a6a 2px 4px); }
.gift--kraft .gift__bowpos, .gift--nobow .gift__bowpos { display: none; }
.gift--kraft .gift__rib { box-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
/* aberto sem animação (reduzido, ou quem quiser o estado final direto) */
.gift.is-open .gift__rib { visibility: hidden; }
.reduced .gift.is-open .gift__bowpos { display: none; }

/* Letreiro de lâmpadas: o núcleo desenha num canvas (letra-caixa + lâmpadas no traço); o texto fica no DOM */
/* contain: inline-size — a largura do canvas não empurra a coluna (senão a grade cresce, o letreiro remede, cresce…) */
.marquee { display: block; position: relative; line-height: 0; min-height: 1px; contain: inline-size; }
.marquee .mq__cv { display: block; max-width: none; pointer-events: none; }

/* Pêndulo: o núcleo escreve transform: rotate() no invólucro */
.swing { transform-origin: 50% 0; }

/* ---------- Mockup de marca (NL.mock) ---------- */
.mock { position: relative; aspect-ratio: var(--mock-ar, 16 / 9); overflow: hidden; container-type: inline-size; }
.mock > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.mock__ink { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--mask) 0 0 / 100% 100% no-repeat; mask: var(--mask) 0 0 / 100% 100% no-repeat; mix-blend-mode: multiply; }
.mock__panel { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; align-items: center; justify-content: space-around; gap: .8em; white-space: nowrap; overflow: visible;
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.mock__panel span { display: block; }
.mock--plain .mock__ink { display: none; }

/* Imagem que falhou (arquivo ainda não gerado): o núcleo marca img.is-missing e o pai .has-missing */
img.is-missing { visibility: hidden; }

/* =====================================================================
   PRÉ-SHOW — o globo de neve no quarto escuro
   O quadro (pôster do f-globo ou k-globo-a) é posicionado pelo boot.js com a matemática do "cover" + ponto focal:
   o globo fica à esquerda (ou em cima, em pé) e o texto do outro lado, sempre sobre escuro. A neve de dentro
   do vidro é um canvas recortado no círculo lido de assets/ch/boot/globe.json. Sacudir gira .boot__tilt em
   torno da base do globo (mola).
   ===================================================================== */
.boot { position: fixed; inset: 0; z-index: 900; background: #040a07; overflow: hidden; --panel-l: 62%; }
.boot__room { position: absolute; left: var(--room-x, 0px); top: var(--room-y, 0px); width: var(--room-w, 100%); height: var(--room-h, 100%);
  background: radial-gradient(60% 60% at 35% 50%, #1a120c, #040a07 70%); opacity: 0; transition: opacity 1.4s var(--ease-out); }
.boot.is-lit .boot__room { opacity: 1; }
.boot__tilt { position: absolute; inset: 0; transform-origin: var(--pivot-x, 38%) var(--pivot-y, 90%); will-change: transform; }
.boot__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.boot__snow { position: absolute; left: var(--gl-x, 0px); top: var(--gl-y, 0px); width: var(--gl-s, 0px); height: var(--gl-s, 0px); max-width: none; pointer-events: none; }
/* véu do lado do texto: a árvore em bokeh ainda brilha por trás, bem apagada */
.boot__veil { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 10, 7, 0) calc(var(--panel-l) - 16%), rgba(4, 10, 7, .78) calc(var(--panel-l) - 3%), rgba(4, 10, 7, .9) calc(var(--panel-l) + 6%), rgba(4, 10, 7, .93) 100%),
    radial-gradient(130% 100% at 30% 45%, transparent 55%, rgba(4, 10, 7, .55) 100%); }
.boot__panel { position: absolute; top: 0; bottom: 0; left: var(--panel-l); right: 0; padding: calc(var(--hud-h) * .6) clamp(24px, 4.4vw, 84px) calc(var(--hud-h) * .5) clamp(20px, 2.6vw, 48px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(12px, 2.1vh, 24px); }
.boot__panel > * { flex: none; max-width: 100%; }
.boot__logo { width: clamp(190px, 17vw, 330px); margin: 2px 0 0 -2px; }
.boot__logo img { width: 100%; height: auto; filter: drop-shadow(0 8px 26px rgba(0, 0, 0, .55)) drop-shadow(0 0 30px rgba(233, 162, 75, .12)); }
.boot__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: var(--f-display); font-weight: 600; font-size: calc(16px * var(--ts, 1)); letter-spacing: .1em; text-transform: uppercase; color: var(--cream); padding-top: .12em; }
.boot__meta i { width: 11px; height: 11px; background: var(--gold-2); -webkit-mask: var(--sparkle-mask) center / contain no-repeat; mask: var(--sparkle-mask) center / contain no-repeat; }
.boot__load { width: min(420px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 2px; }
.boot__lights { width: 100%; height: 34px; overflow: visible; max-width: none; }
.boot__pct { font-family: var(--f-display); font-weight: 700; font-size: calc(14px * var(--ts, 1)); letter-spacing: .08em; color: var(--gold-2); min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
.boot__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.boot__hint { font-size: calc(16px * var(--ts, 1)); line-height: 1.5; color: var(--cream); text-wrap: balance; }
.boot__hint b, .boot__hint span { display: block; }
.boot__hint b { font-weight: 600; }
.boot__hint span { color: var(--text-2); font-size: .92em; }
.boot .btn { transition: filter .25s, background .25s, color .25s; } /* sem transição de transform: brigava com a entrada do GSAP */
.boot.is-ready .boot__load { opacity: .72; }
/* o quadro do globo é imagem gerada: crédito em plaqueta, no canto de baixo à esquerda (sob o globo) */
.boot__credit { position: absolute; z-index: 2; left: clamp(14px, 2vw, 32px); bottom: clamp(12px, 2vh, 26px); margin: 0; }
.boot.is-portrait .boot__credit { top: clamp(12px, 1.6vh, 22px); bottom: auto; }
html:not(.is-booting) .boot { display: none; }
/* luzinhas da barra de carga (boot.js desenha) */
.bl__wire { fill: none; stroke: #2d4a33; stroke-width: 1.6; stroke-linecap: round; }
.bl__b { color: #26352b; transition: color .5s; }
.bl__b .bl__halo { opacity: 0; transition: opacity .6s; }
.bl__b.is-on { color: var(--c); }
.bl__b.is-on .bl__halo { opacity: .6; }
@media (max-height: 820px) { .boot__panel { gap: 12px; } .boot__logo { width: clamp(170px, 15vw, 260px); } }
@media (max-height: 740px) { .boot__panel { gap: 10px; } .boot__logo { width: clamp(150px, 13.4vw, 220px); } .boot__hint { font-size: calc(15px * var(--ts, 1)); } }
@media (min-width: 1800px) and (min-height: 1000px) {
  .boot { --ts: calc(var(--ts-page, 1.1) * 1.18); }
  .boot__logo { width: clamp(260px, 17vw, 400px); }
  .boot__load { width: min(520px, 100%); }
  .boot .btn { min-height: 60px; padding-inline: 34px; }
}
@media (min-width: 2400px) and (min-height: 1300px) {
  .boot { --ts: calc(var(--ts-page, 1.1) * 1.56); }
  .boot__logo { width: clamp(300px, 19vw, 520px); }
  .boot__load { width: min(680px, 100%); }
  .boot__lights { height: 44px; }
  .boot .btn { min-height: 74px; padding-inline: 44px; }
  .boot .btn svg { width: 24px; height: 24px; }
}
/* Em pé (tablet 1024 × 1366): o globo em cima, o texto embaixo, no escuro */
.boot.is-portrait .boot__veil { background: linear-gradient(180deg, rgba(4, 10, 7, 0) 0, rgba(4, 10, 7, 0) calc(var(--panel-t, 62%) - 12%), rgba(4, 10, 7, .9) calc(var(--panel-t, 62%) - 1%), rgba(4, 10, 7, .95) 100%); }
.boot.is-portrait .boot__panel { left: 0; top: var(--panel-t, 62%); bottom: 0; padding: 12px clamp(28px, 7vw, 72px) 36px; align-items: center; text-align: center; justify-content: flex-start; gap: 14px; }
.boot.is-portrait .boot__logo { width: clamp(150px, 20vw, 230px); }
/* o quadro termina em degradê no escuro (sem a linha da borda da foto sob o texto) */
.boot.is-portrait .boot__room { -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 99%); mask-image: linear-gradient(180deg, #000 76%, transparent 99%); }
.boot.is-portrait .boot__actions { justify-content: center; }
.boot.is-portrait .boot__meta { justify-content: center; }

/* =====================================================================
   HUD — logo, capítulo, contagem e botões; embaixo, o fio de luzinhas do progresso
   Grade: os lados nunca ficam menores que o conteúdo (minmax(max-content, 1fr)) e dividem a sobra. Com folga
   a pílula fica no centro; sem folga, anda para o lado mais curto e encolhe com reticências.
   ===================================================================== */
.hud { position: fixed; z-index: 60; inset: 0 0 auto 0; height: var(--hud-h); display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); align-items: center; gap: 16px; padding: 0 clamp(14px, 2vw, 28px); pointer-events: none; transition: transform .6s var(--ease-out), opacity .6s; }
/* véu da barra: quase opaco até a base da barra, cobre o fio de luzinhas e esmaece logo abaixo */
.hud::before { content: ''; position: absolute; inset: 0 0 calc(-1 * (var(--garland-h) + 26px)); z-index: -1; pointer-events: none; transition: background .5s;
  background: linear-gradient(180deg, rgba(5, 13, 9, .9), rgba(5, 13, 9, .74) calc(var(--hud-h) - 6px), rgba(5, 13, 9, .5) calc(var(--hud-h) + var(--garland-h) * .7), rgba(5, 13, 9, 0)); }
.hud > * { pointer-events: auto; }
.is-booting .hud { opacity: 0; transform: translateY(-14px); }
.hud__brand { display: inline-flex; align-items: center; text-decoration: none; justify-self: start; min-width: 0; padding: 4px 0; }
.hud__brand img { height: calc(var(--hud-h) - 12px); width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.hud__chapter { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 600; font-size: calc(14px * var(--ts, 1)); letter-spacing: .1em; text-transform: uppercase; color: var(--cream); white-space: nowrap; padding: 8px 18px 6px; border-radius: 999px; background: rgba(7, 18, 13, .6); border: 1px solid rgba(233, 162, 75, .3); max-width: min(46vw, 100%); min-width: 0; overflow: hidden; justify-self: center; }
/* reticências no texto (num contêiner flex elas não funcionam) */
.hud__chapter [data-hud-title] { display: block; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: .06em; }
.hud__chapter b { flex: none; color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; padding-top: .06em; }
.hud__sep { width: 10px; height: 10px; flex: none; color: var(--gold-2); }
.hud__right { justify-self: end; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.hud__right > * { flex: none; white-space: nowrap; }
.hud__tele { display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 14px 6px; border-radius: 999px; font-family: var(--f-display); font-weight: 600; font-size: calc(12px * var(--ts, 1)); letter-spacing: .12em; color: var(--text-2); text-transform: uppercase; background: rgba(7, 18, 13, .6); border: 1px solid var(--line); margin-right: 4px; }
.hud__tele output { font-family: var(--f-display); color: var(--gold); font-weight: 700; font-size: calc(16px * var(--ts, 1)); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hud__tele small { font-size: calc(12px * var(--ts, 1)); }
.hud__btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--cream); border: 1px solid var(--line); background: rgba(7, 18, 13, .6); 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(--gold-2); border-color: rgba(233, 162, 75, .6); background: rgba(233, 162, 75, .12); }
@media (max-width: 1280px) { .hud__tele { padding-inline: 11px; } }
@media (max-width: 1100px) { .hud__tele small, .hud__tele span { display: none; } .hud__tele output::after { content: ' dias'; font-size: .75em; color: var(--text-2); letter-spacing: .1em; } .hud__tele.is-one output::after { content: ' dia'; } }
/* tablet em pé: a pílula respira menos (o título curto do manifesto já cabe; isto é folga para marca longa) */
@media (max-width: 1100px) { .hud__chapter { letter-spacing: .07em; padding-inline: 14px; gap: 8px; max-width: min(52vw, 100%); } }
@media (min-width: 1800px) and (min-height: 1000px) {
  .hud__btn { width: 46px; height: 46px; }
  .hud__btn svg { width: 20px; height: 20px; }
  .hud__sep { width: 11px; height: 11px; }
}
@media (min-width: 2400px) and (min-height: 1300px) {
  .hud__right { gap: 8px; }
  .hud__btn { width: 60px; height: 60px; }
  .hud__btn svg { width: 26px; height: 26px; }
  .hud__sep { width: 14px; height: 14px; }
}

/* Fio de luzinhas do progresso (core.js desenha): um bulbo por capítulo, estrelinha entre atos. Acesos até o
   capítulo atual (vermelho, dourado, verde, creme, com halo), o atual pisca devagar (0,6 Hz), os futuros apagados. */
.hud__garland { position: absolute; left: 0; right: 0; top: calc(100% - 4px); width: 100%; height: var(--garland-h); overflow: visible; max-width: none; pointer-events: none; }
.gl__wire { fill: none; stroke: #0b1f12; stroke-width: 2; stroke-linecap: round; }
.gl__wire2 { fill: none; stroke: rgba(70, 120, 80, .5); stroke-width: .8; stroke-linecap: round; }
.gl__glow { fill: none; stroke: var(--gold-2); stroke-width: 1.4; stroke-linecap: round; opacity: .75; filter: drop-shadow(0 0 3px rgba(247, 201, 120, .9)); }
.gl__b { color: #26382c; cursor: pointer; pointer-events: auto; transition: color .5s; }
.gl__b .gl__halo { opacity: 0; transition: opacity .6s; pointer-events: none; }
.gl__b .gl__hit { fill: transparent; }
.gl__b.is-on { color: var(--c); }
.gl__b.is-on .gl__halo { opacity: .55; }
.gl__b.is-now .gl__halo { animation: gl-blink 1.7s ease-in-out infinite; }
.gl__b.is-now use { animation: gl-glass 1.7s ease-in-out infinite; }
.gl__b:hover .gl__halo { opacity: .8; }
.gl__star { color: var(--gold); opacity: .55; transition: opacity .5s, color .5s; }
.gl__star.is-on { opacity: 1; color: var(--gold-2); filter: drop-shadow(0 0 3px rgba(247, 201, 120, .9)); }
.gl__star.is-now { animation: gl-star 1.7s ease-in-out infinite; }
@keyframes gl-blink { 0%, 100% { opacity: .85; } 50% { opacity: .22; } }
@keyframes gl-glass { 0%, 100% { filter: brightness(1.15); } 50% { filter: brightness(.72); } }
@keyframes gl-star { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.reduced .gl__b.is-now .gl__halo, .reduced .gl__b.is-now use, .reduced .gl__star.is-now { animation: none; }
/* NL.hudLights('all') — o fecho: um cometa de luz corre o fio de ponta a ponta, cada bulbo dá um clarão quando ele
   passa, duas piscadas de todos juntos e, depois, o fio inteiro pisca devagar em fase (.is-all) */
.gl__comet { fill: none; stroke: #fff6dc; stroke-width: 3; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 3px #ffe6b0) drop-shadow(0 0 9px rgba(247, 201, 120, .95)); }
.hud__garland.is-all .gl__b .gl__halo { animation: gl-all 2.6s ease-in-out infinite; }
.hud__garland.is-all .gl__star { animation: gl-star 2.6s ease-in-out infinite; }
@keyframes gl-all { 0%, 100% { opacity: .95; } 50% { opacity: .32; } }
.reduced .hud__garland.is-all .gl__b .gl__halo, .reduced .hud__garland.is-all .gl__star { animation: none; }
.is-booting .hud__garland { opacity: 0; }
.hud__garland { transition: opacity .8s; }

/* HUD sobre capítulo claro (html[data-tone="light"], por data-tone="light" na seção ou NL.setTone) */
[data-tone="light"] .hud::before { background: linear-gradient(180deg, rgba(253, 246, 234, .99), rgba(253, 246, 234, .95) calc(var(--hud-h) - 4px), rgba(253, 246, 234, .8) calc(var(--hud-h) + var(--garland-h) * .7), rgba(253, 246, 234, 0)); }
[data-tone="light"] .hud__chapter, [data-tone="light"] .hud__tele, [data-tone="light"] .hud__btn { background: rgba(13, 36, 21, .92); border-color: rgba(13, 36, 21, .92); }
[data-tone="light"] .gl__wire { stroke: #33563c; }
/* o logo tem letra creme: no tom claro ganha uma plaqueta pinho, como as pílulas */
.hud__brand { border-radius: 12px; transition: background .4s, padding .4s; }
[data-tone="light"] .hud__brand { background: rgba(13, 36, 21, .92); padding: 3px 9px; }
[data-tone="light"] .hud__brand img { height: calc(var(--hud-h) - 18px); }
[data-tone="light"] .gl__b:not(.is-on) { color: #c4bcae; }

/* ---------- Índice (modal): os atos como quatro presentes ---------- */
.index { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(4, 10, 7, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow-y: auto; padding: 92px var(--gutter) 40px; }
.index__inner { width: min(calc(var(--maxw) * 1.09), 100%); display: grid; gap: 26px; } /* 1440 no notebook; cresce com a coluna no projetor */
.index__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.index__close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--cream); border: 1px solid var(--line-2); background: rgba(255, 244, 226, .05); }
.index__close:hover { color: var(--gold-2); border-color: var(--line-gold); }
.index__close svg { width: 18px; height: 18px; }
.index__acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1099px) { .index__acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-height: 820px) { .index { padding-top: 80px; padding-bottom: 24px; } .index__inner { gap: 18px; } }
/* cada ato é um presente: papel (veludo vinho/pinho), fita dourada vertical à esquerda com o laço no alto */
.index__act { position: relative; padding: 22px 22px 18px 52px; border-radius: 8px; background: var(--velvet-wine); box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(247, 201, 120, .16); overflow: hidden; }
.index__act:nth-child(even) { background: var(--velvet-pine); }
.index__act::before { content: ''; position: absolute; left: 22px; top: 0; bottom: 0; width: 12px; background: linear-gradient(90deg, #9c5f1f, var(--gold) 25%, #ffe2a6 50%, var(--gold) 75%, #9c5f1f); box-shadow: 0 0 10px rgba(0, 0, 0, .3); }
.index__bow { position: absolute; left: 3px; top: 12px; width: 50px; height: 36px; color: var(--gold); max-width: none; }
.index__act h3 { display: grid; gap: 4px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(247, 201, 120, .4); }
.index__act h3 small { font-family: var(--f-body); font-weight: 600; font-size: calc(12px * var(--ts, 1)); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.index__act h3 span { font-family: var(--f-display); font-weight: 500; font-size: calc(24px * var(--ts, 1)); letter-spacing: .03em; text-transform: uppercase; line-height: 1.05; color: var(--cream); padding-top: .08em; }
.index__act a { display: flex; gap: 10px; padding: 8px 0 7px; text-decoration: none; font-family: var(--f-body); font-weight: 500; font-size: calc(15px * var(--ts, 1)); line-height: 1.3; color: var(--text-2); border-bottom: 1px solid var(--line); transition: color .2s, padding .25s var(--ease-out); }
.index__act a:last-child { border-bottom: 0; }
.index__act a small { flex: none; font-family: var(--f-display); font-weight: 700; font-size: calc(13px * var(--ts, 1)); color: var(--gold); padding-top: 2px; min-width: 2ch; }
.index__act a span { text-wrap: balance; }
.index__act a:hover, .index__act a[aria-current="true"] { color: var(--cream); padding-left: 6px; }
.index__act a[aria-current="true"] small { color: var(--gold-2); }

/* =====================================================================
   VINHETA DE PRESENTE (corte de ato; HTML do build.mjs, animação no fx.js)
   O embrulho ocupa a tela ao entrar; a rolagem puxa o laço (tranco + giro), as fitas escorregam para fora, o
   papel se abre em duas abas (portas) e a luz de dentro revela a cena do ato. Papel por ato: vinho com
   estrelinhas douradas (2), pinho com flocos dourados (3), vermelho com listras finas (4).
   ===================================================================== */
.act-card { padding-block: 0; }
.act-card__stage { background: var(--night); }
.act-card__bg { position: absolute; inset: 0; transform-origin: 55% 50%; overflow: hidden;
  /* fundo de reserva (imagem do ato ainda não gerada): bokeh quente de árvore sobre o veludo do ato */
  background:
    radial-gradient(3.2vmax 3.2vmax at 62% 30%, rgba(255, 214, 140, .55), transparent 70%),
    radial-gradient(2.4vmax 2.4vmax at 74% 46%, rgba(255, 190, 110, .45), transparent 70%),
    radial-gradient(4vmax 4vmax at 83% 24%, rgba(255, 200, 120, .35), transparent 70%),
    radial-gradient(2vmax 2vmax at 68% 62%, rgba(214, 42, 42, .5), transparent 70%),
    radial-gradient(3vmax 3vmax at 90% 58%, rgba(255, 220, 150, .4), transparent 70%),
    radial-gradient(2.2vmax 2.2vmax at 56% 52%, rgba(70, 227, 164, .22), transparent 70%),
    radial-gradient(3.6vmax 3.6vmax at 78% 76%, rgba(255, 196, 120, .3), transparent 70%),
    radial-gradient(1.6vmax 1.6vmax at 60% 16%, rgba(255, 240, 200, .5), transparent 70%),
    radial-gradient(70% 90% at 72% 44%, rgba(233, 162, 75, .22), transparent 70%),
    var(--act-velvet, var(--velvet-wine)); }
.act-card__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.act-card__glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(34% 50% at 50% 50%, rgba(255, 218, 150, .8), rgba(233, 162, 75, .42) 40%, rgba(185, 119, 44, 0) 74%); mix-blend-mode: screen; }
.act-card__veil { position: absolute; inset: 0; pointer-events: none;
  --col0: max(0px, (100% - var(--maxw)) / 2); --colw: min(100%, var(--maxw));
  background:
    linear-gradient(90deg, rgba(5, 13, 9, .94) 0%, rgba(5, 13, 9, .86) calc(var(--col0) + var(--colw) * .42), rgba(5, 13, 9, .56) calc(var(--col0) + var(--colw) * .64), rgba(5, 13, 9, .12) calc(var(--col0) + var(--colw) * .88), rgba(5, 13, 9, .2) 100%),
    linear-gradient(0deg, rgba(5, 13, 9, .92) 0%, rgba(5, 13, 9, .62) 28%, rgba(5, 13, 9, 0) 56%),
    linear-gradient(180deg, rgba(5, 13, 9, .62) 0%, rgba(5, 13, 9, 0) 22%); }
/* toda imagem gerada leva o crédito (some junto com a imagem que falta) */
.act-card__credit { position: absolute; z-index: 3; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(18px, 3.2vh, 36px); }
.act-card__bg.has-missing ~ .act-card__credit { display: none; }
.act-card__txt { position: relative; z-index: 3; height: 100%; display: grid; align-content: end; gap: clamp(14px, 2.2vh, 26px); padding-top: calc(var(--top-safe) + 20px); padding-bottom: clamp(56px, 11vh, 132px); }
.act-card__txt > * { justify-self: start; }
.act-card__num { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.act-card__title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: min(calc((clamp(54px, 6.2vw, 120px)) * var(--ts, 1)), 7.4vw); line-height: .98; letter-spacing: .02em; color: var(--gold); text-wrap: balance; padding-top: .1em; white-space: nowrap; }
.act-card__title-wrap { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)) drop-shadow(0 0 30px rgba(233, 162, 75, .3)); }
.act-card__list { display: flex; flex-wrap: wrap; gap: 8px 10px; max-width: 980px; }
.act-card__list a { display: inline-flex; gap: 8px; align-items: baseline; padding: 8px 15px 6px; border-radius: 999px; text-decoration: none; font-family: var(--f-body); font-weight: 500; font-size: calc(15px * var(--ts, 1)); letter-spacing: .02em; color: var(--cream); background: rgba(7, 18, 13, .66); box-shadow: inset 0 0 0 1px rgba(233, 162, 75, .34); transition: background .2s; }
.act-card__list a:hover { background: rgba(233, 162, 75, .18); }
.act-card__list a small { font-family: var(--f-display); font-weight: 700; font-size: calc(13px * var(--ts, 1)); color: var(--gold); }
/* contador: quatro presentinhos, os já abertos com a tampa solta */
.act-card__count { display: flex; gap: 10px; align-items: flex-end; }
.act-card__g { width: clamp(34px, 2.8vw, 48px); height: clamp(34px, 2.8vw, 48px); display: block; overflow: visible; }
.act-card__g svg { width: 100%; height: 100%; overflow: visible; max-width: none; }
.act-card__g .lid { transform-box: fill-box; transform-origin: 20% 100%; transition: none; }
.act-card__g.is-open .lid { transform: translate(-3px, -7px) rotate(-26deg); }
.act-card__g.is-closed { opacity: .55; }
/* --- o embrulho --- */
.act-card__wrap { position: absolute; inset: 0; z-index: 5; perspective: 2200px; perspective-origin: 50% 45%; pointer-events: none; }
.act-card__flap { position: absolute; top: 0; bottom: 0; width: 50.2%; transform-style: preserve-3d; }
.act-card__flap--l { left: 0; transform-origin: 0 50%; }
.act-card__flap--r { right: 0; transform-origin: 100% 50%; }
.act-card__face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.act-card__face > i { position: absolute; top: 0; bottom: 0; width: 199.2%; background: var(--paper); }
.act-card__flap--l .act-card__face > i { left: 0; }
.act-card__flap--r .act-card__face > i { right: 0; }
.act-card__flap--l .act-card__face--front { box-shadow: inset -14px 0 24px -12px rgba(0, 0, 0, .45); }
.act-card__flap--r .act-card__face--front { box-shadow: inset 14px 0 24px -12px rgba(0, 0, 0, .45); }
.act-card__shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
/* brilho de papel lustroso, correndo na diagonal com a rolagem */
.act-card__sheen { position: absolute; inset: -20% -40%; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .13) 46%, rgba(255, 255, 255, .02) 52%, transparent 60%); }
.act-card__rib { position: absolute; z-index: 2; pointer-events: none; box-shadow: 0 0 22px rgba(0, 0, 0, .38); --rib: clamp(46px, 6.2vmin, 110px); }
.act-card__rib--t, .act-card__rib--b { left: 50%; width: var(--rib); margin-left: calc(var(--rib) / -2); background: linear-gradient(90deg, #8a5418, #e9a24b 16%, #ffe6b0 44%, #f7c978 56%, #e9a24b 82%, #8a5418); }
.act-card__rib--t { top: 0; bottom: 50%; }
.act-card__rib--b { top: 50%; bottom: 0; }
.act-card__rib--l, .act-card__rib--r { top: 50%; height: var(--rib); margin-top: calc(var(--rib) / -2); background: linear-gradient(180deg, #8a5418, #e9a24b 16%, #ffe6b0 44%, #f7c978 56%, #e9a24b 82%, #8a5418); }
.act-card__rib--l { left: 0; right: 50%; }
.act-card__rib--r { left: 50%; right: 0; }
.act-card__rib::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 4px); }
.act-card__rib--l::after, .act-card__rib--r::after { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 4px); }
/* o laço (o GSAP anima a caixa: tranco, voo) com o nó no meio da tela, onde as fitas se cruzam */
.act-card__bowbox { --bw: clamp(220px, 34vmin, 560px); position: absolute; z-index: 3; left: 50%; top: 50%; width: var(--bw); aspect-ratio: 240 / 170; margin: calc(var(--bw) * -.266) 0 0 calc(var(--bw) * -.5); transform-origin: 50% 37.6%; }
.act-card__bow { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--gold); max-width: none; overflow: visible; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45)); }
/* a etiqueta do presente, pendurada no nó por um barbante que passa entre as pontas do laço e balança
   (NL.swing no .act-card__tagswing, pivô no nó). Voa junto com o laço. */
.act-card__tagpos { position: absolute; z-index: -1; left: 50%; top: 37.6%; width: 0; height: 0; }
.act-card__tagswing { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.act-card__tag { position: absolute; left: 0; top: 0; transform: translateX(-50%); --string: calc(var(--bw) * .46); margin-top: var(--string); width: max-content; min-width: 10em; padding: 2.9em 1.5em 1.25em; gap: .3em; font-size: calc(14px * var(--ts, 1)); }
.act-card__tag-k { font-family: var(--f-body); font-weight: 600; font-size: .9em; letter-spacing: .14em; text-transform: uppercase; color: var(--wine); line-height: 1.2; }
.act-card__tag-t { font-family: var(--f-display); font-weight: 600; font-size: 1.75em; letter-spacing: .04em; text-transform: uppercase; color: var(--wine); line-height: 1; padding-top: .1em; }
/* papéis */
.act-card--p2 { --act-velvet: var(--velvet-wine);
  --paper:
    linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .18)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23e9a24b'%3E%3Cpath d='M30 12C30.8 21 33 23.2 42 24C33 24.8 30.8 27 30 36C29.2 27 27 24.8 18 24C27 23.2 29.2 21 30 12Z'/%3E%3Cpath d='M92 66C92.5 71.5 94.5 73.5 100 74C94.5 74.5 92.5 76.5 92 82C91.5 76.5 89.5 74.5 84 74C89.5 73.5 91.5 71.5 92 66Z'/%3E%3Ccircle cx='78' cy='22' r='1.6'/%3E%3Ccircle cx='24' cy='84' r='1.6'/%3E%3Ccircle cx='58' cy='104' r='1.2'/%3E%3Ccircle cx='108' cy='108' r='1.2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 120px,
    var(--velvet-grain), radial-gradient(120% 90% at 30% 20%, #9a1016, #6d080c 70%); }
.act-card--p3 { --act-velvet: var(--velvet-pine);
  --paper:
    linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .2)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132'%3E%3Cg fill='none' stroke='%23e9a24b' stroke-width='1.8' stroke-linecap='round'%3E%3Cg transform='translate(34 34)'%3E%3Cpath d='M0-14V14M-12.1-7L12.1 7M-12.1 7L12.1-7M0-9L-3.5-12.5M0-9L3.5-12.5M0 9L-3.5 12.5M0 9L3.5 12.5'/%3E%3C/g%3E%3Cg transform='translate(100 98) scale(.7)'%3E%3Cpath d='M0-14V14M-12.1-7L12.1 7M-12.1 7L12.1-7M0-9L-3.5-12.5M0-9L3.5-12.5M0 9L-3.5 12.5M0 9L3.5 12.5'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23f7c978'%3E%3Ccircle cx='96' cy='30' r='1.6'/%3E%3Ccircle cx='30' cy='104' r='1.4'/%3E%3Ccircle cx='66' cy='66' r='1.1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 132px 132px,
    var(--velvet-grain), radial-gradient(120% 90% at 30% 20%, #1f4a2b, #10301b 70%); }
.act-card--p4 { --act-velvet: var(--velvet-wine);
  --paper:
    linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .2)),
    repeating-linear-gradient(135deg, transparent 0 26px, rgba(255, 244, 226, .75) 26px 28px, transparent 28px 34px, rgba(247, 201, 120, .8) 34px 35.5px, transparent 35.5px 60px),
    var(--velvet-grain), radial-gradient(120% 90% at 30% 20%, #cf1b22, #9c1016 70%); }
.reduced .act-card__wrap { display: none; }
@media (max-height: 760px) { .act-card__count { display: none; } }

/* ---------- Portão do celular ---------- */
.phone-gate { display: none; }
/* Coluna flexível centrada por margens automáticas: quando não cabe (celular deitado) ela começa do topo e rola */
.is-phone .phone-gate { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px 26px; text-align: center; overflow: auto; background: var(--night); }
.phone-gate > * { flex: none; max-width: 100%; min-width: 0; }
.is-phone body > *:not(.phone-gate):not(svg) { display: none !important; }
.phone-gate__bg { position: fixed; inset: 0; z-index: -1; background: radial-gradient(90% 50% at 50% 0%, rgba(233, 162, 75, .22), transparent 70%), var(--velvet-wine); }
.phone-gate__logo { width: min(58vw, 240px, 30vh); height: auto; margin-top: auto; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .5)); }
.phone-gate__meta { font-size: 15px; color: var(--text-2); max-width: 30ch; }
.phone-gate__t { margin-top: 10px; font-family: var(--f-display); font-weight: 600; text-transform: uppercase; font-size: clamp(18px, 5.6vw, 24px); letter-spacing: .04em; line-height: 1.15; color: var(--gold); }
.phone-gate__p { font-size: 15px; color: var(--text-2); max-width: 32ch; }
.phone-gate__btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; margin-bottom: auto; min-height: 50px; padding: 2px 26px 0; border-radius: 999px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--pine-3); font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; }
.phone-gate__btn svg { width: 18px; height: 18px; margin-top: -2px; }
/* celular deitado (844 × 390): logo à esquerda, aviso e botão à direita — tudo na primeira tela */
@media (orientation: landscape) and (max-height: 500px) {
  .is-phone .phone-gate { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-auto-rows: auto; column-gap: clamp(20px, 5vw, 44px); row-gap: 8px; align-content: center; justify-items: start; text-align: left; padding: 16px clamp(20px, 5vw, 40px); }
  .phone-gate__logo { grid-column: 1; grid-row: 1 / span 5; align-self: center; width: auto; height: min(78vh, 300px); margin: 0; }
  .phone-gate > :not(.phone-gate__logo):not(.phone-gate__bg) { grid-column: 2; }
  .phone-gate__t { margin-top: 4px; }
  .phone-gate__btn { margin: 4px 0 0; }
}

/* ---------- ?diag ---------- */
.nl-diag { position: fixed; left: 8px; bottom: 8px; z-index: 3000; max-width: calc(100vw - 16px); max-height: 60vh; overflow: auto; margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, .82); color: #b9f6c9; font: 11px/1.45 ui-monospace, Menlo, monospace; white-space: pre-wrap; pointer-events: none; }