/* =====================================================================
   STYLES_NUEVO.CSS — SD Ribadeo
   Reescritura completa. Cambios principales respecto al original:
   · Fondo base más oscuro (#080c14) — los componentes blancos respiran
   · Paleta reducida a 4 roles de color con disciplina
   · Escala tipográfica modular (Major Third × 1.25)
   · 3 variantes de botón en lugar de 8
   · Consistencia de border-radius: 2 valores únicos
   · Eliminado glassmorphism sin imagen de fondo
   · Eliminado topbar
   · Eliminado shimmer en botones
   · Accesibilidad: skip link, sr-only, foco visible
   ===================================================================== */

/* ===================== TOKENS DE DISEÑO ===================== */
:root {
  /* Colores del club — no cambiar los valores del azul y el dorado */
  --azul:       #1769b0;   /* azul del escudo — uso: links, badges, nav activo */
  --azul-oscuro:#0b3a66;   /* azul marino — uso: footer, cabeceras de tabla */
  --azul-texto-oscuro: #4587c0; /* variante clara de --azul para texto/enlaces sobre fondo oscuro: --azul da solo 3.12:1 sobre --bg-surface (no cumple WCAG AA); esta variante da 4.6-5.1:1 */
  --dorado:     #ecb70c;   /* dorado del escudo — USO EXCLUSIVO: CTA primario, h2 underline, próximo partido */

  /* Fondos — jerarquía de capas */
  --bg-base:    #080c14;   /* fondo del body */
  --bg-surface: #0d1829;   /* fondo de secciones "alt" y cards de competición */
  --bg-card:    #ffffff;   /* fondo de tarjetas de contenido (noticias, torneos, formulario) */

  /* Texto */
  --txt-1:      #ffffff;   /* titulares, iconos sobre fondo oscuro */
  --txt-2:      rgba(255,255,255,.72); /* cuerpo sobre fondo oscuro */
  --txt-3:      #7285a5;   /* metadata, eyebrow, subtítulos — aclarado ligeramente respecto al original (#6b7fa0) para cumplir WCAG AA (4.5:1) sobre --bg-surface, antes en 4.38:1 */
  --txt-dark:   #0e2236;   /* texto sobre fondo blanco */
  --txt-muted:  #5b7185;   /* texto secundario sobre fondo blanco */

  /* Bordes y líneas */
  --border:     rgba(255,255,255,.10); /* bordes sutiles en fondo oscuro */
  --border-card:#e6eef6;               /* bordes en tarjetas blancas */

  /* Sombras */
  --shadow-sm:  0 4px 16px rgba(0,0,0,.20);
  --shadow-md:  0 10px 30px rgba(0,0,0,.28);
  --shadow-lg:  0 18px 50px rgba(0,0,0,.38);

  /* Radios — solo 2 valores */
  --r-sm: 10px;  /* inputs, botones estándar, badges */
  --r-lg: 18px;  /* cards, modales, contenedores */

  /* Escala tipográfica Major Third (× 1.25) */
  --t-xs:   0.80rem;  /* 12.8px — metadata, notas legales */
  --t-sm:   0.875rem; /* 14px   — labels, eyebrow */
  --t-base: 1rem;     /* 16px   — cuerpo */
  --t-md:   1.25rem;  /* 20px   — h3 destacado */
  --t-lg:   1.56rem;  /* 25px   — h3 grande */
  --t-xl:   1.95rem;  /* 31px   — h2 sección */
  --t-2xl:  2.44rem;  /* 39px   — h1 hero menor */
  --t-3xl:  3.05rem;  /* 49px   — h1 hero mayor */

  /* Tipografía — Barlow Condensed (titulares/nav/cifras) + Barlow (cuerpo).
     Cambio aplicado el 2026-09-07: sustituye a Montserrat + Inter. */
  --f-head: 'Barlow Condensed', 'Barlow', sans-serif;
  --f-body: 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Transición estándar */
  --ease: .22s ease;
}

/* ===================== RESET Y BASE ===================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-body);
  font-size: var(--t-base);
  color: var(--txt-2);
  background-color: var(--bg-base);
  line-height: 1.65;
  /* Evita scroll horizontal causado por los bloques full-bleed (100vw)
     de Noticias y Equipos. Ver "=== Noticias full-width ===". */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-head);
  color: var(--txt-1);
  line-height: 1.15;
}

img { display: block; max-width: 100%; }
a   { color: inherit; }

/* Accesibilidad: skip link */
.skip-link {
  position: absolute; top: -100%; left: 16px;
  background: var(--dorado); color: var(--azul-oscuro);
  padding: 8px 16px; border-radius: var(--r-sm); font-weight: 700; font-size: var(--t-sm);
  z-index: 9999;
}
.skip-link:focus { top: 16px; }

/* Accesibilidad: visualmente oculto pero accesible */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Foco visible para navegación con teclado */
:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===================== BOTONES — 3 variantes únicas ===================== */
/*
  .btn-primario  → acción principal (inscripción, CTA hero). Dorado + clip-path flecha.
  .btn-secundario → acción secundaria. Azul sólido. Reemplaza a .nav-cta, .menu-cta variantes.
  .btn-fantasma   → acción terciaria. Solo borde blanco. Para usar sobre fondos oscuros.
*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  padding: 14px 32px;
  border-radius: var(--r-sm);
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

/* Primario: dorado con forma de flecha — solo para las 2-3 acciones más importantes */
.btn-primario {
  background: var(--dorado);
  color: var(--azul-oscuro);
  box-shadow: 0 8px 22px rgba(236,183,12,.35);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  padding-right: 38px;
}
.btn-primario:hover { box-shadow: 0 12px 30px rgba(236,183,12,.50); }
.btn-primario::after { content: "→"; font-weight: 900; }

/* Secundario: azul sólido — navegación, acciones secundarias */
.btn-secundario {
  background: var(--azul);
  color: var(--txt-1);
  box-shadow: 0 4px 14px rgba(23,105,176,.30);
}
.btn-secundario:hover { background: var(--azul-oscuro); }

/* Fantasma: borde blanco — acciones terciarias sobre fondos oscuros */
.btn-fantasma {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  border: 1.5px solid rgba(255,255,255,.22);
  backdrop-filter: blur(4px);
}
.btn-fantasma:hover { background: rgba(255,255,255,.14); }

/* ===================== NAVBAR ===================== */
.navbar {
  position: sticky; top: 0; z-index: 115;
  display: flex; align-items: center;
  padding: 0 24px;
  height: 64px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--ease), background var(--ease);
  gap: 0;
}
.navbar.scrolled {
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  background: rgba(8,12,20,.97);
  backdrop-filter: blur(12px);
}

.logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
}
.logo-escudo {
  width: 44px; height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.30));
}
.logo-nombre {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: var(--t-base);
  color: var(--txt-1);
  letter-spacing: -.01em;
}

/* ===================== NAV DESKTOP (horizontal) ===================== */
.nav-desktop {
  display: flex; align-items: center; gap: 0;
  margin-left: 28px; flex: 1;
}
.nav-item {
  position: relative;
}
.nav-link {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-xs);
  color: var(--txt-2);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 22px 14px;
  transition: color var(--ease);
  white-space: nowrap;
  position: relative;
}
.nav-link::after {
  content: ""; position: absolute; bottom: 0; left: 14px; right: 14px;
  height: 2px; background: var(--dorado);
  transform: scaleX(0); transition: transform .25s ease;
}
.nav-link:hover, .nav-item.abierto .nav-link { color: var(--txt-1); }
.nav-link:hover::after, .nav-item.abierto .nav-link::after { transform: scaleX(1); }
.nav-link .nav-chevron {
  width: 10px; height: 10px; opacity: .5;
  transition: transform .25s ease;
}
.nav-item.abierto .nav-chevron { transform: rotate(180deg); }

.nav-link-prox {
  opacity: .45; cursor: default;
}
.nav-badge-prox {
  font-size: 9px; font-weight: 800;
  background: rgba(255,255,255,.10);
  color: var(--txt-3);
  padding: 2px 6px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .05em;
  line-height: 1;
}

/* ===================== MEGA MENÚ DESPLEGABLE ===================== */
.mega-menu {
  position: absolute; top: 100%; left: 0;
  min-width: 280px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--dorado);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  box-shadow: var(--shadow-lg);
  padding: 16px 0;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 110;
}
.nav-item.abierto .mega-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.mega-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 24px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--t-sm);
  color: var(--txt-2);
  text-decoration: none;
  transition: color var(--ease), background var(--ease);
}
.mega-link:hover {
  color: var(--txt-1); background: rgba(255,255,255,.05);
}
.mega-link:hover .mega-dot { background: var(--dorado); }
.mega-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: transparent; flex-shrink: 0;
  transition: background var(--ease);
}
.mega-sub {
  padding-left: 20px;
  border-left: 1px solid var(--border);
  margin-left: 24px;
}
.mega-sub .mega-link {
  font-size: var(--t-xs);
  padding: 7px 20px;
  color: var(--txt-3);
}
.mega-sub .mega-link:hover { color: var(--dorado); }

/* ===================== ACCIONES DEL NAV (redes + CTA) ===================== */
.nav-acciones {
  display: flex; align-items: center; gap: 14px;
  margin-left: auto; flex-shrink: 0;
}
.nav-redes {
  display: flex; gap: 6px;
}
.nav-redes a {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: var(--txt-2);
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
}
.nav-redes a:hover { background: var(--dorado); color: var(--azul-oscuro); }
.nav-redes svg { width: 16px; height: 16px; }

/* ===================== HAMBURGUESA (solo móvil) ===================== */
.menu-toggle {
  display: none;
  align-items: center;
  background: none; border: none; cursor: pointer;
  padding: 10px 6px;
  position: relative; z-index: 130;
  color: var(--txt-1);
}
.menu-toggle-icon {
  display: flex; flex-direction: column; gap: 5px; width: 24px;
}
.menu-toggle-icon i {
  display: block; height: 2px; width: 100%;
  background: var(--txt-1);
  border-radius: 2px;
  transition: transform .35s ease, opacity .25s ease;
}
.menu-toggle.activo .menu-toggle-icon i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.activo .menu-toggle-icon i:nth-child(2) { opacity: 0; }
.menu-toggle.activo .menu-toggle-icon i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===================== MENÚ MÓVIL (overlay) ===================== */
.menu-movil {
  position: fixed; inset: 0; z-index: 110;
  background-color: var(--bg-base);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
  display: flex; align-items: flex-start; justify-content: center;
  opacity: 0; visibility: hidden; transform: scale(1.03);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
  padding: 80px 24px 40px;
  overflow-y: auto;
}
.menu-movil.abierto { opacity: 1; visibility: visible; transform: scale(1); }
body.menu-abierto   { overflow: hidden; }

.menu-movil-nav {
  display: flex; flex-direction: column; gap: 4px;
  text-align: center; width: 100%; max-width: 400px;
  /* Centrado vertical cuando el contenido cabe; en cuanto no cabe, los
     márgenes auto colapsan a 0 y el menú se queda arriba, totalmente
     desplazable (evita que los primeros items queden inalcanzables). */
  margin-top: auto; margin-bottom: auto;
}
.menu-movil-nav a {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  color: rgba(255,255,255,.85);
  text-decoration: none;
  padding: 8px 16px;
  transition: color var(--ease);
}
.menu-movil-nav a:hover { color: var(--dorado); }
.menu-movil-nav .movil-cta {
  margin-top: 16px; align-self: center;
  background: var(--dorado); color: var(--azul-oscuro);
  font-size: 1rem; padding: 13px 36px 13px 30px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(236,183,12,.30);
}
.menu-movil-nav .movil-cta::after { content: "→"; margin-left: 10px; font-weight: 900; }
.menu-movil-redes {
  display: flex; gap: 10px; justify-content: center; margin-top: 24px;
}
.menu-movil-redes a {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: var(--txt-2);
  text-decoration: none; font-size: 1rem;
  transition: background var(--ease), color var(--ease);
}
.menu-movil-redes a:hover { background: var(--dorado); color: var(--azul-oscuro); }

/* ===================== HERO CARRUSEL ===================== */
.hero {
  position: relative;
  height: 88vh; min-height: 520px;
  overflow: hidden;
  background: var(--azul-oscuro);
}
.hero-slides { position: absolute; inset: 0; }

.hero-slide {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 80px 24px 60px;
  color: var(--txt-1);
  opacity: 0; transform: scale(1.04);
  transition: opacity .9s ease, transform 5s ease;
  pointer-events: none;
}
/* A partir de tablet/desktop el bloque de texto se ancla a la izquierda
   (en vez de centrarse como conjunto) para una composición más
   minimalista y asimétrica, dejando más imagen visible a la derecha.
   En móvil se mantiene centrado (sin espacio para ese desplazamiento). */
@media (min-width: 769px) {
  .hero-slide  { justify-items: start; padding-left: 96px; }
}
.hero-slide.activa { opacity: 1; transform: scale(1); pointer-events: auto; }

/* Overlay simplificado: un solo gradiente limpio */
.hero-slide::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(
    to right,
    rgba(8,12,20,.92) 0%,
    rgba(8,12,20,.70) 50%,
    rgba(8,12,20,.45) 100%
  );
}
.hero-slide .bg {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center 30%;
}

.hero-cont {
  position: relative; z-index: 1;
  max-width: 600px;
  text-align: left;
}

/* Eyebrow informativo — no decorativo */
.hero-eyebrow {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--txt-3);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Versión minimalista: título algo más contenido y con más aire
   respecto al eyebrow y al subtítulo (misma tipografía/peso/color). */
.hero-cont h1 {
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--txt-1);
  margin-bottom: 18px;
}
.hero-subtitulo {
  font-size: clamp(.95rem, 1.8vw, 1.1rem);
  color: var(--txt-2);
  margin-bottom: 34px;
  max-width: 440px;
}

.hero-btns {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}

