/* ==========================================================================
   AZTECH METAL - CAPA DE REFINAMIENTO
   Se carga después de styles.css y newsroom.css. Ajusta tres cosas:
     1. Tipografía de datos: fuera el aire de terminal, entra una grotesca.
     2. Titulares: condensados de prensa, con jerarquía más fina.
     3. Movimiento: micro-interacciones de 180-260ms, todas con salida suave.
   Todo el movimiento se apaga bajo prefers-reduced-motion (al final).
   ========================================================================== */

/* ==========================================================================
   1. TIPOGRAFÍA DE DATOS
   Antes: Space Mono en fechas, kickers, etiquetas y agenda. Se leía como
   consola de los noventa. Ahora Barlow, con el tracking y el peso ajustados
   para que siga funcionando como dato sin gritar.
   ========================================================================== */

.nw-kicker,
.nw-breaking-kicker,
.nw-breaking-label,
.nw-ranked-kicker,
.nw-agenda-date,
.nw-tab,
.nw-label,
.nw-section-link,
.card-tag,
.meta-pill,
.callout-title,
.article-sources,
.cluster-kicker,
.parchment-tag,
.parchment-date,
.band-genre-pill,
.track-badge,
.history-time,
.player-live-badge,
.listeners-label {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-feature-settings: 'tnum' 1;   /* cifras de ancho fijo: las fechas alinean */
}

/* Kicker de sección: el detalle que más se repite en la página.
   Peso 600 y tracking amplio le dan aire; en 700 se veía apelmazado. */
.nw-kicker,
.nw-breaking-kicker,
.nw-ranked-kicker {
  font-weight: 600;
  letter-spacing: 0.16em;
  font-size: 0.63rem;
}

.nw-breaking-label {
  font-weight: 600;
  letter-spacing: 0.16em;
  font-size: 0.64rem;
}

/* Metadatos: fecha y tiempo de lectura. Barlow a 500 se lee sin competir
   con el titular que tiene encima. */
.nw-meta,
.nw-wire-time {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-feature-settings: 'tnum' 1;
}

