/* Campo Vivo · propuesta "línea": la historia que se revela al bajar por la portada (entre el héroe y "No es un audio de YouTube").
   Un escenario fijo (sticky) con la arena detrás y cinco escenas de texto. El escenario queda en la capa 0 y el texto en la 1; no hay
   capas negativas. Usa los tokens de linea.css y sus clases (titulo-2, texto-1, boton), sin escala propia.
   Primero el texto, después la animación (con movimiento permitido y el guion listo, ver el bloque de más abajo): cada tarjeta llega
   sola, a media pantalla, sobre un escenario oscuro y quieto; después baja a su lugar mientras el escenario se aclara y la arena corre.
   pelicula.js escribe tres números (--op y --llega en cada tarjeta, --velo en el escenario) y aquí se decide qué hacen. Con "reducir
   movimiento" (o sin script) nada de eso existe: cada tarjeta se pega en su escena y todas se leen, como una página normal.
   El morado no aparece aquí: lo pone la arena (el halo, los anillos y la figura de 777 Hz), que es el sonido de Campo Vivo. El oro es
   luz y material, nunca un estado (ver linea.css): el filo de arriba de cada tarjeta y de cada mando, y el resplandor del póster. */

/* overflow: clip recorta el escenario a la película sin romper position: sticky (con overflow: hidden, la película sería su propio
   contenedor de desplazamiento y el escenario ya no quedaría fijo a la ventana). Con su margen negativo, el escenario asomaría hasta
   una pantalla por debajo, detrás de "No es un audio de YouTube": el recorte lo evita.
   overflow-anchor: none: el navegador no "persigue" el texto de las tarjetas, que se pegan y se sueltan al desplazar. */
.pelicula {
  position: relative;
  isolation: isolate;
  overflow: clip;
  overflow-anchor: none;
  background: var(--negro);
}
/* Donde la película se junta con el héroe, el borde de la arena se funde con el negro: no hay un corte horizontal. Va con la película
   (se aleja al bajar), no con el escenario fijo. */
