/* ═══════════════════════════════════════════════════════════════════
   CILENTO EVENTS — styles.css
   Art direction: «Blu Bussento». Inter variabile, un carattere solo.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────── */
:root{
  /* ── LA SUPERFICIE È UN TOKEN ──────────────────────────────────────
     Il bianco delle card era scritto a mano in 54 punti fra `#fff`,
     `var(--cream)` e `rgb(255,255,255)`. Finché restava così, un tema
     scuro si poteva fare solo elencando quei 54 selettori uno per uno —
     una lista che al primo componente nuovo è già incompleta.
     Adesso la carta è `--paper` e ciò che ci sta sopra è `--surface`: per
     girare il sito basta cambiare due valori.
     Il bianco che NON è una superficie (il pulsante chiaro dentro la
     striscia Studio, le righe del panino, il pallino dell'itinerario) è
     rimasto scritto com'era: là il bianco è un elemento sopra un fondo
     scuro, e deve restare bianco anche col tema scuro attivo. */
  --surface:#FFFFFF;
  /* la SEZIONE scura (hero, footer, passaporto, colonna mappa) e il colore
     del TESTO forte erano lo stesso token, --teal-deep. Sul tema chiaro
     funziona; girando il tema no, perche' la sezione deve SCHIARIRSI per
     staccarsi dalla carta mentre il testo deve schiarirsi molto di piu' per
     restare leggibile. Con un token solo usciva testo scuro su scuro:
     1.13:1, misurato dal guardiano. Due token, due mestieri. */
  --sec-dark:#0A2540;
  /* due colori con un SIGNIFICATO, non una tinta: «da confermare» e «fonte
     verificata». Erano scritti a mano (#a25e12 e #1D7A4C) in quattro punti;
     come token il tema scuro puo' schiarirli, perche' sul navy sparirebbero
     (2.88:1 e 2.74:1, misurati). */
  /* NAVY CHE NON GIRA MAI. Su un fondo che resta chiaro in entrambi i temi
     — il corallo, o un pulsante bianco dentro una sezione scura — il testo
     deve restare scuro sempre. Usare --teal-deep li' sembrava giusto finche'
     il tema era uno solo; col tema scuro quel token si schiarisce (deve:
     e' il testo forte) e la scritta spariva sul corallo, 2.46:1. */
  --ink-fixed:#0A2540;
  --tbc:#a25e12;
  --verif:#1D7A4C;

  /* ── RITMO VERTICALE: quattro passi, non otto ──────────────────────
     Le sezioni usavano otto distanze diverse (30→52, 30→54, 36→60,
     40→64, 44→72, 44→76, 44→80, 56→84, 66→120) senza un criterio: sono
     nate una alla volta, ognuna sensata da sola. Insieme pero' non
     compongono un ritmo, e una pagina senza ritmo si legge come
     assemblata invece che disegnata — anche da chi non saprebbe dire
     perche'.
     Quattro passi bastano, e sono tarati perche' il MINIMO sul telefono
     non cresca: la pagina non deve tornare a allungarsi adesso che
     abbiamo lavorato per accorciarla. */
  --sp-1:clamp(30px,4.5vw,52px);   /* fra due blocchi imparentati */
  --sp-2:clamp(40px,6vw,68px);     /* sezione normale */
  --sp-3:clamp(48px,7vw,84px);     /* sezione che deve respirare */
  --sp-4:clamp(60px,9vw,108px);    /* stacco forte, cambio di argomento */

  --teal:#007AFF;
  --teal-deep:#0A2540;
  --ochre:#FF6A3D;
  --cream:#FFFFFF;
  --paper:#F5F5F7;
  --ink:#1D1D1F;
  --muted:#6E6E73;
  --hair:rgba(10,37,64,.14);
  --hair-soft:rgba(10,37,64,.08);
  --hair-cream:rgba(255,255,255,.25);
  /* ⚠️ INTER, non più Marcellus e Jost. neue.css sovrascriveva questi due
     token con Inter fin dal cambio di palette, quindi le altre due famiglie
     non comparivano da nessuna parte — ma restavano nella richiesta a Google
     Fonts: 180 KB scaricati su ogni pagina per caratteri che nessuna regola
     usa. Qui il livello di riserva si allinea a quello che si vede, come già
     fatto il 31/07 con i colori.
     La richiesta è passata a `Inter:wght@300..800`, il file VARIABILE: sette
     file invece di trentacinque, e soprattutto ogni peso è reale. Prima 300
     e 650 non erano fra quelli caricati e il browser li sintetizzava — un
     grassetto finto, che allarga le lettere invece di ridisegnarle. */
  --serif:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
  --wrap:1180px;
  --pad:clamp(20px,4vw,48px);
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);font-weight:300;color:var(--ink);
  background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;
  /* il minimo sale da 15 a 16px: sotto i 16 il corpo del testo si legge
     peggio su ogni schermo, ed e la misura su cui sono tarati i browser. */
  font-size:clamp(16px,1.05vw,17px);
}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;color:inherit;background:none;border:none}
a{color:inherit;text-decoration:none}
::selection{background:rgba(255,106,61,.28)}
body.locked{overflow:hidden}
:focus-visible{outline:2px solid var(--ochre);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── Tipografia condivisa ───────────────────────────────────────── */
.eyebrow{
  font-size:0.7rem;font-weight:400;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ochre);display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--ochre);opacity:.7}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:.01em}
.mono{font-family:var(--mono);font-size:0.7rem;letter-spacing:.04em;color:var(--muted)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* ── Wordmark ───────────────────────────────────────────────────── */
.wordmark{display:inline-flex;flex-direction:column;align-items:center;text-align:center;gap:2px;text-decoration:none}
.wordmark .wm-micro{font-size:.5rem;letter-spacing:3.5px;text-transform:uppercase;color:var(--muted);font-weight:400}
.wordmark .wm-name{font-family:var(--serif);font-size:1.14rem;letter-spacing:8px;text-indent:8px;color:var(--ink);line-height:1.15}
.wordmark .wm-glyph{display:flex;align-items:center;gap:10px;width:100%;margin:1px 0}
.wordmark .wm-glyph::before,.wordmark .wm-glyph::after{content:"";flex:1;height:1px;background:var(--hair)}
.wordmark .wm-glyph svg{flex-shrink:0;display:block}
.wordmark .wm-sub{font-size:.56rem;letter-spacing:14px;text-indent:14px;text-transform:uppercase;color:var(--teal);font-weight:400}
/* variante crema su teal */
.wordmark.on-dark .wm-micro{color:rgba(255,255,255,.55)}
.wordmark.on-dark .wm-name{color:var(--cream)}
.wordmark.on-dark .wm-glyph::before,.wordmark.on-dark .wm-glyph::after{background:var(--hair-cream)}
.wordmark.on-dark .wm-sub{color:var(--ochre)}

/* ── Announcement strip (Caselle) ───────────────────────────────── */
.strip{background:var(--sec-dark);color:var(--cream);cursor:pointer}
.strip:hover .strip-go{color:var(--cream)}
.strip-in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:14px;
  padding:9px var(--pad);font-size:.78rem;font-weight:300;letter-spacing:.04em}
.strip-lbl{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--ochre);white-space:nowrap}
.strip-in b{font-weight:400}
.strip-go{margin-left:auto;color:var(--ochre);white-space:nowrap;letter-spacing:1.6px;font-size:.72rem;text-transform:uppercase}
@media(max-width:640px){.strip .hide-s{display:none}}

/* ── Header ─────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:70;transition:background .35s ease,box-shadow .35s ease,border-color .35s;
  background:transparent;border-bottom:1px solid transparent}
.hdr-in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:26px;padding:17px var(--pad)}
/* gap massimo 26 e non 32: con 32 il menu chiedeva 918px su 918 disponibili,
   cioe' stava esattamente al limite, e «Il Cilento» andava a capo DENTRO la
   sua voce — alta 65px invece di 41, che e' come l'intestazione arrivava a
   100px. Sei pixel per gap sono 54px recuperati: non si vedono e bastano. */
.hdr nav{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,2.2vw,26px)}
/* white-space:nowrap è la garanzia: una voce di menu non deve MAI andare a
   capo dentro se stessa. Se lo spazio non basta a cedere è il gap, o sotto
   gli 860px la voce sparisce nel menu a panino — non l'altezza della barra.
   Anche la spaziatura scende da 2.5px a 1.6px, come nel resto del sito. */
.hdr nav a{font-size:.8rem;letter-spacing:1.6px;text-transform:uppercase;font-weight:500;white-space:nowrap;
  color:var(--cream);transition:color .25s;padding:6px 0;border-bottom:1px solid transparent}
.hdr nav a:hover{color:var(--ochre)}
.btn-tickets{font-size:.7rem;letter-spacing:1.6px;text-transform:uppercase;font-weight:400;
  background:var(--ochre);color:var(--ink);padding:10px 20px;transition:.25s}
.btn-tickets:hover{background:#E85527}
/* stato hero (trasparente): wordmark in crema */
.hdr .wordmark .wm-micro{color:rgba(255,255,255,.55)}
.hdr .wordmark .wm-name{color:var(--cream)}
.hdr .wordmark .wm-glyph::before,.hdr .wordmark .wm-glyph::after{background:var(--hair-cream)}
.hdr .wordmark .wm-sub{color:var(--ochre)}
/* stato scrolled: carta */
.hdr.scrolled{background:var(--paper);border-color:var(--hair-soft);box-shadow:0 1px 0 var(--hair-soft)}
.hdr.scrolled nav a{color:var(--ink)}
.hdr.scrolled nav a:hover{color:var(--teal)}
.hdr.scrolled .wordmark .wm-micro{color:var(--muted)}
.hdr.scrolled .wordmark .wm-name{color:var(--ink)}
.hdr.scrolled .wordmark .wm-glyph::before,.hdr.scrolled .wordmark .wm-glyph::after{background:var(--hair)}
.hdr.scrolled .wordmark .wm-sub{color:var(--teal)}
@media(max-width:860px){.hdr nav a{display:none}.hdr nav a.keep{display:inline}}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  /* ⚠️ L'HERO SI TIRA SU DI ESATTAMENTE L'ALTEZZA DELL'INTESTAZIONE, che è
     trasparente e ci deve stare SOPRA. Era scritto 75px a mano, e 75px era
     giusto finché l'intestazione era alta 79. Il 09/08/2026, alzando il corpo
     del testo da 15 a 16px, l'intestazione è passata a 100px e sono rimasti
     25px scoperti fra la striscia navy e la foto: una STRISCIA BIANCA in
     cima alla home, subito visibile.
     Un numero scritto a mano che deve combaciare con un'altezza calcolata dal
     contenuto è una trappola che scatta al primo ritocco tipografico. Adesso
     l'altezza vera la misura app.js e la scrive in --hdr-h (con un
     ResizeObserver, quindi segue anche il menu che va a capo o la lingua che
     cambia). I 75px restano solo come valore di riserva se il JavaScript non
     parte: in quel caso non c'è nemmeno l'hero da coprire. */
  margin-top:calc(-1 * var(--hdr-h, 75px));
  color:var(--cream);isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--sec-dark)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(200deg,rgba(10,37,64,.18) 0%,rgba(10,37,64,.42) 45%,rgba(10,37,64,.86) 100%)}
