/* ============================================================
   FONT LOCALI — nessuna CDN, nessuna dipendenza esterna a runtime.
   ============================================================ */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/font/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/font/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/font/barlow-600.woff2") format("woff2");
}

/* ============================================================
   BASE
   ============================================================ */
:root {
  /* Altezza finale della casella di ricerca a UI Pagefind iniettata
     (misurata: contenitore 44px, input border-box coi bordi inclusi). */
  --altezza-ricerca: 44px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Sfondo del tema anche su html: la tela del browser resta del colore
   giusto tra una pagina e l'altra (niente lampo chiaro in tema scuro). */
html { background: var(--fondo); }

body {
  font-family: var(--font-testo);
  font-size: var(--dimensione-base);
  line-height: var(--interlinea-corpo);
  background: var(--fondo);
  color: var(--testo);
}

a { color: var(--accento); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

.impianto { display: flex; min-height: 100vh; }

/* ============================================================
   BARRA LATERALE
   ============================================================ */
.barra-laterale {
  width: 310px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fondo-barra);
  border-right: 1px solid var(--bordo);
}

.barra-testa { padding: 28px 24px 20px; }

.logo { font-size: var(--dimensione-etichetta); font-weight: var(--peso-semigrassetto); letter-spacing: var(--spaziatura-lettere-logo); color: var(--testo); }
.logo span { color: var(--accento); }

/* Logotipo per immagine (`cliente.logo`). Classi proprie e NON `.solo-scuro` /
   `.solo-chiaro`: quelle servono il contenuto redazionale prodotto da
   render-blocchi.js, questo è interfaccia prodotta da un filtro. Accoppiarli
   significherebbe che una modifica al `display` fatta per una griglia rompe la
   testata di ogni pagina, e in un tema solo.
   ARTBOARD FISSO: il file arriva già dimensionato per il riquadro di resa —
   262 × 80 px, la larghezza utile della barra laterale in tondo (310 meno 24
   di padding per lato e il bordo destro fanno 261) — e il CSS non lo adatta.
   Riempie la larghezza e l'altezza segue la proporzione del file, che è
   quella dell'artboard. Niente `max-height`, niente `object-fit`, niente
   `object-position`: non c'è un riquadro di ritaglio in cui centrare o
   accostare qualcosa, perché il file È il riquadro. Chi disegna controlla
   l'ingombro invece di subirlo, e il risultato non dipende più dalla
   proporzione del file consegnato.
   Il logotipo riempie il contenitore che lo ospita, e sono i contenitori a
   dichiarare la larghezza: la barra laterale con il proprio padding, la
   testata mobile con un token (vedi la media query dei 900px). Un contesto
   che non la dichiara ricade sulla larghezza intrinseca del file — 1048px —
   e da lì viene compresso da chi lo contiene: l'ingombro tornerebbe a
   dipendere dal viewport, che è ciò che l'artboard toglie di mezzo. */
.logo-immagine { display: block; width: 100%; height: auto; }
html[data-theme="light"] .logo-negativo { display: none; }
html[data-theme="dark"] .logo-positivo { display: none; }

/* Il campo di ricerca ha la stessa larghezza e lo stesso allineamento
   delle righe di summary sotto (che partono a 12px dal bordo).
   min-height: riserva lo spazio PRIMA che Pagefind inietti la sua UI
   (avviene dopo il primo paint), così la barra laterale non salta. */
#ricerca-manuale { margin: 20px -12px 0; min-height: var(--altezza-ricerca); }
#ricerca-manuale .pagefind-ui__search-input {
  font: inherit;
  font-size: var(--dimensione-corpo-piccolo);
  height: var(--altezza-ricerca);
}
/* Lente centrata verticalmente rispetto al campo */
#ricerca-manuale .pagefind-ui__form::before {
  top: calc((var(--altezza-ricerca) - 20px * var(--pagefind-ui-scale)) / 2);
}

/* scrollbar-gutter stabile: la comparsa della barra di scorrimento non
   restringe le righe (eviterebbe reflow e testi che vanno a capo). */
