/* ════════════════════════════════════════════════════════════
   HostPlayers · tech-fx · efectos modernos estilo Aceternity
   Aurora bg · grid · spotlight · gradient text · glow · glass
   Vanilla CSS · se aplica sobre las clases existentes
   ════════════════════════════════════════════════════════════ */

/* ── Fondo global: aurora animada + grid tech ── */
.hpfx-aurora {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
  background: var(--bg-darker, #030712);
}
.hpfx-aurora::before {
  content: ''; position: absolute; inset: -40%;
  background:
    radial-gradient(ellipse 50% 45% at 20% 15%, rgba(37,99,235,.28), transparent 60%),
    radial-gradient(ellipse 45% 40% at 85% 25%, rgba(123,207,255,.18), transparent 60%),
    radial-gradient(ellipse 55% 50% at 60% 90%, rgba(99,60,220,.20), transparent 65%);
  filter: blur(40px);
  animation: hpfxAurora 22s ease-in-out infinite alternate;
}
@keyframes hpfxAurora {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1.05); }
  50%  { transform: translate3d(4%, 3%, 0) rotate(8deg) scale(1.15); }
  100% { transform: translate3d(-2%, 4%, 0) rotate(-6deg) scale(1.08); }
}
.hpfx-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(123,207,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(123,207,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask: radial-gradient(ellipse 90% 70% at 50% 30%, #000 40%, transparent 85%);
  -webkit-mask: radial-gradient(ellipse 90% 70% at 50% 30%, #000 40%, transparent 85%);
}

/* ── Spotlight que sigue el cursor en el hero ── */
.hero { position: relative; overflow: hidden; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(600px circle at var(--hpfx-mx, 50%) var(--hpfx-my, 30%), rgba(37,99,235,.15), transparent 45%);
  transition: background .15s ease;
}
.hero > * { position: relative; z-index: 1; }

/* ── Gradient text animado en titulares ── */
.hero-title, .section-title, h1.hero-title {
  background: linear-gradient(110deg, #e8eaf6 20%, #7bcfff 45%, #2563eb 60%, #e8eaf6 80%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: hpfxShine 6s linear infinite;
}
@keyframes hpfxShine { to { background-position: 220% center; } }

/* ── Botón primary: shimmer + glow ── */
.btn-primary {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border: 1px solid rgba(123,207,255,.4) !important;
  box-shadow: 0 0 0 rgba(37,99,235,0); transition: box-shadow .25s, transform .15s !important;
}
.btn-primary:hover {
  box-shadow: 0 8px 30px -6px rgba(37,99,235,.6), 0 0 0 1px rgba(123,207,255,.6) !important;
  transform: translateY(-2px);
}
.btn-primary::before {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.btn-primary:hover::before { left: 140%; }

.btn-outline-light {
  border: 1px solid rgba(123,207,255,.35) !important; backdrop-filter: blur(8px);
  transition: border-color .2s, box-shadow .2s, transform .15s !important;
}
.btn-outline-light:hover {
  border-color: rgba(123,207,255,.8) !important;
  box-shadow: 0 0 24px -8px rgba(123,207,255,.5) !important; transform: translateY(-2px);
}

/* ── Cards: glass + glow border en hover (stat-box, game cards, plan cards) ── */
.stat-box, .game-card, .plan-card, .card, .feature-card {
  position: relative;
  background: linear-gradient(160deg, rgba(12,21,48,.7), rgba(6,12,26,.55)) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(123,207,255,.10) !important;
  border-radius: 12px !important;
  transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s !important;
}
.stat-box:hover, .game-card:hover, .plan-card:hover, .feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(123,207,255,.4) !important;
  box-shadow: 0 18px 50px -16px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* ── Stat values con glow cyber ── */
.stat-value, .counter {
  text-shadow: 0 0 24px rgba(123,207,255,.45);
}

/* ── Navbar glassmorphism reforzado ── */
.navbar, nav.navbar, header .navbar {
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border-bottom: 1px solid rgba(123,207,255,.10) !important;
}

/* ── Reveal on scroll (complementa AOS) ── */
.hpfx-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.hpfx-reveal.is-in { opacity: 1; transform: none; }

/* ── Beam decorativo top de secciones ── */
.hpfx-beam {
  position: relative;
}
.hpfx-beam::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(80%, 900px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123,207,255,.6), transparent);
}

/* ── Scrollbar tech ── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #030712; }
::-webkit-scrollbar-thumb { background: linear-gradient(#2563eb, #1d4ed8); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #7bcfff; }

/* ── Selección ── */
::selection { background: rgba(37,99,235,.4); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .hpfx-aurora::before, .hero-title, .section-title { animation: none !important; }
}