@import url("../fonts/fonts.css");

/* ==========================================================================
   SEVEN RACING — «A CARTE SCOPERTE»
   ---------------------------------------------------------------------------
   Il concetto: il contrario di un piazzale. Tutto in chiaro, niente ritagliato,
   niente cornici in cui nascondere. Fondo bianco da sala di posa, mezzi
   scontornati che stanno SOPRA la pagina, non dentro un riquadro.

   Firma: LA FILA CHE SI SCOPRE — nella riga scorrevole il mezzo che passa al
   centro alza la sua scheda dati e la fotografia si sposta dentro il riquadro,
   come se il muso girasse verso chi guarda. È la fila del deposito.

   🔴 Il tema PREDEFINITO è CHIARO. Lo scuro è l'alternativa, non il contrario.
   ========================================================================== */

:root{
  /* ── colore · tema chiaro, quello di partenza ───────────────────────── */
  --carta:#F4F3F0;          /* fondo pagina: carta da sala di posa, calda */
  --scheda:#FFFFFF;
  --scheda-alt:#FAF9F5;
  --linea:#E4E2DA;
  --linea-forte:#CFCCC2;
  --inchiostro:#14161A;
  --grigio:#575E68;
  --grigio-chiaro:#8B929B;
  --rosso:#D51A22;          /* campionato dal logo del cliente */
  --rosso-testo:#A50F16;    /* la stessa tinta, leggibile in corpo piccolo */
  --rosso-velo:rgba(213,26,34,.08);
  --verde:#1E7A46;
  --velo:rgba(255,255,255,.92);
  --ombra-1:0 1px 2px rgba(20,22,26,.05), 0 2px 10px rgba(20,22,26,.04);
  --ombra-2:0 2px 6px rgba(20,22,26,.07), 0 14px 34px rgba(20,22,26,.09);
  --ombra-terra:rgba(20,22,26,.20);   /* l'ombra a terra sotto i mezzi */
  --vuoto:#EDEBE4;

  /* ── tipografia ─────────────────────────────────────────────────────── */
  --display:"Saira Condensed","Arial Narrow",Arial,sans-serif;
  --testo:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* ── spazio ─────────────────────────────────────────────────────────── */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4.5rem; --s9:6.5rem;

  --raggio:3px;             /* è lamiera, non gelatina */
  --max:1320px;
  --testata:66px;
  --angolo:-5.2deg;         /* l'inclinazione del «7» del marchio: è il sistema */
}

/* ══════════════════════════════════════════════════════════════════════
   IL TEMA SCURO — l'alternativa
   Stessa struttura, stessi caratteri, stesso rosso: cambiano i valori.
   ══════════════════════════════════════════════════════════════════════ */
:root[data-tema="scuro"]{
  --carta:#0C0D0F;
  --scheda:#15171B;
  --scheda-alt:#1B1E23;
  --linea:#282C33;
  --linea-forte:#3A3F47;
  --inchiostro:#F2F2F0;
  --grigio:#A0A7AF;
  --grigio-chiaro:#727981;
  --rosso:#E8323A;
  --rosso-testo:#FF7B80;
  --rosso-velo:rgba(232,50,58,.12);
  --verde:#4FCB84;
  --velo:rgba(12,13,15,.92);
  --ombra-1:0 1px 2px rgba(0,0,0,.5);
  --ombra-2:0 2px 8px rgba(0,0,0,.55), 0 18px 40px rgba(0,0,0,.5);
  --ombra-terra:rgba(0,0,0,.55);
  --vuoto:#1E2126;
}

/* ══ base ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--carta);
  color:var(--inchiostro);
  font-family:var(--testo);
  font-size:clamp(1rem,.97rem + .16vw,1.075rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
figure{margin:0}          /* il default del browser rubava 80px di larghezza */
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--rosso);outline-offset:3px;border-radius:2px}
::selection{background:var(--rosso);color:#fff}

h1,h2,h3,h4{
  font-family:var(--display);font-weight:700;line-height:.98;
  letter-spacing:-.005em;text-transform:uppercase;margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,1.5rem + 4.2vw,4.9rem)}
h2{font-size:clamp(1.95rem,1.35rem + 2.5vw,3.35rem)}
h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.6rem)}
p{margin:0}

.salta{
  position:absolute;left:-999px;top:0;z-index:100;background:var(--rosso);color:#fff;
  padding:.7rem 1.1rem;font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;
}
.salta:focus{left:.5rem;top:.5rem}

.contenuto{width:min(100% - 2.5rem,var(--max));margin-inline:auto}
@media (max-width:520px){.contenuto{width:min(100% - 1.75rem,var(--max))}}

