/* ==========================================================================
   AZTECH METAL - PORTADA
   Paleta construida alrededor del rojo de marca, no encima de él.

   El rojo solo no alcanza: sobre negro puro se aplana y todo lo demás queda
   en escala de grises, que es justo lo que hace ver genérica una página.
   La paleta agrega dos piezas que trabajan CON el rojo:

     Carbón azulado (#0A0A0C) en vez de negro puro. Un fondo ligeramente frío
     empuja el rojo hacia adelante; sobre negro absoluto el rojo se hunde.

     Latón (#D9A441) como tercer acento. Rojo y ámbar son vecinos en la rueda
     de color, así que conviven sin pelear, y el latón evoca válvula, metal
     fundido y prensa antigua. Es el color que se lleva los números, las
     fechas de agenda y los detalles: donde antes todo era rojo o gris.

     Hueso (#F0EBE3) en vez de blanco puro para el texto. El blanco #FFF sobre
     negro vibra y cansa; el hueso baja esa tensión y da el aire de impreso.

   Prefijo .hm-
   ========================================================================== */

:root {
  --hm-ink: #0A0A0C;
  --hm-surface: #131217;
  --hm-surface-hi: #1C1A21;
  --hm-bone: #F0EBE3;
  --hm-bone-dim: rgba(240, 235, 227, 0.62);
  --hm-bone-faint: rgba(240, 235, 227, 0.34);
  --hm-brass: #D9A441;
  --hm-brass-dim: rgba(217, 164, 65, 0.7);
  --hm-line: rgba(240, 235, 227, 0.10);
  --hm-line-red: rgba(255, 59, 52, 0.26);
}

body.hm-home {
  background: var(--hm-ink);
  color: var(--hm-bone);
}

.hm-wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3.2vw, 3rem);
}

/* Etiqueta de sección: latón, no rojo. El rojo queda reservado para lo que
   es noticia o acción; el latón organiza. */
.hm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hm-brass);
  margin: 0 0 0.9rem;
}

.hm-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--hm-brass);
  opacity: 0.7;
}

.hm-h2 {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--hm-bone);
  margin: 0;
}

.hm-h2 em { font-style: normal; color: var(--neon-crimson, #FF3B34); }

/* ==========================================================================
   HERO
   Reparto asimétrico 7/5. A la izquierda la noticia que abre; a la derecha
   la señal en vivo, que es lo que diferencia a esta casa de un blog.
   ========================================================================== */

.hm-hero {
  position: relative;
  border-bottom: 1px solid var(--hm-line);
  padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
  overflow: hidden;
}

/* Halo rojo muy abierto detrás del hero: da profundidad sin degradado obvio. */
.hm-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 55%;
  width: 70vw;
  height: 90%;
  background: radial-gradient(closest-side, rgba(255, 59, 52, 0.16), transparent 72%);
  pointer-events: none;
  filter: blur(10px);
}

.hm-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(1.6rem, 3.5vw, 3.4rem);
  align-items: center;
}

.hm-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neon-crimson, #FF3B34);
  margin-bottom: 1rem;
}

.hm-hero-title {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.2vw, 4.6rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  color: var(--hm-bone);
  text-wrap: balance;
}

.hm-hero-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.hm-hero-title a:hover { color: var(--neon-crimson, #FF3B34); }

.hm-hero-deck {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--hm-bone-dim);
  max-width: 54ch;
  margin: 0 0 1.6rem;
}

.hm-hero-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* Botones. Relleno rojo para la acción principal, contorno hueso para la
   secundaria: dos pesos, no dos colores compitiendo. */
.hm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.78rem 1.5rem;
  border-radius: 2px;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.22s ease, color 0.22s ease,
              border-color 0.22s ease, transform 0.12s ease;
}

.hm-btn-primary {
  background: var(--red-fill, #D91F26);
  color: #fff;
  border-color: var(--red-fill, #D91F26);
}

.hm-btn-primary:hover { background: var(--red-fill-hover, #F0272F); }

.hm-btn-ghost {
  background: transparent;
  color: var(--hm-bone);
  border-color: rgba(240, 235, 227, 0.28);
}

.hm-btn-ghost:hover {
  border-color: var(--hm-bone);
  background: rgba(240, 235, 227, 0.06);
}

.hm-btn:active { transform: translateY(1px); }

.hm-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Figura del hero. El marco de latón a un solo lado evita el look de tarjeta. */
.hm-hero-figure {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--hm-surface);
}

.hm-hero-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 12, 0.75) 0%, transparent 45%);
  pointer-events: none;
}

.hm-hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hm-hero-figure:hover img { transform: scale(1.03); }

.hm-hero-figcap {
  position: absolute;
  left: 1.1rem;
  bottom: 1rem;
  right: 1.1rem;
  z-index: 2;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--hm-bone-faint);
}

/* ==========================================================================
   FRANJA AL AIRE
   Cinta horizontal con el estado real de la señal. Es la sección que ninguna
   plantilla de blog trae, y por eso ancla la identidad de la casa.
   ========================================================================== */

.hm-onair {
  border-bottom: 1px solid var(--hm-line);
  background:
    linear-gradient(90deg, rgba(255, 59, 52, 0.07), transparent 42%),
    var(--hm-surface);
}

.hm-onair-inner {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  padding: 1.05rem 0;
}

.hm-onair-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neon-crimson, #FF3B34);
  white-space: nowrap;
}

.hm-onair-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon-crimson, #FF3B34);
  box-shadow: 0 0 0 0 rgba(255, 59, 52, 0.6);
  animation: hm-pulse 2.2s ease-out infinite;
}

@keyframes hm-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 59, 52, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 59, 52, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 52, 0); }
}

.hm-onair-cover {
  width: 46px;
  height: 46px;
  border-radius: 2px;
  object-fit: cover;
  border: 1px solid var(--hm-line);
  background: var(--hm-ink);
}

.hm-onair-track { min-width: 0; }

.hm-onair-song {
  display: block;
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--hm-bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-onair-artist {
  display: block;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.8rem;
  color: var(--hm-bone-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-onair-listeners {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.76rem;
  color: var(--hm-bone-faint);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.hm-onair-listeners b {
  color: var(--hm-brass);
  font-weight: 700;
  font-feature-settings: 'tnum' 1;
}

/* ==========================================================================
   PORTADA DE NOTICIAS
   Una nota grande y una lista numerada al lado. La numeración en latón es
   lo que da jerarquía sin necesidad de cinco tarjetas iguales.
   ========================================================================== */

.hm-section { padding: clamp(3rem, 6vw, 5rem) 0; }

.hm-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.2rem;
}

.hm-section-link {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hm-bone-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--hm-line-red);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.hm-section-link:hover {
  color: var(--neon-crimson, #FF3B34);
  border-color: var(--neon-crimson, #FF3B34);
}

.hm-news {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: start;
}

.hm-news-lead {
  display: block;
  text-decoration: none;
  color: inherit;
  group: lead;
}

.hm-news-lead-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 3px;
  background: var(--hm-surface);
  margin-bottom: 1.2rem;
}

.hm-news-lead-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.94) brightness(0.94);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}

.hm-news-lead:hover .hm-news-lead-media img {
  transform: scale(1.035);
  filter: saturate(1.04) brightness(1);
}

.hm-tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  padding: 0.28rem 0.65rem;
  background: var(--red-fill, #D91F26);
  color: #fff;
  border-radius: 2px;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hm-news-lead-title {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 0.7rem;
  color: var(--hm-bone);
  transition: color 0.2s ease;
}

.hm-news-lead:hover .hm-news-lead-title { color: var(--neon-crimson, #FF3B34); }

.hm-news-lead-deck {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--hm-bone-dim);
  margin: 0;
  max-width: 58ch;
}

/* Lista numerada */
.hm-ranked { list-style: none; margin: 0; padding: 0; counter-reset: hm; }

.hm-ranked-item { counter-increment: hm; }

.hm-ranked-item + .hm-ranked-item { border-top: 1px solid var(--hm-line); }

.hm-ranked-link {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1rem;
  padding: 1.15rem 0;
  text-decoration: none;
  color: inherit;
  align-items: start;
  transition: padding-left 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hm-ranked-link:hover { padding-left: 0.4rem; }

.hm-ranked-link::before {
  content: "0" counter(hm);
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--hm-brass);
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.hm-ranked-link:hover::before { opacity: 1; }

.hm-ranked-kicker {
  display: block;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neon-crimson, #FF3B34);
  margin-bottom: 0.3rem;
}

.hm-ranked-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -0.005em;
  color: var(--hm-bone);
  margin: 0 0 0.25rem;
  transition: color 0.2s ease;
}

.hm-ranked-link:hover .hm-ranked-title { color: var(--neon-crimson, #FF3B34); }

.hm-ranked-date {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.74rem;
  color: var(--hm-bone-faint);
  font-feature-settings: 'tnum' 1;
}

/* ==========================================================================
   ESCENA MEXICANA
   Bloque de ancho completo con fondo propio, para que corte el ritmo de la
   página en vez de repetir otra rejilla de tarjetas.
   ========================================================================== */

.hm-scene {
  background: var(--hm-surface);
  border-top: 1px solid var(--hm-line);
  border-bottom: 1px solid var(--hm-line);
  position: relative;
  overflow: hidden;
}

.hm-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 12% 0%, rgba(217, 164, 65, 0.07), transparent 60%);
  pointer-events: none;
}

.hm-scene-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(1.8rem, 4vw, 3.6rem);
  align-items: center;
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.hm-scene-figure {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 3px;
  background: var(--hm-ink);
}

.hm-scene-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hm-scene-title {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--hm-bone);
  margin: 0 0 0.9rem;
}

.hm-scene-text {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--hm-bone-dim);
  margin: 0 0 1.4rem;
  max-width: 56ch;
}

/* Datos en latón: la cifra manda, la etiqueta acompaña. */
.hm-stats {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.8rem);
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}

.hm-stat-num {
  display: block;
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--hm-brass);
  font-feature-settings: 'tnum' 1;
}

.hm-stat-label {
  display: block;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hm-bone-faint);
  margin-top: 0.35rem;
  max-width: 16ch;
}

/* ==========================================================================
   AGENDA
   Filas de cartelera. Sin caja por evento: la línea basta.
   ========================================================================== */

.hm-agenda { list-style: none; margin: 0; padding: 0; }

.hm-agenda-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  padding: 1.25rem 0;
  border-top: 1px solid var(--hm-line);
  text-decoration: none;
  color: inherit;
  transition: background 0.22s ease, padding-left 0.22s ease;
}

.hm-agenda-row:hover {
  background: rgba(240, 235, 227, 0.025);
  padding-left: 0.5rem;
}

.hm-agenda-row:last-child { border-bottom: 1px solid var(--hm-line); }

.hm-agenda-day {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: var(--hm-brass);
  font-feature-settings: 'tnum' 1;
}

.hm-agenda-month {
  display: block;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hm-bone-faint);
  margin-top: 0.2rem;
}

.hm-agenda-name {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--hm-bone);
  margin: 0 0 0.2rem;
  transition: color 0.2s ease;
}