.hero-in{max-width:var(--wrap);margin:0 auto;width:100%;padding:0 var(--pad) clamp(56px,9vh,110px)}
.hero .eyebrow{color:var(--ochre);margin-bottom:22px}
/* ⚠️ --cream, NON --paper. Il titolo dell'hero sta su una FOTOGRAFIA con
   un velo scuro sopra, in tutti e due i temi: deve essere chiaro sempre.
   Con --paper seguiva il tema e col tema scuro diventava navy su una foto
   chiara — illeggibile, e proprio sulla cosa piu' grande della home.
   Il guardiano non l'ha visto perche' .hero e' escluso dalla misura del
   contrasto (il fondo vero e' la foto, che la risalita non vede): una
   seconda volta in una sera un'esclusione ha coperto un difetto vero. */
.hero h1{font-size:clamp(2.5rem,6.2vw,4.6rem);line-height:1.06;max-width:15ch;color:var(--cream)}
.hero p{margin-top:20px;max-width:52ch;font-size:clamp(.98rem,1.4vw,1.12rem);font-weight:300;color:rgba(255,255,255,.88)}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px}
/* Linguaggio unico dei bottoni: transizioni mirate (mai "all"), alzata di 1px CON
   ombra su hover (l'alzata senza ombra sembra levitazione finta), pressione visibile
   al click. Niente filter:brightness. */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;letter-spacing:1.6px;
  text-transform:uppercase;font-weight:400;padding:15px 30px;border:1px solid transparent;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease,box-shadow .2s ease}
.btn:active{transform:scale(.97);transition-duration:.06s}
.btn-primary{background:var(--ochre);color:var(--ink)}
.btn-primary:hover{background:#E85527;transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(180,124,38,.6)}
.btn-primary:active{transform:scale(.97);box-shadow:0 4px 10px -6px rgba(180,124,38,.5)}
.btn-line{border-color:rgba(255,255,255,.5);color:var(--cream)}
.btn-line:hover{border-color:var(--cream);background:rgba(255,255,255,.1)}
.btn-line-dark{border-color:var(--hair);color:var(--ink)}
.btn-line-dark:hover{border-color:var(--ink);background:rgba(10,37,64,.05)}
.hero-meta{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.22);
  display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,60px);font-size:.72rem;letter-spacing:1.6px;
  text-transform:uppercase;color:rgba(255,255,255,.66)}
.hero-meta b{color:var(--cream);font-weight:400;margin-right:8px;font-size:.95rem;letter-spacing:0}

/* ── Sezioni comuni ─────────────────────────────────────────────── */
section{padding:var(--sp-4) 0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sec-head{margin-bottom:clamp(34px,5vw,56px);max-width:640px}
.sec-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.14;margin-top:16px}
.sec-head p{color:var(--muted);margin-top:14px}

/* ── Categorie ──────────────────────────────────────────────────── */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2.4vw,28px)}
.cat{display:flex;flex-direction:column;background:var(--paper);text-align:left;
  transition:transform .35s ease,box-shadow .35s ease;border:1px solid var(--hair-soft)}
.cat:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(10,37,64,.1)}
.cat figure{position:relative;aspect-ratio:4/3;overflow:hidden;margin:0}
.cat figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.cat:hover figure img{transform:scale(1.045)}
.cat-body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:8px}
.cat-body .eyebrow{font-size:0.7rem;letter-spacing:1.6px}
.cat-body h3{font-size:1.3rem}
.cat-body p{font-size:.86rem;color:var(--muted)}
.cat-body .cat-go{margin-top:10px;font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal)}
/* La vecchia coppia di regole del segnaposto a righine stava QUI, duplicata
   rispetto a quella piu' sotto (figure.ph). Metteva sfondo bianco, bordo e
   padding a «.ph figcaption, .ph span» — e siccome l'emoji della tessera
   nuova e' uno <span>, si ritrovava chiusa in una scatolina bianca insieme
   al nome del paese: due riquadri che galleggiavano su un fondo pastello.
   Una sola definizione, piu' sotto. */

/* ── In programma (righe editoriali) ────────────────────────────── */
#programma{background:var(--surface);padding-top:var(--sp-4);padding-bottom:var(--sp-4)}
.rows{border-top:1px solid var(--hair)}
.row{display:grid;grid-template-columns:92px 1fr auto;gap:clamp(16px,3vw,36px);align-items:center;
  width:100%;text-align:left;padding:clamp(18px,2.6vw,26px) clamp(8px,1.4vw,18px);
  border-bottom:1px solid var(--hair);transition:background .3s ease;cursor:pointer}
.row:nth-child(even){background:rgba(250,248,243,.6)}
.row:hover{background:var(--paper)}
.row-date{text-align:center;border-right:1px solid var(--hair);padding-right:clamp(14px,2vw,26px)}
.row-date b{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1;font-weight:400}
.row-date span{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.row.cas .row-date b{color:var(--ochre)}
.row-main .r-eyebrow{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:4px;display:flex;gap:14px;flex-wrap:wrap}
.row-main .r-eyebrow .gold{color:var(--ochre)}
.row-main .r-eyebrow .live{color:var(--teal)}
.row-main h3{font-size:clamp(1.12rem,2vw,1.42rem);line-height:1.2}
.row-main .r-venue{font-size:.84rem;color:var(--muted);margin-top:3px}
.row-side{display:flex;align-items:center;gap:22px}
.row-side .r-kpi{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal)}
.row-side .r-link{font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal);
  white-space:nowrap;transition:.25s;border-bottom:1px solid transparent;padding-bottom:2px}
.row:hover .r-link{color:var(--ink);border-color:var(--ochre)}
@media(max-width:640px){
  .row{grid-template-columns:64px 1fr}
  .row-side{display:none}
  .row-date b{font-size:1.5rem}
}
.rows-foot{display:flex;justify-content:center;margin-top:38px}

/* ── Banda "Il Cilento" ─────────────────────────────────────────── */
#cilento{background:var(--sec-dark);color:var(--cream)}
.story{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:880px){.story{grid-template-columns:1fr}}
.story .eyebrow{color:var(--ochre)}
.story blockquote{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.25;
  margin:22px 0 0;color:var(--paper)}
.story blockquote em{font-style:normal;color:var(--ochre)}
.story .story-p{margin-top:24px;color:rgba(255,255,255,.82);max-width:56ch}
.story .btn{margin-top:34px}
.story-media{position:relative}
.story-media figure{margin:0;aspect-ratio:3/4;overflow:hidden}
.story-media img{width:100%;height:100%;object-fit:cover}
.story-media figcaption{margin-top:10px;font-family:var(--mono);font-size:0.7rem;color:rgba(255,255,255,.5)}
.story-media::after{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid rgba(255,106,61,.35);z-index:-1}

/* ── Calendario ─────────────────────────────────────────────────── */
#eventi .sec-head{max-width:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:18px}
#eventi .sec-head h2{margin-top:0}
#eventi .sec-head .count{font-size:.74rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
#eventi .sec-head .count b{color:var(--ochre);font-weight:400}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.search{position:relative;flex:1 1 240px;max-width:340px}
.search input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--hair);
  padding:10px 2px 10px 26px;font-family:var(--sans);font-weight:300;font-size:.92rem;color:var(--ink);outline:none;transition:border .3s}
.search input:focus{border-color:var(--teal)}
.search input::placeholder{color:var(--muted);opacity:.7}
.search svg{position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 6px}
.chip{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;font-weight:400;color:var(--muted);
  border:1px solid var(--hair);border-radius:0;padding:8px 15px;transition:.25s;white-space:nowrap;background:transparent}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip.gold{color:var(--ochre);border-color:rgba(255,106,61,.5)}
.chip.gold.on{background:var(--ochre);border-color:var(--ochre);color:var(--ink)}
.chip .n{opacity:.7;margin-left:4px}
.chip-sep{width:1px;height:20px;background:var(--hair);margin:0 4px;align-self:center}

/* timeline */
.day{display:flex;align-items:center;gap:16px;margin:34px 0 12px}
.day .dl{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.day .dl em{font-style:normal;color:var(--ochre);margin-left:10px;letter-spacing:1px}
.day::after{content:"";flex:1;height:1px;background:var(--hair-soft)}
.day.hot .dl{color:var(--teal)}
.ev{display:flex;gap:clamp(14px,2.4vw,24px);align-items:center;width:100%;text-align:left;
  padding:16px clamp(4px,1vw,12px);border-bottom:1px solid var(--hair-soft);cursor:pointer;
  transition:background .3s ease}
.ev:hover{background:var(--surface)}
.ev.cas{box-shadow:inset 3px 0 0 var(--ochre);padding-left:clamp(12px,1.6vw,20px)}
.ev .thumb{flex-shrink:0;width:104px;aspect-ratio:3/2;overflow:hidden;background:var(--surface);position:relative}
.ev .thumb img{width:100%;height:100%;object-fit:cover}
.ev .thumb .fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:0.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  background:repeating-linear-gradient(-45deg,var(--cream) 0 8px,#e6e1d3 8px 16px)}
.ev .thumb.has-img .fb{display:none}
.ev-mid{flex:1;min-width:0}
.ev-mid .e-eyebrow{display:flex;flex-wrap:wrap;gap:12px;font-size:0.7rem;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ev-mid .e-eyebrow .gold{color:var(--ochre)}
.ev-mid .e-eyebrow .live{color:var(--teal)}
.ev-mid .e-eyebrow .tbc{color:var(--tbc)}
.ev-mid .e-eyebrow .kpi{color:var(--teal)}
.ev-mid h3{font-size:clamp(1.02rem,1.7vw,1.25rem);line-height:1.25}
.ev-mid .meta{font-size:.82rem;color:var(--muted);margin-top:2px}
.ev-side{flex-shrink:0;display:flex;align-items:center;gap:16px}
.save{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:.25s}
.save:hover{color:var(--ink)}
.save.sv{color:var(--ochre);border-color:var(--ochre)}
.ev-side .r-link{font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal);white-space:nowrap}
.ev:hover .ev-side .r-link{color:var(--ink)}
@media(max-width:620px){.ev .thumb{width:76px}.ev-side .r-link{display:none}}
.empty{text-align:center;padding:60px 0;color:var(--muted)}
.empty b{display:block;font-family:var(--serif);font-size:1.25rem;color:var(--ink);margin-bottom:8px;font-weight:400}

/* ── Newsletter ─────────────────────────────────────────────────── */
#news{background:var(--surface);text-align:center}
#news .wrap{max-width:660px}
#news h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-top:16px}
#news p{color:var(--muted);margin-top:12px}
.news-form{display:flex;gap:0;margin-top:34px;border:1px solid var(--hair);background:var(--paper)}
.news-form input{flex:1;border:none;background:transparent;padding:16px 20px;font-family:var(--sans);
  font-weight:300;font-size:.95rem;color:var(--ink);outline:none;min-width:0}
.news-form button{flex-shrink:0}
.news-ok{margin-top:18px;font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal)}
.news-err{margin-top:14px;font-size:.85rem;color:#a25e12}
.news-err a{color:inherit;text-decoration:underline}
/* honeypot: invisibile alle persone, irresistibile per i bot */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
@media(max-width:520px){.news-form{flex-direction:column}.news-form .btn{justify-content:center}}

/* ── Footer ─────────────────────────────────────────────────────── */
footer{background:var(--sec-dark);color:rgba(255,255,255,.8);padding:var(--sp-3) 0 36px}
.f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(28px,5vw,64px)}
@media(max-width:780px){.f-grid{grid-template-columns:1fr}}
footer h5{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--ochre);margin-bottom:16px;font-weight:400}
footer ul{list-style:none}
footer li{margin-bottom:9px;font-size:.86rem;font-weight:300}
footer a:hover{color:var(--ochre)}
.f-about{font-size:.86rem;max-width:40ch;margin-top:20px;color:rgba(255,255,255,.66)}
.f-credits{margin-top:clamp(36px,5vw,56px);padding-top:20px;border-top:1px solid var(--hair-cream)}
.credits{font-size:0.7rem;color:rgba(255,255,255,.42)}
.credits summary{cursor:pointer;list-style:none;letter-spacing:.04em;transition:color .2s;display:inline-flex;align-items:center;gap:6px}
.credits summary::-webkit-details-marker{display:none}
.credits summary::before{content:"›";display:inline-block;transition:transform .2s;color:var(--ochre)}
.credits[open] summary::before{transform:rotate(90deg)}
.credits summary:hover{color:rgba(255,255,255,.72)}
.credits-list{margin-top:10px;font-size:0.7rem;line-height:1.9;color:rgba(255,255,255,.38);max-width:92ch}
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:18px;
  font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* ── Scheda evento (drawer) ─────────────────────────────────────── */
