/* ============================================
   UTILITY CLASSES SYSTEM - FASE 2
   ============================================ */

/* ============================================
   LAYOUT UTILITIES
   ============================================ */
.flex { display: flex !important; }
.grid { display: grid !important; }
.block { display: block !important; }
.inline-block { display: inline-block !important; }

/* Flex utilities */
.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-start { justify-content: flex-start !important; }
.flex-1 { flex: 1 !important; }

/* Grid utilities */
.grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
.grid-4 { grid-template-columns: repeat(4, 1fr) !important; }

/* ============================================
   SPACING UTILITIES
   ============================================ */
/* Padding utilities */
.p-0 { padding: 0 !important; }
.p-xs { padding: clamp(4px, 1vw, 6px) !important; }
.p-sm { padding: clamp(8px, 1.5vw, 10px) !important; }
.p-md { padding: clamp(12px, 2vw, 16px) !important; }
.p-lg { padding: clamp(16px, 3vw, 20px) !important; }
.p-xl { padding: clamp(20px, 4vw, 25px) !important; }

/* Margin utilities */
.m-0 { margin: 0 !important; }
.m-xs { margin: clamp(4px, 1vw, 6px) !important; }
.m-sm { margin: clamp(8px, 1.5vw, 10px) !important; }
.m-md { margin: clamp(12px, 2vw, 16px) !important; }
.m-lg { margin: clamp(16px, 3vw, 20px) !important; }
.m-xl { margin: clamp(20px, 4vw, 25px) !important; }

/* Margin bottom utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: clamp(4px, 1vw, 6px) !important; }
.mb-sm { margin-bottom: clamp(8px, 1.5vh, 10px) !important; }
.mb-md { margin-bottom: clamp(12px, 2vh, 16px) !important; }
.mb-lg { margin-bottom: clamp(16px, 3vh, 20px) !important; }
.mb-xl { margin-bottom: clamp(20px, 4vh, 25px) !important; }

/* Gap utilities */
.gap-xs { gap: clamp(4px, 1vw, 6px) !important; }
.gap-sm { gap: clamp(8px, 1.5vw, 10px) !important; }
.gap-md { gap: clamp(12px, 2.5vw, 16px) !important; }
.gap-lg { gap: clamp(16px, 3vw, 20px) !important; }
.gap-xl { gap: clamp(20px, 4vw, 25px) !important; }

/* ============================================
   BACKGROUND UTILITIES
   ============================================ */
.bg-card { background: rgba(0, 0, 0, 0.45) !important; }
.bg-card-solid { background: rgba(0, 0, 0, 0.8) !important; }
.bg-primary-5 { background: rgba(255, 51, 102, 0.05) !important; }
.bg-primary-10 { background: rgba(255, 51, 102, 0.1) !important; }
.bg-primary-20 { background: rgba(255, 51, 102, 0.2) !important; }
.bg-primary-30 { background: rgba(255, 51, 102, 0.3) !important; }

/* ============================================
   BORDER UTILITIES
   ============================================ */
.rounded-none { border-radius: 0 !important; }
.rounded-sm { border-radius: 6px !important; }
.rounded { border-radius: 8px !important; }
.rounded-lg { border-radius: 12px !important; }
.rounded-xl { border-radius: 16px !important; }
.rounded-full { border-radius: 50% !important; }

.border-primary { border: 1px solid rgba(255, 51, 102, 0.4) !important; }
.border-primary-2 { border: 2px solid rgba(255, 51, 102, 0.4) !important; }
.border-primary-strong { border: 2px solid rgba(255, 51, 102, 0.6) !important; }

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */
.text-xs { font-size: clamp(10px, 2vw, 12px) !important; }
.text-sm { font-size: clamp(11px, 2.2vw, 13px) !important; }
.text-base { font-size: clamp(14px, 3vw, 16px) !important; }
.text-lg { font-size: clamp(18px, 4vw, 24px) !important; }
.text-xl { font-size: clamp(22px, 4.5vw, 28px) !important; }

.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-black { font-weight: 900 !important; }

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.text-white { color: #fff !important; }
.text-primary { color: #ff3366 !important; }
.text-white-80 { color: rgba(255, 255, 255, 0.8) !important; }
.text-white-60 { color: rgba(255, 255, 255, 0.6) !important; }

.uppercase { text-transform: uppercase !important; }
.tracking-wide { letter-spacing: 1px !important; }

/* ============================================
   POSITIONING UTILITIES
   ============================================ */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }

.top-0 { top: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0 { left: 0 !important; }
.right-0 { right: 0 !important; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0 !important; }

.z-1 { z-index: 1 !important; }
.z-10 { z-index: 10 !important; }
.z-50 { z-index: 50 !important; }

/* ============================================
   SIZE UTILITIES
   ============================================ */
.w-full { width: 100% !important; }
.h-full { height: 100% !important; }
.size-icon { 
    width: clamp(26px, 4vw, 30px) !important; 
    height: clamp(26px, 4vw, 30px) !important; 
}

/* ============================================
   EFFECTS UTILITIES
   ============================================ */
.backdrop-blur { backdrop-filter: blur(5px) !important; }
.backdrop-blur-strong { backdrop-filter: blur(10px) !important; }

.transition { transition: all 0.3s ease !important; }
.transition-fast { transition: all 0.2s ease !important; }

.shadow-card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; }
.shadow-card-lg { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important; }

/* ============================================
   MOBILE OVERRIDES
   ============================================ */
@media (max-width: 768px) {
    /* Layout changes for mobile */
    .mobile\:flex-col { flex-direction: column !important; }
    .mobile\:grid-1 { grid-template-columns: 1fr !important; }
    
    /* Background changes for mobile */
    .mobile\:bg-card-solid { background: rgba(0, 0, 0, 0.8) !important; }
    
    /* Spacing adjustments for mobile */
    .mobile\:p-sm { padding: clamp(8px, 2vw, 12px) !important; }
    .mobile\:gap-sm { gap: clamp(8px, 2vw, 12px) !important; }
    
    /* Hide elements on mobile */
    .mobile\:hidden { display: none !important; }
}

/* ============================================
   SEMANTIC COMPONENT UTILITIES
   ============================================ */

/* Bio Section Utilities */
.bio-main-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(25px, 4.5vw, 45px) !important;
    align-items: start !important;
    height: 100% !important;
}

.bio-left-section {
    padding-right: clamp(15px, 3vw, 25px) !important;
    max-width: 85% !important;
}

.bio-right-section {
    padding-left: clamp(20px, 4vw, 40px) !important;
    border-left: 1px solid rgba(255, 51, 102, 0.3) !important;
}

.bio-image-text-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: clamp(15px, 3vw, 20px) !important;
    margin-bottom: clamp(12px, 2vh, 15px) !important;
}

.bio-image-container {
    width: 100% !important;
    cursor: pointer !important;
}

.bio-main-image {
    width: 100% !important;
    height: clamp(200px, 35vh, 280px) !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    border: 2px solid rgba(255, 51, 102, 0.4) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.bio-text-content {
    flex: 1 !important;
    font-size: clamp(10px, 2vw, 12px) !important;
    line-height: 1.4 !important;
    color: #e0e0e0 !important;
    text-align: center !important;
}

.bio-text-full {
    font-size: clamp(10px, 2vw, 12px) !important;
    line-height: 1.4 !important;
    color: #e0e0e0 !important;
}

.bio-paragraph {
    margin-bottom: clamp(8px, 1.5vh, 10px) !important;
}

.bio-highlight {
    color: #ff3366 !important;
    font-weight: 700 !important;
}

.bio-white-text {
    color: #fff !important;
}

.member-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: clamp(8px, 2vw, 12px) !important;
}

.member-card {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 10px !important;
    padding: clamp(8px, 2vw, 12px) !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    min-height: 62px !important;
}

