/* ============================================================
   SISTEMA DE DISEÑO · Club Atletismo Apolana
   Dirección visual 1a — "Club, clara y de confianza"
   Fondo crema · azul del escudo · titulares condensados.
   Todos los valores están extraídos de las maquetas de diseño.
   ============================================================ */

/* --- Tipografías (servidas desde la propia web) ---
   Antes se pedían a Google con un @import. Eso hacía que cada visitante le
   entregase su IP a Google sin haberlo elegido, así que ahora los archivos
   viven en assets/fonts/ y no sale ni una petición fuera del club.
   Están solo los pesos que se usan de verdad: cada peso de más es una descarga
   que el visitante paga para nada.
   `font-display: swap` deja el texto visible mientras la letra carga; si no,
   el navegador esconde las palabras hasta que llega el archivo.
   Cada peso va partido en latin y latin-ext con su unicode-range para que el
   navegador se baje solo el trozo que necesita. En español casi siempre basta
   con latin: las tildes y la eñe ya entran ahí. */

/* Bricolage Grotesque · titulares del REDISEÑO de la web pública. Auto-alojada,
   igual que las demás (ni una petición a Google). Es variable: un solo archivo
   cubre 500-700 por el eje de peso. Solo el subset latino, que cubre el español.
   De momento SOLO la usan las páginas públicas que la piden con
   `--fuente-titulo`; el panel/portal sigue con Barlow. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin.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;
}

/* Barlow Condensed · titulares de sección.
   Solo 600 y 700: son los únicos pesos que llegan a verse. El 500 que pedía el
   enlace antiguo no lo usaba ninguna página. */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-600-latin.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700-latin.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans · cuerpo de texto y etiquetas.
   La que más se ve y la única que gasta los cuatro pesos. También es la que
   responde a --fuente-mono, que ya no es monoespaciada. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400-latin.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-500-latin.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-600-latin.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-700-latin.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono · SOLO las cifras que se comparan en columna: parrilla
   semanal, tabla de tarifas y resultados.
   Con 400 y 700 basta. Donde el CSS pide 600 el navegador ya venía cayendo al
   700, porque el 600 tampoco lo servía Google: se ve igual que antes. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400-latin.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: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-700-latin.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: 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo · los números grandes.
   Aparece en tres sitios contados (el 404, la liga del panel y los tests del
   portal), así que estos archivos solo se descargan en esas tres páginas. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-700-latin.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: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-800-latin.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: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-900-latin.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: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   1. TOKENS · los valores del club en un solo sitio
   Si un color o una medida cambia, se cambia AQUÍ y afecta a
   toda la web. (Es el "un dato se escribe una vez" del diseño.)
   ============================================================ */
:root {
  /* Azules del escudo — el color de la acción.
     El azul claro del escudo (#3B85C0) con texto blanco encima solo da 3,96:1,
     por debajo del 4,5:1 que hace falta para que se lea bien. Por eso el azul
     que lleva texto encima es el oscuro, y el claro se queda SOLO para líneas,
     filetes y el anillo de foco, donde nunca hay letra encima. */
  --azul:        #2F6FA8;  /* la acción: botones, chips activos, barras · 5,3:1 con blanco */
  --azul-oscuro: #2F6FA8;  /* enlaces y texto en azul · el mismo tono que --azul */
  --azul-hover:  #1E4E78;  /* al pasar el ratón: enlaces y botón relleno · 8,7:1 */
  --azul-filete: #3B85C0;  /* SOLO líneas, bordes y foco. Nunca con texto encima */
  --azul-suave:  #EAF2F9;  /* fondo azul muy claro (estados activos) */

  /* Azul marino — titulares y texto fuerte */
  --navy: #2E4256;

  /* Cremas y neutros cálidos — el "papel" del club */
  --crema:       #FBF9F4;  /* fondo de página */
  --crema-media: #EFE9DC;  /* fondos suaves y hueco de imagen mientras carga */
  --crema-banda: #F1EADC;  /* bandas destacadas (precios, colaboradores) */
  --linea:       #EAE3D5;  /* líneas y bordes suaves */
  --linea-borde: #D4CBB9;  /* borde de chip */
  --linea-marcada: #E4DCCB; /* borde cuando separa cosas pulsables */

  /* Textos */
  --texto:       #4A4437;  /* cuerpo · 8,4:1 sobre crema */
  --texto-suave: #6E6656;  /* secundario y rótulos · 5,1:1 */
  --texto-tenue: #6E6656;  /* el gris claro se retiró: al sol desaparecía */

  /* Aviso / nota cálida (aviso de portada, destacados) */
  --aviso-fondo:  #FDF5DF;
  --aviso-borde:  #EBDCAE;
  --aviso-texto:  #4A4335;
  --aviso-titulo: #7A6A2B;

  /* Familias tipográficas */
  --fuente-titulo:  'Bricolage Grotesque', 'Barlow Condensed', sans-serif;  /* titulares (rediseño: Bricolage en toda la app) */
  --fuente-display: 'Archivo', system-ui, sans-serif;     /* números y display grande */
  --fuente-texto:   'IBM Plex Sans', system-ui, sans-serif;/* cuerpo de texto */
  --fuente-mono:    'IBM Plex Sans', system-ui, sans-serif; /* etiquetas: tipografía normal */
  --fuente-dato:    'JetBrains Mono', ui-monospace, monospace; /* SOLO datos que se comparan en columna: marcas, tiempos, importes, cifras */

  /* Estados */
  --verde:        #3F7A4C;  --verde-fondo: #EDF5EE;  --verde-borde: #CBE0CE;
  --ambar:        #B96F09;  --ambar-fondo: #FDF3E3;  --ambar-borde: #EBD9B8;
  --rojo:         #B0563A;  /* solo cuando el usuario se ha equivocado */

  /* Radios: tres y solo tres. 14 para lo que CONTIENE otras cosas (tarjeta,
     bloque), 10 para lo que va DENTRO de una tarjeta (iconos con fondo,
     campos, sub-bloques) y pastilla para lo que se pulsa y no es una fila.
     Antes convivían 14, 16, 18 y 20 sin criterio. */
  --radio:       14px;
  --radio-grande:14px;
  --radio-dentro:10px;
  --radio-pastilla: 999px;

  /* Sombras (suaves, siempre en tono marino) */
  --sombra-tarjeta: 0 26px 50px -32px rgba(46,66,86,0.5);
  --sombra-suave:   0 10px 22px -16px rgba(46,66,86,0.5);
  --sombra-hero:    0 34px 60px -34px rgba(46,66,86,0.55);

  /* Anchura máxima del contenido y respiración lateral */
  --ancho: 1200px;
  --margen-lateral: clamp(20px, 5vw, 56px);

  /* Fondo de la APP (portal): más blanco que el crema de la web pública.
     Andrés lo quiere "tirando a blanco". La web pública sigue con su crema. */
  --app-fondo: #FDFDFB;
}

