* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
}

body {
    background-color: #F5F5DC


}

.interface {
  max-width: 1280px; /* Corrigido de rem para px */
  margin: 0 auto;
  padding: 0 4%;
}

header {
  width: 100%;
  position: fixed;
  z-index: 999999999999999;
  padding: 40px 0;
  background: transparent; /* Torna o menu transparente */
}

header .interface {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header .logotipo {
  color: #ddb575;
  font-size: 26px;
  font-weight: 600;
  
}

header nav.menu ul {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
}

nav.menu ul li a {
  color: #ddb575;
  text-decoration: none;
  
}

/*estilo do slider */

.slider {
  height: 100vh;
  position: relative;
  background: url('images/sua-imagem-parallax.jpg') center center / cover no-repeat fixed;
  /* Se quiser usar gradiente, pode trocar a url por um linear-gradient */
  will-change: background-position;
}

.slider .slider-container .slider-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.5s; /* Corrigido */
}

.slider .slider-box img {
  max-width: 100%;
  height: 900px;
  max-height: 90h; /* Limita a altura máxima da imagem */
  object-fit: contain; /* Garante que a imagem fique enquadrada */
  display: block;
  margin: 0 auto;
  background:#e5e0d5;Fundo para imagens menores */
}

.slider .slider-box::after {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #ffffff;, transparent); /* Corrigido */
  position: absolute;
  top: 0;
  left: 0;
}

.slider .slider-box .texto-slider {
  position: absolute;
  left: 10%;
  top: 35%;
  color: #fff;
  z-index: 1;
  width: 80%;
  max-width: 600px ;
}

.slider .slider-box .texto-slider h2 {
  font-size: 5rem;
}

@keyframes animatexto {
    100% {
      transform: translateY(0);
      opacity: 1;
    }
}

.slider .slider-box.ativo h2, 
.slider .slider-box.ativo p{
    transform: translateY(60px);
    opacity: 0;
    animation: animatexto .5s ease-in-out .7s forwards;
}

.slider .slider-box.ativo h2 {
  animation-delay: 1s;
}

.slider-container .slider-box.ativo {
  opacity: 1;
  z-index: 11111;
}

/* estilo das setas */
.slider button {
  width: 40px;
  height: 40px;
  background: transparent; /* Botão transparente */
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background 0.2s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 22222;
}
#anterior {
  left: 4%;
}
#proxima {
  right: 4%;
}

.slider button:hover {
  background: rgba(255,255,255,0.2); /* Leve destaque ao passar o mouse */
}

/* estilo dos botoes de navegacao */

.btn-nav-box {
  width: 100%;
  position: absolute ;
  left: 0;
  bottom: 50px;
  z-index: 777777;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.btn-nav-box .btn-nav {
  width: 30px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: .2s;
}

.btn-nav-box .btn-nav:hover {
  background-color: #fff;
}

.btn-nav-box .btn-nav.ativo {
  background-color: #fff;
}                                              

@media screen and (max-width: 768px) {
  .foto-sobe-mobile {
    transform: translateY(-70px);
  }
  .slider .slider-container .slider-box .foto-sobe-mobile {
    width: 100vh;
    height: 100vh;
    background-size: cover;
  }
  .btn-nav-box .btn-nav {
    width: 30px;
  height: 20px;
  }
}