/* ==========================================================================
   Servicios (plan §03, Fase 4.2) — grilla de 4 cards, repeater.
   Usa aq-card (Fase 2.4) como base; aquí solo el layout interno propio
   de esta sección: número, título, párrafo y check-list en columna.
   ========================================================================== */

/* Familia, peso, line-height y color vienen de .aq-display-number
   (base/typography.css, aplicada en el HTML junto a esta clase); acá
   solo el tamaño y el margen propios de Servicios. */
.aq-service-card__number {
	font-size: var(--aq-fs-h3);
	margin-bottom: var(--aq-space-3);
}

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

.aq-trayectoria-card__text {
	margin-bottom: var(--aq-space-4);
   color: var(--aq-text-2);
   
}


/* --------------------------------------------------------------------
   FONDO ALTERNO FULL-BLEED (cambio de diseño posterior a la maqueta
   original de esta sección).

   Requisito real: el color de fondo debe cubrir el ancho COMPLETO del
   viewport bajo cada pareja de cards (1-2 blancas, 3-4 gris), no solo
   el rectángulo de la card ni el ancho del .container. Por eso el
   fondo NO se pinta en .aq-service-card ni en .col: un elemento
   anidado dentro de .container nunca puede pintar más allá del
   padding/margen de ese .container, sin importar qué nth-child se le
   aplique — el límite es estructural, no de selector.

   Solución: cada pareja de servicios vive en su propia franja
   (.aq-service-band), hermana de .container, no hija de él. La franja
   se expande a 100vw con el truco left:50%/margin-left:-50vw (se
   independiza de dónde esté anidada) y CONTIENE su propio .container
   que centra las 2 cards de esa pareja. El color de fondo se pinta en
   la franja; el contenido queda centrado adentro por su .container
   interno.

   Esto además simplifica el separador: cada franja tiene EXACTAMENTE
   2 columnas, así que ya no hace falta la aritmética nth-child(4n+3)/
   nth-child(4n+4) que dependía de que las 4 cards vivieran en un único
   .row de 4 ítems. Ahora es simplemente "la 2ª columna de esta franja".

   Con N servicios impar, la última franja tiene 1 sola .col:
   justify-content-center la centra igual, y al no existir
   nth-child(2) no se pinta ningún separador suelto.
   -------------------------------------------------------------------- */

.aq-service-band {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.aq-fondo-w {
	background-color: var(--aq-white);
}
.aq-fondo-b {
	background-color: var(--aq-gray-panel);
}

/* --------------------------------------------------------------------
   SEPARADOR — un elemento independiente, nunca el borde de la card:
   un border-left/border-top queda pegado al canto de la 2ª card, no
   centrado en el límite compartido, y se ve descolgado. Con el gutter
   horizontal en cero (gx-0, ver abajo), ese límite es un punto único
   (las cards se tocan ahí), así que el pseudo-elemento se ancla
   exactamente encima con translateX/Y(-50%) — a caballo entre ambas,
   sin pertenecer a ninguna. Su tamaño va inset por --aq-card-padding
   (no llega de borde a borde): esa altura/ancho propio, menor que la
   de la card, es justamente lo que lo distingue de un border.

   Se pinta en la 2ª card de la pareja (.aq-service-pair > .col:
   nth-child(2)) — ya no nth-child(2n), porque cada franja solo
   contiene 2 columnas, no las 4 juntas.

   Mobile-first: la base es la pareja apilada (línea horizontal, en el
   límite superior de la 2ª card). Desde `lg` (row-cols-lg-2) la pareja
   queda lado a lado y el límite pasa a vertical (línea a la izquierda
   de la 2ª card).
   -------------------------------------------------------------------- */

.aq-service-pair > .col:nth-child(2) .aq-service-card {
	position: relative;
}

.aq-service-pair > .col:nth-child(2) .aq-service-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--aq-card-padding);
	right: var(--aq-card-padding);
	height: var(--aq-border-width);
	background-color: var(--aq-gold);
	transform: translateY(-50%);
}

@media (min-width: 992px) {
	.aq-service-pair > .col:nth-child(2) .aq-service-card::before {
		top: var(--aq-card-padding);
		bottom: var(--aq-card-padding);
		left: 0;
		right: auto;
		width: var(--aq-border-width);
		height: auto;
		transform: translateX(-50%);
	}
}