/* Decoración de Halloween (temporal). Solo se aplica con html.halloween, que agrega js/season.js hasta el 31-oct-2026. */
html.halloween { --hw-orange: #FF7A00; --hw-purple: #4B1F6F; --hw-purple-soft: #F0E4FA; }
.hw-banner { background: var(--hw-purple); color: #FFD9A0; text-align: center; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 16px; padding: 8px 12px; border-bottom: 3px solid var(--hw-orange); }
html.halloween .ml-header { position: sticky; overflow-x: clip; overflow-y: visible; }
html.halloween .ml-header .hw-bat { position: absolute; top: 6px; left: -40px; font-size: 22px; pointer-events: none; opacity: .9; }
html.halloween .nav-cta { background: var(--hw-orange) !important; color: #fff !important; box-shadow: 0 4px 0 #B24F00 !important; }
html.halloween main.home { box-shadow: 0 10px 0 var(--hw-purple); position: relative; }
html.halloween .h-hero { position: relative; background: radial-gradient(circle at 15% 0%, #FF3A44 0%, var(--ml-red) 55%, #C4121A 100%); }
html.halloween .h-hero::before { content: "🎃"; position: absolute; left: 14px; top: 8px; font-size: 54px; transform: rotate(-12deg); z-index: 2; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
html.halloween .h-hero::after { content: "👻"; position: absolute; right: 18px; top: 10px; font-size: 52px; z-index: 2; filter: drop-shadow(0 3px 0 rgba(0,0,0,.2)); }
html.halloween .h-hero h1 { color: #FFD24A; }
html.halloween .block > h2::before { content: "🎃 "; }
html.halloween .block > h2::after { content: " 🎃"; }
html.halloween .topic { border-style: dashed; }
html.halloween .edu-card { background: var(--hw-purple-soft); box-shadow: 0 8px 0 var(--hw-purple); }
html.halloween .edu-card h2 { color: var(--hw-purple); }
html.halloween .edu-card p { color: #3A1A55; }
.hw-row { letter-spacing: 6px; font-size: 22px; margin-top: 4px; }
@media (max-width: 700px) {
  html.halloween .h-hero::before, html.halloween .h-hero::after { font-size: 34px; top: 4px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.halloween .ml-header .hw-bat { animation: fly 11s linear infinite; animation-delay: calc(var(--i) * -3.6s); }
  html.halloween .h-hero::before { animation: floaty 4s ease-in-out infinite; }
  html.halloween .h-hero::after { animation: floaty 5s -1.5s ease-in-out infinite; }
  @keyframes fly { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(25vw, 18px) rotate(8deg); } 50% { transform: translate(55vw, -4px) rotate(-6deg); } 75% { transform: translate(80vw, 16px) rotate(6deg); } 100% { transform: translate(110vw, 0) rotate(0); } }
}