/* Tema minerbe (Minerbe Diesel S.r.l.) — dal mockup 2 accettato (05_mockup_minerbe/css/style_2.css).
   Le aggiunte per il sito (pagine interne, galleria, messaggi, area clienti) sono in fondo al file. */

/* =====================================================================
   MINERBE DIESEL S.r.l. - Mockup home page - versione mock_2
   Foglio di stile abbinato a mock_2.html
   ---------------------------------------------------------------------
   mock_2 riorganizza i contenuti reali del sito in un layout pulito che
   mette in evidenza il soccorso stradale con officina mobile, oggi
   invisibile nel sito originale.

   IMPIANTO CROMATICO: ripreso dai fogli di stile di minerbediesel.it
   (blocco BeTheme generato, dentro la home). Ruoli letti dal CSS:
     fondo pagina    #FFFFFF   html{background-color:#ffffff}
     testo corrente  #626262   16px / 25px, Roboto 400
                               (qui scurito a #444444, vedi nota in :root)
     titoli h1-h5    #000000   (h6 e' l'unico a #161922)
     primario, link  #1554FF
     hover, secondo  #0089F7
     bordi campi     #EBEBEB
     fondo secondo   #F2F2F2
     footer          #000000   #Footer{background-color:#000000}
   Tre colori dell'originale NON sono in uso e non hanno quindi un token:
     #0089F7  secondario. Come fondo di un testo bianco da' 3.55:1 e come
              testo su bianco 3.11:1: sotto la soglia AA in entrambi i casi.
              L'originale lo usa sull'hover; qui l'hover scurisce verso
              l'antracite, vedi la nota sui bottoni.
     #F2F2F2 e #F7F7F7  fondi secondari. Al loro posto c'e' la famiglia
              metallica, che copre lo stesso ruolo con una lettura di
              superficie invece che di tinta piatta.
   Scala titoli dell'originale: h1 60/50 w400, h2 50/34 w300,
   h3 35/29 w300, h4 28/25 w500, h5 20/25 w700, h6 14/25 w400.
   Bottoni dell'originale: 16px w400, padding 16/20, bordo 2px, raggio 3px.

   ELEMENTI METALLIZZATI: dove serviva un tono in piu' rispetto alla
   palette dell'originale non e' stato introdotto un colore di accento
   nuovo, ma una famiglia di grigi metallici ottenuti per sfumatura di
   colore, virati sul blu #1554FF del brand. Nessuna texture disegnata.
   Sono superfici, non accenti, e servono a:
     - le schede dello slider delle autorizzazioni (pannello dell'immagine)
     - le card dei servizi
     - la fascia dei numeri (banda in acciaio scuro)
     - la targa dei dati del soccorso, l'unica INCASSATA anziche' in
       rilievo perche' sta dentro una sezione a sua volta metallica
     - le sezioni alternate, i filetti e le coste di separazione
   ===================================================================== */

