/* ============================================================
   SESTANTE MOTORS · sistema visivo v4
   Sito dimostrativo di DirezioneX: l'attività è di fantasia.
   Direzione: l'insegna stradale. Nero profondo, lettering argento,
   carta calda sotto. Un solo accento, il giallo del marchio, usato
   poco: bottone principale, filo sotto i prezzi, voce attiva.
   Niente barre colorate, niente inclinazioni, niente corsivi urlati:
   filetti sottili, spazi larghi, numeri tabellari. Eleganza da
   concessionaria seria, non da volantino.
   ============================================================ */

:root {
  --nero: #0b0b0d;
  --nero-2: #141417;
  --carta: #faf9f5;
  --carta-2: #f2f0ea;
  --avorio: #e8e5dc;
  --inchiostro: #1a1a1c;
  --inchiostro-2: #46464a;
  --muto: #77767c;
  --argento: #d6d8dc;
  --velo: rgba(26, 26, 28, 0.12);
  --velo-forte: rgba(26, 26, 28, 0.3);
  --velo-chiaro: rgba(250, 249, 245, 0.14);

  --giallo: #f0b400;
  --giallo-acceso: #ffc41d;
  --rosso: #c22a22;
  --verde: #1b7f4d;
  --blu: #1c4fa8;
  --wa: #25d366;

  --r: 2px;
  --max: 1280px;

  --sans: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
  --cifre: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--giallo); color: var(--nero); }

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.05rem, 1.7vw, 1.3rem); letter-spacing: -0.015em; }
h4 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin: 0; }
p { margin: 0 0 1rem; max-width: 68ch; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 clamp(18px, 4vw, 44px); }
.wrap-stretto { max-width: 880px; }

/* ------------------------------------------------------- elementi base */

/* etichetta piccola: usata per badge nelle foto e fascia anteprima */
.targa {
  display: inline-block;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r); line-height: 1.3;
  background: rgba(11, 11, 13, 0.82); color: var(--carta);
}
.targa > span { display: inline; }
.targa-nera { background: rgba(11, 11, 13, 0.82); color: var(--carta); }
.targa-blu { background: rgba(11, 11, 13, 0.82); color: var(--carta); }
.targa-rossa { background: var(--rosso); color: var(--carta); }
.targa-verde { background: rgba(11, 11, 13, 0.82); color: var(--carta); }

/* occhiello di sezione */
.occhio {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muto); margin-bottom: 16px;
}
.occhio::before { content: ''; width: 22px; height: 1px; background: var(--inchiostro-2); flex: 0 0 auto; }
.sez-scura .occhio, .occhio-chiaro { color: rgba(250, 249, 245, 0.6); }
.sez-scura .occhio::before, .occhio-chiaro::before { background: rgba(250, 249, 245, 0.4); }

/* ------------------------------------------------------------ bottoni */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 0.9rem; line-height: 1;
  letter-spacing: 0.01em;
  padding: 13px 22px;
  border: 1px solid var(--inchiostro);
  border-radius: var(--r);
  background: transparent; color: var(--inchiostro);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--inchiostro); color: var(--carta); }
.btn-giallo { background: var(--giallo); border-color: var(--giallo); color: var(--nero); }
.btn-giallo:hover { background: var(--giallo-acceso); border-color: var(--giallo-acceso); color: var(--nero); }
.btn-nero { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); }
.btn-nero:hover { background: var(--nero); }
.btn-wa { background: var(--wa); border-color: var(--wa); color: #06240f; }
.btn-wa:hover { background: #3ee27d; border-color: #3ee27d; color: #06240f; }
.btn-blu { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); }
.btn-blu:hover { background: var(--nero); }
.btn-linea { border-color: var(--velo-forte); }
.btn-linea:hover { border-color: var(--inchiostro); background: transparent; color: var(--inchiostro); }
.btn-linea-chiara { border-color: rgba(250, 249, 245, 0.4); color: var(--carta); }
.btn-linea-chiara:hover { background: var(--carta); color: var(--nero); border-color: var(--carta); }
.btn-s { font-size: 0.82rem; padding: 10px 16px; }
.btn-l { font-size: 0.98rem; padding: 15px 28px; }
.btn-pieno { width: 100%; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--blu); outline-offset: 2px;
}

/* ----------------------------------------------- fascia dimostrativa */

/* Sta sopra la testata e scorre via con la pagina: la testata resta fissa
   da sola, quindi menu mobile e ancore non cambiano. */
