/* Products */
.productsContent {
    display: block;
    width: 90vw;
    margin-inline: auto;
    margin-block: 2vw 0;
}

.productsContent__texts {
    display: flex;
    width: 100%;
    justify-content: end;
    margin-block: 2vw .4vw;
}

.productsContent__title {
    color: var(--color-secundary);
    font-family: var(--font-family-bold);
    font-size: 2vw;
    text-align: center;
    display: block;
    width: 80%;
    margin-inline: auto;
    position: relative;
    padding-block: 0 1.5vw;
}

.productsContent__title:after {
    content: '';
    width: 80%;
    height: 1px;
    background: var(--color-secundary);
    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
    bottom: 0;
}

.productsContent__title:before {
    content: '';
    width: 40%;
    height: 4px;
    background: var(--color-primary);
    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
    bottom: -3.5px;
}

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

.productsContent__option {
    color: var(--color-dark);
    font-size: 1.2vw;
    padding: .2vw 1vw;
    opacity: .7;
    margin-inline: .5vw;
    position: relative;
    transition: all .3s ease-in-out;
    border-radius: 1vw;
    border: 1px solid transparent;
    cursor: pointer;
}

.productsContent__option:hover {
    color: var(--color-white);
    background: var(--color-primary);
    border: 1px solid var(--color-secundary);
    opacity: 1;
}

.productsContent__option-active {
    opacity: 1;
    color: var(--color-white);
    background: var(--color-primary);
    border: 1px solid var(--color-secundary);
}

.productsContent__option:after {
    content: '';
    display: flex;
    width: 0%;
    height: 2px;
    background: var(--color-btn);
    position: absolute;
    top: 100%;
    left: -5%;
    transition: width .25s ease-in-out;
}

.productsContent__option-active:after {
    width: 110%;
}

.productsContent__container {
    display: flex;
    justify-content: end;
    width: 100%;
    position: relative;
}

.productsContent__cards-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6vw;
    height: 2.6vw;
    border-radius: 50%;
    background: var(--color-white);
    position: absolute;
    right: -1vw;
    top: 8vw;
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
    transition: all .3s ease-in-out;
    z-index: 6500;
    cursor: pointer;
}

.productsContent__cards-btn {
    transform: scale(0) translateX(-10vw);
}

#productsBtnMoveLeft {
    transform: rotateY(180deg) scale(0) translateX(-10vw);
    left: 32%;
    right: auto;
}

.productsContent__container:hover .productsContent__cards-btn {
    transform: scale(1) translateX(0);
}

.productsContent__container:hover #productsBtnMoveLeft {
    transform: rotateY(180deg) scale(1) translateX(0);
}

.productsContent__cards-btn:hover {
    background: var(--color-secundary);
}

.productsContent__cards-icon {
    width: 1.1vw;
    height: auto;
    transition: all .3s ease-in-out;
}

.productsContent__cards-btn:hover .productsContent__cards-icon {
    fill: var(--color-white);
}
/* Publi */
.productsContent__publi {
    display: block;
    width: calc(100% / 3 - .4vw);
    height: 20.5vw;
    overflow: hidden;
    margin-block: 1vw;
    margin-inline: 0 .2vw;
    position: absolute;
    top: -.5vw;
    left: 0;
    z-index: 500;
    cursor: pointer;
    border-radius: 1.5vw;
}

.productsContent__publi-content {
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .75s cubic-bezier(0,0,.2,1);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.productsContent__publi-content:nth-of-type(1) {
    opacity: 1;
}

.productsContent__publi-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .75s cubic-bezier(0,0,.2,1);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
}

.productsContent__publi-texts {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: 80%;
    padding-inline: 10%;
    height: 100%;
    position: absolute;
    z-index: 90;
    background: rgba(0, 0, 0, 0.4);
}

.productsContent__publi-title {
    width: 100%;
    color: var(--color-white);
    font-family: var(--font-family-bold);
    font-size: 2vw;
    text-shadow: 
    -2px -2px 2px rgba(0, 0, 0, 0.8), /* Sombra clara arriba */
     2px 2px 2px rgba(0, 0, 0, 0.9);
}

