/* =====================================================================
   Chinello Moto — design system
   Un canvas, un accento (azzurro Suzuki) declinato in sfumature,
   due famiglie tipografiche, scala 8, raggio blocco 30px, una easing.
   ===================================================================== */

:root{
  /* ---- superfici (schiarite del 20% di luminosità HSL) ---- */
  --void:#2F3549;
  --void-2:#303951;
  --surface:#354059;
  --surface-2:#394A68;
  --glass:rgba(55,72,105,.62);

  /* ---- inchiostro ---- */
  --ink:#EFF3F8;
  --ink-soft:#C4CDDA;
  --grey:#A6AEBB;       /* schiarito insieme agli sfondi: 4,63:1 su --surface, resta sopra WCAG AA */
  --grey-dim:#A7ADBB;   /* idem: 4,60:1 su --surface — sotto non passa WCAG AA */

  /* ---- accento: azzurro Suzuki ---- */
  --accent:#00A6ED;
  --accent-hi:#4FC8FF;
  --accent-deep:#0057B8;
  --accent-ink:#04121A;
  --grad-accent:linear-gradient(135deg,#4FC8FF 0%,#00A6ED 46%,#0057B8 100%);
  /* variante per le superfici che portano testo scuro sopra:
     resta sempre sopra 4,5:1 con --accent-ink, il blu profondo no (2,76:1) */
  --grad-btn:linear-gradient(135deg,#6FD3FF 0%,#00A6ED 52%,#008CCB 100%);
  --grad-accent-soft:linear-gradient(135deg,rgba(79,200,255,.16),rgba(0,87,184,.06));
  --grad-text:linear-gradient(100deg,#EFF3F8 0%,#9FD9FF 42%,#4FC8FF 78%,#EFF3F8 100%);

  /* ---- bordi ---- */
  --hairline:rgba(140,200,255,.13);
  --hairline-hi:rgba(140,200,255,.28);

  /* ---- neon ---- */
  --neon-sm:0 0 18px rgba(0,166,237,.30);
  --neon:0 0 34px rgba(0,166,237,.42);
  --neon-lg:0 0 12px rgba(79,200,255,.55), 0 0 54px rgba(0,166,237,.42);
  --neon-text:0 0 14px rgba(79,200,255,.55), 0 0 34px rgba(0,166,237,.30);

  /* ---- ombre ---- */
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 14px 38px rgba(0,0,0,.45);
  --sh-lg:0 34px 80px rgba(0,0,0,.6);

  /* ---- spazio (scala 8) ---- */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  /* ---- raggi ---- */
  --r-in:14px;      /* input, controlli piccoli */
  --r-btn:999px;    /* bottoni e chip */
  --r-block:30px;   /* card, pannelli, blocchi — la firma del sito */
  --r-block-lg:40px;

  /* ---- tipografia ---- */
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SF Mono",Menlo,monospace;

  /* ---- motion ---- */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-ui:.4s;
  --dur-in:1.05s;

  --shell:1300px;
}

*{box-sizing:border-box;}
/* Tipografia +20%: la radice porta ogni misura in rem, i clamp hanno la
   componente vw già riscalata di pari passo. Gli spazi restano in px. */
html{scroll-behavior:smooth;overflow-x:clip;font-size:120%;}

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* atmosfera di fondo: quattro varianti scelte in admin (Testi e video →
   Aspetto), di default "aloni" — due aloni azzurri che respirano */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60vw 50vw at 8% 6%,rgba(0,166,237,.13),transparent 62%),
    radial-gradient(52vw 46vw at 96% 42%,rgba(0,87,184,.14),transparent 60%),
    radial-gradient(70vw 50vw at 50% 108%,rgba(79,200,255,.08),transparent 66%);
  animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1);}
  100%{transform:translate3d(0,-3%,0) scale(1.07);}
}
/* statico: stessi aloni, fermi */
[data-sfondo="statico"] body::before{animation:none;}
/* grana: niente aloni, la texture sotto diventa più presente */
[data-sfondo="grana"] body::before{display:none;}
[data-sfondo="grana"] .grain{opacity:.11;}
/* piatto: solo colore, nessun effetto */
[data-sfondo="piatto"] body::before{display:none;}
[data-sfondo="piatto"] .grain{display:none;}

/* grana analogica */
.grain{
  position:fixed;inset:0;z-index:80;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell{width:min(100% - 40px,var(--shell));margin-inline:auto;}

/* ===================================================== tipografia ===== */
h1,h2,h3,h4{
  font-family:var(--display);font-variation-settings:"wdth" 116;font-weight:800;
  margin:0;letter-spacing:-.022em;text-wrap:balance;
}
h1{font-size:clamp(2.5rem,7.92vw,5.4rem);line-height:.94;}
h2{font-size:clamp(1.9rem,4.56vw,3.1rem);line-height:1.02;}
h3{font-size:1.2rem;line-height:1.24;font-weight:700;font-variation-settings:"wdth" 108;}
h4{font-size:.98rem;font-variation-settings:"wdth" 104;}
p{margin:0;}
a{color:inherit;}

.eyebrow{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);
}
.eyebrow--accent{
  color:var(--accent-hi);text-shadow:var(--neon-text);
}
.lead{font-size:1.16rem;line-height:1.56;color:var(--ink-soft);max-width:58ch;}
.muted{color:var(--grey);}

/* testo in sfumatura, usato una volta per pagina */
.grad-text{
  background:var(--grad-text);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 9s linear infinite;
}
@keyframes shimmer{to{background-position:220% 0;}}

/* ======================================================= bottoni ====== */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7ch;
  font-family:var(--body);font-size:.82rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:17px 30px;border-radius:var(--r-btn);border:1px solid transparent;cursor:pointer;
  overflow:hidden;isolation:isolate;
  transition:transform var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease),
             border-color var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease);
}
.btn--primary{background:var(--grad-btn);color:var(--accent-ink);box-shadow:var(--neon);}
.btn--primary:hover{box-shadow:var(--neon-lg);transform:translateY(-2px);}
.btn--primary:active{transform:scale(.975);}
/* riflesso che attraversa il bottone */
.btn--primary::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-120%);
}
.btn--primary:hover::after{transform:translateX(120%);transition:transform .9s var(--ease);}

.btn--ghost{border-color:var(--hairline-hi);color:var(--ink);background:rgba(255,255,255,.02);}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-hi);box-shadow:var(--neon-sm);transform:translateY(-2px);}
.btn--ghost:active{transform:scale(.975);}
.btn--block{width:100%;}

/* ======================================================= navbar ======= */
.nav{
  position:sticky;top:0;z-index:70;
  background:rgba(47,53,73,.66);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--hairline);
}
.nav-in{display:flex;align-items:center;gap:var(--s3);height:76px;}
.brand{
  display:flex;align-items:center;gap:0;text-decoration:none;
  font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:800;
  font-size:1.05rem;letter-spacing:.01em;text-transform:uppercase;
}
.brand b{font-weight:800;}
.brand i{
  font-style:normal;font-size:0;align-self:center;
  width:7px;height:7px;border-radius:50%;margin-inline:5px;
  background:var(--grad-accent);box-shadow:0 0 12px rgba(0,166,237,.85);
}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);margin-left:auto;}
.nav-links>a{
  position:relative;text-decoration:none;color:var(--ink-soft);font-size:.93rem;padding:6px 0;
  white-space:nowrap;flex:0 0 auto;
  transition:color var(--dur-ui) var(--ease);
}
.nav-links>a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--grad-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);box-shadow:var(--neon-sm);
}
.nav-links>a:hover{color:var(--ink);}
.nav-links>a:hover::after,.nav-links>a[aria-current="page"]::after{transform:scaleX(1);}
.nav-links>a.nav-tel::after{display:none;}
.nav-links>a.nav-tel,.nav-tel{
  color:var(--ink);
  font-family:var(--mono);font-size:.82rem;text-decoration:none;white-space:nowrap;
  padding:11px 22px;border-radius:var(--r-btn);letter-spacing:0;flex:0 0 auto;
  border:1px solid var(--hairline-hi);
  transition:border-color var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease);
}
.nav-links>a.nav-tel:hover,.nav-tel:hover{border-color:var(--accent);color:var(--accent-hi);box-shadow:var(--neon-sm);}
.nav-burger{display:none;background:none;border:0;color:var(--ink);padding:8px;cursor:pointer;}

/* ========================================================= hero ======= */
.hero{position:relative;min-height:min(94vh,900px);display:flex;align-items:flex-end;overflow:hidden;}
.hero--interna{min-height:min(62vh,560px);}

.hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--void-2);}
/* l'iframe YouTube va sovradimensionato per coprire senza bande nere */
.hero-video iframe,.hero-video video{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.77vh;
  border:0;pointer-events:none;
}
.hero-video::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(7,8,11,.78) 0%,rgba(7,8,11,.34) 34%,rgba(7,8,11,.92) 100%),
    radial-gradient(75% 60% at 20% 80%,rgba(0,87,184,.34),transparent 70%);
}
/* fallback quando non c'è video: aurora animata */
.hero-fallback{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(50% 60% at 18% 78%,rgba(0,166,237,.30),transparent 66%),
    radial-gradient(46% 52% at 82% 26%,rgba(0,87,184,.34),transparent 62%),
    linear-gradient(180deg,#0A0F18,#07080B);
  animation:drift 22s var(--ease) infinite alternate;
}
.hero-in{position:relative;z-index:2;padding-block:clamp(44px,6.5vw,88px);width:100%;}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s7);align-items:end;}
.hero-main>*+*{margin-top:var(--s3);}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)!important;}

/* placca dati in vetro */
.plate{
  margin:0;padding:var(--s4);border-radius:var(--r-block);
  background:var(--glass);border:1px solid var(--hairline);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:var(--sh-md),inset 0 1px 0 rgba(255,255,255,.06);
}
.plate dl{margin:0;}
.plate-head{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey-dim);padding-bottom:var(--s2);border-bottom:1px solid var(--hairline);
}
.plate-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);
  padding:13px 0;border-bottom:1px solid var(--hairline);}
.plate-row:last-child{border-bottom:0;padding-bottom:0;}
.plate-row dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);}
.plate-row dd{
  margin:0;font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:700;
  font-size:1.34rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  color:var(--accent-hi);text-shadow:var(--neon-text);
}

/* nastro marchi */
.brands{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  margin-top:clamp(48px,7vw,88px);overflow:hidden;}
.brands-track{display:flex;align-items:center;gap:clamp(24px,3.4vw,56px);padding:22px 0;white-space:nowrap;}
.brands-track span{
  font-family:var(--display);font-variation-settings:"wdth" 88;font-weight:700;
  font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-dim);
  transition:color var(--dur-ui) var(--ease),text-shadow var(--dur-ui) var(--ease);cursor:default;
}
.brands-track span:hover{color:var(--accent-hi);text-shadow:var(--neon-text);}
.brands-track .lbl{font-family:var(--mono);font-weight:400;font-size:.625rem;letter-spacing:.2em;color:var(--grey-dim);}

/* ====================================================== sezioni ====== */
section{padding-block:clamp(72px,9vw,124px);position:relative;}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);
  flex-wrap:wrap;margin-bottom:var(--s5);}
.sec-head .lead{margin-top:var(--s2);}
.link-more{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-hi);text-decoration:none;white-space:nowrap;
  padding-bottom:4px;border-bottom:1px solid rgba(79,200,255,.35);
  transition:border-color var(--dur-ui) var(--ease),text-shadow var(--dur-ui) var(--ease);
}
.link-more:hover{border-color:var(--accent-hi);text-shadow:var(--neon-text);}

/* ======================================================== card ======= */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:var(--s3);}

.card{
  position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:
    radial-gradient(120% 90% at 15% -10%,rgba(79,200,255,.07),transparent 55%),
    linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--hairline);border-radius:var(--r-block);overflow:hidden;
  transition:transform var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease),
             box-shadow var(--dur-ui) var(--ease);
}
/* alone neon che si accende in hover */
.card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%,rgba(0,166,237,.28),transparent 70%);
  opacity:0;transition:opacity .5s var(--ease);
}
.card:hover{transform:translateY(-6px);border-color:var(--hairline-hi);box-shadow:var(--sh-lg),var(--neon-sm);}
.card:hover::before{opacity:1;}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}

.shot{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 120%,rgba(0,166,237,.20),transparent 60%),
    linear-gradient(180deg,#141A26,#0C0F16);
  display:grid;place-items:center;border-bottom:1px solid var(--hairline);
}
.shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease),filter .6s var(--ease);}
.card:hover .shot img{transform:scale(1.05);filter:saturate(1.1);}
.shot-mark{
  font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:800;
  font-size:clamp(1.4rem,4.8vw,2.1rem);letter-spacing:.02em;text-transform:uppercase;
  color:rgba(239,243,248,.08);transition:color .6s var(--ease),text-shadow .6s var(--ease);
}
.card:hover .shot-mark{color:rgba(79,200,255,.28);text-shadow:var(--neon-text);}

.badge{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--r-btn);
  background:rgba(47,53,73,.72);border:1px solid var(--hairline);color:var(--grey);
  backdrop-filter:blur(8px);
}
.badge--new{background:var(--grad-btn);border-color:transparent;color:var(--accent-ink);box-shadow:var(--neon-sm);}
.badge--km0{background:rgba(0,166,237,.18);border-color:var(--hairline-hi);color:var(--accent-hi);}
.badge--venduto{background:rgba(255,255,255,.08);color:var(--ink-soft);}
.badge-foto{
  position:absolute;bottom:14px;right:14px;z-index:2;left:auto;top:auto;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;
  background:rgba(47,53,73,.72);border:1px solid var(--hairline);color:var(--grey);
  padding:5px 10px;border-radius:var(--r-btn);
}

.card-body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);flex:1;}
.card-marca{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);}
.card-nota{font-size:.93rem;color:var(--grey);}
.price{
  font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:800;
  font-size:1.66rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  color:var(--accent-hi);text-shadow:var(--neon-text);
}
.price s{color:var(--grey-dim);font-size:1rem;text-shadow:none;margin-left:.6ch;font-weight:400;}

.specs{
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-top:auto;
  padding-top:var(--s2);border-top:1px solid var(--hairline);
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}
.specs i{display:block;font-style:normal;font-size:.5625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-dim);}
.specs b{display:block;color:var(--ink-soft);font-weight:500;font-size:.84rem;}

/* ==================================================== pannelli ======= */
.panel{
  border:1px solid var(--hairline);border-radius:var(--r-block);
  background:
    radial-gradient(120% 140% at 12% -12%,rgba(79,200,255,.09),transparent 55%),
    radial-gradient(90% 110% at 105% 118%,rgba(0,87,184,.08),transparent 60%),
    linear-gradient(180deg,var(--surface-2),var(--surface));
  padding:clamp(28px,3.4vw,48px);
  transition:border-color var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease);
}
.panel:hover{border-color:var(--hairline-hi);box-shadow:var(--neon-sm);}
.panel--accent{background:var(--grad-accent-soft);border-color:var(--hairline-hi);}
.panel--glass{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}

/* bordo in sfumatura — un solo blocco per pagina */
.panel--neon{
  position:relative;border-color:transparent;
  background:
    radial-gradient(120% 140% at 12% -12%,rgba(79,200,255,.12),transparent 55%),
    radial-gradient(90% 110% at 105% 118%,rgba(0,87,184,.1),transparent 60%),
    var(--surface);
}
.panel--neon::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad-accent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.panel--neon::after{
  content:"";position:absolute;inset:-14%;pointer-events:none;border-radius:inherit;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,166,237,.20),transparent 70%);
}

.split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(36px,5.4vw,84px);align-items:start;}
.split--eq{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.split--scheda{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);}

/* liste servizi */
.svc{list-style:none;margin:0;padding:0;}
.svc li{display:flex;gap:var(--s3);align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hairline);
  transition:padding-left var(--dur-ui) var(--ease);}
.svc li:first-child{border-top:1px solid var(--hairline);}
.svc li:hover{padding-left:var(--s2);}
.svc li:hover .t{color:var(--accent-hi);}
.svc .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--grey-dim);min-width:2.6ch;}
.svc .t{font-weight:500;transition:color var(--dur-ui) var(--ease);}
.svc .d{margin-left:auto;text-align:right;color:var(--grey);font-size:.93rem;}

/* passi numerati — solo dove il contenuto è davvero una sequenza */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s3);}
.step{border-top:1px solid var(--hairline);padding-top:var(--s3);}
.step::before{
  counter-increment:s;content:"0" counter(s);display:block;margin-bottom:var(--s2);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;
  color:var(--accent-hi);text-shadow:var(--neon-text);
}
.step p{color:var(--grey);font-size:.94rem;margin-top:var(--s1);}

