/* ==========================================================================
   Global Ricambi · foglio di stile condiviso da tutte le pagine
   --------------------------------------------------------------------------
   Indice
    1. Font (file locali nella cartella fonts/)
    2. Variabili: colori, tipografia, misure  ← per cambiare i colori, parti da qui
    3. Base
    4. Layout: contenitore e sezioni
    5. Pulsanti, link e icone
    6. Stato "Aperto ora"
    7. Header, top bar e menu (anche mobile)
    8. Footer
    9. Home
   10. Intestazione delle pagine interne
   11. Chi siamo
   12. Servizi
   13. Auto in vendita (e anteprima in home)
   14. Dove trovarci
   15. Contatti e modulo
   16. Animazioni
   ========================================================================== */


/* 1. FONT ---------------------------------------------------------------- */
/* Barlow e Barlow Semi Condensed, licenza SIL Open Font License (fonts/OFL.txt) */

@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* 2. VARIABILI ----------------------------------------------------------- */

:root {
  /* Blu del logo: il blu ardesia del contorno (#3a5370) e il blu acceso
     del monogramma "GR" (#0c75b6), scuriti quanto basta per leggere bene
     il testo bianco sopra. */
  --blu-scuro: #2c4566;          /* header e footer */
  --blu-scuro-2: #213752;        /* top bar sopra l'header */
  --blu: #0a6aa8;                /* pulsanti, link, accenti */
  --blu-hover: #08578b;
  --azzurro: #ecf4fa;            /* sfondi delle sezioni "invito" */
  --azzurro-2: #cfe0ee;          /* bordi su fondo azzurro */

  /* Bianchi e grigi (leggermente freddi, come il blu) */
  --bianco: #ffffff;
  --bianco-sporco: #f6f8fa;
  --grigio-chiaro: #eef1f5;
  --linea: #dde3ea;              /* bordi sottili */
  --linea-forte: #c2cbd6;

  /* Testo */
  --testo: #1c232c;
  --testo-2: #4f5b69;            /* testo secondario */
  --su-scuro: #ffffff;           /* testo su blu scuro */
  --su-scuro-2: #d2deeb;         /* testo secondario su blu scuro */

  /* Errori del modulo: restano rossi, perché il rosso vuol dire "c'è un problema" */
  --errore: #c4232c;

  /* Stato aperto / chiuso */
  --verde: #1d8a4e;
  --verde-su-scuro: #6ee7a2;
  --grigio-chiuso: #8b96a3;

  /* Tipografia */
  --font-testo: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-titoli: "Barlow Semi Condensed", "Barlow", "Arial Narrow", system-ui, sans-serif;
  --fs-display: clamp(2.5rem, 1.15rem + 5.2vw, 5.25rem);
  --fs-h1: clamp(2.375rem, 1.5rem + 3.4vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.7vw, 2.625rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.02rem + 0.4vw, 1.3125rem);

  /* Misure */
  --contenitore: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --spazio-sezione: clamp(4rem, 2.8rem + 4.5vw, 7rem);
  --raggio: 6px;
  --topbar-h: 34px;
  --bar-h: 70px;
  --header-h: calc(var(--topbar-h) + var(--bar-h));

  /* Movimento */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 1000px) {
  :root {
    --topbar-h: 36px;
    --bar-h: 88px;
  }
}


/* 3. BASE ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 24px);
  scrollbar-color: var(--linea-forte) var(--grigio-chiaro);
}

body {
  margin: 0;
  padding-top: var(--header-h); /* spazio per l'header fisso */
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--testo);
  background: var(--bianco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--blu);
}

body.menu-aperto {
  overflow: hidden;
}

/* Velo scuro sulla pagina quando il menu mobile è aperto */
body.menu-aperto::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(12, 22, 36, 0.42);
  animation: velo 0.35s var(--ease) both;
}

@keyframes velo {
  from {
    opacity: 0;
  }
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--testo);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

address {
  font-style: normal;
}

a {
  color: var(--blu);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.2s var(--ease);
}

a:hover {
  color: var(--blu-hover);
}

strong {
  font-weight: 600;
}

::selection {
  background: var(--blu);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--blu);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--raggio);
  background: #fff;
  color: var(--blu-scuro);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease-out);
}

.skip-link:focus {
  transform: none;
}


/* 4. LAYOUT -------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--contenitore) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--spazio-sezione);
}

.section--compatta {
  padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem);
}

.section--off {
  background: var(--bianco-sporco);
}

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

.section--azzurra {
  background: var(--azzurro);
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.section__title {
  font-size: var(--fs-h2);
}

.section__intro {
  margin-top: 14px;
  max-width: 60ch;
  color: var(--testo-2);
  font-size: 1.125rem;
}


/* 5. PULSANTI, LINK E ICONE ---------------------------------------------- */

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: 18px;
  height: 18px;
}

