/* Escena de scroll: cámara fija, un VIDEO que sigue al scroll.
   ------------------------------------------------------------------
   Genérica: no lleva nada de ningún cliente. Los cuadros, las frases, las
   rutas del video y los colores entran por el HTML y por las variables del
   tema (--negro, --hueso, --hueso-2, --f-titulo, --margen, --alto-barra);
   cada una trae un valor por defecto acá por si falta.

   TRES NIVELES, y cada uno es el respaldo del anterior:

   1. ESTÁTICO (sin JavaScript, o si el motor no pudo arrancar): el cuadro
      final como imagen normal, el h1, la oración, el llamado y las cinco
      frases una debajo de otra. Es lo que ve cualquiera cuando algo falla.

   2. EN ESCENA CON FOTOS (`html.js-escena`, que pone escena-scroll.js SOLO
      cuando pudo arrancar): la pista mide 4,5 pantallas, el escenario se
      queda pegado y los cuadros se funden según el avance del scroll. Es el
      respaldo si el video no carga.

   3. EN ESCENA CON VIDEO (`.con-video`): el <video> que crea el JavaScript
      va encima de los cuadros y su tiempo lo maneja el scroll de la persona.
      Nunca se reproduce solo.

   Aquí no hay ningún `opacity:0` en CSS: el fundido lo escribe el
   JavaScript en el estilo de cada cuadro. Si el JavaScript se cae, la
   clase `js-escena` ya no está o el cuadro 1 queda visible, y las frases
   se leen igual. */

[hidden]{display:none!important}

