/* =========================================================
   Escolha fácil — cabeçalho e rodapé comuns
   Usado nas páginas que têm estilo próprio (Estados e Gerador),
   para ficarem iguais à página inicial (assets/style.css).
   Tudo com prefixo "ef-" para não misturar com o estilo da página.
   ========================================================= */

@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }

.ef-topo, .ef-rodape {
  --ef-papel: #FFFFFF; --ef-tinta: #121014; --ef-tinta-2: #3F3A46; --ef-linha: #E3DEEA;
  --ef-acento: #5B21B6; --ef-acento-suave: #F4EFFC; --ef-amarelo: #FFD400;
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
}
.ef-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
@media (max-width: 480px) { .ef-wrap { padding: 0 16px; } }

/* ---------- Topo ---------- */
.ef-topo { background: var(--ef-papel); border-bottom: 1px solid var(--ef-linha); }
.ef-topo__in { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; justify-content: space-between; min-height: 72px; padding-top: 10px; padding-bottom: 10px; }
.ef-marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; color: var(--ef-tinta); text-decoration: none; min-height: 44px; }
.ef-marca__check { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ef-amarelo); color: var(--ef-tinta); }
.ef-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ef-menu a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  font-size: 18px; font-weight: 700; text-decoration: none; color: var(--ef-tinta); border: 2px solid transparent;
}
.ef-menu a:hover { background: var(--ef-acento-suave); }
.ef-menu a[aria-current="page"] { background: var(--ef-acento); color: #fff; }
@media (max-width: 480px) { .ef-topo__in { padding-bottom: 8px; } .ef-menu a { padding: 0 12px; font-size: 17px; } }

/* ---------- Rodapé ---------- */
.ef-rodape { background: var(--ef-papel); border-top: 2px solid var(--ef-tinta); color: var(--ef-tinta-2); margin: 0; padding: 56px 0 64px; font-size: 16px; }
.ef-rodape__in { display: grid; gap: 32px; }
@media (min-width: 760px) { .ef-rodape__in { grid-template-columns: 1.4fr 1fr 1fr; } }
.ef-rodape .ef-marca { margin-bottom: 12px; }
.ef-rodape p { margin: 0 0 10px; max-width: 32rem; }
.ef-rodape a { color: var(--ef-acento); }
.ef-rodape .ef-marca { color: var(--ef-tinta); text-decoration: none; }
.ef-rodape__tit { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--ef-tinta-2); margin: 0 0 12px; }
.ef-rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ef-rodape li a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 700; }
.ef-rodape__base { border-top: 1px solid var(--ef-linha); margin-top: 40px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 15px; }
.ef-rodape__base p { margin: 0; }
.ef-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }