#titulo-principal {
    margin-left: 10%
}
@media screen and (max-width: 768px) {
    #contenedor-mapa {
        display: none;
    }
    #titulo-principal {
        margin-left: auto;
        margin-right: auto;
        text-align: center; /* Si hay texto dentro */
        width: 100%; /* Asegúrate de definir un ancho */
    }
}
/*udn cards*/
#infomapa {
    position:relative;
    top:10px;
}

.textoFrmAduanas{
    padding-left:10px;
    font-weight:800;
}

.udncard {
    position: relative;
    top:0px;
    width: 290px;
    height: 400px;
    overflow: hidden;
    background: white;
    border-radius: 15px;
    box-shadow: 7px 13px 37px rgba(255, 255, 255, .4);
    font-weight: bold;
}

.udncard-header {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

    .udncard-header::before {
        content: '';
        position: absolute;
        border-top: 30px solid transparent;
        border-left: 300px solid white;
        bottom: 0;
    }

    .udncard-header img {
        width: 100%;
        height:200px;
        box-shadow: 7px 13px 37px rgba(0, 0, 0, .6);
    }

.udncard-seccion {
    padding-left: 10px;
    overflow: hidden;
}

    .udncard-seccion p {
        font-size: 0.8em;
        margin-bottom: 2px;
        word-wrap: break-word; /* Permite que el texto se ajuste a la línea */
        overflow-wrap: break-word;
    }

.udncard-footer {
    width: 100%;
    height: 85px;
    background: darkblue;
    color: white;
    position: absolute;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

    .udncard-footer::before {
        content: '';
        position: absolute;
        border-bottom: 30px solid transparent;
        border-right: 400px solid white;
        top: 0;
        border-top: 1px solid white;
    }

    .udncard-footer p {
        width:150px;
        font-weight: 800;
        margin: 0;
    }

.avatar-container {
    position: absolute;
    width:90px;
    right: 10px;
    bottom: -30px;
    display: flex;
    flex-direction: column; /* Coloca el avatar y el nombre en columna */
    align-items: center; /* Centra el contenido horizontalmente */
    gap: 5px; /* Espacio entre el avatar y el nombre */
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
}

.avatar-name {
    color: white;
    font-weight: bold;
    font-size: 12px;
    margin: 0;
    text-align: center;
}


/* Mapa */

.dot svg:hover {
    height: 35px;
    width: 35px;
    transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
}

.ping-activo svg {
    height: 35px;
    width: 35px;
}

.dot {
    position: absolute;
    z-index: 99;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.textImagen {
    color: #fff;
    font-family: 'Arial';
    font-weight: bold;
    font-size: 10px;
    transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
}

    .textImagen:hover {
        color: darkblue;
        background-color: white;
        border-radius: 5px;
    }

.titulociudades {
    color: #7ad1ff;
    font-family: 'Arial';
    font-weight: bold;
    font-size: 12px;
    position: absolute;
    top: 0;
    left: 0;
}

#titulofronterizas {
    top: 21%;
    left: 50%;
}

#tituloaereas {
    top: 21%;
    left: 70%;
}

#titulomaritimas {
    top: 21%;
    left: 88%;
}

/*Fronterizas*/
/*#tijuana {left: 10%;top: 26%;}
#mexicali {left: 14%;top: 26%;}
#nogales {left: 28%;top: 31%;} 
#cdjuarez {left: 40%;top: 32%;}
#piedrasnegras {left: 53%;top: 38%;}
#colombia {left: 56%;top: 42%;}
#nuevolaredo {left: 58%;top: 47%;}
#reinosa {left: 60%;top: 52%;}
#matamoros {left: 64%;top: 53%;}
#cdhidalgo {left: 74%;top: 96%;}


#textTijuana {top: 24%;left:70%;}
#textMexicali {top: 27%;left:70%;}
#textNogales {top: 30%;left:70%;}
#textCdjuarez{top: 33%;left:70%;}
#textPiedrasNegras {top: 36%;left:70%;}
#textColombia {top: 39%;left:70%;}
#textNuevoLaredo {top: 42%;left:70%;}
#textReinosa{top: 45%;left:70%;}
#textMatamoros {top: 48%;left:70%;}
#textHidalgo{top: 51%;left:70%;}*/

.sombrear {
    color: darkblue;
    background-color: white;
    border-radius: 5px;
}