.pelicula::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 18vh;
  height: 18svh;
  background: linear-gradient(180deg, var(--negro) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.pelicula__escenario {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  overflow: hidden;
  background: var(--negro);
}
.pelicula__escenario canvas { display: block; width: 100%; height: 100%; }
/* La arena llega con un fundido: el póster se apaga y su lienzo se enciende (solo con movimiento permitido: linea.css lo apaga si no). */
.pelicula[data-motor] .pelicula__escenario canvas { animation: pelicula-aparece 1.2s var(--curva) both; }
@keyframes pelicula-aparece { from { opacity: 0; } to { opacity: 1; } }

/* El póster: lo que se ve mientras llega la arena y lo que queda si no hay WebGL. Es CSS puro (negro, un resplandor de grafito, polvo
   de arena suelto en una baldosa de 640 px y, por escena, la figura de la placa), siguiendo data-arena (la escena que muestra el escenario). El resplandor va a la
   derecha en pantalla ancha y arriba en celular, como la composición de la arena. */
.pelicula__poster {
  --px: 72%;
  --py: 54%;
  --oro-poster: 0.045;   /* el charco de luz dorada detrás de la arena: tenue mientras hay tensión (escenas 0 a 3), más cálido y pleno con la calma */
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cg fill='%23eee6d8'%3E%3Ccircle cx='281.6' cy='167.9' r='1.0' fill-opacity='0.25'/%3E%3Ccircle cx='463.8' cy='253.5' r='0.9' fill-opacity='0.14'/%3E%3Ccircle cx='95.3' cy='410.8' r='0.8' fill-opacity='0.20'/%3E%3Ccircle cx='627.5' cy='568' r='1.0' fill-opacity='0.29'/%3E%3Ccircle cx='332.3' cy='514.1' r='0.8' fill-opacity='0.24'/%3E%3Ccircle cx='355.8' cy='531.6' r='0.7' fill-opacity='0.20'/%3E%3Ccircle cx='427.1' cy='546.9' r='1.0' fill-opacity='0.24'/%3E%3Ccircle cx='131.9' cy='421.8' r='0.8' fill-opacity='0.22'/%3E%3Ccircle cx='69.8' cy='14.2' r='0.7' fill-opacity='0.11'/%3E%3Ccircle cx='243.7' cy='140.6' r='0.7' fill-opacity='0.24'/%3E%3Ccircle cx='503.5' cy='235.2' r='1.3' fill-opacity='0.34'/%3E%3Ccircle cx='86.1' cy='248.6' r='1.2' fill-opacity='0.12'/%3E%3Ccircle cx='133.4' cy='343.6' r='0.8' fill-opacity='0.21'/%3E%3Ccircle cx='12.5' cy='27.9' r='0.9' fill-opacity='0.19'/%3E%3Ccircle cx='478.9' cy='47.3' r='0.6' fill-opacity='0.31'/%3E%3Ccircle cx='284.6' cy='567.3' r='1.3' fill-opacity='0.35'/%3E%3Ccircle cx='264.2' cy='473.4' r='1.3' fill-opacity='0.12'/%3E%3Ccircle cx='267.6' cy='441.1' r='0.6' fill-opacity='0.19'/%3E%3Ccircle cx='278.5' cy='291.8' r='0.6' fill-opacity='0.31'/%3E%3Ccircle cx='255.9' cy='406.1' r='1.1' fill-opacity='0.16'/%3E%3Ccircle cx='454.7' cy='309.6' r='0.7' fill-opacity='0.32'/%3E%3Ccircle cx='481.5' cy='491.5' r='1.0' fill-opacity='0.23'/%3E%3Ccircle cx='417.5' cy='206.8' r='0.7' fill-opacity='0.11'/%3E%3Ccircle cx='28.4' cy='33.9' r='0.9' fill-opacity='0.11'/%3E%3Ccircle cx='220.8' cy='91' r='0.9' fill-opacity='0.27'/%3E%3Ccircle cx='510.4' cy='256.5' r='0.9' fill-opacity='0.14'/%3E%3Ccircle cx='128.5' cy='237.6' r='0.7' fill-opacity='0.31'/%3E%3Ccircle cx='151.4' cy='95' r='0.6' fill-opacity='0.13'/%3E%3Ccircle cx='327.1' cy='639.7' r='0.6' fill-opacity='0.13'/%3E%3Ccircle cx='492.5' cy='69.2' r='1.0' fill-opacity='0.13'/%3E%3Ccircle cx='407.6' cy='90.9' r='1.2' fill-opacity='0.31'/%3E%3Ccircle cx='221.8' cy='196.9' r='0.6' fill-opacity='0.15'/%3E%3Ccircle cx='575.6' cy='110.8' r='0.7' fill-opacity='0.28'/%3E%3Ccircle cx='55.9' cy='126.9' r='1.0' fill-opacity='0.29'/%3E%3Ccircle cx='547.8' cy='133.4' r='0.7' fill-opacity='0.34'/%3E%3Ccircle cx='446.6' cy='161.7' r='0.6' fill-opacity='0.22'/%3E%3Ccircle cx='226.9' cy='333.3' r='0.6' fill-opacity='0.12'/%3E%3Ccircle cx='487.7' cy='507.1' r='0.6' fill-opacity='0.16'/%3E%3Ccircle cx='571.3' cy='427.1' r='0.6' fill-opacity='0.16'/%3E%3Ccircle cx='50.9' cy='269.6' r='0.7' fill-opacity='0.24'/%3E%3Ccircle cx='105.6' cy='151.5' r='0.8' fill-opacity='0.32'/%3E%3Ccircle cx='233.4' cy='561.9' r='1.2' fill-opacity='0.12'/%3E%3Ccircle cx='368.9' cy='169.9' r='0.9' fill-opacity='0.24'/%3E%3Ccircle cx='581.3' cy='186.6' r='0.7' fill-opacity='0.30'/%3E%3Ccircle cx='477.2' cy='57.4' r='0.6' fill-opacity='0.15'/%3E%3Ccircle cx='497.5' cy='21' r='1.4' fill-opacity='0.34'/%3E%3Ccircle cx='598.8' cy='471.3' r='0.7' fill-opacity='0.22'/%3E%3Ccircle cx='555.5' cy='264.5' r='0.7' fill-opacity='0.18'/%3E%3Ccircle cx='470.2' cy='322.9' r='0.7' fill-opacity='0.32'/%3E%3Ccircle cx='113.8' cy='451.8' r='0.9' fill-opacity='0.21'/%3E%3Ccircle cx='312.8' cy='114.5' r='0.6' fill-opacity='0.25'/%3E%3Ccircle cx='67' cy='104.8' r='0.8' fill-opacity='0.27'/%3E%3Ccircle cx='489.2' cy='603.4' r='0.8' fill-opacity='0.15'/%3E%3Ccircle cx='617.1' cy='128.5' r='0.7' fill-opacity='0.25'/%3E%3Ccircle cx='520.1' cy='353.5' r='1.4' fill-opacity='0.34'/%3E%3Ccircle cx='195.6' cy='314.7' r='0.6' fill-opacity='0.33'/%3E%3Ccircle cx='272.6' cy='181.7' r='0.8' fill-opacity='0.28'/%3E%3Ccircle cx='365.6' cy='479' r='0.7' fill-opacity='0.25'/%3E%3Ccircle cx='20.9' cy='396.6' r='1.1' fill-opacity='0.19'/%3E%3Ccircle cx='153.5' cy='107.6' r='0.7' fill-opacity='0.33'/%3E%3Ccircle cx='123' cy='102.7' r='0.7' fill-opacity='0.13'/%3E%3Ccircle cx='242.9' cy='199.9' r='1.1' fill-opacity='0.23'/%3E%3Ccircle cx='75.9' cy='584.5' r='0.8' fill-opacity='0.15'/%3E%3Ccircle cx='377.3' cy='195' r='0.8' fill-opacity='0.15'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 640px 640px,
    radial-gradient(46% 52% at var(--px) var(--py), rgba(238, 230, 216, 0.09), rgba(238, 230, 216, 0) 72%),
    radial-gradient(60% 56% at var(--px) var(--py), rgba(var(--oro-rgb), var(--oro-poster)), rgba(var(--oro-rgb), 0) 74%),
    radial-gradient(90% 90% at var(--px) var(--py), var(--grafito), var(--negro) 72%);
  transition: opacity 1.2s var(--curva);
}
.pelicula[data-motor] .pelicula__poster { opacity: 0; }
/* El cuerpo (escenas 2 a 4): un resplandor alto y angosto sobre el del fondo. */
.pelicula__poster::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(20% 58% at var(--px) var(--py), rgba(238, 230, 216, 0.12), rgba(238, 230, 216, 0) 74%);
  transition: opacity 0.9s var(--curva);
}
/* La placa (escena 5): el cuadrado de la figura, apenas trazado. */
.pelicula__poster::after {
  content: "";
  position: absolute;
  left: var(--px);
  top: var(--py);
  width: min(38vh, 38svh, 34vw);
  aspect-ratio: 1;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(var(--oro-canto-rgb), 0.22), var(--oro-filo);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.9s var(--curva);
}
.pelicula[data-arena="2"] .pelicula__poster::before,
.pelicula[data-arena="3"] .pelicula__poster::before,
.pelicula[data-arena="4"] .pelicula__poster::before { opacity: 1; }
.pelicula[data-arena="5"] .pelicula__poster::after { opacity: 1; }
.pelicula[data-arena="4"] .pelicula__poster,
.pelicula[data-arena="5"] .pelicula__poster { --oro-poster: 0.1; }

