/* ═══════════════════════════════════════════════════════════════
   LÍNEA PRO — el estilo de los vídeos de la app (14 oct 2026, sí de Alejandro 10:21)
   Fondo azul noche con rejilla en perspectiva y puntos de luz, brillo
   cian, titular Anton que entra escalando y dispositivos flotando.
   Solo para las páginas de la app (clubes, app, entrenadores).
   Todo el movimiento se apaga con prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* SOLO colores de la marca LOALVIC (tokens.css): negro tinta + azul.
     El cian es de TNGS Academy y no va en las páginas de la app. */
  --pro-noche: var(--tinta);        /* #0B0B0C */
  --pro-azul:  var(--acento-alto);  /* #0F3CAB, el resplandor de abajo */
  --pro-neon:  var(--acento-vivo);  /* #2C6BFF, rejilla, brillos y bordes */
  --pro-luz:   #A9C2FF;             /* azul LOALVIC aclarado para texto: 11,1:1 sobre negro */
  --pro-texto: #D6E0F5;             /* 14,8:1 sobre negro */
}

.hero-pro {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--blanco);
  background: radial-gradient(120% 90% at 70% 100%, var(--pro-azul) 0%, #08142F 38%, var(--pro-noche) 66%);
  padding: var(--s-9) 0 var(--s-11);
}
.hero-pro ::selection { background: var(--acento); color: #fff; }

/* Rejilla en perspectiva que avanza hacia el espectador */
.hero-pro__rejilla {
  position: absolute; inset: auto -50% -6% -50%; height: 62%; z-index: -2;
  background-image:
    linear-gradient(rgba(44, 107, 255, .38) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 107, 255, .38) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(62deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
          mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: pro-rejilla 2.8s linear infinite;
}
@keyframes pro-rejilla { to { background-position: 0 64px, 0 0; } }

/* Puntos de luz: dos capas a distinta velocidad */
.hero-pro__luces, .hero-pro__luces::after {
  position: absolute; inset: -20% 0 0 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 68%, var(--pro-luz) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 44%, var(--pro-luz) 50%, transparent 51%),
    radial-gradient(2px 2px at 90% 80%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 88%, #fff 50%, transparent 51%);
  background-size: 420px 420px;
  opacity: .55;
  animation: pro-luces 26s linear infinite;
}
.hero-pro__luces::after { content: ""; inset: 0; background-size: 260px 260px; opacity: .7; animation-duration: 16s; }
@keyframes pro-luces { to { transform: translateY(18%); } }

.hero-pro__grid {
  display: grid; gap: var(--s-10); align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}
@media (max-width: 960px) { .hero-pro__grid { grid-template-columns: 1fr; gap: var(--s-8); } }

.hero-pro .miga, .hero-pro .miga a { color: rgba(214, 224, 245, .8); }
.hero-pro h1 {
  font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.6rem, 6.2vw, 5.4rem); line-height: .98; letter-spacing: .005em;
  color: #fff; margin: var(--s-4) 0 var(--s-5);
  text-shadow: 0 0 22px rgba(44, 107, 255, .55), 0 0 2px rgba(44, 107, 255, .9);
}
/* El momento autoral: el titular entra escalando, como en los vídeos */
.hero-pro h1 span { display: block; animation: pro-entra .9s cubic-bezier(.16, 1, .3, 1) both; }
.hero-pro h1 span:nth-child(2) { animation-delay: .18s; }
@keyframes pro-entra { from { opacity: 0; transform: scale(1.35); filter: blur(10px); } }

.hero-pro__lead { color: var(--pro-texto); font-size: var(--t-lg, 1.15rem); line-height: 1.6; max-width: 34em; }
.hero-pro__lead b { color: var(--pro-luz); font-weight: 600; }

.hero-pro__chips { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.hero-pro__chips li {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .5em 1em; border-radius: 999px; font-size: var(--t-sm);
  color: var(--pro-texto); background: rgba(15, 60, 171, .28);
  border: 1px solid rgba(44, 107, 255, .45);
}
.hero-pro__chips li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pro-neon); box-shadow: 0 0 8px var(--pro-neon); }

.hero-pro .btn--oro { background: var(--acento); color: #fff; box-shadow: 0 10px 30px -8px rgba(44, 107, 255, .7); }
.hero-pro .btn--oro:hover { background: var(--acento-vivo); }
.hero-pro .btn--linea-claro { border-color: rgba(44, 107, 255, .6); color: #fff; }
.hero-pro .btn:focus-visible { outline: 2px solid var(--pro-luz); outline-offset: 3px; }

/* Dispositivos flotando con borde de luz */
.hero-pro__dispositivos { position: relative; min-height: 380px; }
.pro-portatil {
  position: relative; width: 100%; max-width: 560px; margin-left: auto;
  padding: 12px 12px 0; border-radius: 18px 18px 6px 6px;
  background: #12141C; border: 2px solid rgba(169, 194, 255, .85);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 40px -6px rgba(44, 107, 255, .55);
  animation: pro-flota 7s ease-in-out infinite;
}
.pro-portatil img { display: block; width: 100%; height: auto; border-radius: 8px 8px 0 0; }
.pro-portatil::after {   /* la base */
  content: ""; position: absolute; left: -6%; right: -6%; bottom: -16px; height: 16px;
  background: linear-gradient(#9AA3BA, #6E7891); border-radius: 0 0 14px 14px;
}
.pro-movil {
  position: absolute; left: 0; bottom: -28px; width: 32%; max-width: 190px;
  padding: 7px; border-radius: 26px; background: #12141C;
  border: 2px solid rgba(169, 194, 255, .9);
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .8), 0 0 34px -4px rgba(44, 107, 255, .6);
  animation: pro-flota 7s ease-in-out infinite reverse;
}
.pro-movil img { display: block; width: 100%; height: auto; border-radius: 20px; }
@keyframes pro-flota { 50% { transform: translateY(-12px); } }
@media (max-width: 960px) { .hero-pro__dispositivos { min-height: 0; padding-bottom: 30px; } .pro-movil { width: 30%; } }

/* Sección de vídeo en movimiento */
.seccion-pro { background: var(--pro-noche); color: var(--pro-texto); position: relative; overflow: hidden; }
.seccion-pro h2 { color: #fff; margin-bottom: var(--s-5); text-shadow: 0 0 18px rgba(44, 107, 255, .4); }
.pro-video {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--s-10); align-items: center;
}
@media (max-width: 860px) { .pro-video { grid-template-columns: 1fr; } }
.pro-video__marco {
  position: relative; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(44, 107, 255, .5);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .8), 0 0 50px -10px rgba(44, 107, 255, .45);
}
.pro-video__marco video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; background: var(--pro-noche); }
.pro-video__boton {
  position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(4, 10, 28, .7); border: 1px solid rgba(44, 107, 255, .7); color: #fff;
}
.pro-video__boton svg { width: 18px; height: 18px; }
.pro-video__boton:focus-visible { outline: 2px solid var(--pro-luz); outline-offset: 2px; }
.pro-video__texto p { line-height: 1.7; max-width: 38em; }
.pro-video__texto p + p { margin-top: var(--s-4); color: #fff; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .hero-pro__rejilla, .hero-pro__luces, .hero-pro__luces::after,
  .hero-pro h1 span, .pro-portatil, .pro-movil { animation: none; }
}

/* Variante sin dispositivos (páginas de formulario: contratar) */
.hero-pro--simple { padding-bottom: var(--s-10); }
.hero-pro--simple .hero-pro__grid { grid-template-columns: 1fr; }
.hero-pro--simple h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.hero-pro .eyebrow { color: var(--pro-luz); }