:root{
  --azul:#004A87;
  --azul-escuro:#00335e;
  --cinza-texto:#333333;
  --cinza-claro:#f4f5f6;
  --borda:#333333;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Source Sans Pro', Arial, sans-serif;
  color:var(--cinza-texto);
  background:#ffffff;
}

.topo{
  display:flex;
  flex-direction:column;
}

header{
  background:var(--azul);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.4rem 2rem;
}
header img{
  height:70px;
  display:block;
}

.titulo{
  text-align:center;
  color:#000;
  font-size:1.5rem;
  font-weight:400;
  letter-spacing:0.02em;
  text-transform:uppercase;
  padding:1.1rem 1.5rem 0.3rem;
}
.titulo b{ font-weight:700; }

.hero{
  text-align:center;
  padding:0.9rem 1.5rem 0.2rem;
}
.hero p{
  color:#5a5c5f;
  font-size:14px;
}

.lista{
  max-width:860px;
  margin:2.5rem auto 4rem;
  padding:0 1.5rem;
  display:grid;
  gap:1.4rem;
}

.card{
  border:1px solid #d8dadd;
  border-radius:20px;
  padding:1.3rem 1.5rem;
  display:flex;
  align-items:center;
  gap:1.1rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.icone{
  flex-shrink:0;
  width:52px; height:52px;
  border-radius:50%;
  background:var(--azul);
  display:flex;
  align-items:center;
  justify-content:center;
}
.icone svg{ width:26px; height:26px; stroke:#fff; fill:none; stroke-width:1.8; }

.conteudo{ flex:1; }
.bairro{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--azul);
}
.conteudo h2{
  font-size:1.15rem;
  font-weight:600;
  color:#303133;
  margin-top:2px;
}

.mapa{
  flex-shrink:0;
  background:var(--azul);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  padding:10px 18px;
  border-radius:6px;
  white-space:nowrap;
}
.mapa:hover{ background:var(--azul-escuro); }

footer{
  background:var(--azul);
  color:#fff;
  text-align:center;
  padding:1.6rem 1rem;
  font-size:13px;
}
footer p{ margin:2px 0; opacity:0.9; }

@media (min-width:561px){
  .topo{
    flex-direction:row;
    align-items:center;
    justify-content:center;
    background:var(--azul);
    gap:1rem;
    padding:1rem 2rem;
  }
  header{
    background:transparent;
    padding:0;
  }
  header img{ height:42px; }
  .titulo{
    color:#fff;
    padding:0;
    font-size:clamp(1.1rem, 2.4vw, 1.5rem);
  }
}

@media (max-width:560px){
  .card{ flex-wrap:wrap; }
  .mapa{ width:100%; text-align:center; }
}