/* EPCE · recorrido completo (boceto) — portada + piezas comunes */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--lado,#111);font-family:Montserrat,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;-webkit-tap-highlight-color:transparent}
/* una sola columna con la proporción de un celular; en PC/TV queda centrada */
.scroller,.fija{position:fixed;top:0;bottom:0;left:0;right:0;margin:0 auto;width:min(100%,62svh);container-type:size}
.scroller{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
.scroller::-webkit-scrollbar{display:none}
.fija{pointer-events:none;z-index:50}

/* ================= PORTADA (igual que portadas-v3) ================= */
/* ---------- estructura común ---------- */
  .hero{position:relative;height:100cqh;overflow:hidden}
  .capa{position:absolute;inset:0}
  .lento{transform:translateY(calc(var(--p,0) * 28cqh))}
  .rapido{transform:translateY(calc(var(--p,0) * -4cqh)) scale(calc(1 + var(--p,0) * .08));transform-origin:50% 100%}
  .desvanece{opacity:calc(1 - var(--p,0) * 1.6)}
  .persona{position:absolute;bottom:0}
  .persona img{display:block;width:100%;height:auto}
  .funde img{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 16%);mask-image:linear-gradient(to top,transparent 0,#000 16%)}
  .desliza{position:absolute;left:0;right:0;bottom:2.2cqh;text-align:center;font-size:2.8cqw;letter-spacing:.3em;font-weight:500;opacity:.75;animation:rebote 1.8s ease-in-out infinite}
  @keyframes rebote{50%{transform:translateY(.8cqh)}}


  /* ---------- animaciones de entrada ---------- */
  .go [data-a]{animation-fill-mode:both;animation-duration:1s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-delay:calc(var(--d,0) * 1ms)}
  [data-a]{opacity:0}
  .go [data-a]{opacity:1}
  .go [data-a="baja"]{animation-name:baja}
  .go [data-a="sube"]{animation-name:sube;animation-duration:1.3s}
  .go [data-a="barre"]{animation-name:barre;animation-duration:.9s}
  .go [data-a="pop"]{animation-name:pop;animation-duration:.8s;animation-timing-function:cubic-bezier(.3,1.6,.5,1)}
  .go [data-a="neon"]{animation-name:neon;animation-duration:1.6s;animation-timing-function:linear}
  .go [data-a="aparece"]{animation-name:aparece;animation-duration:1.4s}
  @keyframes baja{from{opacity:0;transform:translateY(-4cqh)}}
  @keyframes sube{from{opacity:0;transform:translateY(30cqh)}}
  @keyframes barre{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes pop{from{opacity:0;transform:scale(.4)}}
  @keyframes aparece{from{opacity:0;filter:blur(2cqw)}}
  @keyframes neon{0%{opacity:0}10%{opacity:1}14%{opacity:.1}22%{opacity:1}26%{opacity:.2}40%{opacity:1}44%{opacity:.4}50%,100%{opacity:1}}
  /* letras una por una */
  .letras{display:inline-block}
  .letras .l{display:inline-block}
  .go .letras .l{animation:letra .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 1ms + var(--i) * 70ms)}
  @keyframes letra{from{opacity:0;transform:translateY(60%) rotate(6deg)}}

  /* =========== 1 · ELEGANTE =========== */
  .t1{background:#ecebe7;color:#12307a}
  .t1 .hero{background:
     radial-gradient(circle at 50% 45%,#f6f5f2 0,#e7e5e0 70%);}
  .t1 .marca{position:absolute;inset:0;opacity:.07;font:900 22cqw/1 Montserrat;color:#12307a;word-break:break-all;letter-spacing:.1em;padding:2cqw}
  .t1 .fecha{position:absolute;top:7cqh;width:100%;text-align:center;font:500 3.6cqw Montserrat;letter-spacing:.35em}
  .t1 .feliz{position:absolute;top:10.5cqh;width:100%;text-align:center;font:italic 400 19cqw/1 'Playfair Display'}
  .t1 .grande{position:absolute;top:22cqh;width:100%;text-align:center;font:31cqw/.86 Anton;letter-spacing:-.01em}
  .t1 .persona{left:8cqw;width:84cqw;bottom:15cqh;filter:drop-shadow(0 1.5cqw 3cqw #12307a40)}
  .t1 .banda{position:absolute;left:5cqw;right:5cqw;bottom:13cqh;background:#12307a;color:#fff;text-align:center;font:800 6.6cqw Montserrat;letter-spacing:.06em;padding:2.2cqh 0}
  .t1 .frase{position:absolute;bottom:6.5cqh;width:100%;text-align:center;font:italic 400 4.2cqw 'Playfair Display'}

  /* =========== 2 · NEÓN =========== */
  .t2{background:#070305;color:#fff}
  .t2 .hero{background:radial-gradient(ellipse at 50% 55%,#4a0810 0,#14040a 55%,#070305 80%)}
  .t2 .humo{position:absolute;left:-20%;right:-20%;bottom:-5cqh;height:40cqh;background:radial-gradient(ellipse at 50% 100%,#ff213855 0,transparent 65%);filter:blur(3cqw);animation:humo 6s ease-in-out infinite alternate}
  @keyframes humo{to{transform:translateX(6cqw) scaleY(1.15)}}
  .t2 .chispa{position:absolute;width:.8cqw;height:.8cqw;border-radius:50%;background:#ff5262;box-shadow:0 0 1.5cqw #ff2238;animation:chispa linear infinite}
  @keyframes chispa{from{transform:translateY(0);opacity:0}15%{opacity:1}to{transform:translateY(-60cqh);opacity:0}}
  .t2 .script{position:absolute;top:6.5cqh;width:100%;text-align:center;font:12cqw 'Great Vibes'}
  .t2 .nombre{position:absolute;top:15cqh;width:100%;text-align:center;font:300 6.4cqw Montserrat;letter-spacing:.42em;padding-left:.42em}
  .t2 .numero{position:absolute;top:21cqh;width:100%;text-align:center;font:900 64cqw/1 Montserrat;letter-spacing:-.04em;color:#0a0406;-webkit-text-stroke:2.2cqw #ff3044;paint-order:stroke fill;filter:drop-shadow(0 0 1cqw #ff2238) drop-shadow(0 0 4cqw #ff0022)}
  .t2 .persona{left:8cqw;width:84cqw;bottom:0;filter:drop-shadow(0 0 1.5cqw #ff223866)}
  .t2 .mes{position:absolute;bottom:4cqh;width:100%;text-align:center;font:900 15cqw/1 Montserrat;color:transparent;-webkit-text-stroke:.35cqw #ff304477;letter-spacing:-.02em}

  /* =========== 3 · GLOBOS =========== */
  .t3{background:#eef6ff;color:#0d4fa6}
  .t3 .hero{background:linear-gradient(160deg,#ffffff 0,#e6f1ff 45%,#9fc8ff 100%)}
  .t3 .globo{position:absolute;border-radius:50% 50% 48% 52%/58% 58% 42% 42%;background:radial-gradient(circle at 32% 28%,#fff 0,#f1f3f7 22%,#c9cfdb 62%,#aab3c4 100%);box-shadow:0 2cqw 4cqw #3a5b8a22;animation:flota ease-in-out infinite alternate}
  .t3 .globo::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:9cqh;background:#b4bccb}
  @keyframes flota{to{transform:translate(1.5cqw,-3cqh) rotate(4deg)}}
  .t3 .grande{position:absolute;top:12cqh;left:5cqw;font:27cqw/.9 Anton;color:#0d58c4;white-space:nowrap}
  .t3 .grande .l:nth-child(n+3){color:#1670dc}.t3 .grande .l:nth-child(n+5){color:#1e8cf0}
  .t3 .sello{position:absolute;top:4.5cqh;right:5cqw;width:23cqw;height:23cqw;border-radius:50%;background:#1872d0;color:#fff;display:grid;place-items:center;font:11cqw 'Great Vibes';box-shadow:0 1.5cqw 4cqw #1872d055}
  .t3 .nombre{position:absolute;top:24.5cqh;left:6cqw;font:600 11cqw Montserrat;color:#e07812}
  .t3 .persona{left:18cqw;width:94cqw;bottom:0;filter:drop-shadow(0 2cqw 4cqw #1e5aa033)}
  .t3 .mensaje{position:absolute;left:5cqw;bottom:12cqh;width:56cqw;background:#ffffffd9;backdrop-filter:blur(4px);padding:3cqw 4cqw;border-radius:3cqw;font:700 4cqw/1.3 Montserrat;color:#1b2235}

  /* =========== 4 · ANIVERSARIO =========== */
  .t4{background:#0c0a07;color:#f3e3b8}
  .t4 .hero{background:radial-gradient(ellipse at 50% 40%,#2b2213 0,#0c0a07 70%)}
  .oro{background:linear-gradient(100deg,#a8772a,#f9e3a2 30%,#c9963d 55%,#fff2c6 75%,#a8772a);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brillo 5s ease-in-out infinite}
  @keyframes brillo{50%{background-position:100% 0}}
  .t4 .script{position:absolute;top:7cqh;width:100%;text-align:center;font:11cqw 'Great Vibes'}
  .t4 .numero{position:absolute;top:11cqh;width:100%;text-align:center;font:400 62cqw/1 'Playfair Display'}
  .t4 .anos{position:absolute;top:39.5cqh;width:100%;text-align:center;font:500 4cqw Montserrat;letter-spacing:1.2em;padding-left:1.2em}
  .t4 .persona.a{left:15cqw;width:70cqw;bottom:0}
  .t4 .sombra{position:absolute;left:0;right:0;bottom:0;height:22cqh;background:linear-gradient(transparent,#0c0a07ee 70%)}
  .t4 .nombres{position:absolute;bottom:5cqh;width:100%;text-align:center;font:italic 400 8cqw 'Playfair Display'}
  .t4 .brillito{position:absolute;width:1.2cqw;height:1.2cqw;background:#f9e3a2;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:titila ease-in-out infinite}
  @keyframes titila{50%{opacity:.1;transform:scale(.4)}}
  /* ===== v3: letras clave sin taparse + detalles propios ===== */
  .dato{position:absolute;padding:1.1cqw 2.8cqw;border-radius:10cqw;font:700 3cqw Montserrat;white-space:nowrap}
  .dedica{position:absolute;left:6cqw;right:6cqw;text-align:center;font:italic 400 3.7cqw/1.35 'Playfair Display'}
  .firma{display:block;margin-top:.8cqh;font:600 2.5cqw Montserrat;font-style:normal;letter-spacing:.2em}
  .t1 .fecha{top:4.5cqh}
  .t1 .feliz{top:8cqh;font:italic 400 9.5cqw/1 'Playfair Display'}
  .t1 .grande{top:13cqh;font:42cqw/.85 Anton}
  .t1 .persona{left:17cqw;width:66cqw;bottom:15cqh}
  .t1 .dato{background:#fff;color:#12307a;border:1px solid #12307a33;box-shadow:0 1cqw 3cqw #12307a22}
  .t1 .dedica{bottom:3.5cqh}
  .t2 .script{top:4.5cqh}
  .t2 .nombre{top:12.5cqh;font-weight:500;letter-spacing:.6em;padding-left:.6em}
  .t2 .numero{top:16cqh;font-size:60cqw}
  .t2 .persona{left:15cqw;width:70cqw;bottom:0}
  .t2 .dato{background:#14050a;color:#ffd3d8;border:1px solid #ff3044;box-shadow:0 0 2.5cqw #ff223877}
  .t2 .sombra{position:absolute;left:0;right:0;bottom:0;height:20cqh;background:linear-gradient(transparent,#070305f2 60%)}
  .t2 .dedica{bottom:4cqh;color:#fff}
  .t2 .dedica .firma{color:#ff6b78}
  .t3 .nombre{font-size:15cqw;top:23cqh}
  .t3 .sello{display:flex;flex-direction:column;line-height:1;font:800 10cqw Montserrat}
  .t3 .sello small{font:500 3cqw Montserrat;letter-spacing:.2em;margin-top:.5cqh}
  .t3 .globo b{position:absolute;inset:0;display:grid;place-items:center;font:700 2.5cqw Montserrat;color:#55657f;transform:rotate(-8deg)}
  .t3 .mensaje{font:italic 600 3.8cqw/1.3 'Playfair Display'}
  .t3 .mensaje .firma{color:#e07812}
  .t4 .desde{position:absolute;top:13.5cqh;width:100%;text-align:center;font:500 2.8cqw Montserrat;letter-spacing:.25em;color:#c9a65d}
  .t4 .numero{top:16cqh;font-size:54cqw}
  .t4 .anos{top:39cqh}
  .t4 .sombra{height:26cqh}
  .t4 .nombres{bottom:10cqh}
  .t4 .dedica{bottom:3cqh;color:#e9d8ad}
  .t4 .dedica .firma{color:#c9963d}

/* ================= PIEZAS DEL RECORRIDO (comunes a todas las temáticas) ================= */
.sec{position:relative;padding:14cqh 8cqw;overflow:hidden}
.kicker{font:700 2.7cqw Montserrat;letter-spacing:.35em;text-transform:uppercase;opacity:.7;margin-bottom:3cqh}
.h{font-size:8.5cqw;line-height:1.08;margin-bottom:4cqh}
.sub{font:500 3.6cqw/1.45 Montserrat;opacity:.8;margin:-2cqh 0 5cqh}

/* aparece al llegar */
[data-r]{opacity:0;transform:translateY(4cqh);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0) * 1ms)}
[data-r].vista{opacity:1;transform:none}

/* carta que se enciende palabra por palabra con el scroll */
.palabras .w{opacity:.14;transition:opacity .35s}
.palabras .w.on{opacity:1}
.firma-carta{margin-top:5cqh;font:600 3cqw/1.4 Montserrat;letter-spacing:.12em;opacity:.85}

/* foto de muestra (la sube el comprador) */
.foto{position:relative;aspect-ratio:4/5;background:var(--fondo-foto,linear-gradient(135deg,#ddd,#bbb));background-size:cover;background-position:center;border-radius:2cqw;overflow:hidden}
.foto .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5cqw;text-align:center;font:600 2.7cqw/1.3 Montserrat;padding:4cqw;opacity:.8}
.foto .ph svg{width:8cqw;height:8cqw}

/* muro de videos de invitados */
.muro{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5cqw}
.vid{position:relative;aspect-ratio:9/14;border-radius:3cqw;overflow:hidden;background:linear-gradient(160deg,var(--c1),var(--c2));display:flex;flex-direction:column;justify-content:flex-end;padding:2.4cqw;text-align:left;color:#fff;transition:transform .3s}
.vid:active{transform:scale(.96)}
.vid .ini{position:absolute;top:42%;left:50%;translate:-50% -50%;width:14cqw;height:14cqw;border-radius:50%;background:#ffffff2e;border:1px solid #ffffff55;display:grid;place-items:center;font:800 6cqw Montserrat}
.vid .tri{position:absolute;top:2.4cqw;right:2.4cqw;width:0;height:0;border-left:2.4cqw solid #fff;border-top:1.5cqw solid transparent;border-bottom:1.5cqw solid transparent;opacity:.9}
.vid b{font:700 3cqw/1.2 Montserrat}
.vid small{font:500 2.3cqw/1.3 Montserrat;opacity:.85}
.modal{position:absolute;inset:0;background:#000d;display:grid;place-items:center;opacity:0;transition:opacity .3s;pointer-events:none;color:#fff}
.modal.abierto{opacity:1;pointer-events:auto}
.modal .caja{width:76cqw;text-align:center}
.modal .pantalla{position:relative;height:62cqh;border-radius:4cqw;background:linear-gradient(160deg,var(--c1),var(--c2));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqh;overflow:hidden}
.modal .pantalla .ini{width:24cqw;height:24cqw;border-radius:50%;background:#ffffff2e;display:grid;place-items:center;font:800 11cqw Montserrat}
.modal .onda{display:flex;gap:1.2cqw;height:8cqw;align-items:center}
.modal .onda i{width:1.4cqw;height:100%;background:#fff;border-radius:1cqw;animation:onda .8s ease-in-out infinite alternate}
.modal .onda i:nth-child(2){animation-delay:-.2s}.modal .onda i:nth-child(3){animation-delay:-.5s}.modal .onda i:nth-child(4){animation-delay:-.1s}.modal .onda i:nth-child(5){animation-delay:-.6s}
@keyframes onda{from{transform:scaleY(.25)}}
.modal .nota{font:500 2.8cqw Montserrat;opacity:.75}
.modal .meta{margin:2.5cqh 0 1.5cqh}
.modal .meta b{display:block;font:700 4.6cqw Montserrat}
.modal .meta small{font:500 3cqw Montserrat;opacity:.75}
.modal .barra{height:.8cqw;background:#ffffff33;border-radius:1cqw;overflow:hidden}
.modal .barra i{display:block;height:100%;width:0;background:#fff}
.modal .cerrar{margin-top:3cqh;padding:2.4cqw 7cqw;border:1px solid #fff8;border-radius:6cqw;font:600 3.2cqw Montserrat}

/* la canción con letra tipo karaoke */
.reproductor{display:flex;align-items:center;gap:4cqw;margin-bottom:4cqh}
.disco{position:relative;flex:none;width:24cqw;height:24cqw;border-radius:50%;background:repeating-radial-gradient(#111 0 .4cqw,#262626 .4cqw .8cqw);box-shadow:0 2cqw 5cqw #0005}
.disco::after{content:"";position:absolute;inset:34%;border-radius:50%;background:var(--acento);box-shadow:inset 0 0 0 1.4cqw #0002}
.sonando .disco{animation:gira 2.4s linear infinite}
@keyframes gira{to{rotate:360deg}}
.reproductor .tit b{display:block;font:800 5cqw/1.15 Montserrat}
.reproductor .tit small{font:500 3cqw Montserrat;opacity:.75}
.controles{display:flex;align-items:center;gap:4cqw;margin-bottom:3cqh}
.play{flex:none;width:14cqw;height:14cqw;border-radius:50%;background:var(--acento);color:var(--sobre-acento);font:700 4.6cqw Montserrat;display:grid;place-items:center;box-shadow:0 1.5cqw 4cqw #0003}
.controles .barra{flex:1;height:.9cqw;border-radius:1cqw;background:#8884;overflow:hidden}
.controles .barra i{display:block;height:100%;width:0;background:var(--acento)}
.letra{position:relative;height:36cqh;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.letra ol{list-style:none;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.letra li{font-size:5.4cqw;line-height:1.3;padding:1.3cqh 0;opacity:.28;transition:opacity .4s,transform .4s;transform-origin:0 50%}
.letra li.ahora{opacity:1;transform:scale(1.05)}
.demo{font:500 2.6cqw Montserrat;opacity:.55;margin-top:2cqh}

/* cierre */
.cierre{min-height:100cqh;display:flex;flex-direction:column;justify-content:center;text-align:center;gap:3cqh}
.firmas{display:flex;flex-wrap:wrap;justify-content:center;gap:2cqw}
.firmas span{padding:1.3cqw 3.2cqw;border-radius:5cqw;font:600 3cqw Montserrat;background:var(--chip)}
.btn{display:block;width:100%;padding:4.2cqw;border-radius:3cqw;font:700 4cqw Montserrat;text-align:center;text-decoration:none;color:inherit}
.btn.uno{background:var(--acento);color:var(--sobre-acento)}
.btn.dos{border:1px solid currentColor;opacity:.85}
.hecho{font:500 2.6cqw Montserrat;opacity:.5}

/* capa fija: confeti y videos */
.confeti{position:absolute;inset:0;width:100%;height:100%}

/* ================= ENTRADA CON MISTERIO ================= */
.entrada{position:absolute;inset:0;z-index:5;pointer-events:auto;cursor:pointer;display:grid;place-items:center;overflow:hidden;color:#fff;outline:0;
  background:radial-gradient(ellipse 80% 60% at 50% 58%,color-mix(in srgb,var(--e-tinta) 16%,var(--e-fondo)) 0,var(--e-fondo) 72%);
  transition:opacity .7s ease .5s}
.entrada.abre{opacity:0;pointer-events:none}
.polvo i{position:absolute;width:calc(.9cqw * var(--s));aspect-ratio:1;border-radius:50%;background:var(--e-tinta);box-shadow:0 0 1.6cqw var(--e-tinta);opacity:0;animation:flota var(--t) linear var(--dl) infinite}
@keyframes flota{0%{transform:translateY(0);opacity:0}25%{opacity:.85}100%{transform:translateY(-34cqh);opacity:0}}
.e-centro{position:relative;text-align:center;padding:0 9cqw;display:flex;flex-direction:column;align-items:center}
.e-centro p{opacity:0;animation:eSale 1.3s cubic-bezier(.2,.8,.2,1) forwards}
.e1{font:700 11cqw/1 Montserrat,sans-serif;color:var(--e-tinta);text-shadow:0 0 5cqw color-mix(in srgb,var(--e-tinta) 55%,transparent);animation-delay:.5s!important}
.e2{margin-top:3.2cqh;font:500 4.6cqw/1.35 Montserrat,sans-serif;animation-delay:1.7s!important}
.e3{margin-top:1.4cqh;font:500 3.5cqw/1.4 Montserrat,sans-serif;color:#ffffffa8;animation-delay:2.9s!important}
@keyframes eSale{from{opacity:0;transform:translateY(1.6cqh);filter:blur(1.2cqw)}to{opacity:1;transform:none;filter:none}}
.e-boton{position:relative;margin-top:7cqh;width:32cqw;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;border:.4cqw solid var(--e-tinta);
  box-shadow:0 0 6cqw color-mix(in srgb,var(--e-tinta) 45%,transparent),inset 0 0 4cqw color-mix(in srgb,var(--e-tinta) 30%,transparent);
  opacity:0;animation:eSale 1s ease 3.8s forwards,late 2.2s ease-in-out 4.8s infinite}
.e-boton b{font:700 3.1cqw/1.3 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--e-tinta);max-width:22cqw}
.anillo{position:absolute;inset:-.4cqw;border-radius:50%;border:.3cqw solid var(--e-tinta);opacity:0;animation:onda 2.4s ease-out 4.2s infinite}
.anillo+.anillo{animation-delay:5.4s}
@keyframes onda{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}
@keyframes late{50%{transform:scale(1.06)}}
.entrada.abre .e-centro{animation:implota .45s cubic-bezier(.6,0,.9,.4) forwards}
.entrada.abre .polvo{animation:implota .45s ease-in forwards}
@keyframes implota{to{transform:scale(.55);opacity:0;filter:blur(2cqw)}}
/* entrada «sobre»: portada renderizada en Blender que se abre al tocar el sello */
.entrada.sobre{background:#1a120d}
.entrada.sobre .s-cuadro{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.entrada.sobre video{opacity:0}
.entrada.sobre.rueda video{opacity:1}
.s-sello{position:absolute;left:50%;top:50%;width:27cqw;aspect-ratio:1;translate:-50% -50%;pointer-events:none}
.s-anillo{position:absolute;inset:0;border-radius:50%;border:.5cqw solid #ffd89a;opacity:0;animation:sSello 2.4s ease-out 1s infinite}
.s-anillo+.s-anillo{animation-delay:2.2s}
@keyframes sSello{0%{opacity:.85;transform:scale(.94)}100%{opacity:0;transform:scale(1.65)}}
.s-pista{position:absolute;left:0;right:0;bottom:8cqh;text-align:center;font:600 3.4cqw/1 Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 .3cqw 1.6cqw #000a;animation:sPista 2.4s ease-in-out infinite}
@keyframes sPista{50%{opacity:.5}}
.entrada.sobre.tocado .s-sello,.entrada.sobre.tocado .s-pista{opacity:0;transition:opacity .3s}
.entrada.sobre.vivo{background:#030201;transition:opacity .5s ease}
.entrada.sobre.vivo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.entrada.sobre.vivo:not(.listo) .s-sello,.entrada.sobre.vivo:not(.listo) .s-pista{opacity:0}
.destello{position:absolute;inset:0;z-index:6;pointer-events:none;background:radial-gradient(circle at 50% 55%,#fff 0,var(--e-tinta) 22%,transparent 62%);animation:destello .9s ease-out forwards}
@keyframes destello{0%{opacity:0;transform:scale(.2)}18%{opacity:1}100%{opacity:0;transform:scale(2.4)}}

/* globos que suben al abrir (se pueden reventar) */
.globos-e{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.gb{position:absolute;bottom:-34cqh;left:var(--x);width:var(--w);pointer-events:auto;animation:gbSube var(--t) cubic-bezier(.3,.15,.65,1) var(--dl) both}
@keyframes gbSube{from{transform:translateY(0)}to{transform:translateY(-175cqh)}}
.gb i{display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:gbVaiven var(--vai) ease-in-out infinite alternate}
@keyframes gbVaiven{from{transform:rotate(-7deg) translateX(-1cqw)}to{transform:rotate(7deg) translateX(1cqw)}}
.gb .cuerpo{width:100%;aspect-ratio:5/6;border-radius:50% 50% 47% 53%/58% 58% 42% 42%;
  background:radial-gradient(circle at 33% 28%,#ffffffd0 0 4%,#ffffff55 9%,transparent 22%),radial-gradient(circle at 62% 72%,transparent 45%,#00000038 100%),var(--c);
  box-shadow:inset -1cqw -1.2cqw 2.4cqw #0002}
.gb .nudo{width:2.4cqw;height:1.5cqw;margin-top:-.3cqw;background:var(--c);clip-path:polygon(50% 0,100% 100%,0 100%);filter:brightness(.85)}
.gb .hilo{width:.25cqw;height:13cqh;background:linear-gradient(#ffffffb0,#ffffff00)}
.gb.pum i{animation:gbPum .22s ease-out forwards}
@keyframes gbPum{to{transform:scale(1.45);opacity:0}}

/* la música que suena (arriba a la derecha) */
.musica{position:absolute;top:2.2cqh;right:3cqw;z-index:4;pointer-events:none;display:flex;align-items:center;gap:2cqw;height:9cqw;padding:0 3cqw 0 2.6cqw;border-radius:5cqw;
  background:#000000a0;-webkit-backdrop-filter:blur(2cqw);backdrop-filter:blur(2cqw);color:#fff;font:600 2.9cqw Montserrat,sans-serif;
  opacity:0;transform:translateY(-2cqh);transition:opacity .6s,transform .6s,padding .6s,gap .6s}
.musica.ve{opacity:1;transform:none;pointer-events:auto}
.musica.corta{gap:0;padding:0 2.6cqw}
.musica .eq{display:flex;gap:.55cqw;align-items:flex-end;height:3.6cqw}
.musica .eq i{width:.75cqw;height:100%;background:#fff;border-radius:.3cqw;transform-origin:bottom;animation:eq .9s ease-in-out infinite alternate}
.musica .eq i:nth-child(2){animation-delay:-.3s}.musica .eq i:nth-child(3){animation-delay:-.6s}.musica .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.musica.pausa .eq i{animation-play-state:paused}
.musica .tit{max-width:46cqw;overflow:hidden;white-space:nowrap;transition:max-width .6s}
.musica.corta .tit{max-width:0}