/* ── Las escenas ──────────────────────────────────────────────
   Sus alturas (en pantallas) son el tiempo que dura cada una al bajar. Con movimiento permitido cada una trae primero su texto solo y
   después su animación (ver TIEMPOS en pelicula.js: la 1 deja antes la placa sola un buen rato y se vuelve palabras despacio; la 3
   guarda la alarma, el mar y su orilla), así que miden más: unas diez y media en total; con "reducir movimiento" no hay nada de eso y
   vuelven a sus seis y media. Cada escena guarda su tarjeta de texto, que con "reducir movimiento" se pega a media altura mientras la
   arena cambia de forma. */
.pelicula__escena {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  padding-inline: var(--margen);
}
.pelicula__escena[data-escena="1"] { min-height: 358vh; min-height: 358svh; }
.pelicula__escena[data-escena="2"] { min-height: 148vh; min-height: 148svh; }
.pelicula__escena[data-escena="3"] { min-height: 240vh; min-height: 240svh; }
.pelicula__escena[data-escena="4"] { min-height: 143vh; min-height: 143svh; }
.pelicula__escena[data-escena="5"] { min-height: 158vh; min-height: 158svh; }
@media (prefers-reduced-motion: reduce) {
  .pelicula__escena[data-escena="1"] { min-height: 110vh; min-height: 110svh; }
  .pelicula__escena[data-escena="2"] { min-height: 100vh; min-height: 100svh; }
  .pelicula__escena[data-escena="3"] { min-height: 140vh; min-height: 140svh; }
  .pelicula__escena[data-escena="4"] { min-height: 150vh; min-height: 150svh; }
  .pelicula__escena[data-escena="5"] { min-height: 130vh; min-height: 130svh; }
}