.member-avatar {
    width: clamp(30px, 6vw, 38px) !important;
    height: clamp(30px, 6vw, 38px) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    margin-right: 10px !important;
    border: 2px solid rgba(255,51,102,.4) !important;
}

.member-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.member-info {
    /* Contenedor de la información del miembro */
}

.member-name {
    font-size: clamp(11px, 2.5vw, 15px) !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
    transition: color 0.3s ease !important;
}

.member-role {
    font-size: clamp(9px, 2vw, 12px) !important;
    color: #a0a0a0 !important;
    text-transform: uppercase !important;
}

.member-link {
    text-decoration: none !important;
    color: inherit !important;
}
.contact-item {
    display: flex !important;
    align-items: center !important;
    margin-bottom: clamp(8px, 1.5vh, 10px) !important;
    padding: clamp(5px, 1vw, 6px) !important;
    background: rgba(255, 51, 102, 0.1) !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.contact-icon {
    width: clamp(26px, 4vw, 30px) !important;
    height: clamp(26px, 4vw, 30px) !important;
    background-color: rgba(255, 51, 102, 0.3) !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-right: 10px !important;
}

/* NUEVA GRID DE REDES SOCIALES */
.social-networks-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: clamp(6px, 1.2vw, 10px) !important;
    width: 100% !important;
    min-height: clamp(250px, 50vh, 300px) !important;
}

/* BASE SOCIAL CARD */
.social-card {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 12px !important;
    padding: clamp(6px, 1.2vw, 10px) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: clamp(90px, 18vh, 110px) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.social-card:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(12px) !important;
}

/* SOCIAL CARD COMPONENTS */
.social-card-link {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: inherit !important;
    width: 100% !important;
}

.social-card-icon {
    font-size: clamp(16px, 3.5vw, 20px) !important;
    margin-bottom: clamp(1px, 0.3vh, 3px) !important;
    transition: all 0.3s ease !important;
}

.social-card-title {
    font-size: clamp(9px, 1.8vw, 11px) !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.social-card-stats {
    font-size: clamp(7px, 1.3vw, 8px) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin-top: 1px !important;
    font-weight: 500 !important;
}

.social-card-button {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    border-radius: 15px !important;
    padding: clamp(1px, 0.3vw, 3px) clamp(4px, 1.2vw, 8px) !important;
    font-size: clamp(7px, 1.3vw, 8px) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
    letter-spacing: 0.3px !important;
    margin-top: clamp(1px, 0.3vh, 3px) !important;
}

/* ==========================================
   ESTILOS ESPECÍFICOS POR RED SOCIAL
   ========================================== */

/* SPOTIFY - Verde #1DB954 */
.social-card-spotify {
    border: 1px solid rgba(29, 185, 84, 0.3) !important;
}
.social-card-spotify:hover {
    border-color: rgba(29, 185, 84, 0.6) !important;
    box-shadow: 0 8px 25px rgba(29, 185, 84, 0.2) !important;
}
.social-card-spotify .social-card-icon {
    color: #1DB954 !important;
}
.social-card-spotify:hover .social-card-icon {
    color: #1ed760 !important;
    transform: scale(1.1) !important;
}
.social-card-button-spotify {
    background: linear-gradient(135deg, rgba(29, 185, 84, 0.2), rgba(29, 185, 84, 0.3)) !important;
    border: 1px solid rgba(29, 185, 84, 0.4) !important;
}
.social-card-button-spotify:hover {
    background: linear-gradient(135deg, rgba(29, 185, 84, 0.4), rgba(29, 185, 84, 0.5)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(29, 185, 84, 0.3) !important;
}

/* INSTAGRAM - Gradiente Rosa/Naranja */
.social-card-instagram {
    border: 1px solid rgba(225, 48, 108, 0.3) !important;
}
.social-card-instagram:hover {
    border-color: rgba(225, 48, 108, 0.6) !important;
    box-shadow: 0 8px 25px rgba(225, 48, 108, 0.2) !important;
}
.social-card-instagram .social-card-icon {
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.social-card-instagram:hover .social-card-icon {
    transform: scale(1.1) rotate(5deg) !important;
}
.social-card-button-instagram {
    background: linear-gradient(135deg, rgba(225, 48, 108, 0.2), rgba(240, 148, 51, 0.2)) !important;
    border: 1px solid rgba(225, 48, 108, 0.4) !important;
}
.social-card-button-instagram:hover {
    background: linear-gradient(135deg, rgba(225, 48, 108, 0.4), rgba(240, 148, 51, 0.4)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(225, 48, 108, 0.3) !important;
}

/* YOUTUBE - Rojo #FF0000 */
.social-card-youtube {
    border: 1px solid rgba(255, 0, 0, 0.3) !important;
}
.social-card-youtube:hover {
    border-color: rgba(255, 0, 0, 0.6) !important;
    box-shadow: 0 8px 25px rgba(255, 0, 0, 0.2) !important;
}
.social-card-youtube .social-card-icon {
    color: #FF0000 !important;
}
.social-card-youtube:hover .social-card-icon {
    color: #FF3333 !important;
    transform: scale(1.1) !important;
}
.social-card-button-youtube {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.3)) !important;
    border: 1px solid rgba(255, 0, 0, 0.4) !important;
}
.social-card-button-youtube:hover {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.4), rgba(255, 0, 0, 0.5)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3) !important;
}

/* SOUNDCLOUD - Naranja #FF8800 */
.social-card-soundcloud {
    border: 1px solid rgba(255, 136, 0, 0.3) !important;
}
.social-card-soundcloud:hover {
    border-color: rgba(255, 136, 0, 0.6) !important;
    box-shadow: 0 8px 25px rgba(255, 136, 0, 0.2) !important;
}
.social-card-soundcloud .social-card-icon {
    color: #FF8800 !important;
}
.social-card-soundcloud:hover .social-card-icon {
    color: #ffaa44 !important;
    transform: scale(1.1) !important;
}
.social-card-button-soundcloud {
    background: linear-gradient(135deg, rgba(255, 136, 0, 0.2), rgba(255, 136, 0, 0.3)) !important;
    border: 1px solid rgba(255, 136, 0, 0.4) !important;
}
.social-card-button-soundcloud:hover {
    background: linear-gradient(135deg, rgba(255, 136, 0, 0.4), rgba(255, 136, 0, 0.5)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 136, 0, 0.3) !important;
}

