/* generato da sorgenti/build.py: non modificare a mano. Fonti: css/sezioni/comune.css, css/sezioni/come-funziona.css, css/sezioni/contatti.css, css/sezioni/estensione.css, css/sezioni/funzionalita.css, css/sezioni/home-calcolatore.css, css/sezioni/home-dashboard.css, css/sezioni/home-domande.css, css/sezioni/home-estensione.css, css/sezioni/home-finale.css, css/sezioni/home-funzioni.css, css/sezioni/home-hero.css, css/sezioni/home-perche.css, css/sezioni/home-percorso.css, css/sezioni/home-piani.css, css/sezioni/home-recensioni.css, css/sezioni/home-schermata.css, css/sezioni/legali.css, css/sezioni/prezzi.css, css/sezioni/zz-palette.css, css/sezioni/zzz-nebbia.css, css/sezioni/zzz-prestazioni.css, css/sezioni/zzz-safari.css */

/* ---- css/sezioni/comune.css ---- */
/* =====================================================================
   Qublo · parti comuni: marchio, intestazione, menu del telefono, piede.
   Schema: contenuti/impaginazione/comune.md + spunto 8 (pallino, ombra dopo il primo
   scorrimento). Stile: M3 «Scorrimento veloce», tavolozza P3 (zz-palette.css).
   Movimento (sito.js): lastra notte allineata al pixel sotto l'intestazione, filetto del
   piede che si traccia, cubo del piede che si compone. Unito per primo in sezioni.css.
   ===================================================================== */

/* ---------- marchio ---------- */
.marchio {
  display: inline-flex; align-items: center; gap: 0.5rem; flex: none;
  min-height: 44px; padding-right: 0.25rem; border-radius: var(--r-xs);
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.marchio-cubo { width: 2rem; height: 2rem; flex: none; overflow: visible; }
.marchio-parola { transition: color var(--dur-fast) ease; }
.marchio-parola {
  font-weight: 760; font-size: 1.3125rem; line-height: 1; letter-spacing: -0.03em; font-stretch: 104%;
}
@media (max-width: 17.49em) { .marchio-cubo { width: 1.75rem; height: 1.75rem; } }

/* ---------- intestazione ---------- */
.testata-sentinella { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }

.testata {
  --testata-riga: 3.5rem;
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: var(--fondo);           /* pieno: niente testo che traspare, niente vetro */
  color: var(--inchiostro);
  border-bottom: 0;
}
/* P33: il Tab nella testata ferma non fa scorrere la pagina (il pannello .telefono segue il focus per conto suo) */
.testata-riga a, .testata-riga button { scroll-margin-top: calc(-1 * var(--sopra-fermo, 0px)); }
@media (min-width: 48em) { .testata { --testata-riga: 4.5rem; } }
/* filetto e ombra (tinta d'indaco, mai grigia): solo dopo 8 px di scorrimento (sito.js).
   L'ombra è una sfumatura corta sotto il bordo: si accende con l'opacità, sul compositore. */
.testata::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; margin-top: -1px;
  border-top: 1px solid var(--filetto);
  background: linear-gradient(to bottom, rgba(63, 63, 184, 0.10), rgba(63, 63, 184, 0.035) 45%, rgba(63, 63, 184, 0));
  opacity: 0; transition: opacity var(--dur-fast) ease; pointer-events: none;
}
.testata--staccata::after, html:not(.js) .testata::after, .menu-aperto .testata::after { opacity: 1; }
/* agganciata a un pannello notte il bordo basso è il pannello stesso: niente filetto né ombra */
.testata.is-scura::after { opacity: 0; }
.fermo .testata::after { transition: none; }

/* lastra notte: la continuazione del pannello scuro agganciato (stesso rientro laterale, stessa
   luce, riflesso allineato). Entra ed esce in 180 ms insieme all'inchiostro; mentre resta agganciata
   segue il pannello allo scorrimento. La misura sito.js; senza JS e con «riduci movimento» non c'è. */
.testata-notte {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-fast) ease;
}
.testata.is-scura .testata-notte { opacity: 1; }
.testata-notte i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: var(--riflesso), var(--software); background-repeat: no-repeat;
}
/* telefono in orizzontale e zoom forte: scorre via con la pagina */
@media (max-height: 31.25em) {
  .testata { position: relative; }
  .menu-aperto .testata { position: sticky; }
}

.testata-riga {
  display: flex; align-items: center; gap: 0.75rem;
  height: var(--testata-riga);
}
.testata-riga .marchio { margin-right: auto; }

/* menu del desktop (da 64 em) */
.testata-menu { display: none; }
.testata-menu ul { display: flex; align-items: center; gap: 1.25rem; }
.testata-menu a {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 0.25rem; border-radius: var(--r-xs);
  color: var(--inchiostro-2); font-size: 0.9375rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: color var(--dur-fast) ease;
}
.testata-menu a[aria-current="page"] { color: var(--inchiostro); font-weight: 560; }
/* pagina corrente: pallino di 4 px centrato 6 px sotto la parola, fermo (spunto 8) */
.testata-menu a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; width: 4px; height: 4px; margin-left: -2px;
  bottom: calc(50% - 0.6em - 10px); border-radius: 50%; background: var(--azione);
}
.testata.is-scura .testata-menu a[aria-current="page"]::after { background: var(--indaco-ch); }
.testata-menu a:focus-visible { outline-offset: 0; }

.testata-azioni { display: flex; align-items: center; gap: 0.75rem; flex: none; }

/* lingua: due codici separati da un filetto verticale */
.testata-lingua { display: none; align-items: center; gap: 0.5rem; }
.testata-lingua-attuale, .testata-lingua-altra {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 2rem; font-size: 0.875rem; letter-spacing: 0.02em; line-height: 1;
}
.testata-lingua-attuale { color: var(--inchiostro); font-weight: 560; }
.testata-lingua-attuale::after {
  content: ""; width: 1px; height: 14px; margin-left: 0.5rem; background: var(--filetto-2);
}
.testata-lingua-altra {
  color: var(--inchiostro-2); font-weight: 500; text-decoration: none; border-radius: var(--r-xs);
  transition: color var(--dur-fast) ease;
}
.testata-lingua-attuale { transition: color var(--dur-fast) ease; }
.testata-lingua-attuale::after { transition: background-color var(--dur-fast) ease; }

.testata-accedi {
  display: none; align-items: center; min-height: 44px; padding: 0 0.25rem; border-radius: var(--r-xs);
  color: var(--inchiostro); font-size: 0.9375rem; font-weight: 520; text-decoration: none; white-space: nowrap;
  text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color var(--dur-fast) ease;
}

/* «Scegli il piano»: l'unico pulsante pieno della barra */
.testata-piano { display: none; min-height: 44px; padding: 0 1rem; font-size: 0.875rem; font-weight: 600; }

/* «Menu» / «Chiudi»: solo la parola */
.testata-menu-apri {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: 44px; min-width: 4rem; padding: 0 0.875rem;
  border: 1px solid var(--filetto-2); border-radius: var(--r-m);
  background: var(--bianco); color: var(--inchiostro);
  font-family: var(--font); font-size: 0.9375rem; font-weight: 560; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.testata-menu-apri:active { transform: scale(0.97); }
.testata-menu-apri[aria-expanded="true"] { border-color: var(--inchiostro); }

@media (min-width: 22.5em) {
  .testata-piano { display: inline-flex; }
}
@media (min-width: 30em) {
  .testata-riga { gap: 1rem; }
  .testata-piano { padding: 0 1.125rem; font-size: 0.9375rem; }
}
/* menu completo */
@media (min-width: 64em) {
  .testata-riga .marchio { margin-right: 2.5rem; }
  .testata-menu { display: block; margin-right: auto; }
  .testata-azioni { gap: 0; }
  .testata-lingua { display: inline-flex; margin-right: 1.25rem; }
  .testata-accedi { display: inline-flex; margin-right: 1rem; }
  .testata-menu-apri { display: none; }
  /* 64-80 em: spazio stretto, si mostra solo l'altra lingua */
  .testata-lingua-attuale { display: none; }
}
@media (min-width: 80em) {
  .testata-menu ul { gap: 1.5rem; }
  .testata-lingua { margin-right: 1.5rem; }
  .testata-lingua-attuale { display: inline-flex; }
}

@media (hover: hover) and (pointer: fine) {
  .testata-menu a:hover, .testata-lingua-altra:hover { color: var(--inchiostro); }
  .testata-accedi:hover { text-decoration-line: underline; }
  .testata-piano { transition: background-color 140ms ease, transform 140ms var(--ease-out); }
  .testata-piano:hover { transform: translateY(-1px); }
  .testata-piano:active { transform: scale(0.985); }
  .testata-menu-apri:hover { border-color: var(--inchiostro-2); }
}

/* ---------- menu del telefono ---------- */
.telefono {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 49;
  top: calc(env(safe-area-inset-top) + var(--testata-riga));
  background: var(--fondo);
  border-top: 1px solid var(--filetto);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out), visibility 0s linear 280ms;
}
.telefono.aperto {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity var(--dur-sheet) var(--ease-sheet), transform var(--dur-sheet) var(--ease-sheet), visibility 0s;
}
.telefono-in {
  display: flex; flex-direction: column; min-height: 100%;
  padding-top: 0.5rem; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}
.telefono-in > * { width: 100%; max-width: 32rem; }

