/* ==========================================================================
       1. RESETEO, OPTIMIZACIÓN Y COMPATIBILIDAD GLOBAL
       ========================================================================== */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html, body {
        background-color: #000000 !important; /* Fuerza fondo negro plano compatible */
        color: #ffffff;
        font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif; /* Fuentes del sistema */
        overflow-x: hidden;
        text-rendering: optimizeSpeed;
        -webkit-font-smoothing: antialiased; /* Suavizado en Safari/Mac */
        -moz-osx-font-smoothing: grayscale;
    }

    /* ==========================================================================
       2. PORTADA BANNER
       ========================================================================== */
    .hero-banner-fix {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        display: block !important;
        margin-top: -10px !important; 
        margin-bottom: 20px;
        min-height: 200px;
        background: #1a1a1a;
    }

    .hero-banner-fix img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* ==========================================================================
       3. TÍTULO SECCIÓN
       ========================================================================== */
    .section-title {
        text-align: center;
        font-size: 42px;
        font-weight: bold;
        font-style: italic;
        margin-bottom: 40px;
        color: #ffffff;
        text-transform: uppercase;
    }

    /* ==========================================================================
       4. CUADRÍCULA COMPATIBLE (FLEXBOX)
       ========================================================================== */
    .pro-team-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; /* Soporte para Flexbox estándar e histórico */
        -webkit-box-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; 
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center; 
        max-width: 1200px;
        margin: 0 auto;
        gap: 20px; 
        padding: 0 20px 40px 20px;
    }

    .artist-card {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1; 
        min-width: 200px; 
        max-width: 220px; 
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; 
        margin-bottom: 30px;
        
        /* Transición suave de carga estándar (Reemplazo compatible de View-Timeline) */
        opacity: 1;
        -webkit-transition: opacity 0.4s ease;
        transition: opacity 0.4s ease;
    }

    .artist-image-wrap {
        width: 100%;
        height: 300px; 
        margin-bottom: 20px;
        overflow: hidden; 
        border-radius: 15px; 
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
        background: #1a1a1a;
    }

    .artist-image-wrap img {
        width: 100%;
        height: 100%; 
        object-fit: cover; 
        display: block;
        -webkit-transition: -webkit-transform 0.3s ease;
        transition: -webkit-transform 0.3s ease;
        transition: transform 0.3s ease;
    }

    .artist-card:hover .artist-image-wrap img {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }

    /* ==========================================================================
       5. HOVER INTERACTIVO DEL NOMBRE (CHIINO SOER)
       ========================================================================== */
    .artist-name {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
        color: #ffffff;
    }

    /* Asegura compatibilidad total con enlaces dentro del h1/p */
    .artist-name a {
        color: #ffffff !important;
        text-decoration: none !important;
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .artist-name a:hover {
        color: #ff3333 !important; /* Rojo corporativo */
        text-decoration: underline !important;
    }

    .artist-team {
        font-size: 14px;
        color: #aaaaaa;
        text-transform: uppercase;
    }

    .artist-social a {
        font-size: 14px;
        color: #ffffff;
        text-decoration: none;
        opacity: 0.8;
    }

    .artist-social a:hover {
        opacity: 1;
        text-decoration: underline;
    }

    /* Media Queries con soporte móvil absoluto */
    @media (max-width: 768px) {
        .section-title { font-size: 30px; }
        .artist-card { min-width: 140px; -webkit-box-flex: 1; -ms-flex: 1 1 40%; flex: 1 1 40%; }
        .artist-image-wrap { height: 200px; }
    }