/*Aereas*/
/*#cdmexico {left: 56%;top: 78%;}
#monterrey {left: 56%;top: 52%;}
#guadalajara {left: 43%;top: 72%;}
#queretaro {left: 52%;top: 75%;}
#toluca {left: 53%;top: 80%;}
#ramos {left: 52%;top: 54%;}
#hermosillo {left: 29%;top: 45%;}
#lapaz {left: 27%;top: 60%;}
#chihuahua {left: 39%;top: 40%;}
#sanluispotosi {left: 52%;top: 62%;}
#aguascalientes {left: 49%;top: 65%;}
#leon {left: 50%;top: 69%;}
#puebla {left: 62%;top: 82%;}
#merida {left: 84%;top: 74%;}
#cancun {left: 91%;top: 69%;}



#textCdmexico {top: 24%;left:92%;}
#textMonterrey {top: 27%;left:92%;}
#textGuadalajara {top: 30%;left:92%;}
#textQueretaro {top: 33%;left:92%;}
#textToluca {top: 36%;left:92%;}
#textRamosArizpe {top: 39%;left:92%;}
#textHermosillo {top: 42%;left:92%;}
#textLaPaz {top: 45%;left:92%;}
#textChihuahua {top: 48%;left:92%;}
#textSanLuisPotosi {top: 51%;left:92%;}
#textAguascalientes {top: 54%;left:92%;}
#textLeon {top: 57%;left:92%;}
#textPuebla {top: 60%;left:92%;}
#textMerida {top: 63%;left:92%;}
#textCancun{top: 66%;left:92%;}*/


/*#manzanillo {top: 80%;left:40%;}
#lazarocardenas {top: 86%;left:48%;}
#veracruz {left: 64%;top: 77%;}
#altamira {left: 61%;top: 65%;}
#tuxpan {left: 61%;top: 70%;}
#ensenada {left: 11%;top: 33%;}
#guaymas {left: 26%;top: 48%;}
#puertoprogreso {left: 82%;top: 70%;}
#puertomorelos {left: 91%;top: 73%;}


#textManzanillo {top: 24%;left: 114%;}
#textLazaroCardenas {top: 27%;left: 114%;}
#textVeracruz {top: 30%;left: 114%;}
#textAltamira {top: 33%;left: 114%;}
#textTuxpan {top: 36%;left: 114%;}
#textEnsenada {top: 39%;left: 114%;}
#textGuaymas {top: 42%;left: 114%;}
#textPuertoProgreso {top: 45%;left: 114%;}
#textPuertoMorelos {top: 48%;left: 114%;}*/


@media (max-width: 1400px) {
    .area-card .area-card__title {
        font-size: .7em;
        padding-bottom: 20px;
    }
}

@media (max-width: 1000px) {

    map {
        display: none;
    }
}

@media (max-width: 400px) {

    .area-card {
        margin-left: 0px;
    }
}

.boton-circular {
    width: 250px;
    border-radius: 40px;
    background-color: darkblue;
    overflow: hidden;
    box-shadow: 7px 13px 37px rgba(255, 255, 255, .4);
}
    .boton-circular:hover {
        background-color: #0E47A1;
        border: 2px solid blue;
        color: white;
        cursor:pointer;
    }

/* SCALE ANIMATION ---------------------------- */


.icon-scale {
    width: 250px;
    height: 120px;
    position: relative;
    margin: auto;
}

    .icon-scale.active {
        animation: scaleInOut 3s;
        -webkit-animation: scaleInOut 3s;
    }

@keyframes scaleInOut {
    0% {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(1.5, 1.5);
    }

    50% {
        transform: scale(1, 1);
    }

    75% {
        transform: scale(1.5, 1.5);
    }

    100% {
        transform: scale(1, 1);
    }
}

@-webkit-keyframes scaleInOut {
    0% {
        -webkit-transform: scale(1, 1);
    }

    25% {
        -webkit-transform: scale(1.5, 1.5);
    }

    50% {
        -webkit-transform: scale(1, 1);
    }

    75% {
        -webkit-transform: scale(1.5, 1.5);
    }

    100% {
        -webkit-transform: scale(1, 1);
    }
}


/* TRANSLATE ANIMATION ---------------------------- */


.icon-translate {
    width: 250px;
    height: 120px;
    position: relative;
    margin: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

    .icon-translate.active {
        animation: translate 3s;
        -webkit-animation: translate 3s;
    }

@keyframes translate {
    0% {
        transform: translate(0px, 0px);
    }

    25% {
        transform: translate(-200px, 0px);
    }

    50% {
        transform: translate(200px, 0px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@-webkit-keyframes translate {
    0% {
        -webkit-transform: translate(0px, 0px);
    }

    25% {
        -webkit-transform: translate(-200px, 0px);
    }

    50% {
        -webkit-transform: translate(200px, 0px);
    }

    100% {
        -webkit-transform: translate(0px, 0px);
    }
}

.lista-aduanas {
    display: flex;
    align-items: center;
}
.form-check-label {
    padding-left: 15px;
    padding-top:3px;
    font-weight: 700;
}
.form-check-input {
    padding-top: 5px;
    width: 20px;
    height: 20px;
}
@keyframes ring-brusco {
    0% {
        transform: scale(1) rotate(0deg);
    }

    20% {
        transform: scale(1.1) rotate(25deg);
    }

    50% {
        transform: scale(1.4) rotate(-25deg);
    }

    80% {
        transform: scale(1.1) rotate(25deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}
.dot-nogales {
    display: inline-block;
    animation: ring-brusco 1.3s ease-in-out infinite; /* Ciclo de 2 segundos */
    transition: transform 0.1s ease-in-out;
}

    .dot-nogales:hover {
        animation: none;
        transform: scale(1) rotate(0deg);
    }