/* ============================================================
   SCORPIO — WEB PÚBLICA
   Traducción a CSS del kit `ui_kits/web` del Design System
   (Claude Design), leído el 07-ago-2026.

   POR QUÉ ESTÁ AQUÍ Y NO EN components.css: la regla de
   convivencia del 3-ago dice que aquel fichero tiene UN solo
   escritor, y es adminequipos. De allí se reutilizan los
   componentes ya traducidos —.scorpio-btn y .scorpio-badge—,
   que son del sistema y valen igual en la web pública. Lo de
   aquí es mobiliario de la web: cómo se coloca lo que ya existe.

   Se carga DESPUÉS de components.css (ver scorpio_styles() y la
   etiqueta que añade _web.php), así que puede ajustar sin !important.
   ============================================================ */

/* --- Cosas de toda la página ------------------------------------------- */

.ico { flex: 0 0 auto; vertical-align: middle; }

/* El contenedor de la casa. Todos los bloques de ancho completo pintan su
   fondo a sangre y meten el contenido aquí dentro. */
.web-inner,
.web-contacto__inner,
.web-marca__inner,
.web-nav__lista,
.web-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

/* El salto al contenido: fuera de la pantalla hasta que se le da el foco.
   No `display: none`, que lo sacaría del orden de tabulación y lo dejaría
   inservible, que es justo para lo que existe. */
.web-saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--blue-ink);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: var(--fw-semibold);
}
.web-saltar:focus { left: 0; color: #fff; }

/* --- Cabecera ---------------------------------------------------------- */

.web-header {
  background: var(--warm-0);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  z-index: 30;
}

/* La barra fina de contacto */
.web-contacto {
  background: var(--warm-50);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
}
.web-contacto__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.web-contacto__datos {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.web-contacto__datos a,
.web-contacto__mail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-body);
  font-size: 13px;
  font-weight: var(--fw-medium);
}
.web-contacto__datos .ico { color: var(--green-ink); }
.web-contacto__datos a:hover { color: var(--blue); }

/* El conmutador de idioma: píldora con el activo relleno. */
.web-idiomas {
  display: inline-flex;
  gap: 2px;
  background: var(--warm-100);
  border-radius: var(--radius-pill);
  padding: 2px;
}
.web-idiomas > * {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1;
}
.web-idiomas__on { background: var(--blue); color: #fff; }
.web-idiomas a { color: var(--text-muted); }
.web-idiomas a:hover { color: var(--blue); text-decoration: none; background: var(--warm-200); }

/* La fila de la marca */
.web-marca__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.web-logo { display: flex; align-items: center; gap: 10px; }
.web-logo:hover { text-decoration: none; }
.web-logo img { height: 46px; width: auto; border-radius: var(--radius-sm); display: block; }
.web-logo__texto {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 20px;
  color: var(--blue-ink);
  line-height: 1;
  letter-spacing: -.01em;
}
/* La marca entera en dos renglones: arriba el nombre y debajo la actividad, el
   mismo criterio que la carcasa del back office. */
.web-logo__texto span {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--green-ink);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin-top: 3px;
}
.web-marca__acciones {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.web-marca__cta { gap: 6px; }

/* --- El menú ----------------------------------------------------------- */

.web-nav { border-top: 1px solid var(--border-subtle); }
.web-nav__lista {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;

  /* `margin: 0 auto` Y NO `margin: 0`. La regla compartida de más arriba centra
     los contenedores con `auto`, y un `margin: 0` aquí —puesto para quitar el
     margen que los navegadores dan a un <ul>— se lo cargaba: el menú se pegaba
     al borde izquierdo mientras la barra de contacto y el logo quedaban
     centrados. A 1280px eran 32px de desfase. Lo vio Joaquín el 8-ago-2026. */
  margin: 0 auto;

  /* EL PADDING SE DESCUENTA EL DEL PROPIO ENLACE, para que lo que se alinea con
     el logo sea el TEXTO y no la caja invisible que lo rodea. El primer enlace
     lleva `--nav-pad` de relleno, así que el contenedor pone eso de menos y la
     suma vuelve a dar los 24px de los demás bloques.

     Va con variable porque el relleno cambia en la franja estrecha y en el panel
     móvil: así solo hay que tocar `--nav-pad` en cada sitio y la cuenta se
     ajusta sola. Con dos números sueltos, el día que se cambie uno el menú se
     desalinea otra vez y nadie sabrá por qué. */
  --nav-pad: 12px;
  padding-left: calc(var(--space-5) - var(--nav-pad));
  padding-right: calc(var(--space-5) - var(--nav-pad));
  /* SE PARTE EN DOS RENGLONES SI NO CABE, Y NO SE DESPLAZA EN HORIZONTAL.

     La primera versión llevaba `overflow-x: auto` para mantener el menú en una
     sola línea. Es una trampa conocida y aquí mordió: cuando un eje del
     desbordamiento vale `auto`, EL OTRO SE COMPUTA `auto` TAMBIÉN —no existe
     `overflow-x: auto` con `overflow-y: visible`—, así que este contenedor
     recortaba por abajo los submenús, que cuelgan 253px. El desplegable de
     «Torneo de Liga» se abría detrás del hero y no se veía. Lo cazó Joaquín el
     7-ago-2026.

     Partirse en dos renglones es feo en un ancho intermedio; un menú que no se
     puede usar no es una alternativa. */
  flex-wrap: wrap;
}
/* Cada entrada sí se mantiene entera: lo que no puede pasar es que «Bolsa de
   Jugadores» se parta por la mitad. */
.web-nav__lista a,
.web-nav__abrir { white-space: nowrap; }
.web-nav__lista > li { position: relative; }

.web-nav__lista a,
.web-nav__abrir {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px var(--nav-pad);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  border-bottom: 2px solid transparent;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  cursor: pointer;
}
.web-nav__lista a:hover,
.web-nav__abrir:hover { color: var(--blue); text-decoration: none; }
.web-nav__lista .is-activo { color: var(--blue); border-bottom-color: var(--green); }

/* Los desplegables, sin JavaScript: se abren al pasar el ratón y también al
   entrar con el teclado, que es lo que hace utilizable el :hover. */
/* Entre el panel móvil y el escritorio holgado hay una franja —un portátil
   pequeño, una ventana a medias— donde las ocho entradas piden unos 100px más
   de los que hay y el menú cae a dos renglones. Se aprieta un poco y cabe.
   No se aprieta siempre: a 1200px sobra sitio y el menú se lee mejor holgado. */
@media (min-width: 901px) and (max-width: 1180px) {
  /* Solo se toca la variable: el relleno de las entradas y el descuento del
     contenedor salen de ella, así que la alineación con el logo se mantiene. */
  .web-nav__lista { --nav-pad: 7px; }
  .web-nav__lista a,
  .web-nav__abrir { font-size: 13.5px; }
  /* Los del submenú NO se aprietan: ahí no hay problema de ancho y son los
     textos largos de verdad. */
  .web-nav__hijos a { padding-left: 12px; padding-right: 12px; font-size: 14px; }
}

.web-nav__hijos {
  position: absolute;
  top: 100%;
  left: 0;
  /* El ancho lo pone el contenido, no un número redondo: ver el bloque de
     escritorio de más abajo, donde cada entrada se obliga a una sola línea. */
  min-width: 240px;
  z-index: 40;
  background: var(--warm-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  /* El aire entre el botón y el panel. Es una variable porque el puente de
     abajo tiene que medir exactamente esto: si se cambia aquí y allí no, vuelve
     el hueco muerto. */
  --nav-hueco: 2px;
  margin: var(--nav-hueco) 0 0;
  list-style: none;
  display: none;
}
/* TRES FORMAS DE ABRIR, Y UNA DE ELLAS SOLO CUANDO NO HAY JAVASCRIPT.

   `:hover` vale siempre: el ratón es efímero y al salir cierra solo.

   `:focus-within` es el respaldo para el teclado, y va condicionado a que NO se
   haya cargado `menu.js` (que pone `con-js` en el <html>). Con las dos cosas a
   la vez se produce una contradicción fea: Escape devuelve el foco a su botón
   —que está DENTRO del elemento—, así que `:focus-within` volvía a abrir el
   submenú justo después de que el script lo cerrase. El atributo decía
   «cerrado» y el ojo veía «abierto». Medido en el subdominio el 7-ago-2026.

   Con el script cargado, del teclado se encarga él. */
.web-nav__con-hijos:hover .web-nav__hijos,
html:not(.con-js) .web-nav__con-hijos:focus-within .web-nav__hijos,
.web-nav__con-hijos.is-abierto .web-nav__hijos { display: block; }
.web-nav__hijos a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: var(--fw-medium);
  border-bottom: 0;
  white-space: normal;
}
.web-nav__hijos a:hover { background: var(--blue-50); }

/* CADA ENTRADA DEL DESPLEGABLE, EN UNA SOLA LÍNEA (Joaquín, 10-ago-2026).

   Con el ancho fijo, «Jueves Pabellón - Liga Primera División» se partía en dos
   renglones y la lista se leía como ocho entradas en vez de cuatro: el ojo no
   distingue dónde acaba una y empieza la siguiente.

   El arreglo es dejar que el panel mida lo que mide su entrada más larga
   —`max-content`— en vez de fijarle un ancho y hacer que el texto se adapte. El
   tope está para que un nombre de competición desmedido no lo saque de la
   pantalla, y por eso lleva también el `calc(100vw…)`: el panel se ancla a la
   izquierda de su botón, y el de «Torneo de Copa» ya está a media barra.

   Solo en escritorio: en el menú móvil las entradas SÍ se parten, porque allí
   hay alto de sobra y ancho ninguno (ver el bloque de 900px). */
@media (min-width: 901px) {
  .web-nav__hijos {
    width: max-content;
    max-width: min(440px, calc(100vw - 48px));
  }
  .web-nav__hijos a { white-space: nowrap; }

  /* EL PUENTE SOBRE EL HUECO (Joaquín, 27-ago-2026).

     El panel se separa 2px de su botón, y esos 2px eran tierra de nadie: el
     panel está posicionado en absoluto, así que la franja no pertenece ni al
     botón ni al panel sino al <ul> de detrás. El ratón que bajaba a elegir
     una liga salía del `:hover` del <li> justo ahí y el submenú se cerraba
     antes de llegar. Con el trazo rápido no se notaba; con el lento, se
     cerraba siempre.

     Se tapa con un pseudo-elemento del propio panel: al ser descendiente del
     <li>, mantiene su `:hover` mientras el puntero cruza. Es invisible y no
     ocupa sitio, así que el aire de 2px se sigue viendo igual.

     Solo en escritorio: por debajo de 901px el panel va en el flujo, pegado a
     su grupo, y no hay hover que perder. */
  .web-nav__hijos::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: var(--nav-hueco);
  }
}

/* El interruptor del menú móvil. Fuera de la vista pero NO con display:none ni
   visibility:hidden, que lo sacarían del orden de tabulación: es el único modo
   de abrir el menú con el teclado, porque aquí no hay JavaScript. Quien tabula
   lo alcanza sin verlo, y la regla de foco de más abajo ilumina el botón que sí
   se ve. */
.web-nav__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.web-nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--warm-100);
  color: var(--blue-ink);
  cursor: pointer;
}
/* El foco del checkbox se pinta sobre el botón visible, que está en otra rama
   del árbol: por eso se baja desde el hermano `.web-marca` y no con `+`. */
.web-nav__toggle:focus-visible ~ .web-marca .web-nav__burger {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .web-marca__cta { display: none; }
  .web-nav__burger { display: inline-flex; }

  /* Cerrado por defecto, y el checkbox lo abre. */
  .web-nav { display: none; }
  .web-nav__toggle:checked ~ .web-nav { display: block; }

  .web-nav__lista {
    display: block;
    /* Mismo criterio en el panel: 10px de relleno en cada entrada, así que el
       contenedor pone 14 y el texto cae en los 24px de siempre. */
    --nav-pad: 10px;
    padding-top: var(--space-2);
    padding-bottom: var(--space-3);
  }
  .web-nav__lista a,
  .web-nav__abrir {
    display: block;
    width: 100%;
    padding: 12px var(--nav-pad);
    text-align: left;
    border-bottom: 0;
    font-size: 15px;
    /* Aquí sí se parten: en el panel hay ancho de sobra en alto y ninguno en
       horizontal, así que una entrada larga tiene que envolver, no desbordar. */
    white-space: normal;
  }
  .web-nav__lista .is-activo { color: var(--blue); }

  /* En móvil los grupos se ven siempre: un desplegable dentro de un desplegable
     obliga a dos toques para llegar a una clasificación, que es lo que más se
     consulta del sitio. La franja verde de la izquierda dice de quién cuelgan. */
  .web-nav__abrir { color: var(--text-muted); font-size: 13px; text-transform: uppercase; letter-spacing: var(--ls-wide); cursor: default; }
  .web-nav__abrir .ico { display: none; }
  .web-nav__hijos {
    display: block;
    position: static;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--green);
    border-radius: 0;
    margin: 0 0 var(--space-2) 6px;
    padding: 0 0 0 8px;
    min-width: 0;
  }
}

/* Las tres reglas de arriba dependen de que el checkbox, `.web-marca` y
   `.web-nav` sean HERMANOS dentro de `.web-header`, y en ese orden. Si alguien
   mueve el <input> junto a su etiqueta —que es donde parece que va— el menú deja
   de abrirse en móvil y no falla nada más: la página se ve perfecta en un
   escritorio. Está avisado también en _web.php. */

/* --- La home: hero ------------------------------------------------------ */

.web-hero {
  background: var(--warm-0);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}
.web-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--space-7);
  align-items: center;
}
.web-hero h1 {
  font-size: clamp(30px, 5vw, 52px);
  margin: 10px 0 0;
  line-height: 1.04;
}
.web-hero__entrada {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  margin-top: var(--space-4);
  max-width: 56ch;
}
.web-hero__botones {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}
.web-hero__botones .scorpio-btn { gap: 6px; }

