/*
 * MODULI — il banner del consenso, i moduli e le rese dei touchpoint, la
 * pagina «Chi siamo». Brand book 5.8.0 di Noleggiando.
 *
 * COSA STA QUI E COSA NO. I componenti `.nlg-*` sono del brand book
 * (brand/components.css) e qui si USANO, non si riscrivono: una classe
 * `.nlg-*` nuda in questo foglio sarebbe una copia del componente, e una
 * copia non segue piu' il padre il giorno dell'aggiornamento. Qui stanno le
 * regole di LAYOUT proprie del sito, su classi `nw-*`, e gli adattamenti di
 * un componente nel proprio contesto (`.nw-consenso .nlg-modale`). Ogni
 * misura e ogni colore sono token del libro: nessun valore scritto a mano.
 *
 * Le pagine 1:1 del libro portano gli stili in linea; le regole qui sotto
 * sono quelle stesse dichiarazioni, spostate su una classe.
 */

/* ======================================================================
   1 · IL BANNER DEL CONSENSO — § 5.9 (guidelines/layout-consenso.html)
   ======================================================================

   Un elemento solo con due forme, e la forma la dice `data-variante`, non
   una classe: consent.js cambia soltanto quell'attributo quando il
   visitatore apre le preferenze (CHANGELOG-PROTOTIPO 3.0.0, passo 5).

   La MODALE (§ 5.9.1, «Al centro, come modale») vale per ogni variante che
   non sia la barra: e' la variante delle preferenze, e un nome che la vista
   non conosce ricade su di lei. La BARRA (§ 5.9.2, «Barra in basso») e'
   l'eccezione dichiarata da `[data-variante="landing-barra"]`.

   L'attributo `hidden` lo tiene nascosto finche' consent.js non lo apre: la
   guardia `[hidden] { display: none !important }` sta in site.css, e qui
   nessuna regola di display deve batterla — percio' ogni display e' scritto
   su `:not([hidden])`. */

/* — La modale: il velo sulla pagina, la scheda al centro. Il velo c'e'
     perche' qui il sito non carica niente prima della scelta (anatomia del
     § 5.9: «al centro col velo se il sito non carica niente prima»). */
.nw-consenso:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--nlg-margine);
  background: var(--nlg-scrim);
  overflow-y: auto;
}

/* La scheda e' la modale del § 4.3.3, aperta senza <dialog>: il banner non
   puo' essere un <dialog> perche' la barra non e' un dialogo, e consent.js
   lo mostra con `hidden`. Della modale si prende la cornice (bordo, raggio,
   ombra, larghezza) e si da' il ritmo interno del banner del libro. */
.nw-consenso .nw-consenso__scheda {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-4);
  max-height: 100%;
  padding: var(--nlg-s-5);
  overflow-y: auto;
}

.nw-consenso__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
}

.nw-consenso__titolo { margin: 0; }

.nw-consenso__testo,
.nw-consenso__riga {
  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;
}

/* Il messaggio del cancello di invio: un avviso del § 4.1.7, per parole. */
.nw-consenso__avviso {
  margin: 0;
  padding: var(--nlg-s-3) var(--nlg-s-4);
  border: var(--nlg-linea) solid var(--nlg-info-border);
  border-radius: var(--nlg-r-md);
  background: var(--nlg-info-bg);
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-1);
}

/* Le preferenze, fra due fili, a tre colonne dove ci stanno (il libro le
   mette in griglia 1fr 1fr 1fr su desktop, una sotto l'altra su telefono). */
.nw-consenso .nw-consenso__preferenze {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--nlg-voce-min), 100%), 1fr));
  gap: 0 var(--nlg-s-4);
  padding: var(--nlg-s-1) 0;
  border-top: var(--nlg-linea) solid var(--nlg-border);
  border-bottom: var(--nlg-linea) solid var(--nlg-border);
}

.nw-consenso__categoria {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nw-consenso .nw-consenso__voce {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nlg-s-3);
  width: 100%;
  min-height: var(--nlg-tap-min);
  position: relative;
}

