.gle-container {
    width: 100%;
    margin: 0 auto;
}
.gle-layout {
    display: flex;
    width: 100%;
    height: 600px;
    margin: 10px 0;
    gap: 10px;
    justify-content: space-between;
    align-items: stretch;
}
.gle-layout .grande {
    width: 50%;
    height: 100%;
    overflow: hidden;
}
.gle-layout .pequenas {
    width: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    height: 100%;
}
.gle-layout .grande img,
.gle-layout .pequenas img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
    cursor: pointer;
}
.gle-layout.inverso {
    flex-direction: row-reverse;
}
.ver-mais {
    position: relative;
    cursor: pointer;
}
.overlay-text {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
}
.btn-fechar {
    font-size: 16px;
    font-weight: bold;
    color: #644325;
    cursor: pointer;
    display: none;
    margin: 10px 20px 30px auto;
    width: fit-content;
}
.btn-fechar.visible { display: block; }
.hidden { display: none; }

.gle-lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
}
.gle-lightbox.active, .gle-lightbox:not(.hidden) {
    display: flex;
}
.gle-close {
    position: absolute;
    top: 40px;
    right: 30px;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    z-index: 9999;
}

.swiper {
    width: 100vw;
    max-width: 900px;
    height: 100vh;
    border-radius: 10px;
    overflow: hidden;
}
/* --- Ajustes nos Slides do Swiper (o contêiner da imagem) --- */
.swiper-slide {
    display: flex;             /* Usa Flexbox para fácil centralização */
    justify-content: center;   /* Centraliza a imagem horizontalmente dentro do slide */
    align-items: center;       /* Centraliza a imagem verticalmente dentro do slide */
    width: 100%;               /* O slide ocupa 100% da largura do Swiper */
    height: 100%;              /* O slide ocupa 100% da altura do Swiper */
    overflow: hidden;          /* Garante que o conteúdo do slide não vaze, se por algum motivo a imagem for maior */
}


/* Estilo setas */
.swiper-button-next, .swiper-button-prev {
    color: #fff!important;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    
    
    z-index: 10;
}

.swiper-button-next { right: -50px; }
.swiper-button-prev { left: -50px; }
.swiper-pagination-bullet {
    background: #D3D3D3!important;
}
@media (max-width: 768px) {
    .gle-layout {
        flex-direction: column;
        height: auto;
    }
    .gle-layout .grande,
    .gle-layout .pequenas {
        width: 100%;
        height: auto;
    }
    .swiper-button-next, .swiper-button-prev {
        right: 10px;
        left: 10px;
    }
    
    .gle-close {
    position: absolute;
    top: 0;
    }
   .swiper-slide img {
    width: 100%;        
    height: 100%;       
    object-fit: contain; 
    margin-top: 0;      
    margin-bottom: 0;   
    display: block;     
}
}

/* css dos botoes verdes*/
.bloco-botoes-verdes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 800px;
}

.botao-verde,
.botao-whatsapp {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: normal;
  color: #fff!important;
  font-family: 'pop', sans-serif;
  text-decoration: none;
  background-color: #06929D;
}

.botao-whatsapp {
  background-color: #996600;
}

.icone {
  height: 15px;
  margin-right: 5px;
  vertical-align: middle;
}
.botao-whatsapp .icone {
  height: 25px; 
}
@media (max-width: 1024px) {
  .bloco-botoes-verdes {
    justify-content: center; /* centraliza os botões na linha */
  }
  .botao-verde,
  .botao-whatsapp {
    width: auto;            
    display: inline-flex;   
    margin:  auto;
    
  }
}
