/* ==========================================================================
   LE PAGINE-DOCUMENTO E LE CANDIDATURE — binario P2.

   Domande frequenti (§ 5.2.9 «Percorso»), termini (§ 5.2.7 «Con indice
   laterale»), compliance (§ 5.2.8 «Fisarmonica e pannello»), diventa
   partner (§ 5.2.12 «Landing · modulo in apertura»), diventa agente
   (§ 5.2.13 «Gemella della 5.2.12») e la mappa del sito (nessun layout nel
   libro: apertura § 5.4.2 e l'elenco delle sezioni della sitemap).

   LE CLASSI `nw-doc-*` VESTONO IL CORPO DEI DOCUMENTI. Il testo di queste
   pagine e' una riga dell'elenco delle pagine e si scrive dal pannello
   (database/corpi/ e' il testo di partenza): le pagine 1:1 del libro
   portano gli stili in linea, il corpo porta queste classi, e qui stanno
   le misure di quegli stili in linea — gli stessi token, lo stesso ordine
   dei blocchi. Un corpo riscritto dal pannello che usa le stesse classi
   resta nel disegno del libro senza che chi scrive debba conoscerne i
   token.

   Solo token `--nlg-*`; le classi `.nlg-*` della libreria si usano e non si
   ridefiniscono: dove il libro le ricolora dentro un blocco (l'occhiello
   grigio dell'apertura, bianco sulla fascia di marca) la regola e' scoped
   al blocco, come nello stile in linea della pagina 1:1.
   ========================================================================== */

.nw-doc-contenitore {
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: 0 var(--nlg-margine);
}

.nw-doc-mono {
  font-family: var(--nlg-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlg-text-3);
}

/* L'indirizzo della pagina in mono: minuscolo, com'e' scritto. */
.nw-doc-mono--indirizzo {
  text-transform: none;
  letter-spacing: 0.04em;
}

a.nw-doc-mono--indirizzo { text-decoration: none; }
a.nw-doc-mono--indirizzo:hover { color: var(--nlg-text-3); text-decoration: underline; }

/* --------------------------------------------------------------------------
   1 · L'APERTURA SU FONDO CHIARO — § 5.4.2 linguetta 1 (nlg-a-chiara-filo):
   occhiello, H1, una riga, e il filo di firma del § 3.2.1 in chiusura.
   -------------------------------------------------------------------------- */

.nw-doc-apertura { background: var(--nlg-canvas); }

.nw-doc-apertura__contenuto {
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: calc(var(--nlg-s-8) * var(--nlg-passo-k, 1)) var(--nlg-margine) calc(var(--nlg-s-6) * var(--nlg-passo-k, 1));
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-4);
}

.nw-doc-apertura .nlg-occhiello { margin: 0; color: var(--nlg-text-3); }

.nw-doc-apertura__titolo {
  margin: 0;
  max-width: 24ch;
  font: 800 var(--nlg-fs-h1)/var(--nlg-lh-h1) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h1);
  color: var(--nlg-text-1);
  text-wrap: balance;
}

.nw-doc-apertura__testo {
  margin: 0;
  max-width: 60ch;
  font: 400 var(--nlg-fs-body-lg)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

/* Il filo di firma (§ 3.2.1), come lo disegna l'SVG del libro su 600
   unita': la barra blu da 4 su 14, interrotta da 554 a 572, e la tacca
   rossa da 560 a 564 a tutta altezza. Disegnato coi gradienti invece che
   con l'SVG perche' sta in un corpo che si modifica dal pannello: un
   <div> vuoto non si rompe riscrivendo il testo intorno. */
.nw-doc-filo {
  position: relative;
  width: 100%;
  max-width: var(--nlg-filo-firma-max);
  height: 14px;
  margin-top: var(--nlg-s-4);
  background:
    linear-gradient(to right, var(--nlg-bar-blue) 0 92.333%, transparent 92.333% 95.333%, var(--nlg-bar-blue) 95.333%)
    0 5px / 100% 4px no-repeat;
}

.nw-doc-filo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 93.333%;
  width: 0.667%;
  min-width: 3px;
  height: 14px;
  background: var(--nlg-bar-red);
}

.nw-doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--nlg-s-4);
  margin: 0;
}

