/* --- ESTILOS PARA LA PÁGINA DE PERSONAL --- */

/* Título principal "Personal del Museo" */
.team-title {
    font-family: 'Cinzel', serif;
    font-size: 3.5rem;
    text-align: center;
    color: var(--color-primary);
    letter-spacing: 4px;
    font-weight: 700;
    margin-bottom: 2rem;
}

/* Contenedor de cada miembro del equipo */
.team-member {
    display: flex;
    gap: 2.5rem;
    margin-bottom: 3rem;
    background-color: #fdfdfd;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Alineación de foto a la izquierda (por defecto) y a la derecha */
.team-member.photo-left { flex-direction: row; }
.team-member.photo-right { flex-direction: row-reverse; }

/* Estilo de la imagen circular */
.team-member img {
    width: 250px;
    height: 250px;
    object-fit: cover; /* Asegura que la imagen llene el círculo sin deformarse */
    border-radius: 50%; /* La clave para la forma circular */
    border: 4px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Contenedor del texto descriptivo */
.team-member .text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.team-member p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: justify; 
}

/* Estilo para el nombre y cargo */
.person-details {
    margin-top: auto; /* Empuja este bloque hacia abajo */
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}

.person-details .name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 1.6rem;
    color: var(--color-primary);
    margin: 0;
}

.person-details .role {
    font-family: 'Lato', sans-serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--color-secondary-text);
    margin: 0;
}

/* Modificador para alinear a la derecha e inferior */
.align-bottom-right {
    align-self: flex-end;
    text-align: right;
    border-top: none; /* Quitamos la línea para este estilo específico */
}


/* --- SECCIÓN RESPONSIVE PARA DISPOSITIVOS MÓVILES --- */
@media (max-width: 768px) {

    /* Ajustamos el título para que no sea tan grande */
    .team-title {
        font-size: 2.5rem;
    }

    /* Apilamos el contenido de cada miembro y lo centramos */
    .team-member,
    .team-member.photo-right {
        flex-direction: column; /* Apila la imagen sobre el texto */
        align-items: center;   /* Centra todo horizontalmente */
        text-align: center;    /* Centra el texto */
    }

    .team-member,
    .team-member.photo-left {
        flex-direction: column; /* Apila la imagen sobre el texto */
        align-items: center;   /* Centra todo horizontalmente */
        text-align: center;    /* Centra el texto */
    }


    /* Corregimos el tamaño de la imagen para que sea un círculo más pequeño */
    .team-member img {
        width: 180px;  /* Un tamaño fijo más adecuado para móvil */
        height: 180px; /* Igual al ancho para un círculo perfecto */
    }

    .person-details {
        border-top: 1px solid #eee; /* Aseguramos que la línea sea visible */
    }

    /* Reseteamos la alineación especial para que todo sea centrado en móvil */
    .align-bottom-right {
        align-self: center;
        text-align: center;
        margin-top: 1.5rem;
    }
}