/* =================================================
   HERO
================================================= */

.contato-hero{
  padding:80px 0;
  text-align:center;
  background:var(--azul-primario);
}

.subtitulo-contato{
  color:#fff;
  max-width:700px;
  margin:15px auto 0;
}

/* =================================================
   BLOCOS
================================================= */

.contato-bloco{
  padding:80px 0;
}

/* TÍTULOS CONFORME FUNDO */

.azul .titulo-secao{
  color:#ffffff;
}

.branco .titulo-secao{
  color:var(--azul-primario);
}

/* =================================================
   GRID CONTATO
================================================= */

.grid-contato{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  margin-top:40px;
  margin-bottom:10px;
}

/* =================================================
   CARD CONTATO
================================================= */

.card-contato{
  display:block;
  background:#fff;
  padding:30px;
  text-align:center;
  border-radius:var(--radius);
  box-shadow:var(--sombra);
  text-decoration:none;
  color:inherit;

  transition:0.35s cubic-bezier(0.22,1,0.36,1);
}

.card-contato:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 45px rgba(0,0,0,0.15);
}

.card-contato h3{
  color:var(--azul-primario);
  margin-bottom:10px;
}

.card-contato p{
  color:var(--cinza-medio);
}

/* =================================================
   CARD MAPA
================================================= */

.card-mapa{
  background:#fff;
  padding:30px;
  border-radius:var(--radius);
  box-shadow:var(--sombra);
}

.mapa-endereco iframe{
  width:100%;
  height:320px;
  border:0;
  border-radius:var(--radius);
}

/* =================================================
   BOTÕES
================================================= */

.btn-contato{
  background:#25d366;
  color:#fff;
  padding:14px 28px;
  border-radius:var(--radius);
  border:none;
  cursor:pointer;
  transition:0.3s;
}

.btn-contato:hover{
  transform:scale(1.05);
}

.btn-contato-whatsapp{
  display:inline-block;
  background:#25d366;
  color:#fff;
  padding:14px 28px;
  border-radius:var(--radius);
  border:none;
  cursor:pointer;
  transition:0.3s;
}

.btn-contato-whatsapp:hover{
  transform:scale(1.05);
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.btn-como-chegar{
  margin-top:15px;
  width:100%;
  background:var(--azul-primario);
  color:#fff;
  border:none;
  padding:12px;
  border-radius:var(--radius);
  cursor:pointer;
}

/* =================================================
   CTA
================================================= */

.cta-contato{
  text-align:center;
  margin-top:60px;
}

/* =================================================
   RESPONSIVO
================================================= */

@media(max-width:992px){

  .grid-contato{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:768px){

  .grid-contato{
    grid-template-columns:1fr;
  }

}