/* ============================================================
   SECTIONS — components & cinematic compositions
   ============================================================ */

/* ---------- LOADER ---------- */
.loader {
  position: fixed; inset: 0; z-index: 1000; background: var(--ink-900);
  display: grid; place-items: center; gap: 1.5rem;
}
.loader__inner { display: grid; justify-items: center; gap: 1.4rem; text-align: center; }
.loader__emblem { width: 150px; height: auto; opacity: 0; }
.loader__bar { width: min(220px, 50vw); height: 1.5px; background: var(--line); position: relative; overflow: hidden; }
.loader__bar > i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--honda-red); }
.loader__word { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; font-size: var(--fs-sm); color: var(--muted); }
.loader__count { font-variant-numeric: tabular-nums; color: var(--paper); font-size: var(--fs-cap); letter-spacing: 0.1em; }
.loaded .loader { pointer-events: none; }

/* ---------- PROMO BAR (Promozioni in corso) ---------- */
/* La promo bar vive dentro l'header fisso: body.has-promo estende --header-h,
   così tutti gli offset (hero, archivi, pagine) si adattano da soli. */
body.has-promo { --header-h: calc(var(--bar-h) + var(--promo-h)); }

.promo-bar {
  height: var(--promo-h); flex: 0 0 var(--promo-h);
  display: flex; align-items: center;
  background: var(--cta-red); color: #fff;
  font-size: var(--fs-cap);
}
.promo-bar__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 1rem; min-width: 0;
}
.promo-bar__badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.66rem;
}
.promo-bar__badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: promoPulse 1.8s var(--ease) infinite;
}
@keyframes promoPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
.promo-bar__link {
  flex: 1 1 auto; min-width: 0; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.promo-bar__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.promo-bar__until { opacity: .85; }
.promo-bar__all { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
.promo-bar__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.promo-bar__close {
  flex: 0 0 auto; width: 30px; height: 30px; margin-right: max(calc(var(--gutter) - 30px), 6px);
  display: grid; place-items: center; border-radius: 50%; color: #fff; opacity: .8;
  transition: opacity var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.promo-bar__close:hover { opacity: 1; background: rgba(0,0,0,0.18); }
.promo-bar__close svg { width: 13px; height: 13px; }
@media (max-width: 720px) {
  .promo-bar__badge span { display: none; } /* resta solo il pallino */
  .promo-bar__all { display: none; }        /* il link offerta basta */
}

/* ---------- HEADER ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--header-h);
  display: flex; flex-direction: column; align-items: stretch;
  transition: background var(--dur-mid) var(--ease), backdrop-filter var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease), height var(--dur-mid) var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: rgba(10,10,11,0.62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.header__bar { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  height: var(--bar-h); flex: 0 0 var(--bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* Logo lockup: Honda emblem (red, top-left, ≥65px lockup) + wordmark */
.brand { display: flex; align-items: center; gap: 0.85rem; }
.brand__honda { display: flex; align-items: center; gap: 0.5rem; color: var(--honda-red); }
.brand__emblem { width: 34px; height: 34px; }
.brand__honda-wm { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.14em; font-size: 0.95rem; color: var(--honda-red); }
.brand__divider { width: 1px; height: 26px; background: var(--line-str); }
.brand__name { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name b { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; letter-spacing: -0.01em; color: var(--paper); }
.brand__name span { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
/* Logo Honda ufficiale (PNG bianco originale) — su fondo scuro */
.brand__honda-logo { display: block; height: 22px; width: auto; }
.footer .brand__honda-logo { height: 26px; }
@media (max-width: 560px) { .brand__honda-logo { height: 18px; } }
/* Honda: su fondo scuro (header + footer sempre scuri) si usa la versione bianca del logo */
.header .brand__honda, .header .brand__honda-wm,
.footer .brand__honda, .footer .brand__honda-wm { color: var(--paper); }

.nav { display: flex; align-items: center; gap: clamp(0.95rem, 1.5vw, 1.7rem); }
.nav__link { font-size: 0.9rem; font-weight: 500; color: var(--paper); opacity: 0.82; transition: opacity var(--dur-micro) var(--ease); white-space: nowrap; }
.nav__link:hover { opacity: 1; }

.header__cta { display: flex; align-items: center; gap: 1rem; }
/* CTA header compatto (sobrio, non ingombrante) */
.header__cta .btn { --pad-y: 0.6rem; --pad-x: 1.15rem; font-size: 0.84rem; }
.header__cta .btn svg { width: 14px; height: 14px; }
.header__tel { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); font-weight: 500; opacity: .85; }
.header__tel svg { width: 15px; height: 15px; color: var(--honda-red); }

.burger { display: none; width: 44px; height: 44px; position: relative; border-radius: 10px; }
.burger span { position: absolute; left: 11px; right: 11px; height: 1.6px; background: var(--paper); transition: transform var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease); }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 28px; }
.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; }
.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile overlay menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 190; background: var(--ink-900);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + 1rem) var(--gutter) var(--gutter);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  clip-path: inset(0 0 100% 0); pointer-events: none; visibility: hidden;
  transition: clip-path var(--dur-lg) var(--ease), visibility var(--dur-lg) var(--ease);
}
.menu-open .mobile-menu { clip-path: inset(0 0 0% 0); pointer-events: auto; visibility: visible; }
.mobile-menu__list { display: flex; flex-direction: column; gap: 0.3rem; margin-block: auto; padding-block: 0.5rem; }
.mobile-menu__list a { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 7.5vw, 2.9rem); letter-spacing: -0.03em; padding-block: 0.3rem; display: block; }
.mobile-menu__list a small { font-size: 0.8rem; color: var(--honda-red); margin-right: .7rem; font-family: var(--font-body); letter-spacing: .1em; }
.mobile-menu__cta { margin-top: 1.8rem; justify-self: start; align-self: flex-start; flex-shrink: 0; }
.mobile-menu__foot { margin-top: 1.6rem; display: grid; gap: .5rem; color: var(--muted); font-size: var(--fs-sm); flex-shrink: 0; }
.mobile-menu__foot a { color: var(--paper); }

