/* ==========================================================================
   AZTECH METAL - SISTEMA GRÁFICO
   Lenguaje tomado de dos referencias que comparten la misma base:
   negro, rojo y blanco puro, sin grises tibios de por medio.

     Del cartel de boda alternativa: cintas de texto repetido y etiquetas
     pegadas en ángulo.

     Del cartel techwear: marcas de esquina, rayas diagonales de peligro,
     numeración de serie, rótulos invertidos.

   Regla de la casa: el blanco y el rojo son masas, no filos. Nada de
   contornos grises de 1px alrededor de cajas, que es de donde venía la
   sensación de plantilla.

   Prefijo .gx-  ·  Se carga después de home.css y refinamiento.css
   ========================================================================== */

:root {
  --gx-black: #08080A;
  --gx-panel: #101014;
  --gx-white: #FFFFFF;
  --gx-red: #FF2A24;
  --gx-red-deep: #D4141B;
  --gx-mute: rgba(255, 255, 255, 0.58);
  --gx-faint: rgba(255, 255, 255, 0.34);
}

/* ==========================================================================
   2. RAYAS DE PELIGRO
   Franja diagonal roja y negra. Marca el borde de las secciones que avisan
   algo (última hora, convocatoria) sin necesidad de un icono.
   ========================================================================== */

.gx-hazard {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--gx-red) 0px, var(--gx-red) 11px,
    var(--gx-black) 11px, var(--gx-black) 22px
  );
}

.gx-hazard-thin {
  height: 6px;
  width: 100%;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--gx-red) 0px, var(--gx-red) 7px,
    transparent 7px, transparent 14px
  );
}

/* ==========================================================================
   3. MARCAS DE ESQUINA
   Dos escuadras en diagonal en vez de un marco cerrado. La tarjeta se lee
   como recorte, no como caja.
   ========================================================================== */

.gx-corners { position: relative; }

.gx-corners::before,
.gx-corners::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  pointer-events: none;
  transition: border-color 0.22s ease;
}

.gx-corners::before {
  top: 0;
  left: 0;
  border-top: 2px solid var(--gx-red);
  border-left: 2px solid var(--gx-red);
}

.gx-corners::after {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid var(--gx-red);
  border-right: 2px solid var(--gx-red);
}

.gx-corners:hover::before,
.gx-corners:hover::after { border-color: var(--gx-white); }

/* ==========================================================================
   4. RÓTULOS
   Tres pesos: relleno rojo, invertido (blanco con texto negro) y contorno.
   Todos macizos. Ninguno lleva borde gris.
   ========================================================================== */

.gx-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.26rem 0.62rem;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

