/* Estilos das páginas legais (privacidade.html e termos.html).
   Mesmos tokens e fontes do index.html, num layout de documento. */

@font-face { font-family: "Familjen Grotesk"; font-weight: 700; font-display: swap; src: url("fonts/familjen-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  --surface-100: #16181D;
  --ink: #F2F3F5;
  --ink-muted: #A9AFBA;
  --hairline: #2C3038;
  --brand-red: #D62F32;
  --on-red: #FFFFFF;
  --focus-ring: #FF6B6E;

  --font-display: "Familjen Grotesk", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;

  --header-h: 68px;
}

@media (prefers-color-scheme: light) {
  :root {
    --surface-100: #FFFFFF;
    --ink: #1A1C21;
    --ink-muted: #5B616E;
    --hairline: #E1E3E8;
    --focus-ring: #C42A2D;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-100);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
}

a { color: inherit; }
img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--surface-100);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

.container { width: min(720px, 100% - 32px); margin-inline: auto; }

/* Cabeçalho */
.site-header { height: var(--header-h); border-bottom: 1px solid var(--hairline); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: inline-flex; align-items: center; }
.logo img { height: 22px; width: auto; }
.back { font-weight: 600; font-size: .9375rem; }

/* Documento */
.doc { padding-block: 48px 64px; }
.doc h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.875rem, 5vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; }
.doc .updated { margin: 12px 0 0; color: var(--ink-muted); font-size: .9375rem; }
.doc h2 { margin: 40px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.35; }
.doc p, .doc ul { margin: 12px 0 0; }
.doc ul { padding-left: 1.25em; }
.doc li + li { margin-top: 6px; }

/* Marcação visível dos textos a substituir (igual à do index.html) */
.ph {
  background: var(--brand-red);
  color: var(--on-red);
  padding: 0 .25em;
  border-radius: 4px;
  font-weight: 600;
}

/* Rodapé */
.site-footer { padding-block: 32px; border-top: 1px solid var(--hairline); font-size: .875rem; color: var(--ink-muted); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.footer-links { display: flex; gap: 16px; }