/* Halloween por etapas en el panel (23 → 31 de octubre). Elegante: azul noche, ciruela y dorado, líneas finas. */
.hero{isolation:isolate}
.hw{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;--oro:#e0b15a;--naranja:#f08a24}
.hero-in{z-index:2}
/* la noche cae un poco más cada etapa */
.hw-noche{position:absolute;inset:0;background:linear-gradient(180deg,#120b2a 0%,#25144a 55%,#4a1f45 100%);opacity:calc(var(--etapa) * .17);transition:opacity 1s}
/* la luna sube y se llena día a día (como el barco que se acerca) */
.hw-luna{position:absolute;right:16%;width:92px;height:92px;border-radius:50%;top:calc(78% - var(--etapa) * 13%);background:transparent;
  box-shadow:inset calc(10px + var(--etapa) * 7px) calc(-2px - var(--etapa) * 1px) 0 0 #f6e7c1;filter:drop-shadow(0 0 18px rgba(255,226,160,.55));transform:rotate(-18deg);animation:hw-luna 9s ease-in-out infinite alternate}
.hw-luna i{display:none}
.hw.e5 .hw-luna{background:radial-gradient(circle at 38% 36%,#fffaf0,#f4e2b6 58%,#d8bb7c);box-shadow:0 0 50px rgba(255,226,160,.55),0 0 120px rgba(255,200,120,.25);filter:none}
@keyframes hw-luna{to{translate:0 -6px}}
/* telarañas doradas en las esquinas (desde la etapa 2) */
.hw-tela{position:absolute;top:0;width:150px;height:150px;opacity:0;stroke:var(--oro)}
.hw-tela svg{width:100%;height:100%}.hw-tela path{stroke:rgba(224,177,90,.55)}
.hw-tela-i{left:0}.hw-tela-d{right:0;transform:scaleX(-1)}
.hw.e2 .hw-tela{opacity:1;animation:hw-aparece 1.6s ease both}
@keyframes hw-aparece{from{opacity:0}}
/* murciélagos: 2 → 4 → 6 → 10 (el 31 cruzan volando) */
.hw-murci{position:absolute;width:34px;color:#140c26;filter:drop-shadow(0 0 2px rgba(255,226,160,.35));opacity:0;animation:hw-planea 7s ease-in-out infinite}
.hw-murci svg{width:100%;display:block;fill:currentColor;animation:hw-aleteo .35s ease-in-out infinite alternate;transform-origin:50% 60%}
@keyframes hw-aleteo{to{transform:scaleY(.45)}}
@keyframes hw-planea{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-10px)}}
.hw-m1{left:12%;top:18%}.hw-m2{left:64%;top:12%;animation-delay:-2s;width:26px}.hw-m3{left:30%;top:30%;animation-delay:-3s;width:22px}.hw-m4{left:80%;top:40%;animation-delay:-1s;width:28px}
.hw-m5{left:46%;top:8%;animation-delay:-4s;width:20px}.hw-m6{left:6%;top:48%;animation-delay:-5s;width:24px}
.hw.e1 .hw-m1,.hw.e1 .hw-m2,.hw.e2 .hw-m3,.hw.e2 .hw-m4,.hw.e4 .hw-m5,.hw.e4 .hw-m6{opacity:.75}
.hw-m7,.hw-m8,.hw-m9,.hw-m10{top:20%;left:-60px;width:30px}
.hw.e5 .hw-m7,.hw.e5 .hw-m8,.hw.e5 .hw-m9,.hw.e5 .hw-m10{opacity:.85;animation:hw-cruza 14s linear infinite}
.hw.e5 .hw-m8{top:34%;animation-delay:-3.5s;width:22px}.hw.e5 .hw-m9{top:12%;animation-delay:-7s;width:26px}.hw.e5 .hw-m10{top:44%;animation-delay:-10.5s;width:18px}
@keyframes hw-cruza{0%{transform:translate(0,0)}25%{transform:translate(28vw,-30px)}50%{transform:translate(56vw,10px)}75%{transform:translate(84vw,-20px)}100%{transform:translate(110vw,0)}}
/* neblina (desde la etapa 3) */
.hw-niebla{position:absolute;left:-10%;right:-10%;bottom:-20px;height:120px;opacity:0}
.hw-niebla i{position:absolute;bottom:0;width:70%;height:100%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.28),transparent 70%);filter:blur(8px);animation:hw-niebla 18s ease-in-out infinite alternate}
.hw-niebla i:nth-child(2){left:40%;animation-duration:24s;animation-direction:alternate-reverse}
@keyframes hw-niebla{to{transform:translateX(18%)}}
.hw.e3 .hw-niebla{opacity:1;animation:hw-aparece 2s ease both}
/* luces que flotan como velas (desde la etapa 4) */
.hw-luces i{position:absolute;bottom:-10px;left:var(--x);width:5px;height:5px;border-radius:50%;background:#ffd27a;box-shadow:0 0 10px 3px rgba(255,190,90,.6);opacity:0}
.hw.e4 .hw-luces i{animation:hw-sube var(--t) ease-in infinite;animation-delay:var(--d)}
@keyframes hw-sube{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translate(20px,-260px);opacity:0}}
/* calabazas de línea dorada: aparecen apagadas (etapa 3) y se encienden (etapa 4) */
.hw-calabazas{position:absolute;right:4%;bottom:6px;display:flex;align-items:flex-end;gap:6px;opacity:0}
.hw.e3 .hw-calabazas{opacity:1;animation:hw-aparece 1.4s ease both}
.hw-calabaza .hw-cal-cuerpo ellipse{fill:#2a1a3e;stroke:var(--oro);stroke-width:1.4}
.hw-calabaza .hw-cal-linea{fill:none;stroke:rgba(224,177,90,.55);stroke-width:1}
.hw-calabaza .hw-cal-tallo{fill:none;stroke:#8fb36a;stroke-width:3;stroke-linecap:round}
.hw-calabaza .hw-cal-hoja{fill:#8fb36a}
.hw.e4 .hw-calabaza .hw-cal-cuerpo ellipse{fill:url(#hwluz)}
.hw.e4 .hw-calabaza{filter:drop-shadow(0 0 14px rgba(240,138,36,.75));animation:hw-vela 2.6s ease-in-out infinite}
.hw-c2 .hw-calabaza{animation-delay:-.8s!important}.hw-c3 .hw-calabaza{animation-delay:-1.6s!important}
@keyframes hw-vela{0%,100%{filter:drop-shadow(0 0 12px rgba(240,138,36,.7))}45%{filter:drop-shadow(0 0 20px rgba(255,180,80,.95))}55%{filter:drop-shadow(0 0 9px rgba(240,138,36,.55))}}
/* aviso «algo se acerca» */
.hw-chip{position:absolute;z-index:3;top:16px;right:18px;padding:7px 14px;border-radius:999px;font:700 12.5px var(--f-tit);color:#fff2d6;background:rgba(18,11,42,.55);border:1px solid rgba(224,177,90,.55);box-shadow:0 6px 20px rgba(0,0,0,.2);backdrop-filter:blur(6px);animation:hw-chip 3s ease-in-out infinite}
@keyframes hw-chip{50%{box-shadow:0 6px 20px rgba(0,0,0,.2),0 0 18px rgba(224,177,90,.45)}}
/* tarjetas: brillo dorado suave (desde la etapa 4) */
.hw-e4 .app-tarjeta:not(.app-bloqueada):hover,.hw-e5 .app-tarjeta:not(.app-bloqueada):hover{box-shadow:0 14px 34px rgba(42,26,62,.18),0 0 0 2px rgba(224,177,90,.55),0 0 26px rgba(240,138,36,.25)}
.hw-e5 .hero-pre::after{content:" · ¡Feliz Halloween! 🎃";color:#ffd27a}
/* el 31: bienvenida a pantalla completa */
.hw-intro{position:fixed;inset:0;z-index:450;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:radial-gradient(90% 70% at 50% 40%,#2a1748 0%,#120b2a 60%,#07040f 100%);color:#fff;pointer-events:auto;transition:opacity .8s}
.hw-intro[hidden]{display:none}.hw-intro.sale{opacity:0}
.hw-intro-luna{width:150px;height:150px;border-radius:50%;margin-bottom:26px;background:radial-gradient(circle at 38% 36%,#fffaf0,#f4e2b6 58%,#d8bb7c);box-shadow:0 0 80px rgba(255,226,160,.6),0 0 200px rgba(255,190,110,.3);animation:hw-sube-luna 1.6s cubic-bezier(.2,.8,.3,1) both}
@keyframes hw-sube-luna{from{transform:translateY(120px) scale(.6);opacity:0}}
.hw-vuela{position:absolute;left:50%;top:38%;width:44px;margin-left:-22px;color:#1a1030;filter:drop-shadow(0 0 3px rgba(224,177,90,.9)) drop-shadow(0 0 10px rgba(240,138,36,.35));opacity:0;animation:hw-sale-murci 2.6s ease-out forwards;animation-delay:calc(1s + var(--d))}
.hw-vuela svg{width:100%;fill:currentColor;animation:hw-aleteo .25s ease-in-out infinite alternate}
@keyframes hw-sale-murci{0%{opacity:0;transform:rotate(var(--a)) translateX(0) scale(.3)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(60vmax) scale(var(--s))}}
.hw-intro-pre{margin:0;font:700 13px var(--f-tit);letter-spacing:.2em;text-transform:uppercase;color:#e0b15a;animation:hw-texto .8s 1.2s both}
.hw-intro-t{margin:10px 0 6px;font:900 clamp(44px,9vw,92px)/1 var(--f-tit);color:transparent;background:linear-gradient(135deg,#fff2d6,#e0b15a 50%,#f08a24);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 6px 30px rgba(240,138,36,.35));animation:hw-texto .9s 1.5s both}
.hw-intro-de{margin:0;color:#d9c9f0;animation:hw-texto .8s 1.9s both}
@keyframes hw-texto{from{opacity:0;transform:translateY(16px)}}
@media (max-width:640px){.hw-luna{width:62px;height:62px;right:8%}.hw-tela{width:90px;height:90px}.hw-calabazas{transform:scale(.7);transform-origin:100% 100%}.hw-chip{top:auto;bottom:12px;right:12px;font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.hw *,.hw-intro *{animation:none!important}.hw-murci{opacity:.75}}

/* ===== parte de abajo: el fondo detrás de las apps también cambia poco a poco ===== */
body.hw-e1:not(.pag-oscura){background:#f1eff8}
body.hw-e2:not(.pag-oscura){background:#e9e3f4}
body.hw-e3:not(.pag-oscura){background:linear-gradient(180deg,#ddd2ee 0%,#cfc0e4 100%) fixed}
body.hw-e4:not(.pag-oscura){background:linear-gradient(180deg,#3a2560 0%,#24163f 60%,#1a1030 100%) fixed}
body.hw-e5:not(.pag-oscura){background:linear-gradient(180deg,#24143f 0%,#170d2c 55%,#0f0820 100%) fixed}
body.hw-e4 .app-pronto,body.hw-e5 .app-pronto{border-color:rgba(224,177,90,.45);color:rgba(255,242,214,.85)}
body.hw-e4 .app-pronto .app-info strong,body.hw-e5 .app-pronto .app-info strong{color:#fff2d6}
body.hw-e4 .app-pronto .app-ico,body.hw-e5 .app-pronto .app-ico{background:rgba(224,177,90,.15);color:#ffd27a}
body.hw-e4 .contenedor > h2,body.hw-e5 .contenedor > h2{color:#fff2d6}
.hw-fondo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.contenedor,.pie{position:relative;z-index:1}
.hw-ft{position:absolute;bottom:0;width:190px;height:190px;opacity:0;transform:scaleY(-1)}
.hw-ft svg{width:100%;height:100%}.hw-ft path{stroke:rgba(150,110,40,.45)}
body.hw-e4 .hw-ft path,body.hw-e5 .hw-ft path{stroke:rgba(224,177,90,.55)}
.hw-ft-i{left:0}.hw-ft-d{right:0;transform:scale(-1,-1)}
.hw-fondo.e2 .hw-ft{opacity:1;animation:hw-aparece 2s ease both}
.hw-fcal{position:absolute;left:18px;bottom:10px;display:flex;align-items:flex-end;gap:4px;opacity:0}
.hw-fcal-d{left:auto;right:22px}
.hw-fondo.e3 .hw-fcal{opacity:1;animation:hw-aparece 1.6s ease both}
.hw-fondo.e4 .hw-calabaza .hw-cal-cuerpo ellipse{fill:url(#hwluz)}
.hw-fondo.e4 .hw-calabaza{filter:drop-shadow(0 0 14px rgba(240,138,36,.75));animation:hw-vela 2.6s ease-in-out infinite}
.hw-arana{position:absolute;top:0;left:8%;width:22px;opacity:0}
.hw-arana i{display:block;width:1px;height:140px;margin:0 auto;background:rgba(224,177,90,.6)}
.hw-arana svg{display:block;width:22px;margin-top:-2px}
.hw-fondo.e4 .hw-arana{opacity:1;animation:hw-arana 7s ease-in-out infinite}
@keyframes hw-arana{0%,100%{transform:translateY(-60px)}50%{transform:translateY(40px)}}
.hw-fluces i{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;background:#ffd27a;box-shadow:0 0 10px 3px rgba(255,190,90,.55);opacity:0}
.hw-fluces i:nth-child(1){left:3%}.hw-fluces i:nth-child(2){left:7%;animation-delay:-2s!important}.hw-fluces i:nth-child(3){left:93%;animation-delay:-4s!important}.hw-fluces i:nth-child(4){left:97%;animation-delay:-1s!important}
.hw-fluces i:nth-child(5){left:12%;animation-delay:-5s!important}.hw-fluces i:nth-child(6){left:88%;animation-delay:-3s!important}.hw-fluces i:nth-child(7){left:5%;animation-delay:-6s!important}.hw-fluces i:nth-child(8){left:95%;animation-delay:-7s!important}
.hw-fluces i:nth-child(n+9){left:50%;animation-delay:-8s!important}
.hw-fondo.e4 .hw-fluces i{animation:hw-sube-larga 9s ease-in infinite}
@keyframes hw-sube-larga{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translate(18px,-80vh);opacity:0}}
.hw-fmurci{position:absolute;left:-60px;width:28px;color:#1a1030;opacity:0}
.hw-fmurci svg{width:100%;display:block;fill:currentColor;animation:hw-aleteo .3s ease-in-out infinite alternate}
.hw-fondo.e5 .hw-fmurci{opacity:.8;animation:hw-cruza 18s linear infinite}
.hw-fm1{top:30%}.hw-fondo.e5 .hw-fm2{top:55%;animation-delay:-6s;width:22px}.hw-fondo.e5 .hw-fm3{top:75%;animation-delay:-12s;width:18px}
body.hw-e5 .hw-fmurci{color:#0b0618;filter:drop-shadow(0 0 2px rgba(224,177,90,.7))}
/* tarjetas: telarañas en una esquina (etapa 2) y calabazas pequeñas (etapa 3; se encienden en la 4) */
.hw-tc{position:absolute;top:0;right:0;width:64px;height:64px;pointer-events:none;z-index:1;transform:scaleX(-1);border-top-right-radius:inherit;overflow:hidden;animation:hw-aparece 1.4s ease both}
.hw-tc svg{width:100%;height:100%}.hw-tc path{stroke:rgba(150,110,40,.4)}
.hw-cc{position:absolute;right:14px;bottom:10px;width:34px;pointer-events:none;z-index:1;animation:hw-aparece 1.4s ease both}
.hw-cc svg{display:block;width:100%;height:auto}
body.hw-e4 .hw-cc svg .hw-cal-cuerpo ellipse,body.hw-e5 .hw-cc svg .hw-cal-cuerpo ellipse{fill:url(#hwluz)}
body.hw-e4 .hw-cc,body.hw-e5 .hw-cc{filter:drop-shadow(0 0 8px rgba(240,138,36,.7))}
@media (max-width:640px){.hw-ft{width:110px;height:110px}.hw-fcal{transform:scale(.7);transform-origin:0 100%}.hw-fcal-d{transform-origin:100% 100%}}
/* calabazas y caramelos para agarrar y lanzar (desde el 29) */
.hw-juego{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.hw-obj{position:absolute;left:0;top:0;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;will-change:transform}
.hw-obj svg{width:100%;height:100%;display:block;pointer-events:none}
.hw-obj-cal svg .hw-cal-cuerpo ellipse{fill:url(#hwluz)}
.hw-obj-cal{filter:drop-shadow(0 0 10px rgba(240,138,36,.7)) drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.hw-obj-car{filter:drop-shadow(0 3px 5px rgba(0,0,0,.3))}
.hw-obj.agarrado{cursor:grabbing;filter:drop-shadow(0 0 16px rgba(255,190,90,.95)) drop-shadow(0 10px 14px rgba(0,0,0,.3))}
.hw-pista{position:absolute;left:24px;bottom:72px;padding:6px 12px;border-radius:12px 12px 12px 2px;background:rgba(18,11,42,.85);color:#fff2d6;font:700 12.5px var(--f-tit);border:1px solid rgba(224,177,90,.6);animation:hw-pista 1.4s ease-in-out infinite;transition:opacity .5s}
.hw-pista.sale{opacity:0}
@keyframes hw-pista{50%{transform:translateY(-5px)}}