/* ============================================= */
/* ===     CSS/NUESTRO-EQUIPO.CSS            === */
/* ============================================= */
.page-equipo .page-header-image.header-equipo {
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../imagenes/cabecera-nuestro-equipo.jpg');
    background-size: cover;
    background-position: center center; /* Centrado */
    min-height: 350px; /* Altura de la cabecera */
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-equipo .page-title {
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Sombra para legibilidad */
}

/* --- Estilos para la Sección de Equipo (#equipo-cards) --- */
#equipo-cards {
    border: none; /* sin comentario*/
    /* Puedes añadir padding o background si es necesario aquí */
    /* Por ejemplo: padding-top: 4rem; padding-bottom: 4rem; */
    /* background-color: #f8f9fa; /* Un gris muy claro si se quiere */
}

#equipo-cards .section-title {
    color: var(--minga-dark); /* Usa la variable de color oscuro de Minga */
    margin-bottom: 0.5rem;
    font-weight: 700; /* Más énfasis */
}

#equipo-cards .section-subtitle {
    color: #6c757d; /* Color gris estándar de Bootstrap */
    font-size: 1.1rem;
    margin-bottom: 3.5rem; /* Más espacio antes de que empiecen las tarjetas */
    max-width: 700px; /* Limita el ancho del subtítulo */
    margin-left: auto;
    margin-right: auto;
}

/* --- Estilos para las Tarjetas de Miembro del Equipo --- */
/* Contenedor de cada tarjeta (apiladas en la columna central) */
/* El div con .mb-4 / .pb-2 en el HTML maneja el espaciado vertical */

/* Estilo base de la tarjeta individual */
.team-member-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none; /* Quitar borde por defecto */
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 0.375rem; /* Bordes redondeados estándar */
    overflow: hidden; /* Clave para que la imagen contenida no rompa el borde redondeado */
    display: flex; /* Necesario para el layout interno row/column y responsive */
    flex-direction: row; /* Por defecto: imagen a la izquierda, texto a la derecha */
    width: 100%; /* Asegura que ocupe el ancho de su contenedor (la columna central) */
}

.team-member-card:hover {
    transform: translateY(-6px); /* Efecto sutil de elevación */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); /* Sombra más pronunciada */
}

/* Columna de la imagen (Izquierda en Desktop) */
/* Corresponde a .col-md-4.img-col en el HTML */
.team-member-card .img-col {
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: stretch;     /* Centrado vertical (opcional) */
    padding: 0;
    flex-shrink: 0;



    /*padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    text-align: center!important;*/
}

/* La imagen dentro de la columna */
.team-member-card-img {
    max-width: 150px; /* Ocupa el 100% del ancho de .img-col */
    /*height: 100%;*/ /* Intenta ocupar el 100% de la altura de .img-col */
    object-fit: cover; /* Mantiene proporción, recorta para llenar el espacio. Clave para diferentes aspect ratios. */
    max-height: 150px; /* Altura mínima para evitar que quede muy chata si el texto es corto */
    /* max-height: 300px; */ /* Opcional: Limitar altura máxima si es necesario */
    display: block; /* Elimina espacio extra debajo de la imagen */
    border-radius: 50% !important;
}

/* Columna del contenido (Derecha en Desktop) */
/* Corresponde a .col-md-8.content-col en el HTML */
.team-member-card .content-col {
    display: flex; /* Necesario para que el card-body pueda usar flex-grow */
    flex-direction: column; /* Apila elementos dentro de esta columna */
    /* El ancho se define por la clase col-md-8 de Bootstrap */
}

/* El cuerpo de la tarjeta (dentro de la columna derecha) */
.team-member-card .card-body {
    padding: 1.25rem 1rem; /* Padding interno */
    text-align: left; /* Texto alineado a la izquierda por defecto */
    display: flex; /* Permite control de espacio vertical */
    flex-direction: column; /* Apila título, cargo, descripción, iconos */
    flex-grow: 1; /* Hace que el card-body ocupe todo el espacio vertical disponible en content-col */
    justify-content: center; /* Intenta centrar verticalmente si hay espacio sobrante */
}