/* timeline */
.timeline{list-style:none;margin:var(--s5) 0 0;padding:0;}
.timeline li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:var(--s4);
  padding:var(--s3) 0;border-top:1px solid var(--hairline);align-items:baseline;
  transition:background var(--dur-ui) var(--ease);}
.timeline li:last-child{border-bottom:1px solid var(--hairline);}
.timeline .yr{
  font-family:var(--display);font-variation-settings:"wdth" 120;font-weight:800;
  font-size:1.95rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  color:var(--accent-hi);text-shadow:var(--neon-text);
}
.timeline p{color:var(--ink-soft);}

/* numeri grandi */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s3);}
.stat{border:1px solid var(--hairline);border-radius:var(--r-block);padding:var(--s4);
  background:var(--grad-accent-soft);text-align:left;}
.stat .v{font-family:var(--display);font-variation-settings:"wdth" 118;font-weight:800;
  font-size:clamp(2rem,4.8vw,2.9rem);line-height:1;letter-spacing:-.03em;
  color:var(--accent-hi);text-shadow:var(--neon-text);font-variant-numeric:tabular-nums;}
.stat .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin-top:var(--s2);}

/* ========================================================= form ====== */
.form{display:grid;gap:var(--s3);}
.field{display:grid;gap:8px;}
.field label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:rgba(255,255,255,.03);border:1px solid var(--hairline);
  border-radius:var(--r-in);padding:14px 16px;width:100%;
  transition:border-color var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease),background var(--dur-ui) var(--ease);
}
.field textarea{min-height:130px;resize:vertical;}
.field select option{background:var(--surface);color:var(--ink);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:var(--neon-sm);background:rgba(0,166,237,.05);
}
.field input::placeholder,.field textarea::placeholder{color:var(--grey-dim);}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);}

.alert{border-radius:var(--r-block);padding:var(--s3) var(--s4);border:1px solid var(--hairline);
  background:var(--grad-accent-soft);}
.alert--ok{border-color:rgba(79,200,255,.45);box-shadow:var(--neon-sm);}
.alert--err{border-color:rgba(255,120,120,.45);background:rgba(255,90,90,.08);}

/* ======================================================= filtri ====== */
.filters{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s4);}
.chip{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 17px;border:1px solid var(--hairline);border-radius:var(--r-btn);
  color:var(--grey);background:rgba(255,255,255,.02);text-decoration:none;cursor:pointer;
  transition:color var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease),
             box-shadow var(--dur-ui) var(--ease),background var(--dur-ui) var(--ease);
}
.chip:hover{color:var(--ink);border-color:var(--hairline-hi);}
.chip.is-on{background:var(--grad-btn);border-color:transparent;color:var(--accent-ink);box-shadow:var(--neon-sm);}

/* ================================================ scheda veicolo ===== */
.gallery{display:grid;gap:var(--s2);}
.gallery-main{
  position:relative;aspect-ratio:16/10;border-radius:var(--r-block);overflow:hidden;
  border:1px solid var(--hairline);background:linear-gradient(180deg,#141A26,#0C0F16);
  display:grid;place-items:center;
}
/* la foto intera, mai tagliata; dietro, una copia sfocata riempie i lati */
.gallery-main img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:contain;
}
.gallery-main::before{
  content:"";position:absolute;inset:-6%;z-index:0;
  background:var(--sfondo-foto) center/cover no-repeat;
  filter:blur(28px) saturate(.7) brightness(.45);
}
.thumbs{display:flex;gap:var(--s1);flex-wrap:wrap;}
.thumbs button{
  width:88px;aspect-ratio:4/3;border-radius:var(--r-in);overflow:hidden;padding:0;cursor:pointer;
  border:1px solid var(--hairline);background:var(--surface);
  transition:border-color var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease);
}
.thumbs button img{width:100%;height:100%;object-fit:cover;display:block;}
.thumbs button[aria-current="true"]{border-color:var(--accent);box-shadow:var(--neon-sm);}

/* pulsante che apre il lightbox sopra la foto principale */
.gallery-zoom{
  position:relative;z-index:1;width:100%;height:100%;display:grid;place-items:center;
  border:0;padding:0;background:none;cursor:zoom-in;
}
.gallery-zoom-mark{
  position:absolute;z-index:2;bottom:var(--s3);right:var(--s3);width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(47,53,73,.72);border:1px solid var(--hairline-hi);color:var(--accent-hi);
  transition:background var(--dur-ui) var(--ease),transform var(--dur-ui) var(--ease);
}
.gallery-zoom-mark svg{width:18px;height:18px;}
.gallery-zoom:hover .gallery-zoom-mark{background:rgba(47,53,73,.94);transform:scale(1.06);}

/* ---------------------------------------------------------- lightbox --
   Desktop (>820px, stessa soglia del resto del sito): a tutto schermo.
   Mobile: pannello parziale ancorato in basso, zoom nativo col pizzico
   sull'immagine (touch-action:pinch-zoom, nessuna libreria). */
.lightbox{
  position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;
  background:rgba(47,53,73,.97);
}
.lightbox[hidden]{display:none;}
.lightbox-stage{
  flex:1;min-height:0;display:grid;place-items:center;overflow:auto;
  padding:var(--s4);touch-action:pinch-zoom;
}
.lightbox-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-in);}
.lightbox-chiudi,.lightbox-prec,.lightbox-succ{
  position:absolute;z-index:2;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--hairline-hi);
  background:rgba(12,16,24,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--ink);cursor:pointer;
  transition:background var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease);
}
.lightbox-chiudi:hover,.lightbox-prec:hover,.lightbox-succ:hover{background:rgba(12,16,24,.94);border-color:var(--accent-hi);}
.lightbox-chiudi svg,.lightbox-prec svg,.lightbox-succ svg{width:20px;height:20px;}
.lightbox-chiudi{top:var(--s3);right:var(--s3);}
.lightbox-prec{left:var(--s3);top:50%;transform:translateY(-50%);}
.lightbox-succ{right:var(--s3);top:50%;transform:translateY(-50%);}
.lightbox-conta{
  text-align:center;padding-bottom:var(--s4);color:var(--ink-soft);
  font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;
}
/* mobile: pannello parziale, non a tutto schermo, ancorato in basso */
@media (max-width:820px){
  .lightbox{inset:9vh 0 0 0;border-radius:var(--r-block) var(--r-block) 0 0;
    border-top:1px solid var(--hairline-hi);}
  .lightbox-stage{padding:var(--s3);}
}

.dati{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-block);overflow:hidden;}
.dati div{background:var(--surface);padding:var(--s3);}
.dati i{display:block;font-style:normal;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dim);margin-bottom:6px;}
.dati b{font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:700;
  font-size:1.12rem;font-variant-numeric:tabular-nums;}

.dotazioni{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s1) var(--s3);}
.dotazioni li{padding-left:20px;position:relative;color:var(--ink-soft);}
.dotazioni li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--grad-accent);box-shadow:var(--neon-sm);
}

/* sticky box prezzo */
.sticky-box{position:sticky;top:100px;}

/* ======================================================= footer ====== */
footer{border-top:1px solid var(--hairline);padding:var(--s7) 0 var(--s5);position:relative;}
.foot-grid{display:flex;flex-wrap:wrap;gap:var(--s6);justify-content:space-between;align-items:flex-start;}
.foot-col a{display:block;padding:5px 0;color:var(--ink-soft);text-decoration:none;font-size:.94rem;
  transition:color var(--dur-ui) var(--ease),text-shadow var(--dur-ui) var(--ease);}
.foot-col a:hover{color:var(--accent-hi);text-shadow:var(--neon-text);}
.foot-bottom{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-dim);}

/* WhatsApp flottante */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:75;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:var(--grad-btn);color:var(--accent-ink);
  box-shadow:var(--neon);text-decoration:none;
  transition:transform var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease);
}
.wa:hover{transform:scale(1.08);box-shadow:var(--neon-lg);}
.wa svg{width:28px;height:28px;}

/* Accessibilità flottante — stessa forma di WhatsApp, dall'altra parte.
   Fondo scuro invece del gradiente: sono due cose diverse e si devono
   distinguere anche per chi non separa bene i colori. */
