/* ============================================================
   HALLOWEEN DECOR v2 — CeluCuervo
   Luna, niebla, fantasmas, araña colgante, jack-o-lanterns
   con cara brillante, murciélagos bidireccionales
   ============================================================ */
:root{
  --halloween-orange:#ff7a18;
  --halloween-purple:#7b2fff;
}
/* Ambiente */
.halloween-bg{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 20% 10%, rgba(123,47,255,.10) 0%, transparent 50%),
             radial-gradient(circle at 80% 90%, rgba(255,122,24,.10) 0%, transparent 50%);
  mix-blend-mode:screen;}
/* Viñeta espeluznante — oscurece los bordes de la pantalla */
.halloween-vignette{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(22,8,40,.16) 100%);}
/* Luna con cráteres y halo */
.halloween-moon{position:fixed;top:70px;right:5%;width:110px;height:110px;z-index:1;pointer-events:none;
  filter:drop-shadow(0 0 26px rgba(255,225,140,.55)) drop-shadow(0 0 60px rgba(255,180,60,.25));
  animation:moon-drift 14s ease-in-out infinite;}
@keyframes moon-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.halloween-moon svg{width:100%;height:100%;}
/* Niebla en el piso */
.halloween-fog{position:fixed;left:0;right:0;bottom:0;height:130px;z-index:2;pointer-events:none;overflow:hidden;}
.halloween-fog::before,.halloween-fog::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 40% 90% at 15% 100%, rgba(200,190,255,.16), transparent 70%),
    radial-gradient(ellipse 35% 80% at 45% 100%, rgba(200,190,255,.12), transparent 70%),
    radial-gradient(ellipse 40% 90% at 75% 100%, rgba(200,190,255,.14), transparent 70%),
    linear-gradient(0deg, rgba(190,180,255,.08), transparent);
  animation:fog-drift 22s ease-in-out infinite;}
.halloween-fog::after{animation-delay:-11s;animation-duration:28s;
  background:
    radial-gradient(ellipse 45% 85% at 25% 100%, rgba(255,200,150,.10), transparent 70%),
    radial-gradient(ellipse 40% 90% at 60% 100%, rgba(200,190,255,.12), transparent 70%),
    radial-gradient(ellipse 45% 85% at 90% 100%, rgba(255,200,150,.09), transparent 70%);}