/* APPLE MUSIC - Negro/Rosa */
.social-card-apple {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.social-card-apple:hover {
    border-color: rgba(255, 45, 85, 0.6) !important;
    box-shadow: 0 8px 25px rgba(255, 45, 85, 0.2) !important;
}
.social-card-apple .social-card-icon {
    color: #ffffff !important;
}
.social-card-apple:hover .social-card-icon {
    color: #ff2d55 !important;
    transform: scale(1.1) !important;
}
.social-card-button-apple {
    background: linear-gradient(135deg, rgba(255, 45, 85, 0.2), rgba(0, 0, 0, 0.3)) !important;
    border: 1px solid rgba(255, 45, 85, 0.4) !important;
}
.social-card-button-apple:hover {
    background: linear-gradient(135deg, rgba(255, 45, 85, 0.4), rgba(0, 0, 0, 0.5)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 45, 85, 0.3) !important;
}

/* LINKTREE - Verde #43E55E */
.social-card-linktree {
    border: 1px solid rgba(67, 229, 94, 0.3) !important;
}
.social-card-linktree:hover {
    border-color: rgba(67, 229, 94, 0.6) !important;
    box-shadow: 0 8px 25px rgba(67, 229, 94, 0.2) !important;
}
.social-card-linktree .social-card-icon {
    color: #43E55E !important;
}
.social-card-linktree:hover .social-card-icon {
    color: #67ee7a !important;
    transform: scale(1.1) rotate(-10deg) !important;
}
.social-card-button-linktree {
    background: linear-gradient(135deg, rgba(67, 229, 94, 0.2), rgba(67, 229, 94, 0.3)) !important;
    border: 1px solid rgba(67, 229, 94, 0.4) !important;
}
.social-card-button-linktree:hover {
    background: linear-gradient(135deg, rgba(67, 229, 94, 0.4), rgba(67, 229, 94, 0.5)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(67, 229, 94, 0.3) !important;
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    /* BIOGRAFÍA MÓVIL - LAYOUT EN COLUMNA */
    .bio-main-layout {
        grid-template-columns: 1fr !important;
        gap: clamp(15px, 3vw, 20px) !important;
        text-align: center !important;
    }
    
    .bio-left-section,
    .bio-right-section {
        padding: 0 !important;
        max-width: 100% !important;
        border: none !important;
    }
    
    /* DESTACADOS MÓVIL - MARGEN INFERIOR REDUCIDO */
    #slide-3 .highlights-main-layout {
        grid-template-columns: 1fr !important;
        gap: clamp(10px, 2vw, 15px) !important;
        padding-bottom: clamp(80px, 15vh, 100px) !important;
        margin-bottom: 0px !important;
    }
    
    /* CONTENIDO DE DESTACADOS SIN EXCESO */
    #slide-3 {
        padding-bottom: clamp(80px, 12vh, 90px) !important;
    }
    
    .highlights-left-section,
    .highlights-right-section {
        padding: 0 !important;
        border: none !important;
    }
    
    /* MEDIA MÓVIL - FIXED SPACING */
    #slide-4 .material-main-layout {
        grid-template-columns: 1fr !important;
        gap: clamp(15px, 3vw, 20px) !important;
        padding-bottom: 0 !important; /* REMOVED: Excessive padding */
        margin-bottom: 0 !important; /* REMOVED: Excessive margin */
    }
    
    /* CONTENIDO DE MEDIA - FIXED PADDING */
    #slide-4 {
        padding-bottom: 0 !important; /* REMOVED: Excessive slide padding */
    }
    
    .material-left-section,
    .material-right-section {
        padding: 0 !important;
        border: none !important;
    }
    
    /* INFO MÓVIL - SIN SCROLL, CONTENIDO FIJO */
    #slide-5 {
        height: calc(100vh - 70px) !important;
        max-height: calc(100vh - 70px) !important;
        overflow: hidden !important;
        padding-bottom: clamp(80px, 12vh, 90px) !important;
        padding-top: clamp(15px, 3vh, 20px) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    
    #slide-5 .info-main-layout {
        grid-template-columns: 1fr !important;
        gap: clamp(8px, 1.5vw, 12px) !important;
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
    
    .info-left-section,
    .info-right-section {
        padding: 0 !important;
        border: none !important;
    }
    
    /* CONTACTO MÓVIL - TÍTULO COMPRIMIDO */
    #slide-5 .section-title {
        margin-top: clamp(10px, 2vh, 15px) !important;
        margin-bottom: clamp(5px, 1vh, 8px) !important;
        font-size: clamp(14px, 3.5vw, 18px) !important;
    }
    
    /* FORZAR VISUALIZERS MÓVIL - MÁXIMA ESPECIFICIDAD - FIXED BOTTOM SPACING */
    body #slide-4.slide-content {
        height: auto !important;
        min-height: calc(100vh - 70px) !important; /* Only account for nav height */
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        position: relative !important;
        padding-bottom: 70px !important; /* REDUCED: Just enough for navbar clearance */
    }
    
    /* iOS SAFARI SPECIFIC FIX - Override global iOS padding */
    @supports (-webkit-touch-callout: none) {
        body #slide-4.slide-content {
            padding-bottom: 75px !important; /* Slightly more for iOS, but still minimal */
            min-height: calc(100vh - 70px) !important; /* Reset excessive height */
        }
    }
    
    body #slide-4 .material-main-layout {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
        position: relative !important;
        padding-bottom: 0 !important; /* REMOVE: Eliminate double padding */
        margin-bottom: 0 !important; /* REMOVE: Eliminate excessive margin */
    }
    
    body #slide-4 .material-right-section {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    body #slide-4 .visualizers-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 20px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin-bottom: 15px !important; /* SMALL: Just a small visual margin */
    }
    
    body #slide-4 .visualizer-card {
        width: 100% !important;
        height: 150px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        position: relative !important;
        display: block !important;
        margin-bottom: 5px !important;
        flex-shrink: 0 !important;
    }
    
    body #slide-4 .visualizer-card video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    /* Grid responsivo - 2 columnas en móvil */
    .social-networks-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(6px, 2vw, 10px) !important;
    }
    
    /* Social cards móvil - LIGERAMENTE MÁS GRANDES */
    .social-card {
        height: clamp(62px, 13vh, 75px) !important;
        padding: clamp(4px, 1.2vw, 6px) !important;
        margin-left: clamp(2px, 0.5vw, 3px) !important;
        margin-right: clamp(2px, 0.5vw, 3px) !important;
    }
    
    .social-networks-grid {
        padding-left: clamp(4px, 1vw, 6px) !important;
        padding-right: clamp(4px, 1vw, 6px) !important;
        padding-top: clamp(5px, 1vh, 8px) !important;
        gap: clamp(2px, 0.5vw, 4px) !important;
        margin-bottom: 0px !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .social-card-icon {
        font-size: clamp(16px, 3.5vw, 18px) !important;
        margin-bottom: clamp(1px, 0.3vh, 2px) !important;
    }
    
    .social-card-title {
        font-size: clamp(9px, 1.8vw, 11px) !important;
        line-height: 1.2 !important;
    }
    
    .social-card-stats {
        font-size: clamp(7px, 1.4vw, 8px) !important;
        line-height: 1.2 !important;
    }
    
    /* OCULTAR TODOS LOS BOTONES DE SOCIAL CARDS - FUERZA BRUTA */
    a[class*="social-card-button"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    .social-card-button,
    [class*="social-card-button"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* MARIANO ZUCCARELLO MANAGER - MUCHO MÁS GRANDE */
    h3:contains("MARIANO ZUCCARELLO"),
    h3[style*="text-white"]:first-child,
    .text-lg.font-bold.mb-xs.text-white {
        font-size: clamp(24px, 6vw, 30px) !important;
        font-weight: 900 !important;
        margin-bottom: clamp(4px, 1vh, 6px) !important;
        color: #fff !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
    }
    
    p[data-i18n="contacto.manager"] {
        font-size: clamp(18px, 4vw, 22px) !important;
        font-weight: 800 !important;
        margin-bottom: clamp(8px, 2vh, 10px) !important;
        color: #ff3366 !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
    }
    
    /* Legacy contact styles */
    .contact-item {
        margin-bottom: clamp(4px, 1vh, 6px) !important;
        padding: clamp(4px, 1vw, 6px) !important;
    }
    
    .contact-icon {
        width: clamp(24px, 5vw, 30px) !important;
        height: clamp(24px, 5vw, 30px) !important;
        margin-right: clamp(6px, 2vw, 8px) !important;
    }
}

/* ============================================
   HIGHLIGHTS SECTION UTILITIES
   ============================================ */

/* Main Layout */
.highlights-main-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(10px, 2vw, 16px) !important;
    height: 100% !important;
    overflow-y: auto !important;
    padding-bottom: clamp(80px, 15vh, 120px) !important;
    max-height: calc(100vh - 80px) !important;
}

.highlights-left-section {
    /* Left section styling will use base utilities */
}

.highlights-right-section {
    padding-left: clamp(10px, 2vw, 16px) !important;
    border-left: 1px solid rgba(255, 51, 102, 0.3) !important;
}

/* Highlights List */
.highlights-list {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(3px, 0.8vh, 6px) !important;
}

.highlight-item {
    display: flex !important;
    align-items: flex-start !important;
    padding: clamp(4px, 1vw, 6px) !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(3px) !important;
    border-radius: 5px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.highlight-icon {
    width: clamp(16px, 3vw, 22px) !important;
    height: clamp(16px, 3vw, 22px) !important;
    background-color: rgba(255, 51, 102, 0.2) !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
}

.highlight-icon i {
    color: #ff3366 !important;
    font-size: clamp(7px, 1.2vw, 10px) !important;
}

.highlight-text {
    font-size: clamp(7px, 1.6vw, 10px) !important;
    font-weight: 500 !important;
    line-height: 1.0 !important;
    color: #fff !important;
}

/* Media Grid */
.media-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(6px, 1.5vw, 12px) !important;
    margin-bottom: clamp(6px, 1.2vh, 10px) !important;
}

.media-item {
    position: relative !important;
    aspect-ratio: 1 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
    background-size: cover !important;
    background-position: center !important;
}

.media-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.media-label {
    background: rgba(0,0,0,0.8) !important;
    padding: clamp(1px, 0.4vw, 3px) clamp(6px, 1.5vw, 10px) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    font-size: clamp(6px, 1.2vw, 9px) !important;
    font-weight: 800 !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,1) !important;
    letter-spacing: 0.5px !important;
}

