body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.8;
    margin: 0;
    padding: 0;
    font-size: 1.35rem;
    /* MANTIENI: Previene lo scorrimento orizzontale non voluto. Lo scorrimento verticale rimane libero (default). */
    overflow-x: hidden;
    /* Impedisce lo scroll orizzontale accidentale */
    hyphens: auto;
    /* giustificazione e a capo */
    text-align: justify;
    /* RIMOZIONE: La riga 'overflow: hidden !important;' è stata rimossa, in quanto avrebbe bloccato anche lo scorrimento verticale. */
}

        header {
            background-color: #305f72;
            color: white;
            text-align: center;
            font-size: 1.05rem;
            max-width: 1200px;
            margin: 2rem auto;
            /**** influisce solo sull'img biglietto che sta nello header *******/
            padding: 0 2.5rem 0.2rem 2.5rem;
            /* ⭐ AGGIUNGI QUESTO per bandierine ⭐ */
             position: relative; /* Rende l'header il contenitore di riferimento */
        }

        main {
            max-width: 1200px;
            margin: 2rem auto;
            /* ***********mantine la centratura, senno' tutto a sx ******************/
            padding: 0 0.5rem 0.5rem 0.5rem;
        }

        section {
            background: white;
            /* margin-bottom: 2rem; */
            margin: 2rem 0;
            margin: 2rem 0rem;
            /*sembra non cambiare nulla */
            padding: 0.5rem;
            /* padding: 0 8.5rem 0.2rem 12.5rem; */
            /* ******************in pratica restringe tutto dentro il body ************/
            border-left: 6px solid #305f72;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }

        h1 {
            font-size: 2rem;
            color: #D2B48C;
            z-index: -1;
        }

        h2 {
            color: #205f72;
        }

.language-link {
    /* Rimuove la sottolineatura tipica dei link */
    text-decoration: none;
    /* Fa sì che il link si comporti come il suo contenuto (il <span>) */
    display: block;
    /* Eredita il colore del testo (opzionale, ma consigliato) */
    color: inherit;
}
.flag-placeholder {
    /* position: absolute;
     ⭐ CORREZIONE: Abbassiamo la bandierina da -2rem a -1.5rem ⭐
    top: -1.7rem;
    right: 0.2rem;
    z-index: 10; */
/* ⭐ Soluzione: Usa Flexbox per allineare gli elementi interni ⭐ */
    display: flex;
    align-items: center; /* Allinea verticalmente gli elementi */
    gap: 5px; /* Aggiunge un piccolo spazio tra gli elementi interni */
    /* Rimuovi width: auto; se l'hai impostato */
    white-space: nowrap; /* Assicura che il testo non vada a capo */
    color: #305f72;
}

.flag-placeholder  {
    font-size: 1.2rem;
    line-height: 1;
    @media (max-width: 768px) {font-size: 0.6rem; }
}

/* Opzionale: Aggiungi un effetto al passaggio del mouse per renderlo ovvio */
.language-link:hover .flag-placeholder {
    opacity: 0.8;
    cursor: pointer;
}

.header-top-right-bar {
    position: absolute;
    top: -2rem; /* Lo riporta nell'area bianca sopra l'header */
    height: 2rem; /* Altezza fissa per facilitare il centraggio verticale */
    right: 0.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    white-space: nowrap;
}

/* Stile per la corona */
#admin-crown {
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    margin-top: -2px; /* Centratura verticale manuale per la corona */
}

/* Stile per il link lingua (pulito) */
.lang-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #305f72;
    font-size: 1.1rem;
}

/* Supporto Mobile */
@media (max-width: 768px) {
   .header-top-right-bar {
        right: 0.3rem;
        gap: 5px;
        /* Definiamo un'altezza per facilitare il centraggio */
        display: flex;
        align-items: center;
    }
    .lang-wrapper, #admin-crown {
        font-size: 0.8rem;
    }
}


        /* 2. QRCODE  Regole per la Nuova Immagine */
        .logo-h1-inline {
            /* Allinea l'immagine a sinistra (il testo la affiancherà) */
            float: left;
            /* CRUCIALE: Rende l'altezza pari all'altezza della riga flexbox */
            height: 100%;
            /* Mantiene le proporzioni */
            width: auto;
            /* Aggiunge spazio tra l'immagine e il testo "Il vostro rifugio..." */
            margin-right: 10px;
        }

        ol {
            padding-left: 1.5rem;
            list-style-type: decimal;
        }
        li { padding-left: 0rem;}
        .logo {
            display: block;
            margin: 0 auto;
            max-width: 30%;
            /* Dimensione massima, modificabile */
            height: auto;
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1rem;
        }

        .gallery-item {
            text-align: center;
            background: #f0f4f8;
            padding: 0.5rem;
            border-radius: 8px;
        }

        .gallery-item img {
            width: 100%;
            height: auto;
            border-radius: 5px;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .gallery-item img:hover {
            transform: scale(1.03);
        }

        .gallery-item img:focus {
            outline: 2px solid #305f72;
            transform: scale(1.03);
        }

        .caption {
            margin-top: 0.5rem;
            font-size: 1.5rem;
            color: #444;
            display: block !important;
            white-space: normal !important;
            max-width: 100% !important;
            overflow-wrap: break-word !important;
            word-wrap: break-word !important;
        }

        footer {
            text-align: center;
            padding: 1rem;
            font-size: 1rem;
            color: #777;
            background: #eaeaea;
        }

        iframe {
            width: 100%;
            height: 450px;
            border: none;
            border-radius: 10px;
        }

/*         non capisco proprio che ci faccia qui, ne' come ci sia finita
.image-biglietto {
            max-width: 95%;
            border-radius: 6px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        } */

        section a {
            color: #305f72;
            text-decoration: none;
            padding: 0.2rem 0.25rem;
            border-radius: 3px;
            transition: background-color 0.3s;
        }

        section a:hover {
            background-color: #f0f4f8;
            color: #204f62;
        }

        .button {
            --bg-color: #043972 ;
            --text-color: rgb(255, 255, 255);
            background: var(--bg-color) !important;
            color: var(--text-color);
            display: inline-block;
            padding: 0.75rem 1.5rem;
            text-decoration: none;
            border-radius: 5px;
            font-size: 1.4rem;
            @media (max-width: 768px) {font-size: 0.9rem;}
            font-weight: 500;
            margin-top: 1rem;
            transition: background-color 0.3s ease, transform 0.2s ease;
            white-space: normal;
            word-wrap: break-word;
        }

        /* .button:hover {
            background-color: #357ABD;
            transform: translateY(-2px);
        } */

        .button:focus {
            outline: 2px solid #D2B48C;
            outline-offset: 2px;
        }

        .button+.button {
            margin-left: 1rem;
        }

        .center {
            text-align: center;
        }

        #messaggio {
            /* Migliora il comportamento dello scroll sui dispositivi touch (iOS/Safari) */
            -webkit-overflow-scrolling: touch;
        }

        .lined-paragraph {
            border-top: 1px solid #9F9F9F;
            border-bottom: 1px solid #959595;
            padding: 10px 0;
            font-size: 70%;
        }

        /* Stile per contenere la selezione degli appartamenti e disporre le opzioni in colonna */
        .apartment-options {
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
        }

        /* Stile per ogni riga di opzione radio */
        .apartment-options .option-row {
            margin: 5px 0;
            cursor: pointer;
            padding: 5px;
            border: 1px solid transparent;
            /* Per un effetto visivo al passaggio del mouse/selezione */
        }

        /* Stile per i contenitori dei pulsanti */
        .booking-buttons {
            display: flex;
            flex-direction: column;
            /* Dispone i pulsanti in una colonna verticale */
            gap: 10px;
            /* Spazio tra i pulsanti */
            align-items: flex-start;
        }

        /* Stile base per tutti i pulsanti (opzionale) */
        .booking-buttons button,
         .booking-buttons a {
            --bg-color: #3250a9;
            --text-color: rgb(251, 251, 251);
            background: var(--bg-color);
            color: var(--text-color);

        }

        #sezione-prenotazioni {padding: 1.3rem; @media (max-width: 768px) { padding: 0.4rem;}} /* x la subsezione compila form */


        /* #contact {padding:0.5rem;}
#contact-form {
    padding:0.5rem;
    @media (max-width: 768px) { padding: 0;}
} */

        /* Contenitore del Sottotitolo (Desktop) */
        .h1-subtitle {
            display: flex;
            align-items: center;
            /* Mantiene la centratura verticale (necessaria!) */
            min-height: 10rem;
            /* Mantiene l'altezza di 10rem */
            position: static;
            /* o omettilo */
            text-align: left;
            /* L'allineamento a sinistra è ora di default */
            padding: 0;
        }

        /* Immagine del Logo (Desktop) */
        .logo-h1-inline {
            height: 8rem;
            /* DIMENSIONI del QRCODE */
            min-height: 5rem;
            max-height: 10rem;
            width: auto;
            object-fit: contain;
            padding-right: 1rem;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            /* Margine per staccarsi dal fondo */
        }

        /*
 * 1. Preparazione dell'immagine per lo Zoom
 * (Classe applicata all'IMG del QR Code, e l'IMG deve essere avvolta in un <a> con id="qr-header-zoom")
 */
        /*
* 1. Preparazione dell'immagine per lo Zoom
* (Classe applicata all'IMG del QR Code, e l'IMG deve essere avvolta in un <a> con id="qr-header-zoom")
*/
        .qr-zoom-target {
            transition: all 0.3s ease-in-out;
            /* * CORREZIONE: Impostiamo l'origine di trasformazione anche nello stato di default. */
            transform-origin: left bottom;
            /* Assicura che l'immagine ingrandita sia sopra gli altri elementi */
            position: relative;
            z-index: 5;
        }

        /* REGOLA FONDAMENTALE PER EVITARE L'HIGHLIGHT AL TAP (RISOLVE IL PROBLEMA DEL "RETANGOLO SPURIO" SUI TOUCHSCREEN) */
        #qr-header-zoom:active,
        #qr-header-zoom:focus {
            /* Previene l'highlight blu/grigio sui dispositivi touch */
            -webkit-tap-highlight-color: transparent;
            /* Assicurati anche che non ci siano outline indesiderati, per completezza */
            outline: none;
        }

        /* 2. Rimuovi lo stile di focus predefinito dall'attivatore <a> */
        #qr-header-zoom {
            outline: none;
             z-index: 4;
            /* Rimuove il bordo blu/arancione predefinito */
        }

        /* 3. QUANDO L'UTENTE CLICCA QR (FOCUS) SULL'ANCHOR <a>, INGRANDISCI L'IMMAGINE */
        #qr-header-zoom:focus .qr-zoom-target,
        #qr-header-zoom:hover .qr-zoom-target {
            /* Manteniamo l'origine della trasformazione sull'angolo INFERIORE SINISTRO. */
            transform-origin: left bottom;
            transition: transform 0.5s ease-in-out;
            /* Ingrandisce l'immagine (es. 3x) */
            transform: scale(3);
            /* Nota: Traslazioni rimosse. */
            /* Porta l'immagine sopra il testo del sottotitolo e la pagina */
            z-index: 5;
        }

        /* 4. Opacità del testo al focus (non nascosto, opacità 0.5) */
        /* Il selettore "~" si applica al testo del sottotitolo quando l'<a> ha il focus */
        #qr-header-zoom:focus~.subtitle-text {
            opacity: 0.5;
            /* Opacità ridotta per visibilità */
            /* La proprietà visibility è stata rimossa, poiché non nascondiamo l'elemento. */
            transition: opacity 0.3s;
        }

        /* REGOLA CRUCIALE NEL TUO CSS */
        .force-zoom-off:hover .qr-zoom-target {
            /* Impedisce l'ingrandimento quando l'hover è "sospeso" */
            transform: none !important;
            /* transition: none !important; fa scomparire repentinamente */
        }

        @media screen and (max-width: 768px) {
            /*dimensione testo*/
            .gallery {
                grid-template-columns: 1fr;
            }
            body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                line-height: 1.6;
                /*  background-color: #f5f7fa;
                color: #3e2e2e; */
                margin: 0;
                /* padding-left : 0.85rem;
                padding-right: 1rem ; */
                font-size: 0.95rem;
            }
            /* Soluzione 1 & 2: Elimina il padding laterale su Header e Main */
            header,
            main {
                padding: 0;
                padding: 0.5rem 0 0.5rem 0;
                /* o usa 0 0.5rem se vuoi un leggero respiro, ma 0 per massima larghezza */
            }
            /* Soluzione 3: Riduci il padding sulle sezioni */
            section {
                padding: 0.4rem 1rem 1rem 1rem;
                margin: 1rem 0rem 2rem 0.015rem;
                /* background-color: #0057b33f; */
                /* BUONO PER TESTI ************ top right bottom left   Esempio: 1rem sopra/sotto, 0.5rem dx/sx IMPORTANTE FA TUTTI MARGINI MEDIA ****************************/
                /* padding: 1rem 0; */
                /* BUONO PER SWIPER */
                /* Oppure, per la massima larghezza, usa: padding: 1rem 0; */
                /*top right bottom left*   lo strizza dentro il body*********/
            }


            h1 { font-size: 1.2rem;
            padding: 0rem 0.5rem; margin-bottom: 0.3rem;
            }
            h2 { font-size: 1.2rem;  }
            header { font-size: 1rem;  }

                /* p {
                    padding: 0 22.5rem 0 10.5;
                } */

            .caption { font-size: 1rem;  }
            .logo {  max-width: 80%;    }
            /* REGOLA PER IL NUOVO LOGO: */
            .logoFinalQr {
                max-width: 35vw !important;
                /* Sovrascrive il 30% per schermi piccoli */
            }



            #messaggio {
                /* Questo fornisce l'indicazione visiva all'utente */
                overflow: scroll;
            }
            .logo-h1-inline {
                /* NUOVO DIMENSIONAMENTO: QRCODE  2rem */
                height: 4rem;
                min-height: 2rem;
                max-height: 5rem;
                padding-right: 0.3rem;
                float: none;
                margin-top: 0;
                margin-bottom: 0rem;
                margin-right: 0.5rem;
            }
            /* 2. ADATTAMENTO DEL CONTENITORE */
            .h1-subtitle {
                /* min-height deve corrispondere all'altezza del logo (2rem) */
                min-height: 4rem;
                display: flex;
                align-items: center;
                position: static;
                text-align: left;
            }
        }

        /* 2. REGOLA SPECIFICA (Galleria Full-Width) */
        /* Questa sovrascrive la regola generale solo per le sezioni con class="galleria". */
        section.galleria {
            /* Azzera il padding laterale (0), lasciando solo il padding verticale (1rem) */
            padding: 1rem 0.7rem;
            /* BUONO PER SWIPER */
            /* Nota: Se hai bisogno di centrare l'intera sezione, potresti anche azzerare i margini laterali */
            margin: 1rem 0 2rem 0;
        }

        /* ------------------- STILI LOGO ANIMATO (NUOVI) ------------------- */
        /* 1. Keyframes (Rotazione Oscillante continua) */
        @keyframes rotateOscillate {
            0% {
                transform: rotate(-10deg);
            }

            100% {
                transform: rotate(10deg);
            }
        }

        /* 2. Contenitore (Centratura e Focus) */
        .logo-container {
            text-align: center;
            /* Margine per separare il logo dalle sezioni adiacenti */
            margin: 1rem auto;
            display: block;
            /* Padding rimosso per accostare il logo, ma da re-introdurre se si sovrappone */
            padding: 0;
            max-width: 800px;
            /* Imposta una larghezza di base per contenere il focus */
            /*width: 800px;*/
            /*stranamente con 800 quando si fa tab il rettangolo evidenziatore si allinea a 1200 MA su mobile si sposta dx*/
            min-width: 100px;
            /* Imposta una larghezza minima per l'area di focus */
            min-height: 100px;
            /* Imposta un'altezza minima per l'area di focus */
        }

        /* 3. Zoom Target (Nuovo elemento intermedio - GESTISCE LO ZOOM) */
        .zoom-target {
            /* Essenziale per la transizione di zoom e centratura */
            display: inline-block;
            transition: transform 0.3s ease-in-out;
            transform-origin: center center;
        }

        /* 4. Immagine (Rotazione continua - GESTISCE SOLO LA ROTAZIONE) */
        .logo-animated {
            display: block;
            margin: 0 auto;
            width: 30%;
            /* Applichiamo la rotazione solo all'immagine */
            animation: rotateOscillate 8s ease-in-out infinite alternate;
        }

        /* 5. Stato Interattivo (Ingrandimento - APPLICATO AL TARGET INTERMEDIO) */
        .logo-container:hover .zoom-target,
        .logo-container:focus .zoom-target {
            /* Impostiamo la scala a 1.5 */
            transform: scale(1.5);
        }

        /* ------------------- FINE STILI LOGO ANIMATO ------------------- */

        .logo-fix {
            display: block;
            margin: 0 auto;
            width: 20%;
            height: auto;
        }

        /* Stile per l'immagine della mappa piccola a dx inizio*/
        /* REGOLA DI BASE: Contenitore Fisso (area di focus/tocco) */

