/* ============================================================
   STYLE.CSS — Aspetto grafico del sito Business Cars
   ============================================================
   Per cambiare i colori principali del sito, modifica solo i
   valori qui sotto in ":root". Tutto il resto del sito si
   aggiorna automaticamente.
   ============================================================ */

:root {
  /* Colori principali: grigio antracite + rosso (come il cartello Business Cars) */
  --antracite: #2f3237;          /* grigio scuro: intestazioni, titoli, sfondi scuri */
  --antracite-scuro: #1b1d21;    /* grigio quasi nero: footer, sfondi più scuri */
  --accento: #ce171e;           /* rosso: pulsanti, dettagli, "Cars" nel logo */
  --accento-scuro: #a8121e;     /* rosso scuro: testi rossi su fondo chiaro */
  --accento-chiaro: #ff6b73;    /* rosso chiaro: testi rossi su fondo scuro */
  --grigio-chiaro: #f4f4f5;
  --grigio: #e3e4e7;
  --testo: #1f2124;
  --testo-chiaro: #5f6368;
  --bianco: #ffffff;
  --verde-ok: #2e9e5b;
  --radius: 14px;
  --radius-sm: 8px;
  --ombra: 0 10px 30px rgba(20, 22, 26, 0.08);
  --ombra-hover: 0 18px 40px rgba(20, 22, 26, 0.16);
  --transizione: 0.25s ease;
}

/* ---------- RESET BASE ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--testo);
  background: var(--bianco);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Poppins', 'Inter', sans-serif;
  line-height: 1.2;
  font-weight: 600;
  color: var(--antracite);
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ---------- BOTTONI ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform var(--transizione), box-shadow var(--transizione), background var(--transizione);
  white-space: nowrap;
}
.btn-primario {
  background: var(--accento);
  color: var(--bianco);
}
.btn-primario:hover { background: var(--accento-scuro); transform: translateY(-2px); box-shadow: var(--ombra-hover); }
.btn-secondario {
  background: transparent;
  color: var(--bianco);
  border: 2px solid rgba(255,255,255,0.5);
}
.btn-secondario:hover { background: rgba(255,255,255,0.12); border-color: var(--bianco); }
.btn-scuro {
  background: var(--antracite);
  color: var(--bianco);
}
.btn-scuro:hover { background: var(--antracite-scuro); transform: translateY(-2px); }
.btn-outline {
  background: transparent;
  border: 2px solid var(--antracite);
  color: var(--antracite);
}
.btn-outline:hover { background: var(--antracite); color: var(--bianco); }
.btn-block { width: 100%; }

/* ---------- HEADER / NAV ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--grigio);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--antracite);
}
.logo span { color: var(--accento); }
.logo-icona {
  width: 38px; height: 38px;
  background: var(--antracite);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accento);
  font-size: 1.1rem;
  overflow: hidden;
}
.logo-icona-img { width: 26px; height: auto; display: block; }
.nav-links {
  display: none;
  align-items: center;
  gap: 34px;
  font-weight: 500;
}
.nav-links a {
  position: relative;
  padding: 6px 0;
  color: var(--testo);
  transition: color var(--transizione);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--accento);
  transition: width var(--transizione);
}
.nav-links a:hover,
.nav-links a.attivo { color: var(--antracite); }
.nav-links a:hover::after,
.nav-links a.attivo::after { width: 100%; }

.nav-azioni { display: flex; align-items: center; gap: 14px; }
.nav-tel {
  display: none;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--antracite);
}
.nav-tel .icona { color: var(--accento); }

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  padding: 8px;
}
.hamburger span {
  width: 24px; height: 2px;
  background: var(--antracite);
  border-radius: 2px;
  transition: all var(--transizione);
}
.hamburger.aperto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.aperto span:nth-child(2) { opacity: 0; }
.hamburger.aperto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: var(--bianco);
  border-top: 1px solid var(--grigio);
  padding: 10px 20px 20px;
}
.menu-mobile.aperto { display: flex; }
.menu-mobile a {
  padding: 14px 4px;
  border-bottom: 1px solid var(--grigio-chiaro);
  font-weight: 500;
}
.menu-mobile .btn { margin-top: 12px; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background:
    linear-gradient(115deg, rgba(27,29,33,0.92) 20%, rgba(47,50,55,0.72) 55%, rgba(47,50,55,0.45) 100%),
    var(--hero-foto, none) center/cover no-repeat;   /* la foto la sceglie script.js: quella salvata in immagini/, altrimenti quella esterna */
  color: var(--bianco);
  padding: 140px 0 80px;
}
.hero-contenuto { max-width: 620px; }
.hero-tag {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(206,23,30,0.16);
  border: 1px solid rgba(206,23,30,0.4);
  color: var(--accento);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  margin-bottom: 22px;
}
.hero h1 {
  color: var(--bianco);
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  margin-bottom: 20px;
}
.hero h1 em { color: var(--accento); font-style: normal; }
.hero p {
  color: rgba(255,255,255,0.85);
  font-size: 1.1rem;
  margin-bottom: 34px;
  max-width: 520px;
}
.hero-azioni { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 56px; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 560px;
}
.hero-stat { text-align: left; }
.hero-stat strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  color: var(--accento);
}
.hero-stat span { font-size: 0.85rem; color: rgba(255,255,255,0.75); }

/* ---------- SEZIONI GENERALI ---------- */
section { padding: 90px 0; }
.sezione-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}
.sezione-eyebrow {
  display: inline-block;
  color: var(--accento-scuro);
  background: rgba(206,23,30,0.14);
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.sezione-header h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin-bottom: 14px;
}
.sezione-header p { color: var(--testo-chiaro); font-size: 1.05rem; }
.sezione-footer-azione {
  text-align: center;
  margin-top: 46px;
}

