/* ==========================================================================
   RB Service - Livello grafico: tipografia, profondita, movimento.
   Caricato DOPO base.css e pages.css: ne rifinisce l'aspetto senza
   riscriverne la struttura. Nessuna libreria esterna, nessun font remoto.
   ========================================================================== */

/* --- 1. Tipografia self-hosted (Plus Jakarta Sans variabile) -------------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r-lg: 18px;
  --shadow-brand: 0 18px 40px -18px color-mix(in srgb, var(--accent) 55%, transparent);
}

h1, h2, h3, .door h2 { letter-spacing: -.03em; }
h1 { font-weight: 800; }
h2 { font-weight: 800; }
h3 { font-weight: 700; letter-spacing: -.02em; }

/* --- 2. Movimento: comparsa allo scroll ----------------------------------
   Gli elementi sono resi visibili dal JS. Senza JS restano visibili
   (la classe .js-anim viene messa da main.js solo se lo script parte). */
.js-anim [data-anim] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}
.js-anim [data-anim="left"]  { transform: translate3d(-26px, 0, 0); }
.js-anim [data-anim="right"] { transform: translate3d(26px, 0, 0); }
.js-anim [data-anim="zoom"]  { transform: scale(.96); }
.js-anim [data-anim].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- 3. Header: si compatta e si stacca allo scroll ----------------------- */
.site-header { transition: box-shadow .25s var(--ease), background .25s var(--ease); }
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(36,39,43,.10); background: rgba(255,255,255,.97); }
.site-header.is-stuck .site-header__bar { min-height: 62px; }
.site-header__bar { transition: min-height .25s var(--ease); }
.site-header__logo img { transition: height .25s var(--ease); }
.site-header.is-stuck .site-header__logo img { height: 32px; }

.site-nav__link { position: relative; }
@media (min-width: 1041px) {
  .site-nav__link::before {
    content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .35rem; height: 2px;
    background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left;
    transition: transform .25s var(--ease);
  }
  .site-nav__link:hover::before { transform: scaleX(1); }
  .site-nav__link:hover { background: transparent; }
}

