/* ==========================================================================
   Hubset — foglio di stile del sito di prodotto
   Scritto a mano. Nessun framework, nessun build step, nessuna richiesta di rete.

   Deriva dal foglio di stile di dacdam.com e da quello di vivg.it: Hubset è un
   prodotto DacDam e i siti devono leggersi come la stessa mano. Scala
   tipografica, spazio, griglia, raggi, linguaggio grafico e componenti sono gli
   stessi. Il colore è di questo sito: esce dal marchio di Hubset (§ 2).

   Direzione: minimal premium con superfici morbide. La qualità viene dalla
   precisione (griglia, ritmo, tipografia) e da un uso disciplinato del colore:
   le stanze sono acromatiche, il colore sta nei segni e in una sola fascia
   per pagina. Vedi docs/02-DESIGN.md.

   Differenze rispetto a vivg.it, tutte in § 9:
     - via .istituto e .piano (qui non ci sono clienti nominati né listino);
     - in più .architettura, il nucleo comune e i moduli che vi si innestano;
     - .passaggi ha la variante verticale, come in vivg.it.

   Indice
   0.  Carattere tipografico
   1.  Reset
   2.  Token
   3.  Tipografia
   4.  Layout e griglia
   5.  Linguaggio grafico: linee di processo e nodi
   6.  Intestazione e navigazione
   7.  Bottoni e link
   8.  Sezioni
   9.  Componenti
   10. Form
   11. Piè di pagina
   12. Utility
   13. Stampa
   ========================================================================== */


/* ==========================================================================
   0. CARATTERE TIPOGRAFICO
   Outfit, licenza SIL Open Font License 1.1 (vedi assets/font/LICENZA.txt).
   Ospitato in locale: nessuna richiesta a domini esterni, come per il resto
   del sito. È un font variabile: un solo file copre i pesi da 300 a 700.
   Serve soltanto per i titoli; il corpo resta sul carattere di sistema.
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../font/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../font/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   1. RESET
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* L'intestazione è fissa: le ancore devono atterrare sotto di essa. */
  scroll-padding-top: 6.5rem;
}

body,
h1, h2, h3, h4, p,
figure, blockquote, dl, dd,
ul, ol { margin: 0; }

ul[class], ol[class] { list-style: none; padding: 0; }

img, svg, video { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; }

table { border-collapse: collapse; width: 100%; }

/* Chi ha chiesto meno animazioni non ne riceve nessuna. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   2. TOKEN
   ========================================================================== */

:root {
  /* --- Colore ------------------------------------------------------------
     La tavolozza esce dal marchio. Il logo ha due varianti: la chiara (ciano
     e giallo, per i fondi scuri) e la scura (verde petrolio e lime, per i
     fondi chiari). Dai pixel dei due file:
       #0084a8  il teal delle spigolature e del nome, variante chiara
       #004054  il petrolio profondo del nome, variante scura
       #fcfc64  il giallo delle tessere, variante chiara

     Tre ruoli, e non si scambiano:
       - la carta: grigi appena freddi per le superfici, un petrolio quasi
         nero per l'inchiostro. Sono le stanze, e sono acromatiche;
       - ciò che si tocca: --accent, il teal del marchio scurito fino a 5,6:1
         su bianco (il #0084a8 originale sta a 4,3:1 e non regge un link);
       - il marchio: --marchio, il petrolio profondo del nome. È la
         punteggiatura grafica (nodo dell'occhiello, filetto, elenchi, linea
         di processo) e la fascia del richiamo finale. Sui fondi scuri e sulla
         fascia lo stesso ruolo lo fa il giallo, --marchio-chiaro.
     Il marchio non è mai testo corrente e non è mai dentro un comando.

     Niente tinte pallide: due superfici sbiancate stanno sempre a circa 1,1
     di contrasto fra loro e affiancate si leggono come lo stesso colore a due
     intensità. Il colore vive nei segni da 7px e in una sola fascia satura.

     Rapporti verificati (docs/02-DESIGN.md § 2):
       --inchiostro    su --carta 15,03:1  su --carta-2 13,81:1  su --carta-3 12,32:1
       --inchiostro-2  su --carta  8,60:1  su --carta-2  7,90:1  su --carta-3  7,05:1
       --inchiostro-3  su --carta  6,11:1  su --carta-2  5,61:1  su --carta-3  5,01:1
       --accent        su --carta  5,65:1  su --carta-2  5,19:1  su --carta-3  4,63:1
       --accent-scuro  su --carta  8,22:1  su --carta-2  7,55:1  su --carta-3  6,73:1
       --marchio       su --carta 11,28:1  su --carta-2 10,36:1  su --carta-3  9,25:1
       --marchio-chiaro su --inchiostro 13,78:1 · su --fascia 10,34:1 */
  --carta:        #ffffff;
  --carta-2:      #f2f6f6;   /* fascia alternata */
  --carta-3:      #e2eaec;   /* pannelli: la targa, le note */
  --carta-calda:  #fbf8de;   /* banner cookie: il giallo delle tessere, sbiancato */

  --inchiostro:   #0b2a35;   /* titoli, testo forte, fascia scura */
  --inchiostro-2: #34505a;   /* testo corrente */
  --inchiostro-3: #4b6671;   /* testo secondario, didascalie */

  --linea:        #e0e8ea;   /* filetti */
  --linea-2:      #c3d0d4;   /* filetti in evidenza (decorativi) */
  --bordo-comando: #5f7a84;  /* bordo dei controlli: ≥3:1 su ogni fondo */

  --accent:       #00708f;   /* link, bottoni, controlli */
  --accent-scuro: #00566e;   /* stato attivo */
  --accent-tenue: #e3f1f5;   /* alone di focus dei campi */

  --marchio:        #004054;
  --marchio-chiaro: #fcfc64;

  --errore:       #b3261e;
  --errore-tenue: #fdf2f1;
  --successo:     #1d6a3f;
  --successo-tenue: #f0f8f3;

  /* La fascia del richiamo finale: il petrolio del marchio, a tutta
     larghezza. È l'unico colore saturo del sito e cade sulla chiamata
     all'azione. Bianco sopra sta a 11,28:1, il corpo smorzato a 8,71:1. */
  --fascia:       #004054;
  --fascia-testo: #cfe6ee;

  /* --- Tipografia --------------------------------------------------------
     Due ruoli. I titoli usano Outfit, geometrico, in un solo peso (500):
     è la scelta che dà alla pagina il tono morbido e sicuro di sé, senza
     ricorrere al grassetto. Il corpo resta sul carattere di sistema, che
     alle misure di lettura è più leggibile e non costa nulla. */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-titolo: "Outfit", ui-sans-serif, system-ui, -apple-system,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
               Consolas, "Liberation Mono", monospace;

  /* Scala fluida. I titoli sono cresciuti e l'interlinea si è stretta:
     è così che un titolo geometrico diventa un blocco compatto invece
     che una riga di testo grande. */
  --testo--1: 0.875rem;                           /* 14px  didascalie */
  --testo-0:  1.0625rem;                          /* 17px  corpo */
  --testo-1:  1.125rem;                           /* 18px  corpo grande */
  --testo-2:  clamp(1.375rem, 1.15rem + 1vw, 1.75rem);      /* 22 → 28 */
  --testo-3:  clamp(1.75rem, 1.45rem + 1.4vw, 2.25rem);     /* 28 → 36 */
  --testo-4:  clamp(2.125rem, 1.6rem + 2.4vw, 3rem);        /* 34 → 48 */
  --testo-5:  clamp(2.75rem, 1.9rem + 3.8vw, 4.75rem);      /* 44 → 76 */

  --peso-normale: 400;
  --peso-medio:   500;
  --peso-forte:   600;

  /* --- Spazio ------------------------------------------------------------ */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 2.5rem;
  --s8: 3rem;
  --s9: 4rem;
  --s10: 5rem;

  /* Ritmo verticale fra sezioni: 72px su mobile, 128px su desktop. */
  --sezione-y: clamp(4.5rem, 3rem + 5.5vw, 8rem);

  /* --- Misure ------------------------------------------------------------ */
  --largo:    68.75rem;  /* 1100px: più stretto di prima, righe più corte */
  --medio:    56rem;
  --stretto:  42rem;     /* colonna di testo: 60-70 caratteri */
  --bordo-pagina: clamp(1.25rem, 4vw, 2.5rem);

  /* --- Dettagli ----------------------------------------------------------
     Il raggio è il segno più costante della revisione: 16px su tutto ciò
     che è una superficie, 24px sui pannelli grandi, 10px sui controlli
     piccoli. Non convivono raggi diversi sullo stesso elemento. */
  --raggio:   10px;
  --raggio-m: 16px;
  --raggio-g: 24px;
  --ombra:    0 1px 2px rgba(11, 42, 53, 0.04), 0 12px 32px rgba(11, 42, 53, 0.07);
  --transizione: 160ms ease;

  --z-header: 100;
}