/* ---------- HERO ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink-900); }
.hero__canvas { position: absolute; inset: 0; z-index: 0; }
.hero__canvas canvas { display: block; width: 100% !important; height: 100% !important; }
/* Hero slider: crossfade cinematografico tra le foto Honda (CSS puro) */
.hero__slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__slide {
  position: absolute; inset: 0; background-size: cover; background-position: center 38%; background-repeat: no-repeat;
  opacity: 0; will-change: opacity, transform; animation: heroSlide 21s infinite both;
}
.hero__slide:nth-child(1) { animation-delay: 0s; }
.hero__slide:nth-child(2) { animation-delay: 7s; }
.hero__slide:nth-child(3) { animation-delay: 14s; }
@keyframes heroSlide {
  0%   { opacity: 0; transform: scale(1.06); }
  4%   { opacity: 1; }
  29%  { opacity: 1; }
  33%  { opacity: 0; transform: scale(1.11); }
  100% { opacity: 0; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { animation: none; opacity: 0; transform: none; }
  .hero__slide:nth-child(1) { opacity: 1; }
}

/* ---------- NOVITÀ (feature modello) ---------- */
.novita__inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.novita__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-900); box-shadow: var(--shadow-card); aspect-ratio: 16/10; }
.novita__media img { width: 100%; height: 100%; object-fit: cover; object-position: 82% center; display: block; }
.novita__tag { position: absolute; top: 16px; left: 16px; z-index: 2; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; padding: 6px 12px; border-radius: 100px; background: var(--cta-red); color: #fff; }
.novita__cta { margin-top: 2rem; }
@media (max-width: 820px) { .novita__inner { grid-template-columns: 1fr; } }
.hero__fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(10,10,11,0.96) 0%, rgba(10,10,11,0.55) 32%, rgba(10,10,11,0.15) 58%, rgba(10,10,11,0.55) 100%),
    radial-gradient(120% 80% at 80% 10%, rgba(204,0,0,0.10), transparent 55%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  padding-bottom: clamp(3rem, 9vh, 7rem); padding-top: calc(var(--header-h) + 2rem); }
