/* 9/10/2026 (S11c): il foglio di stile del tema di DIS.PE., servito a /tema/stile.css.
   E' l'aspetto piu' moderno del tema di S11b, che resta in Temi/dispe.old: stessi contenuti,
   stessi due colori dell'azienda, altri caratteri, spazi e forme. Qui c'e' la cornice
   (intestazione, percorso, colonna, piede) e le pagine. Lo stile di un tipo di blocco sta nel
   suo blocchi/<codice>/stile.css, perche' valga anche nell'anteprima dell'editor, che questo
   foglio non lo carica. */

/* ----------------------------- caratteri: Schibsted Grotesk, servito dal sito
   (licenza in caratteri/OFL.txt). Un file per tutti i pesi; il corsivo e le lettere delle
   altre lingue europee si scaricano solo se la pagina li usa. */

@font-face {
    font-family: "Schibsted Grotesk";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("caratteri/schibsted-grotesk.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Schibsted Grotesk";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("caratteri/schibsted-grotesk-esteso.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Schibsted Grotesk";
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url("caratteri/schibsted-grotesk-corsivo.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Schibsted Grotesk";
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url("caratteri/schibsted-grotesk-corsivo-esteso.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------- colori e base
   Il blu e l'arancio sono quelli dell'azienda, con i valori di sempre. Tutto il resto e'
   ricavato dal blu: il blu notte delle superfici scure e dei titoli, il fondo, le righe. */

:root {
    --dispe-blu: #0076ff;
    --dispe-arancio: #f3510e;
    --dispe-blu-scuro: #005fd1;
    --dispe-arancio-scuro: #c2410c;
    --dispe-blu-chiaro: #e6f1ff;
    --dispe-notte: #0a1f3d;
    --dispe-scuro: #1c2a3d;
    --dispe-testo: #56647a;
    /* 9/10/2026 (Marcello): il fondo delle pagine era quasi bianco (#f2f5fa) e la barra
       bianca dell'intestazione ci si perdeva. Un grigio appena piu' scuro, tinta unita, con
       il blu piu' carico del rosso e del verde. */
    --dispe-fondo: #edf2f9;
    --dispe-riga: #dde4ee;
    --dispe-riga-forte: #cbd6e6;
    --dispe-carattere: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --dispe-raggio-grande: 1.25rem;
    --dispe-raggio: 0.875rem;
    --dispe-raggio-piccolo: 0.5rem;
    --dispe-bordo: 1rem;

    /* 12/10/2026 (S12g, richiesta di Marcello): la scala dei titoli, da H1 a H6. La usano i
       titoli qui sotto e, nei blocchi, i titoli a cui chi redige ha scelto un livello: lo
       stile di ogni blocco ha le stesse misure come valore di riserva, per l'anteprima
       dell'editor. Cambiando una misura qui va cambiata anche li'. */
    --dispe-h1: clamp(2.125rem, 1.55rem + 2.4vw, 3.5rem);
    --dispe-h2: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);
    --dispe-h3: 1.375rem;
    --dispe-h4: 1.1875rem;
    --dispe-h5: 1.0625rem;
    --dispe-h6: 1rem;

    /* 10/10/2026 (S12b, richiesta di Marcello): le dissolvenze. Arrivando su una pagina il
       contenuto entra, con una dissolvenza e una salita; scorrendo, entrano i blocchi e le
       schede che stavano sotto il bordo della finestra, quelle di una riga una dopo l'altra.
       Qui le misure: quanto dura e da quanto lontano parte ciascuno dei due effetti, e
       quanto passa fra una scheda e la successiva. Con la durata a 0s un effetto e' spento.
       Le regole sono in fondo al foglio. */
    --dispe-arrivo: 0.5s;
    --dispe-arrivo-salita: 1.25rem;
    --dispe-entrata: 0.6s;
    --dispe-entrata-salita: 1.75rem;
    --dispe-entrata-scarto: 0.08s;

    --bs-body-font-family: var(--dispe-carattere);
    --bs-body-color: var(--dispe-scuro);
    --bs-body-bg: var(--dispe-fondo);
    --bs-link-color: var(--dispe-blu-scuro);
    --bs-link-color-rgb: 0, 95, 209;
    --bs-link-hover-color: var(--dispe-blu-scuro);
    --bs-link-hover-color-rgb: 0, 95, 209;
}

@media (min-width: 768px) {
    :root {
        --dispe-bordo: 1.5rem;
    }
}

@media (min-width: 1200px) {
    :root {
        --dispe-bordo: 2.25rem;
    }
}

/* Un collegamento interno alla pagina non finisce sotto l'intestazione, che sul computer
   resta in alto. */
html {
    scroll-padding-top: 7rem;
}

/* Il piede resta in fondo anche quando la pagina e' corta. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--dispe-carattere);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--dispe-scuro);
    background: var(--dispe-fondo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
}

main {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--dispe-notte);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

h1, .h1 {
    font-size: var(--dispe-h1);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
    word-spacing: 0.05em;
}

h2, .h2 {
    font-size: var(--dispe-h2);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

h3, .h3 { font-size: var(--dispe-h3); }
h4, .h4 { font-size: var(--dispe-h4); }
h5, .h5 { font-size: var(--dispe-h5); }
h6, .h6 { font-size: var(--dispe-h6); }

p, ul, ol, table {
    margin-bottom: 1.25rem;
}

a {
    color: var(--dispe-blu-scuro);
    text-decoration: underline;
    text-decoration-color: rgba(0, 95, 209, 0.35);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
    color: var(--dispe-blu-scuro);
    text-decoration-color: currentColor;
}

b, strong {
    font-weight: 700;
}

img {
    max-width: 100%;
    height: auto;
}

/* Chi naviga da tastiera vede sempre dove si trova. */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--dispe-arancio);
    outline-offset: 3px;
    border-radius: 4px;
}

.visually-hidden-focusable:focus {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2000;
    padding: 0.75rem 1rem;
    border-radius: var(--dispe-raggio-piccolo);
    background: #fff;
}

/* ----------------------------- il contenitore: largo come oggi, staccato dai bordi */

.contenitore {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--dispe-bordo);
    padding-right: var(--dispe-bordo);
}

.griglia {
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 2rem;
}

@media (min-width: 1200px) {
    .griglia {
        --bs-gutter-x: 3rem;
    }
}

/* Sul telefono piu' stretto le colonne si avvicinano, perche' due schede affiancate tengano
   intera una parola lunga. */
@media (max-width: 359.98px) {
    .griglia {
        --bs-gutter-x: 1rem;
    }
}

/* ----------------------------- pulsanti a pillola
   La scritta e' com'e' scritta, non piu' tutta in maiuscolo; una scritta lunga va a capo
   dentro il pulsante invece di uscirne. */

.pulsante {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: 100%;
    min-height: 3rem;
    padding: 0.625rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--dispe-blu);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pulsante:hover,
.pulsante:focus-visible {
    background: var(--dispe-blu-scuro);
    color: #fff;
    text-decoration: none;
}

.pulsante:focus-visible {
    border-radius: 999px;
}

.pulsante-arancio {
    background: var(--dispe-arancio);
}

.pulsante-arancio:hover,
.pulsante-arancio:focus-visible {
    background: var(--dispe-arancio-scuro);
}

/* L'etichetta: l'occhiello di un prodotto. */
.etichetta {
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    background: var(--dispe-blu-chiaro);
    color: var(--dispe-blu-scuro);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
}

/* ----------------------------- intestazione
   Una barra bianca staccata dai bordi, come oggi, con gli angoli tondi. Accanto al logo c'e'
   il nome del sito, scritto: nel logo la scritta e' troppo piccola per leggersi. */

.intestazione {
    position: relative;
    z-index: 1030;
    padding-top: 0.75rem;
}

/* Nella pagina iniziale sta sopra la fascia d'apertura. */
.intestazione-sopra {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.intestazione-barra {
    min-height: 4.5rem;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    border-radius: var(--dispe-raggio-grande);
    background: #fff;
    box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.05), 0 14px 30px -22px rgba(10, 31, 61, 0.45);
}

.intestazione-barra .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    margin-right: 1.5rem;
    padding: 0;
    color: var(--dispe-notte);
    text-decoration: none;
    white-space: normal;
}