/* Dots del carrusel */
.hero-dots {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 10px;
}
.hero-dots button {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55);
  background: transparent; cursor: pointer; transition: var(--ease); padding: 0;
}
.hero-dots button.activa {
  background: var(--dorado); border-color: var(--dorado);
  width: 28px; border-radius: 5px;
}

/* Flechas del hero — con SVG en lugar de caracteres raw */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.12); color: var(--txt-1);
  display: grid; place-items: center;
  backdrop-filter: blur(4px); transition: background var(--ease), transform var(--ease);
}
.hero-arrow:hover { background: var(--dorado); color: var(--azul-oscuro); }
.hero-arrow.izq { left: 24px; }
.hero-arrow.der { right: 24px; }

/* ===================== BARRA DE STATS ===================== */
.stats-bar {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats-bar-in {
  max-width: 1140px; margin: 0 auto; padding: 22px 24px;
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap;
}
.stat {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 8px 40px; text-align: center;
}
.stat-num {
  font-family: var(--f-head);
  font-weight: 900;
  font-size: var(--t-lg);
  color: var(--txt-1);
  line-height: 1;
}
/* Jugadores activos usa el dorado — el único uso de color de acento aquí */
.stat-destacado .stat-num { color: var(--dorado); }
.stat-lbl {
  font-size: var(--t-xs);
  color: var(--txt-3);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
}
.stat-div {
  width: 1px; height: 40px;
  background: var(--border);
  flex-shrink: 0;
}

/* ===================== SECCIONES ===================== */
.seccion {
  max-width: 1140px; margin: 0 auto; padding: 86px 24px;
}
.seccion-alt {
  background: var(--bg-surface);
  max-width: 100%;
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.seccion-alt > * { max-width: 1140px; margin-left: auto; margin-right: auto; }

/* Eyebrow — cambiado a var(--txt-3) que tiene contraste suficiente */
.eyebrow {
  display: block; text-align: center;
  color: var(--txt-3);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.seccion h2 {
  font-size: clamp(var(--t-xl), 4vw, var(--t-2xl));
  text-align: center;
  color: var(--txt-1);
  padding-bottom: 16px;
  position: relative;
}
/* Underline dorado — único uso del dorado en encabezados */
.seccion h2::after {
  content: ""; display: block;
  width: 48px; height: 3px; border-radius: 3px;
  background: var(--dorado);
  margin: 12px auto 0;
}

.subtitulo {
  text-align: center;
  color: var(--txt-2);
  margin-bottom: 44px;
  font-size: var(--t-base);
}

/* ===================== TABS DE SECCIÓN ===================== */
.section-tabs {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 36px;
}
.section-tab {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--txt-3);
  padding: 9px 22px;
  border-radius: 30px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: var(--ease);
}
.section-tab:hover {
  border-color: rgba(255,255,255,.25);
  color: var(--txt-1);
}
.section-tab.activa {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--txt-1);
}

/* ===================== NOTICIAS (carrusel horizontal con drag) ===================== */
.grid-noticias {
  display: flex; gap: 20px;
  overflow-x: auto; padding-bottom: 12px;
  cursor: grab;
  /* Scroll libre y nativo (sin 'smooth' ni scroll-snap): la rueda/trackpad, el
     dedo y el arrastre 1:1 responden al instante. 'smooth' animaba cada scroll
     (sensación lenta) y el snap "enganchaba" el arrastre a saltos. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.grid-noticias::-webkit-scrollbar { display: none; }
.grid-noticias.arrastrando { cursor: grabbing; user-select: none; }

.noticia {
  flex: 0 0 290px; height: 420px;
  position: relative; overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  scroll-snap-align: start;
  cursor: pointer;
  transition: box-shadow var(--ease), transform var(--ease);
}
.noticia:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.noticia:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }

.noticia-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.noticia-img.ph {
  background: linear-gradient(160deg, rgba(23,105,176,.6), var(--azul-oscuro));
}

.noticia-tag {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: rgba(8,12,20,.70); color: var(--txt-1);
  backdrop-filter: blur(4px);
  font-size: var(--t-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 5px 12px;
  border-left: 3px solid var(--dorado);
}

.noticia-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 20px;
  background: linear-gradient(to top, rgba(8,12,20,.95) 0%, transparent 100%);
  pointer-events: none;
}
.noticia .fecha {
  color: var(--dorado); font-weight: 700;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em;
}
.noticia h3 {
  margin: 6px 0 6px;
  color: var(--txt-1);
  font-size: var(--t-base);
  line-height: 1.3;
}
.noticia p  {
  color: var(--txt-2); font-size: var(--t-sm);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===================== MODAL DE NOTICIA AMPLIADA ===================== */
/* Mismo patrón que el lightbox de la galería: overlay fijo + tarjeta
   centrada, pero con foto + texto completo en vez de solo una imagen. */
.noticia-modal {
  display: none;
  position: fixed; inset: 0; z-index: 220;
  place-items: center; padding: 24px;
}
.noticia-modal.abierta { display: grid; }
.noticia-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(4,6,10,.86); backdrop-filter: blur(2px);
}
.noticia-modal-box {
  position: relative; z-index: 1;
  width: min(640px, 100%);
  height: min(640px, 88vh);
  max-height: min(640px, 88vh);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  overflow: hidden;
  animation: noticiaModalIn .22s ease;
}
@keyframes noticiaModalIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.noticia-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(8,12,20,.55); color: var(--txt-1);
  display: grid; place-items: center;
  backdrop-filter: blur(4px);
  transition: background var(--ease);
}
.noticia-modal-close:hover { background: rgba(8,12,20,.8); }
/* La foto ocupa TODO el modal como fondo (igual que en la tarjeta de la
   lista); el texto va superpuesto encima, no debajo en un panel aparte. */
.noticia-modal-img {
  position: absolute; inset: 0;
  overflow: hidden; background-color: var(--azul-oscuro);
}
/* Capa de fondo: la misma imagen recortada y difuminada, de respaldo detrás
   de la capa nítida (por si esta tuviera transparencias). */
.noticia-modal-img-fondo {
  position: absolute; inset: -14px;
  background-size: cover; background-position: center;
  filter: blur(20px) brightness(.55) saturate(1.15);
  transform: scale(1.15);
}
/* Capa nítida: en escritorio, la foto a pantalla completa del modal (recortada,
   igual que en la tarjeta de la lista). Es una etiqueta <img> real (no un fondo
   CSS) para que en móvil (ver media query más abajo) se pueda mostrar a su
   proporción original sin recortarla — con background-image eso no es posible
   porque no tiene "tamaño natural" que el navegador pueda respetar. */
.noticia-modal-img-foto {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Degradado inferior para que el texto superpuesto siga siendo legible
   encima de la foto, sea cual sea su brillo. */
.noticia-modal-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(4,6,10,.95) 0%, rgba(4,6,10,.72) 30%, rgba(4,6,10,.15) 58%, transparent 78%);
}
.noticia-modal-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  max-height: 78%;
  padding: 22px 26px 26px;
  overflow-y: auto;
}
.noticia-modal-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.noticia-modal-tag {
  background: rgba(236,183,12,.14); color: var(--dorado);
  font-size: var(--t-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 20px;
}
.noticia-modal-fecha {
  color: var(--txt-3); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.noticia-modal-body h3 {
  font-size: var(--t-xl); line-height: 1.25; margin: 0 0 12px; color: var(--txt-1);
}
.noticia-modal-body p { color: var(--txt-2); font-size: var(--t-base); line-height: 1.6; }

body.sin-scroll { overflow: hidden; }

/* El listado de noticias en móvil sigue siendo el mismo carrusel horizontal
   que en escritorio (arrastrar/deslizar para pasar de una a otra) — aquí solo
   se afina para que el deslizamiento se sienta nativo y suave: cada tarjeta
   "engancha" al soltar el dedo (scroll-snap) en vez de quedarse a medias entre
   dos noticias. "proximity" (no "mandatory") para que el enganche sea suave y
   no un salto brusco. No se toca el tamaño ni la disposición de las tarjetas. */
@media (max-width: 768px) {
  .grid-noticias { scroll-snap-type: x proximity; }
}

/* ===================== MODAL DE NOTICIA EN MÓVIL — estilo publicación =====================
   En escritorio el modal sigue igual (foto de fondo recortada + texto superpuesto,
   sin tocar). En móvil se cambia a un formato "publicación": la foto se ve
   COMPLETA con su proporción original (nunca recortada ni deformada — por eso
   la capa nítida pasa a ser una <img> con la altura en automático en vez de un
   fondo CSS a tamaño fijo) y el texto va DEBAJO, no encima, en un panel claro
   del mismo ancho que la foto. Si el texto es largo, se desplaza toda la
   tarjeta (imagen + texto) como una sola pieza, igual que al abrir una
   publicación en Instagram. */
@media (max-width: 640px) {
  .noticia-modal { padding: 0; align-items: flex-end; }
  .noticia-modal-box {
    width: 100%;
    height: auto;
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-card);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    animation: noticiaModalInMovil .22s ease;
  }

  /* El botón de cerrar queda fijo en la esquina de la pantalla (no de la
     tarjeta), para poder cerrar en cualquier momento aunque se haya
     desplazado hacia abajo leyendo el texto. */
  .noticia-modal-close { position: fixed; top: 14px; right: 14px; z-index: 5; }

  .noticia-modal-img {
    position: static;
    inset: auto;
    background-color: var(--bg-surface);
  }
  .noticia-modal-img-fondo { display: none; }
  .noticia-modal-img-foto {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;       /* clave: se dimensiona sola según la proporción real de la foto */
    object-fit: contain;
    aspect-ratio: auto;
  }
  .noticia-modal-img::after { display: none; }

  .noticia-modal-body {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding: 18px 20px 26px;
  }
  .noticia-modal-tag { background: var(--azul); color: var(--txt-1); }
  .noticia-modal-fecha { color: var(--txt-muted); }
  .noticia-modal-body h3 { color: var(--txt-dark); }
  .noticia-modal-body p  { color: var(--txt-muted); }

  @keyframes noticiaModalInMovil {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ===================== EQUIPOS ===================== */
.grid-equipos {
  display: flex; gap: 20px;
  overflow-x: auto; padding-bottom: 12px;
  cursor: grab;
  /* Scroll libre y nativo (sin 'smooth' ni scroll-snap): respuesta inmediata. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.grid-equipos::-webkit-scrollbar { display: none; }
.grid-equipos.arrastrando { cursor: grabbing; user-select: none; }
/* Escudos y fotos dentro de los carruseles: no se pueden "agarrar" por separado
   (evita la imagen fantasma del arrastre nativo); la tarjeta se mueve entera. */
.grid-equipos img, .grid-noticias img { -webkit-user-drag: none; user-drag: none; user-select: none; }
.grid-equipos .equipo, .grid-noticias .noticia { user-select: none; -webkit-user-select: none; }

.equipo {
  flex: 0 0 280px; height: 400px;
  position: relative; overflow: hidden;
  border-radius: var(--r-sm);
  text-align: center;
  /* CAMBIADO: fondo sólido en lugar de glassmorphism sin imagen */
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  scroll-snap-align: start;
  transition: box-shadow var(--ease), transform var(--ease);
  /* CAMBIADO: la tarjeta es ahora interactiva (lleva directo a su plantilla) */
  cursor: pointer;
}
.equipo:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }
.equipo::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--dorado); transform: scaleX(0); transition: transform var(--ease); z-index: 2;
}
.equipo:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.equipo:hover::before { transform: scaleX(1); }

.equipo-foto {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity .5s ease;
}
.equipo-foto::after {
  content: ""; position: absolute; inset: 0;
  /* degradado solo abajo: la foto del equipo se ve limpia arriba y el texto se lee sobre el césped */
  background: linear-gradient(to top, rgba(8,12,20,.94) 0%, rgba(8,12,20,.62) 28%, rgba(8,12,20,0) 52%);
}
.equipo:hover .equipo-foto { opacity: 1; }

.equipo-contenido {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  /* en reposo el bloque queda centrado; al pasar el ratón baja al césped y deja ver al equipo */
  padding: 0 20px 109px;
  transition: padding-bottom .5s ease;
}
.equipo:hover .equipo-contenido { padding-bottom: 18px; }
.equipo .escudo-equipo {
  width: 90px; height: 90px; margin: 0 auto 16px;
  display: grid; place-items: center;
  transition: width .5s ease, height .5s ease, margin .5s ease;
}
.equipo:hover .escudo-equipo { width: 44px; height: 44px; margin-bottom: 6px; }
.equipo:hover h3 { text-shadow: 0 2px 8px rgba(0,0,0,.6); margin-top: 0; }
.equipo:hover .edad { color: var(--txt-2); }
.equipo .escudo-equipo img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.3));
  transition: transform var(--ease);
}
.equipo:hover .escudo-equipo img { transform: scale(1.07); }
.equipo h3    { color: var(--txt-1); margin: 8px 0 5px; font-size: var(--t-base); }
.equipo .edad { color: var(--txt-3); font-weight: 600; font-size: var(--t-sm); }
.equipo .jug  { color: var(--txt-2); font-size: var(--t-xs); margin-top: 4px; }

/* ===================== PRÓXIMOS PARTIDOS ===================== */
.grid-partidos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}
.partido-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform var(--ease), box-shadow var(--ease);
}
.partido-card::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
  background: linear-gradient(to bottom, var(--dorado), var(--azul));
}
.partido-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.pc-cabecera {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 14px 18px 14px 24px;
  border-bottom: 1px solid var(--border);
}
.pc-equipo { font-family: var(--f-head); font-weight: 900; color: var(--txt-1); font-size: var(--t-base); }
.pc-comp {
  color: var(--azul-oscuro); background: rgba(155,208,239,.15); color: rgba(155,208,239,.9);
  font-weight: 700; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 9px; border-radius: var(--r-sm);
  white-space: nowrap;
}
.pc-cuerpo { padding: 18px 18px 14px 24px; flex: 1; }
.pc-rival  { font-weight: 800; color: var(--txt-1); font-size: var(--t-md); }
.pc-vs     { color: var(--dorado); font-weight: 900; margin-right: 5px; }
.pc-pie {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 8px;
  padding: 12px 18px 16px 24px;
  border-top: 1px solid var(--border);
}
.pc-datos { color: var(--txt-3); font-size: var(--t-xs); line-height: 1.5; }
.pc-cond  {
  display: inline-block; padding: 4px 12px;
  font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  border-radius: var(--r-sm);
}
.pc-cond.local    { background: rgba(255,255,255,.10); color: var(--txt-2); }
.pc-cond.visitante{ background: rgba(236,183,12,.15);  color: var(--dorado); }

