* {
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;

font-family: 'Lato', sans-serif; /* Nova fonte padrão para parágrafos */
  line-height: 1.6; /* Aumenta o espaçamento entre linhas, facilitando a leitura */
  color: #333; /* Uma cor de texto padrão um pouco mais suave que o preto puro */
 background-color: #fff;
}
button:hover{
  
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    

}

a {
  color: #1C2611;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  opacity: 0.7;
}

.data-reservada {
  background: #f50505 !important;
  color: white !important;
  border-radius: 50%;
  cursor: not-allowed;
  opacity: 0.6;
}

.data-disponivel {
  background: #4caf50 !important;
  color: white !important;
  border-radius: 50%;
  cursor: pointer;
}


.logo {
  font-size: 24px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-weight: bol2der;
  color: black;
  text-transform: uppercase;
  letter-spacing: px;
  margin: 28px;

}
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.card-form-active {
    max-width: 500px !important;
}

#card-form-container {
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-top: 20px;
}
#payment-brick-container {
    max-height: 60vh; /* Altura máxima */
    overflow-y: auto; /* Scroll se necessário */
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 15px 0;
}

/* Título do PIX */
#payment-brick-container h3 {
    text-align: center;
    color: #0056b3;
    margin-bottom: 15px;
    font-size: 1.2em;
}

/* Container do QR Code */
#paymentBrick_container {
    max-width: 100%;
    text-align: center;
}

/* Imagem do QR Code */
#paymentBrick_container img {
    max-width: 250px !important; /* Tamanho controlado */
    height: auto !important;
    margin: 0 auto;
    display: block;
}

/* Texto do código PIX */
#paymentBrick_container p {
    word-break: break-all;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 0.9em;
    margin: 15px 0;
}

/* Botão de copiar código */
#paymentBrick_container button {
    padding: 8px 16px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px 0;
    font-size: 0.9em;
}

#paymentBrick_container button:hover {
    background: #0056b3;
}

/* Loading spinner */
#paymentBrick_container .loading-spinner {
    width: 30px;
    height: 30px;
    margin: 15px auto;
}

/* Mensagem de aguardo */
#paymentBrick_container p:last-of-type {
    text-align: center;
    font-style: italic;
    color: #666;
    margin-top: 10px;
}
.modal-content.payment-brick-active {
    max-height: 80vh;
    overflow-y: auto;
}

/* Esconde elementos não necessários quando PIX está ativo */
.payment-brick-active #reservaInfo,
.payment-brick-active #info,
.payment-brick-active .button-container,
.payment-brick-active .alert {
    display: none !important;
}
#voltar-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    margin-top: 15px;
    cursor: pointer;
    text-align: center;
}

#voltar-btn:hover {
    background: #5a6268;
}
nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #fff;
  width: 100%;
  height: 15vh;
  
  z-index: 1000;
  
}

main {
  background-size: cover;
  height: 92vh;

}

.nav-list {
  list-style: none;
  display: flex;
  font-size: 20px;
  font-family: "Platypi", serif;
  

}

.nav-list li {
  letter-spacing: 3px;
  margin-left: 38px;
  
}

.mobile-menu {
  display: none;
  cursor: pointer;
  z-index: 20;
}

.mobile-menu div {
  width: 32px;
  height: 2px;
  background: black;
  margin: 8px;
  transition: 0.3s;
}

.no-scroll {
  overflow: hidden;
}




@media (min-width: 600px){
 .promocao-content-wrapper {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;

   /* height: 100%;*//*novo intem adicionado pra imagem */
    
  }
.promocao-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center; /* IMAGEM À DIREITA */

    /*novo imtem adicionados pra imagem */
    /* height: 100%;
      overflow: hidden;
      border-radius: 8px;*/
    
  }
 .promocao-image img {
    width: 100%;
   /* max-width: 280px;*/
    height: 100px;
    
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

.promocoes-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
    overflow-y: hidden;
}

.promocoes-titulo {
    font-size: 2.5rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin-bottom: 30px;
    font-family: "Platypi", serif;
}

.promocoes-carrossel {
    display: flex;
    overflow-x: auto;
    overflow: hidden;
    scroll-behavior: smooth;
    margin-bottom: 20px;
    border-radius: 10px;

     scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.promocao-card {
    min-width: 100%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;

    scroll-snap-align: start;
    flex-shrink: 0;

    /*min-height: 300px;*//*novo intem adcionado pra imagem */
}

.promocao-card:hover {
    transform: translateY(-5px);
}

.promocao-header {
    margin-bottom: 20px;
}

.promocao-header h3 {
    font-size: 1.8rem;
    color: #025959;
    margin-bottom: 10px;
    font-family: "Platypi", serif;
}

.promocao-periodo {
    font-size: 1.2rem;
    color: #4C591E;
    font-weight: bold;
}

.promocao-content {
    margin-bottom: 0px;
    text-align: left;
    flex: 1;/*2*/

    /*novo intem adicionado pra imagem abaixo*/
    /*display: flex;
      flex-direction: column;
      justify-content: center;*/
}

.promocao-content ul {
    list-style: none;
    padding: 0;
}

.promocao-content li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    position: relative;
    padding-left: 25px;
}

.promocao-content li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #25D366;
    font-weight: bold;
}

.promocao-footer {
    margin-top: 20px;
}

.promocao-btn {
    background-color: #025959;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.promocao-btn:hover {
    background-color: #013f3f;
    transform: translateY(-2px);
}


.carrossel-controles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.carrossel-anterior,
.carrossel-proximo {
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carrossel-anterior:hover,
.carrossel-proximo:hover {
    background: white;
    transform: scale(1.1);
}

.carrossel-indicadores {
    display: flex;
    gap: 10px;
}

.indicador {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.3s ease;
}

.indicador.ativo {
    background: white;
    transform: scale(1.2);
}
.promocao-relampago {
    border: 2px solid #ff6b6b;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
    position: relative;
    overflow: hidden;
}

.promocao-relampago::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 60px 60px 0;
    border-color: transparent #ff6b6b transparent transparent;
}

.badge-relampago {
    background: #ff6b6b;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.preco-original {
    text-decoration: line-through;
    color: #888;
    font-size: 0.9em;
}

.preco-promocional {
    color: #e74c3c;
    font-size: 1.4em;
    font-weight: bold;
}