.logo {
    display: block;
    flex: none;
    width: auto;
    height: 3.5rem;
}

.marchio {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.marchio-nome {
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.marchio-motto {
    display: none;
    color: var(--dispe-testo);
    font-size: 0.8125rem;
    font-weight: 500;
}

.intestazione-barra .navbar-toggler {
    padding: 0.625rem;
    border: 0;
    border-radius: var(--dispe-raggio-piccolo);
    color: var(--dispe-notte);
}

.intestazione-barra .navbar-toggler:focus {
    box-shadow: none;
}

/* 9/10/2026: con la tastiera si vede dove si e' anche sul pulsante del menu e sulle voci,
   con lo stesso segno arancio del resto del sito al posto dell'alone di Bootstrap. */
.intestazione-barra .navbar-toggler:focus-visible,
.menu-principale .nav-link:focus-visible,
.menu-principale .dropdown-item:focus-visible {
    outline: 3px solid var(--dispe-arancio);
    outline-offset: 2px;
    box-shadow: none;
}

.menu-principale {
    gap: 0.125rem;
}

.menu-principale .nav-link {
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: var(--dispe-raggio-piccolo);
    background: none;
    color: var(--dispe-scuro);
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.menu-principale a.nav-link:hover,
.menu-principale button.nav-link:hover,
.menu-principale .nav-link.show {
    background: var(--dispe-fondo);
    color: var(--dispe-notte);
}

.menu-principale .nav-link.active {
    color: var(--dispe-blu-scuro);
    font-weight: 600;
}

.menu-principale .dropdown-toggle::after {
    margin-left: 0.4em;
    vertical-align: 0.15em;
    border-top-width: 0.3em;
    border-right-width: 0.28em;
    border-left-width: 0.28em;
    opacity: 0.6;
}

/* La tendina e' bianca, con le voci larghe quanto un dito. */
.menu-principale .dropdown-menu {
    --bs-dropdown-min-width: 15rem;
    --bs-dropdown-bg: #fff;
    --bs-dropdown-color: var(--dispe-scuro);
    --bs-dropdown-link-color: var(--dispe-scuro);
    --bs-dropdown-link-hover-color: var(--dispe-notte);
    --bs-dropdown-link-hover-bg: var(--dispe-fondo);
    --bs-dropdown-link-active-color: var(--dispe-blu-scuro);
    --bs-dropdown-link-active-bg: var(--dispe-blu-chiaro);
    --bs-dropdown-divider-bg: var(--dispe-riga);
    --bs-dropdown-divider-margin-y: 0.375rem;
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: var(--dispe-raggio);
    --bs-dropdown-padding-x: 0.5rem;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-item-padding-x: 0.75rem;
    --bs-dropdown-item-padding-y: 0.5rem;
    --bs-dropdown-font-size: 0.9375rem;
    margin-top: 0.5rem;
    font-weight: 500;
    box-shadow: 0 0 0 1px rgba(10, 31, 61, 0.06), 0 18px 40px -16px rgba(10, 31, 61, 0.35);
}

.menu-principale .dropdown-item {
    border-radius: var(--dispe-raggio-piccolo);
    text-decoration: none;
    white-space: normal;
}

.menu-principale .dropdown-item-text {
    color: var(--dispe-testo);
}

.menu-utilita {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-utilita .pulsante {
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
}

/* Sul computer la barra resta in alto mentre si scorre. */
@media (min-width: 1200px) {
    .intestazione {
        position: sticky;
        top: 0;
    }

    /* Nella pagina iniziale la fascia d'apertura comincia sotto la barra: la barra occupa
       6 rem, e il margine negativo la toglie dal flusso senza toglierla dall'alto. */
    .intestazione-sopra {
        margin-bottom: -5.25rem;
    }

    .menu-principale .nav-item {
        margin-right: 0;
    }
}

@media (min-width: 1400px) {
    .marchio-motto {
        display: block;
    }
}

/* Sul telefono il menu si apre sotto la barra: voci in colonna, e in fondo i pulsanti. */
@media (max-width: 1199.98px) {
    .intestazione-barra {
        padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    }

    .logo {
        height: 3rem;
    }

    .intestazione-barra .navbar-collapse {
        padding: 0.75rem 0.25rem 0.5rem;
    }

    .menu-principale .nav-link {
        width: 100%;
        padding: 0.75rem;
        font-size: 1.0625rem;
    }

    .menu-principale .dropdown-menu {
        margin: 0 0 0.5rem 0.75rem;
        padding: 0 0 0 0.5rem;
        border-left: 2px solid var(--dispe-riga);
        border-radius: 0;
        box-shadow: none;
    }

    .menu-principale .dropdown-item {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }

    .menu-utilita {
        margin-top: 0.75rem;
        padding-top: 1rem;
        border-top: 1px solid var(--dispe-riga);
    }

    .menu-utilita li,
    .menu-utilita .pulsante {
        width: 100%;
    }
}

@media (max-width: 359.98px) {
    .marchio-nome {
        font-size: 1rem;
    }
}

/* ----------------------------- percorso di navigazione */

.percorso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--dispe-testo);
    font-size: 0.875rem;
}

.percorso li {
    display: flex;
    align-items: center;
}

.percorso a {
    color: var(--dispe-testo);
    text-decoration: none;
}

.percorso a:hover,
.percorso a:focus-visible {
    color: var(--dispe-blu-scuro);
    text-decoration: underline;
}

.percorso [aria-current] {
    color: var(--dispe-notte);
    font-weight: 600;
}

.percorso li + li::before {
    font-family: "bootstrap-icons";
    content: "\F285";
    margin: 0 0.5rem;
    color: #9aa6b8;
    font-size: 0.6875rem;
}

/* ----------------------------- le pagine */

.corpo-pagina {
    margin-top: 3rem;
}

.percorso-pagina + .corpo-pagina {
    margin-top: 1.75rem;
}

.blocco {
    margin-bottom: 2.5rem;
}

/* La fascia in testa a una pagina: l'immagine del contenuto. */
.fascia-immagine {
    position: relative;
    aspect-ratio: 7 / 3;
    margin: 0 0 2rem;
    border-radius: var(--dispe-raggio-grande);
    overflow: hidden;
}

.fascia-immagine img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.occhiello {
    margin-bottom: 0.5rem;
    color: var(--dispe-testo);
    font-size: 0.9375rem;
    font-weight: 600;
}

.riassunto {
    margin-bottom: 2rem;
    color: var(--dispe-testo);
    font-size: 1.25rem;
    line-height: 1.5;
}

.servizio-titolo,
.pagina-titolo {
    margin-bottom: 2rem;
}

/* 15/10/2026 (S12i, richiesta di Marcello): il titolo di una pagina, di un servizio o di un
   prodotto con il livello scelto nella scheda del contenuto. Il tag resta h1: cambia la sola
   misura, che e' quella della scala, la stessa di un titolo di blocco con lo stesso livello.
   Colore, peso e margini restano quelli del titolo. Lo script che tiene il titolo su una riga
   lascia stare un titolo con il livello: se non ci sta, va a capo. */
.pagina-titolo.titolo-h1, .servizio-titolo.titolo-h1, .prodotto-titolo.titolo-h1 { font-size: var(--dispe-h1); }
.pagina-titolo.titolo-h2, .servizio-titolo.titolo-h2, .prodotto-titolo.titolo-h2 { font-size: var(--dispe-h2); }
.pagina-titolo.titolo-h3, .servizio-titolo.titolo-h3, .prodotto-titolo.titolo-h3 { font-size: var(--dispe-h3); }
.pagina-titolo.titolo-h4, .servizio-titolo.titolo-h4, .prodotto-titolo.titolo-h4 { font-size: var(--dispe-h4); }
.pagina-titolo.titolo-h5, .servizio-titolo.titolo-h5, .prodotto-titolo.titolo-h5 { font-size: var(--dispe-h5); }
.pagina-titolo.titolo-h6, .servizio-titolo.titolo-h6, .prodotto-titolo.titolo-h6 { font-size: var(--dispe-h6); }

/* Una pagina che non e' quella iniziale: una colonna al centro, larga quanto serve a leggere.
   Testo, immagini, tabelle e gli altri blocchi usano tutta la colonna (24/10/2026, Marcello: con
   le righe corte a 44rem il testo non arrivava al bordo destro delle immagini e dei riquadri).
   Le immagini messe una dopo l'altra, come le sedi nella storia dell'azienda, si affiancano
   a due a due invece di occupare ognuna tutto lo schermo. */
.pagina:not(.pagina-iniziale) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 2rem;
    width: 100%;
    max-width: calc(64rem + 2 * var(--dispe-bordo));
    margin: 0 auto;
    padding: 0 var(--dispe-bordo);
}

.pagina:not(.pagina-iniziale) > .contenitore {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 768px) {
    .pagina:not(.pagina-iniziale) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pagina:not(.pagina-iniziale) > * {
        grid-column: 1 / -1;
    }

    .pagina:not(.pagina-iniziale) > .contenitore:has(> .blocco[data-tipo="immagine"]):has(+ .contenitore > .blocco[data-tipo="immagine"]),
    .pagina:not(.pagina-iniziale) > .contenitore:has(> .blocco[data-tipo="immagine"]) + .contenitore:has(> .blocco[data-tipo="immagine"]) {
        grid-column: auto;
        align-self: end;
    }

    /* 16/10/2026: in fondo alla pagina l'ultima immagine di una coppia tiene il margine degli
       altri blocchi. Le due si allineano dal basso, e senza margine scendeva di 2.5rem. */
    .pagina:not(.pagina-iniziale) > .contenitore:has(> .blocco[data-tipo="immagine"]) + .contenitore:last-child:has(> .blocco[data-tipo="immagine"]) > .blocco {
        margin-bottom: 2.5rem;
    }
}

/* Nella pagina iniziale non c'e' margine sopra: la fascia d'apertura parte dal bordo, da
   bordo a bordo, e l'intestazione le sta sopra. */
.pagina-iniziale .blocco {
    margin-bottom: 4.5rem;
}

.pagina-iniziale .blocco-largo {
    margin-bottom: 0;
}

/* 9/10/2026: l'ultimo blocco non somma il suo margine a quello del piede. */
.pagina > .contenitore:last-child > .blocco,
.servizio > .blocco:last-child {
    margin-bottom: 0;
}

/* 12/10/2026 (S12e): la fascia a due colori, che prima disegnava la cornice sopra il piede,
   ora e' un blocco della pagina iniziale. Dal blocco che la precede tiene la distanza che
   aveva: sul telefono meno di quella fra gli altri blocchi. */
.pagina-iniziale .contenitore:has(+ .contenitore > .blocco[data-tipo="fascia"]) > .blocco {
    margin-bottom: clamp(3rem, 2rem + 3vw, 4.5rem);
}

/* Piu' selettori di quanti ne ha lo stile del blocco, che arriva dopo questo foglio. */
.pagina .blocco-largo > .apertura {
    min-height: clamp(34rem, 92vh, 56rem);
}

/* "In vetrina" sale sulla fascia d'apertura, come oggi. */
.blocco-largo + .contenitore > .blocco[data-tipo="contenuti"] {
    position: relative;
    margin-top: -2.5rem;
}

@media (min-width: 1200px) {
    .blocco-largo + .contenitore > .blocco[data-tipo="contenuti"] {
        margin-top: -7rem;
    }
}

/* ----------------------------- colonna a sinistra */

.colonna {
    padding: 1.5rem 1rem 1rem;
    border-radius: var(--dispe-raggio-grande);
    background: #fff;
}

.colonna-titolo {
    margin: 0 0.75rem 0.75rem;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.colonna ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.colonna li {
    margin: 0 0 0.125rem;
}

.colonna a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--dispe-raggio-piccolo);
    color: var(--dispe-scuro);
    font-size: 1rem;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.colonna a:hover {
    background: var(--dispe-fondo);
    color: var(--dispe-notte);
}

.colonna a.attiva {
    background: var(--dispe-blu-chiaro);
    color: var(--dispe-blu-scuro);
    font-weight: 600;
}

@media (min-width: 1200px) {
    .colonna {
        position: sticky;
        top: 7rem;
    }
}

/* ----------------------------- servizio */

/* Gli allegati di un servizio stanno in fila sotto il titolo, come oggi: prima il titolo
   dell'elenco, con la graffetta, poi i file.
   15/10/2026 (S12h, rilievo O1 della review di S12g): il titolo non e' piu' "flex: none". Se sta
   in fila con i file resta com'era; se non ci sta su una riga i file vanno sotto e il titolo va
   a capo, a ogni livello, invece di uscire dalla colonna. */
.servizio .blocco[data-tipo="documenti"] .documenti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0;
    border-radius: 0;
    background: none;
}