/* ===================== PLANTILLA / FICHAS ===================== */
.plantilla-tabs {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px;
}
.tab-equipo {
  background: transparent; border: 1.5px solid var(--border);
  color: var(--txt-3);
  padding: 8px 18px; border-radius: 30px;
  font-weight: 700; font-size: var(--t-sm); cursor: pointer; transition: var(--ease);
}
.tab-equipo:hover  { border-color: rgba(255,255,255,.3); color: var(--txt-1); }
.tab-equipo.activa { background: var(--azul); border-color: var(--azul); color: var(--txt-1); }

.grid-jugadores {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px;
}
/* Tarjeta de jugador: la foto ES la tarjeta (proporción 2:3 = la de las fotos,
   sin recortes). Nombre y cumpleaños aparecen en un overlay solo al interactuar. */
.jugador {
  position: relative; aspect-ratio: 2 / 3;
  border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(160deg, rgba(23,105,176,.5), var(--azul-oscuro));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-sm);
  transition: transform .35s ease, box-shadow .35s ease;
  cursor: default; -webkit-tap-highlight-color: transparent;
}
.jugador:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.jugador .foto-jug {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  background-image: linear-gradient(160deg, rgba(23,105,176,.5), var(--azul-oscuro));
}
/* Escudo del equipo en la esquina (Alevines = Barres C.F., resto = SD Ribadeo) */
.jugador .escudo-badge {
  position: absolute; top: 10px; left: 10px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
  z-index: 2; pointer-events: none;
}
.jugador .escudo-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Sin foto: el escudo del equipo, grande y suave, hace de marcador de posición */
.jugador .foto-jug.sin-foto::after {
  content: ''; position: absolute; inset: 0;
  background: var(--escudo-sin-foto, none) center / 46% no-repeat;
  opacity: .22;
}
/* Overlay: degradado azul marino -> transparente, más denso abajo para leer */
.jugador .jug-overlay {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: flex-end;
  padding: 16px 14px;
  background: linear-gradient(to top,
    rgba(8,12,20,.92) 0%, rgba(11,58,102,.70) 34%, rgba(11,58,102,.18) 62%, rgba(11,58,102,0) 80%);
  opacity: 0;
  transition: opacity .38s ease;
  pointer-events: none;
}
.jugador .jug-datos {
  text-align: left; width: 100%;
  opacity: 0; transform: translateY(12px);
  transition: opacity .38s ease, transform .45s cubic-bezier(.22,.8,.3,1);
}
.jugador .jug-datos h4 {
  color: #fff; font-size: var(--t-base); line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.jugador .jug-datos .pos {
  display: block; color: #8fc3ee; font-size: var(--t-xs);
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-top: 3px;
}
.jugador .jug-datos .jug-meta {
  display: block; color: rgba(255,255,255,.82); font-size: var(--t-sm);
  margin-top: 4px;
}
/* Visible: teclado (focus-visible) o toque en móvil (.activa) */
.jugador:focus-visible .jug-overlay,
.jugador.activa .jug-overlay { opacity: 1; }
.jugador:focus-visible .jug-datos,
.jugador.activa .jug-datos { opacity: 1; transform: none; }
/* Solo dispositivos con ratón: hover */
@media (hover: hover) {
  .jugador:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
  .jugador:hover .jug-overlay { opacity: 1; }
  .jugador:hover .jug-datos { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jugador, .jugador .jug-overlay, .jugador .jug-datos { transition: opacity .15s linear; transform: none !important; }
}
.plantilla-vacia { text-align: center; color: var(--txt-2); grid-column: 1/-1; padding: 28px; }

/* Nota privacidad — CAMBIADO: sin estilo inline, con icono SVG */
.nota-privacidad {
  display: flex; align-items: flex-start; gap: 7px;
  text-align: left; max-width: 640px; margin: 18px auto 0;
  font-size: var(--t-xs); color: var(--txt-3); line-height: 1.5;
}
.nota-privacidad a { color: var(--azul-texto-oscuro); text-decoration: underline; }
.ico-lock { flex-shrink: 0; margin-top: 2px; opacity: .7; }

/* ===================== COMPETICIÓN: CLASIFICACIÓN Y RESULTADOS =====================
   Rediseño oscuro y minimalista (a diferencia de las tarjetas "blancas" del resto
   del sitio), con paleta propia pedida por el club — fondo antracita/azul y acento
   azul SD Ribadeo — coherente en estructura con el bloque de Próximos partidos.
   NOTA: --comp-acento usa el azul de marca (var(--azul)) para no tener dos azules
   de marca distintos en la web (antes era un tono propio, #1E4F9A). */
#clasificacion {
  --comp-bg:     #0E1117;
  --comp-txt-1:  #FFFFFF;
  --comp-txt-2:  #A0A0A0;
  --comp-acento: var(--azul);
  --comp-acento-claro: #5b8fd6;
  --comp-borde:  rgba(255,255,255,.09);
}

/* --- Desplegable de equipo (mismo patrón accesible que Próximos partidos,
   con su propio color de acento para diferenciarlo visualmente) --- */
.comp-filtros { display: flex; justify-content: center; margin: 0 auto 10px; }
.comp-equipo-wrap { position: relative; width: max-content; max-width: 100%; z-index: 5; }
.comp-drop-btn {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  min-width: 250px; text-align: left;
  background: var(--comp-bg); border: 1px solid var(--comp-borde); border-radius: var(--r-sm);
  padding: 11px 15px; color: var(--comp-txt-1);
  transition: border-color var(--ease), background var(--ease);
}
.comp-drop-btn:hover { border-color: rgba(30,79,154,.6); }
.comp-drop-btn[aria-expanded="true"] { border-color: var(--comp-acento); }
.comp-drop-ico {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%; background: rgba(30,79,154,.18); color: var(--comp-acento-claro);
}
.comp-drop-ico svg { width: 17px; height: 17px; }
.comp-drop-txt { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.comp-drop-txt b { font-family: var(--f-head); font-weight: 800; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .04em; }
.comp-drop-txt small { color: var(--comp-txt-2); font-size: var(--t-xs); }
.comp-drop-chevron { width: 15px; height: 15px; color: var(--comp-txt-2); transition: transform .25s ease; flex-shrink: 0; }
.comp-drop-btn[aria-expanded="true"] .comp-drop-chevron { transform: rotate(180deg); color: var(--comp-acento-claro); }

.comp-drop-list {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 6px;
  list-style: none; background: var(--comp-bg); border: 1px solid var(--comp-borde);
  border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
  max-height: 320px; overflow-y: auto; z-index: 10;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.comp-equipo-wrap.abierto .comp-drop-list { opacity: 1; visibility: visible; transform: none; }
.comp-drop-opt {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 12px; border-radius: 8px; color: var(--comp-txt-2);
  transition: background var(--ease), color var(--ease);
}
.comp-drop-opt:hover, .comp-drop-opt.marcado { background: rgba(30,79,154,.16); color: var(--comp-txt-1); }
.comp-drop-opt span { font-family: var(--f-head); font-weight: 700; font-size: var(--t-sm); }
.comp-drop-check { width: 16px; height: 16px; color: var(--comp-acento-claro); opacity: 0; flex-shrink: 0; }
.comp-drop-opt[aria-selected="true"] .comp-drop-check { opacity: 1; }
.comp-drop-opt[aria-selected="true"] span { color: var(--comp-acento-claro); }

.comp-competicion {
  text-align: center; margin: 0 0 30px;
  font-size: var(--t-xs); color: var(--comp-txt-2);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}

/* --- Pestañas Clasificación/Resultados: mismo componente .section-tab del
   resto del sitio, con el acento azul propio de esta sección al activarse --- */
#clasificacion .section-tab.activa { background: var(--comp-acento); border-color: var(--comp-acento); }
#clasificacion .section-tab:not(.activa):hover { border-color: rgba(30,79,154,.55); }

/* --- Caja oscura que sustituye el antiguo fondo blanco --- */
#clasificacion .tabla-box {
  background: var(--comp-bg);
  padding: 26px; border-radius: var(--r-lg);
  box-shadow: none; border: 1px solid var(--comp-borde);
}
#clasificacion .tabla-box h3 { color: var(--comp-txt-1); margin-bottom: 16px; }

#clasificacion .tabla-clasif { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
#clasificacion .tabla-clasif th {
  background: transparent; color: var(--comp-txt-2);
  padding: 10px 6px; text-align: center;
  font-family: var(--f-head); font-weight: 700; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--comp-borde);
}
#clasificacion .tabla-clasif th:nth-child(2) { text-align: left; }
#clasificacion .tabla-clasif td {
  padding: 12px 6px; text-align: center;
  border-bottom: 1px solid var(--comp-borde); color: var(--comp-txt-1);
  transition: background var(--ease);
}
#clasificacion .tabla-clasif td:nth-child(2) { text-align: left; font-weight: 600; }
#clasificacion .tabla-clasif tr:last-child td { border-bottom: none; }
#clasificacion .tabla-clasif tr:hover td { background: rgba(30,79,154,.14); }
#clasificacion .tabla-clasif tr.destacado td { background: rgba(30,79,154,.20); color: var(--comp-acento-claro); font-weight: 700; }
#clasificacion .origen-dato { margin-top: 12px; font-size: var(--t-xs); color: var(--comp-txt-2); font-style: italic; }

/* --- Escudo pequeño junto al nombre del equipo en la tabla de clasificación.
   Mismo criterio que los escudos de "Próximos partidos" (.pp-crest): sin
   fondo ni aro (ya vienen recortados), placeholder de iniciales con chapa
   de color para el rival sin escudo fiable todavía. --- */
#clasificacion .clasif-equipo { display: flex; align-items: center; gap: 8px; }
#clasificacion .clasif-crest {
  width: 22px; height: 22px; flex-shrink: 0;
  display: grid; place-items: center; object-fit: contain;
}
#clasificacion .clasif-crest-ph {
  border-radius: 50%;
  background: linear-gradient(150deg, var(--azul), var(--azul-oscuro));
  border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-family: var(--f-head); font-weight: 800; font-size: .55rem;
}

#clasificacion .resultado {
  display: grid; grid-template-columns: 65px 1fr auto 1fr;
  gap: 8px; align-items: center;
  padding: 13px 10px; border-bottom: 1px solid var(--comp-borde);
  border-radius: var(--r-sm);
  transition: background var(--ease);
}
#clasificacion .resultado:hover { background: rgba(30,79,154,.12); }
#clasificacion .resultado:last-child { border-bottom: none; }
#clasificacion .r-fecha   { font-size: var(--t-xs); color: var(--comp-txt-2); }
#clasificacion .r-equipo  { font-weight: 600; font-size: var(--t-sm); color: var(--comp-txt-1); }
#clasificacion .r-marcador{
  background: var(--comp-acento); color: #fff;
  padding: 4px 11px; border-radius: var(--r-sm);
  font-weight: 800; font-size: var(--t-sm);
}
#clasificacion .plantilla-vacia { color: var(--comp-txt-2); }

/* ===================== TORNEOS ===================== */
.grid-torneos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px;
}
.torneo-card {
  background: var(--bg-card); border: 1px solid var(--border-card);
  border-radius: var(--r-lg); padding: 24px 20px;
  box-shadow: var(--shadow-sm); text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: transform var(--ease), box-shadow var(--ease);
}
.torneo-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tc-cat {
  display: inline-block; background: var(--azul); color: var(--txt-1);
  padding: 4px 14px; border-radius: 20px;
  font-weight: 800; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px;
}
.torneo-card h3  { color: var(--txt-dark); font-size: var(--t-base); line-height: 1.3; margin-bottom: 10px; }
.tc-datos        { color: var(--txt-muted); font-size: var(--t-sm); margin-bottom: 18px; }
.torneo-card .btn{ margin-top: auto; }

/* ===================== EL CLUB ===================== */
.club-wrap {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 48px; align-items: center;
}
.club-texto h3  { color: var(--txt-1); font-size: var(--t-lg); margin-bottom: 14px; }
.club-texto p   { color: var(--txt-2); margin-bottom: 14px; }
.club-lateral   { display: flex; flex-direction: column; align-items: center; gap: 28px; }

.escudo-media {
  width: 200px; max-width: 100%; aspect-ratio: 1;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.4));
}
.escudo-media .escudo-foto {
  width: 100%; height: 100%; object-fit: contain;
}
.club-hitos {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0;
}
.hito {
  padding: 0 20px; text-align: center;
  border-right: 1px solid var(--border);
}
.hito:last-child { border-right: none; }
.hito b    { display: block; font-family: var(--f-head); font-size: var(--t-xl); font-weight: 900; color: var(--txt-1); }
.hito span { color: var(--txt-3); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; }

/* ===================== GALERÍA ===================== */
.grid-galeria-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.galeria-card {
  position: relative;
  height: 320px;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: box-shadow .35s ease, transform .35s ease;
}
.galeria-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}
.galeria-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.galeria-card:hover img { transform: scale(1.06); }
.galeria-card-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 24px;
  background: linear-gradient(to top, rgba(8,12,20,.88) 0%, rgba(8,12,20,.4) 60%, transparent 100%);
  z-index: 1;
}
.galeria-card-label h3 {
  font-family: var(--f-head);
  font-size: var(--t-md); font-weight: 800;
  color: var(--txt-1);
  margin: 0;
}
.galeria-card-label span {
  font-size: var(--t-xs); color: var(--dorado);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em;
}
.galeria-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--dorado);
  transform: scaleX(0); transition: transform .3s ease;
  z-index: 2;
}
.galeria-card:hover::before { transform: scaleX(1); }

