/* =====================================================================================
   PERFORMANCE SPORTS INTEGRITY — hoja de estilos única de la web pública.
   Vale para index.html, entrenadores.html, aviso-legal.html y privacidad.html.

   -------------------------------------------------------------------------------------
   LA IDEA (léela antes de cambiar nada, para saber qué estaba pensando quien lo hizo)
   -------------------------------------------------------------------------------------
   El mundo del que sale todo esto es el del entrenador: LA LIBRETA Y LA PIZARRA.
   · El fondo no es blanco: es papel (hueso). Una web blanca es una web de software.
   · Las secciones van numeradas como dorsales, en el margen izquierdo, con una barra de
     color al lado. Eso es la libreta pautada.
   · Las secciones de confianza van sobre PIZARRA (verde casi negro) con líneas de tiza.
   · Los dibujos de la aplicación (el campo partido en carriles, la semana del club, el
     árbol del modelo de juego) están hechos con HTML y CSS, no son fotos. Pesan cero y
     son fieles a lo que hace la aplicación de verdad.
   · Nada está centrado por defecto: el texto se lee a la izquierda, como un documento.

   LO QUE SE EVITÓ A PROPÓSITO: degradados morados, tarjetas con iconito de colores,
   emojis de viñeta, fotos de archivo, y las tipografías que usa todo el mundo.

   -------------------------------------------------------------------------------------
   PALETA. Los contrastes están comprobados con números, uno a uno:
   -------------------------------------------------------------------------------------
     --papel        #F4F2ED  fondo general (hueso, no blanco)
     --tinta        #101E1A  texto y fondos oscuros (verde pizarra)  15,4:1 sobre papel
     --gris         #55605C  texto secundario                         5,8:1 sobre papel
     --acento       #1862C0  AZUL DE LA MARCA: enlaces, botones,      5,3:1 sobre papel
                             dorsales, subrayados                     5,9:1 con blanco encima
     --acento-hondo #124C97  el azul al pasar el ratón                8,4:1 con blanco encima
     --acento-claro #5FB4E8  el azul aclarado, para lo que va SOBRE   7,5:1 sobre pizarra
                             pizarra (el azul de la marca sobre
                             pizarra da 2,9:1 y no vale)
     --lima         #ACC924  el verde lima del logo, solo como        9,1:1 sobre pizarra
                             detalle sobre fondo oscuro               1,7:1 sobre papel ✗
     --campo        #1E5C48  verde de los dibujos de campo            7,0:1 sobre papel
   Apoyos: --cal #FFFFFF (tarjetas), --linea #DAD5C9 (pauta), --tiza #E8EDE9 (texto sobre
   pizarra, 14,5:1), --tiza-suave #A9B8B2 (secundario sobre pizarra, 8,3:1).

   POR QUÉ EL ACENTO YA NO ES EL LADRILLO #A6371C: esta web se diseñó ANTES de que existiera
   el logotipo. Cuando llegó, el logo era azul y verde lima y la web era ladrillo — o sea, el
   color complementario del azul, que es justo el que más pelea con él. Con el logo arriba a
   la izquierda, cada botón naranja tiraba del ojo en dirección contraria. Se ha cambiado el
   acento por el azul de la marca y ya está: el resto del diseño (el papel hueso, la pizarra,
   los dorsales, la libreta pautada) no se ha tocado.

   EL LIMA NO SIRVE PARA TEXTO SOBRE PAPEL: 1,69:1, ni de lejos el 4,5:1 que hace falta. En el
   propio logo el lima es una sola pieza pequeña (el palo de la «i») entre mucho azul, y así
   se usa aquí: un detalle, y solo sobre fondo oscuro, donde da 9,1:1.

   EL LADRILLO SIGUE VIVO EN UN SITIO, y es a propósito: el aviso de CHOQUE de horarios de la
   recreación de pantalla (.aviso-choque, .chip-choque). Ahí el rojo no es marca, es
   SIGNIFICADO — «esto está mal, míralo». Pintar una alarma de azul corporativo es perder la
   única cosa que un color puede decir sin palabras.

   -------------------------------------------------------------------------------------
   TIPOGRAFÍAS (dos, con papeles distintos, servidas desde este mismo dominio)
   -------------------------------------------------------------------------------------
   · ARCHIVO  → titulares, botones, dorsales. Grotesca ancha y firme, de cartel.
   · IBM PLEX SANS → todo el texto que se lee. Sobria, de ingeniería, muy legible.
   Están en /tipografias como .woff2 (75 KB entre las dos). NO se piden a Google: así la
   frase «esta web no te rastrea» es verdad del todo, sin ninguna petición a terceros.
   Si algún día faltaran los ficheros, las pilas de respaldo son de verdad y la web se lee
   igual de bien con las tipografías del sistema.
   ===================================================================================== */

