/* ===================== MOXIE — Halloween theme =====================
   Capa opcional sobre styles.css. Solo se activa cuando <html> tiene la
   clase "halloween" (la pone el script del <head>: del 1 oct al 2 nov,
   o forzado con ?halloween=on / ?halloween=off en la URL).
   Para quitarlo del todo: borra el bloque HALLOWEEN de index.html. */

.hw-only{ display:none; }
.hw-bats, .hw-web, .hw-spider, .hw-float{ display:none; }

html.halloween{
  --bg: #0b0710;
  --bg-alt: #130b1b;
  --surface: #1b1224;
  --surface-2: #261a33;
  --border: rgba(255,214,170,0.10);
  --muted: #a39aae;
  --orange: #ff7a18;
  --purple: #9b5cff;
}

html.halloween .hw-only{ display:inline; }

/* ---------- tipografía ---------- */
html.halloween h2{
  font-family: "Creepster", var(--font-display);
  letter-spacing: 1.5px;
  text-shadow: 0 0 22px rgba(255,122,24,.35);
}
html.halloween .splash-sub{ color: var(--orange); }

/* ---------- acentos naranja ---------- */
html.halloween .section-eyebrow,
html.halloween .section-sub-script,
html.halloween .stat-num,
html.halloween .dot{ color: var(--orange); }
html.halloween .section-eyebrow{ animation: hwFlicker 4.5s infinite; }
html.halloween .marquee-track span:nth-child(2n){ color: var(--orange); }
html.halloween .scroll-cue span::after{ background: var(--orange); }
html.halloween .ig-slide:hover,
html.halloween .payment-card:hover{ border-color: rgba(255,122,24,.55); }
html.halloween .contact-card:hover{ border-color: var(--orange); }
html.halloween .ig-nav:hover{ border-color: var(--orange); }
html.halloween .footer-social:hover{ color: var(--orange); }
html.halloween .btn-primary{ box-shadow: 0 0 26px rgba(232,40,60,.4); }

html.halloween .marquee-strip{
  background: linear-gradient(90deg, #1a0f24, #24120a, #1a0f24);
  border-color: rgba(255,122,24,.25);
}

/* ---------- hero: brumas y resplandor ---------- */
html.halloween .hero-bg{
  background:
    radial-gradient(ellipse 55% 45% at 82% 18%, rgba(255,122,24,0.20), transparent 62%),
    radial-gradient(ellipse 50% 45% at 8% 92%, rgba(155,92,255,0.22), transparent 62%),
    radial-gradient(ellipse 40% 30% at 55% 100%, rgba(232,40,60,0.14), transparent 70%),
    var(--bg);
}
html.halloween .hero-mascot{
  filter: drop-shadow(0 0 28px rgba(155,92,255,.45)) drop-shadow(0 30px 60px rgba(0,0,0,.6));
}

/* ---------- telarañas ---------- */
html.halloween .hw-web{
  display:block; position:absolute; top:0; z-index:1; pointer-events:none;
  width: clamp(110px, 15vw, 190px); height:auto; opacity:.55;
}
html.halloween .hw-web-l{ left:0; }
html.halloween .hw-web-r{ right:0; transform: scaleX(-1); }

/* ---------- araña colgante ---------- */
html.halloween .hw-spider{
  display:flex; flex-direction:column; align-items:center;
  position:absolute; top:0; left:17%; z-index:1; pointer-events:none;
  animation: hwSpider 7s ease-in-out infinite;
}
html.halloween .hw-spider::before{
  content:""; width:1px; height:120px; background: rgba(235,225,255,.4);
}
html.halloween .hw-spider span{ font-size:1.7rem; line-height:1; margin-top:-2px; filter: drop-shadow(0 0 8px rgba(155,92,255,.6)); }

/* ---------- murciélagos ---------- */
html.halloween .hw-bats{
  display:block; position:fixed; inset:0; z-index:4; overflow:hidden; pointer-events:none;
}
.hw-bat{
  position:absolute; left:0; top: var(--y, 20%);
  width: var(--s, 40px);
  animation: hwFly var(--t, 18s) linear var(--d, 0s) infinite;
}
.hw-bat.is-left{ animation-direction: reverse; }
.hw-bat svg{
  display:block; width:100%; height:auto; fill:#8f5ad8; opacity:.7;
  filter: drop-shadow(0 0 6px rgba(155,92,255,.55));
  transform-origin: 50% 55%;
  animation: hwFlap .38s ease-in-out infinite;
}
.hw-bat.is-left svg{ scale: -1 1; }

/* ---------- partículas flotantes (calabazas, fantasmas) ---------- */
html.halloween .hw-float{
  display:block; position:absolute; bottom:-40px; z-index:0; pointer-events:none;
  font-size: var(--s, 1.6rem); opacity:0;
  animation: hwRise var(--t, 18s) ease-in var(--d, 0s) infinite;
}

/* ---------- footer ---------- */
html.halloween .footer > span:first-child::after{ content:" 🎃 Feliz Halloween"; color: var(--orange); }

/* ---------- animaciones ---------- */
@keyframes hwFly{
  0%  { transform: translate(-12vw, 0); }
  25% { transform: translate(24vw, -7vh); }
  50% { transform: translate(50vw, 5vh); }
  75% { transform: translate(78vw, -6vh); }
  100%{ transform: translate(112vw, 2vh); }
}
@keyframes hwFlap{
  0%,100%{ transform: scaleY(1); }
  50%{ transform: scaleY(.45); }
}
@keyframes hwSpider{
  0%,100%{ transform: translateY(-75px); }
  50%{ transform: translateY(0); }
}
@keyframes hwRise{
  0%{ transform: translateY(0) rotate(-8deg); opacity:0; }
  15%{ opacity:.35; }
  85%{ opacity:.25; }
  100%{ transform: translateY(-95vh) rotate(10deg); opacity:0; }
}
@keyframes hwFlicker{
  0%,18%,22%,60%,64%,100%{ opacity:1; }
  20%,62%{ opacity:.35; }
}

@media (max-width: 900px){
  html.halloween .hw-spider{ left: 42%; }
}
@media (prefers-reduced-motion: reduce){
  html.halloween .hw-bats,
  html.halloween .hw-spider,
  html.halloween .hw-float{ display:none; }
  html.halloween .section-eyebrow{ animation:none; }
}