/* ============================================================
   HERO — carrusel de programas (home)
   Reemplaza a la antigua "Rotación cinemática" (.hero-rota, ver
   home.css). Cada slide es un programa real (data-prog); ver
   index.html para el mapeo. No redefine tokens de :root: usa los
   mismos de shared/stc.css (--bg, --text, --red, --c-futbol, etc.)
   para no pisar la fuente de verdad del design system.
   ============================================================ */

.hero-carrusel {
  --hero-h: 760px;
  --hero-scrim: .6;           /* 0 = foto limpia, .85 = muy oscuro */
  /* Dónde termina el velo. 62% cubre el titular en las fotos oscuras (noche,
     acción, fondo desenfocado). Una foto de día con hormigón claro necesita más
     recorrido: el titular llega al 64% de la caja y el velo se le acaba antes.
     Por eso es variable y se sube por slide, no una constante en la regla. */
  --hero-scrim-stop: 62%;
  /* Renglón único donde se apoyan TODOS los controles del carrusel: los puntos
     siempre, y en móvil también las dos flechas. Es una variable y no un 36
     suelto repetido en dos reglas precisamente para que no se desalineen.
     Llegó a colgar de --band-h mientras hubo banderines al pie del hero; ya no
     los hay, así que vuelve a ser una medida propia. */
  --hc-ctrl: 36px;
  position: relative;
  width: 100%;
  height: var(--hero-h);
  overflow: hidden;
  background: #211b12;
}

.hero-carrusel .hc-slides { position: absolute; inset: 0; }

/* opacity:0 + pointer-events:none esconde el slide del ratón pero NO lo saca
   del orden de tabulación: los cinco CTA inactivos seguían siendo enfocables y
   con el teclado se recorrían cinco enlaces invisibles antes de llegar al
   contenido. visibility:hidden sí los saca. El retardo de .6s es para que el
   slide que sale alcance a desvanecerse antes de desaparecer. */
.hero-carrusel .hc-slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .6s var(--ease-out), visibility 0s linear .6s;
}
.hero-carrusel .hc-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .6s var(--ease-out), visibility 0s;
}

.hero-carrusel .hc-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 100% 40%;
  display: block;
}
.hero-carrusel .hc-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,8,4,var(--hero-scrim)) 0%, rgba(10,8,4,0) var(--hero-scrim-stop));
}

/* ---------- Velo de arriba: el que hace legible el nav ----------
   El nav del home es transparente y sus enlaces van en blanco sobre la foto.
   El .hc-scrim de arriba NO los cubre: es horizontal y se apaga en el 62% del
   ancho, justo antes de «Moto GP», «Tenis» y «Otros». Medido el 2026-08-23
   muestreando los píxeles reales de las seis fotos bajo cada enlace, el peor
   punto de cada slide daba: US Open 1,48 · Clásico 2,36 · F1 1,60 ·
   Superclásico 2,06 · Valencia 2,03. Hacen falta 4,5. No era teoría: el «1» de
   «FÓRMULA 1» caía sobre la línea blanca de la pista y desaparecía.

   Es exactamente el mismo fallo que ya se corrigió en las seis subpáginas
   —ver la nota de `body .stc-nav` en sport.css— y por el mismo motivo: el
   contraste del nav no puede depender de qué foto tenga el slide. Allá se
   resolvió con barra crema opaca; aquí no se puede, porque el nav en blanco
   sobre la foto es el golpe de vista del home. Un velo superior hace el mismo
   trabajo sin quitarle el cine.

   El 0,50 no es a ojo: es el valor mínimo que deja las seis fotos por encima
   de 4,5 con margen (la peor, US Open, queda en 5,08) contando que en la
   izquierda el velo se SUMA al .hc-scrim. A 0,45 la peor bajaba a 4,65 y no
   dejaba aire para una foto futura más clara.

   ⚠️ z-index 1 a propósito: por encima de la foto y del scrim (ambos en auto)
   y por debajo del .hc-copy (2). El titular no se vela.
   ⚠️ Los 300px de alto no llegan al texto: la copia más alta de los seis
   slides empieza en 220px y de todos modos va por encima.
   ⚠️ NO lo muevas a .stc-nav::before ni ::after: los dos pseudoelementos del
   nav ya son la franja tricolor y su barra de progreso (ver stc.css). */
.hero-carrusel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 300px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10,8,4,.50) 0,
    rgba(10,8,4,.48) 92px,
    rgba(10,8,4,0) 100%);
}