/* El recorrido por las instalaciones: cartel siempre, y vídeo encima cuando
   `hero-video.js` decide que toca. El degradado de marca se queda DEBAJO como
   fondo —se ve el instante que va entre pintar la caja y cargar la imagen—, pero
   ya no lleva el rayado del kit: encima de una foto real se veía sucio.

   El contenido va en 3:2 y el hueco en 4:3, así que `cover` recorta por arriba y
   por abajo. Es deliberado: el material está encuadrado sabiendo que se recorta. */
.web-hero__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-ink));
  box-shadow: var(--shadow-lg);
}
.web-hero__foto img,
.web-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* El vídeo se pone ENCIMA del cartel, no en su lugar: el cartel no se retira
   hasta que hay un fotograma pintado, y sin esto se vería el hueco en negro
   mientras carga. */
.web-hero__video {
  position: absolute;
  inset: 0;
}

@media (max-width: 900px) {
  /* `minmax(0, 1fr)` Y NO `1fr` A SECAS. Un `1fr` lleva un mínimo automático:
     la columna no puede encogerse por debajo del contenido más ancho que tenga
     dentro. Y `.scorpio-btn` es `white-space: nowrap` —bien, un botón no se
     parte—, así que «Consulta nuestras ligas, precios e inscripción» medía 441px
     y estiraba la columna entera a 441 dentro de un móvil de 327 útiles. El
     `overflow: hidden` del hero lo recortaba sin barra de desplazamiento: el
     texto salía cortado y NADA lo delataba, ni el ancho del documento.
     Medido en el subdominio a 390px el 7-ago-2026. */
  .web-hero__inner { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) var(--space-5); gap: var(--space-5); }

  /* Y los dos botones, a lo ancho y con el texto partible: es la otra mitad del
     arreglo. Aquí sí se desactiva el `nowrap` del componente, porque son dos
     llamadas largas en la pantalla más estrecha; en el resto del sitio el botón
     sigue sin partirse. */
  .web-hero__botones { flex-direction: column; align-items: stretch; }
  .web-hero__botones .scorpio-btn { white-space: normal; height: auto; min-height: 48px; padding-top: 12px; padding-bottom: 12px; }
  /* La foto va DESPUÉS del texto en móvil: lo primero tiene que ser el titular
     y los dos botones, no un rectángulo decorativo de 4/3 que empuja la llamada
     a la acción fuera de la pantalla. */
  .web-hero__foto { order: 2; aspect-ratio: 16 / 9; }
}

/* --- La home: cifras ---------------------------------------------------- */

.web-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.web-cifra { background: var(--warm-0); padding: 18px 20px; text-align: center; }
.web-cifra strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 30px;
  color: var(--blue-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.web-cifra span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin-top: 6px;
}

/* --- La home: rejilla ---------------------------------------------------- */

.web-home {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}
.web-home__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 980px) {
  /* minmax(0, …) por lo mismo que en el hero: si no, cualquier botón o palabra
     larga de dentro fija el ancho de la columna y desborda la pantalla. */
  .web-home__grid { grid-template-columns: minmax(0, 1fr); }
}

.web-seccion { margin-bottom: var(--space-5); }
.web-seccion h2 { margin: 0; font-size: var(--fs-h3); }

/* --- Migas de pan --------------------------------------------------------- */

/* La ruta de vuelta, encima del título de una ficha. Discreta a propósito: es
   señalización, no contenido, y compite con el h1 si pesa más de la cuenta.

   El separador se pinta con un `::before` en vez de escribirlo en el HTML para
   que no lo lea un lector de pantalla: la lista ya dice que son pasos de una
   ruta, y oír «raya, raya, raya» entre cada uno no ayuda a nadie. */
.web-migas {
  margin-bottom: var(--space-3);
  font-size: 13px;
  line-height: 1.4;
}
.web-migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.web-migas li { display: flex; align-items: center; gap: 6px; }
.web-migas li + li::before {
  content: '›';
  color: var(--text-faint);
  font-weight: var(--fw-semibold);
}
.web-migas a { color: var(--text-link); text-decoration: none; }
.web-migas a:hover { text-decoration: underline; }
.web-migas span { color: var(--text-muted); }

/* --- El bloque de competición de la portada ------------------------------- */

.web-jornada { margin-bottom: var(--space-6); }

/* Las cuatro ligas, en rejilla: cada una con su nombre arriba y su primero
   debajo. `auto-fit` en vez de un número fijo de columnas porque el número de
   ligas lo dicen los datos, no el CSS: si un año hay tres o cinco, se reparten
   igual sin tocar nada. */
.web-jornada__ligas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-3);
}
.web-jornada__ligas li {
  padding: var(--space-4);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--green);
}
.web-jornada__liga {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  /* La zona tocable, al mínimo de 44 px: medida en un 360 salía en 43 con
     `2px`, y 1 px por debajo del mínimo es estar por debajo del mínimo. */
  padding: 4px 0;
}
/* Las dos líneas de cada tarjeta: liga y copa. El rótulo va delante y en
   pequeño —«Liga», «Copa»— porque lo que se lee es el nombre del equipo. */
.web-jornada__campeon { display: block; margin-top: var(--space-3); line-height: var(--lh-relaxed); }
.web-jornada__que {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--green);
  font-weight: var(--fw-bold);
}
.web-jornada__campeon b { color: var(--blue-ink); font-family: var(--font-display); }
.web-jornada__pendiente { color: var(--text-body); }
.web-jornada__puntos { display: block; font-size: 14px; color: var(--text-muted); }
/* En su propio renglón, como los puntos de la liga: pegado al nombre del equipo
   se leía «FERRETERÍAS HNOS JIMÉNEZ Ver la final» como una sola frase. */
.web-jornada__ver { display: block; font-size: 14px; padding: var(--space-3) 0; }
.web-jornada__pie { margin: var(--space-4) 0 0; color: var(--text-body); }
.web-jornada__pie b { color: var(--blue-ink); }
.web-jornada__pie a { margin-left: var(--space-2); white-space: nowrap; }

/* --- Noticias ------------------------------------------------------------ */

.web-noticias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: var(--space-4);
}

/* El enlace al archivo, debajo de las cinco tarjetas de la portada. Alineado a
   la derecha porque cierra el bloque: se lee después de las tarjetas, no antes. */
.web-noticias__mas {
  margin: var(--space-4) 0 0;
  text-align: right;
}
.web-noticias__mas a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--text-link);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}

/* La paginación de los índices de crónicas y noticias.

   Los dos enlaces se van a los extremos y la cuenta se queda en medio, así que
   «Anteriores» no se mueve de sitio según haya o no «Siguientes»: en un listado
   que se recorre página a página, un botón que baila es un botón que se falla.
   El `margin-right: auto` de la cuenta es lo que sujeta el reparto cuando solo
   queda uno de los dos enlaces. */
.web-paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--warm-100);
  flex-wrap: wrap;
}
.web-paginacion__ir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 44 px de alto: se toca con el pulgar, y es el final de una lista larga en la
     que se llega con el móvil en una mano. */
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-link);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.web-paginacion__ir:hover { background: var(--surface-accent); text-decoration: none; }
.web-paginacion__ir:first-child { margin-right: auto; }
.web-paginacion__cuenta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  order: 1;
}
.web-paginacion__ir[rel="next"] { order: 2; }
.web-noticia {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .15s ease;
}
.web-noticia:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.web-noticia__foto {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #5b7789, #25415a);
  overflow: hidden;
}
.web-noticia__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* EL DISTINTIVO DEL GRUPO VA AL PIE DE LA FOTO, sobre un degradado, y no en un
   chip verde arriba (Joaquín, 10-ago-2026).

   El problema era el texto: «Laborables Césped - Torneo de Copa 1a» ocupaba dos
   renglones dentro de una caja verde opaca y tapaba media imagen — y en estas
   fotos la mitad de arriba es justo donde están las caras y el trofeo. Bajarlo al
   pie deja la foto limpia por donde importa.

   Recortarlo con puntos suspensivos seguiría sin valer: lo que se cortaría es la
   categoría —el «1a»—, que es exactamente lo que distingue una crónica de otra
   en la misma jornada.

   El degradado y no un fondo plano: sobre una foto clara, el texto blanco solo se
   lee si hay algo detrás, y una banda sólida sería otra caja. Así se oscurece lo
   justo y se difumina hacia arriba. El `text-shadow` es el seguro para las fotos
   muy claras. */
.web-noticia__foto::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  background: linear-gradient(to top, rgba(8, 26, 40, .88), rgba(8, 26, 40, .45) 45%, rgba(8, 26, 40, 0));
  pointer-events: none;
}
.web-noticia__foto .scorpio-badge {
  position: absolute;
  z-index: 1;
  bottom: 9px;
  left: 11px;
  max-width: calc(100% - 22px);
  background: transparent;
  border: 0;
  padding: 0;
  color: #fff;
  font-size: 10px;
  letter-spacing: .05em;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.web-noticia__cuerpo { padding: 14px 16px; }
.web-noticia__fecha {
  font-size: 11.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin: 0 0 6px;
}
/* h2 Y h3: el titular de la tarjeta es el mismo, pero su NIVEL cambia según la
   página. En la home cuelga de un «Noticias y crónicas» (h2) y es h3; en la
   sección Actualidad de una competición cuelga directamente del h1, así que es
   h2 — saltar de h1 a h3 deja un hueco que un lector de pantalla anuncia. El
   tamaño lo manda la tarjeta, no la etiqueta. */
.web-noticia__cuerpo h2,
.web-noticia__cuerpo h3 {
  font-size: 17px;
  color: var(--blue-ink);
  margin: 0;
  line-height: 1.25;
}
/* El resumen, a dos líneas exactas: las notificaciones vienen con HTML dentro y
   de longitudes muy distintas, y sin el recorte las tarjetas de una misma fila
   salen de alturas diferentes. */
.web-noticia__resumen {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 7px 0 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.web-noticia__resumen p { margin: 0; }

/* --- Llamadas laterales -------------------------------------------------- */

.web-aside { display: flex; flex-direction: column; gap: var(--space-4); }

.web-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--green-50);
  border: 1px solid var(--border-subtle);
  border-left: 5px solid var(--green);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.web-cta--azul { background: var(--blue-50); border-left-color: var(--blue); }
.web-cta__icono {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--warm-0);
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-ink);
}
.web-cta--azul .web-cta__icono { color: var(--blue); }
.web-cta__texto { flex: 1 1 180px; }
.web-cta__texto strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 19px;
  color: var(--blue-ink);
  line-height: 1.15;
}
.web-cta__texto span { display: block; font-size: 14px; color: var(--text-muted); margin-top: 4px; }
.web-cta .scorpio-btn { flex: 0 0 auto; gap: 6px; }

/* --- Bloque de texto de la home ------------------------------------------ */

.web-intro {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-6);
  box-shadow: var(--shadow-xs);
}
.web-intro h2 { margin-top: 0; font-size: var(--fs-h3); }
.web-intro p:last-child { margin-bottom: 0; }
.web-intro strong { color: var(--blue-ink); }

/* Los tres datos de contacto de la home, en fila. */
.web-intro__contacto {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin: var(--space-4) 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.web-intro__contacto a,
.web-intro__contacto span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
}
.web-intro__contacto .ico { color: var(--green-ink); }

/* El banner de inscripciones. Es una imagen y su enlace, nada más. */
.web-banner { display: block; margin-bottom: var(--space-6); }
.web-banner img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }

/* --- La landing de ligas -------------------------------------------------- */

/* El hero de la landing no lleva foto al lado: lleva los dos precios. Así que
   ocupa una sola columna ancha en vez de la rejilla de la home. */
.web-hero__inner--ancho { grid-template-columns: minmax(0, 1fr); max-width: var(--container-narrow); }
.web-hero--landing .web-hero__entrada { max-width: none; }

/* LA LANDING: TEXTO Y CARRIL.

   El contenedor va al ancho grande, pero la COLUMNA DE TEXTO se queda en su
   medida de lectura —el argumentario son párrafos largos y a 1.200px no se
   leen—. Las dos cosas a la vez: eso es lo que la primera versión no vio, que
   estrechó la página entera para conseguir la medida y de paso se cargó el
   carril. Lo señaló Joaquín el 8-ago-2026. */
.web-landing {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-7);
  align-items: start;
}
.web-landing__cuerpo { max-width: 720px; min-width: 0; }

/* EL CARRIL SE QUEDA PEGADO al hacer scroll. La página mide trece secciones:
   quien llega abajo del todo convencido tenía que volver arriba a buscar el
   botón de reservar.

   EL `sticky` VA EN EL <aside>, QUE ES EL HIJO DEL GRID, no en el div de dentro.
   Puesto dentro no funciona y no avisa: `align-items: start` encoge el aside a
   la altura de su contenido, así que el elemento interior no tiene por dónde
   deslizarse y se va con el scroll como si nada. Medido en el subdominio el
   8-ago-2026: se iba a -4757px. Sobre el hijo del grid, en cambio, el recorrido
   es el del contenedor entero, que es lo que se quiere.

   EL `max-height` ES UNA RED DE SEGURIDAD, NO LA SOLUCIÓN. Si el carril no cabe
   en la ventana, lo correcto es quitarle una tarjeta —es lo que se hizo en la
   landing el 8-ago—, no dejar que se desplace por dentro: un lateral con su
   propia barra de scroll es más incómodo que no tenerlo. Esto solo cubre las
   ventanas muy bajas, donde desplazar es preferible a que la última tarjeta
   quede inalcanzable.

   Si alguna vez aparece esa barra en una pantalla normal, es la señal de que
   sobra una tarjeta. */
