/* Landing «apple» · hoja propia, independiente del sistema de las demos.
   Propuesta: fondo casi negro cinematográfico, tipografía Plex en cuerpos grandes y un solo acento (el azul del
   mueble) para enlaces y detalles. Solo se animan transform y opacity. */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 100 700; font-display: swap; src: url('/fonts/IBMPlexSans-Variable.ttf') format('truetype-variations'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('/fonts/IBMPlexMono-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Michroma'; font-weight: 400; font-display: swap; src: url('/fonts/Michroma-Regular.ttf') format('truetype'); }

:root {
  --bg: #f3f2ef; --bg-2: #e9e8e3; --ink: #0d0d0f; --muted: #4a4a52; --subtle: #7a7a84; --line: rgba(0,0,0,.12); --line-strong: rgba(0,0,0,.3);
  --glow: rgba(255,255,255,.9); --pill: rgba(255,255,255,.9); --card: rgba(255,255,255,.55); --pattern: url('/u4/patron-suave-negro.svg');
  --accent: #2c56a8;                       /* azul del mueble */
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --brand: 'Michroma', var(--sans);
  --gutter: clamp(20px, 5vw, 72px);
  --display: clamp(56px, 11vw, 160px);
  --h2: clamp(32px, 5vw, 72px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
/* Tema oscuro: mismos tokens; el escenario 3D cambia de color desde el script (setBackdrop) */
:root[data-theme="dark"] {
  --bg: #0f0f11; --bg-2: #16161a; --ink: #f3f2ef; --muted: #b3b3bc; --subtle: #7a7a84; --line: rgba(255,255,255,.12); --line-strong: rgba(255,255,255,.3);
  --glow: rgba(15,15,17,.9); --pill: rgba(20,20,24,.88); --card: rgba(255,255,255,.05); --pattern: url('/u4/patron-suave.svg');
}
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: light; scroll-behavior: auto; overscroll-behavior-y: none; }   /* sin rebote elástico al llegar al final (iOS seguía «bajando» tras el pie) */
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg) var(--pattern) 0 0 / 280px 210px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.03em; line-height: 1; font-kerning: none; }   /* font-kerning: none evita saltos al partir con SplitText */
h1 { font-size: var(--display); font-weight: 600; letter-spacing: -.045em; }
h2 { font-size: var(--h2); line-height: 1.02; }
h3 { font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.02em; line-height: 1.1; }
p { margin: 0; }
a { color: inherit; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--subtle); margin-bottom: 18px; }
.lead { font-size: clamp(18px, 1.6vw, 24px); color: var(--muted); font-weight: 300; max-width: 34ch; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 500; font-size: 16px; transition: transform .25s var(--ease), background .25s var(--ease); }
.btn:hover { transform: translateY(-1px); opacity: .92; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.btn--ghost:hover { background: var(--card); }
.btn--small { padding: 9px 16px; font-size: 14px; }
/* Kickstarter: verde de marca con el wordmark oficial (apple/kickstarter.svg) recoloreado por máscara */
.btn--ks { background: #05ce78; color: #062a1a; gap: 12px; white-space: nowrap; }
.btn--ks:hover { background: #04b96b; }
.btn--big { padding: 18px 30px; font-size: 17px; }
.ks-wordmark { display: inline-block; width: 7.4em; height: .82em; background: currentColor; mask: url('/u4/kickstarter.svg') center / contain no-repeat; -webkit-mask: url('/u4/kickstarter.svg') center / contain no-repeat; vertical-align: -.08em; }
.btn--small .ks-wordmark { width: 7em; height: .8em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Navegación ---- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px var(--gutter); background: none; pointer-events: none; }   /* sin banda: el texto lleva sombra clara y lee sobre el mármol */
.nav > * { pointer-events: auto; }
.nav__brand { font-family: var(--brand); font-size: 15px; letter-spacing: .02em; text-decoration: none; text-shadow: 0 0 14px var(--glow); }
.nav__right { display: flex; align-items: center; gap: 10px; }
.nav__lang { position: relative; pointer-events: auto; }
.nav__langbtn { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--pill); color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 17px; line-height: 1; }   /* redondo como los de sonido y tema; enseña la bandera del idioma actual */
.nav__langmenu { position: absolute; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; min-width: 140px; background: var(--pill); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); z-index: 30; }
.nav__langmenu li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.nav__langmenu .bandera { font-size: 17px; line-height: 1; }
.nav__langmenu li:hover { background: var(--line); }
.nav__langmenu li[aria-selected="true"] { font-weight: 600; }
.nav__sound { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--pill); color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0; }
.nav__sound .eq { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.nav__sound .eq b { display: block; width: 3px; height: 14px; background: currentColor; border-radius: 1.5px; transform-origin: bottom; transition: transform .35s ease, opacity .35s ease; }
.nav__sound .eq b:nth-child(1) { transform: scaleY(.45); }
.nav__sound .eq b:nth-child(2) { transform: scaleY(.85); }
.nav__sound .eq b:nth-child(3) { transform: scaleY(.6); }
.nav__sound.is-playing .eq b { animation: eq 1.1s ease-in-out infinite; }
.nav__sound.is-playing .eq b:nth-child(2) { animation-delay: -.35s; }
.nav__sound.is-playing .eq b:nth-child(3) { animation-delay: -.7s; }
.nav__sound .eq::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px; border-radius: 1px; background: currentColor; box-shadow: 0 0 0 1.5px var(--pill); transform: rotate(-45deg) scaleX(0); transition: transform .3s ease; }
.nav__sound.is-muted { color: var(--subtle); }
.nav__sound.is-muted .eq b { opacity: .55; }
.nav__sound.is-muted .eq::after { transform: rotate(-45deg) scaleX(1); }
@keyframes eq { 0%, 100% { transform: scaleY(.3) } 50% { transform: scaleY(1) } }
@media (prefers-reduced-motion: reduce) { .nav__sound.is-playing .eq b { animation: none; transform: scaleY(.8); } }
.nav__theme { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--pill); color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0; }
.nav__theme i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset -5px -4px 0 0 var(--ink); }   /* luna; en oscuro, sol */
:root[data-theme="dark"] .nav__theme i { box-shadow: none; background: var(--ink); }
.nav__links { display: flex; gap: 28px; font-size: 14px; color: var(--ink); text-shadow: 0 0 14px var(--glow); }
.nav__links a { text-decoration: none; transition: color .2s; }
.nav__links a:hover { color: var(--ink); }
@media (max-width: 720px) { .nav__links { display: none; } }
@media (max-width: 720px) {   /* estrecho: cinco controles en 390 px; todo más junto y más pequeño */
  .nav { padding: 12px 14px; gap: 8px; }
  .nav__right { gap: 6px; }
  .nav__sound, .nav__theme { width: 30px; height: 30px; }
  .nav__langbtn { width: 30px; height: 30px; font-size: 15px; }
  .btn--small.btn--ks { padding: 7px 10px; }
  .btn--small .ks-wordmark { width: 5.6em; height: .68em; }
}