.nw-consenso__nome {
  font: 600 var(--nlg-fs-body-sm)/1.3 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-consenso__nome--gruppo { display: block; padding-top: var(--nlg-s-3); }
.nw-consenso__nome--sotto { font-weight: 400; color: var(--nlg-text-2); }
.nw-consenso__sotto { display: flex; flex-direction: column; padding-left: var(--nlg-s-3); }

.nw-consenso__fisso {
  font: 400 var(--nlg-fs-caption)/1.3 var(--nlg-font-mono);
  color: var(--nlg-text-3);
}

/* L'INTERRUTTORE. Il controllo e' l'input (role="switch"), tolto alla vista
   ma non al lettore di schermo ne' alla tastiera; la traccia del libro gli
   sta accanto e ne segue lo stato. Nessuno nasce acceso. */
.nw-consenso__interruttore {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

.nw-consenso .nlg-interruttore__traccia { flex: none; }

.nw-consenso__interruttore:checked + .nlg-interruttore__traccia { background: var(--nlg-action); }
.nw-consenso__interruttore:checked + .nlg-interruttore__traccia::after { transform: translateX(var(--nlg-s-4)); }
.nw-consenso__interruttore:focus-visible + .nlg-interruttore__traccia { box-shadow: var(--nlg-focus-ring); }

/* I sempre attivi: la traccia accesa e attenuata, com'e' nel libro. */
.nw-consenso .nw-consenso__traccia--fissa { background: var(--nlg-action); opacity: .6; }
.nw-consenso .nw-consenso__traccia--fissa::after { transform: translateX(var(--nlg-s-4)); }

/* Le tre azioni: «Salva le scelte» primario, poi le due scelte dello stesso
   peso. Su telefono una sotto l'altra, a tutta larghezza. */
.nw-consenso__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nlg-s-2);
}

.nw-consenso__legale {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nlg-s-2);
  font: 400 var(--nlg-fs-caption)/var(--nlg-lh-caption) var(--nlg-font-text);
  color: var(--nlg-text-3);
}

.nw-consenso__legale a { color: var(--nlg-blue-ink); }

/* Il collegamento alle preferenze della barra: un bottone vestito da
   collegamento, dentro la frase. */
.nw-consenso__collegamento {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.nw-consenso__collegamento:focus-visible { outline: none; box-shadow: var(--nlg-focus-ring); border-radius: var(--nlg-r-mini); }

/* Nella modale la riga e il collegamento della barra non ci sono, e
   «Accetta» si chiama col nome intero. Un'etichetta per forma, e non un
   pezzo di parola nascosto: il nome che il lettore di schermo legge e'
   quello che si vede. */
.nw-consenso:not([data-variante="landing-barra"]) :is(.nw-consenso__riga, .nw-consenso__solo-barra) { display: none; }

@media (max-width: 600px) {
  .nw-consenso:not([hidden]):not([data-variante="landing-barra"]) { align-items: flex-end; padding: 0; }
  .nw-consenso:not([data-variante="landing-barra"]) .nw-consenso__scheda { border-radius: var(--nlg-r-xl) var(--nlg-r-xl) 0 0; }
  .nw-consenso:not([data-variante="landing-barra"]) .nw-consenso__azioni { flex-direction: column; }
  .nw-consenso:not([data-variante="landing-barra"]) .nw-consenso__azioni .nlg-btn { width: 100%; }
}

/* — La barra (§ 5.9.2, variante 1): una barra in inchiostro pieno
     appoggiata in basso, la riga e le due scelte. Niente velo: la pagina
     resta usabile, e la barra non copre l'apertura ne' l'azione. */
.nw-consenso[data-variante="landing-barra"]:not([hidden]) {
  inset: auto var(--nlg-margine) var(--nlg-s-4);
  display: block;
  padding: 0;
  background: transparent;
  overflow: visible;
}

.nw-consenso[data-variante="landing-barra"] .nw-consenso__scheda {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nlg-s-3);
  width: auto;
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: var(--nlg-s-3) var(--nlg-s-4);
  border: 0;
  border-radius: var(--nlg-r-lg);
  background: var(--nlg-text-1);
  color: var(--nlg-canvas);
}

