/**
 * Noleggiando.com Tenant Website — sito pubblico.
 *
 * Layer applicativo del prototipo: consuma SOLO ruoli semantici (--sw-*),
 * che public/css/ponte.css scrive coi token del brand book Noleggiando:
 * --sw-* (colori, tipografia, spazi, raggi, ombre). Nessun colore
 * letterale: il kit si cambia da pannello (site.brand_kit) e la pagina
 * si riveste da sola.
 */

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

/* `hidden` deve vincere su qualunque display dichiarato qui sotto.
   Il display:none del browser sta nel foglio di user agent, che qualsiasi
   regola d'autore batte: senza questa riga un `.sw-consent { display:flex }`
   rende il banner impossibile da chiudere, perché il JS lo nasconde con
   l'attributo e il CSS lo rimette a schermo. */
[hidden] { display: none !important; }

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

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

.sw-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sw-bg-1);
  color: var(--sw-text-1);
  font: var(--sw-t-b)/var(--sw-t-b-lh) var(--sw-font-ui);
  -webkit-font-smoothing: antialiased;
}

/* L'inchiostro d'accento vale per i collegamenti di testo, NON per i
   bottoni: un <a class="nlg-btn"> ha il riempimento d'accento sotto, e li'
   ci va il token `on-`. Senza il :not() questa regola vinceva su .nlg-btn
   per specificita' — un elemento in piu' — e ogni bottone reso con un <a>
   scriveva accento su accento. Misurato sul kit rame chiaro: testo
   oklab(.441 .084 .076) su fondo rgb(176,70,23), praticamente illeggibile.
   E' la «regola dei due usi» del brand book: riempimento e inchiostro sono
   lo stesso accento a due quote diverse, e non sono intercambiabili. */
.sw-body a:not(.nlg-btn) { color: var(--sw-accent-1-text); }

/* Lo skip link del sito ha fondo d'accento ed e' un <a>: la riga qui
   sopra lo esclude solo se porta `.nlg-btn`, che non porta. Stessa
   difesa del kit, sui due stati del collegamento. */
a.sw-skip:link, a.sw-skip:visited { color: var(--sw-text-onaccent); }

.sw-body *:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sw-bg-1), 0 0 0 4px var(--sw-accent-1);
  position: relative;
  z-index: 1;
}

/* Contenitore del contratto delle sezioni: 1240px e' --sw-container, che il
   kit dichiara. Il ripiego a 1120px che stava qui non entrava mai in gioco
   — il token c'e' sempre — ma dichiarava un numero diverso da quello del
   contratto, e un numero fermo accanto a uno vivo prima o poi viene letto
   per buono. Il padding e' quello del repertorio: 40px, 24 sotto 720. */
.sw-container {
  width: min(var(--sw-container), 100% - 2 * var(--sw-sec-pad));
  margin-inline: auto;
}

.sw-skip {
  position: absolute;
  left: var(--sw-s3);
  top: -100px;
  z-index: 100;
  padding: var(--sw-s2) var(--sw-s4);
  background: var(--sw-accent-1);
  color: var(--sw-text-onaccent);
  border-radius: var(--sw-r1);
  text-decoration: none;
}
.sw-skip:focus { top: var(--sw-s3); }

/* ═══════════════════════ Header ═══════════════════════ */
/* Scheda del brand book § 5.1 (9.0.0) — la 9.0.0 ha riorganizzato il
   capitolo 05 e header, footer e barra laterale stanno tutti li'. Una
   riga appiccicata allo
   scroll, marchio e firma, le voci, il cubo del kit, il preventivo che
   non collassa mai. Le voci con un secondo livello aprono un mega-menu a
   colonne; su telefono lo stesso elenco diventa un cassetto da destra.
   E' UNO SOLO nel markup: srotolato in barra da desktop, impilato nel
   cassetto su telefono. Scritto due volte divergerebbe alla prima voce. */

.sw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--sw-line);
  background: var(--sw-surface-1);
}
/* La firma del kit in cima: «sta in cima all'header e in cima al footer,
   sono le due superfici principali della pagina» (scheda § 5.1). Mancava
   dalla 1.8.0: il filo c'era sull'apertura, non sulla barra. */
.sw-header::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--sw-gradient-kit);
}

.sw-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sw-s4);
  min-height: 64px;
}

/* Marchio e firma. La misura e' una scelta del layout, la forma e
   l'inchiostro vengono dal kit. */
.sw-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sw-s2);
  text-decoration: none;
  color: var(--sw-text-1);
  flex: none;
}
.sw-brand .nlg-mark { --sw-mark-size: 34px; }
.sw-brand .nlg-firma { --sw-firma-h: 15px; }

/* Il cassetto: da desktop non e' un cassetto, e' la barra. Il triangolino
   del summary sparisce e il pannello si srotola in linea. */
.sw-menu { flex: none; }
.sw-menu > summary { list-style: none; }
.sw-menu > summary::-webkit-details-marker { display: none; }

.sw-menu__apri {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--sw-r1);
}
.sw-menu__barre { display: grid; gap: 4px; }
.sw-menu__barre i { display: block; width: 20px; height: 2px; background: var(--sw-text-1); }
.sw-menu__velo { display: none; }
.sw-menu__chiudi { display: none; }

/* La navigazione si stira nella riga e passa l'altezza a chi ha dentro:
   e' il primo anello della catena che porta le voci fino al bordo basso
   dell'header — il perche' e' scritto sull'elenco, qui sotto. Senza
   `align-self` la nav resterebbe centrata e alta quanto il suo contenuto;
   senza `display: flex` l'elenco, che e' un blocco, sarebbe alto quanto il
   proprio testo e la catena si spezzerebbe li' senza dirlo. */
.sw-nav {
  min-width: 0;
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: stretch;
}

/* LE VOCI ARRIVANO AL BORDO BASSO DELL'HEADER, e non e' un vezzo.

   Il pannello del mega-menu si apre a `top: 100%` del suo blocco
   contenitore, che e' l'header: comincia dove l'header finisce. L'hover
   invece lo regge la VOCE, che era alta quanto la sua pastiglia — 40px —
   e centrata nella barra. In mezzo restavano 12px di niente: li' il
   puntatore non era piu' sulla voce e non era ancora sul pannello,
   l'hover cadeva, il pannello tornava a `display:none` — e non si
   riapriva, perche' sparendo smetteva anche di stare sotto il puntatore
   che lo stava raggiungendo. Non uno sfarfallio: un chiavistello. Il
   secondo livello del menu era irraggiungibile col mouse, ed e' andato in
   produzione cosi' finche' il committente non l'ha segnalato.

   L'altezza NON si dichiara qui: si eredita, lungo la catena
   `.sw-header__inner` -> `.sw-nav` -> questo elenco -> la voce. E' la
   differenza fra chiudere il buco e tenerlo chiuso: una seconda misura
   scritta qui direbbe 64 anche il giorno in cui la riga ne misurasse 72
   — e le voci tornerebbero a galleggiare in mezzo, col buco riaperto
   sopra e sotto. Derivata, l'altezza segue la riga qualunque cosa le
   succeda.

   La barra non cambia di un pixel: la pastiglia dipinta dall'hover resta
   quella del link, che dentro la voce sta al centro. Si allarga cio' che
   si PUNTA, non cio' che si VEDE. */
.sw-nav__voci {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--sw-s1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sw-nav__coda { display: none; }

/* `position: static` e' voluto: e' cio' che fa prendere a `.sw-mega`
   l'header come blocco contenitore, e quindi la larghezza della finestra.
   Reso relativo, il pannello collasserebbe alla larghezza della voce. */
.sw-voce { position: static; display: flex; align-items: center; }
.sw-voce__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sw-s1);
  padding: var(--sw-s2) var(--sw-s3);
  border-radius: var(--sw-r1);
  text-decoration: none;
  color: var(--sw-text-2);
  white-space: nowrap;
}
.sw-voce__link:hover { color: var(--sw-text-1); background: var(--sw-surface-2); }
/* La voce attiva: testo pieno e un filo di 2px in accento sul bordo basso
   della barra, come nei mock del § 5.1 — non una pastiglia tinta, che e'
   il segno dell'hover e non del «sei qui». Il filo sta a -12px perche' il
   link e' alto 40 in una barra di 64: cosi' tocca il bordo. */
.sw-voce__link.is-active { color: var(--sw-text-1); }
.sw-voce__link.is-active::after {
  content: "";
  position: absolute;
  inset-inline: var(--sw-s3);
  inset-block-end: -12px;
  height: 2px;
  background: var(--sw-accent-1);
}
/* IL COLORE DELLE VOCI LO DICE UN SELETTORE COL TAG: `.sw-nav a.sw-voce__link`
   pesa 0,2,1 quanto la regola dei collegamenti di testo
   (`.sw-body a:not(.nlg-btn)`, in cima al foglio) e, a parita', vince
   l'ultima dichiarata — questa. Con la sola classe (0,1,0) le tre regole
   qui sopra dichiaravano un colore che non arrivava mai a schermo: le
   voci stavano in accento in ogni stato, hover e «sei qui» compresi, e
   nessun test lo vedeva. Visto al collaudo della 1.12.0, dopo che il
   piede aveva avuto lo stesso difetto (e la stessa cura, piu' sotto). Il
   coperchio del cassetto e' un <button>, non un <a>: a lui la regola dei
   collegamenti non arriva, e gli basta la classe. */
.sw-nav a.sw-voce__link { color: var(--sw-text-2); }
.sw-nav a.sw-voce__link:hover { color: var(--sw-text-1); }
.sw-nav a.sw-voce__link.is-active { color: var(--sw-text-1); }
.sw-voce__segno { font-style: normal; color: var(--sw-text-3); }

/* Il mega-menu. Si apre col passaggio del mouse E col fuoco da tastiera:
   sono due righe di CSS, e sono cio' che rende il secondo livello
   raggiungibile senza script.

   DALLA 1.12.0 QUI NON SI DIPINGE PIU' NIENTE. Il pannello e' il
   componente `.nlg-megamenu` del brand book (§ 4.23): vetro, bordo,
   raggio in basso, elevazione e griglia li porta lui. `.sw-mega` fa solo
   il mestiere che il componente non fa — DOVE si apre e QUANDO — e
   ridipingere il fondo qui darebbe due cornici sovrapposte. */
.sw-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
}
.sw-voce--mega:hover > .sw-mega,
.sw-voce--mega:focus-within > .sw-mega { display: block; }

/* LA GRAZIA IN USCITA, e sta in una regola sua per un motivo: le due
   righe qui sopra sono l'ACCESSO — senza script il secondo livello si
   raggiunge con quelle, e non devono dipendere da niente. Questa e'
   COMODITA', e la mette lo script (`sito-menu.js`): tiene aperto il
   pannello per un istante dopo che il puntatore e' uscito, cosi' chi
   taglia di sbieco verso una colonna lontana, o sfiora il vuoto di 4px
   fra due voci, non lo perde a meta' strada. Tolto lo script, resta
   l'accesso e si perde solo la tolleranza. */
.sw-voce--mega.is-attardata > .sw-mega { display: block; }

/* La voce che non ha una pagina propria: apre il menu e basta. E' un
   <button>, quindi va rimesso alla resa della voce — un bottone porta
   fondo, bordo e carattere suoi dal browser. Il mega menu si apre lo
   stesso col passaggio del mouse e col fuoco, perche' le due regole di
   sopra guardano la VOCE e non il tipo di elemento che c'e' dentro. */
.sw-voce__link--coperchio {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
}

/* Il titolo di un gruppo che E' anche una pagina: stessa resa del titolo
   del componente, piu' il fatto di essere raggiungibile. */
.sw-mega__titolo-link { text-decoration: none; }
.sw-mega__titolo-link:hover { color: var(--sw-text-1); }

/* La voce che porta al resto della colonna tagliata. Non e' una voce come
   le altre e non deve sembrarlo: e' l'uscita dal menu verso la pagina che
   le ha tutte. */
.sw-mega__oltre { color: var(--sw-accent-1-text); font-weight: 600; }

/* Le azioni nella coda del componente. */
.sw-mega__azione {
  color: var(--sw-text-2);
  text-decoration: none;
  font: 500 var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-ui);
}
.sw-mega__azione:hover { color: var(--sw-text-1); }
.sw-mega__azione.is-primaria { color: var(--sw-accent-1-text); font-weight: 600; }
.sw-mega__nota {
  margin-left: auto;
  color: var(--sw-text-3);
  font: 400 var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-ui);
}

/* Il cubo del kit e il preventivo: restano in barra a ogni larghezza.
   La scheda e' esplicita sul secondo — «non collassa mai».

   Il cubo e' un comando: 44px di tocco, e dentro la cornice della scheda
   (`.mcube`: un quadrato col bordo e il raggio piccolo del kit) con il
   cubo a tre luminanze. Aperto il pannello, la cornice si tinge. */
.sw-header__cubo {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex: none;
}
.sw-header__cubo-cornice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--sw-line-strong);
  border-radius: var(--sw-r1);
  transition: background-color var(--sw-dur-2) var(--sw-ease), border-color var(--sw-dur-2) var(--sw-ease);
}
.sw-header__cubo:hover .sw-header__cubo-cornice { background: var(--sw-surface-2); }
.sw-header__cubo[aria-expanded="true"] .sw-header__cubo-cornice { background: var(--sw-accent-1-tint); border-color: var(--sw-accent-1); }
.sw-header__cubo:focus-visible { outline: none; }
.sw-header__cubo:focus-visible .sw-header__cubo-cornice { box-shadow: var(--sw-focus-ring); }
.sw-header__cubo .nlg-cube { width: 16px; }
.sw-header__cta { flex: none; }
/* La riga del preventivo sotto la barra esiste solo su telefono. */
.sw-header__cta-riga { display: none; }
.sw-header__cta-telefono { width: 100%; justify-content: center; }
/* Il titolo «Aspetto del sito» in fondo al cassetto: l'etichetta mono
   della scheda. */
.sw-nav__coda-titolo {
  margin: 0;
  font: 700 var(--sw-t-ov)/var(--sw-t-ov-lh) var(--sw-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sw-text-3);
}

/* ═══════════════ Il selettore del kit — brand book § 3.10 ═══════════════

   La taglia «orizzontale piccolo» dell'elemento di design che il brand
   book destina a «barra, piede, apertura»: un tondo per kit coi colori
   veri di quel kit, la luce a tre voci, la riga di stato. Le misure sono
   quelle della scheda `guidelines/brand-selettori-kit.html` e non si
   arrotondano ai token dove la scheda dice un numero: il tondo e' 22px,
   l'area che si tocca 44, l'alone dell'attivo 3px, la scala 1.1.

   Fino alla 1.11.0 il sito aveva un selettore suo — chip rettangolari con
   tre puntini, «Auto» per prima, nessuno stato — che il committente ha
   chiamato «fuori standard». Lo era: il brand book lo aveva gia' disegnato
   e il sito ne aveva fatto un altro.

   I COLORI SONO VERI perche' ogni tondo sta nel proprio `data-kit` (nel
   markup) e `--sw-gradient-kit` si risolve li' dentro: qui non si nomina
   nessun colore, e il presidio dei colori letterali vale anche per questo
   blocco. */

.sw-selettore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
/* La forma PIENA e' la scheda: una lastra di vetro col bordo e il raggio
   del kit, che sta da sola (nel pannello aperto dal cubo, in fondo al
   cassetto). */
.sw-selettore--pieno {
  padding: 14px 18px;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r3);
  background: var(--sw-glass-fill);
}
/* La riga va a capo dove non ci sta — nel cassetto e nel pannello su
   telefono la pillola della luce scende sotto i tondi, come nella taglia
   verticale della scheda — invece di sbordare. Fra le righe 22px, non 9:
   i bersagli dei tondi scendono di 11px sotto il cerchio e quello della
   pillola sale di 11px sopra, e a 9px si toccavano — un tocco sul kit
   cambiava la luce. La revisione l'ha misurato a 390. */
.sw-selettore__riga { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px var(--sw-s2); }
.sw-selettore__kits { display: flex; align-items: center; gap: var(--sw-s2); }