:root {
    /* --- palette letta dai CSS di minerbediesel.it --- */
    --bianco: #FFFFFF;
    --nero: #000000;
    --antracite: #161922;
    --blu: #1554FF;
    /* Il testo corrente dell'originale e' #626262 (6.10:1 su bianco).
       Portato a #444444, che e' un altro grigio gia' presente nei CSS
       dell'originale: 9.74:1 su bianco e 8.05:1 nel punto piu' scuro
       della lamiera delle card, quindi con margine ampio sulla soglia AA
       anche dove prima era al limite (4.91:1). */
    --testo: #444444;
    --bordo: #EBEBEB;

    /* --- famiglia metallica ---
       Non una texture ma sfumature di colore. I grigi sono virati sul blu
       del brand: #1554FF spinto quasi a bianco da' i chiari, lo stesso blu
       spinto verso il #161922 da' gli scuri. La lettura metallica nasce
       dalla rampa (banda di luce in alto, ombra a meta', risalita in
       basso), non da righe disegnate. */
    --metallo-1: #F3F6FC;
    --metallo-2: #DDE4F1;
    --metallo-3: #C4CDDE;
    --metallo-4: #98A3BA;
    --metallo-bordo: #C6CFE0;
    --metallo-bordo-scuro: #3C4661;

    /* rampa acciaio chiaro: placche, pannelli, testata del modal */
    --acciaio-chiaro: linear-gradient(172deg,
            #FFFFFF 0%,
            #F4F7FC 20%,
            #E6ECF7 45%,
            #D8E0F0 52%,
            #ECF1F9 63%,
            #F9FBFE 86%,
            #FFFFFF 100%);
    /* rampa acciaio per le card servizio.
       Diversa da --acciaio-chiaro: su una superficie alta come una card
       la banda d'ombra a meta' leggerebbe come sfumatura, quindi la luce
       e il colpo di lama stanno nel terzo superiore e i due terzi bassi
       restano una superficie calma, leggibile sotto il testo.
       Resta comunque piu' chiara del fondo della sezione, cosi' la card
       si stacca invece di confondersi. */
    --acciaio-card: linear-gradient(168deg,
            #FFFFFF 0%,
            #FAFCFE 12%,
            #EBF0F8 26%,
            #E0E7F4 33%,
            #F1F4FA 44%,
            #F8FAFD 62%,
            #FDFDFE 100%);
    --acciaio-card-hover: linear-gradient(168deg,
            #FFFFFF 0%,
            #FDFEFF 12%,
            #F1F5FC 26%,
            #E7EDF8 33%,
            #F7F9FD 44%,
            #FDFEFF 62%,
            #FFFFFF 100%);
    /* rampa acciaio scuro: fascia dei numeri */
    --acciaio-scuro: linear-gradient(172deg,
            #515D79 0%,
            #333D54 20%,
            #1D2433 45%,
            #141924 53%,
            #242D40 66%,
            #3C4661 88%,
            #4E5975 100%);
    /* bisello: la luce sopra e l'ombra sotto che chiudono la lamiera */
    --bisello: inset 0 1px 0 rgba(255, 255, 255, 0.95),
               inset 0 -1px 0 rgba(21, 84, 255, 0.10);
    --bisello-scuro: inset 0 1px 0 rgba(255, 255, 255, 0.16),
                     inset 0 -1px 0 rgba(0, 0, 0, 0.55);
    /* Bisello INCASSATO: e' il --bisello girato al contrario, ombra sopra
       e luce sotto. Serve dove una superficie metallica sta dentro
       un'altra superficie metallica: se entrambe sono in rilievo si
       annullano e non si distinguono piu'. Cosi' la seconda si legge come
       ricavata dentro la prima. */
    --bisello-incassato: inset 0 2px 4px rgba(22, 25, 34, 0.16),
                         inset 0 -1px 0 rgba(255, 255, 255, 0.85);
    /* rampa piu' scura della sezione, con la luce che cade dal basso:
       coerente con l'ombra portata dall'alto */
    --acciaio-incassato: linear-gradient(172deg,
            #DCE3F0 0%,
            #E3E9F4 30%,
            #EAEFF7 58%,
            #F2F5FA 82%,
            #F7F9FC 100%);

    --font-roboto: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    /* --- rimappatura variabili Bootstrap --- */
    --bs-primary: #1554FF;
    --bs-primary-rgb: 21, 84, 255;
    --bs-link-color: #1554FF;
    --bs-link-color-rgb: 21, 84, 255;
    /* nell'originale a:hover ha lo STESSO colore di a (#1554ff): i link
       non cambiano tinta, cambia la sottolineatura. Cosi' si evita anche
       il #0089F7 come colore di testo, che su bianco da' solo 3.11:1. */
    --bs-link-hover-color: #1554FF;
    --bs-link-hover-color-rgb: 21, 84, 255;
    --bs-body-font-family: var(--font-roboto);
    --bs-body-font-size: 1rem;          /* 16px, come l'originale */
    --bs-body-line-height: 1.5625;      /* 25px su 16px */
    --bs-body-color: #444444;
    --bs-body-bg: #FFFFFF;
    --bs-heading-color: #000000;
    --bs-border-color: #EBEBEB;

    /* raggio 3px: e' quello dei bottoni dell'originale */
    --bs-border-radius: 3px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 3px;
    --bs-border-radius-xl: 3px;
    --bs-border-radius-xxl: 3px;
    --bs-border-radius-pill: 3px;
}

/* =====================================================================
   Contenitore
   Le utility g-* impostano --bs-gutter-x sulla .row: g-5 vale 3rem, che
   si traduce in margini negativi di -24px per lato. Il padding del
   .container e' pero' gia' calcolato sul gutter PROPRIO del contenitore
   (1.5rem, cioe' 12px per lato), e una custom property impostata sulla
   riga non lo ricalcola. La differenza di 12px per lato esce dal
   contenitore: dove questo ha margine da mangiare non si vede, ma appena
   sotto ogni suo breakpoint (360-576px e 992px) la pagina scorre in
   orizzontale.
   Il padding del contenitore viene quindi portato a 24px, cioe' al
   gutter massimo usato dalle righe, senza toccare --bs-gutter-x: le
   righe con gutter minore restano allineate allo stesso filo e nessuna
   sborda piu'. Se in futuro si usasse g-6 o superiore, questo valore va
   rialzato di conseguenza.
   ===================================================================== */
.container {
    padding-left: 24px;
    padding-right: 24px;
}

body {
    background-color: var(--bianco);
    color: var(--testo);
    font-family: var(--font-roboto);
}

/* =====================================================================
   Tipografia
   Un solo H1 (hero), H2 di sezione, H3 di card.
   Le dimensioni sono quelle dell'originale, rese fluide per evitare i
   salti secchi fra i tre breakpoint di BeTheme.
   ===================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-roboto);
    color: var(--nero);
    margin: 0;
}

/* 60px nell'originale. Peso 500 invece di 400: il titolo sta su una
   fotografia notturna e a 400 perdeva corpo. */
.md-hero-title {
    font-size: clamp(2.25rem, 4.6vw, 3.75rem);
    font-weight: 500;
    line-height: 1.08;
    color: var(--bianco);
}

.md-hero-sub {
    font-size: clamp(1.05rem, 1.5vw, 1.375rem);
    font-weight: 300;
    line-height: 1.5;
    color: var(--bianco);
}

/* 50px w300 come l'originale; interlinea portata a 1.1 perche' i 34px
   dell'originale farebbero collidere le righe di un titolo su due righe */
.md-h2 {
    font-size: clamp(1.875rem, 3.4vw, 3.125rem);
    font-weight: 300;
    line-height: 1.1;
}

/* titolo di card: e' l'h4 dell'originale, 28px w500 */
.md-card-title {
    font-size: clamp(1.375rem, 1.8vw, 1.75rem);
    font-weight: 500;
    line-height: 1.2;
}

.md-tile-title {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    color: var(--nero);
}

/* h5 dell'originale: 20px w700 */
.md-card-inst-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

/* occhiello sopra i titoli di sezione: blu del brand, 5.61:1 su bianco */
.md-eyebrow {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blu);
    margin-bottom: 0.75rem;
}

/* misura di lettura */
.md-measure { max-width: 62ch; }

a { text-decoration: none; }

/* =====================================================================
   Sezioni
   Spaziature piu' generose di mock_1 (60px).
   .md-section-alt e' la sezione alternata: non il grigio piatto #F2F2F2
   ma una lamiera chiara, cioe' la sua versione metallica virata al blu.
   ===================================================================== */
.md-section {
    padding: 96px 0;
}

/* Su una superficie alta la rampa piena leggerebbe come sfondo sfumato:
   qui resta solo la caduta di luce dall'alto, appena virata al blu. La
   rampa completa e' riservata alle superfici piccole. */
.md-section-alt {
    background-color: var(--metallo-1);
    /* Due strati. Sotto, la caduta di luce dall'alto verso il basso.
       Sopra, un'ombra ellittica ancorata all'angolo in alto a sinistra:
       insieme danno una lamiera illuminata dall'alto a destra, con i due
       angoli opposti in ombra.
       La dissolvenza dell'ellisse e' scritta come rgba dello stesso
       colore e non con la parola chiave transparent: quest'ultima e' nero
       trasparente, e su alcuni motori l'interpolazione passa per un grigio
       sporco invece di sfumare pulito. */
    background-image:
        radial-gradient(115% 88% at 0% 0%,
            #E2EAF6 0%, rgba(226, 234, 246, 0) 58%),
        linear-gradient(180deg,
            #FFFFFF 0%, #F7F9FD 35%, #F1F5FB 70%, #E9EFF9 100%);
    border-top: 1px solid var(--metallo-bordo);
    border-bottom: 1px solid var(--metallo-bordo);
}

@media (max-width: 767.98px) {
    .md-section { padding: 64px 0; }
}

/* filetto sotto i titoli di sezione: segmento blu del brand seguito da
   una barra in acciaio */
.md-rule {
    display: block;
    width: 96px;
    height: 4px;
    margin-top: 1.25rem;
    background-image: linear-gradient(90deg,
            var(--blu) 0 40%, var(--metallo-3) 40% 100%);
}

/* =====================================================================
   Bottoni
   Misure dell'originale: 16px, padding 16/20, bordo 2px, raggio 3px.
   Due famiglie: pieno blu e contornato.
   CONTRASTO: bianco su #1554FF = 5.61:1 e #1554FF su bianco = 5.61:1,
   entrambi conformi AA per il testo corrente.
   ===================================================================== */
.md-btn-solid,
.md-btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-family: var(--font-roboto);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    border-radius: 3px;
    border-style: solid;
    border-width: 2px;
    padding: 14px 26px;
    transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
}

.md-btn-solid {
    background-color: var(--blu);
    border-color: var(--blu);
    color: var(--bianco);
}
/* Hover: nell'originale il bottone tema va da #0095EB a #1554FF, cioe'
   SCURISCE. Nella palette non esiste un blu piu' scuro del #1554FF, e il
   #0089F7 come riempimento darebbe solo 3.55:1 sul testo bianco. Si
   scurisce quindi verso l'antracite dell'originale: 16.88:1, direzione
   coerente e nessun colore nuovo. Alternative nel report. */
.md-btn-solid:hover,
.md-btn-solid:focus-visible {
    background-color: var(--bianco);
    border-color: var(--blu);
    color: var(--blu);
}

/* contornato su fondo chiaro */
.md-btn-text {
    background-color: transparent;
    border-color: var(--blu);
    color: var(--blu);
}
.md-btn-text:hover,
.md-btn-text:focus-visible {
    background-color: var(--blu);
    border-color: var(--blu);
    color: var(--bianco);
}

/* contornato sui fondi scuri: hero e footer */
.md-hero .md-btn-text,
.md-footer .md-btn-text {
    border-color: var(--bianco);
    color: var(--bianco);
}
.md-hero .md-btn-text:hover,
.md-hero .md-btn-text:focus-visible,
.md-footer .md-btn-text:hover,
.md-footer .md-btn-text:focus-visible {
    background-color: var(--blu);
    border-color: var(--blu);
    color: var(--bianco);
}

/* variante compatta per l'header */
.md-btn-sm {
    padding: 9px 20px;
    font-size: 0.9375rem;
}
/* Il pulsante vive nella barra del menu, che a schermo stretto condivide
   la riga con il logo compatto e l'hamburger: non deve mai schiacciarsi
   ne' mandare a capo la propria etichetta. */
.md-btn-header {
    flex: 0 0 auto;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .md-btn-header { padding: 8px 14px; font-size: 0.875rem; }
}

/* =====================================================================
   BLOCCO: header a due livelli
   Riga superiore: logo azienda + autorizzazione IVECO (dicitura e logo).
   Riga inferiore: menu + pulsante contatti.
   Allo scroll la riga superiore collassa e resta una riga sola, dove
   compare il logo azienda in formato compatto. Il pulsante contatti sta
   sulla riga del menu, quindi sopravvive al collasso: e' l'unica azione
   dell'header e deve restare raggiungibile a qualsiasi altezza di scroll.
   E' anche fuori dal collapse, quindi sotto il breakpoint resta visibile
   accanto all'hamburger.
   Fondo bianco, menu nero, hover e voce attiva blu: come nell'originale.
   ===================================================================== */
.md-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--bianco);
    border-bottom: 1px solid var(--metallo-bordo);
}

/* Chiusura della riga superiore.
   NON si usa max-height: l'altezza reale della riga e' circa 84px, quindi
   una transizione da 160px a 0 resta ferma per meta' corsa e poi scatta;
   ed e' quella, insieme alla dissolvenza sovrapposta, a produrre lo
   sfarfallio. Con grid-template-rows da 1fr a 0fr il browser anima
   l'altezza VERA del contenuto, in modo continuo e senza salti.
   Nessuna transizione di opacita': il contenuto non deve sbiadire mentre
   si chiude, deve solo scorrere via. */
.md-header-top {
    display: grid;
    grid-template-rows: 1fr;
    border-bottom: 1px solid var(--bordo);
    transition: grid-template-rows 320ms cubic-bezier(.4, 0, .2, 1),
                border-bottom-color 320ms linear;
}
.md-header-top-inner {
    overflow: hidden;
    min-height: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    transition: padding 320ms cubic-bezier(.4, 0, .2, 1);
}

.md-header.is-compact .md-header-top {
    grid-template-rows: 0fr;
    border-bottom-color: transparent;
}
.md-header.is-compact .md-header-top-inner {
    padding-top: 0;
    padding-bottom: 0;
}

/* La barra del menu respira di piu' quando resta da sola: il padding
   compatto recupera parte dell'altezza persa dalla riga superiore. */
.md-header-nav {
    padding-top: 8px;
    padding-bottom: 8px;
    transition: padding 320ms cubic-bezier(.4, 0, .2, 1);
}
.md-header.is-compact .md-header-nav {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Logo azienda: PNG nero su fondo trasparente, quindi sul bianco va usato
   COSI' COM'E', senza filtri. Il file e' molto largo (1703x146): a altezza
   fissa occuperebbe oltre 500px e su schermo stretto spingerebbe fuori il
   pulsante contatti, per questo e' dimensionato in larghezza con
   max-height come tetto e il contenitore flex puo' restringersi. */
.md-brand,
.md-brand-compact {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
}
.md-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 44px;
}

/* copia compatta del logo, visibile solo a header collassato */
/* Stessa durata e stessa curva della riga che si chiude: cosi' il logo
   entra mentre l'altra riga esce, in un movimento solo. Il distanziamento
   e' padding e non margin, perche' il margin restava fuori dal clip di
   max-width e produceva un secondo scatto. */
.md-brand-compact {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    padding-right: 0;
    transition: max-width 320ms cubic-bezier(.4, 0, .2, 1),
                padding-right 320ms cubic-bezier(.4, 0, .2, 1),
                opacity 200ms linear 120ms;
}
.md-header.is-compact .md-brand-compact {
    max-width: 240px;
    opacity: 1;
    padding-right: 2rem;
}
.md-brand-compact .md-logo { max-height: 30px; }

/* Autorizzazione IVECO, sulla riga superiore accanto al logo azienda.
   Niente placca: il logo sta direttamente sul bianco della barra. Il PNG
   ha fondo #FFFFFF pieno e nessun canale alfa (verificato sui pixel), che
   sul bianco dell'header e' quindi gia' invisibile; il mix-blend-mode
   resta come garanzia se un domani la barra passasse a una superficie
   chiara non perfettamente bianca, e non altera i colori del marchio
   (nero e blu) perche' il multiply su bianco e' un'operazione neutra.
   La dicitura precede il marchio e va a capo su due righe: e' la
   qualifica, il logo resta l'elemento in evidenza. */
.md-iveco {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 0 0 auto;
}
.md-iveco-claim {
    max-width: 10rem;
    padding-right: 0.85rem;
    border-right: 1px solid var(--metallo-bordo);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: right;
    color: var(--testo);
}
.md-logo-iveco {
    display: block;
    height: 36px;
    width: auto;
    mix-blend-mode: multiply;
}

.md-header .navbar-nav .nav-link {
    font-family: var(--font-roboto);
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nero);
    white-space: nowrap;
    padding: 0.65rem 0;
    border-bottom: 2px solid transparent;
    transition: color 250ms ease, border-color 250ms ease;
}
@media (min-width: 992px) {
    .md-header .navbar-nav .nav-link {
        padding: 0.5rem 0;
        margin-right: 2rem;
    }
}
.md-header .navbar-nav .nav-link:hover,
.md-header .navbar-nav .nav-link:focus-visible,
.md-header .navbar-nav .nav-link.active {
    color: var(--blu);
    border-bottom-color: var(--blu);
}

.md-header .navbar-toggler {
    border-color: var(--metallo-bordo);
    color: var(--nero);
    padding: 0.35rem 0.6rem;
}
.md-header .navbar-toggler:focus { box-shadow: none; }

/* Sotto il breakpoint i due comandi prendono i due capi della barra:
   l'hamburger la apre a sinistra, il pulsante contatti la chiude a
   destra. Restano alla stessa distanza dai bordi perche' quella distanza
   e' il padding del .container, uguale sui due lati.
   Il gruppo cresce per occupare la riga: con ms-auto da solo i due
   comandi restavano appaiati a destra e mezza barra vuota a sinistra.
   Sopra il breakpoint la crescita non serve, il gruppo torna a essere il
   solo pulsante spinto a destra da ms-auto (l'hamburger e' d-lg-none). */
@media (max-width: 991.98px) {
    .md-header-azioni {
        flex: 1 1 auto;
        justify-content: space-between;
    }
}

/* --- menu a pannello laterale (sotto il breakpoint) ---
   Le misure del pannello passano dalle variabili del componente invece
   che da proprieta' riscritte: cosi' restano quelle che Bootstrap
   azzera da solo con .navbar-expand-lg .offcanvas quando il menu torna
   barra orizzontale, e non serve schermare nulla da lg in su.
   La larghezza ha due limiti: 320px sugli schermi che lo reggono, 86vw
   su quelli stretti, dove un pannello a larghezza fissa coprirebbe
   quasi tutto e non si capirebbe piu' che sotto c'e' la pagina. */
.md-offcanvas {
    --bs-offcanvas-width: min(320px, 86vw);
    --bs-offcanvas-bg: var(--bianco);
    --bs-offcanvas-border-color: var(--metallo-bordo);
    --bs-offcanvas-padding-x: 1.25rem;
    --bs-offcanvas-padding-y: 0.5rem;
}

/* Tutto il resto vale solo quando il pannello e' davvero un pannello.
   Da lg in su queste regole non devono nemmeno esistere: l'elemento li'
   e' la barra del menu. */
@media (max-width: 991.98px) {

    /* la testata ripete la lamiera della barra dell'header, cosi' il
       pannello si legge come la sua continuazione e non come un
       riquadro estraneo */
    /* Il gap non e' decorativo: senza, il logo ridotto arriva a
       filo del pulsante di chiusura. Nel pannello da 320px restano
       280px utili e logo piu' pulsante ne occupano 279. */
    .md-offcanvas-testata {
        gap: 1rem;
        padding: 0.85rem 1.25rem;
        background-image: var(--acciaio-chiaro);
        border-bottom: 1px solid var(--metallo-bordo);
        box-shadow: var(--bisello);
    }

    /* min-width: 0 non e' pleonastico. Il logo e' un elemento rimpiazzato
       largo 1703px: come oggetto flex parte con min-width auto, cioe' non
       scende sotto la propria larghezza intrinseca, e invece di
       restringersi spingeva il tasto di chiusura fuori dal pannello.
       Azzerato il minimo, si riduce fino allo spazio che resta. */
    .md-offcanvas-logo {
        display: block;
        width: auto;
        height: auto;
        min-width: 0;
        max-width: 100%;
        max-height: 26px;
    }

    /* Chiusura in alto a destra. Non e' il .btn-close di Bootstrap:
       quello e' una crocetta di 16px senza contorno, che su un pannello
       a tutta altezza si perde. Qui e' un tasto quadrato di 44px, cioe'
       un bersaglio da dito, con un bordo che lo dichiara toccabile. */
    .md-offcanvas-chiudi {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 1.125rem;
        line-height: 1;
        color: var(--nero);
        background-color: var(--bianco);
        background-image: var(--acciaio-card);
        border: 1px solid var(--metallo-bordo);
        border-radius: 3px;
        box-shadow: var(--bisello);
        transition: color 250ms ease,
                    background-color 250ms ease,
                    border-color 250ms ease;
    }

    .md-offcanvas-chiudi:hover,
    .md-offcanvas-chiudi:focus-visible {
        color: var(--bianco);
        background-color: var(--blu);
        background-image: none;
        border-color: var(--blu);
    }

    /* Voci in colonna: il segno della voce attiva passa da sotto a
       sinistra. Un filetto orizzontale sotto una voce impilata non si
       legge come sottolineatura ma come riga di separazione, e in un
       elenco verticale il separatore c'e' gia' fra una voce e l'altra. */
    .md-offcanvas .navbar-nav .nav-link {
        padding: 0.95rem 0 0.95rem 1rem;
        font-size: 1rem;
        border-bottom-width: 0;
        border-left: 3px solid transparent;
        transition: color 250ms ease,
                    background-color 250ms ease,
                    border-color 250ms ease;
    }

    .md-offcanvas .nav-item+.nav-item {
        border-top: 1px solid var(--bordo);
    }

    .md-offcanvas .navbar-nav .nav-link:hover,
    .md-offcanvas .navbar-nav .nav-link:focus-visible,
    .md-offcanvas .navbar-nav .nav-link.active {
        color: var(--blu);
        background-color: var(--metallo-1);
        border-left-color: var(--blu);
    }
}

@media (max-width: 767.98px) {
    .md-logo-iveco { height: 28px; }
    .md-iveco { gap: 0.6rem; }
    .md-iveco-claim {
        max-width: 7.5rem;
        padding-right: 0.6rem;
        font-size: 0.625rem;
        letter-spacing: 0.06em;
    }
    .md-logo { max-height: 30px; }
    .md-header-top-inner { padding-top: 14px; padding-bottom: 14px; }
    .md-header.is-compact .md-header-nav { padding-top: 12px; padding-bottom: 12px; }
    .md-header.is-compact .md-brand-compact { max-width: 120px; padding-right: 0.75rem; }
}

/* =====================================================================
   BLOCCO: hero
   Immagine statica con parallax. E' l'unica apertura scura della pagina,
   come nell'originale, dove la home apriva con un video.
   ===================================================================== */
.md-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 78vh;
    overflow: hidden;              /* il livello di sfondo eccede la sezione */
    background-color: var(--nero);
    border-bottom: 3px solid var(--blu);
}

/* Livello di sfondo: sborda del 20% sopra e sotto, cosi' la traslazione
   del parallax non scopre mai i bordi della sezione. Il fattore di
   scorrimento nello script (0.18) e' tarato su questo margine: alzando
   l'uno va alzato anche l'altro.
   Il percorso url() e' relativo a QUESTO foglio di stile, quindi
   "../img/...". Non usare una custom property inline nell'HTML: la url()
   dentro una custom property viene risolta rispetto al CSS e non al
   documento. */
.md-hero-media {
    position: absolute;
    top: -20%;
    right: 0;
    bottom: -20%;
    left: 0;
    z-index: 1;
    background-color: var(--nero);
    background-image: url("../img/minerbe/hero.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    will-change: transform;
}

/* Velo scuro: forte a sinistra, dove sta il testo, aperto sulla destra
   perche' la fotografia va comunque letta. */
.md-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.72) 38%, rgba(0, 0, 0, 0.12) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.10) 100%);
}