.servizio .blocco[data-tipo="documenti"] .documenti-titolo {
    flex: 0 1 auto;
    margin: 0;
    color: var(--dispe-testo);
    font-size: var(--titolo-misura, 0.9375rem);
    font-weight: 600;
    letter-spacing: 0;
}

.servizio .blocco[data-tipo="documenti"] .documenti-titolo::before {
    font-family: "bootstrap-icons";
    content: "\F4B3";
    margin-right: 0.375rem;
    color: var(--dispe-blu);
    font-weight: 400;
    vertical-align: -0.1em;
}

.servizio .blocco[data-tipo="documenti"] .documenti-elenco {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    border-radius: 0;
    background: none;
}

.servizio .blocco[data-tipo="documenti"] .documenti-elenco li {
    margin: 0;
    padding: 0;
    border: 0;
}

.servizio .blocco[data-tipo="documenti"] .documenti-elenco a {
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    background: #fff;
    font-size: 0.9375rem;
}

/* ----------------------------- prodotto */

.prodotto-immagine {
    display: block;
    width: 100%;
    margin-bottom: 1.25rem;
    border-radius: var(--dispe-raggio);
}

/* 9/10/2026: il titolo si misura sulla colonna in cui sta, non sulla finestra: cosi' una
   parola lunga ci sta intera anche sul tablet in verticale, dove prima andava a capo a
   meta'. Chi non conosce le unita' "cqi" tiene la misura fissa della riga prima. */