/* IL TONDO E L'AREA CHE SI TOCCA sono due cose: 22px si vedono, 44 si
   toccano in altezza. Il bottone e' l'area, senza fondo, e il tondo e' il
   suo ::before. In LARGHEZZA il bersaglio e' 30px — il tondo piu' meta'
   dello spazio da ciascun lato — perche' la scheda vuole i tondi a 8px
   l'uno dall'altro E 44px di tocco, e le due cose insieme non stanno: con
   44 di larghezza ogni bottone copriva 14px del vicino, e nella zona
   contesa vinceva l'ultimo nel DOM, o quello col fuoco — un clic sul bordo
   destro di Purple sceglieva Pop. Meglio 30x44 esclusivi che 44 contesi.
   Nel piede, coi tondi da 16, sono 24x44. */
.sw-selettore__kit { position: relative; display: block; width: 22px; height: 22px; }
.sw-selettore__tondo {
  position: absolute;
  inset: -11px -4px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--sw-r-full);
  cursor: pointer;
}
.sw-selettore__tondo::before {
  content: "";
  position: absolute;
  inset: 11px 4px;
  box-sizing: border-box;
  border-radius: var(--sw-r-full);
  background: var(--sw-gradient-kit);
  border: 1px solid var(--sw-line-strong);
  transition: transform var(--sw-dur-2) var(--sw-ease), box-shadow var(--sw-dur-2) var(--sw-ease), border-color var(--sw-dur-2) var(--sw-ease);
}
/* «L'attivo prende bordo --sw-text-1, alone --sw-accent-1-tint e scala 1.1.» */
.sw-selettore__tondo[aria-pressed="true"]::before {
  border-color: var(--sw-text-1);
  box-shadow: 0 0 0 3px var(--sw-accent-1-tint);
  transform: scale(1.1);
}
.sw-selettore__tondo:hover::before { transform: scale(1.06); }
.sw-selettore__tondo:focus-visible { outline: none; }
.sw-selettore__tondo:focus-visible::before { box-shadow: var(--sw-focus-ring); }

.sw-selettore__separatore { display: block; width: 1px; height: 20px; background: var(--sw-line-strong); margin: 0 2px; }

/* La luce: una pillola con le tre voci, «Chiara · Scura · Sistema». Il
   bersaglio si allarga con un ::after invisibile, non col padding, cosi'
   la pillola resta alta quanto nella scheda. */
.sw-selettore__luci {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r-full);
  background: var(--sw-surface-1);
}
.sw-selettore__luce {
  position: relative;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--sw-r-full);
  background: none;
  font: 600 10.5px/1 var(--sw-font-ui);
  color: var(--sw-text-2);
  cursor: pointer;
  transition: background-color var(--sw-dur-2) var(--sw-ease), color var(--sw-dur-2) var(--sw-ease);
}
.sw-selettore__luce::after { content: ""; position: absolute; inset: -11px 0; }
.sw-selettore__luce:hover { color: var(--sw-text-1); }
.sw-selettore__luce[aria-pressed="true"] { background: var(--sw-accent-1); color: var(--sw-text-onaccent); }
.sw-selettore__luce:focus-visible { outline: none; box-shadow: var(--sw-focus-ring); }

/* «Stato dichiarato — sotto il selettore, sempre.» */
.sw-selettore__stato {
  margin: 0;
  font: 700 8.5px/12px var(--sw-font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sw-text-3);
}

/* La forma A RIGA e' quella della riga legale del piede: l'etichetta e i
   tondi in linea, piu' piccoli, senza luce e senza stato — e' cosi' che
   la scheda del footer la disegna. */
.sw-selettore--riga { flex-direction: row; gap: var(--sw-s2); }
.sw-selettore--riga .sw-selettore__etichetta {
  font: 400 var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-mono);
  color: var(--sw-text-3);
}
.sw-selettore--riga .sw-selettore__kit { width: 16px; height: 16px; }
.sw-selettore--riga .sw-selettore__tondo { inset: -14px -4px; }
.sw-selettore--riga .sw-selettore__tondo::before { inset: 14px 4px; }

/* Il pannello che il cubo apre in barra: «Icona cubo nella topbar» e,
   sotto, il selettore — mai un popup all'ingresso, e questo si apre solo
   al clic. Sta sotto la barra, a destra, sulla stessa colonna del cubo;
   e' una lastra di vetro come il mega-menu e non un <dialog>: non blocca
   la pagina e si chiude con Esc o cliccando fuori. */
.sw-aspetto-pannello {
  position: absolute;
  /* Il bordo destro e' quello del CONTENITORE, non della finestra: da
     1320px in su i due divergono e il pannello sbordava di 60px oltre il
     preventivo, a 1920 stava mezzo metro a destra del cubo che lo apre. */
  inset-inline-end: max(var(--sw-sec-pad), calc((100% - var(--sw-container)) / 2));
  top: 100%;
  margin-top: var(--sw-s2);
  padding: var(--sw-s4);
  display: grid;
  gap: var(--sw-s3);
  justify-items: start;
  background: var(--sw-glass-panel);
  border: 1px solid var(--sw-glass-stroke);
  border-radius: var(--sw-r3);
  box-shadow: var(--sw-e3);
  backdrop-filter: blur(var(--sw-glass-blur));
  -webkit-backdrop-filter: blur(var(--sw-glass-blur));
}
.sw-aspetto-pannello[hidden] { display: none; }
.sw-aspetto-pannello__titolo {
  margin: 0;
  font: 600 var(--sw-t-bs)/var(--sw-t-bs-lh) var(--sw-font-ui);
  color: var(--sw-text-1);
}
.sw-aspetto-pannello__nota {
  margin: 0;
  font: 400 var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-ui);
  color: var(--sw-text-3);
}

/* Il testo che resta nel documento ma non a schermo: lo sente chi usa un
   lettore di schermo, non lo vede chi guarda. */
.sw-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;
}

/* ═══════════════════════ Sezioni ═══════════════════════ */

.sw-main { flex: 1; }


/* ═══════════════════════ Apertura ═══════════════════════

   La sezione che deve reggere l'impatto. Fondo PIENO, mai un gradiente:
   e' la regola di ogni apertura del sito, e vale anche dove un canvas 3D
   non c'e' piu' — un canvas e' opaco e dipinge come sfondo il colore
   reale sotto di se', su un gradiente si vedrebbe il riquadro (brand book
   6.0.0, `guidelines/brand-volume-3d.html` § 03).

   Due varianti: la landing (`--landing`, testo a piena misura) e il
   marchio al taglio della home (`--taglio`, piu' sotto). Le regole senza
   variante sono il tronco comune. */

.sw-apertura {
  position: relative;
  background: var(--sw-bg-1);
  padding-block: var(--sw-s9) var(--sw-s8);
  overflow: hidden;
}
/* Il filo di firma del kit, una volta sola: e' la prima superficie. Sta
   sopra il marchio al taglio, che ai bordi della sezione ci arriva: senza
   un ordine dichiarato il marchio, posizionato dopo, gli passerebbe sopra
   e lo velerebbe per meta' larghezza. */
.sw-apertura::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--sw-gradient-kit);
}
.sw-apertura__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--sw-s8);
  align-items: center;
}
.sw-apertura__overline {
  margin: 0 0 var(--sw-s4);
  font: 700 var(--sw-t-ov)/var(--sw-t-ov-lh) var(--sw-font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--sw-accent-1-text);
}
/* Il titolo dell'apertura e' un TITOLO BRAND, l'unico uso che il brand
   book concede al carattere display insieme ai numeri hero. Va quindi con
   `.nlg-display`, che porta la regola giusta; qui resta solo la misura.

   Il peso NON si tocca: Michroma esiste in un peso solo, il 400. La
   dichiarazione precedente chiedeva 700 e il browser lo fabbricava
   ingrossando i contorni — un finto grassetto su un carattere geometrico,
   che e' il modo piu' rapido di far sembrare sciatto un marchio. */
.sw-apertura__titolo {
  margin: 0 0 var(--sw-s5);
  font-size: var(--sw-t-d1);
  line-height: var(--sw-t-d1-lh);
  text-wrap: balance;
}
.sw-apertura__lead {
  margin: 0 0 var(--sw-s6);
  max-width: 52ch;
  font: 400 var(--sw-t-bl)/var(--sw-t-bl-lh) var(--sw-font-ui);
  color: var(--sw-text-2);
}
/* Due paragrafi di lead si seguono a distanza di un solo passo. */
.sw-apertura__lead + .sw-apertura__lead { margin-top: calc(var(--sw-s4) - var(--sw-s6)); }
/* L'H1 del documento e' lungo (quaranta e piu' caratteri): a d1 sarebbe
   un muro di tre righe di display. Scende a d2, che e' ancora un titolo
   brand e non un titolo di contenuto. */
.sw-apertura__titolo--lungo { font-size: var(--sw-t-d2); line-height: var(--sw-t-d2-lh); max-width: 22ch; }
/* La landing: apertura corta, senza costellazione, il testo a piena
   misura. Deve portare in fondo, non trattenere in cima. */
.sw-apertura--landing { padding-block: var(--sw-s8) var(--sw-s7); }
.sw-apertura--landing .sw-apertura__lead { max-width: 60ch; }
.sw-apertura__azioni { display: flex; gap: var(--sw-s4); flex-wrap: wrap; }
.sw-apertura__palette { margin-top: var(--sw-s7); width: 240px; }

/* ── Il marchio al taglio (la home, dal round 1.12.0) ──

   La P2b scelta dal committente fra le aperture del settimo giro: il
   testo a sinistra alla misura display piena e, dietro, il MARCHIO DEL
   KIT a colori — le quattro lamine del componente, non un PNG — a 720px
   con 270px fuori dal bordo destro: tagliato, smette di leggersi come
   marchio e diventa una lamina di colore. Da desktop il testo non lo
   tocca: la griglia tiene una colonna vuota da 340px alla sua destra, e
   il titolo si ferma a 17ch. La proposta teneva 380: a 1240 reali
   il titolo lungo del padre (730px a d1) non entrava nei 716 della colonna e il
   titolo usciva su quattro righe, dove la resa approvata ne ha tre — il
   suo desktop era una copia rimpicciolita, e a zoom il testo va a capo
   qualche pixel dopo. Con 340 la colonna e' 756 e le righe sono tre da
   1240 in su; il glifo piu' a destra resta 19px prima del marchio. Sul
   telefono gli passa sopra con la prima riga, a opacita' .10, e per
   questo il marchio sta SOTTO il contenitore nella pila.

   La sezione e' alta almeno 640px e il contenuto ci sta al centro: e'
   la misura della resa approvata a 1240, e coi 96/64 di respiro del
   tronco comune il testo cade dove cadeva nella proposta.

   Il marchio si ancora al bordo della SEZIONE, non del contenitore: il
   taglio e' il concetto, e deve restare lo stesso a 1024 come a 1920.
   Ancorato al contenitore, a 1920 il marchio rientrerebbe per intero e
   del taglio non resterebbe niente.

   Nessun elemento 3D: la home non scarica il runtime. E nessun colore
   scritto — il marchio si ri-inchiostra dal kit, l'opacita' e' l'unica
   cosa che questo foglio gli dice. */
.sw-apertura--taglio {
  min-height: 640px;
  display: grid;
  align-content: center;
}
.sw-apertura--taglio .sw-apertura__inner {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
}
.sw-apertura--taglio .sw-apertura__titolo { max-width: 17ch; }
.sw-apertura__marchio {
  position: absolute;
  z-index: 0;
  --sw-mark-size: 720px;
  inset-block-start: 50%;
  inset-inline-end: -270px;   /* 3/8 della taglia fuori dal bordo: e' una proporzione del marchio, non un passo della scala */
  transform: translateY(-50%);
  opacity: .12;
  pointer-events: none;
}

/* ═══════════════════════ Testo + media ═══════════════════════ */

.sw-affianco__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sw-s8);
  align-items: center;
}
.sw-affianco__media { display: flex; justify-content: center; align-items: center; }
/* Il media riempie la colonna: la scheda vuole «6+6, allineamento al
   centro, media in 4:3», e un elemento piccolo in mezzo a mezza pagina
   vuota non e' una prova visiva, e' un buco. */
.sw-affianco__media nlg-elemento { max-width: 100%; }
.sw-affianco__testo p { margin: 0 0 var(--sw-s4); color: var(--sw-text-2); max-width: 56ch; }
.sw-affianco__testo .sw-sec__title { margin-bottom: var(--sw-s5); }

/* ═══════════════════════ Card ═══════════════════════ */

.sw-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sw-s5);
}
.sw-cards--two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.sw-card {
  background: var(--sw-surface-1);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r3);
  padding: var(--sw-s6);
  box-shadow: var(--sw-e1);
}
.sw-card--link { text-decoration: none; color: inherit; display: block; }
.sw-card--link:hover { border-color: var(--sw-accent-1); box-shadow: var(--sw-e2); }
.sw-card__title { margin: 0 0 var(--sw-s3); font: 600 var(--sw-t-h3)/var(--sw-t-h3-lh) var(--sw-font-ui); }
.sw-card__text { margin: 0; color: var(--sw-text-2); }

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

.sw-page__title { margin: 0 0 var(--sw-s4); font: 700 var(--sw-t-h1)/var(--sw-t-h1-lh) var(--sw-font-ui); }
.sw-page__lead { 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); }
.sw-page--narrow { max-width: 640px; }
.sw-page__logout { margin-top: var(--sw-s6); }

.sw-prose { max-width: 68ch; }
.sw-prose h1 { font: 700 var(--sw-t-h1)/var(--sw-t-h1-lh) var(--sw-font-ui); margin: 0 0 var(--sw-s4); }
.sw-prose h2 { font: 600 var(--sw-t-h2)/var(--sw-t-h2-lh) var(--sw-font-ui); margin: var(--sw-s6) 0 var(--sw-s3); }
.sw-prose p { margin: 0 0 var(--sw-s4); color: var(--sw-text-2); }

/* ═══════════════════════ Form ═══════════════════════ */

/* Il modulo pubblico sta su una lastra: la stessa `.nlg-card` in vetro
   della scheda di accesso, col filo di firma in cima. Il respiro interno
   e' quello della scheda; sotto i 640px si stringe, perche' un modulo che
   tocca i bordi dello schermo si compila peggio. */
.sw-modulo { padding: var(--sw-s7); margin-top: var(--sw-s6); }
.sw-modulo .sw-glass__firma { margin: calc(var(--sw-s7) * -1) calc(var(--sw-s7) * -1) var(--sw-s6); }

@media (max-width: 640px) {
  .sw-modulo { padding: var(--sw-s5); }
  .sw-modulo .sw-glass__firma { margin: calc(var(--sw-s5) * -1) calc(var(--sw-s5) * -1) var(--sw-s5); }
}

/* IL CAMPO NON SI RIDICHIARA QUI. Fino alla 1.11.0 il sito aveva il
   proprio — `.sw-field`, `.sw-label`, `.sw-input` — e non era una
   variante: era un QUARTO campo, diverso dai tre che il brand book
   approva. Le differenze si vedevano: fondo opaco dove il kit vuole il
   vetro, etichetta in tondo dove il kit la vuole maiuscoletta e spaziata,
   raggio r1 invece di r2, altezza composta con min-height + padding
   invece dei 44px fissi, e nessun anello di fuoco.
   Ora si usano `.nlg-field`, `.nlg-label`, `.nlg-input`, `.nlg-select`,
   `.nlg-textarea` del kit, con la resa che il § 4.22 assegna al CONTESTO:
   campo pieno sui moduli pubblici, campo a filo sull'accesso. */

.sw-check { display: flex; gap: var(--sw-s2); align-items: flex-start; color: var(--sw-text-2); }
.sw-check input { margin-top: 4px; accent-color: var(--sw-accent-1); }

/* Anche la GRIGLIA del modulo viene dal kit: `.nlg-form` e `.nlg-form--due`,
   coi campi lunghi che prendono la riga intera con `.nlg-form-piena`. Il
   riquadro `sw-form__due` faceva la stessa cosa un livello piu' in
   basso — due impianti di griglia per un risultato solo. */

/* Il campo rifiutato dal server lo dice con `aria-invalid="true"`, che il
   kit gia' colora: e' un ATTRIBUTO e non una classe, quindi lo stato lo
   legge anche chi naviga con uno screen reader. Prima erano due cose da
   tenere d'accordo — la classe per il colore, l'attributo per
   l'assistiva — e in due moduli su tre ne compariva una sola. */

