/* ============================================================================
   Attempo Agency — Hoja de estilos
   Vanilla CSS puro. Sin frameworks, sin preprocesadores, sin build step.
   Sistema de diseño: DESIGN-SYSTEM.md (tokens, .t-*, componentes y estados).
   Web diseñada por BoqueronPixel | boqueronpixel@gmail.com | @BoqueronPixel
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. FUENTES — alojadas en fonts/ (NO volver a usar Google Fonts: enviaba la
      IP de cada visitante a Google sin consentimiento).
      Archivos .woff2 oficiales de Fontsource 5.3.0, subconjunto latin, solo
      las variantes en uso. Licencias SIL OFL 1.1 en fonts/LICENSE-*.txt.
      Rutas relativas a este CSS: ../fonts/…
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   1. TOKENS (:root) — copiados tal cual del sistema de diseño (§2).
      Única fuente de verdad: los componentes solo consumen tokens.
   --------------------------------------------------------------------------- */
:root {
  /* COLOR — Marca */
  --bg: #0A0908;            /* Fondo base. Negro cálido.                       */
  --surface: #17110C;       /* Bloques elevados, tarjetas.                     */
  /* Franja de máximo peso visual ("El diferencial"). Antes era el marrón profundo
     #241A11; el cliente pide toda la web en negro y azul, así que se sustituye por
     un azul hielo muy oscurecido (mismo tono ~202° que --ice). Se eligió esta
     luminancia (0.0113) por ser casi idéntica a la del marrón que reemplaza, para
     que la franja conserve exactamente el mismo peso frente a --bg y --surface.
     Contraste: cream 13.5:1 · ice 13.0:1 · muted 4.85:1 (todos AA). */
  --surface-deep-blue: #111D24;
  --ice: #D1E3ED;           /* Acento: líneas, titulares clave, enlaces.       */
  --cream: #EBE3D6;         /* Texto principal.                                */
  --muted: #7E8A92;         /* Texto secundario, metadatos.                    */

  /* Color de marca de referencia (documentación; no usar como tinta) */
  --brand-brown: #2E1B0D;

  /* Tarjetas en azul hielo (petición del cliente: servicios y jugadores).
     Texto sobre --ice: casi negro (≈15:1) y un gris azulado oscuro para el
     texto de apoyo (≈10:1). Ambos pasan AA y AAA. */
  --on-ice: #0A0908;
  --on-ice-soft: #27333A;
  --on-ice-line: rgba(10, 9, 8, 0.22);

  /* COLOR — Derivados funcionales */
  --ice-rgb: 209, 227, 237;
  --cream-rgb: 235, 227, 214;

  --line: rgba(var(--ice-rgb), 0.32);        /* Filete estándar (separadores). */
  --line-strong: rgba(var(--ice-rgb), 0.55); /* Filete de marco de tarjeta.    */
  --line-faint: rgba(var(--cream-rgb), 0.10);/* Divisor sutil sobre oscuro.    */
  /* B2 · Filete divisorio de sección: azul hielo a baja opacidad, nunca gris
     neutro. Equivale a color-mix(in srgb, var(--ice) 30%, transparent) pero en
     rgba() para no depender del soporte de color-mix. */
  --line-rule: rgba(var(--ice-rgb), 0.30);

  --ice-hover: rgba(var(--ice-rgb), 0.12);   /* Relleno hover discreto.        */
  --focus-ring: #D1E3ED;                     /* Anillo de foco de teclado.     */
  --overlay: rgba(10, 9, 8, 0.72);           /* Velo del menú móvil.           */

  /* TIPOGRAFÍA — Familias */
  --font-serif: 'Instrument Serif', 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:  'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Consolas', monospace;

  /* TIPOGRAFÍA — Escala modular (ratio 1.25 · Major Third) */
  --fs-2xs:  0.694rem;
  --fs-xs:   0.8rem;
  --fs-sm:   0.9rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.35rem;
  --fs-xl:   1.7rem;
  --fs-2xl:  2.15rem;
  --fs-3xl:  2.7rem;
  --fs-4xl:  3.4rem;
  --fs-5xl:  4.5rem;

  /* Interlineados */
  --lh-tight:   1.05;
  --lh-heading: 1.15;
  --lh-body:    1.65;
  --lh-ui:      1.4;

  /* Tracking (letter-spacing) */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.14em;

  /* Pesos */
  --fw-serif:      400;
  --fw-body:       400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-mono:       500;

  /* ESPACIADO — Base 4px */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   3rem;
  --space-8:   4rem;
  --space-9:   6rem;
  --space-10:  8rem;

  /* LÍNEAS / FILETES — El elemento de firma */
  --hair: 1px;
  --hair-2: 2px;
  --border-line:  var(--hair) solid var(--line);
  --border-strong: var(--hair) solid var(--line-strong);
  --border-faint: var(--hair) solid var(--line-faint);

  /* RADIOS */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;

  /* SOMBRAS */
  --shadow-none: none;
  --shadow-nav:  0 1px 0 0 var(--line);
  --shadow-float: 0 12px 32px -12px rgba(0, 0, 0, 0.65);

  /* LAYOUT */
  --content-max: 1200px;
  --text-max: 62ch;
  --nav-h: 4.5rem;
  --gutter: var(--space-5);

  /* B1 · Ritmo vertical — una sola variable para TODAS las secciones.
     Es el padding vertical de cada lado, así que el aire entre dos secciones
     contiguas es 2 × --section-gap (128–208px). A 1440×800 eso deja ~25% de
     pantalla vacía en la transición, por debajo del tercio máximo. */
  --section-gap: clamp(2.75rem, 4.5vw, 4.25rem);
  /* Aire entre sub-bloques dentro de una misma sección (cabecera → contenido,
     CTA → rejilla de patrocinadores…). Siempre menor que --section-gap. */
  --subsection-gap: clamp(2.5rem, 4vw, 3.5rem);

  /* C1 · Medida de lectura única para los bloques de texto corrido. En rem
     (no en ch) para que no cambie con el tamaño de fuente del párrafo: así
     .t-lead (18px) y .t-body (16px) comparten exactamente el mismo ancho.
     Ajustada de 33rem a 32rem al justificar el texto: medido sobre los párrafos
     reales, con 32rem la línea peor pasa de 20 a 12 px de espacio extra por
     hueco (−39%), porque los cortes de línea caen mejor. */
  --measure: 32rem;

  /* MOVIMIENTO */
  --dur-fast:   140ms;
  --dur-normal: 240ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-INDEX */
  --z-nav: 100;
  --z-menu: 110;
  --z-cookies: 200;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   2. RESET / BASE (§9.4)
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

/* El atributo [hidden] debe ganar a cualquier display de componente (p. ej.
   .map__consent { display: grid }), o el elemento oculto seguiría viéndose. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + var(--space-4)); /* ancla bajo el nav sticky */
}

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul, ol { list-style: none; padding: 0; }

