/* ═══════════════════════════════════════════════════════════════════════════
   equipo.css — la página "Nuestro equipo".
   Se apoya en capacitacion.css, que ya trae la paleta y la cabecera.
   ═══════════════════════════════════════════════════════════════════════════ */
.eqp-hoja { max-width: 980px; margin: 0 auto; padding: 40px 22px 80px; }

.eqp-intro { text-align: center; }
.eqp-ante {
  margin: 0 0 7px; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cap-verde);
}
.eqp-intro h1 { font-size: 34px; margin: 0 0 12px; letter-spacing: -.02em; }
.eqp-bajada { margin: 0; color: var(--cap-suave); line-height: 1.6; }

.eqp-centro { text-align: center; padding: 56px 0; }
.eqp-centro h2 { font-size: 21px; margin: 0 0 8px; }

/* Entran escalonadas. Es UN momento al cargar, no un efecto permanente. */
@keyframes eqp-entrar { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.eqp-persona {
  background: var(--cap-papel); border: 1px solid var(--cap-linea);
  border-radius: 18px;
  opacity: 0; animation: eqp-entrar .55s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* -- Una sola persona -- */
.eqp-una .eqp-persona {
  display: flex; align-items: center; gap: 38px;
  max-width: 800px; margin: 0 auto; padding: 32px 36px;
}
.eqp-una .eqp-foto { width: 190px; height: 190px; flex-shrink: 0; }
.eqp-una .eqp-datos h2 { font-size: 26px; }

/* -- Varias -- */
.eqp-grilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}
.eqp-grilla .eqp-persona {
  padding: 30px 24px; text-align: center;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s;
}
.eqp-grilla .eqp-persona:hover {
  transform: translateY(-5px); box-shadow: 0 18px 38px rgba(47,39,35,.1);
}
.eqp-grilla .eqp-foto { width: 128px; height: 128px; margin: 0 auto 18px; }

.eqp-foto {
  border-radius: 50%; overflow: hidden; background: var(--cap-fondo);
  display: grid; place-items: center;
}
.eqp-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.eqp-persona:hover .eqp-foto img { transform: scale(1.06); }
/* Sin foto, la inicial: un circulo gris vacio se lee como una foto que no cargo. */
.eqp-inicial { font-size: 46px; font-weight: 600; color: #14322c; background: var(--cap-verde);
  width: 100%; height: 100%; display: grid; place-items: center; }

.eqp-rol {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cap-suave);
  background: var(--cap-fondo); border-radius: 999px; padding: 4px 12px; margin-bottom: 10px;
}
.eqp-datos h2 { font-size: 20px; margin: 0 0 9px; }
.eqp-datos p { font-size: 14.5px; color: var(--cap-suave); line-height: 1.65; margin: 0; }
.eqp-redes { display: flex; gap: 14px; margin-top: 16px; }
.eqp-grilla .eqp-redes { justify-content: center; }
.eqp-redes a {
  font-size: 13px; font-weight: 600; color: var(--cap-tinta);
  border-bottom: 1px solid var(--cap-verde); padding-bottom: 1px;
}
.eqp-redes a:hover { color: var(--cap-verde); }

@media (max-width: 700px) {
  .eqp-intro h1 { font-size: 27px; }
  .eqp-una .eqp-persona { flex-direction: column; text-align: center; gap: 22px; padding: 28px 22px; }
  .eqp-una .eqp-foto { width: 150px; height: 150px; }
  .eqp-una .eqp-redes { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .eqp-persona { opacity: 1; animation: none; }
  .eqp-grilla .eqp-persona:hover { transform: none; }
  .eqp-persona:hover .eqp-foto img { transform: none; }
}

/* La pagina de equipo tambien desaprovechaba el ancho: con una persona quedaba
   una tarjeta chica al medio de un monitor. Se le da mas cuerpo. */
@media (min-width: 900px) {
  .eqp-hoja { max-width: 1100px; }
  .eqp-una .eqp-persona { max-width: 900px; padding: 40px 44px; gap: 46px; }
  .eqp-una .eqp-foto { width: 220px; height: 220px; }
  .eqp-una .eqp-datos h2 { font-size: 29px; }
  .eqp-una .eqp-datos p { font-size: 16px; }
}

/* ═══ QUE SIGA ANDANDO CON MUCHAS PERSONAS (03/09/2026) ══════════════════════
   `auto-fit` estira las tarjetas para llenar la fila: con dos personas quedaban
   dos tarjetas gigantes con una foto chica perdida en el medio, y con siete la
   fila huerfana se veia rara. Con `auto-fill` + un ancho maximo por tarjeta,
   cada una conserva su forma y la grilla se centra, haya 2 o 20. */
.eqp-grilla { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); justify-content: center; }
.eqp-grilla .eqp-persona { max-width: 320px; width: 100%; margin: 0 auto; }

/* Siete o mas: se achica todo para que entren de a cuatro o cinco por fila. */
.eqp-compacta { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.eqp-compacta .eqp-persona { padding: 22px 16px; max-width: 260px; }
.eqp-compacta .eqp-foto { width: 96px; height: 96px; margin-bottom: 14px; }
.eqp-compacta .eqp-datos h2 { font-size: 17px; }
.eqp-compacta .eqp-datos p { font-size: 13.5px; }
/* La entrada escalonada, con quince personas, tardaba mas de un segundo en
   terminar: se acorta el paso. */
.eqp-compacta .eqp-persona { animation-duration: .4s; animation-delay: calc(var(--i, 0) * 40ms); }

@media (prefers-reduced-motion: reduce) {
  .eqp-compacta .eqp-persona { animation: none; opacity: 1; }
}