/* MENU HAMBURGUER */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.menu-toggle span {
  width: 25px;
  height: 3px;
  background: #3B2A25;
  border-radius: 2px;
}

/* LINKS */
nav ul li a {
  color: #3B2A25;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

/* ATIVO */
nav ul li a.active {
  color: #3B2A25;
  font-weight: 600;
}

/* HOVER */
nav ul li a:hover {
  color: #6B4F3A;
}

/* --- DESKTOP --- */
@media (min-width: 769px) {
  nav ul {
    display: flex;
  }
}

/* --- MOBILE --- */
@media (max-width: 768px) {

  /* MOSTRAR BOTÃO */
  .menu-toggle {
    display: flex;
    z-index: 1001;
  }

  /* IMPORTANTE: nav precisa ser relativo */
  nav {
    position: relative;
  }

  nav ul {
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);

    background: rgba(243, 229, 216, 0.98);
    backdrop-filter: blur(10px);

    flex-direction: column;
    gap: 15px;
    padding: 20px 25px;
    border-radius: 14px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.15);

    width: 220px;
    text-align: center;

    z-index: 9999;

    /* ANIMAÇÃO */
    max-height: 0;
    opacity: 0;
    overflow: hidden; /* 🔥 ESSENCIAL */
    pointer-events: none;
    transition: all 0.35s ease;
  }

  nav ul.active {
    max-height: 500px;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  nav ul li a {
    display: block; /* 🔥 melhora clique */
    padding: 8px 0;
  }
}