/* Red de seguridad del foco de teclado.
   Cada componente define su propio anillo (botón, .link, nav, marca, logo…);
   esta regla cubre cualquier interactivo que NO lleve clase de componente
   —enlaces sueltos de las páginas legales, elementos con [tabindex]— para que
   ningún tabulador se quede sin indicador visible.
   Va en :where() (especificidad 0) para no pisar los anillos de componente, y
   vive FUERA de todo @media (hover: hover): el foco debe verse con cualquier
   dispositivo de entrada, también en táctil con teclado emparejado. */
:where(a[href], button, [tabindex], summary):focus-visible {
  outline: var(--hair-2) solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}

/* Enlace "saltar al contenido" — oculto hasta foco (§9.4) */
.skip-link {
  /* A11Y · fixed (antes absolute): al volver a él desde el final de la página
     quedaba a medias fuera de la vista (y = -17px medido). Fijo, siempre aparece
     arriba a la vista al recibir el foco. */
  position: fixed;
  left: var(--space-4);
  top: -100%;
  z-index: var(--z-cookies);
  background: var(--surface);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  padding: var(--space-3) var(--space-5);
  border: var(--border-strong);
  border-radius: var(--radius-1);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus {
  top: var(--space-3);
  outline: var(--hair-2) solid var(--focus-ring);
  outline-offset: 3px;
}
/* A11Y · Destino de foco programático (tabindex="-1"): <main> recibe el foco al
   cerrar el banner de cookies si no hay otro punto al que volver. Es un
   contenedor, no un control: no lleva anillo (el anillo rodearía toda la página). */
main[tabindex="-1"]:focus { outline: none; }

/* Utilidad accesible: oculto visualmente, presente para lector de pantalla */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   3. UTILIDADES TIPOGRÁFICAS (.t-*) — §3.3, copiadas del sistema
   --------------------------------------------------------------------------- */
.t-hero {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: clamp(var(--fs-4xl), 8vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--cream);
}

.t-statement {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-3xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--cream);
  max-width: 20ch;
}

.t-h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl));
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--cream);
}

.t-h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
  color: var(--cream);
}

.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ice);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--cream);
  max-width: var(--text-max);
}

.t-lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--cream);
  max-width: var(--text-max);
}

.t-muted {
  font-family: var(--font-sans);
  font-weight: var(--fw-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--muted);
}

.t-data {
  font-family: var(--font-mono);
  font-weight: var(--fw-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  letter-spacing: var(--tracking-wide);
  color: var(--ice);
}

/* ---------------------------------------------------------------------------
   4. LAYOUT — contenedor, sección, separador de firma (§4)
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* B1 · Un único espaciado de sección. No añadir margin-top/bottom sueltos a
   secciones, títulos ni contenedores de rejilla: todo el aire sale de aquí. */
.section { padding-block: var(--section-gap); }

/* El ancla no debe quedar bajo la cabecera sticky (refuerza scroll-padding-top). */
.section,
.differential { scroll-margin-top: calc(var(--nav-h) + var(--space-4)); }

/* Cabecera de sección: solo lleva el H2 (los kickers de sección se eliminaron;
   el único que queda es el del hero). El aire hasta el contenido sale de aquí. */
.section__head {
  margin-bottom: var(--subsection-gap);
  max-width: var(--measure);
}

/* B2 · Filete divisorio: mide y se alinea con el ancho del CONTENIDO.
   Se pinta como background con background-clip: content-box para que la línea
   quede dentro del padding lateral del .container y case con el texto.
   (Antes `margin: 0` anulaba el `margin-inline: auto` de .container y el filete
   arrancaba en el borde de la ventana.) */
.section-rule {
  border: 0;
  height: var(--hair);
  background-color: var(--line-rule);
  background-clip: content-box;
  margin-block: 0;
  margin-inline: auto;
}

@media (min-width: 64rem) { /* 1024px */
  .container { padding-inline: var(--space-7); }
}

/* ---------------------------------------------------------------------------
   5. BOTÓN / CTA (§6.1)
   --------------------------------------------------------------------------- */
.btn {
  --btn-fg: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  letter-spacing: 0.01em;
  color: var(--btn-fg);
  padding: var(--space-3) var(--space-5);
  min-height: 44px;                 /* área táctil ≥ 44px */
  border: var(--border-strong);
  border-radius: var(--radius-1);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn:active { transform: translateY(1px); }

/* A3 · PRIMARIO — sólido azul hielo sobre fondo, texto en --bg.
   Es la acción principal: "Nuestros jugadores", "Escríbenos", "Ver mapa aquí".
   (Aceptar/Rechazar del banner van ambos en fantasma por paridad AEPD.) */
.btn--primary {
  background: var(--ice);
  color: var(--bg);
  border-color: var(--ice);
}
.btn--primary:active { background: var(--cream); border-color: var(--cream); color: var(--bg); }

/* A3 · FANTASMA — transparente, filete 1px azul hielo, texto crema.
   Acción secundaria: "Patrocinar". */
.btn--ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--ice);
}