.productsContent__publi-text {
    width: 100%;
    color: var(--color-white);
    font-family: var(--font-family-light);
    font-size: 1.4vw;
    margin-block: .3vw 1.3vw;
    text-shadow: 
    -2px -2px 2px rgba(0, 0, 0, 0.8), /* Sombra clara arriba */
     2px 2px 2px rgba(0, 0, 0, 0.9);
}

.productsContent__publi-btn {
    color: var(--color-white);
    font-size: 1.2vw;
    text-decoration: none;
    padding: .2vw 1.3vw;
    border-radius: 1vw;
    background: var(--color-primary);
    border: 1px solid var(--color-secundary);
    transition: .3s all ease;
    cursor: pointer;
}

.productsContent__publi-btn:hover {
    transform: scale(1.1);
}

.productsContent__publi:hover .productsContent__publi-wsp {
    transform: scale(1.1);
}

.productsContent__cards {
    display: block;
    width: calc(200% / 3);
    margin-inline: .3vw 0;
    padding-inline: 0 .2vw;
    padding-block: 0;
    overflow: hidden;
    transition: .3s all ease;
}

.productsContent__cards-slider {
    width: 500%;
    height: 20vw;
    display: flex;
    padding-block: .6vw;
    transition: .3s all ease;
}

.cardProduct__product {
    color: var(--color-white);
    text-decoration: none;
    display: block;
    width: calc(25% - .6vw);
    height: max-content;
    margin-inline: .3vw;
    position: relative;
    border-radius: 1.5vw;
    background: var(--color-secundary);
}

.cardProduct {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.cardProduct__offert {
    color: var(--color-white);
    font-family: var(--font-family-bold);
    font-size: .8vw;
    padding: .2vw .8vw;
    background: var(--color-primary);
    border: 1px solid var(--color-secundary);
    border-right: none;
    position: absolute;
    top: 1.2vw;
    right: 0;
    z-index: 200;
    border-top-left-radius: 1vw;
    border-bottom-left-radius: 1vw;
}

.cardProduct__offert b {
    color: var(--color-white);
    font-family: var(--font-family-bold);
    font-size: .8vw;
    text-decoration: line-through;
}

.cardProduct__imgs {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-top-left-radius: 1.5vw;
    border-top-right-radius: 1.5vw;
    overflow: hidden;
    position: relative;
}

.cardProduct__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s cubic-bezier(0,0,.2,1);
}

.cardProduct__payment {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 2.95vw;
    right: 0;
}

.cardProduct__payment-content {
    padding: .4vw;
    border-top-left-radius: .5vw;
    border-bottom-left-radius: .5vw;
    background: var(--color-primary);
    border: 1px solid var(--color-secundary);
    border-right: none;
}

.cardProduct__payment-content:nth-of-type(2), .cardProduct__payment-content:nth-of-type(3) {
    margin-block: .25vw 0;
}

.cardProduct__payment-title {
    color: var(--color-white);
    font-family: var(--font-family-bold);
    font-size: .8vw;
    text-align: center;
}

.cardProduct__payment-subtitle {
    color: var(--color-white);
    font-family: var(--font-family-light);
    font-size: .65vw;
    text-align: center;
}

.cardProduct__payment-text {
    color: var(--color-white);
    font-family: var(--font-family-light);
    font-size: .5vw;
    text-align: center;
}

.cardProduct__texts {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 6vw;
}

