.team-section{ text-align:center; padding:60px 0; }

/* Grid de tarjetas */
.card-container{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  max-width:1000px;
  margin:0 auto;
}
@media (max-width:768px){
  .card-container{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .card-container{ grid-template-columns:1fr; }
}

.team-member{ width:100%; aspect-ratio:12/16; perspective:1000px; }

.flip-card{ width:100%; height:100%; }

.flip-card-inner{
  width:100%; height:100%;
  transition:transform .6s; transform-style:preserve-3d; position:relative;
}

.flip-card:hover .flip-card-inner{ transform:rotateY(180deg); }

.flip-card-front,.flip-card-back{
  position:absolute; width:100%; height:100%;
  backface-visibility:hidden; border-radius:8px; overflow:hidden;
}

.flip-card-front img{ width:100%; height:100%; object-fit:cover; }

.flip-card-back{
  background: var(--color-primary-soft); color:#fff; transform:rotateY(180deg);
  display:flex; align-items:center; justify-content:center; padding:15px; flex-direction:column;
}

.flip-card-back .name{
  font-family: var(--font-title);
  font-weight: var(--w-semibold);
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: 10px;
}

.flip-card-back .position{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.1rem;
}

/* Card estática 
.static-card{
  width:100%; height:100%; border-radius:8px; overflow:hidden; position:relative;
  box-shadow:0 4px 10px rgba(0,0,0,.15); display:flex; flex-direction:column; justify-content:flex-end;
}
.static-card img{ width:100%; height:100%; object-fit:cover; flex:1; }
.card-caption{ background: var(--color-primary-soft); color:#fff; padding:8px 12px; text-align:center; }

.team-group-photo{ max-width:8000px; aspect-ratio:16/9; justify-self:center; }
*/


/* tu estilo existente */
.card-caption{
  background: rgba(0,0,0,.5);
  color:#fff;
  padding:8px 12px;
  text-align:center;
}

/* posiciona y oculta el caption por defecto */
.static-card{
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius:var(--radius-md);         /* para que el caption no se salga */
}

.about-image{
  display:block;
  width:100%;
  height:auto;
}

.card-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                   /* pegado al borde inferior de la foto */
  opacity: 0;                  /* oculto por defecto */
  transform: translateY(8px);  /* pequeño desplazamiento para animar */
  transition: opacity .2s ease, transform .2s ease;
}

/* mostrar al pasar el mouse por la tarjeta/foto */
.static-card:hover .card-caption{
  opacity: 1;
  transform: translateY(0);
}

/* opcional: oscurece un poco la imagen al hover */
.static-card:hover .about-image{
  filter: brightness(.9);
}