/* M Motors — home nuova (design versione 10, kit design-mmotors) · step 5, 05/11/2026
   Colori misurati sul design (confronta-design.py --colori) e dati dal cliente: blu #14224A, giallo #FDE62B, fondo #F3F5FA.
   Carattere Figtree, servito dal sito (titoli 900, testi 400-600). */

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-variabile.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-variabile-corsivo.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --blu: #14224A;
  --blu-testo: #485470;
  --giallo: #FDE62B;
  --fondo: #F3F5FA;
  --bianco: #FFFFFF;
  --bordo: #DDE1E9;
  --tacca: #C9D0DE;
  --nome: #BFC4D0;

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --contenitore: 1360px;
  --margine: clamp(16px, 3.1vw, 44px);
  --raggio: 16px;
  --raggio-piccolo: 12px;
  --ombra-scheda: 0 1px 2px rgba(20, 34, 74, 0.05), 0 18px 40px -26px rgba(20, 34, 74, 0.32);
  --ombra-forte: 0 2px 6px rgba(20, 34, 74, 0.06), 0 26px 60px -28px rgba(20, 34, 74, 0.42);
  --alt-testata: 62px;
}

/* ── base ──────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alt-testata) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--blu);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 450;
  line-height: 1.5;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; border-radius: 6px; }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--blu); color: var(--bianco); padding: 12px 18px; border-radius: 10px;
  font-weight: 700; text-decoration: none;
}
.salta:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

.contenitore {
  width: 100%;
  max-width: calc(var(--contenitore) + 2 * var(--margine));
  margin-inline: auto;
  padding-left: max(var(--margine), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margine), env(safe-area-inset-right, 0px));
}

/* titoli di sezione, con la parola evidenziata in giallo */
.titolo {
  font-size: clamp(32px, 3.4vw, 49px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--blu);
}
.titolo--grande { font-size: clamp(40px, 4.3vw, 62px); }
em.evid {
  font-style: normal;
  background: var(--giallo);
  color: inherit;
  padding: 0.02em 0.12em 0.05em;
  margin: 0 -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* pulsanti */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 2px solid transparent; border-radius: var(--raggio-piccolo);
  font: 800 16px/1.1 var(--font); letter-spacing: -0.005em;
  text-decoration: none; text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.2s ease, transform 0.14s var(--ease-out);
}
.btn img { width: 18px; height: 18px; flex: none; }
.btn:active { transform: scale(0.97); }
.btn--giallo { background: var(--giallo); color: var(--blu); }
.btn--bordo { background: var(--bianco); color: var(--blu); border-color: var(--blu); border-width: 1.5px; }
.btn--pillola { border-radius: 999px; }
.btn--mini { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 999px; gap: 5px; }
.freccia-obliqua { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn--mini .freccia-obliqua { width: 9px; height: 9px; stroke-width: 2.2; }
@media (hover: hover) and (pointer: fine) {
  .btn--giallo:hover { box-shadow: 0 12px 24px -14px rgba(20, 34, 74, 0.6); }
  .btn--bordo:hover { background: var(--blu); color: var(--bianco); }
  .btn--bordo:hover img { filter: brightness(0) invert(1); }
}

/* ── testata ───────────────────────────────────────────────────────────────────────── */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--bianco);
  padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow 0.25s ease;
}
.testata-scorsa .testata { box-shadow: 0 10px 30px -20px rgba(20, 34, 74, 0.35); }
.testata__in { display: flex; align-items: center; height: var(--alt-testata); gap: 12px; }
.testata__logo { flex: none; display: block; width: 158px; margin-right: auto; }
.testata__logo img { width: 100%; }
.menu { display: none; }
.testata__tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 44px; height: 44px; padding: 0 12px;
  border-radius: 999px; background: var(--fondo);
  text-decoration: none; font-weight: 850; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap;
  touch-action: manipulation;
}
.testata__tel img { width: 20px; height: 20px; }
.testata__tel span { display: none; }
.testata__menu {
  position: relative; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 999px; background: var(--blu);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: transform 0.14s var(--ease-out);
}
.testata__menu:active { transform: scale(0.95); }
.testata__menu-righe, .testata__menu-righe::before, .testata__menu-righe::after {
  position: absolute; left: 13px; width: 18px; height: 2px; border-radius: 2px; background: var(--bianco);
  transition: transform 0.2s var(--ease-out), opacity 0.15s ease;
}
.testata__menu-righe { top: 21px; }
.testata__menu-righe::before, .testata__menu-righe::after { content: ""; left: 0; }
.testata__menu-righe::before { top: -6px; }
.testata__menu-righe::after { top: 6px; }
.testata__menu[aria-expanded="true"] .testata__menu-righe { background: transparent; }
.testata__menu[aria-expanded="true"] .testata__menu-righe::before { transform: translateY(6px) rotate(45deg); }
.testata__menu[aria-expanded="true"] .testata__menu-righe::after { transform: translateY(-6px) rotate(-45deg); }

.menu-telefono {
  position: fixed; left: 0; right: 0;
  top: calc(var(--alt-testata) + env(safe-area-inset-top, 0px));
  height: calc(100dvh - var(--alt-testata) - env(safe-area-inset-top, 0px));
  background: var(--bianco);
  overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--bordo);
}
.menu-telefono[hidden] { display: none; }
.menu-telefono__in {
  padding: 24px max(20px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 26px;
}
.menu-telefono__voci a {
  display: block; padding: 12px 0; border-bottom: 1px solid var(--bordo);
  font-size: 26px; font-weight: 850; letter-spacing: -0.02em; text-decoration: none;
}
.menu-telefono__azioni { display: grid; gap: 12px; }
.menu-telefono__indirizzo { color: var(--blu-testo); font-weight: 600; }

/* ── hero ──────────────────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; }
.hero__scena {
  position: relative;
  height: 74vw;               /* telefono: la scena col nome e l'auto, il titolo sotto */
  background: var(--fondo);
  overflow: clip;
}
.hero__sfondo, .hero__velo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 50%;
}
.hero__velo, .hero__filo { position: absolute; inset: 0; }
.hero__filo {
  background: var(--giallo);
  clip-path: polygon(0 0, calc(26.5% + 8px) 0, calc(4% + 8px) 100%, 0 100%);
}
.hero__velo { clip-path: polygon(0 0, 26.5% 0, 4% 100%, 0 100%); }
.hero__velo::after { content: ""; position: absolute; inset: 0; background: rgba(250, 249, 247, 0.8); }
.hero__scena::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 5; pointer-events: none;
  background: linear-gradient(to bottom, rgba(243, 245, 250, 0), var(--fondo));
}
.hero__comp {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin-inline: auto;
  width: min(100%, 1600px);
  container-type: inline-size;
  z-index: 6;
  pointer-events: none;
}
.hero__nome {
  position: absolute; left: 0; top: 5.9cqw; width: 100%;
  font-size: 16.3cqw; font-weight: 800; line-height: 1; letter-spacing: 0; white-space: nowrap;
}
.hero__m, .hero__motors { position: absolute; top: 0; }
.hero__m { left: 8.24cqw; color: var(--blu); font-weight: 400; }
.hero__motors { left: 23.4cqw; color: var(--bianco); text-shadow: 0 1px 18px rgba(20, 34, 74, 0.12); }
.hero__auto, .hero__ombra { position: absolute; left: 7cqw; top: 20cqw; width: 86cqw; }
.hero__anello {
  position: absolute; left: 1cqw; width: 98cqw; top: 58.5cqw; height: 9cqw;
  fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.6px; overflow: visible;
}
.hero__anello ellipse { vector-effect: non-scaling-stroke; }
.hero__testo {
  position: relative; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px));
}
.hero__titolo { font-size: clamp(30px, 8.6vw, 36px); font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; }
.hero__giu {
  flex: none; display: block; width: 52px; height: 52px; border-radius: 50%;
  touch-action: manipulation; transition: transform 0.14s var(--ease-out);
}
.hero__giu img { width: 100%; height: 100%; }
.hero__giu:active { transform: scale(0.94); }

/* ── il pannello «Prenota» ─────────────────────────────────────────────────────────── */
.prenota {
  position: relative; z-index: 7;
  margin: 0 max(16px, env(safe-area-inset-left, 0px));
  padding: 20px 18px 18px;
  background: var(--bianco);
  border-radius: 18px;
  box-shadow: var(--ombra-forte);
  display: grid; gap: 18px;
}
.prenota__gruppo { border: 0; margin: 0; padding: 0; min-width: 0; }
.prenota__gruppo legend, .data__etichetta {
  padding: 0; margin-bottom: 8px; font-size: 17px; font-weight: 850; letter-spacing: -0.01em; color: var(--blu);
}
.prenota__scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.scelta { position: relative; display: inline-flex; cursor: pointer; }
.scelta input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.scelta span {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--bordo); border-radius: 999px; background: var(--bianco);
  font-size: 15px; font-weight: 650; color: var(--blu);
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  -webkit-user-select: none; user-select: none;
}
.scelta input:checked + span { border-color: var(--blu); background: var(--blu); color: var(--bianco); font-weight: 800; }
.scelta input:focus-visible + span { outline: 3px solid var(--blu); outline-offset: 2px; }
.scelta:active span { transform: scale(0.98); }

.prenota__gruppo--date { position: relative; }
.prenota__date { display: grid; grid-template-columns: 1fr 22px 1fr; align-items: end; gap: 8px; }
.data { min-width: 0; }
.data__etichetta { display: block; }
.data__campo {
  display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0;
  min-height: 46px; padding: 0 10px;
  border: 1.5px solid var(--bordo); border-radius: 10px; background: var(--bianco);
  font-size: 16px; font-weight: 600; color: var(--blu-testo); text-align: left;
  touch-action: manipulation;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.data__campo img { width: 18px; height: 18px; flex: none; }
.data__valore { min-width: 0; overflow: hidden; white-space: nowrap; }
.data__campo.piena { color: var(--blu); font-weight: 750; }
.data__campo[aria-expanded="true"] { border-color: var(--blu); box-shadow: 0 0 0 3px rgba(20, 34, 74, 0.08); }
@media (hover: hover) and (pointer: fine) { .data__campo:hover { border-color: var(--blu-testo); } }
.data__trattino { height: 5px; margin-bottom: 20px; border-radius: 3px; background: var(--giallo); }
.prenota__nota { margin-top: 10px; font-size: 13.5px; color: var(--blu-testo); font-weight: 500; }

.prenota__messaggio {
  padding: 14px 16px; border-radius: 14px 14px 14px 4px;
  background: var(--fondo);
}
.prenota__anteprima { font-size: 14.5px; line-height: 1.45; color: var(--blu); font-weight: 500; }
.prenota__riepilogo { display: block; margin-top: 4px; font-weight: 800; }
.prenota__azioni { display: grid; gap: 10px; }
.thk-avviso-modulo { font-size: 12.5px; line-height: 1.45; color: var(--blu-testo); }
.thk-avviso-modulo a { font-weight: 700; }

/* calendario vero (non il campo data del browser) */
.calendario {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
  max-width: 340px;
  padding: 14px 14px 12px;
  background: var(--bianco); border-radius: 16px; border: 1px solid var(--bordo);
  box-shadow: var(--ombra-forte);
  scroll-margin: 90px 0 24px;
}
.calendario[hidden] { display: none; }
.calendario-aperto .barra-azioni { display: none; }
.cal__testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal__mese { font-size: 16px; font-weight: 850; text-transform: capitalize; }
.cal__freccia {
  width: 40px; height: 40px; border: 1.5px solid var(--bordo); border-radius: 10px; background: var(--bianco);
  display: grid; place-items: center; touch-action: manipulation;
}
.cal__freccia svg { width: 14px; height: 14px; fill: none; stroke: var(--blu); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cal__freccia:disabled { opacity: 0.35; cursor: default; }
.cal__griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__gs { padding: 4px 0 6px; text-align: center; font-size: 12px; font-weight: 750; color: var(--blu-testo); text-transform: uppercase; }
.cal__giorno {
  position: relative; height: 40px; border: 0; border-radius: 10px; background: transparent;
  font-size: 15px; font-weight: 600; color: var(--blu); touch-action: manipulation;
}
.cal__giorno:disabled { color: var(--tacca); cursor: default; }
.cal__giorno.oggi { box-shadow: inset 0 0 0 1.5px var(--tacca); }
.cal__giorno.periodo { background: rgba(253, 230, 43, 0.35); border-radius: 0; }
.cal__giorno.inizio, .cal__giorno.fine { background: var(--giallo); font-weight: 850; }
.cal__giorno.inizio { border-radius: 10px 0 0 10px; }
.cal__giorno.fine { border-radius: 0 10px 10px 0; }
.cal__giorno.inizio.fine { border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { .cal__giorno:not(:disabled):hover { background: var(--fondo); } .cal__giorno.inizio:hover, .cal__giorno.fine:hover { background: var(--giallo); } }
.cal__piede { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bordo); }
.cal__aiuto { font-size: 13px; color: var(--blu-testo); font-weight: 600; }
.cal__azioni { display: flex; gap: 6px; }
.cal__btn { min-height: 38px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--bordo); background: var(--bianco); font-weight: 750; font-size: 14px; touch-action: manipulation; }
.cal__btn--fatto { background: var(--blu); border-color: var(--blu); color: var(--bianco); }

/* ── «Il tempo lo scegli tu» ───────────────────────────────────────────────────────── */
.formule { padding: 52px 0 10px; }
.formule__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.formule__schede {
  display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding: 4px max(16px, env(safe-area-inset-left, 0px)) 18px;
  scroll-padding-inline: max(16px, env(safe-area-inset-left, 0px));
  scrollbar-width: none;
}
.formule__schede::-webkit-scrollbar { display: none; }
.formula {
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 22px 18px 26px; min-height: 250px;
  background: var(--bianco); border-radius: var(--raggio); box-shadow: var(--ombra-scheda);
}
.formula__ico { width: 78px; height: 78px; }
.formula__48 { font-size: 96px; font-weight: 900; line-height: 0.82; letter-spacing: -0.03em; }
.formula__nome { margin-top: 14px; font-size: 30px; font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; }
.formula__barra { width: 76px; height: 6px; margin: 16px 0 16px; border-radius: 3px; background: var(--giallo); }
.formula__testo { font-size: 17px; line-height: 1.3; font-weight: 500; }

/* ── «Scegli il tuo veicolo» (il palco della flotta) ───────────────────────────────── */
.flotta { padding: 48px 0 8px; }
.flotta__in { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 18px 12px; }
.flotta__titolo { grid-column: 1 / -1; }
.flotta__tipi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 6px; }
.tipo {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 13px 0 10px;
  border: 1.5px solid var(--bordo); border-radius: 999px; background: var(--bianco);
  font-size: 15px; font-weight: 800; color: var(--blu); white-space: nowrap;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.14s var(--ease-out);
}
.tipo img { width: 30px; height: 30px; }
.tipo { gap: 7px; }
.tipo[aria-pressed="true"] { border-color: var(--blu); box-shadow: inset 0 -4px 0 var(--giallo); }
.tipo:active { transform: scale(0.97); }
.flotta__contatore { grid-column: 1; grid-row: 3; align-self: start; display: flex; align-items: flex-start; gap: 2px; font-weight: 850; line-height: 1; }
.contatore__ora { font-size: 30px; letter-spacing: -0.02em; }
.contatore__barra { flex: none; width: 18px; height: 30px; margin: 2px 2px 0; background: linear-gradient(to bottom right, transparent calc(50% - 1.2px), var(--blu) calc(50% - 1.2px), var(--blu) calc(50% + 1.2px), transparent calc(50% + 1.2px)); }
.contatore__tot { font-size: 18px; margin-top: 18px; color: var(--blu-testo); }

