.vnet-exitlag {
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
  overflow: clip;
  background: #330076;
}
.vnet-exitlag-page #cxone-guide-container {
  display: none !important;
}
@media (max-width: 1024px) {
  .vnet-exitlag-page .mobile-site-header,
  .vnet-exitlag-page .mobile-site-header.hide-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
@media (min-width: 1025px) and (max-width: 1299px) {
  .vnet-exitlag-page .site-header .hfe-nav-menu__layout-horizontal {
    flex-wrap: nowrap !important;
  }
  .vnet-exitlag-page .site-header .menu-item > a.hfe-menu-item {
    padding-right: 4px !important;
    padding-left: 4px !important;
    font-size: 14px !important;
  }
}
body.page-id-19932 .vnet-exitlag { margin-top: -80px; }
.vnet-exitlag #como-funciona,
.vnet-exitlag #contenido { scroll-margin-top: 112px; }

@scope (.vnet-exitlag) {
/* ==========================================================================
   ExitLag · Vnet — Landing
   Paleta: --vnet-purple, --vnet-neon, --white (+ transparencias y mezclas
   entre ellos) y --vnet-aqua solo como detalle puntual. Todos los tonos derivados se construyen con color-mix()
   a partir de estas tres variables; no hay ningún otro color en este archivo.
   ========================================================================== */

:scope {
  /* --- Los 3 colores de marca --- */
  --vnet-purple: #440099;
  --vnet-page-purple: #330076;
  --vnet-neon:   #CC04FF;
  --white:       #FFFFFF;
  /* Secundario de la marca Vnet (PANTONE 14-5125 TCX Aqua Wash): solo detalles puntuales,
     p. ej. los números de los pasos de activación. Sobre morado da 10:1 de contraste. */
  --vnet-aqua:   #8FFCF9;

  /* --- Degradado firma y glow --- */
  --gradient-firma: linear-gradient(135deg, var(--vnet-purple) 0%, var(--vnet-neon) 100%);
  --glow: 0 0 24px color-mix(in srgb, var(--vnet-neon) 55%, transparent);
  --glow-soft: 0 0 16px color-mix(in srgb, var(--vnet-neon) 35%, transparent);

  /* --- Derivados (mezclas de los 3 colores) --- */
  /* Neón aclarado con blanco: texto neón sobre fondo morado con contraste AA (≈4.8:1).
     El neón puro sobre #440099 solo da 2.9:1, por eso no se usa como texto allí. */
  --neon-on-purple: color-mix(in srgb, var(--vnet-neon) 55%, var(--white));
  /* Morado atenuado para texto secundario sobre blanco (≈6.8:1) */
  --purple-muted: color-mix(in srgb, var(--vnet-purple) 75%, var(--white));
  --purple-70: color-mix(in srgb, var(--vnet-purple) 70%, transparent);
  --purple-85: color-mix(in srgb, var(--vnet-purple) 85%, transparent);
  --purple-12: color-mix(in srgb, var(--vnet-purple) 12%, transparent);
  --purple-6:  color-mix(in srgb, var(--vnet-purple) 6%, transparent);
  --purple-3:  color-mix(in srgb, var(--vnet-purple) 3%, transparent);
  --neon-30: color-mix(in srgb, var(--vnet-neon) 30%, transparent);
  --neon-12: color-mix(in srgb, var(--vnet-neon) 12%, transparent);
  --neon-40: color-mix(in srgb, var(--vnet-neon) 40%, transparent);
  /* Neón profundo (70% neón + 30% morado): fondo de etiquetas con texto blanco pequeño (5.8:1, AA) */
  --neon-deep: color-mix(in srgb, var(--vnet-neon) 70%, var(--vnet-purple));
  --white-30: color-mix(in srgb, var(--white) 30%, transparent);
  --white-15: color-mix(in srgb, var(--white) 15%, transparent);
  --white-80: color-mix(in srgb, var(--white) 80%, transparent);
  --white-20: color-mix(in srgb, var(--white) 20%, transparent);
  --white-10: color-mix(in srgb, var(--white) 10%, transparent);
  --white-5:  color-mix(in srgb, var(--white) 5%, transparent);

  /* --- Tipografía y medidas --- */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Escala tipográfica alineada con /plan-residencial/ (H1 35px/800, H2 35px, cuerpo 15px) */
  --fs-display: clamp(2.25rem, 4.6vw, 3.5rem);   /* hero y CTA final: algo mayor que 35px para mantener jerarquía */
  --fs-title: clamp(1.75rem, 3vw, 2.1875rem);    /* 28px → 35px */
  --radius: 1rem;            /* rounded-2xl */
  --radius-lg: 1.5rem;
  --nav-h: 72px;
  --container: 1200px;
  --gutter: 1rem;            /* 16px en móvil */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 2.5rem; }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
:scope { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); -webkit-text-size-adjust: 100%; }
:scope {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: .9375rem;          /* 15px */
  line-height: 1.8;
  color: var(--white);
  background: var(--vnet-page-purple);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--vnet-neon); color: var(--white); }

:focus-visible { outline: 3px solid var(--vnet-neon); outline-offset: 3px; border-radius: 4px; }
.section--gradient :focus-visible, .hero :focus-visible, .btn--primary:focus-visible { outline-color: var(--white); }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }
/* Font Awesome de Elementor integrado como SVG: visible sin dependencias externas. */
.icon { fill: currentColor; stroke: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 100;
  padding: .75rem 1rem; border-radius: .5rem;
  background: var(--white); color: var(--vnet-purple); font-weight: 800; text-decoration: none;
  transform: translateY(-200%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { max-width: 860px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.section { position: relative; padding-block: clamp(3.75rem, 6vw, 5rem); isolation: isolate; }   /* 60px → 80px */
.section--tight { padding-block: clamp(3.75rem, 6vw, 5rem); }
.section--light { background: var(--white); color: var(--vnet-purple); }
.section--dark { background: var(--vnet-page-purple); color: var(--white); }
.section--gradient { background: var(--vnet-page-purple); color: var(--white); }
.section--strip { padding-block: clamp(3rem, 5vw, 3.75rem); border-top: 1px solid var(--purple-12); }

.section-head { max-width: 820px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.section-head .lead, .center > .lead { margin-inline: auto; }   /* textos centrados también como bloque */

/* ---------- Tipografía ---------- */
.display, .title {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); }
.display__line { display: block; }
.title { font-size: var(--fs-title); margin-bottom: 1rem; }
.title--sm { font-size: clamp(1.5rem, 2.6vw, 1.75rem); margin: 0; }

.lead { font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.7; max-width: 62ch; }
.section--dark .lead, .section--gradient .lead { color: var(--white-80); }
.section--light .lead { color: var(--purple-muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  margin-bottom: 1rem;
  font-size: .8125rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
.section--light .eyebrow { color: var(--vnet-purple); }
.section--dark .eyebrow { color: var(--neon-on-purple); }
.eyebrow--on-gradient { color: var(--white); }

/* ---------- Botones ---------- */
/* Texto a 19px/800 = "texto grande" WCAG: el blanco sobre #CC04FF (4.2:1) cumple AA. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.125rem; padding: .75rem 1.6rem;
  border: 2px solid transparent; border-radius: 999px;
  font-size: 1.17rem; font-weight: 700; letter-spacing: 0; line-height: 1.1;
  text-decoration: none; text-align: center; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  --shine: var(--white-30);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, color .25s, border-color .25s, filter .25s;
}
/* Brillo que barre el botón al pasar el ratón (gradient-btn de Pley) */
.btn::before {
  content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--shine), transparent);
  transition: left .55s var(--ease);
}
.btn:hover::before { left: 100%; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 16px 34px color-mix(in srgb, var(--vnet-neon) 34%, transparent), var(--glow); filter: brightness(1.08); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--vnet-neon); color: var(--white); }
.btn--gradient { background: var(--gradient-firma); color: var(--white); border-color: var(--neon-30); }
.btn--ghost { border-color: var(--white); color: var(--white); background: transparent; }
.btn--ghost:hover { background: var(--white-15); box-shadow: 0 12px 24px var(--white-10); filter: none; }
.btn--white { background: var(--white); color: var(--vnet-purple); --shine: var(--neon-30); }
.btn--outline { border-color: var(--vnet-purple); color: var(--vnet-purple); --shine: var(--neon-12); }
.btn--outline:hover { border-color: var(--vnet-neon); filter: none; }
/* Destello radial (download-btn de Pley) */
.btn--flare::after {
  content: ""; position: absolute; inset: -50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, var(--neon-30) 0%, transparent 60%);
  opacity: 0; transform: scale(.5); transition: transform .5s var(--ease), opacity .5s;
}
.btn--flare:hover { transform: translateY(-6px) scale(1.05); }
.btn--flare:hover::after { opacity: 1; transform: scale(1); }
.btn--block { width: 100%; }
.price-card .btn { min-height: 3rem; font-size: 1.0625rem; }
.btn--lg { min-height: 3.5rem; padding-inline: 2rem; }
.btn--nav {
  min-height: 2.5rem; padding: .45rem 1.1rem;
  border-color: var(--vnet-neon); color: var(--white);
  font-size: .9375rem;
}
.btn--nav:hover { background: var(--neon-deep); }

.btn--pulse { animation: vnet-exitlag-pulse 2.6s ease-in-out infinite; }
@keyframes vnet-exitlag-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vnet-neon) 0%, transparent); }
  50% { box-shadow: var(--glow); }
}

.center-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem; margin-top: clamp(2rem, 5vw, 3rem); }
.center-actions .btn { flex: 1 1 100%; }
@media (min-width: 560px) { .center-actions .btn { flex: 0 1 auto; } }

/* Tarjeta cristal sobre morado */
.glass {
  background: var(--white-5);
  border: 1px solid var(--neon-30);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.glass:hover { border-color: var(--neon-40); transform: translateY(-8px); box-shadow: 0 15px 30px -10px color-mix(in srgb, var(--vnet-neon) 45%, transparent); }

/* ==========================================================================
   1. NAVBAR
   ========================================================================== */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); }
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--purple-85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--white-10);
  opacity: 0; transition: opacity .3s;
}
.nav.is-scrolled::before, .nav.is-open::before { opacity: 1; }
.nav.is-open::before { background: var(--vnet-purple); }

