@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 ───────────────────────── */
  /* 04/09 — Fabio: «è proprio buio, cupo, spento, i colori sono sbiaditi».
     Fondo più chiaro e pulito, rosso più acceso, grigi con più contrasto. */
  --carta:#FBFAF8;          /* era #F4F3F0 — alzato: il fondo deve dare luce */
  --scheda:#FFFFFF;
  --scheda-alt:#FDFCFA;
  --linea:#D6D2C8;          /* 08/09 — più marcata: i riquadri si devono vedere */
  --linea-forte:#9E998C;    /* 08/09 — era 1,60:1, invisibile. Ora 2,72:1 */
  --inchiostro:#101215;
  /* 08/09 — 🔴 IL GRIGIO NON ESISTE PIÙ. Fabio: «anche le scritte che sono grige
     mettile nere a sto punto, ogni scritta si deve vedere bene». Il testo secondario
     era grigio per gerarchia tipografica: ma la gerarchia si fa con la DIMENSIONE e
     il PESO, non schiarendo il testo a chi non ci vede. Ora è nero come il resto. */
  --grigio:#101215;         /* era #414852: 8,85:1. Ora 17,98:1 — l'inchiostro pieno */
  /* ⚠️ misurato, non stimato: #8B929B dava 2,83:1 e #6E757E 4,46:1 — tutti e due
     SOTTO il minimo di 4,5:1 su questo fondo. Questo dà 4,79:1. */
  --grigio-chiaro:#1B1F26;  /* era #585F69: 6,18:1. Ora 15,84:1 — nero, appena schiarito */
  /* 07/09 — il rosso del marchio, contato sui pixel ESATTI del file del cliente:
     #E30713 compare 74.535 volte in NEW LOGO SEVEN SMALL.png ed è il rosso vero.
     Storia: #D51A22 (preso dalla fotografia di uno schermo) → #E4141D (una mia
     stima) → #DE0612 (campionato ma con raggruppamento troppo grossolano) → questo.
     Bianco su #E30713 dà 4,88:1, quindi i pulsanti pieni restano leggibili. */
  --rosso:#E30713;
  /* 08/09 — il rosso del marchio (#E30713) col testo bianco sopra fa 4,88:1: era
     la cosa meno leggibile della pagina, e capitava proprio sul pulsante principale.
     Il marchio NON si tocca: #E30713 resta per trattini, sottolineature e messa a
     fuoco, dove non porta testo. Per le superfici PIENE c'è questo, 7,50:1. */
  --rosso-fondo:#AD040C;
  --rosso-testo:#A80410;    /* la stessa tinta, leggibile in corpo piccolo: 7,48:1 */
  --rosso-velo:rgba(227,7,19,.10);
  --verde:#136436;          /* 08/09 — era #177A42: col bianco 5,39:1. Ora 7,23:1 */
  --sole:#F5A31B;           /* il giallo del tramonto dell'apertura */
  --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:84px;           /* alzata da 66px: il logo è passato a 52px */
  --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:#3A3F47;          /* 08/09 — più marcata anche qui */
  --linea-forte:#5A616B;    /* 08/09 — 3,11:1: il bordo si vede */
  --inchiostro:#F2F2F0;
  --grigio:#F2F2F0;         /* 08/09 — nel tema scuro il «nero» è il bianco pieno */
  --grigio-chiaro:#DCDFE3;  /* 08/09 — era #98A0AA: 7,35:1. Ora 14,54:1 */
  /* sul fondo scuro il rosso del marchio (#DE0612) sparisce: si schiarisce
     quel tanto che basta a leggerlo, restando la stessa tinta */
  --rosso:#F2333E;
  --rosso-testo:#FF8189;
  --rosso-velo:rgba(242,51,62,.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}
/* 07/09 — IL CLIENTE VEDE POCO. Questa riga è la leva più grossa del foglio:
   tutti i «rem» partono da qui, quindi il 115% ingrandisce ogni testo, ogni
   spazio e ogni riquadro insieme, in proporzione — non solo le lettere.
   In PERCENTUALE e non in px di proposito: i px scavalcherebbero la misura
   che lui ha impostato nel browser; la percentuale ci si moltiplica sopra. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:120%}
body{
  margin:0;
  background:var(--carta);
  color:var(--inchiostro);
  font-family:var(--testo);
  font-size:clamp(1rem,.97rem + .16vw,1.075rem);
  /* 07/09 — il 500 al posto del 400: l'asta della lettera si ingrossa e il
     testo «stacca» dal fondo. Su chi vede poco pesa quanto la dimensione.
     Il grassetto resta distinguibile perché sta a 700. */
  font-weight:500;
  line-height:1.65;
  -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;
}
/* 04/09 — Fabio: «"Autocarri a Roma" è grandissima e il mio logo è
   piccolissimo. Riduciamo il titolo e facciamo il logo più grande».
   Era clamp(2.5rem, 1.5rem + 4.2vw, 4.9rem) — cioè fino a 78px contro
   un logo di 34. Ora il titolo arriva a 54px e il logo sta a 52. */
h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.35rem)}
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-fondo);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:700;font-size:.96rem;letter-spacing:.2em;
  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:1rem;color:var(--grigio-chiaro)}

