/*
 * AMIBROKER-COURSE-WP-01 — Curso Avanzado de Trading Algorítmico con AmiBroker.
 * Copia fiel del diseño aprobado (worktree Commerce Engine, commits 430cf7b + 0ab738b,
 * "Me gusta en términos generales" — Sergio/MOTOR CENTRAL). Reutiliza exclusivamente Brand
 * v1.0/DS-002 (tokens.css) y los patrones visuales ya establecidos en Home (Visual Evidence,
 * flujo de pasos, franjas fact/signal, tarjetas de evidencia con corte SG-02) -- ningún color,
 * fuente, radio o primitiva nuevos. El min-width:0 / minmax(0, 1fr) se aplica desde el origen en
 * toda rejilla, para evitar el desbordamiento por mínimo automático de una imagen de evidencia
 * dentro de una columna de grid.
 */

/* ---- Envoltorio de página ---- */
.smq-course {
	width: 100%;
}
.smq-course-section {
	width: 100%;
	padding: var(--smq-space-7) 0;
}
.smq-course-section--tight {
	padding: var(--smq-space-6) 0;
}
.smq-course-section--alt {
	background: var(--smq-gray-50);
	border-top: 1px solid var(--smq-gray-200);
	border-bottom: 1px solid var(--smq-gray-200);
}
.smq-course-inner {
	width: min(1200px, calc(100% - 48px));
	margin-inline: auto;
}
.smq-course-eyebrow-row {
	display: flex;
	align-items: center;
	gap: var(--smq-space-3);
	margin-bottom: var(--smq-space-3);
}
.smq-course-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-course-eyebrow-rule {
	flex: 1 1 auto;
	height: 1px;
	background: var(--smq-gray-200);
	min-width: 0;
}
.smq-course-h2 {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.25;
	color: var(--smq-navy-950);
	margin: 0 0 var(--smq-space-4);
}
.smq-course-lead {
	font-family: var(--smq-font-text);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--smq-gray-600);
	margin: 0 0 var(--smq-space-5);
	max-width: 72ch;
}

/* ================= HERO ================= */
.smq-course-hero {
	width: 100%;
	background: var(--smq-navy-950);
	padding: var(--smq-space-7) 0;
	position: relative;
	overflow: hidden;
}
.smq-course-hero-row {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: var(--smq-space-6);
	align-items: center;
}
.smq-course-hero-main {
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-4);
	min-width: 0;
}
.smq-course-hero .smq-course-eyebrow {
	color: var(--smq-blue-brand);
}
.smq-course-hero-h1 {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: clamp(1.9rem, 3.4vw, 2.7rem);
	line-height: 1.15;
	color: var(--smq-white);
	margin: 0;
}
.smq-course-hero-lead {
	font-family: var(--smq-font-text);
	font-weight: 400;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--smq-gray-200);
	margin: 0;
	max-width: 62ch;
}
.smq-course-signals {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smq-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.smq-course-signal {
	font-family: var(--smq-font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--smq-white);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	padding: var(--smq-space-2) var(--smq-space-3);
}
.smq-course-price-row {
	display: flex;
	align-items: baseline;
	gap: var(--smq-space-2);
	margin-top: var(--smq-space-2);
}
.smq-course-price {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: 1.8rem;
	color: var(--smq-white);
}
.smq-course-price-note {
	font-family: var(--smq-font-text);
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--smq-gray-400);
}
.smq-course-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--smq-space-4);
	margin-top: var(--smq-space-2);
}
/* WEB-V1-UX-CONTENT-FIX-01: states how the hero call to action is handled while the purchase goes through Contact. */
.smq-course-hero .smq-course-cta-note {
	font-family: var(--smq-font-text);
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--smq-gray-400);
	margin: var(--smq-space-3) 0 0;
}
.smq-course-cta-primary {
	display: inline-flex;
	align-items: center;
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--smq-white);
	background: var(--smq-blue-interactive-strong);
	border-radius: 4px;
	padding: var(--smq-space-3) var(--smq-space-5);
	text-decoration: none;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}