/* bloque de texto reposicionable por slide (--pos-x / --pos-y inline) */
.hero-carrusel .hc-copy {
  position: absolute;
  left: var(--pos-x, 78px);
  top: var(--pos-y, 200px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: min(90vw, 1100px);
  z-index: 2;
}
.hero-carrusel .hc-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 8vw, 120px);
  line-height: .96;
  text-transform: uppercase;
  color: var(--title-color, var(--bg));
  text-shadow: 0 16px 46px rgba(20,14,6,.5);
}
.hero-carrusel .hc-sub {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--sub-color, var(--bg));
  text-shadow: 0 4px 18px rgba(20,14,6,.5);
  /* Sólo hace algo en un caso: el slide de F1, que desde que nombra las tres
     carreras ("Ciudad de México, São Paulo y Las Vegas") se parte en dos
     renglones por debajo de 331px de ancho y dejaba "LAS VEGAS" solo abajo.
     Los otros cinco subtítulos son de una línea y para ellos esto es inocuo. */
  text-wrap: balance;
}
.hero-carrusel .hc-cta {
  align-self: flex-start;
  margin-top: 14px;
  padding: 19px 36px;
  border-radius: 999px;
  background: var(--sp, var(--red));
  color: var(--sp-ink, #fff);
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.hero-carrusel .hc-cta:hover { box-shadow: 0 14px 34px color-mix(in srgb, var(--sp, var(--red)) 45%, transparent); }
.hero-carrusel .hc-cta:active { transform: scale(.97); }

/* Reordenado del bloque de texto en slides concretos.
   .hc-copy es un flex column, así que basta con `order` para cambiar el orden
   visual sin tocar el orden del DOM (que sigue siendo título → bajada → CTA,
   que es el que leen los lectores de pantalla y el que tiene sentido semántico).
   Sólo hay un elemento enfocable en el bloque, así que no se rompe el tab order.
   Se anula el margin-top del CTA porque ahí ya sólo tiene que respetar el gap. */
.hero-carrusel .hc-copy--reorder .hc-cta { margin-top: 0; }

/* Camp Nou: el bloque baja para que la palabra "Barcelona" quede justo sobre
   la franja de graderío que dice "MÉS QUE UN CLUB". El CTA sube por encima. */
.hero-carrusel .hc-slide[data-slide="barcelona"] .hc-cta { order: -1; }

/* ── Aquí vivía el paquete "texto a la derecha", y se fue entero el 2026-08-22 ──
   Eran tres reglas que sólo existían para la foto vieja de Moto GP (un piloto de
   Pramac solo, en primer plano, pegado al costado izquierdo): `.hc-copy--derecha`
   (left:auto + right:--pos-x + text-align:right + align-self:flex-end en el CTA),
   el `order:-1` del CTA de ese slide, y un `.hc-scrim` volteado a 270deg —porque
   el scrim base sólo oscurece la izquierda, y con el texto a la derecha el
   titular caía sobre la parte clara de la foto—.
   Con el pelotón de Brno el sujeto cambió de lado y los seis slides vuelven a
   llevar el texto a la izquierda, así que las tres quedaron sin un solo usuario.
   Se anotan por si algún día vuelve a entrar una foto con el motivo a la
   izquierda: hay que devolver las tres a la vez, no sólo la de posición — sin
   voltear el scrim el titular pierde el contraste. */

/* Moto GP: sin regla de object-position, y es deliberado. El archivo
   (motogp-brno.webp, 1900x1013 = 1,8756) viene recortado desde el disco a la
   proporción de la caja a 1440 (1425x760 = 1,875): medido en el navegador, el
   "cover" dibuja la foto en 0,0 a 1425x760 exactos, así que no sobra ni un pixel
   por ningún eje y el object-position global (100% 40%) no mueve nada. En móvil
   sí hace falta, ver abajo. */

/* navegación */
/* Las flechas miden 54px y van a 22px del borde: así el círculo termina en
   x=76, justo antes de los 78px donde arranca la columna de texto (--pos-x).
   Con los 62px/26px anteriores el borde derecho caía en x=88 y se metía 10px
   dentro del texto, así que la flecha izquierda pisaba el título en todas las
   diapositivas (se veía sobre la "C" de CHAMPIONS y la "B" de BOCA). */
.hero-carrusel .hc-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px;
  border: 0; border-radius: 999px;
  background: rgba(243,232,207,.18);
  backdrop-filter: blur(6px);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  transition: background .25s var(--ease-out);
}
.hero-carrusel .hc-nav:hover { background: rgba(243,232,207,.34); }
.hero-carrusel .hc-prev { left: 22px; }
.hero-carrusel .hc-next { right: 22px; }
.hero-carrusel .hc-nav span { display: block; width: 20px; height: 20px; }
.hero-carrusel .hc-prev span { border-left: 3px solid var(--bg); border-bottom: 3px solid var(--bg); transform: rotate(45deg); margin-left: 5px; }
.hero-carrusel .hc-next span { border-right: 3px solid var(--bg); border-top: 3px solid var(--bg); transform: rotate(45deg); margin-right: 5px; }

.hero-carrusel .hc-dots {
  position: absolute; left: 50%; bottom: var(--hc-ctrl); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  z-index: 5;
}
.hero-carrusel .hc-dot {
  position: relative;
  width: 13px; height: 13px; padding: 0;
  border-radius: 999px;
  border: 2px solid var(--bg);
  background: transparent;
  cursor: pointer;
}
/* El punto se ve de 13px pero el área que responde al dedo es de 25px, que es
   el mínimo de destino táctil. Con 14px de separación entre puntos las áreas
   quedan a 2px una de otra: no se solapan, así que no se falla de vecino. */
.hero-carrusel .hc-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; }
.hero-carrusel .hc-dot.is-active { background: var(--bg); }

