/* =====================================================================
   Qublo · sito.css — sistema comune del sito pubblico (direzione M3
   «Scorrimento veloce», proposte-2/M3). Contratto: contenuti/SISTEMA.md.

   Ordine dei fogli: sito.css → app-ui.css → widgets.css → sezioni.css.
   1. Token      2. Base       3. Impaginazione (contenitori, griglie, ritmo)
   4. Testo      5. Pulsanti, link, pillole     6. Carte
   7. Elenchi, passi, rassicurazioni            8. Fisarmonica
   9. Tabelle    10. Carte piano                11. Recensioni segnaposto
   12. Cornice dei widget                       13. Fascia finale e chiusure
   14. Ripiego provvisorio di intestazione e piede (lo sostituisce
       sezioni/comune.css)                      15. Riduci movimento, stampa,
       colori forzati
   Colori solo di Qublo (app e logo). Nessun gradiente decorativo.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Token
   --------------------------------------------------------------------- */
:root {
  /* tavolozza (nomi di M3) */
  --indaco: #5151C9;        /* pulsanti, riga scelta, link */
  --indaco-h: #4141AA;      /* hover */
  --indaco-ch: #B8B8FF;     /* intestazioni di tabella e passo attivo su notte */
  --pervinca: #8D8FF3;      /* filetti in movimento, scie */
  --indaco-p: #3F3FB8;      /* lato del cubo del logo */
  --notte: #0F1026;
  --sup: #16173A;
  --sup-2: #1B1D42;
  --sup-3: #23264A;
  --chiaro: #F5F6FA;
  --bianco: #FFFFFF;
  --ink: #161A33;
  --muted: #5B6080;
  --muted-d: #9094BC;
  --ink-d: #ECECF8;
  --line: #E1E3EE;
  --line-2: #CDD0E2;
  --line-d: #2A2C5A;
  --lime: #C6F94B;          /* successo su scuro: profitto netto, «Pubblicato» */
  --verde: #176B3C;         /* successo su chiaro */
  --ambra: #F7C35C;         /* avvisi su scuro */
  --ambra-t: #805000;       /* avvisi su chiaro */
  --su-indaco: #E6E6FF;     /* testo secondario sul blocco indaco */

  /* ruoli (nomi delle schede di impaginazione) */
  --fondo: var(--chiaro);
  --fondo-2: var(--bianco);
  --inchiostro: var(--ink);
  --inchiostro-2: var(--muted);
  --filetto: var(--line);
  --filetto-2: var(--line-2);
  --azione: var(--indaco);
  --azione-hover: var(--indaco-h);
  --software: var(--notte);
  --software-2: var(--sup);
  --software-3: var(--sup-2);
  --su-software: var(--ink-d);
  --su-software-2: var(--muted-d);
  --filetto-software: var(--line-d);
  --segnaposto: rgba(22, 26, 51, 0.24);
  --focus: var(--indaco);
  --focus-su-scuro: var(--indaco-ch);

  /* caratteri */
  --font: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-app: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* scala: rem + vw (cresce con lo zoom) e, per i titoli, legata all'altezza (svh) */
  --t-h1: clamp(2.125rem, min(1rem + 4.3vw, 0.8rem + 6.4svh), 5.5rem);
  --t-display: clamp(2rem, min(1.1rem + 3.3vw, 0.9rem + 5.2svh), 4.25rem);
  --t-h2: clamp(1.75rem, min(1.2rem + 2.4vw, 1.2rem + 4svh), 3.25rem);
  --t-h3: clamp(1.1875rem, 1.08rem + 0.5vw, 1.5rem);
  --t-lead: clamp(1.0625rem, 1rem + 0.32vw, 1.3125rem);
  --t-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-small: 0.9375rem;
  --t-xs: 0.8125rem;        /* minimo del sito: didascalie (13 px) */
  --t-min: 0.75rem;         /* minimo assoluto (12 px), solo dati */

  /* margini e contenitori */
  --gut: max(1rem, min(4vw, 3rem));
  --gut-l: max(var(--gut), env(safe-area-inset-left));
  --gut-r: max(var(--gut), env(safe-area-inset-right));
  --gutter: var(--gut);
  --max-content: 86rem;     /* M3: 1376 px di contenuto */
  --max-text: 42rem;
  --max-misura: 36em;       /* paragrafi accanto a una schermata */
  --gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --gap-l: clamp(2rem, 4vw, 4.5rem);

  /* spazi (passo 4 px) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem;
  --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem;

  /* ritmo delle sezioni */
  --sezione-alto: clamp(3rem, 6vw, 5.5rem);
  --sezione-basso: clamp(4rem, 8vw, 7rem);
  --sezione-notte: clamp(4rem, 9vw, 8rem);
  --sezione-servizio: clamp(3rem, 2rem + 3vw, 4rem);
  --sezione-finale: clamp(3.5rem, 8vw, 6.5rem);

  /* raggi: gerarchia per misura, non uno solo per tutto */
  --r-xs: 8px;              /* pillole, numeri dei passi */
  --r-s: 10px;              /* link e controlli piccoli */
  --r-m: 12px;              /* pulsanti */
  --r-l: 16px;              /* carte, schermate */
  --r-xl: 18px;             /* finestra dell'app */
  --r-pieno: 999px;

  /* ombre (due livelli) */
  --ombra-carta: 0 1px 0 rgba(22, 26, 51, 0.03), 0 12px 28px -22px rgba(22, 26, 51, 0.35);
  --ombra-rilievo: 0 1px 0 rgba(22, 26, 51, 0.04), 0 24px 48px -30px rgba(22, 26, 51, 0.42);
  --ombra-finestra: 0 30px 80px -30px rgba(15, 16, 38, 0.45);

  /* tempi ed easing */
  --dur-press: 120ms;
  --dur-fast: 180ms;
  --dur-base: 240ms;
  --dur-sheet: 380ms;
  --dur-reveal: 600ms;
  --dur-story: 1200ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);

  /* intestazione: un'unica variabile per ogni elemento fisso */
  --testata-h: 3.5rem;
  --head-h: var(--testata-h);
}
@media (min-width: 48em) { :root { --testata-h: 4.5rem; } }
@media (max-height: 31.25em) { :root { --testata-h: 0px; } }

