/* ============================================================
   COBERTURA
============================================================ */

.cobertura {
    padding: 120px 0;
    background: #ffffff;
}


/* ============================================================
   CONTENIDO
============================================================ */

.cobertura-contenido {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    margin-top: 70px;
    align-items: center;
}


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

.mapa-svg {
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient( circle at 50% 45%, rgba(24, 166, 171, 0.045), transparent 58% ), #fafbfc;
    border: 1px solid rgba(16, 41, 90, 0.08);
    border-radius: 24px;
    overflow: hidden;
}

    .mapa-svg img {
        display: block;
        width: 86%;
        max-width: 420px;
        height: auto;
        object-fit: contain;
    }


/* ============================================================
   LISTADO
============================================================ */

.cobertura-listado h3 {
    margin-bottom: 24px;
    font-size: 2rem;
    color: var(--color-azul-institucional);
}

.cobertura-listado p {
    font-size: 1.08rem;
    line-height: 1.9;
}


/* ============================================================
   ACCIÓN
============================================================ */

.cobertura-acciones {
    margin-top: 35px;
}

.cobertura-acciones .boton-secundario {
        display: inline-flex;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1050px) {

    .cobertura-contenido {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .mapa-svg {
        min-height: 460px;
    }

        .mapa-svg img {
            width: 78%;
            max-width: 390px;
        }
}

@media (max-width: 700px) {

    .mapa-svg {
        min-height: 390px;
        padding: 18px;
    }

        .mapa-svg img {
            width: 88%;
            max-width: 330px;
        }
}