/* ═══════════════════════════════════════════════════════════════════════════
   NEW LIFE — COMPONENTI (strato comune, «La croce evoluta»)
   ───────────────────────────────────────────────────────────────────────────
   Tutto ciò che si ripete fra le pagine e fra i siti: impalcatura (riga di
   sistema, testata, menu, piè di pagina, barra rapida), pulsanti, forme della
   croce, schede, sedi, fisarmonica, moduli. Un verticale cambia solo
   l'accento (data-brand, token.css). Regole e fonti: DESIGN.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Le forme della croce ───────────────────────────────────────────────
   L'unico ornamento del sito (DESIGN.md, principio 1). Sempre decorative:
   pseudo-elementi o aria-hidden. Il colore è il fondo, la forma è la maschera. */
/* Le forme sono scritte qui dentro (data URI) e non lette da assets/forme/:
   aperto con un doppio clic (file://), Chrome non applica le maschere prese da
   un file esterno. Sorgenti: assets/forme/elemento-azzurro.svg,
   elemento-accento.svg, croce-contorno.svg. */
:root {
  --forma-azzurro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23000' d='M0 200V100H100V0H200A200 200 0 0 1 0 200Z'/%3E%3C/svg%3E");
  --forma-accento: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23000' d='M200 0V100H100V200H0A200 200 0 0 1 200 0Z'/%3E%3C/svg%3E");
  --forma-contorno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 304 304' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 200V100H100V0H200A200 200 0 0 1 0 200Z'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M300 100V200H200V300H100A200 200 0 0 1 300 100Z'/%3E%3C/svg%3E");
}

/* ── Riga di sistema ───────────────────────────────────────────────────── */
.riga-sistema { background: var(--nl-blu-notte); color: var(--nl-ink-su-scuro-2); font: 500 .9375rem/1 var(--nl-font-marchio); }
.riga-sistema-dentro { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.5rem; }
.riga-sistema a { display: inline-flex; align-items: center; gap: .4rem; color: var(--nl-bianco); text-decoration: none; }
.riga-sistema a:hover { text-decoration: underline; text-underline-offset: .25em; }
.riga-sistema strong { color: var(--nl-bianco); font-weight: 700; }
.riga-sistema .icona { width: 1rem; height: 1rem; }
/* La destinazione per intero solo dove c'è spazio accanto a orari e telefono. */
.riga-sistema-lungo { display: none; }
@media (min-width: 75em) { .riga-sistema-lungo { display: inline; } .riga-sistema-breve { display: none; } }
.riga-sistema-orari { display: none; }
/* Da telefono il numero sta nella barra rapida: la riga tiene solo il Centro. */
.riga-sistema-telefono { display: none !important; }
@media (min-width: 48em) { .riga-sistema-telefono { display: inline-flex !important; } }
@media (min-width: 60em) { .riga-sistema-orari { display: block; } }
/* Ferma in cima insieme alla testata (modifica 1 di Giosuè, 7/10): orari e
   telefono restano in vista mentre si scorre. Da telefono no: lì la riga
   mostra solo il legame con il Centro, e il numero sta nella barra rapida;
   fermarla toglierebbe 40px allo schermo senza dare niente. */
@media (min-width: 48em) {
  .riga-sistema { position: sticky; top: 0; z-index: 21; }
  .riga-sistema-dentro { height: var(--nl-riga); min-height: 0; }
  .riga-sistema + .testata { top: var(--nl-riga); }
  html:has(.riga-sistema) { --nl-cima: calc(var(--nl-riga) + var(--nl-testata)); scroll-padding-top: calc(var(--nl-riga) + var(--nl-testata) + 1rem); }
}

/* ── Il segno: la croce piccola, nel colore di un'area (--segno) ──────────
   Barra delle sezioni, home e ricerca del principale. */
