/* Tema Amicar — Modugno (BA).
   Qui vive solo l'ASPETTO: colori, font, ombre, raggi. La struttura sta in base.css.
   L'ordine dei blocchi ricalca quello di autocitybat.css: più avanti si ridefiniscono
   token dichiarati prima, e l'ultima definizione vince. Non riordinare.

   Il carattere del tema, in una riga: antracite e arancio, angoli quasi vivi,
   e una linea sottile che ricuce le fasce. Amicar ospita quattro CI di marca
   forti — CUPRA, SEAT, Škoda, Lexus — quindi la sua identità deve restare
   sobria: l'arancio sta sotto il 15% della superficie, e non ci sono diagonali
   (sono il linguaggio privato di CUPRA e stonerebbero accanto a Lexus). */

/* ═══ FONT SELF-HOSTED (GDPR: nessuna chiamata a Google Fonts) ═══
   Stanno nel tema e non in base.css perché il carattere è aspetto, non
   struttura: Barletta ha Archivo, Amicar ha Exo 2 + Source Sans 3, e i due
   siti non devono scaricare i font l'uno dell'altro.
   File variabili scaricati da Google Fonts (OFL) in /public/fonts/. */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/exo2-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-sans-3-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;
}

/* ─── Tokens (brand guidelines Amicar v2.4) ─── */
:root {
  /* Accento unico: Arancio #EC9600. Amicar non ha un secondo accento — con
     quattro marchi in casa, due colori nostri sarebbero rumore. */
  --orange: #EC9600;
  --orange-dark: #D18500;   /* su fondo chiaro: l'arancio pieno non arriva a 4,5:1 */
  --accent: var(--orange);
  --accent-dark: var(--orange-dark);

  /* Base */
  --graphite: #1A2022;      /* Antracite — headings/testo forte su chiaro */
  --white: #FFFFFF;
  --paper: #F3F5F5;
  --paper-warm: #F7F8F8;
  --text: #22282B;
  --muted: #5C6468;
  --soft: #9FA4A9;
  --border: #E2E6E5;
  --success: #2E7D32;
  --danger: #C24A3D;
  --info: #3A4245;

  /* Superfici scure */
  --ink: #1A2022;
  --ink-soft: #22282B;
  --ink-2: #22282B;
  --line-dark: rgba(255,255,255,0.10);

  /* ── Alias back-compat ──
     base.css parla ancora la lingua di Barletta (blue/lime/sky/navy). Finché
     quei nomi restano, qui li si porta nella palette Amicar: non c'è un blu e
     non c'è un lime, ci sono l'antracite e l'arancio. */
  --blue: #3A4245;
  --blue-dark: #22282B;
  --lime: #EC9600;
  --lime-dark: #D18500;
  --navy: #1A2022;
  --navy-dark: #101214;
  --navy-deep: #1A2022;
  --sky: #EC9600;
  --sky-soft: #FDF2DF;      /* pill arancio pallido */

  /* Testo su fondo scuro.
     --on-dark-soft è a 0,55 e non a 0,45: a 0,45 dava 4,12:1 sull'antracite,
     sotto la soglia AA, su tutti i testi che lo usano (18 nel solo ticker). */
  --on-dark: #F3F5F5;
  --on-dark-muted: rgba(243,245,245,0.66);
  --on-dark-soft: rgba(243,245,245,0.55);

  /* Tipografia — Exo 2 (display) + Source Sans 3 (testo), come da guidelines */
  --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Exo 2', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --font-serif: 'Source Sans 3', Georgia, serif;
  /* I titoli non in grassetto pieno: Exo 2 e' un carattere gia' largo e
     spigoloso, e a 60px l'800 diventa un muro. Il 500 tiene la struttura e
     lascia respirare la lettera. Vale per TUTTI gli h1 del sito Amicar; senza
     questa riga ogni regola tiene il proprio peso e gli altri temi non
     cambiano. */
  --h1-weight: 500;
  --wordmark-h: 26px;       /* altezza del logotipo in nav e piè di pagina */

  /* 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 — scala a quattro gradini (Amicar: angoli quasi vivi).
     Il riferimento è CUPRA: niente forme a pillola, nessun raggio oltre i 6px. */
  --radius-s: 2px;
  --radius-m: 3px;
  --radius-l: 4px;
  --radius-xl: 6px;
  --radius-pill: 3px;       /* niente pillole: il chip resta squadrato */
  --radius-circle: 50%;     /* pallini, avatar, punti: geometria, non stile */

  /* 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(26,32,34,0.14);

  /* Sizing */
  --container: 1280px;
  --container-narrow: 1080px;
  /* Misura strizzata: ~70 caratteri per riga, il formato per quando la
     concessionaria parla invece di elencare. Senza una seconda misura ogni
     fascia ha gli stessi margini e l'occhio non cambia mai inquadratura. */
  --container-tight: 720px;
  --nav-height: 72px;

  /* Easings */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── LA LINEA ───
   La firma del tema: un filo di 1px che precede ogni occhiello, lo accompagna
   e attraversa il confine fra una fascia e l'altra. Nasce come alternativa
   alle fasce oblique: la diagonale appartiene a CUPRA e accanto a Lexus e
   Škoda si legge come un prestito.

   I valori sono in forma CONDIZIONALE: base.css usa `content: var(--linea-on,
   none)`, quindi senza tema lo pseudo-elemento NON esiste. Non è pignoleria —
   con `content:""` l'elemento nascerebbe comunque e, dentro un flex, si
   mangerebbe il `gap` due volte: misurato, 28px di scarto su un occhiello. */
:root {
  --linea-on: "";
  --linea: 1px;
  --linea-w: 34px;          /* il trattino prima dell'occhiello */
  --linea-gap: 14px;
  --linea-max: 220px;       /* la riga chiara che lo segue */
  --linea-col: #EC9600;
  --linea-col-soft: #E2E6E5;
}
/* Il tratto arancio a cavallo fra una fascia e l'altra è spento: a vista era
   una «striscia gialla» fuori posto (Marketing Amicar, 30/10). La linea resta
   sugli occhielli e sotto le foto delle schede. */
.section + .section::before,
.perche::before, .stories::before, .section.reviews::before, .voce::before { content: none; }
/* Sulle fasce scure la riga di accompagnamento deve schiarire, non scurire. */
.tradein-band, .worlds, .contact-head, .stories, .quickcontact,
.voce, .perche { --linea-col-soft: rgba(243,245,245,.16); }

/* La FORMA del trattino sull'occhiello sta qui e non in base.css per un motivo
   preciso: `.section-eyebrow::before` è già occupato: Barletta ci mette la
   numerazione progressiva delle sezioni (01, 02, 03…), che è la sua firma. Due
   disegni diversi sullo stesso pseudo-elemento, e vince l'ultimo dichiarato.
   Il tema carica dopo base.css, quindi qui la sovrascrittura è pulita.

   Sistemazione più ordinata, quando l'altra sessione vuole: la numerazione è
   aspetto e andrebbe in themes/autocitybat.css; liberato il ::before, questo
   blocco può salire in base.css nella sua forma condizionale, come il tratto
   fra le fasce. Finché resta lì, questa è la strada senza rischi. */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--linea-gap, 0);
}
.section-eyebrow::before {
  content: var(--linea-on, none);
  width: var(--linea-w, 0); height: var(--linea, 0);
  background: var(--linea-col, transparent);
  flex: none;
  /* neutralizza la numerazione di Barletta ereditata da base.css */
  font-variant-numeric: normal; font-weight: inherit; opacity: 1;
}
.section-eyebrow::after {
  content: var(--linea-on, none);
  height: var(--linea, 0);
  background: var(--linea-col-soft, transparent);
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--linea-max, 0);
}

