/* ==================== Layout Geral ==================== */

.imagens-itens .imagem img{
  height: 150px;
}

.imagem-principal {
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.imagem-principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.container-geral {
    max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}


/* ==================== Seção 2: Layout e Imagens ==================== */

.section-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 100px;
}

/* Estado inicial: imagem pequena e invisível */
.hidden {
  opacity: 0;
  transform: scale(0.8);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Estado final: imagem em tamanho normal e visível */
.animate {
  opacity: 1;
  transform: scale(1);
}


.section-2 img {
  border-radius: 10px;
}

.section2-imagens {
  display: flex;
  padding: 30px;
}

.section2-imagens .container1,
.section2-imagens .container3 {
  height: 405px;
}

.section2-imagens .container1 img,
.section2-imagens .container3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section2-imagens .container2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 405px;
}

.section2-imagens .container2 #itens-incial {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.section2-imagens .container2 #itens-incial img {
  width: 49%;
  height: 220px;
  object-fit: cover;
}

.section2-imagens .container2 > img:last-child {
  width: 100%;
  height: 170px;
  object-fit: cover;
}




/* ==================== Seção de Imagens Centrais ==================== */



[data-zoom] {
  opacity: 0;
  transform: scale(0.8);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

[data-zoom].animate {
  opacity: 1;
  transform: scale(1);
}



#imagens-itens {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

#imagens-itens img {
  border-radius: 20px;
  width: 100%;
  height: 100%;
  object-fit: cover; /* mantém proporção sem distorcer */
  display: block;
}

/* laterais */
.imagem {
  flex: 0 0 350px;
  height: 350px;
  overflow: hidden;
}

/* central em destaque */
.imagem-centro {
  flex: 0 0 450px;
  height: 400px;
  overflow: hidden;
}



/* ==================== Responsividade ==================== */

@media (max-width: 1200px) {
  .produtos .item {
    width: calc(33.333% - 20px);
  }
}

@media (max-width: 900px) {
  .produtos .item {
    width: calc(50% - 15px);
  }

  .imagem {
    width: 300px;
    height: 250px;
  }

  .imagem-centro {
    width: 380px;
    height: 330px;
  }
}

@media (max-width: 600px) {
  .produtos .item {
    width: 100%;
    max-width: 400px;
  }

    .imagem-principal img {
    object-position: left center; /* joga a imagem para a direita */
  }

  .produtos {
    padding: 25px;
    justify-content: center !important;
  }

  #imagens-itens {
    flex-direction: column;
    align-items: center;
  }

  .imagem,
  .imagem-centro {
    width: 100%;
    height: auto;
  }
}


/* ==================== Área Lead ==================== */

.lead {
  margin-top: 150px;
  padding: 50px;
  width: 100%;
  min-height: 300px;
  height: auto;
  background-color: black;
  color: white;
}

.lead .info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-style: italic;
}

.info p {
  font-size: 14px;
  font-weight: 400;
}

.info input {
  margin-top: 20px;
  width: 50%;
}


/* ==================== Instagram ==================== */

.instagram {
  margin-top: 150px;
  gap: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.instagram .button-ver {
  width: 150px;
}