/* =========================================================================
   Club Deportivo Guillermo Fuenzalida — desde 1945
   -------------------------------------------------------------------------
   ⚠️ TODO sale de los tokens del :root. No hay valores sueltos más abajo:
   ni colores, ni tamaños de texto, ni espaciados. Para reteñir o reescalar
   el sitio se tocan solo esas variables.

   Al tocar este archivo, subir View::ASSET_VERSION (el CDN de Hostinger
   cachea estáticos por encima de PHP y la invalidación va por ?v=N).
   ========================================================================= */

/* fonts.css se carga desde el layout, en paralelo con este archivo.
   Con @import el navegador recién lo descubre al terminar de bajar styles.css
   y la tipografía llega tarde. */

:root {
  /* --- Marca (tomada del escudo: rojo, negro y blanco) --- */
  --brand:        #c8102e;
  --brand-ink:    #a00d24;   /* rojo pisado, para hover sobre rojo */
  --brand-dark:   #121212;
  --brand-light:  #fdeaed;
  --accent:       #e63946;
  --accent-dark:  #9e0c24;

  /* --- Neutros --- */
  --bg:        #ffffff;
  --bg-alt:    #f6f6f7;
  --bg-ink:    #0d0d0d;      /* negro más profundo que --brand-dark, para el hero */
  --text:      #17181a;
  --text-mute: #5f6167;
  /* Los bordes eran #e4e4e7 y #d0d0d5: sobre blanco había que buscarlos con
     lupa, así que las tarjetas se leían como bloques flotando sin contorno.
     Subidos a un gris que sí se ve sin dejar de ser discreto. */
  --border:    #c9c9d0;
  --border-strong: #9a9aa4;

  /* --- Estado ---
     El rojo es color de marca, así que el error usa un rojo MÁS oscuro que
     --brand para que un campo inválido no se lea como un botón. */
  --ok:    #1c7a4a;
  --ok-bg: #e6f4ec;
  --warn:  #9a6510;
  --warn-bg:#fdf3e0;
  --err:   #8c0d1c;
  --err-bg:#fbe6e8;

  /* --- Tipografía ---
     Una sola familia (Archivo, variable 400–800) para texto y titulares: el
     contraste lo dan el peso y el tracking, no un cambio de ancho. Antes había
     una condensada para titulares y sus cifras eran ilegibles en las tablas.
     --font-display se conserva como token porque lo usan ~30 reglas más abajo. */
  --font:         'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font);

  /* Escala modular (~1.25), fluida entre móvil y escritorio */
  --fs-xs:   .78rem;
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.125rem, 1.6vw, 1.25rem);
  --fs-xl:   clamp(1.35rem, 2.2vw, 1.6rem);
  --fs-2xl:  clamp(1.7rem, 3.2vw, 2.25rem);
  --fs-3xl:  clamp(2.2rem, 5vw, 3.25rem);
  --fs-4xl:  clamp(2.8rem, 8vw, 5rem);

  /* Espaciado: una sola escala para todo el sitio */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-9: 4rem;    --sp-10: 5rem;   --sp-12: 7rem;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --shadow:    0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.06);
  --shadow-lg: 0 10px 34px rgba(16,24,40,.14);
  --shadow-brand: 0 8px 24px rgba(200,16,46,.28);

  --container: 1180px;

  /* Color del resplandor del escudo. Cambiar solo este valor para probar otro
     —blanco: 255,255,255— sin tocar las tres capas del efecto. */
  --logo-glow: 255, 60, 80;

  /* Alto de la barra superior. Sale del escudo (92 px) más aire arriba y abajo.
     Va en una variable porque el desplegable del menú en móvil y la tarjeta
     sticky de posiciones se anclan a este valor: con números sueltos, cambiar
     el logo dejaba el menú tapado o flotando. */
  --header-h: 92px;
}

/* --- Reset acotado --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: var(--fs-md);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Titulares. Archivo no es condensada: ocupa más ancho que la anterior, así que
   el tracking cerrado hace más trabajo que antes para que no se vean sueltos. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -.025em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { text-wrap: pretty; }

/* Cifras alineadas en columna. Sin esto, en una tabla de posiciones el 1 y el 7
   ocupan anchos distintos y los puntajes bailan de fila en fila. */
table, .tabular { font-variant-numeric: tabular-nums; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-ink); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

::selection { background: var(--brand); color: #fff; }

/* --- Layout ----------------------------------------------------------- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.narrow      { max-width: 30rem; }
.narrow-wide { max-width: 46rem; }
.section     { padding-block: clamp(var(--sp-7), 6vw, var(--sp-10)); }
.section-alt { background: var(--bg-alt); }
.muted { color: var(--text-mute); }
.small { font-size: var(--fs-sm); }
.lead  { font-size: var(--fs-lg); color: var(--text-mute); line-height: 1.55; }
.center { text-align: center; }
.center-block { text-align: center; margin-inline: auto; }
.mt     { margin-top: var(--sp-4); }
.mt-lg  { margin-top: var(--sp-7); }

.sr-only, .skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: .5rem; left: .5rem; z-index: 100;
  background: var(--brand); color: #fff; padding: .6rem 1rem; border-radius: var(--radius);
}

/* Etiqueta de sección: versalita roja sobre una barra. Reemplaza al
   "título suelto" y le da jerarquía a cada bloque. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .16em;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--brand);
  margin-bottom: var(--sp-3);
}
/* El guion rojo de 26 px antes del texto se sacó el 2026-08-11: adorno sin
   función que aparecía en cada encabezado del sitio. */

/* --- Header ----------------------------------------------------------
   Oscuro por decisión, ya no por obligación: cuando el escudo era un JPG con
   fondo negro no había alternativa, pero hoy tiene transparencia real y se
   vería bien sobre claro también. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* Opaco, no translucido: con el hero en degradado el .92 no se notaba, pero
     con una imagen clara detras el afiche se transparentaba a traves de la
     barra. Un header que deja ver lo que pasa por debajo se lee como un error. */
  background: var(--bg-ink);
}
.site-header::after {
  content: ''; display: block; height: 3px; background: var(--brand);
}
/* El header tiene contenedor propio, más ancho que el del contenido.
   Con los 1180 px del resto del sitio, marca + menú + acciones piden 1140 y
   sobraban 40 px de aire — los mismos 40 en una pantalla de 1920 que en una de
   1366. Esa asfixia es la que partía «Guillermo / Fuenzalida» en dos líneas.
   Una barra puede ser más ancha que la columna de texto; un párrafo no. */
.site-header .container { width: min(100% - 2.5rem, 1400px); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-height: var(--header-h);
}
/* flex:none — el bloque de marca no se comprime nunca. Sin esto flex le quita
   ancho antes que a nadie y la bajada «Club Deportivo · 1945» se parte en dos.
   Si falta ancho, que ceda el menú, que para eso colapsa. */
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; flex: none; }
/* El escudo va suelto y entero dentro de la barra, que es lo bastante alta
   para contenerlo (--header-h). Se probó dejándolo sobresalir por abajo para
   no agrandar el header, y no convenció: quedaba pegoteado sobre la página.

   El anillo rojo que traía el archivo original no es parte del escudo: estaba
   para que no se perdiera sobre negro. Ese trabajo lo hace ahora el resplandor,
   que sigue el contorno real en vez de encerrarlo en un marco.
   drop-shadow y no box-shadow: el segundo dibujaría un rectángulo. */
/* Fuera el resplandor rojo (2026-08-15, decisión de Johant): tres capas de neón
   alrededor del escudo se leían como efecto barato y encima teñían la mitad
   roja del propio escudo. Lo que había que resolver era otra cosa —que la
   mitad NEGRA no se pierda sobre la barra negra— y eso lo hace un contorno
   claro de un pixel más una sombra que le da volumen. */
.brand-logo {
  /* 76 y no 68: la barra mide 92 px de alto, así que este es el máximo que
     deja aire arriba y abajo sin agrandar el header. */
  flex: none; width: auto; height: 76px;
  /* El escudo tiene una mitad negra y la barra es negra: sin nada, se pierde.
     Antes eso lo tapaba un neón rojo de tres capas, que además le robaba el
     color a su propia mitad roja. La solución es un contorno blanco de verdad
     —cuatro sombras de 1 px en cruz trazan el borde real, punta incluida— más
     una sombra baja que le da volumen. Ni neón ni escudo desaparecido. */
  filter:
    drop-shadow(1px 0 0 rgba(255,255,255,.92))
    drop-shadow(-1px 0 0 rgba(255,255,255,.92))
    drop-shadow(0 1px 0 rgba(255,255,255,.92))
    drop-shadow(0 -1px 0 rgba(255,255,255,.92))
    /* Y el halo, ahora blanco: el contorno define la forma, esto lo separa del
       fondo. Es el mismo efecto que hacía el neón rojo, sin teñir el escudo. */
    drop-shadow(0 0 9px rgba(255,255,255,.5))
    drop-shadow(0 0 22px rgba(255,255,255,.28))
    drop-shadow(0 4px 8px rgba(0,0,0,.95));
  transition: transform .25s ease, filter .25s ease;
}
.brand:hover .brand-logo {
  transform: scale(1.03);
  filter:
    drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)
    drop-shadow(0 0 12px rgba(255,255,255,.7))
    drop-shadow(0 0 28px rgba(255,255,255,.4))
    drop-shadow(0 4px 8px rgba(0,0,0,.95));
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -.01em; color: #fff;
  text-transform: uppercase;
  /* El nombre del club no se parte nunca: si falta ancho, que ceda el menú */
  white-space: nowrap;
}
.brand-text small {
  font-size: var(--fs-xs); color: rgba(255,255,255,.78);
  letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
}