/* Quando lo stato di nearbyzoom è attivo su <body> *********** NEARBY begin *************************/
body.nearby-has-zoom .qr-activator {
    opacity: 0.9;      /* Rende piu' opaco l'elemento link del QR code */
    /* pointer-events: none ; */
    transition: opacity 1s ease-in-out;
}

section,
.section-clearfix {
        /* ⭐ Soluzione per contenere gli elementi flottanti ⭐ */
    overflow: hidden;
    }
.section-clearfix.is-zoomed-sect {
    overflow: visible ;
}
.clearfix {
    /* Proprietà cruciale: forza l'elemento a non avere nulla flottante ai lati */
    clear: both;
    /* Queste proprietà sono utili per rendere il div invisibile e senza spazio extra */
    height: 0;
    visibility: hidden;
    /* Con la variante con 'content', possibile anche usare: display: block; content: ""; */
}
        .map-wrapper,
        .nearby-wrapper {
            float: left;
            margin: 0px 1em 10px 0rem; /* T.R.B.L. */
            /* padding: 5px; */
            border-radius: 5px;
            width: 30%;
            max-width: 150px;
            cursor: pointer;
            position: relative;
            z-index: 2;
            transition: transform 0.3s ease-out;
            transform-origin: right center;
           /* box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.2); */
        }

        /* REGOLA DELL'IMMAGINE: Dimensioni e Transizione */
        .map-zoom,
        .nearby-zoom {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 5px;
            /* Transizione e punto di origine per lo zoom */
            transition: transform 0.3s ease-in-out/* , box-shadow 0.3s */;

            z-index: 2;
        }




        /* NUOVA REGOLA DA INSERIRE NEL TUO CSS */
        .map-wrapper.is-zoomed .map-zoom,
        .nearby-wrapper.is-zoomed .nearby-zoom  {
            z-index: 100;
            outline: none;
            /* box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); */
        }

         .map-wrapper.is-zoomed   {
            --mapBorder: 0px;
        }
         .map-wrapper.is-zoomed .map-zoom    {
            border:  var(--mapBorder) solid #ddddddfa;
        }

        .map-wrapper.force-zoom-off:hover .map-zoom/* ,
        .nearby-wrapper.force-zoom-off:hover .nearby-zoom */ {
            transform: none !important;
            /* transition: none !important; */
        }

        /* REGOLA PER L'EVIDENZIAZIONE HOVER */
            .map-wrapper:hover,
            .map-wrapper:focus,
            .nearby-wrapper:hover,  /* ⭐ AGGIUNTO QUI ⭐ */
            .nearby-wrapper:focus {
                /* Ombra più pronunciata */
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
                transform: scale(1.03);
                outline: none;
                border: none;
            }
        /* END stile mappa */


            /* *********************** NEARBY ****************************************** */ /* T.R.B.L. */
.nearby-inner {
    position: absolute;
    border-radius: 5px;
    top: 0;
    left: 0;
padding: 0; margin: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    overflow: hidden;
}

.nearby-wrapper {
    float: left;
    margin: 0px 1rem 10px 0px; /* T.R.B.L. */
    --nearbyTranslateX: 1%;
    /* @media (max-width: 768px) {--nearbyTranslateX: 30%;} */
    --nearbyTranslateY: -1rem;
    width: 30%;
    max-width: 30%;
    height: 0;
    padding-top: 20%;
    overflow: hidden;
    transform-origin: left center;
    cursor:default;
}
@media (max-width: 768px) {
.nearby-wrapper {
 height: 0;
 padding-top: 50%;
}
}


.nearby-wrapper.is-zoomed {
    --nearby-zoom-factor: 3.6;
    background-color: #5f85de;
    transform: translateZ(0);
    position: absolute;
    z-index: 5;
    /* top: 0;
    left: 0; */
    /* ⭐ DIMENSIONAMENTO FISSO IN PIXEL (Dalla funzione JS) ⭐ */
    width: var(--nearby-base-width);
    max-width: var(--nearby-base-width);
    height: var(--nearby-base-height);
    padding-top: 0;
    /* left: var(--nearbyTranslateX); */
    /* top: 0; */
    /* top: var(--bottomHeader);  *//* Posizionamento corretto sotto l'header  JS*/
    transform-origin: top left; /* Puoi mantenere l'origine originale */
    transform:
               translateY(calc(var(--nearby-delta-y) + var(--nearby-base-height) * 0.5))
               scale(var(--nearby-zoom-factor))
               /* scale(3) */
               /* translateY(+4%) */
               translateX(calc(var(--nearbyTranslateX) - 5%)); /* sposta tutto blocco a dx */
    overflow: visible;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    @media (max-width: 768px) {
        --nearby-zoom-factor: 3.8;
            transform:
               translateY(calc(var(--nearby-delta-y) + var(--nearby-base-height) * 0.5))
               scale(var(--nearby-zoom-factor))
               translateX(calc(var(--nearbyTranslateX) - 8%)); /* sposta tutto blocco a dx */
        /* transform:
               translateX( - 43%); */

        /* Regola mobile: sovrascrivi solo le regole mobili, come il top */
        /* top: 15vw; */
    }
}




.map-wrapper.is-zoomed {
    /* Uscita dal flusso per non lasciare il "buco" nel layout PC translateX(-50%)*/
    top: 0;
   transform: scale(3) translateX(calc(71% + var(--mapBorder))) translateY(5%);
    z-index: 3;
}


/* * 🛑 Disattivazione Transizioni in Modalità Navigazione Veloce (Fast Manual Navigation)
 * Questa regola sovrascrive le transizioni su tutti gli elementi che subiscono lo swap
 * e la trasformazione quando la classe 'no-transition' è presente sul contenitore.
 */
/* Azzeramento delle transizioni sugli elementi immagine che subiscono il cross-fade/scale */
/* .nearby-wrapper.no-transition,
.nearby-wrapper.no-transition #nearby-title,
.nearby-wrapper.no-transition .nearby-zoom {
    transition: none !important;
    animation: none !important;
} */
/* .nearby-wrapper.no-transition {
    transition: none !important;
    animation: none !important;
}
.nearby-wrapper.no-transition #nearby-title {
    transition: none !important;
} */


/* ------------------------------------------------------------------------- */
/* SEZIONE PER CROSS-FADE E ADATTAMENTO VERTICALE (CORREZIONE) */
/* ------------------------------------------------------------------------- */

/* COMMENTATO: usa id selector → override sotto con .nearby-img-1/.nearby-img-2 */
/*
#nearby-img-1,
#nearby-img-2 {
    position: absolute; top: 0; left: 0; padding: 0; margin: 0;
    width: var(--scaledWidth); height: var(--scaledHeight);
    transform: translate(calc(var(--maxTranslateX) * -0.5), calc(var(--maxTranslateY) * -0.5));
    object-fit: cover; object-position: center; opacity: 0; z-index: 2;
}
#nearby-img-1.is-active, #nearby-img-2.is-active { opacity: 1; z-index: 3; }
#nearby-img-1.is-vanishing, #nearby-img-2.is-vanishing { opacity: 0; }
*/

.nearby-shutdown img {
    /* 1. Annulla tutte le transizioni (essenziale per fermare il conflitto ease) */
    opacity: 1   ;
    transition: opacity 0.1s ease-in-out !important;
    /* 2. Forza un'opacità invisibile (o completamente visibile, a seconda di cosa '1' fa) */
    /* Poiché `current.style.opacity = '1'` ha risolto il flash, usiamo opacity: 1 per resettare lo stato. */
    /* 3. Assicura che la visibilità non sia un problema */
    /* visibility: visible !important; */
}

/* #xxnearby-img-1:not(.is-active),
#xxnearby-img-2:not(.is-active) {
    transform: translate(calc(var(--maxTranslateX) * -0.5),
            calc(var(--maxTranslateY) * -0.5)) !important;
    animation: none !important;
} */



/* 3. Posizionamento e Stile della didascalia (Stato non zoomato/base) */
/* COMMENTATO: usa id selector, gardabase usa class=".nearby-title" → override sotto */
/*
#nearby-title {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    border-radius: 3px;
    color: #f8ecc6;
    background: rgba(13, 53, 99, 0.908);
    --titleSize: 1.1em;
    @media (max-width: 768px) {--titleSize: 0.8rem;}
    font-size: var(--titleSize);
    font-weight: bold;
    text-align: center;
    transform-origin: top;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0s ease-out;
}
*/

/* ⭐ 4. Regola Condizionale: Stato Zoomato (Correzione del Titolo) ⭐ */
/* COMMENTATO: usa id selector → override sotto */
/*
.nearby-wrapper.is-zoomed #nearby-title {
    opacity: 1;
    width: 98%;
    transform-origin: top;
    transform: translateX(1%) translateY(calc(100% + 0px));
    z-index: 100;
    font-size: calc(var(--titleSize) / var(--nearby-zoom-factor));
}
*/

/******nearby scroll automatico vert horiz dell'immagine
/* ➡️ Animazione Orizzontale (per immagini troppo LARGHE) */
/* @keyframes xxxxscrollHorizontal {
    0% { object-position: 50% 50%; }
    15% { object-position: 100% 50%; }
    85% { object-position: 0% 50%; }
    100% { object-position: 50% 50%; }
}

@keyframes xxxxscrollVertical {
    0% { object-position: 50% 50%; }
    15% { object-position: 50% 100%; }
    85% { object-position: 50% 0%; }
    100% { object-position: 50% 50%; }
}
.xxxxnearby-wrapper.scroll-h img {
    animation: scrollHorizontal
        var(--scroll-duration)
        linear
        infinite
        normal;
    animation-fill-mode: forwards;
}

.xxxxnearby-wrapper.scroll-v img {
    animation: scrollVertical
        var(--scroll-duration)
        linear
        infinite
        normal;
    animation-fill-mode: forwards;
} */


@keyframes scrollHorizontalTransform {
    0% { transform: translateX(calc(var(--maxTranslateX) * -0.5)) translateY(calc(var(--maxTranslateY) * -0.5)); }
    25% { transform: translateX(calc(var(--maxTranslateX) * -1)); }
    50% { transform: translateX(calc(var(--maxTranslateX) * -0.5)); }
    75% { transform: translateX(0); }
    100% { transform: translateX(calc(var(--maxTranslateX) * -0.5)); }
}

@keyframes scrollVerticalTransform {
    0% { transform: translateX(calc(var(--maxTranslateX) * -0.5)) translateY(calc(var(--maxTranslateY) * -0.5)); }
    25% { transform: translateY(calc(var(--maxTranslateY) * -1)); }
    50% { transform: translateY(calc(var(--maxTranslateY) * -0.5)); }
    75% { transform: translateY(0); }
    100% { transform: translateY(calc(var(--maxTranslateY) * -0.5)); }
}

/* COMMENTATO: usa id selector → override sotto */
/*
#nearby-img-1.scroll-v, #nearby-img-2.scroll-v { animation: scrollVerticalTransform var(--scroll-duration) linear infinite normal; }
#nearby-img-1.scroll-h, #nearby-img-2.scroll-h { animation: scrollHorizontalTransform var(--scroll-duration) linear infinite normal; }
*/

/* Posizionamento e aspetto generale dei bottoni di navigazione */
.nearby-nav-btn {
    position: absolute;
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%); /* Regola la centratura esatta */
    z-index: 10; /* Assicura che sia sopra l'immagine */
    cursor: pointer;
    background: rgba(0, 0, 0, 0.163); /* Sfondo nero semi-trasparente */
    color: rgba(255, 255, 255, 0.383);
    border: none;
    border-radius: 50% ; /* 4px Angoli leggermente arrotondati */
    width: 1.6rem; /* Larghezza fissa */
    height: 1.6rem; /* Altezza fissa (uguale alla larghezza) */
    line-height: 0;
    margin: 0;
    padding: 0;
    font-size: 1.1rem;
    display: flex;
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente */
    padding-bottom: 0.2rem;

    /* Nascondimento predefinito e transizione */
    opacity: 0;
    pointer-events: none; /* Impedisce che intercettino i click quando sono invisibili */
    transition: opacity 0.3s ease;
}

/* Posizionamento specifico per Sinistra (Prev) */
.prev-btn {
    left: 0.2rem;
}
/* Posizionamento specifico per Destra (Next) */
.next-btn {
    right: 0.2rem;
}

/* 🚀 Rende i bottoni VISIBILI e CLICCABILI solo in modalità ZOOM 🚀 */
/* 🚀 Correzione e Visualizzazione in Modalità ZOOM 🚀 */
.nearby-wrapper.is-zoomed .nearby-nav-btn {
    opacity: 1;
    pointer-events: auto;
    /* ⭐ ANNULLA LA SCALA DEL GENITORE E MANTIENE LA CENTRATURA VERTICALE ⭐ */
    /* Lo scale(calc(1 / var(--nearby-zoom-factor))) annulla lo scale(3) del genitore */
    /* Regola il margine per distanziarli dal bordo del wrapper ingrandito */
    margin: 0;
    /* transform: translateY(-50%) scale(calc(1 / var(--nearby-zoom-factor))); */
}
/* 📱 Regola per il Mobile: Riduci padding e font in modalità zoom */
@media (max-width: 768px) {
    .nearby-wrapper.is-zoomed .nearby-nav-btn {

        width: 0.7rem;
        height: 0.7rem;
       /*  line-height: 0rem;  *//* Centra verticalmente il testo */
        font-size: 0.8rem; /* Carattere standard per mobile  (e' il bottone rotondo*/
        padding-bottom: 0.15rem;
    }
}

