:root { 
        --rosa-pmu: #e5b3bb; 
        --bronce-pmu: #a67c52; 
        --rosa-transparente: rgba(229, 179, 187, 0.85); 
    }

    .nav-wrapper {
        display: flex; 
        flex-direction: row;
        justify-content: center;
        align-items: center; 
        padding: 12px 20px; 
        background-color: var(--rosa-transparente);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        font-family: 'Poppins', sans-serif;
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        box-sizing: border-box;
        z-index: 10000;
        gap: 25px;
    }
    
    body { padding-top: 75px; }

    /* Contenedor del Logo al principio (izquierda) de los textos */
    .brand-container {
        display: flex;
        align-items: center;
        text-decoration: none;
    }
    .main-logo { 
        width: 40px; 
        height: 40px; 
        object-fit: contain; 
    }

    .menu-toggle {
        display: none; 
        padding: 6px 16px; 
        background: rgba(255,255,255,0.3);
        color: white; 
        border: none; 
        border-radius: 20px; 
        font-weight: 600; 
        cursor: pointer;
        font-family: 'Poppins', sans-serif;
        font-size: 0.85rem;
    }

    /* Enlaces de navegación centrados junto con el logo */
    .nav-links { 
        display: flex; 
        justify-content: center;
        flex-wrap: nowrap;
        gap: 18px; 
        align-items: center; 
        transition: all 0.4s ease-in-out; 
    }
    
    .menu-item-text { 
        text-decoration: none; 
        color: #ffffff; 
        font-weight: 600; 
        font-size: 0.82rem;
        white-space: nowrap; 
        transition: 0.3s; 
    }
    
    .menu-item-text:hover { 
        color: #ffffff; 
        text-shadow: 0 0 8px rgba(255,255,255,0.5); 
    } 

    /* Adaptación inteligente para pantallas con zoom o resoluciones menores a 1300px */
    @media (max-width: 1300px) {
        .nav-wrapper {
            justify-content: space-between;
            padding: 12px 25px;
        }
        .brand-container {
            justify-content: flex-start;
        }
        .menu-toggle { 
            display: block; 
        }
        .nav-links {
            display: flex; 
            flex-direction: column; 
            position: absolute; 
            top: 100%; 
            left: 0; 
            width: 100%; 
            background: var(--rosa-transparente);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 0; 
            max-height: 0; 
            overflow: hidden;
            box-shadow: 0 15px 20px rgba(0,0,0,0.1); 
            z-index: 9999;
            align-items: center; 
        }
        .nav-links.active { 
            max-height: 600px; 
            padding: 20px; 
        }
        .menu-item-text {
            padding: 8px 0;
            width: 100%;
            text-align: center; 
            white-space: normal;
        }
    }