/* --------------------------------------------------------------------------
   2 · L'APERTURA SULLA FASCIA DI MARCA COL MODULO — § 5.4.2 linguetta 2
   (nlg-a-fascia-immagine), come la portano le landing § 5.2.12 e 5.2.13:
   il testo a sinistra, la card del modulo a destra, la figura del libro
   ritagliata sul bordo destro.
   -------------------------------------------------------------------------- */

.nw-doc-fascia {
  position: relative;
  overflow: hidden;
  background: var(--nlg-action);
}

.nw-doc-fascia__figura {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: 45%;
  object-fit: cover;
  object-position: left center;
  opacity: .55;
}

.nw-doc-fascia__griglia {
  position: relative;
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: calc(var(--nlg-s-8) * var(--nlg-passo-k, 1)) var(--nlg-margine);
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 7fr) minmax(0, 5fr));
  gap: var(--nlg-s-7) var(--nlg-gutter);
  align-items: start;
}

.nw-doc-fascia__testo {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  min-width: 0;
}

.nw-doc-fascia .nw-doc-fascia__testo .nlg-occhiello { margin: 0; color: var(--nlg-text-onaction); }

.nw-doc-fascia__titolo {
  margin: 0;
  max-width: 20ch;
  font: 800 var(--nlg-fs-h1)/var(--nlg-lh-h1) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h1);
  color: var(--nlg-text-onaction);
  text-wrap: balance;
}

.nw-doc-fascia__testo p:not(.nlg-occhiello) {
  margin: 0;
  max-width: 48ch;
  font: 400 var(--nlg-fs-body)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-onaction);
  text-wrap: pretty;
}

.nw-doc-fascia__testo p.nw-doc-fascia__attacco { font-size: var(--nlg-fs-body-lg); }

.nw-doc-fascia__testo a { color: var(--nlg-text-onaction); text-decoration: underline; }

/* La card del modulo in apertura: il modulo del § 4.1.4 a colonna singola
   (`.nlg-modulo`) dentro una `.nlg-card`, e la nota dei Termini sotto
   l'invio, centrata e in didascalia, come nella pagina 1:1. */
.nw-doc-candidatura { min-width: 0; scroll-margin-top: var(--nlg-s-6); }

.nw-doc-candidatura .nlg-modulo { gap: var(--nlg-s-3); }

.nw-doc-candidatura .nlg-modulo__azioni {
  flex-direction: column;
  align-items: stretch;
  gap: var(--nlg-s-3);
  margin-top: var(--nlg-s-2);
}

.nw-doc-candidatura .nlg-modulo__azioni .nlg-btn { width: 100%; }

.nw-doc-candidatura__nota {
  margin: var(--nlg-s-3) 0 0;
  text-align: center;
  font: 400 var(--nlg-fs-caption)/var(--nlg-lh-caption) var(--nlg-font-text);
  color: var(--nlg-text-3);
}

/* Il collegamento resta riconoscibile senza il colore (WCAG 1.4.1): stesso
   inchiostro della nota, ma sottolineato. */
.nw-doc-candidatura__nota a { color: inherit; text-decoration: underline; }

/* Il ripiego: il segnaposto tolto dal corpo, il modulo in coda alla pagina. */
.nw-doc-candidatura--in-coda {
  max-width: 560px;
}

/* --------------------------------------------------------------------------
   3 · I BLOCCHI — fondo che alterna canvas e surface-2, il titolo h2 del
   § 5.5 e il testo a 72 battute.
   -------------------------------------------------------------------------- */

.nw-doc-blocco {
  background: var(--nlg-canvas);
  padding: calc(var(--nlg-s-9) * var(--nlg-passo-k, 1)) 0;
}

.nw-doc-blocco--alterno { background: var(--nlg-surface-2); }

/* I termini: il testo comincia subito sotto il filo dell'apertura. */
.nw-doc-blocco--stretto { padding-top: calc(var(--nlg-s-6) * var(--nlg-passo-k, 1)); }

.nw-doc-blocco .nlg-occhiello { margin: 0; }

.nw-doc-titolo {
  margin: 0 0 var(--nlg-s-5);
  max-width: 34ch;
  font: 700 var(--nlg-fs-h2)/var(--nlg-lh-h2) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h2);
  color: var(--nlg-text-1);
  text-wrap: pretty;
}

