/* =========================================================
   DP AUTOMOTIVE — v2 "Electric" Design System
   Token del kit: Versione 2/docs/dp-automotive-tokens.css
   Palette "playful": dal nuovo logo DP (blu · bianco · rosso)

   Due temi selezionabili con il pulsante in header:
     :root[data-theme="night"]  — predefinito, fondo blu profondo
     :root[data-theme="day"]    — fondo chiaro
   I componenti usano solo i token semantici (--page, --surface,
   --txt, --accent…), così il cambio tema è una sola sostituzione.
   ========================================================= */

/* ---------------------------------------------------------
   Caratteri, ospitati da noi
   I due caratteri stavano su fonts.googleapis.com: ogni
   visitatore mandava il proprio indirizzo IP a Google prima
   di poter acconsentire a nulla. Ora i file stanno in
   assets/fonts/ e il sito non contatta nessun terzo: è la
   ragione per cui la cookie policy può dire che non serve
   alcun banner. Non reintrodurre il <link> a Google.

   Sono font VARIABILI: un solo file copre tutti i pesi, per
   questo font-weight è un intervallo e non un valore. Servono
   solo latin e latin-ext; greco, cirillico e vietnamita no.
   I file arrivano dall'API css2 di Google Fonts (licenza SIL
   Open Font License 1.1, ridistribuzione consentita).
   --------------------------------------------------------- */
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("../fonts/plus-jakarta-sans-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:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/inter-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";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* ---- Token ufficiali del kit (invarianti) ---- */
  --dp-blue:#0060FF;
  --dp-blue-2:#2F8CFF;
  --dp-blue-dark:#0538A8;
  --dp-navy:#0A1D44;
  --dp-navy-2:#102B61;
  --dp-white:#FFFFFF;
  --dp-light:#F2F5F9;
  --dp-line:#DCE5F2;
  --dp-muted:#8491A6;
  --dp-red:#E10600;
  --dp-red-2:#FF342E;
  --dp-ink:#0E1B35;
  --dp-radius-sm:14px;
  --dp-radius-md:22px;
  --dp-radius-lg:32px;

  /* ---- Palette del nuovo logo ---- */
  --pl-blue-base:#0068FF;
  --pl-red-base:#F22734;
  --pl-ink-base:#071A3D;

  --f-display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --f-body:"Inter","Segoe UI",system-ui,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --t:200ms var(--ease);

  --maxw:1320px;
  --gut:clamp(20px,5vw,60px);

}

/* =========================================================
   TEMA NOTTE — predefinito
   Fondo blu profondo, accenti rossi e bianchi.
   ========================================================= */
:root,
:root[data-theme="night"]{
  color-scheme:dark;

  --page:#03102B;
  --surface:#0A1E45;
  --surface-2:#071734;
  --surface-3:#081A3B;
  --elev:#0B2150;

  --line:#1B3568;
  --line-2:#2A4C84;

  --txt:#E8F0FF;
  --txt-2:#B3C6E6;
  --txt-3:#8497BA;
  --head:#FFFFFF;

  --accent:#1E74FF;
  --accent-2:#4FA8FF;
  --accent-dk:#0A4FE0;
  --accent-soft:#122E5E;
  --accent-ring:rgba(30,116,255,.32);

  /* Sosta chiara del gradiente del marchio: header, .btn--primary, .cta--blue.
     È l'unico token della palette dichiarato una volta sola e NON ridefinito
     nel tema giorno, ed è voluto: il gradiente deve essere identico nei due
     temi. Il valore non è estetico ma misurato — il bianco ci misura sopra
     5,99, mentre su --accent-2 (la tinta più chiara della palette) si fermava
     a 3,32 di giorno e 2,51 di notte, sotto il 4,5 richiesto da AA. Il margine
     è quello che è: --accent (#0060FF) misura 5,10 e passa solo di giorno.
     Scurire questo token si può; schiarirlo consuma margine e va rimisurato.
     Deciso il 15 agosto 2026; la storia sta in RESOCONTO-SESSIONE-2026-08-14.md. */
  --accent-grad:#0057E6;

  --red:#FF3B33;
  --red-2:#FF6B62;

  /* Fasce profonde: stats, footer */
  --deep-1:#071C4C;
  --deep-2:#0E3178;
  --deep-txt:#A9BDDF;

  /* Palcoscenico delle "foto" veicolo: più chiaro della card, altrimenti
     le carrozzerie scure sparirebbero sul fondo notte. */
  --photo-1:#1D3D6E;
  --photo-2:#132C56;
  --photo-floor:rgba(0,0,0,.5);

  --header-bg:rgba(6,19,45,.82);
  --overlay:#03102B;

  --shadow:0 14px 38px rgba(0,0,0,.42);
  --shadow-lg:0 28px 64px rgba(0,0,0,.5);
  --shadow-sm:0 8px 20px rgba(0,0,0,.32);
  --btn-shadow:0 14px 32px rgba(30,116,255,.45),0 4px 10px rgba(0,0,0,.35);

  /* Etichetta marca sulle card: in notte diventa rossa */
  --brand-accent:var(--red);
  /* Filetto sotto i dati della card */
  --rule-accent:var(--red);
  --eyebrow-txt:#FFFFFF;

  /* Vettoriali "playful": restano nella colorazione del logo anche di
     notte, così le illustrazioni funzionano da accenti bianchi sul blu. */
  --pl-blue:#1580FF;
  --pl-red:#F22734;
  --pl-ink:#071A3D;
  --pl-white:#FFFFFF;
  --pl-surf:#EEF4FF;
  --pl-tint:#DCEBFF;
  --pl-swoosh:#020B1E;
  --pl-hair:#8FB6FF;
}

/* =========================================================
   TEMA GIORNO
   ========================================================= */
:root[data-theme="day"]{
  color-scheme:light;

  --page:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F2F5F9;
  --surface-3:#F9FBFE;
  --elev:#FFFFFF;

  --line:#DCE5F2;
  --line-2:#C6D5EA;

  --txt:#0E1B35;
  --txt-2:#4C5A73;
  /* Era #8491A6 (lo stesso di --dp-muted): 3,19 sul bianco e 2,80 sui fondi
     chiari, cioè sotto il 4,5 richiesto da AA per il testo normale, e --txt-3
     porta testo vero — etichette, sottotitoli, note, date. Questo valore tiene
     la stessa tinta (blu-grigio, tono 217°) e scende quel tanto che basta:
     5,25 sul bianco, 4,61 sul fondo più scuro in uso (--photo-2). Resta più
     chiaro di --txt-2, quindi la gerarchia dei tre livelli si vede ancora.
     Il tema notte non ha questo problema: lì --txt-3 sta fra 5,28 e 6,39. */
  --txt-3:#5F6D83;
  --head:#0A1D44;

  --accent:#0060FF;
  --accent-2:#2F8CFF;
  --accent-dk:#0538A8;
  --accent-soft:#EAF1FC;
  --accent-ring:rgba(0,96,255,.16);

  --red:#E10600;
  --red-2:#FF342E;

  --deep-1:#0C2C74;
  --deep-2:#12409C;
  --deep-txt:#B9C6DC;

  --photo-1:#F7FAFE;
  --photo-2:#E9F1FB;
  --photo-floor:rgba(10,29,68,.16);

  --header-bg:rgba(255,255,255,.88);
  --overlay:#FFFFFF;

  --shadow:0 12px 34px rgba(10,29,68,.10);
  --shadow-lg:0 26px 60px rgba(10,29,68,.14);
  --shadow-sm:0 6px 18px rgba(10,29,68,.07);
  --btn-shadow:0 10px 26px rgba(0,96,255,.32);

  --brand-accent:var(--accent);
  --rule-accent:var(--accent);
  --eyebrow-txt:var(--accent);

  --pl-blue:#0068FF;
  --pl-red:#F22734;
  --pl-ink:#071A3D;
  --pl-white:#FFFFFF;
  --pl-surf:#F4F8FF;
  --pl-tint:#DCEBFF;
  --pl-swoosh:#071A3D;
  --pl-hair:#071A3D;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--page)}

body{
  margin:0;background:var(--page);color:var(--txt);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  transition:background var(--t),color var(--t);
}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--accent);color:#fff}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--surface-2)}
::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid var(--surface-2);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ---------- Tipografia ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.06;letter-spacing:-.03em;margin:0;text-wrap:balance;color:var(--head)}
h1{font-size:clamp(2.2rem,4vw,3.7rem)}
h2{font-size:clamp(1.7rem,3vw,2.7rem)}
h3{font-size:clamp(1.1rem,1.5vw,1.35rem);font-weight:700;letter-spacing:-.02em}
p{margin:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--eyebrow-txt);
}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--red)}
.lead{color:var(--txt-2);font-size:clamp(.98rem,1.1vw,1.1rem);line-height:1.7}
.muted{color:var(--txt-3)}
.blue{color:var(--accent)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{position:relative;padding:clamp(56px,6.5vw,104px) 0}
.section--tight{padding:clamp(40px,4.5vw,72px) 0}
/* Le sezioni piene non sono più a tinta unita: sopra il colore corre la
   micro-texture del kit electric (cerchi/trattini nei colori del logo).
   Il .wrap di queste sezioni ha già z-index:1, quindi resta sopra. */
.section--light{background:var(--surface-2);position:relative;overflow:hidden}
.section--light::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url(../kit/electric/backgrounds/day-micro-pattern.svg) 0 0/360px 360px repeat;
  opacity:.55;
}
:root[data-theme="night"] .section--light::before{
  background-image:url(../kit/electric/backgrounds/night-micro-pattern.svg);
  opacity:.5;
}
/* ---------------------------------------------------------
   Sfondi di sezione — al posto del bianco piatto
   Vengono da dp-dc-site-backgrounds, riscritti sui colori del sito e
   soprattutto rischiarati: gli originali scendevano a #EAF4FF con aloni al
   12% e sotto quel fondo --txt-3 va a 4,06 e --accent a 3,95, cioè sotto il
   minimo AA. Il vincolo, misurato: il pixel più scuro del fondo non può
   scendere sotto la luminanza 0,90, perché il colore di testo più chiaro che
   compare su queste sezioni è --accent (#0060FF).

   Le varianti del pacchetto erano tre, quelle rimaste sono due, e non sono
   due gusti: sono due livelli di sicurezza.
     · minimal → velatura + reticolo. Il punto peggiore misura 4,51 per
                 l'azzurro dei link e 4,64 per il testo tenue: si può mettere
                 ovunque, testo compreso.
     · wide    → aloni e puntini a piena forza dell'originale. Il punto
                 peggiore scende a 3,24, quindi va SOLO su sezioni il cui
                 contenuto è una scheda piena, dove del velo si vede il margine
                 e non ci passa sopra del testo. Sulla home sono le tre schede
                 CTA, ed è verificato che lì nessun testo tocchi il velo.
   La terza (soft) è stata tolta: per farla passare sotto al testo andava
   smorzata fino a diventare identica a minimal, e due file uguali con due nomi
   diversi sono un tranello, non una scelta in più.

   Dal 15 agosto 2026 esistono anche di notte. Non sono gli stessi file con
   l'opacità abbassata — un foglio bianco-ghiaccio sopra la pagina notte
   sarebbe peggio del piatto che stiamo togliendo — ma due gemelli scuri con
   le stesse forme e il vincolo rovesciato: di giorno il pericolo è che il
   velo si scurisca, di notte che si schiarisca, perché lì il testo è chiaro.
   Il colore critico non è più --accent ma --txt-3 (#8497BA). Pixel peggiore
   misurato: minimal rgb(12,37,88) → testo tenue 5,01, link 5,89, zero area
   sotto soglia; wide rgb(31,66,117) → 3,40, quindi vale la stessa regola del
   giorno, solo sotto le schede. I numeri stanno nei desc dei due file.

   Niente overflow:hidden qui: il ::before è inset:0, quindi non esce da solo,
   e overflow su un antenato disattiverebbe position:sticky (le schede veicolo
   hanno la colonna laterale appiccicata).
   --------------------------------------------------------- */