/* ══ pulsanti ══════════════════════════════════════════════════════════ */
.bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;
  padding:1.02rem 1.8rem;border:2px solid var(--rosso-fondo);background:var(--rosso-fondo);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)}
/* 🔴 07/09 — nel tema scuro il verde si schiarisce (#177A42 → #4FCB84) ma il
   testo restava bianco: 2,06:1, cioè illeggibile. E il pulsante verde è quello
   di WhatsApp, la chiamata all'azione principale del sito. Su un verde chiaro
   il testo va scuro: così fa 9,12:1. */
:root[data-tema="scuro"] .bottone--verde{color:#0C0D0F}
:root[data-tema="scuro"] .bottone--verde svg{stroke:#0C0D0F;fill:#0C0D0F}
.bottone--piccolo{padding:.74rem 1.2rem;font-size:.97rem}

/* ══ TESTATA ═══════════════════════════════════════════════════════════ */
/* 24/09 — fondo PIENO, non più il velo al 92%: nelle foto di Fabio sulla pagina
   Moto il testo che scorreva sotto la testata si leggeva dietro il logo
   («…Naked, super turismo e motocross»), in grigio sopra il nero. */
.testata{
  position:sticky;top:0;z-index:50;background:var(--carta);
  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);
}
/* 07/09 — la testata è appiccicata in alto: senza questo, cliccando «Contatti»
   la sezione arrivava NASCOSTA sotto la testata. Da telefono la testata è su due
   righe e quindi più alta, perciò il margine è più generoso. */
[id]{scroll-margin-top:calc(var(--testata) + 1rem)}
@media (max-width:520px){ [id]{scroll-margin-top:8rem} }
.testata__marchio{flex:none;display:block;line-height:0}
/* 04/09 — Fabio: «il loghetto mio è piccolo piccolo, ingrandiamolo».
   Verificato da lui su auto, moto e autocarri: era 34px ovunque. */
.testata__marchio img{height:52px;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:700;font-size:1.02rem;letter-spacing:.14em;
  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:.95rem;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:42px}
  .menu{gap:.7rem}
  .menu a{font-size:.94rem;letter-spacing:.1em}
  .tema span{display:none}
  .tema{padding:.4rem .5rem}
}
/* 04/09 — con «Home» e «Contatti» il menu è passato da 3 voci a 5, e su schermo
   stretto usciva di lato.
   🔴 07/09 — la prima correzione rimpiccioliva il LOGO a 34px sotto i 400px: cioè
   riportava esattamente la dimensione che Fabio aveva contestato. Sbagliata.
   Ora la testata va su DUE RIGHE: il marchio sopra, il menu sotto. Il logo resta
   grande a qualsiasi larghezza e il menu ha tutta la riga per sé — così non può
   più uscire dallo schermo, nemmeno a 320px. */
@media (max-width:520px){
  .testata__dentro{
    height:auto;flex-wrap:wrap;justify-content:center;
    padding-block:.6rem;gap:.45rem;
    position:relative;               /* aggancio per il pulsante del tema, qui sotto */
  }
  /* 08/09 — il pulsante del tema sta DENTRO il menu: col testo ingrandito il menu
     va a capo e lui finiva su una TERZA riga. La testata, che è appiccicata in
     alto, arrivava a 197px su 844 — un quarto dello schermo del telefono, sempre
     lì mentre si scorre. Tolto dal flusso e messo in alto a destra accanto al
     marchio: la testata torna a due righe e il menu si tiene la sua. */
  .menu .tema{position:absolute;right:0;top:.5rem;margin:0}
  /* 08/09 — l'occhiello ingrandito andava a capo lasciando «ROMA» da solo sulla
     riga sotto. Non si accorcia il testo (cambierebbe col telefono): si stringe
     la spaziatura fra le lettere e il trattino, che a .2em mangiavano mezza riga. */
  .occhiello{letter-spacing:.1em;gap:.5rem}
  .occhiello::before{width:1.4rem}
  .testata__marchio{width:100%;text-align:center}
  .testata__marchio img{height:44px;margin-inline:auto}
  .menu{margin-left:0;width:100%;justify-content:center;gap:.6rem;flex-wrap:wrap}
  .menu a{font-size:.90rem;letter-spacing:.06em}
}
@media (max-width:360px){
  .menu{gap:.42rem}
  .menu a{font-size:.86rem;letter-spacing:.02em}
}

