/**
 * Noleggiando.com Website — il livello applicativo del sito pubblico.
 *
 * Due strati, nell'ordine in cui stanno qui sotto:
 *
 *  - LA BASE e le parti di pagina che il brand book 5.8.0 non disegna e il
 *    sito ancora usa — la resa sobria dei blocchi ERP, la pagina di
 *    anteprima, l'area riservata, i segnaposto dei documenti, le domande di
 *    una scheda prodotto, il breadcrumb e le figlie delle proposte —:
 *    leggono i ruoli del ponte (--sw-*, public/css/ponte.css, scritti coi
 *    token del libro);
 *  - LA CORNICE 5.8.0 — testata, mega menu, piede, accesso, pagine
 *    automatiche —: legge i token del libro (--nlg-*) direttamente.
 *
 * I componenti del libro (.nlg-*) stanno in public/brand/components.css e
 * qui non si ridichiarano. Nessun colore letterale. Le pagine di sistema e
 * speciali scrivono i propri stili nei propri fogli (pagine-*.css), i
 * moduli e il banner del consenso in moduli.css.
 *
 * Dal giro della cornice 5.8.0 qui non c'e' piu' la forma vecchia — la
 * testata, il piede e il mega menu del kit 4.0, il selettore del kit, il
 * banner del consenso, il repertorio delle sezioni, i moduli provvisori, il
 * vetro reattivo, la pagina di fermo e il 404 col gioco —: nessuna vista la
 * usava piu', e una regola che nessun markup accende e' un secondo disegno
 * che aspetta solo di tornare per sbaglio.
 */

/* ═══════════════════════ Base ═══════════════════════ */

/* `hidden` deve vincere su qualunque display dichiarato. Il display:none
   del browser sta nel foglio di user agent, che qualsiasi regola d'autore
   batte: senza questa riga un elemento che dichiara un display — un
   `.nlg-btn`, che e' `inline-flex` — non si nasconde piu' con l'attributo,
   e i bottoni Indietro/Avanti del modulo a passi (js/modulo-passi.js)
   resterebbero a schermo tutti e due. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

/* Sotto la testata. La testata e' un elemento fermo (§ 5.1.1, `.nlg-header`
   e' sticky): allo scorrimento si compatta a 48 px, col suo filo. Cio' che
   si ferma accanto a lei — il riepilogo del preventivatore, l'indice dei
   Termini — e cio' a cui porta un'ancora parte da li', non da sopra: gli
   elementi fermi si impilano, non si coprono (brand book 5.9.0, § 4.1.10).
   Fino alla 0.1.1 il riepilogo si fermava a 16 px dall'alto e l'indice a
   24, e la testata, ferma anche lei e sopra di loro, ne copriva la cima;
   un'ancora dell'indice portava il titolo dell'articolo sotto la testata. */
:root { --nw-sotto-la-testata: calc(var(--nlg-testata-h-ridotta) + var(--nlg-linea)); }
html { scroll-padding-top: calc(var(--nw-sotto-la-testata) + var(--nlg-s-4)); }

.nw-body, .nw-body *, .nw-body *::before, .nw-body *::after { box-sizing: border-box; }

.nw-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* La tela del libro, come le pagine 1:1 (`--nlg-canvas`): 14-404 legge
     solo canvas e action, 04 e 19 canvas e surface-1. Fino alla revisione
     del 2026-10-01 qui c'era `--sw-bg-1`, cioe' surface-2, e in luce scura il
     testo terziario (occhielli, righe legali, «(facoltativo)», «Codice …»)
     scendeva a 4,26:1 sul fondo rgb(28,34,51), sotto i 4,5:1 del testo
     piccolo; sulla tela #0B0F18 lo stesso --nlg-text-3 da' 5,15:1. Le sezioni
     alterne dichiarano il proprio surface-2 (`--superficie`, `--alterno`).
     `--sw-bg-1` resta nel ponte: lo legge il pannello. */
  background: var(--nlg-canvas);
  color: var(--sw-text-1);
  font: var(--sw-t-b)/var(--sw-t-b-lh) var(--sw-font-ui);
  -webkit-font-smoothing: antialiased;
  /* Il respiro e il margine dei contenitori di pagina: 112 e 40 px, 64 e
     20 sul telefono (in fondo al foglio). */
  --sw-respiro: calc(var(--sw-s9) + var(--sw-s4));
  --sw-sec-pad: calc(var(--sw-s5) + var(--sw-s4));
}

/* L'inchiostro d'accento vale per i collegamenti di testo, NON per i
   bottoni: un <a class="nlg-btn"> ha il riempimento d'azione sotto, e li'
   ci va il token `on-`. E' la «regola dei due usi»: riempimento e
   inchiostro sono lo stesso colore a due quote diverse, e non sono
   intercambiabili.

   LA REGOLA STA IN UN LIVELLO (`@layer`), e il livello perde contro ogni
   regola fuori livello, qualunque peso abbia: e' il ripiego dei collegamenti
   nudi, non un colore che si impone. Scritta piatta pesava (0,2,1) e batteva
   ogni colore di componente scritto con una classe — misurato alla revisione
   del 2026-10-01: il collegamento «programma agenti» nella fascia di
   /diventa-partner usciva blu sul blu (1:1), il glifo di WhatsApp blu sul
   verde invece che bianco (components.css, `.nlg-fluttuante--canale`), e
   blu erano anche le anteprime della home, «Apri la mappa», l'indice dei
   Termini. `:where()` avrebbe azzerato il peso allo stesso modo, ma
   cambiava il testo del selettore che due presidi leggono (HeaderFooterTest,
   BrandBookPinTest). Il colore e' lo stesso che typography.css del libro da'
   ad ogni `a` (`--nlg-blue-ink`, che e' `--sw-accent-1-text`): la regola
   resta come dichiarazione della regola dei due usi. */
@layer nw-ripiego {
  .nw-body a:not(.nlg-btn) { color: var(--sw-accent-1-text); }
}

/* Il passaggio del puntatore non cambia l'inchiostro di un collegamento.
   typography.css del libro scrive `a:hover` in --nlg-action-hover, che in
   luce scura e' il blu-500: sul fondo scuro sta a 3,2–3,9:1, sotto i 4,5:1
   del testo (misurato alla revisione del 2026-10-01, quando il ripiego qui
   sopra ha smesso di coprirlo). La prima regola pesa quanto `a:hover`
   (0,1,1) e viene dopo; i componenti con un proprio `:hover` pesano di piu'
   e restano loro. Il segno del passaggio, sui soli collegamenti di testo
   senza classe, e' la sottolineatura, come il libro fa coi collegamenti
   testuali (`.nlg-btn--terziario:hover`): a (0,1,0), cosi' che un
   componente o un contesto che la toglie resti com'e'. */
:where(.nw-body) a:hover { color: var(--sw-accent-1-text); }
:where(.nw-body a:not([class])):hover { text-decoration: underline; }

/* Il fuoco: l'anello del libro (`--nlg-focus-ring`, 3 px di tela e 6 di
   --nlg-focus, che in luce scura diventa blu-300) su chi non ne porta uno
   suo. `:where()` lo tiene a (0,1,0): i componenti del libro e del sito che
   dichiarano il proprio `:focus-visible` (`.nlg-btn`, `.nlg-fluttuante`,
   `.nw-hp-apertura__rigenera`…) pesano almeno (0,2,0) e vincono. Scritta
   come `.nw-body *:focus-visible` pesava (0,2,0) e veniva dopo: sostituiva
   l'anello del libro con uno suo (#1B4DFF su surface-2, 2,97:1 in luce
   scura, sotto i 3:1 del § 1.4.11), toglieva l'ombra all'icona fluttuante e
   con `position: relative` staccava dal campo gli elementi assoluti (il
   bottone che rigenera l'apertura cadeva nel flusso). Nessuna posizione qui:
   se un anello finisce sotto un vicino, si alza nella `:focus-visible` di
   quel componente, mai su un elemento posizionato. */
:where(.nw-body) :focus-visible { outline: none; box-shadow: var(--nlg-focus-ring); }

/* Il contenitore di pagina: --sw-container e' --nlg-container (1240), col
   margine di pagina dai due lati. */
.nw-container {
  width: min(var(--sw-container), 100% - 2 * var(--sw-sec-pad));
  margin-inline: auto;
}
.nw-sec { padding-block: var(--sw-respiro); }

/* Il testo che resta nel documento ma non a schermo: lo sente chi usa un
   lettore di schermo, non lo vede chi guarda. */
.nw-solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* L'anteprima di una pagina dal pannello (panel/webpages/anteprima). */
.nw-main { flex: 1; }

/* ═══════════════════════ Pagine interne ═══════════════════════ */

/* L'area riservata (area/index). Il paragrafo d'apertura e' prosa: porta la
   misura di lettura del libro, 72 caratteri (§ 2.2.1, tokens/dispositivo.css). */
