/* ============================================================
   ESTRATEGEOS — BRAND TOKENS
   Copia exacta de brand-kit/tokens.css (home v19 local preview).
   No editar aquí — si cambia el brand-kit, re-copiar.
   ============================================================ */

:root {
  /* ---- COLOR ---- */
  --brand-ink:    #0A0908;
  --brand-bone:   #FAF6ED;
  --brand-sand:   #EFECE3;
  --brand-stone:  #E4DFD2;
  --brand-rust:   #C83B2F;
  --brand-rust-d: #A02C22;

  --brand-line: rgba(10, 9, 8, 0.15);
  --brand-mute: rgba(10, 9, 8, 0.55);
  --brand-soft: rgba(10, 9, 8, 0.06);

  /* ---- TYPOGRAPHY ---- */
  --brand-font-display: 'Archivo Black', Archivo, sans-serif;
  --brand-font-serif: 'Fraunces', 'Times New Roman', serif;
  --brand-font-mono: 'JetBrains Mono', monospace;
  --brand-font-sans: 'Inter', sans-serif;

  /* ---- SPACING (4px base) ---- */
  --brand-space-1:  4px;
  --brand-space-2:  8px;
  --brand-space-3:  12px;
  --brand-space-4:  16px;
  --brand-space-6:  24px;
  --brand-space-8:  32px;
  --brand-space-12: 48px;
  --brand-space-16: 64px;
  --brand-space-24: 96px;

  /* ---- GRID ---- */
  --brand-grid-columns: 12;
  --brand-grid-gutter: 24px;
  --brand-grid-margin: 80px;

  /* ---- RADII ---- */
  --brand-radius: 0;
}

/* ============================================================
   BASE
   ============================================================ */
body {
  background: var(--brand-bone);
  color: var(--brand-ink);
  font-family: var(--brand-font-serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   COMPONENTS
   ============================================================ */
.brand-wordmark {
  font-family: var(--brand-font-display);
  font-weight: 900;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: flex-end;
  gap: 0.2em;
}
.brand-wordmark::after {
  content: '';
  display: inline-block;
  width: 0.22em;
  height: 0.22em;
  background: var(--brand-rust);
  margin-bottom: 0.12em;
}

.brand-label {
  font-family: var(--brand-font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--brand-rust);
}

.brand-h1 {
  font-family: var(--brand-font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
}

.brand-h2 {
  font-family: var(--brand-font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--brand-line);
  margin-bottom: 16px;
}

.brand-p {
  font-family: var(--brand-font-serif);
  font-size: 17px;
  line-height: 1.55;
  max-width: 680px;
  opacity: 0.88;
}

.brand-emphasis {
  font-family: var(--brand-font-serif);
  font-style: italic;
  color: var(--brand-rust);
}

.brand-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--brand-ink);
  color: var(--brand-bone);
  font-family: var(--brand-font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
}
.brand-btn:hover { background: var(--brand-rust); }
.brand-btn--ghost {
  background: transparent;
  color: var(--brand-ink);
  border: 1px solid var(--brand-ink);
}
.brand-btn--ghost:hover {
  background: var(--brand-ink);
  color: var(--brand-bone);
}

.brand-meta {
  font-family: var(--brand-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-mute);
}