/* El portal (todo lo que cuelga de #portal-contenido) va sobre un fondo casi
   blanco, no sobre el crema de la web. Gana en especificidad al `body{...}`
   que cada página del portal declara en línea. */
body:has(#portal-contenido) { background: var(--app-fondo) !important; }

/* ADMIN a una sola columna en TODOS los tamaños, como su maqueta (que es de
   móvil): se retira el menú lateral y manda la barra flotante de abajo
   (admin-tabbar.js). Antes la lateral aparecía por encima de 900px. Regla
   global para las ~33 secciones del panel a la vez. */
.admin-side { display: none !important; }
.admin-wrap { grid-template-columns: 1fr !important; }
/* Fondo del admin tirando a blanco (como la app), no el crema de la web. */
body:has(.admin-wrap) { background: var(--app-fondo) !important; }

/* REDISEÑO WEB PÚBLICA · los titulares pasan a Bricolage Grotesque, pero SOLO en
   las páginas públicas: son las únicas que llevan <apolana-cabecera> en el HTML
   (el panel y el portal montan su propia cabecera, así que no entran aquí y
   siguen con Barlow). Es CSS puro y sin parpadeo. El día que demos el visto bueno
   se extiende a la app quitando este escopado. */
:root:has(apolana-cabecera) {
  --fuente-titulo: 'Bricolage Grotesque', 'Barlow Condensed', sans-serif;
}

/* ============================================================
   2. BASE · lo mínimo para que todo parta igual
   ============================================================ */
* { box-sizing: border-box; }

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

/* Nada debe provocar scroll horizontal en ningún ancho de pantalla */
html, body { max-width: 100%; overflow-x: hidden; }

/* BANDAS DE SECCIÓN para romper la monotonía del crema: alternar fondos entre
   secciones seguidas (blanca, crema fuerte, navy) da ritmo, como en la portada.
   Se ponen a sangre; el contenido va dentro de su .contenedor. */
.seccion--blanca { background: #fff; }
.seccion--crema  { background: var(--crema-banda); }
.seccion--navy   { background: var(--navy); color: #fff; }
.seccion--navy h1, .seccion--navy h2, .seccion--navy h3,
.seccion--navy .titulo, .seccion--navy .titular { color: #fff; }
.seccion--navy p { color: rgba(255,255,255,0.82); }

/* TRANSICIONES AL BAJAR (compartidas) · cualquier elemento con la clase .reveal
   entra con un desvanecido la primera vez que asoma. Solo se activa si hay JS
   (clase .reveal-on en <html>, que pone apolana.js), para que sin JS todo se vea
   igual; y se anula con «reduce motion». Poner .reveal SOLO en cosas por debajo
   del pliegue (tarjetas, secciones inferiores), nunca en el hero, para que no
   parpadee al cargar. El escalonado dentro de una rejilla usa --i. */
/* Usa la propiedad `translate` (no `transform`): así el desplazamiento de
   entrada se COMBINA con el `transform: translateY(-6px)` del hover de las
   tarjetas en vez de pisarlo — el hover de elevación sigue funcionando después
   de que la tarjeta ha aparecido. */
html.reveal-on .reveal { opacity: 0; translate: 0 22px; }
html.reveal-on .reveal.visto {
  opacity: 1; translate: 0 0;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 60ms);
}
@media (prefers-reduced-motion: reduce) {
  html.reveal-on .reveal { opacity: 1 !important; translate: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--azul-oscuro); text-decoration: none; }
a:hover { color: var(--azul-hover); }

h1, h2, h3 { margin: 0; color: var(--navy); }

/* Accesibilidad: foco visible con teclado */
:focus-visible { outline: 2px solid var(--azul-filete); outline-offset: 2px; }

/* ⚠️ REDUCIR EL MOVIMIENTO NO ES APAGARLO, Y ANTES SE APAGABA ENTERO.
   `* { transition: none }` quitaba TODAS las transiciones a quien pide
   movimiento reducido. Suena prudente y no lo es: esa persona pidió
   menos movimiento, no ninguno, y sin transición también se queda sin
   el aviso de que algo ha cambiado —el botón que responde al pulsarlo,
   el panel que aparece—. Lo que marea son los desplazamientos largos y
   los rebotes, no un cambio de opacidad de 100 ms.
   Así que se recorta en vez de cortar: todo pasa a durar 1 ms salvo la
   opacidad, que se queda corta pero viva, y se anulan los movimientos
   que de verdad molestan. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 80ms !important;
  }
  /* Lo que se mueve por la pantalla sí se queda quieto. */
  *, *::before, *::after { transition-property: opacity, background-color, border-color, color !important; }
}

/* ============================================================
   MOVIMIENTO · las curvas de la casa
   ------------------------------------------------------------
   Tres, y no más. Estaban repetidas a mano («.15s ease») por seis
   sitios distintos; ponerles nombre es lo que evita que la séptima
   invente una cuarta curva.
   ============================================================ */
:root {
  --ease-salida: cubic-bezier(0.23, 1, 0.32, 1);   /* entra y frena: lo que aparece */
  --ease-panel:  cubic-bezier(0.32, 0.72, 0, 1);   /* cajones y paneles laterales */
  --dur-toque:   120ms;                            /* respuesta al pulsar */
  --dur-entrada: 200ms;                            /* algo que aparece */
}

/* ------------------------------------------------------------
   RESPUESTA AL PULSAR
   No había ni una regla `:active` en toda la web: se tocaba un botón y
   no pasaba nada hasta que la pantalla cambiaba. Es el hueco de
   feedback más repetido del sitio.
   El hundido es de 1,5 %, deliberadamente casi imperceptible: esto se
   pulsa decenas de veces al día y a esa frecuencia un rebote visible
   cansa. Se nota con el dedo, no con el ojo.
   ------------------------------------------------------------ */
.btn:active, button:active, .ap-btn:active, .sem-btn:active,
.apu-dep:active, .apu-n:active, .ti-d:active, .apu-abrir:active {
  transform: scale(0.985);
}
.btn, .ap-btn, .sem-btn, .apu-dep, .apu-n, .ti-d, .apu-abrir {
  transition: transform var(--dur-toque) var(--ease-salida),
              background-color var(--dur-toque) ease,
              border-color var(--dur-toque) ease,
              color var(--dur-toque) ease;
}

/* ============================================================
   3. MAQUETACIÓN · contenedor y secciones
   ============================================================ */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

/* Espacio vertical estándar entre bloques de la página */
.seccion { padding-block: 48px; }
@media (max-width: 700px) { .seccion { padding-block: 32px; } }

/* ============================================================
   4. TIPOGRAFÍA DE MARCA · títulos y etiquetas
   ============================================================ */

/* Etiqueta pequeña en monoespaciada (eyebrow), va sobre los títulos */
.eyebrow {
  font-family: var(--fuente-texto);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-suave);
}
.eyebrow--azul { color: var(--azul-oscuro); }

/* Titular de sección: Barlow Condensed en mayúsculas */
.titulo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  color: var(--navy);
  letter-spacing: 0.01em;
  font-size: 28px;
}
.titulo--grande { font-size: 36px; line-height: 1; }