.web-landing__carril,
.web-formulario__carril {
  position: sticky;
  top: var(--space-4);
  align-self: start;
  max-height: calc(100vh - var(--space-6));
  overflow-y: auto;
  scrollbar-width: thin;
}
.web-landing__pegado {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* En el carril las tarjetas son estrechas, así que el botón baja bajo el texto
   en vez de pelearse con él por el renglón. */
.web-landing__carril .web-cta,
.web-formulario__carril .web-cta { padding: var(--space-4); }
.web-landing__carril .web-cta__texto,
.web-formulario__carril .web-cta__texto { flex: 1 1 100%; }
.web-landing__carril .web-cta__texto strong,
.web-formulario__carril .web-cta__texto strong { font-size: 17px; }

@media (max-width: 980px) {
  /* Por debajo de esto no hay sitio para dos columnas: el carril pasa a ser el
     final de la página y deja de estar pegado —un bloque `sticky` en un móvil
     se come la pantalla—. */
  .web-landing { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .web-landing__cuerpo { max-width: none; }
  .web-landing__carril { position: static; max-height: none; overflow: visible; }
}

.web-bloque { margin-bottom: var(--space-7); }
.web-bloque > p { color: var(--text-body); line-height: var(--lh-relaxed); }
.web-nota { color: var(--text-muted); font-size: var(--fs-sm); }
.web-nota .ico { color: var(--green-ink); margin-right: 4px; }

/* El índice de la página. Fila de píldoras, no una lista vertical: ocupa dos
   renglones en vez de trece y se lee de un vistazo. */
.web-indice {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-7);
}
.web-indice > span {
  display: block;
  font-size: var(--fs-xxs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-3);
}
.web-indice ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.web-indice a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--warm-100);
  font-size: 13px;
  color: var(--blue);
}
.web-indice a:hover { background: var(--blue-50); text-decoration: none; }

/* Los precios. En el hero salen en línea; más abajo, como tarjetas. */
.web-precios { display: flex; gap: var(--space-5); flex-wrap: wrap; margin: var(--space-5) 0; }
.web-precio { flex: 1 1 200px; }
.web-precio__que {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
}
.web-precio strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: var(--fw-black);
  color: var(--green-ink);
  line-height: 1.05;
  margin: 4px 0 2px;
  font-variant-numeric: tabular-nums;
}
.web-precio__nota { display: block; font-size: 13px; color: var(--text-muted); line-height: 1.4; }

.web-precios--tarjetas .web-precio {
  background: var(--green-50);
  border: 1px solid var(--border-subtle);
  border-left: 5px solid var(--green);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

/* Los cuatro pasos, numerados con la cifra en verde y grande: es una secuencia
   y el número es lo que la hace legible de un vistazo. */
.web-pasos { list-style: none; counter-reset: paso; margin: var(--space-4) 0; padding: 0; }
.web-pasos li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 var(--space-4) 46px;
  line-height: var(--lh-relaxed);
}
.web-pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -2px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-ink);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 15px;
}
.web-pasos li:last-child { padding-bottom: var(--space-3); }

.web-mapa { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); }
.web-mapa iframe { display: block; }

/* El cartel que ocupa el sitio del mapa mientras no hay permiso de cookies.
   Mide lo mismo que el iframe (400px) para que aceptarlo no dé un salto de
   maquetación: el mapa aparece exactamente donde estaba el cartel. */
.web-mapa__aviso {
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-5);
  background: var(--surface-sunken, #f2f1ee);
  color: var(--text-muted, #5b5850);
  font-size: 14px;
}
.web-mapa__aviso[hidden] { display: none; }
.web-mapa__aviso p { margin: 0; }
/* El iframe sin cargar no ocupa: si ocupara, el cartel quedaría debajo y la
   caja mediría 800px. Recupera su sitio en cuanto se le pone el `src`. */
.web-mapa iframe:not([src]) { display: none; }

/* Las dos opciones de liga, una al lado de la otra. */
.web-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.web-opcion {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}
.web-opcion h3 { font-size: var(--fs-h4); margin: 0 0 var(--space-3); }
.web-opcion ul,
.web-lista { list-style: none; margin: 0; padding: 0; }
.web-opcion li,
.web-lista li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-body);
}
/* Un guion verde en vez de una viñeta: es lo que usa la página actual y pesa
   menos que un punto negro cuando hay siete seguidos. */
.web-opcion li::before,
.web-lista li::before { content: "—"; position: absolute; left: 0; color: var(--green); font-weight: var(--fw-bold); }

/* Texto y foto, uno al lado del otro, cuando la sección lleva una sola. */
.web-lado { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-5); align-items: start; }
@media (max-width: 720px) { .web-lado { grid-template-columns: minmax(0, 1fr); } }

/* DOS COLUMNAS FIJAS, no `auto-fit`. Con auto-fit, en la medida de lectura
   (820px) caben tres, y la sección de pistas tiene CUATRO fotos: salían 3 + 1,
   con la última suelta y del triple de tamaño que sus compañeras. A dos
   columnas, cuatro fotos son un cuadrado y dos son una fila. */
.web-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
@media (max-width: 560px) { .web-fotos { grid-template-columns: minmax(0, 1fr); } }
.web-fotos--una { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.web-fotos img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--photo-radius);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--photo-ring);
}

.web-bloque h3 { font-size: var(--fs-h4); margin: var(--space-5) 0 var(--space-2); }

/* Las preguntas frecuentes, plegadas. El contenido SIGUE en el HTML aunque esté
   cerrado —`details` no lo quita del documento—, así que Google lo lee igual. */
.web-faq { border-top: 1px solid var(--border-subtle); }
.web-faq details { border-bottom: 1px solid var(--border-subtle); }
.web-faq summary {
  cursor: pointer;
  padding: var(--space-4) 28px var(--space-4) 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: var(--blue-ink);
  list-style: none;
  position: relative;
}
.web-faq summary::-webkit-details-marker { display: none; }
/* El signo lo dibuja el CSS: un «+» que gira a «×» al abrir. Así no depende de
   cómo pinte cada navegador el triangulito por defecto. */
.web-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: var(--fw-regular);
  color: var(--green-ink);
  line-height: 1;
}
.web-faq details[open] summary::after { content: "×"; }
.web-faq summary:hover { color: var(--blue); }
.web-faq details > p { margin: 0 0 var(--space-4); color: var(--text-body); line-height: var(--lh-relaxed); }

/* Los dos enlaces a femenino y mixto, debajo del acordeón. Van en pequeño: son
   una salida lateral para quien busca eso, no una llamada más de la landing. */
.web-faq__enlaces {
  margin: var(--space-4) 0 0;
  font-size: 14px;
  color: var(--text-muted);
}
.web-faq__enlaces a { padding: var(--space-2) 0; display: inline-block; }

/* La valoración y las tres reseñas. */
.web-rating { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.web-rating strong {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--fw-black);
  color: var(--green-ink);
  line-height: 1;
}
.web-rating span { color: var(--text-muted); font-size: var(--fs-sm); }

.web-resenas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }
.web-resena {
  margin: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-xs);
}
.web-resena p { font-style: italic; color: var(--text-body); margin: 0 0 var(--space-3); line-height: 1.55; font-size: var(--fs-sm); }
.web-resena footer { font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-muted); }
.web-resena__estrellas { color: var(--green); letter-spacing: 1px; }
/* La nota de «traducida»: se lee si se busca, y no compite con la reseña.
   En bloque propio para que no parta la línea del nombre en móvil. */
