/* ============================================================
   CBAT / 24 — Sistema visual de la web pública
   ------------------------------------------------------------
   Fase 1 del proyecto "nueva web pública" (17/08/2026).

   Referencia aprobada por el usuario:
     docs/project-control/referencias/cbat24_home_concept_02.html
   Paleta OFICIAL del club (extraída del PNG del club con un
   lector de píxeles, no estimada a ojo):
     docs/project-control/referencias/cbat_paleta_oficial.png

   ------------------------------------------------------------
   POR QUÉ ESTE ARCHIVO TIENE SU PROPIO :root
   ------------------------------------------------------------
   El front público es una SUPERFICIE AISLADA con estética propia
   — el caso (b) que contempla `.claude/rules/workflow.md`, igual
   que `assets/css/fan-album.css`.

   Su paleta es la OFICIAL del club (azul #004f9f + amarillo
   #fdc300), que NO coincide con la del Manager (navy #071432 +
   dorado #f1c84c). Meter estos valores en `tokens.css`
   retematizaría la plataforma entera —Manager y Portal Coach—,
   que NO es lo que se ha pedido.

   Por eso: las DEFINICIONES viven aquí, en un único bloque, y el
   resto del archivo es 100 % `var()`. Cero hex fuera de la capa
   de tokens. Tintes con `color-mix`, nunca `rgba()` de canales
   fijos (un rgba fijo no seguiría al club si algún día cambia).

   ------------------------------------------------------------
   LA REGLA DEL AMARILLO (heredada de la web actual, medida)
   ------------------------------------------------------------
   Sobre superficies oscuras y sobre el azul, el amarillo es
   texto libre (10,2:1 sobre el navy; 5,1:1 sobre el azul).
   Sobre superficie clara da 1,5:1 y NO se usa como texto: solo
   como fondo, filete o subrayado. Es la misma regla que ya
   aplica `front.css`.
   ============================================================ */

:root {
  /* ---- 1 · PALETA OFICIAL (única capa con hex del archivo) ---- */

  /* Azules */
  --f24-blue:        #004f9f;   /* AZUL CBAT — superficie de sección */
  --f24-blue-mid:    #2968a0;
  --f24-blue-soft:   #4f78a0;
  --f24-blue-pale:   #6f879f;

  /* Oscuros */
  --f24-navy:        #021f47;   /* el más profundo — hero y footer */
  --f24-navy-800:    #122b46;
  --f24-navy-700:    #233347;
  --f24-navy-600:    #313b46;
  /* ⚠️ EL NEGRO SE RETIRÓ del sistema el 17/08/2026 — decisión del
     usuario: «no podemos tener fondos en negro, todo colores CBAT y
     colores claros». No se deja el token "por si acaso": un token que
     nadie usa acaba usándose sin pensar. Para oscurecer sobre foto se
     usa `--f24-navy`, que tiñe en la marca en vez de apagar. */

  /* Amarillos */
  --f24-yellow:      #fdc300;   /* AMARILLO CBAT */
  --f24-yellow-mid:  #fcd44d;
  --f24-yellow-soft: #fbe07f;
  --f24-yellow-pale: #fbecb1;
  --f24-amber:       #efaa00;   /* estado activo / hover */

  /* Neutros */
  --f24-grey:        #706f6f;
  --f24-grey-soft:   #9d9d9c;

  /* ---- 2 · SEMÁNTICAS ---------------------------------------- */
  /* El claro y el blanco los toma de la plataforma: son los
     mismos de la web actual y así el front no inventa un segundo
     "casi blanco" (decisión del usuario: "el resto como está la
     web actual"). */
  --f24-paper:       var(--bg);
  --f24-white:       var(--card);

  /* Superficie EDITORIAL (noticias): claro con un velo del azul del club.
     Se deriva del azul en vez de ser un color suelto, así sigue al club si
     cambia su azul y nunca desafina. Sustituye al negro que había aquí. */
  --f24-editorial:   color-mix(in srgb, var(--f24-blue) 6%, var(--f24-white));

  --f24-ink:         var(--f24-navy);          /* texto sobre claro */
  --f24-ink-soft:    var(--f24-grey);          /* metadatos sobre claro */
  --f24-on-dark:     var(--f24-white);         /* texto sobre oscuro */
  --f24-on-dark-soft: color-mix(in srgb, var(--f24-white) 72%, var(--f24-blue-pale));

  --f24-line-dark:   color-mix(in srgb, var(--f24-white) 16%, transparent);
  --f24-line-light:  color-mix(in srgb, var(--f24-navy) 14%, transparent);
  --f24-veil:        color-mix(in srgb, var(--f24-navy) 82%, transparent);

  /* ---- 3 · TIPOGRAFÍA ---------------------------------------- */
  /* La familia sale del tema del club (Sistema → Configuración).
     Hoy `tema.font_heading` está sin fijar, así que resuelve a
     Inter; si el club activa Bison, los títulos cambian solos y
     este archivo no se toca. */
  --f24-display: var(--font-heading, var(--font-body));
  --f24-body: var(--font-body);

  --f24-d1: clamp(3.25rem, 11.5vw, 11rem);   /* titular del hero        */
  --f24-d2: clamp(2.75rem, 8vw, 7.5rem);     /* título de sección       */
  --f24-d3: clamp(1.75rem, 5.5vw, 5rem);     /* equipo en el marcador   */
  --f24-d4: clamp(2rem, 5vw, 4.75rem);       /* titular de evento       */
  --f24-d5: clamp(1.5rem, 3.2vw, 3rem);      /* titular de noticia      */
  --f24-d6: clamp(4rem, 15vw, 13.75rem);     /* firma del pie           */

  --f24-label:    .6875rem;                  /* 11px — micro-etiquetas  */
  --f24-label-sm: .5625rem;                  /* 9px  — pills            */
  --f24-lead:     1rem;

  --f24-track-display: -.055em;
  --f24-track-label:   .16em;
  --f24-leading-display: .82;

  /* ---- 4 · RITMO Y FORMA ------------------------------------- */
  --f24-gutter:  5vw;
  --f24-section: clamp(3.5rem, 11vh, 8.75rem);
  --f24-nav-h:   72px;
  --f24-tap:     44px;                        /* mínimo táctil */
}

/* ============================================================
   BASE
   ============================================================ */

.f24 {
  margin: 0;
  background: var(--f24-navy);
  color: var(--f24-on-dark);
  font-family: var(--f24-body);
  font-size: var(--font-base, 15px);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* `:where()` a propósito: aporta 0 de especificidad.
   Escrito como `.f24 a` (clase + tipo) GANABA a `.f24-btn` (clase
   sola) y todos los botones y enlaces se quedaban con el color
   heredado de su sección: texto navy sobre botón navy —invisible—
   y texto blanco sobre amarillo —1,6:1— en el hero. Es la clase de
   fallo que solo se ve mirando la pantalla, no leyendo el CSS. */
.f24 :where(a) { color: inherit; text-decoration: none; }
.f24 img { max-width: 100%; display: block; }

.f24 h1, .f24 h2, .f24 h3 {
  font-family: var(--f24-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--f24-track-display);
  line-height: var(--f24-leading-display);
  margin: 0;
  /* Los titulares gigantes parten palabra antes que desbordar:
     con nombres de rival largos (los hay en BD) es la diferencia
     entre "se ve apretado" y "se sale de la pantalla". */
  overflow-wrap: break-word;
}

/* Foco visible SIEMPRE, y con contraste en las dos superficies. */
.f24 :focus-visible {
  outline: 3px solid var(--f24-yellow);
  outline-offset: 3px;
}
.f24 .f24-section--claro :focus-visible,
.f24 .f24-section--editorial :focus-visible,
.f24 .f24-section--amarillo :focus-visible {
  outline-color: var(--f24-blue);
}

.f24-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--f24-yellow); color: var(--f24-navy);
  padding: 12px 18px; font-weight: 900;
  text-transform: uppercase; letter-spacing: var(--f24-track-label);
  font-size: var(--f24-label);
}
.f24-skip:focus { left: 8px; top: 8px; }

/* Etiqueta pequeña de broadcast: el contrapunto del display gigante. */
.f24-kicker {
  display: block;
  font-size: var(--f24-label);
  font-weight: 800;
  letter-spacing: var(--f24-track-label);
  text-transform: uppercase;
  color: var(--f24-yellow);
  margin: 0 0 .75rem;
}
.f24-section--claro .f24-kicker,
.f24-section--editorial .f24-kicker { color: var(--f24-blue); }
.f24-section--amarillo .f24-kicker  { color: var(--f24-navy); }

/* Acciones sueltas dentro de una sección (p. ej. el CTA del estado
   vacío del Match Center). */
.f24-acciones { margin: 1.5rem 0 0; }

/* ------------------------------------------------------------
   EQUIPACIONES (18/08) — el escaparate de las camisetas
   ------------------------------------------------------------
   La del ratón se adelanta un poco y se endereza: el movimiento sugiere
   que se puede coger, sin llegar a ser un juguete. */
