/* ═══════════════════════════════════════════════════════════════
   LOALVIC SPORTS — SECCIONES INTERNAS · TARJETAS · PIE
   La cabecera, el menú móvil y el hero principal viven en hero.css
   ═══════════════════════════════════════════════════════════════ */

/* Hero secundario (páginas internas) */
.hero-pagina {
  position: relative;
  padding-top: var(--s-9);
  padding-bottom: var(--s-9);
  background: linear-gradient(155deg, var(--acento-alto) 0%, var(--acento) 100%);
  color: var(--blanco);
  overflow: hidden;
  isolation: isolate;
}
.hero-pagina h1 { margin-bottom: var(--s-4); }
.hero-pagina .lead { color: rgba(255, 255, 255, 0.8); }

/* Línea pequeña bajo los botones de la cabecera, para acompañar al botón
   de WhatsApp sin robarle protagonismo al de apuntarse (27 ago 2026).
   Genérica: sirve para cualquier página de servicio. */
.hero-nota {
  margin-top: var(--s-4);
  max-width: 46ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

/* El icono no se encoge cuando el texto del botón es largo.
   `.btn` ya es inline-flex con gap, así que no hace falta nada más. */
.btn--con-icono svg { flex: 0 0 auto; }

/* ─── Cabecera con vídeo de fondo ───────────────────────────
   El vídeo ocupa toda la cabecera y el texto va encima.
   ⚠️ El material está grabado con el móvil, o sea en vertical:
   a pantalla ancha `cover` recorta arriba y abajo y solo se ve
   una banda. Por eso el encuadre se fija con `object-position`
   al 48 % de altura: comprobado recortando el póster a la
   proporción real de la cabecera, es el único valor donde la
   jugadora sale entera, de la cabeza al balón. Con 38 % se le
   corta por las rodillas y con 25 % solo se le ve la cabeza.
   Si se cambia el vídeo hay que volver a medirlo.
   La opacidad y la capa de color son lo que mantiene legible
   el titular en blanco: sin ellas, sobre césped no se lee.     */
/* `--enfoque` es la altura del vídeo que queda centrada en la banda visible.
   Cada servicio tiene la suya porque depende de dónde esté la acción en su
   grabación. Se pone en el propio <section>:  style="--enfoque:45%".
   Medidos hasta ahora:  extraescolares 48 %  ·  acompañamiento 45 %        */
.hero-pagina--video {
  --enfoque: 48%;
  min-height: min(72svh, 620px);
  display: flex; align-items: center;
}

.hero-pagina__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center var(--enfoque);
  z-index: -2;
  opacity: 0.55;
}

/* Velo de color: más denso a la izquierda, que es donde va el texto */
.hero-pagina--video::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(9, 24, 66, 0.88) 0%,
      rgba(9, 24, 66, 0.62) 42%,
      rgba(9, 24, 66, 0.30) 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.38), transparent 45%);
}

/* ─── Cabecera con media al lado (alternativa) ──────────────
   Sin usar ahora mismo: extraescolares pasó a vídeo de fondo.
   Se deja porque sirve para cualquier servicio cuyo vídeo se
   quiera enseñar entero, sin recortar, al lado del texto.      */
.hero-pagina__grid {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 260px);
  gap: var(--s-8);
  align-items: center;
}
.hero-pagina__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.2);
  line-height: 0;
}
.hero-pagina__media video,
.hero-pagina__media img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .hero-pagina__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-pagina__media { max-width: 230px; }
}

/* ─── Galería de fotos de un servicio ─────────────────────── */
.galeria-servicio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.galeria-servicio figure {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--borde);
  aspect-ratio: 3 / 4;
}
.galeria-servicio img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Fotos de instalación (sin personas): apaisadas. Solo la usa Campo F-8. */
.galeria-servicio--apaisada figure { aspect-ratio: 4 / 3; }
@media (max-width: 640px) {
  .galeria-servicio { grid-template-columns: 1fr 1fr; }
  .galeria-servicio figure:nth-child(3) { display: none; }
}

/* Miga de pan */
.miga {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: var(--s-5);
}
.miga a { transition: color var(--dur-fast) var(--ease); }
.miga a:hover { color: var(--blanco); }
.miga span { opacity: 0.5; }

/* ─── TARJETA DE SERVICIO ───────────────────────────────────
   Cada tarjeta lleva su propio color en la variable --c        */
.servicio {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  overflow: hidden;
  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);
}
/* Barra de color superior, siempre visible */
.servicio::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 5px;
  background: var(--c);
}
.servicio:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: var(--c);
}

.servicio__cabeza {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.servicio__icono {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--c-claro);
  color: var(--c-texto, var(--c)); /* el cian de TNGS no se ve sobre su fondo claro */
  display: grid; place-items: center;
  flex-shrink: 0;
}
.servicio__icono svg { width: 27px; height: 27px; }