.veil{position:fixed;inset:0;z-index:90;background:rgba(10,37,64,.5);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .3s}
.veil.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;top:0;right:0;bottom:0;z-index:95;width:min(560px,100vw);
  background:var(--paper);overflow-y:auto;box-shadow:-20px 0 60px rgba(10,37,64,.3);
  transform:translateX(103%);transition:transform .38s cubic-bezier(.22,.8,.3,1);overscroll-behavior:contain}
.sheet.open{transform:none}
@media(max-width:560px){.sheet{top:auto;left:0;width:100%;max-height:94vh;transform:translateY(103%)}}
.sh-cover{position:relative;height:240px;overflow:hidden;background:var(--sec-dark)}
.sh-cover img{width:100%;height:100%;object-fit:cover}
/* la copertina senza foto: stesso linguaggio della tessera delle card
   (fondo profondo, emoji, etichetta bianca) invece delle righine da
   segnaposto con dentro il nome del file. */
.sh-cover .sh-emoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:3.4rem;filter:drop-shadow(0 3px 12px rgba(0,0,0,.45))}
.sh-cover.has-img .sh-emoji{display:none}
.sh-cover .fb{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;
  font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.45)}
.sh-cover.has-img .fb{display:none}
.sh-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,37,64,.12),transparent 40%)}
.sh-x,.sh-save{position:absolute;top:16px;z-index:3;height:34px;display:flex;align-items:center;justify-content:center;
  background:var(--paper);color:var(--ink);font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;
  padding:0 14px;transition:.25s}
.sh-x{right:16px;width:34px;padding:0}
.sh-save{right:58px}
.sh-x:hover,.sh-save:hover{background:var(--surface)}
.sh-save.sv{background:var(--ochre)}
.sh-body{padding:30px clamp(22px,4.5vw,38px) 44px}
.sh-eyebrow{display:flex;flex-wrap:wrap;gap:14px;font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.sh-eyebrow .gold{color:var(--ochre)}
.sh-eyebrow .live{color:var(--teal)}
.sh-eyebrow .tbc{color:var(--tbc)}
.sh-body h2{font-size:clamp(1.6rem,3.4vw,2.1rem);line-height:1.15;margin-top:12px}
.sh-meta{margin:22px 0 0;border-top:1px solid var(--hair-soft)}
.sh-meta .m{display:flex;gap:18px;padding:10px 0;border-bottom:1px solid var(--hair-soft);font-size:.9rem}
.sh-meta .lb{flex-shrink:0;width:72px;font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);padding-top:4px}
.sh-meta b{font-weight:400}
.sh-desc{margin-top:20px;color:var(--muted)}
.sh-h{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--ochre);
  margin:32px 0 16px;display:flex;align-items:center;gap:14px}
.sh-h::after{content:"";flex:1;height:1px;background:var(--hair-soft)}
.pr{display:flex;gap:16px;position:relative;padding-bottom:18px}
.pr::before{content:"";position:absolute;left:3px;top:16px;bottom:0;width:1px;background:var(--hair)}
.pr:last-child::before{display:none}
.pr .pt{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--teal);margin-top:7px}
.pr.gd .pt{background:var(--ochre)}
.pr b{display:block;font-size:0.7rem;font-weight:400;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal)}
.pr.gd b{color:var(--ochre-txt)}
.pr p{font-size:.9rem;color:var(--muted);margin-top:3px}
.inf{display:grid;gap:9px;list-style:none}
.inf li{display:flex;gap:12px;font-size:.88rem;color:var(--muted)}
.inf li::before{content:"—";color:var(--ochre);flex-shrink:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft)}
.kpi{background:var(--paper);padding:18px 12px;text-align:center}
.kpi b{display:block;font-family:var(--serif);font-size:1.8rem;font-weight:400}
.kpi span{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.kpi-up{font-size:0.7rem;color:var(--muted);margin-top:10px;letter-spacing:.04em}
.luma-embed{border:1px solid var(--hair-soft);background:var(--surface)}
.luma-embed iframe{display:block;width:100%;height:440px;border:0}
.no-prog{font-size:.86rem;color:var(--muted);border:1px dashed var(--hair);padding:16px 18px}
.sh-note{margin-top:30px;border-top:1px solid var(--hair-soft);padding-top:14px;
  font-size:0.7rem;line-height:1.8;color:var(--muted)}
.sh-note b{color:var(--ink);font-weight:400}

/* ═══════════════════════════════════════════════════════════════════
   V2 — grana, motion, lingue, promemoria, export social
   ═══════════════════════════════════════════════════════════════════ */

/* grana pellicola, impercettibile ma viva */
body::after{content:"";position:fixed;inset:0;z-index:120;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* hero: lento respiro cinematografico + invito allo scroll */
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.11)}}
.hero-media img{animation:kenburns 26s ease-in-out infinite alternate;transform-origin:60% 40%}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:1px;height:56px;overflow:hidden}
.scroll-cue::after{content:"";position:absolute;left:0;top:-100%;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,var(--ochre));animation:cue 2.4s ease-in-out infinite}
@keyframes cue{60%{top:100%}100%{top:100%}}

/* nav: sottolineatura editoriale animata */
.hdr nav a{position:relative}
.hdr nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:var(--ochre);transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
.hdr nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* selettore lingua */
.langs{display:flex;align-items:center;gap:2px;margin-left:6px}
/* Il selettore di lingua era il comando piu piccolo della pagina — 9.9px
   e 26x24px da toccare — su un sito che si presenta in cinque lingue.
   Ora 11.8px e un bersaglio da 32px, che e il minimo per un dito. */
.langs button{font-size:.74rem;letter-spacing:1.6px;padding:8px 10px;min-height:32px;color:var(--cream);
  opacity:.55;transition:.25s;text-transform:uppercase}
.langs button:hover{opacity:.9}
.langs button.on{opacity:1;color:var(--ochre)}
.hdr.scrolled .langs button{color:var(--ink)}
.hdr.scrolled .langs button.on{color:var(--teal)}

/* campanella promemoria */
.bell{position:relative}
.bell-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  color:var(--cream);transition:.25s;position:relative}
.hdr.scrolled .bell-btn{color:var(--ink)}
.bell-btn:hover{color:var(--ochre)}
.bell-btn .bn{position:absolute;top:1px;right:0;min-width:15px;height:15px;border-radius:999px;
  background:var(--ochre);color:var(--ink);font-size:0.7rem;font-weight:500;display:flex;
  align-items:center;justify-content:center;padding:0 3px}
.bell-panel{position:absolute;top:calc(100% + 14px);right:0;width:min(340px,86vw);z-index:80;
  background:var(--paper);border:1px solid var(--hair);box-shadow:0 24px 60px rgba(10,37,64,.22);
  padding:18px;display:none}
.bell-panel.open{display:block}
.bell-panel h6{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--ochre);margin-bottom:12px;font-weight:400}
.bell-panel .bp-none{font-size:.82rem;color:var(--muted)}
.bp-row{display:flex;gap:12px;align-items:baseline;width:100%;text-align:left;padding:9px 0;
  border-top:1px solid var(--hair-soft);cursor:pointer}
.bp-row:hover h6,.bp-row:hover .bp-t{color:var(--teal)}
.bp-when{flex-shrink:0;font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--ochre);width:74px}
.bp-t{font-family:var(--serif);font-size:.95rem;line-height:1.25}
.bp-p{font-size:.72rem;color:var(--muted)}
.bp-cta{margin-top:12px;width:100%;text-align:center;font-size:0.7rem;letter-spacing:1.6px;
  text-transform:uppercase;border:1px solid var(--hair);padding:10px;transition:.25s;color:var(--muted)}
.bp-cta:hover{border-color:var(--ink);color:var(--ink)}
.bp-cta.ok{border-color:rgba(0,122,255,.4);color:var(--teal);cursor:default}

/* export social nella scheda */
.share-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.share-b{border:1px solid var(--hair);padding:14px 10px;text-align:center;font-size:0.7rem;
  letter-spacing:2px;text-transform:uppercase;color:var(--ink);background:var(--paper);
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease}
.share-b small{display:block;margin-top:4px;font-size:0.7rem;letter-spacing:1.6px;color:var(--muted);text-transform:none}
.share-b:hover{border-color:var(--ochre);background:var(--surface)}
.share-b:disabled{opacity:.45;cursor:wait}
.share-b.native{background:var(--sec-dark);color:var(--cream);border-color:var(--teal-deep)}
.share-b.native:hover{background:var(--teal)}
.share-hint{font-size:.72rem;color:var(--muted);margin-top:10px}
.content-note{font-size:.7rem;color:var(--muted);border-left:2px solid var(--ochre);
  padding:4px 0 4px 12px;margin-top:16px;font-style:italic}

/* micro-rifiniture editoriali */
.sec-head h2{position:relative}
.row,.ev{will-change:transform}
.cat figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,37,64,.34));
  opacity:0;transition:opacity .45s ease}
.cat:hover figure::after{opacity:1}
.hero h1{text-wrap:balance}
.story blockquote{text-wrap:balance}

/* ═══════════════════════════════════════════════════════════════════
   V3 — home curata + catalogo /eventi + calendario + TWA
   ═══════════════════════════════════════════════════════════════════ */

/* safe areas (notch / gesture bar) */
.hdr{padding-top:env(safe-area-inset-top)}
.sheet{padding-bottom:env(safe-area-inset-bottom)}
footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}

/* splash TWA/PWA (solo in standalone) */
#splash{position:fixed;inset:0;z-index:200;background:var(--teal);display:none;
  align-items:center;justify-content:center;transition:opacity .45s ease}
#splash.show{display:flex}
#splash.hide{opacity:0;pointer-events:none}

/* Tessera per gli eventi senza fotografia (sei, oggi). Qui c'era il
   segnaposto DA SVILUPPO: righine diagonali e un riquadro col nome del file
   mancante, la didascalia e il rapporto d'aspetto. Una nota per chi
   costruiva il sito, servita ai visitatori — che leggono solo «rotto».
   Adesso: il colore della categoria, l'emoji dell'evento e il paese. Non
   finge di essere una foto, ma è una cosa finita. */
