/* ═══════════════════════════════════════════════════════════════════════
   Encantia · Pase VIP (16-10-2026; desde el 17-10 solo el pase: la lista de
   espera está en la portada). La noche de la portada de punta a punta.
   Encima de inicio.css y lanzamiento.css (formulario, tarjeta y movimiento).
   ═══════════════════════════════════════════════════════════════════════ */

body.vip{
  background:radial-gradient(1100px 620px at 8% -8%,#3a22b8 0%,transparent 58%),
             radial-gradient(900px 600px at 96% 4%,#1d4ed8 0%,transparent 52%),
             var(--noche);
  background-attachment:fixed;color:#fff;
}
body.vip::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(110% 70% at 50% 0,#000 25%,transparent 72%);
  mask-image:radial-gradient(110% 70% at 50% 0,#000 25%,transparent 72%);
}
body.vip > .orbe{position:fixed}
main{position:relative;isolation:isolate}

/* ── Cabecera: oscura también al bajar ── */
.cab.vip-cab{color:#fff}
.cab.vip-cab.pegada{background:rgba(11,8,32,.72);border-bottom-color:rgba(255,255,255,.08)}
.vip-conozca{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:650;color:rgba(255,255,255,.82);
  padding:9px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);transition:background .25s,border-color .25s,color .25s;
}
.vip-conozca svg{width:16px;height:16px;transition:transform .3s}
.vip-conozca:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3);color:#fff}
.vip-conozca:hover svg{transform:translateX(3px)}

/* ── Portada: texto y tarjeta a la izquierda, el formulario a la derecha ── */
.vip-portada{position:relative;isolation:isolate;overflow:hidden;padding:46px 0 80px}
.vip-portada .aurora{opacity:.5}
.vip-rejilla{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:28px 64px;
  grid-template-areas:"intro forma" "pase forma";grid-template-rows:auto 1fr;align-items:start;
}
.vip-intro{grid-area:intro;padding-top:22px}
.vip-pase{grid-area:pase}
.vip-pase .pase-marco{margin:26px 0 0 4px}
.vip-forma{grid-area:forma}
.vip-intro .pildora{margin-bottom:22px}
.vip-intro h1{font-size:clamp(38px,4.9vw,62px);line-height:1.04;font-weight:850;letter-spacing:-.045em;margin-bottom:20px}
.vip-sub{font-size:clamp(16.5px,1.6vw,18.5px);color:#cfc9ee;max-width:540px;line-height:1.6}
.vip-otro{text-align:center;font-size:14px;color:#c9c2ec;margin-top:16px;line-height:1.55}
.vip-otro a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(196,181,253,.6)}
.vip-otro a:hover{text-decoration-color:#fff}

/* ── Secciones ── */
.vip-sec{padding:44px 0 50px}
.vip-sec h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:10px}
.vip-sec-sub{color:#c9c2ec;font-size:16px;margin-bottom:24px}
.incluye{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;perspective:1200px}
.inc{
  position:relative;border-radius:20px;padding:26px 24px 24px;overflow:hidden;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.8,.3,1),border-color .3s,background .3s,box-shadow .3s;
  transition-delay:var(--d,0ms);
}
.inc.revelar{transform:translateY(30px) rotateX(14deg);transform-origin:50% 0}
.inc.revelar.visto{transform:none}
.inc.revelado:hover,.inc:not(.revelar):hover{transform:translateY(-6px)}
.inc:hover{border-color:rgba(196,181,253,.38);background:rgba(255,255,255,.065);box-shadow:0 28px 54px -30px rgba(108,71,255,.85)}
.inc-destacado{background:linear-gradient(160deg,rgba(108,71,255,.24),rgba(108,71,255,.06) 60%);border-color:rgba(143,109,255,.45)}
.inc-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(143,109,255,.2);color:#c4b5fd;box-shadow:inset 0 0 0 1px rgba(143,109,255,.35);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.inc:hover .inc-ic{transform:rotate(-8deg) scale(1.1)}
.inc-ic svg{width:21px;height:21px}
.inc h3{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
.inc p{font-size:14.5px;color:#c9c2ec;line-height:1.55}
.solo-vip{position:absolute;top:20px;right:20px;font-size:10.5px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;
  color:#0b0820;background:linear-gradient(135deg,#7ff0d0,#4be3b0);padding:4px 10px;border-radius:999px;animation:latePill 2.6s ease-in-out infinite}

/* Las funciones entran en ola */
.funciones{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.funciones.revelar{opacity:1;transform:none}
.funciones li{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;font-size:14px;font-weight:600;color:#e6e1ff;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  opacity:0;transform:translateY(14px) scale(.94);
  transition:opacity .5s,transform .55s cubic-bezier(.34,1.56,.64,1),background .25s,border-color .25s;
  transition-delay:calc(var(--i,0) * 55ms);
}
.funciones.visto li{opacity:1;transform:none}
.funciones.revelado li{transition-delay:0s}
.funciones li:hover{background:rgba(143,109,255,.16);border-color:rgba(143,109,255,.45);transform:translateY(-3px)}
.funciones svg{width:14px;height:14px;color:var(--menta)}

.preguntas{display:grid;grid-template-columns:1fr 1fr;gap:0 52px;margin-top:22px}
.preg{padding:20px 0 22px;border-bottom:1px solid rgba(255,255,255,.09);position:relative}
.preg::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:linear-gradient(90deg,#8f6dff,#3ba4ff,transparent);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.3,1) .2s}
.preg.visto::after{transform:scaleX(1)}
.preg h3{font-size:16.5px;font-weight:800;margin-bottom:6px}
.preg p{color:#c9c2ec;font-size:15px;line-height:1.6}
.preg a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(196,181,253,.6)}

/* ── Pie ── */
.vip-pie{border-top:1px solid rgba(255,255,255,.08);margin-top:40px}
.vip-pie-env{display:flex;justify-content:space-between;align-items:center;gap:14px 26px;flex-wrap:wrap;padding-top:26px;padding-bottom:34px;font-size:13.5px;color:#9d97c4}
.vip-pie nav{display:flex;gap:22px;flex-wrap:wrap}
.vip-pie a:hover{color:#fff}

/* ── Tamaños ── */
@media (max-width:980px){
  .vip-rejilla{grid-template-columns:1fr;grid-template-areas:"intro" "forma" "pase";grid-template-rows:none;gap:26px}
  .vip-intro{padding-top:6px;text-align:center}
  .vip-sub{margin:0 auto}
  .vip-forma{max-width:560px;width:100%;margin:0 auto}
  .vip-pase .pase-marco{margin:10px auto 0}
  .incluye{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cab.vip-cab{padding:14px 20px}
  .vip-conozca{padding:8px 11px;font-size:13.5px}
  .vip-portada{padding:22px 0 50px}
  .preguntas{grid-template-columns:1fr}
  .vip-pie-env{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .inc.revelar,.funciones li{transform:none;opacity:1}
  .solo-vip{animation:none}
}