/*
 * WP-01D1 — Home Pillars (Research / Formación / Tecnología) + Visual Evidence component.
 * WP-01D1-R1: ronda de refinamiento quirúrgico tras revisión visual.
 * - Research/Formación: se mantiene la fila asimétrica 7/5, pero el frame de Research pasa a un
 *   aspect-ratio más ancho/corto (16:10) para reducir su peso vertical sin tocar el asset ni
 *   recortar más agresivamente que antes; Formación gana una franja de acento superior propia
 *   para leerse como pieza intencional, no como captura pegada.
 * - Visual Evidence: el label pasa a ir ANTES del frame (como un rótulo técnico de figura), con
 *   una regla horizontal de separación — lenguaje más "technical editorial", menos "caption suelto
 *   debajo de una imagen".
 * - Tecnología: dejó de ser una fila más dentro de la superficie clara y pasa a ser su propia
 *   banda full-bleed navy-950 (mismo patrón full-width-surface/constrained-inner-content ya usado
 *   en el Header), con el pipeline a ancho completo y mayor escala -- cierre visual fuerte de
 *   Pillars, leído como una sola composición con Research/Formación (sin salto de whitespace).
 * Tokens: solo navy-950/white/blue-brand/blue-interactive/grises DS-002 y la tipografía ya
 * establecida — ningún color ni gradiente nuevo.
 */
.smq-pillars {
	width: 100%;
	background: var(--smq-white);
	/* WP-01D1-R3: solo se reduce el padding SUPERIOR (64px -> 40px, -37.5%, dentro del rango
	   solicitado) para dejar una pausa editorial breve pero clara tras Magnitudes R2 -- sin pegar
	   ambas superficies. El padding inferior (hacia el resto de Pillars/Technology) no cambia. */
	padding: 40px 0 var(--smq-space-6);
}
.smq-pillars-intro {
	width: min(1440px, calc(100% - 48px));
	margin-inline: auto;
	margin-bottom: var(--smq-space-5);
}
.smq-pillars-eyebrow {
	font-family: var(--smq-font-text);
	font-weight: 500;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--smq-gray-600);
	margin: 0;
}

.smq-pillars-row {
	width: min(1440px, calc(100% - 48px));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: var(--smq-space-7);
	align-items: start;
}

.smq-pillar {
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-4);
}
.smq-pillar-label {
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--smq-blue-brand);
	margin: 0;
}
.smq-pillar-concept {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
	line-height: 1.2;
	color: var(--smq-navy-950);
	margin: 0;
}
.smq-pillar-descriptor {
	font-family: var(--smq-font-text);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--smq-gray-600);
	margin: 0;
	max-width: 46ch;
}
.smq-pillar-cta {
	margin: var(--smq-space-1) 0 0;
}
/* CTA discreto: enlace de texto, no un botón relleno -- explícitamente más discreto que el T005
   del Hero ("Explorar Research"). */
.smq-pillar-cta a {
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--smq-navy-950);
	text-decoration: none;
	border-bottom: 1px solid var(--smq-gray-200);
	padding-bottom: 2px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.smq-pillar-cta a:hover,
.smq-pillar-cta a:focus-visible {
	color: var(--smq-blue-interactive-strong);
	border-color: var(--smq-blue-interactive-strong);
}

/* ---- Visual Evidence component (reutilizable: SCREEN / CODE / CHART / DATA / FLOW) ----
   WP-01D1-R1: el label ahora precede al frame (rótulo técnico de figura, no caption colgante) y
   lleva una regla horizontal corta como separador -- refuerza la lectura "evidencia catalogada",
   no "imagen suelta con pie de foto". */
.smq-evidence {
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-2);
}
.smq-evidence-label {
	display: flex;
	align-items: center;
	gap: var(--smq-space-2);
	font-family: var(--smq-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--smq-gray-600);
	margin: 0;
}
.smq-evidence-label::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--smq-gray-200);
}
.smq-evidence-frame {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--smq-navy-950);
	border: 1px solid var(--smq-gray-200);
}
/* SG-02 — corte direccional 45° en una única esquina, como en T005/T001/T003 (nunca las cuatro).
   Aquí marca la esquina del frame de evidencia como firma de sistema, no decoración libre. */
.smq-evidence-frame::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 22px;
	height: 22px;
	background: var(--smq-blue-brand);
	clip-path: polygon(100% 0, 0 0, 100% 100%);
	pointer-events: none;
}
.smq-evidence-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.smq-evidence-caption {
	font-family: var(--smq-font-mono);
	font-size: 0.72rem;
	color: var(--smq-gray-600);
	margin: 0;
}

