/* =============================================================
   FIFA RENT — il cliente sopra lo starter
   -------------------------------------------------------------
   Si carica DOPO i quattro fogli dello starter: qui si fissano i
   token del cliente e si costruiscono i blocchi della pagina.
   Colori e caratteri: 30_Design/brand-kit.md — BOZZA, da confermare.

   L'IDEA (27/10, T-261027-07): la pagina è vestita da segnaletica
   stradale italiana. Il blu del marchio fa i cartelli extraurbani,
   il bianco gli urbani e i pannelli integrativi. L'arancio resta
   sulle azioni. Niente ombre a riposo, niente filetti sottili: le
   superfici si staccano col tono, i cartelli col bordo bianco.

   NERO E ARANCIO dal 04/11 (T-261104-18): la scheda aziendale di
   FIFA RENT dice «colori del logo: nero e arancione». I token si
   chiamano ancora --blu-* per non riscrivere 1.200 righe: il NOME è
   storico, il VALORE è il nero caldo. Cartelli neri, arancio sulle
   azioni come prima.

   Contrasti misurati il 04/11 (WCAG 2.1, nessun arrotondamento a favore):
     #ffffff su #121110 18,7:1    piè di pagina, prima tappa
     #ffffff su #22201e 16,0:1    cartelli scuri
     #ffffff su #4d4a46  8,6:1    terza tappa
     #1a1a1a su #dedad4 12,5:1    quarta tappa
     #1a1a1a su #f5f3f0 15,7:1    tinta calda
     #595959 su #f5f3f0  6,32:1   testo tenue sulla tinta
     #141414 su #ff7a1a  7,06:1   testo del bottone azione
     #ff7a1a su #121110  7,2:1    «RENT» nel marchio grande
     #ff7a1a su #ffffff  2,61:1   (!) l'arancio NON porta testo su bianco
   ============================================================= */

@font-face { font-family: "Sora"; font-weight: 700; font-display: swap; src: url("../fonts/sora-700.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 800; font-display: swap; src: url("../fonts/sora-800.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }

/* Tutti i token che variables.css ridefinisce al buio sono riscritti qui:
   la pagina ha un tema solo, chiaro, e i contrasti sopra valgono solo per quello. */
:root {
  color-scheme: light;

  --sfondo:         #ffffff;
  --sfondo-tenue:   #f5f3f0;
  --sfondo-elevato: #ffffff;
  --testo:          #1a1a1a;
  --testo-tenue:    #595959;
  --bordo:          #dedad4;
  --bordo-forte:    #767676;

  --accento:        #22201e;
  --accento-scuro:  #0a0a0a;
  --accento-testo:  #ffffff;
  --fuoco:          #1a1a1a;
  --fuoco-inverso:  #ffffff;

  --azione:         #ff7a1a;
  --azione-hover:   #f26a0c;
  --azione-testo:   #141414;

  /* nomi storici, valori neri (vedi la testa del file) */
  --blu:            #22201e;
  --blu-scuro:      #0a0a0a;
  --blu-notte:      #121110;
  --blu-medio:      #4d4a46;
  --blu-chiaro:     #dedad4;
  --blu-tinta:      #f5f3f0;
  --inchiostro:     #141414;
  --arancio:        #ff7a1a;
  --arancio-tinta:  #fff1e6;

  --font-titoli: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-testo:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --peso-titoli: 800;

  /* Cinque gradini e basta. 1 note · 2 corpo · 3 sottotitoli · 4 titoli di sezione · 5 display */
  --t-1: 0.9375rem;                                   /* 15 px */
  --t-2: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);     /* 16 → 19 px */
  --t-3: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);       /* 22 → 32 px */
  --t-4: clamp(2.125rem, 1.1rem + 4.4vw, 5rem);       /* 34 → 80 px */
  --t-5: clamp(2.125rem, 0.3rem + 7.4vw, 8.5rem);     /* 34 → 136 px */

  --margine: clamp(1rem, 0.6rem + 2vw, 2rem);
  --largh-contenitore: 80rem;
  --gutter: var(--margine);
  --sez: clamp(5rem, 2.5rem + 8vw, 10rem);            /* 80 → 160 px fra le sezioni */
  --raggio: 10px;                                     /* uno solo, per cartelli, bottoni e giorni */
  --bordo-cartello: 4px;

  --curva-uscita: cubic-bezier(0.16, 1, 0.3, 1);
  --durata-entrata: 800ms;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--sfondo);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: var(--t-2);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-titoli); font-weight: 800; text-wrap: balance; }

