/* ============================================================
   RUSSIAN LUBRIFICANTI - design system v4
   ------------------------------------------------------------
   Quattro regole, da cui discende tutto il resto:
     1. UN OGGETTO SOLO con parti, non tante parti indipendenti.
     2. UNA MATERIA SOLA: stessa palette e stessa grana, sempre.
     3. UN DIRETTORE: il visivo si posa, poi arriva il testo.
     4. NESSUNA CUCITURA: chrome del browser, header e pannello
        in continuità; l'header cambia colore col pannello sotto.
   Corollario: via tutto ciò che spiega se stesso - numerazioni
   01/02/03, note a destra, sigilli, bordini colorati a sinistra.
   ============================================================ */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-var.c5e9a9901938.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("../fonts/spline-sans-mono-var.4ebf124f4aa2.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --nero: #1c1c1b;
  --nero-alto: #262625;
  --nero-header: #161615;
  --crema: #f2efe8;
  --crema-alta: #e8e4da;
  --grigio: #98938b;          /* su scuro - 5,6:1 */
  --grigio-scuro: #63605a;    /* su chiaro - 4,9:1 */
  --oro: #f9a718;
  --oro-chiaro: #ffcd04;
  /* Il blu del monogramma passa WCAG solo su fondo scuro (5,7:1); su crema
     è 2,6:1. Tre valori, ruoli fissi, mai interscambiabili. */
  --blu: #009fe0;
  --blu-solido: #0a6a9e;      /* fondo bottoni, testo bianco 5,9:1 */
  --blu-solido-su: #075a86;
  --errore: #e2604f;
  --ok: #6aa76f;

  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", monospace;
  --t-micro: 12px;
  --t-s: 15px;
  --t-body: 17px;
  --t-lead: 22px;
  --t-h3: 27px;
  --t-h2: clamp(30px, 4.2vw, 50px);
  --t-h1: clamp(40px, 5.8vw, 76px);

  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-6: 3rem;
  --sp-8: 4rem;
  --sp-11: 5.5rem;
  --sp-14: 7rem;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 26px;
  --maxw: 1240px;
  --hairline-scuro: rgba(255, 255, 255, 0.1);
  --hairline-chiaro: rgba(28, 28, 27, 0.12);
  --molla: cubic-bezier(0.22, 0.68, 0.15, 1);
}

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

html {
  scroll-behavior: smooth;
  /* continuità col chrome del browser: nessuna striscia di colore diverso */
  background: var(--nero);
}

body {
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  background: var(--nero);
  color: var(--crema);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   PANNELLI
   ============================================================ */
.p { padding: var(--sp-14) 0; position: relative; }
.p-nero { background: var(--nero); color: var(--crema); }
.p-crema { background: var(--crema); color: var(--nero); }
.p-nero + .p-nero { padding-top: 0; }
.p-crema + .p-crema { padding-top: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); }
.wrap-stretto { max-width: 780px; }

.p-nero, .hero, .pagina-testata, .prodotto-testata, footer.sito {
  --su: var(--nero-alto);
  --muto: var(--grigio);
  --muto-alto: #c2bdb4;              /* testo secondario che non ingrigisce */
  --neutro: rgba(242, 239, 232, 0.5);  /* il "quieto": la stessa materia, più bassa */
  --blu-quieto: #3a8cb8;             /* fratello scuro del blu del monogramma - 4,6:1 */
  --hairline: var(--hairline-scuro);
  --forte: #fff;
  --blu-link: var(--blu);
  --oro-testo: var(--oro);
  --anello: var(--oro);
}
.p-crema {
  --su: var(--crema-alta);
  --muto: var(--grigio-scuro);
  --muto-alto: #4f4c46;
  --neutro: rgba(28, 28, 27, 0.45);
  --blu-quieto: #0d3f5e;
  --hairline: var(--hairline-chiaro);
  --forte: var(--nero);
  --blu-link: #0a5f90;
  --oro-testo: #7d5600;
  --anello: var(--nero);
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
h1, h2, h3, h4 {
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.06;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); letter-spacing: -0.038em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.022em; }

p { color: var(--muto); }
strong { color: var(--forte); font-weight: 600; }

.lead { font-size: var(--t-lead); line-height: 1.42; color: var(--muto); max-width: 40ch; }
.piccolo { font-size: var(--t-s); }
.dato { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Occhiello: solo per dire DOVE SEI (nome della pagina). Mai per commentare
   una sezione - quelle etichette erano cuciture. */
.occhiello {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro-testo);
  display: block;
}
.occhiello.blu { color: var(--blu-link); }

/* Testata di sezione: il titolo e basta. Niente numero, niente nota. */
.testata { margin-bottom: var(--sp-8); }
.testata h2 { max-width: 30ch; }
.testata .sotto {
  color: var(--muto);
  font-size: var(--t-lead);
  line-height: 1.42;
  max-width: 46ch;
  margin-top: var(--sp-2);
}

/* ============================================================
   BOTTONI - grandi, a stadio, senza filetti né maiuscole:
   nessuno dei segni di riconoscimento di un kit
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: -0.015em;
  background: var(--blu-solido);
  color: #fff;
  border: 0;
  padding: 1em 1.75em;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: background 0.22s ease, transform 0.16s var(--molla);
}
.btn:hover { background: var(--blu-solido-su); }
.btn:active { transform: translateY(1px); }
.btn.contorno {
  background: transparent;
  color: currentColor;
  box-shadow: inset 0 0 0 1.5px var(--hairline);
}
.btn.contorno:hover { background: var(--su); box-shadow: inset 0 0 0 1.5px transparent; }
.btn.oro { background: var(--oro); color: #241c07; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn.oro:hover { background: var(--oro-chiaro); }
.btn.grande { font-size: var(--t-lead); padding: 1.05em 2em; }

.link-freccia {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--blu-link);
  display: inline-flex;
  gap: 0.45em;
  align-items: baseline;
}
.link-freccia::after { content: "→"; transition: transform 0.22s var(--molla); }
.link-freccia:hover::after { transform: translateX(4px); }
.link-testo { color: var(--blu-link); }
.link-testo:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   HEADER - una barra sola, che cambia colore col pannello sotto.
   Il colore è anche quello che finisce nel chrome del browser
   (meta theme-color, aggiornato dal JS): nessuno stacco in cima.
   ============================================================ */
/* Il fondo dell'header è IDENTICO a quello del pannello che gli scorre sotto:
   non un valore scelto a mano che gli somiglia, ma il colore calcolato di quel
   pannello, copiato dal JS. Così non esiste nessuno scarto di tono, e niente
   filetto a fare da cerotto: la barra e il contenuto sono la stessa superficie. */
header.sito {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--fondo-barra, var(--nero));
  color: var(--h-testo, var(--crema));
  /* Il colore cambia di colpo, senza dissolvenza: Safari su iOS 26 non legge
     piu' il theme-color e tinge la striscia in alto col colore della barra.
     Con la dissolvenza lo prendeva a meta', e restava grigio sopra la barra
     scura (Renato, 22/10/2026). Il colore cambia mentre il bordo del pannello
     passa sotto la barra, quindi lo stacco netto e' quello giusto. */
  transition: transform 0.34s var(--molla);
}
/* La barra si fa da parte mentre si scende e torna appena si risale: quando
   guardi il contenuto non serve, quando risali stai cercando la navigazione. */
header.sito.nascosta { transform: translateY(-101%); }
/* Se il fuoco da tastiera entra nella barra, la barra c'è: garantito dal CSS,
   non dal JS, così non può dipendere da un evento che non scatta. */
header.sito:focus-within { transform: none; }
@media (prefers-reduced-motion: reduce) {
  header.sito { transition: none; }
}
/* I token della barra stanno sulla RADICE, non sull'header: il sipario deve
   poter usare esattamente gli stessi. Con un fondo suo, aprendo il menu sopra
   un pannello crema il sipario restava scuro mentre la barra era chiara - e il
   theme-color del telefono seguiva la barra, così il menu stonava con la
   striscia in cima allo schermo. Una fonte sola, nessuno scarto possibile. */
[data-fondo="chiaro"] {
  --h-testo: var(--nero);
  --h-muto: var(--grigio-scuro);
  --h-linea: var(--hairline-chiaro);
  --h-oro: #7d5600;
  --anello: var(--nero);
}
[data-fondo="scuro"] {
  --h-testo: var(--crema);
  --h-muto: var(--grigio);
  --h-linea: var(--hairline-scuro);
  --h-oro: var(--oro);
  --anello: var(--oro);
}
header.sito .wrap { display: flex; align-items: center; gap: var(--sp-4); padding-block: 0.85rem; }

