/* =========================================================================
   noticias — Listado de prensa, cinema de videos y miniaturas.

   Tramo 7 de 14 de la hoja que antes era una sola (`tendencias.css`, 4 671
   líneas). Los tramos son CONTIGUOS y se cargan en este mismo orden: el
   orden de carga es la cascada, así que mover una hoja de sitio puede
   cambiar qué regla gana sin que nada falle. Si hace falta reordenar, se
   comprueba con `npm run huella` y no razonando.
   ========================================================================= */

/* --------------------------------------------------------------------------
   Noticias — listado de prensa musical (RSS).
   -------------------------------------------------------------------------- */
/* Rejilla de tarjetas. En una sola columna la miniatura 16:9 se estiraba a lo
   ancho del contenedor y una tarjeta ocupaba media pantalla; en rejilla la
   imagen queda contenida y se pueden comparar varias notas de un vistazo. */
.noticias-lista {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 680px)  { .noticias-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .noticias-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.noticia {
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--sup-1);
  overflow: hidden;
  height: 100%;
  transition: border-color .18s ease, transform .18s ease;
}
.noticia:hover { border-color: var(--linea-fuerte); }
.noticia__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 16px;
  color: inherit;
  text-decoration: none;
}
/* Todo lo que no es la miniatura respira con el mismo margen lateral. */
.noticia__link > :not(.noticia__miniatura) { margin-inline: 16px; }
.noticia__fuente {
  display: block;
  font: 700 11px/1 var(--texto-fuente);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oro-luz);
  margin-top: 14px;
  margin-bottom: 8px;
}
.noticia__titulo {
  font: 700 1.02rem/1.35 var(--texto-fuente);
  margin: 0 0 8px;
  color: var(--texto);
  /* Tres líneas máximo: los titulares varían mucho y sin tope las tarjetas
     de una misma fila quedaban de alturas muy distintas. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.noticia__link:hover .noticia__titulo { color: var(--rojo-claro); }
.noticia__fecha {
  display: block;
  font-size: 12.5px;
  color: var(--texto-3);
  margin-bottom: 6px;
}
.noticia__menciones {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.noticia__mencion {
  font: 600 11px/1 var(--texto-fuente);
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  color: var(--texto-2);
}
/* Mención de catálogo: chip lleno de oro de marca — sin translucidez, se
   distingue de una a otra sin depender del degradado de fondo. */
.noticia__mencion--catalogo {
  color: var(--negro);
  border-color: var(--oro-luz);
  background: var(--oro-luz);
}
.noticia__mencion--candidato {
  color: var(--texto-3);
  border-style: dashed;
}
/* Título original bajo la traducción — pequeño, discreto, sólo si difiere. */
.noticia__original {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--texto-3);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Cinema de videos.

   Escenario a sangre completa con el contenido superpuesto sobre el propio
   video, y las tarjetas de "siguientes" flotando encimadas a la derecha.
   Antes esto era una rejilla lado-a-lado (video izquierda, lista derecha) y
   se leia como cualquier reproductor generico: sin jerarquia y sin drama.
   -------------------------------------------------------------------------- */

.cinema-cabeza { margin-bottom: clamp(20px, 3vw, 32px); }

.cinema-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cinema-tab {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--texto-2);
  font-weight: 700;
  font-size: .82rem;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .18s, color .18s, border-color .18s;
}
.cinema-tab:hover { color: var(--texto); border-color: var(--linea-fuerte); background: rgba(255,255,255,.10); }
.cinema-tab--activa { background: var(--rojo); border-color: var(--rojo); color: #fff; }

/* ---------------------------------------------------------- el escenario */
.cinema {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--sup-1);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95);
  isolation: isolate;
}

/* Lienzo del video: la miniatura llena todo y se oscurece con capas. */
.cinema__lienzo { position: absolute; inset: 0; z-index: 0; }
.cinema__lienzo img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Escala un pelo para que el recorte no muestre franjas negras del thumb. */
  transform: scale(1.06);
}
/* Respaldo cuando el video no trae miniatura (datos demo o 404 de ytimg). */
.cinema__lienzo[data-sin-imagen] { background: var(--rojo-osc); }
.cinema__lienzo[data-sin-imagen] img { display: none; }

/* Dos velos: uno lateral para que el texto tenga contraste sobre la imagen,
   otro inferior para asentar la barra de progreso. Sin ellos el titular
   compite con la foto y no se lee. */
.cinema__velo {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(9, 9, 11, .96) 0%, rgba(9, 9, 11, .80) 34%, rgba(9, 9, 11, .30) 62%, rgba(9, 9, 11, .58) 100%),
    linear-gradient(to top, rgba(9, 9, 11, .95) 0%, transparent 44%);
}

.cinema__cuerpo {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 20px;
  padding: clamp(20px, 3vw, 34px);
  min-height: clamp(430px, 46vw, 660px);
  grid-template-rows: auto 1fr auto;
}
@media (min-width: 900px) {
  .cinema__cuerpo { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 376px); }
  .cinema__barra-sup { grid-column: 1 / -1; }
  .cinema__pie { grid-column: 1 / -1; }
}

