/* ═══ 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
═══════════════════════════════════════════════════════════ */
/* ─── Tokens (AutoCity v5 — brand kit ufficiale: doppio accento blu+lime) ─── */
:root {
/* Accenti ufficiali */
--blue: #0057D9; /* PRIMARIO brand — logo BAT, nav, link, selezione, dots */
--blue-dark: #0048B3;
--lime: #D8FF45; /* SECONDARIO energia — CTA conversione, highlight, match */
--lime-dark: #C2E82E;
--accent: var(--lime); /* CTA energia (la maggior parte dei .btn-lime) */
--accent-dark: var(--lime-dark);
/* Base */
--graphite: #0D0F14; /* headings/testo forte su chiaro */
--white: #FFFFFF;
--paper: #F5F6F8; /* sfondo sezioni alternate */
--paper-warm: #FAF8F3;
--text: #1A1D24; /* body su chiaro (charcoal) */
--muted: #6B6F76;
--soft: #A6ABB3;
--border: #E4E6EA;
--success: #2E7D32;
--danger: #C24A3D;
--info: #0057D9;
/* Dark surfaces */
--ink: #0D0F14; /* graphite black */
--ink-soft: #1A1D24; /* charcoal */
--ink-2: #1A1D24;
--line-dark: rgba(255,255,255,0.08);
/* ── Alias back-compat ── */
--navy: #0D0F14; /* superfici scure + headings (alias graphite) */
--navy-dark: #05070A;
--navy-deep: #0D0F14; /* base gradient hero */
--sky: #0057D9; /* = blu brand (eyebrow/link/dots/selezione/focus) */
--sky-soft: #E6F0FF; /* pill blu pallido */
/* On dark text */
--on-dark: #FFFFFF;
--on-dark-muted: rgba(255,255,255,0.66);
--on-dark-soft: rgba(255,255,255,0.45);
/* Tipografia — Inter Tight (display) + Inter (body), come brand kit */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
--font-serif: 'Source Serif Pro', Georgia, serif;
/* Spacing */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 48px;
--space-6: 64px;
--space-7: 96px;
--space-8: 128px;
/* Radii */
--radius-s: 6px;
--radius-m: 10px;
--radius-l: 16px;
--radius-xl: 24px;
--radius-pill: 999px;
/* Shadows */
--shadow-soft: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
--shadow-card: 0 2px 6px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.06);
--shadow-lift: 0 8px 24px rgba(0,30,80,0.12);
/* Sizing */
--container: 1280px;
--container-narrow: 1080px;
--nav-height: 72px;
/* Easings */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
/* ─── 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: 50%;
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: 50%; background: var(--sky); }
.hero h1 {
font-size: clamp(40px, 5.5vw, 68px);
line-height: 1.05;
font-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: 50%;
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: 12px;
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; }
.review-score .stars { display: flex; flex-direction: column; }
.review-score .stars .row { color: #F5A623; letter-spacing: 4px; font-size: 18px; }
.review-score .stars span { 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: 999px; }
.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: 50%;
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); }
.footer-social a {
width: 44px; height: 44px; border-radius: 50%;
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.42); 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; }
}
/* ═══════════════════════════════════════════════════════════
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
═══════════════════════════════════════════════════════════ */
/* ─── Logo reale "autocityBAT" — wordmark fisso, monocromo ─── */
.wordmark {
display: inline-flex; align-items: baseline;
font-weight: 800; letter-spacing: -0.02em;
font-size: 22px; line-height: 1;
color: var(--graphite);
}
.wordmark { font-family: var(--font-display); }
.bat { color: inherit; font-weight: 800; } /* "BAT" monocromo (eredita il colore del wordmark) — logo tutto bianco su scuro */
.wordmark .bat { font-weight: 800; color: inherit; }
.nav.is-dark .wordmark { color: var(--on-dark); }
.nav.is-dark .wordmark .bat { color: inherit; }
/* footer override applicato inline */
/* ─── 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: 50%;
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;
}
.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 {
font-size: clamp(42px, 5.2vw, 72px);
line-height: 1.02;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--on-dark);
}
.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: 12px;
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: 8px;
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: 50%;
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: 10px;
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: 6px;
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: 50%;
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: 4px;
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: 8px;
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: 8px;
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: 16px;
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: 50%;
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 {
display: grid; grid-template-columns: 1fr 1fr 1fr auto;
gap: 12px; max-width: 1000px; margin: 0 auto; align-items: center;
}
.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; }
.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: 50%;
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;
top: var(--nav-height); left: 0; right: 0; bottom: 0;
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; }
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: 50%; 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: 50%;
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: 50%; 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: 12px;
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-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: 6px;
}
/* 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); }
/* 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; }
/* 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; }
/* 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: 8px;
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; }
.nav-dd-panel a {
display: block;
color: rgba(255,255,255,0.82) !important;
padding: 12px 8px 12px 22px; font-size: 15.5px; font-weight: 500;
border-radius: 8px;
}
.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: 0.92;
}
.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;
background: linear-gradient(90deg, var(--ink) 0%, rgba(13,15,20,0.9) 22%, rgba(13,15,20,0.4) 50%, transparent 85%);
}
.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: 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: 16px;
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: 999px; }
.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: 20px; 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: 14px;
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: 14px; 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: 999px; 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: 0.82; }
/* Velo a gradiente: scuro a SINISTRA (dove c'è il titolo → resta leggibile) e quasi
trasparente a DESTRA (la foto respira). Più un lieve fondo in basso per il sottotitolo. */
.usato-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(13,15,20,0.94) 0%, rgba(13,15,20,0.72) 34%, rgba(13,15,20,0.34) 64%, rgba(13,15,20,0.1) 100%), linear-gradient(180deg, rgba(13,15,20,0) 58%, rgba(13,15,20,0.4) 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.55) 0%, rgba(13,15,20,0.82) 100%); } }
.usato-hero .container { position: relative; z-index: 2; }
.usato-hero h1 { font-family: var(--font-display); font-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; }
.usato-hero .uh-sub { margin-top: var(--space-2); font-size: 17px; color: var(--on-dark-muted); max-width: 56ch; }
.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: 18px; 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: 999px; }
.uv-badge.km0 { background: var(--blue); color: #fff; }
.uv-badge.usato { background: rgba(13,15,20,0.82); color: #fff; }
.uv-badge.promo { background: var(--lime); color: var(--ink); }
.uv-fav { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; 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: 8px; 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: 10px; 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; } }
.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: 999px; 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: 18px; 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: 999px; 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: 999px; 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 */
.promo-card .promo-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* 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: 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: 8px; 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: 18px; 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: 999px; }
.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: 10px; 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: 18px; 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: 999px; }
.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: 12px; 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: 14px; 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: 999px; 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; }
.form-consent input[type="checkbox"] { width: 17px; height: 17px; margin-top: 1px; 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: 50%; 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.
============================================================ */
/* 1) PROFONDITÀ PIATTA — token ombra quasi-flat + raggio coerente */
:root{
--shadow-soft: 0 1px 2px rgba(13,15,20,0.05);
--shadow-card: 0 1px 2px rgba(13,15,20,0.06);
--shadow-lift: 0 1px 2px rgba(13,15,20,0.06);
--radius-l: 16px;
--radius-xl: 16px;
}
/* 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: 16px;
}
/* 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: 16px; }
/* 4) DISPLAY TYPE — più grande, line-height compresso, tracking negativo (Rivian/TravelPerk) */
.hero-v2 h1 { 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.
============================================================ */
/* 1) TIPOGRAFIA — via Inter (reflex-reject): Archivo, grottesco engineered.
Il LOGO resta intoccabile (Inter Tight). */
:root{
--font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.wordmark { font-family: 'Inter Tight', system-ui, sans-serif !important; }
/* display leggermente più "wide" e scolpito (automotive) */
.hero-v2 h1, .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: 16px; }
@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: 16px; 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:999px; 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: 18px;
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 */
.bp-hero { position:relative; background: radial-gradient(72% 92% at 78% 35%, var(--bp-glow), transparent 60%), var(--bp-bg); color:#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; }
.bp-hero-scrim { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, var(--bp-bg) 4%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.22) 100%), linear-gradient(0deg, var(--bp-bg) 2%, transparent 34%); }
.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(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:900; line-height:1.0; letter-spacing:-0.02em; margin-top:10px; max-width:18ch; }
.bp-sub { color:rgba(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:999px; 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 rgba(255,255,255,0.32); color:#fff; font-weight:700; padding:13px 22px; border-radius:999px; }
.bp-btn-ghost:hover { background:rgba(255,255,255,0.06); }
.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:#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(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 rgba(255,255,255,0.10); border-radius:16px; 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); }
.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:#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:999px; letter-spacing:.05em; white-space:nowrap; }
.bp-model-tagline { color:rgba(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:#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:#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(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(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 rgba(255,255,255,0.10); border-radius:18px; 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(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:10px; padding:11px 14px; color:#fff; font-size:14px; }
.bp-quote-form input::placeholder { color:rgba(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(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:999px; 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-bg) 6%, rgba(0,0,0,.5) 46%, rgba(0,0,0,.28) 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, .hslide-video { display:none; } } /* su mobile resta la foto poster */
.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:12px; 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:999px; 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:999px; 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,.36);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)}
/* loghi-badge (oval/quadrati) un filo più grandi per pareggiare il peso ottico */
.fb-chip img[src*="landrover"]{height:180%}
.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(255,255,255,.85);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);padding:7px 14px;border-radius:999px}
.bp-hero-chips li::before{content:"";width:6px;height:6px;border-radius:50%;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(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:14px;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:#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(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(255,255,255,.4);color:#fff}
.bp-final-trust{margin-top:18px;font-size:13px;color:rgba(255,255,255,0.5)}
.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; } }
/* Land Rover: badge piccolo per natura → ingrandito nella card brand */
.bw-card-logo .bw-logo[src*="landrover"]{ height:150%; max-height:69px; }
/* Jaguar: leaper grande → -10% nella card brand */
.bw-card-logo .bw-logo[src*="jaguar"]{ height:90%; max-height:40px; }
/* 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:12px; 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:8px; 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:10px; 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:10px; 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:10px; 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: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-draft { margin:18px 0 8px; background:#FFF7E6; border:1px solid #F0DDB0; color:#8a6d1f; border-radius:10px; padding:12px 14px; font-size:13px; line-height:1.5; }
.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:50%; 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:6px; 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:999px; 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:999px;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:999px;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:18px;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:999px;-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:999px;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:50%;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:999px;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:50%;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:20px;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:16px;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:12px;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:24px;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:18px;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:999px;-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:999px;margin-bottom:14px}
.art-hero h1{font-family:var(--font-display);font-size:clamp(28px,4vw,42px);font-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:24px;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:999px;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:20px;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:10px;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:999px;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:16px;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:10px;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}
.fin-disclaimer{font-size:10.5px;line-height:1.5;color:#9aa0a8;margin:12px 0 0}
@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:18px;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:999px}
.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:999px}
.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)}
.uv-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line,#e6e8ec);border-radius:16px;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:10px;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:10px;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:28px;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)}
/* 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:999px;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}
}
/* ── 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:999px;-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:999px}
.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:8px;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:50%;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:50%;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:999px}
@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: 10px;
}
/* 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: 10px; }
/* 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:18px; 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:13px; 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:999px; 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 rgba(255,255,255,0.10); border-radius:16px; padding:22px; }
.bp-svc-ico { display:inline-flex; width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,0.06); 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:#fff; margin:14px 0 0; }
.bp-svc-item p { color:rgba(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:22px; 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:16px;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:20px;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:24px;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:999px}
.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:999px;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:14px;border:1px solid var(--line,#e7e9ee)}
.art-fig video{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line,#e7e9ee);background:#0B1428}
.art-video .art-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;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; }
.hslide-bg--video { background:#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:999px; 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: 22px; 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: #9aa1ad; }
.vw-step-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: #eef0f4; color: #8a919d; 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: 11px; 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: 13px; 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: #8a919d; }
.vw-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 11px; 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: 16px; 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: 12px;
}
.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: 999px; 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: 16px; 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:18px;overflow:hidden;background:var(--bp-bg,#0D0F14);color:#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:50%;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:999px;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:#fff}
.bp-news-date{font-size:12.5px;font-weight:700;text-transform:capitalize}
.bp-news-luogo{font-size:12.5px;color:rgba(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(255,255,255,.92);margin:0 0 4px}
.bp-news-desc{font-size:13px;line-height:1.55;color:rgba(255,255,255,.75);margin:0 0 14px}
.bp-news-body .bp-btn-accent{margin-top:2px}
@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}
}
/* ─── 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:999px;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:18px}
.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:18px}
.art-author-mark{flex-shrink:0;width:46px;height:46px;border-radius:12px;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:999px;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:999px;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)}
@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:center;gap:18px;background:#fff;border:1px solid var(--line,#eceef1);border-radius:16px;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:12px;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}
.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:17px;font-weight:700;letter-spacing:-.01em;margin:0;color:var(--ink,#0D0F14)}
.evento-body p{font-size:13.5px;color:var(--muted,#6b7280);margin:2px 0 0;line-height:1.45}
.evento-go{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--blue,#0057D9)}
.evento-go svg{transition:transform .2s}
.evento-card:hover .evento-go svg{transform:translateX(3px)}
@media(max-width:640px){
.evento-card{flex-wrap:wrap;gap:12px}
.evento-go{width:100%;justify-content:flex-start;padding-left:78px}
}
/* ═══════════════ 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
forzati + il minimo 44px lo tagliavano sotto i 360px */
@media (max-width: 560px) {
.hero-v2 h1 { font-size: clamp(30px, 8vw, 40px); }
.hero-v2 h1 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: 20px; 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: rgba(255,255,255,0.08); box-shadow: 0 26px 50px -22px rgba(0,0,0,.6); }
.bp-model-media { position: relative; aspect-ratio: 16/10; border-radius: 14px; 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: 11px; padding: 4px 11px; box-shadow: 0 4px 14px -4px rgba(0,0,0,.55); }
.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 ![]()
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: 10px; 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: 999px; 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: 999px; 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: 10px; }
.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: 999px; 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: 999px; 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) ── */
.fin-legal { margin-top: 18px; font-size: 12.5px; line-height: 1.55; color: var(--muted, #6b7280); max-width: 90ch; }
.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(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: 999px;
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: 10px;
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: 999px;
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: 999px; 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: 14px;
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 {
--acb-gap: 12px;
--acb-peek: 40px; /* l'accenno della card dopo: e' l'invito a scorrere */
--acb-dots: 1; /* interruttore letto dal JS: il breakpoint sta solo qui */
/* "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: rgba(13, 15, 20, .22);
--acb-dot-on: var(--blue, #0057D9);
}
.bw-block .acb-dots:not([hidden]) {
--acb-dot: rgba(255, 255, 255, .30);
--acb-dot-on: var(--lime, #D8FF45);
}
.acb-dot {
min-width: 30px; min-height: 38px;
padding: 14px 10px;
border: 0; border-radius: 999px;
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; }
}