@media (max-width: 480px) {
  .grid-galeria-cards { grid-template-columns: 1fr; }
  .galeria-card { height: 240px; }
}

/* ===================== INSCRIPCIÓN + FAQ ===================== */
.inscripcion-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start;
}

/* Formulario */
.formulario {
  background: var(--bg-card);
  padding: 30px; border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border-card);
}
.formulario label {
  display: block; font-weight: 600; font-size: var(--t-sm);
  color: var(--txt-dark); margin: 14px 0 5px;
}
.formulario label:first-of-type { margin-top: 0; }
.formulario input, .formulario select {
  width: 100%; padding: 11px 13px;
  border: 2px solid var(--border-card); border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--t-sm); color: var(--txt-dark);
  background: var(--bg-card);
  transition: border-color var(--ease);
}
.formulario input:focus, .formulario select:focus {
  outline: none; border-color: var(--azul);
}

/* Desplegable de Categoría — mismo componente accesible que Próximos partidos/
   Competición, adaptado al tema claro del formulario (antes era un <select> nativo). */
.cat-drop-wrap { position: relative; }
.cat-drop-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; text-align: left; font-family: inherit; font-size: var(--t-sm);
  padding: 11px 13px; border: 2px solid var(--border-card); border-radius: var(--r-sm);
  background: var(--bg-card); color: var(--txt-dark);
  transition: border-color var(--ease);
}
.cat-drop-btn:hover { border-color: rgba(23,105,176,.5); }
.cat-drop-btn[aria-expanded="true"] { border-color: var(--azul); outline: none; }
.cat-drop-btn.cat-drop-error-activa { border-color: #c0392b; }
.cat-drop-txt { flex: 1; min-width: 0; }
.cat-drop-chevron { width: 13px; height: 13px; color: var(--txt-muted); transition: transform .2s ease; flex-shrink: 0; }
.cat-drop-btn[aria-expanded="true"] .cat-drop-chevron { transform: rotate(180deg); color: var(--azul); }
.cat-drop-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg); list-style: none; margin: 0; padding: 6px;
  max-height: 260px; overflow-y: auto;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.cat-drop-wrap.abierto .cat-drop-list { opacity: 1; transform: none; pointer-events: auto; }
.cat-drop-opt {
  padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: var(--t-sm); color: var(--txt-dark);
}
.cat-drop-opt:hover, .cat-drop-opt.marcado { background: rgba(23,105,176,.1); }
.cat-drop-opt[aria-selected="true"] { color: var(--azul); font-weight: 700; }
.cat-drop-error {
  color: #c0392b; font-size: var(--t-xs); margin: 6px 0 0;
}

/* Checkbox RGPD */
.rgpd-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px;
}
.rgpd-check input[type="checkbox"] {
  width: 18px; height: 18px; flex-shrink: 0;
  margin-top: 2px; accent-color: var(--azul); cursor: pointer;
}
.rgpd-check label {
  margin: 0; font-size: var(--t-xs); line-height: 1.5; cursor: pointer;
}
.rgpd-check a { color: var(--azul); text-decoration: underline; }
.formulario .btn { margin-top: 20px; width: 100%; justify-content: center; }
.form-msg { margin-top: 10px; text-align: center; font-weight: 600; color: #16a34a; font-size: var(--t-sm); }

/* FAQ — acordeón animado (button + panel, accesible con teclado) */
.faq { display: flex; flex-direction: column; }
.faq-titulo {
  font-size: var(--t-lg); color: var(--txt-1); margin-bottom: 20px;
}
.faq-lista { display: flex; flex-direction: column; gap: 8px; }

.faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--ease);
}
.faq-item:hover { border-color: rgba(255,255,255,.2); }
.faq-item.abierto { border-color: var(--azul); }

.faq-q {
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: none;
  padding: 16px 20px;
  font-family: var(--f-head); font-weight: 700;
  font-size: var(--t-sm); color: var(--txt-1);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-ico {
  width: 14px; height: 14px; flex-shrink: 0; color: var(--txt-3);
  transition: transform .3s ease, color var(--ease);
}
.faq-item.abierto .faq-ico { transform: rotate(180deg); color: var(--dorado); }

/* Panel de respuesta: animación de altura con grid-template-rows (0fr → 1fr) */
.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq-item.abierto .faq-a { grid-template-rows: 1fr; }
.faq-a-in { overflow: hidden; }
.faq-a p {
  padding: 0 20px 16px; margin: 0;
  font-size: var(--t-sm); color: var(--txt-2); line-height: 1.6;
}
.faq-a a { color: var(--azul-texto-oscuro); text-decoration: underline; }

/* ===================== CHATBOT FLOTANTE ===================== */
/* Botón burbuja (abajo-derecha) */
.chat-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 120;
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(140deg, var(--azul), var(--azul-oscuro));
  color: #fff; box-shadow: 0 10px 28px rgba(11,58,102,.45);
  display: grid; place-items: center;
  transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease;
  animation: chatFabIn .4s ease both;
}
.chat-fab:hover { transform: scale(1.06); box-shadow: 0 14px 34px rgba(11,58,102,.55); }
/* Atenuado mientras se hace scroll en móvil, para no tapar el contenido que pasa debajo
   (ver script.js). Vuelve a la normalidad en cuanto el scroll se detiene o se abre el chat. */
.chat-fab.chat-fab-atenuado { opacity: .4; transform: scale(.8); pointer-events: none; }
.chat-fab::after {  /* aro dorado pulsante muy sutil para llamar la atención */
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--dorado); opacity: 0;
  animation: chatPulso 2.8s ease-out infinite;
}
.chat-fab-ico {
  width: 28px; height: 28px; grid-area: 1 / 1;
  transition: opacity .2s ease, transform .3s ease;
}
.chat-fab .ico-x { opacity: 0; transform: rotate(-90deg) scale(.6); }
.chat-fab.activo .ico-bot { opacity: 0; transform: rotate(90deg) scale(.6); }
.chat-fab.activo .ico-x { opacity: 1; transform: rotate(0) scale(1); }
.chat-fab.activo::after { display: none; }

@keyframes chatFabIn { from { opacity: 0; transform: translateY(16px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes chatPulso { 0% { opacity: .5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.35); } }

/* Ventana de conversación (encima del botón) */
.chat-panel {
  position: fixed; right: 24px; bottom: 96px; z-index: 120;
  width: 370px; max-width: calc(100vw - 32px);
  height: 520px; max-height: calc(100vh - 130px);
  background: var(--bg-card); border-radius: var(--r-lg);
  border: 1px solid var(--border-card);
  box-shadow: 0 24px 60px rgba(0,0,0,.40);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.98);
  transform-origin: bottom right;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.chat-panel.abierto { opacity: 1; visibility: visible; transform: none; }

.chat-panel-top {
  background: linear-gradient(135deg, var(--azul-oscuro), var(--azul)); color: #fff;
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
}
.chat-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.15); display: grid; place-items: center;
}
.chat-avatar svg { width: 22px; height: 22px; }
.chat-panel-id { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.chat-panel-id strong { font-family: var(--f-head); font-size: var(--t-sm); }
.chat-status { font-size: 11px; opacity: .85; display: flex; align-items: center; gap: 6px; }
.chat-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 6px #22c55e;
}
.chat-panel-close {
  width: 32px; height: 32px; border-radius: 50%; border: none; flex-shrink: 0;
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: background var(--ease);
}
.chat-panel-close:hover { background: rgba(255,255,255,.25); }
.chat-panel-close svg { width: 16px; height: 16px; }

.chat-mensajes {
  flex: 1; padding: 16px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; background: var(--bg-card);
}
.msg {
  max-width: 82%; padding: 10px 14px; border-radius: 14px;
  font-size: var(--t-sm); color: var(--txt-dark); line-height: 1.45; white-space: pre-wrap;
}
.msg.bot { background: #f1f5f9; align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.user { background: var(--azul); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.escribiendo { opacity: .6; font-style: italic; }

.chat-input {
  display: flex; gap: 8px; padding: 12px;
  border-top: 1px solid var(--border-card); background: var(--bg-card);
}
.chat-input input {
  flex: 1; min-width: 0; padding: 11px 16px; border: 2px solid var(--border-card); border-radius: 24px;
  font-family: inherit; font-size: var(--t-sm); color: var(--txt-dark); background: var(--bg-card);
}
.chat-input input:focus { outline: none; border-color: var(--azul); }
.chat-input button {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: none;
  background: var(--azul); color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: background var(--ease);
}
.chat-input button:hover { background: var(--azul-oscuro); }

/* Móvil: ventana casi a pantalla completa pero con margen (sigue flotando) */
@media (max-width: 480px) {
  .chat-fab { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .chat-panel {
    right: 8px; left: 8px; bottom: 78px; top: 68px;
    width: auto; max-width: none; height: auto; max-height: none;
  }
}

/* Respeta "reducir movimiento" */
@media (prefers-reduced-motion: reduce) {
  .chat-fab, .chat-fab::after { animation: none; }
  .chat-panel, .faq-a, .chat-fab-ico { transition: none; }
  .chat-fab.chat-fab-atenuado { transform: none; transition: opacity .2s ease; }
}

/* ===================== PATROCINADORES (carrusel infinito) ===================== */
.patrocinadores-section {
  padding: 48px 0 56px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  overflow: hidden;
}
.patrocinadores-header {
  text-align: center; margin-bottom: 32px; padding: 0 24px;
}
.patrocinadores-titulo {
  font-family: var(--f-head);
  font-size: var(--t-lg); font-weight: 800;
  color: var(--txt-1);
}
.patrocinadores-titulo::after {
  content: ""; display: block;
  width: 48px; height: 3px; border-radius: 3px;
  background: var(--dorado); margin: 12px auto 0;
}

.carrusel-patros {
  position: relative; width: 100%;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.carrusel-pista {
  display: flex; gap: 28px; align-items: center;
  width: max-content;
  animation: scrollPatros 30s linear infinite;
}
.carrusel-patros:hover .carrusel-pista {
  animation-play-state: paused;
}
@keyframes scrollPatros {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.patro-item {
  flex-shrink: 0;
  height: 56px;
  display: grid; place-items: center;
  opacity: 1;
  transition: transform .3s ease;
  cursor: default;
}
.patro-item:hover {
  transform: scale(1.08);
}
.patro-item img {
  height: 56px; width: auto; max-width: 160px;
  object-fit: contain;
}

.patro-item img[src$="atleet.png"] { max-width: 120px; }
.patro-blanco img { background: #fff; padding: 6px 12px; border-radius: 8px; box-sizing: border-box; }

.patro-escudo img {
  opacity: 1;
}

@media (max-width: 768px) {
  .carrusel-pista { gap: 20px; }
  .patro-item { height: 40px; }
  .patro-item img { height: 40px; max-width: 120px; }
}

/* ===================== TIENDA ===================== */
.tienda-seccion {
  background: var(--bg-base);
  padding-top: 72px; padding-bottom: 72px;
}
.tienda-seccion h2 {
  text-align: left; font-size: clamp(var(--t-xl), 4vw, var(--t-2xl));
  margin-bottom: 4px; padding-bottom: 0;
}
.tienda-seccion h2::after { display: none; }

.tienda-layout {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 48px; align-items: center;
}
.tienda-img-wrap {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 1;
  box-shadow: 0 20px 55px rgba(3,8,16,.55);
  transition: box-shadow .4s ease;
}
.tienda-img-wrap:hover {
  box-shadow: 0 28px 70px rgba(3,8,16,.65);
}
.tienda-img {
  display: block;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.tienda-img-wrap:hover .tienda-img { transform: scale(1.04); }

.tienda-precio {
  font-family: var(--f-head);
  font-size: var(--t-2xl); font-weight: 900;
  color: var(--dorado); margin: 12px 0 16px;
}
.tienda-desc {
  color: var(--txt-2); font-size: var(--t-base);
  margin-bottom: 20px; max-width: 440px; line-height: 1.6;
}
.tienda-detalles {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 28px;
}
.tienda-detalles li {
  display: flex; align-items: center; gap: 10px;
  color: var(--txt-2); font-size: var(--t-sm); font-weight: 500;
}
.btn-tienda {
  font-size: var(--t-sm); padding: 16px 38px; padding-right: 48px;
}
.tienda-contacto {
  margin-top: 14px; font-size: var(--t-xs); color: var(--txt-3);
  font-style: italic;
}

@media (max-width: 768px) {
  .tienda-layout {
    grid-template-columns: 1fr; gap: 28px;
  }
  .tienda-img-wrap { max-width: 340px; margin: 0 auto; }
  .tienda-contenido { text-align: center; }
  .tienda-seccion h2 { text-align: center; }
  .tienda-detalles { align-items: center; }
  .tienda-contenido .eyebrow { text-align: center !important; }
  .btn-tienda { width: 100%; justify-content: center; }
  .tienda-contacto { text-align: center; }
}

/* ===================== FOOTER ===================== */
.footer {
  background: var(--azul-oscuro);
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--txt-1);
  padding: 56px 32px 40px;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1.2fr;
  gap: 40px; max-width: 100%;
}

.footer-col h4 {
  color: var(--txt-3); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 16px; font-weight: 700;
}
.footer-col a {
  display: block; color: rgba(255,255,255,.70);
  text-decoration: none; padding: 3px 0;
  font-size: var(--t-sm); transition: color var(--ease);
}
.footer-col a:hover { color: var(--dorado); }
.footer-col p { color: rgba(255,255,255,.55); font-size: var(--t-sm); line-height: 1.6; margin-bottom: 8px; }

.footer-marca { display: flex; align-items: center; gap: 16px; }
.footer-escudo { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.footer-nombre { font-size: var(--t-lg); display: block; margin-bottom: 4px; }
.footer-lema   { opacity: .6; font-style: italic; font-size: var(--t-sm); }

/* Redes sociales en footer */
.footer-redes { display: flex; gap: 8px; margin-top: 12px; }
.footer-redes a {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  transition: background var(--ease);
  padding: 0;
}
.footer-redes a:hover { background: var(--dorado); color: var(--azul-oscuro); }

/* Patrocinadores en footer */
.footer-patros { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-patros a {
  display: flex; align-items: center; justify-content: center;
  width: 80px; height: 48px; padding: 6px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-sm);
  transition: background var(--ease), border-color var(--ease);
}
.footer-patros a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
.footer-patros img { max-width: 100%; max-height: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: .6; transition: opacity var(--ease); }
.footer-patros a:hover img { opacity: 1; }

/* Franja legal */
.footer-legal {
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.45);
  padding: 16px 32px;
  font-size: var(--t-xs);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
}
.footer-legal-links { display: flex; gap: 16px; }
.footer-legal-links a {
  color: rgba(255,255,255,.45); text-decoration: none; font-size: var(--t-xs);
  transition: color var(--ease);
}
.footer-legal-links a:hover { color: rgba(255,255,255,.75); }

/* ===================== BOTÓN VOLVER ARRIBA ===================== */
.top-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 120;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--azul); color: var(--txt-1);
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity var(--ease), transform var(--ease), background var(--ease);
}
.top-btn.visible { opacity: 1; pointer-events: auto; transform: none; }
.top-btn:hover   { background: var(--azul-oscuro); }

/* ===================== MODAL GALERÍA ===================== */
/* CORREGIDO: botón de cierre + soporte teclado */
.modal {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.90); place-items: center; padding: 40px;
}
.modal.abierto { display: grid; }
.modal-close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.12); color: var(--txt-1);
  display: grid; place-items: center;
  transition: background var(--ease);
}
.modal-close:hover { background: rgba(255,255,255,.25); }
.modal img {
  max-width: 90%; max-height: 86vh;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}