/* Barra superior: fuente a la izquierda, region a la derecha. */
.cinema__barra-sup { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cinema__marca {
  display: inline-flex; align-items: center; gap: 8px;
  font: 900 .72rem/1 var(--texto-fuente);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .84);
}
.cinema__marca svg { width: 17px; height: 17px; }
.cinema__region-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .20);
  font-weight: 700; font-size: .8rem;
  color: #fff;
}

/* ------------------------------------------------------- info del video */
.cinema__info { align-self: end; max-width: 44ch; display: grid; gap: 10px; }
.cinema__canal {
  font: 900 .72rem/1 var(--texto-fuente);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro-luz);
  margin: 0;
}
.cinema__titulo {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4.4vw, 3.4rem);
  line-height: .94;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0;
  /* Maximo dos lineas: los titulos de YouTube son larguisimos y sin esto el
     escenario crece de forma impredecible. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cinema__datos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .86rem;
  color: rgba(255, 255, 255, .74);
  margin: 0;
}
.cinema__datos span + span::before { content: "\00b7"; margin-right: 8px; opacity: .55; }
.cinema__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Boton de play grande sobre el escenario. */
.cinema__play {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: clamp(72px, 7.5vw, 100px);
  aspect-ratio: 1;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid; place-items: center;
  color: #fff;
  padding: 0;
  transition: transform .2s, background .2s, border-color .2s;
}
.cinema__play svg { width: 40%; height: 40%; margin-left: 8%; }
.cinema__play:hover { background: var(--rojo); border-color: var(--rojo); transform: translate(-50%, -50%) scale(1.06); }
@media (min-width: 900px) {
  /* En desktop se corre a la izquierda para no chocar con la pila. */
  .cinema__play { left: 33%; }
}

/* --------------------------------------------------- pila de siguientes */
.cinema__pila { align-self: center; display: none; }
@media (min-width: 900px) { .cinema__pila { display: block; } }

.cinema__pila-titulo {
  margin: 0 0 12px;
  font: 900 .68rem/1 var(--texto-fuente);
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.cinema__lista { display: flex; flex-direction: column; gap: 0; }
/* Margen negativo suave para dar sensacion de baraja sin que el texto de una
   tarjeta quede tapado por la siguiente: con -13px se pisaban los subtitulos.
   Las de abajo se van hundiendo en z-index para que el apilado se lea. */
.cinema__lista > li { margin-top: -7px; position: relative; }
.cinema__lista > li:first-child { margin-top: 0; }
.cinema__lista > li:nth-child(1) { z-index: 4; }
.cinema__lista > li:nth-child(2) { z-index: 3; }
.cinema__lista > li:nth-child(3) { z-index: 2; }
.cinema__lista > li:nth-child(4) { z-index: 1; }

.cinema-card {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  /* Altura fija: los titulos varian entre una y dos lineas y sin esto las
     tarjetas quedaban de distinto alto, que era justo lo que se veia mal. */
  height: 82px;
  padding: 10px;
  text-align: left;
  color: inherit;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(22, 22, 27, .58);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 18px 34px -20px rgba(0, 0, 0, .9);
  transition: transform .22s, background .22s, border-color .22s, box-shadow .22s;
  cursor: pointer;
}
.cinema-card:hover {
  background: rgba(32, 32, 39, .80);
  border-color: rgba(255, 255, 255, .30);
  transform: translateX(-6px);
  z-index: 5;
}
.cinema-card--activa {
  background: rgba(30, 30, 36, .92);
  border-color: rgba(255, 255, 255, .46);
  transform: scale(1.04) translateX(-10px);
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .95);
  z-index: 6;
}
.cinema-card--activa:hover { transform: scale(1.04) translateX(-14px); }

.cinema-card__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 9px;
  overflow: hidden;
  background: var(--rojo-osc);
}
.cinema-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.cinema-card__cuerpo { min-width: 0; display: grid; gap: 3px; align-content: center; }
.cinema-card__titulo {
  font-weight: 700;
  font-size: .82rem;
  line-height: 1.28;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserva el alto de dos lineas siempre, para que un titulo de una sola
     no encoja la tarjeta ni desalinee el subtitulo respecto a las vecinas. */
  min-height: calc(2 * 1.28em);
}
/* La activa NO cambia de tamano de letra: hacerlo movia el texto de sitio al
   cambiar de video. Se distingue por fondo, borde y escala del contenedor. */
.cinema-card__sub {
  font-size: .72rem;
  color: rgba(255, 255, 255, .62);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Barra roja de la tarjeta activa. Va posicionada al fondo en vez de ocupar
   una fila propia: si empujara el layout, la tarjeta activa creceria y
   volveriamos a tener alturas distintas. */
.cinema-card__progreso {
  position: absolute;
  left: 10px; right: 10px; bottom: 7px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
  display: none;
}
.cinema-card--activa .cinema-card__progreso { display: block; }
.cinema-card__progreso i { display: block; height: 100%; width: 38%; background: var(--rojo); }

/* --------------------------------------------------------------- el pie */
.cinema__pie { align-self: end; display: flex; align-items: center; gap: 14px; }
.cinema__linea {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  overflow: hidden;
}
.cinema__linea i { display: block; height: 100%; background: var(--rojo); }
.cinema__conteo {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .76);
  white-space: nowrap;
}

