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

.mapa-hero {

    padding: 100px 0;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    color: white;

}

.mapa-hero h1 {

    color: white;

    margin-bottom: 20px;

}

.mapa-hero p {

    max-width: 750px;

    margin: auto;

    color: rgba(255,255,255,.9);

}
.mapa-hero .section-tag {

    background: rgba(255,255,255,.15);

    color: white;
}

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

.mapa-section {

    padding: 80px 0;

}

.mapa-wrapper {

    overflow: hidden;

    border-radius: 24px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.12);

}

.mapa-wrapper iframe {

    width: 100%;

    height: 700px;

    border: none;

}

/* ==================================================
   LINKS
================================================== */

.mapa-links {

    padding-bottom: 100px;

}

.mapa-links h2 {

    text-align: center;

    margin-bottom: 40px;

}

.predios-links {

    display: grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap: 20px;

}

.predio-link {

    background: white;

    color: var(--color-primary);
    padding: 22px;

    border-radius: 16px;

    text-align: center;

    font-weight: 600;

    box-shadow:
        0 5px 20px rgba(0,0,0,.06);

    transition: .3s;

}

.predio-link:hover {

    transform: translateY(-5px);

}
/* ==================================================
   BOTÃO MAPA
================================================== */

.mapa-acoes {

    text-align: center;

    margin-top: 30px;

}

.btn-mapa {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 24px;

    background: var(--color-secondary);

    color: white;

    border-radius: 12px;

    font-weight: 600;

    text-decoration: none;

    transition: .3s ease;

}

.btn-mapa:hover {

    background: var(--color-primary);

    transform: translateY(-2px);

}