/* ═══════════════════════════════════════════════
   M.G. Srl — Style v2 — Layout Dinamico
   Ispirato a tecnocurve.it: sezioni full-bleed,
   zigzag testo/foto, process steps grafici.
   ═══════════════════════════════════════════════ */

/* Font ospitati sul sito (03/09/2026): DM Sans e Outfit in versione variabile, sottoinsieme
   latino, da @fontsource-variable (gli stessi file che serviva Google Fonts). Tolta la richiesta
   bloccante a fonts.googleapis.com e la connessione a fonts.gstatic.com; nessun dato del
   visitatore inviato a Google. I file stanno in css/fonts/ e head.php li precarica.
   Il corsivo non c'e' (il sito lo usa in un solo punto): il browser lo sintetizza. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url(fonts/dm-sans-latin-wght-normal.woff2) format('woff2-variations'), url(fonts/dm-sans-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/outfit-latin-wght-normal.woff2) format('woff2-variations'), url(fonts/outfit-latin-wght-normal.woff2) format('woff2'); }

:root {
  --mg-dark: #0a1628;          /* blu profondo: solo footer e micro-UI sovrapposta */
  --mg-dark-soft: #0f2033;     /* versione piu' chiara per le fasce di sezione */
  --mg-blue: #0b6e8c;
  --mg-blue-light: #5bc4e8;
  --mg-blue-glow: #3da8ca;
  --mg-cyan: #7de0f5;
  --mg-white: #fff;
  --mg-gray-50: #f7f9fc;
  --mg-gray-100: #eef2f7;
  --mg-gray-200: #d4dce8;
  --mg-gray-400: #6b7a8f;   /* era #8a98ab (2,9:1 su bianco); ora ≈4,6:1 — AA (03/09/2026) */
  --mg-gray-600: #4a5568;
  --mg-gray-800: #1e293b;
  --font-h: 'Outfit', sans-serif;
  --font-b: 'DM Sans', sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --radius: 20px;
  --radius-sm: 12px;
}

/* ── Reset & Base ── */
html { scroll-behavior: smooth; scroll-padding-top: 90px }
body { font-family: var(--font-b); color: var(--mg-gray-800); overflow-x: hidden; margin: 0 }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-h) }
img { max-width: 100%; height: auto }

/* ── Parallax BG ── */
.parallax-bg {
  position: fixed; inset: 0; z-index: -1;
  background: url('../img/progettazione/vettoriali/mgsrl-impianti-manutenzioni-revamping-carpenteria-metallica-progettazione-vettoriali-01.png') center/cover no-repeat;
  opacity: .1; filter: brightness(.7);
}

/* ═══════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════ */
.mg-nav {
  transition: background .4s var(--ease), box-shadow .4s, padding .3s;
  padding-top: 12px; padding-bottom: 12px;
  flex-wrap: nowrap;
  /* Sopra a TUTTO il contenuto (incl. blocco CTA). Restano sopra la navbar
     solo il lightbox galleria (2000) e il cookie banner (1500), per scelta. */
  z-index: 1080;
}
/* Il logo non deve MAI deformarsi né sparire: niente compressione, niente a-capo. */
.mg-nav .navbar-brand { flex: 0 0 auto; }
.mg-nav .navbar-collapse { min-width: 0; }

/* ── Layout navbar full-width: logo sx · menu centro · WhatsApp dx ──────── */
.mg-nav > .container-fluid {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: .75rem; padding-left: 2rem; padding-right: 2rem;
}
.mg-nav .navbar-nav { flex-wrap: nowrap; }      /* le voci di menu non vanno a capo */
.mg-nav-center { flex: 1 1 auto; }              /* il collapse occupa il centro */
.mg-nav-right {                                  /* cluster destro sempre visibile */
  flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; margin-left: auto;
}
/* Pulsante WhatsApp (sempre visibile, fuori dal menu a scomparsa) */
.nav-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: #25D366; color: #fff !important; font-family: var(--font-h);
  font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
  padding: .5rem 1rem; border-radius: 8px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 16px rgba(37,211,102,.3); transition: all .3s var(--ease);
}
.nav-wa:hover { background: #1ebe5b; color: #fff !important; transform: translateY(-1px); }
.nav-wa i { font-size: 1.1rem; line-height: 1; }
/* Sotto i 1400px lo spazio è prezioso: WhatsApp diventa cerchio icona-only */
@media (max-width: 1399.98px) {
  .nav-wa { padding: 0; width: 40px; height: 40px; border-radius: 50%; }
  .nav-wa-label { display: none; }
}
.mg-nav.scrolled {
  background: rgba(10,22,40,.97) !important;
  box-shadow: 0 2px 40px rgba(0,0,0,.25);
  padding-top: 6px; padding-bottom: 6px;
  backdrop-filter: blur(16px);
}
.mg-nav .navbar-brand img {
  height: 80px; width: auto; max-width: none; flex-shrink: 0;
  transition: height .3s, filter .3s;
  filter: brightness(1.9) saturate(1.3) contrast(1.05);
}
.mg-nav.scrolled .navbar-brand img { height: 52px; filter: brightness(2.1) saturate(1.2) contrast(1.1) }
/* Dicitura attività sotto il logo (navbar), su due righe centrate */
.mg-nav .navbar-brand { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.mg-brand-tagline {
  font-family: var(--font-h); font-weight: 500; text-transform: uppercase;
  font-size: .56rem; letter-spacing: .12em; color: rgba(255,255,255,.65);
  margin-top: 4px; white-space: nowrap; text-align: center; line-height: 1.25;
}
.mg-nav.scrolled .mg-brand-tagline { font-size: .5rem; }
@media (max-width: 575.98px){ .mg-brand-tagline { font-size: .44rem; letter-spacing: .07em; } }
/* Dicitura attività nel footer */
.mg-ft-tagline {
  font-family: var(--font-h); font-weight: 500; text-transform: uppercase;
  font-size: .68rem; letter-spacing: .08em; color: rgba(255,255,255,.55);
  text-align: left; line-height: 1.3;
}
.mg-nav .nav-link {
  font-family: var(--font-h); font-size: .8rem; font-weight: 500;
  color: rgba(255,255,255,.78) !important; text-transform: uppercase;
  letter-spacing: .03em; padding: .5rem .8rem !important;
  border-radius: 8px; transition: all .25s;
}
.mg-nav .nav-link:hover, .mg-nav .nav-link.active {
  color: var(--mg-cyan) !important; background: rgba(91,196,232,.07);
}
.mg-nav .dropdown-menu {
  background: var(--mg-dark-soft); border: 1px solid rgba(91,196,232,.12);
  border-radius: var(--radius-sm); padding: .5rem; min-width: 240px;
}
.mg-nav .dropdown-item {
  color: rgba(255,255,255,.7); font-size: .84rem; border-radius: 8px;
  padding: .45rem 1rem; transition: all .2s;
}
.mg-nav .dropdown-item:hover { background: rgba(91,196,232,.1); color: var(--mg-cyan) }
.mg-nav .dropdown-header {
  color: var(--mg-blue-light); font-family: var(--font-h); font-weight: 700;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
}
.mg-nav .dropdown-divider { border-color: rgba(255,255,255,.06) }
.btn-cta {
  background: var(--mg-blue) !important; color: #fff !important;
  font-family: var(--font-h); font-weight: 600; font-size: .8rem;
  padding: .5rem 1.3rem; border-radius: 8px; border: none;
  text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 0 2px 16px rgba(11,110,140,.3); transition: all .3s var(--ease);
}
.btn-cta:hover { background: var(--mg-blue-glow) !important; transform: translateY(-1px) }
.navbar-toggler { border: none; box-shadow: none !important }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,.85)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* Zona "stretta" (1200–1400px): menu espanso ma compatto, logo un filo più
   piccolo (sempre in proporzione, mai deformato) per non andare in overflow. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .mg-nav .navbar-brand img { height: 58px; }
  .mg-nav .nav-link { padding: .45rem .4rem !important; font-size: .8rem; letter-spacing: 0; }
  .mg-nav .navbar-nav { gap: 0 !important; }
  .btn-cta { padding: .45rem .9rem; font-size: .8rem; }
  .mg-nav > .container-fluid { padding-left: 1rem; padding-right: 1rem; gap: .4rem; }
}
@media(max-width:1199.98px) {
  /* Sotto xl: il collapse scende su una riga propria; logo + hamburger + WhatsApp restano in alto */
  .mg-nav > .container-fluid { flex-wrap: wrap; padding-left: 1rem; padding-right: 1rem; }
  .mg-nav-center { flex-basis: 100%; }
  .navbar-collapse {
    background: rgba(10,22,40,.98); border-radius: var(--radius-sm);
    padding: 1rem; margin-top: .5rem; backdrop-filter: blur(20px);
  }
  .mg-nav .dropdown-menu { background: rgba(255,255,255,.05); border: none }
  .mg-nav .navbar-brand img { height: 64px; filter: brightness(1.8) }
  .mg-nav.scrolled .navbar-brand img { height: 44px }
}

/* ═══════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════ */
.pg-hd {
  background: var(--mg-dark-soft); position: relative;
  overflow: hidden; padding: 10rem 0 4rem;
}
.pg-hd .hero-grad { position: absolute; inset: 0; z-index: 1 }
.pg-hd .container { position: relative; z-index: 2 }
.pg-hd h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: #fff }
.pg-hd .breadcrumb { font-size: .84rem }
.pg-hd .breadcrumb-item a { color: rgba(255,255,255,.5); text-decoration: none }
.pg-hd .breadcrumb-item.active { color: var(--mg-blue-light) }
.pg-hd .breadcrumb-item+.breadcrumb-item::before { color: rgba(255,255,255,.3) }
.hero-grad {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, rgba(13,28,45,.82), rgba(10,96,122,.74) 50%, rgba(13,28,45,.82));
  z-index: 1;
}

/* ═══════════════════════════════════════════════
   SECTION LABELS & TITLES (riutilizzati ovunque)
   ═══════════════════════════════════════════════ */
