/* ============================================================================
   IL CALIBRO — Protocollo D'Ambrosio
   Sistema visivo. Si scrive prima per il telefono: le media query allargano.
   Un solo accento, l'ottone. Verde e mattone servono SOLO alle soglie dell'IOP.
   ========================================================================= */

:root{
  /* --- colori di sistema ------------------------------------------------ */
  --inchiostro:#14181F;
  --inchiostro-tenue:#3A424E;
  --carta:#FBF9F5;
  --sabbia:#F3EFE6;          /* fondo dei richiami */
  --linea:#DED7CA;
  --ottone:#A9822F;          /* filetti, timbri, testo GRANDE, marchio */
  --ottone-scuro:#8A6A22;    /* testo piccolo su carta: 4,8:1, passa AA */
  --ottone-chiaro:#F2E7CE;
  --verde:#3C6152;           /* soglia "referto pulito" */
  --mattone:#8E3A28;         /* soglia "illeggibile" */

  /* --- misure ----------------------------------------------------------- */
  --misura:38rem;            /* colonna di testo: mai piu' larga */
  --griglia:90rem;           /* 1440px: la griglia non cresce oltre */
  --grondaia:1.5rem;         /* spazio fra le colonne */
  --righello:3.25rem;        /* corsia dell'asta graduata a sinistra */
  --largo:64rem;             /* testata, pie' di pagina, blocchi ampi */
  --margine:1.35rem;

  /* --- tipografia ------------------------------------------------------- */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--carta);
  color:var(--inchiostro);
  font-family:var(--serif);
  font-size:1.05rem;
  line-height:1.6;
  text-rendering:optimizeLegibility;
}
/* Cap. 5: cifre tabellari ovunque compaia un numero. E' il dettaglio che fa
   sembrare seria una pagina di numeri: le colonne di cifre si incolonnano. */
.timbro,.timbro-cifra,.numero-sezione,.archivio .d,.archivio .p,.contatore-cifra,
table,td,th,.tessera .numero,.voci-iop .voce-testo::before,.soglie .fascia,
time,data,output{font-variant-numeric:tabular-nums}

/* Movimento: solo transizioni di colore, 150 ms. Nessuna animazione d'ingresso. */
a{color:inherit;transition:color .15s ease,background-color .15s ease,border-color .15s ease}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--ottone);outline-offset:2px}

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

/* ============================================================================
   1. IMPAGINAZIONE
   ========================================================================= */

.colonna{max-width:var(--misura);margin:0 auto;padding-left:var(--margine);padding-right:var(--margine)}
.colonna--largo{max-width:var(--largo)}