.nw-consenso[data-variante="landing-barra"] .nw-consenso__riga { color: var(--nlg-canvas); }

.nw-consenso[data-variante="landing-barra"] :is(.nw-consenso__titolo, .nw-consenso__testo, .nw-consenso__preferenze, .nw-consenso__salva, .nw-consenso__legale, .nw-consenso__solo-modale) {
  display: none;
}

.nw-consenso[data-variante="landing-barra"] .nw-consenso__corpo { flex: 1 1 var(--nlg-testo-min); }

/* Le due scelte della barra hanno lo STESSO PESO (regola del § 5.9:
   «il rifiuto piu' piccolo dell'accettazione» e' vietato): stesso bordo,
   stessa misura, l'inchiostro della barra. */
.nw-consenso[data-variante="landing-barra"] .nw-consenso__scelta {
  border-color: color-mix(in srgb, var(--nlg-canvas) 50%, transparent);
  background: transparent;
  color: var(--nlg-canvas);
}

.nw-consenso[data-variante="landing-barra"] .nw-consenso__scelta:hover { border-color: var(--nlg-canvas); }

@media (max-width: 600px) {
  .nw-consenso[data-variante="landing-barra"]:not([hidden]) { inset: auto 0 0; }
  .nw-consenso[data-variante="landing-barra"] .nw-consenso__scheda { border-radius: var(--nlg-r-lg) var(--nlg-r-lg) 0 0; }
  .nw-consenso[data-variante="landing-barra"] .nw-consenso__azioni { width: 100%; }
  .nw-consenso[data-variante="landing-barra"] .nw-consenso__scelta { flex: 1 1 0; }
}

/* ======================================================================
   2 · I MODULI E LE RESE DEI TOUCHPOINT — § 4.1.4, § 4.3.3, § 5.6
   ====================================================================== */

/* — Il blocco t07: il contenitore e il ritmo verticale del libro. */
.nw-tp {
  background: var(--nlg-canvas);
  padding: calc(var(--nlg-s-9) * var(--nlg-passo-k, 1)) 0;
}

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

.nw-tp__titolo {
  margin: 0;
  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);
  max-width: 34ch;
  text-wrap: pretty;
}

.nw-tp__titolo--fascia { margin-bottom: var(--nlg-s-4); max-width: 40ch; }
.nw-tp__titolo--promessa { margin-bottom: var(--nlg-s-4); max-width: 28ch; }
.nw-tp__titolo--modale { margin-bottom: var(--nlg-s-2); }
.nw-tp__titolo--riga { font-size: var(--nlg-fs-h3); line-height: var(--nlg-lh-h3); letter-spacing: var(--nlg-ls-h3); max-width: none; }

/* Il testo del touchpoint e' HTML scritto dal pannello: puo' portare piu'
   paragrafi, e si veste come la riga del libro. */
.nw-tp__testo {
  font: 400 var(--nlg-fs-body)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-2);
  max-width: 60ch;
}

.nw-tp__testo > :first-child { margin-top: 0; }
.nw-tp__testo > :last-child { margin-bottom: 0; }
.nw-tp__testo--fascia { margin-bottom: var(--nlg-s-5); max-width: 72ch; }
.nw-tp__testo--promessa { margin-bottom: var(--nlg-s-3); max-width: 44ch; }
.nw-tp__testo--riga { margin-top: var(--nlg-s-1); font-size: var(--nlg-fs-body-sm); line-height: var(--nlg-lh-body-sm); max-width: none; }

/* La promessa: in mono, sotto il modulo o sopra l'azione. */
.nw-tp__promessa {
  margin: 0;
  font: 400 var(--nlg-fs-caption)/var(--nlg-lh-caption) var(--nlg-font-mono);
  color: var(--nlg-text-3);
}

.nw-tp__promessa--sotto { margin-top: var(--nlg-s-3); }

