/*
 * PAIRS-COURSE-WP-01 — Curso Avanzado de Pairs Trading con Python y AmiBroker.
 * Governed by docs/seo/page-contracts/SEO_PAGE_CONTRACT_PAIRS_COURSE_V1.md (frozen).
 * Reuses the shared, sitewide `.smq-course-*` primitives already established by
 * course-amibroker.css (hero shell, section rhythm, evidence frame, price panel, module
 * accordion, FAQ pattern) -- those are DS-002 course-page components, loaded globally by
 * functions.php, and are NOT redefined here to avoid duplicate/colliding rules. This file adds
 * only the new, Pairs-specific classes (`.smq-pairs-*`) needed to give this page its own visual
 * identity around TWO ASSETS / RELATIONSHIP / CORRELATION / COINTEGRATION / SPREAD, per instruction
 * not to clone the AmiBroker course page. Same overflow-safe grid discipline (minmax(0, Nfr) +
 * min-width: 0) applied from the outset.
 */

/* ================= HERO — dual-trajectory motif + restrained discount line ================= */
.smq-pairs-motif {
	flex: none;
	width: 32px;
	height: 16px;
}
/* WP01R1: unified discount presentation (hero + price panel share the same navy-950 background,
   so one component works in both places) -- a small "Alumnos SMQuantum" tag followed by the
   benefit, framed as an ecosystem perk rather than a bare sentence. */
.smq-pairs-discount-note {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--smq-space-2);
	font-family: var(--smq-font-text);
	font-weight: 400;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--smq-gray-400);
	margin: 0;
	max-width: 48ch;
}
.smq-pairs-discount-tag {
	flex: none;
	font-family: var(--smq-font-mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smq-blue-brand);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	padding: 3px 9px;
}

/* ================= QUÉ ES EL ENFOQUE — relación entre dos activos =================
   WP01R1: la rejilla original solo definía 3 columnas para 5 elementos (nodo, conector, nodo
   central, conector, nodo) -- el 4º y 5º elemento caían a una segunda fila en desktop. Corregido a
   5 columnas explícitas, con las columnas de conector más estrechas (auto) que las de nodo. */
.smq-pairs-relation {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(28px, 56px) minmax(0, 1.3fr) minmax(28px, 56px) minmax(0, 1fr);
	align-items: center;
	gap: var(--smq-space-2);
	margin-top: var(--smq-space-6);
}
.smq-pairs-relation-node {
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--smq-space-4);
	background: var(--smq-white);
	border: 1px solid var(--smq-gray-200);
	border-radius: 4px;
}
.smq-pairs-relation-node--center {
	background: var(--smq-navy-950);
	border-color: var(--smq-navy-950);
}
.smq-pairs-relation-node--center .smq-pairs-relation-label {
	color: var(--smq-white);
}
.smq-pairs-relation-label {
	font-family: var(--smq-font-text);
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--smq-navy-950);
}
.smq-pairs-relation-link {
	position: relative;
	flex: none;
	height: 1px;
	width: 100%;
	background: repeating-linear-gradient(90deg, var(--smq-blue-brand) 0 6px, transparent 6px 12px);
}
.smq-pairs-relation-link::before,
.smq-pairs-relation-link::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--smq-blue-brand);
	border-right: 2px solid var(--smq-blue-brand);
}
.smq-pairs-relation-link::before {
	left: 0;
	transform: translate(-1px, -50%) rotate(-135deg);
}
.smq-pairs-relation-link::after {
	right: 0;
	transform: translate(1px, -50%) rotate(45deg);
}

/* ================= QUÉ VAS A APRENDER — 3×2 en desktop =================
   `.smq-course-benefits` es una primitiva compartida (course-amibroker.css la usa a 5 columnas
   para sus 5 tarjetas reales) -- no se toca esa regla de base. Este selector compuesto, más
   específico, la sobreescribe solo cuando aparece junto a `.smq-pairs-capabilities`, para las 6
   capacidades de esta página sin afectar a la página de AmiBroker. */
.smq-course-benefits.smq-pairs-capabilities {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ================= AMIBROKER + PYTHON — reparto de roles ================= */
.smq-pairs-roles {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--smq-space-3);
	margin-top: var(--smq-space-4);
}
.smq-pairs-role {
	min-width: 0;
	padding: var(--smq-space-3) var(--smq-space-4);
	background: var(--smq-gray-50);
	border: 1px solid var(--smq-gray-200);
	border-radius: 4px;
}
.smq-pairs-role-label {
	font-family: var(--smq-font-mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smq-blue-brand);
	margin: 0 0 4px;
}
.smq-pairs-role-desc {
	font-family: var(--smq-font-text);
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--smq-gray-600);
	margin: 0;
}