.avviso { background: var(--nero); color: rgba(250, 249, 245, 0.78); font-size: 0.76rem; line-height: 1.45; padding: 8px 0; border-bottom: 1px solid var(--giallo); }
.avviso .wrap { display: flex; align-items: center; justify-content: center; gap: 4px 14px; flex-wrap: wrap; text-align: center; }
.avviso b { color: var(--giallo); font-weight: 700; }
.avviso a { color: var(--carta); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* avviso che compare quando si tocca un recapito inventato */
.avviso-demo {
  position: fixed; left: 50%; bottom: 84px; z-index: 120;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  width: max-content; max-width: calc(100vw - 32px);
  background: var(--nero); color: var(--carta); border: 1px solid var(--giallo); border-radius: var(--r);
  padding: 12px 16px; font-size: 0.85rem; line-height: 1.45; text-align: center;
  box-shadow: 0 18px 40px -18px rgba(11, 11, 13, 0.6);
  transition: opacity 0.2s, transform 0.2s;
}
.avviso-demo.on { opacity: 1; transform: translate(-50%, 0); }

/* ----------------------------------------------------------- testata */

.top { background: var(--nero); color: rgba(250, 249, 245, 0.55); font-size: 0.78rem; border-top: 1px solid var(--velo-chiaro); border-bottom: 1px solid var(--velo-chiaro); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 34px; }
.top a { color: rgba(250, 249, 245, 0.85); display: inline-flex; align-items: center; gap: 7px; }
.top a:hover { color: var(--carta); }
.top .sep { margin-left: auto; }
.top-voce { display: none; align-items: center; gap: 7px; }

/* la fascia nera dell'insegna stradale */
/* #testa e' solo il contenitore riempito da app.js: senza display: contents la
   testata resterebbe chiusa li' dentro e "sticky" non farebbe presa. */
#testa { display: contents; }
.testata { position: sticky; top: 0; z-index: 80; background: var(--nero); }
.testata::after { content: ''; display: block; height: 1px; background: var(--velo-chiaro); }
.testata .wrap { display: flex; align-items: center; gap: 22px; height: 76px; }

/* marchio di fantasia in SVG (img/logo.svg): un piccolo sestante e il nome in tracciati */
.logo { display: inline-flex; align-items: center; }
.logo-img { display: block; height: 46px; width: auto; }

.nav { display: none; align-items: center; margin-left: auto; height: 100%; align-self: stretch; }
.nav a {
  font-size: 0.86rem; font-weight: 500; letter-spacing: 0.02em;
  padding: 0 15px; height: 100%; display: inline-flex; align-items: center;
  position: relative; color: rgba(250, 249, 245, 0.72);
  transition: color 0.15s;
}
.nav a:hover { color: var(--carta); }
.nav a.on { color: var(--carta); font-weight: 600; }
.nav a.on::after {
  content: ''; position: absolute; left: 15px; right: 15px; bottom: 0;
  height: 2px; background: var(--giallo);
}
.testata-azioni { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav + .testata-azioni { margin-left: 0; }
.apri-menu {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid rgba(250, 249, 245, 0.35); border-radius: var(--r);
  background: transparent; cursor: pointer; color: var(--carta);
}
.menu-mobile { display: none; border-top: 1px solid var(--velo-chiaro); background: var(--nero); }
.menu-mobile.on { display: block; }
.menu-mobile a {
  display: block; padding: 15px clamp(18px, 4vw, 44px);
  font-size: 1rem; font-weight: 500; color: rgba(250, 249, 245, 0.85);
  border-bottom: 1px solid var(--velo-chiaro);
}

/* -------------------------------------------------------------- hero */

.hero { position: relative; background: var(--nero); color: var(--carta); overflow: hidden; }
.hero-foto { position: absolute; inset: 0; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 78% center; opacity: 0.92; filter: saturate(0.95); }
.hero-foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(94deg, rgba(11, 11, 13, 0.94) 6%, rgba(11, 11, 13, 0.72) 38%, rgba(11, 11, 13, 0.12) 72%, rgba(11, 11, 13, 0.3) 100%);
}
/* solo sopra e sotto: ai lati resta il margine di .wrap, senno' su telefono il testo tocca il bordo */
.hero-int { position: relative; padding-top: clamp(60px, 10vw, 130px); padding-bottom: clamp(74px, 9vw, 110px); }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(250, 249, 245, 0.6);
  margin-bottom: clamp(16px, 2vw, 26px);
}
.hero-kicker::before { content: ''; width: 22px; height: 1px; background: rgba(250, 249, 245, 0.4); }
.hero h1 { color: var(--carta); max-width: 16ch; }
.hero h1 .giallo { color: var(--giallo); }
.hero-testo { color: rgba(250, 249, 245, 0.72); max-width: 50ch; margin-top: clamp(16px, 2vw, 24px); font-size: clamp(0.98rem, 1.3vw, 1.1rem); line-height: 1.65; }
.hero-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }
.hero-fiducia {
  display: flex; align-items: center; gap: 10px 26px; flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 36px); font-size: 0.86rem; color: rgba(250, 249, 245, 0.6);
}
.hero-fiducia b { color: var(--carta); }
.stelle { color: var(--giallo); letter-spacing: 2px; }