@keyframes fog-drift{0%,100%{transform:translateX(-3%)}50%{transform:translateX(3%)}}
/* Murciélagos */
.halloween-bats{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:2;}
.halloween-bat{position:absolute;width:42px;height:22px;opacity:.6;animation:bat-fly linear infinite;}
.halloween-bat svg{width:100%;height:100%;fill:#160a26;}
.halloween-bat--flip{animation-name:bat-fly-r;}
.halloween-bat--flip svg{transform:scaleX(-1);}
/* Alas que aletean — cada ala rota en su hombro */
.halloween-bat .wl{transform-box:view-box;transform-origin:30px 16px;animation:bat-wing-l .28s ease-in-out infinite alternate;}
.halloween-bat .wr{transform-box:view-box;transform-origin:34px 16px;animation:bat-wing-r .28s ease-in-out infinite alternate;}
@keyframes bat-wing-l{from{transform:rotate(16deg)}to{transform:rotate(-18deg)}}
@keyframes bat-wing-r{from{transform:rotate(-16deg)}to{transform:rotate(18deg)}}
@keyframes bat-fly{
  0%{transform:translateX(-10vw) translateY(0) rotate(0deg)}
  25%{transform:translateX(25vw) translateY(-34px) rotate(-8deg)}
  50%{transform:translateX(50vw) translateY(22px) rotate(5deg)}
  75%{transform:translateX(75vw) translateY(-26px) rotate(-3deg)}
  100%{transform:translateX(112vw) translateY(10px) rotate(0deg)}}
@keyframes bat-fly-r{
  0%{transform:translateX(112vw) translateY(0) rotate(0deg)}
  25%{transform:translateX(78vw) translateY(28px) rotate(6deg)}
  50%{transform:translateX(48vw) translateY(-20px) rotate(-6deg)}
  75%{transform:translateX(22vw) translateY(24px) rotate(4deg)}
  100%{transform:translateX(-12vw) translateY(-6px) rotate(0deg)}}
.halloween-bat:nth-child(1){top:8%;animation-duration:30s;}
.halloween-bat:nth-child(2){top:12%;animation-duration:28s;animation-delay:-6s;width:32px;opacity:.45;}
.halloween-bat:nth-child(3){top:26%;animation-duration:34s;animation-delay:-12s;width:52px;opacity:.35;}
.halloween-bat:nth-child(4){top:48%;animation-duration:24s;animation-delay:-3s;width:28px;opacity:.5;}
.halloween-bat:nth-child(5){top:66%;animation-duration:32s;animation-delay:-18s;width:38px;opacity:.4;}
.halloween-bat:nth-child(6){top:38%;animation-duration:27s;animation-delay:-9s;width:34px;opacity:.5;}
/* Bruja en escoba — cruza el cielo cada ~1 min */
.halloween-witch{position:fixed;top:11%;left:0;width:130px;z-index:3;pointer-events:none;opacity:.85;
  animation:witch-fly 55s linear infinite;filter:drop-shadow(0 6px 12px rgba(0,0,0,.3));}
.halloween-witch svg{width:100%;height:auto;animation:witch-bob 3.2s ease-in-out infinite;}
@keyframes witch-fly{
  0%{transform:translate(-20vw,0)}
  25%{transform:translate(22vw,-46px)}
  50%{transform:translate(55vw,12px)}
  75%{transform:translate(90vw,-34px)}
  100%{transform:translate(120vw,-6px)}}
@keyframes witch-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
/* Fantasmas */
.halloween-ghosts{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:2;}
.halloween-ghost{position:absolute;width:46px;opacity:.8;filter:drop-shadow(0 4px 14px rgba(255,255,255,.25));
  animation:ghost-float linear infinite;}
.halloween-ghost svg{width:100%;height:auto;}
.halloween-ghost:nth-child(1){top:34%;animation-duration:38s;}
.halloween-ghost:nth-child(2){top:58%;animation-duration:46s;animation-delay:-20s;width:38px;opacity:.6;}
.halloween-ghost:nth-child(3){top:18%;animation-duration:52s;animation-delay:-34s;width:54px;opacity:.55;}
@keyframes ghost-float{
  0%{transform:translateX(-12vw) translateY(0)}
  25%{transform:translateX(20vw) translateY(-26px)}
  50%{transform:translateX(50vw) translateY(14px)}
  75%{transform:translateX(80vw) translateY(-20px)}
  100%{transform:translateX(114vw) translateY(6px)}}
/* Ojos que brillan en la oscuridad — aparecen y parpadean */
.halloween-eyes{position:fixed;inset:0;pointer-events:none;z-index:2;}
.halloween-eyes .eyes{position:absolute;display:flex;gap:6px;opacity:0;animation:eyes-blink 11s ease-in-out infinite;}
.halloween-eyes .eyes span{width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,#ffe08a 0%,#ff9a2e 55%,rgba(255,120,20,0) 78%);
  box-shadow:0 0 10px 3px rgba(255,160,40,.5);}
.halloween-eyes .e1{left:9%;top:56%;}
.halloween-eyes .e2{left:83%;top:34%;animation-delay:-4s;animation-duration:13s;}
.halloween-eyes .e3{left:64%;top:74%;animation-delay:-7s;animation-duration:15s;}
.halloween-eyes .e4{left:26%;top:22%;animation-delay:-2.5s;animation-duration:12s;}
@keyframes eyes-blink{
  0%,28%{opacity:0}
  36%,44%{opacity:1}
  47%,53%{opacity:.12}
  56%,64%{opacity:1}
  72%,100%{opacity:0}}
/* Telarañas */
.halloween-web{position:fixed;width:150px;height:150px;opacity:.25;pointer-events:none;z-index:3;}
.halloween-web svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2;}
.halloween-web--tl{top:0;left:0;}
.halloween-web--tr{top:0;right:0;transform:scaleX(-1);}
/* Arañas colgantes */
.halloween-spider{position:fixed;top:0;right:17%;width:46px;height:230px;z-index:5;pointer-events:none;}
.halloween-spider .thread{position:absolute;top:0;left:50%;width:2px;height:150px;margin-left:-1px;
  background:linear-gradient(180deg, rgba(230,230,230,.9), rgba(230,230,230,.15));
  transform-origin:top;animation:thread-sway 7s ease-in-out infinite;}