.gx-label-red { background: var(--gx-red); color: var(--gx-white); }
.gx-label-invert { background: var(--gx-white); color: var(--gx-black); }
.gx-label-outline {
  background: transparent;
  color: var(--gx-white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* Rótulo pegado en ángulo, como calcomanía */
.gx-sticker {
  transform: rotate(-2.5deg);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   5. CINTA DE TEXTO REPETIDO
   Franja roja con la misma frase corriendo. En las dos referencias es el
   elemento que da movimiento sin animar nada más.
   ========================================================================== */

.gx-ticker {
  background: var(--gx-red);
  color: var(--gx-white);
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 38px;
  border-top: 2px solid var(--gx-black);
  border-bottom: 2px solid var(--gx-black);
}

.gx-ticker-track {
  display: flex;
  gap: 1.6rem;
  white-space: nowrap;
  animation: gx-run 32s linear infinite;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-left: 1.6rem;
}

.gx-ticker:hover .gx-ticker-track { animation-play-state: paused; }

@keyframes gx-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   6. NUMERACIÓN DE SERIE
   El dato técnico de la segunda referencia. Va en blanco tenue, nunca
   compite con el titular.
   ========================================================================== */

.gx-serial {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gx-faint);
  font-feature-settings: 'tnum' 1;
}

/* Puntos en fila: separador corto entre bloques de datos */
.gx-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.gx-dots span {
  width: 3px;
  height: 3px;
  background: var(--gx-red);
  display: block;
}

/* ==========================================================================
   7. TÍTULO APILADO
   La misma palabra repetida en capas, la de arriba sólida y las de abajo
   en contorno. Sustituye al antetítulo pequeño en las secciones fuertes.
   ========================================================================== */

.gx-stack {
  position: relative;
  line-height: 0.82;
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.gx-stack-ghost {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.16);
  text-stroke: 1px rgba(255, 255, 255, 0.16);
}

.gx-stack-solid { display: block; color: var(--gx-white); }
.gx-stack-red { display: block; color: var(--gx-red); }

/* ==========================================================================
   8. ESTRELLA DE CONTORNO
   Acento suelto de la primera referencia. Se coloca a mano, no en serie.
   ========================================================================== */

.gx-star {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  opacity: 0.9;
  z-index: 3;
}

/* ==========================================================================
   9. APLICACIÓN AL SITIO
   ========================================================================== */

/* --- Cintas de última hora y agenda ------------------------------------- */
.nw-breaking {
  background: var(--gx-red);
  border-top: 2px solid var(--gx-black);
  border-bottom: 2px solid var(--gx-black);
}

.nw-breaking-label {
  background: var(--gx-white);
  color: var(--gx-black);
  font-weight: 700;
  letter-spacing: 0.18em;
}

.nw-breaking-item { color: rgba(255, 255, 255, 0.92); font-weight: 500; }
.nw-breaking-item:hover { color: var(--gx-white); }
.nw-breaking-kicker { color: rgba(255, 255, 255, 0.72); }

/* --- Rótulos de sección ------------------------------------------------- */
.hm-eyebrow,
.nw-kicker {
  color: var(--gx-white);
  background: var(--gx-red);
  padding: 0.24rem 0.6rem;
  letter-spacing: 0.16em;
  font-weight: 700;
}

.hm-eyebrow::before { display: none; }

.nw-kicker { display: inline-block; }

/* La lista numerada y las cifras dejan el latón: las referencias trabajan
   con rojo, blanco y negro, y el ámbar rompía esa disciplina. */
.hm-ranked-link::before,
.hm-agenda-day,
.hm-stat-num,
.nw-ranked-item::before { color: var(--gx-red); }

.hm-agenda-month,
.hm-stat-label { color: var(--gx-faint); }

/* --- Tarjetas ----------------------------------------------------------- */
.hm-news-lead-media,
.hm-hero-figure,
.nw-lead-media,
.nw-feature-media { border-radius: 0; }

.hm-tag {
  border-radius: 0;
  background: var(--gx-red);
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* Filas del hilo de noticias: filo rojo macizo, no una línea tenue */
.nw-wire-item { border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
.nw-wire-item::before { width: 3px; background: var(--gx-red); }

/* --- Botones ------------------------------------------------------------ */
.hm-btn,
.btn-primary-cta,
.nw-tab,
.gx-label { border-radius: 0; }

.hm-btn-primary,
.btn-primary-cta {
  background: var(--gx-red);
  border-color: var(--gx-red);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.hm-btn-primary:hover,
.btn-primary-cta:hover { background: var(--gx-white); color: var(--gx-black); border-color: var(--gx-white); }

.hm-btn-ghost {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  border-color: transparent;
}

.hm-btn-ghost:hover {
  background: var(--gx-white);
  color: var(--gx-black);
  box-shadow: inset 0 0 0 1px var(--gx-white);
}

/* --- Bloque de convocatoria --------------------------------------------- */
.hm-submit {
  border-left: 0;
  border-radius: 0;
  background: var(--gx-panel);
  position: relative;
  overflow: hidden;
}

.hm-submit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--gx-red) 0px, var(--gx-red) 8px,
    var(--gx-black) 8px, var(--gx-black) 16px
  );
}

.hm-submit { padding-left: calc(clamp(2.2rem, 4vw, 3.4rem) + 10px); }

/* --- Sección de la escena ------------------------------------------------ */
.hm-scene { background: var(--gx-panel); }
.hm-scene::before { display: none; }
.hm-scene-figure { border-radius: 0; }

/* --- Franja al aire ------------------------------------------------------ */
.hm-onair {
  background: var(--gx-panel);
  border-top: 2px solid var(--gx-red);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hm-onair-badge { color: var(--gx-red); font-weight: 700; }
.hm-onair-cover { border-radius: 0; border-color: rgba(255, 255, 255, 0.14); }
.hm-onair-listeners b { color: var(--gx-white); }

/* --- Cabecera ------------------------------------------------------------ */
.cinematic-header { border-bottom: 2px solid var(--gx-red); }
.cinematic-header a:focus-visible, .cinematic-header button:focus-visible { outline: 2px solid var(--neon-crimson-bright, #FF6157); outline-offset: 3px; }

/* ==========================================================================
   9b. BANNER DE PORTADA
   El banner ocupa todo el ancho y el logo se apoya sobre él, a la izquierda.
   El velo es un degradado lateral, no una capa oscura pareja: así la banda
   y la pirámide siguen leyéndose del lado derecho.
   ========================================================================== */

.gxh {
  position: relative;
  width: 100%;
  /* La caja toma la proporción del banner (1884 x 835), así la fotografía
     entra completa en lugar de recortarse arriba y abajo. El mínimo evita
     que quede una tira delgada en pantallas muy anchas. */
  aspect-ratio: 1884 / 835;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--gx-black);
}

.gxh-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.gxh-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,8,10,0.97) 0%, rgba(8,8,10,0.88) 32%, rgba(8,8,10,0.28) 58%, rgba(8,8,10,0.55) 100%),
    linear-gradient(to top, rgba(8,8,10,0.9) 0%, transparent 38%);
}

.gxh-inner { position: relative; width: 100%; z-index: 2; }

.gxh-left {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  padding: clamp(2rem, 5vw, 3.4rem) 0 clamp(2.6rem, 5vw, 3.8rem);
}

.gxh-logo {
  width: clamp(210px, 26vw, 330px);
  height: auto;
  display: block;
  /* El logotipo es rojo oscuro y sobre la fotografía se perdía. En blanco
     recorta contra la imagen, que es como lo resuelven las dos referencias. */
  filter: brightness(0) invert(1);
  opacity: 0.97;
}

.gxh-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.gxh-title {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3.7rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--gx-white);
  margin: 0;
}