.section--bg-minimal::before,
.section--bg-wide::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
:root[data-theme="day"] .section--bg-minimal::before{background-image:url(../kit/electric/backgrounds/day-section-minimal.svg)}
:root[data-theme="day"] .section--bg-wide::before{background-image:url(../kit/electric/backgrounds/day-section-wide.svg)}
:root[data-theme="night"] .section--bg-minimal::before{background-image:url(../kit/electric/backgrounds/night-section-minimal.svg)}
:root[data-theme="night"] .section--bg-wide::before{background-image:url(../kit/electric/backgrounds/night-section-wide.svg)}
/* Il contenuto sta sopra il velo senza doverlo scrivere in ogni pagina. */
.section--bg-minimal > .wrap,
.section--bg-wide > .wrap{position:relative;z-index:1}

.sec-head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(28px,3.5vw,52px)}
.sec-head--split{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.sec-head h2{margin-top:6px}
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Quando le schede non riempiono l'ultima riga (7 su 3 colonne) l'ultima
   resterebbe spaiata a sinistra: la centriamo, così sembra voluta. */
@media (min-width:681px){
  .g-3 > *:last-child:nth-child(3n+1){grid-column:2}
}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* =========================================================
   Bottoni — ui/button_primary.svg + button_secondary.svg
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:16px;
  font-family:var(--f-display);font-size:.92rem;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;transition:transform var(--t),filter var(--t),background var(--t),color var(--t),box-shadow var(--t);
}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}

/* Stesso gradiente dell'header, e per lo stesso motivo: il bianco su
   --accent-2 si fermava a 3,32/2,51. Vedi --accent-grad. */
.btn--primary{background:linear-gradient(135deg,var(--accent-grad),var(--accent-dk));color:#fff;box-shadow:var(--btn-shadow)}
.btn--primary:hover{transform:translateY(-1px);filter:brightness(1.08)}
/* Nell'header di suo già blu, il bottone primario prende un filo bianco
   per non confondersi con lo sfondo */
.header .btn--primary{box-shadow:var(--btn-shadow),inset 0 0 0 1.5px rgba(255,255,255,.4)}

/* Bottone secondario: sempre bianco pieno, in entrambi i temi (come nella
   versione giorno originale) — niente più stile trasparente/bordato. */
.btn--secondary{background:#fff;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.btn--secondary:hover{background:var(--accent-soft)}
/* Il riempimento resta bianco anche di notte (è una scelta voluta), ma di
   notte --accent è più chiaro — #1E74FF contro #0060FF — e sul bianco scende
   a 4,20. Stessa faccenda di .form-alt, rovesciata: lì serviva schiarire su
   fondo scuro, qui scurire su fondo chiaro. --accent-dk arriva a 6,55. */
:root[data-theme="night"] .btn--secondary{color:var(--accent-dk);box-shadow:inset 0 0 0 2px var(--accent-dk)}

.btn--ghost{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn--ghost:hover{background:rgba(255,255,255,.24)}

.btn--white{background:#fff;color:var(--dp-blue-dark)}
.btn--white:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,0,0,.28)}

.btn--sm{padding:11px 20px;font-size:.85rem;border-radius:13px}
.btn--wide{width:100%}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--accent);
  transition:gap var(--t),color var(--t);
}
.link-arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.link-arrow:hover{gap:14px;color:var(--accent-2)}
/* Come .form-alt: di notte l'azzurro pieno sul fondo scuro si ferma a 4,49
   sulla pagina e a 3,89 sulle schede, sotto il 4,5 richiesto. La variante
   chiara arriva a 7,53. Al passaggio del mouse diventa bianco, così il
   cambio di stato resta visibile. */
:root[data-theme="night"] .link-arrow{color:var(--accent-2)}
:root[data-theme="night"] .link-arrow:hover{color:var(--txt)}

/* =========================================================
   Header
   ========================================================= */
/* La fascia blu scura sopra l'header non c'è più: ripeteva i numeri già
   presenti qui sotto, il link allo stock e una frase di richiamo, e rubava
   40px alla prima schermata. L'unica cosa che portava e che non stava
   altrove — l'indirizzo — è passata sotto il nome del marchio. */

/* L'header è sempre blu elettrico, in entrambi i temi: non segue più
   --header-bg (scuro di notte/bianco di giorno), così testo e icone
   dentro restano fissi in bianco per il contrasto.

   RISOLTO il 15 agosto 2026. Il gradiente partiva da --accent-2, la tinta
   più chiara della palette (#2F8CFF di giorno, #4FA8FF di notte), e la sosta
   chiara sta in alto a sinistra: esattamente dove stanno il marchio e il
   nome. Il bianco lì sopra misurava 3,32 di giorno e 2,51 di notte, contro
   il 4,5 di AA; le voci di menu, al 78% di bianco, 2,61 e 2,07. Il bianco
   pieno più l'ombra avevano migliorato la lettura senza spostare il numero,
   perché la formula WCAG le ombre non le conta. Ora la sosta chiara è
   --accent-grad (#0057E6, fisso nei due temi): il bianco ci misura 5,99, e
   lungo tutto il gradiente non scende mai sotto quel valore perché l'altra
   sosta, --accent-dk, è più scura ancora (6,55 di notte, di più di giorno).
   L'ombra resta: non serve più al numero, ma aiuta l'occhio. */
.header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(120deg,var(--accent-grad),var(--accent-dk));
  color:#fff;
  text-shadow:0 1px 2px rgba(3,16,43,.5);
  backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid transparent;transition:box-shadow var(--t),border-color var(--t),background var(--t);
}
/* Il bottone ha il suo fondo pieno: l'ombra lì sporcherebbe e basta. */
.header .btn{text-shadow:none}
.header.is-stuck{border-bottom-color:rgba(255,255,255,.16);box-shadow:0 16px 34px -18px rgba(5,30,110,.55)}
.header .wrap{display:flex;align-items:center;gap:28px;height:78px;position:relative}

/* Il marchio si allinea al nome, non all'intero blocco di testo. Da flex,
   figurina e testo erano due colonne centrate fra loro: sotto il nome però
   c'è una seconda riga (l'indirizzo quassù, i servizi nel footer), quindi il
   centro del blocco cadeva più in basso del nome e la figurina scivolava di
   fianco alla riga piccola. Ora è una griglia a due colonne e due righe: la
   figurina e il nome dividono la prima riga e si centrano l'una sull'altro,
   la riga piccola sta sotto nella seconda colonna. `display:contents` serve a
   far salire b e span dentro la griglia — l'interlinea di .brand-txt li
   raggiunge lo stesso, perché si eredita.
   Il centro esatto del nome però tirava la figurina troppo in alto: da sola
   sopra la riga piccola sembrava staccata dal blocco. Scende di --drop, sei
   pixel, la metà esatta fra il centro del nome e il centro di tutto il testo.
   I due margini fanno due cose insieme. Sommati valgono --nl meno l'altezza
   della figurina, così la sua scatola dei margini è alta quanto una riga di
   nome e la prima riga della griglia non si gonfia: senza, la figurina (39px
   contro i 18 del nome) allargava la riga e spingeva l'indirizzo quattro
   pixel più giù di quanto dice il suo margine — è la distanza che si era
   allargata passando da flex a griglia. La differenza fra i due, invece, è la
   discesa: mezzo margine in più sopra e mezzo in meno sotto.
   Dove la riga piccola non c'è (barra sotto i 680px) --drop va a zero: lì il
   nome è tutto il blocco e il centro è già quello giusto. */
.brand{--mk:56px;--mk-h:calc(var(--mk)*.7);--nl:1.15em;--drop:6px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;flex:none}
.brand-mark{
  grid-column:1;grid-row:1;width:var(--mk);height:var(--mk-h);
  margin-top:calc((var(--nl) - var(--mk-h))/2 + var(--drop));
  margin-bottom:calc((var(--nl) - var(--mk-h))/2 - var(--drop));
  transition:transform 320ms var(--ease);
}
.brand:hover .brand-mark{transform:translateX(3px)}
/* 1.15 e non 1: il nome del marchio sta su una riga sola solo finché lo
   schermo è largo — sotto i 400px va a capo dopo la «&», e a interlinea piena
   le due righe si toccavano. Un ottavo di riga in più non sposta nulla dove
   il nome sta in fila, e dove va a capo si legge. */
