/* Recorrido lineal: el reloj es el video, nunca el scroll. El motor anterior
   queda disponible únicamente con ?motor=video o ?motor=fotogramas. */
html[data-modo-experiencia="pelicula"] {
  background: #120f0b;
  scroll-behavior: auto;
}

html[data-modo-experiencia="pelicula"] body.pagina-experiencia {
  height: 100dvh;
  min-height: 100svh;
  min-height: 100dvh;
  background: #120f0b;
  overflow-x: hidden;
}

html[data-modo-experiencia="pelicula"] #compuerta-recorrido,
html[data-modo-experiencia="pelicula"] #viaje,
html[data-modo-experiencia="pelicula"] #guia-gesto-movil,
html[data-modo-experiencia="pelicula"] #video-modal {
  display: none !important;
}

html[data-modo-experiencia="legado"] #pelicula-recorrido {
  display: none !important;
}

.pelicula-recorrido [hidden] {
  display: none !important;
}

.pelicula-recorrido {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  color: #f7f2e9;
  background:
    linear-gradient(180deg, rgba(15, 12, 8, .28), rgba(15, 12, 8, .18) 38%, rgba(15, 12, 8, .88)),
    url("../assets/video/prod/capitulos/hero-cap-01-desktop-poster-hd-v1.webp") center / cover no-repeat;
}

.pelicula-medios,
.pelicula-video,
.pelicula-velo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pelicula-medios {
  z-index: -2;
  background: #120f0b url("../assets/video/prod/capitulos/hero-cap-01-desktop-poster-hd-v1.webp") center / cover no-repeat;
  pointer-events: none;
}

.pelicula-video {
  display: block;
  object-fit: cover;
  object-position: center;
  background: #120f0b;
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.pelicula-video.activa {
  z-index: 2;
}

.pelicula-video.espera {
  z-index: 1;
}

/* La capa siguiente se decodifica detrás de la actual. Debe participar del
   compositor para que requestVideoFrameCallback confirme un cuadro real, pero
   nunca asomarse antes del intercambio. */
.pelicula-video.decodificando {
  visibility: visible;
  opacity: 0;
}

.pelicula-iniciada .pelicula-video.activa {
  opacity: 1;
  visibility: visible;
}

.pelicula-velo {
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 8, 5, .56), transparent 25%),
    linear-gradient(90deg, rgba(10, 8, 5, .5), transparent 58%),
    linear-gradient(0deg, rgba(10, 8, 5, .8), transparent 38%);
}

html[data-modo-experiencia="pelicula"] .exp-nav {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(12, 9, 6, .76), rgba(12, 9, 6, .06));
  border-bottom: 0;
  box-shadow: none;
}

html[data-modo-experiencia="pelicula"] .exp-capitulos,
html[data-modo-experiencia="pelicula"] .exp-nav .nav-cta {
  display: none !important;
}

/* El acceso permanente a privacidad no debe sumar una segunda “pantalla” al
   recorrido. Se conserva visible y operable como control flotante discreto. */
html[data-modo-experiencia="pelicula"] #vdla-consent {
  position: fixed;
  z-index: 79;
  top: calc(72px + env(safe-area-inset-top, 0px));
  left: max(8px, env(safe-area-inset-left, 0px));
  width: auto;
  pointer-events: none;
}

html[data-modo-experiencia="pelicula"] #vdla-consent > * {
  pointer-events: auto;
}

html[data-modo-experiencia="pelicula"] #vdla-consent .vdla-consent-entry {
  padding: 3px;
}

html[data-modo-experiencia="pelicula"] #vdla-consent .vdla-consent-entry button {
  min-height: 32px !important;
  padding: 6px 9px;
  border-color: rgba(247, 242, 233, .26) !important;
  border-radius: 4px;
  color: rgba(247, 242, 233, .68) !important;
  background: rgba(15, 12, 8, .36) !important;
  font-size: 0 !important;
}

html[data-modo-experiencia="pelicula"] #vdla-consent .vdla-consent-entry button::before {
  content: "Privacidad";
  font-size: 9px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pelicula-portada {
  position: relative;
  z-index: 10;
  display: flex;
  min-height: 100svh;
  min-height: 100dvh;
  width: min(940px, 100%);
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:
    calc(92px + env(safe-area-inset-top, 0px))
    max(24px, env(safe-area-inset-right, 0px))
    calc(42px + env(safe-area-inset-bottom, 0px))
    max(24px, env(safe-area-inset-left, 0px));
  text-align: center;
}

