/* ============================================================================
   GB-MENU.CSS — CSS dei menu offcanvas del sito (desktop + mobile/tablet)
   ============================================================================
   FASE 1 (11/08/2026): spostato QUI dai due Moduli Codice Divi, che ora
   contengono SOLO HTML. Copia IDENTICA del CSS che stava inline:
   nessuna classe rinominata, nessun colore convertito a token
   (la tokenizzazione e' la FASE 4 del piano menu — vedi COSA-RIMANE).

   Enqueue: functions.php -> gb_enqueue_theme_assets(), handle 'gb-menu',
   versionato con filemtime. Ordine dichiarato dopo menu.css (barra di
   navigazione), a cui questo file si affianca.

   NOTA LINTER: questo file e' ESCLUSO dai controlli px/hex del linter,
   come gb-legacy.css e per lo stesso motivo: riproduce IDENTICO un
   pezzo del sito vivo. Quando la fase 4 lo portera' ai token, il
   linter andra' riacceso anche qui.

   Classi aggiunte dal JS (SAFELIST "rimuovi CSS inutilizzato", fase 2):
   .aperto  .attivo  .menu-espanso  .nascondi-per-menu
   ============================================================================ */

/* ============================================================================
   BLOCCO 1 — MENU OFFCANVAS DESKTOP
   (topbar Area Utenti + overlay + Area Utenti, Chi Siamo, Prezzi,
    Sistema Integrato Espanso)
   ============================================================================ */