.sezione{padding-block:clamp(3rem,7vw,6rem)}
.sezione--stretta{padding-block:clamp(2.25rem,5vw,4rem)}
.sezione--fondo{background:var(--scheda-alt);border-block:1px solid var(--linea)}

/* l'occhiello: due parole rosse con un trattino, il segnale d'inizio sezione */
.occhiello{
  font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rosso-testo);
  display:flex;align-items:center;gap:.7rem;margin-bottom:var(--s3);
}
.occhiello::before{content:"";width:2.2rem;height:2px;background:var(--rosso);flex:none}

.sezione__testa{max-width:44ch;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.sezione__testa p{color:var(--grigio);margin-top:var(--s4);font-size:1.06em}

.guida{color:var(--grigio)}
.minuta{font-size:.88rem;color:var(--grigio-chiaro)}

/* ══ pulsanti ══════════════════════════════════════════════════════════ */
.bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;
  padding:.92rem 1.55rem;border:1.5px solid var(--rosso);background:var(--rosso);color:#fff;
  border-radius:var(--raggio);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s ease,background-color .18s ease;
  will-change:transform;
}
.bottone:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(213,26,34,.28)}
.bottone:active{transform:translateY(0)}
.bottone--vuoto{background:transparent;color:var(--inchiostro);border-color:var(--linea-forte)}
.bottone--vuoto:hover{border-color:var(--inchiostro);box-shadow:var(--ombra-1)}
.bottone--verde{background:var(--verde);border-color:var(--verde)}
.bottone--verde:hover{box-shadow:0 6px 18px rgba(30,122,70,.3)}
.bottone--piccolo{padding:.62rem 1rem;font-size:.84rem}

/* ══ TESTATA ═══════════════════════════════════════════════════════════ */
.testata{
  position:sticky;top:0;z-index:50;background:var(--velo);
  border-bottom:1px solid var(--linea);
}
.testata__dentro{
  width:min(100% - 2.5rem,var(--max));margin-inline:auto;height:var(--testata);
  display:flex;align-items:center;gap:var(--s4);
}
.testata__marchio{flex:none;display:block;line-height:0}
.testata__marchio img{height:34px;width:auto}
.menu{margin-left:auto;display:flex;align-items:center;gap:clamp(.75rem,2vw,1.7rem)}
.menu a{
  font-family:var(--display);font-weight:600;font-size:.92rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--grigio);
  padding:.35rem 0;position:relative;transition:color .16s ease;
}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--rosso);
  transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
.menu a:hover,.menu a[aria-current="page"]{color:var(--inchiostro)}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.tema{
  display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--linea-forte);
  border-radius:var(--raggio);padding:.4rem .7rem;color:var(--grigio);
  font-family:var(--display);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  transition:color .16s ease,border-color .16s ease;
}
.tema:hover{color:var(--inchiostro);border-color:var(--inchiostro)}
.tema svg{width:15px;height:15px;flex:none}
@media (max-width:760px){
  .testata__dentro{gap:var(--s3)}
  .testata__marchio img{height:28px}
  .menu{gap:.7rem}
  .menu a{font-size:.78rem;letter-spacing:.1em}
  .tema span{display:none}
  .tema{padding:.4rem .5rem}
}
@media (max-width:400px){
  .menu a{font-size:.72rem;letter-spacing:.06em}
  .testata__marchio img{height:24px}
}

/* ══════════════════════════════════════════════════════════════════════
   L'APERTURA — il palco
   I due mezzi sono OGGETTI scontornati, non fotografie dentro un riquadro:
   per costruzione non possono essere tagliati. Il marchio sta DIETRO, grande,
   come l'insegna della struttura nelle fotografie che fa il cliente.
   ══════════════════════════════════════════════════════════════════════ */
.apertura{position:relative;overflow:hidden;padding-top:clamp(1.25rem,3vw,2.25rem)}
/* Da computer: parole a sinistra, palco a destra, tutto in una schermata.
   Da telefono: le parole, poi il palco sotto. */
.apertura__griglia{display:grid;gap:clamp(.5rem,2vw,2.5rem)}
@media (min-width:1000px){
  .apertura{min-height:min(90svh,780px);display:grid;align-content:center}
  .apertura__griglia{
    grid-template-columns:minmax(0,41%) minmax(0,59%);
    align-items:center;
  }
}
.apertura::before{      /* la luce della sala di posa */
  content:"";position:absolute;inset:-20% -10% auto;height:120%;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 34%,rgba(255,255,255,.9),transparent 72%);
  z-index:0;
}
:root[data-tema="scuro"] .apertura::before{
  background:radial-gradient(58% 52% at 50% 34%,rgba(255,255,255,.07),transparent 72%);
}
.apertura__parole{position:relative;z-index:4;max-width:24ch}
.apertura h1{
  margin-bottom:var(--s4);
  font-size:clamp(2.2rem,1.35rem + 2.6vw,3.5rem);
  letter-spacing:-.012em;
}
.apertura h1 em{font-style:normal;color:var(--rosso-testo)}
.apertura__guida{color:var(--grigio);font-size:1.05em;max-width:34ch}
@media (max-width:999px){.apertura__parole{max-width:30ch}}

