/* ==========================================================================
   dato luminoso - catálogo de documentales (catalogo.css)
   Destacado de cine, filas deslizables y catálogo completo.
   Todos los colores salen de las variables de estilos.css.
   ========================================================================== */

/* Garantiza que el atributo hidden siempre oculte, aunque el elemento tenga display propio */
[hidden] {
  display: none !important;
}

:root {
  --ancho-contenido: 1550px;
  --margen-lateral: 24px;
  --tamano-destacado: clamp(26px, 3.2vw, 44px);
  --tamano-fila: 22px;
  --tamano-tarjeta: 15px;
  --radio-tarjeta: 8px;
  --sombra-imagen: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(158, 0, 93, 0.35);
}

/* --------------------------------------------------------------------------
   1. DESTACADO (cabecera cinematográfica rotativa)
   -------------------------------------------------------------------------- */
/* El destacado ocupa siempre todo el alto de la pantalla (menos la barra superior) */
.destacado {
  --alto-destacado: calc(100vh - var(--altura-barra-superior));
  --desfase-imagen: 0px;
  position: relative;
  width: 100%;
  height: var(--alto-destacado);
  min-height: 480px;
  overflow: hidden;
  background-color: #000;
  color: var(--color-texto-principal);
}

.diapositiva {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}

.diapositiva.activa {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s ease;
}

.diapositiva-fondo,
.diapositiva-imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Fondo: la misma imagen desenfocada rellena los espacios */
.diapositiva-fondo {
  inset: -60px;
  width: calc(100% + 120px);
  height: calc(100% + 120px);
  object-fit: cover;
  filter: blur(40px) brightness(0.55) saturate(1.2);
}

/* Imagen completa, sin recortes: a la derecha en pantallas anchas */
.diapositiva-imagen {
  object-fit: contain;
  object-position: right center;
}

@supports (height: 100svh) {
  .destacado {
    --alto-destacado: calc(100svh - var(--altura-barra-superior));
  }
}

/* Pantallas anchas: el borde izquierdo de la imagen se funde con el fondo */
@media (min-aspect-ratio: 16/9) {
  .diapositiva-imagen {
    -webkit-mask-image: linear-gradient(to right, transparent calc(100% - var(--alto-destacado) * 1.7778), #000 calc(100% - var(--alto-destacado) * 1.7778 + 260px));
    mask-image: linear-gradient(to right, transparent calc(100% - var(--alto-destacado) * 1.7778), #000 calc(100% - var(--alto-destacado) * 1.7778 + 260px));
  }
}

/* Pantallas menos anchas que el video (celular, tableta, monitor cuadrado):
   la imagen va completa arriba, a todo lo ancho, y se funde hacia el texto */
@media (max-aspect-ratio: 16/9) {
  .diapositiva-imagen {
    object-position: center var(--desfase-imagen);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--desfase-imagen) + 56.25vw - 110px), transparent calc(var(--desfase-imagen) + 56.25vw));
    mask-image: linear-gradient(to bottom, #000 calc(var(--desfase-imagen) + 56.25vw - 110px), transparent calc(var(--desfase-imagen) + 56.25vw));
  }
}

.diapositiva-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 38%, rgba(0, 0, 0, 0) 68%),
    linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 55%);
}

.diapositiva-contenido {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 64px;
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0 var(--margen-lateral);
}

.diapositiva-contenido > * {
  max-width: 640px;
}

.diapositiva-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-texto-secundario);
}

.insignia {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--degradado-principal);
  color: var(--color-texto-principal);
  font-size: 12px;
  font-weight: 700;
  text-transform: lowercase;
}

.chip-calidad {
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.diapositiva-titulo {
  font-size: var(--tamano-destacado);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-bottom: 14px;
}

.diapositiva-resumen {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-texto-secundario);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 22px;
}

.diapositiva-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.boton-ver,
.boton-detalles {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: 6px;
  font-family: var(--fuente-principal);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transicion-suave);
}