.tempo-restante {
    font-size: 0.8em;
    color: #e74c3c;
    margin-top: 8px;
    font-weight: bold;
}
}
@media (max-width: 600px){
      .promocao-content-wrapper {
        flex-direction: column; /* Imagem em cima, conteúdo embaixo */
        
      }
    
    .promocao-image {
        order: -1; /* Coloca a imagem primeiro (em cima) */
        margin-bottom: 15px;
        /*justify-content: center;*/
    }
    
    .promocao-image img {
       /* max-width: 100%;*/
        height: 150px;
    }
    
    .promocao-content {
        order: 2;
        
    }
 

  .promocoes-container {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    text-align: center;
    /*overflow-y: hidden;*/
    overflow: hidden; /* Alterado de overflow-y: hidden para overflow: hidden */
    position: relative;
    
}

.promocoes-titulo {
    font-size: 2.5rem;
    color: #000000e0;
    text-shadow: 2px 2px 4px rgba(240, 239, 239, 0.911);
    margin-bottom: 30px;
    font-family: "Platypi", serif;
    background-color: #FFF;
    
    
}

.promocoes-carrossel {
    display: flex;
    /*overflow-x: hidden;*/
    overflow: hidden;
    overflow-x: hidden; /* Alterado para auto para permitir scroll */
    scroll-snap-type: x mandatory; /* Adicionado para snap effect */
    scroll-behavior:smooth ;
    margin-bottom: 20px;
    border-radius: 10px;
     -webkit-overflow-scrolling: touch; /* Suave scrolling no iOS */
}

.promocao-card {
    min-width: 90%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    scroll-snap-align: center; /* Centraliza cada card */
    flex-shrink: 0; /* Impede que os cards reduzam */
    margin: 0 auto; /* Centraliza horizontalmente */
}

.promocao-card:hover {
    transform: translateY(-5px);
}

.promocao-header {
    margin-bottom: 20px;
}

.promocao-header h3 {
    font-size: 1.8rem;
    color: #025959;
    margin-bottom: 10px;
    font-family: "Platypi", serif;
}

.promocao-periodo {
    font-size: 1.2rem;
    color: #4C591E;
    font-weight: bold;
}

.promocao-content {
    margin-bottom: 25px;
    text-align: left;
    
}

.promocao-content ul {
  display: inline-block;
  list-style: none;
    padding: 0;
    
}

.promocao-content li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    position: relative;
    padding-left: 25px;
}

.promocao-content li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #25D366;
    font-weight: bold;
}

.promocao-footer {
    margin-top: 20px;
}

.promocao-btn {
    background-color: #025959;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.promocao-btn:hover {
    background-color: #013f3f;
    transform: translateY(-2px);
}

.carrossel-controles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.carrossel-anterior,
.carrossel-proximo {
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carrossel-anterior:hover,
.carrossel-proximo:hover {
    background: white;
    transform: scale(1.1);
}

.carrossel-indicadores {
    display: flex;
    gap: 10px;
}
.promocoes-carrossel::-webkit-scrollbar {
    display: none;
}

.indicador {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.3s ease;
}

.indicador.ativo {
    background: white;
    transform: scale(1.2);
}
.promocao-relampago {
    border: 2px solid #ff6b6b;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
    position: relative;
    overflow: hidden;
}

.promocao-relampago::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 60px 60px 0;
    border-color: transparent #ff6b6b transparent transparent;
}

.badge-relampago {
    background: #ff6b6b;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.preco-original {
    text-decoration: line-through;
    color: #888;
    font-size: 0.9em;
}

.preco-promocional {
    color: #e74c3c;
    font-size: 1.4em;
    font-weight: bold;
}

.tempo-restante {
    font-size: 0.8em;
    color: #e74c3c;
    margin-top: 8px;
    font-weight: bold;
}
}
@media (max-width: 999px) {
  body {
    overflow-x: hidden;
    



  }
 
  

  #lu li {

    color: white;


  }



  /*.nav-list {

    position: absolute;
    top: 12vh;
    right: 0;
    width: 100vw;
    height: 90vh;
    background: #1C2611;
    flex-direction: column;
    align-items: center;
    display: flex;
    text-align: center;
    justify-content: space-evenly;
    margin: 0%;
    transform: translate(100%);
    transition: transform 0.3s ease-in;
    z-index: 15;
    
  }

  .nav-list li {
    margin-left: 0;
    opacity: 0;



  }*/
.nav-list {
    position: absolute;
    top: 12vh;
    right: 0;
    width: 100vw;
    height: 88vh; /* Altura ajustada */
    
    /* --- COR DE FUNDO ATUALIZADA --- */
    background: rgba(28, 38, 17, 0.97); /* Sua cor original, mas com 97% de opacidade */
    backdrop-filter: blur(5px); /* Efeito de desfoque no fundo (super moderno!) */
    
    flex-direction: column;
    align-items: center;
    display: flex;
    
    /* --- ESPAÇAMENTO ATUALIZADO --- */
    justify-content: flex-start; /* Alinha os itens no topo */
    padding-top: 40px;          /* Adiciona um espaço no topo */

    margin: 0%;
    transform: translate(100%);
    transition: transform 0.3s ease-in;
    z-index: 15;
  }

  /* Adicionamos esta regra para o espaçamento entre os links */
  .nav-list li {
    margin-left: 0;
    opacity: 0;
    margin-bottom: 30px; /* Controla o espaço entre cada link */
  }
  li a {
    color: white;

  }

  .mobile-menu {
    display: block;
  }

  nav {
    background-color: #fff;
    height: 12vh;
    position: fixed;
    z-index: 1000;
  }


  .nav-list.active {
    transform: translateX(0);
 


  }
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

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

.mobile-menu.active .line1 {
  transform: rotate(-45deg) translate(-8px, 8px);
}

.mobile-menu.active .line2 {
  opacity: 0;
}

.mobile-menu.active .line3 {
  transform: rotate(45deg) translate(-5px, -7px);
}

.rolagem {

  width: 100vw;
  height: 80vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
  /* Esconde a rolagem */
  position: relative;

  text-align: center;
  flex-direction: row;
  display: flex;
}

.rolagem img.active {
  opacity: 1;
}

.carousel {
  display: flex;
  width: 320%;
  /* Ajuste isso dependendo do número de imagens */
  height: 100%;
  transition: transform 1s ease-in-out;
  background-repeat: no-repeat;


}

.carousel img {
  width: 100vw;
  /* Ajuste isso para a largura desejada da imagem */
  height: 100%;
  object-fit: cover;



}

.reserva {
  width: 650px;
  height: 100px;

  list-style-type: none;

  position: absolute;
  display: flex;

  top: 25%;
  /* Centraliza verticalmente */
  left: 50%;
  /* Centraliza horizontalmente */
  transform: translate(-50%, -50%);
  /* Ajusta para centralizar */
  z-index: 10;


}

ul {
  margin: auto;
}

.data {
  margin: 5px;
  width: 165px;
  height: 30px;
  text-align: center;
  background-color: #ffffff;
  color: red;
  font-weight: bolder;
  border: #000;




}

#data_reserva {
  font-size: 18px;

}

#data_saida {
  font-size: 18px;




}


#adultos {
  width: 85px;
  font-size: 18px;
}

#criancas {
  width: 85px;
  font-size: 18px;


}



.data::placeholder {
  font-size: 12px;

  font-weight: bolder;



}

#btn {
  width: 80px;
  height: 31px;
  margin-top: 30px;
  /*background-color: red;
  color: white;*/
  background-color: red; /* Verde Sucesso */
  color: white;
  transition: background-color 0.3s ease;

}



