/* ============================================================
   BECKHAMTAX — SUB-BRAND TOKENS (v19)
   Sub-brand by Estrategeos. Manifest: beckhamtax_rebrand/
   BeckhamTax Rebrand.html (v1.0). NO editar sin actualizar
   manifest.

   Reglas de uso (extracto del manifest):
   - Sterling: solo slash, italics y acentos puntuales.
     Nunca como background a escala ni en body copy.
   - Rust: reservado al pip de endorsement "by Estrategeos".
     Nunca UI ni estados.
   - Archivo Black: PROHIBIDO. Esa es la voz del padre.
   - Wordmark "Beckham/Tax" no se traduce.
   ============================================================ */

:root {
  /* ---- COLOR ---- */
  --bt-oxford:       #0E2A47;   /* primario, autoridad, navegación */
  --bt-oxford-deep:  #091A2D;   /* hover, fondos densos */
  --bt-sterling:     #B8924A;   /* accent: slash, italics, link hover */
  --bt-bone:         #F6F1E5;   /* superficie por defecto */
  --bt-paper:        #FBF7EE;   /* tarjetas, superficies elevadas */
  --bt-ink:          #0A0908;   /* body copy oscuro (heredado del padre) */
  --bt-rust:         #C83B2F;   /* SOLO pip "by Estrategeos" — heredado */

  --bt-line:  rgba(14, 42, 71, 0.18);
  --bt-line2: rgba(14, 42, 71, 0.30);
  --bt-mute:  rgba(14, 42, 71, 0.55);
  --bt-soft:  rgba(14, 42, 71, 0.06);

  /* ---- TYPOGRAPHY ---- */
  /* Inter — UI, wordmark, números (NO Archivo Black) */
  --bt-font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  /* Fraunces — display, italics editoriales (heredado del padre) */
  --bt-font-serif: 'Fraunces', 'Times New Roman', serif;
  /* JetBrains Mono — metadata, eyebrows (heredado del padre) */
  --bt-font-mono:  'JetBrains Mono', ui-monospace, monospace;

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

  /* ---- GRID ---- */
  --bt-container: 1280px;
  --bt-gutter:    24px;
  --bt-margin:    28px;     /* mobile-first; desktop usa 80px en .container */

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

/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bt-bone);
  color: var(--bt-ink);
  font-family: var(--bt-font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }

/* ============================================================
   COMPONENTES — wordmark & endorsement
   ============================================================ */
.bt-wordmark {
  font-family: var(--bt-font-sans);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--bt-oxford);
  display: inline-flex;
  align-items: baseline;
}
.bt-wordmark .slash {
  color: var(--bt-sterling);
  font-weight: 300;
  margin: 0 -0.05em;
  font-size: 1.1em;
}
.bt-wordmark--negative { color: var(--bt-bone); }

.bt-endorse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bt-font-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bt-oxford);
  opacity: 0.7;
}
.bt-endorse .pip {
  width: 6px;
  height: 6px;
  background: var(--bt-rust);
  display: inline-block;
}
.bt-endorse--negative { color: var(--bt-bone); opacity: 0.7; }

/* ============================================================
   COMPONENTES — typography helpers
   ============================================================ */
.bt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.bt-eyebrow .num {
  background: var(--bt-oxford);
  color: var(--bt-bone);
  padding: 3px 8px;
  font-family: var(--bt-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
}
.bt-eyebrow .label {
  font-family: var(--bt-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bt-oxford);
  opacity: 0.85;
}

.bt-mono {
  font-family: var(--bt-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.bt-display {
  font-family: var(--bt-font-serif);
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--bt-oxford);
  margin: 0;
}
.bt-display em {
  font-style: italic;
  color: var(--bt-sterling);
}

.bt-lede {
  font-family: var(--bt-font-serif);
  font-size: 22px;
  line-height: 1.45;
  color: #222;
  max-width: 720px;
  font-weight: 400;
}

/* ============================================================
   COMPONENTES — botones
   ============================================================ */
.bt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 22px;
  font-family: var(--bt-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.bt-btn--primary {
  background: var(--bt-oxford);
  color: var(--bt-bone);
}
.bt-btn--primary:hover { background: var(--bt-oxford-deep); }

.bt-btn--secondary {
  background: transparent;
  color: var(--bt-oxford);
  border: 1.5px solid var(--bt-oxford);
}
.bt-btn--secondary:hover {
  background: var(--bt-oxford);
  color: var(--bt-bone);
}

.bt-btn--accent {
  background: var(--bt-sterling);
  color: var(--bt-oxford-deep);
}
.bt-btn--accent:hover { background: #A07F3E; }