/* --- 4. Bottoni: freccia che scorre --------------------------------------- */
.btn { position: relative; overflow: hidden; }
.btn--primary { box-shadow: var(--shadow-brand); }
.btn--primary:hover { box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn::after {
  content: ""; width: 0; height: 0; opacity: 0; margin-left: 0;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: opacity .2s var(--ease), margin-left .2s var(--ease);
}
.btn:hover::after { opacity: 1; margin-left: .1em; }

/* --- 5. Hero: fondo scuro con reticolo e aloni ---------------------------- */
.hero {
  position: relative; overflow: hidden; border-bottom: 0;
  background:
    radial-gradient(60rem 32rem at 82% -10%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 62%),
    radial-gradient(44rem 30rem at 6% 108%, color-mix(in srgb, var(--brand) 32%, transparent), transparent 60%),
    linear-gradient(168deg, #262a2f 0%, #1c1f23 58%, #17191d 100%);
  color: var(--on-dark);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(80% 70% at 50% 30%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 35%, transparent 100%);
}
.hero::after {
  content: ""; position: absolute; right: -12%; top: -30%; width: 44rem; height: 44rem;
  border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 140px rgba(255,255,255,.05);
}
.hero .wrap, .hero__inner { position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero p { color: rgba(238,242,246,.78); }
.hero .eyebrow {
  color: #fff; background: color-mix(in srgb, var(--accent) 85%, transparent);
  padding: .42em 1em; border-radius: var(--r-pill); letter-spacing: .1em;
}
.hero .btn--ghost { border-color: rgba(255,255,255,.35); color: #fff; background: transparent; }
.hero .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }
.hero .breadcrumb, .hero .breadcrumb a { color: rgba(238,242,246,.66); }
.hero .checklist li::before { border-color: #fff; }
.hero .tag { background: rgba(255,255,255,.14); color: #fff; }

/* Breadcrumb subito sopra un hero scuro: resta leggibile sul chiaro */
.breadcrumb { padding-block: var(--sp-4) var(--sp-2); }

/* --- 6. Card: sollevamento, alone e barra d'accento ----------------------- */
.card { position: relative; overflow: hidden; border-radius: var(--r-lg); }
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.card--link:hover::before, .card:hover::before { transform: scaleY(1); }
.card--link:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.card__icon {
  background: linear-gradient(140deg, var(--accent-soft), color-mix(in srgb, var(--accent) 14%, #fff));
  color: var(--accent-strong);
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.card--link:hover .card__icon, .card:hover .card__icon {
  transform: translateY(-2px) rotate(-4deg);
  background: var(--accent); color: #fff;
}
.card--link .card__more::after {
  content: "\2192"; display: inline-block; transition: transform .25s var(--ease);
}
.card--link:hover .card__more::after { transform: translateX(4px); }

/* --- 7. Porte della home: piu presenza ----------------------------------- */
.door { border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-6) var(--sp-5); }
.door::before { height: 5px; transform-origin: left; transition: height .25s var(--ease); }
.door::after {
  content: ""; position: absolute; right: -3.5rem; bottom: -3.5rem; width: 11rem; height: 11rem;
  border-radius: 50%; background: color-mix(in srgb, var(--door-color) 10%, transparent);
  transform: scale(.55); opacity: 0; transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.door:hover::after { transform: scale(1); opacity: 1; }
.door:hover::before { height: 7px; }
.door > * { position: relative; z-index: 1; }
.door__more::after { content: "\2192"; display: inline-block; margin-left: .4em; transition: transform .25s var(--ease); }
.door:hover .door__more::after { transform: translateX(5px); }

/* --- 8. Numeri che salgono ------------------------------------------------ */
.stats { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.stat { padding: var(--sp-5) 0; border-top: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.stat__num {
  display: block; font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.2rem); font-weight: 800;
  line-height: 1; letter-spacing: -.04em; color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}
.stat__label { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-soft); }
.section--dark .stat { border-top-color: rgba(255,255,255,.28); }
.section--dark .stat__num { color: #fff; }
.section--dark .stat__label { color: var(--on-dark-soft); }
.hero .stat { border-top-color: rgba(255,255,255,.3); }
.hero .stat__num { color: #fff; }
.hero .stat__label { color: rgba(238,242,246,.72); }

/* --- 9. Passi numerati: linea di collegamento ---------------------------- */
.steps > li::before {
  background: var(--accent); color: #fff;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent);
}
.steps > li::after {
  content: ""; position: absolute; left: 1.2rem; top: 2.6rem; bottom: -1.4rem; width: 2px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
}
.steps > li:last-child::after { display: none; }

/* --- 10. Sezioni scure e fascia CTA -------------------------------------- */
.section--dark, .cta-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(50rem 26rem at 88% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
    linear-gradient(160deg, #23262b, #17191d);
}
.cta-band__inner { position: relative; z-index: 1; }
.section--dark .wrap { position: relative; z-index: 1; }

/* --- 11. Elenco marchi: pillole che reagiscono --------------------------- */
.brands li {
  transition: transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.brands li:hover {
  transform: translateY(-2px); border-color: var(--accent);
  color: var(--accent-strong); background: var(--accent-soft);
}

/* --- 12. Domande frequenti ------------------------------------------------ */
.faq details { transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-sm); }
.faq summary:hover { color: var(--accent-strong); }

/* --- 13. Selettore d'area ------------------------------------------------- */
.area-switch__item { transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.area-switch__item.is-active { box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--accent) 70%, transparent); }

/* --- 14. Segnaposto immagine: piu discreto ------------------------------- */
.ph {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, #fff), var(--bg-alt));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  color: var(--ink-soft);
}

/* --- 15. Tabelle ---------------------------------------------------------- */
th { background: color-mix(in srgb, var(--accent) 8%, var(--bg-alt)); color: var(--ink); }
tbody tr { transition: background .18s var(--ease); }
tbody tr:hover { background: var(--accent-soft); }

/* --- 16. Riquadro informativo -------------------------------------------- */
.note { border-radius: var(--r-md); border-left-width: 5px; }

/* --- 17. Barra di avanzamento lettura ------------------------------------ */
.read-progress {
  position: fixed; left: 0; top: 0; height: 3px; width: 100%; transform-origin: left;
  transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--brand));
  z-index: 200; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .read-progress { display: none; } }

/* --- 18. Footer: accento sui titoli -------------------------------------- */
.site-footer h3 { position: relative; padding-bottom: var(--sp-2); }
.site-footer h3::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px;
  background: var(--accent); border-radius: 2px;
}
.site-footer a { transition: color .18s var(--ease), padding-left .18s var(--ease); }
.site-footer li a:hover { padding-left: 4px; }

/* --- 19. Pulsante torna su ------------------------------------------------ */
.to-top {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); width: 46px; height: 46px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: #fff; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, background .2s var(--ease);
  z-index: 90;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent-strong); }
.to-top svg { width: 18px; height: 18px; }

/* --- 20. Rifiniture varie ------------------------------------------------- */
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.section__head h2 { position: relative; }
.eyebrow { position: relative; }
.split--sticky > :first-child { top: calc(var(--header-h) + var(--sp-5)); }

/* --- 21. Fascia numeri dentro l'hero della home -------------------------- */
.hero__stats {
  position: relative; z-index: 1;
  margin-top: clamp(var(--sp-6), 5vw, var(--sp-8));
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero__stats .stat { border-top: 0; padding-block: 0; }
.hero__stats .stat__num { color: #fff; }
.hero__stats .stat__label { color: rgba(238,242,246,.72); max-width: 22ch; }

/* --- 22. Ritocchi per schermi piccoli ------------------------------------ */
@media (max-width: 760px) {
  .hero { padding-block: var(--sp-6) var(--sp-6); }
  .hero h1 { font-size: clamp(1.85rem, 1.2rem + 4vw, 2.4rem); }
  .hero p { font-size: var(--fs-base); }
  .hero::after { width: 26rem; height: 26rem; right: -30%; top: -14%; }
  .hero__stats { margin-top: var(--sp-6); padding-top: var(--sp-4); }
  .hero__stats .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .hero__stats .stat__num { font-size: 1.9rem; }
  .hero__stats .stat__label { font-size: var(--fs-xs); }
  .to-top { right: var(--sp-4); bottom: var(--sp-4); width: 42px; height: 42px; }
  .door { padding: var(--sp-5); }
}

/* =========================================================================
   23. INTESTAZIONE RIDISEGNATA: logo grande, menu a tendina ampio,
   pulsante di assistenza remota. Sostituisce l'aspetto definito in base.css.
   ========================================================================= */

/* --- Barra superiore ----------------------------------------------------- */
.topbar { background: var(--charcoal-deep); }
.topbar__inner { min-height: 42px; gap: var(--sp-5); }
.topbar__support {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .3em .9em; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 90%, #fff);
  color: #fff !important; font-weight: 700; text-decoration: none !important;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.topbar__support:hover { background: var(--accent-strong); transform: translateY(-1px); }
.topbar__support svg { width: 14px; height: 14px; }

/* --- Riga principale ------------------------------------------------------ */
:root { --header-h: 96px; }
.site-header__bar { gap: var(--sp-6); min-height: 96px; }
.site-header__logo img { height: 56px; }
.site-header.is-stuck .site-header__logo img { height: 44px; }
.site-header.is-stuck .site-header__bar { min-height: 74px; }

.site-nav__list { gap: var(--sp-2); }
.site-nav__link { font-size: var(--fs-base); font-weight: 600; padding: .7rem .9rem; }
.site-nav__cta { margin-left: var(--sp-4); padding: .78em 1.4em; }

/* Freccia sulle voci con tendina */
.has-sub > .site-nav__link::after {
  content: ""; width: 7px; height: 7px; margin-left: .15em; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: .55; transition: transform .2s var(--ease), opacity .2s var(--ease);
  border-left: 0; border-top: 0; /* annulla la freccia dei bottoni */
}
.has-sub:hover > .site-nav__link::after { opacity: 1; transform: rotate(45deg) translate(2px, 2px); }

/* --- Tendina ampia -------------------------------------------------------- */
.megamenu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -8px);
  width: min(92vw, 780px); display: grid; grid-template-columns: 250px 1fr; gap: var(--sp-5);
  padding: var(--sp-5); background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; z-index: 120;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.megamenu--narrow { width: min(92vw, 620px); }
.has-sub:hover > .megamenu, .has-sub:focus-within > .megamenu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.megamenu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.megamenu__intro {
  padding: var(--sp-4); border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--accent-soft), color-mix(in srgb, var(--accent) 9%, #fff));
}
.megamenu__eyebrow {
  display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-strong); margin-bottom: var(--sp-2);
}
.megamenu__intro p { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--sp-4); }
.megamenu__cta {
  display: inline-flex; align-items: center; gap: .4em; font-weight: 700;
  font-size: var(--fs-sm); color: var(--accent-strong); text-decoration: none;
}
.megamenu__cta::after { content: "\2192"; transition: transform .2s var(--ease); }
.megamenu__cta:hover::after { transform: translateX(4px); }

.megamenu__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  align-content: start;
}
.megamenu--narrow .megamenu__list { grid-template-columns: 1fr; }
.megamenu__list li { margin: 0; }
.megamenu__list a {
  display: block; padding: .6rem .75rem; border-radius: var(--r-sm); text-decoration: none;
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.megamenu__list a:hover { background: var(--accent-soft); transform: translateX(2px); }
.megamenu__list b { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.megamenu__list span { display: block; font-size: var(--fs-xs); color: var(--ink-faint); margin-top: 1px; }
.megamenu__list a:hover b { color: var(--accent-strong); }

/* Il colore della tendina segue l'area della voce, non quella della pagina */
[data-nav="negozio"]   .megamenu { --accent: var(--negozio);   --accent-strong: var(--negozio-strong);   --accent-soft: var(--negozio-soft); }
[data-nav="industria"] .megamenu { --accent: var(--industria); --accent-strong: var(--industria-strong); --accent-soft: var(--industria-soft); }
[data-nav="loxone"]    .megamenu { --accent: var(--loxone);    --accent-strong: var(--loxone-strong);    --accent-soft: var(--loxone-soft); }
[data-nav="progettazione"] .megamenu { --accent: var(--progetto); --accent-strong: var(--progetto-strong); --accent-soft: var(--progetto-soft); }

/* --- Versione mobile ------------------------------------------------------ */
@media (max-width: 1180px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; }
  .site-nav.is-open { display: block; }
}
@media (min-width: 1181px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; }
}
@media (max-width: 1180px) {
  .site-header__bar { min-height: 78px; }
  .site-header__logo img { height: 46px; }
  .site-nav {
    position: fixed; inset: auto 0 auto 0; top: var(--header-h);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    background: #fff; padding: var(--sp-4) var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
  }
  .megamenu {
    position: static; transform: none; width: auto; opacity: 1; visibility: visible;
    display: block; padding: var(--sp-2) 0 var(--sp-4); border: 0; box-shadow: none;
    background: transparent;
  }
  .megamenu__intro { display: none; }
  .megamenu__list { grid-template-columns: 1fr; padding-left: var(--sp-4); border-left: 2px solid var(--line); }
  .megamenu__list a { padding: .5rem .6rem; }
  .has-sub > .site-nav__link::after { float: right; margin-top: .5em; }
  .site-nav__cta { display: block; text-align: center; margin: var(--sp-4) 0 0; }
}
@media (max-width: 640px) {
  :root { --header-h: 74px; }
  .site-header__logo img { height: 40px; }
  .topbar__inner { min-height: 38px; gap: var(--sp-3); font-size: 12px; }
  .topbar__support { padding: .25em .7em; }
}

/* =========================================================================
   24. IMMAGINI: figure, schermate di prodotto, cornici e loghi partner
   ========================================================================= */
.figure { margin: 0; }
.figure img {
  width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--bg-alt); box-shadow: var(--shadow-md);
}
.figure figcaption {
  margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-faint); text-align: left;
}
.figure--plain img { border: 0; box-shadow: none; background: transparent; }
.figure--frame img { padding: var(--sp-3); background: #fff; }

/* Schermata di prodotto con alone d'accento dietro */
.shot { position: relative; }
.shot::before {
  content: ""; position: absolute; inset: 12% -6% -8% -6%; border-radius: var(--r-lg);
  background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  filter: blur(26px); z-index: 0;
}
.shot img { position: relative; z-index: 1; }
.section--dark .figure img, .hero .figure img { border-color: rgba(255,255,255,.16); }
.section--dark .figure figcaption, .hero .figure figcaption { color: var(--on-dark-soft); }

/* Galleria di schermate */
.shots { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.shots .figure img { box-shadow: var(--shadow-sm); }

/* Striscia di loghi/protocolli */
.logo-strip { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); align-items: center; }
.logo-strip img { border-radius: var(--r-md); border: 1px solid var(--line); }

/* Immagine di copertina dentro una card */
.card__media { margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4); }
.card__media img { width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0; aspect-ratio: 16 / 10; object-fit: cover; }

/* --- Badge partner -------------------------------------------------------- */
.partner-badge {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm);
}
.partner-badge img { height: 46px; width: auto; }
.partner-badge__text { display: grid; line-height: 1.25; }
.partner-badge__text b { font-size: var(--fs-sm); }
.partner-badge__text span { font-size: var(--fs-xs); color: var(--ink-faint); }
.section--dark .partner-badge, .hero .partner-badge {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18);
}
.section--dark .partner-badge__text b, .hero .partner-badge__text b { color: #fff; }
.section--dark .partner-badge__text span, .hero .partner-badge__text span { color: var(--on-dark-soft); }

/* Hero con immagine affiancata */
.hero--split .wrap { display: grid; gap: var(--sp-7); align-items: center; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.hero--split .hero__inner { max-width: none; }
@media (max-width: 900px) { .hero--split .wrap { grid-template-columns: 1fr; } }

/* =========================================================================
   25. INTESTAZIONI CON IMMAGINE DI SFONDO
   La pagina imposta --hero-img sul tag <section class="hero">:
     <section class="hero" style="--hero-img: url('../assets/img/sfondi/negozio.jpg')">
   Se la variabile non c'e', resta il fondo grafico gia' definito piu' sopra.
   Per sostituire uno sfondo con una foto vera basta salvarla con lo stesso nome
   dentro assets/img/sfondi/.
   ========================================================================= */
.hero {
  background-image:
    radial-gradient(60rem 32rem at 82% -10%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 62%),
    linear-gradient(168deg, rgba(38,42,47,.92) 0%, rgba(23,25,29,.96) 100%),
    var(--hero-img, none);
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}
.hero::before { opacity: .6; }

/* Con una foto vera serve piu' contrasto sotto al testo */
.hero--foto {
  background-image:
    linear-gradient(100deg, rgba(18,20,23,.95) 0%, rgba(18,20,23,.86) 42%, rgba(18,20,23,.62) 100%),
    var(--hero-img, none);
  background-size: auto, cover;
  background-position: center, center 42%;
}
/* Sotto i 900px la colonna di testo copre tutta la larghezza: serve piu' velo */
@media (max-width: 900px) {
  .hero--foto {
    background-image:
      linear-gradient(180deg, rgba(18,20,23,.90) 0%, rgba(18,20,23,.86) 60%, rgba(18,20,23,.78) 100%),
      var(--hero-img, none);
  }
}
.hero--foto::before { opacity: .25; }
.hero--foto::after { display: none; }

/* Altezza minima piu' generosa: l'intestazione fa da copertina della pagina */
.hero { min-height: 380px; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1100px) { .hero { min-height: 460px; } }
@media (max-width: 760px) { .hero { min-height: 300px; } }

/* Badge partner dentro l'intestazione scura */
.hero__badge { max-width: 260px; margin-top: var(--sp-5); }
.hero__badge img { border-radius: var(--r-sm); }
@media (max-width: 760px) { .hero__badge { max-width: 210px; } }

/* =========================================================================
   26. Menu: con sei voci serve piu' respiro. Le voci non vanno mai a capo e
   la versione compatta parte prima.
   ========================================================================= */
.site-nav__list { flex-wrap: nowrap; }
.site-nav__link { white-space: nowrap; }
.site-nav__cta { white-space: nowrap; margin-left: var(--sp-3); }
.site-header__bar { gap: var(--sp-4); }

@media (min-width: 1281px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; }
}
@media (max-width: 1280px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; }
  .site-nav.is-open { display: block; }
  .site-nav {
    position: fixed; inset: auto 0 auto 0; top: var(--header-h);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    background: #fff; padding: var(--sp-4) var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
  }
  .site-nav__list { flex-direction: column; align-items: stretch; }
  .megamenu {
    position: static; transform: none; width: auto; opacity: 1; visibility: visible;
    display: block; padding: var(--sp-2) 0 var(--sp-4); border: 0; box-shadow: none; background: transparent;
  }
  .megamenu__intro { display: none; }
  .megamenu__list { grid-template-columns: 1fr; padding-left: var(--sp-4); border-left: 2px solid var(--line); }
  .site-nav__cta { display: block; text-align: center; margin: var(--sp-4) 0 0; }
}
@media (min-width: 1281px) and (max-width: 1460px) {
  .site-nav__link { font-size: var(--fs-sm); padding: .65rem .7rem; }
  .site-header__logo img { height: 48px; }
  .site-nav__cta { padding: .7em 1.1em; font-size: var(--fs-xs); }
}