.s-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-h); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--mg-blue);
}
.s-label::before {
  content: ''; width: 28px; height: 2px;
  background: var(--mg-blue); border-radius: 2px;
}
.s-title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em }
.bg-mg { background: var(--mg-gray-50) }
.bg-dk {
  /* Fascia di sezione: blu alleggerito scelto da Michele (31/08).
     Il --mg-dark pieno resta al footer. */
  background: #16304a;
  color: #fff;
}
.bg-dk .s-label { color: var(--mg-blue-light) }
.bg-dk .s-label::before { background: var(--mg-blue-light) }
.bg-dk .s-title { color: #fff }
/* Fascia grigio chiaro con card blu: stessa ricetta di .proc-section (Michele, 02/09 sera:
   «in home le nostre lavorazioni non mettere lo sfondo blu scuro, usa uno sfondo grigio chiaro
   come blocco div sotto card blu»). Se si ritocca .proc-section, ritoccare anche qui. */
.bg-lt {
  background: linear-gradient(135deg, rgba(232,237,244,.5) 0%, rgba(220,228,238,.5) 100%);
  color: var(--mg-gray-800);
}
.bg-lt .s-title { color: var(--mg-gray-800) }

/* ═══════════════════════════════════════════════
   ZIGZAG SECTIONS — Layout alternato FULL-WIDTH
   Sezioni larghe, padding generoso, immagini contenute.
   ═══════════════════════════════════════════════ */
.zz-section {
  padding: 5rem 0;
  position: relative;
}
.zz-section.zz-alt {
  background: var(--mg-gray-50);
}
.zz-title {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 700; line-height: 1.2;
  margin-bottom: 1.8rem;
  letter-spacing: -.01em;
}
.zz-subtitle {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 600; margin-bottom: 1.5rem;
}
.zz-text {
  padding-right: 2rem;
}
.flex-lg-row-reverse .zz-text {
  padding-right: 0;
  padding-left: 2rem;
}
.zz-text p {
  color: var(--mg-gray-600); line-height: 1.9;
  margin-bottom: 1.2rem; text-align: justify;
  font-size: .95rem;
}
.zz-text .page-intro { font-size: 1.05rem }

/* Immagine zigzag — CONTENUTA nel suo riquadro */
.zz-img-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  cursor: default;
  display: block;
  box-shadow: 0 16px 48px rgba(10,22,40,.1);
  /* forza il clipping degli angoli arrotondati durante lo zoom dell'immagine
     (fix bug Chrome/Safari: overflow:hidden + border-radius su figlio in transform) */
  -webkit-transform: translateZ(0);
  isolation: isolate;
}
/* Variante immagine quadrata: riempie un quadrato, colonna piu' stretta */
.zz-img-wrap.zz-square { aspect-ratio: 1 / 1 !important; max-width: 400px; margin-inline: auto; }
.zz-img-wrap.zz-square .zz-img { width: 100%; height: 100%; object-fit: cover; }
.zz-img-wrap::after {
  content: '';
  position: absolute; top: -2px; left: -2px;
  width: 60px; height: 60px;
  border-top: 3px solid var(--mg-blue-light);
  border-left: 3px solid var(--mg-blue-light);
  border-radius: var(--radius) 0 0 0;
  z-index: 2;
  transition: all .4s var(--ease);
}
.zz-img-wrap:hover::after {
  width: 80px; height: 80px;
}
.zz-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
/* overlay zoom su immagine zigzag cliccabile */
.zz-img-wrap .mg-gal-zoom { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.4rem; background:linear-gradient(180deg,rgba(13,31,56,0) 55%,rgba(13,31,56,.45)); opacity:0; transition:opacity .35s; pointer-events:none }
.zz-img-wrap:hover .mg-gal-zoom { opacity:1 }
.zz-img-wrap:hover .zz-img {
  transform: scale(1.04);
}
/* Stesso fix di clipping per le altre immagini con zoom al hover */
.pr-card, .g-item, .mg-gal-item {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
/* Media column — garantisce che l'immagine non sfori */
.zz-media {
  max-width: 100%;
  overflow: hidden;
}

/* Placeholder in zigzag */
.zz-placeholder {
  background: var(--mg-gray-50);
  border: 2px dashed var(--mg-gray-200);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 2rem;
}
.zz-placeholder::after { display: none }
.zz-placeholder .ph-icon { font-size: 3rem; color: var(--mg-blue-light); opacity: .5; margin-bottom: .8rem }
.zz-placeholder .ph-label {
  font-family: var(--font-h); font-size: .85rem; font-weight: 600;
  color: var(--mg-gray-400); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem;
}
.zz-placeholder .ph-desc {
  font-size: .82rem; color: var(--mg-gray-400); font-style: italic;
  max-width: 400px; margin: 0 auto;
}

/* Fullwidth text */
.fw-text {
  font-size: 1.05rem; line-height: 2;
  color: var(--mg-gray-600); text-align: justify;
}

/* ═══════════════════════════════════════════════
   PROCESS STEPS — Timeline grafica
   ═══════════════════════════════════════════════ */
.proc-section {
  padding: 4rem 0;
  /* Fascia grigio chiaro con un filo di trasparenza (Michele, 02/09): deve leggersi
     come separatore rispetto alle sezioni bianche, non piu' come blocco blu pieno. */
  background: linear-gradient(135deg, rgba(232,237,244,.5) 0%, rgba(220,228,238,.5) 100%);
  color: var(--mg-gray-800);
  position: relative;
  overflow: hidden;
}
.proc-section::before {
  content: ''; position: absolute;
  top: 0; right: 0; width: 45%; height: 100%;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,.35));
  pointer-events: none;
}
.proc-section .zz-title {
  color: var(--mg-gray-800);
}

.proc-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 1rem;
}
/* Numero di colonne = numero di step (1–5). Con 6+ step si usano 3 colonne (righe da 3). */
.proc-timeline.proc-cols-1 { grid-template-columns: minmax(0, 420px); justify-content: center }
.proc-timeline.proc-cols-2 { grid-template-columns: repeat(2, 1fr) }
.proc-timeline.proc-cols-3 { grid-template-columns: repeat(3, 1fr) }
.proc-timeline.proc-cols-4 { grid-template-columns: repeat(4, 1fr) }
.proc-timeline.proc-cols-5 { grid-template-columns: repeat(5, 1fr) }

.proc-step {
  position: relative;
  padding: 1.8rem 1.5rem 1.5rem;
  /* Le card restano nel blu MG di prima (Michele, 02/09): solo la fascia e' grigia. */
  background: linear-gradient(135deg, rgba(9,88,112,.96) 0%, rgba(11,104,131,.91) 100%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(9,88,112,.18);
  transition: all .4s var(--ease);
  overflow: hidden;
}
.proc-step::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  /* Sul fondo blu il gradiente blu->azzurro sparirebbe: bianco -> ciano. */
  background: linear-gradient(90deg, rgba(255,255,255,.9), var(--mg-cyan));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.proc-step:hover::before { transform: scaleX(1) }
.proc-step:hover {
  background: linear-gradient(135deg, rgba(9,88,112,1) 0%, rgba(11,104,131,.97) 100%);
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 10px 28px rgba(9,88,112,.28);
  transform: translateY(-4px);
}

.proc-number {
  position: absolute; top: 12px; right: 16px;
  font-family: var(--font-h); font-size: 2.8rem;
  font-weight: 800; color: rgba(255,255,255,.14);
  line-height: 1;
}
.proc-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 20px rgba(10,22,40,.18);
}
.proc-step-title {
  font-family: var(--font-h); font-size: 1rem;
  font-weight: 600; color: #fff;
  margin-bottom: .5rem;
}
.proc-step p {
  font-size: .88rem; color: rgba(255,255,255,.85);
  line-height: 1.7; margin: 0;
}

/* ═══════════════════════════════════════════════
   LIST — elenco stilizzato
   ═══════════════════════════════════════════════ */
.zz-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
}
.zz-list-item {
  display: flex; align-items: flex-start;
  gap: .75rem; padding: .65rem .85rem;
  border-radius: 10px; background: var(--mg-gray-50);
  border: 1px solid var(--mg-gray-100);
  transition: all .25s;
  font-size: .92rem;
}
.zz-list-item:hover {
  background: rgba(11,110,140,.04);
  border-color: rgba(91,196,232,.2);
}
.zz-list-item i {
  color: var(--mg-blue); font-size: 1rem;
  flex-shrink: 0; margin-top: 2px;
}

/* ═══════════════════════════════════════════════
   TECH GALLERY
   ═══════════════════════════════════════════════ */
.tech-drawings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.tech-draw-item {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(91,196,232,.15);
  background: var(--mg-dark-soft);
  transition: all .4s var(--ease);
  aspect-ratio: 4/3;
}
.tech-draw-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(91,196,232,.15);
  border-color: var(--mg-blue-light);
}
.tech-draw-item img {
  width: 100%; height: 100%;
  object-fit: cover; opacity: .85;
  transition: opacity .3s;
}
.tech-draw-item:hover img { opacity: 1 }

/* ═══════════════════════════════════════════════
   MATERIALS BOX (usato nelle panoramiche)
   ═══════════════════════════════════════════════ */
.materials-box {
  background: var(--mg-dark-soft); border-radius: var(--radius);
  padding: 2rem; color: rgba(255,255,255,.8);
}
.materials-box h3 {
  color: var(--mg-blue-light); font-family: var(--font-h);
  margin-bottom: 1rem;
}
.materials-box li { border-bottom-color: rgba(255,255,255,.08) }
.materials-box li::before { color: var(--mg-blue-light) }

/* ═══════════════════════════════════════════════
   CARDS — service/product card
   ═══════════════════════════════════════════════ */