.f24-equipaciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: 2.5rem;
}
.f24-equipacion { margin: 0; text-align: center; }
.f24-equipacion img {
  display: block; width: 100%; height: auto;
  transform: rotate(-1.5deg);
  transition: transform .3s ease-out, filter .3s ease-out;
  filter: drop-shadow(0 1rem 1.5rem color-mix(in srgb, var(--f24-navy) 45%, transparent));
}
.f24-equipacion:hover img {
  transform: rotate(0) translateY(-.75rem) scale(1.04);
  filter: drop-shadow(0 1.75rem 2rem color-mix(in srgb, var(--f24-navy) 65%, transparent));
}
.f24-equipacion:nth-child(even) img { transform: rotate(1.5deg); }
.f24-equipacion:nth-child(even):hover img { transform: rotate(0) translateY(-.75rem) scale(1.04); }
.f24-equipacion figcaption { margin-top: 1rem; }
.f24-equipacion figcaption strong {
  display: block;
  font-family: var(--f24-display);
  font-size: 1.125rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .04em;
}
.f24-equipacion figcaption span {
  display: block; margin-top: .25rem;
  font-size: var(--f24-label); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--f24-yellow);
}

/* ------------------------------------------------------------
   BLOQUE LIBRE (18/08) — la sección comodín del club
   ------------------------------------------------------------
   Sin foto es una columna de texto centrada en su superficie; con foto,
   dos columnas. Se apoya en las piezas que ya existen (`f24-kicker`,
   `f24-lead`, `f24-btn`) para que no parezca de otra web. */
.f24-libre { max-width: 46rem; }
.f24-libre h2 { font-size: var(--f24-d2); margin: 0 0 1rem; }
.f24-libre .f24-lead { margin: 0; }
.f24-libre-foto { margin: 0; }
.f24-libre-foto img { display: block; width: 100%; height: auto; border-radius: var(--f24-radio, 0); }

@media (min-width: 900px) {
  .f24-libre--con-foto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    max-width: 68.75rem;
  }
}

/* Aviso temporal del hero: algo puntual y con fecha de caducidad. Amarillo
   sobre navy —pastilla, no texto suelto— para que se lea como un anuncio
   del club y no como parte del titular. */
.f24-aviso {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  background: var(--f24-yellow);
  color: var(--f24-navy);
  font-size: var(--f24-label);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   GEOMETRÍA DE PISTA
   ------------------------------------------------------------
   La zona y el círculo de tiros libres, con la proporción real
   de una pista FIBA (zona 4,9 × 5,8 m · círculo de 3,6 m).
   No es un fondo decorativo: ancla la sección clara como si
   fuera el parqué y ocupa el hueco derecho que dejaba la
   composición a una columna.
   ------------------------------------------------------------ */
.f24-paint {
  position: absolute;
  right: -6vw; top: 50%;
  width: 30vw; height: 25.4vw;
  transform: translateY(-50%);
  border: 2px solid var(--f24-line-light);
  border-right: 0;
  pointer-events: none;
}
.f24-paint::before {
  content: "";
  position: absolute;
  left: -9vw; top: 50%;
  width: 18vw; height: 18vw;
  transform: translateY(-50%);
  border: 2px solid var(--f24-line-light);
  border-radius: 50%;
}

/* Palabra destacada dentro de un titular.
   Sobre oscuro es color; sobre claro es subrayado (contraste). */
.f24-mark { font-style: normal; color: var(--f24-yellow); }
.f24-section--claro .f24-mark,
.f24-section--editorial .f24-mark,
.f24-section--amarillo .f24-mark {
  color: inherit;
  box-shadow: inset 0 -.14em 0 var(--f24-yellow);
}

.f24-lead {
  font-size: var(--f24-lead);
  line-height: 1.5;
  color: var(--f24-on-dark-soft);
  max-width: 34rem;
  margin: 0;
}

/* Botón: rectángulo puro. Sin radio, sin sombra, sin degradado. */
.f24-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--f24-tap);
  padding: 0 1.5rem;
  background: var(--f24-yellow);
  color: var(--f24-navy);
  font-size: var(--f24-label);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.f24-btn:hover { background: var(--f24-amber); transform: translateY(-2px); }
.f24-btn--ink { background: var(--f24-navy); color: var(--f24-yellow); }
.f24-btn--ink:hover { background: var(--f24-navy-800); }

.f24-pill {
  display: inline-block;
  padding: .5rem .625rem;
  border: 1px solid var(--f24-line-dark);
  font-size: var(--f24-label-sm);
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* ============================================================
   BARRA SUPERIOR — el "24" es el botón, no un adorno
   ============================================================ */

.f24-nav {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--f24-nav-h);
  display: flex; align-items: center;
  padding: 0 var(--f24-gutter);
  background: color-mix(in srgb, var(--f24-navy) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--f24-line-dark);
}
.f24-brand {
  display: flex; align-items: center; gap: .625rem;
  font-family: var(--f24-display);
  font-weight: 900; font-size: 1.5rem;
  letter-spacing: -.06em; text-transform: uppercase;
}
.f24-brand img { height: 38px; width: auto; }
.f24-brand b { color: var(--f24-yellow); }

.f24-menu {
  margin-left: auto;
  display: flex; align-items: center; gap: 1.5rem;
  list-style: none; padding: 0; margin-block: 0;
}
.f24-menu a {
  display: inline-flex; align-items: center;
  min-height: var(--f24-tap);
  font-size: var(--f24-label);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--f24-on-dark-soft);
}
.f24-menu a:hover { color: var(--f24-on-dark); }
.f24-menu a[aria-current="page"] {
  color: var(--f24-yellow);
  box-shadow: inset 0 -3px 0 var(--f24-yellow);
}

/* ------------------------------------------------------------
   EL RELOJ DE POSESIÓN — uno solo, vivo, en la barra
   ------------------------------------------------------------
   Antes había un número dentro de una caja repetido en cada
   sección. Un 24 suelto seis veces es un adorno; un reloj que
   CORRE es el concepto. Ahora es un anillo que se vacía y unos
   dígitos que bajan de 24 a 00 según avanzas por la página, como
   la posesión de un partido. Sigue siendo el acceso al Match
   Center. `--f24-clock-p` (1 → 0) lo escribe el JS.
   ------------------------------------------------------------ */
.f24-clock {
  position: relative;
  margin-left: 1.5rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: 0 0 auto;
  background: conic-gradient(
    var(--f24-yellow) calc(var(--f24-clock-p, 1) * 360deg),
    color-mix(in srgb, var(--f24-white) 16%, transparent) 0
  );
  transition: background .25s linear;
}
.f24-clock::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--f24-navy);
}
.f24-clock b {
  position: relative; z-index: 1;
  font-family: var(--f24-display);
  font-size: 1rem; font-weight: 900;
  letter-spacing: -.04em;
  color: var(--f24-yellow);
  font-variant-numeric: tabular-nums;
}
/* Últimos segundos: el reloj avisa, como en un pabellón. */
.f24-clock[data-final="true"] {
  background: conic-gradient(
    var(--f24-amber) calc(var(--f24-clock-p, 1) * 360deg),
    color-mix(in srgb, var(--f24-white) 16%, transparent) 0
  );
}
.f24-clock[data-final="true"] b { color: var(--f24-amber); }
.f24-clock:hover::after { background: var(--f24-navy-700); }

.f24-burger {
  display: none;
  margin-left: auto;
  width: var(--f24-tap); height: var(--f24-tap);
  background: none; border: 1px solid var(--f24-line-dark);
  color: var(--f24-on-dark);
  cursor: pointer;
  align-items: center; justify-content: center;
  font-size: var(--f24-label);
  font-weight: 900; letter-spacing: var(--f24-track-label);
  text-transform: uppercase;
}

/* ============================================================
   HERO — la entrada en pista
   ============================================================ */

/* ALTURA DEL HERO — decisión del usuario (17/08): «la imagen y el texto es
   súper alto, no podemos hacer tanto scroll en solo eso».
   Antes ocupaba la pantalla entera (100svh) y había que bajar un viewport
   completo para llegar al primer dato. Ahora es una banda: entra el titular
   y ya se intuye lo que viene debajo, que es lo que invita a seguir. */
.f24-hero {
  position: relative;
  min-height: clamp(19rem, 52vh, 30rem);
  display: flex; align-items: flex-end;
  padding: clamp(2.5rem, 7vh, 4.5rem) var(--f24-gutter) clamp(1.75rem, 5vh, 3rem);
  background:
    radial-gradient(circle at 78% 30%, color-mix(in srgb, var(--f24-blue) 55%, transparent), transparent 33%),
    linear-gradient(135deg, var(--f24-navy) 0%, var(--f24-navy-800) 100%);
  overflow: hidden;
}
/* Foto del club en duotono: nunca a color (regla de la web actual). */
.f24-hero--foto::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--f24-hero-img);
  background-size: cover;
  background-position: center 30%;
  filter: grayscale(1);
  opacity: .22;
}
.f24-hero--velo-suave::before  { opacity: .38; }
.f24-hero--velo-fuerte::before { opacity: .12; }

/* ------------------------------------------------------------
   MARCA DE FONDO — el escudo del club, no un círculo cualquiera
   ------------------------------------------------------------
   Antes había aquí una circunferencia dibujada con `border`, que
   era la línea de campo. El usuario preguntó de dónde salía ese
   círculo y propuso el escudo amarillo sin fondo (17/08): tiene
   razón — el escudo YA es un círculo, y además es el del club.
   Sangra por el borde derecho y va a opacidad baja: acompaña el
   titular, no compite con él.
   ------------------------------------------------------------ */
.f24-marca {
  position: absolute;
  right: -7vw; top: 50%;
  transform: translateY(-50%);
  width: min(30rem, 55vw); height: auto;
  opacity: .12;
  pointer-events: none; user-select: none;
}
/* ⚠️ EL "24" GIGANTE DEL HERO SE RETIRÓ (usuario, 17/08): «me gusta arriba
   en el menú pero el grande no». El concepto vive donde funciona —el reloj
   de la barra, que además CORRE— y no repetido a 620px de fondo.
   No reintroducir la marca de agua: se probó, se vio y se descartó. */