/* La navegación se corre hacia el nombre en vez de quedar arrinconada a la
   derecha: con tres enlaces sobraba media barra vacía en medio y los links
   parecían letra chica perdida en la esquina. */
/* La barra se reparte: la marca a la izquierda, el menú pegado a ella —antes
   quedaba arrinconado a la derecha con media barra vacía en medio— y la acción
   al extremo opuesto. Así el ancho se usa entero en vez de amontonar todo a un
   lado. */
.nav { display: flex; align-items: center; gap: var(--sp-6); flex: 1; margin-left: var(--sp-8); }
/* El menu se centra en el ancho que queda en vez de arrancar pegado al nombre
   del club: asi la barra queda en tres zonas claras —marca, navegacion,
   accion— y no en dos bloques amontonados a la izquierda. */
.nav > ul { display: flex; gap: var(--sp-5); margin-inline: auto; }
.nav > .nav-actions { margin-left: auto; }
.nav a {
  position: relative;
  text-decoration: none; color: rgba(255,255,255,.9);
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.005em;
  padding-block: var(--sp-2);
  /* Sin esto «El Club» y «Mi Cuenta» se parten en dos líneas apenas falta
     ancho, y el header queda de dos pisos. */
  white-space: nowrap;
  transition: color .15s;
}
.nav a:hover { color: #fff; }
/* Subrayado que crece desde el centro: detalle chico, se nota */
.nav > ul a::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 0; height: 2px; background: var(--brand);
  transform: translateX(-50%); transition: width .2s ease;
}
.nav > ul a:hover::after { width: 100%; }
.nav a[aria-current="page"] { color: #fff; }
.nav > ul a[aria-current="page"]::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: var(--sp-2); }
.inline-form { display: inline; }

/* «Ingresar» es la única acción del header desde que salió el botón rojo, así
   que deja de ser texto suelto: pastilla con borde, que se lee como algo que
   se toca. Al pasar el mouse se llena de blanco tenue y el borde se enciende
   en rojo. */
.site-header .btn-ghost {
  color: #fff; border: 1px solid rgba(255,255,255,.28);
  border-radius: 99px; padding: .5rem 1.15rem;
  transition: background .18s, border-color .18s, transform .18s;
}
.site-header .btn-ghost:hover {
  background: rgba(255,255,255,.1); border-color: var(--brand);
  color: #fff; transform: translateY(-1px);
}
.site-header .btn-link { color: rgba(255,255,255,.55); }
.site-header .btn-link:hover { color: var(--accent); }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: var(--sp-2);
}
.nav-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Botones --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: .7rem 1.3rem; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.005em;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, transform .08s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-ink); color: #fff; box-shadow: var(--shadow-brand); }
.btn-outline { border-color: var(--border-strong); background: var(--bg); color: var(--text); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-dark { background: var(--brand-dark); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--brand-light); color: var(--brand-ink); }
.btn-link {
  background: none; border: 0; color: var(--text-mute);
  padding: .6rem .4rem; text-decoration: underline;
  font-family: var(--font); text-transform: none; letter-spacing: 0; font-weight: 500;
}
.btn-link:hover { color: var(--err); }
.btn-lg { padding: .9rem 1.9rem; font-size: 1.12rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .icon { width: 1.1em; height: 1.1em; }

/* --- Iconos ----------------------------------------------------------- */
.icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor;
        stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* --- Hero -------------------------------------------------------------
   Con fotos: se arma un carrusel con lo que haya en public/img/hero/ y el
   texto va encima. Sin fotos: el degradado sostiene solo el bloque, y la
   portada se apoya en los datos del club (posiciones, agenda) más abajo. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bg-ink);
  color: #fff;
  display: grid; align-items: center;
  min-height: clamp(30rem, 72vh, 44rem);
  padding-block: clamp(var(--sp-9), 12vw, var(--sp-12));
}
/* Carrusel del hero: rota entre TEMAS del club, no entre fotos. Cada lamina
   trae su mensaje y su boton, asi la portada muestra el club aunque todavia no
   haya fotografias. Se cruzan por opacidad: sin desplazamiento lateral, que en
   movil pelea con el scroll de la pagina. */
/* El selector va en su propia franja, debajo de la imagen y no encima: sobre
   un afiche tapaba justo el borde inferior. Las laminas se recortan a la caja
   de arriba, y esa franja queda para los puntos. */
.hero-carrusel {
  display: block; position: relative;
  /* Alto de la franja del selector. Sube de 2.75 a 4rem: las pelotas quedaban
     pegadas al filo de la ventana y se veian a medias. */
  --dots-h: 5rem;
  padding-bottom: var(--dots-h);
}

.hero-lamina {
  position: absolute; inset: 0 0 var(--dots-h, 0) 0;
  display: grid; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility .7s;
}
.hero-lamina.is-active { opacity: 1; visibility: visible; }

/* La primera lamina va en el flujo y le da el alto al hero; el resto se apila
   encima. Sin esto habria que fijar una altura a mano y cada texto la rompe. */
.hero-lamina:first-child { position: relative; }

.hero-lamina-media { position: absolute; inset: 0; z-index: -2; }
.hero-lamina-media picture { display: block; width: 100%; height: 100%; }
.hero-lamina-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }

/* El texto entra desplazado: le da vida al cambio sin que nada se mueva de sitio */
.hero-lamina .hero-inner > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.hero-lamina.is-active .hero-inner > * { opacity: 1; transform: none; }
.hero-lamina.is-active .hero-inner > *:nth-child(1) { transition-delay: .10s; }
.hero-lamina.is-active .hero-inner > *:nth-child(2) { transition-delay: .18s; }
.hero-lamina.is-active .hero-inner > *:nth-child(3) { transition-delay: .26s; }
.hero-lamina.is-active .hero-inner > *:nth-child(4) { transition-delay: .34s; }

/* Lamina silenciosa: manda el afiche. Llena el espacio con `cover` —con
   `contain` quedaba flotando entre bandas negras enormes— y sube por encima
   del velo del hero, que existe para que se lea el texto blanco y aca no hay
   texto que proteger.
   object-position arriba: en el afiche el titulo y el escudo estan en la
   franja superior, asi que el recorte se lleva el borde de abajo. */
.hero-lamina.is-quiet .hero-lamina-media { z-index: 0; }
/* `contain` y no `cover`: esto es un afiche, y recortarlo se lleva justo lo
   que hay que mostrar —con cover se cortaban la cara de la nina y el sello de
   "gratuita"—. Para que no queden bandas, el hero toma abajo la altura
   proporcional a la imagen. */
.hero-lamina.is-quiet .hero-lamina-media img {
  object-fit: contain; object-position: center;
}

/* La imagen entera es el enlace: sin titular encima, un boton flotando sobre
   el afiche estorbaba. El foco se ve porque el outline queda por dentro. */
.hero-lamina-link { position: absolute; inset: 0; z-index: 3; }
.hero-lamina-link:focus-visible { outline-offset: -6px; }

/* Lamina silenciosa: manda la foto. El titulo se oculta a la vista pero sigue
   en el HTML —ahi esta el h1 de la pagina— y el boton se mantiene para que la
   lamina lleve a alguna parte. */
