/*======================================
MAPA DE COLOMBIA
======================================*/

#gaMapImage{

    position:relative;

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

.gaMapCard{

    transition:.45s ease;

    animation:gaFade .45s;

}

@keyframes gaFade{

0%{

opacity:0;

transform:translateY(20px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.gaMapMarker{

transition:
transform .3s,
box-shadow .3s,
background .3s;

}

.gaMapCard{

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

backdrop-filter:blur(12px);

border:1px solid rgba(220,230,240,.8);

}

#gaMapSection{

transition:.4s;

}

#gaMapSection:hover{

box-shadow:

0 18px 45px rgba(0,0,0,.18);

}

.gaMapTitle{

position:relative;

padding-bottom:12px;

margin-bottom:10px;

}

.gaMapTitle:after{

content:"";

position:absolute;

left:0;

bottom:0;

width:70px;

height:4px;

border-radius:10px;

background:#F58220;

}

.gaMapMarker:hover{

transform:translate(-50%,-50%) scale(1.35);

box-shadow:
0 0 20px rgba(245,130,32,.60);

}

.gaMapMarker.active{

background:#0F3B63;

box-shadow:

0 0 25px rgba(15,59,99,.60);

}

#gaMapInfo{

transition:.35s;

}

.gaMapValue a{

text-decoration:none;

color:#0F3B63;

font-weight:600;

}

.gaMapValue a:hover{

color:#F58220;

}

.gaMapButton{

display:flex;

gap:15px;

margin-top:20px;

flex-wrap:wrap;

}

.gaMapButton a{

padding:12px 26px;

border-radius:40px;

text-decoration:none;

color:#fff;

font-weight:600;

transition:.3s;

}

#gaMapsButton{

background:#0F3B63;

}

#gaMapsButton:hover{

background:#184f82;

}

#gaWhatsappButton{

background:#25D366;

}

#gaWhatsappButton:hover{

background:#1db954;

}

#gaMapImage img{

    width:78%;

    max-height:100%;

   

    display:block;

}

/*======================================
MARCADORES
======================================*/

.gaMapMarker{

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#F58220;

    border:3px solid #fff;

    cursor:pointer;

    z-index:20;

    transition:.3s;

    box-shadow:
    0 4px 15px rgba(0,0,0,.25);

}

.gaMapMarker:hover{

    transform:scale(1.4);

}

.gaMapMarker.active{

    background:#0F3B63;

}

.gaMapMarker::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:32px;

    height:32px;

    border-radius:50%;

    border:2px solid rgba(245,130,32,.4);

    transform:translate(-50%,-50%);

    animation:gaPulse 2s infinite;

}

@keyframes gaPulse{

0%{
transform:translate(-50%,-50%) scale(.5);
opacity:1;
}

70%{
transform:translate(-50%,-50%) scale(1.5);
opacity:0;
}

100%{
opacity:0;
}

}

/*=====================================================
=            GRUPO ALTUM - MAPA INTERACTIVO
=            ENTREGA 1A
=====================================================*/

:root{

    --ga-primary:#0F3B63;
    --ga-secondary:#1B5E8C;
    --ga-orange:#F58220;
    --ga-light:#F4F7FA;
    --ga-border:#DDE4EC;
    --ga-text:#22313F;
    --ga-gray:#7C8B99;
    --ga-shadow:0 10px 35px rgba(0,0,0,.12);

}

#gaMapSection,
#gaMapSection *{
    box-sizing:border-box;
}

#gaMapSection{

    width:100%;
    max-width:800px;
    height:700px;

    margin:auto;
	margin-top: -79px;

    background:#FFFFFF;

    border-radius:18px;

    overflow:hidden;

    font-family:
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;

    box-shadow:var(--ga-shadow);

    display:flex;

    flex-direction:column;

    position:relative;

}

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

#gaMapCanvas{

 

    position:relative;

    width:100%;

    min-height:520px;

    overflow:visible;


}

/*Aquí irá el SVG*/

#gaMapImage{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

}

#gaMapImage img{

    width:88%;

    height:auto;

    display:block;

    user-select:none;

    pointer-events:none;

}

/*=============================
MARCADORES
=============================*/

.gaMapMarker{

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--ga-orange);

    cursor:pointer;

    transition:.35s;

    box-shadow:
    0 0 0 0 rgba(245,130,32,.55);

    z-index:5;

}

.gaMapMarker:hover{

    transform:scale(1.25);

}

.gaMapMarker::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:32px;

    height:32px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:2px solid rgba(245,130,32,.35);

    animation:gaPulse 2s infinite;

}

@keyframes gaPulse{

0%{

transform:translate(-50%,-50%) scale(.5);
opacity:1;

}

70%{

transform:translate(-50%,-50%) scale(1.4);
opacity:0;

}

100%{

opacity:0;

}

}

/*=============================
PANEL
=============================*/

#gaMapInfo{

    flex:1;

    background:#ffffff;

    border-top:1px solid var(--ga-border);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

}

.gaMapCard{

    width:114%;

    height:100%;

    border-radius:16px;

    background:#fafbfd6e;

    border:1px solid #E7EDF4;

    padding:25px;

    display:grid;

    grid-template-columns:1fr 1fr;

    column-gap:40px;

    row-gap:12px;

}

.gaMapTitle{

    grid-column:1/3;

    font-size:26px;

    color:var(--ga-primary);

    font-weight:700;

    letter-spacing:.5px;

}

.gaMapItem{

    display:flex;

    align-items:flex-start;

    gap:12px;

}

.gaMapIcon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#EDF4FB;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--ga-primary);

    font-size:18px;

    flex-shrink:0;

}

.gaMapLabel{

    font-size:12px;

    color:#3e4143;

    text-transform:uppercase;

    letter-spacing:.8px;

}

.gaMapValue{

    margin-top:3px;

    color:var(--ga-text);

    font-size:15px;

    line-height:22px;

}

.gaMapButton{

    grid-column:1/3;

    margin-top:10px;

}

.gaMapButton a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 28px;

    border-radius:50px;

    background:var(--ga-primary);

    color:#fff;

    text-decoration:none;

    transition:.3s;

    font-weight:600;

}

.gaMapButton a:hover{

    background:var(--ga-orange);

}

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

@media(max-width:768px){

#gaMapSection{

height:auto;

}

#gaMapCanvas{

height:420px;

}

.gaMapCard{

grid-template-columns:1fr;

}

.gaMapTitle{

grid-column:1;

}

.gaMapButton{

grid-column:1;

}

}



#gaMapSection{position:relative!important;height:auto!important}
#gaMapInfo.overlay{position: absolute;
    top: 20%;
    right: 14%;
    width: 73%;
    max-width: 99%;
    z-index: 100;
    background: transparent;
    border: none;
    padding: 0;
    display: none;}
#gaMapInfo.overlay.show{display:block}
.gaMapCard{box-shadow:0 10px 30px rgba(0,0,0,.25);position:relative}
#gaClose{position: absolute;
    right: 12px;
    background-color: #ffcc00;
    border-radius: 11px;
    padding: 15px;
    top: -26px;
    border: none;
    font-size: 34px;
    cursor: pointer;
    color: #fff;}