/* ====================================================================
   SCALE AUREE — la radice di tutte le misure del tema.
   Il passo e' la radice di phi, quindi DUE passi fanno un phi esatto: gli
   indici PARI sono le potenze di phi (1 · 1,618 · 2,618 · 4,236 · 6,854),
   i dispari stanno in mezzo.
   Regola d'uso: il ritmo verticale delle sezioni prende i PARI, i dettagli
   dei componenti possono prendere anche i dispari.
   Non aggiungere misure fuori da qui: se ne serve una, manca un passo.
   ==================================================================== */
:root{
  /* corpi di testo */
  --t0:0.618rem;
  --t1:0.786rem;
  --t2:1.0rem;
  --t3:1.272rem;
  --t4:1.618rem;
  --t5:2.058rem;
  --t6:2.618rem;
  --t7:3.33rem;
  --t8:4.236rem;
  --t9:5.388rem;
  --t10:6.854rem;
  --t11:8.719rem;

  /* spazi */
  --s0:1.0rem;
  --s1:1.272rem;
  --s2:1.618rem;
  --s3:2.058rem;
  --s4:2.618rem;
  --s5:3.33rem;
  --s6:4.236rem;
  --s7:5.388rem;
  --s8:6.854rem;
  --s9:8.719rem;
  --s10:11.09rem;
  --s11:14.107rem;
  --s12:17.944rem;
  --s13:22.825rem;
  --s14:29.034rem;
}

:root{
  /* ---- micro-spazi: stessa ragione (radice di phi), sotto 1rem ----
     Prima non esistevano e il tema li improvvisava (.5rem .6rem .85rem ...):
     e' li' che finiva meta' delle misure fuori scala. */
  --s-7:0.186rem;   /*  2.97px */
  --s-6:0.236rem;   /*  3.78px */
  --s-5:0.300rem;   /*  4.80px */
  --s-4:0.382rem;   /*  6.11px */
  --s-3:0.486rem;   /*  7.77px */
  --s-2:0.618rem;   /*  9.89px */
  --s-1:0.786rem;   /* 12.58px */

  /* ---- interlinee: le uniche tre che fanno cadere la riga su un gradino ----
     phi   -> la riga vale due gradini piu' su
     radq  -> la riga vale un gradino piu' su
     1     -> la riga vale il corpo stesso */
  --lh-lettura:1.618;
  --lh-titolo:1.272;
  --lh-display:1;

  /* ---- spaziatura fra le lettere: potenze inverse di phi ---- */
  --tr-occhiello:0.236em;   /* phi^-3 */
  --tr-etichetta:0.146em;   /* phi^-4 */
  --tr-minima:0.056em;      /* phi^-6 */

  /* ---- coppie fluide: il minimo cade a 390px, il massimo a 1440px,
     e sono due gradini della scala, non due numeri a caso. ---- */
  /* Il minimo e' --t7 e non --t6: il titolo grande su telefono saliva di un gradino.
     Retta rifatta sui due estremi dichiarati qui sopra, 390 e 1440, cosi' a 1440
     resta esattamente --t10 come prima. Il min() nel primo termine e' una guardia
     che morde solo sotto i 350px, cioe' fuori dall'intervallo disegnato: a 320
     "possibilita'", la parola piu' lunga dello switcher, sforerebbe la colonna di
     24px se il gradino restasse fisso. Sopra i 350 il min() non tocca niente. */
  --fs-display:min(15.2vw, clamp(var(--t7), calc(2.021rem + 5.370vw), var(--t10)));  /* 53.3 -> 109.7 */
  --fs-claim:clamp(var(--t5), calc(1.249rem + 3.319vw), var(--t8));         /* 32.9 ->  67.8 */
  --fs-titolo:clamp(var(--t5), calc(1.586rem + 1.938vw), var(--t7));        /* 32.9 ->  53.3 */
  --fs-sottotitolo:clamp(var(--t4), calc(1.247rem + 1.524vw), var(--t6));   /* 25.9 ->  41.9 */
  --fs-cardtitolo:clamp(var(--t3), calc(1.143rem + 0.527vw), var(--t4));    /* 20.4 ->  25.9 */
  --fs-lead:clamp(var(--t2), calc(0.899rem + 0.414vw), var(--t3));          /* 16.0 ->  20.4 */

  --r-sezione:clamp(var(--s6), calc(3.264rem + 3.989vw), var(--s8));       /* 67.8 -> 109.7 */
  --r-coda:clamp(var(--s8), calc(4.160rem + 11.052vw), var(--s11));        /*109.7 -> 225.7 */
  --r-blocco:clamp(var(--s3), calc(1.586rem + 1.938vw), var(--s5));        /* 32.9 ->  53.3 */
  --r-blocco-l:clamp(var(--s4), calc(2.017rem + 2.466vw), var(--s6));      /* 41.9 ->  67.8 */
  --r-card:clamp(var(--s2), calc(1.455rem + 0.670vw), var(--s3));          /* 25.9 ->  32.9 */
  --r-riga:clamp(var(--s2), calc(1.247rem + 1.524vw), var(--s4));          /* 25.9 ->  41.9 */
  --r-hero:clamp(var(--s10), calc(6.731rem + 17.882vw), var(--s13));       /*177.4 -> 365.2 */
  --r-testata:clamp(var(--s8), calc(4.160rem + 11.052vw), var(--s10));      /*109.7 -> 177.4 */

  /* "Torna su": misura del cerchio e distanza dal bordo dello schermo. Stanno
     fra i token perche' li legge anche la riga legale del footer, che deve
     sapere quanto spazio tenersi libero per non finirci sotto. */
  --totop-size:54px;
  --totop-inset:clamp(1rem,2.5vw,2rem);
}

/* ====================================================================
   TITOLI GIGANTI (.h1) — la correzione piu' grossa.
   Il tema clonato li teneva a 8.5rem fissi sopra i 1400px e a 9vw sotto:
   35px su iPhone, 136px su un portatile, 230px su un 5K. Nessuno di quei
   numeri sta sulla scala, e su telefono il titolo era grande quanto il claim.
   ==================================================================== */
.h1,h1{font-size:var(--fs-display);line-height:var(--lh-display)}

/*
 * Spazio Poi brand skin.
 * Overrides only the "skin" layer of styles.css (color tokens + fonts).
 * Loaded AFTER styles.css so these win by source order; structure/effects untouched.
 * Palette ufficiale: ink #181818 · paper (intonaco) #EBE8E3 · accent arancione #F7AC60.
 */