.smq-course-cta-primary:hover,
.smq-course-cta-primary:focus-visible {
	filter: brightness(0.9);
	box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.28);
}
/* DS-A11Y-01: two-tone focus indicator. The white outline (19:1 on navy bands) was invisible where the
   primitive sits on white / gray-50 (1.0 / 1.08:1); the navy-950 inner ring fills the 2px offset gap
   and carries the indicator there (19.2 / 17.7:1), while on navy bands it merges into the surface. */
.smq-course-cta-primary:focus-visible {
	outline: 2px solid var(--smq-white);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--smq-navy-950);
}
.smq-course-cta-secondary {
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--smq-gray-200);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	padding-bottom: 2px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.smq-course-cta-secondary:hover,
.smq-course-cta-secondary:focus-visible {
	color: var(--smq-white);
	border-color: var(--smq-white);
}

/* Sistema de Visual Evidence unificado -- Hero, AFL, Backtesting y Automatización comparten el
   mismo tratamiento (marco + corte SG-02 + etiqueta técnica integrada en el propio marco), para
   que las cuatro se lean como una sola familia de "evidencia real de producto" en vez de capturas
   sueltas. La consistencia viene del TRATAMIENTO, no de forzar proporciones idénticas -- cada
   imagen conserva su aspect-ratio nativo. */
.smq-course-hero-evidence {
	min-width: 0;
	display: flex;
	align-items: center;
	height: 100%;
}
.smq-course-evidence-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 993 / 747;
	overflow: hidden;
	background: var(--smq-navy-900);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 24px 48px -24px rgba(11, 15, 25, 0.55);
}
.smq-course-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;
	z-index: 2;
}
.smq-course-evidence-media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Etiqueta técnica integrada en el propio marco -- mismo rol que el "Chart · ..." /
   "Screen · ..." de pillars.css, aquí como overlay en vez de línea superior separada, para que la
   captura se lea como evidencia anotada y no como una imagen decorativa suelta. */
.smq-course-evidence-tag {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	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: rgba(11, 15, 25, 0.82);
	padding: 6px 10px;
	max-width: calc(100% - 22px);
	box-sizing: border-box;
}

/* ================= QUÉ VAS A APRENDER =================
   Dos niveles de lectura explícitos: NIVEL 1 (5 capacidades, tarjetas reforzadas con numeración y
   acento superior -- "las cinco cosas grandes que vas a poder hacer") y NIVEL 2 (los 11 objetivos
   verificados, bajo una etiqueta "En detalle" y con tipografía más contenida, como soporte técnico
   del nivel 1, no como una segunda lista de igual peso). Ningún contenido se elimina ni se acorta;
   solo cambia la jerarquía tipográfica y de espaciado. */
.smq-course-benefits {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--smq-space-4);
	margin: 0 0 var(--smq-space-7);
}
.smq-course-benefit {
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-3);
	min-width: 0;
	padding: var(--smq-space-4) 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-blue-brand);
	border-radius: 4px;
}
.smq-course-benefit-index {
	font-family: var(--smq-font-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--smq-blue-brand);
	margin: 0;
}
.smq-course-benefit-title {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.35;
	color: var(--smq-navy-950);
	margin: 0;
}
.smq-course-objectives-eyebrow {
	font-family: var(--smq-font-mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--smq-gray-400);
	margin: 0 0 var(--smq-space-3);
	padding-top: var(--smq-space-4);
	border-top: 1px solid var(--smq-gray-200);
}
.smq-course-objectives {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--smq-space-2) var(--smq-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
.smq-course-objective {
	display: flex;
	align-items: flex-start;
	gap: var(--smq-space-2);
	min-width: 0;
	font-family: var(--smq-font-text);
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--smq-gray-600);
}
.smq-course-objective-mark {
	flex: none;
	width: 15px;
	height: 15px;
	color: var(--smq-blue-brand);
	margin-top: 3px;
	opacity: 0.85;
}

