/*Generals*/
*{padding:0;margin:0;box-sizing: border-box;font-family:Poppins, sans-serif;scroll-behavior: smooth;}
body{background-color:var(--backgroundLight);color:var(--black)}

/*SCROOL COLOR*/
body::-webkit-scrollbar{
    width:10px;
    
}

body::-webkit-scrollbar-thumb{
    background:var(--silverLight);
    border-radius:5px;
    transition:all ease .3s;
}

body::-webkit-scrollbar-thumb:hover{
    background:var(--principal);
}

body::-webkit-scrollbar-track{
    background: var(--white);   
}



.container{
    max-width:1350px;
    margin:auto;
    background-color:var(--white);
    background-color: transparent;
    padding:10px 15px;
    padding-bottom:40px;
    position: relative;
}


.prevHeader{
    width:100%;
    height:auto;
    display:flex;
    justify-content:center;
    align-items: center;
    background-color:var(--principalHover);
}

.containerPrevHeader{
    width:1300px;
    height:auto;
    color:var(--white);
    display:flex;
    justify-content:end;
    align-items: center;
    padding:10px;
    gap:5px
}

.containerPrevHeader p{
    padding-right:5px;
    font-size:13px;
    text-transform:uppercase;
}
.containerPrevHeader a{
    width:30px;
    height:30px;
    border-radius:50%;
    background-color:var(--secundary);
    color:var(--white);
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    font-size:13px;
}

section{
    padding:40px 10px;
    padding-bottom:50px;
}
.topController {
    margin-top:90px;
}

.titleStyle h1, .titleStyle h2{
    font-size:35px;
    color:var(--black);
    text-align:center;
    padding:100px 0px;
    padding-bottom:25px;
}

.titleStyle h1 span, .titleStyle h2 span{
    font-size:35px;
    color:var(--secundary);
}


.flexMoreStars{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:50px;
    flex-wrap:wrap;
    padding-top:20px;
}

.flexMoreStar{
    display:flex;
    justify-content:center;
    align-items:center;
}

.flexMoreStar .itemMoreStar{
    width:550px;
    height:auto;
    background-color:#FFF4F4;
    border-radius:25px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:15px;
    gap:15px;
}

.otherColorTwo{
    background-color: #F6FBFD !important;
}

.flexMoreStar .itemMoreStar .controlImgMoreStar{
    width:220px;
    border-radius:10px;
    height:220px;
    overflow:hidden;
}

.flexMoreStar .itemMoreStar .controlImgMoreStar img{
    width:100%;
    height:100%;
    object-fit: cover;
}

.flexMoreStar .itemMoreStar .txtMoreStar{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    width:330px;
}

.flexMoreStar .itemMoreStar .txtMoreStar h3{
    color:var(--black);
    padding:20px 10px;
    font-weight:500;
    font-size:25px;
    line-height:30px;
    text-align:center;
}

.flexMoreStar .itemMoreStar .txtMoreStar a {
    text-decoration:none;
    color:var(--white);
    cursor:pointer;
}

.flexMoreStar .itemMoreStar .txtMoreStar a button{
    padding:15px 20px;
    background-color:rgb(13, 204, 86);
    color:var(--white);
    border-radius:10px;
    font-size:15px;
    outline:none;
    border:none;
    cursor:pointer;
    transition:all ease .3s;
}

.flexMoreStar .itemMoreStar .txtMoreStar a button:hover{
    background-color:rgb(7, 240, 96);
}


.bg-ImageWeb{
    width:100%;
    height:380px;
    background-color:var(--silverLight);
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment: fixed;
    margin-top:-10px;
}

.flexContentBg{
    display:flex;
    justify-content:end;
    align-items:center;
    width:100%;
    height:100%;
    flex-wrap:wrap;
    background-color:#fd1919cb;
}

.maxWidthContentFlex{
    width:100%;
    max-width:1200px;
    padding:20px 10px;
    margin: auto;
    display:flex;
    justify-content:end;
    align-items:center;
}