/* ══════════════════════════════════════════════════════════════════════
   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:.95rem;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:.98rem;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:.98rem;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:.95rem;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:.90rem;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)}
/* 25/09 — «Com'è» scritto a mano nel pannello: fondo scuro, testo bianco */
.mezzo__stato--altro{background:#2B2F36;max-width:calc(100% - 1.2rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mezzo__corpo{padding:.85rem .95rem 1rem;display:grid;align-content:start;gap:.2rem}
.mezzo__marca{
  font-family:var(--display);font-weight:600;font-size:.94rem;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:.96rem;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:.96rem;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:.90rem;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 */
/* 08/09 — 🔴 QUI I DATI DEL MEZZO STAVANO AL 72% finché la scheda non arrivava a
   metà schermo. Due guai per chi non ci vede: il testo è sbiadito proprio mentre
   lo si sta cercando, e se il JS non parte resta sbiadito per sempre. L'effetto
   di «scoperta» resta, ma lo fa il solo movimento: il testo è sempre pieno. */
.mezzo__dati{transform:translate3d(0,4px,0);
  transition:transform .38s cubic-bezier(.2,.8,.3,1)}
.mezzo.scoperto .mezzo__dati{transform:none}
.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:.98rem;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:.94rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grigio-chiaro);margin-right:.2rem;
}
.filtri__quanti{margin-left:auto;font-size:.98rem;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:1.06rem;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:.94rem;color:var(--grigio-chiaro);font-variant-numeric:tabular-nums}
/* 08/09 — era .55: la marca esaurita era quasi illeggibile. Il «zero pezzi»
   lo dice già il numero accanto, non serve smorzare anche il nome. */
.marche__zero{opacity:.82}
@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:.94rem;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:.95rem;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:1rem;text-decoration:none;
}
.mappa__vai span{font-family:var(--display);font-size:.95rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rosso-testo)}

/* ══ LA FASCIA DELLE MARCHE ═══════════════════════════════════════════
   07/09 — Fabio: «subito dopo la hero voglio i loghi delle macchine che
   scorrono … a loghi come ha mandato il cliente, non a scritte». Prima
   erano i NOMI scritti, in fondo alla pagina; ora sono gli undici marchi
   veri, appena finita l'apertura.

   🔴 IL PANNELLO È BIANCO SEMPRE, anche col tema scuro, e non è una svista:
   quattro di questi loghi (Kawasaki, Suzuki, Jeep, Toyota) sono neri pieni
   e su fondo scuro sparirebbero. Il bianco è anche il fondo su cui i
   costruttori impongono il proprio marchio.

   Le proporzioni sono lontanissime fra loro: BMW è un tondo (1,00), Porsche
   è un lettering lungo (9,56). Un'altezza fissa uguale per tutti farebbe
   Porsche dieci volte più larga di BMW. Perciò ogni logo ha un'altezza E
   una larghezza massima: i tondi riempiono l'altezza, i lettering vengono
   fermati dalla larghezza e si abbassano da soli. Il peso ottico torna.
   🎞️ Non si ferma mai, nemmeno col mouse sopra: è la regola dei nastri. */
.marchi{background:#FFFFFF;border-block:1px solid var(--linea);
  padding-block:clamp(1.15rem,.85rem + 1.1vw,1.9rem)}
/* la sfumatura ai bordi sta QUI e non sul pannello: se stesse sul pannello
   scolorirebbe il bianco sul fondo pagina, invece dei soli loghi. */
.marchi__finestra{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marchi__pista{display:flex;width:max-content;animation:scorri 46s linear infinite}
.marchi__gruppo{display:flex;align-items:center;
  gap:clamp(2.1rem,1.2rem + 3.4vw,4.2rem);
  padding-right:clamp(2.1rem,1.2rem + 3.4vw,4.2rem)}
.marchi__gruppo img{
  flex:none;width:auto;object-fit:contain;
  height:clamp(46px,32px + 2.6vw,78px);
  max-width:clamp(130px,92px + 7.4vw,228px);
}
@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}
/* 22/09 — a 320 px l'indirizzo email non andava a capo e allargava la
   seconda colonna: la pagina scorreva di lato. Ora può spezzarsi. */