.hero__eyebrow { margin-bottom: 1.6rem; }
.hero__claim { max-width: 18ch; margin-bottom: 1.6rem; }
.hero__claim .reveal-line > span { padding-bottom: 0.04em; }
.hero__sub { max-width: 46ch; font-size: var(--fs-lead); color: var(--paper); opacity: 0.86; margin-bottom: 2.4rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.hero__meta {
  position: absolute; right: var(--gutter); bottom: clamp(3rem, 9vh, 7rem); z-index: 2;
  display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-end; text-align: right;
}
.hero__meta-item b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; display: block; line-height: 1; }
.hero__meta-item span { font-size: var(--fs-cap); color: var(--muted); letter-spacing: 0.04em; }
@media (max-width: 860px) { .hero__meta { display: none; } }

.scroll-cue { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: .55rem; color: var(--muted); }
.scroll-cue span { font-size: 0.66rem; letter-spacing: 0.25em; text-transform: uppercase; }
.scroll-cue__line { width: 1px; height: 42px; background: var(--line-str); position: relative; overflow: hidden; }
.scroll-cue__line::after { content: ""; position: absolute; inset: 0; background: var(--honda-red); transform: translateY(-100%); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 50% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* ---------- SECTION HEAD ---------- */
.sec-head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); max-width: 60ch; }
.sec-head--wide { max-width: none; }
.sec-head h2 { max-width: 20ch; }
.sec-head__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }

/* ---------- MANIFESTO ---------- */
.manifesto__lead {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 3.4vw, 2.85rem); line-height: 1.22; max-width: 24ch;
}
.manifesto__lead .word > span { color: var(--paper); }
.manifesto__lead .dim { color: var(--muted); }
.manifesto__lead .dim .word > span { color: var(--muted); } /* lo splitter non deve sovrascrivere il dim */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: clamp(3.5rem, 7vw, 6rem); }
.pillar { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.pillar__num { font-family: var(--font-display); font-size: 0.85rem; color: var(--honda-red); font-weight: 700; letter-spacing: 0.1em; }
.pillar h3 { margin-top: 0.8rem; margin-bottom: 0.7rem; }
.pillar p { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 720px) { .pillars { grid-template-columns: 1fr; gap: 0; } .pillar { padding-block: 1.6rem; } }

/* ---------- GAMMA (cards z-depth) ---------- */
.gamma__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
@media (max-width: 980px) { .gamma__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .gamma__grid { grid-template-columns: 1fr; } }

.car {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ink-800); box-shadow: var(--shadow-card);
  transform-style: preserve-3d; transition: box-shadow var(--dur-mid) var(--ease);
  isolation: isolate; display: flex; flex-direction: column;
  color: var(--paper); /* le card sono scure anche dentro la sezione chiara */
}
.car:hover { box-shadow: var(--shadow-float); }
/* Foto: finestra panoramica 16:10 → l'auto si vede intera, pannello info sotto */
.car__media { position: relative; z-index: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #0c0d11; }
.car__media-inner {
  position: absolute; left: 0; top: -8%; width: 100%; height: 116%;
  background-size: cover; background-position: center;
  transition: transform var(--dur-lg) var(--ease);
}
img.car__media-inner { object-fit: cover; object-position: center; }
.car:hover .car__media-inner { transform: scale(1.04); }
.car__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(10,10,11,0.5) 0%, transparent 26%); }
.car__badge { position: absolute; top: 14px; left: 14px; z-index: 3; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; padding: 5px 10px; border-radius: 100px; background: rgba(10,10,11,0.45); backdrop-filter: blur(6px); border: 1px solid var(--line); }
.car__badge--ev { color: #7ee0c0; }
.car__badge--hev { color: #8fd0ff; }
.car__body { position: relative; z-index: 2; padding: 1.4rem 1.5rem 1.6rem; background: var(--ink-800); flex: 1 1 auto; display: flex; flex-direction: column; }
.car__name { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; letter-spacing: -0.02em; line-height: 1; }
.car__tag { color: var(--muted); font-size: var(--fs-sm); margin-top: 0.5rem; }
.car__foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 1.2rem; gap: 1rem; }
.car__wltp { font-size: 0.7rem; line-height: 1.42; color: rgba(244,244,242,0.6); max-width: 24ch; }
.section--light .car__wltp { color: rgba(244,244,242,0.62); } /* batte .section--light p sulla card scura — AA */
.car__cta { font-size: var(--fs-sm); font-weight: 600; display: inline-flex; gap: .4rem; align-items: center; white-space: nowrap; color: var(--paper); }
.car__cta svg { width: 15px; transition: transform var(--dur-micro) var(--ease); }
.car:hover .car__cta svg { transform: translateX(4px); }

/* ---------- ELETTRIFICAZIONE ---------- */
.electric { position: relative; overflow: hidden; }
.electric__orb {
  position: absolute; right: -10%; top: 50%; transform: translateY(-50%); width: min(620px, 60vw); aspect-ratio: 1; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle at 35% 35%, rgba(204,0,0,0.5), rgba(204,0,0,0.08) 45%, transparent 70%);
  filter: blur(20px); opacity: 0.7;
}
.electric__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.electric__stats { display: grid; gap: 2rem; }
.estat { border-left: 1px solid var(--line); padding-left: 1.4rem; }
.estat .data { color: var(--paper); }
.estat .data em { font-style: normal; color: var(--honda-red); font-size: 0.4em; vertical-align: super; }
.estat p { color: var(--muted); font-size: var(--fs-sm); margin-top: .4rem; }
@media (max-width: 820px) { .electric__grid { grid-template-columns: 1fr; } }