.palco {
  grid-column: 1 / -1; grid-row: 4;
  position: relative; container-type: inline-size;
  height: 62vw; max-height: 300px;
  margin-top: -40px;
  overflow-x: clip;
}
.palco__nome {
  position: absolute; left: 0; right: 0; top: 2%;
  text-align: center;
  font-size: min(25cqw, calc(130cqw / var(--lettere, 3))); font-weight: 900; line-height: 1; letter-spacing: 0.04em;
  color: var(--nome);
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, rgba(0, 0, 0, 0.15) 92%);
  mask-image: linear-gradient(to bottom, #000 35%, rgba(0, 0, 0, 0.15) 92%);
  -webkit-user-select: none; user-select: none;
}
.palco__piatto { position: absolute; left: 50%; bottom: 2%; width: 84%; height: auto; transform: translateX(-50%); }
.palco__veicoli { position: absolute; inset: 0; }
.palco__veicolo {
  position: absolute; bottom: 9%; left: 50%; width: 66%;
  display: flex; align-items: flex-end; justify-content: center;
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
}
.palco__veicolo img { width: 100%; height: auto; }
.palco__veicolo[data-pos="0"] { z-index: 3; }
.palco__veicolo[data-pos="-1"], .palco__veicolo[data-pos="1"] { width: 26%; bottom: 38%; opacity: 0.75; z-index: 2; }
.palco__veicolo[data-pos="-1"] { left: 13%; }
.palco__veicolo[data-pos="1"] { left: 87%; }
.palco__veicolo[data-pos="-2"], .palco__veicolo[data-pos="2"] { opacity: 0; width: 12%; bottom: 44%; z-index: 1; }
.palco__veicolo[data-pos="-2"] { left: 0%; }
.palco__veicolo[data-pos="2"] { left: 100%; }

.flotta__dati {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr; gap: 14px; justify-items: start;
}
.dati { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.dato { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; }
.dato img { width: 20px; height: 20px; }
.dato strong { font-weight: 850; }
.btn--freccia { border-radius: 999px; min-height: 46px; }
.flotta__nota { font-size: 13px; color: var(--blu-testo); font-weight: 500; }
.flotta__nota br { display: none; }

/* ── «Offerte Rent to buy» ─────────────────────────────────────────────────────────── */
.offerte { padding: 56px 0 8px; }
.offerte__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.formule__in > *, .flotta__in > *, .offerte__in > *, .domande__in > *, .lecce__in > *, .noscoring__alto > * { min-width: 0; }
.offerte__sotto { margin-top: 8px; font-size: 18px; font-weight: 600; }
.filtri {
  display: none; gap: 8px; margin-top: 18px; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding: 2px max(16px, env(safe-area-inset-left, 0px)) 4px;
}
.js .filtri { display: flex; }
.filtri::-webkit-scrollbar { display: none; }
.filtro {
  flex: none; min-height: 44px; padding: 0 20px;
  border: 1.5px solid var(--tacca); border-radius: 999px; background: var(--bianco);
  font-size: 16px; font-weight: 800; color: var(--blu); white-space: nowrap;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.14s var(--ease-out);
}
.filtro[aria-pressed="true"] { background: var(--giallo); border-color: var(--giallo); }
.filtro:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .filtro:not([aria-pressed="true"]):hover { border-color: var(--blu); } }