.halloween-spider .body{position:absolute;top:150px;left:50%;width:46px;margin-left:-23px;
  animation:spider-sway 7s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));}
.halloween-spider .body svg{width:100%;height:auto;}
/* Variantes de posición/tamaño */
.halloween-spider--2{right:auto;left:10%;width:34px;height:170px;}
.halloween-spider--2 .thread{height:110px;animation-duration:8.5s;animation-delay:-2s;}
.halloween-spider--2 .body{top:110px;width:34px;margin-left:-17px;animation-duration:8.5s;animation-delay:-2s;}
.halloween-spider--3{right:auto;left:34%;width:38px;height:200px;}
.halloween-spider--3 .thread{height:130px;animation-duration:9.5s;animation-delay:-4.5s;}
.halloween-spider--3 .body{top:130px;width:38px;margin-left:-19px;animation-duration:9.5s;animation-delay:-4.5s;}
.halloween-spider--4{right:36%;width:28px;height:150px;}
.halloween-spider--4 .thread{height:96px;animation-duration:6.2s;animation-delay:-1.2s;}
.halloween-spider--4 .body{top:96px;width:28px;margin-left:-14px;animation-duration:6.2s;animation-delay:-1.2s;}
/* Arañas que caminan por el suelo — patas articuladas */
.halloween-spider-crawl{position:fixed;bottom:8px;left:0;width:38px;z-index:5;pointer-events:none;
  animation:spider-crawl 24s linear infinite;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));}
.halloween-spider-crawl--2{bottom:24px;width:30px;animation-duration:17s;animation-delay:-7s;}
.halloween-spider-crawl--3{bottom:2px;width:48px;animation-duration:33s;animation-delay:-19s;}
.halloween-spider-crawl .crawl-body{display:block;animation:spider-bob .45s ease-in-out infinite alternate;}
.halloween-spider-crawl svg{width:100%;height:auto;transform:rotate(90deg);}
@keyframes spider-bob{from{transform:translateY(0)}to{transform:translateY(-1.6px)}}
/* Patas: cada una rota en su articulación — marcha alternada tipo araña real */
.halloween-spider-crawl .leg{stroke:#160b28;stroke-width:2.6;fill:none;stroke-linecap:round;transform-box:view-box;}
.halloween-spider-crawl .l1{transform-origin:19px 14px}
.halloween-spider-crawl .l2{transform-origin:17px 20px}
.halloween-spider-crawl .l3{transform-origin:17px 27px}
.halloween-spider-crawl .l4{transform-origin:19px 33px}
.halloween-spider-crawl .r1{transform-origin:29px 14px}
.halloween-spider-crawl .r2{transform-origin:31px 20px}
.halloween-spider-crawl .r3{transform-origin:31px 27px}
.halloween-spider-crawl .r4{transform-origin:29px 33px}
.halloween-spider-crawl .ga{animation:leg-a .45s ease-in-out infinite alternate;}
.halloween-spider-crawl .gb{animation:leg-b .45s ease-in-out infinite alternate;}
@keyframes leg-a{from{transform:rotate(11deg)}to{transform:rotate(-11deg)}}
@keyframes leg-b{from{transform:rotate(-11deg)}to{transform:rotate(11deg)}}
@keyframes spider-crawl{
  0%{transform:translateX(-10vw) scaleX(1);}
  48%{transform:translateX(88vw) scaleX(1);}
  50%{transform:translateX(90vw) scaleX(-1);}
  98%{transform:translateX(-8vw) scaleX(-1);}
  100%{transform:translateX(-10vw) scaleX(1);}
}
@keyframes thread-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes spider-sway{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(26px) rotate(2.5deg)}}
/* Calabazas jack-o-lantern con cara brillante */
.halloween-pumpkin{position:fixed;bottom:96px;right:24px;width:76px;height:76px;pointer-events:none;z-index:4;
  filter:drop-shadow(0 8px 20px rgba(255,122,24,.4));
  animation:pumpkin-wiggle 3.5s ease-in-out infinite;}