/* ==========================================================================
   3. TIPOGRAFIA
   La gerarchia si costruisce con dimensione e spazio, mai con il colore.
   ========================================================================== */

body {
  font-family: var(--font);
  font-size: var(--testo-0);
  font-weight: var(--peso-normale);
  line-height: 1.65;
  color: var(--inchiostro-2);
  background: var(--carta);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  overflow-wrap: break-word;
  font-family: var(--font-titolo);
  color: var(--inchiostro);
  font-weight: var(--peso-medio);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--testo-5); line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-size: var(--testo-4); }
h3 { font-size: var(--testo-2); line-height: 1.2; letter-spacing: -0.015em; }

h4 {
  font-size: var(--testo-1);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

p { text-wrap: pretty; }

p + p { margin-top: var(--s4); }

strong { color: var(--inchiostro); font-weight: var(--peso-forte); }

small { font-size: var(--testo--1); }

/* Occhiello di sezione: etichetta monospazio preceduta dal nodo.
   Resta il segno che apre ogni blocco. */
.occhiello {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
  font-family: var(--font-mono);
  font-size: var(--testo--1);
  font-weight: var(--peso-medio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inchiostro-3);
}

.occhiello::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--marchio);
}

/* Sommario sotto il titolo di sezione. */
.sommario {
  max-width: var(--stretto);
  margin-top: var(--s5);
  font-size: var(--testo-1);
  line-height: 1.6;
  color: var(--inchiostro-2);
}

.prosa { max-width: var(--stretto); }
.prosa > * + * { margin-top: var(--s5); }
.prosa h2 { margin-top: var(--s8); }
.prosa h3 { margin-top: var(--s7); }
.prosa ul, .prosa ol { padding-left: var(--s5); }
.prosa li + li { margin-top: var(--s2); }
.prosa ul[class], .prosa ol[class] { padding-left: 0; }

/* Nota da verificare (usata nelle informative): deve saltare all'occhio di chi
   deve completarla, senza sembrare un errore agli occhi del visitatore.
   Stava sulla tinta ambra, che non esiste più: ora è il pannello neutro,
   che in una pagina di sola prosa stacca comunque. */
.prosa blockquote {
  padding: var(--s5) var(--s6);
  margin-inline: 0;
  background: var(--carta-3);
  border-radius: var(--raggio-m);
  font-size: var(--testo--1);
  color: var(--inchiostro-2);
}

.prosa table {
  font-size: var(--testo--1);
  border-top: 2px solid var(--inchiostro);
}

.prosa th,
.prosa td {
  padding: var(--s3) var(--s4) var(--s3) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linea);
}

.prosa th { color: var(--inchiostro); font-weight: var(--peso-forte); }

.prosa code {
  padding: 0.1em 0.4em;
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--carta-3);
  border-radius: 5px;
}

/* Su schermi stretti la tabella scorre dentro il proprio contenitore, senza
   perdere il ruolo semantico di tabella e senza forzare tutto su una riga sola. */