/* ================= RECORRIDO / METODOLOGÍA ================= */
.smq-course-path {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: var(--smq-space-3);
}
.smq-course-path-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--smq-space-2);
	min-width: 0;
	position: relative;
}
.smq-course-path-index {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--smq-navy-950);
	color: var(--smq-white);
	font-family: var(--smq-font-mono);
	font-size: 0.78rem;
	font-weight: 600;
	flex: none;
}
.smq-course-path-label {
	font-family: var(--smq-font-text);
	font-weight: 700;
	font-size: 0.82rem;
	color: var(--smq-navy-950);
	margin: 0;
}
.smq-course-path-connector {
	position: absolute;
	top: 18px;
	left: calc(50% + 18px);
	width: calc(100% - 36px);
	height: 1px;
	background: var(--smq-gray-200);
}

/* ================= CONTENIDO DEL CURSO (currículum) ================= */
.smq-course-phase {
	border: 1px solid var(--smq-gray-200);
	border-radius: 4px;
	margin-bottom: var(--smq-space-3);
	background: var(--smq-white);
	overflow: hidden;
}
.smq-course-phase-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--smq-space-3);
	padding: var(--smq-space-4);
	cursor: pointer;
	font-family: var(--smq-font-text);
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--smq-navy-950);
	list-style: none;
}
.smq-course-phase-summary::-webkit-details-marker {
	display: none;
}
.smq-course-phase-summary-arrow {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--smq-blue-brand);
	transition: transform 0.15s ease;
}
.smq-course-phase[open] .smq-course-phase-summary-arrow {
	transform: rotate(90deg);
}
.smq-course-phase-summary:focus-visible {
	outline: 2px solid var(--smq-blue-interactive);
	outline-offset: -2px;
}
.smq-course-modules {
	margin: 0;
	padding: 0 var(--smq-space-4) var(--smq-space-4);
	list-style: none;
	border-top: 1px solid var(--smq-gray-200);
}
.smq-course-module {
	display: grid;
	grid-template-columns: minmax(0, 28px) minmax(0, 1fr);
	gap: var(--smq-space-3);
	padding: var(--smq-space-3) 0;
	border-bottom: 1px solid var(--smq-gray-200);
}
.smq-course-module:last-child {
	border-bottom: none;
}
.smq-course-module-index {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 4px;
	background: var(--smq-navy-950);
	color: var(--smq-white);
	font-family: var(--smq-font-mono);
	font-size: 0.72rem;
	font-weight: 600;
}
.smq-course-module-body {
	min-width: 0;
}
.smq-course-module-title {
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--smq-navy-950);
	margin: 0 0 2px;
}
.smq-course-module-topics {
	font-family: var(--smq-font-text);
	font-weight: 400;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--smq-gray-600);
	margin: 0;
}
.smq-course-syllabus-note {
	margin-top: var(--smq-space-4);
	padding: var(--smq-space-4);
	background: var(--smq-gray-50);
	border: 1px solid var(--smq-gray-200);
	border-radius: 4px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--smq-space-3);
}
.smq-course-syllabus-note p {
	margin: 0;
	font-family: var(--smq-font-text);
	font-size: 0.88rem;
	color: var(--smq-gray-600);
}
.smq-course-syllabus-note a {
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--smq-navy-950);
	text-decoration: none;
	border-bottom: 1px solid var(--smq-gray-200);
	padding-bottom: 2px;
	white-space: nowrap;
}
.smq-course-syllabus-note a:hover,
.smq-course-syllabus-note a:focus-visible {
	color: var(--smq-blue-interactive-strong);
	border-color: var(--smq-blue-interactive-strong);
}

/* ================= EVIDENCIA (AFL / Backtest / Automatización) ================= */
.smq-course-evidence-row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--smq-space-6);
	align-items: center;
}
.smq-course-evidence-row--reverse {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.smq-course-evidence-row--reverse .smq-course-evidence-col {
	order: 2;
}
.smq-course-evidence-row--reverse .smq-course-evidence-text {
	order: 1;
}
.smq-course-evidence-col {
	min-width: 0;
}
.smq-course-evidence-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-3);
}
.smq-course-evidence-text .smq-course-evidence-frame {
	background: var(--smq-white);
	border: 1px solid var(--smq-gray-200);
}
.smq-course-evidence-text .smq-course-evidence-frame::after {
	background: var(--smq-blue-brand);
}
.smq-course-evidence-row .smq-course-evidence-frame {
	background: var(--smq-white);
	border: 1px solid var(--smq-gray-200);
	aspect-ratio: auto;
}
.smq-course-evidence-row .smq-course-evidence-media {
	object-fit: contain;
	background: var(--smq-white);
}

