/* ==========================================================================
   SECCIÓN NUESTRO EQUIPO (TECNISOLVERS) - MODIFICADO CON ALINEACIÓN EN FLEX
   ========================================================================== */
.ps-team-section {
    padding: 32px 0;
    background-color: #f0f3f5;
}

.ps-team-title {
    text-align: center;
    font-size: 2.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    color: #000;
    margin-bottom: 116px; /* Compensa la salida del avatar flotante */
}

.ps-team-title span {
    color: #133f93;
}

/* Contenedor Grid */
.ps-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 80px 40px;
    max-width: 877px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Tarjeta Individual */
.ps-team-card {
    background: #fff;
    border: 2px solid #000;
    border-radius: 24px;
    position: relative;
    padding: 100px 30px 30px 30px;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Flexbox añadido para controlar la altura interna */
    display: flex;
    flex-direction: column;
}

/* Animación sutil Hover */
.ps-team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Posicionamiento del Avatar flotante */
.ps-team-avatar-wrapper {
    position: absolute;
    top: -75px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
}

.ps-team-avatar {
    width: 108%;
    height: 108%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #000;
    background-color: #fff;
}

/* Contenedor interno del contenido */
.ps-team-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Hace que este bloque ocupe todo el espacio disponible */
}

/* Textos e Información */
.ps-team-name {
    font-size: 24px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: #000;
    margin-bottom: 8px;
}

.ps-team-role {
    font-size: 1.1rem;
    font-family: 'Inter', sans-serif;
    color: #3a414b;
    margin-bottom: 25px;
}

.ps-team-skills-title {
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: #000;
    text-align: left;
    margin-bottom: 12px;
    margin-top: -1px;
}

/* Contenedor de Etiquetas */
.ps-team-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}

.ps-skill-badge {
    background-color: #e5e7eb;
    color: #000;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
    font-family: 'Inter', sans-serif;
}

/* Efecto de color reactivo en las especialidades */
.ps-team-card:hover .ps-skill-badge {
    background-color: #dbeafe;
}

/* Iconos de Redes Sociales */
.ps-team-social {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-top: auto; /* MÁGIA: Empuja los iconos al fondo alineándolos horizontalmente */
}

.ps-social-icon {
    font-size: 20px;
    transition: transform 0.2s ease;
    text-decoration: none;
}

.ps-social-icon:hover {
    transform: scale(1.15);
}

.ps-social-icon.whatsapp { color: #25D366; }
.ps-social-icon.instagram { color: #E1306C; }


/* ==========================================================================
   CARRUSEL RESPONSIVO CON DESPLAZAMIENTO AUTOMÁTICO (CSS PURO)
   ========================================================================== */

/* 1. Definimos la animación de desplazamiento para 2 o 3 tarjetas en bucle */
@keyframes autoCarousel {
    0%, 45% {
        transform: translateX(0); /* Muestra Tarjeta 1 */
    }
    55%, 100% {
        transform: translateX(calc(-100% - 30px)); /* Muestra Tarjeta 2 y ahí reinicia */
    }
}

@media (max-width: 768px) {
    .ps-team-title {
        font-size: 2rem;
        margin-bottom: 90px;
    }

    .ps-team-grid {
        display: flex !important;
        flex-direction: row;
        /* Cambiamos overflow-x a hidden para que la animación automática controle el flujo sin saltos */
        overflow-x: hidden; 
        gap: 30px; 
        padding: 74px 24px 54px 22px;
        margin: -63px auto;
        max-width: 100%;
    }

    .ps-team-card {
        /* Para que la animación matemática sea exacta, cada tarjeta ocupará el 100% 
           del contenedor disponible restando el padding lateral */
        flex: 0 0 calc(100% - 8px); 
        max-width: 100%;
        margin-top: -4; 
        padding: 90px 20px 25px 20px;
        box-sizing: border-box;

        /* ASIGNACIÓN DE LA ANIMACIÓN: 
           Mueve las tarjetas automáticamente cada 9 segundos en bucle infinito */
        animation: autoCarousel 9s ease-in-out infinite;
    }

    /* Pausa la animación automáticamente cuando el usuario mantiene presionada la tarjeta */
    .ps-team-grid:active .ps-team-card,
    .ps-team-card:hover {
        animation-play-state: paused;
    }
}

/* Ajustes tipográficos finos para pantallas muy pequeñas */
@media (max-width: 400px) {
    .ps-team-title {
        font-size: 1.7rem;
    }
}