.tabella-scorrevole {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabella-scorrevole:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tabella-scorrevole table { min-width: 34rem; }


/* ==========================================================================
   4. LAYOUT E GRIGLIA
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--largo);
  margin-inline: auto;
  padding-inline: var(--bordo-pagina);
}

.container--medio { max-width: var(--medio); }

.sezione { padding-block: var(--sezione-y); }

/* --- Fasce di colore ------------------------------------------------------
   La pagina si legge come una pila di stanze, e le stanze sono acromatiche:
   bianco, grigio chiarissimo, bianco, la fascia scura. **Non ci sono tinte
   pallide.** Due superfici sbiancate stanno sempre a circa 1,1 di contrasto
   fra loro: affiancate si leggono come lo stesso colore a due intensità, e
   il ritmo che dovrebbero dare non lo danno.

   Il colore del sito sta quindi in due posti soltanto: i segni petrolio a 7px
   sparsi ovunque, e **una sola fascia satura per pagina** — il richiamo
   finale, cioè la chiamata all'azione. È insieme più sobrio e più
   caratterizzato dell'impaginazione a tinte di prima: meno colore, e quel
   poco è quello del marchio. Vedi docs/02-DESIGN.md § 2. */

.sezione--tinta { background: var(--carta-2); }

/* Il richiamo finale: l'unica superficie satura del sito.
   Respira meno delle altre fasce, ed è voluto: il ritmo verticale di serie
   è tarato sul bianco, dove il vuoto non pesa. Riempito di petrolio lo stesso
   vuoto diventa un blocco di colore che schiaccia il testo, tanto più che
   il richiamo occupa solo la colonna di sinistra. */
.sezione--fascia {
  padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 5.5rem);
  background: var(--fascia);
  color: var(--fascia-testo);
}
.sezione--fascia h2,
.sezione--fascia h3,
.sezione--fascia strong { color: #ffffff; }
.sezione--fascia a:not(.bottone) { color: #ffffff; }
.sezione--fascia .occhiello { color: var(--fascia-testo); }
.sezione--fascia .occhiello::before { background: #ffffff; }

/* Inversione. */
.sezione--scura {
  background: var(--inchiostro);
  color: #cfdde2;
}
.sezione--scura h2,
.sezione--scura h3,
.sezione--scura strong { color: #ffffff; }
.sezione--scura .occhiello { color: #a2b5bc; }
.sezione--scura .occhiello::before { background: var(--marchio-chiaro); }
.sezione--scura a { color: #7fd6ee; }
.sezione--scura .sommario { color: #c0d0d6; }
.sezione--scura .testo-secondario { color: #a2b5bc; }

/* Le schede dentro una sezione scura non diventano rettangoli bianchi:
   restano trasparenti con un fondo appena percettibile. */
.sezione--scura .scheda {
  background: rgba(255, 255, 255, 0.06);
  color: #c0d0d6;
}

/* Griglia a 12 colonne. Su mobile tutto diventa una colonna sola. */
.griglia {
  display: grid;
  gap: var(--s6);
  grid-template-columns: repeat(12, 1fr);
}

.griglia--stretta { gap: var(--s5); }
.griglia--larga { gap: var(--s7); }

.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

@media (max-width: 900px) {
  /* Una sola colonna: così nessuna combinazione di span può far traboccare la pagina. */
  .griglia { grid-template-columns: 1fr; }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: auto; }
}

/* Intestazione di sezione a due colonne: titolo a sinistra, testo a destra.
   È il pattern che dà al sito l'aria di documento ben impaginato. */
/* Il titolo prende sette colonne su dodici: alla scala tipografica nuova,
   cinque lo spezzavano in cinque o sei righe. */
.testata {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s6) var(--s8);
  align-items: start;
  margin-bottom: var(--s9);
}

.testata > :first-child { grid-column: 1; }

@media (max-width: 860px) {
  .testata { grid-template-columns: 1fr; gap: var(--s5); margin-bottom: var(--s7); }
}


/* ==========================================================================
   5. LINGUAGGIO GRAFICO: LINEE DI PROCESSO E NODI
   Unico segno riconoscibile del sito. Richiama il flusso di un processo
   aziendale: passaggi collegati, stati, punti di controllo.

   Nella revisione la linea ha preso la stessa curvatura dei riquadri: dove
   cambia direzione non fa un angolo, fa un gomito arrotondato. È il punto in
   cui il linguaggio storico del sito e la morbidezza della nuova impostazione
   diventano la stessa cosa.

   Regola invariata: compare in pochi punti chiave, mai come sfondo decorativo.
   ========================================================================== */

/* Filetto con nodo iniziale, usato per separare blocchi. */
.filetto {
  position: relative;
  height: 1px;
  background: var(--linea);
  border: 0;
  margin: 0;
}

.filetto::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--marchio);
}

/* Elenco di passaggi collegati da una linea continua. */
.passaggi {
  display: grid;
  gap: var(--s6);
  grid-template-columns: repeat(4, 1fr);
  counter-reset: passaggio;
}

.passaggio {
  position: relative;
  padding-top: var(--s6);
  counter-increment: passaggio;
}

/* La linea che collega i passaggi. */
.passaggio::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: calc(var(--s6) * -1);
  height: 2px;
  background: var(--linea-2);
}

.passaggio:last-child::before { right: 0; }

/* Il nodo del passaggio. */
.passaggio::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--carta);
  border: 2px solid var(--marchio);
}

.sezione--tinta .passaggio::after   { background: var(--carta-2); }

.passaggio__numero {
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--testo--1);
  color: var(--inchiostro-3);
  letter-spacing: 0.06em;
}

.passaggio__numero::before {
  content: "0" counter(passaggio);
}

.passaggio h3 { margin-bottom: var(--s3); }

.passaggio p { font-size: var(--testo-0); }

.passaggio__esito {
  display: block;
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--linea);
  font-size: var(--testo--1);
  color: var(--inchiostro-3);
}

