/* Zonaferoz — temporadas: Halloween, Navidad, Año Nuevo, Amor y Amistad.
   Solo se carga cerca de las fechas de cada temporada. */

/* ===== Halloween ===== */
.zfh-card-web,.zfh-card-deco{position:absolute;pointer-events:none;z-index:3}
.zfh-card-web{top:0;left:0;width:34%;max-width:120px;min-width:64px;aspect-ratio:1/1;opacity:.75;color:#fff;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.55))}
.zfh-card-web.zfh-r{left:auto;right:0;transform:scaleX(-1);width:22%;max-width:84px;min-width:48px;opacity:.6}
.zfh-card-web svg,.zfh-card-deco svg{display:block;width:100%;height:100%}
.zfh-card-deco{right:10px;bottom:10px;display:flex;gap:2px;align-items:flex-end;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(255,122,26,.45));
  transition:transform .35s ease}
.zfh-card-deco svg{width:34px;height:34px}
.zfh-card-deco svg.zfh-sm{width:24px;height:24px}
.zfh-card-deco.zfh-top{bottom:auto;top:10px}
a.zf-card-image:hover .zfh-card-deco,.zf-mc-card:hover .zfh-card-deco{transform:translateY(-4px) rotate(-6deg)}
.zf-mc-card{position:relative}
.zfh-ico{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.1em;
  filter:drop-shadow(0 0 5px rgba(255,150,40,.55))}