.sezione{padding:3rem 0}
.sezione--sabbia{background:var(--sabbia);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.sezione--scura{background:var(--inchiostro);color:var(--carta)}
.sezione--scura a{color:var(--ottone-chiaro)}
.sezione--scura a:hover{color:#fff}

@media (min-width:48em){ .sezione{padding:4.5rem 0} }

/* ============================================================================
   2. TIPOGRAFIA
   ========================================================================= */

h1,h2,h3{font-weight:600;letter-spacing:-.015em}
/* Cap. 5: scala fluida. Il titolo di pagina non scende sotto i 34px sul telefono
   e non supera i 62px su desktop; l'apertura della home arriva a 96px. */
h1{font-family:var(--serif);font-size:clamp(2.125rem,1.35rem + 3.4vw,3.875rem);
  line-height:1.06;margin:0 0 1.2rem}
h2{font-family:var(--serif);font-size:clamp(1.45rem,1.15rem + 1.3vw,2.05rem);
  line-height:1.18;margin:2.8rem 0 .9rem}
h3{font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:0;margin:2rem 0 .5rem}
p{margin:0 0 1.15rem}
ul,ol{padding-left:1.25rem;margin:0 0 1.15rem}
li{margin-bottom:.5rem}
hr{border:none;border-top:1px solid var(--linea);margin:2.6rem 0}
strong{font-weight:600}
small{font-size:.82rem}

@media (min-width:48em){
  body{font-size:1.075rem}
}

/* ============================================================================
   3. COMPONENTI — costruiti una volta, riusati ovunque
   ========================================================================= */

/* 3.1 Occhiello: etichetta di sezione, maiuscoletto spaziato, ottone scuro. */
.occhiello{
  font-family:var(--sans);font-size:.6875rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ottone-scuro);margin:0 0 .9rem}
.sezione--scura .occhiello{color:var(--ottone)}

/* 3.2 Blocco scena: il racconto in corsivo, con il filetto d'ottone. */
.scena{
  font-style:italic;color:var(--inchiostro-tenue);
  border-left:2px solid var(--ottone);padding-left:1.2rem;margin:1.6rem 0}
.sezione--scura .scena{color:#CFC8B8}

/* 3.3 Citazione grande: una frase che deve pesare. */
.citazione{
  font-family:var(--serif);font-size:1.5rem;line-height:1.32;font-weight:600;
  letter-spacing:-.015em;margin:2rem 0;padding:0}
.citazione cite{display:block;font-family:var(--sans);font-size:.78rem;font-style:normal;
  letter-spacing:.1em;text-transform:uppercase;color:var(--inchiostro-tenue);margin-top:.9rem}
blockquote{margin:1.8rem 0;padding-left:1.2rem;border-left:2px solid var(--ottone);
  font-style:italic;color:var(--inchiostro-tenue)}
blockquote p:last-child{margin-bottom:0}
@media (min-width:48em){ .citazione{font-size:1.9rem} }

/* 3.4 Tessera numerata: uno stadio, una voce, un passaggio. */
.tessere{list-style:none;padding:0;margin:1.8rem 0;display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
.tessera{background:var(--carta);padding:1.3rem 1.2rem;margin:0}
.tessera .numero{
  display:block;font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.18em;color:var(--ottone-scuro);margin-bottom:.45rem}
.tessera h3{margin:0 0 .35rem;font-family:var(--serif);font-size:1.2rem;font-weight:600;letter-spacing:-.015em}
.tessera p{margin:0;font-size:.98rem;color:var(--inchiostro-tenue)}
@media (min-width:48em){
  .tessere{grid-template-columns:repeat(2,1fr)}
  /* con un numero dispari di tessere l'ultima occupa la riga intera:
     altrimenti resta una cella vuota che sembra un errore di impaginazione */
  .tessere .tessera:last-child:nth-child(odd){grid-column:1 / -1}
}

/* 3.5 Timbro IOP: il punteggio, con il colore della soglia. */
.timbro{
  display:inline-block;border:1.5px solid var(--ottone);color:var(--ottone-scuro);
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.4rem .8rem;margin:0 0 1.6rem;background:transparent}
.timbro--pulito{border-color:var(--verde);color:var(--verde)}
.timbro--illeggibile{border-color:var(--mattone);color:var(--mattone)}

/* 3.6 Riga di archivio: una riga, un Referto. */
.archivio{list-style:none;padding:0;margin:1.8rem 0 0}
.archivio li{margin:0;border-top:1px solid var(--linea)}
.archivio li:last-child{border-bottom:1px solid var(--linea)}
.archivio a{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline;
  padding:1rem 0;text-decoration:none}
.archivio a:hover .t,.archivio a:focus-visible .t{color:var(--ottone-scuro)}
.archivio .d{font-family:var(--sans);font-size:.74rem;color:var(--inchiostro-tenue);min-width:5.5rem}
.archivio .t{flex:1 1 100%;font-size:1.08rem;line-height:1.35}
.archivio .p{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ottone-scuro);
  border:1.5px solid var(--ottone);padding:.2rem .55rem;white-space:nowrap}
@media (min-width:48em){ .archivio .t{flex:1 1 auto;order:0} .archivio .p{order:1} }

/* 3.7 Richiamo su fondo sabbia. */
.richiamo{background:var(--sabbia);border:1px solid var(--linea);padding:1.3rem 1.4rem;margin:2rem 0}
.richiamo> :last-child{margin-bottom:0}
.richiamo .occhiello{margin-bottom:.5rem}

/* 3.8 Chiamata all'azione scura, a tutta larghezza. */
.azione{text-align:left}
.azione .frase{font-family:var(--serif);font-size:1.7rem;line-height:1.2;font-weight:600;
  letter-spacing:-.02em;margin:0 0 1.4rem}
@media (min-width:48em){ .azione .frase{font-size:2.3rem} }

.pulsante{
  display:inline-block;background:var(--inchiostro);color:var(--carta);text-decoration:none;
  font-family:var(--sans);font-size:.88rem;font-weight:600;letter-spacing:.01em;
  padding:.9rem 1.7rem;border:1.5px solid var(--inchiostro)}
.pulsante:hover,.pulsante:focus-visible{background:var(--ottone-scuro);border-color:var(--ottone-scuro);color:#fff}
.sezione--scura .pulsante{background:var(--ottone);border-color:var(--ottone);color:var(--inchiostro)}
.sezione--scura .pulsante:hover,.sezione--scura .pulsante:focus-visible{background:var(--carta);border-color:var(--carta);color:var(--inchiostro)}
.pulsante--vuoto{background:transparent;color:var(--inchiostro);border-color:var(--inchiostro)}
.pulsante--vuoto:hover{background:var(--inchiostro);color:var(--carta)}

/* 3.9 Tabella. */
table{width:100%;border-collapse:collapse;margin:1.8rem 0;font-size:.95rem}
th,td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--linea);vertical-align:top}
th{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--inchiostro-tenue)}

/* 3.10 Segnaposto: materiale che manca. Deve dare fastidio, non mimetizzarsi. */
.segnaposto{
  display:block;border:2px dashed var(--mattone);color:var(--mattone);background:#fff;
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:1.4rem 1.2rem;margin:1.6rem 0;text-align:center;line-height:1.5}

/* 3.11 Figure e infografiche. */
figure{margin:2rem 0}
figure img{display:block;width:100%;border:1px solid var(--linea)}
figcaption{font-family:var(--sans);font-size:.78rem;line-height:1.5;color:var(--inchiostro-tenue);margin-top:.7rem}
.figura--larga{margin-left:calc(var(--margine) * -1);margin-right:calc(var(--margine) * -1)}
@media (min-width:48em){ .figura--larga{margin-left:0;margin-right:0} }
/* Su schermo largo l'infografica esce dalla colonna: dentro 38rem i suoi numeri
   diventano illeggibili, ed e' proprio il numero la dimostrazione. */
@media (min-width:64em){
  .figura--larga{width:52rem;max-width:calc(100vw - 3rem);margin-left:50%;transform:translateX(-50%)}
}
/* Sul telefono un'infografica larga, se rimpicciolita, smette di essere leggibile:
   meglio tenerle la misura minima e lasciarla scorrere di lato. */
@media (max-width:47.99em){
  .scorri,.scorri-larga{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .scorri img{min-width:32rem}
  .scorri-larga img{min-width:46rem}
  .scorri figcaption,.scorri-larga figcaption{position:sticky;left:0}
}

/* ============================================================================
   4. LOGOTIPO — si compone tipograficamente, non e' un file
   ========================================================================= */

.logotipo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.logotipo .simbolo{flex:0 0 auto;width:1.9rem;height:1.9rem;color:currentColor}
.logotipo .nome{display:block;font-family:var(--sans);font-weight:700;font-size:.92rem;
  letter-spacing:.18em;line-height:1.1;text-transform:uppercase}
/* Il sottotitolo e' passato da "PROTOCOLLO D'AMBROSIO" a "PROTOCOLLO D'AMBROSIO
   PER L'AUTOMOTIVE": quasi il doppio. Al 40% del marchio sarebbero 5,9px, sotto
   la soglia di leggibilita'. Si alza il corpo e si stringe la spaziatura. */
.logotipo .sotto{display:block;font-family:var(--sans);font-weight:600;font-size:.46rem;
  letter-spacing:.15em;line-height:1.35;text-transform:uppercase;color:var(--ottone-scuro);margin-top:.28rem}
@media (min-width:48em){ .logotipo .sotto{font-size:.5rem;letter-spacing:.16em} }
.sezione--scura .logotipo .sotto,.apertura .logotipo .sotto{color:var(--ottone)}

/* ============================================================================
   5. TESTATA E MENU
   Su telefono: quattro voci in riga scorrevole. Mai un hamburger.
   ========================================================================= */

.salta{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;background:var(--inchiostro);color:var(--carta);
  padding:.7rem 1rem;font-family:var(--sans);font-size:.85rem;z-index:10}
.salta:focus{position:fixed;left:0;top:0;width:auto;height:auto;clip-path:none}

.testata{border-bottom:1px solid var(--linea);background:var(--carta)}
.testata .dentro{max-width:var(--largo);margin:0 auto;padding:1rem var(--margine) 0;
  display:flex;flex-direction:column;gap:.9rem}
.testata nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.testata nav::-webkit-scrollbar{display:none}
.testata nav ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0 0 .8rem;white-space:nowrap}
.testata nav a{font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:.01em;
  color:var(--inchiostro-tenue);text-decoration:none;padding-bottom:.2rem;border-bottom:2px solid transparent}