.marchio { display: flex; align-items: center; gap: 0.7rem; }
.marchio img { width: auto; height: 48px; }
/* Il logo segue il fondo della barra: sul crema la versione con la scritta
   scura, sul nero quella chiara. Senza JS resta la chiara, e le pagine
   iniziano tutte con una testata scura: nessun lampo di logo invisibile.
   Le due versioni si SOVRAPPONGONO e si dissolvono nello stesso tempo del
   fondo (0,45 s): con lo scambio secco il logo cambiava subito e per mezzo
   secondo restava illeggibile sopra il colore vecchio. */
.marchio { position: relative; }
.marchio .su-chiaro {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
.marchio img { transition: opacity 0.45s ease; }
[data-fondo="chiaro"] .marchio .su-scuro { opacity: 0; }
[data-fondo="chiaro"] .marchio .su-chiaro { opacity: 1; }
/* su carta il fondo e' bianco comunque: va la versione scura */
@media print {
  .marchio .su-scuro { opacity: 0; }
  .marchio .su-chiaro { opacity: 1; }
}
.marchio .nome { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.marchio .nome small {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.26em;
  color: var(--oro);
  margin-top: 2px;
}
header.sito .marchio .nome small { color: var(--h-oro, var(--oro)); }

nav.principale { margin-left: auto; display: flex; align-items: center; gap: 0.1rem; }
nav.principale a {
  font-size: var(--t-s);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--h-muto, var(--grigio));
  padding: 0.5em 0.75em;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}
nav.principale a:hover,
nav.principale a.attivo { color: var(--h-testo, var(--crema)); }
nav.principale a.riservata {
  color: var(--h-testo);
  box-shadow: inset 0 0 0 1.5px var(--h-linea);
  margin-left: 0.5rem;
  padding-inline: 1.1em;
}
nav.principale a.riservata:hover { background: var(--blu-solido); color: #fff; box-shadow: none; }

.telefono-header {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--h-muto, var(--grigio));
  white-space: nowrap;
}
.telefono-header:hover { color: var(--h-testo); }

/* ── il controllo del menu: « open », non tre righe ─────────────────────── */
.apri-menu {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 0.5em;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--h-testo, var(--crema));
  padding: 0.5em 0.2em;
}
.apri-menu .freccia { transition: transform 0.3s var(--molla); }
.apri-menu .freccia.d { transform: scaleX(-1); }
.apri-menu:hover .freccia { transform: translateX(-3px); }
.apri-menu:hover .freccia.d { transform: scaleX(-1) translateX(-3px); }
.apri-menu .freccia { color: var(--h-oro, var(--oro)); }

/* ── il sipario: apre su tutta la pagina, senza sbattere in faccia ──────── */
.sipario {
  position: fixed;
  inset: 0;
  z-index: 90;
  /* stesso fondo della barra, non un colore suo: è la stessa superficie che
     si allunga verso il basso, e il theme-color del telefono resta coerente */
  background: var(--fondo-barra, var(--nero));
  color: var(--h-testo, var(--crema));
  display: flex;
  flex-direction: column;
  padding: 0 0 var(--sp-8);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.62s var(--molla), background-color 0.45s ease;
  pointer-events: none;
  visibility: hidden;
}
.sipario.aperto { clip-path: inset(0 0 0 0); pointer-events: auto; visibility: visible; }
/* dentro il sipario il controllo si vede sempre, anche dove la barra
   desktop mostrerebbe il menu inline */
.sipario .apri-menu { display: inline-flex; }
/* La riga in cima ripete ESATTAMENTE la barra - stesso contenitore e stesso
   padding verticale - così aprendo il menu il logo non si sposta di un pixel. */
.sipario .testa > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: 0.85rem;
}
/* Le voci partono subito sotto la barra, a distanza fissa: centrate fra barra
   e piede lasciavano in alto un vuoto che cresceva con lo schermo (140px su
   un telefono da 812), proprio dove si ferma il pollice (Renato, 13/10/2026).
   Le voci prendono tutto lo spazio fino al piede, che resta in fondo, e
   l'Area riservata si stacca dalle altre e scende sopra il piede, sotto il
   pollice (Renato, 13/10/2026). Se lo schermo e' basso segue le altre. */
.sipario .voci {
  flex: 1 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);   /* +2rem d'aria fra la barra e la prima voce */
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.sipario .voci a {
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 500;
  letter-spacing: -0.032em;
  color: var(--h-testo, var(--crema));
  padding: 0.22em 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.42s ease, transform 0.5s var(--molla);
}
.sipario.aperto .voci a { opacity: 1; transform: none; }
.sipario .voci a:nth-child(1) { transition-delay: 0.16s; }
.sipario .voci a:nth-child(2) { transition-delay: 0.21s; }
.sipario .voci a:nth-child(3) { transition-delay: 0.26s; }
.sipario .voci a:nth-child(4) { transition-delay: 0.31s; }
.sipario .voci a:nth-child(5) { transition-delay: 0.36s; }
.sipario .voci a:nth-child(6) { transition-delay: 0.41s; }
.sipario .voci a.riservata { color: var(--h-oro, var(--oro)); margin-top: auto; }
.sipario .piede {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--h-muto, var(--grigio));
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  padding: 0 var(--sp-4);
}
.sipario .piede a { color: var(--h-testo, var(--crema)); }
/* Il blocco dello scroll compensa la barra di scorrimento (il padding lo mette
   il JS): senza, alla chiusura la pagina saltava di lato di qualche pixel. */
body.bloccato { overflow: hidden; }

/* ============================================================
   VETRINA - l'oggetto dell'hero.
   Rombi dentro il rombo: le lastre hanno la STESSA forma del
   contenitore, così il contenimento non è un caso ma un calcolo.
   In geometria L1 (quella dei rombi): |spostamento| + raggio
   della lastra ≤ raggio del contenitore. Tutti i numeri qui
   sotto rispettano quella disuguaglianza - su ogni schermo
   (sono frazioni, non pixel) e a ogni angolo dello scatto: la
   prova sta sopra la tabella delle posizioni.
   Le foto sono prodotti veri dal sito attuale di Russian; il
   riquadro interno è contro-ruotato, quindi la foto resta
   dritta mentre la cornice gira di 90° a ogni scatto.
   ============================================================ */
.vetrina {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  --giro: 0deg;
}
/* contenitore: lato 70% → punte a 0,495 del riquadro: dentro, sempre.
   Il raggio è in percentuale, come quello delle lastre: rombi concentrici
   con angoli della stessa famiglia, a qualunque scala. */
.rombo {
  position: absolute;
  inset: 15%;
  transform: rotate(45deg);
  border-radius: 8%;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.05), transparent 60%),
    var(--nero-alto);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
/* lastra: lato 50%, ruotata come il contenitore. La posizione nella pila
   arriva da data-pos come coppia (--ty, --s); la rotazione condivisa da
   --giro sulla vetrina: un oggetto solo, un solo orologio. */
.lastra {
  position: absolute;
  left: 25%;
  top: 25%;
  width: 50%;
  aspect-ratio: 1 / 1;
  border-radius: 8%;
  /* Dietro: lastre SCURE e vuote - eco del rombo, non prodotti che spuntano.
     Bianche in trasparenza facevano poltiglia grigia e ombre accavallate;
     il prodotto lo mostra solo la lastra davanti, che si accende di bianco
     quando arriva. */
  background: #2e2e2c;
  transform: translate(0, var(--ty, 0%)) rotate(calc(45deg + var(--giro))) scale(var(--s, 1));
  opacity: var(--o, 1);
  transition: transform 0.9s var(--molla), opacity 0.9s ease,
              background-color 0.3s ease, box-shadow 0.9s ease;
  will-change: transform, opacity;
}
.lastra[data-pos="0"] {
  background: #fff;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.55);
}
/* il riquadro interno: quadrato dritto inscritto nel rombo (inset ≥ 14,7%),
   contro-ruotato dello stesso angolo: la cornice gira, la foto no */
