/* Del Toro Auto — foglio di stile unico, senza framework.
   Font: Barlow, da ospitare in /assets/font/ (file .woff2 ancora da aggiungere):
   finché mancano si usa il font di sistema. */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: local("Barlow"), local("Barlow-Regular"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: local("Barlow SemiBold"), local("Barlow-SemiBold"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: local("Barlow Bold"), local("Barlow-Bold"); }

:root {
  --grigio-3: #8a8d91;
  --testo: #222428;
  --testo-tenue: #555960;
  --bianco: #fff;
  /* Rosso del soccorso / urgenze (il tema "tenue" lo ammorbidisce) */
  --urgenza: #d40000;
  --urgenza-scuro: #a80000;
  /* Fondi scuri: componenti RGB per le trasparenze, testi e bordi sopra il fondo scuro */
  --scuro-rgb: 29, 31, 34;
  --testo-su-scuro: #c9cbce;
  --testo-su-scuro-forte: #dadcdf;
  --bordo-su-scuro: #3a3e43;
}

/* ===== TEMI COLORE =====
   Il tema si sceglie in app/config.php ('tema' => 'oro' oppure 'rosso').
   - oro:   antracite, bianco ghiaccio, oro satinato (proposta del 9/11/2026)
   - rosso: colori precedenti (rosso del logo) */
:root, [data-tema="oro"] {
  --antracite: #17191c;
  --antracite-2: #24272b;
  --sfondo: #fafbfc;                 /* bianco ghiaccio */
  --grigio-1: #eff1f3;               /* grigio chiaro delle sezioni */
  --grigio-2: #e1e4e8;
  --accento: #b8955a;                /* oro satinato: pulsanti, bordi, dettagli */
  --accento-scuro: #a07d45;
  --su-accento: #16181b;             /* testo sopra l'oro (contrasto alto) */
  --accento-testo: #85662e;          /* oro scurito per testi e link su fondo chiaro (contrasto AA) */
  --accento-testo-scuro: #6b5124;
  --accento-su-scuro: #d8bd88;       /* oro chiaro per testi su fondo scuro */
  --ombra-accento: rgba(184,149,90,.35);
  --hero-sfumatura: rgba(184,149,90,.28);
  --invito-bottone-sfondo: #17191c;
  --invito-bottone-testo: #fff;
}
[data-tema="rosso"] {
  --antracite: #1d1f22;
  --antracite-2: #2a2d31;
  --sfondo: #fff;
  --grigio-1: #f4f4f2;
  --grigio-2: #e3e3df;
  --accento: #d40000;                /* rosso del logo, scurito per il testo bianco (contrasto AA) */
  --accento-scuro: #a80000;
  --su-accento: #fff;
  --accento-testo: #d40000;
  --accento-testo-scuro: #a80000;
  --accento-su-scuro: #ff8e9e;
  --ombra-accento: rgba(212,0,0,.25);
  --hero-sfumatura: rgba(212,0,0,.55);
  --invito-bottone-sfondo: #fff;
  --invito-bottone-testo: #d40000;
}
/* Tenue: avorio, antracite caldo e bordeaux. Il rosso vivo resta solo nel logo. */
[data-tema="tenue"] {
  --antracite: #2e2b29;              /* antracite caldo, niente nero */
  --antracite-2: #3a3634;
  --scuro-rgb: 46, 43, 41;
  --testo-su-scuro: #d6d0ca;
  --testo-su-scuro-forte: #e8e3de;
  --bordo-su-scuro: #4a4542;
  --sfondo: #faf8f5;                 /* avorio leggerissimo */
  --grigio-1: #f1ede8;               /* grigio sabbia */
  --grigio-2: #e2dcd5;
  --grigio-3: #9a928b;
  --testo: #2b2826;
  --testo-tenue: #625b55;
  --accento: #a8322d;                /* rosso mattone / bordeaux */
  --accento-scuro: #8c2925;
  --su-accento: #fff;
  --accento-testo: #963530;
  --accento-testo-scuro: #7a2824;
  --accento-su-scuro: #eaa89f;       /* rosa antico per testi su fondo scuro */
  --ombra-accento: rgba(168,50,45,.22);
  --hero-sfumatura: rgba(120,40,36,.6);
  --invito-sfondo: #ece6df;            /* fascia finale color sabbia, non un altro blocco forte */
  --invito-testo: #2b2826;
  --invito-bottone-sfondo: #a8322d;
  --invito-bottone-testo: #fff;
  --urgenza: #b8312b;
  --urgenza-scuro: #8c2925;
}

:root {
  --raggio: 6px;
  --ombra: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --larghezza: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; color: var(--testo); background: var(--sfondo); }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accento-testo); text-underline-offset: .15em; }