/* Le cifre allineate dove si confrontano numeri */
.foglio dd, .riepilogo dd, .conto, .mete span, .cal__griglia { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------
   ICONE — sprite Tabler in linea, si colorano col testo
   ------------------------------------------------------------- */
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

.ico {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------
   BOTTONI — un raggio solo, un arancio solo: quello che fa partire qualcosa
   ------------------------------------------------------------- */
.bottone {
  border-radius: var(--raggio);
  font-family: var(--font-testo);
  font-weight: 600;
  transition: background-color var(--durata-veloce) var(--curva),
              border-color var(--durata-veloce) var(--curva),
              transform var(--durata-veloce) var(--curva);
}

.bottone:active { transform: scale(0.97); }

.bottone--azione { background-color: var(--azione); color: var(--azione-testo); }
.bottone--azione:hover { background-color: var(--azione-hover); color: var(--azione-testo); }

.bottone .ico { inline-size: 1.15em; block-size: 1.15em; }
.ico--freccia { transition: transform var(--durata-media) var(--curva); }
.bottone:hover .ico--freccia { transform: translateX(4px); }

/* -------------------------------------------------------------
   AVVISO DI BOZZA — si toglie al go-live
   ------------------------------------------------------------- */
.bozza-avviso {
  background-color: var(--arancio-tinta);
  border-block-end: 3px solid var(--arancio);
  font-size: var(--t-1);
  padding-block: var(--sp-2);
}

.bozza-avviso p { margin: 0; max-inline-size: 72ch; }

/* Un dato che manca si vede, e si trova con: grep -rn "segnaposto" */
.segnaposto {
  background-color: var(--arancio-tinta);
  border-block-end: 3px solid var(--arancio);
  padding-inline: 0.2em;
  color: var(--testo);
}

/* -------------------------------------------------------------
   TESTA — marchio, cinque collegamenti, il telefono
   ------------------------------------------------------------- */
.testa { border-block-end: 0; background-color: var(--sfondo); }
.testa__interno { padding-block: var(--sp-3); }

.marchio img { inline-size: auto; block-size: 1.9rem; }
.marchio__nome { font-weight: 800; letter-spacing: 0.02em; color: var(--blu); }
/* Su bianco «RENT» passa all'arancio per testo del kit (#c75500, 4,44:1): il #ff7a1a farebbe 2,61:1 */
.marchio__nome span { color: #c75500; }

.nav-principale a { font-weight: 600; font-size: var(--t-1); }
.testa .bottone--telefono { font-size: var(--t-2); }

/* -------------------------------------------------------------
   APERTURA — il cartello di direzione sulla foto del paese
   ------------------------------------------------------------- */
.apertura {
  position: relative;
  display: grid;
  align-items: end;
  min-block-size: min(56rem, calc(100svh - 7rem));
  overflow: hidden;
  background-color: var(--blu-notte);
}

.apertura__foto { position: absolute; inset: 0; }

.apertura__foto img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1600ms ease-in-out;
}

.apertura__foto img.is-attiva { opacity: 1; }

.apertura__interno {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--sp-3);
  padding-block: clamp(3rem, 8svh, 8rem) clamp(1.5rem, 4svh, 3rem);
}

/* Il cartello: fondo blu, bordo bianco rientrato, angoli tondi come quelli veri */
.cartello-grande {
  inline-size: min(100%, 70rem);
  padding: 0.5rem;
  border-radius: calc(var(--raggio) + 6px);
  background-color: var(--blu);
  color: #ffffff;
}

.cartello-grande__riquadro {
  display: grid;
  border: var(--bordo-cartello) solid #ffffff;
  border-radius: var(--raggio);
}

.cartello-grande__testa {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: clamp(1rem, 0.4rem + 2.6vw, 2.75rem) clamp(1rem, 0.4rem + 2.6vw, 3rem) clamp(1rem, 0.4rem + 2vw, 2.25rem);
}

.cartello-grande__titolo {
  margin: 0;
  font-size: var(--t-5);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: #ffffff;
}

.cartello-grande__freccia {
  flex: none;
  inline-size: calc(var(--t-5) * 0.9);
  block-size: calc(var(--t-5) * 0.9);
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* La riga del luogo sta sotto una barra bianca piena, come le fasce dei cartelli veri */
.cartello-grande__luogo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-4);
  margin: 0;
  padding: var(--sp-4) clamp(1rem, 0.4rem + 2.6vw, 3rem) var(--sp-5);
  border-block-start: var(--bordo-cartello) solid #ffffff;
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: var(--t-3);
  line-height: 1.2;
}

.cartello-grande__luogo .ico { align-self: center; inline-size: 0.9em; block-size: 0.9em; }

/* La targhetta dei km: bianca col testo blu, come i pannelli delle distanze */
.cartello-grande__km {
  margin-inline-start: auto;
  padding: 0.3em 0.7em;
  border-radius: 6px;
  background-color: #ffffff;
  color: var(--blu);
  font-size: var(--t-2);
  white-space: nowrap;
}

/* Il pannello integrativo: bianco, sotto il cartello, porta la frase e l'azione */
.pannello-integrativo {
  inline-size: min(100%, 44rem);
  display: grid;
  gap: var(--sp-5);
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  border-radius: calc(var(--raggio) + 6px);
  background-color: #ffffff;
  color: var(--testo);
}

.pannello-integrativo__frase {
  margin: 0;
  max-inline-size: 40ch;
  font-size: var(--t-3);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pannello-integrativo__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
}

.collegamento-chiama {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: var(--tocco-telefono);
  color: var(--blu);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* La didascalia della foto: in basso a destra, sul margine del contenitore. Sul telefono non c'è spazio. */
.apertura__didascalia {
  position: absolute;
  inset-block-end: var(--sp-5);
  inset-inline-end: calc(max(0px, (100% - var(--largh-contenitore)) / 2) + var(--margine));
  margin: 0;
  padding: var(--sp-1) var(--sp-3);
  background-color: var(--blu-notte);
  color: #ffffff;
  font-size: var(--t-1);
}

/* -------------------------------------------------------------
   TITOLI DI SEZIONE
   ------------------------------------------------------------- */
.titolo-sezione {
  margin: 0;
  font-size: var(--t-4);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blu);
}

/* -------------------------------------------------------------
   I MEZZI — il titolo enorme, il furgone davanti, poi i cartelli
   ------------------------------------------------------------- */
.sezione-mezzi {
  padding-block: var(--sez);
  overflow: clip;
}

.mezzi-scena {
  position: relative;
  display: grid;
  gap: var(--sp-6);
}

.mezzi-scena__titolo {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: calc(var(--t-5) * 1.35);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--blu);
}

.mezzi-scena__titolo span { display: block; }

.mezzi-scena__furgone {
  position: relative;
  z-index: 2;
  justify-self: end;
  inline-size: min(100%, 40rem);
  aspect-ratio: 400 / 210;
}

.furgone__corpo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }

.furgone__ruota {
  position: absolute;
  inline-size: 20%;
  block-size: 38.1%;
  inset-block-start: 62.86%;
}

.furgone__ruota--dietro  { inset-inline-start: 15%; }
.furgone__ruota--davanti { inset-inline-start: 65%; }