@media (max-width:760px){.piede a{overflow-wrap:anywhere}}
@media (max-width:760px){.piede__griglia{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .piede__marca{grid-column:1/-1}}
/* 04/09 — Fabio: «il loghetto mio piccolo piccolo, ingrandiamolo, grande
   quanto tutta la scritta Seven auto moto». Era 36px. */
.piede__marca img{height:84px;width:auto;margin-bottom:var(--s4)}
@media (max-width:600px){.piede__marca img{height:64px}}
.piede__marca p{color:var(--grigio);font-size:1.02rem;max-width:34ch}
.piede h4{font-size:.96rem;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:1.04rem;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:.96rem;color:var(--grigio-chiaro);
}
.piede__barra a{font-size:inherit}
/* 08/09 — Fabio: «nel footer la frase online per tutti falla piu piccola».
   È l'unica cosa del sito che RIMPICCIOLISCE: è la nostra firma, non un testo
   che il cliente deve leggere, quindi qui l'eccezione alla regola del «tutto
   più grande» è voluta. */
.credito{font-size:.78rem}
.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:.96rem;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;padding:0 .3rem}
.cookie button:hover{opacity:1}
@media (max-width:480px){.cookie{font-size:.92rem;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:.92rem;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:1.06rem;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;
  }
  .marchi__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 — TUTTO SCHERMO, E SI TAGLIA SOLO IL CIELO
   ⚠️ La classe si chiama ancora `.notte` per ragioni storiche.

   21/09 — Domenico: «il cliente, dal suo computer, vede il video TAGLIATO:
   la moto da cross col manubrio tagliato e la parte sopra tagliata… il video
   si deve vedere sempre bene, con qualsiasi formato, computer o telefono».
   Poi, sulla prima correzione (video intero con la scena sfocata ai lati):
   «non prende tutto lo schermo». Scelta sua: TUTTO SCHERMO, TAGLIANDO SOLO
   IL CIELO.

   Come funziona:
   · telefono in verticale → route66-telefono.mp4 (9:16), intero, a tutta
     larghezza: la forma combacia, non si taglia niente.
   · tablet in verticale → route66-pc.mp4 (16:9), intero, a tutta larghezza.
   · finestra orizzontale (computer, tablet girato) → route66-pc.mp4 a TUTTA
     LARGHEZZA e alto quanto la finestra meno la testata. Il video è appoggiato
     in BASSO (`object-position: 50% 100%`): se non ci sta, si perde il cielo
     in alto — mai la strada, mai i mezzi, mai la scritta Route 66.
     🔴 Il taglio non supera il 30% del fotogramma (altezza minima 39,375cqw
     = 70% di 56,25cqw): i mezzi cominciano al 40% dall'alto (manubrio della
     cross a 5 s), quindi restano sempre interi. Su una finestra ancora più
     larga l'apertura scende di qualche pixel sotto il bordo, invece di tagliare.

   Il testo:
   · riquadro largo (≥ 1100 px) → sul video: il logo piccolo in alto a
     sinistra (nel cielo che resta), titolo e indirizzo in basso a sinistra
     sull'asfalto, dove i mezzi non passano. Solo un'ombra morbida dietro le
     parole: niente velo scuro («buio», 04/09).
   · riquadro stretto (telefono, tablet) → il logo nel cielo, fermo, come
     aveva chiesto Fabio [04/09 05:06]; titolo e indirizzo SOTTO il video,
     su fondo chiaro.
   Le misure sul video sono in `cqw` (percentuale della larghezza del
   riquadro): il testo occupa sempre lo stesso pezzo di scena.

   🔴 Regole THK sui video, rispettate:
   · parte da solo, MUTO, in ciclo continuo, `playsinline`
   · NESSUN comando: niente `controls`, niente pausa, niente barra
   · il video ha l'audio dei motori: l'unico comando è il pulsante
     «Clicca per attivare l'audio»
   · finché il video non c'è si vede la locandina (sfondo del <video>)
   ══════════════════════════════════════════════════════════════════════ */
/* La locandina sta in una variabile: il pannello la può sostituire senza
   toccare il CSS (richiesta di Fabio [04/09 13:24]). */
:root{ --apertura-foto:url("../img/route66-pc.jpg?v=36"); }
@media (max-width:699px) and (orientation:portrait){
  :root{ --apertura-foto:url("../img/route66-telefono.jpg?v=36"); }
}
/* ⚠️ L'APERTURA NON CAMBIA COL TEMA dove il testo sta SUL video: lì i colori
   sono fissi, di proposito. Il testo SOTTO il video invece segue il tema. */
.notte{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--carta);
  /* 22/09 — l'altezza della fascia «IMPORTAZIONE MOTO DA CROSS» in fondo
     all'apertura. Sta in una variabile perché serve in DUE posti: alla fascia
     stessa e al conto dell'altezza del video qui sotto, che la deve togliere
     per far stare tutta l'apertura nella prima schermata. In px e non in rem:
     è una misura di impaginazione, non deve crescere col carattere.
     ~84 px su 1920, ~70 px su 1366-1440, 50 px da telefono. */
  --nastro:clamp(50px, 34px + 2.6vw, 86px);
  /* 22/09 — il rosso di «Nuovo, usato e chilometri zero.» quando sta SUL
     video. Il rosso del marchio (#E30713) sull'asfalto scuro fa appena 3,6:1
     e sembra spento: questo è la stessa tinta, più viva e più chiara. */
  --apertura-rosso:#FF3B45;
}
.notte__schermo{
  position:relative;
  container-type:inline-size;container-name:apertura;
}

.notte__quadro{position:relative}
.notte__film{
  display:block;width:100%;aspect-ratio:16 / 9;height:auto;
  object-fit:cover;object-position:50% 100%;pointer-events:none;
  /* la locandina: si vede finché arriva il primo fotogramma, e resta lei
     per chi ha chiesto meno movimento o ha il risparmio dati */
  background:#2A1A0E var(--apertura-foto) 50% 100% / cover no-repeat;
}
@media (max-width:699px) and (orientation:portrait){
  .notte__film{aspect-ratio:9 / 16}
}
/* Finestra orizzontale: tutta larghezza, alta quanto la finestra meno la
   testata e il suo bordo («- 1px»: senza, la somma faceva 901 su 900 e
   compariva una barra di scorrimento da un pixel). Mai più alta del video
   intero (56,25cqw), mai più bassa del 70% del video (39,375cqw).
   22/09 — si toglie anche la fascia che scorre in fondo (`--nastro`) e,
   quando il cliente lo accende dal pannello, l'avviso rosso in cima
   (`--avviso`, vedi .avviso-sito): testata + video + fascia = la finestra. */
