/* ═══════════════════════════════════════════════════════════════════════
   SISTEMA TIPOGRÁFICO SEI · FUENTE ÚNICA DE VERDAD
   /assets/components/typography.css
   ───────────────────────────────────────────────────────────────────────
   REGLA PERMANENTE: Las páginas nuevas de SEI no deben introducir nuevos
   font-size, font-weight, line-height o familias tipográficas para
   jerarquías ya cubiertas por este sistema. Si aparece una necesidad no
   cubierta, debe justificarse y añadirse aquí conscientemente.
   ───────────────────────────────────────────────────────────────────────
   SEPARACIÓN DE RESPONSABILIDADES:
   Este archivo define CÓMO ES EL TEXTO, no DÓNDE ESTÁ.
   text-align, max-width, margin, padding, grid, flex y positioning
   pertenecen al CSS de cada componente/página, no a este sistema.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────────────────────
   Declaración autoritativa. Las páginas pueden mantener su propio :root
   durante la transición (mismos valores, sin conflicto).
   ────────────────────────────────────────────────────────────────────── */
:root {
  /* Familias tipográficas */
  --serif: Georgia,'Times New Roman',serif;
  --sans:  -apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',Arial,sans-serif;
  --mono:  'SFMono-Regular','Consolas','Liberation Mono',monospace;

  /* Paleta de color */
  --navy:     #1A3A5C;   /* títulos principales sobre fondos claros     */
  --navy-d:   #0D1F33;   /* fondos oscuros y casos expresamente definidos */
  --cobalt:   #2A5C8F;
  --cobalt-lt:#3A7BBF;
  --sage:     #1D5C3A;
  --sage-lt:  #2A7A50;
  --ochre:    #B08A2E;   /* eyebrows, numeraciones, acentos             */
  --ochre-lt: #C9A03A;
  --fog:      #F5F3EE;
  --fog-md:   #EDE9E2;
  --concrete: #E4E0D8;
  --tx:       #4A4540;   /* body principal                              */
  --tx-lt:    #7A7268;   /* texto secundario                            */
  --tx-xlt:   #A8A099;   /* micro-información                           */
  --white:    #FFFFFF;
  --border:   #D8D3CB;
  --border-lt:#EAE6DF;
  --stone:    #8C7E6A;
  --stone-lt: #B8AEA4;

  /* Espaciado y métricas globales */
  --sv:    clamp(64px,6vw,110px);
  --sv-sm: clamp(44px,3.8vw,64px);
  --pad:   clamp(24px,3.5vw,72px);
  --max:   1200px;
  --r:     2px;
  --r-md:  4px;
  --ease:  cubic-bezier(.25,.1,.25,1);
}


/* ══════════════════════════════════════════════════════════════════════
   01 · SECTION EYEBROW
   ──────────────────────────────────────────────────────────────────────
   Uso: labels de sección ("PROBLEMAS DEL TERRENO", "QUÉ ES", etc.)
   La alineación (centrado / izquierda) es responsabilidad del componente.
   ══════════════════════════════════════════════════════════════════════ */
.sei-ey {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.65;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: 18px;
}
.sei-ey::before {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ochre);
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════════════
   02 · HERO H1
   ──────────────────────────────────────────────────────────────────────
   Uso: título principal del hero de cada página.
   Siempre sobre fondo oscuro → color white.
   El max-width y alineación son responsabilidad del componente hero.
   Referencia: estabilizacion-de-suelos .es-hero h1
   ══════════════════════════════════════════════════════════════════════ */
.sei-hero-h1 {
  font-family: var(--serif);
  font-size: clamp(30px,3.2vw,56px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--white);
  letter-spacing: -.025em;
}


/* ══════════════════════════════════════════════════════════════════════
   03 · H2 SECTION — ESTÁNDAR APROBADO
   ──────────────────────────────────────────────────────────────────────
   Uso: título principal de cada sección de contenido.
   Color base: --navy (fondo claro). Override a --white en fondo oscuro.
   Referencia: Inicio .sei-h2 (clase ya aprobada y en uso)
   ══════════════════════════════════════════════════════════════════════ */
.sei-h2 {
  font-family: var(--serif);
  font-size: clamp(28px,3.5vw,42px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--navy);
  letter-spacing: -.022em;
}


/* ══════════════════════════════════════════════════════════════════════
   04 · H3 / SECTION LEAD
   ──────────────────────────────────────────────────────────────────────
   Uso: subtítulos editoriales, lead de sección en layouts de dos columnas.
   Referencia: estabilizacion-de-suelos .es-como__intro-lead
   ══════════════════════════════════════════════════════════════════════ */
.sei-h3 {
  font-family: var(--serif);
  font-size: clamp(20px,1.8vw,28px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--navy);
  letter-spacing: -.015em;
}


/* ══════════════════════════════════════════════════════════════════════
   05 · PULL QUOTE / CALLOUT
   ──────────────────────────────────────────────────────────────────────
   Uso: citas destacadas con borde lateral, callouts editoriales.
   Siempre en italic por su función de cita.
   Referencia: estabilizacion-de-suelos .es-que__quote p
   ══════════════════════════════════════════════════════════════════════ */
.sei-quote {
  font-family: var(--serif);
  font-size: clamp(15px,1.05vw,18px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
  color: var(--navy);
}


/* ══════════════════════════════════════════════════════════════════════
   06 · CARD TITLE
   ──────────────────────────────────────────────────────────────────────
   Uso: título de tarjetas de contenido equivalentes entre páginas.
   Ejemplos: "Generación de polvo", "Formación de barro", etc.
   Referencia: Inicio .sei-pcard__name = Estabilización .es-prob-card__title
   ══════════════════════════════════════════════════════════════════════ */
.sei-card-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--navy);
}


