.as {
    width: 130px;
    height: 130px;
    margin-bottom: -105px;
    margin-left: 10px;
}

.map {
    margin-left: 220px;
    width: 1024px; 
    height: 768px;
}

.div {
    width: 100%;
    height: 5em;
    padding: 15px;
    margin-top: -30px;
    background-color: yellowgreen;
    box-shadow: 10px 10px 5px 12px rgb(58, 69, 73);
    text-align: right; /*alineacion del texto*/
    font-family: "Calibri";
    z-index: -1;
    text-shadow: 2px 2px 4px #000000;
    color: aliceblue;
    transition: height 0.5s;

    
}

.div:hover {
    height: 105px;
}

.ti{
    height: 100px;
    margin-top: -15%;
    padding: 46px;
    margin-left: 10%;
}

a:link{
    color: aliceblue;
}

a:link {
color: rgb(25, 126, 163);
background-color: transparent;
text-decoration: none;
}
a:visited {
color: rgb(255, 255, 255);
background-color: transparent;
text-decoration: none;
}
a:hover {
color: rgb(13, 148, 172);
background-color: transparent;
text-decoration: underline;
}
a:active {
color: rgb(0, 38, 255);
background-color: transparent;
text-decoration: underline;
}

.titulo {
    text-align: center;
    font-family: "ui-sans-serif";
    padding: 10px;
    animation: aparecer 2s forwards;
}

.final {
    background-color: rgb(147, 160, 10);
    margin-top: 200px;
    color: aliceblue;
    box-shadow: 10px 10px 10px 20px rgb(255, 255, 255);
    text-align: center;
    padding: 10px;
    height: 130px;
}

@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.esp {
    padding: 0px;
}

.tex {
    text-align: justify;
    color:rgb(110, 105, 105);
    padding: 15px;
    /*font-family: ui-serif;*/
    font-family: ui-sans-serif;

    height: 124px;
    margin-left: 230px;
    width: 66.8%;
    font-size: 19px;
    background-color: rgba(255, 255, 255, 0);
    box-shadow: 10px 10px 5px 12px rgba(255, 255, 255, 0.603);
    opacity: 0;
    animation: aparecer 2s forwards;
}

body {
    background-image: url(fs.png);
    background-size: cover;
    overflow-x: hidden; /* Evita el desplazamiento horizontal */

    background-attachment: fixed;
}

@media (max-width: 768px) {
    body {
        background-image: none;
        overflow-x: hidden; /* Evita el desplazamiento horizontal */
    }

    .espc {
        padding: 10px;
    }

    .div {
        width: 100%;
        height: 150px;
        min-width: 350px;
        margin-left: -10px;
        padding: 15px;
        margin-top: -40px;
        box-shadow: 5px 5px 2px 6px rgb(58, 69, 73);
        font-size: 16px;
    }

    .as {
        width: 15%;
        height: 15%;
        margin-bottom: -30px;
        margin-left: -5px;
    }

    .ti {
        width: 53%;
        height: 43%;
        margin-top: -160px;
        padding: 50px;
        margin-left: 49px;
    }

    .tex {
        margin-left: 45px;
        
    }

    .titulo {
        text-align: center;
        font-family: "ui-sans-serif";
        padding: 5px;
        margin-top: -50px;
        animation: aparecer 2s forwards;
    }
    
    .map {
        margin-left: 0px;
        width: 370px; 
        height: 400px;
    }

    .esp {
        padding: 70px;
    }

    .final {
        text-align: center;
        padding: 10px;
        height: 200px;
    }
}