/* Research: aspect-ratio más ancho/corto (antes 4:3) para reducir el peso vertical del bloque sin
   tocar el asset -- sigue siendo crop no destructivo vía object-fit:cover. */
.smq-evidence--research .smq-evidence-frame {
	aspect-ratio: 16 / 10;
}
/* Formación: misma proporción que antes (ya casi exacta al original, mínimo crop), más una franja
   de acento superior propia (no decoración libre -- mismo blue-brand del sistema) para que se lea
   como pieza tratada, no como captura insertada sin más. */
.smq-evidence--formacion .smq-evidence-frame {
	aspect-ratio: 3 / 2;
	background: var(--smq-white);
	border-top: 3px solid var(--smq-blue-brand);
}

/* ---- Tecnología: banda propia full-bleed navy-950 (mismo patrón full-width-surface /
   constrained-inner-content del Header, WP-01C-R5) -- cierre visual fuerte de Pillars, leído como
   una sola composición con Research/Formación (sin margen de separación grande). ---- */
.smq-pillars-tech {
	width: 100%;
	background: var(--smq-navy-950);
	color: var(--smq-white);
	padding: var(--smq-space-6) 0;
}
.smq-pillars-tech-inner {
	width: min(1440px, calc(100% - 48px));
	margin-inline: auto;
}
.smq-pillars-tech-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--smq-space-4);
	margin-bottom: var(--smq-space-5);
}
.smq-pillars-tech-copy {
	max-width: 640px;
}
.smq-pillars-tech .smq-pillar-concept {
	color: var(--smq-white);
}
.smq-pillars-tech .smq-pillar-descriptor {
	color: var(--smq-gray-400);
}
.smq-pillars-tech .smq-pillar-cta a {
	color: var(--smq-white);
	border-bottom-color: var(--smq-navy-700);
}
.smq-pillars-tech .smq-pillar-cta a:hover,
.smq-pillars-tech .smq-pillar-cta a:focus-visible {
	color: var(--smq-blue-interactive);
	border-color: var(--smq-blue-interactive);
}

/* Pipeline a ancho completo, mayor escala -- arquitectura de sistema, no diagrama genérico. */
.smq-flow {
	display: flex;
	align-items: center;
	width: 100%;
}
.smq-flow-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--smq-space-2);
	text-align: center;
	flex: 0 0 auto;
	width: 120px;
}
.smq-flow-node-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1.5px solid var(--smq-blue-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--smq-font-mono);
	font-weight: 500;
	font-size: 0.78rem;
	color: var(--smq-blue-brand);
	background: var(--smq-navy-900);
}
.smq-flow-node-label {
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.82rem;
	color: var(--smq-white);
}
/* Conector real (línea + punta), no una flecha tipográfica -- lenguaje de diagrama de sistema. */
.smq-flow-connector {
	flex: 1 1 auto;
	height: 2px;
	background: var(--smq-blue-brand);
	opacity: 0.55;
	position: relative;
	margin: 0 var(--smq-space-1) var(--smq-space-5);
	min-width: 24px;
}
.smq-flow-connector::after {
	content: "";
	position: absolute;
	right: -1px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 7px solid var(--smq-blue-brand);
	opacity: 0.85;
}

/* Baseline responsive (WEB-014): 375 / 768 / 1440px */
@media (max-width: 768px) {
	.smq-pillars-intro,
	.smq-pillars-row {
		width: calc(100% - 32px);
	}
	.smq-pillars-row {
		grid-template-columns: 1fr;
		gap: var(--smq-space-6);
	}
	.smq-pillars-tech-inner {
		width: calc(100% - 32px);
	}
	.smq-pillars-tech-head {
		flex-direction: column;
		align-items: flex-start;
	}
	.smq-flow-node {
		width: 88px;
	}
	.smq-flow-node-icon {
		width: 48px;
		height: 48px;
	}
}
@media (max-width: 480px) {
	.smq-flow {
		flex-direction: column;
		align-items: stretch;
		gap: var(--smq-space-3);
	}
	.smq-flow-node {
		width: 100%;
		flex-direction: row;
		text-align: left;
		justify-content: flex-start;
		gap: var(--smq-space-3);
	}
	.smq-flow-connector {
		display: none;
	}
}