/* Casale Transfer Car Service — flotta.css (21/10/2026, il salto di livello sui prodotti)
 * La flotta come uno showroom: la fila e il selettore di /flotta, il palco di ogni mezzo che gira fra le tre viste
 * del kit, le strisce, la galleria col lightbox, e la riga della flotta della home. Si carica DOPO style.css.
 * Stesso design, stesso kit: nessun colore nuovo (solo rgba() di --oro, --fondo, --nero e --linea di :root),
 * le due curve di :root, solo transform e opacity per quello che si muove, hover solo col mouse. */

/* ── fra la home e /flotta l'auto toccata vola al suo palco (dove il browser lo sa fare) ───────── */
/* l'adesione (@view-transition) sta nella pagina, in cima a <body> della home e di /flotta: così la pagina di pausa del
   pannello, che prende i fogli di stile della home, non aderisce (e uscendo non dà errori nella console) */
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
.fl-mezzo:target .fl-vista--davanti { view-transition-name: var(--vt); }

/* le icone del kit dentro testo e pulsanti */
.fl-ico { display: block; flex: none; width: 28px; height: 28px; }

/* ════════════════════════════════════════════════════════════════════════
   LA RIGA DELLA FLOTTA, IN HOME (03 del design: più alta, auto più grandi, il pavimento di luce)
   ════════════════════════════════════════════════════════════════════════ */