/* ================= REGLAS DE OPERATIVA — microvisualización conceptual =================
   Deliberadamente distinta, en trazo, del stepper circular (Backtesting) y de los chips en
   píldora (Operativa diaria): índices cuadrados con contorno, para que las tres progresiones de la
   página no se lean como el mismo componente repetido tres veces. */
.smq-pairs-rule-flow {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--smq-space-4);
	margin-top: var(--smq-space-6);
	padding: var(--smq-space-5);
	background: var(--smq-white);
	border: 1px solid var(--smq-gray-200);
	border-radius: 4px;
}
.smq-pairs-rule-flow-step {
	position: relative;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--smq-space-2);
}
.smq-pairs-rule-flow-step:not(:last-child)::after {
	content: "→";
	position: absolute;
	top: 6px;
	right: calc(var(--smq-space-4) * -1 + 2px);
	color: var(--smq-blue-brand);
	font-family: var(--smq-font-display);
	font-weight: 700;
}
.smq-pairs-rule-flow-index {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 2px solid var(--smq-blue-brand);
	border-radius: 4px;
	color: var(--smq-blue-brand);
	font-family: var(--smq-font-mono);
	font-size: 0.78rem;
	font-weight: 700;
	flex: none;
}
.smq-pairs-rule-flow-label {
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.82rem;
	color: var(--smq-navy-950);
}

/* ================= QUÉ INCLUYE — seis elementos reales, no un tile solitario ================= */
.smq-pairs-includes-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--smq-space-3);
	margin-bottom: var(--smq-space-5);
}
.smq-pairs-includes-badge {
	flex: none;
	font-family: var(--smq-font-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smq-white);
	background: var(--smq-navy-950);
	border-radius: 999px;
	padding: 4px var(--smq-space-3);
}
.smq-pairs-includes-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--smq-space-4);
}
.smq-pairs-includes-card {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-2);
	padding: var(--smq-space-4);
	background: var(--smq-white);
	border: 1px solid var(--smq-gray-200);
	border-radius: 4px;
}
.smq-pairs-includes-icon {
	width: 22px;
	height: 22px;
	color: var(--smq-blue-brand);
}
.smq-pairs-includes-label {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: 0.94rem;
	color: var(--smq-navy-950);
	margin: 0;
}
.smq-pairs-includes-desc {
	font-family: var(--smq-font-text);
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--smq-gray-600);
	margin: 0;
}

/* ================= CORRELACIÓN ≠ COINTEGRACIÓN — panel de contraste ================= */
.smq-pairs-compare {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--smq-space-4);
	margin: var(--smq-space-6) 0;
}
.smq-pairs-compare-col {
	min-width: 0;
	padding: var(--smq-space-4) var(--smq-space-5);
	background: var(--smq-white);
	border: 1px solid var(--smq-gray-200);
	border-top: 3px solid var(--smq-gray-400);
	border-radius: 4px;
}
.smq-pairs-compare-col--positive {
	border-top-color: var(--smq-blue-brand);
}
.smq-pairs-compare-label {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--smq-navy-950);
	margin: 0 0 var(--smq-space-2);
}
.smq-pairs-compare-desc {
	font-family: var(--smq-font-text);
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--smq-gray-600);
	margin: 0;
}
.smq-pairs-compare-sign {
	flex: none;
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--smq-gray-400);
}
.smq-pairs-compare-evidence {
	background: var(--smq-white);
	border: 1px solid var(--smq-gray-200);
	aspect-ratio: auto;
}
.smq-pairs-compare-evidence .smq-course-evidence-media {
	object-fit: contain;
	background: var(--smq-white);
}