.telefono-voci li { border-bottom: 1px solid var(--filetto); }
.telefono-voci a {
  display: flex; align-items: center; min-height: 3.5rem; padding-block: 0.375rem;
  color: var(--inchiostro); text-decoration: none;
  font-size: clamp(1.25rem, 0.6rem + 2.6vw, 1.875rem); font-weight: 520; line-height: 1.2; letter-spacing: -0.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.telefono-voci a[aria-current="page"] { font-weight: 640; }
/* pagina corrente: pallino accanto alla parola (spunto 8), niente bordo né fondo */
.telefono-voci a[aria-current="page"]::after {
  content: ""; flex: none; width: 6px; height: 6px; margin-left: 0.75rem; border-radius: 50%; background: var(--azione);
}
.telefono-voci a { padding-inline: 0.625rem; margin-inline: -0.625rem; border-radius: var(--r-s); }
.telefono-voci a:focus-visible { outline-offset: -3px; }

.telefono-lingua { margin-top: 2rem; }
.telefono-etichetta { font-size: 0.875rem; color: var(--inchiostro-2); margin-bottom: 0.5rem; }
.telefono-lingue { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.telefono-lingua-attuale, .telefono-lingua-altra {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 7rem; padding: 0 1rem; border-radius: var(--r-m);
  font-size: 0.9375rem; line-height: 1; text-decoration: none;
}
.telefono-lingua-attuale { border: 2px solid var(--inchiostro); font-weight: 600; color: var(--inchiostro); }
.telefono-lingua-altra { border: 1px solid var(--filetto-2); background: var(--bianco); font-weight: 500; color: var(--inchiostro); }

.telefono-azioni { margin-top: auto; padding-top: 2.5rem; display: grid; gap: 0.75rem; }
.telefono-accesso { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; color: var(--inchiostro-2); font-size: var(--t-small); }
.telefono-accesso .link-azione { font-size: var(--t-body); }
.telefono-azioni .pulsante { min-height: 3rem; }
.telefono-contatto { color: var(--inchiostro-2); font-size: var(--t-small); line-height: 1.5; }
.telefono-contatto a { color: var(--inchiostro); font-weight: 560; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; max-width: 100%; }
.telefono-contatto a .icona-email { flex: none; }
/* icona email del set Qublo: tratto 1,9, estremi tondi, colore del testo */
.icona-email { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* cascata delle voci all'apertura (solo con movimento permesso) */
.moto .telefono-voci li, .moto .telefono-lingua, .moto .telefono-azioni {
  opacity: 0; transform: translateY(8px);
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.moto .telefono.aperto .telefono-voci li, .moto .telefono.aperto .telefono-lingua, .moto .telefono.aperto .telefono-azioni {
  opacity: 1; transform: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.moto .telefono.aperto .telefono-voci li:nth-child(2) { transition-delay: 40ms; }
.moto .telefono.aperto .telefono-voci li:nth-child(3) { transition-delay: 80ms; }
.moto .telefono.aperto .telefono-voci li:nth-child(4) { transition-delay: 120ms; }
.moto .telefono.aperto .telefono-voci li:nth-child(5),
.moto .telefono.aperto .telefono-lingua,
.moto .telefono.aperto .telefono-azioni { transition-delay: 160ms; }

/* riduci movimento: solo opacità, senza cascata */
.fermo .telefono { transform: none; transition: opacity 120ms linear, visibility 0s linear 120ms; }
.fermo .telefono.aperto { transform: none; transition: opacity 120ms linear, visibility 0s; }
@media (prefers-reduced-motion: reduce) {
  .telefono, .telefono.aperto { transform: none; }
  .telefono-voci li, .telefono-lingua, .telefono-azioni { opacity: 1 !important; transform: none !important; }
}

/* pagina bloccata con il menu aperto */
/* html.menu-aperto non nasconde lo scorrimento: lo fa il body (zzz-safari.css), così la testata sticky resta in alto (ACCESSIBILITA D12) */

/* sopra 64 em il pannello non c'è */
@media (min-width: 64em) { .telefono { display: none; } }

/* senza JS: le voci sono una lista normale sotto l'intestazione */
html:not(.js) .telefono {
  position: static; visibility: visible; opacity: 1; transform: none; overflow: visible;
}
html:not(.js) .telefono-voci li, html:not(.js) .telefono-lingua, html:not(.js) .telefono-azioni { opacity: 1; transform: none; }

@media (hover: hover) and (pointer: fine) {
  .telefono-voci a:hover { color: var(--azione-hover); }
  .telefono-lingua-altra:hover { border-color: var(--azione); color: var(--azione-hover); }
}

/* ---------- piede ---------- */
.piede {
  position: relative;
  background: var(--fondo); color: var(--inchiostro-2);
  border-top: 1px solid var(--filetto);
  padding-top: clamp(4rem, 2.5rem + 4vw, 6rem);
  padding-bottom: calc(clamp(2rem, 1.5rem + 1.5vw, 3rem) + env(safe-area-inset-bottom));
}
/* dopo un blocco scuro basta il cambio di fondo */
main:has(.finale) + .piede { border-top: 0; }
/* filo pervinca che si traccia da sinistra mentre il piede entra (scala 0 → 1, legata allo scorrimento) */
.piede-filo {
  position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: var(--pervinca); transform-origin: 0 50%;
}
/* marchio del piede: un passo più grande; le facce del cubo si compongono (sito.js) */
.piede .marchio { gap: 0.625rem; }
.piede .marchio-cubo { width: 2.5rem; height: 2.5rem; }
.piede .marchio-parola { font-size: 1.5rem; }
.piede .marchio-sopra, .piede .marchio-lato { transform-box: view-box; }

.piede-griglia {
  display: grid; gap: 3rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}
.piede-marchio, .piede-scrivici { grid-column: 1 / -1; }
.piede-frase { margin-top: 1rem; max-width: 34ch; font-size: 1rem; line-height: 1.55; color: var(--inchiostro-2); }

.piede-titolo { font-size: 0.875rem; font-weight: 560; line-height: 1.3; letter-spacing: 0; color: var(--inchiostro); margin-bottom: 0.5rem; }
.piede-link a {
  display: inline-flex; align-items: center; min-height: 44px; border-radius: var(--r-xs);
  color: var(--inchiostro-2); font-size: 1rem; line-height: 1.3; text-decoration: none;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color var(--dur-fast) ease;
}
.piede-testo { max-width: 36ch; font-size: 1rem; line-height: 1.55; }
.piede-email { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin-top: 0.75rem; }
.piede-indirizzo {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; max-width: 100%;
  color: var(--inchiostro); font-weight: 560; font-size: 1rem; overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--filetto-2);
}
.piede-indirizzo .icona-email { flex: none; color: var(--azione-hover); }
.piede-indirizzo .lungo { min-width: 0; }
.piede-copia { min-height: 44px; }

.piede-fondo {
  display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 0.5rem;
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--filetto);
}
.piede-diritti { font-size: var(--t-xs); color: var(--inchiostro-2); }
.piede-lingua { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; }
.piede-lingua-attuale { display: inline-flex; align-items: center; min-height: 44px; color: var(--inchiostro); font-weight: 560; }
.piede-lingua-attuale::after { content: ""; width: 1px; height: 14px; margin-left: 0.75rem; background: var(--filetto-2); }
.piede-lingua a { display: inline-flex; align-items: center; min-height: 44px; border-radius: var(--r-xs); color: var(--inchiostro-2); text-decoration: none; text-underline-offset: 3px; }

/* 48-64 em: griglia a 6 */
@media (min-width: 48em) {
  .piede-griglia { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3rem var(--gap); }
  .piede-marchio { grid-column: 1 / span 3; grid-row: 1; }
  .piede-scrivici { grid-column: 4 / span 3; grid-row: 1; }
  .piede-prodotto { grid-column: 1 / span 2; grid-row: 2; }
  .piede-legale { grid-column: 3 / span 2; grid-row: 2; }
  .piede-fondo { flex-direction: row; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; }
}
/* da 64 em: griglia a 12 su una riga */
@media (min-width: 64em) {
  .piede-griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .piede-marchio { grid-column: 1 / span 4; grid-row: 1; }
  .piede-prodotto { grid-column: 6 / span 2; grid-row: 1; }
  .piede-legale { grid-column: 8 / span 2; grid-row: 1; }
  .piede-scrivici { grid-column: 10 / span 3; grid-row: 1; }
  .piede-fondo { margin-top: 4rem; }
}

@media (hover: hover) and (pointer: fine) {
  .piede-link a:hover, .piede-lingua a:hover { color: var(--inchiostro); text-decoration-line: underline; }
  .piede-indirizzo:hover { text-decoration-color: currentColor; }
}

/* ---------- colori forzati e stampa ---------- */
@media (forced-colors: active) {
  .testata::after, .piede-fondo, .telefono-voci li { background: CanvasText; border-color: CanvasText; }
  .testata-menu a[aria-current="page"]::after { background: CanvasText; }
  .testata-menu-apri, .telefono-lingua-altra { border: 1px solid ButtonText; }
}
@media (forced-colors: active) {
  .testata-notte, .piede-filo { display: none; }
  .testata-menu a[aria-current="page"]::after, .telefono-voci a[aria-current="page"]::after { background: CanvasText; }
}
@media print {
  .telefono, .piede-copia, .piede-lingua, .testata-notte, .piede-filo { display: none !important; }
  .piede { border-top: 1px solid #000; }
}

/* ---- css/sezioni/come-funziona.css ---- */
/* =====================================================================
   Qublo · Come funziona (sorgenti/pagine/come-funziona.html) · v2 «scorrimento controllato»
   Schema: contenuti/impaginazione/come-funziona.md · Sistema: contenuti/SISTEMA.md
   Movimento: risorse/js/sezione-come-funziona.js (Qublo.scorri + Qublo.moto).
   Gesto della pagina: due corsie fisse, «Cosa fai tu» a sinistra e «Cosa fa Qublo» a destra.
   Stato finale = markup: gli stati di partenza valgono solo con [data-vivo] / .is-vivo, che mette
   lo script quando il movimento è permesso. Senza JS e con «riduci movimento» tutto è fermo e pieno.
   Ogni classe inizia con .s-come-funziona. Colori solo dai token (P3 «Tono su tono»).
   ===================================================================== */

/* ---------- comuni della pagina ---------- */
.s-come-funziona-viaggio .solo-lettori, .s-come-funziona-passi .solo-lettori, .s-come-funziona-tabella .solo-lettori { text-overflow: ellipsis; }
.s-come-funziona-segno { width: 0.75rem; height: 0.75rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; overflow: visible; }
.s-come-funziona-segno .pieno { fill: currentColor; stroke: none; }
.s-come-funziona-modo { display: inline-flex; align-items: center; gap: 0.5rem; }

/* pillole dell'app (Inter, come nelle schermate) */
.s-come-funziona-pill {
  display: inline-flex; align-items: center; gap: 0.25rem; height: 1.375rem; padding: 0 0.5rem;
  border-radius: 7px; font-family: var(--font-app); font-weight: 700; font-size: 0.75rem; line-height: 1;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  background: var(--chiaro); color: var(--muted);
}
.s-come-funziona-pill svg { width: 0.8125rem; height: 0.8125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s-come-funziona-pill--ok { background: color-mix(in srgb, var(--verde) 10%, #fff); color: var(--verde); }
.s-come-funziona-pill--avviso { background: color-mix(in srgb, var(--ambra) 22%, #fff); color: var(--ambra-t); }
.s-come-funziona-pill--brand { background: color-mix(in srgb, var(--indaco) 10%, #fff); color: var(--indaco-h); }
.s-come-funziona-pill--piena { background: var(--indaco); color: #fff; }
.s-come-funziona-pill.is-prima svg { display: none; }

/* icona prima / dopo di un pulsante dell'app che cambia stato */
.s-come-funziona-ico-prima { display: none; }
.is-prima > .s-come-funziona-ico-prima { display: block; }
.is-prima > .s-come-funziona-ico-dopo { display: none; }

/* cambio di stato avviato dallo scorrimento: il testo nuovo sale di 6 px (una volta, 220 ms) */
@keyframes s-come-funziona-scatta { from { transform: translate3d(0, 6px, 0); opacity: 0.35; } to { transform: none; opacity: 1; } }
.moto [data-vivo] [data-fx="scambia"].is-scatta { animation: s-come-funziona-scatta 220ms var(--ease-out) both; }

/* righe sbarrate dall'app: la riga si traccia con lo scorrimento */
[data-vivo] [data-fx="barra"] { position: relative; text-decoration: none; }
[data-vivo] [data-fx="barra"]::after {
  content: ""; position: absolute; left: 0; right: 0; top: 54%; height: 1px; background: currentColor;
  transform-origin: 0 50%; transform: scaleX(var(--u, 1));
}

/* =====================================================================
   1. intro: titolo, frase, pulsanti · scheda «Il tuo account» che si spunta scendendo
   ===================================================================== */
.s-come-funziona-intro { padding-block: clamp(3.5rem, 9vw, 8rem) clamp(3rem, 7vw, 6rem); }
.s-come-funziona-intro-in { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.s-come-funziona-intro .titolo-1 { max-width: 15em; -webkit-hyphens: manual; hyphens: manual; }
.s-come-funziona-intro-testo { display: grid; gap: clamp(1.25rem, 2.6vw, 1.75rem); align-content: start; min-width: 0; }
.s-come-funziona-intro .guida { max-width: 34em; }
.s-come-funziona-intro .azioni { margin-top: 0.25rem; }
@media (max-width: 29.99em) {
  .s-come-funziona-intro .azioni .pulsante { flex: 1 1 100%; min-height: 3rem; }
}

.s-come-funziona-avvio {
  width: 100%; max-width: 26rem; min-width: 0;
  font-family: var(--font-app); color: var(--ink);
  background: var(--bianco); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--ombra-carta); padding: 0.875rem 1.125rem 0.375rem;
}
.s-come-funziona-avvio-titolo {
  font-size: var(--t-xs); font-weight: 700; line-height: 1.4; color: var(--muted);
  padding-bottom: 0.625rem; border-bottom: 1px solid var(--line);
}
.s-come-funziona-avvio-righe li {
  --s-come-funziona-v: clamp(0, calc((var(--u, 1) - 0.2) * 1.25), 1);
  display: flex; align-items: center; gap: 0.75rem; min-height: 2.875rem; padding-block: 0.5rem;
  font-size: 0.9375rem; font-weight: 600; line-height: 1.35;
}
.s-come-funziona-avvio-righe li + li { border-top: 1px solid var(--line); }
.s-come-funziona-avvio-segno { position: relative; flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: #fff; }
.s-come-funziona-avvio-segno::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid var(--line-2); }
.s-come-funziona-avvio-segno::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--verde);
  transform: scale(var(--s-come-funziona-v)); opacity: var(--s-come-funziona-v);
}
.s-come-funziona-avvio-segno svg {
  position: relative; z-index: 1; width: 0.9375rem; height: 0.9375rem;
  fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20; stroke-dashoffset: calc(20 * (1 - var(--s-come-funziona-v)));
}
@media (min-width: 64em) {
  .s-come-funziona-intro-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-l); }
  .s-come-funziona-intro .titolo-1 { grid-column: 1 / -1; }
  .s-come-funziona-intro-testo { grid-column: 1 / span 7; }
  .s-come-funziona-avvio { grid-column: 9 / -1; align-self: end; max-width: none; }
}

/* =====================================================================
   2. viaggio: la lampada dal link all'ordine spedito (blocco notte)
      impilato (predefinito): tappe in colonna lungo la linea che si riempie
      .is-fisso (da 64 × 40 em, con JS e movimento): palco fermo, la rotella cambia tappa
   ===================================================================== */
.s-come-funziona-viaggio .testa { max-width: 44rem; }
.s-come-funziona-viaggio-giro { margin-top: clamp(1.75rem, 3.5vw, 3rem); }

/* --- linea del percorso (impilato) --- */
.s-come-funziona-viaggio-pannelli { position: relative; display: grid; }
.s-come-funziona-viaggio-binario {
  position: absolute; left: calc(1rem - 1px); width: 2px; pointer-events: none;
  top: var(--s-come-funziona-bin-top, 1.25rem); height: var(--s-come-funziona-bin-h, calc(100% - 3rem));
  border-radius: 2px; background: var(--line-d);
}
.s-come-funziona-viaggio-binario i {
  position: absolute; inset: 0; border-radius: inherit; background: var(--indaco-ch);
  transform-origin: 50% 0; transform: scaleY(var(--q, 1));
}
.s-come-funziona-viaggio-pannello {
  --pt: clamp(1.75rem, 3.5vw, 2.75rem);
  position: relative; display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: start; align-content: start; min-width: 0;
  padding: var(--pt) 0 0 3.25rem;
}
.s-come-funziona-viaggio-pannello:first-of-type { --pt: 0.25rem; }
@media (min-width: 56em) {
  .s-come-funziona-viaggio-pannello { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 5rem); }
}

.s-come-funziona-viaggio-testo { display: grid; gap: 1rem; align-content: start; min-width: 0; container: viaggio-testo / inline-size; }
.s-come-funziona-viaggio-testo .titolo-3 { display: flex; align-items: baseline; gap: 0.75rem; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); letter-spacing: -0.022em; }
.s-come-funziona-viaggio-k {
  display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: var(--r-xs);
  border: 1px solid var(--indaco); background: var(--indaco); color: #fff;
  font-size: var(--t-small); font-weight: 640; font-variant-numeric: tabular-nums; letter-spacing: 0;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.s-come-funziona-viaggio:not(.is-fisso) .s-come-funziona-viaggio-k { position: absolute; left: 0; top: var(--pt); z-index: 1; }
.s-come-funziona-viaggio.is-vivo:not(.is-fisso) .s-come-funziona-viaggio-pannello:not(.is-raggiunta) .s-come-funziona-viaggio-k {
  background: var(--notte); border-color: var(--line-d); color: var(--muted-d);
}
.s-come-funziona-viaggio .s-come-funziona-modo { font-size: var(--t-small); color: var(--muted-d); }
.s-come-funziona-viaggio .s-come-funziona-modo .s-come-funziona-segno { color: var(--indaco-ch); }
.s-come-funziona-viaggio-corsie { display: grid; gap: 1.25rem; margin-top: 0.25rem; }
@container viaggio-testo (min-width: 30rem) {
  .s-come-funziona-viaggio-corsie { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.5rem; }
}
.s-come-funziona-viaggio-corsia { display: grid; gap: 0.625rem; align-content: start; }
.s-come-funziona-viaggio-corsia h4 {
  font-size: var(--t-small); font-weight: 600; line-height: 1.3; color: var(--muted-d);
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--line-d);
}
.s-come-funziona-viaggio-corsia ul { display: grid; gap: 0.625rem; }
.s-come-funziona-viaggio-corsia li { font-size: var(--t-body); line-height: 1.5; color: var(--ink-d); }

/* --- tappe (solo nel palco fermo): numeri sul binario che si riempie con lo scorrimento --- */
.s-come-funziona-viaggio-tappe ol { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; }
.s-come-funziona-viaggio-tappe ol::before,
.s-come-funziona-viaggio-tappe ol::after {
  content: ""; position: absolute; top: calc(0.25rem + 1.125rem - 1px); height: 2px;
  left: calc(100% / 14); right: calc(100% / 14); border-radius: 2px; pointer-events: none;
}
.s-come-funziona-viaggio-tappe ol::before { background: var(--line-d); }
.s-come-funziona-viaggio-tappe ol::after { background: var(--indaco-ch); transform-origin: 0 50%; transform: scaleX(var(--avanza, 0)); }
.s-come-funziona-viaggio-tappa {
  position: relative; z-index: 1;
  display: grid; justify-items: center; align-content: start; gap: 0.5rem;
  min-height: 44px; min-width: 0; padding: 0.25rem 0.125rem 0.375rem;
  border-radius: var(--r-s); color: var(--muted-d); text-decoration: none;
  font-family: var(--font); font-size: var(--t-small); font-weight: 560; line-height: 1.25; text-align: center;
  -webkit-tap-highlight-color: transparent; transition: color var(--dur-fast) ease;
}
.s-come-funziona-viaggio-n {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-xs);
  border: 1px solid var(--line-d); background: var(--notte); color: var(--ink-d);
  font-size: 0.9375rem; font-weight: 640; font-variant-numeric: tabular-nums;
  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);
}
.s-come-funziona-viaggio-nome { max-width: 100%; overflow-wrap: anywhere; }
.s-come-funziona-viaggio-tappa.is-passata .s-come-funziona-viaggio-n { border-color: var(--indaco-ch); color: var(--indaco-ch); }
.s-come-funziona-viaggio-tappa[aria-current="step"] { color: var(--ink-d); }
.s-come-funziona-viaggio-tappa[aria-current="step"] .s-come-funziona-viaggio-n { background: var(--indaco); border-color: var(--indaco); color: #fff; }
.s-come-funziona-viaggio-tappa:active .s-come-funziona-viaggio-n { transform: scale(0.94); }
.s-come-funziona-viaggio-tappa:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .s-come-funziona-viaggio-tappa:hover { color: var(--ink-d); }
  .s-come-funziona-viaggio-tappa:hover .s-come-funziona-viaggio-n { border-color: var(--indaco-ch); }
}

/* --- palco fermo --- */
.s-come-funziona-viaggio.is-fisso .s-come-funziona-viaggio-giro {
  --s-come-funziona-fetta: min(52svh, 30rem);
  height: calc(100svh + 6 * var(--s-come-funziona-fetta));
}
.s-come-funziona-viaggio.is-fisso .s-come-funziona-viaggio-palco {
  position: sticky;
  top: calc(var(--testata-h) + max(0.75rem, (100svh - var(--testata-h) - var(--s-come-funziona-palco-alto, 36rem)) / 2));
}
.s-come-funziona-viaggio.is-fisso .s-come-funziona-viaggio-tappe { margin-bottom: clamp(1.5rem, 3.5svh, 2.5rem); }
.s-come-funziona-viaggio.is-fisso .s-come-funziona-viaggio-binario { display: none; }
.s-come-funziona-viaggio.is-fisso .s-come-funziona-viaggio-pannello { grid-area: 1 / 1; padding: 0; opacity: 0; pointer-events: none; }
.s-come-funziona-viaggio.is-fisso .s-come-funziona-viaggio-pannello.is-attivo { opacity: 1; pointer-events: auto; z-index: 1; }
.s-come-funziona-viaggio.is-fisso .s-come-funziona-viaggio-pannello.is-esce { z-index: 0; }
.s-come-funziona-viaggio.is-fisso .s-come-funziona-viaggio-k { transform: translateY(-0.15rem); }
.s-come-funziona-viaggio.is-fisso .s-come-funziona-viaggio-fin { min-height: 21.5rem; }

/* --- la finestra dell'app (Inter, notte su notte: superficie --sup) --- */
.s-come-funziona-viaggio-schermo { min-width: 0; }
.s-come-funziona-viaggio-fin {
  container: viaggio-fin / inline-size;
  display: flex; flex-direction: column;
  border-radius: var(--r-xl); background: var(--sup); border: 1px solid var(--line-d);
  box-shadow: 0 30px 80px -40px rgba(15, 16, 38, 0.7);
  overflow: hidden; font-family: var(--font-app); color: var(--ink-d); font-variant-numeric: tabular-nums;
}
.s-come-funziona-viaggio-fin svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.s-come-funziona-viaggio-fin-top {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
  background: var(--sup-2); border-bottom: 1px solid var(--line-d);
}
.s-come-funziona-viaggio-fin-titolo { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; margin-right: auto; }
.s-come-funziona-viaggio-fin-esempio { font-size: var(--t-min); font-weight: 600; color: var(--muted-d); white-space: nowrap; }
.s-come-funziona-viaggio-fin-corpo { flex: 1 1 auto; align-content: start; display: grid; gap: 1rem; padding: clamp(1rem, 2.4vw, 1.5rem) clamp(1rem, 2.4vw, 1.375rem); }
.s-come-funziona-viaggio-fin-piede {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  padding: 0.75rem 1rem; border-top: 1px solid var(--line-d);
  font-size: var(--t-min); line-height: 1.45; color: var(--muted-d);
}

/* riga del prodotto */
.s-come-funziona-viaggio-prodotto { display: flex; align-items: center; gap: 0.875rem; min-width: 0; }
.s-come-funziona-viaggio-thumb {
  flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 11px;
  background: var(--sup-3); color: var(--indaco-ch);
}
.s-come-funziona-viaggio-thumb svg { width: 1.625rem; height: 1.625rem; }
.s-come-funziona-viaggio-prodotto-t { display: grid; gap: 0.4rem; min-width: 0; }
.s-come-funziona-viaggio-prodotto-t b {
  font-weight: 800; font-size: 0.9375rem; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.s-come-funziona-viaggio-pillole { display: flex; flex-wrap: wrap; gap: 0.3rem; min-width: 0; min-height: 1.375rem; }

/* valori: ACQ, VEN, profitto, quantità */
.s-come-funziona-viaggio-valori { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@container viaggio-fin (min-width: 30rem) {
  .s-come-funziona-viaggio-valori { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); }
}
.s-come-funziona-viaggio-valori > div {
  display: grid; gap: 0.25rem; align-content: start; min-width: 0;
  padding: 0.625rem 0.75rem; border-radius: 10px; background: var(--notte); border: 1px solid var(--line-d);
}
.s-come-funziona-viaggio-valori dt { font-size: var(--t-min); font-weight: 700; color: var(--muted-d); }
.s-come-funziona-viaggio-valori dd { margin: 0; font-size: 0.9375rem; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-come-funziona-viaggio-valori s { display: table; font-size: var(--t-min); font-weight: 600; color: var(--muted-d); text-decoration-thickness: 1px; }
.s-come-funziona-viaggio-cambia { border-color: color-mix(in srgb, var(--indaco-ch) 45%, var(--line-d)) !important; }
.s-come-funziona-viaggio-nuovo { display: block; color: var(--indaco-ch); overflow: hidden; text-overflow: ellipsis; }
.s-come-funziona-viaggio-profitto dd { color: var(--lime); }
.s-come-funziona-viaggio-lungo { grid-column: span 2; }
@container viaggio-fin (min-width: 30rem) { .s-come-funziona-viaggio-lungo { grid-column: auto; } }

/* campo «Codici o URL dei prodotti» (tappa 1): il link si scrive con lo scorrimento */
.s-come-funziona-viaggio-campo { display: grid; gap: 0.5rem; }
.s-come-funziona-viaggio-campo-e { font-size: var(--t-min); font-weight: 700; color: var(--muted-d); }
.s-come-funziona-viaggio-campo-v {
  display: block; min-height: calc(2.8em + 1.5rem + 2px);
  padding: 0.75rem 0.875rem; border-radius: 10px; background: var(--notte); border: 1px solid var(--indaco);
  font-size: 0.875rem; line-height: 1.4; color: var(--ink-d); overflow-wrap: anywhere;
}
@media (min-width: 48em) { .s-come-funziona-viaggio-campo-v { min-height: calc(1.4em + 1.5rem + 2px); } }
.s-come-funziona-viaggio-campo-v .is-scrive::after {
  content: ""; display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -0.2em;
  background: var(--indaco-ch);
}
/* notifica «Nuovo ordine eBay» (tappa 6) */
.s-come-funziona-viaggio-notifica {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: 10px;
  background: color-mix(in srgb, var(--indaco) 22%, var(--sup)); font-size: 0.8125rem; color: var(--ink-d);
}
.s-come-funziona-viaggio-campana { display: grid; place-items: center; color: var(--indaco-ch); }
.s-come-funziona-viaggio-campana svg { width: 1.125rem; height: 1.125rem; }
.s-come-funziona-viaggio-avviso { color: var(--ambra); }
/* pulsante finto «Copia tutte le informazioni» (tappa 7): dentro un'immagine, non si clicca */
.s-come-funziona-viaggio-finto {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 2rem; padding: 0 0.75rem; border-radius: 10px;
  background: var(--indaco); color: #fff; font-weight: 800; font-size: var(--t-min); white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.s-come-funziona-viaggio-finto svg { width: 0.9375rem; height: 0.9375rem; flex: none; }
.s-come-funziona-viaggio-finto:not(.is-prima) { background: color-mix(in srgb, var(--lime) 14%, var(--sup)); color: var(--lime); }

/* pillole sul notte */
.s-come-funziona-viaggio .s-come-funziona-pill { background: var(--sup-2); color: var(--muted-d); }
.s-come-funziona-viaggio .s-come-funziona-pill--ok { background: color-mix(in srgb, var(--lime) 12%, var(--sup)); color: var(--lime); }
.s-come-funziona-viaggio .s-come-funziona-pill--avviso { background: color-mix(in srgb, var(--ambra) 13%, var(--sup)); color: var(--ambra); }
.s-come-funziona-viaggio .s-come-funziona-pill--brand { background: color-mix(in srgb, var(--indaco) 30%, var(--sup)); color: var(--indaco-ch); }
.s-come-funziona-viaggio .s-come-funziona-pill--piena { background: var(--indaco); color: #fff; }
.s-come-funziona-viaggio .s-come-funziona-pill.is-prima { background: var(--sup-2); color: var(--muted-d); }
.s-come-funziona-viaggio .s-come-funziona-pill--piena.is-prima { background: color-mix(in srgb, var(--ambra) 13%, var(--sup)); color: var(--ambra); }

.s-come-funziona-viaggio-nota { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.s-come-funziona-viaggio.is-fisso .s-come-funziona-viaggio-nota { margin-top: clamp(1rem, 2.2svh, 1.5rem); }

/* =====================================================================
   3. passi: tre binari (tu col 1-5 · numero col 6 · Qublo col 7-12)
   ===================================================================== */
.s-come-funziona-passi { --cf-gap: clamp(0.75rem, 1.6vw, 1.5rem); --cf-barra: 3rem; }
.s-come-funziona-passi-frase { font-size: var(--t-small) !important; }
.s-come-funziona-passi-corpo { margin-top: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--filetto); }

/* barra delle corsie: solo da 48 em (sotto le corsie sono in pila e gli h4 si vedono) */
.s-come-funziona-passi-barra { display: none; }
.s-come-funziona-passi-barra-n { line-height: 1.4; }
.s-come-funziona-passi-barra-k:not([hidden]) { display: inline-block; margin-left: 0.3em; height: 1.4em; overflow: hidden; vertical-align: top; }
.s-come-funziona-passi-barra-k > span { display: inline-block; font-variant-numeric: tabular-nums; font-weight: 640; color: var(--inchiostro); }
.s-come-funziona-passi-barra-riga { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.s-come-funziona-passi-barra-riga i { display: block; height: 100%; border-radius: 2px; background: var(--indaco); transform-origin: 0 50%; transform: scaleX(var(--q, 0)); }

.s-come-funziona-passo {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 1.5rem;
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--filetto);
  scroll-margin-top: calc(var(--testata-h) + 1rem);
}
.s-come-funziona-passo-n {
  grid-column: 1; grid-row: 1;
  font-size: 1.875rem; font-weight: 640; line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--inchiostro-2); padding-top: 0.0625rem;
}
.s-come-funziona-passo-testa { grid-column: 2; grid-row: 1; display: grid; gap: 0.5rem; max-width: 40rem; }
.s-come-funziona-passo-testa .titolo-3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.s-come-funziona-passo-testa p { color: var(--inchiostro-2); font-size: var(--t-body); line-height: 1.55; max-width: 34em; }
.s-come-funziona-corsia { grid-column: 1 / -1; display: grid; gap: 0.75rem; align-content: start; min-width: 0; }
@media (min-width: 30em) { .s-come-funziona-corsia { grid-column: 2; } }
.s-come-funziona-corsia h4 {
  font-size: var(--t-small); font-weight: 600; line-height: 1.3; color: var(--inchiostro-2);
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--filetto);
}
.s-come-funziona-corsia ul { display: grid; gap: 0.75rem; }
.s-come-funziona-corsia li { font-size: var(--t-body); line-height: 1.55; max-width: 36em; }

@media (min-width: 48em) {
  .s-come-funziona-passi-barra,
  .s-come-funziona-passo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cf-gap); }
  .s-come-funziona-passi-barra {
    display: grid; align-items: center;
    position: sticky; top: var(--testata-h); z-index: 6;
    height: var(--cf-barra); background: var(--fondo);
    border-bottom: 1px solid var(--filetto);
    font-size: var(--t-small); font-weight: 560; color: var(--inchiostro);
  }
  .s-come-funziona-passi-barra > :nth-child(1) { grid-column: 1 / span 5; }
  .s-come-funziona-passi-barra > :nth-child(2) { grid-column: 6; text-align: center; font-size: var(--t-xs); font-weight: 500; color: var(--inchiostro-2); white-space: nowrap; }
  .s-come-funziona-passi-barra > :nth-child(3) { grid-column: 7 / -1; }
  .s-come-funziona-passi-barra + .s-come-funziona-passo { border-top: 0; }

  .s-come-funziona-passo { row-gap: 1.5rem; scroll-margin-top: calc(var(--testata-h) + var(--cf-barra) + 1rem); }
  .s-come-funziona-passo-testa { grid-column: 1 / span 8; grid-row: 1; }
  .s-come-funziona-passo-n { grid-column: 6; grid-row: 2; justify-self: center; padding-top: 0; }
  .s-come-funziona-corsia--tu { grid-column: 1 / span 5; grid-row: 2; }
  .s-come-funziona-corsia--qublo { grid-column: 7 / -1; grid-row: 2; }
  /* gli h4 restano per i lettori di schermo: la barra li dice a vista */
  .s-come-funziona-corsia h4 {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; text-overflow: ellipsis;
  }
}
@media (min-width: 64em) { .s-come-funziona-passo-n { font-size: 3rem; } }
/* sopra il pannello del passo 6 (che sborda di --p6-pad) la barra si allarga quanto il pannello */
@media (min-width: 64em) {
  .s-come-funziona-passi-barra { box-shadow: calc(-1 * min(2.5vw, 2.5rem)) 0 0 var(--fondo), min(2.5vw, 2.5rem) 0 0 var(--fondo); }
}
@media (min-width: 48em) and (max-height: 31.25em) {
  .s-come-funziona-passi-barra { position: static; }
  .s-come-funziona-passo { scroll-margin-top: 1rem; }
}

/* ---------- passo 6: pannello scuro, il widget della panoramica ---------- */
.s-come-funziona-passi .s-come-funziona-p6 {
  --p6-pad: var(--gut-l);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  margin-inline: calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r));
  padding-inline: var(--gut-l) var(--gut-r);
  border-top: 0; border-radius: 0;
}
@media (min-width: 64em) {
  .s-come-funziona-passi .s-come-funziona-p6 {
    --p6-pad: min(2.5vw, 2.5rem);
    margin-inline: calc(-1 * var(--p6-pad));
    padding-inline: var(--p6-pad);
    border-radius: var(--r-l);
  }
}
.s-come-funziona-p6 + .s-come-funziona-passo { border-top: 0; }
.s-come-funziona-passi .s-come-funziona-p6 { background: var(--nebbia, #E4E6F6); }
.s-come-funziona-p6 .s-come-funziona-passo-testa .titolo-3 { color: inherit; }
.s-come-funziona-p6-cornice { margin-top: 1.25rem; }
@media (min-width: 48em) { .s-come-funziona-p6-cornice { margin-top: 2rem; } }
/* la corsia di Qublo segue la scena: si accende la voce del momento (solo colore, 180 ms) */
.s-come-funziona-p6 .s-come-funziona-corsia--qublo li { transition: color var(--dur-fast) ease; }
.s-come-funziona-p6:has(.wpn-notifiche.is-aperto) .s-come-funziona-corsia--qublo li:not([data-lega="ordini"]),
.s-come-funziona-p6:has([data-fase="ordini"]) .s-come-funziona-corsia--qublo li:not([data-lega="ordini"]),
.s-come-funziona-p6:has(.wpn-aggiorna.is-gira) .s-come-funziona-corsia--qublo li:not([data-lega="profitto"]),
.s-come-funziona-p6:has([data-fase="profitto"]) .s-come-funziona-corsia--qublo li:not([data-lega="profitto"]),
.s-come-funziona-p6:has([data-fase="riepilogo"]) .s-come-funziona-corsia--qublo li:not([data-lega="profitto"]) {
  color: var(--inchiostro-2);
}
.fermo .s-come-funziona-p6 .s-come-funziona-corsia--qublo li { color: var(--inchiostro) !important; }

/* ---------- ritagli: una riga dell'app, tema chiaro; cambiano stato quando passano ---------- */
.s-come-funziona-ritaglio { display: grid; gap: 0.5rem; margin-top: 1.25rem; min-width: 0; container: ritaglio / inline-size; }
@media (min-width: 48em) { .s-come-funziona-ritaglio { margin-top: 2rem; } }
.s-come-funziona-ritaglio .didascalia { justify-self: end; }
.s-come-funziona-ritaglio-in {
  font-family: var(--font-app); font-variant-numeric: tabular-nums; color: var(--ink);
  background: var(--bianco); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--ombra-carta); padding: 1rem 1.125rem; min-width: 0;
}
.s-come-funziona-ritaglio-in svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.s-come-funziona-ritaglio .s-come-funziona-pill.is-prima { background: var(--chiaro); color: var(--muted); }
.s-come-funziona-rit-tenue { color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }
.s-come-funziona-rit-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.s-come-funziona-rit-barra { margin-top: 0.875rem; height: 0.375rem; border-radius: 99px; background: var(--chiaro); overflow: hidden; }
.s-come-funziona-rit-barra i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--indaco); transform-origin: 0 50%; }
@media (max-width: 35.99em) { .s-come-funziona-ritaglio--p3 { display: none; } }

.s-come-funziona-rit-bozza { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.875rem; }
.s-come-funziona-rit-thumb { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--chiaro); color: var(--muted); }
.s-come-funziona-rit-thumb svg { width: 1.375rem; height: 1.375rem; }
.s-come-funziona-rit-bozza-t { display: grid; gap: 0.375rem; min-width: 0; }
.s-come-funziona-rit-bozza-t b { font-weight: 700; font-size: 0.875rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-come-funziona-rit-bozza-t > span { display: flex; min-height: 1.375rem; }
.s-come-funziona-rit-cifre { display: flex; gap: 1rem; text-align: right; }
.s-come-funziona-rit-cifre dt { font-size: var(--t-min); font-weight: 700; color: var(--muted); }
.s-come-funziona-rit-cifre dd { margin: 0; font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.s-come-funziona-rit-profitto dd { color: var(--verde); }
@container ritaglio (max-width: 30rem) { .s-come-funziona-rit-da-m { display: none; } }

.s-come-funziona-rit-cliente { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }
.s-come-funziona-rit-cliente-t { display: grid; gap: 0.25rem; min-width: 0; }
.s-come-funziona-rit-cliente-t b { font-weight: 700; font-size: 0.875rem; }
.s-come-funziona-rit-pulsante {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 2.25rem; padding: 0 0.875rem; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--indaco) 35%, #fff); color: var(--indaco-h);
  font-weight: 700; font-size: 0.8125rem; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.s-come-funziona-rit-pulsante:not(.is-prima) { border-color: color-mix(in srgb, var(--verde) 40%, #fff); background: color-mix(in srgb, var(--verde) 7%, #fff); color: var(--verde); }
.s-come-funziona-rit-pulsante svg { width: 1rem; height: 1rem; flex: none; }

/* =====================================================================
   4. divisione: la tabella onesta · le righe si tracciano, i segni si riempiono
   ===================================================================== */
.s-come-funziona-divisione-testa { display: grid; gap: clamp(1.5rem, 3vw, 2rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.s-come-funziona-divisione-testa .testa + * { margin-top: 0; }
@media (min-width: 64em) {
  .s-come-funziona-divisione-testa { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-l); align-items: end; }
  .s-come-funziona-divisione-testa .testa { grid-column: 1 / span 7; }
  .s-come-funziona-divisione-testa .s-come-funziona-legenda { grid-column: 8 / -1; }
}
.s-come-funziona-legenda { display: grid; gap: 0.625rem; font-size: var(--t-small); line-height: 1.45; color: var(--inchiostro-2); }
@media (min-width: 48em) and (max-width: 63.99em) {
  .s-come-funziona-legenda { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; }
}
.s-come-funziona-legenda > div { display: flex; align-items: baseline; gap: 0.625rem; }
.s-come-funziona-legenda dt { color: var(--inchiostro); transform: translateY(0.05rem); }
.s-come-funziona-legenda dd { margin: 0; }
.s-come-funziona-legenda strong { color: var(--inchiostro); font-weight: 640; }

.s-come-funziona-tabella table { font-size: var(--t-body); }
.s-come-funziona-tabella thead th:nth-child(1) { width: 28%; }
.s-come-funziona-tabella thead th:nth-child(2) { width: 15%; }
.s-come-funziona-tabella thead th:nth-child(3) { width: 15%; }
.s-come-funziona-tabella thead th:nth-child(4) { width: 42%; }
.s-come-funziona-tabella tbody th { font-weight: 560; }
.s-come-funziona-tabella td.s-come-funziona-chi { color: var(--inchiostro); }
.s-come-funziona-tabella .s-come-funziona-modo { color: var(--inchiostro); white-space: nowrap; }
.s-come-funziona-tabella td, .s-come-funziona-tabella th { padding-block: 1rem; }
@media (min-width: 64em) {
  .s-come-funziona-tabella thead th {
    position: sticky; top: var(--testata-h); z-index: 2;
    background: var(--fondo-2); padding-block: 0.875rem 0.75rem;
    box-shadow: inset 0 -1px 0 var(--filetto);
  }
  .s-come-funziona-tabella tbody tr:first-child > * { border-top: 0; }
}
@media (max-height: 31.25em) { .s-come-funziona-tabella thead th { position: static; } }

/* sotto 40 rem: righe impilate; «chi» a sinistra, «modo» a destra, niente etichette ripetute */
@container tabella (max-width: 40rem) {
  .s-come-funziona-tabella tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.25rem; padding-block: 1rem; }
  .s-come-funziona-tabella tbody th { grid-column: 1 / -1; font-size: 1rem; padding: 0 0 0.25rem; }
  .s-come-funziona-tabella td[data-etichetta] { display: block; padding: 0; }
  .s-come-funziona-tabella td[data-etichetta]::before { content: none; }
  .s-come-funziona-tabella td.s-come-funziona-chi { grid-column: 1; font-weight: 560; }
  .s-come-funziona-tabella td.s-come-funziona-tab-modo { grid-column: 2; justify-self: end; }
  .s-come-funziona-tabella td.s-come-funziona-come { grid-column: 1 / -1; color: var(--inchiostro-2); margin-top: 0.25rem; }
}
@container tabella (max-width: 18rem) {
  .s-come-funziona-tabella tr { grid-template-columns: minmax(0, 1fr); }
  .s-come-funziona-tabella td.s-come-funziona-tab-modo { grid-column: 1; justify-self: start; }
}

/* plotter: il filetto di ogni riga si traccia da sinistra mentre la riga sale; poi il segno si riempie */
.s-come-funziona-tabella tbody tr,
.s-come-funziona-legenda > div { --s-come-funziona-v: clamp(0, calc((var(--u, 1) - 0.5) * 2), 1); }
[data-vivo] .s-come-funziona-segno .pieno { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(var(--s-come-funziona-v, 1)); }
[data-vivo] .s-come-funziona-tabella tbody tr > * { border-top-color: transparent; }
[data-vivo] .s-come-funziona-tabella tbody th { position: relative; }
[data-vivo] .s-come-funziona-tabella tbody th::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; pointer-events: none;
  width: calc(var(--u, 1) * 100cqw); background: var(--filetto);
}
@container tabella (max-width: 40rem) {
  [data-vivo] .s-come-funziona-tabella tbody tr { position: relative; border-top-color: transparent; }
  [data-vivo] .s-come-funziona-tabella tbody th::before { content: none; }
  [data-vivo] .s-come-funziona-tabella tbody tr::before {
    content: ""; position: absolute; left: 0; top: -1px; height: 1px; pointer-events: none;
    width: calc(var(--u, 1) * 100%); background: var(--filetto);
  }
}

.s-come-funziona-divisione-nota { margin-top: 1.5rem; max-width: 40em; font-size: var(--t-body); font-weight: 560; color: var(--inchiostro); }

/* =====================================================================
   5. domande · 6. finale
   ===================================================================== */
@media (min-width: 56em) and (max-width: 63.99em) {
  .s-come-funziona-domande .griglia > * { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .s-come-funziona-domande-titolo { position: sticky; top: calc(var(--testata-h) + 2rem); align-self: start; }
}
@media (max-height: 31.25em) { .s-come-funziona-domande-titolo { position: static; } }
.s-come-funziona-domande .domanda { scroll-margin-top: calc(var(--testata-h) + 1rem); }
/* i filetti si tracciano scorrendo (sezione calma: niente altro si muove) */
.s-come-funziona-domande[data-vivo] .domanda { border-top-color: transparent; }
.s-come-funziona-domande[data-vivo] .domanda > summary { position: relative; }
.s-come-funziona-domande[data-vivo] .domanda > summary::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: var(--filetto); transform-origin: 0 50%; transform: scaleX(var(--u, 1));
}

.s-come-funziona-finale { overflow-x: clip; }
.s-come-funziona-finale-riga { display: block; }
.s-come-funziona-finale .finale-azioni { justify-items: stretch; }
@media (min-width: 56em) { .s-come-funziona-finale .finale-azioni { justify-items: end; } }
.finale.s-come-funziona-finale .pulsante.s-come-funziona-finale-secondario { background: var(--bianco); color: var(--ink); border-color: var(--line-2); }
@media (hover: hover) and (pointer: fine) {
  .finale.s-come-funziona-finale .pulsante.s-come-funziona-finale-secondario:hover { background: var(--bianco); border-color: var(--azione); color: var(--azione-hover); }
}
@media (max-width: 29.99em) { .s-come-funziona-finale .azioni .pulsante { flex: 1 1 100%; } }

/* =====================================================================
   stampa: tutto impilato e fermo
   ===================================================================== */
@media print {
  .s-come-funziona-viaggio-tappe, .s-come-funziona-passi-barra { display: none !important; }
  .s-come-funziona-viaggio .s-come-funziona-viaggio-giro { height: auto !important; }
  .s-come-funziona-viaggio .s-come-funziona-viaggio-palco { position: static !important; }
  .s-come-funziona-viaggio .s-come-funziona-viaggio-pannello { opacity: 1 !important; grid-area: auto !important; }
}

/* telefono e iPad: il viaggio impilato non ripete le corsie, che tornano nei Passi */
.s-come-funziona-viaggio:not(.is-fisso) .s-come-funziona-viaggio-corsie { display: none; }

/* ---- css/sezioni/contatti.css ---- */
/* =====================================================================
   Contatti · v2 «Pervinca, scorrimento controllato» (6 novembre 2026)
   Un solo indirizzo, composto come titolo. Movimento legato allo scorrimento
   (script in pagine/contatti.html): i filetti delle righe si tracciano,
   l'oggetto dell'email entra nel suo campo, i tre punti si spuntano,
   Assistenza → Nuovo ticket → ticket aperto, la luce del pannello finale.
   Lo stato finale è quello scritto qui: senza JS e con «riduci movimento»
   tutto è fermo, completo e leggibile. Solo token di zz-palette / sito.css.
   ===================================================================== */

/* ---------- segnaposto: tratteggio = da completare, come in tutto il sito ---------- */
.s-contatti-marca {
  display: inline-block;
  margin-right: 0.25em;
  padding: 0.0625rem 0.4375rem;
  border: 1px dashed var(--segnaposto);
  border-radius: 6px;
  color: var(--inchiostro-2);
  font-size: var(--t-xs);
  font-weight: 640;
  line-height: 1.5;
  letter-spacing: 0.02em;
  vertical-align: 0.08em;
  white-space: nowrap;
}

/* filetto che si traccia (righe di #argomenti e #dati): sopra il filetto fermo */
.s-contatti-filetto {
  position: absolute; left: 0; right: 0; top: -1px;
  height: 2px; border-radius: 2px;
  background: var(--pervinca);
  transform-origin: left center;
  pointer-events: none;
}

/* ---------- #scrivici: titolo, frase, indirizzo, due pulsanti, lingua ---------- */
.s-contatti-scrivici { padding-block: clamp(3rem, 1.5rem + 5.5vw, 7.5rem) clamp(3.5rem, 2rem + 4.5vw, 6.5rem); }
@media (max-height: 40em) and (min-width: 56em) {
  .s-contatti-scrivici { padding-block: 2.5rem 3rem; }
}
.s-contatti-scrivici-in { container: scrivici / inline-size; }
.s-contatti-scrivici-testa { display: grid; gap: var(--s-4); max-width: 44rem; }
.s-contatti-scrivici-testa .guida { max-width: 30em; }

.s-contatti-scrivici-email { margin-top: clamp(2.25rem, 1.25rem + 3.5vw, 4.25rem); }
.s-contatti-scrivici-email dd { margin: 0; }
.s-contatti-scrivici-email dt { text-overflow: ellipsis; }   /* solo lettori: non è testo tagliato */

/* l'indirizzo: la cosa memorabile della pagina, più grande del titolo */
.s-contatti-scrivici-indirizzo {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding-bottom: 0.12em;
  color: var(--inchiostro);
  font-size: clamp(1.375rem, 7.1cqi, 6rem);
  font-weight: 640;
  font-stretch: 100%;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-decoration: none;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: none; hyphens: none;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) ease;
}
.s-contatti-scrivici-parole { position: relative; z-index: 1; }
.s-contatti-scrivici-filetto {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: max(2px, 0.035em); border-radius: 2px;
  background: var(--pervinca);
  transform-origin: left center;
  transition: background-color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .s-contatti-scrivici-indirizzo:hover { color: var(--azione-hover); }
  .s-contatti-scrivici-indirizzo:hover .s-contatti-scrivici-filetto { background: var(--azione); }
}
.s-contatti-scrivici-indirizzo:focus-visible { outline-offset: 6px; border-radius: 10px; }

/* esito della copia: per 1 s l'indirizzo prende il colore della selezione */
.s-contatti-scrivici-indirizzo::after {
  content: ""; position: absolute; inset: -0.06em -0.12em 0.04em;
  border-radius: 10px;
  background: color-mix(in srgb, var(--azione) 18%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) ease;
}
.s-contatti-scrivici-indirizzo.is-copiato::after { opacity: 1; }

/* il gesto della pagina: il filetto si traccia una volta, dopo il caricamento */
@keyframes s-contatti-traccia { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.moto .s-contatti-scrivici-filetto { animation: s-contatti-traccia 900ms var(--ease-out) 250ms both; }

.s-contatti-scrivici-azioni { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
@media (max-width: 29.99em) {
  .s-contatti-scrivici-azioni { flex-direction: column; }
  .s-contatti-scrivici-azioni .pulsante { width: 100%; }
}
.s-contatti-scrivici-lingua {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem;
  margin-top: 1.25rem;
  font-size: var(--t-small); line-height: 1.5; color: var(--inchiostro-2);
}
.s-contatti-scrivici-lingua dt { font-weight: 600; color: var(--inchiostro); }
.s-contatti-scrivici-lingua dd { margin: 0; }

/* ---------- #argomenti: tre righe, non tre carte; l'oggetto già scritto ---------- */
.s-contatti-argomenti { padding-block: clamp(4rem, 2.5rem + 5vw, 8rem); }
.s-contatti-argomenti-testa { display: grid; gap: var(--s-4); align-content: start; }
.s-contatti-argomenti-testa .titolo-2 { max-width: 9em; }
.s-contatti-argomenti-testa .tenue { max-width: 22em; font-size: var(--t-body); line-height: 1.55; }
@media (max-width: 55.99em) { .s-contatti-argomenti-testa { margin-bottom: var(--s-6); } }
.s-contatti-argomenti-righe { border-bottom: 1px solid var(--filetto); }
.s-contatti-argomenti-riga {
  position: relative;
  display: grid; gap: var(--s-3) var(--gap-l);
  padding-block: 1.5rem 1.75rem;
  border-top: 1px solid var(--filetto);
  align-items: start;
}
@media (min-width: 40em) {
  .s-contatti-argomenti-riga { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding-block: 1.875rem 2.125rem; }
}
@media (min-width: 56em) {
  .s-contatti-argomenti-riga { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); }
}
.s-contatti-argomenti-riga .titolo-3 { max-width: 14em; }
.s-contatti-argomenti-corpo { display: grid; gap: var(--s-3); justify-items: start; min-width: 0; }
.s-contatti-argomenti-corpo > p:first-child { color: var(--inchiostro-2); max-width: 34em; }
.s-contatti-argomenti-corpo .link-azione { margin-block: -0.375rem -0.625rem; }

/* campo «Oggetto» come nell'email che si apre */
.s-contatti-oggetto {
  display: inline-flex; align-items: center; gap: 0.5rem;
  max-width: 100%; min-height: 2.375rem;
  padding: 0.375rem 0.75rem 0.375rem 0.625rem;
  border: 1px solid var(--filetto-2); border-radius: var(--r-s);
  background: var(--ctrl);
  font-size: var(--t-small); line-height: 1.35;
}
.s-contatti-oggetto-icona {
  width: 1.125rem; height: 1.125rem; flex: none;
  fill: none; stroke: var(--inchiostro-2); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.s-contatti-oggetto-etichetta { flex: none; color: var(--inchiostro-2); font-weight: 560; }
.s-contatti-oggetto-campo {
  min-width: 0; padding-left: 0.625rem;
  border-left: 1px solid var(--filetto-2);
  -webkit-clip-path: inset(-3px 0 -3px 0); clip-path: inset(-3px 0 -3px 0);   /* il valore entra da sinistra, dentro il campo */
}
.s-contatti-oggetto-valore { display: inline-block; color: var(--inchiostro); font-weight: 620; }

/* ---------- #consigli + #clienti ---------- */
.s-contatti-consigli { padding-block: clamp(4rem, 2.5rem + 5vw, 8rem); }
.s-contatti-consigli-griglia { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem) var(--gap-l); align-items: start; }
@media (min-width: 56em) {
  .s-contatti-consigli-griglia { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.s-contatti-consigli-testo { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); min-width: 0; }
.s-contatti-consigli-testo .titolo-2 { max-width: 11em; }
.s-contatti-consigli-elenco { display: grid; max-width: 34em; font-size: var(--t-lead); line-height: 1.5; }
.s-contatti-consigli-elenco li {
  display: grid; grid-template-columns: 1.875em minmax(0, 1fr); align-items: start;
  padding-block: 0.875rem;
  border-top: 1px solid var(--filetto);
}
.s-contatti-consigli-elenco li:last-child { border-bottom: 1px solid var(--filetto); }

/* segno del punto: il trattino diventa una spunta mentre leggi (stato finale: spunta) */
.s-contatti-segno { position: relative; display: block; width: 1.25em; height: 1.5em; }
.s-contatti-segno-trattino {
  position: absolute; left: 0.15em; top: 50%;
  width: 0.6em; height: 2px; margin-top: -1px; border-radius: 2px;
  background: var(--inchiostro-2);
  transform-origin: right center; transform: scaleX(0);
}
.s-contatti-segno-spunta {
  position: absolute; left: 0; top: 50%;
  width: 1.125em; height: 1.125em; margin-top: -0.5625em;
  fill: none; stroke: var(--azione); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* il riquadro dei clienti: l'unica carta della pagina */
.s-contatti-clienti {
  display: grid; gap: var(--s-4); align-content: start; min-width: 0;
  padding: clamp(1.25rem, 0.75rem + 2vw, 2rem);
  border-radius: clamp(16px, 1.6vw, 22px);
  background: var(--bianco);
  border: 1px solid var(--filetto);
  box-shadow: var(--ombra-carta);
  scroll-margin-top: calc(var(--testata-h) + 1.5rem);
}
@media (min-width: 56em) { .s-contatti-clienti { margin-top: 0.375rem; } }
.s-contatti-clienti > p { color: var(--inchiostro-2); line-height: 1.6; }

/* schermata ricostruita: tema chiaro dell'app (token di app-ui.css) */
.s-contatti-app { display: grid; gap: var(--s-2); margin-top: var(--s-1); min-width: 0; }
.s-contatti-app-qa {
  border: 1px solid var(--qa-cornice);
  border-radius: 14px;
  background: var(--q-bg);
  -webkit-clip-path: inset(0 round 14px); clip-path: inset(0 round 14px);
}
.s-contatti-app-in { display: grid; gap: 0.75em; padding: 0.875em; }
.s-contatti-app-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6em; }
.s-contatti-app-voce { display: inline-grid; min-width: 0; }
.s-contatti-app-voce-t {
  grid-area: 1 / 1;
  display: inline-flex; align-items: center; gap: 0.7em;
  height: 2.75em; padding: 0 1em 0 0.8em;
  border-radius: 10px;
  color: var(--q-ink); font-weight: 600; white-space: nowrap;
}
.s-contatti-app-voce-t .qa-ico { width: 1.3em; height: 1.3em; }
.s-contatti-app-voce-attiva { background: var(--q-brand); color: var(--q-on-brand); }
.s-contatti-app-nuovo { position: relative; }
.s-contatti-app-nuovo::after {
  content: ""; position: absolute; inset: -4px; border-radius: 13px;
  border: 2px solid var(--q-brand);
  opacity: calc(var(--anello, 0) * 0.45); pointer-events: none;
}
.s-contatti-app-ticket {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.7em;
  padding: 0.8em 1em;
  border-radius: 11px;
  background: var(--q-surface);
  border: 1px solid var(--q-line);
  box-shadow: var(--q-shadow-sm);
}
.s-contatti-app-numero { font-size: var(--qa-t-s); font-weight: 800; color: var(--q-ink); letter-spacing: 0.01em; }
.s-contatti-app-categoria { flex-basis: 100%; font-size: var(--qa-t-s); font-weight: 560; color: var(--q-muted); }
.s-contatti-app-nota { margin: 0; }

/* ---------- #dati: dati societari da completare ---------- */
.s-contatti-dati-titolo { max-width: 9em; align-self: start; }
@media (max-width: 55.99em) { .s-contatti-dati-titolo { margin-bottom: var(--s-4); } }
.s-contatti-dati-elenco { margin: 0; border-bottom: 1px solid var(--filetto); }
.s-contatti-dati-riga {
  position: relative;
  display: grid; gap: 0.25rem var(--gap-l); align-items: baseline;
  padding-block: 1.125rem;
  border-top: 1px solid var(--filetto);
}
@media (min-width: 40em) { .s-contatti-dati-riga { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (min-width: 56em) { .s-contatti-dati-riga { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); } }
.s-contatti-dati-riga dt { font-weight: 620; }
.s-contatti-dati-riga dd { margin: 0; color: var(--inchiostro-2); }

/* ---------- #finale: pannello indaco #3F3FB8 nel contenitore; la luce scende ---------- */
.s-contatti-finale { padding-top: var(--sezione-alto); }
.s-contatti-finale-in { position: relative; isolation: isolate; border-radius: clamp(20px, 2.4vw, 32px); }
.s-contatti-finale-in .titolo-2 { max-width: 13em; }
.moto .s-contatti-finale .s-contatti-finale-in { background: transparent; }
.moto .s-contatti-finale-in::before {
  --luce: inherit;
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: var(--nebbia);
  opacity: var(--luce, 1);
}
@media (max-width: 29.99em) { .s-contatti-finale .pulsante { width: 100%; } }

/* ---------- stampa ---------- */
@media print {
  .s-contatti-scrivici-azioni, .s-contatti-finale, .s-contatti-app { display: none !important; }
  .s-contatti-scrivici-filetto { animation: none !important; transform: none !important; }
  .s-contatti-filetto { display: none !important; }
}

/* ---- css/sezioni/estensione.css ---- */
/* =====================================================================
   Qublo · pagina Estensione (estensione.html / extension.html) · v2, 6 novembre 2026
   Schema: contenuti/impaginazione/estensione.md · sistema: contenuti/SISTEMA.md
   Ogni classe nuova inizia con .s-estensione-. Colori solo dai token (sito.css + zz-palette.css).
   Ritmo: intro lavanda · cosa_fa notte · installazione e permessi lavanda piena · requisiti
   pannello bianco · domande · finale pannello indaco.
   Movimento (sezione-estensione.js): ogni valore animato arriva da una variabile o da uno stile
   in linea scritto dallo scorrimento. Il valore di base qui sotto è lo STATO FINALE, quello che
   si vede senza JS, con «riduci movimento» e con «risparmio dati».
   ===================================================================== */

/* ---------- componente comune: righe dei file da scaricare ---------- */
.s-estensione-file {
  display: grid;
  background: var(--bianco);
  border: 1px solid var(--filetto-2);
  border-radius: var(--r-l);
  box-shadow: var(--ombra-carta);
}
.s-estensione-file > li + li { border-top: 1px solid var(--filetto); }
.s-estensione-file > li:first-child > .s-estensione-file-riga { border-top-left-radius: calc(var(--r-l) - 1px); border-top-right-radius: calc(var(--r-l) - 1px); }
.s-estensione-file > li:last-child > .s-estensione-file-riga { border-bottom-left-radius: calc(var(--r-l) - 1px); border-bottom-right-radius: calc(var(--r-l) - 1px); }
.s-estensione-file-riga {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.875rem 1rem;
  min-height: 4.5rem;
  padding: 0.875rem 1.125rem 0.875rem 0.875rem;
  color: var(--inchiostro);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.s-estensione-file-riga:focus-visible { outline-offset: -3px; }
.s-estensione-file-riga:active { transform: scale(0.985); }
.s-estensione-file-ico {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--indaco) 9%, var(--bianco));
  color: var(--indaco-h);
}
.s-estensione-file-ico .icona { width: 1.375rem; height: 1.375rem; stroke-width: 1.8; }
.s-estensione-file-testo { display: grid; gap: 0.125rem; min-width: 0; }
.s-estensione-file-testo strong { font-size: 1.0625rem; font-weight: 640; line-height: 1.3; letter-spacing: -0.01em; }
.s-estensione-file-testo span { font-size: var(--t-small); line-height: 1.4; color: var(--inchiostro-2); overflow-wrap: anywhere; }
.s-estensione-file-giu {
  width: 1.375rem; height: 1.375rem; color: var(--azione); stroke-width: 2;
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .s-estensione-file-riga:hover { background: color-mix(in srgb, var(--indaco) 5%, var(--bianco)); }
  .s-estensione-file-riga:hover .s-estensione-file-giu { transform: translateY(2px); }
  .s-estensione-file-riga:hover strong { color: var(--azione-hover); }
}
/* sulla lavanda piena il pannello resta una carta bianca, senza ombra */
.sezione--bianca .s-estensione-file { box-shadow: none; }

/* codice in riga (indirizzi del browser, nomi dei permessi) */
.s-estensione-inst-testo code,
.s-estensione-perm-chip,
.s-estensione-perm-codice {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-ligatures: none;
}

/* ---------- 1. intro ---------- */
.s-estensione-intro { padding-block: clamp(2.5rem, 1.5rem + 4vw, 6rem) clamp(3rem, 2rem + 3vw, 4.5rem); }
.s-estensione-intro-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}
.s-estensione-intro-titolo { max-width: 14em; }
.s-estensione-intro-guida { max-width: 30em; }
.s-estensione-intro-rass { font-size: var(--t-body); gap: 0.625rem; }
.s-estensione-intro-scarica { display: grid; gap: var(--s-4); max-width: 34rem; margin-top: var(--s-2); }
.s-estensione-intro-piano { font-size: var(--t-small); line-height: 1.5; color: var(--inchiostro-2); }
.s-estensione-intro-piano a { color: var(--azione); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.s-estensione-intro-piano a:hover { color: var(--azione-hover); text-decoration-thickness: 2px; }

/* il pulsante vero dell'estensione, da vicino: «Importa variante» → «Importazione…» → «✓ Importato…».
   Lo scorrimento muove la pila delle tre etichette; qui la pila sta sull'ultima (stato finale). */
.s-estensione-prova { display: grid; gap: 0.625rem; width: 100%; max-width: 23rem; margin: 0; }
.s-estensione-prova-carta {
  padding: clamp(0.75rem, 0.5rem + 1vw, 1.125rem);
  background: var(--bianco);
  border: 1px solid var(--filetto);
  border-radius: var(--r-l);
  box-shadow: var(--ombra-rilievo);
}
.s-estensione-prova-in { display: grid; gap: 0.625rem; font-family: var(--font-app); font-size: 0.875rem; line-height: 1.25; }
.s-estensione-prova-qta {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  min-height: 2.25rem; padding: 0.375rem 0.75rem;
  border: 1px solid var(--filetto-2); border-radius: var(--r-s);
  background: var(--ctrl); color: var(--inchiostro);
}
.s-estensione-prova-qta svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-estensione-prova-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: flex-start; gap: 0.625rem;
  min-height: 2.5rem; padding: 0.5rem 0.875rem;
  border-radius: var(--r-s);
  background: var(--azione); color: var(--bianco);
  font-weight: 650;
}
.s-estensione-prova-q { flex: none; font-size: 1.125rem; font-weight: 800; line-height: 1; }
.s-estensione-prova-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-estensione-prova-btn--variante[data-stato="pending"] { background: var(--indaco-h); }
.s-estensione-prova-ok {
  position: absolute; inset: 0; z-index: -1;
  background: var(--verde);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.s-estensione-prova-btn--variante[data-stato="imported"] .s-estensione-prova-ok { opacity: 1; }
.s-estensione-prova-finestra { display: block; min-width: 0; height: 1.25rem; overflow: clip; text-overflow: ellipsis; }
.s-estensione-prova-pila { display: grid; transform: translateY(-2.5rem); }
.s-estensione-prova-pila > span { display: block; height: 1.25rem; line-height: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-estensione-prova-carrello {
  display: flex; align-items: center; justify-content: center;
  min-height: 2.5rem; padding: 0.5rem 0.75rem;
  border-radius: var(--r-pieno);
  background: var(--inchiostro); color: var(--bianco);
  font-weight: 600;
}
.s-estensione-prova-nota { font-size: var(--t-xs); line-height: 1.45; color: var(--inchiostro-2); }

/* tablet: titolo largo; sotto rassicurazioni | pulsante, poi i file */
@media (min-width: 48em) and (max-width: 63.99em) {
  .s-estensione-intro-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-l); }
  .s-estensione-intro-titolo, .s-estensione-intro-guida { grid-column: 1 / -1; }
  .s-estensione-intro-rass { grid-column: 1; grid-row: 3; align-self: center; }
  .s-estensione-prova { grid-column: 2; grid-row: 3; justify-self: end; }
  .s-estensione-intro-scarica { grid-column: 1 / -1; grid-row: 4; }
}
/* computer: testo a sinistra; a destra una colonna sola, allineata: il pulsante accanto al titolo,
   sotto i due file */
@media (min-width: 64em) {
  .s-estensione-intro-griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-l); row-gap: var(--s-6); }
  .s-estensione-intro-griglia { grid-template-rows: auto auto 1fr; }
  .s-estensione-intro-titolo { grid-column: 1 / span 7; grid-row: 1; }
  .s-estensione-prova { grid-column: 8 / -1; grid-row: 1 / span 2; align-self: start; max-width: none; margin-top: 0.5rem; }
  .s-estensione-intro-guida { grid-column: 1 / span 6; grid-row: 2; }
  .s-estensione-intro-rass { grid-column: 1 / span 6; grid-row: 3; }
  .s-estensione-intro-scarica { grid-column: 8 / -1; grid-row: 3; margin-top: 0; max-width: none; }
}
@media (min-width: 80em) {
  .s-estensione-intro-titolo { grid-column: 1 / span 8; }
  .s-estensione-prova, .s-estensione-intro-scarica { grid-column: 9 / -1; }
  .s-estensione-intro-guida, .s-estensione-intro-rass { grid-column: 1 / span 7; }
}

/* ---------- 2. cosa_fa (notte, widget al bordo destro da 80 em) ---------- */
.s-estensione-cosa-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.s-estensione-cosa-titolo { max-width: 14em; }
.s-estensione-cosa-frase { max-width: 32em; }
.s-estensione-cosa-cornice { margin-top: var(--s-2); }
@media (min-width: 64em) {
  .s-estensione-cosa-griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-l); align-items: end; }
  .s-estensione-cosa-titolo { grid-column: 1 / span 6; grid-row: 1; }
  .s-estensione-cosa-frase { grid-column: 7 / span 5; grid-row: 1; }
  .s-estensione-cosa-cornice, .s-estensione-cosa-punti { grid-column: 1 / -1; }
  .s-estensione-cosa-cornice { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
}
/* da 80 em: titolo e frase a sinistra (colonne 1-4), schermata dalla colonna 5 fino al bordo */
@media (min-width: 80em) {
  .s-estensione-cosa-griglia { grid-template-rows: auto auto 1fr auto; align-items: start; row-gap: var(--s-5); }
  .s-estensione-cosa-titolo { grid-column: 1 / span 4; grid-row: 1; max-width: none; font-size: min(var(--t-h2), 2.6vw, 2.75rem); }
  .s-estensione-cosa-frase { grid-column: 1 / span 4; grid-row: 2; }
  .s-estensione-cosa-cornice { grid-column: 5 / -1; grid-row: 1 / span 3; margin-top: 0; }
  .s-estensione-cosa-punti { grid-row: 4; }
}
.s-estensione-cosa-punti { container: estensione-punti / inline-size; margin-top: clamp(2rem, 4vw, 3.5rem); min-width: 0; }
.s-estensione-cosa-lista { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap); }
.s-estensione-cosa-lista > li {
  position: relative;
  display: grid; gap: 0.5rem; align-content: start;
  padding-block: 1.125rem 1.5rem;
  border-top: 1px solid var(--filetto);
}
/* filetto pervinca tracciato dallo scorrimento (plotter): --s-estensione-f da 0 a 1 */
.s-estensione-cosa-lista > li::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--pervinca);
  transform: scaleX(var(--s-estensione-f, 1)); transform-origin: 0 50%;
  pointer-events: none;
}
.s-estensione-cosa-lista h3 { font-size: 1.0625rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.012em; color: var(--inchiostro); }
.s-estensione-cosa-lista p { font-size: var(--t-small); line-height: 1.55; color: var(--inchiostro-2); max-width: 34em; }
@container estensione-punti (min-width: 32rem) {
  .s-estensione-cosa-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container estensione-punti (min-width: 60rem) {
  .s-estensione-cosa-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--s-4); }
}

