/* Estilo general del header */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  background-color: #ffffff;
  border-bottom: 2px solid rgba(77, 190, 77, 0.64);
  padding: 0 40px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center; /* Centra horizontalmente el contenido */
}

/* Barra superior: logo y redes sociales */
.top-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Espacio entre logo, menú y redes */
  gap: 30px;
}

/* Logo */
.logo img {
  width: 110px;
  height: auto;
  display: block;
}

/* Redes sociales */
.social-icons a {
  color: black;
  font-size: 24px;
  margin: 0 8px;
  text-decoration: none;
}
.social-icons a:hover {
  color: #4dbc4b;
}

/* Botón hamburguesa para móvil */
.hamburger-menu {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
}

/* Menú principal */
.menu {
  flex: 1;
  background-color: #fff;
  transition: max-height 0.3s ease;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Lista del menú */
.menu ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0px;
}
.menu li {
  margin: 0px;
}
.menu a {
  font-family: "Roboto", sans-serif;
  text-decoration: solid;
  font-size: 18px;
  color: black;
  padding: 10px 12px;
}
.menu a:hover {
  background-color: #f0f0f0;
  border-radius: 5px;
}

/* Estilos responsivos */
@media (max-width: 762px) {
  /* Mostrar botón hamburguesa */
  .hamburger-menu {
    display: flex;
  }

  /* En móvil, el menú inicialmente colapsado */
  .menu {
    max-height: 0;
  }

  /* Mostrar menú cuando tiene clase 'active' */
  .menu.active {
    max-height: 500px; /* suficiente para mostrar todo */
  }

  /* Opcional: hacer que los submenús también sean colapsables */
}

/* Para la flecha */
.menu li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative; /* por si quieres el collapse de submenús */
}

.menu li > a .arrow {
  margin-left: 8px;
  font-size: 12px;
  transition: transform 0.3s;
}

/* Opcional: rotar flecha en submenú abierto */
.menu li.open > a .arrow {
  transform: rotate(180deg);
}

/* Para los submenús */
.menu li ul {
  display: none; /* Para que se superponga al contenido */
  position: absolute; /* Hace que el submenú esté fuera del flujo */
  top: 60%; /* Posiciona justo debajo del li padre */

  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 999; /* Para que esté por encima del resto */
}
.menu li:hover > ul,
.menu li.open > ul {
  display: block; /* Muestra el submenú al pasar el ratón o al abrir */
}