.gxh-title span { color: var(--gx-red); }

/* ==========================================================================
   9c. SECCIONES DEL SITIO
   El mapa de lo que cubre la casa, justo debajo del banner. Antes era una
   tira de cifras que nadie miraba; ahora cada sección es un bloque con
   fotografía, índice y título en display, del tamaño de una tarjeta real.
   ========================================================================== */

.gxc {
  background: var(--gx-black);
  padding: clamp(2.4rem, 4.5vw, 3.6rem) 0 clamp(2.4rem, 4.5vw, 3.4rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.gxc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}

.gxc-h {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--gx-white);
  margin: 0;
}

.gxc-h em { font-style: normal; color: var(--gx-red); }

.gxc-sub {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--gx-mute);
}

.gxc-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;                /* la rejilla se lee como una placa continua */
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.gxc-cell { min-width: 0; }

.gxc-face {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 178px;
  padding: 1.15rem 1.15rem 1.05rem;
  background: var(--gx-panel);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  height: 100%;
  isolation: isolate;
}

/* La fotografía queda muy al fondo y sube al apuntar: da contexto sin
   competir con el título. */
.gxc-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.24;
  filter: grayscale(0.5) contrast(1.05);
  transform: scale(1.02);
  transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.35s ease;
}

.gxc-face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(8, 8, 10, 0.95) 22%, rgba(8, 8, 10, 0.55) 100%);
  transition: background 0.3s ease;
}

.gxc-face:hover .gxc-bg {
  opacity: 0.52;
  transform: scale(1.07);
  filter: grayscale(0) contrast(1.08);
}

.gxc-face:hover::before {
  background: linear-gradient(to top, rgba(8, 8, 10, 0.92) 18%, rgba(180, 18, 22, 0.34) 100%);
}

.gxc-face:focus-visible { outline: 2px solid var(--gx-red); outline-offset: -3px; }