/* IL PRIMO TENTATIVO ERA BRUTTO e vale la pena dire perché: fondo pastello
   chiaro, emoji e paese al centro — e siccome una vecchia regola qui sopra
   incorniciava «.ph span», emoji e scritta finivano dentro due scatoline
   bianche che galleggiavano sul giallino. Sembrava un errore di stampa.
   Un fondo chiaro e slavato non e' MAI la scelta giusta per rimpiazzare una
   fotografia: la card accanto ha una foto vera, profonda e satura, e la
   tessera pallida al confronto sembra la casella non caricata.
   Questa e' scura come una foto, usa il navy del marchio virato verso il
   colore della categoria, e porta il segno della montagna del logo come
   filigrana. Il paese e' scritto grande, in bianco: e' l'informazione che
   una foto darebbe comunque. Non finge di essere una fotografia — ma sta
   accanto a una fotografia senza sfigurare, che e' il punto.
   Il colore della categoria pesa il 46% e non di piu': al 55% il giallo
   della «tradizione» portava il fondo a 4.49:1 con la scritta bianca,
   cioe' un centesimo sotto la soglia. Al 46% la peggiore fa 5.56:1 e la
   tinta si distingue lo stesso. */
figure.ph{margin:0;width:100%;display:flex;flex-direction:column;gap:10px;
  align-items:center;justify-content:center;overflow:hidden;position:relative;
  background:
    radial-gradient(130% 100% at 50% 0%, color-mix(in srgb,var(--pc,#007AFF) 46%, #0A2540) 0%, transparent 72%),
    linear-gradient(165deg, #12365C 0%, #0A2540 55%, #06182C 100%)}
/* filigrana: la linea di monti del logo, ripetuta. È un SVG in linea, quindi
   niente richieste di rete e niente file da tenere allineato. */
figure.ph::before{content:"";position:absolute;inset:0;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='40' viewBox='0 0 104 40'%3E%3Cpath d='M2 34 L20 12 L32 25 L48 4 L62 20 L78 8 L102 34' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:132px 50px;background-position:center}
figure.ph .ph-emoji{position:relative;font-size:clamp(1.6rem,4.4vw,2.3rem);line-height:1;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.45))}
figure.ph figcaption{position:relative;font-size:clamp(.78rem,1.5vw,1rem);letter-spacing:1.6px;
  text-transform:uppercase;font-weight:700;color:#fff;text-align:center;padding:0 14px;max-width:92%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 2px 10px rgba(0,0,0,.4)}

/* in evidenza — ESATTAMENTE 3 card editoriali */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2.6vw,28px)}
.fcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--hair-soft);
  text-align:left;cursor:pointer;transition:transform .35s ease,box-shadow .35s ease;padding:0}
.fcard:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(10,37,64,.12)}
.fcard .fmedia{position:relative;aspect-ratio:16/10;overflow:hidden}
.fcard .fmedia img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.fcard:hover .fmedia img{transform:scale(1.045)}
.fcard .fmedia figure.ph{position:absolute;inset:0;height:100%}
.fcard .datechip{position:absolute;top:14px;left:14px;z-index:2;background:var(--paper);
  padding:8px 13px;text-align:center;box-shadow:0 4px 18px rgba(10,37,64,.18)}
.fcard .datechip b{display:block;font-family:var(--serif);font-size:1.4rem;line-height:1}
.fcard .datechip span{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.fcard.cas .datechip b{color:var(--ochre)}
.fcard .fbody{padding:20px 22px 24px;display:flex;flex-direction:column;gap:7px;flex:1}
.fcard .fbody .eyebrow{font-size:0.7rem;letter-spacing:1.6px}
.fcard .fbody h3{font-size:clamp(1.2rem,2.1vw,1.5rem);line-height:1.22}
.fcard .fbody .fvenue{font-size:.84rem;color:var(--muted)}
.fcard .fbody .flink{margin-top:auto;padding-top:14px;font-size:0.7rem;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--teal)}
.fcard:hover .flink{color:var(--ink)}

/* prossimi appuntamenti — anteprima compatta (max 6) */
.next-rows{max-width:820px;margin:0 auto;border-top:1px solid var(--hair)}
.nrow{display:grid;grid-template-columns:76px 1fr auto;gap:clamp(14px,2.5vw,30px);align-items:center;
  width:100%;text-align:left;padding:16px 6px;border-bottom:1px solid var(--hair);cursor:pointer;transition:background .3s}
.nrow:hover{background:var(--paper)}
.nrow .row-date{border-right:1px solid var(--hair);padding-right:14px}
.nrow .row-date b{font-size:1.5rem}
.nrow h3{font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.25}
.nrow .r-venue{font-size:.8rem;color:var(--muted)}
.nrow .r-link{font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal);white-space:nowrap}
@media(max-width:560px){.nrow{grid-template-columns:58px 1fr}.nrow .r-link{display:none}}

/* ── pagina /eventi ── */
.page-head{padding:var(--sp-3) 0 clamp(26px,4vw,44px);background:var(--surface)}
.page-head h1{font-size:clamp(2rem,4.6vw,3.2rem);margin-top:14px}
.page-head p{color:var(--muted);margin-top:12px;max-width:60ch}
.cat-bar{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid var(--hair-soft);padding:12px 0}
.cat-bar .wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.msel{font-family:var(--sans);font-weight:400;font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ink);background:transparent;border:1px solid var(--hair);padding:9px 13px;outline:none;cursor:pointer}
.msel:focus-visible{outline:2px solid var(--ochre)}
.view-tog{display:flex;margin-left:auto;border:1px solid var(--hair)}
.view-tog button{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;padding:9px 15px;color:var(--muted);transition:.25s}
.view-tog button.on{background:var(--ink);color:var(--paper)}
.res-count{font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin:26px 0 6px}
.res-count b{color:var(--ochre);font-weight:400}

/* griglia catalogo (EventCard) */
.month-h{display:flex;align-items:center;gap:16px;margin:38px 0 18px}
.month-h h2{font-size:clamp(1.15rem,2.2vw,1.5rem)}
.month-h::after{content:"";flex:1;height:1px;background:var(--hair)}
.egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:clamp(14px,2vw,24px)}
.ecard{display:flex;flex-direction:column;border:1px solid var(--hair-soft);
  text-align:left;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;padding:0;background:var(--paper)}
.ecard:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(10,37,64,.1)}

.ecard .emedia{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--surface)}
.ecard .emedia img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.ecard:hover .emedia img{transform:scale(1.04)}
.ecard .emedia figure.ph{position:absolute;inset:0;height:100%}
.ecard .ebody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.ecard .e-eyebrow{display:flex;flex-wrap:wrap;gap:10px;font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.ecard .e-eyebrow .gold{color:var(--ochre)}
.ecard .e-eyebrow .live{color:var(--teal)}
.ecard .e-eyebrow .tbc{color:var(--tbc)}
.ecard h3{font-family:var(--serif);font-size:1.12rem;line-height:1.25;font-weight:400}
.ecard .eplace{font-size:.78rem;color:var(--muted)}
.ecard .efoot{margin-top:auto;padding-top:12px;display:flex;justify-content:flex-end;align-items:center;border-top:1px solid var(--hair-soft)}
.ecard .efoot .save{font-size:0.7rem}
.ecard .efoot .r-link{font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal)}
.load-more{display:flex;justify-content:center;margin:44px 0 10px}

/* vista calendario */
.calv{margin-top:26px}
.cal-head{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:18px}
.cal-head h2{font-size:clamp(1.2rem,2.4vw,1.6rem);min-width:12ch;text-align:center}
.cal-nav{width:38px;height:38px;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:var(--muted);transition:.25s}
.cal-nav:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid var(--hair-soft);border-top:1px solid var(--hair-soft)}
.cal-dow{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);
  padding:9px 8px;border-right:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);background:var(--surface)}
.cal-cell{min-height:96px;padding:7px 7px 9px;border-right:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);
  background:var(--paper);display:flex;flex-direction:column;gap:4px}
.cal-cell.out{background:transparent}
.cal-cell.today{background:var(--surface)}
.cal-d{font-family:var(--serif);font-size:.86rem;color:var(--muted)}
.cal-cell.today .cal-d{color:var(--ochre)}
.cal-ev{font-size:0.7rem;line-height:1.3;text-align:left;padding:3px 6px;background:rgba(0,122,255,.09);
  color:var(--teal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.2s;width:100%;min-width:0;max-width:100%}
.cal-ev:hover{background:var(--teal);color:var(--paper)}
.cal-ev.cas{background:rgba(255,106,61,.16);color:var(--gold)}
.cal-ev.cas:hover{background:var(--ochre);color:var(--ink)}
.cal-more{font-size:0.7rem;color:var(--muted);text-align:left;padding:0 6px}
@media(max-width:720px){.cal-cell{min-height:64px}.cal-ev{font-size:0.7rem;padding:2px 4px}}

/* aggiungi al calendario (scheda) */
.addcal-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.addcal-row .share-b small{text-transform:none}

/* ═══ V5.1 — hero bilanciato + arrotondamenti stile Apple ═══ */
:root{ --r-card:18px; --r-btn:12px; }
.btn,.btn-tickets,.share-b,.btn-dir,.msel,.cal-nav{border-radius:var(--r-btn)}
.searchbar{border-radius:22px}
.ev-panel,.ev-map,.map-badge,.luma-embed,.kpis,.no-prog,.content-note,.bell-panel,.news-form{border-radius:var(--r-card)}
.news-form{overflow:hidden}
.cal-grid{border-radius:14px}
.cal-dow:first-child{border-top-left-radius:14px}.cal-dow:last-child{border-top-right-radius:14px}
figure.ph{border-radius:var(--r-card)}
.emedia,.fmedia,.cat figure,.ev .thumb{border-radius:var(--r-card) var(--r-card) 0 0}
.ev-hero{border-radius:0 0 26px 26px}
.tbadge,.ctag{border-radius:var(--r-pill)}
.view-tog{border-radius:var(--r-btn);overflow:hidden}
img{border-radius:inherit}
/* hero: contenuto centrato davvero, respiro simmetrico, titolo da brief (40→60px) */
.hero.center{align-items:center;min-height:94svh}
.hero.center .hero-in{padding-top:clamp(90px,14vh,150px);padding-bottom:clamp(150px,20vh,220px)}
.hero.center h1{font-size:clamp(2.5rem,5vw,3.75rem);letter-spacing:-.01em}
.hero.center p{font-size:clamp(1rem,1.5vw,1.15rem);margin-top:16px}
.hero-ctx{margin-bottom:22px}
.searchbar{margin-top:clamp(-96px,-11vh,-70px)}
/* mappa: il livello interattivo sopra il fallback */
.map-box>div:first-child{z-index:2}
.map-fallback{z-index:1}
.map-badge{z-index:600}

/* ═══ V5.2 — bottone Stasera equilibrato · pin grandi · meteo · WhatsApp ═══ */
.btn-tickets{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:var(--r-pill);padding:10px 22px;
  font-size:0.7rem;letter-spacing:1.6px;font-weight:500;line-height:1;
  background:var(--ochre);color:#FFFFFF;box-shadow:0 6px 18px -8px rgba(255,106,61,.7);
  transition:.25s;transform:none}
.btn-tickets::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--surface);opacity:.85;
  animation:pulseB 2.2s infinite}