.hero-inner.is-quiet .eyebrow,
.hero-inner.is-quiet h1,
.hero-inner.is-quiet .lead {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero-inner.is-quiet .hero-actions { margin-top: 0; }

.hero-dots {
  /* Separadas del filo: el resplandor del piso necesita aire debajo, y pegadas
     al borde el navegador las cortaba. */
  position: absolute; left: 0; right: 0; bottom: var(--sp-6); z-index: 3;
  height: calc(var(--dots-h) - var(--sp-6));
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
}
/* El selector es una pelota por lámina, no una barrita. La imagen se recorta
   de `balon_transparente.jpeg` con scripts/recortar-pelota.php: el archivo
   original es JPEG y trae el damero incrustado como píxeles, así que hay que
   enmascararlo antes de usarlo. */
.hero-dot {
  position: relative;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: url('../../img/pelota.png') center/contain no-repeat;
  cursor: pointer;
  opacity: .38; filter: grayscale(1) contrast(.9);
  transition: opacity .2s, filter .2s, transform .2s;
}
.hero-dot:hover { opacity: .7; filter: grayscale(.3); }

/* La seleccionada se prende: recupera color, sube un poco y enciende el
   resplandor del piso —en el rojo del club, no en el verde agua de la imagen
   original—. Va como pseudo-elemento y no en el PNG para poder apagarlo. */
.hero-dot.is-active { opacity: 1; filter: none; transform: translateY(-3px); }
.hero-dot.is-active::after {
  content: ''; position: absolute; z-index: -1;
  left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 32px; height: 12px; border-radius: 50%;
  background: radial-gradient(ellipse at center,
              rgba(200,16,46,.95) 0%, rgba(200,16,46,.45) 45%, rgba(200,16,46,0) 72%);
  animation: pelota-prende .25s ease both;
}
@keyframes pelota-prende {
  from { opacity: 0; transform: translateX(-50%) scaleX(.5); }
}
/* Para quien pidió menos movimiento en el sistema: se prende, pero sin latido. */
@media (prefers-reduced-motion: reduce) {
  .hero-dot, .hero-dot.is-active, .hero-dot.is-active::after { transition: none; animation: none; }
}

/* Con foto el velo tiene que ser mas parejo: el degradado lateral pensado
   para el fondo liso dejaba la mitad derecha de la foto lavada. */
/* El hero ocupa exactamente lo que queda de ventana bajo la barra. Ese es el
   requisito real: que la lamina entera —imagen y selector— se vea de una sin
   scrollear. Calcularlo por proporcion de la imagen (56vw) daba un hero mas
   alto que la pantalla, y por eso el afiche aparecia cortado.
   svh y no vh: en el movil, vh cuenta la barra del navegador que aparece y
   desaparece, y el hero saltaba al scrollear. */
.hero.has-media {
  height: calc(100svh - var(--header-h));
  min-height: 26rem;   /* pantallas muy bajas: mejor scroll que un hero aplastado */
  max-height: 48rem;   /* monitores altos: no tiene sentido un hero de 1000 px */
  padding-block: var(--sp-4);
}
.hero.has-media::before {
  background:
    linear-gradient(100deg, rgba(13,13,13,.92) 0%, rgba(13,13,13,.72) 50%, rgba(13,13,13,.55) 100%),
    radial-gradient(120% 90% at 15% 100%, rgba(200,16,46,.35) 0%, transparent 60%);
}

.hero-inner { position: relative; max-width: 46rem; }
.hero .eyebrow { color: var(--accent); }
.hero .eyebrow::before { background: var(--accent); }
.hero h1 {
  font-size: var(--fs-4xl); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.02em; line-height: .92;
  margin-bottom: var(--sp-4);
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.hero .lead { color: rgba(255,255,255,.88); max-width: 34rem; }
/* Un dato real del club en el hero: como va la mejor division. Es lo que
   convierte la portada en la de un club y no en un folleto de inscripcion. */
.hero-highlight {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  color: rgba(255,255,255,.9); font-size: var(--fs-base);
  backdrop-filter: blur(6px);
}
.hero-highlight .icon { color: var(--accent); width: 1.5rem; height: 1.5rem; }
.hero-highlight strong { color: #fff; font-weight: 700; }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero .btn-outline { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.hero .btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.hero-img { border-radius: var(--radius-lg); margin-block: var(--sp-5); width: 100%; }

/* Cifras del club bajo el hero: dan peso y evitan el hueco vacío */
.hero-stats {
  position: relative;
  display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-9);
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.18);
}
.hero-stat strong {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; color: #fff;
}
.hero-stat span {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255,255,255,.6);
}

/* Hero corto para las páginas internas */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bg-ink); color: #fff;
  padding-block: clamp(var(--sp-7), 7vw, var(--sp-9));
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(100% 120% at 0% 100%, rgba(200,16,46,.5) 0%, transparent 65%);
}
.page-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--brand);
}
.page-hero h1 { margin-bottom: var(--sp-2); }
.page-hero .lead { color: rgba(255,255,255,.82); max-width: 42rem; }

/* --- Secciones ------------------------------------------------------- */
/* El bloque de título deja de ser una columna rígida: sin min-width:0 su ancho
   mínimo es el del titular completo y empuja el «ver todas» a la línea de abajo
   apenas el titular crece. */
.section-head, .page-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.section-head > *, .page-head > * { min-width: 0; }
.link-more {
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: -.005em; font-size: var(--fs-sm); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  white-space: nowrap;
}
.link-more::after { content: '→'; transition: transform .15s; }
.link-more:hover::after { transform: translateX(3px); }
.empty { color: var(--text-mute); padding: var(--sp-6) 0; }

/* --- Cards ----------------------------------------------------------- */
.card-grid {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}
.card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s, border-color .2s;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--border-strong); }
.card-img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.card-body h2, .card-body h3 { margin-bottom: var(--sp-2); font-size: var(--fs-lg); }
.card-body h2 a, .card-body h3 a { text-decoration: none; color: inherit; }
.card-body h2 a:hover, .card-body h3 a:hover { color: var(--brand); }

/* --- Divisiones ------------------------------------------------------- */
.card-division {
  position: relative; text-decoration: none; color: inherit; display: block;
  isolation: isolate;
}
/* El CSS de .division-grid / .division-chip se borró con la sección
   «Nuestras divisiones» de la portada (2026-08-11). /divisiones usa .card-img. */

/* La figura 4/3 con el nombre en fantasma vivía acá para la portada. Se quitó
   con el índice compacto de arriba: /divisiones usa .card-img, no esta figura. */
.card-division .card-body { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.card-division h3 { margin-bottom: 0; }

/* Las tarjetas eran una caja con el nombre adentro y nada más. Ahora llevan la
   franja roja del escudo arriba, el puesto del club —que es lo que se viene a
   mirar de una división que compite— y la flecha que ya existía en el CSS pero
   que ninguna vista dibujaba. */
.card-division::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--brand); opacity: .85; transition: opacity .2s;
}
.card-division:hover::before { opacity: 1; }
.card-division .card-body { padding-top: var(--sp-5); }
.card-division-texto { min-width: 0; }
.card-division-pos {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-2); font-family: var(--font-display);
}
.card-division-pos strong { font-size: 1.6rem; line-height: 1; color: var(--brand-dark); }
.card-division-pos > span { font-size: var(--fs-sm); color: var(--text-mute); }
.card-division-pts {
  padding: .1rem .5rem; border-radius: 99px;
  background: var(--brand-light); color: var(--brand-ink); font-weight: 700;
}
.card-division-dato {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-mute);
}
.card-division-dato .icon { width: 1rem; height: 1rem; flex: none; color: var(--brand); opacity: .75; }
.go .icon { width: 1.1rem; height: 1.1rem; }

/* Hover: el borde se enciende en el rojo del escudo y la tarjeta levanta con un
   resplandor del mismo color. Antes solo cambiaba a un gris más oscuro, que a
   simple vista no se notaba y dejaba la tarjeta muerta al pasar por encima.
   Va después de .card:hover a propósito: tiene que ganarle. */
.card-division:hover,
.card-division:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 14px 30px rgba(200,16,46,.22);
}
.card-division:focus-visible { outline: none; }
/* El nombre también responde: el hover se siente en lo que se está mirando. */
.card-division:hover h3 { color: var(--brand); }
.card-division h3 { transition: color .2s; }
.card-division .go {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-light); color: var(--brand);
  transition: background .2s, color .2s, transform .2s;
}
.card-division:hover .go { background: var(--brand); color: #fff; transform: translateX(2px); }

.division-group { margin-bottom: var(--sp-8); }
.division-group:last-of-type { margin-bottom: 0; }
.division-group .section-head { align-items: center; margin-bottom: var(--sp-5); }

/* El CSS de «El club hoy» (.standing-cards / .standing-card…) se borró junto
   con la sección, el 2026-08-10. Eran ~60 líneas que ya no vestían nada. */

/* --- Partidos -------------------------------------------------------- */
.match-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.match {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
  transition: border-color .18s, box-shadow .18s;
}
.match:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.match-date {
  flex: none; width: 3.5rem; text-align: center;
  background: var(--brand-dark); color: #fff;
  border-radius: var(--radius-sm); padding: var(--sp-2) 0;
}
.match-date .day {
  display: block; font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 800; line-height: 1;
}
.match-date .month {
  display: block; font-size: .65rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65);
}
/* Escudo del rival en la tarjeta de partido. Mismo tratamiento que
   .team-crest de la tabla, pero un poco mas grande: aca es la unica imagen
   de la fila y tiene que leerse a la primera. */
.match-crest {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
  background: var(--bg-alt); flex: none;
}
.match-info { flex: 1; min-width: 0; }
.match-info strong { font-family: var(--font-display); font-size: var(--fs-lg); }
/* --- Jornada ---------------------------------------------------------
   Un dia de campeonato es UN cartel, no tres renglones: el club juega todas
   sus divisiones el mismo dia y contra el mismo rival. La fecha, el escudo y
   la condicion se dicen una vez arriba; abajo van las horas, que es lo unico
   que cambia entre division y division. */

/* El fondo se pinta con degradados y no con una foto: el club todavia no
   entrega una apaisada, y un cartel de jornada plano no se sostiene. El
   resplandor rojo cae bajo el escudo del club y el frio bajo el del rival,
   asi el duelo tiene dos lados aunque no haya imagen. */
