:root{
  --pink:#ff1fa8; --cyan:#00c8ff; --green:#7cff1f; --yellow:#ffe81f; --purple:#b026ff;
  --bg:#0a0420;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Rajdhani',system-ui,sans-serif;color:#fff;background:var(--bg);
  overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.bg{position:fixed;inset:-20px;background:url(fondo.jpg) center/cover no-repeat;
  filter:blur(6px) saturate(1.3);transform:scale(1.05);animation:drift 30s ease-in-out infinite alternate;z-index:-3}
.overlay{position:fixed;inset:0;z-index:-2;
  background:radial-gradient(ellipse at center,rgba(10,4,32,.35) 0%,rgba(10,4,32,.85) 75%,#0a0420 100%)}
#particles{position:fixed;inset:0;z-index:-1;pointer-events:none}
@keyframes drift{to{transform:scale(1.15) translate(-1.5%,-1%)}}

.wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2rem 1rem;gap:1.4rem;text-align:center}

/* LOGO con brillo en contorno */
.logo-box picture{position:relative;display:block;width:100%;height:100%;z-index:2}
.logo-box{position:relative;width:min(70vw,58vh,520px);aspect-ratio:1;animation:float 6s ease-in-out infinite}
.logo{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;z-index:2;
  box-shadow:0 0 25px rgba(255,31,168,.8),0 0 60px rgba(0,200,255,.55),0 0 110px rgba(176,38,255,.45);
  animation:pulse 3s ease-in-out infinite}
.logo-glow{position:absolute;inset:-14px;border-radius:50%;z-index:1;
  background:conic-gradient(var(--pink),var(--purple),var(--cyan),var(--green),var(--yellow),var(--pink));
  filter:blur(22px);opacity:.9;animation:spin 6s linear infinite}
.logo-glow::after{content:"";position:absolute;inset:4px;border-radius:50%;
  background:inherit;filter:blur(40px);opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-12px)}}
@keyframes pulse{50%{box-shadow:0 0 40px rgba(0,200,255,.9),0 0 90px rgba(255,31,168,.6),0 0 150px rgba(124,255,31,.35)}}

/* Texto glitch */
.soon{position:relative;font-family:'Orbitron',sans-serif;font-weight:800;
  font-size:clamp(1.8rem,6vw,3.6rem);letter-spacing:.35em;padding-left:.35em;
  text-shadow:0 0 10px var(--cyan),0 0 25px var(--pink)}
.soon::before,.soon::after{content:attr(data-text);position:absolute;inset:0;padding-left:.35em}
.soon::before{color:var(--pink);animation:glitch 2.5s infinite steps(1);clip-path:inset(0 0 60% 0)}
.soon::after{color:var(--cyan);animation:glitch 3s infinite reverse steps(1);clip-path:inset(55% 0 0 0)}
@keyframes glitch{0%,90%,100%{transform:none;opacity:0}92%{transform:translate(-4px,1px);opacity:1}95%{transform:translate(4px,-1px);opacity:1}}


.foot{text-align:center;padding:1rem;font-size:.9rem;color:#a99bd6}

@media (prefers-reduced-motion:reduce){*{animation:none!important}}