/* Reseteo básico */
body, ul, li, a {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

/* Estilos del menú de navegación */
div.menu {
    /* background-color: #333;
        position: relative;*/
}

    div.menu ul {
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
    }

        div.menu ul li {
            margin: 0;
        }

            div.menu ul li a {
                color: white;
                font-size: 18px;
                padding: 10px 20px;
                display: block;
            }

            div.menu ul li:hover {
                background: #64B4E6;
                color: black;
            }

/* Ocultar el menú hamburguesa por defecto */
.menu-toggle {
    display: none;
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
    div.menu ul {
        flex-direction: column;
        display: none; /* Ocultar menú por defecto */
        width: 100%;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #333;
        z-index: 9999; /* Asegurar que el menú esté por encima de otros elementos */
    }

        div.menu ul li {
            text-align: center;
        }

            div.menu ul li a {
                padding: 15px 0;
            }

    /* Mostrar el botón hamburguesa */
    div.menu .menu-toggle {
        display: block;
        cursor: pointer;
        padding: 10px;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10000; /* Asegurar que el botón esté por encima de otros elementos */
    }

    .menu-toggle .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background-color: white;
    }

    /* Mostrar el menú cuando está activado */
    div.menu ul.active.nav {
        display: flex;
        flex-direction: column;
    }
}