.fl-home {
  padding-top: 44px; padding-bottom: 50px;
  background: radial-gradient(120% 70% at 50% 96%, rgba(233, 194, 136, .07) 0%, rgba(15, 18, 18, 0) 62%), var(--fondo);
  overflow-x: clip;
}
.fl-home__riga { margin-top: clamp(26px, 3.2vw, 46px); }
.fl-linguette { display: none; }
.fl-schede { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fl-scheda {
  position: relative;
  padding: 0 14px;
  border-left: 1px solid;
  border-image: linear-gradient(180deg, rgba(132, 115, 87, 0), rgba(132, 115, 87, .55) 30%, rgba(132, 115, 87, .55) 70%, rgba(132, 115, 87, 0)) 1;
}
.fl-scheda:first-child { border-left: 0; }
.fl-scheda__link {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  height: 100%; padding-bottom: 4px;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.fl-scheda__link:active { scale: .97; }
.fl-scheda__palco { --terra: 26px; position: relative; display: block; width: 100%; height: 214px; }
/* la luce calda sul pavimento, sotto le ruote */
.fl-scheda__palco::before {
  content: ""; position: absolute; left: -6%; right: -6%; bottom: calc(var(--terra) - 30px); height: 60px;
  background: radial-gradient(closest-side, rgba(233, 194, 136, .3), rgba(233, 194, 136, .11) 52%, rgba(233, 194, 136, 0));
  opacity: .9;
  transition: opacity .45s ease, transform .7s var(--ease-out);
}
/* l'ombra di contatto */
.fl-scheda__palco::after {
  content: ""; position: absolute; left: 9%; right: 9%; bottom: calc(var(--terra) - 7px); height: 14px; z-index: 1;
  background: radial-gradient(closest-side, rgba(8, 7, 8, .88), rgba(8, 7, 8, 0));
}
.fl-scheda__auto {
  position: absolute; z-index: 2; left: 50%; bottom: var(--terra);
  width: 96%; height: auto;
  transform: translateX(-50%);
  -webkit-box-reflect: below 0 linear-gradient(transparent 0%, transparent 74%, rgba(255, 255, 255, .16) 100%);
  transition: opacity .45s ease, transform .6s var(--ease-out), translate 1.1s var(--ease-out) calc(var(--i, 0) * 70ms + 120ms);
  pointer-events: none;
}
.fl-scheda__auto--profilo { width: 100%; opacity: 0; transform: translateX(calc(-50% + 12px)); }
.fl-scheda__categoria {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px;
  min-height: 24px; margin-top: 18px;
  color: var(--oro); font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; line-height: 1.2;
}
.fl-scheda__nome {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px;
  margin-top: 8px; font-size: 20px; font-weight: 400; line-height: 1.3; transition: color .2s ease;
}
.fl-scheda__nome .distintivo { padding: 4px 8px 3px; font-size: 10px; letter-spacing: .16em; }
.fl-scheda__icona { width: 66px; height: 66px; margin-top: 2px; margin-bottom: -6px; transition: transform .5s var(--ease-out); }
.fl-scheda__motto { max-width: 15em; margin-top: 6px; font-size: 18px; font-weight: 300; line-height: 1.4; }
.fl-scheda__motto::first-letter { text-transform: uppercase; }
.fl-scheda__freccia { margin-top: auto; padding-top: 18px; color: var(--oro); }
.fl-scheda__freccia::before {
  content: ""; display: block; width: 26px; height: 26px;
  background: currentColor;
  -webkit-mask: url("../img/flotta/icone/freccia-diagonale-96.webp") center / contain no-repeat;
  mask: url("../img/flotta/icone/freccia-diagonale-96.webp") center / contain no-repeat;
  transition: transform .25s var(--ease-out);
}
.fl-scheda__link:focus-visible { outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  /* al passaggio del mouse l'auto si gira: dalla vista davanti al profilo */
  .fl-scheda__link:hover .fl-scheda__auto--davanti { opacity: 0; transform: translateX(calc(-50% - 12px)); }
  .fl-scheda__link:hover .fl-scheda__auto--profilo { opacity: 1; transform: translateX(-50%); }
  .fl-scheda__link:hover .fl-scheda__palco::before { opacity: 1; transform: scaleX(1.06); }
  .fl-scheda__link:hover .fl-scheda__nome { color: var(--oro-chiaro); }
  .fl-scheda__link:hover .fl-scheda__icona { transform: translateX(6px); }
  .fl-scheda__link:hover .fl-scheda__freccia::before { transform: translate(2px, -2px); }
}
@media (hover: none) { .fl-scheda__auto--profilo { display: none; } }

/* l'entrata: le schede una dopo l'altra, l'auto scorre dentro dalla destra (fl-js: solo se flotta.js gira) */
.fl-scheda__link { transition: scale .16s var(--ease-out), opacity .8s var(--ease-out) calc(var(--i, 0) * 70ms), translate .9s var(--ease-out) calc(var(--i, 0) * 70ms); }
.fl-js .fl-home__riga:not(.e-dentro) .fl-scheda__link { opacity: 0; translate: 0 34px; }
.fl-js .fl-home__riga:not(.e-dentro) .fl-scheda__auto--davanti { translate: 36px 0; }
.fl-js .fl-home__riga:not(.e-dentro) .fl-scheda__palco::before { opacity: 0; transform: scaleX(.6); }
.fl-scheda__palco::before { transition: opacity .9s ease calc(var(--i, 0) * 70ms + 200ms), transform 1.1s var(--ease-out) calc(var(--i, 0) * 70ms + 200ms); }
.fl-home__riga.e-dentro .fl-scheda__palco::before { transition: opacity .45s ease, transform .7s var(--ease-out); }

/* ════════════════════════════════════════════════════════════════════════
   /FLOTTA · LA PRIMA SCHERMATA: i quattro mezzi in fila sulla stessa linea di terra
   ════════════════════════════════════════════════════════════════════════ */
@keyframes fl-entra { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes fl-appare { from { opacity: 0; } to { opacity: 1; } }
@keyframes fl-parcheggia { from { translate: 56px 0; } to { translate: 0 0; } }
@keyframes fl-luce { from { opacity: 0; transform: scaleX(.55); } to { opacity: 1; transform: none; } }

.fl-pagina { overflow-x: clip; }
.fl-hero {
  position: relative; isolation: isolate;
  min-height: clamp(640px, 82svh, 840px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: calc(var(--testata) + env(safe-area-inset-top, 0px) + clamp(28px, 4vw, 60px));
  padding-bottom: clamp(26px, 3vw, 44px);
  background:
    radial-gradient(70% 34% at 50% 84%, rgba(233, 194, 136, .1) 0%, rgba(233, 194, 136, 0) 100%),
    var(--fondo);
}
.fl-hero__testi { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 24px clamp(40px, 5vw, 96px); }
.fl-hero__titolo {
  font-weight: 200; font-size: clamp(38px, 4.5vw, 66px); line-height: 1.06; letter-spacing: -.006em;
  text-wrap: balance;
  animation: fl-entra 1s var(--ease-out) .12s backwards;
}
.fl-hero__titolo .corsivo { font-size: 1.16em; }
.fl-hero__lato { padding-bottom: 6px; }
.fl-hero__sotto { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.45; font-weight: 300; animation: fl-entra .9s var(--ease-out) .3s backwards; }
.fl-hero__testo { margin-top: 10px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; color: rgba(255, 255, 255, .9); animation: fl-entra .9s var(--ease-out) .38s backwards; }
.fl-hero__azioni { margin-top: clamp(22px, 2.2vw, 30px); animation: fl-entra .9s var(--ease-out) .46s backwards; }

.fl-fila {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end;
  gap: 0 clamp(12px, 2.2vw, 34px);
  margin-top: clamp(40px, 6vh, 80px);
}
.fl-fila__link {
  display: flex; flex-direction: column; align-items: center;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: scale .16s var(--ease-out);
}
.fl-fila__link:active { scale: .97; }
.fl-fila__link:focus-visible { outline-offset: 8px; }
.fl-fila__palco { position: relative; display: flex; justify-content: center; align-items: flex-end; width: 100%; padding-bottom: 30px; }
.fl-fila__palco::before {
  content: ""; position: absolute; left: -22%; right: -22%; bottom: -8px; height: 76px; z-index: -1;
  background: radial-gradient(closest-side, rgba(233, 194, 136, .3), rgba(233, 194, 136, .1) 55%, rgba(233, 194, 136, 0));
  animation: fl-luce 1.3s var(--ease-out) calc(.3s + var(--i, 0) * .08s) backwards;
  transition: opacity .4s ease;
}
.fl-fila__palco::after {
  content: ""; position: absolute; left: calc(50% - var(--lung, 1) * 44%); right: calc(50% - var(--lung, 1) * 44%); bottom: 23px; height: 14px;
  background: radial-gradient(closest-side, rgba(8, 7, 8, .9), rgba(8, 7, 8, 0));
}
.fl-fila__auto {
  position: relative; z-index: 1;
  width: calc(var(--lung, 1) * 100%); height: auto;
  -webkit-box-reflect: below 0 linear-gradient(transparent 0%, transparent 70%, rgba(255, 255, 255, .15) 100%);
  animation: fl-parcheggia 1.2s var(--ease-out) calc(var(--i, 0) * .08s) backwards;
  transition: transform .5s var(--ease-out);
}
.fl-fila__nome {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px; min-height: 44px;
  font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--testo);
  animation: fl-appare .9s ease calc(.6s + var(--i, 0) * .08s) backwards;
  transition: color .2s ease;
}
.fl-fila__nome .fl-ico { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) {
  .fl-fila__link:hover .fl-fila__auto { transform: translateX(-10px); }
  .fl-fila__link:hover .fl-fila__nome { color: var(--oro-chiaro); }
}

/* ── il selettore fisso dei mezzi ─────────────────────────────────────── */
.fl-selettore {
  position: fixed; top: 0; left: 0; right: 0; z-index: 45;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--fondo);
  box-shadow: 0 1px 0 rgba(132, 115, 87, .35), 0 14px 30px rgba(8, 7, 8, .35);
  transform: translateY(-110%);
  opacity: 0; visibility: hidden;
  transition: transform .26s var(--ease-in-out), opacity .2s ease, visibility 0s linear .26s;
}
.fl-selettore.e-visibile { opacity: 1; visibility: visible; transition: transform .42s var(--ease-out), opacity .3s ease, visibility 0s; }
.fl-selettore__voci {
  position: relative;
  display: flex; justify-content: center; gap: clamp(8px, 3.4vw, 60px);
  max-width: var(--larghezza); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.fl-selettore__voce {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 12px;
  font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  color: var(--testo-2);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: color .2s ease, scale .16s var(--ease-out);
}
.fl-selettore__voce .fl-ico { width: 28px; height: 28px; opacity: .5; transition: opacity .2s ease; }
.fl-selettore__voce.e-attiva { color: var(--oro); }
.fl-selettore__voce.e-attiva .fl-ico { opacity: 1; }
.fl-selettore__voce:active { scale: .96; }
.fl-selettore__voce:focus-visible { outline-offset: -4px; }
.fl-selettore__linea {
  position: absolute; left: 0; bottom: 0; width: 100px; height: 1px;
  background: var(--oro);
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .32s var(--ease-in-out);
}
@media (hover: hover) and (pointer: fine) {
  .fl-selettore__voce:hover { color: var(--testo); }
  .fl-selettore__voce.e-attiva:hover { color: var(--oro-chiaro); }
}

/* ════════════════════════════════════════════════════════════════════════
   LO SHOWROOM DI OGNI MEZZO
   ════════════════════════════════════════════════════════════════════════ */
.fl-mezzo {
  position: relative;
  padding: clamp(64px, 7.4vw, 112px) 0 clamp(40px, 4vw, 60px);
  /* sotto la testata e il selettore (style.css ha già scroll-padding-top: 80px sulla pagina) */
  scroll-margin-top: 50px;
  background: var(--fondo);
}
.fl-mezzo::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px;
  background: linear-gradient(90deg, rgba(132, 115, 87, 0), rgba(132, 115, 87, .55) 25%, rgba(132, 115, 87, .55) 75%, rgba(132, 115, 87, 0));
}
.fl-mezzo__griglia {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: ". media" "testa media" "testi media" ". media";
  column-gap: clamp(32px, 4.4vw, 80px);
}
.fl-mezzo__testa { grid-area: testa; }
.fl-mezzo__media { grid-area: media; margin-right: calc(-1 * var(--gutter)); min-width: 0; }
.fl-mezzo__testi { grid-area: testi; }
.fl-mezzo__nome {
  margin-top: 18px;
  font-weight: 200; font-size: clamp(42px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -.008em;
}
.fl-mezzo__nome .corsivo { font-size: 1.16em; }
.fl-mezzo .etichetta .distintivo { padding: 6px 10px 5px; font-size: 11px; letter-spacing: .2em; }
.fl-mezzo__testo { margin-top: 20px; max-width: 29em; font-size: clamp(17px, 1.32vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, .9); text-wrap: pretty; }
.fl-mezzo__testo + .fl-mezzo__testo { margin-top: 10px; }
.fl-mezzo__punti { margin-top: 22px; max-width: 31em; }
.fl-mezzo__punti li { display: flex; align-items: flex-start; gap: 18px; padding: 14px 0; border-top: 1px solid rgba(132, 115, 87, .45); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.fl-mezzo__punti li:last-child { border-bottom: 1px solid rgba(132, 115, 87, .45); }
.fl-mezzo__punti .fl-ico { width: 40px; height: 40px; margin-top: 2px; }
.fl-mezzo__testi .citazione__chi { margin-top: 12px; }
.fl-mezzo__wa { margin-top: 30px; gap: 12px; }

/* ── il palco: l'auto grande sul pavimento di luce, che si gira fra le tre viste ── */
.fl-palco {
  --terra: 15%;
  position: relative;
  aspect-ratio: 16 / 9.4;
  cursor: grab;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  outline-offset: -6px;
}
.fl-palco.e-trascina { cursor: grabbing; }
.fl-palco::before {
  content: ""; position: absolute; left: -4%; right: -4%; bottom: calc(var(--terra) - 13%); height: 26%;
  background: radial-gradient(closest-side, rgba(233, 194, 136, .27), rgba(233, 194, 136, .1) 52%, rgba(233, 194, 136, 0));
  transition: opacity 1.1s ease, transform 1.3s var(--ease-out);
}
.fl-palco::after {
  content: ""; position: absolute; z-index: 1; left: 10%; right: 10%; bottom: calc(var(--terra) - 2.4%); height: 5.6%;
  background: radial-gradient(closest-side, rgba(8, 7, 8, .9), rgba(8, 7, 8, 0));
  transition: opacity .9s ease;
}
.fl-palco__auto { position: absolute; inset: 0; z-index: 2; transition: transform 1.2s var(--ease-out), opacity 1s ease; }
.fl-vista {
  position: absolute; left: 50%; bottom: var(--terra);
  width: 86%; max-width: none; height: auto;
  transform: translateX(-47%);
  opacity: 0;
  -webkit-box-reflect: below 0 linear-gradient(transparent 0%, transparent 70%, rgba(255, 255, 255, .14) 100%);
  transition: opacity .55s ease, transform .6s var(--ease-in-out);
  pointer-events: none; -webkit-user-drag: none;
}
.fl-vista--profilo { width: 97%; }
.fl-vista.e-prima { transform: translateX(-53%); }
.fl-vista.e-attiva { opacity: 1; transform: translateX(-50%); }
.fl-palco.e-scatta .fl-vista { transition-duration: .35s; }
.fl-palco.e-giro .fl-vista { transition: opacity .8s ease, transform .9s var(--ease-in-out); }
/* l'entrata: la luce si allarga mentre l'auto scorre dentro */
.fl-js .fl-mezzo:not(.e-dentro):not(:target) .fl-palco__auto { opacity: 0; transform: translateX(7%); }
.fl-js .fl-mezzo:not(.e-dentro):not(:target) .fl-palco::before { opacity: 0; transform: scaleX(.6); }
.fl-js .fl-mezzo:not(.e-dentro):not(:target) .fl-palco::after { opacity: 0; }

/* le tre miniature delle viste */
.fl-viste { display: flex; justify-content: center; gap: clamp(6px, 1vw, 14px); margin-top: 6px; }
.fl-viste__voce {
  position: relative;
  width: clamp(92px, 8.4vw, 124px); min-height: 60px; padding: 6px 8px 12px;
  border: 0; background: none; cursor: pointer;
  opacity: .42;
  user-select: none; -webkit-user-select: none;
  transition: opacity .2s ease, transform .16s var(--ease-out);
}
.fl-viste__voce img { width: 100%; height: 46px; object-fit: contain; object-position: 50% 100%; pointer-events: none; }
.fl-viste__voce::after {
  content: ""; position: absolute; left: 20%; right: 20%; bottom: 2px; height: 1px;
  background: var(--oro);
  transform: scaleX(0); transition: transform .3s var(--ease-out);
}
.fl-viste__voce[aria-pressed="true"] { opacity: 1; }
.fl-viste__voce[aria-pressed="true"]::after { transform: scaleX(1); }
.fl-viste__voce:active { transform: scale(.96); }
.fl-viste__voce:focus-visible { outline-offset: 0; }
@media (hover: hover) and (pointer: fine) {
  .fl-viste__voce:hover { opacity: .85; }
}

/* ── la striscia del mezzo: ambientate e interni del kit, poi le foto vere; scorre col dito ── */
.fl-striscia { --pad: max(var(--gutter), calc((100% - var(--larghezza)) / 2 + var(--gutter))); margin-top: clamp(30px, 3.6vw, 52px); }
.fl-striscia__pista {
  display: flex; align-items: stretch; gap: 12px;
  padding-left: var(--pad);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--pad);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fl-striscia__pista::-webkit-scrollbar { display: none; }
.fl-striscia__pista::after { content: ""; flex: 0 0 calc(var(--pad) - 12px); }
.fl-striscia__pista:focus-visible { outline-offset: -2px; }
.fl-striscia__pista.e-trascina { scroll-snap-type: none; cursor: grabbing; }
.fl-striscia__pista.e-trascina .fl-foto { pointer-events: none; }
.fl-striscia .fl-foto { height: clamp(220px, 17.5vw, 270px); scroll-snap-align: start; }
.fl-striscia .fl-foto img { height: 100%; width: auto; max-width: none; }
.fl-striscia__filo {
  flex: none; width: 1px; margin: 0 10px;
  background: linear-gradient(180deg, rgba(233, 194, 136, 0), rgba(233, 194, 136, .75) 30%, rgba(233, 194, 136, .75) 70%, rgba(233, 194, 136, 0));
}
.fl-striscia__comandi { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.fl-striscia__avanza { position: relative; flex: 1; height: 1px; margin-right: 14px; overflow: hidden; background: rgba(132, 115, 87, .35); }
.fl-striscia__avanza i {
  position: absolute; inset: 0;
  background: var(--oro);
  transform-origin: 0 50%; transform: scaleX(.25);
  transition: transform .2s linear;
}

/* una foto (striscia e galleria): la foto intera, nelle sue proporzioni, col filo sottile */
.fl-foto {
  position: relative; display: block; flex: none; overflow: hidden;
  background: var(--barra);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: scale .16s var(--ease-out);
}
.fl-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(132, 115, 87, .4);
}
.fl-foto[href*="/foto/"]::after { box-shadow: inset 0 0 0 1px rgba(233, 194, 136, .55); }
.fl-foto img { display: block; transition: transform 1.2s var(--ease-out); -webkit-user-drag: none; }
.fl-foto:active { scale: .98; }
@media (hover: hover) and (pointer: fine) {
  .fl-foto { cursor: zoom-in; }
  .fl-foto:hover img { transform: scale(1.04); }
}

/* le frecce (striscia e lightbox): il quadrato del «Chiudi», con la freccia 16 del kit */
.fl-freccia {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 2px;
  background: transparent; color: var(--testo);
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease, transform .16s var(--ease-out);
}
.fl-freccia__ico {
  width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: url("../img/flotta/icone/freccia-destra-96.webp") center / contain no-repeat;
  mask: url("../img/flotta/icone/freccia-destra-96.webp") center / contain no-repeat;
}
.fl-freccia--indietro .fl-freccia__ico { transform: scaleX(-1); }
.fl-freccia:active { transform: scale(.96); }
.fl-freccia:disabled { opacity: .28; cursor: default; }
.fl-freccia:disabled:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .fl-freccia:not(:disabled):hover { border-color: var(--oro); color: var(--oro); }
}

/* ════════════════════════════════════════════════════════════════════════
   A BORDO · una grande intera (la 40, orizzontale) e sotto due piccole, nella colonna del titolo
   ════════════════════════════════════════════════════════════════════════ */
.fl-bordo__griglia { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 40px clamp(40px, 5.4vw, 96px); align-items: start; }
.fl-bordo__composizione {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px;
  max-width: 560px; margin-top: 34px;
}
.fl-bordo__foto { position: relative; margin: 0; overflow: hidden; background: var(--fondo); }
.fl-bordo__foto::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(132, 115, 87, .45); pointer-events: none; }
.fl-bordo__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.fl-bordo__foto--grande { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.fl-bordo__foto--piccola { aspect-ratio: 4 / 3; }
.fl-bordo__foto--piccola img { object-position: 50% 55%; }
.fl-bordo__elenco { padding-top: 38px; }
.fl-bordo__elenco .righe { margin-top: 0; }
@media (hover: hover) and (pointer: fine) {
  .fl-bordo__foto:hover img { transform: scale(1.04); }
}

/* ════════════════════════════════════════════════════════════════════════
   LA FLOTTA IN FOTO · le foto vere nelle loro proporzioni, un gruppo per mezzo
   ════════════════════════════════════════════════════════════════════════ */
.fl-galleria__gruppo { margin-top: clamp(34px, 3.8vw, 54px); }
.fl-galleria__nome {
  display: flex; align-items: center; gap: 18px;
  color: var(--oro); font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; line-height: 1.2;
}
.fl-galleria__nome::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(132, 115, 87, .6), rgba(132, 115, 87, 0)); }
/* righe giustificate: ogni foto cresce in proporzione alla sua larghezza, così nella riga hanno tutte la stessa altezza */
.fl-galleria__foto { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.fl-galleria__foto .fl-foto { flex: var(--ar, 1) 1 calc(var(--ar, 1) * 300px); min-width: 0; }
.fl-galleria__foto .fl-foto img { width: 100%; height: auto; }
.fl-galleria .thk-nota-foto { margin-top: 22px; }
/* 2 Step (22/10/2026): le foto vere sono tutte verticali 3:4. Righe giustificate a colonne uguali, così nessuna
   foto rimasta da sola in fondo si allarga a tutta riga: sei per riga da computer, tre sui portatili piccoli;
   la Classe B (due foto) resta alla stessa misura del Vito. Da telefono resta la striscia che scorre. */
@media (min-width: 900px) {
  .fl-galleria__foto { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fl-galleria__foto .fl-foto { min-width: 0; }
}
@media (min-width: 900px) and (max-width: 1179px) {
  .fl-galleria__foto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── il lightbox: avanti e indietro, col dito e con la tastiera, il contatore e la didascalia ── */
html:has(.fl-lightbox[open]) { overflow: hidden; }
.fl-lightbox {
  position: fixed; inset: 0;
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  overflow: hidden;
  background: rgba(8, 7, 8, .985); color: var(--testo);
  opacity: 0;
  transition: opacity .2s ease, overlay .2s allow-discrete, display .2s allow-discrete;
}
.fl-lightbox[open] { opacity: 1; transition: opacity .35s var(--ease-out), overlay .35s allow-discrete, display .35s allow-discrete; }
@starting-style { .fl-lightbox[open] { opacity: 0; } }
.fl-lightbox::backdrop { background: transparent; }
.fl-lightbox__scena {
  position: absolute; margin: 0;
  inset: calc(72px + env(safe-area-inset-top, 0px)) 96px calc(76px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: center;
  touch-action: pan-y pinch-zoom;
}
.fl-lightbox__foto {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.fl-lightbox__piede {
  position: fixed; left: 96px; right: 96px; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  font-size: 15px; line-height: 1.45; color: var(--testo-2);
}
.fl-lightbox__didascalia { text-wrap: pretty; }
.fl-lightbox__conta { flex: none; color: var(--oro); font-size: 14px; letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.fl-lightbox__prima, .fl-lightbox__dopo { position: absolute; top: 50%; margin-top: -24px; }
.fl-lightbox__prima { left: calc(24px + env(safe-area-inset-left, 0px)); }
.fl-lightbox__dopo { right: calc(24px + env(safe-area-inset-right, 0px)); }
.fl-lightbox__chiudi {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px));
  width: 48px; height: 48px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 2px; background: transparent; color: var(--testo);
  font-size: 26px; line-height: 1; cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: background-color .2s ease, transform .16s var(--ease-out);
}
.fl-lightbox__chiudi:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .fl-lightbox__chiudi:hover { background: rgba(255, 255, 255, .1); }
}

/* ── invito finale: l'icona del passeggero accanto al numero ─────────── */
.fl-invito__numero { display: flex; align-items: center; gap: 12px; }
.fl-invito__ico { width: 30px; height: 30px; flex: none; }

/* ════════════════════════════════════════════════════════════════════════
   TABLET
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .fl-mezzo__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .fl-mezzo__nome { font-size: clamp(38px, 4.6vw, 52px); }
  .fl-scheda__palco { height: 190px; }
  .fl-scheda__nome { font-size: 18px; }
  .fl-scheda__motto { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════════
   TELEFONO
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* home: le linguette con le icone e l'auto grande a tutta larghezza, che si cambia col dito */
  .fl-home { padding-top: 52px; padding-bottom: 40px; }
  .fl-home__riga { margin-top: 22px; }
  .fl-linguette {
    position: relative;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid rgba(132, 115, 87, .4);
  }
  .fl-linguetta {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 62px; padding: 6px 2px 8px;
    border: 0; background: none; cursor: pointer;
    color: var(--testo-2); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    transition: color .2s ease;
  }
  .fl-linguetta .fl-ico { width: 30px; height: 30px; opacity: .5; transition: opacity .2s ease, transform .16s var(--ease-out); }
  .fl-linguetta[aria-pressed="true"] { color: var(--oro); }
  .fl-linguetta[aria-pressed="true"] .fl-ico { opacity: 1; }
  .fl-linguetta:active .fl-ico { transform: scale(.92); }
  .fl-linguetta:focus-visible { outline-offset: -3px; }
  .fl-linguette__linea {
    position: absolute; left: 0; bottom: -1px; width: 25%; height: 1px;
    background: var(--oro);
    transition: transform .38s var(--ease-in-out);
  }
  .fl-schede { grid-template-columns: minmax(0, 1fr); margin-top: 16px; touch-action: pan-y; }
  .fl-scheda {
    grid-area: 1 / 1; padding: 0; border: 0;
    opacity: 0; visibility: hidden; transform: translateX(24px);
    transition: opacity .2s ease, transform .26s var(--ease-out), visibility 0s linear .26s;
  }
  .fl-scheda.e-attiva { opacity: 1; visibility: visible; transform: none; transition: opacity .38s var(--ease-out), transform .38s var(--ease-out), visibility 0s; }
  .fl-scheda__palco { --terra: 24px; height: auto; aspect-ratio: 358 / 214; }
  .fl-scheda__auto--davanti { width: 92%; }
  .fl-scheda__categoria { margin-top: 16px; }
  .fl-scheda__nome { font-size: 20px; }
  .fl-scheda__icona { width: 58px; height: 58px; }
  .fl-scheda__motto { font-size: 17px; }
  .fl-scheda__freccia { padding-top: 12px; }

  /* /flotta: la prima schermata */
  .fl-hero { min-height: 0; justify-content: flex-start; padding-top: calc(var(--testata) + env(safe-area-inset-top, 0px) + 24px); padding-bottom: 24px; }
  .fl-hero__testi { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fl-hero__titolo { font-size: clamp(30px, 8.6vw, 38px); line-height: 1.12; }
  .fl-hero__lato { padding-bottom: 0; }
  .fl-hero__sotto { font-size: 17px; }
  .fl-hero__testo { font-size: 16px; }
  .fl-hero__azioni { margin-top: 20px; }
  .fl-hero__azioni .btn { width: 100%; }
  .fl-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-top: 30px; }
  .fl-fila__palco { padding-bottom: 20px; }
  .fl-fila__palco::before { height: 48px; bottom: -6px; left: -16%; right: -16%; }
  .fl-fila__palco::after { bottom: 14px; height: 10px; }
  .fl-fila__nome { margin-top: 0; gap: 8px; font-size: 11px; letter-spacing: .16em; }
  .fl-fila__nome .fl-ico { width: 22px; height: 22px; }

  /* il selettore: quattro pulsanti da 25% */
  .fl-selettore__voci { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
  .fl-selettore__voce { flex-direction: column; gap: 3px; min-height: 56px; padding: 4px 0 6px; font-size: 11px; letter-spacing: .12em; }
  .fl-selettore__voce .fl-ico { width: 24px; height: 24px; }

  /* lo showroom in colonna: nome, palco a tutta larghezza, miniature, testi, la striscia */
  .fl-mezzo { padding: 52px 0 34px; scroll-margin-top: 40px; }
  .fl-mezzo__griglia { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "testa" "media" "testi"; }
  .fl-mezzo__nome { margin-top: 14px; font-size: clamp(34px, 10vw, 44px); }
  .fl-mezzo__media { margin: 12px calc(-1 * var(--gutter)) 0; }
  .fl-palco { --terra: 14%; aspect-ratio: 390 / 262; }
  .fl-vista { width: 91%; }
  .fl-vista--profilo { width: 98%; }
  .fl-viste { gap: 0; padding: 0 var(--gutter); }
  .fl-viste__voce { flex: 1 1 0; width: auto; min-height: 58px; }
  .fl-viste__voce img { height: 40px; }
  .fl-mezzo__testi { margin-top: 18px; }
  .fl-mezzo__testo { font-size: 16.5px; }
  .fl-mezzo__punti li { gap: 14px; font-size: 15.5px; }
  .fl-mezzo__punti .fl-ico { width: 34px; height: 34px; }
  .fl-mezzo__wa { width: 100%; margin-top: 24px; }
  .fl-striscia { margin-top: 30px; }
  .fl-striscia__pista { gap: 10px; }
  .fl-striscia__pista::after { flex-basis: calc(var(--pad) - 10px); }
  .fl-striscia .fl-foto { height: 220px; }
  .fl-striscia__comandi { margin-top: 14px; }
  .fl-striscia__comandi .fl-freccia { display: none; }
  .fl-striscia__avanza { margin-right: 0; }

  /* a bordo: la riga che scorre */
  .fl-bordo__griglia { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fl-bordo__composizione {
    display: flex; gap: 10px; max-width: none;
    margin: 26px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter);
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .fl-bordo__composizione::-webkit-scrollbar { display: none; }
  .fl-bordo__composizione::after { content: ""; flex: 0 0 calc(var(--gutter) - 10px); }
  .fl-bordo__foto { flex: none; height: auto; scroll-snap-align: start; }
  /* la grande intera, larga quanto lo schermo; le piccole alte uguali, la seconda si vede scorrendo */
  .fl-bordo__foto--grande { width: min(calc(100vw - 2 * var(--gutter)), 560px); aspect-ratio: 16 / 9; }
  .fl-bordo__foto--piccola { width: min(calc((100vw - 2 * var(--gutter)) * .75), 420px); aspect-ratio: 4 / 3; }
  .fl-bordo__elenco { padding-top: 20px; }

  /* la galleria: una striscia per mezzo che scorre col dito */
  .fl-galleria__foto {
    flex-wrap: nowrap; gap: 10px;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter);
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .fl-galleria__foto::-webkit-scrollbar { display: none; }
  .fl-galleria__foto::after { content: ""; flex: 0 0 calc(var(--gutter) - 10px); }
  .fl-galleria__foto .fl-foto { flex: none; height: 260px; scroll-snap-align: start; }
  .fl-galleria__foto .fl-foto img { width: auto; height: 100%; max-width: none; }

  /* il lightbox: la foto a tutta larghezza, frecce e contatore in basso */
  .fl-lightbox__scena { inset: calc(68px + env(safe-area-inset-top, 0px)) 0 calc(138px + env(safe-area-inset-bottom, 0px)); }
  .fl-lightbox__piede { left: 16px; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); font-size: 14px; gap: 16px; }
  .fl-lightbox__prima, .fl-lightbox__dopo { top: auto; margin-top: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .fl-lightbox__prima { left: calc(16px + env(safe-area-inset-left, 0px)); }
  .fl-lightbox__dopo { right: calc(16px + env(safe-area-inset-right, 0px)); }
}

@media (max-width: 374px) {
  .fl-hero { padding-top: calc(var(--testata) + env(safe-area-inset-top, 0px) + 14px); }
  .fl-hero__sotto { font-size: 15px; line-height: 1.42; }
  .fl-hero__testo { margin-top: 6px; font-size: 14.5px; }
  .fl-hero__azioni { margin-top: 16px; }
  .fl-fila { margin-top: 18px; row-gap: 2px; }
  .fl-fila__palco { padding-bottom: 16px; }
  .fl-fila__nome { min-height: 34px; letter-spacing: .1em; font-size: 10.5px; gap: 6px; }
  .fl-fila__nome .fl-ico { width: 20px; height: 20px; }
  .fl-selettore__voce, .fl-linguetta { font-size: 10px; letter-spacing: .08em; }
  .fl-mezzo__nome { font-size: 32px; }
  .fl-mezzo__testo, .fl-mezzo__punti li { font-size: 14.5px; }
  .fl-scheda__nome { font-size: 18px; }
  .fl-scheda__motto { font-size: 15.5px; }
  .fl-striscia .fl-foto { height: 196px; }
  .fl-galleria__foto .fl-foto { height: 230px; }
}

/* ════════════════════════════════════════════════════════════════════════
   MENO MOVIMENTO: restano le dissolvenze, spariscono gli spostamenti (niente giro all'entrata, lo dice il JS)
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .fl-hero__titolo, .fl-hero__sotto, .fl-hero__testo, .fl-hero__azioni { animation-name: fl-appare; }
  .fl-fila__auto { animation: none; }
  .fl-fila__palco::before { animation-name: fl-appare; }
  .fl-js .fl-home__riga:not(.e-dentro) .fl-scheda__link { translate: none; }
  .fl-js .fl-home__riga:not(.e-dentro) .fl-scheda__auto--davanti { translate: none; }
  .fl-js .fl-mezzo:not(.e-dentro):not(:target) .fl-palco__auto { transform: none; }
  .fl-js .fl-mezzo:not(.e-dentro):not(:target) .fl-palco::before { transform: none; }
  .fl-vista, .fl-vista.e-prima { transform: translateX(-50%); }
  .fl-scheda__auto--profilo { transform: translateX(-50%); }
  .fl-scheda, .fl-scheda.e-attiva { transform: none !important; }
  .fl-fila__link:active, .fl-scheda__link:active, .fl-foto:active, .fl-selettore__voce:active { scale: none; }
  .fl-viste__voce:active, .fl-freccia:active, .fl-lightbox__chiudi:active { transform: none; }
  .fl-freccia--indietro:active .fl-freccia__ico { transform: scaleX(-1); }
  .fl-lightbox__foto { transition: opacity .3s ease; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .fl-scheda__link:hover .fl-scheda__auto--davanti, .fl-scheda__link:hover .fl-scheda__auto--profilo { transform: translateX(-50%); }
  .fl-fila__link:hover .fl-fila__auto { transform: none; }
  .fl-foto:hover img, .fl-bordo__foto:hover img { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   LA CORREZIONE DOPO IL CONTROLLO (21/10/2026)
   ════════════════════════════════════════════════════════════════════════ */
/* il palco: la luce arriva al bordo, l'auto no; a destra lo stesso margine della pagina a sinistra */
@media (min-width: 900px) {
  .fl-palco__auto { right: var(--gutter); }
  .fl-vista { width: 90%; }
  .fl-vista--profilo { width: 100%; }
  .fl-palco::before { right: calc(var(--gutter) - 4%); }
  .fl-palco::after { right: calc(10% + var(--gutter)); }
  .fl-viste { padding-right: var(--gutter); }
}

/* il peso: palco, miniature e striscia di un mezzo si caricano quando lo showroom si avvicina
   (flotta.js mette .e-vicino); prima restano fuori dal disegno, così il browser non li scarica */
.js .fl-mezzo:not(.e-vicino):not(:target) .fl-vista,
.js .fl-mezzo:not(.e-vicino):not(:target) .fl-viste__voce img,
.js .fl-mezzo:not(.e-vicino):not(:target) .fl-foto img { display: none; }
@media (min-width: 900px) { .fl-viste__voce { min-height: 64px; } }
/* il lightbox copre tutta la pagina: fondo pieno (la dissolvenza la fa l'opacità del dialog) */
.fl-lightbox { background: var(--nero); }

/* la riga della home: la frase del Vito su una riga sola, così sotto le icone di Classe B, E e V
   resta solo il suo spazio (il copy ha la frase solo per il Vito) */
.fl-scheda__motto { max-width: none; font-size: clamp(15px, 1.12vw, 17px); }
@media (max-width: 899px) { .fl-scheda__motto { font-size: 17px; } }
@media (max-width: 374px) { .fl-scheda__motto { font-size: 15.5px; } }

/* ════════════════════════════════════════════════════════════════════════
   IL PANNELLO (6-ter): un mezzo tolto dal sito o uno in più. Con quattro mezzi non cambia niente; con un numero
   diverso la fila, le schede della home, le linguette e il selettore si dividono lo spazio in parti uguali.
   ════════════════════════════════════════════════════════════════════════ */
.fl-schede:not(:has(> .fl-scheda:nth-child(4):last-child)) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.fl-fila:not(:has(> .fl-fila__mezzo:nth-child(4):last-child)) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@media (max-width: 899px) {
  .fl-schede:not(:has(> .fl-scheda:nth-child(4):last-child)) { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto; }
  .fl-fila:not(:has(> .fl-fila__mezzo:nth-child(4):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; }
  .fl-linguette:not(:has(> .fl-linguetta:nth-of-type(4):last-of-type)),
  .fl-selettore__voci:not(:has(> .fl-selettore__voce:nth-of-type(4):last-of-type)) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .fl-linguette:has(> .fl-linguetta:nth-of-type(1):last-of-type) .fl-linguette__linea { width: 100%; }
  .fl-linguette:has(> .fl-linguetta:nth-of-type(2):last-of-type) .fl-linguette__linea { width: 50%; }
  .fl-linguette:has(> .fl-linguetta:nth-of-type(3):last-of-type) .fl-linguette__linea { width: 33.3333%; }
  .fl-linguette:has(> .fl-linguetta:nth-of-type(5):last-of-type) .fl-linguette__linea { width: 20%; }
  .fl-linguette:has(> .fl-linguetta:nth-of-type(6):last-of-type) .fl-linguette__linea { width: 16.6667%; }
}