.md-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding-top: 96px;
    padding-bottom: 96px;
}

/* =====================================================================
   BLOCCO: soccorso stradale
   Primo blocco sotto l'hero: e' il servizio piu' distintivo e l'unico
   che riceve un blocco dedicato a piena larghezza.
   ===================================================================== */
.md-soccorso-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    border-radius: 3px;
}

/* Pannello dei dati del soccorso: e' il punto in cui vivono i tre
   segnaposto.
   La sezione soccorso e' diventata md-section-alt, quindi il pannello si
   trova metallo su metallo: due lamiere entrambe in rilievo, illuminate
   dalla stessa parte, si annullano e il pannello sparisce nel fondo.
   Qui viene quindi INCASSATO invece che sollevato: rampa piu' scura della
   sezione, ombra portata dall'alto e filo di luce in basso. Si legge come
   una targa ricavata nella lamiera, non come un rettangolo appoggiato.
   Se un domani la sezione tornasse chiara, bastano --acciaio-chiaro e
   --bisello per rimetterlo in rilievo. */
.md-fact-panel {
    background-image: var(--acciaio-incassato);
    border: 1px solid var(--metallo-4);
    border-top-color: var(--metallo-bordo-scuro);
    border-left: 4px solid var(--blu);
    border-radius: 3px;
    box-shadow: var(--bisello-incassato);
    padding: 0.25rem 1.75rem;
}
/* i filetti fra un dato e l'altro seguono l'incasso: ombra sopra, luce
   sotto, cosi' anche le divisioni interne sembrano incise */
