/* Struttura del sito — condivisa da tutte le concessionarie.
   Qui vive COME È FATTA una cosa: griglie, layout, componenti, breakpoint.
   COME APPARE (colori, font, forme) sta in themes/<slug>.css.
   Regola: se una regola serve a tutti ma con un colore diverso, la regola sta QUI
   e il colore arriva da una variabile. */
/* ═══ FONT SELF-HOSTED (GDPR: nessuna chiamata a Google Fonts) ═══
   File variabili scaricati da Google Fonts (OFL) in /public/fonts/. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/inter-tight-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════
   AutoCity BAT — Prototype Design System
   ═══════════════════════════════════════════════════════════ */

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--white);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
input, select, textarea { font: inherit; color: inherit; }

/* ─── Container ─── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-3); }

/* ═══════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  height: var(--nav-height);
  display: flex;
  align-items: center;
}
.nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}
.brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
  color: var(--navy);
}
.brand-dot {
  width: 12px; height: 12px; border-radius: var(--radius-circle);
  background: var(--sky);
}
.nav-menu {
  display: flex; gap: var(--space-4); justify-content: center;
}
.nav-menu a {
  font-size: 14px; font-weight: 500; color: var(--text);
  transition: color 0.18s var(--ease-out);
}
.nav-menu a:hover { color: var(--sky); }
.nav-actions { display: flex; gap: var(--space-2); align-items: center; }
.nav-phone {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--navy);
}
.nav-cta {
  background: var(--navy); color: var(--white);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.nav-cta:hover { background: var(--navy-dark); transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════
   HERO — AutoCity MATCH
   ═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 600px at 75% 20%, rgba(0,176,240,0.10), transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--white) 100%);
  padding: var(--space-7) 0 var(--space-7);
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--blue); text-transform: uppercase;
  background: var(--sky-soft);
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: var(--radius-circle); background: var(--sky); }
.hero h1 {
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: 1.05;
  font-weight: var(--h1-weight,800);
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-top: var(--space-3);
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, var(--sky) 0%, #0098d0 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-lede {
  margin-top: var(--space-3);
  font-size: 18px;
  color: var(--muted);
  max-width: 560px;
}
.hero-cta-row { display: flex; gap: 14px; margin-top: var(--space-4); flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px;
  border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 600;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.btn-primary {
  background: var(--navy); color: var(--white);
  box-shadow: var(--shadow-lift);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,30,80,0.22); }
/* Autosufficiente: la geometria stava solo su .btn, che gli anchor con la sola
   classe .btn-secondary non hanno — il risultato era un rettangolo bianco con
   testo a sinistra, identico a un campo di testo vuoto. */
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; min-height: 48px;
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 700; text-align: center;
  background: var(--white); color: var(--navy);
  border: 1px solid var(--border);
  transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.btn-secondary:hover { background: var(--paper); border-color: var(--navy); transform: translateY(-2px); }
.btn-sky { background: var(--accent); color: var(--ink); }
.btn-sky:hover { background: var(--accent-dark); }

.hero-trust {
  margin-top: var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
}
.trust-stat { display: flex; flex-direction: column; }
.trust-stat strong { font-size: 26px; color: var(--navy); font-weight: 800; letter-spacing: -0.01em; }
.trust-stat span { font-size: 12px; color: var(--muted); }
.trust-stars { color: #F5A623; font-size: 14px; letter-spacing: 2px; }
.trust-divider { width: 1px; height: 32px; background: var(--border); }

/* Match preview card */
.match-preview {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  position: relative;
}
.match-preview::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0,176,240,0.4), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.match-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.match-step { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.match-progress { width: 80px; height: 4px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.match-progress span { display: block; height: 100%; background: var(--sky); width: 12%; transition: width 0.4s var(--ease-out); }
.match-question {
  font-size: 24px; font-weight: 700; color: var(--navy);
  letter-spacing: -0.01em; line-height: 1.25;
  margin-bottom: var(--space-3);
}
.match-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.match-option {
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 14px 16px;
  text-align: left;
  font-size: 14px; font-weight: 500;
  color: var(--text);
  transition: all 0.18s var(--ease-out);
}
.match-option:hover { border-color: var(--navy); background: var(--paper); }
.match-option.selected { border-color: var(--sky); background: var(--sky-soft); color: var(--navy); }
.match-option .icon { font-size: 18px; margin-right: 8px; }
.match-foot { margin-top: var(--space-3); display: flex; justify-content: space-between; align-items: center; }
.match-skip { font-size: 13px; color: var(--muted); }
.match-next { background: var(--navy); color: var(--white); padding: 10px 18px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   ADVISOR (3 steps)
   ═══════════════════════════════════════════════════════════ */
.section { padding: var(--space-8) 0; }
.section-header { max-width: 820px; margin: 0 auto var(--space-5); text-align: center; }
.section-eyebrow {
  font-size: 12px; font-weight: 700; color: var(--blue); letter-spacing: 0.08em; text-transform: uppercase;
}
/* eyebrow su sezioni scure → lime (alto contrasto) */
.tradein-band .section-eyebrow, .worlds .section-eyebrow,
.contact-head .section-eyebrow { color: var(--accent); }
.section-title {
  font-size: clamp(32px, 4vw, 46px); line-height: 1.1; letter-spacing: -0.02em;
  font-weight: 800; color: var(--navy); margin-top: var(--space-2);
}
.section-lede {
  margin-top: var(--space-2); font-size: 17px; color: var(--muted);
}

.advisor-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  position: relative;
}
.advisor-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: var(--space-4);
  position: relative;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.advisor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.advisor-card .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-circle);
  background: var(--sky); color: var(--white);
  font-weight: 700; font-size: 13px;
  margin-bottom: var(--space-2);
}
.advisor-card h3 {
  font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em;
  margin-bottom: var(--space-1);
}
.advisor-card p { color: var(--muted); font-size: 15px; }
.advisor-card .preview {
  margin-top: var(--space-3);
  background: var(--paper);
  border-radius: var(--radius-m);
  padding: var(--space-2);
  font-size: 13px;
  color: var(--text);
  display: grid; gap: 6px;
}
.advisor-card .preview .row { display: flex; justify-content: space-between; }
.advisor-card .preview .row strong { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   MARCHI STRIP
   ═══════════════════════════════════════════════════════════ */
.brands {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) 0;
  background: var(--white);
}
.brands-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.brand-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--paper);
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; color: var(--text);
  transition: all 0.18s var(--ease-out);
}
.brand-pill:hover { background: var(--navy); color: var(--white); }
.brand-pill.active { background: var(--navy); color: var(--white); }

/* ═══════════════════════════════════════════════════════════
   FAMIGLIE DI AUTO
   ═══════════════════════════════════════════════════════════ */
.families {
  background: var(--paper);
}
.families-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
}
.family-card {
  background: var(--white);
  border-radius: var(--radius-l);
  padding: var(--space-4);
  border: 1px solid var(--border);
  transition: all 0.25s var(--ease-out);
  display: flex; flex-direction: column; min-height: 280px;
}
.family-card:hover {
  transform: translateY(-4px);
  border-color: var(--sky);
  box-shadow: var(--shadow-card);
}
.family-card .ico {
  width: 48px; height: 48px;
  border-radius: var(--radius-m);
  background: var(--sky-soft);
  display: grid; place-items: center;
  font-size: 22px;
  margin-bottom: var(--space-2);
}
.family-card h3 {
  font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em;
}
.family-card p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.family-card .models {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: 12px; color: var(--text); font-weight: 500;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.family-card .models span {
  padding: 4px 10px; background: var(--paper); border-radius: var(--radius-pill);
}

/* ═══════════════════════════════════════════════════════════
   STOCK IN EVIDENZA
   ═══════════════════════════════════════════════════════════ */
.stock-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
}
.stock-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: all 0.25s var(--ease-out);
}
.stock-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--sky); }
.stock-img {
  height: 160px;
  background: linear-gradient(135deg, #cfd8e3 0%, #eef1f5 100%);
  display: grid; place-items: center;
  color: var(--navy); font-weight: 700; font-size: 20px; letter-spacing: -0.01em;
  position: relative;
}
.stock-img .tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--white); padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; color: var(--navy);
}
.stock-body { padding: var(--space-2) var(--space-3) var(--space-3); }
.stock-body .brand { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.stock-body .model { font-size: 17px; font-weight: 700; color: var(--navy); margin-top: 4px; letter-spacing: -0.01em; }
.stock-body .spec { font-size: 13px; color: var(--muted); margin-top: 6px; }
.stock-body .price { margin-top: var(--space-2); display: flex; align-items: baseline; justify-content: space-between; }
.stock-body .price .num { font-size: 22px; font-weight: 800; color: var(--navy); }
.stock-body .price .lease { font-size: 11px; color: var(--muted); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   BRAND WORLDS PREVIEW
   ═══════════════════════════════════════════════════════════ */
.worlds { background: var(--navy); color: var(--white); position: relative; overflow: hidden; }
.worlds::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(800px 400px at 20% 0%, rgba(0,176,240,0.18), transparent 70%);
}
.worlds .section-eyebrow { color: var(--sky); }
.worlds .section-title { color: var(--white); }
.worlds .section-lede { color: rgba(255,255,255,0.7); }
.worlds-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2);
  position: relative;
}
.world-card {
  border-radius: var(--radius-l);
  padding: var(--space-3) var(--space-3) var(--space-4);
  min-height: 200px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 0.25s var(--ease-out);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
}
.world-card:hover { transform: translateY(-4px); }
.world-card .badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  align-self: flex-start;
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.world-card h4 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; margin-top: var(--space-2); }
.world-card p { font-size: 13px; opacity: 0.8; margin-top: 6px; }
.world-link { font-size: 13px; font-weight: 600; margin-top: var(--space-2); display: inline-flex; align-items: center; gap: 6px; }
/* Brand world cards specific themes */
.world-vw {
  background: linear-gradient(135deg, #001E50 0%, #0040A0 100%);
  color: var(--white);
}
.world-vw .badge { background: var(--white); color: var(--navy); }
.world-cupra {
  background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%);
  color: #E5C29F;
  font-family: var(--font-sans);
}
.world-cupra .badge { background: #B5651D; color: var(--white); }
.world-cupra h4 { color: #FFFFFF; font-family: var(--font-sans); letter-spacing: 0.04em; }
.world-cupra p { color: rgba(255,255,255,0.7); }
.world-lr {
  background: linear-gradient(135deg, #1E3E2F 0%, #2E563F 100%);
  color: #F4E9D6;
}
.world-lr .badge { background: #C4A36B; color: #1E3E2F; }
.world-lr h4 { font-family: var(--font-serif), 'Georgia', serif; color: #F4E9D6; }
.world-lr p { color: rgba(244,233,214,0.75); }
.world-other {
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
}
.world-other .badge { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }

/* ═══════════════════════════════════════════════════════════
   RECENSIONI
   ═══════════════════════════════════════════════════════════ */
.reviews { background: var(--paper); }
.reviews-headline {
  display: flex; align-items: center; gap: var(--space-4); justify-content: center;
  margin-bottom: var(--space-5); flex-wrap: wrap;
}
.review-score { display: flex; align-items: center; gap: 14px; }
.review-score .num { font-size: 64px; font-weight: 800; color: var(--graphite); letter-spacing: -0.02em; line-height: 1; }
/* Stelle sincere: due righe identiche sovrapposte, quella accesa tagliata
   alla percentuale del voto (--pieno). Il numero e le stelle non possono piu'
   raccontare due storie diverse. */
/* letter-spacing: normal è sostanza, non pulizia. La spaziatura ereditata dal
   contesto (4px sulla home) finisce DENTRO la scatola della stella, e il
   riempimento --pieno è una percentuale di quella scatola: con 4px di coda, una
   mezza stella copriva il 61% del glifo invece del 50%. Lo spazio fra le stelle
   lo fa il gap qui sotto, quindi azzerarla non avvicina niente. */
.stelle { display: inline-flex; gap: 0.22em; line-height: 1; letter-spacing: normal; }
.stella { position: relative; display: inline-block; }
/* spenta: ambra pastello SOLIDO (non trasparenza al 30%, che su fondo chiaro
   spariva). Coppia semantica della valutazione: da spostare nel tema come
   famiglia a sé quando si fa il giro dei colori. */
.stella > .stella-vuota { color: color-mix(in srgb, #F5A623 42%, var(--paper, #fff)); }
.stella > .stella-piena { position: absolute; top: 0; left: 0; width: var(--pieno, 100%); overflow: hidden; color: #F5A623; }

.review-score .stars { display: flex; flex-direction: column; }
.review-score .stars .row { color: #F5A623; letter-spacing: 4px; font-size: 18px; }
.review-score .stars > span:last-child { font-size: 13px; color: var(--muted); margin-top: 4px; }
/* Google chip con G a colori */
.google-mark {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; background: var(--white);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--shadow-soft);
}
.google-g {
  font-weight: 800; font-size: 16px; line-height: 1;
  background: conic-gradient(from -45deg, #EA4335 0deg 90deg, #FBBC05 90deg 180deg, #34A853 180deg 270deg, #4285F4 270deg 360deg);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.reviews-grid {
  display: flex; gap: var(--space-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding-bottom: 8px;
  scrollbar-width: thin;
}
.reviews-grid > .review-card {
  flex: 0 0 calc((100% - 2 * var(--space-3)) / 3); /* 3 card visibili, le altre scorrono */
  scroll-snap-align: start;
}
.reviews-grid::-webkit-scrollbar { height: 6px; }
.reviews-grid::-webkit-scrollbar-thumb { background: var(--line, #e6e8ec); border-radius: var(--radius-pill); }
.review-card {
  background: var(--white);
  border-radius: var(--radius-l);
  padding: var(--space-3);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(14,17,22,0.03);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  display: flex; flex-direction: column;
}
.review-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(14,17,22,0.08); }
.review-card .rc-head { display: flex; align-items: center; gap: 12px; }
.review-card .avatar {
  width: 40px; height: 40px; border-radius: var(--radius-circle);
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent); color: var(--ink);
  font-weight: 800; font-size: 15px;
}
.review-card .rc-id { display: flex; flex-direction: column; }
.review-card .rc-name { font-size: 14px; font-weight: 700; color: var(--graphite); }
.review-card .rc-date { font-size: 11px; color: var(--muted); }
.review-card .stars { color: #F5A623; font-size: 14px; letter-spacing: 2px; margin-top: var(--space-2); }
.review-card .text { margin-top: 10px; font-size: 14px; color: var(--text); line-height: 1.6; flex: 1; }
.review-card .verified {
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--muted); font-weight: 600;
}
.review-card .verified svg { color: var(--success); }
.reviews-cta { text-align: center; margin-top: var(--space-4); }
.reviews-cta a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--graphite);
  border-bottom: 2px solid var(--accent); padding-bottom: 3px;
}

/* ═══════════════════════════════════════════════════════════
   TRADE-IN
   ═══════════════════════════════════════════════════════════ */
.tradein { background: var(--navy); color: var(--white); }
.tradein-inner {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--space-6); align-items: center;
}
.tradein .section-eyebrow { color: var(--sky); }
.tradein h2 {
  font-size: clamp(32px, 3.5vw, 44px); line-height: 1.1; letter-spacing: -0.02em;
  font-weight: 800; color: var(--white);
}
.tradein p { color: rgba(255,255,255,0.75); margin-top: var(--space-2); max-width: 480px; }
.tradein-form {
  background: var(--white);
  color: var(--text);
  border-radius: var(--radius-l);
  padding: var(--space-4);
}
.tradein-form label { font-size: 12px; font-weight: 600; color: var(--muted); display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.tradein-form .field { margin-bottom: var(--space-2); }
.tradein-form input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  font-size: 14px;
}
.tradein-form input:focus { outline: 2px solid var(--sky); border-color: var(--sky); }
.tradein-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.tradein-form button {
  width: 100%;
  background: var(--navy); color: var(--white);
  padding: 14px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.footer { background: var(--navy-dark); color: rgba(255,255,255,0.85); padding: var(--space-6) 0 var(--space-4); }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1.2fr 1.3fr; gap: var(--space-4); }
.footer h5 { font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: var(--space-2); letter-spacing: 0.04em; text-transform: uppercase; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 7px; font-size: 14px; color: rgba(255,255,255,0.7); }
.footer ul a { font-size: 14px; color: rgba(255,255,255,0.7); transition: color 0.18s; }
.footer ul a:hover { color: var(--blue); }
.footer-brand p { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: var(--space-2); max-width: 320px; }
.footer-brand .footer-payoff { color: var(--lime); margin-top: 10px; }

/* Social */
.footer-social { display: flex; gap: 10px; margin-top: var(--space-3); }
/* Figlio DIRETTO, non un discendente qualsiasi: questa regola disegna il
   bottone tondo dell'icona, e da quando esiste la scelta fra più profili nel
   piè di pagina ci sono anche dei link ANNIDATI (le voci del menu). Con
   `.footer-social a` prendevano pure loro width:44px, e con l'ellissi addosso
   si leggevano una lettera sola: «a…», «Š…», «S…». Le icone vere restano
   figlie dirette, quindi qui non cambia nulla per nessuno. */
.footer-social > a {
  width: 44px; height: 44px; border-radius: var(--radius-circle);
  display: grid; place-items: center;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.10);
  transition: all 0.18s var(--ease-out);
}
.footer-social > a:hover { background: var(--blue); color: #fff; border-color: var(--blue); transform: translateY(-2px); }

/* Orari */
.footer-hours li { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.footer-hours .dept { font-size: 12px; font-weight: 700; color: var(--white); }
.footer-hours .hrs { font-size: 13px; color: rgba(255,255,255,0.62); line-height: 1.4; }

/* Bottom: legale + meta */
.footer-bottom {
  margin-top: var(--space-5); padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer-legal a { font-size: 12px; color: rgba(255,255,255,0.6); transition: color 0.18s; }
.footer-legal a:hover { color: var(--blue); }
.footer-meta { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.58); flex-wrap: wrap; gap: var(--space-2); }

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-3); }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  /* I link in fondo erano alti 16px, meno di metà del polpastrello: uno sopra
     l'altro diventavano una fila di bersagli quasi impossibili da centrare al
     primo colpo. Il testo resta com'e', cresce solo l'area che risponde al
     dito — 44px e' il minimo che sia Apple sia Google indicano. */
  .footer ul li { margin-bottom: 0; }
  .footer ul a,
  .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer ul li:not(:has(a)) { min-height: 30px; display: flex; align-items: center; }
  .footer-legal { gap: var(--space-1) var(--space-3); }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .advisor-grid, .families-grid { grid-template-columns: repeat(2, 1fr); }
  .stock-grid { grid-template-columns: repeat(2, 1fr); }
  .worlds-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid > .review-card { flex-basis: 86%; }
  .tradein-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-menu { display: none; }
}
@media (max-width: 640px) {
  .section, .advisor-v2, .perche, .stories, .split-block { padding: var(--space-6) 0; }
  .hero { padding: var(--space-5) 0; }
  .advisor-grid, .families-grid, .stock-grid, .worlds-grid { grid-template-columns: 1fr; }
  .nav-phone { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .match-options { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   V2 — Dark Hero / Lime Accent / Advisor Tabs / TCO Calc
   ═══════════════════════════════════════════════════════════ */

/* Il logotipo è un'immagine, non testo ricomposto: alcune concessionarie hanno
   linee guida che lo vietano. L'altezza la decide il tema. */
.wordmark { display: inline-flex; align-items: center; line-height: 1; }
.wordmark img, .wordmark svg { height: var(--wordmark-h, 26px); width: auto; display: block; }

/* ─── Nav dark variant ─── */
/* A riposo sull'hero: trasparente (foto visibile dietro) + scrim leggero per leggibilità */
.nav.is-dark {
  background: linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0));
  border-bottom: 1px solid transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), backdrop-filter 0.3s var(--ease-out);
}
/* Scrollando: barra solida */
.nav.is-dark.is-solid {
  background: rgba(13,15,20,0.88);
  border-bottom: 1px solid var(--line-dark);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.nav.is-dark .nav-menu a { color: var(--on-dark); }
.nav.is-dark .nav-menu a:hover { color: var(--lime); }
.nav-icons { display: flex; align-items: center; gap: 10px; }
.nav-icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius-circle);
  display: grid; place-items: center;
  background: transparent;
  color: var(--ink);
  border: 1px solid transparent;
  transition: all 0.18s var(--ease-out);
}
.nav-icon-btn:hover { background: var(--paper); }
.nav.is-dark .nav-icon-btn { color: var(--on-dark); }
.nav.is-dark .nav-icon-btn:hover { background: rgba(255,255,255,0.08); }
.nav-cta-lime {
  background: var(--blue); color: var(--white);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 700;
  transition: all 0.18s var(--ease-out);
}
.nav-cta-lime:hover { background: var(--blue-dark); transform: translateY(-1px); }

/* ─── HERO V2 (dark, full-bleed) ─── */
.hero-v2 {
  position: relative;
  background:
    radial-gradient(900px 500px at 75% 85%, rgba(216,255,69,0.04), transparent 70%),
    radial-gradient(1000px 600px at 90% 25%, rgba(0,87,217,0.10), transparent 70%),
    linear-gradient(180deg, var(--navy-deep) 0%, #0B1428 60%, var(--ink) 100%);
  color: var(--on-dark);
  padding: 0;
  overflow: hidden;
  /* la foto parte da sotto la nav trasparente (full-bleed) e riempie lo schermo */
  margin-top: calc(-1 * var(--nav-height));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Sfondo hero a rotazione (crossfade 3 foto, testo fisso) */
.hero-bgs { position: absolute; inset: 0; z-index: 0; }
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 62%;
  filter: saturate(0.85);
  opacity: 0;
  animation: heroCycle 21s ease-in-out infinite;
  will-change: opacity;
}
.hero-bg:nth-child(1) { animation-delay: 0s; opacity: .92; }
.hero-bg:nth-child(2) { animation-delay: 7s; }
.hero-bg:nth-child(3) { animation-delay: 14s; }
@keyframes heroCycle {
  0%   { opacity: 0; }
  4%   { opacity: .92; }
  29%  { opacity: .92; }
  35%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Overlay: ombra solo a sinistra (testo leggibile a sx, auto in chiaro a dx) */
.hero-v2::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(13,15,20,0.92) 22%, rgba(13,15,20,0.45) 48%, rgba(13,15,20,0.08) 70%, transparent 88%),
    linear-gradient(180deg, transparent 78%, rgba(13,15,20,0.55) 100%);
  z-index: 1;
}
/* Su telefono il testo occupa tutta la larghezza, mentre il velo qui sopra
   scurisce solo da sinistra e si spegne al 70%: la coda dei titoli finiva sopra
   le zone chiare della foto (il parabrezza con l'adesivo del prezzo) e si
   leggeva a fatica. Da qui in giu' il velo diventa verticale: scuro dove sta il
   testo, trasparente in alto dove non ce n'e'. */
@media (max-width: 760px) {
  .hero-v2::after {
    background:
      linear-gradient(180deg, rgba(13,15,20,0.34) 0%, rgba(13,15,20,0.20) 26%, rgba(13,15,20,0.62) 58%, rgba(13,15,20,0.88) 100%);
  }
}

.hero-v2 .container.hero-v2-inner { position: relative; z-index: 2; }
.hero-v2-inner {
  position: relative;
  width: 100%;            /* riempie il container come le altre sezioni (allineamento sx) */
  padding-top: var(--space-7);
  padding-bottom: var(--space-3);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: 480px;
}
.hero-v2 .copy { z-index: 2; padding-bottom: var(--space-3); max-width: 760px; }
.hero-v2 h1, .hero-v2 .hslide-titolo {
  font-size: clamp(42px, 5.2vw, 72px);
  line-height: 1.02;
  font-weight: var(--h1-weight,800);
  letter-spacing: -0.025em;
  color: var(--on-dark);
}
.hero-v2 .hslide-titolo { margin: 0; }
.hero-v2 .lede {
  margin-top: var(--space-3);
  font-size: 17px;
  color: var(--on-dark-muted);
  max-width: 460px;
  line-height: 1.55;
}
.hero-v2-cta { display: flex; gap: 12px; margin-top: var(--space-3); flex-wrap: wrap; }
.btn-lime {
  background: var(--lime); color: var(--ink);
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.18s var(--ease-out);
}
.btn-lime:hover { background: var(--lime-dark); transform: translateY(-2px); }
.btn-outline-light {
  background: transparent; color: var(--on-dark);
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.3);
  transition: all 0.18s var(--ease-out);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.08); border-color: var(--white); }

/* Hero stats column (lato dx hero) */
.hero-stats {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  justify-self: end;
  padding: var(--space-4) var(--space-3);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-l);
  min-width: 280px;
}
.hero-stat strong {
  display: block;
  font-size: 38px; font-weight: 800; color: var(--on-dark);
  letter-spacing: -0.02em; line-height: 1;
}
.hero-stat > span {
  display: block;
  margin-top: 6px;
  font-size: 13px; color: var(--on-dark-muted);
  letter-spacing: 0.02em;
}
/* numero "4,5" dentro lo strong: stessa scala degli altri (38px) */
.hero-stat strong span { font-size: inherit; display: inline; margin: 0; }

/* Legacy hero-lineup (compat) */
.hero-lineup {
  position: relative;
  height: 100%;
  min-height: 320px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 0;
  z-index: 1;
}
.hero-lineup-car {
  width: 25%;
  aspect-ratio: 16/11;
  display: grid; place-items: end center;
  position: relative;
  background:
    radial-gradient(80% 60% at 50% 90%, rgba(0,0,0,0.5), transparent 65%);
}
.hero-lineup-car::after {
  content: ''; position: absolute;
  bottom: 18%; left: 8%; right: 8%; height: 50%;
  border-radius: 50% 50% 12px 12px / 60% 60% 18px 18px;
  background: linear-gradient(180deg, var(--car-color, #888) 0%, color-mix(in srgb, var(--car-color, #888) 60%, black) 100%);
  box-shadow: 0 24px 28px rgba(0,0,0,0.5);
}
.hero-lineup-car::before {
  content: ''; position: absolute;
  bottom: 14%; left: 14%; right: 14%; height: 18%;
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--car-color, #888) 35%, black);
}
.hero-lineup-car[data-c="vw"]    { --car-color: #2D5BA8; }
.hero-lineup-car[data-c="cupra"] { --car-color: #9C3F22; }
.hero-lineup-car[data-c="lr"]    { --car-color: #2E4A35; }
.hero-lineup-car[data-c="jag"]   { --car-color: #A07D40; }

/* ─── Category strip (sotto hero, dark) ─── */
.cat-strip {
  background: var(--ink);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.cat-strip-inner {
  display: flex; gap: var(--space-2); justify-content: space-between;
  flex-wrap: wrap;
}
.cat-chip {
  flex: 1; min-width: 160px;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: var(--ink-soft);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-m);
  color: var(--on-dark);
  font-weight: 600; font-size: 14px;
  transition: all 0.18s var(--ease-out);
}
.cat-chip:hover { border-color: var(--lime); background: var(--ink-2); }
.cat-chip .ico {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-s);
  color: var(--lime);
  flex-shrink: 0;
}
.cat-chip .ico svg { display: block; }

/* ─── Advisor V2 — Tabs ─── */
.advisor-v2 {
  background: var(--paper);
  padding: var(--space-8) 0;
}
.advisor-v2-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--space-3);
  align-items: stretch;
}
/* card fusa: intestazione + quiz, con separazione netta */
.advisor-main-head { padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.advisor-main .advisor-tabs { margin-top: 0; }
.advisor-v2-card {
  background: var(--white);
  border-radius: var(--radius-l);
  border: 1px solid var(--border);
  padding: var(--space-4);
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(14,17,22,0.03), 0 12px 32px rgba(14,17,22,0.06);
  transition: box-shadow 0.25s var(--ease-out);
}
.advisor-v2-card:hover { box-shadow: 0 1px 2px rgba(14,17,22,0.04), 0 20px 40px rgba(14,17,22,0.08); }
.advisor-v2 .eyebrow-sky {
  font-size: 11px; font-weight: 700; color: var(--blue);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 10px;
}
.advisor-v2 h3 {
  font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; line-height: 1.15;
}
.advisor-v2 .lede {
  margin-top: var(--space-2);
  font-size: 14px; color: var(--muted);
}
.advisor-v2 .time-info {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--space-3);
  font-size: 13px; color: var(--muted);
}
.advisor-v2 .start-cta {
  margin-top: auto;
  background: var(--navy); color: var(--white);
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}

/* Center tabs */
.advisor-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}
.advisor-tab {
  flex: 1; text-align: center;
  padding: 10px 0;
  font-size: 13px; font-weight: 600;
  color: var(--soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.18s var(--ease-out);
  cursor: pointer;
}
.advisor-tab.active { color: var(--navy); border-color: var(--navy); }
.advisor-q { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: var(--space-2); }
.advisor-opts-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: var(--space-3);
}
.advisor-opt {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 12px 14px;
  font-size: 13px; font-weight: 600;
  color: var(--text);
  text-align: center;
  transition: all 0.18s var(--ease-out);
}
.advisor-opt:hover { border-color: var(--navy); }
.advisor-opt.selected { border-color: var(--navy); background: var(--sky-soft); color: var(--navy); }
.advisor-next {
  align-self: flex-end;
  min-height: 44px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--sky);
  margin-top: auto;
}

/* Right preview card */
.advisor-preview-card {
  background: var(--white);
  border-radius: var(--radius-l);
  border: 1px solid var(--border);
  padding: var(--space-3);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.advisor-preview-card .title {
  font-size: 14px; font-weight: 700; color: var(--navy);
  margin-bottom: var(--space-2);
}
.advisor-preview-img {
  width: 100%; aspect-ratio: 16/10;
  border-radius: var(--radius-m);
  background: linear-gradient(135deg, #B8C4D6 0%, #E8ECF3 100%);
  position: relative;
  display: grid; place-items: center;
  font-weight: 800; color: rgba(0,30,80,0.4);
  font-size: 22px;
}
.advisor-preview-card .match-tag {
  position: absolute; top: 10px; right: 10px;
  background: var(--lime); color: var(--ink);
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.advisor-preview-card .caption {
  margin-top: var(--space-2);
  font-size: 13px; color: var(--text); line-height: 1.5;
  max-width: 220px;
}
.advisor-preview-card .example-link {
  margin-top: var(--space-2);
  font-size: 12px; font-weight: 600; color: var(--graphite);
  border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}

/* ─── Esplora per esigenza — Bento asimmetrico ─── */
.esplora-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 260px;
  gap: var(--space-2);
}
.esplora-card { display: flex; flex-direction: column; }
.esplora-card .esplora-img { flex: 1; min-height: 130px; height: auto; }
.esplora-card[data-cat="famiglia"]    { grid-column: span 2; }
.esplora-card[data-cat="performance"] { grid-column: span 2; }
.esplora-card[data-cat="famiglia"] .esplora-body h3,
.esplora-card[data-cat="performance"] .esplora-body h3 { font-size: 18px; }
.esplora-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: all 0.3s var(--ease-out);
  box-shadow: 0 1px 2px rgba(14,17,22,0.03);
}
.esplora-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(14,17,22,0.10); border-color: transparent; }
.esplora-img {
  height: 140px;
  background-color: #1F2630;
  background-size: cover;
  background-position: center;
  position: relative;
}
.esplora-card[data-cat="famiglia"]    .esplora-img { background-image: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25)), url('../assets/photos/esplora-famiglia.jpg'), linear-gradient(135deg, #B5C5A6, #DDE8D2); }
.esplora-card[data-cat="elettrico"]   .esplora-img { background-image: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25)), url('../assets/photos/esplora-elettrico.jpg'), linear-gradient(135deg, #9CB890, #C8DAB8); }
.esplora-card[data-cat="business"]    .esplora-img { background-image: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.30)), url('../assets/photos/esplora-business.jpg'), linear-gradient(135deg, #4A5567, #8C97AC); }
.esplora-card[data-cat="performance"] .esplora-img { background-image: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25)), url('../assets/photos/esplora-performance.jpg'), linear-gradient(135deg, #9C3F22, #D27B5A); }
.esplora-card[data-cat="commerciali"] .esplora-img { background-image: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25)), url('../assets/photos/esplora-commerciali.jpg'), linear-gradient(135deg, #5A6878, #8FA0B5); }
.esplora-card[data-cat="hybrid"]      .esplora-img { background-image: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25)), url('../assets/photos/esplora-hybrid.jpg'), linear-gradient(135deg, #82A570, #BAD4A6); }
.esplora-body { padding: var(--space-2) var(--space-3) var(--space-3); }
.esplora-ico {
  width: 32px; height: 32px;
  display: inline-grid; place-items: center;
  background: var(--paper);
  border-radius: var(--radius-circle);
  margin-bottom: 8px;
  color: var(--navy);
}
.esplora-ico svg { display: block; }
.esplora-body h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.esplora-body p { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ─── Brand worlds V2 (dark) ─── */
.bw-block {
  background: var(--ink);
  color: var(--on-dark);
  padding: var(--space-6) 0 var(--space-7);
  border-radius: var(--radius-l);
  margin: var(--space-5) 0;
}
.bw-block .title-block { text-align: center; margin-bottom: var(--space-4); padding: 0 var(--space-3); }
.bw-block h2 { font-size: 28px; font-weight: 800; color: var(--on-dark); letter-spacing: -0.01em; margin-bottom: 6px; }
.bw-block p { color: var(--on-dark-muted); font-size: 14px; }
/* Brand worlds — desktop: tutte e 7 in fila, visibili insieme */
.bw-track {
  display: grid;
  grid-template-columns: repeat(var(--bw-cols, 4), 1fr);
  gap: var(--space-2);
  padding: 4px var(--space-3) var(--space-2);
}
.bw-block { position: relative; }

/* Tablet/mobile: 7 non ci stanno → carosello orizzontale con drag */
@media (max-width: 1024px) {
  .bw-track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 64%);
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--space-3);
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
  }
  .bw-track::-webkit-scrollbar { display: none; }
  .bw-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
  .bw-track .bw-tile { scroll-snap-align: start; }
  /* hint gradiente solo in modalità carosello */
  .bw-block::after {
    content: '';
    position: absolute; right: 0; top: 90px; bottom: 90px; width: 50px;
    background: linear-gradient(90deg, transparent, var(--ink));
    pointer-events: none; z-index: 2;
  }
}
.bw-tile {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--bw-tint, rgba(255,255,255,0.04)), transparent 70%),
    var(--ink-soft);
  border-radius: var(--radius-m);
  padding: var(--space-3) 12px var(--space-2);
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  transition: all 0.3s var(--ease-out);
  border: 1px solid rgba(255,255,255,0.10);
  min-height: 270px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