.okMax{
    width:100%;
    max-width:700px;
    color:var(--white);
}

.okMax h4{
    font-size:35px; 
    padding-bottom:5px;
}

.okMax p{
    font-size:21px;  
    margin-bottom:20px;  
}


.okMax a {
    text-decoration:none;
    color:var(--white);
    cursor:pointer;
}

.okMax a button{
    padding:12px 50px;
    background-color:var(--secundary);
    color:var(--white);
    border-radius:10px;
    font-size:16px;
    outline:none;
    border:none;
    cursor:pointer;
    transition:all ease .3s;
}

.okMax a button:hover{
    background-color:var(--black);
}


.okMax img{
    width:auto;
 }


/* VALORES */

.containerFlexValoresFiestra{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    gap:20px;
    flex-wrap:wrap;
    max-width:1250px;
    margin:auto;
}

.valorContainer{
    width:250px;
    height:auto;
    min-height:120px;
    background-color:var(--white);
    color:var(--black);
    text-align:center;
    display:flex;
    justify-content:center;
    border-radius:20px;
    flex-wrap:wrap;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin-bottom:20px;
    padding:20px;
    transition:all ease .3s;
}
.valorContainer:hover{
    background-color:var(--principal);
}

.valorContainer:hover h3,.valorContainer:hover p{
    color:var(--white);
}
.valorContainer:hover .containerImgVal img{
    border-radius:15px;
}

.valorContainer .containerImgVal{
    width:100px;
    transition:all ease .3s;
    height:100px;
}

.valorContainer .containerImgVal img{
    width:100%;
    height:100%;
    transition:all ease .3s;
    border-radius:25px;
}

.valorContainer h3{
    width:100%;
    padding-top:12px;
    font-size:21px;
    line-height:25px;
    color:var(--principal);
    font-weight:600;
}

.valorContainer p{
    width:100%;
    padding-top:20px;
    font-size:12px;
    font-weight:400;
    color:var(--silverDark);
}


/* -- MARCAS -- */
.containerImgMarca{
    width:230px;
    padding:10px;
    height:auto;
}

.containerImgCliente{
    width:250px;
    padding:10px;
    height:auto;
}
.containerImgCliente img{
    width:100%;
}

.containerImgMarca img{
    width:100%;
    height:100%;mix-blend-mode: multiply;
}

.containerImgItem{
    width:150px;
    height:80px;
}

.containerImgItem img{
    width:100%;
    height:100%;
}

.containerFlecha{
    display:flex;
    justify-content:center;
    align-content: center;
}
.containerFlecha img{
    width:52%;
    padding:20px 10px;
}












/* REDICCION */

.goBack {
    width: 100%;
    padding-top:140px;
    border-bottom: 1px solid #f8f8f8;
}
.goBack a{
    text-decoration:none;
}

.goBack p {
    font-size: 12px;
    color: var(--silverDark);
}

.goBack p i{
    font-size: 10px;
    margin-right:5px;
}


@media(max-width:768px){
    .flexMoreStar .itemMoreStar{
        width:auto;
        padding:15px 10px;
        flex-wrap:wrap;
    }
    .flexMoreStar .itemMoreStar .txtMoreStar{
        width:100%;
    }
    .flexMoreStar .itemMoreStar .txtMoreStar h3{
        display:block;
        width:100%;
    }

    .prevHeader{
        display:none;
    }   
    
    .inverseColor{ 
        margin-top:0px;
    }

    .topController {
        margin-top:30px;
    }


.goBack {
    padding-top:70px;
}



    /* -- MARCAS -- */
.containerImgMarca{
    width:90px;
    height:50px;
}
.containerImgItem{
    width:80px;
    height:40px;
}

.containerFlecha img{
    width:95%;
}

}



@media(max-width:400px){
    .okMax{
        text-align:center;
    }
    .okMax h4{
        font-size:24px; 
    }
    
    .okMax p{
        font-size:15px;  
        margin-bottom:20px;  
    }    

    .okMax img{
        width:200px;
    }


}