.md-fact-panel .md-fact {
    border-top-color: var(--metallo-4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.md-fact-panel .md-fact:first-child { box-shadow: none; }
.md-fact {
    padding: 1.1rem 0;
    border-top: 1px solid var(--metallo-2);
}
.md-fact:first-child { border-top: 0; }

.md-fact-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--testo);
    margin-bottom: 0.3rem;
}
.md-fact-value {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nero);
}

/* =====================================================================
   BLOCCO: servizi
   Griglia a quattro voci, spaziature ampie (g-5 in HTML).
   La classe .md-service-card e' la stessa di mock_1: qui cambia la resa,
   il nome resta per rendere prevedibile la conversione in CakePHP.
   ===================================================================== */
/* Lamiera anche sulle card: stessa famiglia metallica virata al blu del
   resto della pagina, con la rampa dedicata --acciaio-card. Il bisello
   chiude la superficie sopra e sotto; la costa superiore resta in acciaio
   e diventa blu al passaggio del mouse, dove la lamiera si schiarisce. */
.md-service-card {
    position: relative;
    isolation: isolate;          /* tiene il velo dell'hover dentro la card */
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2.25rem;
    background-color: var(--metallo-1);
    background-image: var(--acciaio-card);
    border: 1px solid var(--metallo-bordo);
    border-radius: 3px;
    border-top: 3px solid var(--metallo-3);
    box-shadow: var(--bisello);
    transition: border-color 250ms ease;
}

