/* ============================================================
   elytra-ds.css — Sistema visual de Elytra (dirección Blueprint)

   FUENTE DE VERDAD: gitlab.com/elytra-brain/brain-shared
   -> empresa/identidad-parte2-visual-verbal.md
   (Manual de Identidad Corporativa — Parte 2, §14)

   NO EDITAR TOKENS A MANO.
   Para cambiar un color, tipografía, espaciado o componente:
     1. Edita la regla en identidad-parte2-visual-verbal.md (fuente de verdad)
     2. Actualiza el bloque del Apéndice de ese documento
     3. Repégalo en el Design System de Claude Design
     4. Regenera o ajusta este archivo

   Este archivo es un PORT MANUAL: no se sincroniza solo con Claude Design.
   Los cambios fluyen hacia abajo, nunca hacia arriba.

   CONVENCIÓN DE PREFIJOS (la regla es de PROCEDENCIA, no de tipo):
     .ds-* = portado del Design System (fuente: MIC Parte 2 §14). No editar
             localmente: se cambia en la fuente y se regenera hacia abajo.
     .ly-* = andamiaje local de este repo. Se edita aquí.
   ============================================================ */

/* ELYTRA Design System — "Blueprint de ingenieria".
   Portado desde el proyecto Claude Design "Elytra Design System"
   (tokens/ + components/core + components/blueprint), que a su vez deriva
   del MIC Parte 2. Cadena: MIC -> Apendice -> Claude Design -> este CSS.
   Papel frio azulado, cuadricula 26px, esquinas rectas, sin sombras.
   El redline es SOLO funcional: tachar / eliminar / corregir. */

@import url("https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500&family=Azeret+Mono:wght@400;500&display=swap");

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  --ink: #1C2024;
  --paper: #EDEFF1;
  --ink-soft: #5A616A;
  --struct: #38566E;
  --struct-soft: #8FA0B0;
  --redline: #C23B2E;
  --grid: rgba(40, 60, 80, .07);
  --line: rgba(28, 32, 36, .2);

  --font-display: "Saira", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, monospace;

  /* Escala tipográfica CERRADA (MIC §4). Diez pasos, ni uno más.
     Jerarquía: d1 > n1 > d2 > d3 > d4. Solo dos tamaños de mono: m1 y m2.
     Si algo nuevo no encaja, se usa el paso más cercano — no se inventa uno. */
  --text-d1: clamp(2.3rem, 5vw, 4.4rem);    /* titular hero, uno por página */
  --text-d2: clamp(1.75rem, 3.4vw, 2.6rem); /* titular de sección, TODOS */
  --text-d3: clamp(1.4rem, 2.4vw, 1.9rem);  /* cierre, destacado */
  --text-d4: 1.15rem;                       /* subtítulo de bloque, botón */
  --text-n1: clamp(2.2rem, 4.4vw, 3.4rem);  /* cifra-lectura, nunca > d1 */
  --text-b1: 1.05rem;                       /* subtítulo hero, intro */
  --text-b2: 0.95rem;                       /* cuerpo por defecto */
  --text-b3: 0.85rem;                       /* cuerpo secundario */
  --text-m1: 0.72rem;                       /* etiqueta principal, ls .16em */
  --text-m2: 0.66rem;                       /* dato secundario, ls .13em */
  /* NOTA: sin tokens de peso/line-height/tracking — decisión del MIC §14.2.
     Esas propiedades van como literales en la clase (así lo hace la portada).
     Si aparece divergencia real, la solución es una clase tipográfica en la
     FUENTE (p. ej. .t-m1 con las cinco propiedades), no un token nuevo aquí. */

  /* Escala de espaciado CERRADA base 8 (MIC §5). Ningún valor fuera de ella. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;

  /* Ritmo vertical (MIC §5.1): un solo padding de banda, SIMÉTRICO. */
  --band-pad: clamp(48px, 8vw, 96px);

  --container-max: 1160px;
  --container-pad: clamp(20px, 5vw, 56px);
  --grid-cell: 26px;
  --border-w-strong: 1.5px;
  --dur-fast: .16s;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-b2);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
}

::selection { background: var(--struct); color: var(--paper); }