/* ---------- USATO ---------- */
.usato__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.trust__item { display: grid; gap: .4rem; }
.trust__item b { font-family: var(--font-display); font-size: 1.05rem; }
.trust__item span { color: var(--muted-d); font-size: var(--fs-sm); }
.usato__visual { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-800); box-shadow: var(--shadow-card); }
.usato__visual-inner { position: absolute; inset: 0; background-size: cover; background-position: center; }
.usato__tag { position: absolute; left: 18px; bottom: 18px; z-index: 2; background: rgba(10,10,11,0.6); backdrop-filter: blur(8px); border: 1px solid var(--line); color: var(--paper); padding: 10px 16px; border-radius: 100px; font-size: var(--fs-sm); }
.usato__cards { display: grid; gap: 1.2rem; }
.usato__cards .car { transform: none; }
.usato__cards .car__media { aspect-ratio: 16/10; }
@media (max-width: 820px) { .usato__grid { grid-template-columns: 1fr; } .trust { grid-template-columns: 1fr 1fr; } }

/* ---------- SERVIZI (vendita <-> officina) ---------- */
.servizi__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); }
.serv-list { display: grid; }
.serv {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.4rem;
  padding: 1.5rem 0; border-top: 1px solid var(--line); position: relative; transition: padding-left var(--dur-mid) var(--ease);
}
.serv:last-child { border-bottom: 1px solid var(--line); }
.serv::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--honda-red); opacity: 0; transition: width var(--dur-mid) var(--ease), opacity var(--dur-micro) var(--ease); }
.serv:hover { padding-left: 1.4rem; }
.serv:hover::before { width: 2px; opacity: 1; }
.serv__num { font-family: var(--font-display); color: var(--muted); font-size: .8rem; font-weight: 600; }
.serv__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1.8vw, 1.5rem); letter-spacing: -0.01em; }
.serv__meta { color: var(--muted); font-size: var(--fs-sm); }
.serv__arrow { color: var(--honda-red); opacity: 0; transform: translateX(-8px); transition: all var(--dur-micro) var(--ease); }
.serv:hover .serv__arrow { opacity: 1; transform: translateX(0); }
.servizi__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
@media (max-width: 820px) { .servizi__grid { grid-template-columns: 1fr; } .serv__meta { display: none; } }