.cardProduct__title {
    font-family: var(--font-family-light);
    font-size: 1vw;
    margin-block: .6vw auto;
    margin-inline: .6vw;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cardProduct__price {
    font-family: var(--font-family-light);
    font-size: .9vw;
    margin-block: auto 1vw;
    margin-inline: .6vw;
}


.cardProduct__buy-text {
    color: var(--color-white);
    font-family: var(--font-primary-bold);
    font-size: .9vw;
    margin-inline: .8vw;
}

.cardProduct__product:hover:after {
    width: calc(100% + 8px);
    height: calc(100% + 10px);
    top: -5px;
    left: -4px;
    right: -4px;
    bottom: -5px;
    border-color: var(--color-btn);
}

.cardProduct__product:hover .cardProduct__img {
    transform: scale(1.1);
}

.cardProduct__product:hover .cardProduct__buy {
    transform: scale(1.05);
}

.cardProduct__product:hover .cardProduct__buy-icon {
    transform: translateX(0);
    opacity: 1;
}

.cardProduct__card {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 0.8;
    position: absolute;
    bottom: 0px;
    right: -1px;
    width: 2vw;
    border-bottom-right-radius: 1vw;
    background: var(--color-tercery);
    border: 1px solid var(--color-tercery);
    cursor: pointer;
    transition: .3s all ease;
}

.cardProduct__card:after {
    content: '';
    width: calc(100% - 3px);
    height: calc(100% - 3px);
    margin: 5% 0% 0% 5%;
    border: 1px solid var(--color-secundary);
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom-right-radius: 1vw;
}

.cardProduct__card:hover {
    transform: scale(1.1);
    background: var(--color-primary);
}

.cardProduct__card:hover:after {
    border: 1px solid var(--color-primary);
}

.cardProduct__card:hover .cardProduct__icon {
    filter: invert(1);
}

.cardProduct__icon {
    width: 50%;
    transition: .4s all ease-in;
}

.cardProduct__whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 0.8;
    position: absolute;
    bottom: 0px;
    right: 2vw;
    width: 2vw;
    border-top-left-radius: .7vw;
    background: #2EB743;
    border: 1px solid #2EB743;
    cursor: pointer;
    transition: .3s all ease;
}

.cardProduct__whatsapp:after {
    content: '';
    width: calc(100% - 3px);
    height: calc(100% - 3px);
    margin: 5% 0% 0% 5%;
    border: 1px solid var(--color-secundary);
    position: absolute;
    bottom: 0;
    right: 0;
    border-top-left-radius: .7vw;
}

.cardProduct__whatsapp:hover {
    transform: scale(1.1);
    border: 1px solid var(--color-tercery);
}

.cardProduct__whatsapp:hover:after {
    border: 1px solid #2EB743;
}

.cardProduct__whatsapp:hover .cardProduct__icon {
    filter: invert(1);
}

.cardProduct__whatsapp .cardProduct__icon {
    filter: invert(1);
}

.cardProduct__none {
    color: var(--color-secundary);
    font-family: var(--font-family-light);
    font-size: .8vw;
    white-space: no-wrap;
    padding: .2vw .8vw;
    position: absolute;
    bottom: 0px;
    right: -1px;
    border-bottom-right-radius: 1vw;
    border-top-left-radius: .7vw;
    background: var(--color-tercery);
    border: 1px solid var(--color-tercery);
    cursor: pointer;
    transition: .3s all ease;
}

.cardProduct__none:after {
    content: '';
    width: calc(100% - 3px);
    height: calc(100% - 3px);
    margin: 5% 0% 0% 5%;
    border: 1px solid var(--color-secundary);
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom-right-radius: 1vw;
    border-top-left-radius: .7vw;
}

