root, body, html {
    width: 100%;
    scroll-behavior: smooth;
}

body{
    margin: 0;
    font-family: 'Red Hat Display', sans-serif;
}

section {
    height: 100vh;
    min-height: 820px;
    width: 100%;
    align-content: center;
}

section.home {
    min-height: 960px;
}

p{
    margin: 0;
}

a {
    color: white;
    text-decoration: none;
}

b {
    font-weight: 900;
}

button{
    font-weight: 900;
}

/* -- LANDING -- */

.banner-top {
    position: fixed;
    top: 0;
    width: calc(100% - 10px);
    background: black;
    color: white;
    font-weight: 900;
    padding: 5px;
    text-align: center;
	z-index:2
}



.banner-top p {
    display: flex;
    gap: 5px;
    justify-content: center;
}

/* home */

.home{
    position: relative;
}

.home-mobile{
    display: none;
}

.home-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../images/section-home/iStock-1305905498.png');
    background-repeat: no-repeat;
    background-size: cover;
}


/* home left */
.home-left {
    height: 100%;
    width: 20%;
    text-align: center;
}

.home-left .wrapper-img {
    height: 100%;
    width: 100%;
    align-content: center;
    background: white;
}



/* home center */

.home-center {
    width: 40%;
    height: 90%;
    align-content: center;
    display: flex;
    flex-direction: column;
}

.title-text{
    position: relative;
    margin-left: 20px;
}

.header .logos {
    position: absolute;
    height: 30px;
    display: flex;
    align-items: center;
    top: -50px;
}

.header .logos span{
    display: flex;
    align-items: center;
}

h1 {
    min-width: 55%;
    max-height: 150px;
    font-size: calc(1em + 2.9vw);
    font-weight: 900;
    margin: 0;
}

.red-text{
    color: red;
}

.red-bar {
    height: 27px;
    width: auto;
    background: red;
    color: white;
    font-size: 18px;
    font-weight: 900;
    align-content: center;
    min-width: 5%;
    margin-bottom: 30px;
    text-align: center;
}

.ventas-usa {   
    background: linear-gradient(0.25turn, rgba(0, 72, 179, 1), rgba(16, 118, 255, 1));
    color: white;
    font-size: small;
    font-style:italic;
    font-weight: 500;
    height: calc(27px - 6px);
    padding: 6px 14px;
    border-radius: 15px;
    gap: 5px;
    height: 17px;
}

.header {
   
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: self-end;
    gap: 20px;
    height: 100%;
}

span.red-bar.long {
    width: -webkit-fill-available;;
}

/* home content*/

.home-content {
    height: 70%;
    align-content: center;
}

.content-info {
    height: 90%;
    width: 75%;
    margin-left: 15%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-bottom: 20px;
    box-sizing: border-box;
}

ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
}

li {
    display: flex;
    align-items: center;
    list-style: none;
    font-size: 18px;
    font-weight: 600;
    gap: 15px;
}

.bullet-point-shadow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: radial-gradient(#ff0000b5, #ff000000);
    border-radius: 20px;
}

.bullet-point {
    display: flex;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 20px;
}

.comparison {
    display: flex;
    justify-content: space-around;
    gap: 16px;
    width: 100%;
    height: 40%;
    max-height: 200px;
  }

  .comparison div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    width: 50%;
  }

.comparison div p {
    font-weight: 500;
}

.comparison .wrapper-img {
    box-shadow: 5px 5px 10px 1px #e8e8e8;
    width: 100%;
    height: 100%;
}

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

.wrapper-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -15px;
}

.wrapper-logos img{
    max-width: 20%;
}


/* home right */
/* header */

.home-right {
    height: 90%;
    width: 40%;
    display: flex;
    align-self: center;
    flex-direction: column;
}

p{margin-bottom:0px!important;}

.title.t-form {
    height: 30%;
    width: 100% !important;
}

.bar-text {
    width: 100%;
}

/* home form*/

.content-form {
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center;
}

.wrapper-form {
    height: 100%;
    width: 60%;;
    border: 3px solid #ececec;
    border-top: none;
    box-sizing: border-box;
}

.form-header {
    background: black;
    color: white;
    font-weight: 900;
    padding: 10px 30px;
    text-align: center;
}



form {
    height: 80%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    gap: 10px;
}

.content-form form{
    padding: 15px;
   
    padding-bottom: 10px;
}


input, select {
    background: #F4F4F4;
    border: 1px solid #E4E4E4;
    height: fit-content;
    border-radius: 5px;
    font-family: 'Red Hat Display', sans-serif;
    padding: 7px;
}

input::placeholder, select::placeholder{
    padding-left: 5px;
    font-size: 14px;
    font-family: inherit;
    color: #656464;
}

