/* ==========================================================================
   FACTUR — tokens y tipografía base
   Sistema de diseño claro con el azul de Factur. Layout y tipografía tomados
   de la referencia (Bricolage + Jakarta + DM Mono); paleta propia de Factur.
   Para cambiar colores, se toca solo este archivo.
   ========================================================================== */

:root{
  /* ---- color (tema claro Factur) ---- */
  --bg:#f6f9fc;           /* fondo de página */
  --surface:#ffffff;      /* tarjetas y paneles */
  --surface-2:#eef3f9;    /* hover / bloques suaves */
  --ink:#0f172a;          /* títulos */
  --text:#475569;         /* párrafos */
  --muted:#64748b;        /* texto terciario */
  --line:#e6edf5;         /* bordes finos */
  --line-2:#d3deea;       /* bordes marcados */
  --primary:#2563eb;      /* azul Factur: acento primario */
  --primary-dark:#1d4ed8;
  --primary-soft:#eff4ff; /* fondo azul muy suave */
  --accent:#0ea5e9;       /* celeste: acento secundario */
  --ok:#16a34a;
  --alerta:#ef4444;

  /* ---- tipografía ---- */
  --display:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --body:'Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',monospace;
}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
ul{list-style:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}

/* ---- títulos ----
   Bricolage 800, interlineado cerrado y tracking negativo. Los tamaños los
   pone cada pantalla. */
h1,h2,h3{
  font-family:var(--display);font-weight:800;color:var(--ink);
  line-height:1.02;letter-spacing:-.035em;text-transform:none;
}
h3{letter-spacing:-.02em}
h1 em,h2 em,h3 em{font-style:normal;color:var(--primary)}
p{color:var(--text)}

/* ---- etiqueta / eyebrow ----
   Rótulo chico en mono, mayúsculas y espaciado. */
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--primary);display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--primary)}