/* ═══════════════════════════════════════════════════════════════
   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;
}
@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);
  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;
  color: 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: 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;
  color: var(--c);
  transition: gap var(--dur) var(--ease);
  white-space: nowrap;
}
.servicio:hover .servicio__flecha { gap: 0.75rem; }

.servicio--proximamente { opacity: 0.6; pointer-events: none; }

/* ─── 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);
}
.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);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-7);
  padding-bottom: var(--s-8);
}
.footer__marca { max-width: 320px; }
.footer__marca .logo__nombre { color: var(--blanco); }
.footer__marca .logo__sub    { color: rgba(255, 255, 255, 0.45); }
.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.42);
  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.45);
}

/* ─── 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); }