.nw-page__title { margin: 0 0 var(--sw-s4); font: 700 var(--sw-t-h1)/var(--sw-t-h1-lh) var(--sw-font-ui); }
.nw-page__lead { max-width: 72ch; margin: 0 0 var(--sw-s6); color: var(--sw-text-2); font: 400 var(--sw-t-bl)/var(--sw-t-bl-lh) var(--sw-font-ui); }
.nw-page--narrow { max-width: 640px; }
.nw-page__logout { margin-top: var(--sw-s6); }

.nw-area-sez { margin-top: var(--sw-s7); }
.nw-area-sez__title { margin: 0 0 var(--sw-s3); font: 600 var(--sw-t-h2)/var(--sw-t-h2-lh) var(--sw-font-ui); }
.nw-area-sez__lista { margin: 0; padding-left: var(--sw-s5); color: var(--sw-text-2); }
.nw-area-sez__lista li { margin-bottom: var(--sw-s2); }
.nw-area-sez__nota { margin: 0; color: var(--sw-text-3); }

.nw-area__dati { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sw-s2) var(--sw-s4); margin: var(--sw-s5) 0; }
.nw-area__dati dt { font-weight: 600; color: var(--sw-text-2); }
.nw-area__dati dd { margin: 0; }
.nw-area__azzera { margin-top: var(--sw-s3); }

/* Le domande di una scheda prodotto (public/speciali/prodotto-zona):
   <details> nativi, nessuno script. Riquadro, fili, chevron, margine e
   colore della risposta li disegna css/pagine-speciali.css, che le pagine
   speciali caricano sempre; qui sta solo la misura di lettura della
   risposta, quella del contratto (72ch, MisuraMassimaTest). Le regole della
   domanda e il margine e il colore della risposta, che stavano anche qui,
   erano doppioni che pagine-speciali.css riscriveva (collaudo del
   2026-10-10, C38). */
.nw-faq__risposta { max-width: 72ch; }

/* ═══════════════════════ Segnaposto dei documenti ═══════════════════════ */

/* L'elenco delle categorie del consenso nella pagina Compliance
   (partials/segnaposti/consenso-categorie): la stessa sorgente del banner. */
.nw-compliance__categorie { display: flex; flex-direction: column; gap: var(--sw-s3); margin: var(--sw-s4) 0; }
.nw-compliance__categorie dt { display: flex; align-items: baseline; gap: var(--sw-s2); flex-wrap: wrap; font-weight: 600; }
.nw-compliance__categorie dd { margin: 0 0 var(--sw-s2); color: var(--sw-text-2); }

/* Lo storico dei Termini (partials/segnaposti/termini-storico): l'anno in
   mono, sommesso, e' un dato del documento, non una frase della pagina. */
.nw-termini__anno { color: var(--sw-text-3); font-family: var(--sw-font-mono); font-size: var(--sw-t-cap); }

.nw-termini__storico { padding-left: var(--sw-s5); }
.nw-termini__storico li { margin-bottom: var(--sw-s2); }

/* ═══════════════════════ Blocchi ERP ═══════════════════════ */

/* La resa sobria dei segnaposto [[erp:famiglia:id]] (public/partials/
   erp-blocco): scheda su superficie, in attesa dei layout dedicati dal
   brand book. Solo ruoli del ponte. */
.nw-erp {
  margin: var(--sw-s6) 0;
  padding: var(--sw-s5) var(--sw-s6);
  background: var(--sw-surface-1);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r3);
}
.nw-erp--vuoto { border-style: dashed; }
.nw-erp__nota { margin: 0; color: var(--sw-text-3); font: 400 var(--sw-t-bs)/var(--sw-t-bs-lh) var(--sw-font-ui); }
.nw-erp__id { font-family: var(--sw-font-mono); }
.nw-erp__head { margin-bottom: var(--sw-s4); }
.nw-erp__overline {
  margin: 0 0 var(--sw-s1);
  font: 700 var(--sw-t-ov)/var(--sw-t-ov-lh) var(--sw-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-accent-1-text);
}
.nw-erp__title { margin: 0; font: 600 var(--sw-t-h3)/var(--sw-t-h3-lh) var(--sw-font-ui); color: var(--sw-text-1); }
.nw-erp__campi { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sw-s3) var(--sw-s5); }
.nw-erp__campo dt { font: 500 var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-ui); color: var(--sw-text-3); }
.nw-erp__campo dd { margin: 0; color: var(--sw-text-1); }
.nw-erp__lista { margin: var(--sw-s4) 0 0; padding-left: var(--sw-s5); color: var(--sw-text-2); }
.nw-erp__lista li { margin-bottom: var(--sw-s1); }

/* ═══════════════════════ Il marchio e le proposte ═══════════════════════ */

/* Il marchio della fabbrica del brand book (partials/marchio): un SVG, alto
   quanto il contenitore gli dice. */
.nw-marchio { display: inline-flex; line-height: 0; }
.nw-marchio svg { display: block; height: 100%; width: auto; }
.nw-marchio--lockup { height: 36px; }
.nw-marchio--payoff { height: 48px; }
.nw-marchio--raggera, .nw-marchio--raggera5 { height: 40px; }

/* Breadcrumb e figlie delle proposte (figlio Noleggiando). */
.nw-proposte { padding-block: var(--sw-s4) 0; }
.nw-briciole ol { display: flex; flex-wrap: wrap; gap: var(--sw-s2); margin: 0; padding: 0; list-style: none; font-size: var(--sw-t-bs); color: var(--sw-text-3); }
.nw-briciole li + li::before { content: "›"; margin-inline-end: var(--sw-s2); }
.nw-briciole a { color: var(--sw-text-2); }
.nw-figlie { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sw-s3); margin-top: var(--sw-s4); }
.nw-figlie__voce { padding: var(--sw-s4); font-weight: 600; text-decoration: none; }

/* ═══════════════════════ Cornice 5.8.0 ═══════════════════════
   La cornice del sito sul brand book 5.8.0 di Noleggiando: la testata
   «Completa · con barra utility» (§ 5.1.1), il mega menu «A colonne · un
   gruppo per colonna» (§ 5.1.4), il piede «Completo · sito» e «Ridotto ·
   pagine di sistema» (§ 5.1.2), l'accesso «Modulo centrato» (§ 5.2.5), il
   404 «Due uscite» e la manutenzione «Con orario di rientro» (§ 5.3).

   I COMPONENTI sono del libro e stanno in public/brand/components.css
   (`.nlg-utility`, `.nlg-header`, `.nlg-mega`, `.nlg-footer`,
   `.nlg-fluttuante`, `.nlg-btn`, `.nlg-campo`…): qui non si ridichiarano.
   Qui stanno le regole del figlio, sulle classi `nw-*`: cio' che il
   componente non dice (il cassetto del telefono, il lockup, la scheda
   dell'accesso, il guscio delle pagine automatiche) e le misure che le
   pagine 1:1 scrivono in linea, trasportate qui. Solo token `--nlg-*`:
   nessun colore letterale. Le media query stanno in fondo, dopo le regole
   che scavalcano. */

/* Il salto al contenuto: il primo collegamento della pagina, fuori vista
   finche' non prende il fuoco. Ha il fondo dell'azione, quindi difende il
   proprio inchiostro dalla regola dei collegamenti. */
.nw-body .nw-salto {
  position: absolute;
  left: var(--nlg-s-3);
  top: calc(var(--nlg-s-9) * -1);
  z-index: 100;
  padding: var(--nlg-s-2) var(--nlg-s-4);
  border-radius: var(--nlg-r-md);
  background: var(--nlg-action);
  font: 700 var(--nlg-fs-body-sm)/1.4 var(--nlg-font-ui);
  text-decoration: none;
}
a.nw-salto:link, a.nw-salto:visited { color: var(--nlg-text-onaction); }
.nw-body .nw-salto:focus { top: var(--nlg-s-3); }

/* Il glifo di WhatsApp resta bianco anche sotto il puntatore. Il colore e'
   del componente (`.nlg-fluttuante--canale`, (0,1,0)), e `a:hover` di
   typography.css pesa (0,1,1): senza questa riga, al passaggio il glifo
   diventerebbe --nlg-action-hover sul verde. Il componente si raggiunge nel
   contesto del sito, non nudo. */
.nw-body .nlg-fluttuante--canale:hover { color: var(--nlg-terzi-whatsapp-ink); }

.nw-contenuto { flex: 1 0 auto; outline: none; }
.nw-corpo__avvisi { max-width: var(--nlg-container); margin: var(--nlg-s-5) auto 0; padding: 0 var(--nlg-margine); display: grid; gap: var(--nlg-s-3); }
.nw-corpo__avviso-testo { margin: 0; }