.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav__logo { flex: none; }
.nav__logo img { width: auto; height: 44px; }
.nav__actions { display: flex; align-items: center; gap: .75rem; }

.nav__toggle {
  width: 44px; height: 44px; display: grid; place-content: center; gap: 5px;
  background: transparent; border: 1px solid var(--white-20); border-radius: .75rem; cursor: pointer;
}
.nav__toggle span { width: 20px; height: 2px; border-radius: 2px; background: var(--white); transition: transform .3s, opacity .3s; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú móvil: panel a pantalla completa */
.nav__menu {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 49;
  padding: 1.5rem var(--gutter) 2rem;
  background: var(--vnet-page-purple);
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-.5rem);
  transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s;
}
.nav.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__list a {
  position: relative; display: block; padding: 1rem 0;
  border-bottom: 1px solid var(--white-10);
  font-size: 1.125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
}
.nav__list a { transition: color .3s; }
.nav__list a:hover { color: var(--neon-on-purple); }
.nav__list a.is-active { font-weight: 800; }
/* Subrayado neón que crece al pasar el ratón (header-nav de Pley) */
.nav__list a::after {
  content: ""; position: absolute; left: 0; bottom: .6rem; width: 0; height: 3px; border-radius: 3px;
  background: var(--vnet-neon); box-shadow: var(--glow-soft); transition: width .3s var(--ease);
}
.nav__list a:hover::after, .nav__list a.is-active::after { width: 2.5rem; }
:scope:not(.is-js) .nav__menu { position: static; opacity: 1; visibility: visible; transform: none; }

@media (min-width: 1280px) {
  .nav__toggle { display: none; }
  .nav__menu { position: static; padding: 0; background: none; opacity: 1; visibility: visible; transform: none; overflow: visible; }
  .nav__list { display: flex; gap: .25rem; }
  .nav__list a { padding: .5rem .7rem; border: 0; font-size: .8125rem; letter-spacing: .06em; }
  .nav__list a::after { left: .7rem; bottom: -.1rem; }
  .nav__list a:hover::after, .nav__list a.is-active::after { width: calc(100% - 1.4rem); }
}

/* ==========================================================================
   2. HERO
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh;
  display: grid; align-items: center;
  padding-block: calc(var(--nav-h) + 2rem) 3rem;
  background: var(--vnet-page-purple);
}
@media (max-width: 767.98px) { /* espacio para la barra inferior y contenido más compacto */
  .hero { padding-block: calc(var(--nav-h) + 1rem) calc(2rem + 80px); }
  .hero .hero__eyebrow { margin-bottom: 1.1rem; }
  .hero .hero__lead, .hero .hero__ctas { margin-bottom: 1.25rem; }
  .hero .price-badge { margin-bottom: 0; }
  .hero .hero__tags { display: none; }   /* en móvil no caben sobre la barra inferior; se repiten en "Beneficios" */
}
.hero__media, .hero__media > * { position: absolute; inset: 0; }
.hero__media { z-index: -1; }

/* Muro de juegos: columnas inclinadas que se desplazan (unas suben, otras bajan) */
.hero__wall {
  --tile: 150px;
  inset: -30% -20% !important;
  display: flex; justify-content: center; gap: 12px;
  transform: rotate(-10deg);
}
@media (min-width: 768px) { .hero__wall { --tile: 250px; } }
@media (min-width: 1280px) { .hero__wall { --tile: 300px; } }   /* recuadros más grandes: caben los 47 juegos sin repetirse a la vista */
/* align-self: flex-start → la columna mide lo que sus imágenes (2 sets idénticos), no el alto del muro.
   Así translateY(-50%) avanza exactamente un set y el bucle empalma sin corte. */
.hero__col { flex: 0 0 var(--tile); align-self: flex-start; animation: vnet-exitlag-wall-up 60s linear infinite; will-change: transform; }
.hero__col:nth-child(even) { animation-direction: reverse; }
.hero__col img {
  display: block; width: 100%; aspect-ratio: 356 / 200; margin-bottom: 12px;
  object-fit: cover; border-radius: 12px;
  filter: saturate(1.1) brightness(.95);
}
.hero.is-offscreen .hero__col { animation-play-state: paused; }
@keyframes vnet-exitlag-wall-up { to { transform: translateY(-50%); } }

/* Velo morado: más denso donde va el texto, más abierto a la derecha para que se vean los juegos */
.hero__overlay {
  background:
    radial-gradient(ellipse at 85% 100%, color-mix(in srgb, var(--vnet-neon) 40%, transparent), transparent 55%),
    linear-gradient(180deg, var(--purple-85) 0%, color-mix(in srgb, var(--vnet-purple) 78%, transparent) 45%, color-mix(in srgb, var(--vnet-purple) 92%, transparent) 100%);
}
@media (min-width: 900px) {
  .hero__overlay {
    background:
      radial-gradient(ellipse at 90% 90%, color-mix(in srgb, var(--vnet-neon) 40%, transparent), transparent 50%),
      linear-gradient(90deg, color-mix(in srgb, var(--vnet-purple) 94%, transparent) 0%, color-mix(in srgb, var(--vnet-purple) 82%, transparent) 45%, color-mix(in srgb, var(--vnet-purple) 50%, transparent) 100%),
      linear-gradient(180deg, var(--purple-70) 0%, transparent 25%, transparent 75%, var(--vnet-purple) 100%);
  }
}
.hero__orb {
  inset: auto -20% -30% auto !important;
  width: 70vmax; height: 70vmax; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--vnet-neon) 40%, transparent) 0%, transparent 60%);
  animation: vnet-exitlag-float 12s ease-in-out infinite;
}
@keyframes vnet-exitlag-float { 50% { transform: translate(-4%, -6%) scale(1.05); } }

.hero__inner { max-width: var(--container); }
.hero__inner > * { max-width: 920px; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: 1.5rem; padding: .5rem 1rem;
  border: 1px solid var(--neon-30); border-radius: 999px; background: var(--white-10);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: .8125rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
.hero__eyebrow img { height: 1.35rem; width: auto; }

/* El titular se ajusta también a la ALTURA de pantalla para que "Activar" quede visible sin scroll */
.hero .display { margin-bottom: 1.25rem; font-size: clamp(2.25rem, min(4.6vw, 8svh), 3.5rem); line-height: 1.08; }
.hero__lead { font-size: clamp(1.125rem, 1.8vw, 1.5rem); font-weight: 300; line-height: 1.4; color: var(--white-80); max-width: 40ch; margin-bottom: 1.75rem; }  /* 24px/300 */
.hero__ctas { margin-bottom: 1.75rem; }

.hero__tags { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-weight: 600; font-size: .9375rem; }
.hero__tags li { display: inline-flex; align-items: center; gap: .75rem; }
.hero__tags li + li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vnet-neon); box-shadow: var(--glow-soft); }

/* Tarjeta de precio del hero: oferta principal (clientes Vnet) + opción secundaria (no clientes) */
.price-badge {
  display: inline-grid;
  margin-bottom: 1.25rem;
  border: 1px solid var(--vnet-neon); border-radius: var(--radius);
  background: var(--white-10);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--glow);
  overflow: hidden;
}
.price-badge__main {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  padding: .75rem 1rem .75rem 1.25rem;
  font-size: 1rem;
}
.price-badge__main strong { font-weight: 800; font-size: 1.125rem; }
.price-badge__alt {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem;
  padding: .55rem 1rem .6rem 1.25rem;
  border-top: 1px solid var(--white-20);
  background: color-mix(in srgb, var(--vnet-purple) 35%, transparent);
  font-size: .8125rem; line-height: 1.45; color: var(--white-80);
}
.price-badge__alt strong { font-weight: 700; color: var(--white); white-space: nowrap; }
.price-badge__promo {
  padding: .25rem .7rem; border-radius: 999px;
  background: var(--white); color: var(--vnet-purple);
  font-size: .8125rem; font-weight: 800; letter-spacing: .02em;
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: .875rem; }
.hero__ctas .btn { flex: 1 1 100%; }
@media (min-width: 560px) { .hero__ctas .btn { flex: 0 1 auto; } }

/* ==========================================================================
   3. QUÉ ES
   ========================================================================== */
.about { display: grid; gap: 2.5rem; align-items: center; }
.about__note {
  display: flex; gap: .75rem; align-items: flex-start;
  margin-top: 1.5rem; padding: 1rem 1.25rem;
  border-left: 4px solid var(--vnet-neon); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--purple-3);
  font-weight: 600;
}
.about__note .icon { color: var(--vnet-neon); width: 1.5rem; height: 1.5rem; }
.about__media { width: 100%; max-width: 520px; margin-inline: auto; }
.about__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px var(--purple-70); }
@media (min-width: 900px) {
  .about { grid-template-columns: 1.05fr .95fr; gap: 4rem; }
}
/* Escritorio: "Qué es ExitLag" ocupa exactamente la pantalla bajo el menú (como "¿Cómo contratarlo?") */
@media (min-width: 960px) {
  #que-es {
    min-height: calc(100svh - var(--nav-h));
    display: flex; flex-direction: column; justify-content: center;
    padding-block: 1.5rem;
    scroll-margin-top: -1rem;
  }
  #que-es > .container { width: min(100% - 2 * var(--gutter), var(--container)); }
  #que-es .about__note { margin-top: 1.25rem; }
  /* La ilustración se adapta a la altura de la pantalla */
  #que-es .about__media { max-width: none; display: flex; justify-content: center; }
  #que-es .about__media img { width: auto; max-width: 100%; height: min(440px, 42svh); }
  /* Banda de cifras más compacta */
  #que-es .stats { margin-top: clamp(1.5rem, 3.5svh, 2.5rem); }
  #que-es .stat { padding: 1.5rem 1.75rem; }
  #que-es .stat__icon { margin-bottom: .6rem; }
}

/* Cifras: una sola banda morada dividida en columnas (menos ruido que 3 cajas sueltas).
   Hover: luz que sigue al cursor (--mx/--my desde main.js) + línea neón superior que crece. */
.stats {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid;
  margin-top: clamp(3rem, 7vw, 5rem);
  border-radius: var(--radius-lg);
  background: var(--vnet-page-purple);
  color: var(--white);
  box-shadow: 0 30px 60px -30px var(--purple-70);
}
@media (min-width: 768px) { .stats { grid-template-columns: repeat(3, 1fr); } }