.servicio__lugar {
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tenue);
  text-align: right;
  line-height: 1.4;
}

.servicio__titulo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-xl);
  color: var(--tinta);
  margin-bottom: var(--s-3);
}
.servicio__texto {
  font-size: var(--t-sm);
  color: var(--suave);
  margin-bottom: var(--s-5);
  flex-grow: 1;
}
.servicio__pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--borde-suave);
}
.servicio__precio {
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 400;
  /* El ámbar de Campus daba 2,56:1 aquí y el mínimo para texto grande es 3. */
  color: var(--c-texto, var(--c));
  line-height: 1;
}
.servicio__precio small {
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 500;
  color: var(--tenue);
}
.servicio__etiq {
  display: inline-block;
  padding: 0.34rem 0.85rem;
  border-radius: var(--r-full);
  background: var(--c-claro);
  /* Color sobre su propio fondo claro: es el caso con MENOS margen de toda
     la web. Con `--c` fallaban cuatro de los cinco servicios. */
  color: var(--c-texto, var(--c));
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.06em;
}
.servicio__flecha {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  /* ⚠️ `--c-texto`, NO `--c`: a 0,68rem el color de marca no llega al 4,5:1
     que hace falta para leer. El de marca se queda en bordes y fondos. */
  color: var(--c-texto, var(--c));
  transition: gap var(--dur) var(--ease);
  white-space: nowrap;
}
.servicio:hover .servicio__flecha { gap: 0.75rem; }

/* ⚠️ Estaba al 0.6 y eso apagaba TODO el texto de la tarjeta, no solo la
   etiqueta: el «Próximamente» se quedaba en 4,28:1 sobre el beige. La señal
   de «aún no» la da la etiqueta gris, no el apagón. 0.82 es el mismo valor
   que ya usan los packs de /clubes. */
/* 13 oct 2026: la opacidad .82 aclaraba también el texto y no llegaba a 4,5:1
   (axe en la portada). Ahora solo se apaga la imagen; el texto queda legible. */
.servicio--proximamente { pointer-events: none; }
.servicio--proximamente img { opacity: 0.82; }

/* ─── TARJETA DE PLAN / TARIFA ──────────────────────────────── */
.plan {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--blanco);
  border: 2px solid var(--borde-suave);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease);
}
.plan:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--verde-claro); }
.plan--destacado {
  border-color: var(--marino);
  box-shadow: var(--sh-md);
}
.plan__cinta {
  position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 1rem;
  border-radius: var(--r-full);
  background: var(--marino);
  color: var(--blanco);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.plan__nombre {
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 400;
  color: var(--tinta);
  margin-bottom: var(--s-1);
}
.plan__detalle { font-size: var(--t-sm); color: var(--suave); margin-bottom: var(--s-5); }
.plan__precio {
  font-family: var(--font-display);
  font-size: 3rem; font-weight: 400;
  color: var(--tinta);
  line-height: 1;
  margin-bottom: var(--s-5);
  /* Cifras de ancho fijo: sin esto, el 39 €, el 20 € y el 49 € de los tres
     packs no quedan alineados entre columnas, porque el 1 es más estrecho
     que el resto de dígitos. En una tabla de precios se nota. */
  font-variant-numeric: tabular-nums;
}
.plan__precio span { font-size: var(--t-base); font-family: var(--font-body); color: var(--tenue); font-weight: 600; }
.plan__lista { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); flex-grow: 1; }
.plan__lista li {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--texto-medio);
}
.plan__lista li::before {
  content: '✓';
  color: var(--verde-claro);
  font-weight: 800;
  flex-shrink: 0;
}

/* ─── FOOTER ────────────────────────────────────────────────── */
.footer {
  background: var(--tinta);
  color: rgba(255, 255, 255, 0.68);
  padding-top: var(--s-10);
  font-size: var(--t-sm);
}
/* 🔴 2 oct 2026: el pie salía en UNA columna también en ordenador.
   `1.6fr repeat(auto-fit, …)` es CSS no válido —una repetición automática no
   se puede mezclar con pistas flexibles (fr)— y el navegador tiraba la línea
   entera sin avisar. Ahora: 4 columnas en ordenador, 2 en tableta, 1 en móvil. */
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-7);
  padding-bottom: var(--s-8);
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__marca { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
}
.footer__marca { max-width: 320px; }
.footer__marca .logo__nombre { color: var(--blanco); }
.footer__marca .logo__sub    { color: rgba(255, 255, 255, 0.62); }
.footer__desc { margin-top: var(--s-4); line-height: 1.7; }

.footer__titulo {
  font-size: var(--t-xs); font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62); /* era .42: 3,6:1, no llegaba */
  margin-bottom: var(--s-4);
}
.footer__lista { display: grid; gap: var(--s-3); }
.footer__lista a { transition: color var(--dur-fast) var(--ease); }
.footer__lista a:hover { color: var(--blanco); }

