/* ═══════════════════════════════════════════════════════════════════
   CILENTO EVENTS — neue.css
   Redesign "Blu Bussento": minimal arrotondato stile Apple / Google.
   Si carica DOPO styles.css e lo vince in cascata: nessuna riga del
   vecchio foglio va toccata, il restyling vive tutto qui.
   Palette: grigio sistema #F5F5F7, bianco, blu #007AFF,
   corallo #FF6A3D, navy profondo #0A2540.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Token: la vecchia architettura a variabili fa il lavoro per noi ── */
:root{
  --paper:#F5F5F7;            /* sfondo pagina: grigio di sistema Apple */
  --cream:#FFFFFF;            /* superfici: bianco pieno */
  --ink:#1D1D1F;
  --muted:#6E6E73;
  --hair:rgba(0,0,0,.10);
  --hair-soft:rgba(0,0,0,.055);
  --hair-cream:rgba(255,255,255,.22);
  --line:rgba(0,0,0,.08);

  --teal:#007AFF;             /* blu primario (link, focus, accento) */
  --teal-deep:#0A2540;        /* navy: sezioni scure, footer, map-side */
  --teal-darkest:#06182C;
  --ochre:#FF6A3D;            /* corallo: CTA ed evidenziazioni calde */
  --gold:#FFC554;             /* giallo morbido: accenti su navy */
  --coral:#FF6A3D;
  /* ── I COLORI DI MARCA E QUELLI DA LEGGERE SONO DUE COSE DIVERSE ──
     #007AFF e #FF6A3D restano il marchio: riempimenti, icone, bordi, focus,
     e testo su navy — li' il contrasto e' ampio (il corallo su #0A2540 fa
     5.46:1). Ma come TESTO SU FONDO CHIARO non passano: il blu si ferma a
     4.02:1 e il corallo a 2.85:1, cioe' sotto la soglia AA per il testo
     normale. Da qui i tre gemelli scuri, tarati sul fondo piu' difficile
     (il grigio #F5F5F7, non il bianco) perche' funzionino ovunque.
     Non sostituiscono il marchio: si usano SOLO dove c'e' da leggere. */
  --teal-txt:#0064D2;         /* blu testo   · 5.59:1 su bianco, 5.14:1 su grigio */
  --teal-btn:#0069DB;         /* blu sfondo  · 5.19:1 con scritta bianca sopra */
  --ochre-txt:#BC4E2D;        /* corallo testo · 4.92:1 su bianco, 4.52:1 su grigio */

  --serif:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --r-card:26px;
  --r-btn:999px;
  --r-pill:999px;

  --shadow-soft:0 22px 48px -24px rgba(10,37,64,.28);
  --sh:0 4px 18px rgba(10,37,64,.07);
  --sh-hov:0 20px 44px rgba(10,37,64,.13);
}

/* ── Base ─────────────────────────────────────────────────────────── */
body{font-weight:400;background:var(--paper)}
body::after{display:none}                 /* niente grana pellicola: superfici pulite */
::selection{background:rgba(0,122,255,.18)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}

h1,h2,h3,.serif{font-family:var(--sans);font-weight:600;letter-spacing:-.02em}
h1{font-weight:700}
.hero h1,.page-head h1,.ev-main h1{letter-spacing:-.025em}

/* eyebrow: da editoriale a "capsula" minimal */
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:1.6px;color:var(--teal-txt)}
.eyebrow::before{display:none}
#cilento .eyebrow,#passaporto .eyebrow,.hero .eyebrow,.map-side .eyebrow{color:var(--gold)}

/* ── Header: vetro smerigliato, mai una riga netta ────────────────── */
.hdr.scrolled{background:color-mix(in srgb, var(--paper) 88%, transparent);border-bottom:none;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
  backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px)}
.hdr nav a{text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:500;padding:8px 2px}
.hdr nav a::after{height:2px;border-radius:2px;background:var(--teal);bottom:2px}
.hdr.scrolled nav a:hover{color:var(--teal-txt)}

/* wordmark: pesi moderni */
.logo .lw b,.logo-stack .lw b,.wordmark .wm-name{font-family:var(--sans);font-weight:700;letter-spacing:3px}
.hdr.scrolled .logo .lw b,.logo.on-light .lw b{color:var(--ink)}
.hdr.scrolled .logo .lw span,.logo.on-light .lw span{color:var(--teal-txt)}

/* ── Bottoni: pillole, maiuscolo addio ────────────────────────────── */
.btn,.share-b,.btn-dir,.act-b,.cal-nav,.msel{border-radius:var(--r-btn)}
.btn{text-transform:none;letter-spacing:0;font-size:.92rem;font-weight:500;
  padding:13px 26px;gap:8px}
/* Si chiamava .btn-ochre ed era BLU: nome rimasto dal cambio di palette,
   quando l'ocra e' diventata il corallo e il pulsante principale e' passato
   al blu. In 28 punti fra HTML, CSS e JS il nome diceva il contrario del
   colore — una trappola per chiunque tocchi il file convinto di sapere cosa
   sta cercando. Il nome ora dice il RUOLO («principale»), non la tinta:
   cosi' regge anche al prossimo cambio di palette. */
