/* Estils del Menú Hamburguesa Personalitzat */
    .menu-hamburguesa-contenidor {
        position: relative; 
        z-index: 1000; /* Assegura't que estigui per sobre d'altres elements */
    }

    .menu-hamburguesa-icona {
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 40px; /* Una mica més gran per accessibilitat */
        height: 35px;
        margin-left: -10px; /* Ajust per alinear amb l'inici del contenidor */
    }

    /* Les tres ratlles */
    .menu-hamburguesa-icona .ratlla {
        display: block;
        height: 3px;
        width: 100%;
        background-color: white; /* Color blanc per al fons fosc de la barra de navegació */
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }

    /* --- ANIMACIÓ D'HAMBURGUESA A "X" --- */
    .menu-hamburguesa-icona.obert .ratlla:nth-child(2) {
        opacity: 0; /* Amaga la ratlla central */
    }
    /* Gira la ratlla superior */
    .menu-hamburguesa-icona.obert .ratlla:nth-child(1) {
        transform: translateY(16px) rotate(45deg); 
    }
    /* Gira la ratlla inferior */
    .menu-hamburguesa-icona.obert .ratlla:nth-child(3) {
        transform: translateY(-16px) rotate(-45deg);
    }

    /* Estil per al menú desplegable */
    .menu-desplegable-amagat {
        position: absolute;
        top: 100%; 
        left: 0; /* POSICIONAT A L'ESQUERRA */
        list-style: none;
        padding: 0;
        margin: 0;
        min-width: 220px;
        background-color: #0d6efd; /* Fons fosc similar a la navbar */
        border: 1px solid white;
        box-shadow: 0 8px 16px rgba(0,0,0,0.4);
        display: none; /* Amagat per defecte */
    }

    .menu-desplegable-obert {
        display: block; /* Mostra el menú quan s'afegeix aquesta classe */
    }

    /* Estil dels enllaços dins el menú */
    .menu-desplegable-amagat ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .menu-desplegable-amagat li a {
        text-decoration: none;
        color: white; 
        display: block;
        padding: 10px 15px;
    }

    .menu-desplegable-amagat li a:hover {
        background-color: #495057; /* Fons en passar el ratolí */
        color: white;
    }