/* Estilo cinematográfico — PRUEBA (2026-09-24, rama prueba/estilo-prime, referencia primevideo.com).
   Conserva colores, tipografía y estructura del sitio; cambia la forma de presentar el contenido:
   1. .cine          — escena de transición entre páginas (transicion-cine.js).
   2. .hero-carousel--cine — el carrusel del inicio pasa de deslizar a fundido con movimiento de cámara.
   3. .cine-filas    — filas horizontales de programas y cursos con vista ampliada al pasar el mouse
                       (filas-cine.js). */

/* ---------- 1. Transición entre páginas ---------- */
.cine {
  position: fixed; inset: 0; z-index: 10000; overflow: hidden; cursor: pointer;
  background: #05070b;
}
.cine__foto {
  position: absolute; left: -4%; top: -4%; width: 108%; height: 108%; max-width: none;
  object-fit: cover; object-position: center;
  background-color: var(--funprotec-navy-dark);
  will-change: transform;
}
.cine__velo {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(100deg, rgba(10,30,56,0.88) 0%, rgba(10,30,56,0.45) 55%, rgba(10,30,56,0.1) 100%),
    linear-gradient(0deg, rgba(5,7,11,0.85) 0%, transparent 45%);
}
.cine__barra { position: absolute; left: 0; right: 0; height: 11vh; background: #000; }
.cine__barra--sup { top: 0; transform-origin: top; }
.cine__barra--inf { bottom: 0; transform-origin: bottom; }
.cine__titulo {
  position: absolute; margin: 0; color: #fff;
  left: clamp(1.25rem, 6vw, 6rem); right: 1.25rem; bottom: calc(11vh + clamp(1.5rem, 6vh, 4rem));
}
.cine__kicker {
  display: block; margin-bottom: 0.6rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.32em; color: var(--funprotec-orange);
}
.cine__nombre {
  display: block; max-width: 20ch;
  font-family: var(--font-heading); font-weight: 800; line-height: 1.08;
  font-size: clamp(1.8rem, 5vw, 3.6rem); text-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
.cine__linea {
  display: block; width: 84px; height: 4px; margin-top: 1rem; border-radius: 2px;
  background: var(--funprotec-orange); transform-origin: left;
}

/* Aviso para saltar la escena (clic, Enter o Escape — transicion-cine.js). */
/* Salida con el video del programa y su audio (transicion-cine.js, salidaConVideo): el video ocupa la
   pantalla sin movimiento de cámara y con un velo más suave, para que se vea completo. */
.cine--video .cine__foto { left: 0; top: 0; width: 100%; height: 100%; animation: none !important; transform: none; }
.cine--video .cine__velo { background-image: linear-gradient(0deg, rgba(5, 7, 11, 0.8) 0%, transparent 38%); }
.cine--video .cine__nombre { font-size: clamp(1.4rem, 3.6vw, 2.6rem); }
/* Pantallas más anchas que el video (celular en horizontal, monitores ultrapanorámicos): con "cover"
   se recortaba por arriba y por abajo. Se muestra completo, con franjas a los lados. */
@media (min-aspect-ratio: 16/9) {
  .cine--video .cine__foto { object-fit: contain; background-color: #05070b; }
}
/* Clips del blog (2026-10-05): ya traen rótulos propios; el título y el velo de la escena los tapaban. */
.cine--sin-titulo .cine__titulo { display: none; }
.cine--sin-titulo .cine__velo { background-image: none; }
/* Celulares y tabletas en vertical (2026-09-24, reportado por el usuario: "en el celular se ve más
   grande que la pantalla"): con "cover", un video 16:9 en una pantalla vertical se recortaba más de
   la mitad por los lados y se veía ampliado. Aquí se muestra COMPLETO, ajustado al ancho y centrado
   entre las franjas; el título queda debajo del video. 100dvh evita el salto de la barra del
   navegador del celular. */
@media (max-aspect-ratio: 4/3) {
  .cine { height: 100vh; height: 100dvh; }
  .cine--video .cine__foto { object-fit: contain; background-color: #05070b; }
  .cine--video .cine__velo { background-image: none; }
  .cine--video .cine__titulo { bottom: calc(11vh + 1rem); }
  .cine--video .cine__nombre { font-size: clamp(1.25rem, 6vw, 1.9rem); max-width: none; }
  .cine--video .cine__kicker { font-size: 0.72rem; margin-bottom: 0.35rem; }
  .cine--video .cine__linea { margin-top: 0.6rem; }
}

/* Pastilla naranja fosforescente (2026-09-24, a pedido del usuario: "más visible"), igual a la de la
   escena de los programas (programa.css, .transicion__pista). */
.cine__pista {
  position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: 3vh; z-index: 2; margin: 0;
  padding: 0.5rem 1.1rem; border-radius: 999px;
  background: #ff7a00; color: #1a0a00; font-size: 0.95rem; font-weight: 900; letter-spacing: 0.03em;
  box-shadow: 0 0 0 2px #ffb15c, 0 0 18px 4px rgba(255, 122, 0, 0.85), 0 0 42px 10px rgba(255, 94, 0, 0.45);
  animation: cine-aparece 0.6s ease-out 0.6s both, cine-pista 1.1s ease-in-out 1.2s infinite alternate;
}
.cine__pista::before { content: "⏭ "; }
@keyframes cine-pista { to { box-shadow: 0 0 0 3px #ffd08a, 0 0 28px 8px rgba(255, 122, 0, 1), 0 0 60px 16px rgba(255, 94, 0, 0.6); transform: scale(1.06); } }

/* Duración total ~6 s a pedido del usuario (2026-09-24): salida 2,5 s + entrada 3,5 s.
   La cámara de la salida termina (escala 1.16) donde empieza la de la entrada, para que el corte
   entre páginas no se note. Si se cambian estos tiempos, ajustar SALIDA_MS/ENTRADA_MS en
   transicion-cine.js y el bloque de "reducir movimiento" al final de este archivo. */
.cine--salida { animation: cine-aparece 0.6s ease-out both; }
.cine--salida .cine__foto { animation: cine-camara-salida 2.6s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
.cine--salida .cine__barra { animation: cine-barra-entra 0.8s cubic-bezier(0.7, 0, 0.3, 1) 0.2s both; }
.cine--salida .cine__kicker { animation: cine-texto-sube 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s both; }
.cine--salida .cine__nombre { animation: cine-texto-sube 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s both; }
.cine--salida .cine__linea { animation: cine-linea 0.7s ease-out 1.3s both; }

.cine--entrada { animation: cine-desvanece 0.9s ease-in 2.6s both; }
.cine--entrada .cine__foto { animation: cine-camara-entrada 3.5s cubic-bezier(0.3, 0.1, 0.3, 1) both; }
.cine--entrada .cine__barra { animation: cine-barra-sale 0.9s cubic-bezier(0.7, 0, 0.3, 1) 2s both; }
.cine--entrada .cine__titulo { animation: cine-texto-sale 0.6s ease-in 1.6s both; }
/* Saltar: se cierra de inmediato (gana a la animación de entrada). */
.cine.cine--saltar { animation: cine-desvanece 0.35s ease-in both !important; }

@keyframes cine-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes cine-desvanece { to { opacity: 0; } }
@keyframes cine-camara-salida {
  from { transform: scale(1.3) translate3d(2%, 1%, 0); }
  to { transform: scale(1.16) translate3d(0.5%, 0.2%, 0); }
}
@keyframes cine-camara-entrada {
  from { transform: scale(1.16) translate3d(0.5%, 0.2%, 0); }
  to { transform: scale(1) translate3d(-2%, -1.2%, 0); }
}
@keyframes cine-barra-entra { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cine-barra-sale { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes cine-texto-sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cine-texto-sale { to { opacity: 0; transform: translateY(-10px); } }
@keyframes cine-linea { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 2. Hero del inicio: fundido + movimiento de cámara ---------- */
.hero-carousel--cine .hero-carousel__track {
  display: grid; transition: none;
  transform: none !important; /* hero-carousel.js pone translateX en línea: aquí no se desliza */
}
.hero-carousel--cine .hero-carousel__slide {
  grid-area: 1 / 1; overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
.hero-carousel--cine .hero-carousel__slide.is-activa {
  opacity: 1; visibility: visible; z-index: 1;
  transition: opacity 1.2s ease, visibility 0s;
}
/* La foto de las noticias pasa del fondo de la diapositiva a un ::before, para moverla sin mover
   el texto. La URL llega como variable --fondo (hero-carousel.js). */
.hero-carousel--cine .hero-carousel__slide--news { background-image: none !important; }
.hero-carousel--cine .hero-carousel__slide--news::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--fondo); background-repeat: no-repeat; background-position: center; background-size: cover;
}
/* La cámara corre siempre (ida y vuelta) en TODAS las diapositivas, no solo en la activa: si se
   arrancara al activarse, la que sale perdería la animación de golpe y su foto saltaría a escala 1
   mientras aún se desvanece (el "salto" reportado el 2026-09-24). */
.hero-carousel--cine .hero-carousel__slide::before {
  animation: cine-camara-hero 14s ease-in-out infinite alternate;
}
.hero-carousel--cine .hero-carousel__slide:nth-child(even)::before { animation-delay: -7s; }
.hero-carousel--cine .hero-carousel__slide.is-activa .inner > * {
  animation: cine-texto-sube 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-carousel--cine .hero-carousel__slide.is-activa .inner > :nth-child(2) { animation-delay: 0.12s; }
.hero-carousel--cine .hero-carousel__slide.is-activa .inner > :nth-child(3) { animation-delay: 0.24s; }
.hero-carousel--cine .hero-carousel__slide.is-activa .inner > :nth-child(4) { animation-delay: 0.36s; }
.hero-carousel--cine .hero-carousel__slide.is-activa .inner > :nth-child(n+5) { animation-delay: 0.48s; }
/* Diapositiva "banner" (imagenConTexto en data.js): la imagen ya trae su título y resumen, así que se
   muestra entera (contain) sin texto encima; solo queda el botón "Ver más". El texto sigue en el HTML
   para lectores de pantalla. */
.hero-carousel--cine .hero-carousel__slide--banner { background-color: #0a1e38; }
/* La imagen deja libre una franja de 76 px abajo para el botón, así no tapa lo que trae escrito. */
.hero-carousel--cine .hero-carousel__slide--banner::before {
  background-size: auto calc(100% - 76px); background-position: center top;
}
/* Afiche vertical dentro de una imagen 4:3 con relleno (imagenAficheVertical en data.js): en pantallas
   angostas, ajustada solo al alto, el afiche se salía por los lados. El tope en vw lo deja entero aun
   con el acercamiento de la cámara. */
.hero-carousel--cine .hero-carousel__slide--afiche::before { background-size: auto min(calc(100% - 76px), 130vw); }
.hero-carousel__slide--banner::after { background-image: none !important; }
.hero-carousel__slide--banner { padding-bottom: 1rem !important; }
.hero-carousel__slide--banner .inner { align-self: flex-end; width: 100%; text-align: center; }
.hero-carousel__slide--banner .inner > :not(.btn) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero-carousel--cine .hero-carousel__slide--banner.is-activa .inner > .btn { animation-delay: 0.3s; }

@keyframes cine-camara-hero {
  from { transform: scale(1.12) translate3d(1.5%, 0, 0); }
  to { transform: scale(1) translate3d(0, 0, 0); }
}

/* ---------- 3. Filas tipo "Prime" ---------- */
.cine-filas {
  position: relative; color: #fff;
  background: linear-gradient(180deg, var(--funprotec-navy-dark) 0%, #0b1422 100%);
  padding: clamp(2.25rem, 5vw, 3.75rem) 0 clamp(1.5rem, 4vw, 2.75rem);
}
.cine-filas__titulo {
  margin: 0 0 0.35rem; padding: 0 clamp(1rem, 4vw, 3.5rem);
  font-size: clamp(1.5rem, 3vw, 2rem); color: #fff;
}
.cine-filas__lead { margin: 0 0 1.5rem; padding: 0 clamp(1rem, 4vw, 3.5rem); color: #b9c4d8; }
.cine-fila + .cine-fila { margin-top: 1.25rem; }
.cine-fila__titulo {
  margin: 0 0 0.6rem; padding: 0 clamp(1rem, 4vw, 3.5rem);
  font-size: 1.2rem; font-weight: 700; color: #fff;
}
.cine-fila__titulo span { color: var(--funprotec-orange); font-weight: 600; font-size: 0.9rem; margin-left: 0.5rem; }
.cine-fila__marco { position: relative; }
.cine-fila__pista {
  display: flex; gap: 0.65rem; margin: 0; list-style: none;
  padding: 0.35rem clamp(1rem, 4vw, 3.5rem) 0.9rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(1rem, 4vw, 3.5rem);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.cine-fila__pista::-webkit-scrollbar { display: none; }
.cine-card { flex: 0 0 clamp(230px, 22vw, 310px); scroll-snap-align: start; }
.cine-card__enlace {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 8px; background: var(--funprotec-navy); color: #fff; text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.cine-card__enlace:focus-visible { outline: 3px solid var(--funprotec-orange); outline-offset: 3px; }
.cine-card__media, .cine-card__media picture, .cine-card__media img { display: block; width: 100%; height: 100%; }
.cine-card__media img { object-fit: cover; transition: transform 0.5s ease; }
.cine-card__enlace:hover .cine-card__media img { transform: scale(1.05); }
.cine-card__enlace::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5,10,20,0.9) 0%, rgba(5,10,20,0.15) 55%, transparent 100%);
}
.cine-card__nombre {
  position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.65rem; z-index: 1;
  font-weight: 800; font-size: 1.02rem; line-height: 1.15; text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.cine-badge {
  position: absolute; top: 0; right: 0; z-index: 1;
  background: var(--funprotec-orange); color: var(--funprotec-on-brand);
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.28rem 0.55rem; border-bottom-left-radius: 6px;
}
.cine-badge--gratis { background: #34d399; }

.cine-fila__flecha {
  position: absolute; top: 0.35rem; bottom: 0.9rem; z-index: 3; width: clamp(2.2rem, 3.5vw, 3.25rem);
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; color: #fff; font-size: 2.4rem; line-height: 1;
  opacity: 0; transition: opacity 0.2s ease;
}
.cine-fila__flecha--prev { left: 0; background: linear-gradient(90deg, rgba(8,14,26,0.92), rgba(8,14,26,0)); }
.cine-fila__flecha--next { right: 0; background: linear-gradient(270deg, rgba(8,14,26,0.92), rgba(8,14,26,0)); }
.cine-fila__marco:hover .cine-fila__flecha, .cine-fila__flecha:focus-visible { opacity: 1; }
.cine-fila__flecha[hidden] { display: none; }
@media (hover: none) { .cine-fila__flecha { display: none; } }

/* Vista ampliada al pasar el mouse (patrón de Prime Video): la tarjeta crece y despliega un panel. */
.cine-preview {
  position: absolute; z-index: 400; overflow: hidden; color: #fff;
  background: #0b1422; border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
  animation: cine-preview-abre 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.cine-preview[hidden] { display: none; }
.cine-preview__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.cine-preview__media picture, .cine-preview__media img { display: block; width: 100%; height: 100%; }
.cine-preview__media img { object-fit: cover; animation: cine-camara-hero 9s ease-out both; }
.cine-preview__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, #0b1422 0%, transparent 45%);
}
.cine-preview__cuerpo { padding: 0.2rem 1.1rem 1.1rem; }
.cine-preview__nombre { margin: 0 0 0.75rem; font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.cine-preview__acciones { display: flex; gap: 0.6rem; margin-bottom: 0.85rem; flex-wrap: wrap; }
.cine-preview__btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1rem; border-radius: 999px; font-weight: 700; font-size: 0.88rem; text-decoration: none;
  border: 2px solid rgba(255,255,255,0.75); color: #fff; transition: background 0.15s ease, transform 0.15s ease;
}
.cine-preview__btn:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); }
.cine-preview__btn--play { background: var(--funprotec-orange); border-color: var(--funprotec-orange); color: var(--funprotec-on-brand); }
.cine-preview__btn--play:hover { background: #ff8d3a; }
.cine-preview__meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 0.7rem; font-size: 0.78rem; }
.cine-preview__chip { padding: 0.18rem 0.5rem; border-radius: 4px; background: rgba(255,255,255,0.14); font-weight: 700; }
.cine-preview__chip--marca { background: rgba(244,121,32,0.22); color: #fdba74; }
.cine-preview__resumen {
  margin: 0; font-size: 0.86rem; line-height: 1.45; color: #c9d3e3;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
@keyframes cine-preview-abre {
  from { opacity: 0; transform: scale(0.72); }
  to { opacity: 1; transform: scale(1); }
}

/* "Reducir movimiento" (2026-09-24): main.css apaga TODAS las animaciones con !important cuando está
   activo, y Windows lo activa al apagar los "Efectos de animación" — así estaba el PC del usuario,
   que no habría visto el estilo que pidió. Se devuelven las duraciones solo a estas piezas (mismo
   criterio que la excepción de .marquesina en main.css y el avance del carrusel). */
@media (prefers-reduced-motion: reduce) {
  .cine--salida { animation-duration: 0.6s !important; }
  .cine__pista { animation-duration: 0.6s, 1.1s !important; animation-iteration-count: 1, infinite !important; }
  .cine--salida .cine__foto { animation-duration: 2.6s !important; }
  .cine--salida .cine__barra, .cine--salida .cine__kicker { animation-duration: 0.8s !important; }
  .cine--salida .cine__nombre { animation-duration: 0.9s !important; }
  .cine--salida .cine__linea { animation-duration: 0.7s !important; }
  .cine--entrada, .cine--entrada .cine__barra { animation-duration: 0.9s !important; }
  .cine--entrada .cine__foto { animation-duration: 3.5s !important; }
  .cine--entrada .cine__titulo { animation-duration: 0.6s !important; }
  .cine.cine--saltar { animation-duration: 0.35s !important; }
  .hero-carousel--cine .hero-carousel__slide,
  .hero-carousel--cine .hero-carousel__slide.is-activa { transition-duration: 1.2s, 0s !important; }
  .hero-carousel--cine .hero-carousel__slide::before { animation-duration: 14s !important; animation-iteration-count: infinite !important; }
  .hero-carousel--cine .hero-carousel__slide.is-activa .inner > * { animation-duration: 0.8s !important; }
  .cine-preview { animation-duration: 0.28s !important; }
  .cine-preview__media img { animation-duration: 9s !important; }
  .cine-card__media img { transition-duration: 0.5s !important; }
  .cine-fila__flecha { transition-duration: 0.2s !important; }
}