/* Hover solo en punteros de verdad (D1): en táctil, el estado se quedaba
   pegado tras el tap. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-color: var(--ice); background: var(--ice-hover); }
  /* Primario: se aclara a crema, sigue siendo sólido (no se vacía). */
  .btn--primary:hover { background: var(--cream); border-color: var(--cream); color: var(--bg); }
  /* Fantasma: se rellena con el velo hielo y el filete gana cuerpo. */
  .btn--ghost:hover { background: var(--ice-hover); border-color: var(--ice); color: var(--cream); }
}

/* Focos diferenciados: sobre el primario (relleno hielo) el anillo hielo no se
   vería, así que ahí el anillo va en crema. */
.btn:focus-visible {
  outline: var(--hair-2) solid var(--focus-ring);
  outline-offset: 3px;
}
.btn--primary:focus-visible {
  outline-color: var(--cream);
  outline-offset: 4px;
}
.btn--ghost:focus-visible {
  outline-color: var(--ice);
  outline-offset: 3px;
}

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   6. ENLACE DE TEXTO (§6.2)
   --------------------------------------------------------------------------- */
.link {
  color: var(--ice);
  text-decoration: none;
  border-bottom: var(--hair) solid transparent;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { border-bottom-color: var(--ice); }
}
.link:focus-visible {
  outline: var(--hair-2) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-1);
}

/* Icono lineal dentro de enlaces (§8) */
.icon {
  width: 1.1em; height: 1.1em;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
   7. MENÚ SUPERIOR STICKY (§7.1)
   --------------------------------------------------------------------------- */
/* El sticky va en el <header> de página, no solo en .nav: un elemento sticky solo
   se pega dentro de su bloque contenedor, y el <header> mide lo mismo que el nav,
   así que .nav nunca llegaba a pegarse (medido: a scrollY 2000 el nav estaba en
   top −2000). Con el <header> sticky el menú queda fijo arriba como pide el
   brief, y scroll-padding-top (en html) evita que tape el foco (WCAG 2.4.11). */
body > header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}
/* .nav ya no lleva su propio sticky/z-index: dentro de un <header> de su misma
   altura no tenía recorrido, y el apilado lo da el <header>. */
.nav {
  height: var(--nav-h);
  background: rgba(10, 9, 8, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-nav);
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Marca: isotipo + wordmark en Poppins */
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--cream);
  padding: var(--space-2) 0;
  border-radius: var(--radius-1);
}
.nav__brand-mark { width: 2rem; height: 2rem; color: var(--ice); }
.nav__brand-text {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
  color: var(--cream);
}
.nav__brand:focus-visible {
  outline: var(--hair-2) solid var(--focus-ring);
  outline-offset: 4px;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--cream);
  text-decoration: none;
  padding-block: var(--space-2);
  min-height: 44px;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  height: var(--hair);
  background: var(--ice);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.nav__link[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover::after { transform: scaleX(1); }
}
.nav__link[aria-current="true"] { color: var(--ice); }
.nav__link:focus-visible {
  outline: var(--hair-2) solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-1);
}

/* Botón hamburguesa (solo móvil) */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  border: var(--border-line);
  border-radius: var(--radius-1);
}
@media (hover: hover) and (pointer: fine) {
  .nav__toggle:hover { border-color: var(--ice); background: var(--ice-hover); }
}
.nav__toggle:focus-visible {
  outline: var(--hair-2) solid var(--focus-ring);
  outline-offset: 3px;
}
.nav__toggle .icon { width: 1.4rem; height: 1.4rem; }
.nav__toggle-close { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-open  { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-close { display: block; }

/* Móvil (<768px): la lista colapsa en panel overlay */
@media (max-width: 47.99rem) {
  .nav__toggle { display: inline-flex; }

  .nav__list {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--overlay);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-float);
    border-bottom: var(--border-strong);
    padding: var(--space-3) var(--gutter) var(--space-5);
    z-index: var(--z-menu);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-normal) var(--ease),
                transform var(--dur-normal) var(--ease),
                visibility 0s linear var(--dur-normal);
  }
  .nav__list[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-normal) var(--ease),
                transform var(--dur-normal) var(--ease);
  }
  .nav__item { border-bottom: var(--border-faint); }
  .nav__item:last-child { border-bottom: 0; }
  .nav__link {
    width: 100%;
    padding-block: var(--space-4);
    font-size: var(--fs-md);
  }
  .nav__link::after { bottom: 12px; }
}

/* ---------------------------------------------------------------------------
   8. HERO tipográfico (§7.2)
   --------------------------------------------------------------------------- */
/* A1 · Hero estrictamente tipográfico: kicker → filete → H1 → subtítulo → botones.
   El lockup del logo vive solo en la cabecera; aquí no hay imagen.
   A2 · La sección ocupa la primera pantalla y centra el bloque verticalmente.
   Se descuenta --nav-h porque el nav es sticky y ocupa sitio en el flujo: sin el
   calc, el hero mediría 100svh + 72px y el último botón caería bajo el pliegue. */
.section--hero {
  /* El hueco muerto bajo los botones no era padding: era la mitad inferior del
     centrado de un hero a pantalla completa (240px a 900px de alto). Se acota la
     altura para que ese sobrante se reduzca, sin perder presencia de portada.
     En pantallas bajas manda el 100svh, así que nunca desborda. */
  min-height: min(calc(100svh - var(--nav-h)), 38rem);
  display: flex;
  align-items: center;
  /* Padding mínimo: el aire lo pone el centrado, no un espacio de sección. */
  padding-block: var(--space-6);
}