.mezzi-scena__fatti {
  display: grid;
  gap: var(--sp-4);
  max-inline-size: 34rem;
  font-size: var(--t-2);
}

.mezzi-scena__fatti p { margin: 0; }
.mezzi-scena__fatti p:first-child { font-size: var(--t-3); font-weight: 600; line-height: 1.3; }

/* Sul largo: il titolo su due righe; il furgone parcheggia accanto a «mezzi», sotto la
   prima riga, così non copre nessuna lettera; i fatti chiudono il vuoto a sinistra. */
@media (min-width: 64rem) {
  .mezzi-scena {
    --corpo-titolo: calc(var(--t-5) * 1.5);
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--sp-5);
    row-gap: 0;
  }
  .mezzi-scena__titolo { grid-column: 1 / -1; grid-row: 1; font-size: var(--corpo-titolo); }
  .mezzi-scena__furgone {
    grid-column: 6 / -1;
    grid-row: 1 / span 2;
    align-self: start;
    inline-size: 100%;
    margin-block-start: calc(var(--corpo-titolo) * 0.86);
  }
  .mezzi-scena__fatti { grid-column: 1 / 6; grid-row: 2; margin-block-start: var(--sp-7); }
}

/* Un cartello per mezzo. Blu i furgoni, bianchi le auto. Il bordo rientrato è un ::before. */
.cartelli {
  display: grid;
  gap: var(--sp-3);
  margin-block-start: var(--sp-9);
}

.cartello {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  padding: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem) clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  border-radius: calc(var(--raggio) + 6px);
  text-decoration: none;
  transition: transform var(--durata-media) var(--curva-uscita), background-color var(--durata-media) var(--curva);
}

.cartello::before {
  content: "";
  position: absolute;
  inset: 0.45rem;
  border: 3px solid currentColor;
  border-radius: var(--raggio);
  pointer-events: none;
}

.cartello--blu    { background-color: var(--blu); color: #ffffff; }
.cartello--bianco { background-color: var(--blu-tinta); color: var(--inchiostro); }
.cartello--blu:hover    { background-color: var(--blu-scuro); color: #ffffff; }
.cartello--bianco:hover { background-color: var(--blu-chiaro); color: var(--inchiostro); }

.cartello:hover { transform: translateX(6px); }
.cartello:active { transform: translateX(6px) scale(0.99); }

.cartello__pitto { grid-row: span 3; display: grid; place-items: center; }
.cartello__pitto .ico { inline-size: 2.75rem; block-size: 2.75rem; stroke-width: 1.6; }

/* Tipo sopra, modello sotto: in riga il segnaposto andava a capo a metà sul telefono */
.cartello__nome {
  display: grid;
  justify-items: start;
  gap: 0.2rem;
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: var(--t-3);
  line-height: 1.15;
}

.cartello__nome .segnaposto { font-size: var(--t-2); }

.cartello__dati, .cartello__prezzo { font-size: var(--t-2); }
/* Il prezzo al giorno in grande, settimana e mese sotto (foglio dei mezzi del 04/11) */
.cartello__prezzo { display: grid; gap: 0.15rem; justify-items: start; }
.cartello__prezzo strong { font-family: var(--font-titoli); font-weight: 800; font-size: var(--t-3); line-height: 1.1; }
.cartello__prezzo small { font-size: var(--t-1); }

.cartello__vai {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
}

.cartello__vai .ico { transition: transform var(--durata-media) var(--curva); }
.cartello:hover .cartello__vai .ico { transform: translateX(6px); }

@media (min-width: 64rem) {
  .cartello { grid-template-columns: 4rem minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.9fr) auto; gap: var(--sp-5); }
  .cartello__pitto { grid-row: auto; }
  .cartello__vai { grid-column: auto; justify-self: end; }
  /* Niente più scaletta: sfalsati, i dati dei mezzi non stavano in colonna (visto online il 27/10) */
}

/* Stacco fra i furgoni (sopra) e le auto (sotto): si vedono come due gruppi (04/11) */
.cartelli__stacco { margin-block-start: var(--sp-6); }

.mezzi-nota { margin: var(--sp-5) 0 0; font-size: var(--t-1); }

/* -------------------------------------------------------------
   PRENOTAZIONE — calendario + modulo Netlify «prenotazione» (dal 04/11)
   Sopra: le date (testo a sinistra, calendario a destra). Sotto, largo
   quanto la pagina: il modulo, in due gruppi affiancati sui monitor.
   ------------------------------------------------------------- */
.sezione-prenota {
  padding-block: var(--sez);
  background-color: var(--blu-tinta);
}

.prenota { display: grid; gap: var(--sp-6); }
.prenota__intro { display: grid; gap: var(--sp-5); align-content: start; }
.prenota__frase { margin: 0; max-inline-size: 30ch; font-size: var(--t-3); line-height: 1.3; font-weight: 600; }

@media (min-width: 64rem) {
  .prenota {
    grid-template-columns: 5fr 7fr;
    grid-template-areas: "intro cal" "azione azione";
    column-gap: var(--sp-8);
    row-gap: var(--sp-7);
  }
  .prenota__intro  { grid-area: intro; }
  .prenota__azione { grid-area: azione; }
  .prenota > .cal  { grid-area: cal; }
}

.campo label, .campo legend { font-weight: 600; }
.campo select { border-radius: var(--raggio); min-block-size: var(--tocco-telefono); font-size: var(--t-2); background-color: #ffffff; }
.campo input, .campo textarea { border-radius: var(--raggio); font-size: var(--t-2); }
.campo input { min-block-size: var(--tocco-telefono); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--arancio); outline-offset: 2px; }

/* Il modulo: un foglio bianco, due gruppi (il mezzo · chi sei) */
.modulo {
  display: grid;
  gap: var(--sp-6);
  max-inline-size: none; /* lo starter lo stringe a --largh-stretto: qui il modulo è largo quanto la pagina */
  grid-template-columns: minmax(0, 1fr); /* senza, la colonna prende la larghezza del <select> più lungo e sul telefono sborda */
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  border-radius: calc(var(--raggio) + 6px);
  background-color: #ffffff;
}
.modulo__gruppo { display: grid; gap: var(--sp-4); align-content: start; min-inline-size: 0; }
.modulo__titolo {
  margin: 0;
  padding-block-end: var(--sp-2);
  border-block-end: 3px solid var(--arancio);
  font-size: var(--t-3);
  line-height: 1.2;
  color: var(--blu);
}
.modulo__coppia { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .modulo__coppia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.modulo .campo { min-inline-size: 0; }
.modulo .campo select, .modulo .campo input:not([type="radio"]), .modulo .campo textarea { inline-size: 100%; max-inline-size: 100%; }

.modulo__scelta { margin: 0; padding: 0; border: 0; display: grid; gap: var(--sp-2); }
.modulo__scelta legend { padding: 0; margin-block-end: var(--sp-2); }
.modulo__scelta label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: var(--tocco-telefono);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--raggio);
  background-color: var(--blu-tinta);
  font-weight: 400;
  cursor: pointer;
}
.modulo__scelta input { inline-size: 1.25rem; block-size: 1.25rem; min-block-size: 0; accent-color: var(--blu); flex: none; }
.modulo__scelta label:has(input:checked) { background-color: var(--blu-chiaro); font-weight: 600; }