.btn-primary{background:var(--teal-btn);color:#fff}
.btn-primary:hover{background:#0059BE;transform:translateY(-1px);box-shadow:0 12px 24px -10px rgba(0,122,255,.55)}
.btn-primary:active{box-shadow:0 4px 10px -6px rgba(0,122,255,.5)}
.btn-line{border-color:rgba(255,255,255,.55);color:#fff;border-radius:var(--r-btn)}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.btn-line-dark{border-color:var(--hair);color:var(--ink)}
.btn-line-dark:hover{border-color:var(--ink);background:rgba(0,0,0,.04)}

/* bottone Stasera: corallo pieno, bianco sopra */
.btn-tickets{background:var(--ochre);color:var(--ink-fixed)!important;box-shadow:0 8px 20px -8px rgba(255,106,61,.7)}
.btn-tickets::before{background:var(--surface)}
.btn-tickets:hover{background:#F0562B;box-shadow:0 12px 24px -8px rgba(255,106,61,.85)}
/* il navy vince il bianco: sul corallo il bianco dava 2.85:1, sotto il
   minimo anche per il testo grande. Il corallo non si tocca. */
.hdr nav a.btn-tickets,.hdr.scrolled nav a.btn-tickets{color:var(--ink-fixed)!important}
.hdr nav a.btn-tickets:hover{color:var(--ink-fixed)!important}
.pbar-yes{background:var(--ochre);color:var(--ink-fixed)}

/* ── Hero: velo navy, titolo compatto ─────────────────────────────── */
.hero-veil{background:linear-gradient(200deg,rgba(10,37,64,.20) 0%,rgba(10,37,64,.45) 45%,rgba(10,37,64,.85) 100%)}
.hero.slider .hero-veil{background:
  linear-gradient(180deg,rgba(10,37,64,.58) 0%,rgba(10,37,64,.34) 30%,
    rgba(10,37,64,.44) 55%,rgba(10,37,64,.66) 80%,rgba(10,37,64,.82) 100%)}
.hero.slider .hero-in::before{background:radial-gradient(closest-side,rgba(10,37,64,.55),rgba(10,37,64,.28) 60%,transparent)}
.hs-kicker{letter-spacing:2.5px}
.hero-ctx{letter-spacing:2px;color:var(--gold)}
.hero.slider p{color:var(--gold)}
.hchip{background:rgba(10,37,64,.45)}
.hchip.gold{background:rgba(255,106,61,.32);border-color:rgba(255,197,84,.5)}
.hs-dots button.on::after{background:var(--gold)}

/* ── Search bar: card bianca sospesa ──────────────────────────────── */
.searchbar{background:var(--surface);border:none;border-radius:28px;
  box-shadow:0 24px 60px -20px rgba(10,37,64,.30)}
.sfield label,.sfield .slbl label{color:var(--teal-txt)}
.sfield select,.sfield input{border-bottom-color:rgba(0,0,0,.10);border-radius:0}
.sfield select:focus,.sfield input:focus{border-color:var(--teal-txt)}
.sfield .gps{color:var(--teal-txt)}
.searchbar .btn{border-radius:var(--r-btn);height:52px}

/* quick pills */
.qp{background:var(--surface);border:none;box-shadow:var(--sh)}
.qp:hover{border:none;color:var(--teal-txt);background:var(--surface);box-shadow:var(--sh-hov)}

/* ── Tabs: segmented control iOS ──────────────────────────────────── */
.tabs{border:none;background:rgba(118,118,128,.12);padding:4px}
.tabs button{text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:500;padding:9px 20px}
.tabs button.on{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.12)}

/* ── Card evento: bianche, rotonde, ombra soffusa ─────────────────── */
.ecard,.fcard,.cat{background:var(--surface);border:none;border-radius:var(--r-card);box-shadow:var(--sh)}
.ecard:hover,.fcard:hover,.cat:hover{box-shadow:var(--sh-hov)}
/* IL BORDO CORALLO DI CASELLE NON C'E' PIU'. Era disegnato in TRE modi
   diversi e sovrapposti — bordo sopra da 3px in styles.css, ombra interna
   qui, bordo a sinistra nel blocco mobile — e il risultato era un contorno
   arancione che sembrava un errore di stampa, sul chiaro come sullo scuro.
   Ed era ridondante: «CASELLE IN PITTARI» sta gia' scritto in corallo nella
   riga sopra il titolo, che e' il posto dove uno lo legge davvero. Un segno
   in piu' che ripete una parola non aggiunge informazione: aggiunge rumore. */
.ecard h3,.fcard .fbody h3,.cat-body h3{font-weight:600}
.ecard .efoot{border-top-color:rgba(0,0,0,.05)}
.cat-body .cat-go,.fcard .flink{color:var(--teal-txt)}
.cat-body .num{font-family:var(--sans);color:var(--ochre);font-weight:600}
.emedia,.fmedia,.cat figure{border-radius:var(--r-card) var(--r-card) 0 0}
.datechip{border-radius:14px}
.fcard .datechip b,.fcard .fbody h3{font-family:var(--sans)}

/* poster grandi nomi */
.hn-card{background:var(--sec-dark)}
/* ⚠️ La tessera di ripiego della rail — quella con scritto solo «MUSICA»
   quando il grande nome non ha una fotografia — usava `--muted`, che è un
   grigio scelto per la carta bianca, sopra il navy della card: 3.06:1 a
   11px. È lo stesso errore di `--teal-deep` che faceva due mestieri e del
   verde di ora.html. Non si era mai visto perché finora ogni evento
   musicale in rail aveva la sua foto; è bastato entrare Giovivendo, che
   non ce l'ha, e il guardiano l'ha trovato al primo giro. 8,4:1. */
.hn-fb{color:rgba(255,255,255,.74)}
.hn-title{font-family:var(--sans);font-weight:600}
.hn-cat{background:rgba(10,37,64,.55)}
.hn-badge.gold{background:var(--ochre);color:var(--ink-fixed)}
.hn-date{color:var(--gold)}
.hn-all{color:var(--teal-txt)}
.hn-media::after{background:linear-gradient(180deg,rgba(10,37,64,.15) 0%,transparent 30%,rgba(10,37,64,.55) 62%,rgba(6,24,44,.92) 100%)}

/* righe catalogo */
.ev:hover,.row:hover,.nrow:hover{background:rgba(0,122,255,.045)}
.ev-mid h3,.row-main h3,.nrow h3{font-weight:600}
.ev-side .r-link,.row-side .r-link,.nrow .r-link,.ev-mid .e-eyebrow .live,.ev-mid .e-eyebrow .kpi{color:var(--teal-txt)}
.save.sv{color:var(--ochre);border-color:var(--ochre)}
.row-date b,.nrow .row-date b{font-family:var(--sans);font-weight:700}
.row.cas .row-date b{color:var(--ochre)}
.day .dl em{color:var(--ochre)}
.month-h::after,.rows,.row,.ev,.nrow{border-color:rgba(0,0,0,.07)}

/* chip filtri */
.chip{border-radius:var(--r-pill);background:var(--surface);border-color:rgba(0,0,0,.08);
  text-transform:none;letter-spacing:0;font-size:.8rem;font-weight:500;padding:9px 18px;color:var(--ink)}
.chip:hover{border-color:var(--teal-txt);color:var(--teal-txt)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip.gold{color:var(--ochre);border-color:rgba(255,106,61,.4)}
.chip.gold.on{background:var(--ochre);border-color:var(--ochre);color:var(--ink-fixed)}

/* cat-bar sticky: vetro chiaro */
.cat-bar{background:color-mix(in srgb, var(--paper) 88%, transparent);border-bottom:none;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.view-tog{border:none;background:rgba(118,118,128,.12);border-radius:var(--r-pill);padding:3px}
.view-tog button{border-radius:var(--r-pill);text-transform:none;letter-spacing:0;font-size:.8rem}
.view-tog button.on{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.msel{border-radius:var(--r-pill);text-transform:none;letter-spacing:0;font-size:.82rem;background:var(--surface)}
.page-head{background:var(--surface)}
.search input{border-bottom-color:rgba(0,0,0,.12)}
.search input:focus{border-color:var(--teal-txt)}

/* calendario */
.cal-grid,.cal-dow,.cal-cell{border-color:rgba(0,0,0,.06)}
.cal-dow{background:var(--surface)}
.cal-cell.today{background:rgba(0,122,255,.05)}
.cal-d{font-family:var(--sans);font-weight:600}
.cal-cell.today .cal-d{color:var(--teal-txt)}
.cal-ev{background:rgba(0,122,255,.09);color:var(--teal-txt);border-radius:8px}
.cal-ev:hover{background:var(--teal);color:#fff}
.cal-ev.cas{background:rgba(255,106,61,.14);color:var(--ochre)}
.cal-ev.cas:hover{background:var(--ochre);color:var(--ink-fixed)}
.cal-nav{border-radius:50%}

/* ── Mappa ────────────────────────────────────────────────────────── */
#mappa .split{border-radius:var(--r-card);box-shadow:var(--shadow-soft)}
.map-side{background:var(--sec-dark)}
.map-side .eyebrow{color:var(--gold)}
.mrow .md b,.mrow h4,.map-side h3{font-family:var(--sans)}
.mrow .md b{color:var(--gold);font-weight:700}
.mrow .ar{color:var(--gold)}
.map-badge{background:color-mix(in srgb, var(--surface) 92%, transparent);border:none;box-shadow:var(--sh)}
.map-badge b{color:var(--teal-txt)}
.pinc{background:var(--teal)}
.pinc::after{border-color:rgba(0,122,255,.35)}

/* ── Sezioni scure: navy uniforme ─────────────────────────────────── */
#cilento,#passaporto,footer,.mmenu,#splash{background:var(--sec-dark)}
.mmenu{background:var(--teal-darkest)}
.mmenu a{font-family:var(--sans);font-weight:600;letter-spacing:-.01em}
.story blockquote{font-family:var(--sans);font-weight:600;letter-spacing:-.02em}
.story blockquote em{color:var(--gold)}
.story-media::after{border-color:rgba(255,197,84,.35)}
.story-media figure{border-radius:var(--r-card)}
.pp-fill{background:linear-gradient(90deg,var(--ochre),var(--gold))}
.pp-b.on{background:var(--ochre);border-color:var(--ochre);color:var(--ink-fixed)}
.pp-next b,.pp-next button{color:var(--gold)}

/* alert prossimità */
.al-box{background:var(--surface);border:none;box-shadow:var(--sh)}
.al-box h4{font-family:var(--sans);font-weight:600}

/* ── Newsletter: pill unica ───────────────────────────────────────── */
#news{background:var(--surface)}
.news-form{border:none;border-radius:var(--r-pill);background:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.news-form .btn{border-radius:var(--r-pill);margin:5px;padding:11px 24px}

/* ── Footer ───────────────────────────────────────────────────────── */
footer h5{color:var(--gold)}
footer a:hover{color:var(--gold)}
.f-legal a:hover{color:var(--gold)}

/* ── Scheda evento (drawer): angoli morbidi ───────────────────────── */
.sheet{background:var(--paper);border-radius:28px 0 0 28px;box-shadow:-24px 0 70px rgba(10,37,64,.35)}
@media(max-width:560px){.sheet{border-radius:28px 28px 0 0}}
.sh-x,.sh-save{border-radius:var(--r-pill);box-shadow:var(--sh)}
.sh-save.sv{background:var(--ochre);color:var(--ink-fixed)}
.sh-body h2{font-weight:700}
.sh-h{color:var(--teal-txt)}
.pr b{color:var(--teal-txt)}
.pr .pt{background:var(--teal)}
.pr.gd b{color:var(--ochre-txt)}
.pr.gd .pt{background:var(--ochre)}
.inf li::before{color:var(--ochre)}
.kpi b{font-family:var(--sans);font-weight:700}
.share-b{border-radius:16px;background:var(--surface)}
.share-b.native{background:var(--teal);border-color:var(--teal-txt);color:#fff}
.share-b.native:hover{background:#0063D1}
.share-b.wa{border-radius:16px}
.bell-panel{border:none;border-radius:20px;box-shadow:0 24px 60px rgba(10,37,64,.25)}
.bp-cta{border-radius:var(--r-pill)}
.bp-cta.ok{border-color:rgba(0,122,255,.4);color:var(--teal-txt)}

/* ── Pagina evento ────────────────────────────────────────────────── */
.ev-panel{border:none;border-radius:var(--r-card);box-shadow:var(--sh)}
.ev-panel .p-price{font-family:var(--sans);font-weight:700}
.ev-map{border-radius:var(--r-card)}
.simili{background:var(--surface)}
.btn-dir{border-radius:var(--r-pill);color:var(--teal-txt)}
.btn-dir:hover{background:rgba(0,122,255,.06)}
.wx{background:var(--surface);border:none;box-shadow:var(--sh)}
.ev-cd{background:var(--surface);border:none;box-shadow:var(--sh)}
.ev-cd b{font-family:var(--sans);font-weight:700;color:var(--ochre)}
.ev-cd.live{background:var(--teal-btn);border-color:var(--teal-btn)}
.ev-photo-cta{background:var(--surface);border:none;box-shadow:var(--sh)}

/* ── Concierge AI ─────────────────────────────────────────────────── */
#ai-fab{background:var(--teal);box-shadow:0 12px 34px -10px rgba(0,122,255,.55)}
#ai-fab:hover{background:#0063D1}
#ai-panel{border:none;border-radius:22px}
.aip-h{background:var(--sec-dark);font-family:var(--sans)}
.aip-m.me{background:var(--teal);border-radius:18px 18px 4px 18px}
.aip-m.bot{background:var(--surface);border-radius:18px 18px 18px 4px}

/* privacy bar */
.privacy-bar{background:var(--sec-dark);border:none;border-radius:22px}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq-i summary{font-family:var(--sans);font-weight:600}
.faq-i summary::after{color:var(--teal-txt)}

/* ═══════════════════════════════════════════════════════════════════
   SEZIONE SOCIAL HUB — hashtag · luoghi · tendenze
   ═══════════════════════════════════════════════════════════════════ */
#social{padding:var(--sp-3) 0}

/* tendenze: classifica numerata */

/* hashtag: nuvola di pill */

/* luoghi: mini-card paese */
.so-pl-dot{flex:none;width:38px;height:38px;border-radius:14px;display:grid;place-items:center;
  font-size:1.05rem;background:rgba(0,122,255,.08)}
.so-pl-mid{flex:1;min-width:0}
.so-pl-mid b{display:block;font-weight:600;font-size:.9rem;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-pl-mid span{font-size:.74rem;color:var(--muted)}
.so-pl-n{flex:none;font-size:.7rem;font-weight:600;color:var(--muted);
  background:var(--paper);border-radius:var(--r-pill);padding:4px 11px;white-space:nowrap}

/* segui il radar */

/* ═══════════════════════════════════════════════════════════════════
   BANNER STUDIO + PAGINA CONSULENZE
   ═══════════════════════════════════════════════════════════════════ */
#studio{padding:var(--sp-3) 0}
.st-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#0A2540 0%,#0E3A66 55%,#007AFF 130%);
  border-radius:32px;color:#fff;padding:clamp(34px,5vw,64px) clamp(26px,5vw,64px);
  box-shadow:0 30px 70px -30px rgba(10,37,64,.6)}
.st-card::after{content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,197,84,.28),transparent 65%)}
.st-card .eyebrow{color:var(--gold)}
.st-card h2{font-size:clamp(1.7rem,3.6vw,2.6rem);letter-spacing:-.025em;margin-top:14px;max-width:22ch}
.st-card p{margin-top:14px;max-width:56ch;color:rgba(255,255,255,.78);font-size:.98rem}
.st-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;position:relative;z-index:1}
.st-cta .btn-primary{background:#fff;color:var(--ink-fixed)}
.st-cta .btn-primary:hover{background:var(--paper);box-shadow:0 12px 24px -10px rgba(255,255,255,.4)}
.st-cta .btn-line{border-color:rgba(255,255,255,.4)}
.st-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;position:relative;z-index:1}
.st-tags span{font-size:.72rem;font-weight:500;color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.25);border-radius:var(--r-pill);padding:6px 14px}

/* pagina consulenze */
.cs-hero{background:linear-gradient(160deg,#0A2540 0%,#0E3A66 60%,#007AFF 140%);
  color:#fff;padding:clamp(70px,10vw,120px) 0 clamp(56px,7vw,90px)}
.cs-hero .eyebrow{color:var(--gold)}
.cs-hero h1{font-size:clamp(2.1rem,5.4vw,3.6rem);letter-spacing:-.03em;line-height:1.08;max-width:16ch;margin-top:16px}
.cs-hero h1 em{font-style:normal;color:var(--gold)}
.cs-hero p{margin-top:18px;max-width:54ch;color:rgba(255,255,255,.8);font-size:1.02rem}
.cs-hero .st-cta{margin-top:30px}
.cs-hero .btn-primary{background:#fff;color:var(--ink-fixed)}
.cs-hero .btn-primary:hover{background:var(--paper)}

.cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(14px,2vw,22px)}
.cs-card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh);padding:clamp(22px,2.8vw,30px);
  display:flex;flex-direction:column;gap:10px;transition:transform .3s ease,box-shadow .3s ease}
.cs-card:hover{transform:translateY(-5px);box-shadow:var(--sh-hov)}
.cs-ico{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;font-size:1.25rem;
  background:rgba(0,122,255,.10)}
.cs-card:nth-child(2) .cs-ico{background:rgba(255,106,61,.12)}
.cs-card:nth-child(3) .cs-ico{background:rgba(52,199,89,.12)}
.cs-card:nth-child(4) .cs-ico{background:rgba(255,197,84,.20)}
.cs-card:nth-child(5) .cs-ico{background:rgba(94,92,230,.12)}
.cs-card:nth-child(6) .cs-ico{background:rgba(0,122,255,.10)}
.cs-card h3{font-size:1.12rem;font-weight:600;letter-spacing:-.015em}
.cs-card p{font-size:.88rem;color:var(--muted);line-height:1.6}
.cs-card ul{list-style:none;margin-top:4px;display:flex;flex-direction:column;gap:6px}
.cs-card li{font-size:.82rem;color:var(--ink);display:flex;gap:9px;align-items:baseline}
.cs-card li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);flex:none;transform:translateY(-1px)}

/* metodo: step */
.cs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);counter-reset:step}
@media(max-width:820px){.cs-steps{grid-template-columns:1fr}}
.cs-step{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh);padding:clamp(22px,2.8vw,30px);position:relative}
.cs-step::before{counter-increment:step;content:"0" counter(step);display:block;
  font-size:2rem;font-weight:800;letter-spacing:-.04em;color:rgba(0,122,255,.22);margin-bottom:10px}
.cs-step h3{font-size:1.05rem;font-weight:600;margin-bottom:8px}
.cs-step p{font-size:.87rem;color:var(--muted);line-height:1.6}

/* fascia "per chi" */
.cs-who{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cs-who span{background:var(--surface);border-radius:var(--r-pill);box-shadow:var(--sh);
  padding:11px 20px;font-size:.86rem;font-weight:500}

/* CTA finale pagina consulenze */
.cs-final{background:linear-gradient(135deg,#0A2540,#0E3A66);border-radius:32px;color:#fff;
  text-align:center;padding:clamp(40px,6vw,70px) clamp(24px,4vw,48px)}
.cs-final h2{font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.025em;max-width:24ch;margin:0 auto}
.cs-final p{margin:16px auto 0;max-width:52ch;color:rgba(255,255,255,.78)}
.cs-final .st-cta{justify-content:center}
.cs-final .btn-primary{background:#fff;color:var(--ink-fixed)}
.cs-final .btn-primary:hover{background:var(--paper)}

/* ── iOS niceties ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
}

/* ── muro "Dalla community" (embed ufficiali IG/TikTok) ───────────── */
.so-wall-head{text-align:center;margin-top:clamp(34px,5vw,52px)}
.so-wall-head h3{font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:700;letter-spacing:-.02em}
.so-wall-head p{margin-top:8px;font-size:.88rem;color:var(--muted)}
.so-wall-head b{color:var(--ink);font-weight:600}
.so-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(14px,2vw,22px);margin-top:24px;align-items:start}
.so-embed{margin:0;background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh);
  overflow:hidden;display:flex;flex-direction:column}
.so-embed blockquote{margin:0!important;min-width:0!important;max-width:100%!important;
  border:none!important;box-shadow:none!important}
.so-embed iframe{max-width:100%!important}
.so-embed figcaption{padding:10px 16px 14px;font-size:.78rem;color:var(--muted);
  border-top:1px solid rgba(0,0,0,.05)}
/* stato vuoto: invito a taggare */
.so-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:8px;background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh);
  padding:clamp(30px,5vw,48px) clamp(22px,4vw,40px)}
