@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

/*
  Todos los efectos van en zonas vacías: encabezado (hueco central), parte baja del menú lateral,
  espacio libre del hero y costados de las secciones angostas. Lo importante se resalta con brillo.
*/
:root { --hw-orange: #ff7a00; --hw-orange-2: #ffb347; }
html.hw-on body { background-color: #0d0516 !important; }
.hw-deco, .hw-deco * { pointer-events: none !important; }

/* ================= CAPA FIJA ================= */
#hw-fixed { position: fixed; inset: 0; z-index: 40; overflow: hidden; }

/* atmósfera (suave, no tapa nada) */
.hw-vignette { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(60,8,110,.28) 90%, rgba(10,0,25,.55) 100%),
    radial-gradient(ellipse at 0% 100%, rgba(255,122,0,.16), transparent 38%),
    radial-gradient(ellipse at 100% 0%, rgba(122,44,255,.16), transparent 38%);
  animation: hw-breathe 6s ease-in-out infinite; }
@keyframes hw-breathe { 0%,100% { opacity: .85 } 50% { opacity: 1 } }
.hw-flash { position: absolute; inset: 0; animation: hw-lightning 14s infinite; }
@keyframes hw-lightning { 0%,92%,100% { background: rgba(190,150,255,0) } 93% { background: rgba(190,150,255,.14) } 94% { background: rgba(190,150,255,.02) } 95% { background: rgba(220,190,255,.18) } 97% { background: rgba(190,150,255,0) } }
.hw-fog { position: absolute; left: -20%; width: 140%; bottom: 0; height: 22vh; opacity: .28; filter: blur(16px);
  background: radial-gradient(ellipse 30% 60% at 20% 80%, rgba(190,160,255,.4), transparent 70%), radial-gradient(ellipse 35% 55% at 55% 90%, rgba(255,160,70,.2), transparent 70%), radial-gradient(ellipse 30% 60% at 85% 80%, rgba(170,140,255,.34), transparent 70%);
  animation: hw-fog 22s linear infinite alternate; }
@keyframes hw-fog { from { transform: translateX(-6%) } to { transform: translateX(6%) } }
.hw-ember { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: var(--hw-orange-2); box-shadow: 0 0 7px 2px rgba(255,150,30,.85); opacity: .8; animation: hw-rise linear infinite; }
@keyframes hw-rise { 0% { transform: translate(0,0); opacity: 0 } 10% { opacity: .9 } 100% { transform: translate(var(--dx), -105vh); opacity: 0 } }

/* encabezado: banner, arañas y murciélagos en el hueco central */
.hw-banner { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); text-align: center; line-height: 1;
  font-family: 'Creepster', cursive; font-size: clamp(18px, 1.9vw, 26px); letter-spacing: 3px; white-space: nowrap;
  color: var(--hw-orange); text-shadow: 0 0 6px #ff7a00, 0 0 14px #ff4d00, 0 2px 0 #3a0a00; animation: hw-bannerflick 5s infinite; }
.hw-banner small { display: block; margin-top: 3px; font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 4px; color: #d9b8ff; text-shadow: 0 0 8px #7a2cff; }
@keyframes hw-bannerflick { 0%,100% { opacity: 1 } 46% { opacity: 1 } 48% { opacity: .6 } 50% { opacity: 1 } 53% { opacity: .75 } 55% { opacity: 1 } }
.hw-sp { position: absolute; top: 0; width: 30px; animation: hw-sp 7s ease-in-out infinite; }
.hw-sp::before { content: ""; position: absolute; left: 50%; top: -90px; width: 1px; height: 90px; background: rgba(235,235,255,.55); }
.hw-sp svg { display: block; width: 100%; }
@keyframes hw-sp { 0%,100% { transform: translateY(8px) } 50% { transform: translateY(26px) } }
/* murciélagos cruzan solo el hueco del encabezado y se desvanecen antes de los botones */
.hw-bat.lane { top: 6px; left: 8vw; animation: hw-lane 12s linear infinite; opacity: 0; }
.hw-bat.lane.l2 { top: 22px; width: 28px; animation-duration: 16s; animation-delay: -7s; }
@keyframes hw-lane { 0% { transform: translate(0,0); opacity: 0 } 6% { opacity: 1 } 80% { opacity: 1 } 100% { transform: translate(24vw,10px); opacity: 0 } }

/* barra lateral: espacio vacío abajo del menú */
.hw-side { position: absolute; left: 6px; bottom: 6px; width: 220px; height: 330px; }
.hw-side .hw-web { position: absolute; left: 0; bottom: 0; width: 150px; opacity: .6; transform: scaleY(-1); }
.hw-side .hw-pumpkin.big { left: 14px; bottom: 0; width: 138px; }
.hw-side .hw-pumpkin.small { left: 136px; bottom: 0; width: 80px; animation-delay: -1.2s; }
.hw-side .hw-ghost.g1 { left: 108px; bottom: 150px; width: 60px; }
.hw-side .hw-ghost.g2 { left: 24px; bottom: 196px; width: 44px; opacity: .55; animation-duration: 11s; animation-delay: -4s; }

/* ================= HERO ================= */
.hw-hero { position: absolute; top: 0; bottom: 0; right: 70px; width: min(36%, 520px); overflow: hidden; z-index: 1; }
.hw-hero .hw-moon { position: absolute; top: 12%; right: 32%; width: 92px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7d6, #ffd36b 55%, #e6902a 100%);
  box-shadow: 0 0 36px 10px rgba(255,190,80,.38), 0 0 100px 32px rgba(255,122,0,.16); opacity: .92; }
.hw-hero .hw-moon::before, .hw-hero .hw-moon::after { content: ""; position: absolute; border-radius: 50%; background: rgba(150,90,20,.25); }
.hw-hero .hw-moon::before { width: 22%; height: 22%; left: 24%; top: 30%; }
.hw-hero .hw-moon::after { width: 14%; height: 14%; left: 58%; top: 55%; }
.hw-hero .hw-pumpkin.hp { right: 3%; bottom: -4px; width: 165px; }
.hw-hero .hw-ghost.hg { left: 6%; top: 22%; width: 66px; }
.hw-hero .hw-hang { position: absolute; left: 52%; top: -2px; width: 86px; }
.hw-hero .hw-web.hcorner { position: absolute; right: 0; top: 0; width: 110px; opacity: .7; transform: scaleX(-1); }
.hw-hero .hw-bat.hb1 { top: 38%; left: -50px; animation: hw-fly-h 11s linear infinite; }
.hw-hero .hw-bat.hb2 { top: 64%; left: -50px; width: 28px; animation: hw-fly-h 15s linear infinite -6s; }
@keyframes hw-fly-h { 0% { transform: translate(0,0) } 50% { transform: translate(260px,-16px) } 100% { transform: translate(580px,8px) } }

/* ================= COSTADOS DE SECCIONES ================= */
.hw-gut { position: absolute; overflow: hidden; z-index: 0; }
.hw-gut .hw-pumpkin.gp { left: 50%; bottom: -4px; width: min(150px, 55%); transform: translateX(-50%); }
.hw-gut .hw-pumpkin.gp.small2 { width: min(110px, 45%); }
.hw-gut .hw-ghost.gg1 { left: 16%; top: 16%; width: 70px; }
.hw-gut .hw-ghost.gg2 { right: 14%; top: 46%; width: 48px; opacity: .55; animation-duration: 11s; animation-delay: -4s; }
.hw-gut .hw-ghost.gg3 { left: 14%; top: 50%; width: 56px; opacity: .7; animation-duration: 10s; animation-delay: -2s; }
.hw-gut .hw-web.gcorner { position: absolute; left: 0; top: 0; width: min(190px, 60%); opacity: .8; }
.hw-gut .hw-web.gcorner.r { left: auto; right: 0; transform: scaleX(-1); opacity: .65; }
.hw-gut .hw-hang { position: absolute; left: 46%; top: -2px; width: 90px; }
.hw-gut .hw-bat.gb { top: 34%; left: -50px; animation: hw-fly-g 10s linear infinite; }
.hw-gut .hw-bat.gb2 { top: 22%; width: 30px; animation-duration: 14s; animation-delay: -5s; }
@keyframes hw-fly-g { 0% { transform: translate(0,0) } 50% { transform: translate(calc(var(--gw) * .5),-18px) } 100% { transform: translate(calc(var(--gw) + 80px),8px) } }

/* ================= PIEZAS ================= */
.hw-pumpkin { position: absolute; filter: drop-shadow(0 0 16px rgba(255,122,0,.8)); animation: hw-flicker 3.4s infinite; }
.hw-pumpkin .glow { animation: hw-candle 1.6s infinite alternate; }
.hw-pumpkin .eye { animation: hw-eyes 5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hw-flicker { 0%,100% { filter: drop-shadow(0 0 14px rgba(255,122,0,.75)) } 12% { filter: drop-shadow(0 0 26px rgba(255,160,40,1)) } 28% { filter: drop-shadow(0 0 10px rgba(255,90,0,.55)) } 55% { filter: drop-shadow(0 0 22px rgba(255,140,10,.9)) } }
@keyframes hw-candle { from { opacity: .75 } to { opacity: 1 } }
@keyframes hw-eyes { 0%,92%,100% { transform: scaleY(1) } 95% { transform: scaleY(.1) } }

.hw-ghost { position: absolute; opacity: .85; filter: drop-shadow(0 0 12px rgba(190,230,255,.7)); animation: hw-float 8s ease-in-out infinite; }
.hw-ghost .body { fill: rgba(245,250,255,.92); } .hw-ghost .face { fill: #0b0220; }
@keyframes hw-float { 0%,100% { transform: translate(0,0) rotate(-3deg) } 25% { transform: translate(14px,-16px) rotate(4deg) } 50% { transform: translate(-4px,-28px) rotate(-2deg) } 75% { transform: translate(-16px,-12px) rotate(5deg) } }

.hw-bat { position: absolute; width: 38px; fill: #0a0214; filter: drop-shadow(0 0 5px rgba(160,80,255,.9)); }
.hw-bat .wing { animation: hw-flap .28s ease-in-out infinite alternate; transform-box: fill-box; }
.hw-bat .wing.l { transform-origin: right center; } .hw-bat .wing.r { transform-origin: left center; }
@keyframes hw-flap { from { transform: scaleY(1) } to { transform: scaleY(.35) } }

.hw-web svg { display: block; width: 100%; height: auto; overflow: visible; }
.hw-web path, .hw-hang path { stroke: rgba(235,235,255,.8); stroke-width: 1; fill: none; stroke-linecap: round; }
.hw-hang { transform-origin: top center; animation: hw-hangsway 6s ease-in-out infinite; }
.hw-hang svg { display: block; width: 100%; height: auto; overflow: visible; }
.hw-hang::before { content: ""; position: absolute; left: 50%; top: -400px; width: 1px; height: 400px; background: rgba(235,235,255,.5); }
.hw-hang .mini { position: absolute; left: 50%; top: 46%; width: 24%; margin-left: -12%; }
@keyframes hw-hangsway { 0%,100% { rotate: -3deg } 50% { rotate: 3deg } }

/* ================= DESTACAR LO IMPORTANTE ================= */
.hw-hot { box-shadow: 0 0 0 2px rgba(255,122,0,.55), 0 0 18px rgba(255,122,0,.55) !important; }
html.hw-on h1, html.hw-on h2 { text-shadow: 0 0 14px rgba(255,122,0,.22); }

/* ================= PANTALLAS CHICAS ================= */
@media (max-width: 1000px) { .hw-side { display: none; } }
@media (max-width: 820px) { .hw-gut, .hw-banner { display: none; } }
@media (max-height: 640px) { .hw-side { display: none; } }
@media (prefers-reduced-motion: reduce) { .hw-deco *, .hw-hot { animation: none !important; } }

/* ================= PERSONAJES DENTRO DE TARJETAS ================= */
.hw-cd { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; container-type: inline-size; z-index: 1; }
.hw-it { position: absolute; }
.hw-it > svg { position: static !important; display: block; width: 100%; height: auto; }
.hw-it.fx svg { transform: scaleX(-1); }
.hw-it.fy svg { transform: scaleY(-1); }
.hw-it.fxy svg { transform: scale(-1, -1); }
.hw-it .hw-bat { width: 100%; }
.hw-it path.web, .hw-it svg path { vector-effect: none; }
.hw-it svg[viewBox^="0 0 1"] > path[stroke] { }
/* telarañas dentro de tarjetas: trazo claro */
.hw-it > svg > path:only-child { stroke: rgba(240,240,255,.8); stroke-width: 1; fill: none; stroke-linecap: round; }

/* murciélago que cruza la tarjeta */
.hw-it.fly { left: -40px; animation: hw-fly-c 9s linear infinite; }
@keyframes hw-fly-c { 0% { transform: translate(0,0) } 50% { transform: translate(50cqw,-6px) } 100% { transform: translate(calc(100cqw + 80px),4px) } }

/* arañita colgando del borde superior de la tarjeta */
.hw-sph { width: 20px; animation: hw-sp2 6s ease-in-out infinite; }
.hw-sph::before { content: ""; position: absolute; left: 50%; top: calc(var(--len) * -1); width: 1px; height: var(--len); background: rgba(235,235,255,.6); }
@keyframes hw-sp2 { 0%,100% { transform: translateY(calc(var(--len) * .3)) } 50% { transform: translateY(var(--len)) } }

/* en tarjetas bajas los fantasmas flotan poco para no salirse */
.hw-cd.small .hw-ghost { animation-name: hw-float-s; }
@keyframes hw-float-s { 0%,100% { transform: translate(0,0) rotate(-3deg) } 50% { transform: translate(6px,-6px) rotate(3deg) } }
.hw-cd.mini .hw-ghost { animation-name: hw-float-s; }

/* animaciones de los personajes nuevos */
.hw-skull { filter: drop-shadow(0 0 10px rgba(255,122,0,.55)); }
.hw-skull .pup { animation: hw-candle 1.4s infinite alternate; }
.hw-cat { filter: drop-shadow(0 0 8px rgba(160,80,255,.55)); }
.hw-cat .eyes { animation: hw-eyes 5s infinite; transform-box: fill-box; transform-origin: center; }
.hw-cat .tail { transform-box: fill-box; transform-origin: left bottom; animation: hw-tail 2.8s ease-in-out infinite; }
@keyframes hw-tail { 0%,100% { transform: rotate(0) } 50% { transform: rotate(12deg) } }
.hw-hat { filter: drop-shadow(0 0 8px rgba(160,80,255,.5)); }
.hw-cauldron { filter: drop-shadow(0 0 10px rgba(125,255,58,.5)); }
.hw-cauldron .fl { animation: hw-candle .6s infinite alternate; }
.hw-cauldron .bub { animation: hw-bub 2.4s ease-in infinite; transform-box: fill-box; }
.hw-cauldron .bub.b2 { animation-delay: -.8s; } .hw-cauldron .bub.b3 { animation-delay: -1.6s; }
@keyframes hw-bub { 0% { transform: translateY(0); opacity: 0 } 20% { opacity: 1 } 100% { transform: translateY(-30px); opacity: 0 } }
.hw-tomb { filter: drop-shadow(0 0 6px rgba(150,160,255,.35)); }
.hw-eyes .ey { animation: hw-eyes 4s infinite; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 5px rgba(255,225,74,.9)); }

/* pantallas chicas: en tarjetas apretadas se oculta lo que podría estorbar */
@media (max-width: 820px) {
  .hw-it.wide { display: none; }
}

/* en celular no hay encabezado fijo: nada flotando sobre el contenido */
@media (max-width: 820px) { .hw-sp, .hw-bat.lane, .hw-fog { display: none; } }

/* ================= MURCIÉLAGOS COLGANDO ================= */
.hw-it.hb { transform-origin: top center; animation: hw-hbsway 5s ease-in-out infinite; filter: drop-shadow(0 0 5px rgba(160,80,255,.7)); }
@keyframes hw-hbsway { 0%,100% { rotate: -7deg } 50% { rotate: 7deg } }
/* fila de murciélagos colgando del borde superior (hueco del encabezado) */
.hw-hbrow { position: absolute; left: 0; right: 0; top: 0; height: 0; }
.hw-hbrow .hw-it { position: absolute; }
@media (max-width: 820px) { .hw-hbrow { display: none; } }

/* ================= VERSIÓN CELULAR (posiciones propias, sin ocultar de más) ================= */
.mh-head { display: none; }
@media (max-width: 820px) {
  /* encabezado (se va con el scroll): murciélagos y araña en el hueco entre el logo y los botones */
  .mh-head { display: block; z-index: 2; }

  /* hero: el hueco libre está a la derecha del texto */
  .hw-hero { display: block; top: 96px; bottom: auto; height: 215px; right: 8px; width: 132px; }
  .hw-hero .hw-moon { top: 0; right: 36px; width: 50px; }
  .hw-hero .hw-ghost.hg { left: 0; top: 74px; width: 44px; }
  .hw-hero .hw-pumpkin.hp { right: 0; bottom: 0; width: 90px; }
  .hw-hero .hw-hang { left: 56%; width: 52px; }
  .hw-hero .hw-web.hcorner { display: none; }
  .hw-hero .hw-bat.hb1 { top: 36%; width: 28px; } .hw-hero .hw-bat.hb2 { top: 58%; width: 22px; }

  /* chat y redes (tarjetas bajas): el lado derecho está libre */
  .hw-cd.small .hw-it.hb { left: 56% !important; width: 20px !important; }
  .hw-cd.small .hw-sph { left: 64% !important; --len: 14px !important; }
  .hw-cd.chat .hw-it { display: none; }
  .hw-cd.chat .hw-it.hb { display: block; left: 60% !important; width: 20px !important; }
  .hw-cd.chat .hw-it.hb + .hw-it.hb { left: 68% !important; }

  /* plataformas */
  .hw-cd.plat .hw-it.hb { left: 62% !important; width: 18px !important; }
  .hw-cd.plat .hw-it.hb + .hw-it.hb { left: 70% !important; width: 16px !important; }
  .hw-cd.plat .hw-sph { left: 56% !important; --len: 12px !important; }

  /* minijuegos (tarjetas angostas en 2 columnas): web + personaje arriba al centro */
  .hw-cd.mini .hw-it.fly, .hw-cd.mini .hw-it:last-child, .hw-cd.mini .hw-it.hb + .hw-it.hb { display: none; }
  .hw-cd.mini .hw-it.hb { left: 40% !important; width: 18px !important; }
  .hw-cd.mini .hw-sph { left: 30% !important; --len: 14px !important; }
  .hw-cd.mini .hw-it:nth-child(2) { left: 50% !important; right: auto !important; top: 12px !important; width: 30px !important; }
}
@media (max-width: 820px) {
  .hw-hero { overflow: visible; }
  .hw-hero .hw-bat { display: none; }
  .hw-hero .hw-moon { opacity: 1; }
}
.hw-it.mobonly { display: none; }
@media (max-width: 820px) { .hw-it.mobonly { display: block; } }
@media (max-width: 820px) { .hw-cd.gan .hw-it:nth-child(-n+2) { width: 78px !important; } }