/* ---- 1 · Hero ---- */
.hero { position: relative; }
.hero__stage { position: relative; height: 100vh; height: 100dvh; overflow: clip; background: var(--bg); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__vignette { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 60%, transparent 55%, rgba(243,242,239,.85) 100%); }
.hero__copy { position: absolute; inset: 0; padding: var(--gutter); }
.hero__layer { position: absolute; max-width: 40ch; will-change: transform, opacity; visibility: hidden; opacity: 0; }
.hero__layer::before { content: ''; position: absolute; inset: -12% -18%; z-index: -1; background: radial-gradient(closest-side, rgba(243,242,239,.8), rgba(243,242,239,0)); pointer-events: none; }   /* velo suave tras el texto */
.hero__layer p:last-child { color: var(--muted); font-size: clamp(16px, 1.3vw, 20px); margin-top: 16px; max-width: 36ch; }
.hero__layer--title { left: var(--gutter); top: 50%; transform: translateY(-50%); max-width: none; }
.hero__layer--title .lead { margin-top: 20px; }
.hero__layer--left { left: var(--gutter); bottom: 14vh; }
.hero__layer--right { right: var(--gutter); top: 18vh; text-align: right; }
.hero__layer--right p:last-child { margin-left: auto; }
.hero__layer--bottom { left: 50%; bottom: 12vh; transform: translateX(-50%); text-align: center; }
.hero__layer--bottom p:last-child { margin-inline: auto; }
.hero__cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--subtle); }
.hero__cue span { width: 1px; height: 40px; background: linear-gradient(var(--ink), transparent); animation: cue 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes cueAbajo { 0%, 100% { transform: rotate(45deg) translate(-1px, -1px); opacity: .45 } 50% { transform: rotate(45deg) translate(2px, 2px); opacity: 1 } }
@keyframes cue { 0% { transform: scaleY(0); opacity: 0 } 40% { transform: scaleY(1); opacity: 1 } 100% { transform: scaleY(1) translateY(20px); opacity: 0 } }
.hero__loading { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(0,0,0,.08); transition: opacity .6s var(--ease); }
.hero__loading i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform .3s linear; }
.hero__loading.done { opacity: 0; }

