/*
 * 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.7 (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.7.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.7.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.7: «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.7.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.7:
   «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.4.4
   (le rese sono le cinque varianti della Call to Action del brand book
   5.15.0, con le chiavi della 5.8.0: domain/touchpoint-rese.php)
   ====================================================================== */

/* — LA CALL TO ACTION (§ 5.4.4, guidelines/layout-cta.html). Il libro
     disegna il fondo, il testo, il posto e la cornice; dentro c'e' la zona
     touchpoint, chiusa, che riempie il sito. Le dichiarazioni sono quelle
     dei partial sezioni/nlg-t07-*.html, spostate su una classe; le misure
     senza un token (16rem, 26rem, il filo da 3 px, la modale da 440 px)
     sono quelle che i partial e la guida scrivono.

     Il blocco t07: il contenitore e il ritmo verticale del libro, sul fondo
     della pagina («Due colonne», «Modale»). */
.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;
}

/* La sezione generica (public/touchpoint/sezione), che non e' una
   variante: il titolo e la riga impilati, coi loro margini. */
.nw-tp__titolo--fascia { margin-bottom: var(--nlg-s-4); max-width: 40ch; }

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

/* La testa della variante: occhiello, titolo e riga, impilati. */
.nw-tp__testa {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-2);
  min-width: 0;
}

/* LA ZONA TOUCHPOINT. Nel libro e' una scatola col bordo tratteggiato e la
   scritta «zona touchpoint» (layout/5-4-4-*.html): «il tratteggio del
   libro segna il posto, in pagina non si vede». Qui la zona non ha bordo,
   fondo ne' misura propria: e' il contenitore di cio' che il touchpoint
   porta, e cio' che si vede e' solo quello. */
.nw-tp__zona {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-4);
}

/* La promessa: in mono, sotto il modulo («Fascia chiara»). */
.nw-tp__promessa {
  margin: 0;
  font: 400 var(--nlg-fs-caption)/var(--nlg-lh-caption) var(--nlg-font-mono);
  color: var(--nlg-text-3);
}

/* La promessa a sinistra («Due colonne»), sotto la riga. */
.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__testo + .nw-tp__azioni { margin-top: var(--nlg-s-4); }

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

/* — «Due colonne» (linguetta 1, nlg-t07-due-colonne): l'occhiello, il
     titolo e il testo a sinistra, la zona a destra, sulla griglia del
     libro, allineate al centro. Sul telefono `--nlg-g2` e' una colonna
     sola, e il testo — che nel documento viene prima — sale sopra la
     zona: nessun `order` lo rovescia. */
.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: center;
}

.nw-tp__lato { min-width: 0; }
.nw-tp__due-colonne > .nw-tp__testa { gap: var(--nlg-s-3); }

.nw-tp__occhiello {
  font: 500 var(--nlg-fs-caption)/var(--nlg-lh-caption) var(--nlg-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nlg-text-3);
}

/* — «Fascia chiara» (linguetta 2, nlg-t07-fascia-chiara): una fascia su
     surface-1 fra due bordi, il titolo e la riga, e sotto la zona a tutta
     larghezza. Il fondo e' suo. */
.nw-tp--fascia-modulo {
  background: var(--nlg-surface-1);
  border-top: var(--nlg-linea) solid var(--nlg-border);
  border-bottom: var(--nlg-linea) solid var(--nlg-border);
  padding: calc(var(--nlg-s-8) * var(--nlg-passo-k, 1)) 0;
}

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

/* — «Fascia di marca» (linguetta 3, nlg-t07-fascia-marca): il campo di
     marca, il titolo e la riga in chiaro a sinistra, la zona a destra, al
     piu' 26rem; quando il testo non ha piu' la sua base (`--nlg-testo-min`)
     la riga va a capo e la zona scende sotto. Il fondo e' suo. */
.nw-tp--fascia-marca {
  background: var(--nlg-action);
  padding: calc(var(--nlg-s-8) * var(--nlg-passo-k, 1)) 0;
}