a:hover { color: var(--accento-testo-scuro); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.35rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }
[id] { scroll-margin-top: 84px; }

.contenitore { width: 100%; max-width: var(--larghezza); margin: 0 auto; padding: 0 16px; }
.salta { position: absolute; left: -9999px; top: 0; background: var(--bianco); padding: .5em 1em; z-index: 100; }
.salta:focus { left: 8px; top: 8px; }
.segnaposto { background: #ffe14d; color: #000; padding: 0 .3em; border-radius: 3px; font-weight: 600; font-size: .9em; }

/* Bottoni */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 48px; padding: .7em 1.4em; border: 2px solid var(--accento); border-radius: var(--raggio); background: var(--accento); color: var(--su-accento); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
.bottone:hover { background: var(--accento-scuro); border-color: var(--accento-scuro); color: var(--su-accento); transform: translateY(-1px); box-shadow: 0 6px 16px var(--ombra-accento); }
.bottone:active { transform: translateY(0); box-shadow: none; }
.bottone--chiaro { background: transparent; color: inherit; border-color: currentColor; }
.bottone--chiaro:hover { background: rgba(255,255,255,.12); color: inherit; border-color: currentColor; }
.chiaro .bottone--chiaro, .sezione:not(.sezione--scura) .bottone--chiaro { color: var(--antracite); }
.chiaro .bottone--chiaro:hover, .sezione:not(.sezione--scura) .bottone--chiaro:hover { background: var(--grigio-1); }
.bottone--piccolo { min-height: 40px; padding: .4em 1em; font-size: .95rem; }

/* Testata */
.testata { background: var(--bianco); color: var(--testo); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--grigio-2); transition: background-color .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1); }
/* Barra scorrendo la pagina (classe aggiunta da sito.js): scura, semitrasparente, con sfocatura */
.testata--scorsa { background: rgba(var(--scuro-rgb), .92); color: var(--bianco); border-bottom-color: transparent; box-shadow: 0 8px 30px rgba(0,0,0,.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.testata--scorsa .menu-apri { color: var(--bianco); }
@media (min-width: 1061px) {
  .testata--scorsa .menu > ul > li > a { color: var(--bianco); transition: color .2s, background-color .2s; }
  .testata--scorsa .menu > ul > li > a:hover, .testata--scorsa .menu > ul > li > a[aria-current] { background: rgba(255,255,255,.08); color: var(--bianco); }
}
.testata__riga { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; }
.logo { flex-shrink: 0; }
.logo img { width: 300px; height: auto; }
@media (max-width: 1240px) { .logo img { width: 240px; } }
@media (max-width: 420px) { .logo img { width: 200px; } }
.menu-apri { display: none; align-items: center; gap: .5em; background: none; border: 0; color: inherit; font: inherit; font-weight: 600; min-height: 48px; padding: 0 .5em; cursor: pointer; }
.menu-apri__icona, .menu-apri__icona::before, .menu-apri__icona::after { display: block; width: 22px; height: 2px; background: currentColor; position: relative; }
.menu-apri__icona::before, .menu-apri__icona::after { content: ""; position: absolute; left: 0; }
.menu-apri__icona::before { top: -7px; } .menu-apri__icona::after { top: 7px; }
.menu { display: flex; align-items: center; gap: 20px; }
.menu > ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 4px; }
.menu li { position: relative; }
.menu a { color: var(--testo); text-decoration: none; }
.menu a.bottone, .menu a.bottone:hover { color: var(--su-accento); }
.menu > ul > li > a { display: block; padding: .6em .7em; font-weight: 600; border-radius: var(--raggio); }
.menu > ul > li > a:hover, .menu > ul > li > a[aria-current] { background: var(--grigio-1); color: var(--accento-testo); }
.menu > ul > li > a[aria-current] { box-shadow: inset 0 -3px 0 var(--accento); }
.sottomenu { list-style: none; margin: 0; padding: 6px; position: absolute; left: 0; top: 100%; min-width: 250px; background: var(--bianco); border: 1px solid var(--grigio-2); border-radius: var(--raggio); box-shadow: var(--ombra); display: none; }
.sottomenu a { display: block; padding: .55em .8em; border-radius: 4px; }
.sottomenu a:hover { background: var(--grigio-1); color: var(--accento-testo); }
.ha-sotto:hover > .sottomenu, .ha-sotto:focus-within > .sottomenu { display: block; }

@media (max-width: 1060px) {
  .menu-apri { display: inline-flex; }
  .js .menu { display: none; }
  .menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--bianco); flex-direction: column; align-items: stretch; padding: 8px 16px 20px; max-height: calc(100vh - 72px); overflow-y: auto; border-top: 1px solid var(--grigio-2); box-shadow: 0 8px 16px rgba(0,0,0,.08); }
  .js .menu.aperto { display: flex; }
  .menu > ul { flex-direction: column; }
  .sottomenu { display: block; position: static; background: none; border: 0; box-shadow: none; padding: 0 0 0 12px; min-width: 0; }
  .menu__tel { margin-top: 8px; }
  .testata__riga { position: relative; }
}

