footer{
    width: 100%;
    height: 40vh;

    background-color: black;

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;
}

.contenido-footer{
    width: 75%;
    height: 30vh;

    display: flex;
    flex-direction: column;

    justify-content: space-around;
}

.parte-de-arriba{
    display: flex;

    height: 20vh;
}

.parte-izquierda{
    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: space-between;

}

.parte-izquierda a{
    display: flex;
    align-items: center;

    gap: 1vh;

    color: white;

    text-decoration: none;
}

.parte-izquierda a img{
    width: 4vh;
}

.texto-footer{
    max-width: 55%;
}

.parte-derecha{
    width: 50%;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.caja-enlaces-footer{
    height: 100%;
    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: space-between;
}

.caja-enlaces-footer h3{
    text-transform: uppercase;
    letter-spacing: 0.5vh;

    color: var(--color-gris-propio);

    font-size: 1.5vh;
}

.enlaces-footer{
    height: 75%;

    display: flex;
    flex-direction: column;

    justify-content: space-between;
}

.enlaces-con-flecha a{
    display: flex;
    align-items: center;
}

.enlaces-con-flecha a ul li span{
    font-size: 2vh;
}

.enlaces-footer a{
    text-decoration: none;
    width: max-content;
}

.enlaces-footer a ul li{
    transition: 0.2s;
}

.enlaces-footer a ul li:hover{
    transition: 0.2s;
    color: var(--color-principal);
}

.enlaces-footer a ul li{
    list-style: none;
    color: white;
}

.contenido-footer hr{
    border: 1px solid var(--color-gris-apagado);
}

.parte-de-abajo{
    width: 100%;
    text-align: center;
}

/* ============================================= */
/* RESPONSIVE - TABLET Y MÓVIL                    */
/* ============================================= */
 
/* Tablet */
@media (max-width: 1024px){
    footer{
        height: auto;
        padding: 4vh 0;
    }
 
    .contenido-footer{
        width: 85%;
        height: auto;
        gap: 4vh;
    }
 
    .parte-de-arriba{
        height: auto;
        flex-wrap: wrap;
        gap: 4vh;
    }
 
    .parte-izquierda{
        width: 100%;
    }
 
    .texto-footer{
        max-width: 75%;
    }
 
    .parte-derecha{
        width: 100%;
        flex-wrap: wrap;
        gap: 4vh;
    }
 
    .caja-enlaces-footer{
        min-width: 40%;
    }
}
 
/* Móvil */
@media (max-width: 600px){
    footer{
        height: auto;
        padding: 5vh 0;
    }
 
    .contenido-footer{
        width: 88%;
        gap: 4vh;
    }
 
    .parte-de-arriba{
        flex-direction: column;
        align-items: flex-start;
        gap: 4vh;
    }
 
    .parte-izquierda{
        gap: 2vh;
    }
 
    .texto-footer{
        max-width: 100%;
    }
 
    .parte-derecha{
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 4vh;
    }
 
    .caja-enlaces-footer{
        width: 100%;
        gap: 2vh;
    }
 
    .enlaces-footer{
        height: auto;
        gap: 1.5vh;
    }
}