.web-resena__traducida {
  display: block;
  font-weight: var(--fw-regular, 400);
  font-size: 12px;
  color: var(--text-subtle, #8a867c);
  margin-top: 2px;
}

/* El cierre: la última llamada, a lo ancho y con fondo. */
.web-cierre {
  background: var(--blue-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}
.web-cierre h2 { margin-top: 0; }
.web-cierre p { color: var(--text-muted); max-width: 52ch; margin: 0 auto var(--space-5); }
.web-cierre__botones { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.web-cierre__botones .scorpio-btn { gap: 6px; }

@media (max-width: 560px) {
  /* Los botones del cierre y del hero de la landing, a lo ancho y partibles,
     por lo mismo que en la home: `.scorpio-btn` es `nowrap` y estos textos son
     largos. */
  .web-cierre__botones { flex-direction: column; }
  .web-cierre__botones .scorpio-btn,
  .web-hero--landing .web-hero__botones .scorpio-btn {
    white-space: normal;
    height: auto;
    min-height: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* --- Pie ----------------------------------------------------------------- */

.web-footer { background: var(--blue-ink); color: #fff; margin-top: var(--space-8); }
.web-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--space-6);
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}
.web-footer h2 {
  font-family: var(--font-display);
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin: 0 0 var(--space-4);
}
.web-footer__chapa {
  background: var(--warm-0);
  border-radius: var(--radius-md);
  padding: 10px;
  display: inline-block;
  margin-bottom: var(--space-3);
}
.web-footer__chapa img { height: 54px; width: auto; display: block; border-radius: var(--radius-xs); }
.web-footer__oficinas { font-size: var(--fs-sm); line-height: 1.6; color: rgba(255,255,255,.85); margin: 0; }
.web-footer__oficinas b { color: #fff; }
.web-footer__oficinas span { display: block; color: rgba(255,255,255,.6); font-size: 13px; margin-top: 4px; }

.web-footer__contacto { margin: 0; }
.web-footer__contacto a,
.web-footer__contacto span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.85);
  margin-bottom: 8px;
}
.web-footer__contacto .ico { color: var(--green); }
.web-footer__contacto a:hover { color: #fff; }

.web-footer__enlaces { list-style: none; margin: 0; padding: 0; }
.web-footer__enlaces li { margin-bottom: 8px; }
.web-footer__enlaces a { color: rgba(255,255,255,.8); font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.web-footer__enlaces a:hover { color: #fff; }

.web-footer__redes { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: 0; }
.web-footer__redes a {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 13px;
  font-weight: var(--fw-semibold);
}
.web-footer__redes a:hover { background: rgba(255,255,255,.2); text-decoration: none; }

.web-footer__pie {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: var(--space-4) var(--space-5);
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}

/* --- Formularios de conversión -------------------------------------------- */

/* EL FORMULARIO Y SU CARRIL CORTO.

   El formulario se queda estrecho —a 1.200px la vista tiene que recorrer la
   pantalla de un campo al siguiente— y al lado va un carril de solo dos
   tarjetas. Ni una más: un formulario existe para que lo rellenen, y cada enlace
   de al lado es una salida. Las dos que hay están porque no son fugas; el
   porqué, en `_carril-formulario.php`. */
.web-formulario {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: var(--space-7);
  align-items: start;
}
.web-formulario__cuerpo { max-width: 620px; min-width: 0; }

/* El teléfono, debajo del WhatsApp del carril. */
.web-carril__tel { margin: calc(var(--space-2) * -1) 0 0; text-align: center; }
.web-carril__tel a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.web-carril__tel .ico { color: var(--green-ink); }

@media (max-width: 900px) {
  .web-formulario { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .web-formulario__cuerpo { max-width: none; }
  .web-formulario__carril { position: static; max-height: none; overflow: visible; }
}
.web-formulario h1 { font-size: clamp(26px, 4vw, 38px); margin: 0; }
.web-formulario__intro { color: var(--text-muted); line-height: var(--lh-relaxed); }

/* El precio, destacado sobre el resto de la entrada: es el dato por el que se
   abandona esta página, así que se lee antes que cualquier otra cosa. Va en una
   caja con la línea verde de la marca a la izquierda, el mismo recurso que usan
   los avisos del sitio, para que se distinga sin parecer una alerta. */
.web-formulario__precio {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--surface-card);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-md);
  color: var(--text-body);
  line-height: var(--lh-relaxed);
}
.web-formulario__precio b { color: var(--blue-ink); }

/* --- La ficha de datos de la reserva -------------------------------------- */

/* Dos columnas donde caben y una donde no, con la foto debajo en móvil. El
   `minmax(0, …)` en la primera es lo que impide que una línea larga de la lista
   estire la columna y saque la foto de la caja. */
.reserva-ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: var(--space-5);
  align-items: start;
  margin: var(--space-5) 0;
  padding: var(--space-5);
  background: var(--surface-card);
  border-radius: var(--radius-md);
}
.reserva-ficha h2 {
  margin: 0 0 var(--space-3);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.reserva-ficha__lista { list-style: none; margin: 0; padding: 0; }
.reserva-ficha__lista li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-2) 0;
  color: var(--text-body);
  line-height: var(--lh-relaxed);
}
/* El icono no encoge ni se estira: sin esto, una línea de dos renglones lo
   deforma para rellenar el alto. */
.reserva-ficha__lista .ico { flex: 0 0 auto; margin-top: 3px; color: var(--green); }
.reserva-ficha__lista b { color: var(--blue-ink); }
.reserva-ficha__foto { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }

/* --- Qué pasa cuando envías, y la reseña ---------------------------------- */

.reserva-luego { margin-top: var(--space-6); }
.reserva-luego h2 { font-size: 1.125rem; margin: 0 0 var(--space-3); }
.reserva-luego ol { margin: 0; padding-left: 1.2em; color: var(--text-body); }
.reserva-luego li { margin-bottom: var(--space-2); line-height: var(--lh-relaxed); }
.reserva-luego b { color: var(--blue-ink); }

.reserva-resena {
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  border-left: 3px solid var(--border-subtle);
  color: var(--text-body);
}
.reserva-resena blockquote { margin: 0; font-style: italic; line-height: var(--lh-relaxed); }
.reserva-resena figcaption { margin-top: var(--space-2); font-size: 14px; color: var(--text-muted); }

.web-form { margin-top: var(--space-5); }
.web-form .scorpio-field { margin-bottom: var(--space-4); }
.web-form__texto { min-height: 130px; resize: vertical; font-family: var(--font-body); line-height: 1.5; }

/* Un campo con error se marca por el borde Y por el mensaje, nunca solo por el
   color: quien no distingue el rojo tiene que poder saber cuál falla. */
.scorpio-field.is-error .scorpio-input,
.web-form__radios.is-error { border-color: var(--danger); }

/* EL SEÑUELO DEL ANTISPAM. Fuera de la vista, sin `display:none`.
   `display:none` es lo primero que mira un robot medianamente hecho para saber
   qué campos saltarse; así tiene que rellenarlo o arriesgarse. Y no puede
   alcanzarlo una persona: no se ve, no recibe el foco (`tabindex="-1"`) y está
   fuera del lector de pantalla (`aria-hidden`). */
.web-form__senuelo {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.web-form__radios {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
  background: var(--surface-card);
}
.web-form__radios legend {
  padding: 0 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.web-form__radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.web-form__radio input { margin-top: 2px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--green-ink); }

.web-form__acepto { margin: var(--space-4) 0; font-size: var(--fs-sm); }
/* LA CASILLA QUE HAY QUE MARCAR PARA ENVIAR, TOCABLE CON UN DEDO.

   Medía 18 px en una etiqueta de 23: por debajo de los 24 px que pide la guía de
   accesibilidad para un control, y muy por debajo de los 44 del dedo. Y es la
   casilla obligatoria de los tres formularios —reserva, contacto y anuncio de la
   bolsa—, o sea el último paso antes de enviar.

   El `padding` vertical de la etiqueta es lo que levanta la zona tocable hasta
   los 44 px sin mover nada de sitio: la etiqueta envuelve el texto, así que
   tocar la frase también marca la casilla. */
.web-form__acepto label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  line-height: 1.45;
  padding: 8px 0;
  min-height: 44px;
  box-sizing: border-box;
}
.web-form__acepto input { flex: 0 0 auto; width: 24px; height: 24px; accent-color: var(--green-ink); }

.web-form__nota { font-size: 13px; color: var(--text-muted); margin: 0 0 var(--space-4); }

/* Las dos vías rápidas, debajo del formulario. Separadas por una línea: son una
   alternativa a lo de arriba, no el siguiente paso. */
.web-form__wa {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.web-form__wa .scorpio-btn { gap: 6px; }

/* En un móvil los campos vuelven a 16px: por debajo de eso, Safari de iPhone
   hace zoom al enfocar y descoloca la página. Es la misma decisión que se tomó
   en el login del área de equipos. */
@media (max-width: 560px) {
  .web-form .scorpio-input { font-size: 16px; }
  .web-form__wa { flex-direction: column; }
}

/* --- Páginas de «gracias» -------------------------------------------------- */

.web-gracias {
  max-width: 620px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  text-align: center;
}
.web-gracias__marca {
  width: 66px;
  height: 66px;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.web-gracias h1 { font-size: clamp(26px, 4.5vw, 40px); margin: 0 0 var(--space-4); }
.web-gracias__grande { font-size: var(--fs-lead); color: var(--text-body); line-height: var(--lh-relaxed); }
.web-gracias__prisa { color: var(--text-muted); margin-top: var(--space-5); }
.web-gracias__botones { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-7); }
.web-gracias__botones .scorpio-btn { gap: 6px; }

.web-gracias__luego {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-5);
  text-align: left;
}
.web-gracias__luego > span {
  display: block;
  font-size: var(--fs-xxs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-3);
}
.web-gracias__luego ul { list-style: none; margin: 0; padding: 0; }
.web-gracias__luego li { margin-bottom: 10px; font-size: var(--fs-sm); }

@media (max-width: 560px) {
  .web-gracias__botones { flex-direction: column; }
  .web-gracias__botones .scorpio-btn { white-space: normal; height: auto; min-height: 48px; }
}

/* --- El botón permanente de WhatsApp -------------------------------------- */

/* Verde de WhatsApp (#25D366) y NO el verde de la marca, a propósito: es un
   icono reconocible y cambiarle el color le quita justo lo que lo hace
   reconocible de un vistazo. Es la única excepción de color del sitio. */
.web-wa {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(28,27,24,.28);
  transition: transform .12s ease, box-shadow .12s ease;
}
.web-wa:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(28,27,24,.32);
}
.web-wa:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; }

/* SE APARTA CUANDO ESTÁ EL AVISO DE COOKIES, que ocupa la parte baja de la
   pantalla: si no, el botón queda encima del texto legal y del propio «OK». El
   selector mira si el aviso NO está oculto, así que en cuanto se acepta la
   cookie el botón baja solo a su sitio. */
.web-cookies:not([hidden]) ~ .web-wa,
body:has(.web-cookies:not([hidden])) .web-wa { bottom: 148px; }

@media (max-width: 560px) {
  /* EL BOTÓN SUBE 50 px EN MÓVIL, y no es capricho de composición.

     A 14 px del borde ocupaba la franja x 281-331, y la columna de puntos de la
     clasificación cae en x 290-309: cualquier fila que quedase a la altura del
     botón se leía con los puntos tapados. Y los puntos son la razón de abrir una
     clasificación.

     Subirlo NO hace desaparecer el solapamiento —un botón fijo siempre tapa algo
     de lo que pasa por debajo—, pero lo saca de la esquina inferior derecha, que
     es donde termina de leerse una tabla larga y donde además cae el pulgar. La
     última fila, que antes era la que más se tapaba, queda libre.

     Los 64 px salen de la cuenta, no de la vista: 14 de margen original + los 50
     del propio botón, o sea justo su propia altura por encima de donde estaba.

     Y NO VALE DEJARLO ABAJO Y HACERLO MÁS PEQUEÑO, que era la otra idea: la
     tabla llega hasta x=329 y un botón de 44 px pegado al borde ocuparía 308-352,
     con la columna de puntos entre 305 y 329. La seguiría tapando casi entera.
     En una pantalla de 360 no hay sitio a la derecha de una tabla que usa todo el
     ancho: o el botón sube, o muerde el último dato.

     Lo que sí se aprovecha de esa idea es el tamaño: 44 px —el mínimo táctil— en
     vez de 50, y pegado al borde. Ocupa menos alto de cabecera cuando pasa por
     encima de una, y a cambio no pierde nada: sigue siendo tocable con el pulgar
     y sigue estando donde se le busca. */
  .web-wa { right: 8px; bottom: 64px; width: 44px; height: 44px; }
  body:has(.web-cookies:not([hidden])) .web-wa { bottom: 190px; }
}

/* Quien prefiere menos movimiento no tiene por qué ver el salto del hover. */
@media (prefers-reduced-motion: reduce) {
  .web-wa { transition: none; }
  .web-wa:hover { transform: none; }
}

/* --- Aviso de cookies ----------------------------------------------------- */

.web-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--blue-ink);
  color: rgba(255,255,255,.9);
  padding: var(--space-4) var(--space-5);
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: 0 -4px 16px rgba(28,27,24,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.web-cookies[hidden] { display: none; }
.web-cookies p { margin: 0; max-width: 78ch; }
.web-cookies__acciones { display: flex; align-items: center; gap: var(--space-4); }
.web-cookies a { color: #fff; text-decoration: underline; font-size: 13px; }


/* ==========================================================================
   LAS PÁGINAS DE COMPETICIÓN

   Nueve secciones —clasificación, resultados, calendario, goleadores,
   sanciones, deportividad, MVP, fase final y actualidad— que comparten una
   sola plantilla, `liga.php`, y por tanto estos estilos.

   LA REGLA QUE MANDA AQUÍ ES LA DEL DESBORDAMIENTO, y ya mordió una vez en el
   menú: cuando un eje del `overflow` vale `auto`, el otro se computa `auto`
   también — no existe un `overflow-x: auto` con `overflow-y: visible`. Así que
   la tabla ancha se desplaza DENTRO de `.liga-scroll`, que es un contenedor
   suyo y solo suyo: nada que cuelgue vive ahí dentro.
   ========================================================================== */

.liga {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}

/* --- Cabecera de la competición ------------------------------------------ */

.liga-cabecera { margin-bottom: var(--space-5); }
.liga-cabecera h1 {
  margin: var(--space-2) 0 0;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  line-height: 1.2;
  color: var(--blue-ink);
}

/* --- Las nueve pestañas --------------------------------------------------- */

/* Se envuelven en varias líneas en vez de desplazarse en horizontal: una
   pestaña que hay que arrastrar para descubrir es una pestaña que no existe
   para quien no sabe que está ahí. Y un `overflow-x` aquí volvería a recortar
   por abajo, como pasó en el menú. */
/* La barra es una fila: las pestañas a la izquierda y la lupa al final. El
   `flex-wrap` deja que la lupa caiga sola a otro renglón cuando no cabe, en vez
   de apretar las pestañas. */
.liga-tabs {
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--warm-200);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
}
.liga-tabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.liga-tabs__enlace {
  display: block;
  padding: 9px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 3px solid transparent;
}
.liga-tabs__enlace:hover { background: var(--surface-sunken); color: var(--blue); }
.liga-tabs__enlace.is-activo {
  color: var(--blue-ink);
  background: var(--surface-card);
  border-bottom-color: var(--green);
}

/* La lupa. Va con el mismo alto tocable que una pestaña y en verde, que es el
   color de las acciones del sitio: no es una sección más de la competición. */
.liga-tabs__buscar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--green);
  min-height: 44px;
}
.liga-tabs__buscar:hover { color: var(--blue-ink); }

/* --- El buscador ---------------------------------------------------------- */

.buscador { margin-bottom: var(--space-6); }
.buscador__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
/* La caja y el botón en fila, y el campo se come el hueco que quede. En un
   móvil el botón cae debajo con `flex-wrap` y ocupa todo el ancho. */
.buscador__caja { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.buscador__caja input {
  flex: 1 1 220px;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 16px; /* 16 px o iOS hace zoom al enfocar el campo. */
  color: var(--text-body);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  min-height: 44px;
}
.buscador__caja input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

.buscador__titulo { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--fs-lg); }
.buscador__cuenta { font-size: 14px; font-weight: 400; color: var(--text-muted); }

.buscador__lista { list-style: none; margin: 0; padding: 0; }
.buscador__lista li { border-bottom: 1px solid var(--border-subtle); }
.buscador__lista a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  min-height: 44px;
  color: var(--blue-ink);
  font-weight: 600;
}
.buscador__lista img { flex: 0 0 auto; }
.buscador__equipo { display: block; font-size: 14px; font-weight: 400; color: var(--text-muted); }
.buscador__mas { margin: var(--space-3) 0 0; font-size: 14px; color: var(--text-muted); }

/* --- Bloques -------------------------------------------------------------- */

.liga-bloque { margin-bottom: var(--space-7); }
.liga-bloque__seccion {
  font-size: var(--fs-lg);
  color: var(--blue-ink);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--green-100);
}
.liga-bloque__titulo {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin: var(--space-5) 0 var(--space-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* CADA JORNADA ES UNA TARJETA, y no un titular suelto encima de una tabla.

   Lo pidió Joaquín y tenía razón: con veinte jornadas seguidas, un `<h3>` con
   margen no basta para saber dónde acaba una y empieza la siguiente — sobre
   todo cuando las tablas son de dos o tres filas y todas se ven igual. Con la
   caja cerrada y la cabecera con fondo, el bloque se distingue de un vistazo y
   el ojo sabe qué partidos van juntos. */
.liga-jornada {
  margin-bottom: var(--space-5);
  border: 1px solid var(--warm-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-card);
}
.liga-jornada__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--warm-200);
}
/* La semana en curso, destacada. En el calendario es la que se viene a mirar:
   con cuatro semanas cargadas, no debería haber que calcular cuál es la de hoy. */
.liga-jornada--ahora { border-color: var(--green); box-shadow: 0 0 0 1px var(--green-100); }
.liga-jornada--ahora .liga-jornada__cabecera { background: var(--green-50); border-bottom-color: var(--green-100); }

.liga-jornada__cabecera h3 {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--blue-ink);
  font-weight: 700;
}

.liga-vacio {
  color: var(--text-muted);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}
.liga-nota {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin: var(--space-2) 0 0;
}

/* --- Las tablas ----------------------------------------------------------- */

/* QUE SE VEA QUE LA TABLA SE DESPLAZA.

   Un `overflow-x: auto` a secas funciona y nadie lo descubre: en iOS y en
   Android la barra de desplazamiento es superpuesta —aparece al arrastrar y se
   desvanece—, así que una tabla cortada por el borde derecho se lee como una
   tabla que acaba ahí. Y lo que quedaba fuera no era decoración: eran la hora y
   la pista del próximo partido.

   La pista es una sombra en cada borde que solo se ve cuando hay algo más allá.
   El truco son los cuatro fondos de `background-image`: los dos primeros van
   pegados al contenedor (`local`) y tapan la sombra cuando se llega al final del
   recorrido; los dos degradados van pegados al marco (`scroll`) y asoman en
   cuanto queda contenido por ese lado. Es CSS y solo CSS: no hay ningún oyente
   de `scroll` que mantener. */
.liga-scroll {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--surface-card) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left,  var(--surface-card) 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0    50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) right center;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
  /* El arrastre con el dedo, con freno: sin esto el desplazamiento lateral se
     siente ajeno al resto de la página en iOS. */
  -webkit-overflow-scrolling: touch;
}

.liga-tabla {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--surface-card);
  font-size: var(--fs-sm);
}
.liga-tabla th {
  background: var(--blue-100);
  color: var(--blue-ink);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: left;
  padding: 8px 10px;
  white-space: nowrap;
}
.liga-tabla td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--warm-100);
  vertical-align: middle;
}
.liga-tabla tbody tr:hover { background: var(--surface-sunken); }

.liga-tabla__num   { text-align: center; white-space: nowrap; }

/* Las dos versiones de una cabecera larga: entera en escritorio y abreviada en
   móvil. Se pintan LAS DOS en el HTML y el CSS enseña la que toca, porque la
   decisión depende del ancho de la pantalla y eso el PHP no lo sabe. El `title`
   del `<th>` lleva siempre el nombre completo. */
.liga-th-largo { display: inline; }
.liga-th-corto { display: none; }

/* LAS CABECERAS DE LAS COLUMNAS NUMÉRICAS TAMBIÉN VAN CENTRADAS, y hace falta
   decirlo con el elemento delante.

   Es un fallo mío del 8-ago que vio Joaquín en la ficha de jugador: `.liga-tabla
   th` fija `text-align: left` y su especificidad (0-1-1) gana a la de
   `.liga-tabla__num` (0-1-0), así que el rótulo se quedaba pegado a la izquierda
   mientras sus valores iban centrados — «JORNADA» a 12 px de sus números y
   «JUGÓ» a 36 px de los suyos, medido en el subdominio.

   No es solo de las fichas: afecta a la clasificación, a goleadores, a
   sanciones, a deportividad y al MVP, o sea a todas las tablas del sitio que
   tienen columnas de números. */