/* COMMENTATO: usa id selector → override sotto con .nearby-counter */
/*
#nearby-counter {
    position: absolute;
    bottom: 1%;
    right: 2%;
    z-index: 15;
    background: rgba(0, 0, 0, 0.469);
    color: rgba(153, 149, 149, 0.99);
    padding: 0px 5px;
    margin: 0;
    border-radius: 4px;
    font-size: calc(2rem / var(--nearby-zoom-factor));
    cursor: default;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.nearby-wrapper.is-zoomed #nearby-counter {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}
*/

/* 1. Impedisce che l'accordion tagli l'immagine ingrandita */
.accordion, .accordion-body {
    overflow: visible !important;
}




/* ********** FINESTRELLA MODALE INPUTBOX MESSAGEBOX ***************** */
#ao-prompt-overlay {
    /* VISIBILITÀ: Nascosto di default */
    display: none ;
    /* POSIZIONAMENTO: Fissato su tutto lo schermo */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    /* ASPETTO: Sfondo fumé per focalizzare l'attenzione */
    background: rgba(116, 116, 116, 0.804);
    /* CENTRAGGIO: Usa Flexbox per centrare il box interno */
    justify-content: center;
    align-items: center;
}

#drag-handle {
    cursor: grab; /* Indica all'utente che l'elemento è trascinabile */
    background-color: #305f72;
    color: white;
    /* ⭐ NUOVE REGOLE PER ALLINEAMENTO A DESTRA ⭐ */
    display: flex;
    align-items: center; /* Centra verticalmente testo e bottone */
    justify-content: flex-start; /* Fa partire il testo a sinistra */
    padding: 8px 10px; /* Aumento il padding orizzontale per un po' d'aria */
    margin: -25px -25px 0 -25px;
    border-radius: 8px 8px 0 0;
}
#drag-handle:active {
    cursor: grabbing; /* Cambia l'icona quando l'utente sta effettivamente trascinando */
}

#ao-prompt-close-btn {
    margin-left: auto; /* ⭐ SPINGE IL BOTTONE ALL'ESTREMA DESTRA ⭐ */
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 3rem !important;
    font-weight: 100;
    /* line-height: 1; */
    padding: 0 5px !important;
    color: inherit;
        @media (max-width: 768px)
        {padding: 15px 20px 0px 5px !important;
         font-size: 2rem !important ;




        }
}
#prompt-title-text {
    /* ⭐ 1. Occupare lo spazio disponibile ⭐ */
    flex-grow: 1;
    /* ⭐ 2. Centrare il testo all'interno di quello spazio ⭐ */
    text-align: center;
    font-size: 2rem;

    @media (max-width: 768px)
        {font-size: 1rem;
         padding: 15px 0px 3px 11px;
        }

}

#ao-prompt-box {
    /* DIMENSIONI BOX */
    position: absolute;
    overflow: hidden;
    width: 65vw;
    max-width: 500px;
    min-height: 280px; /* Ridotto per essere più proporzionato al contenuto */
    height: auto;
    /* ASPETTO */
    background: rgba(154, 154, 154, 0.753);
    color: black;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* LAYOUT INTERNO */
    display: flex;
    flex-direction: column;

    gap: 20px; /* Aumentato il gap per maggiore spaziatura tra gli elementi */
    /* === MODIFICHE CRUCIALI PER LA GRANDEZZA === */
    font-size: 2.2rem;   /* NUOVA BASE FONT: Tutto nel box sarà basato su questa dimensione (circa 24px) */
    line-height: 1.8;    /* Spaziatura verticale per tutto il testo */
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    @media (max-width: 768px)
        {padding: 5px;
         font-size: 1rem;
         line-height: 1;
        min-height: 120px;
        margin: -5px -5px 0 -5px;

    }
}
/* Stile per l'Input e i Pulsanti */
#ao-prompt-box #ao-prompt-input,
#ao-prompt-box button {
    font-size: 1.8rem;
    line-height: 1.2; /* Line height leggermente ridotto per l'interazione */
    padding: 15px 18px; /* Padding generoso per aumentarne l'altezza e l'area cliccabile */
    border-radius: 6px; /* Arrotondamento per un aspetto moderno */
    @media (max-width: 768px) {font-size: 1rem; padding: 5px;}
}
  /* ***********************end NEARBY ******************************************left: 45%;  font-size: calc((14px) / 3);

/* SEZIONE EMAIL */
        /* Per form email */



#contact form,
        .form-fields-wrapper{
            display: grid;
            gap: 15px;
            max-width: 600px;
            margin: 0 auto;
        }


        #contact input,
        #contact textarea {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            width: 100%;
            box-sizing: border-box;
        }

        #contact input.error,
        #contact textarea.error {
            border-color: red;
        }

        #contact button {  /* e' il bottone invia richiesta */
            --bg-color: #3250a9;
            --text-color: rgb(251, 251, 251);
            background: var(--bg-color);
            color: var(--text-color);
            padding: 15px;
            border: none;
            border-radius: 5px;
            font-size: 1.1em;
            cursor: pointer;
        }

        /* Stile del Bottone Chiama Ora */
        .call-button {
            --bg-color: #0e340e;
            --text-color: rgb(251, 251, 251);
            background: var(--bg-color);
            color: var(--text-color);
            /*
            padding: 15px;
            border: none;
            border-radius: 5px;
            font-size: 1.1em;
            cursor: pointer;
            display: inline-block; */ /* Rende il link simile a un bottone */
/*
            text-decoration: none; */ /* Rimuove la sottolineatura tipica dei link */
            /* font-weight: bold; */

        }

        .button:hover,
        .call-button:hover,
        #contact button:hover,
        .bottone-primario:hover,
        .booking-buttons button:hover,
        .booking-buttons a:hover {
            background: var(--bg-color);
            color: var(--text-color);
            filter: brightness(1.12);
            transform: scale(1.02);
            /* 3. Alone Semitrasparente (ombra morbida e diffusa) */
            box-shadow: 0 0 25px var(--bg-color);
            --trans-time: 0.3s;
            transition: filter var(--trans-time) ease,
                transform var(--trans-time) ease,
                box-shadow var(--trans-time) ease,
                background-color var(--trans-time) ease, /* Aggiungila se cambi lo sfondo */
                color var(--trans-time) ease; /* Aggiungila se cambi il colore del testo */
}

/* occhietti che saltano su */
.bottone-primario {
  position: relative;
  overflow: hidden;
  padding: 14px 24px;
  font-size: 0.8rem;
}
.bottone-primario .char {
  position: absolute;
  right: 20px;
  bottom: -60px;
  transition: all 0.3s ease;
}
.bottone-primario:hover .char {
  bottom: 0px;
}

        #contact .message {
            display: none;
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
            text-align: center;
        }

        #contact .success {
            background: #dff0d8;
            color: #3c763d;
        }

        #contact .error {
            background: #f2dede;
            color: #a94442;
        }

        /**************************************************/
        /* SOLUZIONE FINALE: FORZA LA TRANSIZIONE SU TUTTI GLI STATI */
        /**************************************************/
        /**************************************************/
        /* OTTIMIZZAZIONE PHOTOSWIPE LIGHTBOX (Durata: 0.5s) */
        /**************************************************/


        /* 1. CONFIGURAZIONE SFONDO (OVERLAY: .pswp__bg) */
        .pswp__bg {
            /* 🛠️ ACCELERAZIONE HARDWARE: Forzatura per fluidità */
            transform: translate3d(0, 0, 0);

            /* 🛠️ TRANSIZIONE: Dissolvenza a 0.5s per sfondo e colore */
            transition: opacity 0.5s ease-in-out, background-color 0.5s ease-in-out !important;

            /* Se devi forzare i valori fissi, decommenta: */
            /* background-color: #000000 !important; */
            /* opacity: 0.85 !important; */
        }

        /* 2. TRANSIZIONE STATO NASCOSTO: Assicura che la dissolvenza funzioni anche in chiusura */
        /* La regola transform è stata rimossa da qui (ereditata da .pswp__bg) */
        .pswp--hide .pswp__bg {
            transition: opacity 0.5s ease-in-out, background-color 0.5s ease-in-out !important;
        }

        /* 3. CONFIGURAZIONE IMMAGINE INGRANDITA (.pswp__img) */
        .pswp__img {
            /* 🛠️ ACCELERAZIONE HARDWARE: per l'immagine stessa */
            transform: translate3d(0, 0, 0);

            /* 🛠️ TRANSIZIONE OPACITÀ: per il fade-in/fade-out dell'immagine a 0.5s */
            transition: opacity 0.5s ease-in-out !important;
        }

        /* 4. NEUTRALIZZAZIONE CONTENITORI (Correzione del rendering) */
        .pswp,
        .pswp__scroll-wrap {
            background-color: transparent !important;
            overflow: visible !important;
        }

/* Correzione CSS aggiornata per pswp__caption__center
pswp__pswp__caption pswp__hide-on-close */
/* .pswp__ui .pswp__pswp__caption
.pswp__ui .pswp__hide-on-close,
.pswp__ui .pswp__caption,
.pswp__ui .pswp__pswp__caption,
.pswp__ui .pswp__caption__center ,
.pswp__ui .pswp__caption__content,
.pswp__ui .pswp__caption__inner,
.pswp__ui .pswp__caption__open

{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9999 !important;

    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;

    color: white !important;
    padding: 10px !important;
    background: rgba(0, 0, 0, 0.8) !important;
} */






/* Se devi usare il selettore esatto che hai postato (con la classe duplicata): */
.pswp__pswp__caption {
    color: antiquewhite;
    /* padding: 10vh 1rem 0rem 1rem; T, R, B, L */
    padding: 1rem 10dvh 1.5rem 1rem;
    /* padding-left: 10vw; */
    font-size: clamp(16px, 2dvh, 2rem);
    width: 100%;
max-height: none !important;
    height: auto !important;
    /* Forza il testo ad andare a capo se necessario */
    white-space: normal !important;
text-shadow:
        1px 1px 0 #0f1010,   /* Basso-destra */
       -1px 1px 0 #0f1010,   /* Basso-sinistra */
        1px -1px 0 #0f1010,  /* Alto-destra */
       -1px -1px 0 #0f1010;  /* Alto-sinistra */
}


/* Usiamo il selettore che funziona: pswp__pswp__caption */
.pswp__pswp__caption {
    color: antiquewhite;

    /* ⭐ 1. POSIZIONAMENTO IN BASSO (La regola che mancava) ⭐ */
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important; /* Annulla qualsiasi top per far funzionare bottom: 0 */
    /* 2. PADDING STABILE E CORRETTO */
    /* Annulla i valori dinamici e instabili: Top: 1rem, Right: 1rem, Bottom: 1.5rem, Left: 1rem */
    padding: 1rem 1rem 3dvw 6dvw;
    /* 3. ALTEZZA DINAMICA (necessaria per le righe multiple) */
    max-height: none !important;
    height: auto !important;
    white-space: normal !important;
    /* 4. ALLINEAMENTO TESTO A SINISTRA (Blocco centrato sotto l'immagine) */
    text-align: left; /* Allinea il testo a sinistra */
    max-width: 1000px; /* Limita la larghezza del blocco di testo (regola se necessario) */
    margin: 0 auto;    /* Centra il blocco di max-width sullo schermo */
    /* 5. FONT-SIZE E CONTORNO */
    font-size: clamp(16px, 2dvh, 2rem);
    width: 100%;
    text-shadow:
        1px 1px 0 #0f1010,
        -1px 1px 0 #0f1010,
        1px -1px 0 #0f1010,
        -1px -1px 0 #0f1010;
}



.pswp__counter {
    font-size: 1.5vh;
}

        html {
            scroll-behavior: smooth;
        }

        .bottone-primarioxxxDELME {
            --bg-color: #014ea0;
            --text-color: rgb(236, 232, 232);
            background: var(--bg-color);
            color: var(--text-color);
            /* Rimuove l'aspetto di default del link */
            text-decoration: none;
            /* Forma del bottone */
            display: inline-block;
            /* O 'block' per larghezza intera */
            padding: 12px 25px;
            /* Spazio interno per dare forma */
            border-radius: 8px;
            /* Angoli arrotondati */
            border: none;
            /* Rimuove il bordo del bottone se presente */
            cursor: pointer;
            /* Indica che è cliccabile */
            /* Testo bianco */
            font-size: 1.5rem;
            /* Rende il testo evidente */
            @media (max-width: 768px) {font-size: 0.9rem; }
            font-weight: bold;
            /* Rende il testo forte */
            margin: 20px;
            /* Effetto Hover (quando ci passi sopra con il mouse) */
            transition: background-color 0.3s ease;
            text-align: center;
        }


        /* ========================================================== */
        /* DEFINIZIONE KEYFRAMES (Animazione Zoom Veloce) */
        /* ========================================================== */
        @keyframes zoom-pulse {
            0% {
                transform: scale(1);
            }

            100% {
                transform: scale(1.2);
                /* Zoom del 10% */
            }
        }