.boton-ver {
  background: var(--color-fondo-base);
  color: #000;
}

.boton-ver svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.boton-ver:hover {
  background: var(--degradado-principal);
  color: var(--color-texto-principal);
}

.boton-detalles {
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-texto-principal);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.boton-detalles:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Indicadores de progreso de la rotación */
.destacado-indicadores {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0 var(--margen-lateral);
  display: flex;
  gap: 8px;
}

.indicador {
  position: relative;
  flex: 0 0 44px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.indicador::before,
.indicador::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
}

.indicador::before {
  right: 0;
  background: rgba(255, 255, 255, 0.3);
}

.indicador::after {
  width: 0;
  background: var(--color-texto-principal);
}

.indicador.visto::after {
  width: 100%;
}

.indicador.activo::after {
  animation: progreso-indicador var(--duracion-diapositiva, 8s) linear forwards;
}

.destacado.pausado .indicador.activo::after {
  animation-play-state: paused;
}

@keyframes progreso-indicador {
  from { width: 0; }
  to   { width: 100%; }
}

/* Estado de carga y de error del destacado */
.destacado-cargando {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, #111 30%, #1c1c1c 50%, #111 70%);
  background-size: 200% 100%;
  animation: brillo-carga 1.6s linear infinite;
}

@keyframes brillo-carga {
  to { background-position: -200% 0; }
}

.destacado-aviso {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--margen-lateral);
  text-align: center;
  font-size: 15px;
  color: var(--color-texto-secundario);
}

/* --------------------------------------------------------------------------
   2. FILAS DESLIZABLES
   -------------------------------------------------------------------------- */
.fila {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding-top: 44px;
  scroll-margin-top: var(--altura-barra-superior);
}

.fila-encabezado {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 0 var(--margen-lateral);
}

.fila-titulo {
  font-size: var(--tamano-fila);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-texto-negro);
  text-transform: lowercase;
}

.fila-descripcion {
  margin-top: 2px;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-texto-negro) 62%, transparent);
}

.fila-controles {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.fila-ver-todo {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-principal-solido);
  text-decoration: none;
  white-space: nowrap;
}

.fila-ver-todo:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.fila-flechas {
  display: none;
  gap: 8px;
}

.flecha {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--color-fondo-gris-tarjetas);
  color: var(--color-texto-negro);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: var(--transicion-suave);
}

.flecha svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
}

.flecha:hover:not(:disabled) {
  background: var(--color-principal-solido);
  color: var(--color-texto-principal);
}

.flecha:disabled {
  opacity: 0.35;
  cursor: default;
}

.fila-pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--margen-lateral);
  padding: 4px var(--margen-lateral) 12px;
  scrollbar-width: none;
}

.fila-pista::-webkit-scrollbar {
  display: none;
}

.fila-pista > * {
  scroll-snap-align: start;
}

.fila-shorts .fila-pista {
  grid-auto-columns: 42%;
}

/* --------------------------------------------------------------------------
   3. TARJETAS
   -------------------------------------------------------------------------- */
.tarjeta {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  font-family: var(--fuente-principal);
  color: var(--color-texto-negro);
  cursor: pointer;
}

.tarjeta-imagen {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  background-color: var(--color-fondo-gris-tarjetas);
  box-shadow: var(--sombra-imagen);
}

.tarjeta-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tarjeta-duracion {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--color-texto-principal);
  font-size: 12px;
  font-weight: 600;
}

.tarjeta-titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 10px;
  font-size: var(--tamano-tarjeta);
  font-weight: 700;
  line-height: 1.35;
  text-wrap: pretty;
}

.tarjeta-subtitulo {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-texto-negro) 60%, transparent);
}

/* Tarjeta vertical de short: el título va sobre la imagen */
.tarjeta-short .tarjeta-imagen {
  aspect-ratio: 9 / 16;
}

.tarjeta-short .tarjeta-imagen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0) 50%);
}