.segno { position: relative; flex: none; width: 2.5rem; height: 2.5rem; }
.segno::before, .segno::after { content: ""; position: absolute; width: 66.667%; height: 66.667%; }
.segno::before { left: 0; top: 0; clip-path: url(#clip-azzurro); background: var(--nl-blu); }
.segno::after { left: 33.333%; top: 33.333%; clip-path: url(#clip-accento); background: var(--segno, var(--nl-accento)); }

/* ── Barra delle sezioni ──────────────────────────────────────────────────
   Sotto la testata, su ogni pagina del sito che la dà (sistema.sezioni, oggi
   il principale). Ferma sotto la testata su tutto il sito (10/10, Mauro).
   Il Lab per primo,
   con i colori del Lab (data-brand="lab" sul link: token.css, strato 2); poi le aree, con il segno grigio che prende il blu al
   passaggio e sulla voce della pagina in cui si è. Se non ci sta, scorre di
   lato (da telefono sempre), con la sfumatura a destra che lo dice. */
.sezioni { position: sticky; top: var(--nl-testata); z-index: 19; background: var(--nl-bianco); border-bottom: 1px solid var(--nl-bordo); }
/* Quello che resta fermo in cima, per le ancore e per chi si ferma sotto
   (--nl-cima: token.css): testata, più la riga di sistema da 768px o la
   barra delle sezioni, dove ci sono. */
html:has(.sezioni) { --nl-cima: calc(var(--nl-testata) + var(--nl-sezioni)); scroll-padding-top: calc(var(--nl-cima) + 1rem); }
.sezioni-dentro {
  display: flex; align-items: center; gap: 1rem; min-height: var(--nl-sezioni);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.sezioni-dentro::-webkit-scrollbar { display: none; }
/* Scorsa (interfaccia.js): la sfumatura anche a sinistra, dove c'è il Lab. */
.sezioni-dentro.is-scorsa {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}
.sezioni-lab {
  flex: none; display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.5rem; padding: 0 .9rem 0 .7rem;
  border-radius: var(--nl-r-pillola); background: var(--nl-accento-tinta);
  color: var(--nl-ink); text-decoration: none; white-space: nowrap;
  transition: box-shadow var(--nl-veloce);
}
.sezioni-lab .segno { width: 1.375rem; height: 1.375rem; }
.sezioni-lab-testo { font-size: .9375rem; font-weight: 700; }
.sezioni-lab .icona { width: 1rem; height: 1rem; color: var(--nl-ink-2); }
/* Sul Lab è il sito in cui si è: il bordo nel suo colore, come al passaggio. */
.sezioni-lab[aria-current] { box-shadow: inset 0 0 0 1.5px var(--nl-accento); }
.sezioni-lista { display: flex; flex: 1 0 auto; justify-content: space-between; gap: .25rem; margin: 0; padding: 0 2rem 0 0; list-style: none; }
.sezioni-voce {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  min-height: var(--nl-sezioni); padding-inline: .35rem;
  color: var(--nl-ink-2); text-decoration: none; white-space: nowrap; font-weight: 500; font-size: .9375rem;
  transition: color var(--nl-veloce);
}
.sezioni-voce .segno { width: 1.125rem; height: 1.125rem; }
.sezioni-voce .segno::before { background: var(--nl-ink-3); opacity: .35; transition: opacity var(--nl-veloce), background-color var(--nl-veloce); }
.sezioni-voce[aria-current] { color: var(--nl-ink); font-weight: 700; }
.sezioni-voce[aria-current] .segno::before { background: var(--nl-blu); opacity: 1; }
/* La voce accesa ha il filo sotto, nel colore dell'area (come la barra della home). */
.sezioni-voce[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--segno, var(--nl-blu)); }
@media (hover: hover) and (pointer: fine) {
  .sezioni-voce:hover { color: var(--nl-ink); }
  .sezioni-voce:hover .segno::before { background: var(--nl-blu); opacity: 1; }
  .sezioni-lab:hover { box-shadow: inset 0 0 0 1.5px var(--nl-accento); }
}
@media (min-width: 75em) { .sezioni-dentro, .sezioni-dentro.is-scorsa { -webkit-mask-image: none; mask-image: none; } .sezioni-lista { padding-right: 0; } }
/* Fra 1200 e 1440px tutto in una riga: le voci si stringono. */
@media (min-width: 75em) and (max-width: 89.99em) {
  .sezioni-dentro { gap: .5rem; }
  .sezioni-voce { gap: .4rem; padding-inline: .2rem; font-size: .875rem; }
  .sezioni-voce .segno { width: 1rem; height: 1rem; }
}

/* ── Testata ────────────────────────────────────────────────────────────
   Bianca e ferma in cima allo scorrimento (STRUTTURA.md §1). */
.testata {
  position: sticky; top: 0; z-index: 20;
  background: var(--nl-bianco);
  border-bottom: 1px solid var(--nl-bordo);
}
.testata-dentro { display: flex; align-items: center; gap: 1rem; min-height: var(--nl-testata); }
.marchio { display: block; flex: none; margin-right: auto; }
.marchio img { width: clamp(11rem, 8rem + 7vw, 14rem); height: auto; }
/* Da telefono il preventivo sta nella barra rapida. (Selettore doppio: .pulsante,
   più sotto, rimetterebbe il display.) */
.testata .testata-cta { display: none; }
@media (min-width: 40em) { .testata .testata-cta { display: inline-flex; } }
/* Referti (7/10, modifica 2 di Giosuè): bordato, a sinistra del preventivo.
   Dice sempre «Referti» per esteso, con l'icona accanto (10/10, Mauro: chi è
   anziano deve riconoscerlo subito, l'icona da sola no). Il nome intero
   («Scarica il tuo referto») lo leggono i lettori di schermo e compare al
   passaggio del mouse. Sotto i 768px Referti sta nel menu. Per fargli posto
   il preventivo dice «Preventivo» fra 640 e 1024px e fra 1200 e 1360px, e
   fra 1200 e 1440px Referti perde l'icona (la parola resta). */
.testata .testata-referti { display: none; }
.testata-cta-breve { display: none; }
@media (min-width: 48em) { .testata .testata-referti { display: inline-flex; } }
@media (min-width: 40em) and (max-width: 63.99em) {
  .testata-cta-lungo { display: none; }
  .testata-cta-breve { display: inline; }
  .testata .testata-cta { padding-inline: 1.1rem; }
}
@media (min-width: 75em) and (max-width: 89.99em) {
  .testata .testata-referti { padding-inline: 1.1rem; }
  .testata .testata-referti > .icona { display: none; }
  .testata-dentro { gap: .75rem; }
}
@media (min-width: 75em) and (max-width: 84.99em) {
  .testata-cta-lungo { display: none; }
  .testata-cta-breve { display: inline; }
  .testata .testata-cta { padding-inline: 1.1rem; }
}
@media (min-width: 75em) and (max-width: 89.99em) {
  .nav .nav-link, .nav .nav-apri { padding-inline: .5rem; }
}
.testata-cta, .testata .testata-referti { flex: none; white-space: nowrap; }

/* «Chiama» (10/10): solo dove il sito lo chiede (sistema.chiamaInTestata).
   Tondo con l'icona; il numero a video da 1600px (sotto, Referti scritto
   per esteso ha la precedenza: 10/10). A differenza
   di Referti resta anche da telefono, accanto al menu: è lì che si chiama. */
.testata .testata-chiama { flex: none; width: 3rem; height: 3rem; min-height: 0; padding: 0; white-space: nowrap; }
.testata-chiama-numero { display: none; }
@media (min-width: 40em) { .testata .testata-chiama { width: 3.25rem; height: auto; min-height: 3.25rem; } }
@media (min-width: 100em) {
  .testata .testata-chiama { width: auto; padding-inline: 1.25rem; }
  .testata-chiama-numero { display: inline; }
}

/* «Le tue scelte» (12/10, Mauro): tondo come «Chiama», con l'elenco spuntato
   (non un carrello) e il numero in un cerchio blu notte; compare con la
   prima voce aggiunta (js/scelte.js). Il nome lo dicono aria-label e title. */
.testata .testata-scelte { position: relative; flex: none; width: 3rem; height: 3rem; min-height: 0; padding: 0; }
@media (min-width: 40em) { .testata .testata-scelte { width: 3.25rem; height: auto; min-height: 3.25rem; } }
.testata-scelte-nome { display: none; }
.testata-scelte-conta {
  position: absolute; top: -.35rem; right: -.35rem; min-width: 1.4rem; height: 1.4rem; padding: 0 .3rem;
  border-radius: var(--nl-r-pillola); background: var(--nl-ink); color: var(--nl-bianco);
  font: 700 .8rem/1.4rem var(--nl-font-marchio); text-align: center;
}
.testata-scelte-conta:empty { display: none; }
.testata-scelte[aria-expanded="true"] { background: var(--nl-vetro); }

/* Il pannello e l'avviso: sotto la testata, allineati a destra. */
.scelte-ancora { position: relative; }
.scelte-pannello, .scelte-avviso {
  position: absolute; top: .5rem; right: 0; z-index: 30;
  width: min(100%, 26rem); border-radius: var(--nl-r-scheda); box-shadow: var(--nl-ombra);
}
.scelte-pannello {
  display: grid; gap: 1rem; max-height: calc(100dvh - var(--nl-testata) - 2rem); overflow: auto;
  padding: 1.25rem 1.25rem 1.5rem; background: var(--nl-bianco); border: 1px solid var(--nl-bordo);
}
.scelte-testa { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.scelte-titolo { font: 900 var(--nl-t-scheda)/1.05 var(--nl-font-marchio); text-transform: uppercase; }
.scelte-titolo:focus { outline: none; }
.scelte-chiudi, .scelte-togli {
  display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: none; color: var(--nl-ink-2); cursor: pointer;
}
.scelte-chiudi { background: var(--nl-ghiaccio); color: var(--nl-ink); }
.scelte-testo, .scelte-vuota, .scelte-nota { color: var(--nl-ink-2); }
.scelte-nota { font-size: var(--nl-t-piccolo); }
.scelte-lista { display: grid; border-top: 1px solid var(--nl-bordo); }
.scelte-voce {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem;
  padding-block: .5rem; border-bottom: 1px solid var(--nl-bordo); font-weight: 500; line-height: 1.35;
}
.scelte-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.scelte-svuota {
  padding: .5rem 0; border: 0; background: none; cursor: pointer;
  font: 700 var(--nl-t-piccolo)/1.3 var(--nl-font-marchio); color: var(--nl-blu-ink);
  text-decoration: underline; text-underline-offset: .2em;
}
@media (hover: hover) and (pointer: fine) {
  .scelte-togli:hover { background: var(--nl-ghiaccio); color: var(--nl-ink); }
}
.scelte-avviso {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem;
  padding: .85rem 1.1rem; background: var(--nl-ink); color: var(--nl-bianco); font-weight: 500; line-height: 1.35;
}
.scelte-avviso > .icona { flex: none; width: 1.25rem; height: 1.25rem; }
.scelte-avviso-testo { flex: 1 1 12rem; }
.scelte-avviso-vedi {
  padding: .25rem 0; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 700 var(--nl-t-piccolo)/1.3 var(--nl-font-marchio); color: var(--nl-bianco);
  text-decoration: underline; text-underline-offset: .2em;
}

/* Un «Aggiungi al preventivo» già tra le scelte: tinta azzurra e spunta. */
a[data-aggiungi].is-scelta.pulsante { background: var(--nl-tinta-blu); }

/* Solo Lab (10/10): il suo menu è più lungo di quello del Centro e, con
   «Chiama» in testata, fra 1200 e 1600px non ci stava. Lì logo più stretto,
   voci e spazi più vicini e «Preventivo» corto; «Chiama» resta tondo anche
   sugli schermi larghi (il contenitore non si allarga oltre i 1440px). */
@media (min-width: 75em) and (max-width: 99.99em) {
  html[data-brand="lab"] .marchio img { width: 11rem; }
  html[data-brand="lab"] .testata-dentro { gap: .5rem; }
  html[data-brand="lab"] .nav .nav-link, html[data-brand="lab"] .nav .nav-apri { padding-inline: .4rem; }
  html[data-brand="lab"] .testata-cta-lungo { display: none; }
  html[data-brand="lab"] .testata-cta-breve { display: inline; }
  html[data-brand="lab"] .testata .testata-cta { padding-inline: 1.1rem; }
}
@media (min-width: 100em) {
  html[data-brand="lab"] .testata .testata-chiama { width: 3.25rem; padding-inline: 0; }
  html[data-brand="lab"] .testata-chiama-numero { display: none; }
}

/* Testata essenziale degli strumenti: logo, telefono, «Torna al sito». */
.testata-telefono { display: none; align-items: center; gap: .45rem; font: 700 var(--nl-t-piccolo)/1 var(--nl-font-marchio); color: var(--nl-blu-ink); text-decoration: none; }
.testata-telefono:hover { text-decoration: underline; text-underline-offset: .25em; }
@media (min-width: 40em) { .testata-telefono { display: inline-flex; } }
.testata-torna { min-height: 2.75rem; padding: .55rem 1.1rem; white-space: nowrap; }
.testata--essenziale .marchio img { width: clamp(9.5rem, 6.5rem + 9vw, 14rem); }
/* Da telefono logo e «Torna al sito» stanno nei margini (a 375px il pulsante
   toccava il bordo dello schermo, 10/10). */
@media (max-width: 29.99em) {
  .testata-torna { padding-inline: .85rem; }
  .testata--essenziale .testata-dentro { gap: .75rem; }
  .testata--essenziale .marchio img { width: 8.25rem; }
}
.piede--essenziale { padding-top: 2.5rem; }
.piede--essenziale .piede-centro { margin-top: 0; justify-content: space-between; }
body:has(.piede--essenziale) { padding-bottom: 0; }

.menu-interruttore {
  display: inline-grid; place-items: center; flex: none;
  width: 3rem; height: 3rem; padding: 0;
  border: 1.5px solid var(--nl-bordo); border-radius: 50%;
  background: var(--nl-bianco); color: var(--nl-ink);
}
.menu-interruttore .icona { width: 1.5rem; height: 1.5rem; grid-area: 1 / 1; }
.menu-interruttore .i-chiudi,
.menu-aperto .menu-interruttore .i-apri { display: none; }
.menu-aperto .menu-interruttore .i-chiudi { display: block; }

/* Menu da telefono: pannello a tutta altezza sotto la testata, voci grandi
   maiuscole, contatti in fondo. --sopra lo mette interfaccia.js. */
.nav {
  display: none;
  position: fixed; inset: var(--sopra, 8rem) 0 0 0;
  overflow-y: auto;
  padding: 1rem var(--nl-margine) calc(2rem + env(safe-area-inset-bottom));
  background: var(--nl-bianco);
}
.menu-aperto .nav { display: flex; flex-direction: column; gap: 2rem; }
.nav-lista { display: grid; }
.nav-voce { border-bottom: 1px solid var(--nl-bordo); }
.nav-link, .nav-apri {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 3.75rem; padding: 0;
  border: 0; background: none; color: var(--nl-ink);
  font: 900 1.5rem/1.1 var(--nl-font-testo); text-transform: uppercase; text-align: left; text-decoration: none;
}
.nav-apri .icona { width: 1.5rem; height: 1.5rem; color: var(--nl-blu-ink); transition: transform var(--nl-veloce); }
.nav-apri[aria-expanded="true"] .icona { transform: rotate(180deg); }
.nav-voce.is-attiva > .nav-link, .nav-voce.is-attiva > .nav-apri { color: var(--nl-blu-ink); }

/* Le sezioni nel menu da telefono (sistema.sezioni): due colonne di voci
   brevi sopra le voci grandi; il Lab per primo, su tutta la riga. */
.nav-sezioni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .75rem; }
.nav-sezioni li:first-child { grid-column: 1 / -1; }
.nav-sezioni-voce { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; color: var(--nl-ink); font-weight: 500; text-decoration: none; }
.nav-sezioni-voce .segno { width: 1.25rem; height: 1.25rem; }
.nav-sezioni-voce--lab { margin-bottom: .25rem; padding-inline: .9rem; border-radius: var(--nl-r-pillola); background: var(--nl-accento-tinta); font-weight: 700; }
.nav-sezioni-voce--lab .icona { width: 1rem; height: 1rem; margin-left: auto; }
.nav-sezioni-voce[aria-current] { color: var(--nl-blu-ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }

/* Le tendine si aprono solo col loro pulsante, a ogni larghezza. */
.tendina { display: none; }
.nav-apri[aria-expanded="true"] + .tendina { display: block; }
.tendina-lista { display: grid; padding-bottom: 1rem; }
.tendina-link { display: grid; gap: .1rem; padding: .6rem 0; color: var(--nl-ink); text-decoration: none; }
.tendina-titolo { font-weight: 700; font-size: var(--nl-t-voce); }
.tendina-nota { font-size: var(--nl-t-piccolo); color: var(--nl-ink-2); }
.tendina-link:hover .tendina-titolo { text-decoration: underline; text-underline-offset: .2em; }

.nav-contatti { display: grid; gap: .75rem; margin-top: auto; }
.nav-orari { color: var(--nl-ink-2); font-size: var(--nl-t-piccolo); }
.nav-orari strong { color: var(--nl-ink); }

/* Il menu intero sta in riga solo da 1200px (--nl-nav-largo): sotto, cinque
   voci, logo e pulsante vanno a capo. interfaccia.js legge la stessa misura. */
@media (min-width: 75em) {
  .menu-interruttore, .nav-contatti, .nav-sezioni { display: none; }
  .nav { display: block; position: static; padding: 0; overflow: visible; background: none; }
  .menu-aperto .nav { display: block; }
  .nav-lista { display: flex; align-items: center; gap: .15rem; }
  .nav-voce { position: relative; border: 0; }
  .nav-link, .nav-apri {
    width: auto; min-height: 2.75rem; gap: .3rem; padding: 0 .8rem; white-space: nowrap;
    border-radius: var(--nl-r-pillola);
    font: 500 var(--nl-t-piccolo)/1 var(--nl-font-testo); text-transform: none;
  }
  .nav-apri .icona { width: 1rem; height: 1rem; }
  .nav-link:hover, .nav-apri:hover, .nav-apri[aria-expanded="true"] { background: var(--nl-vetro); }
  /* Voce attiva: sottolineatura d'accento (STRUTTURA.md §1). */
  .nav-voce.is-attiva > .nav-link, .nav-voce.is-attiva > .nav-apri { color: var(--nl-blu-ink); box-shadow: inset 0 -3px 0 var(--nl-accento); border-radius: 0; }

  .tendina {
    position: absolute; top: calc(100% + .75rem); left: 0; min-width: 17rem;
    transform-origin: top left;
    padding: .5rem;
    background: var(--nl-bianco);
    border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-medio);
    box-shadow: var(--nl-ombra);
  }
  /* Ponte invisibile sui 12px fra la voce e la tendina: senza, il mouse che
     scende li attraversa e la tendina aperta al passaggio si chiude. */
  .tendina::before { content: ""; position: absolute; inset: -.85rem 0 auto; height: .85rem; }
  .nav-apri[aria-expanded="true"] + .tendina { animation: tendina-apre .16s var(--nl-esce); }
  .tendina-lista { padding: 0; }
  .tendina-link { padding: .65rem .9rem; border-radius: var(--nl-r-campo); }
  .tendina-titolo { font-size: var(--nl-t-piccolo); }
  .tendina-link:hover { background: var(--nl-vetro); }
  .tendina-link:hover .tendina-titolo { text-decoration: none; }
}
@media (min-width: 75em) and (hover: hover) {
  .nav-voce:hover > .tendina { display: block; }
}
@keyframes tendina-apre { from { opacity: 0; transform: scale(.97); } }

/* ── Pulsanti ──────────────────────────────────────────────────────────── */
.azioni { display: flex; flex-wrap: wrap; gap: .75rem; }
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3.25rem; padding: .85rem 1.6rem;
  border: 2px solid transparent; border-radius: var(--nl-r-pillola);
  font: 700 var(--nl-t-piccolo)/1.2 var(--nl-font-marchio); letter-spacing: .01em;
  text-align: center; text-decoration: none;
  transition: background-color var(--nl-veloce), color var(--nl-veloce), border-color var(--nl-veloce), transform .12s var(--nl-esce);
}
/* Chi tocca deve sentire che il tocco è arrivato (5/10). */
.pulsante:active, .barra-rapida a:active { transform: scale(.97); }
/* Principale: l'accento del verticale, sempre nella variante -ink (testo bianco ≥5:1). */
.pulsante--primario { background: var(--nl-accento-ink); color: var(--nl-bianco); }
.pulsante--primario:hover { background: var(--nl-accento-brace); }
/* Secondario: a filo blu inchiostro; su scuro, filo bianco. */
.pulsante--secondario { border-color: var(--nl-blu-ink); background: var(--nl-bianco); color: var(--nl-blu-ink); }
.pulsante--secondario:hover { background: var(--nl-vetro); }
.su-scuro .pulsante--secondario { border-color: var(--nl-bianco); background: transparent; color: var(--nl-bianco); }
.su-scuro .pulsante--secondario:hover { background: var(--nl-velo-su-scuro); }
/* Blu: l'azione di un modulo che non è il passo principale della pagina
   (iscrizione alla newsletter). L'accento resta a una sola azione per schermata. */
.pulsante--blu { background: var(--nl-blu-ink); color: var(--nl-bianco); }
.pulsante--blu:hover { background: var(--nl-blu-notte); }
/* Pieno bianco: per il blu New Life, dove un testo bianco da 16px non regge. */
.pulsante--pieno { background: var(--nl-bianco); color: var(--nl-blu-ink); }
.pulsante--pieno:hover { background: var(--nl-vetro); }
/* Piccolo: l'azione dentro una scheda di un elenco («Aggiungi al
   preventivo», 5/10). Resta un bersaglio da 44px. */
.pulsante--piccolo { min-height: 2.75rem; padding: .55rem 1.1rem; gap: .45rem; }

.link-freccia {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 700 var(--nl-t-piccolo)/1.3 var(--nl-font-marchio);
  color: var(--nl-blu-ink);
  text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1.5px;
}
.link-freccia .icona { transition: transform var(--nl-veloce); }
@media (hover: hover) and (pointer: fine) { .link-freccia:hover .icona { transform: translateX(3px); } }
.su-scuro .link-freccia { color: var(--nl-bianco); }
p:has(> .link-freccia:only-child) { margin-top: 1.5rem; }

/* ── Icona in cerchio (segnaletica e mockup del brand book) ────────────── */
.tondo {
  display: grid; place-items: center; flex: none;
  width: 3.5rem; height: 3.5rem;
  border: 1.5px solid var(--nl-blu); border-radius: 50%;
  color: var(--nl-blu-ink);
}
.tondo .icona { width: 1.6rem; height: 1.6rem; }
.su-scuro .tondo { border-color: var(--nl-bordo-su-scuro); color: var(--nl-bianco); }
.tondo--accento { border-color: transparent; background: var(--nl-accento-tinta); color: var(--nl-accento-ink); }
.tondo--piccolo { width: 2.5rem; height: 2.5rem; }
.tondo--piccolo .icona { width: 1.25rem; height: 1.25rem; }

/* ── Etichette piccole: chip e livelli ─────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: .35em; justify-self: start; width: fit-content;
  padding: .3rem .8rem; border-radius: var(--nl-r-pillola);
  font: 700 var(--nl-t-etichetta)/1.2 var(--nl-font-marchio); white-space: nowrap;
  background: var(--nl-vetro); color: var(--nl-blu-ink);
}
.su-scuro .chip, .chip--chiaro { background: var(--nl-bianco); color: var(--nl-blu-notte); }

/* PagoDIL (23/10, Mauro): le voci che si pagano a rate senza interessi. Il logo è
   quello ufficiale (assets/loghi/pagodil.png, 197×100, da pagodil.it), sempre su
   fondo bianco come lo usa Cofidis; il testo accanto lo spiega a parole. */
.pagodil {
  display: inline-flex; align-items: center; gap: .45rem; width: fit-content;
  padding: .2rem .7rem .2rem .3rem; border-radius: var(--nl-r-pillola);
  background: var(--nl-bianco); box-shadow: inset 0 0 0 1px var(--nl-bordo);
  font: 700 var(--nl-t-etichetta)/1.2 var(--nl-font-marchio); color: var(--nl-ink); white-space: nowrap;
}
.pagodil-logo {
  display: inline-block; flex: none; width: 3.1rem; aspect-ratio: 197 / 100;
  background: url("../assets/loghi/pagodil.png") center / contain no-repeat;
}
.pagodil-logo--grande { width: 6rem; }

/* Base e Plus, come le etichette dei pannelli di sala: il Plus sull'accento. */
.livelli { display: flex; flex-wrap: wrap; gap: .5rem; }
.livelli li {
  padding: .3rem .85rem; border-radius: var(--nl-r-pillola);
  font: 700 var(--nl-t-etichetta)/1.2 var(--nl-font-marchio); letter-spacing: .06em; text-transform: uppercase;
  background: var(--nl-bianco); color: var(--nl-blu-ink);
}
.livelli li + li { background: var(--nl-accento-ink); color: var(--nl-bianco); }
.livelli li + li::before { content: "+ "; }

/* ── Foto ──────────────────────────────────────────────────────────────── */
figure img { width: 100%; height: 100%; object-fit: cover; }

/* Foto con l'elemento accento pieno nell'angolo in basso a destra. */
.foto-angolo { position: relative; overflow: hidden; }
.foto-angolo::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 28%; aspect-ratio: 1;
  background: var(--nl-accento);
  -webkit-mask: var(--forma-accento) center / contain no-repeat; mask: var(--forma-accento) center / contain no-repeat;
}

/* Foto con un angolo arrotondato al 50%: il quarto di cerchio del simbolo. */
.foto-quarto { position: relative; }
.foto-quarto img { aspect-ratio: 4 / 5; border-radius: var(--nl-r-scheda) var(--nl-r-scheda) 50% var(--nl-r-scheda); }
.foto-quarto::before {
  content: ""; position: absolute; left: -9%; bottom: -7%; width: 42%; aspect-ratio: 1;
  background: var(--nl-accento);
  -webkit-mask: var(--forma-accento) center / contain no-repeat; mask: var(--forma-accento) center / contain no-repeat;
}

/* Nota del prototipo su una foto (es. liberatoria mancante). */
.foto-nota { position: absolute; left: .75rem; top: .75rem; z-index: 2; }

/* La croce di foto (solo aperture): la foto presa nell'elemento azzurro,
   l'elemento accento pieno accanto. Stessa geometria del simbolo, griglia 3×3. */
.croce-foto { position: relative; width: min(100%, 38rem); aspect-ratio: 1; justify-self: center; }
.croce-foto-el { position: absolute; width: 66.667%; height: 66.667%; }
.croce-foto-el--foto { left: 0; top: 0; clip-path: url(#clip-azzurro); background: var(--nl-tinta-blu); }
.croce-foto-el--accento { left: 33.333%; top: 33.333%; clip-path: url(#clip-accento); background: var(--nl-accento); }
.croce-foto-nota { position: absolute; right: 0; top: 0; }

/* Scheda che galleggia: l'unico posto, con i menu, dove c'è un'ombra. */
.scheda-flottante {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.25rem;
  border-radius: var(--nl-r-medio);
  background: var(--nl-bianco); box-shadow: var(--nl-ombra);
  text-decoration: none;
}
.scheda-flottante strong { display: block; }
.scheda-flottante span > span { display: block; margin-top: .2rem; font-size: var(--nl-t-piccolo); line-height: 1.35; color: var(--nl-ink-2); }
.scheda-flottante .tondo { width: 3rem; height: 3rem; }

/* ── Schede ─────────────────────────────────────────────────────────────
   Morbide, nessuna ombra a riposo. Tutta la scheda è il link: il link
   visibile si allarga con un pseudo-elemento (.scheda-link). */
.scheda-servizio {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-scheda);
  background: var(--nl-bianco);
  transition: border-color var(--nl-veloce);
}
/* Al passaggio la scheda non si solleva (5/10): cambia il bordo e la freccia
   avanza, come sui link. Il sollevamento di tutte le schede era un effetto da
   modello, e sul telefono restava appeso dopo il tocco. */
@media (hover: hover) and (pointer: fine) {
  .scheda-servizio:hover { border-color: var(--nl-blu-ink); }
  .scheda-servizio:hover .scheda-link .icona { transform: translateX(3px); }
  .scheda-servizio:hover .scheda-servizio-foto img { transform: scale(1.03); }
}
.scheda-servizio-foto img { transition: transform .4s var(--nl-esce); }
.scheda-servizio-foto { aspect-ratio: 4 / 3; }
.scheda-servizio-corpo { display: grid; flex: 1; align-content: start; gap: .6rem; padding: 1.75rem; }
.scheda-servizio-titolo { font-size: var(--nl-t-scheda); font-weight: 900; line-height: 1.05; text-transform: uppercase; }
.scheda-servizio-sotto { font-weight: 500; color: var(--nl-blu-ink); }
.scheda-servizio-corpo > p:not(.scheda-servizio-sotto) { color: var(--nl-ink-2); }
.scheda-link { margin-top: auto; padding-top: .75rem; }
.scheda-link::after { content: ""; position: absolute; inset: 0; }
/* Principale: fondo blu inchiostro (bianco 5.8:1 anche per il testo piccolo). */
.scheda-servizio--principale { border-color: transparent; background: var(--nl-blu-ink); color: var(--nl-bianco); }
.scheda-servizio--principale .scheda-servizio-sotto,
.scheda-servizio--principale .scheda-servizio-corpo > p { color: var(--nl-ink-su-scuro-2) !important; }
.scheda-servizio--principale .scheda-servizio-titolo { font-size: var(--nl-t-titolo); }
.scheda-servizio--principale .leggero { font-size: .45em; line-height: 1.2; margin-top: .2em; }

/* ── Ingresso (preventivo): scheda con icona in cerchio ────────────────── */
.ingresso a {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  height: 100%; padding: 1.4rem 1.5rem;
  border: 1.5px solid transparent; border-radius: var(--nl-r-scheda);
  background: var(--nl-bianco); text-decoration: none;
  transition: border-color var(--nl-veloce);
}
.ingresso a:hover { border-color: var(--nl-blu-ink); }
.ingresso-testo { display: grid; gap: .3rem; }
.ingresso-testo > span { color: var(--nl-ink-2); }
.ingresso-vai { color: var(--nl-blu-ink); }
/* «Già paziente» sulla tinta d'accento: l'unico vantaggio riservato. */
.ingresso--evidenza a { background: var(--nl-accento-tinta); }
.ingresso--evidenza a:hover { border-color: var(--nl-accento-ink); }
.ingresso--evidenza .tondo { border-color: var(--nl-accento); background: var(--nl-bianco); color: var(--nl-accento-ink); }
.ingresso--evidenza .ingresso-vai { color: var(--nl-accento-ink); }

/* ── Motivo: titolo e una riga, sopra un filetto (5/10: senza icona) ────── */
.motivo { display: grid; align-content: start; gap: .35rem; padding-top: 1.1rem; border-top: 1px solid var(--nl-bordo); }
.motivo p { color: var(--nl-ink-2); }

/* ── Sede ───────────────────────────────────────────────────────────────
   Dal 5/10 una colonna di testo sopra un filetto spesso, non una scheda: la
   città in grande come sull'insegna. Le sedi in arrivo: filetto tratteggiato
   e città più chiara. */
.sede { display: grid; align-content: start; gap: .5rem; padding-top: 1.25rem; border-top: 3px solid var(--nl-blu); }
.sede-citta { font-size: var(--nl-t-scheda); font-weight: 900; line-height: 1; text-transform: uppercase; }
.sede address { color: var(--nl-ink-2); }
.sede .link-freccia { margin-top: .5rem; }
.su-scuro .sede { border-top-color: var(--nl-bianco); }
.su-scuro .sede address { color: var(--nl-ink-su-scuro-2); }
.sede--prossima { border-top-style: dashed; border-top-color: var(--nl-ink-3); }
.sede--prossima .sede-citta { color: var(--nl-ink-2); }
.su-scuro .sede--prossima { border-top-color: var(--nl-bordo-su-scuro); }
.su-scuro .sede--prossima .sede-citta { color: var(--nl-ink-su-scuro-2); }
/* Fisso e WhatsApp della sede (7/10, modifica 14 di Giosuè): link <a>,
   come tutti i numeri del sito (trigger GTM). */
.sede-numeri { display: grid; gap: .35rem; margin-top: .25rem; }
.sede-numeri a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--nl-blu-ink); font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; }
.sede-numeri a:hover { text-decoration: underline; text-underline-offset: .25em; }
.sede-numeri .icona { width: 1.15rem; height: 1.15rem; }
.su-scuro .sede-numeri a { color: var(--nl-bianco); }
.sede--prossima .chip { margin-top: .5rem; }
/* Orari della sede (9/10): «Prelievi» e «Orari della sede», ognuno col suo
   titolo. Una <dl>; sulle home c'è solo il secondo. */
.sede-orari { display: grid; gap: .5rem; color: var(--nl-ink-2); font-size: var(--nl-t-piccolo); font-variant-numeric: tabular-nums; }
.sede-orari dt { font: 700 var(--nl-t-etichetta)/1.3 var(--nl-font-marchio); letter-spacing: .06em; text-transform: uppercase; color: var(--nl-ink); }
.sede-orari dd { margin: 0; }
.sede-orari strong { color: var(--nl-ink); font-weight: 700; }
.su-scuro .sede-orari { color: var(--nl-ink-su-scuro-2); }
.su-scuro .sede-orari dt, .su-scuro .sede-orari strong { color: var(--nl-bianco); }

/* ── Righe: argomenti minori che portano alla loro pagina ──────────────── */
.righe { border-top: 1px solid var(--nl-bordo); }
.righe li { border-bottom: 1px solid var(--nl-bordo); }
.riga { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; text-decoration: none; }
.riga > span { display: grid; gap: .25rem; }
.riga > span > span { color: var(--nl-ink-2); }
.riga .icona { color: var(--nl-blu-ink); transition: transform var(--nl-veloce); }
.riga:hover .icona { transform: translateX(3px); }
.riga:hover .voce-titolo { color: var(--nl-blu-ink); }

/* ── Fisarmonica: domanda in grassetto, «+» in cerchio che ruota ───────── */
.fisarmonica-voce { border-bottom: 1px solid var(--nl-bordo); }
.fisarmonica-voce:first-child { border-top: 1px solid var(--nl-bordo); }
.fisarmonica-voce summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.35rem;
  font-size: var(--nl-t-voce); font-weight: 700; line-height: 1.3;
  cursor: pointer; list-style: none;
}
.fisarmonica-voce summary::-webkit-details-marker { display: none; }
.fisarmonica-voce summary:hover { color: var(--nl-blu-ink); }
.fisarmonica-voce .tondo { transition: transform var(--nl-veloce), background-color var(--nl-veloce); }
.fisarmonica-voce[open] .tondo { transform: rotate(45deg); background: var(--nl-vetro); }
.fisarmonica-risposta { max-width: 40rem; padding-bottom: 1.35rem; color: var(--nl-ink-2); }
.fisarmonica-risposta p + p { margin-top: .75em; }

/* ── Moduli ────────────────────────────────────────────────────────────── */
.modulo { display: grid; gap: .9rem; padding: 1.75rem; border-radius: var(--nl-r-scheda); background: var(--nl-bianco); }
.modulo-etichetta { font-weight: 700; }
.modulo-riga { display: grid; gap: .6rem; }
@media (min-width: 40em) { .modulo-riga { grid-template-columns: 1fr auto; } }
.campo {
  width: 100%; min-height: 3.25rem; padding: .8rem 1rem;
  border: 1px solid var(--nl-ink-3); border-radius: var(--nl-r-campo);
  background: var(--nl-bianco); color: var(--nl-ink);
}
.campo::placeholder { color: var(--nl-ink-3); }
/* Stessa altezza per testo, data e menu: il campo data di Chrome ignora min-height. */
input.campo, select.campo { height: 3.25rem; }
/* Focus: bordo e anello blu notte (l'anello azzurro chiaro faceva 1.3:1). */
.campo:focus-visible { outline: 3px solid var(--nl-blu-notte); outline-offset: 1px; border-color: var(--nl-blu-notte); }
.campo[aria-invalid="true"] { border-color: var(--nl-errore); box-shadow: 0 0 0 1px var(--nl-errore); }
/* Caselle da 22px, mai pre-spuntate (CLAUDE.md, Privacy). */
.consenso { display: grid; grid-template-columns: auto 1fr; gap: .75rem; font-size: var(--nl-t-piccolo); line-height: 1.5; color: var(--nl-ink-2); }
.consenso input { width: 1.375rem; height: 1.375rem; margin: .1rem 0 0; accent-color: var(--nl-blu-ink); }
.consenso input[aria-invalid="true"] { outline: 2px solid var(--nl-errore); outline-offset: 2px; }
.modulo-stato:empty { display: none; }
.modulo-stato { padding: .75rem 1rem; border-radius: var(--nl-r-campo); background: var(--nl-vetro); color: var(--nl-blu-ink); font-weight: 700; }
.modulo-stato.is-errore { background: var(--nl-errore-tinta); color: var(--nl-errore); }
/* Messaggio accanto al campo sbagliato (collegato con aria-describedby). */
.campo-errore { display: block; margin-top: .4rem; color: var(--nl-errore); font-size: var(--nl-t-piccolo); font-weight: 700; line-height: 1.4; }
.campo-errore:empty { display: none; }
.consenso + .campo-errore { margin-top: -.4rem; padding-left: 2.125rem; }

/* Nota con lo scudo: cosa succede ai dati. */
.nota-scudo { display: flex; gap: .6rem; max-width: 30rem; font-size: var(--nl-t-piccolo); color: var(--nl-ink-2); }
.nota-scudo .icona { margin-top: .15rem; color: var(--nl-blu-ink); }

/* ── Chiusura di pagina: la vetrofania ──────────────────────────────────
   Dal 5/10 come la vetrofania del Lab: i due elementi della croce pieni,
   enormi, tagliati dal bordo in basso a sinistra (sabbia e accento sul blu
   New Life), e il testo accanto, allineato a sinistra. Prima erano due
   contorni sottili e il testo centrato: corretto, ma uguale a mille chiusure.
   --el è il lato di un elemento (due terzi della croce): l'accento sta
   spostato di mezzo elemento in basso a destra, come nel simbolo. */
.chiusura { --el: clamp(12rem, 4rem + 26vw, 30rem); }
.chiusura::before, .chiusura::after { content: ""; position: absolute; z-index: -1; width: var(--el); aspect-ratio: 1; pointer-events: none; }
.chiusura::before { background: var(--nl-sabbia); -webkit-mask: var(--forma-azzurro) center / contain no-repeat; mask: var(--forma-azzurro) center / contain no-repeat; }
.chiusura::after { background: var(--nl-accento); -webkit-mask: var(--forma-accento) center / contain no-repeat; mask: var(--forma-accento) center / contain no-repeat; }
/* Da telefono la croce sta sotto il testo, tagliata dal fondo. */
.chiusura::before { left: calc(var(--el) * -.3); bottom: calc(var(--el) * .02); }
.chiusura::after  { left: calc(var(--el) * .2);  bottom: calc(var(--el) * -.48); }
.chiusura-dentro { display: grid; justify-items: start; gap: 2rem; padding-block: clamp(4rem, 3rem + 5vw, 8rem) calc(var(--el) * 1.05); }
/* Da computer la croce esce dall'angolo in alto a sinistra e il testo le sta
   accanto: parte dove finisce l'elemento accento. */
@media (min-width: 56em) {
  .chiusura::before { left: calc(var(--el) * -.36); top: calc(var(--el) * -.06); bottom: auto; }
  .chiusura::after  { left: calc(var(--el) * .14);  top: calc(var(--el) * .44);  bottom: auto; }
  .chiusura-dentro {
    min-height: calc(var(--el) * 1.3);
    padding-block: clamp(4rem, 3rem + 4vw, 7rem);
    padding-left: calc(var(--el) * 1.3 - max(var(--nl-margine), (100vw - var(--nl-contenitore)) / 2));
    align-content: center;
  }
}
/* Sul blu New Life: testo grande in grassetto (≥18.66px bold regge il 3:1). */
.chiusura-firma { font-size: var(--nl-t-voce); font-weight: 700; line-height: 1.4; }
.chiusura-email {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--nl-t-voce); font-weight: 700; line-height: 1.4;
  color: var(--nl-bianco); text-underline-offset: .25em; text-decoration-thickness: 1.5px;
}
.chiusura-azioni { justify-content: flex-start; }
/* I passi per prenotare nella chiusura, se la pagina li dà (12/10: le specialità). */
.chiusura-passi { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; counter-reset: passo; max-width: 44rem; }
.chiusura-passi li { counter-increment: passo; display: grid; grid-template-columns: auto 1fr; gap: .1rem .75rem; font-size: var(--nl-t-voce); font-weight: 700; line-height: 1.4; } /* sul blu New Life solo testo grande e in grassetto */
.chiusura-passi li::before { content: counter(passo); grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1.5px solid var(--nl-bianco); border-radius: 50%; font-weight: 900; font-size: 1rem; }
.chiusura-passi strong { font-weight: 900; }
@media (min-width: 64em) { .chiusura-passi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; max-width: none; } }