@keyframes fade-pulse {
    0%, 70%, 100% { opacity: 1; }
    50%           { opacity: 0.9; }
}
        /* **************** VETRINA **************************  */
        /* ========================================================== */
        /* STILI VETRINA PRINCIPALE (CONTENIMENTO E ANIMAZIONE ZOOM) */
        /* ========================================================== */
        /* 🎯 1. Contenitore Vetrina: Definisce l'area fissa (GENITORE RELATIVO) */
        .vetrina-principale {
            width: 99% ;
            /* background-color: #007bff8d; */
            position: relative;
            box-sizing: border-box;
            margin: 0 ;
            /* padding: 0.2rem ; */
            /* padding-right: 11rem; */
            border-radius: 6px;
            display: block ;
            height: 600px ;
            overflow: hidden ;
            min-height: 600px ;
        }

        /* ⭐ NUOVA IMMAGINE STATICA (.vetrina-immagine) */
        .vetrina-immagine {
            object-fit: cover !important;
            width: 100% !important;
            height: 100% !important;
            display: block !important;
            /* Animazione e Z-Index */
            /* transform: scale(1.1); */
/*             animation: zoom-pulse 5s infinite alternate;
            transition: transform 5s ease-in-out; */
            z-index: 1;
            /* Deve stare sotto il bang (che ha z-index 9999) */
        }

        .vetrina-immagine {
            object-fit: cover !important;
            width: 100% !important;
            height: 100% !important;
            display: block !important;
            animation: zoom-pulse 5s infinite alternate,
                    fade-pulse 7s infinite ease-in-out;
            transition: transform 5s ease-in-out;
            z-index: 1;
        }

        /**********************************************/
        /* 4. LINK DI PRENOTAZIONE (IL BOTTONE) - STILE DESKTOP */
        /**********************************************/
        .cta-bang-link {
            position: absolute !important;
            bottom: 20px !important;
            right: 20px !important;
            z-index: 20 ;
            text-decoration: none;
            /* Le tue correzioni esistenti */
            width: auto !important;
            height: auto !important;
            left: auto !important;
            top: auto !important;
            visibility: visible !important;
            opacity: 1 !important;
            /* ⭐ AGGIUNTE CRUCIALI PER IL TOCCO MOBILE ⭐ */
            display: inline-flex !important;
            cursor: pointer !important;
            will-change: transform;
             -webkit-tap-highlight-color: transparent;
            padding: 0 !important;
        }

        /**********************************************/
        /* 5. IL CONTENITORE VISIVO (BANG E TESTO) - TRASPARENTE */
        /**********************************************/
        .cta-bang {
            display: flex;
            align-items: center;
            white-space: nowrap;
            /* Impedisce al testo di andare a capo */
            /* Stile Trasparente */
            background-color:#00ffae00;
            padding: 5px ;
            border-radius: 10px !important;
            box-shadow: none !important;
            cursor: pointer;
            /* Assicuriamo che anche su PC collassi al contenuto */
            width: fit-content !important;
            height: fit-content !important;
        }

        /**********************************************/
        /* 6. STILE ICONA E TESTO (DESKTOP) */
        /**********************************************/
        .cta-bang .bang-icon {
            width: 80px !important;
            height: 80px !important;
            margin-right: 10px;
        }

        .cta-bang .bang-text {
            font-size: 1.4em !important;
            font-weight: bold;
            color: white;
            text-transform: uppercase;
            /* ⭐ NUOVA OMERA FORTE: Simula un contorno nero attorno al testo bianco ⭐ */
            text-shadow:
                -2px -2px 0 #333,
                /* Spostato a 2px e colore a #333 (grigio scuro) */
                2px -2px 0 #333,
                -2px 2px 0 #333,
                2px 2px 0 #333,
                0px 0px 5px rgba(0, 0, 0, 0.8);
        }

        /* Quando il mouse è sopra (desktop) O quando l'utente tocca (mobile) */
        .cta-bang-link:hover,
        .cta-bang-link:active {
            transition: all 0.15s ease-in-out;
            background-color: transparent !important;
            padding: 0 !important;
            width: auto !important;
            /* ✅ Corretto */
        }

        /* Fai muovere il testo leggermente (ad esempio, fallo salire di 1px) */
        .cta-bang-link:hover .bang-text,
        .cta-bang-link:active .bang-text {
            transform: translateY(-1px);
            /* Sposta il testo leggermente verso l'alto */
            transition: transform 0.15s ease-in-out;
        }

        /* Scala l'icona leggermente */
        .cta-bang-link:hover .bang-icon,
        .cta-bang-link:active .bang-icon {
            transform: scale(1.3);
            transition: transform 0.15s ease-in-out;
        }

        /* 4. END LINK DI PRENOTAZIONE (IL BOTTONE)*/
        @media (max-width: 768px) {

            /* 🛑 ANNULLAMENTO ALTEZZA: Mantenuto per risolvere l'espansione */
            .vetrina-principale a.cta-bang-link,
            .vetrina-principale a {
                height: auto !important;
                width: auto !important;
                float: none !important;
            }

            /* Regole Vetrina */
            .vetrina-principale {
                height: 300px !important;
                min-height: 300px !important;
            }

            /* Regole Link/Contenitore (Collasso) */
            .cta-bang-link {
                bottom: 10px !important;
                right: 10px !important;
                left: auto !important;
                top: auto !important;
                width: fit-content !important;
                height: fit-content !important;
                display: inline-flex !important;
                float: right !important;
            }

            .cta-bang {
                width: fit-content !important;
                height: fit-content !important;
            }

            /* Regole di scalatura per Icona */
            .cta-bang .bang-icon {
                width: 50px !important;
                height: 50px !important;
            }

            /* ⭐ REGOLA FONDAMENTALE: Massima Specificità per la Dimensione del Testo ⭐ */
            /* Questa batte qualsiasi altra regola font-size sul desktop! */
            .vetrina-principale .cta-bang-link .cta-bang .bang-text {
                font-size: 0.6em !important;
                /* Prenota la tua vista lago */
                /* Ombra adattata per non essere invadente con il font piccolo */
            }
        }

        /* Stili per il Confetti */
        .confetti {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: #ffcc00;
            /* Giallo */
            opacity: 0;
            border-radius: 50%;
            pointer-events: none;
            transition: transform 0.8s ease-out, opacity 0.8s ease-out;
            will-change: transform, opacity;
        }

        /* Stile per l'effetto lampeggiante (flash) in caso di successo */
        @keyframes flash-success {
            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        .flash-effect {
            animation: flash-success 0.5s 2;
            /* Lampeggia 2 volte */
        }

        /* Stile per l'effetto lampeggiante (flash) in caso di errore */
        @keyframes flash-error {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-5px);
            }

            75% {
                transform: translateX(5px);
            }
        }

        .flash-error-effect {
            animation: flash-error 0.3s 3;
            /* Scuote 3 volte */
        }

        /* Stili di base per colore del testo */
        .success {
            color: #155724;
            /* Verde scuro */
            background-color: #d4edda;
            /* Sfondo verde chiaro */
            border: 1px solid #c3e6cb;
            padding: 10px;
            border-radius: 5px;
        }

        .error {
            color: #721c24;
            /* Rosso scuro */
            background-color: #f8d7da;
            /* Sfondo rosso chiaro */
            border: 1px solid #f5c6cb;
            padding: 10px;
            border-radius: 5px;
        }

        /* ------------------- STILI SWIPER GENERALI (Larghezza Libera) ------------------- */
        /* Si applica a tutti i caroselli, inclusa la Vetrina per il comportamento 'libero' */
        /* ⭐ NUOVA REGOLA CRITICA: Impedisce lo scorrimento orizzontale della pagina principale ⭐ */
        .swiper {
            /* Mantiene la larghezza al 100% e nasconde qualsiasi eccedenza causata dalle slide in 'auto' mode */
            width: 100%;
            overflow-x: hidden;
            box-sizing: border-box;
        }

        /* Si applica al contenuto generato automaticamente da Swiper
        Frecce < > degli swiper*/
        .swiper-button-prev::after,
        .swiper-button-next::after {
            font-size: 3rem; /* Aumenta la dimensione del simbolo freccia */
            @media (max-width: 768px) {font-size: 1.8rem; }
        }

        .swiper-slide {
            /* Mantiene la larghezza stretta e "libera" su desktop */
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            align-items: flex-start;
            /* ⭐ REGOLA CHIAVE: Larghezza "libera" dettata dal contenuto ⭐ */
            width: auto !important;
            min-width: 200px;
            max-width: 90vw;
            padding: 10px 0 10px 0;
            /* Spazio uniforme e sfondo */
            /* margin-right: 20px;  */
            /* margin: 3; */
            /* margin-right: 20px !important;  */
            /* Margine a destra per separare le slide CREA TAGLIO IN MOBILE non va bene*/
            background-color: #f0f0f0;
        }

        /* Regola sul contenitore immediato (<a>) */
        .swiper-slide a {
            display: block;
            /* ⭐ CORREZIONE CHIAVE: Applica il padding INTERNO al link (<a>) ⭐ */
            /* Usiamo border-box per includere il padding nella larghezza del 100% */
            box-sizing: border-box;
            padding: 10px;
            /* box-sizing: content-box;  */
            width: 100% !important;
            height: 100%;
            /* ****************************************************** */
            /* 🛠️ AGGIUNGI QUESTO PER ELIMINARE IL LAMPEGGIO AL CLICK/TOCCO */
            /* ****************************************************** */
            outline: none !important;
            box-shadow: none !important;
            -webkit-tap-highlight-color: transparent;
            /* LA CHIAVE PER IL MOBILE */
        }


        /* Regola sull'IMMAGINE: Adattamento e NON TAGLIARE */
        .swiper-slide img {
            height: 100%;
            width: 100%;
            object-fit: contain !important;
            display: block;
        }

        /* Regola per la Didascalia (caption) */
        .swiper-slide .caption {
            width: 100%;
            text-align: left;
            margin-top: 0.5rem;
            box-sizing: border-box;
            padding: 0 5px;
        }

        /* ------------------- DEFINIZIONE ALTEZZE SPECIFICHE PER GRUPPO ------------------- */
        /* La Vetrina è qui definita per l'altezza slide (380px), separata dall'altezza del contenitore principale (600px) */
        /* solo l'immagine singola */
        .vetrina-principale .swiper-slide a

        /* ⭐ CORREZIONE: La Vetrina è qui per l'altezza della singola slide ⭐ */
            {
            height: 380px;
            width: 100% !important;
        }

        /* ⭐ GRUPPO A: PIÙ GRANDE ( Viste Wow) - NUOVA ALTEZZA: 380px ⭐ */
        .carosello-viste-wow .swiper-slide a {
            height: 380px;
            width: 100% !important;
        }

        /* ⭐ GRUPPO B: MEDIA (Appartamenti) - NUOVA ALTEZZA: 330px ⭐ */
        .carosello-deluxe .swiper-slide a,
        .carosello-superior .swiper-slide a,
        .carosello-standard .swiper-slide a {
            height: 330px;
            width: 100% !important;
        }

        /* ⭐ GRUPPO C: PIÙ PICCOLA (Generali) - NUOVA ALTEZZA: 280px ⭐ */
        .carosello-generali .swiper-slide a,
        .carosello-planimetrie .swiper-slide a {
            height: 280px;
            width: 100% !important;
        }

        /* ========================================================== */
        /* STILI PLANIMETRIE DESKTOP (MIN-WIDTH 768PX) */
        /* ========================================================== */
        @media (min-width: 768px) {

            /* Regola per 3 colonne con 20px di spazio */
            .carosello-planimetrie .swiper-slide {
                display: block;
                flex-shrink: 0;
                box-sizing: border-box !important;
                width: calc((100% - 40px) / 3) !important;
                margin-right: 20px !important;
                padding: 5px 0 10px 0;
            }

            /* Resetta il margine sull'ultima slide di ogni riga (la terza, la sesta, etc.) */
            .carosello-planimetrie .swiper-slide:nth-child(3n) {
                margin-right: 0 !important;
            }

            .carosello-planimetrie .swiper-slide a {
                height: 280px;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            .carosello-planimetrie .swiper-slide img {
                object-fit: contain !important;
                /* Utile per i disegni tecnici */
                width: 100%;
                height: 100%;
            }
        }

        /* ========================================================== */
        /* STILI CAROSELLO SOTTOSTANTE (VISTE AGGIUNTIVE) */
        /* ========================================================== */
        /* Impedisce qualsiasi scroll orizzontale causato da elementi che sbordano */
        body,
        html {
            /* Imposta la larghezza massima come limite */
            max-width: 100%;
            /* Forza la pagina a non scorrere orizzontalmente */
            overflow-x: hidden !important;
            /*  IMPORTANTE se lo togli la pagina nn scorre piu' */
            /* Assicura che il corpo non sia più largo del viewport */
            width: 100%;
        }

        .lightbox-transition {
            transition: opacity 0.3s ease-in-out;
        }

        /*****  LOGO FINALE ******************/
        .logoFinalQr {
            /* PROPRIETÀ COPIATE DAL VECCHIO .logo: */
            display: block;
            /* Essenziale per il layout */
            margin: 0 auto;
            /* Per centrare */
            max-width: 30%;
            /* Fluidità di base */
            height: auto;
            /* Per mantenere le proporzioni */
            /* PROPRIETÀ AGGIUNTE PER L'HOVER ZOOM: */
            transition: transform 0.3s ease-in-out;
            cursor: pointer;
        }

        .logoFinalQr:hover {
            transform: scale(1.05);
        }

        /**************************************** A N I M A Z I O N I **********************************/
        /* *******************************************************************
     * 1. STILI FONDAMENTALI E LAYOUT CONTAINER
     * (Il fix cruciale è .main-container-class { position: relative; })
     * ******************************************************************* */

:root {
    --filter-transition-time: 2s; /* Valore iniziale che verrà sovrascritto da JS */
    --tJetTotal: 10s; /* Durata totale di UNA direzione di traslazione (Andata o Ritorno) */
    /* --hand-cursor: url('mycurxx.cur'), pointer; */
    --bottomHeader: 0px;
    /* --- font-size scala testi --- */
    --fs-heading: 1.4rem;
    --fs-caption: 1rem;
    --fs-price-main: 1.2rem;
    --fs-price-rating: 1rem;
    --fs-price-cta: 1.1rem;
    --fs-price-group: 1rem;
    --fs-price-detail: 0.9rem;
    --fs-btn-primary: 1rem;
    --fs-chat-header: 0.5rem;
    }

/* === SCALA TESTI MOBILE (< 768px) — modifica qui per affinare proporzionalmente === */
@media (max-width: 768px) {
    :root {
        --fs-heading: 0.8rem;
        --fs-caption: 0.7rem;
        /* --fs-prezzi-scala: cambia questo per scalare tutto il blocco prezzi */
        --fs-prezzi-scala: 0.7;
        --fs-price-main: calc(1.2rem * var(--fs-prezzi-scala));
        --fs-price-rating: calc(1rem * var(--fs-prezzi-scala));
        --fs-price-cta: calc(1.1rem * var(--fs-prezzi-scala));
        --fs-price-group: calc(1rem * var(--fs-prezzi-scala));
        --fs-price-detail: calc(0.9rem * var(--fs-prezzi-scala));
        --fs-btn-primary: 0.75rem;
        --fs-chat-header: 0.82rem;
    }
    .subsection-heading { font-size: var(--fs-heading); }
    .caption { font-size: var(--fs-caption); }
    .bottone-primario { font-size: var(--fs-btn-primary); }
    /* chat mobile: gestito in ical/ao_chat.js */
}

    /* cursor: var(--hand-cursor); */

        /* Contenitore Animazione: IL FIX CHIAVE */
        .main-container-class {
            position: static;
            z-index: 1;
            width: 100%;
            height: auto;
            display: inline-block;
            opacity: 1; /* Funziona solo se il selettore diventa più specifico ELIMINARE PENSO SUPERFLUA */
            padding-top: 1rem;
            /* pointer-events: none; */
}/* Stili applicati a tutti gli elementi che devono sovrapporsi */


/* Applica la transizione di default per il filtro */
.main-container-class {
    /* La transizione rende l'effetto di luce molto graduale (2 secondi) */
    transition: filter 2s ease-in-out;
    /* Stato base (senza filtro attivo) */
    filter: brightness(1.0) contrast(1.0)saturate(1.0);
    transition: filter 2s ease-in-out, background-color 2s ease-in-out;
    }


/* 2. Il wrapper che gestisce il ritaglio */
#contenitore-ritaglio {
    position: relative;
    display: block;
    overflow: hidden; /* ⭐ Questa linea taglia tutto ciò che è al suo interno ⭐ */
    z-index: -1;
     top: 0;
    left: 0;
    width: 100%;
    height: auto;
    /* pointer-events: none; */
    background-color: #04052b;

    background-color: transparent;
    opacity: 1; /* Lascia l'opacità a 1 qui se devi controllare l'opacità dei suoi *contenuti* con JavaScript */
}

