/**
 * Hero de Home — rediseño a pantalla completa (docs `hero design.png`
 * del cliente): titular grande a la izquierda, foto de instrumental
 * sangrando a la derecha (sin caja/borde, se funde con el fondo vía
 * mask-image), olas SVG animadas de fondo (sutiles, ver hero.js).
 *
 * opacity/transform de los elementos de texto y de las olas los
 * controla hero.js (GSAP) en tiempo de ejecución — este archivo nunca
 * los toca, para no pelear con el estado inicial que gsap.set()/el
 * timeline aplican.
 */
.techsalud-hero {
	position: relative;
	overflow: hidden;
	/*
	 * 100vh puro se ve descentrado en la pantalla real: la trust bar
	 * (40px) + header sticky (64px) ya ocupan espacio arriba en el flujo
	 * normal del documento, así que un hero de 100vh empuja su propio
	 * centro ~52px más abajo del centro real de la ventana visible al
	 * cargar. Restando esa altura real (confirmada en vivo con
	 * getBoundingClientRect, no adivinada) el contenido queda centrado
	 * en el espacio que el usuario realmente ve.
	 */
	min-height: calc(100vh - 6.5rem);
	display: flex;
	align-items: center;
	background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-surface) 55%);
	padding: 3rem 1.5rem;
}

.techsalud-hero-waves {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.techsalud-hero-waves svg {
	display: block;
	width: 100%;
	height: 100%;
}

.techsalud-hero-wave {
	fill: none;
	stroke-width: 1.5;
}

.techsalud-hero-wave--1 {
	stroke: var(--color-secondary);
	opacity: 0.14;
}

.techsalud-hero-wave--2 {
	stroke: var(--color-primary);
	opacity: 0.1;
}

.techsalud-hero-wave--3 {
	stroke: var(--color-secondary);
	opacity: 0.08;
}

.techsalud-hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}

.techsalud-hero-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	min-width: 0;
}

.techsalud-hero-badge {
	background: var(--color-primary-light);
	color: var(--color-primary);
	padding: 0.55rem 1.1rem;
	font-size: var(--font-size-sm);
}

.techsalud-hero h1 {
	max-width: none;
	align-self: stretch;
	margin: 0;
	text-align: left;
	font-size: var(--font-size-3xl);
	line-height: 1.1;
	font-weight: var(--font-weight-semibold);
	/*
	 * Degradado en el texto (referencia: compratupanel.nokker.cl, mismo
	 * efecto ahí pero a gris) — de azul marca oscuro a un azul más claro,
	 * con los tokens ya existentes, sin agregar colores nuevos.
	 */
	background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.techsalud-hero-bajada {
	max-width: 560px;
	align-self: stretch;
	margin: 0;
	text-align: left;
	color: var(--color-text-muted);
	font-size: var(--font-size-lg);
	line-height: 1.55;
}

.techsalud-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	max-width: none;
	margin: 0.5rem 0 0;
}

.techsalud-hero-ctas .button-primary,
.techsalud-hero-ctas .button-secondary {
	padding: 1rem 1.75rem;
	font-size: var(--font-size-md);
}

.techsalud-hero-media {
	display: none;
}

/*
 * Cifras de marca — dentro de la columna de texto (no flotando sobre la
 * foto: se sentían un componente aparte, sin relación con el resto del
 * copy). border-top separa el bloque de los CTAs, mismo max-width que
 * la bajada — comparte la estructura/alineación de todo lo demás en
 * esta columna en vez de tener su propio contenedor con estilo propio.
 * El conteo de cada número lo anima hero.js (GSAP) al cargar — el
 * markup ya arranca en "0" (ver template-home.php).
 */
.techsalud-hero-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2rem;
	width: 100%;
	max-width: 560px;
	margin-top: 0.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
}

.techsalud-hero-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	text-align: left;
}

.techsalud-hero-stat strong {
	display: block;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	/* Mismo degradado del H1 — las cifras se leen como parte del mismo
	   sistema tipográfico, no un componente con estilo propio suelto. */
	background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.techsalud-hero-stat-label {
	display: block;
	max-width: 130px;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	line-height: 1.3;
}

@media (min-width: 992px) {
	.techsalud-hero-inner {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}

	.techsalud-hero h1 {
		font-size: var(--font-size-4xl);
	}

	.techsalud-hero-media {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 58%;
		z-index: 0;
	}

	.techsalud-hero-photo {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		/*
		 * Sin borde/caja/sombra a propósito — el pedido explícito era que
		 * la foto no quede "dentro de un cuadrado", que se sienta
		 * unificada con el fondo. El mask-image la funde por el borde
		 * izquierdo hacia el gradiente del fondo (la foto en sí ya trae
		 * un degradado propio hacia blanco en ese borde; esto lo refuerza
		 * para que calce exacto con --color-surface sin importar el tono
		 * exacto del degradado original).
		 */
		mask-image: linear-gradient(to right, transparent 0%, black 22%);
		-webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%);
	}

	/* La columna de texto queda por delante de la foto (que ocupa un
	   58% absoluto por detrás) — el 1fr izquierdo del grid ya la acota. */
	.techsalud-hero-copy {
		position: relative;
		z-index: 1;
	}

	.techsalud-hero-stat strong {
		font-size: var(--font-size-2xl);
	}
}