/* ---------- 3. installazione: tre passi veri (guida § 1-5) con il binario che si riempie ---------- */
.s-estensione-inst .griglia { row-gap: var(--s-10); align-items: start; }
.s-estensione-inst-testa { gap: var(--s-5); }
.s-estensione-inst-testa .guida { max-width: 30em; }
.s-estensione-inst-file { margin-top: var(--s-2); max-width: 32rem; }
.s-estensione-inst-destra { display: grid; gap: var(--s-10); align-content: start; min-width: 0; }
.s-estensione-inst-passi { display: grid; }
.s-estensione-inst-passo {
  position: relative;
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1.125rem;
  padding-bottom: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}
.s-estensione-inst-passo:last-child { padding-bottom: 0; }
/* binario tra un numero e il successivo: base tenue e riempimento che segue lo scorrimento */
.s-estensione-inst-passo:not(:last-child)::before,
.s-estensione-inst-passo:not(:last-child)::after {
  content: ""; position: absolute;
  left: calc(1.375rem - 1px); top: 3.25rem; bottom: 0.5rem; width: 2px; border-radius: 2px;
  pointer-events: none;
}
.s-estensione-inst-passo:not(:last-child)::before { background: var(--filetto); }
.s-estensione-inst-passo:not(:last-child)::after {
  background: var(--azione);
  transform: scaleY(var(--s-estensione-s, 1)); transform-origin: 50% 0;
}
.s-estensione-inst-n {
  position: relative;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1.5px solid var(--filetto-2); border-radius: 50%;
  background: var(--bianco); color: var(--azione-hover);
  font-size: 1.0625rem; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums;
}
/* il numero si colora dall'alto quando il binario ci arriva: --s-estensione-b da 0 a 1 */
.s-estensione-inst-n-pieno {
  position: absolute; inset: -1.5px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--azione); color: var(--bianco);
  clip-path: inset(-2px -2px calc((1 - var(--s-estensione-b, 1)) * (100% + 4px) - 2px) -2px);
}
.s-estensione-inst-testo { display: grid; gap: 0.5rem; padding-top: 0.5rem; min-width: 0; }
.s-estensione-inst-testo p { color: var(--inchiostro-2); max-width: 34em; }
.s-estensione-inst-testo code {
  padding: 0.05em 0.35em;
  border: 1px solid var(--filetto); border-radius: 6px;
  background: var(--bianco); color: var(--inchiostro);
  font-size: 0.875em;
  overflow-wrap: anywhere;
}
.s-estensione-inst-agg { display: grid; gap: var(--s-3); padding-top: var(--s-6); border-top: 1px solid var(--filetto); }
.s-estensione-inst-agg p { color: var(--inchiostro-2); max-width: 34em; }
@media (min-width: 56em) {
  .s-estensione-inst-testa { grid-column: 1 / span 5; }
  .s-estensione-inst-destra { grid-column: 7 / -1; padding-top: 0.5rem; }
}

/* ---------- 4. permessi: privacy, il manifest vero e i cinque permessi ---------- */
.s-estensione-perm-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.s-estensione-perm-corpo { display: grid; gap: var(--s-4); min-width: 0; }
.s-estensione-perm-frase {
  font-size: clamp(1.25rem, 1.02rem + 1.15vw, 2.125rem);
  font-weight: 480; line-height: 1.32; letter-spacing: -0.02em;
  color: var(--inchiostro);
  max-width: 25em;
}
.s-estensione-perm-guida { max-width: 32em; }
.s-estensione-perm-codice {
  position: relative; overflow: hidden;
  width: 100%; max-width: 30rem;
  margin-top: var(--s-4);
  background: var(--notte); color: var(--ink-d);
  border: 1px solid var(--bordo-p); border-radius: var(--r-l);
  box-shadow: var(--ombra-finestra);
  font-size: 0.9375rem; line-height: 1.75rem;
}
.s-estensione-perm-barra {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 2.5rem; padding: 0.5rem 1rem;
  background: var(--sup); border-bottom: 1px solid var(--line-d);
  font-family: var(--font-app); font-size: 0.8125rem; color: var(--muted-d);
}
.s-estensione-perm-punti { display: inline-flex; gap: 6px; }
.s-estensione-perm-punti i { width: 8px; height: 8px; border-radius: 50%; background: var(--chk); }
.s-estensione-perm-righe { position: relative; display: grid; padding-block: 0.875rem; }
.s-estensione-perm-r { position: relative; z-index: 1; display: block; padding-inline: 1.25rem; white-space: pre; color: var(--muted-d); }
.s-estensione-perm-r b { font-weight: 500; color: var(--indaco-ch); }
/* la riga accesa: esiste solo con il movimento (la accende lo script) */
.s-estensione-perm-luce {
  display: none;
  position: absolute; left: 0; right: 0; top: 0; height: 1.75rem;
  background: var(--sup-2);
  box-shadow: inset 3px 0 0 var(--pervinca);
  pointer-events: none;
}
.moto .s-estensione-perm.is-scorre .s-estensione-perm-luce { display: block; }
.s-estensione-perm-lista { display: grid; border-bottom: 1px solid var(--filetto); min-width: 0; }
.s-estensione-perm-lista > li {
  position: relative;
  display: grid; gap: 0.375rem; justify-items: start;
  padding: 1.125rem 0 1.25rem 1.25rem;
  border-top: 1px solid var(--filetto);
}
/* da 40 em la lista è una scheda tecnica: il nome del permesso a sinistra, la spiegazione a destra */
@media (min-width: 40em) {
  .s-estensione-perm-lista > li { grid-template-columns: 10rem minmax(0, 1fr); column-gap: var(--s-6); row-gap: 0.375rem; align-items: baseline; }
  .s-estensione-perm-chip { grid-column: 1; grid-row: 1; }
  .s-estensione-perm-lista > li > h3, .s-estensione-perm-lista > li > p { grid-column: 2; }
  .s-estensione-perm-lista .titolo-3 { font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); }
}
.s-estensione-perm-lista > li::before {
  content: ""; position: absolute; left: 0; top: 1.125rem; bottom: 1.25rem; width: 3px; border-radius: 3px;
  background: var(--azione);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.s-estensione-perm-lista > li.is-attiva::before { transform: none; }
.s-estensione-perm-lista p { color: var(--inchiostro-2); max-width: 34em; }
.s-estensione-perm-chip {
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--filetto); border-radius: var(--r-xs);
  background: var(--bianco); color: var(--inchiostro);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.4;
}
.s-estensione-perm-lista > li.is-attiva .s-estensione-perm-chip { background: var(--azione); border-color: var(--azione); color: var(--bianco); }
.s-estensione-perm-nota {
  display: grid; gap: 0.375rem;
  padding-top: var(--s-5);
  max-width: 34rem;
}
.s-estensione-perm-nota h3 { font-size: 1.0625rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.012em; }
.s-estensione-perm-nota p { color: var(--inchiostro-2); }
.s-estensione-perm-nota a { color: var(--azione); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.s-estensione-perm-nota a:hover { color: var(--azione-hover); text-decoration-thickness: 2px; }
@media (min-width: 56em) {
  .s-estensione-perm-griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--gap-l); row-gap: var(--s-5); }
  .s-estensione-perm-titolo { grid-column: 1 / span 3; grid-row: 1; padding-top: 0.125rem; }
  .s-estensione-perm-corpo { grid-column: 4 / -1; grid-row: 1; }
  .s-estensione-perm-codice { grid-column: 1 / span 5; grid-row: 2; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
  .s-estensione-perm-lista { grid-column: 6 / -1; grid-row: 2 / span 2; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
  .s-estensione-perm-nota { grid-column: 1 / span 5; grid-row: 3; padding-top: var(--s-8); }
}
@media (min-width: 80em) {
  .s-estensione-perm-codice, .s-estensione-perm-nota { grid-column: 1 / span 4; }
  .s-estensione-perm-lista { grid-column: 6 / -1; }
}

/* ---------- 5. requisiti: pannello bianco, le spunte si segnano una alla volta ---------- */
.s-estensione-req { padding-block: var(--sezione-servizio); }
.s-estensione-req-pannello {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  padding: clamp(1.25rem, 0.5rem + 4vw, 4rem);
  background: var(--bianco);
  border: 1px solid var(--filetto);
  border-radius: var(--r-xl);
}
.s-estensione-req-testa .tenue { max-width: 30em; }
.s-estensione-req-punti { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap-l); border-bottom: 1px solid var(--filetto); }
.s-estensione-req-punti > li {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding-block: 1rem;
  border-top: 1px solid var(--filetto);
  line-height: 1.5;
}
.s-estensione-req-spunta {
  position: relative; flex: none;
  width: 1.5rem; height: 1.5rem; margin-top: 0.0625rem;
  border: 1.5px solid var(--filetto-2); border-radius: 50%;
}
/* la spunta si segna da sinistra: --s-estensione-t da 0 a 1 */
.s-estensione-req-pieno {
  position: absolute; inset: -1.5px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--azione);
  clip-path: inset(-2px calc((1 - var(--s-estensione-t, 1)) * (100% + 4px) - 2px) -2px -2px);
}
.s-estensione-req-pieno svg { width: 1rem; height: 1rem; fill: none; stroke: var(--bianco); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.s-estensione-req-note { display: grid; gap: 0.5rem; }
.s-estensione-req-nota, .s-estensione-req-alt { font-size: var(--t-small); line-height: 1.5; color: var(--inchiostro-2); max-width: 44em; }
.s-estensione-req-alt a { color: var(--azione); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.s-estensione-req-alt a:hover { color: var(--azione-hover); text-decoration-thickness: 2px; }
@media (min-width: 40em) {
  .s-estensione-req-punti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-estensione-req-punti > li { padding-block: 1.125rem 1.25rem; }
}
@media (min-width: 64em) {
  .s-estensione-req-pannello { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-l); row-gap: var(--s-5); }
  .s-estensione-req-testa { grid-column: 1 / span 4; grid-row: 1 / span 2; }
  .s-estensione-req-punti, .s-estensione-req-note { grid-column: 5 / -1; }
}

/* ---------- 6. domande: i filetti si tracciano scorrendo (solo con il movimento) ---------- */
.s-estensione-dom { padding-bottom: var(--sezione-basso); }
.s-estensione-dom .titolo-servizio { max-width: 12em; }
.moto .s-estensione-dom .domanda { position: relative; border-top-color: transparent; }
.moto .s-estensione-dom .domanda::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--filetto);
  transform: scaleX(var(--s-estensione-f, 1)); transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- 7. finale: pannello indaco, le due righe del titolo vanno a registro ---------- */
.s-estensione-fin { padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
.s-estensione-fin .finale-in { align-items: end; overflow: clip; }
.s-estensione-fin .titolo-2 { max-width: 14em; }
.s-estensione-fin-r { display: block; width: fit-content; max-width: 100%; }
.s-estensione-fin .finale-testo a { color: var(--bianco); font-weight: 640; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.s-estensione-fin .finale-testo a:hover { text-decoration-thickness: 2px; }
@media (max-width: 29.99em) {
  .s-estensione-fin .finale-azioni { justify-items: stretch; }
  .s-estensione-fin .pulsante { width: 100%; }
}

/* telefono: dentro il palco notte la finestra arriva al bordo del palco (rientrato di 6 px), non dello schermo */
@media (max-width: 47.99em) { .sezione--notte .s-estensione-cosa-cornice > .cornice-schermo { margin-left: calc(0.375rem - var(--gut-l)); margin-right: calc(0.375rem - var(--gut-r)); } }

/* passi senza numeri: la guida PDF ne conta 5, qui sono 3 blocchi. Un'icona per passo, stessa riempitura col binario */
.s-estensione-inst-n svg { width: 1.25rem; height: 1.25rem; display: block; }
.s-estensione-inst-n-base { display: grid; place-items: center; }

/* ---- css/sezioni/funzionalita.css ---- */
/* =====================================================================
   Funzionalità · un registro che si sfoglia (impaginazione/funzionalita.md, direzione M3)
   - indice fisso a sinistra da 80 em; sotto, barra orizzontale ferma sotto l'intestazione
   - lastre (chiara e notte) che partono dalla colonna del contenuto e arrivano al bordo destro
   - girano intere solo «monitoraggio» (con la legenda che si accende) e «messaggi»;
     gli altri widget sono ritagli fermi dello stato finale (solo CSS, nessuno script)
   Classi nuove: tutte sotto .s-funzionalita.
   ===================================================================== */

:root:has(.s-funzionalita) { scrollbar-gutter: stable; --sopra-fermo: calc(var(--testata-h) + 4rem); }
@media (min-width: 80em), (max-height: 31.25em) {
  :root:has(.s-funzionalita) { --sopra-fermo: calc(var(--testata-h) + 1rem); }
}

.s-funzionalita {
  --fz-indice: 11rem;
  --fz-spazio: 3.5rem;
  --fz-gap: 1.5rem;
  --fz-lastra-r: 24px;
  --fz-barra: 3rem;
  container-type: inline-size;
  overflow-x: clip;
  background: var(--fondo);
  color: var(--inchiostro);
}
.s-funzionalita-telaio { position: relative; }

/* ---------- pezzi ripetuti ---------- */
.s-funzionalita-h1 { max-width: 15em; -webkit-hyphens: manual; hyphens: manual; }
.s-funzionalita-guida { margin-top: var(--s-6); font-size: var(--t-lead); line-height: 1.5; color: var(--inchiostro-2); max-width: 34em; }
.s-funzionalita-h2 { max-width: 22em; scroll-margin-top: inherit; }
.s-funzionalita-h2:focus { outline: none; }
.s-funzionalita-h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.s-funzionalita-frase { font-size: var(--t-lead); line-height: 1.5; color: var(--inchiostro-2); max-width: 36em; }
.s-funzionalita-nota { font-size: var(--t-small); line-height: 1.55; color: var(--inchiostro-2); max-width: 40em; }
.s-funzionalita-punti { border-bottom: 1px solid var(--filetto); }
.s-funzionalita-punti > li {
  padding-block: 0.75rem; border-top: 1px solid var(--filetto);
  font-size: var(--t-body); line-height: 1.55; color: var(--inchiostro);
  break-inside: avoid;
}
.s-funzionalita-punti a { color: var(--azione); font-weight: 560; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.s-funzionalita-punti a:hover { color: var(--azione-hover); text-decoration-thickness: 2px; }
.s-funzionalita-colonna > .s-funzionalita-nota,
.s-funzionalita-legenda > .s-funzionalita-nota { margin-top: var(--s-6); }

/* sezioni: una colonna sotto 48 em, poi griglie proprie */
.s-funzionalita-sez,
.s-funzionalita-lastra-in {
  display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: var(--fz-gap); align-content: start;
}
.s-funzionalita-sez { position: relative; padding-block: clamp(4rem, 2rem + 6vw, 8rem) clamp(4rem, 2rem + 4vw, 6rem); }
.s-funzionalita-sez > *, .s-funzionalita-lastra-in > * { min-width: 0; }
.s-funzionalita-sez .s-funzionalita-h2 + .s-funzionalita-frase,
.s-funzionalita-testa > .s-funzionalita-frase { margin-top: var(--s-4); }
.s-funzionalita-testa { min-width: 0; }

/* ---------- ritaglio: cornice + barra con «Dati di esempio» e una sola parte dello schermo ---------- */
.s-funzionalita-ritaglio { min-width: 0; }
.s-funzionalita-ritaglio .qa-finestra { box-shadow: var(--ombra-finestra); }
.s-funzionalita-ritaglio :is(.qa-menu, .qa-testata, .qa-strumenti, .qa-tabella-piede) { display: none !important; }
.s-funzionalita-ritaglio .qa-app { grid-template-columns: minmax(0, 1fr) !important; min-height: 0; }
.s-funzionalita-ritaglio .qa-schermo { height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; }
.s-funzionalita-ritaglio :is(.qa-app, .qa-pagina) { min-height: 0 !important; }
.s-funzionalita-ritaglio .qa-contenuto { padding: 0.75em 0.75em 0.75em !important; min-height: 0; }

/* esito dell'importazione: intestazione, le tre bozze nuove, il riquadro «Completato» */
.s-funzionalita-ritaglio[data-parte="esito"] :is(.wi-o, .wi-velo) { display: none !important; }
.s-funzionalita-ritaglio[data-parte="esito"] .qa-schermo { display: grid; grid-template-columns: minmax(0, 1fr); }
.s-funzionalita-ritaglio[data-parte="esito"] .wi-stato {
  position: relative; inset: auto; justify-self: end;
  margin: 0 1em 1em; width: min(28em, calc(100% - 2em));
  opacity: 1 !important; transform: none !important; box-shadow: none;
  min-height: 0; padding-right: 0.9em;
}
.s-funzionalita-ritaglio[data-parte="esito"] :is(.wi-stato-riduci, .wi-stato-x, .wi-stato-freccia) { display: none !important; }
.s-funzionalita-ritaglio[data-parte="esito"] .wi-stato { grid-template-columns: minmax(0, 1fr) !important; margin-top: -0.25em; }

/* bozze: barra delle azioni di gruppo sopra la riga selezionata e il suo avviso VeRO */
.s-funzionalita-ritaglio[data-parte="azioni"] .qa-tabella thead,
.s-funzionalita-ritaglio[data-parte="azioni"] .wb-riga:not(.is-selezionata),
.s-funzionalita-ritaglio[data-parte="azioni"] .wb-pannello { display: none !important; }
.s-funzionalita-ritaglio[data-parte="azioni"] .qa-schermo { display: flex; flex-direction: column-reverse; }
.s-funzionalita-ritaglio[data-parte="azioni"] :is(.wb-sopra, .wb-massa) {
  position: relative; inset: auto; left: auto; bottom: auto; transform: none; opacity: 1;
}
.s-funzionalita-ritaglio[data-parte="azioni"] .wb-sopra { padding: 1em 1em 0.25em; }
.s-funzionalita-ritaglio[data-parte="azioni"] .wb-massa { margin-inline: auto 0; max-width: 100%; box-shadow: none; }

/* prezzi: campi, fasce e bozza ricalcolata; niente elenco delle sezioni né piede */
.s-funzionalita-ritaglio[data-parte="fasce"] :is(.wf-nav, .wf-piede, .wf-schede, .wf-testa) { display: none !important; }
.s-funzionalita-ritaglio[data-parte="fasce"] .wf-corpo { grid-template-columns: minmax(0, 1fr) !important; }
.s-funzionalita-ritaglio[data-parte="fasce"] .wf-fascia { display: grid !important; }

/* negozi: nome del negozio e le sei sezioni dell'«Account eBay» */
.s-funzionalita-ritaglio[data-parte="sezioni"] :is(.wf-sezione, .wf-piede, .wf-schede, .wf-bozza) { display: none !important; }
.s-funzionalita-ritaglio[data-parte="sezioni"] .wf-corpo { grid-template-columns: minmax(0, 1fr) !important; }
.s-funzionalita-ritaglio[data-parte="sezioni"] .wf-nav {
  display: flex !important; flex-direction: column; gap: 0.35em;
  padding: 0.9em 0.75em 1em; border: 0 !important;
}
.s-funzionalita-ritaglio[data-parte="sezioni"] .wf-nav > li { display: flex !important; }
.s-funzionalita-ritaglio[data-parte="sezioni"] .qa-barra-titolo { flex: 1 1 0; }

/* ordini: il dettaglio dell'ordine fermo, a tutta larghezza */
.s-funzionalita-ritaglio[data-parte="dettaglio"] :is(.qa-pagina, .wo-velo, .wo-d-chiudi, .wo-d-schede) { display: none !important; }
.s-funzionalita-ritaglio[data-parte="dettaglio"] .qa-schermo { display: block; }
.s-funzionalita-ritaglio[data-parte="dettaglio"] .wo-drawer {
  position: static !important; inset: auto; width: 100% !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  transform: none !important; opacity: 1 !important; max-height: none !important;
}

/* ---------- schermata intera (monitoraggio, messaggi) ---------- */
.s-funzionalita-schermata { min-width: 0; }

/* =====================================================================
   Indice
   ===================================================================== */
.s-funzionalita-indice-titolo { font-size: var(--t-small); font-weight: 500; color: var(--inchiostro-2); }
.s-funzionalita-indice-voci a {
  display: flex; align-items: center; min-height: 44px;
  color: var(--inchiostro-2); font-size: var(--t-small); font-weight: 450; line-height: 1.3;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) ease;
}
.s-funzionalita-indice-voci a[aria-current="true"] { color: var(--inchiostro); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .s-funzionalita-indice-voci a:hover { color: var(--inchiostro); } }
.s-funzionalita-indice-voci a:focus-visible { outline-offset: -3px; }
.s-funzionalita-indice-segno {
  position: absolute; pointer-events: none; opacity: 0;
  background: var(--azione);
  transition: transform var(--dur-base) var(--ease-in-out), opacity var(--dur-fast) ease;
}
.s-funzionalita.is-segno .s-funzionalita-indice-segno { opacity: 1; }
.fermo .s-funzionalita-indice-segno { transition: none; }

/* sotto 80 em: barra orizzontale ferma sotto l'intestazione, scorre dentro di sé */
@media (max-width: 79.99em) {
  .s-funzionalita-indice {
    position: sticky; top: var(--testata-h); z-index: 40;
    margin-inline: calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r));
    background: var(--fondo); border-bottom: 1px solid var(--filetto);
  }
  .s-funzionalita-indice-titolo { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); white-space: nowrap; }
  .s-funzionalita-indice-binario {
    position: relative; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none;
    padding-inline: calc(var(--gut-l) - 0.75rem) calc(var(--gut-r) - 0.75rem);
    scroll-padding-inline: calc(var(--gut-l) - 0.75rem) calc(var(--gut-r) - 0.75rem);
  }
  .s-funzionalita-indice-binario::-webkit-scrollbar { display: none; }
  .s-funzionalita-indice.is-dx .s-funzionalita-indice-binario { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
  .s-funzionalita-indice.is-sx .s-funzionalita-indice-binario { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); }
  .s-funzionalita-indice.is-sx.is-dx .s-funzionalita-indice-binario { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
  .s-funzionalita-indice-voci { display: flex; width: max-content; }
  .s-funzionalita-indice-voci li { scroll-snap-align: start; }
  .s-funzionalita-indice-voci a { height: var(--fz-barra); padding-inline: 0.75rem; white-space: nowrap; }
  .s-funzionalita-indice-voci a { scroll-margin-top: calc(-1 * var(--sopra-fermo, 0px)); }   /* P33 */
  .s-funzionalita-indice-segno { left: 0; bottom: 0; width: 1px; height: 2px; transform-origin: 0 0; }
}
@media (max-width: 79.99em) and (max-height: 31.25em) { .s-funzionalita-indice { position: static; } }

/* da 80 em: colonna sinistra, ferma, con il binario */
@media (min-width: 80em) {
  .s-funzionalita-telaio {
    display: grid;
    grid-template-columns: var(--fz-indice) minmax(0, 1fr);
    column-gap: var(--fz-spazio);
  }
  .s-funzionalita-telaio > :not(.s-funzionalita-indice) { grid-column: 2; }
  .s-funzionalita-indice {
    grid-column: 1; grid-row: 1 / span 11; align-self: start;
    position: sticky; top: calc(var(--testata-h) + 2rem);
    margin-top: clamp(5rem, 2rem + 6vw, 8rem);
    max-height: calc(100dvh - var(--testata-h) - 3rem); overflow-y: auto; scrollbar-width: thin;
    padding-bottom: 1rem;
  }
  .s-funzionalita-indice-titolo { padding-bottom: 1rem; line-height: 1.4; transform: translateY(0.35em); }
  .s-funzionalita-indice-binario { position: relative; border-left: 1px solid var(--filetto); }
  .s-funzionalita-indice-voci a { min-height: 2.5rem; padding: 0.4rem 0 0.4rem 1rem; }
  .s-funzionalita-indice-segno { left: -1px; top: 0; width: 2px; height: 1px; transform-origin: 0 0; }
}
@media (min-width: 80em) and (pointer: coarse) { .s-funzionalita-indice-voci a { min-height: 44px; } }
@media (min-width: 80em) and (max-height: 31.25em) { .s-funzionalita-indice { position: static; max-height: none; } }

/* =====================================================================
   Lastre: fasce a tutta larghezza sotto 80 em, lastre al bordo destro da 80 em
   ===================================================================== */
.s-funzionalita-lastra {
  padding-block: 0;
  margin-inline: calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r));
  background: var(--fondo-2);
}
.s-funzionalita-lastra-in { padding: clamp(4rem, 2rem + 4vw, 6rem) var(--gut-r) clamp(4rem, 2rem + 4vw, 6rem) var(--gut-l); }
.s-funzionalita-monitoraggio .s-funzionalita-lastra-in { padding-block: clamp(5rem, 2rem + 6vw, 8rem); }
@media (min-width: 80em) {
  .s-funzionalita-lastra {
    --fz-sbordo: max(0px, (100cqi - var(--max-content) - var(--gut-l) - var(--gut-r)) / 2);
    margin-inline: calc(-1 * var(--fz-spazio) + 1rem) calc(-1 * (var(--fz-sbordo) + var(--gut-r)));
    border-radius: var(--fz-lastra-r) 0 0 var(--fz-lastra-r);
  }
  .s-funzionalita-lastra-in { padding-inline: calc(var(--fz-spazio) - 1rem) calc(var(--fz-sbordo) + var(--gut-r)); }
  .s-funzionalita-lastra:not(.sezione--notte) { border: 1px solid var(--filetto); border-right: 0; }
}
@supports not (width: 1cqi) {
  @media (min-width: 80em) {
    .s-funzionalita-lastra { margin-inline: 0; border-radius: var(--fz-lastra-r); }
    .s-funzionalita-lastra-in { padding-inline: clamp(1.5rem, 3vw, 3rem); }
  }
}
/* la lastra notte è il piano di scorrimento.css (angoli tondi, si allarga, «luce che scende»): nessun fondo qui */
.s-funzionalita-monitoraggio .qa-finestra { box-shadow: none; border-color: var(--line-d); }

/* =====================================================================
   Sezioni
   ===================================================================== */
/* intro */
.s-funzionalita-intro { padding-block: clamp(4.5rem, 2rem + 6vw, 8rem) clamp(2rem, 1rem + 4vw, 6rem); }

/* spazi verticali del ritmo (§ 4) */
.s-funzionalita-prezzi { margin-bottom: clamp(3rem, 2rem + 2vw, 4rem); }
.s-funzionalita-ordini { padding-bottom: clamp(3rem, 2rem + 2vw, 4rem); }
.s-funzionalita-messaggi { padding-top: clamp(3rem, 2rem + 2vw, 4rem); padding-bottom: clamp(5rem, 2rem + 6vw, 8rem); }
.s-funzionalita-negozi { padding-bottom: clamp(3rem, 2rem + 2vw, 4rem); }
.s-funzionalita-assistenza { padding-top: clamp(3rem, 2rem + 2vw, 4rem); }
.s-funzionalita-assistenza::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--filetto); }

/* spazio tra blocchi in una colonna */
.s-funzionalita-sez > .s-funzionalita-ritaglio,
.s-funzionalita-lastra-in > .s-funzionalita-tavola,
.s-funzionalita-lastra-in > .s-funzionalita-scena { margin-top: clamp(2rem, 1rem + 3vw, 3rem); }
.s-funzionalita-sez > .s-funzionalita-punti,
.s-funzionalita-sez > .s-funzionalita-colonna,
.s-funzionalita-lastra-in > .s-funzionalita-punti,
.s-funzionalita-lastra-in > .s-funzionalita-colonna { margin-top: clamp(2rem, 1rem + 3vw, 3rem); }
.s-funzionalita-tavola > .s-funzionalita-nota { margin-top: var(--s-6); }
.s-funzionalita-colonna > .cornice { margin-top: clamp(2rem, 1rem + 3vw, 3rem); }

/* prezzi: i punti dopo la tavola sul telefono */
.s-funzionalita-prezzi .s-funzionalita-tavola { order: 3; }
.s-funzionalita-prezzi .s-funzionalita-lastra-in > .s-funzionalita-punti { order: 4; }