.form-pedido {
    height: 55px;
    min-height: 55px;
    color: white;
    font-size: 20px;
    border: none;
    background: linear-gradient(180deg, #69EE00 0%, #064410 100%);
}

/* banner*/

.banner {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    height: 50px;
    width: 100%;
    background: linear-gradient(90deg, rgba(0, 72, 179, 1), rgba(16, 118, 255, 1));
}

.banner img {
    object-fit: none;
}

.pop-up {
    width: 250px;
    position: absolute;
    left: 7%;
    bottom: 10px;
    background: white;
    box-shadow: 0px -2px 5px #d5d5d5;
    border-radius: 10px;
    z-index: 3
}

.pop-up img {
    width: 40px;
    position: absolute;
    bottom: 0;
    height: 100px;
    object-: scale-down;
    object-position: 1px -10px;
    object-fit: cover;
    font-size: 14px;
}

.light{
    font-size: 12px;
    color: #8F8F8F;
}

.close {
    position: absolute;
    right: 10px;
    top: 5px;
}

.pop-up div {
    margin-left: 40px;
    padding: 5px 20px;
}

/* science */

h2{
    font-size: 36px;
    font-weight: 900;
}

.title-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.science-container {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    gap: 5px;
}

.science-content {
    margin: 0 auto;
    display: flex;
    gap: 5%;
    align-items: center;
    justify-content: center;
}

.science-card {
    display: flex;
    flex-direction: column;
}

.wrapper-cards {
    display: flex;
    flex-direction: column;
    gap: 22px;
   
}

.science-content .wrapper-cards{
    width: 40%;
    height: 80%;
    justify-content: space-evenly;
}

.science-card .card-header {
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: red;
    color: white;
    font-size: 18px;
    font-weight: 900;
    padding-left: 18px;
    margin: 0;
    box-sizing: border-box;
}

.science-card .card-header p {
    display: flex;
    width: 70%;
}

.science-card .card-body {
    position: relative;
    display: flex;
    font-size: 14px;
    min-height: 80px;
    padding: 20px;
    border: 3px solid #ececec;
    border-top: none;
    margin: 0;
}

.science-card .card-body span {
    width: 50%;
}

.science-card .card-body img {
    position: absolute;
}

.wrapper-img-botella {
    display: flex;
    justify-content: center;
    width: 15%;
    height: 100%;
}

.wrapper-img-botella img {
    object-fit: contain;
  }


.img1 {
    height: 250px;
    width: auto;
    right: 40px;
    bottom: 0;
}

img.img2 {
    height: 220px;
    width: auto;
    bottom: 0;
    right: 50px;
}

img.img3 {
    height: 220px;
    width: auto;
    bottom: 0;
    right: 30px;
}

img.img4 {
    height: 220px;
    width: auto;
    bottom: 0;
    right: 20px;
}

/* reviews */
.reviews {
    position: relative;
    display: flex;
    height: 600px;
    min-height: 80vh;
}

.desktop-hide {
    display: none;
}

.background-gradient {
    background-image: url(../images/section-reviews/gradient.png);
    display: flex;
    width: 100%;
    height: 63%;
    position: absolute;
    bottom: 25%;
    display: none; /* Parece que hay un duplicado aquí */
}

.background-gradient-carrusel {
    background-image: url(../images/section-reviews/gradient.png);
    background-repeat: repeat-x;
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 120px;
    left: 0;
}

.reviews-container {
    width: 90%;
    margin-left: auto; /* Cambiado para centrar correctamente */
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.slider-container {
    display: flex; /* Añadido para asegurar que flex-direction funcione */
    flex-direction: row;
    overflow: hidden;
    position: relative;
}

.slide-visible {
    display: flex; /* Añadido para asegurar que flex-direction funcione */
    flex-direction: column;
    margin-right: 50px;
    width: 2.2%;
}

.reviews-card {
    background: white;
    padding-top: 20px;
}

.slide-visible .wrapper-img {
    position: relative;
    display: flex;
    width: 100%;
    top: 59px;
    justify-content: center;
}

.reviews-card .card-content {
    padding: 0 50px;
    font-weight: 400;
    font-size: 17px;
    height: 215px;
    display: flex; /* Asegura que align-content funcione */
    align-items: center; /* Alineación vertical centrada */
    justify-content: center; /* Alineación horizontal centrada */
}


h3{
    font-size: 18px;
    color: #8F8F8F;

font-family: "Red Hat Display";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
}

button.slick-prev.slick-arrow, button.slick-next.slick-arrow, .slider-nav{
    display: none !important;
}

ul.slick-dots {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

ul.slick-dots li {
    margin: 0;
    width: 10px;
    height: 10px;
    font-size: 0%;
}

ul.slick-dots li button {
    border: none;
    color: grey;
    background: grey;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    padding: 0;
}

ul.slick-dots .slick-active button {
    background-color: #D10001;
    color: red;
}

.reviews-card .card-footer {
    display: flex;
    justify-content: space-between;
    background: red;
    color: white;
    font-size: 20px;
    padding: 13px 38px;
}

.reviews-card .card-footer span {
    display: flex;
    flex-direction: row;
}

.reviews-card .card-footer span img{
    object-fit: contain;
}

.reviews-container .title-section {
    margin: 30px 0;
    margin-left: -5%;
    position: relative;
}

.carrusel-reviews {
    margin-top: 30px;
}

.carrusel-reviews h2{
	color: var(--Black, #121212);
    font-family: "Red Hat Display";
    font-size: 36px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    position: relative;
}

.title-section h2{
	color: var(--Black, #121212);
text-align: center;
font-family: "Red Hat Display";
font-size: 36px;
font-style: normal;
font-weight: 900;
line-height: normal;
}

.item-grid {
    width: 70%;
    margin: 0 auto 5%;
    display: flex;
    justify-content: center;
}

#close{cursor:pointer;}

.item {
    width: 33.3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.item-text {
    display: flex;
    width: 60%;
}
.item-text p{
	color: var(--Black, var(--Black, #121212));
text-align: center;
font-family: "Red Hat Display";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;

}

.swiffy-slider.slider-item-show3.slider-item-reveal {
    margin-top: -35px;
}

.comprar {
    width: 100%;
    background: linear-gradient(180deg, #69EE00 0%, #064410 100%);
    box-shadow: 0px 4px 4px 0px rgba(0, 10, 31, 0.20);
    border: none;
    height: 55px;
    font-size: 20px;
    font-weight: 900;
    color: white !important;
    position: relative;
}

.comprar a {
    display: flex;
    justify-content: center;   
    width: 100%;
}

/* technology */

.technology-mobile{
    display: none;
}

.technology-container {
    width: 80%;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.technology-container div{
    width: 50%;
    height: 60%;
}

.technology-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.technology-content div {
    height: 80%;
    width: 70%;
    flex-direction: column;
    gap: 30px;
}

.technology-text {
    display: flex;
    width: 100%;
}

.technology-text p{
	color: var(--Black, var(--Black, #121212));
font-family: "Red Hat Display";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 24px */
}

.technology-text p span{
	opacity: 0.7;
color: var(--Black, var(--Black, #121212));
font-family: "Red Hat Display";
font-size: 16px;
font-style: normal;
font-weight: 800;
line-height: 150%;
}

.technology-images {
    display: flex;
    gap: 20px;
}

.technology-images span {   
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-self: center;
}

.technology-images img {
    width: 100%;
}


/* antes/despues */

.antes-despues {
    align-content: flex-start;
}

.antes-despues-container {
    width: 80%;
    height: 80%;
    margin: 0 auto;
}

.antes-despues-content {
    height: 90%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    /* justify-content: center; */
}

.antes-despues-container h2 {
    text-align: center;
}

.blue-text{
    background: linear-gradient(to right, #0048B3 0%, #1076FF 100%);
    -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

 h3 {
    margin: 0;
}

.antes-despues-content .row {
    height: calc(50% - 20px);
    width: calc(100% - 20px);
    display: flex;
    gap: 20px;
}

.antes-despues-content .row .wrapper-par {
    height: 100%;
    width: calc(100% - 20px);
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 20px;
}

.antes-despues-content .row .wrapper-par div {
    width: calc(50% - 10px);
    height: 100%;
    display: flex;
    flex-direction: column;    
}

.antes-despues-content .row .wrapper-par img {
    width: calc(100% - 8px);
    height: 90%;
    object-fit: cover;
    object-position: top;
    border: 3px solid #E0E0E0;
    box-sizing: border-box;
}

#despues img {
    border-image: linear-gradient(90deg, #0048B3, #1076FF) 30;
    border-width: 5px;
    border-style: solid;
}

#despues h3{
    color: #014AB6
}

footer p{
	color: var(--Black, var(--Black, #121212));
font-family: "Red Hat Display";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

/* pre footer */

.pre-footer {
    background: linear-gradient(45deg, #0048B3, #1076FF);
    border-top: 4px solid red;
    height: 220px;
}

.pre-footer-content {
    display: flex;
    height: inherit;
}

.pre-footer-content .wrapper-img{
    position: relative;
    width: 50%;
}

.pre-footer-content .wrapper-img img {
    position: absolute;
    bottom: 0;
    right: 0;
}

.text {
    font-size: 36px;
    color: white;
    font-weight: 500;
    width: 80%;
    display: flex;
    flex-direction: column;
    align-self: center;
}

.text p {
    padding-left: 20%;

}
.bold{
    font-weight: 900;
}


/* footer */

footer {
    background: #E0E0E0;
}

.footer-container{
    width: 70%;
    margin: auto;
    padding: 5% 0;
}
footer ul {
    display: flex;
    flex-direction: row;
    text-decoration: underline;
    gap: 20px;
}

footer p {
    font-size: 14px;
}

footer a{
    color: black;
}

@media (max-width: 500px){
    .products-header {
        width: 100%!important; 
    }

     .img1 {
        right: 0!important;
    }

    img.img2 {
        right: 0!important;
    }

    img.img3 {
        right:0!important;
    }

    img.img4 {
        right: 0!important;
    }
}



@media (min-width: 500px) and (max-width: 900px){
    .content-info {
        padding: 0;
        margin: auto;
        align-items: center;
        gap: 40px;
        flex-direction: row;
        justify-content: center;
        height: 20vh;
    }

    .wrapper-ul , .comparison {
        height: 80%;
        align-content: center;
    }

    .comparison {
        width: 40%!important;
    }

    .background-gradient {
        top: 92vh;
    }

    .wrapper-form {
        width: 70%!important;
        border: 3px solid #ececec!important;
        background-color: white;
    }

    .content-form{
        background-color: transparent!important;
    }

    .wrapper-logos {
        width: 60%!important;
    }

    .title {
        align-items: start!important;
    }

    span.title-text {
        width: 60%;
        height: 15vh;
        width: auto;
        margin-left: 15%;
    }

    .title h1 {
        font-size: calc(1em + 6vw)!important;
    }

    img.bot-img-home {
        bottom: -15px!important;
        left: 2%!important;
    }

    .img-secure-home{
        right: 3%;
    }

}

@media (max-width: 1400px) {
    .home-left{
        width: 15%;
    }

    .home-center{
        width: 40%;
    }

    .home-right{
        width: 45%;
    }

    .home-left img {
        width: 100%;
    }

    .title{
        height: 150px;
    }

    .ventas-usa{
        font-size: 10px;
    }

    .content-info{
        width: calc(100% - 15%);
    }

    .wrapper-form {
        width: 80%;
    }

    .comparison {
        width: 100%;
    }

    .comparison div {
        width: calc(50% - 16px);
    }

    .comparison div img {
        width: 100%;
    } 

   

}

@media (max-width: 1400px) {
    .science-container {
        width: 90%;
        
    }

    .item-grid{
        width: 85%;
    }

    .item-text {
        width: 80%;
        justify-content: center;
    }

    .technology-container div {
        width: 80%;
        height: unset;
        align-content: center;
        justify-content: center;
    }
}

@media (max-width: 1400px) {

    

}

@media (max-width: 900px) {

    .home-mobile{
        display: flex;
    }

    .home{
        display: none;
    }

    span.title-text {
        width: auto;
    }

    .bot-img-home {
        position: absolute;
        height: 250px;
        left: 6px;
        bottom: -100px!important;
        max-width: 20%;
        object-fit: contain;
    }

    .wrapper-logos {
        width: 80%;
        height: 100px;
    }

    section{
        height: auto;
    }

    .mobile-hide{
        display: none;
    } */

    .desktop-hide{
        display:flex
    }

    .banner-top{
        font-size: 12px;
    }

    .home-left {
        position: absolute;
        top: 50px;
        left: -50px;
        height: auto;
        width: fit-content;
        z-index: 1;
    }

    li{
        font-size: 14px;
        gap: 10px;
        margin-left: 20px;
    }

    .home-left .wrapper-img {
        background: none;
    }

    .home-left .wrapper-img img {
        width: 40%;
    }

    .home-right{
        width: 100%;
        align-items: center;
    }

    .home-content {
        display: block;
        width: 100%;
    }

    .header {
        width: 100%;
        margin-top: 90px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .header .logos {
        height: 40px;
        justify-content: center;
        margin: 0;
    }

    .header .logos span img {
        scale: 70%;
    }

    .clinicaly {
        width: 95px;
    }

    .ventas-usa {
        height: 20px;
        padding: 1px 10px;
        font-size: 8px;
    }

   

    .title{
        flex-direction: column;
        align-items: center;
        height: auto;

    }

    h1{
        font-size: 36px;
        margin-left: 25px;
    }

    .red-bar{
        font-size: 14px;
    }

    .bar-text {
        position: relative;
        display: flex;
        width: 100%;
        height: 30px!important;
        margin: 0;
        justify-content: center;
        align-items: center;

    }

    .content-info{
        padding: 0;
        margin: auto;
        align-items: center;
        gap: 40px;
    }

    .bullet-point{
        height: 6px;
        width: 6px;
    }

    .bullet-point-shadow{
        height: 12px;
        width: 12px;
    }

    .img-secure-home {
        position: absolute;
        top: -20px;
        right: 10px;
    }

    .comparison {
        display: flex;
        width: 100%;
        gap: 5px;
    }

    .comparison div {
        width: 50%;
    }

    .wrapper-img {
        width: 100%;
    }

    .comparison div .wrapper-img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .content-form {
        position: relative;
        flex-direction: column;
        align-items: center;
        background-color: white;
    }

    #header-f-2 {
        position: absolute;
        top: -20%;
    }

    .wrapper-form {
        width: 100%;
        border: none;
    }

    form{
        border: none;
    }

    .banner{
        position: relative;
    }

    .banner img {
        width: 80%;
        object-fit: contain;
    }

    .pop-up{
        left: 5px;
        bottom: 480px;
    }

    .science-container {
        width: 100%;
    }

    .title-section {
        width: 80%;
        margin: auto;
        height: auto;
        margin-bottom: 50px;
        align-self: center;
        text-align: center;
    }

    .science-container .title-section{
        height: 220px;
    }

    h2{
        font-size: 20px!important;
    }

    h3{
        font-size: 12px;
        margin: 0;
    }

    .science-content {
        position: relative;
        width: 90%;
        margin: auto;
        flex-direction: column;
        gap: 22px;
    }

    .science-card .card-header {
        font-weight: 700;
    }

    .science-content .wrapper-cards{
        width: 100%;
    }

    .wrapper-img-botella {
        position: absolute;
        rotate: 90deg;
        scale: 30%;
        top: -635px;
        left: 0px;
        height: 100%;
    }

    .wrapper-img-botella img{
        object-fit: cover;
        height: 100%;
    }
    
    .carrusel {
        width: 90%;
        margin: auto;
    }

    .card-body img {
        bottom: 0;
        right: 50px;
    }

    .reviews-container {
        height: 95%;
        text-align: center;
        width: 100%;
        margin: 60px 0 0;
    }

    .reviews-container .title-section {
        height: auto;
        margin: 50px 0;
    }

    .reviews-card {
        margin-bottom: 20px;
    }

    .slide-visible {
        width: 90vw;
    }

    .reviews-card .card-content {

        text-align: start;
    }

    ul.slider-indicators {
        display: flex;
        flex-direction: row;
        width: 70%;
        margin: auto;
    }

    ul.slider-indicators li {
        background: red;
        width: 5px !important;
    }

    .background-gradient {
        display: block;
        top: 90vh;
    }

    .background-gradient-carrusel{
        display: none;
    }

    .science-card .card-body {
        height: 130px;
    }

    .science-card .card-body span {
        width: 60%;
    }

    .reviews {
        height: auto;
        min-height: 250px;
    }

    .item-grid {
        margin-top: 50px;
        position: relative;
        margin: 60px 0;
        flex-direction: column;
        width: 100%;
        align-items: center;
        height: 70%;
        justify-content: space-between;
    }
    
    .item {
        width: 80%;
    }
    

    .item-text {
        width: 80%;
    }
	
    /* technology */

    .technology-mobile{
        display: flex;
        flex-direction: column;
        margin: 50px 0;
    }

	.technology{
        display: none;
    }

    .technology-content {
        align-items: center;
        margin-bottom: 50px;
    }

    .technology-content div {
        width: 100%;
    }

    .technology-content .technology-text .wrapper-img{
        width: 100%;
    }

    .technology-content .technology-text .wrapper-img img{
        width: 100%;
    }

    section.technology-mobile p {
        width: 90%;
        margin: auto;
    }

    .technology-img {
        display: flex;
    }

    .technology-img img {
        width: 50%;
    }

    .antes-despues {
        height: auto;
        align-content: center;
        margin: 50px auto;
        min-height: auto;
    }

    .antes-despues-container {
        height: 100%;
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 20px;
    }

    .antes-despues-content{
       align-items: center; 
       height: 80%;
       gap: 20px;
    }

    .antes-despues-content .row {
        flex-direction: column;
        align-items: center;
    }

    .antes-despues-content .row .wrapper-par div {
        height: 100px;
    }

    .antes-despues-content .row .wrapper-par img {
        width: 100%;
        object-fit: contain;
    }

    .antes-despues-content .row .wrapper-par {
        height: 100%;
        width:100%;
        display: flex;
        justify-content: center;
        flex-direction: row;
        gap: 10px;
    }

    .red-mobile {
        position: relative;
        background: linear-gradient(180deg, #EE0001, #D10001);
    }

    .pre-footer {
        height: auto;
    }

    .pre-footer-content {
        height: auto;
        flex-direction: column-reverse;
        align-items: center;
        margin-top: 50px;
    }

    .text {
        width: 100%;
        text-align: center;
        margin: 50px;
    }

    .text p{
        width: 100%;
        padding: 0;
        font-size: 24px;
    }

    .pre-footer-content .wrapper-img {
        position: inherit;
        width: 100%;
        display: flex;
        justify-content: center;
    }


    .pre-footer-content .wrapper-img img {
        position: inherit;
    }

    #despues img {
        border-width: 2px;
    }

    .footer-container {
        width: 90%;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .footer-container a {
        display: flex;
        width: 100%;
    }

    .footer-container a img {
        margin: auto;
    }

    footer ul {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    footer ul li{
        margin: 0;
    }

    footer p{
        text-align: justify;
    }

    .links ul {
        justify-content: flex-start!important;
        width: 90%;
        margin: auto;
    }

    .links li{
        margin: 0;
    }

    .links li a{
        font-weight: 600;
    }

    .links ul li:not(.active){
        display: none;
    }  

    .cont {
        width: 90%!important;
    }
}


/* -- PÁGINA COMPRAR -- */

.products{
    height: auto;
}

.products-header {
    margin: 50px 0;
    text-align: center;
    align-content: center;
}

.products-header img {
    margin-bottom: 40px;
}

.products-header h1 {
    width: 100%;
    font-size: 36px;
    margin: 0;
}

.products-container {
    width: 80%;
    margin: auto;
}

.products-container .mensaje-oferta {
    font-size: 15px;
    font-style: italic;
    font-weight: 600;
    margin-bottom: 20px!important;
}

.products-container .wrapper-cards{
    flex-direction: row;
    justify-content: space-between;
    height: 80vh;
}

.products-container .card {
    width: 33.33%;
    height: 100%;
    text-align: center;
    border: 1px solid #E0E0E0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all ease 0.5s;
    cursor: pointer;
}

.card-header {
    margin: 5px;
    display: flex;
    padding: 7.23px;
    color: white;
    font-size: 20px;
    font-weight: 900;
    background: black;
    justify-content: center;
}

.products-container .card .card-body {
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
    
}

.card-body .wrapper-img-prod {
    height: 60%;
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;

}

.wrapper-img-prod img {
    height: 100%;
    object-fit: none;
}



.oferta-activa {
    background: #2EB300;
    color: white;
    font-weight: 600;
    padding: 5px;
}

.prod-nombre {
    padding: 5px;
}

.small {
    font-size: 12px!important;
    font-weight: 600!important;
    margin-top: -10px;
}

.card .card-body p {
    font-size: 18px;
    font-weight: 500;
}

.card .card-body h4 {
    font-size: 28px;
    font-weight: 900;
    margin: 0;
}

.descuento {
    text-decoration: line-through red;
}

.card .card-footer {
    width: 90%;
    margin: 0 auto 20px;
}

.card .card-footer ul {
    width: 80%;
    height: 20%;
    display: flex;
}

.card .card-footer li{
    align-items: flex-start;
}

.card .card-footer .bullet-point-shadow {
    min-width: 13px;
    margin-top: 3px;
}

.card .card-footer li p {
    text-align: start;
    font-size: 16px;
}

.button-prod{
    height: 48px;
    background: linear-gradient(180deg, rgba(238, 0, 1, 1), rgba(209, 0, 1, 1));
    color: white;
    font-size: 20px;
    border: none;
    cursor: pointer;

}

.card-focus {
    border-image: linear-gradient(#0048B3, #1076FF) 30 !important;
    border-width: 3px !important;
    border-style: solid;
    box-sizing: border-box;
}

.card-focus .card-header{
    background: linear-gradient(90deg, rgba(0, 72, 179, 1), rgba(16, 118, 255, 1));
}

.card-focus .button-prod{
    background: linear-gradient(180deg, rgba(17, 119, 255, 1), rgba(1, 74, 181, 1));
}

.form-compra-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 100px 0;
}

.form-compra {
    width: 30%;
    height: 90%;
    border: 3px solid #E0E0E0;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
}

.form-compra h4{
    font-weight: 900;
}

.form-compra form{
    border: none;
    width: 75%;
    height: auto;
    margin-bottom: 20px;
}

.button-red {
    width: 75%;
    font-size: 20px;
    color: white;
    font-weight: 600;
    background: linear-gradient(180deg, #EE0001, #D10001);
    border: none;
    padding: 10px;
}

.recibir-email {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.mensaje-seguridad {
    display: flex;
    align-items: center;
    width: calc(75% - 40px);
    padding: 20px;
    border: 3px solid #E0E0E0;
    font-size: 10px;
    font-weight: 600;
    gap: 10px;
    text-align: start;
    margin-bottom: 20px;
}

/* pop up compra finalizada */

.popup-compra-finalizada {
    height: 100vh;
    position: fixed;
    z-index: 4;
    top: 0;
    background-color: #80808030;
    backdrop-filter: blur(30px);
    display: flex;
    flex-direction: column;
}

.popup-compra-finalizada .pre-footer-content {
   
    height: 100%;
    width: 80%;
    height: 30%;
    margin: 90px auto;
    background: linear-gradient(90deg, #0048B3, #1076FF);
}

.popup-compra-finalizada .pre-footer-content .text .small{
    font-size: 20px;

}

.popup-compra-finalizada .pre-footer-content .text .medium{
    font-size: 24px;
}

.popup-compra-finalizada .pre-footer-content .text .bold{
    font-size: 36px;
    margin-bottom: 20px !important;
}

.popup-compra-finalizada .pre-footer-content .wrapper-img {
    width: 30%;
}

.popup-compra-finalizada{
    display: none;
}

@media (min-width: 650px) and (max-width: 900px){
  
    .products {
        width: 70%;
        margin: auto;
    }

    .science-card .card-header p {
        width: 55%;
    }
}


@media (max-width: 1400px) {

    .products-container {
        width: 90%;
    }

    .form-compra{
        width: 40%;
    }

    span#card1, span#card3 {
        max-height: 243px;
    }

    .wrapper-img-botella img {
        object-fit: contain;
        align-self: center;
        height: 80%;
    }

    .wrapper-img-botella {
        width: 8%;
    }

    .science-card .card-header p {
        width: 60%;
    }

}

@media (max-width: 900px) {

    
   

    .products-header{
        margin: 30px 0;
    }

    .products-header img{
        width: 40%;
        margin: 20px 0;
    }

    .products-header h1{
        font-size: 20px;
        width: 80%;
        margin: auto;
    }

    .products-container .wrapper-cards {
        flex-direction: column;
        width: 100%;
        height: auto;
    }

    .products-container .wrapper-cards .card {
        width: 100%;
        height: 90vh;
        margin: auto;
    }

    .products-container .wrapper-cards .card .card-body img {
        width: auto;
        max-width: 70%;
    }

    .wrapper-img-prod#card2{
        width: 100%;
        
    }

    img#card2{
        max-width: 100%;
    }

    .card .card-footer li {
        align-items: center;
    }

    .card .card-footer .bullet-point-shadow {
        margin: 0;
    }

    .form-compra-container {
        margin: 50px 0 0 0;
        height: 100vh;
    }

    .form-compra {
        width: 100%;
        height: 100%;
        border: none;
        border-top: 3px solid #E0E0E0;
    }

    .img-prod .wrapper-img {
        display: flex;
        height: 100%;
        align-self: center;
    }

    .wrapper-img-tarjetas, .info-tarjeta .wrapper-img {
        width: 100%;
    }

    .form-tarjeta .wrapper-img {
        width: 80%;
        gap: 15px;
    }

    .form-tarjeta .wrapper-img img {
        width: 25%;
    }

    .img-prod-selected {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

    .cart span {
        height: 24px;
        width: 24px;
    }

    .form-compra form{
        width: 90%;
    }

    .form-compra button{
       font-size: 20px;
       width: 90%;
    }
}



/* -- PÁGINA CHECK OUT -- */

.selected-product{
    display: none;
    height: auto;
    flex-direction: column;
    justify-content: space-around;
}

.checkOut-container {
    width: calc(80% - 70px* 2);
    height: 50vh;
    margin: 0 auto 100px;
    border: 3px solid #1076FF;
    flex-direction: column;
    display: flex;
    padding: 60px;
    font-size: 18px;
}

.info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #E0E0E0;
}

.info-left {
    display: flex;
    align-items: center;
    height: 100%;
}

.info-prod {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.img-prod {
    height: 100%;
}

.img-prod .wrapper-img {
    display: flex;
    height: 70%;
    align-self: flex-start;
    padding: 1;
}

.img-prod-selected {
    height: 100%;
}

.cart {
    display: flex;
    align-items: flex-start;
    align-self: start;
}

.cart span {
    text-align: center;
    align-content: center;
    color: white;
    font-size: 20px;
    font-weight: 600;
    height: 38px;
    width: 38px;
    background: linear-gradient(45deg, #1177FF, #014AB5);
    border-radius: 50%;
}

.calvistop {
    margin-bottom: 10px;
    font-weight: 700;
}


.info-footer{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10%;
    height: 50%;
    padding-left: 20px;
}

.info-footer div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.valor {
    font-size: 20px;
    width: 15%;
    text-align: center;
}

.subtotal-valor, .total-valor {
    font-weight: 900;
}

.checkOut-pago {
    height: 170vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: url(../images/section-home/iStock-1305905498.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.checkOut-pago-container {
    width: 50%;
    height: 80%;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 3px solid #E0E0E0;
    background-color: white;
    justify-content: space-around;
   
}

.info-cliente {
    height: 30%;
    border-bottom: 2px solid #E0E0E0;
    display: flex;
    flex-direction: column;
}

.checkOut-pago h4 {
    display: flex;
    gap: 5px;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    margin: 0;
}

.info-cliente-container {
    width: 80%;
    margin: auto;
}

.cliente{
    font-size: 18px;
    font-weight: 900;
}

.info-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content:space-around;
    text-align: center;
    width: 40%;
    height: 55%;
    margin: 0 auto;
}

.title-tarj {
    position: relative;
    display: flex;
    align-self: center;
}

.img-secure {
    position: absolute;
    right: -100px;
    top: -25px;
}

.wrapper-img-tarjetas, .info-tarjeta .wrapper-img {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
}

.wrapper-img-tarjetas img, .info-tarjeta .wrapper-img img{
    object-fit: contain;
}

.form-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 25px;
}



.form-tarjeta form {
    border: none;
}

.form-tarjeta .row {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
    align-items: center;
}

.info-tarjeta .wrapper-img {
    width: 90%;
    height: 30px;
}

.info-tarjeta .wrapper-img img {
    width: 30%;
}

.row input, .row select {
    width: 100%;
}

.row p {
    width: 100%;
    font-size: 10px;
    color: #656464;
}

.form-tarjeta button{
    width: 100%;
}

@media (max-width: 1900px){
    .info-tarjeta{
        width: 60%;
    }
}

@media (max-width: 900px) {

    .selected-product {
        height: auto;
        gap: 20px;
    }

    .checkOut-container, .checkOut-pago {
        margin: 0 auto;
        width: 90%;
        padding: 5px;  
    }

    .checkOut-container{
        height: 50vh;
    }

    .info-header {
        height: 50%;
        padding: 0 10px;
    }

    .img-prod .wrapper-img {
        display: flex;
        height: 100%;
        width: 80%;
        margin: auto;
        align-self: center;
    }

    .img-prod {
        width: 30%;
    }

    .cart {
        height: 70%;
        align-self: center;
    }

    .cart span {
        height: 20px;
        width: 20px;
    }

    .total-valor{
        font-size: 24px!important;
        width: 50%!important;
    }

    .valor {
        font-size: 16px;
        width: 30%;
        text-align: end;
    }

    .info-footer {
        justify-content: center;
        padding: 0 10px;
    }

    h4 {
    flex-direction: column;
    }

    .info-cliente {
        height: 40%;
        gap: 20px;
    }

    .checkOut-pago h4 {
        margin: auto;
    }

    .info-cliente-container {
        margin: auto 0 60px 0;
    }

    .checkOut-pago {
        width: calc(95% - 10px); 
        background: none;
        min-height: 800px;
    }

    .checkOut-pago-container {
        width: calc(100% - 46px);
        height: 90%;
    }

    .img-secure {
        right: calc(50% - 34px);
        top: -125px;
    }

    .info-tarjeta {
        width: 100%;
        margin-top: 50px;
    }

    .info-tarjeta h4{
        margin: 0;
    }

    .products-header{
        margin: 30px 0;
    }

    .popup-compra-finalizada .pre-footer-content{
        margin: 0 auto;
        height: 100%;
        justify-content: center;
        margin-bottom: 30px;
    }

    .popup-compra-finalizada .text {
        width: 90%;
        gap: 20px;
    }

    .popup-compra-finalizada .medium {
        font-size: 18px!important;
    }

    .popup-compra-finalizada .bold {
        font-size: 26px !important;
        margin: 0!important;
    }

    .popup-compra-finalizada .small{
        font-size: 16px!important;
    }

    .popup-compra-finalizada .pre-footer-content .wrapper-img {
        height: 65%;
    }

    .popup-compra-finalizada .pre-footer-content .wrapper-img img {
       object-fit: cover;
       height: 100%;
        
    }  
    
}
.pop-up{position:fixed;}


@media (min-width: 300px) and (max-width: 650px) {
	.wrapper-img img{height:102%;}
	.form-header p {
		color: var(--White, #FCFCFC);
text-align: center;
font-family: "Red Hat Display";
font-size: 15px;
font-style: normal;
font-weight: 900;
line-height: normal;
	}
	.comparison div .wrapper-img {box-shadow:none!important;}
.pop-up{position:fixed;bottom:90px;}	
.porque-elegir{height:100%;margin-top:15%;background: linear-gradient(180deg, rgba(224, 224, 224, 0.00) 0%, #E0E0E0 100%); height:740px;}
.background-gradient{
background-image:none!important;
}
}

.products-header.legales {
    
        width: 60%;
        margin: 50px auto 0;

        text-align: center;
        align-content: center;

}

.links ul {
    flex-direction: row;
    justify-content: center;
    gap: 50px;
}

.links ul li{
    flex-direction: row;
}

.links ul li a {
    text-decoration: underline;
    color: black;
}

.active{
    color: red!important;
}

.cont {
    width: 60%;
    margin: auto;
    padding: 50px 0;
    font-size: 14px;
}

hr{
    border-color: transparent;
}




.checkOut-pago-container {
	
height:1400px!important;
padding-bottom:100px;
margin-bottom: 30px;
}


@media (min-width: 300px) and (max-width: 750px) {
	.checkOut-pago-container {

	}
#iframe-container{margin-left:-35px; background-color:transparent; width:125%!important; }
footer{margin-top: 160px;}
}

.policy h1 {
    margin-left: 0;
    font-size: 32px;
}

.policy h2 {
    font-size: 18px;
    margin-top: 25px;
    margin-bottom: 15px;
}

.policy p {
    font-size: 14px;
    margin-top: 15px
}

.policy li {
    display: list-item;
    list-style-type: decimal;
    font-size: 14px;
}