/* ---------- HERITAGE (timeline orizzontale pinnata) ---------- */
.heritage { background: var(--ink-900); color: var(--paper); overflow: hidden; border-top: 1px solid var(--line); --rail-y: 40%; }
.heritage__head { max-width: var(--maxw); margin-inline: auto; padding: var(--space-section) var(--gutter) 0; }
.heritage__pin { height: 100svh; position: relative; }
/* track ancorato alla riga del filo: i pallini cadono tutti sulla rotaia, il testo pende sotto */
.heritage__track { position: absolute; top: var(--rail-y); left: 0; right: 0; display: flex; gap: clamp(2rem, 6vw, 7rem); padding-inline: var(--gutter); will-change: transform; align-items: flex-start; }
.heritage__rail { position: absolute; left: 0; right: 0; top: calc(var(--rail-y) + 5px); height: 1px; background: var(--line); z-index: 0; }
.heritage__rail-fill { position: absolute; left: 0; top: calc(var(--rail-y) + 5px); height: 1.6px; width: 0; background: var(--honda-red); z-index: 1; box-shadow: 0 0 14px 1px rgba(204,0,0,0.5); }
.milestone { position: relative; z-index: 2; flex: 0 0 auto; width: clamp(260px, 42vw, 440px); }
.milestone__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-900); border: 1.6px solid var(--honda-red); margin-bottom: 1.8rem; position: relative; }
.milestone__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--honda-red); transform: scale(0); transition: transform var(--dur-mid) var(--ease); }
.milestone.is-active .milestone__dot::after { transform: scale(1); }
.milestone__year { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 0.95; letter-spacing: -0.04em; }
.milestone__year span { color: var(--honda-red); }
.milestone h3 { margin-top: 1rem; margin-bottom: 0.7rem; }
.milestone p { color: var(--muted); font-size: var(--fs-sm); }
.heritage__hint { position: absolute; bottom: 2rem; left: var(--gutter); font-size: 0.66rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: .8rem; }
.heritage__hint::after { content: ""; width: 40px; height: 1px; background: var(--line-str); }
@media (max-width: 720px) { .milestone__year { font-size: 2.6rem; } }

/* Heritage — modalità statica: strip orizzontale nativa con snap
   (mobile, prefers-reduced-motion o librerie non caricate) */
.heritage--static .heritage__pin { height: auto; min-height: 0; padding-top: 1.5rem; }
.heritage--static .heritage__rail,
.heritage--static .heritage__rail-fill { display: none; }
.heritage--static .heritage__track {
  position: static; overflow-x: auto; padding-bottom: 2rem; gap: 2.2rem;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.heritage--static .heritage__track::-webkit-scrollbar { display: none; }
.heritage--static .milestone {
  scroll-snap-align: start; width: min(76vw, 340px);
  border-top: 1px solid var(--line); padding-top: 1.3rem;
}
.heritage--static .milestone__dot { margin-bottom: 1.1rem; }
.heritage--static .heritage__hint { position: static; margin: 0 var(--gutter) 2.2rem; }

/* ---------- SOCIAL PROOF ---------- */
.reviews__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; }
.reviews__score { display: flex; align-items: center; gap: 1rem; }
.reviews__score b { font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1; }
.stars { color: var(--honda-red); letter-spacing: 2px; font-size: 1.1rem; }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.review { background: #fff; border: 1px solid var(--line-d); border-radius: var(--radius); padding: 2rem; display: flex; flex-direction: column; gap: 1.2rem; box-shadow: 0 20px 50px -36px rgba(0,0,0,0.4); }
.review__stars { color: var(--honda-red); letter-spacing: 2px; }
.review__text { color: #2a2a2e; font-size: 1.02rem; line-height: 1.55; }
.review__by { margin-top: auto; font-size: var(--fs-sm); color: var(--muted-d); display: flex; align-items: center; gap: .6rem; }
.review__by b { color: var(--ink-900); font-weight: 600; }
@media (max-width: 1080px) { .reviews__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .reviews__grid { grid-template-columns: 1fr; } }

/* ---------- FINANZIAMENTI (band) ---------- */
.finance { position: relative; overflow: hidden; }
.finance__inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.finance__cta { display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 820px) { .finance__inner { grid-template-columns: 1fr; } }

/* ---------- CONTATTI ---------- */
.contatti__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
.info-block { display: grid; gap: 2rem; }
.info-row { display: grid; gap: .35rem; }
.info-row .lbl { font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.info-row a, .info-row p { font-size: 1.05rem; color: var(--paper); max-width: none; }
.hours { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.hours__col b { font-family: var(--font-display); font-size: 1rem; display: block; margin-bottom: .5rem; }
.hours__col span { color: var(--muted); font-size: var(--fs-sm); display: block; }
.map { position: relative; aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-top: .5rem;
  background:
    radial-gradient(circle at 60% 45%, rgba(204,0,0,0.18), transparent 40%),
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(255,255,255,0.04) 28px, rgba(255,255,255,0.04) 29px),
    repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(255,255,255,0.04) 28px, rgba(255,255,255,0.04) 29px),
    var(--ink-800);
}
.map__pin { position: absolute; left: 60%; top: 45%; transform: translate(-50%,-100%); color: var(--honda-red); display: grid; justify-items: center; }
.map__pin svg { width: 30px; height: 30px; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5)); }
.map__pin span { background: var(--ink-900); border: 1px solid var(--line); padding: 4px 10px; border-radius: 100px; font-size: 0.7rem; margin-top: 4px; white-space: nowrap; }
.map__link { position: absolute; right: 14px; bottom: 14px; }