/* ---------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
  background: var(--fondo);
  --sopra-fermo: calc(var(--testata-h) + 1rem); scroll-padding-top: var(--sopra-fermo);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-weight: 640; text-wrap: balance; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
strong, b { font-weight: 640; }
::selection { background: var(--indaco); color: #fff; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }

/* contenitore dei filtri di movimento (modello.html): non occupa spazio */
.moto-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* testo solo per i lettori di schermo */
.solo-lettori {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* link di salto: primo elemento del body */
.salta {
  position: absolute; left: var(--gut-l); top: 0.5rem; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  border-radius: var(--r-s); background: var(--azione); color: #fff;
  font-weight: 620; text-decoration: none; transform: translateY(-160%);
}
.salta:focus { transform: none; }

/* parole lunghe (email, indirizzi) */
.lungo { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------
   3. Impaginazione
   --------------------------------------------------------------------- */
.contenitore {
  width: 100%;
  max-width: calc(var(--max-content) + var(--gut-l) + var(--gut-r));
  margin-inline: auto;
  padding-left: var(--gut-l);
  padding-right: var(--gut-r);
}
.contenitore--testo { max-width: calc(var(--max-text) + var(--gut-l) + var(--gut-r)); }

/* sezioni: il fondo va a tutta larghezza, il contenuto sta nel .contenitore */
.sezione {
  position: relative;
  padding-block: var(--sezione-alto) var(--sezione-basso);
  background: var(--fondo);
  color: var(--inchiostro);
  overflow-x: clip;              /* ritaglia ciò che si muove di lato (non rompe sticky) */
}
.sezione--bianca { background: var(--fondo-2); }
.sezione--filetto { border-top: 1px solid var(--filetto); }
.sezione--servizio { padding-block: var(--sezione-servizio); }
.sezione--stretta-sopra { padding-top: var(--s-6); }

/* notte: dove si mostra il software. data-tema="scuro" rende scuri anche i widget */
.sezione--notte {
  --focus: var(--focus-su-scuro);
  --inchiostro: var(--su-software);
  --inchiostro-2: var(--su-software-2);
  --filetto: var(--filetto-software);
  --filetto-2: #3A3D72;
  --segnaposto: rgba(236, 236, 248, 0.32);
  background: var(--software);
  color: var(--su-software);
  padding-block: var(--sezione-notte);
  color-scheme: dark;
}
/* due notti di fila: la seconda parte con il filetto */
.sezione--notte + .sezione--notte { border-top: 1px solid var(--line-d); }

/* sezioni che contengono uno sbordo (cornice tagliata dal bordo): misurano la loro larghezza */
.sezione--sborda { container: sezione / inline-size; }

/* testata di sezione: titolo e frase, sempre a sinistra */
.testa { display: grid; gap: var(--s-4); max-width: 46rem; }
.testa + * { margin-top: clamp(1.5rem, 3.5vw, 2.5rem); }
.testa p { color: var(--inchiostro-2); font-size: var(--t-lead); line-height: 1.5; max-width: 34em; }

/* griglia a 12 colonne da 56 em; sotto, una colonna */
.griglia { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56em) {
  .griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-l); }
  .col-1-4 { grid-column: 1 / span 4; }
  .col-1-5 { grid-column: 1 / span 5; }
  .col-1-6 { grid-column: 1 / span 6; }
  .col-1-7 { grid-column: 1 / span 7; }
  .col-5-12 { grid-column: 5 / -1; }
  .col-6-12 { grid-column: 6 / -1; }
  .col-7-12 { grid-column: 7 / -1; }
  .col-8-12 { grid-column: 8 / -1; }
  .col-tutte { grid-column: 1 / -1; }
}
/* due metà M3: testo 5 / schermata 7 */
.diviso { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; }
@media (min-width: 56em) {
  .diviso { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); }
  .diviso--inverso > :first-child { order: 2; }
  .diviso--alto { align-items: start; }
}
/* griglia automatica: mai scorrimento orizzontale a 320 px */
.griglia-auto { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 18rem)), 1fr)); }

