/* R12 · EXPERIMENT. V05 films share the approved narrative and media lifecycle.
   Typography and handwritten cues reuse Norteña's existing type and ink. */
#ventana .ventana-v05 { display:none!important; }

  #ventana { --ventana-despliegue:1; }
  #ventana,
  html:not(.pelicula) #ventana { --c:#21180f; background:#21180f; }
  #ventana .escena-banda,
  html:not(.pelicula) #ventana .escena-banda {
    height:100svh; min-height:0;
    background:#21180f;
  }
  #ventana .pista-ventana-r9 { position:relative; height:185svh; }
  #ventana.ventana-relato-activo .pista-ventana-r9 > .escena {
    position:sticky; top:0; height:100svh; min-height:0; overflow:hidden;
  }
  #ventana.ventana-relato-activo .escena-banda { position:absolute; inset:0; }
  #ventana .astra-sol-panel { display:none!important; }
  #ventana .ventana-v05 {
    inset:0; width:100%; height:100%;
    aspect-ratio:auto; transform:none!important;
  }
  #ventana .ventana-v05 > picture img,
  #ventana .ventana-v05 > video {
    inset:0; width:100%; height:100%; object-fit:cover;
    object-position:50% 100%;
  }
  #ventana .ventana-v05 > video {
    opacity:0!important; transition:none;
    -webkit-mask-image:none; mask-image:none; pointer-events:none;
  }
  #ventana .ventana-v05[data-ventana-visible="ocaso"] > [data-ventana-video="ocaso"],
  #ventana .ventana-v05[data-ventana-visible="noche"] > [data-ventana-video="noche"] {
    opacity:1!important;
  }
  #ventana .ventana-v05 > [data-ventana-video="noche"] { z-index:1; }
  /* Retain the existing edge treatment, shortened and matched to the timber. */
  #ventana .escena-banda::before { height:36px; }
  #ventana .escena-banda::after,
  html:not(.pelicula) #ventana .escena-banda::after {
    height:36px; background:linear-gradient(transparent,#21180f);
  }
  #ventana .escena-velo,
  html:not(.pelicula) #ventana .escena-velo {
    background:linear-gradient(0deg,rgb(24 16 9/.68),rgb(24 16 9/.32) 24%,rgb(24 16 9/0) 43%);
  }
  #ventana .escena-titulo,
  .pelicula #ventana .escena-titulo {
    top:auto; bottom:calc(122px + 88px * var(--ventana-despliegue)); left:0; right:0; width:auto;
    padding:0 24px; text-align:center; z-index:5;
    pointer-events:none;
  }
  #ventana .escena-titulo .guia {
    font-size:clamp(1.9rem,7.8vw,3.15rem); line-height:1.08;
    max-width:11.5em; margin:0 auto; text-wrap:balance;
    color:#f7e5c9; text-shadow:0 2px 8px rgb(19 11 5/.65);
  }
  #ventana .escena-titulo .guia-acento { color:var(--ventana,#fcda7d); }
  #ventana .ventana-relato-linea { display:block; }
  /* R2 · 2.1: un fromTo escalonado solo pinta al montar su primer destino; la segunda línea se veía sola
     antes que la primera en carga en frío. Mientras el relato está activo, las dos parten ocultas y GSAP
     las revela con su estilo en línea. Sin JS o con movimiento reducido no hay clase: se ven. */
  #ventana.ventana-relato-activo .ventana-relato-linea { opacity:0; }
  #ventana .ventana-v05-proximo {
    display:block; position:absolute; bottom:120px; left:24px; right:24px;
    z-index:6; text-align:center; color:#f7e5c9; pointer-events:none;
    font-family:AstraCaveat,cursive;
    text-shadow:0 2px 5px #1b110b;
  }
  #ventana .ventana-v05-proximo p { margin:0; }
  #ventana .ventana-v05-aviso {
    font-size:clamp(1.5rem,6.2vw,2.1rem); line-height:1.15;
    font-weight:600; transform:rotate(-2deg);
  }
  #ventana .ventana-v05-posibilidades {
    margin-top:9px!important; font-size:clamp(1.25rem,5.1vw,1.6rem);
    line-height:1.2; font-weight:500; text-wrap:balance;
  }
  #ventana .ventana-v05-controls:not([hidden]) {
    position:absolute; display:flex; flex-direction:column; align-items:center;
    bottom:64px; left:60px; right:60px; z-index:6;
    text-align:center; pointer-events:auto;
  }
  #ventana .ventana-v05-controls button,
  #ventana .ventana-v05-controls a {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; margin:0; padding:6px 9px; border:0;
    background:transparent; color:#f7e5c9;
    font:600 1.35rem/1.1 AstraCaveat,cursive;
    text-decoration:underline; text-decoration-thickness:1px;
    text-underline-offset:5px; text-shadow:0 1px 5px #1b110b;
    cursor:pointer; touch-action:manipulation;
  }
  #ventana .ventana-v05-controls button:disabled { opacity:.6; cursor:default; }
  #ventana .ventana-v05-controls :focus-visible {
    outline:2px solid var(--ventana,#fcda7d); outline-offset:3px;
  }
  #ventana .ventana-v05-controls [hidden] { display:none!important; }
  #ventana .ventana-v05-status {
    position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
  #ventana .ventana-salida { display:none; }