.reserva label {
  display: block;
  color: black;
  font-size: 18px;
  font-family: Georgia, 'Times New Roman', Times, serif;

}

.flex-container {
  display: flex;
  gap: 1px;
  flex-wrap: wrap;



}

.flex-item label {
  color: #ffffff;
  font-family: "Platypi", serif;
  font-weight: bolder;

}

.reserva .flex-item {
  flex: 1;

}


/*esse é certo*/
.modal {
  display: none;
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  top: 49%;


}

.moda,
p {
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  text-align: justify;
  font-size: 18px;
}

/*.modal-content {
  background-color: #f0f0f0;
  padding: 18px;
  border-radius: 5px;
  width: 900px;
  
  height: auto;
  margin-top: 8%;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.651);
}
#confirm-regras-view{
 display: none; 
 text-align: center; 
 padding: 20px 0;
 

}*/
.modal-content {
  background-color: #f0f0f0;
  padding: 25px;
  border-radius: 5px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.651);
  transition: width 0.3s ease;
  height: auto; /* Altura automática por padrão */
  margin-top: 5%;
}

/* 2. ESTILO ESPECÍFICO PARA O MODAL DE RESERVA (GRANDE) */


/* 3. ESTILO ESPECÍFICO PARA O MODAL DE TERMOS (PEQUENO E COM ROLAGEM) */
.modal-content.modal-termos {
  width: 600px; /* Largura menor, mais apropriada para texto */
  max-height: 80vh; /* Altura máxima de 80% da tela */
  overflow-y: auto; /* Adiciona BARRA DE ROLAGEM se o conteúdo for maior */
  text-align: center;
  align-items: flex-start; 
  margin-bottom: 20%;
  
}
/* =================================
   POSICIONAMENTO DO SEGUNDO MODAL (TERMOS)
   ================================= */


/* Remove a regra antiga que escondia este elemento */
#confirm-regras-view {
  display: block; 
  text-align: center; 
  padding: 20px 0;
}
.rgs{
  margin: 20px 0;
   text-align: left;
    display: flex;
    gap: 8px;
}
#info {
  display: flex;
  flex-direction: row;
  gap: 5px;
  margin: 5px;
  padding-top: 8px;
  padding-bottom: 10px;
}

#info label {
  font-size: 18px;
  color: #333;
  
  align-items: center;
  
  
}

#info input {
  
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 15px;
  width: 150px;
  height: 30px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.26);
  text-align: center;
}

.modal-content h3 {
  text-align: center;
}

.close {
  float: right;
  font-size: 20px;
  cursor: pointer;
}
#regras-view {
    /* Estilos para o container da tela de regras */
    text-align: left;
     /* Fundo levemente cinza para diferenciar */
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20%;
    /* A mágica do scroll interno para não poluir a tela */
    max-height: 50vh; /* Altura máxima de 50% da tela */
    overflow-y: auto; /* Adiciona scroll vertical APENAS se necessário */
}

#regras-view h2 {
    text-align: center;
    margin-top: 0;
    color: #0056b3;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

#regras-view p {
    font-size: 0.9em;
    line-height: 1.6;
}

#regras-view ul {
    list-style: disc;
    padding-left: 20px;
    margin-top: 15px;
}

#regras-view li {
    margin-bottom: 10px;
}
.button-container{
  gap: 8px;
  text-align: center;
}
#confirmar-pagamento-btn{
  background-color: #28a745;
    width: 138px;
    height: 40px;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.443) 0px 0px 10px;
    margin: 10px;
    border-radius: 5px;
    border-width: 0px;
    border-style: solid;
    border-color: black;
    border-image: initial;
}
#ler-regras-btn{
   background-color: #0056b3;
    width: 138px;
    height: 40px;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.443) 0px 0px 10px;
    margin: 10px;
    border-radius: 5px;
    border-width: 0px;
    border-style: solid;
    border-color: black;
    border-image: initial;
}
.card-form-active{
  max-height: 60vh;
     /* altura máxima (80% da tela) */
  overflow-y: auto; 
  
}

.row-3-KWvY{
 
  align-items: center;
}

.whatsapp-button {
  background-color: #25D366;
  height: 40px;
  width: 138px;
  color: white;
  border: none;

  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  justify-content: center;
  text-decoration: none;
  display: inline-flex;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.445);
  align-items: center;
  margin: px;



}

.whatsapp-button:hover {
  background-color: #0c3a23;
}

#whatsappLink {
  text-align: center;
  font-size: 16px;



}

.obs {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
  color: #333;
}

.close h2 {
  font-size: px;
}



.carousel img.small-screen{
  display: none;
}

@media (max-width: 600px) {

  .carousel img {
    display: none; 
  }

  .carousel img.small-screen {
    display: block;
    width: 100vw;
    height: 100%;
  }

  
  /*.modal-content {
    width: 320px;
    height: auto;
    background-color: #fffffffb;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.459);
    margin-bottom: 40%;
    


  }*/
  /*.modal-content {
    width: 90%; 
    max-width: 320px;
    
    height: auto;
    min-height: 80vh; 
    
    
  }*/
  .modal-content {
    width: 90%;
    max-width: 350px; /* Um pouco mais de espaço */
    margin: 5vh auto;  /* Centraliza e dá um respiro no topo/baixo */
    height: auto;
    padding: 20px;
    overflow-y: auto;
}

/* 2. REGRA ESPECÍFICA para o primeiro modal (o da reserva) */
.modal-content.modal-reserva {
    /* Aqui podemos definir uma altura maior se necessário, mas 'auto' geralmente é melhor */
     min-height: 0;
    max-height: 60vh;
     text-align: left;
    
     overflow-y: auto;
     margin-bottom: 80%;
     
     
     
}

/* 3. REGRA ESPECÍFICA para o segundo modal (termos e regras) */
.modal-content.modal-termos {
    /* Forçamos a altura a ser automática, ignorando qualquer 'min-height' geral */
    height: auto;
    min-height: 0; /* Reseta qualquer altura mínima anterior */
    max-height: 70vh; /* Garante que ele não ocupe a tela toda */
    overflow-y: auto; /* Adiciona scroll se o conteúdo interno (regras) for grande */
    margin-bottom: 50vh;
  }
.modal-content.qr-code-active {
    width: 90%;
    max-width: 320px; /* Largura menor para o QR Code */
    min-height: 0;    /* Remove a altura mínima */
    margin-bottom: 36vh;
    max-height: 70vh;


}
.card-form-active{
  max-height: 60vh;
     /* altura máxima (80% da tela) */
     padding: 10px;
  overflow-y: auto; 
  
}

.row-3-KWvY{
 
  align-items: center;
}

  #info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    
     
  }
  
  #info label {
    font-size: 15px;
    color: #333;
    text-align:  justify;
    align-items: center;

    
  }
  
  #info input {
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: white;
    color: black;
    font-size: 13px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.26);
    font-size: 18px;
    width: 96%;
    height: 25px;
    padding: 5px; 
    margin-bottom: 3px; 
    text-align: center;
  
    
  }
  #pix-btn{
  background-color:  #0056b3;
 height: 40px;
  width: 96%;
  color: white;
  border: none;
  margin-top: 9px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
  justify-content: center;
  text-decoration: none;
  display: inline-flex;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.445);
  align-items: center;
  margin: px;
  text-align: center;
  
  }
  #card-btn{
  background-color:  #0056b3;
  height: 40px;
  width: 96%;
  color: white;
  border: none;
  margin-top: 9px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
  justify-content: center;
  text-decoration: none;
  display: inline-flex;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.445);
  align-items: center;
  margin: px;
  
  }
  

  #confirmar {
    

  background-color: #25D366;
  height: 40px;
  width: 96%;
  color: white;
  border: none;
  margin-top: 9px;
  border-radius: 5px;
  /*cursor: pointer;*/
  font-size: 15px;
  justify-content: center;
  text-decoration: none;
  display: inline-flex;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.445);
  align-items: center;
  margin: px;
  }

  #whatsappLink {
    width: 100%;
    height: 28PX;
    margin-top: 5px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.288);
    text-align: center;
    font-size: 13px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

  /*.whatsapp-button {
    width: 100%;
    text-align: center;
    font-size: 18px;
   

  }*/


  .modal-content h3 {
    padding-bottom: 5px;
  }

  .moda,
  p {
    font-family: Arial, Helvetica, sans-serif;
    color: #0a0a0a;
    text-align: justify;
    font-size: 14px;
  }
  .modal {
  display: none;
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  top: 49%;


}
#regras-view {
    /* Estilos para o container da tela de regras */
    text-align: left;
     /* Fundo levemente cinza para diferenciar */
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px;
    
    /* A mágica do scroll interno para não poluir a tela */
    max-height: 40vh; /* Altura máxima de 50% da tela */
    overflow-y: auto; /* Adiciona scroll vertical APENAS se necessário */
}

