/* Decoracion de temporada: solo se aplica con <html class="halloween"> (octubre, ver <head>). */
html.halloween { --accent: #ffb04a; }
html.halloween[data-theme=dark] .highlight { background: linear-gradient(transparent 74%, #8a3d0c 74%, #8a3d0c 94%, transparent 94%); }
html.halloween .specialties b { color: #e8792a; }

/* Banda superior con la oferta */
.seasonal-banner { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 46px; background: linear-gradient(90deg, #1c0b05, #3a1607 50%, #1c0b05); color: #ffe6c2; font-size: 13px; text-align: center; }
.seasonal-banner img { width: 26px; height: auto; image-rendering: pixelated; flex-shrink: 0; }
.seasonal-banner a { color: #ffb04a; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.seasonal-banner button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 4px; background: transparent; color: #ffe6c2aa; font-size: 18px; line-height: 1; cursor: pointer; }
.seasonal-banner button:hover { background: #ffffff14; color: #fff; }

/* Telaranas en las esquinas superiores */
.hw-web { position: absolute; top: 0; z-index: 2; image-rendering: pixelated; pointer-events: none; }
.hw-web.left { left: 0; }
.hw-web.right { right: 0; }
.hw-web.on-image { width: clamp(90px, 11vw, 150px); top: 34px; opacity: .75; }
.hw-web.on-section { width: 54px; opacity: .45; border-top-left-radius: 8px; }
.contact { position: relative; overflow: hidden; }
html:not([data-theme=dark]) .hw-web.on-section { filter: brightness(.25); opacity: .3; }

/* Calabazas y velas junto a la imagen principal y en el pie */
.hw-props { position: absolute; z-index: 3; display: flex; align-items: flex-end; gap: 4px; pointer-events: none; }
.hw-props img { display: block; height: auto; filter: drop-shadow(0 8px 10px #0006); }
.hero-visual .hw-props { right: -18px; bottom: 6px; }
.hero-visual .hw-props img:nth-child(1) { width: 92px; }
.hero-visual .hw-props img:nth-child(2) { width: 60px; }
footer { position: relative; }
footer .hw-props { right: 0; bottom: 100%; }
footer .hw-props img { width: 54px; }
footer .hw-props img:nth-child(2) { width: 40px; }

/* Murcielagos pixelados cruzando la portada */
.hw-bats { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.hw-bat { position: absolute; left: -60px; width: 34px; height: 17px; color: #1b1015; animation: bat-fly var(--dur) linear var(--delay) infinite; }
html[data-theme=dark] .hw-bat { color: #08050a; filter: drop-shadow(0 0 6px #ff9a4a55); }
.hw-bat svg { display: block; width: 100%; height: 100%; animation: bat-flap .22s steps(2) infinite; transform-origin: 50% 40%; }
@keyframes bat-fly { 0% { transform: translate(0, 0); } 25% { transform: translate(28vw, -24px); } 50% { transform: translate(56vw, 12px); } 75% { transform: translate(84vw, -18px); } 100% { transform: translate(115vw, 6px); } }
@keyframes bat-flap { 50% { transform: scaleY(.45); } }
.hero { position: relative; }

@media (max-width: 760px) {
  .seasonal-banner { font-size: 12px; padding: 8px 40px; flex-wrap: wrap; gap: 6px 10px; }
  .hero-visual .hw-props { right: -6px; }
  .hero-visual .hw-props img:nth-child(1) { width: 70px; }
  .hero-visual .hw-props img:nth-child(2) { width: 46px; }
}
@media (prefers-reduced-motion: reduce) { .hw-bats { display: none; } }