/* Zooasis — capa de Halloween (la misma de la tienda, cosas.zooasis.org, adaptada a las clases de la web). Solo se carga
   con el ajuste «halloween» encendido (panel → Inicio o Ajustes): body.tema-halloween, cielo crema, telarañas en las
   esquinas, niebla abajo, arañas colgando (las crea /static/halloween.js) y la tira bajo la barra. Sin naranja. */
:root { --hw-fondo: color-mix(in srgb, #FDEBD3 72%, white); --hw-fondo-2: #FDEBD3; --hw-oscuro: color-mix(in srgb, #2B1B21 78%, black); }

body.tema-halloween { background: var(--hw-fondo-2); }
.hw-cielo { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--hw-fondo) 0%, var(--hw-fondo-2) 100%); }

/* arañas colgando de su hilo: el hilo se alarga y se acorta, el conjunto se balancea y las patas se mueven */
.hw-aranas { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.hw-arana { position: absolute; top: 0; left: var(--x); width: var(--s); height: var(--len); color: var(--hw-oscuro); transform-origin: 50% 0;
  filter: drop-shadow(0 4px 4px rgba(43,27,33,.3));
  animation: hw-cuelga var(--d) ease-in-out var(--r) infinite alternate, hw-balanceo 5.5s ease-in-out var(--r) infinite alternate; }
.hw-arana::before { content: ""; position: absolute; left: 50%; top: 0; bottom: calc(var(--s) * .5); width: 1px; background: linear-gradient(rgba(43,27,33,.1), rgba(43,27,33,.5)); }
.hw-arana svg { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.hw-arana .patas, .hw-arana-tela .patas { transform-origin: 32px 34px; animation: hw-patas .9s ease-in-out infinite alternate; }
.hw-arana circle, .hw-arana-tela circle { fill: #E85D77; }   /* los ojos, en rosa */
.hw-arana-tela { position: absolute; width: 34px; color: var(--hw-oscuro); filter: drop-shadow(0 2px 3px rgba(43,27,33,.35)); left: 58px; top: 70px; transform: rotate(-30deg); }
@keyframes hw-cuelga { from { height: calc(var(--len) * .42); } to { height: var(--len); } }
@keyframes hw-balanceo { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes hw-patas { from { transform: scale(1, 1); } to { transform: scale(1.09, .93); } }

/* telarañas en las esquinas de arriba */
.hw-tela { position: fixed; top: 0; width: 220px; height: 220px; z-index: 6; pointer-events: none; opacity: .35; }
.hw-tela svg { width: 100%; height: 100%; display: block; }
.hw-tela path { stroke: #2B1B21; }
.hw-tela-izq { left: 0; }
.hw-tela-der { right: 0; transform: scaleX(-1); }
/* niebla que respira abajo */
.hw-niebla { position: fixed; left: 0; right: 0; bottom: 0; height: 200px; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255,251,252,.35) 60%, rgba(255,251,252,.6));
  mask-image: radial-gradient(60% 100% at 30% 100%, #2B1B21 30%, transparent 100%), radial-gradient(70% 100% at 75% 100%, #2B1B21 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(60% 100% at 30% 100%, #2B1B21 30%, transparent 100%), radial-gradient(70% 100% at 75% 100%, #2B1B21 30%, transparent 100%);
  animation: hw-niebla 12s ease-in-out infinite alternate; }
@keyframes hw-niebla { from { transform: translateX(-3%) scaleY(1); opacity: .7; } to { transform: translateX(3%) scaleY(1.15); opacity: 1; } }

/* tira bajo la barra: goteo abajo y calabaza que parpadea */
.hw-tira { position: relative; background: var(--hw-oscuro); color: #FDA2B3; text-align: center; padding: 11px 16px 15px; font-size: 14px; font-weight: 700; letter-spacing: .02em; z-index: 7; }
.hw-tira a { color: #FDA2B3; text-decoration: underline; text-underline-offset: 3px; }
.hw-tira a:hover { color: #fff; }
.hw-tira::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  background: radial-gradient(10px 14px at 8% 0, var(--hw-oscuro) 60%, transparent 62%), radial-gradient(14px 20px at 23% 0, var(--hw-oscuro) 60%, transparent 62%),
    radial-gradient(8px 10px at 41% 0, var(--hw-oscuro) 60%, transparent 62%), radial-gradient(16px 24px at 58% 0, var(--hw-oscuro) 60%, transparent 62%),
    radial-gradient(9px 12px at 74% 0, var(--hw-oscuro) 60%, transparent 62%), radial-gradient(13px 18px at 91% 0, var(--hw-oscuro) 60%, transparent 62%); }
.hw-tira .hw-cala { display: inline-block; animation: hw-parpadeo 3.2s infinite; }
@keyframes hw-parpadeo { 0%, 18%, 22%, 54%, 58%, 100% { opacity: 1; filter: none; } 20%, 56% { opacity: .35; filter: blur(.5px); } }

/* barra de arriba y pie en el granate oscuro, con el rosa de siempre */
.tema-halloween .barra-superior { background: var(--hw-oscuro); }
.tema-halloween .barra-izq a, .tema-halloween .barra-rescates { color: #FDA2B3; }
.tema-halloween .barra-izq a:hover, .tema-halloween .barra-rescates:hover { color: #fff; }
.tema-halloween .cabecera { box-shadow: 0 10px 40px rgba(43,27,33,.12); }
.tema-halloween .pie { background: var(--hw-oscuro); border-top: 2px solid #E85D77; }
.tema-halloween .pie h4, .tema-halloween .pie-tel { color: #FDA2B3 !important; }
.tema-halloween .hero-tarjeta h1 strong { animation: hw-vela 4s infinite; }   /* la palabra en rosa del titular parpadea como una vela */
@keyframes hw-vela { 0%, 100% { opacity: 1; } 8% { opacity: .55; } 10% { opacity: 1; } 47% { opacity: .75; } 50% { opacity: 1; } 71% { opacity: .5; } 73% { opacity: 1; } }

@media (max-width: 900px) {
  .hw-tela { width: 130px; height: 130px; }
  .hw-arana-tela { width: 22px; left: 34px; top: 42px; }
  .hw-niebla { height: 130px; }
  .hw-tira { font-size: 13px; padding: 10px 14px 14px; }
}
@media (prefers-reduced-motion: reduce) { .hw-arana, .hw-arana .patas, .hw-arana-tela .patas, .hw-niebla, .hw-tira .hw-cala, .tema-halloween .hero-tarjeta h1 strong { animation: none; } }