.sfondo-fisso-class {
    /* 1. Sovrapposizione allo Sfondo Diurno (Base bigl ciao.jpg):
       Si posiziona esattamente sopra l'origine (top: 0, left: 0) del genitore relativo e ne assorbe le dimensioni. */
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    cursor: default;
    will-change: opacity;
    transition: opacity 2s ease-in-out;
    opacity: 1
    /* background-color: transparent; */
}
/* Classe che viene aggiunta dal JavaScript per rendere visibile l'immagine con l'effetto notte */
.sfondo-fisso-class.attivo {
    opacity: 1; /* Pienamente visibile */
    /* transition: opacity 2s ease-in-out; */
    /* transform: translateZ(0); */
}

/* Immagine Sfondo / Biglietto Base  sarebbe la NOTTE*/
.sfondo-01-class{
     position: absolute;
    display: block;
    width: 100%;
    max-width: 100%;
    top: 0;
    left: 0;
    height: auto;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    z-index: 2;
}
.sfondo-01-class.attivo {
    opacity: 1; /* Pienamente visibile */
    /* transition: opacity 2s ease-in-out; */
    /* transform: translateZ(0); */
}

.sfondo-02-class
 {
    /* 1. Sovrapposizione allo Sfondo Diurno (Base bigl ciao.jpg):
       Si posiziona esattamente sopra l'origine (top: 0, left: 0) del genitore relativo e ne assorbe le dimensioni. */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 3;
    /* will-change: opacity; */
    transition: opacity 2s ease-in-out;
    /* transition: background-color 1.5s ease, filter 1.5s ease; */
    opacity: 0;
    /* filter: hue-rotate(0deg) brightness(1) contrast(1) saturate(1) sepia(0); */
    background-color: transparent;
}
/* Classe che viene aggiunta dal JavaScript per rendere visibile l'immagine con l'effetto notte */
.sfondo-02-class.attivo {
    opacity: 1; /* Pienamente visibile */
    /* transition: opacity 2s ease-in-out; */
    /* transform: translateZ(0); */
}

.titolo-class {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    /* opacity: 1; */
    z-index: 3;
    pointer-events: none;
    /* opacity: 0.5; */
filter: blur(0.5px);
animation:
        lampi-luminosita 10s ease-in-out infinite;
}
#id-titolo {
    /* L'immagine DEVE riempire il suo contenitore (che è .titolo-class) */
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.3;
    /* Aggiungi 'object-fit' per controllare come l'immagine si adatta se le proporzioni non coincidono
       con quelle del ritaglio. 'fill' distorce, 'contain' o 'cover' mantengono le proporzioni. */
    object-fit: fill; /* Usa 'fill' solo se sai che le proporzioni sono corrette */
    animation: rotazione-infinita-hue 120s linear infinite;
/* animation:
        lampi-luminosita 10s ease-in-out infinite; */
}

@keyframes rotazione-infinita-hue {
    /* Stato Iniziale */
    from {
        /* 1. Colora il testo (seppia + saturazione) */
        /* 2. Applica la rotazione dell'hue */
        filter: sepia(1) saturate(5) hue-rotate(0deg);
    }
    /* Stato Finale (Rotazione Completa) */
    to {
        filter: sepia(1) saturate(5) hue-rotate(360deg);
    }
}

@keyframes lampi-luminosita {
    /* 0%. Stato base di luminosità */
    0% {filter: brightness(0.5);    }
    20% {filter: brightness(1.3);   }
    40% { filter: brightness(1.05); }
    60% {filter: brightness(1.8);}
    80% {filter: brightness(1.2);    }
    100% { filter: brightness(0.5);  }
}





.titolo-class::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 10%;
    height: 10%;
    display: block;
    pointer-events: none;

    /* 🎨 Inserimento dell'immagine del faretto */
    /* background-image: url('picvil/Faretto.png'); */

    /* 📍 Posizionamento del faretto */
    background-repeat: no-repeat; /* Impedisce la ripetizione dell'immagine */
    background-size: 100% 100%; /* Dimensione del faretto (regola a piacere) */
    background-position: 50% 50%; /* Posiziona il centro del faretto (es. in alto a destra) */

    /* Opzionale: se vuoi un effetto più soft, puoi ridurre l'opacità */
    opacity: 0;
}


.sfondo-02-class.luna-filter {
    /* 1. Sfondo: Base molto scura e fredda */
    /* 2. Filtri: Dominante Fredda, Basso Contrasto, Scena Scura */
    filter:
    hue-rotate(350deg)
    brightness(0.9)
    contrast(1.3)
    saturate(0.5)
    sepia(0);
    background-color: rgba(10, 20, 40, 0.9);
    /* 3. Rimozione Bagliore Interno */
    box-shadow: none;
    /* 4. Transizioni: La transizione al filtro/sfondo dovrebbe avvenire in modo fluido */
    transition: background-color 1.5s ease, filter 1.5s ease;
}

.sfondo-02-class.supersole-attivo {
 filter: brightness(1.1) contrast(1.1) saturate(1.2) sepia(0.1) hue-rotate(5deg);
}


/* ::selection {
    background: transparent;
    background: #b3d4fc;
    color: inherit;
    -webkit-user-select: text !important;
    user-select: text !important;
} */
/* 1. Definizione della Rotazione (Già presente nel tuo codice) */
.iconcina-sole {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: transparent;
    display: inline-block;
    animation: rotazione-inconcina-sole 30s linear infinite;
    cursor: grabbing;
    transition: opacity 1s ease-in-out, translate 1s ease-in-out;
    z-index: 10;
}
@keyframes rotazione-inconcina-sole {
    /* La rotazione rimane qui, usando 'transform' come prima */
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.iconcina-nascosta {
    opacity: 0;
    pointer-events: none;
}
.iconcina-visibile {
    opacity: 1;
    pointer-events: auto;
    translate: 0 0;
}
#iconcina-id1.iconcina-nascosta {
    translate: 100px 0;
}
#iconcina-id2.iconcina-nascosta {
    translate: -100px 0;
}


        /* Contenitore di Taglio Uomo (su terrazzo) */
        #contenitore-taglio-uomo {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            z-index: 10;
        }



        /* *******************************************************************
         * 2. PROPRIETÀ COMUNI A TUTTI GLI ELEMENTI ANIMATI/INTERATTIVI
         * (Rende gli elementi fluidi e applica la transizione)
         * ******************************************************************* */



        /* Raggruppamento per altezza automatica e transizione fluida */
        .donna-testa-img,
        .jetmoto-animata,
        .braccio-animato,
        .sciatore-img,
        .uomo-gambe-img,
        .donna-gambe-img,
        .motoscafo-img,
        .barca-vela {
            height: auto;
            -webkit-tap-highlight-color: transparent;
            /* Proprietà richiesta: mantiene la proporzione */
            /* transition: all 0.3s ease-in-out; */
            /* transition: all 0.3s ease-in-out, filter 2s ease-in-out; */
            /* transition: all 0.3s ease-in-out, filter var(--filter-transition-time) ease-in-out; */
            /* Di giorno il filtro è assente */
            /* filter: none; */  /* altrimenti scatta */
            /* filter: brightness(0.65) saturate(1.8) sepia(0.5) hue-rotate(-20deg); */
            filter: brightness(1) contrast(1) saturate(1) sepia(0) hue-rotate(0deg);
            transition: all 0.3s ease-in-out, filter 2.5s ease-in-out;
        }

        /* --- Stili Base per tutti gli Elementi Animati Aggiuntivi --- */
/* Includiamo sia il Sole che la nuova classe della Luna. */
.sole-cliccabile,
.luna-cliccabile,
.elemento-extra { /* Extra 1, 2, 3, 4 */
    /* Posizionamento rispetto al contenitore (.main-container-class) */
    position: absolute;
    /* Transizione per animazioni future (es. fade-in, movimento) */
    transition: opacity 1s ease-in-out, transform 0.5s ease;
}

.donna-testa-img,
.jetmoto-animata,
.sole-cliccabile,
.luna-cliccabile,
.braccio-animato,
.sciatore-img,
.uomo-gambe-img,
.donna-gambe-img,
.motoscafo-img,
.barca-vela {
cursor: pointer;
/* cursor: var(--hand-cursor); */

}




/* REGOLA BASE: Uscita istantanea di default per tutti i filtri tranne quelli sovrascritti */
.filtro-wrapper img {
    filter: none;
    /* transition: filter 0s ease 1.25s, */ /* Cambia l'hue-rotate molto velocemente */
              /*   brightness 2.5s ease-in-out,
                contrast 2.5s ease-in-out,
                saturate 2.5s ease-in-out; */
     transition: filter 2s ease-in-out;
}

/* Seleziona tutti gli elementi img e div all'interno di un QUALSIASI .filtro-wrapper che ha lo stato .sunset-active */
.filtro-wrapper.sunset-filter img
 {  /* filter: brightness(0.65)
            contrast(1)
            saturate(1.8)
            sepia(0.4)
            hue-rotate(-21deg); */
    /* transition: all 0.3s ease-in-out, filter 0s ease; */
    filter: brightness(0.65) contrast(1.1) saturate(1.8) sepia(0.3);
    transition: filter 2s ease-in;
}


/* 3. Stato Notte Stabile (Lunare): Applichiamo un filtro freddo e bluastro */

.filtro-wrapper.night-filter img
 {
    filter: brightness(0.39)
            contrast(1.2)
            saturate(0.33)
            sepia(0.1)
            hue-rotate(0deg);
    transition: filter 2s ease-in;
    /* transition: all 0.3s ease-in-out, filter 2.2s ease-in-out; */
}




/* STATO 1: LUCE albe (Migliorata con calore e bloom) */

.filtro-wrapper.luce-alba img
 {
 filter: brightness(0.93) contrast(1.15) saturate(1) sepia(0.1) ;
     transition: filter 2s ease-in-out;
}


.filtro-wrapper.luce-lunapiena img
 {
 /* brightness(0.85) contrast(1.1) saturate(1.4) sepia(0.2) ; */
 /* drop-shadow(0 0 0.1px rgba(255, 0, 0, 0.8)); */
/* transition: all 0.3s ease-in-out, filter 1.5s ease-in-out; */
     filter: brightness(0.4)
            contrast(1.1)
            saturate(0.43)
            sepia(0) ;
}
/* .filtro-wrapper.luce-superluna img */
.filtro-wrapper.luce-superluna img
 {
    filter: brightness(0.25) contrast(1.2) saturate(0.6) sepia(0.1);
/* transition-delay: 2s;
transition: filter 0s ease-in-out; */
transition: filter 0s ease-in-out 2s;
/* animation: ritardoLuceSuperluna 6s linear forwards; */
}
/* @keyframes ritardoLuceSuperluna {
    0%   { filter:brightness(0.25) contrast(1.2) saturate(0.6) sepia(0.1); }
    60% { filter:brightness(0.45) contrast(1.2) saturate(0.6) sepia(0.1); }
     70% { filter:brightness(0.35) contrast(1.2) saturate(0.6) sepia(0.1); }
    100% { filter: brightness(0.25) contrast(1.2) saturate(0.6) sepia(0.1); }
} */

.sfondo-02-class.luce-superluna
 {     filter: brightness(0.8) contrast(1.3) saturate(0.9) sepia(0.2) hue-rotate(330deg);}

.filtro-wrapper.luce-supersole img
 {
/* transition: all 0.3s ease-in-out, filter 1.5s ease-in-out; */
     filter: brightness(1.1) contrast(1.1) saturate(1.6) sepia(0.6) ;

}

        /* ========================================================== */
        /* SEZIONE 1: DEFINIZIONI CHIAVI DI ANIMAZIONE (@keyframes)     */
        /* ========================================================== */

        /* BARCA (VELA) */
        /* Keyframes BARCA: Oscillazione sull'Onda */
       @keyframes onda {
    0% {  transform: rotate(2deg) translateY(0);     }
    50% {            transform: rotate(-2deg) translateY(3%);    }
    100% {transform: rotate(2deg) translateY(0);     }
}



        /* MOTOSCAFO - Oscillazione semplice (bottom left) */

        @keyframes motoscafoOscillazione {
            0%,
            100% {
                /* Oscillazione su/giù (0) + Rotazione (10deg) */
                transform: translateY(0) rotate(1deg);
            }
            50% {
                /* Oscillazione su/giù (-0.5rem) + Rotazione (-10deg) */
                transform: translateY(-0.25rem) rotate(-2deg);
            }
        }

        /* UOMO SUL TERRAZZO (Braccio) */
        @keyframes wave {
            0% { transform: rotate(0deg); }
            25% { transform: rotate(-15deg); }
            50% { transform: rotate(15deg); }
            100% { transform: rotate(0deg); }
            }


        /* Keyframes DONNA: Movimento Gambe (Pausa e Movimento) */
        @keyframes muovi-piedi { 0%, 50% { transform: rotate(0deg); }
            62.5% { transform: rotate(-6deg); }
            87.5% { transform: rotate(25deg); }
            100% { transform: rotate(0deg); }
        }


        /* PERSONAGGI SU SDRAIO (Gambe Uomo) */
        /* Keyframes UOMO: Sobbalzo Rotante Gambe (Click/Interazione) */
        @keyframes sobbalzoRotante {
            0% { transform: rotate(0deg); }
            25% { transform: rotate(-7deg); }
            75% { transform: rotate(5deg); }
            100% { transform: rotate(0deg); }
        }

        /* FIX CRITICO: SCIATORE D'ACQUA - Movimento Totale (Oscillazione + Rotazione combinati)
           Poiché entrambe le animazioni modificano 'transform', devono essere unite in un unico blocco. */
        @keyframes sciatoreMovimentoTotale {
            0%,
            100% {
                /* Oscillazione su/giù (0) + Rotazione (10deg) */
                transform: translateY(0) rotate(3deg);
            }
            50% {
                /* Oscillazione su/giù (-0.5rem) + Rotazione (-10deg) */
                transform: translateY(-0.2rem) rotate(-4deg);
            }
        }

        /* NUOVO: Animazione al Click per lo Sciatore d'Acqua (Solo traslazione rapida) */
        @keyframes sciatoreClickJump {
            0% {
                transform: translateY(0);
            }
            25% {
                transform: translateY(-0.2rem);
            }
            /* Salto rapido in alto */
            100% {
                transform: translateY(0);
            }
        }

/* --- NUOVI KEYFRAME DI FEEDBACK (SCATTO) --- */

/* BARCA: Scatto molto accentuato (verticale + rollio) */
@keyframes onda-scatto-feedback {
    0% { transform: translateY(0) rotate(0deg); }
    50% {
        /* Massima esagerazione: affonda e si inclina molto */
        transform: translateY(1.5%) rotate(5deg);
    }
    100% { transform: translateY(0) rotate(0deg); }
}

/* MOTOSCAFO: Scatto molto accentuato (verticale + rollio) */
@keyframes motoscafo-scatto-feedback {
    0% { transform: translateY(0) rotate(0deg); }
    30% {
        /* Saltello rapido e rotazione inversa */
        transform: translateY(-0.8rem) rotate(-5deg);
    }
    100% { transform: translateY(0) rotate(0deg); }
}

/* SCIATORE: Salto/Sobbalzo accentuato (si vuole un effetto 'bounce') */
@keyframes sciatore-salto-feedback {
    0% { transform: translateY(0) rotate(0deg); }
    40% {
        /* Salto massimo in alto */
        transform: translateY(-1rem) rotate(-7deg);
    }
    100% { transform: translateY(0) rotate(0deg); }
}