.tarjeta-short .tarjeta-titulo {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  margin: 0;
  font-size: 14px;
  color: var(--color-texto-principal);
  -webkit-line-clamp: 3;
}

.tarjeta-short .tarjeta-duracion {
  top: 8px;
  bottom: auto;
}

/* Foco visible para teclado */
.tarjeta:focus-visible .tarjeta-imagen,
.boton-ver:focus-visible,
.boton-detalles:focus-visible,
.flecha:focus-visible,
.indicador:focus-visible,
.boton-mas:focus-visible,
.fila-ver-todo:focus-visible {
  outline: 3px solid var(--color-principal-solido);
  outline-offset: 3px;
}

/* Esqueletos de carga */
.tarjeta-esqueleto .tarjeta-imagen {
  box-shadow: none;
}

.tarjeta-esqueleto .linea-esqueleto {
  display: block;
  height: 14px;
  width: 80%;
  margin-top: 12px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   4. CATÁLOGO COMPLETO
   -------------------------------------------------------------------------- */
.catalogo {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 56px var(--margen-lateral) 8px;
  scroll-margin-top: var(--altura-barra-superior);
}

.catalogo .fila-encabezado {
  padding: 0;
}

.rejilla-catalogo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 14px;
}

.rejilla-catalogo .tarjeta-titulo {
  font-size: 14px;
}

.catalogo-pie {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.boton-mas {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  min-height: 46px;
  padding: 0 28px;
  border: 2px solid var(--color-principal-solido);
  border-radius: 6px;
  background: none;
  color: var(--color-principal-solido);
  font-family: var(--fuente-principal);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transicion-suave);
}

.boton-mas:hover {
  background: var(--color-principal-solido);
  color: var(--color-texto-principal);
}

/* --------------------------------------------------------------------------
   5. TABLETA Y ESCRITORIO
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .fila-pista { grid-auto-columns: 42%; }
  .fila-shorts .fila-pista { grid-auto-columns: 26%; }
  .rejilla-catalogo { grid-template-columns: repeat(3, 1fr); gap: 26px 18px; }
  .rejilla-catalogo .tarjeta-titulo { font-size: var(--tamano-tarjeta); }
}

@media (min-width: 1024px) {
  :root { --margen-lateral: 48px; }
  .fila-flechas { display: flex; }
  .fila-pista { grid-auto-columns: calc((100% - 3 * 18px - 2 * var(--margen-lateral)) / 4); gap: 18px; }
  .fila-shorts .fila-pista { grid-auto-columns: calc((100% - 5 * 18px - 2 * var(--margen-lateral)) / 6); }
  .rejilla-catalogo { grid-template-columns: repeat(4, 1fr); }
  .diapositiva-contenido { bottom: 88px; }
  .destacado-indicadores { bottom: 40px; }
  .diapositiva-resumen { font-size: 16px; }

  .tarjeta:hover .tarjeta-imagen img { transform: scale(1.05); }
  .tarjeta:hover .tarjeta-titulo { color: var(--color-principal-solido); }
  .tarjeta-short:hover .tarjeta-titulo { color: var(--color-texto-principal); }
}

@media (max-width: 480px) {
  :root { --margen-lateral: 20px; }
  .diapositiva-contenido { bottom: 56px; }
  .boton-ver, .boton-detalles { justify-content: center; padding: 0 18px; }
  .boton-ver { flex: 1.5 1 0; }
  .boton-detalles { flex: 1 1 0; }
}

/* Con la barra inferior de app, el texto y los indicadores quedan por encima de ella */
@media (max-width: 1023px) {
  body.con-barra-app .diapositiva-contenido { bottom: calc(126px + env(safe-area-inset-bottom, 0px)); }
  body.con-barra-app .destacado-indicadores { bottom: calc(102px + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------------------
   6. MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .diapositiva, .diapositiva.activa { transition: none; }

  .indicador.activo::after { animation: none; width: 100%; }
  .tarjeta-imagen img { transition: none; }
}