body {
    background-image: url(../img/fondo_papel_body.png);
    background-size: cover;
    background-repeat: no-repeat;
}

header {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 50px 20px;
}

#img-inicio {
    width: 20%;
}

#img-inicio img {
    position: absolute;
    top: 3%;
    left: 3%;
    width: 20vw;
    height: auto;
    align-content: center;
    transition: rotate(360deg) 0.2s ease;
}

.logo2 {
    opacity: 0;
}

.logo1:hover {
    opacity: 0;
}

.logo2:hover {
    opacity: 1;
    transition: 1s;
    transform: rotate(360deg);
}

#inicio {
    display: flex;
    width: 30%;
}

#buscador {
    margin: 1vw auto auto 2vw;
    padding: 8px;
    font-size: 1vw;
    border: 1px solid #2c2c2c;
    border-radius: 20px;
}

#carrito {
    margin: auto auto auto 3vw;
    width: 3vw;
    border: 2px solid #000000;
    border-radius: 100%;
    padding: 4px;
    height: auto;
}

#slider-inicio {
    display: block;
    margin: 0 auto;
    font-size: 5vw;
    color: #aaaaaa;
}

#slider-inicio h1 {
    margin: 0;
    font-size: 6vw;
}

#slider {
    height: 6vw;
    overflow: hidden;
}

#slider span {
    display: block;
    color: rgb(118, 181, 113);
    animation: animationWord 7s infinite;
}

@keyframes animationWord {
    0% {
        transform: translateY(0%);
    }

    30% {
        transform: translate(0%);
    }

    50% {
        transform: translateY(-100%);
    }

    80% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0%);
    }
}

/* ========================================
   RESPONSIVE - MÓVIL
   ======================================== */

@media (max-width: 768px) {
    body {
        background-image: url(../img/fondoMovil.png);
        background-size: 100% auto;
        background-repeat: repeat-y;
        background-position: top center;
    }

    header {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    #img-inicio img {
        left: 50%;
        transform: translateX(-50%);
        width: 250px;
        margin: 0vw auto 0 auto;
    }

    .logo2 {
        animation: rotacionContinua 8s linear infinite;
    }

    .logo1 {
        animation: rotacionFix 8s linear infinite;
    }

    #slider-inicio {
        display: block;
        font-size: 5.5vw;
        margin: 10vw auto;
        z-index: +1;
    }

    #slider span {
        background: linear-gradient(45deg, #0037ff, #00eaff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
    }

    #slider-inicio h1 {
        margin: 0;
        font-size: 1.9em;
        background: linear-gradient(45deg, #0037ff, #00eaff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0px 0px 12px rgba(0, 0, 0, 0.8);
    }

    .LaGranBiblioteca {
        font-size: 1.35em !important;
    }

    #slider {
        height: 1.9em;
        line-height: 1.9em;
        overflow: hidden;
    }

    #buscador {
        position: absolute;
        top: 10vw;
        align-items: center;
        width: 80vw;
        padding: 8px;
        font-size: 0.8em;
        border-radius: 20px;
    }

    @keyframes rotacionContinua {
        0% {
            transform: translateX(-50%) rotate(0deg);
            opacity: 0;
        }

        5% {
            transform: translateX(-50%) rotate(700deg);
            opacity: 0.5;
        }

        90% {
            transform: translateX(-50%) rotate(740deg);
            opacity: 0.3;
        }

        100% {
            transform: translateX(-50%) rotate(1300deg);
            opacity: 0;
        }
    }

    @keyframes rotacionFix {
        0% {
            transform: translateX(-50%) rotate(0deg);
            opacity: 0.8;
        }

        4% {
            transform: translateX(-50%) rotate(0deg);
            opacity: 0.8;
        }

        5% {
            transform: translateX(-50%) rotate(720deg);
            opacity: 0;
        }

        47% {
            transform: translateX(-50%) rotate(720deg);
            opacity: 0;
        }

        48% {
            transform: translateX(-50%) rotate(720deg);
            opacity: 1;
        }

        49% {
            transform: translateX(-50%) rotate(720deg);
            opacity: 0;
        }

        50% {
            transform: translateX(-50%) rotate(720deg);
            opacity: 0;
        }

        51% {
            transform: translateX(-50%) rotate(720deg);
            opacity: 1;
        }

        52% {
            transform: translateX(-50%) rotate(720deg);
            opacity: 0;
        }

        90% {
            transform: translateX(-50%) rotate(720deg);
            opacity: 0.2;
        }

        100% {
            transform: translateX(-50%) rotate(780deg);
            opacity: 0.1;
        }
    }
}