/* Índice grande arriba a la derecha, al modo de la referencia técnica */
.gxc-idx {
  position: absolute;
  top: 0.75rem;
  right: 0.95rem;
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  transition: -webkit-text-stroke-color 0.3s ease, color 0.3s ease;
  pointer-events: none;
}

.gxc-face:hover .gxc-idx { -webkit-text-stroke-color: rgba(255, 255, 255, 0.5); }

.gxc-body { display: flex; flex-direction: column; gap: 0.3rem; }

.gxc-count {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gx-red);
  font-feature-settings: 'tnum' 1;
}

.gxc-title {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--gx-white);
}

.gxc-desc {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--gx-mute);
}

/* La flecha entra desde la izquierda al apuntar la celda. */
.gxc-arrow {
  position: absolute;
  right: 1.05rem;
  bottom: 1.05rem;
  width: 19px;
  height: 19px;
  color: var(--gx-red);
  opacity: 0;
  transform: translateX(-7px);
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gxc-face:hover .gxc-arrow { opacity: 1; transform: none; }

/* La celda de la señal va en rojo macizo: rompe la rejilla y es el único
   bloque que no lleva fotografía. */
.gxc-cell-live .gxc-face { background: var(--gx-red); }
.gxc-cell-live .gxc-face::before { display: none; }
.gxc-cell-live .gxc-face:hover { background: var(--gx-red-deep); }
.gxc-cell-live .gxc-idx { -webkit-text-stroke-color: rgba(255, 255, 255, 0.45); }
.gxc-cell-live .gxc-desc { color: rgba(255, 255, 255, 0.82); }
.gxc-cell-live .gxc-arrow { color: var(--gx-white); }

.gxc-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gx-white);
}

.gxc-pulse {
  width: 8px;
  height: 8px;
  background: var(--gx-white);
  border-radius: 50%;
  display: inline-block;
  animation: gx-beat 2.2s ease-out infinite;
}

@keyframes gx-beat {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.65); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (max-width: 1100px) {
  .gxc-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .gxc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gxc-face { min-height: 152px; padding: 1rem; }
  .gxc-idx { font-size: 2rem; }
  .gxc-title { font-size: 1.28rem; }
  .gxc-desc { font-size: 0.73rem; }
}

@media (max-width: 430px) {
  .gxc-face { min-height: 132px; }
  .gxc-desc { display: none; }   /* en pantallas muy chicas manda el título */
}

@media (prefers-reduced-motion: reduce) {
  .gxc-bg, .gxc-arrow, .gxc-idx, .gxc-face::before { transition: none; }
  .gxc-face:hover .gxc-bg { transform: none; }
  .gxc-pulse { animation: none; }
}

/* ==========================================================================
   9d. DESTACADAS EN CARRUSEL
   Mismo idioma que las secciones de arriba (índice, display condensado,
   rojo sobre negro) pero invertido a propósito para que no se confundan:
   allá la fotografía queda al fondo y el bloque es ancho; aquí la
   fotografía manda, la tarjeta es vertical y la fila se arrastra.
   ========================================================================== */

.gxs {
  background: var(--gx-panel);
  padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(2.2rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

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

.gxs-h {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--gx-white);
  margin: 0.6rem 0 0;
}

.gxs-h em { font-style: normal; color: var(--gx-red); }

.gxs-nav { display: flex; gap: 0.5rem; }

.gxs-btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--gx-white);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.gxs-btn svg { width: 19px; height: 19px; }

.gxs-btn:hover:not(:disabled) {
  background: var(--gx-red);
  color: var(--gx-white);
  box-shadow: inset 0 0 0 1px var(--gx-red);
}

.gxs-btn:disabled { opacity: 0.3; cursor: default; }

.gxs-btn:focus-visible { outline: 2px solid var(--gx-red); outline-offset: 2px; }

/* La fila se sale del contenedor a propósito: deja ver que hay más
   tarjetas al borde de la pantalla. */
.gxs-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  /* Sin ajuste por tarjeta: el giro automático avanza fracciones de pixel y
     el enganche los anula, dejando el carrusel clavado en su sitio. */
  scroll-snap-type: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 clamp(1rem, 3.2vw, 3rem) 0.4rem;
}

