/* ═══ 1. TICKER ═══════════════════════════════════════════════════════════ */
.ticker{background:var(--verde-acqua);color:var(--nero-verde);
  border-block:2px solid var(--nero-verde);padding-block:.7rem;padding-inline-end:1rem;
  display:flex;align-items:center;gap:.75rem}
.ticker__viewport{flex:1;min-width:0;overflow:hidden}
.ticker__track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.ticker__track.is-paused{animation-play-state:paused}
.ticker__g{display:flex;flex-shrink:0}
.ticker__i{display:inline-flex;align-items:center;gap:1.5rem;padding-inline:1.5rem;
  font-weight:700;font-size:.9rem;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.ticker__i::after{content:"✦";color:var(--terracotta);font-size:.95rem}
@keyframes marquee{to{transform:translateX(-50%)}}
/* Il reference ha due ticker a velocità diverse: 50 px/s in alto, 100 in basso.
   Stesso percorso, metà del tempo. */
.ticker--fast .ticker__track{animation-duration:17s}
.ticker--fast{margin-block:0}
.ticker__viewport:hover .ticker__track{animation-play-state:paused}
/* Bottone pausa/riproduci: unico controllo raggiungibile da tastiera/touch
   per un contenuto che si muove per più di 5s in autonomia (SC 2.2.2) */
.ticker__toggle{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;min-width:32px;border-radius:50%;
  background:var(--nero-verde);color:var(--verde-acqua);
  transition:background var(--dur) var(--ease)}
.ticker__toggle:hover{background:var(--teal-scuro)}
.ticker__icon-play{display:none}
.ticker__toggle[aria-pressed="true"] .ticker__icon-pause{display:none}
.ticker__toggle[aria-pressed="true"] .ticker__icon-play{display:block}
/* Il fondo verde-acqua del ticker non regge 3:1 né con l'anello chiaro né
   con quello corallo di base.css (misurato: vedi report accessibilità) */
.ticker :focus-visible{outline-color:var(--nero-verde);box-shadow:0 0 0 5px var(--nero-verde) !important}

/* ═══ 2. HEADER ═══════════════════════════════════════════════════════════ */
.hdr{display:flex;align-items:flex-start;gap:clamp(1rem,.4rem + 2vw,2.4rem);padding-block:1.5rem}
.hdr__date,.hdr__count,.hdr__place{flex:1 1 0;min-width:0}
.hdr__nav{flex:0 0 auto}
.hdr__date,.hdr__place{font-size:.92rem;font-weight:600;line-height:1.45;flex-shrink:0}
.hdr__date strong{font-size:1rem}
/* countdown in header: etichetta sopra, cifre sotto — come il reference */
.hdr__count{flex-shrink:0}
.cd__lbl{font-size:.92rem;font-weight:600;line-height:1.45;color:var(--verde-nero)}
.cd__n{font-size:.92rem;font-weight:600;line-height:1.45;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.hdr__nav{display:flex;gap:1.8rem;margin-left:auto;
  font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.hdr__nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;
  border-bottom:2px dotted var(--teal-medio);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.hdr__nav a:hover{border-bottom-color:var(--terracotta);color:var(--terracotta)}
.hdr__burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:50%;
  background:var(--verde-acqua);place-items:center}
.hdr__burger span{display:block;width:20px;height:2.5px;background:var(--nero-verde);
  box-shadow:0 -6px 0 var(--nero-verde),0 6px 0 var(--nero-verde)}

/* ═══ 3. HERO ═════════════════════════════════════════════════════════════ */
.hero{padding-top:.5rem;padding-bottom:0}
/* la larghezza è il minimo fra il container e quella che l'altezza disponibile
   consente: così su schermi bassi il logo si riduce invece di sfondare la piega.
   4.78 è il rapporto del wordmark senza dicitura. */
/* Come nel reference il wordmark occupa tutta la misura: la larghezza comanda,
   l'altezza fa da tetto solo sugli schermi bassi, dove 100%% non ci starebbe. */

.hero__cell{background:var(--verde-nero);color:var(--crema);border-radius:var(--r-lg);
  min-width:108px;padding:.9rem .6rem .8rem;text-align:center}
.hero__cell b{display:block;font-family:var(--display);font-size:2.6rem;line-height:1}
.hero__cell i{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;opacity:.8}

/* ═══ 4. BYLINE ═══════════════════════════════════════════════════════════ */
.byline__l b{display:block;font-size:1.4rem;letter-spacing:-.01em;text-transform:none;
  color:var(--nero-verde)}

/* ═══ 5. STICKER HEADLINE ═════════════════════════════════════════════════ */
.claim{position:relative;padding-top:clamp(1rem,7vh,6rem)}
.claim__row{display:flex}

/* nth-of-type, non nth-child: il primo figlio di .claim è l'<svg> delle linee,
   quindi nth-child sposta ogni regola di una riga. */
.claim__row:nth-of-type(2){margin-left:-.5rem}
.claim__row:nth-of-type(3){margin-left:1.6rem}

/* Impilamento come nel reference: la riga PIÙ IN BASSO sta davanti. Così la
   sovrapposizione copre sempre il padding inferiore della riga sopra e mai le
   sue maiuscole — è quello che permette di accavallare davvero i blocchi.
   Il padding è asimmetrico (poco sopra, molto sotto) proprio per offrire quel
   margine da coprire: la sovrapposizione vale quanto il padding inferiore. */
.claim .sticker{position:relative;
  font-size:clamp(1.8rem,.2rem + 2.9vw + 3.7vh,6rem);
  line-height:.80;padding:.08em .28em .30em;border-radius:.10em}
.claim__row:nth-of-type(1) .sticker{z-index:1;rotate:-2.4deg}
.claim__row:nth-of-type(2) .sticker{z-index:2;rotate:1.6deg;margin-top:-.28em}
.claim__row:nth-of-type(3) .sticker{z-index:3;rotate:-1.1deg;margin-top:-.30em}

/* Colore: blocco e lettere fanno coppia, alternando temperatura e peso invece
   di tre fondi chiari con lo stesso testo scuro. */
.claim__row:nth-of-type(1) .sticker{background:var(--verde-acqua);color:var(--blu-notte)}
.claim__row:nth-of-type(2) .sticker{background:var(--terracotta);color:var(--crema)}
.claim__row:nth-of-type(3) .sticker{background:var(--ocra);color:var(--teal-scuro)}

.claim__by{margin-top:clamp(.6rem,1.5vh,1.4rem);margin-left:.6rem}
.claim__sub{font-family:var(--display);font-size:1.15rem;letter-spacing:.06em;
  text-transform:uppercase;margin-top:1.5rem;margin-left:.6rem;color:var(--verde-nero)}
.speed{position:absolute;left:-1.6rem;top:2.8rem;width:110px;height:150px;
  stroke:var(--teal-medio);stroke-width:5;stroke-linecap:round;fill:none}

/* ═══ 8 / 12. SPONSOR ═════════════════════════════════════════════════════ */
.sponsors{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.5rem,1rem + 3vw,3.5rem)}
.sponsors img{width:auto;height:auto;
  max-height:clamp(46px,2.4rem + 2.4vw,74px);max-width:clamp(110px,7rem + 5vw,190px);
  object-fit:contain;
  /* Niente grayscale: il kit PCC vieta di alterare i colori dei loghi
     («I loghi dovranno mantenere i colori e le proprietà originali»), e sulla
     locandina sono tutti a colori pieni. Il respiro lo dà la scala, non il filtro. */
  opacity:.88;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.sponsors img:hover{opacity:1;transform:translateY(-2px)}
.sponsors--sm img{max-height:clamp(34px,1.8rem + 1.8vw,54px);max-width:clamp(90px,5rem + 4vw,150px)}

/* ═══ 10. CARD SEZIONI (angolo gigante + blob) ════════════════════════════ */
.grid-sez{display:grid;grid-template-columns:1fr;gap:1.4rem}
@media(min-width:560px){.grid-sez{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1140px){.grid-sez{grid-template-columns:repeat(4,1fr)}}
/* Meno riquadri: nel reference il box colorato è riservato agli sticker di
   parola, mentre titoli e paragrafi stanno su fondo pagina. Le card perdono il
   fondo pieno e tengono la gerarchia con un filetto di colore e la scala. */
.card{position:relative;display:flex;flex-direction:column;
  justify-content:flex-start;gap:.7rem;min-height:0;padding:1.4rem 0 0;
  border-top:3px solid currentColor;
  transition:transform var(--dur) var(--ease)}
.card:hover{transform:translateY(-4px)}
.card__blob{display:none}
.card h3,.card p,.card .card__n{position:relative;z-index:1}
.card h3{max-width:100%;font-size:clamp(1.4rem,1rem + 1.35vw,1.95rem);
  hyphens:auto;overflow-wrap:break-word}
.card p{font-size:1.05rem;line-height:1.5;max-width:34ch;margin-top:.2rem}
.card__n{font-family:var(--display);font-size:1.05rem;letter-spacing:.04em}
.card--a{color:var(--teal-scuro)}   .card--a h3{color:var(--nero-verde)}
.card--b{color:var(--teal-medio)}  .card--b h3{color:var(--nero-verde)}
.card--c{color:var(--terracotta)}  .card--c h3{color:var(--bordeaux)}
.card--d{color:var(--ocra)}        .card--d h3{color:var(--nero-verde)}
.card p{color:var(--verde-nero)}
/* Il numero NON eredita il colore del filetto: teal medio e ocra su panna
   danno 2.27:1 e 1.50:1, sotto la soglia AA per il testo piccolo.
   L'accento resta sul filetto, il numero prende un colore leggibile. */
.card__n{color:var(--verde-nero);opacity:1}

/* ═══ 11. PROGRAMMA ═══════════════════════════════════════════════════════ */
.stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,1rem + 4vw,4.5rem);margin:2.5rem 0 3rem}
.stat b{display:block;font-family:var(--display);font-size:clamp(2.6rem,1.5rem + 3.4vw,4.6rem);
  line-height:.9;color:var(--terracotta)}
.stat i{font-style:normal;font-size:.85rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--verde-nero)}
/* Titolo su due blocchi inclinati e sovrapposti, come le parole-sticker del
   reference: il secondo rientra e ruota in senso opposto. */
