:root {
	--paper: #f6f5f0;
	--white: #ffffff;
	--ink: #0a1c2e;
	--ink-deep: #06121f;
	--ink-soft: #0e2740;
	--slate: #5c6b7a;
	--slate-light: #8fa6bc;
	--mist-warm: #e5e2d8;
	--mist-cool: #dfe4eb;
	--accent: #0a6bf0;
	--accent-deep: #0857c9;
	--cyan: #19d9dc;
	--brand-yellow: #ffde00;
	--grad: linear-gradient(90deg, #0a6bf0, #19d9dc);

	--color-primary: var(--ink);
	--color-secondary: var(--accent);
	--color-text: var(--ink);
	--color-text-muted: var(--slate);
	--color-surface: var(--white);
	--color-surface-muted: var(--paper);
	--color-border: var(--mist-warm);
	--color-background: var(--paper);
	--color-white: var(--white);
	--color-black: var(--ink-deep);

	--glass-bg: rgb(10 16 24 / 50%);
	--glass-bg-strong: rgb(10 16 24 / 68%);
	--glass-blur: blur(16px) saturate(1.3);

	--font-family-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-family-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-family-mono: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-md: 1.0625rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 1.5rem;
	--font-size-2xl: 2rem;
	--font-size-3xl: 2.5rem;

	--line-height-tight: 1.1;
	--line-height-base: 1.65;
	--line-height-relaxed: 1.8;

	--gea-content-width: 77.5rem;
	--gea-content-width-wide: 86rem;
	--gea-space-1: 0.5rem;
	--gea-space-2: 1rem;
	--gea-space-3: 1.5rem;
	--gea-space-4: 2rem;
	--gea-space-5: 3rem;
	--gea-space-6: 4.5rem;
	--gea-space-7: 7.5rem;

	--container: 1240px;
	--gutter: 24px;
	--section: clamp(88px, 12vw, 136px);

	--radius-sm: 0.625rem;
	--radius-md: 1rem;
	--radius-lg: 1.375rem;
	--radius-xl: 1.5rem;
	--radius-pill: 999px;
	--r-card: 16px;
	--r-img: 22px;

	--shadow-sm: none;
	--shadow-md: none;
	--shadow-lg: none;
}

/* ============================================================
   Large screens (≥1800 px: QHD, 4K, ultra-wide) — design-mockup's
   "PANTALLAS GRANDES" layer. Below 1800 px nothing changes. Elementor
   content uses its own Widescreen breakpoint (Kit, 1800 px).
   ============================================================ */
@media (min-width: 1800px) {
	:root {
		--container: min(76vw, 1920px);
		--section: clamp(136px, 7vw, 200px);
	}
}