@media (orientation:landscape){
  .notte__quadro{
    height:clamp(39.375cqw, calc(100vh - var(--avviso, 0px) - var(--testata) - 1px - var(--nastro)), 56.25cqw);
    height:clamp(39.375cqw, calc(100svh - var(--avviso, 0px) - var(--testata) - 1px - var(--nastro)), 56.25cqw);
  }
  .notte__film{height:100%}
}
/* 22/09 — 🔴 SUI PORTATILI PIÙ DIFFUSI (1366×768, 1536×864 col 125%) la
   finestra è bassa e il video è già al suo minimo (il 70%: sotto si
   taglierebbero i mezzi). Lì la fascia, alta ~70 px, finiva per metà sotto
   il bordo. Allora si restringe lei, fino a 34 px, quanto basta a stare
   nella prima schermata; il video non si tocca. Solo da computer: sul
   telefono girato l'apertura non ci sta comunque, e la fascia resta com'è.
   (39,375vw e non cqw: la fascia sta fuori dal riquadro che fa da misura;
   la barra di scorrimento la assorbe il video, che si prende la differenza.) */
@media (orientation:landscape) and (min-width:1100px){
  .notte{
    --nastro:clamp(34px, min(34px + 2.6vw, 100vh - var(--avviso, 0px) - var(--testata) - 1px - 39.375vw), 86px);
    --nastro:clamp(34px, min(34px + 2.6vw, 100svh - var(--avviso, 0px) - var(--testata) - 1px - 39.375vw), 86px);
  }
}

/* il logo, fermo, nel cielo */
.notte__marchio{
  position:absolute;z-index:3;margin:0;
  top:4.5cqw;left:50%;transform:translateX(-50%);
  width:min(54cqw,320px);
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.5));
}
.notte__marchio img{width:100%;height:auto}