.hero-lamina.is-jornada {
  background:
    radial-gradient(52% 66% at 50% 44%, rgba(200, 16, 46, .26), transparent 72%),
    radial-gradient(70% 60% at 50% 8%, rgba(255, 255, 255, .05), transparent 70%),
    repeating-linear-gradient(114deg, rgba(255,255,255,.04) 0 2px, transparent 2px 84px),
    radial-gradient(120% 110% at 50% 0%, #1d1d1d, #0a0a0a 70%);
}

/* El cartel es mas alto que un titular a bandera, y el hero traia min-height y
   overflow:hidden: en una pantalla baja (805x535) recortaba 217 px -el boton y
   las pelotas quedaban fuera-. Ademas `.hero { padding-block }` de un media
   query posterior pisaba el `padding-bottom` con que .hero-carrusel reserva la
   franja de las pelotas. Las dos cosas se arreglan acá, con la especificidad
   suficiente para ganarle a esos media queries y sin tocar el hero normal. */
.hero.hero-carrusel:has(.hero-jornada) {
  /* .hero.has-media fija `height: 100svh - header` para que un afiche ocupe la
     pantalla. El cartel de jornada es mas alto que eso en una pantalla baja y
     quedaba recortado -217 px en 805x535-, asi que acá la altura la manda el
     contenido y la pantalla pasa a ser el piso, no el techo. */
  height: auto;
  /* Ni 100svh de piso: el hero mide lo que mide el cartel, en TODOS los anchos.
     Con el piso puesto, en una ventana ancha y baja -o con la barra de aviso de
     sesion empujando desde arriba- el selector quedaba fuera de la pantalla, que
     es justo lo que se arreglo en el telefono. Un solo criterio para los dos. */
  min-height: 0;
  max-height: none;
  padding-bottom: var(--dots-h);
}

.hero-jornada {
  text-align: center;
}
/* .hero-actions viene alineado a la izquierda del hero normal, que es un
   titular a bandera. Aca el cartel es simetrico y el boton cae bajo el VS. */
/* El boton es una accion secundaria: quien mira el cartel ya obtuvo lo que
   venia a buscar. A ancho completo -que es lo que hace `.hero-actions .btn`
   en el hero normal, donde el boton SI es la accion principal- medía 353x60 y
   pesaba mas que los dos escudos juntos. Ancho segun su texto. */
.hero-jornada .hero-actions {
  justify-content: center;
  /* Aire propio: pegado al boton, el selector se lee como parte de el. */
  margin-bottom: var(--sp-5);
}
.hero-jornada .hero-actions .btn { width: auto; }
.hero-jornada .eyebrow { margin-bottom: var(--sp-3); }

/* El titular es la fecha: es el dato que se viene a buscar. */
/* Va con .hero-jornada delante para ganarle a `.hero h1`, que es el titular a
   bandera del hero normal y viene en fs-4xl: aca el titular acompaña al duelo,
   no compite con el. */
.hero-jornada .jornada-cuando {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.05rem, 2.6vw, 1.7rem); line-height: 1.15;
  text-transform: uppercase; letter-spacing: .04em;
  margin: 0 0 var(--sp-6); color: #fff; text-wrap: balance;
}

/* El duelo va en grilla de tres columnas y no en flex para que el VS quede
   clavado al centro de los escudos y no al centro de la columna entera: los
   nombres no miden lo mismo -uno cae en dos lineas, el otro en una- y con
   align-items el VS bailaba segun el rival que tocara. */
.jornada-duelo {
  --escudo: clamp(120px, min(30vw, 20vh), 152px);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: start; justify-items: center;
  column-gap: clamp(var(--sp-4), 4vw, var(--sp-8));
}
.jornada-lado {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  min-width: 0; max-width: 15rem;
}
/* Alto fijo y ancho libre: los escudos NO son cuadrados -van de 175x256 a
   303x256- y encajarlos en un circulo les corta las puntas. Igualarlos por
   el alto es lo que hace que se vean del mismo tamano respetando su forma. */
.jornada-escudo {
  height: var(--escudo); width: auto; max-width: 100%;
  object-fit: contain;
  /* drop-shadow y no box-shadow: el segundo dibujaria un rectangulo alrededor
     de un escudo recortado. Misma decision que .brand-logo del header. */
  /* Contorno blanco de 1 px en cruz mas halo blanco: la misma solucion que ya
     se tomo para .brand-logo del header. Un halo rojo le roba el color a la
     mitad roja del propio escudo -por eso se descarto alla- y ademas tine al
     rival, que tiene sus colores y no los nuestros. */
  filter:
    drop-shadow(1px 0 0 rgba(255,255,255,.92))
    drop-shadow(-1px 0 0 rgba(255,255,255,.92))
    drop-shadow(0 1px 0 rgba(255,255,255,.92))
    drop-shadow(0 -1px 0 rgba(255,255,255,.92))
    drop-shadow(0 0 12px rgba(255,255,255,.42))
    drop-shadow(0 0 26px rgba(255,255,255,.22))
    drop-shadow(0 6px 12px rgba(0,0,0,.9));
}
.jornada-nombre {
  font-family: var(--font-display); font-weight: 800; line-height: 1.15;
  font-size: clamp(.82rem, 2vw, 1.15rem);
  text-transform: uppercase; letter-spacing: .04em; text-wrap: balance;
  color: rgba(255, 255, 255, .92);
}
.jornada-vs {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1rem, 2.8vw, 1.7rem); letter-spacing: .06em;
  color: var(--accent);
  margin-top: calc(var(--escudo) / 2); transform: translateY(-50%);
}

.jornada-condicion-fila { margin: var(--sp-5) 0 0; }
.jornada-condicion {
  display: inline-block;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  padding: .34rem .85rem; border-radius: 99px; color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
}

.jornada-horarios {
  list-style: none; padding: 0; margin: var(--sp-6) 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2);
}
.jornada-horarios li {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  min-width: 7.5rem; padding: var(--sp-3) var(--sp-4);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
}
.jornada-hora {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(1.05rem, 2.6vw, 1.4rem); color: #fff;
}
.jornada-div {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255, 255, 255, .62);
}

/* La misma jornada, en la agenda sobre fondo claro. */
.jornada-lista { display: flex; flex-direction: column; gap: var(--sp-4); }
.jornada-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.jornada-card-head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
}
.jornada-card-escudo {
  height: 52px; width: auto; max-width: 56px; object-fit: contain; flex: none;
}
/* Los dos escudos en la tarjeta: con el del rival solo no se entendia de quien
   era el partido. Se igualan por el alto, como en el cartel del hero, porque
   los escudos no son cuadrados. */
.jornada-card-duelo {
  display: flex; align-items: center; gap: var(--sp-2); flex: none;
}
.jornada-card-duelo .jornada-card-escudo { height: 40px; max-width: 44px; }
.jornada-card-vs {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; color: var(--text-mute);
}
.jornada-card-info { flex: 1; min-width: 0; }
.jornada-card-info strong { font-family: var(--font-display); font-size: var(--fs-lg); }
.jornada-horarios-claro {
  margin: 0; gap: 0; justify-content: flex-start;
  background: var(--bg-alt); border-top: 1px solid var(--border);
}
.jornada-horarios-claro li {
  flex: 1 1 0; align-items: flex-start;
  background: none; border: 0; border-radius: 0;
  border-inline-end: 1px solid var(--border);
}
.jornada-horarios-claro li:last-child { border-inline-end: 0; }
.jornada-horarios-claro .jornada-hora { color: var(--text); }
.jornada-horarios-claro .jornada-div { color: var(--text-mute); }
/* El marcador dentro de la tarjeta de resultados. Va con el contenedor delante
   para ganarle a `.jornada-horarios-claro .jornada-hora`, que tambien pinta el
   color y empataba en especificidad. */
.jornada-horarios-claro .es-gano   .campana-res { color: var(--ok); }
.jornada-horarios-claro .es-perdio .campana-res { color: var(--err); }
.jornada-horarios-claro .es-empato .campana-res { color: var(--text-mute); }

/* El cartel tiene que entrar en la primera pantalla junto con las pelotas del
   selector: si quedan bajo el pliegue, nadie se entera de que el hero rota y
   el resto de las laminas no existe. En una ventana baja se COMPRIME el
   cartel; recortarlo, que es lo que hacia el height fijo del hero, no. */
@media (max-height: 800px) {
  .jornada-duelo { --escudo: clamp(68px, 13.5vh, 118px); }
  .hero-jornada .jornada-cuando {
    font-size: clamp(.95rem, 2.2vw, 1.3rem); margin-bottom: var(--sp-4);
  }
  .hero-jornada .eyebrow { margin-bottom: var(--sp-2); }
  .jornada-lado { gap: var(--sp-3); }
  .jornada-condicion-fila { margin-top: var(--sp-4); }
  .jornada-horarios { margin-top: var(--sp-4); }
  .jornada-horarios li { min-width: 6.5rem; padding: var(--sp-2) var(--sp-3); }
  .hero-jornada .hero-actions { margin-top: var(--sp-4); }
}

/* Ventana muy baja (una laptop chica, o el navegador a media pantalla): el
   nombre del club bajo el escudo es lo primero que sobra -ya esta en el header-
   y las horas se aprietan en una sola linea. */
/* Hasta 860 px hay barra inferior fija (.tabbar, z-index 60) pegada al borde,
   y las pelotas del selector le quedaban debajo: se veian a medias. Ademas el
   hero estirado a 100svh dejaba un hueco negro enorme entre el boton y ellas.
   Con jornada, el hero mide lo que mide el cartel: las pelotas suben y quedan
   muy por encima de la barra, sin hueco. */

@media (max-height: 620px) {
  .jornada-duelo { --escudo: clamp(60px, 12vh, 96px); }
  .jornada-nombre { font-size: .78rem; letter-spacing: .03em; }
  .jornada-lado { gap: var(--sp-2); }
  .hero-jornada .jornada-cuando { margin-bottom: var(--sp-3); }
  .jornada-condicion-fila { margin-top: var(--sp-3); }
  .jornada-horarios { margin-top: var(--sp-3); }
  .jornada-horarios li { min-width: 5.75rem; padding: .35rem var(--sp-3); }
  .hero-jornada .hero-actions { margin-top: var(--sp-3); margin-bottom: var(--sp-2); }
  /* Con la barra inferior fija comiendose 53 px, la franja del selector se
     achica: sigue habiendo aire, pero no el de una pantalla completa. */
  .hero.hero-carrusel:has(.hero-jornada) { --dots-h: 3.5rem; }
}

