/* Cabecera editorial: wordmark en serif (--font-serif, Lora) + filete inferior.
   Detalle final de tamaños/eyebrow line a confirmar por Alejandro (TBD §9.2). */

.app-brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
}

/* Navegación principal en la sans de UI (--font-ui), no serif. */
.app-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.app-nav a {
  padding: 6px var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-soft);
  transition: background var(--t), color var(--t);
}
.app-nav a:hover { background: var(--bg-hover); color: var(--text); }
.app-nav a.active { color: var(--accent-inv); background: var(--accent); }
.app-nav a.active:hover { color: var(--accent-inv); background: var(--accent); }

/* Títulos de página (h1) y de card en serif para la voz editorial. */
.page-header h1 { font-family: var(--font-serif); }