/* Form */
.form { display: grid; gap: 1.2rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field { position: relative; display: grid; gap: .5rem; }
.field label { font-size: var(--fs-cap); color: var(--muted); letter-spacing: 0.04em; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--fs-sm); color: var(--paper); background: var(--ink-800);
  border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem 1rem; width: 100%;
  transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cta-red); background: var(--ink-700); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--cta-red); outline-offset: 2px; }
.field textarea { resize: vertical; min-height: 110px; }
.form__consent { display: flex; gap: .7rem; align-items: flex-start; color: var(--muted); font-size: var(--fs-cap); }
.form__consent input { width: 18px; height: 18px; accent-color: var(--cta-red); margin-top: 2px; }
.form__note { color: var(--muted); font-size: var(--fs-cap); }
.form__success { display: none; padding: 1.1rem 1.2rem; border-radius: 10px; background: rgba(126,224,192,0.08); border: 1px solid rgba(126,224,192,0.3); color: #9fe9cf; font-size: var(--fs-sm); }
.form.is-sent .form__success { display: block; }
@media (max-width: 820px) { .contatti__grid { grid-template-columns: 1fr; } .form__row { grid-template-columns: 1fr; } .hours { grid-template-columns: 1fr; } }

/* ---------- FOOTER ---------- */
.footer { background: var(--ink-900); border-top: 1px solid var(--line); padding-top: clamp(4rem, 7vw, 6rem); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); padding-bottom: 3.5rem; }
.footer__brand .brand__name b { font-size: 1.1rem; }
.footer__brand p { color: var(--muted); font-size: var(--fs-sm); margin-top: 1.2rem; max-width: 34ch; }
.footer__col h4 { font-size: 0.78rem; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 1.2rem; font-family: var(--font-body); font-weight: 600; } /* Honda: heading mai all-caps */
.footer__col ul { display: grid; gap: .7rem; }
.footer__col a, .footer__col span { color: var(--paper); opacity: .82; font-size: var(--fs-sm); }
.footer__col a:hover { opacity: 1; color: var(--honda-red); }
.footer__social { display: flex; gap: .8rem; margin-top: 1.5rem; }
.footer__social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--paper); transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.footer__social a:hover { border-color: var(--honda-red); color: var(--honda-red); }
.footer__legal { border-top: 1px solid var(--line); padding-block: 1.8rem 3rem; display: grid; gap: 1.2rem; }
.footer__legal-row { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; color: var(--muted); font-size: var(--fs-cap); }
.footer__legal-row a { color: var(--muted); }
.footer__legal-row a:hover { color: var(--paper); }
@media (max-width: 820px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }

/* ---------- responsive header ---------- */
/* Con 7 voci il telefono resta icona fino a schermi larghi */
@media (max-width: 1480px) {
  .header__tel { display: inline-flex; width: 42px; height: 42px; justify-content: center; border-radius: 50%; gap: 0; box-shadow: inset 0 0 0 1px var(--line); }
  .header__tel .tel-num { display: none; }
}
/* Desktop stretto (1241–1480px): dà respiro alle 7 voci — meno padding, gap più
   contenuti — così il menu orizzontale resta ordinato senza cadere nel burger. */
