/* Estructura Legal — Design tokens · Dirección "Obra" (v1.0, oct 2026)
   Fuente de verdad visual. Cargar antes que cualquier otro CSS del theme. */
:root{
  /* Color — marca */
  --el-tinta:#1C1B19;        /* estructura, texto, fondos oscuros (domina ~55%) */
  --el-tinta-2:#24221E;      /* tarjetas sobre tinta */
  --el-adobe:#BF6F53;        /* superficie de marca (~15%). Texto encima: solo tinta */
  --el-oxido:#C2502A;        /* SOLO acción: botones CTA (texto blanco 4.7:1) */
  --el-oxido-texto:#B8461F;  /* óxido para texto/énfasis sobre papel (4.7:1) */
  --el-oxido-claro:#E2683A;  /* óxido para texto/énfasis sobre tinta (5.1:1) */
  --el-oliva:#5E6B3A;        /* estado positivo / "disponible" sobre claro */
  --el-oliva-claro:#9DB06A;  /* estado positivo sobre tinta */
  --el-ambar:#D9A23A;        /* semáforo ámbar (no usar como texto) */
  /* Color — neutros */
  --el-papel:#F3F1EC;        /* fondo base claro */
  --el-papel-2:#E8E5DD;      /* sección clara alternativa */
  --el-papel-card:#FAF9F6;   /* tarjetas sobre papel */
  --el-concreto:#8C8A84;     /* decorativo, iconos */
  --el-concreto-claro:#DAD6CE; /* líneas/bordes sobre papel */
  --el-mute-papel:#6E6B64;   /* texto secundario sobre papel (4.7:1) */
  --el-mute-tinta:#B3AEA4;   /* texto secundario sobre tinta (7.9:1) */
  --el-line-tinta:rgba(243,241,236,.16);
  --el-line-adobe:rgba(28,27,25,.30);

  /* Tipografía */
  --el-font-serif:'Source Serif 4',Georgia,'Times New Roman',serif; /* titulares 600 + cursiva 600 */
  --el-font-sans:'Schibsted Grotesk',system-ui,-apple-system,sans-serif; /* cuerpo/UI 400·500·600 */
  --el-font-mono:'JetBrains Mono',ui-monospace,monospace; /* etiquetas/números 400·500 */
  --el-fs-display:clamp(46px,6.6vw,96px);  /* lh .98 · ls -0.025em */
  --el-fs-h2:clamp(34px,4.2vw,58px);       /* lh 1.02 · ls -0.02em */
  --el-fs-h3:28px;                         /* lh 1.08 · ls -0.015em */
  --el-fs-statement:clamp(22px,2.1vw,30px);/* frases de dolor · lh 1.15 */
  --el-fs-lead:clamp(17px,1.4vw,20px);     /* lh 1.55 */
  --el-fs-body:17px;                       /* lh 1.55 */
  --el-fs-small:15px;
  --el-fs-caption:14px;
  --el-fs-label:12px;                      /* mono · uppercase · ls .14em */

  /* Espaciado */
  --el-container:1240px;
  --el-gutter:40px;          /* 22px < 960px */
  --el-section-y:112px;      /* 80px < 960px; CTA final 128px */
  --el-space-1:8px;--el-space-2:12px;--el-space-3:16px;--el-space-4:24px;--el-space-5:32px;--el-space-6:48px;--el-space-7:56px;--el-space-8:72px;

  /* Forma */
  --el-radius:4px;           /* botones, tarjetas, inputs */
  --el-radius-pill:999px;    /* chips/opciones del semáforo */
  --el-radius-photo:2px;
  --el-shadow-float:0 -8px 24px rgba(0,0,0,.2); /* solo sticky CTA / modales. El sistema es plano */

  /* Movimiento */
  --el-ease:cubic-bezier(.2,.7,.2,1);
  --el-dur-fast:.15s;        /* hover botones */
  --el-dur-mid:.2s;          /* hover tarjetas */
  --el-dur-reveal:.7s;       /* aparición al hacer scroll */
}
/* Superficies: cada <section> usa UNA de estas clases. Los componentes leen las variables locales. */
.s-ink{--bg:var(--el-tinta);--fg:var(--el-papel);--mu:var(--el-mute-tinta);--ln:var(--el-line-tinta);--em:var(--el-oxido-claro);--cta:var(--el-oxido);--ctafg:#fff;--card:var(--el-tinta-2);--ok:var(--el-oliva-claro)}
.s-paper{--bg:var(--el-papel);--fg:var(--el-tinta);--mu:var(--el-mute-papel);--ln:var(--el-concreto-claro);--em:var(--el-oxido-texto);--cta:var(--el-oxido);--ctafg:#fff;--card:var(--el-papel-card);--ok:var(--el-oliva)}
.s-paper2{--bg:var(--el-papel-2);--fg:var(--el-tinta);--mu:#66635C;--ln:#D2CDC2;--em:var(--el-oxido-texto);--cta:var(--el-oxido);--ctafg:#fff;--card:var(--el-papel);--ok:var(--el-oliva)}
.s-adobe{--bg:var(--el-adobe);--fg:var(--el-tinta);--mu:var(--el-tinta);--ln:var(--el-line-adobe);--em:var(--el-tinta);--cta:var(--el-tinta);--ctafg:var(--el-papel);--card:rgba(243,241,236,.14);--ok:var(--el-tinta)}