/* le tre porte: la navigazione vera del sito */
.porte{
  position:relative;z-index:4;margin-top:clamp(1.25rem,2.5vw,2rem);
  display:grid;gap:var(--s3);grid-template-columns:repeat(3,minmax(0,1fr));
}
/* le tre porte e i tre fatti: la fascia chiara subito sotto l'apertura.
   Le porte non vanno a tutta larghezza, altrimenti sembrano stirate:
   restano schede compatte, con l'icona a fianco del nome. */
.porte-fuori{padding-block:clamp(1.5rem,3.5vw,2.5rem) 0}
.porte-fuori .porte{margin-top:0;max-width:940px}
.porte-fuori .porta{
  display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;row-gap:0;
  align-items:center;padding:1rem 1.15rem;
}
.porte-fuori .porta__icona{grid-row:1/3;width:30px;height:30px;margin:0}
.porte-fuori .porta__nome{align-self:end}
.porte-fuori .porta__dettaglio{align-self:start}
@media (max-width:560px){
  .porte-fuori .porta{padding:.8rem .9rem;column-gap:.7rem}
  .porte-fuori .porta__icona{width:24px;height:24px}
}
.porta{
  display:grid;gap:.15rem;text-decoration:none;background:var(--scheda);
  border:1px solid var(--linea);border-radius:var(--raggio);padding:.85rem .95rem;
  box-shadow:var(--ombra-1);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),border-color .2s ease,box-shadow .2s ease;
}
.porta:hover{transform:translateY(-3px);border-color:var(--rosso);box-shadow:var(--ombra-2)}
.porta__icona{width:26px;height:26px;color:var(--rosso);margin-bottom:.35rem}
.porta__nome{font-family:var(--display);font-weight:700;font-size:1.12rem;text-transform:uppercase;line-height:1}
.porta__dettaglio{font-size:.8rem;color:var(--grigio-chiaro);line-height:1.35}
@media (max-width:560px){
  .porte{grid-template-columns:1fr 1fr}
  .porta:last-child{grid-column:1/-1}
  .porta{padding:.7rem .8rem}
}

/* il palco: dove stanno i mezzi */
.palco{position:relative;z-index:1;height:clamp(300px,38vw,520px)}
@media (min-width:1000px){.palco{height:min(66svh,560px)}}
.palco__marchio{
  position:absolute;left:50%;top:4%;z-index:1;width:min(66%,520px);
  transform:translateX(-50%);opacity:.97;
}
.palco__linea{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible}
.palco__linea path{fill:none;stroke:var(--rosso);stroke-width:3;opacity:.7;stroke-linecap:round}
.palco__auto,.palco__moto{position:absolute;z-index:3;will-change:transform,opacity}
.palco__auto{left:-3%;bottom:6%;width:min(62%,760px)}
.palco__moto{right:0;bottom:4%;width:min(27%,330px);z-index:2}
/* l'ombra a terra: un'ellisse, non un drop-shadow — costa zero a ogni fotogramma */
.palco__auto::after,.palco__moto::after{
  content:"";position:absolute;left:8%;right:8%;bottom:-3%;height:12%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,var(--ombra-terra),transparent 70%);
}
.palco img{width:100%;height:auto}

@media (max-width:900px){
  .palco{height:clamp(270px,52vw,380px)}
  .palco__marchio{width:min(66%,420px);top:2%}
  .palco__auto{width:78%;left:-6%;bottom:10%}
  .palco__moto{width:38%;right:-2%;bottom:2%}
}
@media (max-width:560px){
  .apertura__parole{max-width:none}
  /* più aria: il marchio deve restare leggibile sopra i mezzi, e la cross
     non deve finire sotto la Porsche */
  .palco{height:clamp(260px,72vw,360px);margin-top:var(--s3)}
  .palco__marchio{width:70%;top:0}
  .palco__auto{width:84%;left:-9%;bottom:16%}
  .palco__moto{width:40%;right:-4%;bottom:2%}
}

