/* ==========================================================================
   Tokens · Sistema "Simetría v2"
   Fuente: Recursos/Identidad (paleta, tipografía, proporciones)
   Proporción de marca: 70 % blanco · 22 % lilas · 6 % morado · 2 % acento
   ========================================================================== */

@font-face {
  font-family: "Tenor Sans";
  src: url("../fonts/tenor-sans-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-italic-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Paleta de marca (primitivos) --- */
  --morado: #5a4374;        /* Principal · logotipo, titulares, botones */
  --morado-700: #47345d;    /* Hover / presionado */
  --morado-900: #2f2240;    /* Fondos oscuros profundos */
  --tinta: #2c2236;         /* Texto */
  --lavanda: #c3b3da;       /* Superficies, bandas */
  --malva: #9c86b8;         /* Filetes, eje, foil (líneas o texto ≥ 24px) */
  --lila: #e6ddf0;          /* Lente, fondos */
  --niebla: #f5f2f9;        /* Secciones alternas */
  --blanco: #ffffff;
  --gris-perla: #8c8592;    /* Solo elementos no textuales */

  /* --- Roles semánticos --- */
  --c-bg: var(--blanco);
  --c-bg-alt: var(--niebla);
  --c-surface: var(--blanco);
  --c-text: var(--tinta);
  --c-text-muted: #5d5468;  /* 7:1 sobre blanco */
  --c-heading: var(--tinta);
  --c-primary: var(--morado);
  --c-primary-hover: var(--morado-700);
  --c-on-primary: var(--blanco);
  --c-line: #e3dcec;
  --c-line-strong: var(--lavanda);
  --c-accent-line: var(--malva);
  --c-focus: #7a5ca0;
  --c-success: #2f6b4f;
  --c-error: #a3283a;

  /* Superficie oscura (morado) */
  --c-dark-bg: var(--morado);
  --c-dark-text: #f3eef9;
  --c-dark-muted: #d9cfe7;

  /* --- Tipografía --- */
  --f-display: "Tenor Sans", "Didot", Georgia, serif;
  --f-body: "Karla", "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --fs-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-h2: clamp(2rem, 1.55rem + 1.9vw, 3.25rem);
  --fs-h1: clamp(2.5rem, 1.7rem + 3.4vw, 4.75rem);
  --fs-stat: clamp(2.75rem, 2rem + 3vw, 4.5rem);

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  --w-light: 340;
  --w-regular: 420;
  --w-medium: 520;
  --w-semibold: 620;

  --track-eyebrow: 0.24em;
  --track-display: 0.02em;
  --track-caps: 0.16em;

  /* --- Espaciado (base 4/8) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --sp-section-sm: clamp(3rem, 2.2rem + 3vw, 5rem);

  /* --- Layout --- */
  --container: 76rem;     /* 1216px */
  --container-narrow: 52rem;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --header-h: 4.75rem;

  /* --- Forma --- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;

  /* --- Elevación (tinte morado) --- */
  --sh-1: 0 1px 2px rgba(44, 34, 54, 0.06), 0 2px 8px rgba(90, 67, 116, 0.05);
  --sh-2: 0 6px 24px -6px rgba(90, 67, 116, 0.18), 0 2px 6px rgba(44, 34, 54, 0.05);
  --sh-3: 0 24px 60px -18px rgba(71, 52, 93, 0.32);

  /* --- Movimiento --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 560ms;
  --t-reveal: 900ms;

  /* --- Capas --- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 40;
  --z-header: 100;
  --z-overlay: 900;
  --z-modal: 1000;
}