/* menu */

.opciones-idioma {
    width: 160px;
}

.opciones-idioma.open {
    width: 160px;
    height: 45px;
}

.historia{
    overflow-x: hidden;
}

section{
    padding: 0;
}
.content-historia{
    box-sizing: border-box;
    border-radius: 15px;
}

.content__bloque{
    max-width: 1240px;
    margin: 0 auto;
}


.title-h2{
    margin: 0;
    width: 250px;
    padding: 0;
    justify-content: start;
    background-position: left top;
}

.title-h2 h2{
    font-size: 28px;
    margin-left: 25px;
    margin-bottom: 10px;
}



h1{
    color: #FFF;
    margin-left: 25px;
    text-transform: uppercase;
}

/* Bloque 1 */

.bloque__historia--uno{
    background: url(/images/history/fondo-historia-sow-bloque-1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 140px 0;
}

.caption__bloque--1{
    max-width: 500px;
    width: 90%;
}

.texto__bloque--1{
    background: url(/images/history/bg-texto-1.png);
    background-size: 100% 100%;
    padding: 16px 16px 25px;
    margin-top: 20px;
    margin-left: 10px;
}


/* Bloque 2 */

.bloque__historia--dos{
    background: url(/images/history/fondo-historia-sow-bloque-2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center ;
    min-height: 750px;
    padding-top: 100px;
}

.caption__bloque--2{
    display: flex;
    align-items: start;
    justify-content: center;
}
.texto__bloque--2{
    max-width: 950px;
    width: 95%;
    background: url(/images/history/bg-texto-2.png);
    background-size: 100% 100%;
    padding: 16px 40px;
}


.texto__bloque--2 p span{
    font-family: Nunito-ExtraBold;
}

.texto__bloque--2 p{
    color: #527F8C;
    text-align: center;
}


/* Bloque 3 */

.bloque__historia--tres{
    background: url(/images/history/fondo-historia-sow-bloque-3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 750px;
    padding-top: 100px;
}

.content__bloque.tres{
    min-height: 750px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.caption__bloque--3{
    margin-bottom: 160px ;
}


.texto__bloque--3{
    max-width: 450px;
    width: 95%;
    background: url(/images/history/bg-texto-3.png);
    background-size: 100% 100%;
    padding: 16px 40px;
}


.texto__bloque--3 p span{
    font-family: Nunito-ExtraBold;
}





/* Bloque 4 */

.bloque__historia--cuatro{
    background: url(/images/history/fondo-historia-sow-bloque-4.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 600px;
    padding-top: 100px;
}

.content__bloque.cuatro{
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    justify-content: start;
}

.caption__bloque--4{
    margin-bottom: 80px ;
}


.texto__bloque--4{
    max-width: 500px;
    width: 95%;
    background: url(/images/history/bg-texto-4.png);
    background-size: 100% 100%;
    padding: 16px 40px;
}


/* Bloque 5 */

.bloque__historia--cinco{
    background: url(/images/history/fondo-historia-sow-bloque-5.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 600px;
    padding: 100px 0;
}


.caption__bloque--5{
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.texto__bloque--5.one{
    max-width: 700px;
    width: 95%;
    background: url(/images/history/bg-texto-5-one.png);
    background-size: 100% 100%;
    padding: 16px 40px;
}

.images{
    align-self: center;
    display: flex;
    gap: 35px;
}

.texto__bloque--5.two{
    align-self: flex-end;
    max-width: 700px;
    width: 95%;
    background: url(/images/history/bg-texto-5-two.png);
    background-size: 100% 100%;
    padding: 16px 40px;
}



/* Bloque 6 */

.bloque__historia--seis{
    background: url(/images/history/fondo-historia-sow-bloque-6.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 550px;
    padding-top: 100px;
}

.content__bloque.seis{
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.caption__bloque--6{
    margin-bottom: 160px ;
}

.caption__bloque--6 h4{
    font-family: var(--header-font);
    text-align: center;
    font-style: 28px;
    color: #FFF;
    margin-bottom: 15px;
}

.texto__bloque--6{
    max-width: 900px;
    width: 95%;
    background: url(/images/history/bg-texto-6.png);
    background-size: 100% 100%;
    padding: 16px 40px;
}

.texto__bloque--6 p{
    text-align: center;
}



/* Bloque 7 */

.bloque__historia--siete{
    background: url(/images/history/fondo-historia-sow-bloque-7.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 750px;
    padding-top: 100px;
}

.content__bloque.siete{
    min-height: 600px;
    display: flex;
    align-items: start;
    justify-content: flex-end;
}

.caption__bloque--7{
    margin-bottom: 160px ;
}


.texto__bloque--7{
    max-width: 550px;
    width: 95%;
    background: url(/images/history/bg-texto-7.png);
    background-size: 100% 100%;
    padding: 16px 5px 16px 40px;
}


.texto__bloque--7 p{
    margin: 15px 0;
}

.texto__bloque--7 .title-p{
    font-family: var(--header-font);
    font-size: 12px;
}


/* Bloque 4 */

.bloque__historia--ocho{
    background: url(/images/history/fondo-historia-sow-bloque-8.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 600px;
    padding-top: 100px;
}

.content__bloque.ocho{
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    justify-content: start;
}

.caption__bloque--8{
    margin-bottom: 160px ;
}


.texto__bloque--8{
    max-width: 450px;
    width: 95%;
    background: url(/images/history/bg-texto-8.png);
    background-size: 100% 100%;
    padding: 32px;
}

.texto__bloque--8 p{
    margin: 15px 0;
}

.texto__bloque--8 .title-p{
    font-family: var(--header-font);
    font-size: 11.5px;
}


/* Bloque Descarga */

.bloque__historia--descarga{
    background: url(/images/history/fondo-historia-sow-descarga.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 550px;
}

.content__bloque.descarga{
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: center;
    gap: 35px;
}

.caption__bloque--descarga{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.caption__bloque--descarga img{
    max-width: 400px;
    width: 100%;
}

.caption__bloque--descarga h4{
    font-family: var(--header-font);
    font-size: 16px;
    color: #FFF;
}


.bloque__descarga{
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.caption_and_qr{
    display: flex;
    align-items: center;
}

.texto__descarga{
    background: url(/images/history/fondo-caption_descarga.png);
    background-size: 100% 100%;
    padding: 15px 20px;
    width: 100%;
    max-width: 338px;
}

.content__botones{
    display: flex;
    align-items: center;
    gap: 25px;
}


.botones_descarga{
    min-height: 181px;
    display: flex;
    gap: 10px;
}

.botones_descarga a{
    cursor: pointer;
}

.qr img{
    width: 164px;
}

.btn_pc_stores,
.btn_mobile_stores{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.btn_pc_stores{
    height: 135px;
    display: flex;
    justify-content: start;
    margin-top: 15px;
}

.botones_descarga a img{
    width: 180px;
}

.separator{
    min-height: 100%;
    width: 15px;
    background: url(/images/history/separator.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.texto__descarga h5{
    font-family: var(--header-font);
    font-size: 18px;
    color: #FFF;
    text-shadow: 0px 3px 0px rgba(3, 193, 193, 0.6);
}

.botones_descarga h5{
    font-family: var(--header-font);
    font-size: 16px;
    color: #FFF;
    margin-bottom: 10px;
    text-align: center;
}

.mobile__stores h5{
    background: url(/images/history/texto-descarga-bg-large.png);
    background-size: 100% 100%;
    padding: 10px;
}

.pc__stores h5{
    background: url(/images/history/texto-descarga-bg-small.png);
    background-size: 100% 100%;
    padding: 10px;
}

.texto__descarga span{
    color: #3320A8;
    font-family: var(--header-font);
    font-size: 11px;
}


/* Responsive */

@media only screen and (min-width: 1650px) {
    .bloque__historia--dos{
        min-height: 900px;
    }
}
@media only screen and (max-width: 1366px) {
        /* Historia 1 */
    
        .bloque__historia--uno{
            background-position: center center;
            padding: 120px 25px;
        }
}
@media only screen and (max-width: 1080px) {

    /* Global historia */
    .content__bloque{
        width: 100%;
        padding: 2em;
        
    }


    .current-idioma{
        justify-content: space-around;
        width: 160px;
        margin: 0;
    }

    .opciones-idioma{
        left: 0;
    }
    .opciones-idioma.open{
        margin: 0;
        left: 0;
    }

    /* Historia 1 */
    
    .bloque__historia--uno{
        background-position: center center;
        padding: 80px 30px;
    }

    /* bloque 2 */

    .bloque__historia--dos{
        min-height: 550px;
    }

    /* Bloque 3 */

    .bloque__historia--tres{
        min-height: 500px;
    }
    .content__bloque.tres{
        min-height: 500px;
    }

    .caption__bloque--3{
        margin-bottom: 0px;
    }

    .bloque__historia--cuatro {
        min-height: 500px;
    }

    .content__bloque.cuatro{
        min-height: auto;
    }

    .bloque__historia--seis{
        min-height: 500px;
    }

    .bloque__historia--siete{
        min-height: 550px;
        padding-top: 20px;
    }

    .content__bloque.seis,
    .content__bloque.siete,
    .content__bloque.ocho{
        min-height: auto;
    }

    .bloque__historia--ocho{
        min-height: 450px;
        padding-top: 30px;
    }
    
}



@media only screen and (max-width: 950px){
    /* Bloque descargar */
    .content__bloque.descarga{
        min-height: auto;
        flex-direction: column;
    }
    .bloque__descarga{
        margin-top: 0;
    }
    .caption_and_qr{
        text-align: center;
    }
    .texto__descarga{
        max-width: 100%;
    }
}
@media only screen and (max-width: 900px) {
    .bloque__historia--cinco .images img{
        max-width: 250px;
        width: 45%;
    }
    .caption__bloque--5{
        gap: 35px;
    }
}


@media only screen and (max-width: 680px) {
    h1{
        text-align: left;
    }
    .caption__bloque--1{
        width: 100%;
    }

    /* Bloque 2 */
    .texto__bloque--2{
        padding: 16px;
    }

    .bloque__historia--tres{
        background-position: right 75% bottom 45%;
        min-height: 350px;
        padding-top: 0;
    }

    /* Bloque 4*/
    
    
    .bloque__historia--cuatro {
        min-height: 400px;
        padding-top: 150px;
        background-position: left 15% bottom 5%;
    }

    .caption__bloque--4{
        margin-bottom: 100px;
    }

    /* Bloque 5 */
    .bloque__historia--cinco{
        min-height: 400px;
        padding: 50px 0;
    }
    .caption__bloque--5{
        min-height: auto;
    }
    .caption__bloque--6{
        margin: 0;
    }
    .bloque__historia--seis {
        min-height: 300px;
        padding: 50px 0 80px;
    }
    .texto__bloque--6{
        width: 100%;
    }


    /* Bloque 7 */
    .bloque__historia--ocho,
    .bloque__historia--siete{
        background-position: right 60% bottom 45%;
        min-height: 350px;
        padding-top: 20px;
    }

    .bloque__historia--ocho{
        background-position: right 30% bottom 10%;
    }

    .caption__bloque--8{
        margin: 50px 0 80px;
    }

    .caption__bloque--7{
        margin: 70px 0 90px;
    }

    /* Descarga */
    .content__bloque.descarga{
        padding: 40px 16px;
    }
    .qr img{
        width: 100%;
        max-width: 164px;
    }
}

@media only screen and (max-width: 570px) {
    .botones_descarga{
        /* Por mientras no pc botones */
        display: block;
    }

}
@media only screen and (max-width: 450px) {
    .bloque__historia--uno{
        padding: 10px 0 40px;
        background-position: right 35% bottom 45%;
    }
    .content__bloque{
        padding: 0 1em 0 0;
    }

    /* Bloque 5 */
    .bloque__historia--cinco .images {
        justify-content: center;
    }
    .bloque__historia--cinco .images img{
        max-width: 250px;
        width: 30%;
    }

    /* Descarga */
    .caption__bloque--descarga img{
        display: block;
        max-width: 95%;
    }


    .content__botones{
        gap: 10px;
        justify-content: space-between;
    }

    .botones_descarga a img{
        width: 165px;
    }
}