.a11y{
  position:fixed;left:22px;bottom:22px;z-index:75;height:58px;border-radius:999px;
  display:inline-flex;align-items:center;gap:0;padding:0 15px;cursor:pointer;
  background:var(--surface);color:var(--accent-hi);
  border:1px solid var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.45);
  text-decoration:none;overflow:hidden;
  transition:gap var(--dur-ui) var(--ease),transform var(--dur-ui) var(--ease),
             box-shadow var(--dur-ui) var(--ease);
}
.a11y svg{width:28px;height:28px;flex:none;}
.a11y span{
  max-width:0;opacity:0;white-space:nowrap;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  transition:max-width var(--dur-ui) var(--ease),opacity var(--dur-ui) var(--ease);
}
.a11y:hover,.a11y:focus-visible{
  gap:10px;transform:scale(1.04);box-shadow:var(--neon);
}
.a11y:hover span,.a11y:focus-visible span{max-width:11rem;opacity:1;}
.a11y:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;}

/* ------------------------------------------------- pannello strumenti a11y */
.a11y-pannello{
  position:fixed;left:22px;bottom:90px;z-index:76;width:min(310px,calc(100vw - 44px));
  padding:var(--s4);border-radius:var(--r-block);
  background:var(--surface);border:1px solid var(--hairline-hi);
  box-shadow:var(--sh-lg);
}
.a11y-pannello[hidden]{display:none;}
.a11y-testa{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s3);}
.a11y-chiudi{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;flex:none;
  background:none;border:1px solid var(--hairline);color:var(--ink-soft);cursor:pointer;
  transition:border-color var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease);
}
.a11y-chiudi:hover{border-color:var(--accent-hi);color:var(--accent-hi);}
.a11y-chiudi svg{width:16px;height:16px;}
.a11y-gruppo{margin-bottom:var(--s3);}
.a11y-etichetta{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);margin-bottom:8px;}
.a11y-passi{display:flex;gap:8px;}
.a11y-passi button{
  flex:1;padding:9px 0;border-radius:var(--r-in);cursor:pointer;
  background:var(--surface-2);border:1px solid var(--hairline);color:var(--ink);
  font-family:var(--display);font-weight:700;
  transition:border-color var(--dur-ui) var(--ease),background var(--dur-ui) var(--ease);
}
.a11y-passi button[aria-pressed="true"],.a11y-passi button:hover{border-color:var(--accent-hi);}
.a11y-passi button[aria-pressed="true"]{background:var(--grad-accent-soft);color:var(--accent-hi);}
.a11y-opzione{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:10px 12px;margin-bottom:8px;border-radius:var(--r-in);cursor:pointer;text-align:left;
  background:var(--surface-2);border:1px solid var(--hairline);color:var(--ink);font-size:.9rem;
  transition:border-color var(--dur-ui) var(--ease);
}
.a11y-opzione:hover{border-color:var(--accent-hi);}
.a11y-opzione::after{
  content:"";width:36px;height:20px;border-radius:999px;flex:none;
  background:var(--hairline-hi);position:relative;transition:background var(--dur-ui) var(--ease);
}
.a11y-opzione::before{
  content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:var(--ink-soft);
  transform:translateX(calc(-1 * var(--s2)));margin-left:calc(100% - 30px);
  transition:transform var(--dur-ui) var(--ease),background var(--dur-ui) var(--ease);
}
.a11y-opzione[aria-pressed="true"]::after{background:var(--accent);}
.a11y-opzione[aria-pressed="true"]::before{transform:translateX(16px);background:var(--void);}
.a11y-reset{
  width:100%;padding:9px 0;margin-bottom:var(--s3);border-radius:var(--r-in);cursor:pointer;
  background:none;border:1px dashed var(--hairline-hi);color:var(--ink-soft);font-size:.82rem;
  transition:border-color var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease);
}
.a11y-reset:hover{border-color:var(--accent-hi);color:var(--accent-hi);}
.a11y-link{display:block;text-align:center;font-size:.8rem;color:var(--accent-hi);text-decoration:none;}
.a11y-link:hover{text-decoration:underline;}

/* -------------------------------------------------- stati applicati da a11y */
html.a11y-testo-1{font-size:112%;}
html.a11y-testo-2{font-size:125%;}
html.a11y-sottolinea a{text-decoration:underline;}
html.a11y-contrasto{
  --ink-soft:#FFFFFF;--grey:#E4E8EF;--grey-dim:#E4E8EF;
  --hairline:rgba(255,255,255,.4);--hairline-hi:rgba(255,255,255,.65);
  --surface:#000000;--surface-2:#0A0A0A;--void:#000000;--void-2:#000000;
}

/* --------------------------------------------------------- popup del sito */
.popup-overlay{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:var(--s3);
  background:rgba(47,53,73,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.popup-overlay[hidden]{display:none;}
.popup-box{
  position:relative;max-width:460px;width:100%;max-height:min(680px,90vh);overflow-y:auto;
  border-radius:var(--r-block);background:var(--surface);border:1px solid var(--hairline-hi);
  box-shadow:var(--sh-lg);
}
.popup-box img{width:100%;max-height:280px;object-fit:cover;display:block;}
.popup-corpo{padding:var(--s4);}
.popup-corpo p{color:var(--ink-soft);line-height:1.6;}
.popup-chiudi{
  position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:rgba(47,53,73,.72);border:1px solid var(--hairline-hi);
  color:var(--ink);cursor:pointer;transition:border-color var(--dur-ui) var(--ease);
}
.popup-chiudi:hover{border-color:var(--accent-hi);}
.popup-chiudi svg{width:16px;height:16px;}

@media (prefers-reduced-motion:reduce){
  .a11y,.a11y span{transition:none;}
  .a11y:hover{transform:none;}
}

/* Su schermo stretto le due bolle non devono toccarsi né coprire il piede */
@media (max-width:520px){
  .wa{right:14px;bottom:14px;width:52px;height:52px;}
  .a11y{left:14px;bottom:14px;height:52px;padding:0 12px;}
  .a11y span{display:none;}
}

/* ====================================================== reveal ======= */
.rv{opacity:0;transform:translateY(30px);
  transition:opacity var(--dur-in) var(--ease),transform var(--dur-in) var(--ease);}
.rv.in{opacity:1;transform:none;}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
/* nasconde senza allargare il documento: niente left:-9999px */
.sr-only,.skip{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip:focus{
  position:fixed;left:var(--s3);top:var(--s3);z-index:99;width:auto;height:auto;
  margin:0;overflow:visible;clip:auto;clip-path:none;
  padding:14px 22px;background:var(--grad-accent);color:var(--accent-ink);
  border-radius:var(--r-btn);box-shadow:var(--neon);font-weight:600;
}

/* ==================================================== responsive ===== */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s5);}
  .split,.split--scheda{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .nav-links{position:fixed;inset:76px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(47,53,73,.97);backdrop-filter:blur(20px);padding:var(--s3) 20px var(--s5);
    border-bottom:1px solid var(--hairline);transform:translateY(-120%);
    transition:transform .5s var(--ease);}
  .nav-links.is-open{transform:none;}
  .nav-links>a{padding:15px 0;border-bottom:1px solid var(--hairline);}
  .nav-tel{margin-top:var(--s3);text-align:center;}
  .nav-burger{display:block;margin-left:auto;}
  .sticky-box{position:static;}
}
@media (max-width:600px){
  body{font-size:1rem;}
  .timeline li{grid-template-columns:1fr;gap:var(--s1);}
  .row-2{grid-template-columns:1fr;}
  .svc li{flex-wrap:wrap;}
  .svc .d{margin-left:0;text-align:left;width:100%;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important;transition-duration:.01ms!important;}
  .rv{opacity:1;transform:none;}
}

/* =====================================================================
   Vetrina della scheda veicolo — apertura a tutto schermo.
   Watermark gigante del marchio, mezzo scontornato in luce, slider dati.
   ===================================================================== */
.vetrina{
  position:relative;min-height:min(100vh,880px);display:flex;flex-direction:column;
  justify-content:center;align-items:center;overflow:hidden;
  padding:clamp(96px,12vh,140px) 0 clamp(24px,4vh,48px);
  background:
    radial-gradient(58% 52% at 50% 84%,rgba(0,166,237,.22),transparent 66%),
    radial-gradient(46% 42% at 84% 16%,rgba(0,87,184,.26),transparent 62%),
    linear-gradient(180deg,#0B1018 0%,#07080B 100%);
}
.vetrina-mark{
  position:absolute;top:64%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:900;
  font-size:clamp(4rem,18vw,15rem);line-height:1;letter-spacing:-.04em;text-transform:uppercase;
  color:rgba(239,243,248,.032);white-space:nowrap;pointer-events:none;user-select:none;z-index:0;
}
.vetrina-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;width:min(100% - 40px,var(--shell));}
.vetrina-in h1{font-size:clamp(2.2rem,7.68vw,5rem);line-height:.98;margin-top:var(--s2);max-width:16ch;}
.vetrina-in .btn{margin-top:var(--s4);}

.vetrina-bike{
  display:block;width:auto;max-width:min(100%,900px);
  height:auto;max-height:clamp(240px,48vh,520px);
  object-fit:contain;margin-top:clamp(-8px,-1vh,0px);
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.65)) drop-shadow(0 0 60px rgba(0,166,237,.28));
  animation:bike-in 1.4s var(--ease) both;
}
@keyframes bike-in{from{opacity:0;transform:translateY(46px) scale(.97);}to{opacity:1;transform:none;}}