.liga-tabla th.liga-tabla__num   { text-align: center; }
.liga-tabla th.liga-tabla__ficha { text-align: right; }
.liga-tabla__dato  { color: var(--text-muted); white-space: nowrap; font-size: 12px; line-height: 1.35; }
.liga-tabla__dato b { color: var(--text-body); font-weight: 600; }
/* La segunda línea SÍ puede envolver: ahí va la pista y, cuando toca, el aviso
   de aplazado, y con `nowrap` el aviso se salía de la celda. */
.liga-tabla__dato span { display: block; white-space: normal; }
.liga-tabla__ficha { text-align: right; white-space: nowrap; }
.liga-tabla__forma { white-space: nowrap; }
.liga-tabla__equipo a,
.liga-tabla__jugador a { color: var(--blue); text-decoration: none; }
.liga-tabla__equipo a:hover,
.liga-tabla__jugador a:hover { text-decoration: underline; }

/* --- La tabla de partidos ------------------------------------------------- */

/* `table-layout: fixed` ES EL ARREGLO, y no una preferencia de estilo.

   Sin él, cada jornada —que es su propia <table>— reparte las columnas según
   SUS nombres de equipo, así que el marcador cae a una distancia distinta en
   cada bloque y hay que ir buscándolo. Con los anchos declarados, todos los
   resultados de la página caen en la misma vertical y el ojo baja en línea
   recta. Lo cazó Joaquín leyendo la página, que es donde se ven estas cosas. */
.liga-tabla--partidos { table-layout: fixed; min-width: 680px; }

.liga-tabla--partidos td:nth-child(2) { width: 88px; }   /* marcador  */
.liga-tabla--partidos td:nth-child(4) { width: 148px; }  /* cuándo    */
.liga-tabla--partidos td:nth-child(5) { width: 92px; }   /* ficha     */
/* Las dos columnas sin ancho se reparten lo que queda a partes iguales, así
   que el marcador queda EXACTAMENTE en el centro. */

/* EL FLEX VA EN UN ENVOLTORIO, NUNCA EN EL `<td>`.

   Ponerlo en la celda es lo que hice primero y estaba mal: un `<td>` que deja de
   ser `table-cell` pierde el estiramiento a la altura de la fila, así que su
   `border-bottom` se pinta al final de su propio contenido. El resultado eran
   rayas de separación a distinta altura dentro de la misma fila — evidentísimo
   en las filas altas, como la de un partido aplazado. Lo vio Joaquín.

   Con el envoltorio se consigue lo que se quería —camiseta y nombre centrados
   entre sí aunque el nombre ocupe dos líneas— sin romper la tabla. */
.liga-linea { display: flex; align-items: center; gap: 6px; line-height: 1.25; }
.liga-linea--fin { justify-content: flex-end; }
.liga-linea .liga-camiseta,
.liga-linea .liga-foto { margin: 0; }

.liga-tabla__equipo--local { text-align: right; }

/* El ganador, en negrita: en una lista de treinta partidos es lo primero que se
   busca, y hasta ahora había que comparar los dos números. */
.liga-tabla__equipo.is-gana a,
.liga-tabla__equipo.is-gana .liga-equipo { font-weight: 700; color: var(--blue-ink); }

/* Tres columnas: goles del local pegados al guion, guion en el centro exacto, y
   goles del visitante. Así el separador cae en la misma vertical en toda la
   página, y un «10 – 1» no descoloca la fila respecto a un «3 – 2». */
.liga-marcador {
  display: grid;
  /* `minmax(0, 1fr)` Y NO `1fr` A SECAS, que es lo que había.
     `1fr` equivale a `minmax(auto, 1fr)`, o sea que la columna nunca baja del
     ancho de su contenido: en una celda estrecha, un «10» ensancha su lado y
     empuja el guion, así que el separador dejaba de caer en la misma vertical
     que el «3 – 2» de la fila de arriba. Con el mínimo a cero las dos columnas
     son de verdad iguales y el guion queda clavado en el centro.
     Medido en la ficha de jugador el 9-ago: tres verticales distintas en una
     misma tabla, 367, 370 y 372. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue-ink);
  white-space: nowrap;
}
.liga-marcador b:first-of-type { text-align: right; }
.liga-marcador b:last-of-type  { text-align: left; }
.liga-marcador i { font-style: normal; color: var(--warm-400); margin: 0 5px; font-weight: 400; }
.liga-marcador--pendiente {
  display: block;
  text-align: center;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* La semana de descanso. Se queda en la tabla —es calendario— pero no compite
   con los partidos de verdad: fila atenuada y un rótulo en el sitio del
   marcador, para que se vea de un vistazo que esa semana no se juega. */
.liga-tabla tr.is-descanso { background: var(--surface-sunken); }
.liga-tabla tr.is-descanso td { color: var(--text-muted); }
.liga-tabla tr.is-descanso .liga-equipo { color: var(--text-muted); font-weight: 400; }
.liga-tabla tr.is-descanso .liga-camiseta { opacity: .45; }

/* El 5-0 de una incomparecencia. Se marca por lo mismo que el descanso —es un
   resultado que no se jugó— pero de otra manera: la fila NO se atenúa, porque
   ese resultado sí cuenta para la clasificación y para el balance de los dos
   equipos. Lo que se señala es quién no se presentó, junto a su nombre. */
.liga-tabla tr.is-nopresentado { background: var(--form-loss-100); }
.liga-aviso--nopresentado {
  margin-left: 6px;
  background: transparent;
  color: var(--form-loss);
  border: 1px solid currentColor;
  font-weight: 700;
}

.liga-descansa {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm, 4px);
  background: var(--warm-100);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

.liga-camiseta { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin-right: 6px; }

/* La foto del jugador NO se recorta ni se redondea: los ficheros de
   `players/web/` son ilustraciones verticales de 280×350 —de cuerpo entero— y
   un círculo con `object-fit: cover` se queda con el centro, o sea con el torso
   y sin cabeza. Se respeta su proporción 4:5 y se ve entera, como hace la web
   viva con `.player-table`. */
.liga-foto     { width: 28px; height: 35px; object-fit: contain; vertical-align: middle; margin-right: 6px; }

.liga-ficha {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
}
.liga-ficha:hover { background: var(--blue-100); }

.liga-aviso {
  display: inline-block;
  background: var(--form-draw-100);
  color: #8a6200;
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
}

/* «Adelantado» va en azul y no en el ámbar de «Aplazado»: son los dos sentidos
   de la misma marca `postponed`, y con el mismo color habría que leer la palabra
   para saber cuál es. El ámbar avisa de algo que se retrasa; esto no se retrasa,
   se adelanta — y en una lista de treinta partidos esa diferencia es justo la
   que se busca de un vistazo. */
.liga-aviso--antes { background: var(--blue-100); color: var(--blue-ink); }

/* Las franjas de ascenso y descenso de la clasificación. Llevan un borde a la
   izquierda ADEMÁS del fondo: el color por sí solo no vale para quien no
   distingue el verde del rojo, que son justamente estos dos. */
.liga-tabla tr.is-sube { background: var(--green-50); box-shadow: inset 3px 0 0 var(--green); }
.liga-tabla tr.is-baja { background: var(--form-loss-100); box-shadow: inset 3px 0 0 var(--form-loss); }

/* El estado de forma: los cinco últimos, del más antiguo al más reciente. */
.liga-forma {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  margin-right: 2px;
}
.liga-forma--g { background: var(--form-win); }
.liga-forma--e { background: var(--form-draw); }
.liga-forma--p { background: var(--form-loss); }

/* --- Actualidad ----------------------------------------------------------- */

/* Las tarjetas de actualidad son LAS MISMAS que las de la home: `.web-noticias`
   y `.web-noticia`, definidas más arriba. No hay estilos propios aquí a
   propósito — son el mismo objeto (una notificación de portada) visto desde otra
   página, y tener dos versiones fue justo el descuido que señaló Joaquín. */

/* --- Las páginas de error ------------------------------------------------- */

.web-error {
  max-width: 620px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  text-align: center;
}
.web-error h1 { color: var(--blue-ink); }
.web-error p { color: var(--text-muted); }
.web-error .scorpio-btn { margin: 0 4px; }

/* --- Móvil ---------------------------------------------------------------- */

@media (max-width: 700px) {
  .liga { padding: var(--space-5) var(--space-4) var(--space-7); }

  /* La ficha de la reserva pasa a una columna, con la foto debajo de los datos:
     en un móvil, 200 px de foto al lado dejarían la lista en la mitad del ancho
     y cada dato en tres renglones. */
  .reserva-ficha { grid-template-columns: 1fr; padding: var(--space-4); }

  /* Las tres columnas de estadística fina del pichichi se caen en móvil: la
     tabla ya tiene que desplazarse para verse entera, y lo que se busca ahí es
     cuántos goles lleva cada uno. */
  .liga-tabla__extra { display: none; }

  /* LA EQUIPACIÓN SE CAE EN LAS TABLAS DE ESTADÍSTICA, NO EN LAS DE PARTIDOS.

     El criterio es de Joaquín (11-ago-2026) y es el bueno: el color de la
     camiseta sirve para RECONOCER A UN RIVAL EN LA PISTA, así que en el
     calendario —donde se mira contra quién se juega el jueves— es información;
     en el pichichi, en las sanciones o en el acta de un partido de hace tres
     meses es un adorno que se come 26 px por equipo, y esos 26 px estaban
     empujando fuera de la pantalla columnas que sí importan.

     La regla se escribe en negativo —todas menos la de partidos— a propósito:
     así una tabla nueva nace sin la equipación en móvil, que es lo que debe pasar
     por defecto. Las tablas de partidos son las de resultados, calendario y la
     ficha de equipo, y las tres comparten el mismo modificador. */
  .liga-tabla:not(.liga-tabla--partidos) .liga-camiseta { display: none; }

  /* Las cabeceras largas, abreviadas. El cambio de las dos versiones se hace
     aquí y no en el PHP porque depende del ancho, que es cosa del CSS. */
  .liga-th-largo { display: none; }
  .liga-th-corto { display: inline; }

  /* El acta NO se corrige aquí, sino al final del fichero: su definición base
     viene después de este bloque y le ganaba por orden de lectura. Ver allí. */

  /* LA FORMA SE CAE EN MÓVIL, y es lo que devuelve los puntos a la pantalla.

     Sus cinco chapas ocupan 126 px, y con ellas la clasificación mide 494 en un
     contenedor de 328: la columna PT —los puntos, o sea la razón de mirar una
     clasificación— quedaba fuera de la pantalla en cualquier móvil. La racha es
     un extra; el punto, no. */
  .liga-tabla__forma { display: none; }

  /* SIN MÍNIMO DE PARTIDA: que cada tabla pida lo que necesite.

     `min-width: 0` ANULA EL 560px DE LA CLASE BASE, y hay que escribirlo: el
     valor de escritorio (`.liga-tabla`, arriba) es 560, y lo que había aquí era
     un 420 que solo lo rebajaba. Borrar la línea sin poner nada no libera la
     tabla, la deja en los 560 de escritorio —peor que antes—. Medido en el banco
     de pruebas: 560 px de tabla en un contenedor de 328.

     El 420 tampoco venía del contenido: era un mínimo artificial que a
     goleadores y a deportividad les empujaba la última columna —«Goles» y
     «Rojas»— al 100 % fuera de la pantalla. Las cabeceras ya llevan `nowrap`,
     así que ninguna tabla puede comprimirse por debajo de lo que ocupa su propio
     texto: quitar el mínimo no las aplasta, solo deja de estirarlas. Las que de
     verdad necesitan más lo siguen declarando una a una, abajo. */
  .liga-tabla { min-width: 0; font-size: 13px; }
  .liga-tabla th, .liga-tabla td { padding: 6px 7px; }

  /* Las columnas de números, más estrechas: son siete en la clasificación y ahí
     cada píxel de relleno se multiplica por catorce.

     EL HUECO REAL SON 313 px, NO 328. Medido en el subdominio, en la página de
     verdad: el banco de pruebas daba 328 porque no tenía el relleno lateral de
     `.liga` ni la barra de desplazamiento vertical de una página larga. Con
     7 px de relleno la tabla medía 320 y se quedaba a 7 de caber —y PT es justo
     la última columna—. Con 2 px mide 292 y entra con 21 px de margen, que hace
     falta: no todas las ligas tienen los mismos números, y un GF de tres cifras
     ensancha su columna.

     El selector lleva el elemento delante A PROPÓSITO: `.liga-tabla th` y
     `.liga-tabla td` puntúan 0-1-1 y le ganarían a un `.liga-tabla__num` a
     secas. Es el mismo tropiezo que ya documenta la regla del alineado. */
  .liga-tabla th.liga-tabla__num,
  .liga-tabla td.liga-tabla__num { padding-left: 2px; padding-right: 2px; }

  /* Las celdas, tocables: 44 px es el mínimo de la guía de Apple y de Google, y
     estas filas llevan enlaces dentro. */
  .liga-tabla td { height: 44px; }

  /* TOPE A LAS COLUMNAS DE TEXTO, por la misma razón que en la clasificación:
     sin él, una columna con nombres se estira hasta que el más largo quepa en
     una línea, y se lleva por delante la última columna de la tabla —que es
     justo el dato que se viene a mirar—. Medido tras el despliegue: goleadores
     se pasaba 17 px y escondía «Goles», deportividad 7 y escondía «Rojas», y el
     acta 11. Con el tope, el nombre envuelve en dos renglones y las tres caben.

     La clasificación tiene el suyo propio, más generoso, porque solo lleva una
     columna de texto y le sobra sitio. */
  .liga-tabla__equipo,
  .liga-tabla__jugador { max-width: 108px; }

  /* LAS DOS PRIMERAS COLUMNAS DE LA CLASIFICACIÓN SE QUEDAN QUIETAS.

     Aun sin la forma, la tabla se sigue desplazando un poco, y al arrastrarla
     la posición y el nombre del equipo salían de la pantalla: quedaban nueve
     filas de números sin dueño, imposibles de atribuir. Con `sticky` el número
     y el equipo se quedan pegados a la izquierda mientras el resto pasa por
     debajo.

     El fondo tiene que ser OPACO y estar declarado aquí: la celda viaja por
     encima de las demás, y sin fondo propio se le transparenta lo que pasa por
     detrás. Y el `z-index` va en la celda, no en la fila, porque el contexto de
     apilamiento lo crea cada `sticky`. */
  /* LOS DOS ANCHOS VAN FIJOS, y de ahí sale el `left` del pegado.

     El de la posición porque el `left: 34px` que tenía el equipo era un número
     a ojo, y la columna mide 29: el pegado quedaba descuadrado. Con la posición
     fijada en 30, el equipo se pega exactamente donde acaba.

     El del equipo porque sin tope la columna se estira hasta donde el nombre
     más largo quepa en una línea, y eso desborda la tabla en las ligas que
     tienen uno largo: en 2ª de césped, «ALVAR FRANKFURT CLUB» la llevaba a
     192 px y la tabla entera a 363 en un hueco de 309, mientras que las otras
     tres ligas cabían de sobra. Con el tope el nombre envuelve en dos renglones
     —que en un móvil es lo natural— y la tabla cabe en las cuatro. La cuenta:
     30 de posición + 132 de equipo + 142 de las siete columnas de números. */
  .liga-tabla--clasificacion th:first-child,
  .liga-tabla--clasificacion td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 30px;
  }
  .liga-tabla--clasificacion th:nth-child(2),
  .liga-tabla--clasificacion td:nth-child(2) {
    position: sticky;
    left: 30px;
    z-index: 2;
    max-width: 132px;
  }
  .liga-tabla--clasificacion td:first-child,
  .liga-tabla--clasificacion td:nth-child(2) { background: var(--surface-card); }
  .liga-tabla--clasificacion th:first-child,
  .liga-tabla--clasificacion th:nth-child(2) { background: var(--blue-100); }
  /* Las franjas de ascenso y descenso pintan la fila entera, así que las dos
     celdas fijas tienen que repetir su color o la franja se corta al arrastrar. */
  .liga-tabla--clasificacion tr.is-sube td:first-child,
  .liga-tabla--clasificacion tr.is-sube td:nth-child(2) { background: var(--green-50); }
  .liga-tabla--clasificacion tr.is-baja td:first-child,
  .liga-tabla--clasificacion tr.is-baja td:nth-child(2) { background: var(--form-loss-100); }

  /* ======================================================================
     LA FILA DE PARTIDO DEJA DE SER UNA FILA Y PASA A SER UNA TARJETA.

     ES EL ARREGLO MÁS IMPORTANTE DE TODA LA REVISIÓN DE MÓVIL. La tabla mide
     560 px en un hueco de 307, o sea 253 fuera, y lo que se quedaba fuera no
     era decoración: la fecha, la hora, la pista y el enlace a la ficha del
     partido. Un jugador entra el mismo día a saber a qué hora y dónde juega, y
     ese era justo el dato invisible. Y no lo salvaba el desplazamiento lateral,
     porque en resultados hay dieciocho tablas independientes —una por jornada—
     y había que arrastrar cada una por separado.

     EL PATRÓN SALE DE `docs/maquetas/ficha-jugador-movil.png`, que ya resuelve
     esto en «Sus partidos»: cuando no hay ancho, lo que en escritorio son
     columnas se apila dentro de la fila. Aquí queda:

         ÚLTIMO BAILE   3 – 0   LA SELEÇÃO
         Ju 09/04 · Pista 1          Partido →

     `display: grid` sobre el `<tr>` desmonta la rejilla de la tabla, así que
     todo lo que dependía de ella —`table-layout: fixed`, los `width` de las
     celdas, el `min-width`— deja de tener efecto y hay que anularlo a mano; si
     no, quedan reglas muertas que el siguiente que lea el fichero creerá vivas.
     ====================================================================== */
  .liga-tabla--partidos,
  .liga-tabla--partidos tbody { display: block; min-width: 0; }

  .liga-tabla--partidos tr {
    display: grid;
    /* Los dos equipos se reparten lo que sobra del marcador, y por eso las dos
       columnas de fuera son `1fr` y la del medio `auto`: el guion cae en el
       centro real de la tarjeta aunque un nombre sea largo y el otro corto. */
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "local marcador visitante"
      "datos datos    ficha";
    align-items: center;
    gap: 6px 8px;
    padding: 10px;
    border-bottom: 1px solid var(--warm-100);
  }
  .liga-tabla--partidos tr:last-child { border-bottom: 0; }

  .liga-tabla--partidos td {
    display: block;
    /* El alto de 44 px es de las tablas que siguen siendo tablas: aquí lo pone
       la tarjeta entera, y en una celda suelta abriría huecos. */
    height: auto;
    padding: 0;
    border: 0;
  }

  .liga-tabla--partidos td:nth-child(1) { grid-area: local;     text-align: right; }
  .liga-tabla--partidos td:nth-child(2) { grid-area: marcador;  text-align: center; }
  .liga-tabla--partidos td:nth-child(3) { grid-area: visitante; text-align: left; }
  .liga-tabla--partidos td:nth-child(4) { grid-area: datos; }
  .liga-tabla--partidos td:nth-child(5) { grid-area: ficha;     text-align: right; }

  /* La segunda línea es de servicio: más pequeña y apagada, para que el
     marcador siga siendo lo primero que se ve al bajar por la lista. */
  .liga-tabla--partidos .liga-tabla__dato { font-size: 12px; line-height: 1.35; }
  /* La pista vuelve a la línea de la fecha, separada por un punto volado. Y va
     en una pieza: «Césped 1» partido en dos renglones —«Césped» arriba y «1»
     abajo— se lee como si la pista fuera otra. */
  .liga-tabla--partidos .liga-tabla__dato span { display: inline; white-space: nowrap; }
  .liga-tabla--partidos .liga-tabla__dato span::before { content: ' · '; }

  /* El enlace a la ficha, tocable de verdad: es el único destino de la tarjeta
     y estaba fuera de la pantalla al 100 % en todos los móviles. */
  .liga-tabla--partidos .liga-tabla__ficha a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
  }

  /* El nombre del equipo envuelve en dos renglones en vez de estirar la tarjeta:
     «FERRETERÍAS HNOS. JIMÉNEZ» no cabe de una pieza en un móvil de 360. */
  .liga-tabla--partidos .liga-tabla__equipo { white-space: normal; }

  .liga-marcador { font-size: 1rem; }
}