/* la striscia dei fatti sotto l'apertura */
.fatti{
  position:relative;z-index:4;border-top:1px solid var(--linea);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.fatti div{padding:var(--s4) var(--s4) var(--s4) 0}
.fatti dt{
  font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1;
  text-transform:uppercase;
}
.fatti dd{margin:.3rem 0 0;font-size:.86rem;color:var(--grigio);line-height:1.4}
@media (max-width:640px){
  .fatti{grid-template-columns:1fr 1fr}
  .fatti div:last-child{grid-column:1/-1;border-top:1px solid var(--linea)}
  .fatti dt{font-size:1.25rem}
}

/* ══════════════════════════════════════════════════════════════════════
   🏁 LA FIRMA — LA FILA CHE SI SCOPRE
   Una riga per categoria. Si trascina col dito, col mouse e con le frecce:
   NON scorre da sola, altrimenti le schede sono impossibili da colpire.
   Il mezzo che passa al centro alza la sua scheda dati, e la fotografia si
   sposta dentro il riquadro come se il muso girasse verso chi guarda.
   ══════════════════════════════════════════════════════════════════════ */
.fila{margin-top:var(--s5)}
.fila__testa{display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4)}
.fila__testa h3{font-size:clamp(1.45rem,1.1rem + 1.3vw,2.1rem)}
.fila__quante{font-size:.86rem;color:var(--grigio-chiaro);font-variant-numeric:tabular-nums}
.fila__vai{margin-left:auto}
.fila__pista{
  display:flex;gap:var(--s4);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:0;
  padding-block:.35rem 1.1rem;
  scrollbar-width:thin;scrollbar-color:var(--linea-forte) transparent;
  cursor:grab;
}
.fila__pista::-webkit-scrollbar{height:6px}
.fila__pista::-webkit-scrollbar-thumb{background:var(--linea-forte);border-radius:99px}
.fila__pista::-webkit-scrollbar-track{background:transparent}
.fila__pista.trascina{cursor:grabbing;scroll-snap-type:none;user-select:none}
.fila__pista > *{scroll-snap-align:start;flex:0 0 clamp(230px,26vw,304px)}
@media (max-width:560px){.fila__pista > *{flex:0 0 78%}}

.fila__frecce{display:flex;gap:.4rem}
.freccia{
  width:38px;height:38px;border:1px solid var(--linea-forte);border-radius:var(--raggio);
  display:grid;place-items:center;color:var(--grigio);
  transition:color .16s ease,border-color .16s ease,transform .16s ease;
}
.freccia:hover{color:var(--inchiostro);border-color:var(--inchiostro)}
.freccia:active{transform:scale(.94)}
.freccia svg{width:16px;height:16px}
.freccia[disabled]{opacity:.3;cursor:default}
@media (max-width:760px){.fila__frecce{display:none}}

