/* ═══════════════════════════════════════════════════════════════════════
   Encantia · lanzamiento (17-10-2026)
   Lo que comparten la portada (lista de espera, Encantia Pro, Pase VIP) y
   encantia.co/vip: el formulario, la tarjeta del pase, la confirmación y el
   movimiento. Va después de inicio.css.
   ═══════════════════════════════════════════════════════════════════════ */

@property --giro{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ── Barra de avance arriba ── */
.progreso-scroll{
  position:fixed;left:0;top:0;right:0;height:3px;z-index:300;pointer-events:none;
  background:linear-gradient(90deg,#8f6dff,#6c47ff 35%,#3ba4ff 70%,#4be3b0);
  transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px rgba(143,109,255,.8);
}

/* ── Aviso de arriba: la lista de espera está abierta ── */
.anuncio{
  position:relative;z-index:85;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:9px 16px;font-size:13.5px;font-weight:600;color:#e9e5ff;text-align:center;overflow:hidden;
  background:linear-gradient(90deg,#1b1250,#2a1a86 30%,#1f3fa8 70%,#1b1250);background-size:200% 100%;
  animation:anuncioFluye 9s linear infinite;
}
@keyframes anuncioFluye{to{background-position:200% 0}}
.anuncio::after{
  content:'';position:absolute;top:0;bottom:0;width:30%;left:-40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg);
  animation:anuncioBrillo 5s ease-in-out 1s infinite;
}
@keyframes anuncioBrillo{0%,55%{left:-40%}100%{left:130%}}
.anuncio .destello{color:#c4b5fd;animation:destella 2.4s ease-in-out infinite;display:inline-block}
@keyframes destella{50%{transform:scale(1.35) rotate(25deg);color:#4be3b0}}
.anuncio a{color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(196,181,253,.7)}
.anuncio a:hover{text-decoration-color:#fff}

/* Cabecera de la portada en pantallas medianas (17-10-2026). Entre 861 y 1100 px sus enlaces y sus dos
   botones no caben en una línea (ya con seis enlaces los botones se salían de la pantalla hasta 70 px):
   ahí queda el menú de hamburguesa y, a la vista, solo «Unirme a la lista». Entre 1101 y 1240 se aprieta
   un poco para que quepa todo. Solo la de la portada: /vip y /registro tienen otra cabecera. */
@media (min-width:861px) and (max-width:1100px){
  .cab.sobre-noche .nav,.cab.sobre-noche .cab-btns .btn-borde{display:none}
  .cab.sobre-noche .cab-btns{margin-left:auto}
  .cab.sobre-noche .hamburguesa{display:flex;margin-left:6px}
}
@media (min-width:1101px) and (max-width:1240px){
  .cab.sobre-noche{gap:18px}
  .cab.sobre-noche .nav{gap:17px;font-size:14.5px}
  .cab.sobre-noche .btn-chico{padding:9px 14px;font-size:14px}
}

/* ── Estrellitas que titilan en las zonas oscuras ── */
.chispas{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.chispas i{
  position:absolute;left:var(--x);top:var(--y);width:var(--t);height:var(--t);border-radius:50%;
  background:#fff;opacity:0;box-shadow:0 0 8px 1px rgba(196,181,253,.9);
  animation:titila var(--d) ease-in-out var(--r) infinite;
}
@keyframes titila{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:var(--o,.85);transform:scale(1)}}

/* ── Luz que sigue al mouse (portada y tarjetas) ── */
.luz-cursor{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(520px circle at var(--px,50%) var(--py,30%),rgba(143,109,255,.22),transparent 62%);
}
.con-cursor .luz-cursor{opacity:1}
.luz{position:relative;isolation:isolate}
.luz > .luz-capa{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--luz-color,rgba(143,109,255,.16)),transparent 65%);
}
.luz:hover > .luz-capa{opacity:1}

/* ── Titular que entra línea por línea ── */
.linea-h{display:inline-block;animation:lineaEntra 1.05s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes lineaEntra{from{opacity:0;filter:blur(14px);transform:translateY(34px) scale(.97)}}

/* ── Botones con imán y brillo ── */
.btn-prim,.btn-luz{position:relative;overflow:hidden}
.btn-prim::after,.btn-luz::after{
  content:'';position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);
  transition:left .7s cubic-bezier(.2,.8,.3,1);
}
.btn-luz::after{background:linear-gradient(100deg,transparent,rgba(143,109,255,.25),transparent)}
.btn-prim:hover::after,.btn-luz:hover::after{left:130%}
.btn.iman{transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,background .25s,border-color .25s,color .25s}
.btn-latido{animation:latidoBoton 2.6s ease-in-out infinite}
@keyframes latidoBoton{
  0%,100%{box-shadow:0 12px 30px -10px rgba(108,71,255,.65),0 0 0 0 rgba(143,109,255,.45),inset 0 1px 0 rgba(255,255,255,.25)}
  50%{box-shadow:0 16px 36px -10px rgba(108,71,255,.8),0 0 0 10px rgba(143,109,255,0),inset 0 1px 0 rgba(255,255,255,.25)}
}

/* ══════════ El formulario (lista de espera y Pase VIP) ══════════ */
.lz-caja{
  position:relative;background:#fff;color:var(--tinta);border-radius:24px;padding:30px 30px 24px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08),0 30px 80px -40px rgba(108,71,255,.6);
}
.lz-tit{font-size:25px;font-weight:850;letter-spacing:-.03em;margin:0;line-height:1.15}
.lz-sub{color:var(--tinta3);font-size:14px;margin:4px 0 20px}
.lz-campo{display:grid;gap:6px;margin-bottom:14px}
.lz-campo[hidden]{display:none}
.lz-campo label{font-size:13.5px;font-weight:700;color:var(--tinta)}
.lz-campo small{font-size:12.5px;color:var(--tinta3)}
.lz-campo input,.lz-prefijo,.lz-pais{
  width:100%;font:inherit;font-size:15px;color:var(--tinta);background:#fff;
  border:1.5px solid var(--linea2);border-radius:12px;padding:12px 14px;outline:none;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.lz-campo input::placeholder{color:#a9a5c2}
.lz-campo input:focus,.lz-prefijo:focus-within,.lz-pais:focus-within{border-color:var(--violeta);box-shadow:0 0 0 4px rgba(108,71,255,.14)}
.lz-campo input:focus{transform:translateY(-1px)}
.lz-prefijo{display:flex;align-items:center;padding:0;overflow:hidden}
.lz-prefijo span{align-self:stretch;display:grid;place-items:center;padding:0 13px;font-weight:800;color:var(--violeta);background:#f1eefe;border-right:1.5px solid var(--linea2);letter-spacing:.02em}
.lz-prefijo input{border:0 !important;box-shadow:none !important;border-radius:0;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transform:none !important}
.lz-prefijo input::placeholder{text-transform:none;letter-spacing:.02em;font-weight:500}
.lz-tel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
.lz-pais{position:relative;display:flex;align-items:center;gap:7px;width:auto;padding:0 11px 0 12px;font-weight:700;font-size:14.5px;cursor:pointer}
.lz-pais svg{width:14px;height:14px;color:var(--tinta3)}
.lz-pais select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font:inherit}
.lz-bandera{width:22px;height:15px;border-radius:3px;box-shadow:0 0 0 1px rgba(16,12,38,.12);flex-shrink:0;background:var(--b,#ddd)}
.lz-trampa{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0}
.lz-tiene-pase{
  display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:2px 0;margin:-2px 0 14px;cursor:pointer;
  color:var(--violeta);font-weight:700;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(108,71,255,.35);
}
.lz-tiene-pase svg{width:17px;height:17px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.lz-tiene-pase:hover svg{transform:rotate(-12deg) scale(1.15)}
.lz-campo.aparece{animation:apareceCampo .45s cubic-bezier(.2,.8,.3,1)}
@keyframes apareceCampo{from{opacity:0;transform:translateY(-8px)}}
.lz-acepto{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--tinta2);line-height:1.5;margin:4px 0 16px;cursor:pointer}
.lz-acepto input{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--violeta);cursor:pointer}
.lz-acepto a{color:var(--violeta);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.lz-campo.mal input,.lz-campo.mal .lz-prefijo,.lz-campo.mal .lz-pais + input{border-color:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.12)}
.lz-acepto.mal{color:#c0392f}
.lz-acepto.mal input{outline:2px solid #e5484d;outline-offset:2px}
.lz-caja .mal{animation:sacude .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes sacude{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.lz-error{background:#fff1f2;border:1px solid #fecdd3;color:#b4232a;font-size:13.5px;font-weight:600;border-radius:12px;padding:10px 13px;margin:-4px 0 14px;animation:aparece2 .25s ease}
@keyframes aparece2{from{opacity:0;transform:translateY(-4px)}}
.lz-boton{position:relative;padding:15px 22px;font-size:16px}
.lz-rueda{display:none;width:18px;height:18px;border-radius:50%;border:2.4px solid rgba(255,255,255,.45);border-top-color:#fff;animation:giraRueda .8s linear infinite}
@keyframes giraRueda{to{transform:rotate(360deg)}}
.lz-boton.enviando{pointer-events:none;opacity:.88}
.lz-boton.enviando svg{display:none}
.lz-boton.enviando .lz-rueda{display:block}
.lz-nota{font-size:12.5px;color:var(--tinta3);text-align:center;margin-top:12px;line-height:1.5}
.lz-nota a{color:var(--violeta);font-weight:650}

/* La confirmación */
.lz-listo{text-align:center;padding:10px 4px 2px;outline:none}
.lz-listo h3{font-size:24px;font-weight:850;letter-spacing:-.03em;line-height:1.2;margin-top:6px}
.lz-listo > p:not(.lz-nota){color:var(--tinta2);font-size:15.5px;margin:10px 0 18px}
.lz-listo-ic{width:84px;height:84px;margin:4px auto 10px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(31,194,138,.18),transparent 70%);animation:listoEntra .6s cubic-bezier(.34,1.56,.64,1) both}
.lz-listo-ic svg{width:64px;height:64px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.lz-listo-ic circle{stroke:#1fc28a;stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:traza .7s .1s ease forwards}
.lz-listo-ic path{stroke:#1fc28a;stroke-width:4;stroke-dasharray:36;stroke-dashoffset:36;animation:traza .45s .6s ease forwards}
@keyframes traza{to{stroke-dashoffset:0}}
@keyframes listoEntra{from{transform:scale(.5);opacity:0}}
.lz-datos{list-style:none;display:grid;text-align:left;border:1px solid var(--linea);border-radius:14px;margin:0 0 6px;overflow:hidden}
.lz-datos li{display:flex;justify-content:space-between;gap:14px;padding:11px 14px;font-size:14px;color:var(--tinta3);border-bottom:1px solid var(--linea)}
.lz-datos li:last-child{border-bottom:0}
.lz-datos b{color:var(--tinta);font-weight:700;text-align:right;word-break:break-word}
.lz-datos li.realce b{color:var(--violeta);letter-spacing:.03em}
.lz-listo .btn{margin-top:16px}
.lz-listo > *{animation:sube .7s cubic-bezier(.2,.7,.3,1) both}
.lz-listo > :nth-child(2){animation-delay:.15s} .lz-listo > :nth-child(3){animation-delay:.25s}
.lz-listo > :nth-child(4){animation-delay:.35s} .lz-listo > :nth-child(5){animation-delay:.45s} .lz-listo > :nth-child(6){animation-delay:.55s}
.confeti{position:absolute;left:50%;top:70px;width:9px;height:9px;border-radius:2px;pointer-events:none;z-index:5;animation:confeti var(--t,1.1s) cubic-bezier(.15,.7,.35,1) forwards}
@keyframes confeti{0%{transform:translate(-50%,0) rotate(0);opacity:1}100%{transform:translate(calc(-50% + var(--x)),var(--y)) rotate(var(--r));opacity:0}}

/* ══════════ La tarjeta del Pase VIP ══════════ */
.pase-marco{width:min(100%,440px);animation:flotaPase 7s ease-in-out infinite;perspective:1000px}
@keyframes flotaPase{50%{transform:translateY(-10px)}}
.pase{
  position:relative;aspect-ratio:1.6;border-radius:22px;overflow:hidden;isolation:isolate;color:#fff;
  background:radial-gradient(120% 140% at 0% 0%,#2c1d78 0%,#171039 46%,#0f0b29 100%);
  box-shadow:0 44px 80px -34px rgba(0,0,0,.85),0 34px 70px -34px rgba(108,71,255,.75),inset 0 0 0 1px rgba(255,255,255,.12);
  transform:rotateX(var(--rx,5deg)) rotateY(var(--ry,-9deg)) rotateZ(-2.5deg);transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.3,1);
}
.pase::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--giro),#8f6dff,#3ba4ff 25%,transparent 45%,transparent 60%,#4be3b0 80%,#8f6dff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:giraBorde 7s linear infinite;
}
@keyframes giraBorde{to{--giro:360deg}}
.pase-izq{position:absolute;inset:0 44% 0 0;padding:24px 0 20px 26px;display:flex;flex-direction:column}
.pase-marca{font-size:clamp(16px,2.1vw,21px);font-weight:900;letter-spacing:.06em;line-height:1;display:flex;align-items:baseline}
.pase-e{font-size:1.35em;font-weight:900;letter-spacing:0;margin-right:1px;background:linear-gradient(135deg,#c4b5fd,#8f6dff 50%,#3ba4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.pase-ia{background:linear-gradient(100deg,#8f6dff,#3ba4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.pase-tit{margin-top:auto;font-size:clamp(20px,2.7vw,27px);font-weight:850;letter-spacing:.08em;line-height:1}
.pase-inv{font-size:9.5px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:#bdb7dc;margin-top:6px}
.pase-pie{margin-top:auto;display:grid;gap:2px;font-size:9.5px;font-weight:700;letter-spacing:.06em;color:#bdb7dc;text-transform:uppercase}
.pase-pie span:last-child{text-transform:none;letter-spacing:.02em;color:#857fa8}
.pase-pie b{color:#fff;font-weight:850;transition:color .3s;display:inline-block}
.pase.vacio-codigo .pase-pie b{color:#857fa8}
.pase.codigo-nuevo .pase-pie b{animation:codigoLate .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes codigoLate{40%{transform:scale(1.18);color:#c4b5fd}}
.pase-der{position:absolute;inset:0 0 0 52%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding-left:9%}
.pase-ola{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.pase-ola path{fill:#eceaf6}
.pase-qr{width:44%;aspect-ratio:1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 6px 16px -8px rgba(16,12,38,.4)}
.pase-qr svg{width:100%;height:100%;display:block}
.pase-qr path{fill:#100c26}
.pase-mes{font-size:clamp(8.5px,1.1vw,10.5px);font-weight:850;letter-spacing:.04em;color:#fff;padding:5px 11px;border-radius:999px;background:linear-gradient(135deg,#8f6dff,#5a37f5);box-shadow:0 8px 16px -8px rgba(108,71,255,.9);white-space:nowrap;animation:latePill 2.4s ease-in-out infinite}
@keyframes latePill{50%{transform:scale(1.07);box-shadow:0 10px 22px -8px rgba(108,71,255,1)}}
.pase-escanee{font-size:clamp(7.5px,.9vw,9px);font-weight:650;color:#4a4668;text-align:center;line-height:1.25;max-width:80%}
.pase-brillo{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.16) 44%,rgba(255,255,255,.04) 52%,transparent 62%);
  transform:translateX(-110%);animation:paseBrillo 6s ease-in-out 1.4s infinite;
}
@keyframes paseBrillo{0%,62%{transform:translateX(-110%)}100%{transform:translateX(110%)}}

/* ══════════ Portada: la lista de espera ══════════ */
.lanzamiento-nota{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px;font-size:14.5px;color:#cfc9ee}
.lanzamiento-nota span{display:block;max-width:560px}
.lanzamiento-nota span svg{display:inline-block;vertical-align:-3px;margin-right:7px;width:16px;height:16px;color:#c4b5fd;animation:destella 2.6s ease-in-out infinite}
.lanzamiento-nota a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(196,181,253,.6)}
.lanzamiento-nota a:hover{text-decoration-color:#fff}

.espera{position:relative;z-index:2;max-width:1120px;margin:64px auto 0;padding:0 24px;scroll-margin-top:90px}
.espera-caja{
  position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center;
  padding:46px;border-radius:32px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 50px 100px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);
}
.espera-caja::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--giro),rgba(255,255,255,.1) 0 55%,#8f6dff 70%,#3ba4ff 80%,#4be3b0 88%,rgba(255,255,255,.1) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:giraBorde 8s linear infinite;
}
.espera-caja::after{
  content:'';position:absolute;width:420px;height:420px;left:-140px;bottom:-200px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(108,71,255,.45),transparent 65%);filter:blur(10px);animation:orbita 14s ease-in-out infinite;
}
.chapa{
  display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#e6e1ff;margin-bottom:18px;
}
.chapa svg{width:14px;height:14px;color:#c4b5fd;animation:destella 2.4s ease-in-out infinite}
.espera-izq{color:#fff}
.espera-izq h2{font-size:clamp(32px,4.2vw,50px);line-height:1.04;letter-spacing:-.045em;margin-bottom:16px}
.espera-izq > p{color:#cfc9ee;font-size:16.5px;max-width:470px}
.pasos-espera{list-style:none;position:relative;display:grid;gap:20px;margin-top:30px}
.pasos-espera::before,.pasos-espera::after{content:'';position:absolute;left:16px;top:18px;bottom:18px;width:2px;border-radius:2px;background:rgba(255,255,255,.12)}
.pasos-espera::after{background:linear-gradient(#8f6dff,#3ba4ff,#4be3b0);transform-origin:top;transform:scaleY(var(--avance,0));transition:transform .9s cubic-bezier(.2,.8,.3,1)}
.pasos-espera li{position:relative;z-index:1;display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.pasos-espera .num{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:850;font-size:14.5px;color:#fff;
  background:#2a1f66;border:1.5px solid rgba(143,109,255,.5);transition:background .4s,box-shadow .4s,transform .4s;
}
.pasos-espera li.activo .num{background:linear-gradient(135deg,#8f6dff,#5a37f5);transform:scale(1.12);box-shadow:0 0 0 6px rgba(143,109,255,.18),0 10px 24px -8px rgba(108,71,255,.9)}
.pasos-espera b{display:block;font-size:16px;font-weight:800;color:#fff}
.pasos-espera small{display:block;font-size:14px;color:#b9b2e0;margin-top:2px}
.pasos-espera li.activo b{color:#c4b5fd}

/* ══════════ Encantia Pro (portada) ══════════ */
.sec-pro{
  position:relative;overflow:hidden;color:#fff;border-radius:36px;margin:0 16px;isolation:isolate;
  background:radial-gradient(900px 520px at 85% 0%,#2b1b8f 0%,transparent 60%),
             radial-gradient(800px 520px at 0% 100%,#0e5a8a 0%,transparent 60%),var(--noche);
  scroll-margin-top:80px;
}
.sec-pro .etiqueta{background:rgba(255,255,255,.1);color:#d8cfff}
.sec-pro .sec-cab p{color:#c9c2ec}
.pro-rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;perspective:1200px}
.pro-item{
  position:relative;border-radius:20px;padding:22px 20px;overflow:hidden;
  background:rgba(255,255,255,.045);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);
  --luz-color:rgba(143,109,255,.28);
}
/* Ya entró: lo que pase con el mouse responde sin esperar su turno de entrada */
.revelado{transition-delay:0s !important}
.pro-item.revelar{transform:translateY(30px) rotateX(16deg);transform-origin:50% 0}
.pro-item.revelar.visto{transform:none}
.pro-item:hover{transform:translateY(-6px) !important;border-color:rgba(196,181,253,.42);background:rgba(255,255,255,.07);box-shadow:0 28px 54px -30px rgba(108,71,255,.9)}
.pro-item h3{display:flex;gap:9px;align-items:center;font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.pro-item h3 svg{width:19px;height:19px;flex-shrink:0;color:#4be3b0;stroke-dasharray:32;stroke-dashoffset:32}
.pro-item.visto h3 svg{animation:dibujaChulo .7s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:calc(var(--d,0ms) + 350ms)}
@keyframes dibujaChulo{to{stroke-dashoffset:0}}
.pro-item p{font-size:13.8px;color:#c9c2ec;margin-top:7px;line-height:1.55}

/* El Pase VIP en la portada */
.vip-bloque{
  position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center;
  margin-top:70px;padding:48px;border-radius:30px;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.1);
}
.vip-bloque .pase-marco{margin:0 auto}
.chapa-vip{display:inline-block;font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:#0b0820;background:linear-gradient(135deg,#7ff0d0,#4be3b0);padding:5px 11px;border-radius:999px;margin-bottom:14px}
.vip-bloque h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.04em;line-height:1.06;margin-bottom:12px}
.vip-bloque-txt > p{color:#c9c2ec;font-size:16px;max-width:470px}
.comparar{width:100%;border-collapse:separate;border-spacing:0;margin:24px 0 26px;font-size:14.5px;position:relative}
.comparar th{font-size:12.5px;font-weight:800;letter-spacing:.04em;color:#b9b2e0;text-align:left;padding:0 12px 10px}
.comparar td{padding:12px;border-top:1px solid rgba(255,255,255,.09);color:#e6e1ff}
.comparar td:first-child{color:#b9b2e0;padding-left:0}
.comparar th:first-child{padding-left:0}
.comparar .col-vip{color:#fff;font-weight:800;background:linear-gradient(180deg,rgba(143,109,255,.2),rgba(143,109,255,.08))}
.comparar th.col-vip{color:#c4b5fd;border-radius:12px 12px 0 0;padding-top:10px}
.comparar tr:last-child td.col-vip{border-radius:0 0 12px 12px}
.comparar tbody tr{transition:background .25s}
.comparar tbody tr:hover td{background-color:rgba(255,255,255,.035)}
.comparar.revelar tbody tr{opacity:0;transform:translateX(-14px);transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.3,1)}
.comparar.revelar.visto tbody tr{opacity:1;transform:none}
.comparar.revelar.visto tbody tr:nth-child(2){transition-delay:.12s}
.comparar.revelar.visto tbody tr:nth-child(3){transition-delay:.24s}
.vip-bloque-acc{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.vip-bloque-acc span{font-size:14px;color:#9d97c4}

/* ── Tamaños ── */
@media (max-width:1080px){
  .pro-rejilla{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .espera-caja{grid-template-columns:1fr;padding:34px 26px;gap:30px}
  .vip-bloque{grid-template-columns:1fr;padding:34px 24px;gap:34px}
}
@media (max-width:600px){
  .anuncio{font-size:12.5px;padding:8px 14px}
  .espera{padding:0 14px;margin-top:44px}
  .espera-caja{padding:28px 18px;border-radius:26px}
  .lz-caja{padding:24px 18px 20px;border-radius:20px}
  .pro-rejilla{grid-template-columns:1fr}
  .sec-pro{margin:0;border-radius:26px}
  .vip-bloque{padding:28px 18px;margin-top:50px}
  .comparar{font-size:13.5px}
  .comparar td,.comparar th{padding-left:8px;padding-right:8px}
}
@media (prefers-reduced-motion:reduce){
  .anuncio,.anuncio::after,.chispas i,.pase-marco,.pase-brillo,.pase::before,.espera-caja::before,.espera-caja::after,.btn-latido,.pase-mes,.linea-h{animation:none !important}
  .linea-h{opacity:1;filter:none;transform:none}
  .pro-item.revelar,.comparar.revelar tbody tr{transform:none;opacity:1}
  .pro-item h3 svg{stroke-dashoffset:0}
}


/* ═══════════════════════════ Segunda vuelta (17-10-2026): más vida ═══════════════════════════ */

/* ── El telón de entrada: el logo aparece y la cortina se levanta. Una vez por pestaña ── */
#telon{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;pointer-events:none;background:var(--noche);
  animation:telonSube .65s cubic-bezier(.7,0,.2,1) .6s both;
}
#telon::before{content:'';position:absolute;inset:0;background:radial-gradient(640px 420px at 50% 50%,rgba(108,71,255,.4),transparent 70%)}
#telon .telon-logo{
  position:relative;width:88px;height:88px;border-radius:27px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:42px;
  background:linear-gradient(135deg,#8f6dff,#5a37f5 55%,#3ba4ff);box-shadow:0 30px 70px -18px rgba(108,71,255,.95),inset 0 1px 0 rgba(255,255,255,.3);
  animation:telonLogo .6s cubic-bezier(.34,1.56,.64,1) both;
}
#telon .telon-logo::after{content:'';position:absolute;inset:-10px;border-radius:34px;border:2px solid rgba(196,181,253,.6);animation:telonOnda 1s ease-out .25s both}
@keyframes telonLogo{from{transform:scale(.35) rotate(-14deg);opacity:0}}
@keyframes telonOnda{from{transform:scale(.8);opacity:1}to{transform:scale(1.9);opacity:0}}
@keyframes telonSube{to{clip-path:inset(0 0 100% 0)}}
html.sin-telon #telon{display:none}

/* ── Cabecera: una línea de luz cuando se pega arriba ── */
.cab.pegada::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1.5px;pointer-events:none;background:linear-gradient(90deg,transparent,#8f6dff 30%,#3ba4ff 65%,transparent);opacity:.9}

/* ── Botones: degradado que se corre, onda al tocar ── */
.btn{position:relative;overflow:hidden}
.btn-prim{background:linear-gradient(135deg,#8f6dff 0%,#5a37f5 50%,#3ba4ff 100%);background-size:220% 100%;background-position:0 0;transition:transform .25s,box-shadow .25s,background-position .6s cubic-bezier(.2,.8,.3,1),border-color .25s,color .25s}
.btn-prim:hover{background-position:100% 0}
.onda{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.5);transform:scale(0);animation:onda .7s ease-out forwards}
.btn-borde .onda,.btn-fantasma .onda,.lz-tiene-pase .onda{background:rgba(108,71,255,.22)}
@keyframes onda{to{transform:scale(var(--s,24));opacity:0}}

/* ── La flechita de «baje» ── */
.bajar{display:inline-flex;flex-direction:column;align-items:center;gap:7px;margin-top:30px;color:#b9b2e0;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;transition:opacity .4s,transform .4s}
.bajar i{width:22px;height:34px;border:2px solid rgba(255,255,255,.35);border-radius:12px;position:relative;transition:border-color .3s}
.bajar:hover i{border-color:#c4b5fd}
.bajar i::after{content:'';position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:3px;background:#c4b5fd;animation:bajaPunto 1.6s ease-in-out infinite}
@keyframes bajaPunto{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(12px);opacity:0}}
html.bajo .bajar{opacity:0;transform:translateY(8px);pointer-events:none}

/* ── Paralaje: las luces bajan más despacio que la página ── */
[data-paralaje]{transform:translateY(var(--py,0))}
.portada .orbe[data-paralaje]{animation:none}

/* ── Estrellas fugaces ── */
.fugaz{
  position:absolute;left:var(--x);top:var(--y);width:160px;height:2px;border-radius:2px;pointer-events:none;opacity:0;transform-origin:left center;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 55%,rgba(196,181,253,0));filter:drop-shadow(0 0 6px rgba(196,181,253,.95));
  animation:fugaz 1.35s cubic-bezier(.2,.6,.3,1) forwards;
}
@keyframes fugaz{0%{opacity:0;transform:rotate(-22deg) translateX(-40px) scaleX(.3)}12%{opacity:1}100%{opacity:0;transform:rotate(-22deg) translateX(460px) scaleX(1)}}

/* ── Auroras: luces de color que flotan despacio dentro de las zonas oscuras ── */
.aurora{
  position:absolute;left:var(--x);top:var(--y);width:var(--t,420px);height:var(--t,420px);border-radius:50%;pointer-events:none;z-index:-1;opacity:.6;
  background:radial-gradient(circle,var(--c) 0%,transparent 62%);filter:blur(38px);will-change:transform;
  animation:auroraFlota var(--d,18s) ease-in-out infinite alternate;
}
@keyframes auroraFlota{to{transform:translate(14%,-12%) scale(1.18)}}

/* ── Títulos palabra por palabra ── */
.palabra{display:inline-block}
.titulo-animado .palabra{opacity:0;transform:translateY(.55em);filter:blur(8px);transition:opacity .7s,transform .85s cubic-bezier(.2,.8,.3,1),filter .7s;transition-delay:calc(var(--i,0) * 60ms)}
.titulo-animado.palabras-ok .palabra{opacity:1;transform:none;filter:none}

/* ── Tarjetas que se inclinan hacia el mouse ── */
.luz.inclinada{transition:transform .1s linear,box-shadow .35s,border-color .3s,background .3s !important}

/* ── El formulario: la barrita de avance, el anillo al escribir, el botón late cuando está completo ── */
.lz-caja{transition:box-shadow .5s}
.lz-caja::before{
  content:'';position:absolute;inset:-2px;border-radius:26px;padding:2px;pointer-events:none;opacity:0;transition:opacity .5s;
  background:conic-gradient(from var(--giro),#8f6dff,#3ba4ff 30%,#4be3b0 55%,#8f6dff 80%,#8f6dff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:giraBorde 5s linear infinite;
}
.lz-caja:focus-within::before{opacity:1}
.lz-caja:focus-within{box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08),0 36px 90px -36px rgba(108,71,255,.85)}
.lz-avance{position:absolute;top:0;left:34px;right:34px;height:4px;border-radius:0 0 6px 6px;background:rgba(108,71,255,.1);overflow:hidden}
.lz-avance i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg,#8f6dff,#3ba4ff 55%,#4be3b0);transition:width .55s cubic-bezier(.2,.8,.3,1)}
.lz-avance.lleno i{box-shadow:0 0 14px rgba(75,227,176,.9)}
.lz-boton.lista{animation:latidoBoton 1.8s ease-in-out infinite}
.lz-campo label{transition:color .25s}
.lz-campo:focus-within label{color:var(--violeta)}
.lz-listo-ic{position:relative}
.lz-anillo{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(31,194,138,.55);animation:anilloListo 1.4s ease-out .5s both}
.lz-anillo + .lz-anillo{animation-delay:.85s}
@keyframes anilloListo{from{transform:scale(.6);opacity:1}to{transform:scale(1.9);opacity:0}}

/* ── El sello que gira en la esquina del formulario ── */
.sello{
  position:absolute;top:-28px;right:-24px;width:108px;height:108px;z-index:3;pointer-events:none;border-radius:50%;
  background:linear-gradient(135deg,#8f6dff,#5a37f5 60%,#3ba4ff);box-shadow:0 0 0 4px #fff,0 18px 34px -12px rgba(108,71,255,.85);
  animation:selloEntra .8s cubic-bezier(.34,1.56,.64,1) .6s both;
}
.sello svg{width:100%;height:100%;animation:giraSello 18s linear infinite}
.sello text{fill:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;font-family:'Inter','Segoe UI',system-ui,sans-serif}
.sello i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;color:#fff;font-size:28px;animation:destella 2.4s ease-in-out infinite}
.sello.sello-listo{background:linear-gradient(135deg,#4be3b0,#1fc28a 60%,#3ba4ff)}
@keyframes giraSello{to{transform:rotate(360deg)}}
@keyframes selloEntra{from{transform:scale(0) rotate(-40deg);opacity:0}}

/* ── La tarjeta del pase: el lector recorre el QR ── */
.pase-qr{position:relative;overflow:hidden}
.pase-qr::after{
  content:'';position:absolute;left:4px;right:4px;top:-20%;height:18%;border-radius:4px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(108,71,255,.55),transparent);animation:escanea 3.8s ease-in-out 1.2s infinite;
}
@keyframes escanea{0%,70%{top:-20%;opacity:0}5%{opacity:1}60%{top:100%;opacity:1}66%{opacity:0}100%{top:-20%;opacity:0}}

/* ── La cinta que se desliza (Encantia Pro) ── */
.cinta{overflow:hidden;padding:0 0 46px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.cinta-pista{display:flex;gap:12px;width:max-content;animation:cinta 38s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
.cinta span{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;font-size:13.5px;font-weight:650;color:#e6e1ff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);white-space:nowrap}
.cinta span svg{width:13px;height:13px;color:#4be3b0}
@keyframes cinta{to{transform:translateX(-50%)}}

/* ── Encantia Pro: puntos que derivan al fondo, las tarjetas ya no esperan para responder ── */
.sec-pro::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 35%,#000,transparent);mask-image:radial-gradient(80% 60% at 50% 35%,#000,transparent);
  animation:deriva 70s linear infinite;
}
@keyframes deriva{to{background-position:260px 130px}}
.pro-item.revelado:hover,.pro-item:not(.revelar):hover{transform:translateY(-6px)}
.comparar .col-vip{position:relative;overflow:hidden}
.comparar td.col-vip::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-18deg);animation:sheen 5s ease-in-out 2s infinite}
@keyframes sheen{0%,70%{left:-60%}100%{left:140%}}

/* ── Al bajar, con el scroll mismo (donde el navegador sabe): el pase entra girando ── */
@supports (animation-timeline: view()){
  .vip-bloque-pase{animation:llegaPase linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
  @keyframes llegaPase{from{transform:translateX(-50px) rotate(-7deg) scale(.9);opacity:0}}
}

/* ── /vip: qué pasa después de reservar ── */
.pasos-vip{list-style:none;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px;padding-top:4px}
.pasos-vip::before,.pasos-vip::after{content:'';position:absolute;left:12.5%;right:12.5%;top:22px;height:2px;border-radius:2px;background:rgba(255,255,255,.12)}
.pasos-vip::after{background:linear-gradient(90deg,#8f6dff,#3ba4ff,#4be3b0);transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.2,.8,.3,1) .3s}
.pasos-vip.visto::after{transform:scaleX(1)}
.pasos-vip li{position:relative;text-align:center;padding:0 10px}
.pasos-vip .num{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;font-weight:850;color:#fff;
  background:#2a1f66;border:1.5px solid rgba(143,109,255,.5);transform:scale(.3);opacity:0;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s,background .4s,box-shadow .4s;transition-delay:calc(var(--i,0) * .34s + .3s);
}
.pasos-vip.visto .num{transform:none;opacity:1;background:linear-gradient(135deg,#8f6dff,#5a37f5);box-shadow:0 0 0 6px rgba(143,109,255,.16),0 10px 24px -8px rgba(108,71,255,.9)}
.pasos-vip b{display:block;font-size:16px;font-weight:800}
.pasos-vip small{display:block;font-size:13.8px;color:#c9c2ec;margin-top:5px;line-height:1.5}
.pasos-vip li > b,.pasos-vip li > small{opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s;transition-delay:calc(var(--i,0) * .34s + .55s)}
.pasos-vip.visto li > b,.pasos-vip.visto li > small{opacity:1;transform:none}

@media (max-width:860px){
  .pasos-vip{grid-template-columns:1fr;gap:20px;padding-top:0}
  .pasos-vip::before,.pasos-vip::after{left:20px;right:auto;top:22px;bottom:22px;width:2px;height:auto}
  .pasos-vip::after{transform:scaleY(0);transform-origin:top}
  .pasos-vip.visto::after{transform:scaleY(1)}
  .pasos-vip li{display:grid;grid-template-columns:42px 1fr;gap:2px 14px;text-align:left;padding:0}
  .pasos-vip .num{margin:0;grid-row:span 2}
}
@media (max-width:600px){
  .sello{width:74px;height:74px;top:-34px;right:-8px}
  .sello i{font-size:20px}
  .lz-tit{padding-right:44px}
  .lz-avance{left:22px;right:22px}
  .aurora{opacity:.45}
  .aurora + .aurora{display:none}
  .bajar{margin-top:22px}
  .cinta{padding-bottom:34px}
}
@media (prefers-reduced-motion:reduce){
  #telon{display:none}
  .fugaz,.aurora,.sello svg,.sello i,.sello,.pase-qr::after,.cinta-pista,.sec-pro::before,.comparar td.col-vip::after,.lz-caja::before,.lz-boton.lista,.lz-anillo,.bajar i::after{animation:none !important}
  .titulo-animado .palabra,.pasos-vip .num,.pasos-vip li > b,.pasos-vip li > small{opacity:1;transform:none;filter:none}
  .pasos-vip::after{transform:none}
  [data-paralaje]{transform:none}
}