body{margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #b2cbd1;
  overflow-x: hidden;
  position: relative;}

.logo {text-align: center;
      margin-top: 0px;
      background-color: white;
      position: fixed;
      width: 100%;
      left: 0;
      top: 0px;
      z-index: 1000;}

.logo img {height: 50px;
           width: auto;}

.foto    {display: block;
          position: relative;}


.foto img {margin: 30px auto;
          width: 100%;
          height: auto;
          display: block ;}

.testo1 {position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);}

.testo1 p {color: rgb(255, 255, 255);
           text-shadow: 1px 1px 3px black;;
           font-size: 20px;
           text-align: center;
          font-family: 'Cinzel', serif;
          font-weight: 50px;
           }

.bottone {font-size: 20px;
           cursor: pointer;
           position: absolute;
          top: 10px;
          right: 10px;
           z-index: 1001;}

.menu {display: none;
       flex-direction: column;
      background-color: white;
      padding: 10px;
      position: fixed;
       top: 35px;
       z-index: 999;
       height: 100vh;
       right: -100px;
       width: 250px;
      list-style: none;
      border: 1px solid #ccc;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
      transition: right 0.3s ease-in-out;
      gap: 1.5rem;}

.menu.active {right: 0;}

main.menu-open{transform: scale(0.95) translate(-30px);
               filter: brightness(0.7);}

.menu li a { text-decoration: none;
             color: #02343f;
             }
  
.menu.show {display: flex !important;
          flex-direction: column;
           font-family:'Cinzel', serif;}

.sottomenu {position: relative;}

.menusotto {display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: white;
            list-style: none;
             padding: 10px 0;
             box-shadow: 0 4px 8px rgba(0,0,0,0.2);
             z-index: 1000;
             min-width: 160px;}

.menusotto li a {display: block;
                 padding: 10px 20px;
                color: #02343f;
                 text-decoration: none;
                 text-align: left;}
            
