:root {

            --primary-blue: #005b96;

            --light-blue-bg: #eef7ff;

            --accent-yellow: #fbc02d;

            --text-dark: #333333;

            --text-grey: #666666;

            --white: #ffffff;

            --card-radius: 25px;

            --soft-shadow: 0 10px 30px rgba(0, 91, 150, 0.15);

        }



        html {

            scroll-behavior: smooth; /* Attiva lo scorrimento morbido */

            scroll-padding-top: 110px; /* FONDAMENTALE: Ferma lo scorrimento prima dell'header */

        }



        body {

            font-family: 'Open Sans', sans-serif;

            margin: 0; padding: 0; color: var(--text-dark); line-height: 1.7; overflow-x: hidden;

            -webkit-text-size-adjust: 100%;

            -ms-text-size-adjust: 100%;

        }



        h1, h2, h3 { font-family: 'Montserrat', sans-serif; color: var(--primary-blue); font-weight: 700; }

        h2.section-title { text-align: center; font-size: 2.2rem; margin-bottom: 50px; }

        .container { max-width: 1100px; margin: 0 auto; padding: 0 25px; }

        strong { color: var(--primary-blue); }



        header {

            background-color: rgba(255, 255, 255, 0.98);

            box-shadow: 0 2px 15px rgba(0,0,0,0.05);

            position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(5px);

        }

       

        .navbar { 

          display: flex; 

          justify-content: space-between; 

         align-items: center; 

         padding: 15px 40px; /* 40px di spazio a sinistra e destra */

         width: 100%;       /* Occupa tutta la larghezza */

         box-sizing: border-box; /* Evita che il padding rompa la pagina */

        }

        .logo { font-size: 1.4rem; font-weight: 800; color: var(--primary-blue); text-decoration: none; letter-spacing: -0.5px; }

        .nav-links { 

         display: flex; 

         align-items: center; 

         gap: 2vw; /* Distanza fluida tra le parole */

        }



        .nav-links a { 

         text-decoration: none; 

         color: var(--text-dark); 

         font-weight: 600; 

         transition: color 0.3s; 

         /* Usa CLAMP: minimo 0.9rem, ideale 1.2% schermo, massimo 1.15rem */

         font-size: clamp(0.9rem, 1.2vw, 1.15rem); 

         white-space: nowrap; 

        }

        .nav-links a:hover { color: var(--primary-blue); }

        .nav-links a:hover { color: var(--primary-blue); }

        

        /* Nuovo stile per il blocco contatti header */

        .header-contact { display: flex; align-items: center; gap: 20px; margin-left: 20px; }

        /* Contenitore per impilare i numeri */

        .header-phones-container { display: flex; flex-direction: column; align-items: flex-end; }

        .header-phone { font-weight: 600; color: var(--primary-blue); text-decoration: none; font-size: 1.1rem; display: block; margin-bottom: 5px;}

        .header-phone i { margin-right: 5px; color: var(--accent-yellow); }

        

        .cta-button {

            background-color: #0089d1; /* Un bell'azzurro intenso */

            color: var(--white);       /* Testo bianco (prima era scuro) */

            padding: 10px 25px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 0.9rem;

            box-shadow: 0 4px 15px rgba(0, 137, 209, 0.3); /* Ombra azzurrina */

            transition: all 0.3s ease; border: none; cursor: pointer; display: inline-block;

        }



        .cta-button:hover { 

            transform: translateY(-3px); 

            box-shadow: 0 6px 20px rgba(0, 137, 209, 0.5); 

            background-color: var(--primary-blue); /* Diventa blu scuro al passaggio */

        }



        /* --- HERO ANIMATA --- */

        .hero {

            background-image: linear-gradient(135deg, rgba(0, 91, 150, 0.85) 0%, rgba(100, 181, 246, 0.8) 100%), url('https://via.placeholder.com/1920x800/aaaaaa/ffffff?text=FOTO+COPERTINA');

            background-size: cover; background-position: center; color: var(--white);

            padding: 140px 0; text-align: center;

        }



        @keyframes fadeInUp {

            from { opacity: 0; transform: translateY(30px); }

            to { opacity: 1; transform: translateY(0); }

        }



        .hero h1 { font-size: 3.5rem; margin-bottom: 20px; color: white; opacity: 0; animation: fadeInUp 0.8s ease-out forwards; }

        .hero p { font-size: 1.3rem; max-width: 700px; margin: 0 auto 40px auto; opacity: 0; animation: fadeInUp 0.8s ease-out 0.3s forwards; }

        .hero-btn-container { opacity: 0; animation: fadeInUp 0.8s ease-out 0.6s forwards; }



        /* --- CHI SIAMO --- */

        /* --- CHI SIAMO (CORRETTO: Foto Quadrate e Testo Largo) --- */

        .intro { padding: 80px 0; background-color: var(--white); }

        

        .intro-grid { 

            display: flex; 

            align-items: center; 

            gap: 50px; 

        }



        /* 1. IL CONTENITORE FOTO: Ora è un quadrato perfetto e non schiaccia il testo */

        .slider-container { 

            flex: 1;          /* Prende il 50% dello spazio disponibile */

            min-width: 0;     /* FONDAMENTALE: Impedisce allo slider di spingere via il testo */

            position: relative; 

            border-radius: var(--card-radius); 

            box-shadow: var(--soft-shadow); 

            overflow: hidden; 

            

            aspect-ratio: 1 / 1; /* MAGIA: Forza il box a essere sempre un QUADRATO PERFETTO */

        }



        /* 2. IL TESTO: Ora ha il suo spazio garantito */

        .intro-text { 

            flex: 1; /* Prende l'altro 50% dello spazio */

        }

        

        .intro-text p { margin-bottom: 20px; }



        /* 3. LE FOTO INTERNE: Si adattano al quadrato */

        .photo-slider { 

            width: 100%; 

            height: 100%; /* Prende l'altezza del quadrato (aspect-ratio) */

            display: flex;

        }



        /* Questo è il "nastro" che scorre */

        .slider-wrapper { 

            display: flex; width: 100%; 

            height: 100%; overflow-x: auto; /* ABILITA IL TOCCO/SCORRIMENTO */

            margin: 0; padding: 0;

            scroll-snap-type: x mandatory; /* Obbliga la foto a fermarsi al centro */

            scroll-behavior: smooth; scrollbar-width: none; /* Nasconde barra scorrimento (Firefox) */

        }

        

        .slider-wrapper::-webkit-scrollbar { display: none; } /* Nasconde barra (Chrome/Safari) */



        .slide { 

            min-width: 100%; /* Ogni foto occupa tutto lo spazio */

            height: 100%;  width: 100%; background-size: cover; background-position: center; scroll-snap-align: center; /* Scatto magnetico al centro */

            flex-shrink: 0; scroll-snap-stop: always; /* Obbliga a fermarsi a ogni card */

        }

        

        

        .slider-btn {

            position: absolute; top: 50%; transform: translateY(-50%);

            background-color: rgba(255, 255, 255, 0.9); border: none;

            width: 45px; height: 45px; border-radius: 50%; cursor: pointer;

            color: var(--primary-blue); font-size: 1.2rem; z-index: 10;

            display: flex; align-items: center; justify-content: center; transition: 0.3s;

            box-shadow: 0 2px 10px rgba(0,0,0,0.1);

        }

        .slider-btn:hover { background-color: white; color: var(--accent-yellow); transform: translateY(-50%) scale(1.1); }

        .prev { left: 15px; }

        .next { right: 15px; }



        /* --- SEZIONE VANTAGGI (HIGHLIGHTS) --- */

        .highlights-section {

            padding: 60px 0;

            background-color: var(--light-blue-bg); /* Stacca dal bianco del "Chi siamo" */

        }



        .highlights-grid {

            display: flex;

            justify-content: center;

            gap: 30px;

            flex-wrap: wrap;

        }



        .highlight-card {

            background: var(--white);

            padding: 30px;

            border-radius: var(--card-radius);

            width: 300px; /* Larghezza fissa su PC */

            text-align: center;

            box-shadow: var(--soft-shadow);

            cursor: pointer;

            transition: transform 0.3s, box-shadow 0.3s;

            border: 2px solid transparent;

        }



        .highlight-card:hover {

            transform: translateY(-5px);

            border-color: var(--primary-blue);

            box-shadow: 0 15px 30px rgba(0,91,150,0.2);

        }



        /* Card inattiva (Finanziamenti) */

        .highlight-card.inactive {

            opacity: 0.7;

            cursor: default;

        }

        .highlight-card.inactive:hover { transform: none; border-color: transparent; }



        .icon-box {

            font-size: 2.5rem;

            color: var(--primary-blue);

            margin-bottom: 15px;

        }



        .read-more {

            display: inline-block;

            margin-top: 15px;

            color: var(--primary-blue);

            font-weight: 700;

            font-size: 0.9rem;

        }



        /* --- STILE DEI MODALI (POPUP) --- */

        .info-modal-overlay {

            display: none; /* Nascosto di base */

            position: fixed; top: 0; left: 0; width: 100%; height: 100%;

            background: rgba(0,0,0,0.7); /* Sfondo scuro */

            z-index: 5000; /* Sopra a tutto */

            align-items: center; justify-content: center;

            backdrop-filter: blur(5px);

        }



        .info-modal-content {

            background: white;

            padding: 40px;

            border-radius: 20px;

            max-width: 500px;

            width: 90%;

            position: relative;

            text-align: center;

            box-shadow: 0 20px 50px rgba(0,0,0,0.5);

            animation: fadeInUp 0.4s ease;

            max-height: 90vh; /* Se il contenuto è lungo, non esce dallo schermo */

            overflow-y: auto; /* Abilita scorrimento interno se serve */

        }



        .modal-icon {

            font-size: 3rem; color: var(#0089d1); margin-bottom: 20px;

        }



        .close-modal-btn {

            position: absolute; top: 15px; right: 20px;

            font-size: 2rem; cursor: pointer; color: #888;

        }



        /* MOBILE FIX */

        @media (max-width: 1024px) {

            .highlight-card { width: 100%; margin-bottom: 20px; }

            .info-modal-content { padding: 30px 20px; }

        }



        /* --- SERVIZI SCORREVOLI --- */

        .services { background-color: var(--light-blue-bg); padding: 80px 0; border-radius: 50px; margin: 20px 0; }

        .services-carousel-container { position: relative; width: 100%; padding: 0; }

        .services-track {

            display: flex; gap: 30px; overflow-x: auto; scroll-behavior: smooth; padding: 40px 30px;

            scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; justify-content: flex-start; 

        }

        .services-track::-webkit-scrollbar { display: none; }

        .service-card {

            min-width: 280px; max-width: 280px; background: var(--white); padding: 40px 25px;

            border-radius: var(--card-radius); text-align: center; box-shadow: var(--soft-shadow);

            transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center;

            scroll-snap-align: center; flex-shrink: 0; scroll-snap-stop: always; cursor: pointer

        }

        .service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 91, 150, 0.2); border: 1px solid var(--primary-blue); }

        .service-card i {

            font-size: 3rem; color: var(--primary-blue); margin-bottom: 20px;

            background: var(--light-blue-bg); width: 80px; height: 80px; line-height: 80px; border-radius: 50%;

        }

        .service-card p { flex-grow: 1; color: var(--text-grey); margin: 0; font-size: 0.95rem;}

        .service-card h3 { margin-bottom: 10px; min-height: 50px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;}

        .service-btn { background-color: var(--white); color: var(--primary-blue); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

        .services-carousel-container .prev { left: 10px; top: 50%; transform: translateY(-50%);}

        .services-carousel-container .next { right: 10px; top: 50%; transform: translateY(-50%);}



       /*convenzioni*/

 

        .conventions-grid {

         display: flex;

         flex-wrap: wrap;

         justify-content: center;

         gap: 30px; /* Spazio tra i box */

         margin-top: 30px;

        }

        .convention-card {

         width: 200px; 

         height: 100px; 

         background: var(--white); 

         border: 2px solid #eee;

         border-radius: 15px; 

         display: flex; 

         align-items: center; 

         justify-content: center;

         padding: 15px; /* Crea spazio attorno al logo */

         transition: 0.3s;

         overflow: hidden; /* Se l'immagine è gigante, non esce fuori */

        }



        .convention-card:hover { 

         border-color: var(--primary-blue); 

         box-shadow: 0 5px 15px rgba(0, 91, 150, 0.1);

        }



        .convention-card img {

         max-width: 100%;

         max-height: 100%;

         object-fit: contain; /* Mantiene le proporzioni del logo */

         filter: grayscale(100%); /* (Opzionale) Rende i loghi grigi finché non passi il mouse */

         transition: filter 0.3s;

        }



        .convention-card:hover img {

         filter: grayscale(0%); /* Colora il logo quando passi il mouse */

        }

     

     

        /* --- RECENSIONI  --- */

        .reviews-section { 

            padding: 40px 0; background-color: var(--light-blue-bg); border-radius: 50px; margin: 20px 0; text-align: center; 

        }

        

        .review-slider-container { 

            max-width: 600px; /* PC: Molto più stretto (era 800px) */

            width: 90%;       /* MOBILE: Occupa il 90% dello schermo, non esce fuori */

            margin: 0 auto; 

            background: var(--white); 

            border-radius: var(--card-radius); 

            padding: 20px 0;  /* Meno spazio verticale vuoto */

            box-shadow: var(--soft-shadow); 

            position: relative; 

            overflow: hidden;

        }



        #reviewSliderWrapper {

            display: flex;  width: 100%; overflow-x: auto;  scroll-snap-type: x mandatory;  scroll-behavior: smooth;  scrollbar-width: none;

        }

        #reviewSliderWrapper::-webkit-scrollbar { display: none; }



        .review-slide { 

            min-width: 100%; /* Occupa tutto lo spazio disponibile */

            width: 100%;     /* Forza la larghezza */

            display: flex; 

            flex-direction: column; 

            align-items: center; 

            justify-content: center; 

            padding: 0 20px; 

            box-sizing: border-box; /* Fondamentale per non uscire dai bordi */

            scroll-snap-align: center; 

            flex-shrink: 0;

        }

        

        .stars { 

            color: var(--accent-yellow); margin-bottom: 10px; font-size: 1.2rem; 

        }

        

        /* IL SEGRETO È QUI SOTTO: */

        .review-text { 

            font-size: 1rem; font-style: italic; margin-bottom: 15px; line-height: 1.5; 

            

            /* Queste righe obbligano il testo ad andare a capo */

            white-space: normal; word-wrap: break-word;  overflow-wrap: break-word;

            

            /* Limita la larghezza del testo per renderlo leggibile */

            max-width: 100%; 

        }

        

        .reviewer-name { 

            font-weight: 700;  color: var(--primary-blue); font-size: 0.95rem; 

        }



        /* Per schermi molto piccoli (Telefoni stretti) */

        @media (max-width: 480px) {

            .review-text { font-size: 0.9rem; }

            .review-slider-container { width: 85%; }

        }

        

       /* --- SEZIONE STAFF (MODIFICATA: FOTO GRANDI 3:4) --- */

        .staff-section { padding: 80px 0; background-color: var(--white); }

        

        .staff-grid {

            display: flex;

            flex-wrap: wrap;

            justify-content: center;

            gap: 40px;

            margin-top: 40px;

        }



        .staff-card {

            background: var(--light-blue-bg);

            border-radius: var(--card-radius);

            /* ABBIAMO TOLTO IL PADDING: */

            padding: 0; 

            text-align: center;

            width: 280px; 

            box-shadow: var(--soft-shadow);

            transition: transform 0.3s ease;

            /* FONDAMENTALE: Taglia la foto che esce dagli angoli arrotondati */

            overflow: hidden; 

        }



        .staff-card:hover { transform: translateY(-10px); }



        .staff-photo {

            width: 100%; /* Occupa tutta la larghezza della card */

            height: auto; /* L'altezza si calcola in base alla proporzione */

            

            /* QUI CAMBIAMO IL FORMATO IN 3:4 */

            aspect-ratio: 3 / 4; 

            

            object-fit: cover; /* Ritaglia la foto senza schiacciarla */

            border-radius: 0; /* Togliamo il cerchio */

            border: none; /* Togliamo il bordo bianco */

            margin-bottom: 15px;

            display: block; /* Elimina spazi vuoti fastidiosi */

        }



        /* Dato che abbiamo tolto il padding dalla card, dobbiamo rimetterlo alle scritte */

        .staff-name {

            font-size: 0.95rem;

            font-weight: 700;

            color: var(--primary-blue);

            margin-bottom: 5px;

            font-family: 'Montserrat', sans-serif;

            padding: 0 20px; /* Spazio laterale */

        }



        .staff-role {

            color: #0089d1;

            font-weight: 600;

            font-size: 0.95rem;

            text-transform: uppercase;

            letter-spacing: 1px;

            margin-bottom: 15px;

            padding: 0 20px;

        }



        .staff-desc {

            font-size: 0.9rem;

            color: var(--text-grey);

            font-style: italic;

            padding: 0 20px 30px 20px; /* Più spazio in basso per chiudere bene */

        }



        /* --- CONTATTI E PRIVACY --- */

        .contact-section { padding: 80px 30px; display: flex; flex-wrap: wrap; gap: 50px; justify-content: center; }

        .contact-info, .contact-form-container { flex: 1; min-width: 300px; }

        .contact-item { margin-bottom: 25px; display: flex; align-items: flex-start; }

        .contact-item i { font-size: 1.4rem; color: var(--primary-blue); margin-right: 20px; background: var(--light-blue-bg); width: 50px; height: 50px; line-height: 50px; border-radius: 50%; text-align: center; }

        .contact-form-container { background: var(--light-blue-bg); padding: 40px; border-radius: var(--card-radius); }

        .hours-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 0.95rem; }

        .hours-table td { padding: 5px 0; border-bottom: 1px solid #ddd; }

        .hours-table tr:last-child td { border-bottom: none; }

        .hours-table strong { color: var(--primary-blue); }



        input, textarea { width: 100%; padding: 15px; margin-bottom: 20px; border: 2px solid white; border-radius: 15px; font-family: inherit; box-sizing: border-box; }

        

        .privacy-box { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; font-size: 0.9rem; color: #555; }

        .privacy-box input { width: auto; margin-top: 5px; }

        .privacy-box a { color: var(--primary-blue); text-decoration: underline; }



        /* --- STILE MAPPA --- */

        .map-container {

            width: 100%;

            margin-top: 20px;

            margin-bottom: 20px;

            border-radius: 15px;

            overflow: hidden; /* Serve per arrotondare gli angoli della mappa */

            box-shadow: var(--soft-shadow);

            border: 2px solid var(--white);

            position: relative;

            display: block;

        }

        

        .map-frame {

            width: 100%;

            height: 300px; /* Altezza della mappa */

            border: 0;

            display: block;

        }



        /* --- CLASSE PER SCORRIMENTO ORIZZONTALE (Carousel) --- */

        /* --- CLASSE IBRIDA: GRIGLIA SU PC, SCORRIMENTO SU MOBILE --- */

        .horizontal-scroll {

            display: flex;

            gap: 30px;

            /* SU PC: Vai a capo e centra tutto (Nessuno scorrimento) */

            flex-wrap: wrap; 

            justify-content: center; 

            padding: 20px 0;

        }



        /* Regole specifiche per le card dentro la griglia */

        .horizontal-scroll > div {

            flex-shrink: 0; 

            scroll-snap-align: center;

            scroll-snap-stop: always; /* Obbliga a fermarsi a ogni card */

        }

        



        footer { background-color: var(--primary-blue); color: var(--white); text-align: center; padding: 30px 0; }

        

        .whatsapp-float {

            position: fixed; bottom: 30px; right: 30px; background-color: #25d366;

            color: white; width: 65px; height: 65px; border-radius: 50%;

            text-align: center; font-size: 38px; box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);

            display: flex; align-items: center; justify-content: center; text-decoration: none; z-index: 2000; transition: transform 0.3s;

        }

        .whatsapp-float:hover { transform: scale(1.1); }

      

        /* --- VERSIONE MOBILE E TABLET/FOLD (UNIFICATA) --- */

        @media (max-width: 1024px) {

    

         /* 1. HEADER COMPATTO */

        .navbar { 

         flex-direction: row; 

         justify-content: space-between; 

         padding: 10px 20px; 

         gap: 0; 

        }

       .logo img { max-height: 60px !important; } 

        .nav-links { display: none; } 

       .header-phones-container { display: none; } 

       .header-contact { margin: 0; } 



       /* 2. FIX CHI SIAMO - SOLUZIONE DEFINITIVA */

        .intro-grid { 

         display: flex;

         flex-direction: column;

         gap: 30px;

        }



        /* CONTENITORE FOTO - Forzato a rispettare le dimensioni */

        .slider-container { 

         width: 100% !important; 

         flex: none !important;

         aspect-ratio: 4 / 3 !important;   

         height: auto !important; 

         margin-bottom: 20px;

         min-width: auto !important;

         min-height: auto !important;

         overflow: hidden !important; /* CRITICO per iOS */

         position: relative !important;

        }



        /* WRAPPER - Deve riempire il contenitore */

        .slider-wrapper {

         width: 100% !important;

         height: 100% !important;

         margin: 0 !important;

         padding: 0 !important;

         display: flex !important;

         position: absolute !important; /* AGGIUNTO per iOS */

         top: 0 !important;

         left: 0 !important;

        }



        /* SINGOLA FOTO - Riempie completamente lo spazio */

        .slide {

         width: 100% !important;

         height: 100% !important;

         min-width: 100% !important;

         min-height: 100% !important;

         background-size: cover !important;

         background-position: center center !important;

         flex-shrink: 0 !important;

         border: none !important;

         outline: none !important;

         margin: 0 !important;

         padding: 0 !important;

        }



        /* 3. BLOCCO ZOOM COMPLETO (iOS + Android) */

        .slide, 

        .slide *,

        img,

        .staff-photo,

       .photo-slider,

        .slider-container,

       .slider-wrapper {

        /* Blocca selezione */

         -webkit-user-select: none !important;

         -moz-user-select: none !important;

         -ms-user-select: none !important;

         user-select: none !important;

        

         /* Blocca menu contestuale iOS */

         -webkit-touch-callout: none !important;

        

         /* Blocca evidenziazione tap */

         -webkit-tap-highlight-color: transparent !important;

        

         /* CRITICO: Impedisce zoom su doppio tap */

         touch-action: manipulation !important;

        

         /* Previene trascinamento */

         pointer-events: auto !important;

        }



       /* 4. STAFF E CONVENZIONI SCORREVOLI */

        .horizontal-scroll {

         flex-wrap: nowrap; 

         overflow-x: auto; 

         justify-content: flex-start; 

         padding: 20px 35px; 

         scroll-snap-type: x mandatory;

         -webkit-overflow-scrolling: touch; /* Smooth scroll iOS */

        }

        .horizontal-scroll::-webkit-scrollbar { display: none; } 

        .horizontal-scroll > div { 

         flex-shrink: 0; 

         scroll-snap-align: center; 

         scroll-snap-stop: always; 

        }



       /* 5. NASCONDI FRECCE */

       .slider-btn { display: none !important; }



       /* 6. RECENSIONI MOBILE */

       .reviews-section { padding: 40px 0; } 

       .review-slider-container {

         padding: 20px 0 !important; 

         width: 90%; 

         margin: 0 auto;

        }

       .review-slide { padding: 0 15px; } 

       .review-text { 

         font-size: 0.9rem; 

         line-height: 1.4; 

         margin-bottom: 10px; 

        }

       .stars { font-size: 1.1rem; margin-bottom: 5px; }

    

       /* 7. FIX COLORI LOGHI SU MOBILE */

       .convention-card img { filter: grayscale(0%) !important; }



       /* 8. TITOLI MOBILE */

       h1 { font-size: 2rem !important; }

       h2.section-title { font-size: 1.8rem; margin-bottom: 30px; }



       /* 9. Effetto touch feedback */

       .convention-card:active,

       .staff-card:active,

       .service-card:active {

         transform: scale(0.95);

         background-color: var(--light-blue-bg);

        }

      }