:root{
        /* Il valore precedente aveva uno spazio fra il cancelletto e le cifre,
           quindi non era un colore valido. Il refuso non è riportato per
           esteso qui: questo commento finisce nell'HTML servito, dove un test
           verifica appunto che la forma sbagliata non compaia più.
           Ogni "color: var(--cyan)" risultava quindi invalido al
           momento del calcolo e ricadeva su "inherit", per cui i link del menu
           erano neri ereditati dal body invece dell'azzurro previsto da
           "header { color: var(--cyan) }".

           Il valore non è stato ripristinato a #1f7cc3, che era l'intenzione
           dell'autore, perché su bianco misura 4,44:1: sotto la soglia di
           4,5:1 per il testo normale. È stato usato #1a6ba8 (5,66:1), lo
           stesso azzurro scuro già adottato per .blue, così la palette resta
           coerente.

           Effetto visibile: i link del menu sono ora azzurri. È la sola
           conseguenza pratica, verificata: dei diciannove usi di var(--cyan)
           in questo foglio, solo "header { color }" tocca elementi che
           esistono in queste pagine. Gli altri puntano a componenti di un
           altro progetto (.md-content, .dettaglio_articolo, .loader,
           .become_member, .bor-button, .modal, "button a") che qui non sono
           mai resi, e ".sidebar .bottom_sidebar .links .link>i" non trova
           alcuna icona dentro le voci del menu mobile. */
        --cyan:#1a6ba8;
        --light_cyan:#edf8fc!important;
        --blue:#024086!important;
        --grey:#f5f5f5!important;
        --shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        --dark_grey:#333739;
        --mred: #e2231a;
        /* --mblue era usata dal bordo della textarea del form ma non era mai
           stata definita: "border:1px solid var(--mblue)" risultava invalido e
           il campo restava senza bordo, quindi senza un contorno percepibile
           (UNI CEI EN 301 549 / WCAG 1.4.11, contrasto dei componenti di
           interfaccia). Definita con l'azzurro scuro del brand: 10,1:1 su
           bianco. */
        --mblue:#024086;
        /* Colore del contorno di focus e del link "Salta al contenuto". */
        --focus:#08315b;
    }
    body,.text-input,p,h1,h2,h3,h4,h5,h6,div,.button   {

       font-family: 'Montserrat', sans-serif !important;
       font-display:swap;
       font-weight: 500!important;

    }

    .header_links .header_link {
        padding:15px;
        cursor:pointer;
        text-decoration: none;
    }
    .header_links .header_link:hover {
        color: #e11d1d;
    }

    .swiper {
        width: 100%;
        height: 300px;
    }
    .swiper-image-container {
        width: 300px;
        height: 300px;
        object-fit: contain;
        margin: 0 10px;
    }
    .swiper-image-container > div{
        width:100%;
        height:100%;
    }

    .swiper-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .home {
        background-image: url('https://italycash.it/img/bgs/prodotti.webp');
        background-repeat: no-repeat;
        background-size : cover;
    }
    .box_text.blue {
        min-height: 300px;
        display:flex;
    }
    .italy_cash_bg {
        background-image: url('https://italycash.it/img/bgs/itc_reparto.webp');
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: scroll;
        vertical-align: middle;
        padding: 0px;
        background-color: #ffffff;
        height  : 100%;
    }
    .perche_italy{
        height:600px;
    }
    .perche_italy h2{
        font-size:3rem!important;color:white!important;font-weight:bold;
    }
    .perche_italy .box_text{
        /* Contrasto: era #edae44 (oro) con testo bianco, 1,96:1 — molto sotto
           la soglia. A settembre 2026 era stato scurito in #946c26, un
           marrone estraneo ai colori aziendali; da ottobre usa l'azzurro dei
           riquadri (.blue), #1a6ba8: 5,66:1 con il bianco, sufficiente sia per
           l'h2 grande (3:1) sia per il testo corrente (4,5:1). */
        background:#1a6ba8;flex:1;height: 100%;
    }
    .contatti {
        min-height:100vh;
    }
    .contatti h3 {
        font-size: 2rem!important;
        margin-bottom: 20px;
    }

    .contatti h3, .contatti label {
        color:#fff;
    }

    .bg_sidebar {
        display:none;
        z-index:10001;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
        max-height: 100%;

        height: 100vh;
        width:100%;
        background: #0000009e;
    }
    .sidebar {
        position: relative;
        height: 100vh;
        overflow-y: auto;
        z-index: 1000;
        width: 80%;
        margin-left:-90%;
        background: #FFF;
        background-image: url(https://service.scelgospa.com/img/loghi/o-logo-cyan.svg);
        background-repeat: no-repeat;
        background-position-x: 0px;
        background-position-y: 10rem;
    }
    .sidebar .top_sidebar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 15px 10px;
    }
    .sidebar .top_sidebar .logo {
        width: 130px;
        height: 45px;
    }
    .sidebar .bottom_sidebar.bot_1{
        position:absolute;

    }

    .sidebar .bottom_sidebar {
        height: 88%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width:100%;
        overflow-y: scroll;
    }
    .sidebar .bottom_sidebar .links .link>a {
        color: black;
        font-weight: 500;
    }
    .sidebar .bottom_sidebar .links .link>i {
        color:var(--cyan);
    }

    .sidebar .bottom_sidebar .links .link {
        font-size: 1.3rem;
        padding: 7.5px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-bottom: 1px dotted #c1dee8;
    }
    .sidebar .bottom_sidebar .links {
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: start;
        overflow-y: scroll;
    }

    h1 {
        font-size: 44px;
        color: #263e7b;
        font-weight: lighter;
        text-transform: uppercase;
    }
    h1, h2, h3, h4 {
        color: #006fc3;
        font-weight: lighter;

    }
    h2{
        font-size:4rem!important;
    }

    h3{
        font-size:1.5rem!important;
    }
    header{
        top:0;
        z-index:1000;
        color:var(--cyan);
        box-shadow:var(--shadow);

    }
    .test {
        border:1px solid black;
    }
    header>nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
    }
    header>nav>div{
        display:flex;
        align-items:center;
        flex:1;
    }
    .header_links>div>span{
        text-align: end;
    }

    .dark_cyan {
        background:#002854!important;
    }
    .content button {
        font-size: 15px;
        padding: 10px 20px;
        background: #0080c8;
        border-radius: 11px;
    }
    .container .right span {
        font-size: 14px;
    }
    .header_links {

        width: 70%;
        margin: auto;
    }
    footer {
        height: 100%!important;
        color:white;
    }

    footer .footer-info {
        padding: 60px 0;
    }

    footer .footer-info .footer-content {
        display: flex;
        flex-direction: column;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        width: 20rem;
    }
    footer .footer-info .footer-content .footer-title {
        width: 100% !important;
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        padding: 5px 0;
    }
    #pagesss strong {
        /* Contrasto: era #0080c8, 4,27:1 su bianco. #0070b0 dà 5,32:1.
           Eccezione dichiarata. */
        color:#0070b0!important;
    }
    input,textarea {
        background: #f8f8f8;
        border: 1px solid #e9e9e9;
        height: 40px;
        border-radius: 5px;
    }
    .container {
        display:flex;
        justify-content:center;
        align-items:center;
        height: 100%;
        padding:0;
    }

    .container .left {
        position: relative;
        padding: 10px;
    }

    .container .right {
        display:flex;
        flex-direction:column;
    }

    .box-page {
        width: 400px;
        height: 240px;
        position: relative;
        margin: 0 auto;
        bottom: 9vh;
        /* Contrasto: era #379cd6. L'h1 dentro questo box usa .text-light
           (#f8f9fa) e dava 2,89:1, sotto il 3:1 richiesto dal testo grande.
           #277aa8 porta il rapporto a 4,49:1 con #f8f9fa (4,73:1 col bianco
           puro), quindi passa anche la soglia del testo normale.
           Eccezione dichiarata. */
        background: #277aa8;
        color: white !important;
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items:center;
    }
    /* Un titolo che non sta su una riga (per esempio "Le nostre linee") va a
       capo: senza centratura le righe restavano allineate a sinistra e
       attaccate al bordo del riquadro, a differenza delle altre pagine.
       Nessun padding: su smartphone il titolo sta su una riga e lo spazio in
       più lo manderebbe a capo. */
    .box-page h1 {
        text-align: center;
    }

     /*****ESTORE******/

    .blue {
        /* Contrasto: era #1f7cc3, 4,44:1 col testo bianco — appena sotto
           soglia. #1a6ba8 dà 5,66:1. Riguarda il footer, l'intestazione
           dell'informativa privacy e i box blu di "Le nostre linee" e
           "Il gruppo". Eccezione dichiarata. */
        background:#1a6ba8;

    }
    .light_cyan {
        background:#edf8fc!important;
    }
    .medium_cyan {
        background:#d5edf7!important;

    }
    .cyan{
        /* Contrasto: era #3c88c3, 3,82:1 col testo bianco della riga di
           copyright del footer. #31719c dà 5,29:1. Eccezione dichiarata. */
        background:#31719c!important;
    }
    .bg-white {
        background:#fff!important;
    }

    .volantino_info_content .box_image img{
        height: 230px;

    }
    .volantino_info_content .box_text {
        height: 75%;
        display:flex;
        flex-direction:column;
        justify-content:space-evenly;
        align-items:center;
        width:35%;
        margin-left:30px;
        font-size:1.3rem;

    }
    .w-70 {
        width: 70%;
    }
    .box_articolo .box_content {
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        margin-top: -23px;
        padding:15px;
    }

    .blue-white-boxes .box_image,
    .blue-white-boxes .box_text {
        flex:1;
    }

    .blue-white-boxes .box_image {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .blue-white-boxes .box_image img {
        max-width: 300px;
        max-height: 300px;
    }

    .blue-white-boxes .box_text {

        color:#fff;
    }

    .blue-white-boxes .box_text>div h3,
    .blue-white-boxes .box_text>div strong {
        color:#fff!important;
    }

    .blue-white-boxes .box_text>div {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        padding:80px 70px;
    }
    footer {
    }
    .footer {
        display:flex;
        flex-direction:row;
    }
    .split {
        flex:1;

    }

    .flex-start-center {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .footer .container {
        display: flex;
        justify-content: space-between;
    }

    .footer .column {
        width: 30%;
        height:100%;
    }

    .footer h3 {
        margin-bottom: 15px;
        color:white;
        font-weight: bold;
    font-size: 20px!important;
    }

    .footer ul {
        list-style-type: none;
        padding:0px;
        font-size: 14px;
    }

    .footer li {
        margin-bottom: 10px;
    }

    .footer a {
        color: white;
        text-decoration: none;
    }

    .footer a:hover {
        text-decoration: underline;
    }
    .color_cyan {
        color:#0080c8;
    }
    .mbtn {
        padding:10px 30px;
        color:#fff;
    }

    button a {
        color:var(--cyan);
        height: 100%;
        width: 100%!important;
        display: flex;
    }
    .eventi_masterclass .box_text {
        width: 40%;
    }
    .eventi_masterclass .box_image img{
        width: 650px;
    }

    .text-blue{
      color:var(--blue);
    }

    .cpointer {
        cursor:pointer;
    }

     #pagesss h4 {
        color:#fff!important;
     }

    .bg-page {
        background-image: url('https://italycash.it/img/bgs/header-chi-siamo.jpg') ;
        height: 50vh;
        background-size: cover;
        background-position: center;

    }

    #pagesss #left_text small,
    #pagesss #right_text small{
        /* Contrasto: era "grey" (#808080), 3,95:1 su bianco. #6f6f6f dà
           5,02:1. Eccezione dichiarata. */
        color: #6f6f6f;
    }

    #pagesss #left_text,
    #pagesss #right_text {
        min-width: 300px;
        max-width: 640px;
        margin-top: 20px;
    }