/* Il lockup: il marchio della fabbrica del brand book (partials/marchio),
   alto come nella riga da 56 px della pagina 1:1. In testata e nel piede
   ridotto raggera e logotipo stanno affiancati come le pagine 1:1 li
   scrivono in linea — raggera 26 px e logotipo a corpo 17 (il tracciato alto
   17 ha la maiuscola del corpo 17), 24 e 16 nel piede, col passo dello
   schema del § 5.1.1 fra i due —; le pagine automatiche (errors/_shell)
   compongono allo stesso modo raggera 26 e logotipo 17, senza i contenitori
   __intero/__nome, cosi' sul telefono restano tutti e due come nelle 1:1 14
   e 15; l'accesso porta ancora il lockup fabbricato. Da telefono, in
   testata, la raggera a cinque barre col logotipo (in fondo al foglio).
   Allo scorrimento il lockup si stringe (sotto, «la testata compatta»), in
   una transizione sola coi 200 ms della riga. */
.nw-lockup { display: inline-flex; align-items: center; gap: var(--nlg-s-2); flex: none; line-height: 0; text-decoration: none; }
.nw-lockup .nw-marchio--lockup { height: 26px; }
.nw-lockup .nw-marchio--raggera, .nw-lockup .nw-marchio--raggera5 { height: 26px; }
.nw-lockup .nw-marchio--logotipo { height: 17px; }
.nw-testata .nw-lockup .nw-marchio { transition: height var(--nlg-t-base) var(--nlg-ease); }
.nw-lockup--piede .nw-marchio--lockup, .nw-lockup--piede .nw-marchio--raggera { height: 24px; }
.nw-lockup--piede .nw-marchio--logotipo { height: 16px; }
.nw-lockup__intero, .nw-lockup__nome { display: inline-flex; }
.nw-lockup__corto { display: none; }

/* ── La testata ── */
/* LA RIGA E' ALTA 56 PX (§ 5.1.1, `--nlg-testata-h` di tokens/spacing.css).
   tokens/dispositivo.css, che il punto d'ingresso del libro importa dopo
   spacing.css, riscrive lo stesso token a 72 px — «l'altezza netta della
   testata, scritta a runtime dal libro», cioe' la testata DEL LIBRO — e il
   componente `.nlg-header__riga` lo legge: fino alla 0.4.0 la testata del
   sito era alta 72 (misurato a 1440 px: 32 + 72). Sulla testata del sito il
   token torna alla misura del § 5.1.1, scritta coi passi della scala (i 48
   della resa compatta piu' 8); i due token omonimi vanno segnalati al brand
   book. */
.nw-testata { --nlg-testata-h: calc(var(--nlg-testata-h-ridotta) + var(--nlg-s-2)); }
/* LE VOCI SEGUONO IL LOCKUP, come nelle pagine 1:1 (la navigazione cresce
   subito dopo il lockup, l'azione resta in fondo alla riga) e nello schema
   del § 5.1.1; il componente le spingeva accanto all'azione
   (`.nlg-header__voci { margin-left: auto }`). */
.nw-testata .nw-testata__voci { flex-grow: 1; margin-left: 0; }
/* LE MISURE DELLA RIGA, come la testata di ogni pagina 1:1 (01-homepage e
   le altre): 28 px fra lockup, voci e azione, 22 fra le voci, «Richiedi
   preventivo» alto 36 con 18 px ai lati. Il componente scrive --nlg-s-5
   (24) per la riga e per le voci, e il bottone ha i 22 px di
   --nlg-btn-pad: a 1440 px l'azione era larga 185 px, 8 piu' della 1:1.
   28, 22 e 18 non sono passi della scala: sono i valori della pagina 1:1,
   come quelli del piede qui sotto. La tavoletta e il telefono li
   riscrivono in fondo al foglio. */
.nw-testata .nw-testata__riga { gap: 28px; }
.nw-testata .nw-testata__azione { padding-inline: 18px; }
/* La barra utility in due gruppi, come lo schema del § 5.1.1: i recapiti a
   sinistra, l'area partner a destra con «Diventa partner» in grassetto, le
   voci di un gruppo divise dal punto. */
.nw-barra-utility__gruppo { display: flex; align-items: center; gap: var(--nlg-s-2); }
.nw-barra-utility__gruppo--recapiti { margin-right: auto; }
.nw-barra-utility__gruppo--partner .nlg-utility__voce:last-child { font-weight: 700; }
.nw-testata__elenco { display: flex; align-items: stretch; gap: 22px; height: 100%; margin: 0; padding: 0; list-style: none; }
.nw-testata__voce { display: flex; align-items: stretch; }
.nw-testata__freccia {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 var(--nlg-s-1) var(--nlg-s-1) var(--nlg-s-2);
  border-right: var(--nlg-segno) solid currentColor;
  border-bottom: var(--nlg-segno) solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--nlg-t-base) var(--nlg-ease);
}
.nw-testata__innesco[aria-expanded="true"] .nw-testata__freccia { transform: translateY(var(--nlg-s-1)) rotate(-135deg); }
/* La voce della sede su una sua proposta (`aria-current="true"`, la pagina
   1:1 18): la sottolineatura e l'inchiostro pieno della voce corrente, che
   il componente da' solo alla pagina (`aria-current="page"`). */
.nw-testata a.nlg-header__voce[aria-current="true"] { color: var(--nlg-text-1); border-bottom-color: var(--nlg-action); }
/* Aperta, la voce prende la sottolineatura (dal componente) e
   l'inchiostro blu (§ 5.1.4, «innesco»). */
a.nw-testata__innesco.nlg-header__voce[aria-expanded="true"],
button.nw-testata__innesco[aria-expanded="true"] { color: var(--nlg-blue-ink); }
/* L'anello del fuoco di una voce della riga. La voce e' alta quanto la riga,
   e con la testata a filo della finestra (la testata compatta dopo lo
   scorrimento; fino alla 0.9.0 anche le speciali senza barra utility)
   l'anello del libro, fuori dalla
   voce, perdeva il lato superiore (collaudo del 2026-10-10, V08). Lo stesso
   anello (`--nlg-focus-ring`) sta su uno strato della voce rientrato sopra
   e sotto quanto l'anello e' spesso (s-1 + 2px, i 6 px di tela e
   --nlg-focus): il bordo esterno dell'anello cade sul bordo della voce,
   resta dentro la riga e non copre la scritta nemmeno quando la voce va su
   due righe nella testata compatta (fra 720 e 800 px). La voce non ha
   margini ai lati, e un anello interno ne toccava le lettere. Lo strato
   c'e' sempre, vuoto e trasparente ai clic: la regola del fuoco cambia solo
   l'ombra. Nella tendina del telefono le voci hanno posto, e resta
   l'anello del componente. */
@media (min-width: 720px) {
  .nw-testata .nlg-header__voce { position: relative; }
  .nw-testata .nlg-header__voce::after {
    content: "";
    position: absolute;
    inset: calc(var(--nlg-s-1) + 2px) 0;
    pointer-events: none;
  }
  .nw-testata .nlg-header__voce:focus-visible { box-shadow: none; }
  .nw-testata .nlg-header__voce:focus-visible::after { box-shadow: var(--nlg-focus-ring); }
}

/* LA TESTATA COMPATTA (§ 5.1.1, `layout/5-1-1-b.html`). Allo scorrimento
   la riga scende a 48 px con l'ombra piccola — lo fa il componente,
   `.nlg-header--ridotto` —, e «il lockup si stringe, voci e azione
   restano». Lo schema stringe la raggera da 22 a 18 px e il logotipo dal
   corpo 14 al 12,5; qui le stesse proporzioni sulla misura della riga
   (raggera 26 e logotipo 17 della pagina 1:1; sulla tavoletta, in fondo al
   foglio, proprio 18 e 12,5). Fino alla 0.9.0 il lockup restava di
   193×26 px dentro la riga da 48. Voci e azione restano alla loro misura:
   la scheda tiene l'azione a 36 px fuori dal telefono. Sul telefono la
   riga e' sempre da 48 e il lockup e' gia' quello stretto: non cambia.
   Una transizione sola, coi 200 ms della riga (`.nw-lockup .nw-marchio`,
   sopra); col moto ridotto il cambio e' immediato. */
@media (min-width: 720px) {
  .nlg-header--ridotto .nw-lockup__intero .nw-marchio--raggera { height: calc(26px * 18 / 22); }
  .nlg-header--ridotto .nw-lockup__nome .nw-marchio--logotipo { height: calc(17px * 12.5 / 14); }
}

/* Il mega menu nel markup. SENZA SCRIPT si mostra quando il fuoco da
   tastiera entra nella voce; CON lo script (`.nw-js` sul <html>) lo apre
   solo il clic, con Invio o Spazio — mai il passaggio del puntatore. */
.nw-testata__voce--mega > .nw-mega { display: none; }
.nw-testata__voce--mega:focus-within > .nw-mega { display: block; }
.nw-js .nw-testata__voce--mega:focus-within > .nw-mega { display: none; }
.nw-js .nw-testata__voce--mega.is-aperta > .nw-mega { display: block; }
/* Aperto, il pannello mette la pagina sotto il velo (§ 5.1.4: «sotto, la
   pagina va sotto il velo»): un elemento vero (`[data-mega-velo]`, in fondo
   alla testata) che parte dal bordo basso della testata, copre la finestra
   col velo del libro e sta sotto il pannello (il componente da' al pannello
   il piano 39). Copre la pagina e ne FERMA i clic: il clic sul velo chiude
   il pannello (sito-menu.js, «il clic fuori chiude») e non attiva cio' che
   sta sotto. Fino al ripasso della 0.4.0 il velo era un'ombra del
   pannello, che si vedeva ma lasciava passare il clic al collegamento
   velato. Senza script il pannello si apre col fuoco, e il velo con lui.
   Sul telefono il mega menu sta nella tendina, che ha il suo velo. */