/* Briciole */
.briciole ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3em; padding: 12px 16px 0; margin: 0; font-size: .9rem; color: var(--testo-tenue); }
.briciole li + li::before { content: "›"; margin-right: .3em; }
.briciole a { color: var(--testo-tenue); }

/* Sezioni */
.sezione { padding: clamp(56px, 8vw, 104px) 0; }
.sezione--grigia { background: var(--grigio-1); }
.sezione--scura { background: var(--antracite); color: var(--bianco); }
.sezione--scura a:not(.bottone) { color: var(--accento-su-scuro); }
.sezione__testa { max-width: 760px; margin-bottom: 36px; }
.sezione__testa p { color: var(--testo-tenue); font-size: 1.1rem; }
.sezione--scura .sezione__testa p { color: var(--testo-su-scuro); }
.occhiello { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; font-weight: 700; color: var(--accento-testo); margin-bottom: .5em; }
.sezione--scura .occhiello, .hero .occhiello { color: var(--accento-su-scuro); }
.testo { max-width: 760px; }
.testo h2 { margin-top: 1.4em; }
.due-colonne { display: grid; gap: 32px; grid-template-columns: 1fr; }
.foto-salone { margin: 0 0 20px; }
.foto-salone img { width: 100%; height: auto; border-radius: var(--raggio); box-shadow: 0 14px 34px rgba(0,0,0,.12); }
.due-colonne--foto .foto-salone { margin: 0; }
@media (min-width: 860px) { .due-colonne.due-colonne--foto { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 56px; } }
@media (min-width: 860px) { .due-colonne { grid-template-columns: 1.4fr 1fr; align-items: start; } }

