/* ==========================================================================
   VIVG — 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: VIVG è un prodotto DacDam e i due
   siti devono leggersi come la stessa mano. Token, scala tipografica, raggi,
   griglia e linguaggio grafico sono gli stessi; cambiano i componenti, perché
   qui si racconta un prodotto e non una società.

   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/02-DESIGN.md.

   Differenze rispetto a dacdam.com, tutte in § 9:
     - via le schede caso studio, il riquadro schermate e il profilo persona;
     - in più .istituto (gli IVG che usano VIVG) e .piano (il listino);
     - .passaggi ha una variante verticale per il ciclo a cinque fasi.

   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 ------------------------------------------------------------
     Tutta la tavolozza esce dal marchio. assets/img/vivg.png è disegnato con
     la palette Tango — il tetto è Scarlet Red, la finestra Sky Blue 2, la
     porta Aluminium 4, corrispondenze esatte — quindi i neutri sono gli
     Aluminium, l'azzurro interattivo è lo Sky Blue e il rosso è lo Scarlet.

     I neutri sono grigi veri, non virati al blu come su dacdam.com: qui il
     blu è riservato a ciò che si può toccare, e non deve avere un'eco nelle
     superfici. È anche ciò che permette agli stemmi degli istituti — sigilli
     circolari blu — di non entrare in gara con il fondo su cui stanno.

     Rapporti verificati sul reso (vedi docs/02-DESIGN.md § 2):
       --inchiostro    su --carta 13,35:1  su --carta-2 12,20:1  su --carta-3 10,84:1
       --inchiostro-2  su --carta  8,34:1  su --carta-2  7,63:1  su --carta-3  6,78:1
       --inchiostro-3  su --carta  6,32:1  su --carta-2  5,78:1  su --carta-3  5,13:1
       --accent        su --carta  6,53:1  su --carta-2  5,97:1  su --carta-3  5,31:1
       --accent-scuro  su --carta  8,78:1  su --carta-2  8,03:1  su --carta-3  7,14:1
  */
  --carta:        #ffffff;
  --carta-2:      #f4f5f3;   /* fascia alternata */
  --carta-3:      #e7e8e4;   /* pannelli: la targa, le note */

  --inchiostro:   #2b3033;   /* titoli, testo forte, fascia scura */
  --inchiostro-2: #4a4f4d;   /* testo corrente */
  --inchiostro-3: #5c615d;   /* testo secondario, didascalie */

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

  /* L'azzurro è la finestra della casetta: Sky Blue della palette Tango.
     Sky Blue 2 (#3465a4) tale e quale starebbe a 5,6:1 su bianco, scurito
     di poco per avere margine anche su --carta-3; --accent-scuro è Sky
     Blue 3, quello sì preso tale e quale. */
  --accent:       #2f5e9e;   /* link, bottoni, controlli */
  --accent-scuro: #204a87;   /* stato attivo */
  --accent-tenue: #e9eef6;   /* alone di focus dei campi */

  /* Le tinte pallide di dacdam.com — azzurro, verde, ambra, viola, rosa —
     qui non ci sono più. 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. Vivono
     ancora in dacdam.css, dove servono a distinguere i casi studio.

     --- Il rosso del marchio ------------------------------------------------
     Scarlet Red 3 e Scarlet Red 1 della palette Tango, cioè la falda in
     ombra e quella illuminata del tetto in assets/img/vivg.png. Il logo è
     disegnato in Tango: tetto Scarlet Red, finestra Sky Blue, porta
     Aluminium. Da lì viene tutta la tavolozza di questo foglio.

     Il rosso fa due mestieri, e nessuno dei due è «essere un accento»:
       - la **punteggiatura grafica** — il nodo che apre un occhiello, il
         nodo del filetto, i nodi di .elenco-nodi e della linea di processo,
         il segno di posizione della scala delle fasce, i fili di .insegna
         e .targa;
       - la **fascia del richiamo finale**, unica superficie satura del sito.
     Non è mai colore di testo corrente e non è mai dentro un comando: ciò
     che si può toccare è azzurro, e resta azzurro.

     I segni non testuali chiedono 3:1:
       --rosso-marchio  su --carta 8,14:1 · --carta-2 7,45:1 · --carta-3 6,62:1
     Sull'inchiostro non regge (1,63:1): lì si usa --rosso-marchio-chiaro,
     che sta a 3,19:1 — sopra soglia ma con poco margine, quindi se
     l'inchiostro si schiarisce va ricontrollato.

     Da non confondere con --errore: ora che il rosso è il colore del
     marchio i due sono vicini, ed è il motivo per cui lo stato di errore
     nel modulo non si affida al solo colore, ma ha bordo e messaggio. */
  --rosso-marchio:        #a40000;
  --rosso-marchio-chiaro: #ef2929;

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

  /* La fascia del richiamo finale: Scarlet Red 3 pieno, a tutta larghezza.
     È l'unico colore saturo del sito e cade sulla chiamata all'azione.
     Bianco sopra sta a 8,14:1, il corpo smorzato a 6,38:1. */
  --scarlatto:       #a40000;
  --scarlatto-testo: #f7dedd;

  /* --- 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(--rosso-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 rossi 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 rosso lo stesso
   vuoto diventa un blocco di colore che schiaccia il testo, tanto più che
   il richiamo occupa solo la colonna di sinistra. */