/* Hover: la lamiera si schiarisce.
   Il passaggio non si puo' fare con una transizione su background-image,
   perche' i gradienti non si interpolano e il cambio scatterebbe. Si
   sovrappone quindi la rampa chiara come strato separato e si anima la
   sua opacita'. z-index -1 dentro il contesto creato da isolation: lo
   strato sta sopra il fondo della card e sotto il testo, senza dover
   toccare i figli. */
.md-service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--acciaio-card-hover);
    opacity: 0;
    transition: opacity 250ms ease;
    pointer-events: none;
}
.md-service-card:hover::before { opacity: 1; }
.md-service-card:hover {
    border-color: var(--metallo-3);
    border-top-color: var(--blu);
}
.md-service-card .md-service-list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}
.md-service-card .md-service-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.65rem;
    font-size: 1.125rem;      /* 18px */
    line-height: 1.45;
}
.md-service-card .md-service-list li::before {
    content: "";
    position: absolute;
    left: 0;
    /* mezza riga meno mezzo quadrato: tiene il segno centrato sulla prima
       riga di testo qualunque sia il corpo */
    top: calc(0.725em - 4px);
    width: 8px;
    height: 8px;
    border-radius: 1px;
    background-color: var(--blu);
}

/* =====================================================================
   BLOCCO: certificazioni
   Slider a scheda centrale: la scheda in evidenza al centro, le due
   laterali rimpicciolite e appannate. Immagine sopra, testo sotto.
   ===================================================================== */
