/*Alinhamento principal */
.header {
  background-color: var(--terceira);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px; /* Define uma altura fixa */
  display: flex;
  align-items: center; /* Centraliza o conteúdo verticalmente */
  justify-content: space-around;
  padding-inline: 16px;
  z-index: 1000; /* Garante que fique sobre outros elementos */
}

/*alinhamento do menu */
.nav {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  padding: 2rem;
}

/*---------------LOGO --------------- */

/*manipulação da imagem da logo no cabeçalho */
.navbar-logo img {
  width: 7vw; /* Largura desejada */
  height: auto; /* Mantém a proporção da imagem */
}
/*manipulação da imagem da logo quando passar o mouse */
.navbar-logo img:hover {
  transform: scale(1.2); /* Amplia levemente o texto */
}

/*---------------MENU PRINCIPAL --------------- */

/* Estilo da lista principal de navegação */
.nav-list {
  display: flex; /* Itens lado a lado */
  align-items: center;
  align-content: center;
  gap: 10px; /* Espaço entre os itens */
  list-style: none; /* Remove marcadores padrão */
}

.nav-list li {
  position: relative;
}

/* manipulação da fonte do menu */
.nav-list a {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: var(--quinta);
  text-decoration: none;
}

/*OK Cor fonte quando passa o mouse */
.nav-list a:hover {
  color: var(--text-branco);
}

/* Garante que cada item da lista possa posicionar elementos filhos */
.nav-list li {
  position: relative;
}

/*--------------- SUBMENU  --------------- */