.prog__titolo{display:flex;flex-direction:column;align-items:flex-start;margin:0}
/* Nessun font-size proprio: eredita quello di .sticker, lo stesso dei titoli
   di sezione. Con l'override erano 67px contro 81, e 32 contro 48 su mobile. */
.prog__titolo .sticker{position:relative}
.prog__titolo .sticker:first-child{rotate:-2.2deg;z-index:1}
.prog__titolo .sticker:last-child{rotate:1.6deg;margin:-.22em 0 0 1.4rem;z-index:2}

.grid-prog{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.3rem}
/* cinque sere, cinque colonne: 4+1 lasciava un buco di tre quarti di riga */
@media(min-width:1180px){
  .grid-prog{grid-template-columns:repeat(5,1fr);gap:1rem}
  .grid-prog   .grid-prog   .grid-prog }
.badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.6rem}
.badge{font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:.4rem .85rem;border-radius:var(--r-pill)}
.badge--ospite{background:var(--bordeaux);color:var(--ocra)}
.badge--premi{background:var(--ocra);color:var(--nero-verde)}
.badge--72{background:var(--verde-acqua);color:var(--nero-verde)}
.badge--fuori{background:var(--ghiaccio);color:var(--teal-scuro)}

/* ═══ 13. DOVE SIAMO ══════════════════════════════════════════════════════ */
/* .mappa, .mappa__grid, .mappa__pin sono ora in css/map.css (mappa reale) */
.dove{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,1rem + 4vw,4rem);align-items:center}

