/* ════════════════════════════════════════════════════════════════
   HostPlayers · PÁGINAS 2026 · unifica todas las páginas internas
   servidores-de-juegos · vps · dedicados · web-hosting · contacto
   Gaming look: glass + neón violeta/cyan + Barlow Condensed + glow
   ════════════════════════════════════════════════════════════════ */

:root{
  --p-v:#8b5cf6; --p-v2:#a855f7; --p-c:#22d3ee; --p-m:#ec4899; --p-lime:#a3e635;
  --p-ink:#f3f4ff; --p-mut:#8b93b8; --p-surf:rgba(20,22,42,.5); --p-line:rgba(139,92,246,.16);
}

/* ── HEROES de página (compactos, con espacio para navbar flotante) ── */
.games-hero,.vps-hero,.contact-hero{
  position:relative;text-align:center;padding:170px 20px 60px;overflow:hidden;
}
.games-hero::after,.vps-hero::after,.contact-hero::after{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(70%,800px);height:300px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(139,92,246,.18),transparent 70%);
  filter:blur(20px);z-index:-1;
}
.games-title,.vps-title,.contact-title,.vps-hero-title,
.section-title,.games-sub ~ .section-title{
  font-family:'Barlow Condensed',sans-serif !important;font-weight:800 !important;
  text-transform:uppercase;font-size:clamp(2.4rem,6vw,4.5rem) !important;line-height:.98 !important;
  letter-spacing:-.01em;margin-bottom:.3em !important;
  background:linear-gradient(115deg,#fff,var(--p-c) 45%,var(--p-v2) 70%,#fff) !important;
  background-size:220% auto !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  filter:drop-shadow(0 0 30px rgba(139,92,246,.3));
}
.games-sub,.vps-sub,.contact-sub,.vps-hero-desc,.section-sub{
  color:var(--p-mut) !important;font-size:1.05rem !important;line-height:1.6;
  max-width:640px;margin:0 auto 10px !important;
}
.section-title{ text-align:center; }
.section-sub{ text-align:center; margin-bottom:40px !important; }

/* ── PRICING CARDS (vps, dedicados, web-hosting) ── */
.pricing-section{padding:70px 0;position:relative}
.pricing-grid,.vps-grid-standard,.vps-grid-pro,.grid-3-desktop{gap:20px !important}
.pricing-card{
  position:relative;background:var(--p-surf) !important;backdrop-filter:blur(12px);
  border:1px solid var(--p-line) !important;border-radius:18px !important;
  padding:30px 26px !important;overflow:hidden;
  transition:transform .28s cubic-bezier(.22,1,.36,1),border-color .28s,box-shadow .28s !important;
}
.pricing-card:hover{transform:translateY(-8px);border-color:rgba(34,211,238,.45) !important;box-shadow:0 28px 65px -22px rgba(34,211,238,.5) !important}
.pricing-card.popular,.pricing-card:has(.badge-popular){
  border-color:var(--p-v) !important;
  box-shadow:0 0 0 1px var(--p-v),0 30px 70px -24px rgba(139,92,246,.6) !important;
}
.badge-popular,.vps-badge,.badge{
  display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.72rem;padding:5px 12px;border-radius:100px;
  background:linear-gradient(135deg,var(--p-v),var(--p-v2)) !important;color:#fff !important;
  box-shadow:0 6px 20px -6px rgba(139,92,246,.6);border:none !important;
}
.plan-name{font-family:'Barlow Condensed',sans-serif !important;font-weight:700 !important;text-transform:uppercase;font-size:1.4rem !important;color:#fff !important;letter-spacing:.02em}
.plan-price{
  font-family:'Barlow Condensed',sans-serif !important;font-weight:800 !important;
  font-size:2.6rem !important;line-height:1;margin:10px 0 !important;
  background:linear-gradient(135deg,var(--p-c),var(--p-v2)) !important;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 16px rgba(34,211,238,.4));
}
.plan-features{list-style:none !important;padding:0 !important;margin:18px 0 !important}
.plan-features li,.plan-item{
  color:var(--p-mut) !important;padding:8px 0 !important;border-bottom:1px dashed rgba(139,92,246,.1);
  display:flex;align-items:center;gap:10px;font-size:.92rem;
}
.plan-features li::before,.plan-item::before{content:'▹';color:var(--p-c);font-weight:700}
.btn-pricing{
  font-family:'Barlow Condensed',sans-serif !important;font-weight:700 !important;text-transform:uppercase;
  letter-spacing:.05em;width:100%;padding:13px !important;border-radius:10px !important;
  background:linear-gradient(135deg,var(--p-v),var(--p-v2)) !important;color:#fff !important;border:none !important;
  box-shadow:0 0 24px -8px rgba(139,92,246,.6) !important;transition:transform .15s,filter .2s !important;
}
.btn-pricing:hover{transform:translateY(-2px);filter:brightness(1.12)}

/* ── TOGGLE mensual/anual ── */
.vps-toggle,.filter-bar{display:inline-flex;gap:4px;padding:5px;border-radius:100px;background:rgba(255,255,255,.04);border:1px solid var(--p-line)}
.toggle-btn{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:9px 22px;border-radius:100px;border:0;background:transparent;color:var(--p-mut);cursor:pointer;transition:all .2s;
}
.toggle-btn.active{background:linear-gradient(135deg,var(--p-v),var(--p-v2));color:#fff;box-shadow:0 6px 18px -6px rgba(139,92,246,.6)}

/* ── FEATURE BOXES (vps, dedicados, web) ── */
.vps-feat-box,.dedi-feat-animate,.web-feat-animate{
  background:var(--p-surf) !important;backdrop-filter:blur(12px);
  border:1px solid var(--p-line) !important;border-radius:16px !important;padding:28px !important;
  transition:transform .25s,border-color .25s,box-shadow .25s !important;
}
.vps-feat-box:hover{transform:translateY(-6px);border-color:rgba(34,211,238,.4) !important;box-shadow:0 22px 55px -22px rgba(34,211,238,.5) !important}
.vps-feat-icon{
  width:56px;height:56px;display:grid;place-items:center;border-radius:14px;font-size:1.4rem;color:#fff;
  background:linear-gradient(135deg,var(--p-v),var(--p-c)) !important;
  box-shadow:0 8px 28px -8px rgba(139,92,246,.6);margin-bottom:16px;
}
.vps-feat-title{font-family:'Barlow Condensed',sans-serif !important;font-weight:700 !important;text-transform:uppercase;color:#fff !important;font-size:1.25rem !important}
.vps-feat-desc{color:var(--p-mut) !important;line-height:1.6;font-size:.92rem}

/* ── GAME CARDS (servidores-de-juegos) ── */
.games-grid{gap:18px !important}
.game-card{position:relative;border-radius:16px !important;overflow:hidden;border:1px solid var(--p-line) !important;background:#0b0d18 !important;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s !important}
.game-card:hover{transform:translateY(-8px);border-color:var(--p-v) !important;box-shadow:0 30px 70px -22px rgba(139,92,246,.6) !important}
.game-card-bg{transition:transform .5s,filter .4s;filter:saturate(.9) brightness(.7)}
.game-card:hover .game-card-bg{transform:scale(1.08);filter:saturate(1.2) brightness(.85)}
.game-card-overlay{background:linear-gradient(to top,rgba(11,13,24,.96) 8%,transparent) !important}
.game-title,.game-card-content h3{font-family:'Barlow Condensed',sans-serif !important;font-weight:700 !important;text-transform:uppercase;color:#fff !important}
.game-price{font-family:'Roboto Mono',monospace !important;color:var(--p-c) !important;text-shadow:0 0 14px rgba(34,211,238,.5)}
.gf-icon,.game-feature i{color:var(--p-v2) !important}
.gf-text,.game-feature{color:var(--p-mut) !important}
.btn-game-card{
  font-family:'Barlow Condensed',sans-serif !important;font-weight:700 !important;text-transform:uppercase;
  background:linear-gradient(135deg,var(--p-v),var(--p-v2)) !important;color:#fff !important;border:none !important;
  border-radius:9px !important;box-shadow:0 0 20px -8px rgba(139,92,246,.6) !important;
}

/* ── FAQ (común a todas) ── */
.faq-section{padding:70px 0;position:relative}
.faq-title{font-family:'Barlow Condensed',sans-serif !important;font-weight:800 !important;text-transform:uppercase;text-align:center;
  background:linear-gradient(115deg,#fff,var(--p-c),var(--p-v2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.faq-list{max-width:780px;margin:30px auto 0}
.faq-item{background:var(--p-surf) !important;border:1px solid var(--p-line) !important;border-radius:12px !important;margin-bottom:12px;overflow:hidden;transition:border-color .2s}
.faq-item:hover{border-color:rgba(139,92,246,.4) !important}
.faq-question{padding:18px 22px !important;font-weight:600;color:var(--p-ink) !important;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-icon{color:var(--p-c) !important;transition:transform .3s}
.faq-answer{color:var(--p-mut) !important;line-height:1.6}

/* ── CONTACTO · forms + cards ── */
.contact-card,.info-card{background:var(--p-surf) !important;backdrop-filter:blur(12px);border:1px solid var(--p-line) !important;border-radius:18px !important;padding:30px !important}
.contact-badge,.sla-badge{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;padding:5px 12px;border-radius:100px;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.3);color:var(--p-c)}
.form-control,.form-select,.form-select-dark{
  background:rgba(0,0,0,.4) !important;border:1px solid var(--p-line) !important;color:var(--p-ink) !important;
  border-radius:10px !important;padding:12px 14px !important;transition:border-color .2s,box-shadow .2s !important;
}
.form-control:focus,.form-select:focus{border-color:var(--p-v) !important;box-shadow:0 0 0 3px rgba(139,92,246,.18) !important;background:rgba(0,0,0,.5) !important;color:#fff !important}
.form-control::placeholder{color:#5b6488 !important}
.form-label,.filter-label{color:var(--p-mut) !important;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem}
.info-list li,.sla-row{color:var(--p-mut) !important;padding:8px 0;border-bottom:1px dashed rgba(139,92,246,.1)}
.card-title{font-family:'Barlow Condensed',sans-serif !important;font-weight:700 !important;text-transform:uppercase;color:#fff !important}
.alert-success{background:rgba(163,230,53,.1) !important;border:1px solid rgba(163,230,53,.3) !important;color:#bef264 !important;border-radius:10px !important}
.alert-danger{background:rgba(236,72,153,.1) !important;border:1px solid rgba(236,72,153,.3) !important;color:#f9a8d4 !important;border-radius:10px !important}
.btn-primary{
  background:linear-gradient(135deg,var(--p-v),var(--p-v2)) !important;border:none !important;color:#fff !important;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border-radius:10px !important;box-shadow:0 0 24px -8px rgba(139,92,246,.6) !important;
}

/* ── Beam neón superior de secciones ── */
.pricing-section::before,.faq-section::before,.games-section::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(70%,800px);height:1px;background:linear-gradient(90deg,transparent,var(--p-v),var(--p-c),transparent);opacity:.5;
}

/* ── Partículas viejas: atenuar (ya tenemos aurora) ── */
.particulas-servidores{opacity:.4}