/* Festival Grid */
.festival-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: clamp(3px, 0.8vw, 6px) !important;
}

.festival-image {
    position: relative !important;
    border: 2px solid rgba(255, 51, 102, 0.5) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    aspect-ratio: 3/4 !important;
    background: #000 !important;
    cursor: pointer !important;
}

.festival-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.festival-label {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.9)) !important;
    padding: clamp(2px, 0.5vw, 4px) !important;
    text-align: center !important;
}

.festival-label span {
    color: #fff !important;
    font-size: clamp(5px, 1vw, 8px) !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}

/* Quote Section */
.quote-section {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(6px, 1.5vh, 10px) !important;
}

.quote-card {
    background: linear-gradient(135deg, rgba(255, 51, 102, 0.1), rgba(0, 0, 0, 0.8)) !important;
    backdrop-filter: blur(5px) !important;
    border-left: 4px solid #ff3366 !important;
    border-radius: 8px !important;
    padding: clamp(8px, 2vw, 12px) !important;
    box-shadow: 0 4px 15px rgba(255, 51, 102, 0.2) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    margin-bottom: clamp(6px, 1.5vh, 10px) !important;
}

.quote-text {
    font-size: clamp(9px, 2vw, 13px) !important;
    line-height: 1.3 !important;
    margin-bottom: clamp(6px, 1.2vh, 8px) !important;
    font-style: italic !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.quote-source {
    font-size: clamp(8px, 1.8vw, 11px) !important;
    color: #ff3366 !important;
    text-align: right !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Section Titles */
.highlights-section-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(22px, 4.5vw, 28px) !important;
    font-weight: 700 !important;
    margin-bottom: clamp(6px, 1.2vh, 8px) !important;
    color: #fff !important;
    letter-spacing: 1px !important;
}

.highlights-section-spacing {
    margin-top: clamp(6px, 1.2vh, 10px) !important;
}

/* Background Overlays */
.highlights-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.75) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Text Color Utilities */
.text-primary-accent {
    color: #ff3366 !important;
    font-weight: 700 !important;
}

/* ============================================
   DISCOGRAFÍA SECTION UTILITIES
   ============================================ */

/* Main Layout */
.disco-main-layout {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.disco-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Album Section */
.disco-album-section {
    display: flex !important;
    margin-bottom: clamp(15px, 3vh, 25px) !important;
    align-items: flex-start !important;
}

.album-cover {
    width: clamp(100px, 20vw, 160px) !important;
    height: clamp(100px, 20vw, 160px) !important;
    background: #111 !important;
    border: 2px solid #ff3366 !important;
    border-radius: 8px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-right: clamp(15px, 3vw, 20px) !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
    cursor: pointer !important;
}

.album-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.album-info {
    flex-grow: 0.4 !important;
}

.album-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(20px, 4vw, 28px) !important;
    font-weight: 700 !important;
    margin-bottom: 5px !important;
    color: #fff !important;
    margin-left: 8px !important;
}

.album-year {
    font-size: clamp(12px, 2.5vw, 16px) !important;
    color: #ff3366 !important;
    margin-bottom: clamp(8px, 2vh, 12px) !important;
    margin-left: 8px !important;
}

/* Track Grid */
.tracks-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: clamp(15px, 3vw, 30px) !important;
    row-gap: clamp(2px, 0.5vw, 4px) !important;
    margin-bottom: clamp(8px, 2vh, 12px) !important;
    margin-left: 8px !important;
}

/* Desktop only: reduce gap between track columns */
@media (min-width: 769px) {
    .tracks-grid {
        column-gap: clamp(8px, 2vw, 18px) !important;
    }
}

/* ELIMINADO - Causaba conflictos */

.track-number {
    width: 20px !important;
    color: #ff3366 !important;
    font-weight: 700 !important;
    margin-right: 8px !important;
    font-size: clamp(10px, 2vw, 12px) !important;
}

.track-link {
    font-size: clamp(10px, 2vw, 14px) !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.track-indicator {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #1DB954 !important;
    display: inline-block !important;
}

/* Platform Grid */
.platform-grid {
    display: flex !important;
    gap: clamp(8px, 2vw, 15px) !important;
    flex-wrap: wrap !important;
    margin-left: 8px !important;
}

.platform-button {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 51, 102, 0.2) !important;
    border: 1px solid rgba(255, 51, 102, 0.3) !important;
    padding: clamp(4px, 1vw, 8px) clamp(8px, 2vw, 15px) !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    color: #fff !important;
    font-size: clamp(10px, 2vw, 12px) !important;
}

.platform-button i {
    margin-right: 6px !important;
    color: #ff3366 !important;
}

/* Singles Section */
.disco-singles-section {
   /* margin-bottom: clamp(40px, 8vh, 80px) !important;*/
}

.singles-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(16px, 3.5vw, 20px) !important;
    font-weight: 700 !important;
    margin-bottom: clamp(8px, 2vh, 12px) !important;
    color: #fff !important;
}

.singles-container {
    display: flex !important;
    justify-content: flex-start !important;
    gap: clamp(12px, 3vw, 20px) !important;
    margin-bottom: clamp(20px, 4vh, 30px) !important;
}

.single-card {
    width: clamp(100px, 18vw, 130px) !important;
    aspect-ratio: 1 !important;
    border: 1px solid rgba(255, 51, 102, 0.4) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    cursor: pointer !important;
}

.single-cover {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 2 !important;
    transition: opacity 0.3s ease !important;
}

.single-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.single-card:hover .single-video {
    opacity: 1 !important;
}

.single-info-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%) !important;
    padding: clamp(2px, 0.5vw, 4px) !important;
    z-index: 3 !important;
}

.single-year {
    font-size: clamp(6px, 1.2vw, 8px) !important;
    color: #ff3366 !important;
    margin-bottom: 2px !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
    font-weight: 600 !important;
}

.single-title {
    font-size: clamp(7px, 1.4vw, 9px) !important;
    font-weight: 800 !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9) !important;
    color: #fff !important;
}


/* ============================================
   NAVIGATION SYSTEM UTILITIES
   ============================================ */

/* Main Navigation Container */

/* Legacy Active Class Support - for backward compatibility */
.nav-tab.active {
    background: rgba(255, 51, 102, 0.2) !important;
    border-color: #ff3366 !important;
    color: #ff3366 !important;
}

.nav-main-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(255, 51, 102, 0.3) !important;
}