/* l'unico comando del video */
.notte__audio{
  position:absolute;z-index:4;right:2.2cqw;bottom:2.2cqw;
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:48px;padding:.55rem 1.05rem .55rem .85rem;
  border:1px solid rgba(255,255,255,.45);border-radius:999px;
  background:rgba(14,10,6,.66);color:#FFFFFF;
  font:600 .9rem/1.2 var(--testo);cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .2s ease,transform .2s ease;
}
.notte__audio:hover{background:rgba(14,10,6,.85);transform:translateY(-1px)}
.notte__audio:focus-visible{outline:3px solid #FFC24A;outline-offset:3px}
.notte__audio svg{width:1.35em;height:1.35em;flex:none}
.notte__audio[aria-pressed="false"] .notte__onde{display:none}
.notte__audio[aria-pressed="true"] .notte__croce{display:none}

/* «20 ANNI» — IL LOGO DEI VENT'ANNI, A FINE VIDEO
   21/09 era un cartello scritto «20 ANNI» in stile logo. 22/09 — Domenico:
   «inserire il logo 20 anni al posto della scritta 20 anni … non 50 anni ma
   20, data dal 2006 al 2026, colori bianco, rosso e nero».
   Il logo è quello del cliente (Resources/3 modifiche) RICALCATO in vettoriale,
   non ridisegnato: cambiati solo date, numero, «ANNI» e colori. Poggia su una
   sagoma bianca («adesivo») che lo stacca dal video su qualsiasi fondo.
   La accende apertura.js (classe `notte--anni`) nel finale, e la spegne quando
   il video ricomincia. Da computer sta al centro: la posizione si misura DAL
   BASSO sull'altezza del video intero (56,25cqw), quindi cade sempre nello
   stesso punto della scena, qualunque sia il taglio del cielo.
   🔴 Le misure servono a tenerlo INTERO anche col taglio massimo del cielo
   (30%: dal basso si vede il 70% del video, 39,375cqw). Centro a metà video
   (28,125cqw) e alto 19,9cqw → la cima arriva a 38,1cqw; il fondo (18,2cqw)
   resta sopra titolo e indirizzo, in basso a sinistra.
   Entra come un adesivo sbattuto sul vetro: da grande e ruotato, a fermo.
   Solo transform e opacity; niente ombra con `filter`, che durante l'ingresso
   andrebbe ricalcolata a ogni fotogramma. */
.notte__anni{
  position:absolute;z-index:3;left:50%;bottom:calc(56.25cqw * .5);
  transform:translate(-50%,50%);
  width:22cqw;margin:0;line-height:0;
  pointer-events:none;opacity:0;transition:opacity .4s ease;
}
.notte__anni img{display:block;width:100%;height:auto}
.notte--anni .notte__anni{opacity:1;transition-duration:.15s}
.notte--anni .notte__anni img{animation:anni-adesivo .7s cubic-bezier(.16,1,.3,1) both}
@keyframes anni-adesivo{
  from{opacity:0;transform:scale(1.45) rotate(-9deg)}
  45%{opacity:1}
  to{opacity:1;transform:none}
}
/* Nei riquadri stretti ma non da telefono in verticale (telefono girato,
   tablet) il logo piccolo sta in alto AL CENTRO, proprio dove arriva il logo
   dei vent'anni: per il finale si fa da parte, e torna quando il video
   ricomincia. Da telefono in verticale sono uno sotto l'altro e restano tutti
   e due (il logo fermo nel cielo l'aveva chiesto Fabio [04/09 05:06]); da
   computer il logo piccolo è in alto a sinistra e non si toccano. */
.notte__marchio{transition:opacity .35s ease}
@container apertura (max-width:1099px){
  .notte--anni .notte__marchio{opacity:0}
}
@media (max-width:699px) and (orientation:portrait){
  .notte--anni .notte__marchio{opacity:1}
}

/* titolo e indirizzo: di base SOTTO il video, su fondo chiaro */
.notte__dentro{
  position:relative;z-index:2;
  background:var(--carta);color:var(--inchiostro);
  padding:clamp(1.4rem,5cqw,2.2rem) 1.25rem clamp(1.6rem,5.5cqw,2.4rem);
}
@media (max-width:520px){.notte__dentro{padding-inline:.875rem}}
.notte h1{
  font-size:clamp(1.6rem,1.1rem + 1.9vw,2.3rem);
  color:var(--inchiostro);margin:0 0 var(--s4);
}
.notte h1 em{font-style:normal;color:var(--rosso-testo)}
.notte__guida{color:var(--grigio);font-size:.98em;margin:0}

/* TELEFONO IN VERTICALE: anche qui il testo sta SUL video (Domenico, 21/09:
   «da mobile vanno sulla hero come da pc»). Sul video verticale i mezzi e la
   scritta Route 66 occupano la metà bassa (dal 43% in giù), il cielo in alto è
   libero: logo, titolo e indirizzo stanno lì, centrati, uno sotto l'altro.
   L'altezza del logo è la sua larghezza × 183/560 (le proporzioni del file). */
@media (max-width:699px) and (orientation:portrait){
  .notte__quadro::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(to bottom, rgba(12,7,2,.52) 0%, rgba(12,7,2,.30) 30%, transparent 48%);
  }
  .notte__dentro{
    position:absolute;left:0;right:0;z-index:3;
    top:calc(4.5cqw + min(54cqw,320px) * 183 / 560 + 3cqw);
    padding:0 5cqw;background:none;color:#FFFFFF;
    text-align:center;pointer-events:none;
  }
  .notte h1{
    font-size:clamp(1.15rem,6.6cqw,1.9rem);margin-bottom:2.4cqw;
    color:#FFFFFF;text-shadow:0 2px 14px rgba(10,6,2,.75);
  }
  /* 22/09 — Domenico: «non quel giallino, un rosso o qualcosa che prende più
     l'attenzione». Qui sotto c'è il CIELO, con le nuvole accese dal tramonto:
     il rosso da solo ci si perde (misurato: 2,4:1 nel punto peggiore). Quindi
     un filo scuro tutto attorno alle lettere, come il bordo nero del marchio,
     più l'ombra netta sotto e un alone largo. Misurato sullo screenshot, sotto
     le lettere: mai meno di 5,6:1 (a 390 e 360 px). */
  .notte h1 em{
    --filo:rgba(8,4,2,.92);
    color:var(--apertura-rosso);
    text-shadow:
      .045em 0 0 var(--filo), -.045em 0 0 var(--filo), 0 .045em 0 var(--filo), 0 -.045em 0 var(--filo),
      .032em .032em 0 var(--filo), -.032em .032em 0 var(--filo), .032em -.032em 0 var(--filo), -.032em -.032em 0 var(--filo),
      0 .09em 0 rgba(8,4,2,.9), 0 0 .3em rgba(8,4,2,.75), 0 0 .7em rgba(8,4,2,.45);
  }
  .notte__guida{
    font-size:clamp(.8rem,4.6cqw,1rem);line-height:1.4;
    color:#FFFFFF;text-shadow:0 1px 10px rgba(0,0,0,.8);
  }
  /* «20 ANNI» da telefono: nel cielo, AL POSTO di titolo e indirizzo, che si
     spengono per il finale e tornano quando il video ricomincia. Sotto ci
     sono i mezzi fermi e la scritta Route 66: lì non si mette niente. */
  .notte__dentro{transition:opacity .35s ease}
  .notte--anni .notte__dentro{opacity:0}
  /* largo 50cqw → alto 45,3cqw: finisce a 72cqw dall'alto, prima dei mezzi
     (dal 43% del video in giù = 76cqw) */
  .notte__anni{
    top:calc(4.5cqw + min(54cqw,320px) * 183 / 560 + 5cqw);bottom:auto;
    transform:translateX(-50%);
    width:50cqw;
  }
}

