/* Resposividad para móviles */
@font-face {
    font-family: 'CeraPro';
    src: url('../fonts/CeraProBlack.otf') format('opentype');
    font-weight: 900;
    /* Black */
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding-top: 90px; /* Ajuste para el header */
}


/* Navbar general para versión web y móvil */
.navbar {
    top: 0;
    z-index: 1000; /* Asegúrate de que esté encima de otros elementos */   
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #21629d;
    padding: 15px; /* Incrementa el margen superior e inferior */
    margin-bottom: 0%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Agrega una sombra para el sticky */
    border-radius: 0 0 25px 25px; /* redondeo abajo */

}

header{
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.logo img {
    width: 70%;
    height: auto;
    margin: 0 15px; /* Espaciado entre los logos */
}


.logo2 img {
    height: 60px; /* Agranda los logos */
    margin: 0 10px; /* Espaciado entre los logos */
}

.navbar-menu {
    display: flex;
    list-style: none;
    justify-content: center;
    flex-grow: 1;
    font-family: 'CeraPro', sans-serif !important;
    font-weight: 900; /* Aplica la variante Black */
    color: #ffffff !important;
}

.navbar-toggle {
    position: relative;
    z-index: 1001; /* Asegúrate de que esté por encima de otros elementos */
}

.navbar-menu li {
    margin: 0 25px; /* Incrementa el espaciado entre los elementos del menú */
    position: relative;
}

.navbar-menu a {
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    font-size: 18px; /* Texto más grande en el menú */
    display: flex;
    align-items: center;
    padding: 10px 15px; /* Más espacio alrededor del texto */
}

.navbar-menu a:hover {
    color: #9cb933;
}

.dropdown-menu {
    display: none;
    position: absolute !important;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    z-index: 1050;
    padding: 10px 0;
    width: 180px; /* Ancho del dropdown */
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    padding: 10px 20px;
}

.dropdown-menu a {
    color: #003366;
    font-size: 16px; /* Texto más grande en el dropdown */
}

.dropdown-menu a:hover {
    color: #0066cc;
}

/* Resposividad para móviles */
@media (max-width: 1324px) {
    
    body {
        padding-top: 85px; /* Ajuste para el header */
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #21629d;
        z-index: 1000;
    }

    .navbar-header {
        display: flex;
        flex-direction: column; /* Cambié a columna para apilar el logo principal */
        justify-content: center;
        align-items: center; /* Centra todo el contenido */
        width: 100%; /* Asegura que ocupe todo el ancho */
    }

    .navbar-logo img {
        width: 90%;
        height: auto;
        max-width: 300px; /* Ajusta el tamaño máximo del logo */
    }

    .logo2 {
        display: flex;
        flex-direction: row; /* Alinea los logos en fila */
        justify-content: center; /* Centra los logos horizontalmente */
        gap: 10px; /* Espacio entre las imágenes */
        margin-top: 10px; /* Añade espacio arriba */
    }

    .logo2 img {
        width: 80% !important; /* Ajusta el tamaño de los logos */
        height: auto;
    }

    /* 🔹 Botón para abrir el sidebar */
    .navbar-toggle {
        position: absolute;
        top: 5px;  /* Ahora está completamente arriba */
        left: 10px; /* Más pegado a la izquierda */
        display: block;
        cursor: pointer;
        padding: 10px;
        background: none;
        border: none;
        font-size: 24px;
        z-index: 1100; /* Asegura que esté por encima del navbar */
        transform: translate(-20px,-20px);
    }

    /* 🔹 Convertimos el navbar en un menú lateral */
    .navbar-menu {
        position: fixed;
        top: 0;
        left: -250px; /* Inicialmente oculto */
        width: 250px;
        height: 100vh;
        background-color: #21629d;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 70px; /* Para no tapar el navbar */
        transition: left 0.3s ease-in-out;
        overflow-y: auto;
        z-index: 1050; /* Asegura que el menú esté visible */
    }

    /* 🔹 Cuando está activo, se muestra el sidebar */
    .navbar-menu.active {
        left: 0;
    }

    .navbar-menu li {
        margin: 15px 0;
    }

    .navbar-menu a {
        padding: 15px;
        text-align: center;
        font-size: 16px;
        display: block;
        width: 100%;
    }

    /* 🔹 Dropdown menu dentro del sidebar */
    .dropdown-menu {
        max-height: 200px;
        overflow-y: auto;
        background: #f9f9f9;
        width: 100%;
    }
}

@media (min-width: 1325px) and (max-width: 1440px) {
    body {
        padding-top: 150px; /* Ajuste para el header */
    }
}