/* --- El carril lateral de la competición ---------------------------------- */

/* Dos columnas en escritorio, una debajo de otra en móvil. El carril va DESPUÉS
   del contenido en el HTML y lo trae aquí el grid: el orden del documento es el
   que recorre un teclado, y ahí manda la tabla. */
.liga__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 981px) {
  .liga__grid { grid-template-columns: minmax(0, 1fr) 300px; }
}

.liga__carril { display: flex; flex-direction: column; gap: var(--space-5); }

.liga-caja {
  background: var(--surface-card);
  border: 1px solid var(--warm-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.liga-caja h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-base);
  color: var(--blue-ink);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--green-100);
}
.liga-caja__vacio { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.liga-caja__pie   { color: var(--text-muted); font-size: 11.5px; margin: var(--space-2) 0 0; text-align: right; }

.liga-caja__datos { width: 100%; border-collapse: collapse; font-size: 13px; }
.liga-caja__datos th {
  text-align: left;
  font-weight: 400;
  color: var(--text-muted);
  padding: 5px 0;
  border-bottom: 1px solid var(--warm-100);
}
.liga-caja__datos td {
  text-align: right;
  padding: 5px 0;
  border-bottom: 1px solid var(--warm-100);
  white-space: nowrap;
}
.liga-caja__datos td span { color: var(--text-muted); font-size: 11.5px; margin-left: 4px; }
.liga-caja__datos tr:last-child th,
.liga-caja__datos tr:last-child td { border-bottom: 0; }

/* La tabla de menos goleados sí lleva encabezados de columna, y su primera
   columna es texto que puede envolver. */
.liga-caja__datos--lista thead th {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--blue-ink);
}
.liga-caja__datos--lista td { text-align: left; white-space: normal; }
.liga-caja__datos--lista td.liga-tabla__num { text-align: center; white-space: nowrap; }
.liga-caja__datos--lista a { color: var(--blue); text-decoration: none; }
.liga-caja__datos--lista a:hover { text-decoration: underline; }

.liga-proximos { list-style: none; margin: 0; padding: 0; }
.liga-proximos li {
  padding: 7px 0;
  border-bottom: 1px solid var(--warm-100);
  font-size: 13px;
}
.liga-proximos li:last-child { border-bottom: 0; }
.liga-proximos__cuando {
  display: block;
  color: var(--green-ink);
  font-weight: 600;
  font-size: 11.5px;
}
.liga-proximos__quien { display: block; color: var(--text-body); }

/* La tarjeta de la bolsa es la misma que la de la home y la landing, así que
   solo se ajusta para que llene el ancho del carril. */
.liga__carril .web-cta { margin: 0; }


/* --- La previsión del tiempo del carril ----------------------------------- */

.liga-tiempo__cuando {
  margin: 0 0 var(--space-3);
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
.liga-tiempo__cuando b { color: var(--blue-ink); }
.liga-tiempo__cuando span { color: var(--text-body); }

.liga-tiempo { display: flex; align-items: center; gap: var(--space-3); }
.liga-tiempo__icono { width: 60px; height: 60px; flex: 0 0 auto; }
.liga-tiempo__grados { display: block; font-size: 1.5rem; color: var(--blue-ink); line-height: 1.1; }
.liga-tiempo__desc   { display: block; font-size: 13px; color: var(--text-body); text-transform: capitalize; }
.liga-tiempo__nubes  { display: block; font-size: 11.5px; color: var(--text-muted); }


/* ==========================================================================
   LAS FICHAS: EQUIPO, JUGADOR Y PARTIDO

   Reutilizan la carcasa de las páginas de competición —`.liga`, `.liga__grid`,
   `.liga-tabla`, `.liga-caja`— porque son el mismo tipo de página: una columna
   de tablas y un carril de apoyo. Aquí solo está lo que ellas no tienen.
   ========================================================================== */

/* --- Las pestañas de competición ------------------------------------------ */

/* NO SON `.liga-tabs`, y la diferencia no es estética: aquellas son enlaces a
   nueve páginas distintas y estas cambian de bloque dentro de la misma. De ahí
   el aspecto de pestaña cerrada, con su borde, en vez del subrayado de sección.

   Sin JavaScript se ven exactamente igual y funcionan como anclas: llevan a su
   bloque, que está pintado más abajo. Ver `ficha_pestanas()` y `fichas.js`. */
.ficha-tabs {
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--warm-200);
}
.ficha-tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ficha-tabs__enlace {
  display: block;
  padding: 9px var(--space-4);
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.ficha-tabs__enlace:hover { background: var(--surface-sunken); color: var(--blue); }
.ficha-tabs__enlace.is-activo {
  background: var(--surface-card);
  border-color: var(--warm-200);
  color: var(--blue-ink);
  /* Tapa la línea del contenedor: es lo que hace que la pestaña abierta se lea
     como una carpeta unida a su contenido y no como un botón suelto. */
  margin-bottom: -1px;
  padding-bottom: 10px;
}

/* --- El bloque de una competición ----------------------------------------- */

.ficha-comp { margin-bottom: var(--space-7); }
.ficha-comp[hidden] { display: none; }

.ficha-comp__titulo {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-lg);
  color: var(--blue-ink);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--green-100);
}
.ficha-comp__titulo span {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-muted);
}

/* CON LAS PESTAÑAS EN MARCHA EL TÍTULO SE APARTA DE LA VISTA, PERO NO SE BORRA.
   La pestaña ya dice de qué competición es el bloque, así que repetirlo justo
   debajo sobra; lo que no sobra es para un lector de pantalla, que anuncia este
   texto como nombre del panel al cambiar de pestaña (`aria-labelledby`).
   `display: none` lo quitaría también de ahí. */
.con-fichas-tabs .ficha-comp__titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ficha-bloque {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--fs-base);
  color: var(--blue-ink);
}
.ficha-comp > .ficha-bloque:first-of-type { margin-top: 0; }

.ficha-subbloque {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}

/* --- El resumen de competiciones ------------------------------------------ */

/* La primera columna lleva «2025/26 - Laborables Césped - Liga Primera División»
   y las diez restantes son números de una o dos cifras. Sin un ancho mínimo, el
   navegador reparte a partes iguales y el rótulo se parte en cinco líneas. */
.liga-tabla--resumen { min-width: 680px; }
.liga-tabla--resumen td:first-child,
.liga-tabla--resumen th:first-child { min-width: 260px; }

.liga-tabla--resumen tfoot th,
.liga-tabla--resumen tfoot td {
  border-top: 2px solid var(--warm-200);
  border-bottom: 0;
  padding: 9px 8px;
  color: var(--blue-ink);
}
.liga-tabla--resumen tfoot th { text-align: left; }

/* --- El carril de la ficha de equipo -------------------------------------- */

/* 16:9 DESDE EL 23-AGO-2026, antes 3/2. La proporción es la misma que la de las
   imágenes de publicación a propósito: la foto de un equipo se usa a veces como
   imagen de una noticia, y con las dos iguales es el mismo fichero y no hay que
   prepararlo dos veces. `TeamUpload` recorta ya a esta proporción al subir, así
   que en las fotos nuevas este `cover` no quita nada; sigue puesto por las 23
   anteriores, que son 4:3 y no se reescriben. */
.ficha-foto-equipo {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--warm-200);
  background: var(--surface-card);
}