.gxs-viewport::-webkit-scrollbar { display: none; }
.gxs-viewport:focus-visible { outline: 2px solid var(--gx-red); outline-offset: -2px; }

.gxs-track {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  gap: 1.05rem;
  max-width: 1440px;
  width: max-content;
}

.gxs-card {
  flex: 0 0 clamp(250px, 25vw, 320px);
  scroll-snap-align: start;
}

.gxs-face {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 4;
  padding: 1.2rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--gx-black);
  isolation: isolate;
}

.gxs-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.gxs-face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(8, 8, 10, 0.96) 16%, rgba(8, 8, 10, 0.35) 62%, rgba(8, 8, 10, 0.1) 100%);
  transition: background 0.32s ease;
}

.gxs-face:hover .gxs-img { transform: scale(1.05); }

.gxs-face:hover::before {
  background: linear-gradient(to top, rgba(8, 8, 10, 0.96) 16%, rgba(180, 18, 22, 0.4) 100%);
}

.gxs-face:focus-visible { outline: 2px solid var(--gx-red); outline-offset: -3px; }

/* Marca de esquina superior: el guiño al cluster sin repetir su índice. */
.gxs-face::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-top: 2px solid var(--gx-red);
  border-left: 2px solid var(--gx-red);
  transition: width 0.28s ease, height 0.28s ease;
}

.gxs-face:hover::after { width: 26px; height: 26px; }

.gxs-tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--gx-red);
  color: var(--gx-white);
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.24rem 0.55rem;
}

.gxs-title {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: 1.42rem;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  color: var(--gx-white);
  margin: 0 0 0.45rem;
}

.gxs-foot {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.62);
  font-feature-settings: 'tnum' 1;
}

.gxs-foot span:nth-child(2) {
  width: 3px;
  height: 3px;
  background: var(--gx-red);
  display: block;
}

@media (max-width: 700px) {
  .gxs-card { flex-basis: 76vw; }
  .gxs-nav { display: none; }   /* en táctil se arrastra con el dedo */
  .gxs-title { font-size: 1.28rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gxs-viewport { scroll-behavior: auto; }
  .gxs-img, .gxs-face::before, .gxs-face::after { transition: none; }
  .gxs-face:hover .gxs-img { transform: none; }
}

/* Portada del día, debajo del banner */
.gxl { padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(1rem, 2vw, 1.6rem); }

.gxl-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(1.6rem, 3.5vw, 3.2rem);
  align-items: center;
}

.gxl-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.gxl-text .hm-hero-title { font-size: clamp(1.9rem, 3.4vw, 3rem); margin-top: 0.9rem; }
.gxl-text .hm-btn { margin-top: 0.5rem; }

@media (max-width: 1024px) {
  .gxl-grid { grid-template-columns: 1fr; }
  .gxl-text .hm-hero-title { font-size: clamp(1.8rem, 6vw, 2.4rem); }
}

@media (max-width: 900px) {
  /* En vertical la proporción apaisada dejaría una tira de 170px donde no
     cabe ni el logotipo. Aquí manda la altura y la foto sí se recorta,
     centrada en la banda. */
  .gxh { aspect-ratio: auto; min-height: 520px; }
  .gxh-bg { object-position: 62% center; }
  .gxh-veil {
    background:
      linear-gradient(to top, rgba(8,8,10,0.97) 0%, rgba(8,8,10,0.72) 46%, rgba(8,8,10,0.35) 100%);
  }
  .gxh-left { padding: 8.5rem 0 2rem; gap: 0.85rem; }
}

/* ==========================================================================
   10. MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .gx-ticker-track { animation: none; }
}

@media (max-width: 700px) {
  .gx-star { display: none; }
  .gx-ticker { height: 32px; }
  .gx-ticker-track { font-size: 0.68rem; }
}



/* ==========================================================================
   CARRUSELES A TODO LO ANCHO
   Las tarjetas salen del contenedor y llegan a los bordes de la pantalla,
   así se ve que la fila sigue más allá del encabezado. El relleno lateral
   iguala al del contenedor para que la primera tarjeta quede alineada con
   el título que tiene encima.
   ========================================================================== */