/* ── Piè di pagina ─────────────────────────────────────────────────────── */
.piede { padding-block: 4.5rem 2rem; background: var(--nl-blu-notte); color: var(--nl-ink-su-scuro-2); font-size: var(--nl-t-piccolo); }
.piede a { color: var(--nl-bianco); text-decoration: none; }
.piede a:hover { text-decoration: underline; text-underline-offset: .25em; }
.piede-griglia { display: grid; gap: 2.5rem; }
.piede-marchio { display: block; width: fit-content; }
.piede-marchio img { width: 13rem; height: auto; }
.piede-presentazione { display: grid; gap: 1.25rem; align-content: start; max-width: 22rem; }
.piede-titolo { margin-bottom: 1rem; font: 700 var(--nl-t-etichetta)/1 var(--nl-font-marchio); letter-spacing: .08em; text-transform: uppercase; color: var(--nl-bianco); }
.piede-lista li + li { margin-top: .6rem; }
.piede-sede { display: grid; }
.piede-sede strong { color: var(--nl-bianco); }
.piede-stato { font-style: normal; font-weight: 500; }
/* Orari di apertura sotto l'indirizzo (9/10): una riga per gruppo di giorni. */
.piede-nota { margin: -.5rem 0 1rem; }
.piede-sede-orari { display: grid; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.piede-sede-orari .separati, .piede-lista a > span { white-space: nowrap; }
.piede-sedi { display: grid; gap: 1.1rem 2rem; }
.piede-sedi li + li { margin-top: 0; }
@media (min-width: 40em) { .piede-sedi { grid-template-columns: repeat(2, max-content); } }
.piede-stato::before { content: "· "; }
.piede-centro { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 3rem; padding: 1.25rem 1.5rem; border: 1px solid var(--nl-filetto-su-scuro); border-radius: var(--nl-r-medio); }
.piede-fondo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--nl-filetto-su-scuro); }
.piede-documenti { display: flex; flex-wrap: wrap; gap: 1.25rem; }
@media (min-width: 48em) { .piede-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Con gli orari delle sedi (9/10) la colonna delle sedi è la più larga:
   fino a 90em la presentazione sta su una riga sua, sopra le altre. */
@media (min-width: 48em) { .piede-griglia > :nth-child(2) { grid-column: span 2; grid-row: 2; } }
@media (min-width: 64em) {
  .piede-griglia { grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; }
  .piede-griglia > :first-child { grid-column: 1 / -1; max-width: 36rem; }
  .piede-griglia > :nth-child(2) { grid-column: auto; grid-row: auto; }
}
@media (min-width: 90em) {
  .piede-griglia { grid-template-columns: minmax(0, 1fr) max-content minmax(0, .8fr) minmax(0, .8fr); }
  .piede-griglia > :first-child { grid-column: auto; max-width: 22rem; }
}

/* ── Barra rapida da telefono: Chiama · WhatsApp · Preventivo ──────────── */
.barra-rapida {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  padding: .5rem var(--nl-margine) calc(.5rem + env(safe-area-inset-bottom));
  background: var(--nl-bianco); border-top: 1px solid var(--nl-bordo);
}
.barra-rapida a {
  display: grid; justify-items: center; gap: .15rem; padding: .5rem;
  border: 1.5px solid var(--nl-blu-ink); border-radius: var(--nl-r-medio);
  color: var(--nl-blu-ink); text-decoration: none;
  font: 700 var(--nl-t-etichetta)/1.2 var(--nl-font-marchio);
}
.barra-rapida a.barra-rapida-primario { border-color: transparent; background: var(--nl-accento-ink); color: var(--nl-bianco); }
body { padding-bottom: var(--nl-barra); }
.menu-aperto ~ .barra-rapida { display: none; }
@media (min-width: 64em) {
  .barra-rapida { display: none; }
  body { padding-bottom: 0; }
}

/* ── WhatsApp sempre in vista (modifica 3 di Giosuè, 7/10) ───────────────
   Il tondo in basso a destra, come una chat. Solo dove la barra rapida non
   c'è: da telefono WhatsApp sta già lì, e due bottoni uguali si
   coprirebbero. È un link <a>: i trigger di GTM ascoltano i clic sui link. */
.whatsapp-flottante { display: none; }
@media (min-width: 64em) {
  .whatsapp-flottante {
    position: fixed; right: clamp(1rem, .5rem + 1.5vw, 2rem); bottom: clamp(1rem, .5rem + 1.5vw, 2rem); z-index: 25;
    display: inline-grid; place-items: center;
    width: 3.75rem; height: 3.75rem; border-radius: 50%;
    background: var(--nl-whatsapp); color: var(--nl-bianco);
    box-shadow: 0 6px 20px rgba(13, 43, 73, .22);
    transition: background-color var(--nl-veloce), transform .12s var(--nl-esce);
  }
  .whatsapp-flottante .icona { width: 1.9rem; height: 1.9rem; stroke-width: 1.6; }
  .whatsapp-flottante:hover { background: var(--nl-whatsapp-scuro); }
  .whatsapp-flottante:active { transform: scale(.94); }
}

/* ── Promozioni: le promo del momento in home, sotto l'apertura (dal Lab,
   7/10; comune dal 9/10: ogni sito mostra le sue, stesso componente) ───
   La scheda ricalca le grafiche della campagna: blu, carta a quadretti, il
   titolo con la parola grande a contorno, la foto a destra. Il fondo è il blu
   inchiostro e non il blu New Life delle grafiche: qui ci sono paragrafi, e
   sul blu New Life il bianco piccolo non regge (DESIGN.md). */
.promo-sezione { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
/* Lo slider (7/10, js/scorrevole.js): le promo in fila, una per volta. */
.scorrevole-binario { display: grid; gap: 1.5rem; }
.scorrevole.is-attivo .scorrevole-binario {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.scorrevole.is-attivo .scorrevole-binario::-webkit-scrollbar { display: none; }
.scorrevole.is-attivo .promo { flex: 0 0 100%; scroll-snap-align: start; }
.scorrevole-comandi { display: flex; gap: .5rem; }
.scorrevole-comandi[hidden], .scorrevole-pallini[hidden] { display: none; }
.scorrevole-freccia, .scorrevole-pausa {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
  border: 1.5px solid var(--nl-blu-ink); border-radius: 50%;
  background: var(--nl-bianco); color: var(--nl-blu-ink);
  transition: background-color var(--nl-veloce), transform .12s var(--nl-esce);
}
.scorrevole-pausa { border-color: var(--nl-bordo); }
.scorrevole-freccia:hover, .scorrevole-pausa:hover { background: var(--nl-vetro); }
.scorrevole-freccia:active, .scorrevole-pausa:active { transform: scale(.94); }
.scorrevole-pausa .icona { width: 1.1rem; height: 1.1rem; }
.scorrevole-pausa .i-avvia, .scorrevole-pausa[aria-pressed="true"] .i-pausa { display: none; }
.scorrevole-pausa[aria-pressed="true"] .i-avvia { display: block; }
.scorrevole-pallini { display: flex; justify-content: center; gap: .25rem; margin-top: 1rem; }
/* Il pallino è piccolo, il bersaglio no: 44px di area. */
.scorrevole-pallino { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; }
.scorrevole-pallino::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--nl-bordo); transition: width var(--nl-veloce) var(--nl-esce), background-color var(--nl-veloce); }
.scorrevole-pallino[aria-current="true"]::before { width: 1.75rem; border-radius: var(--nl-r-pillola); background: var(--nl-accento-ink); }
.scorrevole-pallino:hover::before { background: var(--nl-blu-ink); }
.scorrevole-pallino[aria-current="true"]:hover::before { background: var(--nl-accento-ink); }
@media (max-width: 29.99em) { .promo-sezione .testa--riga { flex-wrap: wrap; } }
.promo {
  position: relative; display: grid; overflow: hidden; isolation: isolate;
  border-radius: var(--nl-r-scheda);
  background-color: var(--nl-blu-ink);
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 2rem 2rem;
  color: var(--nl-bianco);
}
.promo + .promo { margin-top: 1.5rem; }
.promo-testo { display: grid; justify-items: start; gap: 1.25rem; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
.chip--accento, .su-scuro .chip--accento { background: var(--nl-accento-ink); color: var(--nl-bianco); }
/* La scadenza grande e leggibile (7/10, modifica 9 di Giosuè): era un
   cartellino piccolo. Pieno d'accento, la data in grassetto. */
.promo-scadenza {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem 1.15rem .6rem .9rem; border-radius: var(--nl-r-pillola);
  background: var(--nl-accento-ink); color: var(--nl-bianco);
  font: 500 clamp(1.05rem, .95rem + .5vw, 1.35rem)/1.15 var(--nl-font-marchio);
}
.promo-scadenza strong { font-weight: 800; }
.promo-scadenza .icona { width: 1.35em; height: 1.35em; }
.promo-titolo { display: grid; font-size: clamp(3rem, 1.6rem + 5.5vw, 6.5rem); font-weight: 900; line-height: .86; letter-spacing: -.01em; text-transform: uppercase; }
/* La parola a contorno: grande, solo il filo (come «SCHOOL» sulle grafiche). */
.promo-contorno { color: transparent; -webkit-text-stroke: 2px var(--nl-bianco); paint-order: stroke fill; }
@supports not (-webkit-text-stroke: 2px white) { .promo-contorno { color: var(--nl-bianco); } }
.promo-frase { font-size: var(--nl-t-sottotitolo); font-weight: 700; line-height: 1.2; max-width: 30rem; }
.promo-lead { max-width: 34rem; color: var(--nl-ink-su-scuro-2); }
.promo-voci { display: grid; width: 100%; max-width: 36rem; border-top: 1px solid var(--nl-filetto-su-scuro); }
.promo-voci li { border-bottom: 1px solid var(--nl-filetto-su-scuro); }
.promo-voce { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; color: var(--nl-bianco); text-decoration: none; }
.promo-voce > span { display: grid; gap: .15rem; }
.promo-voce strong { font-size: var(--nl-t-voce); }
.promo-voce > span > span { color: var(--nl-ink-su-scuro-2); font-size: var(--nl-t-piccolo); }
.promo-voce .icona { flex: none; transition: transform var(--nl-veloce); }
@media (hover: hover) and (pointer: fine) {
  .promo-voce:hover strong { text-decoration: underline; text-underline-offset: .2em; }
  .promo-voce:hover .icona { transform: translateX(3px); }
}
.promo .azioni { margin-top: .5rem; }
.promo-foto { position: relative; min-height: 22rem; }
.promo-foto img { position: absolute; inset: 0; }
@media (min-width: 64em) {
  .promo:has(.promo-foto) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .promo-foto { min-height: 100%; }
  /* L'angolo del simbolo: il quarto di cerchio in alto a sinistra della foto. */
  .promo-foto img { border-top-left-radius: 50% 30%; }
}
/* Da computer la sezione sta tutta nella finestra, sotto quello che resta
   fermo in cima (--nl-cima) (10/10, Mauro: era alta più dello schermo):
   margini e titolo si misurano sull'altezza dello schermo (svh), il testo
   prende più spazio della foto e le voci vanno in fila. */
@media (min-width: 64em) {
  .promo-sezione { padding-block: clamp(1.25rem, 4svh, 3rem); }
  .promo-sezione .testa { margin-bottom: clamp(.75rem, 2.5svh, 1.5rem); }
  .promo-testo { gap: clamp(.6rem, 1.6svh, 1.1rem); padding: clamp(1.5rem, 4.5svh, 3rem) clamp(1.75rem, 3vw, 3rem); }
  .promo-scadenza { padding-block: .45rem; font-size: clamp(1rem, .5rem + 1.2svh, 1.2rem); }
  .promo-titolo { font-size: min(clamp(3rem, 1.6rem + 5.5vw, 6.5rem), 7.5svh); }
  .promo-frase { font-size: min(var(--nl-t-sottotitolo), 3svh); }
  .promo-lead { max-width: 40rem; }
  .promo:has(.promo-foto) { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .promo-voci { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); column-gap: 1.75rem; max-width: none; }
  .promo-voce strong { font-size: 1.0625rem; }
  .promo-voce { padding-block: clamp(.45rem, 1.2svh, .8rem); }
  .promo .azioni { margin-top: .25rem; }
}
/* Schermi bassi (fino a 912px di altezza): la nota sotto ogni voce resta solo
   per i lettori di schermo, margini e titolo si stringono ancora. */
@media (min-width: 64em) and (max-height: 57em) {
  .promo-sezione { padding-block: clamp(1rem, 2.5svh, 2rem); }
  .promo-titolo { font-size: min(clamp(3rem, 1.6rem + 5.5vw, 6.5rem), 6.5svh); }
  .promo-voce > span > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .promo-sezione .scorrevole-pallini { margin-top: .25rem; }
}
@media (min-width: 64em) and (max-height: 46em) {
  .promo-titolo { font-size: 6svh; }
  .promo-testo { gap: 1.1svh; padding-block: 3svh; }
}