/* ==========================================================================
   Regole specifiche di WordPress.
   Sta in coda a _base/_extra/_theme: qui vince chi arriva per ultimo.
   ========================================================================== */

/* Voce di navigazione attiva — nel prototipo era aggiunta da build.py. */
.main-nav a.active { background: rgba(255, 255, 255, .2); }
.site-header.scrolled .main-nav a.active { background: var(--magenta); color: #fff; }

/* La barra di amministrazione, quando c'e', sposta l'header fisso. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* Allineamenti dell'editor: servono se la redazione scrive nel Magazine. */
.alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: 100%; }

/* Immagini: mai piu' larghe del contenitore, mai deformate. */
.wp-block-image img,
.wp-caption img { max-width: 100%; height: auto; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Errori dei moduli, negli stili del prototipo ────────────────────────
   Il markup dei moduli resta quello approvato; questi sono gli unici stili
   aggiunti, e usano i token del brand invece dei colori del plugin. */
.form-grid .is-invalid,
.news-form .is-invalid {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(199, 0, 117, .16);
}

.field-error,
.form-error {
  margin: .45rem 0 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--magenta);
  line-height: 1.4;
}

.form-error {
  grid-column: 1 / -1;
  margin: 0 0 1rem;
  padding: .7rem .9rem;
  border-radius: 12px;
  background: var(--blush-2);
  border: 1px solid var(--line);
}

.form-grid [type="submit"][disabled],
.news-form [type="submit"][disabled] { opacity: .6; cursor: progress; }

/* ── Interruttore di lingua: da pulsanti a collegamenti ──────────────────
   Con Polylang le due voci sono COLLEGAMENTI verso la pagina gemella, non
   pulsanti. Tutto il CSS del prototipo pero' si rivolge a `button`: senza
   queste regole l'interruttore resta un contorno vuoto, e l'area toccabile
   si riduce al testo. L'aspetto e' identico a quello approvato — cambia
   solo il selettore. */