#regras-view h2 {
    text-align: center;
    margin-top: 0;
    color: #0056b3;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

#regras-view p {
    font-size: 0.9em;
    line-height: 1.6;
}

#regras-view ul {
    list-style: disc;
    padding-left: 20px;
    margin-top: 15px;
}

#regras-view li {
    margin-bottom: 10px;
}
.button-container{
  gap: 8px;
}
#confirmar-pagamento-btn{
  background-color: #28a745;;
  
    width: 80%;
    height: 40px;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.443) 0px 0px 10px;
    margin: 10px;
    border-radius: 5px;
    border-width: 0px;
    font-size: 15px;
    border-style: solid;
    border-color: black;
    border-image: initial;
}
#ler-regras-btn{
   background-color: #0056b3;
    width: 80%;
    height: 40px;
    font-size: 15px;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.443) 0px 0px 10px;
    margin: 10px;
    border-radius: 5px;
    border-width: 0px;
    border-style: solid;
    border-color: black;
    border-image: initial;
}


  .obs {
    font-family: Arial, Helvetica, sans-serif;
    color: #0a0a0a;
    text-align: center;
    font-size: 14px;
  }

  .logo {
    font-size: 5vw;
    font-family: "Platypi", serif;
    
  
  }
  iframe {
    width: 100%; /* Garante que o iframe nunca seja maior que seu container */
    max-width: 100%; /* Segurança extra */
    border: none; /* Remove a borda padrão */
}
 #payment-brick-container {
        max-height: 50vh; /* Menor altura no mobile */
        padding: 10px;
        margin: 10px 0;
    }
    
    #paymentBrick_container img {
        max-width: 200px !important;
    }
    
    #paymentBrick_container p {
        font-size: 0.8em;
        padding: 8px;
    }
    
    #paymentBrick_container button {
        padding: 6px 12px;
        font-size: 0.8em;
    }
    
    .payment-brick-active {
        max-height: 70vh !important;
        overflow-y: auto;
    }
    #card-form-container{
      max-height: 85vh; /* Menor altura no mobile */
      
       
        padding: 0%;
        margin: 0%;
    }
    .card-form-active {
     
    justify-content: center;
    
    overflow-x: hidden;
    
  }
  .button-container .whatsapp-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    background-color: #0056b3;
}
#pix-btn.whatsapp-button {
    background-color: #32BCAD; /* Verde do PIX */
}

#pix-btn.whatsapp-button:hover {
    background-color: #299B8F; /* Verde mais escuro do PIX */
}

#card-btn.whatsapp-button {
    background-color: #6c757d; /* Cinza para cartão */
}

#card-btn.whatsapp-button:hover {
    background-color: #5a6268; /* Cinza mais escuro */
}
  
}


@media (max-width: 600px) {
  .lgimg img{
    width: 80px;
    height: 90px;
    margin: 10px;
    
  }

  .flex-container {
    display: grid;
    
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 5px; /* Adiciona um respiro nas laterais */
    box-sizing: border-box;

  }



  .reserva {

    
    top: 50%;
    left: 50%;

    width: 300px;
    height: auto;
    font-family: "Platypi", serif;
    font-weight: bolder;
    
 
 
  
  }

  .flex-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 0;





  }

  .flex-item:nth-child(1) {
    /* Entrada */
    grid-column: 1 / 2;
    grid-row: 1 / 2;


  }

  .flex-item:nth-child(2) {
    /* Saída */
    grid-column: 2 / 3;
    grid-row: 1 / 2;

  }

  .flex-item:nth-child(3) {
    /* Adultos */
    grid-column: 1 / 2;
    grid-row: 2 / 3;

  }

  .flex-item:nth-child(4) {
    /* Crianças */
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .flex-item:nth-child(5) {
    /* Botão */
    grid-column: 1 / 3;
    grid-row: 3 / 4;
  }

  .flex-item label {
   
    background-color: #ffffffec;
    color: #000;
    
    width: 98%;
    border: 1px solid rgb(243, 240, 240);
    
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  #btn {
    height: 40px;
    background-color: #025959;
    width: 100%;
    font-size: 16px;
    border-radius: 5px;
    border: #000000;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.082);
  }



  #data_reserva input {
    width: 98%;
    height: 60px;

    text-align: center;
    
    margin-top: 0px;
    color: rgb(248, 248, 248);
    font-weight: bolder;
    font-size: 17px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    /*border: 1px solid rgba(0, 0, 255, 0);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.521);*/
  }

  






  #data_saida {

    width: 98%;
    height: 60px;
    text-align: center;
    margin-top: 0px;
    /*background-color: #0000002c;
    
    color: rgb(255, 13, 13);
    font-weight: bolder;*/
    color: #000;
    background-color: #ffffffec;
    font-size: 16px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    /*border: 1px solid rgba(0, 0, 255, 0);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.521);*/

  }

  input::placeholder {
    font-family: 'Arial', sans-serif;

    font-style: italic;
    font-size: 11px;
    color: #000000;
  
    opacity: 1;
    
  }

  input:focus::placeholder {
    color: #000000;
    
    font-weight: bold;
    
  }

  #data_reserva {
    width: 98%;
    height: 60px;
    text-align: center;
    margin-top: 0px;
    /*color: rgb(255, 13, 13);
    background-color: #0000002c;*/
    color: #000;
    background-color: #ffffffec;
    /*font-weight: bolder;*/
    
    font-size: 16px;
    /*box-shadow: 0 0 10px rgb(0, 0, 0);
    border: 1px solid rgba(0, 0, 255, 0);*/
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }




  #adultos {
    width: 98%;
    margin-top: 0px;
    /*background-color: #0000002c;
    color: rgb(255, 13, 13);
    font-weight: bolder;*/
    color: #000;
    background-color: #ffffffec;
    
    font-size: 17px;
    text-align: center;
    /*border: 1px solid rgba(0, 0, 255, 0);
    box-shadow: 0 0 10px rgb(0, 0, 0);*/
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  #criancas {
    width: 98%;
    margin-top: 0px;
   /* background-color: #0000002c;
    color: rgb(255, 13, 13);
    font-weight: bolder;*/
    color: #000;
    background-color: #ffffffec;
    font-size: 17px;
    text-align: center;
    /*border: 1px solid rgba(0, 0, 255, 0);
    box-shadow: 0 0 10px rgb(0, 0, 0);*/
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .flatpickr-day{
    color: red;
    background-color: red;
    
  }



}