/* ═══ 15. GALLERY ═════════════════════════════════════════════════════════ */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(130px,14vw,195px);gap:1rem}
.gal figure{overflow:hidden;border-radius:var(--r-xl);background:var(--verde-acqua)}
.gal figure:first-child{grid-column:span 2;grid-row:span 2;
  border-radius:var(--r-xl) var(--r-giant) var(--r-xl) var(--r-xl)}
.gal img{width:100%;height:100%;min-height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.gal figure:hover img{transform:scale(1.05)}

/* ═══ locandina ═══════════════════════════════════════════════════════════ */
.loc{display:grid;grid-template-columns:minmax(0,330px) 1fr;
  gap:clamp(2rem,1rem + 4vw,3.5rem);align-items:center}
.loc img{width:100%;border-radius:var(--r-xl);box-shadow:var(--shadow-hard)}

/* ═══ 16. PANNELLO 72 ORE ═════════════════════════════════════════════════ */
.panel{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,1rem + 4vw,3.5rem);
  align-items:center;padding:clamp(2.2rem,1rem + 4vw,4rem);
  /* Fondo rosso con i testi in crema: sul verde acqua il pannello si confondeva
     con il resto della pagina e il numero perdeva forza. */
  background:var(--corallo-ui);color:var(--crema);
  border-radius:var(--r-xl) var(--r-pill) var(--r-xl) var(--r-xl)}
/* panna e non crema per il testo corrente: crema su corallo dà 4.18:1,
   appena sotto la soglia per il testo piccolo. Il panna arriva a 4.86. */
.panel h2{color:var(--crema)}
.panel p,.panel li,.panel .steps,.panel span{color:var(--panna)}
/* Su fondo scuro il focus va chiaro, o sparisce */
.panel :focus-visible{outline-color:var(--crema);box-shadow:0 0 0 5px var(--bordeaux) !important}
.panel__n{font-family:var(--display-3d);font-size:clamp(3.6rem,1rem + 11vw,9rem);
  line-height:.84;color:var(--crema);text-transform:uppercase}
.steps{display:grid;gap:.55rem;margin:1.4rem 0 1.8rem}
/* Sul fondo rosso i numeri erano rosso scuro su rosso: quasi invisibili.
   Ora sono in ocra piena, che stacca senza gridare. Il pulsante prende il
   fondo crema con testo rosso — l'ombra dura scura sul rosso sporcava. */
.panel .steps b,.panel .steps .step__n{color:var(--ocra);opacity:1}
/* Testo bordeaux e non corallo sul pulsante chiaro: corallo su crema dava
   4.18:1 su un testo maiuscolo di 15px, sotto soglia. Bordeaux dà 8.8. */
.panel .pill{background:var(--crema);color:var(--bordeaux);box-shadow:none}
.panel .pill:hover,.panel .pill:focus-visible{background:var(--panna);
  box-shadow:-8px 8px 0 0 var(--bordeaux)}
.steps li{display:flex;gap:.9rem;align-items:baseline;font-size:1.12rem;font-weight:600}
.steps b{font-family:var(--display);color:var(--terracotta);font-size:1.25rem;min-width:1.9rem}

/* ═══ 17. ABOUT ═══════════════════════════════════════════════════════════ */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1rem + 4vw,4rem);align-items:center}
.about__q{font-family:var(--display);font-size:clamp(1.5rem,1rem + 2vw,2.6rem);line-height:1.06;
  text-transform:uppercase;color:var(--verde-nero)}