/* ================= GESTIÓN DEL RIESGO (sin imagen) ================= */
.smq-course-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--smq-space-4);
}
.smq-course-fact {
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-2);
	min-width: 0;
	padding: var(--smq-space-4);
	background: var(--smq-white);
	border: 1px solid var(--smq-gray-200);
	border-radius: 4px;
}
.smq-course-fact-icon {
	width: 28px;
	height: 28px;
	color: var(--smq-blue-brand);
}
.smq-course-fact-label {
	font-family: var(--smq-font-text);
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--smq-navy-950);
	margin: 0;
}
.smq-course-fact-descriptor {
	font-family: var(--smq-font-text);
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--smq-gray-600);
	margin: 0;
}

/* ================= QUÉ INCLUYE =================
   Los datos de escala confirmados se muestran primero, como métricas compactas -- número grande
   en font-display + etiqueta mono pequeña, mismos tokens ya usados en el resto de la página -- y
   el resto de inclusiones (contenido cualitativo, no cuantificable) queda debajo como lista. */
.smq-course-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--smq-space-4);
	margin: 0 0 var(--smq-space-5);
}
.smq-course-metric {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: var(--smq-space-4);
	background: var(--smq-white);
	border: 1px solid var(--smq-gray-200);
	border-radius: 4px;
	text-align: center;
}
.smq-course-metric-value {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: 1.7rem;
	color: var(--smq-navy-950);
}
.smq-course-metric-label {
	font-family: var(--smq-font-mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smq-gray-600);
}
.smq-course-includes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--smq-space-3) var(--smq-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}
.smq-course-includes li {
	display: flex;
	align-items: flex-start;
	gap: var(--smq-space-2);
	min-width: 0;
	font-family: var(--smq-font-text);
	font-size: 0.94rem;
	line-height: 1.5;
	color: var(--smq-gray-600);
}
.smq-course-includes li svg {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--smq-blue-brand);
	margin-top: 2px;
}

/* ================= PARA QUIÉN ES ================= */
.smq-course-audience-text {
	max-width: 68ch;
}

/* ================= CONFIANZA (compacta) ================= */
.smq-course-trust-card {
	margin-top: var(--smq-space-5);
	padding: var(--smq-space-4) var(--smq-space-5);
	background: var(--smq-gray-50);
	border: 1px solid var(--smq-gray-200);
	border-radius: 4px;
}
.smq-course-trust {
	display: flex;
	align-items: center;
	gap: var(--smq-space-4);
	flex-wrap: wrap;
}
.smq-course-trust-mark {
	flex: none;
	width: 48px;
	height: 48px;
	color: var(--smq-blue-brand);
}
.smq-course-trust-text {
	min-width: 0;
	font-family: var(--smq-font-text);
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--smq-gray-600);
	margin: 0;
}
.smq-course-trust-text a {
	color: var(--smq-navy-950);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--smq-gray-200);
}
.smq-course-trust-text a:hover,
.smq-course-trust-text a:focus-visible {
	color: var(--smq-blue-interactive-strong);
	border-color: var(--smq-blue-interactive-strong);
}

/* ================= PRECIO / ADQUISICIÓN ================= */
.smq-course-price-panel {
	background: var(--smq-navy-950);
	border-radius: 4px;
	padding: var(--smq-space-6);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--smq-space-5);
}
.smq-course-price-panel-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-2);
}
.smq-course-price-panel-title {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--smq-white);
	margin: 0;
}
.smq-course-price-panel-note {
	font-family: var(--smq-font-text);
	font-size: 0.88rem;
	color: var(--smq-gray-400);
	margin: 0;
}
.smq-course-price-panel-action {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--smq-space-2);
	flex: none;
}