.btn-tickets:hover{background:#E85527;transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(255,106,61,.85)}
/* pin mappa: più grandi e leggibili */
.pin{width:26px;height:26px}
.pin i{inset:5px;border-width:3px;box-shadow:0 3px 10px rgba(10,37,64,.5)}
.pin::after{border-width:2.5px}
.leaflet-marker-icon .pin{transform:translate(-5px,-5px)}
/* meteo previsto (pagina evento) */
.wx{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);padding:14px 18px;margin-top:14px}
.wx .wxi{font-size:1.7rem;line-height:1}
.wx b{font-weight:500}
.wx .wxt{font-size:.86rem;color:var(--ink)}
.wx .wxs{font-size:.74rem;color:var(--muted);margin-top:2px}
.wx.rain{border-color:rgba(255,106,61,.45)}
/* condivisione WhatsApp */
.share-b.wa{background:#1FAF38;color:#fff;border-color:#1FAF38}
.share-b.wa:hover{background:#179A2F}
/* NOTA: gli override finali (raggi Apple, bottone Stasera, pin) sono in FONDO al file. */

/* ═══════════════════════════════════════════════════════════════════
   V4 — brand refresh "sera mediterranea": nuovi token, logo ridge,
   hero azione-first, tabs, mappa animata, menu mobile, pagina evento
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --teal-darkest:#06182C;
  --gold:#FFC554;
  --coral:#FF6A3D;
  --paper:#F5F5F7;
  --line:rgba(0,0,0,.08);
  --r-card:8px; --r-pill:100px; --r-btn:3px;
  --shadow-soft:0 24px 50px -24px rgba(10,37,64,.6);
  /* ombre delle card: --sh a riposo, --sh-hov al sollevamento. Erano usate ma MAI
     definite: la variabile vuota annullava il box-shadow e i poster levitavano senza ombra */
  --sh:0 10px 28px rgba(10,37,64,.12);
  --sh-hov:0 18px 44px rgba(10,37,64,.17);
}
/* raggi da brief */
.ecard,.fcard,.cat,.cal-grid,.luma-embed,.kpis{border-radius:var(--r-card);overflow:hidden}
.btn,.btn-tickets,.share-b{border-radius:var(--r-btn)}
.chip,.qp{border-radius:var(--r-pill)}

/* ── logo ridge (componente inline SVG, mai rasterizzato) ── */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo svg{flex-shrink:0;display:block}
.logo .lw{display:flex;flex-direction:column;line-height:1}
.logo .lw b{font-family:var(--serif);font-weight:400;font-size:1.05rem;letter-spacing:5px;color:var(--cream)}
.logo .lw span{font-size:.52rem;letter-spacing:7px;color:var(--gold);margin-top:3px;text-transform:uppercase}
.logo.on-light .lw b{color:var(--teal)}
.logo.on-light .lw span{color:var(--teal)}
.logo.on-light svg .ridge{stroke:var(--teal)}
.hdr.scrolled .logo .lw b{color:var(--teal)}
.hdr.scrolled .logo .lw span{color:var(--teal)}
.hdr.scrolled .logo svg .ridge{stroke:var(--teal)}
.logo-stack{display:inline-flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none}
.logo-stack .lw{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.logo-stack .lw b{font-family:var(--serif);font-weight:400;font-size:1.35rem;letter-spacing:6px;text-indent:6px;color:var(--cream)}
.logo-stack .lw span{font-size:.56rem;letter-spacing:8px;text-indent:8px;color:var(--gold);text-transform:uppercase;margin-top:4px}
.logo-stack .micro{font-size:.5rem;letter-spacing:3.5px;color:rgba(255,255,255,.5);text-transform:uppercase;margin-top:2px}

/* ── categoria: colori coerenti ovunque (tag, pin, chip) ── */
.ctag{display:inline-flex;align-items:center;font-size:0.7rem;font-weight:500;letter-spacing:1.6px;
  text-transform:uppercase;color:#fff;border-radius:var(--r-pill);padding:4px 11px}
.ctag.musica{background:var(--ochre);color:var(--ink-fixed)}
.ctag.gusto{background:var(--coral);color:var(--ink-fixed)}
.ctag.cultura{background:var(--teal-btn)}
.ctag.tradizione{background:var(--gold);color:var(--ink-fixed)}
.ctag.natura{background:var(--teal-btn)}
/* un punto sotto il #3E7CB1 di prima: con la scritta bianca faceva 4.45:1
   contro i 4.5 richiesti. Un solo passo di luminosita', invisibile a occhio,
   e la pastiglia passa. Trovato dal controllo automatico quando il catalogo
   e' passato a 24 card e un evento sportivo e' entrato nella prima pagina. */
.ctag.sport{background:#3E7BB0}

/* ── hero azione-first ── */
.hero-ctx{display:inline-block;font-size:.72rem;font-weight:400;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px}
.hero.center .hero-in{text-align:center;padding-bottom:clamp(120px,17vh,190px)}
.hero.center h1{margin:0 auto;max-width:14ch}
.hero.center p{margin-left:auto;margin-right:auto}
/* search card flottante */
.searchbar{position:relative;z-index:5;max-width:920px;margin:clamp(-84px,-9vh,-64px) auto 0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-soft);padding:14px;display:grid;
  grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end}
@media(max-width:820px){.searchbar{grid-template-columns:1fr;margin-top:-56px}}
/* i numeri del catalogo sotto la barra di ricerca */
.hstats{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 14px;
  margin-top:16px;font-size:.74rem;letter-spacing:1.6px;color:var(--muted)}
.hstats b{font-family:var(--serif);font-weight:400;font-size:1.05rem;color:var(--ink);margin-right:3px}
.hstats i{color:var(--line);font-style:normal}
.sfield{display:flex;flex-direction:column;gap:5px;padding:2px 6px}
.sfield label{font-size:0.7rem;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:var(--ochre)}
.sfield select,.sfield input{font-family:var(--sans);font-weight:300;font-size:.92rem;color:var(--ink);
  background:transparent;border:none;border-bottom:1px solid var(--line);padding:7px 2px;outline:none}
.sfield select:focus,.sfield input:focus{border-color:var(--teal)}
.sfield .gps{font-size:0.7rem;color:var(--teal);text-align:left;padding:0;letter-spacing:1.6px;
  min-height:32px;display:inline-flex;align-items:center}
.sfield .gps:hover{text-decoration:underline}
.searchbar .btn{justify-content:center;padding:15px 26px}
.quick{margin-top:20px}
.qp{white-space:nowrap}

/* ── tabs Stasera/Weekend/Settimana ── */
.tabs{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);padding:4px;gap:2px}
.tabs button{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;font-weight:400;
  padding:9px 18px;border-radius:var(--r-pill);color:var(--muted);transition:.25s}
.tabs button.on{background:var(--sec-dark);color:var(--cream)}
.now-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(14px,2.2vw,24px)}
.now-empty{color:var(--muted);padding:34px 0;font-size:.95rem}
/* badge orario/stato sulla card */
.tbadge{position:absolute;bottom:12px;right:12px;z-index:2;font-size:.72rem;font-weight:500;letter-spacing:1.6px;
  background:rgba(13,50,49,.85);color:var(--gold);backdrop-filter:blur(6px);border-radius:var(--r-pill);padding:5px 12px}
.emedia .ctag{position:absolute;top:12px;left:12px;z-index:2}
/* cuore "salva": in alto a destra, l'unico angolo libero (categoria a sinistra, data in basso) */
.fav{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;padding:0;border:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  background:rgba(251,249,243,.88);backdrop-filter:blur(6px);color:var(--ink);
  box-shadow:0 2px 10px rgba(10,37,64,.2);
  transition:transform .2s ease,background .2s ease,color .2s ease}
.fav svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.fav:hover{transform:scale(1.09);background:var(--paper)}
.fav.sv{background:var(--coral);color:#fff}
.fav.sv svg{fill:currentColor}
@media(prefers-reduced-motion:reduce){.fav{transition:none}.fav:hover{transform:none}}
.ekm{color:var(--teal);font-weight:400}

/* ── sezione mappa split ── */
#mappa .split{display:grid;grid-template-columns:1.15fr .85fr;min-height:520px;border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--shadow-soft)}
@media(max-width:880px){#mappa .split{grid-template-columns:1fr}}
.map-box{position:relative;min-height:420px;background:linear-gradient(150deg,#d8e4de,#cfe0dc 55%,#c5d8d6)}
.map-box .leaflet-container{position:absolute;inset:0;font-family:var(--sans)}
.map-badge{position:absolute;left:14px;bottom:14px;z-index:500;background:rgba(251,249,243,.88);
  backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-card);
  padding:10px 16px;font-size:.78rem;color:var(--ink)}
.map-badge b{font-weight:500;color:var(--teal)}
/* pin pulsanti (anche nel fallback senza mappa) */
.pin{position:relative;width:16px;height:16px}
.pin i{position:absolute;inset:3px;border-radius:50%;background:var(--pc,#007AFF);border:2px solid #fff;
  box-shadow:0 2px 8px rgba(10,37,64,.4);animation:pinbob 3.2s ease-in-out infinite}
.pin::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--pc,#007AFF);
  opacity:.7;animation:pinring 2.4s ease-out infinite}
/* pin2: il segnaposto vero della mappa — emoji dell'evento in un anello di categoria.
   Prima erano pallini da 16px: non si vedevano. */
.pin2{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--paper);border:3px solid var(--pc,#007AFF);box-shadow:0 4px 14px rgba(10,37,64,.45);
  transition:transform .18s ease;cursor:pointer}
/* l'emoji dentro il cerchio: font emoji esplicito e blocco pieno, così sta al centro
   davvero (le emoji hanno una linea di base sballata se lasciate inline) */
.pin2 em{font-style:normal;font-size:16px;line-height:1;display:block;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.leaflet-marker-icon:hover .pin2{transform:scale(1.18)}
/* bolla di raggruppamento: N eventi nello stesso paese, al click si apre a ventaglio */
.pinc{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--sec-dark);color:var(--cream);border:3px solid var(--paper);
  box-shadow:0 4px 14px rgba(10,37,64,.5);font-weight:600;font-size:.92rem;line-height:1;
  transition:transform .18s ease;cursor:pointer}
.pinc::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(0,122,255,.35)}
.leaflet-marker-icon:hover .pinc{transform:scale(1.12)}
.leaflet-cluster-anim .leaflet-marker-icon{transition:transform .3s ease-out,opacity .3s ease-in}
@media(prefers-reduced-motion:reduce){.pinc{transition:none}
  .leaflet-cluster-anim .leaflet-marker-icon{transition:none}}
.pin2.now::before{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:3px solid var(--pc,#007AFF);animation:pinring 1.8s ease-out infinite}
.leaflet-popup-content{margin:12px 14px;line-height:1.45}
.leaflet-popup-content-wrapper{border-radius:12px}
@media(prefers-reduced-motion:reduce){.pin2.now::before{animation:none}.pin2{transition:none}}
.pin.hot i{transform:scale(1.35)}
@keyframes pinring{0%{transform:scale(.5);opacity:.8}100%{transform:scale(2.4);opacity:0}}
@keyframes pinbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.pin::after,.pin i{animation:none}}
.map-fallback{position:absolute;inset:0}
.map-fallback .fpin{position:absolute;transform:translate(-50%,-50%)}
/* colonna destra "prossimi" */
.map-side{background:var(--sec-dark);color:var(--cream);padding:clamp(24px,3.5vw,40px);display:flex;flex-direction:column}
.map-side h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,2.2vw,1.6rem);margin:10px 0 18px}
.mrow{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;width:100%;text-align:left;
  padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.14);color:var(--cream);transition:background .25s;border-radius:4px}
.mrow:hover{background:rgba(255,255,255,.06)}
.mrow .md{text-align:center;border-right:1px solid rgba(255,255,255,.18);padding-right:12px}
.mrow .md b{display:block;font-family:var(--serif);font-size:1.4rem;line-height:1;color:var(--gold)}
.mrow .md span{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.6)}
/* riquadro "in corso": micro-label "fino a" sopra la data di fine */
.mrow .md.now i{display:block;font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(255,255,255,.5);font-style:normal;margin-bottom:2px}
.mrow .md.now b{font-size:1.15rem}
.mrow h4{font-family:var(--serif);font-weight:400;font-size:1rem;line-height:1.25}
.mrow p{font-size:.72rem;color:rgba(255,255,255,.65);margin-top:2px}
.mrow .ar{color:var(--gold);font-size:1rem}
.map-side .btn{margin-top:auto;align-self:flex-start;border-color:rgba(255,255,255,.4);color:var(--cream)}
.map-side .btn:hover{border-color:var(--gold);color:var(--gold)}