/* Slider: scheda centrale in evidenza, le due laterali rimpicciolite e
   appannate. Immagine sopra, testo sotto.
   Il posizionamento e' calcolato in pixel dallo script (centro del
   contenitore meno centro della scheda attiva), non in percentuale: cosi'
   funziona a qualsiasi larghezza di scheda senza doverla ricalcolare a
   mano a ogni breakpoint. */
.md-cert-slider {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 0 0;
}

.md-cert-track {
    display: flex;
    align-items: stretch;
    will-change: transform;
    transition: transform 600ms cubic-bezier(.4, 0, .2, 1);
}

.md-cert-slide {
    flex: 0 0 42%;
    padding: 0 1rem;
    /* stato laterale: piu' piccola, sbiadita e appannata */
    transform: scale(0.84);
    opacity: 0.45;
    filter: blur(3px) saturate(0.55);
    transition: transform 600ms cubic-bezier(.4, 0, .2, 1),
                opacity 600ms ease,
                filter 600ms ease;
}
.md-cert-slide.is-active {
    transform: scale(1);
    opacity: 1;
    filter: none;
    z-index: 2;
}

.md-cert-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--bianco);
    border: 1px solid var(--metallo-bordo);
    border-radius: 3px;
    box-shadow: var(--bisello);
    overflow: hidden;
}

/* immagine sopra: pannello in lamiera con il marchio al centro */
.md-cert-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    padding: 1.5rem;
    background-image: var(--acciaio-card);
    border-bottom: 3px solid var(--metallo-3);
    transition: border-color 400ms ease;
}
.md-cert-slide.is-active .md-cert-media { border-bottom-color: var(--blu); }

/* tetto in larghezza al marchio: senza, Knorr-Bremse (6.22:1) sfonderebbe
   la scheda e BPW (1:1) resterebbe minuscolo al confronto */
.md-cert-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 340px;
    height: 96px;
}
.md-cert-logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    /* IVECO, ZF e BPW hanno il fondo bianco opaco nel PNG: il multiply lo
       fa sparire sulla lamiera. Knorr-Bremse e' gia' trasparente. */
    mix-blend-mode: multiply;
}

/* testo sotto */
.md-cert-corpo {
    flex: 1 1 auto;
    padding: 1.75rem 1.75rem 2rem;
}

/* --- comandi ---------------------------------------------------------- */
.md-cert-comandi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.md-cert-freccia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    font-size: 1.25rem;
    color: var(--blu);
    background-color: transparent;
    border: 2px solid var(--blu);
    border-radius: 3px;
    transition: background-color 250ms ease, color 250ms ease;
}
.md-cert-freccia:hover,
.md-cert-freccia:focus-visible {
    background-color: var(--blu);
    color: var(--bianco);
}