@media (max-width: 900px) {
  .passaggi { grid-template-columns: 1fr; gap: 0; }
  .passaggio { padding: 0 0 var(--s6) var(--s7); }
  /* Su mobile la linea diventa verticale: stessa idea, altro asse. */
  .passaggio::before {
    top: 5px;
    bottom: 0;
    left: 5px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .passaggio:last-child::before { bottom: auto; height: 0; }
  .passaggio::after { left: 0; top: 0; }
}


/* ==========================================================================
   6. INTESTAZIONE E NAVIGAZIONE
   ========================================================================== */

.salta-al-contenuto {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: var(--s3) var(--s5);
  background: var(--inchiostro);
  color: #fff;
  border-radius: var(--raggio);
}

/* Il contenitore principale riceve il fuoco dal salto al contenuto, ma non
   deve mostrare l'anello: non è un elemento con cui si interagisce. */
#contenuto:focus { outline: none; }

.salta-al-contenuto:focus {
  left: var(--s4);
  top: var(--s4);
}

.intestazione {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(10px);
}

.intestazione__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 88px;
}

/* Logotipo tipografico. Il nodo quadrato, ora arrotondato come tutto il
   resto, lo lega al linguaggio grafico del sito. */
.logotipo {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-titolo);
  font-size: 1.375rem;
  font-weight: var(--peso-medio);
  letter-spacing: -0.03em;
  color: var(--inchiostro);
  text-decoration: none;
  white-space: nowrap;
}

.logotipo:hover { color: var(--inchiostro); }

/* Il marchio: il cubo, nella variante scura del logo (quella per i fondi
   chiari). Il file sta in _inc/dati.php, funzione marchio(). */
.logotipo__marchio {
  height: 2rem;
  width: auto;
  flex: none;
  transition: transform var(--transizione);
}

/* Unico movimento decorativo del sito, ridotto al minimo: il marchio si
   ingrandisce appena quando il puntatore passa sul logotipo. Chi ha chiesto
   meno animazioni non lo vede: se ne occupa la regola globale in § 1. */
.logotipo:hover .logotipo__marchio { transform: scale(1.06); }


.navigazione ul {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* `:not(.bottone)` non è un vezzo: senza, `.navigazione a` (0,1,1) batte
   `.bottone--primario` (0,1,0) e il pulsante di chiamata all'azione finisce
   con il testo scuro sul fondo scuro. */
.navigazione a:not(.bottone) {
  display: block;
  padding: var(--s2) var(--s4);
  font-size: var(--testo-0);
  font-weight: var(--peso-normale);
  color: var(--inchiostro-2);
  text-decoration: none;
  border-radius: var(--raggio);
  transition: color var(--transizione), background-color var(--transizione);
}

.navigazione a:not(.bottone):hover { color: var(--inchiostro); background: var(--carta-2); }

.navigazione a:not(.bottone)[aria-current="page"] {
  color: var(--inchiostro);
  font-weight: var(--peso-medio);
  background: var(--carta-2);
}

.navigazione__azione { margin-left: var(--s3); }

/* Interruttore del menu su schermi stretti. */
.menu-interruttore {
  display: none;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  font-size: var(--testo--1);
  font-weight: var(--peso-medio);
  color: var(--inchiostro);
  background: var(--carta-2);
  border-radius: var(--raggio);
  cursor: pointer;
}

.menu-interruttore svg { width: 16px; height: 16px; }

@media (max-width: 940px) {
  .menu-interruttore { display: inline-flex; }

  .navigazione {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: var(--s4) var(--bordo-pagina) var(--s6);
    background: var(--carta);
    border-radius: 0 0 var(--raggio-g) var(--raggio-g);
    box-shadow: var(--ombra);
  }

  .navigazione[data-aperto="true"] { display: block; }

  .navigazione ul { flex-direction: column; align-items: stretch; gap: var(--s1); }

  .navigazione a:not(.bottone) {
    padding: var(--s4);
    font-size: var(--testo-1);
  }

  .navigazione__azione { margin: var(--s5) 0 0; }
  .navigazione__azione .bottone { width: 100%; justify-content: center; }
}


/* ==========================================================================
   7. BOTTONI E LINK
   ========================================================================== */

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--transizione);
}

a:hover { color: var(--accent-scuro); }

/* Il focus deve essere sempre visibile e ad alto contrasto: è ciò che
   permette di usare il sito senza mouse. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.sezione--scura :focus-visible { outline-color: #7fd6ee; }
.sezione--fascia :focus-visible { outline-color: #ffffff; }

/* Il bottone è la superficie più piccola su cui si legge il raggio nuovo:
   generoso, con molto spazio ai lati e un peso medio invece del grassetto. */
.bottone {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.875rem 1.75rem;
  font-size: var(--testo-0);
  font-weight: var(--peso-medio);
  line-height: 1.3;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--raggio-m);
  cursor: pointer;
  transition: background-color var(--transizione), border-color var(--transizione),
              color var(--transizione), transform var(--transizione);
}

.bottone--primario {
  background: var(--inchiostro);
  color: #fff;
}

