@media screen and (max-width: 768px) {
    header {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .menuSuperior {
        width: 100%;
        margin: 5% auto 0 auto;
    }

    .menuSuperior ul {
        display: flex;
        text-align: center;
        justify-content: space-evenly;
        padding: 0;
    }

    #banner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "slider slider" "foto contacto";
    }

    .Bienvenida {
        display: contents;
    }

    .slider-container {
        grid-area: slider;
        margin: 15% 0 0 0;
        text-align: center;
        width: 95%;
    }

    .saludoYhola {
        display: flex;
        text-align: center;
    }

    #saludo {
        font-size: 10vw;
        gap: 0;
        transform-origin: 90% 90%;
        margin: 0 0 0 10%;
    }

    #hola {
        font-size: 8vw;
    }

    #slider {
        height: 12vw;
        line-height: 12vw;
    }

    #slider span {
        font-size: 10vw;
        margin: 0 0 0 5%;
    }

    .img-container {
        grid-area: foto;
        display: flex;
        margin: 10% 0 0 0;
        width: 100%;
    }

    .img-container img {
        width: 60vw;
        margin: 0 0 0 20%;
    }

    .img-perfil {
        width: 20vw;
        height: auto;
        margin: 2vw 0 0 15vw;
    }

    .codigo-container {
        width: 60%;
        margin: 4vw 0 0 -20%;
    }

    #codigo {
        font-size: 1.5vw;
        font-family: 'VT323', monospace;
        background: linear-gradient(90deg, rgb(86, 87, 86), rgb(10, 186, 77), rgb(26, 26, 26));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;

    }

    #contacto {
        grid-area: contacto;
        display: flex;
        flex-direction: column;
        gap: 20vw;
        margin: 150% 15% 0 -45%;
        align-self: flex-start;
    }


    #contacto p {
        position: absolute;
        bottom: 30;
        left: -320%;
        font-size: 6vw;
        font-family: 'VT323', monospace;
        background: linear-gradient(90deg, rgb(49, 72, 40), rgb(204, 230, 214), rgb(26, 26, 26));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .contacto-img {
        position: absolute;
        bottom: 30;
        left: -90%;
        font-size: 10vw;
    }

}