/* ===== sito.css — base condivisa di goldcarvalenza.com =====
   Caricato da index.html e auto.html: palette (design token), reset, layout
   di base e i componenti della vetrina (card, filtri, chip, lightbox).
   Prima ogni pagina aveva la sua copia e le repliche rischiavano di divergere.
   Gli stili SOLO di pagina (hero, sezioni, galleria…) restano nelle pagine. */

:root{
  --bg:#0f0f0f;
  --bg-soft:#161616;
  --surface:#1c1c1c;
  --surface-2:#242424;
  --line:rgba(232,197,71,.14);
  --gold:#E8C547;
  --gold-soft:#f3dd8f;
  --gold-deep:#b89422;
  --green:#009246;
  --red:#CE2B37;
  --white:#F5F5F5;
  --muted:#9a9a92;
  --muted-2:#8d8d84;
  --shadow:0 24px 60px -20px rgba(0,0,0,.8);
  --radius:18px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Poppins',system-ui,sans-serif;
  background:var(--bg);
  color:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* grana sottile su tutto */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2}
.gold-text{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold) 40%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tricolor-bar{display:inline-flex;gap:4px;align-items:center}
.tricolor-bar span{height:4px;border-radius:2px}
.tricolor-bar span:nth-child(1){width:22px;background:var(--green)}
.tricolor-bar span:nth-child(2){width:22px;background:var(--white)}
.tricolor-bar span:nth-child(3){width:22px;background:var(--red)}

/* ====== VETRINA (card della griglia, filtri, badge) ====== */
.vetrina-filtri{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 4px}
.vetrina-chip{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);border-radius:100px;
  padding:8px 16px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:.25s;font-family:inherit}
.vetrina-chip.on{background:var(--gold);color:#1a1505;border-color:var(--gold);font-weight:600}
.vetrina-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;padding:20px 0 8px}
.vcar{cursor:pointer}
.vcar{background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;
  flex-direction:column;position:relative;transition:transform .35s var(--ease),border-color .35s}
