/*
  Оформление корпоративной страницы Recoleta Capital Partners S.R.L.

  # Почему не как у cargaalpaso.com

  Там бренд сервиса: бирюза, скруглённый шрифт, молния на месте буквы. Здесь
  юридическое лицо, и страница должна выглядеть как страница юридического лица,
  а не как второй лендинг того же сервиса. Проверяющий, открывший её, ищет
  подтверждение, что компания существует, — ему нужен документ, а не реклама.

  Поэтому: тот же тёмный фон (родство двух сайтов видно сразу, это полезно), но
  засечный шрифт в заголовках, нейтральный тёплый акцент вместо бирюзы, никакой
  молнии и никакого знака `al paso`.

  # Почему без сборщика

  По той же причине, что и у сайта бренда: одна страница, текст и реквизиты.
  Сборщик здесь обслуживал бы сам себя.
*/

:root {
  --bg: #0a0c0d;
  --surface: #13171a;
  --border: #222a2f;
  --text: #e7ecef;
  --muted: #8d99a0;

  /* Тёплый нейтральный вместо фирменной бирюзы: он отделяет компанию от
     продукта, но не заводит второй бренд — это оттенок бумаги, а не цвет. */
  --accent: #c8bba4;

  --page: 56rem;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a {
  color: inherit;
}

h1,
h2 {
  /* Засечный — это и есть всё различие с сайтом бренда. Серьёзность знака
     здесь делает шрифт, а не цвет и не картинки, которых нет. */
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Шапка ───────────────────────────────────────────────────────────────── */

.top {
  border-bottom: 1px solid var(--border);
}

.top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  flex-wrap: wrap;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* Монограмма вместо логотипа. Логотипа у компании нет, и рисовать его ради
   этой страницы не надо: три буквы в рамке читаются как знак юридического
   лица и ничего не обещают сверх того. */
.mark-mono {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: ui-serif, Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
}

.mark-name {
  font-family: ui-serif, Georgia, serif;
  font-size: 1.05rem;
}

.mark-form {
  color: var(--muted);
}

.top-mail {
  color: var(--muted);
  font-size: 0.92rem;
  text-decoration: none;
}

.top-mail:hover {
  color: var(--text);
}

/* ── Первый экран ────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(56px, 10vw, 104px) 0 clamp(40px, 6vw, 64px);
}

h1 {
  font-size: clamp(2rem, 5.5vw, 3.1rem);
}

.lead {
  margin: 24px 0 0;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  max-width: 40ch;
}

.lead-sub {
  margin: 16px 0 0;
  color: var(--muted);
  max-width: 62ch;
}

.lead-sub strong {
  color: var(--text);
  font-weight: 600;
}

/* ── Блоки ───────────────────────────────────────────────────────────────── */

.block {
  padding: clamp(32px, 5vw, 56px) 0;
  border-top: 1px solid var(--border);
}

h2 {
  font-size: 1.25rem;
  color: var(--muted);
  margin-bottom: 24px;
}

/* ── Проект ──────────────────────────────────────────────────────────────── */

.card {
  display: grid;
  gap: 8px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
}

.card:hover {
  border-color: var(--accent);
}

.card-name {
  font-family: ui-serif, Georgia, serif;
  font-size: 1.35rem;
}

.card-desc {
  color: var(--muted);
  max-width: 54ch;
}

.card-link {
  margin-top: 8px;
  color: var(--accent);
  font-size: 0.92rem;
}

/* ── Реквизиты ───────────────────────────────────────────────────────────── */

.facts {
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.facts > div {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg);
}

.facts dt {
  color: var(--muted);
}

.facts dd {
  margin: 0;
}

.facts a {
  text-decoration-color: var(--muted);
  text-underline-offset: 3px;
}

/* Телефон на узком экране ставить некуда: две колонки по 14rem не помещаются,
   и подпись отрывается от значения. Складываем в строки. */
@media (max-width: 36rem) {
  .facts > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ── Английский блок ─────────────────────────────────────────────────────── */

.block-en .lead-sub {
  margin-top: 0;
}

.facts-inline {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 70ch;
}

/* ── Подвал ──────────────────────────────────────────────────────────────── */

.bottom {
  border-top: 1px solid var(--border);
  padding: 32px 0 48px;
}

.bottom-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.92rem;
}

.copy,
.legal {
  margin: 0;
}

.legal a {
  text-underline-offset: 3px;
}

.legal-note {
  opacity: 0.7;
}