.sezione--scarlatta {
  padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 5.5rem);
  background: var(--scarlatto);
  color: var(--scarlatto-testo);
}
.sezione--scarlatta h2,
.sezione--scarlatta h3,
.sezione--scarlatta strong { color: #ffffff; }
.sezione--scarlatta a:not(.bottone) { color: #ffffff; }
.sezione--scarlatta .occhiello { color: var(--scarlatto-testo); }
.sezione--scarlatta .occhiello::before { background: #ffffff; }

/* Inversione. */
.sezione--scura {
  background: var(--inchiostro);
  color: #d6d8d4;
}
.sezione--scura h2,
.sezione--scura h3,
.sezione--scura strong { color: #ffffff; }
.sezione--scura .occhiello { color: #a0a39e; }
.sezione--scura .occhiello::before { background: var(--rosso-marchio-chiaro); }
.sezione--scura a { color: #9dbde3; }
.sezione--scura .sommario { color: #c6c9c4; }
.sezione--scura .testo-secondario { color: #a0a39e; }

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


.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: #9dbde3; }
.sezione--scarlatta :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: #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--tinta .bottone--secondario:hover { background: var(--carta); }

/* Sulla fascia scarlatta 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 rosso e il contorno sparisce. */
.sezione--scarlatta .bottone--primario { background: #fff; color: var(--inchiostro); }
.sezione--scarlatta .bottone--primario:hover { background: #f0e6e5; color: var(--inchiostro); }
.sezione--scarlatta .bottone--secondario { color: #fff; border-color: rgba(255,255,255,0.6); }
.sezione--scarlatta .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: #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);
}

/* --- L'insegna ------------------------------------------------------------
   Il logotipo per esteso — simbolo, nome e claim — nella colonna che il
   titolo lascia vuota. Il titolo è largo al massimo 16ch, quindi su schermi
   larghi metà della hero era carta bianca: l'insegna occupa quello spazio e
   non ne toglie al contenuto. È il compromesso fra il volere il marchio in
   evidenza e il non volergli dare la parola prima della tesi della pagina.

   Il nome è composto in Outfit, non è l'immagine del logotipo originale: è
   lo stesso trattamento della testata e del piè di pagina, e a questa misura
   è l'unico che regga accanto a un titolo tipografico (l'originale è una
   bitmap larga 800px e a fianco dell'Outfit si vedrebbe per quello che è).
   Vedi docs/02-DESIGN.md § 3.

   Sta a destra e non sopra il titolo perché sopra finirebbe incolonnata con
   il marchio della testata, a 120px di distanza: due case sullo stesso asse. */
.insegna {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s4) var(--s5);
  justify-self: end;
  max-width: 22rem;
}

.insegna__marchio {
  grid-column: 1;
  height: 4.5rem;   /* 72px, più del doppio della testata: si legge come esposto */
  width: auto;
}

.insegna__nome {
  grid-column: 2;
  font-family: var(--font-titolo);
  font-size: 3.25rem;
  font-weight: var(--peso-medio);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--inchiostro);
}

/* Il filo rosso separa il logotipo dal claim: è il rosso della falda del
   tetto, ed è qui e nella targa che si vede a misura leggibile invece che
   a 7px di nodo. */
.insegna__claim {
  grid-column: 1 / -1;
  padding-top: var(--s4);
  border-top: 2px solid var(--rosso-marchio);
  font-size: var(--testo-0);
  line-height: 1.45;
  color: var(--inchiostro-3);
}

/* L'insegna prende soltanto la larghezza che le serve e il testo si tiene
   tutto il resto: con una divisione a frazioni fisse (7/5) il titolo passava
   da tre righe a quattro, ed è esattamente il contrario di dare la priorità
   ai contenuti. Allineate in alto, così l'insegna parte dalla stessa riga
   del titolo e non galleggia a mezz'aria. */
.hero__interno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s8);
  align-items: start;
}

/* Sotto i 940px l'insegna scende sotto i bottoni invece di stringersi in una
   colonna in cui il nome andrebbe a capo. Rimpicciolisce e va a sinistra:
   in una colonna sola non c'è un margine destro da presidiare. */
@media (max-width: 940px) {
  .hero__interno { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }

  .insegna { justify-self: start; margin-top: var(--s5); }
  .insegna__marchio { height: 3.5rem; }
  .insegna__nome { font-size: 2.5rem; }
}


/* --- 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: lo porta l'insegna, poche righe sopra, e due casette
   nella stessa schermata farebbero della seconda una ripetizione — per giunta
   più grande della prima, che è l'esatto contrario della gerarchia voluta.
   Resta il filo rosso, 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(--rosso-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(--rosso-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(--rosso-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: #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); }

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


/* --- Gli istituti che usano VIVG ------------------------------------------
   È l'unico punto del sito in cui si nominano dei clienti, e la scelta di
   come mostrarli è dettata dai file: gli stemmi sono sigilli di terzi, di
   qualità diseguale, e due istituti usano lo stesso emblema generico.
   Un muro di loghi ne farebbe l'elemento portante e la disparità si
   vedrebbe tutta. Il nome resta quindi l'elemento principale e lo stemma
   lo accompagna piccolo: a 48px le differenze di risoluzione non si
   leggono più e il blocco resta una griglia regolare. */

.istituti {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  padding: 0;
  margin: 0;
  list-style: none;
}

.istituto {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s5) var(--s6);
  background: var(--carta-2);
  border-radius: var(--raggio-g);
  font-family: var(--font-titolo);
  font-size: var(--testo-1);
  font-weight: var(--peso-medio);
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--inchiostro);
}

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

.istituto__stemma {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .istituti { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .istituti { grid-template-columns: 1fr; }
}


/* --- Il listino -----------------------------------------------------------
   Quattro fasce di volume, nessuna messa in evidenza sulle altre: non c'è
   un piano «consigliato» perché la fascia non si sceglie, la determina il
   numero di visite dell'istituto. L'importo è il solo elemento in scala
   grande: è il dato che si viene a cercare. */

.piani {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
  padding: 0;
  margin: 0;
  list-style: none;
}

.piano {
  display: flex;
  flex-direction: column;
  padding: var(--s6);
  background: var(--carta-2);
  border-radius: var(--raggio-g);
}

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

.piano__nome {
  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);
}

.piano__canone {
  font-family: var(--font-titolo);
  font-size: var(--testo-3);
  font-weight: var(--peso-medio);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--inchiostro);
}

.piano__periodo {
  display: block;
  margin-top: var(--s2);
  font-family: var(--font);
  font-size: var(--testo--1);
  font-weight: var(--peso-normale);
  letter-spacing: 0;
  color: var(--inchiostro-3);
}

/* Il piede della scheda sta in fondo anche quando il testo del limite è più
   corto che nelle altre: così le quattro scale restano incolonnate e la riga
   si legge come una scala sola. */
.piano__fascia {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--linea);
}

.piano__limite {
  margin-top: var(--s4);
  font-size: var(--testo-0);
  color: var(--inchiostro-2);
}

/* --- La scala delle fasce -------------------------------------------------
   Ogni scheda porta l'intera scala a quattro posizioni e segna la propria:
   scorrendo la riga il segno cammina da sinistra a destra, ed è così che
   quattro schede affiancate si leggono come una scala e non come quattro
   listini separati.

   È la lingua della linea di processo — nodi su un filo — riusata qui: il
   filo è lo stesso --linea-2, il nodo pieno è il quadrato di 7px, quello
   della posizione corrente è l'anello di 12px di .passaggio::after.

   La posizione è un rango, non un volume. I tetti delle fasce (5.000,
   30.000, 50.000) non sono equidistanti, e una barra proporzionale a quelli
   ridurrebbe la Small a un moncone accanto a un prezzo che è solo un terzo
   dell'ultimo: suggerirebbe un giudizio di valore che non c'è. Non esiste
   una fascia consigliata perché la fascia non si sceglie. */
.piano__scala {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Lo spazio a destra della scala è la metà del nodo più grande: senza,
     l'anello dell'ultima posizione sborderebbe dalla scheda. */
  width: 100%;
  max-width: 11rem;
  height: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Il filo che unisce le posizioni. Si ferma al centro dei nodi estremi,
   così non sporge oltre la scala. */
.piano__scala::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  right: 6px;
  height: 2px;
  margin-top: -1px;
  background: var(--linea-2);
}

/* Tutte le posizioni occupano la stessa scatola di 12px — la misura del nodo
   più grande — e il quadrato di 7px sta dentro con uno scarto di 2,5px. Senza
   questo i centri non sarebbero equidistanti, perché l'anello è più largo dei
   punti, e la scala si leggerebbe storta. */
.piano__grado {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.piano__grado::before {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 2px;
  background: var(--linea-2);
}

.piano__grado--qui {
  background: var(--carta-2);
  border: 2px solid var(--rosso-marchio);
}

.piano__grado--qui::before { display: none; }

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

@media (max-width: 1000px) {
  .piani { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .piani { grid-template-columns: 1fr; }
}


/* ==========================================================================
   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,
  .richiamo { display: none !important; }

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

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

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