.alberatura { flex: 1; overflow-y: auto; scrollbar-gutter: stable; padding: 8px 12px 24px; font-size: var(--dimensione-corpo-piccolo-alt); }
/* Margine reale tra le righe adiacenti: visibile anche a sfondo continuo. */
.alberatura details { margin-bottom: 4px; }
.alberatura details[open] { background: var(--sezione-aperta); }
/* Regola base UNICA per tutti i summary: padding e metriche identiche in
   ogni stato (chiuso, aperto, hover, attivo). Gli stati cambiano solo
   colori e sfondi, mai dimensioni. */
.alberatura summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  color: var(--testo-2);
  font-weight: var(--peso-medio);
  user-select: none;
}
.alberatura summary::-webkit-details-marker { display: none; }
.alberatura summary:hover { background: var(--superficie-2); color: var(--testo); }
.alberatura details[open] > summary { color: var(--testo); }

.numero {
  font-size: var(--dimensione-micro);
  font-weight: var(--peso-semigrassetto);
  letter-spacing: var(--spaziatura-lettere-maiuscoletto);
  color: var(--testo-3);
  width: 18px;
  flex-shrink: 0;
}
.alberatura details[open] > summary .numero { color: var(--accento); }

.alberatura ul { list-style: none; padding: 4px 0 8px; }
.alberatura ul li + li { margin-top: 4px; }
/* Protezione permanente: un elenco senza voci non occupa mai spazio,
   anche se un errore a monte lo facesse arrivare in pagina. */
.alberatura ul:empty,
.alberatura ul:not(:has(li)) { display: none; }

/* Sezione pubblicata ma ancora senza schede: riga statica, non espandibile.
   Tono attenuato (testo-3): non deve sembrare interattiva. */
.voce-vuota {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 4px;
  color: var(--testo-3);
  font-weight: var(--peso-medio);
}
/* La voce corrente è uno <span aria-current="page">, non un link:
   stesse metriche del link, nessuna navigazione al click ripetuto. */
.alberatura ul a,
.alberatura ul .attiva {
  display: block;
  padding: 8px 12px 8px 40px;
  color: var(--testo-2);
}
.alberatura ul a:hover { background: var(--superficie-2); color: var(--testo); text-decoration: none; }
.alberatura ul .attiva {
  color: var(--testo);
  background: var(--superficie-2);
  box-shadow: inset 2px 0 0 var(--accento);
}

.voce-singola {
  display: block;
  padding: 10px 12px 10px 40px;
  color: var(--testo-2);
  font-weight: var(--peso-medio);
}
.voce-singola:hover { background: var(--superficie-2); color: var(--testo); text-decoration: none; }
/* Stato attivo agganciato ad aria-current, già nel markup: stessi tre valori di
   `.alberatura ul .attiva`, così una voce singola corrente si legge come una
   scheda corrente dentro una sezione. */
.voce-singola[aria-current="page"] {
  color: var(--testo);
  background: var(--superficie-2);
  box-shadow: inset 2px 0 0 var(--accento);
}

.barra-piede {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--bordo);
  font-size: var(--dimensione-nota);
  color: var(--testo-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.barra-piede .riga { display: flex; justify-content: space-between; align-items: center; }

.interruttore-tema {
  font: inherit;
  font-size: var(--dimensione-nota);
  cursor: pointer;
  color: var(--testo-2);
  background: none;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  padding: 5px 10px;
}
.interruttore-tema:hover { color: var(--testo); border-color: var(--testo-3); }

/* ============================================================
   CONTENUTO
   Gronda ~120px tra barra laterale e colonna, ed equivalente a
   destra dei blocchi: ospita le frecce dei caroselli.
   ============================================================ */
.contenuto { flex: 1; min-width: 0; color: var(--testo-2); }

/* 934px di blocchi + 120px di gronda per lato */
.colonna { max-width: 1174px; padding: 64px 120px 112px; }

.intestazione-scheda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.percorso { font-size: var(--dimensione-nota); color: var(--testo-3); margin-bottom: 16px; }
.percorso a { color: var(--testo-3); }
.percorso a:hover { color: var(--testo-2); }

.condividi {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;   /* area di tocco, non dimensione del glifo */
  min-width: 44px;
  padding: 0 .75rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--testo);
  opacity: .6;
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity .15s ease, background-color .15s ease;
}
.condividi:hover { opacity: 1; background: var(--superficie); }
.condividi:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.condividi svg { width: 18px; height: 18px; }
.condividi svg[hidden] { display: none; }