/* profondità via bordo + shift di superficie, non ombra nera (Refero) */
.bw-tile:hover {
  transform: translateY(-4px);
  border-color: var(--lime);
  box-shadow: inset 0 0 0 1px rgba(216,255,69,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--bw-tint, rgba(255,255,255,0.04)), transparent 70%),
    var(--ink-2);
}
.bw-tile[data-brand="vw"]      { --bw-tint: rgba(45,91,168,0.18); }
.bw-tile[data-brand="cupra"]   { --bw-tint: rgba(156,63,34,0.18); }
.bw-tile[data-brand="skoda"]   { --bw-tint: rgba(74,135,87,0.18); }
.bw-tile[data-brand="seat"]    { --bw-tint: rgba(147,115,94,0.18); }
.bw-tile[data-brand="jaguar"]  { --bw-tint: rgba(78,128,184,0.20); }
.bw-tile[data-brand="lr"]      { --bw-tint: rgba(46,74,53,0.22); }
.bw-tile[data-brand="changan"] { --bw-tint: rgba(42,107,145,0.20); }
.bw-tile .logo {
  height: 36px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: var(--on-dark);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.bw-tile .blurb { font-size: 11px; color: var(--on-dark-muted); line-height: 1.4; margin: 8px 0; min-height: 30px; }
.bw-tile .car-thumb {
  flex: 1;
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-radius: var(--radius-m);
  margin: 10px 0;
  position: relative;
  display: grid; place-items: end center;
  overflow: hidden;
}
.bw-tile .car-thumb::after {
  content: ''; position: absolute;
  bottom: 18%; left: 12%; right: 12%; height: 36%;
  border-radius: 50% 50% 8px 8px / 60% 60% 12px 12px;
  background: linear-gradient(180deg, var(--bw-tile-color, #555) 0%, color-mix(in srgb, var(--bw-tile-color, #555) 50%, black) 100%);
  box-shadow: 0 12px 16px rgba(0,0,0,0.5);
}
.bw-tile .car-thumb::before {
  content: ''; position: absolute;
  bottom: 14%; left: 18%; right: 18%; height: 16%;
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--bw-tile-color, #555) 35%, black);
}
.bw-tile[data-brand="vw"]      { --bw-tile-color: #2D5BA8; }
.bw-tile[data-brand="cupra"]   { --bw-tile-color: #9C3F22; }
.bw-tile[data-brand="skoda"]   { --bw-tile-color: #4A8757; }
.bw-tile[data-brand="seat"]    { --bw-tile-color: #93735E; }
.bw-tile[data-brand="jaguar"]  { --bw-tile-color: #1F2C3B; }
.bw-tile[data-brand="lr"]      { --bw-tile-color: #2E4A35; }
.bw-tile[data-brand="changan"] { --bw-tile-color: #2A6B91; }
.bw-tile .arrow {
  width: 32px; height: 32px;
  border-radius: var(--radius-circle);
  background: var(--on-dark);
  color: var(--ink);
  display: grid; place-items: center;
}

/* ─── 2-col: Occasioni + Budget Reale ─── */
.split-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  padding: var(--space-7) 0;
}
.split-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: var(--space-3);
  box-shadow: 0 1px 2px rgba(14,17,22,0.03), 0 12px 32px rgba(14,17,22,0.05);
}
.split-card h3 { font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.split-card .top-link {
  float: right;
  font-size: 12px; color: var(--graphite); font-weight: 600;
  margin-top: 4px;
}

/* Occasioni cards horizontal */
.occ-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: var(--space-2); }
.occ-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
  font-size: 12px;
  transition: all 0.18s var(--ease-out);
}
.occ-card:hover { border-color: var(--sky); }
.occ-card .img {
  height: 100px;
  background-color: #1F2630;
  background-size: cover;
  background-position: center;
  position: relative;
}
.occ-card[data-c="vw-troc"] .img { background-image: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.30)), url('../assets/photos/occ-vw-troc.jpg'), linear-gradient(135deg, #2D5BA8, #6385C0); }
.occ-card[data-c="skoda"]   .img { background-image: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.30)), url('../assets/photos/occ-skoda.jpg'), linear-gradient(135deg, #4A8757, #87B58A); }
.occ-card[data-c="cupra"]   .img { background-image: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.30)), url('../assets/photos/occ-cupra.jpg'), linear-gradient(135deg, #9C3F22, #C66747); }
.occ-card .badge {
  position: absolute; top: 6px; left: 6px;
  background: var(--ink); color: var(--white);
  font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: var(--radius-s);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.occ-card[data-c="vw-troc"] .badge { background: #FF6B35; }
.occ-card[data-c="skoda"]   .badge { background: var(--lime); color: var(--ink); }
.occ-card[data-c="cupra"]   .badge { background: var(--navy); }
.occ-card .body { padding: 8px 10px; }
.occ-card .model { font-weight: 700; color: var(--navy); font-size: 12px; }
.occ-card .ver   { color: var(--muted); font-size: 10px; }
.occ-card .price { font-weight: 800; color: var(--navy); font-size: 14px; margin-top: 4px; }
.occ-card .lease { color: var(--muted); font-size: 10px; }
.occ-card .meta  { font-size: 10px; color: var(--soft); margin-top: 6px; }

/* TCO calculator */
.tco-fields {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin-top: var(--space-2);
}
.tco-fields label { font-size: 11px; font-weight: 600; color: var(--muted); display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.tco-fields select, .tco-fields input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--white);
}
.tco-breakdown {
  display: grid; grid-template-columns: repeat(4, 1fr) 1.2fr;
  gap: 0;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.tco-item {
  text-align: center;
  padding: var(--space-2) 8px;
  border-right: 1px solid var(--border);
}
.tco-item:last-child { border-right: none; }
.tco-item .ico {
  width: 30px; height: 30px;
  background: var(--paper);
  border-radius: var(--radius-s);
  display: grid; place-items: center;
  margin: 0 auto 6px;
  color: var(--navy);
}
.tco-item .label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.tco-item .val { font-size: 16px; font-weight: 700; color: var(--navy); margin-top: 4px; }
.tco-total {
  background: var(--lime);
  border-radius: var(--radius-m);
  padding: var(--space-2);
  text-align: center;
}
.tco-total .label { font-size: 10px; color: var(--ink); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.tco-total .val { font-size: 22px; font-weight: 800; color: var(--ink); }

/* ─── Trade-in band (dark) ─── */
.tradein-band {
  background: var(--navy);
  color: var(--white);
  padding: var(--space-6) 0;
  border-radius: var(--radius-l);
  position: relative;
  overflow: hidden;
  margin: var(--space-4) 0;
}
.tradein-band-inner {
  display: grid; grid-template-columns: 1.1fr 2fr 1fr;
  gap: var(--space-3);
  align-items: center;
}
.tradein-band h3 { font-size: clamp(26px, 3vw, 40px); font-weight: 800; color: var(--white); letter-spacing: -0.02em; line-height: 1.08; }
.tradein-band p { font-size: 15px; color: rgba(255,255,255,0.72); margin-top: 10px; max-width: 380px; }
.tradein-fields {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end;
}
/* variante "vai al wizard": 4 campi 2x2 + bottone a tutta larghezza */
.tradein-go { grid-template-columns: 1fr 1fr; }
.tradein-go button, .tradein-go .tradein-extra-link { grid-column: 1 / -1; }
.tradein-fields label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.6); display: block; margin-bottom: 4px; }
.tradein-fields input {
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: var(--radius-pill);
  padding: 12px 18px;
  font-size: 14px; font-weight: 500;
  width: 100%;
}
.tradein-fields button {
  background: var(--white); color: var(--ink);
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.tradein-car {
  display: grid; place-items: center; min-height: 80px;
}
.tradein-car-stack {
  width: 200px; height: 100px;
  background: linear-gradient(135deg, #6385C0 0%, #B0C3DD 100%);
  border-radius: var(--radius-l);
  position: relative;
}
.tradein-car-stack::after {
  content: ''; position: absolute;
  bottom: 20%; left: 12%; right: 12%; height: 50%;
  border-radius: 50% 50% 8px 8px / 60% 60% 12px 12px;
  background: linear-gradient(180deg, #4267A8 0%, #1E2F4A 100%);
  box-shadow: 0 12px 16px rgba(0,0,0,0.4);
}
.tradein-extra-link {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.tradein-extra-link a { color: var(--lime); font-weight: 600; }

/* ─── Perché scegliere ─── */
.perche {
  background: var(--paper);
  padding: var(--space-7) 0;
}
.perche-inner {
  display: grid; grid-template-columns: 1fr 4fr; gap: var(--space-4);
  align-items: center;
}
.perche h3 { font-size: 20px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.perche-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.perche-item { text-align: center; padding: 6px; }
.perche-item .ico {
  width: 58px; height: 58px;
  background: var(--white);
  border-radius: var(--radius-circle);
  display: grid; place-items: center;
  margin: 0 auto 10px;
  color: var(--navy);
  border: 1px solid var(--border);
}
/* le SVG hanno width/height=20 nell'HTML: le scalo via CSS insieme al cerchio */
.perche-item .ico svg { width: 27px; height: 27px; }
.perche-item .label { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.4; }

/* ─── Stories (Auto Coach editoriale) ─── */
.stories {
  padding: var(--space-7) 0;
}
.stories-inner { display: grid; grid-template-columns: 1fr 4fr; gap: var(--space-3); }
.stories-head h3 { font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 4px; letter-spacing: -0.01em; }
.stories-head p { font-size: 13px; color: var(--muted); margin-bottom: var(--space-2); }
.stories-head a {
  font-size: 13px; font-weight: 700; color: var(--navy);
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 2px solid var(--navy); padding-bottom: 2px;
}
/* Stories Bento — 1 hero + 3 stacked */
.stories-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--space-2);
  min-height: 480px;
}
.story-card[data-s="1"] { grid-row: 1 / 4; grid-column: 1; display: flex; flex-direction: column; }
.story-card[data-s="1"] .story-img { flex: 1; height: auto; min-height: 280px; }
.story-card[data-s="1"] h4 { font-size: 22px; line-height: 1.2; }
.story-card[data-s="1"] .story-body { padding: var(--space-3); }
.story-card[data-s="2"], .story-card[data-s="3"], .story-card[data-s="4"] {
  grid-column: 2;
  display: grid; grid-template-columns: 110px 1fr;
}
.story-card[data-s="2"] .story-img,
.story-card[data-s="3"] .story-img,
.story-card[data-s="4"] .story-img { height: 100%; min-height: 0; }
.story-card[data-s="2"] .story-body,
.story-card[data-s="3"] .story-body,
.story-card[data-s="4"] .story-body { padding: var(--space-2); }
.story-card[data-s="2"] h4,
.story-card[data-s="3"] h4,
.story-card[data-s="4"] h4 { font-size: 13px; line-height: 1.3; }
.story-card {
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--white);
  transition: all 0.3s var(--ease-out);
  box-shadow: 0 1px 2px rgba(14,17,22,0.03);
}
.story-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(14,17,22,0.08); border-color: transparent; }
.story-img {
  height: 150px;
  background-color: #1F2630;
  background-size: cover;
  background-position: center;
}
.story-body { padding: var(--space-2); }
.story-date { font-size: 10px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; }
.story-card h4 { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 8px; }
.story-card .read {
  font-size: 11px; font-weight: 700; color: var(--graphite);
  display: inline-flex; align-items: center; gap: 4px;
}

/* ─── Contact CTA bar (dark) ─── */
.contact-bar {
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(216,255,69,0.06), transparent 70%),
    var(--ink);
  color: var(--on-dark);
  padding: var(--space-7) 0;
}
.contact-head { text-align: center; max-width: 700px; margin: 0 auto var(--space-5); }
.contact-head .section-eyebrow { color: var(--accent); }
.contact-head h3 {
  font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; color: var(--on-dark);
  letter-spacing: -0.02em; line-height: 1.06; margin-top: 10px;
}
.contact-head p { font-size: 16px; color: var(--on-dark-muted); margin-top: 14px; }
.contact-form-row {
  /* 3 colonne: nome|telefono|esigenza sopra, email|citta|bottone sotto */
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px; max-width: 1000px; margin: 0 auto; align-items: center;
}
/* Nel codice la spunta del consenso sta prima del bottone, così chi naviga da
   telefono o con la tastiera la incontra prima di premere invia. Da computer il
   bottone chiude la riga dei campi e il consenso scende sotto, a tutta larghezza. */
.contact-form-row > button { order: 1; }
.contact-form-row .form-consent { order: 2; grid-column: 1 / -1; }
.contact-bar input, .contact-bar select {
  width: 100%; padding: 16px 20px;
  border: 1px solid rgba(255,255,255,0.2);
  background: var(--ink-soft);
  border-radius: var(--radius-pill);
  font-size: 15px; color: var(--on-dark);
  height: 54px;            /* stessa altezza degli input */
}
.contact-bar input::placeholder { color: var(--on-dark-soft); }
/* Select custom: niente chrome nativo, freccia disegnata, stessa pillola */
.contact-bar select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 46px;
  cursor: pointer;
  color: var(--on-dark-soft);   /* placeholder-like finché non si sceglie */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 14px;
}
.contact-bar select:focus { outline: none; border-color: var(--blue); color: var(--on-dark); }
.contact-bar select option { background: var(--ink); color: var(--on-dark); }
.contact-bar button {
  background: var(--accent); color: var(--ink);
  padding: 16px 30px;
  border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 700;
  white-space: nowrap;
}

/* ─── Responsive overrides V2 ─── */
@media (max-width: 1024px) {
  .hero-v2-inner { grid-template-columns: 1fr; min-height: 420px; padding-bottom: var(--space-5); }
  .hero-lineup { display: none; }
  .hero-stats { justify-self: stretch; min-width: 0; }
  .advisor-v2-grid { grid-template-columns: 1fr; }
  .advisor-opts-grid { grid-template-columns: repeat(2, 1fr); }
  .esplora-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 250px;
  }
  .esplora-card[data-cat="famiglia"], .esplora-card[data-cat="performance"] { grid-column: span 2; }
  .split-block { grid-template-columns: 1fr; }
  .tradein-band-inner { grid-template-columns: 1fr; }
  .tradein-car { display: none; }
  .tradein-fields { grid-template-columns: 1fr 1fr; }
  .tradein-fields button { grid-column: 1 / -1; }
  .perche-inner { grid-template-columns: 1fr; }
  .perche-grid { grid-template-columns: repeat(3, 1fr); }
  .stories-inner { grid-template-columns: 1fr; }
  .reviews-grid > .review-card { flex-basis: 86%; }
  .stories-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }
  .story-card[data-s="1"] { grid-row: auto; grid-column: 1; }
  .story-card[data-s="2"], .story-card[data-s="3"], .story-card[data-s="4"] {
    grid-column: 1; grid-template-columns: 110px 1fr;
  }
  .contact-form-row { grid-template-columns: 1fr 1fr; }
  .contact-form-row button { grid-column: 1 / -1; }
  /* Da qui in giù il bottone è già a capo: la spunta torna sopra, come nel codice. */
  .contact-form-row > button { order: 2; }
  .contact-form-row .form-consent { order: 1; }
  .cat-strip-inner { gap: 8px; }
  .cat-chip { min-width: 130px; padding: 10px 12px; font-size: 12px; }
}
@media (max-width: 640px) {
  /* .bw-track escluso: resta carosello orizzontale (regola @1024px), non griglia 2 colonne */
  /* .stories-grid escluso: a 640px la card 1 e' una hero e le altre hanno gia' la
     foto affiancata al testo. Su due colonne diventavano larghe 155px, con i
     titoli spezzati ogni due parole. Resta a colonna singola. */
  .esplora-grid, .occ-cards, .perche-grid { grid-template-columns: 1fr 1fr; }
  .advisor-opts-grid { grid-template-columns: 1fr; }
  .tco-fields { grid-template-columns: 1fr; }
  .tco-breakdown { grid-template-columns: 1fr; }
  .tco-item { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ═══════════════════════════════════════════════════════════
   Mobile accordion nav
   ═══════════════════════════════════════════════════════════ */
.nav-hamburger {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav.is-dark .nav-hamburger { color: var(--on-dark); }
.nav-hamburger:hover { background: rgba(255,255,255,0.08); }
.nav-hamburger svg { display: block; }

@media (max-width: 1024px) {
  .nav-inner { grid-template-columns: 1fr auto auto; gap: 12px; }
  .nav-menu {
    display: none;
    position: fixed;
    /* ALTEZZA ESPLICITA, NON `bottom: 0`.
       La nav e' `position: sticky`, e un elemento sticky fa da blocco
       contenitore ai discendenti `position: fixed` — quindi `top`/`bottom` si
       risolvevano dentro la nav alta 72px invece che sullo schermo:
       72 - 72 - 0 = 0, piu' il padding, uguale un pannello alto 49px.
       A pagina in cima non si notava; aperto a meta' pagina era una striscia
       nera sotto la barra, col sito che continuava sotto. (offsetParent del
       pannello tornava HEADER.nav: per un `fixed` dovrebbe essere null.)
       Con l'altezza scritta a mano il riferimento non serve piu'. */
    top: var(--nav-height); left: 0; right: 0; bottom: auto;
    height: calc(100vh - var(--nav-height));
    height: calc(100dvh - var(--nav-height));
    flex-direction: column;
    background: #0D0F14;                 /* fondo pieno: niente contenuti che traspaiono */
    border-top: 1px solid var(--line-dark);
    padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
    gap: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 99;
    animation: slideDown 0.22s var(--ease-out);
  }
  .nav-menu.is-open { display: flex; }
  /* in orizzontale il centraggio serve, in colonna no: centrava sei voci in
     mezzo allo schermo lasciando 200px vuoti sopra e altrettanti sotto */
  .nav-menu { justify-content: flex-start; }
  .nav-menu > a,
  .nav-menu .nav-dd-trigger {
    color: var(--on-dark) !important;
    padding: 15px 8px;
    border-bottom: 1px solid var(--line-dark);
    font-size: 17px; font-weight: 600;
  }
  /* il contenitore delle voci con sottomenu non deve raddoppiare il filetto */
  .nav-menu > .nav-dd { border-bottom: none; }
  .nav-menu > a:last-child,
  .nav-menu > .nav-dd:last-child .nav-dd-trigger { border-bottom: none; }
  .nav-menu > a:hover,
  .nav-menu .nav-dd-trigger:hover { color: var(--lime) !important; }
  /* menu aperto: blocca lo scroll di fondo e nascondi la barra sticky */
  body.nav-open { overflow: hidden; }
  /* col menu aperto la barra in alto era ancora semitrasparente e sfocata: si
     vedevano le auto della pagina scorrere dietro al logo, sopra un pannello
     nero pieno. Aperto il menu, la barra fa parte del menu. */
  /* selettore lungo di proposito: la barra e' `.nav.is-dark.is-solid` (0,3,0)
     con fondo semitrasparente e sfocatura, e una regola da 0,2,0 perdeva */
  body.nav-open .nav,
  body.nav-open .nav.is-dark,
  body.nav-open .nav.is-dark.is-solid { background: #0D0F14; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
  body.nav-open .mobile-cta { display: none; }
  .nav-hamburger { display: grid; place-items: center; }
  .nav-icons { gap: 6px; }
  .nav-icon-btn[aria-label="Cerca"],
  .nav-icon-btn[aria-label="Account"] { display: none; }
}
@keyframes slideDown {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   Perpetual micro-interactions (MOTION_INTENSITY = 6)
   ═══════════════════════════════════════════════════════════ */

/* Float continuo sul box stats hero — il sito "respira" */
@keyframes float-soft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}
/* Match badge: lime fisso, nessuna animazione */
.advisor-preview-card .match-tag {
  background: var(--lime);
}

/* CTA primaria: ferma a riposo, freccia avanza solo al hover */
.btn-lime svg {
  transition: transform 0.2s var(--ease-out);
}
.btn-lime:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(216,255,69,0.40);
}
.btn-lime:hover svg { transform: translateX(7px); }

.live-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: var(--radius-circle); background: var(--lime);
  margin-right: 6px;
}

/* Riduzione motion per chi lo preferisce */
@media (prefers-reduced-motion: reduce) {
  .hero-stats, .btn-lime, .advisor-preview-card .match-tag, .live-dot { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   WOW DETAILS
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. Tactile :active globale su CTA / link / card ─── */
.btn-lime:active, .btn-primary:active, .btn-secondary:active, .btn-outline-light:active,
.nav-cta-lime:active, .start-cta:active, .advisor-next:active,
.cat-chip:active, .bw-tile:active, .esplora-card:active, .stock-card:active,
.match-option:active, .advisor-opt:active, .nav-icon-btn:active, .occ-card:active,
.story-card:active, .family-card:active, .tradein-fields button:active,
.contact-bar button:active, .nav-hamburger:active {
  transform: translateY(1px) scale(0.985);
  transition: transform 0.06s ease-out;
}

/* ─── 2. Spotlight cursor su Brand Worlds tile ─── */
.bw-tile { position: relative; isolation: isolate; }
.bw-tile::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(216,255,69,0.18), transparent 65%);
  opacity: 0; transition: opacity 0.3s var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.bw-tile:hover::before { opacity: 1; }
.bw-tile > * { position: relative; z-index: 1; }

/* ─── 3. Stagger scroll reveal ─── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ─── 4. Ripple click ─── */
.ripple-dot {
  position: absolute;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.32);
  transform: scale(0);
  pointer-events: none;
  animation: ripple 0.6s ease-out forwards;
  z-index: 0;
}
.btn-lime .ripple-dot, .nav-cta-lime .ripple-dot { background: rgba(7,17,31,0.18); }
@keyframes ripple {
  to { transform: scale(1); opacity: 0; }
}

/* ─── 5. Kinetic marquee (auto-scroll trust band) ─── */
.marquee {
  background: var(--ink);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  overflow: hidden;
  padding: 14px 0;
  position: relative;
}
.marquee::before, .marquee::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 80px;
  pointer-events: none; z-index: 2;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--ink), transparent); }
.marquee-track {
  display: flex; gap: 56px;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee-item {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--on-dark-muted);
  font-weight: 500; letter-spacing: 0.02em;
  white-space: nowrap;
}
.marquee-item strong { color: var(--on-dark); font-weight: 600; }
.marquee-item .star { color: var(--lime); }
.marquee-item .sep { width: 4px; height: 4px; border-radius: var(--radius-circle); background: rgba(255,255,255,0.25); }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ─── 6. Liquid glass refinement sul hero-stats ─── */
.hero-stats {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    0 24px 60px -20px rgba(0,0,0,0.5);
}

/* CTA: transizione hover semplice (nessun effetto magnetico) */
.btn-lime, .nav-cta-lime { transition: transform 0.18s var(--ease-out), background 0.2s, box-shadow 0.2s; }

/* ─── 8. Hero load stagger (copy + stats rise on load) ─── */
@keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
.hero-v2 .copy > * { opacity: 0; animation: hero-rise 0.8s var(--ease-out) forwards; }
.hero-v2 .copy > *:nth-child(1) { animation-delay: 0.08s; }
.hero-v2 .copy > *:nth-child(2) { animation-delay: 0.18s; }
.hero-v2 .copy > *:nth-child(3) { animation-delay: 0.30s; }
.hero-stats { animation: hero-rise 0.9s var(--ease-out) 0.42s backwards; }

/* ─── 9. CTA sheen (riflesso che scorre, loop) ─── */
.btn-lime, .nav-cta-lime { position: relative; overflow: hidden; }
.btn-lime::after, .nav-cta-lime::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 38%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-18deg);
  pointer-events: none; z-index: 1;
  /* fermo a riposo: il riflesso passa solo al hover */
}
.btn-lime:hover::after, .nav-cta-lime:hover::after { animation: cta-sheen 0.7s ease-out; }
.btn-lime > *, .nav-cta-lime { z-index: 1; }
@keyframes cta-sheen { from { left: -60%; } to { left: 150%; } }

/* ─── 10. Hero star accent (lime) ─── */
.hero-stat .star { color: var(--accent); font-size: 0.64em; }

@media (prefers-reduced-motion: reduce) {
  .hero-v2 .copy > * { opacity: 1; animation: none; }
  .hero-stats { animation: none; }
  .btn-lime::after, .nav-cta-lime::after { animation: none; display: none; }
  .btn-lime svg { animation: none; }
  .hero-bg { animation: none; }
  .hero-bg:nth-child(1) { opacity: .92; }
  .hero-bg:nth-child(2), .hero-bg:nth-child(3) { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   SEZIONE SERVIZI (post-vendita) — bento
   ═══════════════════════════════════════════════════════════ */
.servizi { background: var(--white); }
.servizi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--space-2);
}
.servizi-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: var(--space-3);
  display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  box-shadow: 0 1px 2px rgba(14,17,22,0.03);
  min-height: 150px;
}
.servizi-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(14,17,22,0.10); border-color: var(--blue); }
/* featured è scura: profondità via bordo, non ombra */
.servizi-card.featured:hover { box-shadow: inset 0 0 0 1px rgba(216,255,69,0.30); border-color: var(--lime); }
.servizi-card .ico {
  width: 44px; height: 44px; border-radius: var(--radius-m);
  display: grid; place-items: center;
  background: var(--paper); color: var(--graphite);
  margin-bottom: var(--space-2);
}
.servizi-card h3 { font-size: 17px; font-weight: 700; color: var(--graphite); letter-spacing: -0.01em; }
.servizi-card p { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.servizi-card .link { margin-top: auto; padding-top: var(--space-2); font-size: 13px; font-weight: 700; color: var(--graphite); display: inline-flex; align-items: center; gap: 6px; }

/* Featured: Officina / Service — scura, accento lime, CTA */
.servizi-card.featured {
  grid-column: span 2; grid-row: span 2;
  background:
    radial-gradient(700px 360px at 100% 0%, rgba(216,255,69,0.10), transparent 70%),
    var(--ink);
  border-color: transparent;
  color: var(--on-dark);
  justify-content: space-between;
}
.servizi-card.featured .ico { background: var(--accent); color: var(--ink); width: 52px; height: 52px; }
.servizi-card.featured h3 { color: var(--on-dark); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; }
.servizi-card.featured p { color: var(--on-dark-muted); font-size: 15px; max-width: 380px; }
.servizi-card.featured .eyebrow-s { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.servizi-card.featured .btn-lime {
  align-self: flex-start; margin-top: var(--space-3);
  background: var(--accent); color: var(--ink);
  padding: 14px 24px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
}

@media (max-width: 1024px) {
  .servizi-grid { grid-template-columns: repeat(2, 1fr); }
  .servizi-card.featured { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 640px) {
  .servizi-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .servizi-card.featured { grid-column: span 1; }
}

/* ═══════════════════════════════════════════════════════════
   Tipografia display — Inter Tight sui titoli (brand kit)
   ═══════════════════════════════════════════════════════════ */
h1, h2, h3, h4,
.section-title, .hero-v2 h1, .hero-v2 .hslide-titolo, .hero-stat strong, .review-score .num,
.advisor-v2 h3, .servizi-card h3, .tco-total .val, .tco-item .val,
.contact-head h3, .tradein-band h3, .advisor-v2-card h3 {
  font-family: var(--font-display);
}

/* Payoff "Drive your next." nel footer */
.footer-payoff {
  margin-top: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--lime);
}

/* ═══════════════════════════════════════════════════════════
   Accessibilità (UI/UX Pro Max audit)
   ═══════════════════════════════════════════════════════════ */
/* Label nascoste visivamente ma lette dagli screen reader */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Focus visibile coerente (solo tastiera) — anello blu brand */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}
/* Su superfici scure l'anello diventa lime per contrasto */
.nav :focus-visible, .hero-v2 :focus-visible, .contact-bar :focus-visible,
.tradein-band :focus-visible, .servizi-card.featured :focus-visible, .footer :focus-visible,
.bp-hero :focus-visible, .bp-trust :focus-visible, .bp-section :focus-visible,
.bp-quote :focus-visible, .bp-promos :focus-visible, .bp-final :focus-visible,
.vd-hero :focus-visible, .mobile-cta :focus-visible {
  outline-color: var(--lime);
}

/* Stato form inline (successo/errore) — sostituisce alert() */
.form-status {
  font-size: 14px; font-weight: 600;
  margin-top: var(--space-2);
  padding: 12px 16px; border-radius: var(--radius-m);
  display: flex; align-items: center; gap: 8px;
}
.contact-form-row + .form-status { grid-column: 1 / -1; max-width: 1000px; margin: var(--space-2) auto 0; }
.form-status.ok  { background: rgba(76,138,79,0.15); color: #8FCf8a; border: 1px solid rgba(76,138,79,0.4); }
.form-status.err { background: rgba(194,90,74,0.15); color: #E59A8C; border: 1px solid rgba(194,90,74,0.4); }
/* La regione dei messaggi sta nel DOM anche vuota, altrimenti gli screen reader
   non leggono il primo errore: da vuota non deve occupare spazio né disegnarsi. */
.form-status.vuoto { display: none; }
[aria-invalid="true"] { border-color: rgba(194,90,74,0.85); }
/* su sezioni chiare (trade-in è scuro, contact è scuro → vanno bene chiari) */
.tradein-fields .form-status { grid-column: 1 / -1; }
/* bottoni in stato loading */
button.is-loading { opacity: 0.7; pointer-events: none; position: relative; }

/* ═══════════════════════════════════════════════════════════
   CTA sticky mobile (sotto i 768px)
   ═══════════════════════════════════════════════════════════ */
.mobile-cta { display: none; }
@media (max-width: 768px) {
  .mobile-cta {
    display: grid; grid-template-columns: 1fr auto;
    gap: 10px;
    position: fixed; left: 12px; right: 12px; bottom: 12px;
    z-index: 90;
    padding: 10px;
    background: rgba(13,15,20,0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-pill);
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  }
  .mobile-cta a {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 18px; border-radius: var(--radius-pill);
    font-size: 14px; font-weight: 700;
  }
  .mobile-cta .m-find { background: var(--lime); color: var(--ink); }
  .mobile-cta .m-call { background: transparent; color: var(--on-dark); border: 1px solid rgba(255,255,255,0.25); width: 52px; padding: 14px 0; }
  .mobile-cta { transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
  .mobile-cta.has-price { grid-template-columns: auto 1fr auto; align-items: center; }
  .mobile-cta .m-price { display: flex; flex-direction: column; line-height: 1.15; padding-left: 8px; color: var(--on-dark); }
  .mobile-cta .m-price b { font-family: var(--font-display); font-size: 17px; font-weight: 800; }
  .mobile-cta .m-price span { font-size: 10.5px; color: rgba(255,255,255,0.62); }
  .mobile-cta.has-price .m-find { padding: 14px 12px; font-size: 13.5px; }
  /* /usato: «Richiamami» più chiamata e WhatsApp, due tondi della stessa misura */
  .mobile-cta.mobile-cta-3 { grid-template-columns: 1fr auto auto; }
  .mobile-cta .m-wa { background: transparent; color: #25D366; border: 1px solid rgba(255,255,255,0.25); width: 52px; padding: 14px 0; }
  /* Quando il form di contatto è a schermo la barra si toglie di mezzo: prima
     copriva il tasto «Invia richiesta» (55px di sovrapposizione misurati). */
  body.form-in-view .mobile-cta,
  body.hero-in-view .mobile-cta { opacity: 0; transform: translateY(130%); pointer-events: none; }
  /* Il banner cookie è anche lui fissato in fondo, ma sta più in alto nella
     pila (z-index 200 contro 90): al primo accesso copriva la barra per
     intero, e «Richiamami», «Chiama» e «WhatsApp» non si vedevano né si
     toccavano. È proprio la prima visita che conta, perché /usato è la pagina
     dove atterrano gli annunci. Finché il banner è aperto la barra sale sopra
     di lui, di quanto il banner misura davvero (--cookie-h, scritta da
     CookieBanner: il testo va a capo in modo diverso su ogni telefono). */
  body.cookie-in-view .mobile-cta { bottom: var(--cookie-h, 108px); }
  /* spazio per non coprire il footer */
  .footer { padding-bottom: 96px; }
}
/* schermi molto stretti: la rata sotto il prezzo toglierebbe spazio alla CTA */
@media (max-width: 360px) {
  .mobile-cta .m-price span { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   Mega-menu Brand (dropdown desktop)
   ═══════════════════════════════════════════════════════════ */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd-trigger { display: inline-flex; align-items: center; gap: 4px; }
.dd-caret { transition: transform 0.2s var(--ease-out); }
.nav-dd:hover .dd-caret { transform: rotate(180deg); }
.nav-dd-panel {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  margin-top: 12px;
  background: rgba(13,15,20,0.97);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-l);
  padding: 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  min-width: 380px;
  box-shadow: 0 24px 50px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
  z-index: 110;
}
/* ponte invisibile per non perdere l'hover nel gap */
.nav-dd-panel::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dd-panel a {
  padding: 11px 14px; border-radius: var(--radius-s);
  font-size: 14px; font-weight: 600; color: var(--on-dark) !important;
  white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.nav-dd-panel a:hover { background: rgba(255,255,255,0.07); color: var(--lime) !important; }

@media (max-width: 1024px) {
  /* mobile: le tendine diventano accordion espandibili (tap sul titolo) */
  .nav-dd { display: block; border-bottom: 1px solid var(--line-dark); }
  .nav-dd-trigger {
    justify-content: space-between; width: 100%;
    color: var(--on-dark) !important;
    padding: 15px 8px; font-size: 17px; font-weight: 600;
  }
  .dd-caret { display: inline-block; transition: transform 0.2s var(--ease-out); }
  .nav-dd.is-open .dd-caret { transform: rotate(180deg); }
  /* pannello: da dropdown assoluto a lista in-flusso, chiuso di default */
  .nav-dd-panel {
    display: none;
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: none; box-shadow: none; border-radius: 0;
    padding: 0 0 8px; min-width: 0;
  }
  .nav-dd.is-open .nav-dd-panel { display: block; }
  /* Le regole desktop del dropdown (.nav-dd:hover/:focus-within) hanno due classi
     e battevano il "transform: none" qui sopra, che ne ha una. Sul telefono il
     :focus-within scatta appena si tocca la voce: il pannello scivolava di 163px
     fuori schermo e meta' dei marchi non si poteva piu' toccare. */
  .nav-dd:hover .nav-dd-panel,
  .nav-dd:focus-within .nav-dd-panel { transform: none; left: auto; }
  /* IL punto: sul desktop la tendina e' trasparente ai clic finche' non ci passi
     sopra col mouse, e si riattiva su :hover. Sul telefono il mouse non esiste:
     il pannello si apriva col tocco ma restava attraversabile, quindi i marchi
     si vedevano e non si potevano premere. */
  .nav-dd-panel,
  .nav-dd-panel a { pointer-events: auto; }
  .nav-dd-panel a {
    display: block;
    /* erano piu' smorti delle voci principali e sembravano disattivati */
    color: rgba(255,255,255,0.94) !important;
    padding: 12px 8px 12px 22px; font-size: 15.5px; font-weight: 500;
    border-radius: var(--radius-s);
  }
  .nav-dd-panel a:hover { color: var(--lime) !important; background: rgba(255,255,255,0.05); }
}

/* Touch target nav icons → 40px */
.nav-icon-btn { width: 40px; height: 40px; }

/* Microcopy rassicurazione sotto i CTA hero */
.hero-reassure {
  margin-top: var(--space-3);
  font-size: 13px; font-weight: 500;
  color: var(--on-dark-muted);
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════
   MODEL LANDING PAGE (modello + città — SEO ad alto intento)
   ═══════════════════════════════════════════════════════════ */
.mp-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--navy-deep) 0%, #0B1428 60%, var(--ink) 100%);
  color: var(--on-dark);
  padding: calc(var(--nav-height) + var(--space-6)) 0 var(--space-6);
}
.mp-hero-photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 1;
}
.mp-breadcrumb { position: relative; z-index: 2; font-size: 12.5px; color: var(--on-dark-soft); margin-bottom: var(--space-3); }
.mp-breadcrumb a { color: var(--on-dark-muted); text-decoration: none; }
.mp-breadcrumb a:hover { color: var(--lime); }
.mp-breadcrumb span { margin: 0 6px; opacity: 0.5; }
.mp-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  /* Curva della piattaforma (vedi .usato-hero): forte sul lato testo, zero a destra. */
  background: linear-gradient(90deg, rgba(13,15,20,0.72) 0%, rgba(13,15,20,0.52) 28%, rgba(13,15,20,0.24) 56%, rgba(13,15,20,0) 84%);
}
.mp-hero .container { position: relative; z-index: 2; }
.mp-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); }
.mp-hero h1 {
  font-family: var(--font-display); font-weight: var(--h1-weight,800); letter-spacing: -0.02em;
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; color: var(--on-dark);
  margin-top: 10px; max-width: 14ch;
}
.mp-hero .mp-sub { margin-top: var(--space-2); font-size: 17px; color: var(--on-dark-muted); max-width: 52ch; }
.mp-price { margin-top: var(--space-3); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mp-price .from { font-size: 13px; color: var(--on-dark-muted); }
.mp-price .num { font-family: var(--font-display); font-size: 34px; font-weight: 800; color: var(--on-dark); }
.mp-price .rate { font-size: 14px; color: var(--lime); font-weight: 700; }
.mp-cta { display: flex; gap: 12px; margin-top: var(--space-4); flex-wrap: wrap; }

/* spec strip */
.mp-specs { background: var(--ink); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); padding: var(--space-3) 0; }
.mp-specs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.mp-spec { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.mp-spec .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--on-dark-soft); font-weight: 600; }
.mp-spec .v { font-size: 16px; font-weight: 700; color: var(--on-dark); }

/* intro testo SEO */
.mp-intro { max-width: 70ch; margin: 0 auto; text-align: center; }
.mp-intro p { font-size: 16px; color: var(--text); line-height: 1.7; }

@media (max-width: 1024px) { .mp-specs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .mp-specs-grid { grid-template-columns: 1fr 1fr; } .mp-hero h1 { max-width: none; } }

/* trims / allestimenti */
.mp-trims-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.mp-trim {
  background: var(--white); border: 1px solid var(--line, #E6E8EC); border-radius: var(--radius-l);
  padding: var(--space-3); display: flex; flex-direction: column; gap: 6px;
  transition: border-color .2s ease, transform .2s ease;
}
.mp-trim:hover { border-color: var(--blue); transform: translateY(-3px); }
.mp-trim.is-popular { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.mp-trim .tag { align-self: flex-start; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue); background: rgba(0,87,217,0.08); padding: 3px 8px; border-radius: var(--radius-pill); }
.mp-trim h4 { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--navy); margin: 0; }
.mp-trim .price-line { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.mp-trim .price-line .n { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--navy); }
.mp-trim .price-line .u { font-size: 12px; color: var(--text-muted, #6B7280); }
.mp-trim ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.mp-trim li { font-size: 13.5px; color: var(--text); padding-left: 20px; position: relative; line-height: 1.4; }
.mp-trim li::before { content: '✓'; position: absolute; left: 0; color: var(--blue); font-weight: 700; }
.mp-trim .btn-secondary { margin-top: auto; }

/* budget band */
.mp-budget {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: var(--on-dark); border-radius: var(--radius-l); padding: var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
.mp-budget h3 { font-family: var(--font-display); font-size: clamp(22px,2.6vw,30px); font-weight: 800; color: var(--on-dark); margin: 0; max-width: 18ch; }
.mp-budget p { font-size: 15px; color: rgba(255,255,255,0.82); margin: 8px 0 0; max-width: 46ch; }

/* trust band */
.mp-trust { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; text-align: center; }
.mp-trust .stars { color: var(--lime); font-size: 22px; letter-spacing: 2px; }
.mp-trust .big { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--navy); }
.mp-trust .lbl { font-size: 13px; color: var(--text-muted, #6B7280); }
.mp-trust-divider { width: 1px; height: 38px; background: var(--line, #E6E8EC); }

/* related */
.mp-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.mp-related-grid a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--white); border: 1px solid var(--line, #E6E8EC); border-radius: var(--radius-m);
  padding: 18px 20px; text-decoration: none; color: var(--navy); font-weight: 600; font-size: 15px;
  transition: border-color .2s ease, transform .2s ease;
}
.mp-related-grid a:hover { border-color: var(--blue); transform: translateY(-2px); }
.mp-related-grid a svg { color: var(--blue); flex-shrink: 0; }

@media (max-width: 900px) {
  .mp-trims-grid, .mp-related-grid { grid-template-columns: 1fr; }
  .mp-budget { flex-direction: column; align-items: flex-start; }
}

/* model-page FAQ accordion */
.mp-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.mp-faq-item { border: 1px solid var(--line, #E6E8EC); border-radius: var(--radius-m); background: var(--white); overflow: hidden; }
.mp-faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 16px; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mp-faq-item summary::-webkit-details-marker { display: none; }
.mp-faq-item summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--blue); transition: transform .2s ease; line-height: 1; }
.mp-faq-item[open] summary::after { transform: rotate(45deg); }
.mp-faq-item .a { padding: 0 22px 20px; font-size: 15px; line-height: 1.65; color: var(--text); }

/* modelli più richiesti (internal linking SEO su home) */
.popular-models { margin-top: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.popular-models .pm-label { font-size: 13px; font-weight: 700; color: var(--text-muted, #6B7280); margin-right: 4px; }
.popular-models a {
  font-size: 13.5px; font-weight: 600; color: var(--navy); text-decoration: none;
  border: 1px solid var(--line, #E6E8EC); border-radius: var(--radius-pill); padding: 7px 15px;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.popular-models a:hover { border-color: var(--blue); color: var(--blue); background: rgba(0,87,217,0.04); }

/* ═══════════════════════════════════════════════════════════
   PAGINA USATO & KM0  +  OFFERTE / PROMO
   ═══════════════════════════════════════════════════════════ */
/* hero usato (riusa look mp-hero) */
.usato-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy-deep) 0%, #0B1428 60%, var(--ink) 100%); color: var(--on-dark); padding: calc(var(--nav-height) + var(--space-6)) 0 var(--space-5); }
.usato-hero .usato-hero-photo { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 1; }
/* VELO HERO — REGOLA DELLA PIATTAFORMA (scelta cliente 13/8, rivista col
   cliente il 19/8): velo su TUTTA l'altezza della foto, FORTE sul lato del
   testo (0.72, come la home che sta a 0.92) e ZERO a destra dove la foto
   respira. Niente scudi radiali locali: su blocchi larghi si leggono come
   una chiazza. Vale per OGNI hero di OGNI concessionaria (.usato-hero,
   .bp-hero, .mp-hero): chi tocca un velo si allinea a questa curva. */
.usato-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(13,15,20,0.72) 0%, rgba(13,15,20,0.52) 28%, rgba(13,15,20,0.24) 56%, rgba(13,15,20,0) 84%), linear-gradient(180deg, rgba(13,15,20,0) 66%, rgba(13,15,20,0.22) 100%); }
/* Su mobile il testo occupa tutta la larghezza: velo più uniforme per la leggibilità */
@media (max-width: 720px) { .usato-hero::after { background: linear-gradient(180deg, rgba(13,15,20,0.42) 0%, rgba(13,15,20,0.68) 100%); } }
.usato-hero .container { position: relative; z-index: 2; }
.usato-hero h1 { font-family: var(--font-display); font-weight: var(--h1-weight,800); letter-spacing: -0.02em; font-size: clamp(32px,4.4vw,52px); line-height: 1.05; color: var(--on-dark); margin: 8px 0 0; max-width: 18ch; }
/* Testo pieno; niente più scudo radiale dietro il blocco del titolo: su
   blocchi larghi l'alone si leggeva come una chiazza ovale (rilievo cliente
   19/8). La leggibilità la garantisce il velo asimmetrico qui sopra. */
.usato-hero .uh-sub { margin-top: var(--space-2); font-size: 17px; color: #F3F5F5; max-width: 56ch; }
.usato-hero-copy { position: relative; }
.usato-usp { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.usato-usp .usp { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--on-dark); }
.usato-usp .usp svg { color: var(--lime); flex-shrink: 0; }

/* griglia veicoli */
.uv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.uv-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line, #E6E8EC); border-radius: var(--radius-l); overflow: hidden; text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.uv-card:hover { border-color: var(--blue); transform: translateY(-4px); }
.uv-photo { position: relative; aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: #E9ECF1; }
.uv-badge { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-pill); }
.uv-badge.km0 { background: var(--blue); color: #fff; }
.uv-badge.usato { background: rgba(13,15,20,0.82); color: #fff; }
.uv-badge.aziendale { background: #fff; color: var(--ink); border: 1px solid rgba(13,15,20,0.25); }
.uv-badge.promo { background: var(--lime); color: var(--ink); }
.uv-fav { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: var(--radius-circle); background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; color: var(--navy); }
.uv-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.uv-body .brandline { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue); }
.uv-body h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--navy); margin: 0; line-height: 1.2; }
.uv-body .ver { font-size: 13px; color: var(--text-muted, #6B7280); margin-top: -2px; }
.uv-specs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }

.uv-specs span { font-size: 12px; color: var(--text); background: var(--paper); border-radius: var(--radius-s); padding: 4px 9px; }
.uv-price { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 12px; }
.uv-price .now { font-family: var(--font-display); font-size: 23px; font-weight: 800; color: var(--navy); }
.uv-price .was { font-size: 14px; color: var(--text-muted, #6B7280); text-decoration: line-through; }
.uv-rate { font-size: 12.5px; color: var(--text-muted, #6B7280); }
.uv-rate b { color: var(--navy); }
.uv-card .uv-cta { margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--navy); color: #fff; font-weight: 600; font-size: 14px; padding: 11px 16px; border-radius: var(--radius-m); transition: background .2s ease; }
.uv-card:hover .uv-cta { background: var(--blue); }
.uv-empty { grid-column: 1/-1; text-align: center; color: var(--text-muted, #6B7280); padding: var(--space-5) 0; font-size: 15px; }

/* OFFERTE / PROMO */
.promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
/* SLIDER PROMO (solo home): 3 card visibili + sbircia la successiva, scorri con frecce/swipe.
   /promozioni resta griglia (.promo-grid): questo blocco tocca solo .promo-slider. */
.promo-slider { position: relative; }
.promo-track {
  display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x proximity;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 4px; /* spazio per l'ombra hover */
}
.promo-track::-webkit-scrollbar { display: none; }
/* poche promo (niente da scorrere): torna griglia, niente card sperdute a 1/3 */
.promo-slider--static .promo-track { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
.promo-slider--static .promo-track > .promo-card { flex: initial; }
@media (max-width: 980px) { .promo-slider--static .promo-track { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .promo-slider--static .promo-track { grid-template-columns: 1fr; } }

/* Fascia promo su brand e servizi: la disposizione segue il numero.
   1 promo = card a tutta larghezza, 2 = due colonne, 3 = tre colonne;
   da 4 in su resta lo slider (markup .promo-slider, non questa classe). */
.promo-fit { display: grid; gap: var(--space-3); }
.promo-fit[data-n="1"] { grid-template-columns: 1fr; }
.promo-fit[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
.promo-fit[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .promo-fit[data-n="3"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .promo-fit[data-n="2"], .promo-fit[data-n="3"] { grid-template-columns: 1fr; } }

/* GAMMA A SLIDER (da 4 modelli in su) — stesso motore e stesse frecce delle
   promo. Con 13-18 modelli la griglia era un lenzuolo: si scorre in orizzontale,
   3 card piene piu' una sbirciata. Sotto i 4 modelli resta la griglia .bp-lineup. */
.gamma-track > .bp-model {
  flex: 0 0 calc((100% - 3.15 * var(--space-3)) / 3.15);
  scroll-snap-align: start;
}
@media (max-width: 980px) { .gamma-track > .bp-model { flex-basis: calc((100% - 1.2 * var(--space-3)) / 1.2); } }
/* rete di sicurezza dello script (--static): se non c'e' nulla da scorrere, griglia */
.promo-slider--static .gamma-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); overflow: visible; }
.promo-slider--static .gamma-track > .bp-model { flex: initial; }

/* UNA promo sola a tutta larghezza: la card si sdraia — foto a sinistra,
   contenuto a destra. Senza questa variante una foto quadrata (formato
   Instagram) a tutta pagina diventava un monolite da ~1.200px d'altezza
   (visto su Veicoli Commerciali). I figli della card sono piatti, quindi:
   la foto abbraccia tutte le righe, il resto scorre nella colonna destra.
   Sotto i 760px resta la card verticale di sempre. */
@media (min-width: 761px) {
  .promo-fit[data-n="1"] .promo-card {
    display: grid;
    grid-template-columns: minmax(300px, 42%) 1fr;
    column-gap: var(--space-4);
    row-gap: 10px;
    align-content: center;
  }
  .promo-fit[data-n="1"] .promo-card > .promo-media {
    grid-column: 1;
    grid-row: 1 / span 12; /* le righe implicite vuote hanno altezza zero */
    height: auto;
    min-height: 300px;
    max-height: 460px;
    aspect-ratio: auto;
    margin-bottom: 0;
  }
  .promo-fit[data-n="1"] .promo-card > :not(.promo-media) { grid-column: 2; }
  .promo-fit[data-n="1"] .promo-media--video video { height: 100%; width: 100%; object-fit: cover; }
}
.promo-track > .promo-card {
  /* 3 piene + una sbirciata (≈0.15) → invita a scorrere. gap incluso nel calcolo. */
  flex: 0 0 calc((100% - 3.15 * var(--space-3)) / 3.15);
  scroll-snap-align: start;
}
/* frecce: cerchietti ai lati, comparse solo se c'è da scorrere (data-can-scroll) */
.promo-nav {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--line, #E6E8EC);
  background: var(--white); color: var(--ink, #0D0F14); font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(13,15,20,.28); transition: opacity .2s ease, background .2s ease;
}
.promo-nav:hover { background: var(--paper, #F5F6F8); }
.promo-nav.prev { left: -12px; }
.promo-nav.next { right: -12px; }
.promo-nav[hidden] { display: none; }
.promo-nav:disabled { opacity: .35; cursor: default; box-shadow: none; }
@media (max-width: 980px) { .promo-track > .promo-card { flex-basis: calc((100% - 2.15 * var(--space-3)) / 2.15); } }
@media (max-width: 640px) {
  .promo-track > .promo-card { flex-basis: 86%; }
  .promo-nav { display: none; } /* su mobile si scorre con lo swipe */
}
.promo-card { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--white); border: 1px solid var(--line, #E6E8EC); border-radius: var(--radius-l); padding: var(--space-4); transition: border-color .2s ease, transform .2s ease; }
.promo-card:hover { border-color: var(--blue); transform: translateY(-3px); }
.promo-card.is-featured { background: linear-gradient(150deg, var(--ink) 0%, #14213D 100%); border: none; color: var(--on-dark); }
.promo-card.is-featured h3, .promo-card.is-featured .promo-big { color: #fff; }
.promo-card.is-featured p { color: rgba(255,255,255,0.78); }
.promo-badge { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 5px 11px; border-radius: var(--radius-pill); background: rgba(0,87,217,0.08); color: var(--blue); }
.promo-card.is-featured .promo-badge { background: var(--lime); color: var(--ink); }
.promo-big { font-family: var(--font-display); font-size: clamp(26px,3vw,34px); font-weight: 800; color: var(--navy); line-height: 1; margin-top: 4px; }
/* Modello "prezzo": prezzo pieno barrato + prezzo scontato + risparmio */
.promo-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; margin-top: 4px; }
.promo-price-was { font-size: 15px; color: var(--text-muted, #6B7280); text-decoration: line-through; }
.promo-price-now { font-family: var(--font-display); font-size: clamp(26px,3vw,34px); font-weight: 800; color: var(--navy); line-height: 1; }
.promo-price-save { align-self: center; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(220,38,38,0.10); color: #DC2626; white-space: nowrap; }
.promo-card.is-featured .promo-price-was { color: rgba(255,255,255,0.60); }
.promo-card.is-featured .promo-price-now { color: #fff; }
.promo-card.is-featured .promo-price-save { background: var(--lime); color: var(--ink); }
.promo-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--navy); margin: 0; }
.promo-card p { font-size: 14px; color: var(--text); line-height: 1.55; margin: 0; }
/* Descrizione = esca, non muro: max 3 righe, così ogni card resta compatta e uniforme */
/* La descrizione si mostra INTERA. Il taglio a 3 righe coi puntini sembrava
   ordine, ma nascondeva le condizioni delle offerte (segnalato dal cliente su
   /brand/skoda: la card Fabia finiva in "…" proprio sulle condizioni). Le
   griglie reggono altezze diverse: la riga si allunga, non si sbilancia. */
.promo-card .promo-desc { overflow-wrap: break-word; }
/* Legali a scomparsa: obbligatori, sempre disponibili, ma non gonfiano la card */
.promo-legali { margin-top: auto; }
.promo-legali > summary { list-style: none; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--text-muted, #6B7280); display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; }
.promo-legali > summary::-webkit-details-marker { display: none; }
.promo-legali > summary::before { content: "ⓘ"; font-weight: 400; opacity: .8; }
.promo-legali[open] > summary { margin-bottom: 5px; }
.promo-legali p { font-size: 11px; line-height: 1.5; color: var(--text-muted, #6B7280); margin: 0; }
.promo-card.is-featured .promo-legali > summary, .promo-card.is-featured .promo-legali p { color: rgba(255,255,255,0.62); }
.promo-card .promo-cta { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--blue); text-decoration: none; }
.promo-card.is-featured .promo-cta { color: var(--lime); }
.promo-card .promo-cta svg { transition: transform .2s ease; }
.promo-card:hover .promo-cta svg { transform: translateX(3px); }

@media (max-width: 980px) { .uv-grid, .promo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .uv-grid, .promo-grid { grid-template-columns: 1fr; }
  .usato-usp { gap: var(--space-2); }
}

/* ═══════════════════════════════════════════════════════════
   SCHEDA VEICOLO (dettaglio singolo + gallery)
   ═══════════════════════════════════════════════════════════ */
.vd-head { padding: calc(var(--nav-height) + var(--space-2)) 0 var(--space-3); background: var(--white); }
.vd-head .mp-breadcrumb { color: var(--text-muted, #6B7280); margin-bottom: var(--space-2); }
.vd-head .mp-breadcrumb a { color: var(--text-muted, #6B7280); }
.vd-head .mp-breadcrumb a:hover { color: var(--blue); }
.vd-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.vd-title .brandline { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue); }
.vd-title h1 { font-family: var(--font-display); font-size: clamp(28px,3.6vw,42px); font-weight: var(--h1-weight,800); color: var(--navy); margin: 4px 0 0; line-height: 1.05; }
.vd-title .ver { font-size: 16px; color: var(--text-muted, #6B7280); margin-top: 4px; }
.vd-quickspecs { display: flex; gap: 10px; flex-wrap: wrap; }
.vd-quickspecs span { font-size: 12.5px; color: var(--text); background: var(--paper); border-radius: var(--radius-s); padding: 6px 12px; }

/* layout */
.vd-wrap { display: grid; grid-template-columns: 1.8fr 1fr; gap: var(--space-4); align-items: start; padding-top: var(--space-4); }

/* gallery */
.vd-gallery { display: flex; flex-direction: column; gap: 12px; }
.vd-main { position: relative; aspect-ratio: 3/2; border-radius: var(--radius-l); background-size: cover; background-position: center; background-color: #E9ECF1; overflow: hidden; }
.vd-main .vd-badge { position: absolute; top: 14px; left: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-pill); }
.vd-badge.km0 { background: var(--blue); color: #fff; }
.vd-badge.usato { background: rgba(13,15,20,0.82); color: #fff; }
.vd-badge.promo { background: var(--lime); color: var(--ink); }
.vd-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.vd-thumb { aspect-ratio: 16/11; border-radius: var(--radius-m); background-size: cover; background-position: center; background-color: #E9ECF1; cursor: pointer; border: 2px solid transparent; transition: border-color .15s ease, opacity .15s ease; opacity: .72; }
.vd-thumb:hover { opacity: 1; }
.vd-thumb.is-active { border-color: var(--blue); opacity: 1; }

/* sidebar price card */
.vd-side { position: sticky; top: calc(var(--nav-height) + 16px); display: flex; flex-direction: column; gap: var(--space-3); }
.vd-pricecard { background: var(--white); border: 1px solid var(--line, #E6E8EC); border-radius: var(--radius-l); padding: var(--space-4); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 14px 36px rgba(13,15,20,0.06); }
.vd-pricecard .price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vd-pricecard .now { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--navy); }
.vd-pricecard .was { font-size: 16px; color: var(--text-muted, #6B7280); text-decoration: line-through; }
.vd-pricecard .save { font-size: 12px; font-weight: 700; color: #fff; background: var(--lime-dark); color: var(--ink); padding: 3px 9px; border-radius: var(--radius-pill); }
.vd-pricecard .rate { font-size: 14px; color: var(--text); }
.vd-pricecard .rate b { color: var(--blue); }
.vd-pricecard .btn-lime, .vd-pricecard .btn-primary, .vd-pricecard .btn-secondary { width: 100%; justify-content: center; }
.vd-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 18px; border-radius: var(--radius-m); font-weight: 600; font-size: 15px; background: #25D366; color: #fff; text-decoration: none; transition: filter .2s ease; }
.vd-wa:hover { filter: brightness(0.95); }
.vd-dealer { border-top: 1px solid var(--line, #E6E8EC); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.vd-dealer .row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); }
.vd-dealer .row svg { color: var(--blue); flex-shrink: 0; }
.vd-dealer .stars { color: var(--lime-dark); font-size: 14px; letter-spacing: 1px; }

/* sezioni dettaglio */
.vd-section { padding: var(--space-5) 0; border-top: 1px solid var(--line, #E6E8EC); }
.vd-section h2 { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--navy); margin: 0 0 var(--space-3); }
.vd-spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--white); border: 1px solid var(--line, #E6E8EC); border-radius: var(--radius-m); overflow: hidden; }
.vd-spec-grid .cell { background: var(--white); outline: 1px solid var(--line, #E6E8EC); padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; }
.vd-spec-grid .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted, #6B7280); font-weight: 600; }
.vd-spec-grid .v { font-size: 15px; font-weight: 700; color: var(--navy); }
.vd-equip { display: flex; flex-wrap: wrap; gap: 10px; }
.vd-equip span { font-size: 13.5px; color: var(--text); background: var(--paper); border: 1px solid var(--line, #E6E8EC); border-radius: var(--radius-pill); padding: 8px 15px; display: inline-flex; align-items: center; gap: 8px; }
.vd-equip span::before { content: '✓'; color: var(--blue); font-weight: 700; }
.vd-desc { max-width: 72ch; font-size: 15.5px; line-height: 1.75; color: var(--text); }

@media (max-width: 920px) {
  .vd-wrap { grid-template-columns: 1fr; }
  .vd-side { position: static; }
  .vd-spec-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .vd-thumbs { grid-template-columns: repeat(4, 1fr); }
  .vd-spec-grid { grid-template-columns: 1fr; }
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║  GLASSMORPHISM ACCENTS — SPERIMENTALE (rimuovibile in blocco)║
   ║  Solo superfici sopra foto: nav frosted, hero stats, price  ║
   ║  card scheda veicolo. Per disattivare: elimina questo blocco.║
   ╚═══════════════════════════════════════════════════════════╝ */
/* 1 — Nav frosted on-scroll (più translucida + blur deciso) */
.nav.is-dark.is-solid {
  background: rgba(13,15,20,0.55);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 30px rgba(0,0,0,0.20);
}
/* 2 — Hero stats: glass card rifinita sopra la foto */
.hero-stats {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 24px 60px rgba(0,0,0,0.28);
}
/* 3 — Price card scheda veicolo: frosted white glass */
.vd-pricecard {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 24px 60px rgba(13,15,20,0.14);
}

/* Fallback: niente backdrop-filter (vecchi browser) → superfici solide */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-dark.is-solid { background: rgba(13,15,20,0.94); }
  .hero-stats          { background: rgba(13,15,20,0.55); }
  .vd-pricecard        { background: var(--white); }
}
/* Rispetto preferenza utente: meno trasparenza → superfici solide */
@media (prefers-reduced-transparency: reduce) {
  .nav.is-dark.is-solid { background: rgba(13,15,20,0.96); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hero-stats          { background: rgba(13,15,20,0.6);  backdrop-filter: none; -webkit-backdrop-filter: none; }
  .vd-pricecard        { background: var(--white);        backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* ═══════════════ FINE BLOCCO GLASSMORPHISM ═══════════════════ */

/* consenso privacy (GDPR) nei form — pronto per lead reali */
.form-consent { flex-basis: 100%; display: flex; align-items: flex-start; gap: 9px; margin-top: 4px; min-height: 44px; padding: 4px 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted, #6B7280); text-align: left; }
/* Il quadratino del consenso: 22px in tutti e quattro i form del sito. A 17px (e
   peggio, alla misura di sistema) su un telefono si sbaglia mira, e la spunta del
   consenso è l'unico campo che non si può sbagliare. Il tocco resta preso da tutta
   l'etichetta, che è alta 44px o più. */
.form-consent input[type="checkbox"],
.cf-consent input[type="checkbox"],
.advisor-lead-priv input[type="checkbox"],
.vw-consent input[type="checkbox"],
.bp-quote-check input[type="checkbox"] {
  width: 22px !important; height: 22px; margin-top: 0; accent-color: var(--blue);
  flex-shrink: 0; cursor: pointer;
}
.form-consent a { color: var(--blue); text-decoration: underline; }
.contact-bar .form-consent { color: rgba(255,255,255,0.62); }
.contact-bar .form-consent a { color: var(--lime); }

/* ===== Leva commerciale: scarsità / interesse (scheda veicolo) ===== */
.vd-scarcity { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 16px; }
.vd-sc-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-60, #5a6170); line-height: 1.3; }
.vd-sc-item svg { flex: 0 0 auto; }
.vd-sc-item b { color: var(--ink, #0d0f14); }
.vd-sc-item.hot { color: #c0392b; }
.vd-sc-item.hot b { color: #c0392b; }
.vd-sc-item.live b { color: var(--blue, #0057d9); }
.vd-sc-pulse { width: 8px; height: 8px; border-radius: var(--radius-circle); background: #19b36b; box-shadow: 0 0 0 0 rgba(25,179,107,.6); animation: vdpulse 1.8s infinite; }
@keyframes vdpulse { 0% { box-shadow: 0 0 0 0 rgba(25,179,107,.5); } 70% { box-shadow: 0 0 0 7px rgba(25,179,107,0); } 100% { box-shadow: 0 0 0 0 rgba(25,179,107,0); } }
@media (prefers-reduced-motion: reduce) { .vd-sc-pulse { animation: none; } }

/* ===== Accesso rapido CMS dal footer ===== */
.footer-admin { display: inline-flex !important; align-items: center; gap: 6px; color: var(--lime, #D8FF45) !important; font-weight: 700 !important; }
.footer-admin svg { flex: 0 0 auto; }
.footer-admin:hover { opacity: .85; }

/* ============================================================
   DESIGN REFINEMENT LAYER — refero-grounded
   Riferimenti: Tesla/Rivian (showroom automotive), TravelPerk (disciplina
   accento + raggio unico), Empower (ritmo dark/light). Caricato per ultimo →
   vince per ordine sorgente. Reversibile: tutto in questo blocco.
   Principi: accento singolo (lime=CTA, blu=brand/testo) · profondità per
   contrasto di valore non ombra · raggio unico 16px · display oversize tracking stretto.
   ============================================================ */

/* card a riposo: niente ombra, bordo hairline = contrasto di valore (Tesla/Rivian/TravelPerk) */
.review-card, .advisor-v2-card, .esplora-card, .story-card, .servizi-card,
.uv-card, .vd-pricecard, .stock-card, .mp-trim, .advisor-card, .promo-card {
  box-shadow: none !important;
  border: 1px solid var(--border);
}
.servizi-card.featured, .bw-tile { border-color: rgba(255,255,255,0.10); }

/* hover: SOLO transform + colore bordo (niente ombra che cresce) */
.review-card:hover, .advisor-v2-card:hover, .esplora-card:hover,
.story-card:hover, .servizi-card:hover, .uv-card:hover, .stock-card:hover {
  box-shadow: none !important;
  transform: translateY(-3px);
  border-color: var(--blue);
}

/* 2) PRICE CARD scheda: da glass/ombra → superficie solida + bordo */
.vd-pricecard {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: none !important;
  border-radius: var(--radius-l);
}

/* 3) RAGGIO UNIFICATO (16px) sulle card principali */
.uv-card, .esplora-card, .servizi-card, .story-card, .review-card,
.advisor-v2-card, .promo-card, .vd-pricecard, .mp-trim, .stock-card,
.advisor-card { border-radius: var(--radius-l); }

/* 4) DISPLAY TYPE — più grande, line-height compresso, tracking negativo (Rivian/TravelPerk) */
.hero-v2 h1, .hero-v2 .hslide-titolo { font-size: clamp(44px, 5.6vw, 84px); line-height: 0.96; letter-spacing: -0.028em; }
.section-title { font-size: clamp(33px, 4.2vw, 50px); line-height: 0.99; letter-spacing: -0.026em; }
.usato-hero h1, .mp-hero h1 { line-height: 0.98; letter-spacing: -0.03em; }
.vd-title h1 { letter-spacing: -0.028em; }

/* 5) BRAND WORLDS — supporto FOTO REALI (le foto stock sostituiscono il blob CSS).
   Quando un tile ha .car-thumb.has-photo, mostra la foto e nascondi le pseudo "sagoma". */
.bw-tile .car-thumb.has-photo {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat;
}
.bw-tile .car-thumb.has-photo::before,
.bw-tile .car-thumb.has-photo::after { content: none !important; display: none !important; }

/* ============================================================
   IMPECCABLE PASS — distintività brand (register: brand)
   Obiettivo: da "competente" a "memorabile". Voce: engineered/confident/energetic.
   ============================================================ */

/* display leggermente più "wide" e scolpito (automotive) */
.hero-v2 h1, .hero-v2 .hslide-titolo, .section-title, .usato-hero h1, .mp-hero h1, .vd-title h1,
.tradein-band h3, .promo-big { font-stretch: 105%; }

/* 2) EYEBROW → sistema di wayfinding NUMERATO (non scaffolding casuale) */
body { counter-reset: sec; }
.section-eyebrow { counter-increment: sec; }
.section-eyebrow::before {
  content: counter(sec, decimal-leading-zero) "\00a0\00a0";
  font-variant-numeric: tabular-nums; font-weight: 800; opacity: 0.5;
}

/* 3) SIGNATURE — banda permuta LIME-DRENCHED (Committed) + display enorme.
   Il register brand permette di "annegare" in un colore: è voce. */
.tradein-band { background: var(--lime) !important; color: var(--ink) !important; border-radius: var(--radius-l); }
@media (min-width: 1025px) {
  .tradein-band-inner { grid-template-columns: 1.1fr 1.4fr; }
}
.tradein-band .section-eyebrow { color: var(--ink) !important; }
.tradein-band h3 {
  color: var(--ink) !important;
  font-size: clamp(40px, 7vw, 88px) !important;
  line-height: 0.9 !important; letter-spacing: -0.04em !important; max-width: 12ch;
}
.tradein-band p { color: rgba(13,15,20,0.70) !important; font-size: 16px; }
/* il form è una card scura leggibile sul lime (Empower: campo accent + card scura) */
.tradein-fields { background: var(--ink); border-radius: var(--radius-l); padding: 20px; }
.tradein-fields label { color: rgba(255,255,255,0.65) !important; }
.tradein-fields input {
  background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.16) !important;
  color: #fff !important;
}
.tradein-fields input::placeholder { color: rgba(255,255,255,0.4); }
.tradein-fields button { background: var(--lime) !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; }
.tradein-extra-link, .tradein-extra-link a { color: rgba(255,255,255,0.7) !important; }
.tradein-extra-link a { text-decoration: underline; }
.tradein-car { display: none !important; } /* via il blob blu: la banda è la firma, niente rumore */

/* 4) HERO-STATS — da glass decorativo → pannello solido (coerenza flat) */
.hero-stats {
  background: rgba(13,15,20,0.72) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* 5) Respiro testo chiaro su scuro (+line-height) */
.uh-sub, .mp-sub, .hero-reassure, .tradein p, .hero-v2-sub, .footer-brand p { line-height: 1.6; }

/* ===== Countdown promo (leva urgenza) ===== */
.promo-countdown { display:inline-flex; align-items:center; gap:6px; margin:10px 0 0; font-size:12px; font-weight:800; color:var(--blue); background:rgba(0,87,217,0.08); border-radius:var(--radius-pill); padding:5px 12px; font-variant-numeric:tabular-nums; }
.promo-card.is-featured .promo-countdown { color:var(--lime); background:rgba(216,255,69,0.12); }
.promo-countdown strong { letter-spacing:0.01em; }
.promo-countdown.is-ended { color:var(--muted); background:rgba(0,0,0,0.05); }
.occ-card .img { background-size:cover; background-position:center; }

/* ============================================================
   BRAND BAND 3D — auto scontornate (PNG) + loghi reali + tilt prospettico
   ============================================================ */
.bw-track { perspective: 1500px; }
.bw-tile {
  position: relative; display: flex; flex-direction: column;
  min-height: 326px; padding: 22px 16px 0; border-radius: var(--radius-l);
  border: 1px solid rgba(255,255,255,0.09);
  background:
    radial-gradient(125% 78% at 50% 122%, var(--bw-glow, rgba(255,255,255,0.10)), transparent 62%),
    linear-gradient(180deg, #181B22 0%, #0E1014 80%);
  overflow: hidden; transform-style: preserve-3d; box-shadow: none !important;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), border-color .35s var(--ease-out);
}
.bw-tile:hover {
  transform: rotateX(6deg) rotateY(-7deg) translateY(-6px);
  border-color: var(--bw-glow, rgba(255,255,255,0.28));
}
.bw-tile .logo {
  height: 34px; line-height: 34px; margin: 0 0 4px; width: 100%; display: block; color: #fff;
  font-family: 'Inter Tight', sans-serif; font-size: 14px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; text-align: center; white-space: nowrap;
  background-position: center; background-repeat: no-repeat; background-size: auto 30px;
  transform: translateZ(30px);
}
.bw-tile .blurb {
  font-size: 11px; color: var(--on-dark-muted); text-align: center; line-height: 1.4;
  margin: 0 6px 6px; min-height: 30px; transform: translateZ(18px);
}
.bw-tile .car-thumb {
  margin-top: auto; width: 120%; margin-left: -10%; height: 162px;
  background-repeat: no-repeat; background-position: center bottom; background-size: contain;
  border-radius: 0; overflow: visible; aspect-ratio: auto;
  transform: translateZ(55px);
  filter: drop-shadow(0 18px 14px rgba(0,0,0,0.55));
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.bw-tile:hover .car-thumb { transform: translateZ(78px) translateY(-4px) scale(1.06); }
.bw-tile .arrow { position: absolute; left: 16px; bottom: 16px; z-index: 4; transform: translateZ(64px); }

/* glow per-brand (dietro l'auto) */
.bw-tile[data-brand="vw"]      { --bw-glow: rgba(45,103,168,0.34); }
.bw-tile[data-brand="cupra"]   { --bw-glow: rgba(196,98,52,0.34); }
.bw-tile[data-brand="skoda"]   { --bw-glow: rgba(74,135,87,0.32); }
.bw-tile[data-brand="seat"]    { --bw-glow: rgba(196,62,57,0.32); }
.bw-tile[data-brand="jaguar"]  { --bw-glow: rgba(78,128,184,0.30); }
.bw-tile[data-brand="lr"]      { --bw-glow: rgba(70,120,82,0.34); }
.bw-tile[data-brand="changan"] { --bw-glow: rgba(42,120,160,0.32); }

/* auto scontornate (PNG trasparenti) */
.bw-tile[data-brand="vw"] .car-thumb    { background-image: url('/assets/cars/vw.png'); }
.bw-tile[data-brand="cupra"] .car-thumb { background-image: url('/assets/cars/cupra.png'); }
.bw-tile[data-brand="skoda"] .car-thumb { background-image: url('/assets/cars/skoda.png'); }
.bw-tile[data-brand="seat"] .car-thumb  { background-image: url('/assets/cars/seat.png'); }
.bw-tile[data-brand="lr"] .car-thumb    { background-image: url('/assets/cars/lr.png'); }
/* rimuovi il vecchio blob CSS sotto le auto scontornate */
.bw-tile[data-brand="vw"] .car-thumb::before, .bw-tile[data-brand="vw"] .car-thumb::after,
.bw-tile[data-brand="cupra"] .car-thumb::before, .bw-tile[data-brand="cupra"] .car-thumb::after,
.bw-tile[data-brand="skoda"] .car-thumb::before, .bw-tile[data-brand="skoda"] .car-thumb::after,
.bw-tile[data-brand="seat"] .car-thumb::before, .bw-tile[data-brand="seat"] .car-thumb::after,
.bw-tile[data-brand="lr"] .car-thumb::before, .bw-tile[data-brand="lr"] .car-thumb::after { content: none !important; display: none !important; }

/* loghi reali (VW group); CUPRA/Jaguar/Land Rover/Changan restano wordmark testo.
   font-size:0 nasconde il testo ma tiene visibile il background SVG */
.bw-tile[data-brand="vw"] .logo    { background-image: url('/assets/logos/vw.svg'); font-size: 0; background-size: auto 34px; }
.bw-tile[data-brand="skoda"] .logo { background-image: url('/assets/logos/skoda.svg'); font-size: 0; background-size: auto 30px; }
.bw-tile[data-brand="seat"] .logo  { background-image: url('/assets/logos/seat.svg'); font-size: 0; background-size: auto 26px; }

@media (prefers-reduced-motion: reduce) { .bw-tile, .bw-tile .car-thumb { transition: none; } .bw-tile:hover { transform: translateY(-4px); } }

/* ============================================================
   BRAND PAGE — template a tema per-brand (hero + gamma nuova + preventivo)
   Variabili --bp-* iniettate per brand; default = brand AutoCity (blu/ink).
   ============================================================ */
.brandpage { --bp-accent:#0057D9; --bp-accent-ink:#ffffff; --bp-bg:#0E1014; --bp-glow:rgba(0,87,217,0.22);
  /* hero immersivo: sale dietro la nav (la barra scura si fonde sul nero, niente banda grigia) */
  margin-top: calc(var(--nav-height) * -1); }

/* HERO */
/* ── L'hero e' sempre fotografia a tutto campo ──
   Dentro l'hero i token dell'inchiostro tornano alla famiglia chiara, tema
   chiaro o scuro che sia: sopra una foto con la maschera scura il testo e'
   bianco, come su lexus.it. Senza questa riga, su un tema chiaro occhiello,
   sottotitolo e bottone fantasma restavano scuri su scuro.
   Le fasce sotto l'hero continuano a usare i token del tema. */
.bp-hero {
  --bp-ink: var(--bp-hero-ink, #fff);
  --bp-ink-rgb: 255,255,255;
  --bp-ink-soft: rgba(255,255,255,.66);
  --bp-line: rgba(255,255,255,.14);
}

.bp-hero { position:relative; background: radial-gradient(72% 92% at 78% 35%, var(--bp-glow), transparent 60%), var(--bp-bg); color:var(--bp-hero-ink,var(--bp-ink,#fff)); overflow:hidden; padding:120px 0 72px; min-height:70vh; min-height:70dvh; display:flex; align-items:center; }
.bp-hero-car { position:absolute; right:-3%; bottom:4%; width:58%; height:78%; background-size:contain; background-position:right bottom; background-repeat:no-repeat; filter:drop-shadow(0 30px 42px rgba(0,0,0,.6)); pointer-events:none; }
/* Sfondo WIDE a tutta larghezza (foto brand): immersivo, testo leggibile sulla sfumatura */
.bp-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; pointer-events:none; }
.bp-hero--wide { padding:132px 0 84px; min-height:80vh; min-height:80dvh; }
/* Hero video full-bleed (CMS: brands.hero_video) */
.bp-hero--video { padding:140px 0 84px; min-height:82vh; min-height:82dvh; }
.bp-hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }
/* Velo 0.5→0 come da regola della piattaforma (vedi .usato-hero). */
.bp-hero-scrim { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.26) 45%, rgba(0,0,0,0) 100%), linear-gradient(0deg, var(--bp-scrim,var(--bp-bg)) 2%, transparent 20%); }
.bp-hero > .container { width:100%; }
.bp-hero-inner { position:relative; z-index:2; max-width:620px; }
.bp-hero .mp-breadcrumb, .bp-hero .mp-breadcrumb a { color:rgba(var(--bp-ink-rgb,255,255,255),0.6); }
.bp-eyebrow { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--bp-accent); }
.bp-hero h1 { font-family:var(--font-display); font-size:clamp(32px,4.8vw,60px); font-weight: var(--h1-weight,900); line-height:1.0; letter-spacing:-0.02em; margin-top:10px; max-width:18ch; }
.bp-sub { color:rgba(var(--bp-ink-rgb,255,255,255),0.72); font-size:17px; line-height:1.6; margin-top:16px; max-width:48ch; }
.bp-cta { margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; }

/* bottoni a tema */
.bp-btn-accent { display:inline-flex; align-items:center; gap:8px; background:var(--bp-accent); color:var(--bp-accent-ink); font-weight:800; padding:13px 22px; border-radius:var(--radius-pill); transition:transform .18s var(--ease-out), filter .2s; }
.bp-btn-accent:hover { transform:translateY(-2px); filter:brightness(1.06); }
.bp-btn-accent.sm { padding:9px 16px; font-size:13px; }
.bp-btn-ghost { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--bp-line,rgba(255,255,255,.14)); color:var(--bp-ink,#fff); font-weight:700; padding:13px 22px; border-radius:var(--radius-pill); }
.bp-btn-ghost:hover { background:var(--bp-line,rgba(255,255,255,.08)); }
.bp-link { color:var(--bp-accent); font-weight:700; font-size:13px; display:inline-flex; align-items:center; gap:6px; }

/* GAMMA NUOVA */
.bp-section { background:var(--bp-bg); color:var(--bp-ink,#fff); padding:64px 0; }
.bp-sec-head { margin-bottom:32px; }
.bp-kicker { font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--bp-accent); }
.bp-sec-head h2, .bp-quote-copy h2 { font-family:var(--font-display); font-size:clamp(28px,3.6vw,44px); font-weight:800; line-height:1.05; margin-top:8px; }
.bp-sec-head p { color:rgba(var(--bp-ink-rgb,255,255,255),0.6); margin-top:8px; max-width:60ch; }
.bp-lineup { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; }
.bp-model { background:rgba(255,255,255,0.045); border:1px solid var(--bp-line,rgba(255,255,255,.14)); border-radius:var(--radius-l); padding:20px; display:flex; flex-direction:column; transition:border-color .3s var(--ease-out), transform .3s var(--ease-out); }
.bp-model:hover { border-color:var(--bp-accent); transform:translateY(-3px); }
/* link steso: copre la card intera; i CTA vivono un piano sopra */
.bp-model { position: relative; }
.bp-model-stretch { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.bp-model-cta { position: relative; z-index: 2; }
.bp-model-img { aspect-ratio:16/10; background-size:contain; background-position:center; background-repeat:no-repeat; margin-bottom:8px; }
.bp-model-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bp-model h3 { font-family:var(--font-display); font-size:20px; font-weight:800; color:var(--bp-ink,#fff); }
.bp-tag-new { background:var(--bp-accent); color:var(--bp-accent-ink); font-size:10px; font-weight:800; text-transform:uppercase; padding:3px 8px; border-radius:var(--radius-pill); letter-spacing:.05em; white-space:nowrap; }
.bp-model-tagline { color:rgba(var(--bp-ink-rgb,255,255,255),0.6); font-size:13px; margin-top:4px; }
.bp-model-fuel { display:inline-block; margin-top:10px; font-size:11px; font-weight:700; color:var(--bp-accent); text-transform:uppercase; letter-spacing:.04em; }
.bp-model-price { font-family:var(--font-display); font-size:22px; font-weight:800; color:var(--bp-ink,#fff); margin-top:6px; }
.bp-model-cta { margin-top:auto; padding-top:14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* PREVENTIVO NUOVO */
.bp-quote { background:var(--bp-bg); color:var(--bp-ink,#fff); padding:56px 0; border-top:1px solid rgba(255,255,255,0.08); }
.bp-quote-inner { display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:center; }
.bp-quote-copy p { color:rgba(var(--bp-ink-rgb,255,255,255),0.66); margin-top:10px; max-width:46ch; line-height:1.6; }
.bp-quote-usp { margin-top:18px; display:flex; flex-direction:column; gap:9px; }
.bp-quote-usp li { color:rgba(var(--bp-ink-rgb,255,255,255),0.78); font-size:14px; padding-left:24px; position:relative; }
.bp-quote-usp li::before { content:'✓'; position:absolute; left:0; color:var(--bp-accent); font-weight:900; }
.bp-quote-form { background:rgba(255,255,255,0.045); border:1px solid var(--bp-line,rgba(255,255,255,.14)); border-radius: var(--radius-l); padding:24px; }
.bp-quote-row { display:grid; gap:12px; }
.bp-quote-form > label, .bp-quote-row > label { display:block; }
.bp-quote-form label > span { font-size:12px; font-weight:600; color:rgba(var(--bp-ink-rgb,255,255,255),0.6); display:block; margin-bottom:5px; }
.bp-quote-form input, .bp-quote-form select { width:100%; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18); border-radius:var(--radius-m); padding:11px 14px; color:var(--bp-ink,#fff); font-size:14px; }
.bp-quote-form input::placeholder { color:rgba(var(--bp-ink-rgb,255,255,255),0.4); }
.bp-quote-form select option { color:#111; }
.bp-quote-check { display:flex !important; align-items:flex-start; gap:8px; margin-top:12px; }
.bp-quote-check span { font-size:12px !important; font-weight:400 !important; color:rgba(var(--bp-ink-rgb,255,255,255),0.7) !important; margin:0 !important; }
.bp-quote-check input { width:auto !important; margin-top:2px; }
.bp-quote-check a { color:var(--bp-accent); text-decoration:underline; }
.bp-quote-form button { margin-top:16px; width:100%; background:var(--bp-accent); color:var(--bp-accent-ink); font-weight:800; padding:13px; border-radius:var(--radius-pill); font-size:15px; cursor:pointer; border:0; transition:filter .2s; }
.bp-quote-form button:hover { filter:brightness(1.06); }
.bp-quote-form button:disabled { opacity:.6; }
.bp-quote-status { margin-top:12px; font-size:14px; font-weight:600; }

@media (max-width:860px){
  .bp-hero { min-height:auto; padding:104px 0 56px; }
  .bp-hero--video { min-height:74vh; min-height:74dvh; padding:120px 0 64px; }
  .bp-hero-car { opacity:.22; width:96%; right:-12%; height:64%; }
  .bp-hero-scrim { background:linear-gradient(0deg, var(--bp-scrim,var(--bp-scrim,var(--bp-bg))) 6%, rgba(0,0,0,.3) 46%, rgba(0,0,0,.1) 100%); }
  .bp-quote-inner { grid-template-columns:1fr; }
}

/* ===== Hero VIDEO + eyebrow (gestiti da CMS hero_media) ===== */
.hero-v2 .hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
@media (max-width:768px){ .hero-v2 .hero-video { display:none; } } /* l'hero vecchio resta con la foto */
.hero-eyebrow { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--lime); margin-bottom:10px; }

/* ===== Immagine promo (CMS) ===== */
.promo-media { height:150px; background-size:cover; background-position:center; border-radius: var(--radius-m); margin-bottom:14px; }

/* ===== Promo: scarsità (quantità limitata) + card speciale ===== */
.promo-scarcity { margin:10px 0 0; font-size:12px; font-weight:800; color:var(--blue); }
.promo-scarcity .ps-row { display:inline-flex; align-items:center; gap:6px; }
.promo-scarcity svg { flex:0 0 auto; }
.promo-scarcity.urgent { color:#c0392b; }
.promo-scarcity.ended { color:var(--muted); }
.promo-card.is-featured .promo-scarcity { color:var(--lime); }
.promo-card.is-featured .promo-scarcity.urgent { color:#ff6b5a; }
.promo-bar { margin-top:6px; height:6px; border-radius:var(--radius-pill); background:rgba(0,0,0,0.08); overflow:hidden; max-width:220px; }
.promo-card.is-featured .promo-bar { background:rgba(255,255,255,0.16); }
.promo-bar span { display:block; height:100%; border-radius:var(--radius-pill); background:currentColor; transition:width .4s var(--ease-out); }
.promo-card.is-speciale { border-color:var(--lime) !important; box-shadow:0 0 0 1px var(--lime) inset; }
.promo-cta.is-disabled { color:var(--muted); cursor:default; opacity:.7; }
.see-all { color:var(--blue); font-weight:700; white-space:nowrap; }
.promo-speciali { background:linear-gradient(180deg, rgba(216,255,69,0.07), transparent 60%); }

/* ── BRAND PAGE: fascia "sito ufficiale" (opzionale, dal CMS) ── */
.bp-official{display:block;background:var(--bp-accent,#0057D9);color:var(--bp-accent-ink,#fff);text-decoration:none;transition:filter .2s ease}
.bp-official:hover{filter:brightness(1.06)}
.bp-official-inner{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;padding-top:18px;padding-bottom:18px}
.bp-official-inner > span:first-child{font-size:15px;line-height:1.5;max-width:62ch;opacity:.95}
.bp-official-inner strong{font-weight:800}
.bp-official-cta{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:800;border-bottom:2px solid currentColor;padding-bottom:2px}
@media(max-width:640px){.bp-official-cta{font-size:14px}}

/* ── FOOTER: muro marchi (logo-wall elegante, ghosted, niente bottoni) ── */
.footer-brands{border-bottom:1px solid rgba(255,255,255,.10);padding-bottom:34px;margin-bottom:38px}
.footer-brands-title{display:block;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:24px}
.footer-brands-row{display:flex;flex-wrap:wrap;align-items:center;gap:26px clamp(32px,4.6vw,60px)}
.fb-chip{display:inline-flex;align-items:center;height:28px;opacity:.5;transition:opacity .3s var(--ease-out)}
.fb-chip:hover{opacity:1}
.fb-chip img{height:100%;width:auto;max-width:124px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}
.fb-chip span{font-weight:500;font-size:16px;letter-spacing:.18em;color:#fff;text-transform:uppercase;white-space:nowrap}
@media(max-width:640px){
  .footer-brands{padding-bottom:26px;margin-bottom:30px}
  .footer-brands-row{gap:22px 32px}
  .fb-chip{height:22px}
  .fb-chip img{max-width:100px}
  .fb-chip span{font-size:14px;letter-spacing:.14em}
}

/* ── BRAND PAGE: sezioni "pagina perfetta" (chips, trust, promo, perché, faq, cta) ── */
/* hero chips */
.bp-hero-chips{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px;padding:0;list-style:none}
.bp-hero-chips li{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:rgba(var(--bp-ink-rgb,255,255,255),.85);background:var(--bp-line,rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.15);padding:7px 14px;border-radius:var(--radius-pill)}
.bp-hero-chips li::before{content:"";width:6px;height:6px;border-radius:var(--radius-circle);background:var(--bp-accent)}

/* trust strip */
.bp-trust{background:var(--bp-bg);border-top:1px solid rgba(255,255,255,.08);padding:18px 0}
.bp-trust-row{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:center}
.bp-trust-item{display:flex;align-items:center;gap:10px;color:rgba(var(--bp-ink-rgb,255,255,255),.82);font-size:14px;font-weight:600}
.bp-trust-item svg{color:var(--bp-accent);flex:none}

/* offerte dedicate (chiaro) */
.bp-promos{background:var(--paper);padding:64px 0}
.bp-promos .bp-sec-head h2{color:var(--ink)}
.bp-promos .bp-sec-head p{color:#5b6573}
.bp-promos .promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}

/* perché autocityBAT (lista numerata editoriale, niente card) */
.bp-why{background:#fff;padding:76px 0}
.bp-why-inner{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(32px,5vw,72px);align-items:start}
.bp-why-head h2{font-family:var(--font-display);font-size:clamp(26px,3.2vw,40px);font-weight:800;line-height:1.05;color:var(--ink);margin-top:8px}
.bp-why-head p{color:#5b6573;font-size:15px;line-height:1.55;margin-top:12px;max-width:34ch}
.bp-why-list{counter-reset:why;list-style:none;display:flex;flex-direction:column}
.bp-why-list li{counter-increment:why;display:grid;grid-template-columns:auto 1fr;gap:20px;padding:22px 0;border-top:1px solid #e7e9ee}
.bp-why-list li:first-child{padding-top:4px;border-top:0}
.bp-why-list li::before{content:counter(why,decimal-leading-zero);font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--bp-accent);line-height:1.3}
.bp-why-list h3{font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--ink)}
.bp-why-list p{color:#5b6573;font-size:14.5px;line-height:1.55;margin-top:4px}
@media(max-width:860px){ .bp-why-inner{grid-template-columns:1fr} }

/* faq */
.bp-faq{background:var(--paper);padding:64px 0}
.bp-faq .bp-sec-head h2{color:var(--ink)}
.bp-faq-list{max-width:840px;display:flex;flex-direction:column;gap:10px}
.bp-faq-item{background:#fff;border:1px solid #e7e9ee;border-radius: var(--radius-m);overflow:hidden}
.bp-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-weight:700;color:var(--ink);font-size:16px}
.bp-faq-item summary::-webkit-details-marker{display:none}
.bp-faq-plus{position:relative;width:16px;height:16px;flex:none}
.bp-faq-plus::before,.bp-faq-plus::after{content:"";position:absolute;background:var(--bp-accent);transition:transform .2s var(--ease-out)}
.bp-faq-plus::before{top:7px;left:0;width:16px;height:2px}
.bp-faq-plus::after{top:0;left:7px;width:2px;height:16px}
.bp-faq-item[open] .bp-faq-plus::after{transform:scaleY(0)}
.bp-faq-item > p{padding:0 20px 18px;color:#5b6573;line-height:1.6;font-size:15px;margin:0}

/* CTA finale */
.bp-final{position:relative;overflow:hidden;background:var(--bp-bg);color:var(--bp-ink,#fff);border-top:1px solid rgba(255,255,255,0.08)}
.bp-final-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(58% 120% at 88% 50%, var(--bp-glow), transparent 62%)}
.bp-final-logo{position:absolute;right:-1.5%;top:50%;transform:translateY(-50%);height:min(72%,260px);width:auto;max-width:44%;object-fit:contain;opacity:.07;filter:brightness(0) invert(1)}
.bp-final-inner{position:relative;z-index:2;padding:clamp(60px,8vw,104px) 0}
.bp-final-copy{max-width:620px}
.bp-final h2{font-family:var(--font-display);font-size:clamp(30px,4.4vw,54px);font-weight:900;line-height:1.02;letter-spacing:-0.02em;margin-top:10px}
.bp-final p{margin-top:14px;color:rgba(var(--bp-ink-rgb,255,255,255),0.72);max-width:48ch;line-height:1.6;font-size:16px}
.bp-final-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.bp-final .bp-btn-accent{background:var(--bp-accent);color:var(--bp-accent-ink)}
.bp-final .bp-btn-ghost{border-color:rgba(var(--bp-ink-rgb,255,255,255),.4);color:var(--bp-ink,#fff)}
.bp-final-trust{margin-top:18px;font-size:13px;color:rgba(var(--bp-ink-rgb,255,255,255),0.5)}
/* Social del marchio, in coda alla fascia di chiusura. Canali, non colore
   pieno: le icone e il testo prendono l'inchiostro del tema, quindi su Lexus
   (fondo chiaro) restano scure invece di sparire. */
.bp-final-social{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px}
.bp-final-social a{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.02em;color:rgba(var(--bp-ink-rgb,255,255,255),0.62);transition:color .2s var(--ease-out)}
.bp-final-social a:hover{color:var(--bp-accent,var(--accent))}
.bp-final-social svg{width:16px;height:16px}
.bp-btn-accent.lg,.bp-btn-ghost.lg{padding:15px 26px;font-size:15.5px}
.bp-final .bp-btn-accent svg,.bp-final .bp-btn-ghost svg{transition:transform .2s var(--ease-out)}
.bp-final .bp-btn-accent:hover svg{transform:translateX(5px)}
@media(max-width:760px){ .bp-trust-row{justify-content:flex-start} .bp-final-inner{padding:56px 0} }
@media(max-width:600px){ .bp-final-logo{opacity:.045;max-width:62%} }

/* ── BRAND PAGE: rifiniture design-taste (feedback tattile + reduced-motion) ── */
/* pressione fisica sui CTA (oltre all'hover) */
.bp-btn-accent:active, .bp-btn-ghost:active, .bp-final .bp-btn-accent:active { transform: translateY(0) scale(.985); }
.bp-model:active { transform: translateY(-1px); }
/* rispetta chi preferisce meno movimento: niente translate/transizioni sui bp-* */
@media (prefers-reduced-motion: reduce) {
  .bp-btn-accent, .bp-btn-ghost, .bp-model, .bp-why-card, .fb-chip, .fb-chip img,
  .bp-official, .bp-model-img { transition: none !important; }
  .bp-btn-accent:hover, .bp-btn-ghost:hover, .bp-model:hover, .bp-official:hover { transform: none !important; }
}

/* ── BRAND BAND v2: logo grande dal CMS + auto che "esce" dalla card (cut a destra) ── */
.bw-tile .bw-logo-wrap{ height:50px; display:flex; align-items:center; justify-content:center; margin:0 0 2px; transform:translateZ(36px); }
.bw-tile .bw-logo{ height:100%; width:auto; max-width:84%; object-fit:contain; filter:brightness(0) invert(1); }
.bw-tile .bw-logo-txt{ font-family:'Inter Tight',sans-serif; font-size:20px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; }
/* auto grande, ancorata a sinistra → lato destro tagliato dal bordo card (overflow:hidden) */
.bw-tile .car-thumb{ width:100%; margin-left:0; height:216px; background-size:168% auto; background-position:24% 100%; transform:translateZ(60px); filter:drop-shadow(0 24px 20px rgba(0,0,0,0.6)); }
.bw-tile:hover .car-thumb{ transform:translateZ(84px) translateY(-4px) scale(1.04); }
.bw-tile .car-thumb.is-empty{ display:none; }
@media(prefers-reduced-motion:reduce){ .bw-tile:hover .car-thumb{ transform:translateZ(60px) !important; } }

/* ── BRAND BAND v3: CARD A IMMAGINE PIENA (foto completa + logo overlay + scrim) ── */
.bw-tile{ padding:0 !important; background:#0E1014 !important; min-height:380px; display:block; }
.bw-card-img{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transition:transform .65s cubic-bezier(.2,.7,.2,1); }
.bw-tile:hover .bw-card-img{ transform:scale(1.07); }
.bw-card-img.is-fallback{ background:
   radial-gradient(120% 80% at 50% 6%, rgba(255,255,255,.10), transparent 60%),
   linear-gradient(158deg, var(--bw-tile-color, #2A3340) 0%, #0C0E12 80%); }
.bw-card-scrim{ position:absolute; inset:0; z-index:1; background:
   linear-gradient(180deg, rgba(8,10,14,.58) 0%, rgba(8,10,14,.04) 24%, rgba(8,10,14,.10) 50%, rgba(8,10,14,.90) 100%); }
.bw-card-content{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; padding:24px 20px; transform-style:preserve-3d; }
.bw-card-logo{ height:46px; display:flex; align-items:center; transform:translateZ(42px); }
.bw-card-logo .bw-logo{ height:100%; max-height:44px; width:auto; max-width:80%; object-fit:contain; object-position:left center; filter:brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.bw-card-logo .bw-logo-txt{ font-family:'Inter Tight',sans-serif; font-size:21px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5); }
.bw-card-foot{ margin-top:auto; transform:translateZ(28px); }
.bw-tile .blurb{ color:rgba(255,255,255,.94); text-align:left; font-size:15px; line-height:1.3; margin:0 0 12px; min-height:0; font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,.55); }
.bw-card-cta{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.08em; color:#fff; text-transform:uppercase; }
.bw-card-cta svg{ transition:transform .3s var(--ease-out); }
.bw-tile:hover .bw-card-cta svg{ transform:translateX(5px); }
@media(prefers-reduced-motion:reduce){ .bw-tile:hover .bw-card-img{ transform:none; } }

/* sotto-dicitura accanto al logo (VW Veicoli Commerciali) */
.bw-card-logo{ gap:11px; }
.bw-logo-sub{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:12px; line-height:1.12; letter-spacing:.02em; text-transform:uppercase; color:rgba(255,255,255,.92); max-width:96px; text-align:left; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.bw-card-logo{ justify-content:flex-start; }

/* ── ADVISOR Fase 1: risultati reali + cattura lead ── */
.advisor-results { display:flex; flex-direction:column; gap:8px; margin:4px 0 14px; }
.advisor-res { display:flex; align-items:center; gap:12px; padding:8px; border:1px solid var(--border); border-radius: var(--radius-m); background:var(--white); transition:border-color .2s var(--ease-out), transform .2s var(--ease-out); }
.advisor-res:hover { border-color:var(--blue); transform:translateY(-1px); }
.advisor-res-img { width:66px; height:48px; border-radius: var(--radius-s); background:#eef0f3 center/cover no-repeat; flex:none; }
.advisor-res-body { flex:1; min-width:0; }
.advisor-res-title { font-weight:800; color:var(--navy); font-size:14px; letter-spacing:-.01em; }
.advisor-res-meta { font-size:11px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.advisor-res-price { font-size:12px; color:var(--ink); font-weight:600; margin-top:3px; }
.advisor-res-match { background:var(--lime); color:var(--ink); font-weight:800; font-size:13px; padding:4px 9px; border-radius:var(--radius-m); flex:none; font-variant-numeric:tabular-nums; }
.advisor-res.is-skel { height:64px; border:0; background:linear-gradient(90deg,#eef0f3,#f6f7f9,#eef0f3); background-size:200% 100%; animation:adv-shimmer 1.2s infinite linear; }
@keyframes adv-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.advisor-lead { margin-top:auto; padding-top:14px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.advisor-lead-t { font-weight:700; color:var(--navy); font-size:14px; }
.advisor-lead-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.advisor-lead input:not([type=checkbox]) { width:100%; border:1px solid var(--border); border-radius:var(--radius-m); padding:10px 12px; font-size:14px; background:var(--white); color:var(--ink); }
.advisor-lead input:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }
.advisor-lead-priv { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--muted); }
.advisor-lead button { background:var(--navy); color:#fff; border:0; border-radius:var(--radius-pill); padding:11px 16px; font-weight:700; font-size:14px; cursor:pointer; transition:filter .2s; }
.advisor-lead button:hover { filter:brightness(1.1); }
.advisor-lead button:disabled { opacity:.6; cursor:default; }
.advisor-lead-msg { font-size:12px; }
.advisor-lead-msg.err { color:#c0392b; font-weight:600; }
.advisor-lead-ok { background:rgba(20,150,90,.10); color:#178a4f; border-radius:var(--radius-m); padding:12px 14px; font-size:13px; font-weight:600; }
@media(max-width:640px){ .advisor-lead-row{ grid-template-columns:1fr; } }
.advisor-disclaimer { font-size:10.5px; line-height:1.45; color:var(--muted); margin:6px 0 0; }
.advisor-disclaimer a, .advisor-lead-priv a { color:var(--blue); text-decoration:underline; }

/* Advisor: card "perché conviene" (rassicurazione, sostituisce la preview ridondante) */
.advisor-why { background:linear-gradient(180deg, #0E1116 0%, #161A22 100%); border-color:rgba(255,255,255,.08); color:#fff; }
.advisor-why .eyebrow-sky { color:var(--lime); }
.advisor-why-list { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.advisor-why-list li { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; }
.advisor-why-list svg { color:var(--lime); margin-top:1px; flex:none; }
.advisor-why-list strong { display:block; color:#fff; font-size:14px; font-weight:700; }
.advisor-why-list span { display:block; color:rgba(255,255,255,.6); font-size:12.5px; line-height:1.45; margin-top:2px; }
.advisor-why-stat { margin-top:auto; padding-top:16px; font-size:12px; color:rgba(255,255,255,.55); border-top:1px solid rgba(255,255,255,.08); }

/* ── PAGINE LEGALI (privacy / cookie / note legali) ── */
.legal { background:var(--paper); padding:calc(var(--nav-height) + 40px) 0 80px; }
.legal-inner { max-width:760px; }
.legal-inner .mp-breadcrumb { margin-bottom:14px; }
.legal h1 { font-family:var(--font-display); font-size:clamp(30px,4vw,46px); font-weight: var(--h1-weight,900); letter-spacing:-.02em; line-height:1.05; color:var(--ink); }
.legal-lede { color:#5b6573; font-size:16px; line-height:1.6; margin-top:12px; max-width:64ch; }
.legal h2 { font-family:var(--font-display); font-size:20px; font-weight:800; color:var(--ink); margin:30px 0 8px; }
.legal p { color:#3c434d; font-size:15px; line-height:1.7; margin-top:8px; }
.legal ul { margin:8px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.legal li { color:#3c434d; font-size:15px; line-height:1.6; padding-left:20px; position:relative; }
.legal li::before { content:""; position:absolute; left:4px; top:9px; width:6px; height:6px; border-radius:var(--radius-circle); background:var(--blue); }
.legal a { color:var(--blue); text-decoration:underline; }
.legal strong { color:var(--ink); font-weight:700; }
.legal-updated { margin-top:34px; font-size:12px; color:#8a93a0; border-top:1px solid var(--border); padding-top:16px; }
.advisor-res-new { display:inline-block; background:var(--blue); color:#fff; font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:2px 6px; border-radius:var(--radius-s); vertical-align:middle; margin-left:6px; }

/* Advisor: risultati GRANDI nella card di destra + form a sinistra (anti-leak conversione) */
.advisor-side-t { font-family:'Inter Tight',sans-serif; font-weight:800; font-size:15px; color:#fff; margin:0 0 12px; }
.advisor-side-list { display:flex; flex-direction:column; gap:10px; }
.advisor-side-hint { font-size:12px; color:rgba(255,255,255,.55); margin-top:12px; line-height:1.5; }
.advisor-res.lg { padding:10px; gap:14px; }
.advisor-res.lg .advisor-res-img { width:96px; height:64px; }
.advisor-res.lg .advisor-res-title { font-size:15px; }
.advisor-res.lg .advisor-res-meta { font-size:12px; }
.advisor-res.lg .advisor-res-price { font-size:13px; margin-top:4px; }
.advisor-res.lg .advisor-res-match { font-size:14px; padding:5px 11px; }
.advisor-res.lg.is-skel { height:88px; }

/* ── ESPLORA PER ESIGENZA v2: scorciatoie filtrate (foto reale + conteggio) ── */
.esplora-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-auto-rows: 250px; }
.esplora-card[data-cat] { grid-column: auto; }            /* annulla i vecchi span-2 */
.esplora-body p { font-size: 12.5px; color: var(--blue); font-weight: 700; margin-top: 2px; }
.esplora-card .esplora-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13,15,20,.28)); }
/* chip "filtro attivo" sulla /usato */
.usato-filter-chip { display:inline-flex; align-items:center; gap:8px; margin-top:14px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; font-weight:700; font-size:13px; padding:7px 14px; border-radius:var(--radius-pill); transition:background .2s; }
.usato-filter-chip:hover { background:rgba(255,255,255,.24); }

/* ─────────────── SHOWROOM (selezione + filtri carrozzeria) ─────────────── */
.showroom-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;text-align:left;margin-bottom:var(--space-4)}
.showroom-head-copy{max-width:62ch}
.showroom-seeall{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;color:var(--blue,#0057D9);white-space:nowrap}
.showroom-seeall svg{transition:transform .2s}
.showroom-seeall:hover svg{transform:translateX(3px)}

.show-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.show-chip{appearance:none;cursor:pointer;border:1px solid var(--line,#e6e8ec);background:#fff;color:var(--ink,#0D0F14);font:inherit;font-weight:600;font-size:13.5px;line-height:1;padding:10px 16px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:8px;transition:border-color .18s,background .18s,color .18s}
.show-chip span{font-size:11.5px;font-weight:700;color:var(--muted,#6b7280);background:var(--paper,#f5f6f8);padding:2px 8px;border-radius:var(--radius-pill);transition:background .18s,color .18s}
.show-chip:hover{border-color:var(--ink,#0D0F14)}
.show-chip.active{background:var(--ink,#0D0F14);color:#fff;border-color:var(--ink,#0D0F14)}
.show-chip.active span{background:rgba(255,255,255,.16);color:#fff}

.show-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:22px}
.show-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#eceef1);border-radius: var(--radius-l);overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.show-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(13,15,20,.28)}
.show-card-media{position:relative;aspect-ratio:4/3;background:#f1f2f4;overflow:hidden}
.show-card-media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .45s ease}
.show-card:hover .show-card-media img{transform:scale(1.045)}
.show-card-badge{position:absolute;top:12px;left:12px;background:rgba(13,15,20,.84);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;padding:5px 11px;border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.show-card-badge.is-deal{background:var(--lime,#D8FF45);color:var(--ink,#0D0F14)}
.show-card-body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:3px;flex:1}
.show-card-seg{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--blue,#0057D9)}
.show-card-body h3{font-size:16.5px;font-weight:700;line-height:1.18;margin:2px 0 0}
.show-card-ver{font-size:12.5px;color:var(--muted,#6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.show-card-meta{font-size:12.5px;color:var(--muted,#6b7280);margin-top:1px}
.show-card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:13px}
.show-card-price{display:flex;flex-direction:column;line-height:1.12}
.show-card-price .was{font-size:11.5px;color:var(--muted,#6b7280);text-decoration:line-through}
.show-card-price strong{font-size:19px;font-weight:800;letter-spacing:-.01em}
.show-card-price .rata{font-size:11.5px;color:var(--muted,#6b7280);margin-top:2px}
.show-card-go{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--blue,#0057D9);white-space:nowrap}
.show-card-go svg{transition:transform .2s}
.show-card:hover .show-card-go svg{transform:translateX(3px)}

/* TCO standalone (calcolatore costo reale) */
.tco-section{background:var(--paper,#f5f6f8)}
.tco-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:38px;align-items:center;max-width:1000px;margin:0 auto}
.tco-wrap .tco-intro{text-align:left}
.tco-wrap .tco-card{margin:0;background:#fff}

@media(max-width:860px){.tco-wrap{grid-template-columns:1fr;gap:22px}}
@media(max-width:560px){
  /* niente 2 colonne: la base e' auto-fill minmax(272px), che su un telefono
     da' gia' una colonna sola. Forzandone due le card scendevano a 157px, con
     versione e prezzo troncati. */
  .show-grid{gap:13px}
  .show-card-body{padding:12px 12px 14px}
  .showroom-head{margin-bottom:18px}
}

/* ─────────── SHOWROOM · design pass (premium polish) ─────────── */
/* CTA header come ghost-pill, bilancia l'H2 */
.showroom-seeall{padding:9px 16px;border:1px solid var(--line,#e0e3e8);border-radius:var(--radius-pill);transition:border-color .2s,background .2s,color .2s}
.showroom-seeall:hover{border-color:var(--blue,#0057D9);background:rgba(0,87,217,.05)}

/* filter rail: scroll orizzontale fluido su mobile invece del wrap goffo */
@media(max-width:640px){
  .show-filter{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-4px;padding:2px 4px}
  .show-filter::-webkit-scrollbar{display:none}
  .show-chip{flex:0 0 auto;min-height:44px}
}

/* card: profondità anche a riposo, ombra tinta-ink in hover */
.show-card{box-shadow:0 1px 2px rgba(13,15,20,.04),0 8px 18px -14px rgba(13,15,20,.15)}
.show-card:hover{box-shadow:0 22px 46px -20px rgba(13,15,20,.34)}

/* seg-label: underline blu che cresce in hover (micro-dettaglio direzionale) */
.show-card-seg{position:relative;display:inline-block;width:fit-content;padding-bottom:3px}
.show-card-seg::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--blue,#0057D9);transition:width .3s cubic-bezier(.16,1,.3,1)}
.show-card:hover .show-card-seg::after{width:100%}

/* prezzo col carattere display del brand (Inter Tight) */
.show-card-price strong{font-family:var(--font-display);letter-spacing:-.015em}

/* footer: prezzo a sx, bottone tondo a dx (pattern e-commerce pulito) */
.show-card-go{width:38px;height:38px;flex:0 0 auto;border-radius:var(--radius-circle);border:1px solid var(--line,#dfe2e7);display:inline-flex;align-items:center;justify-content:center;color:var(--ink,#0D0F14);transition:background .22s,color .22s,border-color .22s}
.show-card-go svg{width:15px;height:15px;transition:transform .22s}
.show-card:hover .show-card-go{background:var(--ink,#0D0F14);border-color:var(--ink,#0D0F14);color:#fff}
.show-card:hover .show-card-go svg{transform:translateX(2px)}

/* ─────────── SHOWROOM · bento (card "in evidenza" 2x2) ─────────── */
.show-card-feat{display:none;position:absolute;top:12px;right:12px;align-items:center;gap:6px;background:var(--lime,#D8FF45);color:var(--ink,#0D0F14);font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:5px 11px;border-radius:var(--radius-pill);box-shadow:0 4px 12px -4px rgba(13,15,20,.3)}

@media(min-width:961px){
  /* griglia bento solo nel default ("Tutte"); filtrata = griglia uniforme */
  .show-grid:not(.is-filtered){grid-template-columns:repeat(4,1fr);grid-auto-rows:316px;grid-auto-flow:dense}
  .show-grid:not(.is-filtered) .show-card{height:100%}
  .show-grid:not(.is-filtered) .show-card .show-card-media{aspect-ratio:auto;flex:1 1 auto;min-height:0}
  /* card 0 = hero 2x2 */
  .show-grid:not(.is-filtered) .show-card:first-child{grid-column:span 2;grid-row:span 2}
  .show-grid:not(.is-filtered) .show-card:first-child .show-card-feat{display:inline-flex}
}
@media (max-width: 960px) {
  /* anche su mobile: e' la vetrina scelta dal venditore, deve vedersi */
  .show-grid:not(.is-filtered) .show-card:first-child .show-card-feat{display:inline-flex}
  .show-grid:not(.is-filtered) .show-card:first-child .show-card-body{padding:20px 26px 24px;gap:4px}
  .show-grid:not(.is-filtered) .show-card:first-child .show-card-seg{font-size:11.5px}
  .show-grid:not(.is-filtered) .show-card:first-child h3{font-size:26px;line-height:1.1;letter-spacing:-.01em}
  .show-grid:not(.is-filtered) .show-card:first-child .show-card-ver{font-size:14px}
  .show-grid:not(.is-filtered) .show-card:first-child .show-card-meta{font-size:14px}
  .show-grid:not(.is-filtered) .show-card:first-child .show-card-foot{padding-top:16px}
  .show-grid:not(.is-filtered) .show-card:first-child .show-card-price strong{font-size:28px}
  .show-grid:not(.is-filtered) .show-card:first-child .show-card-price .rata{font-size:13px}
  .show-grid:not(.is-filtered) .show-card:first-child .show-card-go{width:46px;height:46px}
  .show-grid:not(.is-filtered) .show-card:first-child .show-card-go svg{width:18px;height:18px}
}

/* badge "Nuovo" nel Showroom (blu brand) */
.show-card-badge.is-new{background:var(--blue,#0057D9);color:#fff}

/* ═══════════════════ CHI SIAMO (about) ═══════════════════ */
.about-intro{text-align:center}
.about-intro .section-eyebrow{justify-content:center}
.about-intro h2.section-title{max-width:20ch;margin:6px auto 0}
.about-intro p{max-width:62ch;margin:18px auto 0;color:var(--muted,#6b7280);font-size:16px;line-height:1.7}

/* timeline */
.about-story{background:var(--paper,#f5f6f8)}
.timeline{position:relative;max-width:780px;margin:0 auto}
.tl-item{position:relative;padding:0 0 30px 96px;min-height:46px}
.tl-item::after{content:"";position:absolute;left:64px;top:11px;bottom:-9px;width:2px;background:var(--line,#e3e6ea)}
.tl-item:last-child{padding-bottom:0}
.tl-item:last-child::after{display:none}
.tl-year{position:absolute;left:0;top:1px;width:50px;text-align:right;font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--blue,#0057D9);letter-spacing:-.02em}
.tl-dot{position:absolute;left:58px;top:6px;width:14px;height:14px;border-radius:var(--radius-circle);background:var(--blue,#0057D9);box-shadow:0 0 0 4px rgba(0,87,217,.12);z-index:1}
.tl-body h3{font-size:18px;font-weight:700;line-height:1.2;margin:0}
.tl-body p{margin:5px 0 0;color:var(--muted,#6b7280);font-size:14.5px;line-height:1.6;max-width:58ch}

/* mission & vision */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mv-card{background:var(--ink,#0D0F14);color:#fff;border-radius: var(--radius-l);padding:30px 30px 32px}
.mv-card:last-child{background:var(--blue,#0057D9)}
.mv-tag{display:inline-block;font-family:var(--font-display);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--lime,#D8FF45);margin-bottom:12px}
.mv-card p{margin:0;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.9)}

/* valori */
.values-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:18px}
.value-card{background:#fff;border:1px solid var(--line,#eceef1);border-radius:var(--radius-l);padding:22px;transition:transform .2s,box-shadow .2s}
.value-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(13,15,20,.25)}
.value-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius: var(--radius-m);background:rgba(0,87,217,.08);color:var(--blue,#0057D9);margin-bottom:14px}
.value-card h3{font-size:16px;font-weight:700;margin:0}
.value-card p{margin:6px 0 0;color:var(--muted,#6b7280);font-size:13.5px;line-height:1.6}

/* numeri */
.about-stats-sec{background:var(--paper,#f5f6f8)}
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.about-stat strong{display:block;font-family:var(--font-display);font-weight:800;font-size:40px;line-height:1;color:var(--ink,#0D0F14);letter-spacing:-.02em}
.about-stat span{display:block;margin-top:8px;font-size:13px;color:var(--muted,#6b7280)}

/* cta finale (scura, bottoni lime/outline-light risaltano) */
.about-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;background:var(--ink,#0D0F14);border-radius: var(--radius-xl);padding:40px 44px}
.about-cta h2{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:0;color:#fff}
.about-cta p{margin:8px 0 0;color:rgba(255,255,255,.72);font-size:15px;line-height:1.6;max-width:48ch}
.about-cta-actions{display:flex;gap:12px;flex-wrap:wrap}

@media(max-width:720px){
  .mv-grid{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr 1fr;gap:26px 16px}
  .about-stat strong{font-size:32px}
  .about-cta{padding:28px 24px}
  .about-cta h2{font-size:22px}
  .tl-item{padding-left:80px}
  .tl-year{width:44px;font-size:16px}
  .tl-item::after{left:56px}
  .tl-dot{left:50px}
}

/* ═══════════════════ BLOG / MAGAZINE ═══════════════════ */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#eceef1);border-radius: var(--radius-l);overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;box-shadow:0 1px 2px rgba(13,15,20,.04),0 8px 18px -14px rgba(13,15,20,.15)}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 22px 46px -20px rgba(13,15,20,.32)}
.blog-card-img{position:relative;aspect-ratio:16/10;background:var(--paper,#f1f2f4);background-size:cover;background-position:center}
.blog-card-cat{position:absolute;top:12px;left:12px;background:rgba(13,15,20,.86);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:5px 11px;border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.blog-card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.blog-card-date{font-size:12px;font-weight:700;color:var(--blue,#0057D9)}
.blog-card-body h2,.blog-card-body h3{font-size:18px;font-weight:700;line-height:1.25;margin:0;letter-spacing:-.01em}
.blog-card-body p{font-size:13.5px;color:var(--muted,#6b7280);line-height:1.55;margin:0}
.blog-card .read{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--blue,#0057D9)}
.blog-card .read svg{transition:transform .2s}
.blog-card:hover .read svg{transform:translateX(3px)}

/* articolo singolo */
.art-hero{position:relative;background:var(--ink,#0D0F14);color:#fff;min-height:clamp(400px,56vh,600px);display:flex;flex-direction:column;justify-content:flex-end;padding:118px 0 42px;overflow:hidden}
.art-hero-photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:1}
/* scura in alto (menu) e in basso (titolo), trasparente al centro: la foto si vede davvero */
.art-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,18,.72) 0%,rgba(11,13,18,.26) 24%,rgba(11,13,18,.20) 50%,rgba(11,13,18,.88) 100%)}
.art-hero .container{position:relative;z-index:1}
.art-hero .mp-breadcrumb,.art-hero .mp-breadcrumb a{color:rgba(255,255,255,.72)}
.art-cat{display:inline-block;background:var(--lime,#D8FF45);color:var(--ink,#0D0F14);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:5px 12px;border-radius:var(--radius-pill);margin-bottom:14px}
.art-hero h1{font-family:var(--font-display);font-size:clamp(28px,4vw,42px);font-weight: var(--h1-weight,800);line-height:1.1;letter-spacing:-.02em;max-width:22ch;margin:0}
.art-meta{margin-top:14px;font-size:13.5px;color:rgba(255,255,255,.72)}

.art-wrap{max-width:720px}
.art-body{font-size:17px;line-height:1.75;color:#22262e;margin-top:8px}
.art-body h2{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.01em;margin:34px 0 10px;color:var(--ink,#0D0F14)}
.art-body h3{font-size:19px;font-weight:700;margin:26px 0 8px;color:var(--ink,#0D0F14)}
.art-body p{margin:0 0 18px;max-width:68ch}
.art-body ul{margin:0 0 18px;padding-left:22px}
.art-body li{margin:0 0 8px}
.art-body strong{font-weight:700;color:var(--ink,#0D0F14)}

.art-cta{position:relative;overflow:hidden;margin:42px 0 8px;background:var(--ink,#0D0F14);color:#fff;border:1px solid rgba(255,255,255,.08);border-radius: var(--radius-xl);padding:clamp(30px,4vw,44px) clamp(26px,4vw,44px)}
.art-cta::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 150% at 90% 25%, rgba(216,255,69,.14), transparent 62%)}
.art-cta > *{position:relative;z-index:1}
.art-cta h2{font-family:var(--font-display);font-size:clamp(22px,2.6vw,30px);font-weight:900;letter-spacing:-.01em;margin:0;color:#fff}
.art-cta p{margin:10px 0 18px;color:rgba(255,255,255,.78);font-size:15px;line-height:1.6;max-width:54ch}
.art-cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.art-back{display:inline-block;margin:26px 0 6px;font-weight:700;font-size:14px;color:var(--blue,#0057D9)}
.art-related{border-top:1px solid var(--line,#eceef1);margin-top:34px}
@media(max-width:560px){ .art-hero{padding:104px 0 34px} .art-cta{padding:26px 22px} }

/* ═══════════════════ LAVORA CON NOI ═══════════════════ */
.careers-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:38px;align-items:start;max-width:1000px;margin:0 auto}
.careers-intro{text-align:left}
.careers-aree{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.careers-aree li{background:#fff;border:1px solid var(--line,#e6e8ec);border-radius:var(--radius-pill);padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--ink,#0D0F14)}
.careers-card{background:#fff;border:1px solid var(--line,#e6e8ec);border-radius: var(--radius-l);padding:26px;box-shadow:0 8px 24px -16px rgba(13,15,20,.2)}
.careers-form{display:flex;flex-direction:column;gap:14px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.careers-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--muted,#6b7280)}
.careers-form label > span{text-transform:uppercase;letter-spacing:.03em;font-size:11px}
.careers-form input,.careers-form select,.careers-form textarea{font:inherit;font-size:14px;color:var(--ink,#0D0F14);border:1px solid var(--line,#e6e8ec);border-radius:var(--radius-m);padding:10px 12px;outline:none;transition:border-color .2s;background:#fff}
.careers-form input:focus,.careers-form select:focus,.careers-form textarea:focus{border-color:var(--blue,#0057D9)}
.cf-consent{flex-direction:row !important;align-items:flex-start;gap:9px;font-weight:500}
.cf-consent span{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500;color:var(--muted,#6b7280)}
.cf-consent a{color:var(--blue,#0057D9);font-weight:600}
.cf-hint{font-size:12.5px;color:var(--muted,#6b7280);margin:0}
.cf-hint a{color:var(--blue,#0057D9);font-weight:600}
.cf-err{font-size:13px;font-weight:600;color:#d11;margin:0}
.careers-form button{margin-top:4px;background:var(--blue,#0057D9);color:#fff;font-weight:700;font-size:14.5px;border:none;border-radius:var(--radius-pill);padding:13px 22px;cursor:pointer;transition:opacity .2s}
.careers-form button:disabled{opacity:.6}
.careers-ok{background:rgba(0,87,217,.06);border:1px solid rgba(0,87,217,.2);border-radius:var(--radius-l);padding:24px;font-size:15px;font-weight:600;color:var(--ink,#0D0F14);line-height:1.6}
@media(max-width:820px){ .careers-wrap{grid-template-columns:1fr;gap:24px} .cf-row{grid-template-columns:1fr} }

/* ═══════════════════ FINANZIAMENTO (esempio rappresentativo) ═══════════════════ */
.fin-section{background:var(--paper,#f5f6f8)}
.fin-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:38px;align-items:start;max-width:1000px;margin:0 auto}
.fin-intro{text-align:left}
.fin-card{margin:0;background:#fff;padding:24px}
.fin-sim{border-bottom:1px solid var(--line,#eceef1);padding-bottom:18px;margin-bottom:16px}
.fin-veicolo{font-size:13px;color:var(--muted,#6b7280);margin:0 0 12px}
.fin-veicolo strong{color:var(--ink,#0D0F14)}
.fin-sim-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fin-dur{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#6b7280)}
.fin-dur select{font:inherit;font-size:14px;font-weight:600;color:var(--ink,#0D0F14);border:1px solid var(--line,#e6e8ec);border-radius:var(--radius-m);padding:9px 12px;background:#fff}
.fin-rata{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.fin-rata-lbl{font-size:12px;color:var(--muted,#6b7280)}
.fin-rata strong{font-family:var(--font-display);font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--ink,#0D0F14);line-height:1}
.fin-rata-mese{font-size:13px;color:var(--muted,#6b7280)}
.fin-sim-note{font-size:11.5px;color:var(--muted,#6b7280);margin:10px 0 0}
.fin-table{display:flex;flex-direction:column}
.fin-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--line,#f0f1f3)}
.fin-row > span:first-child{color:var(--muted,#6b7280)}
.fin-row > span:last-child{font-weight:600;color:var(--ink,#0D0F14);text-align:right}
.fin-row-tot{border-bottom:none;margin-top:4px;padding-top:12px;border-top:2px solid var(--ink,#0D0F14)}
.fin-row-tot > span{font-weight:800 !important;font-size:15px}
.fin-cta{margin-top:18px;width:100%;justify-content:center}
.fin-partner{font-size:12px;color:var(--muted,#6b7280);margin:12px 0 0;text-align:center}
/* Era #9aa0a8 sul bianco: 2,64:1, il contrasto peggiore del foglio — e
   proprio sull'esempio rappresentativo del finanziamento, cioe' il testo
   che per legge deve potersi leggere. Alzato anche il corpo da 10,5 a 12. */
.fin-disclaimer{font-size:12px;line-height:1.55;color:var(--muted);margin:12px 0 0;max-width:74ch}
@media(max-width:860px){ .fin-wrap{grid-template-columns:1fr;gap:22px} }

/* ═══════════════════ PAGINA PRONTA CONSEGNA · redesign ═══════════════════ */
.usato-hero-split .usato-hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.usato-hero-copy{min-width:0}
.usato-hero-help{display:inline-block;margin-top:14px;color:var(--lime,#D8FF45);font-weight:700;font-size:13.5px}
.usato-hero-help:hover{text-decoration:underline}

/* card vettura in evidenza (chiara su hero scuro) */
.usato-hero-card{display:flex;flex-direction:column;background:#fff;border-radius: var(--radius-l);overflow:hidden;text-decoration:none;color:var(--ink,#0D0F14);box-shadow:0 30px 60px -24px rgba(0,0,0,.55);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.usato-hero-card:hover{transform:translateY(-4px)}
.uhc-media{position:relative;aspect-ratio:16/10;background:#f1f2f4;background-size:cover;background-position:center}
.uhc-badge{position:absolute;top:12px;left:12px;background:rgba(13,15,20,.86);color:#fff;font-size:11px;font-weight:700;padding:5px 11px;border-radius:var(--radius-pill)}
.uhc-badge.is-deal{background:var(--lime,#D8FF45);color:var(--ink,#0D0F14)}
.uhc-badge.is-new{background:var(--blue,#0057D9);color:#fff}
.uhc-flag{position:absolute;top:12px;right:12px;background:#fff;color:var(--blue,#0057D9);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:5px 10px;border-radius:var(--radius-pill)}
.uhc-body{padding:18px 20px 20px}
.uhc-brand{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--blue,#0057D9)}
.uhc-body h3{font-size:22px;font-weight:800;line-height:1.1;margin:3px 0 0;letter-spacing:-.01em}
.uhc-ver{font-size:13px;color:var(--muted,#6b7280);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uhc-meta{font-size:12.5px;color:var(--muted,#6b7280);margin:8px 0 0}
.uhc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line,#eceef1)}
.uhc-price{display:flex;flex-direction:column;line-height:1.1}
.uhc-price strong{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.01em}
.uhc-price span{font-size:11.5px;color:var(--muted,#6b7280);margin-top:2px}
.uhc-go{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:700;color:var(--blue,#0057D9);white-space:nowrap}

/* toolbar ricerca + filtri */
.uv-browse{padding-top:var(--space-5)}

/* ── filtri rapidi sopra la griglia: marche coi loghi + condizione ──
   Righe a scorrimento orizzontale su mobile (niente wrap che mangia lo
   schermo); il logo diventa bianco sul chip acceso col filtro invert. */
.uv-quick { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.uvq-row { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; scroll-snap-type: x proximity;
  /* i bordi sfumano: il chip che esce non sembra tagliato, sembra continuare */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 30px), transparent); }
.uvq-row::-webkit-scrollbar { display: none; }
.uvq-chip { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink, #0D0F14); background: #fff; border: 1px solid var(--line, #e6e8ec); border-radius: var(--radius-pill); padding: 8px 14px; min-height: 44px; scroll-snap-align: start; cursor: pointer; transition: border-color .18s, background .18s, color .18s; }
/* i loghi del tenant sono pensati per il footer scuro (bianchi) o colorati:
   il filtro li porta tutti a monocromo — inchiostro sul chip chiaro, bianco
   su quello acceso — così la fila resta uniforme qualunque file arrivi */
.uvq-chip img { height: 18px; width: auto; max-width: 48px; object-fit: contain; filter: brightness(0); opacity: .8; }
.uvq-n { font-size: 11.5px; font-weight: 700; color: var(--muted, #6b7280); }
.uvq-chip.is-on { background: var(--ink, #0D0F14); border-color: var(--ink, #0D0F14); color: #fff; }
.uvq-chip.is-on img { filter: brightness(0) invert(1); }
.uvq-chip.is-on .uvq-n { color: rgba(255, 255, 255, .65); }
.uvq-chip:disabled { opacity: .38; cursor: default; }
.uvq-chip:hover:not(:disabled):not(.is-on) { border-color: var(--ink, #0D0F14); }
.uvq-chip:active { transform: scale(.97); }
.uvq-chip:focus-visible { outline: 2px solid var(--blue, #0057D9); outline-offset: 2px; }
.uv-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line,#e6e8ec);border-radius:var(--radius-l);padding:14px}
.uv-search{position:relative;flex:1 1 260px;display:flex;align-items:center}
.uv-search svg{position:absolute;left:13px;color:var(--muted,#6b7280)}
.uv-search input{width:100%;font:inherit;font-size:14px;color:var(--ink,#0D0F14);border:1px solid var(--line,#e6e8ec);border-radius:var(--radius-m);padding:11px 34px 11px 38px;outline:none;transition:border-color .2s}
.uv-search input:focus{border-color:var(--blue,#0057D9)}
.uv-search-clear{position:absolute;right:8px;border:none;background:none;font-size:20px;line-height:1;color:var(--muted,#9aa0a8);cursor:pointer;padding:4px}
.uv-selects{display:flex;gap:10px;flex-wrap:wrap;flex:1 1 auto}
.uv-selects select{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink,#0D0F14);background:#fff;border:1px solid var(--line,#e6e8ec);border-radius:var(--radius-m);padding:11px 12px;cursor:pointer;transition:border-color .2s}
.uv-selects select:focus{outline:none;border-color:var(--blue,#0057D9)}
.uv-sort{margin-left:auto}
.uv-resultbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 2px 16px}
.uv-count{font-size:14px;color:var(--muted,#6b7280)}
.uv-count strong{color:var(--ink,#0D0F14);font-size:16px}
.uv-reset{border:none;background:none;color:var(--blue,#0057D9);font-weight:700;font-size:13.5px;cursor:pointer}
.uv-empty{text-align:center;padding:40px 0}
.uv-empty p{font-size:16px;color:var(--muted,#6b7280);margin:0 0 18px}
.uv-empty-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* banda CTA finale */
.usato-cta-band{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;background:var(--ink,#0D0F14);color:#fff;border:1px solid rgba(255,255,255,.08);border-radius: var(--radius-xl);padding:clamp(34px,4.5vw,56px) clamp(28px,4vw,56px)}
.usato-cta-band::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(54% 150% at 93% 50%, rgba(216,255,69,.16), transparent 60%)}
.usato-cta-band > *{position:relative;z-index:1}
.usato-cta-band h2{font-family:var(--font-display);font-size:clamp(24px,3vw,38px);font-weight:900;letter-spacing:-.02em;line-height:1.04;margin:0;color:#fff}
.usato-cta-band p{margin:10px 0 0;color:rgba(255,255,255,.74);font-size:15.5px;line-height:1.6;max-width:52ch}
.usato-cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.cta-eyebrow{display:inline-block;margin-bottom:12px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--lime,#D8FF45)}

/* Richiesta su misura di /usato (UsatoLeadForm): la stessa fascia scura, con il
   modulo al posto dei due link verso la home. Copy a sinistra, campi a destra;
   i campi sono scuri come quelli del modulo della scheda auto (.contact-bar).
   Vive anche dentro l'elenco vuoto, per questo non dipende dalla sezione. */
.usato-cta-band.usato-richiesta{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:clamp(24px,4vw,56px);text-align:left;scroll-margin-top:calc(var(--nav-height) + 12px)}
.usato-richiesta .contact-form-row{grid-template-columns:1fr 1fr;gap:10px;max-width:none;margin:0}
.usato-richiesta .contact-form-row .ur-cerca,
.usato-richiesta .contact-form-row .form-consent,
.usato-richiesta .contact-form-row > button{grid-column:1/-1}
/* consenso prima del bottone anche su computer: il modulo è stretto, il
   bottone non chiude nessuna riga di campi */
.usato-richiesta .contact-form-row .form-consent{order:1;color:rgba(255,255,255,.62)}
.usato-richiesta .contact-form-row > button{order:2}
.usato-richiesta .form-consent a{color:var(--lime,#D8FF45)}
.usato-richiesta .form-consent input[type="checkbox"]{accent-color:var(--lime,#D8FF45)}
.usato-richiesta input:not([type="checkbox"]){width:100%;background:var(--ink-soft);border:1px solid rgba(255,255,255,.2);color:var(--on-dark,#fff)}
.usato-richiesta input:not([type="checkbox"])::placeholder{color:var(--on-dark-soft)}
.usato-richiesta input:not([type="checkbox"]):focus{outline:none;border-color:var(--lime,#D8FF45)}
.usato-richiesta :focus-visible{outline-color:var(--lime,#D8FF45)}
.ur-cerca{display:flex;flex-direction:column;gap:6px}
.ur-cerca span{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.74)}
.ur-cerca em{font-style:normal;font-weight:500;color:rgba(255,255,255,.5)}
.usato-richiesta .contact-form-row > button{height:50px;padding:0 28px;border-radius:var(--radius-pill);background:var(--lime,#D8FF45);color:var(--ink,#0D0F14);font-size:15px;font-weight:700;transition:background .2s}
.usato-richiesta .contact-form-row > button:hover{background:var(--lime-dark,#C2E82E)}
.usato-richiesta .contact-form-row > button:disabled{opacity:.7;cursor:default}
.usato-richiesta .form-status{margin-top:12px}
@media(max-width:900px){
  .usato-cta-band.usato-richiesta{grid-template-columns:1fr;gap:22px}
}
@media(max-width:640px){
  .usato-richiesta .contact-form-row{grid-template-columns:1fr}
}

/* bottone outline scuro (per fondo chiaro) */
.btn-outline-dark{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink,#0D0F14);color:var(--ink,#0D0F14);font-weight:700;font-size:14px;padding:11px 20px;border-radius:var(--radius-pill);transition:background .2s,color .2s}
.btn-outline-dark:hover{background:var(--ink,#0D0F14);color:#fff}

@media(max-width:900px){
  .usato-hero-split .usato-hero-inner{grid-template-columns:1fr;gap:26px}
  .usato-hero-card{max-width:430px}
}
/* /usato da telefono: le auto al primo schermo. È la pagina dove atterrano
   gli annunci, e su iPhone 13 (finestra di 664 px) la prima auto dell'elenco
   stava a 1486 px: la hero era alta 1170 px perché si portava dietro la
   scheda «In evidenza», le tre garanzie, la riga verso l'Advisor e il
   percorso Home / Pronta consegna. Da telefono restano titolo, frase e i due
   bottoni. La scheda in evidenza non si perde: la stessa auto è nell'elenco,
   e con display:none il browser non ne scarica nemmeno la foto. Tutto sotto
   .usato-hero-split, che c'è solo su /usato: le altre pagine usano gli stessi
   blocchi (.usato-usp, .uh-sub) e restano come sono. Su computer non cambia
   nulla. */
@media(max-width:720px){
  .usato-hero-split .usato-hero-card,
  .usato-hero-split .usato-usp,
  .usato-hero-split .usato-hero-help,
  .usato-hero-split .mp-breadcrumb{display:none}
  .usato-hero-split .uh-sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
}

/* ── scheda veicolo: badge "Nuovo" + rata reale (link finanziamento) ── */
.uv-badge.nuovo { background: var(--blue,#0057D9); color:#fff; }
.vd-badge.nuovo { background: var(--blue,#0057D9); color:#fff; }
.vd-pricecard .rate { display:flex; flex-direction:column; gap:2px; }
.vd-pricecard .rate-note { font-size:11px; color:var(--muted,#9aa0a8); font-weight:500; }
.vd-pricecard .rate-link { font-size:12.5px; font-weight:700; color:var(--blue,#0057D9); margin-top:2px; }

/* ── scheda veicolo: striscia specifiche-chiave con icone ── */

/* ── scheda veicolo: gallery zoom + lightbox fullscreen ── */
.vd-main{display:block;width:100%;padding:0;border:none;font:inherit;color:#fff;cursor:zoom-in;text-align:left}
.vd-zoom{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;background:rgba(13,15,20,.7);color:#fff;font-size:12px;font-weight:600;padding:7px 12px;border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s}
.vd-main:hover .vd-zoom{opacity:1}
.vd-counter{position:absolute;left:14px;bottom:14px;background:rgba(13,15,20,.7);color:#fff;font-size:12px;font-weight:600;padding:6px 11px;border-radius:var(--radius-pill)}
.vd-thumb{padding:0;font:inherit}
.vd-lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,10,14,.94);display:flex;align-items:center;justify-content:center;padding:5vh 4vw;animation:lbfade .2s ease}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
.vd-lb-img{max-width:100%;max-height:90vh;object-fit:contain;border-radius: var(--radius-s);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.vd-lb-close{position:absolute;top:18px;right:20px;width:46px;height:46px;border-radius:var(--radius-circle);border:none;background:rgba(255,255,255,.12);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.vd-lb-close:hover{background:rgba(255,255,255,.22)}
.vd-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:var(--radius-circle);border:none;background:rgba(255,255,255,.12);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.vd-lb-nav:hover{background:rgba(255,255,255,.22)}
.vd-lb-nav.prev{left:20px}
.vd-lb-nav.next{right:20px}
.vd-lb-count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.85);font-size:14px;font-weight:600;background:rgba(13,15,20,.5);padding:6px 14px;border-radius:var(--radius-pill)}
@media(max-width:560px){ .vd-lb-nav{width:44px;height:44px} .vd-lb-nav.prev{left:8px} .vd-lb-nav.next{right:8px} .vd-lightbox{padding:8vh 2vw} }

/* ═══ CONTROLLI FORM UNIFORMI (altezza 46px, radius 10, chevron coerente) ═══ */
.uv-search input,
.uv-selects select,
.contact-form-row input,
.contact-form-row select,
.careers-form input,
.careers-form select,
.tradein-fields input {
  height: 46px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: var(--radius-m);
}
/* select: stessa altezza dell'input + freccia custom (no appearance nativa) */
.uv-selects select,
.contact-form-row select,
.careers-form select {
  -webkit-appearance: none;
  appearance: none;
  padding: 0 36px 0 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px;
  cursor: pointer;
}
.uv-search input { padding: 0 36px 0 38px; }
.contact-form-row input,
.careers-form input { padding: 0 14px; }
.careers-form textarea { font-size: 14px; border-radius: var(--radius-m); }
/* su /usato i select non devono restare stretti: riempiono lo spazio */
@media(min-width:641px){ .uv-selects { flex: 1 1 auto; } .uv-selects select { flex: 1 1 0; min-width: 0; } }

/* ── hero immersive sulle sottopagine: scorrono sotto il nav trasparente (come la home) ── */
.usato-hero, .mp-hero, .art, .brandpage { margin-top: calc(-1 * var(--nav-height)); }

/* dropdown a lista verticale (es. menu Pronta consegna: 4 voci) */
.nav-dd-panel.is-list { grid-template-columns: 1fr; min-width: 220px; }

/* ── Micro-interazioni card uniformi: hover lift + ombra + zoom foto (showroom/usato/blog) ── */
.show-card, .uv-card, .usato-hero-card, .blog-card, .story-card {
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease, opacity .6s var(--ease-out);
}
.show-card:hover, .uv-card:hover, .usato-hero-card:hover, .blog-card:hover, .story-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px -16px rgba(13,15,20,.28) !important;
  border-color: transparent;
}
/* layer immagine zoomabile: i badge restano fuori dal layer, quindi non scalano */
.uv-photo, .uhc-media, .blog-card-img, .story-img { overflow: hidden; }
.story-img { position: relative; }
.card-zoom { position: absolute; inset: 0; background-size: cover; background-position: center; }
.card-zoom, .show-card-media img { transition: transform .55s cubic-bezier(.16,1,.3,1); will-change: transform; }
.show-card:hover .show-card-media img,
.uv-card:hover .card-zoom,
.usato-hero-card:hover .card-zoom,
.blog-card:hover .card-zoom,
.story-card:hover .card-zoom { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .show-card, .uv-card, .usato-hero-card, .blog-card, .story-card, .card-zoom, .show-card-media img { transition: none; }
  .show-card:hover, .uv-card:hover, .usato-hero-card:hover, .blog-card:hover, .story-card:hover { transform: none; }
  .show-card:hover .show-card-media img, .uv-card:hover .card-zoom, .usato-hero-card:hover .card-zoom,
  .blog-card:hover .card-zoom, .story-card:hover .card-zoom { transform: none; }
}

/* ── brand page: card gamma allineate (tema scuro) hover lift + zoom render ── */
.bp-model { transition: border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.bp-model:hover { transform: translateY(-5px); box-shadow: 0 22px 46px -20px rgba(0,0,0,.65); }
.bp-model-img { transition: transform .55s cubic-bezier(.16,1,.3,1); will-change: transform; }
.bp-model:hover .bp-model-img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .bp-model-img { transition: none !important; }
  .bp-model:hover .bp-model-img, .bp-model:hover { transform: none !important; }
}

/* ── pagina servizi: griglia servizi (card icona + cta) ── */
.svc-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:18px; }
.svc-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line,#e6e8ec); border-radius: var(--radius-l); padding:26px 24px; text-decoration:none; color:var(--ink,#0D0F14); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; }
.svc-card:hover { transform: translateY(-5px); box-shadow: 0 22px 48px -16px rgba(13,15,20,.20); border-color: transparent; }
.svc-ico { width:48px; height:48px; border-radius: var(--radius-m); background:rgba(0,87,217,.08); color:var(--blue,#0057D9); display:grid; place-items:center; }
.svc-eyebrow { display:block; margin-top:16px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--blue,#0057D9); }
.svc-card h3 { font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:-.01em; margin:4px 0 0; }
.svc-card p { color:var(--text-muted,#6b7280); font-size:14px; line-height:1.65; margin:10px 0 0; }
.svc-cta { margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14px; color:var(--blue,#0057D9); }
.svc-cta svg { transition: transform .2s; }
.svc-card:hover .svc-cta svg { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .svc-card { transition:none; } .svc-card:hover { transform:none; } }

/* ── brand: stock filtrabile (chip condizione, su sezione chiara) ── */
.bstk-filter { display:flex; flex-wrap:wrap; gap:8px; margin-bottom: var(--space-4); }
.bstk-chip { display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line,#e6e8ec); color:var(--ink,#0D0F14); border-radius:var(--radius-pill); padding:9px 15px; font-size:13.5px; font-weight:600; cursor:pointer; transition: border-color .2s, background .2s, color .2s; }
.bstk-chip span { font-size:12px; color:var(--text-muted,#6b7280); font-weight:700; }
.bstk-chip:hover { border-color: var(--blue,#0057D9); }
.bstk-chip.active { background: var(--ink,#0D0F14); border-color: var(--ink,#0D0F14); color:#fff; }
.bstk-chip.active span { color: rgba(255,255,255,.7); }
.bstk-more { text-align:center; margin-top: var(--space-4); }

/* ── brand: sezione servizi/assistenza (tema scuro) ── */
.bp-svc-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top: var(--space-4); }
.bp-svc-item { background:rgba(255,255,255,0.045); border:1px solid var(--bp-line,rgba(255,255,255,.14)); border-radius:var(--radius-l); padding:22px; }
.bp-svc-ico { display:inline-flex; width:46px; height:46px; border-radius: var(--radius-m); background:var(--bp-line,rgba(255,255,255,.08)); color:var(--bp-accent); align-items:center; justify-content:center; }
.bp-svc-item h3 { font-family:var(--font-display); font-size:17px; font-weight:800; color:var(--bp-ink,#fff); margin:14px 0 0; }
.bp-svc-item p { color:rgba(var(--bp-ink-rgb,255,255,255),0.66); font-size:13.5px; line-height:1.6; margin:7px 0 0; }
.bp-svc-cta { text-align:center; margin-top: var(--space-4); }
@media (max-width: 900px) { .bp-svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bp-svc-grid { grid-template-columns: 1fr; } }

/* ── brand: fascia promo fallback (sezione chiara, nessuna promo attiva) ── */
.bp-promo-empty { text-align:center; max-width:700px; margin:0 auto; background:#fff; border:1px solid #e7e9ee; border-radius: var(--radius-l); padding:44px 34px; }
.bp-promo-empty .bp-kicker { display:block; }
.bp-promo-empty h3 { font-family:var(--font-display); font-size:clamp(23px,2.7vw,32px); font-weight:800; letter-spacing:-.01em; color:var(--ink,#0D0F14); margin-top:8px; }
.bp-promo-empty p { color:#5b6573; margin:14px auto 26px; max-width:52ch; line-height:1.6; font-size:15px; }
.bp-promo-empty-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── brand: preventivo nuovo — caselle tutte uguali (46px) + chevron select ── */
.bp-quote-form input, .bp-quote-form select { height:46px; box-sizing:border-box; padding:0 14px; }
.bp-quote-form select { appearance:none; -webkit-appearance:none; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b9c0cc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }

/* ── brand: "perché autocityBAT" — numeri grandi outline, allineati ── */
.bp-why-list li { grid-template-columns:64px 1fr; gap:24px; align-items:start; padding:26px 0; }
.bp-why-list li::before {
  font-size:46px; line-height:1; letter-spacing:-.03em;
  color:var(--bp-accent);
  align-self:start; margin-top:-4px;
}
@supports ((-webkit-text-stroke: 1px black)) {
  .bp-why-list li::before { color:transparent; -webkit-text-stroke:1.6px var(--bp-accent); }
}
.bp-why-list h3 { margin-top:2px; }
@media(max-width:520px){ .bp-why-list li{grid-template-columns:48px 1fr;gap:16px} .bp-why-list li::before{font-size:34px} }

/* ── chi siamo: marchi (banda scura, loghi bianchi) ── */
.about-brands{background:var(--ink,#0D0F14)}
.about-brands .section-eyebrow{color:var(--lime,#D8FF45)}
.about-brands .section-title{color:#fff}
.about-brands .section-lede{color:rgba(255,255,255,.65)}
.ab-brands{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ab-brand{display:flex;align-items:center;justify-content:center;min-height:104px;padding:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-l);transition:border-color .25s var(--ease-out),background .25s,transform .25s var(--ease-out)}
.ab-brand:hover{border-color:var(--lime,#D8FF45);background:rgba(255,255,255,.07);transform:translateY(-3px)}
.ab-brand img{height:38px;max-width:80%;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.82;transition:opacity .25s}
.ab-brand:hover img{opacity:1}
.ab-brand span{color:#fff;font-weight:700;font-size:15px;text-align:center}
@media(max-width:900px){.ab-brands{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ab-brands{grid-template-columns:repeat(2,1fr)} .ab-brand{min-height:88px;padding:16px} .ab-brand img{height:30px}}

/* ── chi siamo: sede + mappa ── */
.sede-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(24px,4vw,48px);align-items:stretch}
.sede-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.sede-list li{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line,#e7e9ee)}
.sede-list li:first-child{padding-top:0}
.sede-list li:last-child{border-bottom:0}
.sede-k{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted,#6b7280)}
.sede-v{font-size:15px;font-weight:600;color:var(--ink,#0D0F14);line-height:1.5}
.sede-v a{color:var(--blue,#0057D9)}
.sede-info .mp-cta{margin-top:24px}
.sede-map{position:relative;min-height:360px;border-radius: var(--radius-l);overflow:hidden;border:1px solid var(--line,#e7e9ee)}
.sede-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.12)}
@media(max-width:860px){.sede-grid{grid-template-columns:1fr} .sede-map{min-height:300px}}

/* ── blog: articolo in evidenza (cinematografico, image-led) ── */
.blog-featured{position:relative;display:flex;align-items:flex-end;min-height:clamp(360px,52vh,520px);border-radius: var(--radius-xl);overflow:hidden;color:#fff;text-decoration:none;margin-bottom:var(--space-5);background:var(--ink,#0D0F14);border:1px solid rgba(255,255,255,.06)}
.blog-featured .bf-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.blog-featured:hover .bf-img{transform:scale(1.05)}
.blog-featured::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,20,.05) 0%,rgba(13,15,20,.35) 42%,rgba(13,15,20,.92) 100%)}
.bf-body{position:relative;z-index:2;max-width:740px;padding:clamp(28px,5vw,56px)}
.bf-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.bf-cat{background:var(--lime,#D8FF45);color:var(--ink,#0D0F14);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:6px 12px;border-radius:var(--radius-pill)}
.bf-date{font-size:13px;font-weight:600;color:rgba(255,255,255,.72)}
.bf-flag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.5)}
.blog-featured h2{font-family:var(--font-display);font-size:clamp(28px,4.2vw,50px);font-weight:900;line-height:1.02;letter-spacing:-.02em;margin:0}
.bf-body p{margin-top:14px;color:rgba(255,255,255,.82);font-size:16px;line-height:1.55;max-width:62ch}
.bf-read{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:800;font-size:15px;color:var(--lime,#D8FF45)}
.bf-read svg{transition:transform .2s var(--ease-out)}
.blog-featured:hover .bf-read svg{transform:translateX(6px)}
@media(max-width:560px){ .blog-featured{min-height:clamp(320px,68vh,460px)} .bf-body p{font-size:14.5px} }

/* ── blog: chip filtro categorie ── */
.blog-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--space-4)}
.blog-cat{padding:9px 17px;border-radius:var(--radius-pill);border:1px solid var(--line,#e6e8ec);background:#fff;font-size:13.5px;font-weight:600;color:var(--ink,#0D0F14);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.blog-cat:hover{border-color:var(--blue,#0057D9)}
.blog-cat.active{background:var(--ink,#0D0F14);border-color:var(--ink,#0D0F14);color:#fff}

/* ── blog: immagini e link inline negli articoli ── */
.art-body a{color:var(--blue,#0057D9);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.art-body a:hover{color:var(--blue-dark,#0048b3)}
.art-fig{margin:26px 0}
.art-fig img,.art-body img{display:block;width:100%;height:auto;border-radius: var(--radius-m);border:1px solid var(--line,#e7e9ee)}
.art-fig video{display:block;width:100%;height:auto;border-radius: var(--radius-m);border:1px solid var(--line,#e7e9ee);background:#0B1428}
.art-video .art-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius: var(--radius-m);overflow:hidden;border:1px solid var(--line,#e7e9ee);background:#0B1428}
.art-video .art-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.art-body em{font-style:italic}
.art-body blockquote{margin:24px 0;padding:2px 0 2px 18px;border-left:1px solid var(--line,#e7e9ee);color:var(--muted,#6b7280)}
.art-body blockquote p{font-style:italic;font-size:18px;line-height:1.6;margin:0;max-width:64ch}

/* ── hero slider home: testo per-slide (immagine + copy crossfade) ── */
.hslide-bgs { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hslide-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1s var(--ease-out); }
.hslide-bg.is-active { opacity:1; }
/* `background` in forma breve azzerava anche size e position ereditati da
   .hslide-bg: con la foto di riserva sotto al video la si sarebbe vista
   ripetuta e appiccicata in alto a sinistra. Qui serve solo il colore. */
.hslide-bg--video { background-color:#0B1428; }
.hslide-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hslide-copies { display:grid; }
.hslide-copy { grid-area:1/1; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .42s var(--ease-out), transform .5s var(--ease-out), visibility .42s; pointer-events:none; }
.hslide-copy.is-active { opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:.28s; }
.hero-dots { position:absolute; left:0; right:0; bottom:26px; z-index:5; display:flex; justify-content:center; gap:9px; }
.hero-dot { width:9px; height:9px; padding:0; border:0; border-radius:var(--radius-pill); background:rgba(255,255,255,.34); cursor:pointer; transition:background .25s var(--ease-out), width .25s var(--ease-out); }
.hero-dot:hover { background:rgba(255,255,255,.6); }
/* col pollice 9px non si prendono: l'area cliccabile cresce, il pallino no */
@media (max-width: 640px) {
  /* box-sizing:border-box globale: il padding da solo non allarga, serve min-* */
  .hero-dot { min-width: 30px; min-height: 44px; padding: 17px 10px; background-clip: content-box; }
  .hero-dot.is-active { min-width: 46px; }
}
.hero-dot.is-active { background:var(--lime,#D8FF45); width:28px; }
@media (prefers-reduced-motion: reduce) { .hslide-bg, .hslide-copy { transition:none; } }

/* ─────────────────────────── VALUTA LA TUA AUTO (permuta) ─────────────────────────── */
.valuta-hero { padding-bottom: clamp(48px, 7vw, 96px); }
.valuta-hero-grid { display: grid; grid-template-columns: 1fr minmax(380px, 480px); gap: clamp(28px, 4vw, 56px); align-items: center; }
.valuta-hero-copy { min-width: 0; }
@media (max-width: 980px) { .valuta-hero-grid { grid-template-columns: 1fr; } }

/* card wizard */
.valuta-wizard { color: var(--ink); }
.vw-card { background: #fff; border: 1px solid #e7e9ee; border-radius: var(--radius-l); padding: clamp(18px, 2.2vw, 26px); box-shadow: 0 40px 80px -42px rgba(0,0,0,.55); }

/* progress */
.vw-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; }
.vw-step { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.vw-step-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); background: #eef0f4; color: var(--muted); font-size: 12px; flex: none; transition: .2s; }
.vw-step-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-step.is-active { color: var(--ink); }
.vw-step.is-active .vw-step-n, .vw-step.is-done .vw-step-n { background: var(--blue); color: #fff; }
@media (max-width: 520px) { .vw-step-l { display: none; } .vw-step { flex: none; } .vw-steps { gap: 6px; } }

/* fields */
.vw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vw-field { display: flex; flex-direction: column; gap: 6px; }
.vw-field.vw-field-wide { grid-column: 1 / -1; }
.vw-field > span { font-size: 12px; font-weight: 700; color: #5b6573; }
.vw-field input, .vw-field select { height: 46px; border: 1px solid #d8dbe2; border-radius: var(--radius-s); padding: 0 13px; font-size: 15px; color: var(--ink); background: #fff; outline: none; width: 100%; transition: border-color .15s, box-shadow .15s; }
.vw-field select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.vw-field input:focus, .vw-field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,87,217,.14); }
.vw-label { font-size: 14px; font-weight: 800; color: var(--ink); margin: 2px 0 10px; }

/* condizioni */
.vw-conds { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.vw-cond { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 13px 14px; border: 1.5px solid #e0e3ea; border-radius: var(--radius-m); background: #fff; cursor: pointer; transition: .15s; }
.vw-cond strong { font-size: 14.5px; color: var(--ink); }
.vw-cond span { font-size: 11.5px; color: #6b7280; line-height: 1.35; }
.vw-cond:hover { border-color: #c2c7d2; }
.vw-cond.is-on { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,87,217,.12); background: #f5f8ff; }
@media (max-width: 520px) { .vw-conds { grid-template-columns: 1fr; } }

/* actions */
.vw-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.vw-hint { font-size: 12px; color: var(--muted); }
.vw-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: var(--radius-s); font-size: 14.5px; font-weight: 800; cursor: pointer; border: 1px solid transparent; transition: transform .12s, background .2s; }
.vw-btn:active { transform: translateY(1px); }
.vw-btn-primary { background: var(--blue); color: #fff; }
.vw-btn-primary:hover { background: var(--blue-dark); }
.vw-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.vw-btn-ghost { background: #fff; color: #5b6573; border-color: #d8dbe2; }
.vw-btn-ghost:hover { background: #f4f5f7; }

/* result */
.vw-result { text-align: center; padding: 22px 16px 18px; border-radius: var(--radius-l); background: linear-gradient(180deg, #0d0f14, #1a1d24); color: #fff; margin-bottom: 18px; }
.vw-result-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,.6); text-transform: uppercase; }
.vw-range { font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; font-size: clamp(30px, 5vw, 44px); margin: 8px 0 0; line-height: 1; }
.vw-range span { color: var(--lime); margin: 0 4px; }
.vw-range em { font-style: normal; color: rgba(255,255,255,.7); font-size: .6em; }
.vw-disclaimer { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.5; margin: 12px auto 0; max-width: 46ch; }
.vw-proof { font-size: 13px; color: rgba(255,255,255,.85); margin: 10px auto 0; max-width: 52ch; }
.vw-proof strong { color: var(--lime); font-weight: 700; }
.vw-validity {
  display: inline-block; margin: 14px auto 0; padding: 9px 16px;
  font-size: 12.5px; line-height: 1.5; color: #dfe3e9; max-width: 52ch;
  background: rgba(216,255,69,0.08); border: 1px solid rgba(216,255,69,0.25); border-radius: var(--radius-m);
}
.vw-validity strong { color: var(--lime); font-weight: 800; }

/* lead */
.vw-lead-head h3 { font-family: var(--font-display); font-size: 20px; font-weight: 800; margin: 0; }
.vw-lead-head p { font-size: 13.5px; color: #6b7280; margin: 4px 0 14px; line-height: 1.5; }
.vw-lead { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vw-consent { grid-column: 1 / -1; display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: #5b6573; line-height: 1.45; }
.vw-consent input { margin-top: 2px; accent-color: var(--blue); }
.vw-consent a { color: var(--blue); }
.vw-err { grid-column: 1 / -1; color: #c0392b; font-size: 13px; font-weight: 600; margin: 2px 0 0; }
@media (max-width: 520px) { .vw-lead, .vw-grid { grid-template-columns: 1fr; } }

/* success */
.vw-success { text-align: center; padding: 14px 6px; }
.vw-success-ico { width: 60px; height: 60px; border-radius: var(--radius-pill); background: #ecfdf3; color: #12a150; display: grid; place-items: center; margin: 0 auto 14px; }
.vw-success h3 { font-family: var(--font-display); font-size: 23px; font-weight: 800; margin: 0; }
.vw-success-range { font-size: 15px; margin: 10px 0 0; color: var(--ink); }
.vw-success-range strong { color: var(--blue); }
.vw-success > p { color: #5b6573; font-size: 14px; line-height: 1.6; margin: 10px auto 0; max-width: 44ch; }
.vw-success .vw-btn { margin-top: 18px; }

/* come funziona — step */
.valuta-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.valuta-step { background: #fff; border: 1px solid var(--line, #eceef1); border-radius: var(--radius-l); padding: 26px 24px; }
.valuta-step-n { font-family: var(--font-display); font-size: 30px; font-weight: 900; color: var(--blue); letter-spacing: -.02em; display: block; }
.valuta-step h3 { font-size: 18px; font-weight: 800; margin: 12px 0 0; }
.valuta-step p { margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
@media (max-width: 820px) { .valuta-steps { grid-template-columns: 1fr; } }

/* faq accent (riusa .bp-faq-list/.bp-faq-item) */
.valuta-faq { --bp-accent: var(--blue); }

/* ─── Brand page: Novità & eventi (lanci, inaugurazioni, porte aperte) ─── */
.bp-news{background:#fff}
.bp-news-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bp-news-grid.is-solo{grid-template-columns:1fr;max-width:860px;margin:0 auto}
.bp-news-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;border-radius: var(--radius-l);overflow:hidden;background:var(--bp-bg,#0D0F14);color:var(--bp-ink,#fff)}
.bp-news-card.is-big{grid-column:1/-1;min-height:380px}
.bp-news-img{position:absolute;inset:0;background-size:cover;background-position:center}
.bp-news-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,10,14,.88) 18%,rgba(8,10,14,.35) 55%,rgba(8,10,14,.1))}
.bp-news-card.no-img{background:linear-gradient(135deg,var(--bp-bg,#0D0F14),#1a1e26)}
.bp-news-card.no-img::before{content:"";position:absolute;inset:auto -60px -60px auto;width:240px;height:240px;border-radius:var(--radius-circle);background:var(--bp-glow,rgba(0,87,217,.35));filter:blur(70px)}
.bp-news-body{position:relative;padding:24px;max-width:640px}
.bp-news-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.bp-news-badge{display:inline-block;padding:4px 10px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.bp-news-badge.is-lancio{background:var(--bp-accent,#0057D9);color:var(--bp-accent-ink,#fff)}
.bp-news-badge.is-evento{background:var(--lime,#D8FF45);color:#0D0F14}
.bp-news-badge.is-news{background:rgba(255,255,255,.16);color:var(--bp-ink,#fff)}
/* maiuscola solo sulla prima lettera: `capitalize` la metteva su ogni parola e
   gli orari scritti a mano uscivano «sabato 09:00–12:45 E 16:00–19:00» */
.bp-news-date{font-size:12.5px;font-weight:700}
.bp-news-date::first-letter{text-transform:uppercase}
.bp-news-luogo{font-size:12.5px;color:rgba(var(--bp-ink-rgb,255,255,255),.75)}
.bp-news-card h3{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0 0 6px}
.bp-news-card.is-big h3{font-size:32px}
.bp-news-sub{font-size:14.5px;font-weight:600;color:rgba(var(--bp-ink-rgb,255,255,255),.92);margin:0 0 4px}
.bp-news-desc{font-size:13px;line-height:1.55;color:rgba(var(--bp-ink-rgb,255,255,255),.75);margin:0 0 14px}
.bp-news-body .bp-btn-accent{margin-top:2px}
/* Evento con volantino: il volantino si legge intero, accanto al testo. Come
   sfondo veniva tagliato dal riquadro e scurito dal velo del titolo, e le date
   e gli orari stampati sopra non si leggevano più. */
.bp-news-card.has-flyer{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,var(--bp-bg,#0D0F14),#1a1e26)}
.bp-news-card.has-flyer .bp-news-body{flex:1 1 auto;min-width:0;align-self:flex-end}
.bp-news-flyer{position:relative;flex:0 0 auto;width:min(38%,300px);margin:24px 24px 24px 0;line-height:0;border-radius:var(--radius-m,12px);overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .25s}
.bp-news-flyer img{width:100%;height:auto;max-height:440px;object-fit:contain;display:block;background:#fff}
.bp-news-flyer:hover{transform:translateY(-3px)}
.bp-news-flyer:focus-visible{outline:3px solid var(--bp-accent,#0057D9);outline-offset:3px}
@media(max-width:760px){
  .bp-news-grid{grid-template-columns:1fr}
  .bp-news-card{min-height:260px}
  .bp-news-card.is-big{min-height:300px}
  .bp-news-card h3,.bp-news-card.is-big h3{font-size:24px}
  /* su telefono il volantino va sopra, al centro, e il testo sotto */
  .bp-news-card.has-flyer{flex-direction:column;align-items:stretch}
  .bp-news-flyer{order:-1;align-self:center;width:auto;max-width:300px;margin:24px 24px 0}
}

/* ─── BLOG · lettura articolo (progress, lede, share, collegamenti, autore) ─── */
.art-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:transparent;pointer-events:none}
.art-progress span{display:block;height:100%;width:0;background:var(--blue,#0057D9);transition:width .1s linear}
.art-meta-dot{margin:0 8px;opacity:.5}
.art-lede{max-width:720px;margin:2px 0 22px;font-size:20px;line-height:1.55;font-weight:500;color:var(--ink,#0D0F14)}
.art-body>p:first-of-type::first-letter{font-family:var(--font-display);font-size:3.1em;font-weight:800;float:left;line-height:.82;margin:6px 10px 0 0;color:var(--blue,#0057D9)}
/* citazione come "pull quote" più marcata */
.art-body blockquote{border-left-width:3px;border-left-color:var(--lime,#D8FF45);padding-left:22px}
.art-body blockquote p{color:var(--ink,#0D0F14);font-size:19px}

/* condivisione */
.art-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:30px 0 4px;padding-top:22px;border-top:1px solid var(--line,#eceef1)}
.art-share-lbl{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#6b7280);margin-right:2px}
.art-share-btn{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--ink,#0D0F14);background:#fff;border:1px solid var(--line,#e3e6ea);border-radius:var(--radius-pill);padding:8px 14px;cursor:pointer;transition:border-color .2s,background .2s,transform .1s}
.art-share-btn:hover{border-color:var(--blue,#0057D9);color:var(--blue,#0057D9)}
.art-share-btn:active{transform:translateY(1px)}

/* box "collegamenti utili" — SEO interna + conversione */
.art-links{margin:26px 0 8px;padding:22px 24px;background:var(--paper,#f5f6f8);border:1px solid var(--line,#eceef1);border-radius: var(--radius-l)}
.art-links-eyebrow{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--blue,#0057D9);margin-bottom:12px}
.art-links ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.art-links li{margin:0}
.art-links li a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;font-size:15px;font-weight:600;color:var(--ink,#0D0F14);text-decoration:none;border-bottom:1px solid var(--line,#e7e9ee);transition:color .18s,padding .18s}
.art-links li:last-child a{border-bottom:none}
.art-links li a svg{color:var(--blue,#0057D9);flex-shrink:0;transition:transform .18s}
.art-links li a:hover{color:var(--blue,#0057D9);padding-left:8px}
.art-links li a:hover svg{transform:translateX(3px)}

/* firma autore/concessionaria */
.art-author{display:flex;align-items:center;gap:16px;margin:30px 0 4px;padding:20px 22px;border:1px solid var(--line,#eceef1);border-radius: var(--radius-l)}
/* Come immagine il segno riempie il quadrato: il monogramma ha gia' il suo
   riquadro, quindi copre senza margini. */
img.art-author-mark{object-fit:cover;padding:0}
.art-author-mark{flex-shrink:0;width:46px;height:46px;border-radius: var(--radius-m);background:var(--ink,#0D0F14);color:#fff;font-family:var(--font-display);font-weight:800;font-size:19px;display:grid;place-items:center;letter-spacing:-.02em}
.art-author strong{display:block;font-size:15px;color:var(--ink,#0D0F14)}
.art-author p{margin:3px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted,#6b7280)}
@media(max-width:560px){ .art-lede{font-size:18px} .art-body>p:first-of-type::first-letter{font-size:2.6em} }

/* ─── Ricontatto rapido a metà pagina (conversione) ─── */
.quickcontact{background:var(--ink,#0D0F14);color:#fff}
.quickcontact-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:26px 0}
.quickcontact-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.quickcontact-copy strong{font-family:var(--font-display);font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.01em}
.quickcontact-copy span{font-size:14px;color:rgba(255,255,255,.68);max-width:52ch;line-height:1.5}
.quickcontact-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qc-call{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#fff;padding:12px 18px;border:1px solid rgba(255,255,255,.24);border-radius:var(--radius-pill);transition:border-color .2s,background .2s}
.qc-call:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.06)}
.qc-cta{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--ink,#0D0F14);background:var(--lime,#D8FF45);padding:13px 22px;border-radius:var(--radius-pill);transition:transform .1s,filter .2s}
.qc-cta:hover{filter:brightness(1.05)}
.qc-cta:active{transform:translateY(1px)}
.qc-cta svg{transition:transform .2s}
.qc-cta:hover svg{transform:translateX(3px)}
/* Entrata della fascia di ricontatto: la copy scivola da sinistra, telefono e
   bottone sbucano con un piccolo overshoot, poi l'icona fa due squilli.
   Le classi le mette site.js: senza script la fascia resta ferma e visibile.
   .qc-anima viene tolta a entrata finita, così le transizioni di hover/active
   tornano quelle normali e il tasto non diventa molle. */
.qc-anima:not(.is-vista) .quickcontact-copy,
.qc-anima:not(.is-vista) .qc-call,
.qc-anima:not(.is-vista) .qc-cta{opacity:0}
.qc-anima.is-vista .quickcontact-copy{animation:qc-scivola .5s cubic-bezier(0.22,1,0.36,1) both}
.qc-anima.is-vista .qc-call{animation:qc-sbuca .55s cubic-bezier(0.34,1.56,0.64,1) .12s both}
.qc-anima.is-vista .qc-cta{animation:qc-sbuca .55s cubic-bezier(0.34,1.56,0.64,1) .26s both}
.quickcontact.is-vista .qc-call svg{animation:qc-squillo .5s ease-in-out .95s 2}
@keyframes qc-scivola{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes qc-sbuca{from{opacity:0;transform:translateY(22px) scale(.72)}to{opacity:1;transform:none}}
@keyframes qc-squillo{0%,100%{transform:rotate(0)}25%{transform:rotate(-13deg)}75%{transform:rotate(13deg)}}
@media (prefers-reduced-motion: reduce){
  .qc-anima:not(.is-vista) .quickcontact-copy,
  .qc-anima:not(.is-vista) .qc-call,
  .qc-anima:not(.is-vista) .qc-cta{opacity:1}
  .qc-anima.is-vista .quickcontact-copy,
  .qc-anima.is-vista .qc-call,
  .qc-anima.is-vista .qc-cta,
  .quickcontact.is-vista .qc-call svg{animation:none}
}
@media(max-width:640px){
  .quickcontact-inner{flex-direction:column;align-items:flex-start;gap:16px}
  .quickcontact-actions{width:100%}
  .qc-call,.qc-cta{flex:1;justify-content:center}
}

/* ─── Home: Prossimi eventi (agenda concessionaria + brand) ─── */
.eventi{background:var(--paper,#f5f6f8)}
.eventi-list{display:flex;flex-direction:column;gap:12px;max-width:880px;margin:0 auto}
.evento-card{display:flex;align-items:flex-start;gap:18px;background:#fff;border:1px solid var(--line,#eceef1);border-radius:var(--radius-l);padding:16px 18px;text-decoration:none;color:inherit;transition:border-color .2s,transform .1s,box-shadow .2s}
.evento-card:hover{border-color:var(--blue,#0057D9);transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(13,15,20,.3)}
.evento-date{flex-shrink:0;width:60px;height:60px;border-radius: var(--radius-m);background:var(--ink,#0D0F14);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ev-day{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.02em}
/* «26–27» non sta in un riquadro tarato su «26»: il riquadro si allarga e le
   cifre rimpiccioliscono quel tanto che basta, invece di uscire dai bordi. */
.evento-date.is-range{width:74px}
.evento-date.is-range .ev-day{font-size:19px;letter-spacing:-.03em}
.ev-mon{font-size:11px;font-weight:700;letter-spacing:.06em;margin-top:3px;color:var(--lime,#D8FF45)}
.evento-body{min-width:0;flex:1}
.evento-meta{display:flex;align-items:center;gap:2px;flex-wrap:wrap;font-size:12px;margin-bottom:3px}
.evento-brand{font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--blue,#0057D9)}
.evento-luogo{color:var(--muted,#6b7280)}
.evento-card h3{font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.25;margin:0;color:var(--ink,#0D0F14)}
.evento-body p{font-size:14px;color:var(--muted,#6b7280);margin:2px 0 0;line-height:1.5}
/* L'invito dell'evento e' il pulsante di conversione della casa (.btn-lime,
   che ogni concessionaria tinge col proprio colore): a un porte aperte non ci
   si iscrive cliccando un link azzurro discreto. Qui resta solo la posizione. */
.evento-go{flex-shrink:0;align-self:center;text-decoration:none}
/* Il volantino dell'evento, accanto al testo come un poster, a pieno schermo al
   click. Ritratto o orizzontale che sia, ci si adatta senza deformarlo. Era una
   miniatura da 96px: un volantino a quella misura non lo legge nessuno. */
.evento-poster{flex-shrink:0;display:block;width:132px;border-radius:10px;overflow:hidden;border:1px solid var(--line,#eceef1);background:var(--paper,#f5f6f8);line-height:0;box-shadow:0 10px 24px -14px rgba(13,15,20,.35)}
.evento-poster img{width:100%;height:176px;object-fit:contain;display:block;transition:transform .25s}
.evento-poster:hover img{transform:scale(1.04)}
@media(max-width:720px){.evento-poster{width:112px}.evento-poster img{height:150px}}

/* TRE LIVELLI, non tre paragrafi uguali. Il selettore e' doppio di proposito:
   `.evento-body p` ha specificita' 0,1,1 e da solo `.evento-orari` (0,1,0)
   perdeva — colore e corpo venivano schiacciati e le tre righe uscivano
   identiche, grigie. La gerarchia va scritta piu' forte di cosi'. */
/* 1 · QUANDO si viene: subito sotto il titolo, scuro, e' il dato che decide. */
.evento-body .evento-orari{font-size:15px;font-weight:700;color:var(--ink,#0D0F14);margin:6px 0 0;line-height:1.35}
/* 2 · PERCHE' venire: il richiamo, un gradino sotto. */
.evento-body .evento-sub{font-size:14.5px;font-weight:600;color:var(--text,#1A1D24);margin:4px 0 0;line-height:1.4}
/* 3 · IL RESTO: tre righe e poi si taglia. Sta sulla card perche' prima non la
   leggeva nessuno — per leggerla si cliccava, e il click portava via. */
.evento-body .evento-desc{font-size:14px;color:var(--muted,#6b7280);margin:8px 0 0;line-height:1.55;max-width:68ch}
/* CHIUSA: tre righe. APERTA: tutta.
   Non con <details>: Chrome nasconde del tutto il contenuto di un details
   chiuso (::details-content, content-visibility: hidden), e l'anteprima
   tagliata spariva — restava il «Leggi tutto» sopra un buco bianco. Con una
   casella di spunta nascosta il testo e' sempre nel documento, letto una volta
   sola da chi usa un lettore di schermo, e a tagliarlo e' solo il CSS. */
.evento-testo{display:block}
/* nascosta ma raggiungibile col tasto Tab: `display:none` la toglierebbe dal
   giro della tastiera e il «Leggi tutto» non si aprirebbe piu' senza mouse */
.evento-piu-check{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.evento-piu-check:not(:checked) ~ .evento-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.evento-piu{display:inline-flex;align-items:center;cursor:pointer;margin-top:2px;padding:10px 2px;min-height:44px;font-size:13.5px;font-weight:700;color:var(--blue,#0057D9)}
.evento-piu:hover{text-decoration:underline}
.evento-piu-check:focus-visible ~ .evento-piu{outline:2px solid var(--blue,#0057D9);outline-offset:3px;border-radius:4px}
.evento-piu-check:not(:checked) ~ .evento-piu .ev-chiudi,
.evento-piu-check:checked ~ .evento-piu .ev-apri{display:none}
.evento-go svg{transition:transform .2s}
.evento-card:hover .evento-go{transform:translateY(-1px)}
@media(max-width:640px){
  .evento-card{flex-wrap:wrap;gap:12px;padding:14px}
  .evento-go{width:100%;justify-content:center;align-self:stretch}
  /* Su una card larga 342px il testo a 13,5px era troppo piccolo e ci stavano
     34 caratteri per riga: tre righe di descrizione non dicevano niente. */
  .evento-card h3{font-size:18px}
  .evento-body .evento-orari{font-size:15px}
  .evento-body .evento-sub,.evento-body .evento-desc{font-size:15px}
  .evento-body .evento-desc{-webkit-line-clamp:5}
  /* Il volantino sta in riga con la data; il TESTO invece va a capo e si prende
     tutta la larghezza. Lasciandolo di fianco restavano 160px di colonna: il
     titolo andava su tre righe, gli orari su quattro, e sotto la data restava
     un buco bianco alto mezza card. */
  .evento-poster{width:104px}
  .evento-poster img{height:138px}
  .evento-body{flex-basis:100%}
}

/* ═══════════════ FIX MOBILE (audit 2026-07-18) ═══════════════ */
/* iOS Safari zooma da solo su input < 16px: 16px su mobile su tutti i form pubblici.
   L'altezza dei campi è fissa (46/54px) quindi il layout non cambia. */
@media (max-width: 640px) {
  /* !important perché le regole per-form (.contact-form-row input, .bp-quote-form input…)
     hanno specificità maggiore e vincerebbero: 16px è sempre giusto su mobile. */
  input, select, textarea { font-size: 16px !important; }
  /* form a piena larghezza (niente 2 colonne strette) */
  .contact-form-row, .tradein-fields, .svc-grid { grid-template-columns: 1fr; }
  /* fascia CTA business meno padding → più spazio ai campi */
  .usato-cta-band { padding: 26px 18px; }
  /* tap target ≥ ~44px su elementi toccati spesso */
  .bstk-chip { padding: 11px 16px; }
  .bp-btn-accent.sm { padding: 11px 18px; }
  .uv-reset { min-height: 44px; padding: 10px 8px; }
  .uv-search-clear { min-width: 40px; min-height: 40px; }
}
/* hero H1: i <br> forzati + il minimo 44px lo tagliavano sotto i 360px */
@media (max-width: 560px) {
  .hero-v2 h1, .hero-v2 .hslide-titolo { font-size: clamp(30px, 8vw, 40px); }
  /* qui si nascondono gli A-CAPO dei titoli, non i titoli: una virgola nel
     posto sbagliato ha tenuto muto l'h1 della prima diapositiva su telefono
     per tre giorni (il selettore diceva «tutto l'h1» invece di «i br dell'h1») */
  .hero-v2 h1 br, .hero-v2 .hslide-titolo br { display: none; }
  /* specifiche chiave scheda: minmax(0,...) evita che le celle crescano e sforino */
  .show-card-go { width: 42px; height: 42px; }
  /* advisor: card meno padding + tab scrollabili invece di stritolate */
  /* min-width:0: senza, le tab nowrap spingono la card oltre il viewport (overflow). */
  .advisor-v2-card { padding: 20px; min-width: 0; }
  .advisor-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
  .advisor-tab { flex: 0 0 auto; padding: 10px 12px; font-size: 12px; white-space: nowrap; }
}
/* header stretto: pill Contattaci meno larga */
@media (max-width: 400px) { .nav-cta-lime { padding: 12px 14px; } }

/* ═══════════════ PAGINE BRAND — MODERNIZZAZIONE (2026-07-18) ═══════════════ */
/* Il reveal allo scroll è gestito da ScrollReveal.tsx (classi .reveal/.is-revealed). */
/* Ritmo: sezioni più ariose + un alone ambient in alto (come l'hero), niente sezioni piatte */
.bp-section { padding: 92px 0; position: relative; overflow: hidden; }
.bp-section::before { content:""; position:absolute; left:50%; top:-40%; width:80%; height:80%; transform:translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, var(--bp-glow), transparent 70%); opacity:.5; pointer-events:none; }
.bp-section > .container { position: relative; }
.bp-sec-head { margin-bottom: 40px; }
.bp-sec-head h2, .bp-quote-copy h2 { font-size: clamp(30px, 4vw, 50px); letter-spacing: -0.02em; }
.bp-why { padding: 96px 0; }

/* Card gamma: più grandi, immagine protagonista dentro un pannello, hover vivo */
.bp-lineup { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 22px; }
/* La transition include opacity+transform (con il delay dello stagger SOLO su questi,
   così il reveal .reveal/.is-revealed continua a funzionare e a scaglionarsi) più le
   proprietà dell'hover a delay 0 (reattività immediata al passaggio del mouse). */
.bp-model { display: flex; flex-direction: column; padding: 14px 14px 22px; border-radius: var(--radius-l); background: rgba(255,255,255,0.05); transition: opacity .7s var(--ease-out) var(--reveal-delay,0ms), transform .7s var(--ease-out) var(--reveal-delay,0ms), border-color .3s ease, box-shadow .4s ease, background .3s ease; }
.bp-model:hover { border-color: color-mix(in srgb, var(--bp-accent) 60%, transparent); background:var(--bp-line,rgba(255,255,255,.08)); box-shadow: 0 26px 50px -22px rgba(0,0,0,.6); }
/* ── Riquadro della scheda modello ──
   Con un modellino RITAGLIATO (png/webp/avif su fondo trasparente) il
   riquadro e' un contenitore vuoto attorno a un'auto che galleggia: meglio
   toglierlo e lasciare che l'auto stia sulla pagina. Con una FOTOGRAFIA
   serve, altrimenti l'immagine sanguina nel testo.
   Misurato sui file: CUPRA, SEAT e Skoda sono ritagli (34-61% trasparente),
   i Lexus sono fotografie. Il tema dichiara quale dei due ha. */
.brandpage[data-modelli="ritagli"] .bp-model-media {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
/* Il nome del modello non in nero pieno: accanto a un'auto scontornata
   l'800 pesa piu' dell'auto. */
.brandpage[data-modelli="ritagli"] .bp-model h3 { font-weight: 600; }

.bp-model-media { position: relative; aspect-ratio: 16/10; border-radius: var(--radius-m); overflow: hidden; margin-bottom: 16px; background: radial-gradient(120% 120% at 70% 20%, rgba(255,255,255,.10), rgba(255,255,255,.02)); }
.bp-model-media .bp-model-img { position: absolute; inset: 8px; margin: 0; aspect-ratio: auto; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.bp-model:hover .bp-model-media .bp-model-img { transform: scale(1.06); }
.bp-model-media .bp-tag-new { position: absolute; top: 10px; left: 10px; margin: 0; }
.bp-model-body { padding: 0 6px; display: flex; flex-direction: column; flex: 1; }
.bp-model h3 { font-size: 21px; }
.bp-model-price { font-size: 24px; margin-top: 8px; }
.bp-model-cta { margin-top: auto; padding-top: 16px; }

/* Molla leggera sugli hover dei pulsanti brand */
.bp-btn-accent, .bp-btn-ghost { transition: transform .35s cubic-bezier(.16,1,.3,1), background .2s ease, color .2s ease, box-shadow .3s ease; }
.bp-btn-accent:hover { transform: translateY(-2px); }
.bp-btn-accent:active, .bp-btn-ghost:active { transform: translateY(0) scale(.98); }

@media (max-width: 640px) {
  .bp-section { padding: 60px 0; }
  .bp-why { padding: 60px 0; }
  .bp-sec-head { margin-bottom: 28px; }
  .bp-lineup { grid-template-columns: 1fr; }
}

/* ═══════════ NOVITÀ più evidente sulle card gamma dei brand (2026-07-18) ═══════════ */
/* Badge più marcato: più grande, spark ✦, ombra che lo stacca dalla foto */
.bp-tag-new { font-size: 12.5px; padding: 6px 14px; box-shadow: 0 6px 18px -4px rgba(0,0,0,.6); }
.bp-tag-new::before { content: "✦"; margin-right: 5px; font-size: 10px; }
.bp-model-media .bp-tag-new { top: 12px; left: 12px; }

/* Tutta la card del modello nuovo risalta: bordo + alone + sfondo nel colore del brand */
.bp-model--new {
  border-color: color-mix(in srgb, var(--bp-accent) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bp-accent) 12%, transparent), transparent 42%), rgba(255,255,255,0.05);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bp-accent) 42%, transparent), 0 22px 48px -26px color-mix(in srgb, var(--bp-accent) 60%, #000);
}
.bp-model--new:hover {
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 1px var(--bp-accent), 0 26px 54px -22px color-mix(in srgb, var(--bp-accent) 72%, #000);
}
/* la foto del modello nuovo su un pannello a tinta brand, per staccare ancora di più */
.bp-model--new .bp-model-media { background: radial-gradient(120% 120% at 70% 20%, color-mix(in srgb, var(--bp-accent) 22%, rgba(255,255,255,.10)), rgba(255,255,255,.02)); }

/* ═══ /USATO BROWSE 2.0 — toolbar sticky mobile, bottom-sheet filtri, chips, paginazione ═══ */

/* anchor sotto la nav sticky */
#usato-grid { scroll-margin-top: calc(var(--nav-height) + 12px); }

/* foto card come <img> vera (lazy nativo); lo span resta il fallback senza foto */
img.card-zoom { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ordinamento distinto dai filtri (sfondo paper, resta a destra) */
.uv-selects .uv-sort { background-color: var(--paper, #F5F6F8); }

/* toolbar sticky anche su desktop: la card filtri resta agganciata sotto la nav per tutto lo scroll */
.uv-toolbar { position: sticky; top: var(--nav-height); z-index: 60; }

/* bottone Filtri (solo mobile) */
.uv-filtri-btn { display: none; position: relative; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 16px; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink, #0D0F14); background: #fff; border: 1px solid var(--line, #e6e8ec); border-radius: var(--radius-m); cursor: pointer; transition: border-color .2s; }
.uv-filtri-btn:active { transform: scale(.98); }
.uv-filtri-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--blue, #0057D9); color: #fff; font-size: 12px; font-weight: 800; }

/* chip filtri attivi (rimovibili) */
.uv-active { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.uv-active-chip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 700; color: var(--blue, #0057D9); background: rgba(0, 87, 217, .07); border: 1px solid rgba(0, 87, 217, .25); border-radius: var(--radius-pill); padding: 7px 13px; min-height: 34px; cursor: pointer; transition: background .18s, border-color .18s; }
.uv-active-chip:hover { background: rgba(0, 87, 217, .12); border-color: var(--blue, #0057D9); }

/* "mostra altre" */
.uv-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 26px; }
.uv-more .btn-outline-dark { cursor: pointer; background: none; font: inherit; font-weight: 700; font-size: 14px; }
.uv-more-note { font-size: 12.5px; color: var(--muted, #6b7280); }

/* rendering: le card fuori viewport non si dipingono */
.uv-card { content-visibility: auto; contain-intrinsic-size: 320px 430px; }

/* focus visibile su tutti i controlli del browse */
.uv-search input:focus-visible, .uv-selects select:focus-visible, .uv-filtri-btn:focus-visible, .uv-active-chip:focus-visible, .uvf-chip:focus-visible, .uv-reset:focus-visible { outline: 2px solid var(--blue, #0057D9); outline-offset: 2px; }

/* ── bottom-sheet filtri (mobile) ── */
.uvf-overlay { position: fixed; inset: 0; z-index: 180; background: rgba(8, 10, 14, .55); display: flex; align-items: flex-end; animation: uvfFade .18s ease; }
.uvf-sheet { width: 100%; max-height: 84dvh; display: flex; flex-direction: column; background: #fff; border-radius: 20px 20px 0 0; animation: uvfUp .26s cubic-bezier(.16, 1, .3, 1); }
@keyframes uvfFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes uvfUp { from { transform: translateY(28px); opacity: .6 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .uvf-overlay, .uvf-sheet { animation: none; } }
.uvf-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--line, #e6e8ec); }
.uvf-head strong { font-family: var(--font-display); font-size: 17px; color: var(--ink, #0D0F14); }
.uvf-x { width: 40px; height: 40px; margin: -8px -10px -8px 0; border: none; background: none; font-size: 26px; line-height: 1; color: var(--muted, #6b7280); cursor: pointer; border-radius: var(--radius-m); }
.uvf-body { overflow-y: auto; padding: 6px 20px 12px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.uvf-group { border: none; margin: 0; padding: 14px 0 4px; }
.uvf-group + .uvf-group { border-top: 1px solid var(--line, #e6e8ec); }
.uvf-group legend { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6b7280); padding: 0 0 10px; }
.uvf-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; }
.uvf-chip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink, #0D0F14); background: #fff; border: 1px solid var(--line, #e6e8ec); border-radius: var(--radius-pill); padding: 9px 14px; min-height: 40px; cursor: pointer; transition: border-color .18s, background .18s, color .18s; }
.uvf-chip .uvf-n { font-size: 12px; font-weight: 700; color: var(--muted, #6b7280); }
.uvf-chip.is-on { background: var(--ink, #0D0F14); border-color: var(--ink, #0D0F14); color: #fff; }
.uvf-chip.is-on .uvf-n { color: rgba(255, 255, 255, .65); }
.uvf-chip:disabled { opacity: .38; cursor: default; }
.uvf-chip:active { transform: scale(.97); }
.uvf-foot { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line, #e6e8ec); background: #fff; }
.uvf-foot .btn-lime, .uvf-foot .btn-outline-dark { justify-content: center; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; min-height: 48px; }
.uvf-foot .btn-outline-dark:disabled { opacity: .4; cursor: default; }

/* ── responsive: desktop = select inline; mobile = ricerca + Filtri, sticky sotto la nav ── */
@media (max-width: 900px) {
  .uv-selects { display: none; }
  .uv-filtri-btn { display: inline-flex; flex: 0 0 auto; }
  .uv-toolbar { margin: 0 -4px; padding: 10px 4px; border: none; border-bottom: 1px solid var(--line, #e6e8ec); border-radius: 0; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); flex-wrap: nowrap; gap: 8px; }
  .uv-search { flex: 1 1 0; min-width: 0; }
  .uv-search input { font-size: 16px; } /* niente auto-zoom iOS al focus */
}
@media (min-width: 901px) {
  .uvf-overlay { display: none; } /* sheet solo mobile: su desktop i select bastano */
}

/* ── tag commerciale dal CMS ("Prenotata", "Offerta"…) ── */
/* card: secondo badge sotto quello di condizione */
.uv-badge-tag { top: 44px; }
.uv-badge-tag.is-lime { background: var(--lime, #D8FF45); color: var(--ink, #0D0F14); }
.uv-badge-tag.is-scuro { background: rgba(13, 15, 20, 0.82); color: #fff; }
/* scheda dettaglio: pill accanto al titolo */
.vd-tag { display: inline-block; margin: 6px 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); width: fit-content; }
.vd-tag.is-lime { background: var(--lime, #D8FF45); color: var(--ink, #0D0F14); }
.vd-tag.is-scuro { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); }

/* ── informativa finanziamento (obbligatoria sotto le rate pubblicizzate) ── */
/* La nota occupa tutta la larghezza del contenuto: il tetto a 90ch la faceva
   fermare a meta' pagina e sotto l'elenco auto sembrava un testo dimenticato. */
.fin-legal { margin-top: 18px; font-size: 12.5px; line-height: 1.55; color: var(--muted, #6b7280); }
.vd-side .fin-legal, .vd-pricecard + .fin-legal { margin-top: 12px; font-size: 12px; }
.section.is-dark .fin-legal, .bp-stock .fin-legal { color:rgba(var(--bp-ink-rgb,255,255,255),0.55); }

/* prove di fiducia dentro la price card (garanzia, km certificati, permuta) */
.vd-trust { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line, #E6E8EC); display: grid; gap: 8px; }
.vd-trust li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--text, #4A5160); }
.vd-trust svg { flex: none; margin-top: 2px; color: var(--blue, #0057D9); }

/* ═══ SCHEDA AUTO — la foto è la testata ═══
   L'auto occupa tutta la larghezza sotto la nav trasparente; nome, versione e
   dati chiave le stanno sopra, resi leggibili da una sfumatura scura che parte
   dal basso. Le foto in studio hanno il soggetto centrato: l'inquadratura resta
   piena e centrata, senza tagli furbi. */
.vd-hero {
  position: relative;
  margin-top: calc(-1 * var(--nav-height));
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  background: var(--ink, #0D0F14);
  overflow: hidden;
}
.vd-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
  background-color: var(--ink, #0D0F14);
}
/* La sfumatura sale dal basso e deve reggere anche le foto chiare: su un'auto
   bianca davanti a una parete bianca il titolo cadrebbe su fondo chiaro e
   sparirebbe. La metà alta della vettura resta comunque pulita. */
.vd-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13, 15, 20, 0.5) 0%, rgba(13, 15, 20, 0) 24%),
    linear-gradient(0deg, rgba(10, 12, 16, 0.96) 0%, rgba(10, 12, 16, 0.86) 22%, rgba(10, 12, 16, 0.5) 44%, rgba(13, 15, 20, 0) 72%);
}
.vd-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--nav-height) + var(--space-4));
  padding-bottom: var(--space-4);
  pointer-events: none; /* il clic passa alla foto, tranne sui link */
}
.vd-hero-inner a, .vd-hero-inner button { pointer-events: auto; }
/* le briciole cadono sulla parte alta della foto, dove lo scrim è più leggero:
   servono bianco pieno e un'ombra, o su una carrozzeria chiara spariscono */
.vd-hero-inner .mp-breadcrumb { color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
.vd-hero-inner .mp-breadcrumb a { color: rgba(255, 255, 255, 0.78); }
.vd-hero-inner .mp-breadcrumb a:hover { color: #fff; }
.vd-hero .mp-breadcrumb,
.vd-hero .mp-breadcrumb a { color: rgba(255, 255, 255, 0.62); }
.vd-hero .mp-breadcrumb a:hover { color: #fff; }
.vd-hero .vd-title h1 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.vd-hero .vd-title .brandline { color: var(--lime, #D8FF45); }
.vd-hero .vd-title .ver { color: rgba(255, 255, 255, 0.78); }
.vd-hero .vd-quickspecs { margin-top: 14px; }
.vd-hero .vd-quickspecs span {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.vd-hero-badge { position: absolute; top: calc(var(--nav-height) + 16px); right: 24px; z-index: 3; }
.vd-hero-zoom {
  /* sotto il badge della condizione: in fondo a destra finirebbe sotto le CTA */
  position: absolute; right: 24px; top: calc(var(--nav-height) + 68px); z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: rgba(13, 15, 20, 0.6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 12px; font-weight: 700;
  pointer-events: none;
}
/* striscia miniature sotto la hero */
.vd-thumbs-hero { display: flex; gap: 10px; overflow-x: auto; padding: 14px 0 2px; scrollbar-width: none; }
.vd-thumbs-hero::-webkit-scrollbar { display: none; }
.vd-thumbs-hero .vd-thumb {
  flex: 0 0 96px; height: 66px; border-radius: var(--radius-m);
  background-size: cover; background-position: center;
  border: 2px solid transparent; cursor: pointer; transition: border-color .18s var(--ease-out), transform .18s var(--ease-out);
}
.vd-thumbs-hero .vd-thumb:hover { transform: translateY(-2px); }
.vd-thumbs-hero .vd-thumb.is-active { border-color: var(--blue, #0057D9); }
/* senza la foto grande a sinistra la colonna dati parte più stretta */
.vd-wrap-hero { grid-template-columns: 1.5fr 1fr; }

@media (max-width: 900px) {
  .vd-hero { min-height: 88vh; min-height: 88dvh; }
  .vd-hero-photo { background-position: center 58%; }
  .vd-hero-badge { right: 16px; }
  .vd-hero-zoom { right: 16px; top: calc(var(--nav-height) + 58px); font-size: 11px; }
  .vd-thumbs-hero .vd-thumb { flex-basis: 78px; height: 54px; }
  .vd-wrap-hero { grid-template-columns: 1fr; }
}

/* due colonne sotto la hero: i dati a sinistra, il prezzo che segue lo scroll a destra */
.vd-maincol { min-width: 0; }
.vd-maincol .vd-section { margin-top: var(--space-5); }
/* la prima sezione attacca subito sotto le miniature: senza il vecchio blocco
   dei dati chiave, margine e filetto lasciavano una fascia vuota */
.vd-maincol > .vd-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.vd-wrap-hero .vd-side { position: sticky; top: calc(var(--nav-height) + 16px); }
/* il badge della condizione vive dentro la hero, non nella vecchia foto-card */
.vd-hero-badge { position: absolute; top: calc(var(--nav-height) + 18px); left: auto; right: 24px; z-index: 3; }
@media (max-width: 900px) {
  .vd-wrap-hero .vd-side { position: static; }
  .vd-maincol .vd-section { margin-top: var(--space-4); }
  .vd-hero-badge { right: 16px; top: calc(var(--nav-height) + 12px); }
}

/* Il badge condizione era stilato solo come figlio della vecchia foto-card:
   nella hero serve la sua regola completa. */
.vd-hero-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 6px 13px; border-radius: var(--radius-pill);
  background: rgba(13, 15, 20, .82); color: #fff;
}
.vd-hero-badge.km0 { background: var(--blue, #0057D9); }
.vd-hero-badge.nuovo { background: var(--lime, #D8FF45); color: var(--ink, #0D0F14); }
/* Le specifiche ora stanno in colonna: cinque celle fisse diventavano illeggibili */
/* celle abbastanza larghe da non spezzare «Immatricolazione» a metà parola */

/* prezzo e azione in fondo alla hero: la decisione si prende guardando l'auto */
.vd-hero-buy {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.vd-hero-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vd-hero-price strong {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.03em;
  color: #fff; line-height: 1;
}
.vd-hero-price s { color: rgba(255, 255, 255, 0.5); font-size: 17px; }
.vd-hero-rata { color: rgba(255, 255, 255, 0.8); font-size: 14.5px; }
.vd-hero-rata b { color: var(--lime, #D8FF45); font-weight: 800; }
.vd-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.vd-hero-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; min-height: 48px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 700;
  color: #fff; background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .18s var(--ease-out), transform .18s var(--ease-out);
}
.vd-hero-wa:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
@media (max-width: 720px) {
  .vd-hero-buy { flex-direction: column; align-items: stretch; gap: 14px; }
  .vd-hero-actions { flex-direction: column; }
  .vd-hero-actions .btn-lime, .vd-hero-wa { width: 100%; }
}

/* ── pagina non trovata ───────────────────────────────────────────────── */
.nf-wrap { max-width: 760px; padding-bottom: var(--space-6); }
.nf-code {
  display: inline-block; font-family: var(--font-display); font-size: 15px;
  font-weight: 800; letter-spacing: 0.12em; color: var(--blue);
  background: rgba(0, 87, 217, 0.08); border-radius: var(--radius-pill); padding: 6px 14px;
}
.nf-title { font-family: var(--font-display); font-size: clamp(30px, 5vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: var(--navy); margin: 18px 0 10px; }
.nf-lead { font-size: 16.5px; line-height: 1.65; color: var(--text-muted, #6B7280); max-width: 62ch; margin: 0 0 var(--space-5); }
.nf-vie { display: grid; gap: 12px; }
.nf-via {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--line, #E6E8EC); border-radius: var(--radius-m);
  padding: 16px 18px; background: var(--white);
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.nf-via strong { font-size: 16px; font-weight: 700; color: var(--navy); }
.nf-via span { font-size: 14px; color: var(--text-muted, #6B7280); }
.nf-via:hover { border-color: var(--blue); transform: translateY(-2px); }
.nf-aiuto { margin-top: var(--space-5); font-size: 15px; color: var(--text-muted, #6B7280); }
.nf-aiuto a { color: var(--blue); font-weight: 700; }
@media (min-width: 720px) { .nf-vie { grid-template-columns: repeat(3, 1fr); } }

/* ── vista mobile: respiro e leggibilita' ────────────────────────────────
   Tre fasce erano rimaste fuori dal ridimensionamento degli spazi (site.css:706)
   e da sole valevano circa 350px di scorrimento a vuoto. I testi sotto i 12px
   sono portati a una misura leggibile: su un telefono 10px non si leggono. */
@media (max-width: 640px) {
  .bw-block { padding: 40px 0 48px; margin: 24px 0; }
  .tradein-band { padding: 40px 0; margin: 24px 0; }
  .contact-bar { padding: 56px 0; }
  .contact-head { margin-bottom: 28px; }

  .story-date { font-size: 12px; }
  .story-card h4 { font-size: 15px; }
  .story-card .read { font-size: 12.5px; }
  .advisor-disclaimer { font-size: 12px; }
  .advisor-lead-priv { font-size: 12.5px; }
  .tradein-fields label { font-size: 12.5px; }
  .show-card-seg { font-size: 12px; }
  .advisor-v2 .eyebrow-sky, .eyebrow-sky { font-size: 12px; }
  /* nota legale delle promozioni: e' un'informativa, deve potersi leggere */
  .promo-legali p, .promo-legali { font-size: 12.5px; }
}

/* Servizi su mobile: cinque card a tutta pagina costavano circa 1.900px di
   scorrimento per un elenco. Restano card, ma compatte: icona e titolo sulla
   stessa riga, descrizione su due righe. */
@media (max-width: 640px) {
  .servizi-card { padding: 14px 16px; }
  .servizi-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; }
  .servizi-card h3 { font-size: 16px; }
  .servizi-grid { gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CAROSELLO MOBILE — .promo-track e .bw-track
   Una card per volta con l'accenno della successiva, aggancio netto a fine
   swipe, puntini sotto. Lo scorrimento resta nativo: l'inerzia la fa il
   browser, il JS legge soltanto la posizione per accendere il puntino giusto.
   Vale solo sotto i 640px: sopra, i due slider restano come sono.
   Geometria: bordo + card + spazio + accenno = larghezza dello schermo.
   ══════════════════════════════════════════════════════════════════════════ */
.acb-dots { display: none; }

@media (max-width: 640px) {
  .promo-track,
  .bw-block .bw-track {
    /* "mandatory" aggancia sempre: "proximity" era la causa delle fermate a meta' */
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-3);
    overscroll-behavior-x: contain;
    /* lo scorrimento programmato lo decide il JS, cosi' si puo' rispettare
       la preferenza di chi vuole meno animazioni */
    scroll-behavior: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .promo-track::-webkit-scrollbar,
  .bw-block .bw-track::-webkit-scrollbar { display: none; width: 0; height: 0; }

  /* promozioni: vanno a filo schermo, ma la prima card resta allineata al titolo */
  .promo-track {
    margin-inline: calc(-1 * var(--space-3));
    padding-inline: var(--space-3);
    gap: var(--acb-gap);
  }
  .promo-track > .promo-card {
    flex: 0 0 calc(100% + var(--space-3) - var(--acb-gap) - var(--acb-peek));
    scroll-snap-align: start;
    /* una card per swipe anche con lo slancio: senza, un colpo secco ne salta quattro */
    scroll-snap-stop: always;
  }
  /* quando c'e' una sola promo il blocco diventa griglia: niente filo schermo */
  .promo-slider--static .promo-track { margin-inline: 0; padding-inline: 0; }

  /* marchi: restano dentro il pannello scuro arrotondato, niente filo schermo */
  .bw-block .bw-track {
    grid-auto-columns: calc(100% + var(--space-3) - var(--acb-gap) - var(--acb-peek));
    gap: var(--acb-gap);
  }
  .bw-block .bw-track > .bw-tile {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* la sfumatura a destra copriva proprio l'accenno: con i puntini non serve piu' */
  .bw-block::after { content: none; }

  /* sui touch il :hover resta appiccicato dopo il tocco e sposta la card di
     qualche pixel, facendola ri-agganciare: si spegne dove non c'e' un mouse */
  @media (hover: none) {
    .promo-card:hover { transform: none; }
    .bw-tile:hover { transform: none; }
    .bw-tile:hover .bw-card-img { transform: none; }
  }

  /* puntini: stesso linguaggio dell'hero, pillola che si allarga quando e' attiva */
  .acb-dots:not([hidden]) {
    display: flex; justify-content: center; align-items: center;
    gap: 8px; margin-top: 14px;
  }
  .acb-dot {
    min-width: 30px; min-height: 38px;
    padding: 14px 10px;
    border: 0; border-radius: var(--radius-pill);
    background: var(--acb-dot);
    background-clip: content-box;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .25s var(--ease-out), min-width .25s var(--ease-out);
  }
  .acb-dot.is-active { background: var(--acb-dot-on); min-width: 46px; }
  .acb-dot:focus-visible { outline: 2px solid var(--acb-dot-on); outline-offset: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  /* l'aggancio resta: e' posizionamento, non animazione. Si toglie solo il moto. */
  .acb-dot { transition: none; }
}

/* auto non più disponibile: la pagina resta (i link e il posizionamento sono già
   stati guadagnati) ma dice la verità e offre una via d'uscita utile */
.vd-venduta { display: flex; flex-direction: column; gap: 16px; }
.vd-venduta-txt { display: flex; flex-direction: column; gap: 6px; }
.vd-venduta-txt strong { font-family: var(--font-display); font-size: clamp(21px, 4vw, 28px); font-weight: 800; color: #fff; }
.vd-venduta-txt span { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.78); max-width: 52ch; }

/* pagina promozioni senza offerte valide (fra la scadenza del mese e l'arrivo
   delle nuove): dice cosa sta succedendo e da' due strade utili */
.promo-vuoto { max-width: 660px; text-align: center; }
.promo-vuoto h2 { font-family: var(--font-display); font-size: clamp(24px, 4.5vw, 34px); font-weight: 800; color: var(--navy); letter-spacing: -0.01em; margin-bottom: 12px; }
.promo-vuoto > p { font-size: 16px; line-height: 1.65; color: var(--text-muted, #6B7280); margin: 0 auto var(--space-4); }
.promo-vuoto-vie { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.promo-vuoto-tel { margin-top: var(--space-4); font-size: 14.5px; color: var(--text-muted, #6B7280); }
.promo-vuoto-tel a { color: var(--blue); font-weight: 700; }
@media (max-width: 560px) { .promo-vuoto-vie { flex-direction: column; } .promo-vuoto-vie > a { width: 100%; } }

/* ══════════════════════════════════════════════════════════════════════════
   SCHEDA AUTO — le foto per intero, sotto la testata
   Da telefono nella testata il testo copre buona parte della vettura: le foto
   vere stanno qui, grandi, e si scorrono col dito con lo stesso gesto dei
   caroselli della home. La testata resta ferma sulla prima foto.
   Da computer questa sezione non serve: li' comandano le miniature.
   ══════════════════════════════════════════════════════════════════════════ */
.vd-foto { display: none; }

@media (max-width: 900px) {
  /* le miniature erano il modo per cambiare la foto della testata: da telefono
     quel compito passa alla sezione qui sotto */
  .vd-thumbs-hero { display: none; }

  .vd-foto { display: block; padding: var(--space-5) 0 var(--space-4); }
  .vd-foto-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
  .vd-foto-head h2 { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; }
  .vd-foto-head span { font-size: 13px; color: var(--text-muted, #6B7280); }

  .vd-foto-track {
    display: flex;
    gap: var(--acb-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-3);
    overscroll-behavior-x: contain;
    scroll-behavior: auto;
    margin-inline: calc(-1 * var(--space-3));
    padding-inline: var(--space-3);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .vd-foto-track::-webkit-scrollbar { display: none; width: 0; height: 0; }

  .vd-foto-slide {
    flex: 0 0 calc(100% + var(--space-3) - var(--acb-gap) - var(--acb-peek));
    scroll-snap-align: start;
    scroll-snap-stop: always;    /* uno swipe = una foto, anche con lo slancio */
    aspect-ratio: 4 / 3;
    border: 0; padding: 0; margin: 0;
    border-radius: var(--radius-m);
    overflow: hidden;
    background: #1F2630;
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
  }
  .vd-foto-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* la testata non cambia piu' foto da qui: la lente resta il modo per vederle
     grandi, ma il conteggio confonderebbe visto che sotto ci sono tutte */
  .vd-hero-zoom { font-size: 0; padding: 10px; }
  .vd-hero-zoom svg { width: 17px; height: 17px; }
}

/* elenchi lunghi (le foto di un'auto sono spesso venti e piu'): i pallini
   sfonderebbero lo schermo, quindi barra di avanzamento piu' contatore */
.acb-dots--conta:not([hidden]) { gap: 10px; }
.acb-barra { flex: 0 1 120px; height: 3px; border-radius: var(--radius-pill); background: var(--acb-dot); overflow: hidden; }
.acb-barra > i { display: block; height: 100%; width: 0; border-radius: var(--radius-pill); background: var(--acb-dot-on); transition: width .25s var(--ease-out); }
.acb-conta { font-size: 12.5px; font-weight: 700; color: var(--text-muted, #6B7280); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .acb-barra > i { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   ADVISOR — la card di un match
   Il numero sta sulla foto, grande, e cambia colore col livello: il "match"
   e' raro (11% dei casi) e quando arriva si deve vedere. Sotto, le ragioni:
   sono la parte che convince davvero, perche' un numero non si puo' verificare
   mentre "diesel, e tu fai 25.000 km l'anno" si'.
   ══════════════════════════════════════════════════════════════════════════ */
.advisor-res.lg { position: relative; overflow: hidden; }
.advisor-res .advisor-res-img { position: relative; }

.advisor-res-match {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: baseline; gap: 1px;
  padding: 6px 11px 5px; border-radius: var(--radius-pill);
  background: rgba(13, 15, 20, 0.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-family: var(--font-display); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.advisor-res-match b { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.advisor-res-match i { font-size: 12px; font-weight: 700; font-style: normal; opacity: 0.75; }

.advisor-res-liv {
  position: absolute; right: 10px; bottom: 12px; z-index: 2;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9); color: var(--navy);
}
/* il match vero si distingue: e' l'unico che accende il lime */
.advisor-res.liv-match .advisor-res-match { background: var(--lime); color: var(--navy); }
.advisor-res.liv-match .advisor-res-liv { background: var(--navy); color: var(--lime); }
.advisor-res.liv-match { outline: 2px solid var(--lime); outline-offset: -2px; }

.advisor-motivi { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 5px; }
.advisor-mot {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; line-height: 1.4; color: var(--text, #0D0F14);
}
.advisor-mot svg { flex: 0 0 auto; margin-top: 2px; color: #1d9a5a; }
/* una mancanza si dice, ma non si urla: grigio, non rosso */
.advisor-mot.no { color: var(--text-muted, #6B7280); }
.advisor-mot.no svg { color: #9aa1ab; }

@media (max-width: 640px) {
  .advisor-mot { font-size: 13px; }
  .advisor-res-match b { font-size: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ADVISOR — carta chiara, riquadri neri
   Prima era tutta la fascia a essere nera: troppo, e la pagina si spezzava in
   due. Il peso lo portano i due riquadri, pieni e scuri, che si staccano dalla
   carta come fa la card dentro la fascia permuta. Sul nero dei riquadri le foto
   delle auto risaltano, ed e' quello che deve emozionare.
   ══════════════════════════════════════════════════════════════════════════ */
.advisor-v2 {
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.advisor-v2 > .container { position: relative; z-index: 1; }

.advisor-v2 .advisor-v2-card {
  background: var(--ink, #0D0F14);
  color: #fff;
  border: 0;
  border-radius: var(--radius-l);
  /* !important perche' una regola generale piu' in alto azzera l'ombra su tutte
     le card del sito: li' e' giusto (card chiare su carta chiara), qui no, il
     riquadro nero deve staccarsi dalla pagina. */
  box-shadow: 0 24px 60px -28px rgba(13, 15, 20, 0.55) !important;
  position: relative;
  overflow: hidden;
}
/* niente sobbalzo al passaggio del mouse: dentro c'e' un modulo da compilare */
.advisor-v2 .advisor-v2-card:hover { transform: none; border-color: transparent; }
/* un alone lime dentro il riquadro delle domande: profondita' senza texture */
.advisor-v2 .advisor-v2-card::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 60% at 18% 0%, rgba(216, 255, 69, 0.10), transparent 62%);
}
.advisor-v2 .advisor-v2-card > * { position: relative; z-index: 1; }
.advisor-v2 .advisor-main-head h3 {
  color: #fff;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.advisor-v2 .advisor-main-head .lede,
.advisor-v2 .time-info { color: rgba(255, 255, 255, 0.68); }
.advisor-v2 .eyebrow-sky { color: var(--lime, #D8FF45); }
.advisor-v2 .advisor-q {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(19px, 3.4vw, 24px);
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* le risposte: grandi, e quando le scegli si accendono davvero */
.advisor-v2 .advisor-opt {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  min-height: 62px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: var(--radius-m);
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.advisor-v2 .advisor-opt:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.3); }
.advisor-v2 .advisor-opt:active { transform: scale(0.985); }
.advisor-v2 .advisor-opt.selected {
  background: var(--lime, #D8FF45);
  border-color: var(--lime, #D8FF45);
  color: var(--ink, #0D0F14);
  font-weight: 800;
}
.advisor-v2 .advisor-tab { color: rgba(255, 255, 255, 0.5); }
.advisor-v2 .advisor-tab.active { color: var(--lime, #D8FF45); }
/* «Avanti» nasceva come link di testo: dandogli solo il fondo lime era diventato
   un rettangolo che stringeva le parole contro i bordi. Se fa il bottone, ne
   prende anche la forma — pillola, come tutti gli altri bottoni del sito. */
.advisor-v2 .advisor-next {
  color: var(--ink, #0D0F14); background: var(--lime, #D8FF45);
  padding: 0 26px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 800; letter-spacing: -0.01em;
  transition: filter .2s var(--ease-out), transform .15s var(--ease-out);
}
.advisor-v2 .advisor-next:hover { filter: brightness(1.06); }
.advisor-v2 .advisor-next:active { transform: scale(0.985); }

/* la colonna dei risultati */
.advisor-v2 .advisor-side-t {
  color: #fff; font-family: var(--font-display); font-weight: 800;
  font-size: 17px; line-height: 1.25; letter-spacing: -0.01em;
}
.advisor-v2 .advisor-side-hint { color: rgba(255, 255, 255, 0.55); }
.advisor-v2 .advisor-why-list li strong { color: #fff; }
.advisor-v2 .advisor-why-list li span { color: rgba(255, 255, 255, 0.66); }
.advisor-v2 .advisor-why-stat { color: rgba(255, 255, 255, 0.5); border-top-color: rgba(255, 255, 255, 0.12); }

/* le card auto: bianche piene sul nero, cosi' la foto è la cosa che si vede */
.advisor-v2 .advisor-res.lg {
  background: #fff;
  border: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
}
.advisor-v2 .advisor-res-title { color: var(--navy); }
.advisor-v2 .advisor-mot { color: #2b3038; }

/* il momento del match: l'unica card che si prende il bordo lime e si stacca */
.advisor-v2 .advisor-res.liv-match {
  outline: 3px solid var(--lime, #D8FF45);
  outline-offset: 0;
  box-shadow: 0 18px 44px -18px rgba(216, 255, 69, 0.55);
}

/* il modulo per lasciare i dati, dentro la fascia scura */
.advisor-v2 .advisor-lead input,
.advisor-v2 .advisor-lead select {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.advisor-v2 .advisor-lead input::placeholder { color: rgba(255, 255, 255, 0.45); }
.advisor-v2 .advisor-lead-priv,
.advisor-v2 .advisor-disclaimer { color: rgba(255, 255, 255, 0.5); }
.advisor-v2 .form-consent { color: rgba(255, 255, 255, 0.62); }
.advisor-v2 .form-consent a { color: var(--lime, #D8FF45); }
/* su fondo notturno il quadratino blu sparisce: qui la spunta è lime */
.advisor-v2 .advisor-lead-priv input[type="checkbox"],
.advisor-v2 .form-consent input[type="checkbox"] { accent-color: var(--lime, #D8FF45); }

@media (max-width: 640px) {
  .advisor-v2 .advisor-opt { min-height: 66px; font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRENOTAZIONE OFFICINA ONLINE (Service Booking)
   Un riquadro scuro sulla carta chiara: e' un'azione, non un contenuto da
   leggere. I marchi sono pulsanti larghi — su un telefono ci si tocca sopra
   con il pollice, e il logo dice piu' del nome.
   ══════════════════════════════════════════════════════════════════════════ */
.sbo { padding: var(--space-5) 0; background: var(--paper); }
.sbo-card {
  background: var(--ink, #0D0F14); color: #fff;
  border-radius: var(--radius-l); padding: clamp(22px, 3.4vw, 38px);
  box-shadow: 0 24px 60px -28px rgba(13, 15, 20, 0.55);
}
.sbo-head { max-width: 620px; }
.sbo-head h2 {
  font-family: var(--font-display); font-weight: 800; color: #fff;
  font-size: clamp(24px, 3.6vw, 34px); line-height: 1.05; letter-spacing: -0.022em;
  margin: 6px 0 8px;
}
.sbo-lede { color: rgba(255, 255, 255, 0.7); font-size: 15px; line-height: 1.5; margin: 0; }

.sbo-grid {
  list-style: none; margin: clamp(18px, 2.6vw, 26px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px;
}
.sbo-brand {
  display: flex; align-items: center; gap: 12px;
  min-height: 66px; padding: 12px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-m); color: #fff; text-decoration: none;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.sbo-brand:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--lime, #D8FF45); }
.sbo-brand:active { transform: scale(0.99); }
.sbo-brand img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.sbo-brand-ini {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-s);
  display: grid; place-items: center; font-weight: 800;
  background: rgba(255, 255, 255, 0.1);
}
.sbo-brand-n { font-weight: 700; font-size: 15px; line-height: 1.2; }
.sbo-brand-go { margin-left: auto; color: var(--lime, #D8FF45); display: flex; }

.sbo-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin-top: 18px; font-size: 14px;
}
/* min-height: e' un'azione, non una nota a pie' di pagina: si deve poter toccare */
.sbo-alt { color: var(--lime, #D8FF45); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.sbo-alt:hover { text-decoration: underline; }
.sbo-tel { color: rgba(255, 255, 255, 0.62); }
.sbo-tel a { color: #fff; font-weight: 700; text-decoration: none; }
.sbo-nota { margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--on-dark-soft); }

/* la nota sotto il pulsante nelle pagine marchio */
.bp-svc-nota { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.bp-svc-cta .bp-btn-accent svg { margin-left: 6px; }

@media (max-width: 560px) {
  .sbo-grid { grid-template-columns: 1fr; }
  .sbo-card { padding: 20px 18px; border-radius: var(--radius-l); }
}

/* ══════════════════════════════════════════════════════════════════════════
   ADVISOR — il momento del risultato
   ══════════════════════════════════════════════════════════════════════════
   Prima: tre riquadri gemelli con una foto di 90x60 px sopra cui stava un
   cartellino di testo che la copriva tutta. Tre cartelli bianchi identici, e
   la percentuale — la sola cosa che l'Advisor produce — non si vedeva.

   Ora: al passo 4 la sezione va a colonna unica (via il buco di 350 px dove
   c'erano le domande), sale una lastra nera a tutta larghezza con l'auto piu'
   vicina, e sotto le altre due, dichiaratamente minori. La scelta e' gia'
   fatta: tre card uguali costringono a confrontare, una card grande fa
   riconoscere.

   Regole di casa rispettate: nessuna ombra (la profondita' e' contrasto di
   valore, nero su carta), raggio 16, e il lime resta raro — lo prende il
   pulsante della prima auto e il numero solo quando e' davvero un match.
   ══════════════════════════════════════════════════════════════════════════ */

.advisor-v2 .advisor-v2-grid.is-esito { grid-template-columns: minmax(0, 1fr); gap: 26px; }

/* il contenitore dei risultati smette di essere una card: una lastra nera
   dentro un'altra lastra nera sarebbe una scatola dentro una scatola */
.advisor-v2 .advisor-v2-card.is-results {
  background: transparent; color: inherit; padding: 0;
  border: 0; border-radius: 0; box-shadow: none !important; overflow: visible;
}
.advisor-v2 .advisor-v2-card.is-results::before { display: none; }
.advisor-v2 .advisor-v2-card.is-results:hover { transform: none; }

.advisor-v2 .is-results .advisor-side-t {
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-size: clamp(21px, 2.9vw, 31px); line-height: 1.06; letter-spacing: -0.026em;
  max-width: 26ch; margin: 0 0 clamp(16px, 2vw, 22px);
}
.advisor-v2 .is-results .advisor-side-hint {
  color: var(--muted); font-size: 13.5px; margin: 14px 0 0;
}

.advisor-v2 .advisor-side-list { display: grid; gap: 14px; }

/* ── la lastra ─────────────────────────────────────────────────────────── */
.advisor-v2 .advisor-res {
  display: block; padding: 0; gap: 0;
  background: var(--ink, #0D0F14); color: #fff;
  border: 0; border-radius: var(--radius-l); overflow: hidden;
  transition: transform .25s var(--ease-out);
}
.advisor-v2 .advisor-res:hover { transform: translateY(-3px); border-color: transparent; }

/* la foto: 1600x1200 con cornice grigia, logo in alto e indirizzo in basso
   stampati sopra. Ingrandita al 130% e centrata al 62% dell'altezza, la
   finestra cade dentro il pannello utile: si vede l'auto, non la cornice. */
.advisor-res-shot {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 16 / 10; background: #EDEEF1;
}
.advisor-res-photo {
  position: absolute; inset: 0;
  background-position: 50% 62%; background-size: 130% auto; background-repeat: no-repeat;
  transition: transform .5s var(--ease-out);
}
.advisor-res:hover .advisor-res-photo { transform: scale(1.03); }
.advisor-v2 .advisor-res-new {
  position: absolute; top: 12px; left: 12px; margin: 0;
  background: var(--blue); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--radius-s);
}

.advisor-v2 .advisor-res-body { padding: 20px; min-width: 0; }

/* ── il numero ─────────────────────────────────────────────────────────── */
.advisor-res-score { display: flex; align-items: baseline; gap: 3px; margin: 0 0 10px; }
.advisor-num {
  font-family: var(--font-display); font-weight: 900;
  font-variant-numeric: tabular-nums; font-size: clamp(38px, 4.6vw, 52px);
  line-height: .82; letter-spacing: -.045em; color: #fff;
  min-width: 2.1ch; /* la cifra non fa ballare la riga mentre sale da 0 */
}
.advisor-res-score i {
  font-style: normal; font-size: 17px; font-weight: 800;
  color: rgba(255, 255, 255, .55); letter-spacing: -.02em;
}
.advisor-res-score em {
  font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: 0;
  color: rgba(255, 255, 255, .6); margin-left: 10px; align-self: center;
}

/* il match vero e' raro: e' l'unico che si prende il lime e il filo intorno */
.advisor-v2 .advisor-res.liv-match {
  outline: 2px solid var(--lime, #D8FF45); outline-offset: 0;
  box-shadow: none !important;
}
.advisor-v2 .advisor-res.liv-match .advisor-num,
.advisor-v2 .advisor-res.liv-match .advisor-res-score i,
.advisor-v2 .advisor-res.liv-match .advisor-res-score em { color: var(--lime, #D8FF45); }

.advisor-v2 .advisor-res-title {
  font-family: var(--font-display); font-weight: 800; color: #fff;
  font-size: clamp(18px, 2vw, 22px); line-height: 1.1; letter-spacing: -.022em;
  margin: 0 0 3px;
}
.advisor-v2 .advisor-res-title a { color: inherit; text-decoration: none; }
.advisor-v2 .advisor-res-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.advisor-v2 .advisor-res-meta {
  color: rgba(255, 255, 255, .58); font-size: 13px; margin: 0 0 14px;
  white-space: normal; overflow: visible;
}

.advisor-v2 .advisor-motivi { margin: 0; display: grid; gap: 7px; }
.advisor-v2 .advisor-mot {
  color: rgba(255, 255, 255, .84); font-size: 13.5px; line-height: 1.45;
  display: flex; gap: 8px; align-items: flex-start;
}
.advisor-v2 .advisor-mot svg { color: #7FD1A0; margin-top: 2px; }
.advisor-v2 .advisor-mot.no { color: rgba(255, 255, 255, .45); }
.advisor-v2 .advisor-mot.no svg { color: rgba(255, 255, 255, .35); }

.advisor-v2 .advisor-res-price {
  font-size: 16px; font-weight: 800; color: #fff; margin: 16px 0 0;
  letter-spacing: -.01em;
}

.advisor-res-go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  min-height: 44px; font-size: 14px; font-weight: 800; text-decoration: none;
  color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .3);
  transition: border-color .2s var(--ease-out);
}
.advisor-res-go:hover { border-color: #fff; }
/* il lime va all'azione principale, una sola per schermata */
.advisor-res.is-primo .advisor-res-go {
  background: var(--lime, #D8FF45); color: var(--ink, #0D0F14);
  padding: 0 22px; border-radius: var(--radius-pill); border-bottom: 0;
}
.advisor-res.is-primo .advisor-res-go:hover { filter: brightness(1.05); }

/* ── la prima auto, da computer: foto a sinistra, verdetto a destra ────── */
@media (min-width: 900px) {
  .advisor-v2 .is-results .advisor-side-list { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .advisor-v2 .advisor-res.is-primo { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; }
  .advisor-v2 .advisor-res.is-primo .advisor-res-shot { aspect-ratio: auto; height: 100%; min-height: 340px; }
  .advisor-v2 .advisor-res.is-primo .advisor-res-body {
    padding: clamp(24px, 2.4vw, 36px); display: flex; flex-direction: column; justify-content: center;
  }
  .advisor-v2 .advisor-res.is-primo .advisor-num { font-size: clamp(56px, 5.6vw, 76px); }
  .advisor-v2 .advisor-res.is-primo .advisor-res-score i { font-size: 24px; }
  .advisor-v2 .advisor-res.is-primo .advisor-res-title { font-size: clamp(24px, 2.6vw, 32px); }
  .advisor-v2 .advisor-res.is-primo .advisor-res-price { font-size: 19px; }
}

/* ── entrata: una dopo l'altra, la prima per prima ────────────────────── */
@keyframes adv-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.advisor-v2 .is-results .advisor-res:not(.is-skel) { animation: adv-entra .5s var(--ease-out) both; }
.advisor-v2 .is-results .advisor-res:not(.is-skel):nth-child(2) { animation-delay: .09s; }
.advisor-v2 .is-results .advisor-res:not(.is-skel):nth-child(3) { animation-delay: .18s; }

/* ── attesa ───────────────────────────────────────────────────────────── */
.advisor-v2 .advisor-res.is-skel {
  background: linear-gradient(90deg, #E9EBEF, #F4F5F7, #E9EBEF);
  background-size: 200% 100%; animation: adv-shimmer 1.2s infinite linear;
  outline: 0;
}
.advisor-v2 .advisor-res.is-skel.is-primo { min-height: 300px; }
.advisor-v2 .advisor-res.is-skel.is-alt { min-height: 200px; }

@media (prefers-reduced-motion: reduce) {
  .advisor-v2 .is-results .advisor-res:not(.is-skel) { animation: none; }
  .advisor-res-photo, .advisor-v2 .advisor-res { transition: none; }
}

/* La dicitura IVA accanto al prezzo del modello. Sta sulla stessa riga ma in
   corpo piccolo e in tondo: e' una condizione del prezzo, non un secondo
   prezzo. Sui veicoli commerciali cambia il senso della cifra di un quinto,
   quindi non puo' stare in una nota a fondo pagina. */
.bp-model-iva {
  display: inline-block; margin-left: 8px;
  font-family: var(--font-sans, inherit); font-size: 12px; font-weight: 600;
  letter-spacing: 0; color:rgba(var(--bp-ink-rgb,255,255,255),.58); white-space: nowrap;
  vertical-align: middle;
}

/* Il riepilogo delle risposte in cima al risultato: dichiara cosa abbiamo
   capito e permette di cambiare una sola risposta senza rifare il giro. */
.advisor-scelte {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 clamp(14px, 1.8vw, 20px);
}
.advisor-scelte-t {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-right: 2px;
}
.advisor-scelta {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--border);
  font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.advisor-scelta:hover { border-color: var(--blue); color: var(--blue); }
.advisor-scelta svg { color: var(--muted); flex: none; }
.advisor-scelta:hover svg { color: var(--blue); }
.advisor-rifai {
  min-height: 40px; padding: 0 6px; background: none; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.advisor-rifai:hover { color: var(--ink); }
@media (max-width: 520px) {
  .advisor-scelte-t { width: 100%; margin-bottom: -2px; }
}

/* ── Advisor, passo 4: cosa resta in pagina ────────────────────────────────
   Arrivati al risultato, la testata ("Qual e' l'auto giusta per te?", "rispondi
   a 3 domande", "bastano 45 secondi") ha finito il suo lavoro: spiegava un
   gioco che ormai e' stato giocato. Anche i passi numerati escono di scena —
   il riepilogo cliccabile sopra i risultati dice dove sei e ti riporta indietro
   meglio di loro. Resta il modulo, che e' l'unica cosa ancora da fare. */
.advisor-v2-grid.is-esito .advisor-main-head,
.advisor-v2-grid.is-esito .advisor-tabs { display: none; }
.advisor-v2-grid.is-esito .advisor-lead { margin-top: 0; padding-top: 0; border-top: 0; }

/* Il titolo del modulo e il pulsante erano in --navy: su fondo nero il titolo
   spariva del tutto e il pulsante sembrava una scritta senza bottone. */
.advisor-v2 .advisor-lead-t {
  font-family: var(--font-display); font-weight: 800; color: #fff;
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.12; letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.advisor-v2 .advisor-lead button {
  background: var(--lime, #D8FF45); color: var(--ink, #0D0F14);
  min-height: 52px; padding: 0 26px; font-size: 15px; font-weight: 800;
  align-self: flex-start;
}
.advisor-v2 .advisor-lead button:disabled { opacity: .55; }

/* ── Le due alternative: stessa altezza, pulsanti in riga ──────────────────
   Le schede hanno testi di lunghezza diversa e finivano sfalsate, con i due
   "Vedi la scheda" ad altezze diverse. Si stirano alla riga e il pulsante
   scende in fondo: il confronto si fa sui contenuti, non sugli avanzi. */
/* Il pareggio serve SOLO dove le due schede stanno una accanto all'altra. Da
   telefono sono impilate, e li' il flex in colonna schiacciava a zero il
   riquadro della foto (vive di aspect-ratio, che dentro una colonna flex non
   ha piu' niente su cui calcolarsi): l'auto spariva. */
@media (min-width: 900px) {
  /* Griglia e non flex: dentro una colonna flex il riquadro della foto viene
     stirato in larghezza senza che quella larghezza sia mai "definita", e
     aspect-ratio non ha su cosa calcolarsi — risultato, altezza zero e auto
     invisibile. In griglia la traccia da' la larghezza e il conto torna. */
  .advisor-v2 .advisor-res.is-alt { display: grid; grid-template-rows: auto 1fr; height: 100%; }
  .advisor-v2 .advisor-res.is-alt .advisor-res-body { display: flex; flex-direction: column; }
  .advisor-v2 .advisor-res.is-alt .advisor-res-go { margin-top: auto; align-self: flex-start; }
  .advisor-v2 .advisor-res.is-alt .advisor-res-price { margin-bottom: 14px; }
}

/* «Rata su misura» al posto della cifra. Stesso spazio della rata calcolata, così
   le card restano allineate, ma in blu-brand invece che in grigio: è un invito,
   non un dato di servizio. */
.uv-rate-invito { color: var(--blue); }
.uv-rate-invito b { font-weight: 800; }

/* ── Promo: due formati per la foto ───────────────────────────────────────────
   PANORAMICA (default, quella di sempre): riquadro basso e largo, taglio
   centrato. Va bene per un'auto o un ambiente, dove tagliare i bordi non toglie
   niente.
   PRODOTTO: per ricambi, pneumatici, accessori. Un pneumatico è tondo e un
   accessorio è verticale: ritagliati in una fascia 2,5:1 si vedono a metà. Qui
   il riquadro è più alto e l'immagine entra TUTTA (contain) su fondo neutro,
   come si fa nelle schede prodotto. Resta dello spazio ai lati, ed è giusto:
   meglio un oggetto intero con margine che mezzo oggetto a tutta larghezza. */
.promo-media--prodotto {
  height: 190px;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #F5F6F8;
}
.promo-card.is-featured .promo-media--prodotto { background-color: rgba(255, 255, 255, 0.06); }

/* Video della promo: quadrato come i formati social, così quello che si gira
   per Instagram si riusa qui senza rifare il montaggio. */
.promo-media--video { height: auto; aspect-ratio: 1 / 1; overflow: hidden; background: #EDEEF1; }
.promo-media--video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* con il movimento ridotto il video non parte da solo: resta il primo fotogramma */
@media (prefers-reduced-motion: reduce) { .promo-media--video video { animation: none; } }

/* I dettagli del noleggio sotto la cifra grande: canone, durata, anticipo e
   chilometri sono quattro numeri che si leggono insieme o non dicono niente. */
.promo-nlt { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; margin: 10px 0 0; font-size: 12.5px; }
.promo-nlt div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted var(--border); padding-bottom: 3px; }
.promo-nlt dt, .promo-nlt .k { color: var(--muted); }
.promo-nlt dd, .promo-nlt .v { margin: 0; font-weight: 700; color: var(--ink); }
.promo-card.is-featured .promo-nlt .k { color: rgba(255,255,255,.6); }
.promo-card.is-featured .promo-nlt .v { color: #fff; }
.promo-card.is-featured .promo-nlt div { border-bottom-color: rgba(255,255,255,.16); }
.promo-nlt-servizi { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.promo-card.is-featured .promo-nlt-servizi { color: rgba(255,255,255,.7); }

/* ── /promozioni: pastiglie filtro (marchio + reparto) ──────────────────────
   Stesso linguaggio della /usato (.uvf-group / .uvf-chip): qui pero' le pastiglie
   stanno in pagina e non dentro il pannello a scomparsa, quindi si serve loro il
   fondo bianco che li' arrivava dalla scheda. */
.promo-filtri { background: #fff; border: 1px solid var(--line, #e6e8ec); border-radius: var(--radius-l); padding: 2px 18px 8px; }
.promo-filtri-sec { padding: var(--space-4) 0 0; }
/* si tocca col pollice, non col mouse: nel pannello /usato 40px bastavano, in
   pagina fra due dita di pagina che scorre no */
.promo-filtri .uvf-chip { min-height: 44px; }
@media (max-width: 560px) { .promo-filtri { padding: 2px 14px 8px; } }

/* Foto quadrata: il formato dei post social, riusato senza rifare il taglio.
   Il riquadro segue l'immagine invece di imporle una fascia, così quello che
   si vede è la composizione originale. */
.promo-media--quadrata { height: auto; aspect-ratio: 1 / 1; background-size: cover; }

/* ═══════════════════════════════════════════════════════════════════════
   STRUTTURE CONDIVISE — aggiunte per il tenant Amicar
   Tutto quello che segue è INERTE senza i token del tema: i valori arrivano
   da themes/<slug>.css e, se mancano, gli pseudo-elementi non nascono e i
   componenti non sono agganciati da nessun markup. Barletta non cambia.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Il tratto fra una fascia e l'altra ──
   Si accende con `content`, non con le misure: senza tema `content: none` non
   crea proprio lo pseudo-elemento. Non è pignoleria — con `content:""`
   l'elemento nascerebbe comunque e dentro un flex si mangerebbe il `gap`
   (misurato: 28px di scarto su un occhiello). */
.section + .section, .perche, .stories, .section.reviews, .voce { position: relative; }
.section + .section::before,
.perche::before, .stories::before, .section.reviews::before, .voce::before {
  content: var(--linea-on, none);
  position: absolute;
  top: calc(-1 * var(--space-4));
  left: max(var(--space-3), calc((100% - var(--container)) / 2 + var(--space-3)));
  width: var(--linea, 0);
  height: calc(var(--space-4) * 2);
  background: linear-gradient(180deg, transparent, var(--linea-col, transparent) 45%, var(--linea-col, transparent) 55%, transparent);
  opacity: .55;
  pointer-events: none;
  z-index: 1;
}

/* ── Seconda misura ──
   Il formato per quando la concessionaria parla invece di elencare. Il valore
   sta nel tema; qui c'è solo il ripiego, così un tema che non lo dichiara
   ottiene il contenitore normale invece di una colonna larga zero. */
.container-tight {
  max-width: var(--container-tight, var(--container));
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* ── Fascia "voce" ──
   Una dichiarazione sola, sulla misura strizzata, su fondo scuro. Parte dal
   bordo sinistro del contenitore e non centrata: è la stessa spina su cui
   cade il tratto qui sopra, e il vuoto che resta a destra è voluto. */
.voce { background: var(--ink); color: var(--on-dark); padding: var(--space-7) 0; }
.voce-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-3); }
.voce .section-eyebrow { color: var(--accent); }
.voce .section-eyebrow, .voce .claim, .voce .voce-sub { max-width: var(--container-tight, 720px); }
.voce .claim {
  font-family: var(--font-display);
  font-size: clamp(27px, 4vw, 44px);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.02em;
  margin-top: 18px; text-wrap: balance;
}
.voce .claim em { font-style: normal; color: var(--accent); }
.voce .voce-sub { margin-top: 22px; font-size: 17px; line-height: 1.6; color: var(--on-dark-muted); }

/* ── Persone ──
   La squadra della concessionaria: è la cosa che i marchi non possono dare.
   Senza foto resta il segnaposto dichiarato, mai una faccia inventata. */
.persone-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
.persone-grid.is-compatta { grid-template-columns: repeat(4, 1fr); }
.persona { margin: 0; }
.persona-foto {
  position: relative; aspect-ratio: var(--persona-ratio, 4/5);
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius-m); overflow: hidden;
}
.persona-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.persona-attesa {
  position: absolute; left: 8px; bottom: 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255,255,255,.86); color: var(--muted);
  padding: 3px 7px; border-radius: var(--radius-s);
}
.persona figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.persona-ruolo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.persona-nome { font-size: 15px; font-weight: 700; color: var(--navy); }
.persona-contatti { display: flex; flex-direction: column; font-size: 12.5px; color: var(--muted); }
.persona-contatti a { color: inherit; }
.is-dark .persona-nome, .contact-bar .persona-nome, .stories .persona-nome { color: var(--on-dark); }
.is-dark .persona-attesa { background: rgba(26,32,34,.86); color: var(--on-dark-soft); }

@media (max-width: 1024px) { .persone-grid, .persone-grid.is-compatta { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .persone-grid, .persone-grid.is-compatta { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } }

/* ── LISTA AUTO SU TELEFONO: card compatta orizzontale ──────────────────────
   La card verticale era alta ~500px: una e mezza per schermata, e 70 auto
   diventavano una maratona di pollice. Sotto i 640px la card si sdraia —
   foto a sinistra, dati a destra, come i grandi marketplace dell'auto: ~4
   auto per schermata, si scorre confrontando. Restano le informazioni che
   decidono il tap (modello, anno, km, prezzo, rata); versione e pulsante
   escono: la card intera è già il link. Il percorso «guidato» è l'Advisor. */
@media (max-width: 640px) {
  .uv-grid { gap: 10px; }
  .uv-card { flex-direction: row; align-items: stretch; contain-intrinsic-size: 340px 134px; }
  /* l'ottimizzazione di resa dichiarava la card alta 430px (misura della
     verticale): il browser le bloccava tutte a quell'altezza fantasma */
  .uv-photo { flex: 0 0 41%; aspect-ratio: auto; min-height: 122px; }
  .uv-photo .card-zoom { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .uv-body { padding: 10px 12px 12px; gap: 3px; min-width: 0; justify-content: center; }
  .uv-body h3 { font-size: 16px; }
  .uv-body .ver { display: none; }
  .uv-specs { gap: 6px; margin: 2px 0 0; }
  .uv-specs span { font-size: 12px; }
  .uv-specs span:nth-child(n + 3) { display: none; } /* restano anno e km */
  .uv-price .now { font-size: 17.5px; }
  .uv-rate { font-size: 11.5px; }
  .uv-card .uv-cta { display: none; } /* il selettore corto perdeva contro .uv-card .uv-cta */
  .uv-badge { font-size: 9.5px; padding: 3px 7px; }
}

/* ── VETRINA DELLA HOME SU TELEFONO: stessa card compatta dell'elenco ───────
   Stessa medicina di /usato: la card verticale (foto 4/3 + corpo) superava i
   400px e la vetrina da 9 auto era una pagina intera di scroll. Foto a
   sinistra, dati a destra; via la versione, resta ciò che decide il tap.
   In coda al foglio DI PROPOSITO: le varianti responsive di un componente
   devono venire dopo l'ultima sua regola base, o i pareggi di specificità
   li vince la regola sbagliata. */
@media (max-width: 640px) {
  .show-grid { gap: 10px; }
  .show-card { flex-direction: row; align-items: stretch; }
  .show-card-media { flex: 0 0 41%; aspect-ratio: auto; min-height: 122px; }
  .show-card-body { padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
  .show-card-body h3 { font-size: 16px; }
  .show-card-ver { display: none; }
  .show-card-meta { font-size: 12px; margin: 0; }
  .show-card-price strong { font-size: 17.5px; }
  .show-card-price .rata { font-size: 11.5px; }
  .show-card-go { display: none; }
  .show-card-badge, .show-card-feat { font-size: 9.5px; padding: 3px 7px; }
}

/* ── Cofinanziamento pubblico (piè di pagina) ──
   Fascia chiara in fondo al footer scuro. Compare solo se la concessionaria
   ha i due campi valorizzati (tema.cofinanziamento_testo / _loghi): senza,
   il componente non rende nulla. Piu' grande di quanto chiederebbe il
   disegno, perche' e' una dichiarazione obbligatoria e l'emblema dev'essere
   leggibile, non un francobollo. */
.footer-cofin {
  margin-top: var(--space-4);
  padding: 18px var(--space-3);
  background: var(--white);
  border-radius: var(--radius-m);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.footer-cofin p {
  margin: 0; flex: 1 1 300px; min-width: 0;
  font-size: 12px; line-height: 1.5; color: var(--muted);
  max-width: 62ch; text-wrap: pretty;
}
.footer-cofin img { flex: 0 1 auto; width: 100%; max-width: 520px; height: auto; display: block; }
@media (max-width: 640px) {
  .footer-cofin { flex-direction: column; align-items: flex-start; }
  .footer-cofin img { max-width: 100%; }
}

/* ── Foto d'epoca nella timeline di /chi-siamo ──
   Ce l'ha solo qualche tappa, e sono scatti veri e piccoli (l'originale
   Amicar del 1970 è 290px): si mostrano alla loro misura invece di
   stirarli. Inerte finché una tappa non ha una foto. */
.tl-foto { margin: 14px 0 0; max-width: 290px; }
.tl-foto img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
}
/* La didascalia è il punto in cui la foto smette di essere decorazione e
   dice chi c'è dentro. */
.tl-foto figcaption {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
  text-wrap: pretty;
}

}

/* ── ADVISOR SU TELEFONO: il quiz in una schermata ──
   Prima: 4 tab che sforavano con la barra di scorrimento in vista, opzioni
   a colonna singola alte quanto mezzo schermo e "Avanti" ridotto a un link.
   Ora: i 4 passi sono una griglia fissa (niente scroll), le opzioni stanno
   in 2 colonne (tap target >=52px), Avanti e' un bottone vero a tutta
   larghezza. In coda al foglio DI PROPOSITO: vince i pareggi di
   specificita' con le regole base solo venendo dopo. */
@media (max-width: 640px) {
  .advisor-tabs {
    display: grid; grid-template-columns: repeat(4, 1fr);
    overflow: visible; gap: 0;
  }
  .advisor-tab {
    flex: initial; padding: 9px 2px; font-size: 11px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .advisor-q { font-size: 17px; }
  .advisor-opts-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .advisor-opt { padding: 10px 8px; font-size: 12.5px; min-height: 52px; }
  /* colori e pillola arrivano dalla regola base .advisor-v2 .advisor-next
     (lime + inchiostro): qui solo larghezza piena e centratura */
  .advisor-v2 .advisor-next { width: 100%; justify-content: center; }
}


/* ── SCELTA DEL PROFILO SOCIAL (footer) ──
   Quando una concessionaria ha piu' profili per rete (insegna + marchi,
   come Amicar: CUPRA, Lexus, officinedellusato…), il clic sull'icona apre
   la scelta invece di dover eleggere un profilo solo. Con un profilo
   l'icona resta un link diretto. <details> nativo: niente JavaScript. */
.footer-social .social-scelta { position: relative; }
.footer-social .social-scelta summary {
  width: 44px; height: 44px; border-radius: var(--radius-circle);
  display: grid; place-items: center; cursor: pointer; list-style: none;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.10);
  transition: all 0.18s var(--ease-out);
}
.footer-social .social-scelta summary::-webkit-details-marker { display: none; }
/* Collaudo dello stato aperto: aprire il details da console con `open = true`
   non forza il ricalcolo dello stile, e getComputedStyle continua a riportare
   i valori dello stato chiuso — sembra che le regole [open] non si applichino
   mentre invece si applicano. Serve un'invalidazione vera (un clic sul
   summary, o una regola aggiunta al documento) prima di leggere. */
.footer-social .social-scelta summary:hover,
.footer-social .social-scelta[open] summary { background: var(--blue); color: #fff; border-color: var(--blue); }
.social-scelta-menu {
  position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 30;
  min-width: 230px; padding: 6px;
  background: var(--white); color: var(--text);
  border-radius: var(--radius-m); border: 1px solid var(--border);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,0.45);
}
.social-scelta-menu .ssm-titolo {
  display: block; padding: 6px 10px 4px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.social-scelta-menu a {
  /* Il raggio dal token e non scritto a mano: 8px È il --radius-s di Barletta,
     quindi lì non cambia un pixel, ma Amicar ha la scala ad angoli quasi vivi
     (2px) e Matera sta a 6px — con l'8px fisso la voce era più tonda della
     card che la contiene. */
  display: block; padding: 8px 10px; border-radius: var(--radius-s);
  font-size: 13.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.social-scelta-menu a:hover { background: var(--sky-soft, #eef4ff); color: var(--navy, var(--text)); }

/* ── FASCIA FERIE ─ avviso di chiusura sopra la nav (vedi FerieBanner) ──────
   Statica, non fissa: informa all'atterraggio e scorre via col contenuto —
   niente popup né barre incollate che coprono le CTA su mobile. */
.ferie-fascia {
  position: relative; z-index: 101;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #F3F5F5;
  padding: 12px 52px; text-align: center;
  font-size: 13.5px; line-height: 1.45;
}
.ferie-fascia p { margin: 0; }
.ferie-fascia strong { color: #fff; }
.ferie-fascia a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ferie-fascia button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; color: inherit; font-size: 20px; line-height: 1;
  cursor: pointer; opacity: .65;
}
.ferie-fascia button:hover { opacity: 1; }
.ferie-nascosta { display: none; }

@media (max-width: 720px) {
  .ferie-fascia { font-size: 12.5px; padding: 10px 46px 10px 12px; text-align: left; justify-content: flex-start; }
}

/* ─── Link in bio (/link) ────────────────────────────────────────────────────
   La pagina che sta nel profilo Instagram, dove il link è l'unico tappabile.
   Si apre sempre da un telefono, in piedi: una colonna sola, bersagli grandi,
   prima quello che si fa e poi quello che si guarda. */
.bio {
  min-height: 100dvh;
  background: var(--ink);
  color: var(--white);
  padding: 32px 18px 56px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 560px;
  margin: 0 auto;
}
.bio-testa { text-align: center; }
.bio-nome { font-family: var(--font-display, inherit); font-size: 30px; font-weight: 800; letter-spacing: -0.5px; margin: 0; }
.bio-luogo { margin: 4px 0 0; font-size: 14px; color: var(--soft); }

.bio-azioni { display: flex; flex-direction: column; gap: 10px; }
.bio-btn {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 64px; justify-content: center;
  padding: 12px 20px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white); text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.bio-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); }
.bio-btn--primo { background: var(--accent); border-color: var(--accent); color: var(--graphite); }
.bio-btn--primo:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.bio-btn-t { font-size: 17px; font-weight: 700; }
.bio-btn-s { font-size: 13px; opacity: .72; }

.bio-sez { display: flex; flex-direction: column; gap: 10px; }
.bio-h { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--soft); }
.bio-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bio-riga {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px; padding: 10px 18px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--white); text-decoration: none;
  transition: background-color .2s ease;
}
.bio-riga:hover { background: rgba(255, 255, 255, 0.1); }
.bio-riga-t { font-size: 15.5px; font-weight: 600; }
.bio-riga-v { font-size: 15px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.bio-riga-f { font-size: 22px; color: var(--soft); line-height: 1; }

.bio-auto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bio-card {
  display: flex; flex-direction: column; gap: 2px;
  border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
}
.bio-card img, .bio-card-vuota { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: rgba(255, 255, 255, 0.08); }
.bio-card-t { font-size: 13.5px; font-weight: 600; padding: 8px 12px 0; line-height: 1.25; }
.bio-card-p { font-size: 14px; font-weight: 800; color: var(--accent); padding: 0 12px; }

.bio-pie { text-align: center; padding-top: 6px; }
.bio-pie a { color: var(--soft); font-size: 13px; text-decoration: none; }
.bio-pie a:hover { color: var(--white); }