/* Diseño Halloween — márgenes laterales decorados en pantallas anchas. */
html[data-tema="halloween"] {
  --hw-side: 0px;
}

@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;
  }

  /* 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"]::before,
  html[data-tema="halloween"]::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--hw-side);
    z-index: 5;
    pointer-events: none;
    background-repeat: no-repeat;
  }

  html[data-tema="halloween"]::before {
    left: 0;
    background-image:
      url("../../img/temas/halloween/pumpkin.9f5cadf9b138.svg"),
      url("../../img/temas/halloween/leaves.abb1cfc40768.svg"),
      url("../../img/temas/halloween/ghost-hat.faf7fbe08651.svg"),
      url("../../img/temas/halloween/leaves.abb1cfc40768.svg"),
      url("../../img/temas/halloween/leaves.abb1cfc40768.svg");
    background-size: 100% auto, 44% auto, 94% auto, 40% auto, 34% auto;
    background-position: 0 99%, 14% 66%, 0 15%, 66% 3%, 8% 52%;
  }

  html[data-tema="halloween"]::after {
    right: 0;
    background-image:
      url("../../img/temas/halloween/pumpkin.9f5cadf9b138.svg"),
      url("../../img/temas/halloween/ghost.639c7819b787.svg"),
      url("../../img/temas/halloween/bats.4e827970d385.svg"),
      url("../../img/temas/halloween/leaves.abb1cfc40768.svg"),
      url("../../img/temas/halloween/leaves.abb1cfc40768.svg");
    background-size: 100% auto, 82% auto, 86% auto, 40% auto, 34% auto;
    background-position: 100% 99%, 100% 42%, 100% 2%, 24% 80%, 80% 66%;
  }
}