/* Niente --accento su --superficie: quella coppia è già annotata sotto
   soglia AA e non vale la pena aprire un nuovo punto di contrasto qui. */

.avviso-condivisione {
  position: fixed;
  left: 50%;
  bottom: 1.75rem;
  transform: translate(-50%, .75rem);
  background: var(--superficie);
  color: var(--testo);
  padding: .7rem 1.1rem;
  border-radius: 8px;
  font-size: .9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 50;
}
.avviso-condivisione.visibile { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) {
  /* L'etichetta resta per gli screen reader, sparisce solo alla vista */
  .condividi .etichetta {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .condividi { padding: 0; justify-content: center; }
}

/* Titoli: stesso colore del corpo, si distinguono solo per dimensione */
h1 {
  font-size: var(--dimensione-titolo-1);
  font-weight: var(--peso-medio);
  color: var(--testo-2);
  line-height: var(--interlinea-titolo-1);
  letter-spacing: var(--spaziatura-lettere-titolo-1);
  margin-bottom: 28px;
}

h2 {
  font-size: var(--dimensione-titolo-2);
  font-weight: var(--peso-medio);
  color: var(--testo-2);
  line-height: var(--interlinea-titolo-2);
  letter-spacing: var(--spaziatura-lettere-titolo-2);
  margin: 88px 0 20px;
}

.testo-informativo { font-size: var(--dimensione-corpo-grande); color: var(--testo-2); max-width: 62ch; }
.testo-informativo p + p { margin-top: 12px; }
.testo-informativo strong { color: var(--testo); font-weight: var(--peso-semigrassetto); }

.blocco { margin-top: 40px; }

/* ---------- media: immagine singola ---------- */
/* Niente bordo esterno: è lo sfondo scelto (`sfondo`) a fare da margine visivo. */
.media {
  background: var(--superficie);
  border-radius: 8px;
  overflow: hidden;
}
.media .tela {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--testo-3);
  font-size: var(--dimensione-corpo-piccolo);
}
.media .tela img { width: 100%; height: 100%; object-fit: contain; }

/* Aspetto del blocco immagine: 16:9 predefinito (sopra); `auto` segue la
   proporzione reale del file, con tetto di sicurezza sull'altezza. */
.media.aspetto-1-1 .tela { aspect-ratio: 1 / 1; }
.media.aspetto-4-3 .tela { aspect-ratio: 4 / 3; }
.media.aspetto-9-16 .tela { aspect-ratio: 9 / 16; }
.media.aspetto-auto .tela { aspect-ratio: auto; }
.media.aspetto-auto .tela img { height: auto; max-height: 520px; object-fit: contain; }

/* Fondale di visualizzazione delle voci media (`sfondo` per voce):
   bianco letterale di default — deciso: NON è un token, è il fondale
   fisso su cui si mostrano i file, indipendente dal tema; il file
   scaricabile resta intatto. `sfondo: nessuno` → tela trasparente;
   colore esatto (es. "#f29100") → stile inline generato dalla scheda. */
.tela-bianca { background: #ffffff; }
.media figcaption {
  padding: 10px 16px;
  font-size: var(--dimensione-nota);
  color: var(--testo-3);
  border-top: 1px solid var(--bordo);
}

/* ---------- media: griglia 2 / 3 colonne, va a capo da sola ---------- */
.griglia { display: grid; gap: 16px; }
.griglia.col-2 { grid-template-columns: repeat(2, 1fr); }
.griglia.col-3 { grid-template-columns: repeat(3, 1fr); }

/* Aspetto delle celle: 4:3 predefinito, 1:1 e 9:16 su parametro `aspetto` */
.griglia.aspetto-1-1 .cella .tela { aspect-ratio: 1 / 1; }
.griglia.aspetto-9-16 .cella .tela { aspect-ratio: 9 / 16; }

.cella {
  background: var(--superficie);
  border-radius: 8px;
  overflow: hidden;
}
.cella .tela {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--testo-3);
  font-size: var(--dimensione-nota);
}
.cella .tela img { width: 100%; height: 100%; object-fit: cover; }
.cella figcaption {
  padding: 8px 12px;
  font-size: var(--dimensione-nota);
  color: var(--testo-3);
  border-top: 1px solid var(--bordo);
}