/* pannello di ricerca sospeso sul bordo dell'hero */
.banda-ricerca { position: relative; z-index: 5; padding: 0 clamp(18px, 4vw, 44px); margin-top: -44px; }
.banda-ricerca .rr-int {
  max-width: calc(var(--max) - 2 * clamp(18px, 4vw, 44px)); margin: 0 auto;
  background: var(--carta); border: 1px solid var(--velo);
  border-radius: var(--r); padding: clamp(18px, 2.6vw, 26px);
  box-shadow: 0 30px 60px -30px rgba(11, 11, 13, 0.45);
}
.banda-ricerca h4 { color: var(--muto); margin-bottom: 14px; }
.rr-campi { display: grid; gap: 10px; grid-template-columns: 1fr; }

/* --------------------------------------------------------- form base */

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muto); }
.campo select, .campo input, .campo textarea {
  width: 100%; background-color: #fff; border: 1px solid var(--velo-forte);
  border-radius: var(--r); padding: 11px 12px;
  font-family: var(--sans); font-size: 0.92rem; color: var(--inchiostro);
  -webkit-appearance: none; appearance: none;
}
.campo select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231a1a1c' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--blu); outline-offset: 0; border-color: var(--blu); }
.campo-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spunta { display: flex; gap: 9px; align-items: flex-start; font-size: 0.82rem; color: var(--muto); cursor: pointer; }
.spunta input { margin-top: 3px; accent-color: var(--inchiostro); }
.form { display: grid; gap: 13px; }
.form-2 { display: grid; gap: 13px; grid-template-columns: 1fr; }
.esito { display: none; padding: 12px 14px; border: 1px solid var(--verde); background: rgba(27, 127, 77, 0.07); color: var(--verde); font-size: 0.85rem; border-radius: var(--r); }
.esito.on { display: block; }
.campo input[type=range] { -webkit-appearance: auto; appearance: auto; width: 100%; padding: 0; border: 0; background: none; accent-color: var(--inchiostro); }

/* ------------------------------------------------------------ sezioni */

.sez { padding: clamp(56px, 9vw, 110px) 0; }
.sez-carta2, .sez-grigia { background: var(--carta-2); }
.sez-scura { background: var(--nero); color: var(--carta); }
.sez-scura h2, .sez-scura h3 { color: var(--carta); }
.sez-scura p { color: rgba(250, 249, 245, 0.7); }
.testa { margin-bottom: clamp(26px, 4vw, 46px); }
.testa p { color: var(--muto); margin: 14px 0 0; }
.testa-riga { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ------------------------------------------- banda dei punti di forza */

.banda-forza { background: var(--carta); border-top: 1px solid var(--velo); border-bottom: 1px solid var(--velo); padding: clamp(24px, 3.6vw, 36px) 0; }
.banda-forza .wrap { display: flex; align-items: center; justify-content: center; gap: 12px clamp(24px, 5vw, 64px); flex-wrap: wrap; }
.banda-forza .etichetta { width: 100%; text-align: center; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muto); margin-bottom: 4px; }
.punto-forza {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--inchiostro-2); text-align: center;
}

/* -------------------------------------------------------- card vettura */

.griglia { display: grid; gap: clamp(18px, 2.6vw, 28px); grid-template-columns: 1fr; }