/* Le scelte a caselle del kit (`.nlg-check`), disposte in colonna o in
   riga: sono i campi del preventivo e della candidatura, dove un elenco
   di voci si legge meglio di una tendina e si tocca meglio su telefono. */
.sw-scelte { display: grid; gap: var(--sw-s2); }
.sw-scelte--riga { grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); gap: var(--sw-s2) var(--sw-s5); }
.sw-scelte__voce { color: var(--sw-text-1); }
.sw-scelte.is-invalid { padding-inline-start: var(--sw-s3); border-inline-start: 2px solid var(--sw-err); }

/* Il bottone e' `.nlg-btn` del brand book. Qui c'era una copia locale —
   `.sw-btn`, con le stesse dichiarazioni scritte a mano — e una copia e'
   un fork silenzioso: il giorno in cui il brand book cambia il bottone,
   niente qui dentro lo sa. Restano solo le due cose che il componente non
   porta: il taglio grande dell'apertura e il fatto che un <a> non e' un
   <button> e non eredita text-decoration. */
a.nlg-btn { text-decoration: none; }
.sw-lg { height: 52px; padding-inline: var(--sw-s6); font-size: 16px; }

/* ─────────────────── Il modulo a passi ───────────────────
   Un <form> solo, in piu' <fieldset>: lo script ne mostra uno per volta
   con Avanti e Indietro, e senza script stanno tutti uno sotto l'altro
   (le regole qui sotto valgono solo con `is-a-passi`, che mette lo
   script). L'avanzamento e' la barra del kit, `.nlg-progress`. */
.sw-passi-modulo__passo { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--sw-s4); }
.sw-passi-modulo__passo + .sw-passi-modulo__passo { margin-top: var(--sw-s5); padding-top: var(--sw-s5); border-top: 1px solid var(--sw-line); }
.sw-passi-modulo__titolo { padding: 0; margin: 0 0 var(--sw-s2); font: 600 var(--sw-t-h3)/var(--sw-t-h3-lh) var(--sw-font-ui); }
.sw-passi-modulo__avanzamento { display: grid; gap: var(--sw-s2); }
.sw-passi-modulo__dove { margin: 0; font: 700 var(--sw-t-ov)/var(--sw-t-ov-lh) var(--sw-font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--sw-text-3); }
.sw-passi-modulo__promessa { margin: 0; color: var(--sw-text-3); font: 400 var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-mono); }
.sw-passi-modulo__azioni { display: flex; gap: var(--sw-s3); flex-wrap: wrap; justify-content: flex-end; }
.sw-passi-modulo__canali { margin-top: var(--sw-s7); }
/* Con lo script: un passo per volta, e il filo fra i passi sparisce
   perche' non ci sono due passi da separare. */
.is-a-passi .sw-passi-modulo__passo:not(.is-corrente) { display: none; }
.is-a-passi .sw-passi-modulo__passo + .sw-passi-modulo__passo { margin-top: 0; padding-top: 0; border-top: 0; }

/* ─────────────────── I canali diretti ───────────────────
   Un elenco di azioni da 44px: nome del canale e cosa succede. */
.sw-canali { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sw-canali__voce { border-top: 1px solid var(--sw-line); }
.sw-canali__voce:last-child { border-bottom: 1px solid var(--sw-line); }
.sw-canali__link { display: flex; justify-content: space-between; gap: var(--sw-s3); min-height: var(--sw-hit-min); align-items: center; padding-block: var(--sw-s2); text-decoration: none; }
.sw-canali__nome { font: 600 var(--sw-t-b)/var(--sw-t-b-lh) var(--sw-font-ui); color: var(--sw-text-1); }
.sw-canali__testo { color: var(--sw-text-2); text-align: end; }
.sw-canali__link:hover .sw-canali__nome { color: var(--sw-accent-1-text); }

/* ─────────────────── Contatti ───────────────────
   Il modulo a sinistra, largo; i canali e la sede a destra, stretti.
   Sotto i 900px il modulo scende sotto i canali: chi arriva da telefono
   vuole prima il numero, poi il campo. */
.sw-contatti { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sw-sec-gap); align-items: start; }
.sw-contatti__modulo { margin-top: 0; }
.sw-contatti__lato { display: grid; gap: var(--sw-s7); }
.sw-contatti__blocco .sw-sec__overline { margin-bottom: var(--sw-s3); }
.sw-contatti__sede { font-style: normal; margin: 0; color: var(--sw-text-1); }
.sw-contatti__nota { margin: var(--sw-s2) 0 0; color: var(--sw-text-2); }

/* ─────────────────── Domande frequenti ───────────────────
   <details> nativi, divisi da fili: nessuno script, e il titolo dentro il
   summary resta un h3 per l'indice della pagina. */
.sw-faq { display: grid; gap: 0; max-width: 76ch; }
.sw-faq__voce { border-top: 1px solid var(--sw-line); }
.sw-faq__voce:last-child { border-bottom: 1px solid var(--sw-line); }
.sw-faq__domanda { cursor: pointer; padding-block: var(--sw-s4); list-style: none; display: flex; justify-content: space-between; gap: var(--sw-s4); align-items: baseline; min-height: var(--sw-hit-min); }
.sw-faq__domanda::-webkit-details-marker { display: none; }
.sw-faq__domanda h3 { margin: 0; font: 600 var(--sw-t-h3)/var(--sw-t-h3-lh) var(--sw-font-ui); }
.sw-faq__domanda::after { content: "+"; flex: none; font: 400 var(--sw-t-h2)/1 var(--sw-font-mono); color: var(--sw-text-3); }
.sw-faq__voce[open] .sw-faq__domanda::after { content: "−"; }
.sw-faq__risposta { margin: 0 0 var(--sw-s5); color: var(--sw-text-2); max-width: 68ch; }

/* ═══════════════════════ Avvisi ═══════════════════════ */

.sw-flash { margin-top: var(--sw-s5); }
.sw-alert {
  padding: var(--sw-s3) var(--sw-s4);
  border-radius: var(--sw-r2);
  margin-bottom: var(--sw-s4);
  border: 1px solid var(--sw-line);
}
.sw-alert--ok { background: var(--sw-ok-tint); color: var(--sw-text-1); }
.sw-alert--err { background: var(--sw-err-tint); color: var(--sw-text-1); }
.sw-alert__list { margin: 0; padding-left: var(--sw-s5); }

/* ═══════════════════════ Accesso e area riservata ═══════════════════════ */

.sw-auth { display: flex; justify-content: center; padding-inline: var(--sw-s5); }
.sw-auth__card {
  width: min(420px, 100%);
  background: var(--sw-surface-1);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r3);
  padding: var(--sw-s7);
  box-shadow: var(--sw-e2);
}
.sw-auth__lockup { margin: 0 0 var(--sw-s5); --sw-lockup-h: 40px; }
.sw-auth__title { margin: 0 0 var(--sw-s4); font: 600 var(--sw-t-h2)/var(--sw-t-h2-lh) var(--sw-font-ui); }
.sw-auth__intro { margin: 0 0 var(--sw-s5); color: var(--sw-text-2); }
.sw-auth__submit { width: 100%; }
.sw-auth__aside { margin: var(--sw-s5) 0 0; text-align: center; }
.sw-auth__steps { margin: 0 0 var(--sw-s5); padding-left: var(--sw-s5); color: var(--sw-text-2); }
.sw-auth__steps li { margin-bottom: var(--sw-s2); }

/* ═══════════════════════ Footer ═══════════════════════ */
/* Scheda del brand book § 5.1 (9.0.0, `guidelines/layout-header-footer`,
   mock 10a «A fianco — firma 2C e targhetta nell'anteprima»): fondo
   --sw-bg-0 con la firma del kit in cima; una PRIMA FASCIA a due colonne
   — a sinistra la firma a fianco, i collegamenti su una riga e i social a
   parola, a destra due prodotti del catalogo pescati a caso col nome in
   targhetta DENTRO l'anteprima —; la riga legale col marchio monocromo e
   l'aspetto del sito; in coda, sempre, la dicitura storica su tre righe.
   Il mock desktop e' a scala ridotta (640px per un contenitore di 1240):
   le misure NON si copiano in pixel, si riportano ai token del kit, e
   dove la scheda dice un numero reale — 50px di maiuscole per la firma,
   14px per la dicitura — vale quello. */

.sw-footer {
  position: relative;
  background: var(--sw-bg-0);
  padding-block: var(--sw-s6) var(--sw-s4);
  margin-top: var(--sw-s8);
}
/* La firma del kit in cima: «sta in cima all'header e in cima al footer,
   sono le due superfici principali della pagina» (scheda § 5.1). Fino
   alla 1.11.0 qui c'era un filetto neutro, e la firma stava solo in
   barra. */
.sw-footer::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--sw-gradient-kit);
}

/* ── La prima fascia: firma, collegamenti e social a sinistra, la vetrina
   a destra ──────────────────────────────────────────────────────────── */
/* Una griglia con le aree nominate e non due contenitori annidati: cosi'
   la vetrina, che da desktop sta nella colonna destra accanto a tutta la
   colonna di sinistra, sul telefono si infila fra la firma e i
   collegamenti — l'ordine del mock telefono — cambiando le aree e basta,
   senza spostare markup. La colonna destra e' `auto`: la misura la
   decidono le tessere, non la pagina. */
.sw-footer__fascia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "firma vetrina"
    "nav vetrina"
    "social vetrina";
  gap: var(--sw-s4) var(--sw-s6);
  align-items: start;
  justify-items: start;
}
/* Senza catalogo la colonna destra non esiste: senza questa regola la
   griglia terrebbe il respiro di una colonna vuota e, sul telefono, il
   doppio respiro di una riga vuota. Due classi perche' deve vincere anche
   sulle aree che le media query ridichiarano. */
.sw-footer__fascia.sw-footer__fascia--senza-vetrina {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "firma" "nav" "social";
}
.sw-footer__firma { grid-area: firma; }
.sw-vetrina { grid-area: vetrina; }

/* LA FIRMA A FIANCO (§ 1.5, 2C): nome, filo verticale, payoff impilato
   accanto. Non e' una classe del kit — components.css porta la firma
   impilata e la variante larga — e la scheda la compone cosi', con le
   proporzioni legate all'altezza delle maiuscole del nome: e' l'asset
   nato per i piedi di pagina, e questo e' il posto.
   «A 50px reali di maiuscole regge da sola la riga alta del footer.» A
   quell'altezza la firma e' larga circa 590px — il nome fa 7,55 volte le
   maiuscole, poi il filo e il payoff — e la colonna di sinistra, con le
   due tessere e il loro respiro a destra, scende a 500px al limite del
   desktop (1024): da li' in su la firma segue la finestra, e i 50px pieni
   li ha da 1250 in su, cioe' dove il contenitore di 1240 del mock ha il
   suo spazio. Sul telefono e' 28px, come nel mock a grandezza naturale. */
.sw-firma-fianco {
  --sw-firma-h: min(50px, 4vw);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--sw-firma-h) * .53);
  flex: none;
}
.sw-firma-fianco .nlg-wordmark { --sw-wordmark-h: var(--sw-firma-h); }
.sw-firma-fianco__filo { width: 1px; align-self: stretch; background-color: var(--sw-line-strong); }
.sw-firma-fianco__payoff {
  display: inline-flex;
  flex-direction: column;
  gap: calc(var(--sw-firma-h) * .12);
  font: 700 calc(var(--sw-firma-h) * .39)/1.15 var(--sw-font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--sw-text-1);
}
.sw-firma-fianco__payoff b { font-weight: inherit; color: var(--sw-accent-1-text); }

/* I collegamenti su una riga, e «Richiedi preventivo →» in accento 600 in
   coda: e' l'unica voce che cambia peso, e nel mock e' l'ultima.
   I selettori portano due classi perche' `.sw-body a:not(.nlg-btn)` ne
   pesa due: a parita' vince l'ultima dichiarata, e queste vengono dopo.
   Con una classe sola i collegamenti restavano in accento, e nessun test
   lo vede. */
.sw-footer__nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: var(--sw-s4); align-items: center; }
.sw-footer .sw-footer__nav a { color: var(--sw-text-2); text-decoration: none; }
.sw-footer .sw-footer__nav a:hover { color: var(--sw-text-1); }
.sw-footer .sw-footer__nav .sw-footer__cta { color: var(--sw-accent-1-text); font-weight: 600; }

/* I social A PAROLA, mono 700 maiuscolo col filetto sotto: e' cosi' che
   la scheda li disegna (`.msoc`). Il filetto e' un bordo, non una
   sottolineatura — la sottolineatura e' il segno dei collegamenti nel
   testo, e questi sono etichette. */
.sw-footer__social { grid-area: social; display: flex; flex-wrap: wrap; gap: var(--sw-s3); }
.sw-footer .sw-footer__social a {
  color: var(--sw-text-2);
  text-decoration: none;
  font: 700 var(--sw-t-ov)/var(--sw-t-ov-lh) var(--sw-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--sw-line-strong);
  padding-bottom: 1px;
}
.sw-footer .sw-footer__social a:hover { color: var(--sw-text-1); }

/* ── La vetrina: due prodotti a caso, col nome in targhetta ──────────── */
/* «Il nome dentro: una targhetta nel piede dell'anteprima — superficie
   del kit, nome in mono, categoria sotto. L'immagine resta l'immagine;
   il nome non le ruba spazio e non galleggia fuori.» */
.sw-vetrina { display: grid; gap: var(--sw-s2); justify-items: start; }
/* L'overline della scheda (`.mlab`): mono 700 maiuscolo, tracking .14em,
   nel corpo dell'overline del kit. */
.sw-vetrina__titolo {
  margin: 0;
  font: 700 var(--sw-t-ov)/var(--sw-t-ov-lh) var(--sw-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sw-text-3);
}
/* Due TESSERE affiancate, larghe 200px l'una. Il mock ne disegna due di
   118px a meta' scala — circa 230 reali — ma la scheda non fissa la
   misura: 200 e' quella per cui, sul contenitore di 1240, la colonna di
   sinistra tiene la firma a 50px con margine. L'anteprima e' 1:1, quindi
   la larghezza e' anche l'altezza. */
.sw-vetrina__lista { display: flex; gap: var(--sw-s3); margin: 0; padding: 0; list-style: none; }
.sw-vetrina__voce { flex: none; width: 200px; max-width: 100%; }
/* La tessera: e' un <a> se il prodotto ha una pagina viva, altrimenti un
   <div> con la stessa resa — la scheda del gestionale basta a mostrarlo,
   non a farlo aprire. Filo del kit in cima, come sul mock
   (`.mart::before`). */
.sw-vetrina__tessera {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border: 1px solid var(--sw-line-strong);
  border-radius: var(--sw-r3);
  background: var(--sw-surface-2);
  overflow: hidden;
  text-decoration: none;
}
.sw-vetrina__tessera::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--sw-gradient-kit);
  z-index: 1;
}
a.sw-vetrina__tessera:hover { border-color: var(--sw-text-3); }
/* L'immagine copre la tessera. Senza immagine resta la superficie del
   kit sotto la targhetta, e non un segnaposto: meglio assente che finto. */