.campo__facoltativo { font-weight: 400; color: var(--testo-tenue); }
.campo__facoltativo::before { content: "· "; }

.modulo__nota { margin: 0; font-size: var(--t-1); color: var(--testo-tenue); max-inline-size: 60ch; }

@media (min-width: 64rem) {
  .modulo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-8); }
  .modulo__invia { justify-self: start; }
  .modulo__nota { align-self: center; }
}

.riepilogo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin: 0;
}

.riepilogo div {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--raggio);
  background-color: #ffffff;
}

.riepilogo dt { font-size: var(--t-1); color: var(--testo-tenue); }
.riepilogo dd { margin: 0; font-family: var(--font-titoli); font-weight: 700; font-size: var(--t-2); color: var(--blu); }

.anteprima-nota {
  margin: 0;
  max-inline-size: 65ch;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--raggio);
  background-color: var(--arancio-tinta);
  font-size: var(--t-1);
}

.cal {
  padding: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  border-radius: calc(var(--raggio) + 6px);
  background-color: #ffffff;
}

.cal__testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-4);
}

.cal__freccia {
  display: grid;
  place-items: center;
  inline-size: var(--tocco-telefono);
  block-size: var(--tocco-telefono);
  border: 0;
  border-radius: var(--raggio);
  background-color: var(--blu-tinta);
  color: var(--blu);
  cursor: pointer;
  transition: background-color var(--durata-veloce) var(--curva), transform var(--durata-veloce) var(--curva);
}

.cal__freccia:hover { background-color: var(--blu-chiaro); }
.cal__freccia:active { transform: scale(0.94); }
.cal__freccia[disabled] { opacity: 0.4; cursor: not-allowed; }

.cal__mese {
  flex: 1;
  margin: 0;
  text-align: center;
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: var(--t-3);
  text-transform: capitalize;
  color: var(--blu);
}

/* minmax(0, 1fr): senza, i sette giorni da 40 px allargano la pagina a 360 px (misurato: 385) */
.cal__griglia {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
}

.cal__nome-giorno {
  padding-block: var(--sp-1);
  text-align: center;
  font-size: var(--t-1);
  font-weight: 600;
  color: var(--testo-tenue);
}

.cal__giorno {
  aspect-ratio: 1;
  min-block-size: 2.25rem;
  border: 0;
  border-radius: var(--raggio);
  background-color: var(--blu-tinta);
  color: var(--testo);
  font: inherit;
  font-size: var(--t-1);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--durata-veloce) var(--curva), transform var(--durata-veloce) var(--curva);
}

.cal__giorno:hover { background-color: var(--blu-chiaro); }
.cal__giorno:active { transform: scale(0.92); }

.cal__giorno[disabled] {
  background-color: #ffffff;
  color: var(--testo-tenue);
  text-decoration: line-through;
  cursor: not-allowed;
}

.cal__giorno.is-passato { text-decoration: none; opacity: 0.45; }
.cal__giorno.is-scelto { background-color: var(--blu); color: #ffffff; }
.cal__giorno.is-intervallo { background-color: var(--blu-chiaro); }

.cal__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-1);
  color: var(--testo-tenue);
}

.cal__legenda span {
  display: inline-block;
  inline-size: 0.95em;
  block-size: 0.95em;
  margin-inline-end: var(--sp-1);
  border-radius: 3px;
  vertical-align: -0.12em;
}

.cal__legenda .libero { background-color: var(--blu-tinta); }
.cal__legenda .preso  { background-color: #ffffff; outline: 2px solid var(--blu-chiaro); outline-offset: -2px; }
.cal__legenda .scelto { background-color: var(--blu); }

.cal__esito { margin: 0; font-weight: 600; min-block-size: 1.6em; }
.cal__esito.is-errore { color: var(--errore); }
.cal__esito.is-ok { color: var(--blu); }

/* -------------------------------------------------------------
   QUANTO È LONTANO — fondo blu, il cartellino delle mete inclinato
   e tagliato dal bordo di sotto
   ------------------------------------------------------------- */
.sezione-distanze {
  --fuoco: #ffffff;
  padding-block-start: var(--sez);
  overflow: hidden;
  background-color: var(--blu);
  color: #ffffff;
}

.distanze { display: grid; gap: var(--sp-7); }

.distanze__testo { display: grid; gap: var(--sp-5); align-content: start; }
.distanze__testo .titolo-sezione { color: #ffffff; }
.distanze__testo > p { margin: 0; max-inline-size: 44ch; }
.distanze__testo > .distanze__frase { max-inline-size: 22ch; font-size: var(--t-3); line-height: 1.25; font-weight: 600; }

.distanze__foto { margin: 0; display: grid; gap: var(--sp-2); }
.distanze__foto img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--raggio); }
.distanze__foto figcaption { font-size: var(--t-1); }