.prodotto-intestazione {
    container-type: inline-size;
}

.prodotto-titolo {
    margin-bottom: 1rem;
    font-size: 2rem;
    font-size: clamp(1.625rem, 9.5cqi, 3rem);
    line-height: 1.08;
}

.prodotto .etichetta {
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
    padding: 0.25rem 0.875rem;
}

/* Le voci di un prodotto: un elenco puntato con le frecce al posto dei punti. La voce resta
   un testo normale, con la freccia fuori dal flusso. Un elenco numerato tiene i suoi numeri,
   e i file da scaricare la loro icona, senza freccia. */
.prodotto-testo ul {
    margin: 0.5rem 0 1.5rem;
    padding: 0;
    list-style: none;
}

.prodotto-testo li {
    margin-bottom: 0.75rem;
}

.prodotto-testo ul:not(.documenti-elenco) > li {
    position: relative;
    padding-left: 1.75rem;
}

.prodotto-testo ul:not(.documenti-elenco) > li::before {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "bootstrap-icons";
    content: "\F285";
    color: var(--dispe-blu);
    font-size: 0.8125rem;
    line-height: 2.1;
}

/* ----------------------------- elenchi */

.scheda-prodotto {
    display: block;
    color: var(--dispe-notte);
    text-decoration: none;
}