.zfh-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.zf-featured-section{position:relative}
.zfh-sky-web{position:absolute;top:0;width:min(17vw,230px);aspect-ratio:1/1;color:#fff;opacity:.5;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}
.zfh-sky-web.zfh-l{left:0}
.zfh-sky-web.zfh-r{right:0;transform:scaleX(-1)}
.zfh-sky-web svg{display:block;width:100%;height:100%}
.zfh-hang{position:absolute;top:0;width:34px;height:260px;overflow:hidden}
.zfh-hang .zfh-unit{position:absolute;left:0;top:0;width:34px;animation:zfhDrop var(--zfh-t,7s) ease-in-out infinite;animation-delay:var(--zfh-d,0s)}
.zfh-hang .zfh-thread{position:absolute;left:16px;bottom:30px;width:1.5px;height:300px;background:linear-gradient(#ffffff55,#ffffffcc)}
.zfh-hang .zfh-spider{position:absolute;left:0;top:0;width:34px;height:34px;transform-origin:50% 0;animation:zfhSwing 3.4s ease-in-out infinite}
.zfh-unit{height:34px}
.zfh-bat{position:absolute;left:-90px;top:var(--zfh-y,40px);width:54px;height:27px;animation:zfhFly var(--zfh-t,24s) linear infinite;animation-delay:var(--zfh-d,0s);opacity:.9}
.zfh-bat svg{width:100%;height:100%;display:block;animation:zfhBob 1.6s ease-in-out infinite}
.zfh-bat .zfh-wl,.zfh-bat .zfh-wr{transform-origin:30px 16px;animation:zfhFlap .32s ease-in-out infinite alternate}
@keyframes zfhDrop{0%,100%{transform:translateY(-6px)}50%{transform:translateY(var(--zfh-h,110px))}}
@keyframes zfhSwing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes zfhFly{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 180px))}}
@keyframes zfhBob{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
@keyframes zfhFlap{from{transform:scaleY(1)}to{transform:scaleY(.4)}}
@media (max-width:700px){
  .zfh-card-deco svg{width:28px;height:28px}.zfh-card-deco svg.zfh-sm{width:20px;height:20px}
  .zfh-sky-web{width:22vw}.zfh-bat{width:40px;height:20px}
  .zfh-hide-m{display:none}
}
@media (prefers-reduced-motion:reduce){
  .zfh-hang .zfh-unit,.zfh-hang .zfh-spider,.zfh-bat,.zfh-bat svg,.zfh-bat .zfh-wl,.zfh-bat .zfh-wr{animation:none!important}
  .zfh-bat{display:none}.zfh-hang .zfh-unit{transform:translateY(60px)}
}

/* ===== Sonido de Halloween ===== */
#zfh-sound-btn{position:fixed;left:16px;bottom:88px;z-index:9998;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,140,40,.55);background:rgba(20,14,28,.88);color:#fff;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 14px rgba(255,122,26,.35);backdrop-filter:blur(6px);transition:transform .2s,opacity .2s}
#zfh-sound-btn:hover{transform:scale(1.08)}
#zfh-sound-btn.is-off{opacity:.65;border-color:rgba(255,255,255,.25);box-shadow:0 4px 16px rgba(0,0,0,.5)}
#zfh-sound-btn.is-wait{animation:zfhPulse 1.8s ease-in-out infinite}
@keyframes zfhPulse{0%,100%{box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 0 0 rgba(255,122,26,.55)}50%{box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 0 10px rgba(255,122,26,0)}}
@media (prefers-reduced-motion:reduce){#zfh-sound-btn.is-wait{animation:none}}
@media (max-width:700px){#zfh-sound-btn{left:10px;bottom:84px;width:42px;height:42px;font-size:18px}}

/* ===== Colores de cada temporada ===== */
html.zff-s-navidad{--zff-glow:rgba(255,110,90,.5);--zff-accent:#ff6b5b;--zff-pill-bg:linear-gradient(135deg,#c1272d,#1f8a4c);--zff-pill-bd:rgba(255,255,255,.4)}
html.zff-s-anonuevo{--zff-glow:rgba(255,210,63,.55);--zff-accent:#ffd23f;--zff-pill-bg:linear-gradient(135deg,#6d3bff,#ec4899);--zff-pill-bd:rgba(255,210,63,.8)}
html.zff-s-amor{--zff-glow:rgba(255,77,141,.55);--zff-accent:#ff4d8d;--zff-pill-bg:linear-gradient(135deg,#e63950,#ff4d8d);--zff-pill-bd:rgba(255,255,255,.4)}

/* ===== Navidad / Año Nuevo / Amor y Amistad (decoración común) ===== */
.zff-card-corner,.zff-card-deco{position:absolute;pointer-events:none;z-index:3}
.zff-card-corner{top:0;left:0;width:34%;max-width:120px;min-width:64px;aspect-ratio:1/1;opacity:.95;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.zff-card-corner.zff-r{left:auto;right:0;transform:scaleX(-1);width:20%;max-width:78px;min-width:44px;opacity:.8}
.zff-card-corner svg,.zff-card-deco svg{display:block;width:100%;height:100%;overflow:visible}
.zff-card-deco{right:10px;bottom:10px;display:flex;gap:2px;align-items:flex-end;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.55)) drop-shadow(0 0 8px var(--zff-glow,rgba(255,255,255,.35)));transition:transform .35s ease}
.zff-card-deco svg{width:34px;height:34px}.zff-card-deco svg.zff-sm{width:24px;height:24px}
.zff-card-deco.zff-top{bottom:auto;top:10px}
a.zf-card-image:hover .zff-card-deco,.zf-mc-card:hover .zff-card-deco{transform:translateY(-4px) rotate(-6deg)}
.zf-mc-card{position:relative}
.zff-ico{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.1em;filter:drop-shadow(0 0 5px var(--zff-glow,rgba(255,255,255,.4)))}
.zff-ico svg{display:block;width:100%;height:100%}
.zff-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.zf-featured-section{position:relative}
.zf-featured-section .zf-section-title{position:relative;z-index:3}
.zff-sky-corner{position:absolute;top:0;width:min(17vw,230px);aspect-ratio:1/1;opacity:.95;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.zff-sky-corner.zff-l{left:0}.zff-sky-corner.zff-r{right:0;transform:scaleX(-1)}
.zff-sky-corner svg{display:block;width:100%;height:100%}
.zff-hang{position:absolute;top:-4px;width:34px;transform-origin:50% 0;animation:zffSwing var(--zff-t,4s) ease-in-out infinite;animation-delay:var(--zff-d,0s)}
.zff-thread{width:1.6px;height:var(--zff-len,70px);margin:0 auto;background:linear-gradient(#ffffff66,#ffffffd9)}
.zff-orn{width:34px;height:34px;margin-top:-3px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.zff-orn svg{display:block;width:100%;height:100%}
.zff-pill{position:absolute;top:26px;right:max(16px,calc((100vw - 1300px)/2 + 24px));padding:8px 16px;border-radius:999px;font:700 15px/1.2 system-ui,Arial,sans-serif;color:#fff;
  background:var(--zff-pill-bg);border:1px solid var(--zff-pill-bd);box-shadow:0 4px 18px rgba(0,0,0,.35),0 0 18px var(--zff-glow);display:flex;gap:8px;align-items:center;white-space:nowrap}
.zff-pill svg{width:20px;height:20px;display:block}
.zff-lights{position:absolute;left:0;right:0;top:100%;height:44px;overflow:hidden;display:flex;justify-content:space-between;padding:0 12px;pointer-events:none;z-index:1}
.zff-lights::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:#1b1b1b;opacity:.85}
.zff-bulb{position:relative;width:20px}
.zff-bulb>span{display:block;width:18px;height:28px;animation:zffTwinkle 1.7s ease-in-out infinite;animation-delay:var(--zff-d,0s);filter:drop-shadow(0 0 5px currentColor)}
.zff-bulb svg{display:block;width:100%;height:100%}
.zff-flyer-wrap{position:absolute;left:0;right:0;top:0;height:90px;overflow:hidden;pointer-events:none;z-index:2}
.zff-flyer{position:absolute;top:0;left:0;width:var(--zff-fw,130px);pointer-events:none;z-index:2;animation:zffFly var(--zff-fd,44s) linear infinite;opacity:0}
.zff-flyer svg{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.zff-bob{animation:zffBob 1.5s ease-in-out infinite}
#zff-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9990}
#zff-sound-btn{position:fixed;left:16px;bottom:88px;z-index:9998;width:46px;height:46px;border-radius:50%;border:1px solid var(--zff-accent,#fff);background:rgba(20,16,26,.88);color:#fff;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 14px var(--zff-glow);backdrop-filter:blur(6px);transition:transform .2s,opacity .2s}
#zff-sound-btn:hover{transform:scale(1.08)}#zff-sound-btn.is-off{opacity:.65;border-color:rgba(255,255,255,.25);box-shadow:0 4px 16px rgba(0,0,0,.5)}
#zff-sound-btn.is-wait{animation:zffPulse 1.8s ease-in-out infinite}
@keyframes zffSwing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes zffTwinkle{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes zffBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes zffFly{0%{transform:translateX(-30vw);opacity:0}2%{opacity:1}24%{transform:translateX(112vw);opacity:1}25%,100%{transform:translateX(112vw);opacity:0}}
@keyframes zffPulse{0%,100%{box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 0 0 var(--zff-glow)}50%{box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 0 10px transparent}}
@media (max-width:700px){
  .zff-card-deco svg{width:28px;height:28px}.zff-card-deco svg.zff-sm{width:20px;height:20px}
  .zff-sky-corner{width:24vw}.zff-hide-m{display:none}.zff-pill{top:auto;bottom:10px;right:12px;font-size:12px;padding:6px 12px}
  .zff-bulb:nth-child(even){display:none}.zff-flyer{--zff-fw:96px}
  #zff-sound-btn{left:10px;bottom:84px;width:42px;height:42px;font-size:18px}
}
@media (prefers-reduced-motion:reduce){.zff-hang,.zff-bulb>span,.zff-bob,#zff-sound-btn.is-wait{animation:none!important}.zff-flyer{display:none}}