/* El palmarés lo escribe a mano el delegado en el back office, así que aquí no
   se da por hecho ningún marcado: se ordenan los márgenes de lo que pueda
   llegar. Solo se dejan pasar <p>, <b>, <i> y listas — ver `ficha_palmares()`. */
.ficha-palmares { font-size: 13px; color: var(--text-body); line-height: 1.5; }
.ficha-palmares p { margin: 0 0 var(--space-2); }
.ficha-palmares p:last-child { margin-bottom: 0; }
.ficha-palmares b { color: var(--blue-ink); }
.ficha-palmares ul, .ficha-palmares ol { margin: 0 0 var(--space-2) var(--space-4); padding: 0; }

.ficha-trofeo { color: var(--green); vertical-align: -2px; margin-right: 4px; }

.ficha-antiguedad { margin: 0 0 var(--space-2); font-size: 13px; color: var(--text-body); }
.ficha-antiguedad:last-child { margin-bottom: 0; }
.ficha-antiguedad b { color: var(--blue-ink); }
.ficha-antiguedad span { display: block; color: var(--text-muted); font-size: 11.5px; }

.ficha-caja__contexto {
  margin: 0 0 var(--space-3);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
.ficha-caja__contexto b { color: var(--blue-ink); }

/* El marcador de la mayor victoria: los dos equipos a los lados y los goles en
   medio, como se lee un acta. En el carril no caben en una línea, así que la
   rejilla es de tres filas y el marcador manda en el centro. */
.ficha-marcador {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  text-align: center;
}
.ficha-marcador__equipo { font-size: 12px; color: var(--text-body); line-height: 1.25; }
.ficha-marcador .liga-marcador { font-size: 1.25rem; }

.ficha-redes { list-style: none; margin: 0; padding: 0; }
.ficha-redes li { padding: 6px 0; border-bottom: 1px solid var(--warm-100); font-size: 13px; }
.ficha-redes li:last-child { border-bottom: 0; }
.ficha-redes a { color: var(--blue); text-decoration: none; }
.ficha-redes a:hover { text-decoration: underline; }

/* --- La cabecera de la ficha de jugador ----------------------------------- */

/* Su foto, su equipo y sus totales, en una sola tarjeta y ANTES de las pestañas:
   no dependen de la competición que se elija abajo, son lo que lleva hecho. */
.ficha-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--warm-200);
  border-radius: var(--radius-lg);
}

/* La ilustración es de 280×350 y NO se recorta: se escala entera, con su
   proporción. Es el mismo cuidado que en las tablas de competición —un
   `object-fit: cover` en un círculo deja el torso y corta la cabeza—. */
.ficha-cabecera__foto .liga-foto {
  width: 96px;
  height: 120px;
  margin: 0;
}

.ficha-cabecera__datos { flex: 1 1 180px; min-width: 0; }

.ficha-cabecera__equipo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lg);
  font-weight: 700;
}
.ficha-cabecera__equipo a { color: var(--blue-ink); text-decoration: none; }
.ficha-cabecera__equipo a:hover { text-decoration: underline; }
.ficha-cabecera__equipo .liga-camiseta { width: 26px; height: 26px; margin: 0; }

.ficha-cabecera__menudo { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ficha-cabecera__menudo span { font-size: 13px; color: var(--text-muted); }
.ficha-cabecera__menudo b { color: var(--text-body); }

.ficha-cifras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ficha-cifra {
  min-width: 68px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  text-align: center;
}
.ficha-cifra b { display: block; font-size: 1.25rem; color: var(--blue-ink); line-height: 1.15; }
.ficha-cifra span { display: block; font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }

/* Las tarjetas llevan su color, que es el del reglamento y el que ya usa el
   resto del sitio: aquí se leen de un vistazo sin tener que leer el rótulo. */
.ficha-cifra--amarillas b { color: #8a6200; }
.ficha-cifra--azules b    { color: var(--blue); }
.ficha-cifra--rojas b     { color: var(--form-loss); }

/* --- Sus partidos --------------------------------------------------------- */

/* LOS DOS EQUIPOS Y EL MARCADOR EN EL CENTRO, igual que en resultados, y con
   `table-layout: fixed` por la misma razón que allí: sin anchos declarados el
   navegador reparte las columnas según el contenido de cada tabla, y con dos
   competiciones una debajo de otra los marcadores dejan de caer en la misma
   vertical. Es el fallo del 8-ago. */
/* 780 y no 820: con `table-layout: fixed` los anchos de abajo se comportan como
   proporciones en cuanto la tabla es más ancha que su mínimo, así que dejando el
   mínimo por debajo del carril (820 px) la tabla se estira sola y no aparece una
   barra de desplazamiento por dos píxeles de más. */
.liga-tabla--jugador { table-layout: fixed; min-width: 780px; }

/* Los anchos, columna a columna. Van en `<colgroup>` porque la cabecera lleva un
   `colspan` y con `table-layout: fixed` eso deja al navegador sin referencia
   —ver el comentario del propio `colgroup` en `ficha-jugador.php`—. A las dos
   columnas de equipo les queda lo suyo, que es lo que necesitan los nombres
   largos. */
.ficha-col--equipo   { width: 200px; }
.ficha-col--marcador { width: 74px; }
.ficha-col--cuando   { width: 102px; }
.ficha-col--jugo     { width: 80px; }
.ficha-col--goles    { width: 52px; }
.ficha-col--tarjeta  { width: 36px; }

/* La píldora de «Descansa» ocupa el sitio del marcador, y aquí esa columna es
   más estrecha que en la tabla de resultados (74 px frente a 88), así que se
   aprieta lo justo para no salirse de su celda. */
.liga-tabla--jugador .liga-descansa { padding: 2px 5px; font-size: 10px; letter-spacing: 0; }

/* El marcador ocupa TODA su celda, que tiene ancho fijo: así el guion cae en la
   misma vertical en las dos pestañas. Sin esto, la rejilla se ajusta al
   contenido y un «1 – 8» y un «10 – 1» dejan el separador a distinta altura —el
   mismo baile que se corrigió en resultados el 8-ago, aquí entre competiciones
   en vez de entre jornadas. */
.liga-tabla--jugador .liga-marcador { width: 100%; }

/* LAS DOS COLUMNAS DE EQUIPO SE QUEDAN CON EL RESTO —unos 240 px cada una— Y EL
   NOMBRE ENVUELVE POR PALABRAS.

   Las dos cosas son la corrección de un fallo del 9-ago, y en ese orden: con
   `table-layout: fixed`, un elemento flex no encoge por debajo de su contenido
   salvo que se le diga (`min-width: 0`), así que «AT. RETORNIÑO AZADA VERDE» se
   salía de su celda y se metía debajo del marcador. Y al arreglar eso con
   `overflow-wrap: anywhere` apareció el otro extremo: partía las palabras por
   donde caía —«RETOR NIÑO», «HYDRO PONIC»—, que se lee peor que el desbordado.

   `break-word` parte una palabra SOLO si no cabe entera en la línea, que es lo
   que se quiere: los nombres largos ocupan dos o tres líneas por sus espacios y
   ninguno se trocea. */
.liga-tabla--jugador .liga-linea { min-width: 0; }
.liga-tabla--jugador .liga-equipo { min-width: 0; overflow-wrap: break-word; }
.liga-tabla--jugador .liga-camiseta { flex: 0 0 auto; }

/* SU EQUIPO, MARCADO EN TODAS LAS FILAS. En resultados se destaca al ganador;
   aquí lo que hace falta es encontrar de qué lado estaba él, que unas veces es
   el local y otras el visitante. */
.liga-tabla--jugador .is-suyo a,
.liga-tabla--jugador .is-suyo .liga-equipo { font-weight: 700; color: var(--blue-ink); }

/* Jugó / no jugó, CON SU PALABRA. Un punto de color no dice nada por sí solo, y
   el `title` que lo explicaba no existe en un móvil. */
.ficha-estado {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.ficha-estado--si { background: var(--green-100); color: var(--green-ink); }
.ficha-estado--no { background: var(--warm-100);  color: var(--text-muted); }

@media (max-width: 700px) {
  /* LAS DOS TABLAS DE LAS FICHAS TAMPOCO LLEVAN MÍNIMO, por lo mismo que las de
     la competición: el `min-width` que había aquí no salía del contenido, era un
     número puesto a ojo, y dejaba fuera de la pantalla la última columna.

     Medido el 11-ago-2026 en un móvil de 360: la plantilla del equipo y la lista
     de partidos de un jugador se pasaban 251 px del hueco, y en la de jugador
     eso son 404 px ocultos de 732 —el 55 % de la tabla—, con la columna de
     «Partido» como única visible. Los anchos de `colgroup` se sueltan por el
     mismo motivo: son para que las tablas casen entre sí en escritorio, y en un
     móvil van una debajo de otra. */
  .liga-tabla--resumen { min-width: 0; table-layout: auto; }
  .liga-tabla--resumen col { width: auto; }

  .ficha-cabecera { gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .ficha-cabecera__foto .liga-foto { width: 72px; height: 90px; }
  .ficha-cifra { min-width: 58px; padding: 6px 8px; }
  .ficha-cifra b { font-size: 1.05rem; }
  /* La primera columna, con tope y SIN MÍNIMO. El `min-width: 260px` de la
     definición base es lo que mandaba aquí —un `min-width` gana siempre a un
     `max-width`, por muy pequeño que sea este— y esos 260 px de los 309 que hay
     no dejaban sitio para las columnas de números. Hay que anularlo antes de
     poner el tope, o el tope no hace nada. */
  .liga-tabla--resumen td:first-child,
  .liga-tabla--resumen th:first-child { min-width: 0; max-width: 130px; white-space: normal; }

  .ficha-tabs__enlace { padding: 8px var(--space-3); font-size: 13px; }
}

/* ESTA TABLA CAMBIA A 900px Y NO A 700, que es donde cambian todas las demás.
   No es una excepción caprichosa: es que sus nueve columnas miden 816 px de
   contenido, así que entre 701 y 900 —la tablet vertical— volvía a ser una
   tabla y se pasaba 111 px del hueco. Medido el 12-ago-2026 a 768: la ficha de
   jugador era la única plantilla del sitio que seguía cortada en una tablet.

   900 es además el umbral del menú (`:337`), así que la ficha pasa a escritorio
   a la vez que la cabecera en lugar de en un punto propio. */
@media (max-width: 900px) {
  /* El mínimo y los anchos del `colgroup`, sueltos. Son para que las tablas
     casen entre sí en escritorio, y aquí van una debajo de otra. Tienen que
     estar en ESTE media query y no en el de 700: con la tarjeta actuando hasta
     900 y el `min-width: 780px` vivo hasta 701, la tarjeta habría desbordado
     justo en la tablet que se venía a arreglar. */
  .liga-tabla--jugador { min-width: 0; table-layout: auto; }
  .liga-tabla--jugador col { width: auto; }

  /* ======================================================================
     «SUS PARTIDOS» TAMBIÉN ES UNA TARJETA

     Soltar el `min-width` (arriba) no bastaba, y conviene dejar escrito por
     qué, porque la medida engañó una vez: la tabla ya no arrastra un mínimo
     puesto a ojo, pero SUS NUEVE COLUMNAS MIDEN 528 px de puro contenido en
     un hueco de 313. Medido el 12-ago-2026 en un móvil de 360: **215 px
     fuera**, y lo que se queda fuera es la fecha, si jugó y sus goles — o
     sea, las tres cosas que se vienen a mirar aquí—. Solo se veía la
     columna «Partido». Y seguía cortada a 390, 414 y hasta en una tablet de
     768; solo entraba entera a partir de 900.

     El arreglo es el mismo que ya funciona en `.liga-tabla--partidos`
     noventa líneas más arriba, y sale de la misma maqueta
     (`docs/maquetas/ficha-jugador-movil.png`). Queda:

         ÚLTIMO BAILE   6 – 5   LA SELEÇAO
         09/04/2026 · J13 · Partido      JUGÓ
         Goles 2 · A 1

     La tercera línea solo aparece si hay algo que contar: las celdas sin
     valor se emiten vacías y aquí se esconden con `:empty`, así que un
     partido sin goles ni tarjetas no arrastra cuatro etiquetas en blanco.
     ====================================================================== */
  .liga-tabla--jugador,
  .liga-tabla--jugador tbody { display: block; }

  /* El `colgroup` y la cabecera dejan de tener sentido en cuanto el `<tr>` es
     una rejilla: los anchos ya no reparten nada y la fila de títulos quedaría
     encima de la lista sin corresponderse con ninguna columna. La cabecera se
     esconde con la técnica de siempre —fuera de la vista pero DENTRO del
     documento—, que la deja disponible para un lector de pantalla. */
  .liga-tabla--jugador colgroup { display: none; }
  .liga-tabla--jugador thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .liga-tabla--jugador tr {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "local marcador visitante"
      "datos datos    jugo";
    align-items: center;
    gap: 6px 8px;
    padding: 10px;
    border-bottom: 1px solid var(--warm-100);
  }
  .liga-tabla--jugador tr:last-child { border-bottom: 0; }

  .liga-tabla--jugador td {
    display: block;
    height: auto;
    padding: 0;
    border: 0;
  }

  .liga-tabla--jugador td:nth-child(1) { grid-area: local;     text-align: right; }
  .liga-tabla--jugador td:nth-child(2) { grid-area: marcador;  text-align: center; }
  .liga-tabla--jugador td:nth-child(3) { grid-area: visitante; text-align: left; }
  .liga-tabla--jugador td:nth-child(4) { grid-area: datos; }
  .liga-tabla--jugador td:nth-child(5) { grid-area: jugo;      text-align: right; }

  /* Goles, A, Az y R no llevan área: caen solas en la fila siguiente, en el
     orden en que vienen, y las que estén vacías ni se pintan. Con `auto` en
     lugar de un área fija, tres tarjetas y un gol no descuadran nada. */
  .liga-tabla--jugador td:nth-child(n+6) {
    grid-column: auto;
    justify-self: start;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
  }
  .liga-tabla--jugador td:nth-child(n+6):empty { display: none; }
  .liga-tabla--jugador td:nth-child(n+6)::before {
    content: attr(data-etq) " ";
    text-transform: uppercase;
    letter-spacing: .03em;
  }
  .liga-tabla--jugador td:nth-child(n+6) b { color: var(--blue-ink); }

  .liga-tabla--jugador .liga-tabla__dato { font-size: 12px; line-height: 1.35; }
  /* El enlace a la ficha del partido vuelve a la línea de la fecha, en una
     pieza y tocable de verdad: era la única columna que se veía y ahora es la
     que no puede perderse. */
  .liga-tabla--jugador .liga-tabla__dato span { display: inline; white-space: nowrap; }
  .liga-tabla--jugador .liga-tabla__dato span::before { content: ' · '; }
  .liga-tabla--jugador .liga-tabla__dato a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
  }

  .liga-tabla--jugador .liga-tabla__equipo { white-space: normal; }
}

/* ==========================================================================
   LA FICHA DE PARTIDO
   ========================================================================== */

/* Fuera de la vista pero NO fuera del documento: `display: none` lo quitaría
   también del lector de pantalla, que es justo para quien está escrito. Es la
   misma técnica del interruptor del menú y del título de las pestañas. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ficha-contexto {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}
.ficha-contexto__comp { margin: 0 0 2px; font-size: 14px; color: var(--blue-ink); }
.ficha-contexto__comp span { color: var(--text-muted); font-weight: 400; margin-left: 6px; }
.ficha-contexto__cuando { margin: 0; font-size: 13px; color: var(--text-body); }
.ficha-contexto__cuando b { color: var(--blue-ink); }
.ficha-contexto__cuando i { color: var(--text-muted); font-style: italic; }

/* El marcador grande. `minmax(0, 1fr)` y no `1fr` en las dos columnas de equipo:
   con `1fr` —que es `minmax(auto, 1fr)`— un nombre largo ensancha su lado y
   empuja el marcador fuera del centro. Es el mismo baile que se corrigió el
   8-ago en resultados y el 9-ago en la ficha de jugador. */
.ficha-partido {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--warm-100);
  border-radius: var(--radius-md);
}
.ficha-partido__equipo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 15px;
  min-width: 0;
}
.ficha-partido__equipo--local { justify-content: flex-end; text-align: right; }
.ficha-partido__equipo a { color: var(--blue-ink); text-decoration: none; }
.ficha-partido__equipo a:hover { text-decoration: underline; }
.ficha-partido__equipo.is-gana a { font-weight: 700; }
.ficha-partido__equipo .liga-camiseta { width: 28px; height: 28px; margin: 0; }
.ficha-partido__marcador { text-align: center; }
.ficha-partido__marcador .liga-marcador { font-size: 2rem; }
.ficha-partido__pendiente {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
}

/* Quién pasa la eliminatoria cuando el marcador dice empate. */
.liga-pen {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}

/* Las notas de la ficha. La del acta administrativa lleva franja porque no es un
   dato del partido: explica por qué lo de arriba y lo de abajo no cuadran. */
.ficha-nota {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-size: 13px;
  color: var(--text-body);
}
.ficha-nota--aviso {
  background: var(--form-loss-100);
  color: var(--form-loss);
}
.ficha-nota--aviso b { color: inherit; }
.ficha-nota--acta {
  background: var(--form-draw-100);
  box-shadow: inset 3px 0 0 var(--form-draw);
  color: var(--text-body);
}

/* Las dos alineaciones, una al lado de la otra SOLO si de verdad caben.
   Con el mínimo en 300 px entraban dos columnas en un cuerpo de 660, y entre las
   seis columnas fijas de la tabla al nombre le quedaban 90 px: «PABLO MUÑOZ
   FRESCO» salía en tres líneas. Un nombre de jugador con dos apellidos necesita
   su sitio, así que el corte está donde cabe la tabla entera. */
.ficha-actas {
  display: grid;
  /* `min(430px, 100%)` Y NO `430px` A SECAS: un `minmax()` con mínimo fijo no se
     encoge por debajo de ese mínimo, así que en un móvil de 375 px la columna
     seguía midiendo 430 y era el documento entero el que desbordaba —medido: 446
     sobre 375—. Con `min()` el mínimo pasa a ser el ancho disponible. */
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: var(--space-4);
  /* Aire antes del histórico: sin esto el h2 «Histórico de enfrentamientos»
     quedaba pegado a la última fila de la alineación y las dos secciones se
     leían como una sola (Joaquín, 9-ago-2026). */
  margin-bottom: var(--space-7);
}
.ficha-acta { min-width: 0; }
.ficha-acta .ficha-bloque { margin-top: 0; }
.liga-tabla--acta { min-width: 320px; table-layout: fixed; }
/* La fecha con año —solo en el histórico de enfrentamientos— necesita algo más
   de sitio que «Mi 22/04» o el día de la semana se cae a la línea siguiente. */
.ficha-partido-hist .liga-tabla__dato { white-space: nowrap; }
.liga-tabla--acta .liga-tabla__jugador { white-space: normal; }
.ficha-col--dorsal { width: 38px; }

/* El nombre y su «MVP», en la misma línea. El `min-width: 0` del primero es lo
   que permite que el nombre se encoja en vez de empujar la etiqueta abajo. */
.ficha-linea-mvp { display: flex; align-items: center; gap: 6px; }
.ficha-linea-mvp .liga-linea { min-width: 0; }
.ficha-mvp {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--form-draw-100);
  color: #8a6200;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  vertical-align: 1px;
}