/* Pausa del avance automático. Va en el renglón de los puntos porque es un
   control del carrusel, no un elemento de la composición: mismo círculo
   translúcido que las flechas, a la mitad de su tamaño. Sin él, el hero es
   movimiento automático de 6 s sin forma de pararlo (WCAG 2.2.2, nivel A). */
.hero-carrusel .hc-pause {
  margin-left: 4px;
  width: 26px; height: 26px; padding: 0;
  flex: none;
  border: 0; border-radius: 999px;
  background: rgba(243,232,207,.18);
  backdrop-filter: blur(6px);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s var(--ease-out);
}
.hero-carrusel .hc-pause:hover { background: rgba(243,232,207,.34); }
/* dos barras = pausa */
.hero-carrusel .hc-pause span {
  display: block; width: 8px; height: 9px;
  border-left: 2.5px solid var(--bg);
  border-right: 2.5px solid var(--bg);
}
/* un triángulo = reanudar */
.hero-carrusel .hc-pause.is-paused span {
  width: 0; height: 0;
  border: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--bg);
  margin-left: 2px;
}

/* Champions (champions-trofeo.jpg, 1900x849 = 2,2379).
   ⚠️ Antes aquí iba champions-bernabeu.webp, recortado desde el disco a 1,8756
   para calzar exacto con la caja de escritorio, y por eso este bloque NO llevaba
   regla de escritorio. Esa foto se cayó el 2026-08-23: tenía el rótulo "ESTADIO
   SANTIAGO BERNABEU" y el escudo del Real Madrid legibles en cuadro, y la final
   de 2027 es en el Riyadh Air Metropolitano. La copa vuelve a ser la foto del
   slide, así que vuelven a hacer falta las dos reglas de encuadre. Juan cerró la
   decisión ese mismo día y el archivo viejo ya está en la papelera: esto no es
   provisional, y el carrusel se queda en seis slides.

   Escritorio: la caja (1425x760 = 1,8750) es más "alta" de proporción que el
   archivo, así que el cover escala por altura (x0,8952) y sobran 308px de ancho
   en coordenadas de archivo. Medido sobre el bitmap, la copa ocupa del 52% al
   80% del ancho del archivo, y el titular "CHAMPIONS LEAGUE" llega al 64,1% de
   la caja. De ahí el 0% en X: recortando los 308px por la DERECHA (que es fondo
   negro con bokeh, no se pierde nada) la copa se corre al 62%-96% de la caja y
   sólo quedan 29px de asa detrás de la última E. Los otros anclajes la meten
   debajo del texto: el 50% del centrado la sube al 52% de la caja y se come 166
   px de titular; el 100% del global es todavía peor. La punta del asa derecha
   sobrevive porque cae en el 1526 del archivo y la ventana llega al 1592.
   El 40% vertical del global no mueve nada porque en Y no sobra.

   Velo: esta foto es la más oscura del carrusel (fondo casi negro con bokeh
   azul), lo contrario de la fachada al sol que estaba antes. El corte de velo en
   78% que necesitaba aquella se quita y vuelve al 62% por defecto. Medido pixel
   a pixel bajo el titular, con el velo ya aplicado: luminancia media 38,8 y sólo
   el 1,47% de los pixeles baja de 3:1 contra el crema — y son los puntos de
   bokeh, que son motas sueltas, no una mancha clara continua como era el
   hormigón del Bernabéu. Subir el corte al 70% deja ese 1,47% en 1,29%: no
   arregla nada porque las motas están por toda la foto, y a cambio ensucia de
   negro el lado del texto. Con el anclaje al 50% ese mismo número era 4,26%. */
.hero-carrusel .hc-slide[data-slide="champions"] .hc-photo { object-position: 0% 50%; }

