/* Tokens de Stoic Marca v1.5 · copia literal del bloque :root de stoic-marca/sistema/tokens.css
   (aprobado por Obi como sistema oficial, 23 oct 2026 13:31 CST). ÚNICA fuente de color del sitio: site.css solo usa
   --stoic-* y --color-*. No editar aquí: si Marca actualiza tokens.css, se vuelve a copiar este bloque. */
:root {
  /* ---------- Color ---------- */
  --stoic-cal: #EFEBE4;            /* fondo principal */
  --stoic-piedra: #CFC6B8;         /* fondos secundarios, filetes; nunca texto sobre Cal */
  --stoic-concreto: #6A665F;       /* texto secundario sobre Cal (4.80:1) */
  --stoic-carbon: #1E1D1B;         /* texto principal, logo, fondos oscuros (14.18:1 sobre Cal) */
  --stoic-verde: #27694A;          /* "vivir de acuerdo con la naturaleza": lo que se ve entre los pilares (la sierra, el sitio).
                                      Solo en el vano: remates, fondos de paisaje, estados activos. NUNCA en el muro ni en los pilares
                                      (ni en el isotipo ni en el logotipo). Máximo 5 % de la superficie. 5.51:1 sobre Cal */
  --stoic-verde-claro: #63A482;    /* acento solo sobre Carbón (5.75:1) */
  --stoic-blanco: #FFFFFF;
  --stoic-negro: #000000;          /* solo logo a una tinta */

  /* Roles */
  --color-bg: var(--stoic-cal);
  --color-bg-alt: var(--stoic-piedra);
  --color-bg-inverse: var(--stoic-carbon);
  --color-text: var(--stoic-carbon);
  --color-text-muted: var(--stoic-concreto);
  --color-text-inverse: var(--stoic-cal);
  --color-text-inverse-muted: var(--stoic-piedra);   /* 9.96:1 sobre Carbón */
  --color-accent: var(--stoic-verde);
  --color-accent-inverse: var(--stoic-verde-claro);
  --color-rule: var(--stoic-piedra);
  --color-focus: var(--stoic-carbon);
  --color-active: currentColor;          /* estado activo: filete en currentColor (dictamen Marca 6e37b02); el verde solo es el vano */
  --verde-max: 0.05;                    /* proporción máxima de superficie en verde */

  /* ---------- Tipografía ---------- */
  --font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;   /* una sola voz */
  --font-display: var(--font-family);   /* titulares */
  --font-text: var(--font-family);      /* texto, navegación, botones, datos, formularios */
  --weight-logo: 600;              /* STOIC (solo en el logo, que va como SVG) */
  --weight-logo-desc: 300;         /* ARQUITECTURA del logo (SVG) */
  --weight-display: 500;           /* titulares en dos tonos, todos los tamaños */
  --weight-display-sm: 500;
  --weight-text: 400;
  --weight-text-strong: 500;
  --weight-label: 500;
  --tracking-logo: 0.26em;         /* STOIC */
  --tracking-display: -0.015em;    /* titulares */
  --tracking-label: 0.14em;        /* etiquetas en mayúsculas */
  --display-min-desktop: 28px;     /* titular mínimo en dos tonos */
  --display-min-mobile: 24px;

  /* Escala ESCRITORIO (≥ 1024 px) · tamaño / interlínea */
  --fs-display-d: 74px;  --lh-display: 1.04;  /* Hanken 500 · −0.015em */
  --fs-h1-d: 54px;       --lh-h1: 1.08;       /* Hanken 500 */
  --fs-h2-d: 36px;       --lh-h2: 1.14;       /* Hanken 500 */
  --fs-h3-d: 28px;       --lh-h3: 1.2;        /* Hanken 500 · mínimo de titular en escritorio */
  --fs-h4-d: 22px;       --lh-h4: 1.3;        /* Hanken 500 */
  --fs-lead-d: 20px;     --lh-lead: 1.55;     /* Hanken 400 */
  --fs-body-d: 17px;     --lh-body: 1.6;      /* Hanken 400 */
  --fs-small-d: 14px;    --lh-small: 1.5;     /* Hanken 400 */
  --fs-label-d: 12px;    --lh-label: 1.3;     /* Hanken 500, MAYÚSCULAS, tracking 0.14em */
  --fs-data-d: 15px;                          /* Hanken 400, tabular-nums */

  /* Escala MÓVIL (≤ 480 px) */
  --fs-display-m: 44px;
  --fs-h1-m: 34px;
  --fs-h2-m: 28px;
  --fs-h3-m: 24px;       /* mínimo de titular en móvil */
  --fs-h4-m: 20px;
  --fs-lead-m: 18px;
  --fs-body-m: 16px;
  --fs-small-m: 14px;
  --fs-label-m: 12px;    /* nunca menos de 11 px */
  --fs-data-m: 14px;

  /* Escala fluida 390 → 1440 px (recomendada) */
  --fs-display: clamp(44px, 32.9px + 2.86vw, 74px);
  --fs-h1: clamp(34px, 26.6px + 1.90vw, 54px);
  --fs-h2: clamp(28px, 25.0px + 0.76vw, 36px);
  --fs-h3: clamp(24px, 22.5px + 0.38vw, 28px);
  --fs-h4: clamp(20px, 19.3px + 0.19vw, 22px);
  --fs-lead: clamp(18px, 17.3px + 0.19vw, 20px);
  --fs-body: clamp(16px, 15.6px + 0.1vw, 17px);
  --fs-small: 14px;
  --fs-label: 12px;

  /* ---------- Logo ---------- */
  /* v1.5 · STOIC Arquitectura en Hanken Grotesk. Header escritorio = isotipo 24 px (hinting) + STOIC 16 px (SVG, 600, 0.26em) + filete + ARQUITECTURA (Hanken Grotesk 400, 11 px, tracking .16em, texto real).
     Compacto y móvil = versión corta (isotipo + STOIC). Archivos: isotipo/final/ y aplicaciones/header-*.svg */
  --brand-name: "STOIC Arquitectura";       /* <title>, og:site_name, también en el sitio EN */
  --brand-legal: "Stoic Atelier, S.A.P.I. de C.V.";  /* solo en el pie legal */
  --header-h-desktop: 90px;        /* = 2 u a 1440 (u = 45 px) */
  --header-h-compact: 56px;        /* header reducido al hacer scroll */
  --header-h-mobile: 56px;
  --logo-header-desktop-h: 16px;   /* altura de mayúsculas de STOIC junto al isotipo de 24 px */
  --logo-header-desc-weight: 400;
  --logo-header-desc-size: 11px;   /* ARQUITECTURA en texto, Hanken Grotesk 400 */
  --logo-header-desc-track: 0.16em;
  --logo-header-compact-h: 14px;   /* versión corta */
  --logo-header-mobile-h: 12px;    /* versión corta, junto al isotipo de 20 px */
  --logo-min-principal-h: 25px;               /* lockup principal horizontal (símbolo + STOIC | ARQUITECTURA); 5 mm impreso */
  --logo-min-compacto-h: 20px;                /* lockup compacto horizontal; 4 mm */
  --logo-min-principal-apilado-h: 80px;       /* 16 mm */
  --logo-min-compacto-apilado-h: 74px;        /* 15 mm */
  --logo-min-corto-h: 12px;                   /* versión corta horizontal (altura de STOIC); 3 mm */
  --logo-min-corto-apilado-h: 40px;           /* 10 mm */
  --logo-desc-min-size: 9px;                  /* el descriptor nunca baja de 9 px de cuerpo (1.8 mm impreso) */
    --isotipo-grid: 32;              /* retícula 32 × 32 u, margen 2 u; tinta 28 × 16 u = 7 módulos × 4 */
  --isotipo-ratio: 1.75;           /* ancho / alto de la tinta (28 / 16) */
  --isotipo-min: 16px;             /* cuadro de 32 u = 16 px (favicon; tinta 14 × 8 px, píxel exacto) */
  --isotipo-header-mobile: 20px;   /* cuadro de 20 px, versión con hinting (tinta 18 × 10 px) */
  --isotipo-header-desktop: 24px;  /* cuadro de 24 px, versión con hinting (tinta 21 × 12 px) */
  --isotipo-min-print: 7mm;        /* ancho de la tinta impresa */
  --isotipo-area: 0.2143;          /* área de protección = grueso del muro (6 u de 28) por lado */
  --lockup-isotipo-h: 1;           /* lockup horizontal: alto de la tinta = 1 x (muro a la altura de mayúsculas, pilares en la línea base) */
  --lockup-isotipo-gap: 0.75;      /* separación isotipo-nombre = 0.75 x */
  --lockup-apilado-w: 0.5;         /* lockup apilado: ancho de la tinta = ½ del ancho de STOIC, separación 0.75 x */
  --isotipo-color: var(--stoic-carbon); /* una sola tinta (Carbón, Cal, Concreto, negro o blanco). Nunca verde, nunca un pilar de otro color */

  /* ---------- Espacio y retícula ---------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 144px;
  /* Retícula v1.3 "muro y pilares": cada formato mide 32 u de ancho = margen 2 u + 7 módulos de 4 u + margen 2 u.
     Módulo = pilar = vano (como en el isotipo). Columna fija de contexto = MURO (m1–m2, 8 u − 1 u de aire);
     columna en scroll = COLUMNATA (m3–m7, 20 u). 1440 → u = 45 px · 390 → u = 12.19 px · post 1080 → u = 33.75 px. */
  --grid-max: 1440px;
  --u: calc(min(100vw, var(--grid-max)) / 32);
  --grid-margin: calc(2 * var(--u));
  --grid-module: calc(4 * var(--u));
  --grid-modules: 7;
  --col-muro: calc(7 * var(--u));          /* columna fija: 2 módulos menos 1 u de aire (315 px a 1440) */
  --col-columnata: calc(20 * var(--u));    /* columna en scroll: módulos 3–7 (900 px a 1440) */
  --col-columnata-start: calc(10 * var(--u));
  --gap-grupo: var(--u);                   /* entre piezas de un grupo */
  --gap-capitulo: calc(4 * var(--u));      /* entre capítulos = un pilar */
  /* Retícula anterior (v1.2, 12 columnas): sustituida en v1.3; se deja como referencia
     --grid-columns: 12; --grid-gutter-d: 24px; --grid-margin-d: 56px; --grid-columns-m: 4; --grid-gutter-m: 16px; --grid-margin-m: 20px; */

  /* ---------- Motion (pocas curvas, siempre las mismas) ---------- */
  --ease-out: cubic-bezier(0, 0, 0, 1);     /* entradas: llega y se asienta */
  --ease-io: cubic-bezier(.65, 0, .35, 1);  /* interfaz y desplazamientos ligados al scroll */
  --t-ui: 180ms;        /* hover, foco, menú (150–200 ms) con --ease-io */
  --t-in: 600ms;        /* entrada de un elemento con --ease-out */
  --t-scroll: 900ms;    /* revelado al hacer scroll (lento): opacidad + 1 u; sin pin ni parallax */
  --t-step: 120ms;      /* pórtico: de pilar a pilar */
  --t-stagger: 40ms;    /* escalón de entrada de página */
  /* Entrada del isotipo: muro a 0 ms; pilar i a calc(2 * var(--t-step) + i * var(--t-step)); una sola vez, nunca en bucle.
     @media (prefers-reduced-motion: reduce) -> estático. Sin cursor personalizado. */
  --rule: 1px;
  --radius: 0;            /* esquinas rectas en toda la marca */
}