/* grafem — tokens de diseño (generado desde tokens.json). Cárgalo antes de grafem.css. */
@font-face { font-family: 'Sora'; src: url('../fonts/sora-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../fonts/sora-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../fonts/sora-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
:root, [data-theme="light"] {
  --grafem-900: #302559;
  --grafem-700: #4A3A85;
  --grafem-600: #5B479B;
  --grafem-500: #7E68C6;
  --grafem-300: #A488E4;
  --grafem-200: #C7B5F0;
  --grafem-100: #E4DAFA;
  --grafem-50: #F6F3FD;
  --surface: #FBFAFE;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F3EFFC;
  --surface-tint: #EEE8FB;
  --ink: #1B1533;
  --ink-muted: #5E5878;
  --ink-brand: #302559;
  --line: #E3DEF2;
  --line-strong: #8E84B3;
  --accent: var(--grafem-900);
  --accent-hover: var(--grafem-700);
  --on-accent: #FFFFFF;
  --link: #5B479B;
  --focus: #6A55B8;
  --data-1: #302559;
  --data-2: #7E68C6;
  --data-3: #1D7A6E;
  --data-4: #B5602E;
  --success: #1F7A5C;
  --warning: #9A5700;
  --danger: #B3261E;
  --shadow-sm: 0 1px 2px rgba(48,37,89,0.08);
  --shadow-md: 0 10px 30px rgba(48,37,89,0.12);
  --shadow-glow: 0 16px 48px rgba(164,136,228,0.45);
  color-scheme: light;
}
[data-theme="dark"] {
  --grafem-900: #302559;
  --grafem-700: #4A3A85;
  --grafem-600: #5B479B;
  --grafem-500: #7E68C6;
  --grafem-300: #A488E4;
  --grafem-200: #C7B5F0;
  --grafem-100: #E4DAFA;
  --grafem-50: #F6F3FD;
  --surface: #14102A;
  --surface-raised: #1E1838;
  --surface-sunken: #0E0B1F;
  --surface-tint: #2A2250;
  --ink: #F1EDFB;
  --ink-muted: #B4ACD0;
  --ink-brand: #C9B6F2;
  --line: #342C55;
  --line-strong: #7A70A3;
  --accent: var(--grafem-300);
  --accent-hover: #C3AEF0;
  --on-accent: #14102A;
  --link: #C3AEF0;
  --focus: #C3AEF0;
  --data-1: #C9B6F2;
  --data-2: #8B6FE0;
  --data-3: #5FC9B8;
  --data-4: #F0A274;
  --success: #5FD0A8;
  --warning: #F2B45A;
  --danger: #F2A49C;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-glow: 0 16px 48px rgba(164,136,228,0.30);
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --gradient-marca: linear-gradient(135deg, #302559 0%, #A488E4 100%);
  --gradient-noche: linear-gradient(160deg, #14102A 0%, #302559 50%, #A488E4 100%);
  --gradient-bruma: linear-gradient(135deg, #F6F3FD 0%, #E4DAFA 100%);
  --gradient-esfera: radial-gradient(circle at 30% 26%, #A488E4 0%, #5B479B 55%, #302559 100%);
  --gradient-satelite: radial-gradient(circle at 35% 30%, #E4DAFA 0%, #A488E4 100%);
  --font-display: "Sora", system-ui, sans-serif;
  --font-sans: "DM Sans", system-ui, sans-serif;
}
.display-xl { font-family: var(--font-display); font-size: 72px; line-height: 76px; font-weight: 600; letter-spacing: -0.03em; }
.display-l { font-family: var(--font-display); font-size: 52px; line-height: 58px; font-weight: 600; letter-spacing: -0.025em; }
.h1 { font-family: var(--font-display); font-size: 38px; line-height: 46px; font-weight: 600; letter-spacing: -0.02em; }
.h2 { font-family: var(--font-display); font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.015em; }
.h3 { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.body-l { font-family: var(--font-sans); font-size: 19px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-s { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.button { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 500; }
.data-l { font-family: var(--font-sans); font-size: 32px; line-height: 36px; font-weight: 500; letter-spacing: -0.01em; }
.data { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0em; }