/* --- La campana de una division -------------------------------------
   Las 9 fechas del campeonato en una lista, no en una tabla: en el telefono
   una tabla de 5 columnas obliga a scroll lateral, y la unica columna que
   siempre se mira -el resultado- quedaria fuera de pantalla. */
.campana { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.campana-fecha {
  display: grid;
  grid-template-columns: 2.25rem 34px 1fr auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.campana-fecha:last-child { border-bottom: 0; }
.campana-num {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  color: var(--text-mute); text-align: center;
}
.campana-crest { width: 34px; height: 34px; object-fit: contain; }
.campana-rival {
  display: flex; flex-direction: column; min-width: 0;
  font-weight: 600; line-height: 1.2;
}
.campana-rival small {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .06em;
}
/* El resultado es lo que se viene a mirar: display, tabular, y con el color
   del desenlace. --err y no --brand: el rojo de marca es el de los botones y
   una derrota no es una accion. */
.campana-res {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.es-gano    .campana-res { color: var(--ok); }
.es-perdio  .campana-res { color: var(--err); }
.es-empato  .campana-res { color: var(--text-mute); }
.es-pendiente .campana-res { color: var(--text-mute); }

.badge {
  flex: none; font-family: var(--font-display);
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; padding: .3rem .7rem; border-radius: 99px;
}
.badge-home { background: var(--ok-bg); color: var(--ok); }
.badge-away { background: var(--brand-light); color: var(--brand-ink); }
.score {
  flex: none; font-family: var(--font-display); font-size: 1.3rem; font-weight: 800;
  padding: .2rem .8rem; border-radius: var(--radius-sm);
}
.score-win  { background: var(--ok-bg);  color: var(--ok); }
.score-loss { background: var(--err-bg); color: var(--err); }
.score-draw { background: var(--bg-alt); color: var(--text-mute); }

/* --- Campaña de socios ------------------------------------------------ */
.benefit-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
/* Icono al lado del texto, no encima: apilado, cada beneficio medía ~300 px y
   los tres sumaban una pantalla entera de teléfono para tres frases. */
.benefit {
  position: relative; overflow: hidden;
  display: flex; align-items: start; gap: var(--sp-4);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
/* Filete rojo superior: firma de marca sin repetir el logo */
.benefit::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--brand);
}
.benefit-icon {
  flex: none; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; margin-top: .1rem;
  border-radius: var(--radius); background: var(--brand-light); color: var(--brand);
}
.benefit-icon .icon { width: 1.3rem; height: 1.3rem; }
.benefit h3 { margin-bottom: var(--sp-1); font-size: var(--fs-lg); }
.benefit p { font-size: var(--fs-sm); }

/* --- Escuela de futbol ------------------------------------------------ */
.escuela-banner {
  margin: 0 0 var(--sp-6);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.escuela-banner img { width: 100%; height: auto; }

.escuela-datos {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.escuela-dato {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-5);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.escuela-dato-icono {
  flex: none; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius);
  background: var(--brand-light); color: var(--brand);
}
.escuela-dato-icono .icon { width: 1.4rem; height: 1.4rem; }
.escuela-dato dl { margin: 0; }
.escuela-dato dt {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--text-mute);
  margin-bottom: var(--sp-1);
}
.escuela-dato dd { margin: 0; font-weight: 600; line-height: 1.4; }
.escuela-dato dd.muted { font-weight: 400; font-size: var(--fs-sm); }

/* Que sea gratis es el dato que mas mueve a una familia: va destacado */
.escuela-dato.is-free { border-color: var(--brand); background: var(--brand-light); }
.escuela-dato.is-free .escuela-dato-icono { background: var(--brand); color: #fff; }

/* --- Llamado a la escuela en la portada ------------------------------- */
.escuela-cta {
  display: grid; gap: var(--sp-6);
  grid-template-columns: 1.1fr 1fr; align-items: center;
}
.escuela-cta-media {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.escuela-cta-media img { width: 100%; height: auto; }
.escuela-cta-badge {
  display: inline-block; margin-bottom: var(--sp-3);
  padding: .3rem .8rem; border-radius: 99px;
  background: var(--brand); color: #fff;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.escuela-cta h2 { margin-bottom: var(--sp-3); }
.escuela-cta-lista {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-5);
}
.escuela-cta-lista li { display: flex; align-items: center; gap: var(--sp-3); }
.escuela-cta-lista .icon { color: var(--brand); width: 1.2rem; height: 1.2rem; flex: none; }

@media (max-width: 860px) {
  .escuela-cta { grid-template-columns: 1fr; }
  .escuela-cta-media { order: -1; }
}

/* --- Redes del club --------------------------------------------------- */
.footer-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.footer-social a {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.8);
  text-decoration: none; transition: background .18s, color .18s, transform .18s;
}
.footer-social a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
.footer-social .icon { width: 1.25rem; height: 1.25rem; }

/* --- Formularios ----------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-6); }
.card-form {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow);
}
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field-row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }

.field label { font-size: var(--fs-sm); font-weight: 600; }
.req { color: var(--err); }

.field input, .field select, .field textarea {
  width: 100%; padding: .7rem .85rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg); transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); outline: none;
}
.field textarea { resize: vertical; min-height: 8rem; }

.field input.is-invalid, .field textarea.is-invalid, .field select.is-invalid {
  border-color: var(--err); background: var(--err-bg);
}
.field input.is-valid, .field textarea.is-valid { border-color: var(--ok); }

.field-error { color: var(--err); font-size: var(--fs-sm); }
.field-error:empty { display: none; }
.field-hint  { color: var(--text-mute); font-size: var(--fs-sm); }

.input-password { position: relative; display: flex; }
.input-password input { padding-right: 3rem; }
.toggle-password {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: .4rem .6rem;
  font-size: 1.05rem; line-height: 1; opacity: .65;
}
.toggle-password:hover { opacity: 1; }

/* Honeypot: invisible para humanos, presente para bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.filter-form select {
  padding: .6rem .85rem; border: 1px solid var(--border-strong); border-radius: var(--radius);
}

/* --- Alertas --------------------------------------------------------- */
.alert {
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-4); font-size: var(--fs-base);
  border: 1px solid transparent; border-left-width: 4px;
}
.alert-success { background: var(--ok-bg);      color: var(--ok);        border-left-color: var(--ok); }
.alert-error   { background: var(--err-bg);     color: var(--err);       border-left-color: var(--err); }
.alert-info    { background: var(--brand-light);color: var(--brand-ink); border-left-color: var(--brand); }

/* --- Tablas y stats -------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); min-width: 34rem; }
.table th, .table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--border); }
/* El encabezado era gris claro sobre blanco: no se distinguía de las filas y la
   tabla arrancaba sin cabeza. Va en el negro del escudo, que separa el rótulo de
   los datos sin competir con el rojo de los puntos ni con la fila del club. */
.table th {
  background: var(--brand-dark); color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 0;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--bg-alt); }

.tag {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .22rem .6rem; border-radius: 99px;
}
.tag-pagada    { background: var(--ok-bg);  color: var(--ok); }
.tag-pendiente { background: var(--warn-bg);color: var(--warn); }
.tag-vencida   { background: var(--err-bg); color: var(--err); }
.tag-condonada { background: var(--bg-alt); color: var(--text-mute); }

.stat-row { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.stat {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow);
}
.stat-label {
  font-size: var(--fs-xs); color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.stat-value {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 2rem; line-height: 1.1; margin-top: var(--sp-1);
}
.stat-note  { font-size: var(--fs-sm); color: var(--text-mute); }
.stat-warn { border-color: rgba(154,101,16,.35); background: var(--warn-bg); }
.stat-warn .stat-value { color: var(--warn); }
.stat-ok .stat-value { color: var(--ok); }

/* --- Tabla de posiciones ----------------------------------------------
   Dos columnas en escritorio: la tabla no necesita 1180 px y estirarla dejaba
   un oceano entre el nombre y los numeros. El ancho que sobra lo ocupa la
   tarjeta con la situacion del club, que es a lo que se entra. */
.standings-layout {
  display: grid; gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr) 19rem;
  align-items: start;
}
/* La tarjeta CONTIENE la tabla: sin relleno propio y recortando en el borde,
   para que el encabezado negro llegue hasta el filo y no quede una franja
   flotando dentro de un marco blanco. */
.standings-wrap {
  order: -1;                  /* la tabla primero, aunque la tarjeta vaya antes en el HTML */
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg); box-shadow: var(--shadow);
}
.standings-table th, .standings-table td { padding-inline: var(--sp-4); }
/* Lo que va DENTRO de la tarjeta y no es la tabla (el gancho de registro)
   recupera el aire que la tarjeta ya no da. */
.standings-wrap > .muro { margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; }

.division-tabs {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5);
}
/* Variante de la portada: siete divisiones envueltas ocupan tres filas en un
   teléfono y empujan la tabla fuera de pantalla. Acá se deslizan en una sola. */
.division-tabs.is-scroller {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
  /* El padding de abajo deja pasar el resplandor del botón activo: con overflow-x
     el contenedor también recorta arriba y abajo, y sin esto queda cortado. */
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-4);
}
.division-tabs.is-scroller::-webkit-scrollbar { display: none; }
.division-tabs.is-scroller .division-tab { flex: none; scroll-snap-align: start; white-space: nowrap; }

.tabla-panel[hidden] { display: none; }
/* El cambio de división avisa que algo pasó: sin esto la tabla se reemplaza de
   golpe y en el teléfono no se nota que el toque hizo efecto. */