.sv-card {
  background: #fff; border-radius: var(--radius);
  padding: 2rem 1.5rem;
  border: 1px solid var(--mg-gray-100);
  transition: all .4s var(--ease);
  position: relative; overflow: hidden; height: 100%;
}
.sv-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mg-blue), var(--mg-blue-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.sv-card:hover::before { transform: scaleX(1) }
.sv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(11,110,140,.1);
  border-color: rgba(91,196,232,.18);
}
.sv-icon {
  width: 54px; height: 54px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(11,110,140,.07), rgba(91,196,232,.07));
  display: flex; align-items: center; justify-content: center;
  transition: background .3s;
}
.sv-card:hover .sv-icon { background: linear-gradient(135deg, var(--mg-blue), var(--mg-blue-glow)) }
.sv-icon i { font-size: 1.4rem; color: var(--mg-blue); transition: color .3s }
.sv-card:hover .sv-icon i { color: #fff }
.c-link {
  font-family: var(--font-h); font-size: .84rem; font-weight: 600;
  color: var(--mg-blue); transition: gap .3s;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.sv-card:hover .c-link { gap: 14px }
.sv-thumb { margin: -2rem -1.5rem 1.5rem; aspect-ratio: 3/2; overflow: hidden; background: var(--mg-gray-100); }
.sv-thumb.sv-thumb-sq { aspect-ratio: 1 / 1; }
.sv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.sv-card:hover .sv-thumb img { transform: scale(1.05); }

/* ═══════════════════════════════════════════════
   CTA SECTION
   ═══════════════════════════════════════════════ */
.cta-s {
  background: linear-gradient(135deg, rgba(10,22,40,.88), rgba(12,58,77,.85), rgba(10,22,40,.9)),
              url('../img/servizi/mgsrl-impianti-manutenzioni-revamping-carpenteria-metallica-servizi.jpg') center/cover no-repeat;
  position: relative; overflow: hidden;
}
.btn-mg {
  background: var(--mg-blue); color: #fff;
  font-family: var(--font-h); font-weight: 600;
  border: none; border-radius: 10px;
  padding: .7rem 2rem;
  transition: all .3s var(--ease);
  text-decoration: none; display: inline-block;
}
.btn-mg:hover {
  background: var(--mg-blue-glow); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(11,110,140,.35);
}

/* ═══════════════════════════════════════════════
   HOMEPAGE HERO
   ═══════════════════════════════════════════════ */
.hero-s { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden }
.hero-bg { position: absolute; inset: 0; z-index: 0 }
.hero-bg img { width: 100%; height: 100%; object-fit: cover }
.hero-c { position: relative; z-index: 2 }
.hero-title {
  font-size: clamp(2.05rem, 4.2vw, 3.35rem); font-weight: 800;
  color: #fff; line-height: 1.1; letter-spacing: -.02em;
  /* Titolo a piena larghezza: nessun <br> forzato, e se va a capo le righe
     vengono bilanciate invece di lasciare una riga lunga e una corta. */
  max-width: none; text-wrap: balance;
}
.hero-title span {
  background: linear-gradient(135deg, var(--mg-blue-light), var(--mg-cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub { font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: rgba(255,255,255,.78); line-height: 1.7 }
/* Sottotitolo hero giustificato: righe a filo su entrambi i lati.
   NIENTE sillabazione automatica: il cliente non vuole parole spezzate col trattino
   (`hyphens: none` esplicito, cosi' resta valido anche se un browser la attivasse da solo).
   Solo da tablet in su: su schermo stretto il giustificato peggiora la leggibilita'. */
@media (min-width: 768px) {
  .hero-sub { text-align: justify; text-justify: inter-word; hyphens: none; -webkit-hyphens: none; }
}
.hero-vis img { filter: drop-shadow(0 0 50px rgba(91,196,232,.18)) }
@media(max-width:767.98px) { .hero-vis { display: none } .hero-s { text-align: center } .hero-sub { margin-left: auto; margin-right: auto } }

/* Stats Bar */
.stats-bar { border: 1px solid rgba(91,196,232,.12); border-radius: 16px; overflow: hidden }
/* Celle di pari altezza: "Certificazione" sta su una riga e le altre no,
   quindi senza height:100% i riquadri risultavano disallineati man mano che
   lo schermo si stringe. Padding laterale ridotto per far stare le etichette
   su una riga più a lungo. */
.stat-i {
  height: 100%; padding: 1.6rem .6rem; text-align: center;
  display: flex; flex-direction: column; justify-content: center; gap: .3rem;
  background: rgba(10,22,40,.65); backdrop-filter: blur(8px);
  border-right: 1px solid rgba(255,255,255,.05); transition: background .3s;
}
.stat-i:last-child { border-right: none }
.stat-i:hover { background: rgba(11,110,140,.15) }
.stat-n {
  font-family: var(--font-h); font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800; color: var(--mg-blue-light);
}
/* Etichetta su DUE righe in tutte le celle: la seconda riga (<span>)
   specifica la prima, così i quattro riquadri hanno sempre lo stesso ritmo
   invece di alternare una e due righe al restringersi dello schermo.
   Il clamp tiene il testo leggibile in largo e lo stringe quel tanto che
   basta a non mandare a capo "PERSONALE QUALIFICATO" fra 768 e 991px. */
.stat-l {
  font-size: clamp(.7rem, 1vw, .8rem); color: rgba(255,255,255,.62);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 500;
  line-height: 1.3;
}
.stat-l span {
  display: block; margin-top: .12em;
  font-size: .88em; color: rgba(255,255,255,.42); letter-spacing: .04em;
}

/* Marquee Band */
.mq-band { background: var(--mg-blue); overflow: hidden }
.mq-track { display: flex; animation: mqs 35s linear infinite; width: max-content }
.mq-track span {
  font-family: var(--font-h); font-size: .8rem; font-weight: 600;
  color: rgba(255,255,255,.9); text-transform: uppercase;
  letter-spacing: .12em; white-space: nowrap; padding: .75rem 2.5rem;
}
.mq-track span::after {
  content: '\25C6'; font-size: .45rem; color: rgba(255,255,255,.35); margin-left: 2.5rem;
}
@keyframes mqs { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }

/* Btn outline */
.btn-out {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.25);
  font-family: var(--font-h); font-weight: 600;
  border-radius: 10px; padding: .85rem 2rem; transition: all .3s;
}
.btn-out:hover {
  border-color: var(--mg-blue-light); color: var(--mg-blue-light);
  background: rgba(91,196,232,.06);
}

/* "Vedi anche" (link correlati) — su sfondo CHIARO i btn-out sarebbero bianchi
   su bianco: qui li forziamo blu e distanziamo la sezione dal blocco successivo. */
.rel-section { padding: 1.5rem 0 1rem; margin-bottom: 3.5rem }
.rel-link.btn-out { color: var(--mg-blue); border-color: rgba(11,110,140,.4) }
.rel-link.btn-out:hover { color: #fff; background: var(--mg-blue); border-color: var(--mg-blue) }

/* ═══════════════════════════════════════════════
   STATS BAR, FEAT, ABOUT
   ═══════════════════════════════════════════════ */
.feat {
  display: flex; gap: .75rem; align-items: center;
  padding: .75rem .85rem; border-radius: 10px;
  background: var(--mg-gray-50); border: 1px solid var(--mg-gray-100);
  transition: all .25s;
}
.feat:hover { background: rgba(11,110,140,.04); border-color: rgba(91,196,232,.2) }
.feat-ic {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, var(--mg-blue), var(--mg-blue-glow));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #fff; font-size: .85rem;
}
.feat span { font-size: .85rem; font-weight: 600; font-family: var(--font-h) }
.ab-img { position: relative; border-radius: 18px; overflow: hidden }
.ab-img::before {
  content: ''; position: absolute; top: -1px; left: -1px;
  width: 60px; height: 60px;
  border-top: 3px solid var(--mg-blue-light);
  border-left: 3px solid var(--mg-blue-light);
  border-radius: 18px 0 0 0; z-index: 1;
}

/* Feature list */
.feature-list li {
  padding: .5rem 0; border-bottom: 1px solid var(--mg-gray-100);
  font-size: .95rem;
}
.feature-list li:last-child { border-bottom: none }
.feature-list li i { color: var(--mg-blue); margin-right: .5rem }

/* Contact icons */
.ct-ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(11,110,140,.07), rgba(91,196,232,.07));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--mg-blue);
}
.form-control:focus, .form-select:focus {
  border-color: var(--mg-blue);
  box-shadow: 0 0 0 4px rgba(11,110,140,.08);
}

/* ═══════════════════════════════════════════════
   CERTIFICATION BADGES
   ═══════════════════════════════════════════════ */
.cert-badge {
  padding: .7rem 1.3rem;
  background: linear-gradient(135deg, rgba(11,110,140,.05), rgba(91,196,232,.05));
  border: 1.5px solid rgba(11,110,140,.15); border-radius: var(--radius-sm);
  font-family: var(--font-h); font-weight: 700; font-size: .88rem;
  color: var(--mg-blue); transition: all .25s; display: inline-block;
}
.cert-badge:hover {
  background: var(--mg-blue); color: #fff;
  border-color: var(--mg-blue); transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.mg-ft { background: var(--mg-dark) }
.mg-ft a { color: rgba(255,255,255,.48); transition: color .2s; text-decoration: none; display: inline-block }
.mg-ft a:hover { color: var(--mg-blue-light) }
.mg-ft .navbar-brand img, .mg-ft > .container img:first-child { max-height: 50px; width: auto }
.mg-ft .col-lg-3 > img, .mg-ft .col-lg-4 > img { max-height: 40px; width: auto; display: block }
.ft-cert img { height: 40px; width: auto; border-radius: 6px; opacity: .7; transition: opacity .2s }
.ft-cert img:hover { opacity: 1 }

/* ═══════════════════════════════════════════════
   HOMEPAGE — Gallery, Products, etc.
   ═══════════════════════════════════════════════ */
.pr-card {
  position: relative; border-radius: var(--radius-sm);
  overflow: hidden; aspect-ratio: 4/3;   /* 02/09/2026: foto lavorazioni uniformate a 1200x900 (Michele) */
  /* Sulla fascia grigio chiaro (.bg-lt) le card hanno la stessa ombra blu delle .proc-step. */
  box-shadow: 0 4px 16px rgba(9,88,112,.18);
  transition: all .5s var(--ease);
}
.pr-card:hover { transform: translateY(-8px); box-shadow: 0 20px 48px rgba(9,88,112,.28) }
.pr-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease) }
.pr-card:hover img { transform: scale(1.08) }
.pr-ov {
  position: absolute; inset: 0;
  /* Velo blu MG (come le .proc-step), non piu' blu notte: sono le "card blu" sulla fascia grigia (02/09 sera). */
  background: linear-gradient(to top, rgba(9,88,112,.94), rgba(9,88,112,.2) 45%, transparent);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2rem;
  transition: background .3s;
}
.pr-card:hover .pr-ov { background: linear-gradient(to top, rgba(11,110,140,.85), rgba(11,110,140,.1) 50%, transparent) }
.pr-ov h3 { font-family: var(--font-h); font-size: 1.02rem; font-weight: 700; color: #fff; margin-bottom: .2rem }
.pr-ov p {
  font-size: .75rem; color: rgba(255,255,255,.85);
  max-height: 0; overflow: hidden;
  transition: max-height .4s var(--ease), opacity .3s; opacity: 0; margin: 0;
}
.pr-card:hover .pr-ov p { max-height: 60px; opacity: 1 }

.g-tab {
  padding: .55rem 1.3rem; border-radius: 10px; font-size: .82rem; font-weight: 600;
  font-family: var(--font-h); border: 1.5px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.55); background: transparent; transition: all .3s; cursor: pointer;
}
.g-tab:hover, .g-tab.active {
  background: var(--mg-blue); border-color: var(--mg-blue);
  color: #fff; box-shadow: 0 4px 20px rgba(11,110,140,.3);
}
.g-item {
  border-radius: var(--radius-sm); overflow: hidden; position: relative;
  aspect-ratio: 1; cursor: pointer;
  border: 1px solid rgba(91,196,232,.08); transition: all .4s var(--ease);
}
.g-item:hover {
  transform: scale(1.04); border-color: var(--mg-blue-light);
  box-shadow: 0 12px 48px rgba(91,196,232,.2); z-index: 2;
}
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease) }
.g-item:hover img { transform: scale(1.1) }
.g-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,22,40,.85), transparent 50%);
  display: flex; align-items: flex-end; padding: 1rem;
  opacity: 0; transition: opacity .35s;
}
.g-item:hover .g-ov { opacity: 1 }
.g-ov span { font-family: var(--font-h); font-size: .8rem; font-weight: 600; color: #fff }

.lb {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(10,22,40,.95); backdrop-filter: blur(20px);
  align-items: center; justify-content: center; padding: 40px;
}
.lb.open { display: flex }
.lb img {
  max-width: 90%; max-height: 85vh; object-fit: contain;
  border-radius: var(--radius-sm); box-shadow: 0 20px 80px rgba(0,0,0,.5);
}

/* Step cards for chi-siamo */
.sc-card {
  background: #fff; border-radius: var(--radius);
  padding: 2rem 1.2rem; text-align: center;
  border: 1px solid var(--mg-gray-100);
  transition: all .4s var(--ease); position: relative; overflow: hidden; height: 100%;
}
.sc-card::after {
  content: ''; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%); width: 0; height: 3px;
  background: linear-gradient(90deg, var(--mg-blue), var(--mg-blue-light));
  transition: width .4s var(--ease);
}
.sc-card:hover::after { width: 100% }
.sc-card:hover { transform: translateY(-6px); box-shadow: 0 16px 44px rgba(11,110,140,.1) }
.sc-ic {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mg-blue), var(--mg-blue-light));
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(11,110,140,.25); color: #fff; font-size: 1.4rem;
}

/* ═══════════════════════════════════════════════
   UTILITY — Buttons, WhatsApp, Back to Top, Cookie
   ═══════════════════════════════════════════════ */
.btt {
  position: fixed; bottom: 28px; right: 28px;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mg-blue), var(--mg-blue-glow));
  color: #fff; display: flex; align-items: center; justify-content: center;
  z-index: 900;
  box-shadow: 0 4px 24px rgba(11,110,140,.4);
  transition: all .35s var(--ease);
  opacity: 0; transform: translateY(20px);
  pointer-events: none; border: none; font-size: 1.2rem;
}
.btt.show { opacity: 1; transform: translateY(0); pointer-events: auto }
.btt:hover { transform: translateY(-3px) }

.ck-ban {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--mg-dark); z-index: 1500;
  transform: translateY(100%); transition: transform .5s var(--ease);
  border-top: 1px solid rgba(91,196,232,.15);
}
.ck-ban.show { transform: translateY(0) }

/* ═══════════════════════════════════════════════
   ANIMATIONS — Reveal & Hero
   ═══════════════════════════════════════════════ */
.rv {
  opacity: 0; transform: translateY(30px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.rv.vis { opacity: 1; transform: translateY(0) }
.rd1 { transition-delay: .1s } .rd2 { transition-delay: .2s }
.rd3 { transition-delay: .3s } .rd4 { transition-delay: .4s }
.rd5 { transition-delay: .5s }
.he { opacity: 0; transform: translateY(40px) }
.he.ld { opacity: 1; transform: translateY(0); transition: all .9s var(--ease) }
.he.hd1.ld { transition-delay: .15s } .he.hd2.ld { transition-delay: .3s }
.he.hd3.ld { transition-delay: .45s } .he.hd4.ld { transition-delay: .6s }

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

/* Container full-width con padding laterale generoso */
.ctn {
  max-width: 100%;
  padding-left: 5%;
  padding-right: 5%;
}

@media (min-width: 1600px) {
  .ctn { padding-left: 8%; padding-right: 8% }
}
@media (max-width: 1199.98px) {
  .ctn { padding-left: 3%; padding-right: 3% }
}
@media (max-width: 991.98px) {
  .zz-section { padding: 3rem 0 }
  .zz-img-wrap { aspect-ratio: 16/9 }
  .zz-text { padding-right: 0 !important; padding-left: 0 !important }
  .proc-timeline, .proc-timeline[class*="proc-cols-"] { grid-template-columns: 1fr 1fr }
  .specs-grid { grid-template-columns: 1fr 1fr }
  .ctn { padding-left: 1.5rem; padding-right: 1.5rem }
}
@media (max-width: 767.98px) {
  .proc-timeline, .proc-timeline[class*="proc-cols-"] { grid-template-columns: 1fr }
  .specs-grid { grid-template-columns: 1fr }
  .features-grid { grid-template-columns: 1fr }
  .related-grid { grid-template-columns: 1fr }
  .zz-img-wrap { margin-bottom: 1.5rem }
  .zz-text { order: 2 }
  .zz-media { order: 1 }
}

/* ═══════════════════════════════════════════════
   SPECS — Card specifiche tecniche
   ═══════════════════════════════════════════════ */
.specs-section { padding: 5rem 0; background: var(--mg-gray-50) }
.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem; margin-top: 1rem;
}
.spec-card {
  background: #fff; border-radius: var(--radius);
  padding: 2rem 1.8rem; border: 1px solid var(--mg-gray-100);
  transition: all .4s var(--ease); position: relative; overflow: hidden;
}
.spec-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--mg-blue), var(--mg-blue-light));
  transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease);
}
.spec-card:hover::before { transform: scaleY(1) }
.spec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(11,110,140,.08);
  border-color: rgba(91,196,232,.15);
}
.spec-card-icon {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(11,110,140,.06), rgba(91,196,232,.06));
  display: flex; align-items: center; justify-content: center;
  color: var(--mg-blue); font-size: 1.3rem; margin-bottom: 1.2rem;
}
.spec-card h3 {
  font-family: var(--font-h); font-size: 1.05rem;
  font-weight: 600; margin-bottom: .6rem; color: var(--mg-gray-800);
}
.spec-card p { font-size: .88rem; color: var(--mg-gray-600); line-height: 1.7; margin: 0 }
.spec-card ul { list-style: none; padding: 0; margin: .8rem 0 0 }
.spec-card ul li {
  padding: .3rem 0; font-size: .88rem; color: var(--mg-gray-600);
  padding-left: 1.4rem; position: relative;
}
.spec-card ul li::before {
  content: ''; position: absolute; left: 0; top: .65rem;
  width: 6px; height: 6px; border-radius: 50%; background: var(--mg-blue-light);
}