/* ═══ 18. COSA TROVI ══════════════════════════════════════════════════════ */
.grid-info{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:560px){.grid-info{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1140px){.grid-info{grid-template-columns:repeat(4,1fr)}}
.info{padding:1.3rem 0 0;border-top:2px solid var(--ocra);color:var(--nero-verde);
  display:flex;flex-direction:column;gap:.5rem;min-height:0}
.info:nth-child(2){border-top-color:var(--teal-medio)}
.info:nth-child(3){border-top-color:var(--terracotta)}
.info:nth-child(4){border-top-color:var(--bordeaux)}
.info b{font-family:var(--display);font-size:2.3rem;line-height:.95;color:var(--bordeaux)}
.info p{font-size:1.08rem;line-height:1.5;margin-top:auto}

/* ═══ 19. RESTA AGGIORNATO ════════════════════════════════════════════════ */
.news{background:var(--verde-nero);color:var(--crema);border-radius:var(--r-xl);
  padding:clamp(2.2rem,1rem + 4vw,3.6rem);text-align:center}
.news .h2{color:var(--ocra)}
.news__f{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
.news__f{flex-wrap:wrap}
.news__consent{display:flex;align-items:flex-start;gap:.6rem;order:3;flex-basis:100%;
  max-width:min(42ch,100%);margin:.2rem auto 0;text-align:left;
  font-size:.9rem;line-height:1.45;color:var(--ghiaccio)}
.news__consent input[type=checkbox]{flex:none;width:24px;height:24px;margin-top:0;
  accent-color:var(--corallo-ui)}
.news__consent a{color:var(--ocra)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.news input[type=email]{padding:1.15rem 1.6rem;border-radius:var(--r-pill);border:2px solid var(--teal-medio);
  background:var(--panna);color:var(--nero-verde);min-width:min(320px,100%);font:inherit;font-size:.9rem}
.news input[type=email]::placeholder{color:var(--teal-scuro)}
.news input[type=email]{font-size:1.05rem}

/* ═══ 20. FOOTER ══════════════════════════════════════════════════════════ */
.foot{background:var(--bordeaux);color:var(--ocra);padding-top:var(--space-section);overflow:hidden}
.foot a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;
  border-bottom:2px dotted currentColor}
.foot a:hover{color:var(--crema);border-bottom-color:var(--crema)}
.foot__top{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2.4rem 2rem}
.foot__lbl{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ocra);margin-bottom:.7rem}
.foot__addr{font-size:1.05rem;line-height:1.6}
.foot__addr a{display:inline-flex;align-items:center;min-height:44px}
.foot__legal{margin-top:2.5rem;font-size:.9rem;color:var(--sabbia);line-height:1.7}
/* Il wordmark va attaccato al bordo inferiore. Il 14% precedente valeva 38px
   a 1440 ma solo 10px a 390, dove restava un vuoto visibile: la quota è in
   percentuale dell'altezza dell'immagine, che scala con la larghezza.
   Al 24% le lettere toccano il taglio a ogni formato. */
/* 2.5% e non di più: a 0 il fondo dell'immagine coincide col fondo del footer,
   ma il viewBox dell'SVG ha ~6px di margine interno sotto le lettere, che
   lasciavano un filo di vuoto. Il 2.5% lo assorbe restando proporzionale a
   ogni larghezza. Spingendola oltre (14% e 24%, provati) il taglio passava in
   mezzo alle lettere e leggeva come un errore, non come uno sbordo voluto. */
.foot__wm{margin-top:2rem;translate:0 2.5%}
.foot__wm img{width:100%;opacity:.95}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════ */
@media(max-width:1000px){
  .dove,.about,.panel,.loc{grid-template-columns:1fr}
  .panel{border-radius:var(--r-xl) 90px var(--r-xl) var(--r-xl)}
}
@media(max-width:560px){
  /* a colonna singola lo space-between apriva un vuoto morto fra numero e titolo */
  .card{min-height:0;gap:.9rem;justify-content:flex-start}
  .card__blob{width:96px;height:96px}
}
@media(max-width:720px){
  .speed{display:none}
  .hdr__nav{display:none}
  .hdr__burger{display:grid}
  .hdr .pill{display:none}
  /* Su mobile il reference impila le voci dell'header, una per riga a tutta
     larghezza. A tre colonne su 390px l'indirizzo andava a sei righe. */
  .hdr{flex-wrap:wrap;align-items:center;gap:.5rem 1rem;row-gap:.5rem}
  /* Data e indirizzo allineati a destra, incolonnati: la data sta sulla riga
     del logo e l'indirizzo su quella sotto a tutta larghezza, quindi il bordo
     destro è lo stesso per entrambi (il panino qui è già nascosto, ≤760px). */
  .hdr__date{flex:1 1 auto;order:1;text-align:right}
  .hdr__burger{order:2;margin-left:auto}
  .hdr__count{flex:0 0 100%;order:3;display:flex;align-items:baseline;gap:.6rem}
  .hdr__place{flex:0 0 100%;order:4;text-align:right}
  .gal{grid-template-columns:repeat(2,1fr)}
  /* La prima foto si sovrapponeva alle altre: aspect-ratio 16/10 le dava
     un'altezza maggiore della riga che occupava. Ora occupa due righe e
     l'altezza gliela danno quelle, senza rapporto forzato. */
  .gal figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .hero__cell{min-width:70px}
}

/* ── Hero: claim a sinistra, targhetta a destra (struttura del reference) ── */
.hero__row{position:relative;display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(1.5rem,1rem + 3vw,3.5rem)}
.hero__row .claim{flex:1 1 auto;min-width:0}

/* Targhetta hero — forma, dimensione e posizione prese dal reference:
   203×272, `border-radius:16px 16px 200px 200px` (spigoli vivi sopra,
   arrotondata sotto), padding 24/40/64, nessuna ombra e nessuna rotazione.
   Sta 32px dentro il bordo destro della misura, davanti all'arco, e sborda
   una ventina di pixel sotto la piega — come la loro. Il colore resta il
   nostro: il bianco loro stacca sul rosa, sul panna sparirebbe. */
.tag72{position:absolute;right:32px;bottom:26px;z-index:9;
  width:203px;min-height:272px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;gap:1rem;
  padding:24px 28px 64px;margin:0;
  background:var(--corallo-ui);color:var(--panna);
  border-radius:16px 16px 200px 200px}
.tag72__ico{fill:currentColor;opacity:.92;flex:0 0 auto}
.tag72__h{font-family:var(--display);text-transform:uppercase;line-height:.95;
  font-size:1.75rem}
.tag72__s{font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:.68rem;line-height:1.3}

@media(max-width:760px){
  .hero__row{flex-direction:column;align-items:flex-start}

  /* La targhetta si ancora alla hero, non alla riga del claim che ora sta in
     alto: deve restare in basso a destra. Più corta di prima. */
  .tag72{right:14px;bottom:14px;width:126px;min-height:158px;
    padding:12px 11px 34px;gap:.35rem}
  .tag72__ico{width:26px;height:26px}
  .tag72__h{font-size:.98rem}
  .tag72__s{font-size:.56rem}

  /* Niente menu a panino: sul telefono l'header porta già date e luogo, e le
     voci del menu sono le stesse ancore che la pagina attraversa scorrendo. */
  .hdr__burger{display:none!important}
  #drawer{display:none!important}

}

/* Programma — variante C (ticket 005): pillola ghost accanto al titolo con chip
   che dichiara il formato. Solo contorno: il download non è la conversione della
   pagina, quindi non compete con «Iscriviti al 72 Ore» in corallo pieno. */
.prog__head{display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap}
.prog__pdf{gap:.55rem;padding:.85rem 1.5rem;font-size:.85rem}
.chip-pdf{display:inline-flex;align-items:center;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ghiaccio);color:var(--teal-scuro);
  padding:.28rem .6rem;border-radius:var(--r-pill)}