.icon--lg {
  width: 36px;
  height: 36px;
  stroke-width: 1.5;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0.75rem 1.45rem;
  border: 1px solid transparent;
  border-radius: var(--raggio);
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.btn .icon {
  width: 20px;
  height: 20px;
  transition: transform 0.35s var(--ease-out);
}

.btn:hover .icon--freccia,
.link-freccia:hover .icon--freccia {
  transform: translateX(4px);
}

.btn--primario {
  background: var(--blu);
  color: #fff;
}

.btn--primario:hover {
  background: var(--blu-hover);
  color: #fff;
}

.btn--contorno {
  border-color: var(--blu-scuro);
  color: var(--blu-scuro);
  background: transparent;
}

.btn--contorno:hover {
  background: var(--azzurro);
  color: var(--blu-scuro);
}

.section--azzurra .btn--contorno:hover {
  background: var(--bianco);
}

.btn--pieno {
  width: 100%;
}

.link-freccia {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  text-decoration: none;
}

.link-freccia .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.35s var(--ease-out);
}

.link-freccia:hover {
  text-decoration: underline;
}


/* 6. STATO "APERTO ORA" -------------------------------------------------- */
/* Il testo viene calcolato da script.js in base agli orari in SITO.orari */

.stato {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-variant-numeric: tabular-nums;
}

.stato__punto {
  position: relative;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--grigio-chiuso);
}

.stato--aperto .stato__punto {
  background: var(--verde);
}

/* pochi impulsi all'apertura della pagina, solo nello stato dentro la pagina */
.stato--aperto .stato__punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: impulso 2.6s var(--ease-out) 0.8s 3 both;
}

.topbar .stato__punto::after {
  display: none;
}

.stato strong {
  font-weight: 700;
}

.stato--su-scuro .stato__punto {
  background: rgba(255, 255, 255, 0.45);
}

.stato--su-scuro.stato--aperto .stato__punto {
  background: var(--verde-su-scuro);
}


/* 7. HEADER, TOP BAR E MENU ---------------------------------------------- */
/* L'HTML dell'header viene inserito da script.js (funzione creaHeader) */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--su-scuro);
  transition: transform 0.45s var(--ease-out);
}

/* Prima che lo script disegni l'header, mostra già le due fasce:
   top bar blu scuro e barra bianca del logo */
.site-header:empty {
  height: var(--header-h);
  background: linear-gradient(var(--blu-scuro-2) var(--topbar-h), var(--bianco) 0);
  border-bottom: 1px solid var(--linea);
}

/* Allo scroll la top bar scorre via e resta solo la barra con il menu */
.site-header.is-scrolled {
  transform: translateY(calc(-1 * var(--topbar-h)));
}

.site-header :focus-visible {
  outline-color: #fff;
}

.topbar {
  height: var(--topbar-h);
  background: var(--blu-scuro-2);
  font-size: 0.875rem;
  color: var(--su-scuro-2);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}

