/* Site institucional da Prestadora de Serviços Araujo e Gomes.
   Estático, sem biblioteca e sem fonte externa: abre em qualquer hospedagem
   grátis (Cloudflare Pages, GitHub Pages) e não chama nenhum outro site. */
:root {
  --fundo: #f6f7f9;
  --papel: #ffffff;
  --tinta: #1f2933;
  --suave: #52606d;
  --fraca: #7b8794;
  --linha: #e4e7eb;
  --marca: #1f4e79;
  --marca-clara: #e8f0f8;
  --raio: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #14181d;
    --papel: #1c2229;
    --tinta: #eef1f4;
    --suave: #c3cad2;
    --fraca: #9aa5b1;
    --linha: #2c343d;
    --marca: #7fb0e0;
    --marca-clara: #22303d;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
a { color: var(--marca); }
.wrap { max-width: 920px; margin: 0 auto; padding: 0 16px; }

/* ---------- topo ---------- */
.topo { background: var(--papel); border-bottom: 1px solid var(--linha); }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); }
.marca svg { width: 40px; height: 40px; flex: none; }
.marca b { display: block; font-size: 15px; line-height: 1.25; letter-spacing: .01em; color: var(--tinta); }
.marca > span > span { display: block; font-size: 12px; color: var(--fraca); }
nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
nav a { text-decoration: none; color: var(--suave); }
nav a:hover, nav a[aria-current] { color: var(--marca); }

/* ---------- conteúdo ---------- */
main.wrap { padding-top: 34px; padding-bottom: 56px; }
.abertura h1 { margin: 0 0 10px; font-size: clamp(26px, 5vw, 36px); line-height: 1.2; letter-spacing: -.01em; }
.abertura p { margin: 0; font-size: 17px; color: var(--suave); max-width: 62ch; }
section { margin-top: 34px; }
h2 { margin: 0 0 12px; font-size: 21px; letter-spacing: -.005em; }
h3 { margin: 22px 0 6px; font-size: 16.5px; }
p, li { color: var(--suave); }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px 22px; }
.cartao h3 { margin-top: 0; color: var(--tinta); }
.cartao p { margin: 0; }
.dados { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 6px 22px; }
.dados dl { margin: 0; display: grid; grid-template-columns: minmax(130px, 200px) 1fr; }
.dados dt, .dados dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.dados dt { font-size: 13px; font-weight: 600; color: var(--fraca); text-transform: uppercase; letter-spacing: .05em; padding-right: 14px; }
.dados dd { color: var(--tinta); }
.dados dl > :nth-last-child(-n+2) { border-bottom: 0; }
.texto { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 8px 26px 22px; }
.texto ul { padding-left: 20px; }
.data { font-size: 14px; color: var(--fraca); }
.idioma { display: inline-block; font-size: 13px; margin-top: 10px; }
.passos { counter-reset: passo; list-style: none; padding: 0; }
.passos li { counter-increment: passo; position: relative; padding-left: 40px; margin: 12px 0; }
.passos li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--marca-clara); color: var(--marca); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }

/* Campo que o Jackson ainda precisa preencher antes de publicar (o LEIA-ME
   lista todos). Amarelo de propósito: não dá para esquecer na revisão. */
.preencher { background: #fff3b0; color: #5c4400; border-radius: 4px; padding: 0 4px; font-weight: 600; }

/* ---------- rodapé ---------- */
footer { border-top: 1px solid var(--linha); background: var(--papel); padding: 22px 0 30px; font-size: 13.5px; color: var(--fraca); }
footer p { margin: 4px 0; color: var(--fraca); }
footer a { color: var(--fraca); }

@media (max-width: 560px) {
  .dados dl { grid-template-columns: 1fr; }
  .dados dt { padding-bottom: 0; border-bottom: 0; }
  .texto { padding: 6px 18px 18px; }
}