.nw-tp__accanto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nlg-s-5) var(--nlg-s-7);
}

.nw-tp__accanto > .nw-tp__testa { flex: 1 1 var(--nlg-testo-min); }
.nw-tp__accanto > .nw-tp__zona { flex: 0 1 26rem; }
.nw-tp__titolo--marca { color: var(--nlg-text-onaction); }
.nw-tp__testo--marca { color: var(--nlg-text-onaction); }

/* — «In linea nel testo» (linguetta 4, nlg-t07-in-linea): nel corpo, alla
     misura del testo, un riquadro su surface-1 col filo d'accento a
     sinistra; la frase e la zona affiancate, che sotto i 16rem vanno a
     capo, e sul telefono la zona scende sotto. Il titolo e' un H2 alla
     misura di un H3. La misura e' 72ch: il partial la scrive come ripiego
     di una `--nlg-misura` che i token innestati non dichiarano, e un token
     che il libro non ha il sito non lo legge (BrandBookPinTest). */
.nw-tp--in-linea { padding: calc(var(--nlg-s-6) * var(--nlg-passo-k, 1)) 0; }

.nw-tp__riquadro {
  max-width: 72ch;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nlg-s-4) var(--nlg-s-5);
  padding: var(--nlg-s-5);
  border-left: 3px solid var(--nlg-action);
  background: var(--nlg-surface-1);
}

.nw-tp__riquadro > .nw-tp__testa,
.nw-tp__riquadro > .nw-tp__zona { flex: 1 1 16rem; }
.nw-tp__riquadro > .nw-tp__testa { gap: var(--nlg-s-1); }
.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; }
.nw-tp__testo--riga { font-size: var(--nlg-fs-body-sm); line-height: var(--nlg-lh-body-sm); max-width: none; }

/* — «Modale» (linguetta 5, nlg-t07-modale): il titolo a sinistra, il
     bottone che apre la modale a destra; la zona sta nella modale (la
     modale e' qui sotto, con le sue misure). */
.nw-tp__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nlg-s-5);
}

.nw-tp__riga > .nw-tp__testa { flex: 1 1 var(--nlg-testo-min); }

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

.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; }

/* Con lo script il nome del passo lo dice l'avanzamento («Passo 2 di 3 ·
   dove e quando»): la legenda resta ai lettori di schermo, e il nome non
   si legge due volte (§ 5.2.4 della 5.14.1, variante 2). Senza script e' il titolo di
   ogni riquadro, e si vede. */
.is-a-passi .nw-tp-passi__titolo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Le azioni a passi stanno a sinistra, sotto i campi, Indietro prima di
   Avanti, come nel mock della variante 2 del § 5.2.4 (5.14.1); sul telefono vanno a
   tutta larghezza, la primaria sopra (§ 4.1.4). */
@media (max-width: 719px) {
  .nw-tp-passi__azioni { flex-direction: column; align-items: stretch; }
  .nw-tp-passi__azioni > .nlg-btn--secondario { order: 1; }
}

/* — La riga delle date: le date consecutive affiancate anche sul telefono
     («le date restano affiancate», § 5.2.4), e il campo di testo che le
     precede accanto finche' c'entra, «Dove · Dal · Al» come nella pagina
     1:1 (200 px di base il campo, 140 ciascuna data). */
.nw-tp-riga {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nlg-s-4);
  min-width: 0;
}

.nw-tp-riga > .nlg-modulo__voce { flex: 1 1 var(--nlg-voce-min); min-width: 0; }

.nw-tp-date {
  display: flex;
  flex: 2 1 calc((var(--nlg-s-9) + var(--nlg-s-6) + var(--nlg-s-3)) * 2 + var(--nlg-s-4));
  gap: var(--nlg-s-4);
  min-width: 0;
}

.nw-tp-date > .nlg-modulo__voce { flex: 1 1 0; min-width: 0; }

.nlg-modulo--due > .nw-tp-riga { grid-column: 1 / -1; }