/* piano di luce sotto il mezzo */
.vetrina-floor{
  position:absolute;left:50%;bottom:26%;transform:translateX(-50%);
  width:min(78vw,900px);height:190px;pointer-events:none;z-index:1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,166,237,.30),transparent 70%);
  filter:blur(28px);
}

.vetrina-slider{position:relative;z-index:2;width:min(100% - 40px,var(--shell));margin-top:clamp(16px,3vh,40px);min-height:96px;}
.vetrina-slide{
  display:none;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  animation:slide-in .7s var(--ease) both;
}
.vetrina-slide.is-on{display:flex;}
@keyframes slide-in{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.vetrina-slide div{min-width:140px;}
.vetrina-slide span{
  display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);
}
.vetrina-slide b{
  display:block;margin-top:6px;
  font-family:var(--display);font-variation-settings:"wdth" 116;font-weight:800;
  font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;color:var(--accent-hi);text-shadow:var(--neon-text);
}

.vetrina-foot{
  position:relative;z-index:2;width:min(100% - 40px,var(--shell));
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  margin-top:clamp(16px,3vh,32px);
}
.vetrina-sci{display:flex;gap:var(--s2);list-style:none;margin:0;padding:0;}
.vetrina-sci a{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--hairline);color:var(--ink-soft);text-decoration:none;
  transition:border-color var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease);
}
.vetrina-sci a:hover{border-color:var(--accent);color:var(--accent-hi);box-shadow:var(--neon-sm);}
.vetrina-sci svg{width:18px;height:18px;}

.vetrina-dots{display:flex;gap:10px;}
.vetrina-dots button{
  width:26px;height:26px;background-clip:content-box;padding:7px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid var(--hairline-hi);background:transparent;
  transition:background var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease),transform var(--dur-ui) var(--ease);
}
.vetrina-dots button[aria-current="true"]{background:var(--grad-accent);border-color:transparent;box-shadow:var(--neon-sm);transform:scale(1.18);}

.vetrina-scroll{
  position:absolute;bottom:var(--s3);left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey-dim);text-decoration:none;display:grid;justify-items:center;gap:8px;
}
.vetrina-scroll::after{
  content:"";width:1px;height:30px;background:linear-gradient(var(--accent),transparent);
  animation:scrollpulse 2.2s var(--ease) infinite;
}
@keyframes scrollpulse{0%,100%{opacity:.3;transform:scaleY(.6);}50%{opacity:1;transform:scaleY(1);}}

@media (max-width:820px){
  .vetrina{min-height:auto;padding-top:clamp(80px,14vh,120px);}
  .vetrina-foot{flex-direction:column-reverse;}
  .vetrina-slide{justify-content:center;text-align:center;}
  .vetrina-floor{bottom:34%;}
}

/* senza immagine la vetrina non deve restare mezza vuota */
.vetrina.is-senza-foto{min-height:min(76vh,660px);}
.vetrina.is-senza-foto .vetrina-mark{top:56%;}

/* =====================================================================
   Barra orari — sempre visibile, stato calcolato in tempo reale
   ===================================================================== */
.topbar{
  position:relative;z-index:71;
  background:linear-gradient(90deg,rgba(0,87,184,.20),rgba(0,166,237,.10) 55%,transparent);
  border-bottom:1px solid var(--hairline);
  font-size:.84rem;
}
/* su desktop resta agganciata in alto durante lo scroll; sotto la soglia
   mobile occupa spazio prezioso, quindi lì scorre via come prima */
@media (min-width:821px){
  .topbar{
    position:sticky;top:0;
    backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  }
  .nav{top:45px;}
}
.topbar-in{display:flex;align-items:center;gap:var(--s3);min-height:44px;flex-wrap:wrap;}
.topbar-stato{display:flex;align-items:center;gap:9px;}
.topbar-stato .dot{
  width:8px;height:8px;border-radius:50%;background:#8892A4;flex:0 0 auto;
}
.topbar-stato.is-aperto .dot{
  background:#3BE38B;box-shadow:0 0 0 0 rgba(59,227,139,.55);
  animation:pulsa 2.4s var(--ease) infinite;
}
@keyframes pulsa{
  0%{box-shadow:0 0 0 0 rgba(59,227,139,.5);}
  70%{box-shadow:0 0 0 9px rgba(59,227,139,0);}
  100%{box-shadow:0 0 0 0 rgba(59,227,139,0);}
}
.topbar-stato b{font-weight:600;}
.topbar-stato .muted{font-size:.82rem;}
.topbar-toggle{
  background:none;border:0;cursor:pointer;color:var(--accent-hi);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 0;border-bottom:1px solid rgba(79,200,255,.35);
  transition:text-shadow var(--dur-ui) var(--ease);
}
.topbar-toggle:hover{text-shadow:var(--neon-text);}
.topbar-right{display:flex;align-items:center;gap:var(--s2);margin-left:auto;flex-wrap:wrap;}
.topbar-right a{color:var(--ink-soft);text-decoration:none;padding:6px 2px;
  transition:color var(--dur-ui) var(--ease);}
.topbar-right a:hover{color:var(--accent-hi);}

.topbar-pannello{border-top:1px solid var(--hairline);background:rgba(47,53,73,.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.topbar-orari{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--s4);padding:var(--s4) 0;}
.topbar-orari .riga{display:flex;justify-content:space-between;gap:var(--s2);
  padding:8px 0;border-bottom:1px solid var(--hairline);}
.topbar-orari .riga span{color:var(--grey);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;}
.topbar-orari .riga b{font-weight:500;font-family:var(--mono);font-size:.82rem;}
.topbar-orari .eyebrow{margin-bottom:var(--s2);}

@media (max-width:700px){
  .topbar-right span{display:none;}
  .topbar-in{padding-block:8px;}
}

/* =====================================================================
   Pagine legali
   ===================================================================== */
.testo-legale{margin-top:var(--s5);}
.testo-legale h2{
  font-size:clamp(1.35rem,2.88vw,1.9rem);margin-top:var(--s6);
  padding-top:var(--s3);border-top:1px solid var(--hairline);
}
.testo-legale h3{margin-top:var(--s4);color:var(--accent-hi);font-size:1.06rem;}
.testo-legale p{margin-top:var(--s2);color:var(--ink-soft);max-width:70ch;}
.testo-legale ul{margin:var(--s3) 0 0;padding:0;list-style:none;max-width:70ch;}
.testo-legale li{position:relative;padding-left:22px;margin-bottom:12px;color:var(--ink-soft);}
.testo-legale li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--grad-accent);box-shadow:var(--neon-sm);
}
.testo-legale a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(79,200,255,.4);}
.testo-legale a:hover{text-decoration-color:var(--accent-hi);}
.testo-legale code{font-family:var(--mono);font-size:.86em;background:rgba(0,166,237,.1);
  padding:2px 7px;border-radius:6px;color:var(--accent-hi);}
.tablewrap-legale{overflow-x:auto;margin-top:var(--s3);border:1px solid var(--hairline);
  border-radius:var(--r-block);background:var(--surface);}
.tablewrap-legale table{width:100%;border-collapse:collapse;min-width:560px;}
.tablewrap-legale th{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-dim);text-align:left;padding:14px var(--s3);border-bottom:1px solid var(--hairline);
}
.tablewrap-legale td{padding:14px var(--s3);border-bottom:1px solid var(--hairline);
  font-size:.92rem;color:var(--ink-soft);vertical-align:top;}
.tablewrap-legale tr:last-child td{border-bottom:0;}

/* =====================================================================
   Banner cookie e riquadri di consenso
   ===================================================================== */