/* ---- 2 · Specs ---- */
.specs { position: relative; background: var(--bg); }
.specs__pin { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 12vh var(--gutter); }
.specs__title { max-width: 30ch; }
.specs__title .line { overflow: clip; }
.specs__grid { list-style: none; margin: 8vh 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid var(--line); }
.spec { padding-top: 24px; will-change: transform, opacity; }
.spec b { display: block; font-family: var(--mono); font-weight: 500; font-size: clamp(36px, 4.4vw, 64px); letter-spacing: -.02em; line-height: 1; }
.spec span { display: block; margin-top: 8px; font-size: 15px; color: var(--muted); }
.spec small { display: block; margin-top: 14px; font-size: 14px; color: var(--subtle); line-height: 1.5; }
@media (max-width: 899px) { .specs__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; margin-top: 40px; } .specs__pin { min-height: 0; padding: 6vh var(--gutter) 5vh; } }   /* estrecho: sin fijar, sin hueco */
@media (max-width: 720px) {   /* vertical: el frame ocupa la parte baja (ver encaje en apple.js) y todas las capas van arriba */
  .hero__layer, .hero__layer--title, .hero__layer--left, .hero__layer--right, .hero__layer--bottom { left: var(--gutter); right: var(--gutter); top: 13vh; bottom: auto; transform: none; text-align: left; max-width: none; }
  .hero__layer--right p:last-child, .hero__layer--bottom p:last-child { margin-inline: 0; }
  .hero__layer::before { inset: -10% -8%; }
}