/* ---------- Tipografías propias ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('tipografias/Archivo-400-800.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('tipografias/IBMPlexSans-300-700.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

/* ---------- Variables ---------- */
:root {
  --papel: #F4F2ED;
  --tinta: #101E1A;
  --gris: #55605C;
  --acento: #1862C0;         /* azul de la marca */
  --acento-hondo: #124C97;   /* el mismo azul, al pasar el ratón */
  --acento-claro: #5FB4E8;   /* la versión aclarada, para lo que va sobre pizarra */
  --lima: #ACC924;           /* el lima del logo: detalle, y solo sobre fondo oscuro */
  --alarma: #A6371C;         /* el antiguo ladrillo, ahora SOLO para el aviso de choque */
  --campo: #1E5C48;

  --cal: #FFFFFF;
  --linea: #DAD5C9;
  --linea-fuerte: #C4BDAC;
  --tiza: #E8EDE9;
  --tiza-suave: #A9B8B2;
  --pizarra-linea: rgba(232, 237, 233, 0.14);

  --titular: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --texto: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --ancho: 1140px;
  --radio: 4px;          /* casi recto: esto es un documento, no una app de móvil */
  --paso: 1.5rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La cabecera va pegada arriba (position: sticky). Sin esto, al pinchar «Qué hace» el
     título de la sección aterriza DEBAJO de la cabecera y parece que el enlace ha fallado.
     Si algún día la cabecera se hace más alta, sube también este número. */
  scroll-padding-top: 5.5rem;
}
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--titular);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 6.2vw, 3.9rem); }
h2 { font-size: clamp(1.65rem, 4.2vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: var(--acento); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
ul, ol { padding-left: 1.2em; }
strong { font-weight: 600; }
abbr[title] { text-decoration: none; border-bottom: 1px dotted currentColor; }

/* Foco visible SIEMPRE. Nunca outline:none sin sustituto. */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
  border-radius: 2px;
}
/* El azul de la marca sobre la pizarra da 2,9:1 y un foco que no se ve es un foco que no
   existe. Dentro de las secciones oscuras y del pie, el foco va con el azul aclarado (7,5:1).
   Es el fallo clásico de cambiar el color de acento y mirar solo el fondo claro. */
.pizarra :focus-visible, .pie :focus-visible { outline-color: var(--acento-claro); }

.pizarra :focus-visible, .pie :focus-visible { outline-color: var(--tiza); }

/* Saltar al contenido: primer tabulador de la página. */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinta); color: var(--tiza);
  padding: 0.7rem 1.1rem; font-weight: 600;
}
.saltar:focus { left: 0.5rem; top: 0.5rem; }

/* Texto que leen los lectores de pantalla pero no se ve (encabezados de tabla sin rótulo). */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Contenedor y secciones ---------- */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 1.25rem; }
.seccion { padding-block: clamp(3.25rem, 8vw, 6rem); }
.seccion + .seccion { border-top: 1px solid var(--linea); }
.pizarra {
  background: var(--tinta);
  color: var(--tiza);
  border-top: none !important;
  /* Líneas de tiza muy tenues: la pizarra táctica, sugerida, no dibujada. */
  background-image:
    linear-gradient(var(--pizarra-linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--pizarra-linea) 1px, transparent 1px);
  background-size: 100% 5.5rem, 5.5rem 100%;
}
.pizarra h2, .pizarra h3 { color: var(--tiza); }
.pizarra p { color: var(--tiza-suave); }
.pizarra a { color: var(--acento-claro); }
/* Las recreaciones de pantalla son BLANCAS aunque estén sobre la pizarra: hay que devolverles
   el color de texto, o heredan el gris claro de .pizarra y se quedan en 1,8:1 de contraste.
   Es el fallo que más se cuela al meter una tarjeta clara dentro de una sección oscura. */