.footer__base {
  padding-block: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s-4);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.62); /* era .45 */
}

/* Marca de formación en el pie: escudo pequeño + texto, en una sola línea.
   El escudo va a 22 px porque el original es un círculo con letra fina: por
   debajo de 20 px «SPORTS ACADEMY VALENCIA» deja de leerse y se ve sucio. */
.footer__marca-form {
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.footer__marca-form img {
  height: 22px; width: 22px; flex: none;
  /* El escudo es cian sobre azul marino; sobre el pie negro el marino se
     confunde con el fondo, así que se le da un pelo de luz por detrás. */
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}
.footer__marca-form strong { color: rgba(255, 255, 255, 0.75); font-weight: 600; }

/* ─── WHATSAPP FLOTANTE ─────────────────────────────────────── */
.wa-flotante {
  position: fixed;
  right: var(--s-5); bottom: var(--s-5);
  z-index: var(--z-sticky);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.42);
  transition: transform var(--dur) var(--ease-out);
}
.wa-flotante:hover { transform: scale(1.09) translateY(-2px); }
.wa-flotante svg { width: 30px; height: 30px; fill: #fff; }
@media (max-width: 640px) {
  .wa-flotante { right: var(--s-4); bottom: var(--s-4); width: 52px; height: 52px; }
}

/* ─── CTA FINAL ─────────────────────────────────────────────── */
.cta-final {
  position: relative;
  background: var(--tinta);
  color: var(--blanco);
  text-align: center;
  padding-block: var(--s-11);
}
.cta-final h2 { margin-bottom: var(--s-4); }
.cta-final p { color: rgba(255, 255, 255, 0.8); max-width: 56ch; margin: 0 auto var(--s-7); }

/* ═══════════════════════════════════════════════════════════════
   MARCA TNGS ACADEMY EN LAS PÁGINAS DE FORMACIÓN — 18 sep 2026
   Quién da la cara lo decide QUIÉN PAGA (ver `marcaDe()` en data.js):
   familia → TNGS. Por eso esto sale en Tecnificación, Acompañamiento,
   Extraescolares y Campus, y NO en Campo F-8 ni CD Sorolla.
   ⚠️ Nunca dos escudos al mismo nivel: el de LOALVIC manda en la
      cabecera de navegación y este acompaña dentro de la página.
   El escudo usado es `tngs-escudo-mono.png`: el mismo arte, pero en
   BLANCO sobre transparente. Se generó desde `tngs-escudo.png`
   convirtiendo el cian en blanco y el marino en transparencia, porque
   el original es cian sobre marino y sobre el azul de la cabecera el
   marino se empasta y no se lee.
   ═══════════════════════════════════════════════════════════════ */

/* El texto de la cabecera SIEMPRE por encima de la marca de agua.
   Sin esto, en las cabeceras con vídeo el velo (::after, z-index -1)
   taparía el escudo y en las de degradado el escudo taparía el
   titular. Con el escudo en 0 y el contenido en 1 funcionan las dos. */
.hero-pagina > .contenedor { position: relative; z-index: 1; }

/* ─── Marca de agua ─────────────────────────────────────────────
   🐛 18 sep 2026, EL MISMO DÍA: la primera versión colgaba el navegador.
   Llevaba un giro `infinite` de 140 s sobre una imagen enorme Y un
   `backdrop-filter: blur()` en el sello, dentro del mismo contexto de
   apilamiento. El desenfoque tiene que recalcularse en CADA fotograma
   porque debajo hay algo moviéndose: el resultado es un repintado
   permanente a pantalla completa. La pestaña se quedaba sin responder.

   Lo que se aprende, y vale para lo que venga (vídeos, más movimiento):
   ⚠️ NUNCA un `backdrop-filter` encima de algo que se mueve sin parar.
   ⚠️ Una animación `infinite` no para jamás: cuesta batería y CPU para
      siempre. Si el movimiento se puede hacer UNA vez al entrar, se hace
      una vez. Aquí, además, 140 s por vuelta no lo veía nadie.
   Ahora: el escudo entra girando un poco y se queda quieto. Cuando la
   animación termina, el coste es CERO.                                 */
.hero-escudo {
  position: absolute;
  top: 50%;
  right: -8%;
  width: min(44rem, 58%);
  aspect-ratio: 1 / 1;
  height: auto;
  z-index: 0;
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
  transform: translateY(-50%);
  transform-origin: 50% 50%;
}
/* Sobre vídeo hay mucho ruido detrás: el mismo 9 % se convierte en
   suciedad. Se baja y se separa del texto. */
.hero-pagina--video .hero-escudo { opacity: 0.06; right: -12%; }

/* Entrada: una sola vez, y se acaba. `forwards` deja el estado final. */
html.js .hero-escudo {
  opacity: 0;
  animation: tngs-entra 1.6s var(--ease-out) 0.2s forwards;
}
html.js .hero-pagina--video .hero-escudo { animation-name: tngs-entra-video; }

@keyframes tngs-entra {
  from { opacity: 0;    transform: translateY(-50%) rotate(-14deg) scale(1.06); }
  to   { opacity: 0.09; transform: translateY(-50%) rotate(0deg)   scale(1); }
}
@keyframes tngs-entra-video {
  from { opacity: 0;    transform: translateY(-50%) rotate(-14deg) scale(1.06); }
  to   { opacity: 0.06; transform: translateY(-50%) rotate(0deg)   scale(1); }
}

/* En móvil el titular ocupa el ancho entero: el escudo se sube a la
   esquina, más pequeño y más tenue, para no leerse por detrás.
   Ahí no se anima: los móviles son los que peor llevan el repintado. */
@media (max-width: 900px) {
  .hero-escudo,
  html.js .hero-escudo {
    top: -6%;
    right: -22%;
    width: 78%;
    opacity: 0.07;
    transform: none;
    animation: none;
  }
  .hero-pagina--video .hero-escudo,
  html.js .hero-pagina--video .hero-escudo { opacity: 0.05; }
}

/* ─── Sello «TNGS ACADEMY» ──────────────────────────────────────
   ⚠️ SIN `backdrop-filter`: ver el aviso de arriba. El fondo blanco al
      12 % sobre el azul de la cabecera se ve igual y no cuesta nada. */
.sello-tngs {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--s-3);
  padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  white-space: nowrap;
}
.sello-tngs img {
  width: 26px;
  height: 26px;
  display: block;
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .sello-tngs { font-size: 0.62rem; letter-spacing: 0.16em; padding-right: 0.75rem; }
  .sello-tngs img { width: 22px; height: 22px; }
}

