/* ... (resto de tu css) ... */

@media (max-width: 768px) {
    .header { padding: 1.5rem 1.2rem; }
    .logo { font-size: 1rem; letter-spacing: 2px; }

    /* --- MENÚ MÓVIL DESPLEGABLE --- */
    .menu-toggle {
        display: block;
    }

    .nav-links {
        display: flex;
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background-color: rgba(7, 7, 7, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start; /* Alineado a la izquierda */
        padding-left: 20%; /* Margen izquierdo para que no pegue al borde */
        gap: 2.5rem;
        transition: left 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 999;
    }

    .nav-links.active {
        left: 0;
    }

    .nav-links a {
        font-size: 1.2rem;
        letter-spacing: 3px;
    }

    .social-top {
        z-index: 1001;
    }

    .title { font-size: 2.2rem; letter-spacing: 8px; }
    .custom-audio-player { padding: 0.8rem; gap: 10px; }
    .platforms { gap: 2.5rem; }
    .main-content { padding: 1.5rem 5% 3rem; }
}