/* "Nuestro equipo": cartas chicas que se dan vuelta (hover en escritorio, toque en celular).
   Mismos colores y tipografías del sitio. Respeta "reducir movimiento" (js/motion.js). */

.team-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 20px; margin-top: 44px;
}

.team-card {
  appearance: none; border: 0; padding: 0; margin: 0; background: none; font: inherit; color: inherit;
  width: 164px; height: 224px; perspective: 900px; cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.team-inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.team-card.is-flipped .team-inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .team-card:hover .team-inner { transform: rotateY(180deg); }
}
.team-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; border-radius: var(--radius-lg); }

.team-face {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 8px 24px rgba(42, 35, 30, .12);
}

/* Frente: foto + nombre */
.team-front { background: var(--white); border: 1px solid var(--gray-100); }
.team-front img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--cream-dark);
}
.team-name {
  display: flex; flex: 1; align-items: center; justify-content: center;
  padding: 8px 10px; font-family: var(--font-display); font-size: .98rem; line-height: 1.2; color: var(--gray-800);
}

/* Reverso: cargo y frase breve */
.team-back {
  transform: rotateY(180deg); justify-content: center; align-items: center; gap: 6px;
  padding: 14px 12px; color: var(--white);
  background: linear-gradient(150deg, var(--primary-dark), var(--primary));
}
.team-back .team-name-back { font-family: var(--font-display); font-size: 1rem; line-height: 1.2; color: var(--white); }
.team-role { font-size: .68rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-light); }
.team-bio { margin: 2px 0 0; font-size: .76rem; line-height: 1.42; color: rgba(255, 255, 255, .94); }

/* Escritorio ancho: las 7 cartas caben en una sola fila. */
@media (min-width: 1240px) {
  .team-grid { gap: 14px; }
  .team-card { width: 150px; height: 238px; }
}
/* Pantallas medianas: 4 y 3 (en vez de 6 y una sola abajo). */
@media (min-width: 761px) and (max-width: 1239px) {
  .team-grid { max-width: 716px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .team-grid { gap: 14px; }
  .team-card { width: calc(50% - 7px); max-width: 190px; height: auto; aspect-ratio: 164 / 224; }
}
html.reduce-motion .team-inner { transition: none; }
@media (prefers-reduced-motion: reduce) { .team-inner { transition: none; } }