/* ═══════════════════════════════════════════════
   FEATURES — Blocchi icona+testo
   ═══════════════════════════════════════════════ */
.features-section { padding: 5rem 0 }
.features-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem; margin-top: 1rem;
}
.feature-block {
  display: flex; gap: 1.2rem; padding: 1.5rem;
  border-radius: var(--radius); background: var(--mg-gray-50);
  border: 1px solid var(--mg-gray-100); transition: all .3s var(--ease);
}
.feature-block:hover {
  background: rgba(11,110,140,.03); border-color: rgba(91,196,232,.2);
  transform: translateY(-2px);
}
.feature-block-icon {
  width: 48px; height: 48px; min-width: 48px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--mg-blue), var(--mg-blue-glow));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.1rem;
  box-shadow: 0 4px 16px rgba(11,110,140,.25);
}
.feature-block h3 {
  font-family: var(--font-h); font-size: .95rem;
  font-weight: 600; margin-bottom: .3rem; color: var(--mg-gray-800);
}
.feature-block p { font-size: .85rem; color: var(--mg-gray-600); line-height: 1.65; margin: 0 }

/* ═══════════════════════════════════════════════
   HIGHLIGHT BOX
   ═══════════════════════════════════════════════ */
.highlight-box {
  background: linear-gradient(135deg, rgba(11,110,140,.04), rgba(91,196,232,.04));
  border: 1px solid rgba(11,110,140,.12);
  border-left: 4px solid var(--mg-blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.8rem 2rem; margin: 2rem 0;
}
.highlight-box p { margin: 0; color: var(--mg-gray-600); font-size: .95rem; line-height: 1.8 }
.highlight-box strong { color: var(--mg-gray-800) }

/* ═══════════════════════════════════════════════
   RELATED — Lavorazioni correlate
   ═══════════════════════════════════════════════ */
.related-section { padding: 5rem 0; background: var(--mg-gray-50) }
.related-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem; margin-top: 1rem;
}
.related-card {
  background: #fff; border-radius: var(--radius); padding: 2rem;
  border: 1px solid var(--mg-gray-100); transition: all .4s var(--ease);
  text-decoration: none; display: block;
}
.related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(11,110,140,.1); border-color: rgba(91,196,232,.2);
}
.related-card h4 {
  font-family: var(--font-h); font-size: 1rem;
  font-weight: 600; color: var(--mg-gray-800); margin-bottom: .5rem;
}
.related-card p { font-size: .85rem; color: var(--mg-gray-600); line-height: 1.6; margin-bottom: .8rem }
.related-card .c-link { font-size: .82rem }

/* ═══════════════════════════════════════════════
   PAGE INTRO (legacy compatibility)
   ═══════════════════════════════════════════════ */
.page-intro {
  font-size: 1.1rem; line-height: 1.9; color: var(--mg-gray-600);
  text-align: justify;
}
.detail-section h3 { font-family: var(--font-h); font-weight: 600; color: var(--mg-gray-800); margin-top: 2rem; margin-bottom: 1rem }
.detail-section p { color: var(--mg-gray-600); line-height: 1.9; margin-bottom: 1rem; text-align: justify }
.detail-section ul { color: var(--mg-gray-600); padding-left: 0; list-style: none; text-align: left }
.detail-section ul li { padding: .4rem 0; padding-left: 1.6rem; position: relative; line-height: 1.7 }
.detail-section ul li::before { content: '\2713'; position: absolute; left: 0; color: var(--mg-blue); font-weight: 700 }

/* ===== Galleria immagini (griglia + lightbox) ===== */
.mg-gal-section{padding:4rem 0}
/* Dicitura di collaborazione sotto al titolo della galleria (2026-08-31) */
.mg-gal-credit{margin:-.2rem 0 1.2rem;font-size:.95rem;color:var(--mg-gray-600);text-align:center}
.mg-gal-credit a{color:var(--mg-blue);text-decoration:none;font-weight:600;border-bottom:1px solid rgba(0,0,0,.15)}
.mg-gal-credit a:hover{border-bottom-color:currentColor}
.mg-gal-credit.is-dark{color:rgba(255,255,255,.72)}
.mg-gal-credit.is-dark a{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
/* Credito con logo al posto del nome (10/09/2026): logo piccolo in linea col testo, senza sottolineatura;
   sui fondi scuri il logo (blu notte) diventa bianco. */
.mg-gal-credit.has-logo a{border-bottom:0}
.mg-gal-credit-logo{display:inline-block;height:35px;width:auto;vertical-align:middle;margin:-6px 0 0 .3rem;transition:opacity .2s}
.mg-gal-credit a:hover .mg-gal-credit-logo{opacity:.75}
.mg-gal-credit.is-dark .mg-gal-credit-logo{filter:brightness(0) invert(1)}
/* FAQ: spaziatura verticale ampia per staccarla dalle sezioni vicine */
.faq-section{padding:4.5rem 0;margin-top:1.5rem;margin-bottom:1.5rem}
@media(max-width:767.98px){.faq-section{padding:3rem 0}}
.mg-gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:1.5rem}
.mg-gallery .mg-gal-item{flex:0 0 calc((100% - 70px)/6);max-width:calc((100% - 70px)/6)}
.mg-gallery.cols-2 .mg-gal-item{flex:0 0 calc((100% - 14px)/2);max-width:calc((100% - 14px)/2)}
.mg-gallery.cols-3 .mg-gal-item{flex:0 0 calc((100% - 28px)/3);max-width:calc((100% - 28px)/3)}
.mg-gallery.cols-4 .mg-gal-item{flex:0 0 calc((100% - 42px)/4);max-width:calc((100% - 42px)/4)}
.mg-gallery.cols-5 .mg-gal-item{flex:0 0 calc((100% - 56px)/5);max-width:calc((100% - 56px)/5)}
.mg-gallery.cols-6 .mg-gal-item{flex:0 0 calc((100% - 70px)/6);max-width:calc((100% - 70px)/6)}
.mg-gal-item{position:relative;display:block;overflow:hidden;border-radius:14px;aspect-ratio:4/3;background:var(--mg-gray-100);box-shadow:0 4px 16px rgba(13,31,56,.08);cursor:pointer}
.mg-gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.mg-gal-item:hover img{transform:scale(1.07)}
.mg-gallery.gal-32 .mg-gal-item{aspect-ratio:3/2}
.mg-gallery.gal-11 .mg-gal-item{aspect-ratio:1/1}
.mg-gal-zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;background:linear-gradient(180deg,rgba(13,31,56,0) 40%,rgba(13,31,56,.55));opacity:0;transition:opacity .35s}
.mg-gal-item:hover .mg-gal-zoom{opacity:1}
/* Colonne responsive uniformi per TUTTE le gallerie:
   4 (desktop) · 6 (full page ≥1600) · 3 (tablet) · 2 (mobile). Sovrascrive cols-N. */
@media(min-width:1200px){.mg-gallery.cols-auto .mg-gal-item{flex-basis:calc((100% - 42px)/4);max-width:calc((100% - 42px)/4)}}
@media(min-width:1600px){.mg-gallery.cols-auto .mg-gal-item{flex-basis:calc((100% - 70px)/6);max-width:calc((100% - 70px)/6)}}
/* 6 colonne anche quando la sidebar prodotti è compressa (pagina a piena larghezza) */
@media(min-width:1200px){body.side-collapsed .mg-gallery.cols-auto .mg-gal-item{flex-basis:calc((100% - 70px)/6);max-width:calc((100% - 70px)/6)}}
@media(min-width:768px) and (max-width:1199.98px){.mg-gallery .mg-gal-item,.mg-gallery[class*="cols-"] .mg-gal-item{flex-basis:calc((100% - 28px)/3);max-width:calc((100% - 28px)/3)}}
@media(max-width:767.98px){.mg-gallery{gap:10px}.mg-gallery .mg-gal-item,.mg-gallery[class*="cols-"] .mg-gal-item{flex-basis:calc((100% - 10px)/2);max-width:calc((100% - 10px)/2)}}

.mglb{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(8,16,30,.94);backdrop-filter:blur(4px)}
.mglb.open{display:flex}
.mglb-stage{margin:0;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.mglb-stage img{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:8px;box-shadow:0 18px 60px rgba(0,0,0,.5)}
.mglb-counter{color:rgba(255,255,255,.7);font-size:.9rem;letter-spacing:.05em}
.mglb-close{position:absolute;top:18px;right:24px;background:none;border:0;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer;opacity:.8;transition:opacity .2s}
.mglb-close:hover{opacity:1}
.mglb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}

