/* ==========================================================================
   aq-team-card (plan §12, Fase 5.2/5.3) — foto + panel de texto formando
   una sola unidad, iterada desde un repeater (D5/D6/D7). Imagen 40% /
   panel 60%, en espejo por fila (índices pares invierten el orden).

   Estructura (una `row g-0` propia por card — el gutter cero es porque
   imagen y panel se tocan; la separación ENTRE cards es margen de la
   card, no gutter de la row):
   <div class="aq-team-card">
     <div class="row g-0">
       <div class="col-12 col-lg-5 aq-team-card__media">...</div>
       <div class="col-12 col-lg-7 aq-team-card__panel">...</div>
     </div>
   </div>

   Filas "texto a la izquierda" (2ª y 4ª): el DOM se mantiene SIEMPRE
   imagen-primero (para que el móvil apile foto arriba sin hacer nada
   especial) y el espejo se logra solo con `order-lg-1`/`order-lg-2` en
   esas dos columnas — NUNCA `order-1`/`order-2` a secas: sin el infijo
   `-lg-` el orden se aplicaría también apilado en móvil y la mitad de
   los integrantes mostraría el texto antes de la foto (trampa marcada
   en CLAUDE.md).
   ========================================================================== */

.aq-team-card + .aq-team-card {
	margin-top: var(--aq-space-6);
}

/* --------------------------------------------------------------------
   Media (foto) — la altura la manda el panel de texto: en la row (flex,
   align-items: stretch por defecto de Bootstrap) esta columna se
   estira a la altura del panel desde `lg`, y la imagen la llena con
   object-fit: cover. Apilada (sin hermano que estirar), usa su propia
   proporción para no depender de un alto ajeno.
   -------------------------------------------------------------------- */
.aq-team-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.aq-team-card__media img {
	display: block;
	width: 100%;
	height: 385px;
	object-fit: cover;
}

@media (min-width: 992px) {
	.aq-team-card__media {
		aspect-ratio: auto;
	}
}

/* --------------------------------------------------------------------
   Panel de texto — fondo claro propio, distinto del blanco de la banda
   (mismo token que el panel del formulario de Contacto, Fase 4.8).
   -------------------------------------------------------------------- */
.aq-team-card__panel {
	padding: var(--aq-card-padding-5);
	background-color: var(--aq-gray-panel);
}

/* La línea de acento bajo el nombre es aq-underline-accent
   (components/underline-accent.css), compartida con el título de las
   cards de Servicios — antes un <hr> propio de esta card, unificado en
   un solo componente. margin-bottom repone el espacio que antes daba el
   margen inferior de ese <hr> (misma cifra, --aq-space-3), para que el
   ritmo hacia aq-team-card__role no cambie. */
.aq-team-card__name {
	margin-bottom: var(--aq-space-3);
}

/* Mayúsculas doradas: reutiliza .aq-caption-label (base/typography.css)
   igual que el resto del proyecto — mismo escalón --wide que
   .aq-commitment-block__title, porque comparte su combinación color
   dorado + tracking amplio (el escalón --narrow del proyecto siempre
   viene con color de texto, nunca dorado; ver auditoría Fase 4.9). */
.aq-team-card__role {
	color: var(--aq-gold);
	margin-bottom: var(--aq-space-3);
}

.aq-team-card__bio {
	margin-bottom: var(--aq-space-4);
   color: var(--aq-text-2);
   text-align: justify;
}

/* E-mail con glifo de sobre — a propósito NO usa aq-icon-circle (ese
   lleva borde circular; en el diseño de Equipo el ícono es un glifo
   pequeño suelto, sin círculo). */
.aq-team-card__email {
	display: flex;
	align-items: center;
	gap: var(--aq-space-2);
	margin-bottom: 0;
   color: var(--aq-gold-2);
}

.aq-team-card__email i {
	color: var(--aq-gold-2);
	font-size: 1rem;
}

.aq-team-card__email a {
	color: inherit;
	text-decoration: none;
}

.aq-team-card__email a:hover {
	color: var(--aq-gold-2);
}