.so-empty-i{font-size:2rem}
.so-empty b{font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
.so-empty span{font-size:.88rem;color:var(--muted);max-width:52ch;line-height:1.6}
.so-empty span b{font-size:.88rem;color:var(--teal-txt)}

/* ── zone di sfumatura animate ("aurora") dentro le card social ──────
   Riempiono il fondo elastico delle card: gradiente blu→indaco→corallo→oro
   che respira lentamente, con velo di luce che si muove in controfase. */
@keyframes aurora{0%{background-position:0% 45%}50%{background-position:100% 55%}100%{background-position:0% 45%}}
@keyframes auroralight{from{transform:translate(-6%,-4%) scale(1)}to{transform:translate(6%,5%) scale(1.12)}}
@media (prefers-reduced-motion:reduce){
}

/* ── Strip Caselle: l'etichetta maiuscola e il titolo erano troppo vicini
   (14px fissi non bastano fra due stili tipografici così diversi) ── */
.strip-in{gap:0 16px;padding-top:11px;padding-bottom:11px}
.strip-lbl{position:relative;padding-right:17px;font-weight:600;letter-spacing:1.6px;opacity:.95}
.strip-lbl::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:12px;background:rgba(255,255,255,.28)}
.strip-in b{font-weight:500;letter-spacing:-.01em}
.strip-go{font-size:.76rem;letter-spacing:1.6px;text-transform:none;font-weight:500}
/* l'etichetta ha due lunghezze: si mostra quella che ci sta */
.strip-lbl i{font-style:normal}
.strip-lbl .lbl-corto{display:none}

/* ── Centratura verticale ──────────────────────────────────────────────
   I tre pezzi hanno corpi diversi (9.6 / 12.5 / 12.2 px) e quindi righe di
   altezza diversa: allineandoli al centro ognuno restava centrato nella
   PROPRIA riga, e l'insieme risultava sfalsato di un paio di punti. Con la
   stessa interlinea per tutti le tre righe combaciano e il testo sta in mezzo
   davvero. La riga separatrice va agganciata alla stessa metà. */
.strip-in{align-items:center}
.strip-in>*{line-height:18px;display:inline-flex;align-items:center}
.strip-lbl::after{height:11px}

/* il ricambio degli eventi: una dissolvenza breve, niente movimento */
.strip-in{transition:opacity .26s ease}
.strip-in.via{opacity:0}
@media(prefers-reduced-motion:reduce){ .strip-in{transition:none} }

/* ── Schermo stretto: al titolo dell'evento va lo spazio che avanza ──
   Su 375px l'etichetta si prendeva 136 punti e al titolo ne restavano 92:
   "Il Grande Gioco dell'Oca · C…", tagliato a meta' parola. Non era un
   problema di margini ma di ripartizione: nessuno dei tre pezzi cedeva spazio.
   Ora l'etichetta si accorcia, il titolo e' l'unico che si allarga, e
   "Programma" resta intero perche' e' la parte che si clicca. */
/* IL MARGINE LATERALE È UNO SOLO, ED È QUELLO DEL SITO.
   Su telefono c'erano tre margini diversi impilati uno sull'altro: la barra a
   16px, l'intestazione a 14px, il contenuto a 20px (che è il valore vero,
   quello di --pad). Tre righe una sotto l'altra che partono da tre punti
   diversi si notano subito, anche senza saper dire perché: l'occhio segue il
   bordo sinistro e lo vede zigzagare. Ora tutti e tre partono da --pad. */
@media(max-width:560px){
  .strip-in{gap:0 10px;padding-left:var(--pad);padding-right:var(--pad)}
  .strip-lbl{padding-right:11px;flex:0 0 auto}
  .strip-lbl .lbl-lungo{display:none}
  .strip-lbl .lbl-corto{display:inline}
  .strip-in b{flex:1 1 auto;min-width:0}
  .strip-go{flex:0 0 auto;margin-left:0}
}
/* sotto i 360 punti l'etichetta sparisce del tutto: meglio niente paese che
   un titolo illeggibile */
@media(max-width:359px){
  .strip-lbl{display:none}
}

/* ══ Calendario abbonabile ══════════════════════════════════════════
   Sta sotto la newsletter perché è la stessa promessa — «ti avviso io» —
   ma senza chiedere un indirizzo email: si aggiunge e basta. */