/* ===== Hero: barra di pulsanti orizzontali in basso ===== */
.hero-s{padding-top:110px;padding-bottom:84px}
.hero-anchors{position:absolute;left:0;right:0;bottom:0;z-index:3;padding-bottom:1.6rem}
.hero-anchors .container{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.hero-anchors a{display:inline-flex;align-items:center;gap:.45rem;color:#fff;text-decoration:none;font-family:var(--font-h);font-weight:600;font-size:.95rem;line-height:1;padding:.62rem 1.15rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:50px;backdrop-filter:blur(3px);transition:transform .25s,background .25s,color .25s,box-shadow .25s}
.hero-anchors a:hover,.hero-anchors a:focus-visible{background:var(--mg-blue-light);color:#08263a;border-color:var(--mg-blue-light);transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.28)}
.hero-anchors a i{font-size:.85rem;opacity:.85}
@media(max-width:767.98px){
  .hero-s{padding-top:100px;padding-bottom:0}
  .hero-anchors{position:static;padding:1.8rem 0 .2rem}
  .hero-anchors a{font-size:.85rem;padding:.5rem .9rem}
}

/* ===== Sezione "Dove siamo" + mappa ===== */
.dove-siamo{padding:4rem 0 0}
.dove-siamo .s-label::before{display:none}
.map-wrap{margin-top:1.5rem;line-height:0}
.map-wrap iframe{display:block;width:100%;height:440px;border:0}
@media(max-width:575.98px){.map-wrap iframe{height:320px}}

/* ===== Gallery: variante sfondo blu + immagine lead ===== */
.mg-gal-blue{background:linear-gradient(135deg,var(--mg-dark-soft) 0%,var(--mg-blue) 100%);color:#fff}
.mg-gal-blue .zz-title,.mg-gal-blue .s-label{color:#fff}
.mg-gal-blue .s-label::before{background:var(--mg-blue-light)}
/* tile blu per disegni PNG a linee bianche (altrimenti invisibili) */
.mg-gal-blue .mg-gal-item{background:var(--mg-blue);border:1px solid rgba(255,255,255,.15)}
.mg-gal-blue .mg-gal-item img{object-fit:contain;padding:12px}
.mg-gal-lead{max-width:760px;margin:0 auto 2.2rem;text-align:center}
.mg-gal-lead img{width:100%;max-height:430px;object-fit:cover;border-radius:16px;box-shadow:0 20px 55px rgba(0,0,0,.4)}
@media(max-width:575.98px){.mg-gal-lead img{max-height:260px}}
.mglb-nav:hover{background:var(--mg-blue)}
.mglb-prev{left:18px}.mglb-next{right:18px}
@media(max-width:640px){.mglb-nav{width:44px;height:44px;font-size:1.2rem}.mglb-prev{left:8px}.mglb-next{right:8px}}

/* ═══════════════════════════════════════════════
   NAVBAR — Icona WhatsApp
   ═══════════════════════════════════════════════ */
.nav-wa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #25d366; color: #fff !important; font-size: 1.15rem;
  margin-left: .5rem; text-decoration: none;
  transition: transform .2s var(--ease), background .2s;
}
.nav-wa:hover { background: #1ebe5d; color: #fff !important; transform: translateY(-1px) scale(1.06); }
.nav-wa-label { display: none; }
@media (max-width: 1199.98px) {
  /* Nel menu a tendina (hamburger) diventa una voce piena con etichetta */
  .nav-wa { width: auto; height: auto; border-radius: 8px; padding: .55rem .9rem; margin: .4rem 0 0; justify-content: flex-start; gap: .55rem; }
  .nav-wa-label { display: inline; font-family: var(--font-h); font-weight: 600; font-size: .9rem; }
}

/* ═══════════════════════════════════════════════
   SIDEBAR PRODOTTI — fissa, compatta, solo desktop (≥1200px)
   ═══════════════════════════════════════════════ */
.prod-side-nav, .ps-reopen { display: none; }

@media (min-width: 1200px) {
  /* La sidebar è un LIVELLO sovrapposto: NON spostiamo il body (gli sfondi
     restano a tutta larghezza, niente spazio bianco in alto a sinistra).
     Spostiamo solo il CONTENUTO interno, e MAI il footer. */
  /* Hero e CTA restano centrati ESATTAMENTE come nelle altre pagine
     (allineati al logo, stessa larghezza). La sidebar (z-index 1070) resta
     SOPRA fascia CTA e footer; solo la navbar (1080) le passa davanti. */
  body.prod-side .pg-hd { z-index: 1020; }
  body.prod-side .cta-s { position: relative; z-index: 1020; }

  /* Solo il contenuto scorrevole viene spostato per non finire sotto la sidebar */
  body.prod-side:not(.side-collapsed) .ctn {
    padding-left: 274px; padding-right: 5%;
    transition: padding-left .3s var(--ease);
  }

  .prod-side-nav {
    display: flex; flex-direction: column;
    position: fixed; top: 300px; left: 0; width: 246px;
    max-height: calc(100vh - 320px);
    background: #fff;
    border: 1px solid var(--mg-gray-200);
    border-left: none;
    border-radius: 0 12px 12px 0;
    box-shadow: 2px 4px 22px rgba(10,22,40,.10);
    z-index: 1070;   /* sopra CTA e footer, sotto la navbar (1080) */
    transition: transform .3s var(--ease);
  }
  /* La posizione verticale (top/max-height) è gestita via JS: sotto l'hero
     quando si è in cima, ~20px sotto la navbar dopo lo scroll. */
  body.side-collapsed .prod-side-nav { transform: translateX(-100%); }

  .ps-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .75rem; border-bottom: 1px solid var(--mg-gray-100);
    flex: 0 0 auto;
  }
  .ps-title {
    display: flex; align-items: center; gap: .4rem;
    font-family: var(--font-h); font-weight: 700; font-size: .68rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--mg-blue);
  }
  .ps-toggle {
    background: transparent; border: none; color: var(--mg-gray-400);
    width: 24px; height: 24px; border-radius: 5px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
  }
  .ps-toggle:hover { background: var(--mg-gray-100); color: var(--mg-blue); }

  .ps-scroll { overflow-y: auto; padding: .35rem .4rem .55rem; }
  .ps-scroll::-webkit-scrollbar { width: 6px; }
  .ps-scroll::-webkit-scrollbar-thumb { background: var(--mg-gray-200); border-radius: 3px; }
  .ps-scroll::-webkit-scrollbar-track { background: transparent; }

  .ps-cat {
    display: block; text-decoration: none;
    font-family: var(--font-h); font-weight: 700; font-size: .72rem;
    color: var(--mg-blue); padding: .4rem .5rem .2rem; margin-top: .25rem;
    transition: color .2s;
  }
  .ps-cat:first-child { margin-top: 0; }
  .ps-cat:hover, .ps-cat.active { color: var(--mg-blue-glow); }

  .ps-list { list-style: none; margin: 0 0 .2rem; padding: 0; }
  .ps-link {
    display: block; text-decoration: none;
    font-family: var(--font-h); font-size: .72rem; line-height: 1.3; color: var(--mg-gray-600);
    padding: .3rem .5rem .3rem .55rem; border-radius: 6px;
    border-left: 2px solid transparent;
    transition: background .18s, color .18s, border-color .18s;
  }
  .ps-link:hover { background: var(--mg-gray-50); color: var(--mg-gray-800); }
  .ps-link.active {
    background: rgba(11,110,140,.08); color: var(--mg-blue);
    border-left-color: var(--mg-blue); font-weight: 600;
  }

  /* Maniglia per riaprire quando la sidebar è compressa */
  .ps-reopen {
    position: fixed; top: 50%; left: 0; transform: translateY(-50%);
    width: 30px; height: 56px; border: none; cursor: pointer;
    background: var(--mg-blue); color: #fff;
    border-radius: 0 10px 10px 0; z-index: 1070;
    box-shadow: 2px 0 14px rgba(0,0,0,.25); font-size: 1.1rem;
    align-items: center; justify-content: center;
    transition: background .2s;
  }
  .ps-reopen:hover { background: var(--mg-blue-glow); }
  body.prod-side.side-collapsed .ps-reopen { display: flex; }
}

/* ═══════════════════════════════════════════════
   MENU MOBILE — usabilità (aggiunto 2026-08-29)
   Il menu Prodotti ha ~25 voci: dentro una navbar `fixed-top` il pannello
   sfora l'altezza dello schermo e le ultime voci diventano irraggiungibili,
   perché un elemento fixed non scrolla con la pagina. Qui il pannello
   diventa scrollabile e le voci ottengono aree di tocco comode (>= 44px).
   ═══════════════════════════════════════════════ */
@media (max-width: 1199.98px) {
  .mg-nav .navbar-collapse {
    max-height: calc(100vh - 130px);
    max-height: calc(100dvh - 130px);   /* dvh: esclude la barra del browser mobile */
    overflow-y: auto;
    overscroll-behavior: contain;       /* lo scroll non "sfonda" sulla pagina sotto */
    -webkit-overflow-scrolling: touch;
  }
  .mg-nav.scrolled .navbar-collapse {
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
  }
  /* Aree di tocco: righe alte almeno ~44px */
  .mg-nav .nav-link {
    padding: .65rem .25rem !important;
    font-size: .95rem;
  }
  .mg-nav .dropdown-item { padding: .55rem .85rem; font-size: .9rem; white-space: normal; }
  .mg-nav .dropdown-menu { padding: .25rem 0 .5rem; margin-bottom: .35rem; }
  .mg-nav .btn-cta { display: block; text-align: center; padding: .7rem 1rem; margin-top: .6rem; }
}

/* Schermi stretti: il cluster in alto (logo + hamburger + WhatsApp) deve
   restare su una riga sola, quindi WhatsApp torna cerchio icona-only. */
@media (max-width: 575.98px) {
  .mg-nav-right .nav-wa {
    width: 40px; height: 40px; padding: 0; border-radius: 50%;
    margin: 0; justify-content: center;
  }
  .mg-nav-right .nav-wa-label { display: none; }
  .mg-nav .navbar-toggler { padding: .35rem .5rem; }
}

/* ═══════════════════════════════════════════════
   PHOTO STEPS — sequenza foto numerate con didascalia
   Usata dal tipo di sezione `photo_steps` (content-renderer.php):
   racconta un percorso, es. disegno -> rendering -> realizzazione.
   ═══════════════════════════════════════════════ */
.stp-section { padding: 4.5rem 0; }
.mg-steps { display: grid; grid-template-columns: repeat(var(--stp-cols, 3), 1fr); gap: 28px; margin-top: 1.75rem; }
.stp { margin: 0; }
.stp .mg-gal-item { aspect-ratio: var(--stp-ratio, 4/3); }

/* Cella video dentro la griglia photo_steps: un passo puo' essere un video
   invece di una foto (chiave `video` nello step). Resta nella stessa riga,
   non entra nel lightbox e non ha hover-zoom: si comanda col player. */
.stp-cell-video { cursor: default; background: #0a1628; box-shadow: 0 10px 30px rgba(13,31,56,.16); }
.stp-cell-video video { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.stp figcaption { margin-top: .9rem; }
.stp-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.stp-num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mg-blue); color: #fff;
  font-family: var(--font-h); font-weight: 700; font-size: .9rem; line-height: 1;
}
.stp-t { font-family: var(--font-h); font-weight: 700; font-size: 1.02rem; color: var(--mg-gray-800); }
.stp-x { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--mg-gray-600); }
.bg-dk .stp-t { color: #fff; }

/* Video verticale (girato col telefono): player in formato 9/16, non a piena
   larghezza, col testo di fianco su desktop. `preload="none"` + poster:
   il file si scarica solo se qualcuno preme play. */
.stp-video { display: flex; align-items: center; gap: 2.2rem; margin-top: 2.6rem; }
.stp-video-player { flex: 0 0 clamp(220px, 22vw, 300px); }
.stp-video-player video {
  width: 100%; aspect-ratio: 9/16; display: block;
  border-radius: 14px; background: #0a1628;
  box-shadow: 0 10px 34px rgba(13,31,56,.18);
}
.stp-video-txt { flex: 1 1 auto; max-width: 560px; }
.stp-video-txt .stp-t { font-size: 1.1rem; display: block; margin-bottom: .5rem; }

/* Su tablet si scende al massimo a 3 colonne, ma senza toccare le griglie
   gia' strette (1-2 colonne), che altrimenti verrebbero allargate. */
@media (max-width: 1199.98px) { .mg-steps:not(.mg-steps--narrow) { --stp-cols: 3; } }
@media (max-width: 991.98px) { .mg-steps { --stp-cols: 2; gap: 20px; } }
@media (max-width: 767.98px) {
  .mg-steps { --stp-cols: 1; max-width: 520px; margin-inline: auto; }
  .stp-section { padding: 3rem 0; }
  .stp-video { flex-direction: column; gap: 1.3rem; max-width: 520px; margin-inline: auto; }
  .stp-video-player { flex: 0 0 auto; width: 100%; max-width: 260px; }
  .stp-video-txt { max-width: none; }
}

/* ═══════════════════════════════════════════════
   HERO MOBILE — aree separate e impilate (29/08/2026)
   Problemi risolti: testo centrato con entrambi i lati frastagliati, pulsanti
   affiancati e stretti, barra dati a 2x2 senza separatore orizzontale e con un
   bordo verticale che finiva a filo del contenitore.
   ═══════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* Tutto allineato a sinistra: margine netto e comune a titolo, testo,
     pulsanti e barra dati, cosi' le aree si leggono come blocchi distinti. */
  .hero-s { text-align: left; }
  .hero-sub { margin-left: 0; margin-right: 0; max-width: none; }

  /* Ritmo verticale fra le quattro aree */
  .hero-title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); margin-bottom: 1.1rem; }
  .hero-sub { font-size: 1.02rem; line-height: 1.65; margin-bottom: 1.6rem; }

  /* Pulsanti: uno sotto l'altro, a tutta larghezza */
  .hero-cta { flex-direction: column; gap: .7rem; width: 100%; }
  .hero-cta .btn { width: 100%; display: flex; align-items: center; justify-content: center; }

  /* Barra dati: una voce per riga (numero a sinistra, etichetta a destra),
     separate da una linea orizzontale invece che da bordi verticali. */
  .hero-c .mt-5 { margin-top: 2.2rem !important; }
  .stats-bar .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  .stat-i {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    text-align: left; padding: .95rem 1.15rem;
    border-right: none; border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .stats-bar .row > [class*="col-"]:last-child .stat-i { border-bottom: none; }
  .stat-n { font-size: 1.35rem; line-height: 1.1; }
  .stat-l { text-align: right; font-size: .72rem; letter-spacing: .05em; line-height: 1.3; }

  /* Ancore (Chi Siamo, Servizi, ...): devono stare SOTTO, non di fianco.
     `.hero-s` e' un flex in riga e le ancore, tornando `position: static` su
     mobile, rientravano nel flusso diventando la seconda colonna a destra del
     testo. Qui la hero passa a colonna e i due blocchi si impilano. */
  .hero-s { flex-direction: column; align-items: stretch; justify-content: center; }
  .hero-c { width: 100%; }
  .hero-anchors { width: 100%; }
  .hero-anchors .container { justify-content: flex-start; gap: .5rem; }
}

/* ═══════════════════════════════════════════════
   MENU — categorie comprimibili + scroll interno  (2026-08-31)
   Il pannello Prodotti (~25 voci) su finestre basse usciva dallo schermo:
   essendo dentro una navbar `fixed-top` non scorreva con la pagina, quindi
   le ultime voci erano invisibili e non cliccabili. Rimedio in tre mosse:
   voci più compatte, 4 categorie apribili/chiudibili, scroll DENTRO il
   pannello (con overscroll-behavior, così non trascina la pagina sotto).
   ═══════════════════════════════════════════════ */

/* Compattezza: meno padding = più voci visibili a colpo d'occhio */
.mg-nav .dropdown-menu { padding: .3rem; min-width: 258px; }
.mg-nav .dropdown-item { padding: .3rem .8rem; font-size: .82rem; line-height: 1.35; }
.mg-nav .dropdown-divider { margin: .25rem; }

/* "Tutti i Prodotti" e titoli di categoria (primo livello) */
.mg-nav .mg-dd-all,
.mg-nav .mg-dd-cat { color: var(--mg-blue-light); font-weight: 700; }
.mg-nav .mg-dd-all:hover, .mg-nav .mg-dd-all:focus,
.mg-nav .mg-dd-cat:hover, .mg-nav .mg-dd-cat:focus {
  color: var(--mg-cyan); background: rgba(91,196,232,.1);
}

/* Riga categoria: link a sinistra, chevron apri/chiudi a destra */
.mg-nav .mg-dd-head { display: flex; align-items: stretch; gap: 2px; }
/* Il link occupa tutta l’altezza della riga: area di tocco piena anche accanto al chevron */
.mg-nav .mg-dd-head .mg-dd-cat { flex: 1 1 auto; min-width: 0; min-height: 30px; display: flex; align-items: center; }
.mg-nav .mg-dd-toggle {
  flex: 0 0 auto; width: 34px; min-height: 30px; align-self: stretch;
  background: none; border: 0; padding: 0; cursor: pointer; border-radius: 8px;
  color: rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  transition: color .2s, background .2s;
}
.mg-nav .mg-dd-toggle:hover,
.mg-nav .mg-dd-toggle:focus-visible { background: rgba(91,196,232,.12); color: var(--mg-cyan); }
.mg-nav .mg-dd-toggle i { font-size: .72rem; line-height: 1; display: block; transition: transform .22s var(--ease); }
.mg-nav .mg-dd-group.open .mg-dd-toggle { color: var(--mg-cyan); }
.mg-nav .mg-dd-group.open .mg-dd-toggle i { transform: rotate(180deg); }

/* Sottovoci: chiuse per impostazione predefinita, aperte con .open */
.mg-nav .mg-dd-sub {
  display: none; list-style: none; padding: 0;
  margin: .1rem 0 .25rem .95rem; border-left: 1px solid rgba(91,196,232,.18);
}
.mg-nav .mg-dd-group.open .mg-dd-sub { display: block; animation: mgDdIn .18s var(--ease); }
.mg-nav .mg-dd-sub .dropdown-item { padding-left: .7rem; font-size: .79rem; color: rgba(255,255,255,.62); }
.mg-nav .mg-dd-sub .dropdown-item:hover { color: var(--mg-cyan); }
@keyframes mgDdIn { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }

/* Voce corrispondente alla pagina aperta */
.mg-nav .dropdown-item.active { background: rgba(91,196,232,.14); color: var(--mg-cyan); }

/* Desktop: il pannello non supera mai lo spazio libero sotto la navbar.
   L'altezza esatta la calcola main.js; questa è la rete di sicurezza. */
@media (min-width: 1200px) {
  .mg-nav .dropdown-menu {
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;     /* a fine corsa NON scorre la pagina sotto */
    scrollbar-width: thin;
    scrollbar-color: rgba(91,196,232,.4) transparent;
  }
  .mg-nav .dropdown-menu::-webkit-scrollbar { width: 8px }
  .mg-nav .dropdown-menu::-webkit-scrollbar-track { background: transparent }
  .mg-nav .dropdown-menu::-webkit-scrollbar-thumb { background: rgba(91,196,232,.32); border-radius: 8px }
  .mg-nav .dropdown-menu::-webkit-scrollbar-thumb:hover { background: rgba(91,196,232,.55) }
}

/* Sotto xl il menu vive dentro il pannello a scomparsa, che ha già il suo
   scroll: niente doppio scroll annidato, ma voci ancora comode da toccare. */
@media (max-width: 1199.98px) {
  .mg-nav .dropdown-menu { max-height: none; overflow: visible; }
  .mg-nav .nav-link { padding: .55rem .25rem !important; font-size: .92rem; }
  .mg-nav .dropdown-item { padding: .45rem .85rem; font-size: .88rem; white-space: normal; }
  .mg-nav .mg-dd-sub { margin-left: .8rem; }
  .mg-nav .mg-dd-sub .dropdown-item { padding-left: .75rem; font-size: .84rem; }
  .mg-nav .mg-dd-toggle { width: 46px; min-height: 40px; }
  .mg-nav .mg-dd-head .mg-dd-cat { min-height: 40px; }
  .mg-nav .mg-dd-toggle i { font-size: .85rem; }
}

/* ═══════════════════════════════════════════════
   CONDIVIDI PAGINA — pulsante flottante + riga nel footer  (2026-08-31)
   ═══════════════════════════════════════════════ */
.mg-share {
  position: fixed; right: 28px; bottom: 28px; z-index: 901;
  display: flex; align-items: center; gap: 10px;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
/* Nel footer c’è già la riga di condivisione: il pulsante flottante si toglie
   di mezzo per non coprire il bottone LinkedIn. */
.mg-share.is-hidden { opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none }
body:has(.mg-share.is-hidden) .btt { bottom: 28px }
.mg-share-btn {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, var(--mg-blue), var(--mg-blue-glow));
  color: #fff; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 24px rgba(11,110,140,.4);
  transition: transform .3s var(--ease), background .3s;
}
.mg-share-btn:hover { transform: translateY(-3px) }
.mg-share.open .mg-share-btn { background: var(--mg-dark) }

/* Il ventaglio si apre verso sinistra: non incrocia mai "torna in cima" */
.mg-share-fan {
  display: flex; align-items: center; gap: 8px;
  opacity: 0; visibility: hidden; transform: translateX(14px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.mg-share.open .mg-share-fan { opacity: 1; visibility: visible; transform: none }
.mg-share-i {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: none; padding: 0;
  background: var(--mg-dark); color: #fff !important; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  box-shadow: 0 3px 16px rgba(0,0,0,.3);
  transition: transform .2s var(--ease), background .2s;
}
.mg-share-i:hover { transform: translateY(-3px) }
.mg-share-linkedin:hover { background: #0a66c2 }
.mg-share-whatsapp:hover { background: #25d366 }
.mg-share-email:hover,
.mg-share-copy:hover,
.mg-share-native:hover { background: var(--mg-blue) }
.mg-share-toast {
  position: absolute; right: 0; bottom: 58px; white-space: nowrap; pointer-events: none;
  background: var(--mg-dark); color: #fff; font-size: .74rem;
  padding: .3rem .65rem; border-radius: 6px; box-shadow: 0 3px 14px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.mg-share-toast.show { opacity: 1; transform: none }

/* "Torna in cima" sale sopra il pulsante Condividi (che è sempre presente) */
.btt { bottom: 88px }

/* Con il banner cookie aperto i pulsanti flottanti salgono per non finirci sotto */
body:has(.ck-ban.show) .mg-share { bottom: 106px }
body:has(.ck-ban.show) .btt { bottom: 166px }

@media (max-width: 575.98px) {
  .mg-share { right: 16px; bottom: 16px; gap: 8px }
  .mg-share-btn { width: 44px; height: 44px }
  .mg-share-i { width: 38px; height: 38px; font-size: .92rem }
  .btt { bottom: 74px; right: 16px }
  body:has(.ck-ban.show) .mg-share { bottom: 136px }
  body:has(.ck-ban.show) .btt { bottom: 194px }
}

/* Riga "Condividi questa pagina" nel footer */
.mg-ft .ft-share { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem }
.mg-ft .ft-share-lbl {
  font-family: var(--font-h); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.5);
}
.mg-ft .ft-share-links { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem }
.mg-ft .ft-share-i {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  font-family: inherit; font-size: .76rem; color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  padding: .28rem .75rem; background: none; transition: all .25s var(--ease);
}
.mg-ft .ft-share-i i { font-size: .95rem; line-height: 1 }
.mg-ft .ft-share-i:hover {
  color: #fff; border-color: rgba(91,196,232,.5); background: rgba(91,196,232,.12);
}

/* Pagina LinkedIn aziendale — ultimo blocco del footer */
.mg-ft .ft-linkedin {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-h); font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  color: #fff; background: #0a66c2; border-radius: 8px; padding: .45rem .95rem;
  transition: all .25s var(--ease);
}
.mg-ft .ft-linkedin:hover {
  color: #fff; background: #0958a8; transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(10,102,194,.35);
}
.ft-linkedin-ico { flex: 0 0 auto; display: block }

/* ═══════════════════════════════════════════════
   BARRA SETTORI (home, sotto la barra dati)  (2026-08-31)
   Stessa forma della .stats-bar ma in chiaro, con icona e titolo in blu:
   i 4 settori sono gli stessi della sezione "Settori in cui Operiamo" di
   servizi.php, a cui ogni cella rimanda.
   ═══════════════════════════════════════════════ */
.sect-bar {
  border: 1px solid rgba(255,255,255,.45); border-radius: 16px; overflow: hidden;
  background: rgba(255,255,255,.93); backdrop-filter: blur(8px);
  box-shadow: 0 6px 30px rgba(10,22,40,.2);
}
.sect-i {
  height: 100%; padding: 1rem .7rem; text-align: center; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
  color: var(--mg-blue);
  border-right: 1px solid rgba(11,110,140,.14);
  transition: background .3s, color .3s;
}
.sect-bar .row > [class*="col-"]:last-child .sect-i { border-right: none }
.sect-i i { font-size: 1.6rem; line-height: 1; color: var(--mg-blue-glow); transition: color .3s }
.sect-i span {
  font-family: var(--font-h); font-weight: 700; font-size: clamp(.72rem, .95vw, .84rem);
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.3;
}
.sect-i:hover { background: rgba(11,110,140,.09); color: var(--mg-blue) }
.sect-i:hover i { color: var(--mg-blue) }

/* Sotto i 768px restano 2 colonne (i titoli sono corti): qui i separatori
   diventano una griglia 2x2 invece di tre bordi verticali di fila. */
@media (max-width: 767.98px) {
  .sect-bar { margin-top: .9rem !important }
  .sect-i { padding: .85rem .5rem; gap: .35rem }
  .sect-i i { font-size: 1.3rem }
  .sect-i span { font-size: .72rem; letter-spacing: .03em }
  .sect-bar .row > [class*="col-"]:nth-child(2n) .sect-i { border-right: none }
  .sect-bar .row > [class*="col-"]:nth-child(-n+2) .sect-i { border-bottom: 1px solid rgba(11,110,140,.14) }
}

/* ═══════════════════════════════════════════════
   EFFETTO "SI STA SCRIVENDO"  (2026-08-31)
   Lo stato .tw dura solo per la durata dell'animazione: alla fine main.js
   toglie la classe e il testo torna un paragrafo qualunque. Il cursore è un
   ::after in posizione assoluta, così non occupa spazio e non fa rifluire
   il testo mentre avanza.
   ═══════════════════════════════════════════════ */
.tw .tw-c { opacity: 0 }
.tw .tw-c.on { opacity: 1; transition: opacity .12s linear }
.tw .tw-c.tw-cur { position: relative }
.tw .tw-c.tw-cur::after {
  content: ''; position: absolute; right: -.12em; top: .04em; bottom: .04em;
  width: 2px; background: var(--mg-cyan);
  box-shadow: 0 0 6px rgba(125,224,245,.55);
  animation: twBlink .7s steps(1, end) infinite;
}
@keyframes twBlink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

/* Se il sistema chiede meno animazioni il testo è subito lì, tutto intero. */
@media (prefers-reduced-motion: reduce) {
  .tw .tw-c { opacity: 1 }
  .tw .tw-c.tw-cur::after { display: none }
}

/* ═══════════════════════════════════════════════
   TESTO GIUSTIFICATO IN TUTTO IL SITO  (2026-08-31)
   Richiesta di Michele: il corpo del testo va giustificato ovunque e SENZA
   sillabazione — nessuna parola spezzata dal trattino a fine riga.

   · `hyphens: none` è dichiarato una volta sola su tutta la pagina, così
     nessun browser può attivare la sillabazione automatica da sé, nemmeno
     dove non ce l'aspettiamo.
   · `text-justify: inter-word` distribuisce lo spazio fra le parole e non
     fra le lettere: è il comportamento corretto per un testo in italiano.
   · `overflow-wrap: break-word` è solo una rete di sicurezza: interviene
     unicamente se una singola parola è più lunga della riga, evitando che
     sfondi il riquadro.

   Restano volutamente NON giustificati (giustificare due righe centrate le
   sfascia): i sottotitoli centrati sotto i titoli di sezione, le schede a
   testo centrato .sc-card, la fascia CTA, le etichette e le voci di
   interfaccia (menu, barra dati, footer a colonne).
   ═══════════════════════════════════════════════ */
html { hyphens: none; -webkit-hyphens: none; -ms-hyphens: none }

.hero-sub,
.page-intro,
.zz-text p,
.fw-text,
.detail-section p,
.highlight-box p,
.faq-accordion .accordion-body,
.faq-accordion .accordion-body p,
.stp-video-txt p,
section p.text-muted,
#impianti p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: none; -webkit-hyphens: none;
  overflow-wrap: break-word;
}

/* Ripristini: questi blocchi sono centrati per progetto e devono restarlo
   anche se il loro paragrafo rientra in uno dei selettori qui sopra. */
.sc-card, .sc-card p,
.mg-gal-credit,
.mg-gal-lead, .mg-gal-lead p,
.cta-s p,
p.text-center { text-align: center }

/* Celle strette di griglia (step di processo, schede specs/features/servizi,
   didascalie photo_steps): poche parole per riga, quindi il giustificato
   aprirebbe buchi enormi fra le parole. Qui il testo resta allineato a
   sinistra. Il prefisso `section` serve solo a superare in specificità
   `section p.text-muted` del blocco qui sopra. */
section .proc-step p,
section .spec-card p,
section .feature-block p,
section .sv-card p,
section .pr-ov p,
.stp-x { text-align: left }

/* Le schede a testo centrato vanno riaffermate QUI, dopo tutto il resto:
   `section p.text-muted` del blocco giustificato batte in specificità
   `.sc-card p`, e senza questa riga il testo delle schede settore finiva
   allineato a sinistra dentro una scheda centrata. */
section .sc-card p,
section p.mg-gal-credit,
section .mg-gal-lead p,
section .cta-s p { text-align: center }


/* ═══════════════════════════════════════════════
   TIMELINE DI PROCESSO — quante colonne per riga  (2026-08-31)
   Il file base metteva tante colonne quanti gli step (fino a 5) e le teneva
   su una riga sola fino a 992px. Misurato: con 5 colonne la cella è 224px a
   1400px di finestra e 294px a 1920px, cioè 24 e 34 caratteri per riga —
   una colonnina di frammenti, illeggibile a qualunque risoluzione reale
   (la lettura è comoda fra i 45 e i 75 caratteri).
   Quindi 5 step vanno SEMPRE a 3 per riga (3+2, cella ~440px ≈ 48 caratteri)
   e 4 step passano a 2+2 sotto i 1400px. Sotto i 992px restano valide le
   regole già presenti più in alto nel file: 2 colonne, poi 1 sotto i 768px.
   ═══════════════════════════════════════════════ */
@media (min-width: 992px) {
  .proc-timeline.proc-cols-5 { grid-template-columns: repeat(3, 1fr) }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  .proc-timeline.proc-cols-4 { grid-template-columns: repeat(2, 1fr) }
}

/* Zigzag: riquadro immagine 4:3 — opzione 'ratio' => '43' nell'immagine dei dati pagina (2026-08-31).
   Specificita' doppia: vince sia sul 3:2 desktop sia sul 16:9 del breakpoint <992px.
   02/09 sera — Michele: «nelle lavorazioni le immagini di zigzag sono troppo grandi, rendile un po'
   piu' piccole» → a 460px «ora sono troppo piccole, una via di mezzo» → 540px, centrata nella
   colonna. Oggi la usano solo le 8 pagine lavorazioni; per un 4:3 a tutta colonna servirebbe una
   classe nuova. */
.zz-img-wrap.zz-43 { aspect-ratio: 4 / 3; max-width: 540px; margin-inline: auto; }
.zz-img-wrap.zz-43 .zz-img { width: 100%; height: 100%; object-fit: cover; }

/* Zigzag: riquadro immagine 3:4 VERTICALE — opzione 'ratio' => '34' (2026-08-31).
   Larghezza limitata e centrata nella colonna, altrimenti una foto verticale
   a mezza pagina diventa altissima. Stessa specificita' doppia della 4:3. */
.zz-img-wrap.zz-34 { aspect-ratio: 3 / 4; max-width: 420px; margin-inline: auto; }
.zz-img-wrap.zz-34 .zz-img { width: 100%; height: 100%; object-fit: cover; }

/* photo_steps: le foto nelle celle sono ancorate in basso a destra (richiesta 2026-08-31);
   la singola immagine puo' scavalcare con 'pos' => '...' nei dati (style inline sull'img). */
.stp .mg-gal-item img { object-position: right bottom; }

/* Zigzag con piu' immagini impilate nella colonna media (chiave 'images'):
   spazio verticale fra un'immagine e la successiva. */
.zz-media .zz-img-wrap + .zz-img-wrap { margin-top: 1rem; }

/* Servizi — "Trasporto e montaggio in cantiere": la coppia di foto resta agganciata
   al testo sopra (niente doppio padding) a piena larghezza (2 foto al 50% della colonna).
   Scoped sull'id della sezione: non tocca gli altri photo_steps a 2 colonne. */
#trasporto-montaggio, #scale-da-interno, #impianto-dosaggio, #impianto-macinazione, #tramoggia-dosaggio { padding-top: 0; }
#trasporto-montaggio .mg-steps, #scale-da-interno .mg-steps, #impianto-dosaggio .mg-steps, #impianto-macinazione .mg-steps, #tramoggia-dosaggio .mg-steps { margin-inline: auto; margin-top: 0; }
/* Qui le due foto non sono i passi di un caso studio: niente numerazione. */
#impianto-dosaggio .stp-num { display: none; }
/* Una sola riga: due foto orizzontali + il video verticale girato in reparto.
   La terza colonna e' piu' stretta (9/16 dell'altezza comune) cosi' il video
   riempie la cella invece di finire in una fascia nera; altezza fissa al posto
   dell'aspect-ratio, come in #soppalco-inox, per pareggiare le tre celle. */
#impianto-dosaggio .mg-steps { grid-template-columns: 1fr 1fr .46fr; }
#impianto-dosaggio .stp .mg-gal-item { aspect-ratio: auto; height: clamp(260px, 30vw, 440px); }
@media (max-width: 991.98px) {
  #impianto-dosaggio .mg-steps { grid-template-columns: 1fr 1fr; }
  #impianto-dosaggio .stp--video { grid-column: 1 / -1; justify-self: center; width: min(100%, 300px); }
}
@media (max-width: 767.98px) {
  #impianto-dosaggio .mg-steps { grid-template-columns: 1fr; }
  #impianto-dosaggio .stp .mg-gal-item { height: clamp(220px, 62vw, 340px); }
  #impianto-dosaggio .stp--video .mg-gal-item { height: auto; aspect-ratio: 9/16; }
}
#impianto-macinazione .stp-num { display: none; }
#tramoggia-dosaggio .stp-num { display: none; }
/* Render CAD su fondo chiaro: vanno visti interi, non ritagliati. */
#tramoggia-dosaggio .mg-gal-item { background: #fff; }
#tramoggia-dosaggio .mg-gal-item img { object-fit: contain; object-position: center; padding: 10px; }
/* Riga dei tre render: le due viste verticali strette (3/12 ciascuna) e la
   vista dall'alto, orizzontale, larga il doppio (6/12). Altezza comune fissa
   al posto dell'aspect-ratio, cosi' le tre celle si allineano; i disegni
   restano in `contain` e non vengono tagliati. */
#tramoggia-dosaggio .mg-steps { grid-template-columns: 1fr 1fr 2fr; }
#tramoggia-dosaggio .stp .mg-gal-item { aspect-ratio: auto; height: clamp(250px, 26vw, 390px); }
@media (max-width: 991.98px) {
  #tramoggia-dosaggio .mg-steps { grid-template-columns: 1fr 1fr; }
  #tramoggia-dosaggio .stp:last-child { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  #tramoggia-dosaggio .mg-steps { grid-template-columns: 1fr; }
  #tramoggia-dosaggio .stp .mg-gal-item { height: clamp(260px, 70vw, 400px); }
}

/* Testo grande + assonometria di fianco (zigzag con id). E' un render su fondo
   chiaro: fondo bianco e `contain`, altrimenti lo `cover` di .zz-square lo taglia. */
#tramoggia-intro .zz-img-wrap.zz-square { background: #fff; max-width: 520px; }
#tramoggia-intro .zz-img-wrap.zz-square .zz-img { object-fit: contain; padding: 12px; }

/* Soppalco inox (carpenteria-soppalchi): tre foto in riga 6+3+3.
   Le celle hanno altezza fissa uguale, quindi si sostituisce l'aspect-ratio. */
#soppalco-inox { padding-top: 0; }
#soppalco-inox .mg-steps { margin-inline: auto; margin-top: 0; grid-template-columns: 2fr 1fr 1fr; }
#soppalco-inox .stp-num { display: none; }
#soppalco-inox .stp .mg-gal-item { aspect-ratio: auto; height: clamp(240px, 27vw, 430px); }
@media (max-width: 991.98px) { #soppalco-inox .mg-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767.98px) { #soppalco-inox .mg-steps { grid-template-columns: 1fr; } #soppalco-inox .stp .mg-gal-item { height: clamp(220px, 60vw, 320px); } }

/* Home, "Impianti realizzati": 8 foto = sempre due righe da 4 da 768px in su.
   Serve a battere la media query >=1600px che porterebbe la galleria a 6 per riga
   (quindi 6+2). Selettore con id: specificita' piu' alta, quindi vince ovunque. */
@media (min-width: 768px) {
  #impianti-realizzati .mg-gallery .mg-gal-item,
  #impianti-realizzati .mg-gallery[class*="cols-"] .mg-gal-item,
  body.side-collapsed #impianti-realizzati .mg-gallery .mg-gal-item,
  body.side-collapsed #impianti-realizzati .mg-gallery[class*="cols-"] .mg-gal-item {
    flex-basis: calc((100% - 42px) / 4);
    max-width: calc((100% - 42px) / 4);
  }
}

/* Zigzag, immagine 3:2 ridotta ('ratio' => '32s'): stessa proporzione del default
   ma piu' piccola e centrata nella colonna. Usata dal caso "Aspirazione per calamita"
   in progettazione.php, dove i quattro render a mezza pagina risultavano troppo grandi. */
.zz-img-wrap.zz-32s { aspect-ratio: 3/2; max-width: 460px; margin-inline: auto; }
.zz-img-wrap.zz-32s .zz-img { object-fit: cover; }

/* Servizi, "Settori in cui Operiamo" (#settori): la scheda "Industria e Impianti"
   elenca gli otto settori industriali ed e' molto piu' lunga delle altre; in griglia
   uniforme alzava tutta la riga. Prima card a piena larghezza, le altre tre sotto.
   Scoped sull'id: la griglia dei trattamenti superficiali resta a 3+2. */
#settori .features-grid { grid-template-columns: repeat(3, 1fr); }
#settori .features-grid .feature-block:first-child { grid-column: 1 / -1; }
@media (max-width: 991.98px) {
  #settori .features-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  #settori .features-grid { grid-template-columns: 1fr; }
  #settori .features-grid .feature-block:first-child { grid-column: auto; }
}

/* Settori industriali "a pulsante": riquadri accanto al titolo del blocco
   Industria e Impianti (home #settori e servizi #settori). Non sono link,
   quindi niente cursore o hover che li faccia sembrare cliccabili. */
.mg-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.mg-chip {
  display: inline-block;
  font-family: var(--font-h); font-size: .74rem; font-weight: 600;
  line-height: 1.2; letter-spacing: .01em;
  color: var(--mg-blue);
  background: rgba(11,110,140,.07);
  border: 1px solid rgba(11,110,140,.22);
  border-radius: 999px;
  padding: .3rem .7rem;
  white-space: nowrap;
}
@media (max-width: 575.98px) { .mg-chip { white-space: normal; font-size: .72rem } }
/* Titolo + riquadri sulla stessa riga, con i riquadri che vanno a capo da soli. */
.mg-chips-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-bottom: .7rem; }
.mg-chips-head h3 { margin: 0 }

/* 03/09/2026 — card hub con foto 4:3 esatte (Michele: «la proporzione sia esatta»): opzione 'ratio' => '43' del tipo cards. */
.sv-thumb.sv-thumb-43 { aspect-ratio: 4 / 3; }


/* ═══════════════════════════════════════════════
   ACCESSIBILITÀ DA TASTIERA  (2026-09-03)
   · skip-link: primo elemento della pagina (includes/nav.php), visibile solo col focus
   · focus visibile ovunque, con colore adatto ai fondi scuri
   · html.no-js: senza JavaScript i blocchi .rv/.he restano visibili
   · prefers-reduced-motion: niente reveal, nastro, parallax, contatore
   ═══════════════════════════════════════════════ */
.skip-link {
  position: absolute; top: -200px; left: 1rem; z-index: 2100;
  background: var(--mg-blue); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 10px 10px; font-family: var(--font-h); font-weight: 600;
  text-decoration: none; transition: none;
}
.skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px }
#contenuto:focus { outline: none }

:focus-visible { outline: 3px solid var(--mg-blue); outline-offset: 3px }
.mg-nav :focus-visible, .mg-ft :focus-visible, .cta-s :focus-visible, .bg-dk :focus-visible,
.pg-hd :focus-visible, .hero-s :focus-visible, .ck-ban :focus-visible, .mglb :focus-visible,
.prod-side-nav :focus-visible, .mq-band :focus-visible { outline-color: var(--mg-cyan) }
.btn-mg:focus-visible, .btn-cta:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 6px var(--mg-blue-light) }
.mg-gal-item:focus-visible, .pr-card:focus-visible, .g-item:focus-visible { outline-offset: -3px }