/* El fin: el escenario se funde con el negro de "No es un audio de YouTube", sin corte. */
.pelicula__fin {
  position: relative;
  z-index: 1;
  height: 14vh;
  height: 14svh;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--negro) 88%);
}

/* ── La tarjeta de texto ──────────────────────────────────────
   Pantalla ancha: una columna a la izquierda, pegada a media altura, sobre un degradado lateral del escenario. La arena va a la
   derecha y le deja libre ese lado. */
.pelicula__tarjeta {
  position: sticky;
  top: 50vh;
  top: 50svh;
  translate: 0 -50%;
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 34rem;
  margin-top: 30vh;
  margin-top: 30svh;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.9);
}
.pelicula__tarjeta h2,
.pelicula__tarjeta p { margin: 0; }
/* El antetítulo ("1 · El ruido") va en niebla (sobre la arena el gris no se lee) y en la medida de un párrafo corto: la letra de la
   historia es la más grande del sitio porque aquí leer es lo que importa. Lleva arriba el filo de luz dorada de la tarjeta: una línea
   de 1 px que brilla a la izquierda y se pierde hacia la derecha (el borde de arriba de la tarjeta, iluminado). */
.pelicula__etiqueta {
  padding-top: 14px;
  border-top: 1px solid transparent;
  border-image: var(--brillo-oro) 1;
  font-size: var(--t-3);
  line-height: var(--l-3);
  color: var(--niebla);
  letter-spacing: 0.04em;
}
.pelicula__nota { font-size: var(--t-3); line-height: var(--l-3); }
/* Los párrafos de la tarjeta van equilibrados (como los de las secciones): ninguna línea final con una palabra suelta. */
.pelicula__tarjeta .texto-1,
.pelicula__tarjeta .texto-4 { text-wrap: balance; }
.pelicula__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* Escena 3: dos líneas; la que toca (la alarma y después el mar) se enciende en arena y lleva una marca al lado. */
.pelicula__momentos { display: grid; gap: 12px; }
.pelicula__momentos p {
  padding-left: 16px;
  border-left: 2px solid transparent;
  transition: color var(--mov-medio) var(--curva), border-color var(--mov-medio) var(--curva);
}
.pelicula[data-listo] .pelicula__momentos p { color: var(--gris); }
.pelicula[data-listo] .pelicula__momentos p.activo { color: var(--blanco); border-left-color: var(--blanco); }

/* Escena 3: "Parar alarma". Un botón discreto (el de siempre, con el filo de luz) que solo existe mientras suena la alarma
   (pelicula.js le pone .visible); fuera de ese momento no se ve ni recibe el foco. Va pegado a la tarjeta y no la empuja: en pantalla
   ancha, debajo del texto; en celular, arriba a la derecha, sobre el texto, donde el pulgar llega. */