.nw-tp__promessa-lato {
  margin: 0;
  max-width: 44ch;
  font: 400 var(--nlg-fs-body)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-2);
}

.nw-tp__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nlg-s-3);
}

.nw-tp__azioni .nw-tp__azioni { display: contents; }
.nw-tp__modulo + .nw-tp__azioni,
.nw-tp__promessa--sotto + .nw-tp__azioni,
.nw-tp__testo + .nw-tp__azioni { margin-top: var(--nlg-s-4); }

.nw-tp__modulo--sotto { margin-top: var(--nlg-s-6); }

/* Le colonne delle varianti: due colonne (promessa e modulo), la riga fra
   due fili (in linea), la riga col bottone (le due modali). */
.nw-tp__due-colonne {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 5fr) minmax(0, 7fr));
  gap: var(--nlg-s-7) var(--nlg-gutter);
  align-items: start;
}

.nw-tp__lato { min-width: 0; }
.nw-tp__lato .nw-tp__azioni { margin-top: var(--nlg-s-4); }
.nw-tp__lato--testo { flex: 1 1 var(--nlg-testo-min); }

.nw-tp__fili,
.nw-tp__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nlg-s-5);
}

.nw-tp__fili {
  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-tp__fili .nw-tp__lato .nw-tp__azioni,
.nw-tp__riga .nw-tp__lato .nw-tp__azioni { margin-top: 0; }

.nw-tp__card { margin-top: 0; }
.nw-tp__card--sotto,
.nw-tp__card--marca { margin-top: var(--nlg-s-5); }

/* La fascia di marca: il campo di marca e' suo, il testo si inverte. */
.nw-tp--fascia-marca {
  background: var(--nlg-action);
  padding: calc(var(--nlg-s-8) * var(--nlg-passo-k, 1)) 0;
}

.nw-tp__pila { display: flex; flex-direction: column; gap: var(--nlg-s-4); }
.nw-tp__titolo--marca { color: var(--nlg-text-onaction); }
.nw-tp__testo--marca { color: var(--nlg-text-onaction); font-size: var(--nlg-fs-body-lg); }
.nw-tp__pila .nw-tp__azioni { margin-top: 0; }

/* — I pezzi del modulo che il libro non porta come componente. */

/* LA RIGA IN LINEA. Nel libro il modulo in linea e' `.nlg-modulo
   .nlg-modulo--in-linea`, e la modifica non riporta la direzione a riga: resta
   la colonna di `.nlg-modulo`, e i campi si impilano allineati a destra. Qui
   si rimette la riga nel contesto della fascia, senza toccare il componente;
   la correzione va chiesta a monte, al brand book. Un campo lungo o una
   casella prendono la riga intera. */
.nw-tp__modulo .nlg-modulo--in-linea { flex-direction: row; }

/* Nel contesto della fascia anche questa: una classe del libro non si
   ridefinisce nuda, fuori da un contesto `nw-`. */
.nw-tp__modulo .nlg-modulo--in-linea > :is(.nlg-modulo__intera, .nw-tp-avviso) { flex-basis: 100%; }

.nw-tp-facoltativo {
  font-weight: 400;
  color: var(--nlg-text-3);
}

.nw-tp-casella {
  display: flex;
  align-items: flex-start;
  gap: var(--nlg-s-2);
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  color: var(--nlg-text-2);
  cursor: pointer;
}

.nw-tp-casella input {
  flex: none;
  width: var(--nlg-s-5);
  height: var(--nlg-s-5);
  min-height: 0;
  margin: 0;
  accent-color: var(--nlg-action);
}

.nw-tp-casella__informativa { margin-left: var(--nlg-s-2); color: var(--nlg-blue-ink); }

.nw-tp-gruppo {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.nw-tp-gruppo > .nlg-etichetta { padding: 0; }
.nw-tp-gruppo__scelte { display: flex; flex-wrap: wrap; gap: var(--nlg-s-2) var(--nlg-s-5); }

.nw-tp-azioni--fine { justify-content: flex-end; }

/* — Il modulo a passi: i riquadri e l'avanzamento che js/modulo-passi.js
     scopre. Senza script i riquadri stanno uno sotto l'altro, separati da
     un filo; con lo script si vede quello corrente. L'avanzamento e'
     l'indicatore a segmenti del libro (`.nlg-passi`, § 3.2.2): pila,
     barra e segmenti sono suoi, e qui non si ridisegnano. */
.nw-tp-passi { display: flex; flex-direction: column; gap: var(--nlg-s-5); }

.nw-tp-passi__passo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.nw-tp-passi__passo + .nw-tp-passi__passo {
  padding-top: var(--nlg-s-5);
  border-top: var(--nlg-linea) solid var(--nlg-border);
}

.nw-tp-passi__titolo {
  padding: 0;
  margin: 0 0 var(--nlg-s-2);
  font: 600 var(--nlg-fs-h4)/1.3 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

.nw-tp-passi__dove {
  margin: 0;
  font: 500 var(--nlg-fs-overline)/1.4 var(--nlg-font-mono);
  letter-spacing: var(--nlg-ls-overline);
  text-transform: uppercase;
  color: var(--nlg-text-3);
}

.nw-tp-passi__azioni { justify-content: flex-end; }

.is-a-passi .nw-tp-passi__passo:not(.is-corrente) { display: none; }
.is-a-passi .nw-tp-passi__passo + .nw-tp-passi__passo { padding-top: 0; border-top: 0; }

/* — La modale dei touchpoint: <dialog class="nlg-modale">, il velo e la
     cornice li da' il libro. Qui solo che il corpo scorra dentro lo schermo. */
.nw-tp-modale[open] { display: flex; flex-direction: column; }
.nw-tp-modale .nlg-modale__corpo { min-height: 0; }

/* SENZA SCRIPT LA MODALE STA IN PAGINA. Il comando che la apre e'
   un'ancora verso il suo id (rese/parti/azioni): con lo script js/modale.js
   la intercetta e chiama showModal(), e l'indirizzo non cambia; senza, il
   <dialog> chiuso diventa il bersaglio dell'indirizzo (`:target`) e si
   mostra qui, nel flusso, come una scheda. Lo stesso per la modale
   rifiutata (`data-apri-subito`) quando lo script non c'e' (`.nw-js` lo
   mette js/sito-menu.js): gli errori stanno dentro, e devono vedersi.
   Si sceglie `:target` e non «tutte le modali senza script» perche'
   `.nw-js` arriva con uno script differito, e fino a quel momento ogni
   pagina con una modale la mostrerebbe in pagina per un istante.
   Chiusura e «Annulla» chiudono un <dialog> aperto: qui non lo e', e si
   tolgono. */
.nw-tp-modale:target:not([open]),
html:not(.nw-js) .nw-tp-modale[data-apri-subito]:not([open]) {
  display: block;
  position: static;
  inset: auto;
  max-width: none;
  max-height: none;
  margin: var(--nlg-s-5) auto 0;
  box-shadow: none;
}

.nw-tp-modale:not([open]) [data-chiude] { display: none; }

/* — Inizio, fine e provincia del box «Noleggia …» della scheda prodotto
     (§ 5.8.2, pagina 1:1 «Scheda prodotto»; public/speciali/prodotto-box):
     tre campi in riga sopra quantita' e «Aggiungi al noleggio», con la
     griglia della pagina 1:1 (`--nlg-g3`, che sul telefono va in colonna).
     Stanno nel modulo GET del box, che e' una riga: prendono la riga
     intera e la riga va a capo. */
.nw-scheda__aggiungi:has(> .nw-scheda__periodo) { flex-wrap: wrap; }

.nw-scheda__periodo {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: var(--nlg-g3, 1fr 1fr 1.3fr);
  gap: var(--nlg-s-3);
}

.nw-scheda__campo {
  display: flex;
  flex-direction: column;
  gap: calc(var(--nlg-s-1) * 1.5);
  min-width: 0;
}

.nw-tp-recapiti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-4);
}

.nw-tp-recapiti__sede {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-1);
  padding-top: var(--nlg-s-3);
  border-top: var(--nlg-linea) solid var(--nlg-border);
}