:focus-visible { outline: 2px solid var(--redline); outline-offset: 3px; }

.ly-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ---------- core/Wordmark ---------- */
.ds-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.ds-wordmark__mark {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 42px;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}

.ds-wordmark--reverse .ds-wordmark__mark { color: var(--paper); }

.ds-wordmark__cota {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.ds-wordmark__rule {
  position: relative;
  height: 1px;
  width: 100%;
  background: var(--struct);
}

.ds-wordmark__rule::before,
.ds-wordmark__rule::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 1px;
  height: 7px;
  background: var(--struct);
}

.ds-wordmark__rule::before { left: 0; }
.ds-wordmark__rule::after { right: 0; }

.ds-wordmark__caption {
  font-family: var(--font-mono);
  font-size: var(--text-m2);
  letter-spacing: .13em;
  color: var(--struct);
}

/* ---------- core/Tag ---------- */
.ds-tag {
  font-family: var(--font-mono);
  font-size: var(--text-m1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--struct);
}

.ds-tag--soft { color: var(--ink-soft); }
.ds-tag--ink { color: var(--ink); }
.ds-tag--redline { color: var(--redline); }

/* ---------- core/Eyebrow ---------- */
.ds-eyebrow {
  display: inline-block;
  border: 1px solid var(--struct);
  padding: var(--space-1);
  border-radius: 0;
}

/* ---------- core/Button ---------- */
.ds-button {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--text-d4);
  padding: var(--space-2) var(--space-3);
  border: var(--border-w-strong) solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  line-height: 1;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.ds-button:hover { background: var(--struct); border-color: var(--struct); }

.ds-button--secondary { background: transparent; color: var(--ink); }
.ds-button--secondary:hover { background: transparent; color: var(--struct); border-color: var(--struct); }

/* ---------- core/GhostLink ---------- */
.ds-ghost-link {
  font-family: var(--font-mono);
  font-size: var(--text-m1);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}

.ds-ghost-link:hover { color: var(--redline); border-color: var(--redline); }

/* ---------- blueprint/Card ---------- */
.ds-card {
  background: var(--paper);
  border: var(--border-w-strong) solid var(--ink);
  border-radius: 0;
  padding: var(--space-6);
}

/* ---------- blueprint/TitleBlock ---------- */
.ds-title-block {
  border: var(--border-w-strong) solid var(--ink);
  border-radius: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-family: var(--font-mono);
}

.ds-title-block__cell {
  padding: var(--space-2);
  border-right: 1px solid var(--line);
}

.ds-title-block__cell:last-child { border-right: none; }

.ds-title-block__key {
  font-size: var(--text-m2);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--struct);
}

.ds-title-block__value {
  font-size: var(--text-m2);
  letter-spacing: .13em;
  margin-top: var(--space-1);
  color: var(--ink);
}

/* ---------- blueprint/StepRail ---------- */
.ds-step-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}

.ds-step-rail__step {
  padding: 0 var(--space-3) var(--space-1);
  border-left: 1px solid var(--line);
}

.ds-step-rail__step:first-child { padding-left: 0; border-left: none; }

.ds-step-rail__n {
  font-family: var(--font-mono);
  font-size: var(--text-m1);
  letter-spacing: .16em;
  color: var(--struct);
}

.ds-step-rail__title {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: var(--text-d4);
  letter-spacing: .01em;
  margin: var(--space-1) 0;
}

.ds-step-rail__title--elim { color: var(--redline); }

.ds-step-rail__body {
  font-family: var(--font-body);
  font-size: var(--text-b3);
  color: var(--ink-soft);
  max-width: 24ch;
  margin: 0;
}

/* ---------- blueprint/StatReading ---------- */
.ds-stat__label {
  font-family: var(--font-mono);
  font-size: var(--text-m1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--struct);
  margin-bottom: var(--space-2);
}

.ds-stat__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-n1);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}

.ds-stat__currency {
  font-family: var(--font-mono);
  font-size: var(--text-m1);
  color: var(--struct);
  vertical-align: .7em;
  margin-right: .25em;
}