.stat {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 1rem;
  padding: 1.5rem 1.5rem;
}
.stat + .stat { border-top: 1px solid var(--white-10); }
@media (min-width: 768px) {
  .stat { grid-template-columns: 1fr; align-content: start; row-gap: .25rem; padding: 2.25rem 2rem; }
  .stat + .stat { border-top: 0; border-left: 1px solid var(--white-10); }
}
/* Luz que sigue al cursor */
.stat::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--vnet-neon) 22%, transparent), transparent 70%);
  opacity: 0; transition: opacity .35s;
}
/* Línea neón superior que crece */
.stat::after {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0;
  background: var(--gradient-firma); box-shadow: var(--glow-soft);
  transition: width .5s var(--ease);
}
@media (hover: hover) {
  .stat:hover::before { opacity: 1; }
  .stat:hover::after { width: 100%; }
  .stat:hover .stat__icon { background: var(--neon-deep); color: var(--white); }
}

.stat__icon {
  grid-row: span 2;
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border: 1px solid var(--neon-30); border-radius: .875rem;
  background: var(--white-5); color: var(--neon-on-purple);
  transition: background-color .3s, color .3s;
}
.stat__icon .icon { width: 1.4rem; height: 1.4rem; }
@media (min-width: 768px) { .stat__icon { grid-row: auto; margin-bottom: 1rem; } }

.stat__value {
  display: flex; align-items: baseline; gap: 0;
  font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__unit { margin-left: .15em; font-size: .5em; letter-spacing: 0; color: var(--neon-on-purple); }
.stat__label { font-size: .9375rem; font-weight: 600; color: var(--white-80); }
.stat--pending .stat__value > span:first-child { color: var(--white-30); }
.stat__tag {
  justify-self: start; grid-column: 2;
  margin-top: .5rem; padding: .2rem .6rem;
  border: 1px solid var(--white-20); border-radius: 999px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--white-80);
}
@media (min-width: 768px) { .stat__tag { grid-column: auto; margin-top: .75rem; } }

/* ==========================================================================
   4. CARRUSEL DE JUEGOS (estilo carrusel de canales de Pley)
   ========================================================================== */
.games {
  display: grid; gap: .25rem;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-block: 1.25rem;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, var(--white) 7%, var(--white) 93%, transparent);
}
.games__row { padding-block: .75rem; }
.games__track { display: flex; width: max-content; animation: vnet-exitlag-games-scroll 40s linear infinite; }
.games__row--reverse .games__track { animation-direction: reverse; }
.games__row:hover .games__track { animation-play-state: paused; }
@keyframes vnet-exitlag-games-scroll { to { transform: translateX(-50%); } }

.game-card {
  position: relative; flex: none;
  width: clamp(200px, 24vw, 320px); aspect-ratio: 356 / 200; margin-right: 1rem;
  border: 1px solid var(--white-10); border-radius: var(--radius);
  overflow: hidden; background: var(--white-5);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.game-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.9); transition: transform .5s var(--ease), filter .5s; }
/* Brillo que barre la tarjeta */
.game-card::after {
  content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--white-20), transparent);
  transition: left .6s var(--ease);
}
.game-card__name {
  position: absolute; inset: auto 0 0; padding: 2rem .9rem .7rem;
  background: linear-gradient(0deg, var(--purple-85), transparent);
  font-size: .9375rem; font-weight: 800; letter-spacing: -.01em;
}
.game-card__name::before {
  content: ""; display: block; width: 0; height: 3px; margin-bottom: .4rem; border-radius: 3px;
  background: var(--vnet-neon); box-shadow: var(--glow-soft); transition: width .35s var(--ease);
}
@media (hover: hover) {
  .game-card:hover {
    z-index: 2; transform: translateY(-8px) scale(1.03);
    border-color: color-mix(in srgb, var(--vnet-neon) 60%, transparent);
    box-shadow: 0 14px 30px -6px color-mix(in srgb, var(--vnet-neon) 45%, transparent), var(--glow);
  }
  .game-card:hover img { transform: scale(1.08); filter: brightness(1.15) contrast(1.1) saturate(1.1); }
  .game-card:hover::after { left: 100%; }
  .game-card:hover .game-card__name::before { width: 2rem; }
}
:scope:not(.is-js) .games__row { overflow-x: auto; }
:scope:not(.is-js) .games__track { animation: none; }

/* ==========================================================================
   5. BENEFICIOS
   ========================================================================== */
