/* =========================================================================
   SG TRASPORTI — foglio di stile
   Blu e lime vengono dal marchio del cliente (campionati dal logo:
   #2794CE e #80FF00). Il navy e' il blu del marchio portato in profondita':
   serve da superficie scura senza introdurre un colore estraneo.
   Impianto: netto, denso, professionale. Niente effetti da app consumer.
   ========================================================================= */

:root { color-scheme: light only; }
@media (prefers-color-scheme: dark) {
    html, body { background: #ffffff; color: #10202e; }
}

:root {
    /* --- marchio ------------------------------------------------------ */
    --blu:            #2794CE;   /* blu del logo: accenti, icone, bordi */
    --blu-fondo:      #1A75A6;   /* fondo dei bottoni: bianco sopra fa 5.07 */
    --blu-scuro:      #17698F;   /* stato hover */
    --blu-cupo:       #14608B;   /* pressione, testo blu su chiaro (6.83) */
    --blu-pallido:    #EAF4FA;   /* fondi tenui, chip */
    --blu-bordo:      #B6D9EC;

    /* alias: il marchio resta lime, ma nel sito il verde e' quello sopra */
    --lime:           var(--verde-marchio);
    --lime-scuro:     var(--verde-scuro);

    /* Il verde del marchio, portato a una tonalita' seria: il lime originale
       (#80FF00) su superfici grandi risultava fluo. Questo e' lo stesso verde
       con meno luce, ed e' anche il verde del logo ricolorato: sito e marchio
       dicono lo stesso colore. */
    --verde:          #438500;   /* azione: bianco sopra fa 4,57 */
    --verde-scuro:    #3A7300;   /* stato hover */
    --verde-marchio:  #4E9B00;   /* il verde del logo ricolorato, per gli accenti */
    --verde-fondo:    #F1F8E6;   /* fondi tenui, chip */
    --verde-testo:    #3D7A00;   /* verde per il TESTO su bianco (5,27) */

    /* Le superfici scure sono il blu del marchio portato in profondita',
       non un navy generico: stessa tonalita' (203°) e stessa saturazione del
       #2794CE del logo, solo con meno luce. Il navy quasi-nero di prima si
       leggeva come nero e non aveva parentela col marchio. */
    --navy:           #10405E;   /* superficie scura principale */
    --navy-fondo:     #0C3149;   /* piu' profondo: footer, striscia dei numeri */
    --navy-riga:      #235A7D;   /* bordi dentro le superfici scure */

    /* --- neutri ------------------------------------------------------- */
    --bianco:  #ffffff;
    --g-25:    #FCFDFE;
    --g-50:    #F7F9FB;
    --g-100:   #EFF3F6;
    --g-200:   #E1E7EC;
    --g-300:   #CBD4DC;
    --g-400:   #9AA8B4;
    --g-500:   #627380;   /* scurito: su bianco fa 4.90, prima 4.31 */
    --g-600:   #4E5F6D;
    --g-700:   #3A4A57;
    --g-800:   #253544;
    --g-900:   #10202E;

    /* --- testo -------------------------------------------------------- */
    --t-forte:   var(--g-900);
    --t-normale: var(--g-600);
    --t-tenue:   var(--g-500);
    --t-chiaro:  #ffffff;

    /* --- stati -------------------------------------------------------- */
    --ok:      #157F4B;
    --allerta: #B45309;
    --errore:  #C62828;

    /* --- tipografia --------------------------------------------------- */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* --- spazi -------------------------------------------------------- */
    --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
    --s5: 1.25rem; --s6: 1.5rem;  --s8: 2rem;    --s10: 2.5rem;
    --s12: 3rem;   --s16: 4rem;   --s20: 5rem;   --s24: 6rem;

    /* --- raggi: netti, non bolle -------------------------------------- */
    --r-sm: 4px;  --r: 6px;  --r-lg: 10px;  --r-xl: 14px;  --r-tondo: 999px;

    /* --- ombre: sobrie ------------------------------------------------ */
    --o-xs: 0 1px 2px rgba(16,64,94,.05);
    --o-sm: 0 1px 3px rgba(16,64,94,.07), 0 1px 2px rgba(16,64,94,.04);
    --o:    0 4px 10px -2px rgba(16,64,94,.08), 0 2px 4px -2px rgba(16,64,94,.04);
    --o-md: 0 10px 22px -6px rgba(16,64,94,.12), 0 4px 8px -4px rgba(16,64,94,.05);
    --o-lg: 0 24px 48px -12px rgba(16,64,94,.18);
    --o-blu: 0 4px 14px rgba(39,148,206,.28);

    /* --- movimento ---------------------------------------------------- */
    --t-veloce: .15s ease;
    --t-medio:  .22s ease;

    /* --- impaginazione ------------------------------------------------ */
    --larghezza: 1200px;
    --larghezza-stretta: 780px;
    --bordo-pag: 1.25rem;
    --h-topbar: 36px;
    --h-nav: 96px;   /* cresciuta col logo, due volte: 25-08 e 29-08 */
}

/* ======================================================= reset e base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--h-topbar) + var(--h-nav) + 12px);
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    font-family: var(--font);
    color: var(--t-forte);
    background: var(--bianco);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blu-cupo); text-decoration: none; transition: color var(--t-veloce); }
a:hover { color: var(--blu-scuro); }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
    outline: 3px solid var(--blu);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* solo per chi naviga da tastiera / lettore di schermo */
.salta-al-contenuto {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--navy); color: #fff; padding: var(--s3) var(--s5);
    border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.salta-al-contenuto:focus { left: 0; color: #fff; }

.solo-lettori {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================ titoli ==== */
h1, h2, h3, h4, h5, h6 {
    color: var(--t-forte);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.022em;
    text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); font-weight: 700; letter-spacing: -.015em; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
p  { color: var(--t-normale); }
strong, b { font-weight: 700; color: var(--t-forte); }

/* ========================================================= impianto ===== */
.contenitore { width: 100%; max-width: var(--larghezza); margin-inline: auto; padding-inline: var(--bordo-pag); }
.contenitore-stretto { width: 100%; max-width: var(--larghezza-stretta); margin-inline: auto; padding-inline: var(--bordo-pag); }

.sezione { padding-block: clamp(3.25rem, 2rem + 5vw, 5.5rem); }
.sezione-compatta { padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }
.sezione-tenue { background: var(--g-50); }
.sezione-riga { border-top: 1px solid var(--g-200); }
.sezione-scura { background: var(--navy); color: #D9E4EC; }
.sezione-scura h1, .sezione-scura h2, .sezione-scura h3, .sezione-scura h4 { color: #fff; }
.sezione-scura p { color: #AEC2D2; }
.sezione-scura a:not(.btn) { color: #9BD8F5; }

/* Il grassetto eredita il colore del testo forte, che e' quasi nero: su una
   superficie scura sparisce. Trovato il 24-08-2026 nella sezione della navetta,
   dove le voci in grassetto erano invisibili. Vale per TUTTI i fondi scuri. */
.sezione-scura strong, .sezione-scura b,
.hero strong, .hero b,
.testata-pagina strong, .testata-pagina b,
.richiamo strong, .richiamo b,
.pie strong, .pie b,
.numeri strong, .numeri b { color: #fff; }

/* intestazione di sezione */
.occhiello {
    display: inline-flex; align-items: center; gap: var(--s2);
    font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--blu-cupo);
    margin-bottom: var(--s3);
}
.occhiello::before {
    content: ''; width: 22px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--blu) 0 55%, var(--lime) 55% 100%);
}
.sezione-scura .occhiello, .hero .occhiello { color: #8FD44A; }   /* 6,09 sul blu profondo */
.sezione-scura .occhiello::before, .hero .occhiello::before { background: #8FD44A; }

.testata-sezione { max-width: 46rem; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem); }
.testata-sezione.centrata { margin-inline: auto; text-align: center; }
.testata-sezione p { font-size: 1.0625rem; margin-top: var(--s4); line-height: 1.7; }

/* griglie */
.griglia { display: grid; gap: var(--s6); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ========================================================== bottoni ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .75rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--r);
    font-weight: 600; font-size: .9375rem; line-height: 1.35;
    white-space: nowrap; text-align: center;
    transition: background-color var(--t-veloce), border-color var(--t-veloce),
                color var(--t-veloce), box-shadow var(--t-veloce), transform var(--t-veloce);
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primario, .btn-lime {
    background: var(--verde); color: #fff;
    box-shadow: 0 2px 8px rgba(16,64,94,.20);
}
.btn-primario:hover, .btn-lime:hover {
    background: var(--verde-scuro); color: #fff; transform: translateY(-1px);
}
.btn-primario:active, .btn-lime:active { transform: none; }

.btn-scuro       { background: var(--navy); color: #fff; }
.btn-scuro:hover { background: var(--g-800); color: #fff; }

.btn-linea       { background: #fff; color: var(--g-800); border-color: var(--g-300); }
.btn-linea:hover { background: var(--g-50); border-color: var(--g-400); color: var(--g-900); }

.btn-linea-chiaro       { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn-linea-chiaro:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.btn-grande { padding: .95rem 1.9rem; font-size: 1rem; }
.btn-pieno  { width: 100%; }

/* ======================================================= intestazione === */
.topbar {
    background: var(--navy);
    color: #C6D6E2;
    font-size: .8125rem;
    height: var(--h-topbar);
    display: flex; align-items: center;
    /* resta appesa in cima insieme al menu: i recapiti devono essere
       raggiungibili in qualunque punto della pagina */
    position: sticky; top: 0; z-index: 101;
}
.topbar .contenitore { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-width: 0; }
.topbar-voci { min-width: 0; }
.topbar-voci > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar-voci { display: flex; align-items: center; gap: var(--s5); }
.topbar a:not(.btn), .topbar-voce { color: #C6D6E2; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.topbar a:not(.btn):hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; opacity: .85; flex: none; }
.topbar-nascondi { display: inline-flex; }

.intestazione {
    position: sticky; top: var(--h-topbar); z-index: 100;
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--g-200);
}
.intestazione.compressa { box-shadow: var(--o-sm); }

.nav { height: var(--h-nav); display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
/* Il logo su una placca navy a tutta altezza, tagliata in diagonale a destra.
   Richiesta di Giovanni (25-08-2026): «allarghiamo di piu' il logo e gli diamo
   uno sfondo diverso cosi' risalta di piu'... oppure facciamo proprio un
   distacco». Questo e' il distacco.

   Perche' proprio cosi', dopo averne guardate otto:
   - il navy e' `--navy-fondo`, lo stesso del pie' di pagina, dove il logo
     chiaro si legge gia' bene. Col `--navy` piu' chiaro il blu del marchio
     restava sordo;
   - la sfumatura verso il bianco (l'altra strada che Giovanni aveva nominato)
     e' stata provata e scartata: la scritta TRASPORTI finiva dentro la
     sfumatura e spariva a meta';
   - il taglio in diagonale non e' un vezzo: e' l'inclinazione dei chevron del
     marchio, e da' alla barra il verso di marcia. */
.nav-logo {
    display: flex; align-items: center;
    /* ⚠️ Era `flex: none` con l'immagine ad altezza fissa, e la placca non
       poteva restringersi: il file e' 1220x220 (rapporto 5,55), quindi a 56px
       d'altezza e' larga 311px INCOMPRIMIBILI. Fra 361 e 429px di viewport non
       ci stava insieme al bottone del menu e LA PAGINA SCORREVA DI LATO.
       Misurato il 01-09-2026 su tutte e sette le pagine: +45px a 375, +30 a
       390, +27 a 393, +8 a 412, +41 a 320 — cioe' su ogni telefono moderno
       tranne quelli da 360, che passavano per un pixel.
       Era anche la causa del menu «tagliato a meta»: `.topbar` e
       `.intestazione` sono sticky, `.barra-telefono` e' fixed, quindi larghe
       quanto il viewport (390) mentre la pagina ne misurava 420: scorrendo a
       destra restava scoperta una striscia di 30px.
       Le misure NON si scrivono a mano: con `flex: 0 1 auto` + `min-width: 0`
       il conto lo fa il flex, e vale anche per i telefoni che non esistono
       ancora. `max-height` + `max-width` insieme scalano l'immagine tenendo
       il rapporto: niente logo schiacciato. */
    flex: 0 1 auto; min-width: 0;
    align-self: stretch;
    background: var(--navy-fondo);
    padding-inline: var(--s5) 2.4rem;
    margin-left: calc(-1 * var(--bordo-pag));
    padding-left: calc(var(--bordo-pag) + var(--s2));
    clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
}
.nav-logo img { height: auto; width: auto; max-height: 74px; max-width: 100%; }  /* era 44, 60, 64: cresce con la placca */

.nav-voci { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
.nav-voci > li > a {
    display: block; padding: .55rem .7rem; white-space: nowrap;
    color: var(--g-700); font-weight: 600; font-size: .9375rem;
    border-radius: var(--r); transition: color var(--t-veloce), background-color var(--t-veloce);
}
.nav-voci > li > a:hover { color: var(--blu-cupo); background: var(--blu-pallido); }
.nav-voci > li > a[aria-current="page"] { color: var(--blu-cupo); background: var(--blu-pallido); }

.nav-azioni { display: flex; align-items: center; gap: var(--s3); flex: none; }
/* bottone del menu su schermo stretto */
.nav-apri {
    display: none;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border: 1px solid var(--g-300); border-radius: var(--r);
    color: var(--g-800); background: #fff;
}
.nav-apri:hover { background: var(--g-50); }
.nav-apri svg { width: 22px; height: 22px; }
.nav-apri .icona-chiudi { display: none; }
.nav-apri[aria-expanded="true"] .icona-chiudi { display: block; }
.nav-apri[aria-expanded="true"] .icona-menu  { display: none; }

/* pannello del menu su schermo stretto */
.menu-mobile {
    position: fixed; inset: 0; top: calc(var(--h-topbar) + var(--h-nav)); z-index: 99;
    background: #fff;
    padding: var(--s5) 0 var(--s10);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: none;
}
.menu-mobile.aperto { display: block; }
.menu-mobile ul { display: flex; flex-direction: column; }
.menu-mobile li + li { border-top: 1px solid var(--g-200); }
.menu-mobile ul a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem .25rem; font-size: 1.0625rem; font-weight: 600; color: var(--g-800);
}
.menu-mobile ul a[aria-current="page"] { color: var(--blu-cupo); }
.menu-mobile ul a svg { width: 18px; height: 18px; color: var(--g-400); }
.menu-mobile-azioni { display: grid; gap: var(--s3); margin-top: var(--s6); }
body.menu-aperto { overflow: hidden; }

/* ============================================================== hero ==== */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background: var(--navy-fondo);          /* si vede finche' la foto non c'e' */
    min-height: clamp(30rem, 24rem + 22vw, 42rem);
    display: flex; align-items: center;
}

/* La foto sta in un <picture>, non in un background CSS: cosi' puo' avere il
   webp, il ritaglio diverso per il telefono e il fetchpriority. */
.hero-sfondo { position: absolute; inset: 0; z-index: -2; display: block; }
.hero-sfondo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 68% 50%;               /* tiene i furgoni dentro l'inquadratura */
}
/* Il velo: forte a sinistra dove sta il testo, via del tutto a destra dove
   stanno i mezzi. Senza, il titolo bianco finisce sul cielo chiaro e sparisce. */
.hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        /* Il velo tiene fino al 52%, dove finisce la colonna del testo, e poi
           molla: i furgoni stanno dal 55% in poi e restano in chiaro.
           I valori NON sono a occhio — misurati con scripts/contrasto-hero.py
           sulla pagina vera col testo nascosto. Con la curva di prima il motto
           faceva 2,27:1 e il paragrafo 2,58:1: sotto soglia tutti e due. */
        linear-gradient(96deg, rgba(8,36,54,.96) 0%, rgba(8,36,54,.94) 34%,
                               rgba(8,36,54,.84) 50%, rgba(8,36,54,.34) 68%,
                               rgba(8,36,54,0) 88%),
        linear-gradient(0deg, rgba(8,36,54,.55) 0%, rgba(8,36,54,0) 26%);
}

.hero-griglia { display: block; }
/* 41,5rem e non 38: misurato il 28-08-2026 sulla pagina vera, «Il tuo
   trasporto su misura» su una riga sola misura 641 px, e la colonna ne teneva
   608. Mancavano 33 px e il titolo andava a TRE righe invece di due (a 1080 px
   di finestra ci stava gia', perche' li' il titolo si rimpicciolisce da solo).
   Allargata la colonna invece di rimpicciolire il titolo: il titolo grande e'
   la cosa che si vede per prima. Il paragrafo sotto non si allarga con lei,
   perche' ha il suo max-width di 34rem. */
.hero-corpo { padding-block: clamp(3rem, 2rem + 5vw, 5rem); max-width: 41.5rem; }

.hero h1 { color: #fff; margin-bottom: var(--s5); }
.hero h1 .risalto {
    color: #8FD44A;   /* verde chiaro leggibile sul blu profondo (7,0) */
    /* filo sotto la parola chiave: enfasi senza cambiare peso al titolo */
    box-shadow: inset 0 -.14em 0 rgba(128,255,0,.28);
}
.hero-motto {
    /* Il motto dell'azienda, gia' scritto sui mezzi (foto del 24-08-2026).
       Sta sotto il titolo e non dentro: e' una firma, non un'affermazione.

       25-08: cresciuto molto (era clamp 1 -> 1,1875rem, peso 600). Giovanni lo
       vuole in evidenza, e il titolo che ha perso «con mezzi leggeri» gli ha
       lasciato la riga libera per starci. Il filo davanti e' cresciuto con lui,
       se no a quel corpo spariva. */
    /* 25-08, terzo giro: CORSIVO, con un font diverso da quello del titolo.
       Prima era Inter (stesso carattere del titolo, solo piu' piccolo: sembrava
       un sottotitolo), poi Oswald maiuscolo, bocciato da Giovanni. Un corsivo
       serif e' quello che un motto e' davvero: una firma.
       Niente maiuscoletto ne' spaziatura: su un corsivo chiudono le lettere e
       gli tolgono proprio il tratto scritto a mano.
       Se Lora non arriva, il ripiego e' il corsivo del font del sito: si perde
       il carattere, non la frase. */
    font-family: 'Lora', var(--font);
    font-style: italic;
    font-size: clamp(1.25rem, 1rem + 1.15vw, 2rem);
    font-weight: 600; letter-spacing: 0; text-transform: none;
    line-height: 1.3;
    color: #A8E85C;   /* piu' acceso del #B7E389 di prima */
    margin: var(--s1) 0 var(--s5);
    /* Niente filo davanti, e quindi niente flex: il motto comincia esattamente
       dove comincia il titolo. Il filo c'era da quando il motto era piccolo e
       in Inter, e serviva un segno per dire «questa e' una firma»; adesso che
       e' corsivo, verde e grande si distingue da solo, e l'unica cosa che
       faceva era spingere la frase dentro di 70 px rispetto al titolo.
       Bocciato da Armaan il 26-08 guardando la home. */

    /* Sul telefono la frase sta su due righe: `balance` le fa spezzare dopo la
       virgola («La tua destinazione, / la nostra strada») invece di lasciare
       «strada» da sola sulla seconda. Dove non e' supportato va a capo come
       prima: si perde il ritmo, non la frase.

       ⚠️ Va sul BLOCCO, non sullo <span> che c'era dentro: `text-wrap` non ha
       effetto su un elemento inline. Finche' `.hero-motto` era flex lo span
       diventava un flex item — cioe' un blocco — e funzionava lo stesso; tolto
       il flex insieme al filo, ha smesso di funzionare in silenzio e sul
       telefono «strada» e' tornata orfana. */
    text-wrap: balance;

    /* Fra caporali e sottolineato, richiesta di Armaan del 26-08. I caporali
       sono la forma italiana della citazione, e un motto e' l'azienda che cita
       se stessa; stanno nel TESTO e non in un ::before, perche' sono parte
       della frase e devono finire anche in un copia-incolla.

       La sottolineatura e' sottile e staccata di proposito: nel titolo qui
       sopra «su misura» ne ha gia' una, spessa e piena, e due segni uguali a
       due righe di distanza si annullano. Quella del titolo e' un
       evidenziatore, questa e' una citazione: si somigliano abbastanza da
       stare insieme e abbastanza poco da non fare a gara.
       `skip-ink` e' quello di default, quindi la riga salta le discendenti
       della g e della p invece di tagliarle. */
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: .22em;
    text-decoration-color: rgba(168, 232, 92, .4);
}
.hero-testo { font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
             color: #E4EDF3;   /* era #B9CCDA, nato per il fondo piatto */
             line-height: 1.7; max-width: 34rem; }

.hero-azioni { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }

.hero-punti {
    /* Una colonna sola. Da quando il testo sta sulla foto la colonna e' larga
       38rem: a due colonne ogni voce andava a capo a meta' parola e il blocco
       si leggeva sbilenco. A una colonna occupa le stesse quattro righe di
       prima, ma dritte. */
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--s3) var(--s6);
    margin-top: var(--s8); padding-top: var(--s6);
    border-top: 1px solid rgba(255,255,255,.14);
}
/* #C3D4E1 era nato per il fondo navy piatto: sulla foto faceva 3,90:1 contro
   i 4,5 richiesti (misurato a 390px). Si schiarisce il testo invece di scurire
   ancora la foto, cosi' i furgoni restano visibili anche sul telefono. */
.hero-punti li { display: flex; align-items: center; gap: .55rem; font-size: .9375rem; color: #E4EDF3; font-weight: 500; }
.hero-punti svg { width: 18px; height: 18px; color: #8FD44A; flex: none; }

/* striscia dei numeri sotto l'hero */
.numeri { background: var(--navy-fondo); }
.numeri ul {
    display: grid; grid-template-columns: repeat(4, 1fr);
    text-align: center;
}
.numeri li { padding: var(--s6) var(--s3); }
.numeri li + li { border-left: 1px solid var(--navy-riga); }
.numeri .cifra { display: block; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; color: #fff; letter-spacing: -.03em; }
.numeri .cifra em { font-style: normal; color: #8FD44A; }
.numeri .voce { display: block; font-size: .8125rem; color: #8FA6B8; margin-top: .3rem; letter-spacing: .01em; }

/* ============================================================= schede === */
.scheda {
    background: #fff;
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    padding: var(--s6);
    transition: border-color var(--t-medio), box-shadow var(--t-medio), transform var(--t-medio);
    display: flex; flex-direction: column;
}
a.scheda:hover, .scheda-attiva:hover {
    border-color: var(--blu-bordo);
    box-shadow: var(--o-md);
    transform: translateY(-2px);
}
.scheda h3 { margin-bottom: var(--s2); }
.scheda p { font-size: .9375rem; line-height: 1.65; }

.scheda-icona {
    width: 46px; height: 46px; flex: none;
    display: grid; place-items: center;
    border-radius: var(--r);
    background: var(--blu-pallido);
    color: var(--blu-cupo);
    margin-bottom: var(--s5);
}
.scheda-icona svg { width: 24px; height: 24px; }

.scheda-link {
    margin-top: auto; padding-top: var(--s5);
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 600; font-size: .9375rem; color: var(--blu-cupo);
}
.scheda-link svg { width: 16px; height: 16px; transition: transform var(--t-veloce); }
a.scheda:hover .scheda-link svg { transform: translateX(3px); }

/* elenco con spunte */
.spunte { display: grid; gap: var(--s3); }
.spunte li { display: flex; gap: var(--s3); align-items: flex-start; font-size: .9375rem; color: var(--t-normale); line-height: 1.6; }
.spunte svg { width: 20px; height: 20px; flex: none; color: var(--verde-testo); margin-top: 1px; }
.sezione-scura .spunte li { color: #B9CCDA; }
.sezione-scura .spunte svg { color: #8FD44A; }

/* ====================================================== come lavoriamo == */
/* I quattro passi sono un PERCORSO: il filo che unisce i numeri dice la
   sequenza senza scriverla, e il numero sta SOPRA il testo, non di fianco.
   Prima il numero era a sinistra: a quattro colonne al testo restavano ~150 px
   e ogni paragrafo andava a capo cinque volte. Stesso testo, meta' delle righe.
   Sul telefono, a una colonna, il filo torna verticale e il numero di fianco:
   e' la forma naturale di una sequenza in verticale. */
.passi { counter-reset: passo; display: grid; gap: var(--s8) var(--s6); }
.passo { position: relative; padding-top: 60px; }
.passo::before {
    counter-increment: passo; content: counter(passo);
    position: absolute; left: 0; top: 0;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: var(--r);
    background: var(--navy); color: #fff;
    font-weight: 800; font-size: 1.0625rem;
    transition: background-color var(--t-medio), transform var(--t-medio);
}
/* Il filo fino al passo dopo. Due strati di fondo nello stesso elemento: il
   grigio sempre, e sopra il verde che si allarga da 0 a 100% quando la
   sezione entra in vista. Cosi' non serve un elemento in piu'. */
.passo::after {
    content: ''; position: absolute;
    left: 56px; right: calc(-1 * var(--s6)); top: 21px; height: 2px;
    background: linear-gradient(90deg, var(--verde-marchio), var(--verde-marchio))
                left / 100% 100% no-repeat,
                var(--g-200);
    transition: background-size .5s ease;
}
.passo:last-child::after { display: none; }

.passo h3 { margin-bottom: var(--s2); }
.passo p { font-size: .9375rem; color: var(--t-normale); }

/* Il passo risponde al puntatore e al fuoco da tastiera: il numero diventa
   verde e si alza appena. Non e' decorazione, e' il segnale che la sequenza
   e' viva. :focus-within perche' un giorno qui dentro potrebbe finirci un
   link, e chi naviga da tastiera deve vedere la stessa cosa. */
@media (hover: hover) {
    .passo:hover::before { background: var(--verde-marchio); transform: translateY(-3px); }
}
.passo:focus-within::before { background: var(--verde-marchio); }

/* Il filo si tira da sinistra a destra quando la sezione entra in vista. La
   classe .anima la mette il JS, e tocca SOLTANTO il filo.

   ⚠️ Qui c'era anche la comparsa scaglionata dei quattro passi (opacity 0 ->
   1). E' durata mezz'ora: nello scatto della home i quattro passi erano
   INVISIBILI — testo, titoli, tutto — perche' fra l'IntersectionObserver che
   scatta e la transizione che finisce c'e' una corsa, e quando la si perde
   resta a schermo una sezione vuota col solo titolo. In un browser vero
   capita piu' di rado, non mai: una scheda aperta in secondo piano non anima,
   e l'osservatore scatta lo stesso.

   La regola che ne resta: un'animazione puo' toccare la DECORAZIONE, mai il
   contenuto. Se questo filo non si tira, resta grigio e non manca niente a
   nessuno. Se non si accendeva il testo, mancava la sezione. */
.passi.anima .passo::after { background-size: 0% 100%; }
.passi.anima.visibile .passo::after { background-size: 100% 100%; }
.passi.anima.visibile .passo:nth-child(1)::after { transition-delay: 60ms; }
.passi.anima.visibile .passo:nth-child(2)::after { transition-delay: 220ms; }
.passi.anima.visibile .passo:nth-child(3)::after { transition-delay: 380ms; }

/* ===================================================== testo giustificato = */
/* «Tutti i testi devono essere giustificati. Tutti. Su tutto il sito.»
   Armaan, 28-08-2026, dopo aver visto la prima versione limitata alla home.

   Si giustifica la PROSA: i paragrafi, le voci degli elenchi puntati, le
   risposte delle domande frequenti, i testi legali. NON si giustificano i
   titoli, i bottoni, le etichette, i numeri e i dati incolonnati: stirare le
   parole di un titolo di due righe o di una voce di menu non e' «giustificare
   il testo», e' rompere l'impaginazione. L'elenco delle esclusioni sta qui
   sotto, esplicito, cosi' si vede cosa e' stato deciso e perche'.

   ⚠️ NIENTE SILLABAZIONE, ed e' una decisione, non una dimenticanza.
   Giovanni, 29-08-2026: «non mi piace "so-ste" con il trattino di a capo; se i
   testi li giustifichi col tasto apposito di Word non fai prima?». Ha ragione:
   il tasto di Word allarga gli spazi e **non spezza mai le parole**, e questa
   riga fa la stessa cosa. Con `hyphens: manual` un a capo dentro una parola
   puo' avvenire solo dove c'e' un trattino morbido scritto a mano (`&shy;`), e
   nel sito non ce n'e' nessuno: quindi nessuna parola si spezza, in nessun
   browser.

   ⚠️ E qui c'e' una lezione che e' costata un giro. Il 28-08 avevo scritto
   che `hyphens: auto` «in Chrome per l'italiano non fa niente», misurato con
   una prova affiancata. Il fatto era vero, la conclusione no: rimisurato il
   29-08, **questo Chrome non sillaba in NESSUNA lingua**, nemmeno in inglese
   (gli mancano i dizionari, che su Windows arrivano come componente a parte).
   Quindi la prova non diceva «la proprieta' e' inerte», diceva «qui non si
   vede» — e intanto su Safari, cioe' sul telefono del cliente, spezzava le
   parole per davvero. Una verifica fatta su un browser solo, scritta come se
   valesse per tutti.

   Resta il costo, che era gia' stato detto e accettato: senza sillabazione, nelle
   colonne strette (le schede dei servizi sono larghe ~337 px, circa 34 caratteri
   per riga) fra le parole restano dei buchi bianchi. E' il motivo per cui i
   giornali non giustificano le colonnine. */
main p,
main li,
main dd,
.testo-legale p,
.testo-legale li {
    text-align: justify;
    hyphens: manual;
}

/* Le esclusioni: qui il testo NON e' prosa, e giustificarlo fa danno. */
main .hero-motto,                /* il motto: e' una firma, non un paragrafo.
                                    Su una riga non si nota, ma sul telefono va
                                    a due e la prima si sarebbe stirata */
main .occhiello,                 /* occhielli in maiuscoletto */
main .cifra, main .voce,         /* la striscia dei numeri, centrata */
main .btn,                       /* bottoni */
main .scheda-link,               /* «Vedi il servizio ->» */
main .mezzo-tipo,                /* etichette sopra i titoli */
main .briciole li,               /* Home > Flotta */
main .zona,                      /* i chip delle province */
main .mappa-sito li,             /* la mappa del sito e' navigazione: se una
                                    voce va a capo, la prima riga si stirerebbe */
main .hero-punti li,             /* elenco a icone dell'hero, righe corte */
main .spunte li,                 /* il contenitore: dentro c'e' uno <span> */
main .mezzo-dati dd,             /* i dati dei mezzi, allineati a destra */
main .contatto-riga dd,          /* recapiti */
main .figura-legenda li,         /* legenda della mappa */
main .org-nodo, main .org-etichetta, main .org-unico,
main .campo label, main .errore-campo, main .consenso,
main .scelta, main .avviso,
main .passo::before {
    text-align: initial;
    hyphens: manual;
}
/* Dentro le spunte il testo vero sta nello <span>: quello si giustifica. */
main .spunte li span { text-align: justify; hyphens: manual; }

/* ========================================================== territorio == */
.zone { display: flex; flex-wrap: wrap; gap: var(--s3); }
.zona {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1rem;
    border: 1px solid var(--g-200); border-radius: var(--r-tondo);
    background: #fff; font-size: .9375rem; font-weight: 600; color: var(--g-800);
}
.zona .sigla {
    font-size: .6875rem; font-weight: 800; letter-spacing: .04em;
    background: var(--blu-pallido); color: var(--blu-cupo);
    padding: .16rem .42rem; border-radius: var(--r-sm);
}
.zona-forte { border-color: var(--blu-bordo); background: var(--blu-pallido); }

/* Le ancore in cima ai servizi. Erano una griglia rigida a tre colonne: con
   sei servizi tornava, col settimo (29-08-2026) l'ultima restava sola in
   fondo a sinistra. Sono etichette larghe quanto il loro testo, quindi
   vanno in fila e la riga corta si centra: funziona con qualunque numero. */
.ancore-servizi { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }
.ancore-servizi .zona { justify-content: center; text-align: center; padding: .7rem 1rem; }

/* La riga di servizio sotto un dato (gli orari di emergenza in contatti). */
.nota-riga { display: inline-block; margin-top: .3rem; font-size: .875rem; color: var(--t-tenue); }

/* ============================================================== flotta == */
.mezzo {
    border: 1px solid var(--g-200); border-radius: var(--r-lg);
    overflow: hidden; background: #fff;
    display: flex; flex-direction: column;
}
/* Dal 26-08 qui c'e' una FOTO e non piu' uno schema disegnato. Il fondo e'
   bianco e non piu' il grigio sfumato: i mockup del cliente sono su bianco, e
   sopra un grigio si sarebbe visto il rettangolo della foto dentro la scheda.
   Niente padding per la stessa ragione — l'aria intorno al mezzo ce l'ha gia'
   dentro la foto, messa da scripts/prepara-flotta.py, uguale per tutte e
   quattro. */
.mezzo-figura {
    display: block;
    background: var(--bianco);
    border-bottom: 1px solid var(--g-200);
    aspect-ratio: 16 / 10;
}
/* `contain` e non `cover`: se un giorno una foto arriva con un rapporto un po'
   diverso dal 16:10, con cover verrebbe tagliata ai lati e nessuno se ne
   accorgerebbe finche' non manca mezzo furgone. Il fondo e' bianco come quello
   delle foto, quindi la differenza non si vede. */
.mezzo-figura img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mezzo-corpo { padding: var(--s5); display: flex; flex-direction: column; flex: 1; }
.mezzo-corpo h3 { margin-bottom: var(--s1); }
/* Due righe di spazio anche a chi ne usa una: «Boxato con sponda idraulica» va
   a capo e gli altri tre no, e senza questo il testo della quarta scheda
   partiva 25 px piu' in basso delle altre. Serve solo dove le schede stanno
   AFFIANCATE: a una colonna non c'e' niente da allineare e resterebbe una riga
   vuota sotto ogni titolo. */
@media (min-width: 761px) {
    .mezzo-corpo h3 { min-height: 2.6em; }
}
.mezzo-tipo { font-size: .8125rem; color: var(--t-tenue); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.mezzo-dati { margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--g-200); }
.mezzo-dati div { display: flex; justify-content: space-between; gap: var(--s4); padding: .55rem 0; font-size: .875rem; border-bottom: 1px solid var(--g-100); }
.mezzo-dati div:last-child { border-bottom: none; }
.mezzo-dati dt { color: var(--t-tenue); }
.mezzo-dati dd { color: var(--g-900); font-weight: 600; text-align: right; }
/* Erano stili scritti in linea dentro flotta.php: una riga di dato sta su una
   riga sola, ma «Quando serve» e' una frase e a due colonne finiva in una
   striscia larga un quarto di scheda. */
.mezzo-testo { margin-top: var(--s3); font-size: .9375rem; }
.mezzo-quando { flex-direction: column; gap: .2rem; align-items: flex-start; }
.mezzo-quando dd { text-align: left; font-weight: 500; color: var(--t-normale); }

/* Schede larghe con valori che vanno a capo — «L'azienda in breve».
   .mezzo-dati mette etichetta e valore agli estremi con space-between: la
   scatola del valore e' spinta a destra ma il testo dentro parte da sinistra,
   quindi i valori corti SEMBRANO allineati a destra e quelli che vanno a capo
   si vedono a sinistra. Nella stessa scheda convivono due allineamenti, ed e'
   il difetto segnalato il 30-08-2026. Qui le colonne sono due davvero:
   etichette su un asse, valori su un altro, tutti e due a sinistra. */
.dati-scheda { margin-top: 0; padding-top: 0; border-top: 0; }
.dati-scheda div {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: var(--s4);
    align-items: baseline;
}
.mezzo-dati.dati-scheda dd { text-align: left; font-variant-numeric: tabular-nums; }

/* Sotto i 480px la colonna delle etichette mangia meta' della riga: si
   impilano, etichetta sopra e valore sotto, come fa gia' .mezzo-quando. */
@media (max-width: 480px) {
    .dati-scheda div { grid-template-columns: 1fr; gap: .15rem; }
}
.nota-flotta { margin-top: var(--s6); max-width: 52rem; }

/* =============================================================== form === */
.campo { display: grid; gap: .45rem; }
.campo label { font-size: .875rem; font-weight: 600; color: var(--g-800); }
.campo .aiuto { font-size: .8125rem; color: var(--t-tenue); }
.obbligatorio { color: var(--errore); }

.campo input[type=text], .campo input[type=email], .campo input[type=tel],
.campo input[type=date], .campo input[type=number], .campo select, .campo textarea {
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--g-300);
    border-radius: var(--r);
    background: #fff;
    font-size: .9375rem;
    color: var(--g-900);
    transition: border-color var(--t-veloce), box-shadow var(--t-veloce);
}
.campo textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.campo select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7C8A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .7rem center;
    padding-right: 2.4rem;
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--g-400); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(39,148,206,.16);
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"], .campo select[aria-invalid="true"] {
    border-color: var(--errore); box-shadow: 0 0 0 3px rgba(198,40,40,.12);
}
.campo .errore-campo { font-size: .8125rem; color: var(--errore); font-weight: 500; }

.scelte { display: grid; gap: var(--s2); }
.scelta {
    display: flex; gap: .7rem; align-items: flex-start;
    padding: .7rem .85rem;
    border: 1px solid var(--g-300); border-radius: var(--r);
    cursor: pointer; font-size: .9375rem;
    transition: border-color var(--t-veloce), background-color var(--t-veloce);
}
.scelta:hover { border-color: var(--blu-bordo); background: var(--blu-pallido); }
.scelta input { margin-top: .2rem; accent-color: var(--blu); width: 17px; height: 17px; flex: none; }
.scelta:has(input:checked) { border-color: var(--blu); background: var(--blu-pallido); }
.scelta span { font-weight: 500; }

.consenso { display: flex; gap: .7rem; align-items: flex-start; font-size: .8125rem; color: var(--t-normale); line-height: 1.55; }
.consenso input { margin-top: .18rem; accent-color: var(--blu); width: 16px; height: 16px; flex: none; }

.avviso { padding: var(--s4) var(--s5); border-radius: var(--r); font-size: .9375rem; display: flex; gap: var(--s3); align-items: flex-start; }
.avviso svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.avviso-ok     { background: #EAF7F0; color: #10603A; border: 1px solid #B9E2CD; }
.avviso-errore { background: #FDECEC; color: #97241F; border: 1px solid #F3C4C2; }

/* riquadro form */
.riquadro-form {
    background: #fff; border: 1px solid var(--g-200);
    border-radius: var(--r-xl); padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    box-shadow: var(--o);
}

/* ============================================================== varie === */
.richiamo {
    background: linear-gradient(150deg, #15506F, var(--navy-fondo));
    color: #fff; border-radius: var(--r-xl);
    padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s8); flex-wrap: wrap;
}
/* Il testo prende lo spazio che avanza e il titolo va a capo dentro la sua
   colonna: senza questo il titolo misura la sua larghezza naturale (~790px),
   non ci sta accanto ai bottoni e il flex-wrap li mandava sotto, lasciando
   vuota tutta la meta' destra del riquadro. */
.richiamo > :first-child { flex: 1 1 20rem; min-width: 0; }
.richiamo-azioni { flex: 0 0 auto; }
.richiamo h2 { color: #fff; margin-bottom: var(--s3); }
.richiamo p { color: #B9CCDA; max-width: 34rem; }
.richiamo-azioni { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* Le due pagine con un modulo (Contatti e Preventivo) hanno la stessa
   impalcatura: una colonna col modulo e una di supporto. Cambia solo da che
   parte sta il modulo.

   ⚠️ Queste proporzioni stavano scritte IN LINEA dentro le due pagine, e uno
   stile in linea non puo' essere ribaltato da una media query: sotto i 900px
   le colonne restavano affiancate e su telefono il modulo era illeggibile —
   l'email andava a capo in mezzo alla parola e il bottone col numero di
   telefono usciva tagliato. Difetto presente dal primo giorno, trovato il
   24-08-2026 guardando gli scatti a 390px. */
.griglia-modulo { gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
.griglia-modulo-a-destra   { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.griglia-modulo-a-sinistra { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
@media (max-width: 900px) {
    .griglia-modulo,
    .griglia-modulo-a-destra,
    .griglia-modulo-a-sinistra { grid-template-columns: minmax(0, 1fr); }
}

.contatto-riga { display: flex; gap: var(--s4); align-items: flex-start; }
.contatto-riga .segno {
    width: 42px; height: 42px; flex: none;
    display: grid; place-items: center; border-radius: var(--r);
    background: var(--blu-pallido); color: var(--blu-cupo);
}
.sezione-scura .contatto-riga .segno { background: rgba(255,255,255,.10); color: #8FD44A; }
.contatto-riga .segno svg { width: 20px; height: 20px; }
.contatto-riga dt { font-size: .8125rem; color: var(--t-tenue); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.contatto-riga dd { font-size: 1rem; font-weight: 600; color: var(--g-900); margin-top: .15rem; }
.sezione-scura .contatto-riga dt { color: #8FA6B8; }
.sezione-scura .contatto-riga dd { color: #fff; }

.mappa { border: 1px solid var(--g-200); border-radius: var(--r-lg); overflow: hidden; background: var(--g-100); }
.mappa iframe { display: block; width: 100%; height: 340px; border: 0; }
/* la mappa a tutta larghezza sotto le due colonne: piu' alta, perche' a
   quella larghezza 340px la fanno sembrare una striscia */
.mappa-larga iframe { height: clamp(320px, 22vw, 420px); }

/* domande frequenti */
.domanda { border-bottom: 1px solid var(--g-200); }
.domanda summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
    padding: 1.05rem 0; cursor: pointer; font-weight: 600; color: var(--g-900); font-size: 1rem;
    list-style: none;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after {
    content: ''; flex: none; width: 11px; height: 11px;
    border-right: 2.2px solid var(--g-500); border-bottom: 2.2px solid var(--g-500);
    transform: rotate(45deg) translateY(-3px); transition: transform var(--t-medio);
}
.domanda[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.domanda p { padding-bottom: 1.15rem; font-size: .9375rem; max-width: 54rem; }

/* pagina intestazione (sottopagine) */
.testata-pagina {
    background: var(--g-50);
    border-bottom: 1px solid var(--g-200);
    padding-block: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
}
.testata-pagina h1 { color: var(--t-forte); }
.testata-pagina p { color: var(--t-normale); margin-top: var(--s4); max-width: 42rem; font-size: 1.0625rem; }
.briciole { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8125rem; color: var(--t-tenue); margin-bottom: var(--s4); }
.briciole a:not(.btn) { color: var(--blu-cupo); }
.briciole a:hover { color: var(--blu-scuro); }
.briciole li::after { content: '›'; margin-left: .45rem; color: var(--g-400); }
.briciole li:last-child::after { content: ''; }

/* ============================================================= footer === */
.pie { background: var(--navy-fondo); color: #A9BECE; padding-block: var(--s16) var(--s8); font-size: .9375rem; }
.pie-griglia { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--s10) var(--s8); }
.pie h4 { color: #fff; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s5); font-weight: 700; }
.pie-logo img { height: 42px; width: auto; margin-bottom: var(--s5); }
.pie p { color: #93AABC; font-size: .9375rem; line-height: 1.7; }
.pie ul { display: grid; gap: .7rem; }
.pie a:not(.btn) { color: #A9BECE; }
.pie a:not(.btn):hover { color: #fff; }
.pie-contatti { display: grid; gap: var(--s4); }
.pie-contatti div { display: flex; gap: .7rem; align-items: flex-start; }
.pie-contatti svg { width: 17px; height: 17px; color: #8FD44A; flex: none; margin-top: 3px; }
/* La riga di servizio sotto un dato del pie' (gli orari di emergenza): stessa
   colonna, ma un gradino sotto — tre righe della stessa misura facevano
   pesare quella voce quanto tutte le altre insieme. Il colore e' quello dei
   paragrafi del pie', gia' misurato: 5,62 su --navy-fondo. Un grigio piu'
   scuro (#7E93A6) sarebbe sceso a 4,26 e non passa l'AA. */
.pie-nota { display: block; margin-top: .2rem; font-size: .8125rem;
            color: #93AABC; line-height: 1.55; }
.pie-chiusura {
    margin-top: var(--s12); padding-top: var(--s6);
    border-top: 1px solid var(--navy-riga);
    display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
    font-size: .8125rem; color: #90A6B8;
}
.pie-chiusura ul { display: flex; gap: var(--s5); flex-wrap: wrap; }
.pie-dati { color: #8399AC; font-size: .8125rem; line-height: 1.7; margin-top: var(--s3); }

/* barra di chiamata fissa su telefono */
.barra-telefono {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--g-200);
    padding: .6rem var(--bordo-pag);
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
    gap: var(--s3);
    box-shadow: 0 -4px 16px rgba(16,64,94,.08);
}
.barra-telefono .btn { flex: 1; }

/* ========================================================= responsive === */
@media (max-width: 1080px) {
    .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* A due colonne il filo del secondo passo finirebbe nel vuoto a destra
       invece che sul numero dopo: si toglie a fine riga. */
    .passo:nth-child(2n)::after { display: none; }
    .pie-griglia { grid-template-columns: 1.4fr 1fr 1.2fr; }
    .pie-griglia > :first-child { grid-column: 1 / -1; }
}

/* Sette servizi in tre colonne lasciano l'ultima scheda sola in fondo a
   sinistra, e sembra dimenticata invece che ultima. In una griglia rigida
   l'unica cosa che si puo' fare e' centrarla, e tanto basta.
   ⚠️ Solo quando le colonne sono DAVVERO tre: sotto i 960 px diventano due,
   e la stessa riga la manderebbe a destra — peggio di dove si era partiti. */
@media (min-width: 961px) {
    .griglia-servizi > :last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* ⚠️ Il menu disteso non ci sta sotto i ~1240px, e non ci stava nemmeno
   prima: la placca del logo (410px a 74 d'altezza) + le sette voci (527) + il
   bottone «Preventivo» (185) + gli spazi fanno 1202px di roba, dentro un
   contenitore che a 1024 ne offre 984. Misurato il 01-09-2026: la pagina
   sbordava di 268px a 961, 205 a 1024, 29 a 1200 — su tutte e sette le
   pagine, quindi anche su un iPad in orizzontale e su un portatile da 1280.
   Nessuno l'aveva mai guardato perche' il collaudo si fermava a 768 e
   ripartiva da 1440, cioe' saltava a pie' pari la fascia rotta.
   La soglia del bottone-menu passa quindi da 960 a 1240: sotto si usa lo
   stesso menu compatto che il sito faceva gia' sotto i 960. Il pannello
   `.menu-mobile` non ha soglie sue (lo apre il JS con la classe `.aperto`),
   quindi non c'e' altro da spostare. */
@media (max-width: 1240px) {
    .nav-voci { display: none; }
    .nav-apri { display: inline-flex; }
}

@media (max-width: 960px) {
    :root { --h-nav: 80px; }
    /* Il bottone «Richiedi preventivo» sparisce SOLO da qui in giu', non gia'
       a 1240: fra 961 e 1240 la barra ha il logo a sinistra e il bottone del
       menu a destra, e in mezzo mezzo schermo vuoto. Guardata a 1024 e a 1200
       il 01-09-2026: sembrava una barra a cui manca un pezzo. Il CTA la riempie
       e resta raggiungibile proprio nella fascia dove il sito era rotto. */
    .nav-azioni .btn { display: none; }
    .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .numeri ul { grid-template-columns: repeat(2, 1fr); }
    .numeri li:nth-child(3) { border-left: none; }
    .numeri li:nth-child(n+3) { border-top: 1px solid var(--navy-riga); }
    .nav-logo img { max-height: 56px; }
    .nav-logo { padding-inline: var(--s4) 1.6rem;
                padding-left: calc(var(--bordo-pag) + var(--s1));
                clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
}

@media (max-width: 760px) {
    :root { --bordo-pag: 1rem; }
    /* verticale: il testo sta SOPRA la foto, non di fianco, quindi il velo
       diventa verticale invece che orizzontale */
    .hero { min-height: clamp(28rem, 20rem + 30vw, 34rem); }
    /* Il ritaglio del telefono e' una tela verticale col furgone in basso
       (scripts/prepara-hero.py). Ancorata al fondo: sui telefoni stretti e alti
       si vede tutta, e sugli schermi larghi-e-bassi si taglia il cielo, non il
       mezzo. Con 46% al centro il furgone finiva tagliato alle ruote. */
    .hero-sfondo img { object-position: 50% 100%; }
    .hero::after {
        background:
            linear-gradient(178deg, rgba(8,36,54,.94) 0%, rgba(8,36,54,.86) 42%,
                                    rgba(8,36,54,.62) 70%, rgba(8,36,54,.72) 100%);
    }
    .hero-corpo { max-width: none; }
    .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
    .topbar a.topbar-nascondi,
    .topbar .topbar-voce.topbar-nascondi { display: none; }
    .topbar { font-size: .75rem; }
    .hero-corpo { max-width: none; }
    .hero-azioni .btn { width: 100%; }
    .richiamo { flex-direction: column; align-items: flex-start; }
    .richiamo-azioni { width: 100%; }
    .richiamo-azioni .btn { flex: 1; }
    .pie-griglia { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
    .pie-griglia > :first-child { grid-column: auto; }
    .pie { padding-block: var(--s12) var(--s8); }
    /* Una colonna sola: il percorso torna verticale, numero di fianco e filo
       che scende fino al passo dopo. */
    .passi { gap: var(--s6); }
    .passo { padding-top: 0; padding-left: 3.4rem; }
    .passo::before { width: 38px; height: 38px; font-size: .9375rem; top: -1px; }
    /* :not(:last-child) perche' il quarto passo E' un 2n: senza, tornando a
       una colonna il filo ripartiva anche sotto l'ultimo e scendeva nel vuoto
       (visto a 390 px il 25-08-2026). */
    .passo:nth-child(2n):not(:last-child)::after { display: block; }
    .passo::after {
        left: 18px; right: auto; top: 44px; bottom: calc(-1 * var(--s6));
        width: 2px; height: auto;
        background: linear-gradient(180deg, var(--verde-marchio), var(--verde-marchio))
                    top / 100% 100% no-repeat,
                    var(--g-200);
    }
    .passi.anima .passo::after { background-size: 100% 0%; }
    .passi.anima.visibile .passo::after { background-size: 100% 100%; }
    .barra-telefono { display: flex; }
    body { padding-bottom: 68px; }               /* spazio per la barra fissa */
    .mappa iframe { height: 280px; }
}

/* Sotto i 560 px la foto RESTA: e' l'unica immagine vera del sito, e il
   telefono e' il dispositivo da cui arriva la maggior parte delle visite.
   Era nascosta da quando al suo posto c'era un disegno. */
@media (max-width: 560px) {
}

@media (max-width: 480px) {
    .numeri ul { grid-template-columns: 1fr 1fr; }
    .numeri li { padding: var(--s5) var(--s2); }
    .hero-punti { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
    .zona { font-size: .875rem; padding: .5rem .8rem; }
    .contatto-riga .segno { width: 38px; height: 38px; }
    .btn { padding: .7rem 1.1rem; }
    .btn-grande { padding: .85rem 1.3rem; font-size: .9375rem; }
}

/* schermi molto stretti: niente deve uscire dai bordi */
@media (max-width: 360px) {
    :root { --bordo-pag: .875rem; }
    .nav-logo img { max-height: 48px; }
    .nav-logo { padding-inline: var(--s3) 1.2rem;
                clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
    h1 { font-size: 1.75rem; }
    .topbar-voci { gap: var(--s3); }
    /* `.btn` ha `white-space: nowrap`, giusto quasi sempre: un bottone che va
       a capo in mezzo a una frase sta male. Ma a 320px «Chiedi se copriamo la
       vostra tratta» misura 311px in uno spazio che ne offre 306, e la pagina
       scorreva di lato per 5px (zone-servite.php, misurato il 01-09-2026).
       A questa misura conviene che vada a capo: e' centrato, quindi su due
       righe sta bene, e la regola vale per qualunque etichetta lunga che
       arrivera' dopo — non solo per questa. */
    .btn { white-space: normal; padding-inline: 1rem; }
}

/* ============================================================== stampa == */
@media print {
    .topbar, .intestazione, .barra-telefono, .menu-mobile, .hero::before, .hero::after { display: none !important; }
    body { padding-bottom: 0; }
    .hero, .sezione-scura, .testata-pagina { background: #fff !important; color: #000 !important; }
    .hero h1, .sezione-scura h2, .testata-pagina h1 { color: #000 !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}

/* Il disco verde di conferma di grazie.php. Stesse proporzioni di
   .scheda-icona (icona grande la meta' del contenitore): l'icona senza misura
   riempiva tutto il disco, e adesso che icona() ha una misura di riserva
   sarebbe caduta a 24 px, persa dentro 72. Non e' un caso da stile in linea. */
.segno-fatto {
    display: inline-grid; place-items: center;
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--verde-fondo); color: var(--verde-testo);
    margin-bottom: var(--s6);
}
.segno-fatto svg { width: 34px; height: 34px; }

/* ======================================================= mappa del sito == */
/* Quattro colonne di link, gli stessi gruppi del pie' di pagina. Niente icone:
   una freccia identica su ogni riga non dice niente che il link non dica gia',
   e nove frecce uguali sono decorazione ripetuta. (Erano anche quelle che
   esplodevano a tutta colonna, ma il motivo per toglierle e' il primo.) */
.mappa-sito { align-items: start; row-gap: var(--s10); }
.mappa-sito h2 {
    /* stessa intestazione delle colonne del pie' di pagina: maiuscoletto
       spaziato, piccolo, cosi' la mappa e il footer si riconoscono uguali */
    font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 700; color: var(--blu-cupo); margin-bottom: var(--s5);
    padding-bottom: var(--s3); border-bottom: 1px solid var(--g-200);
}
.mappa-sito ul { display: grid; gap: .7rem; }
.mappa-sito a { color: var(--t-normale); }
.mappa-sito a:hover { color: var(--blu-cupo); }
/* I servizi sono ANCORE dentro servizi.php, non pagine: il rientro col filo
   lo dice senza bisogno di scriverlo. */
.mappa-sotto {
    margin-top: .7rem; padding-left: var(--s4);
    border-left: 1px solid var(--g-200);
}
.mappa-sotto a { color: var(--t-tenue); font-size: .9375rem; }

/* ======================================================== testi legali === */
/* Privacy e cookie: colonna stretta, gerarchia semplice, niente decorazioni.
   Sono pagine che si leggono, non che si guardano. */
.testo-legale h2 {
    font-size: 1.25rem;
    margin-top: var(--s10);
    margin-bottom: var(--s4);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--g-200);
}
.testo-legale h2:first-child { margin-top: 0; }
.testo-legale p { margin-bottom: var(--s4); line-height: 1.75; }
.testo-legale ul {
    display: grid; gap: var(--s3);
    margin: 0 0 var(--s5); padding-left: var(--s5);
    list-style: disc;
}
.testo-legale li { color: var(--t-normale); line-height: 1.7; }
.testo-legale li::marker { color: var(--g-400); }
.testo-legale a { text-decoration: underline; text-underline-offset: 2px; }
.testo-legale code {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: .875em; background: var(--g-100);
    padding: .12em .4em; border-radius: var(--r-sm);
}
.testo-legale table { font-size: .9375rem; }
.testo-legale thead th { color: var(--g-800); font-weight: 700; }

/* la tabella dei cookie non deve mai allargare la pagina su telefono */
.testo-legale table { display: block; overflow-x: auto; white-space: normal; }

/* ========================================================== figure === */
/* Disegni schematici (includes/figure.php). Nessuna tinta nuova: tutto viene
   dalla palette gia' verificata. Il verde resta l'azione e non entra qui,
   tranne l'alone dei giri quotidiani, che e' una superficie, non un testo. */

.figura {
    background: var(--bianco);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    padding: var(--s5);
}
.figura svg { display: block; width: 100%; height: auto; }

/* --- la mappa dei tragitti --- */
/* L'Italia e' alta e stretta: lasciata libera di riempire la colonna faceva
   620px di figura contro 210 del disegno che ha sostituito, e allungava la
   sezione lasciando mezza colonna di vuoto accanto al testo. Si limita
   l'ALTEZZA e si centra: la legenda sotto resta larga quanto la scheda. */
.figura-mappa { color: var(--g-200);            /* serve al reticolo, che usa currentColor */
                width: auto; height: clamp(320px, 30vw, 430px); margin: 0 auto; }
.figura-reticolo   { opacity: .55; }
.figura-terra      { fill: var(--blu-pallido); stroke: var(--blu-bordo); stroke-width: 1.4; }
.figura-raggio     { fill: none; stroke: var(--blu-cupo); stroke-width: 1.8;
                     stroke-dasharray: 6 5; opacity: .55; }
.figura-arrivo     { fill: var(--blu-cupo); opacity: .65; }
.figura-navetta-alone { fill: none; stroke: var(--bianco); stroke-width: 8;
                        stroke-linejoin: round; stroke-linecap: round; }
.figura-navetta    { fill: none; stroke: var(--blu-cupo); stroke-width: 3.4;
                     stroke-linejoin: round; stroke-linecap: round; }
.figura-giri       { fill: var(--verde-marchio); opacity: .12; }
.figura-base       { fill: var(--navy); stroke: var(--bianco); stroke-width: 2.5; }
.figura-base-cuore { fill: var(--bianco); }
.figura-nome  { font-size: 19px; font-weight: 700; fill: var(--g-900);
                paint-order: stroke; stroke: var(--bianco); stroke-width: 4px; }
.figura-ruolo { font-size: 15px; font-weight: 500; fill: var(--t-normale);
                paint-order: stroke; stroke: var(--bianco); stroke-width: 4px; }

/* la legenda: testo vero sotto il disegno, non scritte dentro l'SVG */
.figura-legenda { display: grid; gap: var(--s3); margin-top: var(--s5);
                  padding-top: var(--s5); border-top: 1px solid var(--g-200); }
.figura-legenda li { display: flex; gap: var(--s3); align-items: baseline;
                     font-size: .875rem; color: var(--t-normale); }
.figura-legenda .segno-legenda { flex: none; width: 22px; margin-top: .35rem; }
.figura-legenda b { color: var(--g-900); font-weight: 600; }

/* --- gli schemi di carico della flotta --- */
/* Stesso furgone in tutti e tre: l'unica cosa che cambia, e l'unica marcata a
   colore, e' da dove entra la merce. I disegni di prima erano tre furgoni
   quasi uguali e la differenza non si vedeva. */
.figura-carico { display: block; width: 100%; height: auto; }
.fig-terra-linea  { fill: none; stroke: var(--g-300); stroke-width: 1.5; }
.fig-terra-tratto { fill: none; stroke: var(--g-300); stroke-width: 1; opacity: .8; }
.fig-scocca       { fill: none; stroke: var(--g-500); stroke-width: 2;
                    stroke-linejoin: round; stroke-linecap: round; }
.fig-scocca-piena { fill: var(--g-50); stroke: var(--g-500); stroke-width: 2; }
.fig-montante     { fill: none; stroke: var(--g-400); stroke-width: 1.6; stroke-dasharray: 5 4; }
.fig-ruota        { fill: var(--bianco); stroke: var(--g-500); stroke-width: 2; }
.fig-pallet         { fill: var(--blu-pallido); stroke: var(--blu-bordo); stroke-width: 1.5; }
.fig-pallet-nascosto{ fill: none; stroke: var(--g-300); stroke-width: 1.2; stroke-dasharray: 4 4; }
.fig-telo         { fill: none; stroke: var(--g-500); stroke-width: 2;
                    stroke-linejoin: round; stroke-linecap: round; }
.fig-apertura     { fill: none; stroke: var(--blu-cupo); stroke-width: 4.5; stroke-linecap: round; }
.fig-sponda       { fill: var(--blu-cupo); }
.fig-freccia      { fill: none; stroke: var(--blu-cupo); stroke-width: 2.5;
                    stroke-linecap: round; stroke-linejoin: round; }

/* --- lo schema dei passaggi di mano (chi-siamo) --- */
/* Non una catena di passi numerati: quella c'e' gia' in home ("Dal primo
   telefono alla merce consegnata") e ripeterla sarebbe la stessa cosa detta
   due volte. Qui il testo parla d'altro — di passaggi di mano — e lo schema
   dice quello. */
/* niente cornice esterna: i due blocchi hanno gia' la loro, e un riquadro
   dentro un riquadro e' il modo standard con cui una UI diventa rumorosa */
.figura-organico { display: grid; gap: var(--s5);
                   background: none; border: 0; padding: 0; }
.org-blocco { border: 1px solid var(--g-200); border-radius: var(--r); padding: var(--s5); }
.org-etichetta {
    font-size: .75rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--t-tenue); margin-bottom: var(--s4);
}
.org-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.org-nodo {
    border: 1px dashed var(--g-300); border-radius: var(--r-sm);
    padding: var(--s3); font-size: .8125rem; line-height: 1.4;
    color: var(--t-tenue); text-align: center; background: var(--g-25);
}
/* il segno del passaggio di mano: una freccia fra un nodo e l'altro */
.org-fila li + li { position: relative; }
.org-fila li + li::before {
    content: ''; position: absolute; left: calc(-1 * var(--s2) - 1px); top: 50%;
    width: var(--s2); height: 0; border-top: 1px dashed var(--g-400);
}
.org-nota { font-size: .8125rem; line-height: 1.55; color: var(--t-tenue); margin-top: var(--s4); }

.org-blocco-forte { border-color: var(--blu-bordo); background: var(--blu-pallido); }
.org-blocco-forte .org-etichetta { color: var(--blu-cupo); }
.org-blocco-forte .org-nota { color: var(--g-700); }
.org-unico {
    display: flex; align-items: center; gap: var(--s4);
    background: var(--bianco); border: 1px solid var(--blu-bordo);
    border-radius: var(--r-sm); padding: var(--s4) var(--s5);
    font-weight: 600; color: var(--g-900); line-height: 1.4;
}
.org-unico svg { width: 26px; height: 26px; flex: none; color: var(--blu-cupo); }

/* Le scritte dentro un SVG scalano col disegno: a 390px la mappa e' alta 320px
   e i due nomi scendono a ~10px, illeggibili. Sotto i 640px si tolgono — non
   si perde niente, perche' la legenda qui sotto dice gli stessi due nomi ed e'
   testo vero, e l'aria-label dell'SVG descrive comunque tutta la scena. */
@media (max-width: 640px) {
    .figura-nome, .figura-ruolo { display: none; }
    .figura-mappa { height: clamp(300px, 78vw, 380px); }
}

/* La barra fissa: due bottoni, quindi le etichette ci stanno anche a 360px
   (con tre uscivano tagliate). Sopra l'hero si toglie — la classe la mette
   main.js, e il verso e' «nascondi», non «mostra»: senza JS resta visibile.

   ⚠️ `visibility` va dichiarata ESPLICITAMENTE anche nello stato visibile: e'
   una proprieta' ereditata e senza dichiarazione lo stato di ritorno non era
   deterministico (misurato: classe tolta ma visibility ancora `hidden`).
   E si nasconde con `visibility 0s var(--t-medio)`, cioe' a transizione FINITA,
   se no l'elemento sparisce prima di aver fatto lo scorrimento.
   ⚠️ --t-normale NON e' una durata: in questa palette e' il colore del testo.
   Le durate sono --t-veloce e --t-medio. */
.barra-telefono {
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
    transition: transform var(--t-medio), opacity var(--t-medio);
}
.barra-telefono.nascosta {
    transform: translateY(115%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform var(--t-medio), opacity var(--t-medio),
                visibility 0s var(--t-medio);
}
@media (prefers-reduced-motion: reduce) {
    .barra-telefono, .barra-telefono.nascosta { transition: none; }
}