/* ---- 3 · Materiales ---- */
.materials { position: relative; background: var(--bg-2); padding-top: 14vh; height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 6vh; overflow: clip; }
.materials__head { padding: 0 var(--gutter); }
.materials__track { display: flex; gap: 24px; padding: 0 var(--gutter); will-change: transform; }
.mat { flex: 0 0 min(520px, 78vw); padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.mat__n { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .14em; }
.mat h3 { margin-top: 48px; }
.mat p { margin-top: 14px; color: var(--muted); font-size: 16px; max-width: 34ch; }
@media (max-width: 899px) {   /* estrecho: sin fijar, tarjetas en columna */
  .materials { height: auto; padding: 14vh var(--gutter); gap: 32px; }
  .materials__head { padding: 0; }
  .materials__track { flex-direction: column; padding: 0; }
  .mat { flex: none; }
}

/* ---- 1 · Historia en vivo (visor 3D fijado, marcas de línea) ---- */
.story { position: relative; --stops: 8; height: calc(100vh + (var(--stops) - 1) * 120vh); height: calc(100svh + (var(--stops) - 1) * 120svh); }   /* 120 vh de scroll por parada; --stops lo pone el script. svh y no dvh: dvh cambia al esconderse la barra del navegador y aquí va multiplicado por 8 */
.story__pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: clip; background: var(--bg); }
.story__stage { position: absolute; inset: 0; }
.story__viewer { position: absolute; inset: 0; }
.story__viewer canvas { display: block; width: 100%; height: 100%; }
/* Viñeteado sobre el entorno HDRI: bordes más oscuros para que el texto y las marcas lean */
.story__vignette { display: none; }   /* sin velo: la foto se ve entera; el texto lleva sombra clara para leer */
.story__viewer { opacity: 0; transition: opacity .9s var(--ease); }
.story__stage.is-ready .story__viewer { opacity: 1; }   /* el visor aparece ya encuadrado, sin póster que salte */
.story__stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(var(--load, 0)); transform-origin: left; transition: transform .3s linear; }
.story__stage.is-ready::after { display: none; }
.story__copy { position: absolute; inset: 0; padding: var(--gutter); pointer-events: none; }
.story__layer { position: absolute; left: var(--gutter); top: 16vh; max-width: clamp(300px, 31vw, 470px); will-change: transform, opacity; visibility: hidden; opacity: 0; text-shadow: 0 0 18px var(--glow), 0 0 40px var(--glow); }
.story__layer p:last-child { color: var(--muted); font-size: clamp(16px, 1.3vw, 20px); margin-top: 16px; max-width: 36ch; }
.story__layer--title { top: 50%; transform: translateY(-50%); max-width: none; pointer-events: auto; }
.story__layer--cta { top: 46%; transform: translateY(-50%); pointer-events: auto; }   /* algo más arriba: los dos botones caben holgados */
.story__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.story__powerwrap { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 2; }   /* centrado abajo, donde luego aparece «Desliza» */
.story__power { gap: 12px; }
.story__powerwrap { transition: opacity .5s var(--ease); }
.story__powerwrap.is-on { opacity: 0; pointer-events: none; }   /* encendida: el botón se retira; el sonido se controla desde la cabecera */
.story__power:disabled { opacity: .7; cursor: wait; }
/* Bloqueo hasta encender: sin scroll (también táctil) y sin la señal «Desliza» */
html.is-locked { overscroll-behavior: none; }   /* el bloqueo real lo hace el script (Lenis parado, rueda, táctil y teclas anuladas) */
.power-ic { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; position: relative; }
.power-ic::after { content: ''; position: absolute; left: 50%; top: -5px; width: 2px; height: 9px; background: currentColor; transform: translateX(-50%); }
.story__layer--title .lead { margin-top: 20px; }
/* Marcas: punto en el ancla proyectada, línea y etiqueta; el script solo mueve el contenedor con translate */
.story__marks { position: absolute; inset: 0; pointer-events: none; }
.mark { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.mark__dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: var(--pill); box-shadow: 0 0 0 6px var(--line); }
.mark__line { position: absolute; left: 0; top: 0; width: var(--len); height: 1.5px; background: linear-gradient(90deg, var(--ink), var(--line-strong)); transform-origin: 0 50%; transform: rotate(var(--ang)); }
.mark__label { position: absolute; left: var(--dx); top: var(--dy); transform: translate(calc(12px + var(--sx, 0px)), calc(-50% + var(--sy, 0px))); white-space: nowrap; font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: .03em; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--pill); color: var(--ink); box-shadow: 0 6px 24px rgba(0,0,0,.14); }
.mark--left .mark__label { transform: translate(calc(-100% - 12px + var(--sx, 0px)), calc(-50% + var(--sy, 0px))); }
.mark--down .mark__label { transform: translate(calc(-50% + var(--sx, 0px)), calc(12px + var(--sy, 0px))); }   /* centrada bajo el punto, línea vertical */
.mark--up .mark__label { transform: translate(calc(-50% + var(--sx, 0px)), calc(-100% - 12px + var(--sy, 0px))); }
@media (max-width: 899px) {   /* estrecho: máquina en la mitad superior, texto debajo; etiquetas más compactas */
  /* La máquina manda: se le da más alto. El texto ocupa el resto y va CENTRADO
     en vertical: con el contenido pegado arriba, las paradas de copy corto
     dejaban un cuarto de pantalla en blanco por debajo. */
  .story__stage { inset: 0 0 auto 0; height: 66vh; height: 66dvh; }
  .story__vignette { display: none; }
  .story__copy { inset: auto 0 0 0; height: 34vh; height: 34dvh;
    padding: 2vh var(--gutter) calc(var(--gutter) + 8px); display: grid; align-items: center; }
  .story__layer, .story__layer--title, .story__layer--cta { left: var(--gutter); right: var(--gutter);
    top: auto; bottom: auto; transform: none; max-width: none; text-shadow: none;
    grid-area: 1 / 1; align-self: center; }
  .story__cta { margin-top: 18px; }
  .story__layer--title h1 { font-size: clamp(52px, 16vw, 88px); }
  /* el copy heredaba tamaños pensados para escritorio y obligaba a reservarle
     casi la mitad de la pantalla; compactado, el render se queda con el resto */
  .story__layer h2 { font-size: clamp(26px, 7.6vw, 38px); }
  .story__layer p:last-child { font-size: 14px; line-height: 1.45; margin-top: 10px; }
  .story__layer .eyebrow { margin-bottom: 10px; }
  .mark__label { font-size: 11px; padding: 6px 9px; white-space: normal; width: max-content; max-width: 42vw; line-height: 1.25; border-radius: 11px; }   /* estrechas: la columna de etiquetas llegaba a tapar el 62% del mueble */
  .story__powerwrap { bottom: -25px; gap: 14px; }

  /* la parada de cierre es la que más contenido lleva (titular, párrafo largo y
     botón): compacta para caber en el alto del copy sin invadir el render */
  .story__layer--cta > p { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.45; }
  .story__layer--cta h2 { font-size: clamp(28px, 8vw, 40px); }
  .story__layer--cta .story__cta { margin-top: 12px; }
  /* el botón grande es de escritorio: en móvil se come el alto que necesita el texto */
  .story__layer--cta .btn--big { height: 46px; padding: 0 20px; font-size: 14px; }
  /* Los respiros de escritorio (22vh y 14vh) en vertical son media pantalla en
     blanco: 315 px de aire en la sección final y 200 en materiales. */
  .materials { padding-top: 5vh; padding-bottom: 5vh; }
}

