/*
 * Formación (WP-01D4-B) — KNOWLEDGE SYSTEM + LEARNING PATH + REAL COURSES, inmediatamente después
 * de Research Membership. Deliberadamente distinta de Pillars (evidencia grande + texto),
 * Technology FLOW (nodos circulares de infraestructura) y Latest Research/Membership (7/5 con
 * panel/evidencia): aquí la pieza central es una TRAYECTORIA tipográfica horizontal (Learning
 * Path), no un diagrama de sistema ni un panel de precios.
 * Ritmo: blanco (intro) -> banda navy-950 full-bleed (Learning Path, mismo patrón full-width-
 * surface/constrained-inner-content del Header/Technology) -> blanco (los 2 cursos) -- alternancia
 * DENTRO de la propia sección, distinta de cómo el resto de Home solo alterna superficie ENTRE
 * secciones. Sin colores nuevos: solo navy-950/white/blue-brand/gray-* de DS-002.
 * Los dos cursos son entradas editoriales (no cards): la asimetría 3fr/2fr entre AmiBroker y Pairs
 * Trading refleja la asimetría real de metadata confirmada (AmiBroker tiene módulos+precio; Pairs
 * Trading solo precio, ver WP-01D4-A1), no una decisión estética arbitraria.
 * WP-01D4-R1: se retira el Visual Evidence (SMQVIS-000220) del Recorrido Formativo -- rompía la
 * uniformidad tipográfica de las 8 etapas; el asset productivo y su provenance permanecen intactos
 * para uso futuro, solo se deja de referenciar aquí. El recorrido pasa a apoyarse exclusivamente en
 * tipografía/numeración/líneas editoriales/microdescriptores, con la banda navy más compacta.
 */
.smq-formacion {
	width: 100%;
	background: var(--smq-white);
	padding: var(--smq-space-6) 0 0;
}
.smq-formacion-inner {
	width: min(1440px, calc(100% - 48px));
	margin-inline: auto;
}

.smq-formacion-head {
	max-width: 720px;
	margin-bottom: var(--smq-space-6);
}
.smq-formacion-eyebrow {
	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 0 var(--smq-space-2);
}
.smq-formacion-heading {
	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 0 var(--smq-space-2);
}
.smq-formacion-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: 62ch;
}

/* ---- Learning Path: banda navy full-bleed (mismo patrón full-width-surface del Header/
   Technology) -- trayectoria tipográfica, no nodos de infraestructura. ---- */
.smq-formacion-path-band {
	width: 100%;
	background: var(--smq-navy-950);
	/* Banda compacta (~190-210px reales en 1440 con el contenido actual): padding reducido de
	   space-5 a space-4, ya no reserva espacio para ningún Visual Evidence. */
	padding: var(--smq-space-4) 0;
}
.smq-formacion-path-inner {
	width: min(1440px, calc(100% - 48px));
	margin-inline: auto;
}
/* WP-01D4-R1: "Recorrido Formativo" en --smq-blue-brand (evidencia/dato editorial, no una acción
   -- --smq-blue-interactive queda reservado a interacciones). Destaca sobre el navy pero se
   mantiene subordinado en tamaño al H2 de la introducción. */
.smq-formacion-path-label {
	font-family: var(--smq-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--smq-blue-brand);
	margin: 0 0 var(--smq-space-3);
}
.smq-formacion-path {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.smq-formacion-step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--smq-space-1);
	flex: 1 1 0;
	min-width: 100px;
}
.smq-formacion-step-index {
	font-family: var(--smq-font-mono);
	font-size: 0.68rem;
	color: var(--smq-gray-400);
}
.smq-formacion-step-label {
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--smq-white);
	white-space: nowrap;
}
/* Microdescriptor -- lectura secundaria, nunca compite con el nombre de la etapa. */
.smq-formacion-step-descriptor {
	font-family: var(--smq-font-text);
	font-weight: 400;
	font-size: 0.72rem;
	line-height: 1.35;
	color: var(--smq-gray-400);
	max-width: 15ch;
}
/* Conector editorial (línea corta), no un pseudo-elemento de flecha -- estructura de la
   trayectoria, no una Signature Geometry nueva. Alineado a la altura del índice/nombre, no al
   microdescriptor, para que siga leyéndose como conector de la secuencia y no del texto. */