.topbar .stato {
  color: var(--su-scuro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__indirizzo {
  margin-left: auto;
  color: var(--su-scuro-2);
  text-decoration: none;
  white-space: nowrap;
}

.topbar__indirizzo:hover {
  color: #fff;
  text-decoration: underline;
}

.topbar__telefono {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.topbar__telefono:hover {
  color: #fff;
  text-decoration: underline;
}

.topbar__telefono .icon {
  width: 15px;
  height: 15px;
}

/* Barra del menu bianca: il logo a colori si legge solo su fondo chiaro */
.navbar {
  height: var(--bar-h);
  background: var(--bianco);
  border-bottom: 1px solid var(--linea);
  color: var(--testo);
  transition: box-shadow 0.35s var(--ease);
}

.navbar :focus-visible {
  outline-color: var(--blu);
}

.is-scrolled .navbar {
  box-shadow: 0 8px 24px -14px rgba(14, 30, 52, 0.6);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

/* Logo completo nella barra (con "Auto • Ricambi • Accessori"):
   52px di altezza su telefono, 64px su schermi grandi, perché la riga
   sotto il nome resti leggibile */
.brand__logo {
  display: block;
  width: auto;
  height: 52px;
}

@media (min-width: 1000px) {
  .brand__logo {
    height: 64px;
  }
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--testo-2);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

/* linea sotto la voce: compare al passaggio del mouse, resta sulla pagina attiva */
.nav__link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out);
}

.nav__link:hover {
  color: var(--blu);
}

.nav__link:hover::after {
  transform: scaleX(0.35);
}

.nav__link[aria-current="page"] {
  color: var(--blu);
}

.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* "Contattaci": ultima voce, in evidenza */
.nav__link--cta {
  margin-left: 14px;
  padding: 0 20px;
  border-radius: var(--raggio);
  background: var(--blu);
  color: #fff;
  font-weight: 600;
}

.nav__link--cta::after {
  display: none;
}

.nav__link--cta:hover {
  background: var(--blu-hover);
  color: #fff;
}

/* pagina attiva: sottolineatura, come le altre voci */
.nav__link--cta[aria-current="page"] {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.nav__extra {
  display: none;
}

/* Pulsante hamburger (visibile solo sotto i 1000px) */
.burger {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: var(--raggio);
  background: transparent;
  color: var(--blu-scuro);
  cursor: pointer;
}

.burger__linea {
  position: absolute;
  left: 12px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 0.4s var(--ease-out),
    opacity 0.2s var(--ease);
}

.burger__linea:nth-child(1) {
  top: 15px;
}

.burger__linea:nth-child(2) {
  top: 22px;
}

.burger__linea:nth-child(3) {
  top: 29px;
}

.burger[aria-expanded="true"] .burger__linea:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__linea:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] .burger__linea:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 999.98px) {
  .burger {
    display: block;
  }

  /* Il menu diventa un pannello che scende sotto la barra */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    background: var(--blu-scuro);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition:
      opacity 0.3s var(--ease),
      transform 0.45s var(--ease-out),
      visibility 0s linear 0.45s;
  }

  /* con la top bar nascosta (dopo lo scroll) il pannello può essere più alto */
  .is-scrolled .nav {
    max-height: calc(100vh - var(--bar-h));
    max-height: calc(100dvh - var(--bar-h));
  }

  .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity 0.3s var(--ease),
      transform 0.45s var(--ease-out),
      visibility 0s;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 8px;
  }

  .nav__list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    transform: translateY(-8px);
    transition:
      opacity 0.3s var(--ease),
      transform 0.5s var(--ease-out);
  }

  .nav.is-open .nav__list li {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.04s + var(--i, 0) * 0.045s);
  }

  .nav__list li:last-child {
    border-bottom: 0;
  }

  /* il pannello resta blu scuro: le voci tornano chiare */
  .nav :focus-visible {
    outline-color: #fff;
  }

  .nav__link {
    display: flex;
    min-height: 58px;
    padding: 0;
    color: var(--su-scuro-2);
    font-family: var(--font-titoli);
    font-size: 1.375rem;
    font-weight: 600;
  }

  .nav__link:hover,
  .nav__link[aria-current="page"] {
    color: #fff;
  }

  .nav__link::after {
    left: 0;
    right: auto;
    bottom: 13px;
    width: 28px;
  }

  .nav__link:hover::after {
    transform: scaleX(1);
  }

  .nav__link--cta {
    justify-content: center;
    margin: 18px 0 6px;
    min-height: 54px;
    background: #fff;
    color: var(--blu-scuro);
    font-family: var(--font-testo);
    font-size: 1.125rem;
  }

  .nav__link--cta:hover,
  .nav__link--cta[aria-current="page"] {
    background: var(--azzurro);
    color: var(--blu-scuro);
  }

  .nav__extra {
    display: grid;
    gap: 4px;
    padding: 4px var(--gutter) 28px;
    color: var(--su-scuro-2);
    font-size: 1rem;
  }

  .nav__extra a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    color: #fff;
    text-decoration: none;
  }

  .nav__extra .icon {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 759.98px) {
  .topbar__indirizzo {
    display: none;
  }

  .topbar__telefono {
    margin-left: auto;
  }

  .topbar__etichetta {
    display: none;
  }
}

@media (max-width: 379.98px) {
  .topbar__telefono-testo {
    display: none;
  }

  .brand__logo {
    height: 46px;
  }
}


/* 8. FOOTER -------------------------------------------------------------- */
/* L'HTML del footer viene inserito da script.js (funzione creaFooter) */