/* Hero CENTRADO: única sección centrada de toda la web (recurso editorial:
   portada centrada, interior a la izquierda). El resto sigue alineado a la izq. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Un solo ritmo interno; sin márgenes sueltos que se sumen. */
  gap: var(--space-4);
}
.hero > * { margin: 0; }

.hero__rule {
  width: 4rem;
  border: 0;
  height: var(--hair);
  background: var(--ice);
  /* El filete es un remate del kicker: pegado a él, no un espacio de sección. */
  margin-block: calc(var(--space-1) * -1) var(--space-1);
}

/* Reparto para el copy nuevo (H1 corto, subtítulo largo): el titular manda en
   ancho y el subtítulo va más estrecho, anidado bajo él. Así el hero centrado no
   queda como un bloque rectangular con ambos al mismo ancho.
   text-wrap: balance reparte las dos líneas del H1 a lo parejo. */
.hero__claim {
  max-width: 20ch;
  text-wrap: balance;
  /* A11Y · WCAG 1.4.12 · Con espaciado de texto aumentado a 320px, «Representamos»
     (54px) no cabía y empujaba la página a 343px. Solo parte si no cabe. */
  overflow-wrap: break-word;
}
.hero__lead  { max-width: 30rem; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* botones centrados como grupo (hero centrado) */
  gap: var(--space-4);
  margin-top: var(--space-2);
}
/* Móvil: los tres CTA no caben en una línea. Se apilan a un mismo ancho, en vez
   de quedar 2 + 1 descuadrados; así ninguno desborda ni parte el texto. */
@media (max-width: 47.99rem) {
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 17rem);
  }
  .hero__cta .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   8b. BLOQUE PARTIDO texto + imagen (Quiénes somos · Patrocinio)
   --------------------------------------------------------------------------- */
/* Móvil primero: una sola columna. El texto va antes que la imagen en el DOM, así
   que en móvil la imagen nunca abre la sección (no hace falta reordenar). */
.split {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 64rem) {           /* 1024px */
  /* La imagen es ACOMPAÑAMIENTO, no protagonista: un tercio para ella, dos
     tercios para el texto, que es quien debe llevarse la mirada. */
  .split {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-8);
    align-items: start;               /* la imagen no sigue al texto hasta el final */
  }
}
.split__text { min-width: 0; }         /* evita que el texto desborde la columna */

/* El último bloque del texto no debe aportar margen inferior: inflaba la columna
   56px por debajo del último párrafo y, como la imagen de Patrocinio sigue la
   altura de esa columna, la arrastraba con ella y dejaba un vacío muerto.
   La separación con lo que viene después se pone en el bloque partido entero. */
.split__text > *:last-child { margin-bottom: 0; }
.split--top { margin-bottom: var(--subsection-gap); }

/* Marco compartido por las tres imágenes de sección (dos en Quiénes somos, una en
   Patrocinio): mismo filete de 1px en --ice a baja opacidad que el resto del
   sistema. */
.section-media {
  margin: 0;
  border: var(--hair) solid var(--line-rule);
  border-radius: var(--radius-1);
  overflow: hidden;
  background: var(--surface);
}
.section-media img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  /* En una columna (móvil/tablet) la imagen no debe comerse la pantalla entera. */
  max-height: 60svh;
}

/* Pila de dos imágenes (Quiénes somos). El conjunto —las dos más el hueco— es lo
   que se aproxima a la altura del texto; ninguna se estira por su cuenta. */
.media-stack {
  display: grid;
  gap: 1rem;
}
/* En una sola columna se recortan más: dos imágenes a 60svh serían un scroll
   interminable en móvil. */
.media-stack .section-media img { max-height: 42svh; }
@media (min-width: 64rem) {
  /* QUIÉNES SOMOS · imagen acotada y CENTRADA verticalmente respecto al bloque de
     texto: alineada arriba quedaba descolgada, porque el texto sigue mucho más
     abajo. Se le da una proporción más apaisada que el 3:4 del archivo (y un tope
     de altura) para que no quede como una tira estrecha. */
  .split--stretch {
    align-items: center;
    /* Algo más de columna que el 2fr 1fr general: esta imagen gana presencia
       (el texto sigue mandando, pero deja de leerse como una viñeta pequeña). */
    grid-template-columns: 1.7fr 1fr;
  }
  /* Altura pensada para que 2 imágenes + 1rem de hueco ≈ la altura del texto. */
  .split--stretch .section-media img {
    aspect-ratio: 4 / 5;
    max-height: 455px;
  }

  /* PATROCINIO · la imagen NUNCA puede acabar por debajo de su texto (antes
     sobresalía 375px y flotaba sobre las tarjetas de beneficios).
     Con la fila estirada y la imagen en posicionamiento absoluto, la imagen no
     aporta altura propia: se limita exactamente a lo que mide el bloque de texto.
     El min-height evita que quede como una miniatura si el texto fuese muy corto. */
  .split--top {
    /* Centrada tambien en vertical respecto al bloque de texto. */
    align-items: center;
    /* Misma rejilla que .benefit-list (repeat(2,1fr) + --space-6): así la imagen
       queda a plomo con la columna de tarjetas que tiene justo debajo. Antes el
       bloque usaba 2fr 1fr y la imagen arrancaba 170px metida hacia dentro
       respecto a esa columna, que es lo que la hacía verse descuadrada. */
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-6);
  }
  .split--top .section-media {
    /* position: relative es el ancla de la imagen en posicionamiento absoluto. */
    position: relative;
    /* Recupera el TAMAÑO que tenía antes (~308×248, proporción 308/248) en vez de
       ocupar toda la columna, y se centra dentro de ella: por eso el 64% + auto.
       El centrado vertical respecto al texto lo da el align-items: center de
       arriba; ya no cuelga de la altura del texto. */
    width: 64%;
    margin-inline: auto;
    aspect-ratio: 308 / 248;
    height: auto;
  }
  .split--top .section-media img {
    position: absolute;
    inset: 0;
    height: 100%;
    max-height: none;
    /* Al quedar la caja apaisada, el recorte centrado dejaba al jugador sin
       cabeza (un torso anónimo). Anclando arriba se conservan cabeza y hombros,
       que es lo que hace reconocible la foto. */
    object-position: center top;
  }
}