@media (max-width: 600px) {
  #container {
    height: auto;
    display: flex;
    flex-direction: column;
    margin: 0px;
    padding: 0px;
    padding: 15px; /* Adiciona um espaçamento nas laterais e entre as seções */
    box-sizing: border-box;

  }

  .imgrd {
    display: none;
  }
  

  .imgpq {
    display: block;
  }


  .item {
    align-items: center;
    height: auto;

    display: flex;

    
    min-width: 250px;
    
    height: auto;
    box-sizing: border-box;

  }

  #barra {
    width: 100vw;
    height: auto;
    background-color: #fff;


  }
  #barrameio{
    width: 100%;
    height: 10px;
    
  }

  #mais {
    width: 100%;
    height: 40px;
    box-shadow: 0px 0px 5px black;
    background-color: #025959;
    border: #000;
    

  }
  #mais:hover{
    background-color: gray;
  }

  .txt {
    text-align: cener;
    justify-content: space-between;
    flex: 1;
    padding: 10px;
    /* Espaçamento interno */
  }



  .txt p {
    padding-bottom: 10px;
    text-align: ju;
    font-size: 0.8em;
  }

  .txt h2 {
    padding-bottom: 10px;
    color: #23260F;
    font-size: 20px;

  }



  .img {
    flex: 1 1 50%;

    

  }



  .img img {
    width: 100%;
    height: 250px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgb(0, 0, 0);
  }

  #im2 {
    flex: 1;
    padding: 0%;
    box-sizing: border-box;
    max-width: 100vw;

  }

  #im1 {
    flex: 1;

    max-width: 50vw;
  }

  #item2 {
    align-items: center;
    height: auto;

    display: flex;
    flex: 8 20 10%;
    /* Ajusta a largura dos itens, mantendo espaço entre eles */
    min-width: 250px;
    /* Largura mínima para cada item */
    height: auto;
    box-sizing: border-box;
  }
  #mais a{
    color: white;
  }
  


}

@media (min-width: 600px) {
  .lgimg img{
    width: 80px;
    height: 90px;
    margin: 10px;
  }
  #rs {
    font-size: 5em;
    padding-top: 50px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 300;
    color: #4C591E;
  }

  #mais {
    width: 50%;
    height: 60px;
    box-shadow: 0px 0px 5px black;
    background-color: #025959;
    border: #000;
    margin-top: 50px;
    color: white;
    font-size: 20px;

  }
  #mais:hover{
  
      background-color: gray;
    
  }
  #mais a{
    color: white;
  }
  

  /*.img img {
    width: 100%;
    
    height: 500px;
    display: block;

    
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.623);


  }*/
 .img {
    flex: 1;
    height: 600px; /* Altura fixa do container */
    overflow: hidden;
    border-radius: 5px;
} 

 .img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ← MÁGICA! Preenche sem distorcer */
    object-position: center;
    display: block;
    border-radius: 5px;

     
}

  .txt,
  p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    justify-content: space-between;
    text-align: center;
    margin: auto;
    font-size: 20px;
  }
  .modal-content.modal-reserva {
  width: 900px;
  margin-top: 15vh;
  text-align: left;
}
  #pix-btn{
    background-color:  #0056b3;
width: 138px;
    height: 40px;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.443) 0px 0px 10px;
    margin: 10px;
    border-radius: 5px;
    border-width: 0px;
    border-style: solid;
    border-color: black;
    border-image: initial;
    
}
#pix-btn:hover{
  background-color:#0057b38a;
}
#card-btn{
  background-color:  #0056b3;

    width: 138px;
    height: 40px;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.443) 0px 0px 10px;
    margin: 10px;
    border-radius: 5px;
    border-width: 0px;
    border-style: solid;
    border-color: black;
    border-image: initial;
    text-align: center;
    
}
#pix:hover{
  background-color: rgb(153, 71, 71);
}
#card-btn:hover{
  background-color:#0057b38a;
}
#confirmar {
  /*background-color: red;
  width: 138px;
  height: 40px;
  padding: 3px;
  border-radius: 5px;
  color: white;
  border: 0px solid black;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.445);*/

   background-color: #25D366;
  width: 138px;
    height: 40px;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.443) 0px 0px 10px;
    margin: 10px;
    border-radius: 5px;
    border-width: 0px;
    border-style: solid;
    border-color: black;
   border-image: initial;
   text-align: center;

}
#confirmar:hover{
  background-color: rgb(78, 131, 81);
}
#pix-btn.whatsapp-button {
    background-color: #32BCAD; /* Verde do PIX */
}

#pix-btn.whatsapp-button:hover {
    background-color: #299B8F; /* Verde mais escuro do PIX */
}

#card-btn.whatsapp-button {
    background-color: #6c757d; /* Cinza para cartão */
}

#card-btn.whatsapp-button:hover {
    background-color: #5a6268; /* Cinza mais escuro */
}


iframe {
    width: 100%; /* Garante que o iframe nunca seja maior que seu container */
    max-width: 100%; /* Segurança extra */
    border: none; /* Remove a borda padrão */
}
  
    
 

}


.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  
  width: 100vw;
  background-color: #fff;
}

.item {
  display: flex;
  flex: 1 1 50%;
  
  min-width: 250px;
  /* Largura mínima para cada item */
  box-sizing: border-box;
}

.img {
  flex: 1;
  max-width: 100%;

}



.txt {
  text-align: center;
  justify-content: space-between;
  flex: 1;
  padding: 10px;
  
}