* ----------------------------------------------------------------- */
/* ⭐ GESTIONE FILTRO GLOBALE SCENA (EFFETTO SOLE ALTO) - INTERO DIV ⭐ */
/* ----------------------------------------------------------------- */


/* sole solare solarized solarizzato giorno-pieno (viene usata in salutocontainer */
.luce-solare {
     /* filter: invert(85%) hue-rotate(180deg) brightness(110%); */

    /*  filter: brightness(1.4) contrast(1.05);
    background-color: #b0dede; */ /* Sfondo molto chiaro */
    box-shadow: inset 0 0 150px rgba(255, 255, 200, 0.9);
    transition:  filter 2.5s ease-in-out;
    /* filter: brightness(1.3) contrast(1.1) saturate(1.2) hue-rotate(-5deg);
    transition: filter 2s ease-in-out; */

    /* filter: brightness(1.4) contrast(1.05); */

}


/* Esempio: Nasconde gli elementi Luna e Motoscafo se hanno gli ID specificati */
#Luna,
#Extra-1,
#Extra-2,
#Extra-3,
#Extra-4,
#jet-motoscafo {
    /* * Il caricamento del file avviene PRIMA che il CSS abbia effetto,
     * ma così elimini l'elemento dalla visualizzazione.
     * Per eliminare l'errore di caricamento, dobbiamo agire via JS.
     */
    display: none !important;
}








/* --- 1. SOLE (Visibile e Interattivo di default) --- */
#sole-attivatore-target {
    /* POSIZIONAMENTO E DIMENSIONI TOTALI (30% come l'area visiva originale) */
    position: absolute;
    width: 30%;
    height: auto;
    z-index: 10;
    /* Proprietà di Movimento (Spostate dall'immagine) */
     top: 2%;
    right: -1%;
    /* Transizioni e Animazioni (Spostate dall'immagine) */
    transition: top 2s ease-in-out, right 2s ease-in-out;
    animation: TranslazioneCircolare 10s ease-in-out infinite alternate;
    /* ⭐ DISABILITA IL CLICK SUL WRAPPER (lo passeremo al div interno) ⭐ */
    pointer-events: none;
}



/* .sole-cliccabile (Immagine Visiva) */
.sole-cliccabile {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: filter 0.3s ease, opacity 2s ease, transform 0.3s ease;
    pointer-events: none;
    position: relative;
    object-fit: contain; /* Assicura che l'immagine sia contenuta senza distorsioni */
    object-position: center center; /* Centra l'immagine all'interno del Wrapper */
    animation: rotazioneSuperSole 20s ease-in-out infinite paused;
}


/* .sole-click-ridotto (Div interno) */
    .sole-click-ridotto {
    /* Posizionamento Assoluto rispetto al suo genitore (#sole-attivatore-target) */
    position: absolute;
    /* ⭐ CENTRATURA E DIMENSIONE RIDOTTA (20% del 30% totale) ⭐ */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra perfettamente l'elemento */
    width: 20%;
    height: 20%;
    z-index: 11; /* Assicura che sia sopra l'immagine e il wrapper */
    /* ⭐ ABILITA IL CLICK SOLO SU QUESTA AREA ⭐ */
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    /* Rendi l'elemento invisibile (se non lo stai usando per il debug) */
    /* background-color: transparent; */
}
/* Quando il mouse colpisce l'unico elemento interattivo (il div ridotto),
   l'hover risale e si applica il filtro all'immagine figlia. */
#sole-attivatore-target:hover .sole-cliccabile {
    filter: brightness(1.1);
}

/* Regola per disabilitare il click sul DIV interno quando il Sole è nascosto */
#sole-attivatore-target.nascosto > .sole-click-ridotto {
    pointer-events: none; /* Disabilita il click sulla piccola area del 20% */
}

/* ⭐ STATO NASCOSTO (per la notte) ⭐ */
/* Usato per nascondere il Sole quando la Notte è attiva */
.sole-cliccabileDELME.nascosto {
    opacity: 0;
    pointer-events: none; /* Non cliccabile quando è nascosto */
 }
.sole-cliccabileDELME.visibile {
    opacity: 1;
    pointer-events: auto;
    top:  -9%;
    right:  -9%;
}

/* ⭐ .sole-cliccabile (Immagine) - Gestione Opacità/Aspetto ⭐ */
.sole-cliccabile.nascosto {
    opacity: 0;
}

.sole-cliccabile.visibile {
    opacity: 1;
}

#sole-attivatore-target.visibile {
    /* La transizione alla POSIZIONE FINALE, che innesca il movimento */
    top: -9%;
    right: -9%;
}


/* #sole-attivatore-targetxx.nascosto {
    opacity: 0;
    pointer-events: none;
    cursor: default;
} */






.sole-cliccabile.supersole-attivo:active {
    /* Mette in pausa l'animazione di rotazione */
    animation-play-state: paused;

    /* Nota: Potresti voler aggiungere anche un leggero effetto
     * di pressione qui per feedback visivo, come un piccolo scale:
     * transform: scale(0.98);
     * * Se fai questo, assicurati che la transizione sul sole sia attiva
     * e includa 'transform' per prevenire il salto:
     * transition: filter 0.3s ease, opacity 2s ease, transform 0.1s linear;
     */
}
.sole-cliccabile.supersole-attivo {
    /* Sovrascrivi il transform predefinito (se presente) */
    transform: none;
    /* animation: rotazioneSuperSole 10s linear infinite; */
    animation-play-state: running;
    /* filter: drop-shadow(0 0 10px gold); */
}


/* ================================================= */
/* ⭐ ANIMAZIONE DI ROTAZIONE INFINITA 360° (SOLE) ⭐ */
/* ================================================= */
@keyframes rotazioneSuperSole {
    from {transform: rotate(0deg); }
    to {  transform: rotate(360deg);}
}

/* --- 2. LUNA (Nascosta, posizionata in alto a sinistra) --- */

/* Ora usa il nuovo ID per il posizionamento */
/* Le variabili sono locali a questo elemento e ai suoi discendenti */
/* #luna-attivatore-target {
    --xp: 0.1rem;
    --xn: -0.1rem;
     top: 3.1%;
    left: 4%;
    width: 11.7%;
    height: auto;
    z-index: 10;
    animation: TranslazioneCircolare 10s ease-in-out infinite alternate;
} */

/* --- 2. LUNA (Invisibile di giorno, Visibile e Interattiva di notte) --- */
.luna-cliccabile {
    opacity: 0;
    pointer-events: auto;
    transform-origin: center center;
    --xp: 0.1rem;
    --xn: -0.1rem;
 /*     top: 3.1%;
    left: 4.4%; */
    width: 12%;
    height: auto;
    z-index: 10;
    top: 12%; /* Sposta la Luna sopra lo schermo (era 3.1%) */
    left: -5%; /* Sposta la Luna a sinistra (era 4.4%) */
    transition: filter 0.3s ease, opacity 1.5s ease-in-out, top 2s ease-in-out,  left 2s ease-in-out;

    animation: rotazioneSuperSole 10s linear infinite paused;
    animation-fill-mode: forwards;
    -webkit-tap-highlight-color: transparent;
}
@keyframes TranslazioneCircolare {
    0%   { transform: translate(var(--xn), var(--xn)) rotate(-4deg); }
    25%  { transform: translate(var(--xp), var(--xn)) rotate(4deg); }
    50%  { transform: translate(var(--xp), var(--xp)) rotate(-4deg); }
    75%  { transform: translate(var(--xn), var(--xp)) rotate(4deg); }
    100% { transform: translate(var(--xn), var(--xn)) rotate(-4deg); }
}

.luna-cliccabile.nascosto {
    opacity: 0;
    pointer-events: none; /* Non cliccabile quando è nascosto */
}



.luna-cliccabile:hover {
    filter: brightness(1.2);
}

.luna-cliccabile.superluna-attiva {
    animation-play-state:  running;
    animation:
        rotazioneSuperSole 10s linear infinite,
        rimpicciolimentoSuperluna 6s linear forwards;
    transition: filter 0s ease-in-out;
    }
@keyframes rimpicciolimentoSuperluna {
    0% {width: 140%;    }
    50% {width: 120%;   }
    100% { width: 12%;  }
}

.luna-cliccabile.visibile {
    opacity: 1;
    pointer-events: auto;
    top: 3.1%; /* Torna alla posizione finale originale */
    left: 4.4%; /* Torna alla posizione finale originale */
}



/* STATO 2: MODALITÀ LUNARE / FILTRO NOTTURNO MANUALE */
/* Da applicare al contenitore principale (es. .main-container-class) */



.main-container-class.sole-filter {  /* si applica al super sole */
filter: brightness(1.1) contrast(1) saturate(1.2) hue-rotate(-5deg);
    transition: filter 2s ease-in-out;
}

/* --- 3. JET-MOTO (Nascosta, posizionata fuori schermo a destra per l'animazione) --- */
 .jetmoto-animata {
    will-change: transform, left, top;
     position: absolute;
     --top-base: 38%;
     top: var(--top-base);
     left: 87%;
     --wJetMoto: 6%;
     width: var(--wJetMoto);
     z-index: 10;
     height: auto;
     /* Stato Iniziale: Fuori a destra, visibile. */
     left: calc(100% + var(--wJetMoto));
        left:8%;
        opacity: 1;
     /* transition: opacity 1s ease 0s;debug */
     /* ⭐ La chiave: 'left 0s' permette al JS di impostare la durata di volta in volta ⭐ */
     /* transition: left 0s linear, opacity 500ms ease-in-out, transform 300ms ease; */
     /* animation: onda 6s ease-in-out infinite alternate;
    animation: jetmoto-loop 20s linear infinite; */
    /* animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state]; */
    animation:
        /* PRIMA ANIMAZIONE (Onda) */
        jetonda 4s  linear infinite ,
        /* SECONDA ANIMAZIONE (Movimento orizzontale) ,*/
         jetmoto-loop 120s linear infinite ;
         /* infinite; */
     /* trans   ition:  filter 2.5s ease-in-out; */
     transform-origin: center center;
     transform: rotate(5deg) translateY(-5%);
}

.jetmoto-animata.clicked {
    transition: filter 0.5s ease-out;
    filter: brightness(1.5);
}

@keyframes jetonda {
    0%  {transform: rotate(16deg);  top: calc(var(--top-base) + 0.3%);    }
    25% {transform: rotate(-3deg);  top: calc(var(--top-base) - 0.3%);    }
    50% {transform: rotate(3deg) ;  top: calc(var(--top-base) + 0.3%);    }
    75% {transform: rotate(-16deg); top: calc(var(--top-base) - 0.3%);    }
    100%{transform: rotate(3deg);   top: calc(var(--top-base) + 0.3%);    }
}


@keyframes jetmoto-loop {
    /* 0% - 50% = ANDATA (Destra a Sinistra) */
    /* 0%: Stato Iniziale (Fuori a Destra) */
    0% {
        left: calc(100% + var(--wJetMoto));
        opacity: 1;
        transform: scaleX(1); /* Non specchiato */
    }
    /* 20% (Fade-Out Start) */
    15% { opacity: 1; }
    /* 25% (Fade-Out End, Moto dentro la casa) */
    18% { opacity: 0; pointer-events: none; }
    /* 40% (Fade-In Start) */
    35% { opacity: 0; }
    /* 45% (Fade-In End, Moto fuori dalla casa) */
    45% { opacity: 1; pointer-events: all; }
    /* 50%: Posizione Finale Andata (Fuori a Sinistra) */
    50% {
        left: -15%;
        opacity: 0;
        transform: scaleX(1);
    }
    /* 50.001% (Subito dopo, cambio istantaneo di direzione e flip) */
    50.001% {
        left: -15%;
        transform: scaleX(-1); /* ⭐ FLIP: si specchia per il ritorno ⭐ */
    }
    /* ------------------------------ */
    /* 50% - 100% = RITORNO (Sinistra a Destra) */
    /* ------------------------------ */
    /* 70% (Fade-Out Start inverso) */
    60% { opacity: 1; }
    /* 75% (Fade-Out End inverso) */
    66% { opacity: 0; pointer-events: none; }
    /* 90% (Fade-In Start inverso) */
    80% { opacity: 0; }
    /* 95% (Fade-In End inverso) */
    95% { opacity: 1; pointer-events: all; }
    /* 100%: Ritorno alla Posizione Iniziale (loop completo) */
    100% {
        left: calc(100% + var(--wJetMoto));
        opacity: 1;
        transform: scaleX(-1); /* Mantiene il flip fino al riavvio */
    }
}



/* Possono essere inserite ovunque nel tuo CSS */

/* CLASSI DI MOVIMENTO E FLIP */
/* .jetmoto-animata.move-forward {
    left: -15%;
}

.jetmoto-animata.move-backward {
    left: calc(100% + var(--wJetMoto));
}

.jetmoto-animata.is-fading {
    opacity: 0;
}

.jetmoto-animata.mirrored {
    transform: scaleX(-1);
} */

/* CLASSI DI VISIBILITÀ E INTERAZIONE */

/*.jetmoto-animata.no-click {
    pointer-events: none;
}

.jetmoto-animata.is-invisible {
    visibility: hidden;
}

.jetmoto-animata.is-gone {
    display: none !important;
}



 .jetmoto-animata {
    position: absolute;
    width: 25%;
    animation: viaggioJetMoto 10s infinite alternate;
} */





/* --- 4. EXTRA Generici (Nascosti, posizionati in un punto sicuro) --- */
/* Nessuna modifica: gestisce Extra 1, 2, 3, 4 */
.elemento-extra {
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    z-index: 1;
}




        /* **************************************** 5. POSIZIONAMENTO UOMO SUL TERRAZZO e SCIATORE D'ACQUA *************************************** */

        /* Braccio Uomo Animato */
        .braccio-animato {
            position: absolute;
            width: 1.67%;
            top: 39%;
            left: 46.2%;
            z-index: 10;
            pointer-events: auto;
            transform-origin: 60% 100%;
            animation: wave 2.5s infinite ease-in-out;
        }

/* ⭐ NUOVA ANIMAZIONE: Scatto Veloce al Click ⭐ */
@keyframes scatto-braccio {
    0% { transform: rotate(0deg); } /* Inizia dalla posizione corrente (rilevante) */
    25% { transform: rotate(-45deg); } /* Scatto 1: Rotazione antioraria aggressiva */
    50% { transform: rotate(45deg); } /* Scatto 2: Rotazione oraria forte */
    100% { transform: rotate(0deg); } /* Ritorna alla posizione di riposo per riprendere il wave */
}

/* Stile per il testo di feedback dinamico */
/* Stile per il testo di feedback dinamico */
.dynamic-feedback-text {
    /* ⭐ NUOVA RIGA: Nasconde l'elemento prima che l'animazione parta */
    visibility: hidden;

    /* Aspetto */
    /* ✅ FONT SIZE: Convertito da 16px a 1rem (1rem è in genere 16px, ma scala) */
    font-size: 1rem;
    font-weight: 900;
    color: #4CAF50;
    background: rgba(255, 255, 255, 0.9);
    /* ✅ PADDING: Convertito da 3px 6px a rem per scalare con il testo */
    padding: 0.1875rem 0.375rem; /* (3px / 16 = 0.1875rem) e (6px / 16 = 0.375rem) */
    border-radius: 6px; /* La dimensione dei bordi fissi in px è OK */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    white-space: nowrap;

    /* Animazione: Durata 2s, Ritardo 0.5s, Forwards */
    opacity: 0;
    animation: reset-pop-up 2s ease-out 0.5s forwards;
    z-index: 10;
}

