@font-face{font-family:"Montserrat";src:url(fonts/montserrat-latin.woff) format("woff");font-weight:100 900;font-display:swap}
:root{--violeta:#7d7bff;--violeta2:#a99bff;--fondo:#05040c;--ar:1.7768;--px:0;--py:0;--ph:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAASACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDFu7W0gsS0ixxTRqGVj8yvnHA9SOfb8qrWt7IrzReYXPllVIIZCcZx6GsS5kmmcy3DOznndIeTVuzlSC9t1k/1cJG/HfJGa2U2mTa4XVutwwe3iWJiDvTcNqkensaasMaWrhlzKcbQpBxz+tdBqGgfaJpBp1uT5bHIDABl7EZ9waoro0loXe4Ij2gjIOcZHb35/nSe4F7UY0eyDuis+U+YjJ6VWuYYhbwsIk3NsydoycjmiitANO/JWKzKnB8peR/wKsKeR3gQM7MMYwTnjmiirluQtj//2Q==")}
@media (max-aspect-ratio:1/1){:root{--ar:.8003;--ph:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAAoACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDgBvhZmQ4KttzWik1vd2TG4jC3K/caNceZ7EdPxpsOnTzWZlwRHlmJ9AOp+lVfMjeNIolZWLfOT0OOlUgEmiIl4j2cdG4/nUbRsp5C/gwq06tMgAJbaTg55xnH+FV7mHyn27w/uOmaLCNC81gm0+y2rN5bKVYbQAASCVHfGQOtZ9ofLd5O6KeT6nrT2srlMDyHyed3bHqPSoicWqL3YnH+NAzR0KBbu8hty4Qy7gD744FTXmjzo38J/dmQAMOnf8eayUkaPypY/lZG4I9RzW1Lqom8p8Z2xFSpXgc54xQBn2Vywm4dgiqc5JwFHNW4LyKG9nM8CtG4yykL0wOB6daKKfQCkHEtzvUJscgBCvHX0FTyS29tfXqCAohEiKgbp6UUUmB//9k=")}}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;touch-action:manipulation;background:var(--fondo);color:#e9e8ff;overflow:hidden;overscroll-behavior:none}
body{font-family:"Montserrat",system-ui,sans-serif;font-weight:200;-webkit-font-smoothing:antialiased}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.escena{position:fixed;inset:0;overflow:hidden;background:var(--fondo)}
/* Paralaje con el puntero: el fondo se mueve poco, partículas y niebla más */
.paralaje{position:absolute;inset:-2%;transform:translate3d(calc(var(--px)*-10px),calc(var(--py)*-6px),0);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.escenario{position:absolute;right:2%;top:50%;width:max(100vw,calc(100vh*var(--ar)));height:max(100vh,calc(100vw/var(--ar)));
  transform:translate(0,-50%) scale(1.03);transform-origin:40% 55%;animation:respira 10s ease-in-out infinite;will-change:transform}
@keyframes respira{0%,100%{transform:translate(0,-50%) scale(1.03)}50%{transform:translate(0,-50.35%) scale(1.052)}}
@media (max-aspect-ratio:1/1){.escenario{right:auto;left:50%;transform:translate(-50%,-50%) scale(1.03);animation-name:respira-c;transform-origin:50% 50%}}
@keyframes respira-c{0%,100%{transform:translate(-50%,-50%) scale(1.03)}50%{transform:translate(-50%,-50.35%) scale(1.052)}}
/* Carga: miniatura difuminada mientras llega la imagen buena */
.escenario::before{content:"";position:absolute;inset:0;background:var(--ph) center/cover no-repeat;filter:blur(18px) saturate(1.2);transform:scale(1.04)}
.fondo img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.js .fondo img{opacity:0;transition:opacity 1.1s ease}
.js .listo .fondo img{opacity:1}
.vivo{position:absolute;inset:0;width:100%;height:100%}
.brillos{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none}
.brillo{position:absolute;width:var(--s);left:var(--x);top:var(--y);transform:translate(-50%,-50%);border-radius:50%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(215,210,255,.95) 0%,rgba(125,123,255,.65) 22%,rgba(90,70,255,.22) 48%,transparent 70%);
  animation:pulso var(--d,3.2s) ease-in-out infinite;animation-delay:var(--r,0s);opacity:.3}
.brillo.ojos{aspect-ratio:2.2}
.brillo.costura{aspect-ratio:.45;background:radial-gradient(ellipse,rgba(190,185,255,.8) 0%,rgba(110,100,255,.35) 35%,transparent 70%)}
.brillo.rayo{border-radius:0;aspect-ratio:auto;height:120%;top:-10%;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(140,135,255,.32),rgba(235,232,255,.55),rgba(140,135,255,.32),transparent);animation:rayo 6s ease-in-out infinite}
.brillo.rayo.ciudad{top:var(--y);height:calc(100% - var(--y));animation-duration:4.4s}
.brillo.anilloO{background:radial-gradient(circle,transparent 48%,rgba(150,145,255,.0) 50%,rgba(200,196,255,.85) 58%,rgba(120,110,255,.45) 66%,transparent 76%);animation:pulsoO 3.8s ease-in-out infinite}
.brillo.banda{border-radius:50%;aspect-ratio:auto;height:var(--h);background:radial-gradient(ellipse at center,rgba(170,160,255,.35),rgba(120,110,255,.12) 45%,transparent 70%);animation:banda 5s ease-in-out infinite}
.brillo.banda::after{content:"";position:absolute;inset:25% 0;background:linear-gradient(90deg,transparent 0,rgba(240,238,255,.55) 50%,transparent 100%);background-size:30% 100%;background-repeat:no-repeat;animation:brilloTexto 7s ease-in-out infinite}
.brillo.torre{background:radial-gradient(circle,rgba(235,232,255,1) 0%,rgba(140,130,255,.6) 30%,transparent 70%);animation:parpadeo var(--d,2.4s) steps(1,end) infinite;animation-delay:var(--r,0s)}
.brillo.nave{background:radial-gradient(ellipse,rgba(170,200,255,.9) 0%,rgba(100,120,255,.35) 35%,transparent 70%);aspect-ratio:2.4;animation:pulso 1.6s ease-in-out infinite}
@keyframes pulso{0%,100%{opacity:.22}50%{opacity:.95}}
@keyframes pulsoO{0%,100%{opacity:.25;transform:translate(-50%,-50%) scale(.98)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.03)}}
@keyframes banda{0%,100%{opacity:.35}50%{opacity:.85}}
@keyframes brilloTexto{0%,55%{background-position:-40% 0}100%{background-position:140% 0}}
@keyframes rayo{0%,100%{opacity:.15}50%{opacity:.55}}
@keyframes parpadeo{0%{opacity:.15}8%{opacity:.9}14%{opacity:.25}20%{opacity:1}60%{opacity:.6}72%{opacity:.1}100%{opacity:.15}}
.barrido{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;overflow:hidden}
.barrido::before{content:"";position:absolute;top:-20%;left:-60%;width:35%;height:140%;transform:rotate(14deg);
  background:linear-gradient(90deg,transparent,rgba(150,140,255,.10),rgba(230,225,255,.2),rgba(150,140,255,.10),transparent);animation:barre 12s ease-in-out infinite}
@keyframes barre{0%,72%{left:-60%}100%{left:130%}}
.particulas{position:absolute;inset:-3%;width:106%;height:106%;pointer-events:none;mix-blend-mode:screen;transform:translate3d(calc(var(--px)*14px),calc(var(--py)*9px),0);transition:transform .8s ease-out}
.niebla{position:absolute;left:-20%;right:-20%;bottom:-5%;height:36%;pointer-events:none;opacity:.55;
  background:radial-gradient(ellipse at 30% 80%,rgba(120,110,220,.22),transparent 60%),radial-gradient(ellipse at 75% 90%,rgba(90,80,200,.16),transparent 55%);
  filter:blur(18px);animation:niebla 24s ease-in-out infinite alternate}
@keyframes niebla{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.vineta{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 45% 45%,transparent 58%,rgba(3,2,10,.65) 100%)}
/* Texto visible solo en vertical (la imagen ancha ya lo trae impreso) */
.texto{display:none;position:absolute;left:0;right:0;text-align:center;padding:0 16px;pointer-events:none;text-shadow:0 0 18px rgba(125,123,255,.65),0 2px 10px rgba(0,0,0,.9)}
.proximamente{font-weight:300;letter-spacing:.6em;margin-right:-.6em;font-size:clamp(14px,4vw,22px);color:#f1f0ff;animation:textoPulso 5s ease-in-out infinite}
.llegara{margin-top:.8em;font-weight:300;letter-spacing:.32em;margin-right:-.32em;font-size:clamp(12px,3.2vw,16px);color:var(--violeta2)}
@keyframes textoPulso{0%,100%{text-shadow:0 0 10px rgba(125,123,255,.4),0 2px 10px #000}50%{text-shadow:0 0 22px rgba(150,140,255,.95),0 2px 10px #000}}
@media (max-aspect-ratio:1/1){.texto{display:block;bottom:max(13vh,90px)}}
@media (max-aspect-ratio:7/10){
  .paralaje{inset:0}
  .escenario{width:100vw;height:calc(100vw/var(--ar));top:42%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%)}
  .escena{background:radial-gradient(ellipse at 50% 40%,#17123a 0%,#07051a 55%,#030209 100%)}
  .texto{bottom:auto;top:calc(42% + 62.5vw + 4vh)}
}
.pie{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:10px;letter-spacing:.12em;color:rgba(200,198,255,.45);padding:0 16px}
/* Pantalla de carga */
.carga{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:radial-gradient(ellipse at center,#0d0a26 0%,#05040c 60%,#020106 100%);
  transition:opacity 1.1s ease,visibility 1.1s}
.carga.fuera{opacity:0;visibility:hidden}
.carga-centro{display:flex;flex-direction:column;align-items:center;gap:18px}
.carga-anillo{width:min(34vw,150px);height:auto;overflow:visible}
.carga-anillo circle{fill:none}
.ca-halo{stroke:rgba(125,123,255,.35);stroke-width:10;filter:blur(6px);animation:caHalo 2.4s ease-in-out infinite}
.ca-base{stroke:rgba(169,155,255,.14);stroke-width:3}
.ca-trazo{stroke:#cfcaff;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:var(--p,2) 100;transform:rotate(-90deg);transform-origin:60px 60px;
  filter:drop-shadow(0 0 4px rgba(125,123,255,1)) drop-shadow(0 0 10px rgba(125,123,255,.8));transition:stroke-dasharray .35s ease}
.ca-giro{stroke:rgba(169,155,255,.55);stroke-width:1;stroke-dasharray:6 19;transform-origin:60px 60px;animation:caGiro 6s linear infinite}
.ca-eje{stroke:rgba(190,185,255,.7);stroke-width:1.2;stroke-linecap:round;animation:caHalo 2.4s ease-in-out infinite}
@keyframes caGiro{to{transform:rotate(360deg)}}
@keyframes caHalo{0%,100%{opacity:.35}50%{opacity:1}}
.carga-nombre{font-weight:200;font-size:clamp(18px,2.4vw,28px);letter-spacing:.7em;margin-right:-.7em;color:#e6e5f5;text-shadow:0 0 14px rgba(125,123,255,.6)}
.carga-barra{width:min(56vw,260px);height:1px;background:rgba(169,155,255,.18);overflow:hidden}
.carga-barra span{display:block;height:100%;width:0;background:linear-gradient(90deg,#6f6cff,#e2deff);box-shadow:0 0 8px #8d88ff;transition:width .35s ease}
.carga-pct{font-size:11px;letter-spacing:.4em;margin-right:-.4em;color:rgba(200,198,255,.6);font-variant-numeric:tabular-nums}
.carga.lista .ca-trazo{stroke:#fff}
.carga.lista .carga-anillo{animation:caPulso .7s ease-out forwards}
@keyframes caPulso{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1.6);opacity:0}}
.destello{position:fixed;inset:0;z-index:19;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(170,160,255,.55),rgba(90,80,220,.15) 35%,transparent 65%);animation:destello 1.3s ease-out forwards}
@keyframes destello{from{opacity:1}to{opacity:0}}
.carga-barra,.carga-pct{transition:opacity .6s ease}
.carga.cargado .carga-barra,.carga.cargado .carga-pct{opacity:0;position:absolute;pointer-events:none}
.carga.cargado .ca-trazo{stroke:#e6e3ff;animation:caLatido 2.6s ease-in-out infinite}
@keyframes caLatido{0%,100%{filter:drop-shadow(0 0 4px rgba(125,123,255,1)) drop-shadow(0 0 8px rgba(125,123,255,.6))}50%{filter:drop-shadow(0 0 7px rgba(150,140,255,1)) drop-shadow(0 0 18px rgba(125,123,255,1))}}
.btn-entrar{margin-top:6px;font:inherit;font-weight:300;font-size:clamp(13px,1.2vw,16px);letter-spacing:.6em;padding:1em 1.4em 1em 2em;color:#efeeff;
  background:transparent;border:1px solid rgba(169,155,255,.6);cursor:pointer;opacity:0;transform:translateY(8px);
  transition:opacity .9s ease,transform .9s ease,background .35s,box-shadow .35s;animation:btnBrillo 2.6s ease-in-out infinite}
.btn-entrar.ver{opacity:1;transform:none}
.btn-entrar:hover,.btn-entrar:focus-visible{background:rgba(125,123,255,.16);box-shadow:0 0 26px rgba(125,123,255,.7);outline:none}
@keyframes btnBrillo{0%,100%{box-shadow:0 0 0 rgba(125,123,255,0)}50%{box-shadow:0 0 18px rgba(125,123,255,.45)}}
/* Entrada de la escena tras la carga */
.escena{transition:filter 1.6s ease,transform 2.2s cubic-bezier(.2,.7,.2,1)}
.cargando .escena{filter:brightness(.3) blur(6px);transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .brillo{opacity:.55}.barrido{display:none}.cargando .escena{filter:none;transform:none}
  .paralaje,.particulas{transform:none}
}