.nw-doc-blocco .nlg-occhiello + .nw-doc-titolo { margin-top: var(--nlg-s-3); }

.nw-doc-premessa,
.nw-doc-chiosa,
.nw-doc-paragrafi p,
.nw-doc-colonne p {
  margin: 0;
  max-width: 72ch;
  font: 400 var(--nlg-fs-body)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-doc-premessa { margin-bottom: var(--nlg-s-6); }
.nw-doc-premessa + .nw-doc-premessa { margin-top: calc(-1 * var(--nlg-s-4)); }
.nw-doc-chiosa { margin-top: var(--nlg-s-6); }

.nw-doc-paragrafi {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-4);
  max-width: 72ch;
}

/* Il testo a due colonne dell'introduzione delle domande frequenti. */
.nw-doc-colonne {
  display: grid;
  grid-template-columns: var(--nlg-g2, 1fr 1fr);
  gap: var(--nlg-s-4) var(--nlg-gutter);
}

.nw-doc-colonne p { max-width: none; }

/* L'occhiello a lato (nlg-testo-occhiello-a-lato): 2 colonne su 12. */
.nw-doc-a-lato {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 2fr) minmax(0, 10fr));
  gap: var(--nlg-gutter);
  align-items: start;
}

.nw-doc-a-lato > * { min-width: 0; }

/* --------------------------------------------------------------------------
   4 · LE TAPPE DEL PERCORSO — t03 «orizzontale con indicatore»: tre tappe
   con la barra, il numero in mono, il titolo che porta alla sezione e le
   sue domande.
   -------------------------------------------------------------------------- */

.nw-doc-tappe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--nlg-g3, repeat(3, 1fr));
  gap: var(--nlg-s-5) var(--nlg-s-1);
}

.nw-doc-tappa {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  min-width: 0;
}

.nw-doc-tappa__barra {
  display: block;
  height: var(--nlg-s-4);
  border-radius: calc(var(--nlg-s-1) * .75);
  background: var(--nlg-bar-blue);
}

.nw-doc-tappa__numero {
  padding-right: var(--nlg-s-4);
  font: 500 var(--nlg-fs-body-sm)/1.3 var(--nlg-font-mono);
  color: var(--nlg-blue-ink);
}

a.nw-doc-tappa__titolo {
  padding-right: var(--nlg-s-4);
  font: 700 var(--nlg-fs-h4)/var(--nlg-lh-h4) var(--nlg-font-ui);
  color: var(--nlg-text-1);
  text-decoration: none;
}

a.nw-doc-tappa__titolo:hover { text-decoration: underline; }

.nw-doc-tappa__voci {
  padding-right: var(--nlg-s-4);
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   5 · LE DOMANDE A RIGHE — § 5.2.9: la domanda a sinistra (4 su 12), la
   risposta a destra (8 su 12), un filo fra una riga e l'altra.

   OGNI DOMANDA E' UN <details> APERTO, col <summary>: e' la forma da cui
   nasce lo schema FAQPage (App\Support\DomandeDelDocumento), e chi legge
   puo' chiudere quelle che non gli servono. La griglia sul <details> e'
   del browser recente; dove non c'e' la risposta va sotto la domanda, che
   e' la resa del telefono — niente si perde.

   LA DOMANDA E' UN <h3> DENTRO IL <summary>, come nella pagina 1:1 09 (le
   nove domande sono <h3>): senza, la pagina passava dall'H2 della tappa
   alla risposta e chi naviga per titoli non trovava le domande. Lo schema
   legge il testo del <summary>, quindi l'<h3> non lo cambia.

   E UNA VOCE CHE SI CHIUDE DICE CHE SI CHIUDE: il marcatore del browser e'
   spento (list-style e ::-webkit-details-marker), e al suo posto c'e' il
   segno «+» della fisarmonica del § 5.2.8 (sezione 6, .nw-doc-voce__segno),
   lo stesso del libro — mono, blu inchiostro — che ruota a croce quando la
   voce e' aperta. Sta in ::after e non nel testo, perche' il <summary> e'
   la domanda dello schema FAQPage e un «+» ci finirebbe dentro.
   -------------------------------------------------------------------------- */