.vettura { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--velo); border-radius: var(--r); position: relative; transition: border-color 0.18s, box-shadow 0.18s; }
.vettura:hover { border-color: var(--velo-forte); box-shadow: 0 18px 40px -24px rgba(11, 11, 13, 0.28); }
.vettura-foto { position: relative; display: block; overflow: hidden; background: var(--avorio); }
/* height: auto serve perche' l'attributo height dell'immagine vincerebbe su aspect-ratio e taglierebbe l'auto ai lati */
.vettura-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.vettura:hover .vettura-foto img { transform: scale(1.03); }
.vettura-badge { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 5px; z-index: 1; max-width: calc(100% - 60px); }
.vettura-cuore {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  display: grid; place-items: center; background: rgba(250, 249, 245, 0.92);
  border: 1px solid var(--velo); border-radius: var(--r); cursor: pointer; color: var(--muto); z-index: 1;
}
.vettura-cuore.on { color: var(--rosso); border-color: var(--rosso); }
.vettura-info { padding: 18px 18px 0; display: flex; flex-direction: column; flex: 1; }
.vettura-marca { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muto); margin-bottom: 6px; }
.vettura-nome { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.vettura-nome a:hover { color: var(--inchiostro-2); }
.vettura-versione { font-size: 0.84rem; color: var(--muto); margin: 4px 0 0; }
.vettura-dati {
  display: flex; flex-wrap: wrap; gap: 4px 0; margin: 14px 0 0; padding: 10px 0 0;
  border-top: 1px solid var(--velo);
  font-size: 0.78rem; color: var(--inchiostro-2); font-variant-numeric: tabular-nums;
}
.vettura-dati span { display: inline-flex; align-items: center; }
.vettura-dati span + span::before { content: ''; width: 1px; height: 10px; background: var(--velo); margin: 0 10px; }
.vettura-piede { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 18px 18px; margin-top: auto; }
.prezzo-prima { font-size: 0.78rem; color: var(--muto); text-decoration: line-through; display: block; margin-bottom: 2px; }
.targa-prezzo { display: inline-block; background: none; padding: 0 0 3px; border-bottom: 2px solid var(--giallo); transform: none; margin: 0; }
.targa-prezzo > span {
  display: inline; transform: none;
  font-family: var(--cifre); font-weight: 600; font-style: normal;
  font-size: 1.6rem; line-height: 1; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums; color: var(--inchiostro);
}
.prezzo-rata { display: block; font-size: 0.74rem; color: var(--muto); margin-top: 8px; }
.prezzo-rata b { color: var(--inchiostro); font-weight: 600; }
.vettura-vai {
  font-size: 0.82rem; font-weight: 600; color: var(--inchiostro);
  border-bottom: 1px solid var(--velo-forte); padding-bottom: 2px; white-space: nowrap;
  transition: border-color 0.15s;
}
.vettura-vai:hover { border-bottom-color: var(--inchiostro); }

.griglia-evidenza .vettura:first-child .vettura-nome { font-size: 1.25rem; }
.griglia-evidenza .vettura:first-child .targa-prezzo > span { font-size: 1.85rem; }

/* vista elenco */
.griglia.elenco { grid-template-columns: 1fr; }
.griglia.elenco .vettura { flex-direction: row; }
.griglia.elenco .vettura-foto { flex: 0 0 38%; }
.griglia.elenco .vettura-foto img { height: 100%; aspect-ratio: auto; min-height: 190px; }
.griglia.elenco .vettura-info { padding: 18px 20px; }
.griglia.elenco .vettura-piede { flex: 0 0 215px; flex-direction: column; align-items: flex-start; justify-content: center; border-left: 1px solid var(--velo); }

/* --------------------------------------------------------- parco auto */

.parco { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
.parco-intro { padding: clamp(22px, 3.4vw, 38px) 0 clamp(24px, 3.4vw, 40px); }
.titolo-parco { margin-bottom: 14px; }
.sottotitolo-parco { max-width: 64ch; margin: 0; color: var(--muto); }
.sez-parco { padding-bottom: clamp(60px, 9vw, 100px); }

.briciole { font-size: 0.76rem; color: var(--muto); padding: 16px 0 0; }
.briciole a:hover { color: var(--inchiostro); }
.briciole span { color: var(--velo-forte); margin: 0 7px; }

.filtri { background: var(--carta); border: 1px solid var(--velo); border-radius: var(--r); }
.filtri-testa {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--velo); background: var(--carta);
}
.filtri-testa h3 { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; display: flex; gap: 9px; align-items: center; color: var(--inchiostro); }
.filtri-corpo { padding: 16px; display: grid; gap: 20px; }
.filtri-gruppo { display: grid; gap: 9px; }
.filtri-gruppo > h4 { color: var(--muto); padding-bottom: 8px; border-bottom: 1px solid var(--velo); font-size: 0.64rem; }
.pillole { display: flex; flex-wrap: wrap; gap: 6px; }
.pillola-f {
  border: 1px solid var(--velo-forte); background: #fff; border-radius: var(--r);
  padding: 7px 14px; cursor: pointer; color: var(--inchiostro-2);
  font-size: 0.82rem; font-weight: 500;
  transition: 0.14s;
}
.pillola-f:hover { border-color: var(--inchiostro); color: var(--inchiostro); }
.pillola-f.on { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); font-weight: 600; }