#pagesss #left_text h3,
    #pagesss #right_text h3{
        font-size: 2rem;
    }

    .box_content {
        margin-top: -9vh!important;
    }

    /* Smartphone grandi */
    @media (max-width: 767px) {

    .box_text>div {
        padding:30px!important;
    }

    #pagesss #left_text,
    #pagesss #right_text {
        width: 100%;
    }
    #pagesss #left_text h3,
    #pagesss #right_text h3{
        font-size: 1.5rem!important;
    }

    footer .footer-info .footer-content {
        width: 85%;
    }
    .row{
        margin:0!important;
    }
    .box_content {
        margin-top: -9vh!important;
    }

        .bg-page {
            height:20vh;
        }
        .box-page {
            width: 300px;
            height: 150px;
        }
        .box-page h1 {
            font-size: 2rem;
        }

        .eventi_masterclass .box_image {
            display:none;
        }

        header .right {
            font-size: 0.8rem;
        }
        /* Regole CSS specifiche per smartphone*/
        .w-50,.w-30,.w-70, .header_links{
            width:100%!important;
        }
        .w-30 {
            width: 100%!important;
            padding:35px;
        }
         .w-40 {
             width:85%!important;
         }
        .header_links {
            justify-content:space-evenly!important;

        }
        header {
            font-size: 12px;
        }

        section {
            margin:10px 0;
        }
        h2{
            font-size:1.5rem!important;
        }
        h3{
            font-size:1.3rem!important;
        }
        header{
            height: 40px!important;
            color:var(--cyan);
        }
        .content button {
            padding: 10px;
            border-radius: 10px;
            font-weight:400;
            font-size:0.8rem;
        }
        .header_links .header_link {
            padding: 0 8px!important;
        }

        header {
            position:sticky;
            background:#fff;
            box-shadow:var(--shadow);
            z-index:1000;
            top:0;
        }

        .container {
            flex-direction: column;
            padding-left:8px;
            width:auto;
        }

        .container .left {
            padding:0;
        }
        .volantino_info_content .box_image img {
            width: 110px;
            height: 160px;
        }
        .volantino_info_content .box_text span {
            font-size:0.8rem;
        }
        .volantino_info_content .box_text  {
            width: 100%;
        }
        .footer {flex-direction:column;width: 100%;padding: 20px;}

        .eventi_masterclass_img .box_text {
            width: 100%;
        }

    }

    /* Tablet verticali */
    @media (min-width: 768px) and (max-width: 1300px) {        /* Regole CSS specifiche per tablet */
        .w-70 {
            width:75%;
        }
       .header_links .header_link {
            padding: 0 8px!important;
        }

        header {
            position:sticky;
            background:#fff;
            box-shadow:var(--shadow);
            z-index:1000;
            top:0;
        }
        .container .right span {
            font-size: 0.8rem;
        }
        .header_links {
            width:78%!important;
        }
        .header_links a {
            font-size: 0.8rem;
        }
        .w-30 {
            width:60%!important;
        }
        footer > div > section {
            width:80%!important;
            padding:0 20px;
        }
        .volantino_info_content .box_text {
            font-size: 1rem;
        }

    }