/* Hero home */
.hero { position: relative; overflow: hidden; background: linear-gradient(120deg, rgba(var(--scuro-rgb), .96) 0%, rgba(var(--scuro-rgb), .85) 55%, var(--hero-sfumatura) 100%), var(--antracite); color: var(--bianco); padding: clamp(56px, 10vw, 120px) 0; }
.hero > .contenitore { position: relative; z-index: 1; }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero--foto { min-height: min(82vh, 760px); display: flex; align-items: center; }
.hero--foto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(var(--scuro-rgb), .92) 0%, rgba(var(--scuro-rgb), .7) 45%, rgba(var(--scuro-rgb), .15) 100%); }
.hero--foto > .contenitore { z-index: 2; }
/* Inquadratura della foto attuale: il faro è a destra */
.hero--foto:not(.hero--testo-destra) .hero__foto { object-position: 88% 50%; }
/* Hero con testo a destra (soggetto della foto a sinistra) */
.hero--testo-destra > .contenitore { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.hero--testo-destra .hero__azioni { justify-content: flex-end; }
.hero--testo-destra.hero--foto::before { background: linear-gradient(260deg, rgba(var(--scuro-rgb), .92) 0%, rgba(var(--scuro-rgb), .75) 38%, rgba(var(--scuro-rgb), .2) 62%, rgba(var(--scuro-rgb), .05) 100%); }
.hero--testo-destra .hero__foto { object-position: 40% 35%; }
@media (max-width: 760px) {
  .hero--foto { align-items: flex-end; }
  .hero--testo-destra > .contenitore { align-items: flex-start; text-align: left; }
  .hero--testo-destra .hero__azioni { justify-content: flex-start; }
  .hero--foto::before, .hero--testo-destra.hero--foto::before { background: linear-gradient(0deg, rgba(var(--scuro-rgb), .95) 0%, rgba(var(--scuro-rgb), .8) 50%, rgba(var(--scuro-rgb), .2) 100%); }
  .hero--testo-destra .hero__foto { object-position: 30% 30%; }
}
.hero h1 { max-width: 14ch; }
.hero p { font-size: 1.25rem; max-width: 48ch; color: var(--testo-su-scuro-forte); }
.hero__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero__nota { margin-top: 18px; font-size: .9rem; }

/* Due ingressi */
.ingressi { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: -40px; position: relative; z-index: 3; } /* sopra la foto e la sfumatura dell'hero */
@media (min-width: 760px) { .ingressi { grid-template-columns: repeat(3, 1fr); } }
.ingresso { display: block; background: var(--bianco); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 28px; text-decoration: none; color: var(--testo); border-top: 4px solid var(--accento); }
.ingresso--scuro { background: var(--antracite-2); color: var(--bianco); border-top-color: var(--bianco); }
.ingresso h2 { font-size: 1.5rem; }
.ingresso p { color: inherit; opacity: .85; margin-bottom: .6em; }
.ingresso span { font-weight: 700; color: var(--accento-testo); }
.ingresso--scuro { border-top-color: var(--accento); }
.ingresso--scuro span { color: var(--accento-su-scuro); }
.ingresso--rosso { background: var(--urgenza); color: var(--bianco); border-top-color: var(--antracite); }
.ingresso--rosso span { color: var(--bianco); }
.ingresso__occhiello { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; margin: 0 0 .4em; opacity: .75; }
.ingresso { transition: transform .25s ease, box-shadow .25s ease; }
.ingresso:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.14); }
/* Il colore del testo resta quello del riquadro anche al passaggio, al clic e con la tastiera
   (altrimenti vince la regola generale a:hover e sui riquadri scuri il testo diventa illeggibile) */
a.ingresso, a.ingresso:hover, a.ingresso:focus, a.ingresso:active { color: var(--testo); }
a.ingresso--scuro, a.ingresso--scuro:hover, a.ingresso--scuro:focus, a.ingresso--scuro:active,
a.ingresso--rosso, a.ingresso--rosso:hover, a.ingresso--rosso:focus, a.ingresso--rosso:active { color: var(--bianco); }

