/* ═══════════════════════════════════════════════════════════════
   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: 1120px) {
  .head__nav, .head__acciones .head__cta { display: none; }
  .head__burger { display: flex; }
}

/* Menú móvil */
.menu-movil {
  position: fixed; inset: 0;
  z-index: var(--z-sticky);
  background: var(--blanco);
  padding: calc(var(--header-h) + var(--s-6)) var(--s-5) var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-1);
  transform: translateY(-100%);
  transition: transform var(--dur) var(--ease-out);
  overflow-y: auto;
  visibility: hidden;
}
.menu-movil.abierto { transform: none; visibility: visible; }
.menu-movil__enlace {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--borde-suave);
  font-family: var(--font-display);
  font-size: 1.8rem; font-weight: 500;
  color: var(--tinta);
  transition: padding-left var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.menu-movil__enlace:hover { padding-left: var(--s-3); color: var(--acento); }
.menu-movil__pie { margin-top: auto; padding-top: var(--s-7); display: grid; gap: var(--s-3); }

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;
  }
}