/* — Il titolo di un gruppo di campi (`gruppo`), come nel form delle landing
     di partner e agenti (§ 5.2.12, § 5.2.13): Archivo 600 in corpo piccolo,
     primo inchiostro, s-2 sopra; prende la riga intera. */
.nw-tp-gruppo-titolo {
  grid-column: 1 / -1;
  margin: var(--nlg-s-2) 0 0;
  font: 600 var(--nlg-fs-body-sm)/1.3 var(--nlg-font-ui);
  color: var(--nlg-text-1);
}

/* — 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; }
/* Il testo del touchpoint sopra il modulo, quando la pagina lo porta solo
   nella modale (le candidature in coda alla landing partner). */
.nw-tp-modale .nlg-modale__corpo > .nw-tp__testo { margin-bottom: var(--nlg-s-4); }

/* LA MODALE DELLA CALL TO ACTION (§ 5.4.4, «Modale», layout/5-4-4-e.html):
   440 px, e su telefono SALE DAL BASSO — attaccata al fondo dello schermo,
   a tutta larghezza, coi due angoli alti arrotondati e l'altezza del suo
   contenuto. Il libro, sul telefono, da' alla modale del § 4.3.3 l'altezza
   piena e nessun raggio (`--nlg-modale-h`, `--nlg-modale-r`): e' la scheda
   del punto di interesse, e la variante la vuole diversa. La portano le
   modali col modulo o coi recapiti di un touchpoint (`data-cta="modale"`),
   non le altre `nw-tp-modale` (le informazioni dei campi della scheda
   prodotto). Solo la modale aperta: quella mostrata in pagina senza
   script (qui sotto) resta una scheda nel flusso. */
.nw-tp-modale[data-cta="modale"] { width: min(440px, 100%); }

@media (max-width: 719px) {
  .nw-tp-modale[data-cta="modale"][open] {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    max-height: calc(100% - var(--nlg-s-7));
    margin: auto 0 0;
    border-width: var(--nlg-linea) 0 0;
    border-radius: var(--nlg-r-xl) var(--nlg-r-xl) 0 0;
  }
}

/* Il movimento solo a chi non ha chiesto di ridurlo. */
@media (max-width: 719px) and (prefers-reduced-motion: no-preference) {
  .nw-tp-modale[data-cta="modale"][open] { animation: nw-cta-sale var(--nlg-t-base) var(--nlg-ease); }
}

@keyframes nw-cta-sale {
  from { transform: translateY(100%); }
  to { transform: none; }
}

/* 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.6.2, pagina 1:1 «Scheda prodotto»; public/speciali/prodotto-box):
     tre campi in riga sopra quantita' e «Aggiungi al noleggio», che vanno a
     capo quando non entrano. Stanno nel modulo GET del box, che e' una riga:
     prendono la riga intera e la riga va a capo.
     Non e' la griglia `--nlg-g3` della pagina 1:1, 1fr 1fr 1.3fr: la 1:1
     scrive le date corte («11 ott») in un campo di testo, il sito usa il
     campo data nativo (padding di nlg-campo e icona del calendario), e in
     colonne da 94-121 px la data si leggeva tagliata («2026») a ogni
     larghezza da desktop e da tavoletta (collaudo del 2026-10-10, V02).
     Ogni data ha almeno 9rem e la Provincia, due lettere, resta stretta;
     dove le tre non entrano la Provincia scende sotto le date, e dove non
     entrano nemmeno le due date (meno di 9rem + s-3 + 9rem, 18.75rem) i tre
     campi vanno uno per riga, come la 1:1 sul telefono, invece di lasciare
     «Inizio» da solo e «Fine» accanto alla Provincia. */
.nw-scheda__aggiungi:has(> .nw-scheda__periodo) { flex-wrap: wrap; }

.nw-scheda__periodo {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nlg-s-3);
  container: nw-periodo / inline-size;
}