.nw-doc-domande,
.nw-doc-righe {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--nlg-linea) solid var(--nlg-border);
}

.nw-doc-domanda {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 4fr) minmax(0, 8fr));
  gap: var(--nlg-s-2) var(--nlg-gutter);
  align-items: start;
  padding: var(--nlg-s-5) 0;
  border-bottom: var(--nlg-linea) solid var(--nlg-border);
  scroll-margin-top: var(--nlg-s-4);
}

.nw-doc-domanda__voce {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nlg-s-3);
  cursor: pointer;
  list-style: none;
  font: 600 var(--nlg-fs-body)/1.4 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-doc-domanda__voce::-webkit-details-marker { display: none; }

.nw-doc-domanda__titolo {
  margin: 0;
  font: inherit;
  color: inherit;
}

.nw-doc-domanda__voce::after {
  content: "+";
  flex: none;
  font-family: var(--nlg-font-mono);
  font-weight: 400;
  color: var(--nlg-blue-ink);
  transition: transform .15s ease;
}

.nw-doc-domanda[open] > .nw-doc-domanda__voce::after { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .nw-doc-domanda__voce::after { transition: none; }
}

.nw-doc-domanda__risposta {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  max-width: 72ch;
}

.nw-doc-domanda__risposta p,
.nw-doc-riga p {
  margin: 0;
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

/* Le righe di «A chi e' rivolto» (t02 a righe): stessa griglia, testo fermo. */
.nw-doc-riga {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 4fr) minmax(0, 8fr));
  gap: var(--nlg-s-2) var(--nlg-gutter);
  align-items: baseline;
  padding: var(--nlg-s-4) 0;
  border-bottom: var(--nlg-linea) solid var(--nlg-border);
}

.nw-doc-riga h3 {
  margin: 0;
  font: 600 var(--nlg-fs-body)/1.4 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-doc-riga p { max-width: 72ch; }

/* --------------------------------------------------------------------------
   6 · LA FISARMONICA — § 5.2.8 per la compliance, e le domande frequenti
   delle due landing (t02 con <details>): la testa a tutta riga col segno
   «+», il corpo sotto. Il segno ruota a croce quando la voce e' aperta.
   -------------------------------------------------------------------------- */

.nw-doc-fisarmonica {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--nlg-linea) solid var(--nlg-border);
}

.nw-doc-fisarmonica--stretta { max-width: 72ch; }

.nw-doc-fisarmonica > li { border-bottom: var(--nlg-linea) solid var(--nlg-border); }

.nw-doc-voce { scroll-margin-top: var(--nlg-s-4); }

.nw-doc-voce__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nlg-s-4);
  min-height: var(--nlg-tap-min);
  padding: var(--nlg-s-4) 0;
  cursor: pointer;
  list-style: none;
}

.nw-doc-voce__testa::-webkit-details-marker { display: none; }