/* monitoraggio: legenda */
.s-funzionalita-scena { display: grid; gap: var(--s-6); }
.s-funzionalita-legenda .s-funzionalita-punti > li { transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.s-funzionalita-monitoraggio .s-funzionalita-punti > li { color: var(--su-software); }
.s-funzionalita-monitoraggio .s-funzionalita-nota { color: var(--su-software-2); }
/* la scena accende la riga della legenda della riga evidenziata (solo con il movimento) */
.moto .s-funzionalita-scena:has(.widget-monitoraggio tr.is-evidenziata) .s-funzionalita-legenda li { color: var(--su-software-2); }
.moto .s-funzionalita-scena:has(.widget-monitoraggio tr[data-riga="a"].is-evidenziata) .s-funzionalita-legenda li[data-riga="a"],
.moto .s-funzionalita-scena:has(.widget-monitoraggio tr[data-riga="b"].is-evidenziata) .s-funzionalita-legenda li[data-riga="b"] {
  color: var(--su-software); border-top-color: var(--su-software);
}

/* due colonne di punti da 48 em */
@media (min-width: 48em) {
  .s-funzionalita-punti--colonne { columns: 2; column-gap: var(--fz-gap); border-bottom: 0; }
  .s-funzionalita-punti--colonne > li { border-bottom: 1px solid transparent; }
  .s-funzionalita-punti--colonne > li { display: inline-block; width: 100%; }
  .s-funzionalita-legenda .s-funzionalita-punti { columns: 2; column-gap: var(--fz-gap); border-bottom: 0; }
  .s-funzionalita-legenda .s-funzionalita-punti > li { display: inline-block; width: 100%; }
  .s-funzionalita-assistenza .s-funzionalita-punti { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); column-gap: var(--fz-gap); border-bottom: 0; }
  .s-funzionalita-negozi .s-funzionalita-ritaglio { max-width: 24rem; }
}

/* ---------- 12 colonne da 64 em (e 10 colonne del contenuto da 80 em) ---------- */
@media (min-width: 64em) {
  .s-funzionalita-sez, .s-funzionalita-lastra-in { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .s-funzionalita-sez > *, .s-funzionalita-lastra-in > * { grid-column: 1 / -1; }

  .s-funzionalita-intro .s-funzionalita-h1 { max-width: 14em; }

  /* importazione: banda larga e bassa */
  .s-funzionalita-importazione > .s-funzionalita-h2 { grid-column: 1 / span 9; }
  .s-funzionalita-importazione > .s-funzionalita-frase { grid-column: 1 / span 8; }

  /* bozze: striscia a destra, frase sotto a sinistra, punti a destra */
  .s-funzionalita-bozze > .s-funzionalita-h2 { grid-column: 1 / span 10; grid-row: 1; }
  .s-funzionalita-bozze > .s-funzionalita-ritaglio { grid-column: 3 / -1; grid-row: 2; }
  .s-funzionalita-bozze > .s-funzionalita-frase { grid-column: 1 / span 5; grid-row: 3; margin-top: clamp(2rem, 1rem + 3vw, 3rem) !important; }
  .s-funzionalita-bozze > .s-funzionalita-punti { grid-column: 6 / -1; grid-row: 3; }

  /* prezzi */
  .s-funzionalita-prezzi .s-funzionalita-lastra-in > .s-funzionalita-h2,
  .s-funzionalita-prezzi .s-funzionalita-lastra-in > .s-funzionalita-frase { grid-column: 1 / span 8; }
  .s-funzionalita-prezzi .s-funzionalita-lastra-in > .s-funzionalita-punti { grid-column: 1 / span 5; grid-row: 3; order: 0; align-self: start; }
  .s-funzionalita-prezzi .s-funzionalita-tavola { grid-column: 6 / -1; grid-row: 3; order: 0; margin-top: clamp(2rem, 1rem + 3vw, 3rem); }
  .s-funzionalita-prezzi .s-funzionalita-lastra-in > .s-funzionalita-h2 { grid-row: 1; }
  .s-funzionalita-prezzi .s-funzionalita-lastra-in > .s-funzionalita-frase { grid-row: 2; }

  /* monitoraggio */
  .s-funzionalita-monitoraggio .s-funzionalita-h2, .s-funzionalita-monitoraggio .s-funzionalita-frase { grid-column: 1 / span 9; }

  /* ordini: titolo e frase in riga, poi dettaglio e punti */
  .s-funzionalita-ordini > .s-funzionalita-h2 { grid-column: 1 / span 5; grid-row: 1; }
  .s-funzionalita-ordini > .s-funzionalita-frase { grid-column: 6 / -1; grid-row: 1; margin-top: 0 !important; padding-top: 0.35em; }
  .s-funzionalita-ordini > .s-funzionalita-ritaglio { grid-column: 1 / span 7; grid-row: 2; align-self: start; }
  .s-funzionalita-ordini > .s-funzionalita-colonna { grid-column: 8 / -1; grid-row: 2; }

  /* messaggi */
  .s-funzionalita-messaggi > .s-funzionalita-testa { grid-column: 1 / span 5; }
  .s-funzionalita-messaggi > .s-funzionalita-colonna { grid-column: 6 / -1; margin-top: 0; }
  .s-funzionalita-messaggi .cornice { max-width: 40rem; }

  /* resi */
  .s-funzionalita-resi .s-funzionalita-testa { grid-column: 1 / span 5; }
  .s-funzionalita-resi .s-funzionalita-lastra-in > .s-funzionalita-colonna { grid-column: 7 / -1; margin-top: 0; }

  /* negozi: colonna stretta a sinistra */
  .s-funzionalita-negozi > .s-funzionalita-ritaglio { grid-column: 1 / span 4; grid-row: 1 / span 3; margin-top: 0; align-self: start; max-width: none; }
  .s-funzionalita-negozi > .s-funzionalita-h2 { grid-column: 5 / -1; grid-row: 1; }
  .s-funzionalita-negozi > .s-funzionalita-frase { grid-column: 5 / -1; grid-row: 2; }
  .s-funzionalita-negozi > .s-funzionalita-punti { grid-column: 5 / -1; grid-row: 3; margin-top: var(--s-6); }

  /* assistenza */
  .s-funzionalita-assistenza > .s-funzionalita-h2 { grid-column: 1 / span 5; grid-row: 1; }
  .s-funzionalita-assistenza > .s-funzionalita-frase { grid-column: 6 / -1; grid-row: 1; margin-top: 0 !important; padding-top: 0.35em; }
  .s-funzionalita-assistenza > .s-funzionalita-punti { margin-top: var(--s-8); }
  .s-funzionalita-assistenza .s-funzionalita-punti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* monitoraggio da 80 em: schermata e legenda affiancate */
@media (min-width: 80em) {
  .s-funzionalita-sez, .s-funzionalita-lastra-in { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .s-funzionalita-importazione > .s-funzionalita-h2 { grid-column: 1 / span 7; }
  .s-funzionalita-importazione > .s-funzionalita-frase { grid-column: 1 / span 6; }
  .s-funzionalita-bozze > .s-funzionalita-h2 { grid-column: 1 / span 8; }
  .s-funzionalita-bozze > .s-funzionalita-frase { grid-column: 1 / span 4; }
  .s-funzionalita-bozze > .s-funzionalita-punti { grid-column: 5 / -1; }
  .s-funzionalita-prezzi .s-funzionalita-lastra-in > .s-funzionalita-h2,
  .s-funzionalita-prezzi .s-funzionalita-lastra-in > .s-funzionalita-frase { grid-column: 1 / span 6; }
  .s-funzionalita-prezzi .s-funzionalita-lastra-in > .s-funzionalita-punti { grid-column: 1 / span 4; }
  .s-funzionalita-prezzi .s-funzionalita-tavola { grid-column: 5 / -1; }
  .s-funzionalita-monitoraggio .s-funzionalita-h2 { grid-column: 1 / span 7; }
  .s-funzionalita-monitoraggio .s-funzionalita-frase { grid-column: 1 / span 6; }
  .s-funzionalita-scena { grid-template-columns: minmax(0, 1fr) 15rem; column-gap: 2rem; align-items: start; }
  .s-funzionalita-legenda { padding-top: 3.25rem; }
  .s-funzionalita-legenda .s-funzionalita-punti { columns: auto; border-bottom: 1px solid var(--filetto); }
  .s-funzionalita-legenda .s-funzionalita-punti > li { display: block; }
  .s-funzionalita-ordini > .s-funzionalita-h2 { grid-column: 1 / span 4; }
  .s-funzionalita-ordini > .s-funzionalita-frase { grid-column: 5 / -1; }
  .s-funzionalita-ordini > .s-funzionalita-ritaglio { grid-column: 1 / span 6; }
  .s-funzionalita-ordini > .s-funzionalita-colonna { grid-column: 7 / -1; }
  .s-funzionalita-messaggi > .s-funzionalita-testa { grid-column: 1 / span 4; }
  .s-funzionalita-messaggi > .s-funzionalita-colonna { grid-column: 5 / -1; }
  .s-funzionalita-resi .s-funzionalita-testa { grid-column: 1 / span 5; }
  .s-funzionalita-resi .s-funzionalita-lastra-in > .s-funzionalita-colonna { grid-column: 6 / -1; }
  .s-funzionalita-negozi > .s-funzionalita-ritaglio { grid-column: 1 / span 3; }
  .s-funzionalita-negozi > .s-funzionalita-h2,
  .s-funzionalita-negozi > .s-funzionalita-frase,
  .s-funzionalita-negozi > .s-funzionalita-punti { grid-column: 5 / -1; }
  .s-funzionalita-assistenza > .s-funzionalita-h2 { grid-column: 1 / span 4; }
  .s-funzionalita-assistenza > .s-funzionalita-frase { grid-column: 5 / -1; }
}

/* =====================================================================
   Finale: indaco di Qublo, secondario a filetto bianco
   ===================================================================== */
.s-funzionalita-finale .finale-in { align-items: end; }
.s-funzionalita-finale .pulsante.s-funzionalita-secondario { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
@media (hover: hover) and (pointer: fine) {
  .s-funzionalita-finale .pulsante.s-funzionalita-secondario:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }
}
.s-funzionalita-finale .finale-azioni { justify-items: stretch; }
@media (max-width: 29.99em) { .s-funzionalita-finale .azioni { flex-direction: column; } }

@media print {
  .s-funzionalita-indice { display: none; }
  .s-funzionalita-lastra { margin: 0; border-radius: 0; }
}

/* telefono: la scena del monitoraggio tiene le tre righe che servono (a, b, c) */
@container (max-width: 47.99em) {
  .s-funzionalita-monitoraggio .widget-monitoraggio tr:is([data-riga="d"], [data-riga="e"]) { display: none; }
}

/* tablet in verticale: le schermate non si allargano oltre la loro misura */
@media (min-width: 48em) and (max-width: 63.99em) {
  .s-funzionalita-messaggi .cornice,
  .s-funzionalita-ordini > .s-funzionalita-ritaglio,
  .s-funzionalita-prezzi .s-funzionalita-tavola { max-width: 40rem; }
  .s-funzionalita-bozze > .s-funzionalita-ritaglio { margin-left: 12%; }
}


/* =====================================================================
   v2 · «scorrimento controllato» (sezione-funzionalita.js)
   Lo stato finale è il markup: senza JS e con «riduci movimento» tutto resta fermo e completo.
   Gli elementi guidati dalla rotella non hanno transizioni (le darebbe in ritardo).
   ===================================================================== */
.s-funzionalita-ritaglio :is(.wi-riga, .wb-massa, .wb-vero-avviso, .wf-delta, .wo-fee, .wi-barra > i, .wo-barra > i) { transition: none !important; }
.s-funzionalita-ritaglio .qa-spinner { animation: none; }

/* importazione: il riquadro tiene sempre titolo, conto delle richieste e barra (nessun salto di altezza) */
.s-funzionalita-ritaglio[data-parte="esito"] .wi-stato[data-concluso] :is(.wi-progresso, .wi-barra) { display: block !important; }
.s-funzionalita-ritaglio[data-parte="esito"] .wi-stato-esito { display: none !important; }

/* negozi: il segno della voce attiva è un pezzo solo che scorre sotto le voci */
.s-funzionalita-ritaglio[data-parte="sezioni"] .wf-nav { position: relative; }
.s-funzionalita-ritaglio[data-parte="sezioni"] .wf-nav > li { position: relative; z-index: 1; }
.s-funzionalita-ritaglio[data-parte="sezioni"] .wf-nav.is-scena > li.is-attiva { background: transparent; box-shadow: none; }
.s-funzionalita-negozi-segno {
  position: absolute; z-index: 0; top: 0; left: 0; pointer-events: none;
  border-radius: .7em; background: var(--q-brand);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--q-brand) 20%, transparent);
}

/* indice: traccia «letto» sul binario (pervinca: filetto attivo), sotto il segno */
.s-funzionalita-indice-letto { position: absolute; pointer-events: none; opacity: 0; background: var(--pervinca); transform-origin: 0 0; }
.s-funzionalita.is-letto .s-funzionalita-indice-letto { opacity: 1; }
.fermo .s-funzionalita-indice-letto { display: none; }
@media (max-width: 79.99em) { .s-funzionalita-indice-letto { left: 0; bottom: 0; width: 1px; height: 2px; } }
@media (min-width: 80em) { .s-funzionalita-indice-letto { left: -1px; top: 0; width: 1px; height: 1px; } }

/* ---------- mini-schermate ricostruite (resi, assistenza): pezzi di app-ui.css ---------- */
.s-funzionalita-mini { min-width: 0; }
.s-funzionalita-mini .qa-finestra { box-shadow: var(--ombra-finestra); }
.s-funzionalita-pb-corpo, .s-funzionalita-tk-corpo { display: grid; gap: .85em; padding: 1em; min-width: 0; }
.s-funzionalita-pb-testa { display: flex; align-items: center; justify-content: space-between; gap: .75em; min-width: 0; }
.s-funzionalita-pb-testa > strong { font-size: var(--qa-t-l); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; min-width: 0; }
.s-funzionalita-pb-righe { display: grid; gap: .55em; }
.s-funzionalita-pb-riga {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6em .8em; align-items: start;
  padding: .75em .8em; min-width: 0;
  border: 1px solid var(--q-line); border-radius: 11px; background: var(--q-surface);
}
.s-funzionalita-pb-riga > .qa-thumb { width: 2.6em; height: 2.6em; }
.s-funzionalita-pb-testo { display: grid; gap: .2em; min-width: 0; }
.s-funzionalita-pb-testo > strong { font-size: var(--qa-t-m); font-weight: 800; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-funzionalita-pb-testo > small { font-size: var(--qa-t-xs); font-weight: 600; line-height: 1.35; color: var(--q-muted); }
.s-funzionalita-pb-testo > small.s-funzionalita-pb-scade { color: var(--q-warn); }
.s-funzionalita-pb-stato { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .45em; min-width: 0; }
.s-funzionalita-pb-btn { margin-left: auto; min-height: 2.35em; }
@container qa (width >= 30rem) { .s-funzionalita-pb-stato { grid-column: 2; } }
/* pratica risolta: nello stato finale (fermo, senza JS) il pulsante non c'è; durante la scena tiene il suo posto (nessun salto) */
.s-funzionalita-pb-riga--uno .s-funzionalita-pb-azione { display: none; }
.s-funzionalita-mini.is-scena .s-funzionalita-pb-riga--uno .s-funzionalita-pb-azione { display: inline-flex; visibility: hidden; }
.s-funzionalita-mini.is-scena .s-funzionalita-pb-riga--uno .s-funzionalita-pb-azione.is-vivo { visibility: visible; }
/* due pillole nella stessa cella: la vecchia sale e se ne va, la nuova arriva da sotto */
.s-funzionalita-pb-flip { display: inline-grid; overflow: clip; border-radius: 8px; }
.s-funzionalita-pb-flip > * { grid-area: 1 / 1; justify-self: start; }
.s-funzionalita-pb-prima { opacity: 0; }

.s-funzionalita-tk-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: .75em; min-width: 0; }
.s-funzionalita-tk-titolo { display: grid; gap: .2em; min-width: 0; }
.s-funzionalita-tk-titolo > small { font-size: var(--qa-t-xs); font-weight: 700; color: var(--q-muted); }
.s-funzionalita-tk-titolo > strong { font-size: var(--qa-t-l); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.s-funzionalita-tk-info { display: flex; flex-wrap: wrap; align-items: center; gap: .45em .5em; min-width: 0; }
.s-funzionalita-tk-info > small { flex-basis: 100%; font-size: var(--qa-t-xs); font-weight: 600; color: var(--q-muted); }
.s-funzionalita-tk-chat { padding-top: .2em; }
.s-funzionalita-tk-chat .qa-bolla { transition: none; max-width: min(92%, 26em); }
.s-funzionalita-tk-file {
  display: inline-flex; align-items: center; gap: .35em; justify-self: start; min-width: 0; max-width: 100%;
  margin-top: .2em; padding: .3em .6em; border-radius: 8px;
  background: var(--q-surface-2); color: var(--q-ink);
  font-size: var(--qa-t-xs); font-weight: 700; overflow-wrap: anywhere;
}
.s-funzionalita-tk-file .qa-ico { width: 1.05em; height: 1.05em; flex: none; }
.s-funzionalita-tk-team { align-self: flex-start; }

/* ---------- impaginazione di resi e assistenza con la schermata ---------- */
.s-funzionalita-sez > .s-funzionalita-mini,
.s-funzionalita-lastra-in > .s-funzionalita-mini { margin-top: clamp(2rem, 1rem + 3vw, 3rem); }
@media (min-width: 48em) {
  .s-funzionalita-mini { max-width: 34rem; }
}
@media (min-width: 64em) {
  .s-funzionalita-mini { max-width: none; }
  .s-funzionalita-resi .s-funzionalita-lastra-in > .s-funzionalita-testa { grid-column: 1 / span 8; grid-row: 1; }
  .s-funzionalita-resi .s-funzionalita-lastra-in > .s-funzionalita-mini { grid-column: 1 / span 6; grid-row: 2; }
  .s-funzionalita-resi .s-funzionalita-lastra-in > .s-funzionalita-colonna { grid-column: 8 / -1; grid-row: 2; margin-top: clamp(2rem, 1rem + 3vw, 3rem); align-self: start; }

  .s-funzionalita-assistenza > .s-funzionalita-h2 { grid-column: 1 / span 6; grid-row: 1; }
  .s-funzionalita-assistenza > .s-funzionalita-frase { grid-column: 1 / span 6; grid-row: 2; margin-top: var(--s-4) !important; padding-top: 0; }
  .s-funzionalita-assistenza > .s-funzionalita-punti { grid-column: 1 / span 6; grid-row: 3; margin-top: clamp(2rem, 1rem + 2vw, 2.5rem); }
  .s-funzionalita-assistenza .s-funzionalita-punti { display: block; border-bottom: 1px solid var(--filetto); }
  .s-funzionalita-assistenza > .s-funzionalita-mini { grid-column: 8 / -1; grid-row: 1 / span 3; margin-top: 0; align-self: start; }
}
@media (min-width: 80em) {
  .s-funzionalita-resi .s-funzionalita-lastra-in > .s-funzionalita-testa { grid-column: 1 / span 7; }
  .s-funzionalita-resi .s-funzionalita-lastra-in > .s-funzionalita-mini { grid-column: 1 / span 5; }
  .s-funzionalita-resi .s-funzionalita-lastra-in > .s-funzionalita-colonna { grid-column: 6 / -1; }
  .s-funzionalita-assistenza > :is(.s-funzionalita-h2, .s-funzionalita-frase, .s-funzionalita-punti) { grid-column: 1 / span 5; }
  .s-funzionalita-assistenza > .s-funzionalita-mini { grid-column: 6 / -1; }
}

/* ---------- finale: titolo «a registro» ---------- */
.s-funzionalita-finale { overflow-x: clip; }
.s-funzionalita-finale-riga { display: inline-block; }

/* ---- css/sezioni/home-calcolatore.css ---- */
/* =====================================================================
   Home · calcolatore (blocco notte, interattivo)
   Titolo 5 colonne + frase 6 colonne; calcolatore a tutta larghezza;
   tre note sotto. Mentre la finestra sale, la rotella porta il costo da 8,00 €
   a 27,39 € e il widget rifà il conto a ogni passo (sezione-home-percorso.js,
   «home-calcolatore»); al primo tocco risponde solo a chi lo usa.
   ===================================================================== */

/* dopo il percorso (notte + notte) i due piani sono uno solo: il filetto di 1 px tra le
   sezioni resterebbe trasparente e farebbe vedere la lavanda della pagina */
html .s-home-calcolatore.sezione--notte { border-top-width: 0; }
/* e il piano scende di 1 px sotto quello del percorso: nessuna cucitura chiara a mezzo pixel */
html .s-home-calcolatore.sezione--notte::before { top: -1px; }
/* un piano solo ha un riflesso solo, in cima al percorso: qui ripartirebbe con un bordo netto */
html .sezione--notte + .s-home-calcolatore.sezione--notte { --riflesso: linear-gradient(transparent, transparent); }

.s-home-calcolatore-testa { row-gap: var(--s-4); align-items: start; }
.s-home-calcolatore-testa .titolo-2 { max-width: 12em; }
.s-home-calcolatore-testa .guida { max-width: 34em; }
/* da 56 em la frase si allinea alla prima riga del titolo */
@media (min-width: 56em) {
  .s-home-calcolatore-testa .guida { padding-top: 0.35em; }
}

.s-home-calcolatore-cornice { margin-top: clamp(2rem, 4vw, 3rem); }

/* note: la stima per prima, con la pillola; poi fasce e IVA */
.s-home-calcolatore-note {
  display: grid;
  gap: var(--s-4) var(--gap-l);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--filetto);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--inchiostro-2);
}
.s-home-calcolatore-note > p { max-width: 40em; }
.s-home-calcolatore-stima { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 0.625rem; }
.s-home-calcolatore-stima > span:last-child { flex: 1 1 18em; min-width: 0; }
.s-home-calcolatore-stima .pillola { flex: none; }

/* tablet: stima a tutta riga, sotto fasce e IVA affiancate */
@media (min-width: 40em) {
  .s-home-calcolatore-note { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-home-calcolatore-stima { grid-column: 1 / -1; }
}
/* desktop: 6 + 3 + 3 colonne */
@media (min-width: 64em) {
  .s-home-calcolatore-note { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); }
  .s-home-calcolatore-stima { grid-column: auto; }
}

/* ---- css/sezioni/home-dashboard.css ---- */
/* La Home di Qublo: grande schermata chiara, grafico e motion originali.
   Il widget mantiene le sue container query e la propria timeline. */
