/* =====================================================================
   EQUIPO — las personas detrás
   ---------------------------------------------------------------------
   Después de Casos y de la franja de clientes, la página ya demostró
   que el producto funciona y que hubo marcas grandes. Falta lo único
   que ninguna demo prueba: que del otro lado hay gente. Por eso esta
   sección es la única del cierre con una foto real a tamaño grande.

   Decisiones:

   1 · UNA FOTO, NO TRES. Sólo existe la grupal. Tres retratos
       recortados del mismo cuadro se ven como lo que serían: un
       recorte. Una foto grande y honesta pesa más que tres avatares
       falsos, así que la composición se armó alrededor de ella:
       columna izquierda la foto, derecha las tres fichas.

   2 · SUELO ELEVADO. --ground-raise es el escalón más claro de la
       rampa y acá se justifica: es el momento cálido del cierre, entre
       dos secciones de sistema (clientes y proceso).

   3 · LAS FICHAS NO TIENEN HOVER DE TARJETA. No son clickeables. Un
       estado de hover sobre algo que no responde al click miente sobre
       la interfaz — misma regla que .cost en v2.css.
   ===================================================================== */

/* La cabecera es .sec__head (css/v2.css). Esta sección no define la suya:
   el encabezado de toda la página es una sola pieza. */

/* Columnas desparejas a propósito. Con 1fr y 1fr la foto medía 517×387 y
   la pila de fichas 560: 173px de hueco bajo la foto. Angostando la
   columna izquierda las bios envuelven menos —la pila baja— y la bajada
   pasa a vivir debajo de la foto, que es lo que termina de emparejar.
   Estirar la foto a la altura de la pila no era opción: el archivo es
   4/3 y recortarlo a casi cuadrado corta a los de los costados. */
.equipo__grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px, 3.5vw, 56px);
  align-items:start;
}
.equipo__side{
  display:flex;flex-direction:column;
  gap:clamp(20px, 2.4vw, 28px);
}
.equipo__lead{max-width:none}

/* --- La foto --- */
.equipo__photo{
  position:relative;overflow:hidden;margin:0;
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.12);
  /* Sombra para separar del suelo, no para iluminar (regla 3 de v2). */
  box-shadow:0 24px 60px rgba(0,6,20,.55);
  /* 4/3 es el aspecto nativo del archivo: recortarlo a vertical para
     igualar la columna de fichas partiría a alguno de los tres. */
  aspect-ratio:4/3;
}
.equipo__photo img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Velo inferior: el archivo es una selfie con una pared clara arriba a
   la derecha, y sin esto el borde blanco de la foto choca contra el
   azul del suelo. Baja el brillo justo en el canto. */
.equipo__photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(0,11,31,.42) 0%, transparent 42%);
}

/* --- Las tres fichas --- */
.equipo__list{
  display:flex;flex-direction:column;
  gap:clamp(12px, 1.4vw, 16px);
  /* Con la foto en 4/3 y tres fichas al lado, la columna derecha queda
     unos píxeles más corta o más larga según el largo de las bios.
     Estirarlas reparte esa diferencia en vez de dejar un hueco al pie. */
  height:100%;
}
.member{
  flex:1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-1) var(--space-4);
  align-content:center;
  padding:var(--space-5);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
}
/* El ícono ocupa las tres filas de texto: alineado sólo al nombre
   quedaba flotando arriba en las fichas de bio larga. */
.member__ico{
  grid-row:1 / span 3;align-self:start;
  display:grid;place-items:center;
  width:40px;height:40px;border-radius:var(--radius-xs);
  background:rgba(12,192,223,.14);
  border:1px solid rgba(12,192,223,.28);
  color:var(--cyan-300);
}
.member__ico .ico{--ico-size:19px}

.member__name{
  margin:0;
  font-family:var(--font-subhead);
  font-size:var(--text-md);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-title);color:var(--text-strong);
}
.member__role{
  margin:2px 0 var(--space-2);
  font-size:var(--text-2xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--cyan-400);
}
.member__bio{
  margin:0;
  font-size:var(--text-sm);line-height:var(--lh-body);
  color:var(--text-muted);text-wrap:pretty;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:960px){
  .equipo__grid{grid-template-columns:1fr;gap:var(--space-6)}
  /* La foto sigue primero: en una columna, las caras presentan al
     equipo antes que el texto. */
  .equipo__photo{aspect-ratio:16/10}
  .member{flex:0 1 auto}
}
@media (max-width:640px){
  .member{padding:var(--space-4);gap:var(--space-1) var(--space-3)}
  .member__ico{width:34px;height:34px}
  .member__ico .ico{--ico-size:17px}
  .equipo__photo{aspect-ratio:4/3}
}

/* =====================================================================
   ACCESIBILIDAD
   ===================================================================== */
@media (prefers-contrast: more){
  .member{border-color:rgba(255,255,255,.32)}
  .member__bio{color:var(--paper-dim)}
}