/* Estilos para el menú responsive */
:root {
  --primary: #37517e;
  --secondary: #47b2e4;
  --white: #ffffff;
  --black: #000000;
  --icon-size: 22px;
}

#header {
  background-color: rgba(55, 81, 126, 0.8);
  backdrop-filter: blur(10px);
  transition: all 0.5s ease;
  z-index: 997;
  position: fixed;
  top: 0;
  width: 100%;
  transform: translateY(0);
  height: 70px; /* Incrementa la altura del header */
}

#header:hover {
  background-color: rgba(55, 81, 126, 0.9);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#header.hidden {
  transform: translateY(-100%);
}

.navbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.navbar ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  position: relative;
}

.navbar a {
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  min-width: 100px; /* Espacio mínimo para evitar redistribución */
}

.navbar a i {
  font-size: var(--icon-size);
  opacity: 0;
  transform: translate(-50%, calc(-50% + 6mm)) scale(0.5); /* Ajuste vertical */
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute;
  left: 50%;
}

.navbar a span {
  display: inline-block;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.navbar a:hover {
  color: var(--secondary);
}

.navbar a:hover i {
  opacity: 1;
  transform: translate(-50%, calc(-50% + 3mm)) scale(1); /* Ajuste vertical */
}

.navbar a:hover span {
  opacity: 0;
  transform: scale(0.5);
}

.navbar a.active {
  color: var(--secondary);
}

.navbar a.active i {
  opacity: 1;
  transform: translate(-50%, calc(-50% + 6mm)) scale(1); /* Ajuste vertical */
}

.navbar a.active span {
  display: none;
}

.mobile-nav-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--white);
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: none; /* Ocultar el botón de menú hamburguesa */
  }

  .navbar {
    display: flex;
    justify-content: center; /* Centrar el menú */
    align-items: center;
    width: 100%;
    background: transparent; /* Fondo transparente */
    z-index: 999;
    transform: none; /* No transformar el menú */
    transition: none; /* No transición */
  }

  .navbar ul {
    display: flex;
    flex-direction: row; /* Mostrar opciones horizontalmente */
    justify-content: center; /* Centrar las opciones */
    gap: 10px; /* Espacio entre opciones */
    width: 100%;
    text-align: center;
  }

  .navbar a {
    font-size: 16px;
    padding: 8px 10px; /* Reducir el padding */
    min-width: auto; /* Permitir que el ancho se ajuste al contenido */
    color: var(--white); /* Mantener el color blanco */
    transition: color 0.3s ease;
  }

  .navbar a:hover {
    color: var(--secondary); /* Cambio de color al interactuar */
  }
  
  /* Ajustes para móviles - Reemplazar texto por icono */
  .navbar a span.text,
  .navbar a span {
    display: none !important; /* Oculta el texto en móviles con !important */
  }
  
  /* Asegurarse de que todos los iconos sean visibles y blancos */
  .navbar a i,
  .navbar a.active i,
  .navbar a.getstarted i {
    opacity: 1 !important; /* Hace visible el icono con !important */
    position: static !important; /* Elimina el posicionamiento absoluto */
    transform: none !important; /* Elimina la transformación */
    display: inline-block !important; /* Asegura que sea visible */
    color: var(--white) !important; /* Establece el color a blanco */
    font-size: 18px !important; /* Tamaño del icono más pequeño */
    margin: 0 auto !important; /* Centra el icono horizontalmente */
    visibility: visible !important; /* Asegura que el icono sea visible */
    vertical-align: middle !important; /* Alinea verticalmente en el medio */
    line-height: normal !important; /* Normaliza la altura de línea */
  }
  
  /* Estilo específico para el icono de Home Main */
  .navbar a.getstarted i {
    color: var(--white) !important; /* Asegura que el icono sea blanco */
    font-size: 20px !important; /* Ligeramente más grande */
  }
  
  /* Ocultar el borde del enlace getstarted en versión móvil */
  .navbar a.getstarted {
    border: none !important; /* Eliminar el borde */
    background: transparent !important; /* Fondo transparente */
    border-radius: 0 !important; /* Sin bordes redondeados */
    padding: 8px 2px !important; /* Mismo padding que los demás enlaces */
    margin: 0 5px !important; /* Mismo margen que los demás enlaces */
    box-shadow: none !important; /* Sin sombra */
  }
  
  /* Asegurar que el icono activo tenga el color correcto y esté alineado */
  .navbar a.active i {
    color: var(--secondary) !important; /* Color secundario para el icono activo */
    position: relative !important; /* Posición relativa para ajustar */
    top: 10px !important; /* Bajar ligeramente el icono para alinearlo */
    transform: none !important; /* Eliminar cualquier transformación */
    margin-top: 0 !important; /* Eliminar margen superior */
    margin-bottom: 0 !important; /* Eliminar margen inferior */
    padding-top: 0 !important; /* Eliminar padding superior */
    padding-bottom: 0 !important; /* Eliminar padding inferior */
  }
  
  /* Asegurarse de que todos los enlaces sean visibles y bien espaciados */
  .navbar a {
    opacity: 1 !important;
    visibility: visible !important;
    padding: 8px 5px !important; /* Reducir el padding horizontal */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important; /* Ajustar el ancho automáticamente */
  }
  
  /* Mejorar el espaciado entre elementos del menú */
  .navbar ul {
    gap: 0 !important; /* Eliminar el espacio entre elementos */
    justify-content: flex-end !important; /* Justificar a la derecha */
    padding: 0 10px 0 0 !important; /* Padding solo a la derecha */
    width: 100% !important; /* Asegurar que ocupe todo el ancho */
  }
  
  /* Ajustar el ancho de los elementos li */
  .navbar li {
    width: auto !important; /* Ancho automático */
    text-align: center !important; /* Centrar el contenido */
    margin: 0 !important; /* Eliminar márgenes */
    padding: 0 !important; /* Eliminar padding */
  }
  
  /* Reducir la separación entre iconos */
  .navbar a {
    padding: 8px 2px !important; /* Reducir el padding horizontal al mínimo */
    margin: 0 5px !important; /* Añadir un pequeño margen horizontal */
    min-width: 0 !important; /* Eliminar el ancho mínimo */
  }
  
  /* Mantener efectos de hover originales */
  .navbar a:hover {
    color: var(--secondary) !important; /* Cambio de color al interactuar */
  }
  
  .navbar a:hover i {
    transform: scale(1.2) !important; /* Efecto de escala en hover */
    color: var(--secondary) !important; /* Mantiene el cambio de color en hover */
  }
  
  /* Mantener efectos de active */
  .navbar a.active {
    color: var(--secondary) !important;
  }
  
  .navbar a.active i {
    color: var(--secondary) !important; /* Mantiene el color en active */
    transform: scale(1.2) !important; /* Efecto de escala en active */
  }
  
  /* Estilos específicos para cuando el menú móvil está activo */
  .navbar.navbar-mobile a span.text {
    display: none; /* Asegura que el texto esté oculto cuando el menú móvil está activo */
  }
  
  .navbar.navbar-mobile a i {
    opacity: 1; /* Asegura que el icono sea visible cuando el menú móvil está activo */
    position: static;
    transform: none;
    display: inline-block;
    font-size: var(--icon-size);
  }
}