.cartellino { min-inline-size: 0; }

.cartellino__carta {
  display: grid;
  gap: var(--sp-5);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(1.25rem, 0.8rem + 2.4vw, 3rem) clamp(4rem, 3rem + 4vw, 7rem);
  border-radius: calc(var(--raggio) + 6px) calc(var(--raggio) + 6px) 0 0;
  background-color: #ffffff;
  color: var(--testo);
  transform: rotate(-1.5deg);
  transform-origin: 50% 100%;
}

.cartellino__titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: var(--t-3);
  line-height: 1.2;
  color: var(--blu);
}

/* Le mete come le righe di un cartello delle distanze: il nome a sinistra, i km a destra.
   (Prima erano in fila coi puntini: sul telefono andavano a capo in modo disordinato.) */
.mete {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
  gap: var(--sp-1) var(--sp-2);
}

.mete button {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: 0 0.7em;
  text-align: start;
  border: 0;
  border-radius: var(--raggio);
  background-color: transparent;
  color: var(--testo);
  font: inherit;
  font-size: var(--t-2);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--durata-veloce) var(--curva), color var(--durata-veloce) var(--curva), transform var(--durata-veloce) var(--curva);
}

.mete button span { font-weight: 400; color: var(--testo-tenue); white-space: nowrap; }
.mete button:hover { background-color: var(--blu-tinta); }
.mete button:active { transform: scale(0.95); }
.mete button[aria-pressed="true"] { background-color: var(--blu); color: #ffffff; }
.mete button[aria-pressed="true"] span { color: #ffffff; }

.conto {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--raggio);
  background-color: var(--blu-tinta);
}

.conto__giorni { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); font-weight: 600; }

.passo { display: inline-flex; align-items: center; gap: var(--sp-2); }

.passo button {
  display: grid;
  place-items: center;
  inline-size: var(--tocco-telefono);
  block-size: var(--tocco-telefono);
  border: 0;
  border-radius: var(--raggio);
  background-color: var(--blu);
  color: #ffffff;
  cursor: pointer;
  transition: background-color var(--durata-veloce) var(--curva), transform var(--durata-veloce) var(--curva);
}

.passo button:hover { background-color: var(--blu-scuro); }
.passo button:active { transform: scale(0.92); }
.passo button[disabled] { opacity: 0.4; cursor: not-allowed; }

.passo output {
  min-inline-size: 2ch;
  text-align: center;
  font-family: var(--font-titoli);
  font-weight: 800;
  font-size: var(--t-3);
  color: var(--blu);
}

.conto__km {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sp-3);
  margin: 0;
  font-weight: 600;
}

.conto__numero {
  font-family: var(--font-titoli);
  font-weight: 800;
  font-size: var(--t-4);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blu);
}

.conto__esito { margin: 0; font-size: var(--t-2); font-weight: 600; }

.cartellino__fonte { margin: 0; max-inline-size: 65ch; font-size: var(--t-1); color: var(--testo-tenue); }

@media (min-width: 64rem) {
  .distanze { grid-template-columns: 5fr 7fr; column-gap: var(--sp-8); align-items: end; }
  .distanze__testo { align-self: start; padding-block-end: var(--sez); }
}

/* -------------------------------------------------------------
   COME FUNZIONA — fisarmonica di quattro pannelli, dal blu notte al chiaro
   ------------------------------------------------------------- */
.sezione-come { padding-block: var(--sez); }

.come__intro { display: grid; gap: var(--sp-5); margin-block-end: var(--sp-8); }
.come__intro p { margin: 0; max-inline-size: 40ch; font-size: var(--t-3); line-height: 1.3; font-weight: 600; }

@media (min-width: 64rem) {
  .come__intro { grid-template-columns: 5fr 7fr; column-gap: var(--sp-8); align-items: end; }
}

.tappe { display: grid; gap: 0; border-radius: calc(var(--raggio) + 6px); overflow: hidden; }