.offerte__griglia {
  display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding: 4px max(16px, env(safe-area-inset-left, 0px)) 18px;
  scroll-padding-inline: max(16px, env(safe-area-inset-left, 0px));
}
.offerte__griglia::-webkit-scrollbar { display: none; }
.offerta {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--bianco); border-radius: var(--raggio-piccolo); overflow: hidden;
  box-shadow: var(--ombra-scheda);
}
.offerta[hidden] { display: none; }
.offerta__foto { position: relative; aspect-ratio: 12 / 5; overflow: hidden; background: var(--bordo); }
.offerta__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.offerta__illustrativa {
  position: absolute; right: 8px; bottom: 6px;
  font-size: 11px; font-weight: 700; color: var(--bianco);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 10px rgba(0, 0, 0, 0.45);
}
.offerta__corpo { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.offerta__nome { font-size: 18px; font-weight: 850; line-height: 1.15; letter-spacing: -0.01em; }
.offerta__dati { font-size: 13.5px; font-weight: 550; color: var(--blu-testo); }
.offerta__prezzo { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 2px; }
.offerta__rata { font-size: 24px; font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; }
.offerta__anticipo { font-size: 12.5px; line-height: 1.2; font-weight: 600; text-align: right; color: var(--blu-testo); }
.offerta__anticipo span { font-size: 14px; font-weight: 850; color: var(--blu); }
.offerta__piede { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.offerta__piede p { font-size: 13px; font-weight: 650; }
.offerte__vuoto { font-weight: 650; color: var(--blu-testo); }
.offerte__nota { font-size: 14px; font-style: italic; font-weight: 500; color: var(--blu-testo); }

/* ── «No scoring» e i 48 mesi ─────────────────────────────────────────────────────── */
.noscoring { padding: 60px 0 12px; overflow-x: clip; }
.noscoring__alto {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: center;
}
.noscoring__sinistra { display: contents; }
.noscoring__sinistra .titolo { grid-column: 1 / -1; grid-row: 1; }
.noscoring__mesi { grid-column: 1; grid-row: 2; display: inline-flex; flex-direction: column; align-items: center; justify-self: start; margin-top: 10px; line-height: 0.86; }
.noscoring__48 { font-size: 112px; font-weight: 900; letter-spacing: -0.03em; }
.noscoring__mesi-t { font-size: 34px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 2px; }
.noscoring__chiavi {
  grid-column: 2; grid-row: 2; justify-self: center; width: 100%; max-width: 430px;
}
.noscoring__chiavi img { width: 100%; }
.noscoring__destra { grid-column: 1 / -1; grid-row: 3; display: grid; gap: 16px; margin-top: 12px; }
.pillola {
  justify-self: start;
  padding: 10px 18px; border-radius: 14px; background: var(--giallo);
  font-size: 17px; font-weight: 850; line-height: 1.2; text-align: center;
}
.pillola br { display: none; }
.inclusi { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px; }
.inclusi li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; line-height: 1.15; }
.inclusi img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.noscoring__testo { font-size: 15.5px; font-weight: 500; line-height: 1.5; }
.tacche {
  grid-column: 1 / -1; grid-row: 4;
  display: flex; justify-content: space-between; align-items: flex-end;
  height: 18px; margin-top: 28px;
}
.tacca { width: 2px; height: 100%; border-radius: 1px; background: var(--tacca); }
.tacca:nth-child(4n+2) { height: 70%; }
.passi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.passo:nth-child(n+3)::before { display: none; }
.passo {
  position: relative;
  padding: 16px 12px 18px; text-align: center;
  background: var(--bianco); border: 1.5px solid var(--tacca); border-radius: var(--raggio-piccolo);
}
.passo::before {
  content: ""; position: absolute; left: 50%; top: -30px; width: 5px; height: 22px;
  transform: translateX(-50%); border-radius: 3px; background: var(--giallo);
}
.passo__num { display: block; font-size: 46px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.passo__titolo { margin-top: 6px; font-size: 18px; font-weight: 850; line-height: 1.15; letter-spacing: -0.01em; }
.passo__testo { margin-top: 6px; font-size: 14.5px; line-height: 1.35; font-weight: 500; }

/* ── «Prima di partire» ───────────────────────────────────────────────────────────── */
.domande { padding: 60px 0 10px; }
.domande__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.domande__colonne { display: grid; gap: 18px; }
.domande__col { display: grid; gap: 18px; }
.domanda dt { font-size: 17px; font-weight: 850; line-height: 1.3; letter-spacing: -0.005em; }
.domanda dd { margin: 4px 0 0; font-size: 16px; line-height: 1.45; font-weight: 450; color: var(--blu-testo); }

/* ── «Ci vediamo a Lecce» ─────────────────────────────────────────────────────────── */
.lecce { padding: 60px 0 56px; }
.lecce__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.lecce__plastico { position: relative; }
.lecce__mappa { position: relative; margin-inline: -8px; overflow-x: clip; }
.lecce__mappa > img { width: 100%; }
.lecce__segno { position: absolute; left: 27%; top: 38%; display: flex; align-items: center; }
.pin { display: block; width: 46px; height: auto; flex: none; transform: translate(-50%, -100%); }
.lecce__via {
  margin-left: -19px; transform: translateY(calc(-43px - 50%));
  padding: 6px 12px; border-radius: 999px; background: var(--bianco); border: 1.5px solid var(--blu);
  font-size: 12.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 18px -12px rgba(20, 34, 74, 0.5);
}
.lecce__plastico figcaption { margin-top: 4px; font-size: 14px; font-style: italic; font-weight: 500; color: var(--blu-testo); }
.lecce__scheda {
  padding: 22px 20px 20px; border-radius: var(--raggio);
  background: var(--bianco); box-shadow: var(--ombra-scheda);
  display: grid; gap: 16px;
}
.lecce__scheda-titolo { font-size: 22px; font-weight: 850; letter-spacing: -0.01em; }
.lecce__righe { display: grid; gap: 12px; }
.lecce__righe li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; }
.lecce__righe img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.lecce__tel a { font-size: 22px; font-weight: 900; letter-spacing: -0.01em; text-decoration: none; }
.lecce__azioni { display: grid; gap: 10px; }

/* ── piede ─────────────────────────────────────────────────────────────────────────── */
.piede {
  background: var(--blu); color: var(--bianco);
  padding: 34px 0 calc(94px + env(safe-area-inset-bottom, 0px));
}
.piede__in { display: grid; gap: 22px; }
.piede__logo { display: block; width: min(100%, 1024px); margin-inline: auto; }
.piede__logo img { width: 100%; }
.piede__strada {
  position: relative; height: 26px; overflow: hidden; border-radius: 2px;
  background: var(--giallo);
}
.piede__trattini {
  position: absolute; left: 0; top: 50%; width: 200%; height: 6px; margin-top: -3px;
  background: repeating-linear-gradient(90deg, var(--bianco) 0 30px, transparent 30px 54px);
}
.piede__link { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
.piede__link li { display: flex; align-items: center; }
.piede__link { gap: 0 4px; }
.piede__link a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.piede__tel a { font-weight: 850; font-size: 16px; }
.piede__tel img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
@media (hover: hover) and (pointer: fine) { .piede__link a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.piede__legale { display: grid; gap: 8px; text-align: center; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.piede__legale a { color: var(--bianco); font-weight: 650; }
.credit a { text-underline-offset: 3px; }

/* barra fissa da telefono */
.barra-azioni {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1.45fr 1fr; gap: 10px;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--bianco);
  box-shadow: 0 -10px 28px -18px rgba(20, 34, 74, 0.45);
}
.barra-azioni .btn { min-height: 48px; padding: 0 12px; }

/* ── pagine di testo (privacy, cookie, note legali, 404) ─────────────────────────── */
.pagina-testo { padding: 44px 0 64px; }
.legale { max-width: 820px; }
.legale h1 { font-size: clamp(34px, 4vw, 52px); font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 10px; }
.legale h2 { font-size: 23px; font-weight: 850; letter-spacing: -0.01em; margin: 34px 0 10px; }
.legale h3 { font-size: 18px; font-weight: 800; margin: 24px 0 8px; }
.legale p, .legale li { font-size: 16.5px; line-height: 1.65; color: var(--blu); }
.legale p + p { margin-top: 10px; }
.legale ul, .legale ol { padding-left: 22px; margin: 10px 0; }
.legale ul { list-style: disc; }
.legale ol { list-style: decimal; }
.legale li + li { margin-top: 6px; }
.legale a { font-weight: 650; text-underline-offset: 3px; }
.legale table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--bordo); }
.legale th { font-weight: 800; background: var(--bianco); }
.legale .tabella, .legale .scorri-tabella { overflow-x: auto; }
.pannello-404 {
  max-width: 640px; margin: 20px auto 0; padding: 40px 28px; text-align: center;
  background: var(--bianco); border-radius: var(--raggio); box-shadow: var(--ombra-scheda);
}
.pannello-404 h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.08; }
.pannello-404 p { margin-top: 12px; font-size: 17px; color: var(--blu-testo); }
.azioni-404 { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.link-forte { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; text-underline-offset: 4px; }

/* ════════════════════════════════════════════════════════════════════════════════════
   da 760 px: la composizione della hero del design, che scala con la larghezza
   ════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 760px) {
  .piede { padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
  .barra-azioni { display: none; }
  .testata__tel span { display: inline; }
  .testata__tel { padding: 0 16px; }

  .hero__scena { height: auto; aspect-ratio: 724 / 350; max-height: 774px; }
  .hero__scena::after { height: 90px; }
  .hero__sfondo, .hero__velo img { object-position: 50% 46%; }
  .hero__velo {
    clip-path: polygon(0 0, calc(50% - min(50%, 800px) + min(37.2%, 595.2px)) 0, calc(50% - min(50%, 800px) + min(10.8%, 172.8px)) 100%, 0 100%);
  }
  .hero__filo {
    clip-path: polygon(0 0, calc(50% - min(50%, 800px) + min(37.2%, 595.2px) + max(8px, 0.95vw)) 0, calc(50% - min(50%, 800px) + min(10.8%, 172.8px) + max(8px, 0.95vw)) 100%, 0 100%);
  }
  .hero__nome { top: 6.98cqw; font-size: 12.43cqw; }
  .hero__m { left: 18.13cqw; }
  .hero__motors { left: 33.13cqw; }
  .hero__auto, .hero__ombra { left: 23.34cqw; top: 12.82cqw; width: 61.6cqw; }
  .hero__anello { left: 18.65cqw; width: 70.4cqw; top: 36.6cqw; height: 6.1cqw; }
  .hero__testo {
    position: absolute; z-index: 6;
    left: calc(50% - min(50%, 800px) + min(7.13%, 114px));
    top: min(19.24vw, 307.8px);
    display: block; padding: 0;
  }
  .hero__titolo { font-size: min(3.18vw, 50.8px); line-height: 1.11; }
  .hero__giu { width: min(3.9vw, 62px); height: min(3.9vw, 62px); margin-top: min(1.5vw, 24px); }

  .prenota {
    margin: max(-5.37vw, -86px) auto 0;
    width: calc(100% - 2 * var(--margine));
    max-width: 1352px;
    grid-template-columns: 1fr 1fr 1.5fr;
    padding: 22px 26px;
    gap: 18px 26px;
  }
  .prenota { grid-template-columns: 1fr 1fr; }
  .prenota__gruppo--date { grid-column: 1 / -1; max-width: 460px; }
  .prenota__messaggio { grid-column: 1; }
  .prenota__azioni { grid-column: 2; }

  .formule__schede { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-inline: 0; padding: 0; }
  .flotta__nota br { display: inline; }
  .noscoring__alto { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.25fr); }
  .noscoring__destra { grid-column: 3; grid-row: 2; margin-top: 0; }
  .tacche { grid-row: 3; }
  .passo:nth-child(n+3)::before { display: block; }
  .passi { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .domande__colonne { grid-template-columns: 1fr 1fr; gap: 0; }
  .domande__col + .domande__col { border-left: 1px solid var(--tacca); padding-left: 28px; margin-left: 28px; }
  .lecce__azioni { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .offerte__griglia {
    grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto;
    overflow: visible; margin-inline: 0; padding: 0; gap: 20px;
  }
}

/* da 1000 px: la testata del design, col menu e il numero */
@media (min-width: 1000px) {
  :root { --alt-testata: 72px; }
  .testata__logo { width: 260px; margin-right: 0; }
  .testata__menu { display: none; }
  .menu-telefono { display: none !important; }
  .menu { display: block; margin-left: auto; }
  .menu__voci { display: flex; align-items: center; }
  .menu__voci li { display: flex; align-items: center; }
  .menu__voci li::before, .testata__tel::before { content: ""; width: 1px; height: 24px; background: var(--tacca); }
  .menu__voci a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 clamp(18px, 2.4vw, 36px);
    font-size: clamp(16px, 1.46vw, 21px); font-weight: 750; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  }
  .menu__voci a { background-image: linear-gradient(var(--giallo), var(--giallo)); background-size: 0 4px; background-position: 50% 82%; background-repeat: no-repeat; transition: background-size 0.2s var(--ease-out); }
  @media (hover: hover) and (pointer: fine) { .menu__voci a:hover { background-size: calc(100% - 2 * clamp(18px, 2.4vw, 36px)) 4px; } }
  .testata__tel { background: transparent; padding: 0; height: 44px; font-size: clamp(20px, 1.9vw, 27px); gap: 0; }
  .testata__tel img { width: 24px; height: 24px; margin: 0 10px 0 clamp(18px, 2.4vw, 36px); }
  .testata__tel::before { margin-right: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════════════
   da 1100 px: le sezioni come nel design da computer
   ════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
  .prenota {
    grid-template-columns: minmax(128px, 0.85fr) minmax(128px, 0.85fr) minmax(330px, 2.05fr) minmax(240px, 1.5fr) minmax(230px, 1.3fr);
    align-items: start;
    gap: 0;
    padding: 22px 24px 20px;
  }
  .prenota > * { padding: 0 22px; }
  .prenota > *:first-child { padding-left: 4px; }
  .prenota__gruppo--formula, .prenota__gruppo--date, .prenota__messaggio { border-left: 1px solid var(--bordo); }
  .prenota__gruppo--date { grid-column: auto; max-width: none; }
  .prenota__messaggio { grid-column: auto; background: none; border-radius: 0; padding-top: 30px; }
  .prenota__azioni { grid-column: auto; padding-right: 2px; }
  .prenota__scelte { flex-direction: column; gap: 2px; }
  .scelta span { min-height: 28px; padding: 0; border: 0; border-radius: 0; font-weight: 500; gap: 10px; }
  .scelta span::before {
    content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%;
    border: 1.5px solid var(--blu-testo); background: var(--bianco);
    transition: box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
  }
  .scelta input:checked + span { background: none; color: var(--blu); font-weight: 800; }
  .scelta input:checked + span::before { border-color: var(--blu); background: var(--blu); box-shadow: inset 0 0 0 2.5px var(--bianco); }
  .scelta:active span { transform: none; }
  .prenota__gruppo legend, .data__etichetta { margin-bottom: 6px; font-size: 20px; }
  .scelta span { font-size: 16.5px; min-height: 29px; }
  .data__campo { min-height: 42px; font-size: 15px; padding: 0 9px; gap: 6px; }
  .prenota__date { grid-template-columns: 1fr 16px 1fr; gap: 6px; }
  .prenota__nota { font-size: 14px; }
  .data__trattino { margin-bottom: 17px; }
  .prenota__anteprima { font-size: 16px; }
  .prenota__azioni .btn { min-height: 46px; font-size: 16.5px; }
  .calendario { left: 22px; }

  .formule { padding-top: 46px; }
  .formule__in { grid-template-columns: 19.4% 1fr; gap: 30px; align-items: start; }
  .formule__titolo { margin-top: 44px; }
  .formule__schede { gap: 30px; }
  .formula { min-height: 304px; padding: 22px 22px 30px; }
  .formula__ico { width: 94px; height: 94px; }
  .formula__48 { font-size: 150px; }
  .formula__nome { font-size: 44px; margin-top: 14px; }
  .formula__barra { width: 94px; margin: 16px 0 18px; }
  .formula__testo { font-size: 21px; line-height: 1.25; }

  .flotta { padding-top: 40px; }
  .flotta__in { grid-template-columns: 19.4% 16.8% 7.4% 1fr; grid-template-rows: auto auto; gap: 0; align-items: start; }
  .flotta__titolo { grid-column: 1; grid-row: 1; margin-top: 46px; }
  .flotta__tipi {
    grid-column: 2; grid-row: 1; flex-direction: column; gap: 3px; overflow: visible;
    margin: 30px 0 0; padding: 0 0 0 0; border-right: 1px solid var(--tacca);
  }
  .tipo { min-height: 46px; padding: 0 12px 0 18px; border: 0; border-radius: 0; background: none; font-size: 20px; gap: 18px; }
  .tipo img { width: 48px; height: 48px; }
  .tipo::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 5px; border-radius: 3px; background: var(--giallo); opacity: 0; transition: opacity 0.16s ease; }
  .tipo[aria-pressed="true"] { box-shadow: none; }
  .tipo[aria-pressed="true"]::before { opacity: 1; }
  @media (hover: hover) and (pointer: fine) { .tipo:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } }
  .flotta__contatore { grid-column: 3; grid-row: 1; align-self: center; margin: 40px 0 0 16px; }
  .contatore__ora { font-size: 44px; }
  .contatore__barra { height: 40px; width: 24px; }
  .contatore__tot { font-size: 24px; margin-top: 30px; }
  .palco { grid-column: 4; grid-row: 1; height: 290px; max-height: none; margin-top: 0; }
  .palco__nome { top: 3%; font-size: min(23cqw, calc(118cqw / var(--lettere, 3))); text-align: left; left: 0; right: auto; width: 84.5%; text-align: center; }
  .palco__piatto { left: 42.2%; width: 70%; bottom: 3%; }
  .palco__veicolo { left: 41.3%; width: 47%; bottom: 13%; }
  .palco__veicolo[data-pos="-1"], .palco__veicolo[data-pos="1"], .palco__veicolo[data-pos="-2"], .palco__veicolo[data-pos="2"] { opacity: 0.8; bottom: 36%; }
  .palco__veicolo[data-pos="-2"] { left: 10%; width: 11.5%; }
  .palco__veicolo[data-pos="-1"] { left: 21%; width: 12.5%; }
  .palco__veicolo[data-pos="1"] { left: 70%; width: 17%; }
  .palco__veicolo[data-pos="2"] { left: 88%; width: 20%; }
  .flotta__dati {
    grid-column: 3 / 5; grid-row: 2;
    display: flex; align-items: center; justify-content: flex-end; gap: 26px; margin-top: 8px;
  }
  .dati { gap: 26px; flex-wrap: nowrap; }
  .dato { font-size: 15.5px; }
  .dato strong { margin-left: 4px; }
  .btn--freccia { min-height: 44px; padding: 0 24px; }
  .flotta__nota { font-size: 13.5px; line-height: 1.3; }

  .offerte { padding-top: 44px; }
  .offerte__in { grid-template-columns: 21.6% 1fr; gap: 0 22px; align-items: start; }
  .offerte__testa { grid-row: 1 / 3; padding-top: 8px; }
  .filtri { flex-direction: column; align-items: flex-start; gap: 12px; margin: 36px 0 0; padding: 0; overflow: visible; }
  .filtro { min-width: 212px; min-height: 46px; font-size: 17px; }
  .offerte__griglia { grid-column: 2; gap: 20px 22px; }
  .offerte__vuoto, .offerte__nota { grid-column: 2; }
  .offerte__nota { margin-top: 10px; }
  .offerta__corpo { padding: 12px 16px 14px; }
  .offerta__nome { font-size: 19px; }
  .offerta__rata { font-size: 26px; }

  .noscoring { padding-top: 64px; }
  .noscoring__alto { grid-template-columns: 25.5% 23% minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 0; align-items: start; }
  .noscoring__sinistra .titolo { grid-column: 1; grid-row: 1; white-space: nowrap; }
  .noscoring__mesi { grid-column: 1; grid-row: 2 / 4; margin: 14px 0 0 50px; }
  .noscoring__48 { font-size: 156px; }
  .noscoring__mesi-t { font-size: 46px; margin-top: 4px; }
  .noscoring__chiavi { grid-column: 2; grid-row: 1 / 3; align-self: start; width: 100%; max-width: none; justify-self: start; margin: 18px 0 0; }
  .noscoring__destra { grid-column: 3; grid-row: 1 / 3; grid-template-columns: auto 1fr; align-items: center; gap: 22px 30px; padding: 14px 0 0 32px; margin: 0; }
  .pillola { padding: 12px 26px; font-size: 17.5px; }
  .pillola br { display: inline; }
  .inclusi { justify-content: end; gap: 34px; }
  .inclusi li { font-size: 17px; gap: 12px; }
  .inclusi img { width: 46px; height: 46px; }
  .noscoring__testo { grid-column: 1 / -1; text-align: right; font-size: 16px; }
  .tacche { grid-column: 2 / 4; grid-row: 3; align-self: end; margin: 26px 0 14px; height: 20px; }
  .passi { gap: 30px; margin-top: 58px; }
  .passo { padding: 22px 16px 24px; min-height: 186px; }
  .passo::before { top: -40px; height: 30px; }
  .passo__num { font-size: 68px; }
  .passo__titolo { font-size: 25px; margin-top: 10px; }
  .passo__testo { font-size: 17px; }

  .domande { padding-top: 58px; }
  .domande__in { grid-template-columns: 21.6% 1fr; gap: 30px; align-items: start; }
  .domande__colonne { padding-top: 4px; }
  .domande__col { gap: 24px; }
  .domanda dt { font-size: 18px; }
  .domanda dd { font-size: 16.5px; }
  .domande__col + .domande__col { padding-left: 40px; margin-left: 40px; }

  .lecce { padding: 50px 0 60px; }
  .lecce__in { grid-template-columns: 1fr 30%; gap: 0 26px; position: relative; }
  .lecce__titolo { position: absolute; left: var(--margine); top: 0; z-index: 2; }
  .lecce__plastico { grid-column: 1; grid-row: 1; margin-left: -18px; }
  .lecce__mappa { margin: 0; }
  .lecce__plastico figcaption { position: absolute; left: 22px; bottom: 8%; margin: 0; font-size: 15px; }
  .lecce__segno { left: 52.5%; top: 41%; }
  .pin { width: 76px; }
  .lecce__via { font-size: 17px; padding: 9px 20px; margin-left: -32px; transform: translateY(calc(-72px - 50%)); }
  .lecce__scheda { grid-column: 2; grid-row: 1; align-self: start; margin-top: 84px; padding: 28px 26px 26px; gap: 18px; }
  .lecce__scheda-titolo { font-size: 24px; }
  .lecce__azioni { grid-template-columns: 1fr; }
  .lecce__azioni .btn { min-height: 52px; font-size: 17px; }

  .piede { padding: 30px 0 22px; }
  .piede__in { gap: 18px; }
  .piede__strada { height: 34px; margin-top: 10px; }
  .piede__trattini { height: 8px; margin-top: -4px; background: repeating-linear-gradient(90deg, var(--bianco) 0 40px, transparent 40px 72px); }
  .piede__link { justify-content: space-between; flex-wrap: nowrap; }
  .piede__link li + li::before { content: ""; width: 1px; height: 16px; background: rgba(255, 255, 255, 0.35); }
  .piede__link li { flex: 1 1 auto; justify-content: center; }
  .piede__link li:first-child a { padding-left: 0; }
  .piede__link a { font-size: 15.5px; padding: 0 10px; }
  .piede__tel a { font-size: 17px; }
  .piede__link li::before { margin-right: auto; }
  .piede__legale { font-size: 13px; }
}