.testata nav a:hover{color:var(--inchiostro)}
.testata nav a[aria-current="page"]{color:var(--inchiostro);border-bottom-color:var(--ottone)}

@media (min-width:48em){
  .testata .dentro{flex-direction:row;align-items:center;justify-content:space-between;gap:2rem;padding-bottom:0}
  .testata nav ul{padding-bottom:0;gap:1.6rem}
}

/* ============================================================================
   6. APERTURA A TUTTO SCHERMO — solo la home
   ========================================================================= */

.apertura{
  background:var(--inchiostro);color:var(--carta);
  min-height:calc(100svh - 6.5rem);
  display:flex;align-items:center;
  padding:3.5rem 0}
.apertura .simbolo-grande{width:3.4rem;height:3.4rem;color:var(--carta);display:block;margin-bottom:1.6rem}
.apertura h1{font-family:var(--sans);font-weight:700;
  font-size:clamp(2.5rem,1.4rem + 5vw,6rem);letter-spacing:.14em;
  line-height:1.02;text-transform:uppercase;margin:0}
.apertura .protocollo{font-family:var(--sans);font-weight:600;font-size:.92rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ottone);margin:.8rem 0 0}
.apertura .motto{font-family:var(--serif);font-size:1.55rem;line-height:1.25;font-weight:600;
  letter-spacing:-.015em;margin:2.2rem 0 0;padding-top:2.2rem;border-top:1px solid #2C333D;max-width:22ch}
/* il logotipo d'apertura non deve andare a capo: e' un marchio, non un titolo */
.apertura h1{white-space:nowrap}
@media (max-width:47.99em){ .apertura h1{white-space:normal} }
.apertura .spiega{font-family:var(--sans);font-size:1rem;line-height:1.55;color:#CFC8B8;
  margin:1.1rem 0 0;max-width:48ch}
.apertura .sotto-azione{margin:2.4rem 0 0}

@media (min-width:48em){
  .apertura h1{letter-spacing:.16em}
  .apertura .protocollo{font-size:1.05rem}
  .apertura .motto{font-size:clamp(1.7rem,1.1rem + 1.9vw,2.45rem)}
  .apertura .spiega{font-size:1.1rem}
  .apertura .simbolo-grande{width:4.2rem;height:4.2rem}
}

/* ============================================================================
   7. PIE' DI PAGINA
   ========================================================================= */

footer{border-top:1px solid var(--linea);background:var(--carta)}
footer .dentro{max-width:var(--largo);margin:0 auto;padding:2.5rem var(--margine) 3rem}
footer nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;margin:0 0 1.8rem;padding:0}
footer nav a{font-family:var(--sans);font-size:.82rem;font-weight:500;color:var(--inchiostro-tenue);text-decoration:none}
footer nav a:hover{color:var(--ottone-scuro)}
.firma{font-family:var(--sans);font-size:.86rem;font-weight:600;margin:0 0 .7rem}
.minuto{font-family:var(--sans);font-size:.76rem;line-height:1.55;color:var(--inchiostro-tenue);margin:0 0 .6rem;
  max-width:52rem}
.minuto a{color:var(--inchiostro-tenue)}
.minuto a:hover{color:var(--ottone-scuro)}

/* ============================================================================
   8. PAGINE INTERNE
   ========================================================================= */

.pagina{padding-top:2.6rem;padding-bottom:4rem}
.pagina>h1:first-child{margin-top:0}
.chiusura{font-family:var(--sans);font-weight:700;font-size:1.05rem;
  margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--linea)}

@media (min-width:48em){ .pagina{padding-top:3.5rem;padding-bottom:5.5rem} }

/* ============================================================================
   9. STAMPA — il sito deve sembrare un documento: che lo diventi davvero
   ========================================================================= */