/* Display gigante del hero */
.display {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.98;
  color: var(--navy);
  font-size: 52px;
}

/* Texto de apoyo bajo los títulos */
.intro { font-size: 17px; line-height: 1.45; color: var(--texto); }

/* Nombres propios del club. La lista es cerrada: La Tribu · Madre Tierra ·
   El Cubo · Kilómetro Cero · Vertical Apolana · Familia Apolana · Liga Apolana.
   Van en ámbar y SIEMPRE en texto o trazo, nunca en bloque de fondo: el ámbar
   en bloque es el color de aviso y se leería como una advertencia.
   Los nombres genéricos («Natación adultos», «Pista») se quedan en navy: la
   diferencia de color enseña qué tiene identidad y qué es una categoría.
   Va después de .titulo y .display a propósito, para poder acompañarlos. */
.nombre-propio { color: #8A5307; }

/* ============================================================
   5. BOTONES · pastillas (pill)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fuente-texto);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 13px 22px;
  min-height: 44px;
  border-radius: var(--radio-pastilla);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }

/* Primario: azul lleno */
.btn--primario {
  background: var(--azul);
  color: #fff;
  box-shadow: 0 14px 26px -12px rgba(47,111,168,0.85);
}
.btn--primario:hover { background: var(--azul-hover); color: #fff; }

/* Fantasma: borde, sin relleno */
.btn--fantasma {
  background: transparent;
  color: var(--azul-oscuro);
  border-color: #C9D9E7;
}
.btn--fantasma:hover { background: var(--azul-suave); color: var(--azul-oscuro); }

/* Neutro claro para la barra de navegación ("Entrar") */
.btn--neutro {
  background: transparent;
  color: var(--texto);
  border-color: var(--linea-borde);
  padding: 10px 18px;
  font-weight: 500;
}
.btn--neutro:hover { border-color: var(--azul-filete); color: var(--navy); }

/* Botón compacto para la barra superior */
.btn--sm { padding: 11px 20px; font-size: 15px; }

/* Enlace-flecha ("Ver grupos →") */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--azul-oscuro);
}
.enlace-flecha:hover { gap: 10px; }

/* ============================================================
   6. TARJETAS Y ETIQUETAS
   ============================================================ */
.tarjeta {
  background: #fff;
  border: 1px solid var(--crema-media);
  border-radius: var(--radio-grande);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--sombra-tarjeta);
}

/* Chip: etiqueta con borde tipo pastilla (Running, Triatlón…) */
.chip {
  display: inline-block;
  border: 1px solid var(--linea-borde);
  border-radius: var(--radio-pastilla);
  padding: 8px 14px;
  font-size: 14px;
  color: var(--texto);
}

/* Dato destacado: número grande + etiqueta (420 ATLETAS) */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: clamp(38px, 6vw, 46px);
  line-height: 1;
  color: var(--navy);
}
.stat span {
  font-family: var(--fuente-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--texto-tenue);
}

/* Hueco de imagen (marco redondeado con fondo crema mientras carga)

   El encuadre por defecto NO es el centro: en las fotos de deporte la cara y
   la acción caen casi siempre en el tercio de arriba, así que recortar por el
   centro corta cabezas y deja piernas. Con «center 30%» el recorte se lleva lo
   que sobra de abajo (suelo, pista, agua) y respeta las caras.

   Para una foto concreta se ajusta desde Panel → Fotos de la web, casilla
   «Encuadre»: ese valor se aplica encima de este y manda él. */
.marco { border-radius: var(--radio); overflow: hidden; background: var(--crema-media); }
.marco img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* Aviso cálido reutilizable */
.aviso {
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  border-radius: 12px;
  padding: 14px 16px;
}
.aviso .eyebrow { color: var(--aviso-titulo); }
.aviso p { margin: 4px 0 0; color: var(--aviso-texto); }

/* ============================================================
   7. CABECERA Y PIE · compartidos por todas las páginas
   El contenido (menú, teléfonos…) se genera desde
   assets/js/apolana.js, para escribirlo UNA sola vez.
   ============================================================ */