.f24-hero-in { position: relative; z-index: 2; width: 100%; max-width: 68.75rem; }
.f24-hero h1 { font-size: var(--f24-d1); letter-spacing: -.075em; margin: .5rem 0 1.75rem; }
.f24-hero-foot { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }

/* Alto de la cabecera, elegible desde Configuración (18/08). El valor medio
   es el de siempre: quien no toque nada no nota el cambio. */
.f24-hero--compacta { min-height: clamp(14rem, 34vh, 20rem); }
.f24-hero--completa { min-height: clamp(24rem, 82vh, 46rem); }

/* ------------------------------------------------------------
   FIGURA DEL HERO (18/08) — la camiseta del club, un balón…
   ------------------------------------------------------------
   Va a la derecha del titular y se mueve MUY despacio: la animación está
   para dar vida, no para llamar la atención. Solo desde 900px: en móvil
   robaría el sitio al titular, que es lo que tiene que leerse. */
.f24-hero-figura { display: none; }

@media (min-width: 900px) {
  .f24-hero--con-figura { align-items: center; }
  .f24-hero--con-figura .f24-hero-in { max-width: 60%; }
  .f24-hero-figura {
    display: block;
    position: absolute;
    right: clamp(1rem, 5vw, 5rem);
    top: 50%;
    z-index: 2;
    width: clamp(11rem, 26vw, 20rem);
    transform: translateY(-50%);
    animation: f24-flota 7s ease-in-out infinite alternate;
    filter: drop-shadow(0 1.5rem 2rem color-mix(in srgb, var(--f24-navy) 55%, transparent));
  }
  /* La perspectiva va en el CONTENEDOR y el giro en la imagen: así el
     balanceo (animación CSS del contenedor) y la inclinación que sigue al
     ratón (transform por JS en la imagen) no se pisan. Si ambos escribieran
     `transform` sobre el mismo elemento, el último ganaría y se perdería
     uno de los dos. */
  .f24-hero-figura { perspective: 900px; }
  .f24-hero-figura img {
    display: block; width: 100%; height: auto;
    transform: rotateX(0) rotateY(0);
    transition: transform .25s ease-out;
    will-change: transform;
  }
}

/* El recorrido es de 14px en 7 segundos: se percibe como que respira, no
   como que se mueve. Con `prefers-reduced-motion` el reset global de
   tokens.css la deja quieta, sin necesidad de repetirlo aquí. */
@keyframes f24-flota {
  from { transform: translateY(-50%) rotate(-1.2deg); }
  to   { transform: translateY(calc(-50% - 14px)) rotate(1.2deg); }
}

/* ============================================================
   TICKER — CBAT PULSE en directo
   ============================================================ */

.f24-ticker {
  background: var(--f24-yellow);
  color: var(--f24-navy);
  overflow: hidden;
  padding: .8125rem 0;
}
.f24-ticker-track {
  display: flex; gap: 2rem;
  width: max-content;
  white-space: nowrap;
  padding-left: var(--f24-gutter);
  animation: f24-ticker 38s linear infinite;
}
.f24-ticker:hover .f24-ticker-track,
.f24-ticker:focus-within .f24-ticker-track { animation-play-state: paused; }
.f24-ticker span {
  font-size: var(--f24-label);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.f24-ticker-dot { color: var(--f24-blue); }
/* Mensaje de la cinta que lleva a algún sitio. Subrayado, porque sobre el
   amarillo el color no puede ser la única señal de que es un enlace. La
   cinta ya se para al pasar por encima o al recibir foco, así que se puede
   pinchar sin perseguirlo. */
.f24-tick-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 2px;
}
.f24-tick-link:hover { text-decoration-thickness: 3px; }
@keyframes f24-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   SECCIONES — cada una es una superficie a sangre, no una card
   ============================================================ */

/* `overflow: visible` a propósito: el CORTE de cada sección se dibuja
   fuera de su caja (translateY -99%) para montarse sobre la anterior.
   Con `hidden` se recortaba y no se veía ni uno. Lo que sobresale por
   los lados lo recorta `.f24 { overflow-x: hidden }` del body. */
.f24-section { position: relative; overflow: visible; padding: var(--f24-section) var(--f24-gutter); }
.f24-section > *:not(.f24-paint):not(.f24-corte) { position: relative; z-index: 1; }
.f24-section--claro { background: var(--f24-paper); color: var(--f24-ink); }
.f24-section--azul  { background: var(--f24-blue);  color: var(--f24-on-dark); }
.f24-section--editorial { background: var(--f24-editorial); color: var(--f24-ink); }
.f24-section--amarillo  { background: var(--f24-yellow); color: var(--f24-navy); }
.f24-section--navy  { background: var(--f24-navy); color: var(--f24-on-dark); }

/* ------------------------------------------------------------
   CORTES ENTRE SECCIONES (17/08/2026)
   ------------------------------------------------------------
   Encargo del usuario: «los cortes entre una y otra sección,
   rollo montañita, libro…». Cada sección dibuja su propia
   frontera SUPERIOR con SU color y se monta encima de la
   anterior: así encaja siempre sin saber de qué color era la de
   arriba, y cambiar el fondo de una sección no obliga a tocar la
   vecina.

   `color` se hereda de la superficie y el `<path>` usa
   `fill="currentColor"` — por eso cada modificador de fondo fija
   el color del corte al suyo.
   ------------------------------------------------------------ */
.f24-corte {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: clamp(28px, 4.5vw, 70px);
  transform: translateY(-99%);   /* el -99 evita la costura de 1px del subpíxel */
  pointer-events: none;
  line-height: 0;
}
.f24-corte svg { display: block; width: 100%; height: 100%; }

.f24-section--claro     > .f24-corte { color: var(--f24-paper); }
.f24-section--editorial > .f24-corte { color: var(--f24-editorial); }
.f24-section--azul      > .f24-corte { color: var(--f24-blue); }
.f24-section--navy      > .f24-corte { color: var(--f24-navy); }
.f24-section--amarillo  > .f24-corte { color: var(--f24-yellow); }

.f24-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.25rem; flex-wrap: wrap;
  margin-bottom: 2.75rem;
}
.f24-head h2 { font-size: var(--f24-d2); }
.f24-more {
  display: inline-flex; align-items: center; gap: .5em; min-height: var(--f24-tap);
  font-size: var(--f24-label);
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--f24-yellow);
}
.f24-more:hover { box-shadow: inset 0 -2px 0 currentColor; }
/* Sobre claro el amarillo no se lee (1,5:1): el enlace es azul y
   el amarillo entra como subrayado al pasar. */
.f24-section--claro .f24-more,
.f24-section--editorial .f24-more { color: var(--f24-blue); }
.f24-section--claro .f24-more:hover,
.f24-section--editorial .f24-more:hover { box-shadow: inset 0 -.5em 0 -.35em var(--f24-yellow); }
.f24-section--amarillo .f24-more { color: var(--f24-navy); }

/* Estado vacío: se escribe como titular, no como "no hay datos".
   La web del club no puede tener huecos con cara de error. */
.f24-empty {
  font-family: var(--f24-display);
  font-size: var(--f24-d5);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--f24-track-display);
  line-height: .95;
  margin: 0;
  max-width: 20ch;
}
/* La frase de "todavía no hay" es el TITULAR de esa sección, no
   un aviso apagado: se escribe a plena tinta con la palabra clave
   subrayada. Un gris al 55 % la dejaba con cara de error. */
.f24-empty em { font-style: normal; box-shadow: inset 0 -.12em 0 var(--f24-yellow); }
.f24-empty + .f24-lead { margin-top: 1.25rem; }
.f24-section--claro .f24-lead,
.f24-section--editorial .f24-lead { color: var(--f24-ink-soft); }
.f24-section--amarillo .f24-lead  { color: var(--f24-navy); }

/* ============================================================
   MATCH CENTER — un marcador de retransmisión, no una tarjeta
   ============================================================ */

.f24-board {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 2.375rem 0;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
/* NOMBRE EN EL MARCADOR — dos alturas.
   Un marcador de retransmisión enseña el CLUB en grande y el
   equipo en pequeño. Aquí es además lo que evita el desastre:
   con "CBAT Senior Masc." o "CB Rincón de la Victoria" a 7rem,
   el navegador partía las palabras con guiones ("CB MARBE-LLA").
   Nada de `hyphens: auto` en nombres propios. */
.f24-board-team { margin: 0; min-width: 0; }
.f24-board-team strong {
  display: block;
  font-family: var(--f24-display);
  font-size: var(--f24-d3);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .88;
  text-transform: uppercase;
  text-wrap: balance;
}
.f24-board-team span {
  display: block;
  margin-top: .5rem;
  font-family: var(--f24-body);
  font-size: var(--f24-label);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--f24-ink-soft);
}
.f24-board-team--away { text-align: right; }
.f24-board-mid { text-align: center; }
.f24-board-mid strong {
  display: block;
  font-family: var(--f24-display);
  font-size: clamp(1.75rem, 6vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -.06em;
}
.f24-board-mid small {
  display: block;
  font-size: var(--f24-label-sm);
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--f24-ink-soft);
  margin-top: .375rem;
}
/* Resultado: el ganador manda tipográficamente. */
.f24-board-mid strong .f24-score-win  { color: var(--f24-blue); }
.f24-board-mid strong .f24-score-sep  { opacity: .35; margin: 0 .15em; }