/* ===================== ANIMACIONES DE SCROLL ===================== */
.reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal.izq { transform: translateX(-40px); }
.reveal.der { transform: translateX(40px); }
.reveal.izq.visible, .reveal.der.visible { transform: none; }

/* =====================================================================
   === CURSOR FX: halo ELIMINADO ===
   El halo (.cursor-fx) que seguía al ratón se ha retirado (ver premium.js)
   por transmitir sensación de retraso. Se elimina también su CSS para no
   dejar estilos muertos.
   ===================================================================== */

/* ===================== ACCESIBILIDAD: prefers-reduced-motion ===================== */
@media (prefers-reduced-motion: reduce) {
  .reveal     { opacity: 1 !important; transform: none !important; transition: none; }
  .hero-slide { transition: opacity .3s; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1100px) {
  .nav-desktop   { display: none; }
  .nav-acciones  { display: none; }
  .menu-toggle   { display: inline-flex; margin-left: auto; }
}
@media (min-width: 1101px) {
  .menu-toggle   { display: none; }
  .menu-movil    { display: none !important; }
}

@media (max-width: 1024px) {
  .footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .seccion { padding: 60px 20px; }

  .stats-bar-in { gap: 0; }
  .stat { padding: 8px 20px; }
  .stat-div { height: 30px; }

  .club-wrap     { grid-template-columns: 1fr; }
  .club-lateral  { order: -1; }
  .club-hitos    { gap: 12px 0; }
  .hito          { flex: 1 1 40%; border-right: none; padding: 0 8px; }

  .inscripcion-wrap { grid-template-columns: 1fr; }
  .tienda-strip-in  { flex-direction: column; align-items: flex-start; gap: 18px; }

  .footer { grid-template-columns: 1fr; gap: 28px; padding: 40px 24px 32px; }
  .footer-legal { flex-direction: column; align-items: center; text-align: center; }

  .hero-arrow { width: 38px; height: 38px; }
  .hero-cont  { text-align: center; }
  /* Padding lateral extra solo en el texto (no en los botones) para que
     las líneas centradas no queden debajo de las flechas del carrusel,
     que son absolutas y no ocupan espacio en el flujo del contenido. */
  .hero-eyebrow, .hero-cont h1, .hero-subtitulo { padding: 0 46px; }
  .hero-btns  { justify-content: center; }
}

@media (max-width: 480px) {
  .stats-bar-in { flex-direction: column; gap: 0; }
  .stat-div     { width: 40px; height: 1px; }

  .grid-partidos { grid-template-columns: 1fr; }
  .grid-torneos  { grid-template-columns: 1fr; }
  .grid-jugadores{ grid-template-columns: repeat(2, 1fr); }

  .btn { font-size: .75rem; padding: 12px 24px; }
  .btn-primario { padding-right: 32px; }

  .modal { padding: 20px; }
}

/* =====================================================================
   === Fondo cuadrícula interactiva ===
   Capa decorativa fija con un patrón de puntos (dot grid). En escritorio
   con ratón, un "spotlight" circular sigue al cursor y resalta los puntos
   cercanos. Solo CSS + variables actualizadas desde script.js.
   Para revertir: eliminar este bloque + el bloque homónimo en script.js
   + el <div class="bg-grid"></div> en index.html.
   ===================================================================== */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Capa de "spotlight": puntos más brillantes recortados con un degradado
   circular centrado en el cursor (--mouse-x / --mouse-y). Solo se activa
   cuando script.js añade la clase .con-spotlight a <html>. */
.bg-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--txt-2) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle 220px at var(--mouse-x, 50%) var(--mouse-y, 50%), #000 0%, transparent 70%);
          mask-image: radial-gradient(circle 220px at var(--mouse-x, 50%) var(--mouse-y, 50%), #000 0%, transparent 70%);
  transition: opacity var(--ease);
}

html.con-spotlight .bg-grid::before {
  opacity: 1;
}

/* Táctil / sin ratón fino: cuadrícula estática, sin spotlight (no se añade
   la clase .con-spotlight, así que ::before queda en opacity:0). */

@media (prefers-reduced-motion: reduce) {
  .bg-grid::before { display: none; }
}

/* =====================================================================
   === Noticias full-width ===
   La sección Noticias pasa a ocupar todo el ancho de la pantalla
   (full-bleed) para mostrar más tarjetas en horizontal, manteniendo el
   resto de la sección (título, subtítulo) con su ancho actual.
   Para revertir: eliminar este bloque.
   ===================================================================== */
#grid-noticias {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* =====================================================================
   === Equipos y plantillas full-width ===
   Mismo tratamiento full-bleed que en Noticias, para mantener
   consistencia visual y de comportamiento (scroll horizontal, gap,
   padding lateral) entre ambas secciones.
   Para revertir: eliminar este bloque.
   ===================================================================== */
#grid-equipos {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* =====================================================================
   === PRÓXIMOS PARTIDOS (pestañas por equipo + tarjetas) ===
   ===================================================================== */
/* --- Fila con los dos desplegables (jornada + equipo), centrada y con aire --- */
.pp-filtros {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 14px; margin: 0 auto 34px;
}
.pp-filtros .pp-jornada-wrap { margin: 0; }

/* --- Desplegable de jornada / equipo (custom, accesible) --- */
.pp-jornada-wrap { position: relative; width: max-content; max-width: 100%; margin: 0 auto 34px; z-index: 5; }
.pp-drop-btn {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  min-width: 250px; text-align: left;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 11px 15px; color: var(--txt-1);
  transition: border-color var(--ease), background var(--ease);
}
.pp-drop-btn:hover { border-color: rgba(255,255,255,.28); }
.pp-drop-btn[aria-expanded="true"] { border-color: var(--dorado); }
.pp-drop-ico {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%; background: rgba(236,183,12,.14); color: var(--dorado);
}
.pp-drop-ico svg { width: 17px; height: 17px; }
.pp-drop-txt { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.pp-drop-txt b { font-family: var(--f-head); font-weight: 800; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .04em; }
.pp-drop-txt small { color: var(--txt-3); font-size: var(--t-xs); }
.pp-drop-chevron { width: 15px; height: 15px; color: var(--txt-3); transition: transform .25s ease; flex-shrink: 0; }
.pp-drop-btn[aria-expanded="true"] .pp-drop-chevron { transform: rotate(180deg); color: var(--dorado); }

.pp-drop-list {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 6px;
  list-style: none; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
  max-height: 320px; overflow-y: auto; z-index: 10;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.pp-jornada-wrap.abierto .pp-drop-list { opacity: 1; visibility: visible; transform: none; }
.pp-drop-opt {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 12px; border-radius: 8px; color: var(--txt-2);
  transition: background var(--ease), color var(--ease);
}
.pp-drop-opt:hover, .pp-drop-opt.marcado { background: rgba(255,255,255,.05); color: var(--txt-1); }
.pp-drop-opt span { font-family: var(--f-head); font-weight: 700; font-size: var(--t-sm); }
.pp-drop-opt small { color: var(--txt-3); font-size: var(--t-xs); margin-left: auto; }
.pp-drop-check { width: 16px; height: 16px; color: var(--dorado); opacity: 0; flex-shrink: 0; }
.pp-drop-opt[aria-selected="true"] .pp-drop-check { opacity: 1; }
.pp-drop-opt[aria-selected="true"] span { color: var(--dorado); }

/* Cabecera de tarjeta: categoría del equipo + competición */
.pp-card-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-cat { font-family: var(--f-head); font-weight: 800; font-size: var(--t-sm); color: var(--dorado); letter-spacing: .02em; }

/* --- Animación de entrada del panel (ligera: opacity + translate) --- */
.pp-anim { animation: ppFade .28s ease both; }
@keyframes ppFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- Escudos (compartido destacado/compacto) ---
   Sin fondo ni aro: los escudos ya vienen recortados (fondo transparente),
   así que se apoyan directamente sobre la superficie de la tarjeta. El
   placeholder de iniciales (.pp-crest-ph, para rivales sin escudo fiable)
   sigue llevando su propia chapa de color, porque ahí sí hace falta un
   fondo para que el texto se lea. */
.pp-crest {
  width: 84px; height: 84px; padding: 4px;
  display: grid; place-items: center; object-fit: contain; flex-shrink: 0;
}
.pp-crest-ph {
  border-radius: 50%;
  background: linear-gradient(150deg, var(--azul), var(--azul-oscuro));
  border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-family: var(--f-head); font-weight: 800; font-size: 1.5rem;
}
.pp-crest.chico { width: 52px; height: 52px; padding: 3px; }
.pp-crest.chico.pp-crest-ph { font-size: 1rem; }

/* --- Condición Local / Visitante --- */
.pp-cond {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px; white-space: nowrap;
}
.pp-cond.mini { padding: 3px 9px; font-size: 10px; }
.pp-cond-local { background: rgba(34,197,94,.16);  color: #4ade80; border: 1px solid rgba(34,197,94,.40); }
.pp-cond-visit { background: rgba(23,105,176,.20); color: #63b0f2; border: 1px solid rgba(23,105,176,.55); }

/* --- Tarjeta destacada (próximo partido) --- */
.pp-destacado {
  position: relative; overflow: hidden; max-width: 720px; margin: 0 auto;
  border-radius: var(--r-lg); padding: 26px 24px 22px;
  background:
    radial-gradient(120% 120% at 50% -25%, rgba(236,183,12,.14), transparent 60%),
    linear-gradient(160deg, var(--azul-oscuro) 0%, #06223f 100%);
  border: 1px solid rgba(236,183,12,.35);
  box-shadow: var(--shadow-md);
}
.pp-destacado-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; }
.pp-flag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-head); font-weight: 800; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .14em; color: var(--dorado);
}
.pp-flag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dorado); box-shadow: 0 0 8px var(--dorado); }

.pp-enfrentamiento {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 16px;
  margin-bottom: 22px;
}
.pp-team { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.pp-team-nombre { font-family: var(--f-head); font-weight: 800; font-size: var(--t-md); color: var(--txt-1); line-height: 1.15; }
.pp-vs { align-self: center; }
.pp-vs span {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  font-family: var(--f-head); font-weight: 900; font-size: var(--t-md); color: var(--dorado);
  border: 2px solid rgba(236,183,12,.40);
}

.pp-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  padding-top: 18px; border-top: 1px solid var(--border);
}
.pp-meta-item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--txt-2); }
.pp-meta-item.principal { color: var(--txt-1); font-weight: 600; }
.pp-meta-item svg { width: 15px; height: 15px; color: var(--dorado); flex-shrink: 0; }

/* --- Subtítulo "siguientes partidos" --- */
.pp-sub-titulo {
  text-align: center; font-family: var(--f-head); font-weight: 800;
  font-size: var(--t-md); color: var(--txt-1); text-transform: uppercase; letter-spacing: .06em;
  margin: 40px 0 20px;
}

/* --- Tarjetas compactas --- */
.pp-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.pp-card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
  transition: border-color var(--ease), transform var(--ease);
}
.pp-card:hover { border-color: rgba(255,255,255,.20); transform: translateY(-2px); }
.pp-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pp-comp { font-size: var(--t-xs); color: var(--txt-3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-card-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; }
.pp-mini-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pp-mini-nombre { font-size: var(--t-xs); font-weight: 700; color: var(--txt-1); line-height: 1.2; }
.pp-mini-vs { align-self: center; font-family: var(--f-head); font-weight: 800; color: var(--txt-3); font-size: var(--t-sm); }
/* Partido ya jugado: marcador + etiqueta de resultado en el centro */
.pp-centro { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.pp-score {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-head); font-weight: 800; font-size: 2rem; line-height: 1;
  color: var(--txt-1); font-variant-numeric: tabular-nums;
}
.pp-score i { font-style: normal; color: var(--txt-3); font-size: 1.3rem; }
.pp-score b.pp-menos { color: var(--txt-3); }
.pp-score-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 20px; border: 1px solid; white-space: nowrap;
}
.pp-res-v { background: rgba(34,197,94,.14);  color: #4ade80; border-color: rgba(34,197,94,.38); }
.pp-res-e { background: rgba(255,255,255,.07); color: var(--txt-2); border-color: rgba(255,255,255,.18); }
.pp-res-d { background: rgba(239,68,68,.14);  color: #f87171; border-color: rgba(239,68,68,.38); }
.pp-card-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.pp-card-foot span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--txt-2); }
.pp-card-foot svg { width: 13px; height: 13px; color: var(--dorado); flex-shrink: 0; }