.sw-vetrina__immagine { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* La TARGHETTA sta DENTRO, nel piede, sovrapposta all'anteprima: fondo
   della superficie del kit, filetto sopra, nome e categoria in ellissi
   perche' un nome lungo non deve ne' uscire ne' andare a capo. */
.sw-vetrina__targhetta {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  gap: 1px;
  padding: var(--sw-s2) var(--sw-s3);
  background: var(--sw-surface-1);
  border-top: 1px solid var(--sw-line);
  text-align: left;
}
.sw-vetrina__nome {
  font: 700 var(--sw-t-ov)/var(--sw-t-ov-lh) var(--sw-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sw-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sw-vetrina__tipo {
  font: 400 var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-ui);
  color: var(--sw-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── La riga legale ──────────────────────────────────────────────────── */
/* Una riga sola, in mono piccolo: il marchio monocromo — «resta l'unico
   posto dove il marchio puo' stare in controcolore» (§ 5.1) —, «Affari
   legali», «Preferenze consenso», «P.IVA e sede» e, a destra, l'aspetto
   del sito nella forma a riga del selettore. */
.sw-footer__legale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sw-s3);
  margin-top: var(--sw-s6);
  border-top: 1px solid var(--sw-line);
  padding: var(--sw-s3) 0 var(--sw-s2);
  font: 400 var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-mono);
  color: var(--sw-text-3);
}
/* La misura e' una scelta del layout, l'inchiostro e' del kit: 14px come
   nel mock, e monocromo perche' sotto i 32px le lamine sparirebbero. */
.sw-footer__legale .nlg-mark { --sw-mark-size: 14px; }
.sw-footer .sw-footer__legale a { color: var(--sw-text-3); text-decoration: none; }
.sw-footer .sw-footer__legale a:hover { color: var(--sw-text-1); }
.sw-footer__consent {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.sw-footer__consent:hover { color: var(--sw-text-1); }
/* «P.IVA e sede» e' un <details> in linea: la voce e' il summary, e i
   dati societari compaiono SOTTO la riga quando lo si apre. `display:
   contents` fa del summary una voce della riga come le altre, e il
   contenuto (`::details-content`) prende una riga intera in coda, cosi'
   l'aspetto del sito resta a destra della propria. Un browser che non
   conosce ancora `::details-content` mette il contenuto su una riga sua
   comunque, solo prima del selettore; uno che ignorasse `display:
   contents` sul <details> lo renderebbe come blocco della riga, coi dati
   sotto la voce: in nessun caso qualcosa sparisce. */
.sw-footer__dati { display: contents; }
.sw-footer__dati > summary { list-style: none; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.sw-footer__dati > summary::-webkit-details-marker { display: none; }
.sw-footer__dati > summary:hover { color: var(--sw-text-1); }
.sw-footer__dati::details-content { flex: 0 0 100%; order: 1; }
.sw-footer__dati-riga { margin: 0; }
/* L'aspetto del sito, a destra: il selettore nella forma a riga. Il suo
   foglio e' quello del § 3.10 e qui si decide solo dove sta. */
.sw-footer__legale .sw-selettore { margin-left: auto; }

/* ── L'ultima cosa della pagina ──────────────────────────────────────── */
/* «Una nota di 7px mono (14px reali) sotto la riga legale, centrata, su
   tre righe, anche da desktop. E' l'ultima cosa della pagina, come
   deve.» Viene dal sito storico e si riporta parola per parola. */
.sw-dicitura {
  margin: var(--sw-s5) 0 0;
  padding-inline: var(--sw-sec-pad);
  display: grid;
  gap: 2px;
  text-align: center;
  color: var(--sw-text-3);
  font: 400 14px/1.5 var(--sw-font-mono);
}

/* ═══════════════════════ Banner consenso ═══════════════════════ */

/* IL BANNER DEL CONSENSO — brand book § 5.7 (dalla 9.3.0), terzo
   contenuto fisso dopo header e footer, con TRE VARIANTI approvate. Il
   sito ne monta due: la MODALE, obbligatoria e sempre presente, e la
   BARRA per le pagine che vendono.

   FINO ALLA 1.19.0 c'era una sola resa e le tre azioni erano PARI, sulla
   scorta del § 5.2 di allora. La 9.3.0 ribalta quella regola dopo una
   revisione: «Accetta tutti» e' il PRIMARIO e viene per PRIMO. Non e' una
   svista del brand book — e' una decisione presa guardando le nove rese
   affiancate, e il sito la segue perche' il design viene da li'. */
.sw-consent {
  position: fixed;
  inset: 0;
  z-index: var(--sw-z-modal);
  padding: var(--sw-s4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sw-scrim);
  backdrop-filter: blur(var(--sw-scrim-blur));
  -webkit-backdrop-filter: blur(var(--sw-scrim-blur));
}

.sw-consent__card {
  width: min(720px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sw-surface-1);
  border: 1px solid var(--sw-line-strong);
  border-radius: var(--sw-r3);
  box-shadow: var(--sw-e3);
}

.sw-consent__testa {
  display: flex;
  align-items: flex-start;
  gap: var(--sw-s4);
  padding: var(--sw-s4) var(--sw-s5) var(--sw-s3);
  border-bottom: 1px solid var(--sw-line);
  flex: none;
}
.sw-consent__intro { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sw-s1); }
.sw-consent__occhiello {
  font: 700 var(--sw-t-mono)/var(--sw-t-mono-lh) var(--sw-font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sw-accent-1-text);
}
.sw-consent__title {
  margin: 0;
  font-family: var(--sw-font-display);
  font-weight: 400;
  font-size: var(--sw-t-h3);
  line-height: var(--sw-t-h3-lh);
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--sw-text-1);
}

/* 44px: il bersaglio minimo che il brand book chiede dove il puntatore e'
   grosso. La X non chiude, RIFIUTA I FACOLTATIVI, e lo dice nel proprio
   aria-label: un banner che si chiude senza scegliere lascerebbe il
   Consent Mode non inizializzato. */
.sw-consent__chiudi {
  appearance: none;
  border: 1px solid var(--sw-line-strong);
  background: transparent;
  border-radius: var(--sw-r2);
  width: 44px; height: 44px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.sw-consent__croce { position: relative; width: 18px; height: 18px; display: block; }
.sw-consent__croce i {
  position: absolute; left: 0; right: 0; top: 8px; height: 1.75px;
  background: var(--sw-text-1); border-radius: 1px;
}
.sw-consent__croce i:first-child { transform: rotate(45deg); }
.sw-consent__croce i:last-child { transform: rotate(-45deg); }

.sw-consent__corpo {
  padding: var(--sw-s3) var(--sw-s5) var(--sw-s1);
  overflow: auto;
  display: flex; flex-direction: column; gap: var(--sw-s3);
  min-height: 0;
}
.sw-consent__text {
  margin: 0;
  color: var(--sw-text-2);
  font: 400 var(--sw-t-bs)/var(--sw-t-bs-lh) var(--sw-font-ui);
  max-width: 68ch;
}
/* Il messaggio del gate di invio: compare solo quando e' un modulo ad
   aprire il banner, e allora e' la prima cosa che si legge. */
.sw-consent__avviso {
  margin: 0;
  padding: var(--sw-s3);
  border-left: 2px solid var(--sw-accent-1);
  background: var(--sw-surface-2);
  border-radius: var(--sw-r1);
  color: var(--sw-text-1);
  font: 500 var(--sw-t-bs)/var(--sw-t-bs-lh) var(--sw-font-ui);
}

/* LE PREFERENZE SONO ESPOSTE, non dietro «Personalizza»: e' la
   differenza di sostanza della 9.3.0. Un elenco che si apre solo a
   chiedere rende «accetta tutto» l'unica strada che si vede. */
.sw-consent__categorie { display: flex; flex-direction: column; border-top: 1px solid var(--sw-line); }
.sw-consent__categoria { display: flex; flex-direction: column; border-bottom: 1px solid var(--sw-line); }
.sw-consent__riga {
  display: flex; align-items: center; gap: var(--sw-s4);
  padding: var(--sw-s3) 0; min-height: 44px; box-sizing: border-box;
}
.sw-consent__voce { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-consent__nomi { display: flex; align-items: baseline; gap: var(--sw-s2); flex-wrap: wrap; }
.sw-consent__nome { font: 600 var(--sw-t-bs)/var(--sw-t-bs-lh) var(--sw-font-ui); color: var(--sw-text-1); }
.sw-consent__nome--sotto { font-weight: 500; }
.sw-consent__parametri {
  font: 400 var(--sw-t-mono)/var(--sw-t-mono-lh) var(--sw-font-mono);
  letter-spacing: .03em; color: var(--sw-text-3);
}
.sw-consent__testo { font: 400 var(--sw-t-bxs)/var(--sw-t-bxs-lh) var(--sw-font-ui); color: var(--sw-text-2); }
.sw-consent__sempre { flex: none; }
.sw-consent__switch { flex: none; accent-color: var(--sw-accent-1); }
/* I tre interruttori del marketing, rientrati: sono scelte dentro una
   scelta, e il rientro lo dice senza una parola in piu'. */
.sw-consent__sotto {
  display: flex; align-items: center; gap: var(--sw-s4);
  padding: var(--sw-s2) 0 var(--sw-s2) var(--sw-s4);
  min-height: 44px; box-sizing: border-box;
  border-top: 1px dashed var(--sw-line);
  cursor: pointer;
}

.sw-consent__piede {
  padding: var(--sw-s3) var(--sw-s5) var(--sw-s4);
  border-top: 1px solid var(--sw-line);
  display: flex; flex-direction: column; gap: var(--sw-s3);
  flex: none;
}
.sw-consent__actions { display: flex; gap: var(--sw-s3); flex-wrap: wrap; }
.sw-consent__actions .nlg-btn { flex: 1 1 170px; padding: 0 var(--sw-s3); white-space: nowrap; }
.sw-consent__legale {
  display: flex; gap: var(--sw-s4); flex-wrap: wrap;
  font: 400 var(--sw-t-mono)/var(--sw-t-mono-lh) var(--sw-font-mono);
  letter-spacing: .04em; color: var(--sw-text-3);
}
.sw-consent__legale a { color: inherit; }
.sw-consent__titolare { margin-left: auto; white-space: nowrap; }

/* ── LA BARRA (variante 2) ────────────────────────────────────────
   Per le pagine che vendono: sotto un decimo dello schermo, NESSUN VELO
   — il prodotto resta visibile e usabile mentre si sceglie. Le
   preferenze non crescono qui dentro: «Personalizza» apre la modale,
   perche' le preferenze vivono in un posto solo. */
.sw-consent__barra { display: none; }

.sw-consent--barra {
  inset: auto 0 0 0;
  padding: 0;
  display: block;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sw-consent--barra .sw-consent__card { display: none; }
.sw-consent--barra .sw-consent__barra {
  display: flex;
  align-items: center;
  gap: var(--sw-s4);
  flex-wrap: wrap;
  padding: var(--sw-s3) var(--sw-s5);
  background: var(--sw-surface-1);
  border-top: 1px solid var(--sw-line-strong);
  box-shadow: var(--sw-e3);
}
.sw-consent__barra-testo {
  margin: 0; flex: 1 1 320px; min-width: 0;
  color: var(--sw-text-2);
  font: 400 var(--sw-t-bxs)/var(--sw-t-bxs-lh) var(--sw-font-ui);
}
.sw-consent__barra-azioni { display: flex; align-items: center; gap: var(--sw-s3); flex-wrap: wrap; }
/* «Rifiuta tutto» e' un COLLEGAMENTO nella barra: il brand book vuole
   una sola azione in evidenza, e le altre due scendono di peso — bottone
   quieto per «Personalizza», collegamento per il rifiuto. */
.sw-consent__rifiuta {
  appearance: none; border: 0; background: none; padding: 0;
  color: var(--sw-text-2); text-decoration: underline; cursor: pointer;
  font: 400 var(--sw-t-bxs)/var(--sw-t-bxs-lh) var(--sw-font-ui);
  min-height: 44px;
}

@media (max-width: 719px) {
  .sw-consent__testa, .sw-consent__corpo, .sw-consent__piede { padding-left: var(--sw-s4); padding-right: var(--sw-s4); }
  .sw-consent__actions .nlg-btn { flex: 1 1 100%; }
  .sw-consent__titolare { margin-left: 0; }
  .sw-consent--barra .sw-consent__barra { padding: var(--sw-s3) var(--sw-s4); }
  .sw-consent__barra-azioni { width: 100%; }
  .sw-consent__barra-azioni .nlg-btn { flex: 1 1 auto; }
}

/* La pagina Compliance: l'indice delle sezioni e l'elenco delle
   categorie, che viene dalla stessa sorgente del banner. */
.sw-compliance__indice { display: flex; gap: var(--sw-s4); flex-wrap: wrap; margin: 0 0 var(--sw-s5); }
.sw-compliance__sottotitolo { color: var(--sw-text-3); font: 400 var(--sw-t-bs)/var(--sw-t-bs-lh) var(--sw-font-ui); }
.sw-compliance__categorie { display: flex; flex-direction: column; gap: var(--sw-s3); margin: var(--sw-s4) 0; }
.sw-compliance__categorie dt { display: flex; align-items: baseline; gap: var(--sw-s2); flex-wrap: wrap; font-weight: 600; }
.sw-compliance__categorie dd { margin: 0 0 var(--sw-s2); color: var(--sw-text-2); }
.sw-compliance__preferenze {
  appearance: none; border: 0; background: none; padding: 0;
  color: var(--sw-accent-1-text); text-decoration: underline; cursor: pointer;
  font: inherit;
}
.sw-check__informativa { margin-left: var(--sw-s2); }

/* ═══════════════════════ Pagine di errore ═══════════════════════ */

.sw-error {
  align-items: center;
  justify-content: center;
  padding: var(--sw-s5);
}
.sw-error__card {
  text-align: center;
  max-width: 480px;
  background: var(--sw-surface-1);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r3);
  padding: var(--sw-s8) var(--sw-s6);
  box-shadow: var(--sw-e2);
}
.sw-error__mark { --sw-mark-size: 56px; margin-bottom: var(--sw-s4); }
.sw-error__code {
  margin: 0;
  font: 700 var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-mono);
  letter-spacing: 0.2em;
  color: var(--sw-text-3);
}
.sw-error__title { margin: var(--sw-s2) 0 var(--sw-s3); font: 700 var(--sw-t-h1)/var(--sw-t-h1-lh) var(--sw-font-ui); }
.sw-error__text { margin: 0 0 var(--sw-s5); color: var(--sw-text-2); }

/* ═══════════════════════ Responsive ═══════════════════════ */

/* ── Il cassetto, sul telefono ───────────────────────────────────────── */
/* La soglia e' quella del layer del dispositivo del brand book (§ 4.21):
   telefono fino a 719. Sulla tavoletta (720-1023) la barra resta una
   barra e il mega-menu, che e' il componente, scende da solo a due
   colonne (§ 4.23: «sotto i 1024px diventa due colonne, sotto i 720
   una»). Fino alla 1.11.0 il cassetto scattava gia' a 1023, e la
   tavoletta vedeva il telefono. */
/* ── Il piede sulla tavoletta ────────────────────────────────────────── */
/* Sotto i 1024 — la tavoletta del layer del dispositivo (§ 4.21) — la
   prima fascia del piede va in colonna: le due tessere col loro respiro
   fanno 444px, e quel che resta a una tavoletta non tiene ne' la firma
   ne' i collegamenti su una riga. L'ordine e' quello del mock telefono —
   firma, catalogo, collegamenti, social — e le tessere restano di 200px:
   cambiano solo le aree, il markup e' lo stesso. */
@media (max-width: 1023px) {
  .sw-footer__fascia {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "firma" "vetrina" "nav" "social";
    gap: var(--sw-s5);
  }
}

/* ═══════════════════════ La barra sulla tavoletta ═══════════════════════
   Da 720 a 1023 la barra e' una barra, col mega menu a due colonne; ma e'
   stretta, e con le cinque voci del brand book piu' l'accesso le voci non
   stanno su una riga: senza questa regola finivano sotto il cubo e la
   pagina scorreva in orizzontale. Le voci vanno a capo, e il filo
   dell'attiva resta dentro il proprio link, perche' con due righe il bordo
   della barra non e' piu' a 12px. */
@media (min-width: 720px) and (max-width: 1023px) {
  .sw-nav__voci { flex-wrap: wrap; row-gap: 0; }
  .sw-voce__link.is-active::after { inset-block-end: 0; }
}

/* ═══════════════════════ Il marchio al taglio sotto i 1240 ═══════════════════════
   Sotto la larghezza della resa approvata la colonna del testo scende
   fino a 540px, e a d1 la riga piu' lunga del titolo (730px) non ci sta:
   a 1024 usciva su sei righe. Da qui in giu' il titolo e' a d2, che e'
   ancora un titolo brand; sul telefono, piu' avanti nel foglio, scende a
   h1.

   Le bande dell'apertura si chiudono A CASCATA coi soli max-width, come
   fa il layer del dispositivo del brand book, e ogni blocco vale anche
   per quelli sotto finche' un blocco piu' in basso non lo ridice. Con un
   `min-width: 1024px` accanto restava uno spiraglio: una larghezza
   frazionaria — 1023,2px con lo zoom del browser al 125% — non cadeva in
   nessuna banda e prendeva la resa desktop piena, due colonne e il
   titolo a d1 su sei righe. Visto dalla revisione. */
@media (max-width: 1239px) {
  .sw-apertura--taglio .sw-apertura__titolo { font-size: var(--sw-t-d2); line-height: var(--sw-t-d2-lh); }
}

/* ═══════════════════════ Il marchio al taglio sulla tavoletta ═══════════════════════
   La resa approvata e' stata vista a 1240 e a 390; la banda di mezzo
   (§ 4.21: 720–1023) la decide il sito, e prende dal telefono la
   composizione — una colonna sola, il marchio in alto a destra sotto la
   prima riga del titolo — col titolo a d2 del blocco sopra, libero dai
   17ch. A due colonne il testo avrebbe avuto 284px: la colonna vuota da
   340 e' una misura da desktop. Il blocco del telefono, piu' sotto,
   ridice a modo suo quello che qui cambia. */
@media (max-width: 1023px) {
  .sw-apertura--taglio { min-height: 0; }
  .sw-apertura--taglio .sw-apertura__inner { grid-template-columns: 1fr; }
  .sw-apertura--taglio .sw-apertura__titolo { max-width: none; }
  .sw-apertura__marchio {
    --sw-mark-size: 480px;
    inset-block-start: -48px;
    inset-inline-end: -150px;   /* 5/16 fuori (sul telefono e' 9/32) */
    transform: none;
    opacity: .10;
  }
}

@media (max-width: 719px) {
  /* LA BARRA 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 uno sticky figlio di body si incolla a quello — che non
     scorre mai — invece che alla finestra: la barra scorreva via con la
     pagina. `clip` taglia senza aprire un contenitore: il divieto resta,
     lo sticky torna. Preesistente a questo round; visto dalla revisione. */
  .sw-body { overflow-x: clip; }

  .sw-menu__apri { display: inline-flex; margin-left: auto; }
  .sw-header__inner { min-height: 56px; gap: var(--sw-s2); }

  /* Chiuso, il cassetto non occupa spazio; aperto e' un pannello da
     destra col suo velo. */
  .sw-menu[open] .sw-menu__velo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--sw-scrim);
  }
  .sw-menu[open] ~ .sw-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    width: min(360px, 88vw);
    padding: var(--sw-s5) var(--sw-s4);
    overflow-y: auto;
    background: var(--sw-surface-1);
    border-left: 1px solid var(--sw-line);
    display: grid;
    align-content: start;
    gap: var(--sw-s3);
  }
  .sw-menu[open] ~ .sw-nav .sw-menu__chiudi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    background: none;
    border: none;
    color: var(--sw-text-1);
    font: 400 22px/1 var(--sw-font-mono);
    cursor: pointer;
  }

  /* Chiuso il cassetto, la navigazione non sta in barra: su telefono
     non ci starebbe, e il pulsante e' li' per questo. */
  .sw-nav { display: none; }
  .sw-menu[open] ~ .sw-nav { display: grid; }
  /* Nel cassetto le voci sono impilate e la barra non esiste: qui
     l'altezza della barra non vuol dire niente, e la voce torna un
     blocco — col mega-menu sotto il proprio link, non accanto. */
  .sw-nav__voci { display: grid; gap: 0; }
  .sw-voce { display: block; }
  .sw-voce__link { min-height: 44px; padding-inline: var(--sw-s2); }
  /* Nel cassetto la voce attiva non porta il filo: quello e' tarato sulla
     barra — 12px sotto un link di 40 in una barra di 64 — e qui cadeva
     dentro la voce successiva. Il mock telefono non ha sottolineature. */
  .sw-voce__link.is-active::after { display: none; }

  /* Nel cassetto il mega-menu e' una fisarmonica: nessuna colonna, e si
     apre solo la voce toccata (lo script tiene aperta una per volta;
     senza script il pannello resta visibile, che e' peggio in estetica e
     uguale in accesso). */
  .sw-mega {
    position: static;
    display: block;
    padding: 0 0 var(--sw-s3) var(--sw-s4);
    border: none;
    box-shadow: none;
    background: none;
  }
  /* Una colonna sola: nel cassetto il mega menu e' una fisarmonica, non
     una griglia. Il componente da solo scenderebbe a due colonne a questa
     banda — giusto per un pannello sospeso, sbagliato dentro un cassetto
     largo quanto mezzo telefono. */
  .sw-mega .nlg-megamenu { border: none; background: none; box-shadow: none; backdrop-filter: none; }
  .sw-mega .nlg-megamenu__corpo { grid-template-columns: 1fr; gap: var(--sw-s3); padding: 0; }
  .sw-mega .nlg-megamenu__coda { padding: var(--sw-s3) 0 0; background: none; }
  .sw-mega__nota { margin-left: 0; }
  /* Con lo script: chiusa finche' non la si tocca. */
  .sw-voce--mega:not(.is-aperta) .sw-mega { display: none; }
  .sw-voce--mega.is-aperta .sw-mega { display: block; }

  .sw-nav__coda { display: grid; gap: var(--sw-s3); margin-top: var(--sw-s3); justify-items: start; }
  .sw-nav__coda .sw-selettore { justify-self: stretch; }
  /* Il preventivo non collassa mai: lascia la barra e sta SOTTO di lei,
     a tutta larghezza, fuori dal cassetto — come nel mock telefono del
     § 5.1. E fuori dall'<header>: la barra e' incollata e resta di 56px
     come dice la scheda; la riga del preventivo scorre via con la pagina.
     In barra restano marchio e nome, il cubo e il pulsante del cassetto. */
  .sw-header__cta { display: none; }
  .sw-header__cta-riga { display: block; padding: var(--sw-s2) var(--sw-sec-pad) var(--sw-s3); }
  .sw-header__cubo { margin-left: 0; }
  /* «Marchio e nome in barra»: sotto i 22px di maiuscole il payoff non si
     legge, e la scheda lo toglie. */
  .sw-brand .nlg-payoff { display: none; }
  /* Il pannello del cubo, su telefono, prende tutta la larghezza. */
  .sw-aspetto-pannello { inset-inline: var(--sw-s3); justify-items: center; text-align: center; }

  /* Il piede sul telefono, come il mock a grandezza naturale (392px):
     la firma a 28px, le due tessere a mezza larghezza l'una, i
     collegamenti su due colonne. L'ordine della fascia — firma,
     catalogo, collegamenti, social — l'ha gia' dato la tavoletta. */
  .sw-firma-fianco { --sw-firma-h: min(28px, calc((100vw - 2 * var(--sw-sec-pad)) / 12)); }
  /* ...ma sotto i 360 la firma fissa a 28 usciva dal body di 34px e il
     payoff si tagliava a filo del bordo («SVILUPPI / APPLICAZ» a 320):
     la firma e' larga circa dodici volte le sue maiuscole, e il divisore
     la tiene dentro il contenitore con un pelo. A 390 vale ancora 28. E'
     la stessa forma del `min(50px, 4vw)` da desktop. Preesistente, visto
     dalla revisione dell'apertura. */
  .sw-vetrina { justify-self: stretch; justify-items: stretch; }
  .sw-vetrina__lista { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sw-s4); }
  .sw-vetrina__voce { width: auto; }
  .sw-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sw-s2) var(--sw-s3); }
}