.cal-sub{
  margin:34px auto 0;max-width:640px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:22px 24px;box-shadow:var(--sh)
}
.cal-sub-t b{display:block;font-size:1.02rem;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.cal-sub-t span{display:block;font-size:.87rem;color:var(--muted);margin-top:3px}
.cal-sub-r{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:16px}
.cal-sel{flex:1 1 210px;min-width:0}
.cal-sel>span{display:block;font-size:.74rem;font-weight:600;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.cal-sel select{
  width:100%;padding:11px 34px 11px 13px;border:1px solid var(--line);border-radius:13px;
  font:inherit;font-size:.9rem;background:var(--paper);color:var(--ink);
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236E6E73' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
  transition:border-color .16s ease,box-shadow .16s ease
}
.cal-sel select:focus{outline:0;border-color:var(--teal-txt);box-shadow:0 0 0 3.5px rgba(0,122,255,.16)}
.cal-btns{display:flex;gap:9px;flex-wrap:wrap}
.cal-note{font-size:.78rem;color:var(--muted);margin:14px 0 0;line-height:1.5}
@media(max-width:560px){
  .cal-sub{padding:18px;border-radius:18px}
  .cal-btns{width:100%}
  .cal-btns .btn{flex:1 1 auto;justify-content:center;text-align:center}
}

/* ══ «Più vicini a me» ══════════════════════════════════════════════
   Non è una scheda come le altre (non cambia COSA si vede, cambia in che
   ordine): quindi vive fuori dal segmented control, con la sua forma. */
.vicino{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:999px;padding:9px 17px;
  font:inherit;font-size:.85rem;font-weight:500;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease
}
.vicino .vic-i{font-size:1rem;line-height:1}
.vicino:hover{border-color:rgba(0,0,0,.16);color:var(--ink);box-shadow:var(--sh)}
.vicino:active{transition-duration:60ms;background:var(--paper)}
.vicino.on{background:var(--teal);border-color:var(--teal-txt);color:#fff;
  box-shadow:0 6px 16px -8px rgba(0,122,255,.7)}
.vicino[disabled]{opacity:.55;pointer-events:none}
.now-nota{font-size:.83rem;color:var(--muted);margin:0 0 14px}
@media(max-width:560px){ .vicino{width:100%;justify-content:center} }

/* ══ Archivio ═══════════════════════════════════════════════════════ */
.arc-barra{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.arc-cerca{flex:1;min-width:230px}
.arc-cerca input{width:100%;padding:13px 17px;border:1px solid var(--line);border-radius:16px;
  font:inherit;font-size:.94rem;background:var(--surface);color:var(--ink);
  transition:border-color .16s ease,box-shadow .16s ease}
.arc-cerca input:focus{outline:0;border-color:var(--teal-txt);box-shadow:0 0 0 3.5px rgba(0,122,255,.16)}
.arc-conta{font-size:.86rem;color:var(--muted)}

.arc-anno{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh);
  margin-bottom:16px;overflow:hidden}
.arc-anno>summary{display:flex;align-items:center;gap:12px;padding:16px 22px;cursor:pointer;
  list-style:none;transition:background .16s ease}
.arc-anno>summary::-webkit-details-marker{display:none}
.arc-anno>summary::before{content:"›";font-size:20px;line-height:1;color:var(--muted);
  transition:transform .2s ease;display:inline-block;width:12px}
.arc-anno[open]>summary::before{transform:rotate(90deg)}
.arc-anno>summary:hover{background:var(--paper)}
.arc-anno>summary b{font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
.arc-anno>summary span{font-size:.84rem;color:var(--muted)}
.arc-anno[open]>summary{box-shadow:inset 0 -1px 0 var(--line)}

.arc-mese{padding:6px 22px 16px}
.arc-mese h3{font-size:.72rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--teal-txt);margin:16px 0 6px}
.arc-r{display:flex;align-items:center;gap:13px;padding:10px 12px;margin:0 -12px;
  border-radius:14px;color:inherit;text-decoration:none;transition:background .16s ease}
.arc-r:hover{background:var(--paper);text-decoration:none}
.arc-r:active{background:rgba(0,0,0,.05);transition-duration:60ms}
.arc-e{font-size:19px;flex:none;width:26px;text-align:center}
.arc-t{min-width:0;flex:1}
.arc-t b{display:block;font-size:.94rem;font-weight:600;letter-spacing:-.01em}
.arc-t span{display:block;font-size:.81rem;color:var(--muted);margin-top:1px}
.arc-cas{flex:none;font-size:0.7rem;font-weight:600;padding:3px 9px;border-radius:999px;
  background:rgba(255,106,61,.14);color:var(--ochre-txt)}
.arc-vuoto{text-align:center;padding:40px 20px;color:var(--muted)}
.arc-nota{margin-top:26px;font-size:.88rem;color:var(--muted)}
.ph-sub{margin-top:10px;font-size:1rem;color:var(--muted);max-width:56ch}

/* ── avviso «edizione conclusa» sulla pagina evento ── */
.ev-finito{display:flex;gap:12px;align-items:flex-start;margin:0 0 20px;padding:14px 18px;
  background:var(--paper);border:1px solid var(--line);border-radius:18px;font-size:.9rem;line-height:1.5}
.ev-finito .ic{font-size:17px;line-height:1.3;flex:none}
.ev-finito b{font-weight:650}
.ev-finito a{color:var(--teal-txt);font-weight:500;white-space:nowrap}

/* ══ Modi per farsi avvisare: calendario e Telegram, in fila ═══════ */
.avvisi{display:flex;flex-direction:column;gap:14px;max-width:640px;margin:34px auto 0}
.avvisi .cal-sub{margin:0;max-width:none}

.tg-sub{
  display:flex;align-items:center;gap:16px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:18px 22px;box-shadow:var(--sh)
}
.tg-i{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(34,158,217,.10)}
.tg-t{flex:1;min-width:0}
.tg-t b{display:block;font-size:1.02rem;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.tg-t span{display:block;font-size:.87rem;color:var(--muted);margin-top:3px}
.btn-tg{flex:none;background:#0079BC;color:#fff;box-shadow:0 8px 20px -10px rgba(34,158,217,.8)}
.btn-tg:hover{background:#1B87BB;color:#fff;transform:translateY(-1px);
  box-shadow:0 12px 24px -10px rgba(34,158,217,.9)}
@media(max-width:560px){
  .tg-sub{flex-wrap:wrap;padding:18px;border-radius:18px}
  .tg-i{width:40px;height:40px}
  .btn-tg{width:100%;justify-content:center}
}

/* ── Mappa del sito: elenco fitto ma leggibile ── */
.ms-blocco h2{display:flex;align-items:center;gap:10px}
.ms-n{font-size:.78rem;font-weight:500;color:var(--muted);background:var(--paper);
  padding:2px 9px;border-radius:999px}
.ms-lista{list-style:none;margin:0;padding:0;columns:2;column-gap:26px}
.ms-lista li{break-inside:avoid;padding:5px 0;font-size:.9rem}
.ms-lista a{color:var(--ink);font-weight:500}
.ms-lista a:hover{color:var(--teal-txt)}
.ms-dove{display:block;font-size:.78rem;color:var(--muted)}
@media(max-width:640px){ .ms-lista{columns:1} }

/* ── AREE TOCCABILI: 44 punti, senza cambiare com'è fatto ────────────────
   Misurato il 02/08/2026 a 375 punti di larghezza. Diversi comandi stavano
   sotto la soglia comoda per un dito: i pallini dello slider erano 9×9 (il
   caso peggiore), i cuori «salva» 34×34, la campanella 32×32, i pulsanti
   della lingua 41×34.

   La correzione NON ingrandisce niente: allarga l'area sensibile con uno
   strato invisibile centrato sul comando. Il disegno resta identico, il dito
   trova il bersaglio. Ingrandire davvero i pallini li avrebbe resi dei bottoni
   e avrebbe rovinato l'hero, che è la prima cosa che si vede.

   Serve anche in vista dell'app: dentro una TWA non c'è la barra del browser
   a fare da margine, e il pollice arriva più in alto di quanto si creda. */
.hs-dots button,
.fav,
.bell-btn,
.langs button{ position:relative }

.fav::after,
.bell-btn::after,
.langs button::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  min-width:44px; min-height:44px;
  width:100%; height:100%;
  /* niente sfondo: è solo un bersaglio */
}

/* i pallini stanno vicini: se ognuno prende 44 punti si sovrappongono e si
   preme sempre quello sbagliato. Si allarga in verticale (dove non c'è
   nessuno) e si distanziano un po' in orizzontale. */
/* ⚠️ SUI PALLINI SI USA ::before, NON ::after.
   Lo ::after del pallino attivo e' gia' la barra di avanzamento dello
   slider (styles.css: inset 0, oro, animata). Scrivendoci sopra l'area
   sensibile, la barra diventava un rettangolo 30×44 fuori posto: il
   contatore visivo dello slider spariva. Verificato leggendo lo stile
   calcolato, non a occhio. */
/* «Stasera» NON entra nell'elenco qui sopra: il suo ::after è già la
   sottolineatura animata dei link del menu (.hdr nav a::after, alta 2px), e
   sovrascriverla gli lasciava un'area sensibile di due punti d'altezza.
   È lo stesso errore fatto un'ora prima sui pallini dello slider, dove
   l'::after era la barra di avanzamento: prima di appoggiarsi a uno
   pseudo-elemento bisogna guardare se è già occupato.
   Qui la strada è più semplice — largo lo è già (95 punti), gli manca solo
   l'altezza, e quella si dà con l'imbottitura senza pestare nulla. */
.btn-tickets{ min-height:44px; display:inline-flex; align-items:center }

.hs-dots{ gap:14px }
.hs-dots button::before{ content:""; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); width:30px; height:44px }

/* ── la dichiarazione di chi risponde nel widget ─────────────────────────
   Deve essere leggibile «in modo chiaro e distinguibile» (art. 50 AI Act),
   quindi non un grigetto minuscolo sotto tutto: sta sotto l'intestazione,
   su un velo azzurro che la stacca dai messaggi, e non scorre via con la
   conversazione. */
#ai-panel .aip-dich{
  margin:0;
  padding:10px 16px;
  font-size:.76rem;
  line-height:1.42;
  color:var(--teal-deep);
  background:rgba(0,122,255,.09);
  border-bottom:1px solid rgba(0,122,255,.16);
}

/* ── «STASERA» SUL TELEFONO: compatto, e senza l'alone ────────────────────
   A 390 punti quella pastiglia era il problema visivo dell'intestazione:
   larga quanto il logo, con un alone arancione sotto che sembrava una
   sbavatura di stampa, e l'hamburger appiccicato al bordo. Il min-height:44
   messo per le aree toccabili l'aveva pure ingrassata.

   Cosa cambia e perché:
   · via l'ombra colorata. Su fondo scuro un alone arancione non legge come
     rilievo, legge come sporco. Sul desktop resta, perché lì c'è aria intorno;
   · testo e imbottitura più piccoli: la parola resta leggibile e la pastiglia
     smette di competere col marchio;
   · il pallino pulsante sparisce. A quella dimensione è un puntino che vibra
     accanto a una parola: rumore, non richiamo;
   · un po' di respiro prima dell'hamburger, che stava attaccato.

   L'altezza resta 44 punti — l'area del dito non si tocca — ma è tutta
   imbottitura verticale invisibile, non ingombro colorato. */
@media(max-width:560px){
  .hdr nav a.btn-tickets{
    /* display e allineamento vanno ripetuti QUI: la regola generica
       `.hdr nav a` (classe + due elementi) batte per specificita' il
       `.btn-tickets` scritto da solo, quindi il display:inline-flex non
       arrivava mai e il testo restava incollato in alto nella pastiglia.
       Misurato: display block, 2px sopra il testo e 32 sotto. */
    display:inline-flex; align-items:center; justify-content:center;
    padding:0 14px;
    font-size:.72rem;
    letter-spacing:1.1px;
    line-height:1;
    box-shadow:none;
    margin-right:6px;
  }
  .hdr nav a.btn-tickets::before{ display:none }
  .hdr nav a.btn-tickets:hover{ box-shadow:none }
}

/* ── Il titolo della card è un link vero (05/08/2026) ──────────────────────
   Le card erano <article role="button"> aperte da location.href: nell'HTML
   non c'era un solo <a href> verso le schede evento, e un motore di ricerca
   i bottoni non li segue. Ora il titolo è un'ancora verso /evento/<slug>.
   Qui la si riporta all'aspetto di prima — il titolo NON deve sembrare un
   link: la card intera è già cliccabile e due inviti diversi nello stesso
   riquadro confondono. Restano il focus da tastiera (ocra, come ovunque) e
   tutto ciò che l'ancora dà gratis: tasto centrale, copia indirizzo,
   anteprima nella barra di stato. */
.ecard h3 a.tlink,
.fcard h3 a.tlink{
  color:inherit;
  text-decoration:none;
  font:inherit;
  /* l'area cliccabile copre la riga intera, non le sole lettere */
  display:block;
}
.ecard h3 a.tlink:hover,
.fcard h3 a.tlink:hover{ color:inherit; text-decoration:none }
.ecard h3 a.tlink:focus-visible,
.fcard h3 a.tlink:focus-visible{
  outline:2px solid var(--ochre);
  outline-offset:3px;
  border-radius:6px;
}

/* ── Materiale degli organizzatori: locandina e gallery (05/08/2026) ────────
   Quando una Pro Loco ci manda il suo materiale, quello vale più di un
   panorama preso altrove. La locandina va IN EVIDENZA e INTERA: è un
   manifesto, ritagliarlo vuol dire ritagliare le informazioni — per questo
   niente object-fit qui, l'altezza la decide l'immagine. */
.ev-loc{ margin:0 0 8px; }
.ev-loc a{
  display:block;
  max-width:460px;
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--sh);
  transition:box-shadow .18s ease, transform .18s ease;
}
.ev-loc a:hover{ box-shadow:var(--sh-hov); transform:translateY(-2px) }
.ev-loc a:active{ transform:translateY(0); transition-duration:60ms }
.ev-loc a:focus-visible{ outline:2px solid var(--ochre); outline-offset:4px }
.ev-loc img{ display:block; width:100%; height:auto }
.ev-loc figcaption{
  margin-top:10px; max-width:460px;
  font-size:.74rem; line-height:1.45; color:var(--muted);
}

/* la griglia delle foto: i file degli organizzatori arrivano quasi sempre
   quadrati (sono pensati per i social), quindi il riquadro è quadrato e non
   si taglia niente */
.ev-gal{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:0 0 10px;
}
.ev-gal a{
  display:block; aspect-ratio:1/1;
  border-radius:18px; overflow:hidden;
  box-shadow:var(--sh);
  transition:box-shadow .18s ease, transform .18s ease;
}
.ev-gal a:hover{ box-shadow:var(--sh-hov); transform:translateY(-2px) }
.ev-gal a:active{ transform:translateY(0); transition-duration:60ms }
.ev-gal a:focus-visible{ outline:2px solid var(--ochre); outline-offset:3px }
.ev-gal img{ width:100%; height:100%; object-fit:cover; display:block }
.ev-gal-cr{ margin:0 0 6px; font-size:.74rem; color:var(--muted) }

@media (max-width:520px){
  .ev-gal{ grid-template-columns:repeat(2,1fr) }
  .ev-loc a, .ev-loc figcaption{ max-width:100% }
}

/* la foto a schermo intero */
.ev-zoombox{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(10,37,64,.86);
  backdrop-filter:blur(4px);
  opacity:0; transition:opacity .2s ease;
}
.ev-zoombox.open{ opacity:1 }
.ev-zoombox img{
  max-width:min(1100px,100%); max-height:100%;
  width:auto; height:auto;
  border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.ev-zoomx{
  position:absolute; top:16px; right:16px;
  width:44px; height:44px;              /* bersaglio pieno per il dito */
  border:none; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--ink);
  font-size:1.1rem; line-height:1; cursor:pointer;
  box-shadow:var(--sh);
}
.ev-zoomx:active{ transform:scale(.94); transition:transform 60ms ease }
.ev-zoomx:focus-visible{ outline:2px solid var(--ochre); outline-offset:3px }