.ds-stat__assumption {
  font-family: var(--font-mono);
  font-size: var(--text-m2);
  letter-spacing: .13em;
  color: var(--ink-soft);
  line-height: 1.7;
  padding-left: var(--space-2);
  border-left: 2px solid var(--struct);
  margin: var(--space-2) 0 0;
}

/* ---------- blueprint/ProcessSchematic ---------- */
.ds-schematic {
  width: 100%;
  max-width: 300px;
  height: auto;
}

.ds-schematic [stroke] { vector-effect: non-scaling-stroke; }

.ds-schematic .spine { stroke: var(--ink); stroke-width: 1.2; }

.ds-schematic .node { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.ds-schematic .node--live { stroke: var(--struct); stroke-width: 1.8; }

.ds-schematic .elim { stroke: var(--redline); stroke-width: 1.8; }

.ds-schematic .elim-label {
  font-family: var(--font-mono);
  font-size: 7.5px;
  fill: var(--redline);
  letter-spacing: .05em;
}

.ds-schematic .cota { stroke: var(--struct); stroke-width: 1; }

.ds-schematic .cota-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  fill: var(--struct);
  letter-spacing: .06em;
}

/* ---------- blueprint/Fossil ---------- */
.ds-fossil {
  height: auto;
}

.ds-fossil path,
.ds-fossil circle {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ============================================================
   ANDAMIAJE LOCAL (.ly-*) — NO es del Design System.
   Utilidades de layout/tipo de este repo que no existen como componente
   en la fuente. Se editan aquí. Si alguna se vuelve canónica, primero se
   declara en la fuente (MIC §14) y recién entonces pasa a .ds-*.
   ============================================================ */

/* ---------- ly/SeqRow ----------
   Fila de secuencia numerada: [nº + nombre] | descripción. Compartida por
   las páginas Método y Casos (identica en ambas composiciones v1.4). */
.ly-seqrow {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: var(--space-3) var(--space-6);
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}

.ly-seqrow__n {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-m1);
  letter-spacing: 0.16em;
  color: var(--struct);
}

/* La etapa que abre en redline (Eliminar = donde empieza el valor). */
.ly-seqrow__n--elim { color: var(--redline); }

.ly-seqrow__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-d4);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-top: var(--space-1);
}

.ly-seqrow__body {
  font-size: var(--text-b3);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 720px) {
  .ly-seqrow { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ---------- ly/Página: banda, titulares, cierre, firma ----------
   Andamiaje de página compartido por las páginas del repo (Método, Casos…).
   Banda de ritmo vertical SIMÉTRICO (MIC §5.1); titular de sección en D2;
   cierre en D3. El max-width de cada titular/lead se fija por instancia (ch). */
.ly-band {
  border-top: var(--border-w-strong) solid var(--ink);
  padding: var(--band-pad) 0;
}

/* Primera banda (hero de página): sin regla superior. */
.ly-band--open { border-top: none; }

.ly-page-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-d1);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: var(--space-3) 0 0;
  max-width: 16ch;
}

.ly-section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-d2);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: var(--space-3) 0 var(--space-6);
}

/* Titular seguido de un lead (el lead aporta la separación al contenido). */
.ly-section-title--flush { margin-bottom: 0; }

.ly-lead {
  margin: var(--space-3) 0 0;
  font-size: var(--text-b1);
  line-height: 1.7;
  color: var(--ink-soft);
}

.ly-lead--gap { margin-bottom: var(--space-6); }

/* Línea de cierre de sección = D3. Salto "último elemento → línea de cierre"
   = --space-4 (MIC §5.1). Las composiciones usan --space-6/--space-8; son
   derivas por debajo del MIC — la clase se alinea a la fuente. */
.ly-close {
  border-top: var(--border-w-strong) solid var(--ink);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-d3);
  line-height: 1.24;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.ly-close span { color: var(--struct); }

/* Cierre de página (wordmark + title block): NO es banda. Más aire arriba que
   abajo para que se lean como un grupo (proximidad, MIC §5.1). */
.ly-signoff {
  display: flex;
  justify-content: center;
  padding: var(--space-8) 0 var(--space-4);
}

.ly-page-footer { padding: var(--space-3) 0 var(--space-8); }