/* --- Grid de 5 columnas para los miembros del equipo --- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columnas iguales */
    gap: 20px; /* Espacio entre columnas */
    justify-content: center; /* Alinea todo el grid al centro */
    align-items: start; /* Alinea los ítems en la parte superior */
}


/* --- Estilos individuales para cada miembro del equipo --- */
.team-member {
    display: flex;
    color: #6899B4;
    flex-direction: column; /* Alinea elementos verticalmente */
    justify-content: center; /* Asegura que los elementos estén centrados verticalmente */
    align-items: center; /* Centra horizontalmente todos los elementos */
    text-align: center; /* Centrar texto dentro del contenedor */
    font-family: 'Jost', sans-serif; /* Aplica la fuente Jost a toda la sección */
    height: 100%; /* Asegura que todos los contenedores tengan la misma altura */
}

/* --- Estilos para las imágenes del equipo (aplicado uniformemente) --- */
.team-member img {
    width: 180px; /* Ancho fijo */
    height: 180px; /* Altura fija para que sea cuadrada */
    object-fit: cover; /* Asegura que la imagen cubra el contenedor sin distorsión */
    margin-bottom: 15px;
    border-radius: 0; /* Eliminar borde redondeado para hacerlas cuadradas */
}


/* --- Estilos para los nombres del equipo (centrados y alineados al medio) --- */
.team-title {
    font-size: 22px;
    margin: 10px 0; /* Espaciado entre el nombre y la imagen */
    color: #6899B4; /* Color de los nombres */
    font-weight: bold;
    text-align: center; /* Centra los nombres */
    width: 100%; /* Asegura que todos los títulos ocupen el mismo espacio horizontal */
}

/* --- Estilos para las descripciones del equipo (centradas y alineadas al medio) --- */
.team-position {
    font-size: 16px;
    color: #55666D; /* Color del texto de las descripciones */
    margin-bottom: 15px; /* Espaciado entre la descripción y el botón */
    text-align: center; /* Centra las descripciones */
    width: 100%; /* Asegura que todas las descripciones tengan el mismo espacio */
    flex-grow: 1; /* Asegura que el texto ocupe el espacio disponible */
    white-space: pre-line; /* Permite dividir las líneas en las descripciones largas */
}

/* --- Estilos específicos para descripciones largas de Magdalena y Zirong --- */
.team-position.magdalena,
.team-position.zirong {
    white-space: pre-line; /* Fuerza el salto de línea para las descripciones largas */
}

/* --- Estilos para los botones "Learn more" (Alineación horizontal y centrado) --- */
.btn-learn-more {
    background-color: #F67F00; /* Color Clementine */
    border: none; /* Elimina el borde */
    padding: 8px 16px; /* Espaciado interno del botón */
    color: white; /* Color del texto */
    border-radius: 4px; /* Bordes redondeados */
    transition: background-color 0.3s ease; /* Transición suave en hover */
    font-family: 'Jost', sans-serif; /* Asegura que la fuente del botón también sea Jost */
    width: 100%; /* Alinea los botones uniformemente */
    max-width: 150px; /* Asegura que los botones no sean demasiado anchos */
    margin: 0 auto; /* Centra el botón */
    display: flex;
    justify-content: center; /* Asegura que el botón esté centrado horizontalmente */
}

/* --- Cambiar el color del botón al hacer hover --- */
.btn-learn-more:hover {
    background-color: #d85b02; /* Color ligeramente más oscuro en hover */
}

/* --- Responsivo para pantallas más pequeñas --- */
@media (max-width: 1200px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en pantallas medianas */
    }
}

@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas más pequeñas */
    }
}

@media (max-width: 1200px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en pantallas medianas */
        justify-content: center; /* Centrar también en pantallas medianas */
    }
}

@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas más pequeñas */
        justify-content: center; /* Centrar también en pantallas más pequeñas */
    }
}

@media (max-width: 576px) {
    .team-grid {
        grid-template-columns: 1fr; /* 1 columna en pantallas móviles */
        justify-content: center; /* Centrar también en pantallas móviles */
    }
}