/* ---------- media: carosello (scorrimento con aggancio + puntini + frecce) ---------- */
.carosello { position: relative; }
.carosello .nastro {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: 8px;
  background: var(--superficie);
}
.carosello .nastro::-webkit-scrollbar { display: none; }
.diapositiva {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.diapositiva .tela {
  aspect-ratio: 16 / 8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--testo-3);
  font-size: var(--dimensione-corpo-piccolo);
}
.diapositiva .tela img { width: 100%; height: 100%; object-fit: cover; }
.diapositiva figcaption {
  padding: 10px 16px;
  font-size: var(--dimensione-nota);
  color: var(--testo-3);
  border-top: 1px solid var(--bordo);
}
.puntini {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.puntini button {
  width: 28px;
  height: 4px;
  border: none;
  border-radius: 2px;
  background: var(--bordo);
  cursor: pointer;
  padding: 0;
}
.puntini button.attivo { background: var(--accento); }

/* Frecce fuori dal contenitore, nella gronda laterale (modifica decisa). */
.carosello .freccia {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--bordo);
  background: var(--superficie);
  color: var(--testo);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carosello .freccia:hover { border-color: var(--testo-3); background: var(--superficie-2); }
.carosello .freccia-prec { right: 100%; margin-right: 24px; }
.carosello .freccia-succ { left: 100%; margin-left: 24px; }

/* ---------- media: video ---------- */
.video-blocco {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: 8px;
  overflow: hidden;
}
.video-blocco video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--fondo);
}
.video-blocco figcaption {
  padding: 10px 16px;
  font-size: var(--dimensione-nota);
  color: var(--testo-3);
  border-top: 1px solid var(--bordo);
}

/* ---------- fare / non fare ---------- */
.fare-nonfare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.esempio {
  border: 1px solid var(--bordo);
  border-radius: 8px;
  overflow: hidden;
  background: var(--superficie);
}
.esempio .tela {
  aspect-ratio: 4 / 2.6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--testo-3);
  font-size: var(--dimensione-nota);
}
.esempio .tela img { width: 100%; height: 100%; object-fit: cover; }
.esempio .didascalia {
  padding: 10px 14px;
  font-size: var(--dimensione-nota-media);
  border-top: 1px solid var(--bordo);
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.esempio .segno { font-weight: var(--peso-semigrassetto); }
.esempio.fare .segno { color: var(--ok); }
.esempio.nonfare .segno { color: var(--no); }

/* ---------- download: appare solo dove dichiarato ---------- */
.scaricamenti { border-top: 1px solid var(--bordo); }
.scarico {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--bordo);
}
.scarico .etichetta { flex: 1; font-size: var(--dimensione-corpo); }
.scarico .meta { font-size: var(--dimensione-nota); color: var(--testo-3); white-space: nowrap; }
.bottone {
  display: inline-block;
  font: inherit;
  font-size: var(--dimensione-nota-media);
  font-weight: var(--peso-medio);
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 6px;
  border: none;
  background: var(--accento);
  color: var(--accento-testo);
}
.bottone:hover { filter: brightness(1.08); text-decoration: none; }

/* Pulsante secondario: contorno e testo grigi, sfondo trasparente.
   L'accento resta riservato all'azione primaria della scheda (.bottone). */
.bottone-secondario {
  display: inline-block;
  font: inherit;
  font-size: var(--dimensione-nota-media);
  font-weight: var(--peso-medio);
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 6px;
  border: 1px solid var(--bordo);
  background: transparent;
  color: var(--testo-2);
}
.bottone-secondario:hover { color: var(--testo); border-color: var(--testo-3); text-decoration: none; }