.nw-mega__velo { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 38; height: 100vh; background: var(--nlg-scrim); }
@media (min-width: 720px) {
  .nw-js .nw-testata:has(.nw-testata__voce--mega.is-aperta) .nw-mega__velo,
  html:not(.nw-js) .nw-testata:has(.nw-testata__voce--mega:focus-within) .nw-mega__velo { display: block; }
}
.nw-mega__gruppo { display: flex; flex-direction: column; min-width: 0; }
.nw-mega__tendina {
  display: none;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}
/* IL PIEDE DEL PANNELLO, come lo schema del § 5.1.4: a sinistra il
   collegamento di sede, a destra il promemoria dei tasti. La specifica del
   menu lo vuole «in testa», e la prima stesura della 0.10.2 ce l'aveva
   messo; il 2026-10-28 il committente ha risposto «segui il brandbook», e
   il collegamento e' tornato dove lo mette il libro. */
.nw-mega__piede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nlg-s-3); }
/* Il collegamento di sede comincia dove cominciano le colonne, come nello
   schema del § 5.1.4: il bottone terziario porta di suo 12 px ai lati. */
.nw-mega__piede .nlg-btn--terziario { padding-inline: 0; }
.nw-mega__tasti { font: 400 11px/1.6 var(--nlg-font-mono); color: var(--nlg-text-3); }
/* IL PANNELLO COME LO SCHEMA DEL § 5.1.4 (`layout/5-1-4-a.html`
   #resa-desktop): le categorie in elenco fitto e in inchiostro pieno sotto
   il titolo del gruppo, il piede col collegamento di sede in UI 700 nel blu
   dei collegamenti e i tasti in mono piccolo nel terzo inchiostro. Lo
   schema e' disegnato alla scala del piede del § 5.1.2 (titoli 9,5, voci
   11,5, 5 px di stacco in tutti e due), e il piede la pagina 1:1 01 lo
   porta a grandezza: titoli 10,5, voci 13,5, 7 px. Il pannello prende le
   stesse misure dei gruppi del piede, il collegamento di sede (in UI 700
   come ogni bottone del libro) il corpo del testo piccolo (14) e i tasti
   gli 11 px della riga legale. Il componente
   (`.nlg-mega__categoria`) le scrive nel secondo inchiostro, a 14 px, in
   righe da 36: fino alla 0.9.0 il pannello era il componente nudo, e i
   tasti a 13 px. Le righe da 36 restano sotto il dito, come nel piede.
   Nella tendina del telefono le categorie restano quelle della
   fisarmonica, nel secondo inchiostro come lo schema. */
@media (min-width: 720px) {
  .nw-mega .nw-mega__categorie { gap: 7px; }
  .nw-mega .nlg-mega__categoria { font-size: 13.5px; line-height: var(--nlg-lh-body); }
  .nw-mega a.nlg-mega__categoria.nlg-mega__categoria:is(:link, :visited) { color: var(--nlg-text-1); }
  .nw-mega a.nlg-mega__categoria.nlg-mega__categoria:hover { color: var(--nlg-blue-ink); }
  .nw-mega__piede .nlg-btn--terziario { font-size: var(--nlg-fs-body-sm); }
}
@media (min-width: 720px) and (pointer: fine) {
  .nw-mega .nlg-mega__categoria { min-height: 0; }
}

/* I COMANDI A ICONA DELLA TESTATA (brand book 5.15.0, § 5.1.1, «Anatomia»):
   la luce, «comando a icona 36 px, icona 20», e il pannello, «dopo la luce
   e prima dell'azione, separati da un filetto». Le misure sono quelle che
   `layout/5-1-1-a.html` e le testate di Layout 1-1 scrivono in linea: il
   gruppo a 4 px, i comandi da 36 nel secondo inchiostro con l'angolo
   --nlg-r-md, l'icona a tratto da 20 (tratto 2), il filetto da 1×20 nel
   colore dei bordi con 4 px ai lati. Al passaggio il comando prende
   l'inchiostro pieno, come la voce della testata (`.nlg-header__voce:hover`
   del libro); il fuoco e' l'anello del libro. Le regole stanno nel contesto
   della testata, (0,2,0) e (0,3,0): il collegamento del pannello cosi'
   difende l'inchiostro da `a:hover` di typography.css, (0,1,1). Sul
   telefono resta il pannello, da 44 px, e la luce scende nella tendina (in
   fondo al foglio). */
.nw-testata__comandi { display: flex; align-items: center; gap: var(--nlg-s-1); flex: none; }
.nw-testata .nw-testata__comando {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--nlg-comando-h);
  height: var(--nlg-comando-h);
  padding: 0;
  border: 0;
  border-radius: var(--nlg-r-md);
  background: transparent;
  color: var(--nlg-text-2);
  text-decoration: none;
  cursor: pointer;
}
.nw-testata .nw-testata__comando:hover { color: var(--nlg-text-1); }
.nw-testata .nw-testata__comando:focus-visible { outline: none; box-shadow: var(--nlg-focus-ring); }
.nw-testata__icona { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: var(--nlg-segno); }
.nw-testata__filetto { flex: none; width: var(--nlg-linea); height: 20px; margin: 0 var(--nlg-s-1); background: var(--nlg-border); }
/* LA LUNA IN LUCE CHIARA, IL SOLE IN LUCE SCURA (§ 5.1.1, «Anatomia»), e
   nella tendina «Luce scura» o «Luce chiara»: si vede cio' che porta
   all'altra luce. Lo decide il foglio dalla luce in vigore — l'attributo
   dell'<html> e, con «auto», la luce del sistema, la stessa regola dei
   token (tokens/colors.css) —, cosi' e' giusto dal primo disegno, prima
   dello script differito (js/luce.js), che tiene al passo l'etichetta. */
:root[data-theme="dark"] .nw-luce-in-chiaro,
:root:not([data-theme="dark"]) .nw-luce-in-scuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .nw-luce-in-chiaro { display: none; }
  :root[data-theme="auto"] .nw-luce-in-scuro { display: block; }
}
/* Il glifo di WhatsApp nella barra utility e in coda alla tendina (5.14.1 del
   libro, § 5.1.1 e § 5.1.4): riempito, a 13 px, nel colore del testo che
   accompagna — il verde del canale resta all'icona fluttuante (§ 4.1.9,
   «Colori del canale»). Fra il glifo e il numero lo schema lascia 6 px,
   non gli 8 del gruppo. */
.nw-glifo-whatsapp { display: block; flex: none; fill: currentColor; }
.nw-barra-utility__glifo, .nw-testata__coda-glifo { margin-right: calc(6px - var(--nlg-s-2)); }
/* L'ultima riga della tendina del telefono: da desktop non c'e'. */
.nw-testata__luce-riga { display: none; }
/* Il configuratore come voce della tendina (5.17.0): da desktop non c'e'. */
.nw-testata__configuratore-voce { display: none; }
.nw-testata__icona--carrello { stroke-linecap: butt; stroke-linejoin: miter; }

/* La tendina del telefono: da desktop non c'e'. */
.nw-cassetto { display: none; }
.nw-cassetto__testa { display: none; }
.nw-cassetto__chiudi { display: none; }
.nw-testata__coda { display: none; }
.nw-testata__azione-corta { display: none; }

/* ── Il filo di firma ── */
/* Brand book 5.15.0 § 3.2.1, forma 1a della 5.14.0: una riga sola divisa
   nei quattro pesi della palette — blu 60 · rosso 25 · giallo 7,5 · verde
   7,5 —, spessore 6, stacco 3 («metà dello spessore, ed è il suo fondo»).
   Lo scrive `partials/filo-firma`. La forma a segmenti e' quella dei piedi
   di `Layout 1-1.dc.html`, riga per riga: flex coi gap da 3, i pesi come
   `flex-grow` su base 0 — si dividono la riga senza gli stacchi, come
   l'SVG del libro su 600 unita' (354,6 · 147,75 · 44,325 · 44,325) —, 4 px
   sopra e sotto, cosi' la fascia resta alta 14 come l'SVG. Spessore e
   stacco non scalano con la larghezza: la 5.14.0 li vuole uguali «a ogni
   larghezza». La forma disegnata e' l'SVG del partial dell'apertura chiara
   (§ 5.4.1), che scala fino al tetto di --nlg-filo-firma-max come nel
   libro. 6 e 3 non hanno un token: sono le misure del § 3.2.1. */
