/* Estilos del navbar */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #263b84; /* Color de fondo */
    color: white;
    display: flex; /* Usar flexbox para columnas */
    justify-content: space-between; /* Espacio entre columnas */
    align-items: center;
    padding: 10px 20px;
    z-index: 1000;
    transition: all 0.3s ease;
    font-family: 'Sora', sans-serif; /* Aplicar Sora */
    text-transform: uppercase; /* Convertir a mayúsculas */
    font-weight: 300; /* Peso de la fuente */
}

/* Espacio adicional cuando la navbar está expandida */
#navbar.small {
    padding: 5px 10px;
}

#navbar .extra-column {
    flex: 1; /* Espacio flexible para las columnas extra */
}

#navbar .nav-content {
    flex: 2; /* Columna central que contiene el logo y los enlaces */
    display: flex; /* Usar flexbox para el contenido central */
    align-items: center; /* Centrar verticalmente */
    justify-content: space-between; /* Espacio entre logo y enlaces */
}

#navbar .logo {
    flex: 0; /* No permitir que la columna del logo se expanda */
}

#navbar .logo img {
    height: 55px; /* Ajusta el tamaño según sea necesario */
    transition: height 0.3s ease;
}

#navbar.small .logo img {
    height: 50px; /* Tamaño mayor cuando se expande */
}

#navbar .nav-links {
    display: flex; /* Asegura que los enlaces se alineen horizontalmente */
    align-items: center; /* Centrar verticalmente los enlaces */
    justify-content: flex-end; /* Alinear enlaces a la derecha */
    flex: 1; /* Permitir que la columna de enlaces llene el espacio disponible */
    padding: 10px 0; /* Aumenta el padding vertical para mayor altura */
}

#navbar .nav-links a {
    color: white;
    text-decoration: none;
    margin: 0 5px; /* Espaciado entre los enlaces */
    font-size: 18px;
    padding: 10px 10px; /* Aumenta el padding alrededor del texto */
    transition: background-color 0.3s ease; /* Transición suave para el fondo */
    font-family: 'Sora', sans-serif; /* Aplicar Sora */
    font-weight: 600; /* Peso de la fuente actualizado */
}
/* Estilo para el separador */
.separator {
    font-size: 35px;
    font-weight: 100;
    color: white; /* Color del separador */
    margin: 0 5px; /* Espacio alrededor del separador */
    padding: 10px 0px; /* Aumenta el padding alrededor del texto */
    margin-bottom: 5px
    
}

/* Cambiar el color de fondo al pasar el mouse */
#navbar .nav-links a:hover {
    background-color: #1b295c; /* Cambia el fondo al pasar el mouse */
}


/* Estilos adicionales para el botón de menú */
.menu-button {
    display: none; /* Ocultar el botón de menú por defecto */
    background: none;
    border: none;
    color: white;
    font-size: 24px; /* Ajusta el tamaño del ícono del menú */
    cursor: pointer;
    margin-left: 10px; /* Espacio entre el logo y el botón */
}

/*RESPONSIVE*/

/* Mostrar el botón de menú en pantallas estrechas */
@media (max-width: 1050px) { /* Ajusta el tamaño según sea necesario */

    #navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #263b84; /* Color de fondo */
        color: white;
        display: flex; /* Usar flexbox para columnas */
        justify-content: space-between; /* Espacio entre columnas */
        align-items: center;
        padding: 20px 40px;
        z-index: 1000;
        transition: all 0.3s ease;
        font-family: 'Sora', sans-serif; /* Aplicar Sora */
        text-transform: uppercase; /* Convertir a mayúsculas */
        font-weight: 300; /* Peso de la fuente */
    }

    #navbar.small {
        padding: 5px 10px;
    }

    #navbar .nav-links {
        /*display: none; /* Ocultar los enlaces de navegación */
        flex-direction: column; /* Cambiar la dirección a vertical */
        position: absolute;
        top: 100%; /* Colocar el menú justo debajo de la navbar */
        left: 0;
        width: 100%;
        background-color: #263b84; /* Mismo color de fondo que la navbar */
        z-index: 999; /* Asegurar que el menú esté por encima de otros elementos */
        height: 0px; /* Ocultar el menú inicialmente */
        overflow: hidden; /* Evitar que se muestre el contenido cuando está colapsado */
        transition: height 0.5s ease-in-out, padding 0.5s; /* Transición suave */
        padding: 0px;
    }

    .separator {
        display: none;
        padding: 0px;
    }

    #navbar .nav-links.active {
        display: flex; /* Mostrar el menú cuando está activo */
        height: 225px; /* Un valor suficientemente alto para que el menú se expanda */    
        padding: 10px 10px; /* Aumenta el padding alrededor del texto */
    }
        

    .menu-button {
        display: block; /* Mostrar el botón de menú */
    }
}