/* ------------------------------------------------- carrusel para movil */
.cinema-movil {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 12px;
  /* Filas de alto fijo: en grid de una fila los items se estiran al mas alto,
     y con scroll horizontal eso se leia como tarjetas de distinto tamano. */
  grid-auto-rows: 82px;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 16px 0 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
@media (min-width: 520px) { .cinema-movil { grid-auto-columns: 52%; } }
.cinema-movil::-webkit-scrollbar { display: none; }
.cinema-movil > li { scroll-snap-align: start; }
@media (min-width: 900px) { .cinema-movil { display: none; } }

/* Al dar play el video ocupa el escenario, pero la lista de siguientes se
   queda: antes se ocultaba el cuerpo entero y no quedaba forma de saltar a
   otro video sin recargar. La pila pasa a una tira horizontal bajo el
   reproductor. */
.cinema__marco { position: relative; z-index: 4; }
.cinema__marco iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
/* Reproductor "cebado": inicializado (para el sonido en iOS) pero colapsado e
   invisible hasta que se toca play. No display:none, o iOS no lo inicializa. */
.cinema__marco.cine-cebado { max-height: 0; overflow: hidden; opacity: 0; }

.cinema--reproduciendo .cinema__lienzo,
.cinema--reproduciendo .cinema__velo,
.cinema--reproduciendo .cinema__play,
.cinema--reproduciendo .cinema__barra-sup { display: none; }

/* Durante la reproducción se ocultan el título, los datos y los botones de
   "Reproducir / Ver en YouTube" —ya son redundantes con el iframe— PERO se
   conserva el bloque de hype, guardar y compartir: apoyar o guardar el video
   que estás viendo es justo cuando más sentido tiene, y antes desaparecía. */
.cinema--reproduciendo .cinema__canal,
.cinema--reproduciendo .cinema__titulo,
.cinema--reproduciendo .cinema__datos,
.cinema--reproduciendo .cinema__acciones { display: none; }
.cinema--reproduciendo .cinema__info { display: block; margin-top: 12px; }
.cinema--reproduciendo [data-cinema-acciones] { margin: 0; }

.cinema--reproduciendo .cinema__cuerpo {
  min-height: 0;
  grid-template-columns: 1fr;
  padding-top: 0;
}
.cinema--reproduciendo .cinema__pila {
  display: block;
  position: static;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.cinema--reproduciendo .cinema__lista {
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.cinema--reproduciendo .cinema__lista > li {
  margin-top: 0;
  flex: 0 0 clamp(230px, 24vw, 300px);
}
/* En la tira horizontal el encimado y la escala estorban: las tarjetas se
   pisarían entre columnas en vez de apilarse. */
.cinema--reproduciendo .cinema-card,
.cinema--reproduciendo .cinema-card:hover,
.cinema--reproduciendo .cinema-card--activa { transform: none; }
.cinema--reproduciendo .cinema-movil { display: none; }

/* En escritorio el video en reproducción llenaba todo el ancho del cinema y
   quedaba enorme. Se acota y se centra: más compacto sin perder nada, y la
   tira de "Más videos" sigue debajo a lo ancho. */
@media (min-width: 900px) {
  .cinema--reproduciendo .cinema__marco {
    max-width: min(860px, calc((100vh - 220px) * 16 / 9));
    margin-inline: auto;
    width: 100%;
  }
}

/* Adelanto de notas en la portada: rejilla en vez de la columna de /noticias. */
.noticias-lista--portada {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .noticias-lista--portada { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .noticias-lista--portada { grid-template-columns: repeat(3, 1fr); } }
.noticias-lista--portada .noticia__titulo {
  font-size: .98rem;
  /* Tres lineas maximo para que las tarjetas de la rejilla queden parejas. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Miniatura en las tarjetas del listado de notas.
   -------------------------------------------------------------------------- */
.noticia__miniatura {
  display: block;
  /* El ancho va explícito: dentro de un flex en columna, un bloque con
     aspect-ratio y sin ancho declarado se dimensiona a partir de la altura y
     la imagen quedaba angosta, sin llegar a los bordes de la tarjeta. */
  width: 100%;
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--rojo-osc);
  border-bottom: 1px solid var(--linea);
}
.noticia__miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sustituto cuando el medio no publica imagen (los enlaces de Google News no
   se pueden resolver hasta la página real). Bloque de color de la paleta con
   el nombre del medio, para que la tarjeta no quede hueca. */
.noticia__miniatura--vacia {
  display: grid;
  place-items: center;
  padding: 12px;
}
.noticia__marca {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .92);
  text-align: center;
  line-height: 1.05;
}
/* La fecha se empuja al fondo para que quede alineada entre tarjetas de la
   misma fila aunque los titulares ocupen distinto número de líneas. */
.noticia__fecha { margin-top: auto; }
/* El titular original es contexto de la ficha, no de la tarjeta: en la
   rejilla duplicaba el texto y estorbaba. */
.noticias-lista .noticia__original { display: none; }