@media (max-width: 720px) {
  /* L'apertura passa in colonna. */
  .sw-apertura { padding-block: var(--sw-s7) var(--sw-s6); }
  .sw-apertura__inner { grid-template-columns: 1fr; gap: var(--sw-s6); min-height: 0; }
  /* Le regole della variante «taglio» pesano due classi: qui si
     ridichiarano allo stesso peso, altrimenti a 390 la colonna del testo
     resterebbe larga 0 e il titolo uscirebbe una parola per riga (successe
     alla variante precedente, vista dalla revisione del round). */
  .sw-apertura--taglio .sw-apertura__inner { grid-template-columns: 1fr; align-items: start; }
  /* Il marchio al taglio sul telefono, come approvato: tutto in alto — il
     contenuto parte a 64px e scende coi respiri normali (12 · 16 · 20) —
     occhiello, titolo alla misura h1 e non display, lead a corpo, azioni
     impilate a tutta larghezza. Niente palette: la resa approvata non la
     porta. Il marchio a 320px con 90px fuori dal bordo, in alto a destra,
     a opacita' .10 perche' la prima riga del titolo gli passa sopra. Il 40
     in fondo e' s5+s4, com'e' composto il padding del repertorio. */
  .sw-apertura--taglio { min-height: 0; padding-block: var(--sw-s8) calc(var(--sw-s5) + var(--sw-s4)); }
  .sw-apertura--taglio .sw-apertura__overline { margin-bottom: var(--sw-s3); }
  .sw-apertura--taglio .sw-apertura__titolo { font-size: var(--sw-t-h1); line-height: var(--sw-t-h1-lh); margin-bottom: var(--sw-s4); max-width: none; }
  .sw-apertura--taglio .sw-apertura__lead { font-size: var(--sw-t-b); line-height: var(--sw-t-b-lh); margin-bottom: calc(var(--sw-s4) + var(--sw-s1)); }
  .sw-apertura--taglio .sw-apertura__azioni .nlg-btn { width: 100%; }
  .sw-apertura--taglio .sw-apertura__palette { display: none; }
  .sw-apertura__marchio {
    --sw-mark-size: 320px;
    inset-block-start: -24px;
    inset-inline-end: -90px;   /* se ne vede il 72%, come approvato */
    transform: none;
    opacity: .10;
  }
  .sw-apertura__titolo { font-size: var(--sw-t-d2); line-height: var(--sw-t-d2-lh); }
  .sw-affianco__inner { grid-template-columns: 1fr; gap: var(--sw-s6); }
  /* Il media sparisce: sotto i 900px il runtime 3D non si scarica, e un
     contenitore vuoto non deve comunque riservare spazio. Dichiararlo qui
     invece di affidarsi al fatto che lo script non arrivi. */
  .sw-affianco__media { display: none; }
  .sw-apertura__titolo--lungo { font-size: var(--sw-t-d2); line-height: var(--sw-t-d2-lh); max-width: none; }
  .sw-cta-fascia__telefono { justify-content: center; }
  .sw-scelte--riga { grid-template-columns: 1fr; }
  .sw-canali__link { flex-direction: column; align-items: flex-start; gap: 0; }
  .sw-canali__testo { text-align: start; }
}
/* I contatti tornano in colonna prima dei 720px del contratto: sotto i
   900px la lastra e i canali affiancati si strozzano a vicenda. */
@media (max-width: 900px) {
  .sw-contatti { grid-template-columns: 1fr; }
  .sw-contatti__lato { order: -1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Repertorio delle sezioni — contratto comune
   Brand book 5.8.1, scheda `guidelines/layout-sezioni.html` (§ 5.3).
   ═══════════════════════════════════════════════════════════════════════

   «Una pagina si monta, non si disegna»: sette tipi, ognuno con un compito
   che nessun altro fa. Due sezioni dello stesso tipo non si toccano mai, e
   una pagina non ne usa piu' di cinque.

   Sulle misure, una divergenza dichiarata. La scheda prescrive 110px di
   respiro sopra e sotto; il file dei token dichiara «Base 4px» e 110 non
   sta sulla griglia (110/4 = 27,5). Fra la scheda e la scala vince la
   scala, perche' e' la scala che rende il kit sostituibile: il respiro e'
   quindi 112px, composto da token. Le altre misure della scheda cadono
   tutte sulla griglia e si compongono senza scarto: 1240 e' --sw-container,
   40 e' s5+s4, 20 e' s5. */

.sw-body {
  --sw-respiro: calc(var(--sw-s9) + var(--sw-s4));   /* 112px: 110 non sta sulla griglia da 4 */
  --sw-sec-pad: calc(var(--sw-s5) + var(--sw-s4));   /* 40px */
  --sw-sec-gap: calc(var(--sw-s5) + var(--sw-s4));   /* 40px: gutter a 12 colonne */
}

/* Il fondo alterna --sw-bg-1 e --sw-bg-0, e non esiste un terzo colore:
   massimo due per pagina. La firma del kit sta in cima alla PRIMA
   superficie, non su ogni sezione — ripetuta smette di essere una firma. */
.sw-sec { padding-block: var(--sw-respiro); }
.sw-sec--canvas { background: var(--sw-bg-0); }
.sw-sec--firma { position: relative; }
.sw-sec--firma::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--sw-gradient-kit);
}

.sw-sec__head { margin-bottom: var(--sw-s7); max-width: 68ch; }
.sw-sec__overline {
  margin: 0 0 var(--sw-s3);
  font: 700 var(--sw-t-ov)/var(--sw-t-ov-lh) var(--sw-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sw-accent-1-text);
}
.sw-sec__title { margin: 0 0 var(--sw-s3); font: 600 var(--sw-t-h1)/var(--sw-t-h1-lh) var(--sw-font-ui); text-wrap: balance; }
.sw-sec__lead { margin: 0; color: var(--sw-text-2); font: 400 var(--sw-t-bl)/var(--sw-t-bl-lh) var(--sw-font-ui); }
/* La riga in coda a una sezione: una frase e un collegamento nel testo,
   dopo le voci. Non e' una chiamata all'azione del repertorio — quelle
   hanno un bottone o un filo — e' il capoverso che chiude il discorso. */
.sw-sec__coda { margin: var(--sw-s7) 0 0; max-width: 68ch; color: var(--sw-text-2); }
/* La numerazione dei blocchi. Non la decide il modello — il § 6 del
   contratto gli vieta di scegliere griglie e forme — ma l'assemblatore, ed
   e' la stessa cosa che le schede del brand book fanno su se stesse: la
   cifra in mono e un filo d'accento a segnare dove comincia il blocco.
   Serve su una pagina lunga: senza, sei sezioni di prosa e fili si
   somigliano tutte e non si sa piu' a che punto si e'. */
.sw-sec--numerata .sw-sec__head {
  display: grid;
  grid-template-columns: 6ch minmax(0, 1fr);
  gap: var(--sw-s5);
  align-items: start;
  max-width: none;              /* la misura torna sui titoli, non sulla riga */
}
.sw-sec--numerata .sw-sec__titoli { max-width: 68ch; }
.sw-sec__cifra {
  font: 700 var(--sw-t-h1)/1 var(--sw-font-mono);
  color: var(--sw-text-3);
  padding-top: var(--sw-s2);
  border-top: 2px solid var(--sw-accent-1);
}

/* Una pagina con un modulo solo sta su una colonna stretta: un modulo
   largo quanto lo schermo si compila peggio. */
.sw-page--stretta { max-width: 760px; }

/* ─────────────────── Vetro reattivo (§ 3.8) ───────────────────
   Il puntatore agisce su due materiali e due soli: il vetro e gli elementi
   di design. Testo, bottoni, icone e marchio non reagiscono al mouse —
   hanno gia' i loro stati, e sommarci un effetto li renderebbe
   imprevedibili.

   Le variabili --mx / --my / --pr le scrive public/js/materia.js. Senza
   mouse non esistono e i ripieghi (.5 / .5 / 0) danno la lastra ferma di
   sempre: nessun degrado da gestire. */

/* La lastra e' `.nlg-card` del brand book — stessa storia del bottone: qui
   c'era la stessa dichiarazione riscritta a mano.

   E il riempimento NON si tocca. Qui stava `background: var(--sw-glass-panel)`,
   cioe' l'88% di opacita' al posto del 62% del componente: con dodici punti
   di trasparenza il `backdrop-filter` non ha piu' niente da mostrare, e la
   lastra si legge come un pannello pieno. Era questo — non il filtro, non il
   fondo — a far sparire il vetro dalla pagina di accesso.

   Il pannello di sistema piu' denso resta una scelta della sola pagina di
   fermo, che la sua scheda prescrive al 68% e che se lo dichiara da se'. */
.sw-glass { /* nessun riempimento proprio: vale quello di `.nlg-card` */ }

/* La firma del kit in cima alla lastra, con l'alone che segue l'ascissa
   del puntatore: filo e riflesso condividono --mx, sono la stessa luce
   vista sul bordo e sulla superficie. */
.sw-glass__firma { position: relative; height: 2px; background: var(--sw-gradient-kit); overflow: hidden; }
.sw-glass__firma i {
  position: absolute;
  inset-block: -3px;
  width: 120px;
  left: calc(var(--mx, .5) * 100% - 60px);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--sw-text-1) 72%, transparent), transparent);
  opacity: calc(.12 + var(--pr, 0) * .88);
  transition: opacity var(--sw-dur-3) var(--sw-ease);
}

