/* ============================================================
   EL PESO RINDE — CAPA ESTACIONAL DE HALLOWEEN (reversible)
   Se activa con <link rel="stylesheet" href="halloween.css">
   y <script src="halloween.js">. Quitando esas 2 líneas y
   este archivo, el sitio vuelve a la normalidad.
   No modifica el diseño base: todo va ENCIMA.
   ============================================================ */

/* ---------- Banner superior temático ---------- */
.hw-banner{
  position:relative;z-index:9990;
  display:flex;align-items:center;justify-content:center;gap:.5em;
  flex-wrap:wrap;text-align:center;
  padding:10px 14px;
  background:linear-gradient(90deg,#12041f 0%,#2a0a3f 30%,#4a1503 55%,#2a0a3f 80%,#12041f 100%);
  color:#ffb347;
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.02em;
  border-bottom:2px solid #ff7518;
  box-shadow:0 2px 18px rgba(255,117,24,.35);
}
.hw-banner .hw-big{font-size:20px;line-height:1}
.hw-banner a{color:#ffd9a0;text-decoration:underline}

/* ---------- Telarañas en las esquinas ---------- */
.hw-web{
  position:fixed;top:44px;z-index:9980;pointer-events:none;
  font-size:64px;line-height:1;opacity:.5;
  filter:drop-shadow(0 0 6px rgba(180,140,255,.45));
  user-select:none;
}
.hw-web.left{left:-6px}
.hw-web.right{right:-6px;transform:scaleX(-1)}
@media(max-width:640px){.hw-web{font-size:44px;top:56px}}

/* ---------- Luna llena (solo portada) ---------- */
.hw-moon{
  position:fixed;top:70px;right:6%;z-index:1;pointer-events:none;
  width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#fffbe8 0%,#f7e9b8 45%,#e8d48a 75%,#d9c06a 100%);
  box-shadow:0 0 40px 14px rgba(255,240,180,.35),0 0 110px 40px rgba(255,180,60,.18);
  opacity:.9;
  animation:hwMoonPulse 6s ease-in-out infinite;
}
.hw-moon::before,.hw-moon::after{
  content:"";position:absolute;border-radius:50%;background:rgba(190,165,95,.35);
}
.hw-moon::before{width:22px;height:22px;top:26px;left:24px}
.hw-moon::after{width:14px;height:14px;top:58px;left:58px}
@keyframes hwMoonPulse{0%,100%{box-shadow:0 0 40px 14px rgba(255,240,180,.32),0 0 110px 40px rgba(255,180,60,.15)}50%{box-shadow:0 0 52px 20px rgba(255,240,180,.45),0 0 130px 52px rgba(255,180,60,.24)}}
@media(max-width:640px){.hw-moon{width:74px;height:74px;top:64px;right:4%}}

/* ---------- Niebla baja (solo portada) ---------- */
.hw-fog{
  position:fixed;left:-10%;right:-10%;bottom:-30px;height:150px;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 30% 100%,rgba(190,160,230,.16),transparent 65%),
             radial-gradient(ellipse at 70% 100%,rgba(255,150,60,.10),transparent 65%);
  filter:blur(22px);
  animation:hwFog 16s ease-in-out infinite alternate;
}
@keyframes hwFog{from{transform:translateX(-3%)}to{transform:translateX(3%)}}

/* ---------- Elementos flotantes (inyectados por JS) ---------- */
.hw-float{
  position:fixed;top:-60px;z-index:9970;pointer-events:none;user-select:none;
  line-height:1;will-change:transform,opacity;
  animation-name:hwFall;animation-timing-function:linear;animation-iteration-count:1;
}
@keyframes hwFall{
  0%{transform:translate3d(0,-60px,0) rotate(0deg);opacity:0}
  8%{opacity:var(--hw-op,.85)}
  50%{transform:translate3d(var(--hw-drift,30px),55vh,0) rotate(var(--hw-rot,40deg))}
  92%{opacity:var(--hw-op,.85)}
  100%{transform:translate3d(calc(var(--hw-drift,30px) * -0.6),108vh,0) rotate(calc(var(--hw-rot,40deg) * -1));opacity:0}
}
.hw-bat{animation-name:hwFly}
@keyframes hwFly{
  0%{transform:translate3d(-8vw,0,0) scaleX(1);opacity:0}
  6%{opacity:.9}
  25%{transform:translate3d(22vw,6vh,0) scaleX(1)}
  49%{transform:translate3d(48vw,-3vh,0) scaleX(1)}
  50%{transform:translate3d(50vw,-3vh,0) scaleX(-1)}
  75%{transform:translate3d(24vw,5vh,0) scaleX(-1)}
  94%{opacity:.9}
  100%{transform:translate3d(-8vw,-2vh,0) scaleX(-1);opacity:0}
}

/* ---------- Acentos Halloween sobre el diseño ---------- */
h1{
  text-shadow:0 0 22px rgba(255,117,24,.45),0 0 46px rgba(147,51,234,.28)!important;
}
h2{
  text-shadow:0 0 16px rgba(255,150,50,.32),0 0 34px rgba(147,51,234,.20)!important;
}
h3{
  text-shadow:0 0 10px rgba(255,150,50,.22)!important;
}

/* Aura del logo en portada: tinte naranja */
.hw-home .aura{
  background:radial-gradient(circle,rgba(255,117,24,.55) 0%,rgba(255,140,40,.24) 38%,rgba(200,80,255,.08) 62%,transparent 74%)!important;
}

/* Calabazas decorativas en secciones (inyectadas por JS) */
.hw-pumpkin{
  display:inline-block;margin:0 .35em;font-size:1.15em;line-height:1;
  filter:drop-shadow(0 0 8px rgba(255,117,24,.55));
  animation:hwBob 3.2s ease-in-out infinite;
  vertical-align:-.12em;user-select:none;
}
@keyframes hwBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}

/* Borde luminoso sutil en tarjetas/enlaces destacados */
a.hw-glow, .hw-glow{
  box-shadow:0 0 14px rgba(255,117,24,.35),inset 0 0 8px rgba(147,51,234,.18)!important;
}

@media (prefers-reduced-motion: reduce){
  .hw-float,.hw-bat,.hw-pumpkin,.hw-moon,.hw-fog{animation:none!important}
  .hw-float,.hw-bat{display:none!important}
}