@media screen and (max-width: 600px) {
    body { max-width: 100vw; overflow-x: hidden; }
    .varTitle { font-size: 5vw; }
    .varTitle:before { height: 2px; bottom: -1.5px; width: 60%; }
    /* Home */
    .home { flex-direction: column-reverse; align-items: center; max-width: 100vw; overflow-x: hidden; }
    .home__container { width: 90vw; height: 90vw; margin-inline: auto; margin-block: 3vw 0; border-radius: 5vw; }
    .home__container:nth-of-type(2) { margin-inline: auto; }
    .home__send { font-size: 6vw; width: 8vw; height: 8vw; top: 2vw; right: 2vw; }
    .home__btns { right: 1.5vw; }
    .home__options { height: 4vw; width: .5vw; border-radius: .25vw; margin-block: .5vw; }
    .home__select { font-size: 6vw; width: 3.5vw; height: 7vw; border-radius: 1.75vw; margin-block: 1vw; }
    .home__texts { left: 6vw; }
    .home__title { font-size: 6.5vw; width: 65vw; }
    .home__video { display: none; }
    .home__title:after { width: 70vw; left: -10vw; bottom: -1vw; }
    .home__subtitle { font-size: 4vw; width: 70vw; margin-block: 3vw 0; }
    .home__text { font-size: 4vw; width: 70vw; display: none; }
    .home__btn { font-size: 4vw; padding: 1vw 3vw; border-radius: 3vw; margin-block: 8vw 0; }
    /* Category */
    #categoryContainerRespo { display: block; }
    #categoryContainer { display: none; }
    /* Info */
    .info { flex-wrap: wrap; border-radius: 5vw; padding-block: 5vw; display: none; }
    .info::after { right: 7vw; bottom: .7vw; }
    .info::before { left: 7vw; top: .7vw; }
    .info__container { display: block; width: 40%; margin-inline: 5%; margin-block: 5vw; }
    .info__content { width: 100%; }
    .info__img { width: 25%; }
    .info__title { font-size: 2.5vw; text-align: center; margin-block: 2vw 0; }
    /* Sales */
    .sales { margin-block: 9vw 0; border-top-right-radius: 4vw; border-bottom-right-radius: 4vw; max-width: 100vw; overflow-x: hidden; }
    .sales__container { flex-direction: column; padding-block: 6vw; justify-content: center; }
    .sales__container:after { height: 80%; }
    .sales__texts { margin-inline: 8vw; }
    .sales__title { font-size: 15vw; }
    .sales__subtitle { font-size: 5vw; }
    .sales__time { margin-inline: 8vw; margin-block: 5vw 0; }
    .simply-section { width: 17vw; border-radius: 2vw; }
    .simply-word { font-size: 3vw; }
    .simply-amount { font-size: 5vw; }
    .sales__text { font-size: 4vw; margin-block: 4vw 2vw; }
    .sales__register { font-size: 4vw; padding: 1vw 3vw; border-radius: 3vw; }
    /* About */
    .about__title { font-size: 5vw; }
    .about__title:before { height: 2px; bottom: -1.5px; width: 60%; }
    .about__container { flex-direction: column; align-items: start; margin-block: 8vw 0; }
    .about__content { width: 90%; }
    .about__logo { width: 60vw; }
    .about__imgs { width: 70vw; margin-block: 2vw; }
    .about__section { font-size: 4vw; } 
    .about__subtitle { font-size: 3vw; margin-block: 3vw; }
    .about__text { font-size: 3vw; }
    .about__text b { font-size: 3vw; }
    .about__btn { font-size: 3.2vw; padding: 1vw 3vw; margin-block: 4vw 0;}
    .about__content:nth-of-type(1) { margin-inline: auto; }
    .about__content:nth-of-type(2) { margin-block: 4vw 0; margin-inline: auto; }
    .about__content:nth-of-type(2)::after { top: -5vw; }
    .about__img { width: calc(100% / 5); border-bottom-left-radius: 2vw; border-top-right-radius: 4vw; border-bottom-right-radius: 4vw; border-top-left-radius: 2vw; }
    .about__redes { margin-block: 2vw 0; }
    .about__btns:nth-of-type(3) { margin-block: 1vw 0; }
    .about__btns { padding: 1vw 3vw; margin-inline: .5vw; border-radius: 3vw; align-items: center; }
    .about__icon { width: 3.4vw; margin-inline: 0 1vw; }
    .about__link { font-size: 2.3vw; }
    /* Year */
    .year { margin-block: 10vw; display: none; }
    .year__container { padding-block: 10vw; }
    .year__titles { margin-block: 0 8vw; }
    .year__title { font-size: 5.6vw; }
    .year__subtitle { font-size: 5.6vw; }
    .year__head { font-size: 4.7vw; max-width: 90%; }
    .year__head:after { width: 2px; }
    /* Recomended */
    .recomended { padding-block: 10vw 0; }
    .recomended:before { display: flex; }
    .recomended:after { display: flex; }
    .recomended__title { font-size: 5vw; }
    .recomended__title:before { height: 2px; bottom: -1.5px; width: 60%; }
    .recomended__container { width: 80%; margin-inline: 10%; overflow: auto; padding-block: 0 2vw; }
    .recomended__content { border-radius: 4vw; }
    .recomended__offert { font-size: 3.2vw; padding: .8vw 2vw; top: 3vw; filter: drop-shadow(4px 2px 2px black); }
    .recomended__slider { width: 800%; }
    .recomended__items { width: 50%; }
    .recomended__items:nth-of-type(3) { display: none; }
    .recomended__items:nth-of-type(4) { display: none; }
    .recomended__selects { display: none; }
    .recomended__details { padding: 2.5vw; border-bottom-left-radius: 4vw; border-bottom-right-radius: 4vw; aspect-ratio: 4/1; }
    .recomended__name { font-size: 3vw; margin-block: 0 4vw; }
    .recomended__price { font-size: 2.5vw; }
    .recomended__none { font-size: 3vw; padding: .8vw 2vw; border-top-left-radius: 2vw; }
    .recomended__none:after { border-bottom-right-radius: 4vw; border-top-left-radius: 2vw; }
    .recomended__card { width: 7vw; }
    .recomended__card:after { width: 90%; height: 90%; border-bottom-right-radius: 4vw; }
    .recomended__whatsapp { right: 7vw; width: 7vw; border-top-left-radius: 2vw;}
    .recomended__whatsapp:after { width: 90%; height: 90%; border-top-left-radius: 2vw; }
    /* Hormax */
    .hormax { margin-block: 8vw 4vw; }
    .hormax__title { font-size: 5vw; }
    .hormax__title:before { height: 2px; bottom: -1.5px; width: 60%; }
    .hormax__logo { width: 60vw; margin-block: 5vw 2vw; }
    .hormax__text { font-size: 3vw; width: 100%; }
    .hormax__container { flex-direction: column-reverse; }
    .hormax__content:nth-of-type(1) { width: 100%; }
    .hormax__content:nth-of-type(2) { width: 100%; margin-block: 0 4vw; }
    .hormax__redes { display: flex; }
    .hormax__btns:nth-of-type(3) { margin-block: 1vw 0; }
    .hormax__btns { padding: 1vw 3vw; margin-inline: .5vw; border-radius: 3vw; align-items: center; }
    .hormax__icon { width: 3.4vw; margin-inline: 0 2vw; }
    .hormax__btn { font-size: 2.3vw; text-align: center; }
    /* Thing */
    .thing__text { font-size: 2.5vw; }
    /* Products */
    .productsContent { margin-block: 6vw; width: 95vw; }
    .productsContent__texts { justify-content: center; }
    .productsContent__title {  font-size: 5vw; }
    .productsContent__title:before { height: 2px; bottom: -1.5px; width: 60%; }
    .productsContent__options { width: max-content; overflow: auto; padding-block: 2vw; }
    .productsContent__option { font-size: 3vw; padding: .5vw 2vw; margin-inline: 1vw; border-radius: 3vw; }
    .productsContent__option:hover { color: var(--color-dark); background: transparent; border: 1px solid transparent; opacity: .7; }
    .productsContent__container { flex-direction: column-reverse; }
    .productsContent__publi { display: none; }
    .productsContent__publi::before { background: none; }
    .productsContent__publi-texts { width: 100%; height: 100%; top: 0; left: 0; justify-content: center; align-items: center; }
    .productsContent__publi-title { width: 75%; font-size: 5vw; text-align: center; margin-block: 0 3vw; }
    .productsContent__publi-text { font-size: 4vw; text-align: center; }
    .productsContent__publi-btn { margin-inline: auto; margin-block: 3vw 0; padding: 1vw 4vw; border-radius: 4vw; }
    .productsContent__publi-btn-text { font-size: 4vw; margin-inline: 4vw; }
    .productsContent__publi-btn-icon { width: 4vw; transform: translateX(0); opacity: 1; }
    .productsContent__cards { width: calc(100% - 2vw); padding-inline: 0; margin-inline: 0; overflow: auto; }
    .productsContent__container:hover .productsContent__cards-btn { transform: scale(0); }
    .productsContent__container:hover .productsContent__cards-btn:nth-of-type(1) { transform: scale(0); }
    .productsContent__container:hover #productsBtnMoveLeft { transform: scale(0) }
    .productsContent__cards-slider { width: 100%; flex-wrap: wrap; justify-content: center; height: max-content; margin-block: 0; }
    .cardProduct__product { width: 42vw; margin: 1.5vw; display: flex; height: auto; flex-direction: column; border-radius: 2.5vw; }
    .cardProduct__imgs { border-top-left-radius: 2.5vw; border-top-left-radius: 2.5vw; }
    .cardProduct__payment { top: 8vw; }
    .cardProduct__payment-content { padding: 1vw 1.5vw; border-top-left-radius: 1.5vw; border-bottom-left-radius: 1.5vw; }
    .cardProduct__payment-content:nth-of-type(2), .cardProduct__payment-content:nth-of-type(3) { margin-block: .5vw 0; }
    .cardProduct__payment-title { font-size: 2.1vw; }
    .cardProduct__payment-subtitle { font-size: 1.7vw; }
    .cardProduct__payment-text { font-size: 1.5vw; }
    .cardProduct__product:after {
        width: 100%;
        height: 100%;
        top: -1px;
        left: -1px;
        border: 1px solid #e6e6e6;  
    }
    .cardProduct__product:hover .cardProduct__buy { height: max-content; }
    .cardProduct__offert { font-size: 2vw; padding: .8vw 2vw; border-top-left-radius: 3vw; border-bottom-left-radius: 3vw; top: 3vw; }
    .cardProduct__offert b { font-size: 2vw; }
    .cardProduct__texts { height: 18vw; }
    .cardProduct__title { font-size: 2.8vw; -webkit-line-clamp: 2; margin-inline: 2.5vw; margin-block: 2vw auto; }
    .cardProduct__price { font-size: 2.8vw; margin-inline: 2.5vw; margin-block: 0 2vw; }
    .cardProduct__buy { height: max-content; margin-block: auto 2vw; }
    .cardProduct__buy-btn { width: auto; margin-inline: auto; margin-block: 1vw 0; padding: 1.5vw 4vw; border-radius: 4vw; }
    .cardProduct__buy-text { font-size: 2.2vw; text-align: center; margin-inline: 3vw; }
    .cardProduct__buy-icon { width: 2.6vw; transform: translateX(0); opacity: 1; }
    .cardProduct__product { display: none; }
    .cardProduct__product:nth-of-type(1) { display: flex; }
    .cardProduct__product:nth-of-type(2) { display: flex; }
    .cardProduct__product:nth-of-type(3) { display: flex; }
    .cardProduct__product:nth-of-type(4) { display: flex; }
    .cardProduct__card { width: 5.5vw; }
    .cardProduct__card:after { width: 90%; height: 90%; border-bottom-right-radius: 4vw; }
    .cardProduct__whatsapp { right: 5.5vw; width: 5.5vw; border-top-left-radius: 2vw;}
    .cardProduct__whatsapp:after { width: 90%; height: 90%; border-top-left-radius: 2vw; }
    .cardProduct__none { font-size: 2.2vw; padding: .8vw 2vw; border-top-left-radius: 2vw; }
    .cardProduct__none:after { border-bottom-right-radius: 4vw; border-top-left-radius: 2vw; }
}