/* Sección compacta: al llegar se ven las 8 tarjetas (4×2) en pantallas de escritorio */
#beneficios { padding-block: clamp(3rem, 5vw, 4rem); }
#beneficios .section-head { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
#beneficios .title { margin-bottom: 0; }
.benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 639.98px) {
  .benefits { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .benefit { padding: 1.25rem; }
}
@media (min-width: 1024px) { .benefits { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.benefit {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .75rem; align-content: start;
  padding: 1rem;
  border: 1px solid var(--purple-12); border-radius: var(--radius);
  background: var(--white);
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.benefit { position: relative; overflow: hidden; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.175, .885, .32, 1.275), border-color .3s, box-shadow .3s; }
.benefit::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: linear-gradient(135deg, var(--neon-12) 0%, var(--purple-3) 100%);
}
.benefit > * { position: relative; z-index: 1; }
@media (hover: hover) {
  .benefit:hover {
    transform: perspective(900px) translateY(-12px) rotateX(8deg) rotateY(4deg) scale(1.02);
    border-color: color-mix(in srgb, var(--vnet-neon) 50%, transparent);
    box-shadow: 0 25px 50px -12px var(--neon-40);
  }
  .benefit:hover::before { opacity: 1; }
  .benefit:hover .benefit__icon { transform: rotateY(360deg) scale(1.1); box-shadow: 0 10px 24px var(--neon-40); }
}
@media (min-width: 640px) { .benefit { padding: 1.25rem 1.25rem 1.4rem; } }
.benefit__icon {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: .75rem; background: var(--neon-12); color: var(--vnet-neon);
  transition: transform .6s var(--ease), box-shadow .5s;
}
.benefit__icon .icon { width: 1.4rem; height: 1.4rem; }
/* Ícono y síntoma en la misma fila; título y texto debajo a todo el ancho */
.benefit__title, .benefit__text { grid-column: 1 / -1; }
.benefit__symptom {
  line-height: 1.35;
  font-size: .75rem; font-weight: 600; font-style: italic; color: var(--purple-muted);
}
.benefit__title { margin: .85rem 0 .4rem; font-size: clamp(.9375rem, 1.4vw, 1.0625rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.benefit__text { font-size: .8125rem; line-height: 1.5; color: var(--purple-muted); }
@media (min-width: 640px) { .benefit__text { font-size: .875rem; } .benefit__symptom { font-size: .8125rem; } }

/* ==========================================================================
   6. CÓMO FUNCIONA
   ========================================================================== */
.diagram { max-width: 1000px; margin-inline: auto; padding: clamp(1rem, 4vw, 2.5rem); border: 1px solid var(--neon-30); border-radius: var(--radius-lg); background: var(--white-5); }
.diagram__svg { width: 100%; height: auto; overflow: visible; }
.route { fill: none; stroke-linecap: round; }
.route--dim path { stroke: var(--white-20); stroke-width: 2; stroke-dasharray: 3 8; }
.route--best { stroke: var(--vnet-neon); stroke-width: 5; filter: url(#glow); }
.route--flow { stroke: var(--white); stroke-width: 2; stroke-dasharray: 10 22; opacity: .8; animation: vnet-exitlag-flow 1.2s linear infinite; }
@keyframes vnet-exitlag-flow { to { stroke-dashoffset: -32; } }
.hops circle { fill: var(--vnet-purple); stroke: var(--white-20); stroke-width: 2; }
.packets circle { fill: var(--white); filter: url(#glow); }
.packets .slow { fill: var(--white-20); filter: none; }
.node rect { fill: var(--vnet-purple); stroke: var(--white); stroke-width: 2.5; }
.node path { fill: none; stroke: var(--white); stroke-width: 2.5; stroke-linecap: round; }
.node .node__detail { stroke: var(--neon-on-purple); stroke-width: 3; }
.best-tag rect { fill: var(--vnet-neon); }
.best-tag text { fill: var(--white); font: 800 13px var(--font); letter-spacing: .08em; }

.diagram__labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1rem; font-weight: 800; font-size: .875rem; line-height: 1.3; }
.diagram__labels span:nth-child(2) { text-align: center; }
.diagram__labels span:nth-child(3) { text-align: right; }
.diagram__labels small { font-weight: 400; font-size: .75rem; color: var(--white-80); }
@media (min-width: 768px) { .diagram__labels { font-size: 1rem; } .diagram__labels small { font-size: .875rem; } }

/* Dos columnas: texto + pasos (izquierda) · diagrama "Mejor ruta" (derecha) */
.how__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) {
  .how__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5rem; align-items: center; }
}
.how__text .eyebrow { margin-bottom: .5rem; }
.how__text .title { margin-bottom: 1rem; }
.how__lead { max-width: 56ch; font-size: clamp(1rem, 1.5vw, 1.0625rem); line-height: 1.75; color: var(--white-80); }

/* Pasos numerados con círculo aqua */
.how-list { display: grid; gap: 1.1rem; margin-top: 1.75rem; }
.how-list li { display: grid; grid-template-columns: 2.25rem 1fr; gap: .9rem; align-items: start; }
.how-list__n {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--vnet-aqua); color: var(--vnet-purple);
  font-size: .9375rem; font-weight: 800;
  box-shadow: 0 0 14px color-mix(in srgb, var(--vnet-aqua) 40%, transparent);
}
.how-list p { margin-top: .3rem; font-size: .9375rem; line-height: 1.6; color: var(--white-80); }
.how-list strong { color: var(--white); font-weight: 700; }

/* El diagrama ocupa su columna */
.how .diagram { width: 100%; max-width: none; margin: 0; padding: clamp(1.25rem, 3vw, 2rem); }
/* Escritorio: la sección mide lo que su contenido (cabe en pantalla) y queda cerca del glosario */
@media (min-width: 960px) {
  #como-funciona { padding-block: 4.5rem 2.5rem; }
  #como-funciona .diagram__labels small { white-space: nowrap; }
  #glosario { padding-top: 2.5rem; }
}

/* ==========================================================================
   2B. PRECIO
   ========================================================================== */
.pricing { display: grid; gap: 1.25rem; align-items: stretch; max-width: 620px; margin-inline: auto; }
@media (min-width: 900px) { .pricing { max-width: 1040px; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: center; } }

.price-card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  transition: transform .4s cubic-bezier(.165, .84, .44, 1), box-shadow .4s, border-color .4s;
}
.price-card--featured {
  margin-top: 1rem;
  /* Borde degradado animado: fondo morado en padding-box + gradiente cónico en border-box */
  --angle: 0deg;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--vnet-purple), var(--vnet-purple)) padding-box,
    conic-gradient(from var(--angle), var(--vnet-purple), var(--vnet-neon), var(--white), var(--vnet-neon), var(--vnet-purple)) border-box;
  box-shadow: var(--glow), 0 40px 80px -40px var(--vnet-purple);
  animation: vnet-exitlag-spin-border 6s linear infinite;
}
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes vnet-exitlag-spin-border { to { --angle: 360deg; } }
@media (min-width: 900px) { .price-card--featured { padding-block: 2.5rem; } }

.price-card--alt {
  border: 1px solid var(--white-20);
  background: var(--purple-70);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
@media (hover: hover) {
  .price-card:hover { transform: translateY(-8px); }
  .price-card--alt:hover { border-color: color-mix(in srgb, var(--vnet-neon) 50%, transparent); box-shadow: 0 20px 35px -5px var(--neon-40); }
  .price-card--featured:hover { box-shadow: var(--glow), 0 24px 40px -8px color-mix(in srgb, var(--vnet-neon) 55%, transparent); }
}

.price-card__ribbon {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: .4rem 1.1rem; border-radius: 999px; white-space: nowrap;
  background: var(--neon-deep); color: var(--white);
  font-size: .8125rem; font-weight: 700;
  box-shadow: 0 0 20px color-mix(in srgb, var(--vnet-neon) 50%, transparent);
}
.price-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.price-card__tag { font-size: 1rem; font-weight: 700; letter-spacing: 0; }   /* "Clientes Vnet" / "No clientes Vnet", sin mayúsculas */

.price { display: flex; align-items: flex-start; gap: .35rem; line-height: 1; }
.price__cur { margin-top: .4rem; font-size: .875rem; font-weight: 700; letter-spacing: .06em; }
.price__amount { font-size: clamp(3rem, 6vw, 4.25rem); font-weight: 800; letter-spacing: -.04em; }
.price__per { align-self: flex-end; margin-bottom: .4rem; font-size: .9375rem; font-weight: 600; color: var(--white-80); }
/* Precio en blanco sólido. Para volver al degradado, reemplazar por:
   .price-card--featured .price__amount { background: linear-gradient(90deg, var(--white) 30%, var(--neon-on-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; } */
.price-card--featured .price__amount { color: var(--white); }
.price__sub { margin: .5rem 0 1.25rem; color: var(--white-80); font-size: .875rem; line-height: 1.6; }
.price__sub strong { color: var(--white); white-space: nowrap; }

.checklist { display: grid; gap: .55rem; margin-bottom: 1rem; }
.checklist li { display: flex; gap: .55rem; align-items: flex-start; font-size: .875rem; line-height: 1.5; }
.checklist .icon { width: 1.2rem; height: 1.2rem; padding: .18rem; border-radius: 50%; background: var(--neon-deep); color: var(--white); stroke-width: 3.5; }

.price-card__note { margin-bottom: 1.25rem; font-size: .8125rem; font-weight: 600; color: var(--white-80); }
.price-card__text { margin-bottom: 1.25rem; font-size: .875rem; line-height: 1.6; color: var(--white-80); }
.price-card__link { margin-top: .85rem; text-align: center; font-size: .8125rem; font-weight: 600; }
.price-card__link:hover { color: var(--neon-on-purple); }

/* ---------- Selector de caso (estilo "segmented control") ---------- */
.plan-switch {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  width: min(100%, 560px); margin: 0 auto clamp(2rem, 4vw, 2.75rem); padding: .35rem;
  border: 1px solid var(--white-20); border-radius: 999px;
  background: color-mix(in srgb, var(--vnet-purple) 55%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--white-10), 0 12px 30px -12px var(--purple-70);
}
.plan-switch__glider {
  position: absolute; top: .35rem; bottom: .35rem; left: .35rem; width: calc(50% - .35rem);
  border-radius: 999px; background: var(--white);
  box-shadow: 0 0 24px color-mix(in srgb, var(--vnet-neon) 45%, transparent);
  transition: transform .45s var(--ease);
}
.plan-switch[data-active="1"] .plan-switch__glider { transform: translateX(100%); }
.plan-switch button {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  min-height: 3.5rem; padding: .55rem .75rem; border: 0; border-radius: 999px;
  background: none; color: var(--white-80); cursor: pointer;
  font-size: .9375rem; font-weight: 700; line-height: 1.2; text-align: center;
  transition: color .3s;
}
.plan-switch button:hover { color: var(--white); }
.plan-switch button[aria-selected="true"] { color: var(--vnet-purple); }
.plan-switch__price { font-size: .75rem; font-weight: 600; opacity: .85; }
@media (max-width: 480px) {
  .plan-switch button { padding-inline: .4rem; font-size: .8125rem; }
  .plan-switch__price { font-size: .6875rem; }
}
.plan-switch button:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
:scope:not(.is-js) .plan-switch { display: none; }

/* ---------- Panel de cada caso: tarjeta de precio + pasos ---------- */
.deals { max-width: 1080px; margin-inline: auto; }
.deal { display: grid; gap: 1.5rem; align-items: start; }
.deal + .deal { margin-top: 3rem; }                 /* sin JS se ven ambos casos */
:scope.is-js .deal + .deal { margin-top: 0; }
.deal[hidden] { display: none; }
/* Con JS, ambos paneles ocupan la misma celda: la altura es la del más alto y nada "salta" al cambiar de caso */
:scope.is-js .deals { display: grid; }
:scope.is-js .deal { grid-area: 1 / 1; }
:scope.is-js .deal[hidden] { display: grid; visibility: hidden; pointer-events: none; }
.deal.is-entering { animation: vnet-exitlag-deal-in .5s var(--ease) both; }
.deal.is-entering .step { animation: vnet-exitlag-deal-in .5s var(--ease) both; }
.deal.is-entering .step:nth-child(2) { animation-delay: .06s; }
.deal.is-entering .step:nth-child(3) { animation-delay: .12s; }
.deal.is-entering .step:nth-child(4) { animation-delay: .18s; }
@keyframes vnet-exitlag-deal-in { from { opacity: 0; transform: translateY(14px); } }
.deal:focus-visible { outline: 3px solid var(--white); outline-offset: 6px; border-radius: var(--radius-lg); }
@media (min-width: 960px) {
  .deal { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 2rem; align-items: stretch; }
}
.deal .price-card--featured { margin-top: .75rem; }
.deal .price-card--alt { margin-top: .75rem; }


.deal__how {
  display: flex; flex-direction: column;
  margin-top: .75rem; padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--white-15); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--vnet-purple) 55%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.deal__callout {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .85rem 1rem;
  border-left: 3px solid var(--vnet-aqua); border-radius: .5rem .875rem .875rem .5rem;
  background: var(--white-10);
  font-size: .875rem; line-height: 1.55; color: var(--white-80);
}
.deal__callout strong { color: var(--white); }
.deal__callout .icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; color: var(--vnet-aqua); stroke-width: 3; }
.deal__title { margin: 1.5rem 0 .5rem; font-size: 1.0625rem; font-weight: 700; }

/* Línea de tiempo vertical de pasos */
.steps { display: grid; }
.step {
  position: relative; display: grid; grid-template-columns: 2.25rem 1fr; gap: .9rem;
  padding: .75rem .6rem; border-radius: .875rem;
  transition: background-color .3s;
}
.step:not(:last-child)::before {       /* conector entre números */
  content: ""; position: absolute; left: calc(.6rem + 1.125rem - 1px); top: 3.1rem; bottom: -.7rem; width: 2px;
  border-radius: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--vnet-aqua) 75%, transparent), var(--white-10));
}
.step__num {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--vnet-aqua); color: var(--vnet-purple);
  font-size: .9375rem; font-weight: 800;
  box-shadow: 0 0 14px color-mix(in srgb, var(--vnet-aqua) 40%, transparent);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.step h4 { margin: .3rem 0 .15rem; font-size: .9375rem; font-weight: 700; line-height: 1.35; }
.step p { font-size: .875rem; line-height: 1.55; color: var(--white-80); }
.step a { color: var(--white); font-weight: 700; text-underline-offset: 3px; }
@media (hover: hover) {
  .step:hover { background: var(--white-5); }
  .step:hover .step__num { transform: scale(1.1); box-shadow: 0 0 22px color-mix(in srgb, var(--vnet-aqua) 65%, transparent); }
}
.deal__download {
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  margin-top: auto; padding-top: 1rem;
  font-size: .875rem; font-weight: 700; color: var(--white); text-decoration: none;
  transition: color .25s, gap .25s var(--ease);
}
.deal__download:hover { color: var(--neon-on-purple); gap: .7rem; }

/* ---------- Escritorio: la sección cabe completa en pantalla (≥ 960px) ----------
   Título + selector en una fila; tarjeta y panel compactos. */