/* Sotto gli 800px di altezza non ci stanno insieme wordmark grande, parole grandi
   e aria generosa: si cede sull'aria e un po' sulle parole, non sul wordmark. */
/* Sotto i 760px la colonna è unica: le parole scendono di un gradino
   per lasciare slack, altrimenti la hero chiude esatta a filo viewport. */
@media (max-width:760px){
  .claim .sticker{font-size:clamp(2rem,.2rem + 3.4vw + 4.4vh,4.4rem)}
}
@media (max-height:880px) and (min-width:761px){
  .claim{padding-top:clamp(.4rem,1.6vh,1.1rem)}
  .claim__by{margin-top:.4rem;font-size:.76rem}
  .claim__by b{font-size:1.1rem}
      .claim .sticker{font-size:clamp(2rem,.2rem + 3.2vw + 4.2vh,6.4rem)}
  .sticker{padding:.1em .26em .14em}
}

.tag72{position:relative;z-index:2}

/* Il fondo non è un rettangolo con il bordo curvo: nel reference è una macchia
   organica in SVG larga 2118px che sborda a destra, mentre il rettangolo dietro
   resta coperto dal fondo pagina. Qui è la stessa forma, stesso path. */
/* max-width:100% del reset la schiaccerebbe a 1440: va scavalcato, perché la
   macchia deve sbordare a destra come nel reference (2118px su 1440 di finestra).
   Vista intera invece che tagliata cambierebbe la composizione. */

.dopo-fascia{position:relative;z-index:2;background:var(--panna)}

@media (max-width:760px){
      }

/* ── Fasce loghi, stessa logica della locandina ────────────────────────────
   Cinque livelli distinti, ciascuno con la propria etichetta: il trittico del
   bando con la dicitura obbligatoria, chi organizza, e i tre livelli
   commerciali. La gerarchia è contrattuale, non estetica: non si appiattisce. */
.loghi-dicitura{font-family:var(--ui);font-size:clamp(.72rem,.68rem + .16vw,.82rem);
  font-weight:600;line-height:1.45;text-align:center;color:var(--verde-nero);
  margin:0 auto clamp(1rem,.8rem + .9vw,1.7rem);max-width:52ch}
/* Una riga sola: niente ritorno a capo, il respiro fra i due gruppi lo dà uno
   stacco esplicito invece di una seconda riga. */
