* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}

:root{
    --colorLogo: rgb(203,107,58);
    --colorLogoTenue: #e2b38f;
    --colorLogoFuerte: #9f482f;
    --colorGray: rgb(85,85,85);
    --colorWhite: rgb(255,255,255);
    --borderBtn: 20px;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* Background */
.contBack{
    width: 100%;
    height: 100vh;
    background-image: url(../img/background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-attachment: fixed; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.filterBack{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background: linear-gradient(to right, rgb(0, 0, 0, .8) 50%, rgb(255,255,255, .1));
}

.back{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.textBack{
    width: 60%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 5%;
}

.textBack h1{
    font-size: 60px;
    margin-bottom: 5px;
    color: var(--colorLogo);
}

.textBack p{
    font-size: 30px;
    font-weight: 350;
    margin-bottom: 10px;
    color: var(--colorWhite);
}

.textBack span{
    width: 80%;
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 20px;
    color: var(--colorWhite);
}

.textBack a{
    text-decoration: none;
}

.textBack a button{
    width: 200px;
    height: 45px;
    font-size: 18px;
    font-weight: 550;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--borderBtn);
    background-color: var(--colorLogo);
    color: var(--colorWhite);
    transition: .6s;
}

.textBack a button:hover{
    transform: translate(10px);
}

.textBack a button i{
    font-size: 17px;
    margin-left: 5px;
    color: var(--colorWhite);
    transition: .6s;
}

.textBack a button:hover i{
    transform: translate(50px);
}

@media screen and (max-width: 1550px){
    .textBack h1{
        font-size: 45px;
    }
    .textBack p{
        font-size: 24px;
    }
    .textBack span{
        font-size: 15px;
    }
    .textBack a button{
        width: 180px;
        height: 40px;
        font-size: 17px;
    }
    .textBack a button i{
        font-size: 16px;
    }
}

@media screen and (max-width: 1280px){
    .textBack h1{
        font-size: 40px;
    }
    .textBack p{
        font-size: 20px;
    }
    .textBack a button{
        width: 170px;
        height: 37px;
        font-size: 16px;
    }
    .textBack a button i{
        font-size: 15px;
    }
}

@media screen and (max-width: 1150px){
    .textBack h1{
        font-size: 37px;
    }
    .textBack p{
        font-size: 18px;
    }
    .textBack span{
        font-size: 14.5px;
    }
    .textBack a button{
        width: 160px;
        height: 37px;
        font-size: 16px;
    }
    .textBack a button i{
        font-size: 15px;
    }
}

@media screen and (max-width: 950px){
    .filterBack{
        justify-content: center;
        background: rgb(0, 0, 0, .7);
    }
    .back{
        justify-content: center;
    }
    .textBack{
        width: 95%;
        margin-left: 0%;
        align-items: center;
        text-align: center;
    }
}

@media screen and (max-width: 700px){
    .textBack h1{
        font-size: 33px;
    }
    .textBack p{
        font-size: 17px;
    }
    .textBack span{
        font-size: 14px;
    }
    .textBack a button{
        width: 155px;
        height: 35px;
        font-size: 15px;
    }
    .textBack a button i{
        font-size: 14px;
    }
}

@media screen and (max-width: 650px){
    .textBack h1{
        font-size: 30px;
    }
    .textBack p{
        font-size: 16px;
    }
    .textBack span{
        font-size: 13px;
    }
}

@media screen and (max-width: 550px){
    .textBack h1{
        font-size: 27px;
    }
    .textBack p{
        font-size: 15px;
    }
    .textBack span{
        width: 90%;
        font-size: 13px;
    }
}

@media screen and (max-width: 500px){
    .textBack h1{
        font-size: 25px;
    }
    .textBack p{
        font-size: 14px;
    }
    .textBack span{
        width: 95%;
        font-size: 12.5px;
    }
    .textBack a button{
        width: 150px;
        height: 30px;
        font-size: 14px;
    }
    .textBack a button i{
        font-size: 13px;
    }
}

@media screen and (max-width: 450px){
    .textBack h1{
        font-size: 24px;
    }
    .textBack p{
        font-size: 13.5px;
    }
    .textBack span{
        font-size: 12.5px;
    }
}

@media screen and (max-width: 414px){
    .textBack h1{
        font-size: 22px;
    }
    .textBack p{
        font-size: 13px;
    }
    .textBack span{
        font-size: 11.5px;
    }
}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* Nosotros */
.contWe{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-image: url(../img/backgrounnosotros.png); */
    background-position: center;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 30px 0;
}

.we{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imgWe{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
}

.imgWe img{
    width: 70%;
    height: auto;
    object-fit: cover;
}

.textWe{
    width: 50%;
    height: 65vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 10px;
    position: relative;
}

.letras{
    width: 8%;
    height: auto;
    display: flex;
    justify-content: center;
    position: absolute;
    align-items: center;
    right: 35%;
    transform: rotate(50deg);
}

.letras img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: .3;
}

.textWe h2{
    font-size: 45px;
    color: var(--colorLogo);
    margin-bottom: 5px;
}

.textWe p{
    width: 90%;
    font-size: 18px;
    font-weight: 450;
    margin-bottom: 15px;
    color: var(--colorGray);
}

.textWe a{
    text-decoration: none;
}

.textWe a button{
    width: 165px;
    height: 37px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 550;
    overflow: hidden;
    background-color: var(--colorLogo);
    border-radius: var(--borderBtn);
    color: var(--colorWhite);
    transition: .6s;
}

.textWe a button:hover{
    transform: translate(10px);
}

.textWe a button i{
    font-size: 14px;
    margin-left: 3px;
    color: var(--colorWhite);
    transition: .6s;
}

.textWe a button:hover i{
    transform: translate(50px);
}


@media screen and (max-width: 1550px){
    .textWe h2{
        font-size: 40px;
    }
    .textWe p{
        font-size: 17px;
    }
    .textWe{
        height: auto;
    }
}

@media screen and (max-width: 1280px){
    .textWe h2{
        font-size: 34px;
    }
    .textWe p{
        width: 90%;
        font-size: 16px;
    }
}

@media screen and (max-width: 1150px){
    .textWe h2{
        font-size: 32px;
    }
    .textWe p{
        width: 95%;
        font-size: 15.5px;
    }
}

@media screen and (max-width: 1100px){
    .textWe h2{
        font-size: 27px;
    }
    .textWe p{
        font-size: 15px;
    }
    .textWe a button{
        height: 35px;
    }
}

@media screen and (max-width: 1000px){
    .textWe h2{
        font-size: 25px;
    }
    .textWe p{
        font-size: 14.5px;
    }
    .textWe a button{
        height: 35px;
    }
}

@media screen and (max-width: 950px){
    .textWe h2{
        font-size: 23px;
    }
    .textWe p{
        width: 100%;
        font-size: 14px;
    }
    .textWe a button{
        width: 160px;
        height: 33px;
    }
}

@media screen and (max-width: 850px){
    .we{
        flex-direction: column;
    }
    .imgWe{
        width: 65%;
        order: 1;
    }
    .textWe{
        width: 80%;
        align-items: center;
        text-align: center;
    }
    .textWe h2{
        font-size: 25px;
    }
    .textWe p{
        width: 95%;
        font-size: 15.5px;
    }
}

@media screen and (max-width: 768px){
    .we{
        flex-direction: column;
    }
    .imgWe{
        width: 75%;
    }
    .textWe{
        width: 90%;
    }
}

@media screen and (max-width: 700px){
    .imgWe{
        width: 75%;
    }
    .textWe{
        width: 95%;
    }
}

@media screen and (max-width: 650px){
    .imgWe{
        width: 85%;
    }
    .textWe{
        width: 100%;
    }
}

@media screen and (max-width: 550px){
    .textWe h2{
        font-size: 24px;
    }
    .textWe p{
        width: 96%;
        font-size: 14px;
    }
}

@media screen and (max-width: 500px){
    .imgWe{
        width: 90%;
    }
    .textWe h2{
        font-size: 24px;
    }
    .textWe p{
        font-size: 13.5px;
    }
    .textWe a button{
        width: 155px;
        height: 30px;
        font-size: 14px;
    }
    .textWe a button i{
        font-size: 13px;
    }
}

@media screen and (max-width: 450px){
    .imgWe{
        width: 90%;
    }
    .textWe h2{
        font-size: 23px;
    }
    .textWe p{
        font-size: 13px;
    }
}

@media screen and (max-width: 375px){
    .imgWe{
        width: 95%;
    }
    .textWe h2{
        font-size: 22px;
    }
    .textWe p{
        font-size: 12px;
    }
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* VisualRest */
.contVisualRest{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.containerFilter2{
    width: 100%;
    height: 100%;
    background-image: url(../img/visualrest.jpg);
    background-size: cover;
    background-attachment: fixed;
}

.filter2{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 170px 0;
    background: rgba(0,0,0,.4);
}

.titleSection{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.titleSection h3{
    text-align: center;
    color: var(--colorWhite);
    font-size: 35px;
}

.btnSection{
    margin-bottom: 30px;
    margin-top: 20px;
}

.btnSection a{
    text-decoration: none;
}

.btnSection a button{
    width: 160px;
    height: 50px;
    font-size: 16px;
    font-weight: 600;
    background-color: transparent;
    color: var(--colorWhite);
    border: 1px solid var(--colorWhite);
    border-radius: var(--borderBtn);
    cursor: pointer;
    transition: .6s;
}

.btnSection a button:hover{
    transform: translateY(-10px);
}

@media only screen and (max-width: 1500px){
    .titleSection h3{
        font-size: 30px;
    }
}

@media only screen and (max-width: 1280px){
    .titleSection h3{
        font-size: 25px;
    }
    .btnSection a button{
        width: 130px;
        height: 40px;
        font-size: 13px;
    }
}

@media only screen and (max-width: 1000px){
    .titleSection h3{
        font-size: 23px;
    }
}

@media only screen and (max-width: 850px){
    .titleSection h3{
        font-size: 20px;
    }
}

@media only screen and (max-width: 768px){
    .titleSection h3{
        font-size: 18px;
    }
}

@media only screen and (max-width: 650px){
    .titleSection h3{
        width: 100%;
        font-size: 25px;
    }
    .filter2{
        padding: 160px 0;
    }
}

@media only screen and (max-width: 500px){
    .titleSection h3{
        font-size: 20px;
    }
    .filter2{
        padding: 140px 0;
    }
}

@media only screen and (max-width: 450px){
    .titleSection h3{
        font-size: 18px;
    }
    .filter2{
        padding: 120px 0;
    }
    .btnSection a button{
        width: 130px;
        height: 35px;
        font-size: 12.5px;
    }
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* Testimonios */
.contTestimonios{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    /* background-color: rgb(245, 245, 245); */
}

.titleTesti h4{
    font-size: 60px;
    margin: 5px;
    color: var(--colorLogo);
}

.testimonios{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.targetsTestimonios{
    width: 45%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    border-top-left-radius: 120px;
    border-bottom-left-radius: 120px;
    border-top-right-radius: var(--borderBtn);
    border-bottom-right-radius: var(--borderBtn);
    background-color: var(--colorLogo);
}

.targetsTestimonios img{
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 50%;
}

.textTesti{
    width: 100%;
    height: 220px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--colorWhite);
}

.textTesti h4{
    font-size: 25px;
}

.starts i{
    font-size: 20px;
    margin: 10px 0;
    color: var(--colorWhite);
}

.textTesti p{
    width: 80%;
    margin-bottom: 10px;
    font-size: 16px;
}

/* .textTesti h3{
    font-size: 20px;
} */

.casosExito{
    width: 100%;
    height: auto;
    padding: 50px 0;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(235, 235, 235);
}

.exitoTitle{
    width: 100%;
    height: auto;
    text-align: center;
    margin-bottom: 10px;
}

.exitoTitle h4{
    font-size: 45px;
    color: var(--colorWhite);
}

.exito{
    width: 90%;
    height: auto;
    display: flex;
    justify-content:space-around;
    align-items: center;
}

.imgExito{
    width: 40%;
    height: 450px;
    margin: 10px;
}

.imgExito img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    box-shadow:
    2.7px 2.2px 1.9px rgba(0, 0, 0, 0.034),
    6.5px 5.4px 4.5px rgba(0, 0, 0, 0.048),
    10px 10px 8px rgba(0, 0, 0, 0.06),
    21.7px 18.1px 15px rgba(0, 0, 0, 0.072),
    30px 30px 25px rgba(0, 0, 0, 0.086),
    80px 70px 65px rgba(0, 0, 0, 0.12);
}

@media only screen and (max-width: 1700px){
    .targetsTestimonios img{
        width: 200px;
        height: 200px;
    }
    
    .textTesti{
        width: 100%;
        height: 200px;
    }
    .textTesti h4{
        font-size: 22px;
    }
    
    .starts i{
        font-size: 17px;
    }
    
    .textTesti p{
        width: 80%;
        font-size: 13px;
    }
    
    /* .textTesti h3{
        font-size: 19px;
    } */
}

@media only screen and (max-width: 1500px){
    .targetsTestimonios img{
        width: 200px;
        height: 200px;
    }
    
    .textTesti{
        width: 100%;
        height: 200px;
    }
    .textTesti h4{
        font-size: 20px;
    }
    
    .starts i{
        font-size: 15px;
    }
    
    .textTesti p{
        width: 80%;
        font-size: 14px;
    }
    
    /* .textTesti h3{
        font-size: 18px;
    } */
}

@media only screen and (max-width: 1350px){
    .titleTesti h4{
        font-size: 55px;
    }
    .targetsTestimonios img{
        width: 200px;
        height: 200px;
    }
    
    .textTesti{
        width: 100%;
        height: 200px;
    }
    .textTesti h4{
        font-size: 19px;
    }
    
    .starts i{
        font-size: 14px;
    }
    
    .textTesti p{
        width: 80%;
        font-size: 12px;
    }
    .imgExito{
        width: 45%;
        height: 400px;
    }
    
    /* .textTesti h3{
        font-size: 17px;
    } */
}

@media only screen and (max-width: 1153px){
    .titleTesti h4{
        font-size: 50px;
    }
    .targetsTestimonios img{
        width: 180px;
        height: 180px;
    }
    
    .textTesti{
        width: 100%;
        height: 180px;
    }
    .textTesti h4{
        font-size: 15px;
    }
    
    .starts i{
        font-size: 13px;
    }
    
    .textTesti p{
        width: 90%;
        font-size: 10px;
    }
    .imgExito img{
        object-fit: cover;
    }
    
    /* .textTesti h3{
        font-size: 15px;
    } */
}

@media only screen and (max-width: 1000px){
    .titleTesti h4{
        font-size: 45px;
    }
    .targetsTestimonios img{
        width: 180px;
        height: 180px;
    }
    
    .textTesti{
        width: 100%;
        height: 180px;
    }
    .textTesti h4{
        font-size: 14px;
    }
    
    .starts i{
        font-size: 12px;
        margin: 5px 0;
    }
    
    .textTesti p{
        width: 95%;
        font-size: 9px;
        font-weight: 450;
        margin-bottom: 5px;
    }
    .exito{
        width: 95%;
    }
    .imgExito{
        width: 50%;
    }
    
    /* .textTesti h3{
        font-size: 14px;
    } */
}

@media only screen and (max-width: 941px){
    .targetsTestimonios{
        width: 65%;
    }
    .targetsTestimonios img{
        width: 150px;
        height: 150px;
    }
    .textTesti{
        width: 100%;
        height: 150px;
    }
    .imgExito{
        height: 350px;
    }
}

/* Celulares */

@media only screen and (max-width: 768px){
    .imgExito{
        height: 300px;
    }
}
@media only screen and (max-width: 689px){
    .targetsTestimonios{
        width: 75%;
    }
}

@media only screen and (max-width: 600px){
    .targetsTestimonios{
        width: 85%;
    }
    .imgExito{
        width: 80%;
        height: 250px;
    }
    .exito{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

@media only screen and (max-width: 535px){
    .targetsTestimonios{
        width: 90%;
    }
}

@media only screen and (max-width: 501px){
    .targetsTestimonios{
        width: 100%;
    }
    .textTesti h4{
        font-size: 13px;
    }
    .textTesti p{
        width: 90%;
        font-size: 8px;
        font-weight: 450;
    }
    /* .textTesti h3{
        font-size: 13px;
    } */
}

@media only screen and (max-width: 414px){
    .textTesti h4{
        font-size: 11px;
    }
    /* .textTesti h3{
        font-size: 12px;
    } */
}

@media only screen and (max-width: 360px){
    .textTesti h4{
        font-size: 9px;
    }
    .textTesti p{
        width: 100%;
        font-size: 7.5px;
    }
    .starts i{
        font-size: 10px;
    }
    /* .textTesti h3{
        font-size: 10px;
    } */
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*Productos*/
.text_c_naranja
{
    color: var(--colorLogo);
}
.text_c_gris
{
    color: var(--colorGray);
}

.fs_7
{
    font-size: 0.8rem;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* Beneficios */
.contProduct{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px;
    position: relative;
}

.contProduct h6{
    font-size: 55px;
    color: var(--colorLogo);
    margin-bottom: 10px;
}

/* .contProduct h6 span{
    font-size: 43px;
    background: linear-gradient(45deg, var(--colorSecundary) 40%, var(--colorLogo) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
} */

.productos{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 350px;
    gap: 20px;
    padding: 0 20px;
}

.itemProduct{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--borderBtn);
    box-shadow: 0.7px 0.7px 2.7px rgba(0, 0, 0, 0.022),
    1.7px 1.7px 6.9px rgba(0, 0, 0, 0.031),
    3.5px 3.5px 14.2px rgba(0, 0, 0, 0.039),
    7.3px 7.3px 29.2px rgba(0, 0, 0, 0.048),
    20px 20px 80px rgba(0, 0, 0, 0.07);
}

.imgProduct{
    width: 100%;
    height: 55%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--borderBtn);
}

.imgProduct img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--borderBtn);
}

.textProduct{
    width: 98%;
    height: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.textProduct h6{
    font-size: 30px;
    color: var(--colorLogo);
    margin-bottom: 0;
}

.textProduct p{
    font-size: 24px;
    font-weight: 550;
    color: var(--colorLogo);
    margin-bottom: 10px;
}

.textProduct button{
    width: 175px;
    height: 37px;
    border: none;
    cursor: pointer;
    font-size: 19px;
    font-weight: 500;
    overflow: hidden;
    color: var(--colorWhite);
    background-color: var(--colorLogo);
    border-radius: var(--borderBtn);
    transition: .6s;
}

.textProduct button:hover{
    transform: translate(15px);
}

.textProduct button i{
    font-size: 18px;
    margin-left: 5px;
    color: var(--colorWhite);
}

.textProduct button:hover i {
    animation: move 1.3s ease;
}

#currencySwitch{
    width: 170px;
    height: 35px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--colorWhite);
    background-color: var(--colorLogo);
    border-radius: var(--borderBtn);
    margin-bottom: 25px;
}


@keyframes move {
    0% {
        transform: rotate(0) translate(0, 0);
    }
    50% {
        transform: rotate(360deg) translate(0, 0);
    }
    100% {
        transform: rotate(360deg) translate(70px, 0);
    }
}

.imgInfoServ0,
.imgInfoServ1,
.imgInfoServ2,
.imgInfoServ3,
.imgInfoServ4{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0; 
    position: fixed;
    background-color: rgba(0, 0, 0, 0.2); 
    backdrop-filter: blur(5px);
    z-index: 8;
    display: none;
}

.itemInfoServ{
    width: 70%;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    position: relative;
    border-radius: 10px;
    margin-top: 80px;
    padding: 20px;
}

.pInfoServ2{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.pInfoServ2 h6{
    font-size: 22px;
    color: var(--colorLogoFuerte);
}

.pInfoServ2 p{
    font-size: 17px;
    color: var(--colorGray);
}

.btnServ{
    top: 20px;
    right: 20px;
    position: absolute;
    font-size: 16px;
    font-weight: 700;
    color: var(--colorWhite);
    background-color: var(--colorLogo);
    border-radius: 50%;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    transition: 0.6s;
}

.btnServ:hover{
    background-color: var(--colorLogoTenue);
}

.itemInfoServ p,
.itemInfoServ2 p{
    width: 85%;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 450;
    color: var(--colorGray);
}

@media screen and (max-width: 1200px){
    .contProduct h6{
        font-size: 45px;
    }
    .contProduct h6 span{
        font-size: 38px;
    }
    .textProduct h6{
        font-size: 25px;
    }
    .itemInfoServ{
        height: 50vh;
        margin-top: 0;
    }
}

@media screen and (max-width: 1100px){
    .itemInfoServ{
        width: 85%;
        height: 40vh;
    }
}

@media screen and (max-width: 950px){
    #currencySwitch{
        width: 160px;
        height: 33px;
    }
}

@media screen and (max-width: 850px){
    .textProduct p{
        font-size: 22px;
    }
}

@media screen and (max-width: 768px){
    .productos{
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: 280px;
        padding: 0 10%;
    }
    .textProduct button{
        width: 175px;
        height: 30px;
        font-size: 18px;
    }
    .textProduct button i{
        font-size: 17px;
    }
}

@media screen and (max-width: 700px){
    .productos{
        padding: 0 5%;
    }
    .itemInfoServ p,
    .itemInfoServ2 p{
        width: 90%;
        font-size: 20px;
    }
    .pInfoServ2 i{
        font-size: 11px;
    }
}

@media screen and (max-width: 650px){
    .itemInfoServ{
        width: 95%;
        height: 60vh;
    }
    .itemInfoServ p,
    .itemInfoServ2 p{
        width: 95%;
        font-size: 20px;
    }
}

@media screen and (max-width: 550px){
    .itemInfoServ p,
    .itemInfoServ2 p{
        width: 95%;
        font-size: 19px;
    }
    .pInfoServ2 i{
        font-size: 10px;
        margin-top: 8px;
    }
}

@media screen and (max-width: 500px){
    .itemInfoServ p,
    .itemInfoServ2 p{
        font-size: 18px;
    }
    .pInfoServ2 i{
        font-size: 9px;
    }
    .itemInfoServ{
        height: 50vh;
    }
}

@media screen and (max-width: 450px){
    .productos{
        grid-auto-rows: 300px;
    }
    .contProduct h6{
        font-size: 35px;
    }
    .textProduct h6{
        font-size: 24px;
    }
    .textProduct a button{
        width: 160px;
        height: 30px;
        font-size: 16px;
    }
    .textProduct a button i{
        font-size: 15px;
    }
    .btnServ{
        font-size: 15px;
        padding: 8px 13px;
        top: 15px;
        right: 15px;
    }
    .textProduct p{
        font-size: 19.5px;
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 414px){
    .productos{
        grid-auto-rows: 300px;
    }
    .contProduct h6{
        font-size: 33px;
    }
    .textProduct a{
        margin-top: 0px;
    }
    .textProduct h6{
        font-size: 24px;
    }
    .textProduct a button{
        width: 150px;
        height: 20px;
        font-size: 15px;
    }
    .textProduct a button i{
        font-size: 14px;
    }
}

@media screen and (max-width: 375px){
    .itemInfoServ p,
    .itemInfoServ2 p{
        font-size: 16px;
    }
    .pInfoServ2 i{
        font-size: 8px;
    }
    .itemInfoServ{
        height: 55vh;
    }
    .btnServ{
        font-size: 14px;
        padding: 7px 12px;
        top: 15px;
        right: 15px;
    }
    .textProduct p{
        font-size: 18px;
    }
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* Extras */
.contEx{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding:50px 0;
}

.titleEx{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.titleEx h6{
    font-size: 55px;
    color: var(--colorLogoFuerte);
    margin-bottom: 10px;
}

.extra{
    width: 95%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 15px;
}

.targetExt{
    width: 100%;
    height: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items:flex-start;
    border: 1px solid rgb(210,210,210);
    border-radius: 10px;
}

.targetExt h6{
    font-size: 22px;
    color: var(--colorLogo);
    margin-bottom: 5px;
}

.targetExt ul li{
    font-size: 17px;
    font-weight: 450;
    color: var(--colorGray);
    margin-left: 20px;
}

@media screen and (max-width: 1100px){
    .titleEx h6{
        font-size: 45px;
    }
    .targetExt h6{
        font-size: 21px;
    }
    .targetExt ul li{
        font-size: 17px;
    }
}
@media screen and (max-width: 850px){
    .titleEx h6{
        font-size: 40px;
    }
    .targetExt h6{
        font-size: 20px;
    }
    .targetExt ul li{
        font-size: 16.5px;
    }
}
@media screen and (max-width: 768px){
    .extra{
        grid-template-columns: repeat(3, 1fr);
    }
    .titleEx{
        text-align: center;
        align-items: center;
    }
    .titleEx h6{
        width: 95%;
        font-size: 40px;
    }
    .targetExt h6{
        font-size: 20px;
    }
    .targetExt ul li{
        font-size: 16.5px;
    }
}
@media screen and (max-width: 650px){
    .extra{
        grid-template-columns: repeat(2, 1fr);
    }
    .titleEx h6{
        font-size: 35px;
    }
    .targetExt h6{
        font-size: 19px;
    }
    .targetExt ul li{
        font-size: 16px;
    }
}
@media screen and (max-width: 450px){
    .titleEx h6{
        font-size: 33px;
    }
    .targetExt h6{
        font-size: 18.5px;
    }
    .targetExt ul li{
        font-size: 15.5px;
    }
}
@media screen and (max-width: 375px){
    .titleEx h6{
        font-size: 30px;
    }
    .targetExt h6{
        font-size: 18px;
    }
    .targetExt ul li{
        font-size: 15px;
    }
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* Promociones */
/* .contPromo{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--colorLogo);
    margin-top: 30px;
}

.promocion{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imgPromo{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imgPromo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.textPromo{
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.textPromo h6{
    font-size: 55px;
    color: var(--colorWhite);
    margin-bottom: 10px;
}

.textPromo p{
    font-size: 40px;
    font-weight: 500;
    color: var(--colorWhite);
}

.textPromo a{
    text-decoration: none;
    margin-top: 15px;
}

.textPromo a button{
    width: 190px;
    height: 35px;
    border: none;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    color: var(--colorLogo);
    background-color: var(--colorWhite);
    border-radius: var(--borderBtn);
    transition: .6s;
    overflow: hidden;
}

.textPromo a button:hover{
    transform: translate(10px);
}

.textPromo a button i{
    font-size: 16px;
    margin-left: 5px;
    color: var(--colorLogo);
    transition: .6s;
}

.textPromo a button:hover i{
    transform: translate(60px);
}

@media screen and (max-width: 1150px){
    .textPromo h6{
        font-size: 40px;
    }
    .textPromo p{
        font-size: 35px;
    }
}
@media screen and (max-width: 950px){
    .textPromo h6{
        font-size: 37px;
    }
    .textPromo p{
        font-size: 27px;
    }
}

@media screen and (max-width: 850px){
    .promocion{
        flex-direction: column;
    }
    .imgPromo{
        width: 100%;
        order: 1;
    }
    .textPromo{
        width: 80%;
        margin: 10px 0 20px 0;
    }
}

@media screen and (max-width: 550px){
    .textPromo h6{
        font-size: 35px;
    }
    .textPromo p{
        font-size: 25px;
    }
    .textPromo{
        width: 95%;
        margin: 10px 0 20px 0;
    }
}

@media screen and (max-width: 450px){
    .textPromo h6{
        font-size: 33px;
    }
    .textPromo p{
        font-size: 23px;
    }
    .textPromo a button{
        width: 190px;
        height: 32px;
        font-size: 16px;
    }
    .textPromo a button i{
        font-size: 15px;
    }
}

@media screen and (max-width: 414px){
    .textPromo h6{
        font-size: 30px;
    }
    .textPromo p{
        font-size: 20px;
    }
}

@media screen and (max-width: 375px){
    .textPromo h6{
        font-size: 27px;
    }
    .textPromo p{
        font-size: 17px;
    }
} */