@media (min-width: 881px) {
  /* US Open: la foto viene recortada casi a la medida del hero (1.78:1), así
     que arriba de ~1367px de viewport sólo se recorta en vertical. El 40% por
     defecto se comía la gorra del tenista en pantallas anchas; con 8% queda
     aire sobre la cabeza y la raqueta sigue entrando entera. El 0% horizontal
     es para los anchos menores, donde sí recorta de lado: ancla la foto a la
     izquierda y corre al jugador a la derecha, lejos del título. */
  .hero-carrusel .hc-slide[data-slide="us-open"] .hc-photo { object-position: 0% 8%; }
}

/* Superclásico: la foto ya viene recortada desde el archivo para mostrar
   sobre todo pasto y tribuna (poco cielo), así que quedó bien ancha (~2.57:1)
   y en desktop el "cover" siempre recorta por los costados, no por arriba/
   abajo — el eje que importa es el horizontal, no el vertical. Se ancla a
   la derecha para que la tribuna con "BOCA" y el "12" quede visible. */
@media (min-width: 881px) {
  .hero-carrusel .hc-slide[data-slide="superclasico"] .hc-photo { object-position: 100% 50%; }
}
/* En mobile se ve la foto completa (sin recorte vertical posible por el
   aspect ratio), así que ahí el texto "BOCA/12" sí puede colar por abajo
   del título si se centra el recorte — se ancla a la izquierda para
   dejarlo fuera de cuadro y mostrar sólo cielo, torres y graderío. */
@media (max-width: 880px) {
  .hero-carrusel .hc-slide[data-slide="superclasico"] .hc-photo { object-position: 0% 50%; }
}

/* Champions en móvil: aquí el eje se invierte. La caja pasa a 390x70svh (~0,66)
   contra una foto de 2,238, así que el "cover" recorta MUCHO por los costados
   (sólo sobrevive el 29,5% del ancho) y manda la X. El 50% del global centraría
   la ventana en el archivo, y la copa no está centrada: ocupa del 49% al 81% del
   ancho, o sea que se vería sólo su mitad izquierda cortada en seco. La copa
   mide 604px de los 1900 y la ventana móvil sólo 560px, así que entera no cabe
   nunca; lo mejor posible es centrarla, y eso pasa en el 71%: la ventana cae
   sobre el 50%-80% del archivo y las puntas de las dos asas rozan los bordes.
   En Y ya no hace falta subir el encuadre (no había rótulo que salvar): 50%. */
@media (max-width: 880px) {
  .hero-carrusel .hc-slide[data-slide="champions"] .hc-photo { object-position: 71% 50%; }
}

@media (max-width: 880px) {
  .hero-carrusel { --hero-h: 70svh; }
  /* la caja se vuelve angosta y alta: aquí el texto pasa abajo de la foto,
     así que el recorte se centra en vez de anclarse a la derecha */
  .hero-carrusel .hc-photo { object-position: 50% 45%; }
  .hero-carrusel .hc-copy { left: clamp(20px, 5vw, 78px); top: auto; bottom: 110px; }
  .hero-carrusel .hc-scrim { background: linear-gradient(180deg, rgba(10,8,4,.25) 0%, rgba(10,8,4,.72) 100%); }
  /* El hero pasa a 70svh y aquí el scrim ya es vertical y arranca en .25, así
     que el velo del nav no necesita tanto recorrido: 180px cubren la barra
     (que en móvil sólo lleva logo y hamburguesa) y se apaga antes de comerse
     el centro de la foto. */
  .hero-carrusel::after { height: 180px; }

  /* En móvil el bloque de texto se ancla abajo y ocupa casi todo el ancho, así
     que unas flechas centradas verticalmente le caen encima (tapaban la "VE"
     de "VER PROGRAMA"). Se bajan a las esquinas, a la misma altura que los
     puntos: los tres controles quedan en un solo renglón y el texto libre.
     46px de lado para no invadir el ancho de los puntos en pantallas de 320px.

     El 16,5 es la mitad de la diferencia de alturas ((46 − 13) / 2): así el
     centro de la flecha cae exactamente en el centro del punto y los tres
     controles quedan alineados en el renglón --hc-ctrl. */
  .hero-carrusel .hc-nav {
    width: 46px; height: 46px;
    top: auto; bottom: calc(var(--hc-ctrl) - 16.5px); transform: none;
  }
  .hero-carrusel .hc-prev { left: 16px; }
  .hero-carrusel .hc-next { right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carrusel .hc-slide,
  .hero-carrusel .hc-slide.is-active { transition: none; }
  .hero-carrusel .hc-cta { transition: none; }
  .hero-carrusel .hc-nav { transition: none; }
}