.menu-toggle {
  display: none;
  font-size: 2rem;
  cursor: pointer;
  user-select: none;
  color: var(--blanco);
}


@media (max-width: 768px) {
  header {
    flex-wrap: wrap;
    justify-content: space-between;
  }


  .menu-toggle {
    display: block;
  }


  nav {
    display: none;
    width: 100%;
  }


  nav.active {
    display: block;
    background-color: var(--verde-musgo-profundo);
    width: 100%;
    padding: 1rem 0;
    text-align: center;
  }

  nav ul {
    flex-direction: column;
    gap: 1rem;
  }

  .submenu {
    position: static;
    box-shadow: none;
    width: 90%;
    margin: 0 auto;
  }

  .dropdown:hover .submenu {
    display: none;
  }

  .dropdown.active .submenu {
    display: block;
  }


  nav:not(.active) {
    display: none;
  }

  nav.active {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--verde-musgo-profundo);
    z-index: 1000;
  }
}