/* Il riflesso non e' un'ombra e non scurisce: la lastra riflette.

   E' uno PSEUDO-ELEMENTO della lastra, non uno <span> da scrivere nel
   markup. Fino alla 1.1.1 era un elemento, e portarlo era compito di chi
   scriveva la vista: tre lastre su tutto il sito lo avevano, e ovunque
   altrove la reazione al puntatore semplicemente non c'era. E' il difetto
   segnalato dal committente nella 1.2.1, e la sua causa non era una vista
   dimenticata: era che il materiale si dichiarava una lastra per volta.

   `z-index: -1` dentro il contesto isolato dalla lastra stessa: il
   riflesso sta SOPRA il fondo e SOTTO il contenuto senza che i figli
   debbano alzarsi con una position propria — la riga `> * { position:
   relative }` che ogni lastra reattiva doveva portare, e che era l'altra
   meta' della dimenticanza. */
:where([data-mouse]) { position: relative; isolation: isolate; }

[data-mouse]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(190px circle at calc(var(--mx, .5) * 100%) calc(var(--my, .5) * 100%),
    color-mix(in oklab, var(--sw-accent-1) 26%, transparent), transparent 72%);
  opacity: calc(.25 + var(--pr, 0) * .75);
  mix-blend-mode: screen;
  transition: opacity var(--sw-dur-3) var(--sw-ease);
}

@media (prefers-reduced-motion: reduce) {
  .sw-glass__firma i, [data-mouse]::after { transition: none; opacity: .25; }
}

/* ─────────────────── 01 · Testo + media ───────────────────
   Un concetto per volta con una prova visiva accanto. Il lato del media si
   alterna a ogni occorrenza: due blocchi di fila con l'immagine dalla
   stessa parte sono un errore di montaggio. */
.sw-tm { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sw-sec-gap); align-items: center; }
.sw-tm__media { border-radius: var(--sw-r3); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sw-surface-2); }
.sw-tm__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-tm--rovescio .sw-tm__testo { order: 2; }

/* ─────────────────── 02 · Griglia di card ───────────────────
   Da tre a sei voci pari fra loro. Le due varianti sono entrambe
   approvate e si scelgono sul NUMERO di voci, non a gusto: card in vetro
   fino a quattro, elenco a righe da cinque in su — senza scatole lo
   sfalsamento dei testi disomogenei non si vede. */
.sw-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sw-sec-gap); }
.sw-griglia__card { display: flex; flex-direction: column; }
.sw-griglia__body { padding: var(--sw-s6); display: flex; flex-direction: column; gap: var(--sw-s3); flex: 1; }
.sw-griglia__cubo { display: block; width: 48px; margin-bottom: var(--sw-s5); }
.sw-griglia__title { margin: 0; font: 600 var(--sw-t-h3)/var(--sw-t-h3-lh) var(--sw-font-ui); }
.sw-griglia__text { margin: 0; color: var(--sw-text-2); }
a.sw-griglia__card { text-decoration: none; color: inherit; }
a.sw-griglia__card:hover { border-color: var(--sw-accent-1); }

/* Variante a righe: densita' doppia a parita' di altezza. */
.sw-righe { display: grid; gap: 0; }
.sw-righe__voce { display: grid; grid-template-columns: minmax(0, 18ch) 1fr; gap: var(--sw-sec-gap); padding-block: var(--sw-s5); border-top: 1px solid var(--sw-line); }
.sw-righe__voce:last-child { border-bottom: 1px solid var(--sw-line); }
.sw-righe__title { margin: 0; font: 600 var(--sw-t-h3)/var(--sw-t-h3-lh) var(--sw-font-ui); }
.sw-righe__text { margin: 0; color: var(--sw-text-2); max-width: 68ch; }
/* I collegamenti dentro le righe restano collegamenti di testo: il filo
   sotto e' cio' che li distingue dal testo, non il colore da solo. */
.sw-righe__text a { text-decoration: underline; text-underline-offset: .15em; }

/* Il partial del repertorio e' un `dl` a DUE colonne di soli fili, ed e'
   li' che sta la «densita' doppia a parita' di altezza» che la scheda
   promette. Fino alla 1.9.0 il sito ne rendeva una colonna sola con una
   gronda da 18ch per il titolo: sette voci diventavano mille pixel di
   scorrimento, e ogni riga misurava 101 caratteri contro i 68 che
   `sezioni.json` dichiara fra gli invarianti comuni.

   L'ultima voce non porta il filo di chiusura: in due colonne la
   «ultima» e' quella in basso a destra, e un filo sotto una sola delle
   due colonne si legge come un errore di allineamento. Il partial infatti
   non ne ha. */
.sw-righe--due { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sw-sec-gap); }
.sw-righe--due .sw-righe__voce { grid-template-columns: minmax(0, 1fr); gap: var(--sw-s2); }
.sw-righe--due .sw-righe__voce:last-child { border-bottom: 0; }

/* ─────────────────── 03 · Passi numerati ───────────────────
   Un processo in ordine, tre o quattro passi. Il numero e' in mono e MAI
   in un cerchio. Le colonne sono legate da un filo a 1px all'altezza del
   numero, interrotto dal fondo sotto ogni cifra. */
.sw-passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sw-sec-gap); position: relative; }
.sw-passo { position: relative; }
.sw-passo__n {
  display: block;
  position: relative;
  z-index: 1;
  width: max-content;
  padding-inline-end: var(--sw-s4);
  margin-bottom: var(--sw-s4);
  background: var(--sw-bg-1);                 /* interrompe il filo sotto la cifra */
  font: 700 var(--sw-t-h2)/1 var(--sw-font-mono);
  color: var(--sw-accent-1-text);
}
.sw-sec--canvas .sw-passo__n { background: var(--sw-bg-0); }
/* Il filo passa all'altezza del numero e si ferma al penultimo passo. */
.sw-passo:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--sw-t-h2) / 2);
  left: 0;
  width: calc(100% + var(--sw-sec-gap));
  height: 1px;
  background: var(--sw-line-strong);
}
.sw-passo__title { margin: 0 0 var(--sw-s2); font: 600 var(--sw-t-h3)/var(--sw-t-h3-lh) var(--sw-font-ui); }
.sw-passo__text { margin: 0; color: var(--sw-text-2); }

/* Variante a scala. La scheda: «numero e titolo incolonnati a sinistra,
   descrizione a destra. Per descrizioni oltre le due righe o piu' di
   quattro passi». Non e' un'alternativa a gusto: la variante in fila
   dichiara `righe_descrizione_max: 2`, e sopra quella soglia il filo
   orizzontale si spezza e i passi smettono di leggersi come una fila. */
.sw-scala { display: grid; }
.sw-scala__passo {
  display: grid;
  grid-template-columns: minmax(0, 22ch) minmax(0, 1fr);
  gap: var(--sw-sec-gap);
  padding-block: var(--sw-s6);
  border-top: 1px solid var(--sw-line);
}
.sw-scala__passo:last-child { border-bottom: 1px solid var(--sw-line); }
.sw-scala__lato { display: flex; align-items: baseline; gap: var(--sw-s4); }
.sw-scala__n { font: 700 var(--sw-t-h2)/1 var(--sw-font-mono); color: var(--sw-accent-1-text); }
.sw-scala__title { margin: 0; font: 600 var(--sw-t-h3)/var(--sw-t-h3-lh) var(--sw-font-ui); }
.sw-scala__text { margin: 0; max-width: 68ch; color: var(--sw-text-2); }

/* ─────────────────── 04 · Numeri e prove ───────────────────
   Cifre in display con la FONTE dichiarata: cosa, quando, chi la misura.
   «Fonte: interna» non e' una fonte — in quel caso il numero si toglie.
   Rapporto tipografico almeno 2:1 fra la cifra dominante e i sostegni. */
.sw-numeri { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sw-sec-gap); align-items: stretch; }
.sw-numeri__primo {
  background: var(--sw-accent-1-tint);
  border-radius: var(--sw-r3);
  padding: var(--sw-s8) var(--sw-s7);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sw-numeri__cifra { margin: 0; font: 400 var(--sw-t-d1)/var(--sw-t-d1-lh) var(--sw-font-display); letter-spacing: .02em; }
.sw-numeri__eti { margin: var(--sw-s3) 0 0; color: var(--sw-text-2); }
.sw-numeri__sostegni { display: grid; gap: var(--sw-s5); align-content: center; }
.sw-numeri__sostegno { border-top: 1px solid var(--sw-line); padding-top: var(--sw-s4); }
.sw-numeri__sostegno .sw-numeri__cifra { font: 400 var(--sw-t-h1)/var(--sw-t-h1-lh) var(--sw-font-display); }
.sw-numeri__fonte { margin: var(--sw-s2) 0 0; color: var(--sw-text-3); font: 400 var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-mono); }

/* ─────────────────── 05 · Citazione ───────────────────
   Una voce sola, con nome e ruolo: senza attribuzione non si pubblica.
   Mai tre testimonianze in fila — perdono credito. Massimo 45 parole. */
.sw-cit { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sw-sec-gap); align-items: center; }
.sw-cit__vetro { padding: var(--sw-s7); }
.sw-cit__testo { margin: 0; font: 400 var(--sw-t-bl)/var(--sw-t-bl-lh) var(--sw-font-ui); }
.sw-cit__cliente { display: flex; flex-direction: column; gap: var(--sw-s3); }
.sw-cit__ritratto { width: 44px; height: 44px; border-radius: var(--sw-r-full); object-fit: cover; }
.sw-cit__nome { margin: 0; font: 600 var(--sw-t-b)/var(--sw-t-b-lh) var(--sw-font-ui); }
.sw-cit__ruolo { margin: 0; color: var(--sw-text-2); font: 400 var(--sw-t-bs)/var(--sw-t-bs-lh) var(--sw-font-ui); }

/* ─────────────────── 06 · Tabella comparativa ───────────────────
   Colonne pari, UNA sola evidenziata col fondo accento tenue e
   l'etichetta «consigliato». Testo a sinistra in ogni cella, anche i
   numeri: si legge per righe. Mai spunte da sole — si scrive cosa c'e'. */
.sw-comp { width: 100%; border-collapse: collapse; text-align: start; }
.sw-comp th, .sw-comp td { text-align: start; padding: var(--sw-s4); border-bottom: 1px solid var(--sw-line); vertical-align: top; }
.sw-comp thead th { font: 600 var(--sw-t-h3)/var(--sw-t-h3-lh) var(--sw-font-ui); border-bottom-color: var(--sw-line-strong); }
.sw-comp td { color: var(--sw-text-2); }
.sw-comp .is-consigliata { background: var(--sw-accent-1-tint); }
.sw-comp__eti {
  display: block;
  margin-top: var(--sw-s1);
  font: 700 var(--sw-t-ov)/var(--sw-t-ov-lh) var(--sw-font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sw-accent-1-text);
}

/* ─────────────────── 07 · Chiamata all'azione ───────────────────
   Una frase e un'azione. Il verbo dice cosa succede dopo. Quattro forme,
   una per posizione nella pagina: la fascia chiude, la scheda invita a
   meta', la riga chiude senza spingere, il campo raccoglie un contatto. */

/* a · fascia piena accento — chiusura di pagina, UNA sola per pagina.
   Il bottone si inverte: un accento su accento non esiste. */
.sw-cta-fascia {
  background: var(--sw-accent-1);
  color: var(--sw-text-onaccent);
  padding-block: var(--sw-respiro);
}
.sw-cta-fascia__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sw-sec-gap); flex-wrap: wrap; }
.sw-cta-fascia__title { margin: 0; font: 700 var(--sw-t-h1)/var(--sw-t-h1-lh) var(--sw-font-ui); }
.sw-cta-fascia__text { margin: var(--sw-s3) 0 0; opacity: .86; max-width: 68ch; }
.sw-cta-fascia .nlg-btn { background: var(--sw-bg-1); color: var(--sw-text-1); }
.sw-cta-fascia .nlg-btn:hover { background: var(--sw-surface-2); }
/* Il telefono e' la seconda riga toccabile della fascia (scheda 07a,
   resa mobile): un collegamento di testo su accento, non un secondo
   bottone — due bottoni in gara non sono una chiamata all'azione. */
.sw-cta-fascia__azioni { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sw-s3); }
/* `a.` e non la sola classe: la regola dei collegamenti di testo
   (`.sw-body a:not(.nlg-btn)`) pesa 0,2,1 e senza il tag qui si perde —
   accento su accento, e il numero sparisce nella fascia. Visto al
   collaudo. */
.sw-cta-fascia a.sw-cta-fascia__telefono { color: var(--sw-text-onaccent); min-height: var(--sw-hit-min); display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: .15em; }
.sw-cta-fascia a.sw-cta-fascia__telefono:hover { opacity: .86; }

/* b · scheda in vetro — invito a meta' pagina, la pagina continua sotto.
   Serve un fondo --sw-bg-0 sotto, altrimenti il vetro non rifrange nulla:
   e' la precondizione `fondo_richiesto` della variante, non un consiglio. */
.sw-cta-scheda { position: relative; padding: var(--sw-s7); display: flex; align-items: center; justify-content: space-between; gap: var(--sw-sec-gap); flex-wrap: wrap; border-radius: var(--sw-r3); }
.sw-cta-scheda { margin-top: var(--sw-s8); }
/* La firma del kit corre sul BORDO della lastra, non dentro la riga: nel
   flusso diventerebbe una terza colonna alta due pixel fra il testo e il
   bottone. Il raggio lo eredita, altrimenti gli spigoli sporgono. */
.sw-cta-scheda > .sw-glass__firma {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}
.sw-cta-scheda__testo { margin: 0; font: 600 var(--sw-t-h3)/var(--sw-t-h3-lh) var(--sw-font-ui); max-width: 48ch; }
/* La promessa in mono sotto l'invito, come nel campo (07d): cosa succede
   e in quanto tempo. E' la stessa riga, e si legge allo stesso modo. */
.sw-cta-scheda__promessa { margin: var(--sw-s2) 0 0; color: var(--sw-text-3); font: 400 var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-mono); }

/* c · riga di chiusura minima — un filo, due righe, un collegamento.
   Per pagine informative, dove una fascia suonerebbe come un banner. */
.sw-cta-riga { border-top: 1px solid var(--sw-line); padding-top: var(--sw-s5); display: flex; align-items: baseline; justify-content: space-between; gap: var(--sw-s5); flex-wrap: wrap; }
.sw-cta-riga__text { margin: 0; color: var(--sw-text-2); }
.sw-cta-riga__link { min-height: var(--sw-hit-min); display: inline-flex; align-items: center; }

/* d · campo inline — raccoglie un contatto, non un clic. Su superficie,
   non su accento: un campo su fondo accento perde il bordo. Un campo
   solo, e sotto la promessa in mono: cosa succede e in quanto tempo. */
.sw-cta-campo { background: var(--sw-surface-1); border: 1px solid var(--sw-line); border-radius: var(--sw-r3); padding: var(--sw-s6); }
.sw-cta-campo__riga { display: flex; gap: var(--sw-s3); flex-wrap: wrap; }
/* Il partial `t07-campo` del brand book scrive `.nlg-field`, non una
   classe del sito: questa riga cercava `.sw-input` e non ha mai
   combaciato con niente. Il campo della fascia di contatto restava
   quindi senza la propria larghezza. */
.sw-cta-campo__riga .nlg-field { flex: 1; min-width: 220px; }
.sw-cta-campo__promessa { margin: var(--sw-s3) 0 0; color: var(--sw-text-3); font: 400 var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-mono); }

/* ─────────────────── Resa mobile del repertorio ───────────────────
   Sotto 720px colonna unica e padding 20px. Le griglie 3 → 2 → 1, mai 4
   su tablet. Nessun carosello: nasconde meta' delle voci. */