.bottone--primario:hover { background: var(--marchio); color: #fff; }
.bottone--primario:active { transform: translateY(1px); }

.bottone--secondario {
  background: transparent;
  color: var(--inchiostro);
  border-color: var(--bordo-comando);
}

.bottone--secondario:hover {
  border-color: var(--inchiostro);
  color: var(--inchiostro);
}

/* Sulle fasce in tinta il bottone secondario si appoggia al bianco invece
   che alla tinta: così resta distinguibile dal fondo. */
.sezione--tinta .bottone--secondario:hover { background: var(--carta); }

/* Sulla fascia i bottoni si rovesciano, come sulla scura. Il bordo
   del secondario sta al 60% di bianco e non al 40 come sulla scura: sotto
   quella soglia non arriva a 3:1 sul petrolio e il contorno sparisce. */
.sezione--fascia .bottone--primario { background: #fff; color: var(--inchiostro); }
.sezione--fascia .bottone--primario:hover { background: #e3f1f5; color: var(--inchiostro); }
.sezione--fascia .bottone--secondario { color: #fff; border-color: rgba(255,255,255,0.6); }
.sezione--fascia .bottone--secondario:hover { background: rgba(255,255,255,0.12); color: #fff; }

.sezione--scura .bottone--primario { background: #fff; color: var(--inchiostro); }
.sezione--scura .bottone--primario:hover { background: #e3f1f5; color: var(--inchiostro); }
.sezione--scura .bottone--secondario { color: #fff; border-color: rgba(255,255,255,0.4); }
.sezione--scura .bottone--secondario:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Link con freccia: sostituisce i "Scopri di più" generici. */
.link-freccia {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-weight: var(--peso-medio);
  text-decoration: none;
}

.link-freccia::after {
  content: "";
  width: 1.25rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: width var(--transizione);
}

.link-freccia:hover { text-decoration: underline; }
.link-freccia:hover::after { width: 2rem; }

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s7);
}


/* ==========================================================================
   8. SEZIONI
   ========================================================================== */

/* --- Apertura di pagina --------------------------------------------------- */

/* Sotto l'apertura il ritmo è più corto del ritmo fra sezioni: l'apertura e la
   sezione che segue stanno sullo stesso fondo, quindi i due spazi si sommavano
   in un vuoto doppio invece di leggersi come uno stacco solo. */
.apertura {
  padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem) clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
}

.apertura + .sezione { padding-top: clamp(2.5rem, 1.75rem + 2.5vw, 4rem); }

.apertura h1 { max-width: 18ch; }

.apertura__sommario {
  max-width: 54ch;
  margin-top: var(--s6);
  font-size: var(--testo-2);
  line-height: 1.45;
  color: var(--inchiostro-2);
  font-weight: var(--peso-normale);
  letter-spacing: -0.01em;
}

/* --- Hero della homepage --------------------------------------------------
   Il titolo occupa la pagina: è la tesi, e deve leggersi come un blocco
   compatto di tre righe, non come una frase grande. */

.hero {
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem) clamp(3rem, 2rem + 4vw, 5rem);
}

.hero h1 {
  max-width: 16ch;
  font-size: var(--testo-5);
}

/* 44ch e non 50: la hero è a colonna unica e il sommario non
   ha più una colonna che lo trattenga. A 50ch sporgeva oltre il blocco del
   titolo — che è la tesi della pagina e deve restare il segno più largo. */
.hero__sommario {
  max-width: 44ch;
  margin-top: var(--s6);
  font-size: var(--testo-2);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--inchiostro-2);
}

/* L'occhiello della hero è il claim, e sta sopra un titolo molto più grande
   di quelli di sezione: gli serve un po' più d'aria sotto, altrimenti si
   incolla alla prima riga del titolo. */
.hero .occhiello { margin-bottom: var(--s6); }


/* --- La targa -------------------------------------------------------------
   Chiude l'apertura della home e dice a chi ci si rivolge. È il primo blocco
   di colore che si incontra e prepara il ritmo a fasce del resto della pagina.

   Non porta il marchio: la testata è sticky, quindi il cubo col nome
   accanto è già sullo schermo mentre si legge la targa, e un secondo
   cubo — per giunta più grande — sarebbe una ripetizione. Resta il filo
   petrolio, che qui fa da segno di apertura del pannello. */
.targa {
  display: grid;
  grid-template-columns: 2px minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--s6), 4vw, var(--s7));
  margin-top: var(--s9);
  padding: var(--s7) var(--s8);
  background: var(--carta-3);
  border-radius: var(--raggio-g);
}

/* Il filo è una colonna vera e non un bordo del paragrafo, perché così resta
   alto quanto il pannello e non quanto il testo. */
.targa::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  background: var(--marchio);
  border-radius: 1px;
}

.targa__testo {
  grid-column: 2;
  grid-row: 1;
  max-width: var(--stretto);
  font-size: var(--testo-1);
  line-height: 1.6;
  color: var(--inchiostro-2);
}

.targa__testo strong { color: var(--inchiostro); font-weight: var(--peso-forte); }

@media (max-width: 760px) {
  .targa { gap: var(--s5); padding: var(--s6); }
}


/* ==========================================================================
   9. COMPONENTI
   ========================================================================== */

/* --- Scheda generica ------------------------------------------------------
   Le schede non hanno più il bordo sottile: sono superfici piene con un
   raggio ampio. È il cambiamento che si nota di più a colpo d'occhio. */

.scheda {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s6);
  background: var(--carta-2);
  border-radius: var(--raggio-g);
  transition: transform var(--transizione), box-shadow var(--transizione);
}

.sezione--tinta .scheda { background: var(--carta); }

.scheda h3 { margin-bottom: var(--s4); }

.scheda p { font-size: var(--testo-0); }

.scheda__coda { margin-top: auto; padding-top: var(--s5); }

/* --- Elenco dei problemi --------------------------------------------------
   Frasi in cui il lettore deve riconoscersi. Non più celle separate da
   filetti, ma tre pannelli distinti: la separazione la fa lo spazio. */

.problemi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}

.problema {
  padding: var(--s6);
  background: var(--carta);
  border-radius: var(--raggio-g);
}

.problema h3 {
  font-size: var(--testo-2);
  margin-bottom: var(--s4);
}

.problema p { font-size: var(--testo-0); color: var(--inchiostro-2); }

@media (max-width: 860px) {
  .problemi { grid-template-columns: 1fr; }
  .problema { padding: var(--s6); }
}

/* --- Elenco con nodi ------------------------------------------------------ */

.elenco-nodi { list-style: none; padding: 0; margin: 0; }

.elenco-nodi li {
  position: relative;
  padding-left: var(--s6);
  padding-block: var(--s4);
}

.elenco-nodi li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--marchio);
}

.elenco-nodi li + li { border-top: 1px solid var(--linea); }


.sezione--scura .elenco-nodi li + li { border-top-color: rgba(255,255,255,0.14); }
.sezione--scura .elenco-nodi li::before { background: var(--marchio-chiaro); }

/* --- Riga tecnica --------------------------------------------------------- */

.tecnologie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.tecnologie li {
  padding: var(--s2) var(--s4);
  font-family: var(--font-mono);
  font-size: var(--testo--1);
  color: var(--inchiostro-2);
  background: var(--carta-2);
  border-radius: var(--raggio);
}