.risultati-testa {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--velo-forte); padding-bottom: 14px; margin-bottom: 18px;
}
.risultati-conta { font-size: 0.88rem; color: var(--muto); }
.risultati-conta b { color: var(--inchiostro); font-weight: 700; font-size: 1.05rem; margin-right: 1px; }
.risultati-strumenti { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.campo-ordina select { min-width: 190px; padding: 9px 32px 9px 11px; font-size: 0.84rem; }
.vista-switch { display: flex; border: 1px solid var(--velo-forte); border-radius: var(--r); overflow: hidden; }
.vista-switch button { border: 0; background: #fff; padding: 9px 11px; cursor: pointer; color: var(--muto); display: grid; place-items: center; }
.vista-switch button.on { background: var(--inchiostro); color: var(--carta); }
.filtri-mobile-apri { display: inline-flex; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--carta-2); border: 1px solid var(--velo); border-radius: 999px;
  padding: 5px 10px 5px 13px; font-size: 0.78rem; font-weight: 500;
}
.chip button { border: 0; background: none; cursor: pointer; color: var(--muto); line-height: 1; padding: 0; font-size: 1rem; }
.chip button:hover { color: var(--rosso); }
button.chip { cursor: pointer; }
button.chip:hover { border-color: var(--inchiostro); }

.pagine { display: flex; gap: 6px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.pagine button {
  min-width: 40px; height: 40px; border: 1px solid var(--velo-forte); background: #fff;
  border-radius: var(--r); cursor: pointer; font-size: 0.88rem; font-weight: 500;
}
.pagine button.on { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); font-weight: 600; }
.pagine button:disabled { opacity: 0.35; cursor: default; }

.nessuno { padding: 60px 24px; text-align: center; border: 1px dashed var(--velo-forte); border-radius: var(--r); background: var(--carta-2); }
.nessuno h3 { margin-bottom: 8px; }
.nessuno .muto { max-width: 46ch; margin: 0 auto 18px; }

.blocco-richiesta { margin-top: 32px; border: 1px solid var(--velo); background: var(--carta-2); padding: 26px; border-radius: var(--r); }
.blocco-richiesta h3 { margin-bottom: 8px; }
.blocco-richiesta .btn { margin-top: 8px; }

/* ------------------------------------------------------ scheda veicolo */

.scheda { display: grid; gap: 30px; grid-template-columns: 1fr; align-items: start; margin-top: 20px; }

.galleria { border: 1px solid var(--velo); border-radius: var(--r); overflow: hidden; background: #fff; }
.galleria-principale { position: relative; background: var(--avorio); }
.galleria-principale img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.galleria-badge { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.galleria-conta { position: absolute; bottom: 14px; right: 14px; background: rgba(11, 11, 13, 0.78); color: var(--carta); font-size: 0.72rem; padding: 5px 10px; border-radius: var(--r); }
.galleria-mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 5px; }
.mini {
  aspect-ratio: 4 / 3; border: 1px dashed var(--velo-forte); border-radius: var(--r);
  display: grid; place-items: center; text-align: center; font-size: 0.6rem; color: var(--muto);
  background: var(--carta-2); padding: 4px; line-height: 1.3;
}
.mini.vera { border-style: solid; padding: 0; overflow: hidden; }
.mini.vera img { width: 100%; height: 100%; object-fit: cover; }

.pannello { border: 1px solid var(--velo); border-radius: var(--r); background: #fff; }
.pannello[id] { scroll-margin-top: 92px; }
.pannello-testa { padding: 14px 18px; border-bottom: 1px solid var(--velo); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pannello-testa h3 { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.pannello-corpo { padding: 18px; }

.scheda-marca { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muto); }
.scheda-titolo { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin: 8px 0 2px; }
.scheda-versione { font-size: 0.87rem; color: var(--muto); margin: 0 0 4px; }

.prezzone-blocco { margin: 18px 0 4px; }
.prezzone { display: inline-block; background: none; padding: 0 0 5px; border-bottom: 3px solid var(--giallo); transform: none; margin: 0; }
.prezzone > span {
  display: inline; transform: none;
  font-family: var(--cifre); font-weight: 600; font-style: normal;
  font-size: clamp(2.3rem, 4.6vw, 2.9rem); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--inchiostro);
}
.prezzo-nota { font-size: 0.78rem; color: var(--muto); margin: 12px 0 0; }

.rate-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--velo); font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.rate-riga:last-of-type { border-bottom: 0; }
.rate-riga b { font-weight: 700; }
.rate-evidenza {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--nero); color: var(--carta); padding: 14px 18px; margin: 16px 0; border-radius: var(--r);
}
.rate-evidenza .val { font-family: var(--cifre); font-weight: 600; font-size: 1.9rem; line-height: 1; color: var(--carta); font-variant-numeric: tabular-nums; }

.spec-gruppo { border-top: 1px solid var(--velo); padding-top: 16px; margin-top: 16px; }
.spec-gruppo:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.spec-gruppo h4 { color: var(--muto); margin-bottom: 8px; font-size: 0.64rem; }
.spec-elenco { display: grid; grid-template-columns: 1fr; margin: 0; }
.spec-riga { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--velo); font-size: 0.87rem; }
.spec-riga dt { color: var(--muto); }
.spec-riga dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.spec-riga dd.vuoto { font-weight: 400; color: var(--muto); font-style: italic; }
.spec-elenco.una { grid-template-columns: 1fr; }

.garanzie { display: grid; gap: 8px; }
.garanzia { display: flex; gap: 10px; align-items: flex-start; font-size: 0.87rem; }
.garanzia svg { flex: 0 0 auto; color: var(--verde); margin-top: 2px; }

.nota-anteprima {
  background: var(--carta-2); border: 1px solid var(--velo);
  padding: 14px 16px; font-size: 0.82rem; color: var(--inchiostro-2);
  border-radius: var(--r); margin-top: 16px; max-width: none;
}

.sez-simili { margin-top: clamp(44px, 7vw, 76px); }

/* ------------------------------------------------- indice dei servizi */

