/* --- SECCIÓN EQUIPO (TARJETAS) --- */
.team-section {
  padding: 6rem 3rem 0rem 3rem;
  max-width: 1200px;
  margin: 0 auto;
  scroll-margin-top: 0rem; /* Compensa la altura del navbar y el sobrante de las imágenes */
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch; /* Asegura que todas las tarjetas midan lo mismo */
}

.team-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  /* overflow: hidden; -- Removido para permitir que la foto sobresalga hacia arriba */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  background-color: #ffffff; /* Fondo blanco fijo para contrastar */
  margin-top: 20px;
  margin-bottom: 50px;
  transition: transform 0.3s ease;
}

.team-card:hover {
  transform: translateY(
    -5px
  ); /* Pequeño efecto de elevación al pasar el mouse */
}

/* --- PARTE SUPERIOR DE LA TARJETA --- */
.team-card-top {
  /* Aquí podrás cambiar este background-color por un background-image en el futuro */
  background-size: cover;
  background-position: center;
  height: 220px;
  border-radius: 8px 8px 0 0; /* Mantiene las esquinas superiores redondeadas */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- AVATAR (CÍRCULO) --- */
.team-avatar {
  width: 100%;
  height: 100%;
  background-color: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.initials {
  color: #ffffff;
  font-size: 3.2rem;
  line-height: 1;
}

/* Estilo preparado para cuando agregues las fotos de perfil */
.avatar-img {
  width: auto;
  height: 130%; /* Altura superior al 100% para crear el efecto de sobresalir */
  object-fit: cover;
  position: absolute;
  object-position: bottom; /* Alinea visualmente el interior de la foto hacia abajo */
  position: center;
  bottom: 0; /* Ancla físicamente la imagen a la base del contenedor */
  left: 20;
  filter: grayscale(100%); /* Imagen en blanco y negro por defecto */
  transition: filter 0.4s ease;
}

.team-card:hover .avatar-img {
  filter: grayscale(0%); /* Restaura el color al hacer hover sobre la tarjeta */
}

/* --- CONTENIDO DE LA TARJETA --- */
.team-card-bottom {
  border-radius: 0 0 8px 8px; /* Mantiene las esquinas inferiores redondeadas */
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Hace que esta sección ocupe el espacio sobrante */
}

.team-name {
  font-size: 1.5rem;
  color: var(--primario); /* Fuerza el azul oscuro siempre */
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

.team-role {
  font-size: 0.95rem;
  color: #4a5568; /* Un gris oscuro para jerarquía visual */
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

.team-divider {
  width: 45px;
  height: 4px;
  background-color: var(--secundario); /* Dorado */
  margin: 0.5rem 0 1.5rem 0;
  border-radius: 2px;
}

.team-bio {
  font-size: 0.95rem;
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .team-grid {
    gap: 1.5rem;
  }
  .team-card-bottom {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 992px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
  }
}

@media (max-width: 650px) {
  .team-section {
    padding: 3rem 1.5rem;
  }
  .team-grid {
    grid-template-columns: 1fr; /* 1 columna en móviles */
  }
}