/* ---------- Fonts ---------- */
/* Body / UI / eyebrow: Evans Narrow (mappa i 3 pesi grotesk del spazio 300/400/500) */
@font-face{font-family:"Evans Narrow";src:url(../fonts/Evans-Narrow-Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Evans Narrow";src:url(../fonts/Evans-Narrow-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Evans Narrow";src:url(../fonts/Evans-Narrow-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* Wordmark / accenti brevi: Biscottini (font a punti). Regular = default (meno grosso); Bold disponibile. */
@font-face{font-family:"Biscottini";src:url(../fonts/Biscottini-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Biscottini";src:url(../fonts/Biscottini-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* Base globale -> Evans Narrow (sostituisce il Neurial Grotesk del selettore universale) */
*{font-family:"Evans Narrow","Helvetica Neue",Arial,sans-serif}

/* Tutti i titoli h1/h2/h3 (e le classi .h1/.h2/.h3) -> Biscottini regular (a pallini).
   Includo anche i discendenti (span di reveal-mask/switcher) altrimenti il selettore
   universale *{Evans Narrow} li colpisce direttamente e vince sull'ereditarieta'. */
.h1,h1,.h2,h2,.h3,h3,
.h1 *,h1 *,.h2 *,h2 *,.h3 *,h3 *{font-family:"Biscottini","Arial Black",sans-serif;font-weight:400}

/* ---------- Color tokens (theme engine) ---------- */
:root{
  --background-color:#181818;
  --text-color:#181818;
  --strong-color:#F7AC60;
  --cursor-bg-color:#EBE8E3;
  --cursor-text-color:#181818;
  --cursor-border-color:#EBE8E3;
  --menu-toggle-bg-color:#F7AC60;
  --sticker-text-color:#181818;
  --sticker-border-color:#181818;
}
[data-theme=dark]{
  --background-color:#181818;
  --text-color:#EBE8E3;
  --strong-color:#F7AC60;
  --cursor-bg-color:#F7AC60;
  --cursor-border-color:#F7AC60;
  --cursor-text-color:#181818;
  --menu-toggle-bg-color:#F7AC60;
}
[data-theme=light]{
  --background-color:#EBE8E3;
  --text-color:#181818;
  --strong-color:#181818;
  --cursor-bg-color:#181818;
  --cursor-border-color:transparent;
  --cursor-text-color:#EBE8E3;
  --menu-toggle-bg-color:#181818;
}
[data-theme=yellow]{
  --background-color:#F7AC60;
  --text-color:#181818;
  --strong-color:#181818;
  --cursor-bg-color:#181818;
  --cursor-border-color:#181818;
  --cursor-text-color:#EBE8E3;
  --menu-toggle-bg-color:#181818;
}
[data-theme=dark] .spz__sticker{--sticker-bg-color:#181818;--sticker-text-color:#EBE8E3;--sticker-border-color:#EBE8E3}
[data-theme=light] .spz__sticker{--sticker-bg-color:#EBE8E3}
[data-theme=yellow] .spz__sticker{--sticker-bg-color:#F7AC60}
/* Filtro icone card "Cosa trovi qui": nere quando lo sfondo e' chiaro, bianche quando e'
   scuro (segue il tema, come il testo delle card) -> niente icone bianche su fondo bianco. */
:root{--icon-filter:brightness(0) invert(0)}         /* nera (sfondo chiaro) */
[data-theme=dark]{--icon-filter:brightness(0) invert(1)}  /* bianca (sfondo scuro) */
/* Fix: light/yellow devono forzare l'icona nera. Senza questa riga la var
   veniva ereditata da <html data-theme=dark> (che il JS non aggiorna) e le
   icone restavano bianche anche su fondo giallo/chiaro. */
[data-theme=light],[data-theme=yellow]{--icon-filter:brightness(0) invert(0)}

/* ---------- Fix link: azzero il blu di default del reset (a{color:#00f}, a:hover{#00c}) ----------
   Senza questo, in hover l'anchor .spz__service-card mostrava un lampo blu prima del layer arancio.
   I link brandizzati (.spz__home-link, .spz__chip, ecc.) hanno colore proprio e restano invariati. */
a{color:inherit}
a:hover,a:focus{color:inherit}

/* ---------- Cambio tema (data-theme) morbido e affidabile, anche su mobile ----------
   Sostituisco il 'transition:all 1.5s' del body (il keyword 'all' su mobile a volte scattava,
   animando anche proprieta' toccate dal resize della barra indirizzi) con una transizione
   mirata su sfondo e testo. */
body{-webkit-transition:background-color .7s ease,color .7s ease;transition:background-color .7s ease,color .7s ease}
/* Sfondo e testo del body con valori LITERALI per tema: Safari/iOS anima le transizioni
   su colori espliciti, mentre NON le anima quando sono pilotate da var() (era il "cambio
   di scatto" su iPhone). Cosi' il cambio colore e' morbido ovunque. */
body[data-theme=dark]{background-color:#181818;color:#EBE8E3}
body[data-theme=light]{background-color:#EBE8E3;color:#181818}
body[data-theme=yellow]{background-color:#F7AC60;color:#181818}
/* Su telefono il colore NON passa di qui: lo scrive animations.js fotogramma per
   fotogramma, legato allo scorrimento. Il motivo sta li', per esteso; in due parole:
   questo fondo lo dipinge il canvas della pagina e su WebKit la transizione su quel
   colore non si vede, quindi allungarla non serviva. Una transizione lasciata accesa
   qui litigherebbe con chi scrive il colore a ogni fotogramma: si spegne. */
body.--tema-a-scorrimento{-webkit-transition:none;transition:none}

/* ---------- Preloader: fallback CSS. Il fade e' guidato da GSAP (rAF). Se rAF non gira
   (tab in background) o GSAP/CDN non carica, il loader resterebbe opaco coprendo tutta
   la pagina (sintomo: "non appare niente"). Con la classe --loaded (aggiunta al load) lo
   nascondiamo comunque via CSS. Quando GSAP gira imposta opacity inline e vince su questa
   regola, quindi l'animazione originale non viene alterata. */
body[class~="--loaded"] .spz__loader{
  opacity:0;
  visibility:hidden;
  transition:opacity .8s ease, visibility .8s ease;
}

/* ---------- Hero: la foto sorgente (hero.jpeg) e' sottoesposta (luma media ~58/255).
   Rivelata contro l'ink #181818 non si distingueva: la schiariamo cosi' "spunta"
   subito dopo lo zoom del wordmark. Rimuovere/attenuare quando arrivera' uno scatto piu' chiaro. */
.spz__hero picture img{
  filter:brightness(1.18) contrast(1.03) saturate(1.03);
}
/* Hero piu' lunga SOLO desktop: lo zoom "dentro il pallino" dura di piu' (era 200vh).
   Su mobile resta 200vh (il ramo mobile fa solo la dissolvenza, non lo zoom). */
@media (min-width:1200px){
  .spz__hero{height:calc(var(--vh, 1vh) * 260)}
}
/* Hero mobile: il knockout (wordmark landscape) si taglia su portrait.
   Su mobile: overlay ink pieno + logo bianco centrato, che sfuma sulla foto allo scroll.
   Il logo e' il lockup verticale (532x598 nel viewBox, quindi piu' alto che largo):
   la larghezza da sola non basta a tenerlo dentro lo schermo, per esempio su un tablet
   in orizzontale, quindi c'e' anche un tetto in altezza. Con tutti e due i limiti attivi
   la casella puo' non avere le proporzioni del disegno: object-fit lo tiene proporzionato. */
.spz__hero__mlogo{display:none}
@media (max-width:1199px){
  .spz__hero .overlay svg{display:none}
  .spz__hero .overlay__inner{background-color:#181818}
  /* Larghezza del lockup: 62% dello schermo, mai oltre 320px, e mai tanto larga da
     farlo arrivare al pulsante "Scorri" (terzo termine: l'altezza disponibile
     riportata a larghezza sul rapporto 532/598 del viewBox). Comanda sempre la
     larghezza, quindi la casella coincide col disegno e il suo bordo sinistro e'
     quello vero del logo: senza questo, su schermo basso il tetto in altezza
     lasciava bande vuote ai lati e l'allineamento sotto sarebbe stato finto. */
  .spz__hero__sticky{
    --mlogo-w:min(62%, 320px, calc((var(--vh, 1vh) * 100 - 260px) * 532 / 598));
  }
  /* Non centrato sullo schermo ma sullo spazio SOPRA il pulsante, che a ogni misura
     occupa gli ultimi 194px (130 di cerchio piu' i 4rem di stacco dal fondo del
     tema): meta' di quel blocco, 97px, e' quanto va alzato. */
  .spz__hero__mlogo{
    display:block;position:absolute;top:calc(50% - 97px);left:50%;
    transform:translate(-50%,-50%);
    width:var(--mlogo-w);height:auto;z-index:1;
  }
  /* "Scorri" non piu' centrato ma a filo con il bordo sinistro del logo. Il tema lo
     tiene centrato con left:50% e translateX(-50%): tolgo la traslazione e porto il
     left sul bordo del lockup. Il transform si puo' toccare, le animazioni lavorano
     su .scroller__inner e sul .btn, non su .scroller. */
  .spz__hero .scroller{
    left:calc(50% - var(--mlogo-w) / 2);
    -webkit-transform:none;transform:none;
  }
  /* Safari su iPhone: finche' la lastra era semitrasparente lo scorrimento
     rallentava, e tornava fluido nell'istante in cui spariva. L'unica cosa che
     cambia e' l'opacita', ma senza un piano suo il motore ridisegna a ogni
     fotogramma tutto quello che sta sotto: la foto con il suo filtro e il lockup,
     che e' un SVG di qualche centinaio di pallini. Con il piano dedicato il
     disegno si fa una volta sola e poi cambia solo l'alfa: lavoro della scheda
     grafica, non della CPU. Serve su TUTTE E DUE le facce - quella che sfuma e
     quella che sta sotto - altrimenti la fusione ricade comunque sulla CPU.
     Solo qui sotto i 1200 px: sopra, la lastra si ingrandisce 380 volte e un
     piano permanente di quella misura costerebbe piu' di quanto rende. */
  .spz__hero .overlay{
    will-change:opacity;
    -webkit-transform:translateZ(0);transform:translateZ(0);
    -webkit-backface-visibility:hidden;backface-visibility:hidden;
  }
  .spz__hero picture img{-webkit-transform:translateZ(0);transform:translateZ(0)}
}

/* ---------- Nav: link del logo/wordmark senza underline ne' blu di default (era un <a> non stilizzato) ---------- */
.spz__nav a,
.spz__nav__brand,
.spz__nav__brand:hover,
.spz__nav__brand:focus{
  text-decoration:none;
  color:var(--text-color);
}

/* ---------- Nav logo: SVG originale (wordmark a pallini), fill adatta al tema ---------- */
.spz__nav__brand .spz__logo{height:26px;width:auto;display:block}
.spz__nav__brand .spz__logo path{fill:currentColor}
/* Fallback testo (se manca l'SVG) */
.spz__nav__brand .sp-wordmark{
  font-family:"Biscottini","Arial Black",sans-serif;
  font-weight:400;
  font-size:var(--t4);
  line-height:1;
  letter-spacing:.04em;
  color:var(--text-color);
  white-space:nowrap;
}

/* ---------- Sfondo: noise piu' leggero (texture soft ~-28% alpha, non identica al clone) ---------- */
body{background-image:url(../images/spazio-grana.png)}

/* ---------- Contatti fullscreen: fondo arancio brand (era giallo #ffff6d) ---------- */
.spz__modal.spz__contact{background-color:#F7AC60}
.spz__modal.spz__contact .close{background-color:#F7AC60}
/* (le regole del vecchio form finto sono state rimosse: ora c'e' Contact Form 7, vedi .spz__form) */

/* ---------- Menu toggle a pallini (in alto a destra) ---------- */
.spz__menu__toggle__dots{display:block;color:var(--menu-toggle-bg-color)}
.spz__menu__toggle:hover .spz__menu__toggle__dots{opacity:.7}

/* ---------- Menu panel: fondo ink, link grandi in Biscottini ---------- */
.spz__modal.spz__menu-panel{background-color:#181818;color:#EBE8E3;z-index:9500;display:flex;flex-direction:column;justify-content:center}
.spz__menu-panel .close{background-color:#EBE8E3}
.spz__menu-panel .close>span{background-color:#181818}
/* X di chiusura del menu formata da pallini (coerente col brand a pallini) */
.spz__menu-panel .close{display:flex;align-items:center;justify-content:center}
.spz__menu-panel .close .spz__close-dots{width:24px;height:24px;color:#181818}
/* Stessa X a pallini nel popup contatti (era due barrette del template). */
.spz__contact .close,
.spz__mentions .close{display:flex;align-items:center;justify-content:center}
.spz__contact .close .spz__close-dots,
.spz__mentions .close .spz__close-dots{width:24px;height:24px;color:#181818}
.spz__menu-panel__inner{max-width:1100px;margin:0 auto;padding:var(--s3) var(--s2);width:100%}
.spz__menu-panel__eyebrow{display:block;font-family:"Evans Narrow","Helvetica Neue",Arial,sans-serif;font-size:var(--t1);letter-spacing:var(--tr-occhiello);text-transform:uppercase;opacity:.6;margin-bottom:var(--s3)}
.spz__menu-panel ul{list-style:none;margin:0;padding:0}
.spz__menu-panel li{margin:.15em 0}
.spz__menu-panel li a{font-family:"Biscottini","Arial Black",sans-serif;font-weight:400;font-size:clamp(var(--t5),5.5vw,var(--t8));line-height:var(--lh-display);letter-spacing:.01em;color:#EBE8E3;text-decoration:none;display:inline-block;transform-origin:left center;transition:transform .45s cubic-bezier(.19,1,.22,1),color .3s ease}
/* hover: i pallini si allungano leggermente verso destra */
.spz__menu-panel li a:hover{color:#F7AC60;transform:scaleX(1.07)}
.spz__menu-panel small{display:block;margin-top:var(--s3);opacity:.5;font-family:"Evans Narrow","Helvetica Neue",Arial,sans-serif}
.spz__menu-panel__social{display:flex;gap:var(--s2);margin-top:var(--s4)}
.spz__menu-panel__social a{font-family:"Evans Narrow","Helvetica Neue",Arial,sans-serif;font-size:var(--t2);letter-spacing:.02em;color:#EBE8E3;text-decoration:none;opacity:.75;transition:opacity .3s ease,color .3s ease}
.spz__menu-panel__social a:hover{opacity:1;color:#F7AC60}

/* ---------- Footer: parte finale (promotore Extopia + social, iniziativa cofinanziata, legal) su fondo ink ---------- */
/* Padding orizzontale: legal e contenuti non toccano il bordo (desktop e mobile). */
.spz__footer{height:auto;min-height:100vh;padding-left:clamp(var(--s2),5vw,var(--s7));padding-right:clamp(var(--s2),5vw,var(--s7))}
/* La CTA "Vuoi far parte di Spazio Poi?" occupa una schermata intera, a ogni
   larghezza. Stava dentro la media query dei telefoni, quindi su desktop vinceva
   il display:inline-block del tema base e il claim restava alto 300px in mezzo al
   footer. 100svh e' l'altezza del viewport senza le barre del browser mobile:
   con 100vh secco, su iOS il blocco sborda e la parte finale del footer sparisce
   sotto la barra degli indirizzi. */
.spz__footer > a{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
/* Lo smile chiude l'invito: ultima riga del blocco, centrato come le due righe
   di testo sopra (l'allineamento al centro arriva da styles.css e vale a ogni
   larghezza). La scatola rifa' a mano la maschera del reveal: styles.css la da
   a tutti i figli del link con 1.2rem di padding in fondo, e dentro quel margine
   l'icona - piu' bassa di una riga di testo - si vedeva prima di partire. Qui e'
   alta esattamente quanto il disegno (line-height:0 + icona a blocco), quindi il
   140% con cui GSAP la spinge giu' la nasconde davvero.
   Il <br> in coda alle righe lascia gia' una riga vuota sopra lo smile, la stessa
   che separa le due righe di testo: qui basta il mezzo passo che rimette l'icona
   (piu' bassa di una riga) al centro di quello spazio. */
.spz__footer > a > .spz__footer__smile{overflow:hidden;padding-bottom:0;line-height:0;
  margin:var(--s-1) auto 0;width:-moz-fit-content;width:fit-content}
.spz__footer__smile .spz__ico{display:block;vertical-align:baseline}
.spz__footer__end{width:100%;text-align:left;margin-top:var(--s5)}
.spz__footer__end__top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s4) 0;border-top:1px solid rgba(235,232,227,.16);
}
.spz__footer__promoter{display:flex;flex-direction:column;gap:var(--s1);align-items:flex-start}
/* logo Extopia (PNG ritagliato sulla sola scritta): altezza = scritta reale */
.spz__footer__extopia{height:clamp(34px,4vw,48px);width:auto;max-width:100%;display:block}
.spz__footer__social{display:flex;gap:var(--s0)}
.spz__footer__social a{display:inline-flex;color:var(--text-color);transition:color .3s ease}
.spz__footer__social a:hover{color:#F7AC60}
.spz__footer__social svg{width:26px;height:26px;display:block}
.spz__footer__cofin{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s0);text-align:right;max-width:560px}
.spz__footer__cofin__eyebrow{font-size:var(--t1);letter-spacing:.22em;text-transform:uppercase;opacity:.55}
.spz__footer__cofin__logos{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;justify-content:flex-end}
/* targa unica degli enti: l'immagine ha gia il fondo crema, il CSS arrotonda gli angoli */
/* larghezza DEFINITA, non 100%: la colonna cofin e shrink-to-fit e una
   percentuale qui collasserebbe l'immagine a zero. */
.spz__footer__cofin__targa{display:block;width:clamp(260px,30vw,380px);max-width:100%;height:auto;border-radius:8px}
.spz__footer__cofin__text{font-size:var(--t1);line-height:var(--lh-lettura);opacity:.65;max-width:490px;margin:0}
/* barra bottom (override del giallo template) */
/* l'ultima riga (copyright + link legali) non deve toccare il bordo basso dello schermo */
.spz__footer .spz__footer__bottom{border-top:1px solid rgba(235,232,227,.16);padding:var(--s1) 0 var(--r-blocco);flex-wrap:wrap;gap:.6rem}
.spz__footer .spz__footer__copy{font-size:var(--t1);color:var(--text-color);opacity:.7;order:0;flex-basis:auto;text-align:left;margin:0}
.spz__footer .spz__footer__bottom__links{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;order:1}
/* styles.css sotto i 576px da order:2 ai link e lascia 0 ai separatori: i due puntini
   finivano prima dei link e "credits" sbordava. Qui si torna all'ordine del markup. */
.spz__footer .spz__footer__bottom__links > *{order:0}
.spz__footer .spz__footer__bottom__links a,
.spz__footer .spz__credits__btn{font-size:var(--t1);color:var(--text-color);opacity:.7;text-decoration:none}
.spz__footer .spz__footer__bottom__links a:hover,
.spz__footer .spz__credits__btn:hover{opacity:1}
.spz__footer .spz__footer__bottom__links .sep{opacity:.4}

/* ---------- Tooltip "credits" ---------- */
.spz__credits{position:relative;display:inline-block}
.spz__credits__btn{background:none;border:0;padding:0;font:inherit;cursor:pointer;line-height:inherit;
  transition:opacity .25s ease}
.spz__credits__pop{position:absolute;bottom:calc(100% + .7rem);right:0;z-index:20;
  display:flex;flex-direction:column;gap:var(--s-5);
  min-width:max-content;max-width:min(76vw,20rem);padding:var(--s-1) var(--s0);
  background:#EBE8E3;color:#181818;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.28);
  text-align:left;white-space:normal;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .25s ease,visibility .25s ease,transform .25s ease}
.spz__credits__pop::after{content:"";position:absolute;top:100%;right:1.1rem;
  border:6px solid transparent;border-top-color:#EBE8E3}
.spz__credits:hover .spz__credits__pop,
.spz__credits:focus-within .spz__credits__pop,
.spz__credits.is-open .spz__credits__pop{opacity:1;visibility:visible;transform:none}
.spz__credits__row{font-size:var(--t1);line-height:var(--lh-lettura);opacity:.75}
.spz__footer .spz__credits__row a{color:#181818;opacity:1;text-decoration:underline;font-size:inherit}
@media (max-width:767px){
  /* "credits" sta a destra nella riga: ancorare li il tooltip lo farebbe uscire dallo
     schermo. Su mobile il riferimento e la riga legale, quindi parte da sinistra. */
  .spz__footer .spz__footer__bottom__links{position:relative}
  .spz__credits{position:static}
  .spz__credits__pop{left:0;right:auto;max-width:min(86vw,20rem)}
  .spz__credits__pop::after{display:none}
}
/* Footer: sotto ~1240px le 3 colonne (Extopia | newsletter | cofinanziata) non
   stanno comode (la cofinanziata e' larga), quindi impilo pulito in verticale. */
@media (max-width:1240px){
  .spz__footer__end__top{flex-direction:column;gap:var(--s4)}
  .spz__footer__newsletter{flex:0 0 auto;width:100%;max-width:26rem}
  .spz__footer__cofin{align-items:flex-start;text-align:left;max-width:none}
  .spz__footer__cofin__logos{justify-content:flex-start}
}
@media (max-width:767px){
  /* Piu' spazio in fondo: il pulsante "torna su" (fisso in basso a destra) non copre "credits". */
  .spz__footer .spz__footer__bottom{flex-direction:column;align-items:flex-start;padding-bottom:var(--s7)}
  /* i link legali su un'unica riga (niente separatori a capo a sinistra); font fluido
     cosi' restano su una riga anche su schermi molto stretti senza sforare (no scroll orizz.) */
  /* niente margin-right da 2rem ereditato: la riga misurava 503px in 327 e "credits"
     finiva oltre il bordo dello schermo. Ora spaziatura solo col gap, tutto a sinistra. */
  .spz__footer .spz__footer__bottom__links{flex-wrap:nowrap;white-space:nowrap;justify-content:flex-start;gap:var(--s-2);max-width:100%}
  .spz__footer .spz__footer__bottom__links > *{margin-right:0}
  .spz__footer .spz__footer__bottom__links a,
  .spz__footer .spz__credits__btn{font-size:var(--t1)}
  .spz__footer .spz__footer__bottom__links .sep{font-size:clamp(var(--t0),3vw,var(--t1))}
  .spz__credits__row{font-size:var(--t1)}
}

/* L'altra meta' dello stesso problema, sopra i 768: qui la riga legale resta
   orizzontale e "credits" finisce all'estremita' destra della colonna, cioe'
   esattamente sotto al "torna su". Il margine della colonna (5vw, al massimo
   --s7) non basta a contenere bottone piu' scostamento, cosi' la riga si tiene
   da parte la differenza. Misurato sullo staging prima della correzione: si
   sovrapponevano 35px a 768, 22 a 1280, 14 a 1440, 10 a 1512, 0 a 1728.
   Il conto si annulla da solo quando il margine cresce, sopra i 1700 resta
   solo l'aria di --s1. Il filetto sopra la riga non si accorcia: il padding
   sta dentro il bordo. Sotto i 768 non si applica, li' la riga e' impilata e
   i link vanno a filo sinistro senza andare a capo. */
@media (min-width:768px){
  .spz__footer .spz__footer__bottom{
    padding-right:max(0px, calc(var(--totop-size) + var(--totop-inset) + var(--s1) - clamp(var(--s2),5vw,var(--s7))));
  }
}

/* ---------- Modale legale: da giallo a fondo ink brand ---------- */
.spz__modal.spz__mentions{background-color:#181818;color:#EBE8E3}
.spz__modal.spz__mentions .close{background-color:#EBE8E3}
.spz__modal.spz__mentions .close>span{background-color:#181818}

/* ---------- Pagine interne (page.php): sezione scura, contenuto leggibile ---------- */
.spz__page{min-height:70vh;padding-top:var(--s9);padding-bottom:var(--s7);color:var(--text-color)}
.spz__page__title{margin-bottom:var(--s4)}
.spz__page__content{font-size:var(--t3);line-height:var(--lh-lettura);max-width:820px}
.spz__page__content h2{font-size:var(--t5);margin:var(--s4) 0 var(--s0)}
.spz__page__content h3{font-size:var(--t3);margin:var(--s3) 0 var(--s-1)}
.spz__page__content p{margin:0 0 var(--s1)}
.spz__page__content a{color:#F7AC60;text-decoration:underline}
.spz__page__content ul,.spz__page__content ol{margin:0 0 var(--s1) var(--s1)}
.spz__page__content li{margin-bottom:var(--s-3)}

/* ---------- Transizione tra pagine: overlay ink con reveal a cerchio (l'"effetto di apertura") ---------- */
.spz__transition{position:fixed;inset:0;background-color:#181818;z-index:99999;visibility:hidden;pointer-events:none;-webkit-clip-path:circle(0% at 50% 50%);clip-path:circle(0% at 50% 50%)}

/* ---------- Home ristrutturata: sezioni ---------- */
.spz__home-services,.spz__home-events,.spz__home-values{padding:var(--r-sezione) 0;color:var(--text-color)}
.spz__eyebrow{display:block;font-size:var(--t1);letter-spacing:.22em;text-transform:uppercase;opacity:.6;margin-bottom:var(--s3)}
.spz__home-link{display:inline-flex;align-items:center;gap:var(--s-3);margin-top:var(--s3);font-size:var(--t2);color:var(--text-color);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:var(--s-6);transition:gap .3s ease,color .3s ease}
.spz__home-link:hover{gap:var(--s0);color:#F7AC60}
/* su fondo arancione l'arancio dell'hover sparirebbe: resta ink, il feedback lo da la freccia */
[data-theme=yellow] .spz__home-link:hover{color:#181818}
.spz__home-link span{transition:transform .3s ease}
.spz__home-link:hover span{transform:translateX(4px)}
/* Freccia diagonale a pallini (frecce-02) per i link/CTA testuali, via mask in currentColor. */
.spz__linkarrow{display:inline-block;width:.95em;height:.95em;flex:0 0 auto;background-color:currentColor;
  -webkit-mask:url(../icons/arrows/frecce-02.png) center/contain no-repeat;
  mask:url(../icons/arrows/frecce-02.png) center/contain no-repeat;
  transition:transform .3s ease}
.spz__linkarrow--back{transform:scaleX(-1)} /* link "indietro" */
.spz__home-link:hover .spz__linkarrow,.spz__location__cta:hover .spz__linkarrow{transform:translate(3px,-3px)}
.spz__home-link:hover .spz__linkarrow--back{transform:scaleX(-1) translate(3px,-3px)}

/* ---------- Icone a pallini dentro il testo (cuore, smile) ----------
   Stessa meccanica della freccia qui sopra: <span> vuoto, la silhouette
   dell'SVG fa da maschera e il colore lo mette currentColor. Cosi' il cuore
   e' inchiostro nel claim su crema ed e' crema nel titolo della mappa su
   inchiostro, con un file solo e senza una seconda versione bianca.
   La misura e' in em: l'icona cresce con il testo che sostituisce.
   L'altezza e' phi^-1/2 (0.786em), un gradino della scala: sotto le maiuscole
   di Biscottini, sopra la pancia delle minuscole di Evans. La larghezza segue
   le proporzioni del disegno (cuore 93x83.1, smile 85.1x86.5). */
.spz__ico{display:inline-block;flex:0 0 auto;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.spz__ico--cuore{width:.880em;height:.786em;vertical-align:-.06em;
  -webkit-mask-image:url(../icons/cuore.svg);mask-image:url(../icons/cuore.svg)}
.spz__ico--smile{width:.773em;height:.786em;vertical-align:-.06em;
  -webkit-mask-image:url(../icons/smile.svg);mask-image:url(../icons/smile.svg)}
/* blocchi servizi */
/* 8 card (4+4): row-gap tra le due righe, gutter Bootstrap tra le colonne (non si toccano). */
.spz__home-services__grid{margin-top:var(--s-3);row-gap:clamp(var(--s1), calc(0.980rem + 1.198vw), var(--s3))}
.spz__service-card{position:relative;display:block;height:100%;min-height:300px;border:1px solid var(--text-color);border-radius:22px;color:var(--text-color);text-decoration:none;overflow:hidden}
.spz__service-card__face,.spz__service-card__inner{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1);padding:var(--s3) var(--s2);height:100%}
/* inner arancio, rivelato in hover dal cursore (come le card offer) */
.spz__service-card__inner{position:absolute;inset:0;background:#F7AC60;color:#181818;-webkit-clip-path:circle(0 at 50% 50%);clip-path:circle(0 at 50% 50%)}
.spz__service-card__ico{width:2.6rem;height:2.6rem}
.spz__service-card__ico img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}
/* icona face: segue il tema (nera su chiaro, bianca su scuro), transizione morbida col tema */
.spz__service-card__face .spz__service-card__ico img{filter:var(--icon-filter);-webkit-transition:-webkit-filter .7s ease;transition:filter .7s ease}
.spz__service-card__inner .spz__service-card__ico img{filter:none}
/* Sezione su fondo arancione: il riempimento arancio dell'hover sarebbe invisibile.
   Diventa ink con testo crema e icona bianca. */
[data-theme=yellow] .spz__service-card__inner{background:#181818;color:#EBE8E3}
[data-theme=yellow] .spz__service-card__inner .spz__service-card__ico img{filter:brightness(0) invert(1)}
.spz__service-card__title{font-family:"Biscottini","Arial Black",sans-serif;font-weight:400;font-size:var(--fs-cardtitolo);line-height:var(--lh-titolo);margin:0}
.spz__service-card__text{font-size:var(--t2);line-height:var(--lh-lettura);opacity:.8;margin:0;flex:1 0 auto}
.spz__service-card__inner .spz__service-card__text{opacity:.85}
/* freccia a pallini (frecce-03) via mask in currentColor: bianca sul face, scura sull'inner */
.spz__service-card__arrow{display:block;width:2.1rem;height:1.5rem;margin-top:var(--s-2);background-color:currentColor;
  -webkit-mask:url(../icons/arrows/frecce-03.png) left center/contain no-repeat;
  mask:url(../icons/arrows/frecce-03.png) left center/contain no-repeat}
@media (max-width:600px){
  .spz__service-card{min-height:0}
  .spz__service-card__face,.spz__service-card__inner{padding:var(--s2) var(--s1)}
}
/* prossimi eventi (teaser) */
.spz__home-events__title{margin:var(--s-3) 0 var(--s0)}
.spz__home-events__text{font-size:var(--t3);line-height:var(--lh-lettura);max-width:640px;margin:0}
/* manifesto valori */
.spz__value{padding:var(--s0) 0}
.spz__value__dot{display:block;width:14px;height:14px;border-radius:50%;background:#F7AC60;margin-bottom:var(--s2);
  -webkit-transition:background-color .7s ease;transition:background-color .7s ease}
/* sull'arancione un pallino arancione sparisce: diventa ink, ma con la stessa
   dissolvenza dello sfondo (.7s) cosi non scatta di colpo. */
body[data-theme=yellow] .spz__value__dot{background-color:#181818}
/* spaziatura FISSA (niente piu' stretch in hover); i pallini reagiscono al mouse via JS */
.spz__value__title{font-family:"Biscottini","Arial Black",sans-serif;font-weight:400;font-size:var(--t4);margin:0 0 var(--s-1);letter-spacing:.05em}
.spz__value__title .ltr{display:inline-block;will-change:transform;transition:transform .35s cubic-bezier(.19,1,.22,1)}
.spz__value__title .ltr.sp{width:.28em}
.spz__value__text{font-size:var(--t2);line-height:var(--lh-lettura);opacity:.8;margin:0}
@media (max-width:767px){.spz__value{margin-bottom:var(--s3)}}

/* ---------- Statement "Uno spazio che genera" ---------- */
/* Sezione a tutta altezza schermo, tre righe: "Uno spazio", "che genera", e la parola
   che ruota. Rifatta il 29/08 perche' su Safari la parola in attesa restava mezza
   visibile e sfarfallava durante lo scorrimento. */
.spz__header[data-has-switcher]{min-height:100vh;min-height:100svh;display:flex;align-items:center}
.spz__header[data-has-switcher] h1{line-height:var(--lh-display)}

/* Le righe del reveal salgono da sotto dentro una maschera che taglia. La riga di testo
   e' stretta (interlinea 1.06) e le code delle lettere, la "g" di genera e la "p" di
   spazio, finiscono fuori: senza un po' d'aria sotto la maschera le taglia a meta'.
   Il margine negativo e' identico al padding, cosi' l'aria non sposta il ritmo delle
   righe (prima erano 67,8 e 73,6 e le righe si sovrapponevano di sei pixel). */
.spz__header[data-has-switcher] [data-reveal="mask"]>*{padding-bottom:var(--s6);margin-bottom:calc(var(--s6) * -1)}

/* La parola che ruota ha bisogno del contrario: un riquadro che la nasconda del tutto
   mentre aspetta il suo turno, parcheggiata sotto la riga. Prima ereditava l'aria della
   maschera qui sopra e restava visibile per un centinaio di pixel, mezza dentro e mezza
   fuori: e' quello che si vedeva sfarfallare scorrendo su Safari.
   Qui la maschera e' sua e ha solo l'aria per la coda della "p" di possibilita'.
   Il margine negativo la restituisce, cosi' la terza riga resta allineata alle altre
   due: prima un margin-top di .14em la spingeva fuori ritmo. */
.spz__header[data-has-switcher] .string-switcher-wrapper{
  display:block;
  overflow:hidden;
  padding-bottom:.16em;
  margin-bottom:-.16em;
}

/* ---------- Header sempre visibile: nav (logo + icona menu) SOPRA la hero (era coperta).
   I modali restano sopra la nav per non farsi coprire dal logo/menu. ---------- */
.spz__nav{z-index:9100}
.spz__modal{z-index:9600}                    /* contatti + legale sopra la nav */
.spz__modal.spz__menu-panel{z-index:9700}    /* menu sopra tutto (tranne loader/transizione) */

/* ---------- Home / Claim editoriale in Evans Narrow, A TUTTA PAGINA.
   Parole evidenziate: box nero su desktop, arancione su mobile (fondo scuro). ---------- */
.spz__home-claim{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:var(--r-sezione) 0;color:var(--text-color)}
.spz__claim{font-family:"Evans Narrow","Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:var(--fs-claim);line-height:var(--lh-titolo);margin:0}
/* parole evidenziate: box NERO con testo chiaro (invertito). Stato iniziale = trasparente
   (nessun box): all'arrivo in sezione il box nero "entra" con uno sweep (JS/ScrollTrigger)
   e il testo passa a chiaro, come nella prima home. */
.spz__hl{
  color:#181818;                                   /* testo scuro finche' il box non e' entrato */
  background-image:linear-gradient(90deg,#181818 50%,transparent 50%);
  background-size:200% 100%;
  background-repeat:no-repeat;
  background-position:100% 0;                       /* mostra la meta' trasparente = nessun box */
  padding:.04em .3em;
  border-radius:3px;
  white-space:nowrap;                               /* la frase evidenziata resta un box unico */
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ---------- Home / Bande immagine a tutta larghezza (zoom-in su scroll) ---------- */
.spz__home-image{padding:0}
.spz__home-image__frame{margin:0;width:100%;height:70vh;max-height:760px;overflow:hidden}
.spz__home-image__frame img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}

/* ---------- Location / indirizzo + mappa Leaflet a tutta larghezza ---------- */
/* Aria sotto la sezione (tra la mappa e "Vuoi far parte") e sotto il titolo. */
.spz__location{padding-bottom:var(--r-sezione)}
/* Titolo piu' piccolo: "di Caltagirone" resta su una riga -> totale due righe. */
.spz__location h2{font-size:var(--fs-titolo);line-height:var(--lh-titolo)}
.spz__location .row.align-items-end{margin-bottom:var(--r-blocco-l)!important}
.spz__location__map{margin-bottom:clamp(var(--s2),4vw,var(--s5))}
/* Indirizzo su righe (venue in grassetto + via + citta'). */
.spz__location__addr{font-size:var(--t3);line-height:var(--lh-lettura);margin:0}
.spz__location__addr strong{font-weight:700}
.spz__location__addr span{display:inline}
.spz__location__access{font-size:var(--t2);opacity:.62;margin:var(--s0) 0 0}
/* Pulsante "Portami qui". */
.spz__location__cta{display:inline-flex;align-items:center;gap:var(--s-2);margin-top:var(--s2);
  padding:var(--s-1) var(--s2);border-radius:999px;border:1px solid var(--text-color);
  font-size:var(--t2);color:var(--text-color);text-decoration:none;
  transition:background-color .3s ease,color .3s ease,gap .3s ease}
.spz__location__cta:hover{background:#F7AC60;border-color:#F7AC60;color:#181818;gap:var(--s0)}
.spz__location__cta span{transition:transform .3s ease}
.spz__location__cta:hover span{transform:translateX(4px)}
/* Contenitore della mappa, a tutta larghezza. */
.spz__location__map{width:100%;aspect-ratio:16/7;border-radius:20px;overflow:hidden;border:1px solid var(--text-color)}
/* Mappa Leaflet: tile in bianco/nero, marker ARANCIONE (e' nel marker-pane, non filtrato). */
.spz__location__map__canvas{width:100%;height:100%}
.spz__location__map .leaflet-container{background:#EBE8E3;font-family:inherit}
.spz__location__map .leaflet-container img{max-width:none}          /* fix tile spezzate (reset img max-width del tema) */
/* Le tessere di Protomaps col flavor "dark" sono piu' scure del fondo della pagina:
   fondo #141414 e strade #292929 contro l'inchiostro #181818, e la mappa sparisce.
   Il filtro le solleva. Il grayscale che c'era qui prima serviva alle tessere a
   colori di CARTO e adesso non ha piu' niente da togliere: la tavolozza e' gia'
   neutra. Se un giorno si cambia flavor, questo numero va rifatto a occhio. */
.spz__location__map .leaflet-tile-pane{filter:brightness(1.7)}
.spz-map-pin{background:none;border:0}
/* Pulsanti zoom +/- senza bordi (hover arancione del brand) */
.spz__location__map .leaflet-bar{border:none;box-shadow:0 2px 8px rgba(24,24,24,.18);border-radius:10px;overflow:hidden}
/* Il "+" e il "-" restavano incollati a sinistra: Leaflet li centra con text-align + line-height
   sul box da 30px, ma lo <span> interno viene stirato a tutta larghezza dai reset del tema.
   Centratura forzata con flex sul bottone e larghezza auto sullo span. */
.spz__location__map .leaflet-container .leaflet-bar a{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border:none;
  line-height:1;text-indent:0;letter-spacing:0;text-align:center;color:#181818}
.spz__location__map .leaflet-container .leaflet-bar a > *{
  display:block;flex:0 0 auto;width:auto;margin:0;padding:0;line-height:1}
.spz__location__map .leaflet-bar a:hover{background:#F7AC60;color:#181818}
/* Attribuzione discreta (senza il prefisso "Leaflet") */
.spz__location__map .leaflet-control-attribution{background:rgba(235,232,227,.7);font-size:var(--t0);opacity:.55}
.spz__location__map img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.spz__location__map__ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,rgba(24,24,24,.04),rgba(24,24,24,.04) 12px,transparent 12px,transparent 24px)}
.spz__location__map__ph span{font-size:var(--t2);letter-spacing:.2em;text-transform:uppercase;opacity:.4}
@media (max-width:767px){.spz__location__map{aspect-ratio:4/3}}

/* ---------- Eventi: griglia card (home "Prossimi eventi" + pagina /eventi/) ---------- */
.spz__event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(var(--s1),2.6vw,var(--s3))}
.spz__event-grid--archive{margin-top:var(--s0)}
/* 991.98 e non 900: sotto i 992 il .container di Bootstrap scende a 720px,
   con 3 colonne le anteprime 4:5 diventavano francobolli da 213px. */
@media (max-width:991.98px){.spz__event-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.spz__event-grid{grid-template-columns:1fr}}

/* Numero di schede: con 3 colonne fisse un evento solo lasciava due terzi di
   sezione vuoti. Due schede prendono meta' larghezza a testa, una sola passa in
   orizzontale (locandina a sinistra, testo a destra) come la testata del singolo.
   Vanno DOPO le media query qui sopra: stessa specificita', vince l'ultima. */
.spz__event-grid--2{grid-template-columns:repeat(2,1fr)}
.spz__event-grid--1{grid-template-columns:1fr}
.spz__event-grid--1 .spz__event-card__link{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--r-blocco-l);align-items:center}
.spz__event-grid--1 .spz__event-card__media{margin-bottom:0}
.spz__event-grid--1 .spz__event-card__title{font-size:var(--fs-sottotitolo)}
@media (max-width:600px){
	.spz__event-grid--2{grid-template-columns:1fr}
	.spz__event-grid--1 .spz__event-card__link{grid-template-columns:1fr;gap:0}
	.spz__event-grid--1 .spz__event-card__media{margin-bottom:var(--s0)}
	.spz__event-grid--1 .spz__event-card__title{font-size:var(--t4)}
}

.spz__event-card__link{display:block;color:var(--text-color);text-decoration:none}
/* Anteprima in formato 4:5 (le locandine sono 1080x1350, taglio Instagram). */
.spz__event-card__media{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:rgba(24,24,24,.06);margin-bottom:var(--s0)}
.spz__event-card__img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.spz__event-card__link:hover .spz__event-card__img{transform:scale(1.05)}
.spz__event-card__media--ph{width:100%;height:100%;background:repeating-linear-gradient(45deg,rgba(24,24,24,.06),rgba(24,24,24,.06) 12px,transparent 12px,transparent 24px)}
.spz__event-card__date{position:absolute;top:.8rem;left:.8rem;background:#F7AC60;color:#181818;font-size:var(--t1);font-weight:600;padding:var(--s-4) var(--s-1);border-radius:999px;letter-spacing:.02em}
.spz__event-card__type{display:block;font-size:var(--t1);letter-spacing:var(--tr-etichetta);text-transform:uppercase;opacity:.55;margin-bottom:var(--s-3)}
.spz__event-card__title{font-size:var(--t4);line-height:var(--lh-titolo);margin:0 0 var(--s-3)}
.spz__event-card__meta{font-size:var(--t2);opacity:.7;margin:0}

/* Pagina eventi: hero + filtri + stati vuoti */
.spz__eventi-hero{padding-top:var(--r-testata)}
.spz__eventi-hero__text{font-size:var(--t3);line-height:var(--lh-lettura);max-width:620px;margin:var(--s1) 0 0;opacity:.85}
.spz__eventi-filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(var(--s3),4vw,var(--s5))}
.spz__chip{display:inline-block;padding:var(--s-3) var(--s1);border-radius:999px;border:1px solid var(--text-color);font-size:var(--t2);color:var(--text-color);text-decoration:none;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.spz__chip:hover{background:var(--text-color);color:var(--background-color)}
.spz__chip.is-active{background:#F7AC60;border-color:#F7AC60;color:#181818}
.spz__eventi-empty{font-size:var(--t3);opacity:.7}

/* Singolo evento: testata a due colonne, locandina 4:5 a sinistra e testo a destra */
.spz__evento-single__hero{padding-top:var(--r-testata)}
.spz__evento-single__head{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);
  gap:var(--r-blocco-l);align-items:center}
.spz__evento-single__head--noimg{grid-template-columns:minmax(0,1fr)}
.spz__evento-single__media{position:relative;margin:0;aspect-ratio:4/5;border-radius:20px;overflow:hidden;
  background:rgba(24,24,24,.06)}
.spz__evento-single__media img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.spz__evento-single__intro{min-width:0}
/* l'occhiello sta vicino al titolo: sono lo stesso blocco */
.spz__evento-single__intro .spz__eyebrow{margin-bottom:var(--s0)}
.spz__evento-single__title{font-size:var(--fs-claim);line-height:var(--lh-display);margin:0;overflow-wrap:break-word}
/* senza locandina il titolo non deve stendersi su tutta la larghezza */
.spz__evento-single__head--noimg .spz__evento-single__intro{max-width:900px}
/* respiro tra titolo e dati dell'evento (data, ora, luogo) */
.spz__evento-single__meta{font-size:var(--t2);opacity:.8;margin:var(--r-card) 0 0;line-height:var(--lh-lettura)}
/* si impila a 991.98 e non a 900: sotto i 992 il .container scende a 720px e a due
   colonne il titolo (4.6vw) non ci sta piu nella colonna di testo. */
@media (max-width:991.98px){
  .spz__evento-single__head{grid-template-columns:minmax(0,1fr);gap:clamp(var(--s2),5vw,var(--s4))}
  .spz__evento-single__media{max-width:440px}
  .spz__evento-single__title{font-size:clamp(var(--t5),5.5vw,var(--t7))}
}
/* il corpo sta piu vicino alla testata: con la locandina alta 400px di padding erano un buco */
.spz__evento-single__body{padding-top:var(--r-coda)}
.spz__evento-single__content{font-size:var(--t3);line-height:var(--lh-lettura)}
.spz__evento-single__content p{margin:0 0 var(--s1)}
/* senza queste, un h2 scritto nell'editor uscirebbe piu grande del titolo dell'evento */
.spz__evento-single__content h2{font-size:var(--t5);margin:var(--s4) 0 var(--s0);line-height:var(--lh-titolo)}
.spz__evento-single__content h3{font-size:var(--t3);margin:var(--s3) 0 .75rem;line-height:var(--lh-titolo)}
.spz__evento-single__content ul,.spz__evento-single__content ol{margin:0 0 var(--s1) var(--s1)}
.spz__evento-single__content li{margin-bottom:.5rem}
.spz__evento-single__content a{color:#F7AC60;text-decoration:underline}

/* ---------- Scroll indicator: cerchio con freccia al centro e pallini attorno che si riempiono scrollando (click = torna su) ---------- */
.spz__totop{position:fixed;right:var(--totop-inset);bottom:var(--totop-inset);
  width:var(--totop-size);height:var(--totop-size);padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--background-color);color:var(--text-color);box-shadow:0 6px 24px rgba(0,0,0,.18);
  z-index:9050;opacity:0;visibility:hidden;transform:translateY(12px);
  -webkit-transition:opacity .4s ease,visibility .4s ease,transform .4s ease,background-color .7s ease,color .7s ease;
  transition:opacity .4s ease,visibility .4s ease,transform .4s ease,background-color .7s ease,color .7s ease}
.spz__totop.is-visible{opacity:1;visibility:visible;transform:none}
/* su fondo arancione il cerchio (che usa il colore di sfondo) sparirebbe e i pallini
   gia percorsi, arancioni, pure: tengo il cerchio crema come sul tema chiaro. */
[data-theme=yellow] .spz__totop{background:#EBE8E3;color:#181818}
.spz__totop__ring{position:absolute;inset:0}
/* i pallini sono posizionati in cerchio via transform inline (rotate + translateY) nell'HTML */
.spz__totop__dot{position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.22;
  -webkit-transition:opacity .3s ease,background-color .3s ease;transition:opacity .3s ease,background-color .3s ease}
.spz__totop__dot.is-on{background:#F7AC60;opacity:1}
.spz__totop__ico{position:absolute;top:50%;left:50%;width:34%;height:34%;transform:translate(-50%,-50%);
  background-color:currentColor;
  -webkit-mask:url(../icons/arrows/frecce-01.png) center/contain no-repeat;
  mask:url(../icons/arrows/frecce-01.png) center/contain no-repeat}

/* ---------- Modulo contatti (Contact Form 7): fullscreen "Vuoi far parte" + pagina Contatti ---------- */
.spz__form{max-width:none}
.spz__form .spz__form__row{display:flex;flex-direction:column;margin-bottom:0}
.spz__form .spz__form__label{display:block;font-size:var(--t1);letter-spacing:var(--tr-etichetta);text-transform:uppercase;opacity:.6;margin-bottom:var(--s-3);transition:color .3s ease,opacity .3s ease}
.spz__form .spz__form__opt{opacity:.55;text-transform:none;letter-spacing:.02em}
.spz__form .spz__form__row:focus-within .spz__form__label{color:#F7AC60;opacity:1}
/* Nel popup i campi restano nudi: bastano i placeholder. L'etichetta resta nel
   markup ma fuori vista, cosi' chi usa uno screen reader sa cosa sta compilando. */
.spz__contact .spz__form .spz__form__label{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.spz__form .wpcf7-form-control-wrap{display:block}
/* campi a filo (underline): trasparenti, linea sotto in currentColor, testo editoriale */
.spz__form input.wpcf7-form-control:not(.wpcf7-submit):not([type=checkbox]),
.spz__form textarea.wpcf7-form-control{
  width:100%;background:transparent;color:inherit;border:0;border-bottom:1.5px solid currentColor;
  border-radius:0;padding:var(--s-3) 0;font-size:var(--fs-lead);font-family:inherit;line-height:var(--lh-lettura);
  -webkit-transition:border-color .3s ease;transition:border-color .3s ease}
.spz__form textarea.wpcf7-form-control{min-height:120px;resize:vertical}
.spz__form input.wpcf7-form-control::placeholder,
.spz__form textarea.wpcf7-form-control::placeholder{color:currentColor;opacity:.4}
.spz__form input.wpcf7-form-control:focus,.spz__form textarea.wpcf7-form-control:focus{outline:none;border-bottom-color:#F7AC60}
/* niente sfondo giallo dell'autofill: mantiene il campo a filo */
.spz__form input:-webkit-autofill,.spz__form input:-webkit-autofill:focus{-webkit-text-fill-color:currentColor;transition:background-color 9999s ease-in-out 0s}
/* consenso privacy */
.spz__form .spz__form__consent{margin:0;font-size:var(--t2);line-height:var(--lh-lettura)}
.spz__form .wpcf7-acceptance .wpcf7-list-item{margin:0;display:flex;align-items:flex-start;gap:var(--s-2)}
.spz__form .wpcf7-acceptance input[type=checkbox]{margin-top:var(--s-6);width:1.05rem;height:1.05rem;flex:0 0 auto;accent-color:#181818}
.spz__form .spz__form__consent a{color:inherit;text-decoration:underline}
/* layout: campi (griglia 2 colonne) a sinistra che riempiono la larghezza, cerchio INVIA a destra */
.spz__form--split{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r-blocco-l)}
.spz__form--split .spz__form__fields{flex:1 1 0;min-width:min(100%,420px);
  display:grid;grid-template-columns:1fr 1fr;column-gap:var(--r-blocco);row-gap:var(--r-card)}
/* Messaggio e consenso occupano l'intera riga */
.spz__form__row--full,.spz__form .spz__form__consent{grid-column:1 / -1}
.spz__form--split .spz__form__aside{flex:0 0 auto;margin-left:auto;display:flex;justify-content:center}
.spz__form .spz__form__submit{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);margin:0}
/* pulsante circolare (ink con bordo paper, hover arancio) */
/* Pulsante = STESSO componente ovunque: colori dal tema, cosi' e' sempre in contrasto col fondo
   (chiaro su fondo scuro, scuro su fondo chiaro). Hover: si allarga leggermente. */
.spz__form input.wpcf7-submit{
  width:clamp(9.5rem,13vw,13rem);height:clamp(9.5rem,13vw,13rem);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--text-color);color:var(--background-color);border:2px solid var(--text-color);border-radius:50%;
  padding:0;font-size:var(--t3);font-family:inherit;cursor:pointer;line-height:1;letter-spacing:.02em;
  -webkit-transition:transform .35s cubic-bezier(.19,1,.22,1),opacity .3s ease;
  transition:transform .35s cubic-bezier(.19,1,.22,1),opacity .3s ease}
.spz__form input.wpcf7-submit:hover{transform:scale(1.06)}
/* durante l'invio il pulsante resta leggibile: mezza opacita' su fondo arancione spariva */
.spz__form input.wpcf7-submit:disabled{opacity:.75;cursor:default}
@media (max-width:600px){
  .spz__form--split .spz__form__fields{grid-template-columns:1fr}
  .spz__form--split .spz__form__aside{margin-left:0;width:100%;margin-top:var(--s0)}
  .spz__form input.wpcf7-submit{width:9rem;height:9rem}
  /* Nel popup il campo messaggio si accorcia: con l'altezza di default (10 righe)
     il pulsante Invia finiva sotto il bordo dello schermo. */
  .spz__contact .spz__form textarea.wpcf7-form-control{min-height:0;height:8.5rem}
}
/* stato "Grazie!" brandizzato: sostituisce campi + pulsante quando l'invio va a buon fine */
.spz__form__thanks{display:none;flex:1 1 100%;flex-direction:column;justify-content:center;min-height:220px}
.spz__form.is-sent .spz__form__fields,.spz__form.is-sent .spz__form__aside{display:none}
.spz__form.is-sent .spz__form__thanks{display:flex;-webkit-animation:spzThanks .8s cubic-bezier(.19,1,.22,1) both;animation:spzThanks .8s cubic-bezier(.19,1,.22,1) both}
.spz__form__thanks__big{font-family:"Biscottini","Arial Black",sans-serif;font-weight:400;font-size:clamp(var(--t7), calc(1.999rem + 5.376vw), var(--t10));line-height:var(--lh-display);color:#F7AC60;margin:0}
.spz__form__thanks__txt{font-size:var(--t3);line-height:var(--lh-lettura);opacity:.85;margin:var(--s0) 0 0;max-width:34ch}
@-webkit-keyframes spzThanks{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes spzThanks{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* messaggi CF7 (validazione + esito) */
.spz__form .wpcf7-not-valid-tip{color:#b02a2a;font-size:var(--t1);margin-top:var(--s-4)}
.spz__form input.wpcf7-not-valid,.spz__form textarea.wpcf7-not-valid{border-bottom-color:#b02a2a}
.wpcf7 .wpcf7-response-output{margin:var(--s1) 0 0;padding:var(--s0) var(--s0);border-radius:10px;border:1px solid currentColor;font-size:var(--t2);line-height:var(--lh-lettura)}
/* col nostro "Grazie!" visibile, il box esito CF7 resta solo per gli screen reader */
.spz__form.is-sent ~ .wpcf7-response-output{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:-1px;padding:0;border:0}
.spz__form .wpcf7-spinner{margin:0 0 0 var(--s-6)}
/* honeypot: garantisce che resti nascosto anche senza il CSS del plugin */
.spz__form .wpcf7-form-control-wrap[data-name^="honeypot"]{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* nel modal (fondo arancione) tutto il testo CF7 in ink; l'inner scrolla se il form e' alto */
.spz__contact .wpcf7{color:#181818}
.spz__contact__inner{overflow-y:auto}
/* popup: fondo arancione fisso -> pulsante ink con testo chiaro (contrasto). Hover = scale (ereditato). */
.spz__contact .spz__form input.wpcf7-submit{background:#181818;color:#EBE8E3;border-color:#181818}
/* margini laterali comodi nel popup (prima il form era quasi a filo bordo) */
.spz__contact .container-fluid{padding-left:clamp(var(--s2),5vw,var(--s7));padding-right:clamp(var(--s2),5vw,var(--s7))}
/* pagina Contatti a tutta larghezza: padding comodo + tolgo il cap di leggibilita' (max-width:820)
   del contenuto, cosi' il modulo copre lo schermo con il cerchio a destra. */
.spz__page--wide .container-fluid{padding-left:clamp(var(--s2),5vw,var(--s7));padding-right:clamp(var(--s2),5vw,var(--s7))}
.spz__page--wide .spz__page__content{max-width:none}
/* Contenuto pagine (Partecipa, Chi siamo, ...): testo leggibile, liste ordinate. */
.spz__page__content{font-size:clamp(var(--t2),1.5vw,var(--t3));line-height:var(--lh-lettura)}
.spz__page__content ul{margin:var(--s1) 0 0;padding-left:var(--s1)}
.spz__page__content li{margin:var(--s-3) 0}
.spz__page__content strong{color:var(--strong-color)}
/* su Partecipa (wide): l'intro resta leggibile, il modulo (.wpcf7) va a tutta larghezza */
.spz__page--wide .spz__page__content>p,
.spz__page--wide .spz__page__content>ul{max-width:62ch}

/* ---------- Pagina 404 (non trovata) ---------- */
.spz__404{min-height:100vh;min-height:100svh;display:flex;align-items:center}
.spz__404__title{font-family:"Biscottini","Arial Black",sans-serif;font-weight:400;font-size:clamp(var(--t6), calc(1.589rem + 4.221vw), var(--t9));line-height:var(--lh-display);margin:0}
.spz__404__text{font-size:clamp(var(--t3), calc(1.143rem + 0.527vw), var(--t4));line-height:var(--lh-lettura);max-width:34ch;margin:var(--s2) 0 0;opacity:.9}
.spz__404__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);margin-top:var(--s4)}

/* ---------- Pagina hub "Cosa trovi qui" (le 8 aree) ---------- */
.spz__hub__head{max-width:56ch;margin-bottom:clamp(var(--s4),5vw,var(--s6))}
.spz__hub__title{margin:var(--s-3) 0 0}
.spz__hub__intro{font-size:var(--fs-lead);line-height:var(--lh-lettura);margin-top:var(--s1);opacity:.92}
.spz__hub__intro p{margin:0 0 var(--s0)}
.spz__hub__intro p:last-child{margin-bottom:0}

/* ---------- Pre-footer "Il percorso continua" (mappa delle aree) ---------- */
/* Blocco giallo autonomo: colori fissi, non dipende dal motore-tema (che su
   pagine corte + Locomotive non aggancia in modo affidabile una sezione breve).
   Cosi' e' sempre giallo, icone sempre nere, badge sempre leggibile. */
.spz__explore{padding:var(--r-sezione) 0;background:#F7AC60;color:#181818}
.spz__explore__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s0) var(--s3);flex-wrap:wrap}
.spz__explore__head .spz__eyebrow{margin-bottom:0}
.spz__explore__count{font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;opacity:.6;white-space:nowrap}

/* Invito "Prossima tappa" */
.spz__explore__next{display:flex;align-items:center;gap:clamp(var(--s0),3vw,var(--s4));margin-top:clamp(var(--s2),3vw,var(--s4));padding:var(--r-blocco) 0;color:inherit;text-decoration:none;border-top:1px solid rgba(24,24,24,.2)}
.spz__explore__next__ico{flex:0 0 auto;width:clamp(3.2rem,6vw,4.8rem);height:clamp(3.2rem,6vw,4.8rem);display:inline-flex;align-items:center;justify-content:center}
.spz__explore__next__ico img{width:100%;height:100%;object-fit:contain;filter:brightness(0)}
.spz__explore__next__body{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.spz__explore__next__label{font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.spz__explore__next__title{margin:0;line-height:var(--lh-display);font-size:var(--fs-titolo)}
.spz__explore__next__text{font-size:var(--t2);line-height:var(--lh-lettura);opacity:.75;max-width:46ch}
.spz__explore__next .spz__linkarrow{width:1.7rem;height:1.7rem;flex:0 0 auto;transition:transform .3s ease}
.spz__explore__next:hover .spz__linkarrow{transform:translate(4px,-4px)}
.spz__explore__next:hover .spz__explore__next__title{opacity:.85}

/* Linea a pallini con tutte le tappe (scroll orizzontale su mobile) */
.spz__explore__line{list-style:none;margin:var(--r-blocco) 0 0;padding:var(--s0) 0 var(--s2);display:flex;position:relative;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.spz__explore__line::-webkit-scrollbar{display:none}
.spz__explore__stop{position:relative;flex:1 0 auto;min-width:8.2rem;text-align:center}
/* Desktop: le 8 tappe entrano senza scroll -> overflow visibile, la pillola "Sei qui" non viene mai tagliata */
@media(min-width:768px){.spz__explore__stop{min-width:0}.spz__explore__line{overflow:visible}}
.spz__explore__stop::before{content:"";position:absolute;top:.5rem;left:0;right:0;height:2px;background:currentColor;opacity:.28;z-index:0}
.spz__explore__stop:first-child::before{left:50%}
.spz__explore__stop:last-child::before{right:50%}
.spz__explore__stop>a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:0 var(--s-4);color:inherit;text-decoration:none}
.spz__explore__dot{width:1rem;height:1rem;border-radius:50%;border:2px solid currentColor;background:#F7AC60;transition:transform .25s ease,background-color .25s ease}
.spz__explore__stop>a:hover .spz__explore__dot,.spz__explore__stop>a:focus-visible .spz__explore__dot{transform:scale(1.25)}
.spz__explore__stop.is-here .spz__explore__dot{background:currentColor;transform:scale(1.2)}
.spz__explore__stop__name{font-size:var(--t1);line-height:var(--lh-titolo);opacity:.65;transition:opacity .25s ease;max-width:9rem}
.spz__explore__stop>a:hover .spz__explore__stop__name,.spz__explore__stop>a:focus-visible .spz__explore__stop__name{opacity:1}
.spz__explore__stop.is-here .spz__explore__stop__name{opacity:1;font-weight:600}
.spz__explore__here{display:inline-block;margin-top:var(--s-4);font-size:var(--t0);text-transform:uppercase;letter-spacing:.14em;color:#F7AC60;background:#181818;border-radius:999px;padding:var(--s-7) var(--s-2);white-space:nowrap}

@media(max-width:600px){
	.spz__explore__next{align-items:flex-start}
	.spz__explore__next .spz__linkarrow{align-self:center}
}

/* ---------- Newsletter nel footer (placeholder): colonna centrale, tra Extopia e cofinanziata ---------- */
.spz__footer__newsletter{flex:1 1 16rem;max-width:24rem;text-align:left;color:var(--text-color)}
.spz__footer__newsletter__label{display:block;font-size:var(--t1);letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin-bottom:var(--s0)}
.spz__newsletter{display:flex;gap:var(--s0);align-items:center;justify-content:flex-start;flex-wrap:nowrap;max-width:22rem}
.spz__newsletter input[type=email]{flex:1 1 auto;min-width:0;background:transparent;border:0;border-bottom:1.5px solid currentColor;color:inherit;font-size:var(--t2);padding:var(--s-3) var(--s-6);outline:none;transition:border-color .25s ease}
.spz__newsletter input[type=email]::placeholder{color:currentColor;opacity:.45}
.spz__newsletter input[type=email]:focus{border-bottom-width:2px}
/* Bottone a pallina (cerchio) a destra del campo, con freccia a pallini del brand */
.spz__newsletter button{flex:0 0 auto;width:3.1rem;height:3.1rem;border-radius:50%;background:var(--text-color);color:var(--background-color);border:2px solid var(--text-color);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease}
.spz__newsletter button:hover{transform:scale(1.08)}
.spz__newsletter button .spz__linkarrow{width:1.15rem;height:1.15rem}
.spz__footer__newsletter__hint{font-size:var(--t1);opacity:.5;margin:var(--s-1) 0 0}
.spz__footer__newsletter__done{display:none;font-size:var(--t2);opacity:.92;margin:var(--s-6) 0 0}
.spz__footer__newsletter.is-done .spz__newsletter,
.spz__footer__newsletter.is-done .spz__footer__newsletter__hint{display:none}
.spz__footer__newsletter.is-done .spz__footer__newsletter__done{display:block}

/* ---------- Stackpress (feed Substack, pagina Magazine) ---------- */
/* Il plugin non porta colori suoi: i default delle sue variabili sono currentColor
   e transparent, quindi il feed segue gia' da solo il data-background della sezione
   in cui finisce, senza JavaScript. Qui gli si dice soltanto qual e' l'accento del
   brand e che forma hanno le card, la stessa delle card servizi (bordo 1px, r 22). */
.stackpress{--sp-accent:var(--strong-color);--sp-border-color:var(--text-color);--sp-radius:22px}
/* Il feed e' il contenuto della pagina, non un blocco incastrato nel testo: gli si
   da' aria sopra, come tra due sezioni. */
.spz__page__content .stackpress{margin-top:var(--s5)}
/* In home il feed sta dentro una sezione che ha gia' la sua intestazione e i suoi
   margini: niente aria in piu' sopra, e stesso passo della griglia eventi. */
.spz__home-magazine .stackpress{--sp-gap:var(--s4)}
/* La finestra di lettura non puo' ereditare i colori: sta in un <dialog> attaccato
   al body, e il tema cambia il colore del testo a seconda della sezione a meta'
   schermo. Le si da' quindi la palette chiara del brand, che e' quella giusta per
   leggere un articolo lungo: intonaco sotto, inchiostro sopra, arancione sui link. */
.stackpress-reader{--sp-reader-bg:#EBE8E3;--sp-reader-text:#181818;--sp-reader-accent:#181818}
.stackpress-reader .stackpress-reader__content a{color:#181818}
.stackpress-reader .stackpress-reader__origin a{color:#181818}

/* ============================================================
   Rifiniture MOBILE (<=767px)
   ============================================================ */
@media (max-width:767px){

  /* Menu: voci grandi che coprono l'intera altezza dello schermo (distribuite in verticale) */
  .spz__menu-panel__inner{min-height:100svh;display:flex;flex-direction:column;padding:var(--r-sezione) var(--s2) var(--r-blocco)}
  .spz__menu-panel ul{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-evenly;margin:0}
  .spz__menu-panel li{margin:0}
  .spz__menu-panel li a{font-size:clamp(var(--t6),10vw,var(--t7));line-height:var(--lh-display)}

  /* "Il percorso continua": la linea orizzontale su mobile era stretta e le
     tappe venivano tagliate. La trasformo in una TIMELINE VERTICALE:
     pallino a sinistra + nome a destra, con la linea che scorre in verticale. */
  .spz__explore__line{flex-direction:column;overflow:visible;padding:.2rem 0 0;gap:0;align-items:stretch}
  .spz__explore__stop{min-width:0;flex:0 0 auto;text-align:left}
  /* connettore verticale, centrato sul pallino (x = .5rem) */
  .spz__explore__stop::before{top:0;bottom:0;left:calc(.5rem - 1px);right:auto;width:2px;height:auto}
  .spz__explore__stop:first-child::before{top:50%;bottom:0}
  .spz__explore__stop:last-child::before{top:auto;bottom:50%}
  /* riga: pallino + nome affiancati */
  .spz__explore__stop>a{flex-direction:row;align-items:center;gap:var(--s0);padding:var(--s-2) 0}
  .spz__explore__stop__name{max-width:none;font-size:var(--t2)}
  .spz__explore__stop.is-here .spz__explore__stop__name{font-weight:600}
  .spz__explore__here{margin-top:0;margin-left:var(--s-1)}

  /* Newsletter: centrata tra Extopia/social (sopra) e Iniziativa cofinanziata (sotto) */
  .spz__footer__newsletter{text-align:center;margin-left:auto;margin-right:auto}
  .spz__newsletter{justify-content:center;margin:0 auto}

  /* Statement "Uno spazio che genera": il testo occupa ~90% della larghezza,
     sempre su 3 righe (le righe non vanno a capo grazie a nowrap). */
  .spz__header[data-has-switcher]{overflow-x:clip}
  .spz__header[data-has-switcher] h1{font-size:var(--fs-display)}
  .spz__header[data-has-switcher] h1 > span{white-space:nowrap}
}

/* ---------- Eventi in home: elenco, non schede ---------- */
/* Sopra c'e' "Cosa trovi qui" con le sue card e sotto il magazine con la sua
   lista: tre blocchi uguali di fila si leggevano come lo stesso modulo ripetuto
   tre volte. Le schede con immagine restano nell'archivio /eventi/. */
.spz__event-list{display:flex;flex-direction:column;border-top:1px solid currentColor}
.spz__event-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--r-blocco);
  padding:var(--r-riga) 0;
  border-bottom:1px solid currentColor;
  color:inherit;text-decoration:none;
}
/* Il filo fra una riga e l'altra e' sottile e prende il colore del testo: sul
   fondo arancio un grigio fisso sarebbe sparito. */
.spz__event-list,.spz__event-row{border-color:color-mix(in srgb,currentColor 22%,transparent)}
.spz__event-row__testo{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.spz__event-row__occhiello{font-size:var(--t1);letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.spz__event-row__titolo{font-size:var(--fs-sottotitolo);line-height:var(--lh-titolo);text-wrap:balance}
.spz__event-row__sotto{font-size:var(--t2);opacity:.66}
.spz__event-row .spz__linkarrow{opacity:.5;transition:transform .3s ease,opacity .3s ease}
.spz__event-row:hover .spz__linkarrow{opacity:1;transform:translate(6px,-6px)}
@media (prefers-reduced-motion:reduce){
  .spz__event-row .spz__linkarrow{transition:none}
}

/* ---------- Magazine: respiro sotto gli articoli ---------- */
/* La sezione non aveva spaziatura in basso: ereditava solo quella in alto dalla
   regola generale, e l'ultimo articolo finiva incollato alla banda foto.
   I due valori sono diversi di proposito. Sopra il vuoto e' la somma di due
   spaziature, quella in basso degli eventi piu' quella in alto di qui: 276 px
   misurati. Sotto c'e' una banda foto, che di spaziatura non ne ha, quindi il
   vuoto deve portarselo tutto questa sezione. Con 7rem da entrambe le parti
   sotto ne restavano 180 e la sezione sembrava schiacciata sulla foto. */
.spz__home-magazine{padding:var(--s8) 0 var(--s11)}

/* ====================================================================
   FASE 4 — la misura del testo corrente
   I paragrafi lunghi giravano su 162 caratteri, quasi il triplo dei 45-75
   entro cui l'occhio ritrova da solo l'inizio della riga dopo. Il tetto e'
   62 caratteri, cioe' il contenitore diviso phi al quadrato: il testo sta
   nella parte MINORE della sezione aurea, non in tutta la larghezza.
   In ch e non in px perche' la misura dipende dal carattere, non dallo schermo.
   ==================================================================== */
.spz__value__text,
.spz__service-card__text,
.spz__eventi-hero__text,
.spz__evento-single__content p,
.spz__404__text,
.spz__footer__cofin__text,
.spz__mentions__inner p,
.spz__form .wpcf7-list-item-label,
.stackpress__excerpt{max-width:min(62ch,100%)}

/* ====================================================================
   FASE 5 — le colonne alla sezione aurea
   La griglia a dodici colonne di Bootstrap la sezione aurea non sa dirla:
   col-8/col-4 fa 2,000 e col-7/col-5 fa 1,400. Nessuno dei due e' 1,618, e
   fra loro non sono nemmeno lo stesso rapporto, quindi due blocchi che si
   somigliano si impaginavano in modo diverso senza motivo.
   Si corregge dal foglio di stile, senza toccare il markup: le classi
   restano quelle e cambia solo quanto sono larghe.
   ==================================================================== */
@media (min-width:992px){
  .spz__home-events > .container > .row > .col-lg-8,
  .spz__home-magazine > .container > .row > .col-lg-8,
  .spz__location > .container > .row > .col-lg-7{flex:0 0 61.8%;max-width:61.8%;width:61.8%}
  .spz__home-events > .container > .row > .col-lg-4,
  .spz__home-magazine > .container > .row > .col-lg-4,
  .spz__location > .container > .row > .col-lg-5{flex:0 0 38.2%;max-width:38.2%;width:38.2%}
}

/* ====================================================================
   FASE 6 — le proporzioni dei blocchi
   Le bande erano alte il 70% della finestra con un tetto: voleva dire che
   cambiavano forma a ogni schermo, e la proporzione non era una scelta ma
   il risultato di quanto e' alta la finestra di chi guarda. Ora e' dichiarata.
   Su telefono phi al quadrato sarebbe una fessura, quindi li' vale phi: e'
   il passo prima nella stessa famiglia, non un'eccezione.
   ==================================================================== */
.spz__home-image__frame{height:auto;max-height:none;aspect-ratio:1.618}
@media (min-width:768px){
  .spz__home-image__frame{aspect-ratio:2.618}
}
.spz__location__map{aspect-ratio:2.618}

/* ---------- La mappa ---------- */
/* Il 29/08 e' stato tolto il cancelletto "Mostra la mappa", con tutto il suo
   stile: la mappa si carica da sola quando entra in vista. Il consenso alle
   tessere di CARTO lo raccoglie il banner cookie, che prima non c'era ed era
   il motivo del clic. Se un giorno il banner sparisce, il cancelletto va
   rimesso: chiedere una tessera comunica l'indirizzo IP di chi visita. */
.spz__location__map{position:relative}

/* Ripiego se Leaflet non arriva: un collegamento alle indicazioni al posto di un
   riquadro vuoto. Lo scrive lo script della mappa, non il PHP. */
.spz__map-ripiego{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--background-color);color:var(--text-color);
  font-size:var(--t2);text-decoration:underline;text-underline-offset:.25em;
}

/* ====================================================================
   Stackpress dentro la scala
   Il plugin espone le sue misure come variabili, quindi si aggancia ai token
   senza toccare il suo foglio: e' la via che ha previsto lui, e regge un suo
   aggiornamento. Le misure che ricava da queste (riassunto, data, link) le
   calcola con moltiplicatori suoi e restano fuori dalla nostra scala: per
   portarci anche quelle andrebbe rifatta la scala DENTRO il plugin, che e'
   un prodotto a se' e vive anche su altri siti.
   ==================================================================== */
.stackpress{
  --sp-body-size:var(--t2);
  --sp-title-size:clamp(var(--t4),3.4vw,var(--t6));
  --sp-gap:var(--s4);
  --sp-cover-ratio:1.618;          /* le copertine diventano rettangoli aurei */
  --sp-reader-width:min(62ch,92vw);/* stessa misura di riga del resto del sito */
}

/* ---------- Due misure che sfuggivano ai token ---------- */
/* "Scorri" nell'hero: e' dichiarata in styles.css, che non passa dalle scale
   perche' e' il foglio ereditato e non si tocca. Si riporta sulla scala da qui. */
.spz__hero .btn{font-size:var(--t1)}
/* Il pulsantino "Si'!" del footer, visibile solo sotto lg: anche lui viene da
   styles.css e teneva un 14px suo. */
.spz__footer .btn{font-size:var(--t1)}

/* La copertina grande in cima, quella della card "wide", ha una sua
   --sp-cover-ratio a 21/9 dichiarata dal plugin con specificita' piu' alta.
   Va riscritta li', non sul contenitore: il contenitore ha overflow:hidden ma
   non object-fit, quindi imporgli una proporzione lo rende piu' alto
   dell'immagine e sotto resta il vuoto, che sembra un'immagine tagliata.
   La grande prende phi al quadrato come le bande foto, le altre phi. */
.stackpress .stackpress__card--wide{
  --sp-cover-ratio:2.618;
  --sp-title-size:clamp(var(--t4),3.4vw,var(--t6));
  --sp-body-size:var(--t2);
}
@media (max-width:640px){
  .stackpress .stackpress__card--wide{--sp-cover-ratio:1.618}
}

/* ---------- Il cursore "differenza" torna nella palette ---------- */
/* E' l'unico pezzo del cursore che non passava dai token: styles.css gli
   scriveva addosso #161616, l'inchiostro del tema di partenza, che nella
   palette di Spazio Poi non esiste. Si vede sugli elementi marcati
   data-cursor-difference, cioe' il modulo contatti e le note legali. */
.c-cursor__difference{background-color:#181818;border-color:#181818}


/* ---------- Indirizzo della location su una riga ---------- */
/* Erano quattro righe impilate accanto al titolone: in colonna pesavano quanto
   lui e se lo contendevano. In riga diventano una didascalia, che e' quello che
   sono. Lo spazio a destra e a sinistra di ogni punto e' lo stesso passo della
   scala, cosi' i separatori respirano uguale e la riga non si accartoccia. */
.spz__location__addr{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:var(--s0)}
.spz__location__addr > *:not(:first-child){margin-left:var(--s1)}
/* Il separatore e' il pallino arancione del manifesto valori (.spz__value__dot),
   non un punto mediano: e' lo stesso segno, quindi la didascalia dell'indirizzo
   parla la lingua del resto della pagina. Misura fissa e non in em, cosi' i
   quattro pallini restano identici anche accanto all'accessibilita', che e' un
   gradino piu' piccola. */
.spz__location__addr > *:not(:first-child)::before{
  content:"";display:inline-block;
  width:10px;height:10px;border-radius:50%;
  background:#F7AC60;
  vertical-align:.06em;
  margin-right:var(--s1);
  -webkit-transition:background-color .7s ease;transition:background-color .7s ease;
}
/* Come per i pallini dei valori: sull'arancione un pallino arancione sparisce. */
body[data-theme=yellow] .spz__location__addr > *:not(:first-child)::before{background-color:#181818}
/* L'accessibilita' resta nella riga ma un gradino sotto per voce: e' un'utilita',
   non parte dell'indirizzo. */
.spz__location__addr__accesso{font-size:var(--t2);opacity:.62}

/* ---------- Il cursore dentro le card servizio ---------- */
/* La card si riempie di arancio fisso al passaggio. Su fondo scuro il cursore e'
   arancio anche lui, quindi entrando spariva dentro il proprio colore.
   L'inchiostro sull'arancio si legge sempre, qualunque sia il tema della sezione,
   quindi qui i colori sono fissi di proposito e non passano dai token. */
.c-cursor-wrapper.--su-card .c-cursor{background-color:#181818;border-color:#181818}
.c-cursor-wrapper.--su-card .c-cursor__inner{color:#EBE8E3}

/* ---------- Il cursore dentro "Il percorso continua" ---------- */
/* Stesso problema delle card servizio, ma qui l'arancio e' il fondo della
   sezione: il blocco e' dipinto a mano e non passa dal motore-tema, quindi il
   body resta su dark e il cursore continua a essere arancio su arancio (si
   leggeva solo la scritta "VAI", il cerchio spariva). Sopra questa sezione il
   cursore si veste di inchiostro con testo crema.
   Niente JavaScript: :has() basta e non dipende da un gestore agganciato solo
   sopra i 992 px, come invece succede per le card. */
body:has(.spz__explore:hover) .c-cursor{background-color:#181818;border-color:#181818}
body:has(.spz__explore:hover) .c-cursor__inner{color:#EBE8E3}

/* ---------- Tastiera: l'anello di focus ---------- */
/* Il foglio ereditato azzera l'outline in una ventina di regole Bootstrap, e sul
   resto arrivava solo l'anello di sistema: blu fuori palette e a 2,97:1 su
   inchiostro, sotto il minimo di 3:1. currentColor invece segue il tema, quindi
   si vede su tutti e tre i fondi senza doverne scrivere tre versioni.
   Le voci con la classe ci sono perche' le regole di Bootstrap che tolgono
   l'outline hanno specificita' piu' alta di un selettore di elemento. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.spz__newsletter input[type=email]:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}

/* ---------- I link dentro "Note legali" ---------- */
/* La modale e' dipinta a inchiostro (riga 324) ma i link restavano #161616 del
   foglio ereditato: 1,02:1 su #181818, cioe' invisibili, e pure senza
   sottolineatura. Sono gli unici due modi per arrivare a privacy e termini. */
.spz__modal.spz__mentions a{
  color:#F7AC60;
  text-decoration:underline;
  text-underline-offset:.18em;
}

/* ---------- Il cursore custom solo dove c'e' un puntatore ---------- */
/* Il foglio ereditato accende `cursor:none` e il pallino sopra i 992px guardando
   solo la larghezza. Su un tablet o un portatile touch da 1024px spariva il
   puntatore di sistema e restava un pallino che al primo tocco si pianta. */
@media (min-width:992px) and (hover:none){
  html{cursor:auto}
  .c-cursor{visibility:hidden}
}

/* ---------- Archivio eventi: i due gruppi ---------- */
/* "In programma" e "Già successi" sono due titoli veri, non decorazione: prima
   la pagina non aveva nessun h2 e apriva con l'evento più vecchio in cima. */
.spz__eventi-gruppo{margin:var(--s4) 0 var(--s2)}
.spz__eventi-gruppo:first-of-type{margin-top:var(--s2)}
.spz__eventi-empty a{text-decoration:underline;text-underline-offset:.18em}

/* ---------- Il puntatore non sparisce mai ---------- */
/* Il foglio ereditato spegne il cursore di sistema sopra i 992px, ma il pallino che
   lo sostituisce nasce invisibile e si accende al primo movimento del mouse: in mezzo
   non c'era nessun puntatore. Ora il cambio avviene solo quando il pallino c'e'. */
@media (min-width:992px) and (hover:hover){
  html{cursor:auto}
  html[class~="--cursore-pronto"]{cursor:none}
}

/* ---------- Cursore arancio sopra le tre modali ---------- */
/* Menu, contatti e note legali sono lastre inchiostro, ma il tema sotto puo' essere
   chiaro o giallo: in quel caso il token del cursore vale #181818 e il pallino
   spariva sul nero. L'arancio si vede su tutti e tre i fondi. */
body:has(.spz__modal.is-open) .c-cursor{
  background-color:#F7AC60;
  border-color:#F7AC60;
}
body:has(.spz__modal.is-open) .c-cursor__inner{color:#181818}


/* ---------- Hero: il ritaglio, che e' quello che rende sostenibile lo zoom ---------- */
/* La lastra si ingrandisce 380 volte e il suo riquadro arriva a centinaia di migliaia di
   pixel. Senza ritaglio quel riquadro si sovrappone a tutto quello che viene dopo e il
   browser se lo porta dietro a ogni fotogramma per il resto della pagina.
   Misurato il 29/08 con due banchi di prova: la stessa lastra, con lo stesso
   ingrandimento, dentro un contenitore che ritaglia fa 60 fps su Safari e su Chrome.
   Era l'unica differenza fra il banco (fluido) e la hero vera (a scatti). */
.spz__hero__sticky{overflow:hidden}


/* ---------- WebKit: le due animazioni che su Safari non reggono ---------- */
/* La classe --webkit la mette animations.js guardando il motore, non la marca del
   browser: Safari e ogni browser su iPhone e iPad girano su WebKit. Il perche' di
   queste regole sta in CONSEGNA-HERO-E-STATEMENT.md, sezioni 3.2 e 3.3. */

/* 1. Hero: su WebKit non ingrandisce, sfuma (il movimento sta in animations.js).
   Qui resta solo la conseguenza sulla misura. La hero e' lunga 260vh perche' il
   tuffo dentro il pallino aveva bisogno di corsa; una dissolvenza no, e stirata su
   due schermi e mezzo sembra che non succeda niente. Torna ai 200vh del foglio
   ereditato, che e' la stessa lunghezza che ha da sempre sotto i 1200 px, dove la
   dissolvenza c'e' gia'. */
@media (min-width:1200px){
  .--webkit .spz__hero{height:calc(var(--vh, 1vh) * 200)}
}

/* 2. Statement, la parola che ruota: su WebKit sfuma invece di uscire dal riquadro,
   e il riquadro le serve solo a non sovrapporsi alla riga sopra mentre svanisce.
   Il movimento e la dissolvenza li governa animations.js; qui non cambia niente,
   la regola sta scritta per chi cerchera' il perche' proprio in questo punto. */


/* ---------- Blocco "scarica il documento" dentro il contenuto di una pagina ---------- */
/* Un file da scaricare non e' un link in mezzo al testo: si vede da lontano, dice cosa
   ci si porta a casa, in che formato e quanto pesa. Il peso c'e' perche' chi apre da
   telefono con la rete lenta ha diritto di saperlo prima di toccare, non dopo.
   Usa currentColor e i token del tema, quindi funziona su tutti e tre i fondi.

   Il selettore e' scritto con la classe del contenuto davanti perche' altrimenti
   perde: `.spz__page__content a` vale piu' di `.spz__download`, e il blocco usciva
   arancione e sottolineato come un link qualunque in mezzo al testo. */
.spz__page__content a.spz__download,
a.spz__download{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s1);flex-wrap:wrap;
  margin:var(--s3) 0;padding:var(--s1) var(--s2);
  border:1px solid currentColor;
  color:var(--text-color);
  text-decoration:none;
  transition:background-color .3s ease,color .3s ease;
}
.spz__page__content a.spz__download:hover,
.spz__page__content a.spz__download:focus-visible,
a.spz__download:hover,
a.spz__download:focus-visible{
  background-color:var(--text-color);
  color:var(--background-color);
  text-decoration:none;
}

/* Il riquadro del testo e' un flex, e non e' un vezzo: dentro un blocco normale gli
   a-capo del markup diventano righe vuote alte quanto l'interlinea del contenuto, e
   il riquadro passava da 42 a 139 pixel di altezza. Un contenitore flex le ignora. */
.spz__download > span:first-of-type{display:flex;flex-direction:column;gap:.4em}
.spz__download__cosa{font-size:var(--t2);line-height:var(--lh-lettura)}
.spz__download__peso{
  font-size:var(--t0);line-height:var(--lh-titolo);
  letter-spacing:.08em;text-transform:uppercase;opacity:.7;
}
.spz__download__vai{
  flex:0 0 auto;
  font-size:var(--t1);line-height:var(--lh-titolo);
  letter-spacing:.08em;text-transform:uppercase;
}
@media (max-width:575px){
  .spz__page__content a.spz__download,
  a.spz__download{flex-direction:column;align-items:flex-start}
}

/* ---------- Documenti di Complianz sul fondo scuro ----------
   Complianz costruisce la tabella dei cookie come una griglia di riquadri
   bianchi e grigio chiarissimo, pensata per una pagina chiara. Qui la pagina e'
   inchiostro e il testo e' crema: le scritte dentro la fisarmonica aperta
   finivano crema su bianco, cioe' invisibili. Sotto, la tabella viene ribaltata
   sul fondo del sito e i riquadri diventano filetti, come le schede della home.
   I selettori portano davanti [data-background=dark] della sezione perche'
   devono pesare piu' di quelli del plugin, che partono da un id. Se un giorno un
   documento legale finisce su fondo chiaro, queste regole si spengono da sole. */
[data-background=dark] #cmplz-document .cmplz-dropdown{
  background-color:transparent;
  border:1px solid rgba(235,232,227,.16);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:var(--s0);
}
[data-background=dark] #cmplz-document .cmplz-dropdown summary{
  background-color:rgba(235,232,227,.07);
  margin:0;
  padding:var(--s0) var(--s1);
}
[data-background=dark] #cmplz-document .cmplz-dropdown summary:hover{background-color:rgba(235,232,227,.12)}
[data-background=dark] #cmplz-document .cmplz-dropdown[open] summary{border-bottom:1px solid rgba(235,232,227,.16)}
/* La freccina e' un SVG scuro servito dal plugin: sul fondo scuro va schiarita. */
[data-background=dark] #cmplz-document .cmplz-dropdown summary div:after{filter:invert(1) brightness(1.4)}
[data-background=dark] #cmplz-document .cmplz-dropdown .cmplz-service-description{padding:var(--s1)}
[data-background=dark] #cmplz-document .cmplz-dropdown .cookies-per-purpose{
  border:0;
  border-top:1px solid rgba(235,232,227,.16);
  background-color:rgba(235,232,227,.16);   /* fa da colore ai filetti fra le celle */
  grid-gap:1px;
  margin-bottom:0;
}
[data-background=dark] #cmplz-document .cmplz-dropdown .cookies-per-purpose div{background-color:#181818}
[data-background=dark] #cmplz-document .cmplz-dropdown .cookies-per-purpose .retention-header,
[data-background=dark] #cmplz-document .cmplz-dropdown .cookies-per-purpose .function-header,
[data-background=dark] #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+2),
[data-background=dark] #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+3),
[data-background=dark] #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+4),
[data-background=dark] #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+5),
[data-background=dark] #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+6),
[data-background=dark] #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+7){
  background-color:rgba(235,232,227,.06);
}
/* Il riquadro «Gestisci le tue impostazioni di consenso», stessa cura. */
[data-background=dark] #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category{
  background-color:transparent;
  border:1px solid rgba(235,232,227,.16);
  border-radius:8px;
  margin-bottom:var(--s0);
  overflow:hidden;
}
[data-background=dark] #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header{
  background-color:rgba(235,232,227,.07);
  padding:var(--s0) var(--s1);
}


/* ====================================================================
   SCALA AUREA — chiusure sui blocchi che restavano fuori.
   ==================================================================== */

/* La location eredita padding-top:25rem dal tema clonato (400px fissi, 160px
   sotto i 576px). Ne' l'uno ne' l'altro e' un gradino: qui diventa fluido
   fra --s10 e --s13. */
.spz__section.spz__location{padding-top:var(--r-hero)}

/* Coda della home prima della location: era 14.107rem fissi anche su telefono. */
.spz__home-magazine{padding-bottom:var(--r-coda)}

/* Interlinee: tre valori, non otto. */
body,p,li,dd,figcaption{line-height:var(--lh-lettura)}
.spz__value__text,.spz__service-card__text,.spz__event-row__sotto,
.spz__location__addr,.spz__location__addr__accesso,.spz__footer__cofin__text,
.spz__map-gate__nota{line-height:var(--lh-lettura)}
.spz__value__title,.spz__event-card__title,.spz__map-gate__addr{line-height:var(--lh-titolo)}

/* Occhielli e etichette maiuscole: spaziatura fra le lettere sulle potenze di phi. */
.spz__eyebrow,.spz__event-row__occhiello,.spz__footer__cofin__eyebrow,
.spz__menu-panel__eyebrow{letter-spacing:var(--tr-occhiello)}
.spz__explore__count,.spz__explore__next__label,.spz__footer__newsletter__label,
.spz__event-card__type,.spz__explore__here{letter-spacing:var(--tr-etichetta)}

/* Magazine: il blocco arriva dal plugin Stackpress, che ha una scala sua
   (17.3px di testo, 12.8px di cta, 41.6px di titolo) e il cui foglio si carica
   DOPO questo. Due strade, nessuna delle quali tocca il plugin: le variabili
   che il plugin espone, e un grado di specificita' in piu' per il resto. */
.stackpress{
  --sp-title-size:var(--fs-sottotitolo);
  --sp-body-size:var(--fs-lead);
  --sp-gap:var(--r-blocco);
}
body .stackpress .stackpress__title{line-height:var(--lh-titolo)}
body .stackpress .stackpress__excerpt{line-height:var(--lh-lettura)}
body .stackpress .stackpress__meta,
body .stackpress .stackpress__rowdate{font-size:var(--t1)}
body .stackpress .stackpress__cta,
body .stackpress .stackpress__morelink{font-size:var(--t1)}
body .stackpress .stackpress__cardlink{gap:var(--s-1)}
body .stackpress .stackpress__body{gap:var(--s-3)}
body .stackpress .stackpress__meta{gap:var(--s-2)}
body .stackpress .stackpress__cta{margin-top:var(--s-7);gap:var(--s-3)}
body .stackpress .stackpress__rowlink{padding:var(--s0) 0;gap:var(--r-card)}
body .stackpress .stackpress__rowmain{gap:var(--s-4)}
body .stackpress .stackpress__morelink{padding-bottom:var(--s-7);gap:var(--s-3)}
.stackpress__featured,.stackpress__more{margin-bottom:var(--s4)}

/* La card larga del magazine: brand.css provava gia' a rimetterla in scala
   (--sp-title-size / --sp-body-size), ma stackpress.css si accoda DOPO il tema
   e a parita' di specificita' vinceva lui. Da qui l'occhiello a 17.3px e il
   titolo a 41.6px che si vedevano in pagina: un grado in piu' e la regola passa. */
body .stackpress .stackpress__card--wide{
  --sp-title-size:var(--fs-sottotitolo);
  --sp-body-size:var(--fs-lead);
}

/* Etichetta "Scorri" sotto la hero. */
.spz__hero .btn span{line-height:var(--lh-lettura)}

/* Ultimi tre blocchi ancora sui numeri del tema clonato: 6.5rem, 8rem/4rem, 3rem. */
.spz__mentions__inner{padding-top:var(--r-sezione)}
.spz__header{padding:var(--r-testata) 0 var(--r-sezione)}
@media (max-width:575.98px){
  .spz__contact{padding:var(--r-blocco) 0}
}

/* Nav: 20px non e' un gradino, --s1 sono 20.35. */
.spz__nav{padding-top:var(--s1)}


/* ====================================================================
   SECONDO GIRO — quello che si vedeva solo sulle pagine interne.
   La home era a posto, queste no: i 25rem del tema clonato, il titolo
   dei gruppi evento e le due interlinee di base di Bootstrap.
   ==================================================================== */

/* .spz__section vale padding-top:25rem nel tema clonato (400px fissi, 160 sotto
   i 576px). Sulla home ogni sezione ha gia' il suo, qui restavano scoperte
   la 404 e l'archivio eventi. Le nomino, cosi' non tocco le altre. */
.spz__section.spz__404,
.spz__section.spz__eventi-archive{padding-top:var(--r-hero)}

/* "In programma" e "Gia' successi": prendevano il corpo da .h3 del tema
   (23,1px su telefono, 28 su desktop). Nessuno dei due e' un gradino. */
.spz__eventi-gruppo{font-size:var(--t4);line-height:var(--lh-titolo)}

/* Le due interlinee di base che Bootstrap mette su tutti i titoli. Le regole
   piu' specifiche del tema continuano a vincere: questa copre solo i titoli
   che non ne hanno una propria (h2 di "Chi siamo", di "Partecipa"). */
.h2,h2,.h3,h3{line-height:var(--lh-titolo)}

/* L'occhiello del magazine ereditava 1,6 dal foglio del plugin. */
body .stackpress .stackpress__cta,
body .stackpress .stackpress__morelink{line-height:var(--lh-lettura)}


/* ====================================================================
   BISCOTTINI SEMPRE MAIUSCOLO.
   Sette punti nel foglio montano il font a pallini: i titoli h1/h2/h3
   (compresi gli span di reveal e switcher), le voci del menu, il
   fallback testuale del wordmark, il titolo delle card servizio e dei
   valori, il grazie del form e il titolo della 404. Li raggruppo qui,
   cosi' resta un posto solo da toccare se il font va altrove.
   text-transform si eredita, quindi i discendenti sono coperti.
   ==================================================================== */
.h1,h1,.h2,h2,.h3,h3,
.spz__nav__brand .sp-wordmark,
.spz__menu-panel li a,
.spz__service-card__title,
.spz__value__title,
.spz__form__thanks__big,
.spz__404__title{text-transform:uppercase}