/* Decoración de Halloween (13/oct): la pone halloween.js solo del 1/oct al 2/nov. Rosada como la marca y sin tapar
   nada (no recibe toques). Sin movimiento con «Ver sin movimiento» o si el celular pide menos movimiento. */
.hw-telarana,.hw-calabaza{position:absolute;z-index:5;pointer-events:none;user-select:none;filter:drop-shadow(0 6px 14px #0009)}
.hw-telarana{top:14px;right:-10px;width:116px;transform-origin:85% 10%;animation:hw-balanceo 7s ease-in-out infinite}
.hw-calabaza{left:3%;bottom:-12px;width:76px;transform:rotate(-8deg)}
@keyframes hw-balanceo{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}

/* Murciélagos y fantasmas que revolotean por toda la pantalla (los mueve halloween.js; Paula: «más murciélagos, no
   solo de lado a lado, sino aleteando al azar por la página; igual los fantasmas»).
   Van DETRÁS de todo (Paula: «que pasen por detrás, porque cuando se ponen invisibles se ven mal»): la capa está justo
   encima del fondo cristalizado (body::before) y debajo de las secciones, tarjetas, textos e imágenes. */
.hw-capa{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hw-murcielago,.hw-fantasma-vuela{position:absolute;left:0;top:0;will-change:transform,opacity}
.hw-murcielago svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 3px 6px #0008) drop-shadow(0 0 6px #FF2E9355)}
.hw-murcielago svg path,.hw-murcielago svg ellipse,.hw-murcielago svg circle{fill:url(#hw-mg);stroke:#A80C5C;stroke-width:.6}
.hw-murcielago .hw-vena{fill:none;stroke:#B0105F;stroke-width:.7;opacity:.55}
.hw-murcielago .hw-brillo{fill:#fff;stroke:none;opacity:.5}
.hw-murcielago .hw-ojo{fill:#2A0618;stroke:none}
.hw-murcielago .hw-chispa{fill:#fff;stroke:none}
.hw-murcielago .hw-boca{fill:none;stroke:#2A0618;stroke-width:.7;stroke-linecap:round}
.hw-murcielago .hw-colmillo{fill:#fff;stroke:none}
/* Las alas giran en el hombro (no se aplastan) */
.hw-ala{transform-box:view-box;animation:var(--aleteo,.2s) ease-in-out infinite alternate}
.hw-ala-i{transform-origin:44px 26px;animation-name:hw-ala-i}
.hw-ala-d{transform-origin:56px 26px;animation-name:hw-ala-d}
@keyframes hw-ala-i{from{transform:rotate(24deg)}to{transform:rotate(-18deg)}}
@keyframes hw-ala-d{from{transform:rotate(-24deg)}to{transform:rotate(18deg)}}
.hw-fantasma-vuela img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 16px #0009)}
/* La portada tiene fondo de color: en Halloween un poco transparente, para que se vean volar a lo lejos detrás */
.halloween .escena{background:
  radial-gradient(60% 80% at 75% 40%,color-mix(in srgb,var(--c) 40%,transparent),transparent 70%),
  linear-gradient(120deg,#0C0612b3 30%,color-mix(in srgb,color-mix(in srgb,var(--c2) 22%,var(--noche)) 70%,transparent) 100%)}

@media (max-width:900px){
  .hw-telarana{top:8px;right:-8px;width:80px}
  .hw-calabaza{width:54px;bottom:-8px}
}
@media (max-width:640px){
  .hw-calabaza{display:none}   /* en el celular: menos cosas (y abajo a la izquierda va el precio) */
}
/* Sin movimiento: la telaraña quieta y sin bichos volando */
.quieta .hw-telarana{animation:none}
.quieta .hw-capa{display:none}
@media (prefers-reduced-motion:reduce){.hw-telarana{animation:none}.hw-capa{display:none}}