/* =========================================================================
   27. Logo: mantiene sempre le proporzioni originali.
   L'attributo width nell'HTML serve a riservare lo spazio prima del
   caricamento, ma non deve mai schiacciare l'immagine.
   ========================================================================= */
.site-header__logo img,
.site-footer__logo img { width: auto; max-width: 100%; }
.site-footer__logo img { height: 44px; }
@media (max-width: 640px) { .site-footer__logo img { height: 38px; } }

/* =========================================================================
   28. SEZIONI SCURE: tutto quello che sta dentro deve restare leggibile.
   Prima le schede restavano bianche mentre il testo diventava bianco:
   qui i componenti vengono ridisegnati per il fondo scuro.
   ========================================================================= */
.section--dark {
  --line: rgba(255,255,255,.16);
  --line-soft: rgba(255,255,255,.10);
  --ink: #ffffff;
  --ink-soft: rgba(238,242,246,.80);
  --ink-faint: rgba(238,242,246,.60);
  --bg: rgba(255,255,255,.06);
  --bg-alt: rgba(255,255,255,.04);
  --accent-soft: rgba(255,255,255,.12);
  --accent-strong: #ffffff;
}

.section--dark .card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
  color: var(--on-dark);
}
.section--dark .card h3,
.section--dark .card h4 { color: #fff; }
.section--dark .card p,
.section--dark .card li,
.section--dark .card span:not(.tag):not(.card__more) { color: rgba(238,242,246,.80); }
.section--dark .card--link:hover {
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.34);
}
.section--dark .card::before { background: #fff; }
.section--dark .card__icon { background: rgba(255,255,255,.14); color: #fff; }
.section--dark .card--link:hover .card__icon,
.section--dark .card:hover .card__icon { background: #fff; color: var(--charcoal-deep); }
.section--dark .card__more { color: #fff; }

.section--dark .card--flat { background: rgba(255,255,255,.05); }

/* Elenchi, riquadri e tabelle dentro le sezioni scure */
.section--dark .note {
  background: rgba(255,255,255,.08);
  border-left-color: #fff;
  color: var(--on-dark);
}
.section--dark .note p,
.section--dark .note li { color: rgba(238,242,246,.86); }
.section--dark .note b, .section--dark .note strong { color: #fff; }

.section--dark .faq details { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.section--dark .faq summary { color: #fff; }
.section--dark .faq summary::after { color: #fff; }
.section--dark .faq details > p { color: rgba(238,242,246,.80); }

.section--dark .specs li { border-bottom-color: rgba(255,255,255,.14); color: rgba(238,242,246,.82); }
.section--dark .specs b { color: #fff; }

.section--dark .brands li {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  color: rgba(238,242,246,.86);
}
.section--dark .brands li:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }

.section--dark th { background: rgba(255,255,255,.10); color: #fff; }
.section--dark td { color: rgba(238,242,246,.82); }
.section--dark th, .section--dark td { border-bottom-color: rgba(255,255,255,.14); }
.section--dark tbody tr:hover { background: rgba(255,255,255,.06); }

.section--dark .steps > li::before { background: #fff; color: var(--charcoal-deep); box-shadow: none; }
.section--dark .steps h3 { color: #fff; }
.section--dark .steps p { color: rgba(238,242,246,.80); }
.section--dark .eyebrow { color: #fff; }
.section--dark .tag { background: rgba(255,255,255,.16); color: #fff; }
.section--dark .section__head p { color: rgba(238,242,246,.80); }
.section--dark a:not(.btn) { color: #fff; }
.section--dark .btn--ghost { border-color: rgba(255,255,255,.45); color: #fff; background: transparent; }
.section--dark .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.section--dark .ph { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.22); color: rgba(238,242,246,.70); }

/* =========================================================================
   29. SPIGOLI VIVI
   Scelta del titolare: le schede e i contenitori non hanno angoli arrotondati.
   Restano tondi solo i pulsanti, le etichette e il selettore, che sono
   elementi di comando e non contenitori.
   ========================================================================= */
.card,
.door,
.figure img,
.ph,
.note,
.faq details,
.megamenu,
.megamenu__intro,
.card__icon,
.partner-badge,
.resume-bar,
.map-frame,
.logo-strip img,
.hero__badge img { border-radius: 0; }

.card__media img { border-radius: 0; }
.card::before { border-radius: 0; }

/* Le schede senza angoli hanno bisogno di un bordo un po' piu' netto */
.card { border-color: var(--line); }
.card--link:hover { border-color: var(--accent); }
.section--dark .card { border-color: rgba(255,255,255,.18); }

/* Il menu a tendina resta squadrato ma con la stessa ombra */
.megamenu { border-radius: 0; }
.megamenu__list a { border-radius: 0; }
.subnav { border-radius: 0; }

/* Campi del modulo: squadrati anche loro, per coerenza */
.field input, .field select, .field textarea { border-radius: 0; }
.table-scroll table { border-radius: 0; }

/* =========================================================================
   30. BANNER DEL CONSENSO AI COOKIE
   ========================================================================= */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  padding: var(--sp-4); display: flex; justify-content: center;
  opacity: 0; transform: translateY(14px);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.cookie.is-in { opacity: 1; transform: none; }
.cookie__box {
  width: min(100%, 880px); background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-top: 3px solid var(--accent);
  box-shadow: 0 -6px 40px rgba(20,22,25,.22);
  padding: var(--sp-5);
  display: grid; gap: var(--sp-4);
}
.cookie h2 { font-size: var(--fs-md); margin: 0 0 var(--sp-2); }
.cookie p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.cookie__scelte { display: grid; gap: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--line-soft); }
.cookie__voce { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-soft); }
.cookie__voce input { margin-top: .25em; flex: 0 0 auto; }
.cookie__voce b { display: block; color: var(--ink); }
.cookie__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.cookie__link {
  background: none; border: 0; padding: .5em 0; cursor: pointer;
  font: 600 var(--fs-sm) var(--font-sans); color: var(--accent-strong);
  text-decoration: underline; text-underline-offset: 3px;
}
.cookie__link:hover { color: var(--accent); }
@media (max-width: 620px) {
  .cookie { padding: 0; }
  .cookie__box { border-left: 0; border-right: 0; border-bottom: 0; }
  .cookie__azioni .btn { flex: 1 1 100%; }
}

/* =========================================================================
   31. SCHEDE PIU' VISIVE
   Il sito era troppo testuale: qui gli strumenti per alleggerirlo.
   ========================================================================= */

/* Icona grande in testa alla scheda */
.card__icon--xl {
  width: 64px; height: 64px; margin-bottom: var(--sp-4);
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-strong);
}
.card__icon--xl svg { width: 32px; height: 32px; }
.section--dark .card__icon--xl { background: rgba(255,255,255,.12); color: #fff; }

/* Scheda con icona affiancata al testo, piu' compatta della versione classica */
.card--icon { display: grid; grid-template-columns: 52px 1fr; gap: var(--sp-4); align-items: start; }
.card--icon .card__icon { margin-bottom: 0; width: 52px; height: 52px; }
.card--icon .card__icon svg { width: 26px; height: 26px; }

/* Griglia di voci brevi con icona: sostituisce i paragrafi lunghi */
.feature-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.feature {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-4); align-items: start;
}
.feature__icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-strong);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: var(--fs-base); margin: 0 0 var(--sp-1); }
.feature p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.section--dark .feature__icon { background: rgba(255,255,255,.12); color: #fff; }
.section--dark .feature h3 { color: #fff; }
.section--dark .feature p { color: rgba(238,242,246,.80); }

/* Striscia di icone con etichetta: utile per elenchi di marchi o servizi */
.icon-row { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); text-align: center; }
.icon-row > * { display: grid; justify-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-soft); }
.icon-row svg { width: 30px; height: 30px; color: var(--accent); }

/* Blocco immagine + testo alternati, per spezzare le pagine lunghe */
.media-row { display: grid; gap: var(--sp-6); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.media-row + .media-row { margin-top: var(--sp-7); }
.media-row--flip > .media-row__testo { order: 2; }
@media (max-width: 780px) { .media-row--flip > .media-row__testo { order: 0; } }
.media-row__testo h3 { margin-bottom: var(--sp-3); }
.media-row img { width: 100%; }

/* Elenco a due colonne: accorcia visivamente i muri di testo */
.two-cols { columns: 2; column-gap: var(--sp-6); }
.two-cols li { break-inside: avoid; }
@media (max-width: 700px) { .two-cols { columns: 1; } }

/* =========================================================================
   32. CONVIVENZA CON LA CHAT 3CX
   Il widget del centralino si posiziona in basso a destra: il pulsante
   "torna su" viene spostato a sinistra per non finirci sopra.
   ========================================================================= */
.to-top { right: auto; left: var(--sp-5); }
@media (max-width: 640px) { .to-top { left: var(--sp-4); bottom: var(--sp-4); } }

/* Il widget 3CX si disegna da solo in una shadow root: qui si controlla
   solo lo spazio che lo circonda, non il suo aspetto interno. */
call-us-selector { position: relative; z-index: 250; }

/* =========================================================================
   33. HOME: le due foto reali nell'intestazione
   ========================================================================= */
.hero__foto { display: grid; gap: var(--sp-4); grid-template-columns: 1.35fr 1fr; align-items: end; }
.hero__foto .figure { margin: 0; }
.hero__foto img {
  width: 100%; height: 100%; object-fit: cover;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 44px rgba(0,0,0,.38);
}
.hero__foto .figure:first-child img { aspect-ratio: 4 / 3; }
.hero__foto .figure:last-child img { aspect-ratio: 3 / 4; }
@media (max-width: 900px) {
  .hero__foto { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .hero__foto .figure:last-child img { aspect-ratio: 4 / 3; }
}
@media (max-width: 520px) {
  .hero__foto .figure:last-child { display: none; }
}
/* Sull'intestazione della home lo sfondo fotografico va tenuto molto indietro */
.hero--split { background-blend-mode: normal; }
.hero--split::before { opacity: .35; }

/* Immagine tecnologica dell'intestazione della home */
.hero__tech img { width: 100%; height: auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.35)); }
@media (max-width: 900px) { .hero__tech { max-width: 520px; margin-inline: auto; } }

/* =========================================================================
   34. MOTTO AZIENDALE: "Tecnologie su misura"
   ========================================================================= */
/* Il motto apre l'intestazione della home, sopra il titolo */
.motto {
  font-size: clamp(1.05rem, .85rem + .9vw, 1.5rem);
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; margin: 0 0 var(--sp-3); line-height: 1.2;
}
.motto::after {
  content: ""; display: block; width: 68px; height: 3px; margin-top: var(--sp-3);
  background: var(--accent);
}

.site-footer__motto {
  font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; margin-bottom: var(--sp-3);
}

/* =========================================================================
   35. BANDA ILLUSTRATA IN TESTA ALLA SCHEDA
   Ogni scheda puo' aprirsi con una banda grafica a tema, generata da
   tools/genera_bande.py e salvata in assets/img/bande/.
   Uso:
     <article class="card">
       <div class="card__banda"><img src="../assets/img/bande/timbri.svg" alt=""></div>
       <h3>Timbri</h3> ...
     </article>
   ========================================================================= */
.card__banda {
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
  overflow: hidden; background: var(--bg-alt); line-height: 0;
}
.card__banda img {
  width: 100%; height: auto; aspect-ratio: 8 / 3; object-fit: cover; display: block;
  transition: transform .45s var(--ease);
}
.card--link:hover .card__banda img, .card:hover .card__banda img { transform: scale(1.045); }

/* Con la banda, l'icona in testa diventa superflua */
.card__banda + .card__icon { display: none; }

/* Nelle griglie fitte la banda si accorcia, per non rubare spazio al testo */
.grid--4 .card__banda img { aspect-ratio: 3 / 1; }
@media (max-width: 560px) { .card__banda img { aspect-ratio: 3 / 1; } }

/* Nelle sezioni scure la banda resta com'e': i colori sono gia' pieni */
.section--dark .card__banda { background: rgba(255,255,255,.06); }

/* Dato di riprova nella intestazione di prodotto */
.claim-clienti {
  margin: var(--sp-5) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em;
  font-size: var(--fs-md); color: rgba(238,242,246,.86);
}
.claim-clienti__num {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 800;
  letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums;
}

/* =========================================================================
   36. LE QUATTRO PORTE DELLA HOME: due sopra e due sotto.
   Con quattro schede la griglia automatica ne lasciava una da sola a capo.
   ========================================================================= */
.doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 780px) { .doors { grid-template-columns: 1fr; } }
/* Le porte affiancate sono piu' larghe: il testo puo' respirare su due colonne */
@media (min-width: 1100px) {
  .door { padding: var(--sp-6) var(--sp-7) var(--sp-6) var(--sp-6); }
  .door h2 { font-size: var(--fs-2xl); }
}

/* =========================================================================
   37. SCHEDA ILLUSTRATA
   Banda a colori in testa, titolo bianco sopra la banda, distintivo con
   l'icona sporgente, testo e pulsante sotto.

   <a class="card card--illustrata" href="...">
     <div class="card__testa">
       <img src="../assets/img/bande/timbri.svg" alt="">
       <span class="card__distintivo" aria-hidden="true"><svg ...></svg></span>
       <h3>Titolo della scheda</h3>
     </div>
     <div class="card__corpo">
       <p>Testo breve.</p>
       <span class="card__azione">Scopri di piu</span>
     </div>
   </a>
   ========================================================================= */
.card--illustrata {
  padding: 0; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg);
}
.card--illustrata::before { display: none; }

.card__testa { position: relative; line-height: 0; }
.card__testa img {
  width: 100%; height: auto; aspect-ratio: 5 / 2; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.card--illustrata:hover .card__testa img { transform: scale(1.05); }
.card__testa h3 {
  position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-4);
  margin: 0; color: #fff; font-size: var(--fs-lg); line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

.card__distintivo {
  position: absolute; top: var(--sp-4); left: var(--sp-5);
  width: 54px; height: 54px; display: grid; place-items: center;
  background: #fff; color: var(--accent-strong);
  box-shadow: 0 6px 18px rgba(20,22,25,.28);
  transition: transform .3s var(--ease);
}
.card__distintivo svg { width: 26px; height: 26px; }
.card--illustrata:hover .card__distintivo { transform: translateY(-2px); }

.card__corpo {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5); flex: 1 1 auto;
}
.card__corpo p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.card__corpo ul { margin: 0; }

.card__azione {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .62em 1.4em; border: 2px solid var(--accent);
  color: var(--accent-strong); font-weight: 700; font-size: var(--fs-sm);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.card__azione::after { content: "\2192"; transition: transform .25s var(--ease); }
.card--illustrata:hover .card__azione { background: var(--accent); color: #fff; }
.card--illustrata:hover .card__azione::after { transform: translateX(4px); }

/* Nelle griglie fitte la banda si abbassa */
.grid--4 .card__testa img { aspect-ratio: 3 / 1; }
.grid--4 .card__distintivo { width: 44px; height: 44px; top: var(--sp-3); left: var(--sp-4); }
.grid--4 .card__distintivo svg { width: 22px; height: 22px; }
.grid--4 .card__testa h3 { font-size: var(--fs-md); left: var(--sp-4); right: var(--sp-4); }

/* Sezioni scure */
.section--dark .card--illustrata { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.section--dark .card__corpo p { color: rgba(238,242,246,.80); }
.section--dark .card__azione { border-color: rgba(255,255,255,.55); color: #fff; }
.section--dark .card--illustrata:hover .card__azione { background: #fff; color: var(--charcoal-deep); }

@media (max-width: 520px) {
  .card__testa img { aspect-ratio: 2 / 1; }
  .card__testa h3 { font-size: var(--fs-md); }
}

/* =========================================================================
   38. FASCIA NUMERI DELLA HOME: una sola riga, piu' compatta
   ========================================================================= */
.hero__stats .stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-4);
}
.hero__stats .stat { border-top: 2px solid rgba(255,255,255,.22); padding-top: var(--sp-3); }
.hero__stats .stat__num { font-size: clamp(1.3rem, .95rem + .9vw, 1.85rem); }
.hero__stats .stat__label { font-size: var(--fs-xs); line-height: 1.35; max-width: 20ch; }
@media (max-width: 1000px) {
  .hero__stats .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); }
}
@media (max-width: 560px) {
  .hero__stats .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__stats .stat__num { font-size: 1.4rem; }
}

/* Mappa incorporata nella pagina contatti */
.mappa { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--bg-alt); border: 1px solid var(--line); }
.mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 700px) { .mappa { aspect-ratio: 1 / 1; } }

/* =========================================================================
   39. FASCIA NUMERI: via le righe di separazione
   Niente linea sopra la fascia e niente trattini sopra ogni numero:
   i valori si reggono da soli.
   ========================================================================= */
.hero__stats { border-top: 0; padding-top: 0; margin-top: clamp(var(--sp-6), 4vw, var(--sp-7)); }
.hero__stats .stat { border-top: 0; padding-top: 0; }
.hero__stats .stats { gap: var(--sp-5) var(--sp-6); }
.hero__stats .stat__num { line-height: 1; }
.hero__stats .stat__label { margin-top: var(--sp-2); color: rgba(238,242,246,.66); }

/* Una sola riga sottile sopra la fascia dei numeri, nessun trattino per voce */
.hero__stats {
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: clamp(var(--sp-5), 3vw, var(--sp-6));
}