.pelicula-kicker {
  margin: 0 0 15px;
  color: #d8c9ae;
  font: 600 10.5px/1.35 var(--sans, Inter, sans-serif);
  letter-spacing: .28em;
  text-transform: uppercase;
}

.pelicula-portada h1 {
  max-width: 16ch;
  margin: 0;
  color: #fff;
  font: 400 clamp(44px, 6.2vw, 76px)/.98 var(--serif, Georgia, serif);
  text-wrap: balance;
  text-shadow: 0 3px 22px rgba(6, 5, 3, .4);
}

.pelicula-bajada {
  max-width: 47ch;
  margin: 20px auto 27px;
  color: rgba(247, 242, 233, .82);
  font: 450 clamp(16px, 1.6vw, 18px)/1.58 var(--sans, Inter, sans-serif);
  text-wrap: balance;
}

.pelicula-decisiones {
  display: grid;
  width: min(760px, 100%);
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.pelicula-decision {
  position: relative;
  display: grid;
  min-height: 124px;
  align-content: center;
  justify-items: start;
  padding: 21px 24px;
  border: 1px solid rgba(247, 242, 233, .32);
  border-radius: 5px;
  color: #fff;
  background: rgba(20, 16, 10, .46);
  -webkit-backdrop-filter: blur(15px) saturate(1.06);
  backdrop-filter: blur(15px) saturate(1.06);
  text-align: left;
  box-shadow: 0 18px 52px rgba(5, 4, 3, .18);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.pelicula-decision-principal {
  color: #171208;
  border-color: rgba(221, 190, 116, .95);
  background: linear-gradient(145deg, #e5ca8b, #cba451);
}

.pelicula-decision:hover,
.pelicula-decision:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .86);
}

.pelicula-decision > span {
  margin-bottom: 7px;
  color: currentColor;
  font: 650 9.5px/1.2 var(--sans, Inter, sans-serif);
  letter-spacing: .23em;
  opacity: .68;
  text-transform: uppercase;
}

.pelicula-decision > strong {
  font: 450 clamp(26px, 2.7vw, 34px)/1.05 var(--serif, Georgia, serif);
}

.pelicula-decision > em {
  margin-top: 10px;
  color: currentColor;
  font: 600 12px/1.25 var(--sans, Inter, sans-serif);
  font-style: normal;
  opacity: .82;
}

.pelicula-decision b {
  margin-left: 5px;
  font-weight: 500;
}

.pelicula-nota {
  margin: 16px auto 0;
  color: rgba(247, 242, 233, .64);
  font: 500 12px/1.45 var(--sans, Inter, sans-serif);
}

.pelicula-preparando,
.pelicula-final,
.pelicula-error {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  min-height: 100svh;
  min-height: 100dvh;
  place-content: center;
  justify-items: center;
  padding: 110px 24px 88px;
  text-align: center;
  background: rgba(16, 13, 9, .48);
}

.pelicula-preparando p {
  margin: 20px 0 6px;
  color: #fff;
  font: 450 clamp(30px, 4vw, 46px)/1.05 var(--serif, Georgia, serif);
}

.pelicula-preparando small {
  color: rgba(247, 242, 233, .68);
  font-size: 14px;
}

.pelicula-pulso {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(224, 194, 122, .45);
  border-top-color: #e0c27a;
  border-radius: 50%;
  animation: pelicula-giro .85s linear infinite;
}

@keyframes pelicula-giro { to { transform: rotate(360deg); } }

.pelicula-relato {
  position: absolute;
  z-index: 8;
  left: clamp(24px, 6vw, 92px);
  bottom: clamp(112px, 15vh, 150px);
  width: min(590px, calc(100vw - 330px));
  padding: 22px 24px;
  border-left: 1px solid rgba(226, 195, 120, .72);
  background: linear-gradient(90deg, rgba(15, 12, 8, .62), rgba(15, 12, 8, 0));
  text-shadow: 0 2px 15px rgba(6, 5, 3, .9);
  pointer-events: none;
}

.pelicula-relato > p:first-child {
  margin: 0 0 8px;
  color: #e0c27a;
  font: 650 10px/1.3 var(--sans, Inter, sans-serif);
  letter-spacing: .25em;
  text-transform: uppercase;
}

.pelicula-relato h2 {
  max-width: 17ch;
  margin: 0;
  color: #fff;
  font: 430 clamp(31px, 4vw, 53px)/1.02 var(--serif, Georgia, serif);
  text-wrap: balance;
}

.pelicula-relato > p:last-child {
  max-width: 44ch;
  margin: 12px 0 0;
  color: rgba(247, 242, 233, .84);
  font: 450 clamp(15px, 1.45vw, 17px)/1.56 var(--sans, Inter, sans-serif);
}

html[data-modo-experiencia="pelicula"] #minimapa.pelicula-minimapa {
  position: absolute;
  z-index: 12;
  right: clamp(18px, 3vw, 42px);
  bottom: 102px;
  top: auto;
  left: auto;
  display: block !important;
  width: 178px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(247, 242, 233, .42);
  border-radius: 6px;
  opacity: .84;
  pointer-events: auto;
  background: #17130e;
  box-shadow: 0 16px 38px rgba(5, 4, 3, .35);
  transform: none;
  transition: opacity .2s ease, transform .2s ease;
}

