:root{--tinta:#16202b;--fraca:#566676;--linha:#dbe3ea;--fundo:#f5f7f9;--papel:#ffffff;
  --acento:#1f5f8b;--acento-escuro:#174a6d;--sobre-acento:#ffffff;--ardosia:#22303c;--ouro:#e8c877;--ouro-fundo:#fbf3dc;
  --serifa:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
@media screen and (prefers-color-scheme:dark){
  :root{--tinta:#e6ecf2;--fraca:#9fb0c0;--linha:#2a3642;--fundo:#11181e;--papel:#18212a;
    --acento:#6fb3e0;--acento-escuro:#8cc4ea;--sobre-acento:#0d1720;--ardosia:#0c1116;--ouro:#e8c877;--ouro-fundo:#2e2711}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fundo);color:var(--tinta);font-family:var(--sans);font-size:16px;line-height:1.6}
a{color:var(--acento)}
a:focus-visible,.botao:focus-visible{outline:3px solid var(--ouro);outline-offset:2px}
.largura{max-width:1120px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--serifa);font-weight:600;line-height:1.2;text-wrap:balance;margin:0}
h1{font-size:44px;letter-spacing:-.01em}
h2{font-size:30px;margin-bottom:14px}
h3{font-size:19px;margin-bottom:6px}
p{margin:0}
code{font-family:var(--mono);font-size:.92em}

.topo{background:var(--ardosia);color:#f1f4f7}
.topo .largura{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-block:14px}
.marca{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--serifa);font-size:22px;font-weight:600}
.marca img{display:block;border-radius:6px}
.topo nav{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.topo nav a{color:#d5dee6;text-decoration:none;font-size:15px}
.topo nav a:hover{color:#fff;text-decoration:underline}
.acessos{display:flex;gap:10px}

.botao{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:8px;
  background:var(--acento);color:var(--sobre-acento);text-decoration:none;font-weight:600;font-size:15px;border:2px solid var(--acento)}
.botao:hover{background:var(--acento-escuro);border-color:var(--acento-escuro)}
.botao.secundario{background:transparent;color:inherit;border-color:currentColor}
.topo .botao.secundario{color:#f1f4f7}
.botao.ouro{background:var(--ouro);border-color:var(--ouro);color:#1b2530}
.botao.ouro:hover{background:#f0d693;border-color:#f0d693}

.abertura{background:var(--ardosia);color:#f1f4f7;padding-block:56px 64px}
.abertura .largura{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.sobretitulo{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ouro);margin-bottom:14px}
.abertura h1{color:#fff}
.abertura .lead{font-size:18px;color:#cfd9e2;margin-top:18px;max-width:58ch}
.chamadas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.chamadas .botao.secundario{color:#f1f4f7}

.ficha{background:#fbfaf6;color:#1b2530;border-radius:10px;padding:22px 24px 18px;border-top:6px solid var(--ouro);
  box-shadow:0 18px 40px rgba(0,0,0,.28)}
.ficha-titulo{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#6b5a2a;margin-bottom:10px}
.ficha dl{margin:0;display:grid;gap:0}
.ficha dl div{display:grid;grid-template-columns:1fr auto;gap:12px;padding:9px 0;border-bottom:1px dashed #d9d2bd}
.ficha dl div:last-child{border-bottom:0}
.ficha dt{color:#4a5563;font-size:14.5px}
.ficha dd{margin:0;font-weight:600;font-size:14.5px;text-align:right}

.secao{padding-block:64px}
.secao > .largura > .nota,.nota{color:var(--fraca);font-size:15px;max-width:68ch;margin-bottom:26px}
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grade article{background:var(--papel);border:1px solid var(--linha);border-radius:10px;padding:20px 22px}
.grade article p{color:var(--fraca);font-size:15px}

.faixa{background:var(--papel);border-block:1px solid var(--linha)}
.garantias{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 36px}
.garantias li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:baseline;font-size:15.5px}
.garantias li::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--ouro);transform:translateY(1px)}

.rola{overflow-x:auto;margin:18px 0}
.servidores{border-collapse:collapse;min-width:520px;width:100%;background:var(--papel);border:1px solid var(--linha);border-radius:10px;overflow:hidden}
.servidores th{text-align:left;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fraca);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--linha)}
.servidores td{padding:12px 14px;border-bottom:1px solid var(--linha);font-variant-numeric:tabular-nums}
.servidores tr:last-child td{border-bottom:0}

.contratar .largura{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center}
.contratar p{color:var(--fraca);max-width:60ch}
.contratar .acao{justify-self:end}

.rodape{border-top:1px solid var(--linha);padding-block:26px;color:var(--fraca);font-size:14px}
.rodape .largura{display:flex;gap:12px 28px;flex-wrap:wrap;justify-content:space-between}

.erro{padding-block:96px;text-align:center}
.erro p{color:var(--fraca);margin:14px 0 26px}

@media (max-width:900px){
  .abertura .largura,.contratar .largura{grid-template-columns:1fr}
  .grade{grid-template-columns:1fr 1fr}
  .contratar .acao{justify-self:start}
}
@media (max-width:640px){
  h1{font-size:34px}
  h2{font-size:26px}
  .topo nav{display:none}
  .acessos{margin-left:auto}
  .grade,.garantias{grid-template-columns:1fr}
  .abertura{padding-block:40px 48px}
  .secao{padding-block:48px}
  /* No celular a tabela vira um bloco por linha: rolando de lado, a porta, que
     é o que a pessoa veio buscar, ficava fora da tela. */
  .servidores{min-width:0}
  .servidores thead{display:none}
  .servidores,.servidores tbody,.servidores tr,.servidores td{display:block;width:100%}
  .servidores tr{padding:12px 14px;border-bottom:1px solid var(--linha)}
  .servidores td{padding:2px 0;border:0}
  .servidores td:first-child{font-weight:600;margin-bottom:4px}
  .servidores td[data-rotulo]::before{content:attr(data-rotulo) ": ";color:var(--fraca)}
}
/* O navegador não imprime fundo: o topo e a abertura, claros sobre ardósia na
   tela, sairiam claros sobre o branco do papel (armadilha 64). */
@media print{
  .topo,.abertura,.faixa{background:none;color:#16202b}
  .marca,.abertura h1{color:#16202b}
  .abertura .lead,.topo nav a{color:#333}
  .acessos,.chamadas,.topo nav{display:none}
  .ficha{box-shadow:none;border:1px solid #bbb}
}