/* ---------- FAQ dalle `domande` ---------- */
.faq { border-top: 1px solid var(--bordo); }
.faq details { border-bottom: 1px solid var(--bordo); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 4px;
  font-size: var(--dimensione-corpo);
  color: var(--testo);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--testo-3); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "\2013 "; }
.faq .risposta { padding: 0 4px 16px; font-size: var(--dimensione-corpo); color: var(--testo-2); max-width: 62ch; }
.faq .risposta p + p { margin-top: 8px; }

/* ---------- blocco contatto: elemento fisso di interfaccia, prima della riga di servizio ---------- */
.contatto {
  margin-top: 88px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.contatto p { font-size: var(--dimensione-corpo-grande); }

/* ---------- riga di servizio e navigazione ---------- */
.servizio {
  margin-top: 88px;
  padding-top: 16px;
  border-top: 1px solid var(--bordo);
  font-size: var(--dimensione-nota);
  color: var(--testo-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}

.prec-succ { margin-top: 40px; display: flex; justify-content: space-between; gap: 16px; }
.prec-succ a {
  flex: 1;
  max-width: 48%;
  padding: 14px 16px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  color: var(--testo);
}
.prec-succ a:hover { text-decoration: none; border-color: var(--testo-3); background: var(--superficie); }
.prec-succ .verso { display: block; font-size: var(--dimensione-piccola); color: var(--testo-3); margin-bottom: 2px; }
.prec-succ .succ { text-align: right; margin-left: auto; }

/* ---------- toggle per tema del singolo elemento (`tema: dark|light`) ---------- */
.solo-scuro, .solo-chiaro { display: none; }
html[data-theme="dark"] .solo-scuro { display: block; }
html[data-theme="light"] .solo-chiaro { display: block; }

/* ---------- elenchi di link (pagina di sezione) ---------- */
.elenco-schede { display: flex; flex-direction: column; gap: 8px; }
.voce-elenco {
  display: block;
  padding: 12px 16px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  color: var(--testo);
}
.voce-elenco:hover { text-decoration: none; border-color: var(--testo-3); background: var(--superficie); }

/* ---------- Home ---------- */
.colonna-home .hero .tela { aspect-ratio: 21 / 9; }
/* Il bordo di `.video-blocco` serve dentro le schede, dove il blocco ::: media
   è un riquadro fra altri contenuti e va delimitato. In apertura di home il
   video è l'elemento, non un riquadro citato: il bordo lo incornicerebbe.
   Tolto solo qui, in posizione di hero; la sezione "media: video" resta
   intatta e i blocchi delle schede conservano il riquadro. */
.colonna-home .hero.video-blocco { border: none; }
.identita-home { margin: 40px 0; }
.claim { font-size: var(--dimensione-corpo-grande); color: var(--testo-2); margin-top: 12px; max-width: 62ch; }
.versione-home { font-size: var(--dimensione-nota); color: var(--testo-3); margin-top: 12px; }

/* ============================================================
   MOBILE
   ============================================================ */
.testata-mobile { display: none; }

@media (max-width: 900px) {
  /* La testata resta in alto mentre si scorre e sta SOPRA il cassetto, che le
     scende sotto: `sticky` invece di `fixed` perché così occupa la sua riga
     nel flusso e non serve compensare con un padding sul body — una misura
     che dipenderebbe dall'altezza del logotipo, cioè dal cliente.
     `gap`: con logotipo a larghezza fissa `space-between` distribuisce solo
     ciò che avanza, e quando avanza poco i due elementi si toccano. */
  .testata-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 12px 20px;
    background: var(--fondo-barra);
    border-bottom: 1px solid var(--bordo);
  }
  /* Il logotipo dichiara la propria larghezza e non fa da molla: senza
     `flex: 0 0 auto` l'item parte dalla larghezza intrinseca del file e il
     flex-shrink lo riduce a «quel che resta», che cambia col viewport. */
  .testata-mobile .logo {
    flex: 0 0 auto;
    width: var(--larghezza-logotipo-testata-mobile);
  }
  .apri-menu {
    font: inherit; font-size: var(--dimensione-corpo-piccolo); cursor: pointer;
    background: none; border: 1px solid var(--bordo);
    border-radius: 6px; padding: 6px 12px; color: var(--testo);
  }
  /* Menu a discesa: il cassetto è largo quanto la pagina e scende da sotto la
     testata, invece di entrare di lato da un pannello stretto. Resta nel
     flusso (`.impianto` da flex a block) e si apre in altezza, così la sua
     posizione la decide la testata che lo precede e non un numero scritto qui.
     Il tetto di 100vh è un limite, non una misura: sotto quella soglia il
     cassetto è alto quanto il suo contenuto, sopra scorre da sé. */
  .impianto { display: block; }
  .barra-laterale {
    position: static;
    width: 100%;
    height: auto;
    max-height: 0;
    overflow: hidden;
    border-right: none;
    transition: max-height 0.25s ease;
  }
  body.menu-aperto .barra-laterale {
    max-height: 100vh;
    overflow-y: auto;
    border-bottom: 1px solid var(--bordo);
  }
  /* Il logotipo della barra sparisce: ce l'ha già la testata, e sotto il
     cassetto se ne intravedeva un secondo. Col logo via, il padding torna
     simmetrico — quei 28px in testa reggevano il logotipo. */
  .barra-testa { padding: 20px 24px; }
  .barra-testa .logo { display: none; }
  .colonna { padding: 32px 20px 72px; }
  .griglia.col-2, .griglia.col-3 { grid-template-columns: 1fr; }
  .fare-nonfare { grid-template-columns: 1fr; }
  h1 { font-size: var(--dimensione-titolo-1-mobile); }
  h2 { font-size: var(--dimensione-titolo-2-mobile); margin-top: 64px; }
  .carosello .freccia { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .barra-laterale { transition: none; }
  .carosello .nastro { scroll-behavior: auto; }
}

/* ============================================================
   SEGNI DI BOZZA — colori di strumento, non di marca.
   Questi valori NON vengono dai token: appartengono al manuale come
   attrezzo di lavoro, non all'identità del cliente. Con l'accento del
   cliente il segno rischierebbe di confondersi con la tavolozza vera, e
   cambierebbe da cliente a cliente proprio dove serve costanza.
   Per lo stesso motivo `collauda.js` non li verifica: controlla i token
   del brand. I contrasti sono stati misurati a mano, testo su fondo
   della fascia: 6,99:1 in tema chiaro e 8,64:1 in tema scuro (AA 4,5:1);
   il pallino, elemento non testuale, sta a 4,05:1 e 7,21:1 sul suo peggior
   sfondo di barra laterale (AA non testuale 3:1).
   ============================================================ */
html[data-theme="dark"] {
  --bozza-fondo: #38290c;
  --bozza-testo: #f2c46b;
  --bozza-segno: #e0a838;
}
html[data-theme="light"] {
  --bozza-fondo: #fbeecb;
  --bozza-testo: #6b4a00;
  --bozza-segno: #9c6100;
}

/* Fascia in testa alla scheda: proprietà della pagina, non del contenuto,
   quindi barra piena a tutta la colonna e non un'etichetta accanto al titolo.
   `flex-wrap`: a larghezze strette il testo lungo scende sotto la coppia
   icona+Bozza, che resta unita. Mai oltre due righe. */
.fascia-bozza {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 10px 14px;
  margin-bottom: 24px;
  border-radius: 6px;
  background: var(--bozza-fondo);
  color: var(--bozza-testo);
  font-size: var(--dimensione-corpo-piccolo);
  line-height: 1.4;
  box-shadow: inset 3px 0 0 var(--bozza-segno);
}
/* Icona e parola restano sulla stessa riga: sono l'unità che si legge per prima. */
.fascia-bozza .segno {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-weight: var(--peso-semigrassetto);
  letter-spacing: var(--spaziatura-lettere-maiuscoletto);
  text-transform: uppercase;
}
.fascia-bozza .matita { width: 14px; height: 14px; display: block; fill: currentColor; }
/* Il testo lungo non si spezza a metà parola: o sta in riga, o va a capo intero. */
.fascia-bozza .nota { min-width: 0; overflow-wrap: break-word; }

/* Pallino in barra laterale. Non sposta nulla: è posizionato dentro i 40px
   di rientro che TUTTE le voci hanno già, pubblicate comprese. Lo spazio è
   quindi riservato per tutte e resta semplicemente vuoto dove non serve. */
.alberatura ul a,
.alberatura ul .attiva { position: relative; }
.alberatura ul .voce-bozza::before {
  content: "";
  position: absolute;
  left: 24px;
  top: calc(50% - 2.5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bozza-segno);
}

/* Rapporto pubblicate/totale accanto al titolo di sezione. Cifre tabulari:
   le colonne restano incolonnate tra una sezione e l'altra. */
.alberatura summary .rapporto {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--dimensione-micro);
  font-weight: var(--peso-regolare);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--bozza-segno);
}

/* ============================================================
   Tabelle del corpo scheda
   ============================================================ */
.tabella { margin: 32px 0; overflow-x: auto; }
.tabella table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.tabella th {
  text-align: left;
  font-size: var(--dimensione-piccola);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--spaziatura-lettere-maiuscoletto);
  color: var(--testo-2);
  padding: 0 24px 10px 0;
  border-bottom: 2px solid var(--bordo);
}
.tabella td {
  font-size: var(--dimensione-corpo);
  color: var(--testo);
  padding: 10px 24px 10px 0;
  border-bottom: 1px solid var(--bordo);
  vertical-align: middle;
}
.tabella tr:last-child td { border-bottom: none; }
.tabella th:last-child, .tabella td:last-child { padding-right: 0; }

/* Campione di colore dentro una cella: il colore arriva da uno style in linea nella scheda. */
.campione {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--bordo);
  margin-right: 10px;
  vertical-align: -2px;
}

/* ---------- Pagefind UI: sovrascrittura colori con i token del manuale ---------- */
#ricerca-manuale {
  --pagefind-ui-primary: var(--accento);
  --pagefind-ui-text: var(--testo);
  --pagefind-ui-background: transparent;
  --pagefind-ui-border: var(--bordo);
  --pagefind-ui-tag: var(--superficie-2);
  --pagefind-ui-font: var(--font-testo);
  --pagefind-ui-border-radius: 6px;
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-scale: 0.9;
}
#ricerca-manuale .pagefind-ui__search-input::placeholder {
  color: var(--testo-2);
  opacity: 1;
}

