/** *  F O N T S
    ==================================================================================*/ 


    @import url('https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&display=swap');


    @font-face {
        font-family: 'Strong';
        src: url('../fonts/strong/StrongRegular.woff2') format('woff2'),
            url('../fonts/strong/StrongRegular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }



    /** *  V A R I A B I L I
    ==================================================================================*/


    :root {
        
        /** --------------- GESTIONE FONTS ----------------- */

        --font:             'Alan Sans';
        --titoli:           'Strong';
        --hand:             '';

        
         /** --------------- GESTIONE COLORI ----------------- */
        
        --maincolor:        #17325B;
        --gold:             #B08D57;
    
        
        --fontcolor:        #333;
        --linkfontcolor:    #666666;
        --bianco:           #fff;   
        --testi:            #444; 
        
        /** --------------- TITOLI ----------------- */

        
        --fluid-h1: clamp(2.03rem, calc(1.52rem + 2.54vw), 4.06rem);   /* ~65px desktop */
        --fluid-h2: clamp(1.76rem, calc(1.42rem + 1.71vw), 3.125rem);  /* 50px desktop */
        --fluid-h3: clamp(1.48rem, calc(1.25rem + 1.19vw), 2.44rem);   /* ~39px desktop */
        --fluid-h4: clamp(1.25rem, calc(1.09rem + 0.78vw), 1.875rem);  /* ~30px desktop */
        --fluid-h5: clamp(1.05rem, calc(0.95rem + 0.49vw), 1.4375rem); /* ~23px desktop */
        --fluid-h6: clamp(0.88rem, calc(0.82rem + 0.31vw), 1.125rem);  /* 18px desktop */
        
        /** --------------- GALLERY ----------------- */

        --goethe51-gallery-size: 500px;


        
    }


    /** *    S T R U T T U R A
    ==================================================================================*/

    body, html { height: 100%;}
    html { scroll-behavior: smooth;}

    body            		{ font-family: var(--font), sans-serif; background-color:#F4EEDF;   }

    .container-fluid        { padding: 0; }

    .site-title             { text-indent: -9999px; display: block; background-repeat: no-repeat; background-size: cover; z-index: 9999; background-image: url("../img/logo.svg");  }  
    .site-title               { filter: brightness(0) invert(1); }

    .site-description       { display: none; }

    .home #hero             { background-position: center bottom; }
     #hero                  {  position: relative; background-size: cover; }

    #map                    { height: 700px; min-height: 400px; margin-bottom: -100px;  }

    #contatti               { background-image: url("../img/contatti.webp"); background-size: cover; height: 100vh; padding: 40px; }
    
    #claim                  { position: absolute; bottom: 150px;   z-index: 9998;  }

    section.form            { background-color: #ECE3CE;  padding: 40px 0; margin:100px 0 0 0; }
    section#incipit           { padding: 0; margin-top: 80px; }


    .title                  { height: 100vh; background-size: cover; background-repeat: no-repeat;     display: flex;
    align-items: center; position: relative;}   

    .bianco                  { height: 100vh; background-size: cover; background-repeat: no-repeat;     display: flex;
    align-items: center; position: relative;}    
    .title   > div          { display: block; width: 40vw;}

    .testo              { margin: 80px; }

    .destra             { justify-content: right;   }
    .sinistra           { justify-content: left;   }

    footer              { position: relative; background-color: var(--maincolor); ; padding:80px 0; }

    .free               { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);}
    .free img           { width: 60px; height: auto; }
    .logo-footer        { width: 180px; height: auto; margin-bottom: 20px; filter: invert(1);}  

    
    .img-title-single-page      { overflow: hidden; position: relative; width: 100% !important; }
    .img-title-single-page      { background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover !important; }


    #title h2 { font-size: 60px; color: #fff;  letter-spacing: 2px;   text-transform: uppercase;  z-index: 2;}

    .img-testata { position: relative;}
    .img-opacity { background-color: rgba(0, 0, 0, 0.4); height: 100%; position: absolute; top: 0; width: 100%; z-index: 1;}

    .pagina         { padding: 80px;  }
    .contatti       { margin: 0 0 80px 0;  }


    .wp-block-media-text__media img { box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);}

            #hero::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(140deg,rgba(23, 50, 91, 0.9) 10%, rgba(23, 50, 91, 0.1) 100%);
                pointer-events: none;
            }

    .round  img  { border-radius: 15px;}

    .utility    { margin: 40px 0; column-count: 2; column-gap: 40px; }

            .header-cta {
          display: flex;
          align-items: center;   /* allineamento verticale */
          gap: 1rem;             /* spazio tra icona e pulsante */
        }

        /* da desktop, allinea a destra come faceva text-lg-end */
        @media (min-width: 992px) {
          .header-cta {
            justify-content: flex-end;
          }
        }

        .header-cta .whats {
          display: inline-flex;
          align-items: center;
          margin: 0;
        }

        .header-cta .whats i {
          display: block;
          line-height: 1;        /* toglie lo spazio verticale extra dell'icona */
        }

        .header-cta .expand {
          margin: 0;
        }

/* Sezione contenitore */
.orari{
   

    list-style:none;
    margin:40px 0;
    padding:0 !important;
    max-width:900px;
}

/* Card */
.orari li{
    position:relative;
    background:rgba(255, 255, 255, 0.3);
    border-radius:8px;
    padding:10px 20px 10px 70px !important;
    margin:0 0 5px 0;
    box-shadow:0 12px 35px rgba(17,35,58,.07);
    color:var(--main);
    font-size:14px;
    line-height:1.6;
    transition:.25s ease;
}

.orari li:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(17,35,58,.12);
}