.md-cert-punti {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.md-cert-punti button {
    width: 34px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background-color: var(--metallo-3);
    transition: background-color 250ms ease, width 250ms ease;
}
.md-cert-punti button.is-active {
    width: 52px;
    background-color: var(--blu);
}

@media (max-width: 991.98px) {
    .md-cert-slide { flex-basis: 58%; }
    .md-cert-media { height: 160px; }
    .md-cert-slot { height: 80px; max-width: 280px; }
}

@media (max-width: 767.98px) {
    .md-cert-slide {
        flex-basis: 80%;
        padding: 0 0.5rem;
        /* a schermo stretto le laterali si vedono appena: meno sfocatura,
           altrimenti il bordo dello schermo sembra sporco */
        transform: scale(0.9);
        filter: blur(2px) saturate(0.6);
    }
    .md-cert-media { height: 140px; padding: 1.25rem; }
    .md-cert-slot { height: 68px; max-width: 220px; }
    .md-cert-corpo { padding: 1.25rem 1.25rem 1.5rem; }
    .md-cert-comandi { gap: 1rem; margin-top: 2rem; }
    .md-cert-freccia { width: 42px; height: 42px; }
}

/* =====================================================================
   BLOCCO: officina multimarca
   Tessere immagine + etichetta.
   ===================================================================== */
.md-tile {
    display: block;
    margin: 0;
}
.md-img-zoom {
    display: block;
    overflow: hidden;
    border: 1px solid var(--metallo-bordo);
    border-radius: 3px;
}
.md-img-zoom img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 500ms ease;
}
.md-tile:hover .md-img-zoom img { transform: scale(1.08); }
.md-tile .md-tile-title { padding-top: 0.9rem; }

/* =====================================================================
   BLOCCO: azienda
   Storia + fascia di numeri in acciaio scuro. E' il contrappunto
   metallico della pagina: unica banda scura fra due sezioni chiare.
   ===================================================================== */
.md-numeri {
    background-color: var(--antracite);
    background-image: var(--acciaio-scuro);
    border-top: 1px solid var(--metallo-bordo-scuro);
    border-bottom: 1px solid var(--metallo-bordo-scuro);
    box-shadow: var(--bisello-scuro);
    padding: 3.5rem 0;
}
.md-numero-valore {
    display: block;
    font-size: clamp(2.25rem, 3.4vw, 3.125rem);
    font-weight: 300;
    line-height: 1;
    color: var(--bianco);
}
.md-numero-label {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.875rem;
    line-height: 1.45;
    /* #C3C9D0 sul fondo della banda supera 9:1 */
    color: var(--metallo-3);
}

/* =====================================================================
   BLOCCO: dove siamo e contatti
   ===================================================================== */
.md-map {
    display: block;
    width: 100%;
    height: 380px;
    border: 1px solid var(--metallo-bordo);
    border-radius: 3px;
}

.md-orari {
    border-left: 4px solid var(--blu);
    padding-left: 1.25rem;
}

/* Schema degli orari: giorno a sinistra, fasce a destra.
   La griglia sta sul <dl>, con <dt> e <dd> come celle: la colonna dei
   giorni si dimensiona sul contenuto e quella delle ore prende il resto,
   quindi le ore restano incolonnate anche se i giorni hanno lunghezze
   diverse. Le cifre tabulari servono allo stesso scopo dentro la colonna:
   senza, l'1 e' piu' stretto delle altre cifre e le ore si disallineano. */
.md-orari-elenco {
    display: grid;
    grid-template-columns: auto 1fr;
    margin: 0;
}
.md-orari-elenco dt,
.md-orari-elenco dd {
    margin: 0;
    padding: 0.65rem 0;
    border-top: 1px solid var(--metallo-2);
}
/* la prima riga parte a filo del titolo, senza filetto sopra */
.md-orari-elenco dt:first-of-type,
.md-orari-elenco dt:first-of-type + dd {
    border-top: 0;
    padding-top: 0;
}
.md-orari-elenco dt {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--testo);
    white-space: nowrap;
    /* la distanza fra le colonne e' padding della cella e non column-gap
       del contenitore: con il gap i filetti si interromperebbero nello
       spazio vuoto invece di formare una riga continua */
    padding-right: 1.75rem;
}
.md-orari-elenco dd {
    font-weight: 600;
    color: var(--nero);
    font-variant-numeric: tabular-nums;
}
.md-orari-ora { display: block; }
.md-orari-ora + .md-orari-ora { margin-top: 0.2rem; }

@media (max-width: 575.98px) {
    /* a colonna stretta le due colonne si impilano: il giorno fa da
       intestazione della propria fascia oraria */
    .md-orari-elenco { grid-template-columns: 1fr; }
    .md-orari-elenco dt { padding-right: 0; padding-bottom: 0.15rem; }
    /* impilate, dt e dd stanno su righe diverse: il filetto va tolto al dd,
       altrimenti separerebbe il giorno dalle sue stesse ore invece di
       separare un gruppo dall'altro */
    .md-orari-elenco dd { padding-top: 0; border-top: 0; }
}

/* modulo: i default chiari di Bootstrap vanno bene, si allineano solo
   bordi e colori a quelli dell'originale (#EBEBEB sui campi) */
.md-form .form-label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nero);
    margin-bottom: 0.4rem;
}
.md-form .form-control {
    background-color: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: 3px;
    color: var(--testo);
    padding: 0.75rem 1rem;
}
.md-form .form-control::placeholder { color: var(--metallo-4); }
.md-form .form-control:focus {
    border-color: var(--blu);
    box-shadow: 0 0 0 3px rgba(21, 84, 255, 0.15);
}
.md-form .form-check-input { border-color: var(--metallo-4); }
.md-form .form-check-input:checked {
    background-color: var(--blu);
    border-color: var(--blu);
}
.md-form .form-check-input:focus {
    border-color: var(--blu);
    box-shadow: 0 0 0 3px rgba(21, 84, 255, 0.15);
}
.md-form .form-check-label { font-size: 0.9375rem; }
.md-form .md-form-note { font-size: 0.8125rem; color: var(--metallo-4); }

/* =====================================================================
   BLOCCO: footer
   Nero, come nell'originale (#Footer{background-color:#000000}).
   Due livelli separati da una linea sottile.
   ===================================================================== */