@media (min-width: 960px) {
  /* Ocupa exactamente la pantalla visible debajo del menú: ni más ni menos. Si la pantalla es
     muy baja para el contenido, la sección crece lo necesario en vez de cortar texto. */
  #precio {
    min-height: calc(100svh - var(--nav-h));
    display: flex; flex-direction: column; justify-content: center;
    padding-block: 1.5rem 1.5rem;
    scroll-margin-top: -1rem;        /* al saltar a #precio, queda pegada justo bajo el menú */
  }
  #precio > .container { width: min(100% - 2 * var(--gutter), var(--container)); }
  #precio > .container { display: grid; grid-template-columns: 1fr auto; column-gap: 2rem; align-items: end; }
  #precio .section-head { margin: 0 0 1.25rem; max-width: none; text-align: left; }
  #precio .section-head .lead { margin: 0; }
  #precio .eyebrow { margin-bottom: .35rem; }
  #precio .title { margin-bottom: .35rem; }
  #precio .plan-switch { width: 480px; margin: 0 0 1.25rem; }
  #precio .deals { grid-column: 1 / -1; }
  #precio .deals { max-width: none; width: 100%; }

  .deal { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 1.5rem; }
  /* Tarjeta en 3 bloques: cabecera (plan + precio) arriba · beneficios al centro · nota + botón abajo */
  .deal .price-card, .deal .price-card--featured { padding: 1.5rem 1.6rem 1.35rem; margin-top: .6rem; }
  .deal .price-card__top { margin-bottom: .6rem; }
  .deal .price__amount { font-size: 3.75rem; }
  .deal .price__cur { margin-top: .35rem; }
  .deal .price__per { margin-bottom: .35rem; }
  .deal .price__sub { margin: .45rem 0 0; }
  .deal .checklist {
    gap: .6rem; margin-block: auto;            /* se centra en el espacio libre */
    padding-block: 1.1rem; border-top: 1px solid var(--white-15);
  }
  .deal .checklist li { font-size: .875rem; }
  .deal .price-card__note { margin-bottom: .75rem; }
  .deal .price-card .btn { min-height: 2.75rem; }

  .deal__how { margin-top: .6rem; padding: 1.25rem 1.5rem; }
  .deal__callout { padding: .6rem .9rem; font-size: .8125rem; }
  .deal__title { margin: 1rem 0 .15rem; }
  .step { padding: .45rem .5rem; gap: .8rem; }
  .step:not(:last-child)::before { left: calc(.5rem + 1.125rem - 1px); top: 2.85rem; bottom: -.5rem; }
  .step h4 { margin: .2rem 0 .05rem; }
  .step p { font-size: .8125rem; line-height: 1.45; }
  .deal__download { padding-top: .6rem; }
}

/* ==========================================================================
   10. TESTIMONIOS
   ========================================================================== */
.quotes { display: grid; gap: 1rem; max-width: 1040px; margin-inline: auto; }
@media (min-width: 768px) { .quotes { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
.quote { display: flex; flex-direction: column; margin: 0; padding: 1.75rem; }
.quote__mark { width: 2.25rem; height: auto; margin-bottom: 1rem; color: var(--vnet-neon); fill: currentColor; filter: drop-shadow(0 0 10px var(--neon-40)); }
/* Tarjetas claras (la sección de testimonios va sobre fondo blanco) */
.section--light .quote.glass { background: var(--white); border-color: var(--purple-12); color: var(--vnet-purple); -webkit-backdrop-filter: none; backdrop-filter: none; }
.section--light .quote.glass:hover { border-color: var(--neon-40); }
.quote blockquote { flex: 1; margin: 0; }
.quote blockquote p { font-size: 1rem; line-height: 1.7; color: var(--white); }
.section--light .quote blockquote p { color: var(--vnet-purple); }
.quote__author { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--white-10); }
.section--light .quote__author { border-top-color: var(--purple-12); }
.quote__avatar {
  display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--neon-deep); color: var(--white); box-shadow: var(--glow-soft);
}
.quote__avatar .icon { width: 1.3rem; height: 1.3rem; }
.quote__author strong { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.quote__author span span { font-size: .8125rem; color: var(--white-80); }
.section--light .quote__author span span { color: var(--purple-muted); }

/* ==========================================================================
   11. FAQ
   ========================================================================== */
/* Preguntas frecuentes: réplica del bloque de vnet.com.ve/plan-residencial/
   (medidas tomadas del sitio: título 24/300, texto 18/300 · 36px, tarjetas 1120px, radio 10 → 25px abiertas) */
#faq.faq-section {
  --faq-bg: #440099;                                   /* morado de fondo del sitio vnet.com.ve */
  padding-block: 5rem 8rem;
  background: var(--faq-bg) url("https://vnet.com.ve/wp-content/uploads/2026/01/Fondo-hogar-derecha.jpg") 100% 50% / contain no-repeat;
}
#faq .container--narrow { max-width: 1120px; }
.faq-head { max-width: 538px; margin: 0 auto 50px; }
.faq-head__title { margin: 0 0 12px; font-size: 24px; font-weight: 300; line-height: 1.2; letter-spacing: .5px; color: var(--white); }
.faq-head__lead { font-size: 18px; font-weight: 300; line-height: 36px; letter-spacing: -.5px; color: var(--white); }

.faq { display: grid; gap: 20px; }
.faq__item { background: none; border: 0; color: var(--white); }
.faq__item h3 { font-size: inherit; }

/* Barra de la pregunta */
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 15px;
  border: 0; border-bottom: .8px solid var(--white-15); border-radius: 10px;
  background: color-mix(in srgb, var(--white) 8%, transparent);
  box-shadow: 0 0 10px 3px color-mix(in srgb, var(--vnet-purple) 20%, transparent);
  cursor: pointer; text-align: left;
  color: var(--white); font-size: 17px; font-weight: 500; line-height: 34px; letter-spacing: -.5px;
  transition: all .4s;
}
.faq__q:focus-visible { outline: 3px solid var(--vnet-aqua); outline-offset: 2px; }
.faq__item.is-open .faq__q {
  border-bottom: 1.6px solid var(--white); border-radius: 25px 25px 0 0;
  box-shadow: 0 0 10px color-mix(in srgb, var(--faq-bg) 80%, transparent);
}

/* Flecha neón: abajo cerrada, arriba abierta */
.faq__icon { position: relative; flex: none; width: 1rem; height: 1rem; margin-right: 1.25rem; }
.faq__icon::before {
  content: ""; position: absolute; left: 50%; top: 35%; width: 8px; height: 8px;
  border-right: 1.5px solid var(--vnet-neon); border-bottom: 1.5px solid var(--vnet-neon);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform .4s, top .4s;
}
.faq__item.is-open .faq__icon::before { top: 65%; transform: translate(-50%, -50%) rotate(-135deg); }

/* Respuesta (panel animado con grid-rows; sin JS queda abierta) */
.faq__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s var(--ease), visibility .4s; }
:scope.is-js .faq__a { grid-template-rows: 0fr; visibility: hidden; }
:scope.is-js .faq__item.is-open .faq__a { grid-template-rows: 1fr !important; visibility: visible !important; }
.faq__a-inner { overflow: hidden; }
.faq__body {
  padding: 30px 30px 20px;
  border-radius: 0 0 25px 25px;
  background: color-mix(in srgb, var(--white) 8%, transparent);
  color: var(--white); font-size: 15px; font-weight: 300; line-height: 30px; letter-spacing: -.5px;
}
.faq__body p, .faq__body ul { margin: 0 0 15px; }
.faq__body > :last-child { margin-bottom: 0; }
.faq__body ul { padding-left: 1.25rem; list-style: disc; }
.faq__body li::marker { color: var(--white); }
.faq__body strong { font-weight: 700; color: var(--white); }
.faq__body a { color: var(--white); font-weight: 500; text-underline-offset: 3px; }
.faq__body a:hover { color: var(--vnet-aqua); }
@media (max-width: 640px) {
  .faq__q { font-size: 15px; line-height: 1.5; }
  .faq__body { padding: 22px 20px 16px; }
  .faq-head__lead { font-size: 16px; line-height: 30px; }
}
.faq__item[hidden] { display: none; }

/* ==========================================================================
   12. GLOSARIO
   ========================================================================== */
.glossary { display: grid; gap: 1rem; margin: 0; }
@media (min-width: 640px) { .glossary { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .glossary { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.term { padding: 1.75rem; }
.term:hover { transform: translateY(-4px); }
.term dt { margin-bottom: .5rem; font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--neon-on-purple); }
.term dt span { display: block; margin-top: .15rem; font-size: .875rem; font-weight: 600; letter-spacing: 0; color: var(--white-80); }
.term dd { margin: 0; color: var(--white); font-size: .9375rem; }

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.footer {
  position: relative; isolation: isolate;
  padding-block: clamp(3.5rem, 8vw, 5rem) 6rem;
  background: var(--vnet-purple);
  border-top: 1px solid var(--white-10);
  font-size: .9375rem;
}
.footer::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gradient-firma); }
.footer__top { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .footer__top { grid-template-columns: 1fr 2.2fr; gap: 4rem; } }
.footer__brand img { width: 140px; margin-bottom: 1.25rem; }
.footer__brand p { color: var(--white-80); max-width: 36ch; }
.footer__claim { margin-bottom: .5rem; font-weight: 800; color: var(--white) !important; font-size: 1.0625rem; }
.footer__phone { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem; font-weight: 800; font-size: 1.125rem; text-decoration: none; }
.footer__phone .icon { color: var(--neon-on-purple); }
.footer__phone:hover { color: var(--neon-on-purple); }

.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
@media (min-width: 768px) { .footer__cols { grid-template-columns: repeat(4, 1fr); } }
.footer__cols h2 { margin: 0 0 1rem; font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--neon-on-purple); }
.footer__cols ul { display: grid; gap: .6rem; }
.footer__cols a { color: var(--white-80); text-decoration: none; }
.footer__cols a { transition: color .25s; }
.footer__cols a:hover { color: var(--neon-on-purple); }

.footer__bottom { display: grid; gap: 1.25rem; justify-items: center; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--white-10); text-align: center; }
@media (min-width: 900px) { .footer__bottom { grid-template-columns: 1fr auto 1fr; text-align: left; } .footer__legal { justify-self: end; text-align: right; } .footer__bottom > p:first-child { justify-self: start; } }
.footer__bottom p { color: var(--white-80); }
.footer__legal { font-size: .8125rem; }
.social { display: flex; gap: .75rem; }
.social a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--neon-30); transition: background-color .25s, box-shadow .25s, border-color .25s, transform .25s var(--ease);
}
.social a:hover { background: var(--vnet-neon); border-color: var(--vnet-neon); box-shadow: var(--glow); transform: translateY(-2px); }
.social .icon { width: 1.1rem; height: 1.1rem; }

/* ==========================================================================
   Barra inferior flotante (móvil) — inspirada en pley.com.ve
   ========================================================================== */