.tabla-panel.is-on { animation: tabla-entra .22s ease both; }
@keyframes tabla-entra {
  from { opacity: 0; transform: translateY(6px); }
}
.division-tab {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base);
  letter-spacing: -.005em; text-decoration: none;
  color: var(--text-mute); background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: 99px;
  padding: .4rem 1rem; transition: all .15s;
}
.division-tab:hover { border-color: var(--brand); color: var(--brand); }
/* El seleccionado: borde rojo, una línea clara por dentro que le da volumen y
   resplandor rojo abajo. El glow va por box-shadow y no por filter para que no
   arrastre al texto ni al resto de la fila. */
.division-tab.is-active {
  background: var(--brand-dark); border-color: var(--brand); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 16px rgba(200,16,46,.38);
}

/* --- Tarjeta con la situacion del club -------------------------------- */
.club-card {
  /* Justo bajo la barra, que ahora es más alta por el escudo */
  position: sticky; top: calc(var(--header-h) + var(--sp-4));
  background: var(--bg-ink); color: #fff;
  border-radius: var(--radius-lg); overflow: hidden;
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.club-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--brand);
}
.club-card-crest {
  width: auto; height: 70px; margin: 0 auto var(--sp-4);
  filter: drop-shadow(0 0 10px rgba(200,16,46,.55));
}
.club-card-pos { line-height: 1.1; }
.club-card-pos strong {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 3.6rem; line-height: 1; color: #fff;
}
.club-card-pos span,
.club-card-pts span {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.6);
}
.club-card-pts {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.14);
}
.club-card-pts strong {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 2.4rem; line-height: 1; color: var(--accent);
}
.club-card-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.14);
}
.club-card-stats dt {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.55);
}
.club-card-stats dd {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
}
.club-card-stats .is-pos { color: #52c48a; }
.club-card-stats .is-neg { color: var(--accent); }
.club-card-note {
  margin-top: var(--sp-4); font-size: var(--fs-sm);
  color: rgba(255,255,255,.72); line-height: 1.45;
}
.club-card-note strong { color: #fff; }

/* --- La tabla ----------------------------------------------------------
   table-layout: fixed para que respete los anchos declarados y el nombre
   largo se trunque. Con el layout automático la tabla crece hasta que entre
   "Guillermo Fuenzalida" entero y arrastra a toda la página al scroll. */
/* min-width: 0 anula el de .table (34rem): esa tabla scrollea a propósito,
   pero esta tiene que caber sin scroll y ya trunca el nombre. */
.standings-table { width: 100%; min-width: 0; table-layout: fixed; }
.standings-table th.col-pos, .standings-table td.col-pos { width: 2.75rem; text-align: center; }
.standings-table th.col-num, .standings-table td.col-num { width: 3.25rem; text-align: center; }

/* El desglose (PG, PE, PP, GF, GC) solo cuando sobra ancho. Con la tarjeta al
   lado, la tabla ronda los 700 px: diez columnas ahí quedan ilegibles. */
.col-detalle { display: none; }
@media (min-width: 1200px) {
  .col-detalle { display: table-cell; }
  .legend div.col-detalle { display: flex; }
  .standings-table th.col-num, .standings-table td.col-num { width: 2.6rem; }
  .standings-table td.col-detalle { color: var(--text-mute); }
}
.standings-table td.col-pos { font-family: var(--font-display); font-weight: 700; color: var(--text-mute); }
.standings-table td.col-pts { font-weight: 700; color: var(--brand); }
.standings-table th, .standings-table td { padding: var(--sp-2); }
/* Línea entre filas: sin esto son diez nombres flotando y el ojo se pierde de
   fila al leer los puntos, que están al otro extremo del ancho. */
.standings-table tbody td { border-bottom: 1px solid var(--border); }
.standings-table tbody tr:last-child td { border-bottom: 0; }

/* En la portada la tabla no ocupa los 1180 px del contenedor: son cinco
   columnas, y estiradas a todo el ancho dejan el nombre del club a un extremo
   y los puntos al otro, con 60 cm de vacío en medio en un monitor grande. */
/* Título, botones y tabla en UNA sola columna centrada de 46rem. Antes el
   título quedaba pegado al borde izquierdo del contenedor de 1180 y los
   botones y la tabla centrados: dos alineaciones distintas en el mismo bloque,
   que es lo que se lee como desorden. */
.section-tabla .section-head { max-width: 46rem; margin-inline: auto; }
.tabla-switch { max-width: 46rem; margin-inline: auto; }
/* Centrar una fila que scrollea (overflow-x: auto) la corta por los DOS lados
   y deja el primer botón inalcanzable: el centrado empuja el contenido fuera
   del inicio del scroll. Por eso en escritorio los botones se envuelven en vez
   de deslizarse, y solo ahí van centrados. En el teléfono sigue el deslizador,
   alineado al inicio, que es donde funciona. */
/* Los botones de división se envuelven en TODOS los anchos. Antes en teléfono
   se deslizaban en una sola fila y las últimas divisiones quedaban fuera de la
   pantalla: había que adivinar que eso se arrastraba. Envueltos se ven las
   siete de una, que es lo que se necesita para elegir. */
.tabla-switch .division-tabs.is-scroller {
  flex-wrap: wrap; overflow-x: visible; justify-content: center;
}
/* Pastillas más chicas en el teléfono: con el tamaño de escritorio las siete
   ocupaban tres filas y empujaban la tabla fuera de la primera pantalla. */
@media (max-width: 620px) {
  .tabla-switch .division-tab {
    font-size: var(--fs-sm); padding: .35rem .75rem;
  }
  .tabla-switch .division-tabs { gap: var(--sp-2) 6px; }
}
/* El encabezado ES el encabezado de la tarjeta, no una franja apoyada encima.
   Antes la tarjeta tenía relleno propio y la franja negra quedaba flotando con
   un marco blanco alrededor: se veía pegoteada. Ahora la tabla llena la
   tarjeta de borde a borde y es la tarjeta la que recorta las esquinas
   (overflow: hidden), así que el negro llega hasta el filo como corresponde. */
.standings-table { border-collapse: separate; border-spacing: 0; }
.standings-table thead th {
  color: rgba(255,255,255,.72); font-size: var(--fs-xs); letter-spacing: .1em;
  padding-block: var(--sp-3); box-shadow: inset 0 -2px 0 var(--brand);
}
.standings-table thead th.col-pts { color: #fff; }

/* «POS CLUB» se leía como una sola palabra: POS iba centrado en una columna
   angosta y CLUB arrancaba pegado al borde de la suya, sin ningún espacio en
   medio. El rótulo del puesto se alinea a la izquierda como el del club, y la
   columna del club arranca con su propio aire. */
.standings-table thead th.col-pos { text-align: left; }
.standings-table th:nth-child(2), .standings-table td:nth-child(2) { padding-left: var(--sp-4); }

.team { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.team-crest {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  background: var(--bg-alt); flex: none;
}
.team-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Barra de puntos: usa el ancho sobrante para que se vea de un golpe quien se
   despega. Es decorativa -el numero esta en la columna Pts- y por eso la vista
   la marca aria-hidden. */
.pts-bar {
  display: block; height: 4px; margin-top: var(--sp-1);
  background: var(--bg-alt); border-radius: 99px; overflow: hidden;
}
.pts-bar-fill {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand-dark), var(--brand));
}

/* La fila del club: el hincha entra a ver como va SU equipo, no quien puntea. */
.standings-table tr.is-club {
  background: var(--brand-light);
  box-shadow: inset 4px 0 0 var(--brand);
}
.standings-table tr.is-club:hover { background: var(--brand-light); }
.standings-table tr.is-club td { padding-block: var(--sp-3); }
.standings-table tr.is-club td:first-child { padding-left: var(--sp-2); }
.standings-table tr.is-club .team-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.25rem; letter-spacing: -.02em;
  color: var(--brand-dark);
}
.standings-table tr.is-club .team-crest {
  width: 38px; height: 38px; box-shadow: 0 0 0 2px var(--brand);
}
.standings-table tr.is-club .col-pos,
.standings-table tr.is-club .col-num { font-size: 1.1rem; font-weight: 700; color: var(--brand-dark); }
.standings-table tr.is-club .col-pts { font-size: 1.4rem; color: var(--brand); }
.standings-table tr.is-club .pts-bar { background: rgba(200,16,46,.18); }

/* Tablet: una columna y la tarjeta ARRIBA. Se quita el order de la tabla para
   que mande el HTML, donde la tarjeta va primero: en una sola columna el
   resumen del club tiene que leerse antes de la tabla, no después. */
@media (max-width: 900px) {
  /* minmax(0,…) y no 1fr a secas: 1fr se planta en el ancho mínimo del
     contenido, así que la tabla empujaba el grid y con él toda la página. */
  .standings-layout { grid-template-columns: minmax(0, 1fr); }
  .standings-wrap { order: 0; }
  .club-card {
    position: static; display: grid; align-items: center; text-align: left;
    grid-template-columns: auto 1fr 1fr; gap: var(--sp-4) var(--sp-5);
  }
  .club-card-crest { margin: 0; }
  .club-card-pts, .club-card-stats { margin-top: 0; padding-top: 0; border-top: 0; }
  .club-card-pos strong { font-size: 2.8rem; }
  .club-card-note { grid-column: 1 / -1; margin-top: 0; }
}

/* Movil: nada de scroll horizontal, los puntos son lo que se viene a mirar. */
@media (max-width: 620px) {
  /* La tarjeta no lleva relleno: el aire lo dan las celdas, que en teléfono se
     achican para que las diez filas entren sin scroll lateral. */
  .standings-table th, .standings-table td { padding-inline: var(--sp-2); }
  .standings-table th:nth-child(2), .standings-table td:nth-child(2) { padding-left: var(--sp-2); }
  .standings-table { font-size: var(--fs-sm); }
  .standings-table th, .standings-table td { padding: var(--sp-2) var(--sp-1); }
  /* 1,75rem alcanzaba para el número, pero no para el rótulo POS con el
     espaciado del encabezado: se montaba encima de CLUB. */
  .standings-table th.col-pos, .standings-table td.col-pos { width: 2.15rem; }
  .standings-table th.col-num, .standings-table td.col-num { width: 2.3rem; }
  .standings-table thead th { letter-spacing: .04em; }
  .standings-table thead th:first-child { padding-left: var(--sp-2); }
  .standings-table thead th:last-child  { padding-right: var(--sp-2); }

  .team { gap: var(--sp-2); }
  .team-crest { width: 24px; height: 24px; }
  .pts-bar { display: none; }        /* a este ancho es ruido, no informacion */

  .standings-table tr.is-club .team-name { font-size: 1rem; }
  .standings-table tr.is-club .team-crest { width: 30px; height: 30px; }
  .standings-table tr.is-club .col-pos,
  .standings-table tr.is-club .col-num { font-size: .95rem; }
  .standings-table tr.is-club .col-pts { font-size: 1.15rem; }

  /* Escudo y puesto arriba; abajo puntos, jugados y diferencia en tres
     columnas parejas. Con "auto 1fr" los puntos quedaban colgando solos. */
  .club-card {
    grid-template-columns: auto 1fr; padding: var(--sp-4); gap: var(--sp-3) var(--sp-4);
  }
  .club-card-crest { height: 56px; }
  .club-card-pos strong { font-size: 2.4rem; }
  .club-card-pts, .club-card-stats {
    grid-column: 1 / -1;
    padding-top: var(--sp-3); border-top: 1px solid rgba(255,255,255,.14);
  }
  .club-card-pts { display: flex; align-items: baseline; gap: var(--sp-2); }
  .club-card-pts strong { font-size: 2rem; }
  .club-card-stats { grid-template-columns: 1fr 1fr; }
}

.legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-5); padding: var(--sp-4);
  background: var(--bg-alt); border-radius: var(--radius); font-size: var(--fs-sm);
}
.legend > div { display: flex; gap: var(--sp-2); }
/* En la portada la leyenda va bajo una tabla centrada y sin caja: alineada a la
   izquierda quedaba colgando de un costado. */