.bg-chiaro { background: var(--grigio-chiaro); }

/* ---------- GRIGLIA PARCO AUTO (elemento chiave, molto in evidenza) ---------- */
.griglia-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}
.auto-card {
  background: var(--bianco);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--ombra);
  transition: transform var(--transizione), box-shadow var(--transizione);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--grigio);
}
.auto-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--ombra-hover);
}
.auto-card-immagine {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: var(--antracite);
}
.auto-card-immagine img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.auto-card:hover .auto-card-immagine img { transform: scale(1.08); }
.auto-badge {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--antracite);
  color: var(--bianco);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.auto-badge.tipo-offerta { background: var(--accento); color: var(--bianco); }
.auto-badge.tipo-km0 { background: var(--verde-ok); color: var(--bianco); }
.auto-prezzo-tag {
  position: absolute;
  bottom: 14px; right: 14px;
  background: rgba(27,29,33,0.88);
  color: var(--bianco);
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
}
.auto-card-corpo {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.auto-card-corpo h3 { font-size: 1.15rem; }
.auto-card-marca { color: var(--accento-scuro); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }
.auto-specifiche {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 0.85rem;
  color: var(--testo-chiaro);
  padding-top: 8px;
  border-top: 1px dashed var(--grigio);
}
.auto-specifiche span { display: flex; align-items: center; gap: 6px; }
.auto-card-corpo .btn { margin-top: auto; }

/* ---------- PERCHÉ SCEGLIERCI / FEATURES ---------- */
.griglia-feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}
.feature-card {
  background: var(--bianco);
  padding: 34px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--grigio);
  text-align: left;
  transition: box-shadow var(--transizione), transform var(--transizione);
}
.feature-card:hover { box-shadow: var(--ombra); transform: translateY(-4px); }
.feature-icona {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: rgba(206,23,30,0.15);
  color: var(--accento-scuro);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 18px;
}
.feature-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.feature-card p { color: var(--testo-chiaro); font-size: 0.95rem; }

/* ---------- TESTIMONIANZE ---------- */
.griglia-testimonianze {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.testimonianza {
  background: var(--bianco);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--grigio);
}
.stelle { color: var(--accento); margin-bottom: 14px; letter-spacing: 2px; }
.testimonianza p { font-style: italic; color: var(--testo); margin-bottom: 18px; }
.testimonianza-autore { display: flex; align-items: center; gap: 12px; }
.avatar-iniziali {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--antracite);
  color: var(--accento);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.testimonianza-autore strong { display: block; font-size: 0.95rem; }
.testimonianza-autore span { font-size: 0.8rem; color: var(--testo-chiaro); }

/* ---------- CTA BANNER ---------- */
.cta-banner {
  background: linear-gradient(120deg, var(--antracite) 0%, var(--antracite-scuro) 100%);
  color: var(--bianco);
  border-radius: var(--radius);
  padding: 60px 40px;
  text-align: center;
  margin: 0 20px;
  max-width: 1160px;
  margin-inline: auto;
}
.cta-banner h2 { color: var(--bianco); margin-bottom: 14px; }
.cta-banner p { color: rgba(255,255,255,0.8); margin-bottom: 30px; max-width: 520px; margin-inline: auto; }
.cta-banner .hero-azioni { justify-content: center; margin-bottom: 0; }

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--antracite-scuro);
  color: rgba(255,255,255,0.75);
  padding: 70px 0 30px;
}
.footer-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 50px;
}
.footer-brand .logo { color: var(--bianco); margin-bottom: 16px; }
.footer-brand p { max-width: 320px; font-size: 0.92rem; }
.footer-col h4 { color: var(--bianco); font-size: 1rem; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 10px; font-size: 0.92rem; }
.footer-col ul li a:hover { color: var(--accento); }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transizione);
}
.footer-social a:hover { background: var(--accento); color: var(--bianco); }
.footer-social { flex-wrap: wrap; }
.footer-social a { color: rgba(255,255,255,0.85); }
.footer-social svg { width: 19px; height: 19px; }
/* Link ai social nella pagina Contatti */
.info-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.info-riga .info-social a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--bianco);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background var(--transizione), color var(--transizione);
}
.info-riga .info-social a:hover { background: var(--accento); color: var(--bianco); }
.info-social svg { width: 16px; height: 16px; flex-shrink: 0; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  text-align: center;
  font-size: 0.85rem;
}

/* ---------- PAGINA CATALOGO: BANNER + FILTRI ---------- */
.page-banner {
  background: linear-gradient(120deg, var(--antracite-scuro), var(--antracite));
  color: var(--bianco);
  padding: 150px 0 60px;
  text-align: center;
}
.page-banner h1 { color: var(--bianco); font-size: clamp(1.9rem, 4.5vw, 2.6rem); margin-bottom: 12px; }
.page-banner p { color: rgba(255,255,255,0.8); max-width: 560px; margin: 0 auto; }
.breadcrumb { margin-top: 16px; font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.breadcrumb a { color: var(--accento); }

.barra-filtri {
  background: var(--bianco);
  border-bottom: 1px solid var(--grigio);
  position: sticky;
  top: 73px;
  z-index: 400;
  padding: 18px 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.03);
}
.filtri-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.campo-filtro { display: flex; flex-direction: column; gap: 6px; }
.campo-filtro label { font-size: 0.78rem; font-weight: 600; color: var(--testo-chiaro); text-transform: uppercase; letter-spacing: 0.03em; }
.campo-filtro select,
.campo-filtro input {
  padding: 11px 14px;
  border: 1px solid var(--grigio);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  color: var(--testo);
  background: var(--grigio-chiaro);
}
.campo-filtro select:focus,
.campo-filtro input:focus { outline: 2px solid var(--accento); background: var(--bianco); }
.filtri-azioni { display: flex; align-items: flex-end; gap: 10px; }