.site-footer {
  padding-top: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);
  background: var(--blu-scuro);
  color: var(--su-scuro-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.site-footer:empty {
  min-height: 240px;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer :focus-visible {
  outline-color: #fff;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: 28px 32px;
}

/* logo completo nel footer: abbastanza largo da leggere "Auto • Ricambi • Accessori" */
.brand--footer .brand__logo {
  width: clamp(240px, 22vw, 290px);
  height: auto;
}

.footer__brand p {
  margin-top: 16px;
  max-width: 44ch;
}

.footer__title {
  margin-bottom: 8px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
}

.footer__list {
  display: grid;
  gap: 4px;
  list-style: none;
}

.footer__nota {
  margin-top: 8px;
  font-size: 0.875rem;
}

.footer__orari {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  list-style: none;
  font-variant-numeric: tabular-nums;
}

.footer__orari span {
  display: inline-block;
  min-width: 4.6em;
  color: #fff;
}

.footer__orari .is-oggi {
  color: #fff;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  padding-block: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.8125rem;
}

@media (max-width: 899.98px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px 24px;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* Su smartphone: pagine e contatti affiancati, elenco pagine su due colonne */
@media (max-width: 539.98px) {
  .footer__grid > nav {
    grid-column: 1 / -1;
  }

  .footer__list--pagine {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  .footer__grid > div:last-child {
    grid-column: 1 / -1;
  }

  .footer__grid > div:nth-child(3) {
    grid-column: 1 / -1;
  }
}


/* 9. HOME ---------------------------------------------------------------- */

.hero {
  padding-block: clamp(2.75rem, 1.8rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
}

.hero__title {
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.hero__riga {
  display: block;
}

.hero__riga--accento {
  color: var(--blu);
}

/* Titolo e testo a sinistra, pannello orari/WhatsApp a destra (su smartphone:
   titolo, poi subito il pannello, poi il resto) */
.hero__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  grid-template-areas:
    "titolo banco"
    "testo banco";
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(2rem, 1rem + 4vw, 5rem);
}

.hero__griglia .hero__title {
  grid-area: titolo;
  font-size: clamp(2.375rem, 1.1rem + 4.4vw, 4.75rem);
}

.hero__testo {
  grid-area: testo;
}

.hero__lead {
  max-width: 44ch;
  font-size: var(--fs-lead);
  color: var(--testo-2);
}

.hero__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero__foto {
  margin-top: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  aspect-ratio: 21 / 9;
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--grigio-chiaro);
}

.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%; /* inquadra insegna e vetrine */
}

/* Pannello "Orari e contatti": la prima cosa da vedere */
.banco {
  grid-area: banco;
  display: grid;
  gap: 18px;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  border-radius: var(--raggio);
  background: var(--blu-scuro);
  color: var(--su-scuro-2);
}

.banco :focus-visible {
  outline-color: #fff;
}

.banco__titolo {
  font-size: 1.25rem;
  color: #fff;
}

.banco__stato {
  margin-top: -6px;
  font-family: var(--font-titoli);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}

.banco__stato .stato__punto {
  width: 11px;
  height: 11px;
}

.banco__orari {
  display: grid;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-variant-numeric: tabular-nums;
}

.banco__orari li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.banco__orari span {
  color: #fff;
  font-weight: 600;
}

.banco__orari .is-oggi {
  color: #fff;
  font-weight: 600;
}

.banco__numero {
  margin-top: 8px;
  font-size: 0.9375rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.banco__dove {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.banco__dove .icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: #fff;
}

.banco__dove a {
  color: #fff;
  font-weight: 600;
}

.banco__dove a:hover {
  color: #fff;
}

/* pulsante chiaro, per i fondi blu scuro */
.btn--bianco {
  background: #fff;
  color: var(--blu-scuro);
}

.btn--bianco:hover {
  background: var(--azzurro);
  color: var(--blu-scuro);
}

@media (max-width: 859.98px) {
  .hero__griglia {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "titolo"
      "banco"
      "testo";
    grid-template-rows: none;
  }

  .hero__foto {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 479.98px) {
  .hero__azioni .btn {
    flex: 1 1 100%;
  }
}

/* Tre punti forti */
.punti {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--bianco);
}

/* ogni punto: icona a sinistra, titolo e testo a destra (come una riga di catalogo) */
.punto {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-content: start;
  gap: 8px 16px;
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}

.punto + .punto {
  border-left: 1px solid var(--linea);
}

.punto .icon {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  color: var(--blu);
  stroke-width: 1.5;
}

.punto__titolo {
  font-size: var(--fs-h3);
}

.punto p {
  color: var(--testo-2);
}

@media (max-width: 819.98px) {
  .punti {
    grid-template-columns: minmax(0, 1fr);
  }

  .punto + .punto {
    border-left: 0;
    border-top: 1px solid var(--linea);
  }
}

/* Invito finale */
.invito {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  align-items: end;
  gap: 28px 64px;
}

.invito p {
  margin-top: 14px;
  max-width: 52ch;
  font-size: 1.125rem;
  color: var(--testo-2);
}

.invito__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 859.98px) {
  .invito {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 479.98px) {
  .invito__azioni .btn {
    flex: 1 1 100%;
  }
}


/* 10. INTESTAZIONE DELLE PAGINE INTERNE ---------------------------------- */

.page-head {
  padding-block: clamp(3rem, 2rem + 4.5vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
  background: var(--bianco-sporco);
  border-bottom: 1px solid var(--linea);
}

.page-head__title {
  font-size: var(--fs-h1);
  letter-spacing: -0.015em;
}

.page-head__lead {
  margin-top: 18px;
  max-width: 58ch;
  font-size: var(--fs-lead);
  color: var(--testo-2);
}

/* Contattaci: titolo in evidenza */
.page-head--contatti {
  background: var(--azzurro);
  border-bottom-color: var(--azzurro-2);
}

.page-head--contatti .page-head__title {
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--blu-scuro);
}


/* 11. CHI SIAMO ---------------------------------------------------------- */

.storia {
  display: grid;
  gap: clamp(4rem, 3rem + 4vw, 7rem);
}

.storia__voce {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5.5rem);
}

.storia__voce:nth-child(even) {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

.storia__voce:nth-child(even) .storia__foto {
  order: 2;
}

.storia__foto {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 470px;
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--grigio-chiaro);
}

.storia__voce:nth-child(even) .storia__foto {
  justify-self: end;
}

.storia__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storia__titolo {
  font-size: var(--fs-h2);
}

.storia__ruolo {
  font-weight: 600;
  color: var(--testo-2);
}

.storia__testo p {
  max-width: 54ch;
  margin-top: 1em;
  font-size: 1.125rem;
}

.storia__testo p:first-of-type {
  margin-top: 22px;
}

@media (max-width: 819.98px) {
  .storia__voce,
  .storia__voce:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
  }

  .storia__voce:nth-child(even) .storia__foto {
    order: 0;
    justify-self: start;
  }

  .storia__foto {
    max-width: 520px;
  }
}

/* Valori */
.valori {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: 28px clamp(2rem, 1rem + 4vw, 5rem);
}

.valori__titolo {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blu-scuro);
}

.valori__testo p {
  max-width: 48ch;
  font-size: 1.125rem;
  color: var(--testo-2);
}

.valori__testo .btn {
  margin-top: 26px;
}

@media (max-width: 819.98px) {
  .valori {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}


/* 12. SERVIZI ------------------------------------------------------------ */

.servizio-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--bianco);
  overflow: hidden;
}