.pelicula__parar {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 16px;
  visibility: hidden;
  box-shadow: var(--oro-filo), 0 0 0 1px var(--linea-tenue);
}
.pelicula__parar.visible { visibility: visible; }

/* Antes de que el guion arranque (o si no hay script) todas las tarjetas se leen. Con el guion y movimiento permitido, la tarjeta de
   cada escena llega, se lee sola y baja a su lugar, atada al desplazamiento (primero el texto y después la animación); con "reducir
   movimiento" ninguna espera: todas quedan a la vista, quietas, y el escenario no se oscurece.
   Con movimiento, las tarjetas son fijas sobre la ventana: pelicula.js escribe --op (qué tan visible) y --llega (0 a media pantalla,
   1 en su lugar) en cada una, y las secciones solo dan el largo del desplazamiento. */
@media (prefers-reduced-motion: no-preference) {
  /* El velo del escenario: se oscurece mientras se lee la tarjeta sola y se aclara al bajar (--velo, de 0 a 1). Es negro sobre la arena:
     un cambio lento atado al desplazamiento, sin destellos. */
  .pelicula__escenario::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--negro);
    opacity: var(--velo, 0);
    pointer-events: none;
    will-change: opacity;
  }
  .pelicula[data-listo] .pelicula__tarjeta {
    --op: 0;
    --llega: 1;
    --subir: 0px;
    --pad-arriba: 80px;
    --pad-abajo: calc(24px + env(safe-area-inset-bottom, 0px));
    --zona-arriba: calc(var(--cabecera) + env(safe-area-inset-top, 0px) + 60px);   /* lo que tapan la cabecera y los mandos */
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1;
    width: auto;
    max-width: none;
    margin: 0;
    padding: var(--pad-arriba) var(--margen) var(--pad-abajo);
    /* A media pantalla cuando llega es 0 y abajo cuando es 1. El 100% es el alto de la propia tarjeta; se descuenta lo que su relleno de
       arriba pesa más que el de abajo, para que sea el texto, y no la caja, lo que quede en el centro, y --subir lo lleva un poco más
       arriba (la de la placa). Si el texto es tan alto que ahí se metería bajo la cabecera o los mandos, queda lo más arriba que ellos
       dejan (el segundo número del max). */
    translate: 0 calc(min(0px, max((100% - 100vh) / 2 - (var(--pad-arriba) - var(--pad-abajo)) / 2 - var(--subir), var(--zona-arriba) - 100vh + 100% - var(--pad-arriba))) * (1 - var(--llega)));
    translate: 0 calc(min(0px, max((100% - 100dvh) / 2 - (var(--pad-arriba) - var(--pad-abajo)) / 2 - var(--subir), var(--zona-arriba) - 100dvh + 100% - var(--pad-arriba))) * (1 - var(--llega)));
    opacity: var(--op);
    pointer-events: none;
    /* El fondo de lectura llega con la tarjeta a su lugar: a media pantalla ya la oscurece el velo del escenario. */
    background: linear-gradient(0deg, rgba(0, 0, 0, calc(0.94 * var(--llega))) 0%, rgba(0, 0, 0, calc(0.84 * var(--llega))) 58%, rgba(0, 0, 0, 0) 100%);
    will-change: opacity, translate;
  }
  /* La primera tarjeta llega encima de la placa de la entrada, que se sigue viendo (el velo casi no la apaga): va un poco más arriba que
     el centro, sobre lo oscuro, para que la placa quede a la vista debajo. */
  .pelicula[data-listo] .pelicula__escena[data-escena="1"] .pelicula__tarjeta { --subir: 12vh; }
  /* La sombra de lectura del texto solo: una nube oscura de bordes suaves justo detrás de las letras, que se va cuando la tarjeta baja a
     su lugar. Sobre la placa es la que deja leer el texto con total claridad; en las demás escenas el velo ya es casi negro y no se nota.
     Va en su propia capa (su opacidad cambia al desplazar y así no se repinta el desenfoque) y las letras, por encima: en el orden del
     documento la sombra va primero y el texto después, los dos posicionados. */
  .pelicula[data-listo] .pelicula__tarjeta::before {
    content: "";
    position: absolute;
    inset: calc(var(--pad-arriba) - 24px) calc(var(--margen) - 16px) calc(var(--pad-abajo) - 8px);
    border-radius: 48px;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 56px 40px rgba(0, 0, 0, 0.8);
    opacity: calc(1 - var(--llega));
    pointer-events: none;
    will-change: opacity;
  }
  .pelicula[data-listo] .pelicula__tarjeta > :not(.pelicula__parar) { position: relative; }
  /* Solo la tarjeta que manda se toca (las demás, apagadas o por llegar, no estorban al desplazarse ni a los botones de abajo). */
  .pelicula[data-listo] .pelicula__escena.activa .pelicula__tarjeta { pointer-events: auto; }
  /* Con el foco del teclado dentro (Tab hasta "Escuchar un minuto"), la tarjeta se ve aunque su escena todavía no mande; pelicula.js, además,
     lleva la página hasta ella. Solo con el del teclado (:focus-visible), no con el de un clic, y en su propia regla, por los navegadores
     sin :has(). */
  .pelicula[data-listo] .pelicula__escena .pelicula__tarjeta:has(:focus-visible) { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (min-aspect-ratio: 5/4) {
  /* Pantalla ancha: la tarjeta parte del centro de la ventana y baja (aquí, se corre) hasta su columna de la izquierda. */
  .pelicula[data-listo] .pelicula__tarjeta {
    top: 50%;
    right: auto;
    bottom: auto;
    left: var(--margen);
    width: min(34rem, calc(45vw - var(--margen)));
    padding: 0;
    background: none;
    translate: calc((50vw - 50% - var(--margen)) * (1 - var(--llega))) calc(-50% - var(--subir) * (1 - var(--llega)));
  }
  .pelicula[data-listo] .pelicula__tarjeta::before { inset: -28px -36px; }
}
@media (prefers-reduced-motion: no-preference) and (max-height: 700px) and (max-width: 899px) {
  .pelicula[data-listo] .pelicula__tarjeta { --pad-arriba: 56px; }
}

/* ── Los mandos: sonido y salto ───────────────────────────────
   Un grupo fijo que solo se ve mientras la película cubre su lugar (pelicula.js le pone .visible). También se ve con el foco del
   teclado, para quien llega con él, pero no con el de un clic: un botón tocado se queda con el foco y los mandos seguirían a la vista
   fuera de la película. En escritorio, arriba a la izquierda bajo la cabecera, con el mismo margen que los títulos (abajo se cruzaban
   con la tarjeta que llega, que se ve mientras sube; arriba la columna está libre y la arena vive a la derecha); en celular, arriba a
   la derecha, bajo la cabecera. */
.pelicula__mandos {
  position: fixed;
  left: var(--margen);
  top: calc(var(--cabecera) + env(safe-area-inset-top, 0px) + 16px);
  z-index: 2;
  display: none;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mov-medio) var(--curva);
}
/* Sin el guion no hay sonido que activar: los mandos no existen (ni para el teclado). */
.pelicula[data-listo] .pelicula__mandos { display: flex; }
.pelicula__mandos.visible { opacity: 1; pointer-events: auto; }
/* Aparte: un navegador sin :has() descartaría la regla entera, y .visible con ella. */
.pelicula__mandos:has(:focus-visible) { opacity: 1; pointer-events: auto; }
.pelicula__mandos .boton { box-shadow: var(--oro-filo), 0 0 0 1px var(--linea-tenue); }
/* Mientras suena la película, su botón lleva el aro morado de lo vivo (un aro quieto, no un latido). */
.pelicula__sonido[data-activo="true"] { box-shadow: 0 0 0 1.5px var(--morado), 0 0 18px rgba(155, 124, 244, 0.45); }