.dock { display: none; }
@media (max-width: 767.98px) {
  .dock {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 55;
    display: grid; grid-template-columns: repeat(5, 1fr); padding: .35rem;
    border: 1px solid var(--white-20); border-radius: 18px;
    background: linear-gradient(
      color-mix(in srgb, color-mix(in srgb, var(--vnet-purple) 82%, var(--white)) 95%, transparent),
      color-mix(in srgb, var(--vnet-purple) 97%, transparent));
    -webkit-backdrop-filter: blur(22px) saturate(1.35); backdrop-filter: blur(22px) saturate(1.35);
    box-shadow: 0 12px 32px var(--purple-70), inset 0 1px 0 var(--white-10);
    transition: opacity .25s;
  }
  .dock__item {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .45rem 0 .55rem; border-radius: 12px;
    color: var(--white-80); font-size: .6875rem; font-weight: 600; text-decoration: none;
    transition: color .25s, background-color .25s;
  }
  .dock__item .icon { width: 1.35rem; height: 1.35rem; transition: transform .25s var(--ease), color .25s; }
  .dock__item:active .icon { transform: scale(.9); }
  .dock__item.is-active { color: var(--white); background: var(--white-10); }
  .dock__item.is-active .icon { color: var(--neon-on-purple); }
  .dock__item.is-active::after {
    content: ""; position: absolute; bottom: .15rem; width: 1.25rem; height: 3px; border-radius: 3px;
    background: var(--vnet-neon); box-shadow: var(--glow-soft);
  }
  :scope.menu-open .dock { opacity: 0; pointer-events: none; }
  .footer { padding-bottom: 8rem; }
}

/* ==========================================================================
   Animaciones de entrada (fade-up) — solo con JS activo
   ========================================================================== */
:scope.is-js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
:scope.is-js .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :scope { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  :scope.is-js .reveal { opacity: 1; transform: none; }
  .games__row { overflow-x: auto; }
  .btn--pulse { box-shadow: var(--glow); }
}

  /* Ajustes VNET: logo alineado y Font Awesome nativo de Elementor. */
.hero__eyebrow {
  align-items: center !important;
  flex-wrap: nowrap !important;
}
.hero__eyebrow img {
  display: block !important;
  width: auto !important;
  height: 2rem !important;
  margin: -.27rem -.1rem !important;
  object-fit: contain !important;
  transform: translateY(.02rem);
}
i.icon,
i.quote__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-style: normal;
  line-height: 1;
  fill: initial;
  stroke: none;
}
i.quote__mark { font-size: 2.25rem; }
.quote__mark { height: 27px !important; }
/* VNET PLAN RESIDENCIAL FAQ MATCH */
/* Replica visual del FAQ publicado en /solucion/plan-residencial/. */
#faq.faq-section {
  padding: 80px 0 128px !important;
  background: #330076 !important;
}

#faq .container--narrow {
  width: min(calc(100% - 2 * var(--gutter)), 1140px);
  max-width: 1140px !important;
}

#faq .faq-head {
  width: 100%;
  max-width: 538px;
  margin: 0 auto 50px !important;
}

#faq h2.faq-head__title {
  margin: 0 0 12px !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 28.8px !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  text-align: center;
}

#faq .faq-head__lead {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 36px !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  text-align: center;
}

#faq .faq {
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

#faq .faq__item,
#faq .faq__item h3 {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#faq .faq__item h3 {
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 34px !important;
}

#faq .faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 65px;
  padding: 15px !important;
  border: 0 !important;
  border-bottom: .8px solid rgba(255, 255, 255, .15) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .08) !important;
  box-shadow: rgba(56, 5, 49, .2) 0 0 10px 3px !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 34px !important;
  letter-spacing: 0 !important;
  text-align: left;
}

#faq .faq__item.is-open .faq__q {
  border-bottom: 1.6px solid #fff !important;
  border-radius: 25px 25px 0 0 !important;
  box-shadow: rgba(56, 5, 49, .2) 0 0 10px 3px !important;
}

#faq .faq__icon {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-right: 20px;
}

#faq .faq__icon::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 35%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #cc04ff;
  border-bottom: 1.5px solid #cc04ff;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform .4s, top .4s;
}

#faq .faq__item.is-open .faq__icon::before {
  top: 65%;
  transform: translate(-50%, -50%) rotate(-135deg);
}

#faq .faq__body {
  padding: 30px 30px 20px !important;
  border-radius: 0 0 25px 25px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 30px !important;
  letter-spacing: 0 !important;
}

#faq .faq__body p,
#faq .faq__body ul {
  margin: 0 0 15px;
}

#faq .faq__body > :last-child {
  margin-bottom: 0;
}

#faq .faq__body a {
  color: #fff;
  font-weight: 500;
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  #faq.faq-section {
    padding: 60px 0 80px !important;
  }

  #faq .faq-head {
    margin-bottom: 40px !important;
  }

  #faq .faq-head__lead {
    font-size: 16px !important;
    line-height: 30px !important;
  }

  #faq .faq__q {
    min-height: 65px;
    font-size: 15px !important;
    line-height: 22.5px !important;
  }

  #faq .faq__icon {
    margin-right: 5px;
  }

  #faq .faq__body {
    padding: 22px 20px 16px !important;
  }
}
/* VNET FAQ TYPOGRAPHY EXACT */
#faq h2.faq-head__title {
  letter-spacing: .5px !important;
}

#faq .faq-head__lead,
#faq .faq__q,
#faq .faq__body {
  letter-spacing: -.5px !important;
}

#faq .faq__body {
  padding: 30px 0 20px 30px !important;
}

@media (max-width: 640px) {
  #faq .faq__body {
    padding: 22px 0 16px 20px !important;
  }
}
/* END VNET FAQ TYPOGRAPHY EXACT */

/* HERO ORIGINAL: restaura el muro animado y la escala visual de la referencia. */
.hero {
  min-height: clamp(640px, 42vw, 760px) !important;
  padding-block: 2rem 2.5rem !important;
}

@media (min-width: 768px) {
  .hero {
    min-height: 100svh !important;
    padding-block: calc(var(--nav-h) + 2rem) 3rem !important;
  }
}

.hero__media {
  display: block !important;
  background: none !important;
}

/* Fondo uniforme del sitio: conserva el muro de juegos sin degradados morados. */
.hero__overlay {
  background: color-mix(in srgb, var(--vnet-page-purple) 84%, transparent) !important;
}

.hero__orb {
  display: none !important;
}

.hero__inner {
  transform: translateY(-1rem);
}

@media (min-width: 768px) {
  .hero__inner {
    transform: none;
  }
}

.hero h1.display {
  margin-bottom: 1.25rem !important;
  font-size: clamp(2.25rem, min(4.6vw, 8svh), 3.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
}

.hero__eyebrow {
  font-size: .8125rem !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
}

.hero__lead {
  font-size: clamp(1.125rem, 1.8vw, 1.5rem) !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

.hero .btn {
  font-size: 1.17rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

.hero .price-badge,
.hero .hero__tags {
  letter-spacing: 0 !important;
}

@media (max-width: 767.98px) {
  .hero {
    min-height: 760px !important;
    padding-block: calc(var(--nav-h) + 1rem) calc(2rem + 80px) !important;
  }

  .hero__inner {
    transform: none;
  }

}

/* Adaptación directa a la altura visible de WordPress. */
@media (min-width: 960px) {
  .container:not(.container--narrow),
  #precio > .container,
  #que-es > .container {
    width: min(calc(100% - 2 * var(--gutter) - 15px), var(--container));
  }

  #precio,
  #que-es {
    min-height: calc(100svh - var(--nav-h)) !important;
  }

  #que-es .about__media img {
    height: min(440px, 42svh) !important;
  }

  #que-es .stats {
    margin-top: clamp(1.5rem, 3.5svh, 2.5rem) !important;
  }
}

/* Selector de planes en móvil: dos tarjetas iguales, limpias y fáciles de pulsar. */
@media (max-width: 767.98px) {
  #precio .plan-switch {
    width: min(100%, 360px) !important;
    margin: 0 auto 2rem !important;
    padding: 5px !important;
    gap: 5px;
    border: 1px solid var(--white-30) !important;
    border-radius: 20px !important;
    background: var(--vnet-purple) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--vnet-purple) 45%, transparent), inset 0 1px 0 var(--white-10) !important;
  }

  #precio .plan-switch__glider {
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc(50% - 7.5px);
    border-radius: 15px;
    background: var(--white);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--vnet-neon) 32%, transparent);
    transition: transform .35s var(--ease);
  }

  #precio .plan-switch[data-active="1"] .plan-switch__glider {
    transform: translateX(calc(100% + 5px));
  }

  #precio .plan-switch button {
    min-height: 96px;
    padding: .8rem .65rem !important;
    border-radius: 15px !important;
    gap: .45rem;
  }

  #precio .plan-switch__price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--white-10);
  }

  #precio .plan-switch button[aria-selected="true"] .plan-switch__price {
    background: var(--purple-12);
  }
}
/* END VNET PLAN RESIDENCIAL FAQ MATCH */
}

/* Astra/Elementor assign heading and link colors after widget styles. Keep the
   landing's original color system without affecting the site header/footer. */
.vnet-exitlag h1,
.vnet-exitlag h2,
.vnet-exitlag h3,
.vnet-exitlag h4 {
  color: inherit !important;
}

.vnet-exitlag .btn--primary,
.vnet-exitlag .btn--gradient,
.vnet-exitlag .btn--ghost {
  color: var(--white) !important;
}

.vnet-exitlag .btn--white,
.vnet-exitlag .btn--outline {
  color: var(--vnet-purple) !important;
}

.vnet-exitlag .deal__download {
  color: var(--white) !important;
}

.vnet-exitlag .deal__download:hover,
.vnet-exitlag .deal__download:focus-visible {
  color: var(--neon-on-purple) !important;
}

/* ZIP TYPOGRAPHY LOCK START */

