/* Base compartilhada por todas as páginas do site (landing e páginas legais).
   Tokens copiados de docs/UI.md — mesma identidade do app. */

/* Fonte servida pelo próprio projeto (subset latin, peso 600) */
@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}
:root {
  --marca: #0b132b;
  --marca-claro: #1f2d55;
  --marca-linha: #1c2647;
  --marca-fundo: #16203f;
  --petroleo: #1f4e4e;
  --calmo: #3d6d6d;
  --acento: #d4af37;
  --acento-fosco: #a8862a;
  --acento-suave: #f1ede0;
  --pagina: #f3f1e7;
  --texto: #0b132b;
  --texto-suave: #4a5170;
  --lucro: #15803d;
  --atencao: #b45309;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --topo-h: 64px;   /* altura do cabeçalho */
}
* { box-sizing: border-box; margin: 0; }
body { font-family: var(--sans); background: var(--pagina); color: var(--texto); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--petroleo); }
:focus-visible { outline: 3px solid var(--petroleo); outline-offset: 2px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--petroleo); }

/* Cabeçalho */
header.topo { background: var(--marca); border-bottom: 1px solid var(--marca-linha); }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--topo-h); }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo svg { width: 36px; height: 36px; flex: none; }
.logo .nome { font-family: var(--serif); font-weight: 600; font-size: 26px; color: #fff; line-height: 1; }
.logo .sub { display: block; font: 600 9px/1 var(--sans); letter-spacing: .28em; color: var(--acento); margin-top: 4px; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 10px; font-weight: 600; font-size: 16px; text-decoration: none; border: 2px solid transparent; }
.btn-ouro { background: var(--acento); color: var(--marca); }          /* dourado só sobre o navy */
.btn-ouro:hover { background: #e2bf4d; }
.topo .btn { min-height: 40px; padding: 0 18px; font-size: 15px; }

/* Rodapé */
footer { background: var(--marca); border-top: 1px solid var(--marca-linha); color: #97a0bf; font-size: 14px; padding: 28px 0; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: center; }
footer a { color: #cfd5ea; }

@media (max-width: 640px) { .logo .nome { font-size: 23px; } }