/* Submenu oculto inicialmente */
.submenu {
  display: none; /* Esconde o submenu */
  position: absolute; /* Posicionamento relativo ao pai */
  top: 100%; /* Posiciona logo abaixo do item pai */
  left: 0;
  background: var(--terceira); /* Fundo branco */
  list-style: none;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Quando passa o mouse sobre o item pai, mostra o submenu */
.has-submenu:hover .submenu {
  display: block;
}

/* Estilo dos itens do submenu */
.submenu li {
  margin-bottom: 5px;
}

/* Estilo dos links dentro do submenu */
.submenu li a {
  color: var(--quinta); /* cor normal */
  text-decoration: none;
  transition: color 0.1s ease; /* pequena transição suave */
}
.submenu li a:hover {
  color: var(--text-branco); /* branco ao passar o mouse */
}

/*--------------- MENU HAMBURGUER --------------- */

.hamburger {
  all: unset; /* Remove TODOS os estilos herdados */
  display: none;
  border: none;
  background: none;
  border-top: 4.5px solid var(--quinta);
  cursor: pointer;
}
.hamburger::before,
.hamburger::after {
  all: unset; /* Remove TODOS os estilos herdados */
  content: " ";
  display: block;
  width: 30px;
  height: 4px;
  background: var(--quinta);
  margin-top: 5px;
  position: relative;
  transition: 0.5s;
}
/*--------------- BOTÃO DO WHATSAPP --------------- */

/*manipulação do botão */

.btn-contato button {
  background-color: var(--whatsapp); /* Cor do WhatsApp */
  border: none;
  color: var(--text-branco);
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  white-space: nowrap; /* Impede que o texto se quebre em várias linhas */
}

.btn-contato button:hover {
  background-color: var(--background-segunda); /* Cor ao passar o mouse */
  transform: scale(1.2); /* Amplia levemente o texto */
}
.btn-contato a:hover,
.container-capa a:hover {
  text-decoration: none; /* Remove o sublinhado */
}

/*--------------- BOTÃO ENTRAR --------------- */

/*Configuração do botão ENTRAR */
nav ul.menu li a {
  color: var(--quinta); /*cor da fonte  menu */
  text-decoration: none; /*tira o sublinhado do menu */
  padding: 10px 20px;
  transition: 0.3s;
}

/*Tira bolinha do texto */
nav ul.menu {
  list-style-type: none;
}

/* Estilo ao passar o mouse (hover) */
nav ul li a:hover {
  color: var(--text-branco);
}

/*OK Borda e cor do botão ENTRAR */
.entrar:hover {
  transform: scale(1.2); /* Amplia levemente o texto */
}

/* --------------  Carrocel  ------------- */

.carousel-caption h1 {
  font-size: 48px;
  font-weight: bold;
  color: var(--text-branco);
}

/* --------------  TELAS GRANDES  ------------- */

@media (max-width: 1199px) {
  /* --------------  CAPA DE TELAS PEQUENAS  ------------- */
  .topo.capa {
    height: 100vh; /* Altura total da tela */
    display: flex; /* Usando flexbox */
    flex-direction: column; /* Coloca os filhos em coluna */
    align-items: center; /* Centraliza horizontalmente */
    justify-content: center; /* Centraliza verticalmente */
    background-position: center center; /* centralizar a imagem */
    background-repeat: no-repeat; /* não repetir */
    background-size: cover; /* não repetir */
  }

  .container-img {
    display: flex;
    height: 4vh;
    justify-content: center; /* Centraliza horizontalmente */
    filter: invert(1);
  }

  .container-img:hover {
    transform: scale(1.2); /* Amplia levemente o texto */
  }

  .container-capa {
    display: flex; /* Usando flex para o botão */
    justify-content: center; /* Centraliza horizontalmente o botão */
    margin-top: 5%;
  }
  .container-capa:hover {
    transform: scale(1.2); /* Amplia levemente o texto */
  }

  /* ------  BOTÃO WHATSAPP CAPA E CONTATO    ------- */

  .btn-zap a,
  .btn-filhote a {
    display: inline-flex; /* Usando flex para centralizar ícone e texto */
    align-items: center; /* Centraliza verticalmente o conteúdo */
    background-color: var(--primeira); /* Cor de fundo do botão */
    padding: 10px 20px; /* Espaçamento interno do botão */
    font-size: 20px; /* Tamanho da fonte */
    color: var(--text-branco); /* Cor do texto */
    text-decoration: none; /* Remove o sublinhado do link */
    border-radius: 5px; /* Bordas arredondadas */
    cursor: pointer; /* Cursor de ponteiro */
    transition: background-color 0.3s ease; /* Animação de cor ao passar o mouse */
    white-space: nowrap; /* Impede quebra de linha no texto */
  }

  .btn-zap a:hover,
  .btn-filhote a:hover {
    background-color: var(
      --background-quinta
    ); /* Cor do botão ao passar o mouse */
    color: var(--text-branco); /* Cor do texto */
  }

  .btn-zap i,
  .btn-filhote i {
    margin-right: 10px; /* Aumenta o espaçamento entre o ícone e o texto */
    font-size: 24px; /* Ajusta o tamanho do ícone, se necessário */
  }

  .btn-filhote a {
    background-color: var(--segunda); /* Cor de fundo do botão */
    color: var(--text-branco);
  }

  /* ------  BOTÃO HAMBURGUER    ------- */
  .hamburger {
    display: block;
    z-index: 1;
  }
  .nav-list {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--terceira);
    clip-path: circle(100px at 90% -15%);
    transition: 1s ease-out;
    flex-direction: column;
    justify-content: space-around;
    align-items: baseline;
    gap: 0;
    pointer-events: none;
  }
  .nav-list a {
    font-size: 24px;
    opacity: 0;
  }
  .nav-list li:nth-child(1) a {
    transition: 0.3s 0.2s;
  }

  /*Estilos ativos*/
  .nav.active .nav-list {
    clip-path: circle(1500px at 90% -15%);
    pointer-events: all;
  }
  .nav.active .nav-list a {
    opacity: 1;
  }
  .nav.active .hamburger {
    position: fixed;
    top: 26px;
    right: 16px;
    border-top-color: transparent;
  }
  .nav.active .hamburger::before {
    transform: rotate(135deg);
    top: 3px;
  }
  .nav.active .hamburger::after {
    transform: rotate(-135deg);
    top: -6px;
  }

  .has-submenu {
    position: relative;
  }

  .submenu {
    top: 0;
    left: 100%; /* Aparece à direita do item pai */
    min-width: 150px;
    white-space: nowrap;
  }

  /* Se o menu vertical estiver ativado (como hambúrguer),
     talvez você queira forçar display: block no pai também */
  .has-submenu:hover .submenu {
    display: block;
  }
}