/* Diseño Halloween — fantasmas superpuestos también en móvil. */
html[data-tema="halloween"] {
  --hw-side: 0px;
}

html[data-tema="halloween"] .hw-fantasmas {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
}

html[data-tema="halloween"] .hw-fantasmas[hidden] {
  display: none;
}

html[data-tema="halloween"].hw-sin-decoracion {
  background: #fff;
}

html[data-tema="halloween"] .hw-fantasma,
html[data-tema="halloween"] .hw-calabaza,
html[data-tema="halloween"] .hw-murcielagos,
html[data-tema="halloween"] .hw-telarana {
  position: absolute;
  height: auto;
  max-height: 24vh;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

html[data-tema="halloween"] .hw-murcielagos {
  top: 2%;
  right: calc(50% - clamp(90px, 24vw, 130px) / 2);
  width: clamp(90px, 24vw, 130px);
  max-height: 24vh;
}

html[data-tema="halloween"] .hw-telarana {
  top: 0;
  width: clamp(120px, 34vw, 210px);
  max-width: 45vw;
  max-height: 32vh;
  object-position: top;
}

html[data-tema="halloween"] .hw-telarana--izquierda {
  left: 0;
  object-position: top left;
}

html[data-tema="halloween"] .hw-telarana--derecha {
  right: 0;
  object-position: top right;
}

html[data-tema="halloween"] .hw-fantasma {
  width: clamp(100px, 26vw, 140px);
}

html[data-tema="halloween"] .hw-calabaza {
  width: clamp(72px, 20vw, 110px);
  max-height: 18vh;
  bottom: 0;
}

html[data-tema="halloween"] .hw-calabaza--izquierda {
  left: 0;
}

html[data-tema="halloween"] .hw-calabaza--derecha {
  right: 0;
}

html[data-tema="halloween"] .hw-estrellas {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8vw, 70px);
  background-repeat: no-repeat;
  pointer-events: none;
}

html[data-tema="halloween"] .hw-estrellas--izquierda {
  left: 0;
  background-image:
    url("../../img/temas/halloween/leaves.abb1cfc40768.svg"),
    url("../../img/temas/halloween/leaves.abb1cfc40768.svg"),
    url("../../img/temas/halloween/leaves.abb1cfc40768.svg");
  background-size: 70% auto, 60% auto, 65% auto;
  background-position: 66% 3%, 8% 52%, 14% 76%;
}

html[data-tema="halloween"] .hw-estrellas--derecha {
  right: 0;
  background-image:
    url("../../img/temas/halloween/leaves.abb1cfc40768.svg"),
    url("../../img/temas/halloween/leaves.abb1cfc40768.svg");
  background-size: 60% auto, 65% auto;
  background-position: 24% 80%, 80% 30%;
}

html[data-tema="halloween"] .hw-fantasma--izquierdo {
  left: 0;
  top: 28%;
}

html[data-tema="halloween"] .hw-fantasma--derecho {
  right: 0;
  top: 54%;
}

@media (min-width: 1200px) {
  html[data-tema="halloween"] {
    --hw-side: clamp(96px, 8vw, 170px);
    background:
      radial-gradient(ellipse 100% 45% at 0% 45%, #ffd9a8 0, transparent 75%),
      radial-gradient(ellipse 100% 45% at 100% 45%, #ffd9a8 0, transparent 75%),
      linear-gradient(#fffaf3, #fff3e3);
  }

  html[data-tema="halloween"] body {
    padding-left: var(--hw-side);
    padding-right: var(--hw-side);
    background: #fff;
  }

  html[data-tema="halloween"] .hw-fantasma {
    width: calc(var(--hw-side) + 48px);
    max-height: 32vh;
  }

  html[data-tema="halloween"] .hw-fantasma--izquierdo {
    top: 15%;
  }

  html[data-tema="halloween"] .hw-fantasma--derecho {
    top: 42%;
  }

  html[data-tema="halloween"] .hw-calabaza {
    width: var(--hw-side);
    max-height: 24vh;
  }

  html[data-tema="halloween"] .hw-estrellas {
    width: var(--hw-side);
    background-size: 40% auto, 34% auto, 44% auto;
  }

  html[data-tema="halloween"] .hw-estrellas--derecha {
    background-size: 40% auto, 34% auto;
  }

  html[data-tema="halloween"] .hw-murcielagos {
    right: calc(clamp(280px, 24vw, 480px) + 16px);
    width: calc(var(--hw-side) * .86);
    max-height: 24vh;
  }

  html[data-tema="halloween"] .hw-telarana {
    width: clamp(225px, 19vw, 385px);
    max-height: 38vh;
  }

  /* Barras fijas al hacer scroll: respetan los márgenes decorados */
  html[data-tema="halloween"] .site-header--fixed,
  html[data-tema="halloween"] .site-nav--fixed {
    left: var(--hw-side);
    right: var(--hw-side);
    width: auto;
  }
}

html[data-tema="halloween"] .hw-saludo {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2147483647;
  pointer-events: none;
}

html[data-tema="halloween"] .hw-saludo[hidden] {
  display: none;
}

html[data-tema="halloween"] .hw-saludo img {
  width: min(70vw, 680px);
  max-height: 65vh;
  object-fit: contain;
  animation: hw-saludo-impacto 6s linear forwards;
}

@keyframes hw-saludo-impacto {
  0% { opacity: 0; transform: scale(.55); filter: blur(8px); }
  15% { opacity: 1; transform: scale(.8); filter: blur(0); }
  70% { opacity: 1; transform: scale(1); filter: blur(0); }
  82% { opacity: 1; transform: scale(1.08); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.5); filter: blur(16px); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-tema="halloween"] .hw-saludo img {
    animation-name: hw-saludo-suave;
  }
}

@keyframes hw-saludo-suave {
  0%, 100% { opacity: 0; }
  15%, 82% { opacity: 1; }
}