.nw-tp-recapiti__nome { font: 700 var(--nlg-fs-body)/1.3 var(--nlg-font-ui); color: var(--nlg-text-1); }
.nw-tp-recapiti__dove { font: 400 var(--nlg-fs-body-sm)/1.4 var(--nlg-font-text); color: var(--nlg-text-2); }
.nw-tp-recapiti .nw-tp-recapiti__recapito { align-self: flex-start; padding: 0; font-family: var(--nlg-font-mono); }

/* ======================================================================
   3 · CHI SIAMO — § 5.2.2, variante 1 «Le due sedi · fascia con immagine»
   ====================================================================== */

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

/* L'apertura sul campo di marca (nlg-a-fascia-immagine). La figura a destra
   arriva con l'innesto delle immagini del libro. */
.nw-cs-apertura {
  position: relative;
  overflow: hidden;
  background: var(--nlg-action);
}

.nw-cs-apertura__contenuto {
  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: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
}

.nw-cs-apertura .nw-cs-apertura__occhiello { margin: 0; color: var(--nlg-text-onaction); }

.nw-cs-apertura__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-cs-apertura__testo {
  margin: 0;
  max-width: 48ch;
  font: 400 var(--nlg-fs-body-lg)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-onaction);
  text-wrap: pretty;
}

