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

.coverage-section{

    position: relative;

    padding: 140px 0;

    background: #F7F9FC;

    overflow: hidden;

}

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

.coverage-map{

    position: relative;

    background: #FFF;

    border-radius: 30px;

    padding: 40px;

    min-height: 620px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 20px 60px rgba(15,23,42,.08);

    overflow: hidden;

}

/* Decoración */

.coverage-map::before{

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    border-radius: 50%;

    background: rgba(108,59,255,.05);

    top: -120px;

    right: -100px;

}

.coverage-map::after{

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background: rgba(108,59,255,.04);

    bottom: -80px;

    left: -60px;

}

.map-placeholder{

    width: 100%;

    height: 520px;

    border: 2px dashed #D6DBE6;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #9AA4B2;

    font-size: 28px;

    font-weight: 600;

}

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

.coverage-content{

    padding-left: 50px;

}

.coverage-content h3{

    font-size: 34px;

    margin-bottom: 20px;

    color: var(--primary);

}

.coverage-content p{

    color: var(--gray);

    line-height: 1.9;

    margin-bottom: 35px;

}

/*=========================================
LISTA
=========================================*/

.coverage-list{

    list-style: none;

    padding: 0;

    margin: 0 0 45px;

}

.coverage-list li{

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 18px;

    font-size: 18px;

    color: var(--primary);

    transition: .30s;

}

.coverage-list li:hover{

    transform: translateX(8px);

    color: var(--secondary);

}

.coverage-list i{

    color: var(--secondary);

    font-size: 18px;

}

/*=========================================
ESTADÍSTICAS
=========================================*/

.coverage-stats{

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 20px;

}

.coverage-stat{

    background: #FFF;

    border-radius: 22px;

    padding: 30px 20px;

    text-align: center;

    box-shadow: 0 12px 35px rgba(15,23,42,.06);

    transition: .35s;

}

.coverage-stat:hover{

    transform: translateY(-8px);

    box-shadow: 0 20px 50px rgba(15,23,42,.10);

}

.coverage-stat h2{

    font-size: 42px;

    color: var(--secondary);

    margin-bottom: 8px;

}

.coverage-stat span{

    color: var(--gray);

    font-size: 16px;

}

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

@media(max-width:991px){

    .coverage-section{

        padding:100px 0;

    }

    .coverage-content{

        padding-left:0;

        margin-top:60px;

    }

}

@media(max-width:767px){

    .coverage-section{

        padding:80px 0;

    }

    .coverage-map{

        min-height:420px;

        padding:25px;

    }

    .map-placeholder{

        height:320px;

        font-size:22px;

    }

    .coverage-stats{

        grid-template-columns:1fr;

    }

}

/*
=========================================
ANIMACIONES
=========================================
*/

.coverage-map{

    opacity:0;

    transform:translateY(40px);

    transition:1s ease;

}

.coverage-map.show{

    opacity:1;

    transform:translateY(0);

}

.coverage-stat{

    opacity:0;

    transform:translateY(25px);

}

.coverage-stat.show{

    opacity:1;

    transform:translateY(0);

}

.coverage-list li{

    opacity:0;

    transform:translateX(-20px);

}

.coverage-list li.show{

    opacity:1;

    transform:translateX(0);

}

.coverage-svg{

    width:100%;

    width:100%;

    max-width:850px;

    height:auto;

    display:block;

    margin:auto;

    transition:.5s;

}

.coverage-map{

    position:relative;

}

.map-point{

    position:absolute;

    width:16px;

    height:16px;

    background:var(--secondary);

    border-radius:50%;

    box-shadow:0 0 0 rgba(108,59,255,.5);

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(108,59,255,.45);

    }

    70%{

        box-shadow:0 0 0 18px rgba(108,59,255,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(108,59,255,0);

    }

}

.leon{

    left:52%;

    top:60%;

}

.aguascalientes{

    left:50%;

    top:55%;

}

.guadalajara{

    left:43%;

    top:51%;

}

.cdmx{

    left:59%;

    top:66%;

}

.sonora{
    left: 42%;

    top: 40%;
}