/* «Jugado» (Baby y Premini, que no llevan marcador). Es una PALABRA
   donde el marcador pone cifras: al tamaño del resultado —hasta
   5.5rem— se comería los nombres de los dos equipos, así que baja de
   escala y suelta el interletraje negativo, que es para números. */
.f24-board-mid strong.f24-board-jugado {
  font-size: clamp(1.25rem, 3.5vw, 2.75rem);
  letter-spacing: -.02em;
}

.f24-board-meta {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1rem;
  font-size: var(--f24-label);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Lista de partidos: filas con filete de estado. Sin cajas. */
.f24-fixtures { margin-top: 3rem; display: grid; }
.f24-fixture {
  display: grid;
  grid-template-columns: 10rem 1fr auto;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.125rem 0 1.125rem 1rem;
  border-top: 1px solid var(--f24-line-light);
  border-left: 3px solid var(--f24-blue);
}
.f24-fixture:last-child { border-bottom: 1px solid var(--f24-line-light); }
.f24-fixture--final { border-left-color: var(--f24-yellow); }
.f24-fixture--rest  { border-left-color: var(--f24-grey-soft); }
.f24-fixture-cat {
  font-size: var(--f24-label-sm);
  font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--f24-ink-soft);
}
.f24-fixture-tie strong {
  font-family: var(--f24-display);
  font-size: clamp(1.125rem, 2.2vw, 1.75rem);
  font-weight: 900; letter-spacing: -.03em; text-transform: uppercase;
  display: block;
}
.f24-fixture-tie em {
  font-style: normal;
  color: var(--f24-ink-soft);
  font-size: .875rem;
}
.f24-fixture-when {
  font-size: var(--f24-label);
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.f24-fixture-score {
  font-family: var(--f24-display);
  font-size: clamp(1.25rem, 3vw, 2.25rem);
  font-weight: 900; letter-spacing: -.04em;
  white-space: nowrap;
}
/* Misma posición que el marcador, pero es texto: sin el aire de una
   cifra grande, para que no compita con los resultados de al lado. */
.f24-fixture-score--jugado {
  font-size: clamp(.95rem, 1.8vw, 1.3rem);
  letter-spacing: .02em;
}

/* Las mismas filas sobre superficie OSCURA (sección de resultados):
   solo cambian las líneas y los grises, la anatomía es idéntica —un
   partido se lee igual esté donde esté. */
.f24-fixtures--oscuro .f24-fixture { border-top-color: var(--f24-line-dark); }
.f24-fixtures--oscuro .f24-fixture:last-child { border-bottom-color: var(--f24-line-dark); }
.f24-fixtures--oscuro .f24-fixture-cat,
.f24-fixtures--oscuro .f24-fixture-tie em { color: var(--f24-on-dark-soft); }

/* ============================================================
   EVENTOS — rejilla asimétrica, dorsal de fondo
   ============================================================ */

.f24-events { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1.125rem; }
.f24-event {
  position: relative;
  min-height: 35rem;
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 1.875rem;
  background: var(--f24-navy-800);
}
/* Los velos van con el NAVY del club, no con negro: oscurecen igual y
   tiñen en la marca en vez de apagar (decisión del usuario, 17/08). */
.f24-event--main {
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--f24-navy) 80%, transparent), transparent 70%),
    radial-gradient(circle at 65% 35%, color-mix(in srgb, var(--f24-blue-mid) 90%, var(--f24-white)), transparent 30%),
    var(--f24-navy-800);
}
.f24-event--side {
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--f24-navy) 85%, transparent), transparent),
    var(--f24-navy);
}
.f24-event-num {
  position: absolute; right: -.625rem; top: -2.2rem;
  font-family: var(--f24-display);
  font-size: 15.625rem; font-weight: 900;
  letter-spacing: -.1em;
  color: color-mix(in srgb, var(--f24-white) 6%, transparent);
  pointer-events: none; user-select: none;
}
.f24-event-txt { position: relative; }
.f24-event-txt h3 { font-size: var(--f24-d4); line-height: .86; margin: .625rem 0; }
.f24-event-txt p { color: var(--f24-on-dark-soft); margin: 0; }

/* ============================================================
   NOTICIAS — separadas por filete de 1px, nunca por caja
   ============================================================ */

/* Flex y no grid: con `1.2fr .8fr .8fr` fijas, una sola noticia dejaba dos
   columnas vacías pintadas de gris —el mismo agujero que tenían los
   partners—. Así la primera sigue mandando cuando hay varias, y cuando hay
   una ocupa el ancho entero. */
.f24-news {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--f24-line-light);
}
.f24-article {
  position: relative;
  flex: 1 1 20rem;
  background: var(--f24-white);
  color: var(--f24-ink);
  min-height: 24rem;
  padding: 1.5rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  transition: background .18s ease;
}
.f24-article:first-child { flex: 1.4 1 26rem; min-height: 32rem; }
/* Si es la única, no tiene sentido que sea "la grande" a doble altura. */
.f24-article:only-child { min-height: 24rem; }

/* Sin fotografía es una tarjeta de TEXTO, y entonces sobra la mitad del
   alto: un bloque enorme vacío está pidiendo una imagen que no existe. */
.f24-article:not(.f24-article--foto),
.f24-article:not(.f24-article--foto):first-child,
.f24-article:not(.f24-article--foto):only-child {
  min-height: 11rem;
  justify-content: flex-start;   /* el titular arriba: no hay foto que dejar ver */
}

/* Con fotografía, la tarjeta ES la foto: velo navy de abajo arriba para
   que el titular se lea siempre, tenga la foto que tenga. */
.f24-article--foto {
  background-image:
    linear-gradient(0deg, var(--f24-navy) 2%, color-mix(in srgb, var(--f24-navy) 55%, transparent) 45%, transparent 80%),
    var(--f24-art-img);
  background-size: cover;
  background-position: center;
  color: var(--f24-on-dark);
}
.f24-article--foto::before { content: none; }
.f24-article--foto .f24-article-date { color: var(--f24-yellow); }
.f24-article--foto:hover { background-color: var(--f24-navy); }
/* Velo del azul del club en la esquina, muy tenue: da profundidad sin
   oscurecer. Antes era un radial sobre negro. */
.f24-article::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 15%, color-mix(in srgb, var(--f24-blue) 10%, transparent), transparent 45%);
}
.f24-article:hover { background: var(--f24-editorial); }
.f24-article > * { position: relative; }
.f24-article-date {
  font-size: var(--f24-label-sm);
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--f24-blue);
}
.f24-article h3 { font-size: var(--f24-d5); line-height: .96; letter-spacing: -.04em; margin: .625rem 0 0; }
.f24-article:hover h3 { box-shadow: inset 0 -.08em 0 var(--f24-yellow); }

/* ============================================================
   PARTNERS — los patrocinadores reales del club
   ------------------------------------------------------------
   Muro de logos separados por filete de 1px, la misma gramática
   que las noticias. Nada de cajas redondeadas ni "banner".
   Los logos van en su versión BLANCA sobre superficie oscura, a
   opacidad contenida: acompañan, no gritan. Al pasar, el logo
   sube a plena tinta y el nombre se lee.
   ============================================================ */

/* Flex y no grid a propósito: con `auto-fit` la última fila dejaba
   un hueco muerto cuando el nº de partners no es múltiplo de las
   columnas (9 sobre 5). En flex, la última fila ESTIRA y el muro
   queda cerrado siempre, con los partners que haya. */
.f24-partners {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--f24-line-dark);
  border-left: 1px solid var(--f24-line-dark);
}
.f24-partner {
  flex: 1 1 11rem;
  border-right: 1px solid var(--f24-line-dark);
  border-bottom: 1px solid var(--f24-line-dark);
  /* Más alto para que el logo respire: la celda mandaba sobre la imagen y por
     eso se veía diminuta (usuario, 19/08). */
  min-height: 11.5rem;
  padding: 1.75rem 1.25rem 1.25rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .75rem;
  text-align: center;
}
/* 👀 EL LOGO MANDA. Estaba a `3.25rem` de alto y al 72 % de opacidad: «la
   imagen debe ser más grande, es diminuta», y era verdad — quien paga por
   salir en la web tiene que verse. Se sube el alto y se quita casi todo el
   velo; el `--principal` (el de nivel más alto, que ocupa doble ancho) sube en
   proporción y va ya a plena opacidad. */
/* 🔑 ALTO FIJO + `contain`, no `max-height` + `width:auto`. `max-height` solo
   pone un techo: NO agranda. Un logo de 88 px se quedaba en 88 aunque la celda
   diera para el doble, y por eso seguía viéndose diminuto después de subir el
   límite. Con una caja de alto fijo y el ancho completo, `contain` escala la
   imagen hasta el máximo que quepa sin deformarla. */
.f24-partner img {
  width: 100%; height: 5.5rem;
  object-fit: contain;
  opacity: .92;
  transition: opacity .18s ease, transform .18s ease;
}
.f24-partner:hover img,
.f24-partner:focus-visible img { opacity: 1; transform: translateY(-2px); }
.f24-partner span {
  font-size: var(--f24-label-sm);
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--f24-blue-pale);
}
/* El nivel del acuerdo (MVP, Sexto Hombre…) sale de
   `patrocinador_niveles`, y con él se ORDENA el muro: el de nivel más
   alto va primero y ocupa el doble de ancho. */