.indice-servizi { border-top: 1px solid var(--velo-forte); }
.voce-servizio {
  display: grid; grid-template-columns: 44px 1fr; gap: 4px 18px;
  padding: 26px 0; border-bottom: 1px solid var(--velo);
  align-items: start;
}
.voce-servizio .num {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--muto); padding-top: 5px;
  -webkit-text-stroke: 0; text-align: left; font-family: var(--sans); font-style: normal;
}
.voce-servizio h3 { margin-bottom: 6px; }
.voce-servizio p { color: var(--muto); font-size: 0.92rem; margin: 0 0 10px; max-width: 52ch; }
.voce-servizio a {
  font-size: 0.82rem; font-weight: 600;
  border-bottom: 1px solid var(--velo-forte); padding-bottom: 2px;
  transition: border-color 0.15s;
}
.voce-servizio a:hover { border-bottom-color: var(--inchiostro); }

/* ---------------------------------------------------------- recensioni */

.blocco-voto { display: grid; gap: 34px; grid-template-columns: 1fr; align-items: start; }
.votone { font-family: var(--cifre); font-weight: 600; font-size: clamp(5rem, 11vw, 8rem); line-height: 0.85; letter-spacing: -0.02em; }
.votone-sotto { margin-top: 14px; }
.votone-sotto .stelle { font-size: 1.15rem; }
.votone-sotto .conta { font-size: 0.88rem; color: var(--muto); margin-top: 5px; }
.nota-voto { margin-top: 18px; max-width: 44ch; font-size: 0.82rem; color: var(--muto); }
.recensioni-lista { border-top: 1px solid var(--velo-forte); }
.rec { padding: 20px 0; border-bottom: 1px solid var(--velo); }
.rec .stelle { font-size: 0.85rem; }
.rec p { font-size: 0.95rem; color: var(--inchiostro-2); margin: 9px 0; max-width: 60ch; }
.rec .chi { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muto); }
.voto-riga { display: flex; align-items: center; gap: 16px; }
.voto-riga .n { font-family: var(--cifre); font-weight: 600; font-size: 3.2rem; line-height: 0.9; }

/* ------------------------------------------------------ fascia permuta */

.fascia-permuta { background: var(--nero); color: var(--carta); border: 0; }
.fascia-permuta .wrap { padding-top: clamp(48px, 8vw, 92px); padding-bottom: clamp(48px, 8vw, 92px); }
.fascia-permuta-int { max-width: 60ch; }
.fascia-permuta-int .occhio { color: rgba(250, 249, 245, 0.6); }
.fascia-permuta-int .occhio::before { background: rgba(250, 249, 245, 0.4); }
.fascia-permuta-int h2 { color: var(--carta); margin-bottom: 16px; }
.fascia-permuta-int p { color: rgba(250, 249, 245, 0.7); font-size: 1rem; }
.fascia-azioni { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

/* ------------------------------------------------------------------ faq */

.faq { border-top: 1px solid var(--velo-forte); }
.faq details { border-bottom: 1px solid var(--velo); }
.faq summary {
  cursor: pointer; padding: 18px 0; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  font-size: 0.98rem; font-weight: 600; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.3rem; font-weight: 400; color: var(--muto); line-height: 1; flex: 0 0 auto; }
.faq details[open] summary::after { content: '\2013'; }
.faq details p { color: var(--muto); font-size: 0.93rem; padding-bottom: 20px; margin: 0; max-width: 72ch; }

/* --------------------------------------------------------- pagine lunghe */

.sez-servizi { padding-bottom: 64px; }
.servizio-lungo { display: grid; gap: 28px; grid-template-columns: 1fr; padding: clamp(34px, 5.6vw, 58px) 0; border-bottom: 1px solid var(--velo); scroll-margin-top: 60px; }
.servizio-lungo:last-child { border-bottom: 0; }
.servizio-lungo-testo h2 { margin: 12px 0 16px; }
.servizio-lungo-testo p { color: var(--muto); max-width: 58ch; }
.num-grande {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muto); display: inline-block; padding: 0; background: none; transform: none;
  font-family: var(--sans); font-style: normal;
}
.elenco-punti { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 10px; }
.elenco-punti li { position: relative; padding-left: 20px; font-size: 0.92rem; }
.elenco-punti li::before {
  content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 1.5px;
  background: var(--inchiostro-2); transform: none;
}
.foto-servizio { width: 100%; height: auto; border: 1px solid var(--velo); border-radius: var(--r); object-fit: cover; aspect-ratio: 4 / 3; }

.passi { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 22px; }
.passi li { display: flex; gap: 16px; align-items: flex-start; }
.passi h3 { margin-bottom: 5px; font-size: 1.02rem; }
.passi p { font-size: 0.9rem; margin: 0; color: var(--muto); }
.passo-n {
  flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--inchiostro); border-radius: 50%;
  background: transparent; color: var(--inchiostro);
  font-size: 0.85rem; font-weight: 700; transform: none; font-family: var(--sans); font-style: normal;
}
.passi-stretti { gap: 14px; margin-bottom: 16px; }
.passi-stretti .passo-n { width: 26px; height: 26px; font-size: 0.75rem; }