.legend-compacta { justify-content: center; background: none; padding: 0; margin-top: var(--sp-4); }
.legend dt { font-weight: 700; color: var(--brand); }
.legend dd { margin: 0; color: var(--text-mute); }

/* --- Muro blando -------------------------------------------------------
   Lo que está del otro lado se difumina en vez de borrarse: así se ve que HAY
   algo —una tabla que sigue, una noticia que continúa— y el registro tiene un
   para qué. Vaciarlo no invita a nadie.

   Sin selección ni eventos para que no se copie ni se pueda tabular hacia
   adentro; en el HTML esas filas van con aria-hidden, o sea un lector de
   pantalla tampoco las anuncia. */
.fila-velada td, .velado {
  filter: blur(5px);
  user-select: none; pointer-events: none;
}
.fila-velada td { color: var(--text-mute); }
.velado { position: relative; max-height: 9rem; overflow: hidden; }
/* Se desvanece hacia abajo: un corte recto parece un error de maquetación. */
.velado::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 5rem;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

.muro {
  margin-top: var(--sp-5); padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-alt); text-align: center;
}
.muro-titulo {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
  color: var(--brand-dark);
}
.muro-texto { color: var(--text-mute); margin-top: var(--sp-1); }
.muro-acciones {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center;
  margin-top: var(--sp-4);
}
.muro-pie { margin-top: var(--sp-3); color: var(--text-mute); }

/* --- Ventana de ingreso ------------------------------------------------
   <dialog> nativo: el navegador lo centra y lo pone sobre todo lo demás sin
   z-index ni position: fixed de por medio. */
.modal {
  width: min(26rem, calc(100vw - 2rem));
  padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg); color: var(--text); box-shadow: var(--shadow-lg);
}
.modal::backdrop { background: rgba(13, 13, 13, .55); backdrop-filter: blur(2px); }
.modal[open] { animation: modal-entra .18s ease both; }
@keyframes modal-entra {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
}
.modal-caja { position: relative; padding: var(--sp-6); }
.modal-caja h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
.modal-caja .form { margin-top: var(--sp-4); }
.modal-cerrar {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 2rem; height: 2rem; line-height: 1; font-size: 1.5rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--text-mute);
}
.modal-cerrar:hover { background: var(--bg-alt); color: var(--text); }
/* En teléfono se pega abajo: el pulgar llega ahí, no al centro de la pantalla. */
@media (max-width: 620px) {
  .modal {
    margin: auto auto 0; width: 100vw; max-width: 100vw;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0;
  }
  .modal-caja { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
}

/* --- Entrar con Google ------------------------------------------------
   Botón blanco con borde: son las condiciones de marca de Google. No se pinta
   del rojo del club ni se le cambia la «G». */
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  background: #fff; color: #1f1f1f;
  border: 1px solid var(--border-strong);
  font-family: var(--font-display); font-weight: 600;
}
.btn-google:hover { background: var(--bg-alt); border-color: var(--text-mute); }
.icon-google { width: 1.15rem; height: 1.15rem; flex: none; }

/* Separador con el texto al medio: dos reglas y una etiqueta encima. */
.separador {
  display: flex; align-items: center; gap: var(--sp-4);
  margin: var(--sp-5) 0; color: var(--text-mute); font-size: var(--fs-sm);
}
.separador::before, .separador::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.aviso-cuenta {
  padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-alt); text-align: center;
}
.aviso-cuenta .btn-google { margin: var(--sp-4) 0 var(--sp-3); }

/* --- Contenido y misc ------------------------------------------------ */
.prose { margin-top: var(--sp-5); max-width: 42rem; }
.prose p { margin-bottom: var(--sp-4); }
.prose h2 { margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.breadcrumb { font-size: var(--fs-sm); color: var(--text-mute); margin-bottom: var(--sp-4); }
.meta-list { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-4); }
.meta-list dt {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-mute); font-weight: 600;
}
.meta-list dd { margin: 0; font-weight: 600; }

.pagination { display: flex; gap: var(--sp-1); justify-content: center; margin-top: var(--sp-7); }
.pagination a {
  padding: .5rem .9rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius); text-decoration: none; color: var(--text);
  font-family: var(--font-display); font-weight: 600;
}
.pagination a:hover { border-color: var(--brand); color: var(--brand); }
.pagination a.is-current { background: var(--brand); color: #fff; border-color: var(--brand); }

.center-head { justify-content: center; text-align: center; }
.center-head .lead { max-width: 44rem; margin-inline: auto; }
.center-head .eyebrow { justify-content: center; }

/* --- CTA -------------------------------------------------------------- */
.cta {
  position: relative; overflow: hidden;
  background: var(--bg-ink); color: #fff;
  padding-block: var(--sp-9);
}
.cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(90% 130% at 100% 0%, rgba(200,16,46,.45) 0%, transparent 60%);
}
.cta::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--brand);
}
.cta-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
}
.cta h2 { margin-bottom: var(--sp-2); }
.cta .muted { color: rgba(255,255,255,.72); }
.cta-inline {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-7); padding: var(--sp-5);
  background: var(--brand-light); border-radius: var(--radius-lg);
  border-left: 4px solid var(--brand);
}
.cta-inline p { font-weight: 600; }

.error-code {
  font-family: var(--font-display); font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 800; color: var(--brand-light); line-height: 1;
}

/* --- Footer ---------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--brand-dark); color: rgba(255,255,255,.75);
}
.site-footer::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--brand);
}
/* Tres columnas con anchos declarados y no `auto-fit`: con auto-fit las tres
   quedaban del mismo ancho, apiladas a la izquierda, y sobraba un cuarto de
   pantalla vacío a la derecha. La primera pesa más porque lleva el escudo. */
.footer-grid {
  display: grid; gap: var(--sp-6) var(--sp-8); padding-block: var(--sp-8);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1.4fr; }
}

.footer-club { display: flex; gap: var(--sp-4); align-items: start; }
.footer-escudo {
  height: 64px; width: auto; flex: none;
  /* Mismo criterio que el del header: contorno blanco real y sombra. */
  filter:
    drop-shadow(1px 0 0 rgba(255,255,255,.9))
    drop-shadow(-1px 0 0 rgba(255,255,255,.9))
    drop-shadow(0 1px 0 rgba(255,255,255,.9))
    drop-shadow(0 -1px 0 rgba(255,255,255,.9))
    drop-shadow(0 4px 8px rgba(0,0,0,.95));
}
.footer-nombre {
  display: block; color: #fff; font-family: var(--font-display);
  font-size: var(--fs-md); font-weight: 700; line-height: 1.2;
}
.footer-lema { color: rgba(255,255,255,.55); font-size: var(--fs-sm); margin-top: var(--sp-1); }

/* La red social con su nombre al lado: un círculo gris solo no dice a dónde
   lleva ni invita a nada. */
