.mapa, 
.mapa .map-container {
    height: 100%;
    width: 100%;
}

.mapa.no_border .google-map {
    border: 0;
}

.mapa .markerInfo {
    position: absolute;
    top: 30px;
    max-height: calc(100% - 60px);
    right: 30px;
    width: 500px;
    max-width: calc(100% - 60px);
    opacity: 0;
    transform: translateX(530px);
    -webkit-transform: translateX(530px);
    -moz-transform: translateX(530px);
    -ms-transform: translateX(530px);
    -o-transform: translateX(530px);
    background: var(--blanco);
    color: var(--negro);
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    z-index: 400;
    padding: 30px;
    box-shadow: 0 5px 15px rgb(0 0 0 / 15%);
    font-size: 14px;
    line-height: 1.4;
}

.mapa .markerInfo.active {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}

.mapa .markerInfo a {
    color: var(--negro);
    font-weight: 700;
}

.mapa .markerInfo a:hover {
    color: var(--principal);
}

.mapa .markerInfo small {
    font-size: .75em;
}

.mapa .markerInfo small a {
    color: var(--principal);
}

.mapa .markerInfo small a:hover {
    color: var(--negro);
}

.mapa .markerInfo .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    line-height: 1;
    color: var(--principal);
}

.mapa .markerInfo .close:hover {
    color: var(--negro);
}

.mapa .markerInfo p {
    margin: 0;
}

.mapa .markerInfo .title {
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 15px;
    padding: 0 0 15px;
    border-bottom: solid 1px var(--secundario);
}