.sponsors--bando{flex-wrap:nowrap;gap:clamp(.7rem,.4rem + 1.2vw,1.7rem)}
.loghi-stacco{width:clamp(.8rem,2vw,2.6rem);flex:0 0 auto}
/* SIAE in co-branding chiede un filetto verticale di separazione alto quanto il logo */
.loghi-filetto{width:1px;align-self:stretch;background:var(--verde-nero);opacity:.28}
/* Undici marchi su una riga: la larghezza disponibile decide la scala, quindi
   il tetto qui è più basso di quello dei blocchi normali. */
.sponsors--fila{flex-wrap:nowrap;gap:clamp(.5rem,.3rem + .9vw,1.3rem)}
.sponsors--fila img{max-height:clamp(26px,1.3rem + 1.5vw,44px);
  max-width:clamp(62px,3.4rem + 3.2vw,112px)}
/* BluBay: nel suo file il marchio occupa poco più di metà tela, il resto è
   payoff e marchi partner. A tetto uguale rende quindi più piccolo dei pari,
   e va compensato sul singolo logo. */
.sponsors img[src*="blubay"]{max-height:calc(1.25 * clamp(26px,1.3rem + 1.5vw,44px));
  max-width:calc(1.25 * clamp(62px,3.4rem + 3.2vw,112px))}

/* ── Hero illustrata ───────────────────────────────────────────────────────
   L'illustrazione della locandina riempie la hero. Il logo scende a marchio
   piccolo in alto a sinistra: non è più lui a reggere la scena, la regge
   l'illustrazione. Claim in basso a sinistra, targhetta in basso a destra. */
.hero--illustrata{position:relative;
  min-height:min(calc(100svh - var(--h-sopra, 166px)), 940px);
  /* Aria sotto il claim: senza, le tre parole toccavano il bordo inferiore.
     Il padding sta dentro la min-height (border-box), quindi la prima
     schermata resta esattamente 100svh e a salire è il contenuto. */
  padding-bottom:clamp(1.1rem,3.4vh,3rem);
  display:flex;flex-direction:column}
/* width:100% necessario: dentro un contenitore flex i margini automatici
   della .wrap la centrano restringendola invece di stenderla. */
/* z-index:1 necessario: senza, un ::before assoluto (posizionato) stacca
   comunque SOPRA un elemento statico come .wrap, coprirebbe il claim. */
.hero--illustrata > .wrap{position:relative;z-index:1;
  display:flex;flex-direction:column;flex:1 1 auto;width:100%}

/* Scurisce solo la porzione hero (non l'header, non la fascia): dove il claim
   e la targhetta stanno sopra la locandina, il box colorato e il testo bianco
   perdevano risalto contro un'illustrazione altrettanto chiara e trafficata.
   Più scuro verso il basso, dove i due elementi si appoggiano. */
.hero--illustrata::before{content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(20,24,20,0) 0%,
    rgba(20,24,20,.24) 42%,
    rgba(20,24,20,.46) 100%)}

/* Il claim scende in fondo, sopra l'illustrazione */
.hero--illustrata .hero__row{margin-top:auto;align-items:flex-end}
.hero--illustrata .claim{padding-top:0}

/* ── Testata: la locandina è il fondo di header e hero insieme ─────────────
   L'header non ha più la sua fascia panna, ci sta sopra. La leggibilità la
   dà un velo sfumato che parte opaco in alto e svanisce: un fondo pieno
   coprirebbe l'illustrazione, una sfumatura la lascia vedere. */
/* ── Prima schermata ───────────────────────────────────────────────────────
   Lo sfondo non avvolge più ticker/header/hero: sta dietro, in posizione
   assoluta. Avvolgerli spezzava <main>, che il browser chiudeva sul </div>
   lasciando fuori quasi tutte le sezioni.
   L'altezza è quella della prima schermata: 100svh, con un tetto perché sui
   monitor molto alti una hero da 1200px non si guarda. --h-sopra la misura il
   JS (ticker + header vanno da 166 a 255px secondo la larghezza), con un
   ripiego in CSS se il JS non parte. */
.sfondo-testata{position:absolute;top:0;left:0;right:0;z-index:0;
  height:min(100svh, calc(var(--h-sopra, 166px) + 940px));
  overflow:hidden;pointer-events:none}
.ticker,body > header,body > main,body > .foot{position:relative;z-index:1}
.testata__sfondo{position:absolute;inset:0;display:block}
/* La locandina intera è verticale (0.703) e copre header, hero e fascia foto:
   l'inquadratura parte dall'alto, dove c'è il cielo dietro l'header. */
.testata__sfondo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.testata__velo{position:absolute;inset:0 0 auto;height:clamp(190px,26vh,300px);z-index:1;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--panna) 94%, transparent) 0%,
    color-mix(in srgb, var(--panna) 78%, transparent) 42%,
    color-mix(in srgb, var(--panna) 34%, transparent) 74%,
    transparent 100%);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 55%, transparent 100%)}
body > header{background:transparent}
.hero--illustrata{background:transparent}

