/* =========================================================================
   Entelekia Creations — Design tokens
   Ruta cálida / matérica (definitiva). Fuente: mini-guía de marca + brief.
   ========================================================================= */

:root {
  /* ---- Color ---- */
  --ink: #211C17;            /* grafito cálido — texto / fondos oscuros */
  --ink-footer: #1a1611;     /* footer */
  --ink-soft: #2b2620;       /* superficies oscuras suaves (cards sobre ink) */
  --ink-line: #34302a;       /* bordes sobre fondo oscuro */

  --accent: #C96B2C;         /* ámbar "material en fusión" — acento único / CTA */
  --accent-ink: #F4F0E9;     /* texto sobre ámbar */
  --accent-soft: rgba(201, 107, 44, .12);
  --accent-12: rgba(201, 107, 44, .16);

  --paper: #F4F0E9;          /* fondo de página */
  --board: #e6e1d9;          /* fondo de tableros de marca */
  --surface: #ffffff;        /* tarjetas claras */
  --surface-2: #faf7f1;      /* superficie clara alterna (tabs inactivas) */

  --text: #3a342d;           /* cuerpo */
  --text-2: #4a443c;         /* cuerpo alterno */
  --muted: #6B6258;          /* labels / captions */
  --muted-2: #9a8e7d;        /* captions sobre claro */
  --muted-warm: #8a8175;     /* tags */

  --line: #e2dccf;           /* borde principal */
  --line-2: #e7e0d3;         /* borde tarjeta */
  --line-3: #ece8e1;         /* separador suave */
  --line-input: #d9d2c7;     /* borde de inputs */

  /* sobre fondo oscuro */
  --on-dark: #F4F0E9;
  --on-dark-soft: #c9c0b4;
  --on-dark-mut: #a39584;
  --on-dark-foot: #b3a99d;
  --on-dark-foot-mut: #8d8275;
  --on-dark-foot-label: #6f655a;

  --ok: #7ee08a;             /* punto verde WhatsApp */
  --danger: #c0392b;

  /* ---- Tipografía ---- */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* escala fluida de titulares */
  --fs-h1: clamp(40px, 6.4vw, 78px);
  --fs-h2: clamp(30px, 4.2vw, 40px);
  --fs-h3: clamp(22px, 3vw, 30px);
  --fs-h4: clamp(18px, 2.2vw, 24px);
  --fs-lead: clamp(17px, 1.6vw, 19px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-mono: 12px;

  --lh-display: .98;
  --lh-body: 1.6;

  /* ---- Radios ---- */
  --r-pill: 100px;
  --r-card: 12px;
  --r-card-sm: 10px;
  --r-input: 9px;
  --r-tile: 8px;

  /* ---- Sombras ---- */
  --sh-card: 0 1px 3px rgba(0, 0, 0, .06);
  --sh-hover: 0 12px 28px rgba(0, 0, 0, .08);
  --sh-hover-strong: 0 12px 30px rgba(0, 0, 0, .10);
  --sh-modal: 0 30px 80px rgba(0, 0, 0, .40);

  /* ---- Layout ---- */
  --container: 1200px;
  --gutter: 32px;
  --section-y: clamp(56px, 8vw, 80px);
  --gap: 24px;
  --gap-sm: 16px;

  /* ---- Motion ---- */
  --t-fast: all .16s ease;
  --t-lift: transform .2s ease, box-shadow .2s ease;

  /* ---- Motivo gráfico: placeholder de foto pendiente ---- */
  --ph-light: repeating-linear-gradient(135deg, #efe9df 0 11px, #e7e0d3 11px 22px);
  --ph-dark: repeating-linear-gradient(135deg, #2b2620 0 11px, #322c25 11px 22px);

  /* k por capas (logo Estratos) */
  --k-stripes: repeating-linear-gradient(180deg, var(--accent) 0 2.5px, transparent 2.5px 4.5px);
}

/* Modo "Digital" (solo comparación — no usar en producción). */
.route-digital { --accent: #2F6BFF; }