body {
  margin: auto;
  font: 80%/1.5em Arial, Helvetica, sans-serif;
  text-align: center;
  background-color: #dedede;
  color: #009cdf;
  font-size: 14px;
  font-weight: 700;
}

.header {
  overflow: hidden;
  background-color: #fff;
  padding: 20px 10px;
  border-bottom: 10px groove #233b6c;
  font-size: 0px;
}

.logo {
  width: 50%; /* 200px < 50% < 400px */
  min-width: 200px;
  max-width: 400px;
  color: #0cf; /* para o alt text */
  text-decoration: none;
  text-transform: uppercase;
}

/* DivisÃ³rias esquerda e direita do botÃ£o */
a.button div {
  display: inline-block; /* agrupamento horizontal */
  vertical-align: middle; /* alinha ao centro */
}

a.button .completo {
  text-align: right;
  width: 60%; /* % ocupada pelo lado esquerdo no botÃ£o */
  padding-right: 2%;
}

a.button .sigla {
  text-align: left;
  font-weight: 900;
  width: 25%; /* % ocupada pelo lado direito no botÃ£o */
  padding-left: 2%;
}

#unidades {
  margin-top: 20px;
  width: 100%;
}

a.button {
  text-decoration: none;
  color: initial;
  background-color: transparent;
  border: none;
  margin: auto;
  cursor: pointer;
  width: 95%;
  max-width: 700px;
  display: block; /* agrupamento vertical (uma linha para cada botÃ£o) */
  border: 1px solid transparent; /* escondida para gastar espaÃ§o (hover mostra) */
}

#unidades a.button {
    padding: 10px 0px;
}

#unidades a.button:hover {
  background-color: rgba(0, 156, 223, 0.33); /* 33% opaco */
  border: 1px solid #009cdf;
  border-radius: 4px;
}

#unidades a.button .completo {
  color: #555;
}

#unidades a.button .sigla {
  color: #233b6c;
  border-left: 4px groove #233b6c;
}

#antigas {
  border-radius: 12px;
  border: 2px dotted #808080;
  width: 80%;
  margin: 30px auto; /* centrar */
  padding-bottom: 10px;
}

#antigas * {
  color: gray;
}

#antigas p {
    padding: 0px 20px;
}

#antigas a.button:hover {
  background-color: rgba(0, 156, 223, 0.33); /* 33% opaco */
  border: 1px solid #009cdf;
  border-radius: 4px;
}

#antigas a.button .sigla {
  border-left: 2px solid #808080;
}

/*
  :root {
      --main-color: #009cdf; // utilizada como rgba(0, 156, 223, 0.33) para transparÃªncia
      --secondary-color: #233b6c;
  }
  
Credito: Diogo Ribeiro
Nota: Não utilizei flexbox nem variáveis para evitar possíveis problemas de compatibilidade.
Obrigado ao Tiago Lourenço pela sugestão de bordas e transparência no fundo dos botões.
*/
