/* ═══ gastronomica.css ═══ */
/* ══════════════════════════════════════════════════════════════════════════
   GASTRONOMICA — IL VESTITO, foglio unico.
   Sfilato da sito-design/proposta-29-08.html il 03/09/2026 (fase 2, R02).
   ⚠️ NON È STATA CAMBIATA UNA RIGA: i 7 blocchi <style> che stavano dentro la
   pagina sono qui nello stesso ordine in cui ci stavano, separati dai commenti
   «blocco N». La pagina ora lo carica con un <link>, e si apre lo stesso col
   doppio click perché il percorso è relativo.
   Le due tavolozze :root vanno lasciate TUTTE E DUE e in quest'ordine: la
   seconda è la tavolozza 2 confermata dal capo e sovrascrive la prima.
   ══════════════════════════════════════════════════════════════════════════ */



/* ══════════ blocco 1 di 7 ══════════════════════════════════════════ */
/* ==========================================================================
   GASTRONOMICA — direzione visiva 29/08/2026 · Reparto 01
   Riferimento di IMPIANTO: london.tastefestivals.com (misurato, vedi esiti/)
   Riferimento di MOTION:   lastdanceforglory.world · kommakomma.is · ellusioncreative.com
   ⚠️ TUTTI I TESTI SONO SEGNAPOSTO. Il copy vero lo scrive il R03.
   ========================================================================== */

:root{
  /* --- COLORE — palette accesa, avvicinata a Taste il 30/08/2026 --------
     Richiesta di Costantino: «colori accesi proprio perché è un festival»,
     poi «colori SIMILI a Taste of London», mai uguali.
     Bersaglio misurato sul loro sito (brief/taste-estratto-30-08.md): accenti a
     saturazione 0,75–0,92 con luminanza 0,11–0,23 — accesi ma scuri, che
     squillano su fondo chiaro. La nostra gamma resta CALDA e di stagione
     (06/11 → 08/12, novembre-dicembre nel Lazio): brace, melagrana, zucca,
     alloro, più la nota MORA che a loro è il colore più usato e a noi mancava.
     ⚠️ NON presi da loro: #007BFF e #DC3545 (predefiniti di Bootstrap, non del
     marchio) e il magenta/rosa estivo #F43581.
     ⚠️ REGOLA CHE NON SI ROMPE (§2.1 punto 7): --azione appare SOLO dove si clicca
     ed è il colore più squillante della pagina. Gli accenti decorativi usano
     --accento (su fondo scuro) e --accento-l (su fondo chiaro), MAI --azione.
     Contrasti tutti rimisurati il 30/08 dopo il cambio — §6 del file di consegna. */

  /* fondi */
  --carta:       #FFFFFF;   /* fondo chiaro dominante                            */
  --carta-calda: #FFF1EC;   /* seconda campitura chiara (fasce alterne)          */
  --superficie:  #FFFFFF;   /* card                                              */
  --brace:       #14212B;   /* IL FONDO SCURO: brace, rosso profondo non nero    */
  --brace-alta:  #1E3245;   /* card/campi dentro il fondo scuro   bianco 14,67:1 */
  --scuro:       #14212B;   /* alias storico di --brace (usato in 8 punti)       */

  /* campiture sature — sat/lum misurate, banda Taste 0,75-0,92 / 0,11-0,23 */
  --melagrana:   #BB2C24;   /* sat 0,93 lum 0,119 → SOLO testo bianco   6,22:1   */
  --zucca:       #FF9028;   /* sat 0,92 lum 0,276 → SOLO testo scuro    5,80:1   */
  --alloro:      #2C6C9C;   /* sat 0,83 lum 0,109 → bianco             6,61:1   */
  --mora:        #2C6C9C;   /* NUOVO — sat 0,88 lum 0,090 → bianco     7,53:1
                               è la nota che a Taste sta su #953B8C; da noi vale
                               mora/melagrana matura, di stagione a novembre.   */

  /* testo */
  --inchiostro:  #14212B;   /* testo corrente su carta            16,34:1        */
  --tenue:       #5C6B75;   /* testo secondario su carta           6,06:1        */
  --vino:        #BB2C24;   /* titoli e accenti su chiaro          5,45:1        */
  --oliva:       #2C6C9C;   /* occhielli su chiaro                 5,80:1        */

  /* accenti decorativi — NON sono il colore d'azione */
  --accento:     #E84E1A;   /* zucca, SOLO su fondo scuro          5,66:1        */
  --accento-l:   #FF5824;   /* melagrana, SOLO su fondo chiaro     5,45:1        */

  /* ⛔ IL COLORE D'AZIONE — solo bottoni, focus e link di sistema.
     Portato da ambra #FFB300 a giallo grano #FFD400: alzando le saturazioni
     l'ambra si avvicinava troppo alla zucca (42° contro 21° di tinta) e il
     bottone smetteva di vincere. Ora 50° contro 23°: si stacca. */
  --azione:      #FFE500;   /* su brace 12,72:1 · testo scuro sopra 13,03:1      */
  --azione-giu:  #E6CE00;   /* stato :hover del bottone d'azione   10,84:1       */

  /* filetti */
  --riga:        #E3E7EA;
  --blu-marchio: #2C6C9C;  /* blu del sottotitolo del logo: testi di servizio, non azioni */
  --riga-scura:  #24384A;

  /* --- movimento (scala unica di casa, design-dna) ----------------------- */
  --instant:.08s; --fast:.18s; --normal:.35s; --slow:.6s; --crawl:1s;
  --ease-out:    cubic-bezier(.22,1,.36,1);
  --ease-secco:  cubic-bezier(.4,0,.2,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);

  /* --- misura ------------------------------------------------------------ */
  --gutter: 24px;
  --contenitore: 1240px;   /* Taste sta a 1140; noi 1240 perché le righe evento sono più larghe */
  --manifesto: #E84E1A;
  --segnaposto: #F7D2C0;
  --scrim-rgb:74,18,8; --veil-rgb:232,78,26;   /* campitura del manifesto: solo display */
  --barra: 76px;
}

/* ==========================================================================
   LA TAVOLOZZA — «2 · MERCATO», bande sature alternate
   01/09/2026 ore 17:40 — scelta da Costantino («questa combinazione qui») e
   CONGELATA: era una delle tre commutabili con ?tavolozza, ora e' l'unica.
   Nessuna sezione su bianco: ogni fascia e' una campitura piena diversa, e
   l'alloro fa il contrappeso freddo che design-dna chiede.

   ⚠️ NON e' la palette di Lorenzo, ed e' voluto. La sua — che e' il marchio
   ufficiale 2026 del cliente — e' #e94e1b / #dc911b / #48709b con i bottoni
   blu, ed era la tavolozza 1. Qui i bottoni sono GIALLI e ci sono un verde e
   una prugna che nel marchio non esistono (53° e 44° di distanza di tinta).
   Messo davanti ai numeri due volte, Costantino ha confermato la 2 com'e':
   «si, bottoni gialli confermata» (02/09/2026, ore 09:04). Non e' una svista:
   NON "correggerla" verso il brief di Lorenzo senza un suo ordine nuovo.
   Se un giorno lo da', si cambiano i VALORI qui sotto e si rifa' il pacchetto
   con impacchetta.mjs: la struttura non si tocca. Vedi STILE-LORENZO.md.
   Le tre tavolozze intere stanno in proposta-29-08.html.prima-congelamento-01-09.
   ========================================================================== */
:root{
  --segnaposto:#F2CDB4;
  --scrim-rgb:122,16,24; --veil-rgb:181,35,26;
  --carta:#FFEFE4; --carta-calda:#FFD9C2; --superficie:#FFF8F2;
  --brace:#2B0A10; --brace-alta:#451420; --scuro:#2B0A10;
  --manifesto:#B5231A;
  --melagrana:#C2261B;                 /* bianco 5,85:1 */
  --zucca:#FF8A00;                     /* testo scuro 7,65:1 */
  --alloro:#1F6B4F;                    /* VERDE alloro: il contrappeso freddo · 6,41:1 */
  --mora:#7B1E4B;                      /* mora vera, non blu · 9,86:1 */
  --inchiostro:#26100C; --tenue:#6E4A40;
  --vino:#B5231A; --oliva:#1F6B4F;
  --accento:#FF9028; --accento-l:#B5231A;
  --azione:#FFE500; --azione-giu:#E6CE00;
  --azione-testo:var(--inchiostro); --azione-su-scuro:var(--azione);
  --riga:#EBD2C2; --riga-scura:#55202A; --blu-marchio:#2C6C9C;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--carta); color:var(--inchiostro);
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;                      /* mai hidden: rompe ScrollTrigger */
}
img{max-width:100%; display:block}
figure{margin:0}   /* il margine di serie del <figure> staccava le foto dalle card */
a{color:inherit}
h1,h2,h3,h4{margin:0; font-weight:900; line-height:.94; letter-spacing:.02em; text-wrap:balance}
p{margin:0 0 1em; text-wrap:pretty}
p:last-child{margin-bottom:0}
.num{font-variant-numeric:tabular-nums}

/* --- tipografia: la scala, adattata dai valori misurati sul riferimento --- */
.t-hero{font-size:clamp(46px,6.2vw,92px); line-height:.94; text-transform:uppercase; letter-spacing:.015em}
.t-sez {font-size:clamp(34px,4.1vw,58px); line-height:.98; text-transform:uppercase; letter-spacing:.02em}
.t-blocco{font-size:clamp(26px,2.6vw,38px); line-height:1.06; letter-spacing:.025em; text-transform:uppercase}
.t-card{font-size:17px; line-height:1.2; font-weight:800; text-transform:uppercase; letter-spacing:.03em}
.occhiello{
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.14em;
  color:var(--oliva); margin:0 0 14px;
}
.occhiello--chiaro{color:var(--accento)}
.contorno{  /* 01/09: l'esempio ha tipografia PIENA. La riga contornata di Taste
     e' stata tolta; la classe resta per non toccare il markup. */
  -webkit-text-stroke:0; -webkit-text-fill-color:currentColor;
}
.guida{max-width:62ch; color:var(--tenue)}
/* i titoli hanno margin 0: senza questa riga il paragrafo tocca la riga
   contornata del titolo (visto il 30/08 sulla sezione Passaporto) */
h2.t-sez + .guida, h2.t-blocco + .guida, h2.t-sez + p, h2.t-blocco + p{margin-top:18px}
.guida--chiara{color:rgba(255,255,255,.82)}