/* ─── Loghi dei marchi ─── */
/* I quattro marchi hanno viewBox ritagliate sul tracciato, quindi una sola
   altezza CSS dà loro lo stesso peso ottico: nessuna correzione per marchio,
   al contrario di Barletta dove Land Rover e Jaguar vanno riequilibrati. */

@media (max-width: 640px) {
  .promo-track,
  .bw-block .bw-track {
    --acb-gap: 12px;
    --acb-peek: 40px;
    --acb-dots: 1;
  }
  .acb-dots:not([hidden]) {
    --acb-dot: rgba(26, 32, 34, .22);
    --acb-dot-on: var(--accent, #EC9600);
  }
  .bw-block .acb-dots:not([hidden]) {
    --acb-dot: rgba(243, 245, 245, .30);
    --acb-dot-on: var(--accent, #EC9600);
  }
}

@media (max-width: 900px) {
  .vd-foto-track {
    --acb-gap: 10px;
    --acb-peek: 34px;
    --acb-dots: 1;
  }
}

/* Etichetta della card Vision: l'arancio pieno sull'antracite misura 4,37 —
   appena sotto la soglia di leggibilità (4,5). La tinta chiara la supera
   senza cambiare carattere. Il testo della card è già a 10,3: non si tocca. */
.mv-card:last-child .mv-tag { color: #FFB547; }


/* ── Ticker "racing" (direzione approvata): maiuscolo inclinato da livrea,
   filo arancio sotto la banda, separatore a tacche di cordolo. Adattato al
   markup condiviso (.star/.sep/strong + .mi-coda): stessi selettori di
   base.css, vince l'ordine di caricamento del tema. */
.marquee { border-bottom: 2px solid var(--accent); padding: 12px 0; }
.marquee::before, .marquee::after { width: 110px; }
.marquee-track { gap: 40px; align-items: center; animation-duration: 24s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  gap: 12px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-soft);
  transform: skewX(-9deg);
}
.marquee-item > * { transform: skewX(9deg); display: inline-block; }
.marquee-item strong { font-weight: 700; }
.marquee-item .mi-coda { letter-spacing: .12em; }
/* separatore: un rombino arancio. Le due tacche di cordolo di prima sembravano
   il simbolo di pausa, e ricordavano il marchio di un concorrente (Marketing
   Amicar, 30/10). Il rombo raddrizza l'inclinazione del nastro e poi ruota. */
.marquee-item .sep {
  width: 7px; height: 7px; border-radius: 1px; flex: none;
  background: var(--accent);
  transform: skewX(9deg) rotate(45deg);
}
.marquee-item .star { color: var(--accent); font-size: 13px; }
@media (max-width: 720px) {
  .marquee-track { gap: 26px; animation-duration: 18s; }
  .marquee-item { font-size: 10.5px; letter-spacing: .12em; }
}

/* Scelta fra più profili social nel piè di pagina.
   base.css colora lo stato aperto con --blue, che su Barletta e Matera è il
   loro blu di marca. Amicar un blu non ce l'ha: l'alias porta --blue
   sull'antracite #3A4245, che sul piè di pagina (#101214) misura 1,95:1 —
   il bottone si apriva senza dare segno di essersi aperto. Qui lo stato
   attivo passa all'arancio, che è l'unico accento del tema, con inchiostro
   antracite come da guidelines (il bianco sull'arancio non tiene). */
.footer-social .social-scelta summary:hover,
.footer-social .social-scelta[open] summary {
  background: var(--accent);
  color: var(--graphite);
  border-color: var(--accent);
}

/* ─── Hero: il testo in basso a sinistra ───
   base.css centra il blocco verticalmente (justify-content:center). Su Amicar
   scende in fondo: la foto della hero respira nella metà alta, e il titolo
   poggia dove il velo verticale di base.css è già più scuro (da 78% in giù),
   quindi ci guadagna anche in leggibilità.
   Sta nel tema e non in base.css perché è una scelta di questo sito: Barletta
   e Matera tengono il loro centrato. */
.hero-v2 { justify-content: flex-end; }
.hero-v2-inner {
  /* spazio sotto: il testo non deve toccare il bordo, e sul telefono resta
     sopra la barra di contatto fissa */
  padding-bottom: clamp(56px, 9vh, 104px);
}
@media (max-width: 720px) {
  .hero-v2-inner { padding-bottom: clamp(72px, 12vh, 120px); }
}

/* ─── Scheda auto «tre piani»: l'anima di Amicar ───
   Angoli quasi vivi e pulsanti squadrati, come i chip del tema. La parola
   dietro è solo disegnata a filo: è «la linea», che qui attraversa anche la
   pagina all'altezza del bordo basso della foto e fa da appoggio ai pulsanti.
   Niente diagonali e niente corsivi (sono di CUPRA). Struttura e variabili in
   base.css («tre piani»). */
.vd-piani {
  --piani-forma: var(--radius-l);
  --piani-forma-tel: var(--radius-l);
  --piani-tondo: var(--radius-pill);
  --piani-parola: transparent;
}
/* Exo 2 è variabile e i suoi tracciati si sovrappongono: col filo semplice si
   vedevano le giunture dentro le lettere. Prima il filo, poi il riempimento
   color carta sopra: resta solo il bordo esterno. Spaziatura positiva perché
   le lettere non si tocchino. */
.vd-piani-sfondo {
  color: var(--paper);
  -webkit-text-stroke: 3px rgba(26, 32, 34, 0.24);
  paint-order: stroke fill;
  letter-spacing: 0.02em;
}
/* La foto si vede intera: le foto del gestionale sono 4:3 e il riquadro da
   computer è 2:1, e tagliandole spariva la fascia col marchio stampata sopra
   (chiesto dal Marketing Amicar). I lati vuoti li riempie la stessa foto,
   sfocata: è il fondo dei volantini nelle grafiche social. */
.vd-piani-img { position: relative; overflow: hidden; }
.vd-piani-img::before {
  content: ""; position: absolute; inset: -40px;
  background: var(--foto) center / cover no-repeat;
  filter: blur(26px) saturate(0.9) brightness(0.92);
}
.vd-piani-img img { position: relative; object-fit: contain; object-position: center; }
.vd-piani-img:hover img { transform: none; }
/* la linea passa dietro ai pulsanti, esattamente sul bordo della foto (la
   riga dei pulsanti è centrata su quel bordo) */
.vd-piani-azioni::before {
  content: "";
  position: absolute; z-index: -1; top: 50%; left: -100vw; right: -100vw;
  height: var(--linea, 1px);
  background: var(--linea-col-soft, #E2E6E5);
}
/* scheda tecnica: ogni gruppo si apre con «la linea» degli occhielli (trattino
   e filo chiaro che lo segue) al posto del filo spesso; il trattino è in
   inchiostro, perché l'arancio qui vuol dire solo «tocca». */
.vd-scheda-gruppo h3 {
  display: flex; align-items: center; gap: var(--linea-gap, 14px);
  padding-top: 0; border-top: 0;
}
.vd-scheda-gruppo h3::before { content: ""; flex: none; width: var(--linea-w, 34px); height: var(--linea, 1px); background: var(--ink); }
.vd-scheda-gruppo h3::after { content: ""; flex: 1 1 auto; min-width: 0; height: var(--linea, 1px); background: var(--linea-col-soft, #E2E6E5); }