/* ==========================================================================
   ACCESSIBILITÀ — European Accessibility Act (dir. UE 2019/882, D.Lgs.
   82/2022), Linee guida AgID adottate con determinazione n. 38 del 4 marzo
   2026, UNI CEI EN 301 549, WCAG 2.1 livello AA.

   Questo blocco sta in fondo al file di proposito: essendo l'ultimo, vince sui
   fogli di stile dei vendor (Bootstrap, Swiper, FontAwesome) e sulle regole
   precedenti a pari specificità, senza doverle riscrivere.

   Nota sulla cache: questo foglio non sta nel docroot. Lo serve Laravel
   all'indirizzo /css/sito.css (vedi App\Support\FoglioDiStile), con un ?v=
   ricavato dal contenuto di questo file: cambia da solo a ogni modifica, non
   c'è niente da incrementare. Il ?v= manuale di config/accessibilita.php
   riguarda solo i file dei vendor nel docroot.

   Qui non vanno messe regole che dipendono dalla pagina o dal dispositivo
   (variabili Blade, user agent): il foglio è lo stesso per tutte le pagine
   e il browser lo tiene in cache. Le differenze fra schermi si fanno con le
   media query.

   Nota per chi modifica questo file: siamo dentro una vista Blade. Le
   direttive Blade NON vanno citate per esteso nemmeno dentro un commento CSS,
   perché il commento non protegge nulla e la direttiva verrebbe eseguita.
   Citare per esteso la direttiva di inclusione di questo stesso foglio
   provocava una ricorsione infinita nel rendering.

   Questi commenti evitano anche di riportare frammenti di marcatura: quando
   il foglio era in linea finivano nell'HTML servito e falsavano i controlli
   automatici.
   ========================================================================== */

