/* Páginas avulsas do site almejo.com.br (404, privacidade, termos).
   Mesmas cores e fontes das landings; ver almejo-design/DESIGN.md. */
:root {
  /* cores:inicio. GERADO por almejo-design/sync.js a partir de almejo-design/cores.js. Não edite: mude lá e rode o sync. */
  --night: #060e1e;
  --navy: #081428;
  --panel: #0d1f3c;
  --raised: #142a50;
  --line: rgba(143, 168, 204, 0.16);
  --line-2: rgba(143, 168, 204, 0.28);
  --text: #eaf0fb;
  --soft: #c3d1e8;
  --mute: #8fa8cc;
  --gold: #ffd600;
  --gold-dim: #e6c000;
  --gold-hover: #ffe14d;
  --blue: #4b6ea8;
  --green: #22c55e;
  --red: #ef4444;
  --night-rgb: 6 14 30;
  --gold-rgb: 255 214 0;
  --blue-rgb: 75 110 168;
  --green-rgb: 34 197 94;
  --red-rgb: 239 68 68;
  --mute-rgb: 143 168 204;
  /* cores:fim */
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans:  'Instrument Sans', system-ui, sans-serif;
  --brand: 'Cinzel', Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--text);
  background: var(--night); -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }

header { padding: 22px 0; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-name { font: 600 18px/1 var(--brand); letter-spacing: 0.22em; color: var(--gold); }

main { flex: 1; }
footer { border-top: 1px solid var(--line); background: var(--navy); padding: 32px 0; font-size: 14px; color: var(--mute); }
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
footer a { text-decoration: none; color: var(--soft); }
footer a:hover { color: var(--text); }
footer p { margin: 16px 0 0; }

/* 404 */
.lost { padding: 96px 0 112px; }
.lost h1 { font: 400 clamp(44px, 7vw, 88px)/1.02 var(--serif); letter-spacing: -0.015em; margin: 0 0 20px; max-width: 14ch; text-wrap: balance; }
.lost .lede { font-size: 19px; color: var(--soft); max-width: 46ch; margin: 0 0 56px; }
.ways { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.ways li { border-top: 1px solid var(--line); }
.ways li:last-child { border-bottom: 1px solid var(--line); }
.ways a { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: baseline; padding: 22px 0; text-decoration: none; }
.ways b { font: 400 30px/1.15 var(--serif); }
.ways span { grid-column: 1; font-size: 15px; color: var(--mute); }
.ways i { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-size: 14px; color: var(--gold); white-space: nowrap; }
.ways a:hover b { color: var(--gold); }
.lost .mail { margin: 40px 0 0; font-size: 15px; color: var(--mute); }

/* Páginas legais */
.doc { padding: 64px 0 96px; }
.doc .wrap { max-width: 780px; }
.doc h1 { font: 400 clamp(38px, 5.4vw, 60px)/1.05 var(--serif); letter-spacing: -0.015em; margin: 0 0 24px; }
.doc h2 { font-size: 21px; font-weight: 600; margin: 44px 0 10px; }
.doc h3 { font-size: 17px; font-weight: 600; margin: 28px 0 8px; }
.doc p, .doc li { color: var(--soft); }
.doc strong { color: var(--text); font-weight: 600; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc blockquote { margin: 0 0 28px; padding: 14px 18px; border: 1px solid var(--gold); border-radius: 10px; background: rgb(var(--gold-rgb) / 0.06); }
.doc blockquote p { margin: 0 0 6px; color: var(--text); font-size: 15px; }
.doc blockquote p:last-child { margin: 0; }
.doc .table { overflow-x: auto; margin: 16px 0; }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--soft); }
.doc th { color: var(--mute); font-weight: 500; font-size: 14px; border-bottom-color: var(--line-2); }
.doc code { font-size: 0.92em; color: var(--text); }
.doc .ph { color: var(--gold); }

@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .lost { padding: 64px 0 80px; }
  .ways a { grid-template-columns: 1fr; }
  .ways i { grid-row: auto; grid-column: 1; }
  .ways b { font-size: 26px; }
}