.hm-agenda-row:hover .hm-agenda-name { color: var(--neon-crimson, #FF3B34); }

.hm-agenda-place {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.82rem;
  color: var(--hm-bone-dim);
}

.hm-agenda-go {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hm-bone-faint);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.hm-agenda-row:hover .hm-agenda-go { color: var(--neon-crimson, #FF3B34); }

/* ==========================================================================
   ENVÍA TU MÚSICA
   Cierre. Borde rojo en un solo lado en vez de plancha de color: el bloque
   rojo sólido de antes se comía la página entera.
   ========================================================================== */

.hm-submit {
  border-left: 2px solid var(--neon-crimson, #FF3B34);
  background:
    linear-gradient(90deg, rgba(255, 59, 52, 0.08), transparent 55%),
    var(--hm-surface);
  padding: clamp(2.2rem, 4vw, 3.4rem);
  border-radius: 0 3px 3px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.hm-submit-title {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--hm-bone);
  margin: 0 0 0.7rem;
}

.hm-submit-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--hm-bone-dim);
  margin: 0;
  max-width: 62ch;
}

/* ==========================================================================
   ENTRADA AL HACER SCROLL
   ========================================================================== */

.hm-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hm-reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .hm-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hm-hero-figure { aspect-ratio: 16 / 9; max-height: 380px; order: -1; }
  .hm-news { grid-template-columns: 1fr; }
  .hm-scene-grid { grid-template-columns: 1fr; }
  .hm-scene-figure { aspect-ratio: 16 / 9; }
  .hm-onair-inner { grid-template-columns: auto auto 1fr; row-gap: 0.6rem; }
  .hm-onair-listeners { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .hm-hero-title { font-size: clamp(2rem, 9vw, 2.8rem); }
  .hm-submit { grid-template-columns: 1fr; padding: 1.6rem; }
  .hm-agenda-row { grid-template-columns: 4rem 1fr; row-gap: 0.4rem; }
  .hm-agenda-go { grid-column: 2; justify-self: start; }
  .hm-stats { gap: 1.4rem; }
  .hm-onair-cover { display: none; }
  .hm-hero-actions .hm-btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-reveal { opacity: 1; transform: none; transition: none; }
  .hm-onair-dot { animation: none; }
  .hm-hero-figure img,
  .hm-news-lead-media img { transition: none; }
  .hm-hero-figure:hover img,
  .hm-news-lead:hover .hm-news-lead-media img { transform: none; }
  .hm-ranked-link, .hm-agenda-row { transition: none; }
}

/* ==========================================================================
   BARRA LATERAL DE LA PORTADA
   La columna de noticias se acompaña de una barra con lo más buscado, lo que
   viene en quince días, los temas del archivo y cómo seguir el sitio.
   Se arma sola en rail.js; aquí solo vive su forma.
   ========================================================================== */

.hm-redaccion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  gap: clamp(1.4rem, 3.5vw, 2.8rem);
  align-items: start;
}

.hm-rail { display: grid; gap: 1rem; }

.hm-rail-card {
  background: var(--gx-panel, #101014);
  border: 1px solid rgba(255, 255, 255, 0.11);
  padding: 1.05rem 1.1rem;
  /* Sin esto la tarjeta NO se puede encoger por debajo de su contenido y se
     desborda de la columna: un nombre de 48 caracteres en el ranking la
     llevaba de 330 a 428 px y empujaba toda la barra lateral fuera de la
     página. El `text-overflow: ellipsis` del nombre no basta, porque un hijo
     solo recorta si su contenedor tiene un ancho que respetar.
     Es la misma trampa de `min-width: auto` que ya mordió antes en la
     rejilla; aquí, en un elemento de grid. */
  min-width: 0;
}

.hm-rail-title {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0 0 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hm-rail-texto {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 0.9rem;
}

.hm-rail-pie {
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.32);
  margin: 0.75rem 0 0;
}

/* ------------------------------ Fichas ------------------------------ */
.hm-rail-fichas { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.hm-rail-ficha {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.55rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.76);
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.78rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.hm-rail-ficha:hover {
  border-color: var(--gx-red, #FF2A24);
  color: #fff;
  background: rgba(255, 42, 36, 0.08);
}
.hm-rail-ficha em {
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gx-red, #FF2A24);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------ Agenda corta ------------------------------ */
.hm-rail-agenda { list-style: none; margin: 0; padding: 0; }
.hm-rail-agenda li { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.hm-rail-agenda li:last-child { border-bottom: 0; }

.hm-rail-agenda a {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  padding: 0.6rem 0;
  text-decoration: none;
}
.hm-rail-agenda a:hover .hm-rail-datos b { color: var(--gx-red, #FF2A24); }

.hm-rail-fecha {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gx-red, #FF2A24);
}
.hm-rail-fecha b {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.1rem;
}

.hm-rail-datos { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.hm-rail-datos b {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.25;
  transition: color 0.16s ease;
}
.hm-rail-datos i {
  font-style: normal;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-rail-mas,
.hm-rail-cta {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gx-red, #FF2A24);
}
.hm-rail-mas:hover, .hm-rail-cta:hover { color: #fff; }

.hm-rail-cta {
  margin-top: 0;
  padding: 0.7rem 1rem;
  border: 1px solid var(--gx-red, #FF2A24);
  color: var(--gx-red, #FF2A24);
}
.hm-rail-cta:hover { background: var(--gx-red, #FF2A24); color: #fff; }

@media (max-width: 900px) {
  .hm-redaccion { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   RECINTOS
   Las salas con fechas vigentes, ordenadas por cuántas tienen. Sirve a quien
   no busca una banda sino un lugar.
   ========================================================================== */

.hm-recintos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hm-recinto {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: var(--gx-panel, #101014);
  text-decoration: none;
  transition: background 0.18s ease;
}
.hm-recinto:hover { background: rgba(255, 42, 36, 0.07); }

.hm-recinto-cuenta {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(255, 42, 36, 0.5);
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--gx-red, #FF2A24);
  font-variant-numeric: tabular-nums;
}

.hm-recinto-datos { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.hm-recinto-datos b {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.05;
}
.hm-recinto:hover .hm-recinto-datos b { color: var(--gx-red, #FF2A24); }
.hm-recinto-datos i {
  font-style: normal;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.hm-recinto-prox {
  grid-column: 2;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.4;
}
.hm-recinto-prox em {
  display: block;
  font-style: normal;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 0.15rem;
}
.hm-recinto-prox u {
  text-decoration: none;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gx-red, #FF2A24);
  margin-left: 0.35rem;
  white-space: nowrap;
}

/* El pie del hero se leía encima del cartel. Fondo sólido y sin encimarse. */
.hm-hero-figcap {
  position: static !important;
  display: block;
  padding: 0.5rem 0.75rem;
  background: #0b0b0e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.5);
}

/* ======================================================================
   LA TIENDA EN LA PORTADA
   Una fila con los diseños más nuevos. El HTML lo escribe
   `tools/generar-tienda.js`; aquí solo el aspecto.

   Estilos propios y no los de `tienda.css` a propósito: ese archivo pesa
   152 KB y la portada solo necesita una tarjeta y una fila. Se parecen
   porque comparten las variables de color y tipografía, no el archivo.
   ====================================================================== */
.hm-tienda-nota {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--text-muted); margin: 0.5rem 0 0;
}

/* --- LA CINTA -----------------------------------------------------------
   Sam (21-sep-2026): "que funcione, está muy feo su carrusel; como vaya
   desplazándose irán cambiando con transiciones sus fotos de cada producto".
   Son dos movimientos distintos y a propósito con ritmos distintos: la cinta
   corre siempre, y cada tarjeta cruza sus dos fotos en su propio momento (el
   `--i` que escribe el generador escalona el arranque). Si cambiaran a la vez
   parpadearía la fila entera.

   Todo es CSS: un `animation` no se traba aunque la pestaña esté ocupada, y
   frenarlo es una sola línea. JavaScript solo marca `.quieta` mientras un
   dedo la toca, porque `:hover` no existe en un teléfono. */
.hm-tienda-fila {
  position: relative;
  overflow: hidden;
  margin-top: 0.4rem;   /* va a sangre: ya no hereda el aire de `.hm-wrap` */
  /* Los bordes se desvanecen: sin esto la cinta aparece y desaparece de golpe
     en el filo y se ve cortada, no continua. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.hm-tienda-cinta {
  display: flex;
  gap: 1rem;
  width: max-content;
  /* `-50%` y no píxeles: la cinta va escrita dos veces, así que media vuelta
     es exactamente una copia. Funciona con cualquier número de diseños y con
     cualquier ancho de tarjeta. */
  animation: hm-tienda-correr 60s linear infinite;
}
@keyframes hm-tienda-correr {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* Se frena para poder mirar —y pulsar— una playera: con el cursor encima, con
   el teclado dentro, o mientras un dedo la toca. Una tarjeta en movimiento es
   un blanco móvil. */
.hm-tienda-fila:hover .hm-tienda-cinta,
.hm-tienda-fila:focus-within .hm-tienda-cinta,
.hm-tienda-fila.quieta .hm-tienda-cinta { animation-play-state: paused; }

.hm-tienda-pieza {
  flex: 0 0 clamp(240px, 23vw, 340px);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: #F2F0EF;              /* la playera es negra: sobre tarjeta oscura se disuelve */
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.2s, transform 0.2s;
}
.hm-tienda-pieza:hover, .hm-tienda-pieza:focus-visible {
  border-color: var(--neon-crimson); transform: translateY(-3px);
}
.hm-tienda-pieza:focus-visible { outline: 2px solid var(--neon-crimson-bright); outline-offset: 3px; }

.hm-tienda-foto {
  display: block; position: relative; overflow: hidden; background: #111;
  aspect-ratio: 4 / 5;
}
.hm-tienda-foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
/* La segunda foto (la prenda sola) vive encima y se enciende sola. */
.hm-tienda-alt {
  position: absolute; inset: 0;
  opacity: 0;
  animation: hm-tienda-cruce 9s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.1s);   /* negativo: arrancan ya repartidas */
}
@keyframes hm-tienda-cruce {
  0%, 38%   { opacity: 0; }
  50%, 88%  { opacity: 1; }
  100%      { opacity: 0; }
}
.hm-tienda-pieza:hover .hm-tienda-foto img { transform: scale(1.04); }

.hm-tienda-nombre {
  font-family: var(--font-headline); font-weight: 800; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.15;
  color: #14131A; padding: 0.7rem 0.75rem 0.2rem;
}
.hm-tienda-precio {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--neon-crimson-dark, #9d2420); padding: 0 0.75rem 0.8rem;
}

@media (max-width: 560px) {
  .hm-tienda-pieza { flex-basis: 72vw; }
  .hm-tienda-cinta { animation-duration: 46s; }   /* menos tarjetas a la vista: misma velocidad aparente */
}

/* Quien pide menos movimiento no ve ninguno: la cinta se queda quieta y cada
   tarjeta enseña su primera foto. Sigue siendo una fila de ocho playeras. */
@media (prefers-reduced-motion: reduce) {
  .hm-tienda-cinta { animation: none; }
  .hm-tienda-alt { animation: none; opacity: 0; }
  .hm-tienda-fila { overflow-x: auto; scrollbar-width: none; }
  .hm-tienda-fila::-webkit-scrollbar { display: none; }
}

/* ======================================================================
   "LO MÁS BUSCADO" COMO RANKING
   Antes era una lista de nombres sueltos; Sam pidió (21-sep-2026) que se
   leyera como un top: número grande, miniatura y el dato de cuándo.
   ====================================================================== */
.hm-rail-top { list-style: none; margin: 0; padding: 0; }
.hm-rail-top li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }

.hm-rail-fila {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0;
  text-decoration: none; color: inherit;
}
.hm-rail-fila:hover .hm-rail-datos b,
.hm-rail-fila:focus-visible .hm-rail-datos b { color: var(--neon-crimson); }

.hm-rail-num {
  flex: none; width: 1.35rem; text-align: center;
  font-family: var(--font-headline); font-weight: 900; font-size: 1.15rem;
  line-height: 1; color: var(--neon-crimson);
}
/* Del cuarto en adelante el número deja de competir con el nombre. */
.hm-rail-top li:nth-child(n+4) .hm-rail-num { color: var(--text-dim, rgba(255,255,255,.35)); }

.hm-rail-mini {
  flex: none; width: 52px; height: 52px; overflow: hidden;
  background: #111; border: 1px solid rgba(255, 255, 255, 0.1);
}
.hm-rail-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hm-rail-datos { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.hm-rail-datos b {
  font-family: var(--font-headline); font-weight: 700; font-size: 0.86rem;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.15;
  color: var(--text-primary);
  /* Sin esto, un nombre largo estira la barra y descuadra la portada. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color 0.2s;
}
.hm-rail-datos em {
  font-family: var(--font-mono); font-style: normal;
  font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ======================================================================
   UN COLOR POR SECCIÓN en la rejilla "Qué hay aquí"
   El color entra por `--gxc-tinte`, que home.js pone en cada celda.
   Solo en una línea de 3 px y en el número: con ocho fondos de colores
   sobre negro la portada se ve a feria, y el rojo de la casa dejaría de
   significar algo. Si falta la variable, todo sigue en crimson.
   ====================================================================== */
.gxc-cell { position: relative; }
.gxc-cell .gxc-face::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gxc-tinte, var(--neon-crimson));
  z-index: 2;
  transition: height 0.2s;
}
.gxc-cell .gxc-face:hover::before,
.gxc-cell .gxc-face:focus-visible::before { height: 5px; }
.gxc-cell .gxc-idx { color: var(--gxc-tinte, var(--neon-crimson)); }
/* Una fecha sin flyer no puede desalinear la lista: el hueco se reserva
   igual, apenas insinuado, para que todos los nombres arranquen en la misma
   columna. Se vio en la foto: Hocico y Celeste no tienen cartel y sus filas
   se corrían hacia la izquierda. */
.hm-rail-mini--vacia {
  background: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, 0.04) 0 4px, transparent 4px 8px);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Las secciones con ancla (#agenda, #tienda, #recintos) tienen que empezar
   POR DEBAJO de las dos barras fijas: la cabecera (~88 px) y la franja de
   última hora (~34 px). Sin esto, llegar por un enlace ancla deja el título
   tapado y parece que la sección no tiene encabezado. Lo cazó el supervisor
   antes de que existiera el enlace, que es cuando sale barato. */
.hm-section[id] { scroll-margin-top: 140px; }

/* ==========================================================================
   PORTADA COMO PLATAFORMA (24-sep-2026)
   Sam: "estilo Netflix con las categorías bien chingonas". Un billboard con
   el evento del momento y filas que se deslizan de lado. La identidad no
   cambia: negro, rojo de la casa, letra condensada, esquinas rectas.
   ========================================================================== */
:root { --nx-curva: cubic-bezier(.16, 1, .3, 1); }
.nx-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gxh[hidden] { display: none; }

/* ------------------------------------------------------------- billboard */
/* Los slides se apilan en la misma celda: el billboard mide lo que el más
   alto y cambian con un fundido. */
.nx-bill { position: relative; isolation: isolate; overflow: hidden; display: grid; background: #050404; }
.nx-slide {
  grid-area: 1 / 1; position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center; min-height: min(calc(100dvh - 110px), 820px);
  opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s;
}
.nx-slide.is-on { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
.nx-bill-fondo { position: absolute; inset: -3%; z-index: -3; translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 6px); transition: translate .8s var(--nx-curva); }
.nx-bill-fondo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; }
/* La viñeta de las plataformas: oscuro donde va el texto, abierto donde van los dragones. */
.nx-slide::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 4, 4, .94) 0%, rgba(5, 4, 4, .72) 30%, rgba(5, 4, 4, .12) 62%, rgba(5, 4, 4, .3) 100%),
    linear-gradient(to bottom, rgba(5, 4, 4, .55), transparent 24%);
}
/* El suelo: el billboard se funde con la primera fila, que sube encima. */
.nx-slide::after {
  content: ""; position: absolute; inset: auto 0 0; height: 30%; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, var(--hm-ink) 6%, transparent);
}
.nx-bill-dragon {
  position: absolute; bottom: 0; z-index: -1; width: min(27vw, 440px); pointer-events: none;
  translate: calc(var(--mx, 0) * -22px) calc(var(--my, 0) * -12px); transition: translate .8s var(--nx-curva);
}
.nx-bill-dragon img { display: block; width: 100%; height: auto; }
.nx-bill-dragon--azul { right: 30vw; filter: drop-shadow(0 0 40px rgba(60, 155, 255, .5)); }
.nx-bill-dragon--rojo { right: 1.5vw; filter: drop-shadow(0 0 40px rgba(255, 59, 52, .5)); }
/* Anima Tempo: las manos de su cartel. Cada imagen trae la muñeca CORTADA de
   un lado, así que la mano tiene que salir de la orilla con ese corte fuera
   del cuadro, como en el cartel; si no, flota suelta a media pantalla (Sam,
   9-oct-2026: "se ven mal las manos"). Las dos entran por la derecha porque el
   texto vive a la izquierda. La de arriba trae el corte a la derecha: baja
   desde la esquina. La de abajo lo trae a la izquierda: girada un cuarto de
   vuelta, sube desde el piso con la muñeca escondida abajo (en pantallas
   anchas, las dos en la orilla derecha se encimaban). `rotate` va aparte de
   `transform` para no pelearse con las animaciones de entrada. */
.nx-bill-mano { filter: drop-shadow(0 0 34px rgba(150, 120, 255, .45)); }
.nx-bill-mano--arriba { right: -9%; top: -4%; bottom: auto; width: clamp(340px, 34vw, 720px); }
.nx-bill-mano--abajo { right: 27vw; bottom: -3vw; width: clamp(280px, 28vw, 600px); rotate: -90deg; }
.nx-slide--anima .nx-bill-fondo img { object-position: center 35%; }
.nx-bill-logo--anima img { width: clamp(260px, 30vw, 460px); }
.nx-slide--anima .nx-cuenta { margin: .1rem 0 .2rem; }

/* El texto al centro de la altura; abajo queda sitio para los mandos y para la fila que sube. */
.nx-bill-inner { position: relative; z-index: 2; padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(7.5rem, 12vw, 9.5rem); }
.nx-bill-texto { display: grid; justify-items: start; gap: .9rem; max-width: min(560px, 46vw); }
.nx-bill-meta {
  display: flex; align-items: center; gap: .7rem; margin: 0;
  font: 600 .74rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .18em; text-transform: uppercase; color: var(--hm-bone);
}
.nx-bill-meta b { padding: .32rem .55rem; background: var(--red-fill, #D91F26); color: #fff; font-weight: 700; }
.nx-bill-logo { position: relative; margin: 0; line-height: 0; }
.nx-bill-logo img { width: clamp(230px, 24vw, 380px); height: auto; filter: drop-shadow(0 0 18px rgba(255, 110, 20, .45)); }
.nx-bill-sello {
  position: absolute; top: -6%; right: -30%; width: 112px; aspect-ratio: 1;
  display: grid; place-items: center; transform: rotate(-12deg); line-height: 1;
}
.nx-bill-sello svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nx-bill-sello text { font: 400 17px var(--font-display); letter-spacing: .22em; fill: var(--hm-bone); }
.nx-bill-sello b {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--red-fill, #D91F26); color: #fff; font: 400 1.2rem var(--font-display); letter-spacing: .06em;
  box-shadow: 0 0 0 3px #050404, 0 0 0 4px var(--hm-bone);
}
.nx-bill-lugar {
  margin: 0; font: 400 clamp(1.4rem, 2.2vw, 1.9rem)/1.05 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.nx-bill-lugar span { display: block; margin-top: .35rem; text-wrap: balance; font: 600 .8rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .1em; color: var(--hm-bone-dim); }
.nx-bill-sinopsis {
  margin: 0; max-width: 44ch; font: 400 clamp(1rem, 1.35vw, 1.15rem)/1.55 var(--font-body);
  color: rgba(240, 235, 227, .88); text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.nx-bill-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .3rem; }
.nx-bill-acciones .hm-btn { padding: .95rem 1.6rem; font-size: .84rem; }
.nx-btn-vidrio { background: rgba(110, 110, 110, .35); border-color: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.nx-btn-vidrio:hover { background: rgba(140, 140, 140, .45); }

/* Título en letra (radio y tienda: no tienen logo propio). */
.nx-bill-titulo { margin: 0; font: 400 clamp(3rem, 6.4vw, 6rem)/.9 var(--font-display); letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .6); }
.nx-bill-titulo em { font-style: normal; color: var(--neon-crimson); }
/* El foco de "al aire": un punto rojo que late. */
.nx-bill-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.nx-al-aire { width: 9px; height: 9px; background: var(--neon-crimson); box-shadow: 0 0 0 0 rgba(255, 59, 52, .6); }
/* El ecualizador: dice "esto suena" sin decirlo. */
.nx-eq { display: flex; align-items: flex-end; gap: 4px; height: 46px; }
.nx-eq i { width: 6px; height: 100%; background: linear-gradient(to top, var(--red-fill, #D91F26), var(--neon-crimson) 60%, #ffb3ae); transform-origin: bottom; transform: scaleY(var(--h, .6)); }
/* La figura recortada del slide (los modelos de la tienda), como los dragones. */
/* Los modelos de la tienda, grandes: casi la mitad del ancho y el alto completo del slide. */
.nx-bill-figura { position: absolute; right: 1vw; bottom: 0; z-index: -1; width: min(54vw, 960px); pointer-events: none; translate: calc(var(--mx, 0) * -18px) calc(var(--my, 0) * -10px); transition: translate .8s var(--nx-curva); }
.nx-bill-figura img { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .7)); }
.nx-slide--tienda .nx-bill-fondo img { object-position: center center; }
.nx-slide--radio .nx-bill-fondo img { object-position: 70% center; }

/* Mandos: flechas y una barra por slide que se llena mientras dura. */
.nx-bill-mandos {
  /* Abajo a la izquierda, bajo los botones: así no tapan los dragones ni a los modelos. */
  position: absolute; left: 0; right: 0; bottom: clamp(4.2rem, 7vw, 5.6rem); z-index: 5;
  display: flex; align-items: center; justify-content: flex-start; gap: .6rem; pointer-events: none;
}
.nx-bill-mandos > * { pointer-events: auto; }
/* Con 6 slides la fila no cabe en un teléfono: las flechas no se encogen
   (flex: none) y las barras ceden ancho hasta 14 px. */
.nx-bill-flecha {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
  background: rgba(10, 10, 12, .6); border: 1px solid rgba(255, 255, 255, .25); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .2s, border-color .2s;
}
.nx-bill-flecha svg { width: 18px; height: 18px; }
.nx-bill-flecha:hover { background: var(--red-fill, #D91F26); border-color: var(--red-fill, #D91F26); }
.nx-bill-puntos { display: flex; gap: .4rem; min-width: 0; }
.nx-bill-punto { position: relative; width: 44px; min-width: 14px; height: 4px; padding: 0; border: 0; cursor: pointer; background: rgba(255, 255, 255, .25); overflow: hidden; }
.nx-bill-punto::before { content: ""; position: absolute; inset: -10px 0; } /* área de toque más grande */
.nx-bill-punto i { position: absolute; inset: 0; background: var(--neon-crimson); transform: scaleX(0); transform-origin: left; }
.nx-bill-punto[aria-selected="true"] i { transform: scaleX(1); }
.nx-bill-punto.corre i { transform: scaleX(0); animation: nx-llena var(--dura, 7s) linear forwards; }
.nx-bill-flecha:focus-visible, .nx-bill-punto:focus-visible { outline: 2px solid var(--neon-crimson); outline-offset: 3px; }
@keyframes nx-llena { to { transform: scaleX(1); } }

/* ----------------------------------------------------------------- filas */
.nx-fila { position: relative; padding-top: clamp(1.8rem, 3.2vw, 2.8rem); }
.nx-bill + .nx-fila { margin-top: clamp(-4rem, -6vw, -2rem); z-index: 3; }
.nx-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.nx-titulo { margin: 0; font: 400 clamp(1.6rem, 2.6vw, 2.3rem)/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--hm-bone); }
.nx-titulo em { font-style: normal; color: var(--neon-crimson); }
.nx-ver {
  display: inline-flex; align-items: center; gap: .3rem; flex: none;
  font: 600 .74rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .14em; text-transform: uppercase;
  color: var(--hm-bone-dim); text-decoration: none; transition: color .2s;
}
.nx-ver svg { width: 14px; height: 14px; transition: transform .25s var(--nx-curva); }
.nx-ver:hover { color: var(--neon-crimson); }
.nx-ver:hover svg { transform: translateX(3px); }

/* La imagen entra completa en su marco y lo que sobra se llena con la misma
   imagen desenfocada (home.js pone --src cuando la imagen ya cargó). Así el
   marco puede tener cualquier forma sin cortar ningún cartel. */
.nx-media { position: relative; display: block; aspect-ratio: var(--ar, 4 / 5); overflow: hidden; isolation: isolate; background: #141012; }
.nx-media::before {
  content: ""; position: absolute; inset: -30px; z-index: -1;
  background: var(--src) center / cover no-repeat; filter: blur(22px) brightness(.5) saturate(1.25);
  opacity: 0; transition: opacity .5s;
}
.nx-media.lista::before { opacity: 1; }
.nx-media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--nx-curva); }
.nx-media--vacia { background: linear-gradient(160deg, #2a0606, #0d0a0b 70%); }
.nx-nota-cara:hover .nx-media img, .nx-cartel:hover .nx-media img, .nx-top-cara:hover .nx-media img { transform: scale(1.04); }

/* ------------------------------------------------------------ carruseles
   Centrados dentro de la página, con el mismo margen a los dos lados y
   un número exacto de tarjetas a la vista (--n). Cada flecha avanza una. */
.nx-carril { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 clamp(1rem, 3.2vw, 3rem); }
.nx-pista {
  --n: 6; --gap: clamp(.7rem, 1.1vw, 1rem);
  list-style: none; margin: 0; padding: .6rem 0 1.2rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)); gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.nx-pista::-webkit-scrollbar { display: none; }
.nx-pista:focus-visible { outline: 2px solid var(--neon-crimson); outline-offset: 4px; }
.nx-pista > li { scroll-snap-align: start; min-width: 0; }
.nx-pista.esta-arrastrando { scroll-snap-type: none; cursor: grabbing; }
.nx-flecha {
  position: absolute; top: var(--flecha-top, 42%); z-index: 4; width: 42px; height: 42px; transform: translateY(-50%);
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: rgba(10, 10, 12, .88); border: 1px solid rgba(255, 255, 255, .22); color: #fff;
  transition: background-color .2s, border-color .2s, opacity .2s;
}
.nx-flecha--prev { left: max(.15rem, calc(clamp(1rem, 3.2vw, 3rem) / 2 - 21px)); }
.nx-flecha--next { right: max(.15rem, calc(clamp(1rem, 3.2vw, 3rem) / 2 - 21px)); }
.nx-flecha svg { width: 20px; height: 20px; }
.nx-flecha:hover { background: var(--red-fill, #D91F26); border-color: var(--red-fill, #D91F26); }
.nx-carril.en-inicio .nx-flecha--prev, .nx-carril.en-final .nx-flecha--next, .nx-carril.sin-scroll .nx-flecha { opacity: 0; pointer-events: none; }
@media (hover: none) { .nx-flecha { display: none; } }

/* Al pasar el ratón la tarjeta sube un poco: dice "esto se toca". */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .nx-item { transition: transform .35s var(--nx-curva); }
  .nx-item:hover, .nx-item:focus-within { transform: translateY(-5px); }
}
/* Las tarjetas entran en cascada cuando su sección llega a la vista. */
@media (prefers-reduced-motion: no-preference) {
  .nx-fila.hm-reveal:not(.is-in) .nx-item { opacity: 0; }
  .nx-fila.is-in .nx-item { animation: nx-entra .7s var(--nx-curva) backwards; animation-delay: calc(min(var(--i, 0), 8) * 55ms); }
}
@keyframes nx-entra { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.nx-nota-cara { display: grid; gap: .65rem; color: inherit; text-decoration: none; }
.nx-nota-cara:focus-visible, .nx-cartel-cara:focus-visible, .nx-top-cara:focus-visible, .nx-cat-cara:focus-visible { outline: 2px solid var(--neon-crimson); outline-offset: 3px; }
.nx-nota-cuerpo { display: grid; align-content: start; gap: .35rem; min-width: 0; }
.nx-nota-titulo {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font: 700 1.05rem/1.18 var(--font-headline); text-transform: uppercase; letter-spacing: .01em; color: var(--hm-bone);
}
.nx-nota-cara:hover .nx-nota-titulo { color: #fff; }
.nx-nota-mas { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .86rem; line-height: 1.45; color: var(--hm-bone-dim); }
.nx-nota-pie { font: 600 .64rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--hm-bone-faint); }
.nx-pulso {
  position: absolute; left: .5rem; bottom: .5rem; z-index: 2; padding: .26rem .45rem;
  background: var(--red-fill, #D91F26); color: #fff; font: 700 .6rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .12em; text-transform: uppercase;
}

/* ------------------------------------------------------------ categorías
   Arriba de todo, más grandes y con vida (Sam, 26-sep-2026): la foto respira
   despacio, cada tarjeta a su ritmo; al pasar el ratón sube, se enciende en
   su color y la cruza un destello. */
.nx-cats { list-style: none; margin: 0 auto; padding: .4rem 0 .6rem; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .9rem; max-width: 1440px; }
.nx-cat-cara {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; aspect-ratio: 4 / 5;
  color: #fff; text-decoration: none; background: #120e11;
  border: 1px solid rgba(255, 255, 255, .08); border-bottom: 3px solid var(--tinte);
  transition: border-color .3s, box-shadow .4s, transform .45s var(--nx-curva);
}
.nx-cat-foto { position: absolute; inset: 0; z-index: -2; }
.nx-cat-foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(1.1); transition: transform 1s var(--nx-curva), filter .4s; }
.nx-cat-cara::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 12, .1) 30%, rgba(10, 10, 12, .88)), linear-gradient(0deg, color-mix(in srgb, var(--tinte) 45%, transparent), transparent 55%); opacity: .85; transition: opacity .4s; }
.nx-cat-cara:hover { border-color: color-mix(in srgb, var(--tinte) 70%, transparent); box-shadow: 0 24px 50px -20px color-mix(in srgb, var(--tinte) 70%, transparent); transform: translateY(-6px); }
.nx-cat-cara:hover .nx-cat-foto img { filter: brightness(.85) saturate(1.2); transform: scale(1.12); }
.nx-cat-num { position: absolute; top: .6rem; left: .7rem; z-index: 2; font: 400 clamp(2rem, 2.8vw, 2.8rem)/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--tinte) 80%, #fff); transition: color .3s; }
.nx-cat-cara:hover .nx-cat-num { color: color-mix(in srgb, var(--tinte) 85%, #fff); }
.nx-cat-cuerpo { position: relative; display: grid; gap: .2rem; padding: .9rem .85rem 1rem; }
.nx-cat-titulo { font: 400 clamp(1.3rem, 1.7vw, 1.75rem)/.95 var(--font-display); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.nx-cat-cuenta { font: 700 .64rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--tinte) 55%, #fff); }
@media (prefers-reduced-motion: no-preference) {
  .nx-cat-foto img { animation: nx-cat-respira 11s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.6s); }
  .nx-cat-cara:hover .nx-cat-foto img { animation-play-state: paused; }
}
@keyframes nx-cat-respira { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-2%, -1.5%); } }

/* ------------------------------------------------------------- carteles */
.nx-cartel-tipo { position: absolute; inset: 0; display: grid; place-content: center; gap: .4rem; padding: 1rem; text-align: center; }
.nx-cartel-tipo b { font: 400 1.7rem/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.nx-cartel-tipo i { font: 600 .66rem var(--font-data, 'Barlow', sans-serif); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--hm-bone-dim); }
.nx-cartel-lugar { display: flex; flex-wrap: wrap; gap: 0 .4rem; font: 600 .74rem/1.35 var(--font-data, 'Barlow', sans-serif); color: rgba(255, 255, 255, .84); }
.nx-cartel-lugar i { font-style: normal; font-weight: 500; color: var(--hm-bone-faint); }
.nx-lugar { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .28); text-underline-offset: 3px; }
.nx-lugar:hover { color: var(--neon-crimson); text-decoration-color: currentColor; }
.nx-cartel-botones { display: flex; flex-wrap: wrap; gap: .35rem; }
.nx-mini {
  display: inline-flex; align-items: center; gap: .25rem; padding: .42rem .55rem;
  border: 1px solid rgba(255, 255, 255, .22); color: #fff; text-decoration: none;
  font: 700 .6rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .2s, border-color .2s;
}
.nx-mini svg { width: 11px; height: 11px; }
.nx-mini:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.nx-mini--rojo { background: var(--red-fill, #D91F26); border-color: var(--red-fill, #D91F26); }
.nx-mini--rojo:hover { background: var(--red-fill-hover, #F0272F); border-color: var(--red-fill-hover, #F0272F); }
.nx-mini--apagado { color: var(--hm-bone-faint); border-style: dashed; }
.nx-todos { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .35rem; text-align: center; }
.nx-todos b { font: 400 3.6rem/1 var(--font-display); color: var(--neon-crimson); }
.nx-todos i { font: 600 .7rem var(--font-data, 'Barlow', sans-serif); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--hm-bone-dim); }
.nx-todos u { display: inline-flex; align-items: center; gap: .3rem; margin-top: .6rem; text-decoration: none; font: 700 .74rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.nx-todos u svg { width: 14px; height: 14px; }


/* --------------------------------------------------- lo más importante
   Mosaico: una grande que manda y cuatro que la acompañan. */
/* Dos pisos (Sam, 9-oct-2026: "las imágenes se ven muy chiquitas"). Arriba la
   que manda, a todo lo ancho: su imagen mide lo que pide su propia forma
   (--nat, la pone nxLista al cargar), así un cartel vertical sale completo y
   grande en vez de flotar en un marco ancho. Abajo cuatro en marco vertical,
   que es la forma de casi todos los carteles; las fotos anchas sí llenan su
   marco (recortar una foto no esconde nada; un cartel nunca se recorta). */
.nx-bento { list-style: none; margin: 0; padding: .2rem 0 .4rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 1.1rem; }
.nx-bento-item--grande { grid-column: 1 / -1; }
.nx-bento-item--grande .nx-nota-cara { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1.2rem, 3.4vw, 3rem); }
.nx-bento-item--grande .nx-media { height: clamp(320px, 36vw, 520px); width: auto; max-width: 60vw; aspect-ratio: var(--nat, 4 / 5); }
.nx-bento-item--grande .nx-nota-cuerpo { gap: .7rem; }
.nx-bento-item--grande .nx-nota-titulo { font-size: clamp(1.8rem, 3.4vw, 3.2rem); line-height: 1.02; -webkit-line-clamp: 4; }
.nx-bento-item--grande .nx-nota-mas { font-size: clamp(.95rem, 1.2vw, 1.12rem); -webkit-line-clamp: 4; }
.nx-bento-item:not(.nx-bento-item--grande) .nx-media { aspect-ratio: 4 / 5; }
.nx-bento .nx-media[data-forma="ancha"] img { object-fit: cover; }
/* La etiqueta "Toca en N días" va debajo de la imagen: encima tapaba el pie del cartel. */
.nx-bento .nx-pulso { position: static; display: inline-block; margin: .55rem 0 .4rem; }
.nx-bento-media { position: relative; display: block; border-bottom: 2px solid var(--tp, var(--neon-crimson)); }

/* ---------------------------------------- conciertos y giras: cartelera */
.nx-cartelera { list-style: none; margin: 0; padding: .2rem 0 .4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.3rem; }
.nx-hcard .nx-nota-cara {
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr); align-items: center; gap: 1.1rem; height: 100%; padding: .75rem;
  background: #121014; border: 1px solid rgba(255, 255, 255, .07); border-left: 3px solid var(--tp, var(--neon-crimson));
  transition: border-color .25s, background-color .25s;
}
.nx-hcard .nx-nota-cara:hover { background: #17131a; border-color: rgba(255, 255, 255, .16); border-left-color: var(--tp, var(--neon-crimson)); }
.nx-hcard-media { position: relative; display: block; }

/* ------------------------------------------ discos: portada y su vinilo */
.nx-pista--discos { --n: 5; --flecha-top: 38%; }
.nx-disco-funda { position: relative; display: block; padding-right: 13%; }
.nx-disco-portada { position: relative; z-index: 1; box-shadow: 8px 0 20px rgba(0, 0, 0, .7); }
/* El único círculo de la página, a propósito: es un disco. */
.nx-vinilo {
  position: absolute; top: 5%; bottom: 5%; right: 0; z-index: 0; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, var(--tp, var(--neon-crimson)) 0 15%, #0b0b0c 15.5% 17%, transparent 17.5%),
    repeating-radial-gradient(circle, #121214 0 2px, #1c1c1f 2px 3px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 6px 18px rgba(0, 0, 0, .6);
  transition: transform .7s var(--nx-curva);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .nx-disco:hover .nx-vinilo { transform: translateX(9%); }
}

/* ------------------------------------- reportajes: uno grande y la lista */
.nx-reportaje { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.5rem; padding: .2rem 0 .4rem; }
.nx-reportaje-grande { gap: .8rem; }
.nx-reportaje-grande .nx-nota-titulo { font-size: clamp(1.35rem, 2vw, 1.75rem); }
.nx-reportaje-lista { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: .8rem; }
.nx-reportaje-lista .nx-nota-cara { grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: .95rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.nx-reportaje-lista li:last-child .nx-nota-cara { border-bottom: 0; }
.nx-reportaje-lista .nx-nota-titulo { font-size: .98rem; }

/* --------------------------- raíces: tarjetas altas, como foto de archivo */
.nx-raices { list-style: none; margin: 0 auto; padding: .2rem 0 .4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem 1.1rem; max-width: 1120px; }
.nx-raiz .nx-media { outline: 1px solid rgba(226, 178, 90, .35); outline-offset: -8px; }
.nx-raiz .nx-media img { filter: sepia(.85) contrast(1.05) brightness(.92); transition: transform .8s var(--nx-curva), filter .5s; }
.nx-raiz .nx-media::before { filter: blur(22px) brightness(.42) sepia(.9); }
.nx-raiz .nx-nota-cara:hover .nx-media img { filter: none; }

/* ------------------------------------------------- recuentos: numerada */
.nx-numerada { list-style: none; margin: 0; padding: .2rem 0 .4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.4rem; }
.nx-numerada .nx-nota-cara { grid-template-columns: auto minmax(0, 40%) minmax(0, 1fr); align-items: center; gap: .9rem; }
.nx-numerada-n { font: 400 3.4rem/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.5px rgba(240, 235, 227, .45); transition: -webkit-text-stroke-color .25s; }
.nx-numerada .nx-nota-cara:hover .nx-numerada-n { -webkit-text-stroke-color: var(--neon-crimson); }
.nx-numerada .nx-nota-titulo { font-size: .95rem; }

@media (max-width: 1279px) {
  .nx-fila--carteles .nx-pista { --n: 5; }
  .nx-pista--discos { --n: 4; }
}
@media (max-width: 1100px) {
  .nx-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 900px; }
  .nx-fila--top .nx-pista { --n: 3; }
  .nx-numerada { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
}
@media (max-width: 900px) {
  .nx-fila--carteles .nx-pista { --n: 4; }
  .nx-pista--discos { --n: 3; }
  .nx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-bento-item--grande .nx-nota-cara { grid-template-columns: minmax(0, 1fr); }
  .nx-bento-item--grande .nx-media { width: 100%; height: auto; max-width: none; max-height: 78vh; }
  .nx-cartelera, .nx-reportaje { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- teléfono */
@media (max-width: 760px) {
  .nx-slide { min-height: auto; align-items: start; }
  .nx-slide::before { background: linear-gradient(to bottom, rgba(5, 4, 4, .3), rgba(5, 4, 4, .15) 30%, rgba(5, 4, 4, .82) 58%, var(--hm-ink) 96%); }
  .nx-bill-dragon { top: .8rem; bottom: auto; width: 52vw; }
  .nx-bill-dragon--azul { right: auto; left: -3vw; }
  .nx-bill-dragon--rojo { right: -3vw; }
  .nx-bill-mano--arriba { right: -16vw; top: -2vw; width: 72vw; }
  .nx-bill-mano--abajo { display: none; }   /* en el teléfono quedaría detrás de los botones */
  .nx-bill-logo--anima img { width: min(70vw, 300px); }
  .nx-bill-inner { padding-top: 54vw; padding-bottom: 3.8rem; }
  .nx-bill-texto { max-width: none; }
  .nx-bill-logo img { width: min(64vw, 280px); }
  .nx-bill-sello { width: 88px; right: -36%; }
  .nx-bill-sello b { width: 50px; height: 50px; font-size: .95rem; }
  .nx-bill-acciones { width: 100%; }
  .nx-bill-acciones .hm-btn { flex: 1 1 auto; justify-content: center; }
  .nx-bill-figura { top: .6rem; bottom: auto; right: -2vw; width: 86vw; }
  .nx-slide--radio .nx-bill-inner { padding-top: 46vw; }
  .nx-bill-titulo { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .nx-bill-mandos { top: calc(54vw - 3rem); bottom: auto; justify-content: center; }
  .nx-cab { align-items: center; }
  /* En el teléfono los carruseles dejan ver un pedazo de la siguiente: así se entiende que se deslizan. */
  .nx-fila--carteles .nx-pista { --n: 2.3; }
  .nx-fila--top .nx-pista { --n: 1.45; }
  .nx-pista--discos { --n: 1.8; }
  .nx-top-num { font-size: 7.5rem; }
  .nx-cats { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * clamp(1rem, 3.2vw, 3rem)); padding-inline: clamp(1rem, 3.2vw, 3rem); scroll-padding-inline: clamp(1rem, 3.2vw, 3rem); }
  .nx-cats::-webkit-scrollbar { display: none; }
  .nx-cats > li { scroll-snap-align: start; }
  .nx-raices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-raiz:last-child:nth-child(odd) { grid-column: span 2; }
  .nx-raiz:last-child:nth-child(odd) .nx-media { aspect-ratio: 16 / 10; }
  .nx-hcard .nx-nota-cara { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: .8rem; padding: .6rem; }
  .nx-hcard .nx-nota-mas { display: none; }
  .nx-numerada .nx-nota-cara { grid-template-columns: auto minmax(0, 34%) minmax(0, 1fr); }
  .nx-numerada-n { font-size: 2.6rem; }
}

/* ------------------------------------------------------------ movimiento */
@media (prefers-reduced-motion: no-preference) {
  .nx-slide.is-on .nx-bill-dragon--azul { animation: nx-entra-izq 1.4s var(--nx-curva) both, nx-respira 7s ease-in-out 1.4s infinite; }
  .nx-slide.is-on .nx-bill-dragon--rojo { animation: nx-entra-der 1.4s var(--nx-curva) .12s both, nx-respira 7s ease-in-out 1.6s infinite reverse; }
  .nx-slide.is-on .nx-bill-figura { animation: nx-entra-der 1.3s var(--nx-curva) both; }
  .nx-slide.is-on .nx-bill-mano--abajo { animation: nx-entra-der 1.4s var(--nx-curva) both, nx-respira 6s ease-in-out 1.4s infinite; }
  .nx-slide.is-on .nx-bill-mano--arriba { animation: nx-entra-der 1.4s var(--nx-curva) .15s both, nx-respira 7s ease-in-out 1.6s infinite reverse; }
  .nx-slide.is-on .nx-bill-fondo img { animation: nx-acerca 9s ease-out both; }
  .nx-slide.is-on .nx-bill-texto > * { animation: nx-sube .9s var(--nx-curva) both; }
  .nx-slide.is-on .nx-bill-texto > :nth-child(2) { animation-delay: .12s; }
  .nx-slide.is-on .nx-bill-texto > :nth-child(3) { animation-delay: .24s; }
  .nx-slide.is-on .nx-bill-texto > :nth-child(4) { animation-delay: .34s; }
  .nx-slide.is-on .nx-bill-texto > :nth-child(5) { animation-delay: .44s; }
  .nx-eq i { animation: nx-suena var(--d, .7s) ease-in-out var(--r, 0s) infinite alternate; }
  .nx-al-aire { animation: nx-late 1.6s ease-out infinite; }
  .nx-bill-logo img { animation: nx-arde 2.6s ease-in-out infinite alternate; }
  .nx-bill-sello svg { animation: nx-gira 22s linear infinite; }
}
@keyframes nx-entra-izq { from { opacity: 0; transform: translateX(-18%) scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes nx-entra-der { from { opacity: 0; transform: translateX(18%) scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes nx-respira { 50% { transform: translateY(-10px); } }
@keyframes nx-sube { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes nx-arde { from { filter: drop-shadow(0 0 12px rgba(255, 110, 20, .35)); } to { filter: drop-shadow(0 0 30px rgba(255, 70, 20, .65)); } }
@keyframes nx-gira { to { transform: rotate(360deg); } }
@keyframes nx-acerca { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes nx-suena { from { transform: scaleY(.12); } to { transform: scaleY(1); } }
@keyframes nx-late { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 52, .65); } 100% { box-shadow: 0 0 0 12px rgba(255, 59, 52, 0); } }

/* ----------------------------------------------- slide "envía tu música"
   Sam, 15-oct-2026, con dos banners. Computadora: la foto de la banda con el
   texto encima; la imagen trae fondo de más arriba y a la izquierda (estirado
   de su propia orilla) para que el texto no tape a nadie. Teléfono: el póster
   ya trae el texto, así que se ve completo bajo los mandos, se toca entero y
   el texto de la página queda solo para lectores de pantalla.
   El 80 % vertical: en pantallas ultra anchas, con "bottom" se cortaban las
   caras; en las normales lo que se recorta es el fondo de arriba. */
.nx-slide--envia .nx-bill-fondo img { object-position: right 80%; }
.nx-bill-linea { display: block; margin-top: .45rem; font-size: .42em; letter-spacing: .09em; color: var(--hm-bone); }
.nx-bill-poster { display: none; }
/* Tablet en vertical: con "cover" la banda crecía hasta quedar detrás del
   texto. Aquí va a todo el ancho y abajo; arriba, el color de su propia orilla
   (medido de la imagen) y la orilla de la foto se funde con él. */
@media (min-width: 761px) and (max-aspect-ratio: 4/3) {
  .nx-slide--envia .nx-bill-fondo { background: linear-gradient(90deg, #010508, #000b0e 25%, #011316 50%, #001416 75%, #01090b); }
  .nx-slide--envia .nx-bill-fondo img { position: absolute; left: 0; bottom: 0; height: auto; -webkit-mask-image: linear-gradient(transparent, #000 15%); mask-image: linear-gradient(transparent, #000 15%); }
}
@media (max-width: 760px) {
  /* El póster empieza en 54vw (donde empieza el texto de los demás slides:
     las flechas quedan arriba de él) y nunca pasa de 480 px de ancho, para
     no estirar el billboard en tablets chicas y plegables. El ::after (el
     suelo que funde con la fila de abajo) solo va debajo del póster. */
  .nx-slide--envia { min-height: calc(54vw + min(100vw, 480px) + 2.5rem); }
  .nx-slide--envia::before { content: none; }
  .nx-slide--envia::after { top: calc(54vw + min(100vw, 480px)); height: auto; }
  .nx-slide--envia .nx-bill-fondo { inset: calc(54vw - min(100vw, 480px) * .54) auto auto 50%; width: min(100%, 480px); translate: -50% 0; }
  .nx-slide--envia .nx-bill-fondo img { height: auto; }
  .nx-slide--envia.is-on .nx-bill-fondo img { animation: none; }
  .nx-slide--envia .nx-bill-inner { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nx-slide--envia .nx-bill-acciones { display: none; }
  .nx-bill-poster { display: block; position: absolute; top: 54vw; left: 50%; width: min(100%, 480px); translate: -50% 0; aspect-ratio: 1; z-index: 3; }
  .nx-bill-poster:focus-visible { outline: 2px solid var(--neon-crimson); outline-offset: -4px; }
}
/* Pantalla más ancha que el póster: sus orillas se funden con el negro. */
@media (min-width: 481px) and (max-width: 760px) {
  .nx-slide--envia .nx-bill-fondo { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
  .nx-slide--envia .nx-bill-fondo img { -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%); }
}

/* ==========================================================================
   MOVIMIENTO, BOLETOS Y BANNERS (24-sep-2026, tarde)
   Sam: "dale movimiento", eventos a lo ancho con tarjetas más grandes, un
   Top más chingón y banners verticales y horizontales en la portada.
   ========================================================================== */

/* Títulos: una raya roja que se dibuja cuando la sección llega a la vista. */
.nx-titulo { position: relative; padding-bottom: .55rem; }
.nx-titulo::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--neon-crimson);
  transform-origin: left; transform: scaleX(0); transition: transform .9s var(--nx-curva) .15s;
}
.nx-fila.is-in .nx-titulo::after { transform: scaleX(1); }

/* ------------------------------------------ eventos: el escenario a lo ancho */
.nx-fila--carteles { isolation: isolate; margin-top: clamp(1rem, 2vw, 1.8rem); padding-top: clamp(2.4rem, 4vw, 3.6rem); padding-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.nx-fila--carteles .nx-cab, .nx-fila--carteles .nx-carril { max-width: none; }
.nx-escenario { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.nx-escenario span {
  position: absolute; inset: -60px; background-size: cover; background-position: center;
  filter: blur(46px) brightness(.34) saturate(1.35); opacity: 0; transform: scale(1.12);
  transition: opacity 1.1s ease, transform 8s ease-out;
}
.nx-escenario span.is-on { opacity: 1; transform: scale(1); }
.nx-escenario::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--hm-ink), rgba(10, 10, 12, .15) 20%, rgba(10, 10, 12, .2) 80%, var(--hm-ink)),
    radial-gradient(70% 90% at 50% 50%, transparent, rgba(10, 10, 12, .55));
}
.nx-fila--carteles .nx-pista { --n: 1.25; --flecha-top: 34%; padding-top: 1rem; }
@media (min-width: 600px) { .nx-fila--carteles .nx-pista { --n: 2.2; } }
@media (min-width: 900px) { .nx-fila--carteles .nx-pista { --n: 3; } }
@media (min-width: 1200px) { .nx-fila--carteles .nx-pista { --n: 4; } }
@media (min-width: 1680px) { .nx-fila--carteles .nx-pista { --n: 5; } }

/* El boleto: cartel arriba, talón abajo con su perforación y sus muescas. */
.nx-boleto {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: linear-gradient(180deg, #1a1311, #110d0c); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9);
}
.nx-boleto-cartel { position: relative; display: block; color: #fff; text-decoration: none; }
.nx-boleto:hover .nx-media img { transform: scale(1.04); }
.nx-fecha {
  position: absolute; left: .6rem; top: .6rem; z-index: 2; display: grid; justify-items: center; min-width: 3.3rem;
  padding: .42rem .5rem .36rem; line-height: 1; background: var(--red-fill, #D91F26); color: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}
.nx-fecha b { font: 400 1.95rem/1 var(--font-display); }
.nx-fecha i { font: 700 .6rem var(--font-data, 'Barlow', sans-serif); font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
.nx-fecha u { margin-top: .18rem; text-decoration: none; font: 600 .55rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.nx-gratis { position: absolute; right: .6rem; top: .6rem; z-index: 2; padding: .3rem .5rem; background: var(--hm-bone); color: #111; font: 700 .62rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.nx-boleto-talon {
  position: relative; flex: 1; display: grid; align-content: start; gap: .3rem; padding: 1.15rem 1rem 1rem;
  -webkit-mask: radial-gradient(circle 11px at 0 0, transparent 98%, #000) left top / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 0, transparent 98%, #000) right top / 51% 100% no-repeat;
  mask: radial-gradient(circle 11px at 0 0, transparent 98%, #000) left top / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 0, transparent 98%, #000) right top / 51% 100% no-repeat;
}
.nx-boleto-talon::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; border-top: 2px dashed rgba(255, 255, 255, .16); }
.nx-boleto-cuando { font: 700 .66rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--neon-crimson); }
.nx-boleto-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 1.75rem/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.nx-boleto-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .45rem; padding-top: .65rem; border-top: 1px solid rgba(255, 255, 255, .07); }
.nx-boleto-precio { font: 700 .78rem var(--font-data, 'Barlow', sans-serif); color: #fff; }
.nx-boleto--todos { background: linear-gradient(160deg, #2a0606, #0d0a0b 75%); box-shadow: 0 0 0 1px rgba(255, 59, 52, .45); }
.nx-boleto--todos .nx-boleto-cartel, .nx-boleto--todos .nx-media { flex: 1; height: 100%; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .nx-pista .nx-boleto { transition: transform .5s var(--nx-curva), box-shadow .4s; }
  .nx-pista .nx-boleto:hover, .nx-pista .nx-boleto:focus-within {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px);
    box-shadow: 0 34px 60px -22px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 59, 52, .5), 0 0 44px -12px rgba(255, 59, 52, .45);
  }
}

/* --------------------------------------------- lo más buscado: el podio */
.nx-fila--top .nx-pista { --n: 1.35; --flecha-top: 52%; padding-top: 1.4rem; }
@media (min-width: 600px) { .nx-fila--top .nx-pista { --n: 2.3; } }
@media (min-width: 900px) { .nx-fila--top .nx-pista { --n: 3; } }
@media (min-width: 1200px) { .nx-fila--top .nx-pista { --n: 4; } }
.nx-top { position: relative; isolation: isolate; }
.nx-top-cara { position: relative; display: grid; grid-template-columns: 45% 55%; align-items: end; color: #fff; text-decoration: none; }
/* La luz de escenario detrás de cada cartel. */
.nx-top-cara::before {
  content: ""; position: absolute; left: 18%; right: -6%; top: 0; bottom: -8%; z-index: -1;
  background: radial-gradient(50% 50% at 62% 56%, rgba(255, 59, 52, .3), transparent 72%); opacity: .35; transition: opacity .45s;
}
.nx-top-cara:hover::before { opacity: 1; }
.nx-top-num {
  justify-self: end; margin-right: -.07em; z-index: 0;
  font: 400 clamp(10rem, 14.5vw, 15.5rem)/.78 var(--font-display); letter-spacing: -.07em;
  background: linear-gradient(180deg, rgba(240, 235, 227, .22), rgba(240, 235, 227, .02) 82%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 3px rgba(240, 235, 227, .72);
  filter: drop-shadow(7px 7px 0 rgba(255, 42, 36, .28));
  transition: -webkit-text-stroke-color .35s, filter .35s, transform .5s var(--nx-curva);
}
/* Los tres primeros van encendidos. */
.nx-top--podio .nx-top-num {
  background-image: linear-gradient(180deg, rgba(255, 59, 52, .75), rgba(255, 59, 52, .05) 82%);
  -webkit-text-stroke-color: rgba(255, 175, 165, 1); filter: drop-shadow(8px 8px 0 rgba(255, 42, 36, .5));
}
.nx-top-cara:hover .nx-top-num { -webkit-text-stroke-color: var(--neon-crimson); filter: drop-shadow(10px 10px 0 rgba(255, 42, 36, .6)) drop-shadow(0 0 26px rgba(255, 59, 52, .4)); transform: translateX(6px); }
.nx-top-cartel {
  position: relative; z-index: 1; display: block; transform-origin: left center;
  box-shadow: -16px 0 32px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .55s var(--nx-curva), box-shadow .4s;
}
.nx-top-cara:hover .nx-top-cartel { transform: perspective(800px) rotateY(-9deg) scale(1.03); box-shadow: -22px 0 44px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 59, 52, .55); }
.nx-top-chip {
  position: absolute; top: .55rem; right: .55rem; z-index: 2; padding: .3rem .5rem;
  background: rgba(10, 10, 12, .8); border: 1px solid rgba(255, 59, 52, .6); color: #fff;
  font: 700 .6rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .12em; text-transform: uppercase;
}
.nx-top--podio .nx-top-chip { background: var(--red-fill, #D91F26); border-color: var(--red-fill, #D91F26); }
.nx-top-pie { position: absolute; inset: auto 0 0; z-index: 2; display: grid; gap: .12rem; padding: 2rem .75rem .65rem; background: linear-gradient(to top, rgba(5, 4, 4, .96), transparent); }
.nx-top-pie b { font: 400 1.4rem/1.02 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.nx-top-pie i { font: 600 .64rem var(--font-data, 'Barlow', sans-serif); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--hm-bone-dim); }
@media (prefers-reduced-motion: no-preference) {
  .nx-fila.is-in .nx-top-num { animation: nx-num 1s var(--nx-curva) backwards; animation-delay: calc(min(var(--i, 0), 8) * 70ms + .15s); }
}
@keyframes nx-num { from { opacity: 0; transform: translateX(-44px) scale(.86); } to { opacity: 1; transform: none; } }

/* --------------------------------------------- banner: el siguiente grande */
/* Las bandas grandes: slides apilados en la misma celda, como el billboard. */
.nx-banner-evento { position: relative; display: grid; margin-top: clamp(2.4rem, 4vw, 3.4rem); overflow: hidden; }
.nx-banda {
  grid-area: 1 / 1; position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2.4rem, 5vw, 4rem) clamp(4.4rem, 7vw, 5.4rem);
  opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s;
}
.nx-banda.is-on { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
.nx-banda::before, .nx-cine::before {
  content: ""; position: absolute; inset: -60px; z-index: -3; background: var(--fondo) center / cover;
  filter: blur(40px) brightness(.36) saturate(1.35); transform: scale(1.1);
}
.nx-banda::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-block: 1px solid rgba(255, 59, 52, .35);
  background: linear-gradient(100deg, rgba(10, 10, 12, .92) 0%, rgba(10, 10, 12, .5) 55%, rgba(10, 10, 12, .85)),
    repeating-linear-gradient(115deg, transparent 0 22px, rgba(255, 59, 52, .05) 22px 23px);
}
.nx-grande { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3.6rem); align-items: center; }
.nx-grande-cartel { display: block; box-shadow: 0 30px 60px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1); }
.nx-grande-texto { display: grid; justify-items: start; gap: .5rem; }
.nx-grande-t { margin: .2rem 0 0; font: 400 clamp(3rem, 7vw, 6.2rem)/.88 var(--font-display); letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.nx-grande-cuando { margin: 0; font: 700 .92rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--neon-crimson); }
.nx-grande-donde { margin: 0; max-width: 60ch; color: var(--hm-bone-dim); font-size: .98rem; }
.nx-cuenta { display: flex; gap: clamp(.5rem, 1.6vw, 1rem); margin: .8rem 0 .9rem; }
.nx-cuenta span { display: grid; justify-items: center; min-width: 4.4rem; padding: .6rem .4rem .5rem; background: rgba(10, 10, 12, .55); border: 1px solid rgba(255, 255, 255, .12); }
.nx-cuenta b { font: 400 2.5rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: #fff; }
.nx-cuenta i { font: 600 .6rem var(--font-data, 'Barlow', sans-serif); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--hm-bone-faint); }
@media (prefers-reduced-motion: no-preference) {
  .nx-banda::before, .nx-cine::before { animation: nx-deriva 22s ease-in-out infinite alternate; }
  .nx-grande-cartel { animation: nx-flota 6s ease-in-out infinite; }
  .nx-banda.is-on .nx-grande-texto > * { animation: nx-sube .8s var(--nx-curva) both; }
  .nx-banda.is-on .nx-grande-texto > :nth-child(2) { animation-delay: .08s; }
  .nx-banda.is-on .nx-grande-texto > :nth-child(3) { animation-delay: .16s; }
  .nx-banda.is-on .nx-grande-texto > :nth-child(4) { animation-delay: .22s; }
  .nx-banda.is-on .nx-grande-texto > :nth-child(5) { animation-delay: .28s; }
  .nx-banda.is-on .nx-grande-texto > :nth-child(6) { animation-delay: .34s; }
  .nx-banda.is-on .nx-grande-cartel { animation: nx-entra-izq 1s var(--nx-curva) both, nx-flota 6s ease-in-out 1s infinite; }
}
@keyframes nx-deriva { to { transform: scale(1.2) translate(-3%, 2%); } }
@keyframes nx-flota { 50% { transform: translateY(-10px); } }

/* ------------------------------------------------ banners verticales */
.nx-con-lateral { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 1.3rem; align-items: stretch; }
.nx-vbanner {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .75rem;
  min-height: 420px; padding: 1.4rem 1.3rem; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .1);
}
.nx-vbanner::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--fondo) center / cover; transition: transform 1.4s var(--nx-curva); }
.nx-vbanner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 10, 12, .97) 14%, rgba(10, 10, 12, .5) 56%, rgba(10, 10, 12, .12)); }
.nx-vbanner:hover::before { transform: scale(1.08); }
.nx-vbanner:focus-visible, .nx-hbanner:focus-visible { outline: 2px solid var(--neon-crimson); outline-offset: 3px; }
.nx-vbanner-kicker { align-self: flex-start; padding: .3rem .55rem; background: var(--red-fill, #D91F26); font: 700 .62rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.nx-vbanner-t { font: 400 clamp(2rem, 2.8vw, 2.7rem)/.95 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.nx-vbanner-t em, .nx-hbanner-t em { font-style: normal; color: var(--neon-crimson); }
.nx-vbanner-txt { font-size: .9rem; line-height: 1.5; color: rgba(240, 235, 227, .82); }
.nx-vbanner-cifras { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; font: 600 .7rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--hm-bone-dim); }
.nx-vbanner-cifras b { margin-right: .25rem; font: 400 1.7rem/1 var(--font-display); letter-spacing: 0; color: #fff; }
.nx-vbanner .hm-btn { align-self: flex-start; }
.nx-vbanner--anuncia { border-color: rgba(255, 59, 52, .4); }
/* Un destello que cruza el banner de marcas: llama la vista sin gritar. */
.nx-vbanner--anuncia .nx-vbanner-kicker { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .nx-vbanner--anuncia::before { animation: nx-deriva 26s ease-in-out infinite alternate; }
  .nx-vbanner--anuncia:hover::before { animation-play-state: paused; }
}
.nx-numerada--lista { grid-template-columns: minmax(0, 1fr); gap: 0; }
.nx-numerada--lista > li { padding: .8rem 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.nx-numerada--lista > li:last-child { border-bottom: 0; }
.nx-numerada--lista .nx-nota-cara { grid-template-columns: auto minmax(0, 220px) minmax(0, 1fr); }
.nx-numerada--lista .nx-nota-titulo { font-size: 1.05rem; }
.nx-con-lateral--corto .nx-vbanner { min-height: 0; }
/* Facebook: el azul de la red como acento, reacciones que suben como en vivo. */
.nx-vbanner--fb { --fb: #1877F2; border-color: rgba(24, 119, 242, .45); }
/* Capas: foto (-3), velo (-2), reacciones (-1) y el texto encima de todo. */
.nx-vbanner--fb::before { z-index: -3; }
.nx-vbanner--fb::after { z-index: -2; }
.nx-vbanner--fb::after { background: linear-gradient(to top, rgba(8, 10, 18, .97) 18%, rgba(10, 20, 44, .62) 55%, rgba(24, 119, 242, .22)); }
.nx-vbanner--fb .nx-vbanner-kicker { background: var(--fb); }
.nx-vbanner--fb .nx-vbanner-t em { color: #5AA0FF; }
.nx-fb-logo { position: absolute; top: 1.1rem; right: 1.1rem; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(24, 119, 242, .6); } /* blanco detrás: la "f" del logo es hueco */
.nx-fb-logo svg { width: 56px; height: 56px; fill: var(--fb); }
.nx-fb-cuenta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; font: 600 .74rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .1em; text-transform: uppercase; color: rgba(240, 235, 227, .8); }
.nx-fb-cuenta b { font: 400 2.6rem/1 var(--font-display); letter-spacing: 0; color: #fff; }
.nx-fb-cuenta b:empty { display: none; }
.nx-fb-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--fb); border-color: var(--fb); color: #fff; }
.nx-fb-btn svg { width: 18px; height: 18px; fill: currentColor; }
.nx-vbanner--fb:hover .nx-fb-btn { background: #2D88FF; border-color: #2D88FF; }
.nx-fb-reacciones { position: absolute; inset: 0 0 60%; z-index: -1; overflow: hidden; pointer-events: none; } /* solo la mitad de arriba: nunca detrás de la letra */
.nx-fb-r { position: absolute; bottom: -36px; left: calc(8% + var(--i) * 10%); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; opacity: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
.nx-fb-r svg { width: 19px; height: 19px; fill: #fff; }
.nx-fb-r--like { background: var(--fb); }
.nx-fb-r--corazon { background: #F33E58; }
.nx-fb-r--cuernos { background: var(--red-fill, #D91F26); }
.nx-fb-r--fuego { background: #F7A51B; }
.nx-fb-r--fuego svg, .nx-fb-r--cuernos svg { fill: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .nx-fb-logo { animation: nx-fb-latido 2.4s infinite; }
  .nx-fb-r { animation: nx-fb-sube 5.6s ease-in infinite; animation-delay: calc(var(--i) * .62s); }
  .nx-vbanner--fb::before { animation: nx-deriva 26s ease-in-out infinite alternate; }
}
@keyframes nx-fb-latido { 70% { box-shadow: 0 0 0 16px rgba(24, 119, 242, 0); } 100% { box-shadow: 0 0 0 0 rgba(24, 119, 242, 0); } }
@keyframes nx-fb-sube {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  12% { opacity: 1; transform: translate(6px, -40px) scale(1); }
  60% { opacity: .9; }
  100% { opacity: 0; transform: translate(-12px, -220px) scale(.9); }
}

/* ------------------------------------------------ banner horizontal */
.nx-hbanner {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 240px; margin-top: clamp(2.4rem, 4vw, 3.4rem); padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 3vw, 2.8rem);
  color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .1);
}
.nx-hbanner::before { content: ""; position: absolute; inset: 0 -8%; z-index: -2; background: var(--fondo) center / cover; }
.nx-hbanner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 12, .95) 0%, rgba(10, 10, 12, .7) 45%, rgba(10, 10, 12, .2)); }
.nx-hbanner-texto { display: grid; justify-items: start; gap: .6rem; max-width: 560px; }
.nx-hbanner-t { font: 400 clamp(2rem, 3.6vw, 3.2rem)/.95 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .nx-hbanner::before { animation: nx-paneo 28s ease-in-out infinite alternate; }
}
@keyframes nx-paneo { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

/* ------------------------------------ un poco de vida en las demás secciones */
/* Categorías: un destello cruza la imagen al pasar el ratón. */
.nx-cat-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .24) 50%, transparent 65%); transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
  .nx-cat-foto::after { transition: transform .9s var(--nx-curva); }
  .nx-cat-cara:hover .nx-cat-foto::after { transform: translateX(120%); }
  /* Discos: el vinilo sale y gira mientras el ratón está encima. */
  .nx-disco:hover .nx-vinilo { animation: nx-vinilo 2.2s linear infinite; }
  /* Raíces: la foto de archivo se acerca despacio. */
  .nx-raiz .nx-nota-cara:hover .nx-media img { transform: scale(1.08); transition: transform 5s ease-out, filter .5s; }
  /* Cartelera: la tarjeta avanza y su raya de color crece. */
  .nx-hcard .nx-nota-cara { transition: transform .35s var(--nx-curva), border-color .25s, background-color .25s, box-shadow .3s; }
  .nx-hcard .nx-nota-cara:hover { transform: translateX(4px); box-shadow: inset 4px 0 0 var(--tp, var(--neon-crimson)); }
}
@keyframes nx-vinilo { from { transform: translateX(9%) rotate(0deg); } to { transform: translateX(9%) rotate(360deg); } }

@media (max-width: 900px) {
  .nx-con-lateral { grid-template-columns: minmax(0, 1fr); }
  .nx-vbanner { min-height: 300px; }
  .nx-vbanner--fb { min-height: 460px; } /* arriba queda aire para el logo y las reacciones */
  .nx-grande { grid-template-columns: minmax(0, 170px) minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .nx-grande { grid-template-columns: minmax(0, 1fr); }
  .nx-grande-cartel { max-width: 220px; }
  .nx-cuenta span { min-width: 3.6rem; }
  .nx-cuenta b { font-size: 2rem; }
  .nx-hbanner { flex-direction: column; align-items: flex-start; }
  .nx-numerada--lista .nx-nota-cara { grid-template-columns: auto minmax(0, 36%) minmax(0, 1fr); }
  .nx-top-num { font-size: 9rem; }
}

/* ==========================================================================
   BANDAS GRANDES CON VIDEO, SECCIONES DE CINE Y TOP EN GRANDE (25-sep-2026)
   ========================================================================== */
.nx-bandas-mandos {
  position: absolute; left: 0; right: 0; bottom: 1.3rem; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end; gap: .6rem; pointer-events: none;
}
.nx-bandas-mandos > * { pointer-events: auto; }

/* El video de fondo: cubre el banner sin deformarse (unidades del contenedor)
   y crece un poco para que no se vea la barra de YouTube. Aparece con un
   fundido cuando ya está sonando; debajo sigue el cartel desenfocado. */
.nx-video { position: absolute; inset: 0; z-index: -2; overflow: hidden; container-type: size; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.nx-video.sonando { opacity: 1; }
.nx-video iframe {
  position: absolute; left: 50%; top: 50%; border: 0; pointer-events: none;
  width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%) scale(1.2);
}
.nx-banda:has(.nx-video.sonando)::after {
  background: linear-gradient(100deg, rgba(10, 10, 12, .94) 0%, rgba(10, 10, 12, .62) 42%, rgba(10, 10, 12, .2) 75%, rgba(10, 10, 12, .55));
}

/* Sección de cine: la banda a todo lo ancho, con su video y el título enorme. */
.nx-cine {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end;
  min-height: clamp(460px, 74vh, 700px); margin-top: clamp(2.4rem, 4vw, 3.4rem);
  border-block: 1px solid rgba(255, 59, 52, .3);
}
.nx-cine::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--hm-ink) 4%, rgba(10, 10, 12, .55) 45%, rgba(10, 10, 12, .25)),
    linear-gradient(90deg, rgba(10, 10, 12, .8), transparent 60%);
}
.nx-cine-texto { display: grid; justify-items: start; gap: .5rem; padding-block: 3rem clamp(2.4rem, 5vw, 3.6rem); }
.nx-cine-t { margin: .2rem 0 .1rem; font: 400 clamp(4rem, 11vw, 10rem)/.84 var(--font-display); letter-spacing: .01em; text-transform: uppercase; color: #fff; text-shadow: 0 10px 40px rgba(0, 0, 0, .7); }
@media (prefers-reduced-motion: no-preference) {
  .nx-cine.is-in .nx-cine-t { animation: nx-cine-t 1.2s var(--nx-curva) both; }
}
@keyframes nx-cine-t { from { opacity: 0; letter-spacing: .12em; transform: translateY(26px); } to { opacity: 1; letter-spacing: .01em; transform: none; } }

/* ------------------------------------------------------ el top, más grande */
.nx-fila--top .nx-pista { --n: 1.25; }
@media (min-width: 600px) { .nx-fila--top .nx-pista { --n: 1.8; } }
@media (min-width: 900px) { .nx-fila--top .nx-pista { --n: 2.4; } }
@media (min-width: 1200px) { .nx-fila--top .nx-pista { --n: 3; } }
.nx-fila--top .nx-pista { padding-block: 2.4rem 2rem; }
.nx-top-cara { grid-template-columns: 46% 54%; }
.nx-top-num { font-size: clamp(11rem, 16vw, 19rem); }
.nx-top-pie b { font-size: 1.7rem; }
.nx-top-pie i { font-size: .7rem; }
.nx-top-chip { font-size: .66rem; padding: .36rem .6rem; }
/* Una luz cruza los números del podio, y todos respiran un poco. */
.nx-top--podio .nx-top-num {
  background-image: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .7) 50%, transparent 60%), linear-gradient(180deg, rgba(255, 59, 52, .8), rgba(255, 59, 52, .06) 82%);
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 160% 0, 0 0;
}
@media (prefers-reduced-motion: no-preference) {
  .nx-fila.is-in .nx-top--podio .nx-top-num { animation: nx-num 1s var(--nx-curva) backwards, nx-luz 3.6s ease-in-out 1.2s infinite; animation-delay: calc(min(var(--i, 0), 8) * 70ms + .15s), calc(var(--i, 0) * .45s + 1.2s); }
  .nx-top-cara::before { animation: nx-respira-luz 3.2s ease-in-out infinite alternate; }
  /* En ola: al moverse la fila, los carteles suben y bajan (paralaje de la propia fila). */
  @supports (animation-timeline: view()) {
    .nx-top-cartel { animation: nx-ola linear both; animation-timeline: view(inline); }
    .nx-top--non .nx-top-cartel { animation-name: nx-ola-inversa; }
  }
}
@keyframes nx-luz { 0%, 55% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
@keyframes nx-respira-luz { from { opacity: .3; } to { opacity: .75; } }
@keyframes nx-ola { from { translate: 0 26px; } to { translate: 0 -26px; } }
@keyframes nx-ola-inversa { from { translate: 0 -26px; } to { translate: 0 26px; } }
@media (max-width: 600px) {
  .nx-top-num { font-size: 10rem; }
  .nx-cine { min-height: 420px; }
}

/* -------------------------------------------------------- los más cercanos
   Lo de esta semana, en grande (Sam, 9-oct-2026): el cartel completo, el
   nombre encima y su cuenta corriendo. Lo que es hoy late en rojo. */
.nx-pista--cerca { --n: 3.4; }
.nx-cerca-cara { position: relative; display: block; overflow: hidden; color: inherit; text-decoration: none; border: 1px solid rgba(255, 255, 255, .08); background: #0c0a0b; }
.nx-cerca .nx-media img { transform-origin: 50% 35%; }
.nx-cerca-chip {
  position: absolute; top: .8rem; left: .8rem; z-index: 3; padding: .38rem .62rem;
  background: var(--red-fill, #D91F26); color: #fff;
  font: 700 .74rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .14em; text-transform: uppercase;
}
.nx-cerca-pie {
  position: absolute; inset: auto 0 0; z-index: 2; display: grid; gap: .3rem; padding: 4rem 1rem 1rem;
  background: linear-gradient(to top, rgba(5, 4, 4, .97) 34%, rgba(5, 4, 4, .72) 66%, transparent);
}
.nx-cerca-cuando { font: 700 .74rem var(--font-data, 'Barlow', sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--neon-crimson); }
.nx-cerca-nombre { font: 400 clamp(1.7rem, 2.5vw, 2.4rem)/1 var(--font-display); text-transform: uppercase; color: #fff; }
.nx-cerca-donde { font-size: .88rem; color: var(--hm-bone-dim); }
.nx-cuenta--mini { margin: .35rem 0 0; gap: .35rem; }
.nx-cuenta--mini span { min-width: 0; flex: 1; padding: .32rem .2rem .26rem; background: rgba(255, 255, 255, .06); }
.nx-cuenta--mini b { font-size: 1.35rem; }
.nx-cuenta--mini i { font-size: .52rem; letter-spacing: .12em; }
.nx-cerca--hoy .nx-cerca-cara { border-color: var(--neon-crimson); }
@media (max-width: 1100px) { .nx-pista--cerca { --n: 2.3; } }
@media (max-width: 760px) { .nx-pista--cerca { --n: 1.3; } }
@media (prefers-reduced-motion: no-preference) {
  /* El cartel NUNCA se mueve ni se recorta (regla de Sam): lo que vive es su
     fondo desenfocado y un destello que cruza la tarjeta de vez en cuando. */
  .nx-cerca .nx-media::before { animation: nx-fondo-vivo 12s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -2.5s); }
  .nx-cerca-cara::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .11) 50%, transparent 62%);
    transform: translateX(-130%); animation: nx-destello 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .7s + 1s);
  }
  .nx-cerca--hoy .nx-cerca-chip { animation: nx-late-rojo 1.5s ease-in-out infinite; }
  .nx-cerca--hoy .nx-cerca-cara { animation: nx-brilla-rojo 2.6s ease-in-out infinite; }
}
@keyframes nx-fondo-vivo { from { transform: scale(1); } to { transform: scale(1.18) translate(-3%, -2%); } }
@keyframes nx-destello { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes nx-late-rojo { 50% { box-shadow: 0 0 22px rgba(255, 42, 36, .85); } }
@keyframes nx-brilla-rojo { 50% { box-shadow: 0 0 32px rgba(255, 42, 36, .4); } }