/* =========================================================================
   portada — Hero, marquesina, encabezados de sección, selector de región e iconos.

   Tramo 3 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.
   ========================================================================= */

/* --------------------------------------------------------------------------
   5. Portada / hero
   -------------------------------------------------------------------------- */
.portada {
  position: relative;
  background: var(--rojo);
  overflow: hidden;
  isolation: isolate;
}
.portada::after {
  /* viñeta para dar profundidad al rojo plano */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .16), transparent 55%),
              radial-gradient(100% 80% at 50% 120%, rgba(0, 0, 0, .55), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

.portada__ondas {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 58%;
  width: 100%;
  opacity: .20;
  z-index: -1;
  pointer-events: none;
}

.portada__interior {
  padding-block: clamp(36px, 7vw, 76px) clamp(28px, 5vw, 52px);
}

.portada__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 22px;
}

.pastilla-vivo {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0, 0, 0, .32);
  border: 1px solid rgba(255, 255, 255, .28);
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  font-size: .72rem; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase;
}
.punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
  animation: latido 2s infinite;
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.portada__meta time,
.portada__meta .fuente-conteo {
  font-size: .78rem; font-weight: 700;
  color: rgba(255, 255, 255, .82);
  letter-spacing: .04em;
}

.portada__titulo {
  font-size: clamp(3.2rem, 19vw, 17rem);
  color: #fff;
  margin: 0;
  text-shadow: 0 10px 40px rgba(0, 0, 0, .28);
}
.portada__titulo span { display: block; }
.portada__titulo .anio {
  font-size: clamp(1.05rem, 4.2vw, 4rem);
  line-height: 1.15;
  letter-spacing: .1em;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .9);
  color: transparent;
  margin-top: .3em;
}

.portada__pie {
  display: grid;
  gap: 24px;
  margin-top: clamp(22px, 4vw, 40px);
  align-items: end;
}
@media (min-width: 900px) {
  .portada__pie { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
}

.portada__bajada {
  max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  color: rgba(255, 255, 255, .92);
  margin: 0;
}
.portada__bajada strong { font-weight: 900; }

.portada__cta { display: flex; flex-wrap: wrap; gap: 12px; }
/* El acceso a la gaceta, dorado, resalta sobre el rojo del hero. */
.portada__gaceta { box-shadow: 0 6px 20px rgba(0, 0, 0, .28); }
.portada__gaceta svg { width: 18px; height: 18px; }
.portada__gaceta:hover { background: #e9c33e; transform: translateY(-1px); }

/* Botón circular de reproducción, guiño a la referencia roja */
.play-grande {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .55);
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
  transition: background .2s, transform .2s;
}
.play-grande:hover { background: #fff; color: var(--rojo); transform: scale(1.05); }
.play-grande svg { width: 26px; height: 26px; margin-left: 4px; }
@media (min-width: 900px) { .play-grande { width: 108px; height: 108px; } }

/* --------------------------------------------------------------------------
   6. Marquesina
   -------------------------------------------------------------------------- */
.marquesina {
  background: var(--negro);
  border-block: 1px solid var(--linea);
  overflow: hidden;
  padding-block: 12px;
}
.marquesina__pista {
  display: flex;
  width: max-content;
  gap: 0;
  animation: correr 38s linear infinite;
}
.marquesina:hover .marquesina__pista { animation-play-state: paused; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.marquesina__grupo { display: flex; align-items: center; flex-shrink: 0; }
.marquesina__grupo span {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(.95rem, 2.4vw, 1.35rem);
  color: var(--rojo);
  padding-inline: 20px;
  white-space: nowrap;
}
.marquesina__grupo i {
  color: var(--oro-luz);
  font-style: normal;
  font-size: .85rem;
}

/* --------------------------------------------------------------------------
   7. Secciones y encabezados
   -------------------------------------------------------------------------- */
.seccion { padding-block: clamp(40px, 7vw, 80px); }
.seccion--linea { border-top: 1px solid var(--linea); }

.seccion__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: clamp(20px, 3vw, 34px);
}

.seccion__titulo {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  line-height: .92;
  margin: 6px 0 0;
}
.seccion__titulo em { font-style: normal; color: var(--rojo); }
.seccion__descripcion {
  color: var(--texto-2);
  max-width: 58ch;
  margin: 10px 0 0;
  font-size: .96rem;
}

.enlace-mas {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--oro-luz);
  font-weight: 900; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.enlace-mas:hover { color: var(--texto); }

/* --------------------------------------------------------------------------
   8. Selector de región (categorías principales)
   -------------------------------------------------------------------------- */
.regiones {
  position: sticky;
  top: 64px;
  z-index: 60;
  background: rgba(11, 11, 13, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}

.regiones__pista {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-block: 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.regiones__pista::-webkit-scrollbar { display: none; }

.ficha {
  flex-shrink: 0;
  scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: var(--sup-1);
  color: var(--texto-2);
  font-weight: 700; font-size: .88rem;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s;
}
.ficha:hover { color: var(--texto); border-color: var(--linea-fuerte); }
.ficha[aria-selected="true"] {
  background: var(--rojo);
  border-color: var(--rojo);
  color: #fff;
  box-shadow: var(--sombra-rojo);
}
.ficha__bandera { font-size: 1.05rem; line-height: 1; }

/* --------------------------------------------------------------------------
   Set de iconos. Un solo tamaño y un solo color heredado, para que menú,
   chips y píldoras se lean como la misma familia. Antes las regiones usaban
   emoji de bandera (a color, con el estilo del sistema) junto a entradas sin
   icono, y el conjunto se veía disparejo.
   -------------------------------------------------------------------------- */
.icono {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  display: inline-block;
  vertical-align: -.22em;
  color: currentColor;
}
/* En el cajón móvil los enlaces son de display grande: el icono se fija en
   píxeles para que no crezca con la tipografía de titular. */
.cajon a {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cajon .icono {
  width: 26px;
  height: 26px;
  color: #fff;
  opacity: .92;
}
/* Chips de región y píldoras: icono al mismo peso que el texto. */
.ficha .icono,
.cinema-tab .icono,
.cinema__region-pill .icono { width: 17px; height: 17px; }