/* ══ la scheda di un veicolo ═══════════════════════════════════════════ */
.mezzo{
  display:grid;grid-template-rows:auto 1fr;text-decoration:none;background:var(--scheda);
  border:1px solid var(--linea);border-radius:var(--raggio);overflow:hidden;
  box-shadow:var(--ombra-1);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease,border-color .22s ease;
  will-change:transform;
}
.mezzo:hover{transform:translateY(-4px);border-color:var(--linea-forte);box-shadow:var(--ombra-2)}
.mezzo__foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--vuoto)}
.mezzo__foto img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06) translate3d(var(--giro,0px),0,0);
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.mezzo:hover .mezzo__foto img{transform:scale(1.1) translate3d(var(--giro,0px),0,0)}
.mezzo__vuota{
  display:grid;place-items:center;height:100%;gap:.4rem;color:var(--grigio-chiaro);
  font-family:var(--display);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;padding:var(--s4);
}
.mezzo__vuota svg{width:34px;height:34px;opacity:.4}
.mezzo__stato{
  position:absolute;left:0;top:0;z-index:2;
  font-family:var(--display);font-weight:600;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;background:var(--inchiostro);padding:.28rem .55rem;
}
.mezzo__stato--nuovo{background:#1F5B8F}
.mezzo__stato--km0{background:var(--verde)}
.mezzo__corpo{padding:.85rem .95rem 1rem;display:grid;align-content:start;gap:.2rem}
.mezzo__marca{
  font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rosso-testo);
}
.mezzo__nome{
  font-family:var(--display);font-weight:700;font-size:1.22rem;line-height:1.05;
  text-transform:uppercase;
}
.mezzo__allest{font-size:.82rem;color:var(--grigio-chiaro);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* la scheda dati: sta sotto, e la firma la fa salire quando il mezzo passa al centro */
.mezzo__dati{
  margin-top:.55rem;padding-top:.55rem;border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:.15rem .7rem;align-items:baseline;
  font-size:.82rem;color:var(--grigio);font-variant-numeric:tabular-nums;
}
.mezzo__prezzo{
  margin-left:auto;font-family:var(--display);font-weight:700;font-size:1.15rem;
  color:var(--inchiostro);letter-spacing:.01em;
}
.mezzo__prezzo{white-space:nowrap}
.mezzo__iva{font-size:.7rem;color:var(--grigio-chiaro);letter-spacing:.06em;
  text-transform:uppercase;font-family:var(--testo);font-weight:500}

/* lo stato «scoperto»: lo mette il JS al mezzo che passa in mezzo allo schermo */
.mezzo__dati{transform:translate3d(0,4px,0);opacity:.72;
  transition:transform .38s cubic-bezier(.2,.8,.3,1),opacity .38s ease}
.mezzo.scoperto .mezzo__dati{transform:none;opacity:1}
.mezzo.scoperto{border-color:var(--linea-forte);box-shadow:var(--ombra-2)}
/* il prezzo si accende quando il mezzo passa davanti: scorrere la fila
   vuol dire leggere la fila */
.mezzo__prezzo{transition:color .3s ease}
.mezzo.scoperto .mezzo__prezzo{color:var(--rosso-testo)}

/* ══ la griglia delle pagine categoria ════════════════════════════════ */
.griglia{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
@media (max-width:640px){.griglia{grid-template-columns:1fr 1fr;gap:var(--s3)}}
@media (max-width:400px){.griglia .mezzo__nome{font-size:1.05rem}}

.filtri{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;
  padding-block:var(--s4);border-block:1px solid var(--linea);margin-bottom:var(--s5);
}
.filtro{
  font-family:var(--display);font-weight:600;font-size:.85rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grigio);
  border:1px solid var(--linea);border-radius:99px;padding:.42rem .9rem;
  transition:color .16s ease,border-color .16s ease,background-color .16s ease;
}
.filtro:hover{color:var(--inchiostro);border-color:var(--linea-forte)}
.filtro[aria-pressed="true"]{background:var(--inchiostro);border-color:var(--inchiostro);color:var(--carta)}
.filtri__gruppo{display:flex;flex-wrap:wrap;gap:var(--s2)}
.filtri__eti{
  font-family:var(--display);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grigio-chiaro);margin-right:.2rem;
}
.filtri__quanti{margin-left:auto;font-size:.86rem;color:var(--grigio-chiaro);font-variant-numeric:tabular-nums}
@media (max-width:760px){.filtri__quanti{margin-left:0;width:100%}}

.nulla{
  border:1px dashed var(--linea-forte);border-radius:var(--raggio);
  padding:clamp(2rem,6vw,3.5rem);text-align:center;color:var(--grigio);
}
.nulla h3{margin-bottom:var(--s3)}

/* la colonna delle marche */
.con-marche{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:210px 1fr;align-items:start}
@media (max-width:900px){.con-marche{grid-template-columns:1fr}}
.marche{position:sticky;top:calc(var(--testata) + 1rem)}
@media (max-width:900px){.marche{position:static}}
.marche h3{font-size:1.05rem;margin-bottom:var(--s3)}
.marche__elenco{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--linea)}
.marche__elenco li{background:var(--carta)}
.marche__elenco button{
  width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:.5rem .1rem;font-size:.95rem;color:var(--grigio);text-align:left;
  transition:color .14s ease;
}
.marche__elenco button:hover{color:var(--inchiostro)}
.marche__elenco button[aria-pressed="true"]{color:var(--rosso-testo);font-weight:600}
.marche__quanti{font-size:.78rem;color:var(--grigio-chiaro);font-variant-numeric:tabular-nums}
.marche__zero{opacity:.55}
@media (max-width:900px){
  .marche__elenco{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* ══ i blocchi di prova: garanzia · chilometri · preparazione ══════════ */
.prove{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.prova{
  background:var(--scheda);border:1px solid var(--linea);border-radius:var(--raggio);
  padding:clamp(1.25rem,2.4vw,1.75rem);box-shadow:var(--ombra-1);position:relative;overflow:hidden;
}
.prova::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rosso);
  transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.prova.entrata::before,.prova:hover::before{transform:scaleY(1)}
.prova__icona{width:30px;height:30px;color:var(--rosso);margin-bottom:var(--s3)}
.prova h3{margin-bottom:var(--s3);font-size:1.3rem}
.prova p{color:var(--grigio);font-size:.97em}
.prova p + p{margin-top:var(--s3)}

/* ══ i passaggi: come si compra ════════════════════════════════════════ */
.passi{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));counter-reset:passo}
.passo{
  border-top:2px solid var(--inchiostro);padding-top:var(--s4);counter-increment:passo;
}
.passo::before{
  content:counter(passo,decimal-leading-zero);
  display:block;font-family:var(--display);font-weight:700;font-size:2.1rem;line-height:1;
  color:var(--rosso);margin-bottom:var(--s2);
}
.passo h3{font-size:1.15rem;margin-bottom:var(--s2)}
.passo p{color:var(--grigio);font-size:.95em}

