@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

/* Estilo del encabezado */
.header {
  background-color: #24b494; /* Verde institucional */
  color: white;
  font-size: 14px;
  padding: 5px 0;
}
.header .contact-info i {
  margin-right: 5px;
}
.header .social-icons a {
  color: white;
  margin: 0 5px;
  font-size: 16px;
}

/* Barra de navegación */
.navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  font-family: "Montserrat", "sans-serif";

  /*Nuevos*/
  z-index: 1050 !important;
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.nav-item {
  margin-right: 50px;
  font-size: 20px;
}

.navbar-brand img {
  height: 60px;
  margin-left: -25%;
}
.navbar-nav {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-grow: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-link {
  position: relative;
  padding-bottom: 5px;
  font-size: 18px;
  color: #333 !important;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #1abc9c;
  transition: width 0.3s, left 0.3s;
}
@media (max-width: 768px) {
  .nav-link::after {
    display: none;
  }
  .navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    font-family: "Montserrat", "sans-serif";

    /*Nuevos*/
    z-index: 1030;
    background-color: white;
    width: 100%;
    height: auto;
    position: fixed;
    z-index: 1050 !important;
    background-color: none;
  }
}

.nav-link:hover::after {
  width: 100%;
  left: 0;
}

.nav-item.dropdown .nav-link {
  display: flex;
  align-items: center;
  gap: 5px; /* Espacio entre el texto y la flecha */
}

/* Flecha que gira */
.nav-item.dropdown .bi-chevron-down {
  transition: transform 0.3s ease; /* Suaviza la animación */
}

/* Flecha gira cuando el menú está abierto */
.nav-item.dropdown.show .nav-link .bi-chevron-down {
  transform: rotate(180deg);
}

/* Ajustar la posición del menú desplegable a la izquierda */
.nav-item.dropdown .dropdown-menu {
  position: absolute;
  left: -10%;
  right: auto;
  top: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: none;
  border-bottom: 5px solid #27c9ad;
  text-align: left;
}

/* Mostrar el submenú al pasar el cursor */
.nav-item.dropdown:hover .dropdown-menu {
  display: inline-block; /* Muestra el menú desplegable */
  visibility: visible; /* Asegura que sea visible */
  opacity: 1; /* Asegura que sea completamente visible */
  transition: opacity 0.3s ease-in-out; /* Suaviza la transición */
}





/* Imagen emergente */

    .modal {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
    }

    /* Contenido del modal */
    .modal-content {
      position: relative;
      max-width: 90%;
      max-height: 90%;
    }

    .modal-content img {
      width: 100%;
      height: auto;
      border-radius: 10px;
    }

    /* Botón de cerrar */
    .close {
      position: fixed;
      top: 20px;
      right: 20px;
      color: #fff;
      background-color: #000;
      padding: 8px 14px;
      font-size: 28px;
      font-weight: bold;
      border-radius: 100%;
      cursor: pointer;
      z-index: 10000;
      box-shadow: 0 0 10px rgba(255,255,255,0.5);
      transition: background-color 0.2s;
    }

    .close:hover {
      color: #ff0000;
    }







@media (max-width: 768px) {


/* Establece el menú desplegable para que esté oculto inicialmente */
.dropdown-menu {
  display: none; /* Oculta el menú inicialmente */
  visibility: hidden; /* Asegura que esté oculto */
  opacity: 0; /* Hace que sea invisible */
  transition: opacity 0.3s ease-in-out; /* Suaviza la transición al mostrarlo */
}

.dropdown-menu {
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: none;
}

.dropdown-item {
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
  z-index: 1;
}

.dropdown-item:hover {
  background-color: #1abc9c;
  color: white;
}

.dropdown-item:last-child {
  border-bottom: none;
}

/* Nuevos agregados*/
.dropdown-menu {
  display: none; /* Se oculta por defecto */
  
}

.dropdown-menu.show {
  display: block; /* Se muestra cuando tiene la clase .show */
}


 /* Imagen emergente */

    /* Fondo oscuro sobreexpuesto */
    .modal {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      padding: 20px;
      box-sizing: border-box;
    }

    /* Contenedor del contenido */
    .modal-content {
      position: relative;
      width: 100%;
      max-width: 600px;
      max-height: 90vh;
      overflow: auto;
      border-radius: 10px;
    }

    .modal-content img {
      width: 100%;
      height: auto;
      border-radius: 10px;
      display: block;
    }

    /* Botón cerrar */
    .close {
      position: fixed;
      top: 20px;
      right: 20px;
      color: #fff;
      background-color: #000;
      padding: 8px 14px;
      font-size: 28px;
      font-weight: bold;
      border-radius: 100%;
      cursor: pointer;
      z-index: 10000;
      box-shadow: 0 0 10px rgba(255,255,255,0.5);
      transition: background-color 0.2s;
    }

}