.risultati-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
  color: var(--testo-chiaro);
  font-size: 0.95rem;
}
.risultati-info strong { color: var(--antracite); }

.nessun-risultato {
  text-align: center;
  padding: 70px 20px;
  color: var(--testo-chiaro);
}
.nessun-risultato .feature-icona { margin: 0 auto 20px; }

/* ---------- MODALE DETTAGLIO AUTO ---------- */
.overlay-modale {
  position: fixed;
  inset: 0;
  background: rgba(27,29,33,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.overlay-modale.attivo { display: flex; }
.modale {
  background: var(--bianco);
  border-radius: var(--radius);
  max-width: 780px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
}
.modale-chiudi {
  position: absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(27,29,33,0.85);
  color: var(--bianco);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  z-index: 5;
}
.modale-galleria { position: relative; height: 320px; background: var(--antracite); }
.modale-galleria img { width: 100%; height: 100%; object-fit: cover; }
.modale-galleria-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.85);
  color: var(--antracite);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.modale-galleria-prev { left: 14px; }
.modale-galleria-next { right: 14px; }
.modale-galleria-contatore {
  position: absolute;
  bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(27,29,33,0.7);
  color: var(--bianco);
  font-size: 0.78rem;
  padding: 4px 12px;
  border-radius: 999px;
}
.modale-corpo { padding: 30px; }
.modale-corpo .auto-card-marca { margin-bottom: 6px; }
.modale-corpo h2 { margin-bottom: 14px; }
.modale-prezzo {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  color: var(--accento-scuro);
  font-weight: 700;
  margin-bottom: 20px;
}
.modale-prezzo-iva {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--testo-chiaro);
  white-space: nowrap;
  vertical-align: 0.25em;
}
.modale-specifiche {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--grigio);
  border-bottom: 1px solid var(--grigio);
  margin-bottom: 20px;
}
.modale-specifiche div { font-size: 0.9rem; }
.modale-specifiche strong { display: block; color: var(--antracite); font-size: 0.95rem; }
.modale-descrizione { color: var(--testo-chiaro); margin-bottom: 24px; font-size: 0.95rem; white-space: pre-wrap; }
.modale-azioni { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-whatsapp { background: var(--bianco); color: #15803d; border: 2px solid #1fa855; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-whatsapp:hover { background: #eefaf2; border-color: #15803d; color: #15803d; }
.btn-whatsapp svg { width: 20px; height: 20px; flex: none; }

/* Telefono: dettaglio dell'annuncio più compatto, per scorrere meno */
@media (max-width: 639px) {
  .modale-corpo { padding: 18px 16px 20px; }
  .modale-corpo .auto-card-marca { margin-bottom: 2px; font-size: 0.75rem; }
  .modale-corpo h2 { font-size: 1.25rem; line-height: 1.25; margin-bottom: 8px; }
  .modale-prezzo { font-size: 1.5rem; margin-bottom: 12px; }
  .modale-specifiche { gap: 8px 12px; padding: 12px 0; margin-bottom: 14px; }
  .modale-specifiche div { font-size: 0.8rem; line-height: 1.35; }
  .modale-specifiche strong { font-size: 0.88rem; }
  .modale-descrizione { font-size: 0.86rem; line-height: 1.5; margin-bottom: 16px; }
  .modale-azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .modale-azioni .btn { padding: 10px 8px; font-size: 0.85rem; text-align: center; justify-content: center; white-space: nowrap; }
  .modale-azioni .btn-primario { grid-column: 1 / -1; }
  .modale-azioni #modale-condividi { grid-column: 1 / -1; }
}

body.blocca-scroll { overflow: hidden; }

/* ---------- CHI SIAMO ---------- */
.storia-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.storia-grid img { border-radius: var(--radius); box-shadow: var(--ombra); }
.griglia-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-box { padding: 30px 16px; background: var(--bianco); border-radius: var(--radius); border: 1px solid var(--grigio); }
.stat-box strong { display: block; font-family: 'Poppins', sans-serif; font-size: 2rem; color: var(--accento-scuro); }
.stat-box span { color: var(--testo-chiaro); font-size: 0.9rem; }
.valori-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

/* ---------- PAGINA RECENSIONI ---------- */
.recensioni-intro {
  max-width: 720px;
  margin: 0 auto 50px;
  text-align: center;
  color: var(--testo-chiaro);
}
.anno-recensioni {
  margin: 0 0 40px;
}
.anno-recensioni h3 {
  font-size: 1.3rem;
  color: var(--accento-scuro);
  border-bottom: 2px solid var(--grigio);
  padding-bottom: 10px;
  margin-bottom: 22px;
}
.lista-recensioni {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.recensione-item {
  background: var(--bianco);
  border: 1px solid var(--grigio);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.recensione-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.recensione-nome { font-weight: 700; color: var(--antracite); }
.recensione-auto { color: var(--accento-scuro); font-weight: 600; font-size: 0.9rem; }
.recensione-data { color: var(--testo-chiaro); font-size: 0.82rem; white-space: nowrap; }
.recensione-testo { font-style: italic; margin-bottom: 14px; }
.recensione-risposta {
  border-left: 3px solid var(--accento);
  padding: 10px 16px;
  background: var(--grigio-chiaro);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem;
  color: var(--testo-chiaro);
}
.recensione-risposta strong { color: var(--antracite); }
.recensione-stelle { color: var(--accento); letter-spacing: 2px; margin-bottom: 8px; font-size: 0.95rem; }

/* ---------- FOTO ALLEGATA A UNA RECENSIONE PUBBLICATA ---------- */
.recensione-foto-wrapper { margin-bottom: 14px; }
.recensione-foto {
  max-width: 220px;
  max-height: 220px;
  width: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--grigio);
  object-fit: cover;
}

/* ---------- UPLOAD FOTO (form "Lascia la tua recensione") ---------- */
.upload-foto-btn { width: 100%; }
.upload-foto-anteprima {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--grigio);
  border-radius: var(--radius-sm);
  background: var(--grigio-chiaro);
}
.upload-foto-anteprima img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.upload-foto-rimuovi {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bianco);
  border: 1px solid var(--grigio);
  color: var(--testo-chiaro);
  font-size: 0.95rem;
  flex-shrink: 0;
}
.upload-foto-rimuovi:hover { background: #b3261e; color: var(--bianco); border-color: #b3261e; }

/* ---------- CASELLA CONSENSO PRIVACY (moduli) ---------- */
.consenso-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--testo-chiaro);
  margin-bottom: 20px;
  cursor: pointer;
  line-height: 1.5;
}
.consenso-privacy input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accento);
  cursor: pointer;
}
.consenso-privacy a { color: var(--antracite); text-decoration: underline; font-weight: 600; }

