/* ═══════════════════════════════════════════════════════════════
   LOALVIC SPORTS — HERO CON MOVIMIENTO · CABECERA FLOTANTE
   Todo el movimiento se genera por código: no depende de imágenes.
   Cuando haya vídeo real, basta con activar el bloque .hero__video.
   ═══════════════════════════════════════════════════════════════ */

/* ─── CABECERA FLOTANTE ─────────────────────────────────────── */
/* Barra blanca sólida, siempre visible: separa con claridad del contenido */
.head {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--blanco);
  border-bottom: 1px solid var(--borde-suave);
  transition: box-shadow var(--dur) var(--ease);
}
.head.solido { box-shadow: 0 4px 20px rgba(11, 11, 12, 0.07); }

.head__barra {
  max-width: var(--ancho-max);
  margin-inline: auto;
  height: var(--header-h);
  padding-inline: var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
@media (max-width: 640px) { .head__barra { padding-inline: var(--s-4); } }

/* Logotipo */
.head__logo { display: flex; align-items: center; flex-shrink: 0; }
.head__logo img {
  height: 46px; width: auto;
  transition: height var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
@media (max-width: 640px) { .head__logo img { height: 38px; } }

/* Se intercambian según el fondo */
.head__logo .logo-claro  { display: none; }
.head__logo .logo-oscuro { display: block; }

/* Navegación
   ⚠️ Son 7 enlaces (los 6 servicios + Contacto); «Inicio» solo sale en el menú
   móvil porque el logotipo ya lleva a la portada. Medido en la web viva: la
   barra necesita ~1010 px con el logotipo y el botón «Contratar», por eso la
   hamburguesa entra a 1040 px y no a 940. Si se añade otro servicio hay que
   volver a medirlo, no dar por hecho que cabe. */
.head__nav { display: flex; align-items: center; gap: 0; }
.head__enlace {
  position: relative;
  padding: 0.55rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-medio);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.head__enlace::after {
  content: '';
  position: absolute;
  left: 0.6rem; right: 0.6rem; bottom: 0.3rem;
  height: 1px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.head__enlace:hover, .head__enlace.activo { color: var(--acento); }
.head__enlace:hover::after, .head__enlace.activo::after { transform: scaleX(1); }

.head__acciones { display: flex; align-items: center; gap: var(--s-3); }

/* Botón de la cabecera */
.head__cta {
  padding: 0.7rem 1.5rem;
  border-radius: var(--r-full);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: transparent;
  color: var(--tinta);
  box-shadow: inset 0 0 0 2px var(--tinta);
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.head__cta:hover {
  background: var(--acento); color: var(--blanco);
  box-shadow: inset 0 0 0 2px var(--acento);
}

/* Hamburguesa */
.head__burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
}
.head__burger span {
  display: block; width: 20px; height: 1.5px;
  background: var(--tinta);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.head__burger.abierta span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.head__burger.abierta span:nth-child(2) { opacity: 0; }
.head__burger.abierta span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* 1120 px, no 1040: al renombrar «Campo F8» a «Alquiler Campo F-8» el menú
   creció ~70 px. Medido en la web viva. Si se añade o alarga otra entrada,
   hay que volver a medirlo o la barra se desborda. */
@media (max-width: 1239px) {  /* 11 oct 2026: era 1120. Con «Clubes» van 9 enlaces y entre 1150 y 1200 px se salían de la pantalla. */
  .head__nav, .head__acciones .head__cta { display: none; }
  .head__burger { display: flex; margin-left: -10px; }
  /* Las tres rayas a la IZQUIERDA, del mismo lado por el que entra el menú
     (decidido por Alejandro el 2 oct). El logo queda justo a su derecha. */
  .head__acciones { order: -1; }
  .head__barra { justify-content: flex-start; gap: var(--s-2); }
}

/* ─── MENÚ: panel lateral que entra por la IZQUIERDA ─────────────
   <dialog> nativo creado por components.js → abrirMenu(). Sustituye al
   antiguo .menu-movil de pantalla completa (kit de estructura, oct 2026).
   📌 Por la izquierda en TODOS los tamaños, decidido por Alejandro el 2 oct
   (el kit lo sacaba desde abajo en móvil y por la derecha en ordenador).
   El botón Atrás del móvil lo cierra (history.pushState al abrir). */
dialog.hoja {
  border: 0; padding: 0; margin: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  background: transparent;
}
dialog.hoja::backdrop { background: rgba(11, 11, 12, 0.42); }
.hoja__panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(400px, 86vw);
  background: var(--blanco);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
  box-shadow: 24px 0 60px -28px rgba(11, 11, 12, 0.35);
  animation: hojaIzq var(--dur) var(--ease-out);
}
@keyframes hojaIzq { from { transform: translateX(-100%); } to { transform: none; } }
.hoja__cabeza {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-4) var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--borde-suave);
}
.hoja__logo img { height: 38px; width: auto; }
.hoja__logo .logo-claro { display: none; }
.hoja__cerrar {
  width: 44px; height: 44px; border-radius: var(--r-full);
  display: grid; place-items: center; color: var(--tinta);
  transition: background-color var(--dur-fast) var(--ease);
}
.hoja__cerrar:hover { background: var(--fondo-alt); }
.hoja__cerrar svg { width: 22px; height: 22px; }
.hoja__nav { flex: 1; overflow-y: auto; padding: var(--s-3) var(--s-5); }
.hoja__nav a {
  display: flex; align-items: center; min-height: 54px;
  border-bottom: 1px solid var(--borde-suave);
  font-family: var(--font-display); font-size: 1.45rem; text-transform: uppercase;
  color: var(--tinta);
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease-out);
}
.hoja__nav a:hover { color: var(--acento); padding-left: var(--s-2); }
.hoja__nav a[aria-current] { color: var(--acento); }
.hoja__pie {
  display: grid; gap: var(--s-3);
  padding: var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde-suave);
}

