.greenText{
    color: #3DAE2B
}
.greenBack {
    background-color: #3DAE2B
}

.blueText{
    color: #003764
}
.blueBack {
    background-color: #003764
}

.greyOText{
    color: #666666
}
.greyOBack {
    background-color: #666666
}

/**/
.backChangeColor{
    transition-duration: .3s
}
.cntntCorne:has(.greenBackUnder.active) .backChangeColor {
    background-color: #3DAE2B
}
.cntntCorne:has(.greenBackUnder.active) .backChangeColor .cintilloBanner > div:has(img) img:last-child {
    z-index: 0;
    opacity: 0
}
.cntntCorne:has(.blueBackUnder.active) .backChangeColor {
    background-color: #003764
}
.cntntCorne:has(.blueBackUnder.active) .backChangeColor .cintilloBanner > div:has(img) img:last-child {
    z-index: 2;
    opacity: 1
}
/**/
.cintilloBanner {
    padding: .6rem .6rem .7rem;
    display: flex;
    justify-content: space-between;
    color: #FFFFFF;
    flex-wrap: wrap
}

.cintilloBanner > div{
    display: flex; 
    font-size: 1.3rem;
    font-weight: 600;
    padding: .3rem 0;
    width: 100%;
    align-items: center

}

.cintilloBanner > div:has(img) div{
    padding: 0 1rem 0 0
}

.cintilloBanner img{
    width: 2.2rem;
    transition-duration: .4s
}

.cintilloBanner > div:has(img) img{
    position: relative;
}
.cintilloBanner > div:has(img) img:last-child {
    margin-left: -2.2rem
}

    @media(min-width: 576px) {
        .cintilloBanner {
        flex-wrap: nowrap
    }
    .cintilloBanner > div {
        font-size: 1rem;
        padding: 0;
        width: fit-content
    }
}

@media(min-width: 768px){
    .cintilloBanner > div {
        font-size: 1.3rem;
        
    }
    .cintilloBanner > div:has(img) div {
        padding: 0 1.5rem 0 0
    }
    .cintilloBanner img {
        width: 3.2rem
    }
    .cintilloBanner > div:has(img) img:last-child {
        margin-left: -3.2rem
    }
}
@media(min-width: 992px){
    .cintilloBanner > div {
        font-size: 1.8rem;
    }
}
@media(min-width: 1200px){
    .cintilloBanner > div {
        font-size: 2.4rem;
    }
}

/*cntntCardSection*/

.cntntCardSection{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap

}

.cntntCardSection > div{
    width: calc(100% * .47)
}

.cardItem{
    height: 14rem;
    border-radius: .5cm;
    border: .15rem solid #00000066;
    position: relative;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 3rem
}

.cardItem .imgCardItemCntnt{
    padding: 0 0 0.7rem
}
.cardItem .imgCardItemCntnt img{
    width: 4rem
}

.cardItem span {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.1;
    color: #003763
}

.btnProdsVer {
    position: absolute;
    bottom: -1.4rem;
    margin: 0 auto;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 80%;
    background-color: #003763;
    color: #FFFFFF;
    border-radius: 6rem;
    padding: .7rem 0 .8rem;
    font-size: 1rem;
    cursor: pointer
}

@media(min-width: 576px){
    .cntntCardSection > div {
        width: calc(100% * .45)
    }
    .cardItem span {
        font-size: 1.5rem;
    }
    .btnProdsVer {
        font-size: 1.3rem;
    }
    .cardItem {
        height: 18rem;
    }
    .cardItem .imgCardItemCntnt img {
        width: 5rem
    }
}

@media(min-width: 992px){
    .cntntCardSection > div {
        width: calc(100% * .35)
    }
    .cardItem span {
        font-size: 1.8rem;
    }
}
@media(min-width: 1200px){
    .cntntCardSection {
        justify-content: space-between;
        flex-wrap: nowrap
    }
    .cntntCardSection > div {
        width: calc(100% * .23);
    }

    .cardItem{
        margin-bottom: 0
    }
}

/*sectionProdsSelected*/

.sizeTitle, #titleProdsUps {
    font-size: 1.6rem
}

.sectionProdsSelected{
    padding: 1.5rem 0 
}

#titleProdsUps{
    border-bottom: .15rem solid;
    padding: .7rem 0;
    font-weight: 600
}

.femenina {
    color: #ec74b5;
    border-color: #ec74b5;
}
.articulaciones {
    color: #fda76f;
    border-color: #fda76f;
}
.urologica {
    color: #a4cdee;
    border-color: #a4cdee;
}
.corazon {
    color: #f67c86;
    border-color: #f67c86;
}
/*formasPagoSection*/
.formasPagoSection {
    padding: 3rem 0
}
.formasPagoPresentation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly
}

