/* ============================================================
   GF Consultoría · Design Tokens · v2.0.0 · 2026-06-19
   Fuente única de verdad en CSS. Espeja tokens.json.
   NO confundir con los tokens de Propaily (--pp-*, morado).
   Idea rectora: Información · Dato · Decisión.
   ============================================================ */

:root {
  /* ---- Color · base ---- */
  --navy:    #0A2332;
  --teal:    #0A8AA1;
  --teal-ink:#0A6E80;  /* teal oscuro para texto pequeño sobre paper (5.4:1 AA). El --teal de marca solo va en texto >=18px o iconos. */
  --magenta: #AD1575;
  --violeta: #2E2B76;
  --lima:    #B8D049;
  --gris:    #51646D;
  --paper:   #F7F5F1;  /* fondo crema SOLO para pantalla / editorial (web, social, este manual) */
  --paper-2: #ECE7DD;
  --paper-print: #FFFFFF;  /* documentos que se imprimen o entregan (avalúo, carta, propuesta, tarjeta): fondo BLANCO, nunca crema */

  /* ---- Color · alias semántico ---- */
  --ink:        var(--navy);
  --bg:         var(--paper);
  --bg-subtle:  var(--paper-2);
  --accent:     var(--teal);
  --accent-2:   var(--magenta);

  /* ---- Color · estados ---- */
  --success: #10B981;
  --warning: #F59E0B;
  --danger:  #EF4444;
  --info:    #3B82F6;
  --success-ink: #0b7d54;  /* verde oscuro accesible (AA) para texto chico sobre claro */
  --danger-ink:  #b5371f;  /* rojo oscuro accesible (AA) para texto chico sobre claro */

  /* ---- Líneas / divisores ---- */
  --line:        rgba(10, 35, 50, 0.18);
  --line-soft:   rgba(10, 35, 50, 0.12);
  --line-faint:  rgba(10, 35, 50, 0.06);
  --line-on-navy:      rgba(247, 245, 241, 0.18);
  --line-on-navy-soft: rgba(247, 245, 241, 0.10);

  /* ---- Gradientes oficiales ---- */
  --grad-magenta-navy: linear-gradient(135deg, #AD1575 0%, #2E2B76 60%, #0A2332 100%);
  --grad-lima-navy:    linear-gradient(135deg, #B8D049 0%, #0A8AA1 60%, #0A2332 100%);

  /* ---- Tipografía · familias ---- */
  --font-serif:    "Newsreader", Georgia, serif;            /* display / editorial */
  --font-sans:     "IBM Plex Sans", system-ui, sans-serif;  /* cuerpo Dirección A (unificado al trío oficial · 2026-06-24) */
  --font-product:  "IBM Plex Sans", system-ui, sans-serif;  /* UI Dirección B */
  --font-mono:     "IBM Plex Mono", monospace;              /* datos / metadatos */
  --font-display-x: "Space Grotesk", sans-serif;            /* Dirección C */
  --font-mono-x:    "JetBrains Mono", monospace;            /* Dirección C */

  /* ---- Tipografía · escala (px) ---- */
  --fs-display-xl: 96px;
  --fs-h1: 54px;
  --fs-h2: 40px;
  --fs-h3: 30px;
  --fs-lede: 24px;
  --fs-body-lg: 17px;
  --fs-body: 15px;
  --fs-body-sm: 13.5px;
  --fs-eyebrow: 11px;
  --fs-data: 12px;
  --fs-caption: 10.5px;

  /* ---- Tracking ---- */
  --ls-display: -0.035em;
  --ls-h: -0.025em;
  --ls-body: -0.005em;
  --ls-mono: 0.22em;

  /* ---- Espaciado (escala de 4) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --page-margin: 48px;

  /* ---- Radios (identidad angular) ---- */
  --r-none: 0;
  --r-xs: 2px;
  --r-sm: 4px;
  --r-pill: 999px;

  /* ---- Elevación ---- */
  --shadow-sm: 0 12px 28px rgba(10, 35, 50, 0.08);
  --shadow-md: 0 12px 28px rgba(10, 35, 50, 0.12);
  --shadow-lg: 0 18px 40px rgba(10, 35, 50, 0.18);

  /* ---- Movimiento (motion) · fuente única · ver sub-manual Motion ---- */
  --motion-instant: 80ms;   /* flips de estado (checkbox, toggle) */
  --motion-fast:    160ms;  /* microinteracciones: hover, focus, botones */
  --motion-base:    240ms;  /* dropdowns, acordeones, reveal al scroll */
  --motion-slow:    420ms;  /* transición de sección, expand grande */
  --motion-page:    640ms;  /* intro de logo, transición de página, loader */
  --ease-standard:  cubic-bezier(.2, 0, 0, 1);    /* por defecto (entra/sale) */
  --ease-out:       cubic-bezier(.16, 1, .3, 1);  /* decel con presencia — entradas */
  --ease-in:        cubic-bezier(.4, 0, 1, 1);    /* salidas */
  --ease-inout:     cubic-bezier(.65, 0, .35, 1); /* movimientos continuos */
  --motion-shift-sm: 8px;   /* desplazamiento corto de entrada */
  --motion-shift:    16px;
  --motion-shift-lg: 24px;
  --motion-stagger:  60ms;  /* retardo entre elementos en secuencia */

  /* ---- Accesibilidad ---- */
  --focus-ring: 2px solid var(--teal);
  --tap-min: 44px;
}

/* ============================================================
   Utilidades base — opcionales, para piezas que consuman tokens
   ============================================================ */
.gfc-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--teal-ink);
}
.gfc-data {
  font-family: var(--font-mono);
  font-size: var(--fs-data);
  letter-spacing: 0.04em;
  color: var(--ink);
}
.gfc-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 0.98;
  letter-spacing: var(--ls-h);
  color: var(--ink);
  margin: 0;
}
.gfc-h2 em { font-style: italic; font-weight: 400; color: var(--teal); }
.gfc-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
}
.gfc-rule { height: 1px; background: var(--line); border: 0; }

/* Foco visible — nunca se elimina */
:where(a, button, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}