/* ════════════════════════════════════════════════════════════════════════
   TEMA HALLOWEEN · «La Notte della Zucca»
   ────────────────────────────────────────────────────────────────────────
   Una pelle sopra il sito di sempre: non cambia la struttura, cambia la luce.
   Tutto vive sotto html.tema-halloween, quindi togliere la classe (o non
   caricare questo file) riporta il sito esattamente com'era.

   Palette
     notte   #12071F   fondo piu' scuro
     viola   #2A0F45   superfici scure
     prugna  #3A1457   bordo caldo del fondale
     zucca   #FF8A1F   bottoni e accenti
     zucca-c #FFB257   luce della luna, numeri
     crema   #FFF3E0   testo sul buio
   Il blu Tsunami resta per le cose "pulite" (bolle, icone di fiducia):
   il pulito e' l'acqua, lo sporco e' la zucca.
   ════════════════════════════════════════════════════════════════════════ */

html.tema-halloween{
  --hw-notte:#12071F; --hw-viola:#2A0F45; --hw-prugna:#3A1457;
  --hw-zucca:#FF8A1F; --hw-zucca-c:#FFB257; --hw-crema:#FFF3E0;
  --hw-muffa:#9BD47F;

  --navy:#1E0B33;
  --ocean:#4A1C6E;
  --bg-warm:#F7F3FB;
  --bg-light:#EFE7F7;
  --bg-navy:#12071F;
  --bg-deep:linear-gradient(90deg,#12071F 0%,#2A0F45 55%,#3A1457 100%);
  --t1:#1A0F26; --t2:#4A3F58; --t3:#8C7FA0;
  --border:#E7DDF1;
}

/* ── Onde e fondali disegnati nell'HTML ─────────────────────────────────── */
html.tema-halloween svg [fill="#0D3A6E"]{fill:#2A0F45}
html.tema-halloween svg [fill="#1A5FA0"]{fill:#4A1C6E}
html.tema-halloween svg [fill="#F4F7F9"]{fill:#F7F3FB}
html.tema-halloween stop[stop-color="#081622"]{stop-color:#12071F}
html.tema-halloween stop[stop-color="#0d2a4f"]{stop-color:#2A0F45}
html.tema-halloween stop[stop-color="#0a3060"]{stop-color:#3A1457}

/* ── Barra in alto ──────────────────────────────────────────────────────── */
html.tema-halloween .promo-lancio{
  /* v1.71 · in fondo il banner sfuma nel viola scuro della barra del menu:
     al centro era più chiaro (#4A1C6E) e lì la giunzione si vedeva netta */
  background:
    linear-gradient(180deg,rgba(20,8,34,0) 45%,rgba(20,8,34,.55) 80%,rgba(20,8,34,.9) 100%),
    linear-gradient(90deg,#12071F 0%,#4A1C6E 50%,#12071F 100%);
  /* v1.70 · niente riga in fondo: fra banner e barra del menu si leggeva come
     una fessura. La linea arancione resta sotto la barra del menu. */
  border-bottom:0}
html.tema-halloween .promo-lancio__pill{border-color:rgba(255,178,87,.55);color:var(--hw-zucca-c)}
html.tema-halloween .promo-lancio__txt b{color:var(--hw-zucca-c);font-size:.95rem}
html.tema-halloween .promo-lancio__cta{color:var(--hw-zucca-c)}
html.tema-halloween .promo-lancio__zucca{width:22px;height:22px;flex:none;display:block}
@media (max-width:520px){html.tema-halloween .promo-lancio__zucca{display:none}
  .hw-solo-largo{display:none}}
@media (min-width:521px){.hw-solo-stretto{display:none}}

/* ── Nav ────────────────────────────────────────────────────────────────── */
/* v1.69 · nel menu il logo della strega, scontornato (img/halloween/
   logo-strega-menu.webp, fondo trasparente con il suo bagliore). È disegnato
   per fondi scuri (arco e contorni bianchi): per questo, col tema, anche la
   barra scorrendo resta viola scuro (sotto). Niente arcobaleno di app.js. */
html.tema-halloween .nav__logo-img{height:58px;width:auto;margin-block:-7px;filter:none!important}

/* Barra del menu viola scuro anche scorrendo e nelle pagine senza hero:
   stessi colori della barra trasparente sopra l'hero. */
/* v1.71 · la barra scorrendo è la sfumatura di style.css (.nav::before):
   col tema prende il viola scuro della barra */
html.tema-halloween .nav{--nav-fondo:20,8,34}
html.tema-halloween .shop-filters{--filtri-fondo:247,243,251}   /* il --bg-warm del tema */
  /* niente backdrop-filter: in Chrome taglia la ragnatela che scende dalla barra */
html.tema-halloween .nav--scrolled .nav__link,html.tema-halloween .nav--white .nav__link{color:rgba(255,243,224,.85)}
html.tema-halloween .nav--scrolled .nav__link:hover,html.tema-halloween .nav--white .nav__link:hover{color:#fff;background:rgba(255,255,255,.08)}
html.tema-halloween .nav--scrolled .nav__link--active,html.tema-halloween .nav--white .nav__link--active{color:#fff!important;background:rgba(255,255,255,.10)}
html.tema-halloween .nav--scrolled .nav__link--active::after,html.tema-halloween .nav--white .nav__link--active::after{background:rgba(255,255,255,.75);opacity:1}
html.tema-halloween .nav--scrolled .nav__cart,html.tema-halloween .nav--white .nav__cart{color:#fff;border-color:rgba(255,178,87,.45)}
html.tema-halloween .nav--scrolled .nav__burger span,html.tema-halloween .nav--white .nav__burger span{background:#fff}
html.tema-halloween .nav--scrolled .tuw__link,html.tema-halloween .nav--white .tuw__link{color:rgba(255,243,224,.82)}
html.tema-halloween .nav--scrolled .tuw__link:hover,html.tema-halloween .nav--white .tuw__link:hover{color:#fff;background:rgba(255,255,255,.10)}
html.tema-halloween .nav--scrolled .tuw__sep,html.tema-halloween .nav--white .tuw__sep{color:rgba(255,255,255,.6)}
html.tema-halloween .nav--scrolled .tuw__name,html.tema-halloween .nav--white .tuw__name{color:#fff}
html.tema-halloween .nav--scrolled .tuw__points,html.tema-halloween .nav--white .tuw__points{color:rgba(255,255,255,.6)}
html.tema-halloween .nav--scrolled .tuw__avatar-wrap,html.tema-halloween .nav--white .tuw__avatar-wrap{border-color:rgba(255,255,255,.35)}

/* Ragnatela e ragno appesi alla riga arancione (js · angolo): dentro la nav
   fissa, dietro a logo e link, non prendono i clic */
html.tema-halloween .nav__wrap{z-index:1}
.hw-angolo{position:absolute;top:0;left:0;width:0;height:0;pointer-events:none;z-index:0}
.hw-angolo .hw-ragnatela,.hw-angolo .hw-ragno{top:-1px}
/* scende anche sopra le schede chiare: fili più decisi e un contorno scuro
   sottile, così si vedono sia sul viola sia sul bianco */
.hw-angolo .hw-ragnatela{opacity:.72;filter:drop-shadow(0 0 .6px rgba(20,8,34,.75)) drop-shadow(0 1px 1px rgba(20,8,34,.3))}
html.tema-halloween .footer__logo-img{height:52px;filter:none}
html.tema-halloween .nav__logo::after{background:radial-gradient(ellipse at 50% 50%,rgba(255,138,31,.38) 0%,transparent 65%)}
html.tema-halloween .nav__link--game{color:var(--hw-zucca)!important}

/* ── Bottoni ────────────────────────────────────────────────────────────── */
html.tema-halloween .btn--gold{
  background:linear-gradient(180deg,#FFA040 0%,#F07812 100%);
  color:#24082F;box-shadow:0 4px 22px rgba(255,138,31,.38)}
html.tema-halloween .btn--gold:hover{background:linear-gradient(180deg,#FFB257 0%,#FF8A1F 100%);
  box-shadow:0 8px 30px rgba(255,138,31,.5)}
html.tema-halloween .btn--gold .site-icon{stroke:#24082F}

/* ── Hero della home ────────────────────────────────────────────────────── */
html.tema-halloween .hero{
  background:
    radial-gradient(38% 46% at 78% 26%, rgba(255,178,87,.20) 0%, rgba(255,138,31,.06) 45%, transparent 70%),
    linear-gradient(160deg,#12071F 0%,#2A0F45 58%,#3A1457 100%)}
html.tema-halloween .hero__orb--1{background:#FF8A1F;opacity:.10}
html.tema-halloween .hero__orb--2{background:#7B2FB8;opacity:.25}
html.tema-halloween .hero__orb--3{background:#9BD47F;opacity:.06}
html.tema-halloween .hero__eyebrow{color:rgba(255,243,224,.72)}
html.tema-halloween .hero__eyebrow-dot{
  background:radial-gradient(circle at 38% 32%,#FFF3E0 0%,#FFB257 45%,#FF8A1F 100%);
  box-shadow:0 0 6px rgba(255,138,31,.75)}
html.tema-halloween .hero__title em{
  background:linear-gradient(100deg,#FFE0A8 0%,#FFB257 18%,#FF8A1F 38%,#D9590C 55%,#FF8A1F 72%,#FFB257 86%,#FFE0A8 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text}
html.tema-halloween .hero__sub{color:rgba(255,243,224,.68);--hero-accento:var(--hw-zucca-c)}

/* La scenografia: luna, ragnatela, pipistrelli, nebbia.
   Sta dietro al testo (z 1) e non prende i click. */
.hw-scena{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.hw-luna{position:absolute;top:calc(var(--promo-h) + var(--nav-h) + 2vh);right:7vw;
  width:clamp(110px,13vw,210px);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(246,214,170,.9) 0 9%, transparent 10%),
    radial-gradient(circle at 64% 58%, rgba(240,205,160,.85) 0 7%, transparent 8%),
    radial-gradient(circle at 40% 70%, rgba(244,210,166,.8) 0 5%, transparent 6%),
    radial-gradient(circle at 42% 38%, #FFF6E2 0%, #FFE6BC 55%, #F7CF92 100%);
  box-shadow:0 0 60px 18px rgba(255,190,110,.28),0 0 160px 60px rgba(255,138,31,.12);
  opacity:.95}
.hw-ragnatela{position:absolute;top:calc(var(--promo-h) + var(--nav-h) - 6px);left:0;
  width:clamp(130px,16vw,240px);height:auto;opacity:.5}
.hw-ragnatela path{fill:none;stroke:#E9DDF7;stroke-width:.9;stroke-linecap:round}
.hw-ragno{position:absolute;left:clamp(96px,12vw,178px);top:calc(var(--promo-h) + var(--nav-h) - 6px);
  width:2px;height:clamp(46px,5vw,80px);background:linear-gradient(#E9DDF7,rgba(233,221,247,.4));opacity:.7;
  transform-origin:top center;animation:hw-dondola 5s ease-in-out infinite}
.hw-ragno::after{content:'';position:absolute;bottom:-10px;left:50%;width:16px;height:13px;margin-left:-8px;
  background:#0E0418;border-radius:50% 50% 45% 45%;box-shadow:0 0 0 1px rgba(233,221,247,.25)}
@keyframes hw-dondola{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

.hw-pip{position:absolute;width:42px;height:auto;fill:#0B0314;opacity:.9;
  filter:drop-shadow(0 0 6px rgba(255,178,87,.25))}
.hw-pip--1{top:calc(var(--promo-h) + var(--nav-h) + 9vh);right:24vw;width:46px;animation:hw-vola1 16s linear infinite}
.hw-pip--2{top:calc(var(--promo-h) + var(--nav-h) + 22vh);right:9vw;width:30px;animation:hw-vola2 21s linear infinite}
.hw-pip--3{top:calc(var(--promo-h) + var(--nav-h) + 4vh);right:38vw;width:24px;animation:hw-vola1 25s linear infinite reverse}
.hw-pip .ali{transform-origin:50% 40%;animation:hw-sbatti .38s ease-in-out infinite alternate}
@keyframes hw-sbatti{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
@keyframes hw-vola1{0%{transform:translate(0,0)}25%{transform:translate(-40px,18px)}50%{transform:translate(-10px,-14px)}75%{transform:translate(30px,10px)}100%{transform:translate(0,0)}}
@keyframes hw-vola2{0%{transform:translate(0,0)}33%{transform:translate(26px,-20px)}66%{transform:translate(-30px,12px)}100%{transform:translate(0,0)}}
.hw-nebbia{position:absolute;left:-10%;right:-10%;bottom:9%;height:28%;
  background:
    radial-gradient(40% 60% at 20% 70%, rgba(214,196,240,.16), transparent 70%),
    radial-gradient(35% 55% at 60% 80%, rgba(214,196,240,.13), transparent 70%),
    radial-gradient(30% 50% at 90% 65%, rgba(214,196,240,.12), transparent 70%);
  filter:blur(6px);animation:hw-nebbia 30s ease-in-out infinite alternate}
@keyframes hw-nebbia{from{transform:translateX(-3%)}to{transform:translateX(3%)}}

/* Fulmini (v65, js/tema-halloween.js · fulmini): luce fredda lilla e bianca,
   cosi' stacca dalla luna calda. Il lampo schiarisce il cielo intorno al
   punto colpito (--x); il fulmine nasce sotto la barra (--fm-cima), sfumato
   come se uscisse dalle nuvole. */
.hw-fulmini{position:absolute;inset:0}
.hw-lampo{position:absolute;inset:0;opacity:0;mix-blend-mode:screen;
  background:
    radial-gradient(60% 50% at var(--x,50%) 14%, rgba(233,224,255,.40) 0%, rgba(176,146,255,.16) 42%, transparent 72%),
    linear-gradient(180deg, rgba(196,176,255,.10) 0%, transparent 60%)}
.hw-fulmine{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  -webkit-mask-image:linear-gradient(180deg,transparent var(--fm-cima,0%),#000 calc(var(--fm-cima,0%) + 7%));
          mask-image:linear-gradient(180deg,transparent var(--fm-cima,0%),#000 calc(var(--fm-cima,0%) + 7%));
  filter:drop-shadow(0 0 3px rgba(240,232,255,.95)) drop-shadow(0 0 16px rgba(167,130,255,.75))}
.hw-fulmine path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hw-fulmine__alone path{stroke:rgba(190,164,255,.42);stroke-width:7}
.hw-fulmine__alone path.r{stroke-width:4}
.hw-fulmine__cuore path{stroke:#FBF8FF;stroke-width:2.2}
.hw-fulmine__cuore path.r{stroke-width:1.2}
.hw-fulmine--stretto .hw-fulmine__alone path{stroke-width:5}
.hw-fulmine--stretto .hw-fulmine__cuore path{stroke-width:1.7}
@media (prefers-reduced-motion:reduce){.hw-fulmini{display:none}}
@media (max-width:900px){
  .hw-luna{right:-70px;width:190px;top:calc(var(--promo-h) + var(--nav-h) + 150px);opacity:.28}
  .hw-pip--3{display:none}
  .hw-pip--1{right:auto;left:62%}
  .hw-ragnatela{width:110px;opacity:.38}
  .hw-ragno{left:84px;height:56px}
}
@media (prefers-reduced-motion:reduce){
  .hw-pip,.hw-pip .ali,.hw-ragno,.hw-nebbia{animation:none}
}

/* ── Sezione evento in home ─────────────────────────────────────────────── */
.hw-evento{position:relative;overflow:hidden;color:var(--hw-crema);
  background:
    radial-gradient(45% 60% at 22% 50%, rgba(255,138,31,.16) 0%, transparent 70%),
    var(--bg-deep);
  padding:clamp(3.5rem,7vw,6rem) 0}
.hw-evento__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.hw-evento__img{position:relative;aspect-ratio:1;max-width:520px;width:100%;justify-self:center}
.hw-evento__img img{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,rgba(0,0,0,.6) 80%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 62%,rgba(0,0,0,.6) 80%,transparent 100%)}
.hw-evento__tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ff-sans);font-weight:800;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--hw-zucca-c);margin-bottom:.9rem}
.hw-evento__tag::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--hw-zucca);
  box-shadow:0 0 10px var(--hw-zucca)}
.hw-evento__titolo{font-family:var(--ff-sans);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.2rem,4.6vw,4rem);line-height:1;letter-spacing:-.03em;margin:0 0 1.1rem;color:#fff}
.hw-evento__titolo span{display:block;color:var(--hw-zucca)}
.hw-evento__testo{font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.65;color:rgba(255,243,224,.8);max-width:52ch;margin:0 0 1.6rem}
.hw-evento__testo b{color:#fff}
.hw-mostri{display:flex;gap:clamp(.6rem,1.6vw,1.2rem);margin:0 0 2rem;padding:0;list-style:none;flex-wrap:wrap}
.hw-mostri li{display:flex;flex-direction:column;align-items:center;gap:.35rem;width:clamp(68px,8vw,92px)}
.hw-mostri img{width:100%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}
.hw-mostri span{font-family:var(--ff-sans);font-weight:700;font-size:.72rem;color:rgba(255,243,224,.75);text-align:center;line-height:1.2}
.hw-mostri li.boss span{color:var(--hw-zucca-c)}
.hw-mostri li.boss img{transform:scale(1.12)}
.hw-evento__cta{display:flex;gap:.8rem;flex-wrap:wrap}
@media (max-width:900px){
  .hw-evento__grid{grid-template-columns:1fr}
  .hw-evento__img{max-width:280px;margin-bottom:-1.5rem}
  .hw-evento__testo{max-width:none}
  .hw-evento .btn--lg{width:100%;justify-content:center}
}

/* ── I prodotti da brivido: Antimuffa, 3in1, Tornado ───────────────────────
   Restano nel catalogo al loro posto. Cornice arancione, nastro in alto a
   destra (il badge del prodotto resta in alto a sinistra) e il mostro che
   ognuno batte nel gioco che spunta dall'angolo in basso: al passaggio del
   mouse si abbassa, spaventato. Tutto disegnato da js/tema-halloween.js. */
html.tema-halloween .badge--zucca{background:linear-gradient(180deg,#FFA040,#F07812);color:#24082F;border:none}
html.tema-halloween .prod-card--halloween{box-shadow:0 0 0 2px rgba(255,138,31,.75),0 10px 28px rgba(255,138,31,.18),var(--sh2)}
html.tema-halloween .prod-card--halloween:hover{box-shadow:0 0 0 2px rgba(255,138,31,.95),0 18px 36px -10px rgba(255,138,31,.38),var(--sh3)}
.hw-brivido{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;border-radius:inherit}
html:not(.tema-halloween) .hw-brivido{display:none}
.hw-brivido__nastro{position:absolute;top:.7rem;right:.7rem;display:inline-flex;align-items:center;gap:.38rem;
  font-family:var(--ff-sans);font-weight:900;font-size:.74rem;line-height:1;color:#24082F;white-space:nowrap;
  background:linear-gradient(180deg,#FFB451,#F07812);border-radius:999px;padding:.4rem .75rem .4rem .55rem;
  box-shadow:0 2px 0 #8A3A06,0 6px 14px rgba(36,8,47,.28)}
.hw-brivido__nastro svg{width:1.35em;height:auto;fill:#24082F;flex:none}
.hw-brivido__mostro{position:absolute;left:-2%;bottom:-7%;width:35%;height:auto;transform:rotate(-8deg);transform-origin:40% 100%;
  filter:drop-shadow(0 0 5px rgba(255,190,110,.9)) drop-shadow(0 6px 10px rgba(36,8,47,.35));transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.hw-brivido--calcarino .hw-brivido__mostro{width:41%;bottom:-6%}
.hw-brivido--oliotto .hw-brivido__mostro{width:32%;bottom:-5%}
.prod-card:hover .hw-brivido__mostro{transform:rotate(-14deg) translateY(16%) scale(.92)}
.hw-brivido--grande .hw-brivido__nastro{top:1.1rem;right:1.1rem;font-size:1rem;padding:.55rem 1.05rem .55rem .8rem}
.hw-brivido--grande .hw-brivido__mostro{width:25%;left:-2%;bottom:-6%}
.hw-brivido--grande.hw-brivido--calcarino .hw-brivido__mostro{width:30%}
@media (max-width:560px){
  .hw-brivido__nastro{top:.5rem;right:.5rem;font-size:.66rem;padding:.32rem .6rem .32rem .45rem}
}
@media (prefers-reduced-motion:reduce){
  .hw-brivido__mostro{transition:none}
  .prod-card:hover .hw-brivido__mostro{transform:rotate(-8deg)}
}

/* ════════════════════════════════════════════════════════════════════════
   PAGINA EVENTO · notte-della-zucca.html
   ════════════════════════════════════════════════════════════════════════ */
.hw-ev-hero{position:relative;overflow:hidden;isolation:isolate;color:var(--hw-crema);
  min-height:92svh;display:flex;align-items:center;
  padding:calc(var(--promo-h) + var(--nav-h) + clamp(1.5rem,4vw,3rem)) 0 clamp(3rem,6vw,5rem);
  background:
    radial-gradient(40% 50% at 74% 52%, rgba(255,138,31,.22) 0%, rgba(255,138,31,.05) 50%, transparent 72%),
    linear-gradient(160deg,#12071F 0%,#2A0F45 60%,#3A1457 100%)}
.hw-ev-hero .wrap{position:relative;z-index:2;width:100%}
.hw-ev-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:140px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(58,20,87,0) 0%,#3A1457 100%)}
.hw-ev-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:center}
.hw-ev-hero__titolo{font-family:var(--ff-sans);font-weight:900;text-transform:uppercase;color:#fff;
  font-size:clamp(2.8rem,6.4vw,6.2rem);line-height:.98;letter-spacing:-.04em;margin:0 0 1.3rem}
.hw-ev-hero__titolo span{display:block;
  background:linear-gradient(100deg,#FFE0A8 0%,#FFB257 22%,#FF8A1F 48%,#D9590C 70%,#FF8A1F 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.08em}
.hw-ev-hero__sub{font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.65;color:rgba(255,243,224,.82);max-width:50ch;margin:0 0 2rem}
.hw-ev-hero__sub b{color:var(--hw-zucca-c)}
.hw-ev-hero__img{justify-self:center;width:100%;max-width:600px;aspect-ratio:1}
.hw-ev-hero__img img{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(closest-side,#000 48%,rgba(0,0,0,.5) 74%,transparent 96%);
          mask-image:radial-gradient(closest-side,#000 48%,rgba(0,0,0,.5) 74%,transparent 96%)}
.hw-ev-hero .hw-luna{right:auto;left:46%;top:calc(var(--promo-h) + var(--nav-h) + 1vh);width:clamp(70px,7vw,110px);opacity:.85}

.hw-ev-hd{max-width:640px;margin:0 auto clamp(2rem,4vw,3rem);text-align:center}
.hw-ev-hd h2{font-family:var(--ff-sans);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.05;margin:0 0 .7rem;color:#fff}
.hw-ev-hd p{color:rgba(255,243,224,.75);font-size:1.02rem;line-height:1.6;margin:0}

.hw-ev-mostri,.hw-ev-stanze{color:var(--hw-crema);background:#2A0F45;padding:clamp(3rem,6vw,5rem) 0}
.hw-ev-mostri{background:linear-gradient(180deg,#3A1457 0%,#2A0F45 100%)}
.hw-ev-mostri__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem)}
.hw-mostro{display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;border-radius:var(--r3);
  background:rgba(255,243,224,.05);border:1px solid rgba(255,243,224,.1)}
.hw-mostro img{width:72px;height:72px;object-fit:contain;flex:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.hw-mostro strong{display:block;font-family:var(--ff-sans);font-weight:800;font-size:1.02rem;color:#fff;margin-bottom:.2rem}
.hw-mostro span{font-size:.9rem;line-height:1.45;color:rgba(255,243,224,.72)}
.hw-mostro--boss{grid-column:1 / -1;padding:1.3rem 1.6rem;
  background:radial-gradient(60% 140% at 0% 50%, rgba(255,138,31,.2), transparent 70%),rgba(255,243,224,.05);
  border-color:rgba(255,138,31,.45)}
.hw-mostro--boss img{width:120px;height:120px}
.hw-mostro--boss strong{font-size:1.35rem;color:var(--hw-zucca-c)}
.hw-mostro--boss span{font-size:1rem;max-width:60ch;display:block}

.hw-ev-stanze__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem)}
.hw-stanza{margin:0}
.hw-stanza__scena{position:relative;aspect-ratio:16/9;border-radius:var(--r3);overflow:hidden;isolation:isolate;
  background:
    linear-gradient(180deg,transparent 0 81%, #1C0B2A 81% 100%),
    radial-gradient(55% 60% at 84% 16%, rgba(255,190,110,.16), transparent 70%),
    linear-gradient(180deg,#331A57 0%,#24113F 81%);
  box-shadow:0 18px 40px rgba(0,0,0,.35)}
.hw-stanza__fondo{position:absolute;z-index:1;left:50%;bottom:18%;width:84%;transform:translateX(-50%);
  filter:brightness(.62) saturate(.8) hue-rotate(-12deg) drop-shadow(0 4px 0 rgba(0,0,0,.25))}
/* Luce calda che sale dalla zucca e angoli scuri. */
.hw-stanza__scena::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(34% 40% at 50% 92%, rgba(255,138,31,.30), transparent 70%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(10,3,18,.55) 100%)}
.hw-stanza__finestra{position:absolute;z-index:0;top:7%;right:6%;width:15%;aspect-ratio:3/4;border-radius:10px 10px 4px 4px;
  border:5px solid #4A2B63;
  background:
    linear-gradient(90deg,transparent calc(50% - 2px),#4A2B63 calc(50% - 2px) calc(50% + 2px),transparent calc(50% + 2px)),
    linear-gradient(180deg,transparent calc(45% - 2px),#4A2B63 calc(45% - 2px) calc(45% + 2px),transparent calc(45% + 2px)),
    radial-gradient(circle at 62% 34%,#FFF6E2 0 17%,rgba(255,214,150,.55) 24%,transparent 46%),
    linear-gradient(180deg,#0F0620,#2A1250);
  box-shadow:0 0 30px rgba(255,190,110,.25)}
.hw-stanza__m{position:absolute;z-index:2;filter:drop-shadow(0 8px 12px rgba(0,0,0,.55))}
.hw-stanza__m--1{left:5%;bottom:6%;width:15%}
.hw-stanza__m--2{left:43%;bottom:3%;width:17%}
.hw-stanza__m--3{left:7%;top:8%;width:12%;animation:hw-vola2 9s ease-in-out infinite}
.hw-stanza figcaption{margin-top:.8rem;font-family:var(--ff-sans);font-weight:800;color:#fff;text-align:center}

.hw-ev-come{padding-top:clamp(2rem,4vw,3rem)}
.hw-ev-come__grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.hw-passi{list-style:none;counter-reset:passo;margin:1.6rem 0 2rem;padding:0;display:grid;gap:1.1rem}
.hw-passi li{counter-increment:passo;display:grid;grid-template-columns:44px 1fr;column-gap:1rem;align-items:start}
.hw-passi li::before{content:counter(passo);grid-row:1 / span 2;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--ff-sans);font-weight:900;font-size:1.1rem;
  background:linear-gradient(180deg,#FFA040,#F07812);color:#24082F}
.hw-passi strong{font-family:var(--ff-sans);font-weight:800;font-size:1.08rem;color:var(--t1)}
.hw-passi span{color:var(--t2);line-height:1.55}
.hw-debora{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.hw-debora img{width:min(220px,60%);height:auto}
.hw-debora__fumetto{position:relative;margin:0;background:#fff;border:2px solid var(--hw-prugna);border-radius:20px;
  padding:1rem 1.2rem;font-family:var(--ff-sans);font-weight:700;color:var(--t1);text-align:center;max-width:300px;
  box-shadow:var(--sh2)}
.hw-debora__fumetto::after{content:'';position:absolute;left:50%;bottom:-11px;width:18px;height:18px;margin-left:-9px;
  background:#fff;border-right:2px solid var(--hw-prugna);border-bottom:2px solid var(--hw-prugna);transform:rotate(45deg)}

@media (max-width:900px){
  .hw-ev-hero{min-height:auto}
  .hw-ev-hero__grid,.hw-ev-come__grid,.hw-ev-stanze__grid{grid-template-columns:1fr}
  .hw-ev-hero__img{max-width:270px;order:-1;margin:-.5rem auto -1.5rem}
  .hw-ev-hero .hw-luna{left:auto;right:-20px;top:calc(var(--promo-h) + var(--nav-h) + 8px);width:80px}
  .hw-ev-hero .btn--lg,.hw-ev-come .btn--lg{width:100%;justify-content:center}
  .hw-ev-mostri__grid{grid-template-columns:1fr}
  .hw-mostro--boss{flex-direction:column;text-align:center}
}

/* ════════════════════════════════════════════════════════════════════════
   PAGINA EVENTO · la campagna (24 ott): zucca in tre fasi, i tre ladri,
   la Città del Pulito con le tre vie. Stessi testi del PDF della campagna.
   ════════════════════════════════════════════════════════════════════════ */
.hw-fasi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.8vw,1.4rem)}
.hw-fase{--c:#FF8A1F;--c-luce:rgba(255,138,31,.22);--c-bordo:rgba(255,138,31,.45);
  display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;padding:1.2rem 1.3rem 1.4rem;border-radius:var(--r3);
  background:radial-gradient(80% 55% at 50% 20%,var(--c-luce),transparent 72%),rgba(255,243,224,.05);border:1px solid var(--c-bordo)}
.hw-fase--2{--c:#9BE33B;--c-luce:rgba(155,227,59,.2);--c-bordo:rgba(155,227,59,.42)}
.hw-fase--3{--c:#B58CFF;--c-luce:rgba(181,140,255,.22);--c-bordo:rgba(181,140,255,.45)}
.hw-fase__img{align-self:center;width:min(210px,72%);height:auto;aspect-ratio:1;object-fit:contain;margin:.1rem 0 .7rem;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.hw-fase__n{font-family:var(--ff-sans);font-weight:800;font-size:.78rem;color:#1A0C28;background:var(--c);border-radius:999px;padding:.22rem .7rem}
.hw-fase__nome{font-family:var(--ff-sans);font-weight:900;font-size:1.45rem;line-height:1.1;color:var(--c);margin-top:.2rem}
.hw-fase__luogo{font-size:.9rem;font-weight:600;color:rgba(255,243,224,.6)}
.hw-fase p{margin:.25rem 0 .8rem;font-size:.95rem;line-height:1.5;color:rgba(255,243,224,.8)}
.hw-fase__debole{margin-top:auto;display:inline-flex;align-items:center;gap:.55rem;font-family:var(--ff-sans);font-weight:800;font-size:.88rem;
  color:#fff;background:rgba(0,0,0,.28);border:1px solid var(--c-bordo);border-radius:12px;padding:.3rem .85rem .3rem .45rem}
.hw-fase__debole img{width:auto;height:30px}

.hw-ev-sub{font-family:var(--ff-sans);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:#fff;text-align:center;
  font-size:clamp(1.3rem,2.2vw,1.7rem);margin:clamp(2.6rem,5vw,3.6rem) 0 .4rem}
.hw-ev-subp{text-align:center;color:rgba(255,243,224,.72);margin:0 auto 1.4rem;max-width:56ch;line-height:1.6}
.hw-ladri{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem)}

.hw-vie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.hw-via{margin:0}
.hw-via img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r3);
  border:1px solid rgba(255,243,224,.14);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.hw-via figcaption{margin-top:.9rem;display:flex;flex-direction:column;gap:.2rem}
.hw-via__n{font-family:var(--ff-sans);font-weight:800;font-size:.8rem;color:var(--hw-zucca-c)}
.hw-via strong{font-family:var(--ff-sans);font-weight:800;font-size:1.12rem;color:#fff}
.hw-via figcaption span:last-child{font-size:.92rem;line-height:1.5;color:rgba(255,243,224,.72)}

@media (max-width:900px){
  .hw-fasi,.hw-ladri,.hw-vie{grid-template-columns:1fr}
  .hw-fase{display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:1rem;row-gap:.25rem;align-items:start;justify-items:start}
  .hw-fase__img{grid-row:1 / span 5;width:100px;margin:0}
  .hw-fase p{margin:.1rem 0 .5rem}
}

/* ── Striscione «Registrati» (js/hero-sponge-banner.js) ───────────────────────
   Col tema acceso lo traina un fantasmino col cappello da strega invece di
   Debora sub: alone lilla al posto dell'ombra, occhi che ammiccano, manina che
   saluta, scia di vapore che resta indietro e svanisce invece delle bolle. */
.hsb-convoy--fantasma .hsb-sponge{filter:drop-shadow(0 0 9px rgba(205,188,255,.45)) drop-shadow(0 6px 8px rgba(10,0,25,.3))}
.hsb-fanta__alone{animation:hw-fanta-alone 2.4s ease-in-out infinite alternate}
@keyframes hw-fanta-alone{from{opacity:.55}to{opacity:1}}
.hsb-fanta__occhi{transform-box:fill-box;transform-origin:center;animation:hw-fanta-occhi 4.2s infinite}
@keyframes hw-fanta-occhi{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.12)}96%{transform:scaleY(1)}}
.hsb-fanta__mano{transform-box:fill-box;transform-origin:100% 50%;animation:hw-fanta-mano .8s ease-in-out infinite alternate}
@keyframes hw-fanta-mano{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
.hsb-fanta__cappello{transform-box:fill-box;transform-origin:40% 95%;animation:hw-fanta-cappello 1.6s ease-in-out infinite alternate}
@keyframes hw-fanta-cappello{from{transform:rotate(-3deg)}to{transform:rotate(4deg)}}
.hsb-layer--fantasma .hsb-wake{border:0;
  background:radial-gradient(circle,rgba(248,244,255,.9) 0%,rgba(212,196,255,.5) 45%,rgba(190,170,255,0) 72%);
  animation-name:hw-scia}
@keyframes hw-scia{
  0%  {opacity:0;transform:translate(0,0) scale(.6)}
  15% {opacity:.8}
  100%{opacity:0;transform:translate(calc(var(--dx,6px) * 2.5),var(--wob,4px)) scale(2.6)}}
@media (prefers-reduced-motion:reduce){
  .hsb-fanta__alone,.hsb-fanta__occhi,.hsb-fanta__mano,.hsb-fanta__cappello{animation:none}
}

/* testi su due livelli (style.css · .lead--livelli): accento del tema */
html.tema-halloween .lead--livelli{--lead-accento:#9A4FD1}
html.tema-halloween .lead--livelli.lead--scuro{--lead-accento:var(--hw-zucca-c)}