@media print{
  .testata nav,.salta,.pulsante,.righello,.avanzamento{display:none}
  body{background:#fff;font-size:11pt}
  .sezione--scura,.apertura{background:#fff;color:#000}
  .apertura{min-height:0}
}

/* ============================================================================
   10. FOTOGRAFIE
   Le foto di Tony sono fotografie vere. Bianco e nero, nessun ritocco oltre
   il ritaglio: il trattamento sta gia' nel file.
   ========================================================================= */
.figura--foto{margin:2rem 0}
.figura--foto img{display:block;width:100%;border:1px solid var(--linea)}
.figura--foto.ritratto{max-width:22rem}
.figura--foto.piena{margin-left:calc(var(--margine) * -1);margin-right:calc(var(--margine) * -1)}
@media (min-width:48em){ .figura--foto.piena{margin-left:0;margin-right:0} }
@media (min-width:64em){
  .figura--foto.piena{width:46rem;max-width:calc(100vw - 3rem);margin-left:50%;transform:translateX(-50%)}
}

/* ============================================================================
   11. ARCHIVIO: anteprima e colore della soglia
   ========================================================================= */
.archivio .anteprima{display:block;font-size:.92rem;line-height:1.45;color:var(--inchiostro-tenue);
  margin-top:.25rem}
.archivio .p--pulito{border-color:var(--verde);color:var(--verde)}
.archivio .p--illeggibile{border-color:var(--mattone);color:var(--mattone)}

/* ============================================================================
   12. SOGLIE DELL'INDICE DI OPACITA'
   ========================================================================= */
.soglie{list-style:none;padding:0;margin:1.6rem 0}
.soglie li{display:flex;gap:.9rem;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--linea)}
.soglie .fascia{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;min-width:6.5rem;border:1.5px solid currentColor;padding:.15rem .5rem;text-align:center}
.soglie .s0{color:var(--verde)} .soglie .s1{color:var(--ottone-scuro)}
.soglie .s2{color:var(--ottone-scuro)} .soglie .s3{color:var(--mattone)}

/* ============================================================================
   13. PREZZO IN CHIARO
   ========================================================================= */
.prezzo{border:1.5px solid var(--inchiostro);padding:1.4rem 1.5rem;margin:2rem 0}
.prezzo .cifra{font-family:var(--serif);font-size:2.4rem;font-weight:600;line-height:1;margin:0 0 .4rem;
  letter-spacing:-.02em}
.prezzo .durata{font-family:var(--sans);font-size:.86rem;color:var(--inchiostro-tenue);margin:0}

/* ============================================================================
   14. MODULI
   ========================================================================= */
form{margin:2rem 0}
.campo{margin-bottom:1.3rem}
.campo label{display:block;font-family:var(--sans);font-size:.82rem;font-weight:600;
  margin-bottom:.35rem}
.campo .aiuto{display:block;font-family:var(--sans);font-size:.76rem;color:var(--inchiostro-tenue);
  margin-bottom:.4rem}
input[type=text],input[type=email],input[type=number],input[type=file],textarea,select{
  width:100%;font-family:var(--sans);font-size:.95rem;color:var(--inchiostro);
  background:#fff;border:1px solid var(--linea);padding:.7rem .8rem}
input[type=file]{padding:.55rem .6rem;background:var(--sabbia)}
textarea{min-height:9rem;resize:vertical;line-height:1.5}
input:focus,textarea:focus{border-color:var(--ottone)}
.scelta{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.9rem}
.scelta input{margin-top:.28rem;flex:0 0 auto;width:1.05rem;height:1.05rem;accent-color:var(--ottone-scuro)}
.scelta label{font-family:var(--sans);font-size:.88rem;font-weight:400;line-height:1.5;margin:0}
.obbligatorio{color:var(--mattone)}
.nota-privacy{font-family:var(--sans);font-size:.78rem;line-height:1.55;color:var(--inchiostro-tenue);
  border-top:1px solid var(--linea);padding-top:1rem;margin-top:1.6rem}
/* campo esca per i robot: fuori dallo schermo, senza allargare la pagina */
.campo-nascosto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.esito{border-left:3px solid var(--verde);background:var(--sabbia);padding:1rem 1.2rem;margin:1.6rem 0}
.esito--errore{border-left-color:var(--mattone)}

/* ============================================================================
   15. LA GRIGLIA A DODICI COLONNE
   Tre ampiezze in alternanza: misura (6/12), larga (10/12), piena (12/12).
   La colonna di testo NON sta al centro: parte dalla terza colonna, e lo spazio
   a destra si riempie con il numero di sezione, l'occhiello ruotato, le note.
   Sotto i 64em tutto torna a una colonna sola: sul telefono la griglia non serve.
   ========================================================================= */

.griglia{
  max-width:var(--griglia);margin:0 auto;
  padding-left:var(--margine);padding-right:var(--margine);
  display:grid;grid-template-columns:minmax(0,1fr);row-gap:0}

.griglia>.misura{max-width:var(--misura)}

@media (min-width:64em){
  .griglia{
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--grondaia);
    padding-left:calc(var(--righello) + var(--margine));
    padding-right:var(--margine)}
  .griglia>.misura{grid-column:3 / span 6;max-width:none}
  .griglia>.larga {grid-column:2 / span 10}
  .griglia>.piena {grid-column:1 / -1}
  .griglia>.fianco{grid-column:10 / span 3;align-self:start;padding-top:.35rem}
  /* un elemento per sezione deve sbordare: e' la regola del ritmo */
  .griglia>.sborda{grid-column:3 / span 9}
  .griglia>.larga.sborda{grid-column:2 / span 11}
}

/* Materia di fianco: numero della sezione, occhiello ruotato, note brevi. */
.numero-sezione{
  font-family:var(--sans);font-weight:700;font-size:clamp(3rem,7vw,5.5rem);
  line-height:.85;letter-spacing:-.04em;color:var(--linea);
  font-variant-numeric:tabular-nums;margin:0 0 .6rem}
.sezione--scura .numero-sezione{color:#2C333D}
.occhiello--verticale{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ottone-scuro);margin:0}
.nota-laterale{
  font-family:var(--sans);font-size:.78rem;line-height:1.55;color:var(--inchiostro-tenue);
  border-top:1px solid var(--linea);padding-top:.7rem;margin:.9rem 0 0}
/* Su fondo inchiostro la nota e l'occhiello vanno riportati sopra la soglia AA:
   l'inchiostro tenue su inchiostro non si legge, e l'ottone scuro sta a 3,6:1. */
.sezione--scura .nota-laterale,
.apertura .nota-laterale{color:#CFC8B8;border-top-color:#2C333D}
.sezione--scura .occhiello--verticale,
.apertura .occhiello--verticale{color:var(--ottone)}
.apertura .numero-sezione{color:#2C333D}
@media (max-width:63.99em){
  /* Sul telefono non esiste lo spazio a destra: numero e occhiello ruotato
     sono materia di margine e sparirebbero comunque male in mezzo al testo,
     dove per giunta l'occhiello risulterebbe scritto due volte. Resta la nota. */
  .numero-sezione,.occhiello--verticale{display:none}
  .fianco{margin-top:.4rem}
  .fianco .nota-laterale{margin-top:0}
  .fianco:empty{display:none}
}

/* ============================================================================
   16. IL RITMO
   Fondo, ampiezza e altezza cambiano a ogni blocco: mai la stessa distanza
   due volte di fila.
   ========================================================================= */
.sezione--bassa{padding-block:2.6rem}
.sezione--media{padding-block:4rem}
.sezione--alta {padding-block:5.5rem}
@media (min-width:64em){
  .sezione--bassa{padding-block:4rem}
  .sezione--media{padding-block:6rem}
  .sezione--alta {padding-block:8.5rem}
}

/* ============================================================================
   17. IL RIGHELLO
   L'asta graduata del calibro lungo il bordo sinistro. L'indicatore segue lo
   scorrimento e dichiara a che punto sei: e' una misura, non una decorazione.
   Sotto i 64em diventa un filetto di avanzamento sotto la testata.
   ========================================================================= */
.righello{display:none}
@media (min-width:64em){
  .righello{
    display:block;position:fixed;left:0;top:0;bottom:0;width:var(--righello);
    z-index:4;pointer-events:none}
  .righello .asta{position:absolute;left:1.5rem;top:0;bottom:0;width:1px;background:var(--linea)}
  /* tacche corte ogni 14px, tacche lunghe ogni 70px */
  .righello .tacche{
    position:absolute;left:1.5rem;top:0;bottom:0;width:.4rem;
    background-image:repeating-linear-gradient(to bottom,var(--linea) 0 1px,transparent 1px 14px)}
  .righello .tacche-lunghe{
    position:absolute;left:1.5rem;top:0;bottom:0;width:.8rem;
    background-image:repeating-linear-gradient(to bottom,var(--linea) 0 1px,transparent 1px 70px)}
  .righello .indicatore{
    position:absolute;left:.75rem;width:1.6rem;height:2px;background:var(--ottone);top:0}
  .righello .quota{
    position:absolute;left:0;width:var(--righello);text-align:center;
    font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.06em;
    color:var(--ottone-scuro);font-variant-numeric:tabular-nums;
    transform:translateY(-1.35rem)}
}
/* telefono e tablet: filetto orizzontale di avanzamento */
.avanzamento{
  position:fixed;left:0;top:0;height:2px;width:100%;background:var(--ottone);
  transform-origin:0 50%;transform:scaleX(0);z-index:9}
@media (min-width:64em){ .avanzamento{display:none} }
@media (prefers-reduced-motion:reduce){
  .righello .indicatore,.righello .quota,.avanzamento{transition:none}
}

/* --- innesti della griglia sui componenti gia' esistenti ----------------- */
.apertura>.griglia{flex:1 1 auto;width:100%}

@media (min-width:64em){
  /* dentro la griglia le figure non devono piu' sfondare da sole: se ne occupa
     la colonna che le contiene, altrimenti si sommano due sbordi e si accavallano */
  .griglia .figura--larga,
  .griglia .figura--foto.piena{
    width:auto;max-width:none;margin-left:0;margin-right:0;transform:none}

  /* la fotografia dell'artigiano: colonna destra, a tutta altezza, non centrata */
  .griglia>.foto-destra{grid-column:9 / span 4;align-self:stretch}
  .foto-destra .figura--foto{margin:0;height:100%;display:flex;flex-direction:column}
  .foto-destra .figura--foto picture{flex:1 1 auto;min-height:0;display:block}
  .foto-destra .figura--foto img{width:100%;height:100%;object-fit:cover}
}
@media (max-width:63.99em){
  .griglia>.foto-destra{margin-top:1.4rem}
  .foto-destra .figura--foto{margin:0}
}

/* ============================================================================
   18. IL CALCOLATORE DELL'INDICE DI OPACITA'
   Senza JavaScript resta una checklist stampabile; con JavaScript diventa lo
   strumento. Il calcolo non esce dal dispositivo: nessuna rete, nessuna libreria.
   ========================================================================= */

.nascosto-visivamente{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

.voci-iop{list-style:none;counter-reset:voce;padding:0;margin:2rem 0}
.voci-iop>li{counter-increment:voce;border-top:1px solid var(--linea);padding:1.1rem 0 1.2rem}
.voci-iop>li:last-child{border-bottom:1px solid var(--linea)}
.voci-iop .voce-testo{margin:0;padding-left:2.6rem;position:relative;font-size:1.02rem;line-height:1.5}
.voci-iop .voce-testo::before{
  content:counter(voce,decimal-leading-zero);position:absolute;left:0;top:.12rem;
  font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:var(--ottone-scuro)}

.gruppo{border:0;margin:0;padding:0}
.voce-scelte{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0 0 2.6rem}
.voce-scelte input{position:absolute;opacity:0;width:1px;height:1px}
.scelta-iop{
  font-family:var(--sans);font-size:.82rem;font-weight:500;line-height:1;
  border:1px solid var(--linea);background:#fff;color:var(--inchiostro-tenue);
  padding:.55rem .9rem;cursor:pointer;user-select:none}
.scelta-iop:hover{border-color:var(--ottone);color:var(--inchiostro)}
.voce-scelte input:checked+.scelta-iop{
  background:var(--inchiostro);border-color:var(--inchiostro);color:var(--carta);font-weight:600}
.voce-scelte input:focus-visible+.scelta-iop{outline:2px solid var(--ottone);outline-offset:2px}
.azioni-iop{margin:1.6rem 0 0}

/* --- l'esito ------------------------------------------------------------- */
.esito-iop{margin:2.4rem 0 0;scroll-margin-top:2rem}
.esito-vuoto{font-family:var(--sans);font-size:.9rem;color:var(--inchiostro-tenue);
  border-left:2px solid var(--linea);padding-left:1rem;margin:0}

.timbro-iop{position:relative;display:inline-block;min-width:13.75rem;margin:0 0 1.6rem;
  color:var(--ottone)}
.timbro-iop .timbro-bordo{display:block;width:13.75rem;height:8.125rem}
.timbro-dentro{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:.5rem}
.timbro-occhiello{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 .15rem;color:inherit}
.timbro-cifra{font-family:var(--serif);font-size:3.1rem;font-weight:600;line-height:1;margin:0;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:inherit}
.timbro-soglia{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;margin:.35rem 0 0;color:inherit}
.timbro-iop--pulito{color:var(--verde)}
.timbro-iop--incompleto,.timbro-iop--opaco{color:var(--ottone-scuro)}
.timbro-iop--illeggibile{color:var(--mattone)}

.avviso-parziale{font-family:var(--sans);font-size:.85rem;line-height:1.55;
  background:var(--sabbia);border-left:3px solid var(--ottone);padding:.9rem 1.1rem;margin:0 0 1.6rem}
.mancanti{list-style:none;padding:0;margin:1rem 0 0}
.mancanti>li{border-top:1px solid var(--linea);padding:.9rem 0}
.mancante-voce{margin:0 0 .3rem;font-weight:600;font-size:1rem;line-height:1.45}
.mancante-meccanismo{margin:0;font-size:.95rem;line-height:1.55;color:var(--inchiostro-tenue)}
.nessuna-mancanza{font-size:1.05rem;font-weight:600;margin:0 0 1.2rem}
.domande-iop{margin:1rem 0 0;padding-left:1.3rem}
.domande-iop li{font-family:var(--serif);font-size:1.08rem;line-height:1.5;margin-bottom:.7rem}
.chiusura-iop{margin:2rem 0 0;padding-top:1.3rem;border-top:1px solid var(--linea);
  font-size:1rem;line-height:1.6;color:var(--inchiostro-tenue)}
.condivisione{margin:1.6rem 0 0}
.condivisione input{font-size:.85rem;font-family:var(--sans)}

/* --- richiamo allo strumento --------------------------------------------- */
.richiamo--strumento{background:var(--ottone-chiaro);border-color:#E3D3AC}
.richiamo-titolo{font-family:var(--serif);font-size:1.35rem;line-height:1.25;font-weight:600;
  letter-spacing:-.015em;margin:0 0 .6rem}
.sezione--strumento{padding-block:2rem}
@media (min-width:64em){
  .sezione--strumento{padding-block:2.6rem}
  .richiamo--strumento{padding:1.8rem 2rem}
  .richiamo-titolo{font-size:1.6rem}
}

/* --- stampa: la checklist deve funzionare sulla carta -------------------- */
@media print{
  .voce-scelte,.azioni-iop,.condivisione,.richiamo--strumento{display:none}
  .voci-iop .voce-testo::after{content:"";display:inline-block;width:.9rem;height:.9rem;
    border:1px solid #000;margin-left:.6rem;vertical-align:-2px}
}

/* ============================================================================
   19. COMPONENTI DEL CAPITOLO 6
   ========================================================================= */

/* 19.1 Blocco domanda-risposta. Serve al lettore e serve a essere citati:
   sono la stessa cosa. La risposta sta in due righe, su fondo sabbia. */
.qr{margin:2rem 0}
.qr-domanda{font-family:var(--serif);font-size:1.25rem;font-weight:600;line-height:1.3;
  letter-spacing:-.015em;margin:0 0 .7rem}
.qr-risposta{background:var(--sabbia);border-left:3px solid var(--ottone);padding:1.1rem 1.3rem}
.qr-risposta p{margin:0;font-size:1rem;line-height:1.55}

/* 19.2 Tabella di confronto. */
.tabella-scorre{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:2rem 0}
.tabella-scorre table{margin:0;min-width:34rem}
.tabella-scorre thead th{background:var(--inchiostro);color:var(--carta);border-bottom:0;
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:.75rem .8rem;vertical-align:bottom}
.tabella-scorre tbody tr:nth-child(odd){background:#F6F2EA}
.tabella-scorre td{padding:.8rem;border-bottom:1px solid var(--linea);font-size:.96rem;line-height:1.5}
.tabella-scorre .cifra{text-align:right}

/* 19.3 Scheda Referto: al passaggio del mouse si alza di 2px e il filetto
   d'ottone si allunga. Nient'altro. */
.archivio a{position:relative;transform:translateY(0);
  transition:transform .15s ease,background-color .15s ease}
.archivio a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--ottone);transition:width .15s ease}
.archivio a:hover,.archivio a:focus-visible{transform:translateY(-2px)}
.archivio a:hover::after,.archivio a:focus-visible::after{width:100%}

/* 19.4 Il timbro si disegna quando entra nello schermo: 400 ms, una volta sola. */
.timbro{position:relative}
.timbro--anima{border-color:transparent}
.timbro--anima::before{content:"";position:absolute;inset:0;border:1.5px solid currentColor;
  clip-path:inset(0 100% 0 0);transition:clip-path 400ms ease-out}
.timbro--disegnato::before{clip-path:inset(0 0 0 0)}

/* 19.5 Il contatore onesto: finche' l'archivio e' sotto i cento preventivi,
   al posto delle statistiche c'e' un numero che viene dall'archivio. */
.contatore{border:1px solid var(--linea);background:var(--sabbia);padding:1.6rem 1.8rem;margin:2.2rem 0}
.contatore .occhiello{margin-bottom:.5rem}
.contatore-cifra{font-family:var(--serif);font-size:clamp(2.6rem,1.8rem + 3vw,4.2rem);
  font-weight:600;line-height:1;letter-spacing:-.03em;margin:0 0 .4rem}
.contatore-riga{font-family:var(--sans);font-size:.88rem;line-height:1.5;
  color:var(--inchiostro-tenue);margin:0}

@media (prefers-reduced-motion:reduce){
  .archivio a,.archivio a::after,.timbro--anima::before{transition:none}
  .archivio a:hover{transform:none}
  .timbro--anima::before{clip-path:inset(0 0 0 0)}
}

/* Elenco lungo su due colonne quando c'e' spazio: le dodici voci dell'indice
   occupavano da sole quasi una schermata intera. */
@media (min-width:64em){
  ol.due-colonne{column-count:2;column-gap:2.5rem}
  ol.due-colonne li{break-inside:avoid}
}

/* ============================================================================
   20. IL COSTO PER CHILOMETRO IN TRE DOMANDE
   Strumento secondario, stesse regole del calcolatore: tutto nel browser.
   Senza JavaScript il blocco resta nascosto e non compare affatto.
   ========================================================================= */
.strumento-km{border:1px solid var(--linea);background:#fff;padding:1.4rem 1.5rem;margin:2rem 0}
.campi-km{display:grid;gap:1rem}
.campi-km .campo{margin:0}
@media (min-width:34em){ .campi-km{grid-template-columns:repeat(3,1fr)} }
.esito-km{margin:1.4rem 0 0}
.due-numeri{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);margin:0 0 1rem}
@media (min-width:34em){ .due-numeri{grid-template-columns:1fr 1fr} }
.numero-grande{background:var(--carta);padding:1.1rem 1.2rem}
.numero-etichetta{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ottone-scuro);margin:0 0 .35rem}
.numero-cifra{font-family:var(--serif);font-size:clamp(1.9rem,1.3rem + 2.2vw,2.8rem);
  font-weight:600;line-height:1;letter-spacing:-.02em;margin:0;font-variant-numeric:tabular-nums}
.km-nota{font-family:var(--sans);font-size:.82rem;color:var(--inchiostro-tenue);margin:0 0 1rem}

/* ============================================================================
   21. MOVIMENTO (cap. 9)
   Comparsa in dissolvenza e 8px di risalita, 300 ms, una volta sola.
   Lo stato di partenza lo mette lo script: senza JavaScript nulla si nasconde.
   ========================================================================= */
.entra{opacity:0;transform:translateY(8px);
  transition:opacity 300ms ease-out,transform 300ms ease-out}
.entra--dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .entra{opacity:1;transform:none;transition:none}
}

/* ============================================================================
   22. FASCIA FOTOGRAFICA A TUTTA LARGHEZZA (cap. 8)
   Serve dove si parla di formazione: l'immagine respira fra due sezioni.
   ========================================================================= */
.fascia-foto{padding:0}
.fascia-foto .figura--foto{margin:0}
.fascia-foto .figura--foto img{width:100%;height:clamp(15rem,42vh,27rem);object-fit:cover;
  border-left:0;border-right:0}
.fascia-foto figcaption{max-width:var(--griglia);margin:0 auto;
  padding:.8rem var(--margine) 0}
@media (min-width:64em){
  .fascia-foto figcaption{padding-left:calc(var(--righello) + var(--margine))}
}

/* ============================================================================
   23. LE DUE PORTE
   Il blocco piu' importante della home: due riquadri grandi e uguali, e da soli
   occupano una schermata. Chi arriva deve capire in dieci secondi dove andare.
   ========================================================================= */
.sezione--porte{padding-block:3rem}
@media (min-width:64em){
  .sezione--porte{padding-block:4.5rem;min-height:100svh;display:flex;align-items:center}
  .sezione--porte>.griglia{width:100%}
}
.porte{display:grid;gap:1.25rem;margin:0}
@media (min-width:48em){
  .porte{grid-template-columns:1fr 1fr;gap:1.75rem}
  /* con un numero dispari di porte l'ultima prende la riga intera: altrimenti
     resta una cella vuota che sembra un errore di impaginazione */
  .porte .porta:last-child:nth-child(odd){grid-column:1 / -1}
}

.porta{
  display:flex;flex-direction:column;justify-content:flex-start;
  background:var(--carta);border:1px solid var(--linea);
  /* colore esplicito, non ereditato: dentro l'apertura scura il testo
     erediterebbe la carta e il titolo sparirebbe, crema su crema */
  padding:1.8rem 1.6rem 1.6rem;text-decoration:none;color:var(--inchiostro);
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.porta:hover,.porta:focus-visible{
  border-color:var(--ottone);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(20,24,31,.07)}
.porta-occhiello{font-family:var(--sans);font-size:.6875rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ottone-scuro);margin-bottom:1.1rem}
.porta-titolo{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.12;
  font-size:clamp(1.75rem,1.2rem + 2.1vw,2.6rem);margin-bottom:.8rem}
.porta-riga{font-size:1.02rem;line-height:1.55;color:var(--inchiostro-tenue);margin-bottom:1.6rem}
.porta-verso{margin-top:auto;font-family:var(--sans);font-size:.88rem;font-weight:600;
  color:var(--ottone-scuro)}
.porta:hover .porta-verso,.porta:focus-visible .porta-verso{color:var(--inchiostro)}
@media (min-width:64em){ .porta{padding:2.6rem 2.4rem 2.2rem;min-height:22rem} }

/* ============================================================================
   24. CHIUSURA DOPPIA
   Due inviti affiancati, uno per porta. Nessun terzo bottone.
   ========================================================================= */
.inviti{display:grid;gap:2rem;margin:0}
@media (min-width:48em){ .inviti{grid-template-columns:1fr 1fr;gap:2.5rem} }
.invito-titolo{font-family:var(--serif);font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem);
  font-weight:600;line-height:1.2;letter-spacing:-.015em;margin:0 0 .6rem}
.invito-riga{font-size:.98rem;line-height:1.55;color:#CFC8B8;margin:0 0 1.2rem}
.invito .sotto-azione{margin:0}
@media (min-width:48em){
  .inviti .invito:first-child{border-right:1px solid #2C333D;padding-right:2.5rem}
}

@media (prefers-reduced-motion:reduce){ .porta{transition:none} .porta:hover{transform:none} }

/* ============================================================================
   25. IL PERCORSO DI CHI COMPRA
   Le nove tappe: un invito identico in fondo a ognuna, mai insistente, e una
   navigazione che dice sempre a che punto sei.
   ========================================================================= */
.richiamo--accompagna{background:var(--sabbia);border-color:var(--linea);margin-top:2.6rem}
.richiamo--accompagna p:first-child{font-size:1.02rem;line-height:1.55;margin-bottom:1rem}

.tappe-nav{display:grid;gap:1rem;margin:3rem 0 0;padding-top:1.6rem;
  border-top:1px solid var(--linea);align-items:start}
@media (min-width:48em){
  .tappe-nav{grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:center}
  .tappa-succ{text-align:right}
}
.tappe-nav a{text-decoration:none;font-family:var(--serif);font-size:1.02rem;line-height:1.35;
  display:block;color:inherit}
.tappe-nav a:hover{color:var(--ottone-scuro)}
.tappe-nav a span{display:block;font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ottone-scuro);margin-bottom:.3rem}
.tappa-quante{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--inchiostro-tenue);font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* elenco delle tappe su /scegliere/ */
.tappe{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1px;
  background:var(--linea);border:1px solid var(--linea)}
.tappe li{margin:0;background:var(--carta)}
.tappe a{display:flex;gap:1.1rem;align-items:baseline;padding:1.15rem 1.2rem;text-decoration:none;
  transition:background-color .15s ease}
.tappe a:hover,.tappe a:focus-visible{background:var(--sabbia)}
.tappe .n{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.12em;
  color:var(--ottone-scuro);font-variant-numeric:tabular-nums;min-width:2.2rem}
.tappe .t{flex:1}
.tappe .t strong{display:block;font-family:var(--serif);font-size:1.12rem;font-weight:600;
  letter-spacing:-.01em;margin-bottom:.2rem}
.tappe .t span{display:block;font-size:.95rem;line-height:1.5;color:var(--inchiostro-tenue)}
@media (min-width:64em){
  .tappe{grid-template-columns:1fr 1fr}
  /* nove tappe in due colonne lasciano una cella vuota: l'ultima prende la riga */
  .tappe li:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ============================================================================
   26. APERTURA CON LE PORTE
   Il ruolo — artigianato della relazione e della fiducia — si legge subito, e
   la scelta della porta sta nella prima schermata: non si scorre per scegliere.
   ========================================================================= */
.apertura--porte{padding-block:2rem}
@media (min-width:64em){ .apertura--porte{padding-block:2.5rem} }

.apertura--porte .simbolo-grande{width:2.4rem;height:2.4rem;margin-bottom:.9rem}
.apertura--porte h1{font-size:clamp(2.1rem,1.3rem + 3.6vw,4rem);letter-spacing:.12em}
.apertura--porte .protocollo{font-size:.78rem;margin-top:.5rem}
.apertura--porte .motto{
  font-size:clamp(1.8rem,1.15rem + 2.4vw,3.1rem);line-height:1.1;max-width:20ch;
  margin-top:1.5rem;padding-top:1.5rem}
.controfirma{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ottone);margin:.9rem 0 0}
.apertura--porte .spiega{margin-top:.9rem;max-width:52ch;font-size:.98rem}

/* le porte dentro l'apertura: chiare su fondo inchiostro, si vedono e si toccano */
.apertura--porte .porte{margin-top:1.8rem}
@media (min-width:48em){ .apertura--porte .porte{gap:1.1rem} }
.apertura--porte .porta{padding:1.15rem 1.2rem}
.apertura--porte .porta-occhiello{margin-bottom:.55rem}
.apertura--porte .porta-titolo{font-size:clamp(1.25rem,.95rem + 1.2vw,1.7rem);margin-bottom:.45rem}
.apertura--porte .porta-riga{font-size:.92rem;line-height:1.45;margin-bottom:.9rem}
@media (min-width:64em){ .apertura--porte .porta{min-height:0;padding:1.5rem 1.6rem 1.3rem} }

/* Sul telefono l'apertura deve stare in una schermata: il ruolo si legge e la
   porta si sceglie senza scorrere. Si comprime, non si toglie contenuto. */
@media (max-width:47.99em){
  .apertura--porte{padding-block:1.1rem;min-height:0}
  .apertura--porte .simbolo-grande{display:none}
  .apertura--porte h1{font-size:1.95rem;letter-spacing:.1em}
  .apertura--porte .protocollo{font-size:.7rem;margin-top:.35rem}
  .apertura--porte .motto{font-size:1.65rem;line-height:1.12;max-width:17ch;
    margin-top:1rem;padding-top:1rem}
  .apertura--porte .controfirma{font-size:.66rem;margin-top:.6rem}
  .apertura--porte .spiega{font-size:.92rem;line-height:1.45;margin-top:.7rem}
  .apertura--porte .porte{margin-top:1.1rem;gap:.7rem}
  .apertura--porte .porta{padding:.9rem 1rem}
  .apertura--porte .porta-occhiello{font-size:.62rem;margin-bottom:.4rem}
  .apertura--porte .porta-titolo{font-size:1.2rem;margin-bottom:.3rem}
  .apertura--porte .porta-riga{font-size:.88rem;line-height:1.4;margin-bottom:.7rem}
  .apertura--porte .porta-verso{font-size:.82rem}
}

/* ============================================================================
   27. INDICE LATERALE
   La pagina del metodo e' lunga: l'indice dice sempre a che punto sei e lascia
   saltare. Compare solo dove c'e' spazio vero accanto alla colonna di testo.
   ========================================================================= */
.indice-laterale{display:none}
@media (min-width:82em){
  .indice-laterale{
    display:block;position:fixed;left:calc(var(--righello) + .5rem);top:50%;
    transform:translateY(-50%);width:11.5rem;z-index:3}
  .indice-titolo{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.18em;
    text-transform:uppercase;color:var(--inchiostro-tenue);margin:0 0 .6rem}
  .indice-laterale ol{list-style:none;margin:0;padding:0;counter-reset:voce}
  .indice-laterale li{counter-increment:voce;margin:0}
  .indice-laterale a{
    display:block;font-family:var(--sans);font-size:.74rem;line-height:1.3;
    color:var(--inchiostro-tenue);text-decoration:none;padding:.3rem 0 .3rem .95rem;
    border-left:2px solid var(--linea)}
  .indice-laterale a:hover{color:var(--inchiostro);border-left-color:var(--ottone-scuro)}
  .indice-laterale a[aria-current="true"]{
    color:var(--inchiostro);font-weight:600;border-left-color:var(--ottone)}
}