.lastra .interno {
  position: absolute;
  inset: 15%;
  transform: rotate(calc(-45deg - var(--giro)));
  transition: transform 0.9s var(--molla);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2%;
}
.lastra .interno img {
  width: 100%;
  height: 82%;
  object-fit: contain;
}
.lastra .interno figcaption {
  font-family: var(--sans);
  font-size: clamp(9px, 1.3vw, 12px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #45423c;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Il contenuto vive solo sulla lastra davanti: dietro, le eco sono vuote.
   L'ordine conta: prima si accende il BIANCO della lastra (0,3 s), poi
   appare la foto (ritardo 0,4 s) - le foto hanno lo sfondo bianco, e
   mostrarle su una lastra ancora scura fa vedere un riquadro spaiato.
   In uscita è il contrario: la foto sparisce subito, senza ritardo. */
.lastra .interno img,
.lastra .interno figcaption { opacity: 0; transition: opacity 0.22s ease; }
.lastra[data-pos="0"] .interno img,
.lastra[data-pos="0"] .interno figcaption { opacity: 1; transition: opacity 0.4s ease 0.4s; }

/* La pila, sull'asse verticale del rombo (dove c'è più spazio).

   VERIFICA DEL CONTENIMENTO - vale a OGNI istante, non solo da fermi.
   Il conto va fatto sull'angolo PEGGIORE, non a riposo: durante lo scatto
   la lastra passa per l'orientamento dritto, e lì il suo raggio L1 cresce
   di √2 (gli spigoli puntano verso i lati del rombo). Con lato 0,5·s e
   angoli arrotondati all'8%, il raggio peggiore vale 0,4766·s.
   Lo spostamento in frazioni del riquadro è |ty|·0,5 (le percentuali di
   translate sono sulla misura della lastra, che è metà del riquadro).
     pos0  ty 0     s 1,00 → 0,000+0,477 = 0,477 ≤ 0,495 ✓
     pos1  ty −28%  s 0,70 → 0,140+0,334 = 0,474 ≤ 0,495 ✓
     pos2  ty −40%  s 0,56 → 0,200+0,267 = 0,467 ≤ 0,495 ✓
     pos3  ty −46%  s 0,46 → 0,230+0,219 = 0,449 ≤ 0,495 ✓ (nascosta)
     pos4/5 specchiate in basso.
   E siccome la disuguaglianza è LINEARE in (ty, s) e la transizione
   interpola le due grandezze linearmente con una curva che non sfora
   (--molla non ha rimbalzo), se la rispettano i due estremi la rispetta
   ogni istante in mezzo: il contenimento è dimostrato, non campionato.
   ⚠️ Toccando questi numeri, rifare il conto con 0,4766·s - non con il
   raggio a riposo (0,354·s), che è quello che prima lasciava uscire un
   dente scuro dal rombo a ogni scatto. */
.lastra[data-pos="0"] { --ty: 0%;   --s: 1;    --o: 1;    z-index: 6; }
.lastra[data-pos="1"] { --ty: -28%; --s: 0.70; --o: 0.9;  z-index: 5; }
.lastra[data-pos="2"] { --ty: -40%; --s: 0.56; --o: 0.5;  z-index: 4; }
.lastra[data-pos="3"] { --ty: -46%; --s: 0.46; --o: 0;    z-index: 1; }
.lastra[data-pos="4"] { --ty: 40%;  --s: 0.56; --o: 0.5;  z-index: 2; }
.lastra[data-pos="5"] { --ty: 28%;  --s: 0.70; --o: 0.9;  z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .lastra, .lastra .interno { transition: none; }
}

/* La striscia dei marchi distribuiti: UN corpo solo, non sei cartellini.
   I vuoti fra i cartellini lasciavano intravedere il fondo scuro e la
   striscia si sgranava (Renato, 13/08). Ora è un blocco squadrato con le
   celle a contatto: la fuga da 1px è il fondo del blocco che affiora e fa
   da giunto - anche quando le celle vanno a capo, i giunti restano. */
.marchi-hero { margin-top: var(--sp-6); }
.marchi-hero .eti {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grigio);
  margin-bottom: 0.7rem;
}
.marchi-hero ul {
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1px;
  background: rgba(20, 23, 26, 0.22);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(20, 23, 26, 0.22);
}
.marchi-hero li {
  background: #fff;
  padding: 0.55em 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  /* la riga si riempie fino in fondo: niente dente sul bordo destro */
  flex: 1 1 auto;
}
.marchi-hero img { height: 22px; width: auto; display: block; }

/* Due livelli (Giulio, 07/09/2026): Saneg, Moeve, Bardahl, Brugarolas e
   Bellini sono le marche portanti e stanno grandi (Bardahl la piu' grande);
   le altre restano, piu' piccole e in secondo piano. Resta UN blocco solo. */
.marchi-hero .blocco {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(20, 23, 26, 0.22);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(20, 23, 26, 0.22);
}
.marchi-hero .blocco ul { border-radius: 0; box-shadow: none; display: flex; width: 100%; }
.marchi-hero .portanti li { padding: 0.5em 0.72em; }
.marchi-hero .portanti img { height: 24px; }
/* Bardahl "piu' grande" (Giulio): il suo logo e' quadrato, quindi la sola
   altezza non basta a farlo sembrare piu' grande degli altri, che sono
   lunghi e bassi. Piu' alto E con la cella piu' larga: cosi' domina la riga. */
.marchi-hero .portanti .grande { padding-inline: 1.05em; }
.marchi-hero .portanti .grande img { height: 44px; }
/* Moeve (07/10/2026) e' su due righe, «CEPSA becomes» sopra «moeve»: a 24px
   la riga piccola veniva di 8px. Piu' alto, la parola moeve torna grande
   quanto nel logo di prima. */
.marchi-hero .portanti .doppia img { height: 32px; }
/* Moeve a 32px allarga la riga di 34px: fra 600 e 639 Bellini andava a capo
   da solo, misurato; li' scende a 28px come nella fascia 1041-1200. */
@media (min-width: 600px) and (max-width: 639px) {
  .marchi-hero .portanti .doppia img { height: 28px; }
}
.marchi-hero .comprimarie li { padding: 0.42em 0.95em; }
.marchi-hero .comprimarie img { height: 18px; opacity: 0.5; filter: grayscale(1); }
/* Texaco ha il nome accanto alla stella tonda, piu' basso del logo: a 18px
   le lettere verrebbero di 6px, a 26px sono alte quanto Mapetrol (fino al
   13/10/2026 era il logo verticale, stella sopra e nome sotto) */
.marchi-hero .comprimarie .alta img { height: 26px; }
/* nella fascia stretta la colonna del testo non tiene i cinque marchi in fila:
   si stringono ancora un po' invece di spezzare la riga */
@media (min-width: 1041px) and (max-width: 1200px) {
  .marchi-hero .portanti img { height: 21px; }
  .marchi-hero .portanti .grande img { height: 38px; }
  .marchi-hero .portanti .doppia img { height: 28px; }
  .marchi-hero .portanti li { padding: 0.45em 0.5em; }
  .marchi-hero .portanti .grande { padding-inline: 0.8em; }
}
/* Sul telefono lo spazio e' poco. Con l'andata a capo del flex, sotto i
   390px (iPhone SE, gli Android da 360) l'ultimo marchio restava SOLO in
   una fascia bianca larga tutta la riga: `flex: 1 1 auto` lo stirava.
   Qui le due file diventano una griglia a colonne fisse: la riga si riempie
   per costruzione, il bordo destro resta a filo e nessuno resta orfano.
   Nelle celle strette il logo si rimpicciolisce in proporzione.
   La soglia e' 599px perche' e' li' che il flex torna a tenere i cinque
   portanti in fila (misurato: a 560 Bellini restava orfano, a 600 no). */
@media (max-width: 599px) {
  .marchi-hero .portanti li { padding: 0.45em 0.5em; }
  .marchi-hero .portanti .grande { padding-inline: 0.7em; }
  .marchi-hero .comprimarie li { padding: 0.4em 0.55em; }
  .marchi-hero .blocco ul { display: grid; gap: 1px; }
  .marchi-hero .portanti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .marchi-hero .portanti li:last-child { grid-column: span 2; }
  .marchi-hero .comprimarie { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .marchi-hero .blocco img { width: auto; height: auto; max-width: 100%; }
  .marchi-hero .portanti img { max-height: 24px; }
  .marchi-hero .portanti .grande img { max-height: 44px; }
  .marchi-hero .portanti .doppia img { max-height: 32px; }
  .marchi-hero .comprimarie img { max-height: 18px; }
  .marchi-hero .comprimarie .alta img { max-height: 26px; }
}

/* ============================================================
   HERO - l'olio è il tema. La targa non è più il protagonista.
   ============================================================ */
.hero {
  background: var(--nero);
  padding: var(--sp-11) 0 var(--sp-14);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% -20% -10%;
  background:
    radial-gradient(46% 42% at 74% 34%, rgba(0, 159, 224, 0.15), transparent 70%),
    radial-gradient(40% 40% at 10% 92%, rgba(249, 167, 24, 0.1), transparent 70%);
  pointer-events: none;
}
.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--sp-8);
  align-items: center;
}
.hero h1 { max-width: 16ch; margin-bottom: var(--sp-3); }
.hero h1 em { font-style: normal; color: var(--oro-chiaro); }
.hero .lead { margin-bottom: var(--sp-6); }
.hero .azioni-hero { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }

/* Il direttore d'orchestra: la vetrina si posa, poi arriva il testo. */
@keyframes sale { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes appare { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero .vetrina { animation: appare 1s var(--molla) both; }
  .hero h1, .hero .lead, .hero .azioni-hero, .hero .marchi-hero {
    animation: sale 0.75s var(--molla) both;
  }
  .hero h1 { animation-delay: 0.55s; }
  .hero .lead { animation-delay: 0.7s; }
  .hero .azioni-hero { animation-delay: 0.85s; }
  .hero .marchi-hero { animation-delay: 1.05s; }
}

/* ============================================================
   TARGA - un oggetto solo: la freccia sta DENTRO la targa,
   non un input più un bottone appiccicati di fianco.
   ============================================================ */
.targa-form { display: inline-flex; flex-direction: column; gap: 0.8rem; }
/* In home la targa sta sotto un titolo centrato: senza questo, la larghezza
   del form la detta la NOTA (più larga della targa) e la targa pende a sinistra. */
.targa-form.centrata { align-items: center; }
.targa-form.centrata .targa-nota { text-align: center; }
.targa-plate {
  display: flex;
  align-items: stretch;
  width: fit-content;   /* banda + targa + freccia, e NIENTE oltre la freccia */
  background: #fff;
  border-radius: 11px;
  overflow: hidden;
  height: 76px;
  box-shadow: 0 0 0 3px #0e0f11, 0 18px 40px -14px rgba(0, 0, 0, 0.75);
}
.targa-plate .banda {
  width: 40px;
  background: #003399;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 6px;
  flex-shrink: 0;
}
.targa-plate .banda svg { width: 22px; height: 22px; }
.targa-plate .banda .paese { color: #fff; font-family: var(--mono); font-weight: 600; font-size: 16px; line-height: 1; }
.targa-plate input {
  border: 0;
  outline: 0;
  width: 250px;
  max-width: 46vw;
  padding: 0 0.6em;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;   /* la targa vera ha la scritta centrata: anche qui */
  color: #14171a;
  background: #fff;
}
.targa-plate input::placeholder { color: #8b939f; }
.targa-plate button {
  border: 0;
  background: var(--blu-solido);
  color: #fff;
  width: 66px;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 22px;
  transition: background 0.2s ease;
}
.targa-plate button:hover { background: var(--blu-solido-su); }
.targa-plate:focus-within { box-shadow: 0 0 0 3px #0e0f11, 0 0 0 6px var(--oro); }

/* Mentre si cerca (in produzione la ricerca sul DB dura ~2 s): la freccia
   diventa un anello che gira e la targa non si può ritoccare. */
.targa-form.caricamento .targa-plate button {
  color: transparent;
  position: relative;
  pointer-events: none;
}
.targa-form.caricamento .targa-plate button::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: anello 0.7s linear infinite;
}
.targa-form.caricamento .targa-plate input { color: #9aa1ab; }
.targa-form.caricamento .targa-nota { opacity: 0.55; }
@keyframes anello { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .targa-form.caricamento .targa-plate button::after { animation-duration: 1.4s; }
}
.targa-nota { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.06em; color: var(--muto); }
.targa-nota a { color: var(--blu-link); }

/* il fantasma della demo: mostra da sé come si usa, senza player.
   Scrive nel PLACEHOLDER, non nel valore: così non può finire spedito. */
.targa-plate input.fantasma::placeholder { color: #b9c0c9; }

/* ============================================================
   FOTOGRAFIA
   Le foto passano tutte per lo stesso trattamento in fase di
   preparazione (desaturate, virate verso l'ambra, velate di
   antracite): così la pagina sembra fatta di una materia sola e
   non un collage. Qui si occupano solo della forma.
   ============================================================ */
.foto {
  margin: 0;
  border-radius: var(--r-l);
  overflow: hidden;
  position: relative;
  background: var(--su);
}
.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.foto figcaption,
.foto .foto-eti {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.2rem 1.4rem 1.1rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(transparent, rgba(16, 16, 15, 0.82));
}

/* fascia larga: una sola immagine che dà respiro alla pagina */
.fascia-foto { aspect-ratio: 21 / 9; }

/* striscia: tre immagini che raccontano il mestiere */
.striscia-foto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}
.striscia-foto .foto { aspect-ratio: 4 / 5; }

/* affiancata al testo, nelle pagine di contenuto */
.foto-a-fianco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--sp-6);
  align-items: center;
}
.foto-a-fianco .foto { aspect-ratio: 4 / 3; }

@media (max-width: 860px) {
  .striscia-foto { grid-template-columns: 1fr; }
  .striscia-foto .foto { aspect-ratio: 16 / 10; }
  .fascia-foto { aspect-ratio: 4 / 3; }
  .foto-a-fianco { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ============================================================
   INFOGRAFICA - come si legge un grado SAE.
   È il mestiere dell'azienda messo in figura: consulenza, non SaaS.
   ============================================================ */
.grado-spiegato {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
  max-width: 980px;
}
.grado-grande {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(52px, 9vw, 104px);
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex;
  align-items: baseline;
}
.grado-grande span { position: relative; transition: color 0.25s ease; }
.grado-grande .pz-freddo { color: var(--blu-link); }
.grado-grande .pz-caldo { color: var(--oro-testo); }
/* La W non è un valore: sta bassa di tono, ma è pur sempre la parte "fredda"
   del grado, quindi è un blu - il fratello scuro di quello del 5, non un
   grigio. Il trattino invece è solo un segno: resta neutro. */
.grado-grande .pz-w { color: var(--blu-quieto); }
.grado-grande .pz-tratto { color: var(--neutro); }
.spiega { display: flex; flex-direction: column; gap: var(--sp-3); }
.spiega .riga { display: flex; gap: var(--sp-3); align-items: baseline; }
/* Il marcatore ripete il pezzo del grado con lo stesso colore: è il filo che
   lega la figura grande alle tre righe. Piccolo non si vedeva. */
.spiega .chi {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
  width: 46px;
  flex-shrink: 0;
  text-align: right;
}
.spiega .riga.freddo .chi { color: var(--blu-link); }
.spiega .riga.w .chi { color: var(--blu-quieto); }
.spiega .riga.caldo .chi { color: var(--oro-testo); }
.spiega .riga p { font-size: var(--t-body); color: var(--muto-alto); }
.spiega .riga strong { display: block; font-size: var(--t-body); margin-bottom: 2px; }

/* ============================================================
   SCALA DELLE VISCOSITÀ
   ============================================================ */
.viscosimetro { max-width: 720px; }
.corsia {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.85rem 0.6rem;
  margin-inline: -0.6rem;
  border-radius: var(--r-s);
  border-bottom: 1px solid var(--hairline);
  transition: background 0.18s ease;
}
.corsia:last-child { border-bottom: 0; }
.corsia:hover { background: var(--su); }
.corsia .grado {
  font-family: var(--mono);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--forte);
  white-space: nowrap;
}
/* La gara: TUTTE le corsie partono insieme e hanno lo STESSO tempo; cambia
   quanto lontano arriva l'olio. È il significato fisico della viscosità - a
   parità di tempo il fluido scorre più del denso - e si legge solo se le
   corsie sono sincronizzate. Prima ognuna aveva una durata sua, quindi
   andavano a sfasarsi e il confronto sparuto dopo due giri. */
.corsia .pista {
  position: relative;
  height: 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--muto) 26%, transparent);
  overflow: hidden;
}
/* il traguardo: dove quell'olio arriverà, sempre visibile */
.corsia .pista::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--corsa, 60%);
  border-radius: 6px;
  background: color-mix(in srgb, var(--oro) 22%, transparent);
}
/* la colata: cresce fino al traguardo, poi svanisce e si riparte insieme */
.corsia .pista::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--oro) 55%, transparent), var(--oro-chiaro));
  box-shadow: 0 0 12px color-mix(in srgb, var(--oro-chiaro) 55%, transparent);
  animation: cola 5.4s var(--molla) infinite;
}
.corsia .uso { font-size: var(--t-s); color: var(--muto); text-align: right; }
@keyframes cola {
  0%, 4%    { width: 0;                  opacity: 1; }
  58%       { width: var(--corsa, 60%);   opacity: 1; }
  86%       { width: var(--corsa, 60%);   opacity: 1; }
  97%, 100% { width: var(--corsa, 60%);   opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* fermo resta il traguardo, che è il dato: la colata era solo il modo di dirlo */
  .corsia .pista::after { animation: none; width: var(--corsa, 60%); opacity: 0.55; }
}

/* ============================================================
   GRIGLIE E CARD
   ============================================================ */
.griglia { display: grid; gap: var(--sp-2); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.riempi { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: var(--su);
  border-radius: var(--r-m);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 180px;
  position: relative;
  transition: transform 0.24s var(--molla), background 0.22s ease;
}
a.card:hover { transform: translateY(-4px); }

/* L'icona del settore: un'illustrazione di famiglia (tratto 2, terminali
   tondi, tutte sulla stessa linea di terra), quieta nell'angolo basso a
   destra. Monocroma per costruzione: currentColor prende il muto del
   pannello, quindi chiara su scuro e scura su crema. */
.icona-settore {
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 36px;
  height: 36px;
  color: var(--muto);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.24s var(--molla);
}
a.card:hover .icona-settore { opacity: 0.9; transform: translateY(-2px); }
.p-nero a.card:hover { background: #2f2f2d; }
.p-crema a.card:hover { background: #ded9cd; }
.card h3 { color: var(--forte); }
.card p { font-size: var(--t-s); flex: 1; }
.card .piede { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.3rem; }
.card .marca {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blu-link);
}

/* ritratto nelle card del team: tondo, misura fissa, sopra il nome */
.card .ritratto {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.35rem;
}
/* il segnaposto del ritratto: le iniziali in un tondo, finche' la foto
   non arriva. Mai il volto di qualcun altro al posto della persona. */
.card .ritratto-vuoto {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--su);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--oro-testo);
}

.visco {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  padding: 0.24em 0.65em;
  border-radius: 7px;
  background: var(--oro);
  color: #241c07;
}
.visco.blu { background: var(--blu-solido); color: #fff; }
.sigla {
  font-family: var(--mono);
  font-size: var(--t-micro);
  padding: 0.26em 0.6em;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--muto);
}
.p-crema .sigla { background: rgba(28, 28, 27, 0.06); color: #54514b; }
/* La foto del prodotto nella sua scheda: carta bianca, perche' gli scatti
   dei produttori hanno il fondo bianco o trasparente e sul crema si
   perderebbero. L'immagine non si deforma mai: si adatta dentro il riquadro. */
.scheda-foto {
  background: #fff;
  border-radius: 14px;
  padding: 1.4rem;
  margin-bottom: var(--sp-6);
  max-width: 360px;
  box-shadow: inset 0 0 0 1px rgba(20, 23, 26, 0.1);
}
.scheda-foto img { display: block; width: 100%; height: 260px; object-fit: contain; }
@media (max-width: 760px) { .scheda-foto { max-width: 100%; } .scheda-foto img { height: 200px; } }

/* "+24": quante approvazioni restano fuori dall'elenco. Non e' una sigla,
   e' un conto: si vede che ce ne sono altre senza fingere di dirle. */
.sigla.altre { background: none; box-shadow: inset 0 0 0 1px var(--hairline); }

/* ============================================================
   LISTINO
   ============================================================ */
.listino { border-top: 1px solid var(--hairline); }
/* Ogni prodotto e' una voce: la riga e, sotto, la tendina che la freccia
   apre (Renato, 23/10/2026). La riga porta alla scheda perche' il link del
   nome la copre tutta (::after); la freccia e' un bottone e sta sopra. */
.listino .voce { border-bottom: 1px solid var(--hairline); transition: background 0.14s ease; }
.listino .voce:hover, .listino .voce.aperta { background: var(--su); }
.listino .riga {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1.5fr) 104px minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 1.05rem var(--sp-2);
}
.listino .nome::after { content: ""; position: absolute; inset: 0; }
/* l'anello del fuoco gira intorno alla riga, che e' il bersaglio vero */
.listino .nome:focus-visible { outline: none; }
.listino .nome:focus-visible::after { outline: 2px solid var(--anello); outline-offset: -2px; border-radius: 4px; }
.listino .intesta {
  display: grid;
  grid-template-columns: 190px minmax(0, 1.5fr) 104px minmax(0, 1fr) auto;
  gap: var(--sp-3);
  padding: 0 var(--sp-2) 0.7rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muto);
}
.listino .cod { font-family: var(--mono); font-size: 11.5px; letter-spacing: -0.01em; color: var(--muto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listino .nome { font-size: var(--t-lead); font-weight: 500; color: var(--forte); letter-spacing: -0.022em; }
.listino .nome .marca { display: block; margin-bottom: 3px; }
.listino .sigle { display: flex; flex-wrap: wrap; gap: 0.25rem; }
/* La freccia in fondo alla riga: era un segno, ora e' un bottone tondo come
   la freccia indietro delle briciole. Apre la tendina e si gira verso l'alto. */
.listino .va {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--blu-link);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.listino .va::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.listino .va:hover, .listino .va[aria-expanded="true"] { background: var(--blu-solido); color: #fff; box-shadow: none; }
.listino .va svg { transition: transform 0.28s var(--molla); }
.listino .va[aria-expanded="true"] svg { transform: rotate(180deg); }
/* La tendina: la foto della scheda su carta bianca nella colonna del codice,
   i formati e i bottoni della scheda in quella del nome. Senza foto la
   colonna resta vuota, cosi' i bottoni stanno sempre sotto il nome. */
.listino .tendina {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  padding: 0.15rem var(--sp-2) 1.5rem;
}
.listino .tendina[hidden] { display: none; }
.tendina-foto {
  background: #fff;
  border-radius: 12px;
  padding: 0.85rem;
  box-shadow: inset 0 0 0 1px rgba(20, 23, 26, 0.1);
}
.tendina-foto img { width: 100%; height: 150px; object-fit: contain; }
.tendina-corpo { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-width: 0; }
.tendina-formati { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.04em; color: var(--muto-alto); }
.tendina-formati .etichetta { color: var(--muto); letter-spacing: 0.14em; text-transform: uppercase; margin-right: 0.9em; }
.tendina .azioni { margin-top: 0; gap: 0.5rem; }
.tendina .btn { font-size: var(--t-s); padding: 0.62em 1.15em; }
.tendina .link-freccia { font-size: var(--t-s); }

.paginazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.paginazione .dove {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muto);
  order: 2;
}
.paginazione a:first-child { order: 1; }
.paginazione a:last-child { order: 3; margin-left: auto; }

/* ============================================================
   FILTRI E PASTIGLIE - le marche vanno grandi: sono un
   argomento di vendita, non un tag
   ============================================================ */
/* I filtri del catalogo sono UN oggetto a celle, ma nella materia della
   pagina e non in quella della targa: il bianco della targa ha senso su una
   targa, qui era una lastra che si staccava dal resto e, larga quanto il suo
   contenuto, andava a capo da sola lasciando il bottone orfano su una riga.
   Ora le celle sono del colore "su" (lo stesso delle righe del listino su
   telefono), il giunto da 1px è il fondo dell'oggetto che affiora fra le
   celle (come nei marchi della hero), e l'oggetto è largo quanto il listino
   che ha sotto. Ogni cella ha la sua etichetta in mono, nella stessa voce
   dell'intestazione del listino. Risalta per il blu del bottone e per
   l'anello d'oro al fuoco, non per il contrasto. La griglia ha una
   disposizione per ogni larghezza e nessuna cella vuota in nessuna. */
.ricerca { margin-bottom: var(--sp-2); }
/* Le etichette sopra la ricerca (Renato, 23/10/2026): le pastiglie della
   paginazione, un po' piu' piccole; quella accesa e' blu e col ✕ si spegne. */
.etichette { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sp-3); }
.etichette .pastiglia { flex: none; font-size: var(--t-s); padding: 0.55em 1.1em; white-space: nowrap; }
.etichette .togli { margin-left: 0.55em; font-size: 0.85em; }
/* I risultati cominciano dove finiscono i filtri: il conto stretto sotto
   l'oggetto, il listino piu' giu'. Senza il conto il listino tiene la sua
   distanza (i margini si fondono con quello della ricerca). */
.risultati > .listino, .risultati > .avviso { margin-top: var(--sp-6); }
.filtri {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)) auto;
  gap: 1px;
  background: var(--hairline);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--hairline), 0 22px 44px -18px rgba(0, 0, 0, 0.7);
  color-scheme: dark;   /* la tendina nativa delle select resta scura */
  transition: box-shadow 0.2s ease;
}
.filtri:focus-within { box-shadow: 0 0 0 1px var(--hairline), 0 0 0 4px var(--oro); }
.filtri .cella {
  position: relative;
  display: block;
  min-width: 0;
  background: var(--su);
  transition: background 0.18s ease;
}
.filtri .cella:hover, .filtri .cella:focus-within { background: #2e2e2c; }
.filtri .etichetta {
  position: absolute;
  top: 0.85rem;
  left: 1.1rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--muto);
  pointer-events: none;   /* il clic passa al campo sotto: tutta la cella è il campo */
  transition: color 0.18s ease;
}
.filtri .cella:focus-within .etichetta { color: var(--oro-testo); }
.filtri input[type="text"], .filtri select {
  display: block;
  width: 100%;
  height: 100%;
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.4;
  padding: 2.05rem 1.1rem 0.8rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--forte);
  text-overflow: ellipsis;
}
.filtri input::placeholder { color: var(--muto); opacity: 1; }
.filtri select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
  /* la freccia disegnata, all'altezza del valore e non della cella */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2398938b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1.15rem bottom 1.3rem;
}
.filtri select option { background: var(--nero-alto); color: var(--crema); }
.filtri .btn {
  border-radius: 0;
  box-shadow: none;
  justify-content: center;
  padding: 0 2.1em;
}
/* dentro l'oggetto niente anelli singoli (verrebbero tagliati dal clip):
   parla il focus-within dell'oggetto intero, e la cella si schiarisce */