/* ══ domande frequenti ════════════════════════════════════════════════ */
.faq{display:grid;gap:0;border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.05rem 2.6rem 1.05rem 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:1.14rem;text-transform:uppercase;
  line-height:1.15;transition:color .16s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--rosso-testo)}
.faq summary::after{
  content:"";position:absolute;right:.45rem;top:1.45rem;width:13px;height:13px;
  border-right:2px solid var(--rosso);border-bottom:2px solid var(--rosso);
  transform:rotate(45deg);transition:transform .25s cubic-bezier(.2,.8,.3,1);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.7rem}
.faq p{padding:0 0 1.15rem;color:var(--grigio);max-width:68ch}

/* ══ il cercatore — la cosa da fare ═══════════════════════════════════ */
.cercatore{
  background:var(--scheda);border:1px solid var(--linea);border-radius:var(--raggio);
  padding:clamp(1.35rem,3vw,2.25rem);box-shadow:var(--ombra-1);
}
.cerca-passo{margin-bottom:var(--s5)}
.cerca-passo:last-of-type{margin-bottom:var(--s4)}
.cerca-passo__eti{
  font-family:var(--display);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grigio-chiaro);margin-bottom:var(--s3);
}
.cerca-scelte{display:flex;flex-wrap:wrap;gap:var(--s2)}
.campo{
  width:100%;font:inherit;color:var(--inchiostro);background:var(--carta);
  border:1px solid var(--linea-forte);border-radius:var(--raggio);padding:.8rem .95rem;
}
.campo::placeholder{color:var(--grigio-chiaro)}

/* ══ mappa e contatti ═════════════════════════════════════════════════ */
.contatti{display:grid;gap:clamp(1.5rem,3vw,2.75rem);grid-template-columns:1fr 1.15fr;align-items:start}
@media (max-width:860px){.contatti{grid-template-columns:1fr}}
.recapiti{display:grid;gap:var(--s4);margin-top:var(--s5)}
.recapito{display:flex;gap:var(--s3);align-items:flex-start}
.recapito svg{width:19px;height:19px;color:var(--rosso);flex:none;margin-top:.28rem}
.recapito a{text-decoration:none;border-bottom:1px solid var(--linea-forte)}
.recapito a:hover{border-color:var(--rosso)}
.recapito strong{display:block;font-family:var(--display);font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grigio-chiaro);font-weight:600}

/* 🔴 La mappa si carica DA SOLA, sempre, e senza cookie di terze parti:
   tessere OpenStreetMap, nessun iframe di Google. Il pulsante porta a Google. */
.mappa{
  position:relative;border:1px solid var(--linea);border-radius:var(--raggio);
  overflow:hidden;background:var(--vuoto);aspect-ratio:4/3;box-shadow:var(--ombra-1);
}
@media (max-width:860px){.mappa{aspect-ratio:16/10}}
.mappa img{width:100%;height:100%;object-fit:cover}
.mappa__spillo{
  position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-24px 0 0 -10px;
  border-radius:50% 50% 50% 0;background:var(--rosso);transform:rotate(-45deg);
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}
.mappa__spillo::after{content:"";position:absolute;inset:5px;background:#fff;border-radius:50%}
.mappa__vai{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s3);padding:.7rem .9rem;
  background:var(--velo);border-top:1px solid var(--linea);
  font-size:.88rem;text-decoration:none;
}
.mappa__vai span{font-family:var(--display);font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rosso-testo)}

