/* ===========================================================================
   FALE CONOSCO: CARTÕES DE CONTATO, CAIXA DO FORMULÁRIO E O MAPA.
   =========================================================================== */

/* ---- CARTÕES: UM TERÇO CADA A PARTIR DE 992px, ALINHADOS À ESQUERDA ------------ */

.contato-cartoes {
    margin-bottom: 90px;
}

.contato-cartoes__coluna {
    flex: 0 0 auto;
    width: 100%;
    padding: 0 15px;
}

@media (min-width: 992px) {
    .contato-cartoes__coluna { width: 33.33333333%; }
}

.contato-cartao {
    margin-bottom: 30px;
    padding: 50px 30px 25px;
    border: 2px solid #ededed;
    text-align: center;
}

.contato-cartao__icone {
    margin-bottom: 35px;
    line-height: 1;
}

.contato-cartao__icone img {
    max-width: 80px;
}

.contato-cartao__titulo {
    font-size: 24px;
}

@media (max-width: 1199px) { .contato-cartao__titulo { font-size: 22px; } }
@media (max-width: 991px)  { .contato-cartao__titulo { font-size: 20px; } }
@media (max-width: 767px)  { .contato-cartao__titulo { font-size: 18px; } }

/* ---- FORMULÁRIO -----------------------------------------------------------------
   A CAIXA (.form-caixa) ENTRA 100px NO MAPA (MARGEM NEGATIVA + z-index). */

.contato-form {
    margin-bottom: -100px;
}

/* PROPOSTA: A CAIXA NÃO ENTRA NO MAPA (NÃO HÁ MAPA); OS CARTÕES VÊM 120px ABAIXO. */
.contato-form--solto {
    margin-bottom: 120px;
}

/* A CAIXA BRANCA É O .form-caixa DE formulario.css; AQUI SÓ A SOBREPOSIÇÃO AO MAPA. */
.contato-form .form-caixa {
    position: relative;
    z-index: 1;
}

/* ---- MAPA ----------------------------------------------------------------------- */

.contato-mapa {
    height: 800px;
}

.contato-mapa iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}