@media (min-width: 1100px) and (max-width: 1279px) {
  .prenota { grid-template-columns: minmax(118px, 0.8fr) minmax(118px, 0.8fr) minmax(300px, 2.1fr) minmax(200px, 1.4fr) minmax(210px, 1.3fr); }
  .prenota > * { padding: 0 14px; }
  .data__campo { font-size: 14px; }
  .filtro { min-width: 180px; }
  .inclusi { gap: 22px; }
  .piede__link a { font-size: 14px; padding: 0 6px; }
}

/* telefono stretto */
@media (max-width: 380px) {
  .prenota { padding: 18px 14px 16px; }
  .scelta span { padding: 0 12px; font-size: 14.5px; }
  .inclusi { gap: 12px; }
  .inclusi li { font-size: 14px; gap: 7px; }
  .inclusi img { width: 28px; height: 28px; }
}

/* icona ufficiale di WhatsApp nei pulsanti (quando c'è il file assets/img/icone/whatsapp.svg) */
.ico-wa { width: 20px; height: 20px; flex: none; }

/* ════════════════════════════════════════════════════════════════════════════════════
   STEP 5-bis · il movimento (regia di Giulia; come: regole di Emil Kowalski, 09 § 0-bis-2)
   Solo transform e opacity; uscite più veloci delle entrate; hover solo col mouse.
   ════════════════════════════════════════════════════════════════════════════════════ */
