/*==================================================
  HALLOWEEN-BANNER.CSS  (banner en index.html)
  Para quitarlo: borra la sección .hw-banner y este link.
==================================================*/
.hw-banner{position:relative;overflow:hidden;padding:clamp(1.75rem,3vw,2.5rem) 0;border-block:1px solid rgba(255,122,26,.35);
    background:radial-gradient(600px 200px at 8% 50%,rgba(255,122,26,.22),transparent 70%),radial-gradient(600px 240px at 95% 40%,rgba(109,63,176,.35),transparent 70%),#140c1c}
.hw-banner .container{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 3rem;flex-wrap:wrap}
.hw-banner-text{display:flex;align-items:center;gap:1.25rem;min-width:0}
.hw-banner-icon{flex:none;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;animation:hwb-float 5s ease-in-out infinite}
.hw-banner h2{margin:0 0 .35rem;font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.1;color:var(--color-white)}
.hw-banner h2 em{font-style:italic;color:#ff7a1a}
.hw-banner p{margin:0;font-size:.98rem;color:var(--color-text-light)}
.hw-banner-btn{display:inline-flex;align-items:center;height:52px;padding:0 1.8rem;border-radius:999px;background:#ff7a1a;color:#1a0d00;font-size:.98rem;font-weight:600;white-space:nowrap;transition:background-color .3s ease}
.hw-banner-btn:hover{background:#ffa05c;color:#1a0d00}
@keyframes hwb-float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-6px) rotate(5deg)}}
@media (max-width:700px){.hw-banner .container{flex-direction:column;align-items:flex-start}.hw-banner-btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.hw-banner-icon{animation:none}}