/* ---------- PAGINA INFORMATIVA PRIVACY ---------- */
.contenuto-legale { max-width: 780px; margin: 0 auto; }
.contenuto-legale h2 {
  font-size: 1.2rem;
  margin: 36px 0 12px;
}
.contenuto-legale p,
.contenuto-legale li { color: var(--testo-chiaro); margin-bottom: 12px; }
.contenuto-legale ul { list-style: disc; padding-left: 22px; margin-bottom: 12px; }
.contenuto-legale a { color: var(--accento-scuro); text-decoration: underline; }
.contenuto-legale strong { color: var(--testo); }
.contenuto-legale-intro {
  background: var(--grigio-chiaro);
  border-left: 3px solid var(--accento);
  padding: 16px 20px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.contenuto-legale-data { margin-top: 36px; font-size: 0.85rem; font-style: italic; }

.footer-bottom a { color: rgba(255,255,255,0.85); text-decoration: underline; }
.footer-bottom a:hover { color: var(--accento); }

/* ---------- SELETTORE STELLE (form recensione) ---------- */
.stelle-input {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 6px;
}
.stelle-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.stelle-input label {
  font-size: 2rem;
  line-height: 1;
  color: var(--grigio);
  cursor: pointer;
  transition: color 0.15s ease;
}
.stelle-input input:checked ~ label,
.stelle-input label:hover,
.stelle-input label:hover ~ label {
  color: var(--accento);
}

/* ---------- CONTATTI ---------- */
.contatti-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.form-box {
  background: var(--bianco);
  border-radius: var(--radius);
  border: 1px solid var(--grigio);
  padding: 34px;
  box-shadow: var(--ombra);
}
.campo-form { margin-bottom: 20px; }
.campo-form label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 8px; }
.campo-form input,
.campo-form select,
.campo-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--grigio);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--grigio-chiaro);
}
.campo-form input:focus,
.campo-form select:focus,
.campo-form textarea:focus { outline: 2px solid var(--accento); background: var(--bianco); }
.campo-form textarea { resize: vertical; min-height: 120px; }
.riga-doppia { display: grid; grid-template-columns: 1fr; gap: 20px; }