/* I blocchi: il fondo alterna canvas e surface-2, come nella pagina 1:1. */
.nw-cs-blocco {
  background: var(--nlg-canvas);
  padding: calc(var(--nlg-s-9) * var(--nlg-passo-k, 1)) 0;
}

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

.nw-cs-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-cs-titolo--stretto { margin-bottom: 0; }

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

.nw-cs-paragrafi p,
.nw-cs-attacco,
.nw-cs-chiusa,
.nw-cs-premessa {
  margin: 0;
  font: 400 var(--nlg-fs-body)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}

.nw-cs-attacco { margin: var(--nlg-s-6) 0 var(--nlg-s-4); }
.nw-cs-chiusa { margin-top: var(--nlg-s-6); max-width: 72ch; }
.nw-cs-premessa { max-width: 72ch; margin-bottom: var(--nlg-s-6); }

/* t01: il testo e la figura, che vanno a capo sotto la colonna minima. */
.nw-cs-t01 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--nlg-s-7) * var(--nlg-gap-k, 1)) var(--nlg-gutter);
}

.nw-cs-t01__testo {
  flex: 1 1 min(var(--nlg-colonna-min), 100%);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-4);
}

.nw-cs-t01__testo .nlg-occhiello { margin: 0; }

.nw-cs-t01__figura {
  flex: 1 1 min(var(--nlg-colonna-min), 100%);
  min-width: 0;
  margin: 0;
}

.nw-cs-t01__didascalia {
  margin-top: var(--nlg-s-2);
  font: 400 var(--nlg-fs-caption)/var(--nlg-lh-caption) var(--nlg-font-mono);
  color: var(--nlg-text-3);
}

/* Il riquadro delle basi al posto della mappa: le filiali della fotografia,
   nella cornice della figura del libro (4:3, raggio, filo). Il fondo e' una
   superficie e non quello dell'immagine (`--nlg-immagine-fondo`, scuro): qui
   sopra c'e' testo, non una fotografia. */
.nw-cs-basi {
  display: flex;
  align-items: center;
  aspect-ratio: 4 / 3;
  padding: var(--nlg-s-5);
  box-sizing: border-box;
  border: var(--nlg-linea) solid var(--nlg-border);
  border-radius: var(--nlg-r-lg);
  background: var(--nlg-surface-2);
}

.nw-cs-basi__elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-4);
}

.nw-cs-basi__base { display: flex; flex-direction: column; gap: var(--nlg-s-1); }
.nw-cs-basi__nome { font: 700 var(--nlg-fs-h4)/1.3 var(--nlg-font-ui); color: var(--nlg-text-1); }
.nw-cs-basi__dove { font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-mono); color: var(--nlg-text-2); }