.servizio-top__main {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 18px;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
}

.servizio-top__main > .icon {
  color: var(--blu);
}

.servizio-top__titolo {
  font-size: var(--fs-h2);
}

.servizio-top__main > p {
  max-width: 52ch;
  font-size: 1.125rem;
}

/* spedizione: riga evidenziata tra due linee sottili, senza riquadro */
.spedizione {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  justify-self: stretch;
  padding: 18px 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

.spedizione .icon {
  width: 28px;
  height: 28px;
  margin-top: 1px;
  color: var(--blu);
}

.spedizione strong {
  color: var(--blu-scuro);
  font-weight: 700;
}

.servizio-top__copertura {
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  border-left: 1px solid var(--linea);
  background: var(--bianco-sporco);
}

.copertura__titolo {
  font-size: var(--fs-h3);
}

.copertura__intro {
  margin-top: 8px;
  color: var(--testo-2);
}

.copertura {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  margin-top: 18px;
}

.copertura li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 13px;
  border-bottom: 1px solid var(--linea);
  font-size: 1.0625rem;
  font-weight: 500;
}

.copertura .icon {
  width: 18px;
  height: 18px;
  color: var(--blu);
  stroke-width: 2.25;
}

.copertura__altro {
  color: var(--testo-2);
  font-style: italic;
}

.servizi-griglia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.servizio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--bianco);
  transition: border-color 0.3s var(--ease);
}

.servizio:hover {
  border-color: var(--blu);
}

.servizio .icon {
  margin-bottom: 6px;
  color: var(--blu);
  transition: transform 0.5s var(--ease-out);
}

.servizio:hover .icon {
  transform: translateY(-3px);
}

.servizio__titolo {
  font-size: var(--fs-h3);
}

.servizio p {
  color: var(--testo-2);
}

.servizio .btn {
  margin-top: auto;
}