.brand-txt{display:contents;line-height:1.15}
.brand-txt b{grid-column:2;grid-row:1;min-width:0}
.brand-txt span{grid-column:2;grid-row:2;min-width:0}
.header .brand-txt b{font-family:var(--f-display);font-size:1rem;font-weight:800;letter-spacing:.03em;color:#fff}
/* Sotto il nome ora c'è l'indirizzo, non più «Acquisto · Vendita · Passaggio
   immediato»: la riga dei servizi era richiamo, e lo stesso concetto sta nel
   sottotitolo dell'hero e nella sezione servizi; dove siamo, invece, di
   quassù non lo diceva nessuno. In tondo e con passo quasi nullo — a .22em
   di spaziatura, come la riga di prima, sarebbe più largo del marchio.
   Bianco pieno all'88%: su questo fondo smorzare oltre è il primo errore. */
.header .brand-txt .brand-addr{font-size:.66rem;letter-spacing:.01em;color:#fff;opacity:.88;margin-top:6px}

/* Le voci sono cinque, non più tre, e questo ha cambiato la geometria della
   barra. Ancorate a metà larghezza com'erano prima, 489px di menu non ci
   stavano più: per lasciare 27px fra marchio e prima voce servivano 1355px di
   contenitore, e il contenitore è largo al massimo 1320 (--maxw). Non era una
   questione di schermo abbastanza grande — non ci stavano MAI.
   Il menu è tornato nel flusso, fra marchio e comandi, e si centra da sé con
   i margini automatici: sta al centro dello spazio che avanza invece che al
   centro esatto della barra. La differenza si misura in pixel; l'alternativa
   era togliere una voce. Le misure stanno più sotto, nel blocco che porta il
   punto di rottura. */
.nav{height:100%;display:flex;align-items:center;gap:20px;margin-inline:auto}
/* white-space:nowrap è la garanzia che il difetto non torni in silenzio: una
   voce di menu che va a capo alza tutta la barra (era a tre righe: 78px
   diventavano 125). Senza spazio la barra ora trabocca invece di gonfiarsi,
   e si vede subito. Le misure che le fanno stare dentro sono più sotto,
   nel blocco "Barra: quanto ci sta davvero". */
/* Le voci erano al 78% di bianco a riposo: 2,61 di giorno e 2,07 di notte
   sulla sosta chiara del gradiente, i due valori peggiori di tutto il sito.
   Ora sono bianche piene; a distinguere lo stato ci pensa il filetto sotto,
   che a riposo è largo zero e cresce al passaggio. Il peso sale da 500 a 600
   perché un tratto più spesso sul blu si stacca meglio. */
.header .nav a{position:relative;white-space:nowrap;font-size:.92rem;font-weight:600;color:#fff;padding:6px 0;transition:color var(--t)}
.header .nav a::after{content:"";position:absolute;left:0;bottom:0;height:2.5px;width:0;border-radius:2px;background:#fff;transition:width var(--t)}
.header .nav a:hover::after,.header .nav a.active::after{width:100%}

/* Niente margin-left:auto: con il menu nel flusso quell'auto si sommerebbe ai
   suoi e spingerebbe le voci fuori centro. */
.head-cta{display:flex;align-items:center;gap:12px;flex:none}
.head-phone{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--head)}
.head-phone svg{width:17px;height:17px;fill:none;stroke:var(--accent);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.header .head-phone{color:#fff}
.header .head-phone svg{stroke:#fff}
/* I titolari sono due e rispondono entrambi: i numeri stanno incolonnati
   invece che affiancati, altrimenti la barra non chiude più a destra.
   Ognuno porta la sua icona del telefono: entrambe le righe sono un
   collegamento a una chiamata, e l'icona lo dice a colpo d'occhio.
   I due nomi sono lunghi diversi — Pierluigi e Danny — quindi con nome e
   numero in un'unica riga di testo i numeri partivano sfalsati. Ora ogni
   riga è tre celle (icona, nome, numero) e le colonne sono quelle del
   contenitore: i numeri si incolonnano da soli, senza larghezze a mano. */
.head-phones{display:grid;grid-template-columns:auto auto auto;column-gap:8px;row-gap:1px;line-height:1.3;flex:none}
.head-phones .head-phone{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;gap:0 8px;font-size:.84rem}
/* Senza subgrid (browser vecchi) le colonne tornano indipendenti: qui il
   nome tiene una larghezza minima, che è la misura di «Pierluigi». */
@supports not (grid-template-columns:subgrid){
  .head-phones{display:flex;flex-direction:column}
  .head-phones .head-phone{display:flex}
  .head-phones .hp-name{min-width:62px}
}

/* ---------- Interruttore giorno / notte ---------- */
.theme-toggle{
  position:relative;width:44px;height:44px;border-radius:14px;flex:none;
  display:grid;place-items:center;
  background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--line);
  transition:background var(--t),box-shadow var(--t),transform var(--t);
}
.theme-toggle:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1.5px var(--accent)}
.header .theme-toggle{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.header .theme-toggle:hover{box-shadow:inset 0 0 0 1.5px #fff}
/* Le due icone stanno nella stessa cella: cambia solo quale è visibile */
.tt-ico{display:grid;place-items:center;width:20px;height:20px;flex:none}
.tt-ico svg{
  grid-area:1/1;width:20px;height:20px;
  fill:none;stroke:var(--head);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity var(--t),transform 320ms var(--ease);
}
.header .tt-ico svg{stroke:#fff}
/* L'icona mostrata è quella che ottieni cliccando */
.tt-ico .ico-sun{opacity:0;transform:rotate(-70deg) scale(.6)}
.tt-ico .ico-moon{opacity:1;transform:none}
:root[data-theme="night"] .tt-ico .ico-sun{opacity:1;transform:none;stroke:#FFD36A}
:root[data-theme="night"] .tt-ico .ico-moon{opacity:0;transform:rotate(70deg) scale(.6)}

.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--head);position:relative;transition:var(--t)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2.5px;border-radius:2px;background:var(--head);transition:var(--t)}
.header .burger span,.header .burger span::before,.header .burger span::after{background:#fff}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger.is-open span{background:transparent}
.burger.is-open span::before{top:0;transform:rotate(45deg)}
.burger.is-open span::after{top:0;transform:rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:45;background:var(--overlay);padding:110px var(--gut) 40px;
  display:flex;flex-direction:column;gap:2px;transform:translateY(-100%);
  transition:transform 340ms var(--ease);overflow-y:auto;
}
.mobile-nav.is-open{transform:translateY(0)}
/* :not(.btn) è necessario, non cosmetico. Con il selettore su tutti gli "a",
   questa riga (0,1,1) vinceva su .btn--primary (0,1,0) e tingeva di --head il
   bottone dentro al menu: navy scuro sul gradiente blu, contrasto 1,68 — ed
   era la chiamata all'azione principale sul telefono. Trovato il 15 agosto
   2026, sfuggito prima perché il menu compatto si misura solo da aperto. */
.mobile-nav a:not(.btn){font-family:var(--f-display);font-size:1.6rem;font-weight:800;letter-spacing:-.02em;padding:15px 0;border-bottom:1px solid var(--line);color:var(--head)}
.mobile-nav .btn{margin-top:24px;align-self:flex-start}
.mobile-theme{
  display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 18px;
  border-radius:16px;background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--line);
  font-family:var(--f-display);font-weight:700;font-size:.95rem;color:var(--head);align-self:flex-start;
}

/* =========================================================
   HERO — kit electric: backgrounds/{day,night}-hero-electric.svg
   ========================================================= */
/* Il respiro sotto l'hero lo dava la barra di ricerca, che si appoggiava sulla
   giunzione con un margin-top negativo. Tolta quella, l'hero se lo prende da sé:
   se la barra tornasse, questo padding va rimesso a 0. */
.hero{position:relative;padding:clamp(16px,1.8vw,26px) 0 clamp(18px,2vw,28px)}
.hero-shell{
  position:relative;border-radius:var(--dp-radius-lg);overflow:hidden;
  background:var(--elev);border:1px solid var(--line);box-shadow:var(--shadow);
  padding:clamp(22px,2.2vw,32px) clamp(24px,3vw,52px) clamp(30px,2.9vw,40px);
}
/* Lo sfondo hero del kit sostituisce le forme geometriche che prima erano
   ricostruite a mano con dei gradienti. È ancorato in basso perché la scia
   della strada sta nella metà inferiore dell'SVG: così su un hero largo e
   basso resta visibile, e la line-art dell'auto (in alto a destra nell'SVG)
   viene tagliata fuori invece di finire dietro ai due titolari. */
.hero-shell::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url(../kit/electric/backgrounds/day-hero-electric.svg) center bottom/cover no-repeat;
  /* Di giorno il testo dell'hero è blu scuro e cade proprio sopra la fascia
     blu piena dell'SVG: attenuandolo resta una velatura, e il testo si legge.
     Di notte il testo è bianco su fondo scuro, quindi va a piena forza. */
  opacity:.34;
}
:root[data-theme="night"] .hero-shell::before{
  background-image:url(../kit/electric/backgrounds/night-hero-electric.svg);
  opacity:1;
}
/* Di notte lo sfondo va a piena forza e la scia della strada passa proprio
   all'altezza della seconda riga del titolo: il rosso finiva sopra l'azzurro
   chiaro della scia e non si leggeva. Il testo sta tutto nel 43% sinistro del
   pannello, quindi lì sotto l'illustrazione viene abbassata e la velatura si
   dissolve prima di arrivare ai titolari. Non è un riquadro: a metà
   pannello è già quasi trasparente e il bordo non si vede. */
:root[data-theme="night"] .hero-shell::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(11,33,80,.92) 0%,
    rgba(11,33,80,.86) 26%,
    rgba(11,33,80,.52) 44%,
    rgba(11,33,80,0)   62%);
}
.hero-corner-red{
  position:absolute;top:0;right:0;z-index:1;width:clamp(90px,9vw,150px);height:auto;pointer-events:none;
}
.hero-dots{position:absolute;top:14%;right:31%;z-index:1;width:clamp(80px,9vw,140px);opacity:.55;pointer-events:none}
/* La scia della strada la porta ora lo sfondo del kit: lo swoosh in più
   sarebbe una seconda curva sovrapposta alla prima. */
.hero-swoosh{display:none}

.hero-grid{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(20px,3vw,48px)}
.hero-inner{flex:1 1 auto;min-width:0}
/* I due titolari, in tuta blu e bianca: colori pieni, quindi funzionano su
   entrambi i temi senza riquadro o alone di contrasto dietro.
   Qui comanda l'altezza, non la larghezza: sono due figure in piedi, alte
   poco più del triplo di quanto sono larghe, e dandogli una larghezza
   sfonderebbero il pannello in verticale. Il margine negativo in basso le
   porta a poggiare sul bordo del pannello invece di galleggiare sopra la sua
   imbottitura; l'hero ha overflow:hidden, quindi non esce niente. */
.hero-titolari{
  flex:none;height:clamp(230px,26vw,320px);width:auto;
  /* In mezzo allo spazio libero a destra del testo, non appoggiate al bordo:
     incollate all'imbottitura del pannello sembravano spinte fuori, e in
     basso schiacciate contro la base. Il margine destro cresce con la
     finestra perché è lo spazio libero a crescere: a larghezza piena vale
     una novantina di pixel, quanto basta a staccarle dallo spigolo rosso. */
  align-self:center;margin-right:clamp(0px,5vw,90px);
  filter:drop-shadow(0 18px 30px rgba(10,29,68,.18));
}
:root[data-theme="night"] .hero-titolari{
  filter:drop-shadow(0 20px 38px rgba(0,0,0,.5));
}
.hero h1{margin:12px 0 0;font-size:clamp(2rem,3.2vw,3.1rem)}
.hero h1 em{font-style:normal;color:var(--accent)}
:root[data-theme="night"] .hero h1 em{color:var(--red-2)}
.hero-sub{margin-top:12px;max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* =========================================================
   Barra ricerca — ui/inventory_search_bar.svg
   ========================================================= */
.searchbar{
  position:relative;z-index:5;margin-top:-28px;
  background:var(--surface);border:1px solid var(--line);border-radius:26px;
  box-shadow:var(--shadow-lg);padding:14px;
}
.searchbar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px}
/* Su mobile la barra si apre solo se serve */
.searchbar-toggle{
  display:none;width:100%;align-items:center;gap:10px;
  padding:14px 16px;border-radius:16px;background:var(--accent-soft);
  font-family:var(--f-display);font-weight:700;font-size:.92rem;color:var(--head);
}
.searchbar-toggle svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:14;stroke-linecap:round}
.searchbar-toggle .sb-caret{margin-left:auto;stroke:currentColor;stroke-width:2.4;transition:transform var(--t)}
.searchbar.is-open .searchbar-toggle .sb-caret{transform:rotate(180deg)}
.sfield{position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:11px 16px;transition:border-color var(--t)}
.sfield:hover{border-color:var(--line-2)}
.sfield:focus-within{border-color:var(--accent)}
.sfield label{display:block;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);margin-bottom:3px}
.sfield select{
  width:100%;border:0;background:transparent;appearance:none;cursor:pointer;
  font-family:var(--f-display);font-size:.95rem;font-weight:700;color:var(--head);
  padding-right:18px;outline:none;
}
.sfield select option{background:var(--surface);color:var(--txt)}
.sfield::after{
  content:"";position:absolute;right:16px;bottom:19px;width:8px;height:8px;
  border-right:2.4px solid var(--txt-3);border-bottom:2.4px solid var(--txt-3);
  transform:rotate(45deg);pointer-events:none;transition:border-color var(--t);
}
.sfield:hover::after{border-color:var(--accent)}
.searchbar .btn{border-radius:18px;padding-inline:34px}

/* =========================================================
   VETRINA — card veicolo da ui/vehicle_card_shell.svg
   ========================================================= */
.showcase-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-bottom:16px;
}
.showcase-head h2{font-size:clamp(1.5rem,2.4vw,2.2rem)}
.showcase-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-bottom:20px;
}
.showcase-count{font-size:.9rem;color:var(--txt-2);margin-top:6px}
.showcase-count b{font-family:var(--f-display);color:var(--head);font-weight:800}
.showcase-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sortbox{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--txt-3)}
.sortbox select{
  background:var(--surface);border:1.5px solid var(--line);border-radius:13px;padding:9px 14px;
  font-family:var(--f-display);font-size:.86rem;font-weight:600;color:var(--head);cursor:pointer;
  transition:border-color var(--t);
}
.sortbox select:hover{border-color:var(--accent)}