.ficha-formas { list-style: none; margin: 0; padding: 0; }
.ficha-formas li { padding: 8px 0; border-bottom: 1px solid var(--warm-100); }
.ficha-formas li:last-child { border-bottom: 0; }
.ficha-formas__equipo {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-ink);
}
.ficha-forma { display: block; }
.ficha-forma .liga-forma { margin-right: 3px; }

@media (max-width: 700px) {
  /* En una pantalla estrecha las dos actas van una debajo de otra —lo hace solo
     el `auto-fit`— y el marcador se aprieta sin partir los nombres. */
  .ficha-partido { padding: var(--space-3); gap: var(--space-2); }
  .ficha-partido__equipo { font-size: 13.5px; }
  .ficha-partido__marcador .liga-marcador { font-size: 1.5rem; }
  .ficha-partido__equipo .liga-camiseta { width: 22px; height: 22px; }
}

/* ==========================================================================
   LAS PÁGINAS DE CONTENIDO: CRÓNICA Y NOTICIA
   ========================================================================== */

.contenido-contexto {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* EL TEXTO LLENA LA COLUMNA. Hasta el 23-ago-2026 esto era `max-width: 68ch`
   —una medida de lectura de 68 caracteres por línea, que es lo cómodo— y el
   resultado en escritorio no era el buscado: el bloque de resultados de la
   jornada, que es hermano suyo dentro de la misma columna, SÍ llega a los
   820 px, así que quedaba un escalón de 167 px y el texto parecía descolgado.

   Se quita a petición de Joaquín, sabiendo lo que cuesta: la línea pasa de 68 a
   ~88 caracteres. La alternativa era estrechar el bloque de resultados a la
   medida del texto, que preserva la lectura pero deja aire a la derecha en toda
   la columna. Prefirió que no hubiera hueco.

   NO SE DESMADRA EN PANTALLAS GRANDES porque el tope lo pone `.liga`
   (max-width: 1200px): la columna nunca pasa de 820 px, se mire donde se mire. */
.contenido { max-width: none; }

/* Son las dos únicas páginas del sitio con varios párrafos seguidos de texto
   corrido, así que el interlineado y el tamaño sí se cuidan aquí. */
.contenido__texto { font-size: 16px; line-height: 1.7; color: var(--text-body); }
.contenido__texto p { margin: 0 0 var(--space-4); }
.contenido__texto p:last-child { margin-bottom: 0; }
.contenido__texto b, .contenido__texto strong { color: var(--blue-ink); }
.contenido__texto a { color: var(--blue); }
.contenido__texto a:hover { text-decoration: none; }
.contenido__texto ul, .contenido__texto ol { margin: 0 0 var(--space-4) var(--space-5); padding: 0; }
.contenido__texto li { margin-bottom: 6px; }

.contenido__fotos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.contenido__fotos img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

.contenido__compartir { margin: var(--space-6) 0 0; }
.contenido__compartir a { display: inline-flex; align-items: center; gap: 8px; }

/* El bloque de captación del carril. Lleva el acento a la izquierda como el de
   la bolsa, pero en verde: no es la misma oferta. */
.liga-caja--cta { box-shadow: inset 3px 0 0 var(--green); }
.liga-caja--cta p { margin: 0 0 var(--space-3); font-size: 13px; color: var(--text-body); line-height: 1.5; }
.liga-caja--cta p:last-child { margin-bottom: 0; }
.liga-caja--cta a { color: var(--blue); text-decoration: none; }
.liga-caja--cta a:hover { text-decoration: underline; }

/* === LAS PÁGINAS SUELTAS ================================================== */

/* El rótulo sobre el h1 de una página informativa. Mismo papel que el
   `home-overline` de la portada: sitúa antes de que se lea el título. */
.web-hero__rotulo {
  margin: 0;
  font-size: var(--fs-xxs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- El aviso legal ------------------------------------------------------- */

/* Texto corrido y nada más. Los títulos son más pequeños que en el resto del
   sitio a propósito: son ocho seguidos y con el tamaño normal la página parece
   un índice en vez de un documento. */
.web-legal h2 { font-size: var(--fs-h4); margin: var(--space-6) 0 var(--space-3); }
.web-legal p { color: var(--text-body); line-height: var(--lh-relaxed); font-size: var(--fs-sm); }

/* --- El catálogo de equipaciones ------------------------------------------ */

.web-articulo { margin-bottom: var(--space-7); }
.web-articulo h3 { font-size: var(--fs-h4); margin: 0 0 var(--space-4); }

/* Las fotos grandes a la izquierda y el precio a la derecha. En móvil el precio
   baja debajo, que es donde se mira después de ver la camiseta. */
.web-articulo__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 720px) { .web-articulo__cabeza { grid-template-columns: minmax(0, 1fr); } }

.web-articulo__fotos { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.web-articulo__fotos figure { margin: 0; flex: 1 1 160px; max-width: 220px; }

.web-articulo__precio {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.web-articulo__que {
  display: block;
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-faint);
}
.web-articulo__precio strong { display: block; font-size: 28px; color: var(--text-strong); line-height: 1.1; }
.web-articulo__iva { font-size: var(--fs-sm); color: var(--text-muted); }
.web-articulo__precio .web-nota { margin: var(--space-3) 0 0; }

.web-articulo__colores-tit {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--fs-xxs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-faint);
}

/* LA REJILLA DE COLORES ES `auto-fill` CON MÍNIMO 96px, no las doce columnas
   fijas de Bootstrap que usa la página viva. Con `col-md-2` los catorce colores
   del Combi caben de seis en seis en escritorio y **de uno en uno en móvil**:
   catorce pantallas de scroll para ver una gama. Así caben tres o cuatro por
   fila en un teléfono, que es como se compara un color con otro. */
.web-colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-3); }
.web-colores figure { margin: 0; }
.web-colores figcaption,
.web-articulo__fotos figcaption {
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--text-muted);
  margin-top: 4px;
  text-align: center;
}
.web-colores img,
.web-articulo__fotos img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: #fff;
}

/* --- La bolsa de jugadores ------------------------------------------------ */

/* El «fichado por X» que va bajo el nombre en la lista y en la ficha. Es un
   dato de estado, no un dato del anuncio: por eso más pequeño y en gris. */
.bolsa-fichado {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* Los datos de un anuncio: etiqueta a la izquierda y valor a la derecha. Una
   `<dl>` y no una tabla, que es lo que usa la página viva: son pares de
   nombre y valor, no filas y columnas, y en móvil una tabla de dos columnas
   con etiquetas largas se estrecha hasta partir cada palabra. */
.bolsa-datos {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0;
}
.bolsa-datos dt { font-weight: var(--fw-semibold); color: var(--text-muted); font-size: var(--fs-sm); }
.bolsa-datos dd { margin: 0; color: var(--text-body); }
@media (max-width: 560px) {
  .bolsa-datos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bolsa-datos dt { margin-top: var(--space-3); }
}

/* EL MENSAJE CONSERVA LOS SALTOS DE LÍNEA de quien lo escribió. Va con
   `overflow-wrap` porque en un campo libre aparecen cosas sin espacios —una URL
   larga, un correo— que si no desbordan el ancho del contenedor. */
.bolsa-mensaje {
  color: var(--text-body);
  line-height: var(--lh-relaxed);
  overflow-wrap: anywhere;
}


/* ==========================================================================
   EL ACTA EN MÓVIL — Y POR QUÉ ESTE BLOQUE ESTÁ AQUÍ ABAJO Y NO ARRIBA

   Estas tres reglas estaban en el `@media` grande de la competición, unas
   novecientas líneas más arriba, y NO HACÍAN NADA. `.liga-tabla--acta` se
   define después de aquel bloque, con el mismo peso de selector, y a igual
   especificidad manda la última que se lee: el `table-layout: fixed` y el
   `min-width: 320px` de la definición base ganaban siempre. Se vio midiendo
   —la tabla seguía en 320 y el `tableLayout` calculado seguía diciendo
   `fixed`—, no leyendo el fichero, que es como se ven estas cosas.

   Van al final del fichero a propósito: es el único sitio donde se leen después
   de la definición que corrigen.
   ========================================================================== */

@media (max-width: 700px) {
  /* Los anchos del `colgroup` existen para que las dos alineaciones —que son dos
     tablas distintas— casen entre sí en escritorio, y suman exactamente 320 px:
     once más de los 309 que hay en un móvil de 360, así que la columna de rojas
     caía fuera. En un móvil las dos alineaciones van una debajo de otra y
     separadas por el nombre de su equipo, así que ya no hay nada que casar y el
     reparto automático cabe de sobra. */
  .liga-tabla--acta { table-layout: auto; min-width: 0; }
  .liga-tabla--acta col { width: auto; }
}