.nw-doc-voce__testa--domanda {
  padding: var(--nlg-s-3) 0;
  font: 600 var(--nlg-fs-body)/1.4 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-doc-voce__nomi {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nw-doc-voce__riga {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.nw-doc-voce__titolo {
  font: 700 var(--nlg-fs-h4)/var(--nlg-lh-h4) var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-doc-voce__sottotitolo {
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-doc-voce__segno {
  flex: none;
  font-family: var(--nlg-font-mono);
  color: var(--nlg-blue-ink);
  transition: transform .15s ease;
}

.nw-doc-voce[open] > summary .nw-doc-voce__segno { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .nw-doc-voce__segno { transition: none; }
}

.nw-doc-voce__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-6);
  padding: 0 0 var(--nlg-s-6);
}

.nw-doc-voce__risposta {
  margin: 0 0 var(--nlg-s-4);
  max-width: 72ch;
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

/* Un paragrafo dell'informativa: h3 e testo a 72 battute. */
.nw-doc-paragrafo {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  max-width: 72ch;
}

.nw-doc-paragrafo--largo { max-width: none; }

.nw-doc-paragrafo h3 {
  margin: 0;
  font: 700 var(--nlg-fs-h4)/var(--nlg-lh-h4) var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-doc-paragrafo p,
.nw-doc-paragrafo ul {
  margin: 0;
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-doc-paragrafo ul {
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-2);
}

.nw-doc-blocco--legale .nw-doc-fisarmonica { margin-top: var(--nlg-s-5); }

/* La scheda del titolare: una card a 520 px. */
.nw-doc-scheda-titolare {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 520px;
  padding: 20px;
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
}

.nw-doc-scheda-titolare__nome {
  font: 700 var(--nlg-fs-body-lg)/1.3 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

/* --------------------------------------------------------------------------
   7 · IL PANNELLO PREFERENZE CONSENSO — § 5.2.8: «una resa grafica, li
   gestisce il sistema che pubblica». Le categorie le scrive il segnaposto
   [[consenso:categorie]] dalla stessa sorgente del banner; le scelte si
   fanno nel banner, che il bottone della barra riapre (`data-consent-open`,
   js/consent.js). Il pannello non porta interruttori suoi: due posti che
   decidono lo stesso consenso divergerebbero.
   -------------------------------------------------------------------------- */

.nw-doc-pannello {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
  background: var(--nlg-surface-1);
  overflow: hidden;
}

.nw-doc-pannello__elenco .nw-compliance__categorie {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

.nw-doc-pannello__elenco .nw-compliance__categorie dt {
  padding: 14px 18px 3px;
  font: 600 var(--nlg-fs-body)/1.35 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-doc-pannello__elenco .nw-compliance__categorie dt:not(:first-child) {
  border-top: var(--nlg-linea) solid var(--nlg-border);
}

.nw-doc-pannello__elenco .nw-compliance__categorie dt code {
  margin-left: 6px;
  font-family: var(--nlg-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--nlg-text-3);
}

.nw-doc-pannello__elenco .nw-compliance__sempre {
  margin-left: 6px;
  font-family: var(--nlg-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlg-text-3);
}

.nw-doc-pannello__elenco .nw-compliance__categorie dd {
  margin: 0;
  padding: 0 18px 14px;
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-doc-pannello__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: var(--nlg-linea) solid var(--nlg-border);
  background: var(--nlg-surface-2);
}

/* --------------------------------------------------------------------------
   8 · I RECAPITI DELLA CASAMADRE — la coda della § 5.2.9 (anteprima).
   -------------------------------------------------------------------------- */

.nw-doc-recapiti {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 5fr) minmax(0, 7fr));
  gap: var(--nlg-s-4) var(--nlg-gutter);
  align-items: start;
  padding: 22px;
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
}

.nw-doc-recapiti__chi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nw-doc-recapiti__nome {
  font: 700 var(--nlg-fs-h3)/var(--nlg-lh-h3) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h3);
  color: var(--nlg-text-1);
}

.nw-doc-recapiti__riga {
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
}

.nw-doc-recapiti__fiscale { margin-top: 4px; }

.nw-doc-recapiti__azioni {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
}

.nw-doc-recapiti__azioni .nlg-btn {
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   9 · LE SCHEDE DEI VANTAGGI — t02 «tre per riga»: icona in un quadrato
   info, titolo, testo; l'ultima tratteggiata porta la nota del catalogo.
   -------------------------------------------------------------------------- */

.nw-doc-schede {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--nlg-g3, repeat(3, minmax(0, 1fr)));
  gap: var(--nlg-s-4);
}

.nw-doc-scheda {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 20px;
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
}

.nw-doc-scheda--nota {
  justify-content: center;
  background: transparent;
  border: 1px dashed var(--nlg-border-strong);
}

.nw-doc-scheda--nota p {
  margin: 0;
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-doc-scheda__icona {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--nlg-r-md);
  background: var(--nlg-info-bg);
  border: 1px solid var(--nlg-info-border);
  color: var(--nlg-blue-ink);
}

.nw-doc-scheda__icona svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.nw-doc-scheda__titolo {
  font: 700 var(--nlg-fs-body-lg)/1.3 var(--nlg-font-ui);
  color: var(--nlg-text-1);
  text-wrap: balance;
}

.nw-doc-scheda__testo {
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   10 · LA CHIUSA IN LINEA — t07 «in linea»: titolo e riga a sinistra, il
   bottone a destra, fra due fili; va a capo sotto la base del testo.
   -------------------------------------------------------------------------- */

.nw-doc-chiusa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nlg-s-5);
  padding: var(--nlg-s-5) 0;
  border-top: var(--nlg-linea) solid var(--nlg-border);
  border-bottom: var(--nlg-linea) solid var(--nlg-border);
}

.nw-doc-chiusa__testo {
  flex: 1 1 var(--nlg-testo-min);
  min-width: 0;
}

.nw-doc-chiusa__titolo {
  margin: 0;
  font: 700 var(--nlg-fs-h3)/var(--nlg-lh-h3) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h3);
  color: var(--nlg-text-1);
}

.nw-doc-chiusa__testo p {
  margin: var(--nlg-s-2) 0 0;
  max-width: 60ch;
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

/* Le candidature senza layout nel libro (proponiti come fornitore, apri una
   sede), in coda a «Diventa partner»: la resa «Modale con il modulo» del
   § 5.6.3, una sotto l'altra senza il fondo di una sezione nuova. */
.nw-doc-altre-candidature {
  background: var(--nlg-canvas);
  padding: 0 0 calc(var(--nlg-s-9) * var(--nlg-passo-k, 1));
}

/* --------------------------------------------------------------------------
   11 · L'INDICE LATERALE DEI TERMINI — § 5.2.7 linguetta 1: 220 px di
   indice a filo sinistro, l'articolo accanto. L'indice resta in vista
   mentre si legge; sul telefono va sopra il testo.
   -------------------------------------------------------------------------- */

.nw-doc-con-indice {
  display: grid;
  grid-template-columns: var(--nlg-g2, 220px minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.nw-doc-indice {
  position: sticky;
  top: var(--nlg-s-6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nw-doc-indice a {
  padding: var(--nlg-s-2) 14px;
  border-left: 2px solid var(--nlg-border);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--nlg-text-3);
}

.nw-doc-indice a:hover { color: var(--nlg-text-1); }

.nw-doc-indice a[aria-current="true"] {
  border-left-color: var(--nlg-action);
  font-weight: 700;
  color: var(--nlg-text-1);
}

.nw-doc-articoli {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-8);
  min-width: 0;
}

.nw-doc-articolo,
.nw-doc-articoli > h2[id] {
  scroll-margin-top: var(--nlg-s-4);
}

.nw-doc-articolo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nw-doc-articolo h2,
.nw-doc-articoli > h2 {
  margin: 0;
  font: 800 var(--nlg-fs-h2)/1.2 var(--nlg-font-ui);
  letter-spacing: -0.02em;
  color: var(--nlg-text-1);
}

.nw-doc-articolo p,
.nw-doc-articoli > p,
.nw-doc-articoli > ul {
  margin: 0;
  max-width: 72ch;
  font: 400 var(--nlg-fs-body)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-doc-articolo p.nw-doc-in-preparazione { color: var(--nlg-text-3); font-style: italic; }

@media (max-width: 760px) {
  .nw-doc-indice { position: static; }
}

/* --------------------------------------------------------------------------
   12 · LA MAPPA DEL SITO — nessun layout nel libro: l'apertura del § 5.4.2
   e, come blocco, le sezioni della sitemap a righe (la stessa griglia
   delle righe del t02: il nome della sezione a sinistra, le pagine a
   destra). E' l'unica zona che si concretizza con una logica reale: un
   elenco.
   -------------------------------------------------------------------------- */

.nw-doc-mappa {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--nlg-linea) solid var(--nlg-border);
}

.nw-doc-mappa__sezione {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 4fr) minmax(0, 8fr));
  gap: var(--nlg-s-3) var(--nlg-gutter);
  align-items: baseline;
  padding: var(--nlg-s-5) 0;
  border-bottom: var(--nlg-linea) solid var(--nlg-border);
}

.nw-doc-mappa__nome {
  margin: 0;
  font: 600 var(--nlg-fs-body)/1.4 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-doc-mappa__voci {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--nlg-s-2) var(--nlg-s-5);
}

.nw-doc-mappa__voci a {
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
}

.nw-doc-mappa__voci a:hover { color: var(--nlg-text-1); }

.nw-doc-vuoto {
  margin: 0;
  font: 400 var(--nlg-fs-body)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-2);
}