/* Site da Topmast. Tokens do sistema de design (marca/topmast/, direção B · Barra-mastro). Sem cookies, sem rastreadores, fontes servidas daqui. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/BricolageGrotesque-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --surface: #F6F8F6; --surface-raised: #FFFFFF; --ink: #10322A; --muted: #4E5E58; --line: #D5DDD8;
  --abeto: #10322A; --nevoa: #EEF2EF; --latao: #C8A04A;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--surface); color: var(--ink); font: 400 16px/1.6 var(--sans); }
a { color: var(--ink); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--latao); outline-offset: 2px; }
.wrap { max-width: 1040px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

header.site { border-bottom: 1px solid var(--line); background: var(--surface-raised); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
header.site img { height: 28px; width: auto; display: block; }
header.site nav { display: flex; gap: 20px; flex-wrap: wrap; font-size: 15px; }
header.site nav a { text-decoration: none; color: var(--muted); }
header.site nav a:hover { color: var(--ink); }

.hero { padding-block: 72px 56px; display: grid; gap: 20px; } /* mesma borda esquerda dos cards (antes, centralizado mais estreito, desalinhava) */
.hero h1 { font: 700 clamp(36px, 6.2vw, 64px)/1.05 var(--display); letter-spacing: -0.025em; margin: 0; text-wrap: balance; } /* numa linha no computador (pedido do Mateus, 29/10) */
.hero p { margin: 0; font-size: 19px; color: var(--muted); }
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: 56px; }
@media (max-width: 760px) { .passos { grid-template-columns: minmax(0, 1fr); } }
.passo { background: var(--surface-raised); border: 1px solid #C9D3CD; border-radius: 16px; padding: 28px; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; align-content: start; }
.passo h2 { font: 600 21px/1.3 var(--sans); margin: 0; }
.passo p { margin: 0; color: #2A453D; font-size: 17px; line-height: 1.55; }
.passo .n { font: 700 15px/1 var(--display); color: var(--nevoa); background: var(--abeto); border-radius: 4px; padding: 7px 10px; justify-self: start; }
.faixa { background: var(--abeto); color: var(--nevoa); }
.faixa .wrap { padding-block: 40px; display: grid; gap: 8px; max-width: 1040px; }
.faixa h2 { font: 700 26px/1.2 var(--display); margin: 0; }
.faixa p { margin: 0; color: #DCE4DF; max-width: 70ch; font-size: 17px; }
.faixa a { color: var(--latao); }

article.doc { padding-block: 48px 64px; max-width: 760px; }
article.doc h1 { font: 700 clamp(30px, 5vw, 42px)/1.1 var(--display); letter-spacing: -0.02em; margin: 0 0 8px; }
article.doc .data { color: var(--muted); margin: 0 0 32px; font-size: 15px; }
article.doc h2 { font: 600 20px/1.3 var(--sans); margin: 36px 0 8px; }
article.doc p, article.doc li { color: #24443B; }
article.doc ul, article.doc ol { padding-left: 22px; }
article.doc li { margin-bottom: 6px; }
article.doc .caixa { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; }

footer.site { border-top: 1px solid var(--line); }
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 24px; font-size: 14px; color: var(--muted); }
footer.site nav { display: flex; flex-wrap: wrap; gap: 16px; }
footer.site a { color: var(--muted); }