/*
 * Hero — L001 (brand/component-library/layout/l001-hero.md) via TPL-004 (Website Hero).
 * WP-01C-R2: revised after gap analysis (WP-01C-R1) against the approved Hero Main render
 * (content/campaigns/public-launch-kit/production/review/website-hero-main/hero-main.png).
 * background: surface-dark (L001 default). SG-01 (obligatorio) + SG-05 (obligatorio junto a
 * SG-01), per brand/design-system-v2/04-component-evolution.md. No SG-04: no hay un hallazgo
 * cuantitativo concreto en este Hero.
 * SG-01 ahora incluye la salida recta a ~45° que exige brand/logo-dna/logo-dna-analysis.md
 * ("un límite que se abre... para dejar salir algo, en la misma dirección") — antes el aro no
 * tenía nada saliendo por su apertura.
 * Bicolor del título: bloque semántico completo ("aplicada a los mercados"), no una palabra
 * suelta — ver el salto de línea condicional .smq-l001-linebreak.
 */
.smq-l001-hero {
	position: relative;
	overflow: hidden;
	width: 100%;
	background: var(--smq-navy-950);
	color: var(--smq-white);
	/* WP-01D1-R3: solo se reduce el padding INFERIOR (96px -> 64px, -33%), el espacio que queda
	   tras la fila de CTAs antes de Magnitudes. El padding superior (SG-01/eyebrow/H1) no cambia. */
	padding: var(--smq-space-9) 0 var(--smq-space-7);
}

/* SG-01 + salida recta (Logo DNA Analysis, regla 2) — geometría ambient, puramente decorativa.
   Ring en proporción 6.9:1 y apertura 46° (rango 45-48°), igual que en el resto del sistema.
   WP-01C-R3: en R2 el trazo de salida descendía lo bastante para cruzar detrás del H1 y podía
   leerse como si tachara el texto. Corregido: viewBox mucho más bajo (140 en vez de 260) y
   posicionado pegado al borde superior del Hero, de modo que todo el conjunto (aro + trazo) vive
   en una banda estrecha por encima de donde empieza el bloque de título — nunca cruza sobre las
   letras. El trazo sigue ocupando la mitad derecha del ancho para no dejar espacio vacío, pero
   con una pendiente casi plana en vez de descender. Sigue siendo geometría recta, no una curva de
   datos/tendencia. */
.smq-sg01 {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	top: var(--smq-space-4);
	left: 0;
	width: min(74%, 1000px);
	height: auto;
	opacity: 0.24;
}
.smq-sg01 .smq-sg01-exit {
	opacity: 0.8;
}

.smq-l001-hero-inner {
	position: relative;
	z-index: 1;
	width: min(1440px, calc(100% - 48px));
	margin-inline: auto;
	max-width: 920px;
}

.smq-n001-topic {
	font-family: var(--smq-font-text);
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--smq-gray-400);
	margin: 0 0 var(--smq-space-4);
}

/* H1 — mayor presencia a 1440px (gap #6/#3 de WP-01C-R1). El techo del clamp sube
   significativamente sin tocar el suelo (mobile no se penaliza). */
.smq-l001-title {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: clamp(2.3rem, 6vw, 4.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--smq-white);
	margin: 0 0 var(--smq-space-5);
}
/* Bloque semántico bicolor: "aplicada a los mercados" — no una palabra aislada. El salto de
   línea es condicional (ver media queries): a partir de tablet se fuerza una línea propia para
   que lea como el bloque de la referencia aprobada; en mobile se deja fluir con el resto del
   texto si el ancho lo exige, tal como pide la instrucción de no forzar una composición fija. */
.smq-l001-title-accent {
	color: var(--smq-blue-brand);
}
.smq-l001-linebreak {
	display: none;
}

.smq-l001-pillars {
	font-family: var(--smq-font-text);
	font-weight: 500;
	font-size: 1.05rem;
	color: var(--smq-gray-400);
	margin: 0 0 var(--smq-space-3);
}