.nw-scheda__periodo > .nw-scheda__campo { flex: 1 1 9rem; }
.nw-scheda__periodo > .nw-scheda__campo:has(> [name="provincia"]) { flex: 0 1 5rem; }

@container nw-periodo (width < 18.75rem) {
  .nw-scheda__periodo > .nw-scheda__campo { flex-basis: 100%; }
}

.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), con l'immagine del
   brand ritagliata a destra (immagini/nlg-traversa.png), come la pagina 1:1. */
.nw-cs-apertura {
  position: relative;
  overflow: hidden;
  background: var(--nlg-action);
}

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

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

/* La figura delle due basi: la mappa della pagina 1:1 nel riquadro 4:3 sul
   fondo dell'immagine, col ripiego del libro (la trama sotto velo) sotto la
   tessera. La tessera nasce nascosta e senza indirizzo: la mostra
   js/incorporati.js col consenso, e allora i comandi del ripiego spariscono. */
.nw-cs-basi {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: var(--nlg-linea) solid var(--nlg-border);
  border-radius: var(--nlg-r-lg);
  background: var(--nlg-immagine-fondo);
}

.nw-cs-basi__ripiego {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--nlg-velo-ripiego), var(--nlg-velo-ripiego)), url(../brand/immagini/nlg-trama.png) center/cover no-repeat;
}

.nw-cs-basi__quadro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.nw-cs-basi__comandi {
  position: absolute;
  left: var(--nlg-s-3);
  right: var(--nlg-s-3);
  bottom: calc(var(--nlg-s-3) - 2px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--nlg-s-2);
}

.nw-cs-basi[data-consenso-stato="concesso"] .nw-cs-basi__comandi { display: none; }

/* Il fuoco sulla tessera (js/incorporati.js lo porta all'iframe quando la
   mappa e' concessa dal suo comando): l'anello dell'iframe resterebbe dentro
   l'overflow:hidden della figura, tagliato. Lo porta la figura. */
.nw-cs-basi:has(> .nw-cs-basi__quadro:focus-visible) { box-shadow: var(--nlg-focus-ring); }

/* La pillola sotto velo della pagina 1:1, come «Apri la mappa» del magazzino
   delle sedi: l'inchiostro resta quello sull'immagine anche al passaggio. */
.nw-cs-basi__comando {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--nlg-s-1) + 2px);
  padding: calc(var(--nlg-s-1) + 2px) calc(var(--nlg-s-3) - 2px);
  border: 0;
  border-radius: var(--nlg-r-mini);
  background: var(--nlg-immagine-velo);
  color: var(--nlg-immagine-ink);
  font: 600 var(--nlg-fs-body-sm)/1.3 var(--nlg-font-ui);
  text-decoration: none;
  cursor: pointer;
}

.nw-cs-basi__comando[hidden] { display: none; }
.nw-cs-basi__comando:hover { color: var(--nlg-immagine-ink); text-decoration: underline; }
.nw-cs-basi__comando:focus-visible { outline: none; box-shadow: var(--nlg-focus-ring); }

/* Le due card sede. Le misure delle card di questa pagina (sedi, valori,
   programmi, comandi della mappa) sono quelle della pagina 1:1 — 10, 18,
   20, 22 e 42 px, fuori dalla scala dei passi — composte dai token, non
   scritte a mano (collaudo del 2026-10-10, C41; aperti, «per il brand
   book»). */
.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: calc(var(--nlg-s-3) - 2px);
  padding: calc(var(--nlg-s-5) - var(--nlg-s-1));
  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); }
/* I recapiti sono i bottoni secondari piccoli della pagina 1:1 (36 px, 13 px). */
.nw-cs-sede__recapito.nlg-btn { height: var(--nlg-comando-h); padding: 0 var(--nlg-s-3); font-size: var(--nlg-fs-caption); }