/* ─── BARRA INFERIOR (solo móvil) ──────────────────────────────
   4 accesos + «Más». WhatsApp es la acción principal: va en el acento y
   sustituye a la burbuja flotante, que en móvil se esconde. Se oculta al
   bajar leyendo (main.js → initHeader). */
.barra { display: none; }
@media (max-width: 760px) {
  .barra {
    display: flex; gap: 2px;
    position: fixed; left: 10px; right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 150;   /* encima del WhatsApp (100), debajo de la cabecera (200) y de los modales (1000) */
    padding: 6px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border: 1px solid var(--borde-suave);
    border-radius: var(--r-xl);
    box-shadow: 0 16px 40px -18px rgba(11, 11, 12, 0.35);
    transition: transform var(--dur) var(--ease-out);
  }
  .barra--oculta { transform: translateY(140%); }
  .barra a, .barra button {
    flex: 1; min-width: 0; min-height: 52px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border-radius: var(--r-lg);
    font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; line-height: 1.1;
    color: var(--texto-medio);
  }
  .barra svg { width: 22px; height: 22px; }
  .barra a[aria-current] { color: var(--acento); background: var(--acento-suave); }
  .barra .barra__dest { background: var(--acento); color: var(--blanco); }
  .barra .barra__dest svg { fill: currentColor; }
  .barra a:active, .barra button:active { transform: scale(0.96); }
  /* Que la barra no tape el final de la página ni el pie */
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .wa-flotante { display: none; }
}

body.sin-scroll { overflow: hidden; }

/* ─── HERO ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(88svh, 800px);
  display: flex;
  align-items: flex-end;
  padding-top: var(--s-9);
  padding-bottom: var(--s-8);
  background: var(--acento);
  color: var(--blanco);
  overflow: hidden;
  isolation: isolate;
}

/* Vídeo de fondo de la portada.
   El material está grabado en vertical con el móvil: a lo ancho `cover`
   recorta arriba y abajo y solo queda una banda del 30 % del alto original.
   El 28 % está medido, no elegido a ojo — es donde el jugador sale entero
   en los tres momentos del bucle. Si se cambia el vídeo, hay que remedirlo. */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;
  z-index: -3;
  opacity: 0.5;
}

/* Movimiento generado: dos halos que derivan lentamente */
.hero__luz {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -2;
  pointer-events: none;
  will-change: transform;
}
.hero__luz--1 {
  width: min(60vw, 720px); aspect-ratio: 1;
  top: -18%; right: -10%;
  background: radial-gradient(circle, rgba(44, 107, 255, 0.85) 0%, transparent 70%);
  animation: derivaA 22s ease-in-out infinite alternate;
}
.hero__luz--2 {
  width: min(48vw, 560px); aspect-ratio: 1;
  bottom: -22%; left: -12%;
  background: radial-gradient(circle, rgba(11, 11, 12, 0.30) 0%, transparent 70%);
  animation: derivaB 28s ease-in-out infinite alternate;
}
@keyframes derivaA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-7%, 9%, 0) scale(1.15); }
}
@keyframes derivaB {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9%, -7%, 0) scale(1.12); }
}

