@media (max-width: 965px){
    .formulario{
        display: inline-grid;
        gap: 5%;
    } 
    
    .mapa{
        height: 20rem;
    }
}

@media (max-width: 912px) {
    .hero{
        display: block;
    }

    .logo-avatar{
        padding-left: 11%;
        padding-top: 5%;
    }

    .descripcion {
        padding: 2rem 4rem;
        margin: 0;
    }
}

@media (max-width: 767px ) {
    .logo-principal-footer{
        display: none;
    }

    .footer p{
        display: none;
    }

    .contactos {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .redes {
        justify-content: center;
    }



}


@media (max-width: 637px){

    .info {
        margin: 0;
    }

    .info h1 {
        font-size: 1.5rem;
        margin-top: 6%;
    }
    .logo-avatar{
        padding: 7% 0 0 1%;
        
    }

    .nav-list {
        position: absolute;
        display: none;
        flex-direction: column;
        top: 70px;
        left: 15%;
        width: 70%;
        align-items: end;
        background-color: #271d4e;
        border: 2px solid black;
        border-radius: 0 0 15px 15px;
        border-top: 0;
        gap: 15px;
        padding: 2% 0%;
        font-size: 18px;

    }

    .menu-label, .menu-des{
        display: flex;
        cursor: pointer;
    }

    .menu-label img{
        width: 50px;
    }

    #menu-des:checked + .nav-list{
        display: flex;
    }
}

@media (max-width: 520px) {

    .botones{
        flex-direction: column;
        gap: 1rem;
    }

    .form input {
        width: 18rem;
    }

    .card:hover{
        padding: 1.375rem 0.75rem;
    }

    .hero{
        margin: 4% 3%;
    }
}


@media (max-width: 300px){
    .avatar {
        width: 200px;
    }
}