/* ============================================================
   BRAVEX, PÁGINAS DE SUPORTE
   Layout compartilhado por política de privacidade, termos de uso,
   preferências de cookies e páginas de erro.

   As landing pages têm CSS embutido, porque cada uma é uma variante do teste
   e precisa ser autocontida. As páginas de suporte são um conjunto com um
   layout só, então compartilham esta folha em vez de repetir o mesmo bloco
   cinco vezes.

   Nenhum valor de cor, tipo ou espaço fora de bravex-tokens.css.
   ============================================================ */

/* ---------- FONTES, arquivos locais em /fonts/, sem CDN ---------- */
@font-face { font-family:"Switzer"; src:url("fonts/Switzer-Medium.woff2") format("woff2");   font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Switzer"; src:url("fonts/Switzer-Semibold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Switzer"; src:url("fonts/Switzer-Bold.woff2") format("woff2");     font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter";   src:url("fonts/Inter-Regular.woff2") format("woff2");    font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter";   src:url("fonts/Inter-Medium.woff2") format("woff2");     font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter";   src:url("fonts/Inter-SemiBold.woff2") format("woff2");   font-weight:600; font-style:normal; font-display:swap; }

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; display: flex; flex-direction: column; min-height: 100svh; }
main { flex: 1; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:target { scroll-margin-top: var(--space-16); }
::selection { background: var(--accent); color: var(--text-display); }
.btn { text-decoration: none; }

.container {
  max-width: calc(var(--container) + var(--margin-desktop) * 2);
  margin-inline: auto;
  padding-inline: var(--margin-desktop);
}
.num { font-variant-numeric: tabular-nums; }
.measure { max-width: var(--measure); }

.icon { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }

/* ---------- CABEÇALHO ---------- */
.top { background: var(--surface); border-bottom: 1px solid var(--hairline); }
.top .container { height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.top-brand img { height: 24px; width: auto; }
.top-back { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--size-body); color: var(--text-secondary); text-decoration: none; }
.top-back:hover { color: var(--text-primary); }
.top a:focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: var(--focus-offset); }

/* ---------- ABERTURA DO DOCUMENTO ---------- */
.doc-hero { background: var(--surface-deep); padding-block: var(--space-16); }
.doc-hero .eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.doc-hero .rule { flex: none; width: var(--space-8); height: 2px; background: var(--accent); }
.doc-hero h1 { max-width: 20ch; margin-bottom: var(--space-8); }
.doc-hero .updated { max-width: var(--measure); padding-top: var(--space-6); border-top: 1px solid var(--hairline); }

/* ---------- CORPO DO DOCUMENTO ----------
   Superfície clara: leitura densa, uma das exceções previstas na ID. */
.doc { padding-block: var(--space-16); }
.doc .container { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-16); align-items: start; }

.toc { position: sticky; top: var(--space-8); }
.toc .label { display: block; margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-invert); }
.toc li + li { margin-top: var(--space-3); }
.toc a { font-size: var(--size-body); color: var(--text-secondary-invert); text-decoration: none; display: block; }
.toc a:hover { color: var(--text-primary-invert); }
.toc a:focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: var(--focus-offset); }

.doc-body { max-width: var(--measure); }
.doc-body > section + section { margin-top: var(--space-16); }
.doc-body h2 { margin-bottom: var(--space-6); }
.doc-body h3 { margin: var(--space-8) 0 var(--space-3); }
.doc-body p { margin-bottom: var(--space-4); }
.doc-body p:last-child { margin-bottom: 0; }
.doc-body a { color: var(--text-primary-invert); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--space-1); }
.doc-body a:focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: var(--focus-offset); }

/* Lista com marcador de traço, como nas landing pages. */
.doc-list li { display: flex; gap: var(--space-4); margin-bottom: var(--space-4); }
.doc-list li::before { content: ""; flex: none; width: var(--space-4); height: 1px; background: var(--border-invert); margin-top: 14px; }

/* Lista numerada, para direitos e etapas. */
.doc-ol { counter-reset: item; }
.doc-ol li { counter-increment: item; position: relative; padding-left: var(--space-8); margin-bottom: var(--space-4); }
.doc-ol li::before { content: counter(item); position: absolute; left: 0; font-variant-numeric: tabular-nums; color: var(--text-secondary-invert); }