.scheda-prodotto:hover {
    color: var(--dispe-notte);
    text-decoration: none;
}

.scheda-prodotto:focus-visible {
    border-radius: var(--dispe-raggio);
}

.scheda-prodotto-immagine {
    display: block;
    aspect-ratio: 3 / 4;
    margin-bottom: 1rem;
    border-radius: var(--dispe-raggio);
    background: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--dispe-riga);
    transition: box-shadow 0.15s ease;
}

.scheda-prodotto-immagine img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scheda-prodotto:hover .scheda-prodotto-immagine {
    box-shadow: 0 0 0 2px var(--dispe-blu);
}

.scheda-prodotto-titolo {
    margin-bottom: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

.scheda-prodotto:hover .scheda-prodotto-titolo {
    color: var(--dispe-blu-scuro);
}

@media (min-width: 768px) {
    .scheda-prodotto-titolo {
        font-size: 1.1875rem;
    }
}

@media (max-width: 359.98px) {
    .scheda-prodotto-titolo {
        font-size: 0.875rem;
    }
}

/* 9/10/2026 (S11c, correzione di Marcello): le schede dei servizi. A sinistra la figura, cioe'
   l'immagine del servizio o, se non ce l'ha, la sua icona su fondo blu, tagliata in diagonale
   come la fascia a due colori (blocchi/fascia); a destra titolo, riassunto e "Scopri di
   piu'". Un bordo e un'ombra le staccano dal fondo. Tre per riga sullo schermo largo, due
   sul tablet, una sul telefono. Tutta la scheda porta al servizio: il collegamento si allarga fino ai suoi bordi.
   Lo stesso aspetto, per la pagina iniziale, e' in blocchi/contenuti/stile.css. */
.schede-servizi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    gap: 1.25rem;
}

.scheda-servizio {
    position: relative;
    display: grid;
    grid-template-columns: clamp(5.5rem, 30%, 9rem) minmax(0, 1fr);
    min-height: 9.5rem;
    border-radius: var(--dispe-raggio);
    background: #fff;
    box-shadow: 0 0 0 1px var(--dispe-riga-forte), 0 14px 26px -20px rgba(10, 31, 61, 0.55);
    transition: box-shadow 0.15s ease;
}

.scheda-servizio:hover,
.scheda-servizio:focus-within {
    box-shadow: 0 0 0 2px var(--dispe-blu), 0 14px 26px -20px rgba(10, 31, 61, 0.55);
}

.scheda-servizio-figura {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 0.75rem;
    border-radius: var(--dispe-raggio) 0 0 var(--dispe-raggio);
    background: var(--dispe-blu);
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    clip-path: polygon(0 0, 100% 0, calc(100% - 1.125rem) 100%, 0 100%);
    overflow: hidden;
}

.scheda-servizio-figura img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.scheda-servizio-corpo {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.25rem 1.25rem 1.125rem 0.5rem;
}