.nw-filo { display: flex; gap: 3px; width: 100%; height: 6px; box-sizing: content-box; padding: 4px 0; }
.nw-filo__segmento { flex: 1 1 0; min-width: 0; }
.nw-filo__segmento--blu { flex-grow: 60; background: var(--nlg-bar-blue); fill: var(--nlg-bar-blue); }
.nw-filo__segmento--rosso { flex-grow: 25; background: var(--nlg-bar-red); fill: var(--nlg-bar-red); }
.nw-filo__segmento--giallo { flex-grow: 7.5; background: var(--nlg-bar-yellow); fill: var(--nlg-bar-yellow); }
.nw-filo__segmento--verde { flex-grow: 7.5; background: var(--nlg-bar-green); fill: var(--nlg-bar-green); }
.nw-filo-disegnato { display: block; width: 100%; max-width: var(--nlg-filo-firma-max); }

/* ── Il piede ── */
/* Il fondo e il filo in testa delle pagine 1:1 (01-homepage, 05-login,
   17, 18: `background: var(--nlg-surface-1); border-top: 1px solid
   var(--nlg-border)`), sul componente del libro che di suo porta
   surface-2. Con surface-2 la riga legale in --nlg-text-3, in luce scura,
   stava a 4,26:1 (rgb(122,133,153) su rgb(28,34,51)); su surface-1 e' a
   4,71:1 (revisione del 2026-10-01). */
.nw-piede { background: var(--nlg-surface-1); border-top: var(--nlg-linea) solid var(--nlg-border); }
.nw-piede__azione {
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: 26px var(--nlg-margine);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nlg-s-5);
  flex-wrap: wrap;
}
.nw-piede__azione-testi { display: flex; flex-direction: column; gap: var(--nlg-s-1); margin: 0; font-size: var(--nlg-fs-body-sm); }
.nw-piede__azione-titolo { font: 800 22px/1.2 var(--nlg-font-ui); letter-spacing: -0.02em; }
/* La freccia di «Tutte le categorie →» e' un elemento suo dentro una voce
   `display: flex` del componente: lo spazio del testo fra le due non si
   vede, e la pagina diceva «categorie→». */
.nw-piede__gruppi .nlg-footer__voce { gap: var(--nlg-s-1); }
/* I GRUPPI DEL PIEDE COME LA PAGINA 1:1 01 E LO SCHEMA DEL § 5.1.2, che
   concordano: le fasce 28 sopra, 22 fra gruppi, filo e riga legale, 24
   sotto, 28 fra le colonne; da 720 px i titoli dei gruppi in mono
   maiuscolo a 10,5 px nel terzo inchiostro, le voci a 13,5 px con 7 px
   di stacco. Il componente (`.nlg-footer__gruppo`, `.nlg-footer__voce`)
   ha i titoli in UI 700 a 14 px in inchiostro pieno e righe da 36 px, e
   fino al ripasso della 0.4.0 il piede a 1440 px era alto 555 px contro i
   465 della pagina 1:1. 10,5 e 13,5 non hanno un token: sono i valori
   della pagina 1:1. Sul telefono i gruppi restano le righe a tendina da
   44 px dello schema del § 5.1.2, coi titoli in UI 700. */
.nw-piede__azione-titolo { line-height: var(--nlg-lh-body); }
.nw-piede__gruppi { padding: 28px var(--nlg-margine) 22px; column-gap: 28px; }
.nw-piede__gruppi + .nw-piede__legale { padding-top: 0; padding-bottom: var(--nlg-s-5); gap: 22px; }
@media (min-width: 720px) {
  .nw-piede__gruppi .nlg-footer__gruppo { margin: 0 0 7px; font: 400 10.5px/1.6 var(--nlg-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--nlg-text-3); }
  .nw-piede__gruppi .nlg-footer__voci { gap: 7px; }
  .nw-piede__gruppi .nlg-footer__voce { font-size: 13.5px; line-height: var(--nlg-lh-body); }
  /* Lo stesso titolo di gruppo nel mega menu (schema del § 5.1.4: mono
     maiuscolo nel terzo inchiostro). Sul telefono il gruppo e' la voce
     della fisarmonica (`.nw-mega__tendina`), in UI 700 come nello schema. */
  .nw-mega .nw-mega__titolo { font: 400 10.5px/1.6 var(--nlg-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--nlg-text-3); }
}
/* Le righe da 36 px del componente scendono alla riga del testo solo
   sotto un puntatore fine: sotto il dito resta il minimo di 44 px di
   tokens/dispositivo.css. */
@media (min-width: 720px) and (pointer: fine) {
  .nw-piede__gruppi .nlg-footer__voce { min-height: 0; }
}
.nw-piede__tendina > summary { list-style: none; cursor: default; }
.nw-piede__tendina > summary::-webkit-details-marker { display: none; }
.nw-piede__legale { gap: var(--nlg-s-5); }
/* Il piede ridotto ha le misure che le pagine 1:1 05, 19 e 20 scrivono in
   linea: 28 px sopra, 24 sotto, 22 fra il lockup, il filo e la riga legale.
   Il componente da' alla fascia legale 16 sopra e 32 sotto. */
.nw-piede__legale--ridotto { padding: 28px var(--nlg-margine) var(--nlg-s-5); gap: 22px; }
.nw-piede__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--nlg-s-4); flex-wrap: wrap; }
.nw-piede__assistenza { font-size: var(--nlg-fs-body-sm); color: var(--nlg-text-2); }
.nw-piede__assistenza a:is(:link, :visited) { color: var(--nlg-text-2); }
/* Il filo di firma del piede e' `partials/filo-firma` nella forma a
   segmenti (le regole `.nw-filo` qui sopra): le 14 px di prima, 6 di filo
   e 4 sopra e sotto, e nessuna regola propria. */
.nw-piede__riga-legale {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--nlg-s-4);
  font: 400 11px/1.6 var(--nlg-font-mono);
  color: var(--nlg-text-3);
}
.nw-piede__dicitura { display: flex; flex-wrap: wrap; gap: var(--nlg-s-1) 14px; margin: 0; }
/* Il copyright «in testo piccolo (IBM Plex Sans, mai mono)» (SKILL.md,
   Registrazione e copyright): la famiglia del testo, l'unica non mono fra
   i token, che un IBM Plex Sans non lo hanno. */
.nw-piede__copyright { font-family: var(--nlg-font-text); }
.nw-piede__legali { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nlg-s-2); margin: 0; }
.nw-piede__legali a:is(:link, :visited) { color: var(--nlg-text-3); }
.nw-piede__preferenze { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* Il piede compatto del preventivatore: le misure che la pagina 1:1
   `17-carrello-preventivatore` scrive in linea — 22 e 20 px sopra e sotto,
   14 px fra le righe, la riga della promessa a 13 px in secondo
   inchiostro. Il fondo, il filo di firma e la riga legale sono quelli del
   piede completo. */
.nw-piede__compatto { max-width: var(--nlg-container); margin: 0 auto; padding: 22px var(--nlg-margine) 20px; display: flex; flex-direction: column; gap: 14px; }
.nw-piede__compatto-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nlg-s-4); font-size: var(--nlg-fs-caption); color: var(--nlg-text-2); }
.nw-piede__compatto-voci { display: flex; flex-wrap: wrap; gap: var(--nlg-s-4); }
.nw-piede__compatto-voci a:is(:link, :visited) { color: var(--nlg-text-2); }

/* ── L'accesso: header al lockup, scheda centrata, piede ridotto ── */
.nw-ingresso__campo { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 40px var(--nlg-margine); }
.nw-ingresso__campo > .nw-ingresso__scheda {
  width: min(420px, 100%);
  padding: var(--nlg-s-6);
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: var(--nlg-linea) solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
  background: var(--nlg-surface-1);
  box-shadow: var(--nlg-shadow-sm);
}
.nw-ingresso__titolo { margin: 0; font: 800 var(--nlg-fs-h2)/1.2 var(--nlg-font-ui); letter-spacing: -0.02em; color: var(--nlg-text-1); }
.nw-ingresso__voce { display: flex; flex-direction: column; min-width: 0; }
.nw-ingresso__ricordami { display: inline-flex; align-items: center; gap: var(--nlg-s-2); min-height: var(--nlg-tap-min); font: 400 var(--nlg-fs-body-sm)/1.4 var(--nlg-font-ui); color: var(--nlg-text-1); cursor: pointer; }
.nw-ingresso__ricordami input { width: 18px; height: 18px; margin: 0; accent-color: var(--nlg-action); }
.nw-ingresso__invia { width: 100%; }
.nw-ingresso__intro { margin: 0; color: var(--nlg-text-2); }
.nw-ingresso__passi { margin: 0; padding-left: var(--nlg-s-5); display: grid; gap: var(--nlg-s-2); color: var(--nlg-text-2); }
.nw-ingresso__collegamenti { display: flex; flex-wrap: wrap; gap: var(--nlg-s-2); margin: 0; font-size: 13.5px; color: var(--nlg-blue-ink); }
.nw-ingresso__collegamenti a:is(:link, :visited) { color: var(--nlg-blue-ink); }
/* Il login del § 5.2.5 della 5.16.1: il filo in cima alla scheda e la riga
   «Vuoi aprire un centro di noleggio?» in fondo, a filo dei bordi (la scheda
   ha il padding di --nlg-s-6); «Password dimenticata?» sotto la password,
   allineata a destra. */
