/* Onspit - pantalla de carga de la página principal: el logo (botón de encendido) se dibuja, se enciende y abre el sitio */
.pre{display:none}
html.pre-on .pre,html.pre-listo .pre{display:grid}
html.pre-on,html.pre-on body{overflow:hidden;background:#0b0820}
.pre{touch-action:none;overscroll-behavior:none}
.pre{position:fixed;inset:0;z-index:9999;place-items:center;overflow:hidden;color:#fff;cursor:progress;
  background:radial-gradient(120% 90% at 50% 38%,#3a24a8 0%,#1d1360 42%,#0b0820 100%);
  font-family:"DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}

/* ----- Fondo: rejilla en perspectiva, orbes de luz y chispas ----- */
.pre-fondo{position:absolute;inset:0;pointer-events:none}
.pre-rejilla{position:absolute;left:-50%;right:-50%;bottom:-10%;height:70%;transform:perspective(520px) rotateX(62deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(160,140,255,.34) 1px,transparent 1px),linear-gradient(90deg,rgba(160,140,255,.34) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 85%);mask-image:linear-gradient(to top,#000 0%,transparent 85%);
  animation:preRejilla 3.2s linear infinite}
@keyframes preRejilla{to{background-position:0 56px}}
.pre-orbe{position:absolute;border-radius:50%;opacity:.7;will-change:transform;animation:preFlota 7s ease-in-out infinite alternate}
.pre-orbe.o1{width:60vmax;height:60vmax;left:-22vmax;top:-20vmax;background:radial-gradient(circle,rgba(106,75,255,.9) 0%,rgba(106,75,255,0) 68%)}
.pre-orbe.o2{width:52vmax;height:52vmax;right:-20vmax;bottom:-22vmax;background:radial-gradient(circle,rgba(37,99,235,.8) 0%,rgba(37,99,235,0) 68%);animation-delay:-2.5s;opacity:.6}
.pre-orbe.o3{width:34vmax;height:34vmax;right:6%;top:0;background:radial-gradient(circle,rgba(240,97,109,.6) 0%,rgba(240,97,109,0) 68%);animation-delay:-4s;opacity:.5}
@keyframes preFlota{to{transform:translate(4vmax,3vmax) scale(1.12)}}
.pre-chispa{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#ffd36b;box-shadow:0 0 12px 3px rgba(255,211,107,.7);opacity:0;will-change:transform,opacity;animation:preChispa 4.2s ease-in infinite}
.pre-chispa.c1{left:14%;animation-delay:.2s}.pre-chispa.c2{left:30%;animation-delay:1.4s;background:#b9a9ff;box-shadow:0 0 12px 3px rgba(185,169,255,.7)}
.pre-chispa.c3{left:47%;animation-delay:2.4s}.pre-chispa.c4{left:63%;animation-delay:.8s;background:#7dd3fc;box-shadow:0 0 12px 3px rgba(125,211,252,.6)}
.pre-chispa.c5{left:78%;animation-delay:1.9s}.pre-chispa.c6{left:90%;animation-delay:3s;background:#b9a9ff;box-shadow:0 0 12px 3px rgba(185,169,255,.7)}
@keyframes preChispa{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-92vh) scale(1.1);opacity:0}}

/* ----- Centro ----- */
.pre-centro{position:relative;display:grid;justify-items:center;text-align:center;padding:24px;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .6s}
.pre-logo{position:relative;width:212px;height:212px;display:grid;place-items:center;margin-bottom:26px}
.pre-nucleo{position:relative;z-index:2;display:grid;place-items:center;width:128px;height:128px;border-radius:36px;
  background:linear-gradient(140deg,#9b86ff 0%,#6a4bff 45%,#3b22b8 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 18px 50px -10px rgba(106,75,255,.9),0 0 80px -10px rgba(138,114,255,.8);
}
.pre-nucleo svg{width:76px;height:76px;filter:drop-shadow(0 0 8px rgba(255,255,255,.55))}
/* Las animaciones de entrada solo corren cuando el script agrega .pre-go: si el navegador las retrasa, todo queda visible igual */
.pre-go .pre-nucleo{animation:preNucleo .9s cubic-bezier(.2,1.4,.3,1) .1s both}
@keyframes preNucleo{from{transform:scale(.4) rotate(-18deg);opacity:0}to{transform:none;opacity:1}}
.pre-arco,.pre-palo{stroke-dasharray:100;stroke-dashoffset:0}
.pre-go .pre-arco{animation:preTrazo 1.1s cubic-bezier(.6,0,.2,1) .45s both}
.pre-go .pre-palo{animation:preTrazo .5s ease-out 1.2s both}
@keyframes preTrazo{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
/* Anillo giratorio de luz */
.pre-anillo{position:absolute;inset:8px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,#8a72ff 70deg,#ffd36b 120deg,transparent 170deg,transparent 200deg,#7dd3fc 260deg,transparent 320deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  will-change:transform;animation:preGira 2.4s linear infinite}
@keyframes preGira{to{transform:rotate(360deg)}}
@keyframes preAparece{from{opacity:0}to{opacity:1}}
/* Ondas de energía */
.pre-onda{position:absolute;inset:34px;border-radius:50%;border:1.5px solid rgba(185,169,255,.55);opacity:0;animation:preOnda 2.6s ease-out infinite}
.pre-onda.w1{animation-delay:1.1s}.pre-onda.w2{animation-delay:1.97s}.pre-onda.w3{animation-delay:2.84s}
@keyframes preOnda{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.1);opacity:0}}

/* Marca y lema */
.pre-marca{display:flex;gap:.08em;margin:0;font:700 clamp(2.1rem,6vw,3.2rem)/1 "Space Grotesk",system-ui,sans-serif;letter-spacing:.32em;padding-left:.32em}
.pre-marca span{display:inline-block;
  background:linear-gradient(180deg,#fff 30%,#cfc4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.pre-go .pre-marca span{animation:preLetra .7s cubic-bezier(.2,.8,.2,1) both}
.pre-marca span:nth-child(1){animation-delay:.95s}.pre-marca span:nth-child(2){animation-delay:1.03s}.pre-marca span:nth-child(3){animation-delay:1.11s}
.pre-marca span:nth-child(4){animation-delay:1.19s}.pre-marca span:nth-child(5){animation-delay:1.27s}.pre-marca span:nth-child(6){animation-delay:1.35s}
@keyframes preLetra{from{opacity:0;transform:translateY(22px) scale(.92)}to{opacity:1;transform:none}}
.pre-lema{margin:14px 0 0;font-size:clamp(.82rem,2.4vw,.98rem);letter-spacing:.18em;text-transform:uppercase;color:#cfc4ff}
.pre-go .pre-lema{animation:preSube .8s ease 1.45s both}
@keyframes preSube{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Progreso */
.pre-barra{position:relative;width:min(260px,64vw);height:4px;margin:30px 0 0;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.pre-go .pre-barra,.pre-go .pre-estado{animation:preAparece .5s ease .45s both}
.pre-barra i{position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#8a72ff,#b9a9ff 55%,#ffd36b);box-shadow:0 0 14px rgba(255,211,107,.8)}
.pre-estado{display:flex;align-items:baseline;gap:12px;margin:12px 0 0;font:600 .95rem "Space Grotesk",system-ui,sans-serif;color:#fff;font-variant-numeric:tabular-nums}
.pre-estado em{font:500 .82rem "DM Sans",system-ui,sans-serif;font-style:normal;color:rgba(207,196,255,.85);letter-spacing:.04em}
.pre-estado em::after{content:"";display:inline-block;width:1.1em;text-align:left;animation:prePuntos 1.2s steps(4) infinite}
@keyframes prePuntos{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* ----- Salida: el logo se enciende, destello y el sitio aparece ----- */
.pre-telon{position:absolute;inset:0;pointer-events:none;opacity:0;will-change:opacity;
  background:radial-gradient(circle at 50% 42%,#fff 0%,#e4dcff 22%,rgba(185,169,255,.55) 45%,rgba(138,114,255,0) 75%)}
.pre-fin .pre-telon{animation:preDestello .9s cubic-bezier(.3,0,.2,1) forwards}
@keyframes preDestello{0%{opacity:0}30%{opacity:.95}100%{opacity:0}}
.pre-fin .pre-nucleo{animation:none;opacity:1;transform:scale(1.18);box-shadow:0 0 0 2px rgba(255,255,255,.6) inset,0 0 120px 20px rgba(255,211,107,.55),0 0 60px rgba(138,114,255,1);transition:transform .35s,box-shadow .35s}
.pre-fin .pre-centro{transform:scale(1.12);opacity:0;transition-delay:.18s}
.pre-fin{animation:preSale .75s ease .45s forwards;cursor:default;pointer-events:none}
@keyframes preSale{to{opacity:0;visibility:hidden}}
/* La página principal entra suavemente después de la pantalla de carga */
html.pre-listo main,html.pre-listo .top,html.pre-listo .util{animation:preEntra .9s cubic-bezier(.2,.7,.2,1)}
@keyframes preEntra{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
@media(max-width:520px){.pre-logo{width:176px;height:176px;margin-bottom:22px}.pre-nucleo{width:108px;height:108px;border-radius:30px}.pre-nucleo svg{width:64px;height:64px}
  .pre-marca{letter-spacing:.24em;padding-left:.24em}}
@media (prefers-reduced-motion:reduce){.pre{display:none!important}}

/* Celulares: rejilla quieta y menos capas animadas (Safari de iPhone pinta más lento los efectos de pantalla completa) */
@media (max-width:820px),(pointer:coarse){
  .pre-rejilla{animation:none}
  .pre-orbe{animation-duration:10s}
  .pre-chispa.c2,.pre-chispa.c4,.pre-chispa.c6{display:none}
  .pre-nucleo svg{filter:none}
  .pre-onda.w3{display:none}
}