/* --- Aviso de portada (barra superior) --- */
.aviso-portada { font-size: 14px; border-bottom: 1px solid var(--linea); }
.aviso-portada .contenedor { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 10px; }
.aviso-portada .nivel {
  font-family: var(--fuente-mono); font-size: 10px; letter-spacing: 0.03em;
  border: 1px solid currentColor; border-radius: 4px; padding: 3px 9px; flex-shrink: 0;
}
.aviso-portada .texto { flex: 1; min-width: 220px; overflow-wrap: anywhere; }
.aviso-portada a { font-weight: 600; white-space: nowrap; }
.aviso-portada--informativo { background: var(--azul-suave); color: var(--navy); }
.aviso-portada--informativo a { color: var(--azul-oscuro); }
.aviso-portada--importante { background: var(--aviso-fondo); color: var(--aviso-texto); border-bottom-color: var(--aviso-borde); }
.aviso-portada--importante a { color: var(--aviso-titulo); }
.aviso-portada--urgente { background: #fbeceb; color: #7a1f18; border-bottom-color: #e6c3bf; }
.aviso-portada--urgente a { color: #b3261e; }

/* Con la app instalada no hay barra del navegador, así que lo primero de la
   página queda pegado al reloj y a la muesca del móvil y el texto se lee
   partido. Lo primero es la franja de aviso cuando la hay, y si no la
   cabecera: quien vaya arriba del todo se aparta lo que pida el aparato.
   En un móvil sin muesca el hueco vale cero y no cambia nada. */
@media (display-mode: standalone) {
  .aviso-portada { padding-top: env(safe-area-inset-top, 0px); }
  .cabecera { padding-top: env(safe-area-inset-top, 0px); }
  /* Si hay aviso, él ya se apartó: la cabecera va detrás y no repite el hueco. */
  .aviso-portada + apolana-cabecera .cabecera { padding-top: 0; }
}

/* En el móvil el aviso ocupaba media pantalla antes de ver la web. Se queda en
   dos líneas como mucho; al tocarlo se despliega entero. */
@media (max-width: 700px) {
  .aviso-portada .contenedor { gap: 8px; padding-block: 8px; align-items: baseline; }
  .aviso-portada .nivel { display: none; }
  .aviso-portada .texto {
    min-width: 0; font-size: 13.5px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .aviso-portada.abierto .texto { -webkit-line-clamp: unset; overflow: visible; }
  .aviso-portada a { font-size: 13.5px; }
}

/* --- Barra de navegación --- */
/* La cabecera va al principio de la página y NO se pega: al bajar, se va hacia
   arriba y desaparece (como la web original). */
apolana-cabecera { display: block; }

.cabecera {
  position: relative; z-index: 20; /* contiene el panel móvil y lo pone por
                                       encima del contenido */
  background: transparent; /* son tres islas flotantes; el fondo va en ellas */
}
.cabecera .contenedor { display: flex; align-items: center; gap: 28px; padding-block: 14px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.marca img { height: 44px; width: auto; }
.marca-txt { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; flex: 0 0 auto; white-space: nowrap; }
.marca .nombre { font-family: var(--fuente-titulo); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--navy); }
.marca .sub { font-family: var(--fuente-mono); font-size: 9px; letter-spacing: 0.03em; color: var(--texto-tenue); }
.menu { flex: 1; display: flex; align-items: center; gap: 26px; font-size: 15px; }
.menu > a, .menu .tiene-sub > .top { white-space: nowrap; }
.menu a { color: #47433B; }
.menu a:hover { color: var(--azul-oscuro); }
.menu a.activo { color: var(--azul-oscuro); font-weight: 600; }
/* Subrayado que crece de izquierda a derecha al pasar por encima (y fijo en
   la página activa). Sustituye al subrayado estático de antes. */
.menu > a, .menu .tiene-sub > .top { position: relative; }
.menu > a::after, .menu .tiene-sub > .top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; opacity: 0;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .28s ease;
}
.menu > a:hover::after, .menu .tiene-sub:hover > .top::after,
.menu .tiene-sub:focus-within > .top::after { transform: scaleX(1); opacity: .55; }
.menu > a.activo::after, .menu .tiene-sub > .top.activo::after { transform: scaleX(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .menu > a::after, .menu .tiene-sub > .top::after { transition: none; }
}
.cabecera-acciones { display: flex; align-items: center; gap: 12px; }

/* Menús desplegables (El club, Entrena con nosotros, Escuelas) */
.menu .tiene-sub { position: relative; }
.menu .tiene-sub > .top { display: inline-flex; align-items: center; gap: 6px; padding-block: 8px; }
.menu .caret {
  display: inline-block; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .4;
  transition: transform .15s ease, opacity .15s ease;
}
.menu .tiene-sub:hover .caret,
.menu .tiene-sub:focus-within .caret { transform: rotate(180deg); opacity: .75; }
.submenu {
  position: absolute; top: 100%; left: 0; min-width: 230px;
  background: var(--crema); border: 1px solid var(--linea);
  border-radius: 12px; box-shadow: var(--sombra-tarjeta);
  padding: 8px; z-index: 30;
  display: none; flex-direction: column; gap: 2px;
}
.menu .tiene-sub:hover .submenu,
.menu .tiene-sub:focus-within .submenu { display: flex; }
.submenu a { padding: 9px 12px; border-radius: 8px; font-size: 14px; color: #47433B; white-space: nowrap; }
.submenu a:hover { background: var(--crema-media); color: var(--azul-oscuro); }

/* Botón hamburguesa (solo móvil), sin JavaScript */
.menu-movil { display: none; }
.menu-movil > summary {
  list-style: none; cursor: pointer;
  border: 1px solid var(--linea-borde); border-radius: 10px;
  padding: 9px 12px; font-size: 20px; line-height: 1; color: var(--navy);
}
.menu-movil > summary::-webkit-details-marker { display: none; }
/* El menú del móvil abierto cubre TODA la pantalla (antes era un desplegable
   de alto automático y por debajo se veía la web al bajar). Es un panel fijo,
   con scroll propio si hay muchos enlaces, y el botón ☰ queda fijo arriba para
   cerrarlo. El scroll del fondo se bloquea mientras está abierto. */
.menu-movil[open] .menu-movil-panel {
  position: fixed; inset: 0; z-index: 50;
  background: var(--crema);
  display: flex; flex-direction: column; gap: 2px;
  padding: calc(env(safe-area-inset-top, 0px) + 66px) var(--margen-lateral) 40px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.menu-movil[open] > summary {
  position: fixed; z-index: 60;
  top: calc(env(safe-area-inset-top, 0px) + 12px); right: var(--margen-lateral);
}
html:has(.menu-movil[open]) { overflow: hidden; }
.menu-movil-panel a { padding: 12px 0; border-bottom: 1px solid var(--linea); color: #47433B; font-size: 17px; }
.menu-movil-panel .sub { display: flex; flex-direction: column; }
.menu-movil-panel .sub a { padding: 9px 0 9px 16px; font-size: 15px; color: var(--texto-suave); border-bottom: 1px solid var(--linea); }

/* Los grupos del menú del móvil, plegados. El título se pulsa para abrirlo,
   así que tiene que medir lo mismo que un enlace y llevar su flecha: si no,
   parece un rótulo y nadie lo toca. */
.menu-movil-panel .men-gr > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 0; min-height: 44px; box-sizing: border-box;
  border-bottom: 1px solid var(--linea);
  color: #47433B; font-size: 17px; cursor: pointer; list-style: none;
}
.menu-movil-panel .men-gr > summary::-webkit-details-marker { display: none; }
.menu-movil-panel .men-gr > summary:focus-visible { outline: 2px solid var(--azul-filete, #3B85C0); outline-offset: -2px; }
/* La flecha apunta hacia abajo cuando está cerrado y hacia arriba al abrirlo:
   es lo único que dice, de un vistazo, cuál de los grupos está abierto. */
.menu-movil-panel .men-fl { flex: 0 0 auto; font-size: 12px; color: var(--texto-suave); transition: transform .15s ease; }
.menu-movil-panel .men-gr[open] > summary .men-fl { transform: rotate(180deg); }
.menu-movil-panel .men-gr[open] > summary { color: var(--navy); font-weight: 600; }

/* --- Pie de página --- */
.pie { border-top: 1px solid var(--linea); margin-top: clamp(40px, 6vw, 56px); }
.pie .contenedor { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-block: 36px 28px; }
.pie-marca { display: flex; flex-direction: column; gap: 10px; max-width: 300px; }
.pie-marca .fila { display: flex; align-items: center; gap: 10px; }
.pie-marca img { height: 36px; width: auto; }
.pie-marca .nombre { font-family: var(--fuente-titulo); font-weight: 700; font-size: 20px; text-transform: uppercase; color: var(--navy); }
.pie-marca .lema { font-size: 14px; color: var(--texto-suave); line-height: 1.5; }
.pie-cols { display: flex; gap: 60px; flex-wrap: wrap; font-size: 14px; color: var(--texto); }
.pie-col { display: flex; flex-direction: column; gap: 9px; }
.pie-col .eyebrow { margin-bottom: 2px; }
.pie-col a { color: var(--texto); }
.pie-col a:hover { color: var(--azul-oscuro); }

/* En el móvil el pie era una columna larguísima (una pantalla entera de
   scroll). Se reparte en dos columnas y se junta un poco. */
@media (max-width: 700px) {
  .pie .contenedor { gap: 24px; padding-block: 26px 20px; }
  /* minmax(0,…) para que un correo largo no se coma la otra columna */
  .pie-cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px 18px; width: 100%; }
  .pie-col { gap: 7px; min-width: 0; }
  .pie-col a { overflow-wrap: anywhere; }
  .pie-col a, .pie-col span:not(.eyebrow) { font-size: 13.5px; line-height: 1.35; }
  /* Los colaboradores, a lo ancho y en línea */
  .pie-col:last-child { grid-column: 1 / -1; }
  .pie-col:last-child span:not(.eyebrow) { display: inline; }
  .pie-marca { max-width: none; }
  .pie-marca .lema { font-size: 13.5px; }
}
.pie-credito { border-top: 1px solid var(--linea); text-align: center; padding: 14px 20px; font-size: 11px; color: var(--texto-tenue); letter-spacing: .02em; }
.pie-credito strong { font-weight: 600; color: var(--texto-suave); }

/* Cabecera en pantallas estrechas: se oculta el menú horizontal y aparece el
   hamburguesa. El corte está en 1200 px (la anchura máxima del contenido):
   por debajo de ahí el menú y los botones dejan de caber en una línea y se
   salían por la derecha, así que ahí ya entra el botón de menú. */
/* Entre 1080 y 1400 el menú aprieta: se junta y encoge un punto, y el
   botón "Entrar" se recoge (ya está dentro del menú de hamburguesa). */
@media (max-width: 1400px) {
  .cabecera .menu { gap: 18px; font-size: 14.5px; }
  .cabecera-acciones .btn--neutro { display: none; }
}
@media (max-width: 1180px) {
  .cabecera .menu { gap: 12px; font-size: 13.5px; }
  .cabecera .marca .sub { display: none; }
}
/* Por debajo de aquí ya no cabe de ninguna manera: menú de hamburguesa. */
@media (max-width: 950px) {
  /* La cabecera se queda fija también en móvil (position:sticky de la regla
     base; no la volvemos a relative). */
  .menu { display: none; }
  .menu-movil { display: block; }
}

/* ============================================================
   8. AVISOS Y DIÁLOGOS DEL PANEL (no bloqueantes)
   Sustituyen a alert()/confirm(): un "toast" que aparece y se va
   solo, y un diálogo propio para confirmar borrados. Namespace
   .apo-* para no interferir con nada del resto de la web.
   ============================================================ */

/* --- Toasts (avisos suaves arriba a la derecha) --- */
.apo-toasts {
  position: fixed; top: 16px; right: 16px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(360px, calc(100vw - 32px)); pointer-events: none;
}
.apo-toast {
  pointer-events: auto;
  background: #fff; border: 1px solid var(--linea);
  border-left: 4px solid var(--azul-filete); border-radius: 12px;
  padding: 12px 16px; box-shadow: var(--sombra-tarjeta);
  font-family: var(--fuente-texto); font-size: 14px; line-height: 1.45;
  color: var(--navy); cursor: pointer;
  animation: apo-toast-in .2s ease;
}
.apo-toast--ok    { border-left-color: #1e7a3d; }
.apo-toast--error { border-left-color: #b3261e; }
.apo-toast--info  { border-left-color: var(--azul-filete); }
.apo-toast.apo-saliendo {
  opacity: 0; transform: translateX(12px);
  transition: opacity .25s ease, transform .25s ease;
}
@keyframes apo-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --- Diálogo de confirmación --- */
.apo-modal-fondo {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(46,66,86,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: apo-fade .15s ease;
}
.apo-modal {
  background: #fff; border-radius: var(--radio-grande);
  box-shadow: var(--sombra-hero); max-width: 420px; width: 100%;
  padding: 26px 26px 22px; animation: apo-pop .18s ease;
}
.apo-modal h3 {
  font-family: var(--fuente-titulo); text-transform: uppercase;
  font-size: 23px; color: var(--navy); margin: 0 0 8px; line-height: 1.05;
}
.apo-modal p { margin: 0 0 20px; color: var(--texto); font-size: 15px; line-height: 1.5; white-space: pre-line; }
.apo-modal-botones { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.apo-modal-botones button {
  font-family: var(--fuente-texto); font-size: 15px; font-weight: 600;
  border-radius: 999px; padding: 11px 22px; cursor: pointer; border: 1px solid transparent;
  transition: background .15s ease;
}
.apo-btn-cancelar { background: transparent; border-color: var(--linea-borde); color: var(--texto); }
.apo-btn-cancelar:hover { background: var(--crema-media); }
.apo-btn-ok { background: var(--azul); color: #fff; }
.apo-btn-ok:hover { background: var(--azul-hover); }
.apo-btn-ok.apo-peligro { background: #b3261e; }
.apo-btn-ok.apo-peligro:hover { background: #8f1e18; }
@keyframes apo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes apo-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .apo-toast, .apo-modal, .apo-modal-fondo { animation: none; }
}

/* ============================================================
   CAMPOS DE FECHA Y HORA · que midan lo que se les dice
   ------------------------------------------------------------
   Safari en iPhone le da a los campos de fecha y hora un ancho
   propio de fábrica y no hace caso al del formulario. El efecto
   es que en una rejilla el campo de hora sobresale del de al
   lado y el bloque se ve torcido (se vio en «Planificar semana»
   del portal del entrenador, con «Hora» más ancho que «Lugar»).

   Esto ya se había arreglado a mano dentro de la pantalla de la
   Liga, y solo para «date». Vive aquí para que valga en las 42
   casillas de fecha y hora del portal y del panel, y para que no
   haya que acordarse cada vez que se pone una nueva.
   ============================================================ */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
}

/* ============================================================
   LO ÚLTIMO EN LA SECCIÓN
   ------------------------------------------------------------
   Las páginas de sección terminaban en «ven a probarlo» y no
   enseñaban nada de lo que pasa en el club. Este bloque trae las
   últimas crónicas de esa sección desde la base (`assets/js/seccion.js`,
   `data-ultimas="running"`). Vive aquí y no en cada página porque la
   idea es que lo lleven las seis secciones.
   ============================================================ */
.sec-cab { display: flex; align-items: baseline; justify-content: space-between;
           gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sec-cab .enl { font-size: 15px; font-weight: 600; color: var(--azul-oscuro);
                text-decoration: none; white-space: nowrap; }
.sec-cab .enl:hover { color: var(--azul-hover); }

.ult-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ult-card { display: flex; flex-direction: column; background: #fff;
            border: 1px solid var(--linea); border-radius: 14px; overflow: hidden;
            text-decoration: none; color: inherit; }
.ult-card:hover { border-color: var(--azul-filete, #3B85C0); }
/* Alto fijo y recorte: las crónicas traen fotos de móvil en vertical y en
   horizontal, y sin esto la fila queda a escalones. */
.ult-card .marco { aspect-ratio: 16 / 10; background: var(--crema-media, #F1EADC); overflow: hidden; }
.ult-card .marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ult-card .cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.ult-card .fecha { font-size: 13px; color: var(--texto-suave); }
.ult-card .tit { font-size: 16px; line-height: 1.35; color: var(--navy); font-weight: 600;
                 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 860px) { .ult-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ult-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   LAS TARJETAS DE «LO ÚLTIMO», AL LLEGAR
   ------------------------------------------------------------
   Se piden a la base después de pintar la página, así que aparecen
   las tres de golpe cuando llega la respuesta. Una entrada corta y
   escalonada quita ese salto.

   `@starting-style` y no una animación con keyframes: así se anima
   solo la PRIMERA vez que el elemento entra en pantalla, y no cada
   vez que el navegador lo repinta.

   El escalonado es decoración y nunca bloquea: las tarjetas ya se
   pueden pulsar mientras entran.
   ------------------------------------------------------------ */
.ult-card {
  transition: opacity var(--dur-entrada) var(--ease-salida),
              transform var(--dur-entrada) var(--ease-salida);
}
@starting-style {
  .ult-card { opacity: 0; transform: translateY(8px); }
}
.ult-card:nth-child(2) { transition-delay: 40ms; }
.ult-card:nth-child(3) { transition-delay: 80ms; }

/* ============================================================
   CUADRO DE PRECIOS (compartido)
   ------------------------------------------------------------
   El cuadro «Cuánto cuesta en total» de la página de socio, ahora
   compartido para usarlo en el resto de secciones (running, natación,
   competición, montaña, El Cubo, triatlón…). Las otras maquetas de
   precio eran feas; esta es la buena. En móvil, el número final (total)
   se separa a su línea para que no se apriete.
   ============================================================ */
.precios { background: var(--crema-banda); border-block: 1px solid #E4DCCB; padding-block: clamp(30px, 4vw, 40px); }
.precios .cabecera-precios { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.precios .cabecera-precios .nota { font-size: 15px; color: #6B6558; max-width: 640px; }
.tabla-precios { background: var(--crema); border: 1px solid #E4DCCB; border-radius: 16px; overflow: hidden; }
.tabla-precios .fila { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; padding: 15px 24px; border-bottom: 1px solid var(--crema-media); align-items: baseline; gap: 10px; }
.tabla-precios .fila:last-child { border-bottom: 0; }
.tabla-precios .encabezado { background: #F3EEE3; padding-block: 13px; font-size: 13px; color: var(--texto-suave); }
.tabla-precios .encabezado span:last-child { text-align: right; }
.tabla-precios .concepto { font-size: 16px; color: var(--navy); }
.tabla-precios .cifra { font-size: 15px; color: var(--navy); }
.tabla-precios .cifra.tenue { color: var(--texto-suave); }
.tabla-precios .total { font-family: var(--fuente-titulo); font-weight: 700; font-size: 26px; color: var(--azul-oscuro); text-align: right; line-height: 1; }
/* Variante de 2 columnas (concepto + un solo precio), para páginas con una tarifa única */
.tabla-precios.dos .fila { grid-template-columns: 1.5fr auto; }
.tabla-precios.dos .encabezado span:last-child,
.tabla-precios.dos .total { text-align: right; }
/* Móvil: el total baja a su línea y las columnas intermedias se compactan */
@media (max-width: 620px) {
  .tabla-precios .fila { grid-template-columns: 1fr auto; row-gap: 4px; padding: 14px 16px; }
  .tabla-precios .fila .concepto { grid-column: 1 / -1; font-weight: 600; }
  .tabla-precios .fila .total { grid-column: 2; grid-row: 1; }
  .tabla-precios .encabezado { display: none; }
  .tabla-precios .cifra::before { content: attr(data-et) " "; color: var(--texto-suave); font-size: 12px; }
}

/* Cuadro de precios · variante de 3 columnas para las secciones
   (concepto · Socio · No socio) y la línea de días bajo el concepto. */
.tabla-precios.tres .fila { grid-template-columns: 1.6fr 1fr 1fr; }
.tabla-precios.tres .fila > span:last-child,
.tabla-precios.tres .encabezado span:last-child { text-align: right; }
.tabla-precios .concepto small.sec-dias { display: block; font-size: 13px; color: var(--texto-suave); margin-top: 2px; font-weight: 400; }
@media (max-width: 620px) {
  .tabla-precios.tres .fila, .tabla-precios.dos .fila { grid-template-columns: 1fr auto; }
  .tabla-precios.tres .fila .concepto, .tabla-precios.dos .fila .concepto { grid-column: 1 / -1; }
}

/* ============================================================
   PRECIO DE SECCIÓN (running, natación, competición, montaña, El Cubo,
   triatlón…) · maqueta A aprobada. Todo el bloque en una tarjeta; la cuota
   de socio, su propia tarjeta dentro; notas al pie con filete.
   ============================================================ */
.sec-precio .sp-precio { background:#fff; border:1px solid #E7DFCD; border-radius:22px; box-shadow:0 1px 2px rgba(30,45,65,.06), 0 18px 40px -20px rgba(30,45,65,.30); padding:clamp(18px,3vw,26px); }
.sec-precio .sp-cab { display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.sec-precio .sp-cab h2 { font-family:var(--fuente-titulo); font-weight:700; text-transform:uppercase; font-size:22px; margin:0; color:var(--navy); }
.sec-precio .sp-cab .n { font-size:13.5px; color:#8A8271; }
.sec-precio .sp-tp { display:flex; flex-direction:column; }
.sec-precio .sp-fila { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:12px; align-items:center; padding:15px 6px; border-top:1px solid #F0EADC; }
.sec-precio .sp-tp.dos .sp-fila { grid-template-columns:1.6fr 1fr; }
.sec-precio .sp-enc { border-top:0; padding-top:2px; padding-bottom:10px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#A79B82; }
.sec-precio .sp-enc span:nth-child(2), .sec-precio .sp-enc span:nth-child(3) { text-align:right; }
.sec-precio .sp-concepto { font-size:16.5px; font-weight:600; color:var(--navy); }
.sec-precio .sp-concepto small { display:block; font-size:13px; font-weight:400; color:#8A8271; margin-top:2px; }
.sec-precio .sp-val { font-family:var(--fuente-dato,'IBM Plex Mono',monospace); font-weight:700; font-size:18px; color:var(--navy); text-align:right; line-height:1.05; }
.sec-precio .sp-val small { font-family:inherit; display:block; font-size:11.5px; font-weight:400; color:#A79B82; margin-top:2px; }
.sec-precio .sp-val.ns { color:#8A8271; font-weight:600; font-size:16px; }
.sec-precio .sp-cuota { display:flex; align-items:center; gap:14px; margin-top:16px; padding:16px 18px; border-radius:16px; background:radial-gradient(120% 160% at 90% -30%, rgba(59,133,192,.14), transparent 60%), #F4F7FA; border:1px solid #DCE7F1; }
.sec-precio .sp-cuota .ic { width:44px; height:44px; flex:0 0 auto; border-radius:12px; background:#E7F1F9; color:var(--azul-oscuro,#2F6FA8); display:grid; place-items:center; }
.sec-precio .sp-cuota .ic svg { width:22px; height:22px; }
.sec-precio .sp-cuota .tx { flex:1; min-width:0; }
.sec-precio .sp-cuota .tx b { display:block; font-size:15.5px; color:var(--navy); }
.sec-precio .sp-cuota .tx small { font-size:13px; color:var(--texto-suave); }
.sec-precio .sp-cuota .imp { font-family:var(--fuente-dato,'IBM Plex Mono',monospace); font-weight:700; font-size:22px; color:var(--azul-oscuro,#2F6FA8); white-space:nowrap; }
.sec-precio .sp-notas { margin:16px 4px 0; display:flex; flex-direction:column; gap:8px; }
.sec-precio .sp-notas p { margin:0; font-size:13.5px; line-height:1.5; color:#7A7364; padding-left:12px; border-left:3px solid #E7DFCD; }
@media (max-width:560px) {
  /* En móvil la tabla se apila: concepto arriba y, debajo, cada precio con su
     rótulo (Socio / No socio) a la izquierda. Antes se veía roto/partido. */
  /* La regla de apilado tiene que ganar a `.sp-tp.dos/.tres .sp-fila` (0,4,0),
     que si no dejaba la tabla en 2/3 columnas en móvil y el texto largo se
     salía por la derecha (arrastrando el fondo crema). */
  .sec-precio .sp-fila,
  .sec-precio .sp-tp.dos .sp-fila,
  .sec-precio .sp-tp.tres .sp-fila { grid-template-columns:1fr; row-gap:7px; padding:16px 4px; }
  .sec-precio .sp-enc { display:none; }
  .sec-precio .sp-concepto { grid-column:auto; }
  .sec-precio .sp-val { text-align:left; display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:16px; white-space:nowrap; }
  .sec-precio .sp-val::before { content:attr(data-et); font-family:var(--fuente-texto,inherit); font-weight:400; font-size:13.5px; color:var(--texto-suave); white-space:nowrap; }
  .sec-precio .sp-val small { display:inline; margin:0 0 0 6px; white-space:nowrap; }
  /* La cuota: el texto ocupa la primera línea (junto al icono) y el importe BAJA
     a su propia línea, indentado bajo el texto. Antes el importe se quedaba en la
     misma línea con un margen de 58px que aplastaba el texto a una palabra por
     renglón. `flex-basis:100%` fuerza el salto; `flex:1 1 auto` en el texto evita
     que se colapse. */
  .sec-precio .sp-cuota { flex-wrap:wrap; align-items:flex-start; }
  .sec-precio .sp-cuota .tx { flex:1 1 auto; min-width:0; }
  .sec-precio .sp-cuota .imp { flex:1 0 100%; margin-left:58px; margin-top:4px; }
}

/* El fondo crema de la sección de precio, mucho más suave (casi blanco cálido):
   el crema fuerte competía con la tarjeta blanca. */
.sec-precio.seccion--crema { background: #F8F4EC; border-block-color: #EDE6D7; }

/* ============================================================
   COHESIÓN DE SECCIÓN · «Ubicación», «Servicios» y «A qué te
   comprometes» en tarjeta con profundidad, el mismo lenguaje que
   los grupos, la ficha «De un vistazo» y el bloque de precio. Así
   nada queda como un pegote plano de crema. Vale para las siete
   secciones (running, competición, natación, montaña, El Cubo,
   triatlón…): el selector .sec-pagina hace que solo pese aquí.
   ============================================================ */
.sec-pagina {
  --sombra-sec: 0 1px 2px rgba(30,45,65,.06),
                0 10px 20px -12px rgba(30,45,65,.18),
                0 26px 48px -28px rgba(30,45,65,.24);
}

/* Ubicación / cómo se llega a la sede: una tarjeta blanca con su
   chincheta, no el recuadro crema plano de antes. Va debajo de todos
   los grupos y se separa de ellos lo mismo que ellos entre sí. */
.sec-pagina .sec-acceso {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px;
  background: #fff;
  border: 0; border-radius: 16px;
  box-shadow: var(--sombra-sec);
  padding: 15px 18px;
  font-size: 15px; line-height: 1.5; color: var(--navy);
}
.sec-pagina .sec-acceso .ic {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px;
  background: #E7F1F9; color: var(--azul-oscuro, #2F6FA8);
  display: grid; place-items: center;
}
.sec-pagina .sec-acceso .ic svg { width: 22px; height: 22px; }
.sec-pagina .sec-acceso .tx { min-width: 0; }

/* Servicios: la lista de lo que pone el club, dentro de una tarjeta
   blanca con relieve. Las líneas de 1 px siguen separando cada cosa,
   pero ya no es un inventario suelto sobre el fondo. */
.sec-pagina .sec-servicios__lista {
  background: #fff; border-radius: 18px;
  box-shadow: var(--sombra-sec);
  padding: clamp(4px, 1.2vw, 10px) clamp(18px, 3vw, 26px);
  gap: 0 clamp(24px, 4vw, 48px);
}

/* A qué te comprometes: la otra mitad del trato, también en tarjeta
   blanca con el filete azul de «esto es una explicación, léela».
   Sombra en capas un pelín más honda que --sombra-sec, para que
   flote igual que los grupos y el precio y no se lea como un pegote
   plano. En pantallas anchas los puntos van a dos columnas (una cosa
   por celda, sin marcas de lista): la tarjeta ocupa la mitad de alto
   y la página baja bastante menos. En móvil vuelve a una columna. */
.sec-pagina .sec-compromiso__caja {
  background: #fff;
  border: 0; border-left: 3px solid var(--azul-filete);
  border-radius: 0 16px 16px 0;
  box-shadow: 0 1px 2px rgba(30,45,65,.06),
              0 12px 24px -14px rgba(30,45,65,.20),
              0 30px 54px -30px rgba(30,45,65,.30);
  padding: 4px clamp(18px, 3vw, 26px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 4vw, 48px);
}
.sec-pagina .sec-compromiso__punto { border-bottom-color: var(--linea); }
/* La banda que contiene la tarjeta llevaba 0 de relleno abajo, así que
   la tarjeta moría justo en el borde del crema y parecía recortada. Se
   le devuelve aire por debajo para que la tarjeta (y su sombra) floten
   sobre el crema antes de que empiece la banda siguiente. */
.sec-pagina .sec-compromiso { padding-bottom: clamp(24px, 3.5vw, 36px); }
@media (max-width: 900px) {
  .sec-pagina .sec-compromiso__caja { grid-template-columns: 1fr; }
}