/* Estilo del Título Principal */
    .section-title { 
        text-align: center; 
        font-family: system-ui, -apple-system, sans-serif; 
        font-size: 3rem; 
        font-weight: 900;
        letter-spacing: 4px;
        margin: 50px 0 10px 0; 
        color: #fff; 
        text-transform: uppercase;
    }

    .section-title::after {
        content: '';
        display: block;
        width: 50px;
        height: 4px;
        background: #ff3333;
        margin: 12px auto 35px auto;
        border-radius: 2px;
        box-shadow: 0 0 12px rgba(255, 51, 51, 0.6);
    }

    /* Contenedor del Grid */
    .pro-team-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 25px;
        max-width: 1300px;
        margin: 0 auto;
        padding: 0 20px 80px 20px;
    }

    /* Tarjeta Individual Interactiva */
    .artist-card {
        background: linear-gradient(145deg, #121212, #080808);
        border-radius: 16px;
        padding: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        display: flex;
        flex-direction: column;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        cursor: pointer;
    }
    
    .artist-card:hover, .artist-card:active { 
        transform: translateY(-8px); 
        border-color: #ff3333; 
        box-shadow: 0 15px 35px rgba(255, 51, 51, 0.25);
        background: linear-gradient(145deg, #181818, #0c0c0c);
    }

    /* Contenedor de la Imagen */
    .artist-image-wrap { 
        width: 100%; 
        aspect-ratio: 3/4; 
        overflow: hidden; 
        border-radius: 12px; 
        background: #151515; 
        position: relative;
    }

    .artist-image-wrap img { 
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
        opacity: 0; 
        transition: opacity 0.6s ease-in-out, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
    }
    
    .artist-card:hover .artist-image-wrap img {
        transform: scale(1.08);
    }

    .artist-image-wrap img.loaded { opacity: 1; }

    /* Contenido de texto inferior */
    .card-content { 
        padding: 14px 6px 6px 6px; 
        display: flex;
        flex-direction: column;
        gap: 6px;
        text-align: left;
    }

    /* Fila de etiquetas */
    .card-meta {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    /* Insignia de Ubicación */
    .artist-location {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        padding: 2px 8px;
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 1px;
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        text-transform: uppercase;
    }

    /* --- PALETA DE COLORES DE EQUIPOS --- */

    /* IMPERIAL: Dorado, Negro y Blanco */
    .badge-imperial {
        background: rgba(0, 0, 0, 0.9);
        color: #d4af37;
        padding: 2px 8px;
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 1.2px;
        border-radius: 4px;
        border: 1px solid #d4af37;
        text-transform: uppercase;
    }

    /* IMPERIAL CÁNULA: Azul Claro */
    .badge-imperial-canula {
        background: rgba(0, 162, 255, 0.2);
        color: #38bdf8;
        padding: 2px 8px;
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 1.2px;
        border-radius: 4px;
        border: 1px solid rgba(56, 189, 248, 0.4);
        text-transform: uppercase;
    }

    /* ZITA: Rojo */
    .badge-zita {
        background: rgba(230, 0, 0, 0.2);
        color: #ff3333;
        padding: 2px 8px;
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 1px;
        border-radius: 4px;
        border: 1px solid rgba(255, 51, 51, 0.4);
        text-transform: uppercase;
    }

    /* MARTE: Verde */
    .badge-marte {
        background: rgba(0, 200, 80, 0.2);
        color: #00e676;
        padding: 2px 8px;
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 1px;
        border-radius: 4px;
        border: 1px solid rgba(0, 230, 118, 0.4);
        text-transform: uppercase;
    }

    /* VIXER: Verde más oscuro */
    .badge-vixer {
        background: rgba(10, 80, 40, 0.4);
        color: #2ecc71;
        padding: 2px 8px;
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 1px;
        border-radius: 4px;
        border: 1px solid rgba(46, 204, 113, 0.4);
        text-transform: uppercase;
    }

    /* VANDAL: Amarillo con fondo rojo */
    .badge-vandal {
        background: #cc0000;
        color: #ffeb3b;
        padding: 2px 8px;
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 1px;
        border-radius: 4px;
        border: 1px solid #ffeb3b;
        text-transform: uppercase;
    }

    /* Protec: Azul */
    .badge-protec {
        background: rgba(0, 102, 255, 0.2);
        color: #3399ff;
        padding: 2px 8px;
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 1px;
        border-radius: 4px;
        border: 1px solid rgba(51, 153, 255, 0.4);
        text-transform: uppercase;
    }
    
    .artist-name { 
        font-size: 1.1rem; 
        font-weight: 800; 
        margin: 2px 0 0 0; 
        color: #fff !important; 
        letter-spacing: 0.3px;
    }
    
    .artist-name a { 
        color: #fff !important; 
        text-icon: none; 
        text-decoration: none; 
        transition: color 0.2s ease;
    }
    
    .artist-name a:hover {
        color: #ff3333 !important;
    }
    
    .artist-social { 
        font-size: 0.8rem; 
        color: #999 !important; 
        margin: 0; 
        font-weight: 500;
    }
    
    .artist-social a { 
        color: #aaa !important; 
        text-decoration: none; 
        transition: color 0.2s ease;
    }
    
    .artist-social a:hover { 
        color: #fff !important; 
    }

    /* Adaptación responsiva móvil a 2 columnas */
    @media (max-width: 600px) {
        .pro-team-container { 
            grid-template-columns: repeat(2, 1fr);
            gap: 12px; 
            padding: 0 10px 50px 10px;
        }
        .section-title {
            font-size: 2.2rem;
            margin: 30px 0 10px 0;
        }
        .artist-card {
            padding: 8px;
        }
    }