.sezione--tinta .tecnologie li { background: var(--carta); }

.sezione--scura .tecnologie li {
  background: rgba(255,255,255,0.08);
  color: #d3e0e4;
}

/* --- Domande frequenti ----------------------------------------------------
   Ogni domanda è un pannello: chiuso resta una riga, aperto si espande.
   Resta un <details> nativo, quindi funziona senza JavaScript. */

.domande { display: grid; gap: var(--s3); }

.domanda {
  background: var(--carta);
  border-radius: var(--raggio-m);
  overflow: hidden;
}

.sezione--tinta .domanda { background: var(--carta); }

.domanda summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s5) var(--s6);
  font-family: var(--font-titolo);
  font-size: var(--testo-2);
  font-weight: var(--peso-medio);
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--inchiostro);
  cursor: pointer;
  list-style: none;
}

.domanda summary::-webkit-details-marker { display: none; }

.domanda summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--accent);
  line-height: 1;
}

.domanda[open] summary::after { content: "–"; }

.domanda__risposta {
  padding: 0 var(--s6) var(--s6);
  max-width: var(--stretto);
}

/* --- Briciole di pane ----------------------------------------------------- */

.briciole {
  padding-block: var(--s5);
  font-size: var(--testo--1);
  color: var(--inchiostro-3);
}

.briciole ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.briciole li + li::before { content: "/"; margin-right: var(--s2); color: var(--linea-2); }

.briciole a { color: var(--inchiostro-3); text-decoration: none; }
.briciole a:hover { color: var(--accent); text-decoration: underline; }

/* --- Richiamo finale ------------------------------------------------------
   Non è più un riquadro dentro una sezione bianca: è la fascia calda che
   chiude ogni pagina. Il colore fa il lavoro che prima faceva il bordo. */

.richiamo { max-width: 46rem; }

.richiamo h2 { max-width: 20ch; }
.richiamo p { max-width: 50ch; margin-top: var(--s5); font-size: var(--testo-1); }

/* --- Coppia di dati / fatti ----------------------------------------------- */

.fatti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s5);
  padding: 0;
  margin: 0;
  list-style: none;
}

.fatto {
  padding: var(--s5);
  background: var(--carta-2);
  border-radius: var(--raggio-m);
}

.sezione--tinta .fatto { background: var(--carta); }

.fatto dt {
  font-family: var(--font-titolo);
  font-size: var(--testo-2);
  font-weight: var(--peso-medio);
  letter-spacing: -0.015em;
  color: var(--inchiostro);
  margin-bottom: var(--s2);
}

.fatto dd { margin: 0; font-size: var(--testo-0); color: var(--inchiostro-2); }

/* --- Il ciclo a fasi, in verticale ----------------------------------------
   Le fasi del ciclo delle visite sono cinque e ognuna ha una frase intera:
   su una riga sola starebbero in colonne da 190px, illeggibili. La variante
   verticale usa a ogni larghezza l'impaginazione che .passaggi adotta solo
   su mobile — la linea di processo scende invece di attraversare — e lascia
   al testo tutta la misura di lettura. */

.passaggi--verticali { grid-template-columns: 1fr; gap: 0; }

.passaggi--verticali .passaggio { padding: 0 0 var(--s7) var(--s7); }

.passaggi--verticali .passaggio::before {
  top: 5px;
  bottom: 0;
  left: 5px;
  right: auto;
  width: 2px;
  height: auto;
}

.passaggi--verticali .passaggio:last-child { padding-bottom: 0; }
.passaggi--verticali .passaggio:last-child::before { bottom: auto; height: 0; }
.passaggi--verticali .passaggio::after { left: 0; top: 0; }
.passaggi--verticali .passaggio p { max-width: var(--stretto); }


/* --- Il nucleo e i moduli --------------------------------------------------
   È il fatto di cui Hubset è fatto: un nucleo comune — procedure, beni,
   depositi, anagrafiche, documenti, registro di chi autorizza — e moduli che
   si innestano e si accendono uno per volta. Il disegno è la linea di processo
   del resto del sito, rivolta all'altro verso: un filo scende dal nucleo,
   corre in orizzontale e arriva a ogni modulo con il suo nodo.

   Non è decorazione: dice quello che il testo dice, e per questo il filo è
   aria-hidden implicito (pseudo-elementi) e il testo resta leggibile senza.
   Il nucleo è l'unica superficie scura dentro una pagina chiara, ed è voluto:
   è ciò che sta sotto tutto il resto. */

.architettura { --stelo: var(--s7); }

.architettura__nucleo {
  position: relative;
  padding: var(--s6) var(--s7);
  background: var(--inchiostro);
  color: #cfdde2;
  border-radius: var(--raggio-g);
}

.architettura__nucleo::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: var(--stelo);
  margin-left: -1px;
  background: var(--linea-2);
}

.architettura__etichetta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--testo--1);
  font-weight: var(--peso-medio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a2b5bc;
}

.architettura__etichetta::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--marchio-chiaro);
}

.architettura__voci {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.architettura__voci li {
  padding: var(--s2) var(--s4);
  font-family: var(--font-titolo);
  font-size: var(--testo-1);
  font-weight: var(--peso-medio);
  letter-spacing: -0.01em;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--raggio);
}

/* `.architettura` davanti: senza, `ul[class]` del reset (0,1,1) azzera il padding. */
.architettura .architettura__moduli {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
  padding: var(--s6) 0 0;
  margin: var(--stelo) 0 0;
  list-style: none;
}

/* Il filo orizzontale va dal centro del primo modulo al centro dell'ultimo:
   con quattro colonne uguali e lo spazio fra l'una e l'altra, il centro della
   prima sta a un ottavo della larghezza meno tre ottavi dello spazio. */
.architettura__moduli::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc((100% - 3 * var(--s5)) / 8);
  right: calc((100% - 3 * var(--s5)) / 8);
  height: 2px;
  background: var(--linea-2);
}