.menusotto li a:hover {background-color: #f0f0f0;}

.sottomenu:hover .menusotto {display: block;}

.galleria {display: flex;
           justify-content: center;
           align-items: flex-start;
           gap: 20px;
          padding: 40px;
          background-color: #b2cbd1;}

.galleria img { height: 500px;
                object-fit: cover;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
                transition: transform 0.3s ease;}

.galleria .scale {margin-top: 30px;}

.galleria .sera {margin-top: 0px}

.galleria .entrata {margin-top: 60px;}

.galleria img:hover {transform: scale(1.02);}

.storia {display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 60px 80px;
         background-color: #b2cbd1 ;
         gap: 40px;
          box-shadow: 2px 2px 5px black;}

.termine {flex: 1;
          color:rgb(255, 255, 255) ;
          position: relative;}

.termine h2 {font-size: 30px;
             margin-bottom: 10px;
             text-transform: uppercase;
            font-family:  'Cinzel', serif;
            text-shadow: 1px 1px 3px black;}

.termine h3 {font-size: 20px;
              text-transform: uppercase;
             margin-bottom: 20px;
             font-family:  'Cinzel', serif;
            text-shadow: 1px 1px 3px rgb(0, 0, 0);}

.termine p {font-size: 20px;
            font-family:  'Cinzel', serif;
            line-height: 1.6;
            font-weight: 700;
            letter-spacing: 1px;
            color: rgb(255, 255, 255);
          text-shadow: 1px 1px 3px black;}

.affresco {flex: 1; }


.affresco img {width: 100vh;
               object-fit: cover;} 

.riempio {position: relative;
          }

.nobordi  {position: absolute;
           top: -500px;
           left: 0;
           width: 350px;

           }

.contenitore-camere {padding: 80px 20px;
                     align-items: flex-start;
                    border: none;}

.contenitore-camere h2 {font-size: 50px;
                        margin-bottom: 40px;
                        margin-top: 0;
                        letter-spacing: 2px;
                        text-transform: uppercase;
                        color: #ffffff;
                        text-shadow:1px 1px 3px black; ;
                        font-family: 'Cinzel', serif;}

.lista-camere {display: flex;
               justify-content: center;
               gap: 70px;
               }

  .camera {position: relative;
           width: auto;
           height: auto;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
          transition: transform 0.3s ease;}

.camera:hover {transform: scale(1.03);}

.camera img { object-fit: cover;
              display: block;
              height:500px ;}

.sovrascritta {position: absolute;
               bottom: 50%;
               width: 100%;
               background-color: rgba(0, 0, 0, 0.5);
               color: white;
               font-family:'Cinzel', serif ;
               text-align: center;
               padding: 10px 0;
               font-weight: bold;
               font-size: 16px;
               text-transform: uppercase;
              z-index: 1;}
    
.cameraluce {display: block;
             position: relative;}

.cameraluce img {margin: 30px auto;
                 width: 100%;
                 height: auto;
                 display: block ;}

.testoluce {position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);}


.testoluce p {text-align: center;
               color: white;
               font-size: 20px;
               font-family: 'Cinzel', serif;
                text-shadow: 1px 1px 3px black;}

.carosello {overflow-x:auto;
            scroll-behavior: smooth;
            overflow-y: hidden;
            white-space: nowrap;
            padding: 20px;
            background-color: #b2cbd1;
             -ms-overflow-style: none;
             scrollbar-width: none;}

.contenitore-carosello {display: flex;
                        gap:20px;
                        width: max-content;}

.carosello img {width:350px;
            height: auto;
            object-fit: cover;
             flex-shrink: 0;
           box-shadow: 2px 6px 10px rgba(0,0,0,0.2);
           transition: transform 0.3s ease;}

.carosello img:hover {transform: scale(1.05);}


.gallery h2 {font-size: 50px;
             color: white;
             text-shadow: 0px 0px 3px black;
             font-family:'Cinzel', serif ;}

.sezione3  {display: flex;
            margin-top: 80px;
            margin-left: 20px;}

.sezione3 img {box-shadow: 1px 1px 4px black;
              height: auto;
               width: 550px;
              background-color: #B8ADA0;}

.descrizione {display: flex;
              justify-content: center;
              align-items: center;
              margin-left: 50px;}


.descrizione p {font-size: 20px;
                font-family:'Cinzel', serif;
                color: white;
                text-align: center;
                text-shadow: 1px 1px 3px black;}

.bottoneprenota {display: inline-block;
                 background-color: #B8ADA0;
                 color: white;
                 text-decoration: none;
                 padding: 12px 24px;
                 font-family: 'Cinzel', serif;
                 font-size: 16px;
                 text-align: center;
                 text-transform: uppercase;
                 border: none;
                 cursor: pointer;
                 transition: background-color 0.3s ease;}

.bottoneprenota:hover {background-color: #a09689;}

.tastobottone {display: flex;
               justify-content: center;
               width: 100%;
               align-items: center;
               margin: 50px 0;}

.camera-acqua {display: block;
              position: relative;}

.camera-acqua img {display: block;
                   width: 100%;
                   height: auto;}

.testo-acqua {position: absolute;
              left: 35%;
              top: 20%;}

.testo-acqua p {text-align: center;
               color: white;
               font-size: 20px;
               font-family: 'Cinzel', serif;
                text-shadow: 1px 1px 3px black;}

.introduzione {padding: 40px 20px;
              display: flex;
              justify-content: space-between;}

.introduzione video {display: flex;
                     box-shadow: 1px 1px 4px black;}

.testo-intro {display: flex;
              justify-content: center;
              align-items: center;
              margin: 90px; }


.testo-intro p {text-align: center;
               color: white;
               font-size: 20px;
               font-family: 'Cinzel', serif;
                text-shadow: 1px 1px 3px black;}

.riempio3 {position: relative;}


.nobordi3 {position: absolute;
           top: -100px;
          left: -550px;
          width: 450px;}

.carosello2 {overflow: auto;
             scroll-behavior: smooth;
             overflow-y: hidden;
            white-space: nowrap;
            padding: 20px;
            background-color: #b2cbd1;
          -ms-overflow-style: none;
             scrollbar-width: none;}

.contenitore-carosello2 {display: flex;
                         gap: 20px;}

.nomestanza h2 {font-size: 30px;
                color: white;
                 font-family: 'Cinzel', serif;
                text-shadow: 1px 1px 3px black; }


.contenitore-carosello2 img {width: 350px;
                             height: auto;
                             object-fit: cover;
                             flex-shrink: 0;
                            transition: transform 0.3s ease;
                            box-shadow: 2px 6px 10px rgba(0,0,0,0.2)S ;}


.contenitore-carosello2 img:hover {transform: scale(1.05);}


.camera-aria {display: block;
              position: relative;}

.camera-aria img {display: block;
                  width: 100%;}

.testoaria {position: absolute;
            top: 25%;
            left: 27%;
          }

.testoaria p {text-align: center;
               color: white;
               font-size: 20px;
               font-family: 'Cinzel', serif;
                text-shadow: 1px 1px 3px black;}

.introduzione2 {display: flex;
                padding: 40px 20px;}

.introduzione2 img {display: flex;
                    width: 450px;
                  box-shadow: 1px 1px 4px black; ;}

.testo-intro2 {display: flex;
               align-items: center;
               margin: 90px;}

.testo-intro2 p {text-align: center;
               color: white;
               font-size: 20px;
               font-family: 'Cinzel', serif;
                text-shadow: 1px 1px 3px black;}

.riempio4   {position: relative;}

.nobordi4 { position: absolute;
  top: -200px;
  left: -500px;
  width: 450px;
  z-index: -1;
  pointer-events: none;
  display: block;
  border: none;
  box-shadow: none;
  background: transparent;
  clip-path: inset(0px 30px);}

.carosello3 {overflow: auto;
            scroll-behavior: smooth;
            overflow-y: hidden;
            white-space: nowrap;
            padding: 20px;
            -ms-overflow-style: none;
             scrollbar-width: none;}

.contenitore-carosello3 {display: flex;
                        gap: 20px}

.carosello3 img {width:350px;
                 height: auto;
                object-fit: cover;
                flex-shrink: 0;
                 box-shadow:2px 6px 10px rgba(0,0,0,0.2);
                 transition: transform 0.3s ease;}

.carosello3 img:hover {transform: scale(1.05);}

.nomestanza2 {font-size: 30px;
                color: white;
                 font-family: 'Cinzel', serif;
                text-shadow: 1px 1px 3px black; }

.contenitore-prenotazioni {padding: 80px 20px;
                           background-color: #b2cbd1;
                           font-family: 'Cinzel', serif;
                            color: white;
                            text-align: center;}

.contenitore-prenotazioni h2 {font-size: 40px;
                              text-shadow: 1px 1px 3px black;
                             margin-bottom: 30px;
                             text-transform: uppercase;}

.form-prenotazione {max-width: 600px;
                    margin: 0 auto;
                    background-color: #a0b8be;
                    padding: 30px;
                  border-radius: 30px;
                   box-shadow: 2px 2px 10px rgba(0,0,0,0.3);}

.form-prenotazione label {display: block;
                          margin-top: 15px;
                          font-size: 18px;
                          text-align: left;}

.form-prenotazione input,
.form-prenotazione textarea {width: 100%;
                             padding: 10px;
                             font-size: 16px;
                              border: none;
                             border-radius: 5px;
                             font-family: 'Cinzel', serif;
                             margin-top: 5px;
                             margin-bottom: 20px;}

.bottone-prenotazioni {
  background-color: #B8ADA0;
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  font-family: 'Cinzel', serif;
  border: none;
  cursor: pointer;  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.bottene-prenotazioni:hover {  background-color: #a09689;}

/* ====== CONTATTI ====== */
.contatti-wrap {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 16px;
}/* === SEZIONE CONTATTI (solo questa) === */

/* === SEZIONE CONTATTI (solo questa) === */
.contatti{
  max-width: 900px;
  margin: 40px auto 20px;
  padding: 0 16px;
}

.contatti .box{
  background: #ffffffcc;          /* carta chiara */
  backdrop-filter: blur(3px);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 22px 24px;
}

.contatti h2{
  font-family: 'Cinzel', serif;   /* coerente col sito */
  font-size: 28px;
  margin: 0 0 12px;
  letter-spacing: .5px;
  border-bottom: 2px solid #0b3d3b20;
  display: inline-block;
  padding-bottom: 4px;
}

.contatti ul{
  list-style: none;               /* niente pallini */
  margin: 0;
  padding: 0;
}

.contatti li{
  margin: 10px 0;
  font-size: 18px;
  line-height: 1.6;
}

.contatti strong{
  color: #0b3d3b;
  font-weight: 700;
  margin-right: 6px;
}

.contatti a{
  color: #0b3d3b;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.contatti a:hover{
  border-bottom-color: #0b3d3b;
}

/* === MAPPA SOLO CONTATTI === */
.mappa{
  max-width: 900px;
  margin: 16px auto 60px;
  padding: 0 16px;
}
.mappa .wrap{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;         /* 16:9 */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.mappa iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* mobile solo per la sezione contatti */
@media (max-width: 768px){
  .contatti .box{ padding: 16px; }
  .contatti li{ font-size: 16px; }
  .mappa .wrap{ padding-bottom: 60%; }
}
 
 

/* mobile solo per la sezione contatti */
@media (max-width: 768px){
.mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
  .contatti .box{ padding: 16px; }
  .contatti li{ font-size: 16px; }
  .mappa .wrap{ padding-bottom: 60%; }
}
/* === SEZIONE CONTATTI (solo questa) === */
.contatti{
  max-width: 900px;
  margin: 40px auto 20px;
  padding: 0 16px;
}

.contatti .box{
  background: #ffffffcc;          /* carta chiara */
  backdrop-filter: blur(3px);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 22px 24px;
}

.contatti h2{
  font-family: 'Cinzel', serif;   /* coerente col sito */
  font-size: 28px;
  margin: 40px auto 12px;
  letter-spacing: .5px;
  border-bottom: 2px solid #0b3d3b20;
  display: inline-block;
  padding-bottom: 4px;
}

.contatti ul{
  list-style: none;               /* niente pallini */
  margin: 0;
  padding: 0;
}

.contatti li{
  margin: 10px 0;
  font-size: 18px;
  line-height: 1.6;
}

.contatti strong{
  color: #0b3d3b;
  font-weight: 700;
  margin-right: 6px;
}
.contatti { position: relative; z-index: 2; margin-bottom: 16px; }
.contatti a{
  color: #0b3d3b;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.contatti { position: relative; z-index: 2; margin-bottom: 16px; }
.mappa { position: relative; z-index: 1; margin-top: 24px; }ù
.mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }


/* mobile solo per la sezione contatti */
/* =========================================================
   MOBILE ONLY (<=768px) — VERSIONE PERFETTA + SOLO CAMERA LUCE
   ========================================================= */
@media (max-width: 768px){

  /* sicurezza globale */
  html, body { overflow-x: hidden !important; }

  /* HEADER — rimuovere spazio tra logo e foto principale */
  .logo { margin-bottom: 0 !important; }
  .foto img{
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: block !important;
  }

  /* HERO HOME (invariato) */
  .foto { position: relative !important; margin-top: 0 !important; }
  .foto img{
    width: 100% !important;
    height: clamp(360px, 68vh, 520px) !important;
    object-fit: cover !important;
  }
  .testo1{
    position: absolute !important;
    left: 50% !important;
    top: 44% !important;
    transform: translate(-50%, -50%) !important;
    width: 92% !important;
    text-align: center !important;
    z-index: 2 !important;
  }

  /* GALLERIA HOME 3 FOTO (invariata) */
  .galleria{
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 8px !important;
    padding: 0 8px !important;
    overflow: hidden !important;
  }
  .galleria > *{
    flex: 1 1 0% !important;
    margin: 0 !important;
    transform: none !important;
  }
  .galleria img{
    width: 100% !important;
    height: clamp(180px, 32vh, 240px) !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* SEZIONE “TERMINE” (invariata) */
  .storia{
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 24px 16px !important;
  }
  .termine{
    text-align: center !important;
    padding: 0 12px !important;
    max-width: 800px !important;
  }
  .affresco{ width: 100% !important; }
  .affresco img{
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* ===================== SOLO CAMERA LUCE (SEZIONE3) — MODIFICA ===================== */
  .sezione3{
    display: grid !important;
    grid-template-columns: 1fr !important;       /* impilo su mobile */
    justify-items: center !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 24px 12px 0 !important;              /* rimuove il margin-left desktop */
  }
  .sezione3 img{
    width: 100% !important;
    max-width: 560px !important;
    height: auto !important;                      /* nessuna deformazione */
    object-fit: cover !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
    display: block !important;
  }
  .descrizione{
    margin: 0 !important;                         /* elimina margin-left:50px desktop */
    padding: 0 12px !important;
    width: 100% !important;
    max-width: 640px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .descrizione p{
    font-size: clamp(16px, 4.2vw, 18px) !important;
    line-height: 1.45 !important;
    text-align: center !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }
  /* =================== FINE MODIFICA SOLO SEZIONE3 =================== */

  /* CAMERE — HERO (invariato) */
  .cameraluce img{
    width: 100% !important;
    height: clamp(280px, 50vh, 400px) !important;
    object-fit: cover !important;
  }
  .camera-acqua img,
  .camera-aria img{
    width: 100% !important;
    height: clamp(300px, 55vh, 450px) !important;
    object-fit: cover !important;
  }
  .testoluce, .testo-acqua, .testoaria{
    position: absolute !important;
    left: 50% !important;
    top: 44% !important;
    transform: translate(-50%, -50%) !important;
    width: 92% !important;
    text-align: center !important;
  }

  /* Introduzione (invariata) */
  .introduzione, .introduzione2{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 16px 12px !important;
    align-items: center !important;
    justify-items: center !important;
  }
  .introduzione video, .introduzione2 img{
    width: 100% !important;
    max-width: 560px !important;
    max-height: 46vh !important;
    height: auto !important;
    object-fit: cover !important;
  }
  .testo-intro, .testo-intro2{
    width: 100% !important;
    max-width: 640px !important;
    text-align: center !important;
  }

  /* Caroselli interni (invariati) */
  .carosello, .carosello2, .carosello3{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding: 12px 8px !important;
    max-width: 100vw !important;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .contenitore-carosello, .contenitore-carosello2, .contenitore-carosello3{
    display: inline-flex !important;
    gap: 12px !important;
    width: auto !important;
  }
  .carosello img, .contenitore-carosello2 img, .carosello3 img{
    width: 260px !important;
    height: auto !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
  }

  /* Lista camere (invariata) */
  .lista-camere{
    flex-wrap: wrap !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
  }
  .camera{ width: 100% !important; max-width: 560px !important; }
  .camera img{
    width: 100% !important;
    height: clamp(300px, 58vh, 420px) !important;
    object-fit: cover !important;
  }
  .sovrascritta{ font-size: 14px !important; padding: 8px 0 !important; }

  /* Elementi decorativi (invariati) */
  .nobordi, .nobordi3, .nobordi4{ display: none !important; }
}