/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Cor de fundo suave */
body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

/* Cada seção com espaçamento entre as imagens */
section {
  width: 100%;
  display: block;
  margin-bottom: 1px;
}

/* Imagens normais da landing */
section img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

section img:hover {
  transform: scale(1.00);
}

/* Seção do carrossel */
.carrossel-section {
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.carrossel-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.carrossel-section img,
.thumb,
.principal {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Colunas laterais coladas nas bordas */
.coluna.esquerda,
.coluna.direita {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}

/* Imagens laterais grandes fixas */
.thumb {
  width: 400px;
  height: 400px;
  object-fit: cover;
  border: none;
  cursor: pointer;
  display: block;
}

/* Coluna do meio ocupa o restante da largura */
.coluna.centro {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Imagem principal grande e adaptável */
.principal {
  width: 100%;
  height: 1200px;
  object-fit: cover;
  border: none;
  display: block;
}

/* Responsividade para telas menores */
@media (max-width: 700px) {
  .carrossel-wrapper {
    flex-direction: column;
  }

  .coluna.esquerda,
  .coluna.direita {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .coluna.centro {
    order: -1; /* imagem principal fica em cima no mobile */
    margin-bottom: 10px;
  }

  .thumb {
    width: 100px;
    height: 100px;
  }

  .principal {
    width: 100%;
    height: auto;
    max-height: 400px;
  }
}

.cta-whatsapp {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1325 / 768;
  margin: 0 auto;
  background-image: url('../img/img02.png'); /* AJUSTE o caminho conforme necessário */
  background-size: cover;
  background-position: center;
}

/* Botão clicável sobre a área verde */
.botao-whatsapp {
  position: absolute;
  left: 28%;   /* ajuste conforme necessário */
  bottom: 10%; /* ajuste conforme necessário */
  width: 55%;  /* ajuste para cobrir o botão */
  height: 24%;
  display: block;
  z-index: 10;
  cursor: pointer;
}
.cta-img11 {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 830 / 768;
  margin: 0 auto;
  background-image: url('../img/img11.png'); /* ajuste o caminho conforme a estrutura */
  background-size: cover;
  background-position: center;
}

/* Botão sobre a imagem (ajuste fino da posição) */
.botao-img11 {
  position: absolute;
  bottom: 12%;     /* ajuste vertical */
  left: 22%;      /* ajuste horizontal */
  width: 56%;
  height: 22%;
  display: block;
  z-index: 10;
  cursor: pointer;
}

.quatro-imagens {
  background-color: #fff;
  padding: 60px 0;
  display: flex;
  justify-content: center;
}

.imagem-container {
  display: flex;
  justify-content: space-between;
  width: 80%; /* 80% = 4x20% + sobra de 10% de cada lado */
  margin: 0 auto; /* centraliza */
}

.imagem-container img {
  width: 25%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-right: 2px solid #fff;
  transition: transform 0.3s ease-in-out; /* animação suave */
}

/* Remove borda da última imagem */
.imagem-container img:last-child {
  border-right: none;
}

/* Efeito ao passar o mouse */
.imagem-container img:hover {
  transform: scale(1.10); /* aumenta 5% */
  z-index: 1;
}


.tres-imagens {
  background-color: #fff;
  padding: 1px 0;
  display: flex;
  justify-content: center;
}

.imagem-container.tres {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.imagem-container.tres img {
  width: 33.3333%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-right: 3px solid #fff;
}

/* Remove a borda da última imagem */
.imagem-container.tres img:last-child {
  border-right: none;
}