/* ---- CTA y pie ---- */
.kit { padding: 22vh var(--gutter); background: var(--bg-2); text-align: center; display: flex; flex-direction: column; align-items: center; }
.kit h2 { max-width: 18ch; }
.kit .lead { margin-top: 24px; max-width: 44ch; }
.kit__cta { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
.kit__note { margin-top: 28px; font-family: var(--mono); font-size: 12px; color: var(--subtle); letter-spacing: .06em; }
.foot { display: flex; justify-content: space-between; padding: 28px var(--gutter); font-family: var(--mono); font-size: 12px; color: var(--subtle); border-top: 1px solid var(--line); }
[data-reveal] { will-change: transform, opacity; }

/* ---- Movimiento reducido / estático ---- */
[data-motion="reduced"] .hero__cue span { animation: none; }
[data-motion="static"] .story__vignette { display: none; }
[data-motion="static"] .hero__stage { height: auto; min-height: 70vh; padding-top: 84px; }   /* bajo la cabecera fija */
[data-motion="static"] .hero__canvas { position: relative; aspect-ratio: 16 / 9; height: auto; }
[data-motion="static"] .hero__copy { position: static; display: grid; gap: 40px; }
[data-motion="static"] .hero__layer { position: static; transform: none; text-align: left; max-width: 44ch; visibility: visible; opacity: 1; }
[data-motion="static"] .hero__layer p:last-child { margin-left: 0; }
[data-motion="static"] .hero__vignette, [data-motion="static"] .hero__cue { display: none; }
[data-motion="static"] .specs__pin { min-height: auto; padding: 14vh var(--gutter); }
[data-motion="static"] .materials { height: auto; padding: 14vh var(--gutter); }
[data-motion="static"] .materials__track { flex-wrap: wrap; padding: 0; }
[data-motion="static"] .story { height: auto; }
[data-motion="static"] .story__pin { position: static; height: auto; }
[data-motion="static"] .story__stage { position: relative; height: 60vh; }
[data-motion="static"] .story__stage::after, [data-motion="static"] .story__marks { display: none; }
[data-motion="static"] .story__copy { position: static; display: grid; gap: 48px; height: auto; }
[data-motion="static"] .story__layer, [data-motion="static"] .story__layer--title { position: static; transform: none; visibility: visible; opacity: 1; max-width: 44ch; }

/* ---- Modo de juego («Pruébala»): elegir en la marquesina y jugar en el monitor, dentro de la historia ---- */
#ejs-host { position: fixed; left: -3000px; top: 0; width: 640px; height: 480px; }   /* el emulador vive fuera de pantalla: su canvas es la textura del monitor */
.story__copy { transition: opacity .6s var(--ease); }
html.is-playing .story__copy { opacity: 0; pointer-events: none; }   /* el texto se funde al entrar y vuelve al salir, a la vez que la cámara */
html.is-playing .story__marks, html.is-playing .story__nav, html.is-playing .story__powerwrap { visibility: hidden; }
.play { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.play__bar { position: absolute; left: 50%; top: 76px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: auto; text-align: center; padding: 12px 18px; border-radius: 18px; background: var(--pill); border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0,0,0,.12); max-width: min(92vw, 720px); }
.play [hidden] { display: none !important; }   /* los bloques con display propio respetan hidden */
.play__msg { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-shadow: 0 0 12px var(--glow); }
.play__games { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* Leyenda de teclas: teclas dibujadas; las de los botones llevan debajo el punto con el color del botón del mueble */
.play__keys { display: flex; gap: 22px; flex-wrap: nowrap; justify-content: center; align-items: flex-start; }
@media (max-width: 899px) { .play__keys { flex-wrap: wrap; gap: 14px; } }
.kb { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; justify-content: center; }
.kb small { flex-basis: 100%; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); margin-top: 2px; }   /* cada rótulo centrado bajo sus teclas */
.kb__cap { position: relative; min-width: 30px; height: 30px; padding: 0 8px; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-bottom-width: 3px; border-radius: 6px; }
.kb__cap--wide { padding: 0 10px; }
.kb__cap--btn { margin-bottom: 14px; }
.kb__cap--btn i { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--c); color: #fff; font: 700 9px/14px var(--sans); text-align: center; font-style: normal; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.play .pad { display: none; }
@media (max-width: 899px) {
  html.is-playing .story__stage { height: calc(100vh - var(--mpad)); height: calc(100dvh - var(--mpad)); }
  html.is-playing .story__copy { display: none; }
  .play__bar { top: 64px; width: calc(100% - 32px); }
  :root { --mpad: calc(48.1vw + 24px + env(safe-area-inset-bottom)); }
  html.is-playing .play .pad { display: grid; grid-template-rows: auto auto; align-content: start; align-items: start; gap: 6px; position: fixed; left: 0; right: 0; bottom: 0; height: var(--mpad); padding: 6px 0 env(safe-area-inset-bottom); box-sizing: border-box; z-index: 5; background: var(--bg); border-top: 1px solid var(--line); pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .play .aux { position: relative; width: 100%; aspect-ratio: 854 / 124; background: url(/art/aux.png) center / 100% 100% no-repeat; }
  .play .aux .cap { top: 48%; width: 11%; }
  .play .aux .cap::before { inset: 15%; }
  .play .aux .b1P { left: 7.2%; --c: #e0332b; } .play .aux .bCoin { left: 38.35%; --c: #f2c230; } .play .aux .bBack { left: 92.7%; --c: #2c56a8; }
  .play .aux .cred { position: absolute; left: 70.5%; top: 49.5%; width: 10.4%; height: 61%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 2%; background: #160203; border-radius: 3px; box-shadow: inset 0 0 6px rgba(0,0,0,.8); }
  .play .aux .cred svg { height: 68%; width: auto; overflow: visible; }
  .play .aux .cred polygon { fill: #3a0608; }
  .play .aux .cred polygon.on { fill: #ff3a2a; filter: drop-shadow(0 0 2px rgba(255, 58, 42, .9)); }
  .play .cpo { position: relative; width: 100%; aspect-ratio: 1192 / 400; background: url(/art/CPO.png) center / 100% 100% no-repeat; }
  .play .dpad { position: absolute; left: 19.5%; top: 45.75%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; }
  .play .dpad .ball { position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #ffb3ad, #e0332b 42%, #8e1810 95%); box-shadow: 0 5px 8px rgba(0,0,0,.5); transform: translate(calc(-50% + var(--kx, 0) * 24%), calc(-50% + var(--ky, 0) * 24%)); transition: transform 70ms; }
  .play .cap { position: absolute; width: 14%; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; }
  .play .cap::before { content: ''; position: absolute; inset: 9.5%; border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 40%), var(--c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.3), 0 2px 3px rgba(0,0,0,.5); transition: transform 60ms, box-shadow 60ms; }
  .play .cap.down::before { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.3), 0 0 0 rgba(0,0,0,.5); }
  .play .cpo .bA { left: 41.95%; top: 62.5%; --c: #e0332b; } .play .cpo .bB { left: 55.1%; top: 45.75%; --c: #f2c230; }
  .play .cpo .bC { left: 69.6%; top: 45.75%; --c: #3fa35c; } .play .cpo .bD { left: 84.1%; top: 45.75%; --c: #2c56a8; }
}

/* ---- cabecera igual que la del resto de la web (/store) ---- */
/* el logotipo sustituye al texto: es el mismo lockup que usan store y comunidad */
.nav__brand{display:flex;align-items:center}
.nav__marca{height:26px;display:block}
/* el lockup es blanco: sobre el tema claro de la landing hay que invertirlo */
html[data-theme="light"] .nav__marca{filter:invert(1)}
@media (max-width:720px){
  .nav__marca{height:20px}
}

/* Respiros de la sección final en vertical. Va al final del fichero a propósito:
   la regla .kit se declara después del bloque @media de arriba y, a igual
   especificidad, ganaba ella. */
@media (max-width: 899px) {
  .kit { padding: 6vh var(--gutter) 8vh; }
  .kit .lead { margin-top: 18px; }
  .kit__cta { margin-top: 26px; }
  .kit__note { margin-top: 20px; }
}

/* ---- Navegación por paradas ----
   Sustituye al aviso de «desliza»: dos botones que llevan al punto exacto de la
   parada anterior o siguiente. Se colocan en la línea que separa el render del
   texto, en el mismo sitio que el botón de encender (nunca coinciden: el de
   encender solo se ve antes de arrancar). */
.story__nav { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%);   /* ancho: donde estaba el botón de encender. Estrecho (abajo): sobre la línea render/texto */
  z-index: 3; display: flex; gap: 8px; }
.story__nav-btn { width: 42px; height: 42px; border-radius: 999px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--pill); border: 1px solid var(--line); color: var(--ink);
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.story__nav-btn:hover:not(:disabled) { background: var(--ink); color: var(--pill); }
.story__nav-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 899px) { .story__nav { bottom: -21px; } }
html.is-locked .story__nav { visibility: hidden; }
/* modo captura (model-src/capturar.mjs): solo el visor, sin texto ni controles encima */
html.is-captura .nav, html.is-captura .story__copy, html.is-captura .story__marks, html.is-captura .story__nav, html.is-captura .story__powerwrap, html.is-captura .story__stage::after { display: none !important; }
html.is-captura .story__viewer { opacity: 1 !important; transition: none !important; }
/* pantalla en vivo sobre los fotogramas: el visor recorta al borde del escenario, que el vídeo no asome por debajo */
.story__viewer { overflow: hidden; isolation: isolate; }   /* contexto de apilamiento propio: el lienzo (z 2) y el vídeo (z 1) no tapan etiquetas ni textos, que van después en el DOM */
.fotogramas__pantalla { z-index: 1; transition: opacity .35s var(--ease); }
html.is-playing .story__nav { visibility: hidden; }