.footer-red {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-4); padding: .4rem .8rem .4rem .5rem;
  border: 1px solid rgba(255,255,255,.16); border-radius: 99px;
  color: rgba(255,255,255,.8); text-decoration: none; font-size: var(--fs-sm);
  transition: border-color .18s, color .18s, background .18s;
}
.footer-red:hover { border-color: var(--brand); background: rgba(200,16,46,.12); color: #fff; }
.footer-red .icon { width: 1.1rem; height: 1.1rem; flex: none; }

.footer-title {
  display: block; color: rgba(255,255,255,.5); margin-bottom: var(--sp-4);
  font-family: var(--font-display); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .14em; font-weight: 700;
}
.site-footer .muted { color: rgba(255,255,255,.58); }
.footer-links { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-base); }
.footer-links a { color: rgba(255,255,255,.8); text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }

/* Contacto: icono + dato, y el dato es un enlace. Antes las tres líneas pesaban
   igual que la dirección y nada se leía como algo que se pudiera tocar. */
.footer-datos { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-datos li { display: flex; gap: var(--sp-3); align-items: start; }
.footer-datos .icon { width: 1.15rem; height: 1.15rem; color: var(--accent); flex: none; margin-top: 2px; }
.footer-datos a { color: rgba(255,255,255,.85); text-decoration: none; }
.footer-datos a:hover { color: #fff; text-decoration: underline; }
.footer-datos a span { display: block; color: rgba(255,255,255,.5); font-size: var(--fs-sm); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: var(--sp-4); color: rgba(255,255,255,.45); font-size: var(--fs-sm);
}

/* --- Menú de escritorio -----------------------------------------------
   La píldora marca DÓNDE ESTÁS y eso se queda: en rojo se ve de una, mucho
   mejor que el subrayado de 2 px que había antes. Lo que se fue es la cápsula
   gris que envolvía a los siete enlaces: un recuadro al 6% de blanco que no se
   leía como grupo, competía de forma con el botón rojo y —lo importante— se
   comía el ancho que le faltaba a la marca.

   Las acciones de cuenta quedan afuera, separadas por un filete: «Ingresar» y
   «Hazte socio» no son secciones del sitio. */
/* 1280 y no 1240: a 1240 el bloque de marca se comprimía de 329 a 244 px y la
   bajada «Club Deportivo · 1945» se partía en dos. El corte va donde todo entra
   a tamaño natural, no donde todavía cabe apretado. */
@media (min-width: 1280px) {
  .nav > ul { gap: 2px; }
  .nav > ul a {
    padding: .45rem .55rem; border-radius: 99px; font-size: .95rem;
  }
  .nav > ul a::after { display: none; }   /* la píldora reemplaza al subrayado */
  .nav > ul a:hover { background: rgba(255,255,255,.1); color: #fff; }
  .nav > ul a[aria-current="page"] { background: var(--brand); color: #fff; }
  /* Sin la rayita vertical: separaba el menú de las acciones cuando había dos
     botones rojos que ordenar. Con una sola acción, era una línea puesta ahí
     sin motivo. El aire la reemplaza. */
  .nav-actions { padding-left: var(--sp-5); }
}

/* --- Responsive -------------------------------------------------------
   Tres cortes: tablet (menú colapsado), móvil grande y móvil chico. */
@media (max-width: 1279px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: calc(var(--header-h) + 3px) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-ink); border-bottom: 4px solid var(--brand);
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav > ul { flex-direction: column; gap: 0; }
  .nav > ul a { display: block; padding: var(--sp-3) 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 1.15rem; }
  .nav > ul a::after { display: none; }
  .nav-actions { margin-top: var(--sp-4); }
  .nav-actions .btn { flex: 1; justify-content: center; }
  .site-header .btn-ghost { border: 1px solid rgba(255,255,255,.25); }
}

@media (max-width: 720px) {
  .hero { min-height: 0; padding-block: var(--sp-8); }
  /* En el telefono NO se estira a la ventana: la pantalla es mucho mas alta
     que ancha, y un afiche 4:3 limitado por el ancho dejaria medio hero vacio
     debajo. La altura la da el contenido, con un piso para que entre el texto
     de las otras laminas y un techo para no pasarse de la ventana. */
  .hero.has-media {
    height: auto;
    min-height: 26rem;
    max-height: calc(100svh - var(--header-h));
    padding-block: var(--sp-4);
  }
  /* Aire a los lados: pegado a los bordes de la pantalla el afiche se lee
     como un banner de publicidad y no como parte del sitio. Las esquinas
     redondeadas hacen que el margen se vea intencional. */
  .hero-lamina.is-quiet .hero-lamina-media {
    inset: 0 var(--sp-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .hero-stats { gap: var(--sp-5); margin-top: var(--sp-6); }
  .hero-stat { min-width: 6.5rem; }
  .section-head, .page-head { align-items: start; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .cta-inner .btn { width: 100%; }
  .match { flex-wrap: wrap; gap: var(--sp-3); }

  /* En un telefono las tres horas no entran en fila: apiladas, cada una queda
     como renglon hora-division, que se lee de un vistazo. */
  .jornada-horarios-claro { flex-direction: column; }
  .jornada-horarios-claro li {
    flex-direction: row; align-items: center; justify-content: space-between;
    width: 100%; gap: var(--sp-4);
    border-inline-end: 0; border-bottom: 1px solid var(--border);
  }
  .jornada-horarios-claro li:last-child { border-bottom: 0; }
  .jornada-horarios li { min-width: 6rem; padding: var(--sp-2) var(--sp-3); }
  /* Cuatro cosas en una fila -fecha, los dos escudos, el nombre y la etiqueta-
     no entran en 393 px: el nombre quedaba en una columna de 80 px partido en
     una letra por linea. Envuelve, y el texto baja a su propio renglon. */
  .jornada-card-head { gap: var(--sp-3); padding: var(--sp-3); flex-wrap: wrap; }
  .jornada-card-info { flex: 1 0 100%; order: 3; }
  .jornada-card-head .badge { margin-inline-start: auto; }

  .hero-jornada .jornada-cuando { margin-bottom: var(--sp-5); }
  .jornada-horarios { margin-top: var(--sp-5); }
  .jornada-lado { gap: var(--sp-3); }
  .match-info { flex-basis: calc(100% - 4.5rem); }
}

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .brand-text strong { font-size: 1.05rem; }
  .brand-text small { letter-spacing: .12em; }
  .hero-actions .btn { width: 100%; }
  /* Al lado del botón de menú, 92 px comen la pantalla: el escudo y la
     barra se achican juntos para que el desplegable siga calzando. */
  :root { --header-h: 76px; }
  .brand-logo { height: 58px; }
  .brand-text strong { font-size: .98rem; letter-spacing: -.015em; }
  .brand-text small { font-size: .68rem; letter-spacing: .1em; }
}

/* --- Barra inferior (solo teléfono) -----------------------------------
   Se oculta desde 861 px: en escritorio el menú del header ya se ve entero y
   una barra flotante ahí abajo solo tapa contenido. */
.tabbar { display: none; }

@media (max-width: 860px) {
  /* La hamburguesa se va: a este ancho ya está la barra inferior, y dos menús
     con lo mismo es ruido. Queda para tablet (861–1279 px), donde no hay barra.
     El acceso a la cuenta lo toma el último botón de la barra. */
  .nav-toggle { display: none; }

  .tabbar {
    position: fixed; z-index: 60; inset: auto 0 0 0;
    /* Las columnas salen de cuántos ítems haya, no de un número fijo: la
       directiva ve uno más (Panel) y con `repeat(5, 1fr)` el sexto se caía a
       una segunda fila. */
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--bg-ink);
    border-top: 1px solid rgba(255,255,255,.1);
    /* La franja roja del club, del lado que se ve */
    box-shadow: 0 -1px 0 var(--brand), 0 -8px 24px rgba(0,0,0,.28);
    /* En iPhone la barra del sistema se come la fila de abajo */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .tabbar-item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: .5rem .25rem .55rem;
    background: none; border: 0; cursor: pointer;
    color: rgba(255,255,255,.62); text-decoration: none;
    font-family: var(--font-display); font-size: .68rem; font-weight: 600;
    letter-spacing: .01em;
    transition: color .15s;
  }
  .tabbar-item .icon { width: 1.35rem; height: 1.35rem; }
  .tabbar-item:hover { color: #fff; }
  /* Chrome en Android pinta un recuadro azul propio al tocar, que no es de
     ninguna paleta de acá y queda pegado hasta que se toca otra cosa. Se
     apaga, pero se repone la respuesta al tacto con el rojo del club: sin
     nada, tocar la barra no se siente. */
  .tabbar-item { -webkit-tap-highlight-color: transparent; }
  .tabbar-item:active { background: rgba(200,16,46,.22); color: #fff; }
  /* El activo va en --accent y no en --brand: el rojo del escudo da 3.3:1 sobre
     el negro de la barra y no llega a AA; --accent, que existe justo para los
     detalles sobre negro, da 4.66:1. En blanco no se distinguia del resto, que
     ya esta a 62% de opacidad. */
  .tabbar-item.is-on { color: var(--accent); }
  /* Marca sobre el ítem activo: el cambio de color solo no se nota en negro */
  .tabbar-item.is-on::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 1.6rem; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand);
  }
  .tabbar-item span { line-height: 1; }

  /* El contenido termina por encima de la barra: sin esto el pie y el último
     botón de cada página quedan tapados y no hay forma de llegar a ellos. */
  body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}