/* ======== Estilos Generales ======== */
.team {
    padding: 50px 20px;
    text-align: center;
    background-color: white;
}

.section-title {
    font-size: clamp(24px, 3vw, 32px);
    font-family: 'Poppins', sans-serif; /* Misma tipografía */ 
    color: #003366;
    margin-bottom: 10px;
}

.section-subtitle {
    font-size: clamp(16px, 2vw, 20px);
    color: black;
    margin-bottom: 30px;
}

/* ======== Contenedor del Swiper ======== */
.swiper {
    width: 100%;
    padding: 20px 0;
}

.swiper-slide {
    display: flex;
    justify-content: center;
}

/* ======== Tarjeta del Equipo ======== */
.card {
    background: white;
    border-radius: 15px;
    padding: clamp(12px, 2vw, 20px); /* Ajusta el padding según pantalla */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: clamp(250px, 35vw, 320px); /* Se ajusta sin desbordarse */
}

/* ======== Foto de perfil ======== */
.card-photo img {
    width: clamp(70px, 12vw, 130px);
    height: clamp(80px, 12vw, 130px);
    border-radius: 0%;
    object-fit: 100%;
    margin-bottom: 10px;
}

/* ======== Contenido ======== */
.card-content h3 {
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    color: #003366;
    font-weight: bold;
    margin-bottom: 5px;
}

.card-content p {
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    color: black;
    margin-bottom: 10px;
}

/* ======== Botón de LinkedIn ======== */
.linkedin-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #0077b5;
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none;
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    font-weight: bold;
    transition: background 0.3s;
}

.linkedin-link:hover {
    background-color: #005582;
}

/* ======== Estilos de Swiper ======== 
.swiper-button-prev, .swiper-button-next {
    color: #00509e;
}

.swiper-pagination-bullet-active {
    background: #00509e;
}
*/
/* ======== RESPONSIVIDAD ======== */

/* 🌍 Escritorio grande (más de 1180px): usa GRID para mejor alineación */
@media screen and (min-width: 1080px) {
    .team-swiper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
        justify-content: center;
        align-items: center;
    }
    .swiper-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* 📱 Tablets y móviles grandes (hasta 1180px) */
@media screen and (max-width:890px) {
    .team-swiper {
        max-width: 95%;
    }
}

/* 📱 Móviles pequeños (hasta 768px) */
@media screen and (max-width:768px) {
        /* 1. Asegurar que el contenedor del Swiper ocupe todo el ancho */
        .team-swiper {
          width: 100% !important;
          max-width: 100% !important;
          display: block; /* Evita grid o display: flex que pueda encoger */
          padding: 0;     /* Ajusta si quieres un poco de espacio */
          margin: 0 auto;
        }
      
        /* 2. Asegurar que el wrapper y cada slide también se expandan */
        .swiper-wrapper {
          width: 100% !important;
          max-width: 100% !important;
          display: flex; 
          flex-wrap: nowrap; /* O wrap si quieres que se partan en varias líneas */
          justify-content: center;
          align-items: center;
        }
      
        .swiper-slide {
          width: 100% !important; 
          max-width: 100% !important;
          display: flex;
          justify-content: center;
          margin: 0; 
        }
      
        /* 3. Hacer la tarjeta más ancha y centrada */
        .card {
          width: 90% !important;    /* Para que ocupe el 90% del ancho del slide */
          max-width: none !important;
          margin: 0 auto;
          padding: 10px;
        }
      
        /* 4. Centrar la imagen dentro de .card-photo */
        .card-photo {
          display: flex;
          justify-content: center;  /* Centra horizontalmente */
          align-items: center;      /* Centra verticalmente si fijas altura */
          width: auto;             /* Quita clamps aquí si no quieres recortar */
          height: auto;
          overflow: hidden;        /* Solo si quieres recortar sobrantes */
          border-radius: 10px;
          margin: 0 auto;          /* Centra el contenedor de la imagen */
        }
      
        /* 5. Ajustar la imagen sin deformarla */
        .card-photo img {
          display: block;
          width: clamp(70px, 40vw, 130px);  /* Ajusta a tu gusto */
          height: auto;                    /* Evita forzar altura */
          object-fit: cover;               /* Recorta sin deformar */
          margin: 0 auto;
        }
      
}