#im1 {
  margin: 10px;


}

#im2 {
  margin: 10px;
  

}


.barra {
  width: 100vw;
  height: 10vh;
  background-color: #fff;


}



footer {
  width: 100vw;
  height: auto;
  padding: 10px;
  text-align: justify;
  box-sizing: border-box;
background-color: #fff;
  text-align: center;
  padding: 20px;



}

.footer-content {
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  padding: 15px;

}

.footer-menu a {

  display: block;
  margin: 15px;
  color: black;
  text-decoration: none;
}

.footer-menu a:hover {
  text-decoration: underline;
}

.social-icons {
  text-align: center;
}

.social-icons a {

  margin: 0 10px;
}

.social-icons img {
  padding-bottom: 10px;
  width: 20px;
  height: auto;
  justify-content: center;
}

.hotel-name,
.tagline {
  margin: 5px 0;
}

.hotel-name {
  font-size: 20px;
  color: #23260F;
  font-weight: bolder;
  text-align: justify;
  padding-top: 0%;
}

.tagline {
  font-size: 20px;
  text-align: center;
  padding: 0%;
}

#paralax {
  background-image: url('https://res.cloudinary.com/dr8z9s6cb/image/upload/f_auto,q_auto/v1726535160/lg01_humipy.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: auto;


  
}

.efeito {
  width: 100vw;
  height: 100%;
  
  text-align: center;
  display: block;
  /*margin: 0 auto;*/


}


.servico .icone {
  width: 100px;
  /* Ajuste conforme necessário */
  height: auto;
  background-color: #fff;
  font-weight: bolder;
  margin-bottom: 10px;
  

}

.efeito h2 {
  font-size: 80px;
  font-weight: bolder;
  padding-top: 100px;
  margin-bottom: 80px;
  text-align: center;
  align-items: center;
  color: antiquewhite;
  text-shadow: 5px 0px 10px rgb(36, 35, 35);

}
 #bt2{
  background-color: #025959;
  padding: 15px;
  width: 200px;
  height: 60px;
  font-size: 20px;
  color: white;
  box-shadow: 0px 0px 20px black;
  
}
#bt2 a{
color: white;
}
#bt2:hover{
  background-color: gray;
}





@media (max-width: 600px) {

  /*#paralax {
    height: 80vh;
    background-image: url('https://res.cloudinary.com/dr8z9s6cb/image/upload/v1726534936/IMG-20230804-WA0029_rw7lrr.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .efeito {
    width: 100vw;
    height: 100%;
    text-align: center;
    display: block;


    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);


   

    text-align: center;
    

  }

  .efeito h2 {
    font-size: 60px;
    font-weight: bolder;
    padding-top: 25%;
    margin-bottom: 20%;
    text-align: center;
    align-items: center;
    color: white;
    text-shadow: 5px 0px 10px rgb(36, 35, 35);
   
  }
  #bt2{
    background-color: #25D366;
    
    width: 150px;
    height: 50px;
    font-size: 20px;
    color: white;
    box-shadow: 0px 0px 20px black;
    
  }
  #bt2:hover{
    background-color: gray;
  }*/
/*#paralax {
    height: 80vh;
    background-image: url('https://res.cloudinary.com/dr8z9s6cb/image/upload/v1726534936/IMG-20230804-WA0029_rw7lrr.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    
    display: flex;
    justify-content: center; 
    align-items: center;     
}*/

/*.efeito {
    /* Removemos a lógica de posicionamento antiga (top, left, transform) */
    /*width: 100%; /* Ocupa 100% do pai (#paralax), sem estourar */
    /*text-align: center;
    
    /* Adicionamos um respiro nas laterais para o texto não colar nas bordas */
    /*padding: 0 20px; 
    box-sizing: border-box; /* Garante que o padding não aumente a largura */
/*}*/

.efeito h2 {
    color: white;
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.7); /* Sombra mais suave */
    
    /* --- A MÁGICA DA FONTE RESPONSIVA --- */
    font-size: 15vw; /* A fonte agora se ajusta à largura da tela */
    line-height: 1.1; /* Melhora a legibilidade se o texto quebrar em duas linhas */
    margin-bottom: 40px; /* Espaçamento ajustado */
    font-weight: bolder;

    /* Segurança extra para evitar quebras */
    word-wrap: break-word; 
}
#paralax {
  background-image: url('https://res.cloudinary.com/dr8z9s6cb/image/upload/f_auto,q_auto/v1726535160/lg01_humipy.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: auto;
  min-height: 100vh;
    /* Melhora a performance do parallax em celulares */
    background-attachment: scroll; 


}

.efeito {
  width: 100vw;
  height: auto;
  
  text-align: center;
  display: block;
  /*margin: 0 auto;*/


}
.carrossel-controles{
  padding: 20px;
}


#bt2 {
    width: 180px; /* Tamanho um pouco maior para facilitar o toque */
    height: 50px;
    font-size: 18px; /* Fonte um pouco menor para caber bem */
    background-color: #025959;
    color: white;
    box-shadow: 0px 0px 20px black;
}

#bt2:hover{
    background-color: gray;
}
  .servico {
    margin-bottom: 15px;
    
  }



 

  footer {
    width: 100vw;
    height: auto;
    padding: 20px 10px;
    background-color: #fff;
    text-align: justify;
    /* box-sizing: border-box;*/


  }

  .footer-content {
    max-width: 100%;

    margin: 0 auto;
    padding: 0;
    /*padding-bottom: 25px;*/
    display: block;



  }

  .footer-menu {
    margin-top: 10px;
    margin-left: 15px;



  }

  .footer-menu a {
    display: block;
    margin: 20px 0;
    color: #333;
    text-decoration: none;
  }

  .footer-menu a:hover {
    text-decoration: underline;
  }

  .social-icons {
    margin-top: 15px;
    height: 30px;
    /*ta mostando os icnones*/
    text-align: justify;

  }

  .social-icons a {
    margin: 0 15px;
    display: inline-block;
  }

  .social-icons img {
    width: 25px;
    height: 25px;


  }

  .hotel-name {
    font-size: 24px;
    font-weight: bold;


  }

  #hotel-name {
    text-align: center;
    font-style: italic;
    color: #4C591E;
  }

  .tagline {
    font-size: 18px;
    margin-top: 5px;
    margin-left: 15px;
    text-align: justify;
    color: #4C591E;
  }
  footer{
    background-color: #fff;
  }
  

}







@media (min-width: 600px) {
  footer{
    background-color: #F2F2F2;
  }
  .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
  }

  /*.footer-menu, .social-icons {
      
  }*/

  .footer-menu {
    text-align: justify;

  }

  .footer-menu a {


    text-decoration: none;
    color: black;
  }

  .social-icons {
    text-align: right;
  }

  #hotel-name {
    font-size: 40px;
    color: #4C591E;
    

  }
  .tagline{
    color: #99A63C;
  }

 
  .servico {
    display: inline-block;
    width: 30%;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}
  

}
.pika-button.pika-day {
  background-color: #25D366;
  
  
  
  
}