/* Título (Nombre) */
.team-member-card .card-title {
    color: var(--minga-dark);
    margin-bottom: 0.2rem; /* Poco espacio debajo del nombre */
    font-size: 1.15rem;
    font-weight: 600;
}

/* Cargo / Rol */
.team-member-card .team-member-title {
    color: var(--minga-red); /* Color distintivo */
    font-weight: 500;
    font-size: 0.85rem; /* Ligeramente más pequeño */
    margin-bottom: 0.75rem; /* Espacio debajo del cargo */
    text-transform: uppercase; /* Mayúsculas */
    letter-spacing: 0.5px; /* Espaciado ligero */
}

/* Descripción */
.team-member-card .team-member-description {
    font-size: 0.875rem; /* Tamaño de texto pequeño estándar */
    color: #555; /* Gris oscuro para buena legibilidad */
    line-height: 1.6; /* Interlineado */
    margin-bottom: 1rem; /* Espacio antes de los iconos */
    flex-grow: 0.5; /* Permite que la descripción ocupe espacio y empuje los iconos hacia abajo */
    text-align: justify;
}

/* Contenedor de Iconos Sociales */
.team-social-icons {
     margin-top: auto; /* CLAVE: Empuja los iconos al final del card-body flexible */
     padding-top: 0.5rem; /* Espacio sobre los iconos */
     text-align: left; /* Alineados a la izquierda por defecto */
}

/* Iconos individuales */
.team-social-icons a {
    color: #adb5bd; /* Color grisáceo */
    margin-right: 1rem; /* Espacio entre iconos */
    margin-left: 0;
    font-size: 1.1rem; /* Tamaño del icono */
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block; /* Necesario para transform */
}
.team-social-icons a:last-child {
    margin-right: 0; /* Quita margen al último icono */
}

.team-social-icons a:hover {
    color: var(--minga-red); /* Color Minga al pasar el ratón */
    transform: scale(1.15); /* Efecto de zoom ligero */
}


/* --- Media Query para Responsividad (Móviles y Tablets Pequeñas) --- */
@media (max-width: 767.98px) {
    /* Cambia la dirección de flex en la tarjeta principal */
    .team-member-card {
        flex-direction: column; /* Apila imagen encima del texto */
    }

    /* La columna de imagen ahora ocupa todo el ancho */
    .team-member-card .img-col {
        width: 100%;
        /* align-items no es relevante aquí ya que la imagen llena */
    }

    /* Ajusta la imagen en móvil */
    .team-member-card-img {
        min-height: 200px; /* Altura mínima decente en móvil */
        max-height: 280px; /* Límite superior para que no sea enorme */
        width: 100%; /* Asegura que llene el ancho */
        height: auto; /* La altura se determina por el aspect ratio y el ancho */
        object-fit: cover; /* Sigue recortando si es necesario */
    }

     /* La columna de contenido también ocupa todo el ancho */
    .team-member-card .content-col {
       width: 100%;
    }

    /* Centra el texto en el cuerpo de la tarjeta en móvil */
     .team-member-card .card-body {
        text-align: center;
        padding: 1.25rem; /* Padding uniforme */
    }

    /* Centra los iconos sociales en móvil */
    .team-social-icons {
        text-align: center;
        margin-top: 1rem; /* Añade espacio arriba en móvil */
        padding-top: 0;
    }

    /* Ajusta espaciado de iconos en móvil */
     .team-social-icons a {
        margin: 0 0.6rem; /* Espaciado igual a ambos lados */
    }
}
/* --- Estilos para los Bloques de Equipo (Directiva, Clave, etc.) --- */
.team-block-section {
    padding: 3rem 0; /* Espacio vertical para separar los bloques */
    /* background-color: #ffffff; */ /* Fondo blanco ya aplicado con bg-white */
    border-radius: 0.5rem; /* Bordes redondeados opcionales para el bloque */
    margin-bottom: 2.5rem; /* Espacio debajo de cada bloque */
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.05); */ /* Sombra muy sutil opcional */
}

.team-block-title {
    color: var(--minga-dark);
    margin-bottom: 2.5rem; /* Espacio debajo del título del bloque */
    font-weight: 600;
    text-align: center;
}