.vnet-exitlag {
  font-family: var(--font) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.vnet-exitlag * {
  font-family: var(--font) !important;
}

.vnet-exitlag h1,
.vnet-exitlag h2,
.vnet-exitlag h3,
.vnet-exitlag h4,
.vnet-exitlag h5,
.vnet-exitlag h6,
.vnet-exitlag a,
.vnet-exitlag button {
  text-transform: none !important;
}

.vnet-exitlag h1,
.vnet-exitlag h2,
.vnet-exitlag h3,
.vnet-exitlag h4,
.vnet-exitlag h5,
.vnet-exitlag h6 {
  font-size: inherit !important;
  line-height: inherit !important;
}

.vnet-exitlag {
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  --fs-display: clamp(36px, 4.6vw, 56px) !important;
  --fs-title: clamp(28px, 3vw, 35px) !important;
}

.vnet-exitlag {
  font-family: var(--font) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

.vnet-exitlag button,
.vnet-exitlag input {
  font: inherit !important;
}

.vnet-exitlag .sr-only {
  white-space: nowrap !important;
}

.vnet-exitlag .skip-link {
  font-weight: 800 !important;
  text-decoration: none !important;
}

.vnet-exitlag .center {
  text-align: center !important;
}

.vnet-exitlag .nowrap {
  white-space: nowrap !important;
}

.vnet-exitlag .display,
.vnet-exitlag .title {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

.vnet-exitlag .display {
  font-size: var(--fs-display) !important;
}

.vnet-exitlag .title {
  font-size: var(--fs-title) !important;
}

.vnet-exitlag .title--sm {
  font-size: clamp(24px, 2.6vw, 28px) !important;
}

.vnet-exitlag .lead {
  font-size: clamp(16px, 1.6vw, 18px) !important;
  line-height: 1.7 !important;
}

.vnet-exitlag .eyebrow {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.vnet-exitlag .btn {
  font-size: 18.72px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  text-align: center !important;
}

.vnet-exitlag .price-card .btn {
  font-size: 17px !important;
}

.vnet-exitlag .btn--nav {
  font-size: 15px !important;
}

.vnet-exitlag .nav__list a {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.vnet-exitlag .nav__list a.is-active {
  font-weight: 800 !important;
}

@media (min-width: 1280px) {
.vnet-exitlag .nav__list a {
  font-size: 13px !important;
  letter-spacing: .06em !important;
}
}

.vnet-exitlag .hero__eyebrow {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.vnet-exitlag .hero .display {
  font-size: clamp(36px, min(4.6vw, 8svh), 56px) !important;
  line-height: 1.08 !important;
}

.vnet-exitlag .hero__lead {
  font-size: clamp(18px, 1.8vw, 24px) !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
}

.vnet-exitlag .hero__tags {
  font-weight: 600 !important;
  font-size: 15px !important;
}

.vnet-exitlag .price-badge__main {
  font-size: 16px !important;
}

.vnet-exitlag .price-badge__main strong {
  font-weight: 800 !important;
  font-size: 18px !important;
}

.vnet-exitlag .price-badge__alt {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.vnet-exitlag .price-badge__alt strong {
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.vnet-exitlag .price-badge__promo {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

.vnet-exitlag .about__note {
  font-weight: 600 !important;
}

.vnet-exitlag .stat__value {
  font-size: clamp(32px, 3.6vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  line-height: 1 !important;
}

.vnet-exitlag .stat__unit {
  font-size: .5em !important;
  letter-spacing: 0 !important;
}

.vnet-exitlag .stat__label {
  font-size: 15px !important;
  font-weight: 600 !important;
}

.vnet-exitlag .stat__tag {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.vnet-exitlag .game-card__name {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}

.vnet-exitlag .benefit__symptom {
  line-height: 1.35 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-style: italic !important;
}

.vnet-exitlag .benefit__title {
  font-size: clamp(15px, 1.4vw, 17px) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
}

.vnet-exitlag .benefit__text {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

@media (min-width: 640px) {
.vnet-exitlag .benefit__text {
  font-size: 14px !important;
}

.vnet-exitlag .benefit__symptom {
  font-size: 13px !important;
}
}

.vnet-exitlag .best-tag text {
  font: 800 13px var(--font) !important;
  letter-spacing: .08em !important;
}

.vnet-exitlag .diagram__labels {
  font-weight: 800 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

.vnet-exitlag .diagram__labels span:nth-child(2) {
  text-align: center !important;
}

.vnet-exitlag .diagram__labels span:nth-child(3) {
  text-align: right !important;
}

.vnet-exitlag .diagram__labels small {
  font-weight: 400 !important;
  font-size: 12px !important;
}

@media (min-width: 768px) {
.vnet-exitlag .diagram__labels {
  font-size: 16px !important;
}

.vnet-exitlag .diagram__labels small {
  font-size: 14px !important;
}
}

.vnet-exitlag .how__lead {
  font-size: clamp(16px, 1.5vw, 17px) !important;
  line-height: 1.75 !important;
}

.vnet-exitlag .how-list__n {
  font-size: 15px !important;
  font-weight: 800 !important;
}

.vnet-exitlag .how-list p {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.vnet-exitlag .how-list strong {
  font-weight: 700 !important;
}

@media (min-width: 960px) {
.vnet-exitlag #como-funciona .diagram__labels small {
  white-space: nowrap !important;
}
}

.vnet-exitlag .price-card__ribbon {
  white-space: nowrap !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.vnet-exitlag .price-card__tag {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.vnet-exitlag .price {
  line-height: 1 !important;
}

.vnet-exitlag .price__cur {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
}

.vnet-exitlag .price__amount {
  font-size: clamp(48px, 6vw, 68px) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
}

.vnet-exitlag .price__per {
  font-size: 15px !important;
  font-weight: 600 !important;
}

.vnet-exitlag .price__sub {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.vnet-exitlag .price__sub strong {
  white-space: nowrap !important;
}

.vnet-exitlag .checklist li {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.vnet-exitlag .price-card__note {
  font-size: 13px !important;
  font-weight: 600 !important;
}

.vnet-exitlag .price-card__text {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.vnet-exitlag .price-card__link {
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.vnet-exitlag .plan-switch button {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

.vnet-exitlag .plan-switch__price {
  font-size: 12px !important;
  font-weight: 600 !important;
}

@media (max-width: 480px) {
.vnet-exitlag .plan-switch button {
  font-size: 13px !important;
}

.vnet-exitlag .plan-switch__price {
  font-size: 11px !important;
}
}

.vnet-exitlag .deal__callout {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.vnet-exitlag .deal__title {
  font-size: 17px !important;
  font-weight: 700 !important;
}

.vnet-exitlag .step__num {
  font-size: 15px !important;
  font-weight: 800 !important;
}

.vnet-exitlag .step h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.vnet-exitlag .step p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.vnet-exitlag .step a {
  font-weight: 700 !important;
}

.vnet-exitlag .deal__download {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

@media (min-width: 960px) {
.vnet-exitlag #precio .section-head {
  text-align: left !important;
}

.vnet-exitlag .deal .price__amount {
  font-size: 60px !important;
}

.vnet-exitlag .deal .checklist li {
  font-size: 14px !important;
}

.vnet-exitlag .deal__callout {
  font-size: 13px !important;
}

.vnet-exitlag .step p {
  font-size: 13px !important;
  line-height: 1.45 !important;
}
}

.vnet-exitlag .quote blockquote p {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.vnet-exitlag .quote__author strong {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.vnet-exitlag .quote__author span span {
  font-size: 13px !important;
}

.vnet-exitlag .faq-head__title {
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: .5px !important;
}

.vnet-exitlag .faq-head__lead {
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 36px !important;
  letter-spacing: -.5px !important;
}

.vnet-exitlag .faq__item h3 {
  font-size: inherit !important;
}

.vnet-exitlag .faq__q {
  text-align: left !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 34px !important;
  letter-spacing: -.5px !important;
}

.vnet-exitlag .faq__body {
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 30px !important;
  letter-spacing: -.5px !important;
}

.vnet-exitlag .faq__body strong {
  font-weight: 700 !important;
}

.vnet-exitlag .faq__body a {
  font-weight: 500 !important;
}

@media (max-width: 640px) {
.vnet-exitlag .faq__q {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.vnet-exitlag .faq-head__lead {
  font-size: 16px !important;
  line-height: 30px !important;
}
}

.vnet-exitlag .term dt {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.2 !important;
}

.vnet-exitlag .term dt span {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.vnet-exitlag .term dd {
  font-size: 15px !important;
}

.vnet-exitlag .footer {
  font-size: 15px !important;
}

.vnet-exitlag .footer__claim {
  font-weight: 800 !important;
  font-size: 17px !important;
}

.vnet-exitlag .footer__phone {
  font-weight: 800 !important;
  font-size: 18px !important;
  text-decoration: none !important;
}

.vnet-exitlag .footer__cols h2 {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.vnet-exitlag .footer__cols a {
  text-decoration: none !important;
}

.vnet-exitlag .footer__bottom {
  text-align: center !important;
}

@media (min-width: 900px) {
.vnet-exitlag .footer__bottom {
  text-align: left !important;
}

.vnet-exitlag .footer__legal {
  text-align: right !important;
}
}

.vnet-exitlag .footer__legal {
  font-size: 13px !important;
}

@media (max-width: 767.98px) {
.vnet-exitlag .dock__item {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
}

/* El tema no debe pintar de negro los controles interactivos al hacer hover. */
.vnet-exitlag .plan-switch button,
.vnet-exitlag .plan-switch button:hover,
.vnet-exitlag .plan-switch button:focus-visible {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.vnet-exitlag .plan-switch button:hover,
.vnet-exitlag .plan-switch button:focus-visible {
  color: var(--white) !important;
}

.vnet-exitlag .plan-switch button[aria-selected="true"],
.vnet-exitlag .plan-switch button[aria-selected="true"]:hover,
.vnet-exitlag .plan-switch button[aria-selected="true"]:focus-visible {
  color: var(--vnet-purple) !important;
}

.vnet-exitlag .btn--primary,
.vnet-exitlag .btn--primary:hover { background: var(--vnet-neon) !important; color: var(--white) !important; }
.vnet-exitlag .btn--gradient,
.vnet-exitlag .btn--gradient:hover { background: var(--gradient-firma) !important; color: var(--white) !important; }
.vnet-exitlag .btn--ghost { background: transparent !important; color: var(--white) !important; }
.vnet-exitlag .btn--ghost:hover { background: var(--white-15) !important; color: var(--white) !important; }
.vnet-exitlag .btn--white,
.vnet-exitlag .btn--white:hover { background: var(--white) !important; color: var(--vnet-purple) !important; }
.vnet-exitlag .btn--outline,
.vnet-exitlag .btn--outline:hover { background: transparent !important; color: var(--vnet-purple) !important; }


/* Dentro de WordPress, @scope conserva la misma proximidad que el CSS original
   del ZIP y evita que Astra/Elementor alteren la tipografía o el hover. */
@scope (.vnet-exitlag) {
  .price-badge {
    margin-bottom: 20px !important;
    border-radius: 16px !important;
  }

  @media (max-width: 767.98px) {
    .hero .price-badge {
      margin-bottom: 0 !important;
    }
  }

  .price-badge__main {
    margin: 0 !important;
    gap: 8px 14.4px !important;
    padding: 12px 16px 12px 20px !important;
  }

  .price-badge__alt {
    margin: 0 !important;
    gap: 4px 16px !important;
    padding: 8.8px 16px 9.6px 20px !important;
  }

  .price-badge__promo {
    padding: 4px 11.2px !important;
  }

  /* Elementor vuelve a aplicar márgenes globales a p, ul y headings dentro
     del panel de planes. Restablecemos la geometría vertical del ZIP. */
  .price,
  .price-card__tag,
  .deal__callout,
  .steps,
  .step,
  .step p {
    margin: 0 !important;
  }

  .price__sub {
    margin: 8px 0 20px !important;
  }

  .checklist {
    margin: 0 0 16px !important;
  }

  .price-card__note {
    margin: 0 0 20px !important;
  }

  .price-card .btn {
    gap: 9.6px !important;
    padding: 12px 24px !important;
  }

  .deal__title {
    margin: 24px 0 8px !important;
  }

  .step h4 {
    margin: 4.8px 0 2.4px !important;
  }

  .deal__download {
    margin-top: auto !important;
    padding-top: 16px !important;
  }

  .deal {
    gap: 24px !important;
  }

  .deal .price-card,
  .deal .price-card--featured {
    margin-top: 12px !important;
    padding: 24px !important;
  }

  .deal .price-card__top {
    gap: 16px !important;
    margin-bottom: 16px !important;
  }

  .deal .price {
    gap: 5.6px !important;
  }

  .deal .price__cur {
    margin-top: 6.4px !important;
  }

  .deal .price__per {
    margin-bottom: 6.4px !important;
  }

  .deal .checklist {
    gap: 8.8px !important;
  }

  .deal .checklist li {
    gap: 8.8px !important;
  }

  .deal .checklist .icon {
    width: 19.2px !important;
    height: 19.2px !important;
    padding: 2.88px !important;
  }

  .deal__how {
    margin-top: 12px !important;
    padding: 20px !important;
  }

  .deal__callout {
    gap: 10.4px !important;
    padding: 13.6px 16px !important;
  }

  .deal__callout .icon {
    width: 17.6px !important;
    height: 17.6px !important;
    margin-top: 2.4px !important;
  }

  .step {
    grid-template-columns: 36px 1fr !important;
    gap: 14.4px !important;
    padding: 12px 9.6px !important;
  }

  .step__num {
    width: 36px !important;
    height: 36px !important;
  }

  .step:not(:last-child)::before {
    left: 26.6px !important;
    top: 49.6px !important;
    bottom: -11.2px !important;
  }

  .deal__download {
    gap: 8px !important;
  }

  /* Astra/Elementor agrega margen inferior global a los párrafos de esta
     banda y aumenta su altura casi 90 px. El ZIP original no tiene esos
     márgenes: la separación ya la controla el grid de cada estadística. */
  .stat__value,
  .stat__label {
    margin: 0 !important;
  }

  /* Geometría original de beneficios. Astra/Elementor añade márgenes a los
     párrafos de síntoma y descripción, alargando cada tarjeta. */
  #beneficios {
    padding-block: clamp(48px, 5vw, 64px) !important;
  }

  #beneficios .section-head {
    margin-bottom: clamp(24px, 3vw, 32px) !important;
  }

  #beneficios .eyebrow {
    margin-bottom: 16px !important;
  }

  #beneficios .title {
    margin-bottom: 0 !important;
  }

  .benefits {
    gap: 12px !important;
    margin: 0 !important;
  }

  .benefit {
    padding: 16px !important;
    column-gap: 12px !important;
    margin: 0 !important;
  }

  .benefit__icon {
    width: 40px !important;
    height: 40px !important;
  }

  .benefit__icon .icon {
    width: 22.4px !important;
    height: 22.4px !important;
  }

  .benefit__symptom,
  .benefit__text {
    margin: 0 !important;
  }

  .benefit__title {
    margin: 13.6px 0 6.4px !important;
  }

  @media (min-width: 640px) {
    .benefit {
      padding: 20px 20px 22.4px !important;
    }
  }

  @media (min-width: 1024px) {
    .benefits {
      gap: 16px !important;
    }
  }

  /* Geometría original de testimonios. Astra añade padding a blockquote y
     margen al párrafo de la cita, deformando la tarjeta completa. */
  #testimonio {
    padding-block: 80px !important;
  }

  #testimonio .section-head {
    margin-bottom: 48px !important;
  }

  #testimonio .eyebrow {
    margin-bottom: 16px !important;
  }

  #testimonio .title {
    margin: 0 !important;
  }

  .quotes {
    gap: 16px !important;
    margin: 0 auto !important;
  }

  .quote {
    margin: 0 !important;
    padding: 28px !important;
  }

  .quote__mark {
    width: 36px !important;
    height: 27px !important;
    margin: 0 0 16px !important;
  }

  .quote blockquote {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .quote blockquote p {
    margin: 0 !important;
    padding: 0 !important;
  }

  .quote__author {
    gap: 12px !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
  }

  .quote__avatar {
    width: 40px !important;
    height: 40px !important;
  }

  .quote__avatar .icon {
    width: 20.8px !important;
    height: 20.8px !important;
  }

  @media (min-width: 768px) {
    .quotes {
      gap: 20px !important;
    }
  }

  /* Geometría original de “¿Cómo funciona?”. WordPress hereda 24 px de
     margen inferior en cada párrafo y agranda artificialmente los pasos. */
  .how__text .eyebrow {
    margin-bottom: 8px !important;
  }

  .how__text .title {
    margin-bottom: 16px !important;
  }

  .how__lead {
    margin: 0 !important;
  }

  .how-list {
    gap: 17.6px !important;
    margin: 28px 0 0 !important;
  }

  .how-list li {
    grid-template-columns: 36px 1fr !important;
    gap: 14.4px !important;
    margin: 0 !important;
  }

  .how-list__n {
    width: 36px !important;
    height: 36px !important;
  }

  .how-list p {
    margin: 4.8px 0 0 !important;
  }

  @media (max-width: 767.98px) {
    #precio > .container {
      width: min(calc(100% - 32px), var(--container)) !important;
    }
  }

  @media (min-width: 960px) {
    /* La sección informativa no necesita ocupar una pantalla completa:
       se compacta el aire alrededor de la banda sin tocar su contenido. */
    #que-es {
      min-height: auto !important;
      padding-block: 32px !important;
    }

    #que-es .stats {
      margin-top: 20px !important;
    }

    #que-es .stat {
      padding: 16px 28px !important;
    }

    #como-funciona {
      padding-block: 72px 40px !important;
    }

    #como-funciona .how__grid {
      gap: 56px !important;
    }

    #como-funciona .diagram {
      padding: 32px !important;
    }

    #precio {
      padding-block: 24px !important;
    }

    #precio .section-head {
      margin: 0 0 20px !important;
    }

    #precio .eyebrow,
    #precio .title {
      margin-bottom: 5.6px !important;
    }

    #precio .plan-switch {
      margin: 0 0 20px !important;
      padding: 5.6px !important;
    }

    #precio .plan-switch__glider {
      top: 5.6px !important;
      bottom: 5.6px !important;
      left: 5.6px !important;
      width: calc(50% - 5.6px) !important;
    }

    #precio .plan-switch button {
      gap: 2.4px !important;
      min-height: 56px !important;
      padding: 8.8px 12px !important;
    }

    .deal {
      gap: 24px !important;
    }

    .deal .price-card,
    .deal .price-card--featured {
      margin-top: 9.6px !important;
      padding: 24px 25.6px 21.6px !important;
    }

    .deal .price-card__top {
      gap: 16px !important;
      margin-bottom: 9.6px !important;
    }

    .deal .price {
      gap: 5.6px !important;
    }

    .deal .price__cur {
      margin-top: 5.6px !important;
    }

    .deal .price__per {
      margin-bottom: 5.6px !important;
    }

    .deal .price__sub {
      margin: 7.2px 0 0 !important;
    }

    .deal .checklist {
      gap: 9.6px !important;
      margin-block: auto !important;
      padding-block: 17.6px !important;
    }

    .deal .checklist li {
      gap: 8.8px !important;
    }

    .deal .price-card__note {
      margin-bottom: 12px !important;
    }

    .deal .price-card .btn {
      min-height: 44px !important;
    }

    .deal__how {
      margin-top: 9.6px !important;
      padding: 20px 24px !important;
    }

    .deal__callout {
      gap: 10.4px !important;
      padding: 9.6px 14.4px !important;
    }

    .deal__title {
      margin: 16px 0 2.4px !important;
    }

    .step {
      gap: 12.8px !important;
      padding: 7.2px 8px !important;
    }

    .step h4 {
      margin: 3.2px 0 .8px !important;
    }

    .deal__download {
      gap: 8px !important;
      padding-top: 9.6px !important;
    }
  }

  .skip-link {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  .btn,
  .hero .btn {
    font-size: 18.72px !important;
    line-height: 1.1 !important;
  }

  .plan-switch button,
  .plan-switch button * {
    letter-spacing: normal !important;
  }

  .step h4 {
    letter-spacing: normal !important;
  }

  .quote p {
    font-style: normal !important;
  }

  .plan-switch button,
  .plan-switch button:hover,
  .plan-switch button:focus-visible {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .plan-switch button:hover,
  .plan-switch button:focus-visible {
    color: var(--white) !important;
  }

  .plan-switch button[aria-selected="true"],
  .plan-switch button[aria-selected="true"]:hover,
  .plan-switch button[aria-selected="true"]:focus-visible {
    color: var(--vnet-purple) !important;
  }

  .btn--primary,
  .btn--primary:hover { background: var(--vnet-neon) !important; color: var(--white) !important; }
  .btn--gradient,
  .btn--gradient:hover { background: var(--gradient-firma) !important; color: var(--white) !important; }
  .btn--ghost { background: transparent !important; color: var(--white) !important; }
  .btn--ghost:hover { background: var(--white-15) !important; color: var(--white) !important; }
  .btn--white,
  .btn--white:hover { background: var(--white) !important; color: var(--vnet-purple) !important; }
  .btn--outline,
  .btn--outline:hover { background: transparent !important; color: var(--vnet-purple) !important; }
}

/* ZIP TYPOGRAPHY LOCK END */