:root{
  /* ---- Ink — neutral near-black. Carries text, primary buttons, dark bands, footer. ---- */
  --white:#FFFFFF;
  --ink-50:#F6F6F5;--ink-100:#EEEEEC;--ink-200:#E4E4E5;--ink-300:#D6D6DA;--ink-400:#A6A6AC;
  --ink-500:#8A8A90;--ink-600:#6B6B70;--ink-700:#4A4A52;--ink-800:#3A3A40;--ink-900:#1A1A1D;--ink-950:#0B0B0C;

  /* ---- Grana — THE accent. Logo red: final CTA, button hover, links, column rules. ---- */
  --grana-50:#FFF0F3;--grana-100:#FFDCE3;--grana-200:#FFB0C0;--grana-300:#FF7A94;
  --grana-400:#FF3D63;--grana-500:#EB0A38;--grana-600:#C8062F;--grana-700:#B00021;

  /* ---- Mesh accents — live inside gradients, dots, numerals and top rules. Never fills. ---- */
  --naranja-50:#FFF3EA;--naranja-100:#FFE3CF;--naranja-500:#FF6A00;--naranja-600:#E05A00;
  --ambar-100:#FFF0C7;--ambar-500:#FFB300;
  --violeta-50:#F4EDFF;--violeta-100:#E6D8FF;--violeta-500:#7B2CFF;--violeta-600:#6420DB;

  /* ---- Verde — growth / success. Kept under the legacy --jade-* names for compatibility. ---- */
  --jade-50:#E8F8F1;--jade-100:#CCF1E3;--jade-200:#99E2C8;--jade-300:#5CD0A7;--jade-400:#1FC28C;
  --jade-500:#00B87C;--jade-600:#00A468;--jade-700:#007F51;--jade-800:#00593A;--jade-900:#003D28;--jade-950:#00261A;
  --verde-500:var(--jade-500);--verde-600:var(--jade-600);

  /* ---- Semantic status ---- */
  --success:#00A468;--success-bg:#E8F8F1;
  --warning:#B46A00;--warning-bg:#FFF3E2;
  --danger:#B00021;--danger-bg:#FFE6EA;
  --info:#6420DB;--info-bg:#F4EDFF;

  /* ---- Semantic aliases: surfaces ---- */
  --bg-canvas:var(--white);
  --bg-subtle:var(--ink-50);
  --bg-muted:var(--ink-100);
  --bg-inverse:var(--ink-950);
  --bg-brand:var(--ink-950);
  --surface-card:var(--white);
  --surface-raised:var(--white);
  --surface-inverse:var(--ink-950);
  --surface-glass:rgba(255,255,255,.14);
  --surface-glass-light:rgba(255,255,255,.72);
  --surface-overlay:rgba(11,11,12,.62);

  /* ---- Semantic aliases: text ---- */
  --text-primary:var(--ink-950);
  --text-body:var(--ink-800);
  --text-secondary:var(--ink-600);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-inverse:var(--white);
  --text-inverse-muted:rgba(255,255,255,.66);
  --text-brand:var(--ink-950);
  --text-accent:var(--grana-500);
  --text-accent-inverse:var(--grana-400);
  --text-link:var(--grana-500);
  --text-link-hover:var(--naranja-500);

  /* ---- Semantic aliases: borders ---- */
  --border-subtle:rgba(11,11,12,.08);
  --border-default:rgba(11,11,12,.16);
  --border-field:rgba(11,11,12,.18);
  --border-strong:var(--ink-950);
  --border-brand:var(--ink-950);
  --border-accent:var(--grana-500);
  --border-inverse:rgba(255,255,255,.28);

  /* ---- Semantic aliases: interaction ---- */
  --brand-primary:var(--ink-950);
  --brand-primary-hover:var(--grana-500);
  --brand-primary-press:var(--grana-600);
  --accent-signal:var(--grana-500);
  --accent-signal-hover:var(--ink-950);
  --accent-signal-inverse:var(--grana-400);
  --focus-ring:var(--violeta-500);

  /* ---- Mesh gradients (service-card headers) ---- */
  --grad-ia:linear-gradient(140deg,#7B2CFF,#EB0A38); /* @kind color */
  --grad-seo:linear-gradient(140deg,#FF6A00,#FFB300); /* @kind color */
  --grad-web:linear-gradient(140deg,#00B87C,#7BD64F); /* @kind color */
  --grad-mail:linear-gradient(140deg,#EB0A38,#FF6A00); /* @kind color */
}