/* Entrada suave, en la misma línea que `.revelar` del resto de la web */
html.js .sello-tngs {
  opacity: 0;
  transform: translateY(8px);
  animation: sello-entra 0.6s var(--ease-out) 0.15s forwards;
}
@keyframes sello-entra {
  to { opacity: 1; transform: none; }
}

/* Quien pide menos movimiento, no lo tiene: se pinta ya en su sitio. */
@media (prefers-reduced-motion: reduce) {
  html.js .hero-escudo  { opacity: 0.09; animation: none; }
  html.js .hero-pagina--video .hero-escudo { opacity: 0.06; }
  html.js .sello-tngs   { opacity: 1; transform: none; animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CABECERA CON LA IDENTIDAD DE TNGS — 20 sep 2026
   Decisión de Alejandro: los apartados que vende TNGS Academy llevan
   SU identidad, no la de LOALVIC. Cian `#03DAFD` + marino `#032349`.
   → `TNGS ACADEMY — Servicios Locales/_IDENTIDAD DE MARCA/`

   Se aplica a Tecnificación · Acompañamiento · Extraescolares · Campus.
   ❌ NO a Campo F-8 ni CD Sorolla: ahí paga una institución o el club
      tiene su escudo, y la cabecera se queda con el azul de LOALVIC.
      Es la misma regla de `marcaDe()` en data.js: quién paga manda.

   🛑 El cian NO se usa como texto sobre blanco (1,5:1 de contraste).
      Sobre el marino de la cabecera sí: ahí pasa de 10:1.
   ═══════════════════════════════════════════════════════════════ */
.hero-pagina--tngs {
  background: linear-gradient(155deg, #032349 0%, #0A4A78 100%);
}
/* El eyebrow pasa de blanco apagado a cian: es el único sitio donde el
   color de marca aparece como texto, y sobre marino se lee de sobra. */
.hero-pagina--tngs .eyebrow { color: #03DAFD; }

/* El velo de las cabeceras con vídeo también va en marino, si no el
   vídeo se queda con el tinte azul de LOALVIC por debajo. */
.hero-pagina--tngs.hero-pagina--video::after {
  background:
    linear-gradient(100deg,
      rgba(3, 35, 73, 0.90) 0%,
      rgba(3, 35, 73, 0.66) 42%,
      rgba(3, 35, 73, 0.32) 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.38), transparent 45%);
}

/* Filete cian de 3 px al pie de la cabecera: firma discreta de marca. */
.hero-pagina--tngs::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: #03DAFD;
  z-index: 2;
}

/* 2 oct 2026: en una rejilla, las tarjetas de una misma fila miden lo mismo.
   Iban envueltas en `.revelar` y cada una medía lo que su texto. */
.grid > .revelar > .tarjeta,
.grid > .revelar > .servicio { height: 100%; }