.architettura__modulo {
  position: relative;
  padding: var(--s6);
  background: var(--carta-2);
  border-radius: var(--raggio-g);
}

.sezione--tinta .architettura__modulo { background: var(--carta); }

.architettura__modulo::before {
  content: "";
  position: absolute;
  top: calc(var(--s6) * -1);
  left: 50%;
  width: 2px;
  height: var(--s6);
  margin-left: -1px;
  background: var(--linea-2);
}

.architettura__modulo::after {
  content: "";
  position: absolute;
  top: calc(var(--s6) * -1 - 3px);
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 2px;
  background: var(--marchio);
}

.architettura__modulo h3 { margin-bottom: var(--s3); }
.architettura__modulo p { font-size: var(--testo-0); }

.architettura__stato {
  display: block;
  margin-bottom: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--testo--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inchiostro-3);
}

@media (max-width: 1000px) {
  .architettura__moduli { grid-template-columns: repeat(2, 1fr); row-gap: var(--s6); }
  .architettura__moduli::before { right: calc((100% - var(--s5)) / 4); left: calc((100% - var(--s5)) / 4); }
}

/* Su mobile il filo scende sul lato sinistro e ogni modulo lo raggiunge con un
   tratto orizzontale: stessa idea di .passaggi, altro asse. */
@media (max-width: 700px) {
  .architettura__nucleo { padding: var(--s6); }
  .architettura__nucleo::after { left: var(--s6); margin-left: -1px; }

  .architettura .architettura__moduli {
    grid-template-columns: 1fr;
    padding: 0 0 0 calc(var(--s6) + var(--s5));
    row-gap: var(--s5);
  }

  .architettura__moduli::before {
    top: calc(var(--stelo) * -1);
    bottom: var(--s6);
    left: var(--s6);
    right: auto;
    width: 2px;
    height: auto;
    margin-left: -1px;
  }

  .architettura__modulo::before {
    top: var(--s6);
    left: calc(var(--s5) * -1);
    width: var(--s5);
    height: 2px;
    margin: 0;
  }

  .architettura__modulo::after {
    top: calc(var(--s6) - 2.5px);
    left: calc(var(--s5) * -1 - 3.5px);
    margin: 0;
  }
}

/* --- Banner e pannello di consenso cookie ----------------------------------
   Compaiono solo quando un contenitore di misurazione è configurato: vedi
   hubset_misurazione_attiva() in _inc/misurazione.php. Sopra l'intestazione
   (--z-header), perché il banner deve restare raggiungibile da ogni pagina.

   Scheda staccata dai bordi invece di barra a tutta larghezza: una barra
   piatta legge come chrome della pagina e si ignora; una scheda con raggio e
   ombra legge come qualcosa appena comparso. Un solo ingresso animato (mai
   ripetuto: [hidden] la nasconde per il resto della sessione) per farla
   notare senza essere invasiva. */

.cookie-banner {
  display: flex;
  justify-content: center;
  position: fixed;
  left: var(--s5);
  right: var(--s5);
  bottom: var(--s8);
  z-index: 200;
  animation: cookie-banner-comparsa 420ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { animation: none; }
}

@keyframes cookie-banner-comparsa {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cookie-banner[hidden] { display: none; }

.cookie-banner__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s6);
  width: 100%;
  max-width: 52rem;
  padding: var(--s5) var(--s6);
  background: var(--carta-calda);
  border: 1px solid rgba(128, 118, 40, 0.28);
  border-top: 3px solid var(--accent);
  border-radius: var(--raggio-g);
  box-shadow: 0 2px 4px rgba(11, 42, 53, 0.06), 0 20px 44px rgba(11, 42, 53, 0.18);
}

.cookie-banner__testo {
  flex: 1 1 22rem;
  font-size: var(--testo--1);
  color: var(--inchiostro-2);
}

.cookie-banner__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
}

/* Rifiuta e Accetta devono pesare uguale: stesso ingombro, stesso inchiostro,
   solo pieno contro contornato. Il grigio di .bottone--secondario altrove
   (--bordo-comando) qui sparirebbe accanto al primario e renderebbe le due
   scelte diseguali. */
.cookie-banner .bottone--secondario {
  border-color: var(--inchiostro);
  color: var(--inchiostro);
}

.cookie-banner .bottone--secondario:hover { background: var(--carta); }

/* "Preferenze" è un'uscita di servizio, non una terza scelta alla pari:
   un link, non un bottone, perché la decisione binaria resti leggibile. */
.cookie-banner__preferenze {
  padding: 0;
  font: inherit;
  font-size: var(--testo--1);
  font-weight: var(--peso-medio);
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.cookie-banner__preferenze:hover { color: var(--accent-scuro); }

@media (max-width: 640px) {
  .cookie-banner { left: var(--s3); right: var(--s3); bottom: var(--s5); }

  .cookie-banner__interno { padding: var(--s5); }

  .cookie-banner__azioni { width: 100%; }

  .cookie-banner__azioni .bottone { flex: 1 1 0; justify-content: center; }

  .cookie-banner__preferenze { width: 100%; text-align: center; }
}

.cookie-pannello {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 260;
  padding: var(--s5);
  background: rgba(11, 42, 53, 0.55);
}

.cookie-pannello[hidden] { display: none; }

.cookie-pannello__riquadro {
  position: relative;
  width: 100%;
  max-width: 30rem;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--s7);
  background: var(--carta);
  border-radius: var(--raggio-g);
  box-shadow: var(--ombra);
}

.cookie-pannello__chiudi {
  position: absolute;
  top: var(--s5);
  right: var(--s5);
  padding: var(--s2) var(--s3);
  font-size: var(--testo--1);
  color: var(--inchiostro-3);
  background: none;
  border: none;
  cursor: pointer;
}

.cookie-pannello__chiudi:hover { color: var(--inchiostro); }

.cookie-pannello__categoria {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--s4);
  padding-block: var(--s4);
  border-top: 1px solid var(--linea);
}

.cookie-pannello__etichetta { cursor: pointer; }