.vcar::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--green),var(--white),var(--red));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.vcar:hover{transform:translateY(-8px);border-color:rgba(232,197,71,.4)}
.vcar:hover::before{transform:scaleX(1)}
.vcar-foto{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,#26262b,#33333a 55%,#1e1e23);overflow:hidden}
.vcar-foto img{width:100%;height:100%;object-fit:cover;display:block}
.vcar-foto .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vcar-foto .ph svg{width:96px;opacity:.22}
.vcar-foto .tag-arrivo{position:absolute;left:12px;top:12px;background:var(--gold);color:#1a1505;font-size:10.5px;
  font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border-radius:100px;padding:5px 12px}
.vcar-badges{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;z-index:2}
.vcar-badges .tb{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;border-radius:100px;padding:5px 11px;color:#fff}
.vcar-badges .tb.verde{background:var(--green)}
.vcar-badges .tb.rosso{background:var(--red)}
.vcar-vecchio{font-size:13px;color:var(--muted-2);text-decoration:line-through;font-weight:500;margin-right:8px}
.vcar-corpo{padding:18px;display:flex;flex-direction:column;gap:11px;flex:1}
.vcar-marca{font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.vcar-modello{font-size:18px;font-weight:700;line-height:1.25;margin-top:2px}
.vcar-versione{font-size:13px;color:var(--muted);font-weight:300;margin-top:1px}
.vcar-spec{display:flex;gap:6px;flex-wrap:wrap}
.vcar-spec span{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:100px;
  font-size:11px;font-weight:500;color:var(--muted);padding:4px 11px}
.vcar-desc{font-size:12.5px;color:var(--muted);line-height:1.55;font-weight:300;border-left:2px solid var(--gold);
  padding:2px 0 2px 12px;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.vcar-desc.aperta{display:block;-webkit-line-clamp:unset}
.vcar-desc b{color:var(--gold);font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;display:block;margin-bottom:3px;font-weight:600}
.vcar-fondo{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.vcar-prezzo{font-size:21px;font-weight:800;color:var(--gold)}
.vcar-rata{font-size:11px;color:var(--muted-2);font-weight:300}.vcar-rata b{color:var(--white);font-weight:600}
.vcar-cta{display:inline-flex;align-items:center;gap:7px;background:var(--gold);color:#1a1505;font-weight:600;
  font-size:13px;border-radius:100px;padding:10px 16px;box-shadow:0 8px 24px -8px rgba(232,197,71,.5);white-space:nowrap;transition:transform .25s var(--ease)}
.vcar-cta:hover{transform:translateY(-2px)}
.vetrina-arrivo-head{display:flex;align-items:center;gap:12px;padding:26px 0 0;font-weight:600;font-size:14px}
.vetrina-arrivo-head .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.vetrina-arrivo-head small{color:var(--muted);font-weight:300;font-size:12.5px}
.vetrina-caricamento{padding:40px 24px;text-align:center;color:var(--muted);font-weight:300}

/* chip garanzia ufficiale (dagli annunci, via vetrina-sync) */
.vcar-spec .chip-gar,.spec .chip-gar,.vcar-spec .chip-reale,.spec .chip-reale{background:rgba(232,197,71,.1);border-color:rgba(232,197,71,.4);color:var(--gold);font-weight:600}

/* vendute di recente: card spente, non cliccabili */
.vcar.venduta{cursor:default;opacity:.88}
.vcar.venduta:hover{transform:none}
.vcar.venduta:hover::before{transform:scaleX(0)}
.vcar.venduta .vcar-foto img{filter:grayscale(.45)}
.vcar-foto .tag-arrivo.venduta{background:rgba(20,20,20,.82);color:var(--white);border:1px solid rgba(255,255,255,.3)}
.vetrina-arrivo-head .dot.spenta{background:var(--muted-2);box-shadow:none}

/* ====== LIGHTBOX foto a schermo intero (pagina auto) ====== */
.lb{position:fixed;inset:0;z-index:100;background:rgba(8,8,8,.96);display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb img{max-width:96vw;max-height:88vh;object-fit:contain;-webkit-user-drag:none;user-select:none;touch-action:pan-y}
.lb-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);color:var(--white);font-size:20px;cursor:pointer;font-family:inherit}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:var(--white);font-size:20px;cursor:pointer;font-family:inherit}
.lb-nav.prev{left:12px}.lb-nav.next{right:12px}
.lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:12.5px;color:var(--muted);letter-spacing:1px}
@media(max-width:700px){.lb-nav{display:none}} /* su telefono si scorre col dito */

/* ===== MODALITA' GIORNO (richiesta di Davide, 2026-08-22) =====
   Il tema resta SCURO di default (identita' del marchio); il visitatore passa
   al giorno col bottone ☀️/🌙 nell'header (scelta in localStorage 'gc-tema',
   applicata prima del CSS da uno snippet inline nell'<head> di ogni pagina).
   Tutto il sito si schiarisce; il logo (scritte bianche) sta su una
   targhetta scura e resta sempre standard. Solo il lightbox rimane scuro. */
html.giorno{
  --bg:#f6f5f1; --bg-soft:#efede6; --surface:#ffffff; --surface-2:#f7f5ef;
  --line:rgba(160,130,30,.24);
  --gold:#b8922a; --gold-soft:#d9b954; --gold-deep:#8a6d15;
  --white:#1b1a17; --muted:#5f5e56; --muted-2:#83827a;
  --shadow:0 24px 60px -28px rgba(60,50,20,.22);
}
/* (2026-08-22, sera) modalita' giorno COMPLETA: anche hero, header e menu si
   schiariscono — scelta di Davide. Il logo, che ha scritte bianche, vive su
   una targhetta scura (regola nelle pagine) e resta sempre standard.
   Solo il lightbox rimane scuro: le foto vivono meglio sul nero. */
/* i fregi tricolore usano var(--white) come segmento centrale: di giorno
   quel token e' scuro, quindi il bianco va fissato esplicitamente */
html.giorno .tricolor-bar span:nth-child(2){background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
html.giorno .vcar::before{background:linear-gradient(90deg,var(--green),#fff,var(--red))}
/* componenti che sul nero usavano bianco-trasparente */
html.giorno .vetrina-chip{border-color:rgba(0,0,0,.16);background:rgba(0,0,0,.04)}
html.giorno .vetrina-chip.on{background:#c79a1e;border-color:#c79a1e;color:#fff}
html.giorno .vcar{background:var(--surface);box-shadow:0 12px 32px -20px rgba(60,50,20,.25)}
html.giorno .vcar-spec span,html.giorno .spec span{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.09)}
html.giorno .vcar-spec .chip-gar,html.giorno .spec .chip-gar,html.giorno .vcar-spec .chip-reale,html.giorno .spec .chip-reale{background:rgba(184,146,42,.1);border-color:rgba(184,146,42,.45);color:var(--gold-deep)}
html.giorno .vcar-cta{color:#fff;background:#c79a1e;box-shadow:0 8px 24px -8px rgba(199,154,30,.5)}
html.giorno .vcar-foto,html.giorno .galleria .grande{background:linear-gradient(135deg,#dedcd4,#cfccc2 55%,#e7e5dd)}
html.giorno .ph svg{stroke:#83827a}
/* il lightbox resta scuro sempre (le foto vivono meglio sul nero) */
html.giorno .lb-count{color:#9a9a92}

/* bottone giorno/notte (stesso linguaggio del burger) */
.tema-btn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;cursor:pointer;font-size:17px;line-height:1;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);transition:border-color .25s,transform .25s;font-family:inherit}
.tema-btn:hover{border-color:var(--gold);transform:translateY(-1px)}
html.giorno .tema-btn{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.2)}
/* elementi a fondo scuro fisso che usavano var(--white) come testo */
html.giorno .lb-x,html.giorno .lb-nav,html.giorno .vcar-foto .tag-arrivo.venduta{color:#F5F5F5}

/* ===== Correzioni dall'audit (2026-08-22) ===== */
/* la card e' un vero link: un <a> steso sotto tutta la card, CTA sopra */
.vcar-apri{position:absolute;inset:0;z-index:1;border-radius:16px}
.vcar-apri:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.vcar-cta{position:relative;z-index:2}
.vcar-badges,.vcar-foto .tag-arrivo{z-index:2}
/* contrasti della modalita' giorno: testo scuro sull'oro (come di notte),
   oro "da testo" piu' scuro dove il carattere e' piccolo */
html.giorno .vetrina-chip.on{color:#1a1505}
html.giorno .vcar-cta{color:#1a1505}
html.giorno{--gold-soft:#b8922a} /* il gradiente .gold-text non parte piu' quasi bianco */
html.giorno .vcar-desc b{color:var(--gold-deep)}

/* ===== Rifiniture dalla review (2026-08-22) ===== */
/* "Vedi tutte le in arrivo": la home mobile non deve attraversare 13 card
   per arrivare ai contatti. Riusa la pillola dei filtri, centrata. */
.arrivo-piu{text-align:center;margin-top:16px}

/* ===== Badge recensioni Google (2026-08-23) =====
   Il 4,9 su 73 recensioni e' l'asset di fiducia piu' forte e non compariva da
   nessuna parte: qui in home (hero) e nella scheda auto, accanto al prezzo,
   dove nasce il dubbio. Cliccabile: porta sulla scheda vera. */
.gbadge{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(232,197,71,.35);
  border-radius:100px;padding:8px 16px;transition:border-color .25s,background .25s}
.gbadge:hover{border-color:var(--gold);background:rgba(232,197,71,.08)}
.gbadge:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gbadge-voto{font-size:17px;font-weight:800;color:var(--gold);line-height:1}
.gbadge-stelle{font-size:12px;color:var(--gold);letter-spacing:1px;line-height:1}
.gbadge-txt{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1}
@media(max-width:359px){.gbadge{padding:7px 12px;gap:6px}.gbadge-stelle{display:none}}
html.giorno .gbadge{background:rgba(0,0,0,.03);border-color:rgba(184,146,42,.4)}
html.giorno .gbadge:hover{background:rgba(184,146,42,.08);border-color:var(--gold-deep)}
html.giorno .gbadge-voto,html.giorno .gbadge-stelle{color:var(--gold-deep)}
/* In fondo alla pagina, non accanto al prezzo (richiesta di Davide 23/08):
   li' era una spinta, qui e' una conferma per chi ha gia' letto tutto. */
.foot-recensioni{display:flex;justify-content:center;padding:4px 0 22px}
.recensioni-fondo{display:flex;justify-content:center;margin-top:34px}
@media print{.gbadge{border-color:#d9c78a;background:#faf3dc}
  .gbadge-voto,.gbadge-stelle{color:#7a6015}.gbadge-txt{color:#333}}

/* ---- Storia chilometrica (2026-08-26): card della pagina auto ---- */
.km-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;padding:18px 16px 14px;margin-top:34px;max-width:760px;position:relative}
.km-head{display:flex;align-items:center;justify-content:space-between}
.km-kicker{color:var(--gold);font-size:12px;letter-spacing:2.5px;text-transform:uppercase;font-weight:600}
.km-chip{background:rgba(232,197,71,.1);border:1px solid rgba(232,197,71,.4);color:var(--gold);border-radius:99px;font-size:10.5px;font-weight:600;padding:3px 10px}
.km-card svg{display:block;width:100%;height:auto;margin-top:6px}
.km-grid line{stroke:var(--line)}
.km-tick{fill:var(--muted-2);font-size:9.5px;font-weight:500}
.km-linea{stroke:var(--gold);stroke-width:2;fill:none;stroke-linejoin:round}
.km-area{fill:var(--gold);opacity:.1}
.km-dot{fill:var(--gold);stroke:var(--bg-soft);stroke-width:2;cursor:pointer}
.km-oggi-txt{fill:var(--gold-soft);font-size:10.5px;font-weight:600}
.km-sotto{font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.5;margin-top:10px}
.km-sotto b{color:var(--white);font-weight:600}
.km-fonte{font-size:10.5px;color:var(--muted-2);font-weight:300;margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.km-tip{position:absolute;background:var(--bg-soft);border:1px solid rgba(232,197,71,.4);border-radius:8px;padding:6px 10px;font-size:11px;color:var(--muted);pointer-events:none;transform:translate(-50%,-115%);white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.35);z-index:5}
.km-tip b{color:var(--white);display:block}
html.giorno .km-kicker,html.giorno .km-chip{color:var(--gold-deep)}
html.giorno .km-chip{background:rgba(184,146,42,.1);border-color:rgba(184,146,42,.45)}
html.giorno .km-oggi-txt{fill:var(--gold-deep)}
html.giorno .km-dot{stroke:var(--bg-soft)}
@media print{.km-card{display:none}} /* la scheda stampata resta com'era: il grafico vive solo online */