/* ═══ Parque Central · decoración de Halloween ═══
   Capa aparte: para quitarla, borra las dos líneas de halloween.css y halloween.js en index.html.
   Niveles (clase en <html>): hw-1 sutil · hw-2 media · hw-3 completa. Todo respeta "reducir movimiento". */

/* ── Telarañas en las esquinas de arriba del video / imagen del robot (niveles 1, 2 y 3) ── */
.hw-tela{position:absolute;top:0;width:clamp(120px,16vw,230px);aspect-ratio:1;pointer-events:none;z-index:2;opacity:.34;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M0 0L215 0M0 0L204.5 66.4M0 0L173.9 126.4M0 0L126.4 173.9M0 0L66.4 204.5M0 0L0 215M45 0Q36.4 5.8 42.8 13.9Q32.9 16.8 36.4 26.5Q26.1 26.1 26.5 36.4Q16.8 32.9 13.9 42.8Q5.8 36.4 0 45M90 0Q72.9 11.5 85.6 27.8Q65.8 33.5 72.8 52.9Q52.2 52.2 52.9 72.8Q33.5 65.8 27.8 85.6Q11.5 72.9 0 90M135 0Q109.3 17.3 128.4 41.7Q98.6 50.3 109.2 79.4Q78.3 78.3 79.4 109.2Q50.3 98.6 41.7 128.4Q17.3 109.3 0 135M180 0Q145.8 23.1 171.2 55.6Q131.5 67 145.6 105.8Q104.4 104.4 105.8 145.6Q67 131.5 55.6 171.2Q23.1 145.8 0 180'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
.hw-tela--izq{left:0}
.hw-tela--der{right:0;transform:scaleX(-1)}

/* ── La lámpara se vuelve calabaza (niveles 1, 2 y 3) ── */
/* computador: la pantalla negra de la lámpara colgante */
html[class*="hw-"] .v37-pantalla{left:-19px;top:22px;width:38px;height:28px;border-radius:48% 48% 44% 44%/55% 55% 45% 45%;
  background:repeating-linear-gradient(90deg,#FF7D0E 0 7px,#E86A00 7px 9px),#FF7D0E;box-shadow:inset 0 -5px 8px rgba(120,40,0,.35)}
html[class*="hw-"] .v37-pantalla::before{content:"";position:absolute;left:50%;top:-6px;width:5px;height:8px;margin-left:-2.5px;border-radius:2px;background:#3d6b1f}
html[class*="hw-"] .v37-pantalla::after{left:11px;bottom:-5px;width:16px;background:#FFB347;box-shadow:0 0 14px 4px rgba(255,140,30,.7)}
/* celular: la barrita de la lámpara del menú de abajo */
@media (max-width:860px){
  html[class*="hw-"] .lampara::before{width:24px!important;height:15px!important;margin-left:-12px!important;top:-6px!important;border-radius:48% 48% 44% 44%/55% 55% 45% 45%!important;
    background:repeating-linear-gradient(90deg,#FF7D0E 0 5px,#E86A00 5px 6.5px),#FF7D0E!important;box-shadow:0 0 12px 2px rgba(255,125,14,.5)!important}
}

/* ── Murciélagos naranjas que cruzan el video aleteando (niveles 2 y 3) ──
   Cada uno: la caja vuela de derecha a izquierda con una leve ondulación; adentro hay dos dibujos
   (alas arriba / alas abajo) que se alternan muy rápido = aleteo. */
.hw-murcielagos{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;display:none}
.hw-2 .hw-murcielagos,.hw-3 .hw-murcielagos{display:block}
.hw-bat{position:absolute;left:0;width:var(--w);aspect-ratio:2/1;opacity:0;animation:hw-vuelo var(--t) linear var(--d) infinite}
.hw-bat svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hw-bat path{fill:#FF7D0E}
.hw-bat .ab{opacity:0}
.hw-bat .ar{animation:hw-ala var(--a) steps(1) infinite}
.hw-bat .ab{animation:hw-ala2 var(--a) steps(1) infinite}
@keyframes hw-ala{0%{opacity:1}50%{opacity:0}}
@keyframes hw-ala2{0%{opacity:0}50%{opacity:1}}
.hw-bat:nth-child(1){top:12%;--w:clamp(52px,5.8vw,78px);--t:7s;--d:1s;--a:.24s;--sube:14px}
.hw-bat:nth-child(2){top:24%;--w:clamp(38px,4.2vw,56px);--t:8.5s;--d:3.6s;--a:.2s;--sube:10px}
.hw-bat:nth-child(3){top:7%;--w:clamp(30px,3.2vw,42px);--t:10s;--d:6s;--a:.18s;--sube:8px}
@keyframes hw-vuelo{
  0%{transform:translate(105vw,0);opacity:0}
  4%{opacity:1}
  22%{transform:translate(60vw,calc(var(--sube) * -1))}
  40%{transform:translate(25vw,var(--sube))}
  56%{transform:translate(-20%,0);opacity:1}
  58%,100%{transform:translate(-30%,0);opacity:0}
}

/* ── Telaraña en la esquina de la cabecera blanca + arañita colgando (nivel 3) ── */
.hw-3 .b-cabeza{position:relative}
.hw-3 .b-cabeza::after{content:"";position:absolute;top:0;right:0;width:96px;aspect-ratio:1;pointer-events:none;opacity:.22;transform:scaleX(-1);border-top-right-radius:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' fill='none' stroke='%230b0b0b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0 0L215 0M0 0L204.5 66.4M0 0L173.9 126.4M0 0L126.4 173.9M0 0L66.4 204.5M0 0L0 215M45 0Q36.4 5.8 42.8 13.9Q32.9 16.8 36.4 26.5Q26.1 26.1 26.5 36.4Q16.8 32.9 13.9 42.8Q5.8 36.4 0 45M90 0Q72.9 11.5 85.6 27.8Q65.8 33.5 72.8 52.9Q52.2 52.2 52.9 72.8Q33.5 65.8 27.8 85.6Q11.5 72.9 0 90M135 0Q109.3 17.3 128.4 41.7Q98.6 50.3 109.2 79.4Q78.3 78.3 79.4 109.2Q50.3 98.6 41.7 128.4Q17.3 109.3 0 135'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
.hw-arana{display:none;position:absolute;top:0;right:300px;width:16px;height:62px;pointer-events:none;z-index:1;animation:hw-arana 7s ease-in-out infinite}
.hw-3 .hw-arana{display:block}
.hw-arana::before{content:"";position:absolute;left:7.5px;top:0;bottom:14px;width:1px;background:rgba(11,11,11,.35)}
.hw-arana i{position:absolute;left:0;bottom:0;width:16px;height:16px;background:#0b0b0b;
  -webkit-mask:var(--arana) no-repeat center/contain;mask:var(--arana) no-repeat center/contain;
  --arana:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cellipse cx='16' cy='18' rx='5' ry='6' fill='black'/%3E%3Ccircle cx='16' cy='10' r='3.2' fill='black'/%3E%3Cpath d='M11 15L4 11M11 18H3M11 21L4 26M21 15l7-4M21 18h8M21 21l7 5'/%3E%3C/svg%3E")}
@media (max-width:860px){ .hw-arana{right:40px} }
@keyframes hw-arana{0%,100%{height:62px}50%{height:82px}}

@media (prefers-reduced-motion:reduce){ .hw-bat,.hw-bat .ar,.hw-bat .ab{animation:none} .hw-bat{display:none} .hw-arana{animation:none;height:70px} }