.cookie-pannello__nome {
  font-weight: var(--peso-medio);
  color: var(--inchiostro);
}

.cookie-pannello__descrizione {
  margin-top: var(--s1);
  font-size: var(--testo--1);
  color: var(--inchiostro-3);
}

.cookie-pannello__categoria input {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.2rem;
  accent-color: var(--accent);
}

.cookie-pannello__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s6);
}


/* ==========================================================================
   10. FORM
   ========================================================================== */

.modulo { display: grid; gap: var(--s5); }

.campo { display: grid; gap: var(--s2); }

.campo label {
  font-size: var(--testo--1);
  font-weight: var(--peso-medio);
  color: var(--inchiostro);
}

.campo__aiuto { font-size: var(--testo--1); color: var(--inchiostro-3); }

.campo input,
.campo textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: var(--testo-0);
  color: var(--inchiostro);
  background: var(--carta);
  border: 2px solid var(--bordo-comando);
  border-radius: var(--raggio);
  transition: border-color var(--transizione), box-shadow var(--transizione);
}

.campo input:hover,
.campo textarea:hover { border-color: var(--inchiostro-3); }

/* Il contorno di focus resta quello globale (2px): qui si aggiungono soltanto
   il bordo in accento e l'alone. Un `outline: none` vincerebbe per specificità
   sulla regola :where(...) e lascerebbe i campi con un segnale più debole. */
.campo input:focus-visible,
.campo textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tenue);
}

.campo textarea { min-height: 10rem; resize: vertical; }

.campo--errore input,
.campo--errore textarea { border-color: var(--errore); }

.campo__errore {
  font-size: var(--testo--1);
  color: var(--errore);
  font-weight: var(--peso-medio);
}

/* Consenso: la casella deve restare accanto al testo anche a capo. */
.consenso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  align-items: start;
  font-size: var(--testo--1);
  color: var(--inchiostro-2);
}

.consenso input { width: 1.125rem; height: 1.125rem; margin-top: 0.2rem; accent-color: var(--accent); }

/* Honeypot: fuori dallo schermo ma raggiungibile dai bot, nascosto ai lettori
   di schermo con aria-hidden nel markup. */
.trappola {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.avviso {
  padding: var(--s5);
  border-radius: var(--raggio-m);
  font-size: var(--testo-0);
}

.avviso--errore { background: var(--errore-tenue); color: #7a1a14; }
.avviso--successo { background: var(--successo-tenue); color: #14512f; }

.modulo__invio { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }

.modulo[data-invio="in-corso"] .bottone--primario { opacity: 0.65; pointer-events: none; }


/* ==========================================================================
   11. PIÈ DI PAGINA
   ========================================================================== */

.pagina-fondo {
  padding-block: var(--s10) var(--s6);
  background: var(--inchiostro);
  color: #9fb3ba;
  font-size: var(--testo-0);
}

.pagina-fondo a { color: #d3e0e4; text-decoration: none; }
.pagina-fondo a:hover { color: #fff; text-decoration: underline; }

.pagina-fondo__bottone-testo {
  padding: 0;
  font: inherit;
  color: #d3e0e4;
  background: none;
  border: none;
  cursor: pointer;
}

.pagina-fondo__bottone-testo:hover { color: #fff; text-decoration: underline; }

.pagina-fondo h2 {
  font-size: var(--testo--1);
  font-family: var(--font-mono);
  font-weight: var(--peso-medio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fb3ba;
  margin-bottom: var(--s5);
}

.pagina-fondo ul { list-style: none; padding: 0; margin: 0; }
.pagina-fondo li + li { margin-top: var(--s3); }

.pagina-fondo__marchio {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-titolo);
  font-size: 1.5rem;
  font-weight: var(--peso-medio);
  color: #fff;
  letter-spacing: -0.03em;
}

/* In fondo alla pagina il marchio è appena più grande che in testata:
   è l'unico posto in cui può prendersi un po' di spazio. */
.pagina-fondo__segno {
  height: 2.25rem;
  width: auto;
  flex: none;
}

.pagina-fondo__ia { margin-top: var(--s5); }

.pagina-fondo__ia-testo {
  font-size: var(--testo--1);
  color: #9fb3ba;
  margin-bottom: var(--s3);
}

.pagina-fondo__ia-lista {
  display: flex;
  gap: var(--s3);
}

.pagina-fondo__ia-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #9fb3ba;
}

.pagina-fondo__ia-link svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: currentColor;
}

.pagina-fondo__ia-lista a:hover,
.pagina-fondo__ia-lista a:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

/* Fascia scura: l'anello di focus dell'accento non basta al contrasto. */
.pagina-fondo :focus-visible { outline-color: #7fd6ee; }

.pagina-fondo__coda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s9);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: var(--testo--1);
}


/* ==========================================================================
   12. UTILITY
   ========================================================================== */

.solo-lettori-schermo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Colonna che non si allunga fino all'altezza della riga: serve quando in una
   griglia una colonna è molto più alta dell'altra e le schede, alte al 100%,
   si gonfierebbero fino a riempirla. */
.allinea-inizio { align-self: start; }

.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }
.mt-8 { margin-top: var(--s8); }

.testo-secondario { color: var(--inchiostro-3); }
.testo-piccolo { font-size: var(--testo--1); }


/* ==========================================================================
   13. STAMPA
   ========================================================================== */

@media print {
  .intestazione,
  .pagina-fondo,
  .menu-interruttore,
  .azioni,
  .richiamo { display: none !important; }

  body { color: #000; background: #fff; font-size: 11pt; }

  .sezione--tinta,
  .sezione--fascia,
  .sezione--scura { background: #fff !important; color: #000 !important; }

  .sezione--scura h2,
  .sezione--scura h3,
  .sezione--scura strong,
  .sezione--fascia h2,
  .sezione--fascia h3,
  .sezione--fascia strong { color: #000 !important; }

  a { color: #000; text-decoration: underline; }

  /* Chi stampa una pagina perde i link: li rendiamo espliciti. */
  .prosa a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  .sezione { padding-block: 1.5rem; }
}