/* ══════════════════════════════════════════════════════════════════════
   07 · HERO BODY
   ──────────────────────────────────────────────────────────────────────
   Uso: texto descriptivo dentro de los heroes de página.
   Semánticamente distinto de .sei-body-lg para evitar acoplamiento.
   Siempre sobre fondo oscuro → color claro por defecto.
   Referencia: estabilizacion-de-suelos .es-hero__sub
   ══════════════════════════════════════════════════════════════════════ */
.sei-hero-body {
  font-family: var(--sans);
  font-size: clamp(14px,1vw,16px);
  font-weight: 400;
  line-height: 1.78;
  color: rgba(255,255,255,.62);
}


/* ══════════════════════════════════════════════════════════════════════
   08 · BODY LARGE
   ──────────────────────────────────────────────────────────────────────
   Uso: párrafos introductorios de sección, body destacado en layouts editoriales.
   Referencia: estabilizacion-de-suelos .es-que__text p, .es-como__intro-body
   ══════════════════════════════════════════════════════════════════════ */
.sei-body-lg {
  font-family: var(--sans);
  font-size: clamp(14px,1vw,16px);
  font-weight: 400;
  line-height: 1.78;
  color: var(--tx-lt);
}


/* ══════════════════════════════════════════════════════════════════════
   09 · BODY
   ──────────────────────────────────────────────────────────────────────
   Definido sobre el elemento body en cada página:
   font-family: var(--sans); font-size: 16px; line-height: 1.65; color: var(--tx);
   No necesita clase utilitaria; es la herencia base.
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   10 · CARD BODY
   ──────────────────────────────────────────────────────────────────────
   Uso: texto descriptivo dentro de tarjetas de contenido equivalentes.
   Referencia: Inicio .sei-pcard__text = Estabilización .es-prob-card__desc
   ══════════════════════════════════════════════════════════════════════ */
.sei-card-body {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.72;
  color: var(--tx);
}


/* ══════════════════════════════════════════════════════════════════════
   11 · SMALL / SUPPORTING TEXT
   ──────────────────────────────────────────────────────────────────────
   Uso: información secundaria, pie de elemento, textos de soporte.
   Referencia: textos de footer, captions
   ══════════════════════════════════════════════════════════════════════ */
.sei-small {
  font-family: var(--sans);
  font-size: clamp(12.5px,.82vw,14px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--tx-lt);
}


/* ══════════════════════════════════════════════════════════════════════
   12 · MICRO LABEL
   ──────────────────────────────────────────────────────────────────────
   Uso: etiquetas descriptivas en tarjetas (no numéricas).
   Ejemplo: "¿Te pasa esto?" en tarjetas de Inicio.
   Referencia: Inicio .sei-pcard__num (label descriptivo)
   ══════════════════════════════════════════════════════════════════════ */
.sei-micro {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx-xlt);
}


/* ══════════════════════════════════════════════════════════════════════
   13 · ORDINAL (tarjeta)
   ──────────────────────────────────────────────────────────────────────
   Uso: numeración secuencial en tarjetas ("01", "02", "03", "04").
   Referencia: estabilizacion-de-suelos .es-prob-card__num
   ══════════════════════════════════════════════════════════════════════ */
.sei-ordinal {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ochre);
}


/* ══════════════════════════════════════════════════════════════════════
   14 · ORDINAL DISPLAY
   ──────────────────────────────────────────────────────────────────────
   Uso: numeración grande de procesos/fases.
   Referencia: estabilizacion-de-suelos .es-como__fase-num
   ══════════════════════════════════════════════════════════════════════ */
.sei-ordinal-lg {
  font-family: var(--serif);
  font-size: clamp(34px,3vw,48px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ochre);
}


/* ══════════════════════════════════════════════════════════════════════
   15 · STEP LABEL
   ──────────────────────────────────────────────────────────────────────
   Uso: nombre de fase o paso dentro de procesos.
   Ejemplo: "Preparación", "Incorporación", "Mezcla y homogeneización".
   Referencia: estabilizacion-de-suelos .es-como__fase-title
   ══════════════════════════════════════════════════════════════════════ */
.sei-step-label {
  font-family: var(--sans);
  font-size: clamp(11px,.8vw,13px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
}


/* ══════════════════════════════════════════════════════════════════════
   BOTONES
   ──────────────────────────────────────────────────────────────────────
   Componente de presentación tipográfica. Variantes de color y fondo
   no añaden nuevos tamaños ni familias.
   ══════════════════════════════════════════════════════════════════════ */
.sei-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: clamp(12.5px,.85vw,15px);
  font-weight: 600;
  letter-spacing: .05em;
  border-radius: var(--r);
  padding: 13px 26px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .12s var(--ease);
}
.sei-btn:hover  { transform: translateY(-1px); }
.sei-btn:active { transform: translateY(0); }
.sei-btn svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform .18s var(--ease); }
.sei-btn:hover svg { transform: translateX(3px); }

.sei-btn--primary { background: var(--navy); color: var(--white); border: 2px solid var(--navy); }
.sei-btn--primary:hover { background: var(--cobalt); border-color: var(--cobalt); }

.sei-btn--outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.sei-btn--outline:hover { background: var(--navy); color: var(--white); }

.sei-btn--sage { background: var(--sage); color: var(--white); border: 2px solid var(--sage); }
.sei-btn--sage:hover { background: var(--sage-lt); border-color: var(--sage-lt); }

.sei-btn--ghost { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.4); }
.sei-btn--ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.65); }