/* ================= FAQ ================= */
.smq-course-faq-item {
	border-bottom: 1px solid var(--smq-gray-200);
}
.smq-course-faq-item:first-child {
	border-top: 1px solid var(--smq-gray-200);
}
.smq-course-faq-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--smq-space-3);
	padding: var(--smq-space-4) 0;
	cursor: pointer;
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.96rem;
	color: var(--smq-navy-950);
	list-style: none;
}
.smq-course-faq-summary::-webkit-details-marker {
	display: none;
}
.smq-course-faq-summary:focus-visible {
	outline: 2px solid var(--smq-blue-interactive);
	outline-offset: -2px;
}
.smq-course-faq-arrow {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--smq-blue-brand);
	transition: transform 0.15s ease;
}
.smq-course-faq-item[open] .smq-course-faq-arrow {
	transform: rotate(45deg);
}
.smq-course-faq-answer {
	margin: 0 0 var(--smq-space-4);
	font-family: var(--smq-font-text);
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--smq-gray-600);
	max-width: 68ch;
}

/* ================= Profundiza (WEB-SEO-02-03-01): informational links of a course page ================= */
.smq-course-deepen-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--smq-space-4) var(--smq-space-5);
}
.smq-course-deepen-link {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-2);
	padding-top: var(--smq-space-3);
	border-top: 1px solid var(--smq-gray-200);
	text-decoration: none;
}
.smq-course-deepen-label {
	font-family: var(--smq-font-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--smq-navy-950);
	transition: color 0.15s ease;
}
.smq-course-deepen-link:hover .smq-course-deepen-label,
.smq-course-deepen-link:focus-visible .smq-course-deepen-label {
	color: var(--smq-blue-interactive-strong);
}
.smq-course-deepen-desc {
	font-family: var(--smq-font-text);
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--smq-gray-600);
}

/* ================= Baseline responsive (WEB-014): 320 / 375 / 768 / 1024 / 1280 / 1440 ================= */
@media (max-width: 1024px) {
	.smq-course-benefits {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.smq-course-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 900px) {
	.smq-course-hero-row {
		grid-template-columns: 1fr;
	}
	.smq-course-hero-evidence {
		max-width: 480px;
	}
	.smq-course-path {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: var(--smq-space-5);
	}
	.smq-course-path-connector {
		display: none;
	}
	.smq-course-evidence-row,
	.smq-course-evidence-row--reverse {
		grid-template-columns: 1fr;
	}
	.smq-course-evidence-row--reverse .smq-course-evidence-col,
	.smq-course-evidence-row--reverse .smq-course-evidence-text {
		order: initial;
	}
}
@media (max-width: 768px) {
	.smq-course-section {
		padding: var(--smq-space-6) 0;
	}
	.smq-course-inner {
		width: calc(100% - 32px);
	}
	.smq-course-benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.smq-course-objectives {
		grid-template-columns: 1fr;
	}
	.smq-course-includes {
		grid-template-columns: 1fr;
	}
	.smq-course-deepen-row {
		grid-template-columns: 1fr;
	}
	.smq-course-price-panel {
		flex-direction: column;
		align-items: flex-start;
	}
}
@media (max-width: 480px) {
	.smq-course-benefits {
		grid-template-columns: 1fr;
	}
	.smq-course-facts {
		grid-template-columns: 1fr;
	}
	.smq-course-path {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.smq-course-metrics {
		grid-template-columns: 1fr;
	}
}
/* WEB-V1-UX-CONTENT-FIX-01: long eyebrows ("Qué incluye la formación SMQuantum") cannot fit one line at
   320-360px; below 480px they wrap instead of overflowing their row. Wider viewports keep nowrap. */
@media (max-width: 480px) {
	.smq-course-eyebrow {
		white-space: normal;
	}
}
@media (max-width: 375px) {
	.smq-course-eyebrow-rule {
		display: none;
	}
	.smq-course-cta-row {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* WEB-V1-MVP-SALES-ENABLEMENT-01 — purchase form drawn in place of a static call to action (inc/commerce.php). */
.smq-purchase-form {
	margin: 0;
}
.smq-purchase-form button.smq-course-cta-primary {
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
}
.smq-offer-form + .smq-offer-form {
	margin-top: 12px;
}