.testo-lungo h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin: 30px 0 12px; }
.testo-lungo h2:first-child { margin-top: 0; }
.testo-lungo p { color: var(--muto); max-width: 66ch; }
.testo-lungo strong { color: var(--inchiostro); }

.separatore { height: 1px; background: var(--velo); margin: 6px 0; }
.link-blu { color: var(--inchiostro); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--velo-forte); }
.link-blu:hover { text-decoration-color: var(--inchiostro); }
.pannello-nota { margin-top: 24px; }
.pila-bottoni { display: grid; gap: 8px; margin-top: 16px; }
.no-margin { margin: 0; }
.margine-sopra { margin-top: 14px; }
.muto { color: var(--muto); }
.piccolo { font-size: 0.82rem; }
.solo-desk { display: none; }
.solo-mob { display: block; }
.bianco { color: var(--carta); }

/* riquadro statico al posto della mappa: una griglia astratta, nessuna strada vera */
.mappa-riquadro { margin-top: 28px; padding: 0; overflow: hidden; }
.mappa-finta {
  position: relative; min-height: 300px; display: grid; place-items: center; text-align: center;
  padding: 40px 20px; color: var(--carta);
  background-color: var(--nero);
  background-image:
    linear-gradient(rgba(250, 249, 245, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 249, 245, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center;
}
.mappa-finta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(11, 11, 13, 0) 0%, rgba(11, 11, 13, 0.85) 78%);
}
.mappa-finta > div { position: relative; display: grid; justify-items: center; gap: 6px; }
.mappa-finta svg { color: var(--giallo); margin-bottom: 6px; }
.mappa-luogo { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.mappa-sotto { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(250, 249, 245, 0.6); }
.mappa-nota { font-size: 0.82rem; color: rgba(250, 249, 245, 0.6); max-width: 44ch; margin: 10px 0 0; }

/* ----------------------------------------------------- nota per il titolare */

.sez-titolare { padding-top: 0; }
.pannello-titolare { background: var(--carta-2); border: 1px solid var(--velo); }
.pannello-titolare .pannello-corpo { padding: clamp(26px, 4.4vw, 48px); }
.pannello-titolare h2 { margin: 12px 0 14px; }
.pannello-titolare p { color: var(--muto); max-width: 66ch; }
.pannello-titolare .btn { margin-top: 10px; }

/* --------------------------------------------------------------- footer */

.piede { background: var(--nero); color: rgba(250, 249, 245, 0.65); }
.piede-int { padding-top: clamp(44px, 7vw, 72px); padding-bottom: 28px; }
.piede-griglia { display: grid; gap: 34px; grid-template-columns: 1fr; }
.piede h4 { color: var(--carta); margin-bottom: 16px; font-size: 0.64rem; letter-spacing: 0.22em; }
.piede a { display: block; padding: 5px 0; font-size: 0.87rem; color: rgba(250, 249, 245, 0.65); }
.piede a:hover { color: var(--carta); }
.piede p { font-size: 0.87rem; max-width: 40ch; }
.piede .btn { display: inline-flex; padding: 10px 16px; }
.piede .btn-wa, .piede .btn-wa:hover { color: #06240f; }
.piede .logo-img { height: 40px; }
.piede-legale {
  border-top: 1px solid var(--velo-chiaro); margin-top: 38px; padding-top: 20px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 0.74rem; color: rgba(250, 249, 245, 0.4);
}

/* ---------------------------------------------------------- barra mobile */

.barra-giu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: 8px;
  background: var(--carta); border-top: 1px solid var(--velo-forte);
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
}
.barra-giu .btn { flex: 1; }

/* --------------------------------------------------------------- CRM */

.crm { display: grid; grid-template-columns: 1fr; min-height: 100vh; background: var(--carta-2); }
/* min-width: 0 = le tabelle larghe scorrono nel loro riquadro invece di allargare la pagina */
.crm-lato, .crm-corpo { min-width: 0; }
.crm-lato { background: var(--nero); padding: 20px 16px; }
.logo-crm { margin-bottom: 20px; display: inline-flex; }
.logo-crm .logo-img { height: 38px; }
.crm-lato nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.crm-lato nav button {
  background: transparent; border: 1px solid rgba(250, 249, 245, 0.18); color: rgba(250, 249, 245, 0.7);
  border-radius: var(--r); padding: 9px 14px; cursor: pointer; white-space: nowrap;
  font-size: 0.85rem; font-weight: 500;
}
.crm-lato nav button.on { background: var(--carta); border-color: var(--carta); color: var(--nero); font-weight: 600; }
.crm-corpo { padding: 26px 18px 60px; }
.crm-corpo h2 { margin-bottom: 6px; }
.crm-corpo h3 { margin: 28px 0 12px; }
.crm-piede { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--velo-chiaro); color: rgba(250, 249, 245, 0.5); }
.crm-piede p { margin-bottom: 12px; line-height: 1.5; }