/* ── Hero con la TESTATA della locandina (05/08/2026) ───────────────────────
   Quando l'organizzatore ci dà il suo manifesto, la testata (titolo, date,
   disegno) prende il posto della fotografia in cima alla scheda. Ma la fascia
   è larga e bassa — fino a 3,7:1 — e `cover` su una grafica taglierebbe
   proprio il titolo o le date, cioè quello per cui la stiamo usando.
   Quindi: entra INTERA, e il vuoto attorno lo riempie una versione sfocata e
   ingrandita di se stessa, che tiene i colori del manifesto senza inventare
   niente. Via anche il velo scuro: serve a far staccare il testo bianco sulle
   fotografie, ma su un manifesto pensato per essere letto è solo sporcizia. */
.ev-hero.manifesto{ background:var(--paper) }
.ev-hero.manifesto::before{
  content:"";
  position:absolute; inset:0;
  background:var(--sfondo) center/cover no-repeat;
  filter:blur(26px) saturate(1.15);
  transform:scale(1.2);          /* la sfocatura sbiadisce ai bordi: si allarga */
}
.ev-hero.manifesto img{
  position:relative; z-index:1;
  object-fit:contain;
  /* un filo d'aria sopra e sotto, così non tocca i margini della fascia */
  padding:14px 0;
}
.ev-hero.manifesto::after{ display:none }

/* ══════════ I DUE CANALI (sostituiscono la griglia «Social radar») ══════════
   Due sole tessere, larghe e cliccabili per intero. Il colore della marca sta
   solo nell'icona: il riquadro resta bianco su Blu Bussento, o la home si
   riempirebbe del rosa di Instagram e dell'azzurro di Telegram, che non sono
   la nostra palette. Il movimento in :hover e il velo in :active seguono la
   regola del sito — cio' che si alza proietta ombra. */
/* tre canali: in fila su schermo largo, in colonna appena si stringe. A due
   colonne il terzo resterebbe solo su una riga, storto. */
.so-canali{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px)}
@media(max-width:1000px){.so-canali{grid-template-columns:1fr}}
.so-canale{display:flex;align-items:center;gap:16px;background:var(--surface);
  border-radius:var(--r-card);box-shadow:var(--sh);padding:clamp(18px,2.4vw,24px);
  text-decoration:none;color:inherit;min-width:0;
  transition:transform .18s ease, box-shadow .18s ease}
.so-canale:hover{transform:translateY(-3px);box-shadow:var(--sh-hov)}
.so-canale:active{transform:translateY(0);transition-duration:60ms}
.so-c-i{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:16px}
.so-canale.ig .so-c-i{background:rgba(225,48,108,.10);color:#E1306C}
.so-canale.tg .so-c-i{background:rgba(34,158,217,.10);color:#229ED9}
.so-canale.fb .so-c-i{background:rgba(24,119,242,.10);color:#1877F2}
.so-c-t{flex:1;min-width:0}
.so-c-t b{display:block;font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
.so-c-t span{display:block;margin-top:3px;font-size:.86rem;line-height:1.45;color:var(--muted)}
.so-c-go{flex:none;font-size:1.2rem;color:var(--teal-txt);opacity:.5;transition:opacity .18s, transform .18s}
.so-canale:hover .so-c-go{opacity:1;transform:translateX(3px)}

/* ── striscia Studio (in coda, non piu a meta pagina) ── */
.st-strip{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,34px);
  flex-wrap:wrap;background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh);
  padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,34px)}
.st-s-t{flex:1 1 320px;min-width:0}
.st-s-t p{margin:6px 0 0;font-size:.98rem;line-height:1.5;color:var(--muted);max-width:60ch}
.st-s-t p b{color:var(--ink);font-weight:600}
.st-s-a{display:flex;gap:10px;flex-wrap:wrap;flex:none}

/* ── «Il Cilento»: la citazione e tre porte vere ── */
.cil-strip{text-align:center}
.cil-strip blockquote{margin:0 auto clamp(22px,3vw,32px);max-width:22ch;
  font-size:clamp(1.4rem,3.4vw,2rem);line-height:1.25;letter-spacing:-.02em;font-weight:600}
.cil-strip blockquote em{color:var(--ochre);font-style:normal}
.cil-porte{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,18px);text-align:left}
@media(max-width:760px){.cil-porte{grid-template-columns:1fr}}
/* ⚠️ color:INK, non «inherit». Queste card bianche stanno dentro la sezione
   navy #cilento, che dichiara testo bianco: con «inherit» il titolo in
   grassetto usciva BIANCO SU BIANCO — spariva del tutto, e restava visibile
   solo la riga di descrizione in grigio. Difetto vero, trovato misurando i
   contrasti reali della pagina: una card bianca deve dichiarare il proprio
   colore di testo, mai ereditarlo da una sezione di colore opposto. */
.cil-porte a{display:block;background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh);
  padding:clamp(16px,2.2vw,22px);text-decoration:none;color:var(--ink);
  transition:transform .18s ease, box-shadow .18s ease}
.cil-porte a:hover{transform:translateY(-3px);box-shadow:var(--sh-hov)}
.cil-porte a:active{transform:translateY(0);transition-duration:60ms}
.cil-porte b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.cil-porte b::after{content:" →";color:var(--teal-txt);opacity:.55}
.cil-porte span{display:block;margin-top:4px;font-size:.85rem;line-height:1.45;color:var(--muted)}

/* ── gli hashtag veri: pillole che portano su Instagram ── */
.so-tagbar{margin-top:clamp(20px,2.6vw,28px);text-align:center}
.so-tag-int{max-width:62ch;margin:0 auto 14px;font-size:.86rem;line-height:1.5;color:var(--muted)}
.so-tag-lista{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
/* le pillole piccole non si alzano: velo di colore, come da regola del sito */
.so-tag{display:inline-block;padding:7px 14px;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--sh);text-decoration:none;
  font-size:.83rem;font-weight:600;color:var(--teal-txt);white-space:nowrap;
  transition:background .16s ease, color .16s ease}