/* ── Pantalla angosta o vertical ──────────────────────────────
   La arena va en el 55 % de arriba y la tarjeta ocupa el pie, pegada abajo, con un degradado inferior. */
@media not all and (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .pelicula__poster { --px: 50%; --py: 28%; }
  .pelicula__escena { align-items: flex-end; padding-inline: 0; }
  .pelicula__tarjeta {
    top: auto;
    bottom: 0;
    translate: none;
    max-width: none;
    margin-top: 0;
    padding: 80px var(--margen) calc(24px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.84) 58%, rgba(0, 0, 0, 0) 100%);
  }
  .pelicula__tarjeta > * { max-width: 36rem; }
  /* Los dos botones del final caben en una fila (en 320 px bajan a dos): la tarjeta no le quita la mitad de la pantalla a la arena. */
  .pelicula__acciones .boton--grande { flex: 1 1 auto; padding: 0 16px; font-size: var(--t-2); }
  .pelicula__mandos {
    top: calc(var(--cabecera) + env(safe-area-inset-top, 0px) + 8px);
    right: max(var(--margen), env(safe-area-inset-right, 0px));
    bottom: auto;
    left: var(--margen);
    justify-content: flex-end;
  }
  .pelicula__mandos .boton { font-size: var(--t-4); padding: 0 12px; }
  /* Menos peso arriba: el salto va como enlace de texto. El sonido conserva su texto: un parlante tachado solo no se entendía. */
  .pelicula__mandos .pelicula__saltar { background: none; box-shadow: none; padding: 0 4px; color: var(--niebla); text-decoration: underline; text-underline-offset: 4px; }
  /* "Parar alarma" va en la franja de relleno de arriba de la tarjeta, a la derecha: sobre el texto y al alcance del pulgar, sin empujarlo. */
  .pelicula__parar { top: calc(var(--pad-arriba, 56px) - 56px); right: var(--margen); left: auto; margin: 0; }
}