.is-today .pika-button {
  color: #1a659b;
  font-weight: bold;
}






@media (max-width: 600px) {


  .pika-single .is-selected {

    color: #aa1c1c;
  }

  .pika-label {
    font-size: 12px;
    background-color: #25D366;
  }

  .pika-prev,
  .pika-next {
    font-size: 10px;

  }

  .pika-button.pika-day {
    padding: 2px;
    font-size: 14px;
    text-align: center;
    background-color: rgb(100, 216, 105);

  }
 
  
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  justify-content: center;

}

.gallery-item {
  flex-basis: 30%;
  margin-bottom: 10px;
  cursor: pointer;

  
    margin-bottom: 10px;
    cursor: pointer;

}

.gallery-item h3 {
  text-align: center;
  font-weight: 100;
  font-style: italic;

}

.gallery-item img {
  width: 100%;

  height: 500px;
  border-radius: 50px;
  object-fit: cover; /* Mantém a proporção sem distorcer */
    transition: transform 0.3s ease;
  


}
 /*.gallery-item img {
    width: 100px;

    height: 100px;
    border-radius: 50px;


  }

  .gallery-item {
    

  }*/

.GL {
  /*display: none;
  position: fixed;
  z-index: 1;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);*/
   display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    padding-top: 0; /* Remove padding antigo */
}

.GL-CT {
 /* display: block;
  margin: auto;
  width: 500px;
  height: 80vh;*/

  max-width: 90%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    margin: auto; /* Garante centralização adicional */
    display: block;

   
}

.cl {
  /*position: fixed;
  top: 70px;
  right: 450px;
  position: absolute;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1000;*/
   position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    background-color: rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.prev,
.next {
  /*cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: rgb(255, 255, 255);
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;*/

  cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 20px;
    color: white;
    font-weight: bold;
    font-size: 24px;
    transition: 0.3s;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}

.next {
  right: 20px;
  border-radius: 3px 0 0 3px;
}

.caption {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 18px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
}


#ft p {
  text-align: center;
  padding-top: 10px;
  font-size: 40px;


}

.sobre {
  width: 100vw;
  height: 60vh;
  background-color: #64732fe7;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.514);

}

.sb {
  width: 90vw;
  height: auto;
  display: flex;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  /* Certifica-se de que o conteúdo seja disposto em coluna */
  justify-content: flex-start;

}

.sb p {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: auto;
  padding-top: 0;
  color: black;
}

.sb h3 {
  font-style: italic;
  margin: 15px;
  text-align: center;
  color: black;
  font-size: 40px;
  font-weight: 100;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
}



@media (max-width: 600px) {
  #ft {
    width: 100vw;
    height: auto;
    


  }

  #ft p {
    text-align: center;
    
    font-size: 25px;
    margin-top: 10%;

  }

  .sobre {
    width: 100vw;
    height: 50vh;
    background-color: #64732fe7;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.514);

  }

  .sb {
    width: 90vw;
    height: auto;
    display: flex;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    /* Certifica-se de que o conteúdo seja disposto em coluna */
    justify-content: flex-start;

  }

  .sb p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  .sb h3 {
    font-style: italic;
    margin: 15px;
    text-align: center;
    font-weight: 100;
    font-size: 25px;

  }

  .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    

  }

  .gallery-item {
    flex-basis: 48%;
    margin-bottom: 10px;
    cursor: pointer;

  }

  .gallery-item h3 {
    text-align: center;
    font-weight: 100;
    font-style: italic;
  }

  .GL {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
  }

  .GL-CT {
    display: block;
    margin: auto;
    max-width: 80%;
    height: auto;
    padding-top: 50px;
    z-index: 10;
  }

  .cl {
    position: fixed;
    top: 100px;
    right: 40px;

    color: white;
    font-size: 40px;
    font-weight: bolder;
    cursor: pointer;


  }

  .gallery-item img {
    height: 250px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.534);
    
  }.modalImage{
    height: 10px;

  }

  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }

  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
.info-container h1 {
    text-align: center;
    margin-top: 30px;
    color: #333;
}


}
/* CSS PARA A ANIMAÇÃO DE SUCESSO */
#success-animation {
  display: none; /* Começa escondido */
  margin: 20px auto;
}

.checkmark {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
  stroke-width: 4;
  stroke: #4CAF50; /* Cor do check verde */
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #4CAF50;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
  position: relative;
  margin: 0 auto;
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 4;
  stroke-miterlimit: 10;
  stroke: #4CAF50;
  fill: #fff;
  animation: stroke .6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke .3s cubic-bezier(0.65, 0, 0.45, 1) .8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0
  }
}

@keyframes scale {
  0%, 100% {
    transform: none
  }
  50% {
    transform: scale3d(1.1, 1.1, 1)
  }
}

@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 60px #4CAF50;
  }
}

/* =================================
   ESTILOS PARA A PÁGINA DE INFORMAÇÕES
   ================================= */
.info-container {
    max-width: 800px;
    margin: 40px auto; /* Centraliza o container */
    padding: 30px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    line-height: 1.6;
}

.info-container h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.info-container h2 {
    color: #0056b3;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    margin-top: 30px;
    margin-bottom: 20px;
}

.info-container section {
    margin-bottom: 30px;
}

.info-container ul {
    list-style: none; /* Remove os pontos padrão */
    padding-left: 0;
}

.info-container ul li {
    background-color: #f8f9fa;
    padding: 15px 15px 15px 50px; /* Aumenta o padding esquerdo para o ícone */
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #eee;
    position: relative; /* Necessário para posicionar o ícone */
    list-style: none; /* Garante que os pontos padrão não apareçam */
}

/* Nova regra para adicionar o ícone */
.info-container ul li::before {
    content: '✔'; /* Você pode trocar por outros ícones, como '✓', '•', '→' */
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #28a745; /* Cor verde para o ícone */
    font-size: 1.5em;
    font-weight: bold;
}
/* =================================
   ESTILO PARA O BOTÃO FLUTUANTE DO WHATSAPP
   ================================= */
.whatsapp-float {
    position: fixed;         /* Fixa o botão na tela */
    width: 60px;             /* Largura do botão */
    height: 60px;            /* Altura do botão */
    bottom: 20px;            /* Distância do fundo da tela */
    right: 20px;             /* Distância da direita da tela */
    background-color: #25D366; /* Cor verde do WhatsApp */
    color: #FFF;
    border-radius: 50px;     /* Deixa o botão redondo */
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25); /* Sombra suave */
    z-index: 1000;           /* Garante que ele fique acima de outros elementos */
    
    /* Centraliza o ícone dentro do círculo */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Efeito suave ao passar o mouse */
    transition: transform 0.2s ease-in-out;
}

.whatsapp-float:hover {
    transform: scale(1.1); /* Aumenta um pouco o tamanho ao passar o mouse */
}
/* =================================
   CORREÇÃO DE RESPONSIVIDADE DO MAPA
   ================================= */