/* Chip — ui/filter_chip.svg */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:34px;
  background:var(--surface);border:2px solid var(--line);
  font-size:.87rem;font-weight:600;color:var(--txt-2);
  transition:border-color var(--t),color var(--t),background var(--t);
}
.chip::before{content:"";width:11px;height:11px;border-radius:99px;background:var(--line-2);transition:background var(--t)}
.chip:hover{border-color:var(--line-2);color:var(--head)}
.chip.is-active{border-color:var(--accent);background:var(--accent-soft);color:var(--head)}
.chip.is-active::before{background:var(--red)}
.chip small{color:var(--txt-3);font-weight:500}
.chip.is-active small{color:var(--accent)}

.veh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

.veh{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:30px;
  box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.veh:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.veh.is-hidden{display:none}

/* Area "foto" */
.veh-photo{
  position:relative;margin:16px 16px 0;border-radius:24px;overflow:hidden;
  background:linear-gradient(168deg,var(--photo-1),var(--photo-2));
  aspect-ratio:16/10;display:grid;place-items:center;
}
.veh-photo::after{
  content:"";position:absolute;left:12%;right:12%;bottom:15%;height:12px;border-radius:99px;
  background:radial-gradient(ellipse at center,var(--photo-floor),transparent 70%);
}
.veh-photo .car{width:86%;position:relative;z-index:1;transition:transform 420ms var(--ease)}
.veh:hover .veh-photo .car{transform:translateX(7px) scale(1.03)}

/* Fotografia reale al posto della sagoma SVG. L'ombra a pavimento del ::after è
   disegnata per la sagoma: sotto una foto che riempie il riquadro diventa una
   macchia scura in mezzo all'immagine, quindi va spenta. */
.veh-photo:has(img)::after{content:none}
/* In posizione assoluta, non come elemento di griglia: con `place-items:center`
   la foto detterebbe l'altezza del riquadro e l'aspect-ratio 16/10 verrebbe
   ignorato, così una foto verticale sfonderebbe la card. */
.veh-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform 420ms var(--ease);
}
.veh:hover .veh-photo img{transform:scale(1.04)}

.demo-tag{
  position:absolute;left:14px;bottom:14px;z-index:3;
  background:rgba(3,16,43,.78);color:#fff;border-radius:8px;
  padding:4px 9px;font-size:.6rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
}

/* Badge — ui/badge_*.svg */
.veh-badges{position:absolute;top:14px;left:14px;z-index:3;display:flex;gap:7px;flex-wrap:wrap}
.badge{
  display:inline-flex;align-items:center;gap:7px;border-radius:18px;padding:7px 13px;
  font-family:var(--f-display);font-size:.68rem;font-weight:700;letter-spacing:.04em;color:#fff;
}
.badge svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.badge--certified{background:var(--deep-1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.badge--new{background:var(--accent)}
/* Testo bianco a 10,9px: di notte --accent è più chiaro e il rapporto scende
   a 4,20. --accent-dk lo riporta a 6,55 senza cambiare la tinta. */
:root[data-theme="night"] .badge--new{background:var(--accent-dk)}
.badge--offer{background:linear-gradient(135deg,var(--red-2),var(--red))}

.veh-fav{
  position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;border-radius:99px;
  background:var(--surface);box-shadow:var(--shadow-sm);display:grid;place-items:center;transition:var(--t);
}
.veh-fav svg{width:18px;height:18px;fill:none;stroke:var(--head);stroke-width:2;transition:var(--t)}
.veh-fav:hover{transform:scale(1.08)}
.veh-fav.is-on svg{fill:var(--red);stroke:var(--red)}

.veh-body{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1}
.veh-brand{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-accent)}
.veh-body h3{margin:7px 0 0}
.veh-body h3 a{transition:color var(--t)}
.veh:hover .veh-body h3 a{color:var(--accent)}
.veh-trim{font-size:.86rem;color:var(--txt-3);margin-top:5px}

/* Riga sotto i dati — dal card shell */
.veh-rule{height:2px;background:var(--line);margin:16px 0 0;position:relative;border-radius:2px}
.veh-rule::after{content:"";position:absolute;left:0;top:-1.5px;width:32%;height:5px;border-radius:3px;background:var(--rule-accent)}

.veh-specs{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:16px;font-size:.82rem;color:var(--txt-2)}
.veh-specs li{display:flex;align-items:center;gap:7px}
.veh-specs li svg{width:15px;height:15px;fill:none;stroke:var(--txt-3);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;flex:none}

.veh-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:auto;padding-top:18px}
.veh-price small{display:block;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);margin-bottom:4px}
.veh-price b{font-family:var(--f-display);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--head)}
.veh-rate{font-size:.78rem;color:var(--txt-3);text-align:right;line-height:1.35}
.veh-rate b{display:block;font-family:var(--f-display);font-size:.98rem;font-weight:700;color:var(--accent)}