.nw-wire-hour {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.nw-tab {
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

.nw-agenda-date {
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   2. TITULARES
   Barlow Condensed para las cabeceras de sección y la portada: condensa como
   la prensa impresa y tiene pesos reales, a diferencia de Bebas que solo
   trae uno. Los títulos de nota se quedan en la de cuerpo para que la
   página no sea un muro de mayúsculas.
   ========================================================================== */

.nw-lead-title {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.02;
  font-size: clamp(2.1rem, 3.7vw, 3.4rem);
}

.nw-section-title {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-weight: 700;
  font-size: 1.62rem;
  letter-spacing: 0.01em;
}

.nw-feature-title {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.06;
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
}

/* Títulos de nota: sin mayúsculas forzadas y con interlínea más generosa.
   Es lo que hace que la lista se lea como periódico y no como cartelera. */
.nw-wire-title,
.nw-side-title,
.nw-album-title {
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.nw-wire-title { font-size: 1.16rem; line-height: 1.34; }
.nw-side-title { font-size: 0.98rem; line-height: 1.36; }
.nw-album-title { font-size: 1.02rem; line-height: 1.34; }

/* Cuerpo: un punto más de interlínea y color menos duro. */
.nw-wire-excerpt,
.nw-album-excerpt,
.nw-lead-deck,
.nw-feature-deck {
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.62;
}

/* La regla de sección: fina y con un tramo de acento, en vez del subrayado
   grueso de 2px que pesaba en cada bloque. */
.nw-section-head {
  border-bottom: 1px solid var(--maroon-grid-strong);
  position: relative;
  padding-bottom: 0.7rem;
}

.nw-section-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 2px;
  background: var(--neon-crimson, #FF3B34);
}

/* ==========================================================================
   3. MOVIMIENTO
   Regla de la casa: 180-260ms, salida suave, y solo donde comunica algo.
   Nada de animación decorativa en bucle salvo el hilo de última hora.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Entrada escalonada de las notas -------------------------------------
   Las tarjetas aparecen en cascada corta. Comunica orden de lectura:
   el ojo baja siguiendo la secuencia en vez de recibir el bloque entero. */
@keyframes nw-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.is-visible .nw-wire-item,
.is-visible .nw-album,
.is-visible .nw-side-card {
  animation: nw-enter 0.5s var(--ease-out) both;
}

.is-visible .nw-wire-item:nth-child(1),
.is-visible .nw-side-card:nth-child(1) { animation-delay: 0.02s; }
.is-visible .nw-wire-item:nth-child(2),
.is-visible .nw-side-card:nth-child(2) { animation-delay: 0.06s; }
.is-visible .nw-wire-item:nth-child(3),
.is-visible .nw-side-card:nth-child(3) { animation-delay: 0.10s; }
.is-visible .nw-wire-item:nth-child(4) { animation-delay: 0.14s; }
.is-visible .nw-wire-item:nth-child(5) { animation-delay: 0.18s; }
.is-visible .nw-wire-item:nth-child(n+6) { animation-delay: 0.22s; }

/* --- Imágenes ------------------------------------------------------------
   Zoom más contenido que antes (1.04 se sentía brusco) y un velo que se
   levanta: la foto se aclara al apuntarla, señal de que es un enlace. */
.nw-lead-media,
.nw-side-media,
.nw-wire-media,
.nw-feature-media,
.nw-album-media {
  position: relative;
  cursor: pointer;
}

.nw-lead-img,
.nw-side-img,
.nw-wire-img,
.nw-feature-img,
.nw-album-img {
  transition: transform 0.6s var(--ease-soft), filter 0.35s var(--ease-out);
  filter: saturate(0.92) brightness(0.92);
}

.nw-lead-media:hover .nw-lead-img,
.nw-side-media:hover .nw-side-img,
.nw-wire-media:hover .nw-wire-img,
.nw-feature-media:hover .nw-feature-img,
.nw-album-media:hover .nw-album-img {
  transform: scale(1.03);
  filter: saturate(1.05) brightness(1);
}

/* --- Fila de noticia -----------------------------------------------------
   Al apuntar una fila entera se enciende un filo rojo a la izquierda y el
   fondo sube un punto. Deja claro qué renglón está activo en una lista larga. */
.nw-wire-item {
  position: relative;
  cursor: pointer;
  transition: background 0.24s var(--ease-out);
  padding-left: 0.9rem;
  margin-left: -0.9rem;
  border-radius: 3px;
}

.nw-wire-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 2px;
  background: var(--neon-crimson, #FF3B34);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.26s var(--ease-out);
}

.nw-wire-item:hover {
  background: rgba(255, 255, 255, 0.022);
}

.nw-wire-item:hover::before { transform: scaleY(1); }

/* --- Títulos: subrayado que se despliega -------------------------------- */
.nw-wire-title a,
.nw-side-title a,
.nw-album-title a,
.nw-lead-title a,
.nw-feature-title a {
  background-image: linear-gradient(var(--neon-crimson, #FF3B34), var(--neon-crimson, #FF3B34));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.3s var(--ease-out), color 0.2s ease;
  padding-bottom: 1px;
}

.nw-wire-title a:hover,
.nw-side-title a:hover,
.nw-album-title a:hover,
.nw-lead-title a:hover,
.nw-feature-title a:hover {
  background-size: 100% 1px;
}

/* --- Pestañas y etiquetas ------------------------------------------------ */
.nw-tab,
.nw-topic {
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out);
}

.nw-tab:hover:not(.is-active) {
  background: rgba(255, 59, 52, 0.08);
  border-color: var(--neon-crimson, #FF3B34);
}

.nw-topic:hover { background: var(--red-fill, #D91F26); }

/* --- Botones: hundido al presionar --------------------------------------- */
.btn-primary-cta,
.btn-secondary-cta,
.nw-rail-cta,
.btn-request-song {
  transition: background 0.2s var(--ease-out), transform 0.12s var(--ease-out),
              box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.btn-primary-cta:active,
.btn-secondary-cta:active,
.nw-rail-cta:active,
.btn-request-song:active { transform: translateY(1px); }

/* --- Columna lateral ----------------------------------------------------- */
.nw-rail-card {
  transition: border-color 0.28s var(--ease-out), background 0.28s var(--ease-out);
}

.nw-rail-card:hover { border-color: rgba(255, 59, 52, 0.34); }

.nw-ranked-item a,
.nw-agenda-link { transition: color 0.2s var(--ease-out); }

.nw-ranked-item::before {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 1.28rem;
  font-weight: 700;
  opacity: 0.85;
}

/* --- Reportaje destacado ------------------------------------------------- */
.nw-feature {
  transition: border-color 0.3s var(--ease-out);
}

.nw-feature:hover { border-color: rgba(255, 59, 52, 0.4); }

/* ==========================================================================
   3b. CABECERA DE PORTADA
   El golpe de marca antes de la primera nota. Grande pero compacta: si ocupa
   media pantalla, entierra la noticia principal, que es lo que la gente vino
   a leer.
   ========================================================================== */

.nw-masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1rem 0 1.5rem;
}

.nw-masthead-title {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  font-size: clamp(3.4rem, 8vw, 7rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.nw-masthead-dot { color: var(--neon-crimson, #FF3B34); }

.nw-masthead-sub {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  max-width: 34ch;
  margin: 0 0 0.6rem;
  text-align: right;
}

/* La nota principal manda: titular grande y foto a lo ancho de su columna.
   La foto se recorta más apaisada a propósito. Con 16/9 el titular caía
   debajo del pliegue, y en un diario el titular principal se lee sin scroll. */
.nw-lead-media {
  aspect-ratio: 2 / 1;
  max-height: 420px;
}

.nw-lead-title {
  font-size: clamp(2.1rem, 3.5vw, 3.2rem);
  line-height: 1.0;
  letter-spacing: -0.012em;
}

.nw-lead-deck {
  font-size: 1.02rem;
  max-width: 58ch;
}

@media (max-width: 860px) {
  .nw-masthead { padding: 0.6rem 0 1.4rem; }
  .nw-masthead-sub { text-align: left; max-width: 100%; font-size: 0.86rem; }
}

/* ==========================================================================
   4. AIRE
   Más espacio entre bloques. El apretado hacía que todo compitiera.
   ========================================================================== */

.nw-section { margin-bottom: 4.25rem; }
.nw-section-head { margin-bottom: 1.8rem; }
.nw-wire-item { padding-top: 1.55rem; padding-bottom: 1.55rem; }
.nw-frontpage { padding-bottom: 3rem; gap: 2.4rem; }
.nw-body-grid { padding-top: 3rem; gap: 3.4rem; }
.nw-lead-text { padding-top: 1.5rem; }

/* Separadores más tenues: la retícula se sugiere, no se impone. */
.nw-wire-item { border-bottom-color: rgba(255, 255, 255, 0.07); }
.nw-side-card + .nw-side-card { border-top-color: rgba(255, 255, 255, 0.08); }
.nw-ranked-item,
.nw-agenda-item { border-top-color: rgba(255, 255, 255, 0.08); }

/* ==========================================================================
   4b. CABECERA EN PANTALLAS CHICAS
   El header es una rejilla de columnas fijas. Debajo de 1024px esas columnas
   dejan al menú una celda de 78px y los enlaces salen cortados ("INTERNACI").
   Aquí pasa a caja flexible: logo y acciones arriba, menú deslizable debajo.
   ========================================================================== */
@media (max-width: 1024px) {
  .cinematic-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 0.55rem;
  }
  .cinematic-header .brand-logo { flex: 0 0 auto; }
  .cinematic-header .header-actions { flex: 0 0 auto; margin-left: auto; }
  .cinematic-header .header-nav {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    /* flex-start es obligatorio: con el centrado que trae el header, un menú
       más ancho que la pantalla desborda por los DOS lados y los primeros
       enlaces quedan fuera de alcance, sin forma de deslizarse hasta ellos. */
    justify-content: flex-start;
    gap: 1.15rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.15rem;
  }
  .cinematic-header .header-nav::-webkit-scrollbar { display: none; }
  .cinematic-header .header-nav .nav-link { white-space: nowrap; flex: 0 0 auto; }
  .cinematic-header .brand-logo-img { max-height: 34px; width: auto; }
}

/* Relacionados al pie del artículo: mismo criterio que la portada, títulos
   sin mayúsculas forzadas para que se lean como titulares y no como cartelera. */
.cluster-card .card-title {
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.34;
  letter-spacing: -0.01em;
  text-transform: none;
}

.cluster-card .card-excerpt { line-height: 1.6; }

/* ==========================================================================
   5. MOVIMIENTO REDUCIDO
   Si el sistema pide menos animación, todo queda en su estado final.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .is-visible .nw-wire-item,
  .is-visible .nw-album,
  .is-visible .nw-side-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .nw-wire-item::before { transition: none; }
  .nw-lead-img, .nw-side-img, .nw-wire-img, .nw-feature-img, .nw-album-img {
    transition: none;
    filter: none;
  }
  .nw-wire-title a, .nw-side-title a, .nw-album-title a,
  .nw-lead-title a, .nw-feature-title a { transition: none; }
}

/* ==========================================================================
   QUE NO SE PIERDA CONTENIDO

   Un hijo de grid o de flex trae min-width: auto de fábrica: no puede
   encogerse por debajo de su contenido. Cuando la columna es más angosta que
   una imagen o que una palabra larga, el hijo se desborda y tapa a su vecino
   —que fue justo lo que pasó con el reportaje de la semana: la portada se
   comía el titular.

   Esto lo apaga en los contenedores del sitio. Es la regla que evita toda esa
   familia de fallas de una vez.
   ========================================================================== */
.hm-ultimo-alta > *, .hm-lead-par > *, .hm-ultimo-tira > *,
.nw-feature > *, .nw-frontpage > *, .nw-lead > *, .nw-side-card > *, .nw-wire-item > *,
.ar-rejilla > *, .ar-seccion-cabeza > *,
.ds-lead > *, .ds-rejilla > *, .ds-fila-link > *,
.ag-row > *, .ag-poster > *,
.ev-wrap > *, .nt-cuerpo > *,
.bq-fecha > *, .bq-crono-lista li > *, .bq-pistas-lista li > * { min-width: 0; }

/* Un titular largo sin espacios (una URL, un nombre de disco) tampoco debe
   empujar la columna: se parte antes de desbordar. */
.nw-feature-title, .nw-lead-title, .nw-side-title, .nw-wire-title,
.hm-lead-titulo, .hm-par-titulo, .hm-tira-titulo,
.ar-card-titulo, .ds-card-disco, .ds-fila-disco,
.nt-titulo, .bq-titulo { overflow-wrap: anywhere; }

/* Las bajadas y entradillas se recortan con puntos suspensivos donde hay
   límite de líneas, nunca a media letra ni por debajo del borde. */
.nw-feature-deck, .ar-card-entrada, .ds-card-deck, .hm-lead-entrada { overflow-wrap: break-word; }