.lang-switch a {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  background: transparent;
  color: #fff;
  border: 0;
  padding: 7px 12px;
  cursor: pointer;
  transition: .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.site-header.scrolled .lang-switch a { color: var(--text); }
.lang-switch a[aria-current="true"] { background: #fff; color: var(--magenta); }
.site-header.scrolled .lang-switch a[aria-current="true"] { background: var(--magenta); color: #fff; }

@media (max-width: 980px) {
  .lang-switch a { padding: 6px 9px; }
}

/* Il contenimento laterale sui telefoni e' passato al prototipo
   (_base.css): qui non serve piu' — due copie della stessa regola
   divergono alla prima modifica di una sola. */

/* ==========================================================================
   MENU A SOTTOMENU — 6 voci + pannelli (mandato 13/09/2026)
   Sta in coda e usa selettori a due classi per battere `.main-nav a` di _base.
   ========================================================================== */

/* --- Desktop: la nav non taglia piu' i pannelli ---
 * ATTENZIONE (protezione dell'1/9/2026): `.main-nav` NON puo' piu' avere
 * `overflow:hidden`, perche' taglierebbe i pannelli a comparsa (assoluti). La
 * protezione «l'header non taglia i propri comandi» resta comunque garantita
 * da due fatti: i COMANDI hanno `flex:0 0 auto` (non si restringono e non si
 * spostano mai, regola in _base.css), e la nav sta in una riga da 1280 px in su
 * anche in inglese. Era «da 1024» quando le voci erano sei: con otto, a 1024 e a
 * 1280 finiva sotto i comandi (misurato il 1° ottobre 2026: 353 e 112 px di
 * sovrapposizione). Se un domani non entrasse, si alza la soglia — mai si
 * nascondono i comandi. */
@media (min-width:1280px){
  .main-nav{display:flex;overflow:visible;gap:0}
  .burger{display:none}
  /* Otto voci, non sei: a 13 px con 10 px di passo il menu misurava 905 px e a
     1280 finiva per 112 px sotto IT/EN, con «Partner/Press» e «Contatti»
     illeggibili (trovato il 1° ottobre 2026 in una schermata). Compresso cosi'
     entra con 26 px d'aria a 1280 in italiano e in inglese; a 1024 non c'e' verso
     di farcelo stare, e sotto i 1280 si usa il pannello. */
  /* Con un selettore in piu' (.site-header): le regole di .nav-top qui sotto
     vengono dopo nel file e a parita' di peso vincerebbero loro. */
  .site-header .main-nav .nav-top{font-size:11.5px;padding:8px 7px;letter-spacing:0}
  .site-header .main-nav .nav-caret-btn{padding:8px 5px 8px 0}
}
/* «Maestri e stand» e' diventato «Maestri ed Itinerari» (11 ottobre 2026): cinque lettere in
   piu', e a 1280 l'ultima voce finiva a 7 px da IT/EN in italiano e a 18 in inglese, invece che
   a 26 (misurato, Chrome senza testa). Fra 1280 e 1365 si tolgono due pixel per lato a ogni
   voce: l'aria torna di 26 nelle due lingue, e sopra i 1366 il menu resta identico. */
@media (min-width:1280px) and (max-width:1365px){
  .site-header .main-nav .nav-top{padding:8px 5px}
  .site-header .main-nav .nav-caret-btn{padding:8px 4px 8px 0}
}
.main-nav .nav-item{position:relative;display:flex;align-items:center}

.main-nav .nav-top{
  font-family:var(--font-sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:#fff;background:transparent;border:0;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  padding:8px 10px;border-radius:999px;transition:background .2s,color .2s;
}
.main-nav .nav-top:hover,.main-nav .nav-item.open .nav-top{background:rgba(255,255,255,.16)}
.site-header.scrolled .main-nav .nav-top{color:var(--text)}
.site-header.scrolled .main-nav .nav-top:hover,
.site-header.scrolled .main-nav .nav-item.open .nav-top{background:var(--blush-2);color:var(--magenta)}
.main-nav .nav-top.is-ancestor,.main-nav .nav-top.active{background:rgba(255,255,255,.22)}
.site-header.scrolled .main-nav .nav-top.is-ancestor,
.site-header.scrolled .main-nav .nav-top.active{background:var(--magenta);color:#fff}
.main-nav .nav-caret{font-size:10px;line-height:1;opacity:.85;transition:transform .2s ease}
.main-nav .nav-item.open .nav-caret{transform:rotate(180deg)}
.main-nav .nav-top:focus-visible{outline:2px solid #fff;outline-offset:2px}
.site-header.scrolled .main-nav .nav-top:focus-visible{outline-color:var(--magenta)}

.main-nav .sub-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:246px;
  list-style:none;margin:0;padding:8px;
  background:#fff;border-radius:22px;
  box-shadow:0 18px 50px rgba(199,0,117,.18), 0 2px 10px rgba(35,31,32,.10);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:120;
}
.main-nav .nav-item.open>.sub-menu{opacity:1;visibility:visible;transform:none}
.main-nav .sub-menu li{margin:0}
.main-nav .sub-menu .sub-link{
  display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:14px;
  color:var(--text);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap;
}
.main-nav .sub-menu .sub-link:hover,
.main-nav .sub-menu .sub-link:focus-visible{background:var(--blush-2);color:var(--magenta);outline:none}
.main-nav .sub-menu .sub-link.active{color:var(--magenta)}
:root[data-theme="dark"] .main-nav .sub-menu,
:root:not([data-theme="light"]) .main-nav .sub-menu{background:var(--surface)}

/* --- Fino a 1279: pannello a tutta altezza, tutto aperto, per gruppi --- */
@media (max-width:1279px){
  .main-nav{display:none}
  .burger{display:block}
  .mobile-nav{
    justify-content:flex-start;align-items:stretch;
    padding:calc(var(--header-h) + 8px) 0 44px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .mobile-nav-inner{width:min(90%,520px);margin-inline:auto;display:flex;flex-direction:column;gap:2px}
  .mobile-nav .m-group{
    margin:16px 0 2px;padding:14px 6px 0;
    font-family:var(--font-sans);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:#ffd9ef;border-top:1px solid rgba(255,255,255,.18);
  }
  .mobile-nav-inner>.m-group:first-of-type{border-top:0;margin-top:6px}
  .mobile-nav .m-link{
    display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:12px;
    color:#fff;text-decoration:none;font-size:17px;font-weight:700;
  }
  .mobile-nav .m-link:hover,.mobile-nav .m-link:focus-visible{background:rgba(255,255,255,.14);outline:none}
  .mobile-nav .m-link.m-home{font-size:19px;font-weight:800}
  .mobile-nav .btn-webapp-mobile{display:inline-flex;align-self:flex-start;margin-top:22px}
  .m-lang{display:flex;gap:8px;margin-top:18px;padding:0 6px}
  .m-lang a,.m-lang button{
    font-family:var(--font-sans);font-weight:700;font-size:14px;color:#fff;text-decoration:none;cursor:pointer;
    background:rgba(255,255,255,.14);border:0;border-radius:999px;padding:9px 16px;min-height:44px;display:inline-flex;align-items:center;
  }
  .m-lang a[aria-current="true"]{background:#fff;color:var(--magenta)}
}

/* --- Footer: sotto-titoli della colonna a gruppi --- */
.footer .f-subhead{
  font-family:var(--font-sans);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#EF6BA8;margin:16px 0 6px;   /* rosa chiaro come .footer h2: contrasto ok sul piede scuro (--night) */
}
.footer .footer-col-groups>.f-subhead:first-child{margin-top:0}

@media (prefers-reduced-motion:reduce){
  .main-nav .nav-caret,.main-nav .sub-menu{transition:none}
}

/* ── Coppetta nell'hero della home (richiesta committente 14/09/2026) ──────────
 * Uno strato in piu' SOTTO tutto: la coppetta a destra, tinta di magenta con
 * opacita' solo sulla sagoma (mask). Gradiente dell'hero, logo che gira
 * (.hero-swirl) e coriandoli (canvas.sprinkles) restano identici.
 * Niente markup nuovo: questo CSS + l'immagine in assets/img/.
 * L'immagine e' gated su .cup-ready (classe aggiunta al window.load): non e'
 * referenziata al primo render, cosi' viene fetchata a bassa priorita' DOPO
 * l'LCP (una mask su elemento visibile sarebbe altrimenti ad alta priorita'). */
.hero{isolation:isolate}
.cup-ready .hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(199,0,117,.55),rgba(199,0,117,.55)),  /* velo magenta, opacita' .55 */
    url("../img/coppetta-sherbeth-2026.webp") no-repeat;
  background-size:auto min(78vh,720px), auto min(78vh,720px);
  background-position:right -6vw bottom -4vh, right -6vw bottom -4vh;
  -webkit-mask:url("../img/coppetta-sherbeth-2026.webp") no-repeat right -6vw bottom -4vh / auto min(78vh,720px);
          mask:url("../img/coppetta-sherbeth-2026.webp") no-repeat right -6vw bottom -4vh / auto min(78vh,720px);
  opacity:.9;
}
/* Adattato ai veri contenitori dell'hero (front-page.php):
 * il logo che gira e i coriandoli SOPRA la coppetta, il testo SOPRA tutto.
 * (.sprinkles e' gia z-index:1 in _extra.css, .hero-inner gia z-index:2 in _base.css:
 *  qui si alza solo lo swirl, che era z-auto, e si riafferma l'ordine.) */
.hero-swirl{z-index:1}
.hero > canvas.sprinkles{z-index:1}
.hero-inner{position:relative;z-index:2}
@media (max-width:900px){
  .cup-ready .hero::before{
    background-size:auto 46vh, auto 46vh;
    background-position:right -18vw bottom 0, right -18vw bottom 0;
    -webkit-mask-position:right -18vw bottom 0; mask-position:right -18vw bottom 0;
    -webkit-mask-size:auto 46vh; mask-size:auto 46vh;
    opacity:.55;   /* sul telefono piu' leggera: il testo resta leggibile */
  }
}

/* ── Coppetta hero v2 (14/09/2026): intera nel primo viewport + parallax ──────
 * Accodata DOPO la v1. La v1 gate il ::before su .cup-ready (per non fetchare la
 * mask ad alta priorita prima dell'LCP): la v2 usa lo stesso .cup-ready .hero::before
 * (stessa specificita, vince per ordine). Riposiziona la coppetta SOTTO la testata,
 * dimensionata sull'altezza dello schermo (intera nel primo viewport a 1440x900 e
 * 1440x1100), e la trasla in parallax con --shb-py. Immagine, velo, mask e opacita
 * restano dalla v1. Logo che gira, coriandoli e gradiente invariati. */
.cup-ready .hero::before{
  background-size:auto min(72svh,680px), auto min(72svh,680px);
  background-position:right -4vw top calc(var(--header-h) + 4svh), right -4vw top calc(var(--header-h) + 4svh);
  -webkit-mask-position:right -4vw top calc(var(--header-h) + 4svh); mask-position:right -4vw top calc(var(--header-h) + 4svh);
  -webkit-mask-size:auto min(72svh,680px); mask-size:auto min(72svh,680px);
  transform:translate3d(0,var(--shb-py,0px),0);will-change:transform;
}
@media (max-width:900px){
  .cup-ready .hero::before{
    background-size:auto 40svh, auto 40svh;
    background-position:right -22vw top calc(var(--header-h) + 2svh), right -22vw top calc(var(--header-h) + 2svh);
    -webkit-mask-position:right -22vw top calc(var(--header-h) + 2svh); mask-position:right -22vw top calc(var(--header-h) + 2svh);
    -webkit-mask-size:auto 40svh; mask-size:auto 40svh;
  }
}
@media (prefers-reduced-motion:reduce){.cup-ready .hero::before{transform:none}}

/* ── Placeholder ufficiali: cornici a proporzione fissa (mandato 18/09/2026) ──
 * Un'immagine mancante usa il placeholder del formato adatto dentro una cornice
 * ad aspect-ratio fisso: sostituendo il file con la foto vera il layout non si
 * sposta. Vedi inc/media.php e sherbeth_media(). */
.media-frame{display:block;margin:0;width:100%;overflow:hidden;border-radius:14px;background:#fbe9f2}
.media-frame img{display:block;width:100%;height:100%;object-fit:cover}
.media-quadrato{aspect-ratio:1/1}
.media-orizzontale{aspect-ratio:16/9}
.media-verticale{aspect-ratio:9/16}

/* ── Rimandi contestuali in fondo alle pagine (mandato 18/09, punto 10) ──── */
.correlati{padding:44px 0 8px}
.correlati-eyebrow{margin-bottom:16px}
.correlati-row{display:flex;flex-wrap:wrap;gap:12px}
.correlati-link{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1.5px solid #EF6BA8;border-radius:999px;font-weight:700;color:#C70075;text-decoration:none;background:#fff;transition:background .15s,color .15s}
.correlati-link:hover,.correlati-link:focus-visible{background:#C70075;color:#fff}
@media (prefers-color-scheme:dark){.correlati-link{background:transparent}}

/* ── Header a schermo stretto (≤430px) ───────────────────────────────────
 * Col bottone "Apri WebApp" sempre visibile (ordine G 18/09) la barra si
 * affollava e il pulsante del menu usciva dallo schermo. Qui compattiamo le
 * azioni e il bottone quel tanto che basta a far stare tutto entro i 390px. */
@media (max-width:430px){
  .header-inner{gap:8px}
  .header-actions{gap:5px}
  .btn-webapp{padding:6px 10px;font-size:11px}
  .brand img{height:24px}
}

/* ── Torna su (P1.6) ──────────────────────────────────────────────────────
 * Globale, discreto, in identita' Sherbeth. Invisibile finche' non si scorre,
 * fuori dal tab-order quando nascosto (visibility:hidden), animato, rispetta
 * prefers-reduced-motion. */
.to-top{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:90;width:48px;height:48px;border:0;border-radius:50%;background:#C70075;color:#fff;box-shadow:0 8px 24px rgba(199,0,117,.35);cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s,visibility .25s,filter .15s}
.to-top.visible{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.to-top:hover,.to-top:focus-visible{filter:brightness(1.12)}
.to-top:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.to-top{transition:opacity .2s,visibility .2s}}

/* Footer: link Area Riservata (P2.13) */
.footer-riservata{display:inline-block;margin-top:10px;font-weight:700;font-size:13px;color:#EF6BA8;text-decoration:none}
.footer-riservata:hover,.footer-riservata:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* "Cosa trovi" (P2.1): immagine in cima alla card invece dell'icona, angoli
   arrotondati, hover elegante. */
.card .media-frame{margin:-4px -4px 16px;border-radius:14px}
.card:hover .media-frame img{transform:scale(1.04)}
.card .media-frame img{transition:transform .4s cubic-bezier(.2,.7,.2,1)}

/* ── Griglia loghi partner (P2.11) ────────────────────────────────────────
 * Gerarchia: Main Sponsor piu' grande, poi gli altri livelli. Loghi su tessere
 * chiare, spaziatura uniforme, responsive. */
.partner-tier{margin-bottom:30px}
.partner-tier__label{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;text-align:center}
.partner-logos{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:stretch}
.partner-logo{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 24px;display:grid;place-items:center;min-width:160px;min-height:98px;transition:transform .2s,box-shadow .2s}
.partner-logo:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.09)}
.partner-logo img{max-height:58px;max-width:190px;width:auto;height:auto;object-fit:contain}
.partner-tier--main .partner-logo{min-width:230px;min-height:128px;padding:26px 38px}
.partner-tier--main .partner-logo img{max-height:84px;max-width:250px}
/* UN MARCHIO CHE NON PUO' RIMPICCIOLIRSI (oggi: Identita' Golose).
   Il suo manuale vieta di scendere sotto l'equivalente di 20 mm di larghezza, e la
   scritta dentro il marchio e' alta il 9,9% dell'immagine: alla fascia normale del
   piede (42px) verrebbe larga 56px — circa 15 mm — con lettere di 4,2 px.
   A 72px e' larga 96px, circa 25 mm, e le lettere stanno a 7,1 px. La piastrella
   cresce di conseguenza: si vede che e' piu' grande delle vicine, ed e' voluto. */
.partner-logo--grande{min-width:186px;min-height:120px}
.partner-logo--grande img{max-height:72px;max-width:150px}
@media (max-width:640px){.partner-logo--grande{min-width:150px;min-height:104px}.partner-logo--grande img{max-height:66px;max-width:140px}}

/* Loghi bianchi (es. Bravo): piastrella scura, altrimenti spariscono sul chiaro */
.partner-logo--dark{background:#161616;border-color:#161616}
.partner-logo--dark:hover{box-shadow:0 12px 26px rgba(0,0,0,.22)}
@media (max-width:640px){.partner-logo{min-width:132px;min-height:82px;padding:12px 16px}.partner-logo img{max-height:46px;max-width:140px}.partner-tier--main .partner-logo{min-width:180px;min-height:100px}}

/* ---------- Piede: muro dei loghi partner (fondo scuro) ---------- */
.footer-partners{margin:8px 0 30px}
.footer-partners .partner-tier{margin-bottom:22px}
.footer-partners .partner-tier__label{color:rgba(255,255,255,.6)}
.footer-partners .partner-logos{gap:12px}
.footer-partners .partner-logo{min-width:120px;min-height:70px;padding:12px 16px;background:#fff;border-color:transparent}
.footer-partners .partner-logo img{max-height:42px;max-width:130px}
/* DOPO la riga qui sopra, e non prima: `.footer-partners .partner-logo--grande img`
   e `.footer-partners .partner-logo img` hanno la STESSA specificita' (tre classi
   piu' un elemento), quindi a decidere e' l'ordine. Scritta sopra, la regola del
   marchio grande perdeva in silenzio e nel piede restava a 56 px di larghezza —
   circa 15 mm, sotto il minimo del suo manuale. Misurato sulla pagina vera. */
.footer-partners .partner-logo--grande{min-width:150px;min-height:104px}
.footer-partners .partner-logo--grande img{max-height:72px;max-width:150px}
.footer-partners .partner-tier--main .partner-logo{min-width:150px;min-height:84px}
.footer-partners .partner-tier--main .partner-logo img{max-height:52px;max-width:160px}
.footer-partners .partner-logo--dark{background:#161616}

/* ══ I LOGHI PARTNER, MISURE E SPAZI DETTATI DAL COMMITTENTE (7 ottobre 2026) ══
 *
 * «Partner Institutions un po' piu' grandi. Main Partner un po' piu' grande.
 *  Scientific va bene cosi'. Media Partners un po' piu' piccoli. Ingrandire il
 *  logo ABM. Ridurre interlinea e spazi fra le sezioni. Su mobile righe compatte.»
 *
 * STA QUI IN FONDO E NON PIU' SU, e non e' pigrizia: queste regole hanno la stessa
 * specificita' di quelle sopra, quindi a decidere e' l'ordine. Scritte prima
 * perderebbero in silenzio — e' gia' successo una volta su questo stesso file.
 *
 * Le altezze sono MASSIME, non fisse: un logo largo resta limitato dalla larghezza
 * e non si gonfia. Per questo i numeri sembrano generosi e a schermo non lo sono.
 */

/* Istituzioni: piu' peso, sono quelle che aprono la fascia. */
.partner-tier--ist .partner-logo{min-width:176px;min-height:112px}
.partner-tier--ist .partner-logo img{max-height:70px;max-width:206px}

/* Main Partner: era gia' il piu' grande, cresce ancora. */
.partner-tier--main .partner-logo{min-width:244px;min-height:140px}
.partner-tier--main .partner-logo img{max-height:96px;max-width:268px}

/* Media Partners: un gradino sotto tutti gli altri. */
.partner-tier--media .partner-logo{min-width:142px;min-height:86px}
.partner-tier--media .partner-logo img{max-height:48px;max-width:168px}

/*
 | IL SIGILLO DELL'ACETO BALSAMICO, e perche' da solo.
 |
 | Il file nuovo e' stato ritagliato sul disegno — prima il sigillo stava nel 31%
 | di una tela larga il triplo — ma resta TONDO (435x480) in una fila di marchi
 | larghi tre volte tanto. Con lo stesso tetto d'altezza di Trenitalia occupa un
 | terzo dello spazio: non e' piccolo per sbaglio, e' piccolo per forma.
 | Qui prende l'altezza che lo pareggia agli altri a vista.
*/
.partner-logo--aceto-balsamico-modena img{max-height:78px}

/* ── Spazi: meno vuoto fra una sezione e l'altra ────────────────────────── */
.partner-tier{margin-bottom:20px}
.partner-tier__label{margin:0 0 9px;letter-spacing:.12em}
.partner-logos{gap:12px}
.footer-partners .partner-tier{margin-bottom:15px}
.footer-partners .partner-logos{gap:9px}

/* ── Il piede, con la stessa gerarchia della pagina ─────────────────────── */
.footer-partners .partner-tier--ist .partner-logo img{max-height:50px;max-width:148px}
.footer-partners .partner-tier--main .partner-logo img{max-height:56px;max-width:170px}
.footer-partners .partner-tier--media .partner-logo{min-width:104px;min-height:62px;padding:10px 13px}
.footer-partners .partner-tier--media .partner-logo img{max-height:34px;max-width:112px}
.footer-partners .partner-logo--aceto-balsamico-modena img{max-height:56px}

/*
 | SUL TELEFONO: righe piene, non una scaletta.
 |
 | Il difetto da togliere e' il marchio solo su una riga e il resto a capo. Nasceva
 | da una larghezza minima tarata sul monitor: a 390 px ne entravano due per riga e
 | il terzo andava giu' da solo. Abbassandola ne entrano tre, e la fila si chiude.
 |
 | `flex:0 1 auto` e `max-width` tengono la piastrella entro la sua riga anche
 | quando il marchio dentro e' largo: senza, un logo lungo allarga la cella e
 | ributta i vicini a capo — che e' lo stesso difetto con un'altra causa.
*/
@media (max-width:640px){
  .partner-logos{gap:8px}
  .partner-logo{min-width:0;flex:0 1 auto;max-width:calc(50% - 4px);min-height:72px;padding:10px 12px}
  .partner-logo img{max-height:40px;max-width:100%}
  .partner-tier{margin-bottom:16px}
  .partner-tier--ist .partner-logo{min-width:0;min-height:80px}
  .partner-tier--ist .partner-logo img{max-height:46px}
  .partner-tier--main .partner-logo{min-width:0;min-height:96px;max-width:100%;padding:16px 20px}
  .partner-tier--main .partner-logo img{max-height:62px}
  .partner-tier--media .partner-logo{min-height:62px;max-width:calc(33.333% - 6px)}
  .partner-tier--media .partner-logo img{max-height:32px}
  .partner-logo--aceto-balsamico-modena img{max-height:56px}
  .footer-partners .partner-logos{gap:7px}
  .footer-partners .partner-logo{min-height:60px;padding:8px 11px}
  .footer-partners .partner-logo img{max-height:34px}
}
.sponsor-cta__btns{display:flex;flex-wrap:wrap;gap:12px}

/* CAG editoriale (P2.3): immagine grande + testo importante */
.cag-editorial{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.cag-media .media-frame{border-radius:20px}
.cag-title{font-size:clamp(28px,4vw,48px);line-height:1.05}
@media (max-width:860px){.cag-editorial{grid-template-columns:1fr}}
/* Nella sezione WebApp della home la fotografia va SOPRA il testo quando si impila (8/10/2026):
   su schermo largo sta a destra del titolo, sul telefono apre la sezione. Senza questa riga
   l'ordine del documento la mandava in fondo, dopo tre paragrafi, dove nessuno la guarda. */
@media (max-width:860px){#webapp .cag-editorial .cag-media{order:-1}}
/* ── La sezione WebApp della home: tutto il testo a sinistra, la sola foto a destra. ──
   (committente, 8/10/2026)
   `.steps` e `.wa-feats` scelgono le colonne guardando la larghezza dello SCHERMO, non quella
   del contenitore: stretti in mezza pagina restavano a quattro e a due colonne, cioe' strisce
   da centoventi pixel. Qui si dice loro che stanno in una colonna, e il pulsante smette di
   centrarsi perche' tutto il resto e' allineato a sinistra.
   Solo sopra gli 860 px: sotto, la griglia e' gia' a una colonna e comandano le regole del tema. */
/* IL PALLINO DEL NUMERO SPORGE, E SOPRA C'ERA IL TESTO. (committente, 8/10/2026)
   `.step::before` sta a `top:-18px`: diciotto pixel FUORI dalla scheda, in alto a sinistra.
   Finche' i quattro passi stavano a tutta larghezza sotto una sezione, quello spazio c'era.
   Dentro la colonna di testo seguono il paragrafo con margine zero da tutte e due le parti, e
   il «1» finiva sull'ultima riga — misurato: 18 px esatti di sovrapposizione.
   Trentaquattro: i diciotto del pallino piu' sedici d'aria. Fuori dalla media query, perche'
   l'accavallamento c'e' a OGNI larghezza: e' l'ordine del documento, non la disposizione. */
.cag-editorial--webapp .cag-text .steps{margin-top:34px}

@media (min-width:861px){
  .cag-editorial--webapp .cag-text .steps{grid-template-columns:repeat(2,1fr)}
  .cag-editorial--webapp .cag-text .wa-feats{grid-template-columns:1fr;max-width:none;margin-inline:0}
  .cag-editorial--webapp .cag-text .mag-cta{justify-content:flex-start}
}
/* Perche' esserci (P2.2): box rosa con foto in filigrana + foto flottante */
/* Il fondo DEVE cambiare col tema: era inchiodato a #fbe9f2 mentre il testo
   sopra usa var(--text), che al buio diventa chiaro. Risultato: chiaro su
   chiaro, titolo e testo illeggibili (contrasto misurato 1,05 su 21). */
.why-box{position:relative;border-radius:26px;padding:clamp(30px,5vw,66px);overflow:hidden;background:var(--blush-2,#fbe9f2)}
.why-bg{position:absolute;inset:0;z-index:0;opacity:.08}
.why-bg .media-frame{height:100%;aspect-ratio:auto;border-radius:0;background:none}
.why-bg .media-frame img{height:100%}
/* Il doppio di prima (richiesta 25/09): il tetto era 240px e su schermo largo
   era sempre quello a decidere, non la percentuale. Il testo resta leggibile
   perche' .why-text si accorcia della stessa misura: senza, il titolo
   passerebbe SOTTO la fotografia. */
.why-float{position:absolute;top:-18px;right:-10px;width:min(40%,440px);z-index:2;transform:rotate(2.5deg);filter:drop-shadow(0 14px 30px rgba(199,0,117,.22))}
.why-float .media-frame{border-radius:18px}
.why-text{position:relative;z-index:1;max-width:min(62ch,calc(100% - 300px))}
@media (max-width:900px){.why-text{max-width:62ch}}
@media (max-width:640px){.why-float{display:none}}
/* Magazine Home: data articolo + immagine card */
.mag-card .media-frame{border-radius:0}
.mag-date{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.03em;margin:2px 0 6px}

/* Voci-gruppo cliccabili (Festival 2026, Visita Palermo): etichetta-link +
   chevron separato che apre il sottomenu (mandato committente 19/09). */
.main-nav .nav-item.has-sub .nav-top-link{padding-right:4px}
.main-nav .nav-caret-btn{background:transparent;border:0;cursor:pointer;color:#fff;padding:8px 8px 8px 2px;border-radius:999px;display:inline-flex;align-items:center;transition:background .2s,color .2s}
.main-nav .nav-caret-btn:hover,.main-nav .nav-item.open .nav-caret-btn{background:rgba(255,255,255,.16)}
.site-header.scrolled .main-nav .nav-caret-btn{color:var(--text)}
.site-header.scrolled .main-nav .nav-caret-btn:hover,
.site-header.scrolled .main-nav .nav-item.open .nav-caret-btn{background:var(--blush-2);color:var(--magenta)}
.main-nav .nav-caret-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.site-header.scrolled .main-nav .nav-caret-btn:focus-visible{outline-color:var(--magenta)}
/* Mobile: la voce-gruppo cliccabile resta un'intestazione ma con il colore del link */
.mobile-nav a.m-group-link{display:block;text-decoration:none}

/* ── La scheda del maestro come PAGINA (/gelatiere/<nome>/) ──────────────
   Stesso corpo del dialog, ma in pagina: niente ombra da finestra, larghezza
   della colonna di lettura, titolo in h1 con la misura dell'h2 del dialog. */
.gelatiere{padding:28px 0 40px}
.gelatiere .briciole{font-size:14px;color:var(--muted);margin-bottom:10px}
.gelatiere .briciole a{color:inherit}
.mk-scheda--pagina{display:block;max-width:760px;width:auto;margin:14px auto 0;box-shadow:0 12px 40px rgba(0,0,0,.10)}
.mk-scheda--pagina .mk-scheda__corpo{padding:28px}
.mk-scheda__testo h1{font-size:clamp(24px,3.4vw,34px);font-weight:900;margin:6px 0 2px;line-height:1.15}
.gelatiere__torna{max-width:760px;margin:22px auto 0;font-weight:700}

/*
 | GLI STEMMI DI REGIONE SICILIANA E CITTA' DI PALERMO (committente, 8 ottobre 2026).
 |
 | E' lo stesso caso del sigillo dell'Aceto Balsamico, un gradino piu' in su.
 | Misurato sulla pagina resa: col tetto comune di 70 px d'altezza il Ministero
 | del Turismo (proporzione 3,27) viene 206x63, mentre la Regione (0,89) viene
 | 62x70 e Palermo (1,03) 72x70. A parita' di ALTEZZA, il Ministero occupa tre
 | volte la superficie dei due stemmi: 12.978 px² contro 4.340. Non sono piccoli
 | per sbaglio, sono piccoli per forma.
 |
 | PERCHE' NON `--grande`: quel flag esiste per i marchi con un vincolo di
 | manuale — oggi Identita' Golose, che non puo' scendere sotto 20 mm — e alzarlo
 | avrebbe mosso anche lui. Qui il problema e' una proporzione, non una regola
 | altrui: per questo si usa la classe col nome del marchio.
 |
 | E SERVONO TRE CLASSI, non una. `.partner-logo--aceto-balsamico-modena img`
 | ha specificita' (0,1,1) e gli basta, perche' nella sua fascia non c'e'
 | nessuna regola di fascia. Qui sopra c'e' `.partner-tier--ist .partner-logo img`
 | che vale (0,2,1): una regola a classe singola perderebbe in silenzio, come
 | gia' successo due volte su questo file. Da qui `.partner-tier--ist` davanti.
 |
 | A 104 px vengono 92x104 e 107x104: 9.568 e 11.128 px², vicini al Ministero.
 | La piastrella cresce a 140 px per contenerli (104 + 36 di padding) e si vede
 | che e' piu' alta delle vicine: e' il prezzo della forma, non una svista.
*/
.partner-tier--ist .partner-logo--regione-siciliana img,
.partner-tier--ist .partner-logo--citta-palermo img{max-height:104px;max-width:150px}
.partner-tier--ist .partner-logo--regione-siciliana,
.partner-tier--ist .partner-logo--citta-palermo{min-height:140px}

/* Su telefono la fascia intera scende a 46 px: senza questo, i due stemmi
   resterebbero a 104 e sfonderebbero la riga. */
@media (max-width:640px){
  .partner-tier--ist .partner-logo--regione-siciliana img,
  .partner-tier--ist .partner-logo--citta-palermo img{max-height:74px;max-width:118px}
  .partner-tier--ist .partner-logo--regione-siciliana,
  .partner-tier--ist .partner-logo--citta-palermo{min-height:104px}
}

/* Nel piede la fascia istituzionale sta a 50 px: stessa proporzione, misura
   piu' piccola, perche' li' la striscia deve restare una striscia. */
.footer-partners .partner-tier--ist .partner-logo--regione-siciliana img,
.footer-partners .partner-tier--ist .partner-logo--citta-palermo img{max-height:72px;max-width:112px}
.footer-partners .partner-tier--ist .partner-logo--regione-siciliana,
.footer-partners .partner-tier--ist .partner-logo--citta-palermo{min-height:96px}