.filtri :focus-visible { outline: none; }
.filtri .btn:focus-visible { background: var(--blu-solido-su); }

/* Sotto l'oggetto, solo a filtri accesi: quanti prodotti e come tornare a
   tutti. Stava dentro l'oggetto come sesta cella, che compariva e spariva
   cambiandone la forma. */
.filtri-esito {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 0 var(--sp-2);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muto);
}
.filtri-esito a { color: var(--blu-link); }
.filtri-esito a:hover { color: var(--forte); }

/* Sotto i 1180px quattro campi in fila non ci stanno più senza tagliare i
   valori lunghi ("Trasmissione e cambio"): la ricerca prende la prima riga
   intera, le tre tendine e il bottone la seconda. */
@media (max-width: 1180px) {
  .filtri { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .filtri .cerca { grid-column: 1 / -1; }
}
/* Sotto i 900px le tendine vanno a due a due, e il bottone chiude la
   griglia accanto all'ultima. */
@media (max-width: 900px) {
  .filtri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtri .btn { min-height: 3.6rem; }
}

.campo input, .campo textarea {
  font-family: var(--sans);
  font-size: var(--t-body);
  padding: 0.78em 1em;
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-s);
  background: var(--su);
  color: inherit;
}
.campo input:focus-visible, .campo textarea:focus-visible,
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--anello);
  outline-offset: 2px;
}