/* Prosa del corpo scheda */
.colonna > p { margin-bottom: 20px; }
.colonna > p:last-child { margin-bottom: 0; }

.colonna > ul,
.colonna > ol { margin: 0 0 20px; padding-left: 24px; }
.colonna > ul li + li,
.colonna > ol li + li { margin-top: 8px; }
.colonna li > p { margin: 0; }

.colonna > h3 {
  margin: 40px 0 12px;
  font-size: var(--dimensione-titolo-3);
  font-weight: var(--peso-semigrassetto);
  line-height: var(--interlinea-titolo-2);
}

.colonna > blockquote {
  border-left: 2px solid var(--testo-3);
  padding-left: 20px;
  margin: 0 0 20px;
  color: var(--testo-3);
}

.colonna code {
  background: var(--superficie);
  padding: 2px 6px;
  border-radius: 3px;
}

.colonna > hr {
  border: 0;
  border-top: 1px solid var(--bordo);
  margin: 40px 0;
}

.colonna > p a,
.colonna li a,
.colonna > blockquote a {
  text-decoration: underline;
}

/* Campioni di colore grandi */
.campioni {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
  gap: 16px;
  margin: 0 0 20px;
}
.campione-grande {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--testo-3);
}

.pastiglia {
  display: inline-block;
  width: 50px;
  height: 50px;
  vertical-align: middle;
  margin-right: 16px;
  border: 1px solid var(--testo-3);
}

.campione-testo {
  border: 1px solid var(--testo-3);
  padding: 24px;
  margin: 24px 0;
}

.campione-testo .riga {
  font-size: 32px;
  line-height: 1.3;
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.campione-testo .riga:last-child {
  margin-bottom: 0;
}

.campione-testo .etichetta {
  font-family: var(--font-testo);
  font-size: var(--dimensione-etichetta);
  font-weight: 400;
  color: var(--testo-2);
  margin: 0 0 16px;
}