/* --- Estado vacío --- */
.pp-vacio { text-align: center; max-width: 420px; margin: 0 auto; padding: 46px 20px; }
.pp-vacio-ico {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; color: var(--dorado);
  background: var(--bg-surface); border: 1px solid var(--border);
}
.pp-vacio-ico svg { width: 30px; height: 30px; }
.pp-vacio h3 { font-family: var(--f-head); color: var(--txt-1); font-size: var(--t-md); margin-bottom: 8px; }
.pp-vacio p { color: var(--txt-2); font-size: var(--t-sm); }

/* Cabecera de cada bloque de jornada al ver "Todas las jornadas" filtrado
   por equipo: separa visualmente un grupo del siguiente en vez de dejar
   los partidos seguidos sin ninguna referencia de a qué jornada pertenecen. */
.pp-grupo-jornada + .pp-grupo-jornada { margin-top: 28px; }
.pp-grupo-titulo {
  font-family: var(--f-head); font-weight: 800; font-size: var(--t-xs);
  color: var(--dorado); text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}

/* --- Responsive --- */
@media (max-width: 560px) {
  .pp-destacado { padding: 22px 16px 18px; }
  .pp-crest { width: 66px; height: 66px; padding: 8px; }
  .pp-crest-ph { font-size: 1.2rem; }
  .pp-team-nombre { font-size: var(--t-base); }
  .pp-vs span { width: 40px; height: 40px; }
  .pp-lista { grid-template-columns: minmax(0, 1fr); }

  /* "Todas las jornadas" puede juntar muchos partidos seguidos (sobre todo
     con un equipo elegido): en vez de apilarlos, se deslizan en horizontal
     como un carrusel — mismo criterio táctil que .grid-equipos. */
  .pp-lista-todas {
    display: flex; flex-wrap: nowrap; gap: 14px;
    overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .pp-lista-todas::-webkit-scrollbar { display: none; }
  .pp-lista-todas .pp-card { flex: 0 0 82%; scroll-snap-align: start; }
}

/* =====================================================================
   === NAVEGACIÓN MULTIPÁGINA ===
   Estado "activo": marca la página actual (Inicio / Tienda / Galería)
   con el mismo subrayado dorado que el hover, pero permanente.
   ===================================================================== */
.nav-link.activo { color: var(--txt-1); }
.nav-link.activo::after { transform: scaleX(1); }
.menu-movil-nav a.activo { color: var(--dorado); }

/* =====================================================================
   === CABECERA DE PÁGINA (subpáginas: Tienda, Galería) ===
   Banda superior que da identidad a cada página independiente y deja
   claro "dónde estoy". Reutiliza .eyebrow del resto de la web.
   ===================================================================== */
.page-hero {
  background:
    radial-gradient(120% 130% at 80% -20%, rgba(236,183,12,.12), transparent 55%),
    linear-gradient(150deg, var(--azul-oscuro) 0%, #06223f 100%);
  border-bottom: 1px solid var(--border);
  padding: 92px 24px 38px;   /* deja hueco bajo la navbar sticky (64px) */
}
.page-hero-in { max-width: 1140px; margin: 0 auto; text-align: center; }
.page-hero .eyebrow { margin-bottom: 8px; }
.page-hero h1 {
  font-size: clamp(var(--t-2xl), 6vw, var(--t-3xl));
  color: var(--txt-1);
  line-height: 1.08;
  text-wrap: balance;
}
.page-hero-sub {
  max-width: 60ch; margin: 12px auto 0;
  color: var(--txt-2); font-size: 1.05rem;
}

/* Migas de pan */
.migas {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--txt-3); margin-bottom: 12px;
}
.migas a { color: var(--txt-3); text-decoration: none; transition: color var(--ease); }
.migas a:hover { color: var(--dorado); }
.migas > span:last-child { color: var(--txt-1); font-weight: 700; }

/* =====================================================================
   === PÁGINA TIENDA ===
   El producto destacado reutiliza .tienda-seccion / .tienda-layout.
   Aquí se añaden el flag "novedad" y la rejilla de catálogo.
   ===================================================================== */
.tienda-img-wrap { position: relative; }
.producto-flag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--dorado); color: var(--azul-oscuro);
  font-weight: 800; font-size: var(--t-xs); padding: 6px 12px;
  border-radius: var(--r-sm); text-transform: uppercase; letter-spacing: .04em;
}

.catalogo-seccion .subtitulo { margin-bottom: 40px; }
.productos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px; max-width: 1140px; margin: 0 auto;
}
.producto-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform var(--ease), box-shadow var(--ease);
}
.producto-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.producto-foto {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--bg-surface); display: grid; place-items: center;
}
.producto-foto img { width: 100%; height: 100%; object-fit: cover; }
.producto-foto.ph-producto {
  color: rgba(255,255,255,.55);
  background: linear-gradient(160deg, rgba(23,105,176,.55), var(--azul-oscuro));
}
.producto-badge {
  position: absolute; top: 12px; right: 12px;
  background: rgba(8,12,20,.82); color: var(--txt-1);
  border: 1px solid var(--border);
  font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 100px;
  text-transform: uppercase; letter-spacing: .05em;
}
.producto-cuerpo { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.producto-cat {
  color: var(--azul-texto-oscuro); font-weight: 700; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .06em;
}
.producto-cuerpo h3 { color: var(--txt-1); font-size: var(--t-md); line-height: 1.25; }
.producto-cuerpo p { color: var(--txt-2); font-size: var(--t-sm); }

.catalogo-cta {
  text-align: center; margin-top: 42px;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.catalogo-cta p { color: var(--txt-2); }

/* =====================================================================
   === PÁGINA GALERÍA ===
   Filtros por categoría + rejilla de fotos con hover-zoom y lightbox.
   ===================================================================== */

/* A diferencia de Tienda/Torneos, tras el banner de Galería no hay un
   h2/eyebrow propio que justifique el ritmo estándar de .seccion (86px):
   se reduce solo el hueco superior para que las fotos protagonicen antes,
   sin tocar el resto del ritmo vertical de la página. */
.galeria-page { padding-top: 34px; }

/* Recompone el banner de Galería con una jerarquía más clara: las migas
   quedan ancladas arriba a la izquierda (referencia de ruta discreta) y el
   bloque título+descripción se mantiene centrado, ganando presencia propia
   en vez de competir en la misma línea vertical que el resto de subpáginas. */
body[data-pagina="galeria"] .page-hero-in {
  display: flex; flex-direction: column; align-items: center;
}
body[data-pagina="galeria"] .migas {
  align-self: flex-start;
  margin-bottom: 22px;
}

.galeria-filtros {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: 34px;
}
.filtro-chip {
  font-family: var(--f-head); font-weight: 700; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--txt-2); background: rgba(255,255,255,.05);
  border: 1px solid var(--border); padding: 9px 18px; border-radius: 100px;
  cursor: pointer; transition: color var(--ease), background var(--ease), border-color var(--ease);
}
.filtro-chip:hover { color: var(--txt-1); border-color: rgba(255,255,255,.28); }
.filtro-chip.activo { background: var(--dorado); color: var(--azul-oscuro); border-color: var(--dorado); }

.galeria-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px; max-width: 1140px; margin: 0 auto;
}
.galeria-foto {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-lg); aspect-ratio: 4 / 3; cursor: pointer;
  background: var(--bg-surface); box-shadow: var(--shadow-sm);
}
.galeria-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.galeria-foto:hover img, .galeria-foto:focus-visible img { transform: scale(1.06); }
.galeria-foto figcaption {
  position: absolute; inset: auto 0 0 0; padding: 32px 16px 14px;
  display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(transparent, rgba(6,12,22,.92));
  color: var(--txt-1);
}
.gf-cat {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--dorado);
}
.gf-tit { font-family: var(--f-head); font-weight: 700; font-size: var(--t-sm); }
.galeria-vacia { grid-column: 1 / -1; text-align: center; color: var(--txt-2); padding: 40px 0; }

/* =====================================================================
   GALERÍA — navegación Equipo → Álbum → Fotos (datos desde Supabase)
   Ver galeria.js. Reutiliza .galeria-grid/.galeria-foto para las fotos.
   ===================================================================== */
.gal-migas {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--txt-3); margin-bottom: 28px; min-height: 1em;
}
.gal-migas a { color: var(--txt-3); text-decoration: none; transition: color var(--ease); }
.gal-migas a:hover { color: var(--dorado); }
.gal-migas span:last-child { color: var(--txt-1); font-weight: 700; }

.gal-titulo-vista { font-family: var(--f-head); font-weight: 800; font-size: var(--t-xl); margin-bottom: 22px; }

.gal-grid-equipos, .gal-grid-albumes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.gal-equipo-card, .gal-album-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 22px 20px; text-decoration: none; color: var(--txt-1);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.gal-equipo-card:hover, .gal-album-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(236,183,12,.4);
}
.gal-equipo-nombre, .gal-album-nombre { font-family: var(--f-head); font-weight: 800; font-size: var(--t-md); }
.gal-equipo-cta, .gal-album-fecha { color: var(--txt-3); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; }

/* =====================================================================
   PANEL PRIVADO DE FOTOS (galeria-admin.html)
   Página independiente para la fotógrafa: PIN → equipo → álbum → fotos.
   Reutiliza los mismos tokens de color/tipografía del resto de la web.
   ===================================================================== */
.admin-body { background: var(--bg-base); color: var(--txt-1); min-height: 100vh; }

.admin-card-login {
  max-width: 380px; margin: 14vh auto 0; padding: 36px 28px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); text-align: center; box-shadow: var(--shadow-md);
}
.admin-logo { margin-bottom: 14px; }
.admin-card-login h1 { font-family: var(--f-head); font-size: var(--t-xl); margin-bottom: 6px; }
.admin-sub { color: var(--txt-3); font-size: var(--t-sm); margin-bottom: 22px; }
.admin-card-login label { display: block; text-align: left; font-size: var(--t-sm); font-weight: 600; margin-bottom: 6px; }
.admin-card-login input[type="password"] {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border); background: rgba(255,255,255,.04); color: var(--txt-1);
  font-size: var(--t-base); margin-bottom: 16px; font-family: inherit;
}
.admin-card-login input[type="password"]:focus { outline: none; border-color: var(--dorado); }
.admin-error { color: #ff8a8a; font-size: var(--t-sm); margin-top: 12px; }
.admin-btn-ancho { width: 100%; }

.admin-panel { max-width: 760px; margin: 0 auto; padding: 32px 20px 100px; }
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.admin-topbar-marca { display: flex; align-items: center; gap: 10px; font-family: var(--f-head); font-weight: 800; font-size: var(--t-md); }
.admin-topbar-marca img { border-radius: 50%; }
.admin-topbar-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-btn-sm { padding: 9px 16px; font-size: var(--t-xs); }

.admin-paso { margin-bottom: 36px; }
.admin-paso > label, .admin-paso > h2 {
  display: block; font-family: var(--f-head); font-weight: 800; font-size: var(--t-lg);
  margin-bottom: 14px;
}
.admin-paso select, .admin-crear-album input {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border); background: rgba(255,255,255,.04); color: var(--txt-1);
  font-family: inherit; font-size: var(--t-base); margin-bottom: 14px;
}
.admin-paso select:focus, .admin-crear-album input:focus { outline: none; border-color: var(--dorado); }
/* Sin esto, Chrome/Edge de ESCRITORIO en Windows ignoran el background/color
   que le demos a cada <option> y pintan el desplegable emergente con el tema
   claro del sistema (solo la fila con hover se ve distinta). En móvil ya se
   ve bien de forma nativa, así que este forzado de tema oscuro se limita a
   pantallas de escritorio (min-width: 769px) para no tocar el móvil. */
@media (min-width: 769px) {
  .admin-paso select { color-scheme: dark; }
}
.admin-paso select option {
  background: var(--bg-surface); color: var(--txt-1);
}
.admin-crear-album label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--txt-2); margin-bottom: 6px; }

.admin-lista-albumes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.admin-album-item { display: flex; align-items: stretch; gap: 8px; }
.admin-album-abrir {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 14px 16px; color: var(--txt-1); text-align: left; cursor: pointer;
  font-family: inherit; transition: border-color var(--ease), transform var(--ease);
}
.admin-album-abrir:hover { border-color: var(--dorado); transform: translateX(2px); }
.admin-album-nombre { font-weight: 700; }
.admin-album-fecha { color: var(--txt-3); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.admin-album-borrar {
  width: 44px; flex-shrink: 0; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: rgba(255,255,255,.04); color: var(--txt-2); cursor: pointer; font-size: var(--t-md);
  transition: background var(--ease), color var(--ease);
}
.admin-album-borrar:hover { background: rgba(255,90,90,.15); color: #ff8a8a; }

.admin-fotos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px;
}
.admin-foto-item { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-surface); }
.admin-foto-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-foto-borrar {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  border: none; background: rgba(8,12,20,.75); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
  transition: background var(--ease);
}
.admin-foto-borrar:hover { background: rgba(200,30,30,.85); }