.consenso{
  position:fixed;left:var(--s3);right:var(--s3);bottom:var(--s3);z-index:90;
  max-width:560px;padding:var(--s4);border-radius:var(--r-block);
  background:rgba(12,16,24,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--hairline-hi);box-shadow:var(--sh-lg),var(--neon-sm);
  transform:translateY(140%);transition:transform .7s var(--ease);
}
.consenso.is-in{transform:none;}
.consenso h2{font-size:1.2rem;}
.consenso p{margin-top:var(--s2);font-size:.92rem;color:var(--ink-soft);}
.consenso-azioni{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3);}
.consenso a{color:var(--accent-hi);}

.blocco-consenso{
  display:grid;place-items:center;text-align:center;gap:var(--s2);
  padding:var(--s5) var(--s3);border-radius:var(--r-block);
  border:1px dashed var(--hairline-hi);background:var(--grad-accent-soft);
}
.blocco-consenso p{color:var(--grey);font-size:.92rem;max-width:44ch;}

/* =====================================================================
   Feed Instagram
   ===================================================================== */
.ig-marquee{
  overflow:hidden;margin-top:var(--s2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
}
.ig-track{display:flex;gap:var(--s2);width:max-content;animation:ig-scroll 45s linear infinite;}
.ig-marquee:hover .ig-track{animation-play-state:paused;}
.ig-track .ig-item{flex:0 0 230px;}
@keyframes ig-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ig-track{animation:none;overflow-x:auto;}
  .ig-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
}
.ig-item{
  position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--r-block);
  border:1px solid var(--hairline);background:var(--surface-2);text-decoration:none;
  transition:transform var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease);
}
.ig-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease),filter .6s var(--ease);}
.ig-item:hover{transform:translateY(-5px);border-color:var(--hairline-hi);box-shadow:var(--sh-md),var(--neon-sm);}
.ig-item:hover img{transform:scale(1.07);filter:saturate(1.15);}
.ig-item figcaption{
  position:absolute;inset:auto 0 0 0;padding:var(--s3) var(--s2) var(--s2);
  background:linear-gradient(transparent,rgba(7,8,11,.92));
  font-size:.8rem;color:var(--ink-soft);text-align:left;
  opacity:0;transform:translateY(10px);
  transition:opacity var(--dur-ui) var(--ease),transform var(--dur-ui) var(--ease);
}
.ig-item:hover figcaption{opacity:1;transform:none;}
.ig-badge{
  position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:rgba(47,53,73,.7);color:var(--accent-hi);
  border:1px solid var(--hairline);
}
.ig-badge svg{width:15px;height:15px;}

/* ================================================ gallerie editoriali === */
.editoriale-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s2);}
/* su desktop tutte le foto stanno su una riga sola, sotto tornano a impilarsi */
@media (min-width:821px){
  .editoriale-grid--6{grid-template-columns:repeat(6,1fr);}
  .editoriale-grid--5{grid-template-columns:repeat(5,1fr);}
}
/* sezioni più compatte delle gallerie fotografiche, per non lasciare troppo vuoto intorno */
.sezione-compatta{padding-block:clamp(40px,5vw,64px);}
.editoriale-item{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-block);
  border:1px solid var(--hairline);background:var(--surface-2);
}
.editoriale-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease);}
.editoriale-item:hover{border-color:var(--hairline-hi);box-shadow:var(--sh-md);}
.editoriale-item:hover img{transform:scale(1.06);}
.editoriale-item figcaption{
  position:absolute;inset:auto 0 0 0;padding:var(--s3) var(--s2) var(--s2);
  background:linear-gradient(transparent,rgba(7,8,11,.92));
  font-size:.8rem;color:var(--ink-soft);text-align:left;
  opacity:0;transform:translateY(10px);
  transition:opacity var(--dur-ui) var(--ease),transform var(--dur-ui) var(--ease);
}
.editoriale-item:hover figcaption{opacity:1;transform:none;}

.foot-link-btn{
  display:block;padding:5px 0;background:none;border:0;cursor:pointer;
  color:var(--ink-soft);font-family:var(--body);font-size:.94rem;text-align:left;
  transition:color var(--dur-ui) var(--ease),text-shadow var(--dur-ui) var(--ease);
}
.foot-link-btn:hover{color:var(--accent-hi);text-shadow:var(--neon-text);}

/* =====================================================================
   Griglia a colonne fisse: così "righe piene" vuol dire davvero righe piene
   ===================================================================== */
.grid{grid-template-columns:1fr;}
@media (min-width:660px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1040px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr));} }

/* tessera che chiude la riga */
.card--riempimento{
  background:var(--grad-accent-soft);
  border-style:dashed;border-color:var(--hairline-hi);
}
.card--riempimento:hover{transform:none;box-shadow:var(--neon-sm);}
.card--riempimento h3{font-size:1.35rem;}

/* contatore dentro il chip */
.chip-n{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:rgba(140,200,255,.14);font-size:.9em;color:var(--grey);
}
.chip.is-on .chip-n{background:rgba(0,0,0,.22);color:var(--accent-ink);}

/* marchio ufficiale nel nastro */
.brands-track span.is-ufficiale{color:var(--ink-soft);}

/* =====================================================================
   Numeri grandi — passi e servizi
   ===================================================================== */
.steps{gap:var(--s4) var(--s3);}
.step{border-top-width:2px;border-top-color:var(--hairline-hi);padding-top:var(--s3);}
.step::before{
  font-family:var(--display);font-variation-settings:"wdth" 120;font-weight:800;
  font-size:clamp(2.6rem,5.52vw,3.9rem);line-height:.9;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;margin-bottom:var(--s3);
  background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;
  color:transparent;text-shadow:none;
  filter:drop-shadow(0 0 16px rgba(0,166,237,.45));
}

/* il loop: la luce scorre da un passo all'altro, all'infinito */
.steps--loop .step{position:relative;overflow:visible;}
.steps--loop .step::after{
  content:"";position:absolute;top:-2px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent-hi),transparent);
  transform:scaleX(0);transform-origin:left;
  box-shadow:0 0 14px rgba(79,200,255,.8);
  animation:passo 7.5s var(--ease) infinite;
}
.steps--loop .step:nth-child(1)::after{animation-delay:0s;}
.steps--loop .step:nth-child(2)::after{animation-delay:.55s;}
.steps--loop .step:nth-child(3)::after{animation-delay:1.1s;}
.steps--loop .step:nth-child(4)::after{animation-delay:1.65s;}
.steps--loop .step:nth-child(5)::after{animation-delay:2.2s;}
@keyframes passo{
  0%   {transform:scaleX(0);transform-origin:left;opacity:0;}
  6%   {opacity:1;}
  16%  {transform:scaleX(1);transform-origin:left;opacity:1;}
  34%  {transform:scaleX(1);transform-origin:right;opacity:1;}
  48%  {transform:scaleX(0);transform-origin:right;opacity:0;}
  100% {transform:scaleX(0);opacity:0;}
}
/* e il numero si accende quando la luce passa di lì */
.steps--loop .step::before{animation:accendi 7.5s var(--ease) infinite;}
.steps--loop .step:nth-child(1)::before{animation-delay:0s;}
.steps--loop .step:nth-child(2)::before{animation-delay:.55s;}
.steps--loop .step:nth-child(3)::before{animation-delay:1.1s;}
.steps--loop .step:nth-child(4)::before{animation-delay:1.65s;}
.steps--loop .step:nth-child(5)::before{animation-delay:2.2s;}
@keyframes accendi{
  0%,10%   {filter:drop-shadow(0 0 16px rgba(0,166,237,.35));transform:translateY(0);}
  20%      {filter:drop-shadow(0 0 34px rgba(79,200,255,.95));transform:translateY(-3px);}
  40%,100% {filter:drop-shadow(0 0 16px rgba(0,166,237,.35));transform:translateY(0);}
}

/* =====================================================================
   Elenco servizi — numeri grandi che cambiano colore in loop
   ===================================================================== */
