/*
 * Sobre SMQuantum (WP-01D9), sección final de Home, inmediatamente después de Metodología
 * SMQuantum y antes del footer. Rol: cierre de confianza compacto (identidad + fundador),
 * no un capítulo adicional de producto/contenido.
 *
 * WP-01D9-R1: la versión inicial (dos párrafos, cuatro disciplinas, retrato 4:5 a ancho de
 * columna completo, cuatro pilares en cuadrícula, dos párrafos de biografía) resultó demasiado
 * grande para Home -- se percibía como una página "Sobre" completa incrustada en la portada.
 * Ese contenido no se elimina conceptualmente: se traslada a la futura página dedicada
 * /sobre-smquantum/ (ver docs/website-production/WP01D9_IMPLEMENTATION.md). Aquí queda solo la
 * señal de confianza mínima: un párrafo, y una tarjeta de fundador horizontal y compacta.
 *
 * Superficie --smq-gray-50 (no blanco puro), igual que en WP-01D9 original, para diferenciarse
 * de la superficie blanca de Metodología sin introducir un tono nuevo. El corte SG-02 del marco
 * de retrato sigue reutilizando, valor a valor, el mismo tratamiento de .smq-evidence-frame::after
 * (pillars.css).
 *
 * Estructura de fila: tres elementos hijos directos de .smq-about-row dentro de una rejilla de
 * dos columnas (main / founder / cta). Con el flujo automático de CSS Grid (grid-auto-flow: row,
 * valor por defecto, sin "dense") esto coloca cta en la columna 1, fila 2 en escritorio (debajo
 * del párrafo, junto a main) y, en móvil de una sola columna, lo apila en orden de DOM después de
 * founder -- logrando los dos órdenes de lectura pedidos (escritorio: párrafo+CTA a la izquierda;
 * móvil: párrafo, fundador, CTA) sin usar la propiedad "order".
 */
.smq-about {
	width: 100%;
	background: var(--smq-gray-50);
	border-top: 1px solid var(--smq-gray-200);
	padding: var(--smq-space-5) 0;
}
.smq-about-inner {
	width: min(1440px, calc(100% - 48px));
	margin-inline: auto;
}
.smq-about-row {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: var(--smq-space-4) var(--smq-space-5);
	align-items: start;
}

/* ---- Columna izquierda ~55-60%: identidad SMQuantum ---- */
.smq-about-main {
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-3);
	min-width: 0;
}
.smq-about-eyebrow-row {
	display: flex;
	align-items: center;
	gap: var(--smq-space-3);
}
.smq-about-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-about-eyebrow-rule {
	flex: 1 1 auto;
	height: 1px;
	background: var(--smq-gray-200);
	min-width: 0;
}
.smq-about-heading {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 2.1vw, 1.9rem);
	line-height: 1.25;
	color: var(--smq-navy-950);
	margin: 0;
}
.smq-about-lead {
	font-family: var(--smq-font-text);
	font-weight: 400;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--smq-gray-600);
	margin: 0;
}

/* CTA restringido -- enlace de texto, no botón. Grid-column:1 explícito: mantiene el CTA en la
   columna izquierda en escritorio pese a ser el tercer hijo de .smq-about-row (ver nota de
   cabecera); en móvil (una sola columna) la declaración es inocua. */
.smq-about-cta {
	grid-column: 1;
	margin: 0;
	min-width: 0;
}
.smq-about-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-about-cta a:hover,
.smq-about-cta a:focus-visible {
	color: var(--smq-blue-interactive-strong);
	border-color: var(--smq-blue-interactive-strong);
}

/* ---- Columna derecha ~40-45%: tarjeta de fundador compacta y horizontal ---- */
.smq-about-founder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--smq-space-4);
	min-width: 0;
}

/* Marco de retrato -- preparado para <img class="smq-about-portrait-media"> sin rediseño
   estructural futuro. object-fit:cover ya definido para cuando exista la foto real. Mientras
   tanto, marcador nativo de marca: fondo navy, icono de persona genérico (mismo glifo ya usado en
   el icono de cuenta del header, no una representación de Sergio) y etiqueta permanente
   "Fundador · SMQuantum" -- texto que sigue siendo válido una vez añadida la foto real, no un
   aviso de "pendiente". Tamaño reducido a ~200px (180-220px) para no dominar la sección; ese
   mismo master fotográfico (min. ~1600x2000px) podrá recortarse por separado en 4:5 para la
   futura página /sobre-smquantum/. */
.smq-about-portrait {
	position: relative;
	width: 200px;
	max-width: 40%;
	flex-shrink: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--smq-navy-950);
	border: 1px solid var(--smq-gray-200);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--smq-space-2);
}
/* SG-02 -- mismo corte de 22px que .smq-evidence-frame::after (pillars.css), reutilizado sin
   modificar valores. */
.smq-about-portrait::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-about-portrait-icon {
	width: 36px;
	height: 36px;
	color: var(--smq-blue-brand);
	opacity: 0.9;
}
.smq-about-portrait-label {
	font-family: var(--smq-font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smq-gray-400);
	margin: 0;
	text-align: center;
	padding: 0 var(--smq-space-2);
}
/* Lista para cuando exista la fotografía real -- sin uso todavía. */
.smq-about-portrait-media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.smq-about-founder-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 160px;
	flex: 1 1 160px;
}
.smq-about-founder-name {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--smq-navy-950);
	margin: 0;
}
.smq-about-founder-role {
	font-family: var(--smq-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smq-blue-brand);
	margin: 0;
}
/* Línea profesional única -- sustituye a los cuatro pilares en cuadrícula de la versión inicial;
   el detalle completo (biografía, pilares individuales) queda diferido a /sobre-smquantum/. */
.smq-about-founder-line {
	font-family: var(--smq-font-text);
	font-weight: 400;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--smq-gray-600);
	margin: 0;
}
/* Reconocimiento discreto -- una línea, sin imagen de trofeo ni tratamiento de badge. */
.smq-about-award {
	font-family: var(--smq-font-mono);
	font-size: 0.64rem;
	letter-spacing: 0.02em;
	color: var(--smq-gray-600);
	margin: 0;
}

/* Baseline responsive (WEB-014): 375 / 768 / 1440px. Móvil: eyebrow, H2, párrafo, tarjeta de
   fundador, CTA (orden de DOM vía flujo automático de grid, ver nota de cabecera). El retrato se
   reduce aún más por debajo de 375px para evitar cualquier riesgo de overflow horizontal junto a
   la información del fundador. */
@media (max-width: 768px) {
	.smq-about-inner {
		width: calc(100% - 32px);
	}
	.smq-about-row {
		grid-template-columns: 1fr;
		gap: var(--smq-space-4);
	}
	.smq-about-cta {
		grid-column: 1;
	}
}
@media (max-width: 375px) {
	.smq-about-eyebrow-rule {
		display: none;
	}
	.smq-about-portrait {
		width: 140px;
	}
	.smq-about-founder {
		gap: var(--smq-space-3);
	}
}