/* ==========================================================================
   DacDam s.r.l. — foglio di stile del sito istituzionale
   Scritto a mano. Nessun framework, nessun build step, nessuna richiesta di rete.

   Direzione: minimal premium con superfici morbide. La qualità viene dalla
   precisione (griglia, ritmo, tipografia) e da un uso disciplinato del colore:
   le tinte sono superfici, mai testo. Vedi docs/03-DESIGN-SYSTEM.md.

   Revisione grafica: raggio ampio e costante, tipografia geometrica ospitata
   in locale, sezioni a fasce di colore piene, campo tinta per ogni caso.

   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 ------------------------------------------------------------
     L'inchiostro è blu-grigio, mai nero: è ciò che toglie durezza alla
     pagina senza togliere contrasto.
     Rapporti verificati su tutti i fondi (vedi docs/03-DESIGN-SYSTEM.md):
       --inchiostro    su --carta   15,7:1   sulla tinta peggiore  12,4:1
       --inchiostro-2  su --carta    9,5:1                          7,5:1
       --inchiostro-3  su --carta    6,1:1                          4,9:1
       --accent        su --carta    4,8:1   (solo su carta bianca)
       --accent-scuro  su --carta    6,9:1                          5,5:1
  */
  --carta:        #ffffff;
  --carta-2:      #f5f7fa;   /* fascia alternata */
  --carta-3:      #e9eef4;   /* riquadri e schermate */

  --inchiostro:   #1b2430;   /* titoli, testo forte, sezioni scure */
  --inchiostro-2: #3a4757;   /* testo corrente */
  --inchiostro-3: #566372;   /* testo secondario, didascalie */

  --linea:        #e3e8ef;   /* filetti */
  --linea-2:      #c9d2dd;   /* filetti in evidenza (decorativi) */
  --bordo-comando: #6b7686;  /* bordo dei controlli: ≥3:1 su ogni fondo */

  /* #0077bd stava a 4,47:1 su --carta-2: appena sotto AA, quindi i link
     dentro una scheda non passavano. Scurito quel tanto che basta a reggere
     su tutti i fondi chiari; per le tinte c'è --accent-scuro. */
  --accent:       #006fb0;   /* link e nodi sui fondi chiari */
  --accent-scuro: #005e96;   /* stato attivo, e link sulle fasce tinte */
  --accent-tenue: #eaf4fb;   /* alone di focus dei campi */

  /* --- Tinte -------------------------------------------------------------
     Solo superfici: fasce di sezione e campo dei casi. Mai sotto un testo
     piccolo senza aver verificato il contrasto, mai come colore di testo.
     Ogni tinta ha un "segno": il tono con cui si disegna la linea di
     processo sul suo campo, verificato a ≥3:1 sulla tinta. */
  --tinta-azzurro: #dce9f5;  --segno-azzurro: #4f7ea6;
  --tinta-verde:   #dfeade;  --segno-verde:   #55794f;
  --tinta-ambra:   #fbeed7;  --segno-ambra:   #97762a;
  --tinta-viola:   #e5e3f2;  --segno-viola:   #635d94;
  --tinta-rosa:    #f7e3e6;  --segno-rosa:    #a4596a;

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

  /* --- 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(27, 36, 48, 0.04), 0 12px 32px rgba(27, 36, 48, 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(--accent);
}

/* 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. */
.prosa blockquote {
  padding: var(--s5) var(--s6);
  margin-inline: 0;
  background: var(--tinta-ambra);
  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: bianco, grigio chiarissimo,
   una fascia in tinta, di nuovo bianco, la fascia calda dell'invito finale,
   la sezione scura. Le tinte sono piene e a tutta larghezza: è il colore a
   dare il ritmo, non i bordi. */

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

/* Sulle fasce in tinta l'accento scende di un tono: #0077bd sulla tinta
   sta a 3,9:1, sotto la soglia per il testo. --accent-scuro sta a 5,5:1. */
.sezione--azzurra a:not(.bottone),
.sezione--ambra a:not(.bottone) { color: var(--accent-scuro); }

.sezione--azzurra .occhiello::before,
.sezione--ambra .occhiello::before { background: var(--accent-scuro); }

/* Le schede dentro una fascia in tinta tornano bianche: è il contrasto fra
   la tinta e il bianco a farle staccare, senza bisogno di bordi. */
.sezione--azzurra .scheda,
.sezione--ambra .scheda { background: var(--carta); }

/* Inversione. */
.sezione--scura {
  background: var(--inchiostro);
  color: #d5dbe3;
}
.sezione--scura h2,
.sezione--scura h3,
.sezione--scura strong { color: #ffffff; }
.sezione--scura .occhiello { color: #9aa6b4; }
.sezione--scura .occhiello::before { background: var(--tinta-ambra); }
.sezione--scura a { color: #7ec8f2; }
.sezione--scura .sommario { color: #c3cbd6; }
.sezione--scura .testo-secondario { color: #9aa6b4; }

/* 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: #c3cbd6;
}

/* 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(--accent);
}

/* 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(--accent);
}

.sezione--tinta .passaggio::after   { background: var(--carta-2); }
.sezione--azzurra .passaggio::after { background: var(--tinta-azzurro); border-color: var(--accent-scuro); }

.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 dell'azienda — la lampadina col becco — al posto del nodo
   quadrato astratto che teneva il posto prima. 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); }

.logotipo__coda {
  font-family: var(--font);
  font-weight: var(--peso-normale);
  color: var(--inchiostro-3);
  letter-spacing: 0;
  font-size: var(--testo--1);
}

.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--azzurra :focus-visible,
.sezione--ambra :focus-visible { outline-color: var(--accent-scuro); }

.sezione--scura :focus-visible { outline-color: #7ec8f2; }

/* 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: #0e1620; 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--azzurra .bottone--secondario:hover,
.sezione--ambra .bottone--secondario:hover { background: var(--carta); }

.sezione--tinta .bottone--secondario:hover { background: var(--carta); }

.sezione--scura .bottone--primario { background: #fff; color: var(--inchiostro); }
.sezione--scura .bottone--primario:hover { background: #e8edf3; 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);
}

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

/* Riga di qualificazione: dice a chi ci si rivolge. Al posto del filetto
   che l'annunciava, un pannello in tinta — è il primo blocco di colore che
   si incontra e prepara il ritmo a fasce del resto della pagina. */
.hero__destinatari {
  margin-top: var(--s9);
  padding: var(--s7);
  background: var(--tinta-azzurro);
  border-radius: var(--raggio-g);
  font-size: var(--testo-1);
  line-height: 1.6;
  color: var(--inchiostro-2);
}

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


/* ==========================================================================
   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); }

/* --- Scheda caso studio ---------------------------------------------------
   Il titolo è la trasformazione ottenuta, non il nome del prodotto.

   La scheda si apre con un campo in tinta: è lo spazio che su altri siti
   occuperebbe una fotografia, e che qui è occupato da ciò che il sito ha
   davvero — il nome del sistema e la linea di processo. Ogni caso ha la sua
   tinta, così l'elenco si legge anche di sfuggita. */

.caso {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--carta-2);
  border-radius: var(--raggio-g);
  overflow: hidden;
  transition: transform var(--transizione), box-shadow var(--transizione);
}

.caso:hover { transform: translateY(-2px); box-shadow: var(--ombra); }

/* Le quattro tinte dei casi. Ogni tinta porta con sé il tono con cui si
   disegna la linea di processo sul suo campo. */
.caso--azzurro { --campo: var(--tinta-azzurro); --campo-segno: var(--segno-azzurro); }
.caso--verde   { --campo: var(--tinta-verde);   --campo-segno: var(--segno-verde); }
/* Custodia360 non usa l'ambra: il marchio è giallo e sull'ambra sparisce.
   L'ambra resta la tinta esclusiva della fascia di chiusura. */
.caso--rosa    { --campo: var(--tinta-rosa);    --campo-segno: var(--segno-rosa); }
.caso--viola   { --campo: var(--tinta-viola);   --campo-segno: var(--segno-viola); }

/* Il campo porta due cose: il collegamento fra due nodi, disegnato per
   intero, e sotto il nome del sistema. Si legge come un diagramma con la
   sua etichetta — che è esattamente ciò che DacDam consegna.

   I due nodi sono strati di sfondo del campo stesso (due quadrati dipinti
   con un linear-gradient): così bastano i due pseudo-elementi per il gomito
   e non serve altro markup. */
.caso__campo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 10rem;
  padding: 1.75rem;
  background-color: var(--campo, var(--carta-3));
  /* Il nodo di partenza. Quello di arrivo non è più un quadrato: è il
     marchio, posato in fondo alla linea (vedi .caso__segno). */
  background-image:
    linear-gradient(var(--campo-segno, var(--linea-2)), var(--campo-segno, var(--linea-2)));
  background-repeat: no-repeat;
  background-size: 10px 10px;
  background-position: 23px 30px;
}

/* Il marchio come nodo terminale della linea di processo: il percorso parte
   da un nodo qualunque e arriva alla lampadina. È il punto in cui il segno
   dell'azienda dice qualcosa invece di limitarsi a comparire.
   Qui è in tinta unita, nel colore del campo: fa parte del disegno della
   scheda, non è un bollino applicato sopra. */
.caso__segno {
  position: absolute;
  /* Il centro del bulbo cade sulla gamba verticale del gomito: la linea
     non sfiora il marchio, ci arriva. */
  right: 42px;
  bottom: 42px;
  height: 34px;
  width: auto;
}

/* Il gomito che collega i due nodi: attraversa il campo, curva e scende.
   È la linea di processo del resto del sito, con la stessa curvatura dei
   riquadri. Le misure sono ancorate ai quattro lati, così il percorso si
   allarga con la scheda e i nodi restano sempre alle sue estremità. */
.caso__campo::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 34px;
  right: 56px;
  bottom: 68px;
  border-top: 2px solid var(--campo-segno, var(--linea-2));
  border-right: 2px solid var(--campo-segno, var(--linea-2));
  border-top-right-radius: 20px;
}

/* Il nome del sistema, in chiaro sul campo: è l'informazione che prima
   stava in coda alla scheda, portata dove si guarda per prima cosa. */
.caso__marchio {
  position: relative;
  font-family: var(--font-titolo);
  font-size: var(--testo-2);
  font-weight: var(--peso-medio);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--inchiostro);
}

.caso__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s6);
}