/* ---------------------------------------------------------------------------
   9. QUIÉNES SOMOS
   --------------------------------------------------------------------------- */
/* C1 · Un único max-width y un único line-height para TODO el bloque, incluido
   el párrafo de entrada en .t-lead (18px) y el destacado en negrita. La medida
   va en rem (--measure), no en ch, para que no se ensanche con el cuerpo mayor. */
.about__intro,
.about__philosophy { display: grid; gap: var(--space-5); }
.about__intro { margin-bottom: var(--space-5); }   /* mismo hueco que entre párrafos */

.about__intro p,
.about__philosophy p {
  max-width: var(--measure);
  line-height: var(--lh-body);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   TEXTO JUSTIFICADO — solo bloques de párrafo largo
   Quiénes somos · El diferencial · Patrocinio (intro).
   NO se aplica a titulares, kickers ni a los textos cortos de las tarjetas de
   servicios y beneficios: en columnas cortas la justificación abre "ríos" de
   espacio entre palabras. La división silábica (hyphens) necesita el lang="es"
   del <html>, que ya está puesto: sin él el navegador no sabe cómo partir y la
   justificación deja huecos irregulares. OJO: `hyphens: auto` solo actúa si el
   navegador trae el diccionario de español, y no siempre está disponible; por eso
   no se confía en él para el reparto. El ancho de línea (--measure) se ajustó
   midiendo los párrafos reales para que el estiramiento sea aceptable sin guiones.
   --------------------------------------------------------------------------- */
.about__intro p,
.about__philosophy p,
.differential__body p,
.sponsor-intro p {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
          hyphens: auto;
  /* Red de seguridad: evita que una palabra muy larga rompa la caja al justificar. */
  overflow-wrap: break-word;
}
.about__lead-line {
  color: var(--cream);
  font-weight: var(--fw-medium);
}

/* ---------------------------------------------------------------------------
   10. EL DIFERENCIAL (§7.3) — fondo --surface-deep-blue, máximo peso visual
   --------------------------------------------------------------------------- */
.differential {
  background: var(--surface-deep-blue);
  border-block: var(--hair) solid var(--line-rule);
  /* B1 · mismo ritmo que el resto de secciones */
  padding-block: var(--section-gap);
}

.differential__grid { display: grid; gap: var(--space-6); }
.differential__body { display: grid; gap: var(--space-4); }
/* Sobre --surface-deep-blue, el texto de apoyo va en crema (regla §9.1) */
.differential__body p { color: var(--cream); max-width: var(--measure); margin: 0; }
.differential__statement { margin-top: var(--space-4); }

@media (min-width: 64rem) {
  .differential__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
    align-items: start;
  }
}

/* ---------------------------------------------------------------------------
   11. SERVICIOS (§7.5)
   --------------------------------------------------------------------------- */
.service-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .service-grid { grid-template-columns: repeat(3, 1fr); } }

/* D1 · Estado de reposo IDÉNTICO en las cinco tarjetas. No existe variante
   destacada: ninguna tarjeta lleva .featured / .is-active. Fondo, filete y
   sombra se declaran de forma explícita para que ninguna herede otra cosa. */
.service-card {
  background: var(--ice);
  --focus-ring: var(--on-ice);
  border: var(--hair) solid var(--ice);
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-none);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  align-content: start;
  transition: border-color var(--dur-fast) var(--ease);
}
/* El realce del filete solo en foco de teclado y en hover con puntero real:
   en táctil, :hover se quedaba fijado tras el tap y parecía una tarjeta activa. */
.service-card:focus-within { border-color: var(--on-ice); }
@media (hover: hover) and (pointer: fine) {
  .service-card:hover { border-color: var(--on-ice); }
}
/* Texto sobre fondo azul hielo */
.service-card .t-h3,
.service-card .service-card__num { color: var(--on-ice); }
.service-card .service-card__desc { color: var(--on-ice-soft); }
.service-card__num {
  /* usa .t-data */
  font-size: var(--fs-md);
  text-align: center;            /* petición del cliente: número centrado */
}
.service-card__desc { max-width: none; }

/* ---------------------------------------------------------------------------
   12. JUGADORES (§7.4)
   --------------------------------------------------------------------------- */
.player-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .player-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .player-grid { grid-template-columns: repeat(4, 1fr); } }
/* Escala a 6–8 sin romperse (plantel mayor): activar clase --fluid */
.player-grid--fluid {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* E2 · La tarjeta es una columna: cuerpo elástico y bloque de enlaces anclado
   abajo, para que las cuatro tarjetas midan lo mismo y los enlaces queden a la
   misma altura aunque el nombre ocupe una o dos líneas. */
.player-card {
  background: var(--ice);
  --focus-ring: var(--on-ice);
  border: var(--hair) solid var(--ice);
  border-radius: var(--radius-0);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-normal) var(--ease);
}

/* E1 · Encuadre unificado: caja de proporción fija (3/4) + object-fit: cover.
   El encuadre vive EN EL ARCHIVO (reencuadre en origen), no en el CSS: los cuatro
   JPG se recortaron para que la línea de ojos quede en 0.328 de la altura y las
   caras compartan escala. Todos son 3/4 exactos, igual que la caja, así que
   object-position no tiene recorrido; --photo-pos y --photo-ratio quedan como
   ganchos opcionales por si algún día llega una foto con otra proporción.
   Originales sin tocar en img/originales/. La foto de Iván lleva la pared
   superior extendida ~141px (fondo liso, reflejo) para ganar aire sobre la cabeza. */