.itemPago {
    width: calc(100% * .34);
    display: flex; 
    justify-content:center;
    margin-bottom: 2rem
}

.itemPago > div{
    width: fit-content;

}

.cntntImgs{
    height: 4.2rem;
    text-align: center;
}
.cntntImgs img{
    height: 100%;
    width: 9rem;
}

.textPago{
    padding: 1rem 0 0;
    text-align: center
}

.titlePago {
    color: #003763;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2
}

.titlePago > span{
    font-size: 1.2rem;
    font-weight: 500;
}
@media(min-width: 576px){
    .cntntImgs {
        height: 4.5rem;
    }

    .cntntImgs img {
        width: 10rem;
    }

    .titlePago {
        font-size: 1.4rem;
    }

    .titlePago > span {
        font-size: 1.3rem;
    }
    .sizeTitle, #titleProdsUps {
        font-size: 1.8rem
    }
}

@media(min-width: 640px){
    .formasPagoPresentation {
        display: flex;
        flex-wrap: nowrap
    }
    .itemPago {
        width: calc(100% * .25);
        margin-bottom: 0
    }
    .cntntImgs {
        height: 4.4rem;
    }

    .cntntImgs img {
        width: 9.5rem;
    }
    .titlePago {
        font-size: 1.35rem;
    }

    .titlePago > span {
        font-size: 1.25rem;
    }
    .sizeTitle, #titleProdsUps {
        font-size: 2rem
    }
}
@media(min-width: 992px){
    .cntntImgs {
        height: 5rem;
    }

    .cntntImgs img {
        width: 15rem;
    }
    .titlePago {
        font-size: 1.8rem;
    }

    .titlePago > span {
        font-size: 1.6rem;
    }
    .sizeTitle, #titleProdsUps {
        font-size: 2.2rem
    }
}

/*Datos Contacto*/
.cntntDataCorne {
    position: relative;
    width: 100%;
}

.cntntDataCorne div{
    top: 0;
    height: 3.2rem;
    border-start-end-radius: 6rem;
    border-end-end-radius: 6rem;
    padding: .5rem 1rem;
    align-items: center
}

.cntntDataCorne div:first-child {
    width: calc(100% * .57);
    left: 0;
    background: #3DAE2B;
    color: #FFFFFF;
    z-index: 3;
    font-size: 1.6rem
}
.cntntDataCorne div:nth-of-type(2) {
    width: calc(100% * .75);
    left: 25%;
    background: #aadba2;
    z-index: 2;
    padding-right: 1.5rem;
    font-size: 1.7rem
}
.cntntDataCorne div:nth-of-type(2) img {
   margin-right: 1rem;
   width: 1.6rem
}

.cntntDataCorne div:last-child {
    width: 100%;
    right: 0;
    background: #d9efd5;
    font-size: 1.5rem;
    padding-right: 1.2rem;
}
.cntntDataCorne div:last-child img {
    margin-right: .7rem;
    width: 2rem
}

.destacadasPromo {
    background-color: #d9efd5;
    padding: 2rem 0
}

.titleDestacadas {
    color: #3DAE2B;
    font-weight: 600;
    border-bottom: .2rem solid #3DAE2B
}

.titleFormasPago {
    color: #003763;
    font-size: 2.4rem;
    font-weight: 600;
    text-align: center
}

.titleFormasPago span {
    color: #3DAE2B
}