/* Retícula de campo, muy tenue, con desplazamiento lento */
.hero::before {
  content: '';
  position: absolute; inset: -10%;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.030) 1px, transparent 1px);
  background-size: 78px 78px;
  animation: reticula 40s linear infinite;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
}
@keyframes reticula {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(78px, 78px, 0); }
}

.hero__inner { position: relative; z-index: 2; width: 100%; }

/* Etiqueta superior, con el interletrado del logotipo */
.hero__marca {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-marca);
  text-transform: uppercase;
  color: var(--sobre-negro-tenue);
  margin-bottom: var(--s-6);
}

/* Titular: serif de alto contraste, entra línea a línea */
.hero__titulo {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: var(--s-6);
  max-width: 13ch;
}
.hero__titulo em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.42);
}

/* Cada línea se revela desde abajo.
   El padding superior evita que overflow:hidden corte las tildes. */
.linea { display: block; overflow: hidden; padding-top: 0.1em; }
.linea > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-out);
}
html:not(.js) .linea > span { transform: none; }
.hero.listo .linea > span { transform: none; }
.hero.listo .linea:nth-child(2) > span { transition-delay: 0.12s; }
.hero.listo .linea:nth-child(3) > span { transition-delay: 0.24s; }

.hero__texto {
  font-size: var(--t-lg);
  color: var(--sobre-negro);
  max-width: 52ch;
  margin-bottom: var(--s-7);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease-out) 0.45s, transform 0.9s var(--ease-out) 0.45s;
}
html:not(.js) .hero__texto { opacity: 1; transform: none; }
.hero.listo .hero__texto { opacity: 1; transform: none; }

.hero__acciones {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.9s var(--ease-out) 0.6s, transform 0.9s var(--ease-out) 0.6s;
}
html:not(.js) .hero__acciones { opacity: 1; transform: none; }
.hero.listo .hero__acciones { opacity: 1; transform: none; }

/* Cifras al pie del hero */
.hero__pie {
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--s-5);
  opacity: 0;
  transition: opacity 1s var(--ease-out) 0.8s;
}
html:not(.js) .hero__pie { opacity: 1; }
.hero.listo .hero__pie { opacity: 1; }

.cifra__n {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
}
.cifra__t {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sobre-negro-tenue);
  margin-top: var(--s-2);
}

/* Indicador de scroll */
.hero__scroll {
  position: absolute;
  bottom: var(--s-6); right: var(--s-6);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sobre-negro-tenue);
}
.hero__scroll::after {
  content: '';
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
  animation: bajar 2.2s ease-in-out infinite;
}
@keyframes bajar {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}
@media (max-width: 768px) { .hero__scroll { display: none; } }

/* ─── CINTA DESLIZANTE ──────────────────────────────────────── */
/* Cinta negra: corta el azul del hero y separa con contundencia */
.cinta {
  background: var(--tinta);
  color: var(--blanco);
  padding: var(--s-4) 0;
  overflow: hidden;
}
.cinta__pista {
  display: flex;
  width: max-content;
  animation: desliza 38s linear infinite;
}
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__grupo { display: flex; align-items: center; flex-shrink: 0; }
.cinta__item {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.7rem);
  font-weight: 400;
  padding-inline: var(--s-6);
  white-space: nowrap;
}
.cinta__sep {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--acento-vivo);
  flex-shrink: 0;
}
@keyframes desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__luz, .hero::before, .cinta__pista, .hero__scroll::after { animation: none !important; }
  .linea > span, .hero__texto, .hero__acciones, .hero__pie {
    transform: none !important; opacity: 1 !important;
  }
}

/* ─── 2 oct 2026 · legibilidad de la cabecera de portada ──────────
   El vídeo tiene zonas claras y el texto secundario iba al 42 % de blanco:
   la línea de marca de arriba, las etiquetas de las cifras y «y gestión
   deportiva» casi no se leían. Velo azul oscuro a la izquierda (donde está
   el texto) y textos secundarios al 82 %. El vídeo sigue viéndose a la
   derecha, que es donde está el jugador. */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(6, 26, 84, 0.62) 0%,
    rgba(6, 26, 84, 0.38) 45%,
    rgba(6, 26, 84, 0) 78%);
}
.hero__marca, .cifra__t, .hero__scroll { color: rgba(255, 255, 255, 0.82); }
.hero__titulo em { color: rgba(255, 255, 255, 0.70); }