@media (orientation:portrait) {
  #ventana .ventana-v05[data-ventana-formato="vertical"] { display:block!important; }
  #ventana:has([data-ventana-source]:not([hidden])) .escena-titulo { bottom:calc(174px + 88px * var(--ventana-despliegue)); }
  #ventana:has([data-ventana-source]:not([hidden])) .ventana-v05-proximo { bottom:172px; }
}
@media (orientation:landscape) {
  #ventana {
    --ventana-base:clamp(86px,13svh,124px);
    --ventana-lateral:max(5vw,calc((100vw - 100svh * 16 / 9) / 2 + 3vw));
  }
  #ventana .ventana-v05[data-ventana-formato="horizontal"] { display:block!important; }
  /* Complete 16:9 frame at every landscape ratio. At 4:3 the extra timber
     below the image holds the copy; the lantern and horizon are never cropped. */
  #ventana .ventana-v05 > picture img,
  #ventana .ventana-v05 > video { object-fit:contain; object-position:50% 0; }
  #ventana .escena-velo,
  html:not(.pelicula) #ventana .escena-velo {
    background:linear-gradient(0deg,rgb(24 16 9/.92),rgb(24 16 9/.56) 17%,rgb(24 16 9/0) 35%);
  }
  #ventana .escena-titulo,
  .pelicula #ventana .escena-titulo {
    left:var(--ventana-lateral); right:auto; width:min(43vw,70svh);
    bottom:calc(var(--ventana-base) + 12px * var(--ventana-despliegue));
    padding:0; text-align:left;
  }
  #ventana .escena-titulo .guia {
    font-size:clamp(1.55rem,3.25vw,3.25rem); max-width:none; margin:0;
  }
  #ventana .ventana-v05-proximo {
    left:auto; right:var(--ventana-lateral); width:min(42vw,70svh);
    bottom:calc(var(--ventana-base) + 12px);
  }
  #ventana .ventana-v05-aviso { font-size:clamp(1.25rem,2.5vw,2.25rem); }
  #ventana .ventana-v05-posibilidades { font-size:clamp(1.1rem,2.05vw,1.85rem); margin-top:8px!important; }
  #ventana .ventana-v05-controls:not([hidden]) { bottom:clamp(24px,5svh,50px); }
  #ventana .ventana-v05-controls button,
  #ventana .ventana-v05-controls a { font-size:1.35rem; }
  #ventana:has([data-ventana-source]:not([hidden])) .escena-titulo { bottom:calc(var(--ventana-base) + 60px); }
  #ventana:has([data-ventana-source]:not([hidden])) .ventana-v05-proximo { bottom:calc(var(--ventana-base) + 60px); }
}
@media (orientation:landscape) and (max-aspect-ratio:3/2) {
  #ventana { --ventana-base:86px; }
  #ventana .escena-velo,
  html:not(.pelicula) #ventana .escena-velo {
    background:linear-gradient(0deg,#21180f,rgb(33 24 15/.97) 16%,rgb(33 24 15/0) 29%);
  }
}
@media (orientation:landscape) and (max-height:500px) {
  .hora[data-escena="ventana"] { display:none; }
  #ventana { --ventana-base:64px; --ventana-lateral:6vw; }
  #ventana .escena-titulo .guia { font-size:clamp(1.4rem,3vw,1.8rem); }
  #ventana .ventana-v05-aviso { font-size:1.25rem; }
  #ventana .ventana-v05-posibilidades { font-size:1.1rem; margin-top:5px!important; }
  #ventana .ventana-v05-controls:not([hidden]) { bottom:16px; }
  #ventana .ventana-v05-controls button,
  #ventana .ventana-v05-controls a { font-size:1.2rem; }
}
@media (orientation:portrait) and (min-width:600px) {
  #ventana .escena-titulo { bottom:calc(126px + 88px * var(--ventana-despliegue)); }
  #ventana .ventana-v05-controls:not([hidden]) { bottom:64px; }
  #ventana .ventana-v05-controls button,
  #ventana .ventana-v05-controls a { font-size:1.65rem; }
}
@media print {
  .ventana-v05-controls { display:none!important; }
  #ventana .pista-ventana-r9 { height:auto!important; }
  #ventana.ventana-relato-activo .pista-ventana-r9 > .escena { position:relative; }
}