.halloween-pumpkin--bl{right:auto;left:24px;width:58px;height:58px;animation-delay:-1.5s;}
.halloween-pumpkin svg{width:100%;height:100%;}
.halloween-pumpkin .face-glow path,.halloween-pumpkin .face-glow polygon{
  fill:#ffe14d;filter:drop-shadow(0 0 6px rgba(255,214,64,.95)) drop-shadow(0 0 14px rgba(255,150,20,.6));
  animation:face-flicker 2.4s ease-in-out infinite;}
@keyframes pumpkin-wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes face-flicker{0%,100%{opacity:1}42%{opacity:1}46%{opacity:.55}50%{opacity:1}78%{opacity:1}82%{opacity:.7}86%{opacity:1}}
/* Tumba RIP junto a la calabaza */
.halloween-tomb{position:fixed;bottom:88px;right:112px;width:46px;z-index:4;pointer-events:none;
  transform:rotate(-3deg);filter:drop-shadow(0 5px 12px rgba(0,0,0,.35));}
.halloween-tomb svg{width:100%;height:auto;}
/* Polvo naranja ascendente */
.halloween-dust{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.halloween-dust i{position:absolute;display:block;width:5px;height:5px;border-radius:50%;
  background:rgba(255,122,24,.5);animation:dust-rise linear infinite;}
/* Candy corn mezclado en el polvo */
.halloween-dust i.candy-corn{background:linear-gradient(180deg,#fff8e7 0%,#ffd24d 42%,#ff7a18 58%);
  clip-path:polygon(50% 0,100% 100%,0 100%);box-shadow:none;border-radius:1px;}
@keyframes dust-rise{0%{transform:translateY(105vh);opacity:0}12%{opacity:.75}88%{opacity:.6}100%{transform:translateY(-10vh);opacity:0}}
/* Cinta superior */
.halloween-ribbon{position:fixed;top:0;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#7b2fff 0%,#a544ff 40%,#ff7a18 100%);
  color:#fff;font-family:'Hanken Grotesk','Inter',sans-serif;font-weight:800;font-size:12px;letter-spacing:.14em;
  padding:7px 24px 13px;border-radius:0 0 20px 20px;z-index:100010;pointer-events:none;
  box-shadow:0 6px 22px rgba(123,47,255,.35), inset 0 -2px 0 rgba(0,0,0,.15);}
.halloween-ribbon span{display:inline-block;animation:ribbon-flicker 2.2s infinite;}
@keyframes ribbon-flicker{0%,100%{opacity:1}50%{opacity:.74}}
/* Reducir movimiento */
@media (prefers-reduced-motion:reduce){
  .halloween-bat,.halloween-pumpkin,.halloween-dust i,.halloween-ribbon span,
  .halloween-ghost,.halloween-moon,.halloween-fog::before,.halloween-fog::after,
  .halloween-spider .thread,.halloween-spider .body,.halloween-pumpkin .face-glow path,
  .halloween-spider-crawl,.halloween-spider-crawl .crawl-body,.halloween-spider-crawl .leg,
  .halloween-bat .wl,.halloween-bat .wr,.halloween-witch,.halloween-witch svg,
  .halloween-eyes .eyes{animation:none;}
}
/* Móvil */
@media (max-width:768px){
  .halloween-ribbon{font-size:10.5px;padding:6px 16px 10px;max-width:86vw;text-align:center;line-height:1.3;}
  .halloween-pumpkin{width:52px;height:52px;right:12px;bottom:80px;}
  .halloween-pumpkin--bl{width:42px;height:42px;left:12px;bottom:80px;}
  .halloween-web{width:96px;height:96px;}
  .halloween-moon{width:70px;height:70px;top:90px;right:6%;}
  .halloween-spider{right:8%;height:170px;width:34px;}
  .halloween-spider .thread{height:110px;}
  .halloween-spider .body{top:110px;width:34px;margin-left:-17px;}
  .halloween-spider--3,.halloween-spider--4{display:none;}
  .halloween-spider-crawl{width:30px;}
  .halloween-spider-crawl--3{display:none;}
  .halloween-ghost:nth-child(3){display:none;}
  .halloween-witch{width:88px;top:14%;}
  .halloween-eyes .eyes span{width:6px;height:6px;}
  .halloween-eyes .e3,.halloween-eyes .e4{display:none;}
  .halloween-tomb{display:none;}
}