@media (min-width: 1241px) and (max-width: 1480px) {
  .header__bar { padding-inline: clamp(1.25rem, 3.2vw, 3rem); gap: 1.25rem; }
  .nav { gap: clamp(0.7rem, 1.15vw, 1.2rem); }
  .nav__link { font-size: 0.86rem; }
  .header__cta { gap: 0.7rem; }
}
@media (max-width: 1240px) {
  .nav { display: none; }
  .burger { display: block; }
  .brand__name span { display: none; }
  .header__cta { gap: 0.45rem; }
}
@media (max-width: 680px) {
  /* solo su telefono il CTA full vive nel menu (non c'è spazio in barra) */
  .header__cta .btn--primary { display: none; }
  .brand__divider { height: 22px; }
}
@media (max-width: 400px) {
  .brand { gap: 0.55rem; }
  .brand__divider { display: none; }
  .brand__name b { font-size: 0.82rem; }
}
@media (min-width: 1241px) { .mobile-menu { display: none; } }

/* ---------- RICONOSCIMENTI (officina) ---------- */
.awards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.award {
  position: relative; overflow: hidden;
  background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; display: flex; flex-direction: column; gap: .8rem;
  transition: border-color var(--dur-micro) var(--ease), transform var(--dur-mid) var(--ease);
}
.award:hover { border-color: var(--line-str); transform: translateY(-4px); }
.award::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--honda-red); }
.award__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.award__year { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: -0.03em; color: var(--paper); }
.award__icon { color: var(--honda-red); flex: 0 0 auto; }
.award__icon svg { width: 26px; height: 26px; }
.award h3 { font-size: 1.15rem; }
.award__ente { font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.award p { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 980px) { .awards__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .awards__grid { grid-template-columns: 1fr; } }

/* ---------- PAGINAZIONE ARCHIVI ---------- */
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; padding: .55rem 1rem;
  border: 1px solid var(--line); border-radius: 10px; font-size: var(--fs-sm); font-weight: 600;
  transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--line-str); }
.pagination .page-numbers.current { background: var(--cta-red); border-color: var(--cta-red); color: #fff; }
.pagination .page-numbers.dots { border: none; }
.section--light .pagination .page-numbers { border-color: var(--line-d); }
.section--light .pagination .page-numbers.current { border-color: var(--cta-red); }

/* ---------- RESPONSIVE REFINEMENTS ---------- */
/* CTA multiple che vanno a capo con respiro (es. novità, hero) */
.novita__cta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* Su telefono i bottoni principali diventano full-width e tappabili */
@media (max-width: 560px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn,
  .novita__cta .btn,
  .servizi__cta .btn,
  .finance__cta .btn { width: 100%; justify-content: center; }
  .novita__cta, .servizi__cta, .finance__cta { flex-direction: column; align-items: stretch; }
  .hero__actions .btn__label, .novita__cta .btn__label, .servizi__cta .btn__label, .finance__cta .btn__label { justify-content: center; }
}

/* iOS: input sotto i 16px causano zoom automatico al focus */
@media (max-width: 720px) {
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* Trust grid: una colonna sui telefoni stretti */
@media (max-width: 480px) {
  .trust { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* Righe servizi più compatte su mobile (la colonna meta è nascosta) */
@media (max-width: 820px) {
  .serv { grid-template-columns: auto 1fr auto; gap: 1rem; padding: 1.2rem 0; }
  .serv:hover { padding-left: 0; }
}

/* Mappa più alta e leggibile in verticale su telefono */
@media (max-width: 560px) {
  .map { aspect-ratio: 4/3; }
}

/* ---------- CONTENUTO PAGINE GENERICHE (page.php) ---------- */
.page-content { display: grid; gap: 1.1rem; }
.page-content h2 { margin-top: 1.6rem; }
.page-content h3 { margin-top: 1.2rem; }
.page-content p, .page-content li { color: var(--muted); font-size: var(--fs-body); }
.page-content ul, .page-content ol { padding-left: 1.2rem; display: grid; gap: .5rem; }
.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.page-content a:hover { color: var(--honda-red); }