.pastiglie { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pastiglia {
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: -0.015em;
  padding: 0.62em 1.25em;
  border-radius: 999px;
  background: var(--su);
  color: inherit;
  transition: background 0.18s ease, color 0.18s ease, transform 0.16s var(--molla);
}
.pastiglia:hover { background: var(--blu-solido); color: #fff; transform: translateY(-2px); }
.pastiglia.attiva { background: var(--blu-solido); color: #fff; }
.pastiglia.ferma {
  cursor: default;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--hairline);
  color: var(--muto);
}
.pastiglia.ferma:hover { background: transparent; color: var(--muto); transform: none; }

/* muro delle marche: nomi grandi, non etichettine */
.muro-marche { display: flex; flex-wrap: wrap; gap: 0.5rem 2.2rem; align-items: baseline; }
.muro-marche a {
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--muto);
  transition: color 0.22s ease;
}
.muro-marche a:hover { color: var(--forte); }
.muro-marche .tutte { color: var(--blu-link); font-size: var(--t-lead); }

/* ============================================================
   SCHEDA VEICOLO
   ============================================================ */
.veicolo { background: var(--su); border-radius: var(--r-l); overflow: hidden; }
.veicolo .vv {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(100deg, #0d3c57, var(--blu-solido));
  color: #fff;
}
.veicolo .vv .t {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.1em;
  background: #fff;
  color: #14171a;
  border-radius: 6px;
  padding: 0.22em 0.65em;
  border-left: 8px solid #003399;
}
.veicolo .vv h2 { font-size: var(--t-h3); color: #fff; }
.veicolo dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.veicolo .r { display: flex; gap: var(--sp-2); padding: 0.9rem var(--sp-4); border-top: 1px solid var(--hairline); }
.veicolo dt {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muto);
  width: 120px;
  flex-shrink: 0;
  padding-top: 0.25em;
}
.veicolo dd { font-size: var(--t-s); font-weight: 500; color: var(--forte); display: flex; gap: 0.3rem; flex-wrap: wrap; }

/* ============================================================
   SCHEDA PRODOTTO
   ============================================================ */
/* Sopra le briciole metà dello spazio di prima (Renato, 22/10/2026): la
   scheda comincia subito sotto la barra. Lo stesso nei settori, sotto. */
.prodotto-testata {
  background: var(--nero);
  padding: var(--sp-4) 0 var(--sp-6);
  position: relative;
  overflow: hidden;
}
.prodotto-testata::before {
  content: "";
  position: absolute;
  inset: -50% -8% -50% 38%;
  background: radial-gradient(32% 32% at 58% 52%, rgba(249, 167, 24, 0.13), transparent 72%);
  pointer-events: none;
}
.prodotto-testata .wrap { position: relative; }
.prodotto-testata h1 { margin: 0.45rem 0 var(--sp-2); max-width: 22ch; }
/* La marca sopra il titolo e il grado sotto: la stessa voce, ognuna col suo
   colore. L'occhiello da 12px, misura delle briciole, sotto il titolo spariva. */
.marca-grande { display: block; margin-top: var(--sp-3); font-family: var(--mono); font-size: 24px; line-height: 1.25; font-weight: 500; color: var(--blu-link); letter-spacing: 0.05em; text-transform: uppercase; }
.visco-grande { font-family: var(--mono); font-size: 24px; font-weight: 500; color: var(--oro-chiaro); letter-spacing: 0.05em; }
.briciole { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grigio); }
/* la freccia a sinistra e il percorso nella sua colonna: quando va a capo (sul
   telefono un codice lungo), la seconda riga si allinea sotto la prima invece
   di cominciare stretta sotto la freccia, e la freccia sta a meta' delle due
   (Renato, 22/10/2026) */
.briciole:has(.indietro) { display: flex; align-items: center; gap: 0.75em; }
.briciole .percorso { min-width: 0; line-height: 1.8; }
/* le voci sono link e si devono vedere: in demo Giulio, dalla scheda di un
   prodotto, non trovava come tornare al catalogo (Renato, 22/10/2026) */
.briciole a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; }
.briciole a:hover { color: var(--crema); }
/* la freccia indietro: un tondo col contorno come i bottoni della scheda; il
   disegno misura 32px, il bersaglio 44 (il pollice) */
.briciole .indietro {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  vertical-align: middle;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--hairline);
  color: var(--crema);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.briciole .indietro::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.briciole .indietro:hover { background: var(--su); }
.azioni { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: var(--sp-4); }

/* ── la pagina di un documento: il PDF con la barra dei controlli in cima ──
   (Renato, 22/10/2026) La barra resta sempre in vista, i fogli scorrono sotto.
   Su un telefono da 375px i tre bottoni stanno in una riga sola. */