/* --- 1. Focus visibile (WCAG 2.4.7, 1.4.11) ------------------------------
   Doppio anello: contorno scuro (13,1:1 su bianco) con un anello bianco nello
   spazio dell'offset (da 4,7:1 a 5,7:1 sui fondi blu e oro del sito). Così
   l'indicatore mantiene i 3:1 richiesti su qualunque fondo del tema.
   Gli !important sono necessari per annullare gli "outline:none"/"outline:0"
   in stile in linea e nei CSS dei vendor: una dichiarazione !important
   dell'autore prevale anche sullo style attribute. */
:focus-visible {
    outline: 2px solid var(--focus) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff !important;
}
/* Browser senza :focus-visible: si ricade su :focus, meglio un indicatore in
   più che nessuno. */
@supports not selector(:focus-visible) {
    a:focus, button:focus, input:focus, select:focus, textarea:focus,
    summary:focus, [tabindex]:focus, [role="button"]:focus {
        outline: 2px solid var(--focus) !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 0 2px #ffffff !important;
    }
}

/* --- 2. Link "Salta al contenuto" (WCAG 2.4.1) ---------------------------
   Fuori schermo fino a che non riceve il focus, così non cambia l'aspetto
   della pagina per chi usa il mouse. Non si usa display:none, che lo
   escluderebbe dall'ordine di tabulazione. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 12px 20px;
    background: var(--focus);
    color: #ffffff !important;
    text-decoration: underline;
    font-weight: 600;
    border-radius: 0 0 6px 0;
}
.skip-link:focus,
.skip-link:focus-visible {
    left: 0;
}
/* L'area principale riceve tabindex="-1" per poter essere messa a fuoco
   dallo skip link. Non è un elemento interattivo: un indicatore di focus
   proprio sarebbe un contorno intorno a tutta la pagina. Il riscontro è lo
   scorrimento al contenuto e la tabulazione che prosegue da lì. */