.kpi-griglia { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.kpi { background: #fff; border: 1px solid var(--velo); border-radius: var(--r); padding: 15px 16px; }
.kpi .et { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muto); font-weight: 700; }
.kpi .val { font-family: var(--cifre); font-weight: 600; font-size: 2rem; line-height: 1; margin-top: 7px; font-variant-numeric: tabular-nums; }
.kpi .sotto { font-size: 0.72rem; color: var(--verde); margin-top: 4px; }

.tab-avvolgi { overflow-x: auto; background: #fff; border: 1px solid var(--velo); border-radius: var(--r); }
.tab { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tab th {
  text-align: left; font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muto); background: var(--carta-2); border-bottom: 1px solid var(--velo);
  padding: 10px 12px; white-space: nowrap;
}
.tab td { padding: 11px 12px; border-bottom: 1px solid var(--velo); vertical-align: top; font-variant-numeric: tabular-nums; }
.tab tr:last-child td { border-bottom: 0; }

.tag { display: inline-block; font-size: 0.66rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.05em; }
.tag-nuovo { background: rgba(28, 79, 168, 0.08); color: var(--blu); }
.tag-caldo { background: rgba(194, 42, 34, 0.08); color: var(--rosso); }
.tag-fatto { background: rgba(27, 127, 77, 0.1); color: var(--verde); }
.tag-attesa { background: rgba(240, 180, 0, 0.15); color: #7a5d00; }

.crm-nota { background: var(--carta-2); border: 1px solid var(--velo); border-radius: var(--r); padding: 14px 16px; margin-bottom: 24px; font-size: 0.86rem; color: var(--inchiostro-2); }
.pannello-crm { padding: 18px; }
.pannello-crm h3 { margin: 0 0 10px; }
.verde { color: var(--verde); }

.colonne { display: grid; gap: 12px; grid-template-columns: 1fr; }
.colonna { background: #fff; border: 1px solid var(--velo); border-radius: var(--r); padding: 14px; }
.colonna h4 { color: var(--muto); display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 0.62rem; }
.pratica { border: 1px solid var(--velo); border-radius: var(--r); padding: 12px; margin-bottom: 9px; background: var(--carta); }
.pratica .nome { font-weight: 600; font-size: 0.9rem; }
.pratica .sotto { font-size: 0.78rem; color: var(--muto); }
.pratica .val { font-family: var(--cifre); font-weight: 600; font-size: 1.2rem; margin-top: 7px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ responsive */

@media (min-width: 640px) {
  .griglia { grid-template-columns: repeat(2, 1fr); }
  .form-2 { grid-template-columns: 1fr 1fr; }
  .rr-campi { grid-template-columns: repeat(2, 1fr); }
  .kpi-griglia { grid-template-columns: repeat(4, 1fr); }
  .colonne { grid-template-columns: repeat(3, 1fr); }
  .piede-griglia { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .top-voce { display: flex; }
  .nav { display: flex; }
  .apri-menu { display: none; }
  .rr-campi { grid-template-columns: repeat(4, 1fr) auto; align-items: end; }
  .griglia { grid-template-columns: repeat(3, 1fr); }
  .griglia.elenco { grid-template-columns: 1fr; }
  .parco { grid-template-columns: 290px 1fr; }
  .scheda { grid-template-columns: 1.55fr 1fr; }
  .piede-griglia { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
  .blocco-voto { grid-template-columns: 0.8fr 1.2fr; gap: 56px; }
  .indice-servizi { column-count: 2; column-gap: 64px; }
  .voce-servizio { break-inside: avoid; }
  .servizio-lungo { grid-template-columns: 1.35fr 1fr; gap: 52px; align-items: center; }
  .parco.parco-vendi { grid-template-columns: 1fr 1.1fr; gap: 44px; }
  .solo-desk { display: block; }
  .vista-switch.solo-desk { display: flex; }
  .solo-mob { display: none; }
  .barra-giu { display: none; }
  .filtri-mobile-apri { display: none; }
  .crm { grid-template-columns: 235px 1fr; }
  .crm-lato nav { flex-direction: column; }
  .crm-corpo { padding: 32px 36px 60px; }
}

@media (max-width: 899px) {
  .filtri { position: fixed; inset: 0; z-index: 95; border-radius: 0; overflow-y: auto; display: none; border: 0; background: var(--carta); }
  .filtri.on { display: block; }
  .filtri-testa { position: sticky; top: 0; z-index: 2; background: var(--carta); }
  .griglia.elenco .vettura { flex-direction: column; }
  .griglia.elenco .vettura-foto { flex: none; }
  .griglia.elenco .vettura-foto img { aspect-ratio: 4 / 3; min-height: 0; }
  .griglia.elenco .vettura-piede { flex: none; border-left: 0; flex-direction: row; align-items: flex-end; justify-content: space-between; }
  body { padding-bottom: 64px; }
  .banda-ricerca { margin-top: -30px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}