/* SEU CSS ATUALIZADO */

/* O container agora serve apenas como uma "caixa" de referência */
#Container-inicialHome {
  width: 100%;
  height: auto;
  padding: 7rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
  overflow: hidden; /* Importante para efeitos não vazarem */
}

/* Opcional: Overlay de blur/brilho que fica sobre as imagens */
#Container-inicialHome::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(3px) brightness(50%);
  z-index: -1; /* Fica entre o conteúdo e o fundo */
}

/* Estilo para as camadas de imagem */
.fundo-slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; 

  /* EFEITO DE FADE */
  opacity: 0; 
  transition: opacity 1s ease-in-out;

  z-index: -2;
}

/* Classe que o JavaScript vai usar para tornar uma imagem visível */
.fundo-slide.visivel {
  opacity: 1;
}

/* --- TEXTOS --- */
.textoChamtivo {
  width: 30rem;
  max-width: 3000px;
  height: auto;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;

  /* Adicionado para ficar acima do overlay */
  position: relative;
  z-index: 2;
  animation: slideInFromLeft 1s ease-out forwards;
}

.textoH1 {
  width: 100%;
  height: auto;
}

.textoH1 h1 {
  font-size: 3.7em;
  color: #ffffff; /* Branco puro para máximo contraste */
  font-weight: 700; /* Mais peso para o título principal */
  animation: revealTextUp 1.5s ease-out forwards;
}

.textoH1 p {
  font-size: 1.7em;
  color: #ffffff;
  font-weight: 300; /* Mais leve para hierarquia visual */
  animation: revealTextUp 1.5s ease-out forwards;
}

.textoH5 {
  width: 100%;
  height: auto;
  font-size: 1.2em;
  color: #e0c088;
  text-align: start;
  letter-spacing: 0.5px;
}

.textoH5 h1 {
  font-weight: 300;
  animation: revealTextUp 1.5s ease-out forwards;
}

/* --- BOTÃO MELHORADO --- */
.btn-vejaProdutos {
  display: inline-block;
  padding: 1rem 10rem;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  position: relative;
  overflow: hidden;
  margin: 1rem 1rem;

  /* GRADIENTE REFINADO: Cores mais ricas e harmônicas */
  background: linear-gradient(to right, #916c36, #c0a068);
  color: white;
  border: none; /* Remove a borda, o gradiente já define a forma */
  border-radius: 4px;
  cursor: pointer;

  /* SOMBRA NO BOTÃO: Dá profundidade e destaque */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease; /* Transição para todas as propriedades */
}

/* EFEITO DE HOVER SUAVE */
.btn-vejaProdutos:hover {
  /* No hover, o botão levanta e a sombra se expande */
  transform: translateY(-3px);
  box-shadow: 0 7px 25px rgba(145, 108, 54, 0.4);
}

/* Efeito de preenchimento do hover foi mantido, mas com as cores novas */
.btn-vejaProdutos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #c0a068, #916c36);
  transform: translateX(-100%);
  transition: transform 0.5s ease-in-out;
  z-index: -1;
}

.btn-vejaProdutos:hover::before {
  transform: translateX(0);
}

.btn-vejaProdutos:active {
  /* Efeito de clique mais pronunciado */
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}