/* colonna ferma (sticky) per titoli accanto a elenchi lunghi */
.ferma { position: sticky; top: calc(var(--testata-h) + 2rem); align-self: start; }
@media (max-height: 31.25em) { .ferma { position: static; } }

.pila { display: grid; gap: var(--s-4); align-content: start; }
.pila--s { gap: var(--s-2); }
.pila--l { gap: clamp(1.125rem, 2.8svh, 2rem); }
.riga-azioni { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ---------------------------------------------------------------------
   4. Testo
   --------------------------------------------------------------------- */
.titolo-1 {
  font-size: var(--t-h1); font-weight: 640; font-stretch: 100%;
  line-height: 1.02; letter-spacing: -0.032em; max-width: 18em;
}
.titolo-display {
  font-size: var(--t-display); font-weight: 640; font-stretch: 100%;
  line-height: 1.04; letter-spacing: -0.032em; max-width: 18em;
}
.titolo-2 { font-size: var(--t-h2); font-weight: 640; font-stretch: 100%; line-height: 1.06; letter-spacing: -0.03em; }
.titolo-3 { font-size: var(--t-h3); font-weight: 650; line-height: 1.2; letter-spacing: -0.018em; }
.titolo-servizio { font-size: var(--t-h3); font-weight: 650; line-height: 1.2; letter-spacing: -0.018em; }
.guida { font-size: var(--t-lead); line-height: 1.55; color: var(--inchiostro-2); max-width: var(--max-misura); }
.tenue { color: var(--inchiostro-2); }
.piccolo { font-size: var(--t-small); line-height: 1.5; }
.didascalia { font-size: var(--t-xs); line-height: 1.45; color: var(--inchiostro-2); }
.misura { max-width: 34em; }
.cifre { font-variant-numeric: tabular-nums; }
.testo-lungo { max-width: 65ch; }
.testo-lungo > * + * { margin-top: 1em; }
.testo-lungo h2 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.018em; margin-top: 2em; }
.testo-lungo h3 { font-size: 1.0625rem; line-height: 1.3; margin-top: 1.5em; }
.testo-lungo ul { display: grid; gap: 0.375em; padding-left: 1.25em; list-style: disc; }
.testo-lungo ol { display: grid; gap: 0.375em; padding-left: 1.5em; list-style: decimal; }
.testo-lungo a { color: var(--azione); text-underline-offset: 3px; }
.sezione--notte .testo-lungo a { color: var(--indaco-ch); }

/* ---------------------------------------------------------------------
   5. Pulsanti, link, pillole
   --------------------------------------------------------------------- */
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0 1.125rem;
  border-radius: var(--r-m); border: 1px solid transparent;
  background: var(--azione); color: #fff;
  font-family: var(--font); font-weight: 620; font-size: 0.9375rem; line-height: 1.2;
  font-stretch: 100%; letter-spacing: -0.005em;
  text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease,
    color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.pulsante:active { transform: scale(0.97); }