.caso__dominio {
  margin-bottom: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--testo--1);
  letter-spacing: 0.04em;
  color: var(--inchiostro-3);
}

.caso__titolo {
  font-size: var(--testo-2);
  line-height: 1.2;
  margin-bottom: var(--s4);
}

.caso__titolo a {
  color: var(--inchiostro);
  text-decoration: none;
}

.caso__titolo a:hover { color: var(--inchiostro); text-decoration: underline; }

/* L'intera scheda è cliccabile, ma il link vero resta uno solo:
   così chi naviga da tastiera incontra un solo elemento attivabile. */
.caso__titolo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

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

.caso__prodotto {
  margin-top: auto;
  padding-top: var(--s5);
  font-size: var(--testo--1);
  color: var(--inchiostro-3);
}

/* Dentro una fascia in tinta la scheda caso torna bianca sotto il campo. */
.sezione--tinta .caso,
.sezione--azzurra .caso,
.sezione--ambra .caso { background: var(--carta); }

/* --- 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(--accent);
}

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

.sezione--azzurra .elenco-nodi li + li { border-top-color: rgba(27, 36, 48, 0.12); }
.sezione--azzurra .elenco-nodi li::before { background: var(--accent-scuro); }

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

/* --- Riquadro "dentro il software" ---------------------------------------- */