/* riquadro largo: il testo va SUL video, dove non copre i mezzi */
@container apertura (min-width:1100px){
  /* 22/09 — Domenico: «il logo in alto a sinistra leggermente più grande».
     Era 16cqw (305 px su 1920): ora 19cqw, +19%. Il telefono non cambia. */
  .notte__marchio{
    top:2.4cqw;left:3.2cqw;transform:none;
    width:19cqw;
  }
  /* ombra morbida solo dietro le parole, in basso a sinistra */
  .notte__quadro::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:
      radial-gradient(34% 26% at 0% 0%, rgba(22,12,4,.40), transparent 100%),
      radial-gradient(62% 52% at 0% 100%, rgba(10,8,6,.70), rgba(10,8,6,.28) 58%, transparent 100%);
  }
  .notte__dentro{
    position:absolute;left:3.2cqw;bottom:3cqw;z-index:3;
    max-width:36cqw;pointer-events:none;
    background:none;padding:0;color:#FFFFFF;
  }
  .notte h1{
    font-size:clamp(1.5rem,2.3cqw,3.1rem);margin-bottom:.9cqw;
    color:#FFFFFF;text-shadow:0 2px 16px rgba(10,6,2,.7);
  }
  /* 22/09 — il rosso al posto del giallo (vedi `--apertura-rosso`): sotto
     c'è l'asfalto scuro, basta un'ombra netta per staccare il bordo.
     Misurato sullo screenshot (1920 e 1366), sotto le lettere: 5,7:1 di
     solito, mai meno di 4,8:1. */
  .notte h1 em{
    color:var(--apertura-rosso);
    text-shadow:0 .06em 0 rgba(8,4,2,.9), 0 0 .3em rgba(8,4,2,.55), 0 2px 16px rgba(10,6,2,.7);
  }
  .notte__guida{
    font-size:max(.9rem,1.2cqw);line-height:1.45;
    color:#FFFFFF;text-shadow:0 1px 12px rgba(0,0,0,.75);
  }
}

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

/* ══ «IMPORTAZIONE MOTO DA CROSS» — LA FASCIA CHE SCORRE IN FONDO ══════
   22/09 — Domenico: «una scritta che passa con 3 colori diversi, colori come
   il logo», sull'esempio del logo HRC (esempio3colori.jpeg). Lì le lettere
   sono TAGLIATE in orizzontale a metà: sopra rosse, sotto blu, e fra le due
   un filo sottile del colore del fondo. Qui i tre colori sono quelli del
   marchio Seven Racing: fascia NERA, metà sopra ROSSA, metà sotto BIANCA, e
   il filo in mezzo è il nero della fascia (lì il gradiente è trasparente).

   🔴 Il taglio cade a METÀ DELLE MAIUSCOLE, non a metà della riga. Misure
   prese dal file del carattere (Saira Condensed 700, 1000 unità per em):
   ascendente 1135, discendente 439, maiuscole alte 688. Con line-height:1 la
   linea di base cade a 0,848em dal bordo alto della riga, la cima delle
   maiuscole a 0,160em, la loro metà a 0,504em. Il filo è il 7% delle
   maiuscole: 0,048em, da 0,480em a 0,528em. Il gradiente è misurato in em
   proprio per questo: segue il carattere a qualunque grandezza.
   Verificato nel browser sui pixel: a 400 px la metà delle maiuscole cade a
   0,503em, il conto torna. Alle grandezze vere (37-64 px) Windows aggancia
   le lettere ai pixel interi e la metà reale oscilla fra 0,48 e 0,52em, cioè
   al massimo un pixel: è il disegno del carattere, non il taglio. Su Mac e
   iPhone, che non agganciano, il taglio cade esatto; sugli schermi ad alta
   densità lo scarto si divide per 2 o per 3.
   Il colore è un gradiente ritagliato sulle lettere (background-clip:text);
   dove il browser non lo sa fare, le lettere restano bianche piene.

   Scorre SEMPRE e non si ferma mai, nemmeno col mouse sopra (regola THK dei
   nastri): stessa tecnica delle marche, due gruppi identici e l'animazione
   `scorri` che sposta la pista di -50%. Solo transform. Sugli schermi più
   larghi di un gruppo main.js ne aggiunge altri. Chi ha chiesto meno
   movimento la vede ferma. */
.notte__nastro{
  --nastro-fondo:#0C0D0F;   /* il nero del marchio */
  --nastro-sopra:#E30713;   /* il rosso del marchio */
  --nastro-sotto:#FFFFFF;
  position:relative;z-index:4;   /* la linea rossa (.notte::before, z 5) le resta sopra */
  height:var(--nastro);overflow:hidden;
  display:flex;align-items:center;
  background:var(--nastro-fondo);
}
/* un gruppo (quattro frasi) è ~3.250 px su 1920: in 36 s fa ~90 px al secondo,
   una frase intera passa in ~9 s. Da telefono è in proporzione, ~50 px/s. */