body:has(.documento) { background: var(--nero); }
.documento { min-height: 100vh; min-height: 100dvh; }
.doc-barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nero);
  border-bottom: 1px solid var(--hairline);
  padding: 0.6rem var(--sp-2) 0.55rem;
}
.doc-comandi, .doc-titolo, .doc-pagine { max-width: 900px; margin-inline: auto; }
.doc-comandi { display: flex; align-items: center; gap: 0.5rem; }
.doc-comandi .doc-indietro { margin-right: auto; }
.doc-barra .btn { font-size: 15px; padding: 0.6em 0.95em; gap: 0.4em; }
/* Condividi e' verde perche' ricordi WhatsApp, l'app con cui lo si manda di
   piu' (Renato, 22/10/2026); il testo scuro, perche' il bianco su quel verde si
   legge a 2:1 */
.doc-barra .doc-condividi { background: #25d366; color: #06301a; font-weight: 600; box-shadow: none; }
.doc-barra .doc-condividi:hover { background: #3ee07a; }
.doc-titolo {
  margin-top: 0.45rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--muto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-titolo .doc-tipo { color: var(--oro); text-transform: uppercase; letter-spacing: 0.1em; margin-right: 0.4em; }
.doc-pagine { display: flex; flex-direction: column; gap: 12px; padding: var(--sp-2) var(--sp-2) var(--sp-8); }
.doc-pagina { display: block; width: 100%; height: auto; background: #fff; border-radius: 2px; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); }
.doc-stato { text-align: center; padding: var(--sp-8) var(--sp-2); color: var(--crema); }
.doc-stato a { text-decoration: underline; }
@media (max-width: 380px) {
  .doc-barra .btn { font-size: 14px; padding: 0.55em 0.75em; }
}

.dati { border-top: 1px solid var(--hairline); }
.dati .r { display: flex; gap: var(--sp-3); padding: 1rem var(--sp-2); border-bottom: 1px solid var(--hairline); }
.dati dt {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muto);
  width: 176px;
  flex-shrink: 0;
  padding-top: 0.35em;
}
.dati dd { font-size: var(--t-body); display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
/* i codici del gestionale: uno per riga, col formato in tono basso accanto */
.dati dd.elenco { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.dati dd.elenco .formato { color: var(--muto); }
/* gli articoli in esaurimento (Roberto, 21/10/2026): un cartellino oro sulla
   riga del formato e, sotto, il prodotto che lo sostituisce. Il blu e' l'azione */
.esaurimento {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oro-testo);
  border: 1px solid currentColor;
  border-radius: 7px;
  padding: 0.12em 0.55em;
  white-space: nowrap;
}
.dati dd.elenco .sostituto { display: block; font-size: var(--t-s); color: var(--muto); }
.sostituto a, .avviso-esaurimento a { color: var(--blu-link); }
.avviso-esaurimento { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: var(--sp-2); color: var(--muto-alto); }

/* ============================================================
   NUMERI E TESTIMONIANZE
   ============================================================ */
.numeri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.numeri > div { background: var(--su); border-radius: var(--r-m); padding: var(--sp-4); }
.numeri .n {
  font-family: var(--mono);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--oro-testo);
  display: block;
  line-height: 1;
}
.numeri .e { font-size: var(--t-s); color: var(--muto); margin-top: 0.65rem; }

.testi blockquote { font-size: var(--t-lead); line-height: 1.45; color: var(--muto); letter-spacing: -0.012em; }
.testi blockquote cite {
  display: block;
  margin-top: var(--sp-3);
  /* aria sotto la firma: senza, la citazione successiva sembra
     appartenere a chi ha firmato quella sopra */
  margin-bottom: 1.5rem;
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blu-link);
}

/* ============================================================
   BRAND - logo, nome con le azioni ACCANTO (non sperse a destra),
   e l'anteprima di tre prodotti con la loro foto
   ============================================================ */
.brand-riga {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--hairline);
}
.brand-riga:first-child { border-top: 1px solid var(--hairline); }
.b-logo {
  width: 108px;
  height: 76px;
  border-radius: var(--r-s);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  font-size: 30px;
  font-weight: 600;
  color: var(--oro-testo);
}
/* l'immagine occupa tutto il riquadro e il logo ci sta dentro, centrato:
   Safari ignorava max-height: 100%, e il logo verticale di Texaco, largo
   quanto il riquadro, usciva sopra e sotto (Renato, 13/10/2026) */
.b-logo img { width: 100%; height: 100%; object-fit: contain; }
.b-info h3 { font-size: clamp(24px, 2.6vw, 32px); color: var(--forte); }
.b-azioni {
  margin-top: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
/* Rete di sicurezza: con `overflow-x: clip` sul body un bottone più largo
   della sua colonna verrebbe tagliato dal viewport SENZA barra di scorrimento,
   cioè illeggibile e irraggiungibile (succedeva con «Catalogo New Holland
   Ambra» sotto i 350px). Qui non può accadere: al massimo si ellissa. */
.btn.mini {
  font-size: var(--t-s);
  padding: 0.55em 1.1em;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.b-conta {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--muto);
  white-space: nowrap;
}
/* i tre in anteprima: cartellini bianchi, foto se c'è */
.b-tre { display: flex; gap: 0.5rem; }
.b-mini {
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: var(--r-s);
  padding: 0.65rem 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  min-height: 118px;
  /* dall'alto, non centrato: foto e nome restano alla stessa altezza nei tre
     cartellini anche se uno non ha la viscosita', che scende in fondo */
  justify-content: flex-start;
  transition: transform 0.2s var(--molla);
}
.b-mini:hover { transform: translateY(-3px); }
.b-mini img { height: 58px; width: auto; max-width: 100%; object-fit: contain; }
.b-mini .nm {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--nero);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.b-mini .visco { font-size: 11px; padding: 0.18em 0.5em; margin-top: auto; }

/* ============================================================
   PROSA, FORM, AVVISI
   ============================================================ */
/* Colonne dei contatti come classe, non stile inline: uno stile inline batte
   il breakpoint e su mobile la pagina restava a due colonne. */
.contatti-colonne { grid-template-columns: 1.25fr 1fr; gap: var(--sp-8); }

.prosa { max-width: 64ch; }
.prosa p { margin-bottom: 1.15em; }
.prosa p:first-child { font-size: var(--t-lead); line-height: 1.42; color: var(--forte); }

.campo { margin-bottom: var(--sp-3); }
.campo label {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muto);
  margin-bottom: 0.45rem;
}
.campo input, .campo textarea { width: 100%; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* nessun filetto colorato a sinistra: era il timbro del kit */
.avviso {
  font-size: var(--t-body);
  padding: 1em 1.3em;
  border-radius: var(--r-m);
  margin: var(--sp-3) 0;
  background: color-mix(in srgb, var(--ok) 14%, var(--su));
  color: var(--forte);
}
.avviso.errore { background: color-mix(in srgb, var(--errore) 15%, var(--su)); }
.avviso.oro { background: color-mix(in srgb, var(--oro) 15%, var(--su)); }

/* ============================================================
   TESTATA DI PAGINA
   ============================================================ */
.pagina-testata {
  background: var(--nero);
  padding: var(--sp-11) 0 var(--sp-8);
  position: relative;
  overflow: hidden;
}
.pagina-testata::before {
  content: "";
  position: absolute;
  inset: -50% -12% -50% 25%;
  background: radial-gradient(34% 34% at 60% 50%, rgba(0, 159, 224, 0.12), transparent 72%);
  pointer-events: none;
}
.pagina-testata .wrap { position: relative; }
.pagina-testata h1 { margin: var(--sp-3) 0 var(--sp-3); max-width: 20ch; }
/* una testata che comincia con le briciole (i settori) sta piu' vicina alla
   barra, come la scheda prodotto */
.pagina-testata:has(.briciole) { padding-top: calc(var(--sp-11) / 2); }
/* nel catalogo la ricerca sta piu' vicina alla testata; sul telefono ancora
   di piu' (sotto, a 760px) */
.pagina-testata.catalogo-testata { padding-bottom: var(--sp-6); }
.p.catalogo-corpo { padding-top: var(--sp-4); }

/* ============================================================
   FOOTER - chiude col motivo delle lastre, non con un elenco
   di link e via
   ============================================================ */
footer.sito { background: var(--nero-header); color: var(--crema); --su: #1f1f1e; position: relative; overflow: hidden; }
footer.sito .wrap { padding-block: var(--sp-8) var(--sp-4); position: relative; z-index: 1; }
footer.sito .colonne { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: var(--sp-6); }
footer.sito h4 {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: var(--sp-2);
}
footer.sito ul { list-style: none; }
footer.sito li { margin-bottom: 0.6rem; font-size: var(--t-body); }
footer.sito li a { color: var(--grigio); }
footer.sito li a:hover { color: var(--crema); }
footer.sito .f-marchio { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
footer.sito .f-marchio small {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.26em;
  color: var(--oro);
  margin-top: 3px;
}
footer.sito .recapiti { font-size: var(--t-s); color: var(--grigio); margin-top: var(--sp-3); line-height: 1.75; }
footer.sito .recapiti a { color: var(--grigio); }
footer.sito .recapiti a:hover { color: var(--crema); }
footer.sito .piede {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline-scuro);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: #8f8a82;
}
/* il motivo: le stesse lastre dell'hero, in filigrana, che chiudono il giro */
.motivo-footer {
  position: absolute;
  right: -11%;
  bottom: -46%;
  width: min(34%, 340px);
  opacity: 0.85;
  aspect-ratio: 1 / 1;
  transform: rotate(45deg);
  border-radius: var(--r-l);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.05), transparent 60%),
    #1d1d1c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.motivo-footer::before, .motivo-footer::after {
  content: "";
  position: absolute;
  border-radius: 18px;
  inset: 26% 26% auto auto;
  width: 46%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(140deg, rgba(249, 167, 24, 0.5), rgba(58, 36, 5, 0.6));
}
.motivo-footer::after {
  inset: auto auto 24% 22%;
  background: linear-gradient(140deg, rgba(0, 159, 224, 0.42), rgba(7, 31, 46, 0.6));
}

/* ============================================================
   COMPARSA ALLO SCROLL
   È il JS a nascondere: senza JS, o con reduced-motion, il
   contenuto si vede. Il controllo è sincrono, non su rAF né su
   animation-timeline (entrambi possono non scattare e lasciare
   contenuto invisibile per sempre).
   ============================================================ */
.compare.attesa { opacity: 0; transform: translateY(18px); }
.compare.vista {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.6s var(--molla);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .hero .wrap { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero h1 { max-width: 18ch; }
  .hero .vetrina { order: -1; max-width: min(74vw, 330px); }
  .g4, .numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer.sito .colonne { grid-template-columns: 1fr 1fr; }
  .grado-spiegato { grid-template-columns: 1fr; gap: var(--sp-4); }
}

@media (max-width: 920px) {
  nav.principale, .telefono-header { display: none; }
  .apri-menu { display: inline-flex; }
}

@media (max-width: 860px) {
  :root { --sp-14: 4.5rem; --sp-11: 3.5rem; }
  .g3, .g2, .contatti-colonne { grid-template-columns: 1fr; }
  .listino .intesta { display: none; }
  /* il codice in alto con la freccia accanto, sotto nome e viscosita', poi
     le sigle; la freccia sborda nel margine della riga per non allungarla */
  .listino .riga { grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem var(--sp-2); padding-block: 1rem; }
  .listino .cod { grid-row: 1; grid-column: 1; }
  .listino .va { grid-row: 1; grid-column: 2; justify-self: end; width: 36px; height: 36px; margin-block: -0.45rem; }
  .listino .nome { grid-row: 2; grid-column: 1; }
  .listino .vis { grid-row: 2; grid-column: 2; justify-self: end; }
  .listino .sigle { grid-row: 3; grid-column: 1 / -1; }
  .listino .tendina { grid-template-columns: 150px minmax(0, 1fr); gap: var(--sp-2); }
  .tendina-foto img { height: 130px; }
  .veicolo dl { grid-template-columns: 1fr; }
  .brand-riga { grid-template-columns: 88px minmax(0, 1fr); row-gap: var(--sp-2); }
  .b-logo { width: 88px; height: 60px; font-size: 24px; padding: 8px; }
  /* Nella colonna stretta il bottone resta su UNA riga: il nome della marca
     esce dall'etichetta (è già nel titolo qui sopra, ripeterlo non serve) e
     resta nell'aria-label per chi legge con la voce. */
  .btn.mini { font-size: 13px; padding: 0.5em 0.95em; }
  .b-nome-btn { display: none; }
  /* l'anteprima scende sotto, a tutta larghezza, sempre su una riga */
  .b-tre { grid-column: 1 / -1; }
  .dati dt, .veicolo dt { width: 130px; }
  .motivo-footer { width: 62%; bottom: -40%; }
}

@media (max-width: 760px) {
  .hero { padding-top: var(--sp-6); }
  .g4, .numeri { grid-template-columns: 1fr; }
  /* 16px: sotto questa misura iOS Safari zooma al focus e non torna indietro */
  .filtri input[type="text"], .filtri select, .campo input, .campo textarea { font-size: 16px; }

  /* La targa si adatta alla riga invece di avere misure fisse che sfondano:
     era l'unico oggetto del sito con larghezze in pixel. */
  .targa-form { display: flex; width: 100%; }
  .targa-plate { height: 66px; width: 100%; }
  .targa-plate input { font-size: clamp(22px, 7.4vw, 30px); width: auto; max-width: none; flex: 1; min-width: 0; }
  .targa-plate button { width: 54px; }
  .targa-nota { text-align: left; }

  /* Il listino diventa una scheda toccabile per prodotto: il tocco ha un
     bersaglio grande e le righe non si confondono fra loro. La tendina sta
     dentro la stessa scheda. */
  .listino { border-top: 0; }
  .listino .voce {
    background: var(--su);
    border: 0;
    border-radius: var(--r-m);
    margin-bottom: 0.55rem;
  }
  .listino .riga { padding: 1rem 1.1rem; }
  .listino .nome { font-size: var(--t-body); }
  /* nella colonna stretta la tendina e' un menu: la foto in alto, poi i
     bottoni a tutta riga, uno sotto l'altro come le voci di un elenco */
  .listino .tendina { grid-template-columns: minmax(0, 1fr); padding: 0 1.1rem 1.1rem; }
  .tendina-corpo { grid-column: 1; }
  .tendina-foto img { height: 140px; }
  .tendina .azioni { flex-direction: column; align-items: stretch; width: 100%; }
  .tendina .btn { justify-content: center; }

  /* Sul telefono le etichette si vedono tutte: righe piene, larghe quanto i
     filtri sotto, come un testo giustificato, e l'ultima riga resta alla sua
     misura (lo spazio lo prende ::after). La fila che scorreva di lato ne
     mostrava due e mezza, e la ricerca stava 80px sotto il sottotitolo
     (Renato, 23/10/2026): ora 32, e 16 fra etichette e filtri. */
  .pagina-testata.catalogo-testata { padding-bottom: 1.25rem; }
  .p.catalogo-corpo { padding-top: 0.75rem; }
  .etichette { gap: 0.45rem; margin-bottom: var(--sp-2); }
  .etichette::after { content: ""; flex: 10 1 0; margin-left: -0.45rem; }
  .etichette .pastiglia { flex: 1 1 auto; font-size: 14px; padding: 0.6em 0.85em; text-align: center; }
  .etichette .pastiglia:hover { transform: none; }

  .muro-marche { gap: 0.4rem 1.2rem; }
  .grado-grande { font-size: clamp(46px, 15vw, 76px); }
  .spiega .chi { font-size: 19px; width: 38px; }

  footer.sito .colonne { grid-template-columns: 1fr; }
  .corsia { grid-template-columns: 92px 1fr; }
  .corsia .uso { grid-column: 2; text-align: left; }
}

@media (max-width: 560px) {
  /* le etichette prendevano metà riga e i dati si spezzavano: si impilano */
  .dati .r, .veicolo .r { flex-direction: column; gap: 0.25rem; }
  .dati dt, .veicolo dt { width: auto; padding-top: 0; }
  /* i filtri in colonna: una cella per riga, il giunto passa sopra da sé */
  .filtri { grid-template-columns: 1fr; }
  .filtri-esito { padding: 0 0.2rem; }
}

/* La 404 (templates/404.html): la sola ricerca, col bottone accanto, a ogni
   larghezza. Con le regole dei filtri del catalogo la cella prenderebbe la
   prima colonna (o una riga intera) e il bottone resterebbe a metà. */
.filtri.solo-ricerca { grid-template-columns: minmax(0, 1fr) auto; }
.filtri.solo-ricerca .cerca { grid-column: auto; }
.filtri.solo-ricerca .btn { padding: 0 1.4em; }   /* sul telefono il campo resta largo */