@media (max-width: 959.98px) {
  .servizio-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .servizio-top__copertura {
    border-left: 0;
    border-top: 1px solid var(--linea);
  }

  .servizi-griglia {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 479.98px) {
  .copertura {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Cosa ci serve sapere */
.dati {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 32px clamp(2rem, 1rem + 4vw, 5rem);
}

.dati__lista {
  display: grid;
  list-style: none;
  border-top: 1px solid var(--linea-forte);
}

.dati__lista li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 16px;
  border-bottom: 1px solid var(--linea-forte);
  font-size: 1.125rem;
  font-weight: 500;
}

.dati__lista .icon {
  color: var(--blu);
  stroke-width: 2.25;
  width: 20px;
  height: 20px;
}

.dati__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

@media (max-width: 819.98px) {
  .dati {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* 13. AUTO IN VENDITA ---------------------------------------------------- */

.auto-griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

.auto {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--bianco);
  overflow: hidden;
  color: var(--testo);
  text-decoration: none;
  transition:
    border-color 0.3s var(--ease),
    transform 0.5s var(--ease-out);
}

.auto:hover {
  border-color: var(--blu);
  transform: translateY(-4px);
  color: var(--testo);
}

.auto__foto {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--grigio-chiaro);
}

.auto__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.auto:hover .auto__foto img {
  transform: scale(1.045);
}

.auto__corpo {
  display: grid;
  gap: 20px;
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}

.auto__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}

.auto__titolo {
  font-size: var(--fs-h2);
}

.auto__anno {
  margin-top: 4px;
  color: var(--testo-2);
  font-variant-numeric: tabular-nums;
}

.auto__dati {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--linea);
}

.auto__dati div {
  padding-block: 13px;
}

.auto__dati div + div {
  padding-left: 18px;
  border-left: 1px solid var(--linea);
}

.auto__dati dt {
  font-size: 0.9375rem;
  color: var(--testo-2);
}

.auto__dati dd {
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Versione compatta per l'anteprima in home */
.auto--compatta .auto__corpo {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.auto--compatta .auto__titolo {
  font-size: var(--fs-h3);
}

/* Cartellino del prezzo, come quelli appesi ai ricambi.
   Un rettangolo con bordo sottile blu; la punta a sinistra è un quadrato
   ruotato di 45° (::after) con il bordo solo sui due lati esterni. */
.cartellino {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.4rem;
  margin-left: 1.2rem;
  padding: 0 0.95rem 0 0.95rem;
  border: 1px solid var(--blu);
  border-left: 0;
  border-radius: 0 4px 4px 0;
  background: var(--azzurro);
  color: var(--blu-scuro);
  font-family: var(--font-titoli);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transform-origin: -0.6rem 50%;
  transition: transform 0.6s var(--ease-out);
}

/* la punta: diagonale = altezza del cartellino (2.4rem) */
.cartellino::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
  width: 1.697rem;
  height: 1.697rem;
  border-left: 1px solid var(--blu);
  border-bottom: 1px solid var(--blu);
  background: var(--azzurro);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* il foro del cartellino */
.cartellino::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.45rem;
  z-index: 1;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.275rem;
  border-radius: 50%;
  background: var(--bianco);
  box-shadow: inset 0 0 0 1px var(--blu);
}

.cartellino__etichetta {
  font-family: var(--font-testo);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--testo-2);
}

.auto:hover .cartellino {
  transform: rotate(-3deg);
}

.auto-nota {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 70ch;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  color: var(--testo-2);
}

.auto-nota .icon {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--blu);
}

@media (max-width: 759.98px) {
  .auto-griglia {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 419.98px) {
  .auto--compatta .auto__corpo {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .auto__dati div + div {
    padding-left: 12px;
  }
}


/* 14. DOVE TROVARCI ------------------------------------------------------ */

.luogo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: stretch;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}

/* Su desktop la mappa è alta quanto la colonna con indirizzo e orari */
.luogo__mappa {
  position: relative;
  min-height: 480px;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--grigio-chiaro);
}

.luogo__mappa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.luogo__info {
  display: grid;
  gap: 40px;
}

.blocco__titolo {
  font-size: var(--fs-h3);
}

.blocco__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.blocco__indirizzo {
  margin-top: 12px;
  font-size: 1.1875rem;
  line-height: 1.5;
}

.blocco__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.orari {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.orari th,
.orari td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--linea);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.orari tr:first-child th,
.orari tr:first-child td {
  border-top: 1px solid var(--linea);
}

.orari th {
  padding-left: 0;
  font-weight: 500;
}

.orari td {
  padding-right: 0;
  text-align: right;
}

.orari .is-chiuso td {
  color: var(--testo-2);
}

.orari .is-oggi th,
.orari .is-oggi td {
  background: var(--azzurro);
  font-weight: 700;
  color: var(--blu-scuro);
}

.orari .is-oggi th {
  padding-left: 12px;
}

.orari .is-oggi td {
  padding-right: 12px;
}

.orari__oggi {
  margin-left: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--blu);
}

@media (max-width: 899.98px) {
  .luogo {
    grid-template-columns: minmax(0, 1fr);
  }

  .luogo__info {
    order: -1;
  }

  .luogo__mappa {
    min-height: 0;
    height: clamp(300px, 80vw, 440px);
  }
}