.pizarra .pantalla, .pizarra .pantalla p, .pizarra .pantalla h3, .pizarra .pantalla-titulo { color: var(--tinta); }
.pizarra .pantalla-pie, .pizarra .pantalla-nota, .pizarra .barra-url, .pizarra .pantalla-hora { color: var(--gris); }
.pizarra .aviso-choque, .pizarra .aviso-choque strong { color: #7A2413; }

/* Cabecera de sección con dorsal en el margen (la libreta pautada) */
.rotulo { display: flex; align-items: baseline; gap: 0.85rem; margin-bottom: 1.75rem; }
.dorsal {
  font-family: var(--titular); font-weight: 700; font-size: 0.95rem;
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
  color: var(--acento);
  border-left: 3px solid var(--acento);
  padding-left: 0.6rem; line-height: 1.4;
  flex: none;
}
/* En las secciones oscuras el dorsal lleva el número en azul claro y la barrita en LIMA.
   Es el mismo gesto que hace el logo: mucho azul y una sola pieza lima al lado (el palo de
   la «i»). Es el único sitio de toda la web donde se ve el lima, y es a propósito: en el
   papel hueso da 1,7:1 y no se vería, y repartido por todas partes dejaría de ser un acento. */
.pizarra .dorsal { color: var(--acento-claro); border-left-color: var(--lima); }
.rotulo h2 { margin: 0; }
.entradilla { font-size: 1.15rem; color: var(--gris); max-width: 60ch; margin-bottom: 2.25rem; }
.pizarra .entradilla { color: var(--tiza-suave); }

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  font-family: var(--titular); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.005em;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radio);
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primario { background: var(--acento); color: #FFFFFF; border-color: var(--acento); }
.btn-primario:hover { background: var(--acento-hondo); border-color: var(--acento-hondo); }
.btn-secundario { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn-secundario:hover { background: var(--tinta); color: var(--papel); }
.pizarra .btn-secundario, .pie .btn-secundario { color: var(--tiza); border-color: var(--tiza); }
.pizarra .btn-secundario:hover, .pie .btn-secundario:hover { background: var(--tiza); color: var(--tinta); }
/* Los selectores llevan el contenedor delante a propósito: dentro de .pizarra y de .pie la
   regla `a { color: ... }` es más específica que `.btn-claro` a secas y se comía el color
   del texto del botón. Es el fallo de contraste más fácil de dejarse. */
.btn-claro, .pizarra .btn-claro, .pie .btn-claro {
  background: var(--tiza); color: var(--tinta); border-color: var(--tiza);
}
.btn-claro:hover, .pizarra .btn-claro:hover, .pie .btn-claro:hover { background: #FFFFFF; border-color: #FFFFFF; }
.botones { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; }

/* ---------- Cabecera fija ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 242, 237, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--linea);
}
.cabecera-fila { display: flex; align-items: center; gap: 1rem; min-height: 68px; }

/* EL LOGO. Vive en un solo fichero: logo.svg. Esta regla es la que evita que la web se
   descuadre el día que se cambie por el definitivo, sea cuadrado o apaisado. */
.logo { height: 32px; width: auto; max-width: 220px; object-fit: contain; display: block; }
.marca { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--tinta); flex: none; }
.marca-nombre {
  font-family: var(--titular); font-weight: 700; font-size: 0.98rem;
  letter-spacing: -0.01em; line-height: 1.15; max-width: 13ch;
  /* Que no parta «Performance» por la mitad cuando el sitio aprieta. */
  overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
/* Si el logo definitivo YA lleva el nombre escrito dentro, borra el <span class="marca-nombre">
   de las dos páginas y sube el max-width de .logo a lo que necesite. Nada más se rompe. */

.menu { display: flex; gap: 1.4rem; margin-left: auto; }
.menu a {
  color: var(--tinta); text-decoration: none; font-weight: 500; font-size: 0.95rem;
  white-space: nowrap;
  padding-block: 0.35rem; border-bottom: 2px solid transparent;
}
.menu a:hover { border-bottom-color: var(--acento); }
.cabecera .btn { padding: 0.6rem 1.15rem; font-size: 0.95rem; flex: none; margin-left: auto; }
.menu ~ .btn { margin-left: 0; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2.75rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem); }
.hero-rejilla { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.antetitulo {
  font-family: var(--titular); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--acento);
  margin: 0 0 1rem;
}
.hero h1 { margin-bottom: 0.45em; }
.hero-sub { font-size: 1.2rem; color: var(--gris); max-width: 54ch; }
.apuntes {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  font-size: 0.92rem; color: var(--gris); font-weight: 500;
}
.apuntes li { display: flex; align-items: baseline; gap: 0.5rem; }
.apuntes li::before { content: ''; width: 10px; height: 2px; background: var(--acento); flex: none; }

/* ---------- Rejillas de tarjetas ---------- */
.rejilla { display: grid; gap: 1.25rem; }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tarjeta {
  background: var(--cal);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--tinta);
  padding: 1.5rem;
  border-radius: var(--radio);
}
.tarjeta h3 { margin-bottom: 0.5rem; }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta-num {
  display: block; font-family: var(--titular); font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.1em; color: var(--acento);
  margin-bottom: 0.75rem; font-variant-numeric: tabular-nums;
}
/* La rayita de arriba de estas tarjetas es el único sitio donde sale el LIMA del logo:
   una pieza pequeña sobre fondo oscuro, igual que el palo de la «i» en el isotipo. */
.pizarra .tarjeta { background: rgba(232, 237, 233, 0.05); border-color: rgba(232,237,233,0.16); border-top-color: var(--lima); }
.nota-seccion {
  margin-top: 1.75rem; padding-left: 1rem; border-left: 3px solid var(--linea-fuerte);
  color: var(--gris); font-size: 0.98rem;
}

/* ---------- Bloques de argumento (texto + dibujo, alternados) ---------- */
.argumento { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
.argumento + .argumento { margin-top: clamp(3rem, 7vw, 5rem); padding-top: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--pizarra-linea); }
.argumento h3 { font-size: clamp(1.5rem, 3.4vw, 2.05rem); }

/* ---------- DIBUJOS DE LA APLICACIÓN (HTML + CSS, sin imágenes) ----------
   Son recreaciones fieles de pantallas reales. Si la aplicación cambia, cámbialas o
   quítalas: una web que enseña algo que ya no existe es peor que una que no enseña nada. */
.pantalla {
  background: var(--cal); color: var(--tinta);
  border: 1px solid var(--linea-fuerte);
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 14px 34px rgba(16, 30, 26, 0.18);
  margin: 0;
  font-size: 0.9rem;
}
.pantalla-titulo {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  font-family: var(--titular); font-weight: 700; font-size: 0.92rem;
  padding-bottom: 0.6rem; margin-bottom: 0.85rem; border-bottom: 1px solid var(--linea);
}
.pantalla-hora { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--gris); font-weight: 600; }
.pantalla-pie {
  margin: 0.85rem 0 0; font-size: 0.75rem; line-height: 1.45; color: var(--gris);
  border-top: 1px dashed var(--linea); padding-top: 0.6rem;
}
.pizarra .pantalla-pie, .pantalla-pie { color: var(--gris); }
figure.dibujo { margin: 0; }
.pantalla-nota { font-size: 0.75rem; line-height: 1.45; color: var(--gris); margin: 0 0 0.5rem; }
figure.dibujo figcaption {
  margin-top: 0.75rem; font-size: 0.82rem; color: var(--tiza-suave); line-height: 1.5;
}
.seccion:not(.pizarra) figure.dibujo figcaption { color: var(--gris); }