.player-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: var(--photo-ratio, 3 / 4);
  object-fit: cover;
  object-position: var(--photo-pos, 50% 50%);
  border: var(--border-strong);
  border-radius: var(--radius-0);
  background: var(--surface-deep-blue);
  transition: border-color var(--dur-normal) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .player-card:hover { transform: translateY(-2px); }
  .player-card:hover .player-card__photo { border-color: var(--on-ice); }
}
.player-card:focus-within .player-card__photo { border-color: var(--on-ice); }

.player-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;                        /* empuja los enlaces al pie de la tarjeta */
}
.player-card__pos { text-transform: uppercase; }
/* Texto sobre fondo azul hielo */
.player-card .t-h3 { color: var(--on-ice); }
.player-card .player-card__pos { color: var(--on-ice-soft); }
.player-card .link { color: var(--on-ice); }
@media (hover: hover) and (pointer: fine) {
  .player-card .link:hover { border-bottom-color: var(--on-ice); }
}

/* E2 · Un enlace por línea SIEMPRE, en las cuatro tarjetas. Sin wrap: los
   nombres largos de Instagram no pueden colocarse junto a "Ficha FIP". */
.player-card__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: auto;               /* alinea el bloque al pie en todas las tarjetas */
  padding-top: var(--space-3);
  border-top: var(--hair) solid var(--on-ice-line);
}
.player-card__links .link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;              /* área táctil ≥ 44px */
  /* P6 · Sube a 16px (--fs-base) para que los enlaces se lean bien. El alias más
     largo (@ivan_del_aguila_padel09) puede quebrar a 2 líneas a 4 columnas; se
     acepta y overflow-wrap evita desbordes. */
  font-size: var(--fs-base);
  max-width: 100%;
  overflow-wrap: anywhere;       /* red de seguridad: nunca desborda la tarjeta */
}
/* P6 · Iconos a 1.5em, en el mismo tono oscuro (--on-ice) que el texto del
   enlace, sobre el fondo azul hielo de la tarjeta. */
.player-card__links .icon { width: 1.5em; height: 1.5em; color: var(--on-ice); }

/* ---------------------------------------------------------------------------
   13. PATROCINIO
   --------------------------------------------------------------------------- */
.sponsor-intro {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--subsection-gap);
}
.sponsor-intro p { max-width: var(--measure); margin: 0; }

.benefit-list {
  display: grid;
  gap: var(--space-5);
  margin-block: var(--subsection-gap);
}
@media (min-width: 48rem) { .benefit-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }

.benefit {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: var(--border-line);
}
.benefit__title { color: var(--cream); }
.benefit__desc { max-width: none; }

.sponsor-cta {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-line);
  border-radius: var(--radius-2);
  background: var(--surface);
  margin-block: var(--subsection-gap);
}
@media (min-width: 48rem) {
  .sponsor-cta {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-6);
  }
}
.sponsor-cta__text { max-width: 48ch; }

/* ---------------------------------------------------------------------------
   13.b REJILLA DE PATROCINADORES (§7.6) — una tinta crema, 70% → 100%

   F3 · El titular va a la izquierda (alineación por defecto) como el resto de
        titulares de sección y se separa de la caja CTA con el espaciado de
        sub-bloque.

   F2 · SOBRE EL FILTRO DE COLOR — decisión documentada, logo a logo:
        Los 7 logos en uso YA están horneados en crema #EBE3D6:
          · joma.svg, ace.svg, wilson.svg, alacran.svg, padelpoint.svg
            → todos sus `fill` son #EBE3D6 (los #ed1765 / #49ddf4 que quedan en
              el archivo son paradas de gradiente huérfanas dentro de <defs>,
              no las referencia ningún trazo).
          · alameda-mono.png y jabato.png → PNG con alfa, tinta 235,227,214.
        Por eso NO se les aplica `grayscale(1) brightness(0) invert(1)`: ese
        filtro los llevaría a blanco puro #FFFFFF y rompería la tinta crema de
        la paleta. La unificación se hace solo con opacidad: .7 en reposo → 1 en
        hover/foco, que es lo que pide el sistema.
        El gancho [data-mono] se conserva para futuros logos raster que lleguen
        en color: a esos sí habrá que aplicarles el filtro.
   --------------------------------------------------------------------------- */
/* El sub-bloque ocupa TODA la columna de contenido, igual que el filete divisorio
   y el titular. Antes llevaba `max-width: 50rem` (herencia de la rejilla): con la
   cinta eso la dejaba 304px más corta que la columna por la derecha, y parecía
   que los logos se apagaban antes de tiempo por ese lado. */
.sponsors {
  margin-top: var(--subsection-gap);
}
.sponsors__title { margin-bottom: var(--space-6); }

/* CINTA CONTINUA (marquee). CSS puro: el bucle sale de duplicar la lista en el
   DOM y animar el contenedor hasta -50%, que es exactamente el ancho de un grupo;
   al llegar, la copia está justo donde estaba el original y el salto no se ve.
   overflow:hidden confina la cinta: nunca genera scroll horizontal en el body. */
