/* ============================================================================
 * VIKIPOS — Typography
 * ============================================================================ */

.vk-eyebrow {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-primary);
	margin-bottom: 1rem;
}

.vk-h1,
.vk-h2,
.vk-h3 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: -0.02em;
	margin: 0 0 0.75em;
}

.vk-h1 {
	font-size: clamp(2.25rem, 5vw + 1rem, 4rem);
	font-weight: 800;
}

.vk-h2 {
	font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem);
}

.vk-h3 {
	font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.75rem);
}

.vk-lead {
	font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.25rem);
	line-height: var(--lh-base);
	color: var(--color-text-dark-muted);
	max-width: 60ch;
}

.vk-dark .vk-lead { color: var(--color-text-muted); }

.vk-mono {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
}

/* Gradient text para enfatizar.
 * Importante: sobre fondos oscuros definimos un color de fallback CLARO para que
 * si el navegador no soporta background-clip:text el texto siga legible (en lugar de
 * heredar el color oscuro del tema Kadence, que dejaba el span invisible).
 * Variantes por sector: retail (rosa→violeta) y resto (naranja→rosa).
 */
.vk-text-gradient {
	color: #ededf5;
	background-image: var(--color-gradient-primary);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}
.vk-text-gradient--retail { background-image: var(--color-gradient-retail); }
.vk-text-gradient--resto  { background-image: var(--color-gradient-resto); }

/* En secciones claras, el fallback debe ser oscuro */
body:not(.vk-dark-context) .vk-hero .vk-text-gradient { color: #ededf5; }