.tappa { --tappa-fondo: var(--blu-notte); --tappa-testo: #ffffff; background-color: var(--tappa-fondo); color: var(--tappa-testo); }
.tappa--2 { --tappa-fondo: var(--blu); }
.tappa--3 { --tappa-fondo: var(--blu-medio); }
.tappa--4 { --tappa-fondo: var(--blu-chiaro); --tappa-testo: var(--testo); }
.tappa:not(.tappa--4) { --fuoco: #ffffff; }

.tappa__titolo { margin: 0; font-size: var(--t-3); line-height: 1.2; }

.tappa__linguetta {
  display: block;
  inline-size: 100%;
  min-block-size: 4rem;
  padding: var(--sp-3) var(--sp-5);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

/* Aperta, la linguetta diventa il titolo intero («Scegli» + «mezzo e date»); chiusa, resta la parola corta */
.tappa.is-aperta .tappa__titolo { font-size: var(--t-4); line-height: 1; letter-spacing: -0.03em; }
.js .tappa:not(.is-aperta) .tappa__resto { display: none; }

.tappa__corpo { display: grid; gap: var(--sp-5); padding: 0 var(--sp-5) var(--sp-6); }
.tappa__testo { display: grid; gap: var(--sp-3); align-content: end; }
.tappa__testo p { margin: 0; max-inline-size: 36ch; }

.tappa__foto { margin: 0; display: grid; gap: var(--sp-2); }
.tappa__foto img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raggio); }
.tappa__foto figcaption { font-size: var(--t-1); }

/* Con lo script: si apre una tappa alla volta. Senza, restano tutte aperte. */
.js .tappa:not(.is-aperta) .tappa__corpo { display: none; }

/* Orizzontale solo da 72rem: a 1024 px il pannello aperto è più stretto del suo contenuto.
   Altezza minima e non fissa: da 1536 px in su il testo usciva dal fondo (visto online il 27/10). */
@media (min-width: 72rem) {
  .js .tappe { display: flex; min-block-size: 34rem; }
  .js .tappa {
    position: relative;
    flex: 1 1 0;
    min-inline-size: 0;
    overflow: hidden;
    transition: flex-grow 450ms var(--curva-uscita);
  }
  .js .tappa.is-aperta { flex-grow: 7; }

  /* La linguetta chiusa occupa tutta la striscia: nome in verticale che sale, ancorato in basso */
  .js .tappa:not(.is-aperta) .tappa__titolo { position: absolute; inset: 0; }
  .js .tappa:not(.is-aperta) .tappa__linguetta {
    display: flex;
    block-size: 100%;
    align-items: flex-end;
    padding: var(--sp-5);
  }
  .js .tappa:not(.is-aperta) .tappa__linguetta { writing-mode: vertical-rl; transform: rotate(180deg); }
  .js .tappa:not(.is-aperta):hover { filter: brightness(1.12); }

  .js .tappa.is-aperta { display: grid; grid-template-rows: auto 1fr; }
  .js .tappa.is-aperta .tappa__linguetta { padding: var(--sp-6) var(--sp-6) 0; cursor: default; }
  /* Aperta: il titolo in alto su tutta la larghezza, sotto il testo a sinistra e la foto a destra */
  .js .tappa__corpo {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: var(--sp-6);
    padding: var(--sp-5) var(--sp-6) var(--sp-6);
    min-inline-size: 0;
  }
  .js .tappa__foto img { aspect-ratio: 16 / 10; }
}

/* -------------------------------------------------------------
   LE REGOLE — il foglio del contratto, coi bordi dentellati, sulla foto dei tetti
   ------------------------------------------------------------- */
.sezione-regole {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--sez) var(--margine);
  overflow: hidden;
  background-color: var(--blu-notte);
}

.sezione-regole__sfondo {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.foglio {
  position: relative;
  min-inline-size: 0;
  inline-size: min(100%, 42rem);
  display: grid;
  gap: var(--sp-7);
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.25rem, 0.6rem + 3vw, 4rem);
  background-color: #ffffff;
  text-align: center;
  clip-path: polygon(0% 10px, 2.273% 0, 4.545% 10px, 6.818% 0, 9.091% 10px, 11.364% 0, 13.636% 10px, 15.909% 0, 18.182% 10px, 20.455% 0, 22.727% 10px, 25% 0, 27.273% 10px, 29.545% 0, 31.818% 10px, 34.091% 0, 36.364% 10px, 38.636% 0, 40.909% 10px, 43.182% 0, 45.455% 10px, 47.727% 0, 50% 10px, 52.273% 0, 54.545% 10px, 56.818% 0, 59.091% 10px, 61.364% 0, 63.636% 10px, 65.909% 0, 68.182% 10px, 70.455% 0, 72.727% 10px, 75% 0, 77.273% 10px, 79.545% 0, 81.818% 10px, 84.091% 0, 86.364% 10px, 88.636% 0, 90.909% 10px, 93.182% 0, 95.455% 10px, 97.727% 0, 100% 10px, 100% calc(100% - 10px), 97.727% 100%, 95.455% calc(100% - 10px), 93.182% 100%, 90.909% calc(100% - 10px), 88.636% 100%, 86.364% calc(100% - 10px), 84.091% 100%, 81.818% calc(100% - 10px), 79.545% 100%, 77.273% calc(100% - 10px), 75% 100%, 72.727% calc(100% - 10px), 70.455% 100%, 68.182% calc(100% - 10px), 65.909% 100%, 63.636% calc(100% - 10px), 61.364% 100%, 59.091% calc(100% - 10px), 56.818% 100%, 54.545% calc(100% - 10px), 52.273% 100%, 50% calc(100% - 10px), 47.727% 100%, 45.455% calc(100% - 10px), 43.182% 100%, 40.909% calc(100% - 10px), 38.636% 100%, 36.364% calc(100% - 10px), 34.091% 100%, 31.818% calc(100% - 10px), 29.545% 100%, 27.273% calc(100% - 10px), 25% 100%, 22.727% calc(100% - 10px), 20.455% 100%, 18.182% calc(100% - 10px), 15.909% 100%, 13.636% calc(100% - 10px), 11.364% 100%, 9.091% calc(100% - 10px), 6.818% 100%, 4.545% calc(100% - 10px), 2.273% 100%, 0% calc(100% - 10px));
}

.foglio__titolo { margin: 0; font-size: var(--t-3); line-height: 1.15; letter-spacing: -0.02em; color: var(--blu); }
.foglio__nota { margin: calc(var(--sp-7) * -0.75) 0 0; font-size: var(--t-1); color: var(--testo-tenue); }

.foglio__gruppo { display: grid; gap: var(--sp-4); }
.foglio__gruppo h3 { margin: 0; font-size: var(--t-2); font-weight: 700; color: var(--blu); }

.foglio dl { display: grid; gap: var(--sp-4); margin: 0; max-inline-size: 30rem; margin-inline: auto; inline-size: 100%; }
.foglio dl div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); text-align: start; }
.foglio dt { display: grid; font-weight: 400; }
.foglio dt small { font-size: var(--t-1); color: var(--testo-tenue); }
/* Niente nowrap qui: «patente B e codice fiscale» allargava la pagina a 385 px su un telefono da 360 */
.foglio dd { margin: 0; font-family: var(--font-titoli); font-weight: 700; text-align: end; }

.foglio__piede { margin: 0; font-size: var(--t-1); line-height: 1.7; }

