/* ════════════════════════════════════════════════════════════════════════
   TEMA NATALE · Le feste di Tsunami Pulito  (in lavorazione, v1.73+)
   ────────────────────────────────────────────────────────────────────────
   Una pelle sopra il sito di sempre, come quella di Halloween: tutto vive
   sotto html.tema-natale, quindi togliere la classe (o non caricare questo
   file) riporta il sito esattamente com'era. La classe la mette
   js/tema-natale.js, acceso o spento dal pannello.

   Palette
     notte   #071A2C   fondo piu' scuro, notte d'inverno
     blu     #0E3357   superfici scure (il blu Tsunami, piu' freddo)
     abete   #16503D   verde delle feste
     rosso   #C8202F   bottoni e accenti
     rosso-c #E5484D   rosso acceso, al passaggio del mouse
     oro     #E9B949   luci, numeri, stelle
     oro-c   #F6D58A   oro chiaro, testo evidenziato sul buio
     neve    #F5FAFF   testo e fiocchi
   Il blu resta: il pulito e' l'acqua. Le feste sono il rosso e l'oro.
   ════════════════════════════════════════════════════════════════════════ */

html.tema-natale{
  --nt-notte:#071A2C; --nt-blu:#0E3357; --nt-abete:#16503D;
  --nt-rosso:#C8202F; --nt-rosso-c:#E5484D;
  --nt-oro:#E9B949; --nt-oro-c:#F6D58A; --nt-neve:#F5FAFF;

  --navy:#071A2C;
  --bg-navy:#071A2C;
  --bg-deep:linear-gradient(90deg,#071A2C 0%,#0E3357 55%,#16503D 100%);
}

/* ── Barra in alto ──────────────────────────────────────────────────────── */
/* v1.73 · niente piu' rosso pieno con la sfumatura scura sotto (troppo
   pesante): la barra e' la notte d'inverno dell'hero, appena piu' chiara,
   con un filo d'oro in basso e qualche fiocco. Si fonde col menu sotto. */
html.tema-natale .promo-lancio{
  background:
    radial-gradient(1.2px 1.2px at 8% 30%,rgba(255,255,255,.7) 50%,transparent 51%),
    radial-gradient(1px 1px at 23% 70%,rgba(255,255,255,.55) 50%,transparent 51%),
    radial-gradient(1.3px 1.3px at 41% 25%,rgba(246,213,138,.8) 50%,transparent 51%),
    radial-gradient(1px 1px at 63% 65%,rgba(255,255,255,.55) 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 79% 30%,rgba(255,255,255,.7) 50%,transparent 51%),
    radial-gradient(1px 1px at 93% 60%,rgba(246,213,138,.7) 50%,transparent 51%),
    linear-gradient(90deg,#0F2D4F 0%,#17406A 50%,#0F2D4F 100%);
  border-bottom:0;box-shadow:inset 0 -1px 0 rgba(246,213,138,.45)}
html.tema-natale .promo-lancio__pill{border-color:rgba(246,213,138,.65);color:var(--nt-oro-c);background:rgba(246,213,138,.08)}
html.tema-natale .promo-lancio__txt b{color:#fff;font-size:.95rem}
html.tema-natale .promo-lancio__txt{color:rgba(245,250,255,.8)}
html.tema-natale .promo-lancio__cta{color:var(--nt-oro-c)}
/* la frase lunga solo dove sta su una riga sola: la barra non va mai a capo */
@media (max-width:980px){.nt-solo-largo{display:none}}

/* ── Nav ────────────────────────────────────────────────────────────────── */
html.tema-natale .nav__logo::after{background:radial-gradient(ellipse at 50% 50%,rgba(233,185,73,.32) 0%,transparent 65%)}
html.tema-natale .nav__link--game{color:var(--nt-oro)!important}

/* Logo delle feste (js · loghi): il disegno sta sopra il logo, stesse misure,
   e nel menu respira insieme a lui (stessa animazione logo-pulse di style.css). */
.nt-logo-feste{position:absolute;overflow:visible;pointer-events:none;z-index:1}
.nt-logo-feste--menu{animation:logo-pulse 4.6s ease-in-out 1.8s infinite;transform-origin:center}

/* Ghirlanda di lucine sotto il menu (js · ghirlanda): appesa al bordo basso
   della barra fissa, non prende i clic. Le lampadine si accendono a turno. */
.nt-ghirlanda{position:absolute;left:0;right:0;top:calc(100% - 3px);height:0;overflow:visible;pointer-events:none;z-index:1}
.nt-ghirlanda svg{display:block;overflow:visible;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
/* accesa / spenta la decide js · programmaLuci, a scatti come le luci vere */
.nt-lamp{transition:opacity .08s linear}
.nt-lamp--spenta{opacity:.28;filter:none!important}
.nt-lamp--r{fill:#FF4D57;filter:drop-shadow(0 0 3px #FF4D57)}
.nt-lamp--o{fill:#FFD261;filter:drop-shadow(0 0 3px #FFD261)}
.nt-lamp--v{fill:#3FD08A;filter:drop-shadow(0 0 3px #3FD08A)}
.nt-lamp--b{fill:#6EC8FF;filter:drop-shadow(0 0 3px #6EC8FF)}

/* ── Bottoni ────────────────────────────────────────────────────────────── */
html.tema-natale .btn--gold{
  background:linear-gradient(180deg,#D7303E 0%,#B01826 100%);
  color:#fff;box-shadow:0 4px 22px rgba(200,32,47,.38)}
html.tema-natale .btn--gold:hover{background:linear-gradient(180deg,#E5484D 0%,#C8202F 100%);
  box-shadow:0 8px 30px rgba(200,32,47,.5)}

/* ── Hero della home ────────────────────────────────────────────────────── */
html.tema-natale .hero{
  background:
    radial-gradient(40% 46% at 80% 22%, rgba(246,213,138,.16) 0%, rgba(233,185,73,.05) 45%, transparent 70%),
    linear-gradient(160deg,#071A2C 0%,#0E3357 60%,#123F4A 100%)}
html.tema-natale .hero__orb--1{background:#E9B949;opacity:.08}
html.tema-natale .hero__orb--2{background:#C8202F;opacity:.12}
html.tema-natale .hero__orb--3{background:#16503D;opacity:.25}
html.tema-natale .hero__eyebrow{color:rgba(245,250,255,.75)}
@media(max-width:1024px){html.tema-natale .hero__eyebrow{color:rgba(245,250,255,.88)}}
html.tema-natale .hero__eyebrow-dot{
  background:radial-gradient(circle at 38% 32%,#FFF8E6 0%,#F6D58A 45%,#E9B949 100%);
  box-shadow:0 0 6px rgba(233,185,73,.8)}
html.tema-natale .hero__title em{
  background:linear-gradient(100deg,#FFF1C9 0%,#F6D58A 20%,#E9B949 40%,#C99526 55%,#E9B949 72%,#F6D58A 86%,#FFF1C9 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text}
html.tema-natale .hero__sub{color:rgba(245,250,255,.68);--hero-accento:var(--nt-oro-c)}

/* La scenografia: stelle, neve che cade, un velo di neve in fondo.
   Sta dietro al testo (z 1) e non prende i click. */
.nt-scena{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.nt-stelle{position:absolute;inset:0 0 40% 0;opacity:.7;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 38%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 44% 16%, #F6D58A 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 71% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 34%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 93% 18%, #F6D58A 50%, transparent 51%),
    radial-gradient(1px 1px at 36% 48%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 64% 52%, #fff 50%, transparent 51%);
  animation:nt-brilla 5s ease-in-out infinite alternate}
@keyframes nt-brilla{from{opacity:.45}to{opacity:.8}}
.nt-neve{position:absolute;inset:0}
.nt-fiocco{position:absolute;top:-12px;display:block;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#fff 0%,rgba(245,250,255,.85) 55%,rgba(245,250,255,0) 100%);
  animation-name:nt-cade,nt-ondeggia;animation-timing-function:linear,ease-in-out;
  animation-iteration-count:infinite,infinite;animation-direction:normal,alternate}
@keyframes nt-cade{from{transform:translateY(0)}to{transform:translateY(calc(100svh + 24px))}}
@keyframes nt-ondeggia{from{margin-left:-14px}to{margin-left:14px}}
/* Il paesaggio d'inverno (js · paesaggio): flat, al chiaro di luna.
   Le colline sono neve in ombra (blu), il bianco vero e' solo davanti, nelle
   onde: cosi' i testi bianchi dell'hero restano leggibili sopra. */
/* bottom 5vw: le onde dell'hero (larghe 112%, 220/1440) coprono sempre
   almeno i primi 6vw, quindi il paesaggio poggia sulla neve senza fessure
   e i pini restano sopra le onde invece di sparirci dietro. */
/* altezza 25vw = le proporzioni del disegno (1440×360): sul computer non
   si taglia mai in alto (luna e alone interi), sui telefoni (sotto) si
   tagliano i lati e resta il centro. */
.nt-paesaggio{position:absolute;left:0;right:0;bottom:5vw;width:100%;height:clamp(250px,25vw,560px);display:block}
/* montagne e colline: due toni, luce dalla luna a destra */
.nt-luna-alone{animation:nt-luna 6s ease-in-out infinite alternate}
@keyframes nt-luna{from{opacity:.8}to{opacity:1}}
.nt-monte-ombra{fill:#122B48}
.nt-monte-luce{fill:#1B3E63}
.nt-monte-neve-ombra{fill:#6F8FAF}
.nt-monte-neve{fill:#D3E2EF}
.nt-collina-1{fill:#1A3F63}
.nt-collina-2{fill:#24507B}
.nt-cresta{fill:none;stroke:#5C83AB;stroke-width:2;opacity:.75}
.nt-cresta--vicina{stroke:#7FA3C6;stroke-width:2.4}
.nt-abeti-lontani{fill:#11304D}
.nt-finestrella{fill:#FFCF6B;animation:nt-finestra 6s ease-in-out infinite alternate}
.nt-finestrella--fissa{animation:none}
@keyframes nt-finestra{0%,70%{opacity:1}100%{opacity:.35}}
/* pini e alberi di Natale */
.nt-neve-ombra{fill:#B9CDE0}
.nt-neve-luce{fill:#F5FAFF}
.nt-ghirlanda{fill:none;stroke:#E9B949;stroke-width:1.6;stroke-linecap:round;opacity:.9}
.nt-luce{animation:nt-luce 2.4s ease-in-out infinite alternate}
.nt-palla--r{fill:#FF5A5F}
.nt-palla--o{fill:#F6D58A}
.nt-palla--b{fill:#F5FAFF}
@keyframes nt-luce{0%,40%{opacity:1}100%{opacity:.45}}
.nt-stella{fill:#F6D58A;filter:drop-shadow(0 0 6px rgba(246,213,138,.85));
  transform-box:fill-box;transform-origin:center;animation:nt-stella 3.2s ease-in-out infinite}
@keyframes nt-stella{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.nt-dondola{transform-box:fill-box;transform-origin:50% 100%;animation:nt-dondola 7s ease-in-out infinite alternate}
@keyframes nt-dondola{from{transform:rotate(-.9deg)}to{transform:rotate(.9deg)}}
.nt-sciarpa{transform-box:fill-box;transform-origin:0 0;animation:nt-sciarpa 2.6s ease-in-out infinite alternate}
@keyframes nt-sciarpa{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}
/* lampione */
.nt-lampione__alone{animation:nt-luna 4s ease-in-out infinite alternate}
.nt-lampione__pozza{fill:#FFE3A6;opacity:.28}
/* il cielo che si muove: stelle, stelle cadenti, la slitta davanti alla luna */
.nt-stella-cielo{fill:#FFF4D6;animation:nt-stella-cielo 3.5s ease-in-out infinite}
@keyframes nt-stella-cielo{0%,100%{opacity:.25}50%{opacity:1}}
.nt-cadente{opacity:0;animation:nt-cadente 9s ease-in infinite}
.nt-cadente--2{animation-duration:13s;animation-delay:-6s}
@keyframes nt-cadente{
  0%,84%{opacity:0;transform:translate(960px,14px) rotate(18deg)}
  86%{opacity:1}
  94%{opacity:0;transform:translate(1150px,76px) rotate(18deg)}
  100%{opacity:0;transform:translate(1150px,76px) rotate(18deg)}}
.nt-cadente--2{animation-name:nt-cadente-2}
@keyframes nt-cadente-2{
  0%,86%{opacity:0;transform:translate(1050px,10px) rotate(16deg)}
  88%{opacity:1}
  96%,100%{opacity:0;transform:translate(1230px,62px) rotate(16deg)}}
.nt-slitta-cielo{animation:nt-slitta-cielo 26s linear infinite;opacity:0}
@keyframes nt-slitta-cielo{
  0%{opacity:0;transform:translate(-140px,206px) rotate(-5deg) scale(.86)}
  2%{opacity:1}
  42%{opacity:1;transform:translate(1580px,118px) rotate(-3deg) scale(.86)}
  43%,100%{opacity:0;transform:translate(1580px,118px) rotate(-3deg) scale(.86)}}
.nt-slitta-cielo__su{animation:nt-slitta-onda 2.4s ease-in-out infinite}
@keyframes nt-slitta-onda{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.nt-zampe-cielo{transform-box:fill-box;transform-origin:50% 0;animation:nt-galoppo .5s ease-in-out infinite alternate}
.nt-scia-slitta{fill:#F6D58A;animation:nt-scia-slitta .8s ease-out infinite}
@keyframes nt-scia-slitta{0%{opacity:.9;transform:translate(0,0)}100%{opacity:0;transform:translate(-10px,6px)}}
/* la lepre che attraversa la neve a balzi */
.nt-lepre{animation:nt-lepre 34s linear infinite;opacity:0}
@keyframes nt-lepre{
  0%,55%{opacity:0;transform:translate(-40px,304px)}
  56%{opacity:1;transform:translate(-30px,304px)}
  79%{opacity:1;transform:translate(560px,300px)}
  80%,100%{opacity:0;transform:translate(560px,300px)}}
.nt-lepre__salto{animation:nt-lepre-salto .55s ease-out infinite}
@keyframes nt-lepre-salto{0%,100%{transform:translateY(0)}45%{transform:translateY(-12px)}}
/* il vento solleva la neve dai rami */
.nt-soffio{fill:#FFFFFF;opacity:0;animation:nt-soffio 7s ease-out infinite}
.nt-soffio--2{animation-delay:-3.5s;animation-duration:9s}
@keyframes nt-soffio{0%,70%{opacity:0;transform:translate(0,0)}74%{opacity:.9}100%{opacity:0;transform:translate(-36px,14px)}}
.nt-baita__finestra{fill:#FFCF6B}
.nt-baita__alone{fill:#FFCF6B;opacity:.16;animation:nt-camino 4s ease-in-out infinite alternate}
@keyframes nt-camino{from{opacity:.12}to{opacity:.22}}
.nt-fumo circle{fill:#C9D6E3;opacity:0;transform-box:fill-box;transform-origin:center;animation:nt-fumo 6s linear infinite}
.nt-fumo circle:nth-child(2){animation-delay:-2s}
.nt-fumo circle:nth-child(3){animation-delay:-4s}
@keyframes nt-fumo{
  0%{transform:translate(0,0) scale(.6);opacity:0}
  15%{opacity:.55}
  100%{transform:translate(18px,-60px) scale(1.8);opacity:0}}
@media (max-width:700px){.nt-paesaggio{height:clamp(170px,26vh,230px)}}

/* Il terreno davanti: le onde dell'hero diventano neve */
html.tema-natale .hero__wave--3{fill:#5D86AE;opacity:1}
html.tema-natale .hero__wave--2{fill:#B9CDE0;opacity:1}

@media (prefers-reduced-motion:reduce){
  .nt-neve{display:none}
  .nt-stelle,.nt-luce,.nt-stella,.nt-dondola,.nt-baita__alone,.nt-fumo circle,.nt-luna-alone,.nt-finestrella,.nt-sciarpa,.nt-lampione__alone,.hsb-naso,.hsb-zampe,.nt-stella-cielo,.nt-zampe-cielo,.nt-slitta-cielo__su,.nt-lepre__salto,.nt-logo-feste--menu,.nt-footer__stelle{animation:none}
  .nt-fumo,.nt-cadente,.nt-slitta-cielo,.nt-lepre,.nt-soffio{display:none}
}

/* ── Onde fra le sezioni ────────────────────────────────────────────────
   Dietro il verde abete, in mezzo il rosso delle feste; il bianco davanti
   resta (e' il colore della sezione dopo). */
html.tema-natale .sec-wave .wd-3{fill:#16503D}
html.tema-natale .sec-wave .wd-2{fill:#A61E2B}

/* ── Neve sopra i bottoni ───────────────────────────────────────────────
   Il cumulo lo disegna js/tema-natale.js (nevicaBottoni), largo quanto il
   bottone e lo mette in posizione: qui solo lo stile. Sul bottone principale le bollicine lasciano
   il posto alla neve (servivano overflow:hidden, che taglierebbe il cumulo). */
html.tema-natale .btn{position:relative}
html.tema-natale .btn--gold{overflow:visible}
html.tema-natale .btn--gold::before,html.tema-natale .btn--gold::after{display:none}
html.tema-natale .btn > .nt-neve-btn,html.tema-natale #ts-popup > div > .nt-neve-btn,html.tema-natale .nt-av__card > .nt-neve-btn{position:absolute;z-index:2;
  pointer-events:none;overflow:visible;filter:drop-shadow(0 1px 1.2px rgba(8,22,34,.32))}

/* ── Footer innevato (js · footer) ─────────────────────────────────────────
   Stelle, qualche fiocco, e in fondo una collina di neve con gli abeti e la
   casetta: lo spazio sotto il copyright si allarga per farle posto. L'onda
   che entra nel footer prende i colori del suo fondo. */
html.tema-natale stop[stop-color="#081622"]{stop-color:#071A2C}
html.tema-natale stop[stop-color="#0d2a4f"]{stop-color:#0E3357}
html.tema-natale stop[stop-color="#0a3060"]{stop-color:#16503D}
html.tema-natale .footer{overflow:hidden;padding-bottom:clamp(120px,12.5vw,190px)}
html.tema-natale .footer > .wrap{position:relative;z-index:1}
.nt-footer{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.nt-footer__stelle{position:absolute;inset:0 0 30% 0;opacity:.55;
  background-image:
    radial-gradient(1.3px 1.3px at 8% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 42%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 37% 12%, #F6D58A 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 34%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 66% 16%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 79% 40%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 91% 22%, #F6D58A 50%, transparent 51%);
  animation:nt-brilla 5s ease-in-out infinite alternate}
.nt-footer .nt-fiocco{opacity:.5!important}
.nt-footer__neve{position:absolute;left:0;bottom:0;width:100%;height:clamp(130px,14.6vw,210px);display:block}

/* ── I prodotti consigliati per le feste (js · feste) ──────────────────────
   Cornice dorata, fiocco rosso nell'angolo in basso a destra della foto, nastro rosso col
   motivo e l'agrifoglio. Stesso posto, stesso prezzo. */
html.tema-natale .prod-card--feste{box-shadow:0 0 0 2px rgba(233,185,73,.8),0 10px 28px rgba(200,32,47,.14),var(--sh2)}
html.tema-natale .prod-card--feste:hover{box-shadow:0 0 0 2px rgba(233,185,73,1),0 18px 36px -10px rgba(200,32,47,.3),var(--sh3)}
.nt-feste{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;border-radius:inherit}
html:not(.tema-natale) .nt-feste{display:none}
.nt-feste__fiocco{position:absolute;right:0;bottom:0;width:84px;height:84px;filter:drop-shadow(0 2px 3px rgba(80,10,18,.28))}
.nt-feste__nastro{position:absolute;top:.7rem;right:.7rem;display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--ff-sans);font-weight:900;font-size:.74rem;line-height:1;color:#fff;white-space:nowrap;
  background:linear-gradient(180deg,#D7303E,#A61E2B);border-radius:999px;padding:.4rem .78rem .4rem .5rem;
  box-shadow:0 2px 0 #6E1019,0 6px 14px rgba(80,10,18,.25)}
.nt-feste__nastro svg{width:1.6em;height:auto;flex:none}
.nt-feste--grande .nt-feste__fiocco{width:120px;height:120px}
.nt-feste--grande .nt-feste__nastro{top:1.1rem;right:1.1rem;font-size:1rem;padding:.55rem 1.05rem .55rem .7rem}
@media (max-width:560px){
  .nt-feste__nastro{top:.5rem;right:.5rem;font-size:.66rem;padding:.32rem .6rem .32rem .42rem}
  .nt-feste__fiocco{width:62px;height:62px}
}

/* ── I popup (tsunami-supabase.js · mostraPopup) ───────────────────────────
   Col tema acceso la scheda del popup si veste per le feste: neve sul bordo
   alto (disegnata da js · nevicaBottoni come sui bottoni), cornice rossa con
   il filo d'oro, agrifoglio sull'angolo, titolo rosso. Serve anche per il
   calendario dell'Avvento (un popup al giorno con l'immagine del post).
   La scheda ha gli stili scritti nell'HTML: qui servono gli !important. */
html.tema-natale #ts-popup{background:rgba(5,18,32,.62)!important;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
html.tema-natale #ts-popup > div{
  border-radius:22px!important;
  box-shadow:0 0 0 3px #F6D58A,0 0 0 8px #C8202F,0 24px 60px rgba(5,18,32,.5)!important;
  animation:nt-pop-entra .45s cubic-bezier(.2,1.3,.4,1) both}
html.tema-natale #ts-popup > div::after{
  content:'';position:absolute;left:-22px;top:-20px;width:74px;height:46px;z-index:3;pointer-events:none;
  transform:rotate(-24deg);filter:drop-shadow(0 3px 4px rgba(5,18,32,.35));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30'%3E%3Cpath d='M25 18 C29 11 35 9 38 12 C40 9 44 8 47 11 C45 15 47 18 50 19 C43 22 35 22 25 18 Z' fill='%232E8B62'/%3E%3Cpath d='M25 18 C21 11 15 9 12 12 C10 9 6 8 3 11 C5 15 3 18 0 19 C7 22 15 22 25 18 Z' fill='%231E6B4E'/%3E%3Ccircle cx='22' cy='15' r='4' fill='%23E5484D'/%3E%3Ccircle cx='28' cy='14' r='4' fill='%23FF5A5F'/%3E%3Ccircle cx='25' cy='20' r='4' fill='%23C8202F'/%3E%3C/svg%3E") center/contain no-repeat}
html.tema-natale #ts-popup h3{color:#B01826!important}
html.tema-natale #ts-popup img{border-radius:14px!important;box-shadow:0 4px 14px rgba(5,18,32,.18)}
html.tema-natale #ts-pop-x{z-index:4;color:#B01826!important}
@keyframes nt-pop-entra{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.tema-natale #ts-popup > div{animation:none}}

/* ── Il calendario dell'Avvento (js · avvento) ─────────────────────────────
   Il popup del giorno, tutto in HTML/CSS/SVG. In alto la scena rossa delle
   feste, sotto il testo. Stessa cornice rossa e oro dei popup col tema. */
#nt-avvento{position:fixed;inset:0;z-index:9300;display:grid;place-items:center;padding:1.2rem;
  background:rgba(5,18,32,.62);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  animation:nt-av-sfondo .3s ease both}
#nt-avvento.nt-av--via{animation:nt-av-sfondo .22s ease reverse both}
@keyframes nt-av-sfondo{from{opacity:0}to{opacity:1}}
.nt-av__card{position:relative;width:100%;max-width:400px;background:#fff;border-radius:22px;
  box-shadow:0 0 0 3px #F6D58A,0 0 0 8px #C8202F,0 24px 60px rgba(5,18,32,.5);
  animation:nt-pop-entra .45s cubic-bezier(.2,1.3,.4,1) both}
.nt-av__card::after{content:'';position:absolute;left:-22px;top:-20px;width:74px;height:46px;z-index:6;pointer-events:none;
  transform:rotate(-24deg);filter:drop-shadow(0 3px 4px rgba(5,18,32,.35));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30'%3E%3Cpath d='M25 18 C29 11 35 9 38 12 C40 9 44 8 47 11 C45 15 47 18 50 19 C43 22 35 22 25 18 Z' fill='%232E8B62'/%3E%3Cpath d='M25 18 C21 11 15 9 12 12 C10 9 6 8 3 11 C5 15 3 18 0 19 C7 22 15 22 25 18 Z' fill='%231E6B4E'/%3E%3Ccircle cx='22' cy='15' r='4' fill='%23E5484D'/%3E%3Ccircle cx='28' cy='14' r='4' fill='%23FF5A5F'/%3E%3Ccircle cx='25' cy='20' r='4' fill='%23C8202F'/%3E%3C/svg%3E") center/contain no-repeat}
.nt-av__x{position:absolute;top:-.75rem;right:-.75rem;z-index:7;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:#B01826;font-size:1.5rem;line-height:1;display:grid;place-items:center;box-shadow:0 2px 10px rgba(5,18,32,.3)}
.nt-av__x:focus-visible{outline:3px solid #F6D58A;outline-offset:2px}

/* la scena */
.nt-av__scena{position:relative;height:230px;overflow:hidden;border-radius:20px 20px 0 0;
  background:
    radial-gradient(60% 70% at 70% 62%,rgba(255,214,140,.30) 0%,rgba(255,214,140,0) 70%),
    radial-gradient(40% 50% at 12% 30%,rgba(255,214,140,.12) 0%,rgba(255,214,140,0) 70%),
    linear-gradient(165deg,#5E0E18 0%,#8E1824 45%,#A61E2B 100%)}
.nt-av__luci{position:absolute;left:0;top:-2px;z-index:3;overflow:visible}
/* la data, impilata in alto a sinistra: numero, mese, consiglio */
.nt-av__data{position:absolute;left:22px;top:26px;z-index:4;display:flex;flex-direction:column;align-items:flex-start}
.nt-av__num{font-family:var(--ff-sans);font-weight:900;font-size:3.7rem;line-height:.84;letter-spacing:-.04em;
  background:linear-gradient(180deg,#FFF1C9 0%,#F6D58A 40%,#D9A63A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 6px rgba(60,6,12,.35))}
.nt-av__mese{font-family:var(--ff-sans);font-weight:800;font-size:.86rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-top:.35rem}
.nt-av__data small{font-family:var(--ff-sans);font-weight:700;font-size:.56rem;letter-spacing:.15em;text-transform:uppercase;color:#F6D58A;margin-top:.2rem}
/* il disegno della scena (js · scenaAvvento): un solo SVG, tutto appoggiato al suolo */
.nt-av__disegno{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}
.nt-av__prodotto{filter:drop-shadow(0 6px 6px rgba(40,4,10,.45))}
.nt-av__debora{filter:drop-shadow(0 6px 8px rgba(40,4,10,.4))}
.nt-av__scintilla{fill:#FFF3D6;filter:drop-shadow(0 0 3px rgba(255,214,140,.9));transform-box:fill-box;transform-origin:center;
  animation:nt-av-scintilla 2.6s ease-in-out infinite}
@keyframes nt-av-scintilla{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
/* il pulviscolo nel faro: sale piano e si accende e spegne */
.nt-av__polvere{fill:#FFF6DC;animation:nt-av-polvere 6s ease-in-out infinite}
@keyframes nt-av-polvere{0%{opacity:0;transform:translateY(6px)}30%{opacity:.85}70%{opacity:.6}100%{opacity:0;transform:translateY(-14px)}}
.nt-av__scena .nt-neve{position:absolute;inset:0;z-index:3;pointer-events:none}
.nt-av__scena .nt-fiocco{animation-name:nt-av-cade,nt-ondeggia}
@keyframes nt-av-cade{from{transform:translateY(0)}to{transform:translateY(270px)}}

/* il testo */
.nt-av__corpo{padding:1.1rem 1.4rem 1.3rem;text-align:center}
.nt-av__kicker{font-family:var(--ff-sans);font-weight:800;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#B01826;margin:0 0 .35rem}
.nt-av__corpo h3{font-family:var(--ff-sans);font-weight:900;font-size:1.35rem;line-height:1.15;color:#1A0F14;margin:0 0 .55rem;letter-spacing:-.01em}
.nt-av__corpo h3 em{font-style:normal;color:#C8202F}
.nt-av__testo{font-size:.92rem;line-height:1.6;color:#4A3F45;margin:0 0 1rem}
.nt-av__corpo .btn{margin-bottom:.8rem}
.nt-av__domani{font-size:.74rem;color:#8C7F86;margin:0}
@media (max-width:420px){
  .nt-av__scena{height:214px}
  .nt-av__data{left:16px;top:22px}
  .nt-av__num{font-size:3rem}
  .nt-av__mese{font-size:.74rem;letter-spacing:.16em}
  .nt-av__data small{font-size:.5rem;letter-spacing:.12em}
}
@media (prefers-reduced-motion:reduce){#nt-avvento,.nt-av__card,.nt-av__scintilla,.nt-av__polvere{animation:none}.nt-av__scena .nt-neve{display:none}}

/* ── Lo striscione «Registrati» (js/hero-sponge-banner.js) ─────────────────
   Col tema acceso lo traina una slitta con la renna invece di Debora sub:
   striscione rosso con il testo bianco e le cuciture dorate, scia di
   stelline dorate che scendono piano invece delle bolle che salgono. */
html.tema-natale .hsb-banner{background:linear-gradient(180deg,#D7303E 0%,#B71F2D 55%,#9E1824 100%)}
html.tema-natale .hsb-banner::before{border-top-color:rgba(246,213,138,.7);border-bottom-color:rgba(246,213,138,.7)}
html.tema-natale .hsb-banner__text{color:#fff;text-shadow:0 1px 0 rgba(90,10,18,.45)}
html.tema-natale .hsb-wake{border:0;border-radius:0;
  background:radial-gradient(circle,#FFF6D8 0%,#F6D58A 45%,#E9B949 100%);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation-name:nt-scia}
@keyframes nt-scia{
  0%  {opacity:0;transform:translate(0,0) scale(.4) rotate(0)}
  15% {opacity:1}
  100%{opacity:0;transform:translate(var(--dx,6px),26px) scale(1.25) rotate(90deg)}}
.hsb-naso{animation:nt-naso 1.6s ease-in-out infinite alternate}
@keyframes nt-naso{from{opacity:.15}to{opacity:.55}}
.hsb-zampe{transform-box:fill-box;animation:nt-galoppo .9s ease-in-out infinite alternate}
.hsb-zampe--a{transform-origin:100% 0}
.hsb-zampe--d{transform-origin:0 0;animation-delay:-.45s}
@keyframes nt-galoppo{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}

/* ── Il calendario nell'area personale (js · riquadroArea, apriCalendario) ──
   Dal 1 al 24 dicembre: nella fascia del profilo il riquadro col calendario
   in piccolo, che apre il calendario intero. 24 sportelli in quattro tinte
   delle feste: aperti (la porta gira sul cardine e dentro c'e' il prodotto
   del giorno; poi lo sportello sparisce e la casella resta libera), di oggi
   (brilla), persi («Da aprire»), futuri (lucchetto). */
.nt-av-area{margin-left:auto;display:flex;align-items:center;gap:1rem;max-width:420px;cursor:pointer;text-align:left;
  font:inherit;color:#fff;padding:.85rem 1.2rem .85rem .9rem;border-radius:18px;
  background:linear-gradient(150deg,rgba(200,32,47,.92) 0%,rgba(142,24,36,.94) 100%);
  border:1px solid rgba(246,213,138,.55);
  box-shadow:0 10px 26px rgba(40,4,10,.35),inset 0 1px 0 rgba(255,236,190,.25);
  transition:transform .25s ease,box-shadow .25s ease}
.nt-av-area:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(40,4,10,.45),0 0 0 3px rgba(246,213,138,.25),inset 0 1px 0 rgba(255,236,190,.25)}
.nt-av-area:focus-visible{outline:3px solid #F6D58A;outline-offset:3px}
.nt-av-area__mini{flex:none;width:92px;height:auto;filter:drop-shadow(0 4px 6px rgba(40,4,10,.35));transition:transform .3s ease}
.nt-av-area:hover .nt-av-area__mini{transform:rotate(-4deg) scale(1.04)}
.nt-mini--aperta{fill:#F6D58A}
.nt-mini--oggi{fill:#FFF6E0;animation:nt-mini-oggi 1.4s ease-in-out infinite alternate}
.nt-mini--persa{fill:#D7303E}
.nt-mini--futura{fill:#7A1220}
@keyframes nt-mini-oggi{from{fill:#FFF6E0}to{fill:#F6D58A}}
.nt-av-area__testi{display:flex;flex-direction:column;gap:.18rem;min-width:0}
.nt-av-area__kicker{font-family:var(--ff-sans);font-weight:800;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#F6D58A}
.nt-av-area__titolo{font-family:var(--ff-sans);font-weight:900;font-size:1.08rem;line-height:1.2;color:#fff}
.nt-av-area__stato{font-size:.8rem;color:rgba(255,240,230,.82)}
.nt-av-area__stato b{color:#F6D58A}
.nt-av-area__cta{margin-top:.3rem;font-family:var(--ff-sans);font-weight:800;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#F6D58A}
.nt-av-area--da-aprire .nt-av-area__cta span{display:inline-block;animation:nt-cta-spinge 1.2s ease-in-out infinite}
@keyframes nt-cta-spinge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (max-width:760px){.nt-av-area{margin-left:0;max-width:none;width:100%}}
@media (max-width:480px){
  .nt-av-area{gap:.8rem;padding:.8rem .9rem .8rem .75rem}
  .nt-av-area__mini{width:70px}
  .nt-av-area__kicker{font-size:.56rem;letter-spacing:.12em}
  .nt-av-area__titolo{font-size:1rem}
  .nt-av-area__stato{font-size:.76rem}
  .nt-av-area__cta{font-size:.68rem;white-space:nowrap}
}

#nt-calendario{position:fixed;inset:0;z-index:9250;display:grid;place-items:center;padding:1.2rem;overflow-y:auto;
  background:rgba(5,18,32,.66);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:nt-av-sfondo .3s ease both}
#nt-calendario.nt-av--via{animation:nt-av-sfondo .22s ease reverse both}
.nt-cal__card{position:relative;width:100%;max-width:680px;border-radius:22px;color:#fff;
  background:
    radial-gradient(70% 40% at 50% 0%,rgba(255,214,140,.18) 0%,rgba(255,214,140,0) 70%),
    radial-gradient(circle at 1px 1px,rgba(246,213,138,.10) 1px,transparent 1.4px) 0 0/18px 18px,
    linear-gradient(170deg,#7E1421 0%,#5E0E18 100%);
  box-shadow:0 0 0 3px #F6D58A,0 0 0 8px #C8202F,0 24px 60px rgba(5,18,32,.5);
  animation:nt-pop-entra .45s cubic-bezier(.2,1.3,.4,1) both}
.nt-cal__card::after{content:'';position:absolute;left:-22px;top:-20px;width:74px;height:46px;z-index:6;pointer-events:none;
  transform:rotate(-24deg);filter:drop-shadow(0 3px 4px rgba(5,18,32,.35));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30'%3E%3Cpath d='M25 18 C29 11 35 9 38 12 C40 9 44 8 47 11 C45 15 47 18 50 19 C43 22 35 22 25 18 Z' fill='%232E8B62'/%3E%3Cpath d='M25 18 C21 11 15 9 12 12 C10 9 6 8 3 11 C5 15 3 18 0 19 C7 22 15 22 25 18 Z' fill='%231E6B4E'/%3E%3Ccircle cx='22' cy='15' r='4' fill='%23E5484D'/%3E%3Ccircle cx='28' cy='14' r='4' fill='%23FF5A5F'/%3E%3Ccircle cx='25' cy='20' r='4' fill='%23C8202F'/%3E%3C/svg%3E") center/contain no-repeat}
.nt-cal__testa{position:relative;overflow:hidden;border-radius:20px 20px 0 0;padding:3.1rem 1.6rem 1.1rem;text-align:center}
.nt-cal__testa .nt-neve{position:absolute;inset:0;pointer-events:none}
.nt-cal__testa .nt-fiocco{animation-name:nt-av-cade,nt-ondeggia}
.nt-cal__testa>*{position:relative}
.nt-cal__testa .nt-av__luci{position:absolute;left:0;top:-2px;z-index:3}
.nt-cal__kicker{font-family:var(--ff-sans);font-weight:800;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#F6D58A;margin:0 0 .35rem}
.nt-cal__testa h3{font-family:var(--ff-sans);font-weight:900;font-size:clamp(1.4rem,3.4vw,1.85rem);line-height:1.1;margin:0 0 .5rem;color:#fff;letter-spacing:-.01em}
.nt-cal__testa h3 em{font-style:normal;color:#F6D58A}
.nt-cal__sotto{font-size:.9rem;line-height:1.55;color:rgba(255,240,230,.8);margin:0 auto;max-width:44ch}

.nt-cal__griglia{list-style:none;margin:0;padding:.4rem 1.5rem 1rem;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem}
.nt-cal__c{position:relative;aspect-ratio:1/1.08}
.nt-cal__b{-webkit-appearance:none;appearance:none;border:0;padding:0;margin:0;background:none;font:inherit;color:inherit;
  position:relative;display:block;width:100%;height:100%;border-radius:12px;cursor:pointer;perspective:1500px}
.nt-cal__b:disabled{cursor:default}
.nt-cal__b:focus-visible{outline:3px solid #F6D58A;outline-offset:3px}
/* dentro la casella: il prodotto del giorno su fondo caldo */
.nt-cal__dentro{position:absolute;inset:0;border-radius:12px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%,#FFF9EA 0%,#F6E3B8 70%,#E9CC8E 100%);
  box-shadow:inset 0 3px 10px rgba(80,20,10,.4)}
.nt-cal__dentro img{width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(80,20,10,.35))}
.nt-cal__dentro-n{position:absolute;left:7px;top:5px;font-family:var(--ff-sans);font-weight:900;font-size:.72rem;color:#B01826}
/* la porta: davanti la tinta col numero e il pomello, dietro il legno */
.nt-cal__porta{position:absolute;inset:0;border-radius:12px;transform-origin:left center;transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.3,1.25,.45,1),opacity .2s ease}
.nt-cal__porta::before,.nt-cal__porta::after{content:'';position:absolute;inset:0;border-radius:inherit;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.nt-cal__porta::before{background:
    radial-gradient(circle at 88% 52%,#F6D58A 0 2.4px,rgba(0,0,0,.25) 2.6px 3.2px,transparent 3.4px),
    var(--porta);
  box-shadow:inset 0 0 0 1.5px rgba(255,236,190,.55),inset 0 0 0 5px rgba(0,0,0,.06),inset 0 -8px 14px rgba(0,0,0,.18),0 4px 8px rgba(40,4,10,.35)}
.nt-cal__porta::after{transform:rotateY(180deg);background:linear-gradient(90deg,#4A0A12 0%,#6E1220 100%);box-shadow:inset 0 0 0 1.5px rgba(246,213,138,.35)}
.nt-cal__n,.nt-cal__nota{position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.nt-cal__n{inset:0;display:grid;place-items:center;font-family:var(--ff-sans);font-weight:900;font-size:clamp(1.3rem,3.4vw,2rem);letter-spacing:-.03em;
  color:var(--porta-n);text-shadow:0 2px 0 rgba(0,0,0,.18);padding-bottom:.5rem}
.nt-cal__nota{left:50%;bottom:9%;transform:translateX(-50%);white-space:nowrap;font-family:var(--ff-sans);font-weight:800;font-size:.54rem;
  letter-spacing:.1em;text-transform:uppercase;line-height:1;padding:.28rem .5rem;border-radius:999px;background:rgba(255,248,232,.95);color:#B01826}
.nt-cal__nota:empty{display:none}
.nt-cal__c--rosso{--porta:linear-gradient(160deg,#DA3341 0%,#A81B28 100%);--porta-n:#F6D58A}
.nt-cal__c--verde{--porta:linear-gradient(160deg,#329468 0%,#1C6449 100%);--porta-n:#FFF3D6}
.nt-cal__c--crema{--porta:linear-gradient(160deg,#FFF7E6 0%,#EFDAB0 100%);--porta-n:#B01826}
.nt-cal__c--notte{--porta:linear-gradient(160deg,#235684 0%,#14304F 100%);--porta-n:#F6D58A}
/* oggi: brilla; persa: invita; futura: chiusa col lucchetto */
.nt-cal__c--oggi .nt-cal__b{animation:nt-cal-oggi 1.5s ease-in-out infinite alternate;border-radius:12px}
@keyframes nt-cal-oggi{from{box-shadow:0 0 0 2px #F6D58A,0 0 10px rgba(246,213,138,.4)}to{box-shadow:0 0 0 2px #F6D58A,0 0 22px rgba(246,213,138,.85)}}
.nt-cal__c--oggi .nt-cal__nota{background:#F6D58A;color:#7A1220}
.nt-cal__c--futura .nt-cal__porta{filter:saturate(.55) brightness(.78)}
.nt-cal__c--futura .nt-cal__nota{background:none;padding:0;color:rgba(255,248,232,.75);bottom:10%}
.nt-cal__c--futura.nt-cal__c--crema .nt-cal__nota{color:rgba(176,24,38,.6)}
.nt-cal__nota svg{display:block;width:13px;height:13px}
.nt-cal__c--oggi .nt-cal__b:hover .nt-cal__porta,.nt-cal__c--persa .nt-cal__b:hover .nt-cal__porta,
.nt-cal__c--oggi .nt-cal__b:focus-visible .nt-cal__porta,.nt-cal__c--persa .nt-cal__b:focus-visible .nt-cal__porta{transform:rotateY(-16deg)}
.nt-cal__c--aperta .nt-cal__porta{transform:rotateY(-98deg);opacity:0;visibility:hidden;
  transition:transform .7s cubic-bezier(.3,1.25,.45,1),opacity .3s ease .4s,visibility 0s linear .7s}
.nt-cal__c--aperta .nt-cal__b:hover .nt-cal__dentro img{transform:scale(1.08)}
.nt-cal__dentro img{transition:transform .25s ease}
.nt-cal__c--subito .nt-cal__porta,.nt-cal__c--subito.nt-cal__c--aperta .nt-cal__porta{transition:none}

.nt-cal__piede{display:flex;align-items:center;gap:1rem;padding:.4rem 1.5rem 1.4rem}
.nt-cal__barra{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.nt-cal__barra i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#E9B949,#F6D58A);transition:width .6s ease}
.nt-cal__conta{font-size:.82rem;color:rgba(255,240,230,.82);white-space:nowrap}
.nt-cal__conta b{color:#F6D58A}
@media (max-width:600px){
  #nt-calendario{place-items:start center;padding:1.6rem .8rem}
  .nt-cal__testa{padding:2.8rem 1.1rem .9rem}
  .nt-cal__griglia{grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;padding:.3rem 1rem .9rem}
  .nt-cal__piede{flex-direction:column;align-items:stretch;gap:.5rem;padding:.3rem 1rem 1.2rem}
  .nt-cal__barra{flex:none;width:100%}
  .nt-cal__conta{text-align:center;white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  #nt-calendario,.nt-cal__card,.nt-mini--oggi,.nt-cal__c--oggi .nt-cal__b,.nt-av-area--da-aprire .nt-av-area__cta span{animation:none}
  .nt-cal__porta,.nt-av-area,.nt-av-area__mini{transition:none}
  .nt-cal__testa .nt-neve{display:none}
}

/* ── L'area personale con le feste (js · vestiArea) ───────────────────────
   Fascia del profilo con la neve che scende, una cresta di neve in alto,
   bagliori rosso e oro al posto di quelli azzurri, il cappellino
   sull'avatar; onde, titoli delle schede e voce di menu scelta in oro e
   rosso; nelle schede bianche icone e link in rosso. */
html.tema-natale .ac-profilebar{border-color:rgba(246,213,138,.28);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V13C228 9 218 10 206 13C194 18 184 10 172 12C160 14 150 19 138 14C126 9 116 16 104 13C92 10 82 18 70 15C58 12 48 7 36 12C24 17 12 16 0 13Z' fill='%23F5FAFF'/%3E%3C/svg%3E") 0 0/240px 18px repeat-x,
    linear-gradient(160deg,#0F2B48 0%,#0B2138 100%)}
html.tema-natale .ac-profilebar::before{background:radial-gradient(circle,rgba(200,32,47,.26) 0%,transparent 68%)}
html.tema-natale .ac-profilebar::after{background:radial-gradient(circle,rgba(246,213,138,.16) 0%,transparent 70%)}
.nt-area-neve{position:absolute!important;inset:0;z-index:0!important;pointer-events:none;overflow:hidden}
.nt-area-neve .nt-fiocco{animation-name:nt-area-cade,nt-ondeggia}
@keyframes nt-area-cade{from{transform:translateY(0)}to{transform:translateY(300px)}}
html.tema-natale .ac-profilebar .eyebrow{color:#F6D58A}
/* il cappello sull'avatar: tutto in % della scatola (= l'avatar), cosi' sta
   sulla testa a ogni misura. Falda larga ~64% dell'avatar, centrata, sulla
   fronte a ~24% dall'alto; leggermente inclinato, il pompon cade a destra. */
.nt-ava-box{position:relative;display:block;width:-webkit-fit-content;width:fit-content;flex-shrink:0;line-height:0;animation:wa-float 3.2s ease-in-out infinite;will-change:transform}
html.tema-natale .ac-profilebar .nt-ava-box .ac-hero__avatar{animation:none}
.nt-area-cappello{position:absolute;z-index:3;left:12.4%;top:-31.9%;width:93%;height:auto;pointer-events:none;
  transform-origin:40.5% 81.5%;transform:rotate(-8deg);filter:drop-shadow(0 3px 3px rgba(5,18,32,.35))}
html.tema-natale .ac-score__label{color:#F6D58A}
html.tema-natale .ac-score__label .site-icon{color:#F6D58A}
html.tema-natale .ac-score__value,
html.tema-natale .ac-sec--onwave h2.ac-panel__title:not(.ac-panel__title--logo){
  background-image:linear-gradient(100deg,#FFF6DC 0%,#FBE3A6 16%,#F6D58A 36%,#E9B949 52%,#F6D58A 68%,#FBE3A6 84%,#FFF6DC 100%)}
html.tema-natale .ac-score__value{filter:drop-shadow(0 2px 10px rgba(233,185,73,.4))}
html.tema-natale .ac-profilebar .ac-chip .site-icon{color:#F6D58A}
html.tema-natale .ac-nav__item[aria-current="page"]{background:linear-gradient(135deg,#C8202F 0%,#9E1824 100%);
  box-shadow:inset 0 0 0 1px rgba(246,213,138,.45),0 6px 14px rgba(158,24,36,.25)}
html.tema-natale .ac-nav__item:hover:not([aria-current="page"]){background:#FBF1F1;color:#9E1824}
html.tema-natale .ac-card__label .site-icon{color:#C8202F}
html.tema-natale .ac-card__go,html.tema-natale .ac-card a.ac-card__go{color:#B01826}
html.tema-natale .ac-mini-progress__fill{background:linear-gradient(90deg,#C8202F,#E9B949)}
html.tema-natale .ac-avatar-spot{background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V13C228 9 218 10 206 13C194 18 184 10 172 12C160 14 150 19 138 14C126 9 116 16 104 13C92 10 82 18 70 15C58 12 48 7 36 12C24 17 12 16 0 13Z' fill='%23F5FAFF'/%3E%3C/svg%3E") 0 0/240px 16px repeat-x,
    linear-gradient(160deg,#0F2B48 0%,#0B2138 100%)}
html.tema-natale .ac-avatar-spot__go{color:#F6D58A}
@media (prefers-reduced-motion:reduce){.nt-area-neve{display:none}.nt-ava-box{animation:none}}

/* ── Le intestazioni delle altre pagine (js · testate) ────────────────────
   Consigli, carrello, Club (fasce) e contatti, recensioni (riquadri): la
   striscia di paesaggio d'inverno in fondo, stelle, neve; i riquadri anche
   la cresta di neve in alto. I contenuti stanno sopra la scena. */
.nt-testata{position:relative;overflow:hidden}
.nt-testata>.nt-scena{position:absolute!important;inset:0;z-index:1}
.nt-testata>.nt-sopra{position:relative;z-index:2}
.nt-testata>.page-hero__inner{z-index:2}
.nt-scena--testata .nt-stelle{inset:0 0 45% 0}
.nt-striscia{position:absolute;left:0;bottom:0;width:100%;height:clamp(92px,12vw,168px);display:block}
.nt-testata--riquadro .nt-striscia{height:clamp(44px,5.4vw,74px);opacity:.85}
.nt-testata--bassa .nt-striscia{height:clamp(64px,7.4vw,108px)}
/* il Club: col tema la ghirlanda del menu scende sul titolo, gli si fa posto */
html.tema-natale .club-hero{padding-top:calc(var(--promo-h,40px) + var(--nav-h,76px) + 3.4rem)}
/* poggia sulla cresta delle onde innevate: le onde sono alte ~17% della larghezza e la cresta sta al 37% dall alto */
.page-hero.nt-testata .nt-striscia{bottom:10vw}
/* col paesaggio sopra l'onda serve piu' posto sotto il titolo */
html.tema-natale .page-hero.nt-testata{padding-bottom:calc(clamp(5rem,16vw,18rem) + 5vw)}
.nt-testata__cresta{position:absolute;left:0;right:0;top:0;height:16px;z-index:3;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V13C228 9 218 10 206 13C194 18 184 10 172 12C160 14 150 19 138 14C126 9 116 16 104 13C92 10 82 18 70 15C58 12 48 7 36 12C24 17 12 16 0 13Z' fill='%23F5FAFF'/%3E%3C/svg%3E") 0 0/240px 16px repeat-x}
.nt-scena--testata .nt-fiocco{animation-name:nt-area-cade,nt-ondeggia}
/* le parole in evidenza e le scritte piccole sopra i titoli, in oro */
html.tema-natale .page-hero h1 em{background:linear-gradient(100deg,#FFF6DC 0%,#F6D58A 45%,#E9B949 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
html.tema-natale .page-hero .eyebrow,html.tema-natale .cch-hero__eyebrow,html.tema-natale .rv-hero__eyebrow{color:#F6D58A!important}
html.tema-natale .cch-hero__title em{color:#F6D58A;background:none;-webkit-text-fill-color:#F6D58A}
@media (prefers-reduced-motion:reduce){.nt-scena--testata .nt-neve{display:none}}

/* testi su due livelli (style.css · .lead--livelli): accento delle feste */
html.tema-natale .lead--livelli{--lead-accento:#C8202F}
html.tema-natale .lead--livelli.lead--scuro{--lead-accento:var(--nt-oro-c)}