.escena{position:relative;background:var(--negro,#0B0B0B);color:var(--hueso,#F2EFE9)}

/* ---- Modo estático ---- */
.escena-cuadros{position:relative}
.cuadro{display:none}
.cuadro-final{display:block}
.cuadro img{display:block;width:100%;height:auto;max-height:78vh;object-fit:cover}

.escena-panel{padding:40px var(--margen,24px) 56px;max-width:60rem}
.escena-intro h1{font-family:var(--f-titulo,Georgia,serif);font-weight:600;
  font-size:clamp(2.6rem,1.2rem + 5vw,5.5rem);line-height:.98;letter-spacing:-.02em;
  margin:0 0 20px}
.escena-bajada{font-size:clamp(1rem,.95rem + .3vw,1.125rem);line-height:1.55;
  margin:0 0 24px;max-width:46ch}
.escena-estados{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:28px}
.estado{margin:0;padding:0}
.frase{font-family:var(--f-titulo,Georgia,serif);font-weight:400;
  font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.3;margin:0 0 8px}
.linea{font-size:1rem;line-height:1.5;color:var(--hueso-2,#B8B2AA);margin:0}
.estado .enlace-llamado{margin-top:12px}
/* La nota es hija directa del escenario: en modo estático queda debajo del panel. */
.escena-nota{font-size:.875rem;line-height:1.45;color:var(--hueso-2,#B8B2AA);
  margin:0;padding:0 var(--margen,24px) 40px;max-width:60rem}

/* ---- Modo en escena ---- */
.js-escena .escena-pista{position:relative;height:450vh;height:450svh}
/* «Se arma una vez» (data-una-vez): armada, la pista mide una pantalla y la escena es una portada quieta
   con la cocina terminada. Gana también a la pista del teléfono (más específica). */
.js-escena .escena.armada .escena-pista{height:100vh;height:100svh}
.js-escena .escena-escenario{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.js-escena .escena-cuadros{position:absolute;inset:0}
.js-escena .cuadro{display:none;position:absolute;inset:0}
.js-escena .cuadro:first-child{display:block}
/* Solo si el video falla, el motor suma `lista` y el resto de los cuadros
   empiezan a bajar (con `loading=lazy` y `display:none` el navegador no
   los pide antes). Con video, los cuadros 2 a 5 no se descargan. */
.js-escena .escena.lista .cuadro{display:block}
.js-escena .cuadro img{width:100%;height:100%;max-height:none;object-fit:cover;
  object-position:62% 50%}

/* El video: encima de los cuadros, llenando el escenario. El póster es el mismo
   cuadro 1 que ya está a la vista, así que el cambio no se nota. */
.js-escena .escena-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;z-index:1;background:var(--negro,#0B0B0B)}

/* Composición tipo editorial: el panel mide lo que mide su texto, centrado en
   la vertical, y no es una losa del alto completo. */
.js-escena .escena-panel{position:absolute;z-index:2;left:var(--margen,48px);
  top:calc(50% + var(--alto-barra,64px) / 2);bottom:auto;transform:translateY(-50%);
  width:min(38%,34rem);max-width:none;box-sizing:border-box;margin:0;padding:40px;
  background:rgba(11,11,11,.82);display:flex;flex-direction:column;justify-content:flex-start}
.js-escena .escena-intro h1{font-size:clamp(2.4rem,1rem + 3.2vw,4.25rem)}
.js-escena .escena-intro{margin-bottom:32px}
.js-escena .escena-estados{display:block;margin:0}

/* Lo que no es del estado actual sigue en el DOM, solo que fuera de la vista:
   un lector de pantalla lee las cinco frases y el h1 de la página no cambia.
   Sus enlaces se quitan del todo: un enlace recortado seguiría enfocable. */
.js-escena .estado:not(.activo),
.js-escena .escena:not(.en-1) .escena-intro{position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.js-escena .estado:not(.activo) .enlace-llamado,
.js-escena .escena:not(.en-1) .escena-intro .enlace-llamado{display:none}
/* En el estado 1, en todos los anchos: el h1, la bajada y el llamado, nada más (la
   frase del estado 1 sigue en el HTML para quien lee con lector de pantalla). Antes
   en escritorio iban dos titulares en la misma losa. */
.js-escena .escena.en-1 .estado{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.js-escena .escena.en-1 .estado .enlace-llamado{display:none}
.js-escena .estado.activo{animation:escena-entra .4s ease both}
/* Con "reducir movimiento" la escena sigue funcionando (el video lo maneja el
   scroll de la persona, nunca corre solo), pero la frase cambia sin deslizarse. */
@media (prefers-reduced-motion:reduce){.js-escena .estado.activo{animation:none}}
/* Nunca nace en opacity:0: si la animación no corre, la frase se lee igual. */
@keyframes escena-entra{from{opacity:.35;transform:translateY(12px)}to{opacity:1;transform:none}}

/* La nota: una línea chica en la esquina, sobre un panel plano. */
.js-escena .escena-nota{position:absolute;z-index:3;right:var(--margen,48px);bottom:24px;
  max-width:30ch;margin:0;padding:6px 10px;background:rgba(11,11,11,.82);
  font-size:.875rem;line-height:1.4}

/* ---- Teléfono: el video arriba, entero, y el texto abajo sobre campo negro.
   Ningún texto queda sobre la imagen. ---- */
@media (max-width:700px){
  .js-escena .escena-pista{height:400vh;height:400svh}
  /* La cocina COMPLETA en una franja horizontal bajo la barra, y el texto debajo, sin taparla
     (Enrique, 2026-10-31: en el teléfono había que girarlo para ver la escena entera). Antes la
     cocina llenaba la pantalla alta con un recorte vertical y se veía un tercio de ella. La franja
     es 16:9, la forma del video; el texto ocupa lo que queda, centrado. */
  .js-escena .escena-cuadros{inset:auto 0 auto 0;top:var(--alto-barra,64px);aspect-ratio:16/9;height:auto}
  .js-escena .cuadro img{object-position:50% 50%}
  .js-escena .escena-panel{left:0;right:0;top:calc(var(--alto-barra,64px) + 100vw * 9 / 16);bottom:0;
    transform:none;width:auto;background:var(--negro,#0B0B0B);padding:28px var(--margen,24px) 24px;
    justify-content:flex-start;overflow:hidden}   /* el texto pegado a la imagen, no flotando en el negro */
  .js-escena .escena-intro{margin-bottom:20px}
  .js-escena .escena-intro h1{font-size:2.6rem}
  /* La nota «recreación digital» va abajo, sobre el negro: en la franja tapaba un tercio de la cocina. */
  .js-escena .escena-nota{left:var(--margen,24px);right:var(--margen,24px);top:auto;bottom:16px;
    background:none;padding:0}
}