.svc li{padding:22px 0;gap:var(--s4);align-items:flex-start;}
.svc .n{
  font-family:var(--display);font-variation-settings:"wdth" 118;font-weight:800;
  font-size:clamp(1.5rem,2.88vw,2.1rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;min-width:2.6ch;
  background:linear-gradient(135deg,#4FC8FF,#00A6ED 50%,#0057B8);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:scorri-colore 9s var(--ease) infinite;
}
@keyframes scorri-colore{
  0%   {background-position:0% 50%;   filter:drop-shadow(0 0 0 rgba(0,166,237,0));}
  25%  {background-position:100% 50%; filter:drop-shadow(0 0 18px rgba(79,200,255,.75));}
  50%  {background-position:0% 50%;   filter:drop-shadow(0 0 0 rgba(0,166,237,0));}
  100% {background-position:0% 50%;   filter:drop-shadow(0 0 0 rgba(0,166,237,0));}
}
.svc li:nth-child(1) .n{animation-delay:0s;}
.svc li:nth-child(2) .n{animation-delay:.35s;}
.svc li:nth-child(3) .n{animation-delay:.7s;}
.svc li:nth-child(4) .n{animation-delay:1.05s;}
.svc li:nth-child(5) .n{animation-delay:1.4s;}
.svc li:nth-child(6) .n{animation-delay:1.75s;}
.svc li:nth-child(7) .n{animation-delay:2.1s;}
.svc li:nth-child(8) .n{animation-delay:2.45s;}
.svc li:nth-child(9) .n{animation-delay:2.8s;}
.svc li:nth-child(10) .n{animation-delay:3.15s;}
.svc li:nth-child(11) .n{animation-delay:3.5s;}

/* i contatori delle statistiche, un gradino più grandi */
.stat .v{font-size:clamp(2.4rem,5.52vw,3.4rem);}
.timeline .yr{font-size:clamp(2rem,4.08vw,2.6rem);}

@media (prefers-reduced-motion:reduce){
  .steps--loop .step::after{display:none;}
  .steps--loop .step::before,.svc .n{animation:none;}
  .svc .n{background-position:0% 50%;}
}
.topbar-a11y{display:inline-flex;align-items:center;gap:6px;}
.topbar-a11y svg{opacity:.8;}
.foot-bottom a{display:inline-block;padding:6px 2px;color:var(--grey);text-decoration:none;
  transition:color var(--dur-ui) var(--ease);}
.foot-bottom a:hover{color:var(--accent-hi);}

/* =====================================================================
   Vetrina con una foto normale (non scontornata): incorniciata e sfumata
   nel fondo, così una foto di piazzale non spezza il buio.
   ===================================================================== */
.vetrina-foto{
  position:relative;margin:clamp(20px,3vh,36px) auto 0;
  max-width:min(100%,940px);width:fit-content;
  border-radius:var(--r-block);overflow:hidden;
  border:1px solid var(--hairline-hi);
  box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 70px rgba(0,166,237,.18);
  animation:bike-in 1.4s var(--ease) both;
}
/* proporzioni intatte: l'immagine si adatta all'altezza disponibile,
   la cornice si stringe attorno a lei. Niente crop, niente stiramento. */
.vetrina-foto img{
  display:block;width:auto;max-width:100%;
  height:auto;max-height:clamp(220px,44vh,460px);
  object-fit:contain;
  filter:saturate(.92) contrast(1.05) brightness(.92);
}
/* la foto si spegne verso il basso e prende un velo azzurro */
.vetrina-foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,8,11,.34) 0%,transparent 26%,transparent 58%,rgba(7,8,11,.92) 100%),
    linear-gradient(120deg,rgba(0,87,184,.22),transparent 55%);
}
@media (max-width:820px){ .vetrina-foto img{height:clamp(180px,34vh,280px);} }

/* video ospitato da noi: nessun consenso, parte subito */
.hero-video--locale video,.hero-video--locale img{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover;
}
.hero-video--locale{z-index:0;}
/* Il velo scurisce solo dove appoggia il testo — colonna sinistra e fondo —
   e lascia respirare la metà destra, dove il video si deve vedere. */
.hero-video--locale::after{
  background:
    linear-gradient(180deg,rgba(7,8,11,.46) 0%,rgba(7,8,11,.06) 24%,rgba(7,8,11,.22) 60%,rgba(7,8,11,.88) 100%),
    linear-gradient(96deg,rgba(7,8,11,.82) 0%,rgba(7,8,11,.46) 30%,rgba(7,8,11,.08) 58%,transparent 76%),
    radial-gradient(58% 54% at 16% 80%,rgba(0,87,184,.20),transparent 74%);
}
/* con il video sotto, il titolo si difende da solo */
.hero-video--locale ~ .hero-in h1{text-shadow:0 2px 26px rgba(7,8,11,.75);}
.hero-video--locale ~ .hero-in .lead{text-shadow:0 1px 14px rgba(7,8,11,.85);}
.hero-video--locale ~ .hero-in .eyebrow{text-shadow:0 1px 10px rgba(7,8,11,.9);}

/* marchio: il segno della moto + il nome in tipografia */
.brand{gap:11px;}
.brand-mark{
  display:block;height:34px;width:auto;flex:0 0 auto;
  transition:transform var(--dur-ui) var(--ease),filter var(--dur-ui) var(--ease);
}
.brand:hover .brand-mark{transform:translateX(2px);filter:drop-shadow(0 0 12px rgba(0,166,237,.55));}
.brand-mark--mono{filter:brightness(0) invert(1);}
.brand-parola{display:inline-flex;align-items:center;}
.brand--footer .brand-mark{height:44px;}
@media (max-width:820px){ .brand-mark{height:28px;} .brand--footer .brand-mark{height:36px;} }
@media (max-width:420px){ .brand-parola{font-size:.64rem;letter-spacing:0;} .brand-mark{height:32px;} }

/* ------------------------------------------------- particolari in vetrina
   Motore, ruota, dettagli: ritagli veri del mezzo, sotto la foto d'apertura.
   Le proporzioni non si toccano mai: contain su fondo scuro. */
.vetrina-part{
  position:relative;z-index:2;display:flex;gap:var(--s2);
  margin-top:clamp(16px,2.4vh,28px);
  max-width:min(100%,940px);
  overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:6px;scrollbar-width:thin;
}
.vetrina-part figure{
  flex:0 0 auto;margin:0;width:clamp(150px,20vw,210px);
  border-radius:calc(var(--r-block) / 1.6);overflow:hidden;
  border:1px solid var(--hairline);background:#090B10;
  scroll-snap-align:start;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.vetrina-part figure:hover,
.vetrina-part figure:focus-within{
  border-color:var(--accent);box-shadow:var(--neon-sm);transform:translateY(-3px);
}
.vetrina-part img{
  display:block;width:100%;height:clamp(90px,12vh,124px);
  object-fit:contain;background:#090B10;
  filter:saturate(.94) contrast(1.04);
}
.vetrina-part figcaption{
  padding:8px 10px 10px;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--grey-dim);
  text-align:left;line-height:1.35;
}
.vetrina-part figcaption b{display:block;color:var(--accent-hi);font-weight:600;letter-spacing:.12em;}
@media (max-width:820px){
  .vetrina-part{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;}
}

/* ------------------------------------------- descrizione a piu paragrafi */
.descrizione p{margin-top:var(--s2);}
.descrizione p.lead{margin-top:var(--s2);}
.descrizione p:not(.lead){color:var(--ink-soft);line-height:1.72;}
.descrizione p:last-child{
  border-left:2px solid var(--accent);padding-left:var(--s3);
  margin-top:var(--s3);color:var(--ink);
}
.descrizione p.lead:last-child{border-left:0;padding-left:0;}

/* =====================================================================
   MOBILE — non lo stesso sito rimpicciolito
   ---------------------------------------------------------------------
   Misurato su iPhone a 390 px. I problemi erano quattro: tre righe di
   cornice prima del sito, le colonne della scheda che restavano affiancate
   (uno style inline vinceva sulla media query e i tasti si spezzavano),
   pagine lunghissime da scorrere — lo showroom faceva 39.000 px — e le
   due bolle flottanti sopra i pulsanti.
   ===================================================================== */

