.coming-soon {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(52,193,129,.55);
    color: rgba(52,193,129,.95);
    font-size: .85rem;
    line-height: 1;
    white-space: nowrap;
}

.number-w {
    width:25px;
    display:flex;
    justify-content:end;
}

.text-city{
    width:255px;
    padding-left:3%;

}

.location-text {
    font-size: clamp(24px, 1.55vw, 48px) !important;
}


.country-text {
    font-size: clamp(20px, 0.78vw, 32px) !important;
}

.bg-image {
    width:100%;
    height:100%;
    background: linear-gradient(351deg, transparent 22%, rgba(217, 217, 217, 0) 100%), linear-gradient(to bottom, transparent 7%, rgba(217, 217, 217, 0) 100%), url(../images/mapa.png);
    background-size:contain;
    background-repeat:no-repeat;
    min-height:700px;
}


   ul {
        list-style: none;
    }

    .list-map{
        background:linear-gradient(120deg, var(--off-white) 10%, var(--flo-green) 300%);
        height:auto; 
        padding-right:10px; 
        border-radius:5px; 
        border:1px solid var(--flo-green); 
        max-width:320px;
        padding-left: 10px;
    }

    .toggle {
        cursor: pointer;
        font-weight: bold;
        /* color: red; */
        user-select: none;
    }

    .nested {
        height: 0; 
        overflow: hidden;
        transition: height 0.3s ease;
    }

    .nested-li {
        padding: 2px 0px;
        transition: transform 0.3s ease;
        cursor: default;
        border-bottom:solid;
        border-bottom-color: var(--go-green);
    }

    .nested-li:hover {
        cursor: default;
        border-radius: 3px;
        transform: scale(1.05);
        border-bottom-color: var(--deep-green);
    }

    .map {
        display: block;
    }

    .map.none {
        display: none;
    }

    .map-wrapper { position: relative; }

    .map-tooltip {
        position: absolute;
        pointer-events: none;
        transform: translate(-50%, -100%); /* centra y lo pone arriba del pin */
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0,0,0,.18);
        padding: 8px;
        border: 1px solid rgba(0,0,0,.08);
        z-index: 50;
        display: none;
        width: 220px;
    }

    .map-tooltip img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 6px;
    }

    .map-tooltip .title {
        font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
        margin: 6px 2px 2px;
        color: #0b1e14;
    }

    object.map.none { pointer-events: none; }
    object.map { pointer-events: auto; }


/* ===== Coverage hover: LISTA ===== */
/*.coverage-item {
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease;
    border-radius: 10px;
    will-change: transform;
}*/

.coverage-item {
    display: block; /* importante */
    padding-top: 1%;
}

.coverage-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 10px;
    transition: transform .15s ease, background-color .15s ease;
    will-change: transform;
}

.coverage-pill.mx { width: 400px; }   /* ajusta */
.coverage-pill.usa{ width: 400px; }   /* ajusta */


.coverage-item.is-hover .coverage-pill {
    transform: scale(1.02);
    background-color: rgba(52, 193, 129, .08);
}

/* ===== Coverage hover: PIN en SVG ===== */
/* Haz que el transform funcione correctamente dentro del SVG */
svg g.is-hover {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(2.12);
    transition: transform .15s ease;
    will-change: transform;
}

/* Evita "parpadeo" cuando pasas por path/circle/text dentro del pin */
svg g[id] {
    pointer-events: all;
}

svg g[id] {
    cursor: pointer;
}

    @media(width <= 767px){
        .bg-image {
            min-height: 757px;
        }
    }

@media(width <= 600px) {
    .bg-image {
        min-height: 610px;
    }
}

@media(width <= 505px) {
    .bg-image {
        min-height: 510px;
    }
}

@media(width <= 415px) {
    .bg-image {
        min-height: 400px;
    }
}