.nav-tabs-layout {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: clamp(8px, 2vw, 10px) clamp(15px, 4vw, 20px) !important;
    gap: clamp(3px, 1vw, 5px) !important;
    position: relative !important;
}

.nav-tabs-center-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(3px, 1vw, 5px) !important;
    flex: 1 !important;
}

/* Navigation Tab Items */
.nav-item {
    padding: clamp(6px, 1.5vw, 8px) clamp(12px, 3vw, 16px) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 51, 102, 0.3) !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: clamp(10px, 2.5vw, 12px) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    position: relative !important;
}

.nav-tab-active {
    background: rgba(255, 51, 102, 0.2) !important;
    border-color: #ff3366 !important;
    color: #ff3366 !important;
    transform: translateY(-2px) !important;
}

.nav-tab-inactive:hover {
    background: rgba(255, 51, 102, 0.15) !important;
    border-color: rgba(255, 51, 102, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Navigation Icons and Text */
.nav-icon {
    font-size: clamp(12px, 3vw, 14px) !important;
    margin-bottom: 2px !important;
    transition: all 0.3s ease !important;
}

.nav-text {
    font-size: clamp(8px, 2vw, 10px) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Audio Speaker Component */
.audio-speaker-container {
    padding: clamp(8px, 2vw, 10px) clamp(12px, 3vw, 15px) !important;
    margin: 0 2px !important;
    background-color: rgba(255, 51, 102, 0.1) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 51, 102, 0.3) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: clamp(12px, 3vw, 14px) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    position: static !important;
    transform: none !important;
}

.audio-speaker-hover:hover {
    background-color: rgba(255, 51, 102, 0.2) !important;
    border-color: rgba(255, 51, 102, 0.6) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 51, 102, 0.3) !important;
}

.audio-speaker-active {
    background-color: rgba(255, 51, 102, 0.3) !important;
    border-color: rgba(255, 51, 102, 0.8) !important;
    box-shadow: 0 0 15px rgba(255, 51, 102, 0.4) !important;
}

.audio-speaker-icon {
    pointer-events: none !important;
    font-size: clamp(14px, 3.5vw, 16px) !important;
    color: #ff3366 !important;
    transition: all 0.3s ease !important;
}

.audio-speaker-icon-playing {
    color: #fff !important;
    animation: speakerPulse 1.5s ease-in-out infinite !important;
}

/* Language Selector Component */
.language-selector-container,
.language-selector {
    padding: clamp(8px, 2vw, 10px) clamp(12px, 3vw, 15px) !important;
    margin: 0 2px !important;
    background-color: rgba(255, 51, 102, 0.1) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 51, 102, 0.3) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: clamp(12px, 3vw, 14px) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    position: relative !important;
}

.language-selector-hover:hover,
.language-selector:hover {
    background-color: rgba(255, 51, 102, 0.2) !important;
    border-color: rgba(255, 51, 102, 0.6) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 51, 102, 0.3) !important;
}

.language-selector-select {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

.language-selector-icon,
#language-selector .fas.fa-globe,
#globe-icon {
    pointer-events: none !important;
    font-size: clamp(14px, 3.5vw, 16px) !important;
    color: #ff3366 !important;
    transition: all 0.3s ease !important;
}

/* Navigation Effects and Animations */
.nav-tab-effect:before {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #ff3366, transparent) !important;
    transition: left 0.4s !important;
}

.nav-tab-effect:hover:before {
    left: 100% !important;
}

/* Focus and Accessibility States */
.nav-focus:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 51, 102, 0.5) !important;
    border-color: #ff3366 !important;
}

.nav-focus-visible:focus-visible {
    outline: 2px solid #ff3366 !important;
    outline-offset: 2px !important;
}

.nav-focus-hidden:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* ============================================
   MOBILE NAVIGATION OVERRIDES
   ============================================ */
@media (max-width: 768px) {
    .nav-main-container {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 70px !important;
        background: rgba(0, 0, 0, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border: none !important;
        border-top: 1px solid rgba(255, 51, 102, 0.3) !important;
        padding: 10px 0 !important;
        z-index: 9999 !important;
    }
    
    .nav-tabs-layout {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    .nav-tabs-center-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 1px !important;
    }
    
    .nav-item {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 2px !important;
        min-height: 50px !important;
        font-size: clamp(8px, 2.2vw, 11px) !important;
        font-weight: 500 !important;
        text-align: center !important;
        color: rgba(255, 255, 255, 0.8) !important;
        text-decoration: none !important;
        border: none !important;
        transition: all 0.3s ease !important;
        white-space: nowrap !important;
        background: transparent !important;
        position: relative !important;
    }
    
    .nav-icon {
        font-size: 14px !important;
        margin-bottom: 2px !important;
    }
    
    .nav-tab-active {
        color: #ff3366 !important;
        background: transparent !important;
        border: none !important;
        transform: none !important;
    }
    
    .nav-tab-active::before,
    .nav-item:hover::before {
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 20% !important;
        right: 20% !important;
        height: 2px !important;
        background: #ff3366 !important;
    }
    
    .audio-speaker-container,
    .language-selector-container,
    .language-selector {
        padding: 8px 12px !important;
        font-size: 12px !important;
        gap: 4px !important;
    }
    
    .audio-speaker-icon,
    .language-selector-icon {
        font-size: 14px !important;
    }
}

/* ============================================
   MOBILE NAVIGATION TEXT ABBREVIATIONS
   ============================================ */
@media (min-width: 375px) and (max-width: 414px) {
    .nav-item {
        font-size: 0 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }
    
    .nav-icon {
        display: none !important;
    }
    
    .nav-item[data-i18n="navigation.portada"]::after { 
        content: "Main" !important; 
        display: block !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
        text-align: center !important;
    }
    
    .nav-item[data-i18n="navigation.biografia"]::after { 
        content: "Bio" !important; 
        display: block !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
        text-align: center !important;
    }
    
    .nav-item[data-i18n="navigation.discografia"]::after { 
        content: "Discos" !important; 
        display: block !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
        text-align: center !important;
    }
    
    .nav-item[data-i18n="navigation.highlights"]::after { 
        content: "Press" !important; 
        display: block !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
        text-align: center !important;
    }
    
    .nav-item[data-i18n="navigation.material_visual"]::after { 
        content: "Media" !important; 
        display: block !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
        text-align: center !important;
    }
    
    .nav-item[data-i18n="navigation.contacto"]::after { 
        content: "Info" !important; 
        display: block !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
        text-align: center !important;
    }
}

/* ============================================
   SMALL SCREEN NAVIGATION
   ============================================ */
@media (max-width: 374px) {
    .nav-item {
        font-size: 8px !important;
        padding: 4px 1px !important;
    }
    
    .audio-speaker-container,
    .language-selector-container,
    .language-selector {
        padding: 6px 8px !important;
        font-size: 10px !important;
    }
    
    .audio-speaker-icon,
    .language-selector-icon {
        font-size: 12px !important;
    }
}

/* ============================================
   FLOATING BUTTONS SYSTEM UTILITIES
   ============================================ */

/* Developer Badge Floating Button */
.floating-dev-badge {
    position: fixed !important;
    bottom: 15px !important;
    left: 15px !important;
    z-index: 1001 !important;
    opacity: 0.6 !important;
    transition: all 0.3s ease !important;
}

.floating-dev-badge-button {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(255, 51, 102, 0.4) !important;
    border-radius: 20px !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    backdrop-filter: blur(5px) !important;
    position: relative !important;
}

.floating-dev-badge-text {
    color: #ff3366 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Courier New', monospace !important;
}

.floating-dev-tooltip {
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(0) !important;
    background: rgba(0, 0, 0, 0.9) !important;
    color: #fff !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
    pointer-events: none !important;
    border: 1px solid rgba(255, 51, 102, 0.3) !important;
}

.floating-dev-tooltip-arrow {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-top: 6px solid rgba(0, 0, 0, 0.9) !important;
}

/* Export Container Floating Buttons */
.floating-buttons-container {
    position: fixed !important;
    bottom: 15px !important;
    right: 15px !important;
    z-index: 1001 !important;
    display: flex !important;
    gap: clamp(6px, 1.5vw, 8px) !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border-radius: 30px !important;
    padding: clamp(6px, 1.5vw, 8px) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 51, 102, 0.2) !important;
}

