/* ═══════════════════════════════════════════════════════════════
   LOALVIC SPORTS — HOJA PRINCIPAL
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* 🔴 `hidden` MANDA SIEMPRE (2 oct 2026). Sin esta línea, cualquier clase
   que ponga `display: flex/grid` gana al atributo `hidden` y el elemento se
   ve aunque el JS lo haya escondido. Pasó en Tecnificación: el bloque de
   Puertas Abiertas salía SIN NINGUNA FECHA y su botón abría un formulario
   con el desplegable de sedes vacío; y en la inscripción salía «Horario»
   vacío en tarifas que no llevan franja. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--acento); color: var(--blanco); }

/* Lo que pinta el navegador también es diseño (kit de estructura, oct 2026):
   casillas, radios y barras de desplazamiento con el azul de la marca, sin el
   gris por defecto del sistema. */
:root { accent-color: var(--acento); scrollbar-color: var(--tenue) transparent; }
input, textarea { caret-color: var(--acento); }

/* Transición suave entre páginas de la misma web (navegadores que la tengan;
   el resto navega igual que siempre). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, ::view-transition-group(*) {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}
/* Sin destello azul al tocar en móvil: el :active ya da la respuesta */
a, button { -webkit-tap-highlight-color: transparent; }

/* ─── 2. Tipografía ─────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* La serif del logotipo se conserva para acentos puntuales */
.serif { font-family: 'Bodoni Moda', Didot, serif; text-transform: none; font-style: italic; }

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-marca);
  text-transform: uppercase;
  color: var(--tenue);
  margin-bottom: var(--s-5);
}
.eyebrow--verde  { color: var(--verde); }
.eyebrow--marino { color: var(--marino); }
/* Sobre fondos oscuros */
.hero .eyebrow,
.hero-pagina .eyebrow,
.seccion--marino .eyebrow,
.seccion--verde .eyebrow,
.cta-final .eyebrow { color: rgba(255, 255, 255, 0.5); }

.lead {
  font-size: var(--t-lg);
  color: var(--suave);
  max-width: var(--ancho-texto);
}

/* Énfasis sobrio: sin resaltado de color, solo peso tipográfico */
.subrayado-oro { color: var(--acento); }
.seccion--marino .subrayado-oro,
.cta-final .subrayado-oro,
.hero .subrayado-oro { color: var(--blanco); }

/* ─── 3. Layout ─────────────────────────────────────────────── */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (max-width: 640px) { .contenedor { padding-inline: var(--s-4); } }

.seccion { padding-block: var(--seccion-y); }
.seccion--fondo  { background: var(--fondo); }

/* Separación visible entre secciones del mismo color */
.seccion + .seccion { border-top: 1px solid var(--borde); }
.seccion--fondo, .seccion--marino { border-top: none !important; }

/* Cabecera de sección con numeración, para marcar el ritmo */
.seccion-num {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.seccion-num::before {
  content: '';
  width: 44px; height: 2px;
  background: var(--acento);
  flex-shrink: 0;
}
.seccion-num__n,
.seccion-num__t {
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--acento);
}
.seccion-num__n::after { content: ' —'; opacity: 0.5; }
.seccion--marino .seccion-num { border-bottom-color: rgba(255,255,255,0.3); }
.seccion--marino .seccion-num__t { color: var(--blanco); }
.seccion--marino .seccion-num__n { color: var(--sobre-negro-tenue); }
/* 9 oct 2026: marino TNGS de verdad (antes era el negro --tinta). Solo la usan
   páginas TNGS (Tecnificación, Extraescolares). NO tocar el token --marino,
   que sigue siendo --tinta y lo usan 14 reglas de toda la web. */
