/* Mobile */
@media only screen and (max-width: 767px) {
    /* Splash Screen */
    #logo1 {
        width: 100%;
        max-width: 100vw;
    }
    #img-gift{
        margin-bottom: 1vh;
    }

    #btn-geeks{   
        background: none;
        border: none;
        bottom: -5%;
        right: -10%;
        height: 15vh;
        margin: 0;
    }
    /* Bienvenida */
    #bienvenida {
        margin-top: 5vh;
        max-width: 90%;
    }
    #logo {
        object-fit: contain;
        width: 40%;
        height: unset;
    }
    .foot-m {
        display: none;
    }
    footer {
        /* position: relative; */
        width: 90vw;
        text-align: center;
        width: 90%;
    }

    /* Quiz */
    body {
        justify-content: unset;
    }
    #title-logo {
        object-fit: contain;
        width: 80%;
        margin-top: 0vh;
    }
    #quiz {
        width: 90%;
    }
    .barra-progreso{
        height: 10px;
    }
    #barra {
        margin: 0;
        margin-bottom: 1rem;
    }
    #anterior{
        top: 51%;
        left: -10%;
        width: 3rem;
        height: 3rem;
    }
    .contenedor-botones {
        grid-template-rows: repeat(4, 1fr);
    }
    #quiz2 {
        min-height: 52vh;
        grid-template-rows: 12% 88%;
    }
    #pregunta {
        font-size: 1rem;
    }
    .gift-background {
        border-radius: 2rem;
        min-height: 40vh !important;
        min-width: 80% !important;
        box-shadow: 1px 1px 3px black;
    }

    /* Regalo */
    #gift-img img {
        margin-top: 1rem;
        width: 80%;
    }
    #gift-sugeridos {
        display: flex;
        flex-direction: column;
        padding: .5rem;
        overflow-y: auto;

    }

    #gift-sugeridos:hover > .opciones-gift:not(:hover) {
        filter: none;
        opacity: 1;
        transform: none;
      }
      .opciones-gift:hover{
        transform: none;
      }
    .opciones-gift {
        padding-inline: 1.5rem;
    }
    #gift-sugeridos h1 {
        font-size: 1.5rem;
    }
    #gift-sugeridos p {
        font-size: 0.9rem;
    }
    #gift-btn {
        width: 100%;
        max-width: 100%;
    }
    #gift-btn button {
        font-size: 0.8rem;
        padding-inline: unset;
    }
    #popup {
        width: 70vw;
    }
    #gift-text p{
        max-width: 100% !important;
    }
    #gift-btn-repeat{
        width: 2rem;
        height: 2rem;
    }
    .opciones-popover h2{
        display: none;
    }

    #opciones-botones1{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);

    }

    /* TY page */
    #typage {
        max-width: 100%;
        width: 100%;
    }
    #typage img {
        width: 80vw;
    }
    #recomendaciones_btn {
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
    #popup-typage {
        max-width: 80vw;
        width: 80vw;
    }
    #popup-typage h2 {
        font-size: 1rem;
    }
    #comentario-ty {
        max-width: 80%;
    }
} /* Terminado */

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 1025px) {
    /* Splash Screen */
    #logo1 {
        width: 70%;
    }

    /* Bienvenida */
    #bienvenida {
        grid-template-rows: 50vh 40vh;
        max-width: 80%;
    }
    #instrucciones{
        font-size: 1.5rem;
    }
    #logo {
        object-fit: contain;
        width: 70%;
        height: unset;
    }
    .foot-m {
        display: none;
    }
    footer {
        text-align: center;
        margin: 1rem;
        width: 90%;
    }


    /* Quiz */
    body {
        justify-content: unset;
    }
    #title-logo {
        object-fit: contain;
        width: 80%;
        margin-top: 7vh;
    }
    #quiz {
        width: 90%;
    }
    #barra {
        margin: 1rem;
        margin-bottom: 2rem;
        width: 65%;
    }
    .contenedor-botones {
        grid-template-rows: repeat(2, 1fr);
    }
    #quiz2 {
        min-height: 30vh;
        grid-template-rows: 12% 88%;
        max-width: 80vw;
        width: 80vw;
    }
    #pregunta {
        font-size: 1.5rem;
    }
    .gift-background {
        min-height: 50vh !important;
        min-width: 80% !important;
    }

    /* Regalo */
    #gift-text p{
        font-size: 1.3rem;
        margin: 1rem;
    }
    #gift-img img {
        margin-top: 2rem;
        width: 70vw;
    }
    #gift-sugeridos {
        display: flex;
        flex-direction: column;
    }
    .opciones-gift {
        padding-inline: 3rem;
        min-height: 40vh !important;
    }

    #gift-sugeridos h1 {
        font-size: 2rem;
    }
    #gift-sugeridos p {
        font-size: 1.3rem;
    }
    #gift-btn {
        width: 100%;
        max-width: 100%;
    }
    #gift-btn button {
        font-size: 1.3rem;
        padding-inline: unset;
    }
    #popup {
        width: 70vw;
    }

    /* TY page */
    #typage {
        max-width: 100%;
        width: 100%;
    }
    #typage img {
        width: 60vw;
        margin-bottom: 2vh;
    }
    #recomendaciones_btn {
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
    #popup-typage {
        max-width: 80vw;
        width: 80vw;
    }
    #popup-typage img{
        width: 100%;
    }
    #popup-typage h2 {
        font-size: 2rem;
        padding-inline: 2rem;
    }
    #comentario-ty {
        max-width: 70%;
    }
    #comentario-ty p{
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
}

/* Lapto */
@media only screen and (min-width: 1026px) and (max-width: 1439px) {
    body{
        justify-content: unset;
    }
    #bienvenida{
        margin-top: 7vh;
        grid-template-rows: 30vh 50vh;
        gap: 2rem;
    }
    #inst-cont{
        width: 50vw;
    }
    #gift-img img{
        height: 4rem;
    }
    #barra{
        margin: 1rem;
    }
    #typage{
        gap: 1rem;
    }
    .opciones-gift{
        min-height: 37vh;
    }
}

/* Lapto 4k */
@media only screen and (min-width: 1440px) {
    #bienvenida {
        margin-top: 7vh;
        max-width: 40%;
    }
    #comentario-ty{
        max-width: 60%;
    }
    #comentario-ty p{
        font-size: 1.5rem;
    }
    #instrucciones p{
        font-size: 1.5rem;
    }
}