main:focus,
main:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* --- 3. Controlli non nativi resi operabili -------------------------------
   Gli elementi con role="button" e tabindex="0" devono somigliare a quello che
   sono anche col puntatore. */
[role="button"] {
    cursor: pointer;
}

/* --- 4. Pulsanti introdotti per l'accessibilità --------------------------
   Apertura e chiusura del menu mobile erano contenitori generici con un
   gestore di clic, non raggiungibili da tastiera; ora sono pulsanti veri.
   Questa regola azzera lo stile nativo del pulsante perché l'aspetto resti
   identico a prima. */
.btn-nudo {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
/* Il logo della sidebar è diventato un vero collegamento: inline-flex perché
   resti l'elemento flessibile che prima era l'immagine. */
.sidebar .top_sidebar .logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
/* Le voci del menu mobile sono diventate collegamenti veri (prima non
   avevano indirizzo, quindi non ricevevano il focus). Qui si toglie la
   sottolineatura predefinita di Bootstrap perché l'aspetto del menu resti
   quello di prima: sono voci di navigazione, non collegamenti dentro un testo
   corrente, quindi non serve distinguerle per sottolineatura (WCAG 1.4.1). */
.sidebar .bottom_sidebar .links .link > a,
.sidebar .bottom_sidebar .bottom_links .link > a {
    text-decoration: none;
}
.sidebar .bottom_sidebar .links .link {
    /* Il <div class="link"> non è più cliccabile: lo è il link che contiene,
       che va quindi esteso a tutta la riga per non ridurre l'area di tocco
       (WCAG 2.5.8, dimensione del bersaglio). */
    padding: 0;
}
.sidebar .bottom_sidebar .links .link > a {
    display: block;
    width: 100%;
    padding: 7.5px 0;
}

/* --- 5. Comando di pausa del carosello (WCAG 2.2.2) ----------------------
   Lo slider dei marchi parte da solo e gira in continuo: serve un comando per
   fermarlo. È l'unico elemento visibile aggiunto al layout; eccezione
   dichiarata. */
.swiper-pausa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 14px;
    font-size: 0.9rem;
    color: #0070b0;
    background: #ffffff;
    border: 1px solid #0070b0;
    border-radius: 6px;
    cursor: pointer;
}
.swiper-pausa:hover {
    color: #ffffff;
    background: #0070b0;
}