.floating-button {
    padding: clamp(6px, 1.5vw, 8px) clamp(10px, 2.5vw, 12px) !important;
    background: rgba(255, 51, 102, 0.15) !important;
    border: 1px solid rgba(255, 51, 102, 0.3) !important;
    border-radius: 20px !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: clamp(10px, 2vw, 11px) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(4px, 1vw, 6px) !important;
}

.floating-button:hover {
    background: rgba(255, 51, 102, 0.4) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 51, 102, 0.3) !important;
    color: #fff !important;
}

.floating-button-icon {
    font-size: clamp(12px, 2.5vw, 14px) !important;
    color: #ff3366 !important;
    transition: all 0.3s ease !important;
}

/* Specific Floating Button Types */
.floating-share {
    /* Uses base .floating-button styles */
}

.floating-download {
    /* Uses base .floating-button styles */
}

.floating-newsletter {
    /* Uses base .floating-button styles */
}

.floating-rider {
    /* Uses base .floating-button styles */
}

/* ============================================
   FLOATING BUTTONS MOBILE OVERRIDES
   ============================================ */
@media (max-width: 768px) {
    .floating-dev-badge {
        bottom: clamp(10px, 2vh, 15px) !important;
        left: clamp(10px, 2vw, 15px) !important;
    }
    
    /* Hide export buttons by default on mobile */
    .floating-buttons-container {
        display: none !important;
    }
    
    .floating-button {
        font-size: clamp(10px, 2.5vw, 12px) !important;
        padding: clamp(10px, 2.5vw, 14px) !important;
        gap: clamp(6px, 1.5vw, 8px) !important;
        justify-content: center !important;
        width: 100% !important;
        border-radius: 12px !important;
        background: rgba(255, 51, 102, 0.2) !important;
        border: 1px solid rgba(255, 51, 102, 0.5) !important;
    }
    
    .floating-button-icon {
        font-size: clamp(10px, 2.2vw, 12px) !important;
    }
    
    .floating-dev-badge-button {
        padding: clamp(4px, 1vw, 6px) clamp(8px, 2vw, 10px) !important;
    }
    
    .floating-dev-badge-text {
        font-size: clamp(10px, 2.2vw, 11px) !important;
    }
    
    .floating-dev-tooltip {
        font-size: clamp(9px, 2vw, 10px) !important;
        padding: clamp(6px, 1.5vw, 8px) clamp(8px, 2vw, 10px) !important;
    }
    
    /* LOGO SATANA SATANA CENTRADO EN MÓVIL */
    #slide-0 .slide-content {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    #slide-0 .glitch {
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    /* CONTACTO MÓVIL - OCULTAR LOGO Y OPTIMIZAR REDES */
    #slide-5 .section-title {
        display: none !important;
    }
    
    #slide-5 .social-networks-grid {
        margin-top: 0 !important;
        padding-top: clamp(0px, 4vh, 30px) !important;
    }
    
    /* OCULTAR ELEMENTOS DEL WEBDEV Y LOGO SATANA SATANA */
    .floating-dev-badge {
        display: none !important;
    }
    
    /* OCULTAR DIV COMPLETO CON GUITARRA Y SATANA SATANA - SELECTOR ESPECÍFICO */
    div[style*="bottom: clamp(50px, 8vh, 70px)"][style*="z-index: 50"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .fas.fa-guitar {
        display: none !important;
    }
    
    span[style*="font-family: 'Bebas Neue'"] {
        display: none !important;
    }
}

/* ============================================
   MATERIAL SECTION UTILITIES
   ============================================ */

/* Main Layout */
.material-main-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(20px, 4vw, 40px) !important;
    align-items: start !important;
    height: 100% !important;
}

.material-left-section {
    padding-right: 0 !important;
}

.material-right-section {
    padding-left: clamp(20px, 4vw, 40px) !important;
    border-left: 1px solid rgba(255, 51, 102, 0.3) !important;
}

/* Background and Overlay */
.material-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(255,51,102,0.1) 30%, rgba(0,0,0,0.5) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Section Titles */
.material-section-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(16px, 3vw, 20px) !important;
    font-weight: 700 !important;
    margin-bottom: clamp(8px, 2vh, 12px) !important;
    color: #fff !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.material-subsection-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(14px, 2.5vw, 16px) !important;
    font-weight: 700 !important;
    margin-bottom: clamp(6px, 1.5vh, 8px) !important;
    margin-top: clamp(15px, 3vh, 20px) !important;
    color: #fff !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

/* Photo Carousel Styles */
.photo-carousel-slide-clickable {
    cursor: pointer !important;
}

/* Video Grid */
.video-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(12px, 2.5vw, 20px) !important;
    width: 100% !important;
    align-items: stretch !important;
    margin-bottom: 8px !important;
}

.video-item {
    background-size: cover !important;
    background-position: center !important;
    backdrop-filter: blur(3px) !important;
    border: 1px solid rgba(255, 51, 102, 0.3) !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 120px !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.video-item-instagram {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/background/BACK-31.webp') !important;
    background-size: cover !important;
    background-position: center !important;
}

.video-item-youtube {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/background/BACK-32.webp') !important;
    background-size: cover !important;
    background-position: center !important;
}

.video-item-icon {
    font-size: 24px !important;
    margin-bottom: 8px !important;
}

.video-item-icon-instagram {
    color: #E4405F !important;
}

.video-item-icon-youtube {
    color: #FF0000 !important;
}

.video-item-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0px !important;
    color: #fff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
    text-align: center !important;
}

/* Visualizers Grid - Note: visualizers-grid class already exists in CSS */
.visualizer-card {
    /* Already defined in existing CSS, so no need to duplicate */
}

/* ============================================
   MOBILE MUSIC ICONS INTEGRATION STYLES
   ============================================ */