/* numeri categoria */
.cat-body .num{font-family:var(--serif);font-size:.9rem;color:var(--ochre);letter-spacing:2px}

/* ── menu mobile full-screen ── */
.burger{display:none;width:40px;height:40px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{width:20px;height:1.6px;background:var(--surface);transition:.3s}
.hdr.scrolled .burger i{background:var(--ink)}
@media(max-width:860px){
  .burger{display:flex}
  .hdr nav a:not(.keep){display:none}
}
.mmenu{position:fixed;inset:0;z-index:150;background:var(--teal-darkest);color:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  opacity:0;pointer-events:none;transition:opacity .3s}
.mmenu.open{opacity:1;pointer-events:auto}
.mmenu a{font-family:var(--serif);font-size:1.7rem;color:var(--cream)}
.mmenu a:hover{color:var(--gold)}
/* la ✕ misurava 17×28: il glifo e' stretto e il bottone si adattava a lui.
   Un bersaglio da 17px di lato si sbaglia col pollice, ed e' l'UNICA via per
   chiudere il menu a schermo intero. 44px e' il minimo che si prende sempre. */
.mmenu .mx{position:absolute;top:14px;right:14px;font-size:1.3rem;color:var(--cream);
  min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:50%}
.mmenu .mx:active{background:rgba(255,255,255,.14);transition-duration:60ms}
.mmenu .langs{position:absolute;bottom:34px}
.mmenu .langs button{color:var(--cream)}

/* ── pagina evento ── */
.ev-hero{position:relative;height:clamp(300px,48vh,460px);overflow:hidden;background:var(--sec-dark)}
.ev-hero img{width:100%;height:100%;object-fit:cover}
.ev-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,50,49,.25),transparent 40%,rgba(13,50,49,.55))}
.ev-hero .ctag{position:absolute;left:clamp(18px,4vw,44px);bottom:22px;z-index:2}
.ev-hero figure.ph{position:absolute;inset:0;height:100%}
.ev-wrap{max-width:1080px;margin:0 auto;padding:0 var(--pad)}
.ev-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(26px,4vw,56px);padding:clamp(28px,4.5vw,52px) 0}
@media(max-width:880px){.ev-grid{grid-template-columns:1fr}}
.ev-main h1{font-size:clamp(1.8rem,4.2vw,2.9rem);line-height:1.12;margin:8px 0 14px}
.ev-meta-line{display:flex;flex-wrap:wrap;gap:16px;font-size:.86rem;color:var(--muted);margin-bottom:8px}
.ev-meta-line b{color:var(--ink);font-weight:400}
.ev-aside{display:flex;flex-direction:column;gap:16px}
.ev-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;box-shadow:0 12px 34px -18px rgba(10,37,64,.35)}
.ev-panel .p-price{font-family:var(--serif);font-size:1.5rem}
.ev-panel .p-lbl{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ev-panel .btn{width:100%;justify-content:center;margin-top:12px}
.ev-map{height:230px;border-radius:var(--r-card);overflow:hidden;position:relative;background:linear-gradient(150deg,#d8e4de,#c5d8d6)}
.ev-map .leaflet-container{position:absolute;inset:0}
.simili{background:var(--surface);padding:var(--sp-2) 0}
.btn-dir{background:none;border:1px solid var(--line);color:var(--teal);width:100%;justify-content:center;margin-top:8px}
.btn-dir:hover{border-color:var(--teal)}

/* ═══════════════════════════════════════════════════════════════════
   V5.3 — OVERRIDE FINALI · devono restare in FONDO al file
   (raggi stile Apple, bottone Stasera, pin mappa grandi)
   ═══════════════════════════════════════════════════════════════════ */
:root{ --r-card:18px; --r-btn:12px; }
.btn,.share-b,.btn-dir,.msel,.cal-nav{border-radius:var(--r-btn)}
.ecard,.fcard,.cat,.cal-grid,.luma-embed,.kpis,figure.ph,.ev-panel,.ev-map,.map-badge,
.no-prog,.content-note,.bell-panel,.news-form,#mappa .split,.wx{border-radius:var(--r-card)}
.ecard,.fcard,.cat,#mappa .split,.luma-embed,.cal-grid,.news-form{overflow:hidden}
.searchbar{border-radius:22px}
.chip,.qp,.tabs,.tabs button,.ctag,.tbadge{border-radius:var(--r-pill)}
.ev-hero{border-radius:0 0 26px 26px}
/* bottone Stasera: pill equilibrata, niente blocco squadrato */
.btn-tickets{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:var(--r-pill);padding:10px 22px;
  font-size:0.7rem;letter-spacing:1.6px;font-weight:500;line-height:1;
  background:var(--ochre);color:#FFFFFF;box-shadow:0 6px 18px -8px rgba(255,106,61,.7);transition:.25s}
.btn-tickets::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--surface);opacity:.85;animation:pulseB 2.2s infinite}
.btn-tickets:hover{background:#E85527;transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(255,106,61,.85)}
/* pin mappa: grandi e leggibili */
.pin{width:30px;height:30px}
.pin i{inset:6px;border-width:3px;box-shadow:0 3px 12px rgba(10,37,64,.55)}
.pin::after{border-width:3px}
/* search bar: tre campi identici, etichette e input sulla stessa linea */
.searchbar{align-items:end}
.sfield{gap:6px}
.sfield .slbl{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sfield .slbl label{font-size:0.7rem;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:var(--ochre)}
.sfield .gps{font-size:0.7rem;color:var(--teal);letter-spacing:1.6px;padding:0;white-space:nowrap;
  min-height:32px;display:inline-flex;align-items:center}
.sfield .gps:hover{text-decoration:underline}
.sfield select,.sfield input{height:38px;box-sizing:border-box}
.searchbar .btn{height:52px;align-self:end}
@media(max-width:820px){.searchbar .btn{height:auto}}

/* azioni evento: riga unica, bottoni uniformi da produzione */
.act-row{display:flex;flex-wrap:wrap;gap:10px}
.act-b{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);
  font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;font-weight:500;color:var(--ink);
  white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease}
.act-b svg{flex-shrink:0;color:var(--teal)}
.act-b:hover{border-color:var(--teal);color:var(--teal)}
.act-b:disabled{opacity:.5;cursor:wait}
.act-b.sm{height:40px;padding:0 16px;font-size:0.7rem}
/* era alto 17px: e' il pulsante che apre «Organizzi l'evento?», e un bersaglio
   da 17px si manca col pollice. Il bordo tratteggiato deve restare attaccato al
   testo, quindi l'area si allarga sotto con un padding, non con un'altezza. */
.promo-toggle{display:inline-block;margin-top:18px;font-size:.72rem;color:var(--muted);
  letter-spacing:.3px;border-bottom:1px dashed var(--hair);padding:6px 0;transition:.2s}
.promo-toggle:hover{color:var(--teal);border-color:var(--teal)}
.promo-toggle::after{content:" ↓"}
.promo-toggle.open::after{content:" ↑"}
.promo-pane{margin-top:14px}
.promo-pane .share-hint{margin-top:10px}

/* ═══ HERO SLIDER: più basso, auto-generato dagli eventi ═══ */
.hero.slider{min-height:clamp(460px,64vh,600px)}
.hero.slider .hero-in{padding-top:clamp(80px,11vh,120px);padding-bottom:clamp(120px,15vh,160px)}
.hs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1s ease;animation:kenburns 22s ease-in-out infinite alternate;
  filter:brightness(.8) saturate(1.05)}
.hs-img.on{opacity:1}
/* leggibilità garantita su QUALSIASI foto (anche chiarissima) */
.hero.slider .hero-veil{background:
  linear-gradient(180deg,rgba(13,50,49,.58) 0%,rgba(13,50,49,.34) 30%,
    rgba(13,50,49,.44) 55%,rgba(13,50,49,.66) 80%,rgba(13,50,49,.82) 100%)}
.hero.slider .hero-in{position:relative}
.hero.slider .hero-in::before{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:min(760px,96vw);height:120%;z-index:-1;
  background:radial-gradient(closest-side,rgba(13,50,49,.55),rgba(13,50,49,.28) 60%,transparent);
  pointer-events:none}
.hero.slider h1,.hero.slider p,.hs-kicker,.hero-ctx{
  text-shadow:0 1px 3px rgba(10,37,64,.55),0 4px 26px rgba(10,37,64,.6)}
.hs-kicker{display:block;font-size:.72rem;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(255,255,255,.75);margin-bottom:12px}
.hero.slider h1{font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.08;max-width:20ch;margin:0 auto;
  transition:opacity .45s ease}
.hero.slider p{font-size:clamp(.9rem,1.3vw,1.05rem);margin-top:12px;color:var(--gold);
  letter-spacing:.06em;transition:opacity .45s ease}
.hero.slider .hero-cta{margin-top:24px;justify-content:center}
.hero.slider .hero-cta .btn{padding:12px 26px}
.hero.slider.fading h1,.hero.slider.fading p{opacity:0}
.hs-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(96px,13vh,130px);
  display:flex;gap:9px;z-index:4;align-items:center}
/* Il pallino resta piccolo — e un indicatore, non un bottone da vedere —
   ma l area che si tocca no: con ::before si allarga a 32px senza
   cambiare il disegno. A 9x9 su un telefono si sbaglia una volta su due. */
.hs-dots button::before{content:"";position:absolute;left:50%;top:50%;
  width:32px;height:32px;transform:translate(-50%,-50%)}
.hs-dots button{position:relative;width:9px;height:9px;border-radius:100px;background:rgba(255,255,255,.4);
  transition:width .35s ease,background .3s;padding:0;border:0;cursor:pointer;overflow:hidden}
/* il dot attivo diventa una pillola con la barra che si riempie nel tempo della slide */
.hs-dots button.on{width:34px;background:rgba(255,255,255,.3)}
.hs-dots button.on::after{content:"";position:absolute;inset:0;border-radius:100px;background:var(--gold);
  transform-origin:left;animation:hsprog 6s linear forwards}
.hero.slider:hover .hs-dots button.on::after{animation-play-state:paused}  /* il timer si ferma su hover: anche la barra */
.hs-dots button:hover{background:rgba(255,255,255,.65)}
@keyframes hsprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.hs-img{transition:none;animation:none}
  .hs-dots button.on::after{animation:none;transform:none}}