html.no-js .rv, html.no-js .he { opacity: 1; transform: none }

@media (prefers-reduced-motion: reduce) {
  .rv, .he { opacity: 1; transform: none; transition: none }
  .mq-track { animation: none }
  .parallax-bg { display: none }
  html { scroll-behavior: auto }
  .btn-mg:hover, .btn-cta:hover, .hero-anchors a:hover { transform: none }
}
.cf-req { color: #b42318; font-weight: 700 }

/* Card prodotto compatte (cards con cols => 6): 6 per riga a desktop, con etichetta di categoria */
.sv-card-sm { padding: 1.1rem 1rem 1rem; border-radius: var(--radius-sm) }
.sv-card-sm .sv-thumb { margin: -1.1rem -1rem 1rem }
.sv-card-sm .sv-icon { width: 38px; height: 38px; border-radius: 10px; margin-bottom: .6rem !important }
.sv-card-sm .sv-icon i { font-size: 1rem }
.sv-card-sm h4 { font-size: .98rem; line-height: 1.25; margin-bottom: .35rem }
section .sv-card-sm p { font-size: .8rem; line-height: 1.5; margin-bottom: .5rem; text-align: left } /* colonna stretta: niente giustificato */
.sv-card-sm .c-link { font-size: .78rem }
.sv-cat {
  display: block; font-family: var(--font-h); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--mg-blue); margin-bottom: .3rem;
}