/* Definizione dell'animazione (Fade-out e spostamento verso l'alto) */
@keyframes reset-pop-up {
    0% {
        /* ⭐ CHIAVE: L'elemento diventa visibile immediatamente al 0% */
        visibility: visible;
        opacity: 1;
        transform: translate(-50%, 0%);
    }
    100% {
        /* L'elemento scompare (opacity) */
        opacity: 0;
        /* MA DEVE RIMANERE VISIBILE (visibility) finché non termina.
           Il 'forwards' della proprietà animation ci farà mantenere l'opacità a 0. */
        visibility: visible;
        transform: translate(-50%, -350%);
    }
}

@media (max-width: 768px) {
    .dynamic-feedback-text {
        font-size: 0.55rem; /* ~12px */
        padding: 0.15rem 0.3rem;
    }
}


        /* --- SCIATORE D'ACQUA --- */
        .sciatore-img {
            position: absolute;
            bottom: 11%;
            left: 79.5%;
            width: 8%;
            animation: sciatoreMovimentoTotale 7s ease-in-out infinite;
            transform-origin: bottom center;
            z-index: 10;
        }

        /* Elemento ESTERNO: Il CONTENITORE (#sciatore-target)
   Gestisce l'animazione di salto one-shot. */
        /* #sciatore-target {
            position: absolute;
            bottom: 27.5%;
            left: 29.8%;
            width: 100%;
            height: auto;
            transform-origin: bottom center;
            z-index: 10;

        } */


        /* **************************************** 6. POSIZIONAMENTO PERSONAGGI SU SDRAIO (Uomo e Donna) *************************************** */

        /* Gambe Uomo (su sdraio, dentro contenitore di taglio) */
        .uomo-gambe-img {
            position: absolute;
            width: 16%;
            bottom: -4%;
            left: 39%;
            z-index: 10;
            pointer-events: auto;
            transform-origin: 10% 35%;
        }

        /* Gambe Donna */
        .donna-gambe-img {
            position: absolute;
            width: 11%;
            bottom: -7.5%;
            left: 35%;
            z-index: 10;
            transform-origin: 10% 0;
            animation: muovi-piedi 6s infinite ease-in-out;
            cursor: pointer ;
             /* -webkit-tap-highlight-color: transparent; */
        }

        /* Testa Donna (Nascosta inizialmente) */
        .donna-testa-img {
            position: absolute;
            width: 4.55%;
            z-index: 10;
            /* top: 74.8%; */
            top: 76.3%;
            /* left: 19.2%; */
            left: 19%;
            opacity: 0;
            transform: rotate(0deg);      /* Angolo di partenza (allineato) */
            transform-origin: 50% 100%;  /* Ruota attorno al punto inferiore (il collo/base della testa) */
            transition: opacity 2s ease-out, transform 2s ease-out !important;
            /* Inizialmente invisibile e lenta a scomparire*/
        }




/* Nuova animazione: Sobbalzo Rotatorio ANTI-ORARIO */
@keyframes sobbalzo-piedi {
    /* Manteniamo la posizione attuale con rotate(0deg) relativo all'animazione di base */
    0% {
        transform: rotate(0deg);
    }
    /* Picco del movimento: Ruota di 15 gradi in senso anti-orario */
    50% {
        transform: rotate(-15deg);
    }
    /* Torna alla posizione di partenza */
    100% {
        transform: rotate(0deg);
    }
}

/* La classe .gambe-sobbalzo rimane invariata */
.gambe-sobbalzo {
    animation: sobbalzo-piedi 0.4s ease-out 1 forwards !important;
}

/* CLASSE attiva (Testa Donna): Si alza e guarda */
.look-at-me {
    opacity: 1 ;
    transform: rotate(14deg);
    /* Ruota di 14 gradi in senso orario */
    /* ⭐ TRANSIZIONE di ENTRATA: Mantenuta Lenta Opacità (2s), Veloce Rotazione (0.4s) ⭐ */
     transition:
        opacity 0.4s ease-in,
        transform 0.2s ease-in,
        /* ⭐ Questa riga preserva la transizione solare ⭐ */
        filter var(--filter-transition-time) ease-in-out !important;
}



        /* **************************************** 7. POSIZIONAMENTO BARCHE (VELA e motoscafo) *************************************** */

        /* Barca a Vela */
        .barca-vela {
            position: absolute;
            width: 9%;
            top: 21.5%;
            left: 9.5%;
            z-index: 10;
            animation: onda 6s ease-in-out infinite alternate;
            transform-origin: bottom center;
        }

        /* --- MOTOSCAFO --- */
        .motoscafo-img {
            position: absolute;
            bottom: 31%;
            left: 78%;
            width: 19%;
            animation: motoscafoOscillazione 3s ease-in-out infinite;
            z-index: 10;
            /* transform-origin: bottom 10%; */
        }


        /* **************************************** 8. CLASSI DI INTERAZIONE E CONTROLLO *************************************** */

        /* Classe aggiunta su click (Gambe Uomo SDRAIO) */
        .sobbalzo-ruota {
            animation: sobbalzoRotante 0.5s ease-in-out 1;
        }




        /* Controllo Pausa Animazioni (applicata sul <body>) */
        .animations-paused .braccio-animato,
        .animations-paused .donna-gambe-img,
        .animations-paused .barca-vela {
            animation-play-state: paused !important;
        }

        /* Nuova classe per la sospensione temporanea gambe donna*/
        .paused-animation {
            animation-play-state: paused !important;
        }

        /* Esempio con un ritardo di x secondi */
        .sciatore-jump {
            animation: sciatoreClickJump 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s 1 forwards !important;
                     /* [Nome]        [Durata] [Curva di temporizzazione] [RITARDO] [Conteggio] [Fill Mode] */
}

        /* **************** END ANIMAZIONI *******************/


        /************* CONDIVIDI BUTTON **************************/

        .share-button {
            display: flex;
            flex-direction: column;
            /* Allinea icona e testo in colonna */
            align-items: center;
            /* Centra orizzontalmente */
            justify-content: center;
            /* Centra verticalmente */
            background-color: #efecdc;
            /* Grigio chiaro */
            color: #000000;
            /* text-white */
            padding: 0.5rem 0.5rem;
            /* py-3 px-6 */
            border-radius: 1rem;
            /* rounded-2xl */
            font-weight: 600;
            /* font-semibold */
            font-size: 1rem;
            /* text-base */
            box-shadow: 0 36px 72px -12px rgba(0, 0, 0, 0.4);
            /* Ombra pronunciata */
            border: 4px solid #3c3b39;
            /* border-4 border-dark */
            min-width: 100px;
            /* Larghezza minima */
            max-width: 110px;
            /* Larghezza massima */
            white-space: nowrap;
            /* whitespace-nowrap */
            transition-property: background-color, transform, box-shadow;
            /* Transizioni specifiche */
            transition-duration: 150ms;
            /* duration-150 */
        }

        .share-button:hover {
            background-color: #dad7c6;
            /* Grigio scuro */
            transform: scale(1.1) translateY(-2px);
            /* Ingrandimento 10% e sollevamento 2px */
            box-shadow: 0 40px 80px -8px rgba(0, 0, 0, 0.45);
            /* Ombra più grande */
        }

        .share-button:focus {
            outline: none;
            /* focus:outline-none */
            outline: 2px solid rgba(59, 130, 246, 0.5);
            /* focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 */
        }

        .share-icon {
            width: 1.25rem;
            /* w-5 */
            height: 1.25rem;
            /* h-5 */
            margin-bottom: 0.5rem;
            /* Separazione tra icona e testo */
            stroke: #000000;
            /* Esplicito per garantire visibilità */
        }

        .share-text {
            display: block;
            white-space: nowrap;
            /* Impedisce il testo di andare a capo */
            overflow: hidden;
            /* Nasconde il testo che supera la larghezza */
            text-overflow: ellipsis;
            /* Aggiunge i puntini di sospensione */
            max-width: 100%;
            /* Limita il testo alla larghezza del bottone */
        }

        /* Media query per dispositivi mobili */
        @media (max-width: 768px) {
            .share-button {
                padding: 0.2rem 0.2rem;
                /* Ridotto per mobile -> 1.2x */
                font-size: 0.5rem;
                /* Testo più piccolo -> 1.2x */
                min-width: 30px;
                /* Larghezza minima ridotta -> 1.2x */
                max-width: 45px;
                /* Larghezza massima ridotta -> 1.2x */
                max-height: 45px;
                box-shadow: 0 24px 48px -9.6px rgba(0, 0, 0, 0.35);
                /* Ombra ridotta -> 1.2x */
                border: 2px solid #3c3b39;
                /* border-4 border-dark */
            }

            .share-button:hover {
                box-shadow: 0 28.8px 57.6px -7.2px rgba(0, 0, 0, 0.4);
                /* Ombra ridotta nell'hover -> 1.2x */
            }

            .share-icon {
                width: 1.2rem;
                /* Icona più piccola -> 1.2x */
                height: 1.2rem;
                margin-bottom: 0.45rem;
                /* Margine ridotto -> 1.2x */
            }
        }

        .share-condividi-div {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 2rem 0; gap: 0.5rem;
        }



        /************* END -- CONDIVIDI BUTTON **************************/
        /* ************ BOTTONE TORNA SU **************** */
        /* Stile del pulsante "Torna su" (Back to Top) */
        .back-to-top {
            /* Mantiene il pulsante fisso e la posizione (gestita da JS e bottom) */
            position: fixed;
            bottom: 30px;
            z-index: 100;
            right: 30px;
            /* Valore di fallback, sovrascritto da JS */
            /* Aspetto: Sfondo semitrasparente senza bordo */
            display: none;
            background-color: rgba(255, 255, 255, 0.6);
            /* Sfondo Bianco con 80% di Trasparenza */
            color: #444;
            /* Colore dell'icona (Grigio Scuro) */
            border-radius: 50%;
            width: 3rem;
            height: 3rem;
            font-size: 1.5rem;
            ;
            text-decoration: none;
            text-align: center;
            line-height: 3rem;
            /* Aggiustiamo la transizione, ora solo su sfondo e colore icona */
            transition: background-color 0.3s ease, color 0.3s ease;
            /* Opzionale: Aggiungiamo una leggera ombra per staccare dal fondo */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
        }

        /* Stile al passaggio del mouse (Hover) */
        .back-to-top:hover {
            /* Al passaggio del mouse lo rendiamo più opaco e cambiamo colore all'icona */
            background-color: rgb(230, 229, 229);
            /* Sfondo completamente opaco */
            color: #007bff;
            /* Icona diventa blu */
        }

        /* La classe show rimane invariata */
        .back-to-top.show {
            display: block;
        }

        .back-to-top:focus {
            background-color: rgba(255, 255, 255, 0.6);
            color: #444;
        }

        @media (max-width: 768px) {
            .back-to-top {
                /* Riduzione della dimensione del pulsante */
                width: 1.8rem;
                /* Nuovo: 1.5 rem (es. 24px) */
                height: 1.8rem;
                /* Nuovo: 1.5 rem */
                /* Deve corrispondere all'altezza per la centratura */
                line-height: 1.8rem;
                /* Icona più piccola */
                font-size: 1rem;
                /* Ad esempio, 1 rem (es. 16px) */
                /* Distanza dal fondo ridotta */
                bottom: 1.25rem;
                /* Nuovo: Circa 20px (1.25 * 16px) */
                right: 1rem;
                /* Opzionale: puoi anche ridurla */
            }
        }

        /* ************ END BOTTONE TORNA SU  */

        /* Nasconde l'elemento e riserva lo spazio (per prevenire CLS) */
        .hidden-until-loaded-js {
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            /* Per una transizione fluida */
        }

        /* Visualizza l'elemento quando la classe viene rimossa dal JS */
        .hidden-until-loaded-js.loaded {
            visibility: visible;
            opacity: 1;
        }

        /* --- NUOVE CLASSI PER IL PRELOADER E LO SPINNER --- */
        #loader-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.95);
            display: none;
            /* display: flex; */
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 0.6;
            transition: opacity 0.5s ease-out;
        }

        .spinner {
            border: 5px solid rgba(0, 0, 0, 0.1);
            border-top-color: #4f46e5;
            /* Colore viola */
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }


 /* ******************************* VIDEO SEZIONE VIDEO BEGIN ************************************** */
/* =================================================================
   1. LAYOUT PRINCIPALE (A 2 COLONNE: PRIORITÀ E ASSORBIMENTO SPAZIO)
   ================================================================= */

/* Container principale che affianca il video grande alla galleria piccola */
.video-master-container {
    display: flex;
    gap: 20px;
    max-width: 1200px;
    margin: 15px 15px 25px 15px;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Colonna di Sinistra: Video Principale (Definito dal CONTENUTO, max 40%) */
.main-path-column {
    flex-basis: auto;
    max-width: 40%;
    flex-grow: 0;
    min-width: 200px;
    display: flex;
    justify-content: center;
}

/* Riduco la dimensione visiva della miniatura principale */
.main-path-column .video-thumbnail-link {
    max-width: 200px;
    width: auto;
}

/* Colonna di Destra: Galleria dei Tre Accessi (Assorbe tutto lo SPAZIO RIMASTO) */
.access-gallery {
    flex-grow: 1;
    flex-basis: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end; /* Allinea il gruppo di 3 miniature a DESTRA */
}

/* Le 3 miniature: Allineate a destra e di dimensione fissa */
.access-unit {
    width: 150px;
    min-width: 150px;
    flex-grow: 0;
    flex-basis: auto;
}

/* =================================================================
   2. STILI TESTO DESCRITTIVO SOTTO
   ================================================================= */

.path-description {
    max-width: 900px;
    margin: 0 0 25px 0;
    margin-left: 15px;
    padding: 0;
    text-align: left;
}
.path-description h4,
.path-description p {
    margin: 0 0 10px 0;
    padding: 0;
}

/* =================================================================
   3. STILI ICONE, DIDASCALIE E MINIATURE (INVARIATI)
   ================================================================= */

.video-container {
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
}
.video-thumbnail-link {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.thumbnail-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    transition: opacity 0.3s;
}
.video-thumbnail-link:hover .thumbnail-img {
    opacity: 0.8;
}
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    color: white;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}
.video-caption {
    display: block;
    text-align: center;
    font-size: 1.1em;
    padding: 5px 4%;
}

/* =================================================================
   4. STILI MODALE (LIGHTBOX) - CONSOLIDATO
   ================================================================= */

/* 1. Contenitore principale della Modale (lo usiamo come base) */
.ao-lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    /* Prepara la centratura Flexbox */
    justify-content: center;
    align-items: center;
    /* 1. Attivato per la centratura */
    display: flex;
    /* 2. Nasconde all'avvio (Questa deve vincere, quindi è l'ultima) */
    display: none;
    /* Rimuovi overflow-y: auto duplicato */
    overflow-y: auto;
}