.f24-partner-nivel {
  font-size: var(--f24-label-sm);
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--f24-yellow);
}
.f24-partner--principal { flex: 2 1 22rem; min-height: 14rem; }
.f24-partner--principal img { height: 8.5rem; opacity: 1; }
.f24-partner:hover span { color: var(--f24-yellow); }
/* Sin logo: el nombre hace de logotipo, no se deja el hueco vacío. */
.f24-partner strong {
  font-family: var(--f24-display);
  font-size: 1.25rem; font-weight: 900;
  letter-spacing: -.03em; text-transform: uppercase;
}

/* ============================================================
   PÁGINAS INTERIORES — filtros, día, equipos, plantilla
   ============================================================ */

/* Filtros con aire de retransmisión: micro-etiqueta encima y el
   control debajo. Se envían solos; el <noscript> deja un botón. */
.f24-filtros {
  display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 2px solid currentColor;
  margin-bottom: 2rem;
}
.f24-filtro { display: flex; flex-direction: column; gap: .375rem; }
.f24-filtro > span {
  font-size: var(--f24-label-sm);
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--f24-ink-soft);
}
.f24-filtro select {
  appearance: none;
  min-width: 11rem; max-width: 100%;
  padding: .5rem 2rem .5rem .75rem;
  border: 0; border-bottom: 2px solid var(--f24-blue);
  border-radius: 0;
  background: transparent;
  color: var(--f24-ink);
  font-family: var(--f24-display);
  font-size: 1.0625rem; font-weight: 900;
  letter-spacing: -.01em; text-transform: uppercase;
  cursor: pointer;
  /* La flecha, dibujada: así no depende de un icono ni de una fuente. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px center, right 6px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.f24-filtro select:focus-visible { outline: 3px solid var(--f24-blue); outline-offset: 3px; }

/* Los KPI sobre superficie clara (Match Center) */
.f24-stats--claro { border-top-color: var(--f24-navy); }
.f24-stats--claro .f24-stat { border-right-color: var(--f24-line-light); }

/* Título de día dentro de una jornada */
.f24-dia {
  font-family: var(--f24-display);
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: var(--f24-track-display);
  margin: 2.75rem 0 .75rem;
}
.f24-dia:first-of-type { margin-top: 2rem; }

/* ---- Muro de equipos ---- */
.f24-equipos {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--f24-line-light);
  border: 1px solid var(--f24-line-light);
}
.f24-equipo {
  flex: 1 1 17rem;
  min-height: 12.5rem;
  padding: 1.25rem 1.375rem;
  background: var(--f24-navy);
  color: var(--f24-on-dark);
  display: flex; flex-direction: column; gap: .25rem;
  position: relative; overflow: hidden;
  transition: background .18s ease;
}
.f24-equipo:hover { background: var(--f24-navy-800); }
.f24-equipo--foto {
  background-image:
    linear-gradient(0deg, var(--f24-navy) 8%, color-mix(in srgb, var(--f24-navy) 60%, transparent) 55%, transparent 90%),
    var(--f24-eq-img);
  background-size: cover; background-position: center;
}
.f24-equipo-cat {
  font-size: var(--f24-label-sm);
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--f24-yellow);
}
.f24-equipo strong {
  font-family: var(--f24-display);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 900; line-height: .95;
  letter-spacing: -.03em; text-transform: uppercase;
  margin-top: auto;
}
.f24-equipo em {
  font-style: normal; font-size: .875rem;
  color: var(--f24-on-dark-soft);
}
.f24-equipo-pie {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: .625rem;
  font-size: var(--f24-label-sm);
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--f24-on-dark-soft);
}
.f24-equipo:hover .f24-equipo-pie { color: var(--f24-yellow); }

/* ---- Plantilla: el DORSAL como elemento gráfico ---- */
/* Fondo TRANSPARENTE y filete por ficha, no en el contenedor: con el
   filete en el contenedor, un equipo con 2 jugadoras dejaba media
   rejilla pintada de gris. Es el mismo agujero que tenían partners y
   noticias — con `auto-fill`, las celdas que sobran siguen existiendo. */
.f24-plantilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1px;
}
.f24-jugador {
  position: relative; overflow: hidden;
  outline: 1px solid var(--f24-line-light);
  background: var(--f24-white);
  aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: .875rem;
}
.f24-jugador--foto {
  background-image:
    linear-gradient(0deg, var(--f24-navy) 5%, color-mix(in srgb, var(--f24-navy) 55%, transparent) 50%, transparent 85%),
    var(--f24-jug-img);
  background-size: cover; background-position: center top;
  color: var(--f24-on-dark);
}
/* Sin foto —el caso de hoy: 3 de 231 con autorización— el dorsal ES
   la imagen. Grande, recortado por arriba, en azul del club. */
.f24-jugador-dorsal {
  position: absolute; inset: auto 0 1.5rem 0;
  font-family: var(--f24-display);
  font-size: clamp(4rem, 9vw, 7rem);
  font-weight: 900; line-height: .8;
  letter-spacing: -.06em; text-align: center;
  color: color-mix(in srgb, var(--f24-blue) 16%, transparent);
  pointer-events: none; user-select: none;
}
.f24-jugador--foto .f24-jugador-dorsal {
  inset: .5rem .75rem auto auto;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  color: var(--f24-yellow);
  text-align: right;
}
/* ------------------------------------------------------------
   CAMISETA CON DORSAL (18/08) — cuando no hay foto del jugador
   ------------------------------------------------------------
   Una sola imagen sin número + el dorsal escrito encima. La posición y el
   tamaño llegan en `style` desde Configuración, porque cada camiseta lleva
   el número en un sitio distinto.

   🔑 El tamaño va en `cqw` (% del ANCHO DE LA CAMISETA, no de la ventana):
   con `vw` el número bailaría respecto a la camiseta al cambiar de pantalla
   y se saldría del hueco. Por eso el contenedor declara `container-type`. */
.f24-camiseta {
  position: absolute; inset: 0 0 2.5rem 0;
  display: grid; place-items: center;
  padding: .5rem;
  pointer-events: none; user-select: none;
}
/* El lienzo tiene la PROPORCIÓN EXACTA de la imagen (se la pasa el PHP),
   así que los porcentajes del dorsal son de la camiseta y no de su caja.
   `container-type` va aquí por lo mismo: el tamaño del número en `cqw` se
   mide contra la camiseta, no contra la tarjeta. */
.f24-camiseta-lienzo {
  position: relative;
  container-type: inline-size;
  height: 100%; max-width: 100%;
  background: center / contain no-repeat;
}
.f24-camiseta img {
  /* ⚠️ TAMAÑO EXPLÍCITO + `contain`, no `auto` + `max-*`.
     Medido el 18/08: con `width/height:auto` la imagen reclamaba su altura
     natural (210px en un hueco de 159) y **pisaba el nombre del jugador**,
     porque los items de grid nacen con `min-height:auto` y eso gana a
     `max-height:100%`. Y al forzar `min-height:0` se iba al extremo
     contrario: se encogía hasta desaparecer.
     Dándole el 100% de la caja y dejando que `object-fit` la encaje, la
     camiseta ocupa todo lo que puede sin salirse nunca. */
  width: 100%; height: 100%;
  object-fit: contain;
  min-height: 0; min-width: 0;
}
.f24-camiseta-num {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--f24-display);
  font-weight: 900; line-height: 1;
  letter-spacing: -.04em;
  /* ⚠️ CONTORNO, NO UN COLOR FIJO. El club tiene equipación BLANCA y AZUL:
     un número blanco desaparecía sobre la blanca (pasó: se veía «vacía»
     aunque el número estaba ahí, medido en el navegador el 18/08) y uno
     navy se perdería sobre la azul. Relleno claro + trazo navy se lee sobre
     las dos, y sobre la que venga mañana.
     `paint-order` manda el trazo DETRÁS del relleno: sin él, el borde se
     come el interior de la cifra y a tamaño pequeño queda ilegible. */
  color: var(--f24-white);
  -webkit-text-stroke: .075em var(--f24-navy);
  paint-order: stroke fill;
}

.f24-jugador-nombre {
  position: relative;
  font-family: var(--f24-display);
  font-size: .9375rem; font-weight: 900;
  line-height: 1; letter-spacing: -.01em; text-transform: uppercase;
}
/* El dorsal se pinta como decoración, así que el nombre lo dice para
   quien usa lector de pantalla. */
.f24-sr-dorsal {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Cuerpo técnico ----
   DOS PRESENTACIONES SOBRE EL MISMO MARCADO (19/08/2026):
   · por defecto, las FILAS anchas navy de siempre — es lo que se ve si el
     club no ha subido la equipación del cuerpo técnico;
   · con `.f24-staff--camisetas`, REJILLA DE TARJETAS igual que la plantilla
     de arriba, porque ahí sí hay una imagen que enseñar.
   🚫 Se probó antes dejar las filas y poner un velo claro detrás de la
   camiseta (el polo navy se camuflaba contra la sección navy). El usuario lo
   rechazó al verlo: «queda fatal». No reintroducir un fondo suelto detrás de
   la imagen: si hace falta contraste, es la tarjeta la que lo da. */
.f24-staff { display: flex; flex-wrap: wrap; gap: 1px; background: var(--f24-line-dark); }
.f24-staff-card {
  flex: 1 1 16rem;
  background: var(--f24-navy);
  padding: 1rem 1.25rem;
}
.f24-staff-nombre {
  display: block;
  font-family: var(--f24-display);
  font-size: 1.125rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: -.02em;
}
.f24-staff-rol {
  display: block; margin-top: .25rem;
  font-size: var(--f24-label-sm);
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--f24-yellow);
}