/* Progettazione › «Una tramoggia su misura»: 2 foto quadrate, ma non a tutta larghezza (03/09/2026) */
@media (min-width: 992px) { #tramoggia-su-misura .mg-steps { max-width: 66.666%; margin-inline: auto; } } /* due celle larghe come col-4 */

/* (03/09 sera) la regola per #prog-studi non serve più: da ora `cols` del dato comanda su tutte le gallerie. */

/* ═══ Leggibilità (03/09/2026, analisi UX): etichette mai sotto ~12,5px ═══ */
.s-label { font-size: .8rem }
.ps-title, .ps-cat { font-size: .82rem }
.ps-link { font-size: .8rem }
.mg-nav .mg-dd-sub .dropdown-item { font-size: .86rem }
.mg-ft .ft-share-lbl, .mg-ft .mg-ft-tagline { font-size: .8rem }
.sect-i span { font-size: .8rem }
.mg-chip { font-size: .8rem }
.sv-cat { font-size: .74rem }
.stat-l { font-size: clamp(.74rem, 1vw, .82rem) }
@media (max-width: 575.98px) { .mg-chip { font-size: .78rem } }

/* Sotto 576px il giustificato apre buchi: tutto il corpo del testo torna a sinistra
   (i blocchi centrati restano centrati grazie alle regole `text-center` più specifiche sopra). */
@media (max-width: 575.98px) {
  .hero-sub, .page-intro, .zz-text p, .fw-text, .detail-section p, .highlight-box p,
  .faq-accordion .accordion-body, .faq-accordion .accordion-body p, .stp-video-txt p,
  section p.text-muted, #impianti p { text-align: left }
  section .sc-card p, section p.mg-gal-credit, section .mg-gal-lead p, section .cta-s p, p.text-center { text-align: center }
}

/* ═══ LinkedIn nella navbar, accanto a WhatsApp (03/09/2026) ═══
   Resta sempre cerchio (a differenza del WhatsApp, che sotto i 1200px diventa
   una voce con etichetta): due pulsanti larghi affiancati farebbero traboccare
   il cluster in alto su tablet. */
.nav-li {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  background: #0a66c2; color: #fff !important; font-size: 1.15rem;
  text-decoration: none; padding: 0;
  transition: transform .2s var(--ease), background .2s;
}
.nav-li:hover { background: #1178d4; color: #fff !important; transform: translateY(-1px) scale(1.06); }
.nav-li i { font-size: 1.1rem; line-height: 1; }
@media (max-width: 575.98px) { .mg-nav-right .nav-li { width: 40px; height: 40px; } }

/* Griglia specs con due sole schede (certificazioni EXC1/EXC2): contenuta e centrata,
   altrimenti su schermi larghi le card diventano due blocchi enormi (03/09/2026). */
.specs-grid--2 { max-width: 860px; margin-inline: auto; }

/* Home › seconda riga della galleria impianti (03/09/2026): il caso «dosaggio materie prime»
   sta attaccato alle 4 foto qui sopra, separato solo dal titolo, con la sola foto reale centrata. */
#impianto-dosaggio-home { padding-top: 0; }
#impianto-dosaggio-home .zz-title { font-size: clamp(1.1rem, 1.8vw, 1.4rem); margin-bottom: 1.2rem; }

/* Riga di credito in fondo al footer (03/09/2026) */
.mg-ft .ft-credit { border-top: 1px solid rgba(255,255,255,.08); }
.mg-ft .ft-credit a { font-size: .72rem; letter-spacing: .04em; color: rgba(255,255,255,.45); text-decoration: none; }
.mg-ft .ft-credit a:hover { color: var(--mg-blue-light); }

/* Hero su smartphone e tablet (< 992px): NESSUNA animazione d'ingresso e niente typewriter
   (03/09/2026, PageSpeed mobile). L'elemento LCP della home e' il paragrafo della hero:
   Google misurava 2,7 s di ritardo di rendering perche' entrava con opacita' 0 e veniva
   poi "scritto" lettera per lettera. Da computer (>= 992px) l'effetto resta com'era.
   Le regole stanno in fondo al file perche' .hero-s .he (0,2,0) deve battere .he.ld (0,2,0).
   Il typewriter e' disattivato in js/main.js con la stessa soglia. */
@media (max-width: 991.98px) {
  .hero-s .he, .hero-s .he.ld { opacity: 1; transform: none; transition: none; }
  .hero-s .tw .tw-c { opacity: 1; transition: none; }
  .hero-s .tw .tw-c.tw-cur::after { display: none; }
}

/* Contrasto del footer (PageSpeed/axe, 03/09/2026): testo e link erano bianco al 50 % / 48 % / 45 %
   su #0a1628, sotto il 4,5:1 richiesto (AA). Ora testo 78 %, link 74 %, credito 62 %: tutti sopra 6:1.
   Il bianco pieno resta ai titoli delle colonne. */
.mg-ft.text-white-50, .mg-ft .text-white-50 { color: rgba(255,255,255,.78) !important; }
.mg-ft a { color: rgba(255,255,255,.74); }
.mg-ft .ft-credit a { color: rgba(255,255,255,.62); }
.mg-ft .mg-ft-tagline { color: rgba(255,255,255,.78); }

/* Galleria › opzione 'feature' (10/09/2026, Allestimenti › The Corner): fra il credito e la griglia.
   Da 992px foto 1 a col-6 e foto 2 e 3 a col-3 sulla stessa riga (Michele); da 768 a 991px la prima
   va a tutta larghezza e le altre due affiancate; sotto 768px una per riga (regola base di .mg-steps).
   Poi il testo a tutta larghezza, allineato ai bordi della riga di foto (prima era a 860px, troppo
   stretto), in due colonne da 6 con 'columns' (a capo sotto i 992px). */
.mg-gal-feature { margin-bottom: 2.5rem; }
.mg-gal-feature .mg-steps { margin-top: .4rem; }
@media (min-width: 992px) { .mg-gal-feature .mg-steps { grid-template-columns: 2fr 1fr 1fr; } }
@media (min-width: 768px) and (max-width: 991.98px) { .mg-gal-feature .stp:first-child { grid-column: 1 / -1; } }
.mg-gal-feature-text { margin: 2rem 0 0; }
.mg-gal-feature-text p { font-size: 1.05rem; line-height: 2; color: var(--mg-gray-600); text-align: justify; text-justify: inter-word; margin-bottom: .6rem; }
.mg-gal-feature-text p:last-child { margin-bottom: 0; }
/* Seconda colonna (in The Corner: chi e' UPM GROUP e il rimando) evidenziata con un bordo azzurro a sinistra
   (Michele, 10/09/2026). Il gutter di Bootstrap fa gia' da distanza fra bordo e testo. */
.mg-gal-feature-col + .mg-gal-feature-col { border-left: 3px solid var(--mg-blue-light); }
/* Card di link esterni accanto al testo (BPER Vibo Valentia, Isola dei Tesori, 10/09/2026): stesso azzurro
   del bordo e del riquadro di The Corner; la colonna della card non ha il bordo. */
.mg-gal-feature-col.is-card { border-left: 0; }
.mg-gal-feature-card { background: rgba(91,196,232,.12); border-left: 3px solid var(--mg-blue-light); border-radius: 0 12px 12px 0; padding: 1rem 1.1rem; }
.mg-gal-feature-card-credit { font-size: .9rem; color: var(--mg-gray-600); margin-bottom: 1.1rem; }   /* uno spazio fra credito e link (Michele, 10/09/2026) */
.mg-gal-feature-text .mg-gal-feature-card-credit a { border-bottom: 0; }
.mg-gal-feature-card-credit { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.mg-gal-feature-card-credit a { display: inline-flex; }
.mg-gal-feature-card-credit .mg-gal-credit-logo { margin: 0; }   /* nella card stretta il logo va a capo senza sovrapporsi al testo */
.mg-gal-feature-text.is-dark .mg-gal-feature-card-credit { color: rgba(255,255,255,.72); }
.mg-gal-feature-text.is-dark .mg-gal-feature-card-credit .mg-gal-credit-logo { filter: brightness(0) invert(1); }
.mg-gal-feature-card-t { font-family: var(--font-h); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mg-blue); margin-bottom: .5rem; }
.mg-gal-feature-text p.mg-gal-feature-card-x { font-size: .95rem; line-height: 1.65; text-align: left; margin-bottom: .75rem; }
.mg-gal-feature-text.is-dark p.mg-gal-feature-card-x { color: rgba(255,255,255,.72); }
.mg-gal-feature-card-links { list-style: none; margin: 0; padding: 0; }
.mg-gal-feature-card-links li + li { margin-top: .45rem; }
.mg-gal-feature-text .mg-gal-feature-card-links a { font-size: .95rem; line-height: 1.45; display: inline; }
.mg-gal-feature-text.is-dark .mg-gal-feature-card { background: rgba(255,255,255,.07); }
.mg-gal-feature-text.is-dark .mg-gal-feature-card-t { color: var(--mg-blue-light); }
/* Colonna estesa (UPM GROUP): in fondo il rimando alla pagina del partner in un riquadro chiaro nello
   stesso azzurro del bordo (Michele, 10/09/2026). */
.mg-gal-feature-text p.mg-gal-feature-cta { margin-top: 1rem; padding: .8rem 1.1rem; background: rgba(91,196,232,.12); border-radius: 10px; line-height: 1.7; text-align: left; }
.mg-gal-feature-text a { color: var(--mg-blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.15); }
.mg-gal-feature-text a:hover { border-bottom-color: currentColor; }
.mg-gal-feature-text .bi { font-size: .8em; color: var(--mg-blue); margin-left: .15rem; }
.mg-gal-feature-text.is-dark p { color: rgba(255,255,255,.72); }
.mg-gal-feature-text.is-dark a, .mg-gal-feature-text.is-dark .bi { color: #fff; border-bottom-color: rgba(255,255,255,.45); }
@media (max-width: 575.98px) { .mg-gal-feature-text p { text-align: left; } }

/* Home › I nostri partner (10/09/2026): logo e scheda UPM GROUP, poi l'esempio The Corner su una riga
   6+3+3 come in Allestimenti (risultato, officina, montaggio). Le foto hanno formati diversi (panoramica
   1200x306, quadrate 1024): per pareggiare le altezze le celle sono 5/2 e 5/4 in cover centrato
   (la foto intera resta nella lightbox). Da 768 a 991px la prima va a tutta larghezza col suo rapporto
   reale e le altre due affiancate; sotto 768px una per riga (regola base di .mg-steps). */
#partner .partner-logo { display: block; max-width: 260px; margin-inline: auto; padding: 1.75rem 1.5rem; background: #fff; border: 1px solid var(--mg-gray-100); border-radius: 14px; box-shadow: 0 4px 16px rgba(13,31,56,.06); transition: box-shadow .3s ease; }
#partner .partner-logo:hover { box-shadow: 0 8px 26px rgba(13,31,56,.12); }
#partner .partner-logo img { display: block; width: 100%; height: auto; }
#partner .partner-links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
#partner .mg-steps { margin-top: 0; }
#partner .stp .mg-gal-item img { object-position: center; }
#partner .stp figcaption { margin-top: .6rem; }
#partner .stp:first-child { --stp-ratio: 1200/306; }
@media (min-width: 992px) {
  #partner .mg-steps { grid-template-columns: 2fr 1fr 1fr; }
  #partner .stp:first-child { --stp-ratio: 5/2; }
}
@media (min-width: 768px) and (max-width: 991.98px) { #partner .stp:first-child { grid-column: 1 / -1; } }