/* 2. L'Overlay (Sfondo cliccabile, creato dal JS) */
.modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* 3. La Crocetta di chiusura (creata dal JS) */
.close-button {
    color: #fff;
    font-size: 3em;
    font-weight: bold;
    position: fixed;
    top: 10px;
    right: 25px;
    cursor: pointer;
    z-index: 1001;
}

/* 4. Contenitore del video (per centrarlo) */
.modal-content {
    background-color: transparent;
    margin: 3% auto;
    max-width: 30vw;
    max-height: 80vh;
    width: auto;
    position: relative;
    border-radius: 5px;
}

/* 5. Stile del tag <video> */
#modale-corpo video,
#modale-corpo iframe { /* <--- AGGIUNTO IFRAME */
    width: 100%;
    height: auto; /* IMPORTANTE: Mantieni le proporzioni */
    max-height: 80vh; /* <--- QUESTA È LA CLASSE CHE LIMITA L'ALTEZZA */
    display: block;
    object-fit: contain;
}

                    /******************** VIDEO TIGNALE ***************/
.hr-centrata {
    /* ⭐ 1. Definisce la larghezza (la tua richiesta del 50%) */
    width: 50%;
    /* ⭐ 2. Centra l'elemento a livello di blocco */
    margin-left: auto;
    margin-right: auto;
    /* Opzionale: Stili aggiuntivi per l'estetica */
}
/* ================================================= */
/* MODIFICA LIGHTBOX: AUMENTO DIMENSIONE VIDEO AL 90% */
/* (Questa sezione sovrascrive il vecchio max-width: 30vw) */
/* ================================================= */

/* 1. Sovrascrivere la larghezza massima del contenitore del video (.modal-content) */
/* Usiamo un selettore più specifico per forzare la modifica a 90vw. */
.ao-lightbox-modal .modal-content {
    /* ⭐ MAXI DIMENSIONE: Applica 90% della larghezza della viewport ⭐ */
    max-width: 90vw;
    /* Nota: max-height: 80vh è già definito e rimane valido */
}

/* 2. Assicurarsi che il video player (tag <video> iniettato) riempia il nuovo contenitore */
#modale-corpo video,
#modale-corpo iframe {
    /* Il contenitore è ora 90vw, quindi width: 100% lo riempie */
    width: 100%;
    height: auto;
    /* Queste regole esistono già, ma le manteniamo per specificità: */
    max-height: 80vh;
    display: block;
    object-fit: contain;
}


/* ========================================= */
/* 1. CONTENITORE PRINCIPALE (.video-tignale-container) */
/* Gestisce la centratura dell'intero blocco (Titolo, Link, Caption) nella pagina. */
/* ========================================= */

.video-tignale-container {
    /* Spazio di distacco (Separator) */
    margin: 40px 0 0 0;
    /* ⭐ CENTRATURA ESTERNA (DEL BLOCCO DA 350PX) ⭐ */
    display: flex;
    flex-direction: column; /* Impila gli elementi verticalmente */
    align-items: center;    /* Centra orizzontalmente tutti gli elementi figli */
    justify-content: center;
    /* Centra anche il testo/caption */
    text-align: center;
}

/* ⭐ GESTIONE TESTO/DIDASCALIA (.video-caption) ⭐ */
/* Rende la caption un blocco e le dà spazio sotto la miniatura */
.video-tignale-container .video-caption {
    font-style: italic;
    color: #333;
    margin-top: 10px;
    /* Forza a occupare una riga intera, evitando l'affiancamento */
    display: block;
}


/* ========================================= */
/* 2. CONTENITORE LINK/THUMBNAIL (.tignale-video-thumbnail) */
/* Il blocco di 350px che contiene immagine e icona. */
/* ========================================= */

.tignale-video-thumbnail {
    /* ⭐ CONTROLLO DIMENSIONI: Larghezza massima come la Nearby ⭐ */
    max-width: 350px;
    width: 100%;
    /* ⭐ CENTRATURA INTERNA: Centra l'icona Play al suo interno ⭐ */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Impedisce a Flexbox di alterare le proporzioni */
    min-height: 0;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

/* Effetto al passaggio del mouse */
.tignale-video-thumbnail:hover {
    transform: scale(1.02);
}


/* ========================================= */
/* 3. IMMAGINE E ICONA (PROPORZIONI e Stile) */
/* ========================================= */

.tignale-video-thumbnail .tignale-video-img {
    /* ⭐ PROPORZIONI CORRETTE (RISOLVE IL PROBLEMA DEL QUADRATO) ⭐ */
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    /* Impedisce a Flexbox di alterare le proporzioni (Critico per stabilità) */
    flex-shrink: 0;
    flex-grow: 0;
    object-fit: cover;
    display: block;
}

/* .tignale-video-thumbnail .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    pointer-events: none;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    opacity: 0.9;
} */

#award-booking-link:focus, #award-booking-link:active,
#cta-direct-book:focus, #cta-direct-book:active {
    outline: none;
    background-color: transparent;
}

/* ================================================= */
/* STILI PER LINK UFFICIO TURISMO (TESTO NORMALE) */
/* ================================================= */

.link-turismo {
    /* ⭐ 1. Aspetto generale (Sostituisce il blu/viola e la sottolineatura) */
    text-decoration: none !important;
    color: inherit !important; /* Eredita il colore del testo genitore */
    /* ⭐ 2. Comportamento (Rimuove il cursore a "mano") */
    cursor: default !important;
}

/* ⭐ 3. Neutralizzazione Stati di Interazione (Hover, Click, Visitato) */

.link-turismo:hover,
.link-turismo:focus,
.link-turismo:active,
.link-turismo:visited {
    /* Forza il mantenimento del colore e della formattazione in tutti gli stati */
    color: inherit !important;
    text-decoration: none !important;
    cursor: default !important;
}

/**** END VIDEO TIGNALE ****/


/* ================================================= */
/* === STILI GLOBALI (PC & MOBILE) === */
/* ================================================= */

/* Nuovo Wrapper: L'Ancora Relativa per l'Icona */
.video-thumbnail-wrapper {
    position: relative;
    line-height: 0;      /* Elimina lo spazio bianco sotto l'immagine */
    display: block;
}

/* Icona Play: Centratura Perfetta (Universale) */
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Stili generali dell'icona */
    color: white;
    background: none;
    box-shadow: none;
    border: none;
    font-size: 1.5em;
}
/* =================================================================
   5. MEDIA QUERY PER MOBILE (max-width: 768px)
   ================================================================= */

@media (max-width: 768px) {

    /* ================================================= */
    /* === LAYOUT E FLESSIBILITÀ (Regole Generali) === */
    /* ================================================= */

    .video-master-container { flex-direction: column; align-items: center; gap: 15px; }
    .main-path-column, .access-gallery { width: 90%; min-width: unset; flex-basis: auto; }
    .access-gallery { justify-content: center; }

    /* Contenitori dei 3 video affiancati (Layout 3 colonne) */
    .access-unit {
        width: calc(33.33% - 7px);
        /* min-width: 80px; */
        min-width: unset;
        flex-grow: 0;
        display: block;
        position: static;
        padding: 0;
        margin: 0;
    }

    /* ------------------------------------------------- */

    /* Gestione classi tignale (se presenti) */
    .tignale-video-thumbnail {
        max-width: 100%;
        width: 50vw;
    }
    .tignale-video-thumbnail .tignale-video-img {
        width: 100%;
        height: auto;
    }

    /* ------------------------------------------------- */

    /* Link Esterno: Annulla l'allungamento dovuto al testo (pulizia mirata) */
    .video-thumbnail-link {
        line-height: 0; /* Già gestito dal wrapper, ma per sicurezza */
        padding: 0;
        margin: 0;
        display: block;
        position: static; /* Deve essere statico */
    }

    /* Didascalia Testo (.video-caption): Ripristino Completo */
    .video-caption {
        /* ⭐ ANNULLAMENTO MIRATO per evitare compressione/sovrapposizione ⭐ */
        position: static !important; /* Deve stare nel flusso normale */
        line-height: 1.4 !important; /* Ripristina l'altezza normale della linea */
        white-space: normal !important; /* Forza l'andare a capo */
        display: block !important;
        float: none !important;

        /* Stili di formattazione */
        text-align: center;
        font-size: 0.85em;
        width: 100%;
        padding: 5px 4%;
        margin-top: 5px;
    }

    /* ================================================= */
    /* === STILI IMMAGINE E ALTRI === */
    /* ================================================= */
    .access-unit .thumbnail-img {
        width: 100%;
        height: auto;
        display: block;
    }
    .main-path-column .video-thumbnail-link {
        max-width: 90%;
        width: auto;
    }
    .path-description {
        text-align: center;
        margin-left: 0;
        padding: 0 15px;
    }
    .modal-content {
        max-width: 90vw;
        width: 90%;
    }
}

/* ******************************* VIDEO  VIDEO END ************************************** */

/* ******************************* FONT AWESOME ICONE CSS begin ************************************** */
/* Selettore del placeholder <i>, usato come contenitore per l'SVG */
        i[class*="fa-"] {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 0rem;
            /* color: #1e40af; */

            /* RISOLVE ALLINEAMENTO: Allinea l'icona verticalmente con il testo */
            vertical-align: middle;
            vertical-align: baseline;
            transform: translateY(0.25em); /* Piccola correzione verticale */
            /* transform: translateY(-0.08rem); */
        }

        /* CLASSE SVG: Applica la dimensione fissa all'SVG iniettato */
        .fa-icon-svg {
            fill: currentColor;

            /* RISOLVE DIMENSIONE ENORME:
               1.25rem è circa 20px (1.25 * 16px base) ed è STABILE. */
            width: 1.25em;
            height: 1.25em;
            @media (max-width: 768px) {width: 1.5em; height: 1.5em;}
        }

     /* CLASSE per fare testo piccolo in prezzi a partire da*/
        .price-little {
            font-size:0.9rem;
            color:#555555;
            line-height:1.4;
        }


.accordion {
  border-radius: 12px;
  background: #abd1a9c8;
  /* padding: 0.5rem 1rem; */
  margin-bottom: 1rem;
  border: 2px solid transparent;
}

/* respiro sul bordo finché non è mai stato aperto */
.accordion:not(.ever-opened) {
  animation: breathe-border 2.8s ease-in-out infinite;
}

@keyframes breathe-border {
  0%, 100% { border-color: transparent; box-shadow: none; }
  50%       { border-color: #aaa; box-shadow: 0 0 8px rgba(125, 187, 154, 0.6); }
}

.accordion-arrow {
  display: block;
  text-align: center;
  font-size: 1.3rem;
  color: #888;
  margin-top: 0.2rem;
  transition: transform 0.3s;
}

.accordion-toggle.is-open .accordion-arrow {
  transform: rotate(-180deg);
}
.accordion-toggle {
  color: #205f72;
  font-size: 1.8rem;
  font-weight: bold; /* se ce l'aveva */
  @media (max-width: 768px) {font-size: 0.9rem; }
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-toggle::after {
  content: '▼';
  transition: transform 0.3s;
  padding-right: 8px;
}

.accordion-toggle.is-open::after {
  transform: rotate(-180deg);
}
#accr-Benvenuti\ Tig.is-open img { display: none; }

.accordion-body {
  display: none;
  overflow: hidden;
}

.accordion-body.is-open {
  display: block;
  background: #fff;
  padding: 1rem;
}

/* Swipe Guard - effetto elastico */
@keyframes gardaSwipeGuard {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(55px); }
    60%  { transform: translateX(-8px); }
    80%  { transform: translateX(18px); }
    100% { transform: translateX(0); }
}
.swipe-guard-bounce {
    animation: gardaSwipeGuard 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}


/* CONTATTI EMAIL WHATSAPP TELEGRAM PHONE */

.contact-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 1.5rem 0;
}

.contact-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500 !important;
    color: inherit;
    text-decoration: none;
    width: 99%;
    box-sizing: border-box;  /* ← questo è il punto chiave */
    text-align: left;
    transition: background 0.15s;
}



.contact-btn:hover { background: #d4d1d1; }

.email-modal-box {
    background: #9da3ad;
    border-radius: 12px;
    width: 320px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.email-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    font-weight: 500;
}
.email-modal-header button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #000000;
}
.email-modal-body { padding: 20px 16px; }
.email-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 10px 14px;
}
.email-row button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: #555;
}
/* nearby #nearby-id — override per layout moderno senza scale */
#nearby-id .nearby-counter { position: absolute !important; bottom: 1% !important; right: 2% !important; z-index: 15 !important; background: rgba(0,0,0,0.469) !important; color: rgba(153,149,149,0.99) !important; padding: 0 5px !important; border-radius: 4px !important; font-size: 0.85rem !important; cursor: default !important; pointer-events: none !important; white-space: nowrap !important; opacity: 1 !important; }
#nearby-id.nearby-wrapper.is-zoomed .nearby-counter { cursor: pointer !important; pointer-events: auto !important; }
#nearby-id .nearby-title { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; overflow: hidden !important; opacity: 1 !important; transform: none !important; z-index: 5 !important; color: #f8ecc6 !important; background: rgba(13,53,99,0.908) !important; font-size: 0.85rem !important; font-weight: bold !important; text-align: center !important; padding: 4px 8px !important; box-sizing: border-box !important; }
#nearby-id.nearby-wrapper.is-zoomed .nearby-title { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; transform: none !important; opacity: 1 !important; font-size: 0.9rem !important; }
#nearby-id.nearby-wrapper.is-zoomed .nearby-nav-btn { font-size: 2rem !important; width: 2rem !important; height: 2rem !important; }

/* immagini: override class-based (le vecchie regole usavano id #nearby-img-1/2) */
#nearby-id .nearby-img-1,
#nearby-id .nearby-img-2 { position: absolute !important; top: 0 !important; left: 0 !important; padding: 0 !important; margin: 0 !important; object-fit: cover !important; object-position: center !important; opacity: 0 !important; z-index: 2 !important; }
#nearby-id .nearby-img-1.is-active,
#nearby-id .nearby-img-2.is-active { opacity: 1 !important; z-index: 3 !important; }
#nearby-id .nearby-img-1.is-vanishing,
#nearby-id .nearby-img-2.is-vanishing { opacity: 0 !important; }
#nearby-id .nearby-img-1.scroll-v,
#nearby-id .nearby-img-2.scroll-v { animation: scrollVerticalTransform var(--scroll-duration) linear infinite normal !important; }
#nearby-id .nearby-img-1.scroll-h,
#nearby-id .nearby-img-2.scroll-h { animation: scrollHorizontalTransform var(--scroll-duration) linear infinite normal !important; }

/* nearby in accordion — layout moderno come genova */
#nearby-id.nearby-wrapper {
    float: none !important;
    margin: 1rem auto !important;
    display: block !important;
    transform-origin: center center !important;
    width: var(--nearby-w, 30rem);
    height: auto !important;
    aspect-ratio: 1 / 0.66;
    padding-top: 0 !important;
    overflow: hidden !important;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
#nearby-id.nearby-wrapper.is-zoomed {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 1rem auto !important;
    width: var(--nearby-zoom-w, 70rem) !important;
    max-width: 90% !important;
    aspect-ratio: 1 / 0.66 !important;
    overflow: visible !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}