.marquee {
  /* Difuminado de borde en ancho FIJO (no en %): así es idéntico a izquierda y
     derecha por construcción y no crece con el contenedor. En % (7%) apagaba los
     logos de los extremos demasiado pronto en pantallas anchas. */
  --fade: clamp(1.5rem, 3vw, 3.5rem);
  /* A11Y · Holgura para el anillo de foco: overflow:hidden recortaba arriba y
     abajo el outline (offset 4px) de los logos. El padding da el sitio y el margen
     negativo lo devuelve, así que la cinta ocupa exactamente lo mismo que antes. */
  --focus-room: 0.5rem;
  padding: var(--focus-room);
  margin: calc(var(--focus-room) * -1);
  /* Al enfocar un logo, el navegador desplaza la cinta para mostrarlo; esto lo
     deja fuera de la zona difuminada del borde. */
  scroll-padding-inline: var(--fade);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,
              transparent 0, #000 var(--fade),
              #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(90deg,
              transparent 0, #000 var(--fade),
              #000 calc(100% - var(--fade)), transparent 100%);
}
.marquee__inner {
  display: flex;
  width: max-content;
  animation: marquee-scroll 45s linear infinite;
}
.marquee__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--space-5);
  /* Separa el último logo del primero de la copia: el ritmo del bucle es continuo. */
  padding-inline-end: var(--space-5);
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Pausa con el puntero encima y al tabular dentro (no secuestra el foco). */
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee__inner { animation-play-state: paused; }
}
.marquee:focus-within .marquee__inner { animation-play-state: paused; }
/* A11Y · WCAG 2.4.7 / 2.4.11 · Con TECLADO no basta con pausar: la cinta se para
   donde esté y el logo enfocado podía quedar fuera de la vista (medido: Joma, ACE
   y Wilson con x < 0 al tabular). Con foco de teclado la cinta vuelve a su
   origen sin animación y se retira el difuminado, así el navegador puede llevar
   cada logo enfocado a la vista con su anillo completo. Al salir, main.js
   devuelve el desplazamiento a 0 y la cinta sigue. Con ratón (:hover) se
   mantiene la pausa en el sitio. */
.marquee:has(a:focus-visible) {
  -webkit-mask-image: none;
          mask-image: none;
}
.marquee:has(a:focus-visible) .marquee__inner { animation: none; }
/* Sin botón «Pausar animación»: el cliente lo retiró (oct. 2026). La cinta se
   para con el ratón encima, con el foco de teclado y al tocar en táctil. */
/* Pausa en táctil: la marca js/main.js al tocar la cinta (en móvil no hay hover,
   y sin esto el logo se escapaba del dedo antes de poder pulsarlo). */
.marquee.is-paused .marquee__inner { animation-play-state: paused; }

/* Caja de altura fija: todos los logos ocupan el mismo hueco. En la cinta el
   ancho es fijo (no un % de rejilla), para que el paso sea regular. */
.sponsor {
  flex: 0 0 auto;
  width: 10.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;                 /* caja fija; el logo se centra dentro */
  color: var(--cream);
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease);
}
@media (min-width: 48rem) {
  .sponsor { height: 4rem; width: 12rem; }
}

/* OBLIGATORIO · prefers-reduced-motion: la cinta no se mueve y degrada a la
   rejilla estática, con los 7 logos visibles (se oculta la copia del bucle). */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .marquee__inner {
    width: 100%;
    animation: none;
    flex-wrap: wrap;
  }
  .marquee__group {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6) var(--space-5);
    padding-inline-end: 0;
  }
  .marquee__group--clone { display: none; }
  /* Sin máscara ni recorte no hace falta holgura para el foco. */
  .marquee { padding: 0; margin: 0; }
  .sponsor { flex: 0 1 calc(25% - var(--space-6)); min-width: 8rem; width: auto; }
}

/* Ajuste óptico por logo. --logo-h / --logo-w son los topes dentro de la caja;
   `contain` respeta la proporción y centra. Base pensada para los wordmarks
   apaisados (Joma, Wilson, Alacrán, Padel Point, Jabato), que son mayoría. */
.sponsor__logo {
  --logo-h: 2.25rem;              /* 36px en móvil */
  --logo-w: 10.5rem;              /* 168px; el ancho real lo limita la celda */
  max-height: var(--logo-h);
  max-width: min(100%, var(--logo-w));
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Logos compactos o apilados: se les deja crecer para igualar peso visual.
   ACE (proporción ≈ 2.2:1) y Alameda Padel Academy (≈ 1.4:1, lockup apilado). */
.sponsor__logo.logo--lg { --logo-h: 3rem; }
/* Reservado para logos que se vean dominantes dentro de la misma caja. */
.sponsor__logo.logo--sm { --logo-h: 1.875rem; --logo-w: 8.5rem; }

@media (min-width: 48rem) {
  .sponsor__logo          { --logo-h: 2.75rem; }   /* 44px */
  .sponsor__logo.logo--lg { --logo-h: 3.75rem; }   /* 60px */
  .sponsor__logo.logo--sm { --logo-h: 2.25rem; }
}

/* Solo para futuros logos raster que lleguen en color (ver nota F2 arriba). */
.sponsor img[data-mono] { filter: grayscale(1) brightness(0) invert(1); }

.sponsor:focus-within { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .sponsor:hover { opacity: 1; }
}
.sponsor a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 44px;
  border-radius: var(--radius-1);
}
.sponsor a:focus-visible {
  outline: var(--hair-2) solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-1);
}

/* ---------------------------------------------------------------------------
   14. CONTACTO (§7.7)
   --------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--space-8); }
@media (min-width: 64rem) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: start; }
}

.contact-list { display: grid; gap: var(--space-5); min-width: 0; }
.contact-row { display: grid; gap: var(--space-1); }
/* G1 · Separación real entre el icono y el texto (antes salía "✉attempoagency…").
   El gap va en em para que escale con el cuerpo del enlace. */
/* P5 · Datos de contacto en crema (texto e icono al mismo tono, que era la queja),
   icono a 1.5em y separación .6em. El subrayado va SOLO bajo el texto (span), nunca
   bajo el icono: por eso se anula el border-bottom del propio enlace. */