.veh-actions{display:grid;grid-template-columns:1fr 1.1fr;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.veh-actions .btn{padding:12px 14px;font-size:.84rem;border-radius:16px}

.empty{
  display:none;padding:56px 24px;text-align:center;color:var(--txt-3);
  background:var(--surface);border:2px dashed var(--line);border-radius:var(--dp-radius-md);
}
.empty.is-on{display:block}
.empty button{color:var(--accent);font-weight:700;margin-top:8px}

.showcase-more{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:36px}

/* =========================================================
   Trust strip — banners/trust_strip.svg + icone playful
   ========================================================= */
.trust{
  background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden;
}
.trust-item{padding:26px 22px;border-left:1px solid var(--line);display:flex;gap:14px;align-items:center}
.trust-item:first-child{border-left:0}
.trust-item > svg{width:38px;height:38px;flex:none;fill:none;stroke:var(--accent);stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.trust-item > svg.pl{stroke:none;stroke-width:0;width:42px;height:42px}
.trust-item b{display:block;font-family:var(--f-display);font-size:.95rem;font-weight:700;color:var(--head)}
.trust-item span{display:block;font-size:.8rem;color:var(--txt-3);margin-top:3px}

/* =========================================================
   Stats strip — ui/stats_strip.svg
   ========================================================= */
/* Sopra il gradiente corre la scena "electric" del kit (griglia + scia
   luminosa della strada): il gradiente resta come fondo di sicurezza se
   l'SVG non carica, e i .stat hanno già z-index:1.
   Di notte la scena notturna fa da fondo e basta. Di giorno no: quella
   diurna ha un fondo bianco opaco, e messa come fondo pieno spegneva la
   fascia in un grigio-blu smorto. Qui invece la fascia è il blu elettrico
   del marchio — lo stesso gradiente di .header, .btn--primary e .cta--blue,
   così la striscia si lega al resto della pagina di giorno — e la scena ci
   passa sopra in multiply: il bianco della scena non tocca il blu, la scia
   e il reticolo lo scuriscono soltanto. Il multiply non può schiarire, e
   quindi non può peggiorare il contrasto rispetto al gradiente nudo. */
/* Il multiply spegne anche la sbavatura rossa della scena e la lascia nera:
   stonava. Qui sopra ci ripassa la stessa sbavatura, stesso viewBox e stesso
   center/cover, quindi cade esattamente sopra l'altra — 16 di tratto contro
   12, per coprirla tutta — e questa non è blesa dal multiply: resta rossa.
   Se cambi background-size o background-position della fascia, cambiali su
   tutti e due i livelli o le due sbavature si sfilano. */
.stats{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 700'%3E%3Cpath d='M1102 477L1214 430' stroke='%23FF3B33' stroke-width='16' stroke-linecap='round'/%3E%3C/svg%3E") center/cover no-repeat,
    url(../kit/electric/backgrounds/day-section-electric.svg) center/cover no-repeat,
    linear-gradient(135deg,var(--accent-grad),var(--accent-dk));
  background-blend-mode:normal,multiply,normal;
  border-radius:30px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  overflow:hidden;position:relative;border:1px solid var(--line);
}
:root[data-theme="night"] .stats{
  background:
    /* velo: senza, la scia luminosa dell'SVG passa sotto al testo dei
       riquadri e lo rende poco leggibile */
    linear-gradient(rgba(4,14,38,.52),rgba(4,14,38,.52)),
    url(../kit/electric/backgrounds/night-section-electric.svg) center/cover no-repeat,
    linear-gradient(135deg,var(--deep-1),var(--deep-2));
  background-blend-mode:normal;
}
.stats::after{
  content:"";position:absolute;right:0;bottom:0;width:120px;height:120px;
  background:linear-gradient(215deg,transparent 50%,var(--red) 50%);opacity:.9;
}
.stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* niente triangolo: finirebbe sotto al testo dell'ultimo riquadro. Di notte
   il rosso lo portano i numeri dei passaggi; di giorno la fascia è già il
   blu del marchio e il rosso resta alla CTA che le sta sotto */
.stats--3::after{display:none}
.stat{padding:34px 28px;border-left:1px solid rgba(255,255,255,.14);position:relative;z-index:1}
.stat:first-child{border-left:0}
.stat svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(1.7rem,2.4vw,2.3rem);font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1}
.stat span{display:block;font-size:.8rem;color:rgba(255,255,255,.92);margin-top:8px}
/* Di notte la fascia è quasi nera e regge i colori della palette: azzurro
   sulle icone, rosso sui numeri, --deep-txt sul testo minuto.
   Di giorno il fondo è il blu elettrico, e lì quei tre non passano più:
   --accent-2 ci si confonde, --deep-txt misura 3,47 e il rosso 1,65, contro
   il 4,5 (3,0 per i numeri, che sono testo grande) richiesto da AA. Sul blu
   va tutto bianco: il testo pieno misura 5,99 sulla sosta chiara del
   gradiente, quello minuto 4,93. */
:root[data-theme="night"] .stat svg{stroke:var(--accent-2)}
:root[data-theme="night"] .stats--3 .stat b{color:var(--red-2)}
:root[data-theme="night"] .stat span{color:var(--deep-txt)}

/* =========================================================
   Servizi
   ========================================================= */
.srv{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--dp-radius-md);
  padding:28px 26px;transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.srv:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent)}
.srv h3{margin-bottom:8px}
.srv p{font-size:.9rem;color:var(--txt-2)}

/* Ritratti dei titolari in cima alla scheda.
   Il riquadro ha una proporzione fissa e la figura ci sta dentro "contain":
   le immagini arrivano in formati diversi (alcune larghe, con l'auto di
   fianco; altre strette, con i due in piedi) ma sono tutte alte quanto le
   figure, quindi a parità di riquadro Danny e Pierluigi vengono della stessa
   statura in ogni scheda. Restano appoggiati in basso, non centrati, se no
   sembrano sospesi. */
.srv--foto{padding-top:20px}
.srv-foto{
  position:relative;margin-bottom:20px;overflow:hidden;
  aspect-ratio:16/10;display:grid;place-items:center;
}
/* In posizione assoluta, non come elemento di griglia: con `place-items:center`
   sarebbe la figura a dettare l'altezza del riquadro, l'aspect-ratio verrebbe
   ignorato e le immagini verticali sfonderebbero la scheda. Stessa ragione per
   cui la foto dei veicoli sta assoluta dentro .veh-photo. */
.srv-foto img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center bottom;
  padding:12px 14px 0;transition:transform 420ms var(--ease);
}
.srv:hover .srv-foto img{transform:scale(1.035)}
/* Scheda senza ritratto: l'icona prende il posto della figura, così la fila
   di schede resta alla stessa altezza e non si apre un buco nella griglia. */
