/* ════════════════════════════════════════════════════════════════
   HostPlayers · degradado multicolor ANIMADO y fluido (loop perfecto)
   ════════════════════════════════════════════════════════════════ */
@keyframes hpGradFlow { to { background-position: 200% center; } }

.hp-brand, .footer-brand,
.hp-h1 em, .hp-h2.grad, .hp .grad,
.hpgl-h1, .hpgl-faq-h,
.hpp-h1, .hpp-faq-h,
.hpc-h1, .hpw-h1,
.gs-title, .gs-section-title,
.games-title, .vps-title, .contact-title, .vps-hero-title, .section-title, .faq-title,
.hpd-hello span,
.hpa-h1, .hpa-logo, .hpa-claim em,
.auth-title,
.hero-title {
  background-image: linear-gradient(100deg,
      #ffffff 0%, #22d3ee 14%, #818cf8 28%, #a855f7 42%, #ec4899 50%,
      #a855f7 58%, #818cf8 72%, #22d3ee 86%, #ffffff 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: hpGradFlow 6s linear infinite !important;
  filter: drop-shadow(0 0 22px rgba(139,92,246,.35));
}

/* Título principal del hero (TU SERVIDOR DE JUEGOS…) en BLANCO sólido */
.hp-h1 {
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  animation: none !important;
  filter: none !important;
}
/* …pero "HOSTPLAYERS" (el em) mantiene el degradado animado */
.hp-h1 em { animation-duration: 7s !important; }

/* títulos grandes un punto más lentos = más premium */
.hpgl-h1, .hpp-h1, .hpc-h1, .hpw-h1, .gs-title, .hpd-hello span { animation-duration: 8s !important; }
/* logo: rápido y vivo */
.hp-brand, .footer-brand, .hpa-logo { animation-duration: 4.5s !important; filter: drop-shadow(0 0 10px rgba(34,211,238,.5)) !important; }

@media (prefers-reduced-motion: reduce) {
  .hp-brand,.footer-brand,[class*="-h1"],[class*="title"],.grad,.hpd-hello span { animation: none !important; }
}

/* ── Ocultar los kickers/eyebrows tipo "GAME SERVER HOSTING" en todas las páginas ── */
.hp-eyebrow,
.hpgl-kicker,
.hpp-kicker,
.hpc-kicker,
.hpw-kicker,
.hpd-eyebrow,
.gs-badge,
.vps-badge,
.contact-badge,
.games-hero .hpgl-kicker {
  display: none !important;
}

/* ── Botones del hero · estilo moderno (pill + flecha animada + glow sutil) ── */
.hp-btn{
  border-radius: 100px !important;
  padding: 15px 30px !important;
  font-size: 1rem !important;
  letter-spacing: .05em !important;
  display: inline-flex !important; align-items: center; gap: 9px;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .3s, background .3s, border-color .3s !important;
}
.hp-btn i, .hp-btn svg { transition: transform .25s ease; }
.hp-btn:hover i, .hp-btn:hover svg { transform: translateX(4px); }

.hp-btn-main{
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 10px 32px -10px rgba(139,92,246,.65), inset 0 1px 0 rgba(255,255,255,.18) !important;
  color: #fff !important;
}
.hp-btn-main:hover{
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 16px 46px -10px rgba(139,92,246,.8), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.hp-btn-ghost{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #eef0ff !important;
  backdrop-filter: blur(10px);
  box-shadow: none !important;
}
.hp-btn-ghost:hover{
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(34,211,238,.55) !important;
  color: #fff !important;
  transform: translateY(-3px);
}