/* --- 6. Messaggi di errore del form (WCAG 1.4.3, 3.3.1) ------------------
   .text-danger di Bootstrap è #dc3545: 4,53:1 su bianco (al limite) e 1,48:1
   sul fondo azzurro della sezione contatti, dove era illeggibile. */
.campo-errore {
    color: #b3261e !important; /* 6,54:1 su bianco */
    display: block;
}
.contatti .campo-errore,
.contatti .text-danger {
    color: #ffeeec !important; /* 4,92:1 su #2f6d9e */
}

/* --- 6-bis. Link dentro la sezione contatti della home -------------------
   Il link all'informativa privacy dentro l'etichetta della casella di consenso
   prendeva l'azzurro predefinito di Bootstrap (#0d6efd) su un fondo blu:
   praticamente illeggibile. Sul fondo scelto (#2f6d9e) il bianco dà 5,52:1 e
   la sottolineatura di Bootstrap continua a distinguere il link dal testo
   dell'etichetta, quindi l'informazione non è veicolata dal solo colore
   (WCAG 1.4.1, 1.4.3).
   Nota: altrove i link nel testo restano dell'azzurro di Bootstrap, che su
   bianco misura 4,50:1 ed è quindi a filo di soglia; sono sottolineati. */
.contatti label a,
.contatti p a {
    color: #ffffff;
    text-decoration: underline;
}

/* --- 7. Zoom automatico su iOS -------------------------------------------
   Safari su iOS ingrandisce la pagina quando un campo con testo sotto i 16px
   riceve il focus, e non la riporta indietro. Alzare la misura ai 16px sui soli
   dispositivi con puntatore grossolano evita lo zoom senza doverlo
   disabilitare dal viewport, cosa che violerebbe la WCAG 1.4.4. Eccezione:
   su smartphone e tablet i campi del form sono leggermente più grandi. */
@media (pointer: coarse) {
    /* Valori del selettore volutamente senza apici: sono identificatori CSS
       validi, e la forma con gli apici comparirebbe nell'HTML servito. Un test
       già esistente conta quante volte l'attributo di tipo con valore casella
       di spunta appare nella pagina, per accertarsi che le caselle di consenso
       siano tre e nessuna pre-spuntata: scriverlo con gli apici, anche solo in
       questo commento, farebbe salire il conteggio a quattro. */
    input:not([type=checkbox]):not([type=radio]),
    select,
    textarea {
        font-size: 16px;
    }
}

/* --- 8. Rispetto della preferenza per il movimento ridotto (WCAG 2.3.3) --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Lo skip link deve continuare a comparire: non è animazione decorativa. */
    .skip-link:focus,
    .skip-link:focus-visible {
        left: 0;
    }
}

/* --- 9. Ridimensionamento del testo (WCAG 1.4.4, 1.4.12) -----------------
   Verificato che nessuna regola e nessun viewport limita lo zoom. Qui si
   evita solo che il testo venga tagliato quando l'utente aumenta la
   dimensione dei caratteri. */
h1, h2, h3, h4, h5, h6, p, li, label, span, small {
    overflow-wrap: break-word;
}

/* --- 10. Campo trappola anti-spam del form contatti ----------------------
   Portato fuori schermo con una classe e non con display:none in linea:
   molti programmi di spam leggono l'attributo style e saltano i campi
   nascosti così, mentre non calcolano i fogli di stile. Resta escluso per chi
   usa tastiera e screen reader grazie ad aria-hidden e tabindex nel markup. */