/* l'auto della hero: un gruppo che gira allo scroll e col mouse */
.hero__gruppo { position: absolute; left: 7cqw; top: 20cqw; width: 86cqw; aspect-ratio: 2199 / 1203; transform-origin: 50% 92%; }
.hero__gruppo .hero__auto, .hero__gruppo .hero__ombra { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.hero__auto--fianco { opacity: 0; }
@media (min-width: 760px) { .hero__gruppo { left: 23.34cqw; top: 12.82cqw; width: 61.6cqw; } }

/* l'apertura della hero (CSS, non aspetta il JavaScript; l'immagine di fondo non parte mai da opacity 0) */
@keyframes tenda { from { transform: translate(-38%, 22%); } to { transform: none; } }
@keyframes sale { from { opacity: 0; transform: translateY(42%); } to { opacity: 1; transform: none; } }
@keyframes arriva { from { opacity: 0; transform: translateX(7%) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes compare { from { opacity: 0; } to { opacity: 1; } }
@keyframes anello { from { opacity: 0; transform: scaleX(0.55); } to { opacity: 1; transform: none; } }
@keyframes su { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes pulsa { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.hero__velo { animation: tenda 0.9s var(--ease-out) backwards; }
.hero__filo { animation: tenda 0.9s 0.08s var(--ease-out) backwards; }
.hero__nome .lettera { display: inline-block; animation: sale 0.7s calc(0.25s + var(--i) * 60ms) var(--ease-out) both; }
.hero__gruppo .hero__auto--davanti { animation: arriva 0.8s 0.55s var(--ease-out) backwards; }
.hero__gruppo .hero__ombra { animation: compare 0.6s 1.05s ease backwards; }
.hero__anello { animation: anello 0.8s 1s var(--ease-out) backwards; transform-origin: 50% 50%; }
.hero__titolo { animation: su 0.7s 1.15s var(--ease-out) backwards; }
.hero__giu { animation: su 0.7s 1.3s var(--ease-out) backwards; }
.hero__giu img { animation: pulsa 2.4s 2.2s ease-in-out infinite; }
.prenota { animation: su 0.8s 1.2s var(--ease-out) backwards; }

/* testata: bianca semitrasparente in cima, piena scendendo; si nasconde scendendo, torna risalendo */
.testata { background: rgba(255, 255, 255, 0.88); transition: transform 0.3s var(--ease-out), box-shadow 0.25s ease, background-color 0.25s ease; }
.testata-scorsa .testata { background: var(--bianco); }
.testata-nascosta .testata { transform: translateY(-100%); transition: transform 0.2s var(--ease-in-out), box-shadow 0.25s ease; }

/* entrate allo scroll: una volta sola */
.js .reveal, .js [data-cascata] > * { opacity: 0; transform: translateY(32px); transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal--destra { transform: translateX(48px); }
.js .reveal.in, .js [data-cascata].in > * { opacity: 1; transform: none; }
.js .tacche[data-cascata] > * { transform: scaleY(0); transform-origin: 50% 100%; transition: opacity 0.3s ease, transform 0.45s var(--ease-out); transition-delay: calc(var(--i, 0) * 14ms); }
.js .tacche[data-cascata].in > * { transform: none; }
.js .passi[data-cascata] > * { transition-delay: calc(0.35s + var(--i, 0) * 140ms); }
.passo::before { transform-origin: 50% 100%; }
.js .passi[data-cascata] > .passo::before { transform: scaleY(0); transition: transform 0.5s var(--ease-out); transition-delay: inherit; }
.js .passi[data-cascata].in > .passo::before { transform: none; }
.lecce, .flotta, .offerte, .formule { overflow-x: clip; }

/* il pannello: l'anteprima si scrive parola per parola; «Invia» si alza appena col mouse */
@keyframes parola { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.prenota__riepilogo .parola { display: inline-block; animation: parola 0.28s calc(var(--i) * 45ms) var(--ease-out) both; }
@media (hover: hover) and (pointer: fine) { .prenota [data-invia]:hover { transform: translateY(-2px); } }
/* il filo giallo del calendario fra le due date */
.cal__giorno.periodo { background: transparent; }
.cal__giorno.periodo::before, .cal__giorno.inizio:not(.fine)::after, .cal__giorno.fine:not(.inizio)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 4px; background: var(--giallo); z-index: -1;
}
.cal__griglia { isolation: isolate; }
.cal__giorno.periodo::before { transform-origin: 0 50%; animation: filo 0.22s calc(var(--n, 0) * 22ms) var(--ease-out) both; }
.cal__giorno.inizio:not(.fine)::after { left: 50%; }
.cal__giorno.fine:not(.inizio)::after { right: 50%; }
@keyframes filo { from { transform: scaleX(0); } to { transform: none; } }

/* formule: la scheda si alza col mouse, il filo giallo cresce */
.formula { transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease; }
.formula__barra { transition: transform 0.3s var(--ease-out); }
.formula__48, .noscoring__48, .contatore__ora { font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .formula:hover { transform: translateY(-6px); box-shadow: 0 2px 6px rgba(20, 34, 74, 0.05), 0 30px 50px -28px rgba(20, 34, 74, 0.38); }
  .formula:hover .formula__barra { transform: scaleX(1.45); }
}

/* il palco: le posizioni sull'arco solo con transform (si muovono, non saltano) */
.palco { touch-action: pan-y; }
.palco__veicolo, .palco__veicolo[data-pos] {
  left: 50%; width: 66%; bottom: 9%; transform-origin: 50% 100%;
  transition: transform 0.7s var(--ease-in-out), opacity 0.45s ease;
}
.palco__veicolo[data-pos="0"] { transform: translateX(-50%); opacity: 1; }
.palco__veicolo[data-pos="-1"] { transform: translate(calc(-50% - 56%), -50%) scale(0.394); opacity: 0.8; }
.palco__veicolo[data-pos="1"] { transform: translate(calc(-50% + 56%), -50%) scale(0.394); opacity: 0.8; }
.palco__veicolo[data-pos="-2"] { transform: translate(calc(-50% - 92%), -58%) scale(0.3); opacity: 0; }
.palco__veicolo[data-pos="2"] { transform: translate(calc(-50% + 92%), -58%) scale(0.3); opacity: 0; }
.palco__nome { transition: opacity 0.3s ease; }
.palco__nome.cambia { opacity: 0; transition-duration: 0.15s; }
@keyframes rullo { from { opacity: 0; transform: translateY(45%); } to { opacity: 1; transform: none; } }
.contatore__ora { display: inline-block; }
.contatore__ora.gira { animation: rullo 0.45s var(--ease-out) both; }
@media (min-width: 1100px) {
  .palco__veicolo, .palco__veicolo[data-pos] { left: 41.3%; width: 47%; bottom: 13%; }
  .palco__veicolo[data-pos="-2"] { transform: translate(calc(-50% - 54.4%), -31.5%) scale(0.245); opacity: 0.8; }
  .palco__veicolo[data-pos="-1"] { transform: translate(calc(-50% - 29.9%), -31.5%) scale(0.266); opacity: 0.8; }
  .palco__veicolo[data-pos="1"] { transform: translate(calc(-50% + 79.1%), -31.5%) scale(0.362); opacity: 0.8; }
  .palco__veicolo[data-pos="2"] { transform: translate(calc(-50% + 120.6%), -31.5%) scale(0.426); opacity: 0.8; }
}

/* offerte: i filtri fanno scivolare le schede; col mouse la foto si avvicina e sotto il prezzo cresce il filo giallo */
.offerta { transition: opacity 0.18s ease, transform 0.18s ease; }
.offerta.esce { opacity: 0; transform: scale(0.96); }
.offerta__foto img { transition: transform 0.45s var(--ease-out); }
.offerta__rata::after { content: ""; display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: var(--giallo); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .offerta:hover .offerta__foto img { transform: scale(1.04); }
  .offerta:hover .offerta__rata::after { transform: none; }
}

/* No scoring: il 48 a rulli, la chiave che dondola */
.rullo { display: inline-block; height: 0.86em; overflow: hidden; vertical-align: top; }
.rullo__striscia { display: flex; flex-direction: column; line-height: 0.86; transition: transform 1.6s var(--ease-in-out); }
.noscoring__chiavi img { transform-origin: 30% 30%; animation: dondola 4.5s ease-in-out infinite alternate; }
@keyframes dondola { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.noscoring__chiavi { transition: transform 0.4s var(--ease-out), opacity 0.7s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .noscoring__chiavi.in:hover { transform: perspective(900px) rotateY(16deg); } }

/* Lecce: il segnaposto cade e rimbalza una volta, poi un anello pulsa piano */
.lecce__onda { position: absolute; left: 0; top: 0; width: 70px; height: 22px; margin: -11px 0 0 -35px; border-radius: 50%; border: 2px solid var(--giallo); opacity: 0; }
@keyframes cade { 0% { opacity: 0; transform: translate(-50%, -100%) translateY(-90px); } 60% { opacity: 1; transform: translate(-50%, -100%) translateY(6px); } 80% { transform: translate(-50%, -100%) translateY(-10px); } 100% { opacity: 1; transform: translate(-50%, -100%); } }
@keyframes onda { 0% { opacity: 0.7; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.6); } }
.js .lecce__segno .pin { opacity: 0; }
.js .lecce__segno .lecce__via { opacity: 0; transition: opacity 0.5s 0.7s ease; }
.js .lecce__segno.in .pin { animation: cade 0.9s var(--ease-out) both; }
.js .lecce__segno.in .lecce__via { opacity: 1; }
.js .lecce__segno.in .lecce__onda { animation: onda 2.6s 1s ease-out infinite; }
.lecce__mappa > img { transform-origin: 50% 100%; }

/* il piede: i trattini scorrono lentissimi (non si fermano col mouse) */
@keyframes strada { from { transform: translateX(0); } to { transform: translateX(-54px); } }
.piede__trattini { animation: strada 5s linear infinite; }
@media (min-width: 1100px) { @keyframes strada-larga { from { transform: translateX(0); } to { transform: translateX(-72px); } } .piede__trattini { animation-name: strada-larga; animation-duration: 6s; } }

/* riduci movimento: meno movimento, non zero (restano le dissolvenze) */
@media (prefers-reduced-motion: reduce) {
  .hero__velo, .hero__filo { animation: none; }
  .hero__nome .lettera, .hero__gruppo .hero__auto--davanti, .hero__anello, .hero__titolo, .hero__giu, .prenota { animation-name: compare; }
  .hero__giu img, .noscoring__chiavi img, .piede__trattini { animation: none; }
  .js .reveal, .js [data-cascata] > *, .js .reveal--destra, .js .tacche[data-cascata] > *, .js .passi[data-cascata] > .passo::before { transform: none; }
  .palco__veicolo, .palco__veicolo[data-pos] { transition: opacity 0.3s ease; }
  .js .lecce__segno.in .pin { animation-name: compare; transform: translate(-50%, -100%); }
  .js .lecce__segno.in .lecce__onda { animation: none; }
  .rullo__striscia { transition: none; }
  .testata, .testata-nascosta .testata { transform: none; }
}

.js [data-cascata] > .offerta.esce { opacity: 0; transform: scale(0.96); transition: opacity 0.18s ease, transform 0.18s ease; transition-delay: 0s; }

/* resti del confronto, giro 2: pannello largo abbastanza, niente a capo nei pulsanti; il contatore libero */
.prenota__azioni .btn, .scelta span, .btn--freccia, .lecce__tel a, .testata__tel span { white-space: nowrap; }
@media (min-width: 1100px) {
  .prenota { grid-template-columns: max-content max-content minmax(270px, 1fr) minmax(256px, max-content); }
  .prenota__messaggio { grid-column: 1 / 4; grid-row: 2; border-left: 0; padding: 14px 0 0 4px; }
  .prenota__azioni { grid-column: 4; grid-row: 1 / 3; }
  .flotta__in { grid-template-columns: 19.4% 16.8% 9.5% 1fr; }
  .flotta__contatore { position: relative; z-index: 4; margin-left: 12px; white-space: nowrap; }
  .contatore__ora { font-size: 38px; }
  .contatore__tot { font-size: 21px; margin-top: 26px; }
  .palco__veicolo[data-pos="-2"] { transform: translate(calc(-50% - 47.4%), -31.5%) scale(0.245); }
  .palco__veicolo[data-pos="-1"] { transform: translate(calc(-50% - 25.1%), -31.5%) scale(0.266); }
  .flotta__dati { flex-wrap: wrap; row-gap: 10px; }
  .flotta__nota { max-width: 190px; }
}
@media (min-width: 1366px) {
  .prenota { grid-template-columns: max-content max-content minmax(300px, 1.5fr) minmax(200px, 1fr) minmax(256px, max-content); }
  .prenota__messaggio { grid-column: auto; grid-row: auto; border-left: 1px solid var(--bordo); padding: 30px 22px 0; }
  .prenota__azioni { grid-column: auto; grid-row: auto; }
  .contatore__ora { font-size: 44px; }
  .contatore__tot { font-size: 24px; margin-top: 30px; }
}

/* step 6: le schede delle formule sono link; la riga dei due link di «Dove siamo»; le scelte spente col rent to buy */
.formula { position: relative; }
.formula__link { display: flex; flex-direction: column; align-items: center; width: 100%; color: inherit; text-decoration: none; }
.formula__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.formula__link:focus-visible { outline: none; }
.formula:focus-within { outline: 3px solid var(--blu); outline-offset: 3px; }
.scelta input:disabled + span { opacity: 0.4; cursor: not-allowed; }
.prenota__date[hidden] { display: none; }
.lecce__righe a { text-decoration: none; }
.lecce__link { font-size: 15px; font-weight: 650; color: var(--blu-testo); text-align: center; }
.lecce__link a { color: var(--blu); font-weight: 750; text-underline-offset: 3px; }
.flotta__nota a, .noscoring__testo a, .offerte__nota a { font-weight: 800; color: var(--blu); text-underline-offset: 3px; }
.offerte__nota a { margin-left: 6px; font-style: normal; }
.domanda dd a, .passo__testo a { font-weight: 750; color: var(--blu); text-underline-offset: 3px; }
.menu-telefono__indirizzo a { text-decoration: none; }
@media (min-width: 1100px) { .piede__link { flex-wrap: wrap; justify-content: center; row-gap: 2px; } .piede__link li { flex: 0 0 auto; } }

.lettera::before { content: attr(data-l); }

@media (min-width: 1000px) { .menu__voci a { padding: 0 clamp(14px, 1.9vw, 30px); } .testata__tel { font-size: clamp(19px, 1.75vw, 25px); } .testata__tel img { margin-left: clamp(14px, 1.9vw, 30px); } .testata__in { gap: 0; } }

/* ════════════════════════════════════════════════════════════════════════════════════
   STEP 6-bis · le pagine interne, coi pezzi della home (05/11/2026): nessuna classe nuova.
   Lo stesso pezzo con meno o più elementi si adatta da solo (:has, il numero dei figli, il posto
   in cui sta). Il movimento è quello del 5-bis.
   ════════════════════════════════════════════════════════════════════════════════════ */

/* la home: le parole dell'anteprima entrano una per una (la classe giusta); da 1100 a 1365 px il
   cartellino e le tre icone non stanno in una riga (uscivano a destra): uno sotto l'altro */
.prenota__anteprima .parola { display: inline-block; animation: parola 0.28s calc(var(--i) * 45ms) var(--ease-out) both; }
@media (min-width: 1100px) and (max-width: 1365px) {
  .noscoring__destra { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .inclusi { justify-content: start; }
  .noscoring__testo { text-align: left; }
}

/* la voce della pagina aperta: il filo giallo resta */
@media (min-width: 1000px) { .menu__voci a[aria-current="page"] { background-size: calc(100% - 2 * clamp(14px, 1.9vw, 30px)) 4px; } }
.menu-telefono__voci a[aria-current="page"], .piede__link a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--giallo); text-decoration-thickness: 4px; text-underline-offset: 7px;
}

/* ── la hero delle pagine interne: la hero della home senza l'auto, più bassa ─────── */
.hero:not(:has(.hero__comp)) { --alta: clamp(340px, 31vw, 460px); }
.hero:not(:has(.hero__comp)) .hero__scena { height: 56vw; max-height: 330px; }
.hero__scena:has(.palco) { height: 72vw; max-height: 420px; }
.hero:not(:has(.hero__comp)) .hero__sfondo,
.hero:not(:has(.hero__comp)) .hero__velo img { object-position: var(--fuoco, 50% 50%); }
.hero__scena:not(:has(.hero__sfondo, .palco)) { display: none; }          /* senza foto, da telefono: solo il titolo */
.hero__velo:not(:has(img))::after { background: var(--bianco); }   /* fascia bianca piena dove non c'è la copia sfocata della foto */
.hero:not(:has(.hero__comp)) .hero__testo { display: block; padding-top: 14px; padding-bottom: 4px; }
.hero__scena:not(:has(.hero__sfondo, .palco)) + .hero__testo { padding-top: 34px; }
.hero:not(:has(.hero__comp)) .hero__titolo { font-size: clamp(31px, 8.4vw, 38px); line-height: 1.08; animation-delay: 0.25s; }
.hero:not(:has(.hero__comp)) .offerte__sotto { margin-top: 12px; font-size: 17px; line-height: 1.45; font-weight: 550; animation: su 0.7s 0.38s var(--ease-out) backwards; }
.hero:not(:has(.hero__comp)) .offerte__sotto + .offerte__sotto { margin-top: 6px; }
.hero:not(:has(.hero__comp)) .lecce__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; animation: su 0.7s 0.5s var(--ease-out) backwards; }

/* la flotta: la hero è il palco della home (il veicolo sul piatto, il nome gigante dietro, il giro ogni 4 secondi) */
.hero .palco { position: absolute; left: 0; right: 0; top: 13%; bottom: 3%; height: auto; max-height: none; margin: 0; z-index: 6; }
.hero .flotta__contatore { position: absolute; z-index: 7; right: 16px; top: 12px; margin: 0; }

@media (min-width: 760px) {
  .hero:not(:has(.hero__comp)) { --sx: max(var(--margine), calc(50% - var(--contenitore) / 2)); --lt: min(580px, 50%); }
  .hero:not(:has(.hero__comp)) .hero__scena { aspect-ratio: auto; height: var(--alta); max-height: none; }
  .hero__scena:not(:has(.hero__sfondo, .palco)) { display: block; height: clamp(290px, 24vw, 350px); }
  .hero:not(:has(.hero__comp)) .hero__velo { clip-path: polygon(0 0, calc(var(--sx) + var(--lt) + 200px) 0, calc(var(--sx) + var(--lt) + 40px) 100%, 0 100%); }
  .hero:not(:has(.hero__comp)) .hero__filo { clip-path: polygon(0 0, calc(var(--sx) + var(--lt) + 200px + max(8px, 0.95vw)) 0, calc(var(--sx) + var(--lt) + 40px + max(8px, 0.95vw)) 100%, 0 100%); }
  .hero:not(:has(.hero__comp)) .hero__sfondo {
    object-fit: var(--adatta-pc, cover); object-position: var(--fuoco-pc, var(--fuoco, 50% 50%));
    -webkit-mask-image: var(--maschera-pc, none); mask-image: var(--maschera-pc, none);
  }
  .hero:not(:has(.hero__comp)) .hero__testo {
    position: absolute; z-index: 6; left: var(--sx); top: 0; bottom: 0; width: var(--lt);
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 0 20px;
  }
  .hero__scena:not(:has(.hero__sfondo, .palco)) + .hero__testo { padding-top: 0; }
  .hero:not(:has(.hero__comp)) .hero__titolo { font-size: clamp(32px, 3.6vw, 54px); }
  .hero:not(:has(.hero__comp)) .offerte__sotto { font-size: clamp(17px, 1.35vw, 20px); max-width: 30em; }
  .hero:not(:has(.hero__comp)) .lecce__azioni { margin-top: 26px; }
  .hero:not(:has(.hero__comp)) .lecce__azioni .btn { min-height: 52px; padding: 0 26px; font-size: 17px; }

  .hero__scena:has(.palco) { height: var(--alta); max-height: none; }
  .hero .palco { left: auto; right: var(--sx); top: 9%; bottom: 3%; width: min(50%, 720px); }
  .hero .flotta__contatore { right: var(--sx); top: 7%; }
}
@media (min-width: 1100px) {
  .hero .palco__nome { left: 0; right: 0; width: auto; top: 2%; font-size: min(22cqw, calc(118cqw / var(--lettere, 3))); }
  .hero .palco__piatto { left: 50%; width: 80%; bottom: 2%; }
  .hero .palco__veicolo, .hero .palco__veicolo[data-pos] { left: 50%; width: 56%; bottom: 10%; }
  .hero .palco__veicolo[data-pos="0"] { transform: translateX(-50%); opacity: 1; }
  .hero .palco__veicolo[data-pos="-1"] { transform: translate(calc(-50% - 60%), -62%) scale(0.36); opacity: 0.8; }
  .hero .palco__veicolo[data-pos="1"] { transform: translate(calc(-50% + 60%), -62%) scale(0.36); opacity: 0.8; }
  .hero .palco__veicolo[data-pos="-2"] { transform: translate(calc(-50% - 92%), -70%) scale(0.28); opacity: 0; }
  .hero .palco__veicolo[data-pos="2"] { transform: translate(calc(-50% + 92%), -70%) scale(0.28); opacity: 0; }
  .hero .flotta__contatore { white-space: nowrap; }
}

/* ── «titolo a sinistra, contenuto a destra» (le formule della home) ─────────────── */
/* le schede: due invece di tre, o con un titolo h2 (ogni scheda è una parte della pagina) */
.formule__schede:has(> :last-child:nth-child(2)),
.formule__schede:has(h2) { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); overflow: visible; margin-inline: 0; padding: 4px 0 0; gap: 16px; }
.formula > .btn { margin-top: auto; }
.formula > .formula__testo:has(+ .btn), .formula > .formula__testo:has(+ .lecce__link) { margin-bottom: 18px; }
.formula > .lecce__link { margin-top: auto; }
.formula:not(:has(.formula__nome)) .formula__barra { margin-top: 18px; }
.formula > h2.formula__nome { font-size: clamp(26px, 7vw, 30px); }
.formula:has(> h2) .formula__testo { font-size: 16.5px; line-height: 1.42; }
.formula__testo + .formula__testo { margin-top: 8px; }
.formula .dati { justify-content: center; gap: 14px; }
.formula .dati img { width: 72px; height: 72px; }
@media (min-width: 760px) {
  .formule__schede:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1000px) {
  .formule__schede:has(h2):has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1100px) {
  .formule__in:not(:has(> .titolo)) { grid-template-columns: minmax(0, 1fr); }
  .formule__schede:has(> :last-child:nth-child(2)), .formule__schede:has(h2) { gap: 30px; }
  .formula > h2.formula__nome { font-size: 33px; }
  .formula:has(> h2) .formula__testo { font-size: 18px; }
  .formula .dati img { width: 94px; height: 94px; }
}

/* il testo e i pulsanti accanto al titolo (nelle pagine interne la colonna del titolo è più larga: i titoli sono più lunghi) */
@media (min-width: 1100px) {
  .formule__in:not(:has(.formula__link)):has(> .titolo) { grid-template-columns: 26% minmax(0, 1fr); column-gap: 44px; }
  .formule__in:has(> .titolo) > p { grid-column: -2 / -1; }
}
.formule__in > .noscoring__testo { margin-top: -4px; font-size: 16px; }
.formule__in:has(> .prenota) > div { margin-top: 0; }
.formule__in > div > .offerte__sotto:first-child { margin-top: 0; }
.formule__in > div > .noscoring__testo { margin-top: 12px; font-size: 16px; }
.formule__in > div > .btn, .formule__in > .btn { margin-top: 22px; justify-self: start; }
.formule__in > .btn { margin-top: 4px; }
.formule__in > div > .lecce__link { margin-top: 16px; text-align: left; }
@media (min-width: 1100px) {
  .formule__in > div { margin-top: 46px; }
  .formule__in > div > .offerte__sotto { font-size: 20px; }
  .formule__in > div > .noscoring__testo { font-size: 17px; }
  .formule__in:has(> .titolo) > .btn { grid-column: -2 / -1; }
}

/* il pannello Prenota sotto il suo titolo (non sulla hero) */
.formule__in:has(> .prenota) { grid-template-columns: minmax(0, 1fr); }
.formule__in > .prenota { margin: 4px 0 0; width: 100%; max-width: none; animation: none; }
@media (min-width: 1100px) { .formule__in:has(> .prenota) .formule__titolo { margin-top: 0; } }

/* i passi fuori dal blocco «No scoring»: da telefono uno sotto l'altro, col filo giallo fra un cartello e l'altro */
@media (max-width: 759px) {
  .passi { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .passo:nth-child(n+3)::before { display: block; }
  .noscoring__alto + .passi { grid-template-columns: 1fr 1fr; gap: 12px; }
  .noscoring__alto + .passi .passo:nth-child(n+3)::before { display: none; }
}
.passo:not(:has(.passo__titolo)) .passo__testo { margin-top: 10px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.formule__in:has(> .passi > :nth-child(5)) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .passi:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 56px; }
}
@media (min-width: 1100px) {
  .formule__in > .passi { margin-top: 84px; }
  .formule__in:has(> .passi > :nth-child(5)) > .passi { margin-top: 58px; }
  .formule__in:has(> .passi > :nth-child(5)) .formule__titolo { margin-top: 0; }
  .passi:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  .passo:not(:has(.passo__titolo)) .passo__testo { font-size: 17px; }
}

/* la barra a icone fuori dal blocco «No scoring» */
.formule__in .inclusi { margin-top: 20px; grid-template-columns: minmax(0, 1fr); justify-content: start; gap: 16px; }
.formule__in .inclusi li { font-size: 17px; line-height: 1.25; }
.formule__in .inclusi img { width: 44px; height: 44px; }
.formule__in .inclusi .pillola { padding: 9px 16px; font-size: 16.5px; }
@media (min-width: 760px) {
  .formule__in .inclusi { grid-template-columns: repeat(3, auto); gap: 22px 44px; }
  .formule__in .inclusi:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .formule__in .inclusi li { font-size: 19px; }
  .formule__in .inclusi img { width: 54px; height: 54px; }
}

/* il riquadro di «Dove siamo» da solo, accanto al titolo: le righe e i pulsanti */
.formule__in > .lecce__scheda { align-self: start; }
.lecce__righe li > span, .lecce__righe li > p { min-width: 0; }
.lecce__righe li > span a { text-decoration: underline; text-underline-offset: 3px; font-weight: 750; }
.formula__testo a { font-weight: 800; color: var(--blu); text-underline-offset: 3px; }
.offerta__nome:has(img) + .offerta__dati { font-size: 15px; line-height: 1.4; }
@media (min-width: 1100px) {
  .formule__in > .lecce__scheda { margin-top: 40px; grid-template-columns: minmax(0, 1fr) minmax(250px, auto); align-items: center; column-gap: 44px; padding: 30px 32px; }
  .formule__in > .lecce__scheda > .lecce__azioni { grid-column: 2; grid-row: 1 / span 2; }
}

/* la colonna delle categorie da sola (senza il palco): voci che portano alla flotta */
a.tipo { text-decoration: none; }
.flotta__in:not(:has(.palco)) .flotta__nota { grid-column: 1 / -1; font-size: 15px; }
@media (min-width: 1100px) {
  .flotta__in:not(:has(.palco)) { grid-template-columns: 19.4% minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 30px; }
  .flotta__in:not(:has(.palco)) .flotta__titolo { grid-row: 1 / 3; }
  .flotta__in:not(:has(.palco)) .flotta__tipi { grid-column: 2; grid-row: 1; flex-direction: row; flex-wrap: wrap; gap: 6px 0; margin: 52px 0 0; border-right: 0; }
  .flotta__in:not(:has(.palco)) .tipo { padding: 0 30px 0 22px; border-right: 1px solid var(--tacca); border-radius: 0; }
  .flotta__in:not(:has(.palco)) .tipo:last-child { border-right: 0; }
  .flotta__in:not(:has(.palco)) .flotta__nota { grid-column: 2; grid-row: 2; margin-top: 22px; font-size: 16px; }
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) { .flotta__in:not(:has(.palco)) .tipo:hover::before { opacity: 1; } }

/* la flotta: le schede delle offerte, col veicolo sul piatto girevole e «Immagine illustrativa» sull'angolo */
.offerta__foto:has(.palco__piatto) { aspect-ratio: 16 / 9; background: linear-gradient(180deg, var(--bianco) 35%, var(--fondo)); }
.offerta__foto .palco__piatto { left: 50%; bottom: 6%; width: 84%; height: auto; transform: translateX(-50%); }
.offerta__foto:has(.palco__piatto) > img:not(.palco__piatto) { position: absolute; left: 50%; bottom: 13%; width: 74%; height: auto; transform: translateX(-50%); object-fit: contain; }
.offerta__foto:has(.palco__piatto) .offerta__illustrativa { color: var(--blu-testo); text-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .offerta:hover .offerta__foto:has(.palco__piatto) > img:not(.palco__piatto) { transform: translateX(-50%) scale(1.05); }
  .offerta:hover .offerta__foto .palco__piatto { transform: translateX(-50%); }
}
.offerta__nome:has(img) { display: flex; align-items: center; gap: 10px; font-size: 21px; }
.offerta__nome img { width: 36px; height: 36px; flex: none; }
.offerta__piede:has(> .btn--freccia:only-child) { padding-top: 12px; }

/* le offerte e la flotta subito sotto la hero: da telefono due per riga (le offerte) o una (la flotta), mai di lato */
@media (max-width: 899px) {
  .hero + .offerte .offerte__griglia { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding: 4px 0 0; }
  .hero + .offerte:not(:has(.filtri)) .offerte__griglia { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hero + .offerte:has(.filtri) .offerte__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hero + .offerte:has(.filtri) .offerta:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hero + .offerte:has(.filtri) .offerta__foto { aspect-ratio: 3 / 2; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hero + .offerte:not(:has(.filtri)) .offerte__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero + .offerte:not(:has(.filtri)) .offerta:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .hero + .offerte:has(.filtri) .offerta__corpo { padding: 10px 10px 12px; gap: 5px; }
  .hero + .offerte:has(.filtri) .offerta__nome { font-size: 15.5px; }
  .hero + .offerte:has(.filtri) .offerta__dati { font-size: 12.5px; line-height: 1.35; }
  .hero + .offerte:has(.filtri) .offerta__prezzo { flex-direction: column; align-items: flex-start; gap: 3px; }
  .hero + .offerte:has(.filtri) .offerta__rata { font-size: 18.5px; }
  .hero + .offerte:has(.filtri) .offerta__anticipo { text-align: left; }
  .hero + .offerte:has(.filtri) .offerta__anticipo br { display: none; }
  .hero + .offerte:has(.filtri) .offerta__piede { flex-direction: column; align-items: stretch; gap: 8px; }
  .hero + .offerte:has(.filtri) .offerta__piede p { font-size: 12.5px; line-height: 1.35; }
  .hero + .offerte:has(.filtri) .offerta__piede .btn--mini { min-height: 38px; font-size: 14px; }
  .hero + .offerte:not(:has(.filtri)) .offerta__foto { aspect-ratio: 2 / 1; }
}

/* «No scoring» da solo (senza i 48 mesi accanto): il titolo col cartellino giallo, la chiave, la frase */
.titolo .pillola { display: inline-block; vertical-align: middle; margin-top: 10px; font-size: 17px; letter-spacing: 0; }
.noscoring__alto:not(:has(.noscoring__mesi)) .noscoring__testo { font-size: 18px; font-weight: 550; text-align: left; }
@media (min-width: 1100px) {
  .noscoring__alto:not(:has(.noscoring__mesi)) .noscoring__destra { align-self: center; padding-top: 0; }
  .noscoring__alto:not(:has(.noscoring__mesi)) .noscoring__testo { font-size: 21px; line-height: 1.45; }
  .titolo .pillola { font-size: 19px; padding: 11px 22px; }
}
/* i 48 mesi da soli (senza la chiave): il numero a sinistra, il titolo e la frase accanto */
.noscoring__alto:not(:has(.noscoring__chiavi)) { grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; }
.noscoring__alto:not(:has(.noscoring__chiavi)) .noscoring__mesi { grid-column: 1; grid-row: 1 / 3; align-self: center; margin: 0; }
.noscoring__alto:not(:has(.noscoring__chiavi)) .noscoring__sinistra .titolo { grid-column: 2; grid-row: 1; align-self: end; white-space: normal; }
.noscoring__alto:not(:has(.noscoring__chiavi)) .noscoring__destra { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; }
.noscoring__alto:not(:has(.noscoring__chiavi)) .noscoring__testo { font-size: 17px; text-align: left; }
@media (min-width: 760px) {
  .noscoring__alto:not(:has(.noscoring__chiavi)) .noscoring__destra { grid-column: 2; grid-row: 2; align-self: start; margin-top: 10px; padding: 0; }
}
@media (min-width: 1100px) {
  .noscoring__alto:not(:has(.noscoring__chiavi)) { grid-template-columns: 25.5% minmax(0, 1fr); }
  .noscoring__alto:not(:has(.noscoring__chiavi)) .noscoring__mesi { margin: 0 0 0 50px; justify-self: start; }
  .noscoring__alto:not(:has(.noscoring__chiavi)) .noscoring__testo { font-size: 21px; }
}
/* le tacche e i passi del rent to buy, sotto il loro titolo */
.noscoring > .contenitore > .titolo + .tacche { margin-top: 26px; }

/* «Ci vediamo a Lecce» con un'altra foto al posto del plastico (chi siamo) */
.lecce__plastico:not(:has(.lecce__segno)) .lecce__mappa { margin-inline: 0; border-radius: var(--raggio); overflow: hidden; }
.lecce__plastico:not(:has(.lecce__segno)) .lecce__mappa > img { aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 1100px) {
  .lecce__plastico:not(:has(.lecce__segno)) { margin-left: 0; }
  .lecce__in:has(.lecce__plastico:not(:has(.lecce__segno))) .lecce__titolo { left: calc(var(--margine) + 34px); top: 30px; }
}
.lecce__righe .pin { width: 28px; height: 40px; transform: none; }

/* le domande della home come elenco dei contatti (etichetta e valore) */
.domanda dt a { text-underline-offset: 3px; }
.domande__in > div > .noscoring__testo { margin-top: 26px; font-size: 16px; }
.domande__in > div > .noscoring__testo + .noscoring__testo { margin-top: 8px; }
@media (min-width: 1100px) { .domande__in > div > .noscoring__testo { font-size: 17px; } }

/* collaudo 6-bis: la riga dei dati della flotta occupa tutta la larghezza accanto al titolo (da computer) e va
   una sotto l'altra da telefono (niente riga con una voce sola); le tabelle legali scorrono nel loro riquadro */
@media (max-width: 759px) { .flotta__dati .dati { flex-direction: column; align-items: flex-start; gap: 8px; } }
@media (min-width: 1100px) { .flotta__dati { grid-column: 2 / 5; } }

/* ════════════════════════════════════════════════════════════════════════════════════
   STEP 6-quater · il salto di livello (05/11/2026) — Design/SALTO-DI-LIVELLO.md
   Si rifinisce il design di Giulia, non si toglie niente: stesse sezioni, stesso copy, stesso kit.
   Nessuna classe nuova: le varianti nascono dal contesto (:has, gli id che le pagine hanno già).
   ════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · ritmo e aria: una scala sola fra le sezioni, aria prima del piede ─────────── */
main > section + section { margin-top: 12px; }
main > section:last-child { padding-bottom: 64px; }
@media (min-width: 760px) {
  main > section + section { margin-top: 28px; }
  main > section:last-child { padding-bottom: 88px; }
}
@media (min-width: 1100px) {
  main > section + section { margin-top: 52px; }
  main > section:last-child { padding-bottom: 112px; }
}

/* ── 2 · un'ombra sola per le schede, col filo che disegna il bordo sul fondo chiaro ── */
body {
  --ombra-scheda: 0 0 0 1px rgba(20, 34, 74, 0.06), 0 2px 4px rgba(20, 34, 74, 0.04), 0 24px 46px -30px rgba(20, 34, 74, 0.36);
  --ombra-su: 0 0 0 1px rgba(20, 34, 74, 0.07), 0 4px 10px rgba(20, 34, 74, 0.05), 0 34px 60px -30px rgba(20, 34, 74, 0.42);
}

/* ── 3 · pulsanti: col mouse si alzano e la freccia scivola; al tocco resta lo scale ── */
.freccia-obliqua { transition: transform 0.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn--giallo:hover { transform: translateY(-2px); }
  .btn--giallo:hover:active { transform: scale(0.97); }
  .btn:hover .freccia-obliqua { transform: translate(2px, -2px); }
}

/* ── 4 · il piede: aria sopra il logo, la strada staccata, un filo prima della riga legale ── */
.piede { padding-top: 48px; }
.piede__strada { margin-top: 6px; }
.piede__legale { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
@media (min-width: 1100px) {
  .piede { padding-top: 72px; padding-bottom: 28px; }
  .piede__in { gap: 20px; }
  .piede__strada { margin-top: 24px; }
  .piede__legale { margin-top: 6px; padding-top: 22px; }
}

/* ── 5 · il pannello Prenota (home e /noleggio): la colonna dei pulsanti non si allarga
        più sull'informativa, le date si leggono intere, il messaggio respira ────────── */
@media (min-width: 1100px) {
  .prenota { grid-template-columns: max-content max-content minmax(300px, 1fr) minmax(262px, 300px); }
}
@media (min-width: 1366px) {
  .prenota { grid-template-columns: max-content max-content minmax(318px, 1.3fr) minmax(220px, 1fr) minmax(270px, 300px); }
}

/* ── 6 · il palco della flotta: la colonna delle categorie larga quanto la voce più lunga ── */
@media (min-width: 1100px) {
  .flotta__in { grid-template-columns: 19.4% minmax(16.8%, max-content) 9.5% minmax(0, 1fr); }
  .tipo { gap: 14px; padding-right: 18px; }
  .tipo img { width: 44px; height: 44px; }
}

/* ── 7 · le offerte: foto in 2:1 con l'auto intera; «Immagine illustrativa» leggibile ── */
.offerta__foto { aspect-ratio: 2 / 1; }
.offerta__foto img { object-position: 50% 58%; }
.offerta__illustrativa {
  right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px;
  background: rgba(20, 34, 74, 0.62); text-shadow: none; font-size: 11.5px; letter-spacing: 0.01em; line-height: 1.3;
}
.offerta__foto:has(.palco__piatto) .offerta__illustrativa {
  top: 10px; right: 10px; bottom: auto; background: var(--fondo); color: var(--blu-testo); font-size: 12px;
}

/* ── 8 · No scoring: il righello dei 48 mesi corre sopra i passi, i fili gialli partono dalle tacche ── */
.noscoring__alto + .passi .passo:nth-child(-n+2)::before, .tacche + .passi .passo:first-child::before { top: -40px; height: 32px; }
@media (min-width: 760px) {
  .noscoring__alto + .passi .passo::before, .tacche + .passi .passo::before { top: -40px; height: 32px; }
}
@media (min-width: 1100px) {
  .noscoring__mesi { grid-row: 2; }
  .noscoring__alto > .tacche { grid-column: 1 / -1; grid-row: 3; margin: 30px 0 0; }
  .noscoring__alto + .passi, .tacche + .passi { margin-top: 46px; }
  .noscoring__alto + .passi .passo::before, .tacche + .passi .passo::before { top: -46px; height: 36px; }
}

/* ── 9 · domande frequenti della home: un filo sopra ogni domanda, come un indice ──── */
.domande__in > .domande__colonne .domande__col { gap: 0; }
.domande__in > .domande__colonne .domanda { padding: 16px 0 18px; border-top: 1px solid var(--bordo); }
.domande__in > .domande__colonne .domanda dd { margin-top: 6px; }
@media (min-width: 1100px) {
  .domande__in > .domande__colonne .domanda { padding: 20px 0 22px; }
}

/* ── 10 · la hero delle pagine interne: più alta, titolo più grande (la gerarchia) ──── */
@media (min-width: 1100px) {
  .hero:not(:has(.hero__comp)) { --alta: clamp(400px, 34vw, 520px); --lt: min(620px, 47%); }
  .hero:not(:has(.hero__comp)) .hero__titolo { font-size: clamp(44px, 4.2vw, 62px); line-height: 1.04; letter-spacing: -0.025em; }
  .hero__scena:not(:has(.hero__sfondo, .palco)) { height: clamp(330px, 27vw, 400px); }
}

/* ── 11 · le hero di /offerte e /contatti: un'immagine del sito e del kit nel suo riquadro
         (la Cupra di fianco, il segnaposto giallo), sul piano di luce con l'ombra a terra ── */
@media (max-width: 759px) {
  .hero:not(:has(.hero__comp)) .hero__sfondo { left: var(--x, 0); top: var(--y, 0); width: var(--l, 100%); height: var(--a, 100%); object-fit: var(--adatta, cover); }
}
@media (min-width: 760px) {
  .hero:not(:has(.hero__comp)) .hero__sfondo { left: var(--x-pc, 0); top: var(--y-pc, 0); width: var(--l-pc, 100%); height: var(--a-pc, 100%); }
}
.hero:has(+ #offerte) .hero__scena {
  background:
    radial-gradient(ellipse 30% 4.5% at 61% 87%, rgba(20, 34, 74, 0.34), rgba(20, 34, 74, 0) 72%),
    radial-gradient(ellipse 52% 70% at 64% 58%, var(--bianco), rgba(255, 255, 255, 0) 72%),
    var(--fondo);
}
.hero:has(+ #mappa) .hero__scena {
  background:
    radial-gradient(ellipse 9% 3.6% at 73% 81%, rgba(20, 34, 74, 0.34), rgba(20, 34, 74, 0) 72%),
    radial-gradient(ellipse 42% 70% at 74% 56%, var(--bianco), rgba(255, 255, 255, 0) 72%),
    var(--fondo);
}
@media (min-width: 760px) {
  .hero:has(+ #offerte) .hero__scena {
    background:
      radial-gradient(ellipse 21% 4% at 75.5% 86.5%, rgba(20, 34, 74, 0.32), rgba(20, 34, 74, 0) 72%),
      radial-gradient(ellipse 34% 64% at 76% 54%, var(--bianco), rgba(255, 255, 255, 0) 72%),
      var(--fondo);
  }
  .hero:has(+ #mappa) .hero__scena {
    background:
      radial-gradient(ellipse 6% 2.8% at 76% 76.5%, rgba(20, 34, 74, 0.32), rgba(20, 34, 74, 0) 72%),
      radial-gradient(ellipse 30% 66% at 76% 52%, var(--bianco), rgba(255, 255, 255, 0) 72%),
      var(--fondo);
  }
}
/* il segnaposto: l'anello giallo a terra che pulsa piano, come sul plastico */
.hero:has(+ #mappa) .hero__scena::before {
  content: ""; position: absolute; left: 73%; top: 81%; width: 64px; height: 20px; margin: -10px 0 0 -32px;
  border: 2px solid var(--giallo); border-radius: 50%; opacity: 0; pointer-events: none;
  animation: onda 2.6s 1.5s ease-out infinite;
}
@media (min-width: 760px) {
  .hero:has(+ #mappa) .hero__scena::before { left: 76%; top: 76.5%; width: 120px; height: 34px; margin: -17px 0 0 -60px; border-width: 2.5px; }
}
/* l'entrata: la Cupra arriva da destra, il segnaposto cade e rimbalza una volta; poi restano
   fermi sulla loro ombra (l'animazione tiene la posizione e la scena non li fa scorrere) */
@keyframes arriva-auto { from { opacity: 0; transform: translateX(9%); } to { opacity: 1; transform: none; } }
@keyframes cade-pin {
  0% { opacity: 0; transform: translateY(-30%); }
  55% { opacity: 1; transform: translateY(1.5%); }
  76% { transform: translateY(-3%); }
  100% { opacity: 1; transform: none; }
}
.hero:has(+ #offerte) .hero__sfondo { animation: arriva-auto 0.9s 0.3s var(--ease-out) both; }
.hero:has(+ #mappa) .hero__sfondo { animation: cade-pin 0.95s 0.35s var(--ease-out) both; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) {
  .hero:has(+ #offerte) .hero__sfondo, .hero:has(+ #mappa) .hero__sfondo { animation-name: compare; }
  .hero:has(+ #mappa) .hero__scena::before { animation: none; opacity: 0.6; }
}

/* ── 12 · la chiusura delle pagine interne: titolo e riquadro in un pannello unico ──── */
.formule__in:has(> .lecce__scheda) {
  position: relative; isolation: isolate;
  padding-top: 26px; padding-bottom: 26px;
  padding-left: calc(max(var(--margine), env(safe-area-inset-left, 0px)) + 20px);
  padding-right: calc(max(var(--margine), env(safe-area-inset-right, 0px)) + 20px);
}
.formule__in:has(> .lecce__scheda)::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: max(var(--margine), env(safe-area-inset-left, 0px)); right: max(var(--margine), env(safe-area-inset-right, 0px));
  background: var(--bianco); border-radius: 22px; box-shadow: var(--ombra-forte);
}
.formule__in > .lecce__scheda { padding: 0; background: none; box-shadow: none; border-radius: 0; }
@media (min-width: 760px) {
  .formule__in:has(> .lecce__scheda) { padding: 40px calc(var(--margine) + 40px); }
}
@media (min-width: 1100px) {
  .formule__in:has(> .lecce__scheda) { grid-template-columns: 34% minmax(0, 1fr); column-gap: 56px; align-items: center; padding: 54px calc(var(--margine) + 56px); }
  .formule__in:has(> .lecce__scheda) .formule__titolo { margin-top: 0; font-size: clamp(34px, 3vw, 44px); }
  .formule__in > .lecce__scheda { margin-top: 0; padding: 0; column-gap: 48px; }
  .formule__in > .lecce__scheda .lecce__righe li { font-size: 17px; line-height: 1.5; }
}

/* ── 13 · tessere: «Cosa comprende la rata» (/rent-to-buy), «Le condizioni di ogni offerta» (/offerte) ── */
.formule__in > div > .inclusi { gap: 12px; margin-top: 22px; }
.formule__in > div > .inclusi > li {
  padding: 16px 18px; background: var(--bianco); border-radius: var(--raggio); box-shadow: var(--ombra-scheda);
}
.formule__in > div > .inclusi > li:has(> .pillola) { background: var(--giallo); box-shadow: none; }
.formule__in > div > .inclusi .pillola { padding: 0; border-radius: 0; background: none; text-align: left; font-size: 17px; line-height: 1.3; }
@media (min-width: 760px) {
  .formule__in > div > .inclusi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .formule__in > div > .inclusi:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formule__in > div > .inclusi > li { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 22px; min-height: 152px; padding: 24px 24px 26px; }
  .formule__in > div > .inclusi > li:has(> .pillola) { justify-content: flex-end; }
}
@media (min-width: 1100px) {
  .formule__in > div > .inclusi > li { min-height: 172px; padding: 28px 28px 30px; font-size: 20px; }
  .formule__in > div > .inclusi img { width: 58px; height: 58px; }
  .formule__in > div > .inclusi .pillola { font-size: 20px; }
}
@media (hover: hover) and (pointer: fine) {
  .formule__in > div > .inclusi > li { transition: box-shadow 0.25s ease; }
  .formule__in > div > .inclusi > li:not(:has(> .pillola)):hover { box-shadow: var(--ombra-su); }
}

/* ── 14 · /offerte, «Una nuova lista di auto ogni 15 giorni»: la chiusura centrata ─── */
#ogni-15-giorni .formule__in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
#ogni-15-giorni .formule__in > div { display: grid; justify-items: center; margin-top: 0; }
#ogni-15-giorni .formule__in > div > .noscoring__testo { text-align: center; }
#ogni-15-giorni .formule__in > div > .btn { justify-self: center; }
@media (min-width: 1100px) {
  #ogni-15-giorni .formule__titolo { margin-top: 0; }
  #ogni-15-giorni .formule__in > div { margin-top: 8px; }
}

/* ── 15 · /flotta, «Sei tipi di veicolo»: tre per riga e l'ultima riga senza buchi, veicoli tutti alti uguali ── */
@media (min-width: 600px) {
  #tipi .offerta__foto { aspect-ratio: auto; height: 196px; }
  #tipi .offerta__foto > img:not(.palco__piatto) { width: auto; height: 142px; max-width: 86%; bottom: 13%; }
  #tipi .offerta__foto .palco__piatto { width: min(290px, 88%); bottom: 6%; }
}
@media (min-width: 900px) {
  #tipi .offerte__griglia { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #tipi .offerta { grid-column: span 2; }
  /* 4 Step (06/11/2026): l'ultima riga piena coi tipi che ci sono, nascosti esclusi (5 o 8: due mezze; 4 o 7: una intera; 6 e 9: tre) */
  #tipi .offerta:nth-last-child(2):nth-child(3n+1), #tipi .offerta:last-child:nth-child(3n+2) { grid-column: span 3; }
  #tipi .offerta:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  #tipi .offerta__foto { height: 206px; }
  #tipi .offerta__foto > img:not(.palco__piatto) { height: 150px; }
  #tipi .offerta__foto .palco__piatto { width: min(300px, 88%); }
}
/* da telefono: schede orizzontali, veicolo a sinistra, nome e testo a destra, pulsante sotto */
@media (max-width: 599px) {
  #tipi .offerte__griglia { gap: 14px; }
  #tipi .offerta { display: grid; grid-template-columns: 41% minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 12px; }
  #tipi .offerta__foto { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; min-height: 120px; }
  #tipi .offerta__foto > img:not(.palco__piatto) { width: 82%; bottom: 17%; }
  #tipi .offerta__foto .palco__piatto { width: 92%; bottom: 9%; }
  #tipi .offerta__illustrativa { top: auto; right: auto; left: 6px; bottom: 5px; padding: 2px 6px; font-size: 10.5px; }
  #tipi .offerta__corpo { display: contents; }
  #tipi .offerta__nome { grid-column: 2; grid-row: 1; padding: 14px 12px 0 0; font-size: 18px; gap: 8px; }
  #tipi .offerta__nome img { width: 28px; height: 28px; }
  #tipi .offerta__nome + .offerta__dati { grid-column: 2; grid-row: 2; padding: 6px 12px 10px 0; font-size: 14.5px; line-height: 1.4; }
  #tipi .offerta__piede { grid-column: 1 / -1; grid-row: 3; margin: 0; padding: 12px 14px 14px; }
  #tipi .offerta__piede .btn { width: 100%; }
}

/* ── 16 · /offerte da telefono e tablet: l'offerta dispari a tutta riga in orizzontale ── */
@media (max-width: 899px) {
  .hero + .offerte:has(.filtri) .offerta[style*="grid-column"] {
    display: grid; grid-template-columns: 44% minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 12px;
  }
  .hero + .offerte:has(.filtri) .offerta[style*="grid-column"] .offerta__foto { grid-column: 1; grid-row: 1 / 5; aspect-ratio: auto; min-height: 150px; }
  .hero + .offerte:has(.filtri) .offerta[style*="grid-column"] .offerta__corpo { display: contents; }
  .hero + .offerte:has(.filtri) .offerta[style*="grid-column"] .offerta__nome { grid-column: 2; padding: 12px 12px 0 0; }
  .hero + .offerte:has(.filtri) .offerta[style*="grid-column"] .offerta__dati { grid-column: 2; padding: 4px 12px 0 0; }
  .hero + .offerte:has(.filtri) .offerta[style*="grid-column"] .offerta__prezzo { grid-column: 2; padding: 8px 12px 0 0; margin: 0; }
  .hero + .offerte:has(.filtri) .offerta[style*="grid-column"] .offerta__piede { grid-column: 2; align-self: end; padding: 10px 12px 12px 0; margin: 0; }
}

/* ── 17 · /noleggio, «I veicoli»: le tessere cliccabili su una riga e «Scopri la flotta» allineato ── */
.flotta__in:not(:has(.palco)) .flotta__nota a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 800; }
.flotta__in:not(:has(.palco)) .flotta__nota a::after {
  content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .flotta__in:not(:has(.palco)) .flotta__nota a:hover::after { transform: translateX(3px) rotate(45deg); } }
@media (min-width: 1100px) {
  .flotta__in:not(:has(.palco)) .flotta__tipi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 30px 0 0; }
  .flotta__in:not(:has(.palco)) .tipo {
    flex-direction: column; justify-content: center; gap: 12px; min-height: 150px; padding: 22px 12px 30px;
    background: var(--bianco); border: 0; border-radius: var(--raggio); box-shadow: var(--ombra-scheda);
    font-size: 18px; white-space: normal; text-align: center;
  }
  .flotta__in:not(:has(.palco)) .tipo img { width: 62px; height: 62px; }
  .flotta__in:not(:has(.palco)) .tipo::before {
    left: 50%; top: auto; bottom: 16px; width: 34px; height: 4px; margin-left: -17px;
    transform: scaleX(0.4); transition: opacity 0.2s ease, transform 0.25s var(--ease-out);
  }
  .flotta__in:not(:has(.palco)) .flotta__nota { margin-top: 18px; }
  /* 4 Step (06/11/2026): da sei tipi in su, tutte su una riga finché ci stanno (mai la sesta da sola sotto) */
  .flotta__in:not(:has(.palco)) .flotta__tipi:has(> .tipo:nth-child(6)) { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; }
  .flotta__in:not(:has(.palco)) .flotta__tipi:has(> .tipo:nth-child(6)) .tipo { padding-left: 8px; padding-right: 8px; }
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .flotta__in:not(:has(.palco)) .tipo:hover { box-shadow: var(--ombra-su); }
  .flotta__in:not(:has(.palco)) .tipo:hover::before { opacity: 1; transform: none; }
  .flotta__in:not(:has(.palco)) .tipo:hover span { text-decoration: none; }
}

/* ── 18 · due schede di fila senza titolo né pulsante: il contenuto al centro (non vuoto in basso) ── */
.formule__schede:has(> :last-child:nth-child(2)) > .formula:not(:has(> .btn, > .lecce__link, > .formula__nome)) { justify-content: center; }

/* ── 19 · /rent-to-buy: misure di lettura per le frasi lunghe ────────────────────────── */
.noscoring__alto:not(:has(.noscoring__chiavi)) .noscoring__testo { max-width: 34em; }
.formula:has(> h2) .formula__testo { max-width: 31em; }

/* ── 20 · /chi-siamo, «Una squadra di Lecce»: titolo sopra, foto stretta sull'oggetto, scheda accanto ── */
#squadra .lecce__mappa { border-radius: 22px; box-shadow: var(--ombra-scheda); }
#squadra .lecce__mappa > img { transform: scale(1.24); }
#servizi .formule__in > .noscoring__testo {
  padding-left: 14px; border-left: 4px solid var(--giallo); text-align: left; font-size: 15.5px; color: var(--blu-testo);
}
@media (min-width: 1100px) {
  #squadra .lecce__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; column-gap: 56px; row-gap: 30px; align-items: center; }
  #squadra .lecce__titolo { position: static; grid-column: 1 / -1; grid-row: 1; }
  #squadra .lecce__plastico { grid-column: 1; grid-row: 2; margin: 0; }
  #squadra .lecce__scheda { grid-column: 2; grid-row: 2; margin: 0; align-self: center; padding: 34px 34px 32px; gap: 20px; }
  #squadra .lecce__righe li { align-items: flex-start; gap: 16px; font-size: 19px; line-height: 1.5; font-weight: 600; }
  #squadra .lecce__righe .pin { width: 34px; height: auto; margin-top: 2px; }
  #squadra .lecce__link { text-align: left; padding-left: 50px; }
  #servizi .formule__in > .noscoring__testo { font-size: 16px; max-width: 48em; }
}

/* ── 21 · /contatti, «Telefono, email e social»: quattro tessere, frasi a sinistra ───── */
.domande__in > div > .domande__colonne { gap: 12px; }
.domande__in > div > .domande__colonne .domande__col { gap: 12px; }
.domande__in > div > .domande__colonne .domanda {
  padding: 18px 22px 20px; background: var(--bianco); border-radius: var(--raggio); box-shadow: var(--ombra-scheda);
}
.domande__in > div > .domande__colonne .domanda dt { font-size: 14px; font-weight: 750; color: var(--blu-testo); }
.domande__in > div > .domande__colonne .domanda dd { margin-top: 4px; font-size: 20px; font-weight: 850; letter-spacing: -0.01em; color: var(--blu); }
.domande__in > div > .domande__colonne .domanda dd a { text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--giallo); }
.domande__in > div > .noscoring__testo { text-align: left; }
@media (min-width: 760px) {
  .domande__in > div > .domande__colonne { gap: 16px; }
  .domande__in > div > .domande__colonne .domande__col { gap: 16px; }
  .domande__in > div > .domande__colonne .domande__col + .domande__col { border-left: 0; padding-left: 0; margin-left: 0; }
}
@media (min-width: 1100px) {
  .domande__in > div > .domande__colonne .domanda { padding: 22px 26px 24px; }
  .domande__in > div > .domande__colonne .domanda dd { font-size: 22px; }
}

/* ── 22 · pagine legali e 404: il testo su un foglio bianco, più aria ──────────────── */
.pagina-testo { padding: 40px 0 72px; }
.pagina-testo > .contenitore > .legale {
  margin-inline: auto; max-width: 920px; padding: 30px 20px 34px;
  background: var(--bianco); border-radius: 22px; box-shadow: var(--ombra-scheda);
}
.legale h2 { margin-top: 38px; }
.pagina-404 { padding: 72px 0 112px; }
@media (min-width: 760px) {
  .pagina-testo { padding: 56px 0 104px; }
  .pagina-testo > .contenitore > .legale { padding: 56px 64px 60px; }
}

/* ════════════════════════════════════════════════════════════════════════════════════
   STEP 7 · le correzioni del collaudo (05/11/2026, giro 1) — Design/confronti/COLLAUDO-STEP7-DESIGN-NUOVO.md
   Si tolgono i difetti, non si cambia l'idea: stesse sezioni, stesso copy, stesso kit, nessuna classe nuova.
   ════════════════════════════════════════════════════════════════════════════════════ */

/* R1 · il calendario aperto sta sopra a tutto: la sezione che lo contiene sale di piano (in home è la hero, e le
   schede «A giorni» e «A mesi» e il titolo della sezione dopo le passavano sopra, prendendo i clic) */
main > section:has(.calendario:not([hidden])) { position: relative; z-index: 20; }

/* R2 · il palco: le immagini non prendono mai il clic (lo prende il palco, che si trascina); il contatore sopra ai
   veicoli; da 700 a 1099 px i veicoli stanno dentro il palco, che non sale più sui pulsanti e sul contatore */
.palco > * { pointer-events: none; }
.palco { -webkit-user-select: none; user-select: none; }
.flotta__contatore { position: relative; z-index: 4; }
@media (hover: hover) and (pointer: fine) { [data-flotta] .palco { cursor: grab; } [data-flotta] .palco:active { cursor: grabbing; } }
@media (min-width: 700px) and (max-width: 1099px) {
  .flotta .palco { height: clamp(320px, 44vw, 470px); max-height: none; margin-top: -8px; }
  .flotta .palco__nome { font-size: min(20cqw, calc(118cqw / var(--lettere, 3))); }
  .flotta .palco__veicolo, .flotta .palco__veicolo[data-pos] { width: 48%; bottom: 10%; }
}

/* R3 · le offerte: quando la scheda è stretta l'anticipo va sotto la rata, su una riga (niente tagliato) */
.offerta__corpo { container-type: inline-size; }
@container (max-width: 252px) {
  .offerta__prezzo { flex-direction: column; align-items: flex-start; gap: 3px; }
  .offerta__anticipo { text-align: left; }
  .offerta__anticipo br { display: none; }
}
/* R3 · /offerte a 320 px: la griglia resta a due, la rata e il nome stanno interi */
@media (max-width: 380px) {
  .hero + .offerte:has(.filtri) .offerte__griglia { gap: 10px; }
  .hero + .offerte:has(.filtri) .offerta__corpo { padding: 10px 8px 12px; }
  .hero + .offerte:has(.filtri) .offerta__nome { font-size: 14px; letter-spacing: -0.015em; }
  .hero + .offerte:has(.filtri) .offerta__rata { font-size: 16px; }
  .hero + .offerte:has(.filtri) .offerta[style*="grid-column"] .offerta__nome { font-size: 15.5px; }
}
/* R3 · il pannello Prenota sotto i 390 px: le date (e il segnaposto «gg/mm/aaaa») si leggono intere */
@media (max-width: 389px) {
  .prenota { padding-left: 12px; padding-right: 12px; }
  .prenota__date { grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr); gap: 5px; }
  .data__campo { padding: 0 7px; gap: 5px; font-size: 15px; }
  .data__campo img { width: 16px; height: 16px; }
  .data__campo:not(.piena) { font-size: 14px; }
}
@media (max-width: 340px) {
  .data__campo { padding: 0 6px; gap: 4px; font-size: 14.5px; }
}

/* G1 · /cookie da telefono: la tabella prende tutta la larghezza del foglio e ci sta intera */
@media (max-width: 759px) {
  .pagina-testo > .contenitore > .legale { padding-inline: 16px; }
  .legale .scorri-tabella { margin-inline: -16px; }
  .legale table { font-size: 14px; }
  .legale th, .legale td { padding: 9px 7px; }
  .legale th:first-child, .legale td:first-child { padding-left: 16px; }
  .legale th:last-child, .legale td:last-child { padding-right: 16px; }
}
@media (max-width: 380px) {
  .pagina-testo > .contenitore > .legale { padding-inline: 14px; }
  .legale .scorri-tabella { margin-inline: -14px; }
  .legale table { font-size: 13.5px; }
  .legale th, .legale td { padding: 8px 5px; }
  .legale th:first-child, .legale td:first-child { padding-left: 14px; }
  .legale th:last-child, .legale td:last-child { padding-right: 14px; }
}

/* G3 · a 320 px niente blocchi di 4 righe: la riga legale del piede, il titolo dei 48 mesi, i pannelli e la barra */
@media (max-width: 380px) {
  .piede__legale { font-size: 12px; }
  .barra-azioni { grid-template-columns: 1.75fr 1fr; gap: 8px; }
  .barra-azioni .btn { padding: 0 10px; white-space: nowrap; }
  .noscoring__alto:not(:has(.noscoring__chiavi)) .noscoring__sinistra .titolo { grid-column: 1 / -1; grid-row: 1; }
  .noscoring__alto:not(:has(.noscoring__chiavi)) .noscoring__mesi { grid-row: 2; justify-self: start; margin-top: 6px; }
  .formule__in:has(> .lecce__scheda) {
    padding-left: calc(max(var(--margine), env(safe-area-inset-left, 0px)) + 14px);
    padding-right: calc(max(var(--margine), env(safe-area-inset-right, 0px)) + 14px);
  }
  .formule__in > .lecce__scheda .lecce__righe li { gap: 10px; }
  #squadra .lecce__scheda { padding: 18px 16px 18px; }
  #squadra .lecce__righe li { gap: 10px; }
}
@media (max-width: 349px) {
  #squadra .lecce__righe li { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* G4 · da computer i passi sotto il titolo, per tutta la larghezza (in una colonna stretta andavano su 4-5 righe);
   cinque passi su due righe, 3 + 2 senza buchi, come i cinque tipi della flotta */
@media (min-width: 1100px) {
  .formule__in:not(:has(.formula__link)):has(> .passi) { grid-template-columns: minmax(0, 1fr); }
  .formule__in:has(> .passi) .formule__titolo { margin-top: 0; }
  .formule__in:has(> .passi) > .passi { margin-top: 58px; }
}
@media (min-width: 760px) {
  .passi:has(> :nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 64px; }
  .passi:has(> :nth-child(5)) > .passo { grid-column: span 2; }
  .passi:has(> :nth-child(5)) > .passo:nth-child(n+4) { grid-column: span 3; }
}
/* … e da tablet e computer piccolo, dove quattro colonne sono strette per i passi lunghi delle pagine interne:
   due per riga (2 + 2; cinque: 2 + 2 + 1), coi fili gialli sopra ogni cartello come da telefono */
@media (min-width: 760px) and (max-width: 1099px) {
  .tacche + .passi { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
}
@media (min-width: 760px) and (max-width: 1199px) {
  .formule__in > .passi:not(:has(> :nth-child(5))) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
}
@media (min-width: 760px) and (max-width: 899px) {
  .passi:has(> :nth-child(5)) > .passo, .passi:has(> :nth-child(5)) > .passo:nth-child(n+4) { grid-column: span 3; }
  .passi:has(> :nth-child(5)) > .passo:nth-child(5) { grid-column: 1 / -1; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .formule__in > .passi { gap: 20px; }
  .formule__in > .passi .passo { padding-left: 12px; padding-right: 12px; }
  .formule__in > .passi .passo__testo { font-size: 16px; }
}
/* /chi-siamo, «Una squadra di Lecce», da 1100 a 1279 px: la frase della scheda su 3 righe */
@media (min-width: 1100px) and (max-width: 1279px) {
  #squadra .lecce__scheda { padding: 30px 28px 28px; }
  #squadra .lecce__righe li { font-size: 17.5px; }
}

/* G7 · i filtri delle offerte da telefono: tutti e quattro in vista, su due righe, senza scorrere di lato */
@media (max-width: 759px) {
  .filtri { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 2px 0 4px; }
}
@media (max-width: 380px) {
  .filtro { padding: 0 14px; }
}

/* pannello (step 6-ter): il prezzo non va a capo; i tipi di veicolo oltre il quinto restano fuori dal palco; il filtro senza offerte non si vede */
.nobr { white-space: nowrap; }
.palco__veicolo[data-pos="fuori"] { opacity: 0; visibility: hidden; }
.filtro[hidden] { display: none; }

/* pannello: l'avviso in cima al sito, le chiusure accanto agli orari, le promozioni */
.avviso-sito { margin: 0; padding: 10px 16px; background: var(--blu); color: #fff; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.35; }
.avviso-sito a { color: inherit; text-decoration: underline; }
.thk-orari-eccezioni { margin-top: 14px; font-weight: 600; }
.thk-orari-eccezioni p { margin: 6px 0 0; }
/* le promozioni: una fascia sopra le offerte (vuota alla consegna, senza promozioni non c'è) */
.offerte--promozioni { padding-bottom: 8px; }
.offerte--promozioni .offerte__griglia:not(:has(.offerta:nth-child(2))) { grid-auto-columns: 100%; }
@media (min-width: 760px) {
  .offerte--promozioni .offerte__in { grid-template-columns: minmax(0, 1fr); }
  .offerte--promozioni .offerte__griglia { grid-column: 1 / -1; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow: visible; margin-inline: 0; padding: 4px 0 0; gap: 20px 22px; }
  .offerte--promozioni .offerte__griglia:has(.offerta:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offerte--promozioni .offerta { flex-direction: row; min-height: 200px; }
  .offerte--promozioni .offerta__foto { flex: 0 0 38%; aspect-ratio: auto; }
  .offerte--promozioni .offerta__corpo { justify-content: center; padding: 20px 24px; gap: 10px; }
  .offerte--promozioni .offerta__nome { font-size: 24px; }
  .offerte--promozioni .offerta__dati { font-size: 16px; }
  .offerte--promozioni .offerta__piede { margin-top: 6px; }
}

/* 7-bis M Motors (05/11/2026) ─────────────────────────────────────────────────────────────────────────────────────────── */
/* piccolo 9 · una parola lunghissima in un titolo va a capo, mai fuori dallo schermo */
h1, h2, h3, .hero__titolo { overflow-wrap: break-word; min-width: 0; }
/* M4 · la locandina di una promozione si vede intera, da telefono e da computer: mai ritagliata, mai ingrandita */
.offerte--promozioni .offerta__foto--locandina { aspect-ratio: auto; background: var(--fondo); }
.offerte--promozioni .offerta__foto--locandina img { height: auto; max-height: min(78vh, 640px); object-fit: contain; object-position: 50% 50%; }
.offerte--promozioni .offerta:hover .offerta__foto--locandina img { transform: none; }
/* piccolo 8 · una promozione senza foto non resta alta come quelle con la foto */
.offerte--promozioni .offerta--senza-foto { align-self: start; }
@media (min-width: 760px) {
  .offerte--promozioni .offerta__foto--locandina { align-self: center; }
  .offerte--promozioni .offerta__foto--locandina img { max-height: 520px; }
}