:root {
  --tinta: #14181c;
  --tinta-fraca: #5a6570;
  --fio: #d8dee4;
  --fundo: #ffffff;
  --fundo-fio: #f6f8f9;
  --acento: #2d4a63;
  --largura: 44rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font: 400 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.wrap { max-width: var(--largura); margin: 0 auto; padding: 0 1.25rem; }
header.cabeca { border-bottom: 1px solid var(--fio); }
header.cabeca .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.marca { display: flex; align-items: center; gap: .6rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; color: var(--tinta); }
.marca svg { display: block; }
nav a { color: var(--tinta-fraca); text-decoration: none; margin-left: 1.1rem; font-size: .9375rem; }
nav a:hover { color: var(--acento); text-decoration: underline; }
main { padding: 2.75rem 0 3.5rem; }
h1 { font-size: 1.75rem; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 .75rem; text-wrap: balance; }
h2 { font-size: 1.0625rem; letter-spacing: -.01em; margin: 2.5rem 0 .5rem; }
h3 { font-size: .9375rem; margin: 1.5rem 0 .35rem; }
p { margin: 0 0 1rem; max-width: 38rem; text-wrap: pretty; }
ul { margin: 0 0 1rem; padding-left: 1.1rem; }
li { margin-bottom: .3rem; }
a { color: var(--acento); }
.lead { font-size: 1.0625rem; color: var(--tinta-fraca); }
.fio { border: 0; border-top: 1px solid var(--fio); margin: 2rem 0; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0 0; font-size: .9375rem; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--fio); vertical-align: top; }
th { font-weight: 600; color: var(--tinta-fraca); font-size: .875rem; text-transform: uppercase; letter-spacing: .04em; }
td.preco { white-space: nowrap; font-variant-numeric: tabular-nums; }
.botao {
  display: inline-block; background: var(--acento); color: #fff; text-decoration: none;
  padding: .55rem 1rem; border-radius: 2px; font-size: .9375rem; border: 1px solid var(--acento);
}
.botao:hover { background: #24394c; }
.botao.secundario { background: transparent; color: var(--acento); }
form { margin-top: 1.25rem; max-width: 30rem; }
label { display: block; font-size: .875rem; margin: .9rem 0 .25rem; }
input, textarea { width: 100%; padding: .5rem .6rem; border: 1px solid var(--fio); border-radius: 2px; font: inherit; background: #fff; }
input:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.nota { font-size: .8125rem; color: var(--tinta-fraca); }
footer.pe { border-top: 1px solid var(--fio); margin-top: 3rem; padding: 1.5rem 0 2.5rem; font-size: .875rem; color: var(--tinta-fraca); }
footer.pe a { color: var(--tinta-fraca); }
@media (max-width: 34rem) {
  nav a { margin-left: .8rem; font-size: .875rem; }
  h1 { font-size: 1.5rem; }
}