/* Schede servizio */
.griglia { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.carta { background: var(--bianco); border: 1px solid var(--grigio-2); border-radius: var(--raggio); padding: 22px; }
.sezione--scura .carta { background: var(--antracite-2); border-color: var(--bordo-su-scuro); }
.carta { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.carta:hover { transform: translateY(-3px); box-shadow: var(--ombra); border-color: transparent; }
.carta h3 { margin-bottom: .35em; }
.carta p { margin: 0; color: var(--testo-tenue); }
.sezione--scura .carta p { color: var(--testo-su-scuro); }
.carta a.carta__link { display: inline-block; margin-top: .7em; font-weight: 600; }

/* Intestazione pagine interne */
.intestazione { background: var(--antracite); color: var(--bianco); padding: clamp(36px, 6vw, 64px) 0; margin-top: 12px; }
.briciole + main .intestazione, main > .intestazione:first-child { margin-top: 12px; }
.intestazione__sotto { font-size: 1.2rem; color: var(--testo-su-scuro); max-width: 60ch; margin: 0; }
.intestazione--foto { position: relative; overflow: hidden; min-height: clamp(280px, 42vw, 460px); display: flex; align-items: center; }
.intestazione__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.intestazione--foto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(var(--scuro-rgb), .92) 0%, rgba(var(--scuro-rgb), .72) 28%, rgba(var(--scuro-rgb), .12) 48%, rgba(var(--scuro-rgb), 0) 62%); }
.intestazione--foto > .contenitore { position: relative; z-index: 2; }
.intestazione--foto h1 { max-width: 13ch; }
.intestazione--foto .intestazione__sotto { max-width: 30ch; }
@media (max-width: 700px) {
  .intestazione--foto { align-items: flex-end; min-height: 380px; }
  .intestazione__foto { object-position: 65% 20%; }
  .intestazione--foto::before { background: linear-gradient(0deg, rgba(var(--scuro-rgb), .94) 0%, rgba(var(--scuro-rgb), .7) 45%, rgba(var(--scuro-rgb), .05) 100%); }
}
.intestazione--foto-permuta .intestazione__foto { object-position: 50% 45%; }
@media (max-width: 700px) { .intestazione--foto-permuta .intestazione__foto { object-position: 55% 40%; } }
/* Variante con testo a destra (quando il soggetto della foto è a sinistra) */
.intestazione--testo-destra > .contenitore { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.intestazione--testo-destra.intestazione--foto::before { background: linear-gradient(260deg, rgba(var(--scuro-rgb), .92) 0%, rgba(var(--scuro-rgb), .72) 28%, rgba(var(--scuro-rgb), .12) 48%, rgba(var(--scuro-rgb), 0) 62%); }
.intestazione--foto-assistenza .intestazione__foto { object-position: 30% 45%; }
@media (max-width: 700px) {
  .intestazione--testo-destra > .contenitore { align-items: flex-start; text-align: left; }
  /* Su telefono: foto sopra e testo sotto, così il soggetto a sinistra non viene coperto */
  .intestazione--testo-destra.intestazione--foto, .intestazione--impila-mobile.intestazione--foto { flex-direction: column; align-items: stretch; min-height: 0; padding-top: 0; }
  .intestazione--testo-destra.intestazione--foto::before, .intestazione--impila-mobile.intestazione--foto::before { display: none; }
  .intestazione--testo-destra picture, .intestazione--impila-mobile picture { display: block; }
  .intestazione--testo-destra .intestazione__foto, .intestazione--impila-mobile .intestazione__foto { position: static; display: block; height: 230px; }
  .intestazione--testo-destra > .contenitore, .intestazione--impila-mobile > .contenitore { padding-top: 24px; }
  .intestazione--foto-assistenza .intestazione__foto { object-position: 30% 55%; }
}
.intestazione--foto-carrozzeria .intestazione__foto { object-position: 50% 62%; }
@media (max-width: 700px) { .intestazione--foto-carrozzeria .intestazione__foto { object-position: 50% 62%; } }
.intestazione--foto-soccorso .intestazione__foto { object-position: 40% 62%; }
@media (max-width: 700px) { .intestazione--foto-soccorso .intestazione__foto { object-position: 32% 68%; } }
.intestazione--foto-pellicole .intestazione__foto { object-position: 50% 45%; }
@media (max-width: 700px) { .intestazione--foto-pellicole .intestazione__foto { object-position: 62% 45%; } }
.intestazione--foto-personalizzazioni .intestazione__foto { object-position: 55% 40%; }
@media (max-width: 700px) { .intestazione--foto-personalizzazioni .intestazione__foto { object-position: 58% 40%; } }
.intestazione--foto-restauro .intestazione__foto { object-position: 0% 45%; }
@media (max-width: 700px) { .intestazione--foto-restauro .intestazione__foto { object-position: 0% 55%; } }
.intestazione--rossa { background: linear-gradient(120deg, var(--antracite) 40%, var(--urgenza-scuro)); }

/* Elenco auto */
.filtri { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); align-items: end; background: var(--grigio-1); padding: 16px; border-radius: var(--raggio); margin-bottom: 24px; }
.filtri label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 4px; }
.filtri select, .filtri input { width: 100%; min-height: 44px; padding: .4em .6em; font: inherit; border: 1px solid var(--grigio-2); border-radius: var(--raggio); background: var(--bianco); }
.risultati { color: var(--testo-tenue); margin-bottom: 16px; }
.auto-griglia { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); list-style: none; padding: 0; margin: 0; }
.auto-carta { background: var(--bianco); border: 1px solid var(--grigio-2); border-radius: var(--raggio); overflow: hidden; display: flex; flex-direction: column; position: relative; }
.auto-carta { transition: transform .25s ease, box-shadow .25s ease; }
.auto-carta:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.12); }
.auto-carta__foto img { transition: transform .5s ease; }
.auto-carta:hover .auto-carta__foto img { transform: scale(1.04); }
.auto-carta__foto { aspect-ratio: 4 / 3; background: var(--grigio-1); overflow: hidden; }
.auto-carta__foto img { width: 100%; height: 100%; object-fit: cover; }
.auto-carta__corpo { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.auto-carta h3 { font-size: 1.2rem; margin: 0 0 .25em; }
.auto-carta h3 a { color: var(--testo); text-decoration: none; }
.auto-carta h3 a::after { content: ""; position: absolute; inset: 0; }
.auto-carta__dati { color: var(--testo-tenue); font-size: .95rem; margin: 0 0 12px; }
.auto-carta__piede { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auto-carta__prezzo { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--antracite); }
.auto-carta__link { font-weight: 700; color: var(--accento-testo); font-size: .95rem; transition: transform .2s ease; }
.auto-carta:hover .auto-carta__link { transform: translateX(3px); }
.etichetta { display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .2em .6em; border-radius: 3px; background: var(--antracite); color: var(--bianco); }
.auto-carta .etichetta { position: absolute; top: 12px; left: 12px; }
.etichetta--venduta { background: var(--urgenza); }
.auto-carta--venduta .auto-carta__foto { opacity: .6; }
.vuoto { padding: 40px; text-align: center; background: var(--grigio-1); border-radius: var(--raggio); }

/* Scheda auto */
.scheda { display: grid; gap: 32px; grid-template-columns: 1fr; padding-top: 24px; }
@media (min-width: 960px) { .scheda { grid-template-columns: 1.5fr 1fr; align-items: start; } .scheda__lato { position: sticky; top: 88px; } }
.galleria__principale { background: var(--grigio-1); border-radius: var(--raggio); overflow: hidden; aspect-ratio: 4 / 3; }
.galleria__principale img { width: 100%; height: 100%; object-fit: contain; }
.galleria__miniature { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 10px 0 0; }
.galleria__miniature a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; border: 2px solid transparent; }
.galleria__miniature a[aria-current="true"] { border-color: var(--accento); }
.galleria__miniature img { width: 100%; height: 100%; object-fit: cover; }
.scheda__lato { background: var(--grigio-1); border-radius: var(--raggio); padding: 24px; }
.scheda__prezzo { font-size: 2rem; font-weight: 700; color: var(--antracite); margin: .2em 0 .6em; }
.scheda__azioni { display: grid; gap: 10px; }
.scheda__garanzia { margin: 16px 0 0; padding: 0; list-style: none; }
.scheda__garanzia li { padding-left: 1.6em; position: relative; margin-bottom: .3em; }
.scheda__garanzia li::before { content: "✓"; position: absolute; left: 0; color: var(--accento-testo); font-weight: 700; }
.dati-tabella { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.dati-tabella th, .dati-tabella td { text-align: left; padding: .55em .4em; border-bottom: 1px solid var(--grigio-2); }
.dati-tabella th { font-weight: 600; color: var(--testo-tenue); width: 45%; }
.dotazioni { columns: 2 220px; padding-left: 1.1em; }
.avviso { background: #fff4d6; border-left: 4px solid #e0a800; padding: 12px 16px; border-radius: 4px; }

/* Invito finale */
.invito { background: var(--invito-sfondo, var(--accento)); color: var(--invito-testo, var(--su-accento)); padding: 40px 0; }
.invito__riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.invito h2 { margin-bottom: .2em; }
.invito p { margin: 0; opacity: .92; }
.invito__azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.invito .bottone { background: var(--invito-bottone-sfondo); color: var(--invito-bottone-testo); border-color: var(--invito-bottone-sfondo); }
.invito .bottone--chiaro { background: transparent; color: inherit; border-color: currentColor; }

/* Soccorso */
.soccorso-box { background: var(--urgenza); color: var(--bianco); border-radius: var(--raggio); padding: 24px; }
.soccorso-box a, .sezione--scura .soccorso-box a { color: var(--bianco); font-weight: 700; }
.soccorso-box a[href^="tel:"] { font-size: 1.8rem; }
.soccorso-box .segnaposto { font-size: 1rem; }

/* Contatti */
.sedi { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .sedi { grid-template-columns: 1fr 1fr; } }
.sede { border: 1px solid var(--grigio-2); border-radius: var(--raggio); padding: 24px; }
.sede dl { display: grid; grid-template-columns: auto 1fr; gap: .3em 1em; margin: 0 0 16px; }
.sede dt { font-weight: 600; color: var(--testo-tenue); }
.sede dd { margin: 0; }

/* Gallery */
.foto-griglia { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.foto-segnaposto { aspect-ratio: 4 / 3; background: var(--grigio-1); border: 2px dashed var(--grigio-2); border-radius: var(--raggio); display: grid; place-items: center; color: var(--grigio-3); font-weight: 600; text-align: center; padding: 12px; }

/* Piede */
.piede { background: var(--antracite); color: var(--testo-su-scuro); padding: 48px 0 0; font-size: .97rem; }
.piede h2 { color: var(--bianco); font-size: 1.1rem; margin-top: 0; }
.piede a { color: var(--bianco); }
.piede__griglia { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.piede__soccorso a { font-size: 1.4rem; font-weight: 700; }
.piede__legale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid var(--antracite-2); margin-top: 24px; padding-top: 16px; padding-bottom: 16px; font-size: .9rem; }
.piede__legale p { margin: 0; }

/* Barra contatti su mobile */
.barra-mobile { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 60px; }
  .barra-mobile { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--antracite); border-top: 1px solid var(--antracite-2); }
  .barra-mobile a { display: flex; align-items: center; justify-content: center; min-height: 56px; color: var(--bianco); font-weight: 700; text-decoration: none; }
  .barra-mobile a + a { border-left: 1px solid var(--antracite-2); }
  .barra-mobile__soccorso { background: var(--urgenza); }
}

/* Pulsante "← Pannello" per chi gestisce il sito */
.torna-pannello { position: fixed; left: 16px; bottom: 16px; z-index: 70; background: var(--antracite); color: var(--bianco); padding: .55em 1em; border-radius: 99px; font-weight: 700; font-size: .95rem; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.torna-pannello:hover { background: var(--accento); color: var(--su-accento); }
@media (max-width: 760px) { .torna-pannello { bottom: 72px; } }

/* Comparsa graduale scorrendo (classi aggiunte da sito.js) */
.js .appare { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .appare.visibile { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } .js .appare { opacity: 1; transform: none; } }
@media print { .testata, .piede, .barra-mobile, .invito, .filtri { display: none; } }