.qhome-section { background: #FFFFFF; padding-block: clamp(4rem, 7vw, 7rem); }
.qhome-heading { display: grid; justify-items: center; gap: 1.25rem; max-width: 54rem; margin: 0 auto clamp(2.5rem, 4.5vw, 4rem); text-align: center; }
.qhome-heading .titolo-2 { max-width: 24ch; margin: 0; }
.qhome-heading .guida { max-width: 40rem; margin: 0; color: var(--muted); }
.qhome-stage {
  position: relative;
  min-width: 0;
  padding: clamp(1rem, 2.4vw, 2.25rem);
  border: 1px solid #DFE3F0;
  border-radius: clamp(20px, 2.5vw, 34px);
  background: #F4F5FD;
  box-shadow: 0 18px 56px -42px rgba(63, 63, 184, .2);
}
.qhome-window { position: relative; min-width: 0; margin: 0; }
.qhome-window .qa-finestra { background: #FFFFFF; border-color: #D6DBEA; box-shadow: 0 2px 3px rgba(22, 26, 51, .025), 0 28px 54px -38px rgba(44, 46, 104, .32); }
.qhome-window .qa-barra { background: #FFFFFF; }
.qhome-caption { align-items: center; color: #555B76; }
.qhome-caption > span:first-child { min-width: 0; }
.qhome-callouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); margin-top: 2.25rem; }
.qhome-callout { position: relative; display: flex; align-items: flex-start; gap: .85rem; padding: 1.1rem 1.15rem; border: 1px solid #E3E6F1; border-radius: 12px; background: #FFFFFF; box-shadow: 0 8px 18px -16px rgba(22, 26, 51, .16); min-width: 0; }
.qhome-callout::before { content: ""; position: absolute; top: -1.4rem; left: 1.6rem; width: 1px; height: 1.4rem; background: #CDD2EA; }
.qhome-callout::after { content: ""; position: absolute; top: -1.6rem; left: calc(1.6rem - 2px); width: 5px; height: 5px; border-radius: 50%; background: #8D8FF3; }
.qhome-callout-icon { display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 8px; background: #F0F1FC; color: #5151C9; }
.qhome-callout-icon svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.qhome-callout h3 { margin: 0; color: #252B49; font-size: .9375rem; line-height: 1.4; letter-spacing: -.015em; font-weight: 650; }
.qhome-callout p { margin: .4rem 0 0; color: #555B76; font-size: .8125rem; line-height: 1.6; }
.qhome-example-note { max-width: 50rem; margin: 1.25rem auto 0; color: #5B6080; text-align: center; font-size: .75rem; line-height: 1.6; }
@media (max-width: 55.99em) {
  .qhome-heading { max-width: 42rem; gap: 1rem; }
  .qhome-callouts { gap: .85rem; }
  .qhome-callout { display: grid; gap: .7rem; padding: 1rem; }
  .qhome-callout::before { left: 1.9rem; }
  .qhome-callout::after { left: calc(1.9rem - 2px); }
}
@media (max-width: 39.99em) {
  .qhome-section { padding-block: 3.5rem; }
  .qhome-heading .titolo-2 { max-width: 18ch; }
  .qhome-stage { padding: .75rem; border-radius: 18px; }
  .qhome-window .qa-finestra { border-radius: 12px; }
  .qhome-caption { gap: .7rem; flex-wrap: wrap; }
  .qhome-callouts { grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: 1.5rem; }
  .qhome-callout { display: flex; gap: .8rem; padding: 1rem; }
  .qhome-callout::before, .qhome-callout::after { display: none; }
  .qhome-callout h3 { font-size: .9375rem; }
  .qhome-callout p { font-size: .8125rem; }
  .qhome-example-note { padding-inline: .25rem; }
}
@media print { .qhome-window[data-profondita] { transform: none !important; } }

/* ---- css/sezioni/home-domande.css ---- */
/* Home · domande frequenti (sezione home-domande) · MOTION § 9.9: sezione calma.
   Titolo a sinistra, fermo mentre scorri l'elenco solo da 64 em e con 42 em di altezza;
   otto <details> nativi a destra. I filetti si tracciano da sinistra mentre scorri (.is-fili, lo mette lo
   script solo con il movimento permesso); la risposta compare in dissolvenza da 180 ms. */

.s-home-domande-titolo { text-wrap: balance; }
@media (min-width: 56em) { .s-home-domande-titolo { max-width: 8em; } }
@media (min-width: 64em) and (min-height: 42em) {
  .s-home-domande-testa { position: sticky; top: calc(var(--testata-h) + 3rem); align-self: start; }
}
@media (max-width: 55.99em) {
  .s-home-domande-elenco { max-width: 48rem; }
}

.s-home-domande .domanda > summary {
  align-items: flex-start;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  padding-block: 1.125rem;
}
/* lo chevron resta allineato alla prima riga quando la domanda va a capo */
.s-home-domande .domanda-segno { margin-top: 0.15em; }
.s-home-domande .risposta { padding-bottom: 1.5rem; }
.s-home-domande .risposta p { max-width: 62ch; line-height: 1.6; }

@media (hover: hover) and (pointer: fine) {
  .s-home-domande .domanda > summary:hover {
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  }
}

/* filetti tracciati: il bordo resta (trasparente) e il filetto vero è un trattino che si allunga */
.s-home-domande.is-fili .domanda { border-top-color: transparent; }
.s-home-domande.is-fili .domanda > summary { position: relative; }
.s-home-domande.is-fili .domanda > summary::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: var(--filetto); transform-origin: 0 50%; transform: scaleX(var(--s-home-domande-p, 1));
}
.s-home-domande.is-fili .s-home-domande-elenco { position: relative; border-bottom-color: transparent; }
.s-home-domande.is-fili .s-home-domande-elenco::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: var(--filetto); transform-origin: 0 50%; transform: scaleX(var(--s-home-domande-fine, 1));
}

/* risposta: solo dissolvenza, nessuna altezza animata */
.moto .s-home-domande .domanda[open] > .risposta { animation: s-home-domande-entra 180ms var(--ease-out) both; }
@keyframes s-home-domande-entra { from { opacity: 0; } }

/* ---- css/sezioni/home-estensione.css ---- */
/* =====================================================================
   Home · estensione (blocco notte)
   Il rovescio del percorso: la finestra sborda a sinistra, il testo sta
   a destra. Nel DOM il titolo viene prima della finestra; l'ordine
   visivo lo fa la griglia. Telefono: titolo, frase, finestra, punti, link.
   ===================================================================== */

.s-home-estensione-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.s-home-estensione-titolo { max-width: 13em; }
.s-home-estensione-frase { margin-top: var(--s-4); }
.s-home-estensione-cornice { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* punti: righe con filetto, niente numeri né spunte */
.s-home-estensione-punti {
  display: grid;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--filetto);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--inchiostro);
}
.s-home-estensione-punti > li {
  padding-block: 0.875rem;
  border-top: 1px solid var(--filetto);
}
.s-home-estensione-link { justify-self: start; margin-top: var(--s-4); }

/* tablet: titolo e frase su 8 colonne, punti 2 + 2 */
@media (min-width: 48em) {
  .s-home-estensione-titolo, .s-home-estensione-frase { max-width: 40rem; }
  .s-home-estensione-punti {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap-l);
    border-bottom: 0;
  }
  .s-home-estensione-punti > li { border-bottom: 1px solid var(--filetto); margin-bottom: -1px; }
}

/* desktop: finestra 7 colonne a sinistra (sborda da 80 em), testo 5 a destra */
@media (min-width: 75em) {
  .s-home-estensione-in {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: var(--gap-l);
  }
  .s-home-estensione-titolo,
  .s-home-estensione-frase,
  .s-home-estensione-punti,
  .s-home-estensione-link { grid-column: 8 / -1; }
  .s-home-estensione-titolo { grid-row: 1; }
  .s-home-estensione-frase { grid-row: 2; }
  .s-home-estensione-punti { grid-row: 3; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--filetto); max-width: 34rem; }
  .s-home-estensione-punti > li { border-bottom: 0; margin-bottom: 0; }
  .s-home-estensione-link { grid-row: 4; }
  .s-home-estensione-cornice { grid-column: 1 / span 7; grid-row: 1 / -1; margin-top: 0; }
  .s-home-estensione-punti > li { font-size: var(--t-small); }
}

/* ---------- movimento (sezione-home-medio.js, solo con html.moto) ----------
   Lo scorrimento guida la scena del widget: le righe delle Bozze e la bozza nuova
   seguono la rotella, quindi niente transizioni che le ritardino. */
.s-home-estensione.is-guidata .widget-estensione .we-vecchia,
.s-home-estensione.is-guidata .widget-estensione .we-nuova { transition: none; }
@media print {
  .s-home-estensione .cornice-schermo { transform: none !important; }
}

/* ---- css/sezioni/home-finale.css ---- */
/* Home · finale (sezione home-finale) · SPUNTI § 4, MOTION § 9.10
   Pannello indaco #3F3FB8 con gli angoli tondi, appena rientrato dai bordi (come i piani notte).
   Titolo grande alla misura dell'h1 su due righe «a registro»; sotto, la frase a sinistra e a destra il
   pulsante bianco, tre spunte lime e il contatto. Movimento (sezione-home-fine.js): «luce che scende»
   sul pannello e le due righe del titolo che combaciano scorrendo. «Scegli il piano» non si muove mai.
   Senza JS o con «riduci movimento»: pannello pieno e titolo allineato. */

html .finale.s-home-finale {
  --s-home-finale-nv: clamp(0.375rem, 0.8vw, 0.875rem);   /* rientro verticale: fisso */
  --s-home-finale-ni: clamp(0.375rem, 0.8vw, 0.875rem);   /* rientro dei lati: lo muove lo script */
  --s-home-finale-nr: clamp(18px, 1.6vw, 24px);
  --s-home-finale-luce: 1;
  position: relative; isolation: isolate; overflow-x: clip;
  background: var(--fondo-2);
}
html .finale.s-home-finale::before {
  content: ""; position: absolute; inset: var(--s-home-finale-nv) 0; z-index: -1; pointer-events: none;
  background: var(--indaco-p);
  opacity: var(--s-home-finale-luce);
  /* il ritaglio tocca solo i lati: sopra e sotto il bordo è quello vero del riquadro (niente filo a mezzo pixel) */
  -webkit-clip-path: inset(0 var(--s-home-finale-ni) round var(--s-home-finale-nr));
  clip-path: inset(0 var(--s-home-finale-ni) round var(--s-home-finale-nr));
  /* strato proprio: senza, a zoom 50 % Chrome lascia un filo scuro di 1 px sul bordo alto della sezione */
  transform: translateZ(0);
}

.s-home-finale-in { align-items: start; }
.s-home-finale .s-home-finale-titolo { max-width: none; }
.s-home-finale-riga { display: block; text-wrap: balance; }
.s-home-finale .s-home-finale-testo p { margin-top: 0; }
.s-home-finale-azioni { align-content: start; }

/* tre spunte sotto il pulsante, poi il contatto */
.s-home-finale .s-home-finale-spunte { gap: 0.5rem; font-size: var(--t-small); }
.s-home-finale .s-home-finale-spunte svg { stroke-width: 2.2; }
.s-home-finale .finale-domanda { margin-top: 0.25rem; }

/* sul telefono il pannello è rientrato di 6 px: il testo prende un po' d'aria in più dal bordo */
@media (max-width: 47.99em) {
  .s-home-finale .s-home-finale-in { padding-left: calc(var(--gut-l) + 0.5rem); padding-right: calc(var(--gut-r) + 0.5rem); }
  .s-home-finale-azioni { justify-items: stretch; }
  .s-home-finale-azioni .pulsante { width: 100%; }
}

@media (min-width: 64em) {
  .s-home-finale .s-home-finale-in {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-l); row-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .s-home-finale-titolo { grid-column: 1 / span 10; }
  .s-home-finale-testo { grid-column: 1 / span 6; }
  .s-home-finale-azioni { grid-column: 8 / -1; padding-top: 0.25rem; }
}

/* ---- css/sezioni/home-funzioni.css ---- */
/* =====================================================================
   Home · funzioni (v2, scorrimento controllato)
   Un elenco che imita il menu laterale dell'app (icona a tratto, voce
   attiva con barra indaco) e, da 64 em con puntatore fine, un solo
   ritaglio dell'app a destra con il frammento della voce attiva.
   Sotto, o senza puntatore fine, ogni voce porta il suo frammento.
   Movimento (sezione-home-medio.js, solo con html.moto):
   - da 64 em: la voce che passa sulla linea di lettura diventa attiva; il
     filo indaco di 3 px si riempie con lo scorrimento e scivola alla voce
     nuova con il mosso verticale; il frammento cambia con l'otturatore nel
     verso dello scorrimento e il suo stato avanza con il filo. Da fermo il
     giro parte da solo (5 s per voce, un giro, pausa 44 px).
   - telefono e tablet: ogni frammento fa il suo cambio di stato mentre la
     voce passa dall'90 % al 55 % dello schermo (reversibile).
   Senza JS e con «riduci movimento»: stato finale, «Messaggi» attiva.
   ===================================================================== */

.s-home-funzioni-corpo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.s-home-funzioni-elenco { container: fz / inline-size; border-bottom: 1px solid var(--filetto); min-width: 0; max-width: 46rem; }

/* ---------- voce ---------- */
.s-home-funzioni-voce {
  position: relative;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: 0.875rem;
  row-gap: 0.5rem;
  align-items: start;
  padding-block: 1.5rem;
  border-top: 1px solid var(--filetto);
}
.s-home-funzioni-icona {
  grid-column: 1; grid-row: 1;
  width: 1.25rem; height: 1.25rem; margin-top: 0.2rem;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  color: var(--inchiostro-2);
}
.s-home-funzioni-nome {
  grid-column: 2; grid-row: 1;
  font-size: 1.125rem; font-weight: 640; line-height: 1.3; letter-spacing: -0.012em;
}
.s-home-funzioni-frase,
.s-home-funzioni-mini,
.s-home-funzioni-link { grid-column: 1 / -1; }
.s-home-funzioni-frase { color: var(--inchiostro-2); font-size: var(--t-small); line-height: 1.55; max-width: 34em; }
@container fz (width >= 26rem) {
  .s-home-funzioni-frase, .s-home-funzioni-mini, .s-home-funzioni-link { grid-column: 2; }
}

/* tutta la voce porta al link; il nome accessibile resta il testo del link */
.s-home-funzioni-link { justify-self: start; position: static; }
.s-home-funzioni-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.s-home-funzioni-link:focus-visible { outline: none; }
.s-home-funzioni-voce:has(.s-home-funzioni-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--r-s); }
@media (hover: hover) and (pointer: fine) {
  .s-home-funzioni-voce:hover .s-home-funzioni-link { color: var(--azione-hover); text-decoration-thickness: 2px; }
}

/* ---------- frammento nella voce (telefono, tablet, touch) ---------- */
.s-home-funzioni-mini {
  margin-block: 0.25rem 0.375rem;
  background: var(--q-surface);
  border: 1px solid var(--q-line);
  border-radius: var(--r-m);
  box-shadow: var(--ombra-carta);
  overflow: clip;
}
.s-home-funzioni-mini > .s-home-funzioni-fr { padding: 0.875rem 1rem; }

/* tablet e touch larghi: testo a sinistra, frammento a destra */
@container fz (width >= 40rem) {
  .s-home-funzioni-voce { grid-template-columns: 1.25rem minmax(0, 1fr) minmax(0, 18rem); column-gap: 1rem; }
  .s-home-funzioni-mini { grid-column: 3; grid-row: 1 / span 3; align-self: start; margin: 0; }
}

/* ---------- da 64 em con puntatore fine: menu + ritaglio unico ---------- */
.s-home-funzioni-lato, .s-home-funzioni-filo { display: none; }
@media (min-width: 64em) and (hover: hover) and (pointer: fine) {
  .s-home-funzioni-corpo {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-l);
    align-items: start;
  }
  .s-home-funzioni-elenco { grid-column: 1 / span 5; max-width: none; }
  .s-home-funzioni-lato { display: block; grid-column: 6 / -1; }
  .s-home-funzioni-mini { display: none; }

  .s-home-funzioni-voce { padding: 1rem 1rem 1rem 1.25rem; grid-template-columns: 1.25rem minmax(0, 1fr); }
  .s-home-funzioni-frase, .s-home-funzioni-link { grid-column: 2; }
  .s-home-funzioni-voce::before {
    content: ""; position: absolute; left: 0; top: -1px; bottom: 0; width: 3px;
    background: var(--azione); opacity: 0;
  }
  .s-home-funzioni-voce.is-attiva { background: var(--fondo-2); }
  .s-home-funzioni-voce.is-attiva::before { opacity: 1; }
  .s-home-funzioni-voce.is-attiva .s-home-funzioni-icona { color: var(--azione); }

  /* guidata dallo scorrimento: la barra fissa diventa la traccia, il filo è il riempimento */
  .s-home-funzioni.is-guidata .s-home-funzioni-voce::before { background: var(--filetto-2); }
  .s-home-funzioni.is-guidata .s-home-funzioni-filo {
    display: block;
    position: absolute; left: 0; top: 0; z-index: 2;
    width: 3px; height: 100px;
    background: var(--azione);
    transform-origin: 50% 0;
    transform: scaleY(0);
    pointer-events: none;
  }
  .s-home-funzioni-ritaglio .qa-finestra { box-shadow: var(--ombra-finestra); border-radius: var(--r-xl); }
}
@media (min-width: 64em) and (min-height: 42em) and (hover: hover) and (pointer: fine) {
  .s-home-funzioni-lato { position: sticky; top: calc(var(--testata-h) + 2rem); }
}

/* nota e pausa sotto il ritaglio (come la cornice dei widget) */
.s-home-funzioni-nota { margin-top: 0.75rem; }
.s-home-funzioni-pausa[hidden] { display: none; }

/* il ritaglio: una finestra chiara dell'app, alla sua misura vera */
.s-home-funzioni-ritaglio .qa-app { min-height: 26rem; }
.s-home-funzioni-palco {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4cqi, 3rem);
  background: var(--q-bg);
  overflow: clip;
}
/* nel ritaglio il frammento è più grande: la scala dell'app sopra 1 rem, mai scale().
   Tutti i frammenti stanno nella stessa cella: durante il cambio si incrociano. */
.s-home-funzioni-palco > .s-home-funzioni-fr {
  --qa-u: clamp(0.9375rem, 0.6rem + 1.1cqi, 1.0625rem);
  --qa-t-xs: max(0.75rem, calc(var(--qa-u) * .77));
  --qa-t-s: max(0.75rem, calc(var(--qa-u) * .84));
  --qa-t-m: max(0.75rem, calc(var(--qa-u) * .9));
  --qa-t-b: var(--qa-u);
  grid-area: 1 / 1;
  width: min(100%, 30rem);
  padding: 1.15em 1.25em;
  background: var(--q-surface);
  border: 1px solid var(--q-line);
  border-radius: 12px;
  box-shadow: var(--q-shadow);
}
.s-home-funzioni-palco > .s-home-funzioni-fr[hidden] { display: none; }
/* la voce «Assistenza» non ha bisogno della carta */
.s-home-funzioni-palco > .s-home-funzioni-fr--assistenza { width: auto; padding: 0.75em; }

/* =====================================================================
   Frammenti (testi dei JSON dei widget, dati di esempio)
   ===================================================================== */
.s-home-funzioni-fr { display: grid; gap: 0.7em; min-width: 0; font-size: var(--qa-t-b); line-height: 1.4; color: var(--q-ink); }
.s-home-funzioni-fr .f-testa { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; min-width: 0; min-height: 1.75em; }
.s-home-funzioni-fr .f-titolo { min-width: 0; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-home-funzioni-fr .f-muto { color: var(--q-muted); }
.s-home-funzioni-fr .f-riga { display: flex; min-width: 0; font-size: var(--qa-t-s); }
.s-home-funzioni-fr .f-riga > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-home-funzioni-fr .qa-avanzamento { height: 0.45em; }
/* il riempimento segue lo scorrimento: niente transizione che lo ritarda */
.s-home-funzioni-fr .qa-avanzamento > i { transition: none; }

/* rullo: due valori uno sopra l'altro; lo stato finale (il secondo) è quello del markup */
.s-home-funzioni-fr .f-rullo {
  display: inline-block; position: relative;
  height: 1.2em; line-height: 1.2em;
  overflow: clip; vertical-align: bottom;
}
.s-home-funzioni-fr .f-rullo-t { display: grid; transform: translateY(-50%); }
.s-home-funzioni-fr .f-rullo-t > span { display: block; height: 1.2em; line-height: 1.2em; text-align: right; }

/* esito dell'importazione: durante la corsa niente spunta */
.s-home-funzioni-fr .f-esito.is-corso > .qa-ico { display: none; }

/* fascia di prezzo */
.s-home-funzioni-fr .f-fascia { display: flex; align-items: center; justify-content: space-between; gap: 0.75em; min-width: 0; }
.s-home-funzioni-fr .f-fascia-nome { min-width: 0; font-size: var(--qa-t-m); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-home-funzioni-fr .f-campo {
  display: inline-flex; align-items: baseline; gap: 0.3em; flex: none;
  padding: 0.4em 0.75em; border-radius: 9px;
  border: 1px solid var(--q-brand-line); background: var(--q-bg);
  transition: box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.s-home-funzioni-fr .f-campo.is-fuoco { border-color: var(--q-brand); box-shadow: 0 0 0 3px var(--q-indigo-soft); }
.s-home-funzioni-fr .f-campo > b { font-weight: 800; }
.s-home-funzioni-fr .f-campo > span { color: var(--q-muted); font-size: var(--qa-t-s); font-weight: 700; }

/* riga prodotto del monitoraggio */
.s-home-funzioni-fr .f-prodotto { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75em; }
.s-home-funzioni-fr .f-prodotto .qa-thumb { width: 2.6em; height: 2.6em; }
.s-home-funzioni-fr .f-prodotto-testo { display: grid; gap: 0.35em; min-width: 0; }
.s-home-funzioni-fr .f-prodotto-testo .f-titolo { font-size: var(--qa-t-m); font-weight: 700; }
.s-home-funzioni-fr .f-qta { display: grid; justify-items: end; gap: 0.1em; font-weight: 800; font-size: calc(var(--qa-u) * 1.25); line-height: 1.1; color: var(--q-warn); transition: color var(--dur-fast) ease; }
.s-home-funzioni-fr .f-qta.is-prima { color: var(--q-ink); }
.s-home-funzioni-fr .f-qta > b { font-size: var(--qa-t-xs); font-weight: 800; color: var(--q-muted); }

/* conto dell'ordine */
.s-home-funzioni-fr .f-conto { display: grid; }
.s-home-funzioni-fr .f-conto > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding-block: 0.45em; border-top: 1px solid var(--q-line); }
.s-home-funzioni-fr .f-conto > div:first-child { border-top: 0; padding-top: 0; }
.s-home-funzioni-fr .f-conto dt { color: var(--q-muted); font-size: var(--qa-t-m); }
.s-home-funzioni-fr .f-conto dd { font-weight: 700; }
.s-home-funzioni-fr .f-netto dt { color: var(--q-ink); font-weight: 800; }
.s-home-funzioni-fr .f-netto dd { color: var(--q-ok); font-weight: 800; font-size: calc(var(--qa-u) * 1.2); }

/* fumetto del messaggio automatico */
.s-home-funzioni-fr .f-fumetto {
  justify-self: end; display: grid; gap: 0.35em; max-width: 26em; min-width: 0;
  padding: 0.75em 0.95em; border-radius: 14px 14px 4px 14px;
  background: var(--q-brand); color: #fff;
}
.s-home-funzioni-fr .f-etichetta { font-size: var(--qa-t-xs); font-weight: 800; color: var(--su-indaco); }
.s-home-funzioni-fr .f-fumetto > p { font-size: var(--qa-t-s); line-height: 1.45; }
.s-home-funzioni-fr .f-meta { justify-self: end; font-size: var(--qa-t-xs); color: var(--q-muted); }

/* dati dell'acquirente + pulsante */
.s-home-funzioni-fr .f-dati { display: grid; gap: 0.45em; }
.s-home-funzioni-fr .f-dati > div { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); gap: 0.75em; align-items: baseline; }
.s-home-funzioni-fr .f-dati dt { color: var(--q-muted); font-size: var(--qa-t-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-home-funzioni-fr .f-dati dd { font-weight: 600; font-size: var(--qa-t-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-home-funzioni-fr .f-pulsante { justify-self: start; max-width: 100%; transform-origin: 30% 50%; }
.s-home-funzioni-fr .f-pulsante > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* negozio */
.s-home-funzioni-fr .f-negozio { display: flex; align-items: center; gap: 0.75em; min-width: 0; }
.s-home-funzioni-fr .f-iniziali {
  display: grid; place-items: center; flex: none;
  width: 2.5em; height: 2.5em; border-radius: 10px;
  background: var(--q-indigo-soft); color: var(--q-brand-text);
  font-weight: 900; font-size: var(--qa-t-s);
  box-shadow: inset 0 0 0 1px var(--q-brand-line);
}
.s-home-funzioni-fr .f-negozio-testo { display: grid; gap: 0.1em; min-width: 0; font-size: var(--qa-t-s); }
.s-home-funzioni-fr .f-negozio-testo > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-home-funzioni-fr .f-negozio-testo > strong { color: var(--q-brand-text); font-weight: 800; font-size: var(--qa-t-b); }

/* voce di menu attiva: con il movimento il fondo indaco si stende da sinistra (scaleX) */
.s-home-funzioni-fr .f-voce {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 0.8em; justify-self: start;
  height: 2.75em; padding: 0 1.1em; border-radius: 10px;
  background: var(--q-brand); color: var(--q-on-brand); font-weight: 700;
  max-width: 100%; min-width: 0;
}
.s-home-funzioni-fr .f-voce > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-home-funzioni-fr .f-voce .qa-ico { width: 1.3em; height: 1.3em; flex: none; }
.moto .s-home-funzioni-fr .f-voce.is-stesa { background: transparent; }
.moto .s-home-funzioni-fr .f-voce.is-stesa::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--q-brand);
  transform-origin: 0 50%; transform: scaleX(var(--fu, 1));
}
.moto .s-home-funzioni-fr .f-voce.is-spenta { color: var(--q-muted); }

@media (prefers-reduced-motion: reduce) {
  .s-home-funzioni-fr .f-campo, .s-home-funzioni-fr .f-qta { transition: none; }
}
@media print {
  .s-home-funzioni-filo, .s-home-funzioni-pausa { display: none !important; }
}

/* scheda Bozze: «Pubblicazione su eBay completata» intero, su tutte le larghezze */
.s-home-funzioni-fr--bozze .f-titolo { white-space: normal; overflow: visible; text-overflow: clip; }

/* ---- css/sezioni/home-hero.css ---- */
/* =====================================================================
   Home · hero (v2: M3 «Scorrimento veloce» + «scorrimento controllato», tavolozza P3)
   Titolo grande senza parola colorata (l'accento è l'ingresso: «all'ordine.» arriva
   per ultima con la scia pervinca), sottotitolo, due pulsanti, tre rassicurazioni.
   A destra la scena: da 56 em un palco lavanda che esce dal bordo destro dello
   schermo e, sopra, la finestra Bozze di Qublo (tema scuro +1, bordo pervinca al
   35 %, alone indaco). La corsa M3: le bozze corrono sfocate, si bloccano sulla
   lampada, il conto gira, la bozza va su eBay, la VeRO resta fuori, arriva l'ordine.
   Scorrendo: righe del titolo con data-vel, finestra e palco su due piani
   (data-profondita 0,06 e 0,1), la notifica dell'ordine esce dal piede.
   Stato finale = markup statico (senza JS e con «riduci movimento»).
   Script: js/sezione-home-hero.js.
   ===================================================================== */

/* ---------- impaginazione ---------- */
.s-home-hero {
  background: var(--fondo);
  overflow-x: clip;
  padding-top: clamp(1rem, 3.5svh, 3.25rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.s-home-hero-griglia {
  --hg: clamp(2rem, 4vw, 4.5rem); --c1: 0.5;
  display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: var(--hg); row-gap: clamp(0.875rem, 2.4svh, 2rem);
}
.s-home-hero-titolo { color: var(--inchiostro); }
/* righe del titolo: larghe quanto il testo, così la sfocatura dalla velocità resta sull'area del testo */
.s-home-hero-r1 { width: fit-content; max-width: 100%; }
.s-home-hero-coda { display: block; }
.s-home-hero-coda > .riga { display: inline-block; max-width: 100%; }
.s-home-hero-testo { display: grid; align-content: start; gap: clamp(1.125rem, 2.8svh, 2rem); min-width: 0; }
.s-home-hero-guida { max-width: 36em; }
.s-home-hero-prima, .s-home-hero-guida-dopo { display: none; }
.s-home-hero-rassicurazioni li { min-width: 0; }

@media (max-width: 29.99em) {
  /* telefono: sopra la finestra solo la prima frase, il resto va sotto; i pulsanti sulla stessa riga */
  .s-home-hero-guida { line-height: 1.5; }
  .s-home-hero-tutto { display: none; }
  .s-home-hero-prima { display: inline; }
  .s-home-hero-guida-dopo { display: block; font-size: 1rem; line-height: 1.5; }
}

@media (max-width: 55.99em) {
  .s-home-hero-testo { display: contents; }
  /* tablet: le spunte restano subito sotto i pulsanti, poi la finestra */
  .s-home-hero-titolo { order: 1; }
  .s-home-hero-guida { order: 2; }
  .s-home-hero-azioni { order: 3; }
  .s-home-hero-rassicurazioni { order: 4; }
  .s-home-hero-scena { order: 5; margin-top: 0.5rem; }
  .s-home-hero-guida-dopo { order: 6; }
}
@media (max-width: 29.99em) {
  /* telefono: la finestra subito dopo i pulsanti, le spunte in fondo */
  .s-home-hero-scena { order: 4; margin-top: 0.25rem; }
  .s-home-hero-guida-dopo { order: 5; }
  .s-home-hero-rassicurazioni { order: 6; margin-top: 0.25rem; }
}
/* desktop: un blocco unico. La prima riga del titolo corre su tutta la larghezza,
   la scena sale accanto alla seconda, che va a capo nella colonna di sinistra */
@media (min-width: 56em) {
  .s-home-hero-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; }
  .s-home-hero-titolo { grid-column: 1 / -1; grid-row: 1; }
  .s-home-hero-coda { max-width: calc((100% - var(--hg)) * var(--c1) + var(--hg) * 0.65); }
  .s-home-hero-testo { grid-column: 1; grid-row: 2; padding-top: 0.25rem; }
  .s-home-hero-scena {
    grid-column: 2; grid-row: 1 / span 2; z-index: 2;
    margin-top: calc(var(--t-h1) * 1.02 + clamp(0.5rem, 1.6svh, 1.25rem));
  }
  /* data-profondita sposta la finestra di (centro − metà schermo) × 0,06: sugli schermi molto alti
     (qhd, zoom 50-67 %) a riposo la alzerebbe verso il titolo. Questo margine lo compensa, così il
     distacco dal titolo resta quello di un Mac (circa 17 px); solo quando la profondità è attiva */
  .moto .s-home-hero-scena {
    margin-top: calc(var(--t-h1) * 1.02 + clamp(0.5rem, 1.6svh, 1.25rem) + max(0px, 2.84svh - 2.09rem));
  }
}
@media (min-width: 80em) {
  .s-home-hero-griglia { --c1: calc(5 / 12); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
/* schermi bassi (zoom del browser, Mac piccoli): testo e pulsanti nella prima schermata */
@media (max-height: 40em) and (min-width: 56em) {
  .s-home-hero { padding-top: 0.75rem; }
  .s-home-hero-griglia { row-gap: 0.75rem; }
  .s-home-hero-testo { gap: 0.875rem; }
  .s-home-hero-guida { font-size: 1rem; line-height: 1.45; }
}

/* prima del movimento: titolo e frase pronti a entrare (solo con movimento permesso).
   Se lo script non parte, l'animazione di sicurezza li mostra dopo 1,2 s. */
.moto .s-home-hero:not(.is-via) .s-home-hero-titolo .riga-t,
.moto .s-home-hero:not(.is-via) .s-home-hero-guida { opacity: 0; animation: s-home-hero-sicuro 1ms 1.2s forwards; }
@keyframes s-home-hero-sicuro { to { opacity: 1; } }

/* ---------- scena: palco e finestra su due piani ---------- */
/* il palco (data-profondita 0,1) e la finestra con la didascalia (0,06) si spostano solo con
   transform, da scorrimento.js; qui solo posizione e aspetto */
.s-home-hero-scena { position: relative; min-width: 0; }
.s-home-hero-palco { display: none; }
.s-home-hero-cornice { position: relative; z-index: 1; }
/* sotto 56 em la finestra sta tra il testo e le spunte, senza palco: resta ferma nel flusso
   (la profondità la sposterebbe verso i pulsanti o le spunte) */
@media (max-width: 55.99em) {
  .s-home-hero-cornice[data-profondita] { transform: none !important; }
}
@media (min-width: 56em) {
  /* piano lavanda piena dietro finestra e didascalia: la finestra sporge in alto di circa 3 rem,
     il palco esce dal bordo destro dello schermo; a sinistra resta sempre almeno 1 rem dalla
     colonna del titolo, così non lo tocca mai */
  .s-home-hero-palco {
    --pr: clamp(1.75rem, 2.4vw, 2.125rem);
    display: block; position: absolute; z-index: 0; pointer-events: none;
    top: 3.25rem; bottom: -1.5rem;
    left: calc(-1 * min(1.75rem, var(--hg) - 1rem));
    right: calc(-1 * (var(--gut-r) + max(0px, (100vw - var(--max-content) - var(--gut-l) - var(--gut-r)) / 2)));
    border-radius: var(--pr) 0 0 var(--pr);
    background: var(--lav-piena);
    border: 1px solid var(--line); border-right: 0;
  }
  /* filetto pervinca sul bordo alto: nasce dopo l'angolo e sfuma verso destra */
  .s-home-hero-palco::before {
    content: ""; position: absolute; left: 2rem; right: 0; top: -1px; height: 1px;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--pervinca) 0%, transparent),
      color-mix(in srgb, var(--pervinca) 70%, transparent) 25%,
      color-mix(in srgb, var(--pervinca) 30%, transparent));
  }
}

/* nota e pulsante Pausa / Rivedi */
.s-home-hero .cornice-nota { gap: 0.75rem; }
.s-home-hero .pausa[hidden] { display: none; }

/* ---------- finestra dell'app (notte, Inter) ---------- */
.s-home-hero-cornice { min-width: 0; }
.s-home-hero-fin {
  --rh: 3.5rem;
  container: s-home-hero-fin / inline-size;
  position: relative;
  border-radius: var(--r-xl);
  background: var(--notte);
  border: 1px solid var(--bordo-p);
  box-shadow: var(--ombra-finestra);
  overflow: hidden;
  font-family: var(--font-app);
  color: var(--ink-d);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
@media (min-width: 56em) { .s-home-hero-fin { --rh: 3.75rem; } }
.s-home-hero-fin svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.s-home-hero-fin-in { position: relative; }

.s-home-hero-barra {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--line-d); background: var(--riflesso), var(--sup);
}
.s-home-hero-contatore {
  padding: 0.2rem 0.5rem; border-radius: var(--r-xs); background: color-mix(in srgb, var(--indaco) 22%, var(--sup));
  color: var(--indaco-ch); font-weight: 800; font-size: 0.75rem; line-height: 1.25;
}
.s-home-hero-nome { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; margin-right: auto; }
.s-home-hero-cerca {
  display: none; align-items: center; gap: 0.4rem; flex: 0 1 14rem; min-width: 0;
  height: 2.25rem; padding: 0 0.75rem; border-radius: 11px; border: 1px solid var(--line-d); background: var(--notte);
  color: var(--muted-d); font-size: 0.75rem; white-space: nowrap; overflow: hidden;
}
.s-home-hero-cerca svg { width: 0.9rem; height: 0.9rem; flex: none; }
.s-home-hero-cerca span { overflow: hidden; text-overflow: ellipsis; }
.s-home-hero-campana { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-s); color: var(--muted-d); flex: none; }
.s-home-hero-campana svg { width: 1.1rem; height: 1.1rem; }
.s-home-hero-punto { position: absolute; top: 0.45rem; right: 0.5rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--indaco-ch); box-shadow: 0 0 0 2px var(--sup); }
.s-home-hero-crea {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 2.25rem; padding: 0 0.75rem; flex: none;
  border-radius: var(--r-s); background: var(--indaco); color: #fff; font-weight: 800; font-size: 0.75rem; white-space: nowrap;
}
.s-home-hero-crea svg { width: 0.95rem; height: 0.95rem; }
@container s-home-hero-fin (max-width: 22rem) { .s-home-hero-crea span { display: none; } .s-home-hero-crea { padding: 0 0.6rem; } }

.s-home-hero-testa, .s-home-hero-fila {
  display: grid; align-items: center; column-gap: 0.75rem;
  grid-template-columns: 1rem minmax(0, 1fr) 5.75rem;
  padding: 0 0.875rem;
}
.s-home-hero-testa {
  height: 2.375rem; border-bottom: 1px solid var(--line-d);
  color: var(--indaco-ch); font-weight: 800; font-size: 0.75rem;
}
.s-home-hero-testa .s-home-hero-c-sel, .s-home-hero-fila .s-home-hero-c-sel i {
  display: block; width: 0.875rem; height: 0.875rem; border-radius: 4px;
  border: 1.5px solid var(--chk);
}
.s-home-hero-c-prezzo { display: none; }
.s-home-hero-c-prof { text-align: right; }
@container s-home-hero-fin (min-width: 30rem) {
  .s-home-hero-testa, .s-home-hero-fila { grid-template-columns: 1rem minmax(0, 1fr) 7.75rem 6rem; column-gap: 1rem; padding: 0 1.125rem; }
  .s-home-hero-c-prezzo { display: block; }
  .s-home-hero-cerca { display: inline-flex; }
}

/* la colonna: senza JS segue il flusso; con JS ha l'altezza calcolata (finisce sul bordo di una riga) */
.s-home-hero-rullo, .s-home-hero-lente, .s-home-hero-nastro { position: relative; }
.js .s-home-hero-rullo {
  height: var(--reel-h, calc(var(--rh) * 7));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 0.875rem, #000 calc(100% - 0.5rem), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 0.875rem, #000 calc(100% - 0.5rem), transparent 100%);
}
.js .s-home-hero-lente { position: absolute; inset: 0; overflow: hidden; }
.js .s-home-hero-nastro {
  position: absolute; left: 0; right: 0; top: 0;
  transform: translate3d(0, var(--rh), 0);
  transform-origin: 50% calc(var(--rh) * 1.5);
}
.s-home-hero-fila {
  height: var(--rh);
  border-top: 1px solid color-mix(in srgb, var(--line-d) 70%, transparent);
  position: relative;
  background: var(--notte);
}
.s-home-hero-c-prod { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.s-home-hero-mini {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 9px; background: var(--sup-2);
  display: grid; place-items: center; color: var(--muted-d);
}
.s-home-hero-mini svg { width: 1.375rem; height: 1.375rem; }
.s-home-hero-tit { display: grid; gap: 0.25rem; min-width: 0; }
.s-home-hero-tit b { font-weight: 800; font-size: 0.8125rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-home-hero-pillole { display: flex; flex-wrap: wrap; gap: 0.3rem; overflow: hidden; height: 1.25rem; min-width: 0; }
.s-home-hero-pil {
  display: inline-block; height: 1.25rem; padding: 0 0.4rem; border-radius: 7px;
  font-weight: 800; font-size: 0.75rem; white-space: nowrap; line-height: 1.25rem;
  background: var(--sup-2); color: var(--muted-d);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.s-home-hero-pil--avv { background: color-mix(in srgb, var(--ambra) 13%, var(--sup)); color: var(--ambra); }
.s-home-hero-pil--pub { background: color-mix(in srgb, var(--lime) 12%, var(--sup)); color: var(--lime); }
.s-home-hero-kv { display: block; font-size: 0.75rem; line-height: 1.45; white-space: nowrap; color: var(--ink-d); }
.s-home-hero-kv em { font-style: normal; font-weight: 800; color: var(--muted-d); margin-right: 0.15rem; }
.s-home-hero-netto { display: block; font-weight: 800; font-size: 0.8125rem; color: var(--ink-d); white-space: nowrap; }
.s-home-hero-roi { display: block; font-size: 0.75rem; color: var(--muted-d); white-space: nowrap; }
/* il lime resta sul profitto della riga scelta; durante la corsa i profitti lime passano come lampi */
.s-home-hero-fila.is-scelta .s-home-hero-netto,
.s-home-hero-nastro.is-corsa .s-home-hero-fila .s-home-hero-netto { color: var(--lime); }

/* fasce sfocate: due copie della colonna, solo sopra e sotto la riga d'arrivo e solo sulla colonna Prodotto
   (al massimo 480 × 320 px; sotto i 768 px 320 × 200). Prezzi, profitti e riga centrale restano nitidi. */
.s-home-hero-fascia-sf {
  position: absolute; left: 0; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 1; display: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
}
.s-home-hero-fascia-sf.is-on { display: block; }
.s-home-hero-fascia-sf > .s-home-hero-nastro { position: absolute; left: 0; right: auto; width: var(--win-w, 100%); top: 0; }
.s-home-hero-sfuma { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2; opacity: 0; }
.s-home-hero-sfuma--alto { top: 0; height: calc(var(--rh) * 0.7); background: linear-gradient(180deg, var(--notte), color-mix(in srgb, var(--notte) 0%, transparent)); }
.s-home-hero-sfuma--basso { bottom: 0; height: 38%; background: linear-gradient(0deg, var(--notte), color-mix(in srgb, var(--notte) 0%, transparent)); }

/* riga scelta e conto aperto */
.s-home-hero-fila.is-sel {
  background: var(--sup-2);
  border: 1px solid var(--indaco); border-bottom-color: transparent;
  border-radius: 12px 12px 0 0;
  margin: 0 0.375rem;
  padding-left: calc(0.875rem - 0.375rem - 1px); padding-right: calc(0.875rem - 0.375rem - 1px);
  z-index: 1;
}
@container s-home-hero-fin (min-width: 30rem) {
  .s-home-hero-fila.is-sel { padding-left: calc(1.125rem - 0.375rem - 1px); padding-right: calc(1.125rem - 0.375rem - 1px); }
}
.s-home-hero-fila.is-sel .s-home-hero-mini { background: var(--sup-3); color: var(--indaco-ch); }
.s-home-hero-fila.is-sel .s-home-hero-pil--ok { background: var(--sup-3); }
.s-home-hero-fila.is-scelta { height: auto; min-height: var(--rh); padding-block: 0.5rem; }
.s-home-hero-fila.is-scelta .s-home-hero-tit b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.s-home-hero-fila.is-scelta .s-home-hero-pillole { height: auto; max-height: 2.8rem; }
.s-home-hero-fila.is-sel .s-home-hero-c-sel i { background: var(--indaco); border-color: var(--indaco); position: relative; }
.s-home-hero-fila.is-sel .s-home-hero-c-sel i::after {
  content: ""; position: absolute; left: 0.22rem; top: 0.06rem; width: 0.25rem; height: 0.45rem;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.s-home-hero-fila.is-ferma .s-home-hero-mini { color: var(--ambra); }
.s-home-hero-dett {
  position: relative; z-index: 1;
  margin: 0 0.375rem 0.25rem;
  padding: 0.75rem 1rem 1rem;
  background: var(--sup-2);
  border: 1px solid var(--indaco); border-top: 1px solid var(--line-d);
  border-radius: 0 0 12px 12px;
  display: grid; gap: 0.75rem;
}
.s-home-hero-voci { display: grid; gap: 0.125rem; align-content: start; margin: 0; }
.s-home-hero-voce { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.2rem 0; font-size: 0.8125rem; line-height: 1.25; }
.s-home-hero-voce dt { color: var(--muted-d); min-width: 0; }
.s-home-hero-voce dd { margin: 0; font-weight: 700; white-space: nowrap; }
.s-home-hero-fascia { color: var(--muted-d); font-size: 0.75rem; }
.s-home-hero-voce--tot { margin-top: 0.3rem; padding-top: 0.45rem; border-top: 1px solid var(--line-d); }
.s-home-hero-voce--tot dt, .s-home-hero-voce--tot dd { color: var(--ink-d); font-weight: 700; }
.s-home-hero-grandi { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.s-home-hero-grande {
  display: grid; gap: 0.15rem; padding: 0.625rem 0.75rem; border-radius: var(--r-s); background: var(--sup);
  border: 1px solid var(--line-d); min-width: 0;
}
.s-home-hero-grande > span { font-size: 0.75rem; color: var(--muted-d); font-weight: 600; }
.s-home-hero-grande strong { font-size: 1.25rem; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.s-home-hero-grande small { font-size: 0.75rem; color: var(--muted-d); }
.s-home-hero-grande--netto strong { color: var(--lime); }
@container s-home-hero-fin (min-width: 36rem) {
  .s-home-hero-dett { grid-template-columns: minmax(0, 19rem) minmax(0, 15rem); justify-content: space-between; gap: 1.25rem; padding: 0.875rem 1.125rem 1rem; align-items: start; }
  .s-home-hero-grandi { grid-template-columns: 1fr; }
  .s-home-hero-grande strong { font-size: 1.375rem; }
}
@container s-home-hero-fin (max-width: 19rem) {
  .s-home-hero-grande strong { font-size: 1.0625rem; }
}

/* cornice di mira: compare mentre la colonna rallenta, al blocco diventa indaco */
.s-home-hero-mirino {
  position: absolute; left: 0.375rem; right: 0.375rem; top: var(--rh); height: var(--rh);
  border: 1.5px solid var(--pervinca); border-radius: 12px; pointer-events: none; opacity: 0;
}
.s-home-hero-mirino.is-preso { border-color: var(--indaco); }
/* scia verso eBay: solo il contorno della riga, nessun testo leggibile */
.s-home-hero-scia { position: absolute; left: 0.375rem; right: 0.375rem; top: var(--rh); height: var(--rh); pointer-events: none; z-index: 2; }
.s-home-hero-scia-c { position: absolute; inset: 0; border: 1.5px solid var(--pervinca); border-radius: 12px; opacity: 0; transform-origin: 0 50%; }

/* stati del movimento (impostati dallo script) */
.s-home-hero-nastro.is-corsa .s-home-hero-dett { position: absolute; left: 0; right: 0; visibility: hidden; }
.s-home-hero-nastro.is-corsa .s-home-hero-fila.is-scelta {
  height: var(--rh); min-height: 0; background: var(--notte); border: 0;
  border-top: 1px solid color-mix(in srgb, var(--line-d) 70%, transparent);
  border-radius: 0; margin: 0; padding: 0 0.875rem;
}
@container s-home-hero-fin (min-width: 30rem) { .s-home-hero-nastro.is-corsa .s-home-hero-fila.is-scelta { padding: 0 1.125rem; } }
.s-home-hero-nastro.is-corsa .s-home-hero-fila.is-scelta .s-home-hero-tit b { white-space: nowrap; display: block; }
.s-home-hero-nastro.is-corsa .s-home-hero-fila.is-scelta .s-home-hero-pillole { height: 1.25rem; }
.s-home-hero-nastro.is-corsa .s-home-hero-fila.is-scelta .s-home-hero-mini { background: var(--sup-2); color: var(--muted-d); }
.s-home-hero-nastro.is-corsa .s-home-hero-fila.is-scelta .s-home-hero-c-sel i { background: transparent; border-color: var(--chk); }
.s-home-hero-nastro.is-corsa .s-home-hero-fila.is-scelta .s-home-hero-c-sel i::after { display: none; }
.s-home-hero-nastro.is-corsa .s-home-hero-fila.is-scelta .s-home-hero-netto { color: var(--ink-d); }
.s-home-hero-nastro.is-corsa .s-home-hero-pil--pub { display: none; }

/* piede della finestra: prima «Mostrando…», poi il pannello di pubblicazione, infine l'ordine */
.s-home-hero-piede {
  position: relative; height: 4.25rem; border-top: 1px solid var(--line-d); background: var(--sup);
  overflow: hidden;
}
.s-home-hero-elenco, .s-home-hero-pub { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 0.875rem; }
.s-home-hero-elenco { justify-content: space-between; gap: 1rem; color: var(--muted-d); font-size: 0.75rem; }
.s-home-hero-elenco > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-home-hero-pagine { display: inline-flex; gap: 0.25rem; flex: none; }
.s-home-hero-pagine svg { width: 1.75rem; height: 1.75rem; padding: 0.35rem; border-radius: var(--r-xs); border: 1px solid var(--line-d); }
.s-home-hero-pub { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 0.75rem; row-gap: 0.45rem; align-content: center; }
/* stato finale: nel piede resta la notifica dell'ordine (non copre mai la tabella) */
.s-home-hero-piede .s-home-hero-elenco, .s-home-hero-piede .s-home-hero-pub { opacity: 0; }
.s-home-hero-pub-ic {
  grid-row: 1 / span 2; width: 2rem; height: 2rem; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--indaco) 22%, var(--sup)); color: var(--indaco-ch);
}
.s-home-hero-pub-ic svg { width: 1.05rem; height: 1.05rem; stroke-width: 2.4; opacity: 0; }
.s-home-hero-pub.is-fatta .s-home-hero-pub-ic { background: color-mix(in srgb, var(--lime) 14%, var(--sup)); color: var(--lime); }
.s-home-hero-pub.is-fatta .s-home-hero-pub-ic svg { opacity: 1; }
.s-home-hero-pub-tx { display: grid; gap: 0.1rem; min-width: 0; }
.s-home-hero-pub-t { font-size: 0.8125rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-home-hero-pub-s { font-size: 0.75rem; color: var(--muted-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-home-hero-pub-n { padding: 0.15rem 0.45rem; border-radius: 7px; background: color-mix(in srgb, var(--indaco) 30%, var(--sup)); color: var(--indaco-ch); font-size: 0.75rem; font-weight: 800; white-space: nowrap; }
.s-home-hero-pub-barra { grid-column: 2 / -1; height: 0.3125rem; border-radius: var(--r-pieno); background: var(--sup-3); overflow: hidden; }
.s-home-hero-pub-barra i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--indaco); transform-origin: 0 50%; }
.s-home-hero-pub.is-fatta .s-home-hero-pub-barra i { background: var(--lime); }
@container s-home-hero-fin (min-width: 30rem) { .s-home-hero-elenco, .s-home-hero-pub { padding: 0 1.125rem; } }

/* notifica «Nuovo ordine eBay»: entra nel piede, dopo la pubblicazione */
.s-home-hero-avviso {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%; z-index: 2;
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0 0.875rem; background: var(--sup);
}
@container s-home-hero-fin (min-width: 30rem) { .s-home-hero-avviso { padding: 0 1.125rem; } }
.s-home-hero-avviso-ic { flex: none; width: 2rem; height: 2rem; border-radius: 9px; display: grid; place-items: center; background: var(--indaco); color: #fff; }
.s-home-hero-avviso-ic svg { width: 1.05rem; height: 1.05rem; }
.s-home-hero-avviso-tx { display: grid; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.s-home-hero-avviso-tx b { font-size: 0.8125rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-home-hero-avviso-tx span { font-size: 0.75rem; color: var(--muted-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-home-hero-avviso-q { flex: none; padding: 0.15rem 0.45rem; border-radius: 7px; border: 1px solid var(--line-d); color: var(--muted-d); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }

/* ---------- riduci movimento: tutto fermo, stato finale ---------- */
@media (prefers-reduced-motion: reduce) {
  .s-home-hero .riga-t, .s-home-hero-guida { opacity: 1 !important; transform: none !important; filter: none !important; }
  .s-home-hero-fascia-sf, .s-home-hero-scia, .s-home-hero-sfuma { display: none !important; }
}
.fermo .s-home-hero .riga-t, .fermo .s-home-hero-guida { opacity: 1; }
.fermo .s-home-hero-fascia-sf, .fermo .s-home-hero-scia { display: none; }

/* la colonna si vede solo quando lo script l'ha preparata: nessuno spostamento davanti all'utente (PRESTAZIONI § 0) */
.moto .s-home-hero-rullo:not(.is-pronto) .s-home-hero-lente { visibility: hidden; animation: s-home-hero-mostra 1ms 3s forwards; }
@keyframes s-home-hero-mostra { to { visibility: visible; } }

/* titolo sempre su 3 righe, anche in inglese a 1280-1512 px e sullo schermo di Marco */
.s-home-hero { --t-h1: clamp(2.125rem, min(1rem + 4.3vw, 0.8rem + 6.4svh), 5.05rem); }

/* ---- css/sezioni/home-perche.css ---- */
/* =====================================================================
   Home · «Perché Qublo»: testata centrata, quattro carte in una griglia 2 × 2.
   Ogni carta conserva la prova piccola dell'app legata allo scorrimento
   (sezione-home-percorso.js, «home-perche», Qublo.scorri.scena): il filetto della riga
   si traccia, la prova avanza con la rotella e torna indietro se risali.
   Senza JS, con «riduci movimento» e in stampa le carte sono già nello stato finale.
   ===================================================================== */
.s-home-perche-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.25rem); }
.s-home-perche-testa { position: static; max-width: 46rem; margin: 0 auto; text-align: center; }
.s-home-perche-testa .guida { margin: 1rem auto 0; max-width: 36em; }
.s-home-perche-lista { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 1.5rem; width: 100%; max-width: none; margin: 0; padding: 0; list-style: none; border-bottom: 0; }
.s-home-perche-punto {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto;
  gap: 1.5rem; min-width: 0; height: 100%; padding: clamp(1.25rem, 2.2vw, 2rem);
  border: 1px solid #E0E4EF; border-radius: 18px; background: #FFFFFF;
  box-shadow: 0 10px 28px -26px rgba(22, 26, 51, .2);
}
/* Il filetto resta animato dallo script, ora sul bordo superiore di ogni carta. */
.s-home-perche-punto::before {
  content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 2px;
  background: color-mix(in srgb, var(--pervinca) 55%, #FFFFFF); border-radius: 999px;
  transform: scaleX(var(--s-home-perche-filo, 1)); transform-origin: 0 50%;
}
.s-home-perche-testo { min-width: 0; }
.s-home-perche-testo .titolo-3 { max-width: 30ch; }
.s-home-perche-testo p { margin-top: .75rem; color: var(--inchiostro-2); max-width: 40em; }

@media (min-width: 48em) { .s-home-perche-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); } }

/* ---------- prove: carte dell'app (Inter, cifre tabellari) ---------- */
.s-home-perche-prova {
  display: grid; align-content: center; gap: 1rem; min-width: 0; min-height: 11rem;
  width: 100%; padding: 1rem 1.1rem; border: 1px solid #E6E9F3; border-radius: 12px;
  background: #F8F9FD; box-shadow: none;
  font-family: var(--font-app); font-variant-numeric: tabular-nums;
  font-size: var(--t-min); line-height: 1.35; color: var(--inchiostro);
}
.s-home-perche .carta.s-home-perche-prova { background: #F8F9FD; }
.s-home-perche-cifra {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; min-width: 0;
  color: var(--inchiostro-2); font-size: var(--t-xs); font-weight: 600;
}
.s-home-perche-grande { color: var(--inchiostro); font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }

/* barra del prezzo: le quote vere di 43,87 (21,40 + 7,49 + 5,33 + 9,65) */
.s-home-perche-barra { display: flex; gap: 3px; height: 0.875rem; border-radius: var(--r-pieno); overflow: hidden; }
.s-home-perche-barra i { display: block; height: 100%; transform-origin: 0 50%; }
.s-home-perche-barra .s-home-perche-c1 { flex: 48.8; }
.s-home-perche-barra .s-home-perche-c2 { flex: 17.1; }
.s-home-perche-barra .s-home-perche-c3 { flex: 12.1; }
.s-home-perche-barra .s-home-perche-c4 { flex: 22; }
.s-home-perche-c1 { background: var(--ink); }
.s-home-perche-c2 { background: var(--verde); }
.s-home-perche-c3 { background: var(--indaco); }
.s-home-perche-c4 { background: var(--pervinca); }
.s-home-perche-legenda { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; color: var(--inchiostro-2); }
.s-home-perche-legenda > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.s-home-perche-legenda i { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 2px; flex: none; }

/* riga prodotto */
.s-home-perche-riga { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.s-home-perche-riga b { min-width: 0; font-weight: 800; font-size: var(--t-xs); line-height: 1.25; color: var(--inchiostro); }
.s-home-perche-foto {
  flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9px;
  background: color-mix(in srgb, var(--indaco) 10%, var(--bianco)); color: var(--indaco);
}
.s-home-perche-foto--avviso { background: color-mix(in srgb, var(--ambra) 18%, var(--bianco)); color: var(--ambra-t); }
.s-home-perche-foto svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.s-home-perche-dati { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.s-home-perche-piede { position: relative; border-top: 1px solid var(--filetto); padding-top: 0.625rem; }
/* il controllo corre sul filetto (pervinca: filetto attivo), poi si spegne e resta l'avviso */
.s-home-perche-piede::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; border-radius: 1px;
  background: var(--pervinca); opacity: 0; pointer-events: none;
  transform: scaleX(var(--s-home-perche-controllo, 0)); transform-origin: 0 50%;
  transition: opacity var(--dur-base) var(--ease-out);
}
.s-home-perche-prova.is-controllo .s-home-perche-piede::before { opacity: 1; transition-duration: 0ms; }

/* pillole dell'app (stato sempre scritto) */
.s-home-perche-pill {
  display: inline-flex; align-items: center; min-height: 1.625rem; padding: 0 0.55rem; border-radius: var(--r-xs);
  font-weight: 800; font-size: var(--t-min); white-space: nowrap;
  background: color-mix(in srgb, var(--muted) 12%, var(--bianco)); color: var(--muted);
  transition: background-color var(--dur-base) ease, color var(--dur-base) ease;
}
.s-home-perche-pill--ok { background: color-mix(in srgb, var(--verde) 10%, var(--bianco)); color: var(--verde); }
.s-home-perche-pill--avviso { background: color-mix(in srgb, var(--ambra) 22%, var(--bianco)); color: var(--ambra-t); }
.s-home-perche-pill--vero.is-on { background: var(--ambra); color: var(--ink); }

/* QTA su un nastro di cifre: 3 → 0 → 3 */
.s-home-perche-qta { display: inline-flex; align-items: baseline; gap: 0.4rem; color: var(--inchiostro); }
.s-home-perche-qta em { font-style: normal; font-weight: 800; color: var(--inchiostro-2); }
.s-home-perche-nastro {
  position: relative; display: inline-block; font-size: 1.625rem; font-weight: 800; line-height: 1.2em; letter-spacing: -0.02em;
  -webkit-clip-path: inset(0); clip-path: inset(0);
}
.s-home-perche-nastro-s { visibility: hidden; }
.s-home-perche-nastro-t { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; }
.s-home-perche-nastro-t > span { display: block; height: 1.2em; line-height: 1.2em; }

/* menu del pannello: la voce attiva indaco */
.s-home-perche-menu { position: relative; align-content: start; gap: 2px; padding: 0.5rem; }
.s-home-perche-menu > span {
  position: relative; z-index: 1; display: flex; align-items: center; min-height: 2.25rem; padding: 0 0.75rem; border-radius: 9px;
  font-weight: 600; font-size: 0.875rem; color: var(--inchiostro-2); transition: color 200ms ease;
}
.s-home-perche-menu > .is-on { background: var(--indaco); color: var(--bianco); font-weight: 700; }
.s-home-perche-indicatore { position: absolute; left: 0.5rem; right: 0.5rem; top: 0.5rem; height: 2.25rem; border-radius: 9px; background: var(--indaco); display: none; }
.s-home-perche-menu.is-anim .s-home-perche-indicatore { display: block; }
.s-home-perche-menu.is-anim > .is-on { background: transparent; }
.s-home-perche-menu.is-anim > span.is-on:not(.is-qui) { color: var(--inchiostro-2); font-weight: 600; }
.s-home-perche-menu.is-anim > span.is-qui { color: var(--bianco); }

/* sotto 768 px le carte sono larghe quasi tutto lo schermo (oltre 320 × 200): niente sfocatura
   dalla velocità su di loro; restano quelle piccole delle scene (cifre, indicatore) */
@media (max-width: 47.99em) {
  .s-home-perche-lista { grid-auto-rows: auto; gap: 1.25rem; }
  .s-home-perche-punto { gap: 1.25rem; border-radius: 16px; }
  .s-home-perche-testo .titolo-3 { max-width: none; }
  .s-home-perche-prova { padding-inline: .9rem; }
  .s-home-perche-menu { padding: .5rem; }
  .s-home-perche-prova[data-vel] { filter: none !important; transform: none !important; }
}

@media (forced-colors: active) {
  .s-home-perche-barra i, .s-home-perche-legenda i { forced-color-adjust: none; }
  .s-home-perche-punto::before { forced-color-adjust: none; background: CanvasText; }
  .s-home-perche-menu > .is-on { outline: 2px solid CanvasText; }
}

/* ---- css/sezioni/home-percorso.css ---- */
/* =====================================================================
   Home · «Dal link all'ordine, in cinque passi» (blocco notte, il pezzo forte)
   Due modi:
   - impilato (predefinito, senza JS, «riduci movimento», telefono, tablet in verticale, zoom):
     ogni passo ha titolo, frase e la sua schermata; i widget partono da soli quando entrano;
   - fisso (.is-fisso, messo dallo script da 64 em × 40 em con movimento permesso): palco fermo
     sotto l'intestazione, cinque tappe come barra di avanzamento, una sola finestra. Ogni
     schermata ha la sua fetta di scorrimento (6 × min(70svh, 40rem)): la scena avanza e torna
     con la rotella, la barra della tappa si riempie con la scena, poi la schermata cambia.
   ===================================================================== */
.s-home-percorso-giro { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* tappe: solo nel modo fisso */
.s-home-percorso-tappe { display: none; }

/* ---------- passi (modo impilato) ---------- */
.s-home-percorso-passi { display: grid; gap: clamp(3.5rem, 9vw, 5.5rem); }
.s-home-percorso-passo { display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); min-width: 0; scroll-margin-top: calc(var(--testata-h) + 1rem); }
.s-home-percorso-testo { min-width: 0; max-width: 40rem; }
.s-home-percorso-testo .titolo-3 { display: flex; align-items: baseline; gap: 0.75rem; color: var(--inchiostro); }
.s-home-percorso-testo .passo-n { flex: none; transform: translateY(-0.1em); }
.s-home-percorso-testo p { margin-top: 0.75rem; color: var(--inchiostro-2); max-width: 34em; }
.s-home-percorso-schermi { display: grid; gap: clamp(2rem, 5vw, 3rem); min-width: 0; }
.s-home-percorso-schermo { margin: 0; }

/* impilato su schermi larghi (senza JS e con «riduci movimento»): testo 4 / schermata 8, come il
   palco; il testo resta accanto alla sua schermata (il passo 5 ne ha due) */
@media (min-width: 64em) {
  .s-home-percorso:not(.is-fisso) .s-home-percorso-passo {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap-l); align-items: start;
  }
}
@media (min-width: 64em) and (min-height: 40em) {
  .s-home-percorso:not(.is-fisso) .s-home-percorso-testo { position: sticky; top: calc(var(--testata-h) + 1.5rem); }
}

/* passo 3: la tabella del passo 1, già finita; si accende cosa manca */
.s-home-percorso-passo[data-controlla] .qa-pill--warn { box-shadow: 0 0 0 2px var(--ambra); }
.s-home-percorso-passo[data-controlla] .wi-stato { display: none; }
/* nel modo fisso l'anello si chiude con lo scorrimento (.is-anello, messo dallo script) */
.s-home-percorso.is-fisso .s-home-percorso-passo[data-controlla] .qa-pill--warn {
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.s-home-percorso.is-fisso .s-home-percorso-passo[data-controlla]:not(.is-anello) .qa-pill--warn {
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--ambra) 0%, transparent);
}

/* passo 5 sotto 36 rem: solo Ordini (il monitoraggio si vede intero in Funzionalità) */
@media (max-width: 35.99em) {
  .s-home-percorso:not(.is-fisso) .s-home-percorso-schermo--prima { display: none; }
}

/* lo sbordo a destra vale solo nel modo fisso */
.s-home-percorso:not(.is-fisso) .cornice--sborda-destra > .cornice-schermo { width: auto; }

/* ---------- modo fisso ---------- */
.s-home-percorso.is-fisso {
  --s-home-percorso-alto: clamp(20rem, calc(100svh - var(--testata-h) - 13.5rem), 44rem);
}
.s-home-percorso.is-fisso .s-home-percorso-giro {
  margin-top: clamp(1.5rem, 3svh, 2.5rem);
  height: calc(100svh + 6 * min(70svh, 40rem));
}
.s-home-percorso.is-fisso .s-home-percorso-palco {
  position: sticky; top: calc(var(--testata-h) + clamp(0.75rem, 2.5svh, 1.75rem));
}

/* tappe: barra di avanzamento indaco con numeri grandi (M3) */
.s-home-percorso.is-fisso .s-home-percorso-tappe { display: block; }
.s-home-percorso-tappe ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 1rem; }
.s-home-percorso-tappa {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.625rem; align-items: baseline;
  min-height: 44px; padding: 1rem 0.25rem 0.375rem 0; border-radius: var(--r-xs);
  color: var(--su-software-2); text-decoration: none;
}
.s-home-percorso-barra { position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: var(--r-pieno); background: var(--line-d); overflow: hidden; }
.s-home-percorso-barra i { display: block; height: 100%; background: var(--pervinca); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
.s-home-percorso-tappa[aria-current="step"] .s-home-percorso-barra i { background: var(--indaco-ch); }
.s-home-percorso-n {
  font-size: clamp(1.5rem, 1.1rem + 0.9vw, 2rem); line-height: 1.1; font-weight: 640; font-stretch: 100%;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: color var(--dur-fast) ease;
}
.s-home-percorso-l { min-width: 0; font-weight: 640; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--dur-fast) ease; }
.s-home-percorso-tappa[aria-current="step"] { color: var(--indaco-ch); box-shadow: inset 0 -2px 0 currentColor; }
.s-home-percorso-tappa:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .s-home-percorso-tappa:not([aria-current]):hover { color: var(--su-software); }
}

/* palco: i cinque passi nella stessa cella, testo 4 / finestra 8 */
.s-home-percorso.is-fisso .s-home-percorso-passi { display: grid; gap: 0; margin-top: clamp(1rem, 2.5svh, 1.75rem); }
.s-home-percorso.is-fisso .s-home-percorso-passo {
  grid-area: 1 / 1; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap-l); align-items: start;
}
.s-home-percorso.is-fisso .s-home-percorso-testo { padding-top: 0.25rem; }
.s-home-percorso.is-fisso .passo-n { display: none; }
.s-home-percorso.is-fisso .s-home-percorso-titolo { display: block; }
.s-home-percorso.is-fisso .s-home-percorso-schermi { display: grid; }
.s-home-percorso.is-fisso .s-home-percorso-schermo { grid-area: 1 / 1; transform-origin: 50% 50%; }
/* una sola finestra: stessa altezza per ogni schermata, il contenuto in più resta sotto il bordo */
.s-home-percorso.is-fisso .qa-schermo { height: var(--s-home-percorso-alto); }
.s-home-percorso.is-fisso .qa-app { height: 100%; }
/* il contenuto «scorre» nella finestra fino alla parte che racconta il passo (lo script misura) */
.s-home-percorso.is-fisso .qa-pagina { transform: translate3d(0, calc(-1 * var(--s-home-percorso-scorri, 0px)), 0); }
.s-home-percorso.is-fisso .widget-bozze .qa-tabella-piede { display: none; }   /* l'avviso VeRO del passo 4 resta intero sotto la barra */
/* da 80 em la nota segue la finestra che sborda: il pulsante resta sotto il suo angolo */
@media (min-width: 80em) {
  .s-home-percorso.is-fisso .cornice--sborda-destra > .cornice-nota { width: min(calc(100% + var(--sbordo, 0px) - var(--gut-r)), 64rem); }
}

/* passi e schermate non attivi: fuori vista. Il testo resta al suo posto, trasparente, per chi
   usa un lettore di schermo; le schermate spariscono (display: none), così la base dei widget
   le mette in pausa */
.s-home-percorso.is-fisso .s-home-percorso-passo:not(.is-on) .s-home-percorso-testo { opacity: 0; pointer-events: none; -webkit-user-select: none; user-select: none; }
.s-home-percorso.is-fisso .s-home-percorso-passo:not(.is-on):not(.is-esce) .s-home-percorso-schermi,
.s-home-percorso.is-fisso .s-home-percorso-schermo:not(.is-qui):not(.is-esce) { display: none; }
.s-home-percorso.is-fisso .s-home-percorso-schermo.is-esce { z-index: 0; pointer-events: none; }
.s-home-percorso.is-fisso .s-home-percorso-schermo.is-qui { z-index: 1; }

/* passo 5 · Ordini: nel modo fisso il dettaglio scorre da solo fino al profitto netto
   (lo script trasla i suoi blocchi): il riquadro li taglia al suo bordo */
.s-home-percorso.is-fisso .widget-ordini .wo-drawer { overflow: hidden; }

/* stampa: tutto impilato, nessun palco */
@media print {
  .s-home-percorso-tappe { display: none !important; }
  .s-home-percorso .s-home-percorso-giro { height: auto !important; }
  .s-home-percorso .s-home-percorso-palco { position: static !important; }
}

/* a 62-70 rem la colonna Negozio toglie spazio al nome del prodotto: qui resta nascosta */
@container qa (width < 70rem) { .s-home-percorso .widget-importa .wi-da-l { display: none !important; } }

/* ---- css/sezioni/home-piani.css ---- */
/* Home · piani (sezione home-piani) · SPUNTI § 2 e § 6, MOTION § 9.8
   Tre carte uguali: cambiano solo la capacità (righello in scala vera su 30.000), il bordo e il pulsante del
   consigliato. Numeri in grassetto: basta leggere i grassetti per confrontare. Prezzi fermi.
   Da 52 rem di contenitore in riga con le righe allineate (subgrid); da 36 a 52 rem carte a righe
   orizzontali; sotto, in colonna. Sotto le carte «Tutte le funzioni Qublo incluse» si apre (details). */

.s-home-piani .piano { border-width: 1px; grid-template-rows: auto auto auto 1fr auto; row-gap: 1.25rem; }
.s-home-piani .piano-testa { min-height: 1.75rem; }
.s-home-piani .piano-prezzo { flex-wrap: wrap; row-gap: 0.25rem; }
.s-home-piani .piano-prezzo > strong,
.s-home-piani .piano-prezzo > span { white-space: nowrap; }

/* «Consigliato» in testo, sulla riga del nome */
.s-home-piani-consigliato { flex: none; font-size: 0.875rem; font-weight: 560; line-height: 1.2; color: var(--azione); }

/* consigliato: bordo indaco e anello pieno di 4 px, senza sfocatura; stessa misura delle altre carte */
.s-home-piani .piano--scelto { border: 1px solid var(--azione); box-shadow: var(--ombra-rilievo); }
.s-home-piani .piano--scelto::after {
  content: ""; position: absolute; inset: -1px; border-radius: var(--r-l); pointer-events: none;
  box-shadow: 0 0 0 0.5px var(--azione), 0 0 0 4.5px color-mix(in srgb, var(--indaco-ch) 45%, transparent);
  opacity: var(--s-home-piani-alone, 1);
}
/* il bordo che si traccia attorno (solo mentre i piani entrano, con il movimento permesso) */
.s-home-piani-anello { display: none; position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; }
.s-home-piani-anello rect { fill: none; stroke: var(--azione); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100 100; }
.s-home-piani .piano--scelto.is-traccia { border-color: var(--line-2); }
.s-home-piani .piano--scelto.is-traccia .s-home-piani-anello { display: block; }

/* capacità: numero in grassetto e righello in scala vera */
.s-home-piani-capacita { display: grid; gap: 0.75rem; align-content: start; }
.s-home-piani-prodotti { font-size: var(--t-body); line-height: 1.4; color: var(--inchiostro-2); }
.s-home-piani-prodotti strong,
.s-home-piani-dati strong { font-weight: 640; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.s-home-piani-prodotti strong { font-size: 1.125em; letter-spacing: -0.01em; }
.s-home-piani-righello {
  height: 6px; border-radius: var(--r-pieno); overflow: hidden;
  background: color-mix(in srgb, var(--inchiostro) 9%, transparent);
}
.s-home-piani-righello > span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--inchiostro); }
.s-home-piani-righello[data-limite="1400"] > span { width: 4.6667%; }
.s-home-piani-righello[data-limite="10000"] > span { width: 33.3333%; }
.s-home-piani .piano--scelto .s-home-piani-righello > span { background: var(--azione); }

/* righe dei dati: spunta indaco, testo tenue, numero in grassetto */
.s-home-piani .piano-dati > li { justify-content: flex-start; align-items: flex-start; gap: 0.625rem; line-height: 1.45; color: var(--inchiostro-2); }
.s-home-piani .piano-dati > li > span { color: var(--inchiostro-2); }
.s-home-piani .piano-dati svg {
  flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.12rem;
  fill: none; stroke: var(--azione); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

/* pulsante contornato che si riempie al passaggio del mouse (Yaballe); il consigliato è già pieno */
.s-home-piani .s-home-piani-scegli { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 90ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .s-home-piani .pulsante--secondario.s-home-piani-scegli:hover { background: var(--azione); border-color: var(--azione); color: #fff; }
  .moto .s-home-piani .s-home-piani-scegli:hover { transform: translateY(-1px); }
}
.moto .s-home-piani .s-home-piani-scegli:active { transform: scale(0.985); }
.fermo .s-home-piani .s-home-piani-scegli,
.fermo .s-home-piani .s-home-piani-scegli:active { transform: none; }

/* in riga: nome, prezzo, capacità, dati e pulsante sulla stessa linea nelle tre carte */
@container piani (min-width: 52rem) {
  .s-home-piani .piani-griglia { grid-template-rows: auto auto auto 1fr auto; row-gap: 0; }
  .s-home-piani .piano { grid-row: span 5; grid-template-rows: subgrid; }
}

/* carte a righe orizzontali (tablet in verticale, zoom): nome e prezzo · capacità e dati · pulsante */
@container piani (min-width: 36rem) and (max-width: 51.99rem) {
  .s-home-piani .piano {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
    grid-template-rows: auto auto 1fr; column-gap: clamp(1rem, 3cqi, 2rem); row-gap: 0.75rem;
    align-items: start;
  }
  .s-home-piani .piano-testa { grid-column: 1; grid-row: 1; }
  .s-home-piani .piano-prezzo { grid-column: 1; grid-row: 2 / span 2; }
  .s-home-piani-capacita { grid-column: 2; grid-row: 1; }
  .s-home-piani .piano-dati { grid-column: 2; grid-row: 2 / span 2; }
  .s-home-piani .piano .pulsante { grid-column: 3; grid-row: 1 / span 3; align-self: center; width: auto; }
}

/* sotto le carte: «Tutte le funzioni Qublo incluse» si apre a sinistra, il confronto a destra, poi le formule */
.s-home-piani-piede {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; row-gap: 0.25rem;
  align-items: start; margin-top: 1.5rem;
}
.s-home-piani-incluse { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
.s-home-piani-confronta { grid-column: 2; grid-row: 1; justify-self: end; position: relative; }
.s-home-piani-piede .s-home-piani-nota { grid-column: 1 / -1; grid-row: 2; margin-top: 0.5rem; }
@container piani (max-width: 40rem) {
  .s-home-piani-piede { grid-template-columns: minmax(0, 1fr); }
  .s-home-piani-confronta { grid-column: 1; grid-row: 2; justify-self: start; }
  .s-home-piani-piede .s-home-piani-nota { grid-row: 3; }
}
.s-home-piani-incluse > summary {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; max-width: 100%;
  cursor: pointer; list-style: none; border-radius: 6px;
  font-size: var(--t-body); font-weight: 560; line-height: 1.35; color: var(--inchiostro);
}
.s-home-piani-incluse > summary::-webkit-details-marker { display: none; }
.s-home-piani-incluse > summary::marker { content: ""; }
.s-home-piani-incluse > summary:focus-visible { outline-offset: 2px; }
.s-home-piani-incluse[open] .domanda-segno .chiuso { display: none; }
.s-home-piani-incluse[open] .domanda-segno .aperto { display: inline; }
@media (hover: hover) and (pointer: fine) {
  .s-home-piani-incluse > summary:hover { color: var(--azione-hover); }
  .s-home-piani-incluse > summary:hover .domanda-segno { color: currentColor; }
}
.s-home-piani-gruppi { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--filetto); }
.s-home-piani-gruppi ul { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2rem; }
@container piani (min-width: 28rem) { .s-home-piani-gruppi ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container piani (min-width: 48rem) { .s-home-piani-gruppi ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.s-home-piani-gruppi li a {
  display: flex; align-items: center; min-height: 44px;
  font-size: var(--t-small); line-height: 1.35; color: var(--inchiostro);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--inchiostro) 28%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .s-home-piani-gruppi li a:hover { color: var(--azione-hover); text-decoration-color: currentColor; }
}
.s-home-piani-tutte { margin-top: 0.25rem; font-size: var(--t-small); }
.s-home-piani-tutte a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--azione); font-weight: 620; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.s-home-piani-tutte a:hover { color: var(--azione-hover); text-decoration-thickness: 2px; }
/* apertura: solo dissolvenza da 180 ms, nessuna altezza animata */
.moto .s-home-piani-incluse[open] .s-home-piani-gruppi { animation: s-home-piani-entra 180ms var(--ease-out) both; }
@keyframes s-home-piani-entra { from { opacity: 0; } }

/* ---- css/sezioni/home-recensioni.css ---- */
/* Home · recensioni: due tracce bianche, carte pulite e dati dichiarati.
   Il movimento è gestito dal JS: nessun marquee o ciclo CSS automatico.
   Stelle vuote e neutre finché non sono disponibili valutazioni reali. */

/* Fascia di fiducia dopo l'hero: niente voto o conteggio inventato. */
.qtrust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem 1.1rem;
  width: min(calc(100% - var(--gut-l) - var(--gut-r)), var(--max-content));
  margin: 0 auto;
  padding: 1.4rem 0;
  border-top: 1px solid #E8EAF1;
  border-bottom: 1px solid #E8EAF1;
  color: #161A33;
  background: #FFFFFF;
  text-align: center;
}
.qtrust-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.1rem; }
.qtrust-strip > :is(strong,a), .qtrust-brand {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #161A33;
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 650;
  text-decoration: none;
  letter-spacing: -.025em;
}
.qtrust-strip a { min-height: 44px; }
.qtrust-strip a:hover { color: var(--indaco-h); }
.qtrust-brand > svg { display: block; width: 25px; height: 25px; color: #00A66B; }
.qtrust-rating, .qtrust-stars { display: inline-flex; align-items: center; gap: 4px; }
.qtrust-score { color: #161A33; font-size: .9375rem; line-height: 1.5; font-weight: 600; white-space: nowrap; }
.qtrust-star {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid #DADFE9;
  border-radius: 3px;
  color: #798196;
  background: #F8F9FC;
  font-size: 1.25rem;
  line-height: 1;
}
.qtrust-star svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.qtrust-star svg path { fill: none; }
svg.qtrust-star { display: block; padding: 3px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.qtrust-caption { max-width: 30rem; color: #5B6080; font-size: .8125rem; line-height: 1.55; }
.qtrust-count { color: #343D59; font-size: .875rem; }
.qtrust-demo-label { padding: .3rem .65rem; border: 1px solid #DDE1EE; border-radius: 999px; background: #F6F7FC; color: #555B76; font-size: .75rem; line-height: 1.5; }
.qtrust-stars-demo .qtrust-star { border-color: #008A5B; background: #008A5B; color: #FFFFFF; }
.qtrust-stars-demo .qtrust-star path { fill: #FFFFFF; stroke: #FFFFFF; }
.qtrust-inner .qtrust-caption { flex-basis: 100%; max-width: 100%; }

/* Titolo centrato e due righe indipendenti. */
.s-home-recensioni {
  --s-home-recensioni-l: max(var(--gut-l), calc((100% - var(--max-content)) / 2));
  --s-home-recensioni-r: max(var(--gut-r), calc((100% - var(--max-content)) / 2));
  --s-home-recensioni-gap: 1.125rem;
  --s-home-recensioni-w: min(85vw, 20rem);
  background: #FFFFFF;
  color: #161A33;
}
.s-home-recensioni-testa { display: grid; gap: 1rem; justify-items: center; text-align: center; max-width: 45rem; margin: 0 auto; }
.qreviews-heading { text-align: center; }
.s-home-recensioni-testa > h2 { max-width: 21ch; margin-inline: auto; }
.s-home-recensioni-nota, .qreviews-preview-note { max-width: 45rem; margin: 0 auto; color: #5B6080; font-size: .875rem; line-height: 1.65; text-align: center; }
.qreviews-preview-note { margin-top: 1rem; }
.qreviews-row { position: relative; margin-top: 2rem; }
.qreviews-row + .qreviews-row { margin-top: 1rem; }
.s-home-recensioni-traccia {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--s-home-recensioni-l) var(--s-home-recensioni-r);
  scrollbar-width: thin;
  scrollbar-color: #D7DBE7 transparent;
  -webkit-overflow-scrolling: touch;
}
.s-home-recensioni-traccia::-webkit-scrollbar { height: 5px; }
.s-home-recensioni-traccia::-webkit-scrollbar-thumb { background: #D7DBE7; border-radius: 999px; }
.qreviews-row.is-auto .s-home-recensioni-traccia { scroll-snap-type: none; scroll-behavior: auto; }
.qreviews-row.is-dragging .s-home-recensioni-traccia { cursor: grabbing; user-select: none; }
.s-home-recensioni-traccia:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 12px; }
.s-home-recensioni .s-home-recensioni-elenco {
  display: flex;
  align-items: stretch;
  gap: var(--s-home-recensioni-gap);
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 6px var(--s-home-recensioni-r) 18px var(--s-home-recensioni-l);
  list-style: none;
}
.s-home-recensioni .s-home-recensioni-voce,
.s-home-recensioni .recensione.qreviews-card,
.s-home-recensioni .recensione.is-segnaposto {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 1rem;
  width: var(--s-home-recensioni-w);
  min-width: 0;
  min-height: 15.5rem;
  padding: 1.4rem;
  scroll-snap-align: start;
  border: 1px solid #E7EAF1;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 2px 5px rgba(22,26,51,.025), 0 10px 24px -18px rgba(22,26,51,.16);
  color: #161A33;
}
.qreviews-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; min-width: 0; }
.qreviews-card-head > :first-child { min-width: 0; }
.qreviews-card-head :is(h3,strong,.recensione-nome) { font-size: .9375rem; line-height: 1.45; font-weight: 650; overflow-wrap: anywhere; }
.qreviews-stars, .qreviews-rating { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; color: #7B8295; font-size: .875rem; line-height: 1.5; white-space: nowrap; }
.qreviews-stars svg, .qreviews-rating svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.qreviews-stars svg path, .qreviews-rating svg path { fill: none; }
.qreviews-stars .qtrust-star, .qreviews-rating .qtrust-star { padding: 0; border: 0; border-radius: 0; background: none; }
.qreviews-rating-demo { color: #BC8300; }
.qreviews-rating-demo svg path { fill: currentColor; stroke: currentColor; }
.qreviews-rating-demo[data-rating="4"] svg:last-child path { fill: none; stroke: #8B93A6; }
.qreviews-topic { color: #343D59; font-size: .875rem; line-height: 1.5; font-weight: 600; }
.qreviews-quote, .s-home-recensioni .recensione-testo { margin: 0; color: #525A73; font-size: .9375rem; line-height: 1.75; font-weight: 400; }
.qreviews-card-source, .s-home-recensioni .recensione-negozio { margin: auto 0 0; padding-top: .85rem; border-top: 1px solid #F0F1F6; color: #626A82; font-size: .75rem; line-height: 1.55; }
.s-home-recensioni .recensione-chi { align-items: flex-start; }
.s-home-recensioni .recensione-nome { color: #161A33; font-size: .9375rem; line-height: 1.45; }
.s-home-recensioni-meta { margin-top: .2rem; color: #626A82; font-size: .75rem; line-height: 1.5; }
.s-home-recensioni .recensione-iniziale { background: #F0F1F8; color: #5B6080; }
.s-home-recensioni .recensione-etichetta { align-self: flex-start; background: #F4F5FA; color: #5B6080; border: 1px solid #E7EAF1; font-size: .75rem; }

/* Controlli: pausa e frecce restano disponibili anche al tocco. */
.s-home-recensioni-piede, .qreviews-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; margin-top: .25rem; }
.s-home-recensioni-frecce { display: flex; align-items: center; gap: .6rem; }
.s-home-recensioni-frecce[hidden], .qreviews-actions [hidden] { display: none; }
.s-home-recensioni-freccia, .qreviews-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: .65rem;
  border: 1px solid #DDE1EC;
  border-radius: 999px;
  background: #FFFFFF;
  color: #525A73;
  font: 550 .8125rem/1.4 var(--font);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.qreviews-actions button:not(.s-home-recensioni-freccia) { padding-inline: 1rem; }
.s-home-recensioni-freccia svg, .qreviews-actions button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-home-recensioni-freccia:focus-visible, .qreviews-actions button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.s-home-recensioni-freccia[aria-disabled="true"], .qreviews-actions button:disabled { opacity: .5; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .s-home-recensioni-freccia:not([aria-disabled="true"]):hover, .qreviews-actions button:not(:disabled):hover { border-color: var(--indaco); background: #F7F7FD; color: var(--indaco-h); }
}
@media (min-width: 64em) { .qreviews-row:nth-of-type(even) .s-home-recensioni-elenco { padding-left: calc(var(--s-home-recensioni-l) + 5rem); } }
@media (max-width: 47.99em) {
  .s-home-recensioni { --s-home-recensioni-gap: 1rem; }
  .qtrust-strip { gap: .65rem .9rem; padding-block: 1.25rem; }
  .qtrust-caption { flex-basis: 100%; }
  .qreviews-row { margin-top: 1.5rem; }
  .qreviews-row + .qreviews-row { margin-top: .75rem; }
  .s-home-recensioni .s-home-recensioni-voce { padding: 1.25rem; min-height: 15rem; }
  .qreviews-card-head { gap: .5rem; }
  .qreviews-stars, .qreviews-rating { font-size: .8125rem; }
  .qreviews-stars svg, .qreviews-rating svg { width: 12px; height: 12px; }
  .qreviews-quote, .s-home-recensioni .recensione-testo { font-size: .875rem; }
  .s-home-recensioni-piede, .qreviews-actions { justify-content: center; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .s-home-recensioni-traccia { scroll-behavior: auto !important; }
  .s-home-recensioni-freccia, .qreviews-actions button { transition: none; }
}
.fermo .s-home-recensioni-freccia, .fermo .qreviews-actions button { transition: none; }

/* ---- css/sezioni/home-schermata.css ---- */
/* Schermata illustrativa chiara della Home. Controlli reali: solo i tre tab. */
.qscreen {
  container: qscreen / inline-size;
  margin: 0;
  width: 100%;
  min-width: 0;
  color: #161a33;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  scroll-margin-top: 110px;
}
.qscreen *, .qscreen *::before, .qscreen *::after { box-sizing: border-box; }
.qscreen :where(h2,p,dl,dt,dd) { margin: 0; }
.qscreen svg { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.qscreen-tabs { display: flex; gap: 4px; justify-content: center; margin-bottom: 18px; }
.qscreen-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 16px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #61647c; font: 600 13px/1.4 Inter, sans-serif; cursor: pointer; transition: background 160ms, color 160ms; }
.qscreen-tab:hover { background: #f1f1fb; color: #4141aa; }
.qscreen-tab[aria-selected="true"] { background: #fff; color: #5151c9; border-color: #e5e5ee; box-shadow: 0 3px 8px #161a3308; }
.qscreen-tab:focus-visible { outline: 3px solid #5151c9; outline-offset: 3px; }
.qscreen-window { display: grid; grid-template-columns: 126px minmax(0,1fr); min-height: 480px; border: 1px solid #dedfe9; border-radius: 15px; background: #fff; box-shadow: 0 24px 55px -28px #2526533d, 0 2px 7px #25265305; overflow: hidden; }
.qscreen-sidebar { background: #fafafd; border-right: 1px solid #e9eaf1; display: flex; flex-direction: column; padding: 22px 10px 12px; }
.qscreen-logo { display: flex; align-items: center; gap: 6px; padding-left: 5px; }
.qscreen-logo img { display: block; width: 27px; height: 27px; }
.qscreen-logo strong { font-size: 22px; font-weight: 750; letter-spacing: -.9px; }
.qscreen-store { margin: 22px 5px 17px; color: #42465f; font-size: 12px; font-weight: 600; }
.qscreen-store span { display: block; color: #646a82; font-size: 12px; font-weight: 400; margin-top: 2px; }
.qscreen-nav { display: grid; gap: 4px; }
.qscreen-navitem { display: flex; align-items: center; gap: 8px; padding: 10px 7px; border-radius: 6px; font-size: 12px; color: #6c708a; white-space: nowrap; }
.qscreen-navitem svg { width: 15px; height: 15px; }
.qscreen-navitem[data-qscreen-nav="messages"] { white-space: normal; line-height: 1.25; }
.qscreen-navitem.is-active { background: #eeeefa; color: #5151c9; font-weight: 650; }
.qscreen-account { display: flex; gap: 7px; align-items: center; padding: 12px 4px 0; border-top: 1px solid #e9eaf1; margin-top: auto; font-size: 12px; color: #686b83; }
.qscreen-account > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e7e7f8; color: #5151c9; font-weight: 650; }
.qscreen-content { min-width: 0; background: #fff; }
.qscreen-panel { padding: 23px 20px 0; min-height: 480px; }
.qscreen-panel[hidden] { display: none !important; }
.qscreen-panel:focus-visible { outline: 2px solid #5151c9; outline-offset: -4px; }
.qscreen-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.qscreen-top h2 { color: #161a33; font-size: 23px; line-height: 1.15; letter-spacing: -.6px; font-weight: 720; }
.qscreen-top p { color: #646a82; font-size: 12px; margin-top: 4px; }
.qscreen-action { padding: 8px 11px; border-radius: 6px; background: #5151c9; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.qscreen-search { display: flex; gap: 8px; align-items: center; min-height: 33px; padding: 7px 9px; border: 1px solid #e5e6ee; border-radius: 6px; color: #646a82; font-size: 12px; margin-bottom: 14px; }
.qscreen-search svg { width: 14px; height: 14px; }
.qscreen-table { font-size: 12px; }
.qscreen-table-head, .qscreen-row { display: grid; grid-template-columns: minmax(0,1fr) 79px 90px; align-items: center; gap: 9px; }
.qscreen-table-head { min-height: 28px; color: #646a82; background: #f8f9fc; border-top: 1px solid #f0f0f5; border-bottom: 1px solid #e9eaf2; padding: 0 8px; }
.qscreen-table-head > :nth-child(2) { text-align: right; }
.qscreen-table-head > :last-child { text-align: center; }
.qscreen-row { padding: 9px 8px; border-bottom: 1px solid #ececf3; min-height: 60px; }
.qscreen-row-selected { background: #f7f7ff; box-shadow: inset 2px 0 #6b6bd8; }
.qscreen-item { display: flex; align-items: center; gap: 9px; min-width: 0; }
.qscreen-checkbox { width: 12px; height: 12px; flex: 0 0 auto; border: 1px solid #d4d6e2; border-radius: 3px; background: white; }
.qscreen-checkbox-on { background: #5151c9; border-color: #5151c9; color: white; }
.qscreen-checkbox svg { width: 10px; height: 10px; stroke-width: 2.5; }
.qscreen-product-image { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; background: #f0f1f6; border-radius: 6px; }
.qscreen-product-image svg { width: 38px; height: 38px; stroke: none; }
.qscreen-product-name { display: block; min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.4; }
.qscreen-product-name small { display: block; font-size: 12px; color: #646a82; font-weight: 400; margin-top: 3px; }
.qscreen-row-price { font-size: 12px; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qscreen-dotstatus { display: block; color: #686d86; font-size: 12px; text-align: center; }
.qscreen-row-selected .qscreen-dotstatus { color: #176b3c; }
.qscreen-detail { padding: 13px 10px 10px; margin-top: 12px; border: 1px solid #e6e7ef; border-radius: 8px; }
.qscreen-detail-head { display: flex; gap: 8px; justify-content: space-between; font-size: 12px; margin-bottom: 11px; }
.qscreen-detail-head strong { font-weight: 650; }
.qscreen-detail-head > span { display: flex; align-items: center; gap: 3px; color: #646a82; font-size: 12px; }
.qscreen-detail-head svg { width: 12px; height: 12px; color: #5151c9; }
.qscreen-detail dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 12px; font-size: 12px; }
.qscreen-detail dt { color: #646a82; font-size: 12px; }
.qscreen-detail dd { font-weight: 600; margin-top: 3px; }
.qscreen-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid #ececf3; padding-top: 9px; }
.qscreen-totals > div { display: flex; flex-direction: column; gap: 3px; }
.qscreen-totals span { font-size: 12px; color: #646a82; }
.qscreen-totals strong { font-size: 22px; line-height: 1.2; letter-spacing: -.7px; font-weight: 720; }
.qscreen-totals .qscreen-profit { border-left: 1px solid #e8e9f1; padding-left: 13px; }
.qscreen-profit strong { color: #176b3c; }
.qscreen-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 0; color: #646a82; font-size: 12px; }
.qscreen-publish { display: flex; gap: 7px; align-items: center; color: #5151c9; font-size: 12px; font-weight: 650; white-space: nowrap; }
.qscreen-publish svg { width: 13px; height: 13px; }
.qscreen-caption { margin: 13px 0 0; text-align: center; color: #646a82; font-size: 12px; line-height: 1.5; }
.qscreen-monitor { display: flex; gap: 5px; align-items: center; color: #176b3c; font-size: 12px; padding: 6px 8px; background: #f0f8f3; border-radius: 5px; }
.qscreen-monitor svg { width: 13px; height: 13px; }
.qscreen-stock { color: #176b3c; text-align: center; font-size: 12px; }
.qscreen-stock-off { color: #8a660c; }
.qscreen-orderstatus { justify-self: center; padding: 3px 5px; border-radius: 5px; font-size: 12px; background: #f0f0fa; color: #5151c9; text-align: center; }
.qscreen-orderstatus-paid { color: #176b3c; background: #edf7f0; }
.qscreen-orderstatus-preparing { color: #896609; background: #fbf5e7; }
.qscreen-update { display: flex; align-items: flex-start; gap: 12px; padding: 20px 0 18px; margin-top: 10px; }
.qscreen-update-check { display: grid; place-items: center; color: #176b3c; width: 31px; height: 31px; border-radius: 50%; background: #edf7f0; flex: 0 0 auto; }
.qscreen-update strong { font-weight: 650; font-size: 13px; }
.qscreen-update p { color: #646a82; font-size: 12px; margin-top: 5px; }
.qscreen-updatelog { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 12px 10px; border-top: 1px solid #eeeef3; font-size: 12px; color: #646a82; }
.qscreen-updatelog > :first-child { color: #424860; }
.qscreen-updatelog b { color: #176b3c; font-size: 12px; white-space: nowrap; }
.qscreen-orders-info { background: #f7f7fc; padding: 15px; border: 1px solid #ececf4; border-radius: 7px; color: #60657e; font-size: 12px; }
@container qscreen (max-width: 680px) {
  .qscreen-window { grid-template-columns: 112px minmax(0,1fr); }
  .qscreen-sidebar { padding-right: 6px; padding-left: 6px; }
  .qscreen-panel { padding: 20px 15px 0; }
  .qscreen-table-head, .qscreen-row { grid-template-columns: minmax(0,1fr) 80px; }
  .qscreen-table-head > :last-child, .qscreen-dotstatus, .qscreen-stock, .qscreen-orderstatus { display: none; }
  .qscreen-navitem { gap: 6px; }
  .qscreen-product-name small { font-size: 12px; }
}
@container qscreen (max-width: 500px) {
  .qscreen-window { grid-template-columns: 1fr; }
  .qscreen-sidebar { display: none; }
  .qscreen-tab { padding-inline: 13px; gap: 7px; font-size: 13px; }
  .qscreen-panel { padding: 19px 14px 0; }
  .qscreen-foot > :first-child { display: none; }
  .qscreen-foot { justify-content: flex-end; }
}
@container qscreen (max-width: 345px) {
  .qscreen-tab { padding-inline: 10px; gap: 5px; font-size: 12px; }
  .qscreen-tab svg { width: 15px; height: 15px; }
  .qscreen-panel { padding-inline: 10px; }
  .qscreen-action { font-size: 12px; padding: 7px; }
  .qscreen-checkbox { display: none; }
  .qscreen-product-image { width: 34px; height: 36px; }
  .qscreen-detail-head > span { display: none; }
  .qscreen-detail dl { gap: 5px; }
  .qscreen-detail dt { min-height: 2.8em; }
  .qscreen-totals strong { font-size: 21px; }
  .qscreen-monitor { max-width: 50%; }
  .qscreen-updatelog { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .qscreen-tab { transition: none; }
}

/* ---- css/sezioni/legali.css ---- */
/* =====================================================================
   Privacy, Termini, Cookie · v2 (6 novembre 2026)
   Una sola impaginazione per i tre documenti: testata, indice laterale
   fermo (da 64 em), colonna di testo a 42 rem.
   Movimento sobrio: l'indice segue lo scorrimento. La tacca di ogni voce
   si riempie mentre leggi la sua sezione (pervinca le lette, indaco quella
   in lettura) e torna indietro se risali; titoli con data-vel.
   Con «riduci movimento»: solo la voce in lettura, senza tacche che si muovono.
   ===================================================================== */

/* salto netto sull'indice: su un testo lungo è più chiaro dello scorrimento */
html:has(.s-legali) { scroll-behavior: auto; }

.s-legali { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(5rem, 3rem + 6vw, 8rem); }
.s-legali-griglia { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }

/* ---------- testata del documento ---------- */
.s-legali-testa { display: grid; gap: var(--s-4); max-width: var(--max-text); }
.s-legali-testa .titolo-2 { max-width: 14em; }
.s-legali-testa .guida { max-width: 34em; }

/* etichetta [SEGNAPOSTO]: tratteggio = segnaposto, come in tutto il sito */
.s-legali-marca {
  display: inline-block;
  margin-right: 0.25em;
  padding: 0.0625rem 0.4375rem;
  border: 1px dashed var(--segnaposto);
  border-radius: 6px;
  color: var(--inchiostro-2);
  font-size: var(--t-xs);
  font-weight: 640;
  line-height: 1.5;
  letter-spacing: 0.02em;
  vertical-align: 0.12em;
  white-space: nowrap;
}

/* ---------- lato: selettore dei tre documenti + indice ---------- */
.s-legali-lato { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); min-width: 0; }
.s-legali-ferma { display: grid; gap: var(--s-6); min-width: 0; }
.s-legali-etichetta { font-size: var(--t-small); font-weight: 600; color: var(--inchiostro-2); margin-bottom: var(--s-2); }

/* selettore (telefono e tablet): tre link in riga, quello aperto pieno */
.s-legali-documenti ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.s-legali-documenti a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  border: 1px solid transparent; border-radius: var(--r-s);
  color: var(--inchiostro-2); font-weight: 560; text-decoration: none;
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.s-legali-documenti a[aria-current="page"] {
  background: var(--bianco); border-color: var(--filetto); color: var(--inchiostro); font-weight: 620;
  box-shadow: var(--ombra-carta);
}
@media (hover: hover) and (pointer: fine) {
  .s-legali-documenti a:not([aria-current]):hover { color: var(--inchiostro); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}

/* indice: elenco aperto, righe da 44 px, nessuna fisarmonica */
.s-legali-indice { padding-block: var(--s-2); border-top: 1px solid var(--filetto-2); border-bottom: 1px solid var(--filetto-2); }
.s-legali-indice a {
  position: relative;
  display: flex; align-items: center; min-height: 44px; padding: 0.5rem 0;
  color: var(--inchiostro-2); font-size: var(--t-small); line-height: 1.35; text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .s-legali-indice a:hover { color: var(--inchiostro); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}
/* tablet: due colonne solo oltre 4 voci; sul lato (da 64 em) sempre una */
@media (min-width: 40em) and (max-width: 63.99em) {
  .s-legali-indice ul:has(> li:nth-child(5)) { columns: 2; column-gap: var(--gap-l); }
  .s-legali-indice li { break-inside: avoid; }
}
/* tacca di avanzamento: esiste solo sul lato */
.s-legali-tacca { display: none; }

/* ---------- testo ---------- */
.s-legali-testo { max-width: var(--max-text); min-width: 0; margin-top: clamp(2.5rem, 2rem + 2vw, 3rem); }
.s-legali-testo > * + * { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.s-legali-parte { scroll-margin-top: calc(var(--testata-h) + 1.5rem); }
.s-legali-parte h2 {
  font-size: var(--t-h3); font-weight: 650; line-height: 1.25; letter-spacing: -0.018em;
  scroll-margin-top: calc(var(--testata-h) + 1.5rem);
}
.s-legali-parte h2:focus { outline: none; }
.s-legali-parte h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.s-legali-parte p, .s-legali-parte li { font-size: 1rem; line-height: 1.65; text-wrap: pretty; overflow-wrap: break-word; }
@media (min-width: 48em) { .s-legali-parte p, .s-legali-parte li { font-size: 1.0625rem; line-height: 1.7; } }
.s-legali-parte h2 + * { margin-top: var(--s-4); }
.s-legali-parte p + p, .s-legali-parte p + ul, .s-legali-parte ul + p { margin-top: 1em; }
.s-legali-parte ul { display: grid; gap: 0.375em; padding-left: 1.25em; list-style: disc; }
.s-legali-parte a:not(.link-azione) { color: var(--azione); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.s-legali-parte .link-azione { margin-block: -0.5rem; }

/* avviso segnaposto: riquadro tratteggiato (classe di sistema .segnaposto) */
.s-legali .s-legali-avviso {
  padding: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
  border-radius: var(--r-l);
  background: var(--fondo-2);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--inchiostro-2);
}
.s-legali-avviso strong { color: var(--inchiostro); }

/* ---------- da 64 em: indice laterale fermo, testo in col 5-11 ---------- */
@media (min-width: 64em) {
  .s-legali-griglia {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--gap-l);
  }
  .s-legali-testa { grid-column: 5 / span 7; grid-row: 1; }
  .s-legali-testo { grid-column: 5 / span 7; grid-row: 2; }
  .s-legali-lato { grid-column: 1 / span 3; grid-row: 1 / span 2; margin-top: 0.5rem; }
  .s-legali-ferma {
    position: sticky; top: calc(var(--testata-h) + 1.5rem);
    max-height: calc(100dvh - var(--testata-h) - 3rem);
    overflow-y: auto; scrollbar-width: thin;
    gap: var(--s-8);
    padding: 0.25rem 0.25rem 0.25rem 0;   /* spazio per l'anello di focus */
    margin: -0.25rem -0.25rem -0.25rem 0;
  }
  /* selettore in colonna, tacca da 2 px sul documento aperto */
  .s-legali-documenti ul { display: grid; gap: 0; }
  .s-legali-documenti a,
  .s-legali-indice a { padding-left: 1rem; border-radius: 0 var(--r-xs) var(--r-xs) 0; }
  .s-legali-documenti a { position: relative; padding-right: 0.5rem; border: 0; font-size: var(--t-body); }
  .s-legali-documenti a[aria-current="page"] { background: none; box-shadow: none; color: var(--inchiostro); font-weight: 600; }
  .s-legali-documenti a::before,
  .s-legali-indice a::before {
    content: ""; position: absolute; left: 0; top: 0.625rem; bottom: 0.625rem; width: 2px; border-radius: 2px;
    background: var(--filetto-2);
  }
  .s-legali-documenti a[aria-current="page"]::before { background: var(--azione); }
  .s-legali-indice { padding-block: 0; border: 0; }
  .s-legali-indice li + li { margin-top: 0.125rem; }
  .s-legali-indice a[aria-current="true"] { color: var(--inchiostro); font-weight: 560; }
  /* la tacca: pervinca per le sezioni lette, indaco per quella che stai leggendo */
  .s-legali-tacca {
    display: block;
    position: absolute; left: 0; top: 0.625rem; bottom: 0.625rem; width: 2px; border-radius: 2px;
    background: var(--pervinca);
    transform: scaleY(0); transform-origin: 50% 0;
    transition: background-color var(--dur-fast) ease;
    pointer-events: none;
  }
  .s-legali-indice a[aria-current="true"] .s-legali-tacca { background: var(--azione); }
  .fermo .s-legali-indice a[aria-current="true"] .s-legali-tacca { transform: none; }
  .s-legali-testo { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
}
/* schermi bassi (telefono in orizzontale, zoom alto): niente sticky */
@media (min-width: 64em) and (max-height: 31.25em) {
  .s-legali-ferma { position: static; max-height: none; overflow: visible; }
}

/* ---------- stampa: solo il documento ---------- */
@media print {
  .s-legali-lato, body:has(.s-legali) .piede { display: none !important; }
  .s-legali { padding: 0; }
  .s-legali-griglia { display: block; }
  .s-legali-testa, .s-legali-testo { max-width: none; }
  .s-legali, .s-legali * { color: #000 !important; background: none !important; box-shadow: none !important; filter: none !important; transform: none !important; }
  .s-legali-parte p, .s-legali-parte li, .s-legali-avviso { font-size: 11pt !important; line-height: 1.5 !important; }
  .s-legali-parte a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .s-legali-parte { break-inside: avoid-page; }
}

/* ---- css/sezioni/prezzi.css ---- */
/* =====================================================================
   Prezzi · v2 «misura» (6/11/2026). Schema: contenuti/impaginazione/prezzi.md,
   sistema in contenuti/SISTEMA.md, tavolozza P3 (zz-palette.css: solo token).
   Ogni classe nuova inizia con .s-prezzi-. Movimento in sezione-prezzi.js:
   tutto ciò che si muove segue lo scorrimento e torna indietro se risali.
   Stato finale = markup statico: senza JS e con «riduci movimento» tutto è
   pieno, tracciato e fermo. Gli stati di partenza visibili al caricamento
   stanno sotto .moto (mai sotto .js da solo) e valgono finché lo script non
   prende il controllo (.is-guidato).
   ===================================================================== */

/* ---------- 1. intro: h1 su una riga da Mac, tre note con filetti ---------- */
.s-prezzi-intro { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) clamp(1.5rem, 1rem + 1.5vw, 2rem); }
.s-prezzi-intro-in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(1rem, 0.6rem + 1vw, 1.25rem); }
.s-prezzi-h1 {
  max-width: none; text-wrap: wrap;
  font-size: clamp(2.125rem, min(0.9rem + 3.4vw, 0.8rem + 5.2svh), 4.5rem);
  line-height: 1.04;
}
/* a capo solo tra i pezzi della frase; sotto 360 px va a capo dove serve */
@media (min-width: 22.5em) { .s-prezzi-h1-r { white-space: nowrap; } }
.s-prezzi-sotto { max-width: 34rem; }
.s-prezzi-note { margin-top: 0.5rem; }
.s-prezzi-note > li {
  position: relative; padding-block: 0.75rem;
  font-size: 1rem; font-weight: 560; line-height: 1.4; letter-spacing: -0.005em; color: var(--inchiostro);
}
/* filetti come pseudo-elementi: lo script li traccia da sinistra (--k 0 → 1) */
.s-prezzi-note > li::before,
.s-prezzi-note > li:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--filetto); transform: scaleX(var(--k, 1)); transform-origin: 0 50%; pointer-events: none;
}
.s-prezzi-note > li:last-child::after { top: auto; bottom: 0; }
.moto .s-prezzi-note:not(.is-guidato) > li { --k: 0; }
@media (min-width: 40em) and (max-width: 63.99em) {
  .s-prezzi-note { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; }
  .s-prezzi-note > li:last-child::after { display: none; }
}
@media (min-width: 64em) {
  .s-prezzi-intro-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-l); }
  .s-prezzi-h1 { grid-column: 1 / -1; }
  .s-prezzi-sotto { grid-column: 1 / span 6; }
  .s-prezzi-note { grid-column: 8 / -1; align-self: start; margin-top: 0.125rem; }
  .s-prezzi-note > li { padding-block: 0.5rem; }
  .s-prezzi-note > li:first-child { padding-top: 0; }
  .s-prezzi-note > li:first-child::before, .s-prezzi-note > li:last-child::after { display: none; }
}

/* ---------- 2. piani: stesso fondo dell'intro, nessuna cucitura ---------- */
.s-prezzi-piani {
  --s-prezzi-anello: 0 0 0 4px color-mix(in srgb, var(--indaco-ch) 45%, transparent);
  padding-top: 0; padding-bottom: clamp(5rem, 3rem + 5vw, 8rem);
}
.s-prezzi-piani-h2 { font-size: clamp(1.625rem, min(1rem + 1.6vw, 1rem + 3svh), 2.5rem); line-height: 1.1; max-width: 22em; }
.s-prezzi-gruppo { container: s-prezzi-gruppo / inline-size; margin-top: clamp(1.5rem, 1rem + 1.2vw, 2rem); }
.s-prezzi-carte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }

/* carta compatta (gruppo sotto 30 rem): nome a sinistra, prezzo a destra */
.s-prezzi-piani .s-prezzi-piano {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: none;
  grid-template-areas: "eti eti" "nome prezzo" "cap prezzo" "neg neg" "rig rig" "azione azione";
  column-gap: 1rem; row-gap: 0;
  padding: 1.25rem;
  border-color: var(--line); box-shadow: var(--ombra-carta);
}
.s-prezzi-piano > .s-prezzi-etichetta { grid-area: eti; }
.s-prezzi-piano > .s-prezzi-nome { grid-area: nome; align-self: end; }
.s-prezzi-piano > .s-prezzi-prezzo { grid-area: prezzo; }
.s-prezzi-piano > .s-prezzi-capacita { grid-area: cap; }
.s-prezzi-piano > .s-prezzi-negozi { grid-area: neg; }
.s-prezzi-piano > .s-prezzi-righello { grid-area: rig; }
.s-prezzi-piano > .s-prezzi-incluse { grid-area: inc; display: none; }
.s-prezzi-piano > .s-prezzi-scegli { grid-area: azione; }

/* consigliato (spunto 2b): bordo indaco 1,5 px e anello pieno, nessun ingrandimento, nessun alone */
.s-prezzi-piani .s-prezzi-piano.piano--scelto { border: 1.5px solid var(--azione); box-shadow: var(--s-prezzi-anello), var(--ombra-carta); }
.moto .s-prezzi-piani:not(.is-guidato) .s-prezzi-piano.piano--scelto,
.s-prezzi-piani.is-traccia .s-prezzi-piano.piano--scelto { border-color: var(--line); box-shadow: var(--ombra-carta); }
.s-prezzi-piani.is-traccia .s-prezzi-piano.piano--scelto::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: var(--r-l); pointer-events: none;
  box-shadow: var(--s-prezzi-anello); opacity: var(--anello, 0);
}
/* il bordo che si traccia: due metà dal centro in alto, si chiudono in basso (le crea lo script) */
.s-prezzi-traccia { position: absolute; left: -1.5px; top: -1.5px; overflow: visible; pointer-events: none; }
.s-prezzi-traccia path { fill: none; stroke: var(--azione); stroke-width: 1.5; stroke-dasharray: 1 1; }
.fermo .s-prezzi-traccia, .fermo .s-prezzi-piani.is-traccia .s-prezzi-piano.piano--scelto::after { display: none; }
.fermo .s-prezzi-piani.is-traccia .s-prezzi-piano.piano--scelto { border-color: var(--azione); box-shadow: var(--s-prezzi-anello), var(--ombra-carta); }

.s-prezzi-etichetta { margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--azione); }
.s-prezzi-etichetta:empty { display: none; }
.s-prezzi-nome { overflow-wrap: anywhere; }

.s-prezzi-prezzo {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem;
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.s-prezzi-cifra { display: inline-flex; align-items: baseline; gap: 0.08em; color: var(--inchiostro); font-size: clamp(1.75rem, 1.55rem + 0.8vw, 2.125rem); line-height: 1; }
.s-prezzi-cifra strong { font-weight: 640; letter-spacing: -0.035em; }
.s-prezzi-valuta { position: relative; top: -0.62em; font-size: 0.56em; font-weight: 560; line-height: 1; letter-spacing: 0; }
:lang(en) .s-prezzi-cifra { gap: 0.04em; }
:lang(en) .s-prezzi-valuta { order: -1; }   /* inglese: €127 */
/* prezzo completo per i lettori di schermo: nascosto senza ritaglio a 1 px (niente testo tagliato) */
.s-prezzi-lettori { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; clip: rect(0 0 0 0); clip-path: inset(50%); }
.s-prezzi-periodo { font-size: var(--t-xs); line-height: 1.3; color: var(--inchiostro-2); }

/* numeri in grassetto, il resto della riga tenue (spunto 2a): si confrontano leggendo i grassetti */
.s-prezzi-capacita { margin-top: 0.375rem; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem); font-weight: 400; line-height: 1.3; letter-spacing: -0.012em; color: var(--inchiostro-2); }
.s-prezzi-negozi { margin-top: 0.25rem; font-size: var(--t-small); line-height: 1.45; color: var(--inchiostro-2); }
/* niente tabular-nums qui: in Mona Sans le cifre tabulari hanno lo zero col punto */
.s-prezzi-capacita strong, .s-prezzi-negozi strong { font-weight: 640; color: var(--inchiostro); }

/* righello della capacità: scala vera su 30.000 (pieno nell'HTML) */
.s-prezzi-righello {
  margin-top: 1rem; height: 6px; border-radius: var(--r-pieno); overflow: hidden;
  background: color-mix(in srgb, var(--inchiostro) 9%, transparent);
}
.s-prezzi-righello > span { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--inchiostro); }
.s-prezzi-righello[data-limite="1400"] > span { width: 4.6667%; }
.s-prezzi-righello[data-limite="10000"] > span { width: 33.3333%; }
.piano--scelto .s-prezzi-righello > span { background: var(--azione); }
/* partenza: solo con il movimento permesso, finché lo script non lo guida */
.moto .s-prezzi-righello:not(.is-guidato) > span { transform: translate3d(-101%, 0, 0); }

.s-prezzi-piani .s-prezzi-scegli { margin-top: 1.125rem; min-height: 3rem; }

.s-prezzi-incluse a, .s-prezzi-incluse-una a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-small); line-height: 1.35;
}
.s-prezzi-incluse-una { margin-top: 0.75rem; }
.s-prezzi-nota { margin-top: 0.5rem; max-width: 46em; font-size: 1rem; line-height: 1.55; color: var(--inchiostro-2); }

/* carta strettissima (320 px, zoom 400 %): il prezzo scende sotto il nome */
@container s-prezzi-gruppo (max-width: 20.99rem) {
  .s-prezzi-piani .s-prezzi-piano { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eti" "nome" "prezzo" "cap" "neg" "rig" "azione"; }
  .s-prezzi-prezzo { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; text-align: left; }
}

/* una riga per piano (gruppo 30-56 rem: iPad verticale, zoom 200 %) */
@container s-prezzi-gruppo (min-width: 30rem) {
  .s-prezzi-piani .s-prezzi-piano {
    grid-template-columns: minmax(0, 1fr) auto minmax(10.5rem, 13.5rem);
    grid-template-areas: "eti eti eti" "nome prezzo azione" "cap prezzo azione" "neg prezzo azione" "rig rig rig";
    column-gap: clamp(1rem, 3cqi, 2.5rem);
    padding: 1.375rem 1.5rem 1.5rem;
  }
  .s-prezzi-piano > .s-prezzi-prezzo { align-self: center; align-items: flex-start; text-align: left; }
  .s-prezzi-piano > .s-prezzi-scegli { align-self: center; margin-top: 0; }
  .s-prezzi-righello { margin-top: 1.125rem; }
}

/* tre carte (gruppo da 56 rem): righe allineate con subgrid, etichetta vuota compresa */
@container s-prezzi-gruppo (min-width: 56rem) {
  .s-prezzi-carte { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); column-gap: 1.25rem; row-gap: 0; }
  .s-prezzi-piani .s-prezzi-piano {
    grid-row: span 8; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none;
    row-gap: 0; padding: clamp(1.5rem, 1.1rem + 0.6vw, 1.75rem);
  }
  .s-prezzi-piani .s-prezzi-carte .s-prezzi-piano > * { grid-area: auto; }
  .s-prezzi-piano > .s-prezzi-etichetta { display: block; min-height: 1.15rem; margin-bottom: 0.375rem; }
  .s-prezzi-piano > .s-prezzi-incluse { display: block; margin-top: 0.375rem; }
  .s-prezzi-piano > .s-prezzi-prezzo { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.875rem; text-align: left; }
  .s-prezzi-cifra { font-size: clamp(2.5rem, 1.9rem + 2vw, 3.25rem); }
  .s-prezzi-periodo { font-size: var(--t-small); }
  .s-prezzi-capacita { margin-top: 1.125rem; }
  .s-prezzi-righello { margin-top: 0.875rem; }
  .s-prezzi-negozi { margin-top: 0.75rem; }
  .s-prezzi-piano > .s-prezzi-scegli { margin-top: 0.5rem; align-self: end; }
  .s-prezzi-incluse-una { display: none; }
}

/* pulsanti (spunto 2c): il secondario si riempie d'indaco al passaggio del mouse; le carte restano ferme */
@media (hover: hover) and (pointer: fine) {
  .s-prezzi-piani .s-prezzi-scegli { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform var(--dur-press) var(--ease-out); }
  .s-prezzi-piani .s-prezzi-scegli.pulsante--secondario:hover { background: var(--azione); border-color: var(--azione); color: #fff; }
  .s-prezzi-piani .s-prezzi-scegli:hover { transform: translateY(-1px); }
  .s-prezzi-piani .s-prezzi-scegli:active { transform: scale(0.985); transition-duration: 90ms; }
  .fermo .s-prezzi-piani .s-prezzi-scegli:hover, .fermo .s-prezzi-piani .s-prezzi-scegli:active { transform: none; }
}

/* Mac bassi e zoom: le carte e i pulsanti restano nella prima schermata */
@media (min-width: 64em) and (max-height: 50em) {
  .s-prezzi-intro { padding-top: 2.25rem; padding-bottom: 1.25rem; }
  .s-prezzi-intro-in { row-gap: 0.875rem; }
  .s-prezzi-gruppo { margin-top: 1.25rem; }
}
@media (min-width: 64em) and (max-height: 46em) {
  .s-prezzi-intro { padding-top: 1.5rem; }
  .s-prezzi-note > li { padding-block: 0.375rem; }
  .s-prezzi-gruppo { margin-top: 1rem; }
  .s-prezzi-piani .s-prezzi-carte .s-prezzi-piano { padding-block: 1.25rem; }
  .s-prezzi-carte .s-prezzi-piano > .s-prezzi-prezzo { margin-top: 0.5rem; }
  .s-prezzi-carte .s-prezzi-capacita { margin-top: 0.75rem; }
}
@media (max-height: 40em) {
  .s-prezzi-intro { padding-top: 1.5rem; }
  .s-prezzi-note > li { padding-block: 0.375rem; }
}

/* ---------- 3. formule: un anno che scorre (12 mesi), quanti bonifici servono ---------- */
.s-prezzi-formule { padding-block: clamp(4rem, 2.5rem + 4vw, 6rem); }
.s-prezzi-formule-in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
.s-prezzi-formule-testa { display: grid; gap: 1rem; align-content: start; max-width: 36rem; }
.s-prezzi-formule-corpo { container: s-prezzi-formule / inline-size; min-width: 0; }
/* quota del disegno tecnico: |—— 12 mesi ——| sopra i righelli */
.s-prezzi-asse { margin-bottom: 0.75rem; }
.s-prezzi-asse-q {
  display: flex; align-items: center; gap: 0.625rem; height: 0.875rem;
  border-inline: 1px solid var(--inchiostro-2);
  font-size: var(--t-xs); line-height: 1; color: var(--inchiostro-2);
}
.s-prezzi-asse-q::before, .s-prezzi-asse-q::after { content: ""; flex: 1 1 0; min-width: 0.75rem; height: 1px; background: var(--inchiostro-2); opacity: 0.55; }
.s-prezzi-asse-t { flex: none; white-space: nowrap; }
.s-prezzi-formule-elenco { border-bottom: 1px solid var(--filetto); }
.s-prezzi-formula { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.375rem; padding-block: 1.25rem; border-top: 1px solid var(--filetto); }
.s-prezzi-formula > dt { font-size: 1.0625rem; font-weight: 620; line-height: 1.3; letter-spacing: -0.01em; }
.s-prezzi-formula > dd { display: grid; gap: 0.875rem; margin: 0; }
.s-prezzi-formula-testo { color: var(--inchiostro-2); line-height: 1.5; max-width: 34em; }
.s-prezzi-misura { order: 2; display: grid; gap: 0.5rem; min-width: 0; }
.s-prezzi-anno { position: relative; display: block; }
.s-prezzi-mesi { display: flex; gap: 4px; height: 8px; min-width: 0; }
.s-prezzi-mesi > i { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--inchiostro-2); }
/* con lo script: base chiara, sopra la copia piena che si scopre con lo scorrimento, e la testina */
.s-prezzi-anno.is-guidato > .s-prezzi-mesi:first-child > i { background: var(--line-2); }
.s-prezzi-anno > .s-prezzi-mesi-pieno { position: absolute; left: 0; top: 0; width: 100%; }
.s-prezzi-testina {
  position: absolute; left: -1px; top: -5px; width: 2px; height: 18px; border-radius: 1px;
  background: var(--azione); opacity: 0; pointer-events: none;
}
.s-prezzi-conta { position: relative; display: flex; align-items: baseline; gap: 0.375rem; font-size: var(--t-small); line-height: 1.25; color: var(--inchiostro-2); }
.s-prezzi-conta-n { display: inline-block; text-align: right; font-weight: 640; color: var(--inchiostro); }
/* il nastro del mensile arriva a 12: due cifre di posto, così la parola non salta */
.s-prezzi-formula[data-periodi="12"] .s-prezzi-conta-n { min-width: 2ch; }
.s-prezzi-nastro { display: inline-block; height: 1.25em; overflow: hidden; vertical-align: bottom; }
.s-prezzi-nastro > span { display: block; }
.s-prezzi-nastro > span > span { display: block; height: 1.25em; line-height: 1.25em; }
.s-prezzi-formule-nota { margin-top: 1.25rem; font-size: var(--t-small); line-height: 1.5; color: var(--inchiostro-2); max-width: 46em; }
@container s-prezzi-formule (min-width: 40rem) {
  .s-prezzi-formula { grid-template-columns: minmax(7rem, 1fr) minmax(0, 3fr); align-items: center; column-gap: 1.5rem; padding-block: 1.5rem; }
  .s-prezzi-formula > dd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(1.5rem, 4cqi, 2.5rem); }
  .s-prezzi-misura { order: 0; }
  /* la quota sta sopra la colonna dei righelli */
  .s-prezzi-asse { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(0, 3fr); column-gap: 1.5rem; }
  .s-prezzi-asse-q { grid-column: 2; width: calc((100% - clamp(1.5rem, 4cqi, 2.5rem)) / 2); }
}
@media (min-width: 64em) {
  .s-prezzi-formule-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-l); }
  .s-prezzi-formule-testa { grid-column: 1 / span 4; }
  .s-prezzi-formule-corpo { grid-column: 5 / -1; }
}

/* ---------- 4. incluso: un indice, non una griglia di carte; mappa nella colonna ferma ---------- */
.s-prezzi-incluso { padding-block: clamp(5rem, 3rem + 5vw, 8rem) clamp(3rem, 2rem + 2.5vw, 4rem); }
.s-prezzi-incluso-in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
.s-prezzi-incluso-testa { display: grid; gap: 1rem; align-content: start; max-width: 36rem; }
.s-prezzi-incluso-link a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--azione); font-weight: 560; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.s-prezzi-incluso-link a:hover { color: var(--azione-hover); text-decoration-thickness: 2px; }
.s-prezzi-mappa { display: none; }
.s-prezzi-indice { container: s-prezzi-indice / inline-size; min-width: 0; border-bottom: 1px solid var(--filetto); }
.s-prezzi-gruppo-f { position: relative; display: flow-root; }
.s-prezzi-gruppo-f::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: var(--filetto); transform: scaleX(var(--k, 1)); transform-origin: 0 50%;
}
.s-prezzi-gruppo-f > summary {
  min-height: 3.5rem; padding-block: 1rem; cursor: pointer;
  font-size: 1.0625rem; font-weight: 620; line-height: 1.35; letter-spacing: -0.01em;
  border-radius: 6px;
}
.s-prezzi-gruppo-f > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.s-prezzi-gruppo-f > summary::-webkit-details-marker { display: none; }
.s-prezzi-gruppo-f > summary::marker { content: ""; }
.s-prezzi-gruppo-f > summary::after { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--inchiostro-2); border-bottom: 2px solid var(--inchiostro-2); transform: translateY(-2px) rotate(45deg); }
.s-prezzi-gruppo-f[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.s-prezzi-gruppo-f > summary:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .s-prezzi-gruppo-f > summary:hover { color: var(--azione-hover); } }
.s-prezzi-gruppo-f > ul { list-style: disc; padding: 0 0 1.25rem 1.25rem; max-width: 40em; }
.s-prezzi-gruppo-f > ul > li { padding-left: 0.25rem; line-height: 1.5; }
.s-prezzi-gruppo-f > ul > li + li { margin-top: 0.5rem; }
.s-prezzi-gruppo-f > ul > li::marker { color: var(--inchiostro-2); }
.s-prezzi-gruppo-f a { color: var(--azione); text-underline-offset: 3px; }
@container s-prezzi-indice (min-width: 40rem) {
  .s-prezzi-gruppo-f > summary { float: left; width: 33.333%; padding-right: 1.5rem; }
  .s-prezzi-gruppo-f > ul { margin-left: 33.333%; padding: 1rem 0 1.25rem 1.25rem; }
}
@media (min-width: 64em) {
  .s-prezzi-incluso-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-l); }
  .s-prezzi-incluso-testa { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--testata-h) + 2rem); }
  .s-prezzi-indice { grid-column: 5 / -1; }
  /* da Mac i filetti restano fermi: si muove la mappa */
  .s-prezzi-gruppo-f::before { transform: none; }
}
/* mappa dei 6 gruppi (spunto 7): la barra indaco segue lo scorrimento come la voce attiva dell'app */
@media (min-width: 64em) and (min-height: 42em) {
  .s-prezzi-mappa { display: block; position: relative; margin-top: 0.5rem; }
  .s-prezzi-mappa > ul { border-left: 1px solid var(--filetto); }
  .s-prezzi-mappa a {
    display: flex; align-items: center; min-height: 44px; padding: 0.25rem 0 0.25rem 1rem;
    font-size: var(--t-small); line-height: 1.3; color: var(--inchiostro-2); text-decoration: none;
    border-radius: 0 var(--r-s) var(--r-s) 0;
  }
  .s-prezzi-mappa a[aria-current] { color: var(--inchiostro); font-weight: 600; }
  .s-prezzi-mappa a:focus-visible { outline-offset: -3px; }
  .s-prezzi-mappa-barra {
    position: absolute; left: -1px; top: 0; z-index: 1; width: 3px; height: 44px; border-radius: 2px;
    background: var(--azione); opacity: 0; pointer-events: none; transform-origin: 50% 0;
  }
  .s-prezzi-mappa.is-guidato .s-prezzi-mappa-barra { opacity: 1; }
}
@media (min-width: 64em) and (min-height: 42em) and (hover: hover) and (pointer: fine) {
  .s-prezzi-mappa a:hover { color: var(--azione-hover); }
}
@media (max-height: 31.25em) { .s-prezzi-incluso-testa { position: static; } }

/* ---------- 5. limite: un fatto, non un allarme; il conto arriva al limite mentre scorri ---------- */
.s-prezzi-limite { padding-top: 0; padding-bottom: clamp(5rem, 3rem + 5vw, 8rem); }
.s-prezzi-limite-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; padding-top: clamp(3rem, 2rem + 2.5vw, 4rem); }
.s-prezzi-limite-in::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: var(--filetto); transform: scaleX(var(--k, 1)); transform-origin: 0 50%;
}
.s-prezzi-limite-frase { margin-top: 1rem; max-width: 30em; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.5; color: var(--inchiostro-2); }
.s-prezzi-limite-punti { border-top: 1px solid var(--filetto); max-width: 38.25rem; }
.s-prezzi-limite-punti > li { padding-block: 1.125rem; font-size: 1.0625rem; line-height: 1.5; color: var(--inchiostro); max-width: 36em; }
.s-prezzi-limite-punti > li + li { border-top: 1px solid var(--filetto); }
.s-prezzi-conto-posto { min-width: 0; max-width: 32rem; }
.s-prezzi-conto {
  margin: 0; padding: clamp(1.125rem, 0.9rem + 0.8vw, 1.5rem);
  border-radius: var(--r-l); background: var(--bianco); border: 1px solid var(--line); box-shadow: var(--ombra-carta);
}
.s-prezzi-conto-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 0.875rem; }
.s-prezzi-conto-piano { font-size: 1.0625rem; font-weight: 640; letter-spacing: -0.012em; color: var(--inchiostro); }
.s-prezzi-conto-nota { font-size: var(--t-xs); color: var(--inchiostro-2); }
.s-prezzi-conto-righe > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.5rem; font-size: var(--t-small); line-height: 1.35; }
.s-prezzi-conto-righe dt { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; color: var(--inchiostro-2); }
.s-prezzi-conto-righe dd { margin: 0; color: var(--inchiostro); font-weight: 560; text-align: right; white-space: nowrap; }
.s-prezzi-conto-tono { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 3px; }
.s-prezzi-conto-tono--1 { background: var(--inchiostro); }
.s-prezzi-conto-tono--2 { background: var(--pervinca); }
.s-prezzi-conto-tot { margin-top: 0.25rem; border-top: 1px solid var(--line); padding-top: 0.75rem !important; }
.s-prezzi-conto-tot dt { color: var(--inchiostro); font-weight: 600; }
.s-prezzi-conto-tot dd { font-weight: 640; }
.s-prezzi-conto-barra { margin-top: 0.625rem; height: 8px; border-radius: var(--r-pieno); overflow: hidden; background: color-mix(in srgb, var(--inchiostro) 9%, transparent); }
.s-prezzi-conto-b { position: relative; display: block; height: 100%; }
.s-prezzi-conto-b > i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 50%; }
.s-prezzi-conto-s1 { background: var(--inchiostro); transform: scaleX(0.613); }
.s-prezzi-conto-s2 { background: var(--pervinca); transform: translate3d(61.3%, 0, 0) scaleX(0.387); }
.s-prezzi-conto-bozze { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px dashed var(--line-2); font-size: var(--t-small); line-height: 1.35; color: var(--inchiostro-2); }
.s-prezzi-conto-bozze > span:last-child { white-space: nowrap; }
@media (min-width: 64em) {
  .s-prezzi-limite-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-l); }
  .s-prezzi-limite-testa { grid-column: 1 / span 5; }
  .s-prezzi-conto-posto { grid-column: 7 / -1; grid-row: 1 / span 2; align-self: center; justify-self: end; width: 100%; max-width: 30rem; }
  .s-prezzi-limite-punti { grid-column: 1 / span 5; border-top: 0; }
}

/* ---------- 6. domande: sezione calma, i filetti si tracciano scorrendo ---------- */
.s-prezzi-domande { padding-top: 0; padding-bottom: clamp(5rem, 3rem + 5vw, 8rem); }
.s-prezzi-domande-in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
.s-prezzi-domande-in > .domande { max-width: 48rem; }
.s-prezzi-domande .domanda { position: relative; border-top-color: transparent; }
.s-prezzi-domande .domanda::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: var(--filetto); transform: scaleX(var(--k, 1)); transform-origin: 0 50%;
}
@media (min-width: 64em) {
  .s-prezzi-domande-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-l); }
  .s-prezzi-domande-h2 { grid-column: 1 / span 4; align-self: start; }
  .s-prezzi-domande-in > .domande { grid-column: 5 / -1; max-width: none; }
}
.s-prezzi-domande .risposta { max-width: 36em; }
.moto .s-prezzi-domande .domanda[open] > .risposta { animation: s-prezzi-appare 180ms var(--ease-out); }
@keyframes s-prezzi-appare { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 7. finale: il titolo va a registro, le spunte si tracciano ---------- */
.s-prezzi-finale { overflow-x: clip; }
.s-prezzi-finale-r { display: block; }
.s-prezzi-finale-azioni { gap: 1.5rem; }
.s-prezzi-finale-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
.s-prezzi-scrivici {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.125rem;
  color: var(--indaco-h); font-weight: 620; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.s-prezzi-scrivici:hover { text-decoration-thickness: 2px; }
.s-prezzi-spunte path { stroke-dasharray: 1 1; stroke-dashoffset: var(--d, 0); }
@media (max-width: 29.99em) {
  .s-prezzi-finale-riga { flex-direction: column; align-items: stretch; }
  .s-prezzi-finale-riga .pulsante { width: 100%; }
  .s-prezzi-scrivici { align-self: flex-start; }
}

/* ---------- 8. «riduci movimento»: tutto fermo e completo anche se cambia a pagina aperta ---------- */
.fermo .s-prezzi-note > li, .fermo .s-prezzi-gruppo-f, .fermo .s-prezzi-limite-in, .fermo .s-prezzi-domande .domanda { --k: 1 !important; }
.fermo .s-prezzi-spunte path { --d: 0 !important; }
.fermo .s-prezzi-testina { display: none; }

/* ---- css/sezioni/zz-palette.css ---- */
/* =====================================================================
   Qublo · palette.css — tavolozza «Tono su tono» (P3 con i ritocchi dei
   giudici, 6/11/2026). Specifica: contenuti/PALETTE.md.

   Si carica DOPO sito.css, app-ui.css, widgets.css e sezioni.css.
   Non tocca sito.css: sovrascrive solo i suoi token e le poche regole che
   usano un colore scritto a mano. Impaginazione e movimento non cambiano.
   ===================================================================== */

/* ---------- 1. Token del sistema (stessi nomi di sito.css) ---------- */
:root {
  /* chiaro: tre gradini di lavanda, il bianco solo per le carte */
  --chiaro: #EEEFFA;          /* lavanda chiara: fondo, testata, hero, sezioni normali (era #F5F6FA) */
  --lav-piena: #E4E5F7;       /* NUOVO lavanda piena: .sezione--bianca, piede */
  --lav-2: #E8E9F8;           /* NUOVO pillole neutre */
  --ctrl: #F3F3FC;            /* NUOVO controlli su lavanda: secondario, lingua, Menu, Pausa */
  --bianco: #FFFFFF;          /* solo carte, carte piano, recensioni */

  /* scuro: «tema scuro Qublo +1», indaco profondo e non nero */
  --notte: #1E1F52;           /* era #0F1026 */
  --sup: #25276A;             /* era #16173A */
  --sup-2: #2C2F78;           /* era #1B1D42 */
  --sup-3: #34378A;           /* era #23264A */
  --chk: #5558A8;             /* NUOVO bordo caselle e filetto forte su scuro */

  /* testo */
  --ink: #161A33;
  --muted: #4D5275;           /* era #5B6080: regge su tutte le lavande */
  --ink-d: #ECECF8;
  --muted-d: #B0B3E2;         /* era #9094BC */
  --su-indaco: #FFFFFF;       /* era #E6E6FF: sulla chiusura il testo è bianco pieno */

  /* filetti */
  --line: #CDD0EC;            /* era #E1E3EE */
  --line-2: #B9BCE2;          /* era #CDD0E2 */
  --line-d: #3A3D8C;          /* era #2A2C5A */
  --bordo-p: rgba(141, 143, 243, 0.35);   /* NUOVO bordo pervinca delle finestre scure */

  /* ruoli */
  --fondo: var(--chiaro);
  --fondo-2: var(--lav-piena);
  --software: var(--notte);
  --software-2: var(--sup);
  --software-3: var(--sup-2);

  /* ombre tinte d'indaco profondo #3F3FB8 */
  --ombra-carta: 0 1px 2px rgba(63, 63, 184, 0.06), 0 16px 32px -24px rgba(63, 63, 184, 0.30);
  --ombra-rilievo: 0 1px 2px rgba(63, 63, 184, 0.08), 0 24px 48px -28px rgba(63, 63, 184, 0.38);
  --ombra-finestra: 0 0 0 4px rgba(141, 143, 243, 0.10), 0 1px 0 rgba(63, 63, 184, 0.06), 0 28px 60px -30px rgba(63, 63, 184, 0.40);
  --riflesso: radial-gradient(120% 55% at 50% 0%, rgba(81, 81, 201, 0.16), rgba(81, 81, 201, 0) 70%);
}

/* ---------- 2. Sezioni ---------- */
.sezione--notte {
  --filetto-2: var(--chk);    /* era #3A3D72 */
  background: var(--riflesso), var(--software);
}
.sezione--notte + .sezione--notte { border-top-color: var(--line-d); }
/* il bianco resta solo alle carte, anche sulla lavanda piena */
.sezione--bianca .carta { background: var(--bianco); }

/* ---------- 3. Controlli su lavanda: niente bianco pieno ---------- */
.pulsante--secondario,
.cornice .qa-pausa,
.pausa,
.testata-menu-apri,
.telefono-lingua-altra,
:where(.menu-apri) { background: var(--ctrl); border-color: var(--line-2); }
@media (hover: hover) and (pointer: fine) {
  .pulsante--secondario:hover { background: var(--ctrl); }
}
/* sul notte restano scuri (regole di sito.css invariate) */
.sezione--notte .pulsante--secondario,
.sezione--notte .cornice .qa-pausa,
.sezione--notte .pausa { background: var(--sup); border-color: var(--line-d); }

/* pillola neutra: era #ECEDF4 scritto a mano (le varianti restano quelle di sito.css) */
.pillola:not(.pillola--brand):not(.pillola--ok):not(.pillola--avviso):not(.pillola--piena) { background: var(--lav-2); }
.sezione--notte .pillola:not(.pillola--brand):not(.pillola--ok):not(.pillola--avviso):not(.pillola--piena) { background: var(--sup-2); }
.pillola.pillola--ok { background: #E8F0EB; }
.sezione--notte .pillola.pillola--ok { background: color-mix(in srgb, var(--lime) 12%, var(--sup)); }

/* ---------- 4. Finestre dell'app ---------- */
/* scuro: stessi token dell'app un gradino più chiari */
.qa,
.qa[data-tema="scuro"],
[data-tema="scuro"] .qa:not([data-tema]) {
  --q-bg: #1E1F52;
  --q-surface: #25276A;
  --q-surface-2: #2C2F78;
  --q-surface-raised: #34378A;
  --q-muted: #B0B3E2;
  --q-line: #3A3D8C;
  --q-on-ok: #1E1F52;
  --q-overlay: rgba(30, 31, 82, 0.72);
  --q-shadow-color: rgba(63, 63, 184, 0.40);
  --qa-cornice: rgba(141, 143, 243, 0.35);
  --qa-barra-fondo: #25276A;
}
/* chiaro: i colori dell'app restano veri, cambia solo la cornice */
.qa[data-tema="chiaro"],
[data-tema="chiaro"] .qa:not([data-tema]) {
  --q-muted: #5B6080;
  --q-shadow-color: rgba(63, 63, 184, 0.18);
  --qa-cornice: #CDD0EC;
}
.cornice-schermo > .qa-finestra,
.cornice-schermo > .qa > .qa-finestra { box-shadow: var(--ombra-finestra); }

/* ---------- 5. Testata e piede ---------- */
/* sopra una .sezione--notte (larga quanto la riga) sito.js disegna sotto l'intestazione la stessa
   lastra del pannello, al pixel, e aggiunge .is-scura quando la lastra copre il centro della riga:
   cambia solo l'inchiostro. Il fondo resta la lavanda; la lastra lo copre dove c'è il pannello. */
.testata.is-scura {
  --inchiostro: var(--ink-d);
  --inchiostro-2: var(--muted-d);
  --filetto: var(--line-d);
  --filetto-2: var(--chk);
  --focus: var(--indaco-ch);
  color: var(--ink-d);
}
.testata.is-scura .marchio { color: var(--ink-d); }
.testata.is-scura .testata-menu-apri { background: var(--sup); border-color: var(--line-d); color: var(--ink-d); }
.piede { background: var(--fondo-2); border-top: 1px solid rgba(81, 81, 201, 0.4); }

/* ---------- 6. Chiusura: sempre indaco profondo, testo bianco ---------- */
.finale,
.finale--notte { --inchiostro-2: #fff; background: var(--indaco-p); color: #fff; }
.finale--notte { --focus: #fff; }
.finale--notte .finale-testo p,
.finale--notte .finale-domanda { color: #fff; }
.finale--notte .pulsante:not(.pulsante--inverso) { background: #fff; color: var(--indaco-h); }
.finale--pannello { background: none; }
.finale--pannello .finale-in { background: var(--indaco-p); }
/* dopo un blocco scuro: filetto, così i due viola non si fondono */
.sezione--notte + .finale { border-top: 1px solid var(--chk); }
@media (hover: hover) and (pointer: fine) {
  .pulsante--inverso:hover { background: var(--chiaro); color: var(--ink); }
}

/* ---------- 7. Grafico del prezzo ---------- */
/* IVA in indaco chiaro: il pervinca era troppo vicino all'indaco delle commissioni */
.s-home-perche-c4 { background: var(--indaco-ch); }

/* ---------- 8. Telefono e barra del browser ---------- */
/* <meta name="theme-color" content="#EEEFFA"> in modello.html; sito.js lo porta a #1E1F52
   (--notte) mentre l'intestazione è .is-scura e lo riporta a #EEEFFA subito dopo. */

/* ---- css/sezioni/zzz-nebbia.css ---- */
/* =====================================================================
   Qublo v2 · zzz-nebbia.css — punti «Deve» di REVISIONE-SKILL.md § 6
   (tavolozza «Indaco nebbia», un solo palco scuro per pagina). Si monta dopo
   zz-palette.css. Se in contributi/colori/ arrivano i token finali, si
   sostituiscono solo i valori del blocco :root e del blocco .qa.
   ===================================================================== */
:root {
  /* chiari: quasi bianchi, tinti d'indaco (tinta 280°, croma 0,007-0,026) */
  --chiaro: #F7F7FD; --fondo-alt: #EFF0FA; --nebbia: #E4E6F6; --bianco: #FFFFFF;
  --lav-piena: var(--fondo-alt); --lav-2: #EEEFF9; --ctrl: #FFFFFF;
  --ink: #1E1F3F; --muted: #575A76; --line: #DADBE8; --line-2: #C5C7DA; --indaco-tenue: #E8E9FE;
  /* finestre dell'app: tema scuro +1 gradino, stessa croma (resta indaco, non diventa viola) */
  --notte: #1A1C33; --sup: #212348; --sup-2: #272A50; --sup-3: #2F3358;
  --line-d: #363969; --muted-d: #A3A7CE; --chk: #474B81;
  /* palco scuro del sito: uno per pagina */
  --palco-notte: #23254D; --filetto-notte: #454973; --su-notte: #EDEEF7; --su-notte-2: #B8BBDB;
  /* ruoli */
  --fondo: var(--chiaro); --fondo-2: var(--fondo-alt);
  --software: var(--palco-notte); --su-software: var(--su-notte);
  --su-software-2: var(--su-notte-2); --filetto-software: var(--filetto-notte);
  --riflesso: none;
  --bordo-p: #363969;
  /* forme e ombre, tinte con #23254D e senza anelli */
  --rientro: clamp(0.5rem, 1.6vw, 1.5rem); --raggio-palco: clamp(20px, 2.2vw, 32px);
  --ombra-carta: 0 1px 0 rgba(35, 37, 77, .04), 0 12px 28px -22px rgba(35, 37, 77, .30);
  --ombra-rilievo: 0 1px 0 rgba(35, 37, 77, .05), 0 24px 48px -30px rgba(35, 37, 77, .36);
  --ombra-finestra: 0 28px 64px -34px rgba(35, 37, 77, .45);
}
.qa, .qa[data-tema="scuro"], [data-tema="scuro"] .qa:not([data-tema]) {
  --q-bg: #1A1C33; --q-surface: #212348; --q-surface-2: #272A50; --q-surface-raised: #2F3358;
  --q-line: #363969; --q-muted: #A3A7CE; --q-on-ok: #1A1C33;
  --q-overlay: rgba(26, 28, 51, 0.72); --q-shadow-color: rgba(35, 37, 77, 0.40);
  --qa-cornice: #363969; --qa-barra-fondo: #1D1F3E;
}
/* palco scuro: testo e filetti del palco (il fondo lo disegna scorrimento.css, rientrato e tondo) */
.sezione--notte { --ink-d: var(--su-notte); --muted-d: var(--su-notte-2); --line-d: var(--filetto-notte); color: var(--su-notte); }
/* testata sempre chiara */
.testata, .testata.is-scura { background: rgba(247, 247, 253, 0.97); color: var(--ink); }
/* chiusura uguale in tutte le pagine: nebbia, titolo inchiostro, pulsante indaco */
.finale, .finale--notte {
  --focus: var(--indaco); --inchiostro: var(--ink); --inchiostro-2: var(--muted); --su-indaco: var(--muted);
  background: var(--nebbia); color: var(--ink); color-scheme: light; border-top: 0;
}
.sezione--notte + .finale { border-top: 0; }
.finale .finale-testo p, .finale .finale-domanda, .finale--notte .finale-testo p, .finale--notte .finale-domanda { color: var(--muted); }
.finale .finale-domanda a { color: var(--indaco-h); }
.finale .pulsante, .finale .pulsante:not(.pulsante--inverso), .finale--notte .pulsante:not(.pulsante--inverso) { background: var(--indaco); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .finale .pulsante:hover, .finale .pulsante:not(.pulsante--inverso):hover { background: var(--indaco-h); color: #fff; }
}
.finale .rassicurazioni { color: var(--ink); }
.finale .rassicurazioni svg { stroke: var(--indaco); }
.finale--pannello { background: none; }
.finale--pannello .finale-in { background: var(--nebbia); color: var(--ink); }
/* piede: chiaro, filetto tenue */
.piede { background: var(--fondo-2); border-top: 1px solid var(--line); }
/* chiusura della Home: il pannello resta rientrato e tondo (sezione-home-fine.js), ma su nebbia */
html .finale.s-home-finale { background: var(--fondo-2); }
html .finale.s-home-finale::before { background: var(--nebbia); }
/* Home · estensione e calcolatore ora stanno sul chiaro: testi con i colori della pagina */
.s-home-estensione, .s-home-calcolatore { color: var(--ink); }
/* hero: il palco chiaro dietro la finestra è nebbia (REVISIONE-SKILL § 5, «Palco chiaro») */
@media (min-width: 56em) { .s-home-hero-palco { background: var(--nebbia); border-color: #D6D8EC; } }
/* Mona Sans: le cifre tabulari hanno lo zero stretto e sembrano codice («10.000»). Sui numeri fermi del sito
   si usano le cifre normali; dentro le schermate dell'app (Inter, .qa) restano tabulari. */
.cifre, .passo::before, .passo-n, .tabella .num, .piano-prezzo, .piano-dati > li > strong, .s-home-piani-dati strong, .s-home-piani-prodotti strong { font-variant-numeric: normal; }
/* testata sempre chiara, anche sopra il palco scuro: si annullano lo strato notte e i colori di .is-scura;
   fondo pieno, così sotto la testata non si legge mai il testo della pagina */
.testata, .testata.is-scura { background: #F7F7FD; color: var(--ink);
  --inchiostro: var(--ink); --inchiostro-2: var(--muted); --filetto: var(--line); --filetto-2: var(--line-2); --focus: var(--indaco); }
.testata.is-scura .testata-notte { opacity: 0; }
.testata.is-scura.testata--staccata::after { opacity: 1; }
.testata.is-scura .marchio, .testata.is-scura .marchio-parola, .testata.is-scura .testata-menu a { color: var(--ink); }
.testata.is-scura .testata-menu-apri { background: var(--ctrl, #FFFFFF); border-color: var(--line-2); color: var(--ink); }
.testata.is-scura .testata-menu a[aria-current="page"]::after { background: var(--azione, var(--indaco)); }
/* palco scuro con una schermata «sbordata»: la finestra resta dentro il palco, con il margine del testo */
@media (min-width: 80em) {
  .sezione--notte.sezione--sborda { --sbordo: 0px; }
  .sezione--notte .cornice--sborda-destra .qa-finestra, .sezione--notte .cornice--sborda-sinistra .qa-finestra { border-radius: var(--r-xl); border-width: 1px; }
}
/* chiusure: il pulsante secondario è chiaro (bianco con filetto), mai un secondo indaco pieno */
.finale .pulsante.pulsante--secondario, .finale .pulsante.s-funzionalita-secondario, .finale .pulsante.s-come-funziona-finale-secondario {
  background: var(--bianco); color: var(--ink); border-color: var(--line-2);
}
@media (hover: hover) and (pointer: fine) {
  .finale .pulsante.pulsante--secondario:hover, .finale .pulsante.s-funzionalita-secondario:hover, .finale .pulsante.s-come-funziona-finale-secondario:hover {
    background: var(--bianco); border-color: var(--azione, var(--indaco)); color: var(--azione-hover, var(--indaco-h));
  }
}

/* ---- css/sezioni/zzz-prestazioni.css ---- */
/* =====================================================================
   Qublo v2 · zzz-prestazioni.css — correzioni di caricamento (contributi/prestazioni/PRESTAZIONI.md § 4.1)
   Si monta per ultimo. In Blazor i caratteri vanno ospitati in locale (CSP): vedi DESCRIZIONE_GITHUB.md.
   ===================================================================== */
/* 1 · il marchio a larghezza 100: basta l'asse del peso di Mona Sans (40 KB invece di 98) */
.marchio, .marchio-parola { font-stretch: 100%; }
/* 2 · ripiego con le metriche di Mona Sans e Inter: il titolo non va a capo in un altro punto quando arriva il carattere */
@font-face { font-family: "Mona Sans Ripiego"; src: local("Arial"), local("ArialMT"); font-weight: 100 599;
  size-adjust: 103.7%; ascent-override: 105.11%; descent-override: 30.86%; line-gap-override: 0%; }
@font-face { font-family: "Mona Sans Ripiego"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 900;
  size-adjust: 99.42%; ascent-override: 109.64%; descent-override: 32.19%; line-gap-override: 0%; }
@font-face { font-family: "Mona Sans Ripiego Android"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 100 599;
  size-adjust: 103.88%; ascent-override: 104.93%; descent-override: 30.81%; line-gap-override: 0%; }
@font-face { font-family: "Mona Sans Ripiego Android"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 600 900;
  size-adjust: 107.6%; ascent-override: 101.3%; descent-override: 29.74%; line-gap-override: 0%; }
@font-face { font-family: "Inter Ripiego"; src: local("Arial"), local("ArialMT"); font-weight: 100 599;
  size-adjust: 106.73%; ascent-override: 90.88%; descent-override: 22.49%; line-gap-override: 0%; }
@font-face { font-family: "Inter Ripiego"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 900;
  size-adjust: 101.35%; ascent-override: 95.71%; descent-override: 23.68%; line-gap-override: 0%; }
:root {
  --font: "Mona Sans", "Mona Sans Ripiego", "Mona Sans Ripiego Android", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-app: "Inter", "Inter Ripiego", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* 3-4 · sul telefono titolo e frase della Home visibili dal primo disegno, senza copie della scia (LCP 1,8 s invece di 3,2-3,9) */
@media (max-width: 47.99em) {
  .s-home-hero .moto-scia { display: none !important; }
  .s-home-hero .riga-t, .s-home-hero-guida { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---- css/sezioni/zzz-safari.css ---- */
/* =====================================================================
   Qublo v2 · zzz-safari.css — correzioni provate nel WebKit (contributi/safari/SAFARI.md § 4)
   e piccole correzioni comuni. Si monta per ultimo.
   ===================================================================== */
/* F1 · testata su una riga: in inglese «Choose your plan» non entra sotto 383 px (resta il pulsante della prima schermata) */
/* la riga cresce invece di uscire dalla testata: con il testo più spaziato (WCAG 1.4.12) va a capo e la testata si allunga (ACCESSIBILITA D13) */
.testata-riga { flex-wrap: wrap; height: auto; min-height: var(--testata-riga); }
@media (max-width: 23.99em) { html[lang="en"] .testata-piano { padding: 0 0.625rem; font-size: 0.8125rem; } html[lang="en"] .testata-riga { gap: 0.5rem; } }
@media (max-width: 14.99em) {
  .marchio-parola { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* F2 · zoom della pagina al 200 % su iPhone piccolo: niente testo tagliato */
.finale-in { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56em) { .finale-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
@media (max-width: 63.99em) { .s-come-funziona-intro-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 19.99em) {
  h1, h2, h3 { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
  .s-come-funziona-intro .titolo-1 { -webkit-hyphens: auto; hyphens: auto; }
  .pulsante { max-width: 100%; white-space: normal; }
  p, li, dd, code { overflow-wrap: anywhere; }
}
/* F5 · safe area in alto dentro l'altezza della testata (web app dalla schermata Home) */
:root { --testata-h: calc(3.5rem + env(safe-area-inset-top, 0px)); }
@media (min-width: 48em) { :root { --testata-h: calc(4.5rem + env(safe-area-inset-top, 0px)); } }
@media (max-height: 31.25em) { :root { --testata-h: 0px; } }
/* F9 · bersagli da 44 px */
.s-home-funzioni-link { padding-block: 0.625rem; margin-block: -0.625rem; }
.s-contatti-scrivici-indirizzo { padding-block: 0.625rem; }   /* S9: 45 px, interlinea della v2 più bassa */
/* F11 · Safari 15-17: triangolo dei gruppi di Prezzi */
.s-prezzi-gruppo-f > summary::-webkit-details-marker { color: var(--inchiostro-2); }
/* S13 · iOS 15: con il menu aperto la pagina dietro non scorre */
.menu-aperto body { overflow: hidden; }
/* Funzionalità: righe entro 66 caratteri anche a zoom 200 % */
ul.s-funzionalita-punti > li { max-width: 66ch; }

/* Contatti da 56 em: la testa di «Di cosa scriverci» resta ferma accanto all'elenco (niente colonna vuota) */
@media (min-width: 56em) { .s-contatti-argomenti-testa { position: sticky; top: calc(var(--testata-h) + 2rem); align-self: start; } }
/* Funzionalità sotto 80 em: con il focus nella barra lo scroll-snap non riallinea (ACCESSIBILITA D3) */
@media (max-width: 79.99em) { .s-funzionalita-indice-binario:focus-within { scroll-snap-type: none; } }

/* telefono: dentro un palco notte le cornici «a bordo» arrivano al bordo del palco, non dello schermo */
@media (max-width: 47.99em) { .sezione--notte .cornice--bordo > .cornice-schermo { margin-left: calc(0.375rem - var(--gut-l)); margin-right: calc(0.375rem - var(--gut-r)); } }
/* 10 · menu del telefono aperto: un solo «Scegli il piano» */
html.menu-aperto .testata-piano { display: none; }
/* 11 · menu del telefono: «Scrivici:» sulla riga dell'email */
.telefono-contatto { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.375rem; color: var(--inchiostro-2); font-size: var(--t-small); line-height: 1.5; }
/* 15 · rassicurazioni senza una parola sola sull'ultima riga */
.rassicurazioni li span { text-wrap: pretty; }
/* 64-67 em: con la barra di scorrimento classica (Windows; Funzionalità con scrollbar-gutter: stable) la riga perde 15-17 px.
   Meno spazio dopo il marchio: la testata resta su una riga senza impostazioni; con la spaziatura del testo può ancora andare a capo (D13). */
@media (min-width: 64em) and (max-width: 66.99em) { .testata-riga .marchio { margin-right: 1.5rem; } }