.gxs-viewport,
.ag-reel-row {
  /* Truco de ancho completo: se sale del contenedor por los dos lados sin
     provocar barra horizontal en la página. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: clamp(1rem, 3.2vw, 3rem);
  padding-right: clamp(1rem, 3.2vw, 3rem);
  box-sizing: border-box;
}

/* El carril interno ya no necesita centrarse: manda el relleno de arriba. */
.gxs-track { margin: 0; max-width: none; }

/* --- Arrastre ------------------------------------------------------------
   La mano abierta anuncia que se puede agarrar; la cerrada confirma que
   está agarrado. Mientras se arrastra se bloquea la selección de texto,
   que si no se pinta de azul todo lo que pasa por debajo del cursor. */
.gxs-viewport,
.ag-reel-row { cursor: grab; }

.gxs-viewport.esta-arrastrando,
.ag-reel-row.esta-arrastrando {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;   /* el desplazamiento suave pelea con el arrastre */
}

.gxs-viewport.esta-arrastrando *,
.ag-reel-row.esta-arrastrando * { pointer-events: none; }

/* Las imágenes no se arrastran como archivo dentro de un carrusel. */
.gxs-img, .ag-poster-img { -webkit-user-drag: none; user-drag: none; }

/* Con la fila a todo lo ancho, los controles del carrusel de noticias se
   quedan donde están: solo el carril se extiende. */
.gxs { overflow: hidden; }
.ag-reel { overflow: hidden; }

/* --------------------------------------------------------------------------
   BLOQUE DE PARTICIPACIÓN
   Dos accesos desde la portada a las piezas donde el lector hace algo en vez
   de solo leer. Vive en grafico.css porque duelo.css y top.css solo se
   cargan en sus propias páginas.
   -------------------------------------------------------------------------- */
.tpcta { padding: clamp(2.2rem, 4.5vw, 3.4rem) 0 0; }

.tpcta-h {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 1.1rem;
  padding-left: 0.85rem;
  border-left: 4px solid var(--gx-red, #FF2A24);
}

.tpcta-par {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(0.8rem, 2vw, 1.3rem);
  align-items: stretch;
}

.tpcta-caja {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--gx-panel, #101014);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.tpcta-caja:hover { border-color: var(--gx-red, #FF2A24); transform: translateY(-3px); }

.tpcta-destacada {
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--gx-red, #FF2A24);
}
.tpcta-destacada::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 18%, rgba(255, 42, 36, 0.16), transparent 58%);
  pointer-events: none;
}

.tpcta-eyebrow {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gx-red, #FF2A24);
}

.tpcta-title {
  font-family: var(--font-headline, 'Barlow Condensed', sans-serif);
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #fff;
}
.tpcta-title em { font-style: normal; color: var(--gx-red, #FF2A24); }

.tpcta-deck {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.64);
  max-width: 54ch;
}

/* Los cuatro logos de muestra dicen de qué va el duelo sin tener que leerlo. */
.tpcta-logos {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.4vw, 1.8rem);
  flex-wrap: wrap;
  margin: 0.5rem 0 0.2rem;
}
.tpcta-logos img {
  height: clamp(20px, 2.4vw, 30px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.62;
  transition: opacity 0.2s ease;
}
.tpcta-caja:hover .tpcta-logos img { opacity: 1; }

.tpcta-btn {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gx-red, #FF2A24);
}
.tpcta-caja:hover .tpcta-btn { color: #fff; }

@media (max-width: 860px) {
  .tpcta-par { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   CABECERA QUE NO DESBORDA
   Entre 1025 y 1280 px la navegación tiene más enlaces de los que caben y
   empujaba el bloque de acciones fuera de la pantalla, lo que hacía que toda
   la página se desplazara de lado. Con min-width en cero la navegación puede
   encogerse, y si aun así no cabe se desliza dentro de su propia franja en
   lugar de romper el resto.
   -------------------------------------------------------------------------- */
.cinematic-header .header-nav {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cinematic-header .header-nav::-webkit-scrollbar { display: none; }
.cinematic-header .header-nav .nav-link { white-space: nowrap; }
.cinematic-header .header-actions { min-width: 0; }