/*
 * Tecnología / SMQ MT5 Bridge (WP-01D6), inmediatamente después de Estrategias. Banda propia
 * full-bleed navy-950 (mismo patrón full-width-surface/constrained-inner-content ya usado en
 * Header y en la banda Tecnología de Pillars, WP-01C-R5) -- diferenciación deliberada frente a
 * Estrategias (superficie blanca, evidencia/resultados de backtest): esta sección es
 * arquitectura/flujo de sistema, no evidencia cuantitativa, y no debe leerse como intercambiable
 * con Momentum (MVP §4.9 / VISUAL REFINEMENT V3 aplican el mismo principio de peso subordinado).
 * Fuente: capacidades confirmadas del proyecto (BUY/CLOSE/PARTIAL CLOSE, pending orders, Trade
 * Guard, notificaciones Telegram, registro CSV, flujo AmiBroker↔Python↔MT5). Sin precio público
 * (pricing no congelado por MOTOR CENTRAL para Website Production) y sin exponer los límites
 * históricos de FREE_PROMO como funcionalidad vigente. Comunicación de "entorno demo"
 * deliberadamente conservadora -- ver docs/website-production/WP01D6_IMPLEMENTATION.md.
 */
.smq-technology {
	width: 100%;
	background: var(--smq-navy-950);
	color: var(--smq-white);
	padding: var(--smq-space-6) 0;
}
.smq-technology-inner {
	width: min(1440px, calc(100% - 48px));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-5);
}

.smq-technology-head {
	max-width: 760px;
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-3);
}
.smq-technology-eyebrow-row {
	display: flex;
	align-items: center;
	gap: var(--smq-space-3);
}
.smq-technology-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;
	white-space: nowrap;
}
.smq-technology-eyebrow-rule {
	flex: 1 1 auto;
	height: 1px;
	background: var(--smq-navy-700);
	min-width: 0;
}
.smq-technology-heading {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
	line-height: 1.25;
	color: var(--smq-white);
	margin: 0;
}
.smq-technology-lead {
	font-family: var(--smq-font-text);
	font-weight: 400;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--smq-gray-400);
	margin: 0;
}

/* Flujo AmiBroker -> Python -> SMQ MT5 Bridge -> MetaTrader 5. Mismo lenguaje de nodo+conector ya
   establecido en Pillars (círculo con borde blue-brand sobre navy-900, conector con línea y
   opacidad) -- reescalado a cuatro nodos, no una identidad visual nueva. El nodo del propio
   puente se distingue con relleno blue-brand (identidad del producto dentro de su propio flujo). */
.smq-technology-flow {
	display: flex;
	align-items: center;
	width: 100%;
}
.smq-technology-flow-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--smq-space-2);
	text-align: center;
	flex: 0 0 auto;
	width: 130px;
}
.smq-technology-flow-node-icon {
	width: 64px;
	height: 64px;
	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.8rem;
	color: var(--smq-blue-brand);
	background: var(--smq-navy-900);
}
.smq-technology-flow-node--bridge .smq-technology-flow-node-icon {
	background: var(--smq-blue-brand);
	color: var(--smq-navy-950);
	border-color: var(--smq-blue-brand);
}
.smq-technology-flow-node-label {
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--smq-white);
}
.smq-technology-flow-connector {
	flex: 1 1 auto;
	height: 2px;
	background: var(--smq-blue-brand);
	opacity: 0.55;
	min-width: var(--smq-space-3);
}

/* Señales de capacidad -- tira compacta, mismo lenguaje mono/uppercase que el resto del sistema,
   adaptado a la banda navy (blanco/gray-400 en vez de navy-950/gray-600). */
.smq-technology-signals {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smq-space-4) var(--smq-space-3);
	padding-top: var(--smq-space-4);
	border-top: 1px solid var(--smq-navy-700);
}
.smq-technology-signal {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 0;
	min-width: 100px;
}
.smq-technology-signal-label {
	font-family: var(--smq-font-mono);
	font-size: 0.64rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smq-gray-400);
}
.smq-technology-signal-value {
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--smq-white);
}

.smq-technology-footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--smq-space-4);
}
/* Estado de desarrollo comunicado de forma conservadora -- pill neutro (mismo radio/tratamiento
   de pill ya usado en las señales de AmiBroker de Formación), sin alarmar ni prometer. */
.smq-technology-status {
	font-family: var(--smq-font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smq-navy-950);
	background: var(--smq-blue-brand);
	border-radius: 4px;
	padding: 4px 10px;
}
.smq-technology-cta {
	margin: 0;
}
/* Mismo botón T005 ya usado por Estrategias/Formación -- radio 4px, --smq-blue-interactive-strong (DS-A11Y-01),
   hover/focus a --smq-blue-brand. Informativo, sin checkout. */
.smq-technology-cta-link {
	display: inline-flex;
	align-items: center;
	gap: var(--smq-space-2);
	background: var(--smq-blue-interactive-strong);
	color: var(--smq-white);
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border-radius: 4px;
	padding: var(--smq-space-2) var(--smq-space-4);
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.smq-technology-cta-link:hover,
.smq-technology-cta-link:focus-visible {
	background: var(--smq-blue-brand);
	transform: translateY(-1px);
}

/* Baseline responsive (WEB-014): 375 / 768 / 1440px. En vertical, el flujo pasa de fila a
   columna -- mismos nodos y conectores, conector como línea corta vertical en vez de horizontal
   flexible. Los nodos son texto/CSS, no imágenes: sin riesgo de desbordamiento por tamaño
   intrínseco (la clase de fallo corregida en Estrategias no aplica aquí). */
@media (max-width: 768px) {
	.smq-technology {
		padding: var(--smq-space-5) 0;
	}
	.smq-technology-inner {
		width: calc(100% - 32px);
		gap: var(--smq-space-4);
	}
	.smq-technology-flow {
		flex-direction: column;
	}
	.smq-technology-flow-connector {
		width: 2px;
		height: 28px;
		min-width: 0;
		flex: 0 0 auto;
	}
}
@media (max-width: 375px) {
	.smq-technology-eyebrow-rule {
		display: none;
	}
	.smq-technology-flow-node {
		width: 100px;
	}
	.smq-technology-flow-node-icon {
		width: 52px;
		height: 52px;
		font-size: 0.7rem;
	}
	.smq-technology-signals {
		flex-direction: column;
	}
}