/* -- Modo con equipación: siguen siendo FILAS, no tarjetas. --

   🔴 SIN FONDO EN EL CONTENEDOR. El truco de «fondo del contenedor + gap de
   1px» que usa la plantilla para dibujar las líneas solo funciona cuando las
   celdas se llenan: con DOS personas —hoy una sola visible— quedaban huecos
   pintados. Aquí las filas traen su propio color, así que el contenedor no
   necesita fondo. */
.f24-staff--camisetas {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: none;
}
.f24-staff-pie { display: block; }
/* ⚠️ LA CAMISETA VA EN EL FLUJO, NO ABSOLUTA como en la ficha del jugador.
   Allí se coloca con `inset: 0 0 Xrem 0`, que obliga a adivinar cuánto sitio
   ocupa el texto; en una fila es un elemento más y basta con dejarla fluir.
   Sin esto se posicionaría respecto a la fila entera y taparía el nombre. */
.f24-staff--camisetas .f24-camiseta {
  position: static; inset: auto;
}

/* ============================================================
   LA FICHA CON CAMISETA — tratamiento compartido (19/08/2026)
   ------------------------------------------------------------
   Sale de una queja del usuario, y era justa: «es un cuadrado blanco a pelo
   sin nada. Que en realidad con los jugadores pasa igual». Tenía razón — la
   camiseta se pintaba sobre `background: var(--f24-white)` y el nombre iba
   suelto debajo. Se veía como un marcador de posición, no como una ficha.

   Se le da el mismo lenguaje que el resto del sitio, sin inventar estética:
   1) HALO del azul del club detrás de la prenda, para que despegue del fondo;
   2) DEGRADADO claro → tinte azul, que da profundidad y peso visual abajo;
   3) BANDA NAVY a sangre en el pie, con FILETE AMARILLO encima. El filete es
      el acento del club y aquí es uso legal del amarillo: filete, no texto.
      Además resuelve el contraste — sobre navy el nombre va en blanco y el
      rol en amarillo (10,2:1), en vez de pelearse con un fondo claro.

   🔒 Se aplica SOLO a las fichas con camiseta. Las que llevan FOTO ya tienen
   su propio tratamiento (`--foto`, degradado navy sobre la imagen) y las que
   no tienen ni foto ni camiseta viven del dorsal gigante translúcido: las dos
   estaban bien y no se tocan.
   ============================================================ */
/* 🚫 NADA DE TARJETA. Es el tercer intento y la corrección del usuario fue
   clara: «se sigue viendo como tal que cada una es una tarjetilla; eso sería
   guay si no, rollo foto o equipación y nombre debajo y listo».
   Lo que hacía «tarjeta» no era el borde: era que la ficha tuviera un fondo
   PROPIO (`--f24-white`) distinto del claro de la sección (`--f24-paper`), más
   el filete amarillo cerrándola por arriba. Quitados los dos, la equipación
   queda sobre la superficie de la sección, sin caja.
   ✅ Lo único que se conserva del intento anterior es el HALO detrás de la
   prenda, que es lo que el usuario aprobó por su nombre («lo de detrás de la
   camiseta guay») — y es un círculo difuso, no un recuadro. */
.f24-jugador--camiseta {
  /* 🔑 `closest-side`, NO el `farthest-corner` que asume `radial-gradient` por
     defecto. Con el valor por defecto el 100% del gradiente es la distancia a
     la ESQUINA (≈142 px en una ficha de 156×199), así que un `transparent 68%`
     caía a ≈97 px — más que los 78 px que hay hasta el lateral. El degradado
     seguía teniendo color al llegar al borde y **se cortaba en seco**: eso era
     el «rectángulo invisible» que se seguía notando.
     Con `closest-side` el 100% es el lado más cercano (78 px), así que el halo
     puede llegar hasta el 88% —69 px— y aún le sobran 9 px hasta el canto.
     ⚠️ Al acortarlo la primera vez se pasó de frenada: con 14 % apagándose al
     76 % el halo desapareció («veo que hemos perdido el halo azul, a mí me
     gustaba»). Ahora va más intenso y más largo, con la caída en DOS tramos
     para que los últimos píxeles lleguen ya en nada y no haya nada que cortar.
     Tintes con `color-mix` sobre el token del club — nunca `rgba()` de canales
     fijos: si el club cambia su azul, esto lo sigue. */
  background:
    radial-gradient(circle closest-side at 50% 42%,
      color-mix(in srgb, var(--f24-blue) 26%, transparent) 0 28%,
      color-mix(in srgb, var(--f24-blue) 11%, transparent) 58%,
      transparent 88%);
  background-repeat: no-repeat;
  /* ⚠️ `outline`, no `border` — es lo que trae `.f24-jugador`, y hay que
     apagar eso mismo o el recuadro sigue ahí. */
  outline: 0;
}
/* El nombre, debajo y centrado, con la LÍNEA AMARILLA entre la camiseta y él
   («en las jugadoras me gustaba la línea amarilla entre nombre e imagen»).
   🔑 Corta y centrada, NO a sangre de borde a borde: a lo ancho volvía a
   dibujar el canto de la ficha, que es justo lo que se acaba de quitar. Así es
   un subrayado del bloque, no la tapa de una caja.
   Se pinta con un `::before` y no con `border-top` por lo mismo: el borde
   ocuparía todo el ancho del elemento.
   ✅ Uso legal del amarillo — filete, nunca texto sobre claro (1,5:1). */
.f24-jugador--camiseta .f24-jugador-nombre {
  color: var(--f24-navy);
  text-align: center;
  text-wrap: balance;
  padding-top: .625rem;
}
.f24-jugador--camiseta .f24-jugador-nombre::before {
  content: "";
  display: block;
  width: 2.25rem; height: 3px;
  margin: 0 auto .5rem;
  background: var(--f24-yellow);
}

/* ---- CUERPO TÉCNICO: UNA LÍNEA POR PERSONA ----
   Encargo del usuario (19/08): «cuerpo técnico lo pondría en una única línea
   para no agigantar el scroll». Y con razón: la tarjeta 3/4 medía 203 px de
   alto por persona para enseñar un polo y dos palabras.
   🎨 Y OTRO JUEGO DE COLORES, porque el de la plantilla no le servía aquí
   («del entrenador mal, hay que buscar otro juego de colores»): la fila va en
   AZUL del club con filete amarillo a la izquierda —el mismo recurso que usan
   las filas de partido— en vez de la tarjeta clara. Sobre azul el polo navy
   contrasta sin necesidad de ponerle nada detrás, que es lo que se había
   rechazado antes, y el amarillo del rol sigue siendo texto legal (5,1:1). */
.f24-staff--camisetas .f24-staff-card {
  flex: 1 1 22rem;
  aspect-ratio: auto;
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .875rem;
  background: var(--f24-blue);
  border-left: 3px solid var(--f24-yellow);
}
.f24-staff--camisetas .f24-camiseta {
  flex: 0 0 auto; width: 2.25rem;
  padding: 0;
}
.f24-staff--camisetas .f24-camiseta-lienzo {
  /* El ancho manda y la altura la pone la proporción real de la imagen. */
  width: 100%; height: auto;
}
/* Nombre y rol en la MISMA línea. `wrap` como red: si el nombre es larguísimo
   el rol baja, en vez de desbordar la fila. */
.f24-staff--camisetas .f24-staff-pie {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: .125rem .5rem; min-width: 0;
}
.f24-staff--camisetas .f24-staff-nombre {
  font-size: 1rem; line-height: 1.1; letter-spacing: -.01em;
  color: var(--f24-on-dark);
}
.f24-staff--camisetas .f24-staff-rol {
  margin-top: 0; letter-spacing: .1em;
  color: var(--f24-yellow);
}

/* Movimiento con función: señala que la ficha es una pieza y no un bloque
   muerto. `transform`, nada de `width`/`top`.
   `prefers-reduced-motion` NO se declara aquí a propósito: `tokens.css` tiene
   un reset global con selector `*` que ya neutraliza toda transición del
   proyecto (skill `cbat-ui` § 7 — no duplicar por componente). */
.f24-jugador--camiseta .f24-camiseta-lienzo {
  transition: transform 160ms ease-out;
}
.f24-jugador--camiseta:hover .f24-camiseta-lienzo {
  transform: translateY(-4px) scale(1.03);
}

/* ---- Horarios de entrenamiento ---- */
.f24-horarios { display: flex; flex-wrap: wrap; gap: 1px; background: var(--f24-line-light); }
.f24-horario {
  flex: 1 1 12rem;
  background: var(--f24-editorial);
  padding: 1rem 1.25rem;
}
.f24-horario strong {
  display: block;
  font-family: var(--f24-display);
  font-size: 1.0625rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: -.01em;
}
.f24-horario span {
  display: block; margin-top: .125rem;
  font-family: var(--f24-display);
  font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em;
  color: var(--f24-blue);
}
.f24-horario em {
  display: block; font-style: normal; margin-top: .25rem;
  font-size: var(--f24-label-sm);
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--f24-ink-soft);
}

/* ============================================================
   CUMPLEAÑOS — venía de la portada vieja
   ------------------------------------------------------------
   🔒 INVARIANTE HEREDADO: nunca la edad ni la fecha de
   nacimiento. Solo nombre, equipo y cuándo. Son menores.
   ============================================================ */