@media (max-width:820px){

  /* --- il testo. 120% su un telefono lascia 28 caratteri per riga --- */
  html{font-size:108%;}
  .shell{padding-inline:18px;}
  .descrizione{max-width:none!important;}
  .lead{font-size:1.02rem;line-height:1.62;}

  /* --- barra di servizio: una riga sola, il resto sta nel menu ---
     Erano tre righe: stato, orari, social. 129 px di cornice prima
     ancora di vedere il sito. Adesso e' una riga da 44: se siamo
     aperti e fino a quando. Social e officina stanno nel piede. */
  .topbar-in{flex-wrap:nowrap;justify-content:space-between;gap:var(--s2);min-height:44px;}
  .topbar-right{display:none;}
  .topbar-stato{min-width:0;flex:1 1 auto;}
  .topbar-stato b{white-space:nowrap;}
  .topbar-stato .dot{flex:0 0 auto;min-height:0;}
  .topbar-stato .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .topbar-toggle{min-height:44px;padding-block:8px;flex:0 0 auto;}

  /* --- il menu: a schermo intero, e chiuso vuol dire chiuso ---
     Con il solo transform il pannello restava alto 484 px e il tasto
     del telefono spuntava sopra la barra di servizio. */
  /* Attenzione: <header> ha backdrop-filter, quindi diventa lui il
     riferimento per position:fixed dei figli. Per questo il pannello si
     ancora al 100% dell'intestazione e non a 77 px dallo schermo. */
  .nav-links{
    top:100%;left:0;right:0;bottom:auto;height:calc(100dvh - 76px);overflow-y:auto;
    background:#2F3549;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:var(--s4) 18px calc(var(--s6) + env(safe-area-inset-bottom));
    visibility:hidden;opacity:0;transform:translateY(-10px);
    transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s .28s;
  }
  .nav-links.is-open{visibility:visible;opacity:1;transform:none;transition-delay:0s;}
  .nav-links>a{font-size:1.22rem;padding:16px 0;}
  .nav-tel{
    margin-top:var(--s4);min-height:52px;display:flex;align-items:center;
    justify-content:center;font-size:1.05rem;
  }

  /* --- tocco: sotto i 44 px si sbaglia bersaglio --- */
  .nav-links>a,.chip,.link-more,.foot-bottom a{min-height:44px;}
  .chip{display:inline-flex;align-items:center;}
  /* i pallini restano rotondi e piccoli: l'area di tocco si allarga con
     uno pseudo-elemento invece di stirare il pallino visibile (min-height
     da solo lo deformava in un ovale — trovato dall'utente) */
  .vetrina-dots button{position:relative;}
  .vetrina-dots button::before{content:"";position:absolute;inset:-9px;}

  /* --- hero: dvh, altrimenti la barra del browser taglia il fondo --- */
  .hero{min-height:82dvh;}
  .hero-fallback{max-width:100%;}

  /* --- filtri: una riga che scorre, non cinque righe che riempiono lo schermo --- */
  .filters{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    margin-inline:-18px;padding:2px 18px var(--s2);
    scrollbar-width:none;
  }
  .filters::-webkit-scrollbar{display:none;}
  .filters .chip{flex:0 0 auto;scroll-snap-align:start;}

  /* --- schede prodotto piu' corte: 53 mezzi non possono essere 46 schermate.
     Due colonne dimezzano lo scorrimento e restano leggibili: marca,
     modello, prezzo e tre dati. L'estratto della descrizione qui non serve. --- */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .card .shot{aspect-ratio:4/3;}
  .card-body{padding:12px;gap:5px;}
  .card-nota{display:none;}
  .card h3{font-size:1.02rem;line-height:1.2;}
  .card-marca{font-size:.58rem;letter-spacing:.12em;}
  .card .price{font-size:1.25rem;}
  /* i dati su una riga sola: in colonna la scheda diventava altissima
     e le due colonne non si allineavano piu' */
  .card .specs{gap:0;padding-top:8px;font-size:.72rem;align-items:baseline;}
  .card .specs i{display:none;}
  .card .specs span{display:inline;}
  .card .specs span+span::before{content:" · ";color:var(--grey-dim);}
  .card .specs b{display:inline;font-size:.72rem;}
  .card .specs span:nth-child(n+4){display:none;}   /* al massimo tre: il quarto va a capo */
  .card .badge{font-size:.58rem;padding:4px 8px;}
  .card--riempimento{grid-column:1/-1;}
  .card--riempimento h3{font-size:1.15rem;}

  /* sotto i 380 px due colonne diventano illeggibili: si torna a una */
  @media (max-width:379px){
    .grid{grid-template-columns:1fr;}
    .card .shot{aspect-ratio:16/10;}
  }

  /* bersagli: il logo e i link del piede erano sotto i 40 px */
  .brand{min-height:44px;display:inline-flex;align-items:center;}
  footer a{display:inline-block;padding-block:8px;}

  /* --- dati tecnici a due colonne invece che a una --- */
  .dati{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dotazioni{grid-template-columns:1fr;}

  /* --- particolari: striscia che scorre con lo scatto --- */
  .vetrina-part{scroll-snap-type:x mandatory;}
  .vetrina-part>*{scroll-snap-align:center;}

  /* --- consenso: foglio in basso, non finestra in mezzo allo schermo --- */
  .consenso{
    position:fixed;inset:auto 0 0;max-width:none;width:100%;
    border-radius:22px 22px 0 0;padding:var(--s4) 18px calc(var(--s4) + env(safe-area-inset-bottom));
    max-height:70dvh;overflow-y:auto;
  }
  .consenso-azioni .btn{flex:1 1 auto;}
}

/* --- le due bolle non devono stare sopra i pulsanti --- */
@media (max-width:820px){
  .wa{width:52px;height:52px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));}
  .a11y{
    height:44px;padding:0 10px;left:14px;bottom:calc(18px + env(safe-area-inset-bottom));
    background:rgba(47,53,73,.86);backdrop-filter:blur(10px);
  }
  .a11y svg{width:22px;height:22px;}
  .a11y span{display:none;}
}

/* =====================================================================
   Scheda veicolo: prezzo e contatti sempre a portata di pollice
   ===================================================================== */
.azione-mobile{display:none;}

@media (max-width:820px){
  .azione-mobile{
    position:fixed;inset:auto 0 0;z-index:80;
    display:grid;grid-template-columns:auto 1fr 1fr;align-items:center;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(47,53,73,.94);backdrop-filter:blur(18px);
    border-top:1px solid var(--hairline);
    box-shadow:0 -12px 30px rgba(0,0,0,.5);
  }
  .azione-mobile i{
    display:block;font-style:normal;font-family:var(--mono);font-size:.56rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--grey-dim);
  }
  .azione-mobile b{
    display:block;font-family:var(--display);font-size:1.12rem;line-height:1.1;
    color:var(--accent-hi);white-space:nowrap;
  }
  .azione-mobile .btn{
    min-height:46px;padding-inline:12px;font-size:.8rem;justify-content:center;
  }
  /* sopra la barra si lascia spazio, altrimenti copre il fondo pagina */
  body:has(.azione-mobile) footer{padding-bottom:96px;}
  /* la barra ha gia' il suo bottone WhatsApp: la bolla flottante è
     ridondante qui e copriva la barra stessa — tolta del tutto invece di
     spostarla (segnalato dall'utente). L'accessibilità sale, basta lei. */
  body:has(.azione-mobile) .wa{display:none;}
  body:has(.azione-mobile) .a11y{bottom:calc(88px + env(safe-area-inset-bottom));}
}

/* Schermi molto stretti: si toglie il superfluo, non si stringe tutto */
@media (max-width:380px){
  html{font-size:104%;}
  .azione-mobile{grid-template-columns:1fr 1fr;}
  .azione-mobile-prezzo{grid-column:1/-1;}
  .azione-mobile b{font-size:1.25rem;}
}

/* --- ricerca a scomparsa: su telefono il modulo non deve stare davanti ai mezzi --- */
.cerca{margin-bottom:var(--s5);}
.cerca>summary{display:none;}
.cerca .panel{margin-bottom:0!important;}
@media (max-width:820px){
  .cerca>summary{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    list-style:none;cursor:pointer;min-height:52px;padding:0 var(--s3);
    border:1px solid var(--hairline-hi);border-radius:999px;background:var(--surface);
    font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-soft);
  }
  .cerca>summary::-webkit-details-marker{display:none;}
  .cerca[open]>summary{margin-bottom:var(--s3);color:var(--accent-hi);border-color:var(--accent);}
  .cerca[open]>summary svg{transform:rotate(180deg);}
  .cerca>summary svg{transition:transform .25s var(--ease);}
}

/* Le due bolle sono fisse: qualcosa lo coprono per forza. Si lascia loro
   un angolo libero, invece di farle finire sopra i pulsanti dell'apertura. */
@media (min-width:821px){
  .a11y{width:48px;height:48px;padding:0;justify-content:center;left:18px;bottom:18px;}
  .a11y:hover,.a11y:focus-visible{width:auto;padding:0 16px;}
}

/* Le bolle non stanno sopra l'apertura: compaiono quando si comincia a
   scorrere. In cima i pulsanti dell'hero restano liberi, e chi cerca
   assistenza o accessibilita' le trova appena scende. */
.wa,.a11y{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),visibility 0s .3s,transform var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease);}
body.giu .wa,body.giu .a11y{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;}