.nw-ingresso__campo > .nw-ingresso__scheda:has(> .nw-ingresso__filo) { overflow: hidden; }
.nw-ingresso__filo { margin: calc(-1 * var(--nlg-s-6)) calc(-1 * var(--nlg-s-6)) 0; }
.nw-ingresso__testa { display: flex; flex-direction: column; gap: 6px; }
.nw-ingresso__testa .nw-ingresso__intro { font-size: var(--nlg-fs-body-sm); line-height: 1.5; }
.nw-ingresso__dimenticata { align-self: flex-end; margin-top: 6px; font: 600 13.5px var(--nlg-font-ui); }
.nw-ingresso__dimenticata:is(:link, :visited) { color: var(--nlg-blue-ink); }
.nw-ingresso__piede {
  margin: 0 calc(-1 * var(--nlg-s-6)) calc(-1 * var(--nlg-s-6));
  padding: 16px var(--nlg-s-6);
  border-top: 1px solid var(--nlg-border);
  background: var(--nlg-surface-2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  justify-content: space-between;
  font: 400 var(--nlg-fs-body-sm)/1.4 var(--nlg-font-text);
  color: var(--nlg-text-2);
}
.nw-ingresso__piede a:is(:link, :visited) { font: 600 13.5px var(--nlg-font-ui); color: var(--nlg-blue-ink); }

/* ── Le pagine automatiche: 404, 403, 503, senza header e senza footer ── */
/* «Foto» (brand book 5.16.1, § 5.3.1 e § 5.3.2): meta' testo e meta' foto,
   colonne da 420 px al minimo, la foto sotto il testo sul telefono. A
   sinistra il lockup in alto, il blocco al centro, il filo e la riga legale
   in fondo; a destra la foto dello showroom con l'etichetta in mono. */
.nw-stato__campo { min-height: 70vh; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.nw-stato__meta { display: flex; flex-direction: column; gap: var(--nlg-s-4); padding: 28px clamp(20px, 5vw, 64px); min-width: 0; }
.nw-stato__blocco {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding: 48px 0;
}
.nw-stato__occhiello { font: 500 13px/1.4 var(--nlg-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--nlg-text-3); }
.nw-stato__titolo { margin: 0; font: 800 clamp(40px, 5.6vw, 72px)/1.02 var(--nlg-font-ui); letter-spacing: -0.03em; color: var(--nlg-text-1); text-wrap: balance; }
.nw-stato__testo { max-width: 72ch; margin: 0; font: 400 var(--nlg-fs-body-lg)/1.5 var(--nlg-font-text); color: var(--nlg-text-2); text-wrap: pretty; }
.nw-stato__foto {
  position: relative;
  min-height: 320px;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(var(--nlg-velo-ripiego), var(--nlg-velo-ripiego)), url(../brand/immagini/nlg-trama.png) center/cover no-repeat;
  background-color: var(--nlg-immagine-fondo);
}
.nw-stato__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nw-stato__etichetta { position: absolute; left: 20px; bottom: 20px; padding: 8px 12px; background: var(--nlg-surface-1); border-radius: var(--nlg-r-md); font: 500 12px var(--nlg-font-mono); color: var(--nlg-text-2); }
.nw-stato__avanzamento { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; }
.nw-stato__percentuale { font: 500 12px var(--nlg-font-mono); color: var(--nlg-text-3); }
.nw-stato__noleggio { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--nlg-border); border-radius: var(--nlg-r-xl); background: var(--nlg-surface-1); max-width: 460px; }
.nw-stato__domanda { font: 700 var(--nlg-fs-body)/1.3 var(--nlg-font-ui); color: var(--nlg-text-1); }
.nw-stato__risposta { font: 400 var(--nlg-fs-body-sm)/1.5 var(--nlg-font-text); color: var(--nlg-text-2); }
.nw-stato__telefoni { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nw-stato__telefono { height: 36px; padding: 0 12px; font-size: 13px; }
.nw-stato__testo b { color: var(--nlg-text-1); }
/* «Intanto: 011 661 8765 · WhatsApp» (§ 5.3.2 della 5.14.1, variante «Con il recapito»):
   il numero in grassetto text-1, come nel libro (il peso lo distingue dal
   testo intorno). WhatsApp resta un collegamento con l'inchiostro dei
   collegamenti: col colore del testo, e senza sottolineatura, non si
   distinguerebbe (WCAG 1.4.1). */
.nw-stato__testo a[href^="tel:"]:is(:link, :visited) { font-weight: 700; color: var(--nlg-text-1); }
.nw-stato__segmenti { display: flex; gap: var(--nlg-s-1); width: 100%; max-width: 360px; height: 16px; }
.nw-stato__segmento { flex: 1; border-radius: var(--nlg-r-segmento); background: var(--nlg-surface-2); }
.nw-stato__segmento--pieno { background: var(--nlg-bar-blue); }
.nw-stato__azioni { display: flex; flex-wrap: wrap; gap: 10px; }
/* La riga legale (dovere della cornice, che la pagina 1:1 non mostra) non
   allarga il blocco: la sua misura intrinseca non conta (`contain`), prende
   la larghezza che il testo da' al blocco e va a capo li' dentro. Cosi' il
   blocco resta a misura del testo, centrato come nella pagina 1:1. */
.nw-stato__legale { display: flex; flex-wrap: wrap; align-self: stretch; contain: inline-size; gap: var(--nlg-s-1) 14px; margin: 0; font: 400 11px/1.6 var(--nlg-font-mono); color: var(--nlg-text-3); }
.nw-stato__legale a:is(:link, :visited) { color: var(--nlg-text-3); }
/* La pillola del consenso minimizzato si fa da parte finche' il banner e'
   aperto: le due cose insieme direbbero la stessa scelta due volte. */
[data-consent]:not([hidden]) ~ .nw-stato__pillola { display: none; }

/* ── Telefono: la banda del brand book (tokens/dispositivo.css) ── */
@media (max-width: 719px) {
  /* LA TESTATA SI INCOLLA ANCHE SUL TELEFONO. Il layer del dispositivo del
     brand book mette `overflow-x: hidden` su html e body per vietare lo
     scorrimento laterale; su body, pero', questo apre un contenitore di
     scorrimento, e la testata sticky (`.nlg-header`) si incollerebbe a
     quello — che non scorre mai — invece che alla finestra. `clip` taglia
     senza aprire un contenitore: il divieto resta, lo sticky torna. Il
     respiro e il margine di pagina scendono alle misure del telefono. */
  .nw-body { overflow-x: clip; --sw-respiro: var(--sw-s8); --sw-sec-pad: var(--sw-s5); }

  .nw-barra-utility { display: none; }

  /* LA RIGA DEL TELEFONO, come `layout/5-1-1-a.html` #resa-telefono (e
     5-1-4-a, uguale): alta 48 px (§ 5.1.1), con --nlg-s-2 a sinistra e
     --nlg-s-1 a destra e --nlg-s-1 fra le parti; a sinistra la raggera a
     cinque barre alta 18 px col logotipo a corpo 12, 6 px fra i due; a
     destra «Preventivo» alto 32 con 10 px ai lati e, a 2 px, il comando
     menu da 44. Fino alla 0.9.0 la riga era a specchio — il comando a
     sinistra, la sola raggera, e un vuoto in mezzo — perche' col logotipo
     alle misure del desktop (raggera 26, corpo 17, azione con 22 px ai lati
     e corpo 15) la riga non entrava a 360 px: con quelle dello schema ci
     sta (la riga chiede 281 px, e a 360 ne restano 79). Il corpo di
     «Preventivo» e' il 12 del token piu' piccolo e non l'11 dello schema:
     «sul telefono… non si scende sotto i 12 px» (Responsivita, «Cosa non
     si fa», 3). Sotto i 300 px il logotipo lascia il posto (subito dopo
     questo blocco). Le misure stanno sui contenitori del lockup della
     testata pubblica (__intero, __corto, __nome) e la riga fuori da
     `.nw-testata--lockup`: la testata dell'accesso (layouts/accesso, pagina
     1:1 05) porta raggera 26 e logotipo 17 anche sul telefono, e resta
     com'e'. */
  .nw-testata .nw-testata__riga { height: var(--nlg-testata-h-ridotta); gap: var(--nlg-s-1); }
  .nw-testata:not(.nw-testata--lockup) .nw-testata__riga { padding: 0 var(--nlg-s-1) 0 var(--nlg-s-2); }
  .nw-lockup__intero { display: none; }
  .nw-lockup__corto { display: inline-flex; }
  .nw-testata:not(.nw-testata--lockup) .nw-lockup { gap: 6px; }
  .nw-testata .nw-lockup__corto .nw-marchio--raggera5 { height: 18px; }
  .nw-testata .nw-lockup__nome .nw-marchio--logotipo { height: 12px; }
  .nw-testata__azione { height: calc(var(--nlg-comando-h) - var(--nlg-s-1)); margin-left: auto; }
  .nw-testata .nw-testata__azione { padding-inline: 10px; font-size: var(--nlg-fs-overline); }
  .nw-testata__azione-lunga { display: none; }
  .nw-testata__azione-corta { display: inline; }

  /* Il comando menu da 44 px, ULTIMO nella riga e nel Tab, e il velo sotto
     la tendina. L'icona e' quella dello schema: tre tratti in un quadro da
     20 px, col tratto da 2 nell'inchiostro pieno. Fra l'azione e il comando
     lo schema lascia 2 px, non i 4 della riga. */
  .nw-cassetto { display: block; }
  .nw-testata__riga > .nw-cassetto { margin-left: calc(2px - var(--nlg-s-1)); }
  .nw-cassetto > summary { list-style: none; }
  .nw-cassetto > summary::-webkit-details-marker { display: none; }
  .nw-cassetto__apri { display: inline-flex; align-items: center; justify-content: center; width: var(--nlg-tap-min); height: var(--nlg-tap-min); color: var(--nlg-text-1); cursor: pointer; }
  .nw-cassetto__icona { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: var(--nlg-segno); }
  .nw-cassetto[open] .nw-cassetto__velo { position: fixed; inset: 0; z-index: 1; background: var(--nlg-scrim); }

  /* La tendina: la navigazione stessa, che da desktop e' la riga delle
     voci, si apre da sinistra sopra il velo quando il cassetto e' aperto.
     Il cassetto ora sta DOPO la navigazione (il comando e' a destra), e
     il fratello che segue (`~`) non si puo' piu' usare: la tendina si apre
     quando la riga ha il cassetto aperto (`:has`). Per un browser senza
     `:has`, la stessa apertura la dice la classe che lo script mette sulla
     radice: due regole e non una sola lista, perche' un selettore che il
     browser non conosce gli farebbe scartare la lista intera. La forma
     della tendina sta sulla navigazione, nascosta; le due regole la
     mostrano soltanto. */
  .nw-testata__voci {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: min(320px, 86vw);
    height: auto;
    margin: 0;
    padding: var(--nlg-s-2) var(--nlg-margine) var(--nlg-s-6);
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    background: var(--nlg-surface-1);
    box-shadow: var(--nlg-shadow-lg);
  }
  .nw-testata__riga:has(> .nw-cassetto[open]) > .nw-testata__voci { display: flex; }
  .nw-cassetto-aperto .nw-testata__voci { display: flex; }
  /* La testa della tendina: il lockup a cinque barre e la × sulla stessa
     riga da 44 px, come lo schema del § 5.1.4 (#resa-telefono): raggera
     alta 16 col logotipo a corpo 11,5, 6 px fra i due; la × e' l'icona a
     tratto da 18 px, non il carattere tipografico. */
  .nw-cassetto__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--nlg-s-3); min-height: var(--nlg-tap-min); margin-bottom: var(--nlg-s-1); }
  .nw-cassetto__marchio { display: inline-flex; align-items: center; gap: 6px; line-height: 0; }
  .nw-cassetto__marchio .nw-marchio--raggera5 { height: 16px; }
  .nw-cassetto__marchio .nw-marchio--logotipo { height: 11.5px; }
  .nw-cassetto__chiudi { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--nlg-tap-min); height: var(--nlg-tap-min); margin-right: calc(var(--nlg-s-3) - var(--nlg-margine)); padding: 0; border: 0; background: transparent; color: var(--nlg-text-1); cursor: pointer; }
  .nw-cassetto__icona--chiudi { width: 18px; height: 18px; }
  .nw-testata__elenco { flex-direction: column; gap: 0; height: auto; }
  .nw-testata__voce { flex-direction: column; }
  .nw-testata__voci .nlg-header__voce { height: var(--nlg-tap-min); justify-content: space-between; border-bottom: var(--nlg-linea) solid var(--nlg-border); }

  /* «Noleggio Torino» a fisarmonica: il pannello sta nell'elenco, senza
     ombra, col filo a sinistra che lo schema del § 5.1.4 disegna lungo il
     livello aperto; i gruppi sono voci da 40 px, le categorie da 36. */
  .nw-mega { position: static; border-bottom: 0; box-shadow: none; }
  .nw-mega__griglia { display: flex; flex-direction: column; gap: 0; padding: 0 0 0 var(--nlg-s-3); border-left: var(--nlg-segno) solid var(--nlg-border); }
  .nw-js .nw-mega__titolo { display: none; }
  .nw-js .nw-mega__tendina { display: flex; min-height: 40px; }
  .nw-js .nw-mega__gruppo:not(.is-aperto) .nw-mega__categorie { display: none; }
  .nw-mega__categorie { padding-left: var(--nlg-s-3); }
  /* Il collegamento di sede chiude l'elenco (scheda del § 5.1.4, «su
     telefono»), col rientro dei gruppi; il promemoria dei tasti no: nella
     tendina si va col dito, e lo schema del telefono non lo porta. */
  .nw-mega__piede { padding: var(--nlg-s-2) 0 var(--nlg-s-3) var(--nlg-s-3); border-top: 0; }
  .nw-mega__tasti { display: none; }

  /* In fondo alla tendina: contatti e area partner, nelle due righe col
     punto dello schema del § 5.1.4 (#resa-telefono), spinte in fondo alla
     colonna (`margin-top: auto`) e nel terzo inchiostro. Lo schema le
     scrive a 11 px; qui hanno il corpo della barra utility di cui sono la
     copia (`.nlg-utility__riga`, --nlg-fs-caption), sopra i 12 px del
     telefono, e ogni collegamento tiene il bersaglio da 44 px
     (tokens/dispositivo.css). Fino alla 0.9.0 erano quattro righe da 44 in
     corpo 14 e secondo inchiostro, subito sotto le voci. */
  .nw-testata__coda { display: flex; flex-direction: column; margin: auto 0 0; padding: var(--nlg-s-3) 0 0; list-style: none; }
  .nw-testata__coda-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--nlg-s-2); font: 400 var(--nlg-fs-caption)/1.4 var(--nlg-font-ui); color: var(--nlg-text-3); }
  .nw-testata__coda-voce { display: inline-flex; align-items: center; min-height: var(--nlg-tap-min); text-decoration: none; }
  a.nw-testata__coda-voce:link, a.nw-testata__coda-voce:visited { color: var(--nlg-text-3); }

  /* L'ULTIMA RIGA DELLA TENDINA E' IL CAMBIO DI LUCE (brand book 5.15.0,
     § 5.1.1, «Su telefono»; schema del § 5.1.4, #resa-telefono): sotto
     contatti e area partner, alta 44 col filo sopra e --nlg-s-2 di stacco,
     la dicitura in UI 600 nell'inchiostro pieno a sinistra e l'icona da 16
     a destra. Il corpo e' quello delle voci della tendina (il componente
     della voce, --nlg-fs-body-sm), come nello schema, dove riga della luce
     e voci hanno lo stesso. */
  .nw-testata__luce-riga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    width: 100%;
    min-height: var(--nlg-tap-min);
    margin: var(--nlg-s-2) 0 0;
    padding: 0;
    border: 0;
    border-top: var(--nlg-linea) solid var(--nlg-border);
    background: transparent;
    font: 600 var(--nlg-fs-body-sm)/1.4 var(--nlg-font-ui);
    color: var(--nlg-text-1);
    text-align: left;
    cursor: pointer;
  }
  .nw-testata__luce-icona { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: var(--nlg-segno); }

  /* I COMANDI SUL TELEFONO (§ 5.1.1 del 5.15.0, «Su telefono», e
     `layout/5-1-1-a.html` #resa-telefono): «per chi ha l'accesso, prima
     dell'azione c'è il pannello da 44 px e il lockup resta la sola
     raggera»; la luce sta nella tendina, e il filetto non c'e'. Il gruppo
     si scioglie nella riga (`display: contents`), cosi' il pannello e'
     un pezzo della riga come l'azione, a 2 px da lei come lo schema;
     l'azione lascia a lui il margine che la spinge a destra. Per il
     visitatore la riga resta quella di prima, col lockup intero: la regola
     che spegne il logotipo vale solo con il pannello (`--pannello`). */
  .nw-testata__comandi { display: contents; }
  .nw-testata .nw-testata__luce, .nw-testata .nw-testata__filetto { display: none; }
  .nw-testata .nw-testata__configuratore { display: none; }
  /* Il configuratore sul telefono: l'ultima voce della tendina, dopo le voci,
     con l'icona «Carrello» da 16 accanto alla dicitura (brand book 5.18.0). */
  .nw-testata__configuratore-voce { display: block; list-style: none; }
  .nw-testata__configuratore-voce .nlg-header__voce { display: flex; align-items: center; gap: var(--nlg-s-2); }
  .nw-testata__configuratore-voce .nw-testata__icona { width: 16px; height: 16px; }
  .nw-testata .nw-testata__pannello { width: var(--nlg-tap-min); height: var(--nlg-tap-min); margin: 0 calc(2px - var(--nlg-s-1)) 0 auto; }
  .nw-testata--pannello .nw-testata__azione { margin-left: 0; }
  .nw-testata--pannello .nw-lockup__nome { display: none; }

  /* Il piede: la fascia dell'azione in colonna, i gruppi a tendina da
     44 px, la riga legale a capo coi collegamenti sotto. */
  .nw-piede__azione { flex-direction: column; align-items: flex-start; }
  .nw-piede__gruppi { display: flex; flex-direction: column; gap: 0; }
  .nw-piede__tendina > summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--nlg-tap-min); margin: 0; border-bottom: var(--nlg-linea) solid var(--nlg-border); cursor: pointer; }
  .nw-piede__tendina > summary::after { content: ""; width: 6px; height: 6px; margin-right: var(--nlg-s-1); border-right: var(--nlg-segno) solid currentColor; border-bottom: var(--nlg-segno) solid currentColor; transform: rotate(45deg); }
  .nw-piede__tendina[open] > summary::after { transform: rotate(-135deg); }
  .nw-piede__riga-legale { flex-direction: column; }

  .nw-ingresso__campo { padding: var(--nlg-s-6) var(--nlg-margine); }
  /* Le pagine automatiche tengono sul telefono le misure della pagina 1:1:
     il codice a 120 px ci sta nei 354 px utili, e il blocco resta a 60 px. */
}