/* Le due card sede. */
.nw-cs-sedi {
  display: grid;
  grid-template-columns: var(--nlg-g2, 1fr 1fr);
  gap: var(--nlg-s-4);
  margin-top: var(--nlg-s-7);
}

.nw-cs-sede {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  padding: var(--nlg-s-5);
  border: var(--nlg-linea) solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
  background: var(--nlg-surface-1);
}

.nw-cs-sede__ruolo {
  font: 400 var(--nlg-fs-caption)/1.3 var(--nlg-font-mono);
  letter-spacing: var(--nlg-ls-overline);
  text-transform: uppercase;
  color: var(--nlg-text-3);
}

.nw-cs-sede .nw-cs-sede__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);
  text-decoration: none;
}

.nw-cs-sede__riga {
  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-cs-sede__recapiti { display: flex; flex-wrap: wrap; gap: var(--nlg-s-2); margin-top: var(--nlg-s-1); }

/* Le righe: nome a sinistra, testo a destra (4/8), fra due fili. */
.nw-cs-righe {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--nlg-linea) solid var(--nlg-border);
}

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

.nw-cs-righe--faq .nw-cs-righe__riga { padding: var(--nlg-s-5) 0; align-items: start; }

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

.nw-cs-righe__testo,
.nw-cs-righe__risposta p {
  margin: 0;
  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;
}

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

/* I tre valori, in card con l'icona. */
.nw-cs-valori {
  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-cs-valore {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  padding: var(--nlg-s-4) var(--nlg-s-4) var(--nlg-s-5);
  border: var(--nlg-linea) solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
  background: var(--nlg-surface-1);
}

.nw-cs-valore__icona {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--nlg-tap-min) - var(--nlg-s-1));
  height: calc(var(--nlg-tap-min) - var(--nlg-s-1));
  border: var(--nlg-linea) solid var(--nlg-info-border);
  border-radius: var(--nlg-r-md);
  background: var(--nlg-info-bg);
  color: var(--nlg-blue-ink);
}

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

.nw-cs-valore__nome { font: 700 var(--nlg-fs-body-lg)/1.3 var(--nlg-font-ui); color: var(--nlg-text-1); }
.nw-cs-valore__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; }

/* I due programmi: card-collegamento. */
.nw-cs-programmi {
  display: grid;
  grid-template-columns: var(--nlg-g2, 1fr 1fr);
  gap: var(--nlg-s-4);
}

.nw-cs-programmi .nw-cs-programma {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  padding: var(--nlg-s-5);
  border: var(--nlg-linea) solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
  background: var(--nlg-surface-1);
  color: var(--nlg-text-1);
  text-decoration: none;
}

.nw-cs-programmi .nw-cs-programma:hover { border-color: var(--nlg-action); }
.nw-cs-programmi .nw-cs-programma:focus-visible { outline: none; box-shadow: var(--nlg-focus-ring); }

.nw-cs-programma .nw-cs-programma__occhiello { margin: 0; color: var(--nlg-text-3); }
.nw-cs-programma__titolo { font: 700 var(--nlg-fs-h3)/var(--nlg-lh-h3) var(--nlg-font-ui); letter-spacing: var(--nlg-ls-h3); }
.nw-cs-programma__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; }
.nw-cs-programma__vai { margin-top: auto; font: 600 var(--nlg-fs-body-sm)/1.3 var(--nlg-font-ui); color: var(--nlg-blue-ink); }

/* ======================================================================
   4 · L'ELENCO DELLE CATEGORIE NELL'INFORMATIVA — [[consenso:categorie]]
   ====================================================================== */

/* «Sempre attivi» come lo dice il banner (§ 5.9): in mono, attenuato. */
.nw-compliance__sempre {
  font: 400 var(--nlg-fs-caption)/1.3 var(--nlg-font-mono);
  color: var(--nlg-text-3);
}