/* Landing di T&T Services Italia, direzione "Rotte".
   Token dalla bozza di fase 4 (direzione-3-rotte.tokens.css), con le modifiche del canone e della revisione
   del 2026-10-06. Il canone sta in ../DIREZIONE.md. */

:root {
  --fondo: #FFFFFF;
  --fondo-3: #EEF4FB;
  --inchiostro: #1E2628;
  --inchiostro-tenue: #56666A;
  --accento: #1565B8;
  --accento-2: #0D4D8D;
  --filo: #D6E2F0;
  --filo-forte: #0D4D8D;

  --font-titolo: "Outfit", system-ui, sans-serif;
  --font-testo: "Figtree", system-ui, sans-serif;
  --font-etichetta: "Outfit", system-ui, sans-serif;
  --fs-1: clamp(2.5rem, 1.35rem + 3.6vw, 4.625rem);
  --fs-2: clamp(2rem, 1.2rem + 2.2vw, 3.25rem);
  --fs-3: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  --fs-4: 1.25rem;
  --fs-5: 1.0625rem;
  --fs-6: 1rem;
  --fs-7: 0.875rem;
  --fs-8: 0.75rem;
  --lh-stretta: 1.08;
  --lh-normale: 1.55;
  --tracking-titolo: -0.015em;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2.5rem;
  --sp-6: 4rem;
  --sp-7: 5rem;
  --pad-x: 1rem;
  --max-w: 72rem;

  --raggio: 1.25rem;
  --raggio-s: 0.625rem;
  --ombra: 0 1.25rem 2.5rem -1.25rem color-mix(in srgb, #0D4D8D 45%, transparent);
  --ombra-corta: 0 0.25rem 0.875rem -0.25rem color-mix(in srgb, #0D4D8D 40%, transparent);

  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-focale: 720ms;
  --scaletta: 90ms;
  --curva-uscita: cubic-bezier(0.2, 0.7, 0.2, 1);
  --curva-focale: cubic-bezier(0.16, 1, 0.3, 1);

  --x-verde: #098D37;
  --x-rosso: #C11428;
  --x-ambra: #FFBC5F;
  --x-ambra-chiara: #FFE2B5;
  --x-loop: 1.6s;
  --x-trattino: 6px;
  --x-passo: 14px;
  --x-disegno: 850ms;
  --x-ritardo-arrivo: 780ms;
  --x-punto: 0.875rem;
  --x-anello: 0.3125rem;
  --x-tratto-h: 2.5rem;
  --x-sagoma-casa: polygon(50% 0, 100% 36%, 100% 100%, 0 100%, 0 36%);
  --x-sagoma-porta: inset(0 round 999px 999px 0.75rem 0.75rem);
  --x-logo-h: 1.75rem;
  --x-tocco: 3.25rem;
  --x-tocco-s: 2.75rem;
  --x-cerchio: 3.5rem;
  --x-campo-h: 3rem;
  --s: 7.5rem;
}
@media (min-width: 760px) { :root { --pad-x: 2rem; --s: 9rem; --x-campo-h: 3.5rem; } }
@media (min-width: 1100px) {
  :root { --pad-x: 2.5rem; --sp-5: 3.5rem; --sp-6: 6rem; --sp-7: 8rem; --fs-4: 1.375rem; --fs-5: 1.125rem; --x-logo-h: 2.25rem; --x-tratto-h: 3.5rem; --x-cerchio: 4.5rem; --s: 14rem; }
}

/* I tre piani: il campo rimappa solo le variabili del nucleo. */
.campo--bianco { --fondo: #FFFFFF; --fondo-3: #EEF4FB; --inchiostro: #1E2628; --inchiostro-tenue: #56666A; --accento: #1565B8; --accento-2: #0D4D8D; --filo: #D6E2F0; --filo-forte: #0D4D8D; }
.campo--cielo { --fondo: #EEF4FB; --fondo-3: #FFFFFF; --inchiostro: #1E2628; --inchiostro-tenue: #4F5F63; --accento: #1565B8; --accento-2: #0D4D8D; --filo: #CBDAEC; --filo-forte: #0D4D8D; }
.campo--blu { --fondo: #0D4D8D; --fondo-3: color-mix(in srgb, #FFFFFF 9%, #0D4D8D); --inchiostro: #FFFFFF; --inchiostro-tenue: #C9D9EE; --accento: #FFFFFF; --accento-2: #FFFFFF; --filo: color-mix(in srgb, #FFFFFF 30%, transparent); --filo-forte: #FFFFFF; }

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: #FFFFFF; color: var(--inchiostro); font-family: var(--font-testo); font-size: var(--fs-6); line-height: var(--lh-normale); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
figure, blockquote { margin: 0; }
h1, h2, h3 { font-family: var(--font-titolo); margin: 0; line-height: var(--lh-stretta); color: var(--accento-2); letter-spacing: var(--tracking-titolo); text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
::selection { background: #0D4D8D; color: #FFFFFF; }
.campo--blu ::selection { background: #FFFFFF; color: #0D4D8D; }
a { color: var(--accento); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; border-radius: 4px; }
.campo { background-color: var(--fondo); color: var(--inchiostro); position: relative; }
.dentro { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }
.salta { position: absolute; left: -9999px; top: 0; z-index: 100; background: #FFFFFF; color: #0D4D8D; padding: var(--sp-2) var(--sp-3); border-radius: var(--raggio-s); font-weight: 600; }
.salta:focus { left: var(--sp-3); top: var(--sp-3); }
.segnaposto { display: inline; background: #FFF1B8; color: #4A3A00; font-family: var(--font-testo); font-size: var(--fs-8); font-weight: 500; font-style: normal; line-height: 1.45; letter-spacing: 0; text-transform: none; padding: 0.1em 0.45em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
p.segnaposto { display: inline-block; max-width: 44rem; }
.solo-lettore { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.link-spento { color: var(--accento); text-decoration: underline; text-underline-offset: 0.18em; opacity: 0.75; cursor: not-allowed; }

/* ---------------- pulsanti ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--x-tocco); padding: 0 var(--sp-4); background: var(--accento); color: var(--fondo); border: 2px solid var(--accento); border-radius: 999px; font-family: var(--font-etichetta); font-weight: 600; font-size: var(--fs-6); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--dur-1) var(--curva-uscita), box-shadow var(--dur-1) var(--curva-uscita), background-color var(--dur-1), color var(--dur-1); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--ombra-corta); }
.btn:active { transform: translateY(0); }
.btn--vuoto { background: transparent; color: var(--accento); }
.btn--vuoto:hover { background: color-mix(in srgb, var(--accento) 8%, transparent); }
.btn--bianco { background: #FFFFFF; color: #0D4D8D; border-color: #FFFFFF; }
.btn--s { min-height: var(--x-tocco-s); font-size: var(--fs-7); padding: 0 var(--sp-3); }

/* ---------------- la firma: punti e tratteggi ---------------- */
.punto { display: inline-block; width: var(--x-punto); height: var(--x-punto); border-radius: 50%; box-shadow: 0 0 0 var(--x-anello) var(--fondo); flex: none; }
.punto--partenza { background: var(--x-verde); }
.punto--arrivo { background: var(--x-rosso); }
.tratto-h { display: block; height: 2px; background: repeating-linear-gradient(to right, var(--accento) 0 var(--x-trattino), transparent var(--x-trattino) var(--x-passo)); background-size: var(--x-passo) 100%; }
.tratto-v { display: block; width: 2px; background: repeating-linear-gradient(to bottom, var(--accento) 0 var(--x-trattino), transparent var(--x-trattino) var(--x-passo)); background-size: 100% var(--x-passo); }
.asse { display: block; position: relative; overflow: hidden; width: 2px; height: var(--x-tratto-h); margin: 0 auto; }
.asse::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--x-passo)); bottom: 0; background: repeating-linear-gradient(to bottom, var(--filo-forte) 0 var(--x-trattino), transparent var(--x-trattino) var(--x-passo)); background-size: 100% var(--x-passo); }
@keyframes scorri-giu { to { background-position: 0 var(--x-passo); } }
@keyframes scorri-destra { to { background-position: var(--x-passo) 0; } }
@keyframes scorri-svg { to { stroke-dashoffset: calc(-1 * var(--x-passo)); } }
@keyframes arriva { from { transform: scale(0); } to { transform: scale(1); } }

/* ================= testata ================= */
.testata { border-bottom: 1px solid var(--filo); z-index: 5; }
.testata__riga { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 4rem; }
.logo { height: var(--x-logo-h); width: auto; }
.testata__logo { display: block; }
@media (min-width: 1100px) {
  .testata__riga { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 5rem; }
  .testata__logo { grid-column: 2; }
  .testata__azione { grid-column: 3; justify-self: end; }
}

/* ================= 01 apertura ================= */
.apertura { padding: var(--sp-5) 0 var(--sp-6); z-index: 2; }
.apertura__griglia { display: grid; gap: var(--sp-5); }
.apertura__testa { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; }
.apertura h1 { font-size: var(--fs-1); font-weight: 600; max-width: 15ch; }
.apertura__sotto { color: var(--inchiostro-tenue); font-size: var(--fs-5); max-width: 40rem; }
/* l'ordine e' lo stesso su ogni larghezza: titolo, sottotitolo, campi, bollino e voto (Pasquale, 2026-10-06) */
@media (min-width: 760px) { .apertura__testa { gap: var(--sp-4); } }

/* l'occhiello: il punto di partenza della rotta (deroga di Pasquale del 2026-10-06) */
.partenza { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); font: 600 var(--fs-7)/1.3 var(--font-titolo); color: var(--accento-2); letter-spacing: 0; }
.partenza .punto { box-shadow: 0 0 0 3px color-mix(in srgb, var(--x-verde) 18%, transparent); }
.partenza__tratto { width: 2.25rem; height: 2px; background: repeating-linear-gradient(to right, var(--x-verde) 0 var(--x-trattino), transparent var(--x-trattino) 11px); }

/* la riga dei campi: di base impilati, col percorso verticale fra partenza e arrivo */
/* --r-gap: spazio fra le righe dei campi; --r-etichetta: etichetta (1,125rem) piu' lo spazio sotto. La rotta verticale li usa. */
.ricerca { --r-gap: var(--sp-2); --r-etichetta: 1.5rem; position: relative; z-index: 10; width: 100%; max-width: 64rem; text-align: left; }
.ricerca__riga { display: grid; gap: var(--r-gap); position: relative; }
.ricerca__campo { position: relative; display: flex; flex-direction: column; gap: calc(var(--r-etichetta) - 1.125rem); min-width: 0; }
.ricerca label { font-family: var(--font-etichetta); font-size: var(--fs-8); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accento-2); line-height: 1.5; }
.ricerca input, .quando__casella { width: 100%; height: var(--x-campo-h); padding: 0 var(--sp-3); border: 2px solid var(--filo); border-radius: var(--raggio-s); background: #FFFFFF; font: 500 var(--fs-5)/1 var(--font-testo); color: var(--inchiostro); transition: border-color var(--dur-1), box-shadow var(--dur-1); }
.ricerca input::placeholder { color: #5B6A70; opacity: 1; }
.ricerca input:hover, .quando__casella:hover { border-color: color-mix(in srgb, var(--accento) 45%, var(--filo)); }
.ricerca input:focus-visible, .quando__casella:focus-visible { outline: none; border-color: var(--accento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 22%, transparent); }
.ricerca__vai { display: flex; align-items: flex-end; }
.ricerca__vai .btn { width: 100%; min-height: var(--x-campo-h); padding: 0 var(--sp-5); }
.ricerca__campo--da input, .ricerca__campo--a input, .ricerca__campo--da label, .ricerca__campo--a label { padding-left: 2.75rem; }
.ricerca__campo .punto { position: absolute; z-index: 2; left: 1.125rem; bottom: calc(var(--x-campo-h) / 2 - var(--x-punto) / 2); }
.ricerca__rotta { position: relative; height: 0; transform-origin: 50% calc(-1 * (var(--r-gap) + var(--x-campo-h) / 2)); }
.ricerca__rotta .tratto-h { display: none; position: absolute; }
.ricerca__rotta .tratto-v { position: absolute; left: calc(1.125rem + var(--x-punto) / 2 - 1px); top: calc(-1 * (var(--r-gap) + var(--x-campo-h) / 2)); height: calc(var(--r-gap) * 2 + var(--x-campo-h) + var(--r-etichetta)); }
/* telefono: campi piu' bassi e piu' vicini fra loro, "Avanti" staccato dal gruppo */
@media (max-width: 759px) {
  .ricerca { --r-gap: 0.375rem; --r-etichetta: 1.375rem; }
  .ricerca input, .quando__casella { font-size: var(--fs-6); }
  .ricerca__vai { margin-top: 0.875rem; }
}
@media (min-width: 760px) {
  .ricerca__riga { grid-template-columns: 1fr 1fr; column-gap: var(--sp-3); }
  .ricerca__campo--da, .ricerca__rotta, .ricerca__campo--a { grid-column: 1 / -1; }
  .quando { grid-column: 1; }
  .ricerca__vai { grid-column: 2; }
}

/* Quando: il pannello con calendario e mesi */
.quando__casella { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); text-align: left; cursor: pointer; }
.quando__valore { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quando__valore.is-vuoto { color: #5B6A70; }
.quando__freccia { width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--accento-2); border-bottom: 2px solid var(--accento-2); transform: translateY(-2px) rotate(45deg); flex: none; }
.quando__pannello { position: absolute; z-index: 30; top: calc(100% + var(--sp-2)); left: 0; width: max(100%, 20rem); max-width: calc(100vw - 2 * var(--pad-x)); background: #FFFFFF; border: 1px solid var(--filo); border-radius: var(--raggio-s); box-shadow: var(--ombra); padding: var(--sp-3); }
.quando__pannello[hidden] { display: none; }
.quando__schede { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); background: var(--fondo-3); border-radius: 999px; padding: var(--sp-1); margin-bottom: var(--sp-3); }
.quando__schede button { border: 0; background: transparent; border-radius: 999px; padding: var(--sp-2); font: 600 var(--fs-8)/1.2 var(--font-etichetta); color: var(--accento-2); cursor: pointer; }
.quando__schede button[aria-selected="true"] { background: #FFFFFF; box-shadow: var(--ombra-corta); }
.quando__nota { font-size: var(--fs-7); color: var(--inchiostro-tenue); margin-bottom: var(--sp-3); }
.cal__testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.cal__titolo { font: 600 var(--fs-6)/1 var(--font-titolo); color: var(--accento-2); text-transform: capitalize; }
.cal__nav { width: 2.25rem; height: 2.25rem; border: 1px solid var(--filo); border-radius: 50%; background: #FFFFFF; color: var(--accento-2); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.cal__nav:disabled { opacity: 0.35; cursor: default; }
.cal__giorni, .cal__griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal__giorni span { font-size: var(--fs-8); color: var(--inchiostro-tenue); padding: var(--sp-1) 0; }
.cal__griglia button, .mesi__griglia button { border: 0; background: transparent; border-radius: var(--raggio-s); color: var(--inchiostro); font: 500 var(--fs-7)/1 var(--font-testo); cursor: pointer; }
.cal__griglia button { aspect-ratio: 1; }
.cal__griglia button:hover:not(:disabled), .mesi__griglia button:hover { background: var(--fondo-3); }
.cal__griglia button:disabled { color: #A9B4B8; cursor: default; }
.cal__griglia button[aria-pressed="true"], .mesi__griglia button[aria-pressed="true"] { background: var(--accento); color: #FFFFFF; }
.mesi__griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); }
.mesi__griglia button { padding: var(--sp-2) var(--sp-1); text-transform: capitalize; display: grid; gap: 2px; }
.mesi__griglia small { font-size: var(--fs-8); color: inherit; opacity: 0.7; }

/* fiducia */
.apertura__fiducia { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.bollino { display: inline-flex; align-items: center; gap: 0.4375rem; border: 1.5px dashed var(--accento); color: var(--accento-2); border-radius: 999px; padding: 0.375rem 0.875rem 0.375rem 0.75rem; font: 600 var(--fs-7)/1.2 var(--font-etichetta); letter-spacing: 0.02em; }
.bollino__icona { width: 1.125rem; height: 1.125rem; flex: none; fill: currentColor; }
.fiducia { color: var(--inchiostro-tenue); font-size: var(--fs-7); }
@media (min-width: 760px) { .apertura__fiducia { flex-direction: row; gap: var(--sp-4); } }

/* la foto */
.viaggio { position: relative; margin: 0; }
.camion { position: relative; z-index: 2; overflow: hidden; background: var(--fondo-3); box-shadow: var(--ombra); }
.camion__foto { width: 100%; height: 100%; object-fit: cover; }
.segnaposto--foto { position: absolute; z-index: 3; top: var(--sp-3); left: 50%; transform: translateX(-50%); max-width: 80%; text-align: center; }
.rotta { display: none; position: relative; height: 3rem; margin: 0 var(--sp-3) -1.25rem; z-index: 3; }
.rotta svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rotta path { fill: none; stroke: var(--accento); stroke-width: 2; stroke-dasharray: var(--x-trattino) calc(var(--x-passo) - var(--x-trattino)); }
.rotta .punto { position: absolute; top: 50%; margin-top: calc(var(--x-punto) / -2); }
.rotta .punto--partenza { left: 0; }
.rotta .punto--arrivo { right: 0; }

/* apertura centrata (decisa il 2026-10-06): campi in riga, la pillola resta nel bianco */
html[data-apertura="centro"] .rotta { display: block; }
html[data-apertura="centro"] .viaggio { max-width: 60rem; width: 100%; margin: 0 auto; }
html[data-apertura="centro"] .camion { height: 12.5rem; border-radius: 999px; }
html[data-apertura="centro"] .camion__foto { object-position: 50% 58%; }
@media (min-width: 760px) { html[data-apertura="centro"] .camion { height: 17rem; } }
@media (min-width: 1100px) {
  html[data-apertura="centro"] .apertura { padding-top: 2.5rem; }
  html[data-apertura="centro"] .apertura__griglia { row-gap: var(--sp-4); }
  html[data-apertura="centro"] .viaggio { max-width: none; }
  html[data-apertura="centro"] .camion { height: 20rem; }
  html[data-apertura="centro"] .ricerca__riga { grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: var(--sp-2); align-items: end; }
  html[data-apertura="centro"] .quando, html[data-apertura="centro"] .ricerca__vai { grid-column: auto; }
  html[data-apertura="centro"] .quando { margin-left: var(--sp-2); }
  html[data-apertura="centro"] .quando__pannello { left: auto; right: 0; }
  /* in tutte e due le varianti, su computer, partenza e arrivo stanno in riga con la rotta orizzontale */
  .ricerca__campo--da, .ricerca__rotta, .ricerca__campo--a { grid-column: auto; }
  .ricerca__campo--da input, .ricerca__campo--a input { padding-left: var(--sp-3); }
  .ricerca__campo--da label, .ricerca__campo--a label { padding-left: 0; }
  .ricerca__campo--da .punto { left: auto; right: calc(-1 * var(--sp-2) - var(--x-punto) / 2); }
  .ricerca__campo--a .punto { left: calc(-1 * var(--sp-2) - var(--x-punto) / 2); }
  .ricerca__rotta { align-self: end; height: var(--x-campo-h); transform-origin: 0 50%; }
  .ricerca__rotta .tratto-v { display: none; }
  .ricerca__rotta .tratto-h { display: block; left: 0; right: 0; top: calc(50% - 1px); }
}

/* sequenza focale d'apertura: una volta sola, da uno stato gia' leggibile */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra var(--dur-focale) var(--curva-focale) both; animation-delay: calc(var(--i, 0) * var(--scaletta)); }
  @keyframes entra { from { opacity: 0.3; transform: translateY(0.875rem); } to { opacity: 1; transform: none; } }
  .camion { animation: sale var(--dur-focale) var(--curva-focale) calc(3 * var(--scaletta)) both; }
  @keyframes sale { from { transform: translateY(1.5rem); } to { transform: none; } }
  .ricerca__rotta { animation: disegna-v var(--x-disegno) var(--curva-uscita) calc(4 * var(--scaletta)) both; }
  .ricerca__campo--a .punto, .rotta .punto--arrivo { animation: arriva var(--dur-2) var(--curva-uscita) calc(4 * var(--scaletta) + var(--x-ritardo-arrivo)) both; }
  .rotta svg { animation: disegna-h var(--x-disegno) var(--curva-uscita) calc(4 * var(--scaletta)) both; }
  @media (min-width: 1100px) { .ricerca__rotta { animation-name: disegna-o; } }
  @keyframes disegna-h { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes disegna-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes disegna-o { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  #apertura .in-vista .tratto-h, #apertura .in-vista.ricerca__rotta .tratto-h { animation: scorri-destra var(--x-loop) linear infinite; }
  #apertura .in-vista .tratto-v, #apertura .in-vista.ricerca__rotta .tratto-v { animation: scorri-giu var(--x-loop) linear infinite; }
  #apertura .rotta.in-vista path { animation: scorri-svg var(--x-loop) linear infinite; }
}

/* ================= 02 prove: fascia di separazione ================= */
.prove { padding: var(--sp-4) 0; text-align: center; border-top: 1px solid var(--filo); border-bottom: 1px solid var(--filo); }
.prove__etichetta { font: 600 var(--fs-8)/1.4 var(--font-etichetta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--inchiostro-tenue); margin-bottom: var(--sp-3); }
.prove__linea { list-style: none; }
.prove__nota { margin-top: var(--sp-3); }
.fermata__logo { display: grid; place-items: center; background: #FFFFFF; color: #56666A; border-radius: var(--raggio-s); position: relative; z-index: 1; border: 1px solid var(--filo); }
/* misure fisse: dentro la griglia della casella un'altezza in percentuale non si risolve e il logo esce */
.fermata__logo img { width: auto; height: auto; max-width: 84%; max-height: 2.375rem; object-fit: contain; }
html[data-prove="striscia"] .prove__linea { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
html[data-prove="striscia"] .fermata { display: grid; place-items: center; min-height: 4.5rem; background: #FFFFFF; border-radius: var(--raggio-s); border: 1px solid var(--filo); padding: var(--sp-2); }
html[data-prove="striscia"] .fermata__logo { width: 100%; height: 3rem; border: 0; }
html[data-prove="striscia"] .fermata__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* i due Ministeri: emblema e nome, come sui loro siti. Sul telefono affiancati, una casella ciascuno (Pasquale, 2026-10-06) */
html[data-prove="striscia"] .fermata--ente { grid-column: span 1; display: flex; align-items: center; justify-content: center; gap: 0.375rem; }
html[data-prove="striscia"] .fermata--ente .fermata__logo { width: auto; height: 2.25rem; flex: none; }
html[data-prove="striscia"] .fermata--ente .fermata__logo img { max-width: none; max-height: none; height: 2.25rem; width: auto; }
html[data-prove="striscia"] .fermata--ente .fermata__nome { position: static; width: auto; height: auto; clip-path: none; white-space: normal; text-align: left; color: #0D4D8D; font: 600 var(--fs-8)/1.25 var(--font-etichetta); max-width: 12ch; }
@media (min-width: 760px) {
  html[data-prove="striscia"] .prove__linea { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html[data-prove="striscia"] .fermata { grid-column: span 2; }
  html[data-prove="striscia"] .fermata--ente { grid-column: span 3; gap: var(--sp-2); }
  html[data-prove="striscia"] .fermata--ente .fermata__logo, html[data-prove="striscia"] .fermata--ente .fermata__logo img { height: 2.5rem; }
}
@media (min-width: 1100px) {
  html[data-prove="striscia"] .prove .dentro { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: center; column-gap: var(--sp-5); text-align: left; max-width: 80rem; }
  html[data-prove="striscia"] .prove__etichetta { margin: 0; }
  html[data-prove="striscia"] .prove__linea { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  html[data-prove="striscia"] .fermata { grid-column: span 1; }
  html[data-prove="striscia"] .fermata--ente { grid-column: span 2; }
  html[data-prove="striscia"] .prove__nota { grid-column: 2; }
}

/* ================= 03 come ricevi il preventivo ================= */
.passi { padding: var(--sp-6) 0 var(--sp-7); text-align: center; view-timeline: --passi block; }
.passi__titolo { font-size: var(--fs-2); font-weight: 500; max-width: 18ch; margin: 0 auto; }
.passi__percorso { display: flex; flex-direction: column; align-items: center; margin-top: var(--sp-3); }
.passo { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); max-width: 30rem; padding: var(--sp-2) 0; }
.cerchio { width: var(--x-cerchio); height: var(--x-cerchio); border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--accento); background: var(--fondo); font: 600 var(--fs-4)/1 var(--font-titolo); color: var(--accento-2); }
.passo__numero { font: 600 var(--fs-8)/1 var(--font-etichetta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--inchiostro-tenue); margin-top: var(--sp-1); }
.passo h3 { font-size: var(--fs-4); font-weight: 600; }
.passo p { color: var(--inchiostro-tenue); }
.biforca { display: block; width: 100%; max-width: 56rem; height: auto; overflow: visible; margin-top: var(--sp-1); }
.biforca__linea { fill: none; stroke: #FFFFFF; stroke-width: 2.5; stroke-dasharray: 7 9; }
.biforca__traccia { fill: none; stroke: #FFFFFF; stroke-width: 14; }
/* Le due strade sono due opzioni (Pasquale, 2026-10-06): un riquadro ciascuna, con la targa sul bordo come le due date,
   e "oppure" fra le due. --punto-y: il punto rosso sta sul bordo sinistro, all'altezza della prima riga del titolo. */
.strade { --gap-strade: 3.25rem; --punto-y: calc(1.375rem + var(--fs-4) * 0.54); position: relative; display: grid; grid-template-columns: 1fr; width: 100%; max-width: 56rem; row-gap: var(--gap-strade); }
.strada { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: 1.375rem 1.25rem; text-align: left; background: var(--fondo-3); border: 1.5px solid var(--filo); border-radius: var(--raggio); }
.strada__targa { position: absolute; top: 0; left: 1.125rem; transform: translateY(-50%); padding: 0.375rem 0.75rem; border-radius: 0.5rem; background: #0D4D8D; border: 1.5px solid var(--filo); font: 600 var(--fs-8)/1 var(--font-etichetta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--x-ambra); }
.strada__oppure { position: absolute; left: 0; right: 0; top: calc(-1 * var(--gap-strade) - 1.5px); height: var(--gap-strade); display: grid; place-items: center; font: 600 var(--fs-6)/1 var(--font-etichetta); letter-spacing: 0.02em; color: var(--x-ambra); }
/* la parola sta sul blu della sezione, fuori dai riquadri: il fondo si dichiara, e copre i punti sotto */
.strada__oppure span { padding: 0.25rem 0.5rem; border-radius: 0.5rem; background: #0D4D8D; }
.strada__punto { position: absolute; z-index: 1; left: calc(-0.75px - var(--x-punto) / 2); top: calc(var(--punto-y) - var(--x-punto) / 2); width: var(--x-punto); height: var(--x-punto); border-radius: 50%; background: #FFFFFF; }
.strada h3 { font-size: var(--fs-4); font-weight: 600; max-width: 26ch; }
.strada h3 + p { color: var(--inchiostro-tenue); max-width: 48ch; }
.passi__coda { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.passi__coda p { font: 500 var(--fs-5)/1.4 var(--font-titolo); color: var(--inchiostro); }
/* telefono: la rotta scende da Passo 2, piega a sinistra e si divide in due rami, uno per opzione.
   Tre pezzi: la discesa con la piega (.strade::before), il ramo che corre lungo la prima opzione e curva nella seconda
   (::after della prima), il trattino che entra nella prima (::before della prima). */
@media (max-width: 759px) {
  .biforca { display: none; }
  .strade { --ramo-m: 1.375rem; --spina: 0.25rem; --discesa: 2rem; --sopra: 1.5rem; --curva: 0.875rem; padding: calc(var(--discesa) + var(--sopra)) 0 0 var(--ramo-m); }
  .strade::before { content: ""; position: absolute; top: 0; left: var(--ramo-m); right: calc(50% - 1px); height: var(--discesa); border-right: 2px dashed var(--filo-forte); border-bottom: 2px dashed var(--filo-forte); border-bottom-right-radius: var(--curva); }
  .strada:first-child::after { content: ""; position: absolute; left: calc(var(--spina) - var(--ramo-m) - 1.5px); width: calc(var(--ramo-m) - var(--spina)); top: calc(-1 * var(--sopra) - 3.5px); bottom: calc(-1 * (var(--gap-strade) + var(--punto-y)) - 4px); border: 2px dashed var(--filo-forte); border-right: 0; border-radius: var(--curva) 0 0 var(--curva); }
  .strada:first-child::before { content: ""; position: absolute; left: calc(var(--spina) - var(--ramo-m) - 1.5px); width: calc(var(--ramo-m) - var(--spina)); top: calc(var(--punto-y) - 1px); height: 2px; background: repeating-linear-gradient(to right, var(--filo-forte) 0 var(--x-trattino), transparent var(--x-trattino) 10px); }
}
/* tablet: le due opzioni affiancate, la biforcazione arriva al centro del bordo alto; "oppure" fra le due */
@media (min-width: 760px) and (max-width: 1099px) {
  .strade { --mezzo: 2rem; grid-template-columns: 1fr 1fr; }
  .strada { margin-inline: var(--mezzo); }
  .strada__punto { left: calc(50% - var(--x-punto) / 2); top: calc(-0.75px - var(--x-punto) / 2); }
  .strada__oppure { left: calc(-1.5px - 2 * var(--mezzo)); right: auto; width: calc(2 * var(--mezzo)); top: 0; height: 100%; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Ogni tratto segue la propria posizione: parte appena sopra la barra fissa (5rem + 4vh dal fondo)
       e finisce a meta' schermo, su qualunque altezza di finestra. */
    .passi .asse { animation: cresce linear both; animation-timeline: view(); animation-range: cover calc(5rem + 8vh) cover calc(5rem + 26vh); }
    .biforca { view-timeline: --biforca block; }
    .biforca__traccia { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: traccia linear both; animation-timeline: --biforca; animation-range: cover calc(5rem + 4vh) cover calc(5rem + 22vh); }
    .strada__punto { animation: arriva linear both; animation-timeline: view(); animation-range: cover calc(5rem + 16vh) cover calc(5rem + 24vh); }
    @keyframes cresce { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
    @keyframes cresce-x { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
    @keyframes traccia { to { stroke-dashoffset: 0; } }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 759px) {
    /* telefono: prima la discesa e la piega, poi il ramo lungo la prima opzione fino alla seconda */
    .strade { view-timeline: --strade block; }
    .strada:first-child { view-timeline: --strada1 block; }
    .strade::before { animation: piega linear both; animation-timeline: --strade; animation-range: cover calc(5rem + 6vh) cover calc(5rem + 18vh); }
    .strada:first-child::after { animation: cresce linear both; animation-timeline: --strada1; animation-range: cover calc(5rem + 10vh) cover calc(5rem + 60vh); }
    .strada:first-child::before { animation: cresce-x linear both; animation-timeline: --strada1; animation-range: cover calc(5rem + 18vh) cover calc(5rem + 23vh); }
    .strada:first-child .strada__punto { animation-range: cover calc(5rem + 21vh) cover calc(5rem + 25vh); }
    .strada:last-child .strada__punto { animation-range: cover calc(5rem + 19vh) cover calc(5rem + 23vh); }
    /* la discesa si disegna in verticale, poi la piega corre verso sinistra */
    @keyframes piega { 0% { clip-path: inset(0 0 100% calc(100% - 3px)); } 45% { clip-path: inset(0 0 0 calc(100% - 3px)); } 100% { clip-path: inset(0); } }
  }
}
@media (prefers-reduced-motion: no-preference) {
  #passi .asse.in-vista::before { animation: scorri-giu var(--x-loop) linear infinite; }
  #passi .biforca.in-vista .biforca__linea { animation: scorri-svg var(--x-loop) linear infinite; }
}
/* computer: il percorso corre in orizzontale e si divide verso le due opzioni; meno alto, piu' largo */
@media (min-width: 1100px) {
  .passi { --ramo: 5rem; text-align: left; padding: var(--sp-6) 0; }
  .passi__titolo { margin: 0; max-width: none; }
  .passi__percorso { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 16rem) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; margin-top: var(--sp-5); }
  .passi__percorso > .asse, .passi .biforca { display: none; }
  .passo { grid-row: 1; position: relative; align-items: flex-start; max-width: none; padding: 0 var(--sp-4) 0 0; }
  .passo::after, .strade::before { content: ""; position: absolute; height: 2px; top: calc(var(--x-cerchio) / 2 - 1px); background: repeating-linear-gradient(to right, var(--filo-forte) 0 var(--x-trattino), transparent var(--x-trattino) var(--x-passo)); background-size: var(--x-passo) 100%; }
  .passo::after { left: var(--x-cerchio); right: 0; }
  /* il punto della prima opzione cade sulla riga dei cerchi */
  .strade { --gap-strade: 3.5rem; grid-column: 3; grid-row: 1 / 3; max-width: none; padding: max(0px, calc(var(--x-cerchio) / 2 - 1.5px - var(--punto-y))) 0 0 var(--ramo); }
  .strade::before { left: 0; width: var(--ramo); }
  .strada h3 { max-width: 30ch; }
  .strada:first-child::after { content: ""; position: absolute; left: calc(-2rem - 1.5px); width: 2rem; top: calc(var(--punto-y) - 1px); bottom: calc(-1 * (var(--gap-strade) + var(--punto-y)) - 4px); border-left: 2px dashed var(--filo-forte); border-bottom: 2px dashed var(--filo-forte); border-bottom-left-radius: 0.875rem; }
  .passi__coda { grid-column: 1 / 3; grid-row: 2; align-self: end; align-items: flex-start; margin-top: var(--sp-5); padding-right: var(--sp-5); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
    /* il riferimento e' la riga dei passi, non la sezione intera: cosi' il disegno cade nella fascia visibile */
    .passi__percorso { view-timeline: --percorso block; }
    .passo::after { animation: cresce-x linear both; animation-timeline: --percorso; animation-range: cover calc(5rem + 10vh) cover calc(5rem + 22vh); }
    .passo:nth-of-type(2)::after { animation-range: cover calc(5rem + 22vh) cover calc(5rem + 30vh); }
    .strade::before { animation: cresce-x linear both; animation-timeline: --percorso; animation-range: cover calc(5rem + 30vh) cover calc(5rem + 34vh); }
    /* con i riquadri la seconda opzione sta piu' in basso: il ramo arriva piu' tardi, cosi' il punto si posa sopra il 75% anche su 1280x600 */
    .strada:first-child::after { animation: cresce linear both; animation-timeline: --percorso; animation-range: cover calc(5rem + 34vh) cover calc(5rem + 58vh); }
    .strada__punto { animation-timeline: --percorso; }
    .strada:first-child .strada__punto { animation-range: cover calc(5rem + 32vh) cover calc(5rem + 36vh); }
    .strada:last-child .strada__punto { animation-range: cover calc(5rem + 56vh) cover calc(5rem + 60vh); }
    /* il tratteggio scorre solo mentre il percorso e' in vista */
    .passi__percorso.in-vista .passo::after { animation: cresce-x linear both, scorri-destra var(--x-loop) linear infinite; animation-timeline: --percorso, auto; animation-range: cover calc(5rem + 10vh) cover calc(5rem + 22vh), normal; }
    .passi__percorso.in-vista .passo:nth-of-type(2)::after { animation-range: cover calc(5rem + 22vh) cover calc(5rem + 30vh), normal; }
    .passi__percorso.in-vista .strade::before { animation: cresce-x linear both, scorri-destra var(--x-loop) linear infinite; animation-timeline: --percorso, auto; animation-range: cover calc(5rem + 30vh) cover calc(5rem + 34vh), normal; }
  }
}

/* ================= 04 cosa facciamo ================= */
.servizi { padding: var(--sp-6) 0; overflow: clip; }
.servizi__griglia { display: grid; gap: var(--sp-4); }
.servizi__testa h2 { font-size: var(--fs-2); font-weight: 500; max-width: 24ch; }
.servizi__sotto { color: var(--inchiostro-tenue); font-size: var(--fs-5); margin-top: var(--sp-3); }
.servizi__lista { list-style: none; }
.voce { position: relative; padding: var(--sp-3) 0 var(--sp-3) var(--sp-5); border-top: 1px solid var(--filo); cursor: default; outline-offset: 4px; }
.voce:last-child { border-bottom: 1px solid var(--filo); }
.voce::before { content: ""; position: absolute; left: var(--sp-1); top: calc(var(--sp-3) + 0.3rem); width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 2px solid var(--accento); background: #FFFFFF; transition: background-color var(--dur-1), border-color var(--dur-1), transform var(--dur-2) var(--curva-uscita); }
.voce.attiva::before { background: var(--accento); transform: scale(1.2); }
.voce h3 { font-size: var(--fs-5); font-weight: 600; transition: color var(--dur-1); }
.voce p { color: var(--inchiostro-tenue); margin-top: var(--sp-1); }
.voce.attiva h3 { color: var(--accento); }
@media (max-width: 759px) { .servizi__testa { order: 0; } .scena { order: 1; } .servizi__lista { order: 2; } }

/* la scena della scatola */
.scena { position: relative; height: calc(var(--s) * 2.3); display: grid; place-items: center; perspective: 1100px; }
.scena__pavimento { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none;
  background: repeating-linear-gradient(28deg, transparent 0 34px, #DCE7F3 34px 35.5px), repeating-linear-gradient(-28deg, transparent 0 34px, #DCE7F3 34px 35.5px);
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 60%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 50% 60% at 50% 60%, #000 25%, transparent 75%); }
.scena__terra { position: absolute; left: 50%; bottom: 14%; width: calc(var(--s) * 1.9); height: calc(var(--s) * 0.32); transform: translateX(-50%); border-radius: 50%; background: color-mix(in srgb, #0D4D8D 10%, transparent); filter: blur(6px); transition: opacity var(--dur-2); }
.pila { position: relative; z-index: 2; width: var(--s); height: var(--s); transform-style: preserve-3d; transform: translate3d(0, 0, 0) scale(1) rotateX(-22deg) rotateY(-36deg); transition: transform var(--dur-3) var(--curva-uscita); }
.cubo { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform var(--dur-3) var(--curva-uscita); }
.f { position: absolute; inset: 0; background: #FFFFFF; border: 2px solid #0D4D8D; transition: transform var(--dur-3) var(--curva-uscita), opacity var(--dur-2), background-color var(--dur-2); }
.cubo--principale .f-fronte, .cubo--principale .f-dx, .cubo--principale .f-retro, .cubo--principale .f-sx { transform: rotateY(var(--ry)) translateZ(calc(var(--s) / 2)) translateY(calc(var(--s) / 2)) rotateX(var(--r, 0deg)) translateY(calc(var(--s) / -2)); }
.f-fronte { --ry: 0deg; }
.f-dx { --ry: 90deg; background: #F4F8FC; }
.f-retro { --ry: 180deg; background: #E9F0F8; }
.f-sx { --ry: -90deg; background: #E9F0F8; }
.f-fondo { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); background: #E9F0F8; }
.cubo--extra .f-fronte { transform: translateZ(calc(var(--s) / 2)); }
.cubo--extra .f-dx { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cubo--extra .f-retro { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cubo--extra .f-sx { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cubo--extra .f-cima { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: #FAFCFF; }
/* niente opacita' sui cubi: su un elemento in 3D l'opacita' lo appiattisce. Si sfumano le sole facce. */
.cubo--extra .f { opacity: 0; transition: opacity var(--dur-2) var(--curva-uscita); }
.cubo--due { transform: translate3d(-108%, -70%, 0); }
.cubo--tre { transform: translate3d(0, -170%, 0); }
.lembo { position: absolute; left: 0; top: calc(var(--s) / -2); width: var(--s); height: calc(var(--s) / 2); background: #FAFCFF; border: 2px solid #0D4D8D; transform-origin: 50% 100%; transition: transform var(--dur-3) var(--curva-uscita), opacity var(--dur-2); }
.lembo--fronte { transform: translateZ(calc(var(--s) / 2)) rotateX(var(--lembo, 90deg)); }
.lembo--retro { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)) rotateX(var(--lembo, 90deg)); }
.nastro { position: absolute; left: 0; top: calc(50% - var(--s) * 0.09); width: var(--s); height: calc(var(--s) * 0.18); transform: rotateX(90deg) translateZ(calc(var(--s) / 2 + 2px)); background: #D9E6F5 repeating-linear-gradient(to right, #0D4D8D 0 var(--x-trattino), transparent var(--x-trattino) var(--x-passo)) 0 50% / 100% 2px no-repeat; transition: opacity var(--dur-2); }
.etichetta-sped { position: absolute; right: 12%; bottom: 14%; width: 42%; height: 26%; border: 1.5px solid #0D4D8D; border-radius: 3px; background: repeating-linear-gradient(to bottom, transparent 0 22%, color-mix(in srgb, #0D4D8D 35%, transparent) 22% 28%); transition: opacity var(--dur-2); }
.fragile, .oblo, .comandi { position: absolute; opacity: 0; transition: opacity var(--dur-2); }
.fragile { inset: 14% 0 auto; display: grid; justify-items: center; gap: 4%; color: #0D4D8D; }
.fragile svg { width: 26%; height: auto; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fragile b { font: 700 calc(var(--s) * 0.1)/1 var(--font-etichetta); letter-spacing: 0.14em; }
.oblo { left: 50%; top: 58%; width: 56%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid #0D4D8D; display: grid; place-items: center; }
.oblo span { width: 66%; aspect-ratio: 1; border-radius: 50%; border: 2px solid #0D4D8D; background: #E3EDF8; }
.comandi { left: 10%; right: 10%; top: 8%; height: 12%; border-bottom: 2px solid #0D4D8D; display: flex; justify-content: flex-end; align-items: center; gap: 6%; }
.comandi i { width: 9%; aspect-ratio: 1; border-radius: 50%; border: 2px solid #0D4D8D; }

/* l'autoscala: facciata con finestra e scala a pioli, in un quadrato centrato nella scena */
.scena__salita { position: absolute; left: 50%; top: 50%; width: min(calc(var(--s) * 2.2), 100%); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.facciata { position: absolute; left: 54%; top: 6%; width: 40%; height: 86%; border: 2px solid #0D4D8D; background: #FFFFFF; border-radius: 4px 4px 0 0; opacity: 0; transition: opacity var(--dur-2); }
.facciata__finestra { position: absolute; left: 26%; top: 12%; width: 48%; height: 20%; border: 2px solid #0D4D8D; background: #E9F0F8; }
.facciata__finestra--bassa { top: 48%; }
.scala-pioli { position: absolute; left: 6%; top: 92%; width: 66%; height: calc(var(--s) * 0.16); transform-origin: 0 50%; transform: rotate(-52deg) scaleX(0); border-top: 2px solid #0D4D8D; border-bottom: 2px solid #0D4D8D; background: repeating-linear-gradient(to right, #0D4D8D 0 2px, transparent 2px calc(var(--s) * 0.15)); transition: transform var(--dur-3) var(--curva-uscita); }

/* gli stati, uno per voce */
.servizi[data-voce="smontaggio"] .pila { transform: translate3d(0, 4%, 0) scale(0.56) rotateX(-58deg) rotateY(-30deg); }
.servizi[data-voce="smontaggio"] .cubo--principale .f-fronte,
.servizi[data-voce="smontaggio"] .cubo--principale .f-dx,
.servizi[data-voce="smontaggio"] .cubo--principale .f-retro,
.servizi[data-voce="smontaggio"] .cubo--principale .f-sx { --r: -90deg; }
.servizi[data-voce="smontaggio"] .lembo, .servizi[data-voce="smontaggio"] .nastro, .servizi[data-voce="smontaggio"] .etichetta-sped { opacity: 0; }
.servizi[data-voce="autoscala"] .pila { transform: translate3d(12%, -38%, 0) scale(0.4) rotateX(-22deg) rotateY(-36deg); }
.servizi[data-voce="autoscala"] .facciata { opacity: 1; }
.servizi[data-voce="autoscala"] .scala-pioli { transform: rotate(-52deg) scaleX(1); }
.servizi[data-voce="autoscala"] .scena__terra { opacity: 0.4; }
.servizi[data-voce="delicati"] .pila { transform: translate3d(0, 0, 0) scale(1) rotateX(-16deg) rotateY(-18deg); }
.servizi[data-voce="delicati"] .fragile { opacity: 1; }
.servizi[data-voce="lavatrice"] .pila { transform: translate3d(0, 0, 0) scale(1) rotateX(-18deg) rotateY(-22deg); }
.servizi[data-voce="lavatrice"] .oblo, .servizi[data-voce="lavatrice"] .comandi { opacity: 1; }
.servizi[data-voce="lavatrice"] .nastro, .servizi[data-voce="lavatrice"] .etichetta-sped { opacity: 0; }
.servizi[data-voce="deposito"] .pila { transform: translate3d(14%, 18%, 0) scale(0.6) rotateX(-22deg) rotateY(-36deg); }
.servizi[data-voce="deposito"] .cubo--due { transform: translate3d(-108%, 0, 0); transition-delay: 180ms; }
.servizi[data-voce="deposito"] .cubo--tre { transform: translate3d(0, -100%, 0); transition-delay: 300ms; }
.servizi[data-voce="deposito"] .cubo--due .f { opacity: 1; transition-delay: 180ms; }
.servizi[data-voce="deposito"] .cubo--tre .f { opacity: 1; transition-delay: 300ms; }

@media (min-width: 760px) and (max-width: 1099px) {
  .servizi__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-5); align-items: start; }
  .servizi__testa { grid-column: 1 / -1; }
  .scena { position: sticky; top: 15vh; }
}
/* computer: tre voci per lato, la scatola al centro */
@media (min-width: 1100px) {
  .servizi .dentro { max-width: 80rem; }
  .servizi__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem) minmax(0, 1fr); grid-template-rows: auto repeat(3, minmax(9.5rem, auto)); column-gap: var(--sp-4); row-gap: var(--sp-4); }
  .servizi__testa { grid-column: 1 / -1; text-align: center; margin-bottom: var(--sp-4); }
  .servizi__testa h2 { margin: 0 auto; }
  .servizi__lista { display: contents; }
  .voce, .voce:last-child { border: 0; padding: 0; align-self: start; width: 100%; max-width: 21rem; }
  .voce:nth-child(-n+3) { grid-column: 1; justify-self: end; text-align: right; padding-right: 2.25rem; }
  .voce:nth-child(n+4) { grid-column: 3; justify-self: start; padding-left: 2.25rem; }
  .voce::before { top: 0.4rem; }
  .voce:nth-child(-n+3)::before { left: auto; right: 0; }
  .voce:nth-child(n+4)::before { left: 0; }
  .voce:nth-child(1), .voce:nth-child(4) { grid-row: 2; }
  .voce:nth-child(2), .voce:nth-child(5) { grid-row: 3; }
  .voce:nth-child(3), .voce:nth-child(6) { grid-row: 4; }
  .scena { grid-column: 2; grid-row: 2 / 5; height: 100%; min-height: calc(var(--s) * 2.4); }
}
@media (prefers-reduced-motion: reduce) {
  .pila, .cubo, .f, .lembo, .nastro, .scala-pioli, .facciata, .fragile, .oblo, .comandi, .voce::before, .voce h3, .etichetta-sped, .scena__terra { transition: none !important; }
}

/* ================= 05 la frase di Emanuela ================= */
.emanuela { padding: var(--sp-6) 0; }
.emanuela__figura { display: grid; justify-items: start; gap: var(--sp-4); }
.emanuela__virgolette { display: block; height: 2.25rem; }
.emanuela__virgolette::before { content: "\201C"; display: block; font: 600 6.5rem/1 var(--font-titolo); color: #FFFFFF; transform: translateY(-0.6rem); }
.emanuela__citazione p { font-family: var(--font-testo); font-style: italic; font-weight: 500; font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.5rem); line-height: 1.32; letter-spacing: -0.01em; color: #FFFFFF; max-width: 24em; text-wrap: pretty; }
.em-chiave { font-style: inherit; font-weight: 600; }
/* segnaposto largo zero sulla riga della parola: fa da riferimento all'animazione, che su un elemento in linea
   il browser calcolerebbe dall'inizio del paragrafo */
.em-segno { display: inline-block; width: 0; height: 1em; }
.emanuela__firma { display: flex; align-items: center; gap: var(--sp-3); font: 500 var(--fs-7)/1.35 var(--font-testo); color: var(--inchiostro-tenue); }
.emanuela__firma strong { display: block; font: 600 var(--fs-6)/1.3 var(--font-titolo); color: #FFFFFF; }
.emanuela__ritratto { width: 3.5rem; height: 3.5rem; flex: none; border-radius: 50%; display: grid; place-items: center; border: 2px solid color-mix(in srgb, #FFFFFF 55%, transparent); font: 600 var(--fs-7)/1 var(--font-titolo); letter-spacing: 0.04em; color: #FFFFFF; }

/* ================= 06b galleria ================= */
.galleria { padding: var(--sp-6) 0 var(--sp-5); }
.galleria__testa { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.galleria__testa h2 { font-size: var(--fs-2); font-weight: 500; }
.mosaico { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 9.5rem; grid-auto-flow: dense; gap: var(--sp-2); }
.tessera { position: relative; overflow: hidden; border-radius: var(--raggio-s); background: var(--fondo-3); }
.tessera img { width: 100%; height: 100%; object-fit: cover; }
.tessera--grande { grid-column: span 2; grid-row: span 2; }
.tessera--alta { grid-row: span 2; }
.tessera--larga { grid-column: span 2; }
/* clip e non hidden: hidden fa del mosaico un contenitore che scorre, e le foto misurerebbero la loro entrata li' dentro */
.js .mosaico.chiuso { max-height: 30rem; overflow: clip; }
.js .mosaico.chiuso::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9rem; background: linear-gradient(to bottom, color-mix(in srgb, var(--fondo) 0%, transparent), var(--fondo) 88%); pointer-events: none; }
.galleria__piede { display: flex; justify-content: center; margin-top: calc(var(--sp-4) * -1); position: relative; z-index: 1; }
.galleria__piede .btn[hidden] { display: none; }
@media (min-width: 760px) {
  .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 12.5rem; gap: var(--sp-3); }
  .js .mosaico.chiuso { max-height: 34rem; }
  .galleria__testa { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
}

/* ================= 06+09 recensioni con i temi ================= */
.recensioni { padding: var(--sp-6) 0; }
.recensioni__testa { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.recensioni__testa h2 { font-size: var(--fs-2); font-weight: 500; max-width: 18ch; }
.recensioni__voto { color: var(--inchiostro-tenue); font-size: var(--fs-6); }
.recensioni__voto strong { color: var(--accento-2); font: 600 var(--fs-4)/1 var(--font-titolo); margin-right: var(--sp-1); }
.tema { display: grid; gap: var(--sp-3); padding: var(--sp-4) 0; border-top: 1px solid var(--filo); }
.tema__testo h3 { font-size: var(--fs-4); font-weight: 600; max-width: 20ch; }
.tema__testo p { color: var(--inchiostro-tenue); margin-top: var(--sp-2); max-width: 34ch; }
/* la recensione in una scheda come quelle dei riquadri di Google: si capisce a colpo d'occhio che e' una recensione
   e dove finisce (commento di Pasquale del 2026-10-06). Niente logo G: e' un marchio di Google, al suo posto la scritta. */
.scheda-g { display: grid; gap: 0.75rem; align-content: start; padding: var(--sp-4) var(--sp-4) 1.25rem; background: #FFFFFF; border: 1px solid var(--filo); border-radius: 1rem; box-shadow: var(--ombra-corta); }
.scheda-g__testa { display: flex; align-items: center; gap: 0.75rem; }
.scheda-g__iniziale { width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: #1565B8; color: #FFFFFF; font: 600 1.5rem/1 var(--font-titolo); }
.scheda-g__iniziale--verde { background: var(--x-verde); }
.scheda-g__iniziale--rosso { background: var(--x-rosso); }
.scheda-g__chi { display: grid; gap: 0.125rem; font: 400 var(--fs-7)/1.3 var(--font-testo); color: var(--inchiostro-tenue); }
.scheda-g__chi strong { font: 600 var(--fs-6)/1.25 var(--font-titolo); color: var(--inchiostro); letter-spacing: 0; }
.scheda-g__voto { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-7); color: var(--inchiostro-tenue); }
.scheda-g__voto .stelle { color: var(--x-ambra); }
.scheda-g__voto .stelle svg { height: 1rem; }
.scheda-g__testo p { font-size: var(--fs-6); line-height: 1.6; color: var(--inchiostro); }
/* oltre le otto righe la recensione si ferma alla sesta, con "Leggi tutta"; senza JavaScript resta intera */
.js .scheda-g:not(.intera):not(.corta) .scheda-g__testo p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.scheda-g__testo p:focus { outline: none; }
.scheda-g__altro { justify-self: start; display: inline-flex; align-items: center; min-height: 2.75rem; margin: -0.5rem 0 -0.625rem; padding: 0; border: 0; background: none; font: 600 var(--fs-7)/1.3 var(--font-etichetta); color: var(--accento); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; cursor: pointer; }
.scheda-g__altro[hidden] { display: none; }
.recensioni__coda { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--filo); }
.recensioni__nota { color: var(--inchiostro-tenue); font-size: var(--fs-7); }
@media (min-width: 760px) {
  .recensioni__testa { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .tema { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-5); align-items: start; }
  .recensioni__coda { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ================= 07 le due date ================= */
.date { padding: var(--sp-6) 0; text-align: center; }
.date__titolo { font-size: var(--fs-2); font-weight: 500; max-width: 22ch; margin: 0 auto; }
.date__coppia { display: grid; gap: var(--sp-5); max-width: 60rem; margin: var(--sp-6) auto 0; text-align: left; }
.opzione { position: relative; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5) var(--sp-4) var(--sp-4); border-radius: var(--raggio); background: #FFFFFF; border: 1.5px solid var(--filo); }
.opzione--flessibile { border: 2.5px solid #0D4D8D; box-shadow: var(--ombra); }
.opzione__targa { position: absolute; top: 0; left: var(--sp-4); transform: translateY(-50%); padding: 0.4rem 0.875rem; border-radius: 0.5rem; font: 600 var(--fs-8)/1 var(--font-etichetta); letter-spacing: 0.1em; text-transform: uppercase; background: #FFFFFF; color: #0D4D8D; border: 1.5px solid var(--filo); }
.opzione--flessibile .opzione__targa { background: #0D4D8D; color: #FFFFFF; border-color: #0D4D8D; }
.opzione__testa { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.opzione h3 { font-size: var(--fs-3); font-weight: 600; }
.opzione__sconto { font: 600 clamp(2.75rem, 1.8rem + 3vw, 4rem)/0.9 var(--font-titolo); letter-spacing: -0.03em; color: #0D4D8D; }
.opzione__rotta { list-style: none; position: relative; display: grid; gap: var(--sp-3); }
.opzione__rotta::before { content: ""; position: absolute; left: calc(0.375rem - 1px); top: 0.7em; bottom: 0.7em; width: 2px; background: repeating-linear-gradient(to bottom, #0D4D8D 0 var(--x-trattino), transparent var(--x-trattino) 12px); opacity: 0.6; }
.opzione__rotta li { position: relative; padding-left: 1.875rem; color: var(--inchiostro); line-height: 1.45; }
.opzione__rotta li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #FFFFFF; border: 2px solid #0D4D8D; }
.opzione .btn { margin-top: auto; width: 100%; }
.date__nota { margin-top: var(--sp-4); color: var(--inchiostro-tenue); font-size: var(--fs-7); }
@media (min-width: 760px) { .date__coppia { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }

/* ================= 08 il deposito ================= */
.deposito { padding: var(--sp-6) 0; }
.deposito__testa h2 { font-size: var(--fs-2); font-weight: 500; max-width: 27ch; }
.deposito__testa p { color: var(--inchiostro-tenue); font-size: var(--fs-5); margin-top: var(--sp-3); max-width: 40rem; }
.tappe { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--sp-2); max-width: 60rem; margin: var(--sp-5) auto 0; }
.casa { position: relative; aspect-ratio: 1 / 1; }
.casa .sagoma { position: absolute; inset: 0; clip-path: var(--x-sagoma-casa); overflow: hidden; background: var(--fondo-3); }
.casa img { width: 100%; height: 100%; object-fit: cover; }
.tappe__mezzo { position: relative; width: 6.5rem; height: 100%; display: grid; align-items: end; justify-items: center; padding-bottom: 12%; }
.tappe__tratto { position: absolute; left: 0.25rem; right: 0.25rem; bottom: 30%; height: 2px; background: repeating-linear-gradient(to right, #0D4D8D 0 var(--x-trattino), transparent var(--x-trattino) var(--x-passo)); }
.tappe__da, .tappe__a { position: absolute; bottom: calc(30% - var(--x-punto) / 2 + 1px); }
.tappe__da { left: 0; }
.tappe__a { right: 0; }
.timbro { position: relative; z-index: 1; width: 6.5rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 0.15rem; background: #FFFFFF; color: #0D4D8D; border: 3px solid #0D4D8D; box-shadow: inset 0 0 0 4px #FFFFFF, inset 0 0 0 5.5px #0D4D8D; transform: rotate(-9deg); text-align: center; margin-bottom: 8%; }
.timbro__num { font: 600 2.375rem/0.9 var(--font-titolo); letter-spacing: -0.02em; }
.timbro__testo { font: 700 0.6875rem/1.1 var(--font-etichetta); letter-spacing: 0.14em; text-transform: uppercase; }
@media (min-width: 760px) {
  .tappe { gap: var(--sp-4); }
  .tappe__mezzo { width: 13rem; }
  .timbro { width: 11.5rem; }
  .timbro__num { font-size: 4.25rem; }
  .timbro__testo { font-size: 0.875rem; }
  .tappe__da { left: -1.75rem; }
  .tappe__a { right: -1.75rem; }
  .tappe__tratto { left: -1.25rem; right: -1.25rem; }
}

/* ================= 10 il modulo (guscio) ================= */
.preventivo { padding: var(--sp-5) 0 var(--sp-7); text-align: center; }
.arrivo { width: calc(var(--x-punto) + var(--x-anello) * 4); height: calc(var(--x-punto) + var(--x-anello) * 4); margin: 0 auto; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; }
.arrivo .punto { box-shadow: none; }
.preventivo__titolo { font-size: var(--fs-2); font-weight: 500; margin-top: var(--sp-4); }
.preventivo__sotto { color: var(--inchiostro-tenue); font-size: var(--fs-5); margin: var(--sp-3) auto 0; max-width: 36rem; }
.preventivo__griglia { display: grid; gap: var(--sp-5); margin-top: var(--sp-5); text-align: left; justify-content: center; }
.modulo { width: 100%; max-width: 34rem; }
.avanzamento { margin-bottom: var(--sp-4); }
.avanzamento p { font: 600 var(--fs-8)/1 var(--font-etichetta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--inchiostro-tenue); margin-bottom: var(--sp-2); }
.avanzamento__binario { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); }
.avanzamento__binario span { height: 0.375rem; border-radius: 999px; background: color-mix(in srgb, #FFFFFF 25%, transparent); transition: background-color var(--dur-2); }
.avanzamento__binario span.fatto { background: #FFFFFF; }
.passo-modulo { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.passo-modulo + .passo-modulo { margin-top: var(--sp-5); }
.js .passo-modulo + .passo-modulo { margin-top: 0; }
.passo-modulo[hidden] { display: none; }
.passo-modulo > legend { font: 600 var(--fs-4)/1.2 var(--font-titolo); color: var(--inchiostro); padding: 0; margin-bottom: var(--sp-3); outline: none; }
.campi { display: grid; gap: var(--sp-3); }
@media (min-width: 760px) { .campi--due { grid-template-columns: 1fr 1fr; } }
.campo-m { display: grid; gap: var(--sp-1); }
.campo-m label, .scelte > legend { font: 600 var(--fs-7)/1.3 var(--font-etichetta); color: var(--inchiostro); }
.campo-m small, .scelte small, .scelta small { font-weight: 400; color: var(--inchiostro-tenue); }
.campo-m__aiuto { font-size: var(--fs-7); color: var(--inchiostro-tenue); }
.campo-m input, .campo-m textarea { width: 100%; min-height: 3.25rem; padding: var(--sp-2) var(--sp-3); border: 2px solid transparent; border-radius: var(--raggio-s); background: #FFFFFF; color: #1E2628; font: 500 var(--fs-6)/1.4 var(--font-testo); }
.campo-m input:focus-visible, .campo-m textarea:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.campo-m input:disabled { opacity: 0.5; }
.campo-m--data { padding-left: var(--sp-5); }
.scelte { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.scelte > legend { padding: 0; margin-bottom: var(--sp-2); width: 100%; }
.scelta { position: relative; }
.scelta input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scelta input[type="radio"] + label { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--sp-3); border: 2px solid color-mix(in srgb, #FFFFFF 55%, transparent); border-radius: 999px; cursor: pointer; font: 500 var(--fs-7)/1.2 var(--font-testo); transition: background-color var(--dur-1), color var(--dur-1); }
.scelta input[type="radio"]:checked + label { background: #FFFFFF; color: #0D4D8D; border-color: #FFFFFF; }
.scelta input[type="radio"]:focus-visible + label { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.scelte .campo-m--data { width: 100%; }
.scelta--privacy { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-7); }
.scelta--privacy input { width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: #FFFFFF; flex: none; }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.azioni { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.dopo { max-width: 22rem; }
.dopo h3 { font-size: var(--fs-4); font-weight: 600; }
.dopo ol { list-style: none; counter-reset: dopo; margin-top: var(--sp-3); display: grid; gap: var(--sp-3); }
.dopo li { counter-increment: dopo; position: relative; padding-left: 2.5rem; color: var(--inchiostro-tenue); }
.dopo li::before { content: counter(dopo); position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid #FFFFFF; display: grid; place-items: center; font: 600 var(--fs-8)/1 var(--font-titolo); color: #FFFFFF; }
.solo-js { display: none; }
.js .solo-js { display: flex; }
.js .avanzamento.solo-js { display: block; }
@media (min-width: 1100px) { .preventivo__griglia { grid-template-columns: 34rem 20rem; column-gap: var(--sp-6); align-items: start; } }

/* ================= 11 domande ================= */
.domande { padding: var(--sp-6) 0; }
.domande__griglia { display: grid; gap: var(--sp-4); }
.domande h2 { font-size: var(--fs-2); font-weight: 500; }
.faq details { border-top: 1px solid var(--filo); }
.faq details:last-child { border-bottom: 1px solid var(--filo); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: var(--sp-3) 2.75rem var(--sp-3) 0; font: 500 var(--fs-5)/1.35 var(--font-titolo); color: var(--accento-2); }
.faq summary::-webkit-details-marker { display: none; }
/* il segno: due barre; aprendo, quella verticale ruota e si posa sull'altra, e il + diventa - */
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 0.25rem; top: 50%; width: 1rem; height: 2px; margin-top: -1px; background: currentColor; transition: rotate var(--dur-2) var(--curva-uscita), color var(--dur-2); }
.faq summary::before { rotate: 90deg; }
.faq details[open]:not(.chiude) summary::before { rotate: 0deg; }
@media (prefers-reduced-motion: reduce) { .faq summary::before, .faq summary::after { transition: none; } }
.faq details p { padding: 0 2.75rem var(--sp-4) 0; color: var(--inchiostro-tenue); max-width: 62ch; }
@media (min-width: 1100px) {
  .domande__griglia { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--sp-6); align-items: start; }
  /* il titolo resta fermo al centro della schermata mentre scorrono le domande */
  .domande h2 { position: sticky; top: calc(50vh - 3.5rem); max-width: 10ch; }
}

/* ================= 12 altre recensioni ================= */
.altre { padding: var(--sp-5) 0; }
.altre__testa { display: flex; flex-direction: column; gap: var(--sp-3); }
.altre h2 { font-size: var(--fs-2); font-weight: 500; max-width: 18ch; }
.altre__voto { display: grid; gap: var(--sp-1); }
.altre__numero { display: flex; align-items: center; gap: var(--sp-2); }
.altre__numero strong { font: 600 2.5rem/1 var(--font-titolo); color: #FFFFFF; letter-spacing: -0.02em; }
.altre__conta { color: var(--inchiostro-tenue); font-size: var(--fs-7); }
.stelle { display: inline-flex; color: #FFFFFF; }
.stelle svg { height: 1.125rem; width: auto; fill: currentColor; }
.altre__numero .stelle svg { height: 1.375rem; }
.altre__griglia { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.breve { display: grid; gap: var(--sp-2); align-content: start; }
.breve blockquote p { font: 500 var(--fs-5)/1.4 var(--font-titolo); color: #FFFFFF; }
.breve figcaption { font: 600 var(--fs-8)/1.3 var(--font-etichetta); letter-spacing: 0.08em; text-transform: uppercase; color: var(--inchiostro-tenue); }
.altre__lato { display: grid; gap: var(--sp-2); }
.altre__google a { color: #FFFFFF; font: 600 var(--fs-7)/1.4 var(--font-etichetta); }
.altre__coda { margin-top: var(--sp-5); }
@media (min-width: 760px) {
  .altre__testa { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .altre__voto { justify-items: end; text-align: right; }
  .altre__testa { align-items: flex-start; }
  .altre__lato { display: grid; justify-items: end; gap: var(--sp-3); }
  .altre__griglia { margin-top: var(--sp-4); }
  .altre__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .breve { padding: 0 var(--sp-4); position: relative; }
  .breve:first-child { padding-left: 0; }
  .breve + .breve::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, color-mix(in srgb, #FFFFFF 45%, transparent) 0 var(--x-trattino), transparent var(--x-trattino) var(--x-passo)); }
}

/* ================= 13 chi siamo ================= */
.chi { padding: var(--sp-6) 0; }
.chi__griglia { display: grid; gap: var(--sp-5); align-items: center; }
.chi__testo { display: grid; gap: var(--sp-3); max-width: 62ch; }
.chi__testo h2 { font-size: var(--fs-2); font-weight: 500; margin-bottom: var(--sp-2); }
.chi__testo p:not(.segnaposto) { color: var(--inchiostro-tenue); font-size: var(--fs-5); }
.chi__foto { max-width: 15rem; width: 100%; justify-self: center; }
.porta { aspect-ratio: 4 / 5; clip-path: var(--x-sagoma-porta); background: var(--fondo-3); display: grid; place-items: center; padding: var(--sp-4); text-align: center; }
.porta span { font: 500 var(--fs-7)/1.4 var(--font-testo); color: var(--inchiostro-tenue); }
@media (min-width: 1100px) { .chi__griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--sp-6); } .chi__foto { max-width: 24rem; } }

/* ================= 14 chiusura ================= */
.chiusura { padding: var(--sp-6) 0; text-align: center; }
.chiusura .dentro { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.chiusura h2 { font-size: var(--fs-2); font-weight: 500; max-width: 16ch; }
.chiusura p { color: var(--inchiostro-tenue); font-size: var(--fs-5); margin-bottom: var(--sp-2); }

/* ================= piede ================= */
.piede { padding: var(--sp-5) 0 calc(var(--sp-5) + 4.5rem); text-align: center; font-size: var(--fs-7); color: var(--inchiostro-tenue); }
.piede .dentro { display: grid; justify-items: center; gap: var(--sp-2); }
.piede__logo { display: inline-block; background: #FFFFFF; border-radius: var(--raggio-s); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.piede strong { color: var(--inchiostro); font-weight: 600; }
.piede__legale { margin-top: var(--sp-2); }

/* ================= barra fissa ================= */
.barra { position: fixed; z-index: 40; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); transform: translateY(160%); visibility: hidden; transition: transform var(--dur-2) var(--curva-uscita), visibility 0s linear var(--dur-2); }
.barra.visibile { transform: none; visibility: visible; transition: transform var(--dur-2) var(--curva-uscita), visibility 0s; }
.barra__cta { flex: 1; box-shadow: var(--ombra); }
.barra__tel { display: none; }
.barra__wa { display: inline-flex; align-items: center; justify-content: center; min-height: var(--x-tocco); padding: 0 0.875rem; border-radius: 999px; background: #FFFFFF; border: 2px solid #D6E2F0; color: #56666A; font: 600 var(--fs-8)/1 var(--font-etichetta); letter-spacing: 0.02em; box-shadow: var(--ombra); cursor: not-allowed; }
@media (min-width: 900px) {
  .barra { left: 50%; right: auto; transform: translate(-50%, 160%); display: grid; grid-template-columns: 1fr auto 1fr; column-gap: var(--sp-4); width: min(44rem, calc(100vw - 2 * var(--sp-4))); background: #FFFFFF; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-radius: 999px; box-shadow: var(--ombra); border: 1px solid #D6E2F0; }
  .barra.visibile { transform: translate(-50%, 0); }
  .barra__tel { display: block; justify-self: start; font: 600 var(--fs-7)/1 var(--font-etichetta); color: #0D4D8D; white-space: nowrap; }
  .barra__cta { flex: none; box-shadow: none; padding: 0 var(--sp-5); }
  .barra__wa { justify-self: end; min-height: 2.5rem; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .barra, .barra.visibile { transition: none; } }

/* =====================================================================
   COLORE "RICCO", deciso da Pasquale il 2026-10-06 (secondo giro); l'attributo data-colore resta fisso.
   - Ambra #FFBC5F: il complementare percettivo del blu del logo (OKLCH: blu a 253,5 gradi, ambra a 73,5),
     col doppio della sua luminosita' (0,84 contro 0,42), alla croma massima che lo schermo regge. E' "la parte che conta":
     parole chiave, etichette, stelle e pulsanti sul blu; sul bianco solo come evidenziatore #FFE2B5.
   - Campo puntinato ai margini, mai sotto il testo.
   - Campi azzurri e blu come pannelli sul foglio bianco; i punti della rotta stanno sul bordo.
   ===================================================================== */
/* --pannello-y: lo spazio fra due pannelli che si toccano, separato dal margine laterale: sul telefono 10 px
   stringevano troppo le sezioni (Pasquale, 2026-10-06) */
html[data-colore="ricco"] { --pannello-x: 0.625rem; --pannello-y: 1.5rem; --pannello-r: 1.5rem; --punti-passo: 18px; --punti-r: 1.25px; }
@media (min-width: 760px) { html[data-colore="ricco"] { --pannello-x: 1.25rem; --pannello-r: 2.5rem; --punti-passo: 22px; --punti-r: 1.5px; } }

/* i pannelli */
html[data-colore="ricco"] :is(.campo--blu, .campo--cielo) { margin-inline: var(--pannello-x); border-radius: var(--pannello-r); }
html[data-colore="ricco"] :is(.campo--blu, .campo--cielo) + :is(.campo--blu, .campo--cielo) { margin-top: var(--pannello-y); }
html[data-colore="ricco"] .piede { margin: var(--pannello-y) var(--pannello-x) var(--pannello-x); }
html[data-colore="ricco"] .prove { border: 0; }

/* il campo puntinato: i punti stanno dove resta vuoto, la maschera li toglie da sotto il testo */
html[data-colore="ricco"] :is(.passi, .emanuela, .preventivo, .altre, .chiusura, .grazie, .date, .chi)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background-image: radial-gradient(circle, var(--punti-colore) var(--punti-r), transparent calc(var(--punti-r) + 0.75px));
  background-size: var(--punti-passo) var(--punti-passo);
  -webkit-mask-image: var(--punti-maschera); mask-image: var(--punti-maschera);
}
html[data-colore="ricco"] :is(.passi, .emanuela, .preventivo, .altre, .chiusura, .grazie, .date, .chi) > .dentro { position: relative; z-index: 1; }
html[data-colore="ricco"] .campo--blu { --punti-colore: color-mix(in srgb, #FFFFFF 24%, transparent); }
html[data-colore="ricco"] .campo--bianco { --punti-colore: #C3D4E8; }
.passi { --punti-maschera: radial-gradient(ellipse 55% 75% at 100% 0%, #000 15%, transparent 70%), radial-gradient(ellipse 25% 60% at 0% 100%, #000 10%, transparent 70%); }
.emanuela { --punti-maschera: radial-gradient(ellipse 50% 100% at 100% 50%, #000 20%, transparent 75%); }
.altre { --punti-maschera: radial-gradient(ellipse 50% 80% at 100% 100%, #000 15%, transparent 70%); }
.chi { --punti-maschera: radial-gradient(ellipse 45% 85% at 100% 40%, #000 15%, transparent 75%); }
.preventivo, .grazie, .chiusura, .date { --punti-maschera: radial-gradient(ellipse 28% 70% at 0% 30%, #000 15%, transparent 75%), radial-gradient(ellipse 28% 70% at 100% 30%, #000 15%, transparent 75%); }

/* 01: i punti dell'apertura. Fermi ai lati; vicino al puntatore si accendono; al clic parte un'onda verde, la partenza. */
@property --onda { syntax: "<length>"; inherits: false; initial-value: 0px; }
.puntini { display: none; }
html[data-colore="ricco"] .puntini { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.apertura__griglia { position: relative; z-index: 1; }
.puntini::before, .puntini__luce, .puntini__onda { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--pc) var(--pr), transparent calc(var(--pr) + 0.75px)); background-size: var(--punti-passo) var(--punti-passo); }
.puntini::before { --pc: #C3D4E8; --pr: var(--punti-r); -webkit-mask-image: var(--punti-maschera); mask-image: var(--punti-maschera); }
html[data-apertura="centro"] .apertura { --punti-maschera: radial-gradient(ellipse 30% 70% at 0% 35%, #000 20%, transparent 80%), radial-gradient(ellipse 30% 70% at 100% 35%, #000 20%, transparent 80%);
  --luce-maschera: radial-gradient(ellipse 34% 90% at 0% 40%, #000 40%, transparent 88%), radial-gradient(ellipse 34% 90% at 100% 40%, #000 40%, transparent 88%); }
/* La luce segue il puntatore, ma pesa quanto i punti fermi: piena ai lati, un velo al 20% sotto il testo.
   Quattro strati: il cerchio del puntatore, intersecato con (le due zone dei punti + il fondo al 20%). */
.puntini__luce { --pc: #1565B8; --pr: calc(var(--punti-r) + 0.4px); opacity: 0; transition: opacity var(--dur-3) var(--curva-uscita);
  -webkit-mask-image: radial-gradient(circle 8rem at var(--mx, -20rem) var(--my, -20rem), #000, transparent), var(--luce-maschera), linear-gradient(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2));
  -webkit-mask-composite: source-in, source-over, source-over, source-over;
  mask-image: radial-gradient(circle 8rem at var(--mx, -20rem) var(--my, -20rem), #000, transparent), var(--luce-maschera), linear-gradient(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2));
  mask-composite: intersect, add, add, add; }
.puntini.acceso .puntini__luce { opacity: 0.85; }
.puntini__onda { --pc: var(--x-verde); --pr: calc(var(--punti-r) + 0.75px); opacity: 0;
  -webkit-mask-image: radial-gradient(circle at var(--ox, 50%) var(--oy, 50%), transparent calc(var(--onda) - 4rem), #000 var(--onda), transparent calc(var(--onda) + 1rem));
  mask-image: radial-gradient(circle at var(--ox, 50%) var(--oy, 50%), transparent calc(var(--onda) - 4rem), #000 var(--onda), transparent calc(var(--onda) + 1rem)); }
/* telefono: sullo schermo stretto l'onda attraversa i campi; come la luce, piena ai lati e un velo al 20% sotto il testo */
@media (max-width: 759px) {
  .puntini__onda {
    -webkit-mask-image: radial-gradient(circle at var(--ox, 50%) var(--oy, 50%), transparent calc(var(--onda) - 4rem), #000 var(--onda), transparent calc(var(--onda) + 1rem)), var(--luce-maschera), linear-gradient(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2));
    -webkit-mask-composite: source-in, source-over, source-over, source-over;
    mask-image: radial-gradient(circle at var(--ox, 50%) var(--oy, 50%), transparent calc(var(--onda) - 4rem), #000 var(--onda), transparent calc(var(--onda) + 1rem)), var(--luce-maschera), linear-gradient(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2));
    mask-composite: intersect, add, add, add; }
}
.puntini__onda.va { animation: onda 1500ms cubic-bezier(0.3, 0.55, 0.35, 1) both; }
@keyframes onda { 0% { --onda: 0px; opacity: 1; } 60% { opacity: 0.9; } 100% { --onda: 36rem; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .puntini__luce, .puntini__onda { display: none; } }

/* l'ambra sul bianco: un evidenziatore sotto parole blu, in due punti soli */
html[data-colore="ricco"] .evidenzia { background: linear-gradient(transparent 62%, var(--x-ambra-chiara) 62% 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.04em; }
html[data-colore="ricco"] .bollino { background: var(--x-ambra); border: 1.5px solid var(--x-ambra); color: #0D4D8D; }

/* l'ambra sul blu: parole chiave, etichette, stelle, pulsanti */
html[data-colore="ricco"] .campo--blu .btn--bianco { background: var(--x-ambra); border-color: var(--x-ambra); color: #0D4D8D; }
html[data-colore="ricco"] :is(.passo__numero, .avanzamento p, .em-chiave, .altre .stelle) { color: var(--x-ambra); }
html[data-colore="ricco"] .emanuela__virgolette::before { color: var(--x-ambra); }
html[data-colore="ricco"] .avanzamento__binario span.fatto { background: var(--x-ambra); }

/* i punti della rotta sul bordo del pannello, come fermate fra una sezione e l'altra */
html[data-colore="ricco"] :is(.preventivo, .chiusura, .grazie) .arrivo { position: absolute; z-index: 2; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px #0D4D8D; }
html[data-colore="ricco"] :is(.preventivo, .grazie) .arrivo { top: calc(-1 * var(--sp-5)); }
html[data-colore="ricco"] .chiusura .arrivo { top: calc(-1 * var(--sp-6)); }
html[data-colore="ricco"] .passi .cerchio { background: #FFFFFF; color: #0D4D8D; border-color: #FFFFFF; }
html[data-colore="ricco"] .passi .passo:first-of-type .cerchio { box-shadow: 0 0 0 5px color-mix(in srgb, #FFFFFF 18%, transparent), inset 0 -4px 0 #098D37; }
html[data-colore="ricco"] .strada__punto { background: var(--x-rosso); box-shadow: 0 0 0 4px #FFFFFF; }
html[data-colore="ricco"] .dopo li::before { background: #FFFFFF; color: #0D4D8D; }

/* sul bianco: i punti di partenza e arrivo diventano il ritmo della pagina */
html[data-colore="ricco"] .voce.attiva::before { background: var(--x-verde); border-color: var(--x-verde); }
html[data-colore="ricco"] .opzione__rotta li:first-child::before { background: var(--x-verde); border-color: var(--x-verde); }
html[data-colore="ricco"] .opzione__rotta li:last-child::before { background: var(--x-rosso); border-color: var(--x-rosso); }
html[data-colore="ricco"] .opzione__sconto { color: var(--x-rosso); }
html[data-colore="ricco"] .faq details[open]:not(.chiude) summary::before, html[data-colore="ricco"] .faq details[open]:not(.chiude) summary::after { color: var(--x-rosso); }

/* 08: al passaggio del mouse il timbro si raddrizza e si preme (cambio di stato, non un momento) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .timbro { transition: transform var(--dur-2) var(--curva-uscita); }
  .tappe:hover .timbro { transform: rotate(-2deg) scale(0.94); }
}

/* =====================================================================
   ENTRATE LEGATE ALLO SCORRIMENTO (deroga di Pasquale del 2026-10-06 ai "due momenti").
   Una regola comune: ogni elemento segue la propria posizione nello schermo, parte da opacita' 0,7
   quando e' appena sopra la barra fissa (5rem + 4vh dal fondo) e arriva al suo posto verso meta'
   schermo (5rem + 36vh); intervalli in altezze di schermo, cosi' la fascia e' la stessa su ogni
   finestra, e andamento lineare, cosi' il movimento si vede per tutto il tragitto. Tornando su,
   si riavvolge da se'. Il gesto proprio cambia con quello che l'elemento dice.
   Zero JavaScript; col movimento ridotto, o senza animation-timeline, tutto e' gia' fermo al suo posto.
   ===================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* i titoli delle sezioni: salgono e prendono pieno colore */
    /* 7rem e non 5rem: il titolo parte gia' 2rem piu' in basso */
    main section:not(#apertura) h2 { animation: v-sale linear both; animation-timeline: view(); animation-range: cover calc(7rem + 4vh) cover calc(7rem + 36vh); }
    @keyframes v-sale { from { opacity: 0.7; translate: 0 2rem; } }

    /* deposito: le due case si avvicinano, poi il timbro si posa */
    .tappe .casa { animation: v-casa linear both; animation-timeline: view(); animation-range: cover calc(6rem + 4vh) cover calc(6rem + 30vh); }
    .tappe .casa:first-child { --da: -0.75rem; }
    .tappe .casa:last-child { --da: 0.75rem; }
    @media (min-width: 760px) { .tappe .casa:first-child { --da: -1.75rem; } .tappe .casa:last-child { --da: 1.75rem; } }
    @keyframes v-casa { from { opacity: 0.7; translate: var(--da) 1rem; } }
    .timbro { animation: v-timbro linear both; animation-timeline: view(); animation-range: cover calc(5rem + 18vh) cover calc(5rem + 34vh); }
    @keyframes v-timbro { from { opacity: 0.7; scale: 1.28; rotate: -14deg; } }

    /* la frase di Emanuela: le due parti in ambra si accendono una dopo l'altra */
    /* ognuna segue la propria riga: sul telefono la seconda sta 200 px sotto la prima */
    .em-chiave { timeline-scope: --riga; animation: v-ambra linear both; animation-timeline: --riga; animation-range: cover calc(5rem + 8vh) cover calc(5rem + 24vh); }
    .em-segno { view-timeline: --riga block; }
    @keyframes v-ambra { from { color: #FFFFFF; } }

    /* galleria: le foto si aprono man mano che entrano */
    .tessera { animation: v-tessera linear both; animation-timeline: view(); animation-range: cover calc(5rem + 4vh) cover calc(5rem + 34vh); }
    @keyframes v-tessera { from { opacity: 0.7; translate: 0 0.75rem; clip-path: inset(7% round var(--raggio-s)); } to { clip-path: inset(0 round var(--raggio-s)); } }

    /* altre recensioni: le stelle si accendono una dopo l'altra, appena entrano dal fondo dello schermo, e sono piene
       circa 130 px sopra il fondo. Deroga di Pasquale del 2026-10-06 alla fascia comune: stelle mezze spente a meta'
       schermo sembravano un voto basso. misura_entrate.py le tratta come esenti dichiarate. */
    .altre .stelle { view-timeline: --stelle block; }
    .altre .stelle use { animation: v-stella linear both; animation-timeline: --stelle; animation-range: cover 0% cover calc(1.5rem + 2vh); }
    .altre .stelle use:nth-of-type(2) { animation-range: cover calc(0.875rem + 1vh) cover calc(2.375rem + 3vh); }
    .altre .stelle use:nth-of-type(3) { animation-range: cover calc(1.75rem + 2vh) cover calc(3.25rem + 4vh); }
    .altre .stelle use:nth-of-type(4) { animation-range: cover calc(2.625rem + 3vh) cover calc(4.125rem + 5vh); }
    .altre .stelle use:nth-of-type(5) { animation-range: cover calc(3.5rem + 4vh) cover calc(5rem + 6vh); }
    @keyframes v-stella { from { opacity: 0.25; } }

    /* chi siamo: l'arco della foto si apre dal basso, come una porta */
    .porta { animation: v-porta linear both; animation-timeline: view(); animation-range: cover calc(5rem + 4vh) cover calc(5rem + 36vh); }
    @keyframes v-porta { from { opacity: 0.7; clip-path: inset(30% 0 0 0 round 999px 999px 0.75rem 0.75rem); } to { clip-path: var(--x-sagoma-porta); } }
  }
}

/* ================= Lenis: le regole del suo lenis.css (1.3.26), piu' lo scorrimento CSS spento quando c'e' lui ================= */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media print { .barra { display: none; } }