/* -------------------------------------------------------------
   DOMANDE — una fascia per domanda, risposte sempre visibili
   ------------------------------------------------------------- */
.domande__testa {
  --fuoco: #ffffff;
  display: grid;
  align-items: end;
  min-block-size: clamp(14rem, 36svh, 24rem);
  padding-block: var(--sp-7) var(--sp-6);
  background-color: var(--blu);
  color: #ffffff;
}

.domande__titolo { margin: 0; font-size: var(--t-5); line-height: 0.95; letter-spacing: -0.04em; color: #ffffff; }

.domande { margin: 0; }
.domanda:nth-child(odd)  { background-color: #ffffff; }
.domanda:nth-child(even) { background-color: var(--blu-tinta); }

.domanda__interno {
  display: grid;
  gap: var(--sp-3);
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}

.domanda dt { font-family: var(--font-titoli); font-weight: 700; font-size: var(--t-3); line-height: 1.2; letter-spacing: -0.015em; color: var(--blu); }
.domanda dd { margin: 0; max-inline-size: 64ch; font-size: var(--t-2); line-height: 1.55; }

@media (min-width: 64rem) {
  .domanda__interno { grid-template-columns: 5fr 7fr; column-gap: var(--sp-8); }
}

/* -------------------------------------------------------------
   DOVE SIAMO — l'indirizzo a righe grandi, come cartelli impilati
   ------------------------------------------------------------- */
.sezione-dove { overflow: clip; }

.riga-dove {
  display: block;
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: var(--t-4);
  line-height: 1;
  letter-spacing: -0.03em;
}

.riga-dove > .contenitore {
  display: flex;
  align-items: flex-end;
  gap: 0.35em;
  min-block-size: clamp(5.25rem, 3rem + 7vw, 9.5rem);
  padding-block: var(--sp-5);
  color: inherit;
  text-decoration: none;
}

.riga-dove .ico { inline-size: 0.6em; block-size: 0.6em; stroke-width: 2.4; margin-block-end: 0.12em; transition: transform var(--durata-media) var(--curva); }
.riga-dove a:hover .ico { transform: translateX(8px); }
.riga-dove a:hover { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }

.riga-dove--titolo { background-color: var(--blu-notte); color: #ffffff; --fuoco: #ffffff; }
.sezione-dove li:nth-child(odd)  { background-color: var(--blu); color: #ffffff; --fuoco: #ffffff; }
.sezione-dove li:nth-child(even) { background-color: #ffffff; color: var(--blu); }
.riga-dove--orari .segnaposto { font-size: 0.6em; letter-spacing: 0; }

.riga-dove--saluto.riga-dove { background-color: var(--arancio); color: var(--azione-testo); --fuoco: var(--inchiostro); }

.tondo {
  display: inline-grid;
  place-items: center;
  inline-size: 0.95em;
  block-size: 0.95em;
  margin-block-end: 0.02em;
  border-radius: 50%;
  background-color: var(--inchiostro);
  color: #ffffff;
  transition: transform var(--durata-media) var(--curva-uscita);
}

.tondo .ico { inline-size: 0.5em; block-size: 0.5em; margin: 0; }
.riga-dove--saluto a:hover .tondo { transform: translateX(10px) rotate(-8deg); }
.riga-dove--saluto a:hover .ico { transform: none; }

/* -------------------------------------------------------------
   PIÈ DI PAGINA — l'invito, i recapiti, il nome tagliato dal bordo
   ------------------------------------------------------------- */
.pie-grande {
  --fuoco: #ffffff;
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto auto;
  min-block-size: min(100svh, 52rem);
  padding-block-start: var(--sez);
  overflow: hidden;
  background-color: var(--blu-notte);
  color: #ffffff;
}

.pie-grande a { color: #ffffff; }

.pie-grande__alto { display: grid; gap: var(--sp-7); align-content: start; }
.pie-grande__invito { display: grid; gap: var(--sp-6); justify-items: start; }
.pie-grande__frase { margin: 0; max-inline-size: 10ch; font-family: var(--font-titoli); font-weight: 800; font-size: var(--t-4); line-height: 0.98; letter-spacing: -0.035em; }

.pie-grande__recapiti { display: grid; gap: var(--sp-2); align-content: start; }
.pie-grande__recapiti a { display: inline-flex; align-items: center; min-block-size: var(--tocco-telefono); font-weight: 600; }

@media (min-width: 64rem) {
  .pie-grande__alto { grid-template-columns: 7fr 3fr; }
  .pie-grande__recapiti { justify-self: end; }
}

.pie-grande__legale {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-8) var(--sp-4);
  font-size: var(--t-1);
}

.pie-grande__legale p { margin: 0; max-inline-size: 72ch; }
.pie-grande__legale .segnaposto { color: var(--testo); }
.crediti a { text-underline-offset: 0.2em; }

.pie-grande__marchio {
  margin: 0;
  /* Centrato nel piè di pagina (04/11): flex lo tiene in mezzo anche se sborda;
     0.1em a destra compensa la spaziatura negativa delle lettere */
  display: flex;
  justify-content: center;
  padding-inline: 0 0.1em;
  font-family: var(--font-titoli);
  font-weight: 800;
  font-size: 19.5vw;
  line-height: 0.8;
  letter-spacing: -0.05em;
  white-space: nowrap;
  transform: translateY(8%);
  margin-block-start: 0;
}

.pie-grande__marchio span { color: var(--arancio); }

/* -------------------------------------------------------------
   TELEFONO — barra azioni fissa, la testa si alleggerisce
   -------------------------------------------------------------
   Sotto i 48rem la barra compare in basso e il bottone «Chiama»
   della testa si toglie (sarebbe doppio). La navigazione sparisce:
   le stesse cose stanno nella barra e scorrendo.
   ------------------------------------------------------------- */
.barra-azioni { display: none; }

@media (max-width: 47.99rem) {
  .barra-azioni {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--margine) calc(var(--sp-2) + env(safe-area-inset-bottom));
    background-color: #ffffff;
    box-shadow: 0 -6px 20px rgb(11 61 145 / 0.14); /* taste-skill-ignore: l'unica ombra, sulla sola cosa che galleggia */
    transition: transform 320ms var(--curva-uscita);
  }

  .barra-azioni.is-nascosta { transform: translateY(110%); }

  .barra-azioni .bottone { min-block-size: var(--tocco-telefono); }

  body { padding-block-end: 5.5rem; }

  .testa .testa__chiama, .nav-principale { display: none; }

  .apertura { min-block-size: 0; }
  .apertura__interno { padding-block: clamp(5.5rem, 14svh, 8rem) var(--sp-4); padding-inline: 0.5rem; gap: var(--sp-2); }
  .cartello-grande__luogo .ico { display: none; }
  .cartello-grande, .pannello-integrativo { inline-size: 100%; }
  .apertura__didascalia { display: none; }
  .pannello-integrativo { gap: var(--sp-4); }
  .pannello-integrativo__azioni .bottone { inline-size: 100%; }
  .pannello-integrativo .collegamento-chiama { display: none; } /* c'è «Chiama» nella barra */
  .cartello-grande__km { margin-inline-start: 0; }
  .cartello__dati, .cartello__prezzo, .cartello__vai { font-size: var(--t-1); }
  .cartellino__carta { padding-inline: 1.75rem; transform: rotate(-1deg); }
  .domande__testa { min-block-size: clamp(10rem, 24svh, 14rem); }
}

/* Fra telefono e computer la navigazione non ci sta su una riga: restano marchio e telefono */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .nav-principale { display: none; }
}

/* -------------------------------------------------------------
   MOVIMENTO — tutto nascosto SOLO dietro .anima, che mette avvio.js
   e che avvio.js stesso toglie se pagina.js non parte entro 2,5 s.
   Con prefers-reduced-motion la classe non c'è proprio.
   ------------------------------------------------------------- */
.anima [data-entra] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--durata-entrata) var(--curva-uscita), transform var(--durata-entrata) var(--curva-uscita);
  transition-delay: calc(var(--i, 0) * 85ms);
}

.anima [data-entra].entrato { opacity: 1; transform: none; }

.anima [data-gruppo] > * {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 700ms var(--curva-uscita), transform 700ms var(--curva-uscita);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.anima [data-gruppo].entrato > * { opacity: 1; transform: none; }

/* Il cartello grande arriva da sotto e si raddrizza; il pannello lo segue */
.anima .cartello-grande[data-entra] { transform: translateY(48px) rotate(-1.2deg); transform-origin: 0 100%; }
.anima .cartello-grande[data-entra].entrato { transform: none; }

/* La foto dell'apertura respira piano mentre è in scena */
.anima .apertura__foto img.is-attiva { animation: respiro 9s ease-out both; }
@keyframes respiro { from { transform: scale(1.07); } to { transform: scale(1); } }

/* Il furgone entra da sinistra, passa davanti al titolo e frena. Le ruote girano finché corre. */
.anima .mezzi-scena__furgone { transform: translateX(-115vw); }
.anima .mezzi-scena.entrato .mezzi-scena__furgone { animation: guida 1900ms var(--curva-uscita) both; }
.anima .mezzi-scena.entrato .furgone__ruota { animation: gira 1900ms var(--curva-uscita) both; }

@keyframes guida {
  0%   { transform: translateX(-115vw) rotate(0deg); }
  78%  { transform: translateX(1.2vw) rotate(1.2deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

@keyframes gira { from { transform: rotate(-1080deg); } to { transform: rotate(0deg); } }

/* Il cartellino delle mete si inclina mentre entra */
.anima .cartellino[data-entra] { transform: translateY(80px); }
.anima .cartellino[data-entra].entrato { transform: none; }

/* Il numero dei km scatta come un contachilometri */
.conto__numero.scatta { animation: scatto 420ms var(--curva-uscita); }
@keyframes scatto { 0% { transform: translateY(-0.18em); opacity: 0.4; } 100% { transform: none; opacity: 1; } }

/* La tappa che si apre: il testo arriva dopo che il pannello si è allargato */
.anima .tappa.is-aperta :is(.tappa__testo > p, .tappa__foto) { animation: affiora 600ms 180ms var(--curva-uscita) both; }
.anima .tappa.is-aperta .tappa__foto { animation-delay: 340ms; }
@keyframes affiora { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* I giorni del calendario compaiono uno dopo l'altro quando cambia il mese o il mezzo */
.anima .cal__griglia.is-nuovo .cal__giorno { animation: compare 380ms var(--curva-uscita) both; animation-delay: calc(var(--d, 0) * 9ms); }
@keyframes compare { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }

/* Il foglio sale come uscito dalla stampante */
.anima .foglio[data-entra] { transform: translateY(90px); }
.anima .foglio[data-entra].entrato { transform: none; }

/* Le righe dell'indirizzo scorrono dentro da sinistra, una per una */
.anima .sezione-dove [data-gruppo] > * > .contenitore { transform: translateX(-8vw); transition: transform 900ms var(--curva-uscita); transition-delay: calc(var(--i, 0) * 80ms); }
.anima .sezione-dove [data-gruppo] > * { transform: none; }
.anima .sezione-dove [data-gruppo].entrato > * > .contenitore { transform: none; }

/* Il nome grande sale dal fondo */
.anima .pie-grande__marchio { transform: translateY(60%); transition: transform 1400ms var(--curva-uscita); }
.anima .pie-grande__marchio.entrato { transform: translateY(8%); }

@media (prefers-reduced-motion: reduce) {
  .cartello, .cartello:hover, .bottone:active, .ico--freccia { transition: none; transform: none; }
  .apertura__foto img { transition: none; }
}