/* ============================================================
       1) RESET BASE - elementi della topbar e dei menu offcanvas
       ============================================================ */
    .contenitore-intestazione, 
    .contenitore-intestazione *,
    .menu-laterale,
    .menu-laterale * {
        box-sizing: border-box;
        line-height: normal;
        text-transform: none;
        font-family: inherit;
    }

    /* Contenitore della topbar: pulsante "Area Utenti" + telefono allineati a destra */
    .contenitore-intestazione {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 20px;
        padding: 5px 0;
    }

    /* ============================================================
       2) PULSANTE DI APERTURA "AREA UTENTI" nella topbar
       ============================================================ */
    .riquadro-apertura-menu {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        text-decoration: none !important;
    }

    .testo-apertura {
        color: #2B689E !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: color 0.3s ease;
    }
    
    .riquadro-apertura-menu:hover .testo-apertura {
        color: #F07E00 !important;
    }

    /* Dimensione base delle iconcine in topbar */
    .icona-header-base {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px;
        display: block;
        margin: 0 !important;
    }

    /* Omino blu come icona maschera (cambia colore in hover) */
    .icona-utente-blu {
        background-color: #2B689E;
        -webkit-mask-image: url('https://www.softwaregb.it/wp-content/uploads/utente-blu.webp');
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-image: url('https://www.softwaregb.it/wp-content/uploads/utente-blu.webp');
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }
    
    .riquadro-apertura-menu:hover .icona-utente-blu {
        transform: scale(1.1);
        background-color: #F07E00 !important;
    }

    /* ============================================================
       3) OVERLAY scuro a tutta pagina quando un menu è aperto
       ============================================================ */
    .sfondo-oscurante {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 99998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }

    .sfondo-oscurante.attivo {
        opacity: 1;
        visibility: visible;
    }

    /* ============================================================
       4) MENU LATERALI (offcanvas) - regole base condivise da tutti
       ============================================================ */
    .menu-laterale {
        position: fixed;
        top: 0;
        right: -100%;
        width: 30%;
        height: 100vh;
        background-color: #ffffff;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
        z-index: 99999;
        transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        padding: 50px 40px 30px 40px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    /* Stato "aperto": il menu entra da destra */
    .menu-laterale.aperto {
        right: 0;
    }

    /* Larghezze responsive del menu */
    @media (max-width: 1200px) { .menu-laterale { width: 40%; } }
    @media (max-width: 992px) { .menu-laterale { width: 50%; padding: 40px 30px 20px 30px; } }
    @media (max-width: 768px) { .menu-laterale { width: 70%; padding: 40px 25px 20px 25px; } }
    @media (max-width: 480px) { .menu-laterale { width: 100%; padding: 40px 20px 20px 20px; } }

    /* Pulsante X di chiusura in alto a destra di ogni menu */
    .pulsante-chiusura {
        position: absolute;
        top: 15px;
        right: 20px;
        cursor: pointer;
        font-size: 35px;
        color: #424143;
        background: none !important;
        border: none !important;
        line-height: 1;
        font-weight: 300;
        transition: color 0.2s ease, transform 0.2s ease;
    }

    .pulsante-chiusura:hover {
        color: #F07E00;
        transform: scale(1.1) rotate(90deg);
    }

    /* ============================================================
       5) INTESTAZIONE INTERNA di ogni menu (titolo + sottotitolo + descrizione + linea)
       ============================================================ */
    .intestazione-spazio-cliente {
        margin-bottom: 25px;
        text-align: left; 
        width: 100%;
    }

    .titolo-principale {
        color: #2B689E;
        font-size: 28px;
        font-weight: 800;
        margin: 0 0 5px 0;
    }

    .sottotitolo-evidenziato {
        color: #F07E00;
        font-size: 15px;
        font-weight: 700;
        margin: 0 0 2px 0;
        text-transform: uppercase;
    }

    .descrizione-header {
        color: #666666;
        font-size: 14px;
        margin: 0;
    }

    /* Linea arancione separatoria sotto l'intestazione */
    .linea-divisione {
        border: none;
        border-top: 2px solid #F07E00;
        margin: 10px 0 20px 0;
        width: 100%;
    }

    /* ============================================================
       6) VOCI SEMPLICI - usate nei menu "Area Utenti", "Prezzi" (e Chi Siamo in versione spaziosa)
       ============================================================ */
    .titolo-sezione {
        color: #424143;
        font-size: 17px;
        font-weight: 700;
        margin: 20px 0 10px 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .voce-link {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        margin: 0 0 8px 0 !important;
        padding: 4px 0 !important;
        color: #555555 !important;
        text-decoration: none !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        border: none !important;
        background: none !important;
        transition: all 0.2s ease-in-out !important;
    }

    .voce-link:hover {
        color: #F07E00 !important;
        transform: translateX(8px);
    }

    /* Indentazione delle voci-link sotto l'intestazione-categoria (effetto
       "sottovoce") nei menu Area Utenti e Prezzi. */
    #menu-offcanvas .voce-link,
    #menu-offcanvas-prezzi .voce-link {
        padding-left: 18px !important;
    }

    /* Iconcina della singola voce-link (maschera blu, diventa arancione in hover) */
    .icona-voce {
        width: 20px; 
        height: 20px; 
        min-width: 20px;
        background-color: #2B689E; 
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
        transition: background-color 0.2s ease-in-out;
    }

    .voce-link:hover .icona-voce {
        background-color: #F07E00;
    }

    /* Modificatore "spazioso" per Chi Siamo (voci più grandi) */
    .menu-spazioso .voce-link {
        font-size: 17px !important;
        margin: 0 0 12px 0 !important;
        padding: 5px 0 !important;
    }

    .menu-spazioso .icona-voce {
        width: 22px;
        height: 22px;
        min-width: 22px;
    }

    /* Larghezza Chi Siamo (menu-spazioso): stesso pattern dei menu rich per
       ospitare illustrazione orizzontale senza che i testi vadano a capo
       e mantenere la linea arancione allineata agli altri menu */
    .menu-spazioso { width: 38% !important; }
    @media (max-width: 1400px) { .menu-spazioso { width: 42% !important; } }
    @media (max-width: 1200px) { .menu-spazioso { width: 48% !important; } }
    @media (max-width: 992px)  { .menu-spazioso { width: 55% !important; } }
    @media (max-width: 768px)  { .menu-spazioso { width: 75% !important; } }
    @media (max-width: 480px)  { .menu-spazioso { width: 100% !important; } }

    /* Telefono fisso nella topbar */
    .telefono-statico {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #2B689E !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        margin: 0 !important;
    }

    /* ============================================================
       7) MENU "RICH" - condivisi da Sistema Integrato, Sistema Integrato Espanso e Area Software
       Hanno: intestazione con immagine Guido + macrovoci con icone + voci con titolo/sottotitolo
       ============================================================ */

    /* Larghezza specifica più ampia per ospitare l'immagine di Guido */
    .menu-sistema-integrato,
    .menu-sistema-integrato-espanso,
    .menu-area-software {
        width: 38% !important;
    }

    @media (max-width: 1400px) {
        .menu-sistema-integrato,
        .menu-sistema-integrato-espanso,
        .menu-area-software { width: 42% !important; }
    }

    @media (max-width: 1200px) {
        .menu-sistema-integrato,
        .menu-sistema-integrato-espanso,
        .menu-area-software { width: 48% !important; }
    }

    @media (max-width: 992px) {
        .menu-sistema-integrato,
        .menu-sistema-integrato-espanso,
        .menu-area-software { width: 55% !important; }
    }

    @media (max-width: 768px) {
        .menu-sistema-integrato,
        .menu-sistema-integrato-espanso,
        .menu-area-software { width: 75% !important; }
    }

    @media (max-width: 480px) {
        .menu-sistema-integrato,
        .menu-sistema-integrato-espanso,
        .menu-area-software { width: 100% !important; }
    }

    /* Intestazione con immagine Guido in absolute a destra:
       i testi mantengono altezza naturale, la linea arancione resta allineata
       agli altri menu, l'immagine sporge a destra senza modificare il flusso */
    .intestazione-con-guido {
        display: block !important;
        position: relative !important;
        width: 100%;
    }

    .testi-intestazione {
        width: 100%;
        padding-right: 150px;
        box-sizing: border-box;
        text-align: left;
    }

    .immagine-guido-header {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 130px !important;
        height: 130px !important;
        min-width: 130px;
        object-fit: contain;
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
    }

    /* Dimensioni immagine Guido responsive (default usato da tutti i menu rich)
       ⚠ L'immagine cala a ogni scalino: 130 - 105 - 85 - 70.
       Nel menu Sistema Integrato il riquadro dei testi ha un min-height pari
       all'immagine (ci appoggia dentro il pulsante "Scopri di piu'"): se cambi
       una di queste misure, va cambiata anche la sua gemella nel blocco
       ".menu-sistema-integrato-espanso .testi-intestazione", piu' in basso in
       questo file. Non si possono tenere insieme: la' devono stare DOPO la
       regola base, se no i 130px le annullano. */
    @media (max-width: 992px) {
        .testi-intestazione { padding-right: 120px; }
        .immagine-guido-header { width: 105px !important; height: 105px !important; min-width: 105px; }
    }
    @media (max-width: 768px) {
        .testi-intestazione { padding-right: 100px; }
        .immagine-guido-header { width: 85px !important; height: 85px !important; min-width: 85px; }
    }
    @media (max-width: 480px) {
        .testi-intestazione { padding-right: 85px; }
        .immagine-guido-header { width: 70px !important; height: 70px !important; min-width: 70px; }
    }

    /* Gruppo macrovoce (Software, Academy, ecc.) */
    .gruppo-categoria {
        margin-bottom: 22px;
        width: 100%;
        text-align: left !important;
    }

    /* Intestazione della macrovoce: icona grande in box (sfondo arancione tenue) + titolo */
    .intestazione-categoria {
        display: flex;
        align-items: center;
        justify-content: flex-start !important;
        gap: 12px;
        margin: 18px 0 10px 0;
        text-align: left !important;
    }

    .icona-categoria-box {
        width: 54px;
        height: 42px;
        min-width: 54px;
        background-color: #FDF2E5;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .icona-categoria-mask {
        width: 28px;
        height: 28px;
        background-color: #2B689E;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
    }

    .titolo-categoria {
        color: #2B2B2B;
        font-size: 19px;
        font-weight: 800;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1;
        text-align: left !important;
    }

    /* Elenco delle voci ricche (con titolo + sottotitolo) dentro la macrovoce */
    .elenco-voci-rich {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding-left: 4px;
        width: 100%;
        text-align: left !important;
    }

    /* Singola voce ricca: icona + (titolo + sottotitolo) */
    .voce-rich {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px;
        padding: 8px 10px !important;
        border-radius: 10px;
        text-decoration: none !important;
        color: inherit !important;
        background: none !important;
        border: none !important;
        margin: 0 !important;
        text-align: left !important;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .voce-rich:hover {
        background-color: #F8F9FB;
        transform: translateX(4px);
    }

    /* Box icona voce: SENZA sfondo (icona "libera") */
    .icona-voce-box {
        width: 38px;
        height: 38px;
        min-width: 38px;
        background: none !important;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Icona maschera della voce: BLU di default, ARANCIO in hover (come voci-link) */
    .icona-voce-mask {
        width: 22px;
        height: 22px;
        background-color: #2B689E;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
        transition: background-color 0.2s ease;
    }

    .voce-rich:hover .icona-voce-mask {
        background-color: #F07E00;
    }

    /* Contenitore testi della voce ricca (titolo + sottotitolo in colonna) */
    .contenuto-voce {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 1px;
        flex: 1 1 auto;
        min-width: 0;
        text-align: left !important;
    }

    /* Titolo voce: NERO di default, ARANCIO in hover */
    .titolo-voce {
        display: block !important;
        color: #2B2B2B !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        width: 100%;
        transition: color 0.2s ease;
    }

    .sottotitolo-voce {
        display: block !important;
        color: #8A8A8A !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        width: 100%;
    }

    .voce-rich:hover .titolo-voce {
        color: #F07E00 !important;
    }

    /* Voce standalone (al di fuori delle macrovoci) - non usata al momento */
    .voce-rich-standalone {
        margin-top: 18px !important;
        padding: 10px !important;
        background-color: var(--gb-grigio-05) !important;   /* era #FAFBFC */
    }

    /* Bottone "Scopri tutte le soluzioni" - leggero, centrato sotto le sezioni */
    .bottone-scopri-soluzioni {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        align-self: center;
        width: fit-content;
        max-width: 100%;
        margin: 18px auto 6px auto !important;
        padding: 9px 20px !important;
        border-radius: 999px;
        border: 1.5px solid #F07E00 !important;
        background-color: transparent !important;
        color: #F07E00 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        line-height: 1 !important;
        transition: all 0.25s ease;
    }

    .bottone-scopri-soluzioni:hover {
        background-color: #F07E00 !important;
        color: #FFFFFF !important;
    }

    .bottone-scopri-soluzioni .freccia-bottone {
        font-size: 14px;
        line-height: 1;
        transition: transform 0.25s ease;
        display: inline-block;
    }

    .bottone-scopri-soluzioni:hover .freccia-bottone {
        transform: translateX(4px);
    }

    /* ============================================================
       8) CORPO COMPATTO per i menu rich con tante macrovoci
       (Sistema Integrato Espanso e Area Software hanno 4 macrovoci,
        servono spazi verticali più contenuti nel CORPO per stare bene in pagina)
       
       La TESTATA (intestazione + immagine Guido + linea arancione) resta
       IDENTICA a quella del Sistema Integrato classico - nessuna modifica.
       ============================================================ */
    .menu-sistema-integrato-espanso .gruppo-categoria,
    .menu-area-software .gruppo-categoria {
        margin-bottom: 12px;
    }

    .menu-sistema-integrato-espanso .intestazione-categoria,
    .menu-area-software .intestazione-categoria {
        margin: 10px 0 6px 0;
    }

    .menu-sistema-integrato-espanso .voce-rich,
    .menu-area-software .voce-rich {
        padding: 6px 10px !important;
    }

    .menu-sistema-integrato-espanso .bottone-scopri-soluzioni,
    .menu-area-software .bottone-scopri-soluzioni {
        margin: 10px auto 4px auto !important;
    }

    /* ============================================================
       9) INTESTAZIONE CON ILLUSTRAZIONE ORIZZONTALE (es. Chi Siamo)
       Pattern identico a "intestazione-con-guido" ma adattato per
       immagini orizzontali (proporzione larghezza > altezza), come
       l'illustrazione della sede aziendale.
       
       Dimensioni: 230px wide su risoluzioni grandi (>1680px),
       200px wide da 1680 in giù (stabile su tutte le breakpoint),
       riduzione finale solo all'ultima media query (<=480 mobile).
       ============================================================ */
    .intestazione-con-illustrazione {
        display: block !important;
        position: relative !important;
        width: 100%;
    }

    .testi-intestazione-illustrazione {
        width: 100%;
        padding-right: 250px;
        box-sizing: border-box;
        text-align: left;
    }

    .immagine-illustrazione-header {
        position: absolute !important;
        top: 30px !important;
        right: 0 !important;
        width: 230px !important;
        height: auto !important;
        max-height: 110px;
        object-fit: contain;
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
    }

    /* Da 1680px in giù: immagine a 200px (stabile fino a 480px) */
    @media (max-width: 1680px) {
        .testi-intestazione-illustrazione { padding-right: 220px; }
        .immagine-illustrazione-header { width: 200px !important; max-height: 95px; }
    }

    /* Ultima media query (mobile): riduzione finale */
    @media (max-width: 480px) {
        .testi-intestazione-illustrazione { padding-right: 130px; }
        .immagine-illustrazione-header { width: 115px !important; max-height: 60px; top: 18px !important; }
    }

    /* ============================================================
       10) TESTATA "SISTEMA INTEGRATO" CLICCABILE
       Struttura a 3 righe:
           SISTEMA INTEGRATO  (blu 800, cliccabile) + freccia diagonale
           POTENZIATO DA GUIDO IA  (.sottotitolo-evidenziato: arancio)
           Software, Banca Dati evoluta con IA e Academy  (.descrizione-header)
       Vive SOLO dentro .menu-sistema-integrato-espanso: nessuna regola
       tocca gli altri menu offcanvas.
       ============================================================ */

    /* ---------- KNOB: valori regolabili della testata ---------- */
    .menu-sistema-integrato-espanso {
        --si-blu:                 #2B689E;  /* blu logo */
        --si-arancio:             #F07E00;  /* arancio brand */
        --si-sfondo-hover:        #F8F9FB;  /* tinta di hover, la stessa delle voci-rich */
        --si-dim-marchio:         26px;     /* corpo di "SISTEMA INTEGRATO" */
        --si-dim-freccia:         0.66;     /* freccia = marchio x questo fattore */
        --si-spostamento:         4px;      /* movimento orizzontale del blocco in hover */
        --si-corsa-freccia-x:     5px;      /* corsa diagonale della freccia: asse X */
        --si-corsa-freccia-y:     5px;      /* corsa diagonale della freccia: asse Y (verso l'alto) */
        --si-rientro-testo:       66px;     /* 54px box icona + 12px gap: rientro della descrizione */
        --si-molla:               cubic-bezier(.34,1.56,.64,1);
    }

    /* Riga marchio cliccabile: BOX ICONA puzzle + colonna testi + freccia.
       Il box e' lo stesso .icona-categoria-box usato dalle macrovoci sotto,
       cosi' le icone restano incolonnate lungo tutto il menu (come su mobile).
       margin-left negativo + padding-left pari: la tinta di hover respira
       senza spostare il box rispetto alle icone delle macrovoci. */
    .menu-sistema-integrato-espanso .collegamento-sistema-integrato {
        display: inline-flex !important;
        align-items: center;
        gap: 12px;
        width: fit-content;
        max-width: 100%;
        margin: 0 0 4px -4px !important;
        padding: 6px 14px 6px 4px !important;
        border: none !important;
        border-radius: 10px;
        background: none !important;
        text-decoration: none !important;
        transition: background-color 0.2s ease, transform 0.25s var(--si-molla);
    }

    .menu-sistema-integrato-espanso .collegamento-sistema-integrato:hover {
        background-color: var(--si-sfondo-hover);
        transform: translateX(var(--si-spostamento));
    }

    /* Colonna testi: marchio sopra, claim arancione sotto */
    .menu-sistema-integrato-espanso .contenuto-sistema-integrato {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
    }

    /* L'icona puzzle vira all'arancio in hover, come tutte le altre voci */
    .menu-sistema-integrato-espanso .collegamento-sistema-integrato .icona-categoria-mask {
        transition: background-color 0.2s ease;
    }

    .menu-sistema-integrato-espanso .collegamento-sistema-integrato:hover .icona-categoria-mask {
        background-color: var(--si-arancio);
    }

    .menu-sistema-integrato-espanso .etichetta-sistema-integrato {
        color: var(--si-blu);
        font-size: var(--si-dim-marchio);
        font-weight: 800;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        line-height: 1.05;
        margin: 0 !important;
        padding: 0 !important;
        transition: color 0.25s ease;
    }

    .menu-sistema-integrato-espanso .collegamento-sistema-integrato:hover .etichetta-sistema-integrato {
        color: var(--si-arancio);
    }

    /* Freccia diagonale verso il vertice alto-destro.
       In hover parte in diagonale su/destra, con l'easing a molla del brand. */
    .menu-sistema-integrato-espanso .freccia-sistema-integrato {
        color: var(--si-arancio);
        font-size: calc(var(--si-dim-marchio) * var(--si-dim-freccia));
        font-weight: 700;
        line-height: 1;
        display: inline-block;
        flex-shrink: 0;
        transition: transform 0.25s var(--si-molla);
    }

    .menu-sistema-integrato-espanso .collegamento-sistema-integrato:hover .freccia-sistema-integrato {
        transform: translate(var(--si-corsa-freccia-x), calc(var(--si-corsa-freccia-y) * -1));
    }

    /* Riga arancione: eredita tutto da .sottotitolo-evidenziato, qui azzera
       solo i margini perche' ora vive dentro la colonna del link */
    .menu-sistema-integrato-espanso .claim-sistema-integrato {
        margin: 0 !important;
    }

    /* La descrizione della triade rientra per allinearsi al TESTO, non al box */
    .menu-sistema-integrato-espanso .descrizione-sistema-integrato {
        padding-left: var(--si-rientro-testo);
        margin: 2px 0 0 0;
    }

    /* PULSANTE "Scopri di piu'" - doppione del marchio cliccabile in testata.
       PERCHE' ESISTE: il marchio sopra e' gia' un link, ma non si vede che lo e';
       la freccia diagonale da sola non basta a farlo capire. Stessa destinazione.

       DOVE STA: sotto la descrizione, con lo stesso rientro, cosi' la colonna di
       testo resta una sola (icona | testi) e il pulsante non sembra appeso.

       PERCHE' NON SPAGINA, e come ci si e' arrivati (17/09/2026, MISURATO su un
       render vero, non a occhio): i testi della testata sono alti ~100px,
       l'immagine di Guido 130px. Quei 30px di differenza Guido li prende dal
       MARGINE - 25px sotto l'intestazione piu' 10px sopra la linea - ed e' per
       questo che nell'originale sembra appoggiato alla linea arancione.
       Il pulsante si infila in quello stesso margine: alto 26px, e il
       margin-bottom dell'intestazione va a 0 (regola qui sopra). Cosi' la linea
       scende di una decina di pixel invece di 35, e Guido resta attaccato.
       ⚠ DUE COSE DA NON FARE, perche' e' gia' successo: rimettere il
       margin-bottom all'intestazione, e dare al pulsante un margin-top grande.
       Tutte e due rifanno scendere la linea e staccano Guido. */
    /* Il pulsante si prende il margine che c'era gia' sotto l'intestazione (25px)
       invece di aggiungersi ad esso: e' questo che tiene l'immagine di Guido
       attaccata alla linea arancione. Misurato su render reale il 17/09/2026:
       senza questa riga la linea scendeva di 35px e Guido restava su, staccato. */
    .menu-sistema-integrato-espanso .intestazione-spazio-cliente {
        margin-bottom: 0;
    }

    .menu-sistema-integrato-espanso .pulsante-sistema-integrato {
        margin: 4px 0 0 var(--si-rientro-testo);
        display: inline-flex;
        align-items: center;
        width: fit-content;
        padding: 0 14px;
        height: 26px;
        line-height: 26px;
        border-radius: 13px;
        background: var(--si-blu);
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color 0.25s ease;
    }
    .menu-sistema-integrato-espanso .pulsante-sistema-integrato:hover {
        background: #F07E00;
        color: #ffffff;
    }
    .menu-sistema-integrato-espanso .pulsante-sistema-integrato:focus-visible {
        outline: 2px solid #F07E00;
        outline-offset: 2px;
    }

    /* Adattamento dimensioni testata sulle breakpoint Divi */
    @media (max-width: 992px) {
        .menu-sistema-integrato-espanso { --si-dim-marchio: 23px; }
    }
    @media (max-width: 480px) {
        .menu-sistema-integrato-espanso { --si-dim-marchio: 20px; }
    }

    /* ============================================================
       11) MACROVOCI CLICCABILI
       Classe modificatrice da aggiungere SOLO dove la macrovoce deve
       essere un link. .intestazione-categoria da sola resta invariata
       (Area Utenti e Prezzi non vengono toccati).
       Valori scritti in chiaro e non con le variabili --si-*: così la
       classe resta riutilizzabile anche fuori dal menu espanso.
       ============================================================ */
    a.intestazione-categoria-link {
        border-radius: 10px;
        padding: 4px 12px 4px 4px !important;
        margin-left: -4px;
        cursor: pointer;
        text-decoration: none !important;
        color: inherit !important;
        background: none !important;
        border: none !important;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    a.intestazione-categoria-link:hover {
        background-color: #F8F9FB;
        transform: translateX(4px);
    }

    a.intestazione-categoria-link .titolo-categoria {
        transition: color 0.2s ease;
    }

    a.intestazione-categoria-link .icona-categoria-mask {
        transition: background-color 0.2s ease;
    }

    a.intestazione-categoria-link:hover .titolo-categoria {
        color: #F07E00 !important;
    }

    a.intestazione-categoria-link:hover .icona-categoria-mask {
        background-color: #F07E00;
    }

    /* Focus tastiera visibile (accessibilità) */
    a.intestazione-categoria-link:focus-visible,
    .menu-sistema-integrato-espanso .collegamento-sistema-integrato:focus-visible {
        outline: 2px solid #F07E00;
        outline-offset: 3px;
        border-radius: 6px;
    }

/* ============================================================================
   BLOCCO 2 — MENU MOBILE / TABLET
   (header icone + menu omino "Area Utenti" + menu hamburger a fisarmonica)
   ============================================================================ */
/* ====================================================
       1. RESET E STILI GLOBALI (HEADER MOBILE E OVERLAY)
       ==================================================== */
    .mobile-header-icone-wrapper, 
    #contenitore-omino-mobile, 
    #contenitore-contenuto-mobile,
    #contenitore-omino-mobile *, 
    #contenitore-contenuto-mobile * {
        box-sizing: border-box;
        line-height: normal;
        font-family: inherit;
    }

    .mobile-header-icone-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end; 
        gap: 15px; 
        padding: 10px;
    }

    .gb-header-icon {
        width: 28px !important; 
        height: 28px !important;
        display: block;
        margin: 0 !important;
    }

    /* Overlay condiviso per entrambi i menu */
    .sovrapposto {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 0%; 
        z-index: 99999;
        overflow-x: hidden;
        transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        background-color: #ffffff !important; /* SFONDO BIANCO ASSOLUTO PER ENTRAMBI */
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
    }

    .sovrapposto-contenuto {
        position: relative;
        width: 100%;
        height: 100%;
    }

    /* Pulsante chiusura (X) CONDIVISO e IDENTICO per entrambi */
    .pulsante-chiusura-mobile {
        position: absolute;
        top: 0px; 
        right: 10px; 
        cursor: pointer;
        font-size: 55px !important; 
        color: #424143 !important;
        background: none !important;
        border: none !important;
        line-height: 1 !important;
        font-weight: 300 !important;
        text-decoration: none !important;
        z-index: 100000;
        transition: color 0.2s ease;
        padding: 0 !important;
        margin: 0 !important;
    }

    .pulsante-chiusura-mobile:active, 
    .pulsante-chiusura-mobile:focus {
        color: #F07E00 !important;
    }

    /* Stile maschera icone CONDIVISO per entrambi i menu */
    .icona-voce-mobile {
        width: 24px; height: 24px; min-width: 24px; background-color: #2B689E; 
        -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
        mask-size: contain; mask-position: center; mask-repeat: no-repeat;
        transition: background-color 0.2s ease-in-out;
    }

    /* ====================================================
       2. STILI SPECIFICI: MENU OMINO MOBILE E HAMBURGER INT.
       ==================================================== */
    #menu-softwaregb-omino,
    #menu-softwaregb-mobile {
        padding: 15px 25px 40px 25px !important; /* Entrambi partono dalla stessa altezza */
        text-align: left;
        display: flex;
        flex-direction: column;
    }

    .intestazione-spazio-cliente-mobile {
        margin-top: 0; margin-bottom: 25px; text-align: left; width: 100%; padding-right: 40px; 
    }

    .titolo-principale-mobile { color: #2B689E; font-size: 26px; font-weight: 800; margin: 0 0 5px 0; line-height: 1.2; }
    .linea-divisione-mobile { border: none; border-top: 2px solid #F07E00; margin: 10px 0 25px 0; width: 100%; }
    .titolo-sezione-mobile { color: #424143; font-size: 18px; font-weight: 700; margin: 20px 0 15px 0; }

    .voce-link-mobile {
        display: flex !important; align-items: center; justify-content: flex-start; gap: 15px; 
        margin: 0 0 15px 0 !important; padding: 5px 0 !important;
        color: #555555 !important; text-decoration: none !important; font-size: 17px !important; font-weight: 500 !important;
        background: transparent !important;
    }

    .voce-link-mobile:active, .voce-link-mobile:focus { color: #F07E00 !important; }
    .voce-link-mobile:active .icona-voce-mobile, .voce-link-mobile:focus .icona-voce-mobile { background-color: #F07E00; }

    /* ====================================================
       3. STILI SPECIFICI: MENU HAMBURGER (NAVIGAZIONE) 
       ==================================================== */
    #menu-softwaregb-mobile {
        background: #ffffff !important; 
    }

    .contenitore-blocco-dei-links {
        border-bottom: 1px solid #eaeaea; 
        background: transparent !important; 
    }

    /* Voci principali Hamburger: icona + testo + freccia */
    .contenitore-blocco-dei-links > a.attivato {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 15px; 
        width: 100%;
        padding: 15px 0 !important;
        font-size: 17px !important;
        font-weight: 700 !important; 
        color: #424143 !important;
        text-decoration: none !important;
        background: transparent !important;
        transition: color 0.2s ease;
    }

    .contenitore-blocco-dei-links > a.attivato .testo-voce {
        flex-grow: 1; 
        text-transform: uppercase;
    }

    .contenitore-blocco-dei-links > a.attivato:active,
    .contenitore-blocco-dei-links > a.attivato:focus {
        color: #F07E00 !important;
    }
    
    .contenitore-blocco-dei-links > a.attivato:active .icona-voce-mobile,
    .contenitore-blocco-dei-links > a.attivato:focus .icona-voce-mobile {
        background-color: #F07E00; 
    }

    /* Freccina a destra: ora più chiara e animata */
    i.freccia {
        border: solid #424143;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 5px; /* Un po' più grande per farla vedere meglio */
        transform: rotate(45deg); /* Di default punta in GIÙ */
        transition: transform 0.3s ease, border-color 0.2s ease;
        margin-left: auto; 
    }

    /* ====== STATO ESPANSO ====== 
       Quando il menu è aperto, questa classe viene aggiunta dal JS 
       per evidenziare permanentemente la voce aperta */
    .contenitore-blocco-dei-links.menu-espanso > a.attivato {
        color: #F07E00 !important; 
    }
    .contenitore-blocco-dei-links.menu-espanso > a.attivato .icona-voce-mobile {
        background-color: #F07E00; 
    }
    .contenitore-blocco-dei-links.menu-espanso > a.attivato i.freccia {
        border-color: #F07E00;
        transform: rotate(-135deg) translate(-2px, -2px); /* Ruota verso l'ALTO */
    }

    /* Sottovoci (i link interni espandibili) */
    [id^="blocco-di-link-"] {
        display: none; 
        padding: 0 0 15px 39px !important; 
        background-color: transparent !important;
    }

    [id^="blocco-di-link-"] a {
        display: flex !important;
        align-items: center;
        padding: 12px 0 !important;
        font-size: 16px !important; 
        color: #555555 !important; 
        font-weight: 500 !important; 
        text-decoration: none !important;
        background: transparent !important;
        border-bottom: 1px dotted #eaeaea !important; 
        transition: color 0.2s ease-in-out !important;
    }
    
    [id^="blocco-di-link-"] a:last-child {
        border-bottom: none !important; 
    }

    [id^="blocco-di-link-"] a:active,
    [id^="blocco-di-link-"] a:focus {
        color: #F07E00 !important;
    }

    [id^="blocco-di-link-"] a span {
        color: #F07E00; 
        font-weight: bold;
        margin-right: 8px;
        font-size: 20px;
        line-height: 0;
    }

    /* Bottoni finali */
    .prova-gratuita-3, .richiedi-info-3 {
        display: block !important;
        text-align: center !important;
        padding: 15px 0 !important;
        margin-top: 15px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        text-decoration: none !important;
        border-radius: 5px;
    }

    .prova-gratuita-3 {
        background-color: #F07E00 !important;
        color: #ffffff !important;
        margin-top: 40px !important; 
    }

    .richiedi-info-3 {
        background-color: #2B689E !important;
        color: #ffffff !important;
        margin-top: 35px !important;
    }

    /* ====================================================
       4. BLOCCO "LE NOSTRE SOLUZIONI" - struttura rich come desktop
          (categorie sempre aperte con icona + titolo + voci rich)

          NOTA SPECIFICITÀ: le regole bullet di
          [id^="blocco-di-link-"] a span hanno specificità (0,1,2)
          e applicano color #F07E00, font-size 20px, font-weight bold.
          Per neutralizzarle qui prefissiamo tutte le regole con
          #blocco-di-link-soluzioni (specificità con ID > attribute),
          così i nostri colori e dimensioni vincono.
       ==================================================== */

    /* Reset padding del contenitore */
    #blocco-di-link-soluzioni {
        padding: 10px 0 20px 0 !important;
    }

    /* Voce rich (link "ricco" icona + titolo + sottotitolo) */
    #blocco-di-link-soluzioni a.voce-rich-mobile {
        display: flex !important;
        align-items: center;
        gap: 14px;
        padding: 8px 10px !important;
        margin: 0 !important;
        border: none !important;
        border-bottom: none !important;
        border-radius: 10px;
        color: #424143 !important;
        text-decoration: none !important;
        background: transparent !important;
        font-weight: 500 !important;
    }

    /* Gruppo categoria (Software per Studi, ecc.) */
    .gruppo-categoria-mobile {
        margin-bottom: 22px;
    }

    /* Intestazione categoria: icona grande in box + titolo - identico al desktop */
    .intestazione-categoria-mobile {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 18px 0 10px 0;
    }

    /* Box icona categoria - identico al desktop (sfondo giallino chiaro) */
    .icona-categoria-mobile-box {
        width: 54px;
        height: 42px;
        min-width: 54px;
        background-color: #FDF2E5;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Mask icona categoria - identica al desktop */
    .icona-categoria-mobile-mask {
        width: 28px;
        height: 28px;
        background-color: #2B689E;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
    }

    /* Titolo categoria - identico al desktop */
    .titolo-categoria-mobile {
        color: #2B2B2B;
        font-size: 19px;
        font-weight: 800;
        margin: 0;
        line-height: 1;
    }

    /* Elenco voci rich sotto ogni categoria */
    .elenco-voci-rich-mobile {
        display: flex;
        flex-direction: column;
        padding-left: 4px;
    }

    /* Box icona voce rich - identico al desktop (38x38, NO sfondo) */
    .icona-voce-rich-mobile-box {
        width: 38px;
        height: 38px;
        min-width: 38px;
        background: none;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .icona-voce-rich-mobile-mask {
        width: 22px;
        height: 22px;
        background-color: #2B689E;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
        transition: background-color 0.2s ease-in-out;
    }

    /* Contenitore testi (titolo + sottotitolo impilati) */
    .contenuto-voce-rich-mobile {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        min-width: 0;
    }

    /* TITOLO voce rich - specificità via ID per battere [id^=...] a span (#F07E00) */
    #blocco-di-link-soluzioni .titolo-voce-rich-mobile {
        color: #2B2B2B;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
        margin: 0;
    }

    /* SOTTOTITOLO voce rich - colore grigio chiaro (diverso dal titolo) */
    #blocco-di-link-soluzioni .sottotitolo-voce-rich-mobile {
        color: #8A8A8A;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.3;
        margin: 0;
    }

    /* Stati attivi voce rich (specificità via ID, batte i selettori bullet) */
    #blocco-di-link-soluzioni a.voce-rich-mobile:active .titolo-voce-rich-mobile,
    #blocco-di-link-soluzioni a.voce-rich-mobile:focus .titolo-voce-rich-mobile {
        color: #F07E00;
    }
    #blocco-di-link-soluzioni a.voce-rich-mobile:active .icona-voce-rich-mobile-mask,
    #blocco-di-link-soluzioni a.voce-rich-mobile:focus .icona-voce-rich-mobile-mask {
        background-color: #F07E00;
    }

    /* ----------------------------------------------------
       BOTTONE CTA "Scopri tutte le soluzioni"
       Aspetto outline arancione identico al desktop:
       pillola trasparente, bordo arancione, testo arancione,
       fill arancione su :active/:focus
       ---------------------------------------------------- */
    #blocco-di-link-soluzioni a.bottone-scopri-mobile {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: fit-content;
        max-width: 100%;
        margin: 18px auto 6px auto !important;
        padding: 10px 22px !important;
        border: 1.5px solid #F07E00 !important;
        border-bottom: 1.5px solid #F07E00 !important;
        border-radius: 999px !important;
        background-color: transparent !important;
        color: #F07E00 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        line-height: 1 !important;
        transition: all 0.25s ease;
    }

    #blocco-di-link-soluzioni a.bottone-scopri-mobile:active,
    #blocco-di-link-soluzioni a.bottone-scopri-mobile:focus {
        background-color: #F07E00 !important;
        color: #ffffff !important;
    }

    /* Reset bullet style sugli span DENTRO il bottone (testo + freccia)
       per ereditare colore arancione/bianco e dimensione corretta */
    #blocco-di-link-soluzioni a.bottone-scopri-mobile span {
        color: inherit;
        font-weight: inherit;
        margin-right: 0;
        font-size: inherit;
        line-height: normal;
    }

    #blocco-di-link-soluzioni a.bottone-scopri-mobile .freccia-bottone-mobile {
        font-size: 14px;
        line-height: 1;
        transition: transform 0.25s ease;
        display: inline-block;
    }

    #blocco-di-link-soluzioni a.bottone-scopri-mobile:active .freccia-bottone-mobile,
    #blocco-di-link-soluzioni a.bottone-scopri-mobile:focus .freccia-bottone-mobile {
        transform: translateX(4px);
    }

    /* ====================================================
       5. BLOCCHI "PREZZI" e "CHI SIAMO" - voci link semplici
          con icona + testo (no sottotitolo).
          Pattern: replica .voce-link del desktop dentro un
          blocco di link espandibile.
       ==================================================== */

    /* Reset del padding di default ereditato da [id^="blocco-di-link-"]
       per i due blocchi rich con icone */
    #blocco-di-link-prezzi,
    #blocco-di-link-chisiamo {
        padding: 10px 0 20px 0 !important;
    }

    /* Voce link icona+testo dentro blocco espandibile.
       Selettore con specificità maggiore di [id^="blocco-di-link-"] a
       per neutralizzare bullet/border-bottom/padding di default */
    [id^="blocco-di-link-"] a.voce-link-blocco-mobile {
        display: flex !important;
        align-items: center;
        gap: 12px;
        margin: 0 !important;
        padding: 10px 0 !important;
        color: #555555 !important;
        text-decoration: none !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        border-bottom: none !important;
        background: transparent !important;
    }

    /* Reset del bullet "•" arancione */
    [id^="blocco-di-link-"] a.voce-link-blocco-mobile span {
        color: inherit;
        font-weight: inherit;
        margin-right: 0;
        font-size: inherit;
        line-height: normal;
    }

    /* Icona della voce link (22x22 blu, come desktop) */
    .icona-voce-link-blocco-mobile {
        width: 22px;
        height: 22px;
        min-width: 22px;
        background-color: #2B689E;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
        transition: background-color 0.2s ease-in-out;
    }

    /* Stato pressione/focus voce link */
    .voce-link-blocco-mobile:active,
    .voce-link-blocco-mobile:focus {
        color: #F07E00 !important;
    }
    .voce-link-blocco-mobile:active .icona-voce-link-blocco-mobile,
    .voce-link-blocco-mobile:focus .icona-voce-link-blocco-mobile {
        background-color: #F07E00;
    }

    /* ====================================================
       6. HEADER RICH per il menu Area Utenti (omino)
          Replica il desktop: sottotitolo arancione + descrizione
       ==================================================== */
    .sottotitolo-evidenziato-mobile {
        color: #F07E00;
        font-size: 14px;
        font-weight: 700;
        margin: 0 0 4px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .descrizione-header-mobile {
        color: #666666;
        font-size: 13px;
        margin: 0;
        line-height: 1.3;
    }

    /* ====================================================
       7. INDENTAZIONE SOTTOVOCI con icona (replica desktop)
          - Voci-link sotto intestazione-categoria nei menu
            Area Utenti e PREZZI: padding-left 18px
          - Voci-rich dentro "Le nostre soluzioni" hanno già
            padding-left 4px in .elenco-voci-rich-mobile (1:1 con desktop)
       ==================================================== */
    #menu-softwaregb-omino .voce-link-mobile,
    #blocco-di-link-prezzi a.voce-link-blocco-mobile {
        padding-left: 18px !important;
    }

    /* ====================================================
       8. VOCE PILLAR "SISTEMA INTEGRATO" (in testa a Le nostre soluzioni)
          + MACROVOCI CLICCABILI

          Tutte le regole sono prefissate con #blocco-di-link-soluzioni:
          serve l'ID per battere [id^="blocco-di-link-"] a (0,1,1) e il
          bullet [id^="blocco-di-link-"] a span (0,1,1).
          Sugli <span> si usa la forma completa
          #blocco-di-link-soluzioni a.CLASSE span.CLASSE  ->  (1,2,1)
          altrimenti il bullet arancione 20px bold torna a vincere.
       ==================================================== */

    /* ---------- KNOB: valori regolabili della voce pillar ---------- */
    #blocco-di-link-soluzioni {
        --sim-blu:            #2B689E;  /* blu logo */
        --sim-arancio:        #F07E00;  /* arancio brand */
        --sim-dim-marchio:    20px;     /* corpo di "SISTEMA INTEGRATO" */
        --sim-dim-claim:      12px;     /* corpo del claim arancione */
        --sim-dim-freccia:    18px;     /* corpo della freccia diagonale */
        --sim-lato-chevron:   4px;      /* meta' lato del chevron delle macrovoci */
        --sim-spessore-chevron: 2px;    /* spessore del tratto del chevron */
        --sim-filo:           #eaeaea;  /* colore della hairline */
    }

    /* Riga pillar: icona puzzle + testi + freccia diagonale */
    #blocco-di-link-soluzioni a.voce-sistema-integrato-mobile {
        display: flex !important;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin: 0 !important;
        padding: 6px 0 !important;
        border: none !important;
        border-bottom: none !important;
        border-radius: 10px;
        background: transparent !important;
        text-decoration: none !important;
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
    }

    /* Colonna dei testi della voce pillar */
    .contenuto-sistema-integrato-mobile {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        min-width: 0;
        gap: 2px;
    }

    /* Marchio: forma completa (1,2,1) per battere il bullet arancione */
    #blocco-di-link-soluzioni a.voce-sistema-integrato-mobile span.titolo-sistema-integrato-mobile {
        color: var(--sim-blu);
        font-size: var(--sim-dim-marchio);
        font-weight: 800;
        letter-spacing: 0.3px;
        line-height: 1.1;
        margin: 0;
        text-transform: uppercase;
        transition: color 0.2s ease;
    }

    /* Claim arancione sotto il marchio */
    #blocco-di-link-soluzioni a.voce-sistema-integrato-mobile span.claim-sistema-integrato-mobile {
        color: var(--sim-arancio);
        font-size: var(--sim-dim-claim);
        font-weight: 700;
        letter-spacing: 0.5px;
        line-height: 1.3;
        margin: 0;
        text-transform: uppercase;
    }

    /* Freccia diagonale verso il vertice alto-destro, spinta a destra */
    #blocco-di-link-soluzioni a.voce-sistema-integrato-mobile span.freccia-sistema-integrato-mobile {
        color: var(--sim-arancio);
        font-size: var(--sim-dim-freccia);
        font-weight: 700;
        line-height: 1;
        margin: 0 0 0 auto;
        flex-shrink: 0;
    }

    /* L'icona puzzle della voce pillar deve poter virare all'arancio */
    #blocco-di-link-soluzioni a.voce-sistema-integrato-mobile .icona-categoria-mobile-mask {
        transition: background-color 0.2s ease;
    }

    /* Stato pressione/focus della voce pillar */
    #blocco-di-link-soluzioni a.voce-sistema-integrato-mobile:active span.titolo-sistema-integrato-mobile,
    #blocco-di-link-soluzioni a.voce-sistema-integrato-mobile:focus span.titolo-sistema-integrato-mobile {
        color: var(--sim-arancio);
    }
    #blocco-di-link-soluzioni a.voce-sistema-integrato-mobile:active .icona-categoria-mobile-mask,
    #blocco-di-link-soluzioni a.voce-sistema-integrato-mobile:focus .icona-categoria-mobile-mask {
        background-color: var(--sim-arancio);
    }

    /* Hairline che stacca la voce pillar dalle macrovoci */
    #blocco-di-link-soluzioni hr.separatore-sistema-integrato-mobile {
        border: none;
        border-top: 1px solid var(--sim-filo);
        margin: 12px 0 0 0;
        width: 100%;
    }

    /* ---------- MACROVOCI CLICCABILI ----------
       La classe .intestazione-categoria-mobile-link va aggiunta SOLO alle
       intestazioni che devono essere link. Quelle di Area Utenti e Prezzi
       restano <div> e non vengono toccate. */
    #blocco-di-link-soluzioni a.intestazione-categoria-mobile-link {
        display: flex !important;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin: 18px 0 10px 0 !important;
        padding: 4px 0 !important;
        border: none !important;
        border-bottom: none !important;
        border-radius: 10px;
        background: transparent !important;
        text-decoration: none !important;
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
    }

    #blocco-di-link-soluzioni a.intestazione-categoria-mobile-link .titolo-categoria-mobile {
        transition: color 0.2s ease;
    }

    #blocco-di-link-soluzioni a.intestazione-categoria-mobile-link .icona-categoria-mobile-mask {
        transition: background-color 0.2s ease;
    }

    #blocco-di-link-soluzioni a.intestazione-categoria-mobile-link:active .titolo-categoria-mobile,
    #blocco-di-link-soluzioni a.intestazione-categoria-mobile-link:focus .titolo-categoria-mobile {
        color: var(--sim-arancio);
    }

    #blocco-di-link-soluzioni a.intestazione-categoria-mobile-link:active .icona-categoria-mobile-mask,
    #blocco-di-link-soluzioni a.intestazione-categoria-mobile-link:focus .icona-categoria-mobile-mask {
        background-color: var(--sim-arancio);
    }

    /* Chevron di affordance a destra della macrovoce.
       Disegnato con due bordi + rotate: niente glifi di font, quindi resa
       identica su ogni dispositivo. Classe dedicata: NON e' .freccia, che
       appartiene alla fisarmonica e viene ruotata dal JS. */
    #blocco-di-link-soluzioni a.intestazione-categoria-mobile-link .freccia-categoria-mobile {
        display: inline-block;
        margin-left: auto;
        margin-right: 2px;
        flex-shrink: 0;
        padding: var(--sim-lato-chevron);
        border: solid var(--sim-arancio);
        border-width: 0 var(--sim-spessore-chevron) var(--sim-spessore-chevron) 0;
        transform: rotate(-45deg);
        transition: transform 0.2s ease;
    }

    #blocco-di-link-soluzioni a.intestazione-categoria-mobile-link:active .freccia-categoria-mobile,
    #blocco-di-link-soluzioni a.intestazione-categoria-mobile-link:focus .freccia-categoria-mobile {
        transform: rotate(-45deg) translate(2px, 2px);
    }