/* --- contenitore -------------------------------------------------------- */
.wrap{width:100%; max-width:var(--contenitore); margin:0 auto; padding:0 var(--gutter)}
.sezione{padding:96px 0}
.sezione--stretta{padding:64px 0}
.scura{background:var(--brace); color:#fff}
.scura .guida{color:rgba(255,255,255,.82)}
.scura .occhiello{color:var(--accento)}

/* --- CAMPITURE SATURE (palette accesa 30/08) -----------------------------
   Si accendono i FONDI. Il colore d'azione resta fuori di qui: sopra una
   campitura ci va comunque il bottone --azione, che deve restare la cosa
   piu' squillante. Contrasti rimisurati il 30/08 dopo l'avvicinamento a Taste:
   bianco su melagrana 6,22:1 · bianco su alloro 6,61:1 ·
   bianco su mora 7,53:1 · inchiostro su zucca 5,80:1.                  */
.campo--melagrana{background:var(--melagrana); color:#fff}
.campo--melagrana .occhiello{color:rgba(255,255,255,.95)}
.campo--melagrana .guida{color:rgba(255,255,255,.92)}
.campo--melagrana .parolone{color:#fff}
.campo--alloro{background:var(--alloro); color:#fff}
.campo--alloro .occhiello{color:rgba(255,255,255,.95)}
.campo--alloro .elenco-secco li,.campo--alloro .elenco-righe li,
.campo--alloro .elenco-secco li:last-child,.campo--alloro .elenco-righe li:last-child{border-color:rgba(255,255,255,.24)}
.campo--alloro .guida{color:rgba(255,255,255,.9)}
/* MORA — la nota che mancava del tutto. Campo profondo: SOLO testo bianco.
   Misurato: la zucca sopra la mora fa 2,34:1, quindi qui l'occhiello NON e'
   --accento come sugli altri fondi scuri, ma bianco.                        */
.campo--mora{background:var(--mora); color:#fff}
.campo--mora .occhiello{color:rgba(255,255,255,.95)}
.campo--mora .guida{color:rgba(255,255,255,.92)}
.campo--mora h2,.campo--mora h3,.campo--mora h4{color:#fff}
.campo--mora .parolone{color:#fff; opacity:.16}
/* il segnaposto foto in --brace-alta sul campo mora leggeva come un buco
   marrone: qui si tinge di mora scura e resta dentro la famiglia. */
.campo--mora .foto--scura{background-color:#2E4A6B}
.campo--melagrana .foto--scura{background-color:#9E3312}   /* 01/09: era #6E0D51 (prugna), stonava sul blu dell'esempio */   /* background-color, non background: la shorthand cancellava le righe del segnaposto */
.campo--mora .elenco-secco li,.campo--mora .elenco-secco li:last-child,
.campo--mora .elenco-righe li,.campo--mora .elenco-righe li:last-child{border-color:rgba(255,255,255,.26)}
.campo--mora .elenco-secco li{color:rgba(255,255,255,.82)}
.campo--mora .elenco-secco b{color:#fff}
/* 01/09 — Costantino: «tutti i testi che non sono su sfondo bianco devono essere
   bianchi». Il campo secondario era l'unico rimasto col testo scuro. */
.campo--zucca{background:var(--zucca); color:#fff}
.campo--zucca .occhiello{color:rgba(255,255,255,.95)}
.campo--zucca .guida{color:rgba(255,255,255,.92)}
.campo--zucca .t-sez,.campo--zucca h2,.campo--zucca h3,.campo--zucca h4{color:#fff}
/* 01/09 — su arancio il rosso dei link fa 1,89:1 e il grigio dei testi 2,48:1.
   L'inchiostro fa 6,61:1. Misurato, non scelto a occhio. */
.campo--zucca .link,.campo--zucca .card__meta,.campo--zucca .card__testo,
.campo--zucca .elenco-righe span,.campo--zucca .elenco-righe b,
.campo--zucca .elenco-secco span,.campo--zucca .elenco-secco b,
.campo--zucca .foto__nota,.campo--zucca .elenco-servizio span,
.campo--zucca .elenco-servizio b,.campo--zucca p,.campo--zucca li{color:#fff}
.campo--zucca .elenco-righe li,.campo--zucca .elenco-secco li,
.campo--zucca .elenco-servizio li{border-color:rgba(255,255,255,.34)}
.campo--zucca .filtri select{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4)}

/* ══ 01/09 — REGOLA GENERALE DI COSTANTINO ═════════════════════════════════
   «tutti i testi che non sono su sfondo bianco devono essere bianchi».
   Vale su TUTTE e tre le campiture, non solo sulla secondaria: restavano
   grigi i metadati degli elenchi ([Comune], [Che cosa produce]) e le note.  */
.campo--zucca, .campo--mora, .campo--melagrana, .campo-pieno, .scura, .apertura{
  --tenue:rgba(255,255,255,.86);
}
.campo--zucca p, .campo--mora p, .campo--melagrana p, .campo-pieno p, .scura p,
.campo--zucca li, .campo--mora li, .campo--melagrana li, .campo-pieno li, .scura li,
.campo--zucca span:not(.tag):not(.card__eti), .campo--mora span:not(.tag):not(.card__eti),
.campo--melagrana span:not(.tag):not(.card__eti), .campo-pieno span:not(.tag):not(.card__eti),
.campo--zucca b, .campo--mora b, .campo--melagrana b, .campo-pieno b,
.campo--zucca h2, .campo--mora h2, .campo--melagrana h2, .campo-pieno h2,
.campo--zucca h3, .campo--mora h3, .campo--melagrana h3, .campo-pieno h3,
.campo--zucca h4, .campo--mora h4, .campo--melagrana h4, .campo-pieno h4{ color:#fff; }
/* le CARD dentro le campiture restano bianche con testo scuro: li' il fondo
   E' bianco, quindi la regola non si applica. */
.campo--zucca .card, .campo--mora .card, .campo--melagrana .card, .campo-pieno .card,
.campo--zucca .card *, .campo--mora .card *, .campo--melagrana .card *,
.campo-pieno .card *{ color:var(--inchiostro); }
.campo--zucca .card .link, .campo--mora .card .link,
.campo--melagrana .card .link, .campo-pieno .card .link{ color:var(--accento-l); }

/* i titoli grandi si accendono: e' quello che fa Taste con il magenta ---- */
.t-sez{color:var(--vino)}
.scura .t-sez,.campo--melagrana .t-sez,.campo--alloro .t-sez,.campo--mora .t-sez{color:#fff}

/* --- bottoni: PILLOLA, 52px, maiuscolo spaziato -------------------------
   Forma presa dall'esempio del 01/09 (pillole piene, "PRENOTA ORA").
   Il colore del testo NON e' piu' fisso: arriva da --azione-testo, perche'
   sul rosso dell'esempio l'inchiostro fa 4,02:1 e il bianco 4,71:1.        */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 30px; border:0; border-radius:999px; cursor:pointer;
  font:800 14px/1 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.08em;
  text-decoration:none; transition-property:background-color,color,transform,border-color;
  transition-duration:var(--fast); transition-timing-function:var(--ease-out);
}
.btn--azione{background:var(--azione); color:var(--azione-testo)}
/* 01/09 — il bottone d'azione ora e' BLU (Lorenzo). Sulla campitura blu
   sparirebbe: li' diventa bianco con testo inchiostro, 18,88:1. */
.campo--mora .btn--azione,.campo--melagrana .btn--azione{background:#fff; color:var(--inchiostro)}
.campo--mora .btn--azione:hover,.campo--melagrana .btn--azione:hover{background:#EDE7DF}
/* 01/09 — Lorenzo: «Nessun bottone nero». Il bottone scuro diventa blu,
   che e' il suo colore per i bottoni di interazione. */
.btn--scuro {background:var(--azione); color:var(--azione-testo)}
.btn--filo  {background:transparent; color:inherit; box-shadow:inset 0 0 0 2px currentColor}
.btn:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){
  .btn--azione:hover{background:var(--azione-giu)}
  .btn--scuro:hover{background:var(--azione-giu)}
  .btn--filo:hover{background:currentColor}
  .btn--filo:hover span{color:var(--carta)}          /* su fondo chiaro la pillola si riempie d'inchiostro */
  /* 🔴 16/09/2026, giro WP67 — MISURATO, non dedotto: il bottone «Altre foto»
     della galleria in home sta in `section.sezione.campo--zucca`, e `campo--zucca`
     NON era in questo elenco. Col mouse sopra la pillola si riempiva di
     currentColor (= #fff, perché su quel campo il testo è bianco) e lo span
     restava chiaro: **1,00:1**, una pillola bianca vuota (page.hover vero, non
     simulato: `strumenti/guarda-wp67.mjs`). Aggiunti QUI, dove sta la regola,
     tutti i campi rimasti col testo bianco — `campo--zucca`, `campo-pieno`,
     `apertura` — non solo quello del difetto: erano lo stesso buco.
     Dopo: **17,72:1**. ⚠️ Chi aggiunge un fondo col testo bianco deve aggiungerlo
     anche qui: l'elenco a mano resta la trappola, la proposta per toglierlo è
     in `note/GIRO-WP67-16-09.md`. */
  .scura .btn--filo:hover span,.hero .btn--filo:hover span,
  .campo--melagrana .btn--filo:hover span,
  .campo--mora .btn--filo:hover span,
  .campo--zucca .btn--filo:hover span,
  .campo-pieno .btn--filo:hover span,
  .apertura .btn--filo:hover span,
  .campo--alloro .btn--filo:hover span{color:var(--brace)}  /* su fondo scuro si riempie di bianco */
}
.btn:focus-visible,.menu a:focus-visible,.link:focus-visible,.mosaico__t:focus-visible,
.muro__t:focus-visible,.riga-ev:focus-visible{
  outline:3px solid var(--azione); outline-offset:3px;
  box-shadow:0 0 0 6px var(--brace);   /* il secondo anello: il giallo da solo fa 1,8:1 su carta */
}
/* 🔴 03/09/2026 fase 5 — I LINK DEL PIE' NON AVEVANO NESSUN ANELLO DI FUOCO.
   Misurato forzando :focus-visible via CDP (strumenti/stati.mjs): prendevano
   quello di serie del browser, `rgb(0,95,204)` da 1px, che sul fondo melagrana
   del piè fa 1,16:1 — cioè chi naviga con la tastiera non vede dove sta.
   Difetto di prima di oggi, non introdotto dalle pagine interne: si ripara qui
   perché il piè è uno solo e da oggi lo usano anche loro.
   Giallo su melagrana: 4,03:1 (la soglia per un indicatore è 3:1).          */
.pie a:focus-visible{
  outline:3px solid var(--azione); outline-offset:3px;
  box-shadow:0 0 0 6px var(--brace);
}

/* --- link testuale ------------------------------------------------------ */
.link{
  font:800 13px/1 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.1em;
  color:var(--vino); text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  min-height:44px;
}
.link::after{content:"→"; transition:transform var(--fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .link:hover::after{transform:translateX(5px)} }

/* --- etichette (le due assi del GLOSSARIO, tenute separate) -------------- */
.tag{
  display:inline-block; padding:5px 9px; border-radius:0;
  font:800 11px/1 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.09em;
}
.tag--progetto{background:var(--oliva); color:#fff}
.tag--prezzo  {background:var(--inchiostro); color:var(--accento)}   /* 5,5:1 — NON e' il colore d'azione */
.tag--posti   {background:transparent; color:var(--vino); box-shadow:inset 0 0 0 1.5px currentColor}
.scura .tag--posti{color:rgba(255,255,255,.88)}

/* --- SEGNAPOSTO FOTO: dichiarato, non finto ------------------------------ */
.foto{
  /* 31/08 h17: il segnaposto era stato portato a #E8ECEF (grigio FREDDO, tinta
     206°) per «togliere i toni di terra». Ha tolto anche il calore, e questi
     riquadri sono decine: erano meta' dello «spento». Ora seguono la carta
     della tavolozza — chiari e caldi, e sempre dichiarati dalle righe. */
  position:relative; overflow:hidden; background:var(--segnaposto);
  background-image:
    repeating-linear-gradient(135deg, rgba(90,25,10,.10) 0 12px, transparent 12px 24px);
  outline:1px solid rgba(0,0,0,.12); outline-offset:-1px;
  display:flex; align-items:flex-end;
}
.foto--scura{background:var(--brace-alta); background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px)}
.foto__nota{
  position:relative; z-index:2; margin:0; padding:10px 12px; max-width:100%;
  font:700 11px/1.35 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.07em;
  color:var(--inchiostro); background:var(--carta-calda);
}
.foto--scura .foto__nota{color:rgba(255,255,255,.7); background:rgba(43,10,16,.88)}
.foto--16x9{aspect-ratio:16/9}
.foto--4x3 {aspect-ratio:4/3}
.foto--1x1 {aspect-ratio:1/1}
.foto--3x4 {aspect-ratio:3/4}

/* --- avviso di cantiere in cima ----------------------------------------- */
.cantiere{
  background:var(--inchiostro); color:#fff; text-align:center;
  padding:9px 16px; font:700 12px/1.4 "Montserrat",sans-serif; letter-spacing:.04em;
  position:relative; z-index:60;
}

/* ==========================================================================
   TESTATA  — 8 voci in barra a 1440 (adattamento dichiarato: Taste ne tiene 0)
   ========================================================================== */
.topbar{
  background:var(--zucca); color:rgba(20,33,43,.9);
  font:700 12px/1 "Montserrat",sans-serif; letter-spacing:.08em; text-transform:uppercase;
}
.topbar__in{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:40px; flex-wrap:wrap}
.topbar__date{color:var(--brace)}   /* 5,3:1 su zucca */
/* ── COUNTDOWN (Lorenzo, 01/09/2026: «sostituito il testo promozionale fisso
   con il modulo Countdown»). Sta sulla fascia secondaria #dc911b, dove il
   bianco fa 2,59:1: il testo e' quindi INCHIOSTRO, 7,29:1. */
.conto{display:flex; align-items:center; gap:14px; margin:0; color:var(--inchiostro)}
.conto__eti{opacity:.85}
.conto__q{display:inline-flex; align-items:baseline; gap:5px}
.conto__q b{font:900 17px/1 "Montserrat",sans-serif; letter-spacing:0;
  font-variant-numeric:tabular-nums; min-width:2ch; text-align:right}
.conto__q i{font-style:normal; font-size:10px; letter-spacing:.1em; opacity:.8}
@media (max-width:820px){ .conto__eti{display:none} .conto{gap:10px} }
.testata{
  position:sticky; top:0; z-index:50; background:var(--carta);
  border-bottom:1px solid var(--riga);
}
.testata__in{display:flex; align-items:center; gap:22px; min-height:var(--barra)}
/* 01/09 — il marchio era SCHIACCIATO: 1105x266 (4,15:1) reso 108x38 (2,84:1).
   La regola height/width:auto era giusta, ma in un flex il logo si restringeva
   insieme agli altri. `flex:0 0 auto` gli toglie il permesso di stringersi. */
.marchio{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto; }
/* Il marchio è LETTERING DISEGNATO: non si ricompone con un font.
   File ufficiale del cliente, preso da festivalgastronomica.it il 31/08/2026. */
.marchio img{ height:38px; width:auto; max-width:none; flex:0 0 auto; display:block; }
@media (max-width:700px){ .marchio img{ height:30px; } }
.menu{display:flex; align-items:center; gap:4px; margin-left:auto; list-style:none; padding:0; margin-block:0}
.menu a{
  display:flex; align-items:center; min-height:44px; padding:0 11px; text-decoration:none;
  font:700 13px/1 "Montserrat",sans-serif; letter-spacing:.02em; white-space:nowrap;
  transition:color var(--fast) var(--ease-secco);
}
@media (hover:hover) and (pointer:fine){ .menu a:hover{color:var(--vino)} }
.testata .btn{margin-left:14px}
/* 30/08 guardando: «Prenota un evento» andava a capo dentro il bottone e la
   testata sembrava sciatta. Il bottone e' l'unico giallo della pagina: non puo'
   essere la cosa fatta peggio. */
.testata .btn--azione{white-space:nowrap}
.apri-menu{display:none}
@media (max-width:1180px){
  .menu{display:none}
  .apri-menu{display:inline-flex; margin-left:auto}
}
.testata .btn--azione .corto{display:none}
@media (max-width:760px){
  .testata__in{gap:10px; min-height:64px}
  .marchio{font-size:17px}
  .testata .btn{margin-left:0; padding:0 14px; font-size:12px; min-height:44px}
  .testata .btn--azione{margin-left:auto}
  .apri-menu{margin-left:0; order:3}
  .testata .btn--azione .lungo{display:none}
  .testata .btn--azione .corto{display:inline}
}

/* ==========================================================================
   HERO a fascia — 78vh (Taste: 724/900 = 80%)
   ========================================================================== */
.hero{position:relative; height:78vh; min-height:520px; display:flex; align-items:flex-end; overflow:hidden}
.hero__media{position:absolute; inset:0}
/* 16/09/2026 — GIRO WP53 · LO STRATO FERMO CHE TAPPA IL VUOTO.
   DIFETTO (visto dal capo, riprodotto e misurato): muovendo il mouse comparivano
   strisce chiare ai lati dell'apertura, soprattutto a DESTRA. `.hero__media` porta
   `data-mouse="14"` e viene traslato fino a ~13,4 px per lato da `gastronomica.js:322`;
   essendo grande esattamente quanto l'hero (`inset:0`), ogni pixel di traslazione
   scopriva il fondo della pagina sul lato opposto — campionato rgb(255,239,228),
   cioe' il `body`, perche' `.hero` non aveva un fondo suo. A sinistra appariva rosato
   perche' `.hero__scrim` resta fermo e lo vela.

   ⛔ TRE STRADE PROVATE E SCARTATE, con la misura accanto:
   1. `repeat` («i pixel infiniti»): gia' fallito il 05/09/2026 — ogni giunzione della
      mattonella si leggeva come una riga verticale nel fondo.
   2. Solo `background-size` piu' grande (`calc(100% + 120px)`): NON chiude niente.
      Misurato il 16/09 — hero scoperto 13,39 px, identico a prima. L'immagine e'
      dipinta DENTRO il box, e cio' che si muove e finisce e' il BOX, non l'immagine.
   3. Sovradimensionare il box (`.hero__media[data-mouse]{inset:-20px}`): chiude il
      vuoto ma **taglia il pesce in alto** e ne cambia misura e posizione, perche' il
      pesce e' `.apertura-marchio::before` e le sue regole sono in percentuale sul box.
      Il capo ha chiesto l'esatto contrario: «mantenere il pesce li' dove sta».

   ✅ RIPARAZIONE: un secondo strato con la STESSA immagine e la STESSA inquadratura,
   messo sull'hero, che NON si muove. Quando l'apertura scivola, sotto non si vede piu'
   il crema della pagina ma la continuazione del motivo arancione.
   Costa zero sulla geometria: `.apertura-marchio` e il pesce non vengono toccati di un
   pixel, l'inquadratura sotto il testo non cambia, quindi non cambia il contrasto, e
   non si perde un millimetro di illustrazione ai bordi. L'immagine e' la stessa URL:
   nessuno scaricamento in piu'.
   Ciclo che lo tiene: `node strumenti/bordi-hero-wp53.mjs <fase>` -> deve dare VERDE. */
.hero{ background:#ED6E4E url(asset/marchio/motivo-lorenzo-2026.jpg) center/cover no-repeat; }
/* il velo laterale NON si sovradimensiona: deve restare incollato ai bordi dell'hero */
.hero__media .foto{position:absolute; inset:0; align-items:center; justify-content:center}
.hero__scrim{
  /* 01/09 — lo scrim era tarato su una fotografia. Sull'illustrazione di Lorenzo
     spegneva il disegno e produceva una cucitura visibile. Resta il solo velo
     laterale, sotto la colonna del testo, e molto piu' leggero: il fondo
     dell'illustrazione fa gia' 3,07:1 col bianco, che basta per un titolo grande. */
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to right,
    rgba(120,38,10,.46)  0%,
    rgba(120,38,10,.34) 30%,
    rgba(120,38,10,.12) 55%,
    rgba(120,38,10,0)   74%);
}

.hero__in{position:relative; z-index:3; width:100%; padding-bottom:52px; color:#fff}
.hero__in h1{text-shadow:0 2px 14px rgba(11,2,4,.85)}
/* 30/08 — DIFETTO: la riga contornata spariva sulla pietra chiara del vicolo.
   Provata anche in zucca: MISURATA 3,36:1 nel caso peggiore, troppo poco -> scartata.
   Resta BIANCA (11,27:1 misurato contro il 99o percentile del fondo sotto al titolo)
   con il filo portato da 2,5 a 3,5px, perche' a 92px un filo da 2,5 e' troppo magro. */
/* 31/08 — DIFETTO VERO, non di gusto: con -webkit-text-fill-color:transparent
   il `text-shadow` disegna comunque LA SAGOMA PIENA della lettera. I due
   aloni (12px a .92 e 30px a .8) riempivano l'interno delle lettere di scuro
   e si mangiavano il filo bianco da 3,5px: «TRENTADUE GIORNI» leggeva come una
   parola marrone su fondo marrone. La misura del 30/08 diceva 11,27:1 perche'
   misurava il FONDO sotto al titolo, non cosa il titolo si dipingeva addosso.
   Rimedio: `drop-shadow`, che segue i pixel davvero disegnati (il filo) e non
   la sagoma della lettera, quindi l'interno resta vuoto. */
/* 01/09 — il testo ora e' PIENO (stile dell'esempio): l'ombra che serviva a
   proteggere il filo del contorno adesso sporca la lettera. Ridotta al minimo
   che tiene la leggibilita' sopra la foto. */
.hero__in h1 .contorno{-webkit-text-stroke-width:0;
  text-shadow:none;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.42))}
/* 31/08 — MISURATO: con l'hero acceso il bianco dell'occhiello cadeva a 3,58:1
   sul 99o percentile del fondo (serve 4,5 per un testo da 13px). Non si e'
   riscurito l'hero — sarebbe tornato spento: le due voci vanno su una
   PASTIGLIA piena, che e' poi la forma che il marchio 2026 usa gia' nel banner
   per «2026 · III Edizione · Terracina». Bianco su --brace: 15,20:1. */
.hero__riga{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 18px;
  font:800 13px/1 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.12em;
  color:#fff}
.hero__riga span{background:var(--brace); padding:9px 13px; border-radius:2px;
  box-shadow:0 2px 10px rgba(0,0,0,.28)}
.hero__sub{max-width:56ch; margin:18px 0 26px; font-size:18px; color:rgba(255,255,255,.9)}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px}
.hero__giu{
  position:absolute; right:var(--gutter); bottom:52px; z-index:3; color:rgba(255,255,255,.75);
  font:700 12px/1 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.12em;
}

/* --- fondo vivo (comportamento preso da ellusioncreative, tecnica nostra) - */
#fondoVivo{
  position:fixed; inset:0; z-index:5; pointer-events:none;  /* SOPRA il contenuto, altrimenti
    i fondi opachi delle sezioni lo coprivano e la luce non si vedeva mai (visto il 30/08) */
  mix-blend-mode:soft-light; opacity:.9;
}
.contenuto{position:relative; z-index:1}

/* ==========================================================================
   COMPONENTI comuni
   ========================================================================== */
.griglia{display:grid; gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){ .g5{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){ .g3,.g2{grid-template-columns:1fr} .g5{grid-template-columns:repeat(2,1fr)} }

.testa-sez{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin:0 0 34px}

/* card evento — "la card più curata del sito" (Andrea) */
.card-ev{
  background:var(--superficie); display:flex; flex-direction:column;
  outline:1px solid var(--riga); outline-offset:-1px;
}
.card-ev__data{
  display:flex; align-items:baseline; gap:10px; padding:16px 18px 0;
  font-weight:900; letter-spacing:-.01em;
}
.card-ev__giorno{font-size:38px; line-height:1; color:var(--vino)}
.card-ev__mese{font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--tenue)}
.card-ev__ora{margin-left:auto; font-size:13px; font-weight:800; color:var(--tenue)}
.card-ev__corpo{padding:12px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1}
.card-ev__luogo{font-size:14px; color:var(--tenue); margin:0}
.card-ev__tag{display:flex; flex-wrap:wrap; gap:6px}
.card-ev .btn{margin-top:auto; width:100%}

/* card generica */
.card{background:var(--superficie); outline:1px solid var(--riga); outline-offset:-1px; display:flex; flex-direction:column}
.card__corpo{padding:16px 18px; display:flex; flex-direction:column; gap:8px; flex:1}
.card__meta{font-size:13px; color:var(--tenue); margin:0}

/* tendina filtro (presa dal line-up di Taste) */
.filtri{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 26px}
.filtri select, .filtri input{
  height:46px; padding:0 14px; border:1.5px solid var(--riga-scura); border-radius:0;
  background:var(--superficie); color:var(--inchiostro);
  font:700 13px/1 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.06em;
}
.scura .filtri select, .scura .filtri input{background:var(--brace-alta); color:#fff; border-color:var(--riga-scura)}
.filtri__conta{font:700 13px/1 "Montserrat",sans-serif; color:var(--tenue); margin-left:auto}

/* parola gigante contornata usata come texture (presa da Taste: TICKET TYPES) */
.parolone{
  position:absolute; left:0; right:0; z-index:0; pointer-events:none; user-select:none;
  font:900 clamp(90px,15vw,230px)/1 "Montserrat",sans-serif; text-transform:uppercase;
  letter-spacing:-.04em; white-space:nowrap; color:var(--accento); opacity:.30;
  -webkit-text-stroke:2px currentColor; -webkit-text-fill-color:transparent;
}

/* modulo */
/* 03/09/2026 — il modulo passa da 2 campi finti a 7 campi VERI, quelli che il
   server scrive in `candidatura`. La terza colonna «auto» serviva al bottone
   accanto ai due campi: con sette campi il bottone sta su una riga sua, e la
   griglia torna a due colonne. La forma cambia perche' e' cambiato il dato,
   non per gusto. */
.modulo{display:grid; gap:12px; grid-template-columns:1fr 1fr; align-items:end}
.modulo label{display:flex; flex-direction:column; gap:6px; font:800 12px/1 "Montserrat",sans-serif;
  text-transform:uppercase; letter-spacing:.1em}
.modulo input,.modulo select{height:52px; padding:0 14px; border:1.5px solid var(--riga-scura); border-radius:0;
  background:var(--superficie); font:400 16px/1 "Montserrat",sans-serif; color:var(--inchiostro)}
.modulo textarea{padding:12px 14px; border:1.5px solid var(--riga-scura); border-radius:0;
  background:var(--superficie); font:400 16px/1.5 "Montserrat",sans-serif; color:var(--inchiostro);
  resize:vertical}
.modulo .m-largo{grid-column:1 / -1}
.modulo button{justify-self:start; grid-column:1 / -1}
/* l'asterisco e' decorativo: chi legge con un lettore di schermo sente
   «obbligatorio» da `required`, non un asterisco letto ad alta voce.
   ⛔ NON prende var(--azione): il colore d'azione sta SOLO dove si clicca
   (design-dna). Qui eredita il colore dell'etichetta. */
.modulo .obb{color:inherit}
@media (max-width:820px){ .modulo{grid-template-columns:1fr} }

/* piè di pagina */
.pie{background:var(--melagrana); color:rgba(255,255,255,.9); padding:64px 0 34px}   /* 01/09: era nero */
.pie a{text-decoration:none}
.pie h4{font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:#fff; margin:0 0 14px}   /* arancio su rosso faceva 1,89:1 */
.pie ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14px}
.pie__legali a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.pie__coda{margin-top:44px; padding-top:20px; border-top:1px solid rgba(255,255,255,.28); display:flex; flex-wrap:wrap;
  gap:14px; justify-content:space-between; font-size:12px; color:rgba(255,255,255,.8)}
/* 19/09/2026, giro g28 · la riga dell'associazione (Impostazioni → Recapiti) SOTTO quella del festival,
   stesso corpo e stesso colore: è la stessa riga di servizio, non un titolo. */
.pie__chi{display:flex; flex-direction:column; gap:4px}
/* 19/09/2026, giro g34 · ora è UNA frase lunga col collegamento a Tango (Pamela 14:01): va a capo dentro la
   sua colonna e lascia Privacy · Cookie sulla stessa riga a destra finché c'è posto (a 1440 sì, al telefono
   scendono sotto). Il collegamento è sottolineato come quelli a destra: `.pie a` toglie la sottolineatura.
   Al telefono resta IN LINEA nella frase: la regola dei 44 px (`.pie__coda a`, sez. 2 più sotto, 0,1,1) lo
   farebbe un blocco alto 44 in mezzo alla riga; un collegamento dentro una frase è esente dalla misura. */
.pie__coda .pie__chi{display:block; flex:1 1 30rem; min-width:0; max-width:52rem; line-height:1.6}
.pie__coda .pie__legali{flex:none}
.pie__coda .pie__chi a{display:inline; min-height:0; min-width:0; color:#fff; text-decoration:underline; text-underline-offset:3px}

/* 19/09/2026, giro g28 · I MODULI DI ISCRIZIONE: nome, cognome, email e due caselle (riunione del 18/09).
   ⚠️ Questo foglio arriva PRIMA delle pile (pagine/percorso) e di rifiniture.css: le regole qui vincono per
      SPECIFICITÀ, non per ordine. `.pie__nl-f input` (0,1,1, nelle due pile) darebbe alle caselle 52 px di
      altezza, bordo e padding come a un campo di testo: da qui le regole a tre classi sulle caselle.
   Piè: griglia a due colonne (Nome | Cognome, poi Email, caselle, controllo e bottone a tutta riga), una
   colonna sola sotto i 360 px (a 390 i due campi sono larghi 170 px: un nome ci sta, e il piè resta più corto). Caselle 22 px e marrone #46220F come quelle del Manifesto e la casella
   anti-robot sulle fasce colorate (misura del WP85b). */
/* 19/09/2026, giro g36 · MODULO COMPATTO (capo, schermate a 1440: «qui c'è questo spazio che mi fa impazzire»).
   Prima: testo a sinistra alto 40 px (piè) / 122 (home) accanto a un modulo alto 448 / 658 = un rettangolo vuoto
   sotto il testo; e 41-43 px vuoti fra una riga di campi e l'etichetta dopo (misura sull'inchiostro,
   strumenti/prova-g36.mjs). Adesso, nel piè e nel blocco home:
   · il testo SOPRA e il modulo SOTTO a tutta larghezza (affiancati la differenza d'altezza restava > 120 px);
   · griglia a 12 colonne: Nome | Cognome | Email (in home anche Profilo) su una riga, le due caselle una accanto
     all'altra, «Non sono un robot» a sinistra e ISCRIVIMI a destra sulla stessa riga;
   · sotto i 900 px (solo home) due campi per riga; sotto i 600 px tutto in colonna.
   · le etichette dei CAMPI DI TESTO perdono i 44 px di `label{min-height:44px}` delle pile: il bersaglio di
     tocco è il campo (52 px), l'etichetta alta 44 con il testo in basso era proprio il vuoto di 41 px. Le
     etichette delle CASELLE (`.nl-spunta`) i 44 li tengono: lì l'etichetta è il bersaglio.
   Etichette, campi, name, required, caselle, esca e casella anti-robot: invariati (solo posizione e spazi). */
.pie .pie__nl:has(.pie__nl-f--persona){grid-template-columns:1fr; gap:18px; align-items:start}
.newsletter .newsletter__in:has(.newsletter__f--persona){grid-template-columns:1fr; gap:24px}
.pie .pie__nl-f.pie__nl-f--persona,
.newsletter .newsletter__f.newsletter__f--persona{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px 16px; align-items:start}
.pie .pie__nl-f--persona > *,
.newsletter .newsletter__f--persona > *{grid-column:1 / -1; margin:0}
.pie .pie__nl-f--persona > .campo-nl{grid-column:span 4}
.newsletter .newsletter__f--persona > .campo-nl{grid-column:span 3}
.pie .pie__nl-f--persona > .nl-spunta,
.newsletter .newsletter__f--persona > .nl-spunta{grid-column:span 6}
.pie .pie__nl-f--persona > .gastro-antispam,
.newsletter .newsletter__f--persona > .gastro-antispam{grid-column:1 / 9; align-self:center}
.pie .pie__nl-f--persona > .btn--azione,
.newsletter .newsletter__f--persona > .btn--azione{grid-column:9 / -1; justify-self:end; align-self:center}
.pie .pie__nl-f--persona > .esca-bot,
.newsletter .newsletter__f--persona > .esca-bot{grid-column:auto}
.pie .pie__nl-f--persona .campo-nl input{flex:none}
.pie .pie__nl-f--persona .campo-nl label,
.newsletter .newsletter__f--persona .campo-nl label{display:flex; align-items:flex-end; gap:.3em; min-height:0}   /* gap: in flex lo spazio fra la parola e «*» sparisce */
@media (max-width:900px){
  .newsletter .newsletter__f--persona > .campo-nl{grid-column:span 6}
}
@media (max-width:599px){
  .pie .pie__nl-f--persona > *,
  .pie .pie__nl-f--persona > .campo-nl,
  .pie .pie__nl-f--persona > .nl-spunta,
  .pie .pie__nl-f--persona > .gastro-antispam,
  .newsletter .newsletter__f--persona > *,
  .newsletter .newsletter__f--persona > .campo-nl,
  .newsletter .newsletter__f--persona > .nl-spunta,
  .newsletter .newsletter__f--persona > .gastro-antispam{grid-column:1 / -1}
  .pie .pie__nl-f--persona > .btn--azione,
  .newsletter .newsletter__f--persona > .btn--azione{grid-column:1 / -1; justify-self:start}
  .pie .pie__nl-f--persona > .esca-bot,
  .newsletter .newsletter__f--persona > .esca-bot{grid-column:auto}
  /* in colonna la riga anti-robot (alta 44 per il tocco, casella da 22 al centro) lasciava 25 px sopra e 23 sotto:
     -6 px sopra e sotto dentro lo spazio di 12 fra le righe, senza coprire i vicini. */
  .pie .pie__nl-f--persona > .gastro-antispam,
  .newsletter .newsletter__f--persona > .gastro-antispam{margin:-6px 0}
}
.nl-spunta{display:flex; align-items:flex-start; gap:10px; margin:0; min-height:44px; cursor:pointer;
  font:400 14px/1.5 "Montserrat",sans-serif; color:#fff; text-wrap:pretty}
.nl-spunta a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.pie .pie__nl-f .nl-spunta input[type="checkbox"],
.newsletter .newsletter__f .nl-spunta input[type="checkbox"]{width:22px; height:22px; min-width:0; min-height:0; max-width:none;
  padding:0; margin:0; flex:none; border:0; accent-color:#46220F; cursor:pointer}

/* rivelazione: TENDINA con clip-path, mai fade (design-dna mov. 9) --------- */
.rivela{clip-path:inset(0 0 101% 0); will-change:clip-path}
.rivela.fatto{clip-path:inset(0 0 0 0)}


/* --- la foto VERA sta dentro il segnaposto: se il file manca, resta il fondo in tinta --- */
.foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.foto.piena .foto__nota,
.foto:has(img) .foto__nota{display:none}
.foto.piena,
.foto:has(img){background-image:none}

/* --- accessibilità: salto al contenuto --------------------------------- */
.salta{position:absolute; left:-9999px; top:0; z-index:99}
.salta:focus{left:12px; top:12px; background:var(--inchiostro); color:var(--azione); padding:12px 16px;
  font:800 13px/1 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.08em}

@media (prefers-reduced-motion:reduce){
  .rivela{clip-path:none !important}
  *{animation-duration:.01ms !important; transition-duration:.15s !important}
}


/* ══════════ blocco 2 di 7 ══════════════════════════════════════════ */
/* ==========================================================================
   VARIANTE A — "il nastro dei 32 giorni".  Elemento principale: IL TEMPO.
   Scena pinnata: movimento 6 (tratto orizzontale dentro lo scroll verticale)
   ========================================================================== */
/* 01/09 — DIFETTO VERO, trovato spegnendo un elemento alla volta:
   `.parolone` (la parola gigante di sfondo, white-space:nowrap, ~1577px)
   e' assoluta e il suo blocco contenitore e' `.scena__sticky`, che pero' a
   <=900px diventa `position:static`. Persa l'ancora, la parola usciva dalla
   sezione e allungava il documento di 1187px a 390px di finestra.
   Il cancello non lo vedeva perche' confronta scrollWidth con innerWidth,
   che sotto emulazione mobile valgono 390 e 1560. `.apertura` non aveva il
   difetto perche' aveva gia' overflow:hidden. */
/* 01/09 — `overflow:hidden` qui ROMPE `position:sticky` del figlio: fa di
   .scena un contenitore di scorrimento, la scena non si aggancia piu' e lascia
   due schermate vuote (misurato: fotogrammi bianchi al 89% e 91%).
   `overflow:clip` taglia allo stesso modo ma NON crea il contenitore, quindi
   trattiene il .parolone e lascia vivo il pin. */
.scena{position:relative; height:220svh; overflow:clip}
.scena__sticky{position:sticky; top:0; height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:26px}
.scena .parolone{top:50%; transform:translateY(-50%)}
@media (max-width:900px){ .scena__sticky{position:relative} }
.scena__testa{position:relative; z-index:2}
.scena__testa .guida{max-width:52ch}
/* 01/09 — il nastro dei 32 giorni e' l'unica riga piu' larga della pagina.
   `overflow:hidden` da solo non impediva che allungasse lo scrollWidth del
   documento a finestra stretta: serve anche il contenimento della pittura e
   un tetto esplicito alla larghezza. */
.nastro-pista{position:relative; z-index:2; width:100%; max-width:100%;
  overflow:hidden; contain:paint; padding:6px 0}
.nastro{display:flex; gap:10px; padding-left:max(var(--gutter),calc((100vw - var(--contenitore))/2 + var(--gutter)))}
/* 01/09 — la scena era su fondo nero. Costantino: usare lo stile CHIARO
   dell'elenco (carta, date rosse, schede bianche). */
.giorno{
  flex:0 0 128px; height:158px; padding:14px 12px; background:var(--superficie);
  outline:1px solid var(--riga); outline-offset:-1px; display:flex; flex-direction:column; gap:4px;
  transition-property:background-color,outline-color,transform; transition-duration:var(--normal);
  transition-timing-function:var(--ease-out);
}
.giorno__n{font:900 30px/1 "Montserrat",sans-serif; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.giorno__gs{font:800 11px/1 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.12em; color:var(--tenue)}
.giorno__c{margin-top:auto; font:700 11px/1.3 "Montserrat",sans-serif; color:var(--tenue)}
.giorno__p{font:800 10px/1 "Montserrat",sans-serif; letter-spacing:.1em; color:var(--accento-l); text-transform:uppercase}
.giorno.attivo{background:var(--melagrana); outline-color:var(--melagrana); transform:translateY(-10px)}
.giorno.attivo .giorno__n,.giorno.attivo .giorno__p{color:#fff}
.giorno.attivo .giorno__gs,.giorno.attivo .giorno__c{color:rgba(255,255,255,.85)}
.scena__piede{position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.scena__scheda{max-width:640px}
.scena__scheda h3{font-size:clamp(24px,2.4vw,36px); text-transform:uppercase}
.scena__scheda .card-ev__tag{margin-top:12px}
.scena__conta{font:900 14px/1 "Montserrat",sans-serif; letter-spacing:.14em; color:var(--accento-l); font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .scena{height:auto}
  .scena__sticky{position:static; height:auto; padding:64px 0}
  .nastro-pista{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .nastro{transform:none !important; padding-left:var(--gutter); padding-right:var(--gutter)}
  .giorno{flex-basis:108px; height:136px}
}

/* mosaico d'ingresso (preso da Taste, §2.1 punto 5) */
.mosaico{display:grid; grid-template-columns:repeat(4,1fr); gap:2px}
.mosaico__t{position:relative; text-decoration:none; display:block; overflow:hidden}
.mosaico__t .foto{aspect-ratio:1/1; align-items:flex-end}
.mosaico__e{
  position:absolute; left:0; right:0; bottom:0; z-index:3; background:var(--carta);
  margin:14px; padding:12px 14px; font:800 14px/1.2 "Montserrat",sans-serif;
  text-transform:uppercase; letter-spacing:.03em;
  transition:background-color var(--fast) var(--ease-secco), color var(--fast) var(--ease-secco);
}
@media (hover:hover) and (pointer:fine){ .mosaico__t:hover .mosaico__e{background:var(--melagrana); color:#fff} }
@media (max-width:820px){ .mosaico{grid-template-columns:repeat(2,1fr)} }

/* ==========================================================================
   VARIANTE B — "il mosaico".  Elemento principale: LE CATEGORIE.
   Nessuna foto singola grande: la pagina si apre con 8 tessere.
   ========================================================================== */
.muro{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(190px,26vh); gap:2px; background:var(--riga)}
.muro__testo{grid-column:span 2; grid-row:span 2; background:var(--scuro); color:#fff;
  padding:40px 40px 40px max(40px, calc((100vw - var(--contenitore))/2 + var(--gutter))); display:flex; flex-direction:column; justify-content:flex-end; gap:16px; position:relative; overflow:hidden}
.muro__t{position:relative; overflow:hidden; text-decoration:none; display:block; background:var(--carta-calda)}
.muro__t .foto{position:absolute; inset:0}
.muro__t .mosaico__e{margin:12px}
.muro__t--alta{grid-row:span 2}
@media (hover:hover) and (pointer:fine){ .muro__t:hover .mosaico__e{background:var(--melagrana); color:#fff} }
@media (max-width:1100px){ .muro{grid-template-columns:repeat(3,1fr)} .muro__testo{grid-column:span 3} }
@media (max-width:700px){ .muro{grid-template-columns:repeat(2,1fr)} .muro__testo{grid-column:span 2; grid-row:span 1} .muro__t--alta{grid-row:span 1} }

/* fascia immersiva pinnata (la foto cresce mentre resti fermo) */
.immersiva{position:relative; height:230svh}
.immersiva__sticky{position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:center}
.immersiva__media{position:absolute; inset:-6%; will-change:transform}
.immersiva__media .foto{position:absolute; inset:0; align-items:center; justify-content:center}
.immersiva__scrim{position:absolute; inset:0; z-index:2; background:linear-gradient(358deg,rgba(0,0,0,.95) 12%,rgba(0,0,0,.15) 70%)}
.immersiva__in{position:relative; z-index:3; width:100%; color:#fff}
@media (max-width:900px){ .immersiva{height:auto} .immersiva__sticky{position:static; height:70svh} }

/* fascia metà/metà con foto al vivo (preso da Taste §1.4 righe 4-5) */
.meta{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0}
.meta__testo{padding:76px max(var(--gutter),56px)}
.meta__foto{display:flex}
.meta__foto .foto{aspect-ratio:4/3; width:100%}
.meta--specchiata .meta__testo{order:2}
@media (max-width:900px){ .meta{grid-template-columns:1fr} .meta--specchiata .meta__testo{order:0} .meta__testo{padding:48px var(--gutter)} }

/* ==========================================================================
   VARIANTE C — "il programma di sala".  Elemento principale: L'ELENCO.
   Colonna sinistra ferma, righe a destra. Nessuna griglia di card, nessun mosaico.
   ========================================================================== */
.apertura{background:var(--scuro); color:#fff; position:relative; overflow:hidden;
  background-image:
    radial-gradient(80% 60% at 12% 92%, rgba(var(--veil-rgb),.34), transparent 62%),
    radial-gradient(70% 55% at 88% 12%, rgba(var(--veil-rgb),.22), transparent 60%)}
.apertura .parolone{top:4%; opacity:.26}
.apertura__sticky{position:relative; z-index:2}
.apertura__sticky{height:100svh; display:flex; flex-direction:column; justify-content:center; gap:30px}
.apertura__t{font-size:clamp(42px,7.4vw,116px); line-height:.94; text-transform:uppercase; letter-spacing:.015em}
.apertura__t .riga{display:block; overflow:hidden}
.apertura__t .riga span{display:block}
.apertura__numeri{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; border-top:1px solid var(--riga-scura); padding-top:24px}
.apertura__numeri div b{display:block; font:900 clamp(30px,3.4vw,52px)/1 "Montserrat",sans-serif; color:var(--accento); font-variant-numeric:tabular-nums}
.apertura__numeri div span{font:700 12px/1.3 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.6)}
@media (max-width:820px){ .apertura__numeri{grid-template-columns:repeat(2,1fr)} .apertura__sticky{height:auto; padding:80px var(--gutter)} }

.due-colonne{display:grid; grid-template-columns:360px 1fr; gap:56px; align-items:stretch}
.colonna-ferma{position:sticky; top:calc(var(--barra) + 24px)}
.colonna-ferma .foto{aspect-ratio:3/4; margin-bottom:18px}
.colonna-ferma .filtri{flex-direction:column; align-items:stretch; margin-bottom:0}
.colonna-ferma .filtri select{width:100%}
/* 🔴 16/09/2026, giro WP67 — stessa colonna morta della riga con la copertina
   (gastronomica-pagine.css, C7): qui la pista da 120 px era il numero dei posti,
   tolto dal WP58. Oggi NESSUNA riga usa questa regola (tutti gli 8 eventi hanno
   la copertina: misurato, `riga-ev__f` 8 su 8), ma basta un evento senza foto
   perché torni a valere. `auto`: chiusa a 0 px quando «Esaurito» non c'è. */
.riga-ev{
  display:grid; grid-template-columns:96px 1fr 150px auto; gap:20px; align-items:center;
  padding:18px 0; border-top:1px solid var(--riga); text-decoration:none;
  transition:background-color var(--fast) var(--ease-secco);
}
.riga-ev:last-child{border-bottom:1px solid var(--riga)}
/* la pista di «Esaurito» solo dove serve: ad `auto` la pista vuota vale 0 px ma
   il gap resta (24 px invece di 20 fra luogo e bottone). WP67. */
.riga-ev:has(.riga-ev__m.num){grid-template-columns:96px 1fr 150px auto auto}
.riga-ev__d{font:900 15px/1.2 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.04em; color:var(--vino); font-variant-numeric:tabular-nums}
.riga-ev__d small{display:block; font-weight:700; font-size:12px; color:var(--tenue); letter-spacing:.1em}
.riga-ev__t{font:800 19px/1.25 "Montserrat",sans-serif}
.riga-ev__m{font:700 13px/1.3 "Montserrat",sans-serif; color:var(--tenue); text-transform:uppercase; letter-spacing:.06em}
@media (hover:hover) and (pointer:fine){ .riga-ev:hover{background:rgba(142,32,53,.05)} }
@media (max-width:1100px){
  .due-colonne{grid-template-columns:1fr; gap:32px}
  .colonna-ferma{position:static}
  .colonna-ferma .foto{display:none}
  .colonna-ferma .filtri{flex-direction:row}
}
@media (max-width:820px){
  .riga-ev{grid-template-columns:74px 1fr; grid-template-areas:"d t" "d m" "d b"; gap:6px 16px}
  .riga-ev__d{grid-area:d} .riga-ev__t{grid-area:t} .riga-ev__m:first-of-type{grid-area:m}
  .riga-ev__m + .riga-ev__m{display:none} .riga-ev .btn{grid-area:b; justify-self:start; margin-top:6px}
}



/* ══════════ blocco 3 di 7 ══════════════════════════════════════════ */
/* ══ AGGIUNTE DEL 02/09/2026 — richieste di Pamela (verbale del 01/09) ═══════
   1 · sottomenu a tendina nella testata   2 · slider di 8 immagini in home
   3 · fascia partner in home + pagina interna partner.html
   Tempi e curve presi dalla scala di casa: tendina 150-250ms → --fast,
   mai ease-in, apertura dal grilletto (transform-origin in alto).          */

/* --- 1 · TENDINA ---------------------------------------------------------- */
.menu__t{position:relative}
.menu__frec{font-size:.7em; opacity:.7; margin-left:2px; display:inline-block;
  transition:transform var(--fast) var(--ease-out)}
.tendina{
  position:absolute; top:100%; left:-14px; z-index:60; margin:0; padding:8px 0;
  min-width:210px; list-style:none;
  background:var(--superficie); border:1px solid var(--riga);
  box-shadow:0 10px 0 rgba(0,0,0,.12);
  transform-origin:top left;                 /* si apre DAL grilletto */
  opacity:0; transform:scale(.98) translateY(-4px); pointer-events:none;
  transition:opacity var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.tendina li{margin:0}
.tendina a{
  display:block; padding:11px 18px; min-height:44px;   /* area cliccabile vera */
  font:700 14px/1.4 "Montserrat",sans-serif; color:var(--inchiostro);
  text-decoration:none; letter-spacing:.02em;
  transition:background-color var(--fast) var(--ease-secco), color var(--fast) var(--ease-secco);
}
.menu__t:focus-within .tendina{opacity:1; transform:scale(1) translateY(0); pointer-events:auto}
.menu__t:focus-within .menu__frec{transform:rotate(180deg)}
/* r0310a, 03/10/2026 (Andrea: «Da IPad il menù in alto non apre le due voci che aprono il sotto menù»):
   col dito non c'e' passaggio del mouse. Il primo tocco sulla voce madre accende `.aperta` (guscio.js,
   «LE TENDINE AL TOCCO»), il secondo porta alla pagina. Fuori da (hover:hover) apposta. */
.menu__t.aperta .tendina{opacity:1; transform:scale(1) translateY(0); pointer-events:auto}
.menu__t.aperta .menu__frec{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){
  .menu__t:hover .tendina{opacity:1; transform:scale(1) translateY(0); pointer-events:auto}
  .menu__t:hover .menu__frec{transform:rotate(180deg)}
  .tendina a:hover{background:var(--melagrana); color:#fff}
}
.tendina a:focus-visible{background:var(--melagrana); color:#fff}
/* r0310a, 03/10/2026: la soglia era 1100 px, ma il pannello del bottone «Menu» parte a 1180 (`.menu{display:none}`
   piu' sopra e il blocco «IL MENU si apre e si chiude»): fra 1101 e 1180 (iPad in orizzontale) il pannello mostrava
   Festival e Passaporto con la freccina e le voci sotto a opacita 0. Ora la stessa soglia del pannello. */
@media (max-width:1180px){ .tendina{position:static; opacity:1; transform:none; pointer-events:auto;
  box-shadow:none; border:0; background:transparent; padding:0; min-width:0} .menu__frec{display:none} }

/* --- 2 · SLIDER: 8 scatti che scorrono ------------------------------------
   Scorrimento vero con aggancio, non una dissolvenza: si trascina, si spinge
   con le frecce, e la barra dice a che punto sei. Niente partenza automatica —
   il movimento lo comanda chi guarda.                                        */
.scatti{position:relative}
.scatti__pista{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(62vw, 720px);
  gap:2px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; padding-bottom:2px;
}
.scatti__pista::-webkit-scrollbar{display:none}
.scatti__s{position:relative; scroll-snap-align:start; aspect-ratio:16/10; overflow:hidden;
  background:var(--segnaposto)}
.scatti__s img{width:100%; height:100%; object-fit:cover; display:block;
  outline:1px solid rgba(0,0,0,.1); outline-offset:-1px}
.scatti__d{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:44px 22px 16px;
  background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
  font:700 12px/1.3 "Montserrat",sans-serif; text-transform:uppercase;
  letter-spacing:.1em; color:#fff}
.scatti__cmd{display:flex; align-items:center; gap:10px; margin-top:18px}
.scatti__b{
  width:52px; height:52px; border:1px solid var(--riga-scura); background:var(--superficie);
  color:var(--inchiostro); cursor:pointer; font-size:20px; line-height:1;
  font-variant-numeric:tabular-nums;
  transition:transform var(--fast) var(--ease-out), background-color var(--fast) var(--ease-secco);
}
.scatti__b:active{transform:scale(.95)}
.scatti__b[disabled]{opacity:.35; cursor:default}
.scatti__b--pausa{font-size:13px; letter-spacing:1px}
@media (hover:hover) and (pointer:fine){ .scatti__b:not([disabled]):hover{background:var(--melagrana); color:#fff} }
.scatti__conta{font:800 12px/1 "Montserrat",sans-serif; letter-spacing:.12em;
  font-variant-numeric:tabular-nums; color:var(--tenue); text-transform:uppercase}
@media (max-width:820px){ .scatti__pista{grid-auto-columns:86vw} }

/* --- 3 · PARTNER ---------------------------------------------------------- */
/* 02/09/2026 — Costantino: «il blocco dei partner deve essere di colore bianco
   in modo tale da renderlo unico e uniforme». Campo bianco pieno: i loghi non
   stanno piu' su tessere che galleggiano, ma su un solo foglio, separati da
   filetti sottili. Sul bianco il distacco lo fa la riga, non lo sfondo.       */
/* 02/09/2026 — Costantino: «le linee o outline di contorno dei partner devono
   sparire, devono essere bianche». Nessun filetto, nessun riquadro: campo
   bianco e basta. I loghi si separano con lo SPAZIO, non con le righe.       */
.partner{background:#fff}
.partner__griglia{display:grid; grid-template-columns:repeat(4,1fr);
  gap:34px 40px; margin-top:30px}
.partner__c{background:#fff; display:flex; align-items:center; justify-content:center;
  padding:10px; min-height:120px}
.partner__c img{max-width:100%; max-height:76px; width:auto; height:auto; object-fit:contain}
.partner__r{font:800 11px/1 "Montserrat",sans-serif; text-transform:uppercase;
  letter-spacing:.14em; color:var(--tenue); margin:30px 0 0}
@media (max-width:900px){ .partner__griglia{grid-template-columns:repeat(2,1fr)} }


/* ══════════ blocco 4 di 7 ══════════════════════════════════════════ */
/* ══ COSA CI SI PUO' FARE — 02/09/2026, richiesta di Costantino ════════════
   «un locale dove si puo' soltanto mangiare, una bottega dove si puo' soltanto
   comprare e un altro dove si puo' fare entrambe le cose, identificati con
   delle icone che li differenziano».
   Le icone sono DISEGNATE, non emoji: un'emoji cambia faccia su ogni sistema
   e su Windows diventa un'altra cosa. E l'icona non e' mai sola — accanto c'e'
   sempre la parola, perche' un simbolo da solo non lo capisce nessuno.       */
/* ⚠️ `.card__corpo` e' una colonna flessibile: un figlio `inline-flex` viene
   BLOCCHIZZATO a `flex` e stirato a tutta la larghezza. Non lo risolve
   `display`, nemmeno con !important — lo risolve `align-self:flex-start`,
   che toglie lo stiramento. Misurato: da 347px a larghezza del contenuto. */
.serv{display:inline-flex; align-self:flex-start; width:auto; align-items:center; gap:7px; margin:0 0 10px;
  font:800 10px/1 "Montserrat",sans-serif; text-transform:uppercase;
  letter-spacing:.1em; padding:6px 10px 6px 7px; border-radius:999px;
  background:var(--carta-calda); color:var(--inchiostro)}
.serv svg{width:15px; height:15px; flex:none}
/* ⚠️ MISURATO il 02/09/2026: lo <span> interno usciva BIANCO su fondo pesca,
   contrasto 1,20:1 — cioe' invisibile — perche' una regola generica della
   sezione ricolora tutti i figli. Il contenitore aveva gia' il colore giusto:
   il difetto stava un livello piu' sotto. Dopo: 7,14:1. */
.serv > span{color:inherit !important}
/* ⚠️ `!important` non e' pigrizia: a riga ~238 c'e' `.campo-pieno .card *{color:...}`,
   una regola con l'asterisco che colora TUTTI i figli della scheda e vince su
   qualsiasi classe singola. Il distintivo deve tenere il proprio colore, e
   l'icona lo eredita da `currentColor`: senza questo l'icona sparisce. */
.serv--mangiare{background:#FDE7D2 !important; color:#7A3B06 !important}
.serv--comprare{background:#DCE9E1 !important; color:#14503A !important}
.serv--entrambi{background:#F6DCE6 !important; color:#6B1740 !important}
/* ⚠️ DIFETTO PAGATO il 02/09/2026: questa regola valeva anche per i distintivi
   DENTRO le schede, che hanno il fondo bianco → bianco su bianco, invisibile.
   Misurato nel browser: fondo rgba(255,255,255,.92) su card #fff.
   Vale solo per un distintivo appoggiato direttamente sulla campitura. */
.scura > .wrap .serv:not(.card .serv),
.campo--melagrana > .wrap .serv:not(.card .serv),
.campo--mora > .wrap .serv:not(.card .serv),
.campo-pieno > .wrap .serv:not(.card .serv){ background:rgba(255,255,255,.92) }


/* ══════════ blocco 5 di 7 ══════════════════════════════════════════ */
/* ══ BANNER di Bere e Mangiare — 02/09/2026 ═══════════════════════════════
   Un banner solo, cliccabile tutto. La foto sotto e' una fotografia vera di
   un locale che aderisce: il velo scuro sopra non e' decorazione, e' quello
   che tiene leggibile il titolo bianco qualunque foto ci finisca sotto.     */
.banner{position:relative; display:block; min-height:clamp(360px,46vw,520px);
  overflow:hidden; text-decoration:none; color:#fff; isolation:isolate}
.banner__fondo{position:absolute; inset:0; z-index:0;
  background:var(--scuro) url("asset/banner-bere.jpg") center/cover no-repeat;
  transform:scale(1.02); transition:transform var(--crawl) var(--ease-out)}
.banner__velo{position:absolute; inset:0; z-index:1; background:
  linear-gradient(90deg, rgba(43,10,16,.92) 0%, rgba(43,10,16,.78) 42%, rgba(43,10,16,.35) 100%)}
.banner__in{position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:flex-start; gap:16px; max-width:var(--contenitore); margin:0 auto;
  padding:clamp(48px,7vw,90px) clamp(20px,4vw,52px)}
.banner .occhiello{color:var(--accento)}
.banner__t{font:900 clamp(38px,5.6vw,84px)/.98 "Montserrat",sans-serif;
  text-transform:uppercase; letter-spacing:-.022em; text-wrap:balance}
.banner__d{font-size:clamp(16px,1.5vw,20px); color:rgba(255,255,255,.88); max-width:44ch}
.banner__b{margin-top:12px}
/* 03/09/2026 — su un telefono la fotografia del banner arriva in una taglia
   da telefono: 640 px invece di 1000. Si fa con una media query e non con
   `image-set()`, che il minificatore fonde con la sua forma prefissata. */
@media (max-width:820px){
  .banner__fondo{background-image:url("asset/banner-bere-640.jpg")}
}
@media (hover:hover) and (pointer:fine){ .banner:hover .banner__fondo{transform:scale(1.06)} }
.banner:focus-visible{outline:4px solid var(--azione); outline-offset:-6px}


/* ══════════ blocco 6 di 7 ══════════════════════════════════════════ */
/* ── componenti aggiunti dopo l'apertura del file ───────────────────────── */
.sezione--zero{padding:0}
.elenco-secco{list-style:none; margin:22px 0 0; padding:0}
.elenco-secco li{
  display:grid; grid-template-columns:1.2fr 1fr 1.4fr; gap:20px; align-items:baseline;
  padding:16px 0; border-top:1px solid var(--riga); font-size:15px; color:var(--tenue);
}
.elenco-secco li:last-child{border-bottom:1px solid var(--riga)}
.elenco-secco b{font-size:18px; color:var(--inchiostro)}
.scura .elenco-secco li{border-color:var(--riga-scura); color:rgba(255,255,255,.7)}
.scura .elenco-secco b{color:#fff}
@media (max-width:700px){ .elenco-secco li{grid-template-columns:1fr; gap:4px} }
.nota-modulo{margin-top:14px; font:700 12px/1.4 "Montserrat",sans-serif; text-transform:uppercase;
  letter-spacing:.08em; color:var(--tenue)}
.scura .nota-modulo,.campo--melagrana .nota-modulo,.campo--alloro .nota-modulo,
.campo--mora .nota-modulo{color:rgba(255,255,255,.8)}

/* ── VARIANTE B · scena a capitoli (sticky + dissolvenza incrociata) ─────
   Numeri approvati da Costantino il 27/07: 320svh di genitore per tre capitoli,
   foto in dissolvenza incrociata, testi IN FILA e mai sovrapposti.            */
.capitoli{position:relative; height:320svh}
.capitoli__sticky{position:sticky; top:0; height:100svh; overflow:hidden; background:var(--scuro)}
.capitoli__media{position:absolute; inset:-4%; z-index:0; will-change:transform}
.capitoli__foto{
  position:absolute; inset:0; opacity:0;
  transition:opacity var(--slow) var(--ease-out), filter var(--slow) var(--ease-out);
  filter:blur(2px);          /* fonde l'incrocio: Emil §7 */
}
.capitoli__foto.attiva{opacity:1; filter:blur(0)}
.capitoli__foto .foto{position:absolute; inset:0; align-items:center; justify-content:center}
.capitoli__scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(358deg, rgba(0,0,0,.95) 8%, rgba(0,0,0,.45) 52%, rgba(0,0,0,.15) 100%)}
.capitoli__in{position:relative; z-index:3; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; padding:0 0 56px; color:#fff}
.capitoli__pista{position:relative; min-height:270px}
.capitolo{
  position:absolute; left:0; right:0; bottom:0; max-width:660px;
  clip-path:inset(0 0 101% 0); opacity:0; pointer-events:none;
  transition:clip-path var(--slow) var(--ease-out), opacity var(--fast) linear;
}
.capitolo.attivo{clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto}
.capitolo h3{font-size:clamp(30px,3.6vw,54px); line-height:.96; text-transform:uppercase; margin-bottom:14px}
.capitoli__barra{display:flex; gap:8px; margin:0 0 26px; padding:0; list-style:none}
.capitoli__barra li{height:3px; width:74px; background:rgba(255,255,255,.22); position:relative}
.capitoli__barra li i{position:absolute; inset:0 auto 0 0; width:0; background:var(--accento);
  transition:width var(--normal) linear}
.capitoli__barra li.attivo i{width:100%}
@media (max-width:900px){
  .capitoli{height:auto}
  .capitoli__sticky{position:static; height:auto; padding:56px 0}
  .capitoli__media{display:none}
  .capitoli__in{padding:0}
  .capitoli__pista{min-height:0; display:grid; gap:34px}
  .capitolo{position:static; clip-path:none; opacity:1; pointer-events:auto}
}
/* tinte dichiarate per i segnaposto: si vede lo stesso che le foto si scambiano */
.tinta-1,.tinta-2,.tinta-3{background-image:
  radial-gradient(120% 90% at 30% 25%, rgba(217,154,43,.22), transparent 60%),
  radial-gradient(90% 80% at 78% 80%, rgba(142,32,53,.28), transparent 62%),
  repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 12px, transparent 12px 24px)}
.tinta-1{background-color:#5A1420}
.tinta-2{background-color:#2C6C9C}
.tinta-3{background-color:#7A2A0C}

/* muro di tessere: il blocco di testo dentro la griglia */
.muro__testo h1{font-size:clamp(34px,3.8vw,60px); line-height:.94; text-transform:uppercase; margin-bottom:8px}
.muro__testo h2{margin-bottom:6px}
.muro__testo .parolone{top:-8%; opacity:.10}
.muro__cta{display:flex; flex-wrap:wrap; gap:10px}

/* fascia di dati (B): tre numeri in riga, presi dal paragrafo-numeri di Taste */
.dati{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--riga)}
.dati div{padding:28px 20px; border-right:1px solid var(--riga)}
.dati div:last-child{border-right:0}
.dati b{display:block; font:900 clamp(30px,3.2vw,46px)/1 "Montserrat",sans-serif; color:var(--vino);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.dati span{font:700 12px/1.3 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.1em; color:var(--tenue)}
/* sulla campitura zucca il rosso sparirebbe (1,77:1): numeri ed etichette in inchiostro */
.fascia-dati{padding:8px 0 4px}
.campo--zucca .dati,.campo--zucca .dati div{border-color:rgba(20,33,43,.22)}
.campo--zucca .dati b{color:var(--inchiostro)}
.campo--zucca .dati span{color:rgba(20,33,43,.78)}
@media (max-width:820px){ .dati{grid-template-columns:repeat(2,1fr)} .dati div{border-bottom:1px solid var(--riga)} }


/* ── VARIANTE C · la locandina che si ricompone ─────────────────────────
   Sticky a sinistra, righe a destra: la locandina cambia col passare delle righe.
   Inclinazione con la velocità dello scroll: presa da kommakomma.is (skewY).   */
.locandina{position:sticky; top:calc(var(--barra) + 28px)}
.locandina__q{
  position:relative; aspect-ratio:3/4; background:var(--scuro); color:#fff; overflow:hidden;
  outline:1px solid var(--riga-scura); outline-offset:-1px;
  display:flex; flex-direction:column; justify-content:space-between; padding:24px;
  will-change:transform;
}
.locandina__sfondo{position:absolute; inset:0; z-index:0; clip-path:inset(0 0 0 0);
  transition:clip-path var(--slow) var(--ease-out)}
.locandina__sfondo.cambia{clip-path:inset(0 0 100% 0)}
/* velo fisso: il testo della locandina non deve dipendere dalla tinta (ne' dalla foto
   vera che ci finira'). Misurato: --accento sul verde alloro faceva 3,01:1 senza velo. */
.locandina__q::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(20,4,8,.80) 0%, rgba(20,4,8,.52) 42%, rgba(20,4,8,.90) 100%)}
.locandina__alto,.locandina__basso{position:relative; z-index:2}
.locandina__g{font:900 clamp(64px,7vw,104px)/.86 "Montserrat",sans-serif; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums}
.locandina__m{font:800 13px/1 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.18em;
  color:var(--accento); margin-top:8px}
.locandina__t{font:800 21px/1.15 "Montserrat",sans-serif; margin:0 0 8px}
.locandina__l{font:700 13px/1.4 "Montserrat",sans-serif; color:rgba(255,255,255,.72); text-transform:uppercase;
  letter-spacing:.06em; margin:0 0 12px}
.locandina__conta{margin-top:16px; font:900 12px/1 "Montserrat",sans-serif; letter-spacing:.16em;
  color:var(--accento); font-variant-numeric:tabular-nums}
.riga-ev.attiva{background:rgba(196,24,60,.09)}
.riga-ev.attiva .riga-ev__t{color:var(--vino)}
.elenco-righe{margin:0; padding:0; list-style:none}
.elenco-righe li{display:grid; grid-template-columns:64px 1fr 200px auto; gap:20px; align-items:center;
  padding:20px 0; border-top:1px solid var(--riga)}
.elenco-righe li:last-child{border-bottom:1px solid var(--riga)}
.elenco-righe .n{font:900 15px/1 "Montserrat",sans-serif; color:var(--accento-l); font-variant-numeric:tabular-nums}
.scura .elenco-righe .n{color:var(--accento)}
.elenco-righe .t{font:800 19px/1.2 "Montserrat",sans-serif}
.elenco-righe .m{font:700 13px/1.3 "Montserrat",sans-serif; color:var(--tenue); text-transform:uppercase; letter-spacing:.06em}
.scura .elenco-righe li{border-color:var(--riga-scura)}
.scura .elenco-righe .m{color:rgba(255,255,255,.65)}
@media (max-width:820px){ .elenco-righe li{grid-template-columns:44px 1fr; gap:4px 14px} }
.fascia-piatta{display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center}
@media (max-width:820px){ .fascia-piatta{grid-template-columns:1fr} }
@media (max-width:1100px){ .locandina{position:static} .locandina__q{aspect-ratio:16/9} }

/* ══ BLOCCO COMUNE (30/08) — mappa · come arrivare · galleria · domande ══
   Quattro funzioni prese da Taste of London (§5 del file estratto), messe in
   ordine di valore PER UN FESTIVAL DIFFUSO: la mappa da noi vale piu' che da
   loro, perche' loro mappano un parco e noi piu' comuni.
   Stanno FUORI da #palco: cambiando variante il palco viene sostituito, queste
   no. Sono informazione di servizio, identica nelle tre: domani si confronta
   la struttura, non queste.                                                  */

/* 1 · MAPPA — blocco segnaposto DICHIARATO: non abbiamo ne' comuni ne'
   coordinate, e non se ne inventano. */
.mappa{display:grid; grid-template-columns:1.55fr 1fr; gap:2px; align-items:stretch}
.mappa__quadro{
  position:relative; aspect-ratio:16/10; background:var(--segnaposto);
  background-image:
    linear-gradient(rgba(90,25,10,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,25,10,.11) 1px, transparent 1px),
    repeating-linear-gradient(135deg, rgba(90,25,10,.08) 0 14px, transparent 14px 28px);
  background-size:44px 44px, 44px 44px, auto;
  outline:1px solid rgba(0,0,0,.12); outline-offset:-1px;
  display:flex; align-items:flex-end;
}
.mappa__nota{
  position:relative; z-index:2; margin:0; padding:14px 16px;
  font:700 12px/1.45 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.06em;
  /* fascia scura, non crema: sul riquadro chiaro la nota in crema si confondeva
     col fondo e sembrava scritta FUORI dal riquadro (visto a 390px il 30/08).
     Bianco su brace = 18,20:1. */
  color:rgba(255,255,255,.92); background:var(--brace);
}
.mappa__lato{background:var(--carta-calda); padding:28px 26px}
.mappa__comuni{list-style:none; margin:0 0 26px; padding:0}
.mappa__comuni li{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:11px 0; border-top:1px solid var(--riga);
  font:700 13px/1.3 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.05em;
  color:var(--tenue);
}
.mappa__comuni li:last-child{border-bottom:1px solid var(--riga)}
.mappa__comuni b{font-size:16px; color:var(--inchiostro); letter-spacing:0; text-transform:none}
.mappa__comuni span{font-variant-numeric:tabular-nums}
/* a finestra stretta l'aspect-ratio dava al riquadro 214px e la nota, piu' alta,
   usciva fuori dal riquadro e sembrava sganciata (visto a 390px il 30/08). */
@media (max-width:900px){ .mappa{grid-template-columns:1fr}
  .mappa__quadro{aspect-ratio:auto; min-height:300px} }

/* 2 · COME ARRIVARE + ACCESSIBILITA' — su un festival diffuso e' informazione
   critica, non un di piu'. */
.elenco-servizio{list-style:none; margin:20px 0 0; padding:0}
.elenco-servizio li{
  display:grid; grid-template-columns:200px 1fr; gap:8px 22px; align-items:baseline;
  padding:15px 0; border-top:1px solid var(--riga);
}
.elenco-servizio li:last-child{border-bottom:1px solid var(--riga)}
.elenco-servizio b{font:800 14px/1.3 "Montserrat",sans-serif; text-transform:uppercase; letter-spacing:.06em}
.elenco-servizio span{font-size:15px; color:var(--tenue)}
/* 01/09 — l'elenco servizi finisce per la prima volta su una campitura piena:
   i suoi grigi (#5A5A5A su rosso) sarebbero illeggibili. */
.scura .elenco-servizio span,.campo--melagrana .elenco-servizio span,
.campo--mora .elenco-servizio span,.campo--alloro .elenco-servizio span{color:rgba(255,255,255,.9)}
.scura .elenco-servizio li,.campo--melagrana .elenco-servizio li,
.scura .elenco-servizio li:last-child,.campo--melagrana .elenco-servizio li:last-child{border-color:rgba(255,255,255,.28)}
@media (max-width:820px){ .elenco-servizio li{grid-template-columns:1fr; gap:3px} }

/* 3 · GALLERIA — nessun <img> verso file che non esistono: resta il riquadro
   che dice quale file ci va (stessa regola del resto della pagina). */
.galleria .foto{aspect-ratio:1/1}
.galleria .foto:nth-child(3),.galleria .foto:nth-child(6){aspect-ratio:1/1}

/* 4 · DOMANDE FREQUENTI — fisarmonica nativa <details>: nessun JavaScript,
   funziona anche su Firefox e da tastiera. Apertura a TENDINA (clip-path),
   mai una dissolvenza: design-dna movimento 9. Durata 250ms, tetto di Emil
   Kowalski per una cosa che si apre ogni tanto.                              */
.faq{border-top:1px solid var(--riga)}
.faq__v{border-bottom:1px solid var(--riga)}
.faq__v summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:20px;
  min-height:64px; padding:14px 0;
  font:800 clamp(17px,1.5vw,21px)/1.3 "Montserrat",sans-serif;
}
.faq__v summary::-webkit-details-marker{display:none}
.faq__v summary span{flex:1; text-wrap:balance}
.faq__v summary i{
  position:relative; flex:0 0 22px; width:22px; height:22px;
  transition:transform var(--fast) var(--ease-out);
}
.faq__v summary i::before,.faq__v summary i::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--accento-l);
}
.faq__v summary i::before{width:22px; height:2.5px; margin:-1.25px 0 0 -11px}
.faq__v summary i::after{width:2.5px; height:22px; margin:-11px 0 0 -1.25px}
.faq__v[open] summary i{transform:rotate(45deg)}
.faq__c{padding:0 0 22px; max-width:76ch}
.faq__c p{color:var(--tenue); margin:0}
.faq__v[open] .faq__c{animation:apreFaq .25s var(--ease-out)}
@keyframes apreFaq{ from{clip-path:inset(0 0 100% 0); transform:translateY(-6px)}
                    to  {clip-path:inset(0 0 0 0);    transform:none} }
@media (hover:hover) and (pointer:fine){ .faq__v summary:hover{color:var(--accento-l)} }
.faq__v summary:focus-visible{outline:3px solid var(--azione); outline-offset:3px;
  box-shadow:0 0 0 6px var(--brace)}

/* guardia: il --vino su fondo scuro farebbe 2,91:1. Se un giorno un .link
   finisce dentro una fascia scura, deve gia' essere leggibile. */
.scura .link{color:var(--accento)}                                   /* 5,66:1 */
.campo--melagrana .link,.campo--mora .link,.campo--alloro .link{color:#fff}

[hidden]{display:none !important}


/* ══════════ blocco 7 di 7 ══════════════════════════════════════════ */
/* ══ MOVIMENTO DEL MOUSE — stile ══════════════════════════════════════════
   Il puntatore vero si nasconde SOLO quando il nostro è davvero acceso
   (classe su <html> messa dal JS): se il JS non parte, il mouse resta. */
html.ha-cursore, html.ha-cursore *{ cursor:none; }

/* ══ MODELLO TASTE: il colore è il CAMPO, le schede sono bianche sopra ═══════
   Preso da london.tastefestivals.com (guardato il 31/08). Loro usano magenta,
   noi l'arancione del marchio: è la stessa mossa, ed è già quella del banner
   ufficiale 2026 — campo arancione pieno, elementi bianchi sopra. */
/* Campo arancione del marchio + il motivo in filigrana, disegnato in CSS finché
   Andrea non consegna il pesce in vettoriale. */
/* 01/09 — SFONDO DELL'APERTURA = LA GRAFICA UFFICIALE 2026 del cliente,
   chiesto da Costantino. File vero scaricato dal suo server il 31/08:
   asset/marchio/GASTRONOMICA_Banner-2026_.jpg (2560x731). */
.apertura-marchio{ position:absolute; inset:0;
  /* Il banner INTERO come sfondo e' stato provato e scartato con la schermata
     alla mano: il suo lettering «GASTRONOMICA / FESTIVAL del GUSTO» cadeva
     esattamente sotto l'h1, e il suo «06 nov» contraddiceva il «06 novembre»
     scritto in HTML due centimetri sopra. Qui c'e' lo STESSO file, ritagliato
     nella fascia di solo MOTIVO (0-560px: zero pixel bianchi, misurato):
     l'artwork del cliente senza la sua tipografia. */
  /* 01/09 ore 15:10 — ILLUSTRAZIONE DI LORENZO nel banner della home (suo punto 3).
     File suo, consegnato in chat. Arrivava in **Adobe RGB**: convertito in sRGB,
     altrimenti i browser lo rendono di un altro colore. Il fondo dell'illustrazione
     misura #ED6E4E (campionato agli angoli, non stimato) e il bianco ci fa 3,07:1 — sopra il 3,0 richiesto
     per un titolo grande, e in pratica identico al primario #e94e1b (3,77). */
  /* `cover` la ingigantiva: 1930x556 dentro un'apertura 2:1 mostrava solo il
     pesce sgranato. E' un BANNER largo: va a larghezza piena, altezza naturale,
     appoggiata in basso, col suo stesso fondo sopra. */
  /* Misurato: a larghezza piena il CONTORNO BIANCO del pesce finiva sotto il
     titolo bianco -> 1,44:1 nel caso peggiore (99o percentile del fondo).
     Non si annega l'illustrazione sotto uno scrim: si sposta il pesce fuori
     dalla colonna del testo, in basso a destra. */
  /* 01/09 ore 15:40 — Costantino: «elimina il pesce». Resta il MOTIVO, ritagliato
     dalla fascia 0-600px dell'illustrazione di Lorenzo (zona senza pesce, verificata:
     zero pixel bianchi). Cosi' sparisce anche il contorno bianco che finiva sotto
     il titolo bianco a 1,44:1. */
  /* 05/09/2026 — ORDINE DI COSTANTINO: rimettere il PESCE (e' la mascotte) e
     togliere le LINEE che si vedevano nel fondo. Erano la stessa cosa: il motivo
     ritagliato 600x551 era in `repeat`, e ogni giunzione della mattonella si
     leggeva come una riga verticale. Qui non si ripete piu' niente: c'e'
     l'illustrazione INTERA di Lorenzo (2880x1404 -> 2400x1170, 112 KB), col pesce
     gia' dentro, a destra, fuori dalla colonna del testo.
     Il `cover` che il 01/09 era stato scartato ora funziona: allora il file era
     1930x556 dentro un'apertura 2:1 e sgranava; questo e' 2.05:1, cioe' la stessa
     proporzione dell'hero (1440x702 a 78vh), e a 2400px di larghezza copre un
     1440 a 1,7x. Fondo campionato agli angoli: #ED6E4E, identico a quello gia'
     dichiarato qui sotto — non stimato, misurato.
     NB: il pesce era stato tolto il 01/09 perche' il suo contorno bianco cadeva
     sotto il TITOLO bianco grande (1,44:1). Quel titolo e' stato tolto il 04/09
     nel giro C, quindi la ragione non esiste piu'. */
  background:#ED6E4E url(asset/marchio/motivo-lorenzo-2026.jpg) center/cover no-repeat;
}
/* Il PESCE non sta nel fondo: e' un elemento suo, in ALTO A DESTRA.
   Misurato il 05/09: con l'illustrazione intera come fondo, il pesce cadeva
   fra x 827 e 1313 su 1440, e la riga «...08 DICEMBRE 2026» arriva a 1045 —
   il testo bianco finiva sul contorno bianco del pesce. E' lo stesso difetto
   che il 01/09 aveva fatto togliere il pesce, ricomparso sul sottotitolo.
   Staccandolo dal fondo si sceglie dove sta: sopra la colonna del testo, che
   nell'hero occupa la meta' bassa a sinistra. */
.apertura-marchio::before{
  content:""; position:absolute; z-index:1; pointer-events:none;
  /* Misurato, non stimato: il testo dell'hero comincia a y=380 su 1440x702 e a
     y=303 su 1280x624 — cioe' sempre oltre il 48% dell'altezza. Il pesce sta
     quindi tutto SOPRA quella soglia (2% + 45% = 47%): due rettangoli che non si
     incrociano sull'asse verticale non possono sovrapporsi, a nessuna larghezza. */
  right:3%; top:1%;
  height:52%; aspect-ratio:700/555;
  background:url(asset/marchio/pesce-mascotte.png) center/contain no-repeat;
}
/* Il pesce non puo' avere una misura sola: scendendo di larghezza il testo
   dell'hero sale e si allarga, e a 390px un pesce al 45% dell'altezza sarebbe
   largo 422px, cioe' PIU' dello schermo (misurato: partiva da x=-44).
   Sotto i 1200px si cambia criterio: non piu' l'altezza ma la LARGHEZZA, tenuta
   dentro la colonna che il testo non occupa mai (misurato: il testo dell'hero
   non supera x=235 su 390, ne' x=717 su 900).
   ⚠️ 07/09/2026 — QUELLA MISURA NON VALE PIU' DA SOLA. Il 235 su 390 era vero
   solo perche' lo `span.hero__giu`, secondo figlio in linea della `.hero`
   flex, schiacciava `.hero__in` a 218 px. Lo span e' stato tolto il 07/09
   (giro WP8) e la colonna del testo e' andata a 342 px: i riquadri delle date
   sono finiti SOPRA il pesce. La colonna libera adesso e' tenuta da una regola
   esplicita in `gastronomica-pagine.css` §W8B (`.hero__riga{max-width: calc(98vw
   - min(40vw,165px) - 32px)}` sotto i 620px), non piu' da un effetto laterale.
   ⛔ Se un giorno cambi la larghezza o il margine del pesce qui sotto, quella
   regola va rifatta con gli stessi numeri, altrimenti tornano a incrociarsi. */
/* 05/09 — «leggermente piu' grande» (suo). Non si puo' crescere della stessa
   quota ovunque: lo spazio libero sopra il testo NON scala con la larghezza.
   Misurato: a 1440 il testo comincia a y=387, a 1280 gia' a y=310 — cioe' a
   1280 c'e' un terzo di spazio in meno. Quindi la fascia larga cresce di piu'
   e quella intermedia di poco, ognuna verificata a parte. */
@media (max-width:1399px){
  /* a 1280 il testo comincia a y=310: con il 47% restavano 10px di margine,
     troppo pochi perche' una parola in piu' nel testo li mangia. */
  .apertura-marchio::before{ height:46%; top:1%; }
}
@media (max-width:1199px){
  .apertura-marchio::before{ height:auto; width:min(30%, 290px); top:2%; }
}
@media (max-width:999px){
  /* a 900 il testo sale a y=205 e col 27% restava 1px. */
  .apertura-marchio::before{ width:min(25%, 228px); }
}
@media (max-width:899px){
  .apertura-marchio::before{ width:min(40%, 165px); top:3%; right:2%; }
}
.apertura-marchio::after{ content:""; position:absolute; inset:0; opacity:.11;
  background-image:
    radial-gradient(circle at 20% 30%, #fff 0 3px, transparent 3px),
    radial-gradient(circle at 70% 65%, #fff 0 3px, transparent 3px);
  background-size:120px 120px, 160px 160px; }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
@media (prefers-reduced-motion: reduce){ .hero__video{ display:none; }
  .hero__media{ background:url(asset/video/cucina-1-poster.jpg) center/cover; } }
/* 31/08 — DIFETTO MISURATO, non di gusto: il bianco su --accento faceva
   2,28:1 (serve 4,5). Su --melagrana fa 4,65 / 5,85 / 5,25 nelle tre tavolozze. */
.campo-pieno{ background:var(--zucca); color:#fff; }
.campo-pieno .t-sez, .campo-pieno .occhiello{ color:#fff; }
/* 02/09/2026 — tolto anche qui: Costantino ha rifiutato le lettere contornate
   per la seconda volta. Tipografia piena ovunque, nessuna eccezione. */
.campo-pieno .t-sez .contorno{ -webkit-text-stroke:0; -webkit-text-fill-color:currentColor; }
.campo-pieno .card{ background:#fff; color:var(--inchiostro); border:0; }
.campo-pieno .card__meta, .campo-pieno .card__testo{ color:#5C6B75; }
.campo-pieno .btn--scuro{ background:#fff; color:var(--inchiostro); }
/* etichetta bianca a cavallo della foto, come le loro «FEAST YOUR EYES» */
.card__eti{ position:absolute; left:0; bottom:0; background:#fff; color:var(--inchiostro);
  font:800 12px/1.2 "Montserrat",sans-serif; letter-spacing:.04em; text-transform:uppercase;
  padding:9px 14px; z-index:2; }
.card__testo{ margin:.35rem 0 .6rem; color:var(--tenue); font-size:.92rem; line-height:1.45; }
.cur{ position:fixed; left:0; top:0; pointer-events:none; z-index:9999;
      will-change:transform; }
/* `difference` inverte il cursore su QUALSIASI fondo: sul giallo dell'azione,
   sulla carta chiara e sulla foto scura resta sempre visibile. Senza, l'anello
   giallo spariva sopra il bottone giallo — misurato il 31/08. */
.cur--punto{ width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
      background:#fff; mix-blend-mode:difference; }
.cur--anello{ width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:50%;
      mix-blend-mode:difference; border:1.5px solid rgba(255,255,255,.85);
      transition:width var(--fast), height var(--fast), margin var(--fast),
                 border-color var(--fast), background-color var(--fast); }
.cur--anello.su{ width:62px; height:62px; margin:-31px 0 0 -31px;
      border-color:#fff; }   /* niente riempimento: con `difference` invertirebbe il testo sotto */
.cur--anello.giu{ width:26px; height:26px; margin:-13px 0 0 -13px; }
@media (prefers-reduced-motion: reduce){ .cur{ display:none; } }
[data-mouse]{ will-change:transform; }


/* ══════════════════════════════════════════════════════════════════════════
   TELEFONO — 03/09/2026
   Ordine di Costantino: «il sito sarà guardato per la maggiore da cellulare,
   quindi ottimizzalo» (GLOSSARIO §12 punto 4). È un'eccezione DICHIARATA alla
   regola di casa «desktop-first».
   ⛔ Tutto quello che c'è qui sta dentro una media query: il PC non lo tocca
      nessuna di queste righe, per costruzione.
   Le misure vengono da `strumenti/misura-390.mjs`, non a occhio.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · IL MENU si apre e si chiude ─────────────────────────────────────
   Sotto i 1180 px il menu era `display:none` e il bottone «Menu» portava al
   modulo Partecipa: da telefono il sito NON AVEVA navigazione. */
@media (max-width:1180px){
  .testata__in{position:relative; flex-wrap:wrap}
  .menu{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:var(--carta); border-top:1px solid var(--riga);
    border-bottom:1px solid var(--riga);
    box-shadow:0 18px 34px rgba(28,26,23,.14);
    max-height:calc(100svh - var(--barra)); overflow-y:auto;
  }
  .menu.aperto{display:flex}
  .menu > li{border-top:1px solid var(--riga)}
  .menu > li:first-child{border-top:0}
  .menu a{min-height:52px; padding:0 20px; font-size:15px}
  .menu .tendina a{padding-left:38px; min-height:48px; font-size:14px; color:var(--tenue)}
}

/* ── 2 · BERSAGLI DI TOCCO ≥ 44 px ────────────────────────────────────────
   Misurati: 19 sotto i 44 px in home (quasi tutti nel piè di pagina, alti
   18 px), 47 nel calendario, 9 nel passaporto. */
@media (max-width:820px){
  .pie ul{gap:0}
  /* min-width oltre a min-height: «News» è largo 39 px, e un bersaglio si
     misura in tutte e due le direzioni. */
  .pie ul li a,
  .pie__legali a,
  .pie__coda a{display:inline-flex; align-items:center; min-height:44px; min-width:44px}
  .marchio{min-height:44px}
  .testa-sez .link,
  .card .link,
  .scheda .link,
  a.link{display:inline-flex; align-items:center; min-height:44px}
  .indietro{min-height:44px; display:inline-flex; align-items:center}
}

/* ── 3 · I CAMPI DEI MODULI ──────────────────────────────────────────────
   Sotto i 16 px iOS INGRANDISCE la pagina appena si tocca il campo, e da lì
   in poi il sito è più largo dello schermo. Non è estetica: è un difetto. */
@media (max-width:820px){
  .filtri select, .filtri input{font-size:16px; letter-spacing:.02em; min-width:0; max-width:100%}
  .filtri{gap:8px}
  .filtri select{flex:1 1 100%}
  .filtri__conta{margin-left:0}
}

/* ── 4 · LO SBORDO ORIZZONTALE ───────────────────────────────────────────
   Misurato: 63 px in home. Colpevole il modulo «Partecipa»: in una griglia,
   un `<select>` con opzioni lunghe NON si stringe sotto la propria larghezza
   minima se non gli si dice `min-width:0`. Era largo 453 px su 390. */
.modulo label, .modulo input, .modulo select, .modulo textarea{min-width:0; max-width:100%}


/* ── 17/09/2026 · GIRO WP81 · LA VISIONE A SCHERMO INTERO SI SFOGLIA ANCHE COL DITO ──────
   Parole del capo al cliente (riunione 13:40, 5:50): «Glielo riaggiusto anche questa cosa»,
   dopo «No, non scorre. Però col tastino». Il gesto lo fa `pubblico/galleria.js`; qui le tre
   cose che servono perché il browser glielo lasci fare:
   · `touch-action: pan-y pinch-zoom` sulla zona della foto: senza, al primo movimento di lato
     del dito il browser si prende il gesto (manda `pointercancel`) e la foto non si sposta;
     in verticale e col pizzico per ingrandire il dito resta libero;
   · niente trascinamento dell'immagine e niente selezione: col mouse si «prenderebbe» il file;
   · il puntatore a manina sulla foto, perché adesso il clic sulla foto fa qualcosa.
   Selettori a due classi: `rifiniture.css` (caricato dopo) veste la visione a una classe sola e
   queste proprietà non le scrive, quindi non si scavalcano. */
.cs-visione .cs-visione__foto{ touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; }
.cs-visione .cs-visione__f img{ -webkit-user-drag: none; cursor: pointer; }
.cs-visione .cs-visione__f .cs-tessera{ cursor: pointer; }

/* 19/09/2026, giro g37 — blocco Passaporto in home col testo di Pamela: sottotitolo, paragrafo
   in grassetto, riga finale in grassetto, due bottoni in fila (il secondo a filo). Ogni pezzo
   esce solo se il suo campo è pieno (parti/corpo-home.php): vuoti = il blocco di prima. */
.pass__sotto{margin:14px 0 0; font-size:clamp(18px,1.6vw,22px); font-weight:700; line-height:1.3}
h2.t-sez + .pass__sotto + .guida{margin-top:18px}
.pass__evidenza + .guida{margin-top:12px}
.guida.pass__evidenza{font-weight:700; color:#fff}
.pass__chiusa{margin:18px 0 0; font-weight:800; max-width:62ch}
.pass__bottoni{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
/* g37 · come i due bottoni dell'apertura (g17/g18 in rifiniture.css): impilati hanno la stessa
   larghezza; il filo è un bordo vero come il giallo, così i due bordi sinistri coincidono;
   se il testo va a capo (telefono) la pillola cresce invece di stringere le righe sul bordo. */
.pass__bottoni{width:fit-content; max-width:100%}
.pass__bottoni > .btn{flex:1 1 auto; line-height:1.25; padding-top:12px; padding-bottom:12px}
.pass__bottoni > .btn--filo{border:2px solid currentColor}
.pass__bottoni > .btn--filo:not(:focus-visible){box-shadow:none}
@media (max-width:374px){ .pass__bottoni > .btn{padding-left:20px; padding-right:20px} }