/* ============================================================
   SHERBETH 2026 — componenti pagine interne + effetti speciali
   ============================================================ */

/* ---------- sipario di apertura ---------- */
.curtain{
  position:fixed;inset:0;z-index:999;background:var(--grad-hero);
  display:grid;place-items:center;transition:transform .9s cubic-bezier(.76,0,.24,1) .15s, opacity .3s ease .95s;
}
.curtain img{width:min(320px,60vw);animation:curtainLogo 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes curtainLogo{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.curtain.off{transform:translateY(-101%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){.curtain{display:none}}

/* ---------- cursore personalizzato ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:998;border-radius:50%;will-change:transform}
.cursor-dot{width:8px;height:8px;background:var(--magenta);margin:-4px 0 0 -4px}
.cursor-ring{
  width:38px;height:38px;border:2px solid rgba(199,0,117,.55);margin:-19px 0 0 -19px;
  transition:width .25s,height .25s,margin .25s,border-color .25s,background .25s;
}
.cursor-ring.hovering{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(199,0,117,.08);border-color:var(--pink)}
@media (hover:none), (prefers-reduced-motion: reduce){.cursor-dot,.cursor-ring{display:none}}

/* ---------- coriandoli / sprinkles ---------- */
.sprinkles{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---------- page hero (pagine interne) ---------- */
.page-hero{
  position:relative;background:var(--grad-hero);color:#fff;overflow:hidden;
  padding:calc(var(--header-h) + clamp(48px,8vw,90px)) 0 clamp(48px,7vw,80px);
}
.page-hero .hero-swirl{width:min(46vw,560px);right:-10%;top:-30%}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-bottom:18px}
.breadcrumb a{color:#fff;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline;text-underline-offset:4px}
.breadcrumb i{font-style:normal;opacity:.6}
.page-hero h1{font-size:clamp(30px,4.6vw,58px);font-weight:900;letter-spacing:-.015em;max-width:20ch;position:relative;z-index:2}
.page-hero h1 em{font-family:var(--font-accent);font-style:italic;font-weight:600}
.page-hero .lead{font-size:clamp(15px,1.6vw,19px);max-width:64ch;opacity:.94;margin-top:14px;position:relative;z-index:2;font-weight:500}
/* La frase per chi cerca biglietti (/webapp/): secondo lead, un filo piu' leggero del primo. */
.page-hero .lead--biglietti{margin-top:12px;font-weight:400;opacity:.9}
.page-hero .hero-ctas{margin:26px 0 0;position:relative;z-index:2}

/* ---------- sub-navigation sticky ---------- */
.subnav{
  position:sticky;top:var(--header-h);z-index:60;background:var(--header-bg);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;
}
.subnav::-webkit-scrollbar{display:none}
.subnav-inner{display:flex;gap:6px;width:max-content;margin-inline:auto;padding:10px 4vw}
.subnav a{
  font-size:13px;font-weight:700;color:var(--text);text-decoration:none;padding:9px 16px;
  border-radius:999px;white-space:nowrap;transition:.2s;
}
.subnav a:hover{background:var(--blush-2);color:var(--magenta)}
.subnav a.active{background:var(--magenta);color:#fff}

/* ---------- timeline programma ---------- */
.day-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.day-tab{
  font-family:var(--font-sans);font-size:14px;font-weight:800;cursor:pointer;border:2px solid var(--line);
  background:var(--surface);color:var(--text);border-radius:18px;padding:14px 22px;transition:.25s;text-align:left;min-width:150px;
}
.day-tab small{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.day-tab.active{background:var(--magenta);border-color:var(--magenta);color:#fff}
.day-tab.active small{color:#fff}
.day-panel{display:none}
.day-panel.active{display:block;animation:heroIn .5s cubic-bezier(.2,.7,.2,1) both}
.tl{position:relative;padding-left:34px;display:flex;flex-direction:column;gap:18px}
.tl::before{content:"";position:absolute;left:10px;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(var(--pink),var(--magenta))}
.tl-item{position:relative;background:var(--surface);border:1px solid var(--card-border);border-radius:18px;padding:18px 22px;box-shadow:0 4px 16px rgba(199,0,117,.06)}
.tl-item::before{content:"";position:absolute;left:-30px;top:24px;width:15px;height:15px;border-radius:50%;background:var(--magenta);border:3px solid #fff;box-shadow:0 0 0 3px var(--blush-2)}
.tl-time{font-size:12.5px;font-weight:800;color:var(--magenta);letter-spacing:.06em}
.tl-item h3,.tl-item h4{font-size:16.5px;font-weight:800;margin:4px 0 2px}
.tl-place{font-size:12.5px;color:var(--muted);font-weight:600}
.tl-item p{font-size:13.5px;color:var(--muted);margin-top:6px}
.tl-item .ev-tag{margin-left:auto}
.tl-head{display:flex;align-items:flex-start;gap:12px}

/* ---------- mappa festival ---------- */
.map-wrap{
  background:var(--surface);border:1px solid var(--card-border);border-radius:26px;box-shadow:var(--shadow-card);
  padding:clamp(14px,2vw,26px);overflow:hidden;
}
.map-svg{width:100%;height:auto;display:block;border-radius:16px}
.map-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;font-size:13px;font-weight:700;color:var(--muted)}
.map-legend span{display:inline-flex;align-items:center;gap:8px}
.map-legend i{width:14px;height:14px;border-radius:50%;display:inline-block}

/* La planimetria vera, con sopra i luoghi del CRM.
   `position:relative` sulla tela e le puntine in percentuale: restano al loro posto
   quando l'immagine cambia dimensione, senza una riga di JS che le riposizioni. */
.map-plan{position:relative;line-height:0;border-radius:16px;overflow:hidden}
.map-plan__img{width:100%;height:auto;display:block}
/* translate(-50%,-50%) mette il CENTRO della puntina sul punto: senza, ogni luogo
   risulterebbe spostato in basso a destra di mezza puntina. */
.map-plan__pin{
  position:absolute;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;
  background:var(--pin,#C70075);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);display:block;
}
/* Il nome compare al passaggio: sessanta nomi stampati insieme coprirebbero la piazza. */
.map-plan__nome{
  position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%);background:#1A1416;color:#fff;
  font-size:11px;font-weight:700;line-height:1.2;white-space:nowrap;padding:3px 7px;border-radius:5px;
  opacity:0;pointer-events:none;transition:opacity .12s;
}
.map-plan__pin:hover .map-plan__nome{opacity:1}
.map-plan__schema{font-size:13px;color:var(--muted);margin:0 0 14px}

.stand-pin{cursor:pointer;transition:transform .2s}
.stand-pin:hover{transform:scale(1.25)}
/* TRE COLONNE anche qui. Era `auto-fill minmax(210px)`, cioe' «quante ce ne
   stanno»: su uno schermo da 1400 ne faceva SEI, e l'ultima riga restava mezza
   vuota. E' lo stesso difetto del catalogo degli stand, in un'altra pagina: per
   questo correggerne una sola non bastava. */
.stand-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:34px;align-items:start}
@media (max-width:1100px){.stand-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.stand-list{grid-template-columns:minmax(0,1fr)}}
/* Il titolo del banco: e' il cartello che si cerca in piazza, non una riga. */
.stand-item__nome{display:block;font-size:19px;font-weight:900;line-height:1.25;margin-bottom:4px;overflow-wrap:anywhere}
@media (max-width:560px){.stand-item__nome{font-size:17px}}
.stand-item{
  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;font-size:13.5px;font-weight:600;
}
/*
   LA PASTIGLIA COL NUMERO DEL BANCO — e perche' il selettore e' figlio diretto.

   Rilievo del committente, 6 ottobre 2026: «sul sito ha sistemato la mappa, ma il nome
   dei gelatieri no, e' da sistemare».

   Era scritto `.stand-item b`, che colpisce QUALUNQUE <b> dentro la riga del banco. Da
   quando il box dei gelatieri vive dentro `.stand-item` (rilievo 8, stesso giorno), li'
   dentro c'e' un altro <b>: il NOME DEL MAESTRO. Si prendeva addosso tutta la pastiglia
   — quadrato di 38x38, fondo magenta, testo bianco — e «Daniela Martellotta e Gregorio
   Mignozzi», che vuole 339 pixel, finiva spiaccicato in 38 e tagliato da `overflow:hidden`.
   Misurato nel browser, non dedotto.

   `.stand-gel-txt b` non se ne accorgeva perche' dichiara solo corpo e peso: su display,
   larghezza, altezza e sfondo non aveva niente da opporre, e vinceva la pastiglia.

   Il figlio diretto del capo-riga e' l'unico <b> che deve essere una pastiglia, ed e' il
   solo che il modello stampa li' (page-mappa.php). Il giorno che qualcuno ne annidasse un
   altro, questo selettore non lo tocca — che e' esattamente cio' che e' mancato oggi.
*/
.stand-item__capo > b{
  flex-shrink:0;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--magenta),var(--pink));color:#fff;font-size:13px;font-weight:800;
}
.stand-item__capo small{display:block;color:var(--muted);font-weight:600;font-size:11.5px}

/* ──────────────────────────────────────────────────────────────────────────────
   LA RIGA DELL'ELENCO CON DENTRO IL BOX DEL GELATIERE (rilievo 8, 6 ottobre 2026).

   `.stand-item` nasce come riga orizzontale: numero e nome affiancati. Col box dentro
   serve una colonna, o il box finirebbe a fianco del numero e stretto in un terzo di
   larghezza. Si cambia solo la direzione, e il resto della riga resta quello di prima.

   Il titolo e il numero stanno in una riga loro, che e' il collegamento: dentro il box
   ci sono gia' pulsanti e collegamenti, e annidarli dentro un altro collegamento non e'
   HTML valido — il browser spezza l'annidamento e i comandi di dentro smettono di
   rispondere.
   ────────────────────────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────────────────────
   UNO STAND PER RIGA. (committente, 6 ottobre 2026)

   Parole sue: «lo stand uno per riga, ovviamente».

   Il difetto, misurato prima di correggere su una pagina di prova a 1485px: l'elenco
   sotto la piantina e' una griglia a TRE colonne, e dentro ogni colonna da 383px ci
   finivano le quattro gelaterie del banco con la loro scheda intera. Risultato: una
   gelateria larga 105 pixel e alta 860, e la riga «Posizione Stand: 1A» larga ZERO
   pixel e alta 333 — cioe' una lettera per riga.

   Il controllo del DOM avrebbe detto «tutto presente, niente tagliato», e sarebbe stato
   VERO: il testo non era tagliato, era impilato una lettera alla volta. E' la quarta
   volta oggi che un controllo automatico dice bene di una pagina rotta a occhio.

   Tre colonne vanno bene per una riga che dice numero e nome. Non per una riga che
   contiene quattro schede: li' lo stand prende tutta la larghezza, e sono le GELATERIE
   dentro a dividersi lo spazio — quattro, poi due, poi una.
   ────────────────────────────────────────────────────────────────────────────── */
.stand-list--righe{grid-template-columns:minmax(0,1fr)}
.stand-item--con-box{flex-direction:column;align-items:stretch;gap:10px}
/* `auto-fit` con un minimo di 250px: quante ne stanno le decide la larghezza vera, non
   un numero scritto a mano che sbaglia sul primo schermo di misura diversa. */
.stand-item--con-box .stand-gelatieri{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;align-items:start}
.stand-item__capo{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.stand-item__capo:hover .stand-item__nome,
.stand-item__capo:focus-visible .stand-item__nome{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.stand-item--con-box .stand-item__nome{margin-bottom:0}

/* ---------- pacchetti token ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price-card{
  background:var(--surface);border:2px solid var(--line);border-radius:26px;padding:34px 30px;text-align:center;
  display:flex;flex-direction:column;gap:10px;transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;
}
.price-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-card-hover)}
.price-card.featured{border-color:var(--magenta);box-shadow:0 18px 50px rgba(199,0,117,.18)}
.price-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--magenta);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:7px 16px;white-space:nowrap;
}
.price-card h3{font-size:16px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.price-tokens{font-size:clamp(40px,4vw,56px);font-weight:900;color:var(--magenta);line-height:1}
.price-tokens i{font-style:normal;font-size:16px;font-weight:700;color:var(--muted);display:block;margin-top:4px}
.price-eur{font-family:var(--font-accent);font-style:italic;font-size:19px;color:var(--text)}
.price-card ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:12px 0 18px;font-size:13.5px;color:var(--muted)}
.price-card .btn{margin-top:auto}

/* ---------- albo d'oro ---------- */
.albo{display:flex;flex-direction:column;gap:14px;max-width:760px}
.albo-row{
  display:flex;align-items:center;gap:18px;background:rgba(255,255,255,.05);
  border:1px solid rgba(231,59,138,.25);border-radius:18px;padding:18px 24px;
}
.albo-row .year{font-size:22px;font-weight:900;color:var(--pink);min-width:74px;font-variant-numeric:tabular-nums}
.albo-row .who{font-size:16px;font-weight:800;color:#fff}
.albo-row .what{font-family:var(--font-accent);font-style:italic;font-size:14.5px;color:rgba(255,255,255,.75)}

/* ---------- filtri maestri ---------- */
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.filter-chip{
  font-family:var(--font-sans);font-size:13px;font-weight:800;cursor:pointer;border:2px solid var(--line);
  background:var(--surface);color:var(--text);border-radius:999px;padding:10px 20px;transition:.2s;
}
.filter-chip:hover{border-color:var(--pink);color:var(--magenta)}
.filter-chip.active{background:var(--magenta);border-color:var(--magenta);color:#fff}
.m-card.hide{display:none}

/* ---------- shop ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.shop-card{
  background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);
  border:1px solid var(--card-border);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;
}
.shop-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.shop-img{height:190px;display:grid;place-items:center;font-size:64px}
.shop-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.shop-body h3{font-size:16.5px;font-weight:800}
.shop-body p{font-size:13px;color:var(--muted)}
.shop-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:14px}
.shop-price{font-size:20px;font-weight:900;color:var(--magenta)}
.shop-badge{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--blush-2);color:var(--magenta);border-radius:999px;padding:5px 12px}

/* ---------- form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--font-sans);font-size:14.5px;padding:14px 18px;border-radius:16px;
  border:1.5px solid var(--line);background:var(--surface);color:var(--text);
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--pink);outline-offset:1px;border-color:var(--magenta)}
.form-card{background:var(--surface);border:1px solid var(--card-border);border-radius:26px;padding:clamp(26px,4vw,44px);box-shadow:var(--shadow-card)}
/* IL GRAZIE DOPO L'INVIO (8 ottobre 2026).
   Era una riga di testo centrata e nient'altro: dopo aver compilato un modulo
   si meritava qualcosa che dicesse «fatto» senza doverlo leggere. Il segno si
   disegna da solo — cerchio e poi spunta — e chi ha chiesto meno movimento lo
   trova gia' finito, non assente. */
.form-ok{display:none;text-align:center;padding:clamp(30px,4.5vw,52px) 20px}
.form-ok.show{display:block}
.form-ok .big{font-size:56px;line-height:1;margin-bottom:12px}
.form-ok__segno{display:block;width:64px;height:64px;margin:0 auto 20px}
/* `--blush-2` qui NON si vede: nel chiaro e' rgb(251,228,241) su un fondo
   rgb(255,244,250) — lo stesso colore — e nello scuro e' piu' scuro del
   riquadro. Misurato sulla pagina resa, non dedotto dal nome della variabile.
   `--link` esiste solo nel tema scuro e nel chiaro ricade sul magenta: cosi'
   l'anello si vede in tutti e due, senza gridare piu' della spunta. */
.form-ok__segno circle{fill:none;stroke:var(--link, var(--magenta));stroke-width:3;opacity:.32}
.form-ok__segno path{fill:none;stroke:var(--magenta);stroke-width:5;
  stroke-linecap:round;stroke-linejoin:round}
.form-ok h3{font-size:clamp(21px,2.5vw,27px);font-weight:900;margin-bottom:10px}
.form-ok p{font-size:14.5px;line-height:1.6;color:var(--muted);max-width:44ch;margin:0 auto}

@media (prefers-reduced-motion:no-preference){
  /* 183 e' la circonferenza di r=29 (2 pi r = 182,2), 40 la lunghezza della
     spunta: due numeri misurati, non scelti a occhio — se non combaciano il
     tratto parte gia' visibile o non arriva in fondo. */
  .form-ok.show .form-ok__segno circle{stroke-dasharray:183;stroke-dashoffset:183;
    animation:ok-cerchio .55s cubic-bezier(.65,0,.35,1) forwards}
  .form-ok.show .form-ok__segno path{stroke-dasharray:40;stroke-dashoffset:40;
    animation:ok-spunta .32s .46s cubic-bezier(.65,0,.35,1) forwards}
}
@keyframes ok-cerchio{to{stroke-dashoffset:0}}
@keyframes ok-spunta{to{stroke-dashoffset:0}}

/* Nel riquadro della newsletter il modulo sparisce e resterebbe il titolo da
   solo a sinistra con una riga a destra: sbilenco. A invio fatto il riquadro
   diventa una colonna sola e il grazie sta in mezzo. Dove `:has()` non c'e',
   il grazie resta nella sua colonna: meno bello, mai rotto. */
.news-box:has(.form-ok.show){grid-template-columns:1fr}
.news-box:has(.form-ok.show) > div:first-child{display:none}

/* ---------- login area riservata ---------- */
.login-tabs{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap}
.login-tab{
  font-family:var(--font-sans);font-size:13.5px;font-weight:800;cursor:pointer;border:2px solid var(--line);
  background:var(--surface);color:var(--text);border-radius:999px;padding:11px 22px;transition:.2s;
}
.login-tab.active{background:var(--magenta);border-color:var(--magenta);color:#fff}
.login-box{max-width:520px;margin-inline:auto}

/* ---------- cta band riusabile ---------- */
.cta-band{
  background:var(--grad-hero);border-radius:28px;color:#fff;position:relative;overflow:hidden;
  padding:clamp(36px,5vw,60px);display:flex;flex-wrap:wrap;align-items:center;gap:26px;justify-content:space-between;
}
.cta-band h2{font-size:clamp(24px,3vw,38px);font-weight:900;max-width:24ch;letter-spacing:-.01em}
.cta-band h2 em{font-family:var(--font-accent);font-style:italic;font-weight:600}
.cta-band p{font-size:15px;opacity:.92;max-width:52ch;margin-top:8px}
.cta-band .swirl-bg{position:absolute;right:-8%;top:-40%;width:min(34vw,380px);opacity:.12;pointer-events:none}

/* ---------- contatti ---------- */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:44px}

/* ---------- press download ---------- */
.dl-list{display:flex;flex-direction:column;gap:12px}
.dl-item{
  display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:16px 20px;text-decoration:none;color:var(--text);font-weight:700;font-size:14.5px;transition:.2s;
}
.dl-item:hover{border-color:var(--pink);box-shadow:var(--shadow-card)}
.dl-item small{display:block;font-weight:600;color:var(--muted);font-size:12px}
.dl-item .arrow{margin-left:auto;color:var(--magenta);font-weight:800}

/* ---------- responsive extra ---------- */
@media (max-width:1080px){
  .price-grid,.shop-grid,.contact-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .price-grid,.shop-grid,.contact-cards,.form-grid{grid-template-columns:1fr}
  /* Date del programma: striscia orizzontale scorrevole, tab a misura del testo.
     Prima erano schiacciate a flex:1/min-width:0 (~47px) e le lettere della data
     uscivano dal riquadro. Ora ogni tab e' larga quanto il suo testo, su una riga,
     e la striscia scorre in orizzontale. */
  .day-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;gap:8px;margin-bottom:24px;padding-bottom:8px}
  .day-tab{flex:0 0 auto;min-width:0;padding:10px 16px;white-space:nowrap}
  .subnav-inner{padding:10px 16px}
}

/* ---------- foto maestri (auto-aggancio per slug) ---------- */
.m-top{overflow:hidden}
.m-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-top .m-ava,.m-top .m-flag{position:relative;z-index:2}
.m-top .m-flag{position:absolute}

/* ── Gli eventi del festival (pagina /eventi/, 7 settembre 2026) ─────────────
   La riga e' ORA + CORPO + eventuale gettone: tre colonne su schermo largo, una
   sola incolonnata sul telefono. L'ora resta a sinistra perche' e' la chiave con
   cui si scorre un programma — si cerca «alle sei», non «il laboratorio». */
.ev-giorno{font-size:22px;font-weight:800;margin:32px 0 12px;text-transform:capitalize}
.ev-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ev-riga{display:grid;grid-template-columns:104px 1fr auto;gap:14px;align-items:start;
  background:#fff;border:2px solid #e9e9ec;border-radius:14px;padding:14px 16px}
.ev-ora{font-weight:800;color:var(--magenta);font-size:14px;letter-spacing:.02em}
.ev-corpo{display:flex;flex-direction:column;gap:3px}
.ev-corpo strong{font-size:16px;font-weight:800;line-height:1.3}
.ev-corpo em{font-family:var(--font-accent);font-style:italic;font-size:14px;color:var(--muted)}
.ev-corpo small{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
@media (max-width:640px){
  .ev-riga{grid-template-columns:1fr;gap:6px}
  .ev-ora{font-size:13px}
}

/* ── La scheda del maestro (7 settembre 2026) ────────────────────────────────
   Il nome e' il grilletto e deve sembrarlo senza sembrare un link: stesso peso
   del titolo che era prima, e la sottolineatura arriva col passaggio del dito o
   del cursore. */
.m-apri{all:unset;cursor:pointer;font:inherit;color:inherit;display:inline;text-align:left}
.m-apri:hover,.m-apri:focus-visible{text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:3px;color:var(--magenta)}
.m-apri:focus-visible{outline:3px solid var(--magenta);outline-offset:3px;border-radius:4px}
.m-card{cursor:pointer}

.m-scheda{border:0;border-radius:18px;padding:0;max-width:760px;width:calc(100% - 32px);
  box-shadow:0 24px 60px rgba(35,31,32,.28)}
.m-scheda::backdrop{background:rgba(35,31,32,.62)}
.m-scheda__chiudi{position:sticky;top:0;display:flex;justify-content:flex-end;z-index:3}
.m-scheda__chiudi button{all:unset;cursor:pointer;font-size:30px;line-height:1;padding:10px 16px;
  color:#fff;text-shadow:0 2px 8px rgba(35,31,32,.6)}
.m-scheda__corpo{margin-top:-52px}

/* La foto: larga quanto la scheda, alta quanto basta, e mai stirata. */
.m-scheda__foto{display:block;width:100%;height:min(46vh,340px);object-fit:cover}
.m-scheda__ava{height:200px;display:grid;place-items:center;background:var(--magenta);color:#fff;
  font-family:var(--font-accent);font-style:italic;font-size:64px}
.m-scheda__testo{padding:22px 26px 30px}
.m-scheda__testo h2{font-size:26px;font-weight:800;line-height:1.2;margin:0}
.m-scheda__gelateria{font-family:var(--font-accent);font-style:italic;font-size:19px;
  color:var(--magenta);margin:4px 0 0}
.m-scheda__luogo{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:10px 0 0}
.m-scheda__chip{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.m-scheda__gusto{font-family:var(--font-accent);font-style:italic;font-size:17px;margin:16px 0 0}
.m-scheda__testo p{font-size:15px;line-height:1.6;margin:12px 0 0;color:#3a3538}

@media (max-width:640px){
  .m-scheda{width:calc(100% - 16px);border-radius:14px}
  .m-scheda__foto{height:min(38vh,240px)}
  .m-scheda__testo{padding:18px 18px 26px}
  .m-scheda__testo h2{font-size:22px}
}

/* ── La promessa in home (7 settembre 2026) ──────────────────────────────────
   Due frasi: la prima toglie l'aspettativa piccola, la seconda mette quella
   grande. Vanno su due righe anche su schermo largo — attaccate diventano una
   riga sola che non nega piu' niente. */
/* Allineata a sinistra come h1, sottotitolo e CTA (prima era centrata da
   margin:auto e "ballava" rispetto al resto della Hero — ordine P1.3). */
/* Attaccata al sottotitolo: tra i due blocchi non ci va una riga vuota. */
.hero-promessa{max-width:60ch;margin:0 0 30px;font-size:19px;line-height:1.5;color:#fff}
/* `inline` e non `block` (committente, 9 ottobre 2026): le due frasi scorrono
   di seguito e vanno a capo dove glielo chiede la riga, non fra «il gelato.» e
   «Vieni a vivere». Restano due elementi perche' il grassetto deve cadere sulla
   seconda: e' li' che sta la promessa. */
.hero-promessa span{display:inline;opacity:.85}
.hero-promessa strong{display:inline;font-weight:800}
@media (max-width:640px){ .hero-promessa{font-size:17px;margin-top:6px} }

/* Azioni evento (ordine E, 18/09): chip + "Prenota posto" deep-link alla WebApp */
.ev-azioni{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ev-prenota{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-weight:800;font-size:13px;color:#fff;background:var(--magenta);border-radius:999px;padding:8px 15px;text-decoration:none;transition:filter .15s}
.ev-prenota:hover,.ev-prenota:focus-visible{filter:brightness(1.08)}
@media (max-width:640px){.ev-azioni{align-items:flex-start}}

/* Premio — Giuria Tecnica 2026: schede con ritratto (placeholder finche' non arrivano le foto) */
.giuria-card{text-align:center}
.giuria-card .media-frame{width:120px;height:120px;margin:0 auto 14px;border-radius:16px;overflow:hidden;aspect-ratio:auto}
/* I RITRATTI DELLA GIURIA TECNICA SONO PIU’ GRANDI (committente, 7 ottobre 2026): sono
   il motivo per cui la sezione esiste, e a 120px la faccia si perdeva.
   Il ritratto adesso riempie la scheda per intero, meno il margine interno: non e' piu'
   un tondo appoggiato dentro, e' la testata della scheda.
   La misura uguale per tutte NON la fa il foglio di stile ma il RITAGLIO: le sei fotografie
   sono state ritagliate quadrate, col volto al 55% del lato e il suo centro al 42% dall'alto,
   quindi `object-fit:cover` non taglia piu' niente e la griglia non puo' disallinearsi.
   Solo le schede --con-bio: le tre della Giuria Critica non hanno ancora un ritratto, e
   ingrandire un quadrato vuoto lo rende solo piu' vuoto. */
.giuria-card--con-bio .media-frame{width:100%;height:auto;aspect-ratio:1/1;max-width:420px;margin:0 auto 16px;border-radius:22px}
/* SUL TELEFONO LA FOTO SI FERMA. A una colonna (sotto i 640px) la scheda e' larga
   quanto il contenitore: a 640px il lato interno e' 533px, e un ritratto da 533px
   spinge il nome e il ruolo sotto il bordo dello schermo. Col tetto a 300px il
   ritratto resta grande e le due righe che dicono CHI E' restano visibili senza
   scorrere. */
@media (max-width:640px){.giuria-card--con-bio .media-frame{max-width:300px}}
.giuria-card .media-frame img{width:100%;height:100%;object-fit:cover;display:block}
/* Il nome del giurato: MAIUSCOLO e centrato come il sottopancia (28/09).
   Restava a sinistra per un motivo non evidente: .svc h3 e' un `display:flex`
   — serve alle card con l'icona accanto al titolo — e un contenitore flex non
   obbedisce al `text-align:center` della card. Qui il titolo e' solo testo,
   quindi torna `block` e si centra da solo. */
.giuria-card h3{margin:0 0 6px;display:block;font-size:.95rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;line-height:1.3}
/* IL RUOLO. Il colore era var(--ink-soft,#6b5b66) e `--ink-soft` NON ESISTE in nessun foglio:
   valeva sempre il letterale #6b5b66, anche sul tema scuro, dove su --surface #271A25 fa
   2,59:1 — sotto qualunque soglia. Si passa a --muted, che il tema ridefinisce: 6,33:1 sul
   chiaro e 7,89:1 sullo scuro. */
.giuria-card .t-caption{margin:0;color:var(--muted)}
/* MAGENTA E CORSIVO per la Giuria Tecnica (committente, 7 ottobre 2026).
   Il colore e’ --link, che e’ il magenta della tavolozza: var(--magenta) #C70075 sul chiaro
   e #EF6BA8 sullo scuro — non un magenta nuovo, e soprattutto non lo STESSO magenta nei due
   temi, perche’ #C70075 su fondo notte sarebbe illeggibile.
   Misurato: 5,70:1 sul chiaro, 5,73:1 sullo scuro.
   Il corsivo piccolo si legge peggio del tondo, quindi il peso sale a 600 e il corpo a
   .9rem: e’ il gradino in piu’ che il corsivo si mangia. */
.giuria-card--con-bio .t-caption{color:var(--link);font-style:italic;font-weight:600;font-size:.9rem;line-height:1.45}

/* Contatti — immagine luogo + social in linea */
.ct-mappa-img{margin-bottom:22px;border-radius:18px;overflow:hidden}
.socials-inline{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:8px}
.socials-inline a{font-weight:700;text-decoration:none;color:var(--magenta,#d6006e)}
.socials-inline a:hover{text-decoration:underline}

/* ---------- Gallery #18: filtri + piastrelle con immagine + visore ---------- */
.gallery-filtri{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.g-filtro{font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;border:2px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:9px 18px;transition:.2s}
.g-filtro:hover{border-color:var(--magenta);color:var(--magenta)}
.g-filtro.active{background:var(--magenta);border-color:var(--magenta);color:#fff}
.g-tile{border:0;padding:14px;cursor:pointer;background:#1a1416;font:inherit;text-align:left}
.g-tile.is-hidden{display:none}
.g-tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.g-tile:hover .g-tile-img{transform:scale(1.06)}
.g-tile-cap{position:relative;z-index:2;color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.g-tile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 55%)}

/* LA GALLERY A MATTONCINI (mandato #46, 4 ottobre 2026).
   Prima era una griglia a righe fisse di 150 px: ogni foto veniva ritagliata
   per stare nella sua casella, e una verticale perdeva meta' inquadratura.
   Qui le colonne sono vere colonne: ogni foto tiene le SUE proporzioni e si
   incastra sotto la precedente, come i mattoni. Niente libreria, niente
   JavaScript che misura: lo fa il browser, e quindi non c'e' nessuno sfarfallio
   al caricamento.
   Le regole valgono solo dentro .gallery-masonry, cosi' le piastrelle della
   home, che usano le stesse classi, restano come sono. */
.gallery-masonry{columns:4 250px;column-gap:14px}
.gallery-masonry .g-tile{display:block;width:100%;padding:0;margin:0 0 14px;
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  position:relative;border-radius:18px;overflow:hidden;background:#1a1416}
/* L'immagine qui NON e' di sfondo ritagliato: e' il mattone, e detta l'altezza. */
.gallery-masonry .g-tile-img{position:static;inset:auto;display:block;width:100%;height:auto;object-fit:initial}
.gallery-masonry .g-tile-cap{position:absolute;left:14px;right:14px;bottom:12px}
.gallery-masonry .g-tile.is-hidden{display:none}
@media (max-width:900px){.gallery-masonry{columns:3 200px}}
@media (max-width:600px){.gallery-masonry{columns:2 140px;column-gap:10px}
  .gallery-masonry .g-tile{margin-bottom:10px;border-radius:14px}
  .gallery-masonry .g-tile-cap{left:10px;right:10px;bottom:9px;font-size:11px}}
/* Chi ha chiesto meno animazioni non vede l'ingrandimento al passaggio. */
@media (prefers-reduced-motion:reduce){.gallery-masonry .g-tile-img{transition:none}
  .gallery-masonry .g-tile:hover .g-tile-img{transform:none}}
.gallery-vuota{color:var(--muted);font-weight:600;text-align:center;padding:30px 0}

/* visore: overlay a tutto schermo, comandi ai lati */
.glb{position:fixed;inset:0;z-index:1000;background:rgba(12,6,10,.92);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,60px);backdrop-filter:blur(4px)}
.glb[hidden]{display:none}
.glb-figure{margin:0;max-width:min(1100px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:12px;align-items:center}
.glb-img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#1a1416}
.glb-cap{color:#fff;font-size:14px;font-weight:600;text-align:center;opacity:.92}
.glb-close,.glb-nav{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;cursor:pointer;border-radius:999px;display:grid;place-items:center;transition:background .2s}
.glb-close:hover,.glb-nav:hover{background:var(--magenta)}
.glb-close{top:18px;right:18px;width:46px;height:46px;font-size:28px;line-height:1}
.glb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:32px;line-height:1}
.glb-prev{left:14px}
.glb-next{right:14px}
@media (max-width:600px){
  .glb-nav{width:44px;height:44px;font-size:26px}
  .glb-prev{left:8px}.glb-next{right:8px}
}

/* ---------- Atlante #18: anteprima maestri dal vivo + nota stand/mappa ---------- */
.atl-maestri{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.atl-mae{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--card-border,var(--line));border-radius:16px;padding:12px 14px;text-decoration:none;color:var(--text);transition:transform .2s,box-shadow .2s,border-color .2s}
.atl-mae:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(199,0,117,.10);border-color:var(--magenta)}
.atl-mae-foto{flex-shrink:0;width:60px;height:60px;border-radius:14px;overflow:hidden;background:var(--blush-2,#f6e3ee);display:grid;place-items:center}
.atl-mae-foto img{width:100%;height:100%;object-fit:cover;display:block}
.atl-mae-ava{font-weight:800;color:var(--magenta);font-size:18px}
.atl-mae-info{display:flex;flex-direction:column;min-width:0}
.atl-mae-info b{font-size:14.5px;font-weight:800;line-height:1.2}
.atl-mae-info small{font-size:12px;color:var(--muted)}
.atl-mae-gel{font-style:italic}
.atl-stand-nota{margin-top:34px;background:var(--blush-2,#f6e3ee);border-radius:18px;padding:22px 24px;max-width:820px;margin-inline:auto;text-align:center}
.atl-stand-nota p{margin:0 0 10px;font-weight:600;color:var(--text)}
@media (max-width:900px){.atl-maestri{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.atl-maestri{grid-template-columns:1fr}}

/* ============================================================
   SHOP / WooCommerce #18 — grafica «premium», solo catalogo.
   Tutto sotto .woocommerce: non tocca il resto del sito, e la
   logica di carrello/cassa/pagamento (page.php) non passa di qui.
   ============================================================ */
.woo-wrap{padding-block:clamp(36px,5vw,64px)}
/* barra risultati + ordinamento */
.woocommerce .woocommerce-result-count{color:var(--muted);font-weight:600;font-size:13.5px;margin:0 0 22px}
.woocommerce .woocommerce-ordering select{font:inherit;font-weight:600;border:2px solid var(--line);border-radius:999px;padding:8px 16px;background:var(--surface);color:var(--text)}
/* griglia prodotti */
.woocommerce ul.products{display:grid !important;grid-template-columns:repeat(4,1fr);gap:26px;margin:0;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none !important}
.woocommerce ul.products li.product{width:auto !important;margin:0 !important;float:none !important;background:var(--surface);border:1px solid var(--card-border,var(--line));border-radius:22px;overflow:hidden;padding:0 0 20px;box-shadow:0 6px 22px rgba(199,0,117,.06);transition:transform .25s,box-shadow .25s}
.woocommerce ul.products li.product:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(199,0,117,.12)}
.woocommerce ul.products li.product a img{margin:0 0 16px;border-radius:0;aspect-ratio:1/1;object-fit:cover;width:100%}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:16px;font-weight:800;line-height:1.25;padding:0 18px;color:var(--text)}
.woocommerce ul.products li.product .price{display:block;padding:6px 18px 0;color:var(--magenta);font-weight:800;font-size:16px}
.woocommerce ul.products li.product .price del{color:var(--muted);font-weight:600;opacity:.7}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce ul.products li.product .onsale{background:var(--magenta);color:#fff;border-radius:999px;min-height:auto;min-width:auto;padding:4px 12px;font-weight:800;top:12px;right:12px;margin:0;left:auto}
/* pulsanti (catalogo) — non e' la cassa, solo «aggiungi al carrello» dal loop */
.woocommerce ul.products li.product .button,
.woocommerce a.button.add_to_cart_button,
.woocommerce .single_add_to_cart_button{background:var(--magenta) !important;color:#fff !important;border-radius:999px !important;font-weight:800 !important;padding:12px 22px !important;margin:14px 18px 0 !important;transition:filter .2s,transform .2s}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:hover{filter:brightness(.94);transform:translateY(-1px)}
.woocommerce ul.products li.product .added_to_cart{display:inline-block;margin:10px 18px 0;font-weight:700;color:var(--magenta)}
/* scheda singolo prodotto */
.woocommerce div.product .product_title{font-size:clamp(26px,3.4vw,40px);font-weight:900;letter-spacing:-.01em}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--magenta);font-weight:800;font-size:24px}
.woocommerce div.product .woocommerce-tabs ul.tabs li{border-radius:12px 12px 0 0}
.woocommerce span.onsale{background:var(--magenta)}
.woocommerce .single_add_to_cart_button{margin-left:0 !important}
/* messaggi Woo con i colori del marchio */
.woocommerce-message,.woocommerce-info{border-top-color:var(--magenta)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--magenta)}
@media (max-width:1024px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (max-width:420px){.woocommerce ul.products{grid-template-columns:1fr}}

/* ---------- WebApp #19: griglia delle funzioni vere ---------- */
.wa-funzioni{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* IL NUMERO AL POSTO DELL'ICONA (8 ottobre 2026).
   Stesso congegno delle schede della Carta dei Valori in Home: Fraunces magenta,
   grande e smorzato, dietro il testo. E' del tema, si vede uguale su ogni telefono,
   e in una griglia di dodici dice anche quante cose si possono fare.
   Sta in ALTO A DESTRA e non a sinistra: a sinistra avrebbe rifatto la colonna che
   facevano le icone, cioe' lo stesso ingombro con un altro disegno. */
.wa-fn{position:relative;overflow:hidden;display:flex;align-items:center;min-height:78px;
  background:var(--surface);border:1px solid var(--card-border,var(--line));border-radius:14px;
  padding:16px 56px 16px 18px;font-weight:700;font-size:14.5px;line-height:1.3;color:var(--text);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.wa-fn:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(199,0,117,.10);border-color:var(--magenta)}
.wa-fn-n{position:absolute;top:-4px;right:10px;font-family:var(--font-accent),serif;font-size:44px;
  font-weight:800;line-height:1;color:var(--magenta);opacity:.14;pointer-events:none}
@media (max-width:900px){.wa-funzioni{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.wa-funzioni{grid-template-columns:1fr}}

/* Hero CTA — la primaria («Acquista Token») domina, le secondarie restano ben visibili (mandato committente 19/09) */
.hero-ctas .btn-hero-cta{font-size:16.5px;font-weight:800;padding:18px 42px;box-shadow:0 12px 34px rgba(35,31,32,.28)}
.hero-ctas .btn-hero-cta:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(35,31,32,.36)}
/* le due secondarie: contorno pieno, leggermente più contenute della primaria ma nette */
.hero-ctas .btn-outline-w{font-weight:700;border-width:2px}

/* ============================================================
   MARKETPLACE — Maestri + Stand dal CRM (mandato committente 19/09)
   ============================================================ */
.mk-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:30px}
.mk-search{position:relative;flex:1 1 280px;display:flex;align-items:center}
/* Senza la lente il campo non deve piu' lasciarle il posto: 44 px a sinistra
   erano l'incavo dell'icona, e restando avrebbero spostato il testo per niente. */
.mk-search input{width:100%;font:inherit;font-size:15px;padding:13px 18px;border:2px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text)}
.mk-search input:focus{outline:none;border-color:var(--magenta)}
.mk-chips{display:flex;flex-wrap:wrap;gap:9px}
.mk-chip{font:inherit;font-size:13px;font-weight:700;cursor:pointer;border:2px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:9px 16px;display:inline-flex;align-items:center;gap:7px;transition:.18s}
.mk-chip::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--g,var(--magenta));flex:none}
.mk-chip[data-mk-gruppo="0"]::before{display:none}
.mk-chip:hover{border-color:var(--g,var(--magenta))}
.mk-chip.active{background:var(--g,var(--magenta));border-color:var(--g,var(--magenta));color:#fff}
.mk-chip.active::before{background:#fff}

.mk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mk-card{background:var(--surface);border:1px solid var(--card-border,var(--line));border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 6px 20px rgba(199,0,117,.06);transition:transform .22s,box-shadow .22s}
.mk-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(199,0,117,.12)}
.mk-card.is-hidden{display:none}
/* Sfondo BIANCO come sulla WebApp: le foto dei gelatieri sono ritratti su
   fondo bianco, non su un riquadro magenta. */
.mk-foto{position:relative;aspect-ratio:1/1;background:#fff;display:grid;place-items:center;overflow:hidden}
.mk-foto img{width:100%;height:100%;object-fit:contain;display:block}
.mk-ava{color:var(--magenta);background:#fff;width:100%;height:100%;display:grid;place-items:center;font-family:var(--font-accent),serif;font-size:44px;font-weight:600}
.mk-flag{position:absolute;left:12px;top:12px;font-size:22px;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.mk-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:4px;flex:1}
.mk-gruppo{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.03em;color:#fff;background:var(--g,var(--magenta));border-radius:999px;padding:3px 10px;margin-bottom:6px}
.mk-nome{margin:0;font-size:16.5px;font-weight:800;line-height:1.2}
.mk-apri{font:inherit;font-size:inherit;font-weight:800;color:var(--text);background:none;border:0;padding:0;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .2s}
.mk-apri:hover{text-decoration-color:var(--magenta);color:var(--magenta)}
.mk-gelateria{margin:0;font-style:italic;color:var(--muted);font-weight:600;font-size:13.5px}
.mk-luogo{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.mk-meta{margin-top:auto;padding-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.mk-gusto,.mk-stand{font-size:11.5px;font-weight:700;border-radius:8px;padding:4px 9px;background:var(--blush-2,#f6e3ee);color:var(--magenta)}
.mk-stand{background:var(--ink,#231f20);color:#fff}
.mk-vuoto{text-align:center;color:var(--muted);font-weight:600;padding:36px 0}

/* Stand — sezioni per gruppo colorato */
.stand-gruppo{margin-bottom:42px}
.stand-gruppo.is-hidden{display:none}
.stand-gruppo-t{display:flex;align-items:center;gap:12px;font-size:clamp(20px,2.6vw,28px);font-weight:900;margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid var(--line)}
.stand-gruppo-dot{width:16px;height:16px;border-radius:50%;background:var(--g,var(--magenta));flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--g,var(--magenta)) 22%,transparent)}

/* Scheda (dialog) */
.mk-scheda{border:0;border-radius:22px;padding:0;max-width:640px;width:calc(100vw - 36px);box-shadow:0 30px 80px rgba(0,0,0,.4);background:var(--surface);color:var(--text)}
.mk-scheda::backdrop{background:rgba(12,6,10,.62);backdrop-filter:blur(3px)}
.mk-scheda__x{position:sticky;top:0;display:flex;justify-content:flex-end;padding:10px;z-index:2}
.mk-scheda__x button{width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.08);color:var(--text);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}
.mk-scheda__x button:hover{background:var(--magenta);color:#fff}
/* La croce e' DISEGNATA, non scritta: il carattere «×» non si vedeva.
   Vedi sherbeth_croce_chiudi() in inc/setup.php. */
.ico-x{display:block}
.mk-scheda__corpo{padding:0 28px 30px}
.mk-scheda__foto{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:16px;margin-bottom:18px}
.mk-scheda__ava{width:96px;height:96px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),var(--magenta));color:#fff;font-family:var(--font-accent),serif;font-size:40px;margin-bottom:16px}
.mk-scheda__testo h2{font-size:clamp(22px,3vw,30px);font-weight:900;margin:6px 0 2px}
.mk-scheda__gel{font-style:italic;color:var(--muted);font-weight:600;margin:0 0 4px}
.mk-scheda__luogo{color:var(--muted);margin:0 0 12px}
.mk-scheda__chip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.mk-scheda__testo .m-chip{font-size:12px;font-weight:700;border-radius:8px;padding:5px 10px;background:var(--blush-2,#f6e3ee);color:var(--magenta)}
.mk-scheda__testo .m-chip.stand{background:var(--ink,#231f20);color:#fff}
.mk-scheda__testo p{font-size:14.5px;line-height:1.6;color:var(--text);margin:0 0 10px}
.mk-scheda__web,.mk-scheda__map{font-weight:700;color:var(--magenta);text-decoration:none}
.mk-scheda__web:hover,.mk-scheda__map:hover{text-decoration:underline}

@media (max-width:1024px){.mk-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.mk-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:460px){.mk-grid{grid-template-columns:1fr}}

/* Cornice Sherbeth su OGNI foto gelatiere (card, popup, home). Il file va in
   assets/img/cornice-gelatiere.png: finche' non c'e', lo sfondo mancante non
   mostra nulla (nessun riquadro rotto). */
.mk-foto::after{content:"";position:absolute;inset:0;background:url("../img/cornice-gelatiere.webp") center/100% 100% no-repeat;pointer-events:none;z-index:3}
.mk-scheda__fotobox{border-radius:16px;overflow:hidden;margin-bottom:18px}

/* HOME — «Cosa trovi»: 4 in fila, arioso (meno "boxed"), full-width */
#cosa-trovi > .container{max-width:1280px}
.ct-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.ct-card{display:flex;flex-direction:column;background:transparent;border:0;padding:0}
.ct-media{border-radius:18px;overflow:hidden;margin-bottom:16px;box-shadow:0 10px 28px rgba(199,0,117,.10)}
.ct-card h3{font-size:18px;font-weight:800;margin:0 0 8px}
.ct-card p{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 14px}
/* I quattro richiami di «Cosa trovi» sono PULSANTI, non parole sottolineate
   (richiesta 25/09). `align-self:flex-start` li tiene larghi quanto la loro
   scritta invece che quanto la card; `max-width:100%` fa andare a capo
   l'etichetta sui telefoni invece di farla uscire dalla card.
   Il colore NON e' fissato qui: in tema scuro il magenta pieno su fondo nero
   si legge male, e il tema lo sostituisce gia' con var(--link). Il bordo
   segue il testo con currentColor, quindi resta accordato da solo. */
.ct-card .card-link{margin-top:auto;align-self:flex-start;max-width:100%;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:999px;border:2px solid currentColor;
  font-size:14px;font-weight:800;line-height:1.2;
  color:var(--magenta);background:transparent;text-decoration:none;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.ct-card .card-link:hover{background:var(--magenta);border-color:var(--magenta);color:#fff;
  text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 22px rgba(199,0,117,.28)}
.ct-card .card-link:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}
@media (max-width:1000px){.ct-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (max-width:520px){.ct-grid{grid-template-columns:1fr}}

/* HOME — «Maestri gelatieri & Stand»: banda scenografica scura */
.ms-band{background:radial-gradient(120% 80% at 85% -10%,rgba(231,59,138,.35),transparent 55%),linear-gradient(160deg,#241019,#170d13);color:#fff;position:relative;overflow:hidden}
.ms-band .eyebrow{color:var(--pink)}
.ms-band .sec-title{color:#fff}
.ms-band .sec-lead{color:rgba(255,255,255,.86)}
.ms-claim{font-family:var(--font-accent),serif;font-style:italic;font-size:clamp(21px,3vw,31px);text-align:center;margin:2px auto 26px;max-width:24ch;line-height:1.15}
.ms-legenda{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-bottom:30px}
.ms-leg{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700}
.ms-leg::before{content:"";width:13px;height:13px;border-radius:50%;background:var(--g,#fff);box-shadow:0 0 0 4px color-mix(in srgb,var(--g,#fff) 26%,transparent)}
/* Home: 4 gelatieri visibili, scroll orizzontale su DUE file; su mobile una
   sola fila che scorre. grid-auto-flow:column riempie in colonne (2 righe). */
.ms-band .ms-grid{
  display:grid;grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
  grid-auto-columns:calc((100% - 3*20px)/4);gap:20px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--pink) transparent;
}
/* Carosello: frecce ai lati (nascoste dove non c'e' il mouse, si scorre a dito) */
.ms-carousel{position:relative}
.ms-arrow{position:absolute;top:calc(50% - 7px);transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:var(--magenta);font-size:26px;line-height:1;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.28);display:grid;place-items:center;transition:transform .15s,opacity .15s}
.ms-arrow:hover{transform:translateY(-50%) scale(1.08)}
.ms-arrow[disabled]{opacity:.35;cursor:default}
.ms-prev{left:-10px}.ms-next{right:-10px}
@media (max-width:760px){.ms-arrow{display:none}}
.ms-band .ms-grid > .mk-card{scroll-snap-align:start}
.ms-band .ms-grid::-webkit-scrollbar{height:8px}
.ms-band .ms-grid::-webkit-scrollbar-thumb{background:var(--pink);border-radius:8px}
.ms-band .ms-grid::-webkit-scrollbar-track{background:rgba(255,255,255,.12);border-radius:8px}
.ms-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:38px}
@media (max-width:1024px){.ms-band .ms-grid{grid-auto-columns:calc((100% - 2*18px)/3);gap:18px}}
@media (max-width:760px){.ms-band .ms-grid{grid-template-rows:auto;grid-auto-columns:88%}}
@media (max-width:460px){.ms-band .ms-grid{grid-auto-columns:90%}}

/* Gusto in gara in evidenza sulla card (dato in arrivo dal CRM) */
.mk-gustobox{margin-top:auto;display:flex;flex-direction:column;gap:1px;background:linear-gradient(135deg,var(--blush-2,#f6e3ee),#fff);border:1px solid color-mix(in srgb,var(--magenta) 22%,transparent);border-radius:12px;padding:9px 12px}
.mk-gustobox-l{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--magenta)}
.mk-gustobox-v{font-family:var(--font-accent),serif;font-style:italic;font-size:16px;font-weight:600;color:var(--text);line-height:1.2}
.mk-gustobox.is-soon{background:var(--blush-2,#f6e3ee)}
.mk-gustobox.is-soon .mk-gustobox-v{font-style:normal;font-family:inherit;font-size:12.5px;color:var(--muted);font-weight:600}
.mk-card .mk-meta{margin-top:10px}

/* STAND — schede stand (come marketplace/stand): gruppo colorato + gelatieri */
.stand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stand-card{background:var(--surface);border:1px solid var(--card-border,var(--line));border-left:5px solid var(--g,var(--magenta));border-radius:16px;padding:18px 20px;box-shadow:0 6px 20px rgba(199,0,117,.06);scroll-margin-top:96px}
/* `space-between` aveva senso finche' i figli erano due COSE DIVERSE — il titolo
   a sinistra, la pastiglia del gruppo a destra. Tolto il gruppo, sparava il
   titolo all'estremo destro, lontano dal proprio numero: misurato a x=1174 su
   una scheda larga 1400. Adesso numero e titolo stanno insieme, a sinistra,
   perche' sono la stessa informazione. */
.stand-card-h{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap}
/* IL NOME VERO DELLO STAND, in grande: e' il cartello che si cerca in piazza. */
.stand-num{font-size:24px;font-weight:900;line-height:1.2;overflow-wrap:anywhere}
.stand-numero{flex:none;display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:10px;background:var(--g,var(--magenta));color:#fff;font-size:17px;font-weight:900;font-variant-numeric:tabular-nums}
@media (max-width:560px){.stand-num{font-size:20px}}
.stand-position{display:block;font-size:14px;font-weight:800;line-height:1.4;color:var(--text);margin:6px 0;overflow-wrap:anywhere}
.map-stand-maker{display:block;margin-top:10px;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.stand-grp{font-size:11px;font-weight:800;color:#fff;background:var(--g,var(--magenta));border-radius:999px;padding:3px 10px}
.stand-zona{color:var(--muted);font-size:12.5px;margin:6px 0 12px}
.stand-ospita-l{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.stand-gelatieri{display:flex;flex-direction:column;gap:8px}
.stand-gel{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);background:var(--blush-2,#f6e3ee);border-radius:12px;padding:8px 10px;transition:.18s}
.stand-gel:hover{background:color-mix(in srgb,var(--g,var(--magenta)) 15%,var(--blush-2,#f6e3ee))}
/* La riga che apre la scheda e' un <button>: senza questo eredita il carattere
   e i bordi del browser e non somiglia piu' alle altre righe. */
button.stand-gel{width:100%;border:0;font:inherit;text-align:left;cursor:pointer}
button.stand-gel:focus-visible{outline:3px solid var(--g,var(--magenta));outline-offset:2px}
.stand-gel-foto{flex:none;width:42px;height:42px;border-radius:10px;overflow:hidden;background:#fff;display:grid;place-items:center}
.stand-gel-foto img{width:100%;height:100%;object-fit:cover}
/* IL MONOGRAMMA di chi non ha la foto: due lettere nel colore del marchio.
   Sono due gelaterie su sessanta, e nessuna ha nemmeno il logo. Un quadrato
   grigio farebbe sembrare la pagina abbandonata proprio dove si guarda una
   persona. */
.stand-gel-ava{display:grid;place-items:center;width:100%;height:100%;font-size:15px;font-weight:900;letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,#E3046F,#a8125b)}
/* LA NAZIONALITA', scritta accanto alla bandierina: una bandierina da sola non
   la legge chi non la riconosce, e un lettore di schermo non la legge affatto. */
.stand-gel-paese{display:block;margin-top:3px;font-size:12px;font-weight:700;color:var(--muted);overflow-wrap:anywhere}
.stand-gel-txt{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.stand-gel-txt b{font-size:13.5px;font-weight:800}
.stand-gel-txt small{font-size:11.5px;color:var(--muted);font-style:italic}
.stand-gel-go{margin-left:auto;color:var(--g,var(--magenta));font-weight:800;flex:none}
.stand-soon{color:var(--muted);font-size:12.5px;font-style:italic;margin:0}
.stand-card.stand-target{outline:3px solid var(--g,var(--magenta));outline-offset:3px}
@media (max-width:900px){.stand-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stand-grid{grid-template-columns:1fr}}

/* MAPPA — puntine stand (cliccabili, colore del gruppo) + POI + legenda */
.map-plan__pin--stand{cursor:pointer;width:20px;height:20px;z-index:2}
.map-plan__pin--stand:hover{transform:translate(-50%,-50%) scale(1.35);z-index:6}
.map-plan__pin--poi{width:14px;height:14px;background:#fff;border:3px solid var(--pin,#52525b)}
.map-legenda-t{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.map-legenda-row{display:flex;flex-wrap:wrap;gap:14px 18px}
.map-leg{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text)}
.map-leg::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--g,var(--magenta));flex:none}
a.stand-item{color:inherit;text-decoration:none;transition:transform .18s,border-color .18s}
a.stand-item:hover{border-color:var(--magenta);transform:translateY(-2px)}

/* ============================================================
   EVENTI — card + scheda (dal CRM), home / eventi
   ============================================================ */
.ev-giorno{font-size:clamp(18px,2.4vw,24px);font-weight:900;margin:34px 0 18px;text-transform:capitalize}
.ev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ev-card{background:var(--surface);border:1px solid var(--card-border,var(--line));border-radius:18px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;box-shadow:0 6px 20px rgba(199,0,117,.06);transition:transform .22s,box-shadow .22s}
.ev-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(199,0,117,.12)}
.ev-card:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.ev-card-img{position:relative;aspect-ratio:16/9;overflow:hidden}
.ev-card-img .media-frame,.ev-card-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.ev-cat{position:absolute;left:12px;top:12px;background:var(--magenta);color:#fff;font-size:11px;font-weight:800;letter-spacing:.03em;border-radius:999px;padding:4px 11px;z-index:2}
.ev-card-body{padding:15px 17px 18px;display:flex;flex-direction:column;gap:5px;flex:1}
/* QUANDO E DOVE SONO LE DUE COSE CHE SI CERCANO. (committente, 9 ottobre 2026)
   Stavano a 12,5 px, cioe' PIU' PICCOLE della descrizione (13 px): il dato che
   si va a cercare era il piu' piccolo della scheda. Adesso il giorno sta a 15 e
   il luogo a 14, sotto il titolo (16,5) che resta il piu' grande.
   Al luogo serviva anche il colore: in grigio smorzato si leggeva come una nota
   a margine, e invece e' meta' della risposta. */
.ev-card-when{font-size:15px;font-weight:800;color:var(--magenta);margin:0}
.ev-card-t{font-size:16.5px;font-weight:800;margin:2px 0;line-height:1.25}
.ev-card-loc{font-size:14px;font-weight:600;color:var(--text);opacity:.8;margin:0}
.ev-card-desc{font-size:13px;color:var(--muted);margin:4px 0 0;line-height:1.5}
.ev-card-foot{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ev-chip{font-size:11px;font-weight:800;border-radius:8px;padding:4px 9px}
.ev-free{background:#e6f5ec;color:#1e7f4f}
.ev-price{background:var(--ink,#231f20);color:#fff}
.ev-book{background:var(--blush-2,#f6e3ee);color:var(--magenta)}
/* scheda evento (dialog) */
.ev-scheda{border:0;border-radius:22px;padding:0;max-width:720px;width:calc(100vw - 36px);background:var(--surface);color:var(--text);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.ev-scheda::backdrop{background:rgba(12,6,10,.62);backdrop-filter:blur(3px)}
.ev-scheda .mk-scheda__x{position:sticky;top:0;display:flex;justify-content:flex-end;padding:10px;z-index:2}
.ev-scheda .mk-scheda__x button{width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.10);color:var(--text);font-size:24px;cursor:pointer;display:grid;place-items:center}
.ev-scheda .mk-scheda__x button:hover{background:var(--magenta);color:#fff}
.ev-scheda__corpo{padding:0 26px 28px}
.ev-scheda__img{position:relative;border-radius:16px;overflow:hidden;margin-bottom:16px;aspect-ratio:16/9}
.ev-scheda__img .media-frame,.ev-scheda__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
/* Come sulla scheda fuori (committente, 9 ottobre 2026): quando e dove sono le
   due cose che si cercano, e dentro il dialogo stavano a 13 px e 14,5 — cioe'
   come il testo corrente e meno del titolo di tre volte. */
.ev-scheda__when{font-size:16px;font-weight:800;color:var(--magenta);margin:0 0 5px}
.ev-scheda__testo h2{font-size:clamp(22px,3vw,30px);font-weight:900;margin:2px 0 4px}
.ev-scheda__sub{font-style:italic;color:var(--muted);margin:0 0 6px}
.ev-scheda__loc{font-size:15px;font-weight:600;color:var(--text);opacity:.82;margin:0 0 12px}
.ev-scheda__testo p{font-size:14.5px;line-height:1.6;margin:0 0 10px}
.ev-scheda__rel-l{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 0 10px}
.ev-relatori{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:8px}
.ev-rel{display:flex;align-items:center;gap:10px}
.ev-rel-foto{width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--blush-2,#f6e3ee);display:grid;place-items:center;flex:none}
.ev-rel-foto img{width:100%;height:100%;object-fit:cover}
.ev-rel-ava{font-weight:800;color:var(--magenta)}
.ev-rel-txt{display:flex;flex-direction:column;line-height:1.2}
.ev-rel-txt b{font-size:13.5px;font-weight:800}
.ev-rel-txt small{font-size:11.5px;color:var(--muted)}
/* La biografia di chi parla (7 ottobre 2026): per intero nel documento, a schermo quattro righe
   e un tasto che apre il resto — il tasto compare SOLO se il testo e' davvero piu' lungo (JS). */
.ev-rel--bio{align-items:flex-start}
.ev-rel--bio .ev-rel-foto{margin-top:2px}
.ev-rel-bio{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--muted);font-weight:400}
.ev-rel-bio[data-bio-piega]:not(.ev-rel-bio--aperta){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.ev-rel-bio-tasto{align-self:flex-start;margin-top:4px;min-height:44px;padding:10px 14px;border:1px solid var(--magenta);border-radius:999px;background:#fff;color:var(--magenta);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.ev-rel-bio-tasto:hover{background:var(--blush-2,#f6e3ee)}
.ev-rel-bio-tasto[hidden]{display:none}
.ev-relatori:has(.ev-rel--bio){flex-direction:column;gap:18px}

.ev-scheda__book{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
@media (max-width:900px){.ev-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ev-grid{grid-template-columns:1fr}}

/* Eventi — calendario per giorno (come il programma) + date responsive */
/* DUE FILE CENTRATE (committente, 9 ottobre 2026): sopra «Tutti» e «Sherbeth
   Off», sotto i giorni. `align-items:center` sulla colonna e `justify-content`
   su ogni riga: senza il primo, le righe restano larghe quanto la pagina e
   centrarle dentro non basta a centrarle fra loro. */
.ev-daytabs{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:26px}
.ev-daytabs__riga{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:100%}
.ev-daytab{font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;border:2px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:10px 18px;transition:.18s;text-transform:capitalize}
.ev-daytab:hover{border-color:var(--magenta);color:var(--magenta)}
.ev-daytab.active{background:var(--magenta);border-color:var(--magenta);color:#fff}
.ev-daytab .dt-short{display:none}
.ev-card.is-hidden{display:none}
.ev-vuoto-filtro{text-align:center;color:var(--muted);font-weight:600;padding:30px 0}
@media (max-width:640px){
  /* Su telefono scorre SOLO la riga dei giorni: la prima ha due pulsanti e ci
     sta, e farla scorrere l'avrebbe spostata dal centro. */
  .ev-daytabs{gap:8px}
  .ev-daytabs__riga--giorni{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
    padding-bottom:4px;justify-content:flex-start;width:100%}
  .ev-daytabs__riga--giorni::-webkit-scrollbar{display:none}
  .ev-daytab{white-space:nowrap;flex:none;padding:9px 14px}
  .ev-daytab .dt-full{display:none}
  .ev-daytab .dt-short{display:inline}
}

/* Festival — «in numeri»: quattro card sulla stessa riga, d'effetto */
.numeri-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.numeri-card{background:var(--surface);border:1px solid var(--card-border,var(--line));border-radius:20px;padding:30px 20px;text-align:center;position:relative;overflow:hidden;box-shadow:0 8px 26px rgba(199,0,117,.08);transition:transform .25s,box-shadow .25s}
.numeri-card::before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:linear-gradient(90deg,var(--pink),var(--magenta))}
.numeri-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(199,0,117,.16)}
.numeri-card .num{display:block;font-family:var(--font-accent),serif;font-weight:600;font-size:clamp(30px,4vw,48px);line-height:1;color:var(--magenta);letter-spacing:-.01em}
.numeri-card>span{display:block;margin-top:10px;font-size:13px;font-weight:700;color:var(--muted);line-height:1.35}
@media (max-width:900px){.numeri-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.numeri-grid{grid-template-columns:repeat(2,1fr);gap:12px}.numeri-card{padding:22px 12px}}

/* HOME — «Contemporary Artisanal Gelato»: concetto centrale, banda editoriale */
.cag-feature{position:relative;overflow:hidden;isolation:isolate;color:#fff;min-height:clamp(460px,64vh,660px);display:flex;align-items:center;background:#170d13}
/* LA FILIGRANA. Grande, in basso, e ESCE DAL BORDO: un marchio intero e centrato
   diventa un secondo logo e si mette in concorrenza col titolo, che dice le stesse
   parole. Tagliato dal bordo si legge come quello che e' — una filatura sotto il
   testo, non un'immagine da guardare.
   All'11% si vede e non grida. Sotto il 7% sparisce sugli schermi poco contrastati;
   sopra il 15% comincia a disturbare la lettura del paragrafo. */
.cag-feature-filigrana{position:absolute;left:-4%;bottom:-13%;width:118%;max-width:none;
  height:auto;opacity:.11;z-index:-1;pointer-events:none;user-select:none}
/* Sul telefono la sezione si allunga e il testo scende: la filigrana si stringe e
   scivola piu' in basso, per non finire dietro il paragrafo. */
@media (max-width:760px){
  .cag-feature-filigrana{left:-10%;bottom:-7%;width:150%;opacity:.09}
}
.cag-feature-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,rgba(158,15,98,.985) 0%,rgba(199,0,117,.96) 55%,rgba(199,0,117,.80) 100%)}
.cag-feature-swirl{position:absolute;right:-6%;top:-18%;width:min(46vw,540px);opacity:.16;z-index:-1;pointer-events:none}
.cag-feature-inner{position:relative;z-index:1;max-width:760px;padding-block:clamp(60px,9vw,110px)}
/* L'occhiello era BIANCO su pillola rosa chiara: non si leggeva. Ora e'
   magenta su pillola bianca, ben staccato dal fondo magenta della sezione. */
.cag-feature .eyebrow{color:var(--magenta);background:#fff;opacity:1;font-weight:800;letter-spacing:.16em}
/* Sottotitolo sotto il titolone */
.cag-feature-sub{font-family:var(--font-accent),serif;font-style:italic;font-weight:600;
  font-size:clamp(19px,2.4vw,28px);line-height:1.25;color:#fff;opacity:.97;margin:14px 0 0}
.cag-feature-t{font-family:var(--font-accent),serif;font-weight:600;font-size:clamp(40px,7vw,86px);line-height:1.02;letter-spacing:-.01em;margin:12px 0 0}
.cag-feature-p{font-size:clamp(16px,2vw,21px);line-height:1.6;max-width:60ch;margin:22px 0 0;font-weight:500;opacity:.96}
.cag-feature-cta{margin:32px 0 0}

/* Pagina Contemporary Artisanal Gelato: fascia-citazione + chip direzioni */
.cag-quote-band{background:linear-gradient(135deg,#E4007C,#9E0F62);color:#fff;text-align:center}
.cag-quote{font-family:var(--font-accent),serif;font-weight:600;font-size:clamp(24px,4.4vw,52px);line-height:1.12;max-width:20ch;margin:0 auto;letter-spacing:-.01em}
.cag-quote em{font-style:italic;opacity:.95}
.cag-dir{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cag-dir-chip{font-size:13px;font-weight:800;color:var(--magenta);background:var(--blush-2,#f6e3ee);border-radius:999px;padding:8px 16px}

/* ============================================================
   CARTA DEI VALORI — sezione home + pagina dedicata
   ============================================================ */

/* Fascia home */
.valori-band{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--blush,#fbeef5) 0%,transparent 60%)}
.valori-band .valori-swirl{position:absolute;right:-60px;top:-40px;width:340px;opacity:.06;pointer-events:none;transform:rotate(8deg)}
.valori-head{max-width:760px}
.valori-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:40px}
.valore-card{position:relative;background:var(--surface);border:1px solid var(--card-border);border-radius:var(--radius);padding:24px 18px 20px;box-shadow:var(--shadow-card);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.valore-card:hover{transform:translateY(-6px);box-shadow:0 16px 38px rgba(0,0,0,.10)}
/* Tolta l'emoji, il numero resta solo a tenere la scheda: a .12 era un'ombra
   accanto a un'icona, adesso e' l'unico segno e puo' farsi vedere. */
.valore-card .vn{position:absolute;top:2px;right:12px;font-family:var(--font-accent),serif;font-size:52px;font-weight:800;line-height:1;color:var(--magenta);opacity:.16}
.valore-card h3{font-size:16px;margin:0 0 6px;letter-spacing:.2px}
.valore-card p{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0}
@media (max-width:1080px){.valori-cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.valori-cards{grid-template-columns:repeat(2,1fr);gap:12px}
  .valore-card .vn{font-size:44px}}

/* Pagina Carta dei Valori */
.carta-intro{max-width:820px;margin-inline:auto;text-align:center}
.carta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:52px}
.carta-card{position:relative;background:var(--surface);border:1px solid var(--card-border);border-radius:var(--radius);padding:32px 32px 30px 38px;box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;gap:6px;transition:transform .25s ease,box-shadow .25s ease}
.carta-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(0,0,0,.11)}
.carta-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--magenta),color-mix(in srgb,var(--magenta) 45%,#fff))}
/* Senza l'emoji il numero regge la scheda da solo: da .10 a .15. */
.carta-card .vn{position:absolute;top:16px;right:24px;font-family:var(--font-accent),serif;font-size:68px;font-weight:800;line-height:1;color:var(--magenta);opacity:.15}
.carta-card h3{font-size:23px;margin:8px 0 0;letter-spacing:-.01em}
.carta-card .carta-tag{font-family:var(--font-accent),serif;font-style:italic;font-size:16px;color:var(--magenta);margin:2px 0 0;line-height:1.25}
.carta-card p{margin:10px 0 0;color:var(--text);line-height:1.62}
@media (max-width:760px){.carta-grid{grid-template-columns:1fr}
  .carta-card{padding:26px 24px 24px 30px}.carta-card .vn{font-size:56px}}

/* Banda di chiusura editoriale */
.carta-band{background:linear-gradient(135deg,#E4007C,#9E0F62);color:#fff;border-radius:var(--radius);padding:clamp(34px,5vw,60px);text-align:center;margin-top:64px}
.carta-band h2{color:#fff;font-family:var(--font-accent),serif;font-weight:600;font-size:clamp(24px,3.4vw,40px);margin:0 0 14px;line-height:1.14}
.carta-band p{color:rgba(255,255,255,.92);max-width:60ch;margin:0 auto;line-height:1.6}

/* ============================================================
   MAGAZINE — chip di filtro + articolo singolo
   ============================================================ */
.mag-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.mag-chip{font:inherit;font-size:13px;font-weight:700;cursor:pointer;border:2px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:9px 18px;transition:.18s}
.mag-chip:hover{border-color:var(--magenta);color:var(--magenta)}
.mag-chip.active{background:var(--magenta);border-color:var(--magenta);color:#fff}
.mag-vuoto{grid-column:1/-1;text-align:center;color:var(--muted);padding:30px 0}
.mag-card .read{display:inline-block;margin-top:10px;font-weight:800;color:var(--magenta);font-size:13px}
.mag-article{max-width:820px;margin-inline:auto}
.mag-article .media-frame{margin-bottom:30px}
.mag-article-body p{line-height:1.7;margin:0 0 18px;color:var(--text);font-size:16px}
.mag-article-body p:first-child::first-letter{font-family:var(--font-accent),serif;font-size:3.4em;line-height:.8;float:left;margin:6px 12px 0 0;color:var(--magenta)}

/* ---------- Atlante: griglie di immagini + fili di collegamento ---------- */
.atl-immagini{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.atl-immagini-4{grid-template-columns:repeat(4,1fr)}
.atl-collega{margin-top:16px;font-size:15px}
.atl-collega-link{display:flex;flex-wrap:wrap;gap:22px;margin-top:8px}
@media (max-width:900px){.atl-immagini,.atl-immagini-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.atl-immagini,.atl-immagini-4{grid-template-columns:1fr}}

/* ---------- Piede senza menu: brand + muro loghi partner ---------- */
.footer-brand{max-width:560px;margin:0 0 10px}
.footer-partners{border-top:1px solid rgba(255,255,255,.12);padding-top:30px}
.footer-partners__title{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin:0 0 24px;text-align:center}

/* ---------- Testata: «Contatti» sopra la scelta lingua ---------- */
.header-utility{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1}
.header-contatti{font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--text);text-decoration:none;white-space:nowrap}
.header-contatti:hover{color:var(--magenta)}
@media (max-width:1080px){.header-utility{display:none}}

/* ---------- Home WebApp: elenco «cosa puoi fare» ---------- */
.wa-feats{list-style:none;margin:34px auto 0;padding:0;max-width:860px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px}
/* Una FILETTATURA al posto dell'emoji: queste cinque sono frasi, non etichette, e
   un numero davanti a una frase la fa sembrare un'istruzione. Il filo magenta le
   tiene allineate e si legge come un elenco redazionale. */
.wa-feats li{font-size:15px;line-height:1.45;padding-left:16px;
  border-left:2px solid var(--magenta)}
@media (max-width:640px){.wa-feats{grid-template-columns:1fr}}

/* ============================================================
   MICRO-INTERAZIONI — estese in modo coerente ai nuovi blocchi.
   Solo transform/opacity (leggere per la GPU); disattivate in blocco
   dal killswitch prefers-reduced-motion in _base.css.
   ============================================================ */
.mag-card .media-frame img,.ct-card .media-frame img,.giuria-card .media-frame img,
.jury-link .media-frame img,.svc .media-frame img,.atl-immagini .media-frame img{
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.mag-card:hover .media-frame img,.ct-card:hover .media-frame img,.giuria-card:hover .media-frame img,
.jury-link:hover .media-frame img,.svc:hover .media-frame img{transform:scale(1.045)}
/* tocco tattile sulle CTA (la salita è già in _base .btn:hover) */
.btn:active{transform:translateY(0) scale(.985)}
/* le card nuove salgono con grazia se non lo facevano già */
.mag-card,.valore-card,.carta-card,.giuria-card{transition:transform .25s ease, box-shadow .25s ease}
.mag-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(0,0,0,.10)}

/* ---------- Piede: copyright legale + firma OttocentoA ---------- */
.footer-legal-full{border-top:1px solid rgba(255,255,255,.12);margin-top:26px;padding-top:20px;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.62)}
.footer-legal-full p{margin:0 0 4px}
.footer-legal-full a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:2px}
.footer-legal-full a:hover{color:#fff}
.footer-credit a{font-weight:700}

/* ---------- Riquadro sponsor: il fondo e' magenta, l'outline magenta
   spariva. Su questo fondo i contorni si fanno bianchi. ---------- */
.sponsor-cta .btn-outline-m{border-color:#fff;color:#fff;background:transparent}
.sponsor-cta .btn-outline-m:hover{background:#fff;color:var(--magenta);border-color:#fff}

/* «L'esperienza che vivi a Sherbeth.» stava su due righe per il limite di
   24ch dei titoli di sezione: qui il titolo puo' usare tutta la riga (e sui
   telefoni va a capo da solo, come deve). */
#cosa-trovi-title{max-width:none}

/* ---------- Stand: il GUSTO IN GARA, bene in vista ----------
   E' l'informazione che si cerca davvero su questa pagina: sta sotto il nome,
   su una riga sua, col nome del gusto in magenta e ben leggibile. */
.stand-gel{align-items:flex-start}
.stand-gel-gusto{display:flex;flex-direction:column;margin-top:5px;padding-top:5px;border-top:1px dashed var(--line)}
.stand-gel-gusto-l{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stand-gel-gusto-v{font-family:var(--font-accent),serif;font-style:italic;font-weight:600;font-size:15px;line-height:1.25;color:var(--magenta);overflow-wrap:anywhere}
.stand-gel-gusto.is-soon .stand-gel-gusto-v{font-family:var(--font-sans);font-style:normal;font-weight:700;font-size:12.5px;color:var(--muted);opacity:.85}

/* ============================================================
   GUSTO PRODOTTO — pulsante sulla card e box nella scheda
   ATTENZIONE AI COLORI: --blush NON cambia col tema (resta chiaro),
   quindi qui si usano solo variabili che si ribaltano davvero —
   --surface, --bg, --text, --line, --muted — e --link per l'accento
   (magenta su chiaro, rosa chiaro su scuro). Con --blush il testo
   finiva chiaro su fondo chiaro: illeggibile in tema scuro.
   ============================================================ */
.mk-gusto-info{
  display:inline-block;margin-top:7px;font:inherit;font-size:11.5px;font-weight:800;
  letter-spacing:.02em;color:var(--link);background:none;border:0;padding:0;
  cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--link) 35%,transparent);transition:.18s;
}
.mk-gusto-info:hover{text-decoration-color:var(--link);transform:translateX(2px)}

.gusto-box{
  margin:18px 0 6px;padding:16px 18px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
  border-left:5px solid var(--link);color:var(--text);
}
.gusto-box .gusto-box__l{margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gusto-box__g + .gusto-box__g{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.gusto-box .gusto-box__nome{
  margin:0;font-family:var(--font-accent),serif;font-style:italic;font-weight:600;
  font-size:clamp(19px,2.4vw,24px);line-height:1.2;color:var(--link);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
/*
   LA PASTIGLIA DELLA CATEGORIA: magenta pieno, testo bianco, UNA sola per tutte.

   Committente, 6 ottobre 2026: «"Gelato di crema" fallo sfondo magenta testo bianco» —
   e vale per TUTTE le categorie, non solo per quella: la pastiglia ha un aspetto solo.

   Il bianco su #E3046F da' 4,65:1, misurato: passa il minimo AA per il testo normale
   (4,5) ma con poco margine. Percio' il peso resta 800 e non si assottiglia: a 10,5px
   un peso leggero sarebbe conforme sulla carta e scomodo da leggere davvero.

   La categoria non e' mai affidata al solo colore — la parola c'e' sempre scritta
   dentro — quindi renderle tutte uguali non toglie niente a chi non distingue i colori.
*/
.gusto-box__cat{
  font-family:var(--font-sans);font-style:normal;font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:#E3046F;border:1px solid #E3046F;border-radius:999px;padding:4px 10px;
}
.gusto-box .gusto-box__desc{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--text)}
.gusto-box .gusto-box__al-l{margin:14px 0 6px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gusto-box .gusto-box__al{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.gusto-al{
  display:inline-flex;align-items:baseline;gap:7px;background:var(--bg);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;
}
.gusto-al__n{font-size:13px;font-weight:800;color:var(--text)}
.gusto-al__e{font-size:11.5px;color:var(--muted);font-style:italic}
.gusto-al__i{flex:none;align-self:center;width:16px;height:16px;color:var(--magenta)}
.gusto-al__d{font-size:11px;font-weight:700;color:var(--muted);font-style:normal;text-transform:uppercase;letter-spacing:.04em}
.gusto-box .gusto-box__nota{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.gusto-box .gusto-box__nota--forte{
  color:var(--text);font-weight:700;background:var(--bg);border-radius:10px;
  padding:9px 12px;border:1px dashed var(--link);
}
@media (max-width:560px){ .gusto-box{padding:14px} .gusto-box__al{gap:6px} }

/* Tutta la card del maestro apre la scheda: il cursore lo dice, e la card si
   solleva come le altre superfici cliccabili del sito. */
.mk-card.is-cliccabile{cursor:pointer}
.mk-card.is-cliccabile:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.mk-card.is-cliccabile:hover .mk-foto img{transform:scale(1.04)}
.mk-card .mk-foto img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}

/* A gazebo fills its group; its gelaterie are the repeated cards. */
.stand-grid{grid-template-columns:minmax(0,1fr)}
.stand-card{min-width:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}
/* TRE COLONNE, non «quante ce ne stanno». Era `column-width:20rem`, che su uno
   schermo largo ne faceva quattro o cinque — «5 colonne che sono molte e sono
   una merda», parole del committente — e lasciava la coda dell'ultima colonna
   mezza vuota, cioe' lo spazio bianco a destra. Una griglia a tre colonne piene
   risolve tutte e due le cose insieme. */
.stand-gelatieri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:1100px){.stand-gelatieri{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.stand-gelatieri{grid-template-columns:minmax(0,1fr)}}
.stand-gel-entry{display:flex;flex-direction:column;height:100%;min-width:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.stand-gel-entry .stand-gel{border-radius:0;padding:14px;align-items:flex-start;background:var(--surface)}
.stand-gel-entry .stand-gel-txt{flex:1;overflow-wrap:anywhere}
.stand-gel-entry .stand-gel-txt b{font-size:16px;line-height:1.4}
.stand-gel-details .gusto-box{margin:0;padding:14px;border:0;border-top:1px solid var(--line);border-radius:0}
.stand-gel-details .gusto-box__g{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
/* L'ordine adesso e' quello del markup e non piu' una fila di `order:`: nome,
   descrizione, sportellini. Le regole di prima rimescolavano i blocchi e con la
   struttura nuova avrebbero rimesso la descrizione in fondo. */
.stand-gel-details .gusto-box__nome{font-size:22px;font-weight:800;line-height:1.35;letter-spacing:0}
.stand-gel-details .gusto-box__desc{font-size:16px;line-height:1.6;white-space:pre-line}

/* ── GLI SPORTELLINI ──
   <details> nativo: si apre col dito e con la tastiera, lo legge un lettore di
   schermo, e funziona anche se il JavaScript non parte. La riga che si tocca e'
   alta abbastanza da prenderla in piedi, davanti al banco. */
.gusto-acc-gruppo{margin-top:12px;border-top:1px solid var(--line)}
.gusto-acc{border-bottom:1px solid var(--line)}
.gusto-acc>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:10px 2px;cursor:pointer;list-style:none;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gusto-acc>summary::-webkit-details-marker{display:none}
.gusto-acc>summary::after{content:"+";flex:none;font-size:18px;font-weight:800;line-height:1;color:var(--magenta)}
.gusto-acc[open]>summary::after{content:"−"}
.gusto-acc>summary:hover{color:var(--text)}
.gusto-acc__c{padding:0 2px 14px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.gusto-acc__c .gusto-box__al-txt,.gusto-acc__c .gusto-box__nota{margin:0}
.gusto-acc__c.gusto-box__val{font-size:13.5px;line-height:1.65}
.gusto-box__ingredients{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
/* ── I TRE CAMPI CHE SCRIVE IL GELATIERE ──
   Dal 6 ottobre 2026 ingredienti, allergeni e valori arrivano come TESTO
   scritto a mano da chi sta dietro il banco (/it/gelatiere/gusti), non piu' da
   elenchi dedotti. Il grassetto dentro gli ingredienti evidenzia gli allergeni:
   e' informazione, non decorazione, e si vede. */
.gusto-box .gusto-box__al-txt{margin:0;font-size:14px;line-height:1.6;color:var(--text);overflow-wrap:anywhere}
.gusto-box .gusto-box__al-txt strong,.gusto-box__ingredients strong{font-weight:800}
.gusto-box .gusto-box__val-l{margin:14px 0 6px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gusto-box .gusto-box__val{margin:0;font-size:13.5px;line-height:1.65;color:var(--text);overflow-wrap:anywhere}
/* Nella scheda grande dello stand i tre blocchi seguono l'ordine degli altri. */
.stand-gel-details .gusto-box__ingredients{order:5;margin:12px 0 0}
.stand-gel-details .gusto-al{max-width:100%;flex-wrap:wrap}
.stand-gel-details .gusto-box__l{letter-spacing:0;color:var(--link)}

/* ── MAGAZINE: la firma dell'articolo (25/09/2026) ─────────────────────────
   Chi ha scritto il pezzo va detto, e va detto piano: non compete col titolo.
   Nella card sta sotto il sommario, nella pagina sotto l'occhiello. */
.mag-firma{font-size:13px;color:var(--muted);margin:0}
.mag-firma b{font-weight:800;color:var(--text)}
.page-hero .mag-firma{margin-top:14px;color:rgba(255,255,255,.82)}
.page-hero .mag-firma b{color:#fff}


/* ── FOTOGRAFIE QUADRATE (richiesta 25/09) ─────────────────────────────────
   Le fotografie consegnate sono tutte 1080x1080. In cornice 16/9 se ne
   perdeva quasi meta' — sui Quattro Canti restava solo cielo. Dove la foto
   e' il soggetto la cornice ora e' quadrata e la si vede intera.
   Nell'articolo aperto la foto quadrata a tutta colonna sarebbe alta 820px:
   si tiene entro una misura leggibile e centrata. */
.mag-article .media-frame{max-width:520px;margin-inline:auto}

/* ── IL MARCHIO CHE COMPARE SULLA FOTO (richiesta 25/09) ───────────────────
   Solo sulle fotografie VERE: sui segnaposto il marchio c'e' gia' stampato
   dentro, e comparirebbe due volte. Il velo magenta serve a far leggere il
   marchio bianco anche sulle foto chiare. */
.ct-card .media-frame:not([data-placeholder]),
.mag-card .media-frame:not([data-placeholder]),
.jury-link .media-frame:not([data-placeholder]),
.giuria-card .media-frame:not([data-placeholder]){position:relative}
.ct-card .media-frame:not([data-placeholder])::after,
.mag-card .media-frame:not([data-placeholder])::after,
.jury-link .media-frame:not([data-placeholder])::after,
.giuria-card .media-frame:not([data-placeholder])::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:rgba(199,0,117,.52) url(../img/logo-white.png) center/min(62%,190px) no-repeat;
  transition:opacity .22s ease;
}
.ct-card:hover .media-frame:not([data-placeholder])::after,
.mag-card:hover .media-frame:not([data-placeholder])::after,
.jury-link:hover .media-frame:not([data-placeholder])::after,
.giuria-card:hover .media-frame:not([data-placeholder])::after{opacity:1}
/* Col dito non esiste il passaggio del mouse: un velo che non se ne va piu'
   coprirebbe la foto per sempre. */
@media (hover:none){
  .ct-card .media-frame::after,.mag-card .media-frame::after,
  .jury-link .media-frame::after,.giuria-card .media-frame::after{display:none}
}

/* «Cosa trovi»: titolo e foto portano dove porta il pulsante. */
.ct-card .ct-titolo{color:inherit;text-decoration:none}
.ct-card .ct-titolo:hover{color:var(--magenta);text-decoration:underline;text-underline-offset:3px}
.ct-card.is-cliccabile{cursor:pointer}
.ct-card.is-cliccabile:hover .ct-media{box-shadow:0 16px 36px rgba(199,0,117,.20)}

/* ── LE PAGINE INTERNE: TINTA UNICA CON UN RESPIRO (1 ottobre 2026) ───────────
   Fino al 30 settembre ogni famiglia di pagine aveva un'immagine di sfondo
   (img/sfondi/*.webp) che dal magenta sfumava in un secondo colore nella parte
   bassa. Il committente ha cambiato idea: tinta unica. Ma non e' solo gusto: e' un
   difetto di leggibilita' che c'era. Misurato sui pixel resi, senza il testo:
   il bianco sul verde dei Maestri stava a 2,13:1 sul telefono e a 2,39 nel punto
   piu' chiaro; sul giallo del Cuto' a 1,51 (ne servono 4,5).

   La scelta del committente e' la variante «B»: il magenta istituzionale con un
   respiro delicato, nello spirito dell'alone dietro la ruota della WebApp. Un chiaro
   (#D4127F) a destra, lontano dal testo; un piu' scuro (#B0006A) in alto a sinistra;
   e un alone radiale che si allarga e si stringe in 16 secondi, uguale su telefono
   e computer, spento per chi chiede meno movimento. Contrasto misurato: 5,15:1
   sotto il testo (telefono 5,53), 4,56 nel punto piu' chiaro (telefono 4,75).

   Il perimetro e' lo stesso di prima: le pagine con la classe sfondo-* sul body,
   assegnata da inc/sfondi.php. La home e le fasce a fondo pagina (--grad-hero) non
   cambiano. Le immagini sfondi/*.webp restano in archivio, non le usa piu' nessuno. */
body[class*="sfondo-"] .page-hero{
  background:
    radial-gradient(60% 80% at 84% 70%, #D4127F 0%, rgba(212,18,127,0) 70%),
    radial-gradient(50% 70% at 10% 0%, #B0006A 0%, rgba(176,0,106,0) 65%),
    var(--magenta);
  background-size:100% 100%;
}
body[class*="sfondo-"] .page-hero::after{
  content:"";position:absolute;inset:-10%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side at 78% 60%, rgba(237,111,174,.28), rgba(237,111,174,.08) 60%, transparent 100%);
  animation:heroRespiro 16s ease-in-out infinite;
}
@keyframes heroRespiro{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.08);opacity:1}
}
@media (prefers-reduced-motion:reduce){ body[class*="sfondo-"] .page-hero::after{animation:none} }

/* ── GIURIA POPOLARE (28/09) ───────────────────────────────────────────────
   La piazza e' il soggetto, quindi la fotografia del pubblico sta a tutta
   fascia e il testo ci sta sopra. Sopra la foto c'e' un velo scuro: senza,
   il bianco su una foto piena di magenta e di luci non si legge.
   `isolation:isolate` tiene il velo dentro la sezione invece di farlo
   passare sopra alle sezioni vicine. */
.popolare{position:relative;overflow:hidden;isolation:isolate;background:var(--night);color:#fff}
.popolare-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0}
.popolare::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(165deg,rgba(26,17,24,.90) 0%,rgba(26,17,24,.84) 42%,rgba(140,0,78,.86) 100%)}
.popolare-corpo{position:relative;z-index:2}
.popolare .sec-head{text-align:center}
.popolare .eyebrow{background:rgba(255,255,255,.17);color:#fff}
.popolare .sec-title{color:#fff;margin-inline:auto;max-width:20ch}
.popolare .sec-title em{color:var(--pink)}
.popolare .sec-lead{color:rgba(255,255,255,.88);max-width:64ch;margin-inline:auto}

.pop-passi{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
.pop-passo{position:relative;border-radius:20px;padding:clamp(24px,3vw,32px);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20)}
.pop-num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--magenta);color:#fff;font-weight:900;font-size:19px;line-height:1;margin-bottom:16px}
.pop-passo h3{font-size:clamp(17px,1.5vw,20px);font-weight:800;margin-bottom:8px;color:#fff}
.pop-passo p{font-size:14.5px;line-height:1.62;color:rgba(255,255,255,.84)}

.pop-chiusa{margin-top:clamp(28px,4vw,44px);text-align:center}
.pop-chiusa p{max-width:62ch;margin:0 auto 24px;font-size:15px;line-height:1.65;color:rgba(255,255,255,.88)}

/* Sul telefono i tre passaggi si incolonnano: affiancati sarebbero tre
   colonne di due parole. Il numero va di fianco al titolo, non sopra, per non
   allungare la pagina di tre righe vuote. */
@media (max-width:900px){.pop-passi{grid-template-columns:1fr}}
@media (max-width:560px){
  .pop-passo{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:4px;align-items:center;padding:22px 20px}
  .pop-num{margin-bottom:0;grid-row:1}
  .pop-passo h3{margin-bottom:0}
  .pop-passo p{grid-column:1 / -1}
}

/* «GIURIA TECNICA» e «GIURIA CRITICA» tutte maiuscole nel blocco «Le giurie»
   (28/09), come i nomi dei giurati piu' sotto: sono etichette, non frasi.
   Corpo un filo piu' piccolo e lettere piu' distanziate — il maiuscolo pesa
   di piu' a parita' di misura e senza respiro si legge peggio. */
.jury-link h3{text-transform:uppercase;letter-spacing:.055em;font-size:16.5px}


/* La fascia di chiusura della pagina «Visita Palermo» (mandato #46).
   Larga quanto la finestra, bassa, e piu' bassa ancora sul telefono: e' un
   respiro, non un'altra sezione da leggere. */
.vp-chiusura{margin-top:clamp(30px,5vw,56px)}
.vp-chiusura .media-frame{aspect-ratio:21/6;border-radius:0}
@media (max-width:600px){.vp-chiusura .media-frame{aspect-ratio:16/9}}

/* Due carte affiancate — ma solo dove c'e' spazio.
   Stava come stile in riga dentro la pagina «Visita Palermo», e uno stile in
   riga batte qualunque foglio: le tre e le due colonne restavano tali anche sul
   telefono, dove le carte scendevano a 160 px e la fotografia a 102. Qui invece
   la regola e' una regola, e ripiega come tutte le altre griglie del sito. */
.cards-grid.cards-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.cards-grid.cards-2{grid-template-columns:1fr}}

/* CHI E' IN GRUPPO CON CHI, nella scheda del gelatiere (mandato #46).
   Quattro gelaterie dividono uno stand: la postazione «7B» dice dove sta
   questa, l'elenco dice chi ha accanto. Sta sopra il gusto perche' e' una
   informazione di orientamento, non di prodotto. */
.mk-quattro{margin:14px 0 4px;padding:12px 14px;border-radius:14px;
  background:color-mix(in srgb, var(--primary-50, #fdf2f8) 70%, transparent);
  border:1px solid color-mix(in srgb, currentColor 10%, transparent)}
.mk-quattro__t{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.02em;
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.mk-quattro__n{font-weight:500;font-size:12px;opacity:.72;letter-spacing:0}
.mk-quattro__l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px}
.mk-quattro__l li{display:flex;align-items:center;gap:6px;font-size:13.5px;line-height:1.35}
.mk-quattro__l a{text-decoration:none;border-bottom:1px solid currentColor}
.mk-quattro__l a:hover{opacity:.75}
.mk-quattro__p{font-size:11px;font-weight:800;letter-spacing:.04em;padding:1px 6px;border-radius:999px;
  background:color-mix(in srgb, currentColor 12%, transparent)}
@media (max-width:600px){.mk-quattro{padding:10px 12px}.mk-quattro__l{gap:6px 8px}}

/* ═══ LA COPERTINA DEL TALK (mandato #46) ═══════════════════════════════════
   Titolo + facce di chi presenta, sopra la fotografia.

   LA REGOLA CHE DECIDE TUTTO: il titolo non si taglia mai. Per questo NON c'e'
   aspect-ratio ma `min-height`: con un titolo lungo la copertina si allunga
   invece di nascondere le parole. E' la ragione per cui questa non e' una
   semplice immagine con sopra del testo.
   Le facce stanno in alto, il titolo in basso, e in mezzo c'e' spazio che si
   allarga: non si sovrappongono nemmeno con quattro presentatori. */
/* ── L'ALTEZZA E' UNA SOLA, ED E' QUELLA DEI VOLTI (committente, 7 ottobre 2026) ──

   Erano due: 190 px per le copertine disegnate e 300 px per quelle che sono il viso
   di chi presenta. Nella griglia si vedevano due file di altezze diverse, e il
   committente ha indicato la piu' alta — «deve essere piu' grande come nel caso di
   Healthy Gelato». Quella e' una copertina --volto.
   Adesso la base vale 300 come loro: nessuna rimpicciolisce, e la griglia si allinea.

   E le grafiche ci GUADAGNANO due volte: sono quadrate (1200x1200) e a 190 px ne
   veniva tagliato il 42% dell'altezza; a 300 px se ne perde il 9%. Il titolo
   stampato dentro la grafica torna leggibile. */
.ev-cop{position:relative;isolation:isolate;display:flex;flex-direction:column;
  justify-content:space-between;gap:14px;min-height:300px;padding:12px;
  background:linear-gradient(135deg,#7a0048,#c70075 60%,#e0479b);color:#fff;overflow:hidden}
/* La variante grande deve restare PIU' ALTA della base, e con la base a 300 i suoi
   260 l'avrebbero resa piu' bassa — `min-height` non si somma, vince la regola piu'
   specifica. Sale a 390, cioe' alla stessa misura che aveva gia' quando la copertina
   grande e' un volto. */
.ev-cop--grande{min-height:390px;border-radius:16px;padding:16px}
.ev-cop__sfondo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;display:block}
/* Il velo: senza, un titolo bianco su una foto chiara non si legge. Piu' fitto
   in basso, dove sta il testo, e leggero in alto, dove stanno solo le facce. */
.ev-cop__velo{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.52) 42%,rgba(0,0,0,.18) 100%)}

/* ── QUANDO LA COPERTINA E' UNA FACCIA ──
   Due cose in conflitto sulla stessa immagine: il volto si deve vedere, e il
   titolo si deve leggere. Un velo uniforme perde tutte e due — o spegne la
   faccia o lascia il titolo bianco su una camicia bianca.
   Quindi il velo e' SBILANCIATO: quasi opaco in basso, dove sta il testo, e
   quasi trasparente in alto, dove sta il viso.
   MA IL VELO DA SOLO NON BASTA, ed e' stato misurato e non supposto: con un
   titolo LUNGO su una foto bianchissima il testo sale dove il velo si schiarisce
   e il contrasto crolla a 3,1:1 — sotto la soglia. Un titolo corto stava a 14:1,
   quindi il difetto si vedeva solo nel caso lungo: quello che in un collaudo
   veloce non capita mai.
   Percio' sotto c'e' anche una FASCIA LEGATA AL TESTO, che cresce col titolo
   invece di stare ferma: comunque lungo sia, le lettere stanno sempre sul
   proprio fondo scuro. Il velo fa il clima, la fascia fa la garanzia. */
/* PIU' ALTA quando c'e' una faccia, e non per vezzo: misurato sulle facce vere,
   con un titolo di cinque righe la fascia del testo arrivava a coprire quasi
   tutto e del ritratto restava un bordo. Il titolo si leggeva benissimo e la
   copertina non diceva piu' chi fosse — cioe' falliva proprio nella cosa per cui
   e' stata fatta. Questi 300 px lasciano respirare il viso anche nel caso
   peggiore. */
.ev-cop--volto{min-height:300px}
.ev-cop--grande.ev-cop--volto{min-height:390px}
/* Il volto sta in alto nei ritratti: inquadrare al centro taglia la fronte e
   mette il mento sotto il titolo. */
/* 18% e non 22%: con 22 la fronte usciva dall'inquadratura sui ritratti in cui
   la testa sta in alto. Misurato guardando i dieci ritratti veri, non scelto. */
.ev-cop--volto .ev-cop__sfondo{object-position:center 18%}
.ev-cop--volto .ev-cop__velo{
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.86) 22%,
    rgba(0,0,0,.58) 44%,rgba(0,0,0,.22) 70%,rgba(0,0,0,.10) 100%)}
/* E un filo di nero dietro le lettere, per le foto chiarissime: costa niente e
   salva il caso che il velo da solo non copre. */
/* La fascia che segue il testo: e' questa a rendere la cosa garantita invece
   che probabile. Sta dietro titolo e nomi, e si allunga con loro. */
.ev-cop--volto .ev-cop__basso{
  background:linear-gradient(to top,rgba(0,0,0,.90),rgba(0,0,0,.78) 65%,rgba(0,0,0,.66));
  margin:0 -4px -4px;padding:9px 11px 10px;border-radius:11px}
.ev-cop--volto .ev-cop__titolo{text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.7)}
.ev-cop--volto .ev-cop__chi{text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.65)}
.ev-cop__alto{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ev-cop__cat{position:static;flex:none}
.ev-cop__facce{display:flex;flex:none;flex-wrap:wrap;justify-content:flex-end;padding-left:6px;max-width:64%}
.ev-cop__faccia{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;
  margin-left:-10px;border:2px solid rgba(255,255,255,.92);background:#5a0036;
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ev-cop__faccia:first-child{margin-left:0}
.ev-cop__faccia img{width:100%;height:100%;object-fit:cover;display:block}
/* ── La targhetta di chi non ha la foto ──
   Un cerchio con «D» non dice niente a nessuno; «Danilo Giaffreda» si'
   (committente, 5 ottobre 2026). Quindi NON e' tonda e NON si sovrappone alle
   altre: un nome va letto, non impilato. Va a capo da sola, cosi' regge anche
   a due presentatori e a un nome lungo — oggi non capita, ma i dati cambiano. */
.ev-cop__targa{align-self:flex-start;max-width:100%;margin-left:6px;
  padding:5px 10px;border-radius:999px;border:2px solid rgba(255,255,255,.92);
  background:rgba(90,0,54,.82);color:#fff;font-weight:800;font-size:12.5px;
  line-height:1.2;letter-spacing:-.01em;text-align:right;overflow-wrap:anywhere;
  box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ev-cop__targa:first-child{margin-left:0}
.ev-cop__basso{display:flex;flex-direction:column;gap:3px}
/* `balance` spezza il titolo in righe di lunghezza simile invece di lasciare
   una parola sola in fondo; `anywhere` salva le parole lunghissime. */
.ev-cop__titolo{margin:0;font-weight:800;line-height:1.22;letter-spacing:-.01em;
  font-size:clamp(15px,1.25vw + 11px,21px);text-wrap:balance;overflow-wrap:anywhere;
  text-shadow:0 1px 10px rgba(0,0,0,.5)}
.ev-cop--grande .ev-cop__titolo{font-size:clamp(18px,1.6vw + 12px,27px)}
.ev-cop__chi{margin:0;font-size:12px;font-weight:600;opacity:.92;overflow-wrap:anywhere;
  text-shadow:0 1px 8px rgba(0,0,0,.55)}
/* Sul telefono le facce rimpiccioliscono, perche' li' lo spazio lo vuole il titolo. */
@media (max-width:600px){
  /* Sul telefono vale la stessa regola: una sola altezza, quella dei volti. */
  .ev-cop{min-height:270px;padding:11px}
  .ev-cop--volto{min-height:270px}
  .ev-cop--grande.ev-cop--volto{min-height:300px}
  .ev-cop--grande{min-height:300px;padding:13px}
  .ev-cop__faccia{width:38px;height:38px;margin-left:-8px}
  .ev-cop__targa{font-size:11.5px;padding:4px 9px;margin-left:5px}
  .ev-cop__chi{font-size:11.5px}
}
/* La vecchia cornice 16/9 non vale piu' per la copertina: la taglierebbe. */
.ev-card-img,.ev-scheda__img{aspect-ratio:auto}
.ev-scheda__img{border-radius:16px;overflow:hidden;margin-bottom:16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Il credito di una fotografia di terzi: piccolo, sotto il testo della carta,
   leggibile ma non invadente. */
.card-credito{margin:6px 0 0;font-size:11px;opacity:.6;letter-spacing:.02em}

/* UNA PAROLA PIU' LARGA DELLA SUA SCHEDA (mandato #46, trovata col collaudo
   dal vivo a 390 px). «Contemporaneita'» e' quindici lettere: nella carta dei
   valori, sul telefono, sborda di quindici pixel dal suo riquadro.
   Non spezza la pagina — lo scorrimento orizzontale non c'e' — ma e' testo che
   esce dal suo bordo, e il mandato dice nessun testo tagliato.
   La sillabazione fa il lavoro pulito dove il browser sa farla; `anywhere` e'
   la rete sotto, per le parole che nessun dizionario conosce. */
.ct-card h3, .card h3, .svc h3, .m-card h3, .price-card h3,
.valore-card h3{
  overflow-wrap:anywhere; hyphens:auto}
/* classe-ancora per ritrovare questa regola: parole-lunghe */

/* «IN FASE DI AGGIORNAMENTO» (mandato del 5 ottobre). Una sola riga per scheda,
   sui Talk incompleti e sulle gelaterie incomplete: stessa forma per tutte e due,
   cosi' chi la vede due volte capisce che e' la stessa cosa.
   Discreta per scelta: deve dire «il programma e' in lavorazione», non «il sito
   e' rotto». Niente rosso, niente punto esclamativo, niente riquadro d'errore. */
.in-aggiornamento{margin:8px 0 0;font-size:12px;font-weight:600;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:6px;opacity:.72}
.in-aggiornamento::before{content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;opacity:.55;flex:none}

/* LA PAGINA DI ASSISTENZA: l'indirizzo di posta sta in alto e si vede, perche'
   e' la strada che funziona sempre — anche a modulo spento, anche per chi non
   riesce piu' ad accedere. Il modulo viene dopo, non prima. */
.as-mail{margin:0 0 30px;padding:20px 22px;border-radius:18px;
  background:color-mix(in srgb, var(--primary-50, #fdf2f8) 70%, transparent);
  border:1px solid color-mix(in srgb, currentColor 10%, transparent)}
.as-mail__t{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.as-mail__a{font-size:clamp(18px,1.4vw+13px,24px);font-weight:800;text-decoration:none;
  border-bottom:2px solid currentColor;overflow-wrap:anywhere}
.as-mail__p{margin:10px 0 0;font-size:13.5px;opacity:.75}
.field-nota{display:block;margin-top:5px;font-size:12px;opacity:.65}

/* La riga legale del piede: tre collegamenti veri separati da un punto medio,
   che vanno a capo da soli sul telefono invece di uscire dallo schermo. */
.footer-legal-links{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.footer-legal-links a{text-decoration:none;border-bottom:1px solid color-mix(in srgb, currentColor 45%, transparent)}
.footer-legal-links a:hover{border-bottom-color:currentColor}
.footer-legal-links > *+ *::before{content:"·";margin-right:10px;opacity:.5;border:0}
/* Il rimando all'Assistenza in cima ai Contatti: si vede, ma non grida. */
.ct-assistenza{margin:14px 0 0}
.ct-assistenza a{font-weight:700;text-decoration:none;border-bottom:2px solid currentColor}


/* ── LA TENDINA DEGLI STAND ──
   Sostituisce il campo di ricerca su /stand/: si sceglie quale banco vedere.
   Le pastiglie restano nel documento per il filtro, ma fuori dalla vista e
   fuori dal giro della tastiera (tabindex -1 nel markup). */
.mk-tendina{display:flex;flex-direction:column;gap:6px;min-width:min(340px,100%)}
.mk-tendina-l{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mk-tendina select{appearance:none;width:100%;padding:12px 40px 12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:15px;font-weight:700;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--magenta) 50%),linear-gradient(135deg,var(--magenta) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.mk-tendina select:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
.mk-chips.is-nascosta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ── LE ICONE DEGLI ALLERGENI ──
   Si AGGIUNGONO al testo, non lo sostituiscono: l'obbligo di legge e' sul testo.
   Ogni icona porta accanto il nome della famiglia, perche' da sola un'icona non
   dice niente e un lettore di schermo non la vede affatto. */
.all-icone{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.all-icona{display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 6px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.all-icona svg{flex:none;width:17px;height:17px;color:var(--magenta)}
.all-icona__n{font-size:11.5px;font-weight:800;color:var(--text);white-space:nowrap}

/* ──────────────────────────────────────────────────────────────────────────────
   IL TITOLO DEL BANCO, SOTTO LA POSTAZIONE, E PORTA ALLA MAPPA (rilievo 14).

   Committente, 6 ottobre 2026: «dove c'e' la posizione stand mettiamo dopo anche
   il nome dello stand, e cliccando rimanda alla mappa dello stand».

   Sottolineato e non soltanto colorato: il colore da solo non lo distingue per
   chi non distingue i colori. Area da toccare 44px piene col riempimento: in
   piazza si preme col pollice, in piedi, con una mano sola.
   ────────────────────────────────────────────────────────────────────────────── */
/* DUE RIGHE FISSE: «Stand: 7 · Radici» e «Postazione: 7B», ognuna sulla sua, cosi' le
   schede affiancate finiscono alla stessa altezza qualunque sia la lunghezza del nome. */
/* L'involucro: dentro un contenitore flex e' UN elemento solo, e le due righe si impilano
   al suo interno invece di affiancarsi quando ci stanno. */
/* La bandierina accanto al nome del paese: PICCOLA, perche' e' un contrassegno del dato e
   non un elemento grafico a se'. Il nome resta la cosa che si legge. */
.mk-luogo__bandiera{font-size:.95em;line-height:1}
.banco-blocco{display:block;inline-size:100%;flex-basis:100%}
.banco-riga{display:block;margin:2px 0;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.banco-riga__et{color:var(--muted);font-weight:700}
/* Il collegamento NON deve sembrare un pezzo appiccicato (committente): stessa dimensione
   del testo accanto e sottolineatura discreta, non un bottone dentro una riga di testo. */
.stand-banco{color:var(--magenta);font-weight:800;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a.stand-banco:hover,a.stand-banco:focus-visible{text-decoration-thickness:2px}
span.stand-banco{color:inherit;text-decoration:none}
.banco-riga .stand-position{display:inline;font-size:13px;font-weight:800}
/* Senza identificativo il titolo si legge ma non e' un collegamento: niente
   sottolineatura, o prometterebbe un clic che non succede. */
strong.stand-banco{color:inherit;text-decoration:none}

/* ATTERRARE SUL BANCO: il punto chiesto dall'indirizzo si distingue dai suoi
   quattordici vicini. Senza questo si arriva sulla planimetria giusta e si deve
   comunque cercare il punto, cioe' il collegamento non ha fatto il suo lavoro.
   `scroll-margin` tiene il punto lontano dalla testata che sta sopra. */
.map-plan__pin--stand{scroll-margin:120px}
.map-plan__pin--stand:target{z-index:5;outline:3px solid var(--magenta);outline-offset:3px;box-shadow:0 0 0 8px rgba(199,0,117,.22)}
.map-plan__pin--stand:target .map-plan__nome{font-weight:900;text-decoration:underline}

/* ──────────────────────────────────────────────────────────────────────────────
   LE SCHEDE DEL DIRETTIVO TECNICO E DEGLI ASSISTENTI.

   Fotografia, nome e ruolo SEMPRE alla stessa altezza in tutte le schede: i ritratti
   hanno tutti lo stesso taglio — 3:4 — quindi quello che viene dopo parte dallo stesso
   punto anche se le biografie vanno da 238 a 2.800 caratteri. E' lo stesso difetto di
   allineamento gia' segnalato sulle schede dei maestri.

   `align-items:start` e non `stretch`: le schede NON si allungano per pareggiare la piu'
   alta. Con biografie cosi' diverse, pareggiarle vorrebbe dire mezzo schermo di bianco
   sotto le piu' corte.

   Tre colonne, poi due, poi una. Il minimo di 280px e' la larghezza sotto la quale una
   biografia lunga comincia a spezzarsi in righe di due parole.
   ────────────────────────────────────────────────────────────────────────────── */
/* `stretch` e non `start`: le schede di una riga finiscono tutte alla stessa altezza,
   che e' la cosa che il committente ha chiesto per prima («per essere tutto piu'
   sistemato»). Col taglio della biografia la differenza che restava era solo quella dei
   nomi su due righe, e cosi' sparisce anche quella. */
.dt-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch}
@media (max-width:1100px){.dt-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.dt-griglia{grid-template-columns:minmax(0,1fr)}}

.dt-p{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;padding:0 0 18px;
  display:flex;flex-direction:column}
.dt-p__foto{aspect-ratio:3/4;background:var(--blush-2,#f6e3ee)}
.dt-p__foto img{width:100%;height:100%;object-fit:cover;display:block}
.dt-p__nome{margin:16px 18px 2px;font-size:20px;font-weight:900;line-height:1.2}
.dt-p__ruolo{margin:0 18px 12px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--magenta)}
.dt-p__bio{margin:0 18px}
.dt-p__bio p{margin:0 0 10px;font-size:14.5px;line-height:1.6}
.dt-p__bio p:last-child{margin-bottom:0}

/* ──────────────────────────────────────────────────────────────────────────────
   LA BIOGRAFIA TAGLIATA ALLA STESSA ALTEZZA, E IL PULSANTE CHE APRE IL RESTO.
   (committente, 6 ottobre 2026)

   `--dt-righe` e' il taglio: otto righe, uguale per tutti. Si tiene in una variabile
   perche' l'altezza del blocco e la soglia che decide se il pulsante serve devono essere
   LO STESSO numero — due numeri scritti in due posti divergono al primo ripensamento.

   L'altezza e' FISSA e non massima: una biografia corta lascia lo spazio vuoto invece di
   tirare su il pulsante, ed e' proprio questo che allinea i pulsanti fra schede di
   lunghezze diverse. Senza, «alla stessa altezza» varrebbe solo per i testi lunghi.

   `.dt-bio__btn[hidden]` resta nel flusso? No: `hidden` lo toglie. Ma il blocco sopra ha
   gia' l'altezza fissa, quindi la scheda non si accorcia lo stesso. Il pulsante lo
   accende il JavaScript solo dove serve.
   ────────────────────────────────────────────────────────────────────────────── */
/* `--dt-riga` e' scritto in pixel e non come calc(): il JavaScript legge queste due
   variabili per sapere dove taglia, e getComputedStyle() restituisce una proprieta'
   personalizzata COSI' COM'E' SCRITTA — un calc() gli tornerebbe come testo e non
   come numero. 23.2px sono i 14,5px del corpo per l'interlinea 1,6. */
.dt-bio{--dt-righe:8;--dt-riga:23.2px;margin:0 18px;display:flex;flex-direction:column;flex:1}
/*
   L'ALTEZZA MINIMA VALE SEMPRE, anche per le biografie corte, ed e' il punto che fa
   funzionare la richiesta. Committente: «se una biografia e' piu' corta del taglio, il
   pulsante NON COMPARE — ma la scheda resta alta uguale alle altre».

   Legarla al taglio era sbagliato e l'ho visto misurando a 390: Omar Leoni, 255 caratteri,
   sta in sette righe, non prende il taglio e la sua scheda veniva 729 pixel contro 752.
   A tre e a due colonne non si vedeva, perche' `align-items:stretch` pareggiava la riga:
   a una colonna sola non c'e' nessuno accanto da cui farsi pareggiare.
*/
.dt-bio .dt-p__bio{margin:0;min-height:calc(var(--dt-righe) * var(--dt-riga))}

/* Il taglio lo mette il JavaScript (classe sul contenitore): se non parte, si legge tutto. */
.dt-bio.e-tagliata .dt-p__bio{
  height:calc(var(--dt-righe) * var(--dt-riga));
  overflow:hidden;
  /* La sfumatura in fondo dice che il testo continua: senza, una frase tagliata a meta'
     sembra una frase finita male. */
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent 100%);
}
.dt-bio.e-tagliata.e-aperta .dt-p__bio{height:auto;min-height:0;overflow:visible;-webkit-mask-image:none;mask-image:none}

.dt-bio__btn{
  margin-top:12px;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  /* 44px di area da toccare: si apre col pollice, in piedi, davanti alla pagina. */
  min-height:44px;padding:0 4px;
  background:none;border:0;cursor:pointer;color:var(--magenta);
  font:inherit;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.dt-bio__btn:hover{text-decoration:underline;text-underline-offset:3px}
.dt-bio__btn:focus-visible{outline:3px solid var(--magenta);outline-offset:2px;border-radius:6px}
.dt-bio__freccia{transition:transform .2s ease}
.dt-bio.e-aperta .dt-bio__freccia{transform:rotate(180deg)}
/* Una parola sola per volta: «Leggi tutto» da chiusa, «Chiudi» da aperta. Due <span>
   tradotti e non una stringa in CSS, perche' il CSS non passa dal dizionario. */
.dt-bio__parola--aperto{display:none}
.dt-bio.e-aperta .dt-bio__parola--chiuso{display:none}
.dt-bio.e-aperta .dt-bio__parola--aperto{display:inline}
@media (prefers-reduced-motion:reduce){.dt-bio__freccia{transition:none}}

/* ──────────────────────────────────────────────────────────────────────────────
   L'ASSAGGIO DI GALLERIA NELLA HOME (committente, 6 ottobre 2026).

   Sei fotografie e un pulsante. Prima qui c'erano sei mattonelle colorate con dei
   disegni dentro, e nessun modo di arrivare alla galleria vera.

   Tre colonne, poi due, poi due anche sul telefono: a 390 una colonna sola farebbe
   scendere l'assaggio per mezzo schermo e il pulsante finirebbe lontanissimo dal titolo,
   che e' il contrario di un assaggio.

   `aspect-ratio` fisso su tutte: gli scatti sono orizzontali e verticali mescolati, e
   senza un riquadro uguale la griglia diventa una scala. Le didascalie stanno sopra la
   foto con una sfumatura, cosi' si leggono anche su uno scatto chiaro.
   ────────────────────────────────────────────────────────────────────────────── */
.gallery-assaggio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
@media (max-width:900px){.gallery-assaggio{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ga-tessera{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--blush-2,#f6e3ee);text-decoration:none}
.ga-tessera img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.ga-tessera:hover img,.ga-tessera:focus-visible img{transform:scale(1.04)}
.ga-tessera__cap{position:absolute;inset-inline:0;inset-block-end:0;padding:26px 12px 10px;color:#fff;font-size:13px;font-weight:700;line-height:1.25;background:linear-gradient(to top,rgba(0,0,0,.62),transparent)}
.ga-cta{margin-top:22px;text-align:center}
@media (prefers-reduced-motion:reduce){.ga-tessera img{transition:none}.ga-tessera:hover img{transform:none}}

/* ─────────────────────────────────────────────────────────────────────────────
 | LA FOTO INGRANDITA, aperta al tocco su una faccia di relatore o moderatore.
 |
 | Nasce al primo tocco e muore quando si chiude: non c'e' nessun riquadro
 | nascosto nel documento di tutte le pagine. Vedi sherbeth.js.
 |
 | Il fondo e' scuro e non nero pieno: sotto si intravede la pagina, e si capisce
 | che si e' aperta una cosa sopra invece di essere finiti altrove.
 ───────────────────────────────────────────────────────────────────────────── */
.foto-grande {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 12, 15, .88);
  cursor: zoom-out;
}

.foto-grande__img {
  max-inline-size: min(92vw, 680px);
  max-block-size: 88vh;
  inline-size: auto;
  block-size: auto;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
  cursor: default;
}

/* Il bersaglio della chiusura e' 44px: sotto quella misura un tocco sbaglia. */
.foto-grande__chiudi {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  inline-size: 44px;
  block-size: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #110C0F;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* La faccia dice di essere apribile: il cursore cambia dove c'e' l'attributo. */
[data-foto-grande] {
  cursor: zoom-in;
}

/* ─────────────────────────────────────────────────────────────────────────────
 | LA BIOGRAFIA ERA NERO SU NERO. (misurato il 7 ottobre 2026)
 |
 | `.ev-rel-bio` fissava `color: var(--ink, #222)` — l'inchiostro scuro, giusto su
 | fondo chiaro. Ma la finestra dell'evento usa `background: var(--surface);
 | color: var(--text)`, che seguono il tema: a schermo scuro il fondo diventa
 | rgb(39,26,37) e la biografia restava rgb(35,31,32).
 |
 | CONTRASTO MISURATO SULLA PAGINA VERA: 1,02. Cioe' il testo c'era, era tagliato
 | giusto a quattro righe, il pulsante «Leggi tutto» funzionava — e fra il nome e
 | il pulsante si vedeva uno spazio VUOTO. Il nome accanto stava a 14,33 e il
 | ruolo a 7,4: solo la biografia era cieca.
 |
 | Adesso usa `--muted`, che e' la variabile del tema per il testo secondario e
 | segue il fondo come fanno le altre righe della scheda. Non un colore nuovo.
 |
 | La lezione, perche' non si ripeta: i numeri dicevano che tutto funzionava — 70
 | biografie, 70 pulsanti, taglio a 75 punti su 170 di contenuto. Si vedeva solo
 | guardando.
 ───────────────────────────────────────────────────────────────────────────── */

/* Il PRENOTA in alto: stesso pulsante di quello in fondo, solo staccato dal testo. */
.ev-scheda__prenota-alto{margin:10px 0 2px}

/* La biografia dentro la scheda di un giurato: stesso congegno degli eventi.
   La scheda resta CENTRATA come tutte le altre della griglia — ritratto, nome e ruolo in
   asse. Va a sinistra solo la biografia: un paragrafo lungo centrato si legge male, perche'
   l'occhio deve ricercare l'inizio di ogni riga. */
.giuria-bio{display:flex;flex-direction:column;margin-top:8px;text-align:left}
.giuria-bio .ev-rel-bio{margin-top:0}

/* ═══ LA RASSEGNA STAMPA (7 ottobre 2026) ═══════════════════════════════════

   NIENTE LOGHI, PER DECISIONE DEL COMMITTENTE — e la decisione e' buona: i marchi
   delle 77 testate si sarebbero potuti recuperare solo come iconcine da 32 pixel
   prese dai loro siti, e un muro di loghi sgranati e scombinati e' il contrario di
   quello che chiedeva.

   Quindi lo spettacolo lo fa la TIPOGRAFIA, e si regge su tre cose:
    · i NUMERI grandi al posto della copertina — 93 e 77 dicono da soli quanto e'
      stato raccontato, e non chiedono un'immagine a nessuno;
    · il titolo di ogni articolo in Fraunces corsivo, cioe' il carattere che questo
      sito usa per le cose importanti: su una pagina fatta di soli testi e' l'unica
      differenza che si vede da lontano;
    · il nome della testata in maiuscoletto magenta sopra il titolo, come l'occhiello
      di un giornale — che e' esattamente che cosa e'.
*/
.rs .lead{max-width:62ch}

/* I numeri. Allineati sulla linea di base, non centrati: devono leggersi come una
   riga sola — «93 articoli, 77 testate» — e non come tre riquadri. */
.rs-conto{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 44px;margin:38px 0 10px;
  padding-bottom:26px;border-bottom:1px solid var(--line)}
.rs-conto > div{display:flex;align-items:baseline;gap:10px}
/* IL MAGENTA E' --link, NON --magenta, e la differenza si vede solo al buio.
   `--magenta` e' #C70075 fisso: sul tema scuro, su --bg #1A1118, fa 3,24:1 — misurato
   sulla pagina vera, non calcolato a mente. Sotto la soglia per un testo piccolo, e la
   testata e il mese sono 12,5 e 13 px.
   `--link` e' lo stesso #C70075 sul chiaro e diventa #EF6BA8 sullo scuro: 6,4:1.
   Stessa trappola gia' pagata stamattina sulle biografie della giuria. */
.rs-conto strong{font-size:clamp(44px,6vw,86px);font-weight:900;line-height:.9;
  letter-spacing:-.03em;color:var(--link)}
.rs-conto span{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.rs-conto__quando{margin-left:auto}

.rs-sezione{margin:46px 0 4px;font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.rs-mese{margin:30px 0 10px;font-size:13px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--link)}

/* ── UNA VOCE ──────────────────────────────────────────────────────────────
   E' un blocco, non una card: niente bordo, niente ombra, niente sfondo. Su 93
   elementi 93 riquadri diventano rumore; una riga di testo con una linea sottile
   sopra si legge come un indice, che e' il modo in cui una rassegna si consulta. */
.rs-voce{display:block;padding:16px 0;border-top:1px solid var(--line);
  color:inherit;text-decoration:none;transition:padding-left .18s ease}
a.rs-voce:hover,a.rs-voce:focus-visible{padding-left:8px}
.rs-testata{display:block;font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--link)}
.rs-titolo{display:block;margin-top:5px;font-family:var(--font-accent);font-style:italic;
  font-weight:600;line-height:1.28;font-size:16.5px;color:var(--text)}
a.rs-voce:hover .rs-titolo{text-decoration:underline;text-underline-offset:3px}
.rs-data{display:block;margin-top:6px;font-size:12px;font-weight:600;color:var(--muted)}

/* Le testate che conoscono tutti: piu' aria e un corpo piu' grande. La differenza
   e' di misura, non di colore: due colori diversi avrebbero detto «queste contano,
   quelle no», e non e' quello che significa. */
.rs-evidenza{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.rs-voce--grande{padding:22px 0}
.rs-voce--grande .rs-titolo{font-size:clamp(19px,1.5vw + 12px,27px);margin-top:7px}
.rs-voce--grande .rs-testata{font-size:12.5px}

/* E tutte le altre: tre colonne fitte. `minmax(0,1fr)` e non `auto`, altrimenti un
   titolo lungo allarga la colonna e le altre due si stringono. */
.rs-elenco{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px}

@media (max-width:980px){
  .rs-elenco{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .rs-evidenza,.rs-elenco{grid-template-columns:1fr;gap:0}
  .rs-conto{gap:8px 28px}
  .rs-conto__quando{margin-left:0;flex-basis:100%}
  .rs-voce--grande .rs-titolo{font-size:20px}
}

/* L'accredito: una cosa sola al centro, perche' e' una cosa sola da fare. */
.rs-accredito{max-width:720px;margin-inline:auto;text-align:center}
.rs-accredito .lead{margin-inline:auto}
.rs-accredito__azioni{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.rs-accredito__nota{margin-top:18px;font-size:13.5px;color:var(--muted)}

/* «+ di 77»: il «+ di» piccolo accanto alla cifra grande, non della stessa misura —
   altrimenti sono tre parole grandi e il numero smette di essere un numero. */
.rs-conto__piu span{font-size:.3em;font-weight:800;letter-spacing:.02em;vertical-align:.5em;
  margin-right:.1em}

/* LA CASELLA DEL CONSENSO sotto il modulo della newsletter (8 ottobre 2026).
   `align-items:flex-start` e non `center`: la frase va a capo su due o tre righe
   e una casella centrata verticalmente finirebbe a meta' del testo.
   `accent-color` perche' la spunta sia magenta come il resto, senza disegnarne una
   nostra: il controllo resta quello del sistema, che e' quello che chi naviga da
   tastiera si aspetta. */
.news-privacy{display:flex;align-items:flex-start;gap:10px;margin-top:14px;flex-basis:100%;
  font-size:13px;line-height:1.5;color:var(--text);cursor:pointer}

/* `min-width:0` NON e' superfluo: `.news-form input` (in _base.css) impone
   `min-width:220px` perche' pensato per il campo dell'email, e colpisce anche
   questa casella. Il risultato era una casella larga 220px con la spunta che ci
   galleggiava in mezzo, staccata dalla frase di un dito. Qui la riportiamo alla
   sua misura e la allineiamo al bordo sinistro del campo sopra. */
.news-privacy input{flex:none;width:18px;height:18px;min-width:0;margin:0;padding:0;
  border-radius:5px;accent-color:var(--magenta);cursor:pointer}

/* `--link` esiste SOLO nel tema scuro: nel chiaro ricade sul magenta, che su
   fondo bianco si legge; il rosa chiaro, no. */
.news-privacy a{color:var(--link, var(--magenta));text-decoration:underline;text-underline-offset:2px}
.news-privacy a:hover{text-decoration-thickness:2px}

/*
 | LA CASELLA DEL CONSENSO NEI MODULI (contatti e assistenza, 8 ottobre 2026).
 |
 | Sta in un `.full` e NON in un `.field`, e non e' una sfumatura: `.field label`
 | vale (0,1,1) e mette maiuscoletto, grigio smorzato e 12,5 px — pensato per le
 | etichette «NOME E COGNOME», giusto li' e sbagliato su una frase da leggere.
 | `.consenso` vale (0,1,0) e avrebbe perso comunque, scritta prima o dopo.
 | Si poteva rincorrere la specificita' con `.field label.consenso`; e' piu'
 | pulito togliere la classe che porta le regole sbagliate.
 |
 | Per la stessa ragione la casella NON eredita `.field input` (width:100% e
 | padding da campo di testo): senza `.field` intorno, quella regola non la vede.
*/
.consenso{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;
  color:var(--text);cursor:pointer}
.consenso input{flex:none;width:18px;height:18px;min-width:0;margin:1px 0 0;padding:0;
  border-radius:5px;accent-color:var(--magenta);cursor:pointer}
.consenso a{color:var(--link, var(--magenta));text-decoration:underline;text-underline-offset:2px}
.consenso a:hover{text-decoration-thickness:2px}

/* ══ LA FASCIA DEGLI ORARI (8 ottobre 2026) ══════════════════════════════
   Magenta pieno e non piu' rosa chiaro: sta fra «Perche' esserci» e la WebApp,
   due sezioni chiare, e deve spezzare la pagina invece di accodarsi.
   Il totale delle ore e' il pezzo piu' grande di tutta la fascia perche' e'
   l'unica cosa che non ci si aspetta: «39» ferma l'occhio, «quando si assaggia»
   no. */
.orari-banda{padding:clamp(52px,6.5vw,88px) 0;color:#fff;
  background:linear-gradient(140deg,var(--magenta) 0%,#8E0054 58%,#5E0038 100%)}
.orari-testa{text-align:center;max-width:46ch;margin-inline:auto}
.orari-e{display:block;font-size:11px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;opacity:.72;margin-bottom:14px}
.orari-titolo{font-size:clamp(27px,4.2vw,46px);font-weight:900;line-height:1.08;
  letter-spacing:-.02em}
/* `vertical-align:-.04em` e non baseline: a questo corpo la cifra sembra alta
   di un pelo rispetto alle parole accanto, e si vede. */
.orari-ore{font-size:clamp(50px,8vw,96px);line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;vertical-align:-.04em;margin-right:.06em;
  text-shadow:0 8px 28px rgba(0,0,0,.22)}
.orari-lead{margin-top:16px;font-size:15px;line-height:1.65;opacity:.88}

.orari-giorni{list-style:none;margin:clamp(30px,4vw,46px) 0 0;padding:0;
  display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
/* Vetro sul magenta invece di piastrelle bianche: quattro rettangoli bianchi
   su fondo pieno diventano quattro buchi, e la fascia si spezza in cinque. */
.orari-giorno{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
  border-radius:20px;padding:clamp(16px,2vw,24px) clamp(10px,1.4vw,18px);
  text-align:center;display:grid;gap:0;align-content:start;
  backdrop-filter:blur(6px);transition:transform .2s,background .2s}
.orari-giorno:hover{transform:translateY(-4px);background:rgba(255,255,255,.2)}
.orari-giorno__num{font-size:clamp(32px,4.4vw,50px);font-weight:900;line-height:1;
  font-variant-numeric:tabular-nums}
.orari-giorno__mese{font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;opacity:.72;margin-top:4px}
.orari-giorno__nome{font-size:13px;font-weight:800;margin-top:9px}
.orari-giorno__ore{font-size:clamp(13.5px,1.5vw,16px);font-weight:800;margin-top:7px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  background:#fff;color:var(--magenta);border-radius:999px;padding:5px 10px;
  justify-self:center}

.orari-nota{margin-top:20px;text-align:center;font-size:12.5px;line-height:1.6;opacity:.74}
.orari-nota a{color:#fff;text-decoration:underline;text-underline-offset:2px}

@media (max-width:760px){
  .orari-giorni{grid-template-columns:repeat(2,minmax(0,1fr))}
  .orari-titolo{line-height:1.14}
}

/* ══ LE DATE IN TESTA ALL'HERO (committente, 9 ottobre 2026) ═════════════
   Prima erano una riga di 13 px dentro la pastiglia, insieme al luogo: tre
   informazioni di peso diverso con lo stesso corpo. La data e' quella che chi
   arriva cerca per prima, e adesso ha il corpo che le compete.
   `tabular-nums` perche' «13 – 16» e «2026» restino incolonnati fra loro, e
   `text-wrap:balance` perche' su telefono, se va a capo, si spezzi in due righe
   equilibrate invece di lasciare «2026» da solo. */
.hero-date{font-size:clamp(28px,5.2vw,52px);font-weight:900;line-height:1.05;
  letter-spacing:-.015em;color:#fff;margin:0 0 14px;
  font-variant-numeric:tabular-nums;text-wrap:balance;
  text-shadow:0 6px 24px rgba(0,0,0,.2)}
/* La pastiglia del luogo perde il margine grande: adesso sta SOTTO la data e
   deve restarle attaccata, non galleggiare a meta' strada dal logo. */
.hero-date + .hero-kicker{margin-bottom:26px}

@media (prefers-reduced-motion:no-preference){
  .hero-date{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) .05s both}
}

/* ══ IL FILTRO «SHERBETH OFF» (committente, 9 ottobre 2026) ══════════════
   «Si distingue dagli altri rimanendo della stessa dimensione, ma che richiami
   visibilita'.» Quindi NESSUN ritocco a corpo, spaziatura o raggio: la fila
   deve restare una fila, e un pulsante piu' grande la spezzerebbe. Stacca per
   colore — fondo pieno magenta — e per un filo di ombra.
   `margin-left:auto` NO: lo manderebbe in fondo alla riga e su due righe si
   staccherebbe dagli altri. Resta in fila, dopo i giorni. */
.ev-daytab--off{background:var(--magenta);border-color:var(--magenta);color:#fff;
  box-shadow:0 6px 16px rgba(199,0,117,.26)}
.ev-daytab--off:hover{background:#8E0054;border-color:#8E0054;color:#fff}
/* Quando e' il filtro attivo deve distinguersi ANCHE dal suo stesso colore di
   riposo, altrimenti non si capisce se e' premuto: l'anello fa quel lavoro
   senza cambiare la misura del pulsante. */
.ev-daytab--off.active{background:#8E0054;border-color:#8E0054;color:#fff;
  box-shadow:0 0 0 3px var(--blush-2),0 6px 16px rgba(199,0,117,.3)}

/* ══ LA CONDIZIONE D'INGRESSO, IN UNA RIGA SOLA ══════════════════════════
   La dicitura unica e' lunga quanto le due pastiglie che sostituisce: va a
   capo da sola e non costringe la scheda a crescere. */
.ev-chip.ev-cond{line-height:1.35;white-space:normal}

/* ══ «SCOPRI DI PIU'» SI VEDE ════════════════════════════════════════════
   Era un testo magenta in fondo alla scheda, della stessa misura delle
   pastiglie accanto: si leggeva come un'etichetta, non come una cosa da
   premere. Adesso e' un pulsante con un contorno, e la freccia si sposta al
   passaggio — il movimento dice «si va da qualche parte» meglio di un colore.
   `pointer-events:none` perche' a essere cliccabile e' la SCHEDA intera: un
   pulsante dentro un'area cliccabile che si prende il clic da solo e' il modo
   in cui si rompe la scheda senza accorgersene. */
.ev-more{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--magenta);
  border:1.5px solid var(--magenta);border-radius:999px;padding:6px 13px;
  pointer-events:none;transition:background .18s,color .18s}
.ev-card:hover .ev-more,.ev-card:focus-visible .ev-more{background:var(--magenta);color:#fff}

/* ══ EVENTO CONCLUSO (committente, 9 ottobre 2026) ═══════════════════════
   La pastiglia nasce `hidden` nell'HTML e la accende il browser: il server non
   puo' deciderlo, perche' la pagina sta nella cache di nginx e un «concluso»
   calcolato alla resa resterebbe congelato dentro la copia.
   Grigia e non rossa: un evento finito non e' un errore, e' una cosa passata. */
.ev-chip--fine{background:var(--line);color:var(--muted);font-weight:800}
/* La scheda si smorza, NON sparisce: chi cerca «cos'era quella cosa di ieri»
   deve poterla ancora trovare. La fotografia perde colore, il testo resta
   leggibile — e al passaggio torna tutto, perche' chi ci va sopra la vuole. */
.ev-card.e-concluso{opacity:.72}
.ev-card.e-concluso .media-frame img{filter:grayscale(.85)}
.ev-card.e-concluso:hover,.ev-card.e-concluso:focus-within{opacity:1}
.ev-card.e-concluso:hover .media-frame img{filter:none}
/* Dentro il dialogo la pastiglia sta accanto al pulsante «Prenota»: li' la
   cosa importante e' che si veda PRIMA di cliccare. */
.ev-scheda__book.e-concluso .btn{opacity:.55;pointer-events:none}

/* La nota sotto la planimetria: sta fra il disegno e l'elenco degli stand, e
   deve leggersi come un avviso — non come didascalia della figura, che
   sembrerebbe parte del disegno e si salterebbe. */
.map-nota{max-width:70ch;margin:18px auto 0;padding:14px 18px;text-align:center;
  font-size:13.5px;line-height:1.6;color:var(--text);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:16px}
.map-nota strong{color:var(--magenta)}

/* ── DUE SEZIONI CHE DEVONO STARE ATTACCATE ────────────────────────────────
   Fra una sezione e l'altra il sito lascia 115 px sotto PIU' 115 px sopra:
   e' il respiro giusto fra due argomenti diversi, ed e' troppo quando il
   secondo blocco e' la coda del primo. Misurato due volte: 231 px fra la
   fascia dei Tasty in testa ai Maestri e l'elenco, 244 px fra l'ultima
   domanda delle FAQ e l'invito a scriverne una.

   Si mette `sez--unisci` sulla sezione DI SOPRA: perde l'imbottitura
   inferiore e dimezza quella della sezione che segue.

   Batte `section{padding:clamp(70px,9vw,120px) 0}` di `_base.css` per
   SPECIFICITA' (0,1,0 e 0,1,1 contro 0,0,1), non per ordine dei file: regge
   anche se un giorno i fogli cambiano ordine.

   Il selettore fratello regge perche' fra le due sezioni non c'e' nessun
   altro elemento: in mezzo c'e' solo PHP, che non rende niente. */
.sez--unisci{padding-bottom:0}
.sez--unisci + section{padding-top:clamp(32px,5vw,56px)}

/* ── «Non hai trovato la risposta?»: l'invito e il modulo, in fondo alle FAQ ──
   Nessuna cornice intorno: `.form-card` ha gia' superficie, bordo e ombra sue,
   e incorniciare due volte farebbe una scatola dentro una scatola. Qui serve
   solo mettere in fila l'invito e il modulo. */
.faq-chiedi{display:grid;grid-template-columns:1fr minmax(320px,.92fr);
  gap:clamp(26px,4.5vw,64px);align-items:center}
.faq-chiedi__invito .sec-title{margin:10px 0 0}
.faq-chiedi__invito .sec-lead{margin-top:14px}
.faq-chiedi__promessa{display:flex;align-items:center;gap:14px;margin:26px 0 0}
.faq-chiedi__ore{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,#E4007C,#9E0F62);color:#fff;
  font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:19px;line-height:1;
  box-shadow:0 10px 24px rgba(199,0,117,.3)}
.faq-chiedi__promessa b{font-size:16px;line-height:1.4;font-weight:800;max-width:22ch}
.faq-chiedi__ft{margin:0 0 20px;font-size:20px;font-weight:800;line-height:1.25}

@media (max-width:900px){
  .faq-chiedi{grid-template-columns:1fr}
  /* Due colonne per nome ed email sotto i 900 px lasciano campi da 130 px:
     si scrive peggio di quanto si risparmi in altezza. */
  .faq-chiedi .form-grid{grid-template-columns:1fr}
}

/* ── A quale edizione si riferisce il conto delle testate ──────────────────
   La cifra e' enorme e l'anno era una didascalia in corpo 16 spinta all'altro
   capo della riga: chi guardava il numero non sapeva di quando fosse. Ora in
   mezzo c'e' una frase intera, e le date restano come dettaglio.

   `flex-basis:100%` sotto gli 860 px: in riga con un numero da 86 px la frase
   si spezzerebbe parola per parola. */
.rs-conto__chi{margin:0;align-self:baseline;
  font-size:clamp(15px,1.5vw,18px);font-weight:600;line-height:1.4;color:var(--text)}
.rs-conto__chi b{font-weight:900;color:var(--link);white-space:nowrap}
/* Batte `.rs-conto span{font-size:14px;…uppercase}` per specificita' (0,2,0
   contro 0,1,1): dentro la frase il minuscolo si legge, il maiuscoletto no. */
.rs-conto__chi span{font-size:inherit;font-weight:inherit;letter-spacing:normal;
  text-transform:none;color:inherit}
@media (max-width:860px){
  .rs-conto__chi{flex-basis:100%;margin-top:2px}
}

/* ── La lista d'attesa dei gelatieri, in fondo ai Contatti ─────────────────
   Stessa impaginazione dell'invito nelle FAQ: a sinistra il perche', a destra
   il modulo. Nessuna cornice intorno — `.form-card` ha gia' superficie, bordo
   e ombra sue, e incorniciare due volte fa una scatola dentro una scatola. */
.ga-box{display:grid;grid-template-columns:1fr minmax(320px,1fr);
  gap:clamp(26px,4.5vw,64px);align-items:center}
.ga-box__dire .sec-title{margin:10px 0 0}
.ga-box__dire .sec-lead{margin-top:14px;max-width:46ch}
.ga-box__come{margin:26px 0 12px;font-size:11px;font-weight:900;letter-spacing:.18em;
  text-transform:uppercase;color:var(--link)}
.ga-passi{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ga-passi li{display:flex;gap:13px;align-items:flex-start;
  font-size:14.5px;line-height:1.6;color:var(--muted)}
.ga-passi__n{flex:none;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;
  background:linear-gradient(135deg,#E4007C,#9E0F62);color:#fff;
  font-size:12px;font-weight:900;line-height:1;margin-top:1px}
.ga-box__ft{margin:0 0 20px;font-size:20px;font-weight:800;line-height:1.25}

@media (max-width:900px){
  .ga-box{grid-template-columns:1fr}
  .ga-box__dire .sec-lead{max-width:none}
  /* Due colonne sotto i 900 px lasciano campi da 130 px: si scrive peggio di
     quanto si risparmi in altezza. */
  .ga-box .form-grid{grid-template-columns:1fr}
}

/* L'ancora «#candidati» arriva dal menu: senza questo l'intestazione fissa
   coprirebbe il titolo della sezione, e chi clicca atterra sul nulla. */
#candidati{scroll-margin-top:clamp(90px,12vw,130px)}

/* Il segnaposto di chi non ha ancora la fotografia: l'iniziale, nei colori
   della casa. Stesso segno usato per i prodotti senza foto nella WebApp, così
   una scheda incompleta si riconosce a colpo d'occhio invece di sembrare
   un'immagine che non ha caricato. */
.giuria-attesa{display:grid;place-items:center;width:100%;height:100%;
  background:linear-gradient(140deg,#f7e4ef,#f2cfe2);
  font-family:"Fraunces",Georgia,serif;font-size:clamp(54px,8vw,86px);font-weight:600;
  color:#C70075;opacity:.45;line-height:1}

/* ── La presentazione del Sherbeth Off, fra il filtro e gli eventi ─────────
   Fondo scuro fisso, come le altre fasce di richiamo del sito: le schede degli
   eventi sotto sono chiare, e un riquadro rosa pallido qui sparirebbe fra la
   barra dei filtri e la griglia invece di separarle. Restando fisso vale
   identico nel tema chiaro e in quello scuro.

   `[hidden]` da solo non basta su un elemento a cui diamo `display`: la regola
   di `display` vincerebbe e la fascia resterebbe visibile a filtro spento. */
.ev-off-intro{margin:22px 0 4px;padding:clamp(20px,2.6vw,30px) clamp(20px,2.8vw,36px);
  border-radius:22px;color:#fff;
  background:
    radial-gradient(120% 150% at 100% 0%,rgba(228,0,124,.36) 0%,rgba(228,0,124,0) 60%),
    linear-gradient(135deg,#2B2228 0%,#231F20 100%);
  box-shadow:0 14px 34px rgba(35,31,32,.24)}
.ev-off-intro[hidden]{display:none}
.ev-off-intro__e{display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.2em;
  text-transform:uppercase;color:#FF9ACB}
.ev-off-intro__t{margin:8px 0 0;font-size:clamp(19px,2.3vw,26px);font-weight:900;line-height:1.25}
.ev-off-intro__p{margin:10px 0 0;font-size:14.5px;line-height:1.62;
  color:rgba(255,255,255,.84);max-width:78ch}