.f24-cumples {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--f24-line-light);
  border-top: 1px solid var(--f24-line-light);
  border-bottom: 1px solid var(--f24-line-light);
}
.f24-cumple {
  flex: 1 1 13rem;
  background: var(--f24-paper);
  padding: 1.125rem 1.25rem;
}
.f24-cumple-cuando {
  display: block;
  font-size: var(--f24-label-sm);
  font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--f24-blue);
  margin-bottom: .375rem;
}
.f24-cumple.is-hoy { background: var(--f24-yellow); }
.f24-cumple.is-hoy .f24-cumple-cuando { color: var(--f24-navy); }
.f24-cumple strong {
  display: block;
  font-family: var(--f24-display);
  font-size: 1.125rem; font-weight: 900;
  letter-spacing: -.02em; text-transform: uppercase;
  line-height: 1.05;
}
.f24-cumple em {
  display: block; font-style: normal;
  font-size: var(--f24-label); color: var(--f24-ink-soft);
  margin-top: .25rem;
}

/* ============================================================
   ÚNETE AL CLUB — la banda de contacto
   ============================================================ */

.f24-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.f24-cta h2 { font-size: clamp(2rem, 5vw, 4rem); margin: .25rem 0 .75rem; }
.f24-cta .f24-lead { margin: 0; }

/* ============================================================
   CBAT PULSE — los datos, en amarillo, como un marcador
   ============================================================ */

.f24-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--f24-navy);
  margin-top: 3.125rem;
}
.f24-stat {
  padding: 1.5625rem 1.25rem .625rem 0;
  border-right: 1px solid color-mix(in srgb, var(--f24-navy) 30%, transparent);
}
.f24-stat:last-child { border-right: 0; }
.f24-stat b {
  display: block;
  font-family: var(--f24-display);
  font-size: clamp(3rem, 7vw, 6.25rem);
  font-weight: 900; letter-spacing: -.07em; line-height: .9;
}
.f24-stat span {
  display: block;
  font-size: var(--f24-label-sm);
  font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  margin-top: .5rem;
}

/* ============================================================
   FICHA DE CONTENIDO — noticia, evento, página, campus
   ------------------------------------------------------------
   Una sola plantilla, como en el gestor. Cabecera oscura con la
   foto en duotono (misma regla que el hero: nunca a color) y
   cuerpo claro con medida de lectura, que es lo único que hace
   legible un texto largo.
   ============================================================ */

.f24-ficha-head {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 9vh, 6rem) var(--f24-gutter) clamp(2rem, 6vh, 4rem);
  background: linear-gradient(135deg, var(--f24-navy) 0%, var(--f24-navy-800) 100%);
}
.f24-ficha-head--foto::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--f24-ficha-img);
  background-size: cover; background-position: center;
  filter: grayscale(1);
  opacity: .22;
}
.f24-ficha-head-in { position: relative; z-index: 1; max-width: 56rem; }
.f24-ficha-head h1 {
  font-family: var(--f24-display);
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  font-weight: 900; line-height: .95;
  letter-spacing: var(--f24-track-display);
  text-transform: uppercase;
  margin: .5rem 0 0;
}
.f24-ficha-meta {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin: 1.25rem 0 0;
  font-size: var(--f24-label);
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--f24-yellow);
}

.f24-ficha-cuerpo { max-width: 42rem; }
.f24-ficha-entradilla {
  font-size: 1.125rem; line-height: 1.55; font-weight: 700;
  color: var(--f24-ink);
  margin: 0 0 1.75rem;
}

/* Prosa: la única zona de la web con medida de lectura y ritmo
   vertical clásico. El HTML lo escribe el club desde el gestor y
   llega saneado con lista blanca. */
.f24-prosa { color: var(--f24-ink); font-size: 1.0625rem; line-height: 1.65; }
.f24-prosa > :first-child { margin-top: 0; }
.f24-prosa p { margin: 0 0 1.15em; }
.f24-prosa h2, .f24-prosa h3, .f24-prosa h4 {
  font-family: var(--f24-display);
  text-transform: uppercase;
  letter-spacing: var(--f24-track-display);
  line-height: 1;
  margin: 2em 0 .6em;
}
.f24-prosa h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.f24-prosa h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.f24-prosa h4 { font-size: 1.125rem; }
.f24-prosa ul, .f24-prosa ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.f24-prosa li { margin-bottom: .35em; }
/* `a[href]` y no `a`: el saneador deja el texto de un enlace peligroso pero
   le quita el `href`. Sin el atributo, eso ya no lleva a ningún sitio y no
   puede seguir pintado como si fuera pulsable. */
.f24-prosa a[href] {
  color: var(--f24-blue);
  box-shadow: inset 0 -.09em 0 color-mix(in srgb, var(--f24-yellow) 70%, transparent);
}
.f24-prosa a[href]:hover { box-shadow: inset 0 -.5em 0 -.05em var(--f24-yellow); }
.f24-prosa blockquote {
  margin: 1.75em 0; padding: .25em 0 .25em 1.25rem;
  border-left: 3px solid var(--f24-yellow);
  font-family: var(--f24-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.15; text-transform: uppercase;
  letter-spacing: var(--f24-track-display);
}
.f24-prosa img { margin: 1.5em 0; width: 100%; height: auto; }
.f24-prosa figcaption {
  font-size: var(--f24-label); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--f24-ink-soft);
  margin-top: -1em;
}
.f24-prosa hr { border: 0; border-top: 2px solid var(--f24-line-light); margin: 2.5em 0; }

.f24-ficha-volver { margin: 3rem 0 0; }

/* ------------------------------------------------------------
   LOS CUATRO DISEÑOS DE FICHA (17/08/2026)
   Encargo del usuario: la misma noticia se puede contar de
   cuatro maneras y lo elige quien escribe, desde el gestor.
   Catálogo: `cms_layouts()` en modules/contenido/tipos.php.
   ------------------------------------------------------------ */

/* 1 · EDITORIAL — el de por defecto: cabecera + una columna con
   medida de lectura. Es lo que ya define `.f24-ficha-cuerpo`. */

/* 2 · DOS COLUMNAS — texto a la izquierda, imagen a la derecha
   acompañando mientras se baja. */
.f24-ficha--dos-columnas .f24-ficha-cuerpo {
  max-width: 70rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  grid-template-areas:
    "entradilla imagen"
    "prosa      imagen"
    "acciones   imagen"
    "volver     imagen";
  column-gap: 2.5rem;
  align-items: start;
}
.f24-ficha--dos-columnas .f24-ficha-entradilla { grid-area: entradilla; }
.f24-ficha--dos-columnas .f24-prosa { grid-area: prosa; }
.f24-ficha--dos-columnas .f24-acciones { grid-area: acciones; }
.f24-ficha--dos-columnas .f24-ficha-volver { grid-area: volver; }
.f24-ficha-aparte {
  grid-area: imagen;
  position: sticky; top: calc(var(--f24-nav-h) + 1.5rem);
  margin: 0;
}
.f24-ficha-aparte img { width: 100%; height: auto; display: block; }

/* 3 · VÍDEO ARRIBA — 16:9 a sangre, antes del texto. */
.f24-video { background: var(--f24-navy); }
.f24-video iframe {
  display: block;
  width: 100%; aspect-ratio: 16 / 9; border: 0;
  max-height: 80vh; margin: 0 auto;
}

/* 5 · CRÓNICA — el marcador real del partido, arriba.
   Usa el mismo componente `.f24-board` que el Match Center: si el
   resultado se corrige en el Manager, aquí se corrige solo. */
.f24-cronica-marcador { padding-top: clamp(2rem, 5vh, 3.5rem); padding-bottom: clamp(2rem, 5vh, 3.5rem); }
.f24-cronica-marcador .f24-kicker { margin-bottom: 1rem; color: var(--f24-blue); }

/* 6 · GALERÍA — las fotos mandan: mosaico a sangre antes del texto.
   La primera ocupa el doble; el resto rellenan. Sin lightbox ni JS:
   la foto se abre a tamaño completo con un clic del navegador si el
   visitante quiere, y la página no carga nada de más. */
.f24-galeria {
  display: flex; flex-wrap: wrap; gap: 2px;
  background: var(--f24-navy);
}
.f24-gal-foto {
  flex: 1 1 18rem;
  margin: 0; position: relative;
  background: var(--f24-navy-800);
}
.f24-gal-foto--grande { flex: 2 1 32rem; }
.f24-gal-foto img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.f24-gal-foto figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 1.75rem .875rem .625rem;
  background: linear-gradient(0deg, var(--f24-navy), transparent);
  color: var(--f24-on-dark);
  font-size: var(--f24-label);
  font-weight: 800; letter-spacing: .06em;
}

/* 4 · REVISTA — tres columnas de periódico. El texto fluye; los
   titulares no se parten entre columnas. */
.f24-ficha--revista .f24-ficha-cuerpo { max-width: 78rem; }
.f24-ficha--revista .f24-ficha-entradilla {
  max-width: 42rem;
  font-size: 1.375rem; line-height: 1.4;
}
.f24-ficha--revista .f24-prosa {
  columns: 3;
  column-gap: 2.5rem;
  column-rule: 1px solid var(--f24-line-light);
}
.f24-ficha--revista .f24-prosa > * { break-inside: avoid-column; }
.f24-ficha--revista .f24-prosa h2,
.f24-ficha--revista .f24-prosa h3 { break-after: avoid-column; }
/* La foto de un reportaje manda: ocupa el ancho de la cabecera. */
.f24-ficha--revista .f24-ficha-head { min-height: 60vh; display: flex; align-items: flex-end; }
.f24-ficha--revista .f24-ficha-head--foto::before { opacity: .38; }