/* ── Telefono stretto: sotto i 300 px il logotipo lascia il posto ──
   La riga del telefono chiede 281 px. La resa del libro e' disegnata a
   272, e anche li' il comando esce dal bordo (misurato: a 272 il comando
   finiva 5 px fuori dalla finestra, tagliato). Sotto i 300 px resta la
   raggera a cinque barre, come fino alla 0.9.0, e restano «Preventivo» e
   il comando, le cose che la scheda del § 5.1.1 tiene sul telefono; il
   nome del sito resta sul collegamento. */
@media (max-width: 299px) {
  .nw-testata .nw-lockup__nome { display: none; }
}

/* ── Tavoletta: la riga della testata sta nella finestra ──
   Fra 720 e 1023 px la testata resta una barra (il cassetto e' del
   telefono), e con i passi del desktop la riga — lockup, quattro voci,
   «Richiedi preventivo» — misurava 768 px: da 720 a 767 la pagina scorreva
   di lato (revisione del 2026-10-01, misurato su contatti, termini, faq e
   home). Le distanze scendono a --nlg-s-3 e la riga entra con tutte le voci
   visibili. Non e' la soluzione della pagina 1:1 (`flex: 1; min-width: 0;
   overflow: hidden` sulle voci), che fra 720 e 767 tagliava «Contatti».
   Dalla 0.4.0 il lockup della testata e' raggera e logotipo alla misura
   della pagina 1:1 (193 px); fino alla 0.9.0, fra 720 e 949 px, restava la
   sola raggera, perche' col logotipo la riga non entrava. Sulla tavoletta
   il lockup ha ora le misure dell'anatomia della scheda del § 5.1.1
   («lockup raggera 22 px e logotipo») e della resa `layout/5-1-1-a.html`,
   che e' disegnata a 880 px: raggera 22, logotipo a corpo 14, e
   «Richiedi preventivo» con 14 px ai lati; la compatta (5-1-1-b) li
   stringe a 18 e 12,5. Le voci restano a corpo 14: Responsivita vieta di
   «rimpicciolire il testo per far stare tutto». Cosi' il nome ci sta da
   834 px (misurato col carattere di ripiego: a 834 la riga chiede 773 px
   dei 782 utili; con le misure della 1:1 ne chiedeva 798); sotto, la riga
   resta quella di prima, con la sola raggera — e fra 720 e 800 px la
   forma della riga resta da decidere (specifiche, aperti). Per il libro
   il simbolo senza il nome e' «la sola parte che scende sotto i 40 px».

   DAL BRAND BOOK 5.15.0 LA RIGA PORTA ANCHE I COMANDI A ICONA (§ 5.1.1,
   «Anatomia»): la luce e il filetto per tutti (49 px), e il pannello per
   chi ha l'accesso (89 px in tutto), piu' un passo della riga. Senza
   niente che ceda le voci andavano su due righe (misurato il 2026-10-30
   col carattere di ripiego di Chromium, che qui e' piu' largo di quello
   della misura di prima: senza comandi la riga col nome chiede 801 px).
   Le voci non vanno piu' a capo — una riga sola, come nelle testate delle
   pagine 1:1 (`white-space: nowrap`) —, e cedono, nell'ordine, il nome del
   lockup e poi la forma lunga dell'azione, che si accorcia in
   «Preventivo», la forma corta che il libro le da' sul telefono: l'azione
   resta, «l'unico comando che non sparisce mai». Le misure, con le voci
   su una riga: il visitatore chiede 862 px col nome, 742 con la sola
   raggera, 680 con la sola raggera e «Preventivo»; chi ha il pannello 902,
   782 e 720. Da desktop, coi passi della 1:1, 986 e 1026. Le soglie
   lasciano 18 px di margine; a 720 la riga di chi ha il pannello sta
   giusta, e se un carattere piu' largo la allunga, la riga entra nel
   margine di pagina invece di andare a capo. */
