/* ============================================================
   INGENIERÍA HUMANA EMPRESARIAL — Sistema visual
   Editorial premium · papel cálido · acento oro · data-driven
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* —— Papel / tinta —— */
  --paper:        #f6f4ef;   /* fondo principal cálido */
  --paper-2:      #efece4;   /* fondo recesivo */
  --panel:        #fffdf9;   /* tarjetas */
  --panel-soft:   #faf8f3;
  --ink:          #1b1a17;   /* tinta principal */
  --ink-2:        #4a4842;   /* tinta secundaria */
  --ink-3:        #8a857b;   /* tinta terciaria / muted */
  --hair:         #e4dfd4;   /* líneas finas */
  --hair-2:       #d6d0c2;
  --gold:         #b08d57;   /* acento oro */
  --gold-soft:    #d8c39c;
  --gold-wash:    #f0e7d6;

  /* —— Estados —— */
  --risk:         oklch(0.56 0.13 28);   /* rojo riesgo */
  --warn:         oklch(0.70 0.11 70);   /* ámbar */
  --good:         oklch(0.60 0.09 150);  /* verde */

  /* —— 6 arquetipos: misma L/C, varía matiz —— */
  --a-huerfano:   oklch(0.58 0.075 255); /* azul pizarra */
  --a-vagabundo:  oklch(0.62 0.075 200); /* teal apagado */
  --a-martir:     oklch(0.66 0.105 62);  /* ocre / arcilla */
  --a-guerrero:   oklch(0.56 0.135 30);  /* óxido / rojo */
  --a-sabio:      oklch(0.60 0.090 150); /* verde bosque */
  --a-mago:       oklch(0.52 0.110 295); /* índigo violeta */

  /* tintes suaves para fondos */
  --a-huerfano-w:  oklch(0.58 0.075 255 / 0.10);
  --a-vagabundo-w: oklch(0.62 0.075 200 / 0.10);
  --a-martir-w:    oklch(0.66 0.105 62 / 0.10);
  --a-guerrero-w:  oklch(0.56 0.135 30 / 0.10);
  --a-sabio-w:     oklch(0.60 0.090 150 / 0.10);
  --a-mago-w:      oklch(0.52 0.110 295 / 0.10);

  /* —— Tipografía —— */
  --serif: 'Spectral', Georgia, serif;
  --sans:  'IBM Plex Sans', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* —— Geometría —— */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;
  --shadow: 0 1px 2px rgba(40,34,20,0.04), 0 8px 24px -12px rgba(40,34,20,0.14);
  --shadow-lg: 0 2px 4px rgba(40,34,20,0.05), 0 24px 60px -24px rgba(40,34,20,0.22);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* —— utilidades tipográficas —— */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.serif { font-family: var(--serif); }
.mono  { font-family: var(--mono); }

::selection { background: var(--gold-wash); }

/* —— scrollbar discreto —— */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 10px; border: 3px solid var(--paper); }
*::-webkit-scrollbar-track { background: transparent; }

/* —— botones base —— */
.btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 12px 22px;
  cursor: pointer;
  transition: all .18s ease;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { background: #000; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--hair-2);
}
.btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); }
.btn-gold {
  background: var(--gold);
  color: #fff;
}
.btn-gold:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* —— animaciones —— */
@keyframes fadeUp { from { transform: translateY(10px); } to { transform: none; } }
/* transform-only so content is ALWAYS visible even if the preview pauses animations */
.fade-up { animation: fadeUp .45s cubic-bezier(.2,.7,.2,1) forwards; }
.fade-in { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .fade-up { animation: none !important; }
}
@media print {
  .no-print { display: none !important; }
}