html[data-modo-experiencia="pelicula"] #minimapa.pelicula-minimapa[hidden] {
  display: none !important;
}

html[data-modo-experiencia="pelicula"] #minimapa.pelicula-minimapa:hover,
html[data-modo-experiencia="pelicula"] #minimapa.pelicula-minimapa:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

.pelicula-minimapa img {
  display: block;
  width: 100%;
  height: auto;
}

.pelicula-minimapa::after {
  content: none !important;
}

.pelicula-minimapa strong {
  display: block;
  padding: 9px 10px;
  color: #f7f2e9;
  font: 650 10px/1.2 var(--sans, Inter, sans-serif);
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

.pelicula-minimapa-punto {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #c9a24b;
  box-shadow: 0 0 0 5px rgba(201, 162, 75, .25);
  transform: translate(-50%, -50%);
  transition: left .45s ease, top .45s ease;
}

.pelicula-controles {
  position: absolute;
  z-index: 15;
  left: clamp(18px, 3vw, 42px);
  right: clamp(18px, 3vw, 42px);
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  display: grid;
  min-height: 62px;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 10px 13px;
  border: 1px solid rgba(247, 242, 233, .22);
  border-radius: 7px;
  background: rgba(15, 12, 8, .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: 0 16px 48px rgba(4, 3, 2, .28);
}

.pelicula-toggle,
.pelicula-mapa-control {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(247, 242, 233, .22);
  border-radius: 4px;
  color: #fff;
  background: rgba(247, 242, 233, .06);
  font: 600 12px/1.2 var(--sans, Inter, sans-serif);
}

.pelicula-progreso {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(80px, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.pelicula-progreso .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.pelicula-progreso input {
  width: 100%;
  height: 28px;
  margin: 0;
  accent-color: #d8b96c;
  cursor: pointer;
}

.pelicula-tiempo {
  min-width: 78px;
  color: rgba(247, 242, 233, .72);
  font: 550 11px/1 var(--sans, Inter, sans-serif);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pelicula-final,
.pelicula-error {
  z-index: 22;
  background: linear-gradient(145deg, rgba(20, 16, 10, .82), rgba(9, 7, 5, .94));
}

.pelicula-final h2,
.pelicula-error h2 {
  max-width: 15ch;
  margin: 0;
  color: #fff;
  font: 430 clamp(42px, 6vw, 70px)/.98 var(--serif, Georgia, serif);
  text-wrap: balance;
}

.pelicula-final > p:not(.pelicula-kicker),
.pelicula-error > p:not(.pelicula-kicker) {
  max-width: 45ch;
  margin: 19px auto 25px;
  color: rgba(247, 242, 233, .76);
  line-height: 1.6;
}

.pelicula-final-acciones,
.pelicula-error > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 11px;
}

.pelicula-final button,
.pelicula-error button {
  min-height: 48px;
  padding: 13px 22px;
  border: 1px solid rgba(247, 242, 233, .4);
  border-radius: 4px;
  color: #fff;
  background: rgba(247, 242, 233, .07);
  font-weight: 650;
}

.pelicula-final button:first-child,
.pelicula-error button:first-child {
  color: #171208;
  border-color: #d9b967;
  background: #d9b967;
}

.pelicula-final > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 18px;
  color: #e1c47d;
}

@media (max-width: 820px) {
  .pelicula-recorrido {
    background-image:
      linear-gradient(180deg, rgba(15, 12, 8, .32), rgba(15, 12, 8, .1) 34%, rgba(15, 12, 8, .9)),
      url("../assets/video/prod/capitulos/hero-cap-01-mobile-poster-hd-v1.webp");
    background-position: center;
    background-size: cover;
  }

  .pelicula-medios {
    background-image: url("../assets/video/prod/capitulos/hero-cap-01-mobile-poster-hd-v1.webp");
  }

  html[data-modo-experiencia="pelicula"] .exp-volver {
    font-size: 0;
  }

  html[data-modo-experiencia="pelicula"] .exp-volver span {
    font-size: 18px;
  }

  .pelicula-portada {
    justify-content: flex-end;
    padding:
      calc(84px + env(safe-area-inset-top, 0px))
      max(18px, env(safe-area-inset-right, 0px))
      calc(24px + env(safe-area-inset-bottom, 0px))
      max(18px, env(safe-area-inset-left, 0px));
  }

  .pelicula-portada h1 {
    font-size: clamp(38px, 10.6vw, 48px);
    line-height: 1;
  }

  .pelicula-bajada {
    margin: 14px auto 18px;
    font-size: 15px;
    line-height: 1.48;
  }

  .pelicula-decisiones {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .pelicula-decision {
    min-height: 86px;
    padding: 15px 18px;
  }

  .pelicula-decision > span {
    margin-bottom: 4px;
    font-size: 8.5px;
  }

  .pelicula-decision > strong {
    font-size: 27px;
  }

  .pelicula-decision > em {
    position: absolute;
    right: 18px;
    bottom: 18px;
    margin: 0;
    font-size: 10.5px;
  }

  .pelicula-nota {
    margin-top: 11px;
    max-width: 38ch;
    font-size: 10.5px;
  }

  .pelicula-relato {
    left: 16px;
    right: 16px;
    bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    width: auto;
    padding: 15px 15px 16px;
    background: linear-gradient(90deg, rgba(15, 12, 8, .72), rgba(15, 12, 8, .14));
  }

  .pelicula-relato h2 {
    max-width: 15ch;
    font-size: clamp(29px, 8.2vw, 39px);
  }

  .pelicula-relato > p:last-child {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  html[data-modo-experiencia="pelicula"] #minimapa.pelicula-minimapa {
    right: 13px;
    top: calc(76px + env(safe-area-inset-top, 0px));
    bottom: auto;
    width: 108px;
  }

  .pelicula-minimapa strong {
    padding: 7px 6px;
    font-size: 8.5px;
  }

  .pelicula-controles {
    left: 10px;
    right: 10px;
    bottom: max(9px, env(safe-area-inset-bottom, 0px));
    min-height: 66px;
    grid-template-columns: auto minmax(90px, 1fr) auto;
    gap: 8px;
    padding: 8px;
  }

  .pelicula-toggle,
  .pelicula-mapa-control {
    min-width: 44px;
    padding: 9px 10px;
  }

  .pelicula-toggle [data-pelicula-toggle-texto] {
    display: none;
  }

  .pelicula-mapa-control {
    max-width: 72px;
    font-size: 10px;
  }

  .pelicula-progreso {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .pelicula-tiempo {
    display: none;
  }

  html[data-modo-experiencia="pelicula"] #explorador .expl-marco {
    width: 100vw;
    max-height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
    padding:
      calc(58px + env(safe-area-inset-top, 0px))
      16px
      calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-height: 730px) and (max-width: 820px) {
  .pelicula-portada h1 { font-size: 35px; }
  .pelicula-bajada { margin-block: 10px 13px; }
  .pelicula-decision { min-height: 76px; padding-block: 12px; }
  .pelicula-decision > strong { font-size: 24px; }
  .pelicula-nota { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pelicula-decision,
  .pelicula-minimapa-punto,
  html[data-modo-experiencia="pelicula"] #minimapa.pelicula-minimapa {
    transition: none !important;
  }

  .pelicula-pulso {
    animation-duration: 1.8s !important;
  }
}