:root {
  --fundo: #fbfaf7;
  --superficie: #ffffff;
  --texto: #1b1d22;
  --suave: #5b6070;
  --linha: #e6e3dc;
  --destaque: #1f6f5c;
  --destaque-fundo: #e7f2ee;
  --pendente: #b4232a;
  --largura: 72rem;
  --texto-largura: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #121417;
    --superficie: #1a1d21;
    --texto: #ebeae6;
    --suave: #a3a7b1;
    --linha: #2b2f36;
    --destaque: #6cc3a8;
    --destaque-fundo: #1b2c27;
    --pendente: #ff8a8f;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 1.0625rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--destaque); text-underline-offset: 0.18em; }

.envoltorio { max-width: var(--largura); margin: 0 auto; padding: 0 1.25rem; }

/* Topo */
.topo { border-bottom: 1px solid var(--linha); background: var(--superficie); }
.topo .envoltorio { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; flex-wrap: wrap; }
.marca { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--texto); text-decoration: none; }
.marca span { color: var(--destaque); }
.menu { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: 0.95rem; }
.menu a { color: var(--suave); text-decoration: none; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--texto); }

/* Abertura */
.abertura { padding: 4.5rem 0 3.5rem; }
.abertura h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 1.25rem; max-width: 18em; }
.abertura p { font-size: 1.2rem; color: var(--suave); max-width: var(--texto-largura); margin: 0; }

/* Seções */
.secao { padding: 3rem 0; border-top: 1px solid var(--linha); }
.secao h2 { font-size: 1.6rem; letter-spacing: -0.01em; margin: 0 0 1.5rem; }
.grade { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: 0.75rem; padding: 1.5rem; }
.cartao h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.cartao p { margin: 0; color: var(--suave); }
.passos { counter-reset: passo; list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; max-width: var(--texto-largura); }
.passos li { counter-increment: passo; padding-left: 2.75rem; position: relative; }
.passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 0.1rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--destaque-fundo); color: var(--destaque);
  display: grid; place-items: center; font-weight: 700; font-size: 0.95rem;
}
.compromissos { max-width: var(--texto-largura); padding-left: 1.2rem; margin: 0; }
.compromissos li + li { margin-top: 0.5rem; }

/* Documentos (privacidade, termos, exclusão) */
.documento { max-width: var(--texto-largura); padding: 3.5rem 0 4rem; }
.documento h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.5rem; }
.documento .vigencia { color: var(--suave); margin: 0 0 2.5rem; }
.documento h2 { font-size: 1.3rem; margin: 2.5rem 0 0.75rem; }
.documento h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.documento table { width: 100%; border-collapse: collapse; font-size: 0.97rem; margin: 1rem 0; display: block; overflow-x: auto; }
.documento th, .documento td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--linha); }
.documento th { color: var(--suave); font-weight: 600; }
.aviso { background: var(--destaque-fundo); border-radius: 0.75rem; padding: 1rem 1.25rem; margin: 1.5rem 0; }

/* Valor que ainda falta preencher: aparece em vermelho até ser trocado. */
.pendente { color: var(--pendente); font-weight: 600; }

/* Rodapé */
.rodape { border-top: 1px solid var(--linha); background: var(--superficie); padding: 2.5rem 0; font-size: 0.93rem; color: var(--suave); }
.rodape .envoltorio { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.rodape strong { color: var(--texto); }
.rodape p { margin: 0 0 0.35rem; }
.rodape a { color: var(--suave); }