.so-tag:hover{background:rgba(0,122,255,.10)}
.so-tag:active{background:rgba(0,122,255,.18);transition-duration:60ms}
.so-tag.brand{background:var(--ochre);color:var(--ink-fixed)}
.so-tag.brand:hover{background:#F2542A}
.so-tag.brand:active{background:#DB4720}

/* ── «I più cercati»: la classifica vera, numerata dal browser ──
   Numeri dal contatore <ol>, non scritti a mano: se un evento cade fuori
   perché nel frattempo è finito, la numerazione si richiude da sola. */
.so-tend{margin-top:clamp(22px,3vw,30px);background:var(--surface);border-radius:var(--r-card);
  box-shadow:var(--sh);padding:clamp(20px,2.6vw,28px)}
.so-tend h3{font-size:1.06rem;font-weight:600;letter-spacing:-.01em}
.so-tend-int{margin:6px 0 14px;font-size:.85rem;line-height:1.5;color:var(--muted);max-width:64ch}
.so-tend-l{list-style:none;counter-reset:t;margin:0;padding:0}
.so-tend-l li{counter-increment:t;display:flex;align-items:baseline;gap:14px;
  padding:11px 8px;border-radius:14px;cursor:pointer;transition:background .18s}
.so-tend-l li:hover{background:rgba(0,122,255,.05)}
.so-tend-l li+li{border-top:1px solid rgba(0,0,0,.05)}
.so-tend-l li::before{content:counter(t);flex:none;width:20px;
  font-size:1.02rem;font-weight:800;letter-spacing:-.03em;color:rgba(0,0,0,.18);
  font-variant-numeric:tabular-nums}
.so-tend-l li:first-child::before{color:var(--ochre)}
.so-tend-l b{flex:1;min-width:0;font-weight:600;font-size:.94rem;line-height:1.3;
  letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-tend-l span{flex:none;font-size:.78rem;color:var(--muted)}
@media(max-width:640px){
  .so-tend-l li{flex-wrap:wrap}
  .so-tend-l b{flex:1 1 100%;white-space:normal}
  .so-tend-l span{margin-left:34px}
}

/* ── «Il Cilento lo fate voi»: le bolle degli enti ──
   Cerchi con le iniziali del paese e il nome sotto. Niente loghi: non li
   abbiamo, e prenderli dai loro siti sarebbe usare un marchio altrui senza
   chiederlo. Le iniziali su fondo blu tenue funzionano lo stesso e non
   promettono una partnership che non c'e'. */
.so-enti{margin-top:clamp(22px,3vw,30px);text-align:center}
.so-enti h3{font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:600;letter-spacing:-.02em}
.so-enti-int{max-width:60ch;margin:8px auto 20px;font-size:.92rem;line-height:1.55;color:var(--muted)}
.so-enti-int b{color:var(--ink);font-weight:600}
.so-bolle{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.6vw,16px)}
.so-bolla{display:flex;flex-direction:column;align-items:center;gap:7px;
  width:88px;text-decoration:none;color:inherit}
.so-b-s{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:rgba(0,122,255,.09);color:var(--teal-txt);
  font-size:1.05rem;font-weight:700;letter-spacing:-.02em;
  box-shadow:var(--sh);transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.so-bolla:hover .so-b-s{transform:translateY(-3px);box-shadow:var(--sh-hov);background:rgba(0,122,255,.15)}
.so-bolla:active .so-b-s{transform:translateY(0);transition-duration:60ms}
.so-b-n{font-size:.74rem;line-height:1.25;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.so-enti-nota{margin-top:18px;font-size:.8rem;color:var(--muted)}
.so-enti-nota a{color:var(--teal-txt);font-weight:600}
@media(max-width:640px){.so-bolla{width:74px}.so-b-s{width:50px;height:50px;font-size:.95rem}}

/* ══ CONTRASTO: le ultime, trovate MISURANDO le pagine, non a occhio ══
   Il metodo: si carica ogni pagina, si scorre ogni elemento che contiene
   testo, si risale ai suoi antenati per il vero colore di sfondo e si
   calcola il rapporto WCAG. Solo le regole che FALLISCONO sul serio
   finiscono qui — sostituire tutte le occorrenze di --ochre e --teal
   avrebbe ritinto anche il footer e l'hero, dove il corallo su navy fa
   5.46:1 ed e' giusto cosi'.
   Attenzione alla SPECIFICITA': i selettori sotto ricalcano quelli che
   devono vincere (.hdr.scrolled ..., #eventi ...). Scritti piu' corti,
   perdevano in silenzio e sembrava che il colore non cambiasse.          */

/* piccole scritte blu che sono TESTO, non decorazione.
   I selettori sono quelli che VINCONO davvero, letti dal browser: la prima
   stesura li aveva indovinati (.row-side .r-link, .ev-mid .e-eyebrow) e
   perdeva in silenzio contro .ecard .efoot .r-link. */
.ecard .e-eyebrow .live,.row-main .r-eyebrow .live,.sh-eyebrow .live{color:var(--teal-txt)}
.ecard .efoot .r-link,.row-side .r-link,.ev-side .r-link,.nrow .r-link{color:var(--teal-txt)}
.hdr.scrolled .langs button.on{color:var(--teal-txt)}

/* corallo che fa da testo su bianco o su grigio */
.chip.gold{color:var(--ochre-txt)}
.cat-body .num{color:var(--ochre-txt)}
.row-main .r-eyebrow .gold,.ev-mid .e-eyebrow .gold,.sh-eyebrow .gold,
.ecard .e-eyebrow .gold{color:var(--ochre-txt)}
.res-count b{color:var(--ochre-txt)}
#eventi .sec-head .count b{color:var(--ochre-txt)}
.cal-ev.cas{color:var(--ochre-txt)}
.ev-photo-cta a{color:var(--teal-txt);font-weight:600}

/* il Radar: la pastiglia e la bolla dei messaggi hanno una scritta bianca
   sopra, quindi lo sfondo dev'essere il blu tarato per quello */
#ai-fab{background:var(--teal-btn)}
.aip-m.me{background:var(--teal-btn)}
.aip-ev{color:var(--teal-txt)}
.prose a{color:var(--teal-txt);font-weight:500}
#consent-on{background:var(--teal-btn)}

/* ══════════════════════════════════════════════════════════════════════
   TELEFONO: LA CARD DIVENTA UNA RIGA. Da rivista a portale.
   ──────────────────────────────────────────────────────────────────────
   IL NUMERO CHE HA DECISO: su uno schermo da 390×844 entravano 2,2 eventi.
   La card e' alta 382px, di cui 223 di fotografia — il 58%. Con 115 eventi
   attivi il catalogo diventa 52 schermate di scorrimento, e chi cerca «cosa
   faccio stasera» non scorre 52 schermate: se ne va.
   La card grande con la foto e' un pattern da RIVISTA. Un portale di eventi
   sul telefono usa la riga: miniatura piccola, titolo, dove e quando. Cosi'
   fanno tutti quelli che funzionano, e non per pigrizia — perche' la
   decisione che il visitatore deve prendere e' CONFRONTARE, e per
   confrontare bisogna vedere piu' cose insieme.
   Obiettivo: ~118px per evento, cioe' 7 per schermata invece di 2,2.

   NON CAMBIA NIENTE SU DESKTOP: la' c'e' la griglia, la foto grande ha
   spazio e fa il suo lavoro. Questo blocco vive solo sotto i 700px.
   NON CAMBIA IL MARKUP: stesso HTML, stesso JavaScript, stessi dati. Solo
   una disposizione diversa alla larghezza in cui l'altra non funziona.   */
@media(max-width:700px){
  .ecard{display:grid;grid-template-columns:104px 1fr;align-items:stretch;gap:0;
    border-radius:18px}
  .ecard:hover{transform:none}          /* sul telefono non c'e' hover: solo :active */
  .ecard:active{transform:scale(.985);transition-duration:60ms}


  /* ⚠️ LARGHEZZA FISSA, non aspect-ratio. Con «aspect-ratio:1; height:100%»
     la miniatura si allarga quando la card si alza — e la card si alza per
     mille motivi (un titolo su due righe, un carattere piu' grande). Alzando
     il titolo da .98 a 1.04rem la riga e' passata da 106 a 109px e la foto
     e' sbordata di 16px DENTRO la colonna del testo: le prime lettere del
     titolo finivano sotto l'immagine. La colonna della griglia dice 104px:
     la foto deve valere esattamente quello, e il resto lo fa object-fit. */
  .ecard .emedia{width:104px;height:100%;aspect-ratio:auto;border-radius:0;flex:none}

  /* la pastiglia della categoria SPARISCE: su 104px di miniatura coprirebbe
     mezza foto, e soprattutto e' gia' RIDONDANTE — eyebrowHTML() scrive il
     nome della categoria nella riga sopra il titolo. Due volte la stessa
     informazione, e una delle due mangia l'immagine. */
  .ecard .emedia .ctag{display:none}
  /* la data resta: e' l'unica cosa che la foto non puo' dire.
     0.7rem come tutto il resto; a rimetterci e' lo spazio fra le lettere,
     che su una targhetta stretta e' la prima cosa da sacrificare
     (stessa regola gia' scritta sopra .hn-cat). */
  .ecard .emedia .tbadge{left:6px;right:auto;bottom:6px;top:auto;
    font-size:.7rem;letter-spacing:.6px;padding:2px 7px}
  /* resta a 34px: rimpicciolito a 30 il cuore veniva tagliato, ed e' il
     bersaglio del salvataggio — la cosa che si tocca piu' spesso. */
  .ecard .emedia .fav{top:6px;right:6px}

  .ecard .ebody{padding:11px 13px;gap:3px;justify-content:center;min-width:0}
  .ecard .e-eyebrow{gap:8px;font-size:.7rem;letter-spacing:.6px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .ecard .e-eyebrow>*{margin-right:8px}
  .ecard h3{font-size:.98rem;line-height:1.22;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ecard .eplace{font-size:.76rem;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* «Dettagli →» era una riga intera con un bordo sopra, per dire una cosa
     che la card gia' dice: che si puo' toccare. Su 115 eventi sono 115 righe
     sprecate. Sparisce, e la card resta cliccabile tutta. */
  .ecard .efoot{display:none}

  /* la griglia non ha piu' bisogno di respiro fra le card: sono righe */
  .now-grid,.cards-grid,#cat-grid{gap:10px}
}

/* ══════════════════════════════════════════════════════════════════════
   TELEFONO: I FILTRI IN UNA RIGA CHE SCORRE, NON IN OTTO CHE SI IMPILANO
   ──────────────────────────────────────────────────────────────────────
   IL NUMERO: la barra dei filtri e' `flex-wrap:wrap` con quattordici chip.
   Su 375px vanno a capo otto volte e la barra diventa alta 344px. Essendo
   `position:sticky`, quei 344px RESTANO IN CIMA mentre scorri: sommati ai
   64 dell'intestazione fanno 408px su 844, cioe' il 48% dello schermo
   occupato dai controlli in permanenza. Meta' telefono per filtrare, meta'
   per guardare i risultati.

   La riga che scorre in orizzontale e' il pattern giusto e lo conosciamo
   gia': `ora.html` lo usa per i suoi quattro filtri. Qui vale ancora di
   piu', perche' le chip sono quattordici e sono ORDINATE per importanza —
   Caselle, Salvati, Vicino a me vengono prima, e restano le prime che vedi.

   `top` NON e' piu' 0: l'intestazione e' anch'essa sticky a top:0 e le due
   si sovrapponevano (misurato: entrambe 0→64 e 0→344). La barra si appoggia
   SOTTO l'intestazione.                                                   */
@media(max-width:700px){
  .cat-bar{top:64px}
  .cat-bar .wrap{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;scroll-padding-left:var(--pad)}
  .cat-bar .wrap::-webkit-scrollbar{display:none}
  /* in una riga che scorre niente si restringe, o le chip si schiacciano
     tutte per far stare l'ultima */
  .cat-bar .chip,.cat-bar .msel,.cat-bar .search,.cat-bar .view-tog{flex:none}
  /* il campo di ricerca resta il primo e non scorre via del tutto:
     e' la via piu' rapida quando sai gia' cosa cerchi */
  .cat-bar .search{min-width:200px}
  /* sfumatura a destra: dice che la riga continua. Senza, una riga che
     scorre sembra una riga che finisce. */
  .cat-bar{position:sticky;-webkit-mask-image:none}
  .cat-bar .wrap{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
}

/* ══════════════════════════════════════════════════════════════════════
   SCHELETRI DI CARICAMENTO
   ──────────────────────────────────────────────────────────────────────
   Le griglie degli eventi le disegna il JavaScript: fino a quel momento
   c'era un buco bianco. Su una connessione lenta sono decimi di secondo in
   cui il sito sembra rotto — e la sensazione di lentezza dipende piu' da
   cosa vedi mentre aspetti che da quanto aspetti davvero.

   NIENTE JAVASCRIPT: gli scheletri stanno nell'HTML dentro i contenitori,
   e le funzioni che disegnano le card fanno `innerHTML = ...`, quindi li
   sostituiscono da sole al primo render. Un pezzo in meno da ricordarsi.

   ⚠️ SI SPENGONO DA SOLI DOPO 8 SECONDI. Se il JavaScript non parte (rete
   caduta, script bloccato), uno scheletro che pulsa in eterno e' una bugia:
   promette un contenuto che non arrivera'. Dopo 8s svaniscono e lasciano il
   vuoto, che almeno e' onesto. Serve una regola CSS perche' anche il
   rimedio deve funzionare quando il JavaScript non c'e'.                  */
.skel{border-radius:18px;background:var(--hair-soft);position:relative;overflow:hidden;
  height:106px;animation:skel-fine .4s ease 8s forwards}
.skel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:translateX(-100%);animation:skel-luce 1.3s ease-in-out infinite}
@keyframes skel-luce{100%{transform:translateX(100%)}}
@keyframes skel-fine{to{opacity:0;height:0;margin:0;border:0}}
/* su desktop la card e' quella grande con la foto: lo scheletro la imita */
@media(min-width:701px){.skel{height:382px;border-radius:var(--r-card)}}
/* chi ha chiesto meno animazioni vede un blocco fermo, non un lampeggio */
@media(prefers-reduced-motion:reduce){
  .skel::after{animation:none;opacity:.35}
  .skel{animation-duration:0s;animation-delay:8s}
}
/* contenitore degli scheletri: la stessa griglia delle card, ma separato da
   #grid-view — vedi il commento in eventi.html sul perché. */
.skel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(14px,2.2vw,24px)}
@media(max-width:700px){.skel-grid{grid-template-columns:1fr;gap:10px}}

/* la campanella che si fa notare dopo il primo salvataggio: un alone che
   pulsa per sei secondi. È il «soft prompt» — invita, non chiede. Il permesso
   vero lo chiede il bottone dentro il pannello, quando l'utente lo apre. */
@keyframes bell-nota{
  0%,100%{box-shadow:0 0 0 0 rgba(255,106,61,0)}
  50%    {box-shadow:0 0 0 7px rgba(255,106,61,.30)}
}
.bell-btn.nota{border-radius:50%;animation:bell-nota 1.5s ease-in-out 4}
@media(prefers-reduced-motion:reduce){
  .bell-btn.nota{animation:none;box-shadow:0 0 0 4px rgba(255,106,61,.30);border-radius:50%}
}
/* l'ora sulla card, quando l'organizzatore ce l'ha detta */
.eplace .e-ora{font-weight:700;color:var(--ink)}
/* la riga che dice dove vivono i timbri: piccola, sotto, non allarmante */
.pp-dove{display:block;margin-top:10px;font-size:.78rem;line-height:1.5;color:rgba(255,255,255,.55)}

/* Il corpo della scheda SERVITO DAL SERVER (evento.php). Il JavaScript lo
   sostituisce con la versione ricca appena parte, quindi queste regole si
   vedono per mezzo secondo — e per sempre a chi il JavaScript non lo esegue:
   i crawler delle AI, gli scraper dei social, i lettori testuali. Vale la
   pena che sia impaginato, non un blocco di testo nudo. */
.ev-main .ev-desc{font-size:1.02rem;line-height:1.65;color:var(--ink);margin:18px 0 0;max-width:66ch}
.ev-main .ev-fonte{margin-top:22px;font-size:.82rem;color:var(--muted)}
.ev-main .ev-fonte a{color:var(--teal-txt);font-weight:600}

/* ── LA FONTE SULLA CARD ────────────────────────────────────────────────
   Discreta: sta nella riga sopra il titolo, in coda, e non deve mai rubare
   l'occhio al titolo — è una rassicurazione, non un titolo di giornale.
   Verde, perché è l'unico punto del sito che dice «questo l'abbiamo
   controllato» e il verde è la convenzione universale per quello. */
.verif{display:inline-flex;align-items:center;gap:4px;color:var(--verif);font-weight:600;
  max-width:22ch;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:help}
.verif svg{flex:none}
.verif i{font-style:normal;overflow:hidden;text-overflow:ellipsis}
/* testo per chi usa uno screen reader: il title da solo non basta */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* sul telefono resta la sola spunta: la riga e\u0300 una e stretta, il nome della
   fonte sta per esteso sulla scheda evento */
@media(max-width:700px){ .ecard .verif i{display:none} }

/* ── IL TITOLO DELLA CARD HA PIÙ PRESENZA ───────────────────────────────
   IL NUMERO: 1.12rem contro 1rem del corpo. Un rapporto di 1,12× — cioè
   quasi nessuno. L'h1 dell'hero sta a 2,9× e va benissimo; il titolo di card
   invece è il testo su cui una persona DECIDE se aprire, e stava allo stesso
   peso della riga del luogo. Non è tono da rivista, è tono da elenco.
   1.3rem porta il rapporto a 1,3×, con l'interlinea più stretta e le lettere
   leggermente ravvicinate: il trattamento che i titoli grandi hanno già.
   Sul telefono si sale meno (da .98 a 1.04rem): lì la card è una riga da
   106px e ogni pixel di altezza è un evento in meno per schermata. */
.ecard h3,.fcard .fbody h3{font-size:1.3rem;line-height:1.2;letter-spacing:-.015em;font-weight:650}
@media(max-width:700px){
  .ecard h3{font-size:1.04rem;line-height:1.22;letter-spacing:-.01em}
}

/* ── SUL TELEFONO LA SPUNTA VA SULLA MINIATURA ──────────────────────────
   Nella riga sopra il titolo non ci sta: quella riga ha già Caselle, lo
   stato, la categoria, e va a ellissi — misurato, la spunta veniva tagliata
   proprio sulle card più ricche, cioè quelle di Caselle. Un segnale di
   affidabilità che sparisce quando la card è piena non serve a niente.
   Sull'angolo in alto a sinistra della foto è libero (la pastiglia della
   categoria lì non c'è più, la data sta in basso, il cuore a destra) e si
   legge a colpo d'occhio. Il nome della fonte resta nel `title` e per esteso
   sulla scheda evento. */
@media(max-width:700px){
  .ecard{position:relative}
  .ecard .verif{position:absolute;left:7px;top:7px;z-index:4;
    width:19px;height:19px;padding:0;border-radius:50%;max-width:none;
    background:#1D7A4C;color:#fff;justify-content:center;
    box-shadow:0 1px 5px rgba(10,37,64,.4)}
  /* Senza data di controllo non c'è la spunta: il pallino restava vuoto
     e la frase per lo screen reader, grigia, stava sul verde (1.05:1).
     Il nome della fonte resta sulla scheda evento. */
  .ecard .verif.neutral{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   TEMA SCURO
   ──────────────────────────────────────────────────────────────────────
   Non è una seconda palette: è la stessa, girata. Il navy #0A2540 è già la
   seconda pelle del sito — hero, footer, passaporto, colonna della mappa —
   quindi il tema scuro non introduce colori nuovi, sposta quelli che ci sono.

   Tre gradini di superficie, perché una card deve staccarsi dalla carta e
   una card sollevata dalle altre. Misurati col bianco #F5F5F7 sopra:
   carta 15.29:1 · card 13.39:1 · sollevata 11.85:1.

   ⚠️ IL BLU DI MARCA NON SI LEGGE SUL SCURO. #007AFF su #122A44 fa 3.63:1 —
   sotto soglia, esattamente come su bianco faceva 4.02. È la stessa lezione
   al contrario: il colore del marchio non è un colore da leggere. Sul fondo
   scuro il gemello è più CHIARO invece che più scuro: #4DA3FF, 5.55:1.
   Corallo, oro e verde passano come sono (5.12, 9.28, 6.57).

   Due interruttori: `prefers-color-scheme` per chi ha il telefono già scuro,
   e `[data-tema]` sull'elemento radice per una scelta esplicita — se un
   giorno si aggiunge il pulsante, il CSS è già pronto e non va toccato. */
/* ACCESO, dal 10/08/2026 — e c'e' voluto un giro in piu' per arrivarci.
   Il tema segue il sistema, e chi vuole il chiaro comunque mette
   <html data-tema="chiaro">.
   Il guardiano misura ENTRAMBI i temi a ogni push (11 pagine × 2 misure × 2
   temi) e verifica che il tema si sia davvero applicato prima di dichiarare
   qualcosa: due volte, mentre lo costruivo, ha detto «pulito» misurando il
   tema chiaro due volte -- una perche' metteva l'attributo prima che <html>
   esistesse, l'altra perche' il conteggio veniva da un'esecuzione abortita.
   Il codice di uscita e' la verita'; il numero e' un commento. */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="chiaro"]){
    --paper:#0B1F35;        /* la carta */
    --surface:#122A44;      /* le card: 13.39:1 col bianco sopra */
    --ink:#F5F5F7;
    --muted:#8FA3B8;        /* 5.62:1 sulla card: secondario ma leggibile */
    --hair:rgba(255,255,255,.16);
    --hair-soft:rgba(255,255,255,.10);
    --line:rgba(255,255,255,.12);
    /* ⚠️ --cream NON si tocca: e' un colore di TESTO (34 usi contro 3 di
       fondo, e i tre fondi sono passati a --surface). Rimappandolo, ogni
       scritta chiara sulle sezioni scure diventava scura su scuro. */
    /* i gemelli da leggere si ribaltano: sul fondo scuro il blu va SCHIARITO */
    --teal-txt:#4DA3FF;     /* 5.55:1 sulla card */
    --teal-btn:#0069DB;     /* sfondo pieno con scritta bianca: resta valido */
    --ochre-txt:#FF8A63;
    --tbc:#E0A343;          /* «da confermare»: l'ambra scura sparirebbe */
    --verif:#5FD39A;        /* la spunta della fonte, schiarita */
    --live-ink:#0B1F35;
    /* la sezione scura sale di un gradino o sparisce nella carta; il TESTO
       forte invece diventa chiaro. Due token, non uno. */
    --sec-dark:#183350;
    --teal-deep:#E8EFF7;
    --teal-darkest:#0B1F35;
    /* le ombre sul scuro non si vedono: si sostituiscono con un bordo */
    --sh:0 0 0 1px rgba(255,255,255,.07);
    --sh-hov:0 0 0 1px rgba(255,255,255,.14);
    color-scheme:dark;
  }
}
/* la stessa cosa, scelta a mano: identico blocco, innescato dall'attributo */
:root[data-tema="scuro"]{
  --paper:#0B1F35; --surface:#122A44;
  --ink:#F5F5F7; --muted:#8FA3B8;
  --hair:rgba(255,255,255,.16); --hair-soft:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.12);
  --teal-txt:#4DA3FF; --teal-btn:#0069DB; --ochre-txt:#FF8A63;
  --tbc:#E0A343; --verif:#5FD39A; --live-ink:#0B1F35;
  --sec-dark:#183350; --teal-deep:#E8EFF7; --teal-darkest:#0B1F35;
  --sh:0 0 0 1px rgba(255,255,255,.07);
  --sh-hov:0 0 0 1px rgba(255,255,255,.14);
  color-scheme:dark;
}

/* ══════════════════════════════════════════════════════════════════════
   TRE OMBRE E DUE TEMPI, non 57 e 45
   ──────────────────────────────────────────────────────────────────────
   Misurato: 57 ombre diverse per 104 usi, e 45 transizioni (.2s, .25s, .3s,
   .35s, .45s, .8s…). Nessuna sbagliata da sola; insieme non compongono un
   sistema, e il risultato è che gli elementi si muovono ognuno per conto
   suo. È la differenza fra un sito fatto bene e uno che sembra fatto bene.

   Qui si dichiarano i gradini. Le regole vecchie restano dove sono — non si
   riscrivono 104 dichiarazioni a colpo sicuro di notte — ma da adesso QUELLO
   CHE SI SCRIVE usa questi, e i token --sh/--sh-hov che già coprono 40 usi
   puntano ai gradini giusti. */
:root{
  --sh-1:0 1px 2px rgba(10,37,64,.06), 0 2px 8px rgba(10,37,64,.06);   /* appoggiato */
  --sh-2:0 4px 10px rgba(10,37,64,.07), 0 12px 28px rgba(10,37,64,.09); /* sollevato */
  --sh-3:0 10px 24px rgba(10,37,64,.10), 0 28px 60px rgba(10,37,64,.14);/* galleggiante */
  --t-fast:140ms;   /* reazione al tocco: deve sembrare istantanea */
  --t:240ms;        /* movimento normale */
  --t-slow:420ms;   /* qualcosa che entra o esce di scena */
  --ease:cubic-bezier(.2,.7,.3,1);   /* una curva sola per tutto */
}

/* ── SCROLL-SNAP sui due caroselli ──────────────────────────────────────
   La rail dei grandi nomi e la barra dei filtri scorrono in orizzontale e si
   fermavano a metà elemento: sul telefono è la cosa che fa sentire «pagina
   web» invece di «app». Due righe.
   `proximity` e non `mandatory`: con mandatory il dito non può più fermarsi
   dove vuole, e su una barra di filtri che si scorre per leggere è fastidioso.
   La rail delle card invece è fatta di oggetti: lì `start` su ogni card. */
.hn-rail{scroll-snap-type:x proximity;scroll-padding-left:var(--pad,20px)}
.hn-rail>*{scroll-snap-align:start}
.cat-bar .wrap{scroll-snap-type:x proximity;scroll-padding-left:var(--pad,20px)}
.cat-bar .chip{scroll-snap-align:start}
@media(prefers-reduced-motion:reduce){
  .hn-rail,.cat-bar .wrap{scroll-snap-type:none}
}

/* ── LA MAPPA, DI NOTTE ─────────────────────────────────────────────────
   Le tessere di OpenStreetMap sono chiare per costruzione: su una pagina
   scura sono un rettangolo che abbaglia. Non esiste un set scuro gratuito
   che possiamo usare senza cambiare fornitore, quindi si smorzano: si gira
   la luminosità e si desatura appena. Il risultato non è una mappa notturna
   disegnata apposta — è una mappa che non ti spara in faccia alle undici di
   sera, che è quello che serve.
   I PIN restano fuori dal filtro: sono nostri, e i loro colori sono già
   tarati. Il filtro si applica al solo strato delle tessere. */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="chiaro"]) .leaflet-tile-pane,
  :root:not([data-tema="chiaro"]) .map-fallback{
    filter:invert(.92) hue-rotate(180deg) saturate(.72) brightness(.94);
  }
}
:root[data-tema="scuro"] .leaflet-tile-pane,
:root[data-tema="scuro"] .map-fallback{
  filter:invert(.92) hue-rotate(180deg) saturate(.72) brightness(.94);
}

/* ── il pulsante del tema ───────────────────────────────────────────────
   Sta accanto alle lingue perché è la stessa cosa: una preferenza, non una
   funzione del sito. Mostra il simbolo di DOVE VAI, non di dove sei — se
   ora è chiaro vedi la luna, perché quello è ciò che ottieni toccando. */
.tema{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;color:inherit;flex:none;
  transition:background var(--t-fast,140ms) var(--ease,ease), transform var(--t-fast,140ms)}
.tema:hover{background:rgba(255,255,255,.12)}
.hdr.scrolled .tema:hover{background:rgba(10,37,64,.07)}
.tema:active{transform:scale(.92)}
.tema .t-luna{display:block}
.tema .t-sole{display:none}
.tema.e-scuro .t-luna{display:none}
.tema.e-scuro .t-sole{display:block}
@media(max-width:860px){ .tema{width:32px;height:32px} }

/* ══════════════════════════════════════════════════════════════════════
   TELEFONO: LA RIGA NON RIPETE SE STESSA
   ──────────────────────────────────────────────────────────────────────
   Misurato sulla home il 13/08/2026, a 390px, in un Chrome vero:
   · «In corso» compariva DUE volte su tutte e sei le card — la pastiglia
     sopra la miniatura piu' il chip nell'eyebrow, che sono la stessa
     stringa (in eventCard() `badge` E' `st.label` quando c'e');
   · sulla Sagra del Salame c'era anche «Caselle in Pittari» due volte,
     nell'eyebrow e come prima cosa della riga del luogo, a venti pixel
     di distanza.
   Quelle ripetizioni non erano gratis: l'eyebrow e' una riga sola con
   `text-overflow:ellipsis`, chiedeva 296px e ne aveva 220, e a cadere
   fuori era la CATEGORIA — l'unica delle cinque etichette che non fosse
   scritta da nessun'altra parte. Si buttava l'informazione nuova per
   tenere in piedi due echi.
   Su desktop restano tutte: la' la card e' una colonna larga, l'eyebrow
   ha spazio e la pastiglia sulla foto sta lontana dal testo.            */
@media(max-width:700px){
  .ecard .e-eyebrow .gia-sulla-foto,
  .ecard .e-eyebrow .gia-nel-luogo{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   TELEFONO: QUATTRO LINK NON VALGONO PIU' DEGLI EVENTI
   ──────────────────────────────────────────────────────────────────────
   IL NUMERO: la sezione «Scegli la tua sera» sono quattro collegamenti al
   catalogo filtrato. Ognuno era una card da rivista alta 444px, di cui
   263 di fotografia: 1.776px in tutto, cioe' 2,1 schermate di telefono.
   Nella stessa pagina «Cosa c'e' stasera» — gli eventi veri, la ragione
   per cui uno e' venuto — ne prende 1,6. Quattro voci di menu pesavano
   piu' del contenuto.
   Le foto ora sono la copertina del prossimo evento di quella categoria
   (catFoto in index.html). A 263px per voce restavano comunque troppo
   per un menu: il telefono non ha quello spazio.
   Stessa medicina gia' usata per le card evento: la RIGA. 88px, la foto
   resta ma piccola, il titolo e la frase restano interi. Da 1.776px a
   circa 390: due schermate rese agli eventi.
   Su desktop non cambia niente — la' la griglia di quattro card
   fotografiche sta su una riga sola e funziona.                          */
@media(max-width:700px){
  .cats{gap:10px}
  .cat{display:grid;grid-template-columns:88px 1fr;align-items:stretch;gap:0;border-radius:18px}
  .cat:hover{transform:none}
  .cat:active{transform:scale(.985);transition-duration:60ms}
  .cat figure{width:88px;height:100%;aspect-ratio:auto;border-radius:0;margin:0}
  .cat figure::after{display:none}      /* il velo scuro serviva al titolo sopra la foto */
  .cat:hover figure img{transform:none}
  .cat-body{padding:10px 13px;gap:2px;justify-content:center;min-width:0}
  .cat-body .num{display:none}          /* «01» e' ornamento, e la fila si conta da se' */
  .cat-body h3{font-size:1rem;line-height:1.2}
  .cat-body p{font-size:.78rem;line-height:1.32;margin:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* «Esplora →» dice che un link e' un link: e' il «Dettagli →» delle card,
     tolto per lo stesso motivo. La riga intera resta toccabile. */
  .cat-body .cat-go{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   TELEFONO: UNA PILLOLA SOLA NON PUO' ANDARE A CAPO
   ──────────────────────────────────────────────────────────────────────
   La barra della newsletter e' un CONTROLLO FUSO: campo e bottone dentro
   un'unica pillola, `border-radius:999px` e `overflow:hidden` che li tiene
   insieme. Funziona finche' stanno affiancati.
   Sotto i 520px pero' `.news-form` diventa `flex-direction:column`, e la
   pillola resta pillola: un riquadro di 350x103 con gli angoli arrotondati
   di 51px, dentro cui il campo — che e' un rettangolo — si fa tagliare i
   suoi quattro angoli dalla curva, e il bottone galleggia rientrato di 5px
   per lato. Non e' un bottone dentro una barra: e' una scatola dentro una
   scatola, e si vede che non era previsto.
   Andando a capo i due controlli non sono piu' fusi, quindi si SFUSANO
   davvero: due pastiglie una sopra l'altra, ciascuna con la sua forma.
   Il riscontro resta di colore e non di movimento — su un telefono non
   esiste l'hover e l':active e' gia' un cambio di tinta.                 */
@media(max-width:520px){
  .news-form{border-radius:0;background:transparent;box-shadow:none;overflow:visible;gap:10px}
  .news-form input[type=email]{background:var(--paper);border-radius:var(--r-pill);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);padding:15px 22px}
  .news-form .btn{margin:0}
}

/* ══════════════════════════════════════════════════════════════════════
   PRODOTTO 2026: home action-first, verifica visibile, serif vero
   ──────────────────────────────────────────────────────────────────────
   Token: --serif diventa un serif vero (finora valeva Inter come --sans:
   titoli e citazioni lo usavano già, cambia una riga e li prende tutti),
   più due fondi caldi per staccare senza nuovi colori accesi. */
:root{
  --paper-warm:#FAF6EE; --sand:#E7DAC0; --terra:#D96C47; --terra-txt:#A84426;
}
/* hero compatto: l'emozione resta (slider invariato), gli eventi arrivano
   subito. Era min-height:100svh: una schermata intera prima di un evento. */
.hero{min-height:clamp(380px,54svh,600px)}
.hero.center .hero-in{padding-bottom:clamp(96px,13vh,150px)}
/* card 16:9 su desktop; la riga mobile resta com'è (misurata il 09/08/2026,
   8 eventi per schermata: cambiarla sarebbe un regresso). */
@media(min-width:701px){ .ecard .emedia{aspect-ratio:16/9} }
/* verifica neutra: la fonte senza spunta. La spunta dice "ricontrollato",
   e senza data di controllo sarebbe una promessa. */
.verif.neutral{color:var(--muted)}
/* contatore stasera/weekend: vuoto = nascosto, come ogni contatore */
.now-count{margin:12px 0 0;font-size:1rem;color:var(--muted)}
.now-count b{color:var(--ink);font-size:1.15rem;margin-right:6px}
.now-count .sep{color:var(--line);margin:0 8px}
/* fascia organizzatori: banda navy in entrambi i temi, come l'hero */
.org-band{background:linear-gradient(150deg,#0A2540,#12365e);border-radius:var(--r-card);
  padding:clamp(22px,4vw,38px);display:flex;flex-wrap:wrap;gap:14px 26px;
  align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,.10)}
.org-band h2{color:#fff;margin:0 0 6px;font-size:clamp(1.4rem,3vw,2rem)}
.org-band p{color:rgba(255,255,255,.75);margin:0;max-width:52ch}
.org-band .org-cta{display:flex;gap:12px;flex-wrap:wrap}
/* campo testo nella searchbar home: riga intera sopra i filtri */
.s-text-row{grid-column:1/-1}
.s-text-row input{width:100%;font-size:1.05rem;padding:12px 4px}
/* bottom navigation mobile: 5 voci da 52px, safe-area, niente JS */
.bnav{display:none}
@media(max-width:700px){
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--surface);border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 24px rgba(10,37,64,.10)}
  .bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    min-height:52px;justify-content:center;color:var(--muted);font-size:.68rem;
    font-weight:600;letter-spacing:.4px;text-decoration:none;border-radius:12px}
  .bnav a .bi{font-size:1.25rem;line-height:1}
  .bnav a:active{background:rgba(0,0,0,.05)}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* ── Fix audit grafico 19/09/2026 ───────────────────────────────
   Solo override: styles.css non si tocca (regola del progetto). */

/* A1: la barra categorie sta sotto l'intestazione anche su desktop */
.cat-bar{top:64px}
/* A2: il focus visibile è ocra ovunque */
:focus-visible{outline-color:var(--ochre)}
/* A4: bianco su blu di marca non passa AA: gemello da bottone */
.vicino.on{background:var(--teal-btn);border-color:var(--teal-btn)}
.share-b.native{background:var(--teal-btn);border-color:var(--teal-btn)}
.cal-ev:hover{background:var(--teal-btn)}
/* A5: testi blu di marca su fondo chiaro: gemello da testo */
.news-ok{color:var(--teal-txt)}
.ev-side .r-link{color:var(--teal-txt)}
.fcard .fbody .flink{color:var(--teal-txt)}
/* A6: "Salvato" corallo su chiaro: gemello scuro */
.save.sv{color:var(--ochre-txt);border-color:var(--ochre-txt)}
/* A7: ocra di marca come testo: gemello scuro */
.fcard.cas .datechip b,.row.cas .row-date b,.ev-cd b,.day .dl em{color:var(--ochre-txt)}
/* A8: --green-ok non esiste: il badge live usa il verde verificato */
.hn-badge.live{background:var(--verif);color:var(--live-ink,#fff)}
/* A9: numeri classifica leggibili anche in tema scuro */
.so-tend-l li::before{color:color-mix(in srgb,var(--ink) 22%,transparent)}
/* A10: etichette bottom-nav al pavimento tipografico */
.bnav a{font-size:.7rem;letter-spacing:1.6px}
.bnav a:active{transition-duration:60ms}
/* A3: transizioni mirate, mai `all` (stessa durata, stesse proprietà vere) */
.btn-tickets,.chip,.save,.langs button,.bell-btn,.view-tog button,.cal-nav,
.cal-ev,.tabs button,.nb-card,.nb-maps,.aip-ev{
  transition:color .2s ease,background-color .2s ease,border-color .2s ease,
  box-shadow .2s ease,transform .2s ease,opacity .2s ease}
/* B2: le pillole piccole non si alzano: velo di colore */
.qp:hover{box-shadow:var(--sh);transform:none}
.so-tag{box-shadow:none}
.so-bolla:hover .so-b-s{transform:none;box-shadow:none}
/* B3: una sola spaziatura, 1.6px */
.news-ok{letter-spacing:1.6px}
.hs-kicker{letter-spacing:1.6px}
.hero-ctx{letter-spacing:1.6px}
/* B4: hover senza hex scritti a mano: reggono a palette e tema scuro */
.news-form .btn:hover{background:color-mix(in srgb,var(--ochre),black 8%)}
.news-form .btn:active{background:color-mix(in srgb,var(--ochre),black 20%)}
.so-tag.brand:hover{background:color-mix(in srgb,var(--ochre),black 8%)}
.so-tag.brand:active{background:color-mix(in srgb,var(--ochre),black 20%)}
/* B5: cuore bianco su corallo 2.85:1 → navy fisso come le chip oro */
.fav.sv{color:var(--ink-fixed)}
/* B6: WhatsApp: stessa famiglia, AA passato */
.share-b.wa{background:#137A2B;border-color:#137A2B}
.share-b.wa:hover{background:color-mix(in srgb,#137A2B,black 10%)}
/* B7: rete di sicurezza per categorie senza colore */
.ctag{background:var(--teal-btn)}
/* B8: --rosa non esiste: riusa l'ocra da testo */
.ev-panel .p-int,.e-eyebrow .int{color:var(--ochre-txt)}
/* B10: :active a 60ms dove mancava */
.view-tog button:active,.mrow:active,.bp-cta:active,.langs button:active{transition-duration:60ms}
/* B11: date di Natale da confermare — seconda banda organizzatori in home */
.org-dc{margin-top:14px}
.dc-list{list-style:none;margin:16px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:7px 26px}
.dc-list li{color:#fff;font-size:.95rem}
.dc-list li span{color:rgba(255,255,255,.65)}
/* B12: hero di Natale — stesso navy, bagliore caldo invece che blu.
   Solo token esistenti (ocra/oro mescolati al navy via color-mix):
   niente palette stagionale, a gennaio basta togliere la classe. */
.cs-hero-natale{background:linear-gradient(160deg,#0A2540 0%,
  color-mix(in srgb,var(--ochre) 26%,#0A2540) 58%,
  color-mix(in srgb,var(--gold) 30%,#0A2540) 135%)}