@media (max-width: 900px) {
  /* Dos y tres columnas son de escritorio: en el móvil de una familia
     en la grada, una sola columna. La imagen deja de ser sticky —
     perseguir al lector en una pantalla pequeña es un estorbo. */
  .f24-ficha--dos-columnas .f24-ficha-cuerpo {
    grid-template-columns: 1fr;
    grid-template-areas: "entradilla" "imagen" "prosa" "acciones" "volver";
    row-gap: 1.5rem;
  }
  .f24-ficha-aparte { position: static; }
  .f24-ficha--revista .f24-prosa { columns: 1; column-rule: 0; }
  .f24-ficha--revista .f24-ficha-head { min-height: auto; }
}

/* ============================================================
   PIE — 00.0, final de la posesión
   ============================================================ */

.f24-foot {
  min-height: 70vh;
  padding: var(--f24-section) var(--f24-gutter);
  display: flex; flex-direction: column; justify-content: space-between; gap: 3rem;
  background: var(--f24-navy);
}
/* Pie del CHASIS MÍNIMO (MANT.2, 26/08/2026): con la web cerrada y una sección
   abierta, el pie se queda en el copyright y nada más.
   🔴 `min-height: 0` es lo que importa: sin quitarlo hereda el `70vh` pensado
   para el pie grande de «Somos CBAT.», y en el móvil eso son **197 px medidos
   de banda navy vacía** debajo de una sola línea de texto. El padding de
   sección (83 px arriba y abajo) sobra por lo mismo. */
.f24-foot--minimo {
  min-height: 0;
  gap: 0;
  padding: 1.75rem var(--f24-gutter);
}
.f24-foot-big {
  font-family: var(--f24-display);
  font-size: var(--f24-d6);
  font-weight: 900; line-height: .75; letter-spacing: -.08em;
  text-transform: uppercase;
  margin: 0;
}
.f24-foot-nav {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  list-style: none; padding: 0; margin: 0;
}
.f24-foot-nav a {
  display: inline-flex; align-items: center; min-height: var(--f24-tap);
  font-size: var(--f24-label);
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--f24-on-dark-soft);
}
.f24-foot-nav a:hover { color: var(--f24-yellow); }
.f24-foot-base {
  font-size: var(--f24-label-sm);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--f24-blue-pale);
}

/* ============================================================
   CAMPAÑA — takeover, no modal educado.
   <dialog> nativo: foco atrapado y Esc gratis.
   ============================================================ */

.f24-campaign {
  width: min(47.5rem, 94vw);
  max-height: 90vh;
  padding: 2.375rem;
  border: 0;
  background: var(--f24-yellow);
  color: var(--f24-navy);
}
.f24-campaign::backdrop {
  background: color-mix(in srgb, var(--f24-navy) 78%, transparent);
  backdrop-filter: blur(8px);
}
.f24-campaign h2 { font-size: clamp(2.5rem, 8vw, 5.625rem); margin: 1.5rem 0 1.25rem; }
.f24-campaign p { max-width: 31.25rem; margin: 0 0 1.5rem; }
.f24-campaign-close {
  position: absolute; right: 1rem; top: .75rem;
  width: var(--f24-tap); height: var(--f24-tap);
  border: 0; background: none; cursor: pointer;
  color: var(--f24-navy);
  font-size: 1.5rem; line-height: 1;
}

/* ============================================================
   RESPONSIVE — escala canónica del proyecto (1180/900/760/520)
   Verificado a 390px: el corte real de este front es 760.
   ============================================================ */

@media (max-width: 1180px) {
  .f24-article:first-child { min-height: 30rem; }
  .f24-event { min-height: 30rem; }
}

@media (max-width: 900px) {
  .f24-events,
  .f24-news { grid-template-columns: 1fr; }
  .f24-fixture { grid-template-columns: 1fr auto; }
  .f24-fixture-cat { grid-column: 1 / -1; }
  .f24-stats { grid-template-columns: 1fr 1fr; }
  .f24-stat:nth-child(2) { border-right: 0; }
}

@media (max-width: 760px) {
  .f24-menu { display: none; }
  .f24-burger { display: inline-flex; }
  /* Sin reordenar: la marca manda a la izquierda y el reloj queda
     junto al botón de menú, a la derecha. */
  .f24-clock { margin-left: .625rem; }

  /* 🔴 EL MENÚ MÓVIL NO SE VEÍA, Y LA CULPA ERA DEL DESENFOQUE (19/08/2026).
     Lo cazó el usuario: «el menú en móvil no funciona».

     `.f24-nav` lleva `backdrop-filter: blur(14px)`, y un ancestro con
     `backdrop-filter` (igual que con `filter`, `transform` o `contain`) se
     convierte en el BLOQUE CONTENEDOR de sus descendientes `position: fixed`.
     O sea: el menú de aquí abajo no se anclaba al viewport sino a la BARRA,
     de 72px de alto. Con `top: var(--f24-nav-h)` dentro de una caja de esa
     misma altura, el desplegable quedaba de **altura cero**: se abría y no
     se veía nada.

     Medido en el navegador, no deducido: un `fixed; inset:0` insertado dentro
     de `.f24-nav` devuelve 72px de alto en vez de los 1048 del viewport.

     El arreglo es quitar el desenfoque MIENTRAS el menú está abierto. No se
     pierde nada: el desplegable tapa la pantalla entera, así que no hay nada
     detrás que desenfocar.

     ⚠️ Cualquier `position: fixed` que se cuelgue de la barra en el futuro
     tropezará con lo mismo. */
  .f24-nav[data-open="true"] { backdrop-filter: none; }

  /* Menú desplegado: ocupa la pantalla, tap targets grandes. */
  .f24-nav[data-open="true"] .f24-menu {
    display: flex;
    position: fixed;
    inset: var(--f24-nav-h) 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.5rem var(--f24-gutter);
    background: var(--f24-navy);
    border-top: 1px solid var(--f24-line-dark);
    overflow-y: auto;
  }
  .f24-nav[data-open="true"] .f24-menu a {
    min-height: 3.5rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--f24-line-dark);
  }

  .f24-hero { min-height: auto; padding-top: 2.5rem; }
  .f24-hero-foot { gap: 1.25rem; }

  /* La marca sube a la esquina superior y se aparta del texto: en el
     móvil, centrada, caía justo detrás del párrafo y lo ensuciaba
     (visto en un teléfono real, 17/08). Arriba solo compite con el
     titular, que es display y aguanta. */
  .f24-marca {
    top: 0; right: -14vw;
    transform: none;
    width: 52vw;
    opacity: .09;
  }
  .f24-hero-foot .f24-lead { max-width: none; }

  /* El marcador se apila: nombre / hora / nombre sigue leyéndose
     como marcador, pero deja de comprimir los nombres largos. */
  .f24-board { grid-template-columns: 1fr; text-align: center; gap: .5rem; padding: 1.75rem 0; }
  .f24-board-team--away { text-align: center; }
  .f24-board-meta { justify-content: center; text-align: center; }

  .f24-event { min-height: 24rem; padding: 1.25rem; }
  .f24-event-num { font-size: 10rem; top: -1.2rem; }
  .f24-article,
  .f24-article:first-child { min-height: 20rem; }
  .f24-foot { min-height: auto; }
}

@media (max-width: 520px) {
  .f24-stats { grid-template-columns: 1fr; }
  .f24-stat { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--f24-navy) 30%, transparent); }
  .f24-fixture { grid-template-columns: 1fr; }
  .f24-fixture-when { white-space: normal; }
  .f24-campaign { padding: 1.5rem; }
}

/* Bloque de título de la galería cuando NO es la plantilla de galería:
   va pegado al mosaico, sin el aire habitual de sección, para que se lea
   como una sola pieza (título + fotos) y no como dos bloques sueltos. */
.f24-galeria-bloque { padding-bottom: 1.5rem; }

/* ------------------------------------------------------------
   LA JORNADA — la semana entera, marcador a marcador
   ------------------------------------------------------------
   Cada partido usa el MISMO marcador que el Match Center y la
   crónica del entrenador va justo debajo, con filete: es su voz,
   no la del redactor.
   ------------------------------------------------------------ */
/* Página `/jornada`: navegación entre semanas y la voz de comunicación
   cuando la hay. La página existe siempre; esto es lo que se le añade. */
.f24-jornada-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.f24-jornada-actual {
  font-family: var(--f24-display);
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: var(--f24-track-display);
  text-align: center; flex: 1;
}
.f24-jornada-voz {
  margin-bottom: 2.5rem; padding-left: 1rem;
  border-left: 3px solid var(--f24-yellow);
}
.f24-jornada-voz h2 {
  font-family: var(--f24-display);
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  font-weight: 900; line-height: 1.05; margin: 0 0 .5rem;
}
@media (max-width: 520px) {
  /* En móvil los dos botones de semana caben mal en una línea con el
     rótulo en medio: el rótulo pasa arriba y los botones debajo. */
  .f24-jornada-actual { flex-basis: 100%; order: -1; text-align: left; }
  .f24-jornada-nav .f24-btn { flex: 1; text-align: center; }
}

.f24-jornada-partido { padding-bottom: 1.5rem; }
.f24-jornada-partido + .f24-jornada-partido { padding-top: .5rem; }
.f24-jornada-cronica {
  max-width: 46rem;
  margin: 1rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--f24-yellow);
  color: var(--f24-ink);
  font-size: 1.0625rem; line-height: 1.55;
}