/* ══════════════════════════════════════════════════════════════════
 *  ResolveSoft — base e componentes
 *
 *  Regra 1 do handoff: nenhum hex, px de tipografia ou peso escrito
 *  à mão. Tudo aqui sai de var(--token), definido em tokens.css, que
 *  por sua vez é gerado de design/resolvesoft-tokens.json.
 *
 *  Regras 2 e 3 (par de cor por modo) são estruturais: use sempre os
 *  nomes neutros — var(--acento), var(--borda), var(--aviso) — e o
 *  valor certo para o fundo vem sozinho. Nunca escreva
 *  var(--cor-resolvido) ou var(--cor-resolvido-escuro) direto.
 * ══════════════════════════════════════════════════════════════════ */

/* ── Fontes (auto-hospedadas, sem CDN — regra 7) ─────────────────── */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fontes/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fontes/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fontes/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fontes/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fontes/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ── Reinício ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-corpo-px);
  line-height: var(--texto-corpo-linha);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--acento); text-underline-offset: 3px; }

::selection { background: var(--acento); color: var(--sobre-acento); }

.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Layout ──────────────────────────────────────────────────────── */
.faixa { padding-inline: var(--espaco-8); }

@media (max-width: 900px) {
  .faixa { padding-inline: var(--espaco-5); }
}

.limite { max-width: 1240px; margin-inline: auto; }

.secao {
  padding-block: 68px;
  border-bottom: 1px solid var(--borda);
}

@media (max-width: 640px) {
  .secao { padding-block: var(--espaco-7); }
}

.pilha { display: flex; flex-direction: column; }
.pilha-2 { gap: var(--espaco-2); }
.pilha-3 { gap: var(--espaco-3); }
.pilha-4 { gap: var(--espaco-4); }
.pilha-5 { gap: var(--espaco-5); }
.pilha-6 { gap: var(--espaco-6); }
.pilha-7 { gap: var(--espaco-7); }

.grade { display: grid; gap: var(--gutter); }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .grade-3, .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grade-2, .grade-3, .grade-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ── Cor de texto ────────────────────────────────────────────────── */
.suave { color: var(--texto-suave); }
.acento { color: var(--acento); }

/* ── Rótulo de seção (único uso permitido da peça como marcador) ─── */
.rotulo-secao { display: flex; align-items: center; gap: var(--espaco-3); }

/* ── Botões ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: var(--toque-minimo);          /* alvo de toque */
  padding: 15px var(--espaco-5);
  border-radius: var(--raio-controle);
  font-size: var(--texto-corpo-px);
  font-weight: var(--texto-subtitulo-peso);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn-principal {
  background: var(--acento);
  color: var(--sobre-acento);
  border: 1px solid var(--acento);
}
.btn-principal:hover { background: var(--cor-tinta-media); border-color: var(--cor-tinta-media); color: var(--cor-texto-escuro); }
.modo-escuro .btn-principal:hover { background: var(--cor-resolvido-claro); border-color: var(--cor-resolvido-claro); color: var(--cor-tinta); }

.btn-secundario {
  border: 1px solid var(--borda-forte);
  color: var(--texto);
  padding: 14px 23px;
}
.btn-secundario:hover { border-color: var(--acento); color: var(--acento); }

/* Link de ação dentro de card */
.link-acao {
  align-self: flex-start;
  color: var(--acento);
  font-weight: var(--texto-subtitulo-peso);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: var(--toque-minimo);
  display: inline-flex;
  align-items: center;
}

/* ── Cartão ──────────────────────────────────────────────────────── */
.cartao {
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  padding: 30px 32px;
  background: transparent;
}

/* No claro a elevação vem de sombra; no escuro, de borda (regra do token). */
.cartao-cheio { background: var(--superficie); box-shadow: var(--sombra-repouso); }
.modo-escuro .cartao-cheio { box-shadow: none; }

.cartao-destaque { background: var(--destaque); border-color: var(--destaque); }
.modo-escuro .cartao-destaque { border-color: var(--borda); }

@media (max-width: 640px) {
  .cartao { padding: var(--espaco-5); }
}

/* ── Campos ──────────────────────────────────────────────────────── */
.campo-grupo { display: flex; flex-direction: column; gap: 7px; }

.campo-rotulo { font-size: var(--texto-apoio-px); color: var(--texto-suave); }

.campo {
  width: 100%;
  min-height: var(--toque-minimo);
  padding: 15px var(--espaco-4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-controle);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-corpo-px);
  line-height: var(--texto-corpo-linha);
  transition: border-color .18s ease;
}
.modo-escuro .campo { background: transparent; }

.campo::placeholder { color: var(--texto-suave); opacity: 1; }
.campo:hover { border-color: var(--texto-suave); }

/* Foco do campo: anel de 2px com 2px de folga, conforme a Fase 2. */
.campo:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 var(--foco-folga) var(--fundo), 0 0 0 4px var(--acento);
}
.campo[aria-invalid="true"] { border-color: var(--erro); }

select.campo {
  appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
select.campo option { background: var(--superficie); color: var(--texto); }

.campo-erro {
  display: none;
  color: var(--erro);
  font-size: var(--texto-apoio-px);
  line-height: var(--texto-apoio-linha);
}
.campo-erro.visivel { display: block; }
/* A cor de erro reprova em contraste sobre Noite; no escuro o aviso assume. */
.modo-escuro .campo-erro { color: var(--aviso); }

/* ── Ícones (Lucide, traço 2, nunca sólido nem colorido) ─────────── */
.icone {
  width: 24px; height: 24px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icone-20 { width: 20px; height: 20px; }
.icone-16 { width: 16px; height: 16px; }

/* ── Movimento ───────────────────────────────────────────────────── */
.surge { opacity: 0; transform: translateY(16px); }
.surge.dentro {
  opacity: 1;
  transform: none;
  transition: opacity .32s ease, transform .32s cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .surge { opacity: 1 !important; transform: none !important; }
}

/* ── Impressão (a /institucional é página de consulta) ───────────── */
@media print {
  .nao-imprime { display: none !important; }
  /* No papel, o modo claro: superfície e texto saem dos tokens. */
  body { background: var(--cor-superficie); color: var(--cor-texto); }
}