/* Tokens del Figma (variables de "🏠 Website"). */

:root {
	/* Primitivos */
	--navy-900: #0c1e3d;
	--navy-700: #16305c;
	--lightblue-500: #5299f9;
	--lightblue-600: #025dd4;
	--orange-500: #f26f21;
	--orange-600: #f0501f;
	--orange-50: #fff4ec;
	--gray-700: #4b5568;
	--gray-900: #1b2230;
	--gray-200: #d9dee5;
	--gray-100: #eef1f5;
	--gray-50: #f7f8fa;
	--white: #fff;

	/* Color semántico */
	--color-text-primary: var(--gray-900);
	--color-text-secondary: var(--gray-700);
	--color-text-heading: var(--navy-900);
	/* Versiones más oscuras de los colores del Figma, solo para texto y botones con texto:
	   así cumplen el contraste mínimo de accesibilidad (WCAG AA). Las originales siguen en --lightblue-500 y --orange-500. */
	--color-text-accent: #256bd0;
	--color-text-accent-on-dark: var(--lightblue-500);
	--color-garantia-text: #b84a0b;
	--color-garantia-text-large: #d4570d;
	--color-accent-btn: #c93c15;
	--color-accent-btn-hover: #b3350f;
	--color-whatsapp: #1a8445;
	--color-whatsapp-hover: #146a37;
	--color-text-inverse: var(--white);
	--color-bg-page: var(--white);
	--color-bg-section-alt: var(--gray-50);
	--color-bg-dark: var(--navy-900);
	--color-bg-cta-banner: var(--navy-700);
	--color-cta-bg: var(--gray-700);
	--color-cta-bg-hover: var(--gray-900);
	--color-campus-bg: #2a72d9;
	--color-campus-bg-hover: #1f66c9;
	--color-border-default: var(--gray-100);
	--color-border-strong: var(--gray-200);
	--color-garantia: var(--orange-500);
	--color-garantia-bg: var(--orange-50);
	--color-focus: #256bd0;

	/* Tipografía */
	--font-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--text-display: clamp(2.25rem, 1.2rem + 3.6vw, 3.5rem);   /* 56 */
	--text-h1: clamp(2rem, 1.3rem + 2.6vw, 3rem);             /* 48 */
	--text-h2: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);         /* 48 */
	--text-h2-sm: clamp(1.625rem, 1.2rem + 1.7vw, 2.5rem);    /* 40 */
	--text-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);     /* 22 */
	--text-h4: 1.125rem;                                      /* 18 */
	--text-body-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);  /* 20 */
	--text-body-md: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);   /* 18 */
	--text-body-sm: 1rem;                                     /* 16 */
	--text-label-md: 0.875rem;                                /* 14 */
	--text-label-sm: 0.75rem;                                 /* 12 */

	--leading-display: 1.08;
	--leading-heading: 1.18;
	--leading-h3: 1.24;
	--leading-h4: 1.3;
	--leading-body: 1.5;
	--leading-body-sm: 1.45;
	--leading-label: 1.3;

	--tracking-display: -0.01em;
	--tracking-heading: -0.005em;
	--tracking-label-md: 0.02em;
	--tracking-label-sm: 0.04em;

	/* Espacios */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;

	--gutter: clamp(20px, 4.45vw, 64px);
	--section-y: clamp(56px, 6.7vw, 96px);
	--section-y-sm: clamp(48px, 5.6vw, 80px);
	--container: 1440px;

	/* Forma */
	--radius-sm: 8px;
	--radius-md: 10px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-pill: 100px;

	--header-h: 80px;
	--transition: 0.2s ease;
}