.srv-foto--icona svg{width:38%;max-width:120px;height:auto;fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================
   Banner CTA — banners/finance_cta.svg, test_drive_cta.svg
   ========================================================= */
.cta{
  position:relative;border-radius:var(--dp-radius-lg);overflow:hidden;
  padding:clamp(30px,3.4vw,46px) clamp(26px,3vw,44px);
  display:flex;align-items:center;gap:clamp(22px,3vw,42px);flex-wrap:wrap;
}
.cta-ico{
  width:clamp(74px,7vw,104px);height:clamp(74px,7vw,104px);border-radius:99px;
  display:grid;place-items:center;flex:none;
}
.cta-ico svg{width:46%;height:46%;fill:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.cta-ico svg.pl{width:62%;height:62%;stroke:none;stroke-width:0}
.cta-txt{flex:1 1 320px;min-width:0}
.cta h3{font-size:clamp(1.3rem,2vw,1.8rem);font-weight:800}
.cta p{margin-top:8px;font-size:.96rem}
.cta-corner{position:absolute;top:0;right:0;width:clamp(70px,7vw,110px);height:auto;pointer-events:none;z-index:1}
.cta > *:not(.cta-corner){position:relative;z-index:2}

/* Come header e .btn--primary: sosta chiara --accent-grad, non --accent-2.
   Di notte il riquadro ha già un fondo suo, più scuro, qui sotto. */
.cta--blue{background:linear-gradient(135deg,var(--accent-grad),var(--accent-dk));color:#fff}
.cta--blue h3{color:#fff}
.cta--blue .cta-ico{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.cta--blue .cta-ico svg{stroke:#fff}
.cta--blue p{color:#DCE8FF}
:root[data-theme="night"] .cta--blue{background:linear-gradient(135deg,#123a86,var(--deep-1))}

.cta--white{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.cta--white .cta-ico{background:var(--accent-soft);box-shadow:inset 0 0 0 3px var(--accent)}
.cta--white .cta-ico svg{stroke:var(--accent)}
.cta--white p{color:var(--txt-2)}

/* Newsletter */
.news-form{display:flex;gap:10px;flex:1 1 340px;min-width:0}
.news-form input{
  flex:1;min-width:0;border:0;border-radius:18px;padding:15px 20px;
  font-family:var(--f-body);font-size:.95rem;color:var(--dp-navy);background:#fff;outline:none;
}
/* Il campo ha il fondo bianco fisso in entrambi i temi, quindi qui non serve
   un token di tema ma il valore che passa AA sul bianco: --dp-muted (token
   invariante del kit) si ferma a 3,19, questo arriva a 5,25. È lo stesso
   colore di --txt-3 del tema giorno, scritto per esteso perché il fondo non
   cambia con il tema. */
.news-form input::placeholder{color:#5F6D83}
/* Il canale alternativo è un <button type="submit">, non un link: deve
   inviare lo stesso modulo per posta invece che su WhatsApp. */
.news-alt{flex-basis:100%;font-size:.85rem;color:#DCE8FF;text-decoration:underline;text-align:left}
.news-alt:hover{color:#fff}
.news-ok{display:none;flex-basis:100%;color:#fff;font-size:.9rem;font-weight:600}
.news-ok.is-on{display:block}
.news-ok a{color:#fff;text-decoration:underline}

/* =========================================================
   Testimonial — ui/testimonial_card_shell.svg
   ========================================================= */
.quote{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:30px;
  padding:30px 28px;display:flex;flex-direction:column;gap:16px;
  transition:transform var(--t),box-shadow var(--t);
}
.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.quote--empty{border-style:dashed;opacity:.75}
.quote--empty:hover{transform:none;box-shadow:none}
.quote--empty .stars svg{fill:var(--line-2)}
.quote--empty .quote-mark{color:var(--line-2)}
.ph{flex:1;display:flex;flex-direction:column;gap:10px}
.ph-line{display:block;height:11px;border-radius:6px;background:var(--line)}
.ph-line--short{width:62%}
.quote--empty footer div{display:flex;flex-direction:column;gap:7px}
.quote--empty .avatar{color:var(--txt-3)}
.quote-mark{width:52px;height:auto;color:var(--accent)}
.stars{display:flex;gap:4px}
.stars svg{width:16px;height:16px;fill:var(--red)}
.quote p{font-size:.95rem;color:var(--txt-2);line-height:1.7;flex:1}
.quote footer{display:flex;align-items:center;gap:13px;padding-top:16px;border-top:1px solid var(--line)}
.avatar{
  width:44px;height:44px;border-radius:99px;background:var(--accent-soft);flex:none;
  display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:.9rem;color:var(--head);
}
.quote footer b{display:block;font-size:.92rem;font-weight:700;color:var(--head)}
.quote footer span{font-size:.78rem;color:var(--txt-3)}

/* =========================================================
   Divisore — playful/04-section-divider-road.svg
   ========================================================= */
.divider{display:flex;align-items:center;justify-content:center;gap:22px;margin-block:clamp(28px,4vw,56px)}
.divider svg{width:100%;max-width:760px;height:auto;flex:none}
.divider .brand-mark{width:58px;max-width:58px}

/* Decorazioni */
.deco{position:absolute;pointer-events:none;z-index:0}
.deco--speed{top:6%;right:0;width:min(420px,34vw);opacity:.65}
.deco--road{bottom:0;left:0;width:min(360px,30vw);opacity:.35}
.deco--corner{top:0;left:0;width:min(180px,16vw);opacity:.25}
/* Le due arrivate da dp-dc-site-backgrounds: vedi il commento accanto ai
   simboli #p-circuit e #p-hex in assets/js/sprite.js. Di notte il fondo è
   scuro e le stesse tinte risaltano di più, quindi lì vanno smorzate. */
.deco--circuit{top:8%;right:0;width:min(520px,40vw);opacity:.55}
.deco--hex{bottom:4%;left:0;width:min(340px,26vw);opacity:.5}
:root[data-theme="night"] .deco--circuit{opacity:.38}
:root[data-theme="night"] .deco--hex{opacity:.34}
/* Una sezione che porta una decorazione deve tagliarla al proprio bordo,
   altrimenti spunta fuori dalla pagina. Non si può mettere su .section in
   generale: overflow:hidden su un antenato disattiva position:sticky, e le
   schede veicolo hanno la colonna laterale appiccicata. */
.section--decorata{overflow:hidden}

/* =========================================================
   Contatti — ui/contact_card_shell.svg
   ========================================================= */
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);overflow:hidden}
/* L'icona si centra sul dato, non su tutta la riga. Da flex era centrata sul
   blocco intero — nome più didascalia — e da quando i numeri e le caselle
   stanno a coppie la didascalia va spesso su due o tre righe: l'icona
   scivolava lì sotto, di fianco al testo piccolo invece che al numero.
   La riga è una griglia a due colonne; il <div> del testo sparisce con
   display:contents e i suoi figli diventano righe della griglia, una per
   ogni <b> e l'ultima per la didascalia. L'icona sta nella prima colonna e
   copre le righe dei <b>, mai quella della didascalia: si centra su quelle.
   Le righe qui sono tutte implicite, quindi la penultima non si può indicare
   con 1/-2 — le linee negative contano solo nella griglia dichiarata. Le due
   righe si chiedono quando ci sono davvero, cioè quando la riga ha due <b>. */
.contact-row{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line)}
.contact-row > div{display:contents}
.contact-row svg{grid-column:1;grid-row:1;align-self:center;width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.contact-row:has(b + b) svg{grid-row:1/span 2}
.contact-row svg.pl{width:30px;height:30px;stroke:none;stroke-width:0}
.contact-row b{grid-column:2;display:block;font-family:var(--f-display);font-size:.94rem;color:var(--head)}
/* Due voci nella stessa riga — i due numeri, le due caselle — stanno una
   sotto l'altra: incolonnate si leggono come una coppia, mentre di fianco,
   separate da un punto, sul telefono andavano a capo dove capitava. */
.contact-row b + b{margin-top:3px}
.contact-row span{grid-column:2;display:block;font-size:.85rem;color:var(--txt-3);margin-top:2px}
.contact-card .btn{margin:22px 26px 26px;width:calc(100% - 52px)}
/* due pulsanti in coda alla scheda: WhatsApp e telefono */
.contact-card .btn:has(+ .btn){margin-bottom:10px}
.contact-card .btn + .btn{margin-top:0}

/* ---------- Vieni a trovarci ----------
   Il riquadro della mappa tiene la sua forma anche da vuoto: prima il
   disegno con l'indirizzo, e solo dopo il pulsante l'iframe di Google, che
   entra al posto suo. Senza altezza propria il riquadro sarebbe alto quanto
   il testo e la pagina salterebbe di trecento pixel al caricamento. */
/* Il riquadro si allunga fino alla scheda dei contatti qui accanto: la
   griglia stira entrambi, e height:100% lo fa arrivare in fondo alla riga.
   Niente aspect-ratio: con un'altezza definita la proporzione detta la
   larghezza, e sul telefono il riquadro usciva di novanta pixel dalla sua
   colonna. L'altezza minima basta a tenerlo una finestra e non una striscia
   quando è da solo in colonna. */
.mappa-box{
  position:relative;overflow:hidden;width:100%;height:100%;min-height:320px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);
}
.mappa-box iframe{display:block;width:100%;height:100%;border:0}
.mappa-vuota{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:13px;padding:34px 28px}
.mappa-vuota svg{width:44px;height:auto}
.mappa-vuota b{font-family:var(--f-display);font-size:1.02rem;color:var(--head)}
.mappa-vuota p{font-size:.86rem;color:var(--txt-3);max-width:36ch;line-height:1.6}
.mappa-vuota .btn{margin-top:4px}

.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{
  width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;
  padding:15px 18px;font-family:var(--f-body);font-size:.94rem;color:var(--txt);
  appearance:none;outline:none;transition:border-color var(--t),box-shadow var(--t);
}
.form select option{background:var(--surface);color:var(--txt)}
.form textarea{resize:vertical;min-height:110px}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
.form input::placeholder,.form textarea::placeholder{color:var(--txt-3)}
.form-note{font-size:.76rem;color:var(--txt-3)}
/* Vedi .news-alt: anche qui il secondo canale è un pulsante di invio
   travestito da link, così il modulo resta uno solo. */
.form-alt{font-size:.85rem;color:var(--accent);text-decoration:underline;text-align:center;margin-top:-4px}
.form-alt:hover{color:var(--accent-dk)}
/* Di notte l'azzurro pieno sul fondo scuro sta sotto il contrasto minimo
   (4,2 contro 4,5): serve la variante chiara, che arriva a 7,1. */
:root[data-theme="night"] .form-alt{color:var(--accent-2)}
:root[data-theme="night"] .form-alt:hover{color:var(--txt)}
.form-ok{display:none;background:#EAF7EE;border:1px solid #B6E0C4;color:#1B7A3D;border-radius:16px;padding:14px 18px;font-size:.9rem;line-height:1.5}
:root[data-theme="night"] .form-ok{background:#0C2E1C;border-color:#1F6B41;color:#7BE0A5}
.form-ok.is-on{display:block}
.form-ok a{color:inherit;text-decoration:underline;font-weight:700}

/* =========================================================
   Footer — backgrounds/footer_background.svg
   ========================================================= */
.footer{position:relative;background:linear-gradient(135deg,var(--deep-1),var(--deep-2));color:var(--deep-txt);overflow:hidden;margin-top:clamp(40px,5vw,80px);border-top:1px solid var(--line)}
.footer-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;pointer-events:none;opacity:.8}
.footer-dots{position:absolute;left:0;bottom:14%;width:100%;height:auto;pointer-events:none;opacity:.5}
.footer .wrap{position:relative;z-index:2}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding:clamp(46px,5vw,76px) 0 46px}
.footer .brand-txt b{color:#fff}
/* Il passo unitario di .brand-txt nasce per la barra, dove nome e riga sotto
   stanno ognuno su una riga sola. Qui sotto invece la riga dei servizi va a
   capo appena lo schermo si stringe, e a interlinea 1 le due righe si
   toccavano — con il nome sopra altrettanto attaccato. Riga più bassa di un
   filo (.86rem) e interlinea 1.4. Di stacco dal nome basta un pixel: l'aria
   la fa già l'interlinea larga della riga piccola, che al corpo di .86rem
   vale cinque pixel e mezzo sopra il testo. A sei — la misura dell'indirizzo
   nella barra, che però ha interlinea unitaria — le due righe si staccavano
   troppo. Nessuna larghezza massima: sul telefono
   il capo cade da sé dopo «Vendita», e sul largo la riga resta una sola. */
.footer .brand-txt span{color:var(--deep-txt);opacity:.7;font-size:.86rem;line-height:1.4;margin-top:1px}
.footer-brand p{margin-top:18px;max-width:34ch;font-size:.9rem}
.footer h4{font-family:var(--f-display);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.footer li{margin-bottom:11px}
.footer li a{font-size:.9rem;transition:color var(--t),padding-left var(--t)}
.footer li a:hover{color:#fff;padding-left:5px}
.socials{display:flex;gap:9px;margin-top:22px}
/* Solo i FIGLI DIRETTI: dentro .socials adesso ci sono i pannelli dei due
   canali, e senza il > queste regole trasformavano ogni voce del pannello in
   un quadratino di 38 pixel con il testo accatastato dentro. */
.socials>a{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.09);display:grid;place-items:center;transition:background var(--t)}
.socials>a svg{width:16px;height:16px;fill:var(--deep-txt);transition:fill var(--t)}
.socials>a:hover{background:var(--red)}
.socials>a:hover svg{fill:#fff}
.footer-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 0 30px;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem}
/* Le due imprese vanno identificate per intero (art. 2250 c.c.), ma sono
   informazione di servizio: una riga per ciascuna, in corpo minore. */
.legale{display:flex;flex-direction:column;gap:3px;max-width:78ch}
.legale-riga{font-size:.74rem;opacity:.72;line-height:1.5}
.legale-riga b{font-weight:600;opacity:.92}
.footer-bot nav{display:flex;gap:22px;flex-wrap:wrap}
.footer-bot a:hover{color:#fff}

/* È l'unico punto in cui un testo minore sta su una fascia scura anche di
   giorno: --txt-3 lì è fuori posto (4,04 prima, 2,46 con il valore nuovo).
   --deep-txt è il token fatto apposta per le fasce profonde: 7,48 di giorno,
   8,62 di notte. Vale lo stesso per il footer, che già lo usa. */
.draft-note{background:var(--deep-1);color:var(--deep-txt);font-size:.74rem;text-align:center;padding:14px 20px;border-top:1px solid rgba(255,255,255,.1);margin:0}
.draft-note b{color:#fff}

/* =========================================================
   Pagine di testo — privacy, cookie, condizioni di vendita
   =========================================================
   Testo lungo da leggere, non da scorrere: misura corta (72ch),
   interlinea larga, gerarchia dei titoli evidente. Nessun
   componente nuovo oltre a questi, così restano coerenti col
   resto senza aggiungere superficie da mantenere. */
.testo-legale{max-width:72ch;font-size:.95rem;line-height:1.75;color:var(--txt-2)}
/* Il blu dei collegamenti non può essere quello dei pulsanti: misurato,
   --accent sul fondo notte dà 4,49 contro i 4,5 richiesti da WCAG AA, e
   4,23 dentro i riquadri. Nel testo lungo serve un blu più chiaro — questo
   dà 6,2 sul fondo pagina e 5,8 nei riquadri, restando saturo. Di giorno
   --accent va già bene (5,1 e 4,7) e resta quello. */
.testo-legale{--link:#4D93FF}
:root[data-theme="day"] .testo-legale{--link:var(--accent)}
.testo-legale > * + *{margin-top:1.1em}
.testo-legale h2{
  font-family:var(--f-display);font-size:clamp(1.12rem,1.5vw,1.34rem);font-weight:800;
  letter-spacing:-.02em;color:var(--head);line-height:1.25;
  margin-top:2.6em;padding-top:1.5em;border-top:1px solid var(--line);
}
.testo-legale h2:first-child{margin-top:0;padding-top:0;border-top:0}
.testo-legale h3{
  font-family:var(--f-display);font-size:1rem;font-weight:700;color:var(--head);
  margin-top:2em;
}
.testo-legale ul,.testo-legale ol{padding-left:1.4em;display:flex;flex-direction:column;gap:.5em}
.testo-legale li{list-style:disc}
.testo-legale ol > li{list-style:decimal}
.testo-legale li::marker{color:var(--accent)}
.testo-legale b,.testo-legale strong{color:var(--head);font-weight:600}
.testo-legale a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.testo-legale a:hover{text-decoration-thickness:2px}
/* Nomi tecnici (dp-theme, dp-intro): vanno distinti dal testo, perché sono
   stringhe da cercare nel browser, non parole italiane. */
.testo-legale code,.legale-dati code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em;background:var(--surface-3);border:1px solid var(--line);
  border-radius:6px;padding:1px 6px;color:var(--head);
}

/* «In breve»: il riassunto in cima. Serve a chi non legge tutto,
   e non sostituisce il testo — lo dice esplicitamente. */
.legale-breve{
  background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--dp-radius-sm);padding:20px 22px;
}
.legale-breve p{margin:0}
.legale-breve p + p{margin-top:.7em}

/* Indice: queste pagine sono lunghe e si consultano per punti. */
.legale-indice{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--dp-radius-sm);padding:18px 22px}
.legale-indice b{display:block;font-family:var(--f-display);font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--txt-3);margin-bottom:10px}
.legale-indice ol{padding-left:1.3em;gap:.35em;margin-top:0}
.legale-indice a{text-decoration:none}
.legale-indice a:hover{text-decoration:underline}

/* Dati di un'impresa: etichetta e valore, non una tabella —
   su telefono una tabella a due colonne diventa illeggibile. */
.legale-dati{
  display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);gap:6px 18px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--dp-radius-sm);
  padding:20px 22px;font-size:.9rem;margin-top:1.1em;
}
/* --txt-3 qui non basta: sul fondo chiaro dei riquadri misura 2,92. */
.legale-dati dt{color:var(--txt-2)}
.legale-dati dd{margin:0;color:var(--head)}
@media (max-width:560px){
  .legale-dati{grid-template-columns:1fr;gap:0}
  .legale-dati dt{margin-top:.8em;font-size:.8rem}
  .legale-dati dt:first-child{margin-top:0}
}

/* Cosa manca ancora: visibile, non nascosto in un commento HTML.
   Va rimosso prima della pubblicazione, non prima. */
.legale-manca{
  background:color-mix(in srgb,var(--red) 9%,var(--surface));
  border:1px solid color-mix(in srgb,var(--red) 34%,var(--line));
  border-radius:var(--dp-radius-sm);padding:18px 22px;font-size:.9rem;
}
/* --red sul fondo rosato del riquadro si ferma a 4,25 di giorno e 4,36 di
   notte: sotto soglia proprio nella riga che avverte di un punto da
   completare, cioè quella che deve leggersi meglio di tutte. */
.legale-manca b{color:#C70500}
:root[data-theme="night"] .legale-manca b{color:var(--red-2)}

/* Anche qui --txt-3 scendeva a 3,19 sul fondo chiaro: la data di ultimo
   aggiornamento è un'informazione che serve, non una nota di margine. */
.legale-agg{font-size:.84rem;color:var(--txt-2)}

/* =========================================================
   Pagina stock
   ========================================================= */
.page-head{position:relative;background:var(--surface-3);border-bottom:1px solid var(--line);padding:clamp(34px,4vw,60px) 0 clamp(30px,3.4vw,46px);overflow:hidden}
/* Al posto del cuneo pieno disegnato a mano, la scena "electric" del kit:
   stessa logica dell'hero, attenuata di giorno perché qui il testo è scuro. */
.page-head::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url(../kit/electric/backgrounds/day-section-electric.svg) center bottom/cover no-repeat;
  opacity:.36;
}
:root[data-theme="night"] .page-head::after{
  background-image:url(../kit/electric/backgrounds/night-section-electric.svg);
  opacity:.9;
}
.page-head > .wrap{position:relative;z-index:1}
.crumbs{display:flex;gap:9px;font-size:.82rem;color:var(--txt-3);margin-bottom:16px}
.crumbs a:hover{color:var(--accent)}

.stock-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:36px;align-items:start}
.filters{position:sticky;top:100px;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-sm);overflow:hidden}
.filters-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.filters-head b{font-family:var(--f-display);font-size:.94rem;color:var(--head)}
.filters-head button{font-size:.82rem;color:var(--accent);font-weight:600}
.fgroup{padding:20px 22px;border-bottom:1px solid var(--line)}
.fgroup:last-child{border-bottom:0}
.fgroup > b{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);margin-bottom:13px}
.fopt{display:flex;align-items:center;gap:11px;padding:6px 0;font-size:.88rem;color:var(--txt-2);cursor:pointer;transition:color var(--t)}
.fopt:hover{color:var(--accent)}
.fopt input{appearance:none;width:19px;height:19px;border:2px solid var(--line-2);border-radius:6px;background:var(--surface);flex:none;position:relative;transition:var(--t)}
.fopt input:checked{border-color:var(--accent);background:var(--accent)}
.fopt input:checked::after{content:"";position:absolute;left:5.5px;top:1.5px;width:4px;height:10px;border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.fopt .count{margin-left:auto;font-size:.78rem;color:var(--txt-3)}
.stock-layout .veh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

/* =========================================================
   Pagina veicolo
   ========================================================= */
.pdp{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(26px,3vw,48px);align-items:start}
.pdp-stage{
  position:relative;background:linear-gradient(168deg,var(--photo-1),var(--photo-2));
  border:1px solid var(--line);border-radius:28px;aspect-ratio:16/10;
  display:grid;place-items:center;overflow:hidden;
}
.pdp-stage::after{content:"";position:absolute;left:14%;right:14%;bottom:14%;height:16px;border-radius:99px;background:radial-gradient(ellipse at center,var(--photo-floor),transparent 70%)}
.pdp-stage .car{width:82%;position:relative;z-index:1}
.pdp-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.pdp-thumb{
  aspect-ratio:16/10;background:var(--surface-2);border:2px solid var(--line);border-radius:16px;
  display:grid;place-items:center;cursor:pointer;overflow:hidden;transition:border-color var(--t)
}
.pdp-thumb .car{width:84%;opacity:.6;transition:opacity var(--t)}
.pdp-thumb:hover .car,.pdp-thumb.is-on .car{opacity:1}
.pdp-thumb.is-on{border-color:var(--accent)}

/* Fotografie reali nella scheda veicolo. Come per le card, l'ombra a pavimento
   del ::after va spenta: sotto una foto piena diventa una macchia. */
.pdp-stage:has(img)::after{content:none}
.pdp-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Le miniature sono <button> per essere raggiungibili da tastiera: vanno
   azzerati i margini interni che il browser dà ai pulsanti. */
.pdp-thumb{padding:0;border-style:solid}
.pdp-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity var(--t)}
.pdp-thumb:has(img){position:relative}
.pdp-thumb:hover img,.pdp-thumb.is-on img{opacity:1}
.pdp-thumb:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.pdp-aside{position:sticky;top:100px;background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:28px}
.pdp-price{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.pdp-price small{display:block;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);margin-bottom:6px}
.pdp-price b{font-family:var(--f-display);font-size:2.2rem;font-weight:800;letter-spacing:-.03em;color:var(--head);line-height:1}
.pdp-rate{background:var(--accent-soft);border-radius:18px;padding:15px 18px;margin:18px 0;font-size:.85rem;color:var(--txt-2)}
.pdp-rate b{font-family:var(--f-display);color:var(--head);font-size:1.15rem}
.pdp-actions{display:grid;gap:10px}
.pdp-trust{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:11px;font-size:.86rem;color:var(--txt-2)}
.pdp-trust li{display:flex;align-items:center;gap:10px}
.pdp-trust svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.specs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.spec{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px}
.spec svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:11;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.spec span{display:block;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:6px}
.spec b{font-family:var(--f-display);font-size:1rem;font-weight:700;color:var(--head)}

.equip{columns:3;column-gap:36px}
.equip li{break-inside:avoid;padding:10px 0 10px 26px;position:relative;font-size:.9rem;color:var(--txt-2);border-bottom:1px solid var(--line)}
.equip li::before{
  content:"";position:absolute;left:0;top:15px;width:14px;height:14px;border-radius:99px;
  background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent);
}

/* ---------- Reveal ---------- */
html.js .rv{opacity:0;transform:translateY(20px)}
.rv{transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
html.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:70ms}.rv-d2{transition-delay:140ms}.rv-d3{transition-delay:210ms}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none}
}

/* =========================================================
   Responsive
   ========================================================= */
/* =========================================================
   Barra: quanto ci sta davvero
   Il contenuto è limitato a --maxw (1320px) meno due --gut da 60px, cioè
   1200px utili: oltre quella soglia allargare la finestra non aggiunge spazio
   alla barra.

   Misure prese sulla pagina vera: marchio 334, menu 489 (cinque voci con
   passi da 20), comandi 230 — i due telefoni e l'interruttore del tema.
   Totale 1053, che dentro i 1200 utili lascia 73px per parte.

   Le due voci nuove, «Vendi la tua auto» e «Dove siamo», hanno portato il
   menu da 260 a 489 e hanno reso impossibile la centratura assoluta di prima:
   vedi la nota sopra .nav.

   Dalla barra è sparito il bottone «Vendi la tua auto» (−158 sui comandi):
   con la voce di menu che porta allo stesso posto, erano la stessa parola due
   volte a tre centimetri di distanza. L'invito colorato resta dov'è sempre
   servito — nell'apertura della home e nel menu compatto.

   Il punto di rottura resta 1244, per una ragione nuova: a 1245 restano 30px
   fra marchio e prima voce, a 1280 ne restano 48, da 1440 in su 73. Sotto,
   il menu compatto. I telefoni scendono invece fino a 900px: da soli sono
   larghi 230px e a un concessionario servono.

   Se torna una voce o si allunga un'etichetta, questo è il primo numero da
   rimisurare.
   ========================================================= */
@media (max-width:1244px){
  .nav{display:none}
  .burger{display:flex}
}

@media (max-width:1180px){
  .hero-titolari{height:clamp(200px,22vw,250px)}
  .searchbar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .searchbar .btn{grid-column:1/-1}
  .veh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trust-item:nth-child(3n+1){border-left:0}
  .trust-item:nth-child(n+4){border-top:1px solid var(--line)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(2n+1){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
  /* i tre passaggi restano affiancati: a due colonne resterebbe un buco */
  .stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats--3 .stat{border-top:0;border-left:1px solid rgba(255,255,255,.14)}
  .stats--3 .stat:first-child{border-left:0}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .specs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .equip{columns:2}
  .stock-layout{grid-template-columns:1fr}
  .filters{position:static}
  .pdp{grid-template-columns:1fr}
  .pdp-aside{position:static}
}

@media (max-width:900px){
  /* Il telefono resta nella barra fin qui: da solo è largo 120px e a un
     concessionario serve più dell'interruttore del tema. Prima spariva
     insieme alla nav, cioè 360px prima del necessario. */
  .head-phone,.head-phones{display:none}
  .g-3{grid-template-columns:1fr}
  .stats--3{grid-template-columns:1fr}
  .stats--3 .stat{border-left:0}
  .stats--3 .stat + .stat{border-top:1px solid rgba(255,255,255,.14)}
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .hero-grid{flex-direction:column-reverse;align-items:flex-start;gap:14px}
  /* In colonna le figure stanno sopra al testo e a tutta larghezza: il
     margine destro, che in riga le stacca dal bordo, qui le sposterebbe
     fuori asse. */
  .hero-titolari{height:clamp(190px,34vw,240px);align-self:center;margin-right:0}
  .hero-corner-red{width:80px}
  .hero-dots{display:none}
  /* In colonna il testo occupa tutta la larghezza, quindi la velatura da
     sinistra non basta più: la scia gli ripasserebbe in mezzo. Qui conviene
     abbassare direttamente l'illustrazione — i titolari sono un elemento a
     parte e resta a piena forza. */
  :root[data-theme="night"] .hero-shell::before{opacity:.22}
  :root[data-theme="night"] .hero-shell::after{background:none}
}

@media (max-width:680px){
  /* Sotto i 680 la barra è marchio + interruttore + menu: l'indirizzo andrebbe
     a capo e la farebbe crescere. Resta nel footer e nella sezione contatti. */
  .header .brand-txt .brand-addr{display:none}
  /* Senza la riga dell'indirizzo il nome è tutto il blocco: la discesa di sei
     pixel della figurina qui non ha più niente da bilanciare. */
  .header .brand{--drop:0px}
  .head-cta .btn{display:none}
  .header .wrap{height:66px;gap:16px}
  .brand{--mk:46px}
  /* Trovato misurando la barra a 375px: .brand era flex:none, quindi il nome
     dell'attività (235px a 16px di corpo) non si restringeva mai e spingeva
     fuori dallo schermo prima l'interruttore e poi il pulsante del menu — che
     su un telefono è l'unico modo di navigare. Il body ha overflow-x:hidden,
     quindi non si vedeva una barra di scorrimento: spariva e basta.
     Qui il marchio può cedere spazio e il nome va a capo invece di sfondare. */
  .brand{flex:0 1 auto;min-width:0}
  .brand-txt{min-width:0}
  .header .brand-txt b{font-size:.86rem;line-height:1.2}
  /* Mobile: hero minimo, vetrina il prima possibile */
  .hero{padding-top:12px}
  .hero-shell{padding:20px 18px 26px;border-radius:24px}
  .hero .eyebrow{display:none}
  .hero h1{margin-top:0;font-size:1.72rem}
  .hero-sub{margin-top:10px;font-size:.92rem}
  .hero-actions{margin-top:16px;gap:10px}
  .hero-actions .btn{flex:1 1 0;padding-inline:12px;font-size:.86rem}
  .hero-titolari{height:180px}

  .searchbar{margin-top:-16px;padding:10px;border-radius:20px}
  .searchbar-toggle{display:flex}
  .searchbar-grid{display:none;grid-template-columns:1fr;gap:10px;margin-top:10px}
  .searchbar.is-open .searchbar-grid{display:grid}

  /* Chip su una riga scorrevole */
  .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .showcase-head{gap:12px;margin-bottom:12px}
  .showcase-tools{width:100%;justify-content:space-between}
  .veh-grid,.stock-layout .veh-grid,.g-2,.g-4{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  .trust-item{border-left:0;border-top:1px solid var(--line)}
  .trust-item:first-child{border-top:0}
  .stats{grid-template-columns:1fr}
  .stat{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .stat:first-child{border-top:0}
  .specs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .equip{columns:1}
  .form{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .pdp-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .showcase-bar{flex-direction:column;align-items:flex-start}
  .veh-actions{grid-template-columns:1fr}
}

/* =========================================================
   Intro — velo blu elettrico con il logo, poi dissolvenza
   Tutto in CSS: se il JS non parte, il velo se ne va lo stesso
   a fine animazione (opacity 0 + visibility hidden). Il JS serve
   solo a toglierlo dal DOM e a non ripeterlo a ogni pagina.
   ========================================================= */
.intro{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;align-content:center;
  gap:clamp(16px,2.4vw,26px);
  background:linear-gradient(135deg,#159EFF 0%,#0068FF 46%,#0538A8 100%);
  /* Curva simmetrica, non --ease: su una dissolvenza in uscita una ease-out
     scarica quasi tutta l'opacità nei primi millisecondi e il resto è una
     coda invisibile, che si legge come uno stacco netto. */
  animation:intro-out 950ms cubic-bezier(.5,0,.35,1) 1350ms forwards;
  will-change:opacity;
}
/* micro-texture del kit, appena percepibile, per non lasciare il velo piatto */
.intro::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url(../kit/electric/backgrounds/night-micro-pattern.svg) center/300px 300px repeat;
  opacity:.16;mix-blend-mode:screen;
}
.intro-logo{
  position:relative;width:min(380px,62vw);aspect-ratio:680/476;
  background:url(../img/dp-automotive-mark.png) center/contain no-repeat;
  filter:drop-shadow(0 22px 44px rgba(2,17,58,.45));
  /* Il logo se ne va un attimo prima del velo: così l'uscita si sfoglia in
     due tempi invece di sparire tutta insieme come un blocco solo. */
  animation:
    intro-logo-in 720ms var(--ease) both,
    intro-logo-out 700ms cubic-bezier(.5,0,.35,1) 1250ms forwards;
}
/* Il nome del brand: c'è e si legge, ma sta sotto al logo in tono minore —
   corpo contenuto, peso 700 invece di 800, bianco appena smorzato. La
   spaziatura larga lo fa leggere come firma, non come titolo. */
.intro-word{
  position:relative;margin:0;padding-inline:24px;text-align:center;text-wrap:balance;
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(.88rem,1.75vw,1.18rem);
  letter-spacing:.2em;text-transform:uppercase;
  color:#fff;opacity:.88;
  text-shadow:0 2px 14px rgba(2,17,58,.4);
  /* Entra dopo il logo e se ne va per prima: il marchio resta l'ultimo a
     uscire, e il nome non ruba la scena. */
  animation:
    intro-word-in 620ms var(--ease) 260ms both,
    intro-word-out 620ms cubic-bezier(.5,0,.35,1) 1200ms forwards;
}
@keyframes intro-logo-in{
  from{opacity:0;transform:translateY(16px) scale(.92)}
  to{opacity:1;transform:none}
}
@keyframes intro-logo-out{
  to{opacity:0;transform:translateY(-14px) scale(1.05)}
}
@keyframes intro-word-in{
  from{opacity:0;transform:translateY(10px);letter-spacing:.34em}
  to{opacity:.88;transform:none;letter-spacing:.2em}
}
@keyframes intro-word-out{
  to{opacity:0;transform:translateY(-8px)}
}
@keyframes intro-out{
  to{opacity:0;visibility:hidden}
}
/* Sui telefoni stretti il nome per intero, con la spaziatura piena, andrebbe
   a capo: la stringo invece di rimpicciolire ancora il corpo. */
@media (max-width:400px){
  .intro-word{letter-spacing:.12em;padding-inline:16px}
}
/* Già vista in questa sessione, oppure l'utente ha chiesto meno animazioni:
   niente velo, e nessun frame intermedio. */
html.intro-done .intro{display:none}
@media (prefers-reduced-motion:reduce){
  .intro{display:none}
}

/* I due canali del footer. Le icone erano sei — WhatsApp e busta ripetuti per
   ciascun titolare, più Facebook e Instagram che puntavano a href="#" — e due
   icone identiche in fila non si distinguono se non passandoci sopra col
   mouse, cosa che su un telefono non si può fare. Ora l'icona dice il canale e
   il pannello dice la persona: è l'ordine in cui uno decide. */
.socials-menu{position:relative}
.socials-menu>summary{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.09);display:grid;place-items:center;cursor:pointer;list-style:none;transition:background var(--t)}
/* La freccetta predefinita del <details> qui è rumore: il pannello si apre
   sotto l'icona e si vede da sé. */
.socials-menu>summary::-webkit-details-marker{display:none}
.socials-menu>summary::marker{content:""}
.socials-menu>summary svg{width:16px;height:16px;fill:var(--deep-txt);transition:fill var(--t)}
.socials-menu>summary:hover,.socials-menu[open]>summary{background:var(--red)}
.socials-menu>summary:hover svg,.socials-menu[open]>summary svg{fill:#fff}
.socials-menu>summary:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Il pannello si apre VERSO L'ALTO: il footer è in fondo alla pagina, e verso
   il basso finirebbe fuori dallo schermo proprio quando si è già in fondo. */
.socials-menu__voci{position:absolute;bottom:calc(100% + 9px);left:0;z-index:6;min-width:216px;display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.socials-menu__voci a{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:10px;color:var(--txt);transition:background var(--t)}
.socials-menu__voci a:hover{background:var(--surface-2)}
.socials-menu__voci b{font-size:.86rem;font-weight:600}
.socials-menu__voci span{font-size:.76rem;color:var(--txt-3)}