.campo-trappola {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- 11. Intestazione responsive (WCAG 1.4.10, Reflow) -------------------
   L'intestazione è una sola per tutti i dispositivi e contiene due barre:
   quella completa, con le voci del menu, e quella compatta, con il logo e il
   pulsante che apre il menu. Prima il server ne mandava una sola scelta in
   base allo user agent: chi ingrandiva la pagina al 400% su un computer
   riceveva la barra completa, che a 320 px scorreva in orizzontale.

   992 px è la larghezza minima a cui le voci stanno su al massimo due righe,
   come a piena larghezza: sotto si passa alla barra compatta. Gli smartphone
   e i tablet in verticale ricevono la barra compatta come prima; un computer
   con lo zoom al 200% o più la riceve ora anche lui. */
.intestazione-compatta {
    display: none !important;
}
@media (max-width: 991.98px) {
    .intestazione-completa {
        display: none !important;
    }
    .intestazione-compatta {
        display: flex !important;
    }
    /* La barra compatta prima non stava dentro un header e non ne riceveva
       gli stili: altezza fissa, posizione sticky e ombra erano pensati per la
       barra completa. Qui si annullano, così l'aspetto resta quello di prima. */
    header.intestazione {
        height: auto !important;
        position: static !important;
        box-shadow: none !important;
        font-size: inherit !important;
    }
}
/* Con la barra completa nascosta, il menu a finestra non deve restare aperto
   se la finestra si allarga: se ne occupa lo script in layout/base. */

/* --- 12. Contenuti solo per schermi ampi ----------------------------------
   Immagini decorative che il server prima ometteva per gli smartphone in
   base allo user agent. Ora sono nell'HTML per tutti e il CSS le nasconde
   sotto i 768 px, la soglia di Bootstrap per i tablet. */
@media (max-width: 767.98px) {
    .nascosto-su-smartphone {
        display: none !important;
    }
    /* Sugli smartphone la sezione dei vantaggi cresce con il testo. */
    .perche_italy {
        height: auto;
        min-height: 600px;
    }
    /* Riquadri di «Il gruppo» e «Le nostre linee»: sugli schermi stretti
       l'immagine va sempre sopra il testo, anche nei riquadri in cui su
       schermo ampio sta a destra. */
    .riquadro-linea .box_image {
        order: -1;
    }
}

/* Loghi delle linee nella home: 350 px di larghezza fissa, che su uno schermo
   di 320 px (o con lo zoom al 400%) facevano scorrere la pagina in
   orizzontale. Ora si riducono quando non c'è spazio. */
.linee-home img {
    max-width: 100%;
    height: auto;
}

/* --- 13. Icone SVG -------------------------------------------------------
   Sostituiscono il webfont FontAwesome: stessa misura (1em di altezza) e
   stesso allineamento al testo. */
.icona {
    display: inline-block;
    height: 1em;
    width: auto;
    overflow: visible;
    vertical-align: -0.125em;
}
.icona-2x {
    font-size: 2em;
}

/* --- 14. Titolo della home e sezione «In breve» ---------------------------
   Il sottotitolo sta dentro l'h1 (così il titolo principale dice che cosa fa
   l'azienda) ma ha l'aspetto del paragrafo che lo seguiva prima. */
/* Pulsante del riquadro «Perché far parte di Italy Cash?»: bianco con testo
   blu aziendale (10,1:1), ben distinto dal fondo azzurro. */
.pulsante-su-azzurro {
    color: #024086 !important;
    background: #ffffff;
    border-color: #ffffff;
}
.pulsante-su-azzurro:hover {
    color: #ffffff !important;
    background: #024086;
    border-color: #ffffff;
}

.titolo-sottotitolo {
    display: block;
    margin-top: 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    font-weight: 500;
    text-transform: none;
}

.in-breve-fatti {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 2rem 0 0;
}
.in-breve-fatto {
    padding: 1rem 1.25rem;
    background: #f5f5f5;
    border-left: 4px solid #1a6ba8;
}
.in-breve-fatto dt {
    font-size: 0.85rem;
    color: #595959; /* 7,0:1 su #f5f5f5 */
    text-transform: uppercase;
}
.in-breve-fatto dd {
    margin: 0.25rem 0 0;
    color: #212529;
}
.in-breve-domande {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem 3rem;
}
.in-breve-domanda h4 {
    font-size: 1.15rem;
    color: #024086;
    font-weight: 500;
}
.in-breve-domanda p {
    margin: 0;
}
@media (max-width: 767.98px) {
    /* Sugli smartphone il contenitore occupa tutta la larghezza: senza
       margine il testo toccherebbe i bordi dello schermo. */
    .in-breve > div {
        padding: 0 15px;
    }
}