.md-footer {
    background-color: var(--nero);
    color: var(--metallo-3);
    /* costa in acciaio a separare la pagina chiara dal footer nero */
    border-top: 4px solid var(--metallo-3);
}
.md-footer-logo {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    filter: brightness(0) invert(1);   /* logo nero portato a bianco */
}
.md-footer-heading {
    font-family: var(--font-roboto);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bianco);
    margin-bottom: 1rem;
}
.md-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.md-footer-links li { margin-bottom: 0.55rem; }
.md-footer-links a {
    font-size: 0.9375rem;
    color: var(--metallo-3);
    text-decoration: none;
    transition: color 250ms ease;
}
.md-footer-links a:hover,
.md-footer-links a:focus-visible { color: var(--bianco); }

.md-footer-legale {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--metallo-4);
}

/* riga inferiore, separata da una linea sottile */
.md-footer-bottom {
    border-top: 1px solid rgba(195, 201, 208, 0.28);
    font-size: 0.8125rem;
    color: var(--metallo-4);
}
.md-footer-bottom a {
    color: var(--metallo-4);
    text-decoration: none;
    transition: color 250ms ease;
}
.md-footer-bottom a:hover,
.md-footer-bottom a:focus-visible { color: var(--bianco); }

/* =====================================================================
   BLOCCO: modal contatti
   Impianto chiaro come il resto della pagina, intestazione in acciaio.
   ===================================================================== */
#modalContatti .modal-content {
    background-color: var(--bianco);
    border: 1px solid var(--metallo-bordo);
    border-radius: 3px;
    color: var(--testo);
}
#modalContatti .modal-header {
    background-image: var(--acciaio-chiaro);
    border-bottom: 1px solid var(--metallo-bordo);
}
#modalContatti .modal-footer { border-color: var(--bordo); }
#modalContatti .modal-title,
#modalContatti strong { color: var(--nero); }
#modalContatti i { color: var(--blu); font-size: 1.15rem; }
#modalContatti a:not(.md-btn-solid):not(.md-btn-text) {
    color: var(--blu);
    text-decoration: none;
}
#modalContatti a:not(.md-btn-solid):not(.md-btn-text):hover {
    color: var(--blu);
    text-decoration: underline;
}

/* =====================================================================
   Animazioni di entrata (IntersectionObserver)
   Stesse classi di mock_1. Delay progressivo applicato via JS.
   ===================================================================== */
.anim-fade-up,
.anim-fade-in,
.anim-zoom-in {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}
.anim-fade-up { transform: translateY(28px); }
.anim-zoom-in { transform: scale(0.96); }

.anim-fade-up.is-visible,
.anim-fade-in.is-visible,
.anim-zoom-in.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .anim-fade-up,
    .anim-fade-in,
    .anim-zoom-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .md-header-top,
    .md-header-top-inner,
    .md-header-nav,
    .md-brand-compact,
    .md-img-zoom img,
    .md-service-card,
    .md-service-card::before,
    .md-cert-track,
    .md-cert-slide,
    .md-cert-media {
        transition: none !important;
    }
    /* lo script non applica la traslazione, qui si azzera comunque
       qualsiasi trasformazione gia' impostata */
    .md-hero-media { transform: none !important; }
    html { scroll-behavior: auto !important; }
}

/* =====================================================================
   AGGIUNTE PER IL SITO (non nel mockup)
   ===================================================================== */

/* corpo e contenitore principale */
.md-main { min-height: 50vh; }
.md-main > .container { padding-top: 2.5rem; padding-bottom: 3rem; }
.md-flash { padding-top: 1.25rem; }

/* Testata delle pagine interne: stessa lettura dell'hero (foto, velo
   scuro a sinistra, filetto blu sotto), ma bassa e senza parallax. */
.md-page-header {
    position: relative;
    padding: 88px 0 72px;
    background-color: var(--nero);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-bottom: 3px solid var(--blu);
}
.md-page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.66) 45%, rgba(0, 0, 0, 0.20) 100%);
}
.md-page-header .container { position: relative; }
.md-page-header h1 {
    color: var(--bianco);
    font-weight: 300;
    font-size: clamp(2rem, 4.5vw, 3.125rem);
    line-height: 1.15;
    margin-bottom: 0.75rem;
}
.md-page-header p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.125rem;
    max-width: 60ch;
    margin-bottom: 0;
}
@media (max-width: 767.98px) {
    .md-page-header { padding: 56px 0 48px; }
}

/* testo lungo delle pagine interne */
.md-prose p { max-width: 70ch; }
.md-prose .lead { font-size: 1.1875rem; font-weight: 400; color: var(--nero); }

/* elenco con lo stesso segno delle card servizio, fuori dalle card */
.md-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.md-list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.55rem;
}
.md-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 8px;
    background-color: var(--blu);
}

/* pannello laterale "in breve" */
.md-panel {
    padding: 2rem;
    background-color: var(--bianco);
    background-image: var(--acciaio-card);
    border: 1px solid var(--metallo-bordo);
    border-radius: 3px;
    box-shadow: var(--bisello);
}

/* foto a piena colonna nelle pagine interne */
.md-foto {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
    object-fit: cover;
}

/* galleria della pagina officina: riquadri 4:3 con zoom al passaggio */
.md-galleria .md-img-zoom { aspect-ratio: 4 / 3; }
.md-galleria .md-img-zoom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.md-galleria a { display: block; }

/* l'header e' sticky: le ancore non devono finire sotto la barra */
[id] { scroll-margin-top: 110px; }

/* il modal di Bootstrap deve stare sopra l'header sticky (z-index 1030) */
.modal { z-index: 1060; }

/* messaggi flash di CakePHP (classi del plugin Bootstrap e quelle base) */
.message {
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
    border-radius: 3px;
    border: 1px solid var(--metallo-bordo);
    background-color: var(--metallo-1);
    color: var(--nero);
}
.message.success { border-color: #9FD3AE; background-color: #EAF7EE; color: #145A2A; }
.message.error   { border-color: #F0A8A8; background-color: #FDECEC; color: #8A1C1C; }
.message.warning { border-color: #F2D18B; background-color: #FFF6E0; color: #6B4A00; }

/* area clienti */
.md-adminbar {
    background-color: var(--metallo-1);
    border-bottom: 1px solid var(--metallo-bordo);
}