/* ================= SPREAD — oscilación conceptual nativa (sin datos reales) ================= */
.smq-pairs-oscillation {
	margin-top: var(--smq-space-6);
	padding: var(--smq-space-5);
	background: var(--smq-white);
	border: 1px solid var(--smq-gray-200);
	border-radius: 4px;
}
.smq-pairs-oscillation-tag {
	display: inline-block;
	font-family: var(--smq-font-mono);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smq-white);
	background: var(--smq-navy-950);
	border-radius: 4px;
	padding: 4px 10px;
	margin-bottom: var(--smq-space-3);
}
.smq-pairs-oscillation svg {
	display: block;
	width: 100%;
	height: 80px;
}
.smq-pairs-oscillation-caption {
	margin: var(--smq-space-3) 0 0;
	font-family: var(--smq-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	color: var(--smq-gray-400);
	text-align: center;
}

/* ================= OPERATIVA DIARIA — flujo cuantitativo =================
   WP01R1: envuelto en una tarjeta propia (fondo, borde, padding) para darle más protagonismo
   visual frente al resto de la página, con una línea de cierre explícita y el acento de Signature
   Geometry ampliado e integrado dentro de la tarjeta (antes flotaba, aislado, bajo la sección). */
.smq-pairs-flow-card {
	position: relative;
	margin-top: var(--smq-space-6);
	padding: var(--smq-space-6) var(--smq-space-5);
	background: var(--smq-white);
	border: 1px solid var(--smq-gray-200);
	border-radius: 4px;
	overflow: hidden;
}
.smq-pairs-flow {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--smq-space-2);
}
.smq-pairs-flow-step {
	min-width: 0;
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.82rem;
	color: var(--smq-navy-950);
	background: var(--smq-white);
	border: 1px solid var(--smq-gray-200);
	border-radius: 999px;
	padding: var(--smq-space-2) var(--smq-space-4);
	white-space: nowrap;
}
.smq-pairs-flow-step:not(:last-child)::after {
	content: "→";
	margin-left: var(--smq-space-2);
	color: var(--smq-blue-brand);
}
.smq-pairs-flow-step--final {
	background: var(--smq-navy-950);
	border-color: var(--smq-navy-950);
	color: var(--smq-white);
}
.smq-pairs-flow-result {
	position: relative;
	z-index: 1;
	margin: var(--smq-space-4) 0 0;
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--smq-navy-950);
}
.smq-pairs-flow-signature {
	position: absolute;
	right: -16px;
	top: -16px;
	width: 100px;
	height: 100px;
	opacity: 0.08;
	pointer-events: none;
	z-index: 0;
}

/* ================= PARA QUIÉN ES — no/sí en dos columnas ================= */
.smq-pairs-audience {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--smq-space-5);
	margin: var(--smq-space-5) 0;
}
.smq-pairs-audience-col {
	min-width: 0;
	padding: var(--smq-space-5);
	background: var(--smq-white);
	border: 1px solid var(--smq-gray-200);
	border-top: 3px solid var(--smq-gray-400);
	border-radius: 4px;
}
.smq-pairs-audience-col--positive {
	border-top-color: var(--smq-blue-brand);
}
.smq-pairs-audience-label {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--smq-navy-950);
	margin: 0 0 var(--smq-space-3);
}
.smq-pairs-audience-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-2);
}
.smq-pairs-audience-list li {
	font-family: var(--smq-font-text);
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--smq-gray-600);
}

/* Precio: el panel de precio reutiliza `.smq-pairs-discount-note`/`.smq-pairs-discount-tag`
   (definidos junto al Hero), con un pequeño ajuste de margen superior para el contexto del panel. */
.smq-course-price-panel-text .smq-pairs-discount-note {
	margin-top: var(--smq-space-2);
}

/* ================= Baseline responsive (WEB-014): 320 / 375 / 768 / 1024 / 1280 / 1440 ================= */
@media (max-width: 1024px) {
	.smq-pairs-flow {
		gap: var(--smq-space-3);
	}
	.smq-course-benefits.smq-pairs-capabilities {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 768px) {
	.smq-pairs-relation {
		grid-template-columns: 1fr;
		justify-items: center;
	}
	.smq-pairs-relation-node {
		width: 100%;
		max-width: 320px;
	}
	.smq-pairs-relation-link {
		width: 1px;
		height: 28px;
		margin-inline: auto;
	}
	.smq-pairs-relation-link::before,
	.smq-pairs-relation-link::after {
		display: none;
	}
	.smq-pairs-relation-link::after {
		display: block;
		content: "";
		top: auto;
		bottom: 0;
		left: 50%;
		right: auto;
		width: 7px;
		height: 7px;
		border-top: none;
		border-right: 2px solid var(--smq-blue-brand);
		border-bottom: 2px solid var(--smq-blue-brand);
		transform: translate(-50%, 3px) rotate(45deg);
	}
	.smq-pairs-compare {
		grid-template-columns: 1fr;
	}
	.smq-pairs-compare-sign {
		justify-self: center;
	}
	.smq-pairs-roles {
		grid-template-columns: 1fr;
	}
	.smq-pairs-rule-flow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.smq-pairs-rule-flow-step:not(:last-child)::after {
		display: none;
	}
	.smq-pairs-includes-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.smq-pairs-audience {
		grid-template-columns: 1fr;
	}
	.smq-pairs-flow-signature {
		width: 72px;
		height: 72px;
	}
}
@media (max-width: 480px) {
	.smq-course-benefits.smq-pairs-capabilities {
		grid-template-columns: 1fr;
	}
	.smq-pairs-rule-flow {
		grid-template-columns: 1fr;
	}
	.smq-pairs-includes-grid {
		grid-template-columns: 1fr;
	}
	.smq-pairs-flow-step {
		font-size: 0.76rem;
		padding: var(--smq-space-2) var(--smq-space-3);
	}
}