.schermata {
  margin: 0;
  border-radius: var(--raggio-g);
  overflow: hidden;
  background: var(--carta-3);
}

.schermata img { width: 100%; }

.schermata figcaption {
  padding: var(--s4) var(--s5);
  background: var(--carta-2);
  font-size: var(--testo--1);
  color: var(--inchiostro-3);
}

/* Segnaposto usato finché non ci sono schermate reali autorizzate. */
.schermata--assente {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: var(--s7);
  border: 2px dashed var(--linea-2);
  text-align: center;
  color: var(--inchiostro-3);
  font-size: var(--testo--1);
}

/* --- 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: #d5dbe3;
}

/* --- 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); }

/* --- Profilo di una persona -----------------------------------------------
   L'unica fotografia del sito, e per mandato deve restarlo: il budget delle
   immagini è 80% nessuna fotografia, 10% persone, 10% interfacce.

   Il ritratto è scontornato: appoggia sul bordo inferiore del pannello e
   sborda in alto. È l'unico modo di far fruttare una trasparenza — altrimenti
   tanto varrebbe un riquadro bianco su fondo colorato. Il taglio netto del
   busto coincide con il bordo del pannello, così sembra voluto invece che
   subito. */

.profilo {
  position: relative;
  margin-top: 5.5rem;       /* spazio per la testa che esce dal pannello */
  padding: var(--s8);
  padding-right: 23rem;     /* colonna riservata alla figura */
  background: var(--tinta-azzurro);
  border-radius: var(--raggio-g);
}

/* Sulla tinta l'accento scende di un tono, come sulle fasce: #006fb0 qui
   starebbe a 4,3:1. */
.profilo a { color: var(--accent-scuro); }
.profilo :focus-visible { outline-color: var(--accent-scuro); }

.profilo__ruolo {
  margin-bottom: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--testo--1);
  letter-spacing: 0.04em;
  color: var(--inchiostro-3);
}

.profilo__nome {
  font-size: var(--testo-3);
  margin-bottom: var(--s5);
}

.profilo__testo p { max-width: 46ch; }

.profilo__contatti {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid rgba(27, 36, 48, 0.14);
  list-style: none;
  padding-left: 0;
}

/* `bottom: 0` cade sul bordo del pannello, non sul suo padding: il blocco
   contenitore di un elemento assoluto è la padding box dell'antenato
   posizionato. È esattamente ciò che serve. */
.profilo__ritratto {
  position: absolute;
  right: 3rem;
  bottom: 0;
  width: 19rem;
  height: auto;
}

@media (max-width: 860px) {
  /* Su schermi stretti la figura non sborda più: scende sotto il testo e
     resta appoggiata al bordo inferiore, che è l'unica cosa da conservare. */
  .profilo {
    margin-top: 0;
    padding: var(--s6) var(--s6) 0;
  }

  .profilo__ritratto {
    position: static;
    display: block;
    width: min(14rem, 60%);
    margin: var(--s7) auto 0;
  }
}


/* ==========================================================================
   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: #9aa6b4;
  font-size: var(--testo-0);
}

.pagina-fondo a { color: #d5dbe3; text-decoration: none; }
.pagina-fondo a: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: #9aa6b4;
  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__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,
  .caso__campo,
  .richiamo { display: none !important; }

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

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

  .sezione--scura h2,
  .sezione--scura h3,
  .sezione--scura 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; }
}