/* =================================
   ANIMAÇÃO DE SCROLL REVEAL
   ================================= */
.fade-in-element {
  opacity: 0; /* Começa invisível */
  transform: translateY(20px); /* Começa 20px para baixo */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Define a suavidade da transição */
}

/* Classe que será adicionada pelo JavaScript quando o elemento estiver visível */
.fade-in-element.is-visible {
  opacity: 1; /* Torna-se totalmente visível */
  transform: translateY(0); /* Volta para sua posição original */
}
/* =================================
   ESTILO PARA O CARROSSEL DE DEPOIMENTOS
   ================================= */
/* =================================
   ESTILO PARA O CARROSSEL DE DEPOIMENTOS (SWIPER)
   ================================= */
.testimonial-section {
    padding: 50px 0; /* Ajustado para dar espaço ao overflow */
    background-color: #f8f9fa;
    text-align: center;
}

.testimonial-title {
    font-size: 2.5em;
    margin-bottom: 40px;
    color: #333;
}

.testimonial-swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 320px; /* Largura do card central */
    height: auto;
}

/*.testimonial-card {
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 30px;
    height: 100%;
    box-sizing: border-box;
}

.testimonial-text {
    font-style: italic;
    font-size: 1.1em;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

.testimonial-author {
    font-weight: bold;
    color: #0056b3;
    font-size: 1em;
}*/
/* =================================
   ESTILO ATUALIZADO PARA OS CARDS DE DEPOIMENTO
   ================================= */

.testimonial-card {
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 30px 30px 20px 30px; /* Ajuste no padding */
    height: 100%;
    box-sizing: border-box;
    position: relative; /* Necessário para o ícone de aspas */
    text-align: left; /* Alinha o texto à esquerda para melhor leitura */
}

/* A MÁGICA DAS ASPAS GIGANTES */
.testimonial-card::before {
    content: '“'; /* Adiciona o caractere de aspas */
    position: absolute;
    top: -10px;
    left: 15px;
    font-size: 80px;
    color: #007bff; /* Cor azul, para combinar com as setas */
    opacity: 0.1;
    line-height: 1;
    z-index: 1;
}

/* NOVO: Estilo para as estrelas */
.testimonial-rating {
    color: #ffc107; /* Cor de estrela (amarelo/dourado) */
    font-size: 1.2em;
    margin-bottom: 15px;
}

.testimonial-text {
    font-style: italic;
    font-size: 1.1em;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
    position: relative; /* Garante que o texto fique acima das aspas */
    z-index: 2;
}

.testimonial-author {
    font-weight: bold;
    color: #333; /* Cor mais sóbria */
    font-size: 1em;
    text-align: right;
}

/* NOVO: Estilo para a fonte (Google, WhatsApp, etc.) */
.testimonial-source {
    font-size: 0.8em;
    color: #888;
    text-align: right;
    margin-top: 4px;
}
/* Estilo para as setas de navegação */
.swiper-button-next,
.swiper-button-prev {
    color: #007bff; /* Cor das setas */
}

/* Estilo para a paginação (bolinhas) */
.swiper-pagination-bullet-active {
    background: #007bff; /* Cor da bolinha ativa */
}
/* =================================
   ESTILO PARA DIAS INDISPONÍVEIS (PASSADOS OU MUITO PRÓXIMOS)
   ================================= */
.flatpickr-day.data-indisponivel {
    background-color: #f0f0f0 !important; /* Cor de fundo cinza claro */
    color: #b0b0b0 !important;           /* Cor do texto cinza */
    cursor: not-allowed !important;      /* Cursor de bloqueado */
    border-color: transparent !important;
}

/* Garante que o estilo permaneça mesmo ao passar o mouse */
.flatpickr-day.data-indisponivel:hover {
    background-color: #f0f0f0 !important;
    color: #b0b0b0 !important;
}
/*@media (max-width: 900px) {
  .reserva {
    width: 90%; 
  }
}*/
/* Efeito de "levantar" para os cards da galeria */
.gallery-item img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover img {
    transform: translateY(-5px); /* Move 5px para cima */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Aumenta a sombra */
}

/* Efeito de "levantar" para os botões principais */
#btn, #pix, #confirmar, #bt2 a {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#btn:hover, #pix:hover, #confirmar:hover, #bt2:hover a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* ================================================================= */
/* ============= CSS PRECISO PARA O CARD COM IMAGEM ============= */
/* ================================================================= */

/* ----- LAYOUT PARA TELAS GRANDES (Desktop a partir de 601px) ----- */
@media (min-width: 601px) {
    /* 1. Transforma o card principal em um container flex */
    .promocao-card-com-imagem {
        display: flex;
        flex-direction: row; /* Alinha as colunas lado a lado */
        padding: 0; /* Remove o padding interno para a imagem colar na borda */
    }

    /* 2. Estiliza a coluna de texto */
    .promocao-coluna-texto {
        flex: 1.5; /* Faz a coluna de texto ser um pouco maior que a da imagem */
        padding: 15px; /* Adiciona o padding que foi removido do card */
        display: flex;
        flex-direction: column;
    }

    /* Empurra o rodapé para baixo */
    .promocao-coluna-texto .promocao-content {
        flex-grow: 1;
    }

    /* 3. Estiliza a coluna da imagem */
    .promocao-coluna-imagem {
        flex: 1; /* Define o espaço que a coluna da imagem vai ocupar */
    }
    
    .promocao-coluna-imagem img {
        width: 470px;
        height: 450px; /* A MÁGICA: A imagem ocupa 100% da altura da coluna */
        object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
        border-top-right-radius: 10px; /* Arredonda os cantos corretos */
        border-bottom-right-radius: 10px;
        
      
    }
    .promocao-coluna-texto .promocao-content li {
        padding-top: 6px;    /* Era 8px */
        padding-bottom: 6px; /* Era 8px */
    }
    .promocao-coluna-texto .promocao-header {
        margin-bottom: 15px; /* Era 20px, reduzimos um pouco */
    }
}


/* ----- LAYOUT PARA TELAS PEQUENAS (Mobile até 600px) ----- */
@media (max-width: 600px) {
    /* 1. Transforma o card em um container flex com direção de coluna */
    .promocao-card-com-imagem {
        display: flex;
        
        flex-direction: column; /* Essencial para empilhar os itens */
    }

    /* 2. Define a IMAGEM para aparecer PRIMEIRO */
    .promocao-coluna-imagem {
        order: 1; /* Itens com 'order' menor aparecem primeiro */
        
        
       
    }
    
    /* 3. Define o TEXTO para aparecer DEPOIS */
    .promocao-coluna-texto {
        order: 2; /* Itens com 'order' maior aparecem depois */
        padding: 10px;
    }

    /* 4. Estilos da imagem para o mobile */
    .promocao-coluna-imagem img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        padding-right: 20px;
        border-radius: 10px 10px 0 0;
    }
}