/* 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: calc(var(--nlg-s-3) - 2px);
  padding: calc(var(--nlg-s-4) + 2px) calc(var(--nlg-s-4) + 2px) calc(var(--nlg-s-5) - var(--nlg-s-1));
  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) - 2px);
  height: calc(var(--nlg-tap-min) - 2px);
  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: calc(var(--nlg-s-3) - 2px);
  padding: calc(var(--nlg-s-5) - 2px);
  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: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.7): in mono, attenuato. */
.nw-compliance__sempre {
  font: 400 var(--nlg-fs-caption)/1.3 var(--nlg-font-mono);
  color: var(--nlg-text-3);
}

/* ── La Thank You (dal prototipo 3.7.0) ─────────────────────────────────
   Brand book 5.18.0 § 5.3.4 «Thank you page» (layout/5-3-4-a…d.html): la
   colonna del contenuto della pagina 1:1 — il segno di riuscita (48 px,
   verde su verde chiaro) col nome dell'azione in mono, il titolo a 52 px,
   la frase, i passi numerati (cerchi da 32 px sull'azione), il riquadro del
   centro (bordo, r-xl, superficie 1), i due bottoni —; la modale nella forma
   breve della pagina 1:1 (segno da 40 px, titolo a 30 px, «Ho capito»). Il
   riepilogo della richiesta, la colonna di destra, il sito non lo ha. */
.nw-grazie-pagina {
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: 56px var(--nlg-margine) 64px;
}
.nw-grazie {
  display: grid;
  gap: 28px;
  max-width: 760px;
}
.nw-grazie__immagine {
  margin: 0;
  border-radius: var(--nlg-r-lg);
  overflow: hidden;
  border: 1px solid var(--nlg-border);
}
.nw-grazie__immagine img { display: block; width: 100%; height: auto; }
.nw-grazie__testo { display: grid; gap: 28px; }
.nw-grazie__esito { display: flex; align-items: center; gap: 14px; margin: 0; }
.nw-grazie__segno {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--nlg-r-pill);
  background: var(--nlg-success-bg);
  color: var(--nlg-success);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nw-grazie__segno svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
.nw-grazie__occhiello,
.nw-grazie__etichetta {
  font: 500 13px var(--nlg-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nlg-text-3);
}
.nw-grazie__etichetta { font-size: 12px; }
.nw-grazie__testa { display: grid; gap: 14px; }
.nw-grazie__titolo {
  margin: 0;
  font: 800 52px/1.04 var(--nlg-font-ui);
  letter-spacing: -0.03em;
  color: var(--nlg-text-1);
  text-wrap: balance;
}
.nw-grazie__paragrafo {
  margin: 0;
  max-width: 54ch;
  font: 400 var(--nlg-fs-body-lg)/1.5 var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}
.nw-grazie__passi { display: grid; gap: 18px; }
.nw-grazie__elenco { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.nw-grazie__elenco li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 16px; line-height: 1.5; }
.nw-grazie__elenco li > span:last-child { padding-top: 4px; }
.nw-grazie__numero {
  width: 32px;
  height: 32px;
  border-radius: var(--nlg-r-pill);
  background: var(--nlg-action);
  color: var(--nlg-text-onaction);
  font: 700 14px/32px var(--nlg-font-ui);
  text-align: center;
}
.nw-grazie__centro {
  display: grid;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
  background: var(--nlg-surface-1);
}
.nw-grazie__centro-nome { font: 800 20px/1.2 var(--nlg-font-ui); }
.nw-grazie__centro-frase { font-size: 14.5px; line-height: 1.5; color: var(--nlg-text-2); }
.nw-grazie__centro-azioni { display: flex; gap: 8px; flex-wrap: wrap; }
.nw-grazie__piccolo { height: 40px; padding: 0 14px; font-size: 14px; }
.nw-grazie__azioni { display: flex; gap: 10px 14px; flex-wrap: wrap; margin: 0; }
.nw-grazie__nota { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--nlg-text-2); }
.nw-grazie__piede { margin: 0; font-size: 14px; color: var(--nlg-text-2); }