.smq-l001-subtitle {
	font-family: var(--smq-font-text);
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1.7;
	color: var(--smq-white);
	max-width: 640px;
	margin: 0 0 var(--smq-space-6);
}

/* CTA — WP-01C-R3: en R2 el enlace secundario quedaba en columna, justo debajo del botón, y se
   percibía "pegado". A partir de tablet pasa a fila con separación horizontal clara; en mobile
   se mantiene en columna si el ancho lo exige.
   WP-01D1-R3 BUGFIX: el bloque llevaba markup manual con `"layout":{"type":"flex",...}` en el
   comentario de bloque, pero ese atributo JSON solo se traduce en la clase `is-layout-flex` (y su
   CSS `display:flex` correspondiente) cuando WordPress renderiza el bloque de verdad -- este
   theme escribe el HTML a mano y esa clase nunca se añadió, ni aquí ni en la preview estática (se
   comprobó: mismo markup, mismo bug en ambos entornos). Resultado: `.smq-l001-actions` nunca fue
   un contenedor flex real; `flex-direction`/`align-items`/`gap` eran inertes y el botón (div) y el
   enlace secundario (p) se apilaban como cajas de bloque normales, con el `<p>` inmediatamente
   pegado/debajo del botón. Fix: declarar `display:flex` explícitamente aquí en vez de depender de
   una clase que este theme no genera. Sin position:absolute/transform/márgenes negativos. */
.smq-l001-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	flex-direction: column;
	gap: var(--smq-space-3);
}

/* T005 — un único CTA por composición. "Conocer SMQuantum" es un enlace secundario simple, no
   una segunda instancia de T005. WP-01C-R1 señaló que quedaba pegado al botón: ahora tiene su
   propia fila, separación vertical explícita y menor peso tipográfico. */
.smq-t005-cta .wp-block-button__link {
	background: var(--smq-blue-interactive-strong);
	color: var(--smq-white);
	border: none;
	border-radius: 4px;
	padding: var(--smq-space-3) var(--smq-space-5);
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 1.2rem;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.smq-t005-cta .wp-block-button__link:hover,
.smq-t005-cta .wp-block-button__link:focus-visible {
	background: var(--smq-blue-brand);
	transform: translateY(-2px);
}

.smq-l001-secondary-link {
	margin: 0;
}
.smq-l001-secondary-link a {
	color: var(--smq-gray-400);
	font-family: var(--smq-font-text);
	font-weight: 400;
	font-size: 0.92rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.15s ease;
}
.smq-l001-secondary-link a:hover,
.smq-l001-secondary-link a:focus-visible {
	color: var(--smq-white);
}

@media (prefers-reduced-motion: reduce) {
	.smq-t005-cta .wp-block-button__link {
		transition: background-color 0.15s ease;
	}
	.smq-t005-cta .wp-block-button__link:hover,
	.smq-t005-cta .wp-block-button__link:focus-visible {
		transform: none;
	}
}

/* Baseline responsive (WEB-014): 375 / 768 / 1440px */
@media (min-width: 768px) {
	.smq-l001-linebreak {
		display: block;
	}
	.smq-l001-actions {
		flex-direction: row;
		align-items: center;
		gap: var(--smq-space-6);
	}
}
@media (max-width: 768px) {
	.smq-l001-hero {
		/* WP-01D1-R3: mismo criterio que en desktop, -33% solo en el padding inferior (48px -> 32px). */
		padding: var(--smq-space-7) 0 var(--smq-space-5);
	}
	.smq-l001-title {
		font-size: clamp(2rem, 6.5vw, 2.8rem);
	}
	.smq-sg01 {
		width: min(70%, 480px);
		top: var(--smq-space-4);
		opacity: 0.16;
	}
}
@media (max-width: 375px) {
	.smq-l001-hero-inner {
		width: calc(100% - 32px);
	}
	.smq-sg01 {
		width: 220px;
	}
	.smq-sg01 .smq-sg01-exit {
		display: none;
	}
	.smq-l001-title {
		font-size: 1.9rem;
	}
}