@media (min-width: 720px) and (max-width: 1023px) {
  .nw-testata .nw-testata__riga, .nw-testata__elenco { gap: var(--nlg-s-3); }
  .nw-testata .nw-lockup__intero .nw-marchio--raggera { height: 22px; }
  .nw-testata .nw-lockup__nome .nw-marchio--logotipo { height: 14px; }
  .nw-testata .nw-testata__azione { padding-inline: 14px; }
  .nlg-header--ridotto .nw-lockup__intero .nw-marchio--raggera { height: 18px; }
  .nlg-header--ridotto .nw-lockup__nome .nw-marchio--logotipo { height: 12.5px; }
}
@media (min-width: 720px) {
  .nw-testata__voce > .nlg-header__voce { white-space: nowrap; }
}
@media (min-width: 720px) and (max-width: 879px) {
  .nw-testata .nw-lockup__nome { display: none; }
}
@media (min-width: 720px) and (max-width: 919px) {
  .nw-testata--pannello .nw-lockup__nome { display: none; }
}
@media (min-width: 1024px) and (max-width: 1043px) {
  .nw-testata--pannello .nw-lockup__nome { display: none; }
}
@media (min-width: 720px) and (max-width: 759px) {
  .nw-testata .nw-testata__azione-lunga { display: none; }
  .nw-testata .nw-testata__azione-corta { display: inline; }
}
@media (min-width: 720px) and (max-width: 799px) {
  .nw-testata--pannello .nw-testata__azione-lunga { display: none; }
  .nw-testata--pannello .nw-testata__azione-corta { display: inline; }
}
/* Da desktop, nella riga sola delle 1:1 (le quindici testate di Layout
   1-1), fra raggera e logotipo ci sono 10 px, non il passo di 8. */
@media (min-width: 1024px) {
  .nw-testata .nw-lockup { gap: 10px; }
}

html.nw-cassetto-aperto { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nw-testata__freccia, .nw-testata .nw-lockup .nw-marchio { transition: none; }
}

/* ── Le tabelle dentro la prosa (prototipo 3.3.0) ────────────────────────
   Dalla 3.3.0 il pianificatore senza modello rende da tabelle le tabelle
   scritte dentro la prosa di una sezione, SENZA classe: la veste la da' il
   foglio del figlio (CHANGELOG-PROTOTIPO § 3.3.0, passo 5). E' quella della
   tabella del brand book (`.nlg-tabella` e `.nlg-tabella-cornice`, § 4.2.2),
   rifatta coi soli token su un selettore che non ridefinisce nessuna classe
   del libro. Sul telefono scorre la tabella, mai la pagina. */
[data-blocco="testo"] table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border: var(--nlg-linea) solid var(--nlg-border);
  border-radius: var(--nlg-r-lg);
  border-collapse: collapse;
  font-family: var(--nlg-font-text);
  font-size: var(--nlg-fs-body-sm);
  color: var(--nlg-text-1);
}
[data-blocco="testo"] table th {
  padding: var(--nlg-s-3) var(--nlg-s-4);
  text-align: left;
  font-family: var(--nlg-font-mono);
  font-weight: 500;
  font-size: var(--nlg-th-fs);
  letter-spacing: var(--nlg-ls-overline);
  text-transform: uppercase;
  color: var(--nlg-text-3);
  white-space: nowrap;
}
[data-blocco="testo"] table td {
  padding: var(--nlg-s-2) var(--nlg-s-4);
  text-align: left;
  vertical-align: top;
}
[data-blocco="testo"] table tbody tr { border-top: var(--nlg-linea) solid var(--nlg-border); }