/* EQUIPO */

.presentacion {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    gap: 1.25rem;
    margin: 1.25rem;
}

.animar.visible {
    opacity: 1;
}



@media (max-width: 40rem) { 
    .presentacion {
        flex-direction: column;
        align-items: center; 
    }

    .tarjeta-presentacion {
        width: 100%;        

    }
}

.tarjeta-presentacion {
    width: 18.75rem;
    max-width: 100%;
    padding: 0.75rem;
    gap: 0.5rem;

    align-items: center;
    justify-items: center;

    display: flex;
    flex-direction: column;
    position: relative;

    border: 1px solid var(--color-principal);
    background-color: #181919;
    border-radius: 1rem;

    transition: 
        transform 0.3s ease,  
        box-shadow 0.3s ease,  
        color 0.3s ease;       

}

.red {
    width: 2rem;
    height: 2rem;
    fill: var(--color-texto);
}


.foto-perfil {
    width: 100%;
    max-width: 17rem;
    height: auto;
    margin: 0.5rem 0;
    object-fit: cover;
    
    border: 1px solid var(--color-principal);
}

.info-personal {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
}

.datos {
    margin: 0.5rem 0 ;
}

.integrante {
    color: var(--color-texto);
    font-weight: 700;
    font-size: 1.5rem;
}
.rol {
    font-size: 1.1rem;
    
    font-weight: 500;
    color: #c3c3c3;
}

.presentacion .tarjeta-presentacion:hover {
    transform: scale(1.1);
    z-index: 2;
    box-shadow:
        0 0 20px var(--color-principal),
        0 0.625rem 30px rgba(0, 0, 0, 0.8);
        z-index: 1000;
        color: var(--color-principal);
}



.presentacion:hover > .tarjeta-presentacion:not(:hover){
    filter: blur(10px);
    transform: scale(0.9);
}

.red:hover {
    fill: var(--color-principal);
}

@keyframes slideIn {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.box:nth-child(1) { animation-delay: 0s; }
.box:nth-child(2) { animation-delay: 0.1s; }
.box:nth-child(3) { animation-delay: 0.2s; }
.box:nth-child(4) { animation-delay: 0.3s; }
.box:nth-child(5) { animation-delay: 0.4s; }
.box:nth-child(6) { animation-delay: 0.5s; }