/* La modale: la forma breve della pagina 1:1. */
.nw-grazie-modale .nw-grazie,
.nw-grazie--modale,
.nw-grazie--modale .nw-grazie__testo { gap: 22px; }
.nw-grazie--modale .nw-grazie__segno { width: 40px; height: 40px; }
.nw-grazie--modale .nw-grazie__occhiello { font-size: 12px; letter-spacing: 0.12em; }
.nw-grazie--modale .nw-grazie__testa { gap: 10px; }
.nw-grazie--modale .nw-grazie__titolo { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; padding-right: 40px; }
.nw-grazie--modale .nw-grazie__paragrafo { font-size: 16px; }
.nw-grazie__chiusura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--nlg-border);
}
.nw-grazie__chiusura form { margin: 0; }
.nw-grazie__indirizzo { font-size: var(--nlg-fs-body-sm); }

@media (max-width: 719px) {
  .nw-grazie-pagina { padding: 32px var(--nlg-margine) 40px; }
  .nw-grazie__titolo { font-size: 34px; line-height: 1.08; }
  .nw-grazie--modale .nw-grazie__titolo { font-size: 24px; }
}

/* LA LARGHEZZA IN PERCENTUALE DELLA RIGA (prototipo 3.9.1). Un campo che il
   pannello dichiara al 33% o al 75% porta `nw-tp-voce--percento` e la sua
   misura in `--nw-tp-larghezza` (public/touchpoint/campo). Le rese del libro
   — la colonna `.nlg-modulo` e le due colonne `.nlg-modulo--due` — non sanno
   dividere una riga in parti qualunque: quando portano un campo in
   percentuale diventano una riga che va a capo, con gli stessi intervalli,
   e ogni voce tiene la sua misura — la riga intera nella colonna, la meta'
   nelle due colonne, la riga intera le voci intere e le azioni. Il
   componente del libro non si ridefinisce: si legge nel contesto del modulo
   di un touchpoint (`form[data-touchpoint]`). Sul telefono ogni campo torna
   alla riga intera, come le due colonne del libro. */
/* Un passo che non e' quello corrente resta nascosto: la riga a capo non
   vale per lui (il passo e' anche un `.nlg-modulo`, e senza l'esclusione
   questa regola, piu' specifica, lo rimostrava accanto al passo corrente). */
:is(form[data-touchpoint], form[data-touchpoint] *):is(.nlg-modulo, .nlg-modulo--due):not(.nlg-modulo--in-linea):not(.is-a-passi .nw-tp-passi__passo:not(.is-corrente)):has(> .nw-tp-voce--percento) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--nlg-gutter);
}
:is(form[data-touchpoint], form[data-touchpoint] *).nlg-modulo:not(.nlg-modulo--due, .nlg-modulo--in-linea):has(> .nw-tp-voce--percento) > :not(.nw-tp-voce--percento) {
  flex: 0 0 100%;
  min-width: 0;
}
:is(form[data-touchpoint], form[data-touchpoint] *).nlg-modulo--due:has(> .nw-tp-voce--percento) > :not(.nw-tp-voce--percento) {
  flex: 0 0 calc(50% - var(--nlg-gutter) / 2);
  min-width: 0;
}
:is(form[data-touchpoint], form[data-touchpoint] *).nlg-modulo--due:has(> .nw-tp-voce--percento) > :is(.nlg-modulo__intera, .nlg-modulo__azioni, .nw-tp-riga, .nw-tp-avviso, .nw-tp__promessa) {
  flex-basis: 100%;
}
:is(form[data-touchpoint], form[data-touchpoint] *):is(.nlg-modulo, .nlg-modulo--due, .nlg-modulo--in-linea) > .nw-tp-voce--percento {
  flex: 1 1 calc(var(--nw-tp-larghezza, 50%) - var(--nlg-gutter));
}
@media (max-width: 719px) {
  :is(form[data-touchpoint], form[data-touchpoint] *):is(.nlg-modulo, .nlg-modulo--due, .nlg-modulo--in-linea) > .nw-tp-voce--percento {
    flex-basis: 100%;
  }
}