/* =========================================================================
   Home 2026 · tokens (brief §1, §2, §9, §13)
   Cada color se define UNA vez; los tonos derivados salen de él con color-mix().
   ========================================================================= */
:root {
	/* — Marca — */
	--tt-purple: #7534D2;   /* morado maestro: exacto, no se toca (brief §1) */
	--tt-white:  #FFFFFF;
	--tt-ink:    #111118;   /* casi negro (brief §1) */
	--tt-cream:  #FDF9F6;   /* crema muestreado del fondo de las ilustraciones claras (refs, imagen 3) */
	--tt-yellow: #FDDF2E;   /* amarillo muestreado de pines, play y puntos de las ilustraciones */

	/* — Derivados (no son colores nuevos: mezclas de los de arriba) — */
	--tt-lilac-50:   color-mix(in srgb, var(--tt-purple) 6%, var(--tt-white));
	--tt-lilac-100:  color-mix(in srgb, var(--tt-purple) 12%, var(--tt-white));
	--tt-lilac-300:  color-mix(in srgb, var(--tt-purple) 34%, var(--tt-white));
	--tt-purple-ink: color-mix(in srgb, var(--tt-purple) 82%, var(--tt-ink));     /* hover del botón */
	--tt-ink-soft:   color-mix(in srgb, var(--tt-ink) 66%, var(--tt-white));      /* texto secundario, AA sobre blanco y crema */
	--tt-line:       color-mix(in srgb, var(--tt-ink) 9%, var(--tt-white));
	--tt-on-purple-soft: color-mix(in srgb, var(--tt-white) 84%, var(--tt-purple)); /* AA sobre #7534D2 */

	/* — Tipografía (Satoshi, local) — */
	--tt-font: "Satoshi", "Satoshi Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* respaldo: global.css */
	--fs-display: clamp(2.75rem, 1.15rem + 5.3vw, 6rem);      /* 44 → 96 px; ~92 px a 1440 */
	--fs-h2:      clamp(2.25rem, 1.2rem + 3.3vw, 4.25rem);     /* 36 → 68 px */
	--fs-h2-xl:   clamp(2.5rem, 1.1rem + 4.1vw, 5rem);         /* 40 → 80 px, escenas tipo «slide» */
	--fs-h3:      clamp(1.375rem, 1.1rem + .7vw, 1.75rem);
	--fs-lead:    clamp(1.125rem, 1rem + .45vw, 1.375rem);
	--fs-body:    clamp(1rem, .96rem + .15vw, 1.0625rem);
	--fs-small:   .875rem;
	--fs-eyebrow: .8125rem;
	--lh-tight:   .98;
	--lh-head:    1.04;
	--lh-body:    1.55;

	/* — Espaciado: sistema de 8 px — */
	--sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem; --sp-4: 2rem;
	--sp-5: 2.5rem; --sp-6: 3rem;   --sp-8: 4rem;   --sp-10: 5rem;
	/* Relleno vertical de cada escena. Todas las escenas cambian de fondo respecto a la anterior,
	   así que el aire ENTRE escenas es el doble: 128 px en móvil, ~172–176 px a 1366–1440
	   (brief: 120–180 px). Antes era 80–168 px por lado: 300+ px de franjas vacías. */
	--section-y: clamp(4rem, 2.5rem + 3.4vw, 5.5rem);          /* 64 → 88 px por lado */
	--gutter:    clamp(1.25rem, .6rem + 2.8vw, 4rem);
	--container: 80rem;                                         /* 1280 px (brief §10: 1240–1320) */

	/* — Radios: con moderación (brief §13) — */
	--r-18: 18px; --r-24: 24px; --r-32: 32px; --r-pill: 999px;

	/* — Sombra: casi nada — */
	--shadow-soft: 0 18px 40px -24px color-mix(in srgb, var(--tt-ink) 45%, transparent);

	/* — Movimiento (brief §9) — */
	--ease: cubic-bezier(.22, .61, .36, 1);
	--dur-hover:  200ms;
	--dur-reveal: 640ms;
	--dur-route:  1200ms;
	--move-y:     28px;
	--move-x:     28px;   /* entradas laterales de las escenas en espejo (desde el lado de cada columna) */
	--header-h:   80px;  /* 80 px: el logo oficial va a 60 px de alto para que el claim se lea (~11 px) */
}