/* --- Contenedor Principal --- */
.pe-equipo-contenedor {
    display: grid;
    gap: 30px; /* Espacio entre miembros */
    text-align: left; /* Mantenemos la alineación a la izquierda para Desktop/Tablet */
}

/* --- Configuración de Columnas para Escritorio --- */
.pe-equipo-contenedor.columnas-4 {
    grid-template-columns: repeat(4, 1fr);
}

.pe-equipo-contenedor.columnas-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* --- Estilos de cada Miembro --- */
.pe-miembro-foto {
    position: relative;
    width: 80%; /* Tamaño relativo del círculo */
    max-width: 200px; /* Tamaño máximo para que no sea gigante */
    margin: 0 0 15px 0; /* Mantenemos el margen original para desktop (align: left) */
    aspect-ratio: 1 / 1; /* Mantiene la forma cuadrada para hacer un círculo perfecto */
}

.pe-miembro-foto img {
    width: 100%;
    height: 100%;
    border-radius: 50%; /* ¡La magia del círculo! */
    object-fit: cover; /* Asegura que la imagen cubra el área sin deformarse */
    transition: filter 0.3s ease; /* Transición suave para el efecto hover */
}

/* --- Estilo Blanco y Negro --- */
.pe-equipo-contenedor.estilo-bw .pe-miembro-foto img {
    filter: grayscale(100%);
}

/* --- Efecto Hover para Blanco y Negro --- */
.pe-equipo-contenedor.estilo-bw .pe-miembro:hover .pe-miembro-foto img {
    filter: grayscale(0%);
}

.pe-miembro-nombre {
    margin: 0;
    padding: 0;
    font-size: 1.2em; /* Tamaño de fuente para el nombre */
}

.pe-miembro-cargo {
    margin: 5px 0 0 0;
    padding: 0;
    font-size: 1em; /* Tamaño de fuente para el cargo */
    font-weight: 400; /* Fuente en regular */
    color: #555;
}

/* --- Adaptación para Tablets (hasta 1024px) --- */
@media (max-width: 1024px) {
    .pe-equipo-contenedor {
        /* Siempre 3 columnas en tablet */
        grid-template-columns: repeat(3, 1fr); 
        /* text-align: left; ya se mantiene */
    }
}

/* ----------------------------------------------- */
/* --- Adaptación para Móviles (hasta 767px) --- */
/* ----------------------------------------------- */
@media (max-width: 767px) {
    .pe-equipo-contenedor {
        /* 1 columna en móvil */
        grid-template-columns: 1fr; 
        /* CAMBIO CLAVE: Centramos todo el texto y elementos para el modo de una sola columna */
        text-align: center; 
    }
    
    .pe-miembro-foto {
        /* Centramos la foto y reducimos el tamaño para un diseño compacto */
        width: 45%; 
        max-width: 150px;
        margin: 0 auto 15px auto; /* CAMBIO CLAVE: Forzar centrado de la foto */
    }

    /* Opcional: Ajuste del tamaño de fuente en móvil para mejor legibilidad */
    .pe-miembro-nombre {
        font-size: 1.1em;
    }

    .pe-miembro-cargo {
        font-size: 0.9em;
    }
}