.seccion--marino { background: #032349; color: var(--blanco); }
.seccion--verde  { background: var(--verde); color: var(--blanco); }

.seccion--marino .lead,
.seccion--verde  .lead { color: rgba(255, 255, 255, 0.78); }

.seccion-cabecera { max-width: 760px; margin-bottom: var(--s-8); }
.seccion-cabecera--centro { margin-inline: auto; text-align: center; }
.seccion-cabecera h2 { margin-bottom: var(--s-4); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ─── 4. Botones ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.9rem 2rem;
  border-radius: var(--r-full);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
  will-change: transform;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Acción principal: verde corporativo sobre claro, blanco sobre oscuro.
   Se mantiene el nombre .btn--oro para no romper las páginas existentes. */
.btn--oro {
  background: var(--acento);
  color: var(--blanco);
  box-shadow: 0 6px 18px rgba(22, 80, 217, 0.24);
}
.btn--oro:hover { background: var(--acento-alto); }

/* Sobre fondos oscuros el botón principal pasa a blanco */
.hero .btn--oro,
.hero-pagina .btn--oro,
.seccion--marino .btn--oro,
.cta-final .btn--oro,
.panel-top .btn--oro {
  background: var(--blanco);
  color: var(--marino);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.hero .btn--oro:hover,
.hero-pagina .btn--oro:hover,
.seccion--marino .btn--oro:hover,
.cta-final .btn--oro:hover,
.panel-top .btn--oro:hover { background: #eef2f6; }

.btn--verde {
  background: var(--acento);
  color: var(--blanco);
  box-shadow: 0 8px 24px rgba(22, 80, 217, 0.26);
}
.btn--verde:hover { background: var(--acento-alto); }

.btn--marino {
  background: var(--marino);
  color: var(--blanco);
  box-shadow: 0 8px 24px rgba(15, 42, 74, 0.26);
}
.btn--marino:hover { background: var(--marino-claro); }

.btn--linea {
  background: transparent;
  color: var(--marino);
  box-shadow: inset 0 0 0 2px var(--borde);
}
.btn--linea:hover {
  box-shadow: inset 0 0 0 2px var(--marino);
  background: var(--marino);
  color: var(--blanco);
}

.btn--linea-claro {
  background: transparent;
  color: var(--blanco);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.btn--linea-claro:hover {
  background: var(--blanco);
  color: var(--marino);
  box-shadow: inset 0 0 0 2px var(--blanco);
}

.btn--claro {
  background: var(--blanco);
  color: var(--tinta);
}
.btn--claro:hover { background: var(--acento); color: var(--blanco); }

.btn--grande { padding: 1.1rem 2.6rem; }
.btn--bloque { display: flex; width: 100%; }

.btn-grupo { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn-grupo--centro { justify-content: center; }

/* ─── 5. Tarjetas ───────────────────────────────────────────── */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease);
}
.tarjeta--hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: var(--borde);
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.etiqueta--verde { background: var(--verde-suave); color: var(--verde); }
.etiqueta--oro   { background: var(--fondo-alt);   color: var(--texto-medio); }
.etiqueta--gris  { background: var(--fondo-alt);   color: var(--suave); }

/* ─── 6. Animación de entrada ─────────────────────────────────
   A prueba de fallos: el contenido es visible por defecto.
   Solo se oculta para animarlo si el JS ha arrancado (html.js).
   Si el JS falla o está desactivado, todo se ve igualmente.     */
html.js .revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
html.js .revelar.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .revelar { opacity: 1; transform: none; }
}

/* ─── 7. Utilidades ─────────────────────────────────────────── */
.centro     { text-align: center; }
.solo-lector {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }

/* ─── 8. Movimiento (11 oct 2026) ─────────────────────────────
   Un momento propio (la confirmación que viaja de la familia al
   entrenador) y entradas distintas para titulares y rejillas, en
   vez de la misma subida en todo. Todo se apaga con «reducir
   movimiento» (abajo del todo). */

/* Barra de lectura: cuánto llevas de página. */
.progreso {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 210;
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--acento), var(--acento-vivo));
  pointer-events: none;
}

/* Titulares de sección: entran desenfocados y se enfocan, distinto
   de la subida de las tarjetas. */
html.js .seccion-cabecera.revelar h2 {
  opacity: 0; filter: blur(10px); transform: translateY(.35em);
  transition: opacity 1s var(--ease-out) .1s, filter 1s var(--ease-out) .1s,
              transform 1s var(--ease-out) .1s;
}
html.js .seccion-cabecera.revelar.visible h2 { opacity: 1; filter: none; transform: none; }

/* Rejillas: cada tarjeta sale un poco después de la anterior. */
html.js .escalonado > .revelar,
html.js .revelar.escalonado > * { transition-delay: calc(var(--i, 0) * 90ms); }
html.js .revelar.escalonado > * {
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
html.js .revelar.escalonado.visible > * { opacity: 1; transform: none; }

/* Los móviles flotan muy poco, desfasados entre sí. */
@media (hover: hover) and (min-width: 721px) {
  /* Flota la figura entera, no la imagen: la imagen se reserva para el
     pulso de llegada y dos animaciones en el mismo elemento se pisan. */
  .circuito__pasos .movil { animation: flotar 6s ease-in-out infinite alternate; }
  .circuito__pasos .movil:last-child { animation-delay: -3s; }
}
@keyframes flotar { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* ── El viaje: la respuesta de la familia llega al entrenador ── */
.circuito__flecha.con-viaje { opacity: 1; font-size: 0; align-self: center; }
.viaje { position: relative; width: 170px; height: 64px; }
.viaje__pista {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--acento) 0 6px, transparent 6px 12px);
  opacity: .35;
}
.viaje__ficha {
  position: absolute; top: 50%; left: 0;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .7rem; border-radius: 999px; white-space: nowrap;
  background: var(--blanco); color: var(--texto);
  font-size: .75rem; font-weight: 600; line-height: 1;
  box-shadow: 0 6px 18px rgba(11, 30, 70, .16);
  opacity: 0; transform: translate(-50%, -50%) scale(.85);
}
.viaje__ficha svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--acento); }
.viaje__ficha[data-tipo="tarde"] svg { color: #B26A00; }
.viaje__ficha[data-tipo="no"] svg { color: #B42318; }
.viaje.en-marcha .viaje__ficha { animation: viajar 3.2s var(--ease) infinite; }
@keyframes viajar {
  0%   { left: 0;    opacity: 0; transform: translate(-50%, -50%) scale(.85); }
  12%  { left: 8%;   opacity: 1; transform: translate(-50%, -50%) scale(1); }
  68%  { left: 92%;  opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80%  { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  100% { left: 100%; opacity: 0; }
}

/* Al llegar: el móvil del entrenador da un pulso y sale el «+1». */
.movil { position: relative; }
.movil__llega {
  position: absolute; top: 14px; right: -10px;
  padding: .3rem .6rem; border-radius: 999px;
  background: var(--acento); color: var(--blanco);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(22, 80, 217, .35);
  opacity: 0; transform: translateY(6px) scale(.8); pointer-events: none;
}
.movil.llega .movil__llega { animation: llega 1.4s var(--ease-out); }
.movil.llega img { animation: pulso .9s var(--ease-out); }
@keyframes llega {
  0% { opacity: 0; transform: translateY(6px) scale(.8); }
  20%, 70% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes pulso {
  from { box-shadow: 0 0 0 0 rgba(22, 80, 217, .45), var(--sh-md); }
  to   { box-shadow: 0 0 0 18px rgba(22, 80, 217, 0), var(--sh-md); }
}

@media (max-width: 720px) {
  .circuito__flecha.con-viaje { transform: none; }
  .viaje { width: 64px; height: 120px; }
  .viaje__pista { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto;
    transform: translateX(-50%);
    background: repeating-linear-gradient(180deg, var(--acento) 0 6px, transparent 6px 12px); }
  .viaje__ficha { left: 50%; top: 0; }
  .viaje.en-marcha .viaje__ficha { animation-name: viajar-vertical; }
  .movil__llega { right: 8px; }
}
@keyframes viajar-vertical {
  0%   { top: 0;    opacity: 0; transform: translate(-50%, -50%) scale(.85); }
  12%  { top: 8%;   opacity: 1; transform: translate(-50%, -50%) scale(1); }
  68%  { top: 92%;  opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80%  { top: 100%; opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  100% { top: 100%; opacity: 0; }
}

/* ⚠️ La regla general de «reducir movimiento» (sección 6) acorta las
   animaciones a 0,01 ms, y una animación infinita a 0,01 ms parpadea.
   Por eso aquí se quitan del todo y vuelve la flecha de siempre. */
@media (prefers-reduced-motion: reduce) {
  .progreso, .viaje, .movil__llega { display: none; }
  .circuito__flecha.con-viaje { font-size: 2rem; opacity: .45; }
  .circuito__pasos .movil, .movil img { animation: none !important; }
  html.js .seccion-cabecera.revelar h2,
  html.js .revelar.escalonado > * { opacity: 1; filter: none; transform: none; }
}

/* ─── 9. Recorrido en vídeo (11 oct 2026) ─────────────────────
   Los cinco vídeos de la app en un solo reproductor con capítulos:
   se van pasando solos, la barra de cada capítulo se llena mientras
   suena y se puede saltar a cualquiera. Lo pinta initRecorrido(). */
.recorrido { max-width: 980px; margin: var(--s-8) auto 0; }
.recorrido__marco {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; margin-inline: auto;
  border-radius: var(--r-lg, 16px);
  border: 1px solid var(--borde-suave);
  background: #F4F3EF;
  box-shadow: 0 24px 60px -24px rgba(11, 30, 70, .35), var(--sh-md);
  transition: aspect-ratio .5s var(--ease-out), max-width .5s var(--ease-out);
}
.recorrido__marco--vertical { aspect-ratio: 9 / 16; max-width: min(100%, 360px); }
.recorrido__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #F4F3EF; }
.recorrido__video.entra { animation: recorrido-entra .6s var(--ease-out); }
@keyframes recorrido-entra { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }

.recorrido__capitulos {
  /* Una columna por capítulo, sean los que sean (6 desde el 12 oct). */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-3);
  margin-top: var(--s-5); padding: 0; list-style: none;
}
.recorrido__cap {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; flex-direction: column; gap: .3rem;
  padding: var(--s-3) var(--s-2) 0; border-radius: var(--r-sm, 8px);
  color: var(--suave); text-align: left;
  transition: color .25s var(--ease);
}
.recorrido__cap:hover { color: var(--texto); }
.recorrido__cap:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.recorrido__nombre { font-weight: 700; font-size: var(--t-sm); color: inherit; }
.recorrido__texto  { font-size: var(--t-xs); line-height: 1.45; }
.recorrido__barra {
  display: block; height: 3px; margin-top: auto; border-radius: 3px;
  background: var(--borde-suave); overflow: hidden;
}
.recorrido__barra i {
  display: block; height: 100%; width: 100%;
  background: var(--acento); transform-origin: 0 50%; transform: scaleX(0);
}
.recorrido__cap[aria-selected="true"] { color: var(--texto); }
.recorrido__cap[aria-selected="true"] .recorrido__nombre { color: var(--acento); }

@media (max-width: 760px) {
  .recorrido__capitulos {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: var(--s-4); padding-bottom: var(--s-2); scrollbar-width: none;
  }
  .recorrido__capitulos::-webkit-scrollbar { display: none; }
  .recorrido__cap { flex: 0 0 62%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .recorrido__marco { transition: none; }
  .recorrido__video.entra { animation: none; }
}

/* ─── 10. «También te puede interesar» (13 oct 2026, plan SEO) ──
   Enlaces internos entre servicios, sedes, guías y herramientas. */
.relacionados { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.relacionado { display: flex; flex-direction: column; gap: .35rem; padding: var(--s-5); border-radius: var(--r-lg);
  background: var(--blanco); border: 1px solid var(--borde-suave); color: var(--texto); text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s; }
.relacionado:hover, .relacionado:focus-visible { border-color: var(--acento); transform: translateY(-2px);
  box-shadow: 0 18px 30px -22px rgba(3, 20, 60, .45); }
.relacionado__tipo { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--acento); font-weight: 600; }
.relacionado strong { font-size: var(--t-md, 1.05rem); line-height: 1.3; }
.relacionado span:last-child { font-size: var(--t-sm); color: var(--texto-medio); }
@media (prefers-reduced-motion: reduce) { .relacionado { transition: none; } .relacionado:hover { transform: none; } }

/* ─── 13 oct 2026 · Textos legales ───────────────────────────────
   .capa-datos: primera capa de protección de datos bajo la casilla de
   privacidad de cada formulario (la pone components.js).
   .footer__legal: los cuatro textos legales en la base del pie. */
.capa-datos {
  margin-top: var(--s-3);
  font-size: var(--t-xs); line-height: 1.55;
  color: var(--texto-medio);
}
.capa-datos a { color: inherit; text-decoration: underline; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.footer__legal a { color: rgba(255, 255, 255, 0.75); text-decoration: underline; text-underline-offset: 2px; }
.footer__legal a:hover { color: var(--blanco); }