/* Cerchio dorato */
.orari li::before{
    content:"";
    position:absolute;
    left:28px;
    top:50%;
    transform:translateY(-50%);
    width:30px;
    height:30px;
    border-radius:50%;
 
}

/* Indirizzo */
.orari li:nth-child(1)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317325B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.3-6-11a6 6 0 1 1 12 0c0 5.7-6 11-6 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

/* Orari */
.orari li:nth-child(2)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317325B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* Costo - variante senza cerchio */
.orari li:nth-child(3)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317325B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6.8A7.2 7.2 0 1 0 18 17.2'/%3E%3Cpath d='M4 10h9M4 14h9'/%3E%3C/svg%3E");
}

/* Sito web */
.orari li:nth-child(4)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317325B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M2.75 12h18.5'/%3E%3Cpath d='M12 2.75c2.6 2.4 4 5.6 4 9.25s-1.4 6.85-4 9.25c-2.6-2.4-4-5.6-4-9.25s1.4-6.85 4-9.25z'/%3E%3C/svg%3E");
}

/* Etichetta */
.orari li strong{
    display:block;
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:12px;
    font-weight:500;
}

/* Mobile */
@media (max-width:768px){

    .orari li{
        padding:100px 24px 24px;
    }

    .orari li::before{
        top:24px;
        left:24px;
        transform:none;

    }

}




/* =========================================================
   INFO ALLOGGIO - LAYOUT
   ========================================================= */
/* =========================================================
   INFO ALLOGGIO - LAYOUT
   ========================================================= */

.wp-block-columns:has(.blocco) {
    --info-blue: #17466d;
    --info-gold: #c4913c;
    --info-text: #31546d;
    --info-light: #eee8da;

    display: flex;
    gap: 0;
    margin: 0 auto;
}


/* ---------------------------------------------------------
   COLONNE
   --------------------------------------------------------- */

.wp-block-columns:has(.blocco) > .wp-block-column {
    flex: 1 1 50%;
    padding: 0 40px 0 0;
}

.wp-block-columns:has(.blocco) > .wp-block-column + .wp-block-column {
    border-left: 1px solid rgba(196, 145, 60, .30);
    padding-left: 40px
}


/* ---------------------------------------------------------
   SPAZIATURA SEZIONI
   --------------------------------------------------------- */

.wp-block-columns:has(.blocco) .wp-block-column > h4 {
    margin-top: 42px;
    margin-bottom: 12px;
}

.wp-block-columns:has(.blocco) .wp-block-column > h3 {
    margin-top: 42px;
    margin-bottom: 12px;
}

.wp-block-columns:has(.blocco) .blocco {
    margin-bottom: 50px;
}


/* ---------------------------------------------------------
   ICONA (cerchio + <i> Bootstrap Icons)
   --------------------------------------------------------- */

.blocco > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 1.5rem;
    row-gap: .5rem;
}

/* tutto tranne l'icona finisce in colonna 2, impilato normalmente */
.blocco > .wp-block-group__inner-container > *:not(i) {
    grid-column: 2;
}

/* l'icona resta in colonna 1, riga 1 */
.blocco i {
    grid-column: 1;
    grid-row: 1;
    align-self: start;

    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--info-gold);
    color: var(--info-light);
    font-size: 1.9rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.blocco h3 {
    align-self: center;
    margin: 0;
}


/* ---------------------------------------------------------
   LISTE
   --------------------------------------------------------- */

.wp-block-columns:has(.blocco) ul {
    margin-top: 5px;
    margin-bottom: 0;
    padding-left: 22px;
}

.wp-block-columns:has(.blocco) li {
    margin-bottom: 6px;
    padding-left: 2px;
}

.wp-block-columns:has(.blocco) li::marker {
    color: var(--info-gold);
    font-size: 13px;
}


/* ---------------------------------------------------------
   GRASSETTI
   --------------------------------------------------------- */

.wp-block-columns:has(.blocco) strong {
    color: var(--info-blue);
}


/* ---------------------------------------------------------
   NOTE / TESTO IN CORSIVO
   --------------------------------------------------------- */

.wp-block-columns:has(.blocco) em {
    font-size: 12px;
    line-height: 1.4;
    opacity: .9;
}


/* ---------------------------------------------------------
   SEPARATORE PREZZI
   --------------------------------------------------------- */

.wp-block-columns:has(.blocco) > .wp-block-column:nth-child(2)
    > p:last-child {
    margin-top: 28px;
    padding-top: 15px;
    border-top: 1px solid rgba(196, 145, 60, .35);
}


/* ---------------------------------------------------------
   PREZZI
   --------------------------------------------------------- */

.wp-block-columns:has(.blocco) > .wp-block-column:nth-child(2)
    > p:nth-of-type(2),
.wp-block-columns:has(.blocco) > .wp-block-column:nth-child(2)
    > p:nth-of-type(3) {
    margin-top: 20px;
}

.wp-block-columns:has(.blocco) > .wp-block-column:nth-child(2)
    > p:nth-of-type(2) strong,