/* ESTILOS MEJORADOS PARA ELEMENTOS FLOTANTES EN MOBILE */
@media (max-width: 768px) {
    .audio-speaker-container {
        display: none !important;
    }
    
    #language-selector {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    #language-selector:hover {
        background: transparent !important;
        border: none !important;
        transform: scale(1.15) !important;
        box-shadow: none !important;
    }
    
    #language-selector .fas.fa-globe {
        color: rgba(255, 255, 255, 0.95) !important;
        font-size: 20px !important;
        text-shadow: 
            0 0 8px rgba(0, 0, 0, 0.8),
            0 2px 4px rgba(0, 0, 0, 0.6),
            0 0 3px rgba(255, 51, 102, 0.4) !important;
        transition: all 0.3s ease !important;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
        text-shadow: 0 0 4px rgba(255, 51, 102, 0.3) !important;
    }
    
    #language-selector:hover .fas.fa-globe {
        color: #ff3366 !important;
        text-shadow: 
            0 0 12px rgba(255, 51, 102, 0.8),
            0 2px 6px rgba(0, 0, 0, 0.8),
            0 0 6px rgba(255, 51, 102, 0.6) !important;
        transform: scale(1.05) !important;
    }
    
    /* INTEGRANTES: CÍRCULOS GRANDES CON NOMBRE E INSTRUMENTO */
    .member-grid {
        grid-template-columns: 1fr !important;
        gap: clamp(20px, 5vw, 30px) !important;
        padding: clamp(12px, 3vw, 20px) !important;
        padding-bottom: clamp(80px, 15vw, 120px) !important;
    }
    
    .member-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: clamp(20px, 5vw, 30px) !important;
        background: transparent !important;
        border: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .member-card:hover {
        transform: translateY(-3px) scale(1.05) !important;
    }
    
    .member-avatar {
        width: clamp(180px, 35vw, 220px) !important;
        height: clamp(180px, 35vw, 220px) !important;
        margin: 0 0 clamp(16px, 4vw, 20px) 0 !important;
        border: 5px solid rgba(255, 51, 102, 0.7) !important;
        box-shadow: 0 8px 25px rgba(255, 51, 102, 0.4), 0 0 40px rgba(0, 0, 0, 0.6) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .member-card:hover .member-avatar {
        border-color: rgba(255, 51, 102, 0.9) !important;
        box-shadow: 0 6px 20px rgba(255, 51, 102, 0.4), 0 0 25px rgba(0, 0, 0, 0.6) !important;
        transform: scale(1.08) !important;
    }
    
    .member-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .member-name {
        font-size: clamp(24px, 5.5vw, 32px) !important;
        font-weight: 800 !important;
        color: #fff !important;
        text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8) !important;
        margin-bottom: 8px !important;
        line-height: 1.1 !important;
    }
    
    .member-role {
        font-size: clamp(18px, 4vw, 24px) !important;
        color: rgba(255, 51, 102, 0.9) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important;
    }
    
    .member-link:hover .member-name {
        color: #ff3366 !important;
        text-shadow: 0 0 10px rgba(255, 51, 102, 0.6) !important;
    }
    
    .member-link:hover .member-role {
        color: #fff !important;
        text-shadow: 0 0 8px rgba(255, 51, 102, 0.4) !important;
    }
    
    /* POPUP DE INTEGRANTES ADAPTADO PARA MOBILE */
    .member-popup {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        background: rgba(0, 0, 0, 0.85) !important;
        backdrop-filter: blur(15px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: clamp(20px, 5vw, 30px) !important;
    }
    
    .member-popup-content {
        position: relative !important;
        top: unset !important;
        left: unset !important;
        transform: none !important;
        width: clamp(280px, 70vw, 350px) !important;
        height: clamp(280px, 70vw, 350px) !important;
        max-width: 90vw !important;
        max-height: 90vh !important;
    }
    
    .member-popup-content img {
        border-radius: 16px !important;
        border: 4px solid rgba(255, 51, 102, 0.8) !important;
        box-shadow: 
            0 20px 50px rgba(255, 51, 102, 0.3),
            0 0 30px rgba(0, 0, 0, 0.6) !important;
    }
    
    /* Agregar botón de cerrar visible en mobile */
    .member-popup::after {
        content: '✕' !important;
        position: absolute !important;
        top: clamp(15px, 4vw, 25px) !important;
        right: clamp(15px, 4vw, 25px) !important;
        width: clamp(40px, 8vw, 50px) !important;
        height: clamp(40px, 8vw, 50px) !important;
        background: rgba(0, 0, 0, 0.7) !important;
        color: #fff !important;
        border: 2px solid rgba(255, 51, 102, 0.6) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: clamp(16px, 3.5vw, 20px) !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        z-index: 1001 !important;
        backdrop-filter: blur(10px) !important;
        transition: all 0.3s ease !important;
    }
    
    .member-popup:hover::after {
        background: rgba(255, 51, 102, 0.8) !important;
        border-color: #fff !important;
        transform: scale(1.1) !important;
    }
    
    /* ============================================
       DISCOGRAFÍA OPTIMIZADA PARA MOBILE
       ============================================ */
    
    /* Add mobile section title */
    #slide-2 .slide-content > div:first-child::before {
        content: "DISCOGRAFÍA";
        display: block !important;
        text-align: center !important;
        font-family: 'Bebas Neue', sans-serif !important;
        font-size: clamp(28px, 6vw, 36px) !important;
        font-weight: 700 !important;
        color: #fff !important;
        margin-bottom: clamp(20px, 4vh, 30px) !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
    }
    
    /* Add "ALBUM COMPLETO" subtitle before album info */
    .disco-album-section::before {
        content: "SASA 2025";
        display: block !important;
        text-align: center !important;
        font-family: 'Bebas Neue', sans-serif !important;
        font-size: clamp(22px, 4.5vw, 28px) !important;
        font-weight: 600 !important;
        color: #ff3366 !important;
        margin-bottom: clamp(15px, 3vh, 20px) !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
    }

    .disco-album-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: clamp(16px, 4vw, 20px) !important;
        margin-bottom: clamp(20px, 5vh, 30px) !important;
    }
    
    /* HIDE ONLY the large album cover - keep tracks and platform buttons */
    .disco-album-section .album-cover {
        display: none !important; /* HIDE: Only the large album image */
    }
    
    /* Cover más grande y prominente */
    .album-cover {
        width: clamp(200px, 50vw, 280px) !important;
        height: clamp(200px, 50vw, 280px) !important;
        margin: 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 
            0 15px 35px rgba(255, 51, 102, 0.25),
            0 0 25px rgba(0, 0, 0, 0.4) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: block !important;
    }
    
    .album-cover img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .album-cover:hover {
        transform: scale(1.03) !important;
        box-shadow: 
            0 20px 45px rgba(255, 51, 102, 0.35),
            0 0 35px rgba(0, 0, 0, 0.5) !important;
    }
    
    /* Info del álbum centrada */
    .album-info {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 clamp(12px, 3vw, 20px) !important;
    }
    
    .album-title {
        font-size: clamp(18px, 4vw, 24px) !important;
        margin-bottom: 8px !important;
        text-align: center !important;
    }
    
    .album-year {
        font-size: clamp(16px, 3.5vw, 20px) !important;
        margin-bottom: clamp(20px, 5vw, 24px) !important;
        text-align: center !important;
    }
    
    /* Tracks estilo Deploy-12-copia: Grid responsive */
    .tracks-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* 1 columna en móvil para que se vean las imágenes */
        gap: clamp(8px, 2vw, 12px) !important;
        margin: 0 0 clamp(8px, 2vh, 12px) 8px !important;
        justify-items: center !important; /* Centrar los boxes */
    }
    
    /* RESET TOTAL - Eliminar todos los estilos conflictivos */
    #slide-2 .track-preview,
    #slide-2 .track-item {
        all: unset !important;
        display: block !important;
    }
    
    /* TRACKS LIMPIOS - SIN OVERLAYS MOLESTOS */
    #slide-2 .tracks-grid .track-preview {
        display: block !important;
        padding: 0 !important;
        border-radius: 8px !important;
        margin: 0 0 clamp(8px, 2vw, 12px) 0 !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        border: none !important; /* Sin borde molesto */
        height: clamp(120px, 28vw, 160px) !important;
        width: clamp(200px, 60vw, 280px) !important;
        position: relative !important;
        overflow: hidden !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; /* Sombra en lugar de borde */
    }
    
    /* OVERLAY ELIMINADO - Sin elementos superpuestos molestos */
    
    /* Hover effect */
    #slide-2 .tracks-grid .track-preview:hover {
        border-color: rgba(255, 51, 102, 0.8) !important;
        transform: scale(1.02) !important;
        box-shadow: 0 4px 15px rgba(255, 51, 102, 0.3) !important;
    }
    
    /* Números de track específicos - OCULTOS EN MÓVIL */
    #slide-2 .tracks-grid .track-preview .track-number {
        display: none !important;
    }
    
    /* RESET COMPLETO DE TRACK-LINK PARA MÓVIL */
    .track-link {
        all: unset !important;
    }
    
    /* Links de track específicos - NOMBRES ABAJO DEL VIDEO */
    #slide-2 .tracks-grid .track-preview .track-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: static !important;
        background: none !important;
        color: #fff !important;
        padding: 8px !important;
        margin: 8px auto 0 auto !important;
        border: none !important;
        border-radius: 0 !important;
        font-size: clamp(13px, 3vw, 15px) !important;
        font-weight: 800 !important;
        text-align: center !important;
        text-decoration: none !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.95), -1px -1px 2px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.8) !important;
        z-index: 10 !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        min-height: 30px !important;
    }
    
    /* ASEGURAR QUE EL SPAN CON EL NOMBRE SEA VISIBLE */
    #slide-2 .tracks-grid .track-preview .track-link span[data-i18n] {
        display: inline !important;
        color: #fff !important;
        font-size: clamp(8px, 2vw, 10px) !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        text-align: center !important;
        background: rgba(0, 0, 0, 0.8) !important;
        padding: clamp(4px, 1vw, 6px) clamp(6px, 1.5vw, 8px) !important;
        border-radius: 4px !important;
        backdrop-filter: blur(4px) !important;
        text-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    #slide-2 .tracks-grid .track-preview .track-link:hover {
        color: #fff !important;
        text-shadow: 2px 2px 6px rgba(0, 0, 0, 1), 0 0 12px rgba(255, 51, 102, 0.5) !important;
    }
    
    /* Indicador de Spotify OCULTO EN MÓVIL */
    #slide-2 .tracks-grid .track-preview .track-indicator {
        display: none !important;
    }
    
    /* IMÁGENES DE FONDO PARA CADA TRACK */
    #slide-2 .track-preview[data-track="ya-no-hay-tiempo"] {
        background-image: url("../img/singles/ya-no-hay-tiempo.webp") !important;
    }
    #slide-2 .track-preview[data-track="metal"] {
        background-image: url("../img/singles/metal.webp") !important;
    }
    #slide-2 .track-preview[data-track="dorothy"] {
        background-image: url("../img/singles/dorothy.webp") !important;
    }
    #slide-2 .track-preview[data-track="la-cumbia-del-infierno"] {
        background-image: url("../img/singles/la-cumbia-del-infierno.webp") !important;
    }
    #slide-2 .track-preview[data-track="sputnik-vida"] {
        background-image: url("../img/singles/sputnik-vida.webp") !important;
    }
    #slide-2 .track-preview[data-track="los-polvorines"] {
        background-image: url("../img/singles/los-polvorines.webp") !important;
    }
    #slide-2 .track-preview[data-track="satana-anton-rafael-benitez"] {
        background-image: url("../img/singles/satana-anton-rafael-benitez.webp") !important;
    }
    #slide-2 .track-preview[data-track="proteccion-uv"] {
        background-image: url("../img/singles/proteccion-uv.webp") !important;
    }
    
    /* HABILITAR POPUPS EN MÓVIL */
    .lyrics-popup,
    .track-popup {
        display: block !important;
        pointer-events: auto !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90vw !important;
        max-width: 400px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        z-index: 9999 !important;
        padding: 20px !important;
        background: rgba(0, 0, 0, 0.95) !important;
        border: 2px solid rgba(255, 51, 102, 0.5) !important;
        border-radius: 10px !important;
    }
    
    /* VIDEOS DE SINGLES PREVIOS - ASEGURAR QUE SE VEAN EN MÓVIL */
    #slide-2 .video-hover-unmute {
        display: block !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* QUITAR LÍNEA ROJA DE INTEGRANTES EN BIOGRAFÍA MÓVIL */
    .bio-right-section,
    .bio-right-section *,
    .member-grid,
    .member-grid * {
        border-left: none !important;
    }
    
    /* RESET TOTAL DE PLATFORM-BUTTON PARA MÓVIL */
    .platform-button {
        all: unset !important;
        box-sizing: border-box !important;
    }
    
    /* ANULAR LA REGLA ESPECÍFICA DE SPOTIFY EN DISCOGRAFIA.CSS */
    #slide-2 a[href*="spotify"].platform-button {
        display: flex !important;
        width: clamp(80px, 22vw, 110px) !important;
        height: clamp(32px, 8vw, 40px) !important;
        margin: 0 !important;
        border: 1px solid rgba(255, 51, 102, 0.3) !important;
        border-radius: 20px !important;
        overflow: visible !important;
        box-shadow: none !important;
    }
    
    /* CONTENEDOR DE BOTONES DE PLATAFORMAS - CENTRADO EN MÓVIL */
    #slide-2 .platform-grid {
        margin-top: clamp(25px, 5vh, 35px) !important;
        margin-bottom: clamp(30px, 6vh, 40px) !important;
    }

    /* BOTONES DE PLATAFORMAS - MISMO TAMAÑO EN MÓVIL */
    #slide-2 .platform-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: clamp(80px, 22vw, 110px) !important;
        height: clamp(32px, 8vw, 40px) !important;
        padding: clamp(6px, 1.5vw, 8px) clamp(10px, 2.5vw, 14px) !important;
        font-size: clamp(11px, 2.5vw, 13px) !important;
        font-weight: 600 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        background: rgba(255, 51, 102, 0.2) !important;
        border: 1px solid rgba(255, 51, 102, 0.3) !important;
        border-radius: 20px !important;
        color: #fff !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    #slide-2 .platform-button i {
        margin-right: clamp(4px, 1vw, 6px) !important;
        color: #ff3366 !important;
        font-size: clamp(12px, 2.8vw, 14px) !important;
    }
    
    #slide-2 .video-hover-unmute .cover-image {
        display: block !important;
        opacity: 1 !important;
        z-index: 2 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    #slide-2 .video-hover-unmute video {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        opacity: 0 !important;
        z-index: 1 !important;
    }
    
    /* Platform buttons centrados y más grandes */
    .platform-grid {
        justify-content: center !important;
        gap: clamp(10px, 3vw, 16px) !important;
        margin: clamp(20px, 4vh, 28px) 0 clamp(12px, 3vh, 16px) 0 !important;
        padding: 0 clamp(12px, 3vw, 20px) !important;
    }
    
    .platform-button {
        padding: clamp(10px, 2.5vw, 14px) clamp(16px, 4vw, 20px) !important;
        font-size: clamp(14px, 3vw, 16px) !important;
        min-height: 44px !important;
        border-radius: 10px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .platform-button:hover {
        transform: translateY(-2px) scale(1.03) !important;
        box-shadow: 0 6px 16px rgba(255, 51, 102, 0.25) !important;
    }
    
    .platform-button i {
        font-size: clamp(16px, 3.5vw, 20px) !important;
        margin-right: clamp(8px, 2vw, 10px) !important;
    }
    
    /* ============================================
       DESHABILITAR HOVER EN MOBILE PARA POPUPS
       ============================================ */
    
    /* Deshabilitar eventos hover en mobile para member cards */
    .member-card {
        pointer-events: auto !important;
    }
    
    /* En mobile, solo permitir click events, no hover */
    .member-card:hover {
        /* Anular cualquier efecto hover en mobile */
        transform: none !important;
    }
    
    /* Deshabilitar hover events para member avatars en mobile */
    .member-avatar:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(255, 51, 102, 0.2) !important;
    }
    
    /* ============================================
       TRACK PREVIEWS FUNCIONANDO EN MOBILE
       ============================================ */
    
    /* Asegurar que los track previews sean visibles y funcionales */
    .track-preview {
        position: relative !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
    }
    
    .track-preview:active {
        transform: translateY(1px) !important;
        background: rgba(0, 0, 0, 0.4) !important;
        border-color: rgba(255, 51, 102, 0.3) !important;
    }
    
    /* ELIMINADO - ::after causaba overlays extra */
    
    /* Mejorar la visibilidad del track indicator */
    .track-indicator {
        background: rgba(255, 51, 102, 0.8) !important;
        box-shadow: 0 0 4px rgba(255, 51, 102, 0.4) !important;
    }
}