.scheda-servizio-titolo {
    margin-bottom: 0.375rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.scheda-servizio-testo {
    flex-grow: 1;
    color: var(--dispe-testo);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.scheda-servizio-testo p:last-child {
    margin-bottom: 0;
}

.scheda-servizio-vai {
    display: block;
    margin-top: 0.875rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.scheda-servizio-vai::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--dispe-raggio);
}

.scheda-servizio-vai:focus-visible {
    outline: 0;
}

.scheda-servizio-vai:focus-visible::after {
    outline: 3px solid var(--dispe-arancio);
    outline-offset: 3px;
}

.scheda-servizio-vai .bi {
    margin-left: 0.375rem;
    vertical-align: -0.1em;
}

.testo-categoria {
    margin-bottom: 2rem;
    color: var(--dispe-testo);
}

/* Le pagine di un elenco. */
.pagine {
    margin-top: 3rem;
}

.pagine ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagine a,
.pagine span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    color: var(--dispe-notte);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.pagine a {
    background: #fff;
    transition: background-color 0.15s ease;
}

.pagine a:hover,
.pagine a:focus-visible {
    background: var(--dispe-blu-chiaro);
    color: var(--dispe-blu-scuro);
}

.pagine [aria-current] span {
    background: var(--dispe-blu);
    color: #fff;
}

/* ----------------------------- piede */

.piede {
    margin-top: 3.5rem;
    padding: 3.5rem 0 1.5rem;
    background: #fff;
}

.piede-riga {
    --bs-gutter-y: 2.5rem;
}

.logo-piede {
    display: block;
    width: auto;
    height: 6.5rem;
    margin-bottom: 1.25rem;
}

.piede p {
    margin: 0;
    color: var(--dispe-testo);
    font-size: 0.9375rem;
}

.menu-piede {
    columns: 2;
    column-gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-piede li {
    margin-bottom: 0.625rem;
    break-inside: avoid;
}

.menu-piede a,
.menu-piede span {
    color: var(--dispe-scuro);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
}

.menu-piede a:hover {
    color: var(--dispe-blu-scuro);
    text-decoration: underline;
}

.piede .colophon {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--dispe-riga);
    font-size: 0.8125rem;
}

@media (min-width: 992px) {
    .menu-piede {
        columns: 3;
    }
}

/* ----------------------------- "non trovata" e cortesia */

.avviso-pagina {
    padding-top: 4rem;
    padding-bottom: 2rem;
}

/* ----------------------------- l'immagine grande di una galleria (tema.js) */

.galleria-grande {
    max-width: 96vw;
    max-height: 96vh;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.galleria-grande::backdrop {
    background: rgba(10, 31, 61, 0.9);
}

.galleria-grande img {
    display: block;
    max-width: 96vw;
    max-height: 88vh;
    margin: 0 auto;
    border-radius: var(--dispe-raggio-piccolo);
}

.galleria-grande-didascalia {
    margin: 0.75rem 0 0;
    color: #fff;
    font-size: 0.9375rem;
    text-align: center;
}

.galleria-grande-chiudi {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--dispe-notte);
    font-size: 1.125rem;
    line-height: 1;
}

.galleria-grande-chiudi:focus-visible {
    border-radius: 50%;
}

/* 12/10/2026 (S12f): sotto un'immagine aperta dal pulsante di una fascia, il collegamento che
   la apre intera in un'altra scheda. C'e' solo li': l'immagine gli lascia il posto. */
.galleria-grande-con-intera img {
    max-height: calc(88vh - 4.25rem);
}

.galleria-grande-intera {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: fit-content;
    max-width: 100%;
    min-height: 2.75rem;
    margin: 0.75rem auto 0;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    background: #fff;
    color: var(--dispe-notte);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
}

.galleria-grande-intera[hidden] {
    display: none;
}

.galleria-grande-intera:hover {
    background: var(--dispe-blu-chiaro);
    color: var(--dispe-notte);
}

.galleria-grande-intera:focus-visible {
    border-radius: 999px;
    outline-color: #fff;
}

/* ----------------------------- dissolvenze
   10/10/2026 (S12b, richiesta di Marcello). Durate e distanza sono in testa al foglio.

   Arrivando su una pagina: cio' che sta fra l'intestazione e il piede entra, con una
   dissolvenza e una salita; l'intestazione e il piede restano fermi. E' un'animazione
   normale del solo foglio di stile, che parte da sola al primo disegno della pagina: per
   questo parte sempre, in ogni browser, e la pagina riceve i clic dal primo istante. Il
   contenuto e' nascosto solo nel primo fotogramma dell'animazione: dove l'animazione non
   parte, e quando e' finita, si vede com'e'. Niente attese: comincia subito.
   10/10/2026 (Marcello: «non e' che veda grandi dissolvenze»): prima qui c'era la regola
   "@view-transition", che faceva sfumare una pagina nell'altra. Tolta: partiva solo con il
   foglio gia' in memoria e solo in alcuni browser, e finche' durava la pagina non riceveva
   clic. Le due insieme si sommerebbero.
   Nella pagina iniziale, dove l'intestazione sta sopra la fascia d'apertura, la fotografia
   resta ferma: una fotografia grande che sfuma sembra una pagina lenta a caricarsi. Entrano
   il titolo che le sta sopra e tutto cio' che viene dopo la fascia.
   La classe "arrivata" la mette tema.js sulla pagina quando l'arrivo e' finito, perche' non
   riparta (dopo una stampa, per esempio), e subito se si torna indietro con il pulsante del
   browser: li' la pagina e' intera dal primo istante. */

@media screen and (prefers-reduced-motion: no-preference) {
    html:not(.arrivata) .intestazione:not(.intestazione-sopra) ~ main,
    html:not(.arrivata) .intestazione-sopra ~ main .apertura-contenuto,
    html:not(.arrivata) .intestazione-sopra ~ main .blocco-largo ~ * {
        animation: arrivo var(--dispe-arrivo) ease-out;
    }

    @keyframes arrivo {
        from {
            opacity: 0;
            transform: translateY(var(--dispe-arrivo-salita));
        }
    }
}

/* Scorrendo: lo stato nascosto lo mette tema.js, e solo a cio' che all'apertura sta sotto il
   bordo della finestra; quando entra, lo script aggiunge la seconda classe e poi le toglie
   tutte e due. Senza JavaScript queste classi non ci sono, e tutto si vede. Si muovono solo
   opacita' e posizione: nulla sposta cio' che sta intorno. In stampa non vale.
   Le schede di una stessa riga entrano una dopo l'altra: lo script scrive su ciascuna il suo
   posto nella riga ("--entra-posto", da 0 a 4), e qui il posto diventa un'attesa.
   "!important" perche' lo stile di un blocco arriva dopo questo foglio, e una scheda con una
   sua transizione (l'ombra al passaggio del mouse) la terrebbe al posto di questa: comparirebbe
   di colpo. Vale solo mentre l'elemento entra: poi le classi non ci sono piu'. */

@media screen and (prefers-reduced-motion: no-preference) {
    .entra:not(.entrato) {
        opacity: 0;
        transform: translateY(var(--dispe-entrata-salita));
    }

    .entra.entrato {
        transition: opacity var(--dispe-entrata) ease-out, transform var(--dispe-entrata) ease-out !important;
        transition-delay: calc(var(--dispe-entrata-scarto) * var(--entra-posto, 0)) !important;
    }
}

/* ----------------------------- chi chiede meno movimento non ne vede */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    .intestazione,
    .piede {
        display: none;
    }
}