/* Il marchio è il primo elemento dell'header, non più nella hero */
.hdr__logo{flex:0 0 auto;display:block;line-height:0;margin-right:clamp(.6rem,.3rem + 1.4vw,2rem)}
.hdr__logo img{width:clamp(112px,6rem + 5vw,190px);height:auto;display:block}

/* ── Mobile: la hero si legge dall'alto ────────────────────────────────────
   Questo blocco sta in fondo apposta: le stesse regole più in alto nel file
   perdevano contro `.hero--illustrata .hero__row{margin-top:auto}`, che ha
   la stessa specificità e viene dopo. */
@media(max-width:760px){
  .hero--illustrata{padding-top:clamp(1.1rem,3.4vh,2rem)}
  /* Il claim risale sotto l'header invece di stare in fondo, e a sinistra:
     `align-items:flex-end` del blocco desktop lo teneva rientrato di 57px. */
  .hero--illustrata .hero__row{margin-top:0;position:static;
    flex-direction:column;align-items:flex-start}
  /* La targhetta si ancora alla hero, non alla riga del claim che ora è in alto. */
  .hero--illustrata .tag72{position:absolute}
}

/* ── Programma, variante C: cinque colonne ─────────────────────────────────
   Le colonne hanno altezze molto diverse (sabato ha 11 voci, lunedì una):
   si allineano in alto e la differenza resta visibile, invece di forzarle
   alla stessa altezza con spazio vuoto dentro. */
.grid-prog{display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(.7rem,.4rem + 1.2vw,1.5rem);align-items:start}
.prog__col{background:var(--crema);padding:1.15rem 1rem 1.3rem;margin:0;
  border-radius:var(--r-xl) 44px var(--r-xl) var(--r-xl)}
.prog__giorno{display:flex;align-items:baseline;gap:.5rem;margin:0 0 .85rem}
.prog__giorno b{font-family:var(--display);font-weight:400;line-height:.9;
  font-size:clamp(1.5rem,1.1rem + 1.1vw,2.1rem);color:var(--terracotta)}
.prog__giorno i{font-family:var(--ui);font-style:normal;font-weight:700;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--verde-nero)}
.prog__voci{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.prog__voci li{display:grid;grid-template-columns:auto 2.9rem 1fr;gap:.42rem;
  align-items:start;font-size:.85rem;line-height:1.36;color:var(--nero-verde);
  transition:opacity var(--dur) var(--ease)}
.prog__o{font-family:var(--display);color:var(--verde-nero)}
.prog__voci i{font-style:italic}
.prog__voci .dur{opacity:.6;font-size:.86em;white-space:nowrap}
.pal{display:inline-block;width:.6em;height:.6em;border-radius:50%;margin-top:.38em}
.pal--vuoto{background:var(--teal-medio);opacity:.5}

/* Legenda che filtra: le categorie sono sette, senza un filtro la griglia si
   legge male. I pulsanti spenti restano leggibili, non scompaiono. */
/* Lo stacco sotto il titolo è cresciuto insieme al titolo: a 4.2rem, 38px
   sotto lo facevano sembrare appiccicato ai filtri. */
.prog__filtra{margin:clamp(2.4rem,1.6rem + 2.8vw,4.2rem) 0 .6rem;
  font:700 .72rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--verde-nero)}
.prog__legenda{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  margin:0 0 clamp(1.4rem,1rem + 1.4vw,2.2rem)}
/* line-height:0 collassava il pulsante a 3px di altezza mentre il chip dentro
   ne misurava 30: il bersaglio cliccabile era una fessura. */
.prog__filtro{display:inline-flex;align-items:center;background:none;border:0;
  padding:0;cursor:pointer;border-radius:var(--r-pill);
  opacity:.5;transition:opacity var(--dur) var(--ease)}
.prog__filtro[aria-pressed="true"]{opacity:1}
.prog__legenda:not(:has([aria-pressed="true"])) .prog__filtro{opacity:1}
.prog__reset{margin-left:.4rem;background:none;border:0;cursor:pointer;
  font:700 .7rem/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--terracotta);text-decoration:underline;text-underline-offset:3px}
.prog__voci li.spento{opacity:.2}
.prog__nota{margin:clamp(1.4rem,1rem + 1.4vw,2.2rem) 0 0;font-size:.95rem;
  color:var(--verde-nero);max-width:58ch}