.info-contatto-card {
  background: var(--antracite);
  color: var(--bianco);
  border-radius: var(--radius);
  padding: 34px;
  margin-bottom: 24px;
}
.info-riga {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.info-riga:last-child { border-bottom: none; }
.info-riga .icona {
  width: 42px; height: 42px;
  background: rgba(206,23,30,0.18);
  color: var(--accento);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.info-riga strong { display: block; margin-bottom: 4px; }
.info-riga span, .info-riga a { color: rgba(255,255,255,0.75); font-size: 0.92rem; }
.mappa-box {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--grigio);
  height: 280px;
}
.mappa-box iframe { width: 100%; height: 100%; border: 0; }

.messaggio-invio {
  display: none;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: rgba(46,158,91,0.12);
  color: var(--verde-ok);
  font-weight: 600;
  margin-bottom: 20px;
  font-size: 0.9rem;
}
.messaggio-invio.attivo { display: block; }

/* ============================================================
   RESPONSIVE — TABLET (min 640px)
   ============================================================ */
@media (min-width: 640px) {
  .hero-stats { max-width: 620px; }
  .footer-griglia { grid-template-columns: repeat(2, 1fr); }
  .filtri-griglia { grid-template-columns: repeat(2, 1fr); }
  .riga-doppia { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   RESPONSIVE — DESKTOP (min 900px)
   ============================================================ */
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-tel { display: flex; }
  .hamburger { display: none; }

  .hero-azioni { margin-bottom: 70px; }
  .hero-stats { grid-template-columns: repeat(2, max-content); column-gap: 64px; max-width: none; }

  .storia-grid { grid-template-columns: 1fr 1fr; }
  .contatti-grid { grid-template-columns: 1.2fr 1fr; }

  .footer-griglia { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

  .filtri-griglia { grid-template-columns: repeat(4, 1fr) auto; align-items: end; }

  .modale-galleria { height: 400px; }
}

/* ============================================================
   RESPONSIVE — DESKTOP GRANDE (min 1200px)
   ============================================================ */
@media (min-width: 1200px) {
  .griglia-auto { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   SERVIZI: card cliccabili + pagina di dettaglio (servizio.html)
   ============================================================ */
a.feature-card-link { display: flex; flex-direction: column; color: inherit; cursor: pointer; }
a.feature-card-link:hover { border-color: var(--accento); }
a.feature-card-link:hover .feature-icona { background: var(--accento); color: var(--bianco); }
.feature-card-scopri {
  margin-top: auto;
  padding-top: 16px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accento-scuro);
}
a.feature-card-link:hover .feature-card-scopri { color: var(--antracite); }

.servizio-banner-icona {
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  border-radius: 18px;
  background: rgba(206,23,30,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem;
}
.avviso-esempio {
  background: #fdecee;
  border-bottom: 1px solid rgba(206,23,30,0.4);
  color: var(--accento-scuro);
  font-size: 0.85rem;
  padding: 10px 0;
  text-align: center;
}
.servizio-numeri-sezione { padding: 40px 0 0; }
.servizio-numeri .stat-box strong { font-size: 1.5rem; }
.servizio-dettagli { padding-top: 60px; }

.servizio-elenchi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}
.servizio-elenco {
  background: var(--bianco);
  border: 1px solid var(--grigio);
  border-radius: var(--radius);
  padding: 28px;
}
.servizio-elenco h3 { font-size: 1.1rem; margin-bottom: 14px; }
.servizio-elenco li {
  color: var(--testo-chiaro);
  padding: 9px 0;
  border-bottom: 1px solid var(--grigio-chiaro);
  font-size: 0.95rem;
}
.servizio-elenco li:last-child { border-bottom: none; }

.servizio-passi {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.servizio-passo {
  background: var(--bianco);
  border-radius: var(--radius);
  border: 1px solid var(--grigio);
  padding: 26px 24px;
}
.servizio-passo-numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--antracite);
  color: var(--accento);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  margin-bottom: 14px;
}
.servizio-passo h3 { font-size: 1.05rem; margin-bottom: 6px; }
.servizio-passo p { color: var(--testo-chiaro); font-size: 0.92rem; }

/* Confronto piani (garanzia) */
.servizio-confronto {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
}
.servizio-piano {
  position: relative;
  background: var(--bianco);
  border: 1px solid var(--grigio);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.servizio-piano.evidenza { border: 2px solid var(--accento); box-shadow: var(--ombra); }
.servizio-piano-etichetta {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--accento); color: var(--bianco);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 14px; border-radius: 999px;
}
.servizio-piano h3 { font-size: 1.2rem; }
.servizio-piano-prezzo { font-family: 'Poppins', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--accento-scuro); margin: 6px 0 18px; }
.servizio-piano ul { margin-bottom: 24px; }
.servizio-piano li { padding: 8px 0; border-bottom: 1px solid var(--grigio-chiaro); font-size: 0.95rem; }
.servizio-piano li.assente { color: var(--grigio); }

/* Moduli (permuta, assistenza) */
.servizio-modulo { max-width: 760px; margin: 0 auto; }
.servizio-modulo h2 { margin-bottom: 8px; }
.servizio-modulo-desc { color: var(--testo-chiaro); margin-bottom: 24px; }
.servizio-modulo-griglia { display: grid; grid-template-columns: 1fr; column-gap: 20px; }
.servizio-modulo-griglia .campo-form textarea { min-height: 100px; }
.servizio-modulo-nota { font-size: 0.85rem; color: var(--testo-chiaro); margin-top: 16px; }
.servizio-modulo-nota a { color: var(--accento-scuro); font-weight: 600; }

/* Calcolatore rata (finanziamenti) */
.servizio-calcolatore {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 1000px;
  margin: 0 auto;
}
.servizio-calcolatore-input h2 { margin: 10px 0 6px; }
.calc-campo { display: block; margin-bottom: 26px; }
.calc-campo > span { display: flex; justify-content: space-between; font-weight: 600; font-size: 0.92rem; margin-bottom: 10px; }
.calc-campo strong { color: var(--accento-scuro); font-family: 'Poppins', sans-serif; }
.calc-campo input[type="range"] { width: 100%; accent-color: var(--accento); height: 28px; }
.calc-durate { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-durate button {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--grigio);
  background: var(--bianco);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--testo-chiaro);
}
.calc-durate button.attivo { background: var(--antracite); border-color: var(--antracite); color: var(--bianco); }
.servizio-calcolatore-risultato {
  background: linear-gradient(140deg, var(--antracite), var(--antracite-scuro));
  color: var(--bianco);
  border-radius: var(--radius);
  padding: 32px 28px;
  align-self: start;
}
.servizio-calcolatore-risultato > span { color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.servizio-calcolatore-risultato > strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 2.6rem;
  color: var(--accento);
  margin: 4px 0 20px;
}
.calc-dettagli { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 14px; margin-bottom: 22px; }
.calc-dettagli div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.9rem; color: rgba(255,255,255,0.75); }
.calc-dettagli b { color: var(--bianco); }
.calc-avvertenza { font-size: 0.72rem; line-height: 1.5; color: rgba(255,255,255,0.55); margin-top: 16px; }