.doc table { margin-top: var(--space-6); }
.doc-body table th[scope="row"] {
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-body-md);
  letter-spacing: var(--tracking-body);
  text-transform: none;
  color: var(--text-primary-invert);
  padding-bottom: 0;
  vertical-align: top;
  padding-top: var(--space-4);
  width: 38%;
}
.doc-body td { font-size: var(--size-body); color: var(--text-secondary-invert); vertical-align: top; padding: var(--space-4) 0 var(--space-4) var(--space-6); height: auto; }
.invert tbody tr:nth-child(even) { background: transparent; }

/* Bloco de destaque para contato do encarregado. */
.doc-callout { background: var(--surface-invert-raised); border-radius: var(--radius); padding: var(--space-8); margin-top: var(--space-8); }
.doc-callout .label { display: block; margin-bottom: var(--space-3); }
.doc-callout p { margin-bottom: var(--space-2); }

/* ---------- PREFERÊNCIAS DE COOKIES ---------- */
.pref { border-top: 1px solid var(--border-invert); padding-block: var(--space-8); }
.pref:last-of-type { border-bottom: 1px solid var(--border-invert); }
.pref-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); }
.pref-head h3 { margin: 0 0 var(--space-3); }
.pref p { color: var(--text-secondary-invert); margin-bottom: 0; }

/* Chave de dois estados. Raio 4px, porque a ID proíbe raio grande. */
.switch { flex: none; display: inline-flex; align-items: center; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 48px; height: 28px;
  border-radius: var(--radius);
  background: var(--surface-invert);
  border: 1px solid var(--border-invert);
  position: relative;
  cursor: pointer;
  transition: background var(--duration) var(--easing), border-color var(--duration) var(--easing);
}
.switch .track::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: var(--radius);
  background: var(--text-secondary-invert);
  transition: transform var(--duration) var(--easing), background var(--duration) var(--easing);
}
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track::after { transform: translateX(20px); background: var(--surface-invert-raised); }
.switch input:disabled + .track { cursor: default; opacity: 0.6; }
.switch input:focus-visible + .track { outline: var(--focus-ring) solid var(--accent); outline-offset: var(--focus-offset); }
.pref-locked { flex: none; white-space: nowrap; font-size: var(--size-micro); color: var(--text-secondary-invert); text-transform: uppercase; letter-spacing: 0.06em; }

.pref-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); }
.pref-actions .btn { width: auto; }
.pref-saved { display: none; margin-top: var(--space-8); padding: var(--space-6); background: var(--surface-invert-raised); border-radius: var(--radius); border-top: 2px solid var(--success-invert); }
.pref-saved[data-active] { display: block; }

/* ---------- PÁGINAS DE ERRO ----------
   Erro não pede desculpa e não é vago sobre o que falhou. */
.error { display: flex; align-items: center; padding-block: var(--space-32); }
.error .container { width: 100%; }
.error .code { display: block; color: var(--text-secondary); margin-bottom: var(--space-8); }
.error h1 { margin-bottom: var(--space-6); }
.error p { max-width: var(--measure); }
.error-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); }
.error-actions .btn { width: auto; }
.error-links { margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--hairline); }
.error-links .label { display: block; margin-bottom: var(--space-4); }
.error-links li + li { margin-top: var(--space-3); }
.error-links a { color: var(--text-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--space-1); }
.error-links a:focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: var(--focus-offset); }

/* ---------- RODAPÉ ---------- */
.footer img { height: 24px; width: auto; margin-bottom: var(--space-8); }
.footer-legal { max-width: var(--measure); }
.footer-legal p + p { margin-top: var(--space-3); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-8); }
.footer-links a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--space-1); }
.footer a:focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: var(--focus-offset); }

/* ---------- RESPONSIVO ---------- */
@media (max-width: 1024px) {
  .container { padding-inline: var(--margin-tablet); }
  .doc .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .toc { position: static; }
  .doc-hero, .doc { padding-block: var(--space-12); }
  .error { padding-block: var(--space-24); }
}

@media (max-width: 640px) {
  .container { padding-inline: var(--margin-mobile); }
  .doc-hero h1 { max-width: none; }
  .error { padding-block: var(--space-16); }
  .error-actions .btn, .pref-actions .btn { width: 100%; }
  .pref-head { flex-direction: column; gap: var(--space-4); }
  /* Tabela de duas colunas vira lista empilhada. */
  .doc-body table, .doc-body tbody, .doc-body tr, .doc-body th, .doc-body td { display: block; width: auto; }
  .doc-body tr { padding-block: var(--space-4); border-bottom: 1px solid var(--border-invert); }
  .doc-body th[scope="row"] { width: auto; border-bottom: 0; padding: 0 0 var(--space-2); }
  .doc-body td { padding: 0; border-bottom: 0; }
}