/* Pantalla ancha: el degradado lateral del escenario hace legible la columna. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  /* La columna no pasa del 45 % del ancho: entre 900 y 1180 px, con 34rem, pisaba las palabras y la placa. */
  .pelicula__tarjeta { max-width: min(34rem, calc(45vw - var(--margen))); }
  .pelicula__escenario::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.6) 32%, rgba(0, 0, 0, 0) 56%);
    pointer-events: none;
  }
}

/* Pantallas bajas (un celular de lado, una ventana chata): el texto se compacta para que la arena conserve su alto. Son las mismas
   medidas del sistema, un escalón más abajo. */
@media (max-height: 700px) {
  .pelicula__tarjeta { gap: 10px; }
  .pelicula__tarjeta .titulo-2 { font-size: var(--t-h4); line-height: var(--l-h4); }
  .pelicula__tarjeta .texto-1 { font-size: var(--t-2); line-height: var(--l-2); }
  .pelicula__tarjeta .boton--grande { min-height: 48px; }
}
@media (max-height: 700px) and (max-width: 899px) {
  .pelicula__tarjeta { padding-top: 56px; }
}
/* Y en las más bajas todavía (un teléfono chico, de 568 a 600 px): un escalón más, para que el texto quepa entre los mandos y el pie. */
@media (max-height: 600px) {
  .pelicula__tarjeta { gap: 8px; }
  .pelicula__tarjeta .texto-1 { font-size: var(--t-3); line-height: var(--l-3); }
  .pelicula__nota { font-size: var(--t-4); line-height: var(--l-4); }
  .pelicula__acciones .boton--grande { font-size: var(--t-3); }
}
@media (max-height: 600px) and (max-width: 359px) {
  .pelicula__acciones .boton--grande { font-size: var(--t-4); padding: 0 10px; }   /* los dos botones del final caben en una fila */
}
/* Teléfonos de 320 a 359 px de ancho: los dos mandos y los dos botones del final caben en una fila cada uno. */
@media (max-width: 359px) {
  .pelicula__mandos { gap: 6px; }
  .pelicula__mandos .boton { gap: 6px; padding: 0 10px; font-size: var(--t-6); }
  .pelicula__acciones .boton--grande { padding: 0 12px; }
}

/* Sin overflow: clip (un navegador anterior a 2022) el escenario fijo asomaría por debajo de la película: queda solo el texto. */
@supports not (overflow: clip) {
  .pelicula__escenario { display: none; }
}