/* Domande frequenti */
.servizio-faq { max-width: 780px; margin: 0 auto; }
.servizio-faq-voce {
  background: var(--bianco);
  border: 1px solid var(--grigio);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.servizio-faq-voce summary {
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 600;
  color: var(--antracite);
  list-style: none;
  display: flex; justify-content: space-between; gap: 16px;
}
.servizio-faq-voce summary::-webkit-details-marker { display: none; }
.servizio-faq-voce summary::after { content: "+"; color: var(--accento-scuro); font-size: 1.3rem; line-height: 1; }
.servizio-faq-voce[open] summary::after { content: "–"; }
.servizio-faq-voce p { padding: 0 22px 18px; color: var(--testo-chiaro); }

@media (min-width: 640px) {
  .servizio-elenchi { grid-template-columns: 1fr 1fr; }
  .servizio-passi { grid-template-columns: repeat(2, 1fr); }
  .servizio-confronto { grid-template-columns: 1fr 1fr; }
  .servizio-modulo-griglia { grid-template-columns: 1fr 1fr; }
  .servizio-modulo-griglia .campo-largo { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .servizio-passi { grid-template-columns: repeat(4, 1fr); }
  .servizio-numeri { grid-template-columns: repeat(4, 1fr); }
  .servizio-calcolatore { grid-template-columns: 1.2fr 1fr; gap: 48px; }
}

/* ============================================================
   CORREZIONI TELEFONO E TABLET (fino a 899px)
   Su computer (900px e oltre) il sito resta identico.
   ============================================================ */

/* Pulsante "Filtra e ordina": visibile solo su telefono/tablet */
.filtri-toggle { display: none; }
.filtri-toggle-conta {
  display: none;
  background: var(--accento);
  color: var(--bianco);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  align-items: center;
  justify-content: center;
}
.filtri-toggle-conta.attivo { display: inline-flex; }

@media (max-width: 899px) {
  /* Niente fascia vuota sopra il titolo: l'intestazione non si
     sovrappone alla pagina, quindi il margine alto va ridotto */
  .hero { min-height: auto; padding: 56px 0 64px; }
  .hero-azioni { margin-bottom: 44px; }
  .page-banner { padding: 56px 0 48px; }
  section { padding: 64px 0; }

  /* Filtri del catalogo: chiusi dietro un pulsante e non più
     "appiccicati" in alto (su schermo piccolo coprirebbero le auto) */
  .barra-filtri { position: static; padding: 14px 0; }
  .filtri-toggle {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
  }
  .filtri-toggle[aria-expanded="true"] { background: var(--antracite); color: var(--bianco); }
  /* sui touch screen l'effetto "hover" resta attivo dopo il tocco:
     evitiamo che il pulsante sembri aperto quando è chiuso */
  @media (hover: none) {
    .filtri-toggle[aria-expanded="false"]:hover { background: transparent; color: var(--antracite); }
  }
  #form-filtri { display: none; margin-top: 16px; }
  .barra-filtri.aperta #form-filtri { display: block; }
}

@media (max-width: 639px) {
  /* Intestazione: il pulsante arancione non ci sta accanto al logo
     e spingeva il menu fuori dallo schermo. Su telefono lo togliamo
     (nel menu c'è già "Chiamaci ora") */
  .nav { padding: 14px 16px; }
  .nav-azioni .btn { display: none; }
  .logo { font-size: 1.2rem; }
  .container { padding: 0 16px; }
}

/* Piccola animazione di comparsa per le card */
@keyframes comparsa {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.auto-card, .feature-card, .testimonianza { animation: comparsa 0.5s ease both; }

/* ============================================================
   Testi rossi su sfondo scuro: rosso più chiaro per leggibilità
   ============================================================ */
.hero-tag, .hero h1 em, .hero-stat strong, .breadcrumb a,
.site-footer .logo span, .footer-col ul li a:hover, .footer-bottom a:hover,
.avatar-iniziali, .servizio-passo-numero, .info-riga .icona,
.servizio-calcolatore-risultato > strong, .cta-banner em { color: var(--accento-chiaro); }
.hero-tag { border-color: rgba(255,107,115,0.45); background: rgba(206,23,30,0.18); }

/* ============================================================
   LOGO UFFICIALE NELL'INTESTAZIONE
   ============================================================ */
.logo-ufficiale { flex-shrink: 0; }
.logo-ufficiale img { height: 46px; width: auto; display: block; }
@media (max-width: 1199px) and (min-width: 900px) {
  .logo-ufficiale img { height: 38px; }
  .nav-links { gap: 22px; }
  /* su schermi medi c'è poco spazio: il pulsante "Vedi Auto" lo sostituisce il link "Parco Auto" */
  .nav-azioni .btn { display: none; }
  /* filtri del catalogo su 3 colonne: su 5 colonne uscivano dallo schermo */
  .filtri-griglia { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 639px) {
  .logo-ufficiale img { height: 38px; }
}
@media (max-width: 380px) {
  .logo-ufficiale img { height: 32px; }
}

/* Numeri in Chi Siamo: 2 riquadri centrati invece di 4 */
.griglia-stats:not(.servizio-numeri) { max-width: 760px; margin-inline: auto; }

/* ============================================================
   PAGINA SERVIZI (servizi.html): servizi su misura, senza dati standard
   ============================================================ */
.servizi-intro-sezione { padding: 44px 0 0; }
.servizi-pilastri { display: grid; grid-template-columns: 1fr; gap: 16px; }
.servizi-pilastro {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--bianco); border: 1px solid var(--grigio); border-radius: var(--radius);
  padding: 20px 22px;
}
.servizi-pilastro-icona {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(206,23,30,0.10); display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.servizi-pilastro strong { display: block; color: var(--antracite); margin-bottom: 2px; }
.servizi-pilastro span { color: var(--testo-chiaro); font-size: 0.9rem; }

.servizio-blocco-sezione { scroll-margin-top: 90px; }
#richiedi-proposta { scroll-margin-top: 90px; }
.servizio-blocco { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.servizio-blocco-visual {
  background: linear-gradient(140deg, var(--antracite), var(--antracite-scuro));
  border-radius: var(--radius);
  padding: 44px 32px;
  color: var(--bianco);
  position: relative;
  overflow: hidden;
  min-height: 240px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.servizio-blocco-visual::before {
  content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(206,23,30,0.55), transparent 70%);
}
.servizio-blocco-icona {
  position: absolute; top: 28px; left: 32px;
  width: 64px; height: 64px; border-radius: 16px; background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.servizio-blocco-claim { font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1.25; position: relative; }
.servizio-blocco-claim em { font-style: normal; color: var(--accento-chiaro); }
.servizio-blocco-testo h2 { margin: 12px 0 14px; font-size: clamp(1.5rem, 3vw, 2rem); }
.servizio-blocco-testo > p { color: var(--testo-chiaro); margin-bottom: 18px; }
.servizio-blocco-lista { margin-bottom: 24px; }
.servizio-blocco-lista li { position: relative; padding: 6px 0 6px 30px; color: var(--testo); }
.servizio-blocco-lista li::before {
  content: "✓"; position: absolute; left: 0; top: 6px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--accento); color: var(--bianco);
  font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.servizio-blocco-nota { font-size: 0.78rem; color: var(--testo-chiaro); margin-top: 14px; }

.scelta-servizi { display: flex; flex-wrap: wrap; gap: 10px; }
.scelta-servizio { cursor: pointer; }
.scelta-servizio input { position: absolute; opacity: 0; width: 0; height: 0; }
.scelta-servizio span {
  display: inline-block; padding: 10px 16px; border-radius: 999px;
  border: 2px solid var(--grigio); background: var(--grigio-chiaro);
  font-weight: 600; font-size: 0.9rem; color: var(--testo); transition: all var(--transizione);
}
.scelta-servizio input:checked + span { border-color: var(--accento); background: rgba(206,23,30,0.08); color: var(--accento-scuro); }
.scelta-servizio input:focus-visible + span { outline: 2px solid var(--accento); outline-offset: 2px; }
.scelta-servizi-errore { display: none; color: var(--accento-scuro); font-size: 0.85rem; font-weight: 600; margin-top: 8px; }
.scelta-servizi-errore.attivo { display: block; }
#form-proposta .campo-form > label:not(.scelta-servizio) { display: block; }

@media (min-width: 640px) {
  .servizi-pilastri { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .servizio-blocco { grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
  .servizio-blocco.invertito .servizio-blocco-visual { order: 2; }
  .servizio-blocco-visual { min-height: 320px; }
}

/* ============================================================
   SCHEDE AUTO: foto intere, scheda tutta cliccabile, griglia a 2
   colonne su telefono + foto a schermo intero (lightbox)
   ============================================================ */
.auto-card { cursor: pointer; }
/* la foto segue le proporzioni delle vostre foto (1024×461): niente tagli */
.auto-card-immagine { height: auto; aspect-ratio: 1024 / 461; }

/* Dettaglio auto: foto intera (non ritagliata) e cliccabile */
.modale-galleria { height: auto; aspect-ratio: 1024 / 461; max-height: 62vh; background: #111214; }
.modale-galleria img { object-fit: contain; cursor: zoom-in; }
.modale-galleria-nav[hidden] { display: none; }
.modale-galleria-fullscreen {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(27,29,33,0.78); color: var(--bianco);
  font-size: 0.8rem; font-weight: 600;
}
.modale-galleria-fullscreen:hover { background: var(--accento); }
@media (min-width: 900px) {
  .modale-galleria { height: auto; }
}

/* Lightbox a schermo intero */
.lightbox {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(8,8,10,0.97);
  display: none; align-items: center; justify-content: center;
}
.lightbox.attivo { display: flex; }
.lightbox img { max-width: 100vw; max-height: 100vh; width: auto; height: auto; object-fit: contain; user-select: none; }
.lightbox-chiudi {
  position: absolute; top: 16px; right: 16px;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.14); color: #fff; font-size: 1.3rem;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,0.14); color: #fff; font-size: 2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-nav[hidden] { display: none; }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-chiudi:hover, .lightbox-nav:hover { background: var(--accento); }
.lightbox-info {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px; align-items: center;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 0.85rem;
  padding: 6px 14px; border-radius: 999px; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
}
#lightbox-contatore { opacity: 0.75; }

/* Telefono: 2 auto per riga, schede compatte */
@media (max-width: 639px) {
  .griglia-auto { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .auto-card:hover { transform: none; }
  .auto-card-corpo { padding: 10px 11px 12px; gap: 5px; }
  .auto-card-marca { font-size: 0.66rem; }
  .auto-card-corpo h3 {
    font-size: 0.86rem; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .auto-specifiche { font-size: 0.72rem; gap: 2px 8px; padding-top: 6px; }
  .auto-specifiche span:nth-child(3) { display: none; }
  .auto-card-corpo .btn { display: none; }
  .auto-prezzo-tag { bottom: 6px; right: 6px; padding: 3px 8px; font-size: 0.78rem; border-radius: 6px; }
  .auto-badge { top: 6px; left: 6px; padding: 3px 8px; font-size: 0.6rem; }
  .modale-galleria-fullscreen span { display: none; }
  .lightbox-nav { width: 44px; height: 44px; font-size: 1.6rem; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* Barra filtri del catalogo: si ferma subito sotto l'intestazione (più alta col nuovo logo) */
@media (min-width: 900px) { .barra-filtri { top: var(--altezza-header, 85px); } }

/* ============================================================
   PARCO AUTO: banner Autovetture / Veicoli commerciali
   ============================================================ */
.categorie-sezione { padding: 22px 0 6px; background: var(--bianco); }
.categorie-sezione .container { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.categorie-banner { display: flex; flex-wrap: wrap; gap: 10px; }
.categoria-banner {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 10px;
  background: var(--antracite); color: var(--bianco);
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.98rem; line-height: 1.2;
  border: 2px solid var(--antracite);
  transition: background var(--transizione), border-color var(--transizione), transform var(--transizione);
}
.categoria-banner:hover { background: var(--antracite-scuro); border-color: var(--antracite-scuro); transform: translateY(-1px); }
.categoria-banner.attivo, .categoria-banner.attivo:hover { background: var(--accento); border-color: var(--accento); }
.categoria-banner-conta {
  min-width: 26px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.16); font-family: 'Inter', sans-serif;
  font-size: 0.78rem; font-weight: 600; text-align: center;
}
.categorie-tutti {
  background: none; color: var(--accento-scuro);
  font-weight: 600; font-size: 0.88rem; padding: 4px 0;
}
.categorie-tutti[hidden] { display: none; }
.categoria-banner .testo-breve { display: none; }
.categorie-tutti:hover { text-decoration: underline; }

@media (max-width: 639px) {
  .categorie-sezione { padding: 16px 0 4px; }
  .categorie-banner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
  .categoria-banner { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; font-size: 0.84rem; border-radius: 9px; white-space: nowrap; }
  .categoria-banner-conta { font-size: 0.7rem; min-width: 22px; padding: 1px 6px; }
  .categoria-banner .testo-lungo { display: none; }
  .categoria-banner .testo-breve { display: inline; }
}

@media (max-width: 359px) {
  .categoria-banner { font-size: 0.76rem; }
}

/* Zoom nella foto a schermo intero */
.lightbox { touch-action: none; overflow: hidden; }
.lightbox img { cursor: zoom-in; transform-origin: center center; will-change: transform; -webkit-user-drag: none; }
.lightbox img.anima { transition: transform 0.25s ease; }
.lightbox.zoomata img { cursor: grab; }
.lightbox.zoomata img:active { cursor: grabbing; }
.lightbox.zoomata .lightbox-nav { opacity: 0.35; }
.lightbox-zoom {
  position: absolute; bottom: 14px; right: 16px; z-index: 2;
  display: flex; gap: 8px;
}
.lightbox-zoom-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.14); color: #fff; font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-zoom-btn:hover { background: var(--accento); }
.lightbox-chiudi, .lightbox-nav, .lightbox-info { z-index: 2; }
@media (max-width: 639px) {
  .lightbox-zoom { bottom: 58px; right: 10px; }
  .lightbox-zoom-btn { width: 38px; height: 38px; font-size: 1.3rem; }
}

/* Potenza nelle schede: su telefono solo i CV */
@media (max-width: 639px) {
  .auto-specifiche .spec-kw { display: none; }
}

/* Home da telefono: riquadro iniziale compatto e quasi quadrato,
   così la foto dell'auto si vede per intero invece che "a striscia" verticale */
@media (max-width: 639px) {
  .hero {
    min-height: auto;   /* se il testo non ci sta (telefoni molto stretti) il riquadro si allunga un po' */
    aspect-ratio: 1 / 1;
    padding: 26px 0 24px;
    background-position: center, 62% center;
  }
  .hero-tag { font-size: 0.7rem; padding: 5px 12px; margin-bottom: 12px; }
  .hero h1 { font-size: 1.55rem; line-height: 1.2; margin-bottom: 10px; }
  .hero p { font-size: 0.86rem; line-height: 1.45; margin-bottom: 16px; }
  .hero-azioni { flex-wrap: nowrap; gap: 10px; margin-bottom: 18px; }
  .hero-azioni .btn { padding: 10px 16px; font-size: 0.85rem; }
  .hero-stats { gap: 12px; }
  .hero-stat strong { font-size: 1.3rem; line-height: 1.1; }
  .hero-stat span { font-size: 0.72rem; }
}

/* Telefoni molto stretti (320-345 px): niente scorrimento laterale.
   Gli elementi delle griglie possono restringersi e i pulsanti lunghi vanno a capo. */
.servizio-blocco > *, .contatti-grid > * { min-width: 0; }
.mappa-box iframe { display: block; max-width: 100%; }
@media (max-width: 639px) {
  .servizio-blocco .btn, .contatti-grid .btn, .cta-banner .btn { white-space: normal; text-align: center; }
}
@media (max-width: 359px) {
  .servizio-blocco-visual { padding: 32px 22px; }
  .servizio-blocco-claim { font-size: 1.3rem; }
}

/* Avviso "veicolo non più disponibile" per chi arriva da un link condiviso */
.avviso-annuncio {
  flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff4e5; border: 1px solid #f0c98a; color: #6b4a12;
  border-radius: var(--radius-sm); padding: 12px 16px; font-size: 0.95rem;
}
.avviso-annuncio button { background: none; color: inherit; font-size: 1rem; padding: 4px 8px; flex-shrink: 0; }