@media (max-width: 479.98px) {
  .blocco__azioni .btn {
    flex: 1 1 100%;
  }

  .orari td {
    font-size: 0.9875rem;
  }
}


/* 15. CONTATTI E MODULO -------------------------------------------------- */

.contatti {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.contatti__titolo {
  font-size: var(--fs-h3);
  margin-bottom: 18px;
}

.recapiti {
  border-top: 1px solid var(--linea);
}

.recapiti li {
  border-bottom: 1px solid var(--linea);
}

.recapito {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding-block: 18px;
  color: var(--testo);
  text-decoration: none;
}

.recapito > .icon {
  width: 26px;
  height: 26px;
  color: var(--blu);
}

.recapito__etichetta {
  display: block;
  font-size: 0.9375rem;
  color: var(--testo-2);
}

.recapito__valore {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--font-titoli);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s var(--ease);
}

.recapito .icon--freccia {
  width: 20px;
  height: 20px;
  color: var(--testo-2);
  transition:
    transform 0.35s var(--ease-out),
    color 0.2s var(--ease);
}

a.recapito:hover {
  color: var(--testo);
}

a.recapito:hover .recapito__valore,
a.recapito:hover .icon--freccia {
  color: var(--blu);
}

a.recapito:hover .icon--freccia {
  transform: translateX(4px);
}

.contatti__whatsapp {
  margin-top: 24px;
}

.contatti__orari {
  margin-top: 18px;
  color: var(--testo-2);
}

.modulo-box {
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--bianco);
}

.modulo-box__titolo {
  font-size: var(--fs-h2);
}

.modulo-box__intro {
  margin-top: 10px;
  margin-bottom: 26px;
  color: var(--testo-2);
}

.campo {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}

.campo label {
  font-weight: 600;
}

.campo input,
.campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--bianco);
  color: var(--testo);
  font: inherit;
  transition: border-color 0.2s var(--ease);
}

.campo textarea {
  min-height: 170px;
  resize: vertical;
}

.campo input:hover,
.campo textarea:hover {
  border-color: #a3adb9;
}

.campo input:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--blu);
  outline-offset: 0;
  border-color: var(--blu);
}

.campo ::placeholder {
  color: #6b7683;
  opacity: 1;
}

.campo.is-errore input,
.campo.is-errore textarea {
  border-color: var(--errore);
}

.campo__errore {
  color: var(--errore);
  font-size: 0.9375rem;
  font-weight: 500;
}

.campo__errore:empty {
  display: none;
}

/* esito del modulo: una riga separata da una linea sottile, senza riquadro */
.modulo__esito {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
  color: var(--testo);
}

.modulo__esito[hidden] {
  display: none;
}

@media (max-width: 899.98px) {
  .contatti {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 479.98px) {
  .modulo .btn {
    width: 100%;
  }
}


/* Galleria "Il nostro negozio" (Chi siamo) */
.galleria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}

.galleria__foto {
  aspect-ratio: 3 / 4;
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--grigio-chiaro);
}

.galleria__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* su smartphone le foto scorrono di lato */
@media (max-width: 759.98px) {
  .galleria {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-bottom: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
  }

  .galleria__foto {
    scroll-snap-align: start;
  }
}

/* Come riconoscerci (Dove trovarci) */
.ingresso {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.ingresso__foto {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 2 / 3;
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--grigio-chiaro);
}

.ingresso__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 50%; /* taglia il bordo destro della foto */
}

.ingresso__testo p {
  max-width: 46ch;
  margin: 16px 0 22px;
  font-size: 1.125rem;
  color: var(--testo-2);
}

.ingresso__testo strong {
  color: var(--testo);
}

@media (max-width: 759.98px) {
  .ingresso {
    grid-template-columns: minmax(0, 1fr);
  }

  .ingresso__foto {
    order: 2;
  }
}


/* Pannello WhatsApp (home): come chiedere un ricambio */
.pannello-wa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-areas:
    "testa passi"
    "azione passi";
  grid-template-rows: auto 1fr;
  gap: 28px clamp(2rem, 1rem + 4vw, 5rem);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--raggio);
  background: var(--azzurro);
}

.pannello-wa__testa {
  grid-area: testa;
}

.pannello-wa__testa .section__intro {
  color: var(--testo-2);
}

.pannello-wa__azione {
  grid-area: azione;
  align-self: start;
}

.pannello-wa__nota {
  margin-top: 14px;
  max-width: 40ch;
  font-size: 0.9375rem;
  color: var(--testo-2);
}

