* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: #eff3f8;
  color: #333;
  font: 14px/1.43 "Open Sans", Arial, sans-serif;
}

[hidden] { display: none !important; }

.caixa {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

.topo { background: #fff; border-bottom: 1px solid #4a5360; }
.topo .caixa { display: flex; align-items: center; height: 90px; }
.marca { color: #4a66ac; font-size: 26px; font-weight: 600; }

.titulo-pagina { background: #fff; }
.titulo-pagina h1 {
  margin: 0;
  padding: 19px 0;
  color: #697882;
  font-size: 22px;
  font-weight: 400;
  min-height: 97px;
  display: flex;
  align-items: center;
}

.conteudo { flex: 1; padding: 15px 0 60px; }

.trilha {
  display: flex;
  margin: 0;
  padding: 0 0 15px;
  list-style: none;
  color: #a7b2c0;
  font-size: 13px;
}
.trilha li:first-child { color: #337ab7; }
.trilha li + li::before { content: "•"; margin: 0 6px; font-size: 8px; vertical-align: 1px; }

.aviso {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  background: #dff0d8;
  color: #3c763d;
}
.aviso.negativo { border-color: #ebccd1; background: #f2dede; color: #a94442; }
.aviso h4 { margin: 0 0 5px; font-size: 18px; font-weight: 700; }
.aviso p { margin: 0; }

.cartoes {
  display: grid;
  grid-template-columns: 300px 1fr 1fr;
  gap: 20px 30px;
}
.cartoes .perfil { margin-right: -10px; }

.cartao {
  min-height: 400px;
  padding: 12px 20px 15px;
  border-radius: 4px;
  background: #fff;
}
.cartao h2 {
  margin: 0 0 30px;
  padding: 10px 0 16px;
  border-bottom: 1px solid #eef1f5;
  color: #578ebe;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
}

.perfil { padding-top: 30px; text-align: center; }
.foto {
  display: block;
  width: 50%;
  height: auto;
  margin: 0 auto;
  border: 3px solid grey;
  border-radius: 50%;
}
.perfil-nome { margin: 20px 0 7px; color: #5a7391; font-size: 20px; font-weight: 600; }
.perfil-linha { margin-bottom: 7px; color: #5b9bd1; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.selo {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 15px;
  border-radius: 25px;
  background: #32c5d2;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.selo.inativo { background: #e7505a; }

dl {
  display: grid;
  grid-template-columns: 25% 1fr;
  gap: 15px 15px;
  margin: 0;
}
dt { text-align: right; }
dd { margin: 0; }

.logo-instituicao { padding-bottom: 20px; text-align: center; }
.logo-instituicao img { height: 100px; }

.sobre { padding: 30px 0; background: #48525e; color: #a2abb7; }
.sobre h2 { margin: 0 0 12px; color: #fff; font-size: 18px; font-weight: 400; }
.sobre p { margin: 0; }
.sobre strong { color: #cfd5dd; }
.rodape { padding: 17px 0; background: #3b434c; color: #a2abb7; font-size: 13px; }

@media (max-width: 991px) {
  .cartoes { grid-template-columns: 1fr; }
  .cartoes .perfil { margin-right: 0; }
  .cartao { min-height: 0; }
  .perfil { padding-bottom: 25px; }
  .titulo-pagina { background: transparent; }
  .titulo-pagina h1 { min-height: 0; }
  .topo { border-bottom: 0; }
  dl { grid-template-columns: 1fr; gap: 6px; }
  dt { text-align: left; }
  dd { margin-bottom: 12px; }
}