/* =============================================================================================
   24/10/2026 (Marcello): l'aspetto ispirato a oppo.com, provato prima nella copia
   Temi/dispe-oppo e poi portato qui. Tutto quello che cambia sta in questa sezione: modelli,
   stili dei blocchi e file restano quelli di prima. Gli stili dei blocchi arrivano nella pagina
   dopo questo foglio, e la Web annida quello di ogni blocco in «.blocco-tipo-N { … }»: percio'
   le regole che li toccano cominciano con «body .blocco» e pesano una classe in piu'.
   L'anteprima dell'editor non carica questo foglio: li' i blocchi restano con l'aspetto di
   prima. Per tornare all'aspetto di prima basta togliere questa sezione.

   Colori: carta bianca, nebbia per le superfici, un solo blu color jeans per pulsanti, icone,
   collegamenti e fascia, un jeans scuro per i titoli grandi e il grafite per quelli piccoli e
   per il testo; l'arancio dell'azienda smorzato, solo come segno.
   Caratteri: la stessa Schibsted Grotesk, ma titoli grandi e leggeri.
   ============================================================================================= */

:root {
    --o-carta: #ffffff;
    --o-nebbia: #f2f3f5;
    --o-nebbia-scura: #e8eaed;
    /* 24/10/2026 (Marcello): niente blu notte. Un solo blu, color jeans, per titoli,
       pulsanti, icone, collegamenti e fascia: fra il blu notte #161c26, troppo tetro, e il #1567d5,
       troppo acceso. Con il bianco sopra il contrasto e' 6,3:1. */
    --o-jeans: #33609e;
    --o-jeans-scuro: #2a5087;
    --o-inchiostro: var(--o-jeans);
    /* 24/10/2026 (Marcello): tutto nello stesso blu era piatto. I titoli grandi in un jeans
       scuro, quelli piccoli di schede e riquadri in grafite; il jeans resta a cio' su cui si
       clicca e alle icone. */
    --o-titoli: #1e3a63;
    --o-titoletti: #24272c;
    --o-grafite: #5f6670;
    --o-blu: var(--o-jeans);
    --o-arancio: #d6612f;

    --dispe-blu: var(--o-blu);
    --dispe-blu-scuro: var(--o-jeans-scuro);
    --dispe-blu-chiaro: var(--o-nebbia);
    --dispe-arancio: var(--o-arancio);
    --dispe-arancio-scuro: #b84f22;
    --dispe-notte: var(--o-titoli);
    --dispe-scuro: #303338;
    --dispe-testo: var(--o-grafite);
    --dispe-fondo: var(--o-carta);
    --dispe-riga: var(--o-nebbia-scura);
    --dispe-riga-forte: var(--o-nebbia-scura);
    --dispe-raggio-grande: 0.5rem;
    --dispe-raggio: 0.375rem;
    --dispe-raggio-piccolo: 0.25rem;

    --dispe-h1: clamp(2.5rem, 1.6rem + 3vw, 4.25rem);
    --dispe-h2: clamp(1.75rem, 1.35rem + 1.4vw, 2.625rem);
    --dispe-h3: 1.375rem;

    --bs-body-color: var(--dispe-scuro);
    --bs-body-bg: var(--o-carta);
    --bs-link-color: var(--dispe-blu-scuro);
    --bs-link-color-rgb: 42, 80, 135;
    --bs-link-hover-color: var(--o-inchiostro);
    --bs-link-hover-color-rgb: 51, 96, 158;
}

body {
    font-size: 1rem;
    background: var(--o-carta);
}

/* I titoli: grandi, leggeri, con le lettere strette. */
body :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
body .blocco :is(h1, h2, h3, h4, h5, h6) {
    color: var(--o-titoli);
    font-weight: 500;
    letter-spacing: -0.02em;
}

body :is(h1, .h1, .pagina-titolo, .servizio-titolo, .prodotto-titolo) {
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.035em;
    word-spacing: 0;
}

body :is(h2, .h2),
body .blocco h2 {
    letter-spacing: -0.028em;
}

/* I titoli dei blocchi hanno una classe propria, che dentro «.blocco-tipo-N» pesa piu' di un tag. */
body .blocco :is(.contenuti-titolo, .invito-titolo, .riquadro-titolo, .contenuti-nome, .incorporato-titolo, .documenti-titolo, .elenchi-titolo, .preventivo-titolo, .candidatura-titolo, .incorniciata-titolo) {
    color: var(--o-titoli);
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* I titoli piccoli, delle schede, dei riquadri e dei gruppi, in grafite. */
body :is(h3, h4, h5, h6, .h3, .h4, .h5, .h6),
body .blocco :is(h3, h4, h5, h6, .riquadro-titolo, .contenuti-nome, .scheda-servizio-titolo, .scheda-prodotto-titolo) {
    color: var(--o-titoletti);
}

body .blocco .apertura-titolo,
body .blocco .fascia-testo :is(h1, h2, h3, h4, h5, h6) {
    color: #fff;
}

body .riassunto {
    color: var(--o-grafite);
    font-size: 1.1875rem;
    font-weight: 400;
}

/* I pulsanti: pillole piccole color inchiostro; l'arancio smorzato per il secondo. */
body .pulsante,
body .blocco .pulsante {
    min-height: 2.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--o-inchiostro);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
}

body .pulsante:hover,
body .pulsante:focus-visible,
body .blocco .pulsante:hover,
body .blocco .pulsante:focus-visible {
    background: var(--o-jeans-scuro);
}

body .pulsante-arancio,
body .blocco .pulsante-arancio {
    background: var(--o-arancio);
}

body .pulsante-arancio:hover,
body .pulsante-arancio:focus-visible,
body .blocco .pulsante-arancio:hover,
body .blocco .pulsante-arancio:focus-visible {
    background: var(--dispe-arancio-scuro);
}

/* L'intestazione: una barra bianca piatta, larga quanto la finestra, con un filo sotto. */
body .intestazione {
    padding-top: 0;
    background: var(--o-carta);
    box-shadow: 0 1px 0 var(--o-nebbia-scura);
}