.wp-block-columns:has(.blocco) > .wp-block-column:nth-child(2)
    > p:nth-of-type(3) strong {
    display: inline-block;
    margin-bottom: 3px;
    font-size: 14px;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .wp-block-columns:has(.blocco) {
        display: block;
    }

    .wp-block-columns:has(.blocco) > .wp-block-column {
        padding: 0 20px;
    }

    .wp-block-columns:has(.blocco) > .wp-block-column
        + .wp-block-column {
        margin-top: 45px;
        padding-top: 35px;
        border-left: 0;
        border-top: 1px solid rgba(196, 145, 60, .30);
    }

    .wp-block-columns:has(.blocco) h4,
    .wp-block-columns:has(.blocco) h3 {
        font-size: 18px;
    }

    /* cerchio icona più piccolo su mobile */
    .blocco > .wp-block-group__inner-container {
        grid-template-columns: 48px 1fr;
    }

    .blocco i {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
    }

}



    /** *   MOTIVI  ----------------------------- */

        .motivi-section     { background-color: var(--maincolor); } 
        .motivi-col         { padding: 1rem 2.5rem; display: flex; }
        .motivi-content     { width: 100%; } 
         #motivi .motivi-num         {font-family:var(--titoli); font-weight: 600; font-size: 2rem; color: var(--gold); letter-spacing: 0.03em; }

        #motivi h2          { color: var(--gold);   }
        #motivi h3          { color: #fff; letter-spacing: 2px;  }
        #motivi p           { font-family: var(--font), sans-serif; color: #fff;  }


        #motivi p.motivi-text       { font-family: 'Lora', serif; font-size: 0.98rem; line-height: 1.55; color: var(--gold); } 
        .motivi-divider       { border: none; border-top: 1px dotted rgba(201, 151, 77, 0.6); margin: 20px 0; opacity: 1; max-width: 80%;    } 
        #motivi p.motivi-footnote     { font-family: 'Lora', serif; font-style: italic; font-size: 14px; color: var(--gold); }



        @media (max-width: 767.98px) {
            .motivi-col {
                padding: 1.25rem 0.5rem;
                border-bottom: 1px solid rgba(201, 151, 77, 0.25);
            }

            .motivi-col:last-child {
                border-bottom: none;
            }
        }

        /* Linea verticale gold tra le colonne, solo da md in su */
        @media (min-width: 768px) {
            .motivi-col-border {
                border-left: 1px solid rgba(201, 151, 77, 0.5);
            }
        }


    /** *   CASE  ----------------------------- */

    #case h3            { margin: 20px 0;}

    .goethe51-gallery__viewport                     { max-width: var(--goethe51-gallery-size); } 
    .wp-block-gallery.goethe51-gallery-carousel     { width: var(--goethe51-gallery-size); } 

    .col-gallery-right { display: flex; justify-content: flex-end; }


    /** *   COOKIE  ----------------------------- */

    #s-ttl img          { padding: 10px 0; }
    #cookie             { color:var(--maincolor); }

    /** *   BANDO  ----------------------------- */

    .eu         { display: block; margin-top: 40px; }
    .eu img     { width: 100px; height: auto; }
    .eu p       { width: 120px; line-height: 18px; font-size: 12px; }

    /** *   IMG SWAP  ----------------------------- */

    .img-hover-swap { position: relative; display: inline-block; /* o block, dipende dal layout */}
    .img-hover-swap .img-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease;}
    .img-hover-swap:hover .img-hover { opacity: 1;}
    .img-hover-swap .img-default { transition: opacity 0.4s ease;}
    .img-hover-swap:hover .img-default { opacity: 0;}

    /** *   FASI  ----------------------------- */

    
    .fase           { position: relative; margin-bottom: 40px;}
    .fase span      { font-size: 7rem; font-weight: 700; line-height: 1; color: var(--lightblu); }
    .fase img       { margin-bottom: 20px; }




    /** * A N I M A Z I O N I D I P A G I N A
    ==================================================================================*/

    .reveal             { position: relative; transform: translateY(250px); opacity: 0; transition: 2s all ease;}
    .reveal.active      { transform: translateY(0); opacity: 1; }    



    
    /** *   TEAM SCHEDA SINGOLA  ----------------------------- */
    
    .single-staff #coprete  { display: none !important;}

     #single            { padding: 80px 0; }
    .title              { height: 80%; display: flex; align-items: flex-end; z-index: 9999; }

    .wpcf7-list-item    { margin: 0; }

    #info               { font-family: var(--titoli); border-top: 2px solid var(--maincolor); padding-top: 20px; margin-top: 80px; }

    .staff h3           { margin-top: 20px; }

    #address            { position: absolute; bottom: 50px; left: 40px; }
    #address p          { color: #fff; font-size: 18px; }
    #address a          { color: #fff; font-size: 18px; }
    #address a:hover    { color: #222529; text-decoration: underline; }

    /** *   NAVIGAZIONE POST  ----------------------------- */

    .post-navigation { border-top: 1px solid #ddd; position: relative; margin-top: 80px  }

    .post-navigation-inner {  max-width: 100%; padding: 30px 0; margin: 0 auto}
    .post-nav-prev,.post-nav-next { display: block; float: left; width: 47.5%}

    .post-navigation p { display: inline-block; padding-bottom: 2px; border-bottom: 2px solid var(--lightblu); margin-bottom: 8px; font-size: 1.4rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color:var(--lightblu); }

    .post-navigation h4 { display: block; font-size: 2em; font-weight: 700; line-height: 130%; margin: 0}
    .post-navigation h4 a {
        color: var(--maincolor);
        text-decoration: none
    }

    .post-navigation h4 a:hover     { color: var(--lightblu);}

    .post-nav-next                  { float: right}

    .post-nav-next,.post-nav-next h4 { text-align: right}



    /** *   T I P O G R A F I A
    ==================================================================================*/
    
    html                    { font-size:62.5%; }
    .small                  { font-size: 12px;}

    .eyebrow {
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 10px;
      font-weight: 600;
      margin-bottom: .5rem;
      color: var(--gold);
    }

     hr               { margin: 40px 0; }
    .title hr               { border: 1px solid var(--maincolor); width: 150px; opacity: 0.7; margin-top: 30px;}

    .wp-block-separator     { border: 1px solid var(--maincolor)!important; width: 150px !important; margin: 30px auto !important; }



    

/** * TITOLI  ----------------------------------------------------------------------- */
    
    h1, h2, h3, h4, h5, h6  { font-family: var(--titoli), sans-serif;  font-weight: normal; text-transform: uppercase; letter-spacing: 1px; color: var(--maincolor);  }

    h1   { font-size:var(--fluid-h1); }
    h2   { font-size:var(--fluid-h2); }
    h3   { font-size:var(--fluid-h3); }
    h4   { font-size:var(--fluid-h4); }
    h5   { font-size:var(--fluid-h5); }
    h6   { font-size:var(--fluid-h6); }



    .claim-home h1 { font-size: 24px; margin: 30px 0;}
    .claim-page h1 { font-size: 50px;} 
    #claim h1 { color:var(--bianco) }




    blockquote {

        color: var(--maincolor);
        margin:0 0 80px 0;
        overflow: hidden;
        padding: 5em 0;
        position: relative;
    }

    blockquote::before {
         font-family: var(--titoli), serif;
        content: '\201C';
        position: absolute;
        top: 120%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 40em;
        color: var(--maincolor);
        opacity: 0.08;
        line-height: 1;
        pointer-events: none;
        z-index: 0;
    }

    blockquote p {
        font-family: var(--titoli), serif;
        text-align: center !important;
        text-transform: uppercase;
        font-size: 3em !important;
        letter-spacing: 1px;
        line-height: 150%;
        margin: 0 0 0.3em 0;
        position: relative;
        z-index: 1;
    }


/** * PARAGRAFI  ----------------------------------------------------------------------- */

    p                      { font-size: 1.4em;  font-weight: 300;  line-height: 150%; margin-bottom: 40px;  }
    p.incipit              { font-size: 1.3em;  font-weight: 200;  line-height: 170%; text-transform: uppercase; letter-spacing: 1px;}
    
    #claim p               { font-size: 1.8em; color:var(--gold); font-weight: 200; line-height: 140%;  }

    .gaptext                { max-width: 400px; margin-left: auto; margin-right: auto;}


/** * COLLEGAMENTI  ------------------------------------------------------------------- */

    a                     { text-decoration: none; position: relative; }
    a:link                { color: var(--maincolor); }
    a:focus               { color: var(--maincolor); outline: 0; }
    a:hover               { text-decoration:none; }
    a:visited             {  }

    header a              { color: var(--bianco) !important; font-size: 13px; z-index: 9999;  }

/** * LISTATI  ------------------------------------------------------------------------ */

    ul, ol                      { padding: 0; color: var(--titoli); font-weight: 300; }

    .pagina ul, .pagina ol           { font-size: 1.6em;  padding: 0 0 0 40px; }
    .pagina ul li, .pagina ol li     { line-height: 170%; padding: 3px 0; }

    #single ul, #single ol      { font-size: 1.6em;  padding: 0; }

    #single ul                  { list-style: circle; margin: 0 0 40px 30px; }
    #single ul li               { padding: 10px 0; }

/** * TABELLE  ------------------------------------------------------------------------ */

    table       { font-size: 1.4em;    font-weight: 300; margin-bottom: 40px; }
    table td    { padding: 10px !important;  border-color: #D1CFD0 !important; }


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

    #nav a                { color: var(--maincolor); ; margin-right: 20px; }  
    #nav a:hover          { color: var(--bianco);  }  
    #nav i                { font-size: 24px; }  

    a.whats         { letter-spacing: 1px; margin-right: 10px; }
    .whats i       { margin-right: 20px; font-size: 30px; }


/** *   HOMEPAGE   -----------------------------------*/

    .home #nav a                { filter: brightness(0) invert(1); }
    .home #nav a.fissa:hover    { filter: none !important; }

    .home .button_container span    { filter: brightness(0) invert(1); }    


/** *   FORM  -----------------------------*/

    .form h3    { font-size: 28px !important;}

    .wpcf7-form h4 { margin-bottom: 20px;}

    .form-control   { font-size: 1.2em; font-weight: 200; }
    .form-control-lg { padding: 10px;}
    .wpcf7-spinner  { visibility: hidden; display: none; }

    .wpcf7 label    { text-transform: uppercase; color:var(--gold); font-weight: 500; font-size: 13px; letter-spacing: 1px; margin-bottom: 10px }


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

    .leaflet-popup-content p    { font-size: 13px; font-weight: 400; }



    /** *   PAGINA  -----------------------------*/

    .pagina p       { text-align: justify;  line-height: 24px;}


    /** *   CASE   -----------------------------*/

        .room-services {
            background: var(--maincolor);
            padding: 50px 0 ;
        }

        .room-services-title {
            margin: 0 0 25px;
            text-align: center;
            font-size: 18px;
            font-weight: 400;
            letter-spacing: .5px;
            color: var(--gold);
        }

        .service-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            text-align: center;
            color: var(--gold);
        }

        /* ICONA: stesso spazio per Bootstrap Icons e SVG */
        .service-item i,
        .service-item .service-icon {
            width: 42px;
            height: 42px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        /* Bootstrap Icons */
        .service-item i {
            font-size: 32px;
            line-height: 1;
            font-weight: normal;
        }

        /* SVG */
        .service-item .service-icon {
            fill: none;
            stroke: currentColor;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

     .service-item span {
        color: #fff;
        font-size: 10px;
        line-height: 1.35;
        height: 30px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
         text-transform: uppercase;
         letter-spacing: 2px;
    }


    .subtitle   { text-transform: uppercase; letter-spacing: 2px; color: #ccc;}


    .scroll-discover {
        position: absolute;
        left: 50%;
        bottom: 35px;
        transform: translateX(-50%);

        display: flex;
        flex-direction: column;
        align-items: center;

        cursor: pointer;
        z-index: 10;

        color: #fff;
    }

    .scroll-discover__label {
        margin-bottom: 12px;

        font-size: 9px;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;

        transition: opacity .4s ease,
                    transform .4s ease;
    }

    .scroll-discover__line {
        position: relative;

        width: 1px;
        height: 55px;

        background: rgba(255,255,255,.45);

        overflow: hidden;
    }

    .scroll-discover__dot {
        position: absolute;
        top: -6px;
        left: 50%;

        width: 5px;
        height: 5px;

        border-radius: 50%;
        background: #fff;

        transform: translateX(-50%);

        animation: scrollDot 2s ease-in-out infinite;
    }

    @keyframes scrollDot {

        0% { top: -6px; opacity: 0; } 
        20% { opacity: 1; } 
        80% { opacity: 1; } 
        100% { top: 55px; opacity: 0; }

    }


    /* Quando l'utente ha iniziato a scrollare */

    .scroll-discover.is-hidden { pointer-events: none; } 
    .scroll-discover.is-hidden .scroll-discover__label { opacity: 0; transform: translateY(-8px); } 
    .scroll-discover.is-hidden .scroll-discover__line { opacity: 0; transform: scaleY(.5); transition: opacity .5s ease, transform .5s ease; }


    /* Hover */

    .scroll-discover:hover .scroll-discover__label  { letter-spacing: 2.5px; } 
    .scroll-discover:hover .scroll-discover__line   { background: rgba(255,255,255,.7); }


    /* Mobile */

    @media (max-width: 767px) {

        .scroll-discover { bottom: 25px; } 
        .scroll-discover__label { font-size: 8px; letter-spacing: 1.7px; margin-bottom: 9px; } 
        .scroll-discover__line { height: 40px; }
        
    }

    @keyframes scrollDot {

        0% { top: -6px; opacity: 0; } 
        20% { opacity: 1; } 
        80% { opacity: 1; } 
        100% { top: 40px; opacity: 0; } }

    }

    /** *   CONTATTACI -----------------------------*/

    #contatti              { font-family: var(--Ubuntu); color:var(--maincolor) !important; }
    #contatti h3           { font-size: 50px; margin-bottom: 20px;  }
    #contatti h4           { font-size: 18px; font-weight: 400;  }
    #contatti .contatto    { font-size: 18px; font-weight: 300; margin: 40px 0; }
    #contatti a            { font-size: 19px; font-weight: 500; position: relative; }
    .contatto img          { float: left; margin-right: 30px; }

    /** * a:hover effect -----------------------------*/

    footer a:not(.free):after  {
        
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 1px;
        bottom: -5px;
        left: 0;
        transform-origin: bottom right;
        transition: transform 0.25s ease-out;
        
    }

    footer a:not(.free, .eu):after           { background-color: rgba(176, 141, 87, 0.7) }
    footer a:not(.free, .eu):hover:after     { transform: scaleX(1); transform-origin: bottom left; }


    /** *   FOOTER  -----------------------------*/

    footer p              { color: var(--bianco); font-size: 1.3em; }
    footer h3             { margin: 0 0 20px 0; color: var(--bianco); font-size: 1.6em; text-transform: uppercase; font-weight: 300; letter-spacing: 1px; }
    footer a              { color: var(--gold) !important; }

    footer ul li            { padding: 0 0 8px 0; list-style: none; }
    footer ul li a:link     { font-size: 1.3em; color: var(--gold) !important; }
    footer ul li a:hover    { color: var(--gold) !important; }
    footer ul li a:visited    { color: var(--bianco) ; }

    /** *   SITEMAP  -----------------------------*/

    ul.sitemap                  { column-count: 3; margin: 40px 0;}
    ul.sitemap li               { line-height: 26px; }
    ul.sitemap li a             { color: var(--maincolor); }
    ul.sitemap li a:hover       { color: var(--lightblu); }


    /** *   BUTTONS  -----------------------------*/

    .btn                  { font-family: var(--titoli), sans-serif; text-transform: uppercase; letter-spacing: 2px;  }

    .btn-outline-light              { padding: 7px 15px; color: var(--bianco) !important; } 
    .btn-outline-light:hover        { background-color: var(--maincolor); border-color: var(--maincolor); color: #fff; } 

    .btn-outline-primary            { color: var(--maincolor); border-color: var(--maincolor);}
    .btn-outline-primary:hover      { background-color: var(--maincolor); border-color: var(--maincolor);}

    .btn-primary                    { color: #fff !important; background-color: var(--maincolor); border-color: var(--maincolor); }
    .btn-primary:hover              { background-color: var(--gold); border-color: var(--gold); }

    .btn-primary.disabled, .btn-primary:disabled { background-color: #3e8e96; border-color: #3e8e96;}

    #call .btn            { font-size: 14px;  padding: 8px 20px; font-weight: 700; }
    #nav .btn             { padding: 5px 20px; }  
    .slide .btn           { font-size: 14px; }  

    .fissa                { font-size: 13px;  }

    .btn:focus { outline: none !important; } 
    .btn:focus { box-shadow: none; }

    .wpcf7-submit {
      display: inline-block;
      font-weight: 500;
      font-size: 1rem;
      letter-spacing: 0.03em;
      color: #fff;
      background-color: #1F3A5F;
      border: 1px solid #1F3A5F;
      border-radius: 0.375rem;
      padding: 0.6rem 1.75rem;
      transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
      cursor: pointer;
    }

    .wpcf7-submit:hover,
    .wpcf7-submit:focus {
      background-color: #B08D57;
      border-color: #B08D57;
    }

    .wpcf7-submit:focus {
      box-shadow: 0 0 0 0.2rem rgba(176, 141, 87, 0.35);
      outline: none;
    }

    .wpcf7-submit[disabled] {
      opacity: 0.65;
      cursor: not-allowed;
    }




    /** * BTN EXPAND
        ==================================================================================*/

        .expand-group                   { display: flex; align-items: center; }



        a.expand,
        a.expand-light {
            --button-height: 40px;
            overflow: hidden;
            outline: none;
            border-radius: 7px;
            padding: 12px 25px;
            font-size: 10px;
            letter-spacing: 1px;
            border: none;
            cursor: pointer;
            position: relative;
            text-decoration: none;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            z-index: 12000;
            transition:
                padding 0.3s,
                background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease;
        }

        /* --- variante piena --- */
        a.expand             { background-color: var(--maincolor); color: #fff; }

        /* --- variante outline --- */
        a.expand-light      { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.8); }

        a.expand-light      { margin: 0 !important; } 
        a.expand-light i    { margin-left: 10px; }

        /* ============================================
           HOVER / LOADING — comune a entrambe
           ============================================ */

        a.expand:hover,
        a.expand.loading,
        a.expand-light:hover,
        a.expand-light.loading {
            padding-right: calc(20px + var(--button-height));
             color: #fff !important;
        }

        a.expand:hover,
        a.expand.loading {
            background-color: var(--gold);
             color: #fff;
        }

        a.expand-light:hover,
        a.expand-light.loading {
            border-color: var(--gold);
            background: var(--gold);
            color: #fff;
        }

        /* ============================================
           ICONA — comune a entrambe
           ============================================ */

        .expand-icon {
            --icon-size: 10px;
            position: absolute;
            top: 0;
            right: 0;
            height: var(--button-height);
            width: var(--button-height);
            display: flex;
            justify-content: center;
            align-items: center;
            transform: translateX(calc(var(--button-height) + 1px));
            transition: transform 0.3s;
        }

        a.expand:hover > .expand-icon,
        a.expand.loading > .expand-icon,
        a.expand-light:hover > .expand-icon,
        a.expand-light.loading > .expand-icon {
            transform: translateX(0);
            transition: transform 0.3s 0.05s;
        }

        .expand-icon > svg {
            height: var(--icon-size);
            width: var(--icon-size);
            transform: scale(1.5);
            transition: transform 0.3s;
        }

        .expand-icon > svg.second {
            display: none;
            transform: scale(0) translateY(50px);
            transition: transform 0.3s;
        }

        /* ============================================
           STATI loading / loaded / finished — comuni
           (gestiti via JS aggiungendo/rimuovendo classi)
           ============================================ */
        a.expand.loading > .expand-icon > svg,
        a.expand-light.loading > .expand-icon > svg {
            transform: scale(0);
        }

        a.expand.loading > span > span.loader,
        a.expand-light.loading > span > span.loader {
            opacity: 1;
        }

        a.expand.loaded > span > span.loader,
        a.expand-light.loaded > span > span.loader {
            opacity: 0 !important;
        }

        a.expand.loaded > .expand-icon > svg.first,
        a.expand-light.loaded > .expand-icon > svg.first {
            display: none;
        }

        a.expand.loaded > .expand-icon > svg.second,
        a.expand-light.loaded > .expand-icon > svg.second {
            display: block;
        }

        a.expand.finished > .expand-icon > svg.second,
        a.expand-light.finished > .expand-icon > svg.second {
            transform: scale(1.5) translateY(0px);
        }

        @keyframes rotate {
            0% { transform: scale(0.3) rotateZ(0deg); }
            100% { transform: scale(0.3) rotateZ(360deg); }
        }

    /** *    G U T E N B E R G
    ==================================================================================*/

    .alignwide          { margin: 32px calc(25% - 25vw); max-width: 100vw;}
    .alignwide img      { max-width: 1600px; display: inline; }
    
    .alignleft,.alignright  { margin-bottom: 20px;    width: 40%; }
    .alignleft              { float: left;	margin: 5px 40px 30px 0; }

    .alignfull              { margin: 0 calc(50% - 50vw); max-width: 100vw; width: 100vw;}

    .colonne-attestati {
        align-items: stretch !important;
    }

    .colonne-attestati .wp-block-column {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .colonne-attestati .wp-block-column .wp-block-image {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .colonne-attestati .wp-block-column .wp-block-image img {
        width: auto;
        max-width: 100%;
        max-height: 400px;
        height: auto;
        object-fit: contain;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5
        );    

        }


    /** * MENU
    ==================================================================================*/


    .desktop-menu               { align-items: center;}
    .desktop-menu .navbar-nav   { margin: 0;}

    #toggle { display: block; width: 30px; z-index: 13000 !important;}

    .header-items { position: absolute; top: 45px; right: 10px; z-index: 13000;}
    .header-items { display: flex; align-items: center; flex: 1; text-align: right; justify-content: flex-end;}

    .icona { font-size: 24px; color: #fff; margin: 0 20px;}
    a.icona:hover { color: var(--giallo);}


    ul#main-menu { z-index: 12000; position: relative;}
    ul#main-menu li { list-style: none;}
    ul#main-menu li a { color: #fff; font-size: 13px; font-weight: 400; text-transform: uppercase;}
    ul#main-menu li a:hover { color: var(--gold) !important;}

    header a:hover              { color: var(--gold) !important; }
    header a:not(.expand-light) { display: inline-block; }

    header li a::after, header a:not(.expand):not(.expand-light):not(.whats):not(.site-title)::after {
        content: '';
        display: block;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .6s ease;
    }

    header a:not(.expand):not(.expand-light):not(.site-title):hover::after {
        transform: scaleX(1);
    }

header nav a { white-space: nowrap;}


/* =========================
   TOGGLER
========================= */

.custom-toggler:focus,
.custom-toggler:active,
.custom-toggler:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.custom-toggler {
    border: 0;
    background: transparent;

    width: 40px;
    height: 40px;

    position: absolute;
    right: 10px;
    top: 0;
    z-index: 10000;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 0;
}

.custom-toggler span {
    position: absolute;

    width: 100%;
    height: 2px;

    background: #fff;

    transition: all 0.3s ease;
}


/* linee hamburger */

.custom-toggler span:nth-child(1) {
    top: 10px;
}

.custom-toggler span:nth-child(2) {
    top: 19px;
}

.custom-toggler span:nth-child(3) {
    top: 28px;
}

/* STATO ACTIVE = X */

.custom-toggler.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 19px;
}

.custom-toggler.active span:nth-child(2) {
    opacity: 0;
}

.custom-toggler.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 19px;
}


/* =========================
   OVERLAY
========================= */

.mobile-menu-overlay {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    background: rgba(26, 37, 71, 0.9);

    z-index: 9999;

    display: flex;

    justify-content: flex-start; /* ← invece di center */

    padding:80px 0 0 40px; /* distanza dal bordo */

    opacity: 0;
    visibility: hidden;

    transition: 0.4s ease;
}



/* APERTO */

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* =========================
   MENU VERTICALE
========================= */

.mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;

}

.mobile-menu-list li {
    margin: 4px 0;
}

.mobile-menu-list a {
    font-size: 3rem;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
}

.mobile-menu-list .sub-menu { padding-left: 40px;}
.mobile-menu-list .sub-menu a { font-size: 2rem;}

/* =========================
   CLOSE
========================= */

.close-menu {
    position: absolute;
    top: 80px;
    right: 12px;

    border: 0;
    background: none;
  

    cursor: pointer;
}

.close-menu svg {
    width: 40px;
    height: auto;
}

/* =========================
   DESKTOP
========================= */

@media (min-width: 992px) {

    .mobile-menu-overlay,
    .custom-toggler {
        display: none;
    }

}


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


    /** *  R E S P O N S I V E
    ======================================================================================================================= */


    @media (max-width: 768px) and (orientation: portrait) {
      .hero, section:first-of-type, [class*="hero"], [class*="banner"] {
        min-height: -webkit-fill-available;
      }
    }



    @media ( max-width: 1024px) {
        
        
        
        html, body { overflow-x: hidden; max-width: 100%; } 
        * { box-sizing: border-box; } 
        
        #pagina     { padding: 0 40px; } 
        .logo       { margin-top: 20px; } 
        .mobile-no  { display: none; } 
        
        .expand-group { display: flex; flex-direction: column; width: 100%; } 
        .expand-group .expand { width: 100%; box-sizing: border-box; text-align: center; justify-content: center; } 
        .expand-group a:first-child { margin-bottom: 20px; }
        
        section.form { padding: 40px 20px; margin: 0; } 
        
        h4.titoletto { font-size: 21px; margin: 40px 0; } 
        .claim-page h1 { font-size: 32px; text-align: center; } 
        section { padding: 15px; } 
        
 

  /* colonne impilate, senza overflow */
  .pagina .wp-block-columns {
    flex-wrap: wrap;
    row-gap: 24px;
    margin-bottom: 0;
  }

  .pagina .wp-block-column {
    flex: 0 0 100% !important;   /* batte il flex-basis:50% inline */
    max-width: 100%;
    min-width: 0;                /* evita che il contenuto allarghi la colonna */
  }

  /* testo sempre prima, galleria sempre dopo */
  .pagina .wp-block-column:has(> .wp-block-gallery),
  .pagina .wp-block-column.col-gallery-right {
    order: 2;
  }

  /* gallery carousel: mai oltre il viewport */
  .pagina .wp-block-gallery.goethe51-gallery-carousel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
  }

  .pagina .goethe51-gallery__viewport {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .pagina .goethe51-gallery__slide img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* spacer meno invadenti su mobile */
  .pagina .wp-block-spacer[style*="height:100px"] { height: 32px !important; }
  .pagina .wp-block-spacer[style*="height:40px"]  { height: 16px !important; }

        


    }

    @media ( min-width: 1024px) {
        
        .desktop-menu       { margin-top: 20px;}
        .mobile-no a        { margin-top: 30px;}

        #claim                  { width: 40vw; z-index: 9998; }
        .spazio                 { padding: 140px; }

        section                 { padding: 80px 0;}

        .expand-group a:first-child     { margin-right: 40px; }

        #booking .row       { align-items: flex-start; } 
        #booking .col-lg-4  { position: sticky; top: 100px; align-self: flex-start; height: fit-content; }
        
        






        
    }

    /** * ==================================================================================*/

    @media (max-width: 480px) {

        .site-title { background-size: cover; height: 78px; width: 200px; } 
        
        .button_container       { top: 40px; right: 20px; }
        
        .home #hero             { background-size: cover !important; background-position: -525px top !important; height: 80vh;   }
        #home .testo            { width: 90vw; height: auto; display: block; z-index: 2; }
        #home h3                { font-size: 21px; }
        
        .gut                    { padding: 0px 20px 40px 20px; }
        
        #claim                  { left: 20px; width: calc( 100% - 40px ); }
        #claim h3               { font-size: 3.5em; }
        #claim p                { text-align: center;}
        #call                   { bottom: 30px; }
       

        #home > section         { background-size: cover !important; background-position: center top !important;  }

        #hero                   { height: 70vh;  padding:0 20px; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover; }
        
        #coprete                { height: 60vh; margin-top: 110px; }

        #nav                    { display: none; right: 0; top: 100px; width: 100vw;     }
        #nav a                  { margin-right: 10px; }
        
        #single, .pagina        { padding:40px 20px;  }
        
        footer                  { text-align: center; }
        
        .scroll                 { display: none; }
        
        .wp-block-spacer                                      { height: 30px !important; }
        .wp-block-media-text .wp-block-media-text__media      { margin-bottom: 20px; }
        
        .wp-block-media-text>.wp-block-media-text__content { padding: 0 !important;}
        
         /** *   TEAM SCHEDA SINGOLA  ----------------------------- */
        
        .title > div     { width: 90vw; }    
        .title h2        { font-size: 2.8em; }
        .title h3        { font-size: 1.8em; }
        
         /** *   MENU  ------------------------------------------- */

        .menumain       { width: 80vw; }
        #address        { bottom: 30vh; }

        ul.nav li a     { font-size: 28px; }
        
         /** *   SLIDE CONTATTI  ------------------------------------------- */
        
        #contatti h3 { font-size: 36px; }
        
         /** *   BANDO  ------------------------------------------- */
        
        .eu p       { margin: 0 auto; }


      }

    /** * ==================================================================================*/

    @media (min-width: 480px) and (max-width: 767px) {
        
         .site-title             { background-size: cover; height: 78px; width: 200px; } 


        .home #hero             { height: 100vh; min-height: 900px; padding: 40px; }
         #hero                  { height: 90vh; min-height: 700px; padding: 40px;  }


      }

    /** * ==================================================================================*/

    @media (min-width: 768px) and (max-width: 1024px)  {


         .site-title             { background-size: cover; height: 78px; width: 200px; } 
         .home #hero             { height: 100vh;  padding: 40px; background-position: center top !important; }
         #hero                   { height: 90vh; min-height: 700px; padding: 40px;  }
         
        ul#main-menu li a       {  letter-spacing: 1px; padding: 0 5px; font-size: 11px !important;}

    } 

    /** * ==================================================================================*/

    @media (min-width: 1025px) and (max-width: 1280px) {
        
  
        .site-title { background-size: cover; height: 78px; width: 200px; } 
        
        .home #hero             { height: 100vh; min-height: 900px; padding: 40px; }

        #hero                   { height: 90vh; min-height: 700px; padding: 40px;  }
        #coprete                { height: 90vh; }
        
        #home .testo            { width: 40vw; height: auto; display: block; z-index: 2; }
        #main-menu              { z-index: 20000; }
        
        #contatti               { min-height: 900px; }
        
        ul#main-menu li a       {  letter-spacing: 2px; padding: 0 8px; font-size: 11px !important;}


    }



    /** * ==================================================================================*/

    @media (min-width: 1281px) {


        .site-title { background-size: cover; height: 78px; width: 200px; } 
        
        .home #hero { position: relative; height: 100vh; min-height: 900px; padding: 40px; } 
        #hero { position: relative; /* ← fondamentale */ height: 80vh; min-height: 600px; padding:20px 40px; } 
        #home .testo { width: 40vw; height: auto; display: block; z-index: 2; } 
        #main-menu { z-index: 20000; } #contatti { min-height: 900px; }
        
        .wp-block-media-text { margin-bottom: 80px;}
        
        ul#main-menu li a {  letter-spacing: 3px; padding: 0 15px;}

    }  


/** * =========  T H E E N D ========================================================================= */