.passi {
  grid-area: passi;
  list-style: none;
  border-top: 1px solid var(--azzurro-2);
}

.passo {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 4px 14px;
  padding-block: 18px;
  border-bottom: 1px solid var(--azzurro-2);
}

.passo__numero {
  grid-row: 1 / span 2;
  font-family: var(--font-titoli);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 0.95;
  color: var(--blu);
  font-variant-numeric: tabular-nums;
}

.passo__titolo {
  font-size: var(--fs-h3);
}

.passo p {
  color: var(--testo-2);
}

@media (max-width: 859.98px) {
  .pannello-wa {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "testa"
      "passi"
      "azione";
    grid-template-rows: none;
  }
}

@media (max-width: 479.98px) {
  .pannello-wa__azione .btn {
    width: 100%;
  }
}

/* Auto in vendita: galleria, dati e punti forti */
.auto__foto {
  aspect-ratio: 3 / 2;
}

.auto__foto img {
  transition:
    transform 0.9s var(--ease-out),
    opacity 0.25s var(--ease);
}

.auto__foto img.in-cambio {
  opacity: 0.35;
}

/* inquadrature: Opel (foto verticali) e Kia (foto larghe, si esclude il bordo destro) */
.auto--opel img {
  object-position: 50% 68%;
}

.auto--kia img {
  object-position: 20% 50%;
}

.miniature {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--linea);
}

.miniatura {
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: var(--grigio-chiaro);
  cursor: pointer;
  opacity: 0.7;
  transition:
    opacity 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.miniatura:hover {
  opacity: 1;
}

.miniatura[aria-pressed="true"] {
  border-color: var(--blu);
  opacity: 1;
}

.auto__dati--esteso {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  border-bottom: 0;
}

.auto__dati--esteso div {
  padding-block: 10px;
  border-bottom: 1px solid var(--linea);
}

.auto__dati--esteso div + div {
  padding-left: 0;
  border-left: 0;
}

.auto__dati--esteso dd {
  font-size: 1.0625rem;
}

.auto__punti {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 20px;
  list-style: none;
}

.auto__punti li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9875rem;
  color: var(--testo-2);
}

.auto__punti .icon {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  color: var(--blu);
  stroke-width: 2.25;
}

.auto__avviso {
  margin-top: -8px;
  font-size: 0.9375rem;
  color: var(--testo-2);
}

/* nelle schede complete i pulsanti stanno in fondo, allineati tra le due auto */
.auto:not(.auto--compatta) .auto__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.auto__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: auto;
  padding-top: 4px;
}

.auto--compatta .auto__meta {
  margin-top: 4px;
  color: var(--testo-2);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 479.98px) {
  .auto__punti {
    grid-template-columns: minmax(0, 1fr);
  }

  .auto__azioni .btn {
    width: 100%;
  }
}

/* Contatti: WhatsApp per primo */
.contatti__nota {
  margin-bottom: 20px;
  color: var(--testo-2);
}

.contatti__titolo--secondo {
  margin-top: 44px;
}


/* 16. ANIMAZIONI --------------------------------------------------------- */

/* Elementi che entrano allo scroll: script.js aggiunge .in-attesa solo a quelli
   ancora fuori schermo, poi la toglie quando arrivano nella finestra. */
[data-reveal] {
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out),
    border-color 0.3s var(--ease);
}

[data-reveal].in-attesa {
  opacity: 0;
  transform: translateY(22px);
}

/* piccolo sfalsamento tra elementi vicini, solo durante l'ingresso */
[data-reveal].in-entrata {
  transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s;
}

/* Ingresso del titolo in home, una sola volta al caricamento */
.hero__riga {
  animation: riga-entra 1s var(--ease-out) both;
}

.hero__riga--accento {
  animation-delay: 0.12s;
}

.banco,
.hero__testo {
  animation: sale 0.9s var(--ease-out) both;
  animation-delay: 0.22s;
}

.hero__testo {
  animation-delay: 0.36s;
}

.hero__foto {
  animation: foto-entra 1.2s var(--ease-out) 0.45s both;
}

@keyframes riga-entra {
  from {
    opacity: 0;
    transform: translateY(0.28em);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes sale {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes foto-entra {
  from {
    opacity: 0;
    clip-path: inset(8% 0 0 0 round var(--raggio));
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round var(--raggio));
  }
}

@keyframes impulso {
  from {
    transform: scale(1);
    opacity: 0.55;
  }
  to {
    transform: scale(2.8);
    opacity: 0;
  }
}

/* Chi preferisce meno movimento (impostazione del sistema) non vede animazioni */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  [data-reveal].in-attesa {
    opacity: 1;
    transform: none;
  }
}