/* card leggere dentro l'hero: una-due cose simpatiche sull'evento in scena */
.hs-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;min-height:32px}
.hchip{display:inline-flex;align-items:center;gap:7px;font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:500;color:var(--cream);background:rgba(13,50,49,.45);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);padding:8px 15px;
  animation:chipin .5s ease backwards}
.hchip:nth-child(2){animation-delay:.14s}
.hchip.gold{background:rgba(255,106,61,.3);border-color:rgba(255,197,84,.55)}
.hchip.live i{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulseB 1.6s infinite}
@keyframes chipin{from{opacity:0;transform:translateY(9px)}}
@media (prefers-reduced-motion:reduce){.hchip{animation:none}.hchip.live i{animation:none}}
/* compattazione reale: l'hero non deve mangiarsi lo schermo */
.hero.slider{min-height:500px;padding-top:0;padding-bottom:0}
.hero.slider .hero-in{padding-top:clamp(56px,8vh,84px);padding-bottom:clamp(104px,13vh,132px)}
.hero.slider h1{font-size:clamp(1.65rem,3.4vw,2.5rem);max-width:26ch}
.hero.slider p{margin-top:8px;font-size:clamp(.84rem,1.15vw,.98rem)}
.hero.slider .hero-cta{margin-top:18px}
.hero.slider .hero-cta .btn{padding:11px 22px;font-size:.7rem}
.hero.slider .hero-cta .btn-line{display:none}
@media(min-width:700px){.hero.slider .hero-cta .btn-line{display:inline-flex}}
.hero-ctx{margin-bottom:10px;font-size:.72rem}
.hs-dots{bottom:clamp(84px,11vh,108px)}
/* quick chips: pill vere, riga compatta */
.quick{margin:16px 0 0;gap:8px;display:flex;flex-wrap:wrap}
.qp{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:500;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:9px 17px;text-decoration:none;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease;
  box-shadow:0 1px 5px rgba(10,37,64,.06)}
.qp:hover{border-color:var(--teal);color:var(--teal);background:rgba(0,122,255,.04)}
/* ritmo verticale: niente voragini dopo la ricerca */
#adesso{padding-top:var(--sp-1)}
#adesso .sec-head{margin-bottom:clamp(18px,2.6vw,28px)}
#categorie,#faq{padding-top:var(--sp-2)}
#mappa{padding-bottom:var(--sp-2)}

/* ═══ I GRANDI NOMI: carosello poster degli eventi di rilievo ═══ */
#grandi-nomi{padding:var(--sp-1) 0 0}
.hn-all{margin-left:auto;font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:500;color:var(--teal);white-space:nowrap;align-self:center}
.hn-all:hover{color:var(--ink)}
/* padding verticale = spazio di manovra: la rail clippa (overflow), quindi dentro
   ci devono stare l'alzata di 5px e l'ombra, altrimenti si vedono tagliate */
.hn-rail{display:flex;gap:14px;overflow-x:auto;
  padding:12px clamp(16px,3.5vw,32px) 30px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hn-rail::-webkit-scrollbar{display:none}
.hn-card{flex:0 0 clamp(158px,38vw,186px);text-align:left;position:relative;
  aspect-ratio:3/4;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh);
  transition:transform .3s ease,box-shadow .3s ease;padding:0;background:var(--sec-dark)}
.hn-card:hover{transform:translateY(-5px);box-shadow:var(--sh-hov)}
/* i grandi nomi veri (artista con nome proprio) occupano due card: le rassegne restano singole.
   Larghezza = 2 card + il gap di 14px. aspect-ratio:auto le fa allungare all'altezza della fila;
   la min-height serve solo nel caso limite in cui fossero tutte larghe e non ci fosse una card
   singola a dettare l'altezza. */
.hn-card.wide{flex-basis:clamp(330px,calc(76vw + 14px),386px);aspect-ratio:auto;
  min-height:clamp(211px,50.7vw,248px)}
.hn-card.wide .hn-title{font-size:1.24rem;-webkit-line-clamp:3}
.hn-card.wide .hn-date{font-size:.7rem}
.hn-card.wide .hn-place{font-size:.8rem}
.hn-media{position:absolute;inset:0;display:block}
.hn-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.hn-card:hover .hn-media img{transform:scale(1.05)}
.hn-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,50,49,.15) 0%,transparent 30%,rgba(13,50,49,.55) 62%,rgba(10,37,64,.92) 100%)}
.hn-fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:0.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* flex-wrap: sulla card stretta della rail restano 57px per la targhetta della
   categoria, e «Cultura» ne chiede 69. Senza wrap usciva «Cultu…»: un tag
   troncato non informa e sembra un errore. Andando a capo, la pastiglia di
   stato scende sulla seconda riga e SI LEGGONO ENTRAMBE. Quando ci stanno
   (card larga dei grandi nomi) il comportamento non cambia di una virgola. */
.hn-top{position:absolute;left:12px;right:12px;top:12px;z-index:3;display:flex;flex-wrap:wrap;
  justify-content:space-between;align-items:flex-start;gap:6px 8px;pointer-events:none}
/* ⚠️ ECCEZIONE DICHIARATA AL PAVIMENTO DI 11,2px. Queste due targhette stanno
   sovrapposte alla foto dentro .hn-top, una riga larga quanto la card meno
   24px, con la pastiglia di stato che non si restringe (flex:none). Portate a
   0.7rem con 1,6px di spaziatura, «Cultura» chiedeva 82px in 71 e «Musica» 73
   in 44: uscivano troncate con l'ellissi, cioe' peggio di prima.
   0.64rem (10,2px) con 0,6px di spaziatura resta molto sopra gli 8,5px da cui
   venivano e ci sta. Su una targhetta stretta la prima cosa da sacrificare e'
   lo spazio fra le lettere, non la dimensione. */
.hn-cat{font-size:.64rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#fff;
  background:rgba(13,50,49,.6);backdrop-filter:blur(6px);border-radius:var(--r-pill);padding:4px 8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hn-badge{flex:none;font-size:.64rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  border-radius:var(--r-pill);padding:3px 7px;background:var(--paper);color:var(--ink);white-space:nowrap}
.hn-badge.live{background:var(--green-ok);color:#fff}
.hn-badge.gold{background:var(--ochre);color:#FFFFFF}
.hn-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 14px 15px;color:var(--cream);display:flex;flex-direction:column;gap:2px}
.hn-date{font-size:.72rem;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}
.hn-title{font-family:var(--serif);font-size:.98rem;line-height:1.2;color:var(--cream);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hn-place{font-size:.74rem;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* ═══ CHICCA 1: itinerario "La tua serata" ═══ */
#itinerario{padding:var(--sp-1) 0 0}
.itin{position:relative;max-width:720px}
.itin-s{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;padding-bottom:22px;position:relative}
.itin-s::before{content:"";position:absolute;left:5px;top:22px;bottom:-4px;width:2px;background:var(--line)}
.itin-s:last-of-type::before{display:none}
.itin-dot{width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--line);margin-top:4px;z-index:1}
.itin-s.main .itin-dot{background:var(--ochre);border-color:var(--ochre);box-shadow:0 0 0 5px rgba(255,106,61,.18)}
.itin-l{font-size:0.7rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.itin-s.main .itin-l{color:var(--ochre-txt)}
.itin-c h3{font-family:var(--serif);font-weight:400;font-size:1.08rem;line-height:1.3;margin-top:3px}
.itin-s.main .itin-c h3{font-size:1.3rem}
.itin-c p{font-size:.82rem;color:var(--muted);margin-top:3px}
.itin-c .nb-maps{margin-top:7px}
/* meteo e CTA allineati alla colonna del contenuto: 18 (punto) + 12 (gap) = 30px */
.itin-wx{display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--muted);
  background:var(--surface);border-radius:var(--r-card);padding:12px 16px;margin:2px 0 0 30px}
.itin-cta{margin:16px 0 0 30px}
.itin-cta .btn{padding:12px 24px;font-size:0.7rem}
@media(max-width:560px){
  .itin-s{gap:10px}
  .itin-wx,.itin-cta{margin-left:0}
  .itin-c h3{font-size:1rem}
  .itin-s.main .itin-c h3{font-size:1.16rem}
}

/* countdown live sulla pagina evento */
.ev-cd{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:9px 18px;margin-top:14px;font-size:.8rem}
.ev-cd .cd-l{font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-right:4px}
.ev-cd b{font-family:var(--serif);font-size:1.15rem;font-weight:400;color:var(--ochre)}
.ev-cd small{font-size:0.7rem;color:var(--muted);margin-right:6px}
.ev-cd.live{background:var(--sec-dark);border-color:var(--teal-deep);color:var(--cream);font-weight:500;
  letter-spacing:1.6px;text-transform:uppercase;font-size:0.7rem}
.ev-cd.live i{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulseB 1.6s infinite}

/* ═══ CHICCA 2: passaporto dei borghi ═══ */
#passaporto{background:var(--sec-dark);color:var(--cream);padding:var(--sp-2) 0}
#passaporto .eyebrow{color:var(--gold)}
#passaporto h2{font-size:clamp(1.3rem,2.6vw,1.9rem);margin-top:10px;color:var(--cream)}
.pp-bar{height:6px;background:rgba(255,255,255,.16);border-radius:99px;overflow:hidden;margin:18px 0 8px;max-width:520px}
.pp-fill{height:100%;background:linear-gradient(90deg,var(--ochre),var(--gold));border-radius:99px;transition:width .8s ease}
.pp-x{font-size:.84rem;color:rgba(255,255,255,.75)}
.pp-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pp-b{font-size:.7rem;letter-spacing:1.6px;padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.55);background:transparent}
.pp-b.on{background:var(--ochre);border-color:var(--ochre);color:#FFFFFF;font-weight:500}
.pp-next{margin-top:18px;font-size:.82rem;color:rgba(255,255,255,.75)}
.pp-next b{color:var(--gold);font-weight:400}
.pp-next button{color:var(--gold);text-decoration:underline;font-size:.82rem}

/* ═══ CHICCA 5: alert prossimità ═══ */
.al-box{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-card);padding:16px 20px;margin-top:22px}
.al-box .al-i{font-size:1.4rem}
.al-box h4{font-family:var(--serif);font-weight:400;font-size:1rem}
.al-box p{font-size:.78rem;color:var(--muted);margin-top:2px}
.al-box .btn{margin-left:auto;padding:10px 18px;font-size:0.7rem}
.al-box.on{border-color:rgba(29,133,79,.4);background:rgba(29,133,79,.06)}

/* pannello ingresso + contatore interessati */
.ev-panel .p-price{font-family:var(--serif);font-size:1.45rem;line-height:1.2}
.ev-panel .p-note{font-size:.76rem;color:var(--muted);margin-top:6px;line-height:1.5}
.ev-panel .p-int{margin-top:12px;font-size:.74rem;color:var(--rosa);text-align:center;font-weight:500}
.e-eyebrow .int{color:var(--rosa)}

/* ═══ Nei dintorni: guida del borgo (slot partner-ready) ═══ */
#dintorni{padding:var(--sp-2) 0}
#dintorni h2{font-size:clamp(1.3rem,2.6vw,1.8rem);margin-top:10px}
.nb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:8px}
.nb-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:18px 18px 16px;display:flex;flex-direction:column;gap:7px;transition:.25s}
.nb-card:hover{transform:translateY(-3px);box-shadow:var(--sh-hov,0 16px 40px rgba(10,37,64,.09))}
.nb-card.feat{border-color:var(--gold-line,rgba(198,138,20,.3));box-shadow:0 10px 30px -12px rgba(255,106,61,.35)}
.nb-card.cta{border-style:dashed;border-color:rgba(255,106,61,.55);background:transparent;justify-content:center}
.nb-ty{font-size:0.7rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase}
.nb-ty.mangiare{color:var(--ochre-txt)}
.nb-ty.vedere{color:var(--teal-txt)}
.nb-ty.fare{color:var(--ochre-txt)}
.nb-card h3{font-family:var(--serif);font-weight:400;font-size:1.05rem;line-height:1.25}
.nb-card p{font-size:.82rem;color:var(--muted);flex:1}
.nb-maps{align-self:flex-start;font-size:0.7rem;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:600;color:var(--teal-txt);padding:7px 0;border-bottom:1px solid transparent;transition:.2s;text-decoration:none}
.nb-maps:hover{border-color:var(--teal)}
.nb-card.cta .nb-maps{color:var(--ochre-txt)}
.nb-card.cta .nb-maps:hover{border-color:var(--ochre)}