.contact-row__value {
  font-size: var(--fs-md);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  width: fit-content;
  max-width: 100%;
  border-bottom: 0;
}
.contact-row__txt {
  /* A11Y · WCAG 1.4.10 · A 320px el email (299px) desbordaba 3px la columna. */
  overflow-wrap: anywhere;
  min-width: 0;
  border-bottom: var(--hair) solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .contact-row__value:hover .contact-row__txt { border-bottom-color: var(--cream); }
}
/* Icono lineal crema (hereda currentColor del enlace, ya en crema), 1.5em.
   Se baja un pelo para casar con la línea base del texto. */
.contact-row__value .icon {
  width: 1.5em;
  height: 1.5em;
  transform: translateY(0.03em);
}

/* P4b · MAPA consent-aware. El iframe lo inserta JS solo tras consentimiento;
   aquí van el marco (filete de hielo), la reserva y los estados. */
.map { display: grid; gap: var(--space-3); }
.map__addr { color: var(--muted); }
/* El marco NO reserva el alto del iframe: en estado de reserva se ajusta a su
   contenido (dirección + botones). El alto de mapa solo aparece cuando el iframe
   se inserta (altura fija abajo). */
.map__frame {
  background: var(--surface);
  border: var(--hair) solid var(--ice);
  border-radius: var(--radius-1);
  overflow: hidden;
}
/* El iframe (insertado por JS) trae su propia altura de mapa; el filtro lo integra
   en clave oscura sin perder legibilidad. */
.map__frame iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
  filter: grayscale(.2) contrast(.95) brightness(.9);
}
/* Reserva (sin consentimiento): en flujo normal, para que el marco se ajuste a su
   contenido y no quede un vacío enorme. */
.map__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-5);
  text-align: center;
}
.map__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
.map__consent { display: grid; gap: var(--space-3); max-width: 30rem; }
.map__consent-text { color: var(--cream); font-size: var(--fs-sm); }

/* Botón compacto reutilizable (acciones del mapa). */
.btn--sm {
  padding: 0.5em 1em;
  font-size: var(--fs-sm);
  min-height: 40px;
}

/* ---------------------------------------------------------------------------
   15. FOOTER (§7.8)
   --------------------------------------------------------------------------- */
.footer {
  border-top: var(--border-line);
  padding-block: var(--space-7);
  color: var(--muted);
  font-size: var(--fs-xs);
}
.footer__inner {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 48rem) {
  .footer__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-6);
  }
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer__links .link { font-size: var(--fs-xs); min-height: 44px; display: inline-flex; align-items: center; }
.footer__credit { color: var(--muted); }
.footer__credit .link { font-size: var(--fs-xs); }
/* A11Y · WCAG 1.4.1 · Enlace dentro de una frase en --muted: el hielo frente al
   gris solo da 2,68:1 (< 3:1), así que el color no basta para distinguirlo.
   Se le deja fijo el filete inferior que ya mostraba en hover (mismo grosor y
   color del sistema), sin tocar tinta ni tipografía. */
.footer__credit .link,
.cookies__text .link { border-bottom-color: currentColor; }

/* ---------------------------------------------------------------------------
   16. BANNER DE COOKIES (§7.9)
   --------------------------------------------------------------------------- */
.cookies {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-cookies);
  background: var(--surface);
  border-top: var(--border-strong);
  box-shadow: var(--shadow-float);
  padding: var(--space-5) 0;
}
/* (El [hidden] del banner lo resuelve el reset global [hidden] de §2.) */
.cookies__inner {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 48rem) {
  .cookies__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-6);
  }
}
.cookies__text { max-width: 68ch; }
.cookies__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---------------------------------------------------------------------------
   17. PÁGINAS LEGALES
   --------------------------------------------------------------------------- */
.legal { padding-block: var(--section-gap); }
.legal__header { margin-bottom: var(--subsection-gap); }
.legal__updated { margin-top: var(--space-3); }
.legal__doc { display: grid; gap: var(--space-6); max-width: 72ch; }
/* A11Y · WCAG 1.4.10 · Los hijos de la rejilla tenían min-width:auto, así que la
   tabla de cookies (min-width 32rem) ensanchaba TODO el documento a 536px en móvil
   en vez de desplazarse dentro de su caja. Con min-width:0 solo la tabla se
   desplaza (las tablas están exentas de reflujo) y el texto refluye a 320px. */
.legal__doc > * { min-width: 0; }
.legal__doc h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
  color: var(--cream);
  margin-top: var(--space-4);
}
.legal__doc h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-lg);
  color: var(--cream);
}
.legal__doc p,
.legal__doc li {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--cream);
}
.legal__doc p + p { margin-top: var(--space-3); }
.legal__doc ul { display: grid; gap: var(--space-2); padding-left: var(--space-5); list-style: disc; }
.legal__doc ul li::marker { color: var(--ice); }
.legal__doc strong { font-weight: var(--fw-semibold); }
.legal__doc a { color: var(--ice); word-break: break-word; }

/* Tabla de cookies accesible */
.legal__table-wrap { overflow-x: auto; }
/* La caja desplazable es enfocable (tabindex="0") para poder moverla con flechas. */
.legal__table-wrap:focus-visible { outline: var(--hair-2) solid var(--focus-ring); outline-offset: 3px; }
.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 32rem;
}
.legal__table caption {
  text-align: left;
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-bottom: var(--space-2);
}
.legal__table th,
.legal__table td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: var(--border-line);
  vertical-align: top;
}
.legal__table thead th {
  font-family: var(--font-mono);
  font-weight: var(--fw-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ice);
  border-bottom: var(--border-strong);
}
.legal__table tbody th {
  font-family: var(--font-mono);
  color: var(--cream);
  font-weight: var(--fw-mono);
}
.legal__table td { color: var(--cream); }

/* ---------------------------------------------------------------------------
   18. prefers-reduced-motion (§9.3)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}