.notte__nastro-pista{display:flex;width:max-content;animation:scorri 36s linear infinite}
.notte__nastro-gruppo{
  display:flex;flex:none;align-items:flex-start;
  font:700 calc(var(--nastro) * .74)/1 var(--display);
  letter-spacing:.015em;text-transform:uppercase;white-space:nowrap;
  transform:skewX(-12deg);   /* inclinata come il 7 del marchio */
}
.notte__nastro-scritta{display:block;color:var(--nastro-sotto)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .notte__nastro-scritta{
    background:linear-gradient(180deg,
      var(--nastro-sopra) 0 .48em, transparent .48em .528em, var(--nastro-sotto) .528em);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}
/* il segno fra una frase e l'altra: un parallelogramma alto quanto le
   maiuscole (parte da 0,160em, la loro cima) e tagliato come loro */
.notte__nastro-segno{
  flex:none;width:.26em;height:.688em;margin:.16em .5em 0;
  background:linear-gradient(180deg,
    var(--nastro-sopra) 0 calc(50% - .024em), transparent 0 calc(50% + .024em), var(--nastro-sotto) 0);
}
@media (prefers-reduced-motion:reduce){
  .notte__nastro-pista{animation:none}
}


/* ══ L'AVVISO IN CIMA — lo accende e lo spegne il cliente dal pannello ══
   Lo inserisce il server (functions/_middleware.js) come primo figlio del
   <body>, cioè SOPRA la testata appiccicata: così si vede sempre, e quando è
   spento non c'è proprio, non è nascosto col CSS. */
/* 22/09 — l'altezza dell'avviso (una riga: 1,02rem × 1,3 + 0,7rem × 2), per
   il conto dell'apertura: quando è acceso, video e fascia si fanno più
   bassi di tanto. Senza avviso la variabile non c'è e vale 0. */
:root:has(body > .avviso-sito){--avviso:calc(1.02rem * 1.3 + 1.4rem)}
.avviso-sito{
  background:var(--rosso);color:#FFFFFF;
  font-family:var(--display);font-weight:700;font-size:1.02rem;
  letter-spacing:.04em;text-transform:uppercase;text-align:center;
  padding:.7rem 1rem;line-height:1.3;
}


/* ══ 22/09 — IN ARRIVO ═════════════════════════════════════════════════
   Richiesta del 22/09: «aggiungere una opzione nel pannello di controllo
   AUTO IN ARRIVO». Decisa con Domenico come SPUNTA PER VEICOLO (auto, moto
   e autocarri): il mezzo è già del deposito ma non è ancora arrivato.
   · l'etichetta sta in BASSO a sinistra della fotografia: in alto c'è già
     «Nuovo»/«Km 0», e su una scheda da telefono (~160px) le due affiancate
     si sovrapponevano;
   · fondo --rosso-fondo col bianco sopra = 7,50:1. Il rosso del marchio
     (#E30713) col bianco fa solo 4,88:1, e questa scritta si deve leggere;
   · il tema scuro non ridefinisce --rosso-fondo: il contrasto resta quello.
   Niente animazioni: è un'informazione, non un effetto. */
.mezzo__arrivo{
  position:absolute;left:0;bottom:0;z-index:2;
  font-family:var(--display);font-weight:700;font-size:.95rem;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;
  color:#FFFFFF;background:var(--rosso-fondo);padding:.34rem .65rem;
}
/* sulla fotografia grande della pagina del veicolo, un po' più grande */
.galleria__grande .mezzo__arrivo{font-size:1.08rem;padding:.45rem .85rem}

/* la riga sotto il nome, nella pagina del veicolo: detto prima del prezzo */
.arrivo-nota{
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .75rem;
  padding:.75rem .9rem;background:var(--scheda);
  border:1px solid var(--linea);border-left:4px solid var(--rosso);border-radius:var(--raggio);
  font-size:1.04rem;line-height:1.4;color:var(--grigio);
}
.arrivo-nota strong{
  font-family:var(--display);font-weight:700;font-size:.95rem;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;
  color:#FFFFFF;background:var(--rosso-fondo);padding:.24rem .6rem;
}

/* la fila «In arrivo» della home: senza «Scopri tutte» (non ha una pagina
   sua) le frecce vanno comunque a destra, come nelle altre file.
   Sta in una sezione sua, prima della disponibilità: il suo titolo è un h2
   (apre la sezione) ma ha la misura dei titoli delle file, e la sezione non
   ha spazio sotto, così si legge come l'inizio della disponibilità. */
.sezione--arrivo{padding-bottom:0}
.sezione--arrivo .fila{margin-top:0}
.fila--arrivo .fila__testa h2{font-size:clamp(1.45rem,1.1rem + 1.3vw,2.1rem)}
.fila--arrivo .fila__frecce{margin-left:auto}
.fila--arrivo .fila__testa h2::before{
  content:"";display:inline-block;width:.42em;height:.42em;margin-right:.4em;
  vertical-align:.14em;background:var(--rosso);
}
.fila__nota{margin:calc(var(--s2) * -1) 0 var(--s4);font-size:1.04rem;color:var(--grigio);max-width:60ch}

/* ══ 22/09 — IL VIDEO NELLA SCHEDA DEL VEICOLO ═══════════════════════════
   Il cliente carica un giro attorno al mezzo dal pannello e fino a oggi non
   si vedeva da nessuna parte. Sta nella galleria, al posto della fotografia
   grande, quando si preme la sua miniatura.
   `contain` e non `cover`: i filmati fatti col telefono sono spesso in
   verticale, e ritagliandoli in un riquadro 4/3 si perderebbe metà del mezzo;
   il fondo scuro riempie quello che avanza ai lati.
   Regole THK sui video: parte da solo, MUTO, in ciclo, senza comandi —
   l'unico comando è il pulsante dell'audio, con la sua parola scritta. */
.galleria__grande video{
  width:100%;height:100%;object-fit:contain;background:#0C0D0F;display:none;
}
.galleria__audio{
  position:absolute;left:.7rem;bottom:.7rem;z-index:3;
  min-height:60px;padding:.5rem 1rem;font-size:1rem;line-height:1.15;
  background:rgba(12,13,15,.74);color:#FFFFFF;border-color:rgba(255,255,255,.4);
}