.admin-subir-label { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.admin-subida-estado { margin-top: 14px; text-align: center; color: var(--txt-2); font-size: var(--t-sm); }

/* Ajustes responsive de las subpáginas */
@media (max-width: 768px) {
  .page-hero { padding: 80px 20px 30px; }
  .productos-grid, .galeria-grid { gap: 14px; }
  .galeria-page { padding-top: 22px; }
  body[data-pagina="galeria"] .migas { align-self: center; margin-bottom: 14px; }
  .gal-grid-equipos, .gal-grid-albumes { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .admin-card-login { margin-top: 8vh; }
  .admin-panel { padding: 24px 16px 80px; }
}


/* ---------------------- PÁGINAS LEGALES (privacidad / cookies / aviso legal) ---------------------- */
.legal-content { max-width: 780px; margin: 0 auto; padding: 56px 24px 100px; }
.legal-actualizado { color: var(--txt-3); font-size: var(--t-xs); margin: 0 0 30px; }
.legal-content h2 {
  font-size: var(--t-xl); margin: 44px 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 { font-size: var(--t-lg); margin: 24px 0 10px; color: var(--azul-texto-oscuro); }
.legal-content p, .legal-content li { color: var(--txt-2); }
.legal-content p { margin: 0 0 14px; }
.legal-content ul { padding-left: 22px; margin: 0 0 16px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--azul-texto-oscuro); text-decoration: underline; }
.legal-content strong { color: var(--txt-1); }
.legal-pendiente {
  display: block; background: rgba(236,183,12,.1); border: 1px solid rgba(236,183,12,.4);
  border-radius: var(--r-sm); padding: 10px 14px; color: var(--dorado);
  font-size: var(--t-sm); font-weight: 700; margin: 0 0 18px;
}

/* ---------------------- AVISO DE COOKIES ---------------------- */
.cookie-aviso {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  max-width: 640px; margin: 0 auto;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 20px 55px rgba(3,8,16,.55);
  padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  transform: translateY(140%); opacity: 0; transition: transform .4s ease, opacity .4s ease;
}
.cookie-aviso.visible { transform: translateY(0); opacity: 1; }
.cookie-aviso p { margin: 0; color: var(--txt-2); font-size: var(--t-sm); flex: 1 1 260px; }
.cookie-aviso a { color: var(--azul-texto-oscuro); text-decoration: underline; }
.cookie-aviso-btn {
  flex: 0 0 auto; background: var(--dorado); color: var(--azul-oscuro);
  border: none; border-radius: var(--r-sm); padding: 10px 20px;
  font-weight: 800; font-family: var(--f-head); cursor: pointer;
  transition: filter var(--ease);
}
.cookie-aviso-btn:hover { filter: brightness(1.08); }
@media (max-width: 480px) {
  .cookie-aviso { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-aviso-btn { width: 100%; }
}

/* ---------------------- PANEL DE COMPETICIÓN (admin) ----------------------
   Reutiliza .admin-body / .admin-panel / .admin-topbar / .btn* ya definidos
   arriba para galeria-admin.html; estas reglas cubren solo lo específico de
   competicion-admin.html (pestañas, formularios, bloques de código). */
.compadm-panel { max-width: 720px; }
.compadm-panel [hidden] { display: none !important; }
.compadm-intro {
  color: var(--txt-2); font-size: var(--t-sm); line-height: 1.6;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 14px 16px; margin-bottom: 28px;
}
.compadm-intro code { color: var(--dorado); font-family: monospace; }

.compadm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.compadm-tab {
  flex: 1 1 auto; background: var(--bg-surface); color: var(--txt-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 14px; font-family: var(--f-head); font-weight: 700;
  font-size: var(--t-sm); cursor: pointer; transition: border-color var(--ease), color var(--ease);
}
.compadm-tab:hover { color: var(--txt-1); }
.compadm-tab[aria-selected="true"] { border-color: var(--dorado); color: var(--dorado); }

.compadm-panelTab { animation: compadm-fade .2s ease; }
@keyframes compadm-fade { from { opacity: 0; } to { opacity: 1; } }

.compadm-campo { margin-bottom: 18px; }
.compadm-campo label {
  display: block; font-size: var(--t-sm); font-weight: 600; color: var(--txt-2);
  margin-bottom: 6px;
}
.compadm-campo input[type="text"], .compadm-campo input[type="number"], .compadm-campo select {
  width: 100%; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--txt-1); padding: 11px 14px; font-size: var(--t-base);
  font-family: var(--f-body);
}
.compadm-campo input:focus, .compadm-campo select:focus { outline: none; border-color: var(--dorado); }
.compadm-campo select option { color: var(--txt-dark); }
.compadm-ayuda { display: block; margin-top: 6px; color: var(--txt-3); font-size: var(--t-xs); }

.compadm-fila { display: flex; gap: 14px; flex-wrap: wrap; }
.compadm-fila .compadm-campo { flex: 1 1 200px; }
.compadm-campo-corto { flex: 0 1 130px !important; }

.compadm-contexto {
  background: rgba(23,105,176,.10); border: 1px solid rgba(23,105,176,.30);
  border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 18px;
  color: var(--txt-2); font-size: var(--t-sm);
}
.compadm-contexto p { margin: 0; }
.compadm-contexto b { color: var(--txt-1); }

.compadm-aviso {
  background: rgba(236,183,12,.1); border: 1px solid rgba(236,183,12,.4);
  border-radius: var(--r-sm); padding: 10px 14px; color: var(--dorado);
  font-size: var(--t-sm); margin: 0 0 20px;
}
.compadm-aviso code { font-family: monospace; }

.compadm-nota { color: var(--txt-3); font-size: var(--t-sm); margin: 0 0 12px; }
.compadm-nota code { color: var(--dorado); font-family: monospace; }
.compadm-nota-espaciada { margin-top: 20px; }

.compadm-acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; margin-bottom: 6px; }
.compadm-error {
  color: #ff8a8a; font-size: var(--t-sm); background: rgba(255,90,90,.10);
  border: 1px solid rgba(255,90,90,.3); border-radius: var(--r-sm); padding: 10px 14px; margin-top: 12px;
}

.compadm-salida { margin-top: 24px; }
.compadm-codigo {
  background: #060a12; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 14px 16px; overflow-x: auto; margin-bottom: 12px;
}
.compadm-codigo code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: var(--t-sm); color: #9be89b; white-space: pre-wrap; word-break: break-word;
}

.compadm-preview { margin-top: 32px; }
.compadm-preview h3 {
  font-family: var(--f-head); font-size: var(--t-md); color: var(--txt-1); margin-bottom: 12px;
}
.compadm-tabla-mini {
  width: 100%; border-collapse: collapse; font-size: var(--t-sm);
  background: var(--bg-surface); border-radius: var(--r-sm); overflow: hidden;
}
.compadm-tabla-mini th {
  background: var(--azul-oscuro); color: var(--txt-1); text-align: left;
  padding: 8px 10px; font-family: var(--f-head); font-weight: 700;
}
.compadm-tabla-mini td { padding: 8px 10px; color: var(--txt-2); border-top: 1px solid var(--border); }
.compadm-tabla-mini tr.destacado td { color: var(--dorado); font-weight: 700; }

@media (max-width: 560px) {
  .compadm-fila { flex-direction: column; }
  .compadm-campo-corto { flex-basis: auto !important; }
}

/* ---------------------- Lista del día (competicion-admin.html) ---------------------- */
.compadm-cola {
  margin-top: 28px; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px 20px;
}
.compadm-cola-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.compadm-cola-head h3 { font-family: var(--f-head); font-size: var(--t-md); color: var(--txt-1); margin: 0; }
.compadm-cola-lista { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.compadm-cola-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 9px 12px; font-size: var(--t-sm); color: var(--txt-2);
}
.compadm-cola-item b { color: var(--dorado); font-weight: 700; }
.compadm-cola-quitar {
  flex: 0 0 auto; background: none; border: none; color: var(--txt-3); font-size: 1.2rem;
  line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.compadm-cola-quitar:hover { color: #ff8a8a; background: rgba(255,90,90,.12); }
.compadm-cola-acciones { display: flex; gap: 2px; flex: 0 0 auto; }
.compadm-cola-editar {
  flex: 0 0 auto; background: none; border: none; color: var(--txt-3); font-size: 1rem;
  line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.compadm-cola-editar:hover { color: var(--dorado); background: rgba(236,183,12,.12); }
.compadm-exito { color: #7ee787; font-size: var(--t-sm); margin-top: 12px; }

/* ---------------------- Vista "Por jornada" (partidos-admin.html) ---------------------- */
.pj-lista { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.pj-grupo {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 14px 16px;
}
.pj-grupo-cab { margin-bottom: 12px; }
.pj-grupo-cab b { color: var(--dorado); font-family: var(--f-head); font-size: var(--t-md); }

.pj-partido-cab {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin-bottom: 12px; font-size: var(--t-sm); color: var(--txt-2);
}
.pj-fecha { margin-left: auto; color: var(--txt-3); }

.pj-partido-campos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.pj-partido-campos select {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--txt-1); padding: 8px 10px; font-size: var(--t-sm); font-family: var(--f-body);
}
.pj-goles { display: inline-flex; align-items: center; gap: 6px; color: var(--txt-2); }
.pj-goles input {
  width: 52px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--txt-1); padding: 8px 6px; text-align: center; font-size: var(--t-sm);
}

.pj-amarillas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  border-top: 1px solid var(--border); padding-top: 12px;
}
.pj-amarillas-etiqueta { color: var(--txt-3); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; }
.pj-amarillas-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pj-chip {
  display: flex; align-items: center; gap: 4px; background: rgba(236,183,12,.10);
  border: 1px solid rgba(236,183,12,.35); border-radius: 999px; padding: 3px 6px 3px 10px;
  font-size: var(--t-xs); color: var(--txt-1);
}
.pj-chip-vacio { color: var(--txt-3); font-size: var(--t-xs); }
.pj-amarilla-quitar {
  background: none; border: none; color: var(--txt-3); cursor: pointer;
  font-size: .95rem; line-height: 1; padding: 0 2px;
}
.pj-amarilla-quitar:hover { color: #ff8a8a; }
.pj-amarilla-add { display: flex; gap: 6px; margin-left: auto; }
.pj-amarilla-add select {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--txt-1); padding: 6px 8px; font-size: var(--t-xs); max-width: 170px;
}

.pj-msg { margin: 10px 0 0; color: var(--txt-3); font-size: var(--t-xs); }
.pj-msg.pj-msg-ok { color: #7ee787; }

.pj-otros { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.pj-otros-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.pj-otros-etiqueta { color: var(--txt-3); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; }
.pj-otros .compadm-nota { margin: 0 0 10px; font-size: var(--t-xs); }
.pj-otros-lista { display: flex; flex-direction: column; gap: 8px; }
.pj-otro {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 8px 10px;
}
.pj-otro input[type="text"] {
  flex: 1 1 140px; min-width: 110px; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--txt-1); padding: 7px 9px; font-size: var(--t-sm); font-family: var(--f-body);
}
.pj-otro select {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--txt-1); padding: 7px 9px; font-size: var(--t-sm); font-family: var(--f-body);
}
.pj-otro-goles { display: inline-flex; align-items: center; gap: 4px; color: var(--txt-2); }
.pj-otro-goles input {
  width: 46px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--txt-1); padding: 7px 4px; text-align: center; font-size: var(--t-sm);
}
.pj-otro-quitar {
  flex: 0 0 auto; background: none; border: none; color: var(--txt-3); font-size: 1.1rem;
  line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.pj-otro-quitar:hover { color: #ff8a8a; background: rgba(255,90,90,.12); }
.pj-otro .pj-msg { flex-basis: 100%; margin: 4px 0 0; }

.pj-otro input[type="date"] {
  flex: 0 0 132px; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--txt-1); padding: 7px 9px; font-size: var(--t-sm); font-family: var(--f-body);
}

.pj-tabla-wrap { overflow-x: auto; margin-bottom: 14px; }
.pj-tabla-jornada {
  width: 100%; border-collapse: collapse; font-size: var(--t-sm);
}
.pj-tabla-jornada th, .pj-tabla-jornada td {
  padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap;
}
.pj-tabla-jornada th {
  color: var(--txt-3); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.pj-tabla-jornada td { color: var(--txt-2); }
.pj-tabla-jornada tr:last-child td { border-bottom: none; }
.pj-tabla-jornada tr.pj-tabla-propio td {
  color: var(--txt-1); font-weight: 600; background: rgba(236,183,12,.08);
}
.pj-tabla-jornada tr.pj-tabla-propio td:first-child { border-left: 2px solid var(--dorado); }

@media (max-width: 560px) {
  .pj-otro input[type="text"] { flex-basis: 100%; }
  .pj-otro input[type="date"] { flex: 1 1 100%; }
}

@media (max-width: 560px) {
  .pj-fecha { margin-left: 0; flex-basis: 100%; }
  .pj-amarilla-add { margin-left: 0; flex-basis: 100%; }
  .pj-tabla-jornada { font-size: var(--t-xs); }
  .pj-tabla-jornada th, .pj-tabla-jornada td { padding: 6px 6px; }
}

/* =====================================================================
   === BANDA DE INSCRIPCIÓN (home) ===
   Sustituye al formulario completo, que ahora vive en inscripcion.html.
   ===================================================================== */
.insc-banda {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 56px 24px;
}
.insc-banda-in {
  max-width: 1140px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
.insc-banda .eyebrow { text-align: left; }
.insc-banda h2 {
  font-size: clamp(var(--t-xl), 3.4vw, var(--t-2xl));
  color: var(--txt-1); text-wrap: balance; line-height: 1.15;
}
.insc-banda p { color: var(--txt-2); margin-top: 8px; max-width: 56ch; }
.insc-banda .btn { flex-shrink: 0; }
@media (max-width: 768px) {
  .insc-banda { padding: 44px 20px; }
  .insc-banda-in { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* Enlaces dentro de las respuestas del asistente */
.msg.bot .msg-link { color: var(--azul); text-decoration: underline; font-weight: 600; }

/* Aviso de inscripción cerrada (inscripcion.html) */
.insc-cerrada {
  background: var(--bg-card);
  padding: 30px; border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border-card);
  display: flex; flex-direction: column; gap: 14px;
}
.insc-cerrada h2 { font-size: var(--t-lg); line-height: 1.2; color: var(--txt-dark); text-wrap: balance; text-align: left; padding-bottom: 0; }
.insc-cerrada h2::after { display: none; }
.insc-cerrada p { color: var(--txt-dark); line-height: 1.55; }
.insc-cerrada-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* El atributo hidden de los elementos que dependen de INSCRIPCION_ABIERTA debe ganar siempre (aunque la clase fije display). */
[data-si-abierta][hidden], [data-si-cerrada][hidden] { display: none !important; }

/* =====================================================================
   === TIENDA 2.0 (tienda.html + tienda.js) ===
   Hero con carrusel + catálogo con filtros + visor de producto.
   Todo con prefijo .tnd- para no chocar con el resto de la web.
   Azul corporativo como protagonista; el dorado solo en los CTA.
   La diagonal del borde del visor repite las franjas de las camisetas.
   ===================================================================== */
body[data-pagina="tienda"] {
  --tnd-azul-1: #0b3a66;   /* = --azul-oscuro */
  --tnd-azul-2: #072a4d;
  --tnd-azul-3: #051d37;
  --tnd-celeste: #9cc7ee;  /* texto secundario/etiquetas sobre azul oscuro */
  --tnd-linea: rgba(156,199,238,.22);
}
html.tnd-bloqueado { overflow: hidden; }

/* ---------- HERO ---------- */
.tnd-hero {
  position: relative;
  display: grid; grid-template-columns: minmax(330px, 5fr) 7fr;
  min-height: clamp(520px, calc(100svh - 64px), 700px);
  background:
    repeating-linear-gradient(118deg, rgba(156,199,238,.045) 0 2px, transparent 2px 46px),
    linear-gradient(155deg, var(--tnd-azul-1) 0%, var(--tnd-azul-3) 100%);
  border-bottom: 1px solid var(--tnd-linea);
  overflow: hidden;
}
.tnd-hero-texto {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 56px 0 56px max(24px, calc((100vw - 1240px) / 2 + 24px));
  padding-right: 40px;
}
.tnd-hero .migas { justify-content: flex-start; margin-bottom: 22px; }
.tnd-hero .eyebrow { text-align: left; color: var(--tnd-celeste); margin-bottom: 14px; }
.tnd-hero h1 {
  font-size: clamp(2.7rem, 5.6vw, 5.1rem);
  font-weight: 900; text-transform: uppercase; line-height: .94; letter-spacing: -.005em;
  color: var(--txt-1); text-wrap: balance;
}
.tnd-hero h1 span { display: block; color: var(--tnd-celeste); }
.tnd-hero-sub {
  margin: 20px 0 30px; max-width: 34ch;
  font-size: 1.08rem; color: rgba(255,255,255,.8);
}

.tnd-visor-hero {
  position: relative; z-index: 1; overflow: hidden;
  background: var(--tnd-azul-3);
  margin-left: -7%;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
  outline-offset: -4px;
}
.tnd-slides, .tnd-slide { position: absolute; inset: 0; margin: 0; }
.tnd-slide {
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.tnd-slide.activa { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
.tnd-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.tnd-visor-hero.en-marcha .tnd-slide.activa img { animation: tnd-zoom 8.5s ease-out both; }
@keyframes tnd-zoom { from { transform: scale(1); } to { transform: scale(1.045); } }

.tnd-visor-barra {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 56px 28px 22px 16%;
  background: linear-gradient(to top, rgba(5,29,55,.88), rgba(5,29,55,0));
}
.tnd-visor-pie { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.tnd-visor-nombre {
  font-family: var(--f-head); font-weight: 800; text-transform: uppercase;
  font-size: 1.15rem; letter-spacing: .04em; color: var(--txt-1);
}
.tnd-enlace {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font: 700 var(--t-xs)/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tnd-celeste); border-bottom: 1px solid transparent;
}
.tnd-enlace:hover { color: #fff; border-bottom-color: #fff; }
.tnd-visor-ctrl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.tnd-ctrl {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; cursor: pointer;
  background: rgba(5,29,55,.55); color: #fff;
  border: 1.5px solid rgba(255,255,255,.55);
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.tnd-ctrl:hover { background: #fff; color: var(--tnd-azul-1); border-color: #fff; }
.tnd-ctrl:active { transform: scale(.94); }

.tnd-puntos { display: flex; gap: 4px; margin-right: 8px; }
.tnd-puntos button { background: none; border: 0; cursor: pointer; padding: 20px 2px; }
.tnd-puntos i { display: block; width: 26px; height: 3px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; }
.tnd-puntos i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.tnd-puntos button.activo i::after { transform: scaleX(1); }
.tnd-puntos button.corre i::after { animation: tnd-progreso 6.5s linear both; }
.tnd-visor-hero:hover .tnd-puntos button.corre i::after,
.tnd-visor-hero:focus-within .tnd-puntos button.corre i::after { animation-play-state: paused; }
@keyframes tnd-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- COLECCIÓN ---------- */
.tnd-coleccion {
  background: linear-gradient(180deg, var(--tnd-azul-3) 0%, var(--tnd-azul-2) 38%, var(--tnd-azul-1) 100%);
  padding-bottom: 0;
}
.tnd-cab {
  max-width: 1240px; margin: 0 auto; padding: 72px 24px 26px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.tnd-cab .eyebrow { text-align: left; color: var(--tnd-celeste); }
.tnd-cab h2 {
  font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 900; text-transform: uppercase;
  line-height: 1; color: #fff;
}
.tnd-contador { color: var(--tnd-celeste); font-size: var(--t-sm); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }

.tnd-filtros-barra {
  position: sticky; top: 64px; z-index: 20;
  background: rgba(5,29,55,.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--tnd-linea); border-bottom: 1px solid var(--tnd-linea);
}
.tnd-filtros {
  max-width: 1240px; margin: 0 auto; padding: 10px 24px;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tnd-filtros::-webkit-scrollbar { display: none; }
.tnd-chip {
  flex: 0 0 auto; min-height: 44px; padding: 0 18px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--f-head); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255,255,255,.88); background: transparent;
  border: 1.5px solid rgba(156,199,238,.32); border-radius: 999px;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.tnd-chip b { font-weight: 700; color: var(--tnd-celeste); font-variant-numeric: tabular-nums; }
.tnd-chip:hover { border-color: #fff; }
.tnd-chip.activo { background: #fff; color: var(--tnd-azul-1); border-color: #fff; }
.tnd-chip.activo b { color: var(--azul); }

.tnd-grid {
  max-width: 1240px; margin: 0 auto; padding: 40px 24px 76px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  gap: 44px 26px;
}
.tnd-prod[hidden] { display: none; }
.tnd-prod { display: flex; flex-direction: column; min-width: 0; }
.tnd-prod-foto {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0;
  border: 0; border-radius: var(--r-sm); overflow: hidden; cursor: zoom-in;
  background: var(--tnd-azul-3);
}
.tnd-prod-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tnd-prod-foto:hover img { transform: scale(1.04); }
.tnd-prod-n {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(5,29,55,.82); color: #fff;
  font: 700 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px;
}
/* Segunda foto al pasar el ratón (solo con ratón) */
.tnd-prod-foto .tnd-prod-alt { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.tnd-prod-n { z-index: 2; }
@media (hover: hover) {
  .tnd-prod-foto:hover .tnd-prod-alt, .tnd-prod-foto:focus-visible .tnd-prod-alt { opacity: 1; }
  .tnd-prod-foto:hover .tnd-prod-alt { transform: none; }
}
.tnd-prod-info { padding-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.tnd-prod-cat { color: var(--tnd-celeste); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.tnd-prod h3 { font-size: 1.45rem; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; color: #fff; }
.tnd-prod-precio { font-family: var(--f-head); font-weight: 800; font-size: 1.25rem; color: #fff; }
.tnd-prod-reservar {
  align-self: flex-start; margin-top: 8px; padding: 10px 0 4px;
  font: 700 var(--t-xs)/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase;
  color: #fff; text-decoration: none; border-bottom: 2px solid rgba(156,199,238,.45);
  transition: border-color var(--ease), color var(--ease);
}
.tnd-prod-reservar:hover { border-bottom-color: var(--dorado); color: #fff; }
.tnd-prod-foto:focus-visible, .tnd-prod-reservar:focus-visible, .tnd-chip:focus-visible, .tnd-ctrl:focus-visible { outline-offset: 3px; }

.tnd-noscript { color: #fff; padding: 24px; text-align: center; }

.tnd-reserva {
  max-width: 1240px; margin: 0 auto; padding: 38px 24px 64px;
  border-top: 1px solid var(--tnd-linea);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.tnd-reserva h3 { font-size: clamp(1.5rem, 3vw, 2rem); text-transform: uppercase; font-weight: 800; color: #fff; }
.tnd-reserva p { color: rgba(255,255,255,.78); max-width: 52ch; margin-top: 6px; }

/* ---------- VISOR AMPLIADO ---------- */
.tnd-dialogo {
  width: min(1120px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 1px solid var(--tnd-linea); border-radius: var(--r-lg);
  background: var(--tnd-azul-3); color: #fff; overflow: hidden;
}
.tnd-dialogo::backdrop { background: rgba(3,12,24,.84); backdrop-filter: blur(3px); }
.tnd-d-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); max-height: calc(100dvh - 34px); }
.tnd-d-galeria { display: flex; flex-direction: column; min-width: 0; background: #031326; }
.tnd-d-principal { position: relative; flex: 1; min-height: 0; height: min(76dvh, 760px); display: grid; place-items: center; }
.tnd-d-principal img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.tnd-d-prev, .tnd-d-next { position: absolute; top: 50%; transform: translateY(-50%); }
.tnd-d-prev { left: 12px; } .tnd-d-next { right: 12px; }
.tnd-dialogo.una-foto .tnd-d-prev, .tnd-dialogo.una-foto .tnd-d-next, .tnd-dialogo.una-foto .tnd-d-minis { display: none; }
.tnd-d-minis { display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; border-top: 1px solid var(--tnd-linea); }
.tnd-d-minis button {
  flex: 0 0 auto; width: 64px; height: 64px; padding: 0; cursor: pointer; overflow: hidden;
  border: 2px solid transparent; border-radius: 8px; background: var(--tnd-azul-3); opacity: .65;
  transition: opacity var(--ease), border-color var(--ease);
}
.tnd-d-minis button img { width: 100%; height: 100%; object-fit: cover; }
.tnd-d-minis button:hover { opacity: 1; }
.tnd-d-minis button.activo { opacity: 1; border-color: #fff; }

.tnd-d-info {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 44px 30px 30px; overflow-y: auto;
  background: linear-gradient(170deg, var(--tnd-azul-1), var(--tnd-azul-3));
}
.tnd-d-info h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 900; text-transform: uppercase; line-height: 1; color: #fff; }
.tnd-d-precio { font-family: var(--f-head); font-weight: 800; font-size: 1.6rem; color: #fff; }
.tnd-d-desc { color: rgba(255,255,255,.82); max-width: 40ch; margin: 4px 0 14px; }
.tnd-d-nota { font-size: var(--t-xs); color: var(--tnd-celeste); }
.tnd-d-cerrar {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; color: #fff; border: 0; border-radius: 50%; cursor: pointer;
}
.tnd-d-cerrar:hover { background: rgba(255,255,255,.14); }

/* ---------- TABLET ---------- */
@media (max-width: 1100px) {
  .tnd-hero { grid-template-columns: minmax(300px, 5fr) 6fr; }
  .tnd-hero h1 { font-size: clamp(2.5rem, 5.4vw, 3.8rem); }
}

/* ---------- MÓVIL / TABLET VERTICAL ---------- */
@media (max-width: 860px) {
  .tnd-hero { grid-template-columns: 1fr; min-height: 0; }
  .tnd-visor-hero {
    order: -1; margin-left: 0; clip-path: none;
    aspect-ratio: 4 / 3; width: 100%;
  }
  .tnd-slide img { object-position: 50% 50%; }
  .tnd-hero h1 { font-size: clamp(2.55rem, 8.2vw, 4.2rem); }
  .tnd-hero-texto { padding: 30px 24px 44px; }
  .tnd-hero-sub { max-width: 46ch; }
  .tnd-visor-barra { padding: 40px 14px 8px 16px; align-items: center; }
  .tnd-visor-nombre { font-size: 1rem; }
  .tnd-ctrl { width: 40px; height: 40px; }
  .tnd-puntos { display: none; }
  .tnd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; padding: 28px 16px 56px; }
  .tnd-cab { padding: 52px 16px 20px; }
  .tnd-filtros { padding: 8px 16px; }
  .tnd-prod h3 { font-size: 1.15rem; }
  .tnd-prod-cat { font-size: 10px; letter-spacing: .05em; }
  .tnd-reserva { padding: 34px 16px 52px; }
  .tnd-reserva .btn { width: 100%; }
  .tnd-d-grid { grid-template-columns: 1fr; overflow-y: auto; }
  .tnd-dialogo { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .tnd-d-principal { height: min(46dvh, 440px); }
  .tnd-d-info { position: static; padding: 20px 20px 26px; overflow: visible; }
  .tnd-d-cerrar { top: 8px; right: 8px; background: rgba(5,29,55,.78); z-index: 5; }
  .tnd-d-info .btn { width: 100%; }
}

/* ---------- MOVIMIENTO REDUCIDO ---------- */
@media (prefers-reduced-motion: reduce) {
  .tnd-slide, .tnd-slide.activa { transition: none; }
  .tnd-visor-hero.en-marcha .tnd-slide.activa img { animation: none; }
  .tnd-puntos button.corre i::after { animation: none; transform: scaleX(1); }
  .tnd-prod-foto img { transition: none; }
  .tnd-prod-foto .tnd-prod-alt { transition: none; }
  .tnd-prod-foto:hover img { transform: none; }
}