/* ═══ RESPONSIVE BLINDATO ═══ */
html,body{max-width:100%;overflow-x:clip}
@media(max-width:700px){
  .hdr nav .langs{display:none}              /* le lingue vivono nel menu ☰ */
  /* stesso margine della barra sopra e del contenuto sotto: e' --pad.
     Prima erano 14px e il bordo sinistro zigzagava fra le tre righe. */
  .hdr-in{gap:10px;padding:10px var(--pad)}
  .hdr nav{gap:8px}
  .logo{gap:8px}
  .logo svg{width:28px;height:16px}
  .logo .lw b{font-size:.88rem;letter-spacing:3px}
  .logo .lw span{font-size:.44rem;letter-spacing:4.5px}
  .hdr nav a.btn-tickets{padding:8px 13px;font-size:0.7rem;letter-spacing:1.6px}
  .btn-tickets::before{display:none}
  .bell-btn{width:32px;height:32px}
}
@media(max-width:860px){.burger{display:flex}}
.strip-in{min-width:0}
.strip-in b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* lingue dentro il menu mobile */
.mmenu .langs{position:static;display:flex;gap:4px;margin-top:10px}
.mmenu .langs button{font-size:.82rem;letter-spacing:1.5px;padding:9px 11px;color:var(--cream);opacity:.55}
.mmenu .langs button.on{color:var(--gold);opacity:1}
@media(max-width:480px){
  #ai-fab span{display:none}
  #ai-fab{padding:14px;border-radius:50%}
}

/* ═══ Concierge AI (attivo solo con endpoint configurato) ═══ */
#ai-fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:120;
  display:inline-flex;align-items:center;gap:9px;background:var(--sec-dark);color:var(--cream);
  border-radius:var(--r-pill);padding:12px 20px;font-size:.7rem;letter-spacing:1.6px;
  text-transform:uppercase;font-weight:500;box-shadow:0 12px 34px -10px rgba(10,37,64,.55);transition:.25s}
#ai-fab:hover{background:var(--teal);transform:translateY(-2px);box-shadow:0 18px 44px -10px rgba(10,37,64,.65)}
#ai-panel{position:fixed;right:18px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:121;
  width:min(370px,calc(100vw - 36px));background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:0 30px 70px -20px rgba(10,37,64,.5);overflow:hidden;
  display:flex;flex-direction:column;max-height:min(520px,70vh)}
.aip-h{display:flex;align-items:center;gap:10px;background:var(--sec-dark);color:var(--cream);
  padding:13px 16px;font-family:var(--serif)}
.aip-h b{font-weight:400;font-size:1rem}
.aip-x{margin-left:auto;color:var(--cream);font-size:.9rem;padding:4px}
.aip-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.aip-hint{font-size:.7rem;color:var(--muted);text-align:center}
.aip-m{max-width:88%;padding:10px 14px;border-radius:14px;font-size:.86rem;line-height:1.5}
.aip-m.me{align-self:flex-end;background:var(--sec-dark);color:var(--cream);border-bottom-right-radius:4px}
.aip-m.bot{align-self:flex-start;background:var(--surface);color:var(--ink);border-bottom-left-radius:4px}
.aip-m.wait{color:var(--muted);font-style:italic}
.aip-m.links{background:none;padding:0;display:flex;flex-direction:column;gap:6px}
.aip-ev{text-align:left;font-size:.76rem;font-weight:500;color:var(--teal);background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:8px 12px;transition:.2s}
.aip-ev:hover{border-color:var(--teal)}
.aip-f{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.aip-f input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 13px;
  font-family:var(--sans);font-weight:300;font-size:.86rem;outline:none;min-width:0}
.aip-f input:focus{border-color:var(--teal)}
.aip-f .btn{padding:10px 16px;font-size:0.7rem}

/* FAQ (AEO) */
.faq-i{border-bottom:1px solid var(--hair);padding:4px 0}
.faq-i summary{font-family:var(--serif);font-size:clamp(1.05rem,1.9vw,1.3rem);padding:16px 4px;
  cursor:pointer;list-style:none;position:relative;padding-right:34px}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--ochre);font-size:1.3rem;font-family:var(--sans);font-weight:300;transition:transform .25s}
.faq-i[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-i p{color:var(--muted);font-size:.92rem;padding:0 4px 18px;max-width:64ch}

/* specificità: il bottone Stasera vince sulle regole .hdr nav a */
.hdr nav a.btn-tickets, .hdr.scrolled nav a.btn-tickets{
  padding:10px 22px;color:#FFFFFF;border-bottom:none;letter-spacing:1.6px;font-size:0.7rem}
.hdr nav a.btn-tickets::after{display:none}
.hdr nav a.btn-tickets:hover{color:#FFFFFF}


/* ── avviso privacy (informativo, niente da consentire) ── */
.privacy-bar{position:fixed;left:14px;right:14px;bottom:14px;z-index:1200;max-width:760px;margin:0 auto;
  display:flex;gap:14px;align-items:center;justify-content:space-between;background:var(--sec-dark);
  color:var(--cream);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-card);padding:14px 16px;
  box-shadow:0 14px 40px rgba(13,50,49,.30);animation:pbar-in .4s ease both}
@keyframes pbar-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.privacy-bar p{font-size:.82rem;line-height:1.5;font-weight:300;margin:0;color:rgba(255,255,255,.9)}
.pbar-act{display:flex;gap:12px;align-items:center;flex-shrink:0}
.pbar-more{color:var(--gold);font-size:.78rem;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;margin-right:2px}
.pbar-act button{border-radius:var(--r-pill);padding:8px 18px;font-size:.72rem;font-weight:500;letter-spacing:1.6px;
  cursor:pointer;white-space:nowrap;border:1px solid transparent}
.pbar-no{background:transparent;color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.32)}
.pbar-yes{background:var(--ochre);color:#FFFFFF}

/* controllo consenso nella pagina privacy */
.consent-box{margin-top:30px;border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px;background:var(--paper)}
.consent-box h4{font-family:var(--serif);font-weight:400;font-size:1.05rem;color:var(--teal-deep);margin-bottom:6px}
.consent-box #consent-state{font-size:.9rem;color:var(--muted);margin-bottom:12px}
.consent-box .cc-btns{display:flex;gap:10px;flex-wrap:wrap}
.consent-box button{border-radius:var(--r-pill);padding:8px 18px;font-size:.74rem;font-weight:500;cursor:pointer;border:1px solid transparent}
#consent-on{background:var(--teal);color:var(--cream)}
#consent-off{background:transparent;color:var(--ink);border-color:var(--line)}
@media(max-width:560px){.privacy-bar{flex-direction:column;align-items:stretch;gap:10px}
  .pbar-act{width:100%;justify-content:space-between}}

/* ── riga legale nel footer ── */
.f-legal{margin-top:16px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;
  font-size:.76rem;color:rgba(255,255,255,.6)}
.f-legal a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:2px}
.f-legal a:hover{color:var(--ochre)}
.f-legal .f-dot{opacity:.45}

/* ── pagina Privacy ── */
.pv-wrap{max-width:760px;margin:0 auto;padding:0 20px clamp(40px,7vw,72px)}
.prose h3{font-family:var(--serif);font-weight:400;font-size:1.18rem;color:var(--teal-deep);margin:28px 0 8px}
.prose p{font-size:.95rem;line-height:1.72;font-weight:300;color:var(--ink);margin:0 0 4px}
.prose a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.pv-upd{margin-top:28px;font-size:.78rem;color:var(--muted)}

/* messaggio agli organizzatori nella pagina evento */
.ev-photo-cta{margin:26px 0 0;font-size:.82rem;line-height:1.5;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 16px}
.ev-photo-cta a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}

/* ── feedback dei bottoni: pressione al click, hover percepibili, focus visibile ──
   (in coda al file: vince la cascata sulle definizioni sparse più sopra) */
.share-b:active,.act-b:active,.qp:active,.cal-nav:active:not(:disabled),
.btn-dir:active,.btn-tickets:active,.tabs button:active,.chip:active{transform:scale(.97);transition-duration:.06s}
.fav:active{transform:scale(.9);transition-duration:.06s}
.hs-dots button:active{transform:scale(.85);transition-duration:.06s}
.cal-nav:hover:not(:disabled){background:var(--surface)}
.btn-dir:hover{background:rgba(0,122,255,.06)}
.btn-tickets{transition:background .2s ease,transform .15s ease,box-shadow .2s ease}
.act-b:hover{background:rgba(0,122,255,.05)}
.btn:focus-visible,.btn-tickets:focus-visible,.share-b:focus-visible,.act-b:focus-visible,
.qp:focus-visible,.fav:focus-visible,.cal-nav:focus-visible,.hs-dots button:focus-visible,
.tabs button:focus-visible,.chip:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .btn,.btn-primary:hover,.btn-tickets:hover,.act-b:hover,.qp:hover,
  .btn:active,.share-b:active,.act-b:active,.qp:active,.fav:active,
  .btn-dir:active,.btn-tickets:active,.hs-dots button:active{transform:none;box-shadow:none}
}

/* dentro i controlli FUSI (input+bottone in un'unica barra, overflow:hidden) il
   feedback e' di COLORE, non di movimento: un segmento che si alza o si stringe
   apre fessure nelle giunture e l'ombra viene tagliata dal contenitore */
.news-form .btn:hover{transform:none;box-shadow:none;background:#E85527}
.news-form .btn:active{transform:none;box-shadow:none;background:#B8802A}
/* il bottone disabilitato (durante l'invio) deve dirlo */
.btn:disabled{opacity:.55;cursor:wait;transform:none;box-shadow:none}
/* conferme del form: entrata morbida invece dell'apparizione secca */
.news-ok,.news-err{animation:newsin .35s ease}
@keyframes newsin{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.news-ok,.news-err{animation:none}}

/* campi modulo: anello di fuoco visibile per chi naviga da tastiera
   (il solo bordo che cambia colore non si vede) */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ochre);outline-offset:1px}