@media(min-width: 576px){
    .cntntDataCorne div {
        position: absolute;
        height: 100%;
    }
    .cntntDataCorne {
        height: 3.2rem;
    }
        .cntntDataCorne div:first-child {
            font-size: 1.4rem;
            width: calc(100% * .33);
        }

        .cntntDataCorne div:nth-of-type(2) {
            font-size: 1.4rem;
            padding-right: 1.2rem;
            left: 24.5%;
            width: calc(100% * .4);
            justify-content: end;
        }

    .cntntDataCorne div:nth-of-type(2) img {
        margin-right: .5rem;
        width: 1.4rem
    }

        .cntntDataCorne div:last-child {
            font-size: 1.2rem;
            padding-right: .7rem;
            width: calc(100% * .5);
            justify-content: end;
        }

    .cntntDataCorne div:last-child img {
        margin-right: .4rem;
        width: 1.8rem
    }
}
@media(min-width: 768px){
    .cntntDataCorne {
        height: 3.2rem;
    }
    .cntntDataCorne div:first-child {
        font-size: 1.6rem
    }

        .cntntDataCorne div:nth-of-type(2) {
            font-size: 1.7rem;
            padding-right: 1.5rem;
        }

    .cntntDataCorne div:nth-of-type(2) img {
        margin-right: 1rem;
        width: 1.6rem
    }

        .cntntDataCorne div:last-child {
            font-size: 1.5rem;
            padding-right: 1.2rem;
        }

    .cntntDataCorne div:last-child img {
        margin-right: .7rem;
        width: 2rem
    }
}
@media(min-width: 992px){
    .cntntDataCorne {
        height: 3.7rem;
    }
    .cntntDataCorne div:first-child {
        font-size: 1.9rem
    }

        .cntntDataCorne div:nth-of-type(2) {
            font-size: 2.1rem;
            padding-right: 2rem;
        }

    .cntntDataCorne div:nth-of-type(2) img {
        margin-right: 1rem;
        width: 1.9rem
    }

        .cntntDataCorne div:last-child {
            font-size: 1.9rem;
            padding-right: 2rem;
        }

    .cntntDataCorne div:last-child img {
        margin-right: 1rem;
        width: 2.4rem
    }
}
@media(min-width: 1200px){
    .cntntDataCorne {
        height: 4.1rem;
    }
    .cntntDataCorne div:first-child {
        font-size: 2.3rem
    }

        .cntntDataCorne div:nth-of-type(2) {
            font-size: 2.4rem;
            padding-right: 4rem;
        }

    .cntntDataCorne div:nth-of-type(2) img {
        margin-right: 1.5rem;
        width: 2.1rem
    }

        .cntntDataCorne div:last-child {
            font-size: 2.1rem;
            padding-right: 4rem;
        }

    .cntntDataCorne div:last-child img {
        margin-right: 1.5rem;
        width: 2.6rem
    }
}
@media(min-width: 1440px){
    .cntntDataCorne {
        height: 4.4rem;
    }
    .cntntDataCorne div:first-child {
        font-size: 2.5rem
    }

    .cntntDataCorne div:nth-of-type(2) {
        font-size: 2.6rem
    }

    .cntntDataCorne div:nth-of-type(2) img {
        margin-right: 1.5rem;
        width: 2.5rem
    }

    .cntntDataCorne div:last-child {
        font-size: 2.4rem;
    }

    .cntntDataCorne div:last-child img {
        margin-right: 1.5rem;
        width: 3rem
    }
}

/**/
.carouselCorne .product-slider-section {
    background-color: transparent !important
}



.carouselCorne .product-grid-item {
    margin-right: 10px !important;
    width: calc(100% * .45) !important;
    margin-left: 5px !important;
    margin-top: 2rem
}
#categoriaSelect.carouselCorne .product-wrapper {
    box-shadow: 0 0 9px 0 #00000044
}

.carouselCorne  .product-wrapper {
    padding: 0 0 1rem !important;
    border-radius: .3cm
}

.carouselCorne .product-wrapper .product-vendor {
    width: 85%;
    padding: .1rem 1rem .2rem;
    position: absolute;
    top: 0;
    z-index: 2
}

.carouselCorne .product-wrapper .product-image {
    display: flex;
    flex-direction: column-reverse
}
    .carouselCorne  .product-wrapper .product-image .product-name {
        padding: 0 1rem;
        text-align: center;
    }

    .carouselCorne .product-wrapper .featured-img.waiting.lazyloaded {
        margin-top: 2rem
    }
    .carouselCorne  .product-wrapper .demo-icon.icon-electro-add-to-cart-icon {
        display: none !important
    }
    .carouselCorne .product-wrapper .btn-add-cart.select-options.btn-or-bio {
        background-color: #003764 !important;
        border-radius: 6rem;
        height: 2.2rem;
        font-size: .8rem;
        cursor: pointer;
        line-height: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
.carouselCorne .product-wrapper .product-content .price-cart-wrapper .product-add-cart .btn-add-cart .text
{
    margin: 0;
}
.carouselCorne .product-wrapper .price-sale {
    color: #3cad2b;
    font-weight: 600;
}

@media(min-width: 576px){
    .carouselCorne .product-grid-item {
        width: calc(100% * .3) !important;
    }
    .carouselCorne .product-wrapper .btn-add-cart.select-options.btn-or-bio {
        height: 3rem;
        font-size: 1.2rem;
    }
}
@media(min-width: 768px){
    .carouselCorne .product-grid-item {
        width: calc(100% * .31) !important;
    }
}
@media(min-width: 992px){
    .carouselCorne .product-grid-item {
        width: calc(100% * .231) !important;
    }
}
@media(min-width: 1200px){
    .carouselCorne .product-grid-item {
        width: calc(100% * .185) !important;
    }
}

@media(min-width: 1440px){
    .carouselCorne .product-grid-item {
        width: calc(100% * .188) !important;
    }
}