.pulsante svg { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .pulsante:hover { background: var(--azione-hover); }
  .pulsante--secondario:hover { background: var(--bianco); border-color: var(--azione); color: var(--azione-hover); }
  .pulsante--inverso:hover { background: var(--chiaro); color: var(--ink); }
}
.pulsante--secondario { background: var(--bianco); color: var(--ink); border-color: var(--line-2); }
.pulsante--inverso { background: #fff; color: var(--indaco-h); }
.pulsante--grande { min-height: 3.5rem; font-size: 1.0625rem; padding: 0 1.5rem; border-radius: 14px; }
.pulsante--compatto { padding: 0 0.875rem; font-size: 0.875rem; }
.pulsante--pieno { width: 100%; }
@media (max-width: 29.99em) {
  .pulsante--grande { min-height: 3.25rem; padding: 0 0.875rem; font-size: 1rem; border-radius: var(--r-m); }
}
/* schermi bassi (zoom, Mac piccoli): pulsanti grandi più compatti */
@media (max-height: 40em) and (min-width: 56em) {
  .pulsante--grande { min-height: 2.875rem; font-size: 0.9375rem; padding: 0 1.125rem; }
}
/* sul notte il secondario resta scuro */
.sezione--notte .pulsante--secondario { background: var(--sup); color: var(--ink-d); border-color: var(--line-d); }
@media (hover: hover) and (pointer: fine) {
  .sezione--notte .pulsante--secondario:hover { background: var(--sup-2); border-color: var(--indaco-ch); color: #fff; }
}
/* due pulsanti in riga: al telefono si dividono la larghezza */
.azioni { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.azioni .pulsante { flex: 1 1 auto; }
@media (min-width: 30em) { .azioni { gap: 0.75rem; } .azioni .pulsante { flex: 0 1 auto; } }

/* link nel testo */
.link { color: var(--azione); font-weight: 560; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover { color: var(--azione-hover); text-decoration-thickness: 2px; }
.sezione--notte .link { color: var(--indaco-ch); }
.sezione--notte .link:hover { color: #fff; }
/* link da solo (fuori dal testo): area di 44 px */
.link-azione {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px;
  color: var(--azione); font-weight: 620; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.link-azione:hover { color: var(--azione-hover); text-decoration-thickness: 2px; }
.sezione--notte .link-azione { color: var(--indaco-ch); }
.sezione--notte .link-azione:hover { color: #fff; }

/* pillole: stato sempre scritto, mai solo colore */
.pillola {
  display: inline-flex; align-items: center; gap: 0.3rem; height: 1.625rem; padding: 0 0.55rem;
  border-radius: var(--r-xs); font-family: var(--font); font-weight: 640; font-size: var(--t-xs);
  line-height: 1; white-space: nowrap; background: #ECEDF4; color: var(--muted);
}
.pillola--brand { background: color-mix(in srgb, var(--indaco) 10%, #fff); color: var(--indaco-h); }
.pillola--ok { background: color-mix(in srgb, var(--verde) 10%, #fff); color: var(--verde); }
.pillola--avviso { background: color-mix(in srgb, var(--ambra) 22%, #fff); color: var(--ambra-t); }
.pillola--piena { background: var(--indaco); color: #fff; }
.sezione--notte .pillola { background: var(--sup-2); color: var(--muted-d); }
.sezione--notte .pillola--brand { background: color-mix(in srgb, var(--indaco) 30%, var(--sup)); color: var(--indaco-ch); }
.sezione--notte .pillola--ok { background: color-mix(in srgb, var(--lime) 12%, var(--sup)); color: var(--lime); }
.sezione--notte .pillola--avviso { background: color-mix(in srgb, var(--ambra) 13%, var(--sup)); color: var(--ambra); }
.sezione--notte .pillola--piena { background: var(--indaco); color: #fff; }

/* icone del sito: 24 × 24, tratto 1,9, colore del testo */
.icona { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icona-tondo {
  display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--r-s);
  background: color-mix(in srgb, var(--indaco) 10%, #fff); color: var(--indaco);
}
.icona-tondo .icona { width: 1.375rem; height: 1.375rem; }
.sezione--notte .icona-tondo { background: color-mix(in srgb, var(--indaco) 22%, var(--sup)); color: var(--indaco-ch); }

/* ---------------------------------------------------------------------
   6. Carte (gerarchie diverse: non tutte uguali)
   --------------------------------------------------------------------- */
/* carta: la prova piccola di M3 (chiaro su bianco, ombra corta) */
.carta {
  display: grid; gap: 0.75rem; align-content: start; min-width: 0;
  padding: 1rem 1.125rem; border-radius: var(--r-l);
  background: var(--chiaro); border: 1px solid var(--line);
  box-shadow: var(--ombra-carta);
}
:where(.sezione:not(.sezione--bianca):not(.sezione--notte)) .carta { background: var(--bianco); }  /* sul chiaro la carta è bianca */
/* in rilievo: il pezzo principale di un gruppo */
.carta--rilievo { padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--bianco); border-color: var(--line-2); box-shadow: var(--ombra-rilievo); }
/* piatta: solo filetto, per le liste dense di funzioni */
.carta--piatta { padding: clamp(1.25rem, 2.5vw, 1.5rem) 0 0; background: none !important; border: 0; border-top: 1px solid var(--filetto); border-radius: 0; box-shadow: none; }
/* scura: superficie dentro il notte */
.carta--notte, .sezione--notte .carta {
  background: var(--sup); border-color: var(--line-d); color: var(--ink-d); box-shadow: none;
}
.carta--notte .tenue, .sezione--notte .carta .tenue { color: var(--muted-d); }
/* carta intera cliccabile: un solo link, l'area si allarga con ::after */
.carta--link { position: relative; }
.carta--link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.carta--link a { text-decoration: none; }
.carta--link a:focus-visible { outline: none; }
.carta--link:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .carta--link { transition: border-color var(--dur-fast) ease; }
  .carta--link:hover { border-color: var(--azione); }
}
.carta-testa { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.carta-titolo { font-size: 1.0625rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.012em; }
.carta-testo { color: var(--inchiostro-2); font-size: var(--t-small); line-height: 1.55; }
.carta-piede { border-top: 1px solid var(--filetto); padding-top: 0.625rem; margin-top: auto; }

/* ---------------------------------------------------------------------
   7. Elenchi, passi, rassicurazioni
   --------------------------------------------------------------------- */
/* punti di sezione: filetto sopra ogni punto, nessun segno all'inizio */
.punti { border-bottom: 1px solid var(--filetto); }
.punti > li { display: grid; gap: 0.375rem; padding-block: clamp(1rem, 2vw, 1.375rem); border-top: 1px solid var(--filetto); }
.punti > li > p { color: var(--inchiostro-2); max-width: 34em; }
.punti--ampi > li { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
/* elenco a trattino, solo dentro un testo */
.trattini { display: grid; gap: 0.375rem; }
.trattini > li { position: relative; padding-left: 1.125em; }
.trattini > li::before { content: "–"; position: absolute; left: 0; color: var(--inchiostro-2); }

/* passi numerati: SOLO per sequenze vere (percorso, installazione, come funziona) */
.passi { display: grid; gap: clamp(1.5rem, 3vw, 2rem); counter-reset: passo; }
.passo { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: 0.375rem; align-items: baseline; counter-increment: passo; }
.passo::before {
  content: counter(passo);
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--r-xs);
  border: 1px solid var(--filetto-2); font-size: var(--t-xs); font-weight: 640; font-variant-numeric: tabular-nums;
  color: var(--azione); grid-row: 1 / span 2; align-self: start; transform: translateY(0.1rem);
}
.passo > * { grid-column: 2; }
.passo p { color: var(--inchiostro-2); max-width: 34em; }
.sezione--notte .passo::before { color: var(--indaco-ch); border-color: var(--line-d); }
/* numero dentro un titolo (quando il passo ha il suo blocco) */
.passo-n {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; border-radius: var(--r-xs);
  border: 1px solid var(--filetto-2); font-size: var(--t-xs); font-weight: 640; font-variant-numeric: tabular-nums; color: var(--azione);
}
.sezione--notte .passo-n { border-color: var(--line-d); color: var(--indaco-ch); }
.passo-k { display: inline-flex; align-items: center; gap: 0.625rem; font-weight: 640; color: var(--azione); font-size: 1rem; }
.sezione--notte .passo-k { color: var(--indaco-ch); }

/* rassicurazioni sotto un pulsante (hero della Home, intro di Estensione) */
.rassicurazioni { display: grid; gap: 0.5rem; font-size: var(--t-small); color: var(--inchiostro); }
.rassicurazioni li { display: flex; gap: 0.625rem; align-items: flex-start; line-height: 1.45; }
.rassicurazioni svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.05rem; fill: none; stroke: var(--azione); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sezione--notte .rassicurazioni svg { stroke: var(--indaco-ch); }
.finale .rassicurazioni { color: #fff; }
.finale .rassicurazioni svg { stroke: var(--lime); }

/* ---------------------------------------------------------------------
   8. Fisarmonica (domande frequenti): apertura istantanea, chevron a due stati
   --------------------------------------------------------------------- */
.domande { border-bottom: 1px solid var(--filetto); }
.domanda { border-top: 1px solid var(--filetto); }
.domanda > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding-block: 0.875rem; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 620; line-height: 1.35; letter-spacing: -0.01em;
  border-radius: 6px;
}
.domanda > summary::-webkit-details-marker { display: none; }
.domanda > summary::marker { content: ""; }
.domanda > summary:focus-visible { outline-offset: -2px; }
.domanda-segno { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--inchiostro-2); }
.domanda-segno .aperto { display: none; }
.domanda[open] .domanda-segno .chiuso { display: none; }
.domanda[open] .domanda-segno .aperto { display: inline; }
@media (hover: hover) and (pointer: fine) { .domanda > summary:hover { color: var(--azione-hover); } }
.sezione--notte .domanda > summary:hover { color: #fff; }
.risposta { padding-bottom: 1.25rem; max-width: 40em; color: var(--inchiostro-2); }
.risposta > * + * { margin-top: 0.75em; }
.risposta a { color: var(--azione); text-underline-offset: 3px; }
.sezione--notte .risposta a { color: var(--indaco-ch); }

/* ---------------------------------------------------------------------
   9. Tabelle che si adattano: righe, poi schede sotto 40 rem di contenitore
   --------------------------------------------------------------------- */
.tabella { container: tabella / inline-size; min-width: 0; }
.tabella table { width: 100%; border-collapse: collapse; font-size: var(--t-small); line-height: 1.45; }
.tabella caption { text-align: left; font-weight: 640; padding-bottom: 0.75rem; }
.tabella th, .tabella td { text-align: left; vertical-align: top; padding: 0.875rem 1rem 0.875rem 0; border-top: 1px solid var(--filetto); }
.tabella thead th { border-top: 0; padding-top: 0; color: var(--inchiostro-2); font-size: var(--t-xs); font-weight: 640; }
.tabella tbody th { font-weight: 640; color: var(--inchiostro); }
.tabella td { color: var(--inchiostro-2); }
.tabella tbody tr:last-child > * { border-bottom: 1px solid var(--filetto); }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@container tabella (max-width: 40rem) {
  .tabella thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; text-overflow: ellipsis; }   /* nascosta alla vista, letta dai lettori di schermo (ACCESSIBILITA D7) */
  .tabella table, .tabella tbody, .tabella tr, .tabella th, .tabella td { display: block; }
  .tabella tr { padding-block: 0.875rem; border-top: 1px solid var(--filetto); }
  .tabella tbody tr:last-child { border-bottom: 1px solid var(--filetto); }
  .tabella tbody tr:last-child > * { border-bottom: 0; }
  .tabella th, .tabella td { border: 0; padding: 0.125rem 0; }
  .tabella tbody th { font-size: 1rem; padding-bottom: 0.375rem; }
  .tabella td[data-etichetta] { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 0.75rem; }
  .tabella td[data-etichetta]::before { content: attr(data-etichetta); color: var(--inchiostro); font-weight: 560; }
  .tabella .num { text-align: left; }
}

/* ---------------------------------------------------------------------
   10. Carte piano (3 affiancate da 52 rem di contenitore)
   --------------------------------------------------------------------- */
.piani { container: piani / inline-size; }
.piani-griglia { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@container piani (min-width: 52rem) { .piani-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.piano {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 1.25rem; align-content: start;
  min-width: 0; padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--r-l); background: var(--bianco); border: 1px solid var(--line-2);
  box-shadow: var(--ombra-carta);
}
.piano--scelto { border: 2px solid var(--azione); box-shadow: var(--ombra-rilievo); }
.piano-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.75rem; }
.piano-nome { font-size: var(--t-h3); font-weight: 650; line-height: 1.2; letter-spacing: -0.018em; }
.piano-prezzo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.375rem; font-variant-numeric: tabular-nums; }
.piano-prezzo strong { font-size: clamp(2.5rem, 1.9rem + 2vw, 3.25rem); font-weight: 640; line-height: 1; letter-spacing: -0.035em; }
.piano-prezzo span { color: var(--inchiostro-2); font-size: var(--t-small); }
.piano-dati { display: grid; border-bottom: 1px solid var(--filetto); align-content: start; }
.piano-dati > li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.625rem; border-top: 1px solid var(--filetto); font-size: var(--t-small); }
.piano-dati > li > span:first-child { color: var(--inchiostro-2); }
.piano-dati > li > strong { font-variant-numeric: tabular-nums; text-align: right; }
.piano .pulsante { width: 100%; }
.piani-nota { margin-top: 1.25rem; color: var(--inchiostro-2); font-size: var(--t-small); max-width: 46em; }
.sezione--notte .piano { background: var(--sup); border-color: var(--line-d); color: var(--ink-d); box-shadow: none; }
.sezione--notte .piano--scelto { border-color: var(--indaco-ch); }

/* ---------------------------------------------------------------------
   11. Recensioni SEGNAPOSTO: il tratteggio vuol dire «segnaposto», solo qui e nelle legali
   --------------------------------------------------------------------- */
.recensioni { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); grid-auto-rows: 1fr; }
.recensione {
  container: recensione / inline-size;
  display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; min-width: 0;
  padding: clamp(1.125rem, 2.2vw, 1.5rem); border-radius: var(--r-l);
  background: var(--bianco); border: 1px solid var(--line-2);
}
.recensione.is-segnaposto { border: 1px dashed var(--segnaposto); background: transparent; }
.recensione-etichetta { justify-self: start; }
.recensione-testo { font-size: 1.0625rem; line-height: 1.55; color: var(--inchiostro); }
.recensione.is-segnaposto .recensione-testo { color: var(--inchiostro-2); }
.recensione-chi { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.recensione-iniziale {
  display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: color-mix(in srgb, var(--indaco) 12%, #fff); color: var(--indaco-h); font-weight: 680; font-size: 1rem;
}
.recensione-nome { font-weight: 640; line-height: 1.3; }
.recensione-negozio { color: var(--inchiostro-2); font-size: var(--t-xs); line-height: 1.3; }
.recensione-chi > div { min-width: 0; }
.recensione-nome, .recensione-negozio { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sezione--notte .recensione { background: var(--sup); border-color: var(--line-d); }
.sezione--notte .recensione.is-segnaposto { background: transparent; border-color: var(--segnaposto); }
.sezione--notte .recensione-iniziale { background: var(--sup-2); color: var(--indaco-ch); }
/* avviso segnaposto (pagine legali): stesso segno */
.segnaposto { padding: 1rem 1.125rem; border: 1px dashed var(--segnaposto); border-radius: var(--r-m); color: var(--inchiostro-2); font-size: var(--t-small); }

/* ---------------------------------------------------------------------
   12. Cornice dei widget
   <figure class="cornice"> <div class="cornice-schermo">{{> widget-… }}</div>
     <figcaption class="cornice-nota"><span>{{ comune-cornice.nota }}</span><span class="cornice-pausa"></span></figcaption>
   </figure>
   widget-base.js mette il pulsante Pausa / Riprendi / Rivedi in .cornice-pausa.
   --------------------------------------------------------------------- */
.cornice { position: relative; min-width: 0; max-width: 100%; }
.cornice-schermo { min-width: 0; }
.cornice-schermo > .qa-finestra, .cornice-schermo > .qa > .qa-finestra { box-shadow: var(--ombra-finestra); }
.cornice-nota {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px; margin-top: 0.75rem;
  font-size: var(--t-xs); line-height: 1.4; color: var(--inchiostro-2);
}
.cornice-pausa { display: contents; }
/* il pulsante della base, nella nota: M3 «Pausa» con parola e icona, 44 px */
.cornice .qa-pausa {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; flex: none;
  width: auto; height: auto; min-height: 44px; min-width: 44px; padding: 0 0.875rem;
  border-radius: 11px; border: 1px solid var(--line-2); background: var(--bianco);
  font-family: var(--font); font-weight: 600; font-size: 0.875rem; line-height: 1; color: var(--ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.cornice .qa-pausa::before { content: none; }
.cornice .qa-pausa svg { width: 1rem; height: 1rem; fill: currentColor; }
.cornice .qa-pausa:active { transform: scale(0.97); }
.cornice .qa-pausa:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cornice .qa-pausa[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .cornice .qa-pausa:hover { border-color: var(--azione); color: var(--azione-hover); } }
.sezione--notte .cornice .qa-pausa { background: var(--sup); border-color: var(--line-d); color: var(--ink-d); }
@media (hover: hover) and (pointer: fine) { .sezione--notte .cornice .qa-pausa:hover { border-color: var(--indaco-ch); color: #fff; } }
/* pulsante di pausa scritto a mano (sezioni con motion.js): stesso aspetto */
.pausa {
  display: inline-flex; align-items: center; gap: 0.4rem; flex: none;
  min-height: 44px; min-width: 44px; padding: 0 0.875rem;
  border-radius: 11px; border: 1px solid var(--line-2); background: var(--bianco);
  font-weight: 600; font-size: 0.875rem; color: var(--ink); cursor: pointer;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.pausa:active { transform: scale(0.97); }
.pausa svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: none; }
.pausa[data-s="run"] .i-pausa, .pausa[data-s="paused"] .i-riprendi, .pausa[data-s="done"] .i-rivedi { display: block; }
@media (hover: hover) and (pointer: fine) { .pausa:hover { border-color: var(--azione); } }
.sezione--notte .pausa { background: var(--sup); border-color: var(--line-d); color: var(--ink-d); }

/* strumenti di motion.js: cifre su nastri e righe del titolo cinetico */
.dg { position: relative; display: inline-block; line-height: 1.25em; vertical-align: baseline; -webkit-clip-path: inset(0); clip-path: inset(0); }
.dg > .dg-s { visibility: hidden; }
.dg > .dg-t { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; }
.dg > .dg-t > span { display: block; height: 1.25em; line-height: 1.25em; }
.riga { display: block; position: relative; }
.riga-t { display: inline-block; position: relative; z-index: 1; }

/* sbordo: la cornice arriva al bordo della finestra, solo da 80 em e solo nei tre momenti animati.
   La sezione ha .sezione--sborda (si misura con 100cqi, mai 100vw); la cornice sta nell'ultima
   colonna (destra) o nella prima (sinistra). Tetto 64 rem: oltre, la cornice si ferma e torna
   arrotondata anche da quel lato. Nulla esce dalla pagina: niente scorrimento orizzontale. */
@media (min-width: 80em) {
  .sezione--sborda {
    --sbordo: calc((100cqi - min(100cqi, var(--max-content) + var(--gut-l) + var(--gut-r))) / 2 + var(--gut-r));
  }
  .cornice--sborda-destra > .cornice-schermo,
  .cornice--sborda-sinistra > .cornice-schermo { width: min(calc(100% + var(--sbordo, 0px)), 64rem); }
  .cornice--sborda-sinistra > .cornice-schermo { margin-left: calc(100% - min(calc(100% + var(--sbordo, 0px)), 64rem)); }
  /* dentro .qa (contenitore), 100cqi = larghezza della cornice: angolo vivo finché tocca il bordo, tondo al tetto */
  .cornice--sborda-destra .qa-finestra {
    --tocca: clamp(0px, (100cqi - 64rem + 1px) * 100, var(--r-xl));
    border-top-right-radius: var(--tocca); border-bottom-right-radius: var(--tocca);
    border-right-width: clamp(0px, (100cqi - 64rem + 1px) * 100, 1px);
  }
  .cornice--sborda-sinistra .qa-finestra {
    --tocca: clamp(0px, (100cqi - 64rem + 1px) * 100, var(--r-xl));
    border-top-left-radius: var(--tocca); border-bottom-left-radius: var(--tocca);
    border-left-width: clamp(0px, (100cqi - 64rem + 1px) * 100, 1px);
  }
}
/* telefono: i momenti animati da bordo a bordo, raggio 0 */
@media (max-width: 47.99em) {
  .cornice--bordo > .cornice-schermo { margin-left: calc(-1 * var(--gut-l)); margin-right: calc(-1 * var(--gut-r)); }
  .cornice--bordo .qa-finestra { border-radius: 0; border-left: 0; border-right: 0; }
}

/* ---------------------------------------------------------------------
   13. Fascia finale (indaco di Qublo, come M3) e chiusure
   --------------------------------------------------------------------- */
.finale {
  --focus: #fff;
  --inchiostro: #fff;
  --inchiostro-2: var(--su-indaco);
  background: var(--indaco); color: #fff;
  padding-block: var(--sezione-finale);
}
.finale-in { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: end; }
@media (min-width: 56em) { .finale-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.finale .titolo-2, .finale .titolo-1 { max-width: 16em; }
.finale-testo p { margin-top: 1rem; font-size: var(--t-lead); line-height: 1.5; color: var(--su-indaco); max-width: 34em; }
.finale-azioni { display: grid; gap: 1.25rem; justify-items: start; }
.finale-domanda { font-size: var(--t-small); color: var(--su-indaco); }
.finale-domanda a { color: #fff; font-weight: 640; text-underline-offset: 3px; }
.finale .pulsante:not(.pulsante--inverso) { background: #fff; color: var(--indaco-h); }
/* variante notte (se una pagina la chiede) */
.finale--notte { --focus: var(--focus-su-scuro); --inchiostro-2: var(--muted-d); background: var(--notte); }
.finale--notte .finale-testo p, .finale--notte .finale-domanda { color: var(--muted-d); }
.finale--notte .pulsante:not(.pulsante--inverso) { background: var(--indaco); color: #fff; }
/* pannello contenuto (Estensione): stesso indaco dentro il contenitore */
.finale--pannello { background: none; padding-block: 0 var(--sezione-basso); }
.finale--pannello .finale-in { background: var(--indaco); border-radius: var(--r-xl); padding: clamp(1.75rem, 5vw, 3.5rem); }
/* chiusura chiara (Contatti) */
.chiusura { border-top: 1px solid var(--filetto); padding-block: var(--sezione-servizio); }
.chiusura .titolo-servizio + p { margin-top: 0.5rem; color: var(--inchiostro-2); max-width: 34em; }
.chiusura .pulsante { margin-top: 1.25rem; }

/* ---------------------------------------------------------------------
   14. Ripiego provvisorio di intestazione, piede e pagine segnaposto.
   Specificità zero (:where): sezioni/comune.css lo sostituisce senza lotte.
   --------------------------------------------------------------------- */
:where(.testata) { position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top); background: var(--fondo); border-bottom: 1px solid var(--filetto); }
@media (max-height: 31.25em) { :where(.testata) { position: relative; } }
:where(.testata-riga) { display: flex; align-items: center; gap: 0.5rem 1rem; min-height: var(--testata-h, 3.5rem); flex-wrap: wrap; }
:where(.marchio) { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; text-decoration: none; font-weight: 760; font-size: 1.3125rem; letter-spacing: -0.03em; font-stretch: 104%; color: var(--ink); border-radius: 8px; }
:where(.marchio img) { width: 2rem; height: 2rem; }
:where(.menu) { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; margin-left: auto; }
:where(.menu a) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.75rem; border-radius: var(--r-s); text-decoration: none; font-size: 0.9375rem; font-weight: 520; color: var(--ink); }
:where(.menu a[aria-current="page"]) { color: var(--azione-hover); }
:where(.menu .pulsante) { color: #fff; font-weight: 620; }
:where(.menu-apri) { display: none; margin-left: auto; min-height: 44px; min-width: 44px; padding: 0 0.875rem; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--bianco); font-weight: 600; cursor: pointer; }
@media (max-width: 69.99em) {
  :where(.menu-apri) { display: inline-flex; align-items: center; }
  :where(.menu) { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 1rem; }
  :where(.menu.aperto) { display: flex; }
}
:where(.piede) { background: var(--fondo); border-top: 1px solid var(--filetto); color: var(--muted); padding-block: 3rem calc(1.5rem + env(safe-area-inset-bottom)); }
:where(.piede-griglia) { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
:where(.piede h2) { font-size: var(--t-small); font-weight: 600; color: var(--ink); margin: 0 0 0.5rem; }
:where(.piede nav a, .piede div > a:not(.marchio)) { display: flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
:where(.piede-frase) { margin-top: 0.75rem; max-width: 34ch; }
:where(.piede-diritti) { font-size: var(--t-xs); margin-top: 2rem; }
:where(.provvisoria) { padding-block: var(--sezione-alto) var(--sezione-basso); }
:where(.provvisoria h1) { font-size: var(--t-h2); font-weight: 640; line-height: 1.06; letter-spacing: -0.03em; max-width: 20ch; margin-bottom: 1rem; }
:where(.provvisoria p + p) { margin-top: 1.5rem; }
:where(.intro) { color: var(--muted); font-size: var(--t-lead); max-width: 36em; }

/* ---------------------------------------------------------------------
   15. Riduci movimento, stampa, colori forzati
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important;   /* ACCESSIBILITA P6: il focus entra subito nel menu */
  }
  .moto-scia { display: none !important; }
}
/* «risparmio dati» o «riduci movimento» letti dallo script in testa (html.fermo) */
.fermo .moto-scia { display: none !important; }
@media print {
  .testata, .menu-apri, .salta, .qa-pausa, .pausa, .cornice-pausa { display: none !important; }
  .sezione--notte, .finale { background: #fff !important; color: #000 !important; }
  body { overflow: visible; }
}
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  .pulsante, .pausa, .cornice .qa-pausa, .carta, .piano, .recensione { border: 1px solid CanvasText; }
  .recensione.is-segnaposto, .segnaposto { border-style: dashed; }
}