@media (max-width: 720px) {
  .sw-body { --sw-respiro: var(--sw-s8); --sw-sec-pad: var(--sw-s5); --sw-sec-gap: var(--sw-s5); }

  .sw-tm { grid-template-columns: 1fr; }
  .sw-tm__media { order: -1; }                      /* il media sempre PRIMA del testo */
  .sw-tm--rovescio .sw-tm__testo { order: 0; }

  .sw-righe__voce { grid-template-columns: 1fr; gap: var(--sw-s2); }

  /* Il filo ruota e diventa una guida verticale a sinistra. */
  .sw-passi { grid-template-columns: 1fr; gap: var(--sw-s6); }
  .sw-passo { padding-inline-start: var(--sw-s6); }
  .sw-passo:not(:last-child)::before {
    top: calc(var(--sw-t-h2) / 2);
    left: calc(var(--sw-s2) - 1px);
    width: 1px;
    height: calc(100% + var(--sw-s6));
  }
  .sw-passo__n { position: absolute; inset-inline-start: 0; top: 0; padding: 0; }

  .sw-numeri { grid-template-columns: 1fr; }
  .sw-numeri__primo { padding: var(--sw-s6); }

  .sw-cit { grid-template-columns: 1fr; }

  .sw-cta-fascia__inner, .sw-cta-scheda { flex-direction: column; align-items: stretch; }
  /* Stava nel blocco «Responsive» del guscio, che nel foglio viene PRIMA
     di queste regole: a parita' di specificita' vinceva la dichiarazione
     desktop `align-items: flex-start`, e la riga non ha mai fatto niente.
     Il presidio sull'ordine la teneva accesa, e ora sta dove serve. */
  .sw-cta-fascia__azioni { align-items: stretch; }
  .sw-cta-fascia .nlg-btn, .sw-cta-scheda .nlg-btn { width: 100%; }
  .sw-cta-campo__riga { flex-direction: column; }
  .sw-cta-campo__riga .nlg-btn { width: 100%; }

  /* Le due colonne dell'elenco a righe tornano una: due colonne da 20ch
     non sono la «densita' doppia» che la scheda promette, sono due
     colonne strette. E il filo di chiusura torna, perche' in colonna
     unica l'ultima voce e' davvero l'ultima. */
  .sw-righe--due { grid-template-columns: minmax(0, 1fr); }
  .sw-righe--due .sw-righe__voce:last-child { border-bottom: 1px solid var(--sw-line); }

  /* La scala si incolonna: numero e titolo sopra, descrizione sotto. */
  .sw-scala__passo { grid-template-columns: minmax(0, 1fr); gap: var(--sw-s3); }

  /* La cifra del blocco passa sopra il titolo invece di rubargli 6ch su
     una colonna che ne ha una trentina. */
  .sw-sec--numerata .sw-sec__head { grid-template-columns: minmax(0, 1fr); gap: var(--sw-s3); }
  .sw-sec__cifra { justify-self: start; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Pagina di accesso
   Brand book 5.8.1, scheda `guidelines/layout-login.html` (§ 5.1).
   ═══════════════════════════════════════════════════════════════════════

   Quattro elementi e nient'altro: la banda, una forma, la scheda, il
   legale. La scheda sta a cavallo del taglio della banda — meta' su
   superficie, meta' su canvas — perche' e' li' che il vetro si vede: una
   lastra appoggiata su un fondo uniforme non rifrange niente e diventa un
   riquadro grigio.

   Fuori perimetro per dichiarazione della scheda: nessuna registrazione
   (gli accessi si creano dal gestionale), nessun social login, nessuna
   fotografia e nessuna biglia gigante — la forma parametrica e' l'unico
   elemento decorativo ammesso. */

.sw-accesso {
  min-height: 100vh;
  background: var(--sw-bg-0);
  position: relative;
  /* Centratura con flex, non con top:50% + translate: su un contenitore
     ad altezza automatica la percentuale di `top` si risolve a zero e
     resta solo la traslazione, che porta meta' scheda fuori dallo
     schermo. Verificato rendendo la pagina. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sw-s9);
}

/* 01 · fondo — unico, col filo di firma in cima. Dalla 6.0.0 la banda
   divisa non c'e' piu': il canvas e' piatto perche' le forme hanno il
   fondo di scena opaco, e una seconda superficie darebbe due tagli. */
.sw-accesso__firma-kit {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--sw-gradient-kit);
  z-index: 3;
}
.sw-accesso__marchio {
  position: absolute;
  inset-block-start: var(--sw-s7);
  inset-inline-start: var(--sw-s7);
  --sw-firma-h: 22px;
  z-index: 3;
  text-decoration: none;
}

/* 02 · costellazione — tre forme del repertorio, INTERAMENTE dentro il
   viewport (la 6.0.0 corregge l'inquadratura proprio per questo) e con
   opacita' a scalare. Decorative per intero: se WebGL non c'e', restano
   vuote e non manca nulla alla pagina. */
.sw-accesso__costellazione { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.sw-accesso__forma { position: absolute; }
.sw-accesso__forma--a { inset-block-start: 12vh; inset-inline-end: 14vw; opacity: .5; }
.sw-accesso__forma--b { inset-block-end: 14vh;   inset-inline-start: 16vw; opacity: .42; }
.sw-accesso__forma--c { inset-block-start: 46vh; inset-inline-end: 20vw;  opacity: .38; }

/* 03 · scheda — 420px fissi, centrata. */
.sw-accesso__scheda {
  position: relative;
  margin: 0 auto;
  width: 420px;
  max-width: calc(100% - 2 * var(--sw-s5));
  padding: var(--sw-s7);
  z-index: 2;
}
.sw-accesso__scheda .sw-glass__firma { margin: calc(var(--sw-s7) * -1) calc(var(--sw-s7) * -1) var(--sw-s6); }

.sw-accesso__overline {
  margin: 0 0 var(--sw-s2);
  font: 700 var(--sw-t-ov)/var(--sw-t-ov-lh) var(--sw-font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sw-text-3);
}
.sw-accesso__title { margin: 0 0 var(--sw-s6); font: 400 var(--sw-t-h2)/var(--sw-t-h2-lh) var(--sw-font-display); letter-spacing: .02em; }
/* Testata centrata (6.0.0): overline e titolo, non il modulo. */
.sw-accesso__overline, .sw-accesso__title { text-align: center; }
.sw-accesso__title:has(+ .sw-accesso__intro) { margin-bottom: var(--sw-s4); }
.sw-accesso__submit { width: 100%; }
.sw-accesso__intro { margin: 0 0 var(--sw-s5); color: var(--sw-text-2); }
.sw-accesso__steps { margin: 0 0 var(--sw-s5); padding-inline-start: var(--sw-s5); color: var(--sw-text-2); }
.sw-accesso__steps li { margin-bottom: var(--sw-s2); }

/* «Password dimenticata» e' una riga da 44px sotto il primario, non un
   link da 12px accanto a una casella di spunta. */
.sw-accesso__aside {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sw-hit-min);
  margin: var(--sw-s4) 0 0;
}

/* 04 · legale — ragione sociale, partita IVA e due collegamenti in mono.
   Nessun footer completo: questa pagina non e' il sito. */
.sw-accesso__legale {
  position: absolute;
  inset-block-end: var(--sw-s5);
  inset-inline: var(--sw-s5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sw-s4);
  flex-wrap: wrap;
  font: 400 var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-mono);
  color: var(--sw-text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}
/* Il simbolo di copyright, in grande.
   In Space Mono — e in molti caratteri — U+00A9 e' disegnato all'altezza
   della x e con l'anello sottile: accanto a un maiuscoletto sembra un
   apice, non un simbolo. Non esiste una variante «grande» in Unicode: si
   fa qui, ingrandendo il glifo e riportandolo sulla linea di base. Un
   posto solo, e vale per tutto il sito. */
.sw-copy {
  font-size: 1.35em;
  line-height: 1;
  vertical-align: -0.08em;
}

.sw-accesso__legale p { margin: 0; }
.sw-accesso__legale a { color: var(--sw-text-3); }
/* Il bottone delle preferenze e' un bottone, quindi non eredita ne' il
   carattere ne' il maiuscoletto del pie': senza questa riga stava accanto
   a «TERMINI» scritto in un altro modo. */
.sw-accesso__consent {
  padding: 0;
  border: 0;
  background: none;
  /* `font` non porta con se' ne' il maiuscoletto ne' la spaziatura: senza
     queste due righe «Preferenze» stava accanto a «TERMINI» scritto in un
     altro modo. */
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: var(--sw-text-3);
  text-decoration: underline;
  cursor: pointer;
}

/* ── Stati del modulo ──
   ERRORE: bordo --sw-err sui campi e UN messaggio sotto il modulo, mai un
   toast — l'errore appartiene al modulo. Non si dice quale dei due dati e'
   sbagliato: distinguerli sarebbe un servizio a chi sonda. */
.sw-accesso .nlg-input[aria-invalid="true"] { border-bottom-color: var(--sw-err); }
.sw-accesso__errore {
  margin: var(--sw-s4) 0 0;
  padding: var(--sw-s3) var(--sw-s4);
  border-radius: var(--sw-r2);
  background: var(--sw-err-tint);
  color: var(--sw-text-1);
  font: 400 var(--sw-t-bs)/var(--sw-t-bs-lh) var(--sw-font-ui);
}

/* ATTESA: il bottone si disabilita e cambia verbo. Nessuno spinner —
   240ms non meritano un'animazione, e oltre il secondo lo dice il
   bottone. */
.nlg-btn[disabled] { opacity: .62; cursor: default; pointer-events: none; }

/* BLOCCO: i campi restano visibili e inerti, con la pastiglia e il tempo
   residuo SCRITTO, non contato a schermo. */
.sw-accesso__form--bloccato { opacity: .38; pointer-events: none; }
.sw-accesso__blocco {
  display: inline-flex;
  align-items: center;
  gap: var(--sw-s2);
  margin: 0 0 var(--sw-s5);
  padding: var(--sw-s1) var(--sw-s3);
  border-radius: var(--sw-r-full);
  background: var(--sw-warn-tint);
  color: var(--sw-text-1);
  font: 700 var(--sw-t-ov)/var(--sw-t-ov-lh) var(--sw-font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Mobile 392 → la struttura non cambia: si stringe. */
@media (max-width: 720px) {
  /* «Marchio a 30px dai bordi, scheda a 20px, una o due forme al posto di
     tre. La struttura non cambia: si stringe.» */
  .sw-accesso__marchio { inset-block-start: 30px; inset-inline-start: 30px; --sw-firma-h: 18px; }

  /* La scheda rientra nel flusso: su un telefono in orizzontale la
     centratura assoluta taglierebbe il modulo a meta', e una pagina di
     accesso tagliata non si puo' usare. */
  .sw-accesso__scheda { width: auto; max-width: none; margin: 0 20px; padding: var(--sw-s6); }
  .sw-accesso { padding-block: calc(var(--sw-s9) + var(--sw-s6)) var(--sw-s8); }
  .sw-accesso__scheda .sw-glass__firma { margin: calc(var(--sw-s6) * -1) calc(var(--sw-s6) * -1) var(--sw-s5); }
  /* Delle tre forme ne restano due: la terza, su 392px, si sovrapporrebbe
     alla scheda invece di stare intorno. */
  .sw-accesso__forma--c { display: none; }
  .sw-accesso__forma--a { inset-block-start: 4vh; inset-inline-end: -6vw; }
  .sw-accesso__forma--b { inset-block-end: 4vh; inset-inline-start: -8vw; }
  .sw-accesso__legale { position: static; margin-top: var(--sw-s7); padding: 0 var(--sw-s5) var(--sw-s5); justify-content: center; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Pagina 404
   Brand book 5.8.1, scheda `guidelines/layout-404.html` (§ 5.1).
   ═══════════════════════════════════════════════════════════════════════

   Quattro blocchi in ordine fisso: dichiarazione, monumento, spiegazione,
   uscite. Un asse solo, un solo fuoco visivo. Il tono e' dichiarato dalla
   scheda ed e' vincolante: si dice il fatto tecnico e si offre una via
   d'uscita — niente scuse, niente battute, nessuna colpa all'utente.

   Topbar e footer sono quelli del sito, non una versione ridotta: chi
   arriva qui deve poter ripartire come da qualunque altra pagina. */

.sw-404 { text-align: center; padding-block: var(--sw-respiro); }
.sw-404__dichiarazione { display: flex; flex-direction: column; align-items: center; gap: var(--sw-s3); margin-bottom: var(--sw-s8); }
.sw-404__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sw-s1) var(--sw-s3);
  border-radius: var(--sw-r-full);
  background: var(--sw-err-tint);
  color: var(--sw-text-1);
  font: 700 var(--sw-t-ov)/var(--sw-t-ov-lh) var(--sw-font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.sw-404__overline { margin: 0; color: var(--sw-text-3); font: 400 var(--sw-t-bs)/var(--sw-t-bs-lh) var(--sw-font-ui); }

/* 02 · monumento — le due cifre in display e la biglia al posto dello
   zero. La finitura e' dettata dal regime di misura della scheda:
   `vintage` sopra i 120px, mai `cristallo` — quello e' riservato agli
   hero. Senza WebGL la biglia dipinge il proprio ripiego 2D e il
   monumento resta in piedi. */
.sw-404__monumento {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sw-s2);
  margin-bottom: var(--sw-s8);
}
.sw-404__cifra {
  font: 400 clamp(104px, 18vw, 200px)/1 var(--sw-font-display);
  letter-spacing: .02em;
  color: var(--sw-text-1);
}
.sw-404__zero { width: clamp(104px, 18vw, 200px); height: clamp(104px, 18vw, 200px); display: block; }

/* 03 · spiegazione — titolo bicromo e due righe di corpo. */
.sw-404__title { margin: 0 0 var(--sw-s4); font: 700 var(--sw-t-h1)/var(--sw-t-h1-lh) var(--sw-font-ui); }
.sw-404__title b { font-weight: inherit; color: var(--sw-accent-1-text); }
.sw-404__text { margin: 0 auto var(--sw-s7); max-width: 56ch; color: var(--sw-text-2); font: 400 var(--sw-t-bl)/var(--sw-t-bl-lh) var(--sw-font-ui); }

/* 04 · uscite — due azioni, mai di piu'. */
.sw-404__uscite { display: flex; justify-content: center; gap: var(--sw-s4); flex-wrap: wrap; }

@media (max-width: 720px) {
  .sw-404__uscite { flex-direction: column; }
  .sw-404__uscite .nlg-btn { width: 100%; min-height: 48px; }
}

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

/* La resa sobria dei segnaposto [[erp:famiglia:id]]: scheda su superficie,
   in attesa dei layout dedicati dal brand book. Solo token semantici. */
.sw-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);
}
.sw-erp--vuoto { border-style: dashed; }
.sw-erp__nota { margin: 0; color: var(--sw-text-3); font: 400 var(--sw-t-bs)/var(--sw-t-bs-lh) var(--sw-font-ui); }
.sw-erp__id { font-family: var(--sw-font-mono); }
.sw-erp__head { margin-bottom: var(--sw-s4); }
.sw-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);
}
.sw-erp__title { margin: 0; font: 600 var(--sw-t-h3)/var(--sw-t-h3-lh) var(--sw-font-ui); color: var(--sw-text-1); }
.sw-erp__campi { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sw-s3) var(--sw-s5); }
.sw-erp__campo dt { font: 500 var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-ui); color: var(--sw-text-3); }
.sw-erp__campo dd { margin: 0; color: var(--sw-text-1); }
.sw-erp__lista { margin: var(--sw-s4) 0 0; padding-left: var(--sw-s5); color: var(--sw-text-2); }
.sw-erp__lista li { margin-bottom: var(--sw-s1); }

/* ═══════════════════════ Area personale ═══════════════════════ */

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

/* ═══════════════════════ Dettagli di pagina ═══════════════════════ */

/* La voce di menu che converte: si distingue dalle altre senza gridare. */
.sw-nav__cta { color: var(--sw-accent-1-text); font-weight: 600; }

.sw-label__facoltativo { color: var(--sw-text-3); font-weight: 400; }

/* La riga di validità del documento: mono, sommessa, sotto il titolo.
   È un dato del documento, non una frase della pagina. */
.sw-termini__meta {
  margin: calc(var(--sw-s4) * -1) 0 var(--sw-s6);
  font: 400 var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-mono);
  color: var(--sw-text-3);
}
.sw-termini__anno { color: var(--sw-text-3); font-family: var(--sw-font-mono); font-size: var(--sw-t-cap); }

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

