:root{
  --nav-h-desktop: 80px; --nav-h-mobile: 68px;
  --bg0:#050816; --bg1:#0a1023; --bg2:#111a39;
  --txt:#eaf2ff; --muted:#bcd0e6;
  --accent-red:#ff3b30; --accent-cyan:#23b6ff; --accent-indigo:#6b76ff; --green:#22c55e;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'Segoe UI',sans-serif;color:var(--txt)}

/* NAVBAR estable */
body.servicios-page{ padding-top: var(--nav-h-desktop); min-height:100vh; display:flex; flex-direction:column; }
@media(max-width:900px){ body.servicios-page{ padding-top: var(--nav-h-mobile) } }
.servicios-page .navbar{ position:fixed; top:0; left:0; right:0; z-index:1100; display:flex; justify-content:space-between; align-items:center; min-height:var(--nav-h-desktop); padding:10px 40px; background:#010717 }
@media(max-width:900px){ .servicios-page .navbar{ min-height:var(--nav-h-mobile); padding:10px 20px } }
.servicios-page .logo-container{ display:flex; align-items:center }
.servicios-page .logo-link{ display:flex; align-items:center; gap:10px; text-decoration:none }
.servicios-page .logo-img{ height:60px; width:auto; display:block }
@media(max-width:900px){ .servicios-page .logo-img{ height:48px } }
.servicios-page .logo-text{ color:#fff; font-size:24px; font-weight:700; line-height:1; white-space:nowrap }
@media(max-width:900px){ .servicios-page .logo-text{ font-size:20px } }
.servicios-page .nav-links{ list-style:none; display:flex; gap:60px; align-items:center }
@media(max-width:900px){ .servicios-page .nav-links{ gap:20px } }
.servicios-page .nav-links a{ color:#fff; text-decoration:none; font-weight:500; position:relative; transition:color .25s ease }
.servicios-page .nav-links a::after{ content:''; position:absolute; width:0%; height:2px; bottom:-4px; left:0; background:#fff; transition:width .25s ease }
.servicios-page .nav-links a:hover{ color:#ff0000 }
.servicios-page .nav-links a:hover::after{ width:100% }
.servicios-page .nav-links a.active{ color:#ff4d4d }

/* HERO fondo completo */
.hero{ position:relative; min-height:64vh; display:grid; place-items:center; isolation:isolate; background:
  radial-gradient(1200px 700px at 85% -10%, rgba(35,182,255,.10), transparent 60%),
  radial-gradient(900px 600px at 15% 10%, rgba(255,59,48,.10), transparent 55%),
  linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 60%); overflow:hidden }
.bg{ position:absolute; inset:0; z-index:0; pointer-events:none }
.orb{ position:absolute; width:38vmin; height:38vmin; filter: blur(36px); border-radius:50%; opacity:.35; animation: float 14s ease-in-out infinite; will-change: transform }
.orb-red{ background: radial-gradient(circle at 30% 30%, rgba(255,59,48,.55), transparent 60%); top:8%; left:6%; animation-delay:0s }
.orb-cyan{ background: radial-gradient(circle at 70% 40%, rgba(35,182,255,.55), transparent 55%); top:18%; right:8%; animation-delay:2s }
.orb-indigo{ background: radial-gradient(circle at 40% 60%, rgba(107,118,255,.55), transparent 60%); bottom:10%; left:22%; animation-delay:4s }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) translateX(6px) } }

.container{ width:min(1120px,92%); margin-inline:auto }
.hero-inner{ position:relative; z-index:1; text-align:center; padding: 40px 0 56px }
.title{ font-size:clamp(36px,6vw,56px); margin-bottom:8px }
.title .mc{ color:#23b6ff }
.subtitle{ color:#cfe1ff; font-size:clamp(16px,2.6vw,20px) }
.hero-icons{ display:flex; gap:12px; justify-content:center; margin-top:16px }
.icon{ width:28px; height:28px; display:inline-block; border-radius:8px }
.i-bedrock{ background:linear-gradient(135deg,#23b6ff,#6b76ff) }
.i-ddos{ background:linear-gradient(135deg,#ff7a59,#ff3b30) }
.i-ping{ background:linear-gradient(135deg,#22c55e,#16a34a) }
.i-backup{ background:linear-gradient(135deg,#6b76ff,#23b6ff) }
.i-panel{ background:linear-gradient(135deg,#d1d5db,#6b76ff) }

/* PLANES */
.plans{ padding:48px 0; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) }
.section-title{ text-align:center; margin-bottom:6px }
.section-subtitle{ text-align:center; color:#cfe1ff; margin-bottom:16px }
.plans-grid{ display:grid; grid-template-columns: repeat(1,1fr); gap:16px }
@media(min-width:980px){ .plans-grid{ grid-template-columns: repeat(3,1fr) } }
.plan{ background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:18px; box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.25) }
.plan.highlight{ outline:2px solid rgba(35,182,255,.35); box-shadow:0 0 24px rgba(35,182,255,.25) }
.plan-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px }
.p-icon{ width:36px; height:36px; border-radius:10px }
.i-mini{ background:linear-gradient(135deg,#22c55e,#16a34a) }
.i-comunidad{ background:linear-gradient(135deg,#23b6ff,#6b76ff) }
.i-clanes{ background:linear-gradient(135deg,#ff7a59,#ff3b30) }
.p-desc{ color:#bcd0e6 }
.p-features{ list-style:none; display:grid; gap:6px; margin:10px 0 12px }
.tick{ color:#7ee787; margin-right:6px }
.p-price{ margin:8px 0 6px }
.price-main{ font-size: 28px; font-weight:800 }
.currency{ opacity:.9 }
.per{ font-size:14px; color:#cfe1ff; margin-left:4px }
.note{ color:#bcd0e6 }
.p-cta{ margin-top:8px }

/* DIFERENCIADORES */
.why{ padding:48px 0 }
.why-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px }
@media(min-width:980px){ .why-grid{ grid-template-columns: repeat(4,1fr) } }
.why-item{ text-align:center; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:18px; transition: transform .2s ease }
.why-item:hover{ transform: translateY(-1px) }
.w-icon{ width:42px; height:42px; border-radius:12px; margin-inline:auto; margin-bottom:8px }
.i-setup{ background:linear-gradient(135deg,#ff7a59,#ff3b30) }
.i-cross{ background:linear-gradient(135deg,#23b6ff,#6b76ff) }
.i-secure{ background:linear-gradient(135deg,#22c55e,#16a34a) }
.i-support{ background:linear-gradient(135deg,#6b76ff,#23b6ff) }

/* FAQ */
.faq{ padding:48px 0; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) }
.faq-grid{ display:grid; grid-template-columns: repeat(1,1fr); gap:14px }
@media(min-width:980px){ .faq-grid{ grid-template-columns: repeat(3,1fr) } }
.qa{ background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:16px }

/* CTA */
.cta{ padding:48px 0; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) }
.cta-inner{ text-align:center }
.cta .btn{ margin:8px 6px }

/* BOTONES */
.btn{ appearance:none; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; padding:10px 14px; border-radius:12px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition: transform .18s ease, filter .18s ease }
.btn:hover{ filter:brightness(1.08); transform: translateY(-1px) }
.btn-ghost{ background:transparent }
.btn-primary{ background: linear-gradient(90deg,var(--accent-red),#ff7a59); border-color: transparent; box-shadow: 0 2px 22px rgba(255,59,48,.35) }

/* REVEAL */
.reveal-up{ opacity:0; transform:translateY(16px); animation:none }
.reveal-up.in-view{ animation: fadeUp .7s cubic-bezier(.2,.65,.3,1) forwards }
.reveal-up.delay-1{ animation-delay:.12s }
.reveal-up.delay-2{ animation-delay:.24s }
.reveal-up.delay-3{ animation-delay:.36s }
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0) } }

/* Sticky footer */
.footer{ margin-top:auto; display:flex; justify-content:center; align-items:center; gap:8px; padding:14px 16px; color:#c9d6ea; background:#020614; border-top:1px solid rgba(255,255,255,.08) }
.footer .link{ color:#dbe8ff; text-decoration:none; border-bottom:1px dashed rgba(219,232,255,.45) }
.footer .link:hover{ color:#fff; border-bottom-color: currentColor }

/* Fondo a todo el lienzo */
html, body { min-height:100%; background: var(--bg0) }
body.servicios-page{ background: linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 100%) no-repeat fixed; background-size: cover }

/* Reduced motion */
.reduce-motion *{ animation:none !important; transition:none !important }


/* === FIX PACK: grid sizing + highlight visibility + hover-driven scanline === */
/* 1) Make all cards equal height and stretched */
.plans-grid{ align-items: stretch; }
.plan{ position: relative; z-index: 0; display: flex; flex-direction: column; height: 100%; }
.plan .p-cta{ margin-top: auto; }

/* 2) Ensure highlighted (middle) plan sits above siblings and is visible */
.plan.highlight{ z-index: 1; }
.plan.highlight *{ position: relative; z-index: 1; }

/* 3) Scanline only animates when hovering the highlighted card */
.plan.highlight::before{
  /* remove conflicting width; rely on left/right */
  left: 12px; right: 12px; width: auto; height: 3px;
  transform: translate(-120%, -50%);
  animation: scanline-h 2.6s ease-in-out infinite;
  animation-play-state: paused; /* idle until hover */
}
.plan.highlight:hover::before{ animation-play-state: running; }

/* 4) Add explicit backgrounds so pseudo elements never hide content */
.plan, .why-item, .qa{ background-clip: padding-box; }

/* 5) Hover cursor animation cue (slightly stronger) */
.plan:hover, .why-item:hover, .qa:hover{
  filter: brightness(1.03);
}


/* === MINECRAFT BEDROCK: VERDE NEON + ANIMACIONES RECUADROS === */
/* 1) Texto "Minecraft Bedrock" (span .mc) en verde con efecto neón */
.title .mc{
  color: var(--green) !important; /* #22c55e */
  text-shadow:
    0 0 6px rgba(34,197,94,.65),
    0 0 14px rgba(34,197,94,.35);
  animation: neonTextGreen 3.2s ease-in-out infinite;
}
@keyframes neonTextGreen{
  0%,100%{ text-shadow: 0 0 6px rgba(34,197,94,.55), 0 0 14px rgba(34,197,94,.30); }
  50%    { text-shadow: 0 0 10px rgba(34,197,94,.80), 0 0 22px rgba(34,197,94,.55); }
}

/* 2) Ícono Bedrock del hero en verde con pulso neón */
.i-bedrock{
  background: linear-gradient(135deg,#22c55e,#16a34a) !important;
  box-shadow: 0 0 10px rgba(34,197,94,.55), 0 0 22px rgba(34,197,94,.35);
  animation: neonPulseGreen 2.8s ease-in-out infinite;
}
@keyframes neonPulseGreen{
  0%,100%{ box-shadow: 0 0 8px rgba(34,197,94,.45), 0 0 18px rgba(34,197,94,.25); }
  50%    { box-shadow: 0 0 16px rgba(34,197,94,.75), 0 0 32px rgba(34,197,94,.45); }
}

/* 3) Animaciones en los rectángulos (planes, diferenciales, FAQ) */
/* Animación ambiente del fondo (drift) */
.plan, .why-item, .qa{
  position: relative;
  overflow: hidden;
  background-size: 160% 160%;
  animation: bgDrift 12s ease-in-out infinite;
}
@keyframes bgDrift{
  0%,100%{ background-position: 0% 0%; }
  50%    { background-position: 100% 100%; }
}
/* Hover claro: lift + scale + leve brillo */
.plan:hover, .why-item:hover, .qa:hover{
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.03);
}
/* Destello diagonal en hover (shine) - no aplica al plan destacado si ya usas scanline */
.plan:not(.highlight)::after, .why-item::after, .qa::after{
  content:''; position:absolute; inset:-1px; border-radius:16px; pointer-events:none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
  transform: translateX(-120%);
}
.plan:not(.highlight):hover::after, .why-item:hover::after, .qa:hover::after{
  animation: shineSweep 1.1s ease forwards;
}
@keyframes shineSweep{ to{ transform: translateX(120%); } }
/* Micro‑rebote en el ícono del plan al pasar el cursor */
.plan:hover .p-icon{ animation: iconBob .7s ease; }
@keyframes iconBob{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-3px) } }

/* Respeto a prefers-reduced-motion */
.reduce-motion *{ animation: none !important; transition: none !important; }


/* === EXTRA ANIM: Comunidad (highlight) sweep + layering === */
/* Coloca el scanline por encima y el shine por debajo del contenido */
.plan.highlight{ position: relative; }
.plan.highlight *{ position: relative; z-index: 3; }
.plan.highlight::before{ z-index: 2; }

/* Barrido (shine) solo para el destacado al hover, sin quitar el scanline */
.plan.highlight:hover::after{
  content: '';
  position: absolute; inset: -1px; border-radius: 16px; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,59,48,.16) 50%, transparent 70%);
  transform: translateX(-120%);
  z-index: 1;
  animation: shineSweep 1.1s ease forwards;
}