body .intestazione-sopra {
    position: relative;
}

body .intestazione-barra {
    min-height: 4rem;
    padding: 0.25rem 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body .logo {
    height: 2.5rem;
}

body .marchio-nome {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

body .menu-principale .nav-link {
    padding: 0.5rem 0.875rem;
    border-radius: 0;
    color: var(--o-grafite);
    font-size: 0.875rem;
    font-weight: 400;
}

body .menu-principale a.nav-link:hover,
body .menu-principale button.nav-link:hover,
body .menu-principale .nav-link.show {
    background: none;
    color: var(--o-inchiostro);
}

body .menu-principale .nav-link.active {
    color: var(--o-inchiostro);
    font-weight: 500;
    box-shadow: inset 0 -2px 0 var(--o-arancio);
}

body .menu-principale .dropdown-menu {
    --bs-dropdown-border-radius: 0.375rem;
    --bs-dropdown-link-hover-bg: var(--o-nebbia);
    --bs-dropdown-link-active-bg: var(--o-nebbia);
    --bs-dropdown-link-active-color: var(--o-inchiostro);
    --bs-dropdown-font-size: 0.875rem;
    font-weight: 400;
    box-shadow: 0 0 0 1px var(--o-nebbia-scura), 0 16px 32px -20px rgba(22, 28, 38, 0.35);
}

body .menu-utilita .pulsante {
    min-height: 2.25rem;
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
}

/* Il percorso, piccolo e grigio. */
body .percorso {
    font-size: 0.8125rem;
}

/* La fascia d'apertura: la fotografia da bordo a bordo, un velo leggero e il titolo grande
   e sottile. E' l'unico gesto forte della pagina. */
body .blocco .apertura::after {
    background: linear-gradient(90deg, rgba(42, 80, 135, 0.7) 0%, rgba(42, 80, 135, 0.35) 45%, rgba(42, 80, 135, 0) 75%);
}

body .blocco .apertura-titolo {
    max-width: 12em;
    font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5.25rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    word-spacing: 0;
}

body .blocco .apertura .pulsante {
    background: var(--o-carta);
    color: var(--o-inchiostro);
}

body .blocco .apertura .pulsante:hover,
body .blocco .apertura .pulsante:focus-visible {
    background: var(--o-nebbia);
    color: var(--o-inchiostro);
}

/* Riquadri, schede e inviti: superfici piatte su nebbia, senza bordi ne' ombre. */
body .blocco .riquadro {
    padding: 1.75rem 1.5rem 1.875rem;
    background: var(--o-nebbia);
    box-shadow: none;
}

body .blocco .riquadro .bi {
    justify-content: flex-start;
    width: auto;
    height: auto;
    margin-bottom: 1.5rem;
    background: none;
    color: var(--o-blu);
    font-size: 1.75rem;
}

body .blocco .riquadro-titolo {
    font-weight: 500;
    font-size: var(--titolo-misura, 1.125rem);
}

body .blocco .contenuti-schede .contenuti-voce {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    background: var(--o-nebbia);
    box-shadow: none;
    transition: background-color 0.15s ease;
}

body .blocco .contenuti-schede .contenuti-voce:hover,
body .blocco .contenuti-schede .contenuti-voce:focus-within {
    background: var(--o-nebbia-scura);
    box-shadow: none;
}

body .blocco .contenuti-figura {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 1.375rem 0 0 1.5rem;
    background: none;
    color: var(--o-blu);
    font-size: 1.75rem;
    clip-path: none;
}

body .blocco .contenuti-schede .contenuti-nome {
    color: var(--o-titoletti);
    font-weight: 500;
}

body .blocco .contenuti-vai {
    color: var(--o-inchiostro);
    font-weight: 500;
}

body .blocco .contenuti-vetrina {
    background: var(--o-nebbia);
    color: var(--o-inchiostro);
}

body .blocco .invito {
    background: var(--o-nebbia);
    box-shadow: none;
}

body .blocco .invito-titolo {
    font-weight: 500;
}

/* La fascia a due colori: il blu di mezzo al posto di quello elettrico; la foto resta. */
body .blocco .fascia-riquadri,
body .blocco .fascia-arancio {
    background: var(--o-blu);
}

body .blocco .fascia-testo :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 500;
}

body .blocco .fascia-testo p {
    font-weight: 400;
    opacity: 0.85;
}

/* La colonna dei servizi: un elenco semplice, senza riquadro; la voce aperta ha il segno
   arancio a sinistra. */
body .colonna {
    background: none;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

body .colonna a {
    border-radius: 0;
    color: var(--o-grafite);
}

body .colonna a:hover {
    background: none;
    color: var(--o-inchiostro);
}

body .colonna a.attiva {
    background: none;
    color: var(--o-inchiostro);
    font-weight: 500;
    box-shadow: inset 2px 0 0 var(--o-arancio);
}

/* Il piede su nebbia, con le scritte piccole. */
body .piede {
    background: var(--o-nebbia);
    font-size: 0.875rem;
}

body .menu-piede a {
    color: var(--o-grafite);
}

/* Un grassetto scritto dentro un titolo non lo appesantisce: i titoli restano leggeri. */
body .blocco :is(h1, h2, h3, h4, h5, h6) :is(strong, b) {
    font-weight: inherit;
}

/* Il pulsante bianco della fascia resta bianco. La sua classe e' del blocco «fascia», e il
   foglio del tema non la nomina (TemaDispeTests): lo si raggiunge dalla fascia. */
body .blocco .fascia-riquadri .pulsante {
    background: var(--o-carta);
    color: var(--o-inchiostro);
}

body .blocco .fascia-riquadri .pulsante:hover,
body .blocco .fascia-riquadri .pulsante:focus-visible {
    background: var(--o-nebbia);
    color: var(--o-inchiostro);
}