@media(max-width:1100px){ .grid-prog{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){
  .grid-prog{grid-template-columns:1fr}
  /* Una riga sola, senza scorrimento: la fascia del bando è un obbligo di
     visibilità, e uno scorrimento orizzontale è facile da non notare. I
     minimi in millimetri del kit valgono per la stampa, non per lo schermo. */
  .sponsors--bando{flex-wrap:nowrap;justify-content:space-between;
    gap:clamp(.3rem,1.4vw,.7rem)}
  .sponsors--bando img{max-height:30px;max-width:calc((100% - 3.5rem) / 6);
    min-width:0;object-fit:contain}
  .loghi-filetto,.loghi-stacco{display:none}

  /* Partner e sponsor: tre per riga. Griglia e non flex — con flex le
     larghezze naturali diverse davano righe da 3, 1, 3, 1, 1, 1. */
  .sponsors--fila{display:grid;grid-template-columns:repeat(3,1fr);
    place-items:center;gap:clamp(1rem,.6rem + 2.4vw,1.8rem)}
  .sponsors--fila img{max-height:38px;max-width:100%}
  .sponsors--fila .loghi-stacco{display:none}
  /* I filtri sono sette: in fila si spezzavano male. Scorrono in orizzontale
     restando su una riga, con i chip che non si comprimono. */
  .prog__legenda{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;padding-bottom:.3rem;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent 100%);
    mask-image:linear-gradient(to right,#000 88%,transparent 100%)}
  .prog__legenda::-webkit-scrollbar{display:none}
  .prog__filtro{flex:0 0 auto}
  .prog__reset{flex:0 0 auto;margin-left:.2rem}
}

/* ── Ospiti ────────────────────────────────────────────────────────────────
   Impianto preso dal reference: card colorata, nome in alto a sinistra, foto
   ritagliata a petalo in basso a destra che sborda dal riquadro, didascalia
   in basso. Il ritaglio è un raggio grande su un angolo solo, come i loro. */
.ospiti{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.9rem,.5rem + 1.6vw,1.6rem)}
.osp{position:relative;overflow:hidden;min-height:clamp(300px,34vw,420px);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1.2rem,.8rem + 1.4vw,1.8rem);margin:0;
  border-radius:var(--r-xl)}
.osp--a{background:var(--bordeaux)}
.osp--b{background:var(--verde-nero)}
.osp--c{background:var(--corallo-ui)}
.osp__nome{position:relative;z-index:2;margin:0;font-family:var(--display);
  font-weight:400;text-transform:uppercase;line-height:.95;
  font-size:clamp(1.3rem,.9rem + 1.5vw,2rem)}
.osp--a .osp__nome{color:var(--ocra)}
.osp--b .osp__nome{color:var(--verde-acqua)}
.osp--c .osp__nome{color:var(--crema)}

/* Ritratto scontornato che sbuca dal cerchio: il disco sta dietro, la persona
   davanti e più larga del disco, appoggiata in basso — così la testa esce dal
   bordo superiore e le spalle lo scavalcano ai lati. Nessun ritaglio sulla
   persona: quello che esce dalla card lo taglia l'overflow della card. */
/* Il ritratto è a filo del bordo destro della card: il soggetto è già a filo
   della propria tela, quindi qui basta right:0 e non servono scarti per persona. */
.osp__foto{position:absolute;right:0;bottom:0;z-index:1;margin:0;
  width:min(64%,262px);aspect-ratio:1}
.osp__cerchio{position:absolute;inset:0;border-radius:50%}
.osp--a .osp__cerchio{background:var(--ocra)}
.osp--b .osp__cerchio{background:var(--verde-acqua)}
.osp--c .osp__cerchio{background:var(--crema)}
.osp__foto picture{position:absolute;right:0;bottom:0;width:116%;display:block}
.osp__foto img{width:100%;height:auto;display:block}

.osp__quando{position:relative;z-index:2;margin:0;max-width:44%;
  font-size:.9rem;line-height:1.4}
.osp__quando i{display:block;font-style:normal;font-weight:700;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:.3rem}
.osp--a .osp__quando{color:var(--sabbia)} .osp--a .osp__quando i{color:var(--ocra)}
.osp--b .osp__quando{color:#EAF4EE}       .osp--b .osp__quando i{color:var(--verde-acqua)}
.osp--c .osp__quando{color:var(--panna)}  .osp--c .osp__quando i{color:var(--sabbia)}

@media(max-width:860px){ .ospiti{grid-template-columns:1fr} .osp{min-height:220px}
  .osp__foto{width:min(52%,216px)} .osp__quando{max-width:50%} }

/* ── Colori delle attività, dal volantino ─────────────────────────────────
   Una classe per categoria invece dello stile in linea: si cambiano qui,
   e chip e pallini restano per forza allineati fra loro. */
.cat--maestri{background:var(--cat-maestri);color:var(--cat-maestri-t)}
.cat--film{background:var(--cat-film);color:var(--cat-film-t)}
.cat--corti{background:var(--cat-corti);color:var(--cat-corti-t)}
.cat--ore72{background:var(--cat-ore72);color:var(--cat-ore72-t)}
.cat--talk{background:var(--cat-talk);color:var(--cat-talk-t)}
.cat--workshop{background:var(--cat-workshop);color:var(--cat-workshop-t)}
.cat--musica{background:var(--cat-musica);color:var(--cat-musica-t)}

/* ── Piede su mobile: due colonne invece di quattro blocchi impilati ───────
   `auto-fit, minmax(190px,1fr)` non ne fa entrare due su 390px (2×190 + gap
   supera i 342px utili), quindi qui la griglia è dichiarata a due colonne
   esplicite e il corpo scende di un punto. In fondo al foglio perché a parità
   di specificità vince l'ultima regola: messa più in alto perderebbe. */
@media(max-width:720px){
  .foot__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.9rem 1.1rem}
  .foot__lbl{font-size:.7rem;margin-bottom:.5rem}
  .foot__addr{font-size:.92rem;line-height:1.5}
}