.smq-formacion-step-connector {
	flex: 0 1 var(--smq-space-6);
	align-self: flex-start;
	margin-top: 14px;
	height: 1px;
	background: var(--smq-navy-700);
	margin-left: var(--smq-space-1);
	margin-right: var(--smq-space-1);
	min-width: var(--smq-space-3);
}

/* ---- Los dos cursos: entradas editoriales, asimetría real (no forzada) por metadata
   disponible -- AmiBroker tiene módulos+precio, Pairs Trading solo precio. ---- */
/* WP-01D4-R1: la línea superior/inferior pasa a ser del CONTENEDOR (un único sistema formativo),
   no de cada curso por separado; un divisor vertical sutil entre ambos refuerza la lectura de
   "dos entradas dentro del mismo sistema" sin convertirlas en cards. */
.smq-formacion-courses {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: var(--smq-space-7);
	padding: var(--smq-space-6) 0 var(--smq-space-5);
	margin-top: var(--smq-space-1);
	border-top: 1px solid var(--smq-gray-200);
	border-bottom: 1px solid var(--smq-gray-200);
}
.smq-formacion-course {
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-2);
}
.smq-formacion-course + .smq-formacion-course {
	border-left: 1px solid var(--smq-gray-200);
	padding-left: var(--smq-space-7);
}
.smq-formacion-course-meta {
	font-family: var(--smq-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--smq-blue-brand);
	margin: 0;
}
.smq-formacion-course-title {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--smq-navy-950);
	margin: 0;
}
.smq-formacion-course-descriptor {
	font-family: var(--smq-font-text);
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--smq-gray-600);
	margin: 0;
	max-width: 48ch;
}
.smq-formacion-course-cta {
	margin: var(--smq-space-1) 0 0;
}
/* WP-01D4-R1: algo más de margen que el CTA de cada curso -- el CTA global vive justo debajo del
   borde inferior compartido de .smq-formacion-courses, leyéndose como parte del mismo conjunto
   editorial (no aislado a media altura de un gran hueco vacío). */
.smq-formacion-global-cta {
	margin: var(--smq-space-4) 0 0;
}
.smq-formacion-course-cta a,
.smq-formacion-global-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-formacion-course-cta a:hover,
.smq-formacion-course-cta a:focus-visible,
.smq-formacion-global-cta a:hover,
.smq-formacion-global-cta a:focus-visible {
	color: var(--smq-blue-interactive-strong);
	border-color: var(--smq-blue-interactive-strong);
}
.smq-formacion-global-cta {
	padding-bottom: var(--smq-space-6);
}

/* Baseline responsive (WEB-014): 375 / 768 / 1440px */
@media (max-width: 768px) {
	.smq-formacion-inner,
	.smq-formacion-path-inner {
		width: calc(100% - 32px);
	}
	.smq-formacion-path {
		gap: var(--smq-space-4) var(--smq-space-2);
	}
	.smq-formacion-step {
		flex: 1 1 40%;
		min-width: 120px;
	}
	.smq-formacion-step-connector {
		display: none;
	}
	.smq-formacion-courses {
		grid-template-columns: 1fr;
		gap: var(--smq-space-5);
	}
	/* El divisor vertical entre cursos no tiene sentido en una sola columna -- se sustituye por
	   una línea horizontal entre ambos, misma función editorial en vertical. */
	.smq-formacion-course + .smq-formacion-course {
		border-left: none;
		padding-left: 0;
		padding-top: var(--smq-space-5);
		border-top: 1px solid var(--smq-gray-200);
	}
}
@media (max-width: 375px) {
	.smq-formacion-path {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--smq-space-4) var(--smq-space-3);
	}
	.smq-formacion-step {
		min-width: 0;
	}
}