/* ══ nastro delle marche — scorre sempre, non si ferma mai ════════════ */
.nastro{overflow:hidden;border-block:1px solid var(--linea);padding-block:var(--s4);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.nastro__pista{display:flex;width:max-content;animation:scorri 34s linear infinite}
.nastro__gruppo{display:flex;align-items:center;gap:clamp(1.75rem,4vw,3.5rem);padding-right:clamp(1.75rem,4vw,3.5rem)}
.nastro__gruppo span{
  font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,.9rem + .6vw,1.5rem);
  letter-spacing:.13em;text-transform:uppercase;color:var(--grigio-chiaro);white-space:nowrap;
}
@keyframes scorri{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ══ piè di pagina ════════════════════════════════════════════════════ */
.piede{background:var(--scheda-alt);border-top:1px solid var(--linea);padding-block:var(--s7) var(--s5);margin-top:var(--s7)}
.piede__griglia{display:grid;gap:var(--s6);grid-template-columns:1.4fr 1fr 1fr;align-items:start}
@media (max-width:760px){.piede__griglia{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .piede__marca{grid-column:1/-1}}
.piede__marca img{height:36px;width:auto;margin-bottom:var(--s3)}
.piede__marca p{color:var(--grigio);font-size:.92rem;max-width:34ch}
.piede h4{font-size:.82rem;letter-spacing:.2em;color:var(--grigio-chiaro);margin-bottom:var(--s3)}
.piede ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.piede a{text-decoration:none;color:var(--grigio);font-size:.94rem;transition:color .14s ease}
.piede a:hover{color:var(--inchiostro)}
.piede__barra{
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;justify-content:space-between;
  font-size:.82rem;color:var(--grigio-chiaro);
}
.piede__barra a{font-size:inherit}
.credito a{border-bottom:1px solid var(--linea-forte)}

/* ══ banner cookie — una riga sola ════════════════════════════════════ */
.cookie{
  position:fixed;inset:auto 0 0 0;z-index:60;display:flex;gap:var(--s4);align-items:center;
  justify-content:center;padding:.6rem 1rem;font-size:.82rem;line-height:1.35;
  background:var(--velo);border-top:1px solid var(--linea);color:var(--grigio);
  transform:translate3d(0,100%,0);transition:transform .34s cubic-bezier(.2,.8,.3,1);
}
.cookie.mostra{transform:none}
.cookie p{margin:0}
.cookie a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cookie button{font-size:1.2rem;line-height:1;opacity:.6;padding:0 .3rem}
.cookie button:hover{opacity:1}
@media (max-width:480px){.cookie{font-size:.75rem;padding:.5rem .7rem;gap:var(--s3)}}

/* ══ la scheda del singolo veicolo ════════════════════════════════════ */
.veicolo{display:grid;gap:clamp(1.5rem,3vw,2.75rem);grid-template-columns:1.35fr 1fr;align-items:start}
@media (max-width:900px){.veicolo{grid-template-columns:1fr}}
.galleria{display:grid;gap:var(--s3)}
.galleria__grande{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--vuoto);
  border:1px solid var(--linea);border-radius:var(--raggio);
}
.galleria__grande img{width:100%;height:100%;object-fit:cover}
.galleria__mini{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:.3rem}
.galleria__mini button{
  flex:0 0 84px;aspect-ratio:4/3;border:1px solid var(--linea);border-radius:var(--raggio);
  overflow:hidden;background:var(--vuoto);transition:border-color .16s ease,transform .16s ease;
}
.galleria__mini button[aria-current="true"]{border-color:var(--rosso);transform:translateY(-2px)}
.galleria__mini img{width:100%;height:100%;object-fit:cover}
.scheda-dati{display:grid;gap:var(--s4)}
.scheda-dati h1{font-size:clamp(1.9rem,1.4rem + 2vw,3rem)}
.prezzo{
  font-family:var(--display);font-weight:700;font-size:clamp(2rem,1.6rem + 1.6vw,2.8rem);
  line-height:1;
}
.tabella{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--raggio);overflow:hidden}
.tabella div{background:var(--scheda);padding:.7rem .85rem}
.tabella div:last-child:nth-child(odd){grid-column:1/-1}
.tabella dt{font-family:var(--display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grigio-chiaro)}
.tabella dd{margin:.15rem 0 0;font-weight:600;font-variant-numeric:tabular-nums}
.fatto-elenco{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.fatto-elenco li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;color:var(--grigio)}
.fatto-elenco svg{width:17px;height:17px;color:var(--verde);flex:none;margin-top:.22rem}