/* ═══════════════════════════════════════════════════════════════════════
   Pagina di manutenzione (503)
   Brand book 6.0.0, scheda `guidelines/layout-manutenzione.html` (§ 5.1).
   ═══════════════════════════════════════════════════════════════════════

   Quarta pagina di sistema obbligatoria. Quattro elementi: codice, biglia
   in orbita, barra dell'avanzamento, gioco del kit. Il tono e' dichiarato:
   non c'e' nulla da fare, e la pagina lo dice invece di fingere vie
   d'uscita che non porterebbero da nessuna parte.

   Fuori dalla scheda: nessun conto alla rovescia al secondo, nessun
   modulo, nessun collegamento di navigazione. */

.sw-fermo {
  /* Le due misure che governano la pagina stanno QUI, sull'antenato comune
     della scheda e dell'orbita: una custom property scende, non attraversa.
     Dichiarate sull'orbita, l'involucro non le vedeva e `width` restava
     invalida — la scheda passava da 520 a 670 px senza che niente si
     lamentasse. */
  --sw-carta: 520px;
  --sw-biglia: 280px;
  min-height: 100vh;
  background: var(--sw-bg-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sw-s6);
  padding: var(--sw-s8) var(--sw-s5);
  position: relative;
  overflow: hidden;
}

/* La firma del kit a tutta larghezza, in cima: e' il primo elemento del
   mock della scheda, e senza di essa la pagina galleggia in un fondo
   piatto senza un bordo che la tenga. */
.sw-fermo::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--sw-gradient-kit);
  z-index: 3;
}

/* Il marchio sta in alto a sinistra della PAGINA, non dentro la scheda:
   e' la disposizione del mock, e toglie dalla scheda i settanta pixel che
   le impedivano di stare nelle proporzioni giuste. */
.sw-fermo__marchio {
  position: absolute;
  inset-block-start: var(--sw-s6);
  inset-inline-start: var(--sw-s7);
  --sw-firma-h: 18px;
  z-index: 2;
}

/* 02 · biglia — 280px in orbita lenta ATTORNO al vetro. L'orbita e' una
   traslazione del contenitore, non un ridisegno: la biglia si costruisce
   una volta e il moto costa quanto una transform.

   Tre cose che la prima stesura aveva sbagliate, e che si vedono solo
   guardando la pagina resa:

   1. L'orbita era centrata sul CONTENITORE, non sulla scheda. Sotto la
      scheda ci sono il gioco dei kit e il pie' di pagina, quindi i due
      centri non coincidono: l'orbita passava alta di una settantina di
      pixel e la biglia scendeva dentro la scheda invece di girarle
      intorno. Ora la scheda ha un involucro proprio, `__vetro`, e
      l'orbita e' centrata su quello: qualunque cosa stia sotto, i due
      centri restano lo stesso punto.

   2. Il tracciato era un rombo di quattro fotogrammi. Fra un vertice e
      l'altro l'interpolazione e' lineare, quindi a meta' lato il centro
      della biglia sta a 0,71 del raggio — dentro la scheda. La regola
      della scheda vale a OGNI istante, non ai quattro vertici.

   3. Il rapporto della scheda era 0,83 invece dello 0,45 del mock: una
      lastra alta 429 px su 520, che nessuna orbita puo' scavalcare in una
      finestra da 900.

   Sulla profondita' di penetrazione c'e' una DEVIAZIONE DICHIARATA, con
   la misura, in AGENTS.md. */
.sw-fermo__vetro {
  position: relative;
  width: var(--sw-carta);
  max-width: 100%;
}
.sw-fermo__orbita {
  /* Semiasse orizzontale e schiacciamento verticale: l'orbita e' un'ellisse
     che segue la forma della scheda, non un cerchio. Un cerchio abbastanza
     largo da non tagliare gli angoli della scheda uscirebbe dallo schermo
     in alto e in basso; questa ellisse sta in 880 px — dentro un 900 —
     e ai lati sfiora la scheda invece di allontanarsene. */
  --sw-orbita-a: 392px;
  --sw-orbita-k: 0.765; /* 300 / 392 */
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--sw-biglia);
  height: var(--sw-biglia);
  margin: calc(var(--sw-biglia) / -2) 0 0 calc(var(--sw-biglia) / -2);
  pointer-events: none;
  animation: sw-orbita 44s linear infinite;
}
.sw-fermo__biglia { display: block; width: 100%; height: 100%; }

/* L'ellisse in una catena sola, senza elementi d'appoggio.
   `scaleY(k) · rotate(t) · translateX(a) · rotate(-t) · scaleY(1/k)`:
   l'origine finisce in (a·cos t, k·a·sin t) — un'ellisse — mentre la parte
   lineare della catena si annulla, `S(k)·R(t)·R(-t)·S(1/k) = I`, e il
   riquadro resta quadrato e allineato agli assi. Cioe' la biglia percorre
   un'ellisse senza essere schiacciata ne' ruotata. */
@keyframes sw-orbita {
  from {
    transform: scaleY(var(--sw-orbita-k)) rotate(0deg) translateX(var(--sw-orbita-a))
               rotate(0deg) scaleY(calc(1 / var(--sw-orbita-k)));
  }
  to {
    transform: scaleY(var(--sw-orbita-k)) rotate(360deg) translateX(var(--sw-orbita-a))
               rotate(-360deg) scaleY(calc(1 / var(--sw-orbita-k)));
  }
}
/* «Con moto ridotto sta ferma a destra»: e' il fotogramma zero. */
@media (prefers-reduced-motion: reduce) {
  .sw-fermo__orbita { animation: none; transform: translateX(var(--sw-orbita-a)); }
}

/* 03 · scheda — `.nlg-card` del brand book, col pannello di sistema al 68%
   che la scheda prescrive: resta vetro dove il kit lo prevede e lastra
   quasi piena su Pop. Qui sotto c'e' solo cio' che il componente non
   porta gia'. */
.sw-fermo__scheda {
  position: relative;
  z-index: 2;
  width: 100%;
  background: color-mix(in srgb, var(--sw-glass-panel) 68%, transparent);
}
.sw-fermo__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--sw-s4);
  padding: var(--sw-s5) var(--sw-s6) var(--sw-s6);
}

/* Il riflesso del puntatore, in accento di palette: legge il contratto del
   vetro reattivo (--mx, --pr) che `js/materia.js` scrive sulle lastre. */
.sw-fermo__rifl {
  position: absolute;
  inset-block-start: 0;
  height: 2px;
  width: 100px;
  inset-inline-start: calc(var(--mx, .5) * 100% - 50px);
  background: linear-gradient(90deg, transparent, var(--sw-accent-1), transparent);
  opacity: var(--pr, 0);
  pointer-events: none;
  z-index: 1;
}

/* 01 · codice — pastiglia in alto a destra, e ripetuto nel pie' di pagina. */
.sw-fermo__codice { align-self: flex-end; }
.sw-fermo__codice i {
  width: 6px;
  height: 6px;
  border-radius: var(--sw-r-full);
  background: var(--sw-warn);
}

.sw-fermo__titolo {
  margin: 0;
  font-size: var(--sw-t-d2);
  line-height: var(--sw-t-d2-lh);
  color: var(--sw-text-1);
}
.sw-fermo__testo { margin: 0; color: var(--sw-text-2); max-width: 52ch; }

/* 03 · barra — `.nlg-progress` del brand book: la palette intera riempie il
   tratto trascorso, il resto resta appena percettibile. Nessuna
   animazione: e' un fermo, non un caricamento. */
.sw-fermo__avanzamento { display: flex; flex-direction: column; gap: var(--sw-s2); }
.sw-fermo__quota,
.sw-fermo__finestra { margin: 0; display: flex; justify-content: space-between; gap: var(--sw-s3); }
.sw-fermo__quota b { font: 600 var(--sw-t-ov)/var(--sw-t-ov-lh) var(--sw-font-mono); color: var(--sw-text-1); }
.sw-fermo__barra { transition: none; }

/* 04 · gioco — sotto il vetro, il selettore di kit senza la voce
   «Sistema»: il fermo e' l'unico momento in cui il kit lo sceglie chi
   guarda. I bolli sono `.nlg-chip` con dentro la palette del kit. */
.sw-fermo__gioco {
  position: relative;
  z-index: 2;
  text-align: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sw-s3);
  padding: var(--sw-s4) var(--sw-s5);
}
.sw-fermo__gioco-eti { margin: 0; }
.sw-fermo__gioco-eti b { color: var(--sw-accent-1-text); }
.sw-fermo__kit { display: flex; gap: var(--sw-s3); justify-content: center; }

/* Il bollo e' un cerchio riempito con la firma del kit che rappresenta:
   `--sw-gradient-kit` si risolve DENTRO il bottone, che porta il proprio
   [data-kit]. Nessun colore scritto a mano, e cinque bolli diversi da una
   regola sola. */
.sw-fermo__bollo {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--sw-line-strong);
  border-radius: var(--sw-r-full);
  background: var(--sw-gradient-kit);
  cursor: pointer;
  transition: transform var(--sw-dur-2) var(--sw-ease), border-color var(--sw-dur-2) var(--sw-ease);
}
.sw-fermo__bollo:hover { transform: scale(1.12); }
.sw-fermo__bollo[aria-pressed="true"] { border-color: var(--sw-text-1); border-width: 2px; }

.sw-fermo__pie {
  position: relative;
  z-index: 2;
  font: 400 var(--sw-t-ov)/var(--sw-t-ov-lh) var(--sw-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sw-text-3);
  text-align: center;
}
.sw-fermo__pie p { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sw-s2); justify-content: center; }
.sw-fermo__pie b { color: var(--sw-accent-2-text); }
.sw-fermo__pie a { color: var(--sw-accent-1-text); }

@media (max-width: 720px) {
  /* Su un telefono l'orbita passerebbe sotto la scheda: la biglia si
     ferma in alto, piccola, e smette di girare. */
  .sw-fermo { padding-top: var(--sw-s9); }
  .sw-fermo__marchio { inset-inline-start: var(--sw-s5); }
  .sw-fermo__vetro { padding-top: 150px; }
  .sw-fermo__orbita {
    --sw-biglia: 130px;
    animation: none;
    inset-block-start: 65px;
    transform: none;
  }
  .sw-fermo__corpo { padding: var(--sw-s4) var(--sw-s5) var(--sw-s5); }
  .sw-fermo__quota, .sw-fermo__finestra { flex-direction: column; gap: var(--sw-s1); align-items: center; text-align: center; }
}

/* ═══════════════════════ Figlio Noleggiando ═══════════════════════
   Le regole degli elementi che il figlio porta e il padre non ha: il
   marchio del brand book (un SVG, non le lamine del kit del padre), la
   barra utility sopra l'header, le quattro fasce del piede, la mappa del
   sito, le proposte nella 404. Solo ruoli del ponte; le misure che il
   brand book dichiara (§ 5.1.1: utility 32 px, testata 56) sono scritte
   come tali. Le media query stanno in fondo, dopo le regole che
   scavalcano. */

.sw-marchio { display: inline-flex; line-height: 0; }
.sw-marchio svg { display: block; height: 100%; width: auto; }
.sw-marchio--lockup { height: 36px; }
.sw-marchio--payoff { height: 48px; }
.sw-marchio--raggera, .sw-marchio--raggera5 { height: 40px; }
.sw-brand .sw-marchio--lockup { height: 32px; }
.sw-error__mark .sw-marchio--raggera { height: 56px; }
.sw-accesso__marchio .sw-marchio--lockup, .sw-fermo__marchio .sw-marchio--lockup { height: 40px; }
.wp-brand { display: grid; gap: var(--sw-s1); text-decoration: none; color: var(--sw-text-2); }
.wp-brand .sw-marchio--lockup { height: 28px; }
.wp-brand__prodotto { font: 600 var(--sw-t-cap)/var(--sw-t-cap-lh) var(--sw-font-mono); letter-spacing: var(--nlg-ls-overline); text-transform: uppercase; }

.sw-utility { background: var(--sw-surface-2); border-bottom: 1px solid var(--sw-line); }
.sw-utility__inner { display: flex; align-items: center; gap: var(--sw-s4); min-height: 32px; font-size: var(--sw-t-bs); }
.sw-utility__spazio { flex: 1; }
.sw-utility__voce { color: var(--sw-text-2); text-decoration: none; }
.sw-utility__voce:hover { color: var(--sw-accent-1-text); }
.sw-header__cta-corto { display: none; }
.sw-nav__coda-voce { display: block; padding: var(--sw-s2) 0; color: var(--sw-text-2); text-decoration: none; }

.sw-footer__azione { background: var(--sw-accent-1); color: var(--sw-text-onaccent); }
.sw-footer__azione-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sw-s5); padding-block: var(--sw-s6); }
.sw-footer__azione-testo { margin: 0; font: 700 var(--sw-t-h3)/var(--sw-t-h3-lh) var(--sw-font-display); }
.sw-footer__azione .sw-footer__azione-bottone { background: var(--sw-surface-1); color: var(--sw-accent-1-text); border-color: var(--sw-surface-1); }
.sw-footer__marchio { display: grid; align-content: start; gap: var(--sw-s5); }
.sw-footer__sedi { display: grid; gap: var(--sw-s4); margin: 0; padding: 0; list-style: none; }
.sw-footer__sede { display: grid; gap: 2px; font-size: var(--sw-t-bs); color: var(--sw-text-2); }
.sw-footer__sede a { color: var(--sw-text-2); }
.sw-footer__gruppi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sw-s5); }
.sw-footer__gruppo { display: grid; align-content: start; gap: var(--sw-s2); font-size: var(--sw-t-bs); }
.sw-footer__gruppo a { color: var(--sw-text-2); text-decoration: none; }
.sw-footer__gruppo a:hover { color: var(--sw-accent-1-text); }
.sw-footer__gruppo-titolo { margin: 0 0 var(--sw-s1); font-weight: 700; color: var(--sw-text-1); }
.sw-footer__filo { height: 4px; background: var(--sw-gradient-kit); }
.sw-footer__dicitura, .sw-footer__copyright, .sw-footer__legali { margin: 0; font-size: var(--sw-t-cap); color: var(--sw-text-3); }
.sw-footer__legali a { color: var(--sw-text-3); }

.sw-mappa { display: grid; gap: var(--sw-s6); }
.sw-mappa__titolo { margin: 0; font: 800 var(--sw-t-h1)/var(--sw-t-h1-lh) var(--sw-font-display); }
.sw-mappa__sezione-titolo { margin: 0 0 var(--sw-s3); font: 700 var(--sw-t-h3)/var(--sw-t-h3-lh) var(--sw-font-display); }
.sw-mappa__voci { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sw-s2) var(--sw-s5); margin: 0; padding: 0; list-style: none; }

.sw-404__proposte { display: flex; flex-wrap: wrap; gap: var(--sw-s2) var(--sw-s4); justify-content: center; margin-block: var(--sw-s4); max-width: 68ch; margin-inline: auto; }
.sw-404__proposte .nlg-overline { flex-basis: 100%; text-align: center; }
.sw-404__cifra { font-family: var(--sw-font-mono); font-weight: 500; }

@media (max-width: 760px) {
  .sw-header__cta-lungo { display: none; }
  .sw-header__cta-corto { display: inline; }
  .sw-utility { display: none; }
  .sw-footer__azione-inner { flex-direction: column; align-items: flex-start; }
  .sw-footer__gruppi { grid-template-columns: minmax(0, 1fr); }
}

/* Breadcrumb e figlie delle proposte (figlio Noleggiando). */
.sw-proposte { padding-block: var(--sw-s4) 0; }
.sw-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); }
.sw-briciole li + li::before { content: "›"; margin-inline-end: var(--sw-s2); }
.sw-briciole a { color: var(--sw-text-2); }
.sw-figlie { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sw-s3); margin-top: var(--sw-s4); }
.sw-figlie__voce { padding: var(--sw-s4); font-weight: 600; text-decoration: none; }

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

/* Nel cassetto le voci partono dal bordo (figlio Noleggiando). La regola
   della barra centra le voci (`justify-content: center`), e nel cassetto
   la griglia la eredita: la colonna prende la larghezza della voce piu'
   lunga e si mette al centro, e con poche voci corte «Chi siamo» e
   «Contatti» finivano a meta' schermo, disallineate dalla coda. */
@media (max-width: 719px) {
  .sw-nav__voci { justify-content: stretch; }
}