@media only screen and (max-width : 959px) {
  
    html {
        text-size-adjust: 100%;
    }

    img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    #header {
        min-height: 73px;
        width: 100%;
    }

    #header div {
        margin: 0 auto;
        max-width: none;
        min-height: auto;
        width: 95%;
    }

    #header div a.logo {
        display: block;
        float: left;
        height: 60px;
        margin: 5% 0 0;
        padding: 0;
        width: 79%;
    }

    #header div span#mobile-navigation {
        background: transparent url(../images/mobile/mobile-menu.png) no-repeat;
        display: block;
        height: 50px;
        margin: 0;
        padding: 0;
        position: absolute;
        right: 3%;
        top: 14px;
        width: 50px;
        z-index: 999;
    }

   


    /* 🔥 MENÚ RESPONSIVE */
    #header div > ul#navigation {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        right: 3%;
        top: 64px;
        width: 50%;
        background: rgba(98, 0, 49, 0.91);
        border: 1px solid #f1f2f2;
        z-index: 1000;
    }

    /* 🔥 Clave para que el menú aparezca al activar la clase */
    #header div > ul#navigation.active {
        display: flex;
    }

    /* 🔥 Cada elemento ocupa todo el ancho */
    #header div > ul#navigation > li {
        border-top: 1px solid #f1f2f2;
        margin: 0;
        height: auto;
        padding: 0;
        width: 100%;
    }

    /* 🔥 Estilos para los links */
    #header div ul#navigation li a {
        color: #eeeced;
        display: block;
        font-family: 'VT323', monospace;
        font-size: 1.75em;
        font-weight: normal;
        height: 3em;
        line-height: 3.125em;
        padding: 0 10px;
        text-align: left;
        text-decoration: none;
        width: 100%; /* Cada opción ocupa todo el ancho */
    }

    #header div ul#navigation li a:hover {
        background-color: #620031;
    }

    #header div ul#navigation li.selected a {
        background: rgba(0, 0, 0, 0.91);
        color: #eeeced;
    }

    #header div > ul#navigation {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        right: 3%;
        top: 64px;
        width: 50%;
        background: rgba(98, 0, 49, 0.91);
        border: 1px solid #f1f2f2;
        z-index: 1000;
    }

    /* 🔥 Clave para que el menú aparezca al activar la clase */
    #header div > ul#navigation.active {
        display: flex;
    }

    #progress-bar {
        position: fixed;
        top: 73px;
        left: 0;
        width: 0%; /* Comienza en 0 y se expandirá dinámicamente */
        height: 4px; /* Grosor de la barra */
        background: #620031; /* Color del progreso */
        z-index: 9999; /* Asegura que esté encima de todo */
        transition: width 0.2s ease-out;
    }	

}