/* El campo partido en carriles (Planificación global → Ocupación de los campos) */
.campo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 carriles = el mínimo común múltiplo de 1/2 y 1/4 */
  gap: 2px;
  aspect-ratio: 5 / 3;
  background: var(--campo);
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 3px;
  overflow: hidden;
  padding: 2px;
}
/* Línea de medio campo y círculo central, en cal */
.campo::before {
  content: ''; position: absolute; inset: 0 auto 0 50%; width: 2px; z-index: 2;
  background: rgba(255,255,255,0.75); transform: translateX(-1px); pointer-events: none;
}
.campo::after {
  content: ''; position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 22%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,0.75);
  border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
}
.carril {
  position: relative; z-index: 1;
  background: var(--color, #1D4ED8);
  color: #FFFFFF;
  border-radius: 2px;
  padding: 0.5rem 0.4rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  font-size: 0.74rem; line-height: 1.25; font-weight: 600;
  min-width: 0;
}
/* Cuánto ocupa cada equipo, en carriles. Es la fracción de la sesión: 1/4, 1/2, 3/4, completo. */
.carril-2 { grid-column: span 2; }
.carril-3 { grid-column: span 3; }
.carril-4 { grid-column: span 4; }
.carril span { display: block; font-weight: 400; font-size: 0.68rem; opacity: 0.92; }
/* ---------------------------------------------------------------------------------
   LOS COLORES DE LOS EQUIPOS DE LAS RECREACIONES (el campo y la semana del club).
   Están AQUÍ, y no escritos dentro del HTML con style="…", por dos motivos:
     · la política de seguridad del servidor (ver Caddyfile.ejemplo) bloquea los estilos
       escritos dentro del HTML, y con ellos todos los carriles salían del mismo color;
     · si algún día quieres cambiar un color, se cambia una vez y cambia en los dos sitios.
   Los cinco están comprobados con texto blanco encima: el peor da 5,02:1 (mínimo 4,5:1).
   --------------------------------------------------------------------------------- */
.eq-azul   { --color: #1D4ED8; }
.eq-ocre   { --color: #B45309; }
.eq-verde  { --color: #0F766E; }
.eq-morado { --color: #4C1D95; }
.eq-gris   { --color: #3F3F46; }

.carril-libre { background: transparent; border: 1px dashed rgba(255,255,255,0.45); color: rgba(255,255,255,0.8); font-weight: 400; justify-content: center; text-align: center; }
.aviso-choque {
  display: block;          /* en bloque, no en flex: en un móvil estrecho el <strong> se
                              quedaba en una columna de dos letras de ancho */
  margin-top: 0.75rem; padding: 0.6rem 0.7rem;
  /* Rojo a propósito, y no por herencia: esto es una ALARMA dentro de la recreación de
     pantalla («dos equipos en el mismo campo a la misma hora»). Es el único rojo que queda
     en la web y no debe seguir al color de la marca si algún día vuelve a cambiar. */
  background: #FCEBE7; border: 1px solid #E4A091; border-left: 4px solid var(--alarma);
  border-radius: 3px; color: #7A2413; font-size: 0.8rem; line-height: 1.45; font-weight: 500;
}
.aviso-choque strong { font-weight: 700; }

/* Dos recreaciones apiladas dentro de la misma figura (el 404 y el registro de accesos). */
.pantalla-apilada { margin-top: 1rem; }
/* El árbol cuando es una lista NUMERADA: necesita sitio para el número. */
.arbol-num { padding-left: 1.2rem; }

/* La semana del club */
.semana { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.semana th, .semana td { border: 1px solid var(--linea); padding: 0.3rem 0.35rem; text-align: left; vertical-align: top; }
.semana thead th { background: var(--papel); font-family: var(--titular); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gris); text-align: center; }
.semana tbody th { font-weight: 600; white-space: nowrap; font-size: 0.76rem; }
.chip {
  display: block; border-radius: 2px; padding: 0.15rem 0.3rem;
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.7rem;
  color: #FFFFFF; background: var(--color, #1D4ED8); text-align: center;
}
.chip small { display: block; font-weight: 400; font-size: 0.62rem; opacity: 0.9; }
.chip-choque { outline: 2px solid var(--alarma); outline-offset: 1px; }   /* alarma, no marca */

/* El árbol del modelo de juego, en cascada */
.arbol { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.arbol ul { list-style: none; margin: 0; padding-left: 1.1rem; border-left: 1px solid var(--linea-fuerte); }
.arbol li { padding: 0.28rem 0; }
.rama { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ambito {
  font-family: var(--titular); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.12rem 0.4rem; border-radius: 2px;
  background: var(--linea); color: #3A443F; flex: none;
}
.ambito-club { background: #1E5C48; color: #FFFFFF; }
.ambito-etapa { background: #3F7A62; color: #FFFFFF; }
.ambito-categoria { background: #5C6B63; color: #FFFFFF; }   /* 5,6:1 con el blanco */
.ambito-equipo { background: var(--acento); color: #FFFFFF; }   /* 5,9:1 con el blanco */
.candado { font-size: 0.7rem; color: var(--gris); font-weight: 500; }
.momento { font-weight: 600; }

/* El registro de accesos a datos de salud */
.registro { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.registro th, .registro td { border-bottom: 1px solid var(--linea); padding: 0.45rem 0.4rem; text-align: left; }
.registro thead th { font-family: var(--titular); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gris); }
.registro td:first-child { font-variant-numeric: tabular-nums; color: var(--gris); white-space: nowrap; }
.registro tr:last-child td { border-bottom: none; }

/* El 404 del entrenador que se sale de su equipo */
.no-encontrado { text-align: center; padding: 1.5rem 1rem; }
.no-encontrado .codigo { font-family: var(--titular); font-weight: 700; font-size: 2.6rem; color: var(--gris); line-height: 1; }
.no-encontrado p { margin: 0.5rem auto 0; max-width: 32ch; color: var(--gris); font-size: 0.85rem; }
.barra-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem; background: var(--papel); border: 1px solid var(--linea);
  border-radius: 3px; padding: 0.35rem 0.5rem; color: var(--gris);
  margin-bottom: 0.75rem; overflow-x: auto; white-space: nowrap;
}

/* ---------- Banda puente ---------- */
.puente { background: #EDE7DD; }
.puente .contenedor { max-width: 780px; }

/* ---------- Testimonios ---------- */
.testimonios { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 1.5rem; }
.testimonios:empty { display: none; }
.testimonio { background: var(--cal); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.5rem; margin: 0; }
.testimonio-video { width: 100%; aspect-ratio: 16 / 9; height: auto; background: var(--tinta); border-radius: 3px; margin-bottom: 1rem; display: block; }
.testimonio-texto { margin: 0 0 1.25rem; font-size: 1.05rem; line-height: 1.55; border-left: 3px solid var(--acento); padding-left: 1rem; }
.testimonio-firma { display: flex; align-items: center; gap: 0.75rem; }
.testimonio-foto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.testimonio-nombre { margin: 0; font-weight: 600; font-size: 0.95rem; }
.testimonio-cargo { margin: 0; font-size: 0.85rem; color: var(--gris); }
.testimonios-vacio {
  border: 1px dashed var(--linea-fuerte); border-radius: var(--radio);
  padding: 1.5rem; background: rgba(255,255,255,0.5);
  color: var(--gris); max-width: 62ch; margin: 0;
}

/* ---------- Preguntas frecuentes (sin JavaScript: <details>) ---------- */
.faq { border-top: 1px solid var(--linea); max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--titular); font-weight: 600; font-size: 1.08rem;
  padding: 1.05rem 2.5rem 1.05rem 0; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--acento); line-height: 1;
}
.faq details[open] summary::after { content: '\2212'; }
.faq details > *:not(summary) { margin-bottom: 1.05rem; }
.faq p { color: var(--gris); }

/* ---------- Contacto ---------- */
.contacto { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 2rem; max-width: 760px; }
.via {
  background: rgba(232,237,233,0.06); border: 1px solid rgba(232,237,233,0.18);
  border-radius: var(--radio); padding: 1.25rem;
}
.via-que { font-family: var(--titular); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tiza-suave); margin: 0 0 0.4rem; }
.via a { font-size: 1.12rem; font-weight: 600; color: var(--acento-claro); word-break: break-word; }
.ya-cliente {
  margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--pizarra-linea);
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.ya-cliente p { margin: 0; }

/* Hueco por rellenar antes de publicar: imposible que se cuele. */
.pendiente {
  background: #FFE9A8; color: #4A3500; padding: 0.05em 0.35em;
  border-radius: 2px; font-weight: 600; font-size: 0.95em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------- Pie ---------- */
.pie { background: #0A1512; color: var(--tiza-suave); padding-block: 3rem 2rem; font-size: 0.95rem; }
.pie-rejilla { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pie h2 { font-family: var(--titular); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tiza); margin: 0 0 0.9rem; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.pie a { color: var(--tiza); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie .marca { color: var(--tiza); margin-bottom: 0.75rem; }
.pie p { font-size: 0.9rem; max-width: 34ch; }
.pie-abajo {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(232,237,233,0.15);
  font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
}
.pie-abajo p { margin: 0; max-width: none; }
/* Los datos fiscales del pie (NIF y domicilio). Hoy no se ven: el párrafo está comentado en
   el HTML de las cuatro páginas, esperando al día del alta. La regla vive aquí para que ese
   día no haya que tocar nada más que quitar el comentario. */
.pie-fiscal { flex-basis: 100%; color: var(--tiza-suave); }

/* ---------- Páginas legales ---------- */
.legal { max-width: 74ch; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.legal h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); margin-bottom: 0.5em; }
.legal h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); margin-top: 2.25rem; }
.legal ul { margin-bottom: 1.25rem; }
.legal li { margin-bottom: 0.4rem; }
.legal .fecha { color: var(--gris); font-size: 0.92rem; border-top: 1px solid var(--linea); padding-top: 1.25rem; margin-top: 2.5rem; }
.ficha-titular { background: var(--cal); border: 1px solid var(--linea); border-left: 3px solid var(--acento); padding: 1.25rem 1.5rem; border-radius: var(--radio); margin-bottom: 2rem; }
.ficha-titular p { margin: 0 0 0.35rem; }
.ficha-titular p:last-child { margin: 0; }

/* =====================================================================================
   RESPONSIVE. Comprobado a 360 px, 768 px y 1440 px.
   El botón «Acceder» se ve SIEMPRE, también en móvil y sin desplegar ningún menú.
   ===================================================================================== */
@media (min-width: 861px) {
  .hero-rejilla { grid-template-columns: 1.05fr 0.95fr; }
  .argumento { grid-template-columns: 1fr 1fr; }
  .argumento-invertido .argumento-texto { order: 2; }
  .argumento-invertido .argumento-dibujo { order: 1; }
}
@media (min-width: 1000px) {
  .argumento { grid-template-columns: 1.1fr 1fr; gap: 4rem; }
}
@media (max-width: 860px) {
  /* Los enlaces del menú se esconden por debajo de 860 px: en una tableta o un móvil no
     caben sin partirse en dos líneas, y están todos en el pie. El botón «Acceder» se queda,
     que es lo único que alguien busca de verdad en la cabecera desde el teléfono. */
  .menu { display: none; }
  .cabecera-fila { min-height: 60px; }
  .marca-nombre { font-size: 0.9rem; }
  .pantalla { padding: 0.75rem; font-size: 0.85rem; }
  /* Apiladas, las recreaciones no deben crecer hasta ocupar toda la pantalla: se leen peor
     y empujan el texto de venta hacia abajo. */
  .hero-rejilla figure.dibujo, .argumento figure.dibujo { max-width: 560px; }
  .semana { font-size: 0.68rem; }
  .ya-cliente { gap: 0.9rem; }
}
@media (max-width: 470px) {
  /* En un móvil el campo se hace más cuadrado: si no, los rótulos de los cuartos no caben. */
  .campo { aspect-ratio: 1 / 1; }
}
@media (max-width: 400px) {
  body { font-size: 1rem; }
  .btn { padding: 0.75rem 1.1rem; font-size: 0.95rem; }
  .cabecera .btn { padding: 0.55rem 0.9rem; font-size: 0.9rem; }
  .marca-nombre { max-width: 12ch; font-size: 0.78rem; }
  .carril { font-size: 0.66rem; padding: 0.35rem 0.25rem; }
}

/* Tablas anchas: que se desplacen ELLAS, nunca la página.
   El `min-width: 0` es la pieza que se olvida siempre: sin él, un hijo de una rejilla se
   niega a encoger por debajo de su contenido y empuja la página entera a lo ancho. */
.desplaza { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.hero-rejilla > *, .argumento > *, .rejilla > *, .pie-rejilla > *, .contacto > * { min-width: 0; }
.pantalla, figure.dibujo { max-width: 100%; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Impresión (un presidente imprime el aviso legal) ---------- */
@media print {
  .cabecera, .pie, .botones, .saltar { display: none !important; }
  body { background: #FFFFFF; color: #000000; font-size: 11pt; }
  a { color: #000000; text-decoration: underline; }
  /* Las preguntas frecuentes se imprimen abiertas donde el navegador lo permita. */
  .faq details { display: block; }
  .faq details::details-content { content-visibility: visible; block-size: auto; }
}