/* ══ reveal: continuo dove il browser lo sa fare, a scatto dove no ════ */
.entra{opacity:1}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .entra{
      animation:emergi linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 26%;
    }
  }
}
@keyframes emergi{
  from{opacity:0;transform:translate3d(0,22px,0)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .nastro__pista{animation:none}
}

/* la testa delle pagine categoria non lascia un buco prima dei filtri */
.sezione--stretta > .contenuto > .sezione__testa:only-child{margin-bottom:0}

/* ══════════════════════════════════════════════════════════════════════
   L'APERTURA IN VIDEO — «LA NOTTE»
   Il sito resta chiaro: l'apertura e' l'unica banda scura, ed e' voluta.
   Coincide con quello che il cliente aveva chiesto: «una Porsche che di
   notte sfreccia lasciando una scia» [call2 12:38].

   Il filmato e' VERTICALE (720x1280). Su un computer largo, allargarlo a
   tutta pagina vorrebbe dire ingrandirlo due volte: verrebbe molle.
   Quindi: il filmato NITIDO resta verticale sulla destra, alla sua misura,
   e dietro si mette lo STESSO filmato sfocato che riempie la larghezza.
   E' il trattamento che si usa in televisione per i verticali: sembra
   voluto, e la parte nitida resta nitida.
   Da telefono invece il formato combacia: va a tutto schermo, senza sfondo.

   🔴 Regole THK sui video, rispettate:
   · parte da solo, MUTO, in ciclo continuo, `playsinline`
   · NESSUN comando: niente `controls`, niente pausa, niente barra
   · non ha nemmeno la traccia audio, quindi non serve il pulsante audio
   · c'e' sempre il poster, ed e' lui che si vede con `prefers-reduced-motion`
   ══════════════════════════════════════════════════════════════════════ */
.notte{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(94svh,940px);
  display:grid;align-items:center;
  background:#0A0B0D;color:#F2F2F0;
}

/* Il filmato prende TUTTA l'apertura. Niente riquadri, niente sfondi
   sfocati: era brutto e sembrava un errore. Da computer si serve un taglio
   largo già ingrandito (1280×836), da telefono il verticale intero — così
   in nessuno dei due casi c'è qualcosa che sembra tagliato. */
.notte__film{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;object-fit:cover;object-position:center 50%;
  background:#0A0B0D;
}

/* il velo: senza, il testo bianco non si legge sui fotogrammi chiari */
.notte::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,9,11,.96) 0%, rgba(8,9,11,.90) 34%, rgba(8,9,11,.52) 60%, rgba(8,9,11,.30) 100%),
    linear-gradient(to top, rgba(8,9,11,.6), transparent 46%);
}

/* la linea di partenza, in fondo alla banda */
.notte::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;
  background:linear-gradient(90deg,transparent,var(--rosso) 16%,var(--rosso) 84%,transparent);
}

.notte__dentro{
  position:relative;z-index:3;
  width:min(100% - 2.5rem,var(--max));margin-inline:auto;
  padding-block:clamp(2.25rem,5vw,4rem);
  max-width:min(100% - 2.5rem,var(--max));
}
@media (max-width:520px){.notte__dentro{width:min(100% - 1.75rem,var(--max))}}
@media (min-width:1000px){.notte__dentro > *{max-width:52%}}

.notte__marchio{
  width:min(78%,420px);margin-bottom:clamp(1rem,2.5vw,1.75rem);
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));
}
@media (min-width:1000px){.notte__marchio{width:min(48%,420px)}}
.notte h1{
  font-size:clamp(1.85rem,1.2rem + 2.3vw,3.1rem);
  color:#FFFFFF;margin-bottom:var(--s4);
  text-shadow:0 2px 26px rgba(0,0,0,.6);
}
.notte h1 em{font-style:normal;color:#FF5A61}
.notte__guida{
  color:#D3D6DA;font-size:1.04em;
  text-shadow:0 1px 16px rgba(0,0,0,.7);
}
.notte .occhiello{color:#FF7A80}
.notte .occhiello::before{background:var(--rosso)}



/* 🔴 chi ha chiesto meno movimento vede il fotogramma, non il filmato */
@media (prefers-reduced-motion:reduce){
  .notte__film,.notte__sfondo{display:none}
  .notte{
    background-image:url("../img/apertura-poster.jpg?v=11");
    background-size:cover;background-position:center 40%;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   L'APERTURA DA TELEFONO
   🔴 Sta in fondo apposta: sono correzioni, e devono vincere sulle regole
   di base. Messe più in alto perdevano nella cascata e non si applicavano.

   Il formato del filmato (9:16) combacia con lo schermo: va a tutto
   schermo, senza lo sfondo sfocato. Il testo scende in basso, così sopra
   resta una finestra aperta sul filmato invece di un fondo nero.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:999px){
  /* Da telefono il formato del filmato (9:16) combacia con lo schermo:
     va a TUTTO SCHERMO, senza nessun ritaglio — così non c'è niente che
     possa sembrare tagliato. Il testo sta in basso, su una sfumatura piena. */
  .notte{min-height:100svh;align-items:end}
  .notte__film{object-position:center 46%}
  .notte::after{
    background:linear-gradient(to top,
      rgba(8,9,11,.97) 0%, rgba(8,9,11,.94) 30%, rgba(8,9,11,.74) 48%,
      rgba(8,9,11,.34) 70%, rgba(8,9,11,.22) 100%);
  }
  .notte__dentro{padding-block:clamp(1.5rem,4vw,2rem) clamp(1.5rem,4vw,2.25rem)}
  .notte__marchio{width:min(62%,280px)}
  .notte h1{font-size:clamp(1.6rem,1.1rem + 1.9vw,2.3rem)}
  .notte__guida{font-size:.98em}
}