/*@tailwind base;*/
/*@tailwind components;*/
/*@tailwind utilities;*/
@import url('https://fonts.googleapis.com/css2?family=Grandiflora+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=WindSong:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Delius&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playwrite+DK+Uloopet:wght@100..400&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap')*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: "Roboto",sans-serif;*/
    font-weight: 100;
    font-family: var(--fuente-general);
}

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

    /*transition: opacity 0.5s linear;*/
}

:root{
    --fuente-titulo: "WindSong", sans-serif;
    --fuente-dashed: "Playwrite DK Uloopet", sans-serif;
    --fuente-general: "Roboto Flex", sans-serif;
    --fuente-subtitulos: "Playfair Display",sans-serif;
    --coloreado-gradiente-one : rgb(224,246,255);
    --coloreado-gradiente-two: radial-gradient(circle, rgba(224,246,255,0.9164040616246498) 21%, rgba(150,211,249,0.8883928571428571) 80%, rgba(79,178,244,0.8491771708683473) 100%);
}

.spinnerActive {
    filter: blur(15px);
}

.containerCharging {
    width: 200px;
    height: 200px;
    background: none;
    /*border: 2px solid black;*/
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    /*position: relative;*/
}

.circle {
    border-radius: 50%;
    border: 10px solid rgba(0, 0, 0, .1);
    border-left-color: transparent;
    width: clamp(100px, 20vw, 175px);
    height: clamp(100px, 20vw, 175px);
    background: white;
    position: relative;
    animation: rotation 3s infinite linear;
    will-change: transform;
}

.circle > span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(12.5px, 2.5vw, 25px);
    color: black;

    animation: counterRotate 3s infinite linear;
}

@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes counterRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(-360deg); }
}


.ml-4{
    display: none; !important;
}

.afterPay{
    animation: hiddenBody 2s ease-in-out;
}
@keyframes hiddenBody {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}


.animate-item{
    animation: showPage 0.5s linear;
}
.animate-sub{
    animation: mostrarSubtitle 1s linear;
}
.animate-color{
    animation: vanishColor 0.5s linear;
}
.animate-showBody{
    animation: bodyShow 0.5s linear;
}

@keyframes bodyShow{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes mostrarSubtitle{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes showPage {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes vanishColor {
    0% {
        background: rgba(173, 216, 230, 1); /* 🔵 lightblue en formato rgba */
    }
    100% {
        background: rgba(173, 216, 230, .25); /* 🔥 lightblue completamente transparente */
    }
}


button{
    transition: all 0.15s linear;
    background: white;
}

.colorSection{
    background: rgb(224,246,255);
    background: radial-gradient(circle, rgba(224,246,255,0.9164040616246498) 21%, rgba(150,211,249,0.8883928571428571) 80%, rgba(79,178,244,0.8491771708683473) 100%);
}

main{

    background: rgb(224,246,255);
    background: radial-gradient(circle, rgba(224,246,255,0.9164040616246498) 21%, rgba(150,211,249,0.8883928571428571) 80%, rgba(79,178,244,0.8491771708683473) 100%);
}

.countProduct{
    width: 100%;
    display: block;
    position: absolute;
    right: -10px;
    text-align: center;
    font-size: 120px;
    align-self: center;
    font-weight: 900;
    font-stretch: expanded;
    /*color: grey;*/
    opacity: 0.2;

    background: linear-gradient(to bottom, black 20%, rgba(0, 0, 0, 0.5) 50%, transparent 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.catalogo{
    padding-bottom: 30px;
}
.catalogo>h1{
    margin: 0 auto;
    width: 90%;
    font-size: 35px;
    padding: 55px 0;
    font-weight: 500;
    text-align: center;
    font-family: var(--fuente-subtitulos);
}
.catalogoElements{
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap:wrap;
    gap: 25px;
    justify-content: center;
}
.catalogoElements>div{
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 15px;
    height: 550px;
    width: 275px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.elemento{
    position: relative;
}

.elemento>h2{
    position: absolute;
    top: 50%;
    z-index:2;
    font-size: 30px;
    background: transparent;
    font-weight: 200;
}
.elemento>video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: opacity(0.6);
    border-radius: 15px;
}
.navegador>div:nth-of-type(2){
    /*width: 100%;*/
    width: fit-content;
}

.containerCategorias{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 0;
    gap: 25px;
}
.containerCategorias>h1{
    font-size: 27.5px;
}
.category{
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: space-evenly;
}
.categoryElement{
    width: 275px;
    height: 450px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /*gap: 10px;*/
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    border-radius: 7.5px;
    font-size: 15px;
    transition: all 0.25s ease-in-out;

    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,0.3617822128851541) 6%, rgba(75,196,255,0.29735644257703087) 49%, rgba(145,218,255,0.6026785714285714) 93%);
}
.categoryElement>img{
    width: 100%;
    border-radius: 7.5px;
    aspect-ratio: 1;
    object-fit: cover;
}
.categoryElement>div{
    display: flex;
    justify-content: space-between;
    gap: 50px;
}
.categoryElement>small{
    width: 90%;
    margin: 0 auto;
    font-weight: bold;
    font-size: 15px;
    text-align: end;
}
.categoryElement>div>button{
    font-size: 12.5px;
    border-radius: 7.5px;
    flex: 1;
    padding: 0 5px;
    height: 35px;
    outline: none;
    border: 2px solid transparent;
    transition: all 0.25s ease-in-out;
}
.categoryElement>div>button:hover{
    border: 2px solid gray;
}


.marcas{


}
.marcas>h1{
    text-align: center;
    /*line-height:2;*/
    font-size: 50px;
    padding:  25px 0 55px 0;
    font-family: var(--fuente-subtitulos);
    font-weight: 500;
}
.containerMarcas{
    padding: 25px 0;
    width: 60%;
    margin: 0 auto;
    display: grid;
    gap: 25px;
    grid-template-areas:
        "marca_1 marca_1 marca_1"
        "marca_2 marca_2 marca_3"
        "marca_5 marca_4 marca_4"
        "marca_6 marca_6 marca_6"
        "marca_7 marca_8 marca_10"
        "marca_7 marca_9 marca_10";
    grid-auto-rows: 300px;
    /*grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;*/
    /*grid-template-columns:350px 1fr 350px;*/
}
.containerMarcas>div{
    border: 1px solid black;
    border-radius: 15px;
    font-size: 50px;
    padding: 0 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: font-size 0.3s ease, background-color 0.3s ease;

}
.marca>div{
    font-family: var(--fuente-subtitulos);
}


.marcaOne{
    grid-area: marca_1;

}
.marcaTwo{
    grid-area: marca_2;
}
.marcaThree{
    grid-area: marca_3;
}
.marcaFour{
    grid-area: marca_4;
}
.marcaFive{
    grid-area: marca_5;
}
.marcaSix{
    grid-area: marca_6;
}
.marcaSeven{
    grid-area: marca_7;
}
.marcaEight{
    grid-area: marca_8;
}
.marcaNine{
    grid-area: marca_9;
}
.marcaTen{
    grid-area: marca_10;
}
.marca{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.marca:hover{
    font-size: 65px;
    transition: font-size 0.3s ease, background-color 0.3s ease;
}

.containerCheck{
    /*box-shadow: 0 0 5px rgba(0,0,0,0.8);*/
    border: 3px solid rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 200px;
    min-height: 200px;
    justify-content: center;
    background: white;
    /*padding: 20px;*/
}

.containerCheck>svg{
    width: 60px;
    height: 60px;
}
.containerCheck>h2{
    text-align: center;
    width: 80%;
}
.returnYapePlin{
    display: none;
    position: absolute;
    top: 25px;
    left: 25px;
    height: 45px;
    width: 45px;
    border: 1px solid transparent;
    transition: all 0.25s ease-in-out;
}
.returnYapePlin:hover,.deleteYapePlin:hover{
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.containerMenuSmallWindow {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

.tickButton{
    /*filter: blur(2.5px);*/
    color: white;
}
#contador-carrito{
    opacity:0;
}



/*283->marcas*/
/*344->infoCenterIndex*/
/*456->product-detail*/
/*574->gridInfo*/
/*672->compraPlantillaRender*/
/*702->masVendidosIndex*/
/*693->compraElementCompra*/
/*831->nuestroCatalogoIndex*/
/*980->containerYapePlin*/

/*1281->mediaquerya 640px*/
/*1530->mediaquery 768px*/
html{
    position:relative;
}
#menuSmallWindow{
    transition: all 0.35s ease-in-out;
}
.titleAndExit{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 20px;
}
.titleAndExit>svg{
    width: 30px;
    height: 30px;
    border-radius: 7.5px;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: all 0.25s  ease-in-out;
}
.titleAndExit>svg:hover{
    /*background: orange;*/
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    transition: all 0.25s  ease-in-out;

}
.titleAndExist>svg path{
}
.containerMenuSmallWindow{
    background: rgba(145,218,255,0.9);

    border-radius: 12px;
    position: absolute;
    top: 200px;
    left: -300px;
    display: flex;
    flex-direction: column;
    padding: 35px 0;
    gap: 20px 0;
    opacity: 0;
    box-shadow: 0 0 10px rgba(0,0,0,1);

    transition: all 0.5s ease-in-out;
}

@keyframes inicioMenu{
    0%{
        left:-300px;
    }
    100%{
        left:0;
    }

}
.listaSmall svg{
}
.listaMarcaIcon>svg>path{
    pointer-events: none; !important;
}


.listaSmall>ul>li{
    border-radius: 7.5px;
}

.listaMarcaIcon{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    /*border-bottom: 1px solid gray;*/
    /*display: none;*/
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.listaMarcaIcon>b:hover{
    transition: all 0.2s linear;
    color: cornflowerblue;
}

.containerMenuSmallWindow>div{
    transition:height 0.25s ease-in-out;
}
.containerMenuSmallWindow>div>div>svg{
    height: 35px;
    width: 35px;
    z-index: 2;
    border-top: 2px solid transparent;
    transition: border-color 0.35s ease-in-out;
}
.containerMenuSmallWindow>div>div>svg:hover{
    border-color: gray;
}
.containerMenuSmallWindow>div>div>svg>path{
    pointer-events: none;
}
.listaSmall> ul {
    padding-top: 20px;
    display: none;
    border-radius: 7.5px;
    opacity: 0;
    height: 0; /* Cambiar height a max-height */
    transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out;
    list-style: none;

}
.containerMenuSmallWindow>div>ul li{
    /*padding: 10px 40px;*/
    padding: 10px 30px;
    /*margin-top: 20px;*/
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    box-shadow: 0 0 15px rgba(0,0,0,0);
    transition: box-shadow 0.35s ease-in-out;
}
.containerMenuSmallWindow>div>ul li:hover{
    transition: box-shadow 0.35s ease-in-out;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}




.activeBody{
    filter: blur(5px) grayscale(50%);
}
.sectionBusqueda{
    min-width: 450px;
    min-height: 600px;
    border-radius: 12px;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
}
.sectionBusquedaNew{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2.5px 20px;
    height: 50px;
    width: 100%;
    border-bottom: 1px solid gray;
}
.sectionBusquedaNew>svg:nth-of-type(1){

}
.sectionBusquedaNew>input{
    width: 90%;
    display: block;
    border: none;
    background: none;
    font-size: 15px;
    padding: 5px 7.5px;
    outline: none;
}
.sectionBusquedaNew>svg:nth-of-type(2){


}
.productosFiltrados{

}

/*-----ocultar todas las X de los input tipo search-----------*/
/* Oculta la "X" en el campo de búsqueda */
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

input[type="search"]::-ms-clear {
    display: none;
}

input[type="search"]::-moz-search-clear-button {
    display: none;
}


main{
}
.containeCards {
    display: grid;
    width: 80%;
    margin: 25px auto;
    background: #e74c3c;
    grid-template-columns: repeat(auto-fill, 350px); /* Cada tarjeta tiene un ancho fijo de 350px */
    gap: 25px 0 ; /* El espacio entre las celdas */
    justify-content: space-evenly; /* Distribuir el contenido con espacio uniforme entre las celdas */
}

.cardElement {
    width: 350px; /* Las tarjetas tendrán un ancho fijo de 350px */
    height: 350px;
    border: 2px solid yellow;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: black;
}
.cardElement:hover{
    background: lightyellow;
}
.cardElement>h1{
    font-size: 150px;
    font-weight: 100;
}
/*---------------------------------------------header-----------------------------------------*/
#header{
    /*overflow: hidden;*/
    user-select: none;
}
.carouselImages{
    user-select: none;
}

.cPartOne>svg{
    background: #000;
    color:#000;
    fill: black;
}
.nameStore{
    text-decoration: none;
    font-size: 35px;
    color: black;
    font-weight: bold;
    /*font-family: var(--fuente-subtitulos);*/
    /*font-family: roboto, sans-serif;*/
}
.carousel{
     overflow: hidden;
 }
.containerCarrito{
    width: 100%;
    display: flex;
    align-items: center;
    /*overflow: hidden;*/
    animation: carrito 25s linear infinite;
    line-height: 2;
}

.c_partOne{
    font-family: "Roboto Flex", sans-serif;
    font-weight: 200;
    min-width: 120%;
    text-align: center;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,0.8281687675070029) 0%, rgba(75,196,255,0.5830707282913166) 0%, rgba(104,205,255,0.4962359943977591) 52%, rgba(145,218,255,0.7959558823529411) 92%);
    display: flex;
    gap: 0 10px;
    padding: 5px 0;
    justify-content: center;
    align-items: center;
    font-size:15px;
    white-space: nowrap;
}
@keyframes carrito {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-120%);
    }

}

/*-----nav-----*/
#nav{
    display: flex;
    flex-direction: column;
    align-items: center;

}
/*---------overPlay----------*/
.busquedaInteractiva{
    border: 2px solid black;
    border-radius: 12px;
    padding: 2.5px;
    display: flex;
    flex-direction: column;
    /*width: 400px;*/
    /*min-height: 600px;*/
    pointer-events: none;
    position: absolute;
    top: 250px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    box-shadow: 0 0 35px rgba(0, 0, 0, 1);
    opacity: 0;
    transition: all 0.25s linear;
    width: 500px;
    font-size: 16px;
    min-height: 200px;
    /*max-height: 500px;*/
    /*overflow-y: scroll;*/
}
.show-animation-busqueda{
    animation: showBusqueda .25s linear;
}
@keyframes showBusqueda {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


.busquedaInteractiva > ul > li span{
    font-size: 5px;
}
.activeBusqueda{
    opacity: 1;
    pointer-events: auto;
}
.iconsBusqueda{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 5px;
    padding: 12.5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.iconsBusqueda>input{
    width: 80%;
    outline: none;
    background: none;
    font-size: 15px;
    font-weight: 100;
    height: 35px;
    border: 1px solid lightblue;
    border-radius: 7.5px;
    padding: 0 10px;
}
.iconsBusqueda>svg{
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
}

/*----------tittle busqueda e iconos--------------------*/
/*.navegador{*/
/*    width: 90%;*/
/*    padding: 25px 0;*/
/*    margin: 0 auto;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    position: relative;*/

/*}*/

.navegador{
    width: 100%;
    position: relative;
    /*border-bottom: 1px solid black;*/
}
.navegador>div{
    width: 70%;
    display:flex;
    justify-content: space-between;
}
.navegador>div:nth-of-type(1){

}
.navegador>div:nth-of-type(2){
    /*font-family: "poiret", cursive;*/
    font-family: var(--fuente-dashed);
    color: black;
    font-size: 10px;
}

.navegador>div>a{
    /*font-family: "WindSong", cursive;*/
    font-family: var(--fuente-subtitulos);
    font-weight: 100;
    line-height: 1;
    font-size: clamp(40px,7.5vw,70px);
    text-align: center;
    white-space: nowrap;
    /*border: 2px solid black;*/
}
.containerIcons{
    /*width: 60%;*/
    display: flex;
    /*gap: 0 15px;*/
}
/*----search and options*/
.searchAndOptions{
    position: relative;
    padding: 12.5px 0;
    /*transform: translateX(-50%);*/
}
.searchAndOptions>input{
    /*position: absolute;*/
    left: 0;
}
/*---template busqueda---*/

.searchAndOptions>ul{
    opacity:0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12.5px;
    transition: all 0.25s linear;

}
.searchAndOptions>ul>li{
    background: rgba(145,218,255,0.8);
    flex:1;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    border-radius: 7.5px;
    font-size: 15px;
    height: 80px;
    min-height: 80px;
    transition: all 0.15s ease-in-out;
    gap: 20px;
    border: 5px solid transparent;
}
.searchAndOptions>ul>li:hover{
    border: 5px solid cornflowerblue;
}


.searchAndOptions>ul>li>img{
    min-width: 75px;
    min-height: 75px;
}



.searchAndOptions>ul>li>span:nth-of-type(2){
    font-weight: bold;
}
/*.searchAndOptions>*/
.activeTransition{
    transition: background-color 0.5s ease-in-out;
}
.searchAndOptions>ul>li>div{
    display: flex;
    gap: 5px;
    align-items: center;
    flex: 1;
    font-size: 17.5px;
}

.searchAndOptions>ul>li>div>span:nth-of-type(2){
    display: flex;
    gap: 5px;
    align-items: center;
}
.searchAndOptions>ul>li>span:nth-of-type(1){
    font-weight: bold;
    font-size: 17.5px;
}
.searchAndOptions>ul>li>img{
    height: 75px;
    width: 75px;
    object-fit: cover;
    /*border: 1px solid black;*/
    box-shadow: 0 0 5px rgba(0,0,0,0.6);
    border-radius: 7.5px;
    /*aspectratio: 1;*/
}
.searchAndOptions>ul>li>span{
}
.searchAndOptions>ul>li:hover{
    /*background: rgba(145,218,255,0.5);*/
    border-radius: 12px;
    transition: border 0.15s ease-in-out;
}
.searchAndOptions>ul>li:not(:hover){
    filter: blur(0.2px);
}
.containerIcons>div>input{
    width: 100%;
    border-radius: 15px;
    padding: 7.5px 10px;
    font-weight: bold;
    border: 2px solid black;
}

#iconsNav{
    /*width: 15%;*/
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    list-style: none;
    gap: 25px;
}
#iconsNav>li{
    font-size: 20px;
    display: flex;
    align-items: center;
    /*padding: 5px;*/
}
#iconsNav>li>i{
    background: transparent;
}
#iconsNav>li:nth-child(1){

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 50%;
    /*transition: background-color 0.35s ease-in-out;*/
    transition: box-shadow 0.35s linear;
    z-index:1;
}
#iconsNav>li:nth-child(1)::before{
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /*background: lightblue;*/
    z-index:-1;
    position: absolute;
    border: 2px solid transparent;
    transition: border 0.25s linear;
    /*animation: palpito 1s infinite linear;*/
}
#iconsNav>li:nth-child(1):hover::before{
    border-color: lightblue;
}
/*#iconsNav>li:nth-child(1)>svg{*/
/*    background: white;*/
/*    border-radius: 50%;*/
/*    width: 25px;*/
/*    height: 25px;*/
/*    border: 1px solid transparent;*/
/*    position: relative;*/
/*}*/
/*#iconsNav>li:nth-child(1)>svg::before{*/
/*    content: '';*/
/*    width: 35px;*/
/*    height: 35px;*/
/*    position: absolute;*/
/*    border: 1px solid black;*/
/*    border-radius: 50%;*/
/*}*/


/*#iconsNav>li:nth-child(1)>svg:hover{*/
/*    !*box-shadow: 0 0 10px rgba(0,0,0,0.5)*!*/
/*    border: 1px solid black;*/
/*}*/

@keyframes palpito{
    0%{
        transform: scale(1,1);
        /*opacity: 1;*/
    }
    50%{
        opacity: 0.75;
    }
    100%{
        opacity: 0.50;
        transform: scale(2);
    }
}



#carrito{
    position:relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#carrito>div{
    position:absolute;
    top: -10px;
    right: -10px;
    /*z-index: 2;*/
    background: white;
    padding: 1px 0;
    width: 17.5px;
    height: 17.5px;
    border: 1px solid black;
    border-radius:15px;
    font-size: 10px;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#contador-carrito{
    display: flex;
    align-items: center;
    justify-content: center;
    /*background: rgba(173, 216, 230, 0.6)*/
    /*border: 1px solid black;*/

}

@keyframes crecimiento{
    0%{
        transform: scale(1,1);
    }
    100%{
        transform: scale(1.5);
    }
}
#contador-carrito::after{
    content: '';
    width: 12.5px;
    height: 12.5px;
    border-radius: 50%;
    border: 1px solid lightblue;
    position: absolute;
    z-index: -1;
    pointer-events: none;

    animation: crecimiento 1s infinite linear;
}
#contador-carrito::before{
    content: '';
    width: 15px;
    height: 15px;
    background: lightblue;
    border-radius: 50%;
    position: absolute;
    z-index: -2;
    pointer-events: none;

    animation: pulse 1s infinite linear;
}

@keyframes pulse{
    0%{
        transform: scale(1,1);
        opacity: 0.75;
    }
    50%{
        opacity: 0.50;
    }
    100%{
        opacity: 0.25;
        transform: scale(3);
    }
}


.active_carrito2{
    transform: scale(2);
    background: green;
}




/*---TEMPLATE CARRITO BOX----*/

.cajitaCompras{
    width: 300px;
    border: 2px solid black;
    border-radius: 12px;
    background: rgba(145,218,255,1);
    padding: 15px;
    position: absolute;
    top: 150%;
    right: 10%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    gap: 10px 0;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    font-size: 17px;
}


.cajitaCompras *{
    /*font-size: 17px;*/
}
.sinCompras{
    justify-content: center;
    align-items: center;
    width: 1px;
    height: 1px;
    text-align: center;
    border-radius:50%;
    right: 50%;
    transform: translateX(50%);
    border: 2px solid gray;
    font-size: 13px;
    font-weight: 100;
    padding: 10px;
    position: absolute;
    top: 105%;
    z-index: 4;
    display: flex;
    transition: opacity 0.35s ease-in-out;
}

.containerBox{
    display: flex;
    flex-direction: column;
    gap: 10px 0;
}
.containerBox>section{
    transition: opacity 0.5s ease-in-out;
}
.productCarrito{
    position: relative;
    width: 100%;
    display: flex;
    gap: 10px;
    border: 1px solid black;
    border-radius: 7.5px;
    padding: 10px 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.8);
}
.productCarrito>img{
    border-radius: 7.5px;
    box-shadow: 0 0 2.5px rgba(0,0,0,0.8);
    aspect-ratio: 1;
    object-fit: cover;
}
.productCarrito>div{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.productCarrito>div>span:nth-of-type(2){
    font-weight: bold;
}

.product-image{
    width: 30%;
}

.menu{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 90%;
    padding: 25px 0;
    justify-content: space-evenly;
    margin: 0 auto;
    /*gap: 0 25px;*/
}
.listaInicio{
    padding: 20px 0;
    gap: 10px;
    border-radius: 7.5px;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    list-style: none;
    position: absolute;
    display: flex;
    flex-direction: column;
    opacity: 0;
    top: 130%;
    z-index: 2;
    /*padding: 5px 0;*/
    background: rgba(145,218,255,0.9);
    transition: all 0.35s ease-in-out;
    pointer-events: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}


.listaInicio>li{
    /*transition*/
    padding: 7.5px;
    opacity: 0;
    border-radius: 7.5px;
    white-space: nowrap;
    transition: all 0.35s ease-in-out;
    font-size: 16px;
}
.listaInicio>li:hover{
    box-shadow: 0 0 5px rgba(0,0,0,1);
    transition: all 0.35s ease-in-out;
    background: rgba(255,255,255,0.6) ;
}
.containerGroup{
    text-align: center;
    position: relative;
    /*z-index: 3;*/
    /*flex: 1;*/
    min-width:150px;
}

.nombreElement{
    display: block;
    height: 100%;
    width: 100%;
    line-height: 2;
    position: relative;
    font-weight: bold;
    font-family: var(--fuente-subtitulos);
}
.nombreElement:hover{
    background: rgba(145,218,255,0.5);
    border-radius: 12px;
    transition: background 0.35s ease-in-out;
}


.active_list_menu{
    opacity: 1;
    pointer-events: auto;
}

/*--------circulos de carousel------*/
#circles{

}
.li_carousel{
    width: 25px;
    height: 25px;
    border: 1px solid orange;
    border-radius: 50%;
}


/*--------contenedor de carousel nav-------*/
.carouselImages {
    overflow: hidden;
    position: relative;
    width: 100%;
    /*outline-offset: 5px; !* Controla la distancia del borde *!*/
}

.containerImages{
    display: flex;
    /*overflow:hidden;*/
    width: 100%;

    /*transition: all 0.25s ease-in-out;*/
}
.animate-image{
    animation: showImg 0.35s ease-in-out;
}
.containerImages>img{
    min-width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}
@keyframes showImg {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }


}
#lista_circulos{
    display: flex;
    list-style: none;
    gap: 0 7.5px;
    position: absolute;
    top: 100%;
    right: 50%;
    transform: translate(50%,-175%);
}
.circulo_contador{
    width: 20px;
    height: 20px;
    border:1px solid black;
    border-radius: 50%;
}
#containerArrows{
    width: 100%;
    padding: 0 25px;
    list-style: none;
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    justify-content: space-between;

}
#containerArrows>li{
    display: flex;
    align-items: center;
    justify-content: center;

}
#containerArrows>li:hover{
}
#containerArrows>li>svg{
    height: 50px;
    width: 50px;
    /*pointer-events: none;*/
}

/*------------------------FOOTER---------------------------------------*/
#footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px 0;
    padding: 25px 0 0 0;
}
.descriptionTop{
    width: 70%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px 0;
    /*padding: 15px 0;*/
    /*justify-content: space-evenly;*/
}
.descriptionTop>h4{
    width: 80%;
    margin: 0 auto;
    font-weight:100;
}
.descriptinTop>h5{
    width: 90%;
    margin: 0 auto;
}
.descriptionTop *{
}
.descriptionTop>a{
    text-decoration: none;
    color: black;
    box-shadow: 0 0 2px rgba(0,0,0,0.8);
    padding: 7.5px 15px;
    border-radius: 15px;
    transition: background 0.35s ease-in-out;
}
.descriptionTop>a:hover{
    /*background :rgba(79,178,244,0.8);*/
    background: lightblue;
    box-shadow: 0 0 4px rgba(0,0,0,0.9);
}
.descriptionMid *{
}
.descriptionMid{
    display: flex;
    width: 90%;
    align-items: center;
    gap:  0 10px;
    /*padding: 0 25px;*/
    justify-content: center;
}

.lineHorizontal{
    height: 1px;
    /*width: 40%;*/
    width: 100%;
    margin: 0 auto;
    border: 1px solid rgba(0,0,0,0.4) ;
}
#socialMedia{
    list-style: none;
    display: flex;
    gap: 0 5px;
}
#socialMedia>li>svg{
    width: 45px;
    height: 45px;
    position: relative;
}
#socialMedia>li{
    position:relative;
    display: flex;
    justify-content: center;
}
#socialMedia>li::before{
    content: '';
    width: 0;
    height: 5px;
    top: 95%;
    background: lightblue;
    position: absolute;
    z-index: -1;
    opacity: 0;
    transition: all 0.35s ease-in-out;
}
#socialMedia>li:hover::before{
    opacity: 1;
    width: 45px;
    transform-origin: center;
}
#categoriasFooter{
    list-style: none;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-evenly;
}
#categoriasFooter>li{
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    width: 120px;
}
#categoriasFooter>li>a{
    text-decoration: none;
    color: black;
}
#categoriasFooter>li::before{
    position: absolute;
    content:'';
    height: 5px;
    width: 0;
    border-radius: 5px;
    top: 105%;
    /*left: 50%;*/
    transition: all 0.35s ease-in-out;
    display: flex;


}

#categoriasFooter>li:hover::before{
    width: 100%;
    animation: delineado 0.35s ease-in-out;
    background: lightblue;
}

@keyframes delineado{
    0%{
        width: 0;
    }
    25%{
        width: 25%;
    }
    50%{
        width: 50%;
    }
    75%{
        width: 75%;
    }
    100%{
        width: 100%;
    }

}


#footer>h3{
    font-size: 17.5px;
    text-align: center;
    width: 90%;
    margin: 0 auto;
}
.infoDev{
    background: lightblue;
    width: 100%;
    text-align: center;
    /*white-space: nowrap;*/
}
.infoDev>a{
    text-decoration: none;
    color: #000;
    font-size: 15px;
}
.infoDev>small{
    font-size: 15px;
}

/*----------------BRANDS---------------------------------*/
.containerBrands{
    /*width: 80%;*/
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 25px 0 50px 0;
}
.containerBrands>h1{
    text-align: center;
    padding: 25px 0;
}
.productsBrands{
    width: 80%;
    margin: 0 auto;
    justify-items: center;
    justify-content: center;
    display: grid;
    gap: 50px;
    grid-template-columns: repeat(auto-fit,290px);
}
.elementProduct{
    width: 275px;
    height: 450px;
    justify-content: space-evenly;
    border-radius: 7.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    transition: all 0.25s ease-in-out;
    padding: 0 20px;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,0.3617822128851541) 6%, rgba(75,196,255,0.29735644257703087) 49%, rgba(145,218,255,0.6026785714285714) 93%);
}
.elementProduct:hover{
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
    transition: all 0.25s ease-in-out;
}
.elementProduct>img{
    /*width: 250px;*/
    /*height: 250px;*/
    width: 100%;
    border-radius: 7.5px;
    aspect-ratio: 1;
    object-fit: cover;
}
.elementProduct>small{
    width: 80%;
    margin: 0 auto;
    text-align: end;
    font-weight: bold;
    font-size: 15px;
}
.elementProduct>div{
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 0 35px;
}
.elementProduct>div>button{
    padding: 0 15px;
    border-radius: 7.5px;
    border: 1px solid transparent;
    flex: 1;
    height: 35px;
}
.elementProduct>div>button:hover{
    border-color: gray;
}
.activeEventsButton{
    pointer-events: auto;
}

/*-----------------------*/



/*-----------------product-detail---------------*/

.sideLeft>div:nth-of-type(1)>img,.sideLeft>div:nth-of-type(2)>img{
    box-shadow: 0 0 5px rgba(0,0,0,0.6);

    user-select: none;
}


.botLeft {
    position: relative;
}
.arrowsLeftSide{
    position: absolute;
    top: 50%;
    display: flex;
    justify-content: space-between;
    width: 115%;
    transform: translateY(-50%);
}
.arrowsLeftSide>svg{
    /*background: orange;*/
    width: 35px;
    height: 35px;
}
.arrowsLeftSide>svg:nth-of-type(1)>path{
    transform: translateX(25%);
}


.circlesLeftSide{
    display: flex;
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    gap: 10px;
}
.circlesLeftSide>div{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid black;
}

.productsRecomended{
  padding: 25px 0;
}
.productsRecomended>h1{
    text-align: center;
    padding: 25px 0 55px 0;
    font-size: 45px;
    font-weight: 100;
    /*border: 5px solid black;*/
}

.containerElementsRecomended{
    gap: 50px;
    justify-items: center;
}
.containerElementsRecomended>div{
    display: flex;
    width: 275px;
    height: 450px;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    border: 1px solid rgba(0,0,0,0.4);
    border-radius: 12px;
    padding:0 20px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    transition: box-shadow 0.25s ease-in-out;

    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,0.3617822128851541) 6%, rgba(75,196,255,0.29735644257703087) 49%, rgba(145,218,255,0.6026785714285714) 93%);
}
.containerElementsRecomended>div:hover{
    box-shadow: 0 0 20px rgba(0,191,255,0.5);
    transition: box-shadow 0.25s ease-in-out;
    border-color: gray;
}
.containerElementsRecomended>div>img{
   width: 100%;
    object-fit: cover;
    aspect-ratio: 1;
    border-radius: 7.5px ;
}
.containerElementsRecomended>div>b:nth-of-type(2){
    width: 80%;
    margin: 0 auto;
    text-align: end;
}
.productsRecomended{


}
.productRecomendent>div{
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-radius: 7.5px;
    gap: 0 35px;
}
.productsRecomended>img{
}

.productRecomendent>div:nth-of-type(1)>button{
    padding: 0 15px;
    height: 35px;
    border-radius: 7.5px;
    border: 1.5px solid transparent;
    flex: 1;
    transition: all 0.35s ease-in-out;
}
.productRecomendent>div:nth-of-type(1)>button:hover{
    border: 1.5px solid gray;
}
.productsRecomended>div>button{
    /*height: 45px;*/
    font-size: 15px;
}

.productHidratant{


}
.productBloqueador{


}
.productSerum{


}
.productLimpiador{



}
/*.lastMove{*/
/*    display: flex;*/
/*    width: 60%;*/
/*    margin: 0 auto;*/
/*    justify-content: space-between;*/
/*}*/
/*grid*/
.info_brand>h1{
    text-align: center;
    padding: 55px 0;
}


.containerElementInfo{
    height: 950px;
    border: 5px solid blue;
    display: flex;
    gap: 0 15px;
    width: 80%;
    margin: 0 auto;
}
.gridLeft{
    display: flex;
    flex-direction: column;
    gap: 15px 0;
    /*flex: 4;*/
    width: 50%;
    height: 100%;
}
.leftTopSection{
    flex: 3;
    border: 3px solid yellow;
    /*height: 750px;*/
}
.leftBottomSection{
    flex: 1;
    /*height: 150px;*/
    border: 3px solid black;
}

.gridRight{
    width: 50%;
    height: 100%;
    display:flex;
    gap: 15px 0;
    flex-direction: column;
    flex: 4;
}
.rightTopSection{
    flex: 2.5;
    border: 3px solid blue;
    display: flex;
    width: 100%;
    gap: 0 15px;
}
.sideLeftBox{
    width: 50%;
    height: 100%;
    /*flex: 1;*/
    border: 5px solid lightblue;
}
.sideRightBox{
    width: 50%;
    /*flex: 1;*/
    height: 100%;
    border: 5px solid lightblue;
    flex: 3;
    display: flex;
    gap: 15px 0;
    flex-direction: column;
}
.sideRightBox>div:nth-child(1){
    flex: 1;
    border: 3px solid red;
    /*height: 100%;*/
}
.sideRightBox>div:nth-child(2){
    flex: 2;
    border: 3px solid pink;
    /*height: 100%;*/
}



.rightBottomSection{
    flex:1.5;
    border: 3px solid green;
}

/*-----------------compra plantilla render----------------*/
.compraPage{
    display: flex;
    margin: 0 auto;
    flex-direction: column;


    /*gap: 25px;*/
}
.compraPage>div:nth-of-type(1){
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(145,218,255,1);
    height: 50px;
    gap: 10px;
}
.compraPage>div>h1{
    white-space: nowrap;
    font-size: 25px;
}
.compraPage>div:nth-of-type(1)>button{
    /*padding: 6px 15px;*/
    border-radius: 7.5px;
    height: 35px;
    padding: 0 17.5px;
    white-space: nowrap;
}
.productsAndPay{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    margin: 0 auto;
    gap: 25px;
    border-radius: 12px;
    padding: 25px;
    transition: all 0.35s ease-in-out;
}
.containerElementsCompra{
    /*padding: 25px 0;*/
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    display: flex;
    gap: 25px;
    transition: all 0.35s ease-in-out;
    height: 100%;
}
.controllerCountProducts{
    position: absolute;
    top: 102.5%;
    right: 50%;
    transform: translateX(50%);
    display: flex;
    width: 100%;
    padding: 0 20px;
    align-items: center;
    justify-content: space-evenly;

}
.contadorElementsCompra{
    width: 25px;
    height: 25px;
    padding: 12.5px;
    border: 1px solid gray;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.group_products{
    border-radius: 12px;
    padding: 10px 15px;
    position: relative;
    /*height: 330px;*/
    /*width: 225px;*/
    display: flex;
    justify-content: center;
    transition: all 0.25s linear;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    background: white;
}

.compraElement>div>i{
    background: lightblue;

}
/*.compraElement>div:hover{*/
/*    background: orange;*/
/*}.compraElement>div>i:hover{*/
/*     background: orange;*/
/* }*/
.pasarelaPago{
    display:none;
    flex-direction: column;
    gap: 15px 0;
    box-shadow:  0 0 25px rgba(0,0,0,0.2);
    transition: all 0.35s linear;
    width: 500px;
    /*height: 0;*/
    border-radius: 12px;
    padding: 15px 25px;
    justify-content: center;

    /*pointer-events: none;*/
}
.pasarelaPago>form{
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.pasarelaPago>form input{
    padding: 0 10px;
    border: none;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    transition: all 0.35s linear;
    /*outline: 0.5px solid transparent;*/
}
.active_form{
    display: block;
    pointer-events: auto;
    animation: showForm 0.35s ease-in-out;
}
.desactive_form{
    animation: hideForm 0.35s ease-in-out;
}
.templateYapePlin{
    animation: showForm 0.35s ease-in-out;
}
.templateYapePlin_two{
    animation: hideForm 0.35s ease-in-out;
}
@keyframes showForm{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes hideForm{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }

}
.payCardOptions_one{
    background-image : url("https://res.cloudinary.com/dfwtyxxba/image/upload/v1745036133/yapethree_pprrrw.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.35s ease-in-out;
    animation: showForm 0.35s ease-in-out;
}
.payCardOptions_two{
    background-image : url("https://res.cloudinary.com/dfwtyxxba/image/upload/v1745036633/plinTwo_lbggx2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.35s ease-in-out;
    animation: showForm 0.35s ease-in-out;
}
.payVirtualOptions_one{
    background-image : url("https://res.cloudinary.com/dfwtyxxba/image/upload/v1745037637/visaTwo_yvy6v3.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.35s ease-in-out;
    animation: showForm 0.35s ease-in-out;
}
.payVirtualOptions_two{
    background-image : url("https://res.cloudinary.com/dfwtyxxba/image/upload/v1745034321/mastercard_ksbmak.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.35s ease-in-out;
    animation: showForm 0.35s ease-in-out;
}
.payVirtualOptions_three{
    background-image : url("https://res.cloudinary.com/dfwtyxxba/image/upload/v1745037451/americanExpressTwo_ihb1dt.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.35s ease-in-out;
    animation: showForm 0.35s ease-in-out;
}




input:focus{
    /*outline: none;*/
}
.pasarelaPago>form button{
    padding: 10px 15px;
    border-radius: 7.5px;
    border: 1.5px solid rgba(0,0,0,0.3);
    align-self: end;
    box-shadow: 0 0 2.5px rgba(0,0,0,0.2);
    transition: all 0.25s linear;
}

.pasarelaPago>form button:hover{
    border: 1.5px solid rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    transition: all 0.25s linear;
}
.recojoTienda{
}
/*.pasarelaPago>form>div{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 10px;*/
/*}*/
.emailPay{
}
.emailPay,.detailCard,.nameUser,.nameCountry{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.active_pick_store{
    background : lightblue;
}
.region{
    display: flex;
    gap: 10px;
    /*justify-content: space-between;*/
}
.region>input{
    border-radius: 7.5px;
    background: orange;
    flex: 1;
    height: 40px;
}
.selectButton{

}
.message {
    animation: showMessage 0.35s ease-in-out;
    transition : opacity 0.35s ease-in-out;
}
@keyframes showMessage {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes hideMessage {

}



.nameCountry>textarea{
    height: 100px;
    border-radius: 7.5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    padding: 10px;
    max-width: 450px;
    /*min-width: 450px;*/
    min-height: 35px;
}


.titleForm{
    width: 100%;
    display:flex;
    flex-direction: column;
    gap: 15px;
}
.titleForm>h1{
    text-align: center;
    font-size: 30px;
}
.titleForm>button{
    width: 100%;
    padding: 10px 15px;
    border-radius: 7.5px;
}
.couriersContainer{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.couriers{
    display: flex;
    justify-content: space-evenly;
    gap: 15px;
}
.couriers>button{
    flex: 1;

}

.couriersContainer>textarea{
    border-radius: 7.5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    height: 75px;
    max-width: 450px;
    /*min-width: 450px;*/
    min-height: 75px;
    padding: 10px;
    /*height: 0;*/
    display: none;
    transition: all 0.25s linear;
}
.couriersContainer~button{
    width: 175px;
}


.compraElement{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 200px;
    height: 300px;
    padding: 0 12px 7.5px 12px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 12px;
    margin-bottom: 30px;
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: all 0.35s linear;
    box-shadow:  0 0 5px transparent;
    background: white;
    z-index: 1;
}
.compraElement:hover{
    box-shadow: 0 0 5px black;
}
@keyframes blinkAnimation {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}

.blinkEffect {
    animation: blinkAnimation 0.25s ease-in-out;
}


.compraElement>span{
    /*height: 100%;*/
    font-size: 20px;
}
.compraElement>h3,.compraElement>p,.compraElement>small,.compraElement>b{

    font-size: 20px;


}
.compraElement>span{
    /*padding-left: 10px;*/
}
#arrowRight,
#arrowLeft{
    background: transparent;
    transition: background 0.35s linear;
    border-radius:50%;
    /*padding: 5px;*/
    width: 30px;
    height: 30px;
}
#arrowRight>path,#arrowLeft>path{
    pointer-events: none;
}
#arrowLeft:hover,#arrowRight:hover{
    background: lightblue;
    transition: background 0.25s linear;
}

.compraElement>img{
    width: 100%;
    object-fit: cover;
    border-radius: 7.5px;
    aspect-ratio: 1/1;
}
#deleteElementCompra{
    width: 25px;
    height: 25px;
    border: 1px solid black;
    border-radius: 50%;
    /*padding: 5px;*/
    background: lightblue;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 7.5px;
    right: 7.5px;
    z-index: 5;
    transition: background 0.35s ease-in-out;
}
#deleteElementCompra:hover{
    background: rgba(0,0,0,0.3);
}
#deleteElementCompra>svg{
    pointer-events: none;
}
#deleteElementCompra>svg>path{
    pointer-events: none;
}

/*.activeBefore{*/
/*    background:transparent;*/
/*    transition: background 0.35s linear;*/
/*    border-radius: 50%;*/
/*}*/
.activeAfter{
    transition: background 0.35s linear;
    border-radius: 50%;
    background: lightblue;
}
.activeAfter:hover{
    background: rgba(0,191,255,0.25);
}

.desativeEvents{
    pointer-events:none;
}

.contadorElementsCompra{
    transition: all 0.25s linear;
}
/*#arrowLeft,#arrowRight{*/
/*    background: pink;*/
/*}*/
/*#arrowLeft:hover,#arrowRight:hover{*/
/*    background: lightblue;*/
/*}*/


/*#arrowRight>svg>path,#arrowLeft>svg>path{*/
/*    pointer-events: none;*/
/*}*/

/*#arrowRight:hover,#arrowLeft:hover {*/
/*    !*pointer-events: none;*!*/
/*    background: rgba(0,191,255,0.25);*/

/*}*/

/*-----pay section------*/

.pasarelaPago>button:nth-of-type(1){
    width: 100%;
    border-radius: 7.5px;
    line-height: 3;
}
.messagePay{
    display: flex;
    align-items: center;
    gap: 0 2.5px;
    padding: 0 10px;
}
.messagePay>hr{
    flex: 1;
    height: 1px;
}
.emailPay{
    display: flex;
    flex-direction: column;
}
.emailPay>input{
    width: 100%;
    line-height: 3;
    border-radius: 7.5px;
}
.detailCard{
    display: flex;
    flex-direction: column;
    gap: 15px 0;
}
.detailCard>input{
    width: 100%;
    line-height: 3;
    border-radius: 7.5px;
}
.detailCard>div{
    display: flex;
    gap: 10px;
}
.detailCard>div>input{
    flex: 1;
    line-height: 3;
    border-radius: 7.5px;
}
.nameUser{

}
.nameUser>input{
    width: 100%;
    line-height: 3;
    border-radius: 7.5px;
}
.nameCountry{

}
.nameCountry>input{
    width: 100%;
    line-height: 3;
    border-radius: 7.5px;
}
.pasarelaPago>button:nth-of-type(2){
    width: 100%;
    border-radius: 7.5px;
    line-height: 3;
}

/*---DETALLES DE ENVIO-----*/
.sendProduct{
    text-align: center;
    width: 30%;
    margin: 0 auto;
}
.sendProduct>h1{
    font-size: 35px;
    margin: 15px 0;
}
.sendProduct>div{
    display: flex;
    flex-direction: column;
    gap: 5px 0;
}
.sendProduct>div h1{
    font-size: 15px;
    background: gray;
    /*white-space: nowrap;*/
}
.sendProduct>div input{
    padding: 12.5px;
    width: 100%;
    border-radius: 10px;
}
.sendProduct>div>div{
    display: flex;
    align-items: center;
    gap: 0 5px;
}
.sendProduct>div>button{
    margin-top: 15px;
    padding: 10px;
    width: 20%;
    display: block;
    align-self: center;
    border-radius: 7.5px;
}



 /*----------Template pago con yape/plin-----------------------*/
.containerYapePlin{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /*align-items: center;*/
    gap: 25px;
    margin: auto 0;
    width: 500px;
    border-radius: 12px;
    height: 700px;
    transition: all 0.5s linear;
    position: relative;
    opacity: 1;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    min-width: 500px;
    padding: 60px 50px;
    background: white;
}
.containerYapePlin>img{
        width: 200px;
    align-self: center;
}
/*.containerYapePLin>h1{*/
/*    font-size: 30px;*/
/*    display: none;*/
/*}*/
.activeYapePlin{
    animation: fadeIn 0.5s ease-in-out;
}
.containerYapePlin>h1{
    text-align: center;
}

@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }

}

.boxYapePlin{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    gap:25px;
}

.yape{
    background-image: url('/img/yape.png');
}
.plin{
    background-image: url('/img/plin.webp');
}


.yape,.plin{
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 7.5px;
}
.containerYapePlin > button{
    padding: 15px;
    border-radius: 10px;
    width: 200px;
    align-self: center;
}
.containerYapePlin>button{
    min-width: 200px;
    /*width: 125px;*/
    /*align-self: center;*/
    width: 200px;
    height: 40px;
    display: flex;
    align-items: center;
    /*text-align: center;*/
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 0 2.5px rgba(0,0,0,0.2);
}
.activeElement {
    display: block;
    pointer-events: auto;
}
.textContainer{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.textContainer>h1:nth-of-type(1){
    font-size: 35px;
    font-weight: bold;
}
.textContainer>h1:nth-of-type(2){
    font-size: 20px;
    height: 25px;
    font-weight: 100;
}
.deleteYapePlin{
    position: absolute;
    top: 25px;
    right: 25px;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    transition: all 0.25s ease-in-out;
    border-radius: 7.5px;
}
.returnYapePlin{
    border-radius: 7.5px;
}
.buttonsFinalizar>*{
    /*border: 1px solid black;*/
    /*flex: 1;*/
}
.clickOption{
    /*outline: 5px solid lightblue;*/
    box-shadow: 12.5px 12.5px 5px rgba(0,0,0,0.5);
    transition: all 0.15s ease-in-out;
}
.activeBorder{
    outline: 5px solid black;
    transition: all 0.15s ease-in-out;
}

.buttonsFinalizar{
    display: flex;
    align-items: center;
    margin: 25px auto;
    width: 40%;
    gap: 15px;
    justify-content: space-evenly;
    box-shadow:  0 0 5px rgba(0,0,0,0.2);
    padding: 15px 20px;
    border-radius: 12px;
    background: white;
}
.buttonsFinalizar>button{
    /*width: 185px;*/
    min-width: 200px;
    /*line-height: 1.5;*/
    white-space: nowrap;
    /*padding: 7.5px 0;*/
    border-radius: 12px;
    text-align: center;
    height: 42.5px;
    border: 1.5px solid rgba(0,0,0,0.2);
    box-shadow:  0 0 5px rgba(0,0,0,0.2);
    transition: border .25s linear;
}
.buttonsFinalizar>button:hover{
    border: 1.5px solid rgba(0,0,0,0.6);
    transition: border .25s linear;
}
.buttonsFinalizar>button:nth-of-type(2),.buttonsFinalizar>button:nth-of-type(3){
    display: none;
}
.masVendidoElement>div:nth-of-type(2){
    display: flex;
    justify-content: space-between;
    gap: 35px;
}
.masVendidoElement > b {
    font-weight: 300;
}
.masVendidoElement_two>div:nth-of-type(2){
    display: flex;
    justify-content: space-between;
    gap: 35px;
}
.infoCenter{
    width: calc(70vw + 25px);
    margin: 0 auto;
    display: flex;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    padding: 50px 25px;
    gap: 25px;
}
.elementInfo_one,.elementInfo_two{
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}
.elementInfo_one>div,
.elementInfo_two>div{
    display: flex;
    width: 350px;
    height: 300px;
    margin: 0 auto;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    gap: 15px;
    border: 5px solid gray;
    border-radius: 15px;
    justify-content: center;
    padding: 0 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
    background: white;
}
.elementInfo_one>div>b,.elementInfo_two>div>b{
    font-weight: 500;
    font-family: var(--fuente-subtitulos);
    line-height: 1;
}

.elementInfo_one>div>svg,
.elementInfo_two>div>svg{
    width: 55px;
    height: 55px;
}

.masVendidos{
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    gap: 50px 0;
    width: 100%;
    /*overflow: hidden;*/
    padding: 50px 0;
}
.masVendidos>h1{
    /*padding: 55px 0;*/
    font-size: 35px;
    text-align: center;
    font-weight: 500;
    font-family: var(--fuente-subtitulos);
}
.movimientoMasVendidos {
    display: flex;
    gap: 0 45px;
    transition: all 0.3s ease-in-out;
    min-width: 100%;
    /*padding: 0 25px;*/

    overflow: hidden;
}


.containerMasVendidos_one{
    display: flex;
    justify-content: space-around;
    gap: 45px;
    padding: 5px 0;

}

.addTransition{
    transition: transform 0.300s linear;
}
.masVendidoElement,.masVendidoElement_two{
    border-radius: 15px;
    width: 275px;
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding:0 20px;
    user-select: none;
    /*pointer-events: none;*/

    box-shadow: 0 0 5px rgba(0,0,0,0.8);
}
.masVendidoElement:hover,.masVendidoElement_two:hover{
    /*transition: all 0.3s ease-in-out;*/
    /*transform: scale(1.02)*/
}
.masVendidoElement>img,.masVendidoElement_two>img{
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 15px;
    user-select: none;
    /*aspect-ratio: 2/3;*/
}
.masVendidoElement>div,.masVendidoElement_two>div{
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    gap: 0 45px;
}
.masVendidoElement>div>button,.masVendidoElement_two>div>button{
    border-radius: 7.5px;
    padding: 2.5px 12px;
    flex: 1;
    border:1px solid transparent;
    transition: all 0.25s ease-in-out;
}
.masVendidoElement>div>button:hover, .masVendidoElement_two>div>button:hover{
    border: 1px solid rgba(0,0,0,0.4);
}

.movimientoMasVendidos_2{
    min-width: 100%;
    display: flex;
    gap: 0 45px;
    /*transition: all 0.5s ease-in-out;*/
    overflow: hidden;
}
.containerMasVendidos_2_one,.containerMasVendidos_2_two{
    display: flex;
    gap: 0 45px;
    padding: 5px 0;
}

.containerMasVendidos button,.containerMasVendidos_two button{
    font-size: 12.5px;
    height: 35px;
}
.masVendidoElement_two>img{
    /*width: 100%;*/
}

.masVendidoElement>img,.masVendidoElement_two>img{
    aspect-ratio: 1;
}
.masVendidoElement,.masVendidoElement_two{
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,0.3617822128851541) 6%, rgba(75,196,255,0.29735644257703087) 49%, rgba(145,218,255,0.6026785714285714) 93%);
}
.masVendidoElement>small,.masVendidoElement_two>small{
    width: 80%;
    margin: 0 auto;
    text-align: end;
    font-weight: bold;
}

.marca{
    overflow: hidden;
}
.prePage {
    font-size: 100px;
    width: 100%;
    font-weight: 900;
}

.priceStar{
    display: flex;
    /*justify-content: space-between;*/
    padding: 0 15px;
    width: 100%;
}

.priceStar>b{
    margin-left: auto;
}

.container_productDetail  h1 {
    font-family: var(--fuente-subtitulos);
}
.container_productDetail button{
    font-weight: 300;
}
.bottomInfo > h1 {
    font-family: var(--fuente-general);
    font-weight: 200;
}
.sideRight > h2{
    font-weight: 200;
}

.lastMove > button {
    /*font-weight: 300;*/
    /*font-size: 15px;*/
}
.productRecomendent > b:nth-of-type(1){
    font-weight: 200;
}
.productRecomendent > b:nth-of-type(2){
    font-weight: 500;
}
.middleInfo > b {
    font-weight: 300;
}
.compraElement > span {
    font-weight: 300;
}
.compraElement > p > small {
    font-weight: 500;
    font-size: 17.5px;
}
.contadorElementsCompra > small {
}



@media (max-width: 320px){

    .prePage{
        font-size: 60px;
        font-weight: 900;
    }

    .arrowsLeftSide{
        position: absolute;
        top: 50%;
        display: flex;
        justify-content: space-between;
        width: 115%;
        transform: translateY(-50%);
    }
    .arrowsLeftSide>svg{
        /*background: orange;*/
        width: 35px;
        height: 35px;
    }


    .cajitaCompras{
        right: -10%;
    }
    .sinCompras{
        right: 50%;
    }


    /*---------containeCaito----------------------*/

    .c_partOne{
        min-width: 200%;
    }
    @keyframes carrito {
        0%{
            transform: translateX(0);
        }
        100%{
            transform: translateX(-200%);
        }
    }
    /*-------containeAows-----------*/
    #containerArrows{
        justify-content: space-between;
        padding: 0 10px;
    }
    #containerArrows>li{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
    }
    #containerArrows>li>svg{
        width: 30px;
        height: 30px;
    }
    #containerArrows>li:nth-of-type(1)>svg:nth-of-type(1){
        /*padding-left: 5px;*/
        transform: translateX(25%);
    }
    #lista_circulos{

    }
    /*--------cajitaCompas---------*/
    .cajitaCompras{
        width: 250px;
        right: -100%;
    }

    /*------compraPage-----------*/
    .compraPage>div>h1{
        white-space: nowrap;
        font-size: 21px;
    }


    .containerYapePlin{
        width: 250px;
        min-width: 250px;
        padding: 60px 20px;
        /*padding: 0;*/
        box-shadow: 0 0 5px rgba(0,0,0,0.2);
        justify-content: space-evenly;
        height: auto;
        flex-direction: column;
        gap: 60px;
    }
    .textContainer{

    }

    .boxYapePlin{
        flex-direction: column;
        justify-content: center;
        /*gap: 0;*/

    }
    .containerYapePlin>img{
        width: 200px;
        align-self: center;
    }
    .yape,.plin{
        width: 200px;
        height: 200px;
        min-width: 200px;
        min-height: 200px;
        border-radius: 7.5px;
        transition: all 0.15s ease-in-out;
    }


    .textContainer>h1:nth-of-type(1){
        font-size: 25px;
    }
    .textContainer>h1:nth-of-type(2){
        font-size: 20px;
    }
    .deleteYapePlin{
        width: 30px;
        height: 30px;
    }
    .returnYapePlin{
        width: 30px;
        height: 30px;
    }



    /*----------------------*/
    .productsAndPay{
        width: 90%;
    }
    .containerElementsCompra{
    }
    .pasarelaPago{
        width: 320px;
    }
    .detailCard>div{
        flex-direction: column;
    }
    .nameCountry>div{
        flex-direction: column;
    }
    .region>input{
        min-height: 40px; !important
        flex: 1;
    }
    .couriers{
        flex-wrap: wrap;
    }
    .couriersContainer>textarea{
        height: 90px;
    }
    .couriersContainer~button{
        width: 100%;
    }
    /*--------buttonsFinalizar--------*/
    .buttonsFinalizar{
        width: 80%;
        flex-direction: column;
    }

    /*-----------searchAndOptions-------------------*/
    .iconsBusqueda{
        width: 95%;
        margin: 0 auto;
    }
    .searchAndOptions>ul>li{
        gap: 15px;
        padding: 10px ;
    }
    .searchAndOptions>ul>li>div{
        flex-direction: column;
        align-items: start;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .searchAndOptions>ul>li>div>span:nth-of-type(2){
        width: 100%;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 17px;
    }
    .searchAndOptions>ul>li>div>span:nth-of-type(2)>span:nth-of-type(1)~span{
        margin-left: 5px;
    }
    .searchAndOptions>ul>li>div{
        /*border: 2px solid black;*/
    }
    .searchAndOptions>ul>li>div>span:nth-of-type(1){
        font-size: 18px;
    }
    .searchAndOptions>ul>li>div>span:nth-of-type(3){
        font-size: 16px;
    }
    .searchAndOptions>ul>li>div{
        align-self: start;
    }
    .searchAndOptons>ul>li>span:nth-of-type(1){

    }
    .searchAndOptions>ul>li>div>span:nth-of-type(3){
        font-weight: bold;
    }

    /*--------------------------------*/
    /*-----busquedaInteractiva-------*/
    .busquedaInteractiva{
        padding: 0;
        width: 100%;
    }
    .iconsBusqueda>input{
        width: 80%;
    }
    .infoCenter{
        width: 100%;
        align-items: center;
        justify-content: center;
        padding: 20px 10px;
        gap: 10px;
    }
    .elementInfo_one,.elementInfo_two{
        gap: 10px;
        flex-direction: column;
    }

    .elementInfo_one>div,
    .elementInfo_two>div{
        display: flex;
        width: clamp(120px, 40vw, 150px);
        height: clamp(120px, 40vw , 150px);
        gap: 10px;
        padding: 0 5px;
    }
    .elementInfo_one>div>small,
    .elementInfo_two>div>small{
        display: none;
    }
    .elementInfo_one>div>b,
    .elementInfo_two>div>b{
        font-size: 15px;
    }
    .elementInfo_one>div>svg,
    .elementInfo_two>div>svg{
        width: 35px;
        height: 35px;
    }
    #iconsNav>li:nth-of-type(3)>svg{
        pointer-events: auto;
    }
    .containerMenuSmallWindow{
        width: 275px;
    }

    .nameStore{
        white-space: nowrap;
    }
    #iconsNav{
        gap: clamp(10px, 5vw ,15px);
    }

    .searchAndOptions>ul>li>div{
        flex-direction: column;
        align-items: start;
    }
    .searchAndOptions>ul>li>span:nth-of-type(1){
        align-self: end;
        transform: translateY(-70%);
    }
    .menu{
        /*display: flex;*/
        align-items: center;
        width: 90%;
        padding: 25px 0;
        justify-content: space-evenly;
        margin: 0 auto;
        /*gap: 0 25px;*/
        /*opacity: 0;*/
        display: none;
    }

    /*-----productsRecomended-------*/
    .containerElementsRecomended{
        width: 90%;
        display: grid;
        grid-template-columns: repeat(auto-fit,290px);
        justify-content: center;
        margin: 0 auto;
        /*gap: 37.5px 75px;*/
        /*padding: 0 40px;*/
        transition: all 0.35s ease-in-out;
    }

    /*---------detailProduct------------------*/
    .container_productDetail{

    }
    .info_productDetail{
        width:90%;
        margin: 0 auto;
        border-radius: 12px;
        display: flex;
        flex-wrap: wrap;
        gap:35px;
        padding: 0 25px 25px 25px;
        /*box-shadow: 0 0 250px rgba(91, 209, 252, 0.3);*/
    }

    .container_productDetail>h1{
        text-align: center;
        padding: 25px 0;
        font-size: 45px;
    }

    .sideLeft{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        align-self: center;
    }
    .topLeft{
        transition: all 0.35s ease-in-out;
    }
    .topLeft>img{
        width: 100%;
        border-radius: 12px;
        transition: all 0.35s ease-in-out;
        aspect-ratio: 1/1;
        object-position: center;
        object-fit: cover;
    }
    .botLeft{
        display: flex;
        justify-content: space-evenly;
        /*gap: 0 3%;*/
        padding: 0 15px;
        width: 100%;
        border-radius: 12px;
        transition: all 0.35s ease-in-out;
    }
    .botLeft>img{
        width: 30%;
        object-fit: cover;
        aspect-ratio: 1/1;
        border-radius: 12px;
    }
    .sideRight{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        margin-top: 35px;
    }
    .sideRight>h2{
        /*width: 80%;*/
        /*margin: 0 auto;*/

    }
    .priceStar{
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
    }
    #estrellas{
        display: flex;
        gap: 0 5px;
        list-style: none;
    }

    .middleInfo{
        display: flex;
        justify-content: space-between;
        /*gap: 0 50%;*/
    }
    .bottomInfo{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        justify-content: center;
        width: 90%;
        margin: 25px auto 0 auto;
    }
    .bottomInfo>ul{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        padding-left: 25px;
    }

    .lastMove {
        display: flex;
        width: 95%;
        transform: translateY(50%);
        margin: 0 auto;
        justify-content: space-between;
        /*gap: 300px;*/
        gap: calc(5vw + 15px);
    }
    .lastMove>button{
        padding: 0 20px;
        border: 1px solid transparent;
        border-radius: 7.5px;
        transition: border 0.35s ease-in-out;
        width: 105px;
        height: 35px;
    }
    .lastMove>button:hover{
        border: 1px solid gray;
    }

    /*-------nav-------*/
    .navegador{
        width: 100%;
        padding: 25px 0;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

    }
    .navegador>div{
        margin: 0 auto;
        width: 90%;
        display:flex;
        justify-content: space-between;
    }

    #iconsNav>li{
        padding: 0;
    }

    .containerMarcas>div:hover{
        font-size: 45px;
    }
    .marcas>h1{
        font-size: 35px;
        font-weight: 100;
        padding:  0 0 25px 0;
    }
    .containerMarcas{
        padding: 0;
        grid-template-columns: repeat(auto-fit,275px);
        grid-template-areas:
        "marca_1"
        "marca_2"
        "marca_3"
        "marca_4"
        "marca_5"
        "marca_6"
        "marca_7"
        "marca_8"
        "marca_9"
        "marca_10";
        grid-auto-rows: 200px;
        justify-content: center;
    }

    .containerMarcas > div:nth-of-type(3){
        background-position: center 65%;
    }
    .containerMarcas > div:nth-of-type(4){
        background-position: center 10%;
    }
    .containerMarcas > div:nth-of-type(6){
        background-position: center 40%;
    }
    .containerMarcas > div:nth-of-type(7){
        background-position: center 0;
    }
    .containerMarcas > div:nth-of-type(8){
        background-position: center 56.5%;
    }
    .containerMarcas > div:nth-of-type(10){
        background-position: center 25%;
    }



}
@media (min-width: 321px) and (max-width: 480px){

    .containerMarcas > div:nth-of-type(3){
        background-position: center 65%;
    }
    .containerMarcas > div:nth-of-type(4){
        background-position: center 10%;
    }
    .containerMarcas > div:nth-of-type(6){
        background-position: center 40%;
    }
    .containerMarcas > div:nth-of-type(7){
        background-position: center 0;
    }
    .containerMarcas > div:nth-of-type(8){
        background-position: center 56.5%;
    }
    .containerMarcas > div:nth-of-type(10){
        background-position: center 25%;
    }

    .prePage{
        font-size: 70px;
        font-weight: 900;
    }
    .arrowsLeftSide{
        position: absolute;
        top: 50%;
        display: flex;
        justify-content: space-between;
        width: 112.5%;
        transform: translateY(-50%);
    }
    .arrowsLeftSide>svg{
        /*background: orange;*/
        width: 35px;
        height: 35px;
    }


    .cajitaCompras{
        right: -10%;
    }
    .sinCompras{
        right: 50%;
    }
    /*-------compa page---------------*/
    .compraPage>div>h1{
        white-space: nowrap;
        font-size: 21px;
    }
    /*-------------------*/
    .c_partOne{
        min-width: 200%;
    }
    @keyframes carrito {
        0%{
            transform: translateX(0);
        }
        100%{
            transform: translateX(-200%);
        }
    }
    /*-------containeAows-----------*/
    #containerArrows{
        justify-content: space-between;
        padding: 0 10px;
    }
    #containerArrows>li{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
    }
    #containerArrows>li>svg{
        width: 30px;
        height: 30px;
    }
    #containerArrows>li:nth-of-type(1)>svg:nth-of-type(1){
        /*padding-left: 5px;*/
        transform: translateX(25%);
    }
    #lista_circulos{

    }

    /*-------nav-------*/
    .navegador{
        width: 100%;
        padding: 25px 0;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

    }
    .navegador>div{
        margin: 0 auto;
        width: 85%;
        display:flex;
        justify-content: space-between;
    }

    #iconsNav{
        gap: 20px;
    }
    #iconsNav>li{
        padding: 0;
    }
    /*------------------------------------*/
    .containerYapePlin{
        width: 300px;
        min-width: 300px;
        padding: 60px 20px;
        /*padding: 0;*/
        box-shadow: 0 0 5px rgba(0,0,0,0.2);
        justify-content: space-evenly;
        height: auto;
        flex-direction: column;
        gap: 45px;
    }
    .textContainer{

    }

    .boxYapePlin{
        flex-direction: column;
        justify-content: center;
        /*gap: 0;*/
        align-items: center;

    }
    .containerYapePlin>img{
        width: 200px;
        align-self: center;
    }
    .yape,.plin{
        width: 200px;
        height: 200px;
        min-width: 200px;
        min-height: 200px;
        border-radius: 7.5px;
    }

    .textContainer>h1:nth-of-type(1){
        font-size: 25px;
    }
    .textContainer>h1:nth-of-type(2){
        font-size: 20px;
    }
    .deleteYapePlin{
        width: 30px;
        height: 30px;
    }
    .returnYapePlin{
        width: 30px;
        height: 30px;
    }

    /*---containerElementsCompra---*/
    .productsAndPay{
        width: 90%;
    }
    .containerElementsCompra{
    }
    .pasarelaPago{
        width: 320px;
    }
    .detailCard>div{
        flex-direction: column;
    }
    .nameCountry>div{
        flex-direction: column;
    }
    .region>input{
        min-height: 40px; !important
        flex: 1;
    }
    .couriers{
        flex-wrap: wrap;
    }
    .couriersContainer>textarea{
        height: 90px;
    }
    .couriersContainer~button{
        width: 100%;
    }

    /*-------buttonsFinalizar---------*/
    .buttonsFinalizar{
        width: 80%;
        flex-direction: column;
    }
    /*-----------searchAndOptions-------------------*/
    .iconsBusqueda{
        width: 95%;
        margin: 0 auto;
    }
    .searchAndOptions>ul>li{
        gap: 15px;
        padding: 10px ;
    }
    .searchAndOptions>ul>li>div{
        flex-direction: column;
        align-items: start;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .searchAndOptions>ul>li>div>span:nth-of-type(2){
        width: 100%;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 17px;
    }
    .searchAndOptions>ul>li>div>span:nth-of-type(2)>span:nth-of-type(1)~span{
    margin-left: 5px;
    }
    .searchAndOptions>ul>li>div{
        /*border: 2px solid black;*/
    }
    .searchAndOptions>ul>li>div>span:nth-of-type(1){
        font-size: 18px;
    }
    .searchAndOptions>ul>li>div>span:nth-of-type(3){
        font-size: 16px;
    }
    .searchAndOptions>ul>li>div{
        align-self: start;
    }
    .searchAndOptons>ul>li>span:nth-of-type(1){

    }
    .searchAndOptions>ul>li>div>span:nth-of-type(3){
        font-weight: bold;
    }
    .busquedaInteractiva{
        padding: 0;
        width: 320px;
        margin: 0 auto;
    }
    .iconsBusqueda>input{
        width: 80%;
    }

    .infoCenter{
        width: 100%;
        align-items: center;
        justify-content: center;
        padding: 35px 10px;
        gap: 10px;
    }
    .elementInfo_one,.elementInfo_two{
        gap: 10px;
        flex-direction: column;
    }
    .elementInfo_one>div,
    .elementInfo_two>div{
        width: clamp(140px, 40vw, 210px);
        height: clamp(140px, 40vw , 210px);
        gap: 10px;
    }
    .elementInfo_one>div>small,
    .elementInfo_two>div>small{
        display: none;
    }
    .elementInfo_one>div>b,
    .elementInfo_two>div>b{
        font-size: 18px;
    }
    .elementInfo_one>div>svg,
    .elementInfo_two>div>svg{
        width: 35px;
        height: 35px;
    }

    #iconsNav>li:nth-of-type(3)>svg{
        pointer-events: auto;
    }
    .containerMenuSmallWindow{
        width: 275px;
    }

    /*----------*/
    #iconsNav>li:nth-of-type(3)>svg{
        pointer-events: auto;
    }

    .menu{
        /*display: flex;*/
        align-items: center;
        width: 90%;
        padding: 25px 0;
        justify-content: space-evenly;
        margin: 0 auto;
        /*gap: 0 25px;*/
        /*opacity: 0;*/
        display: none;
    }

    /*-----productsRecomended-------*/
    .containerElementsRecomended{
        width: 90%;
        display: grid;
        grid-template-columns: repeat(auto-fit,290px);
        justify-content: center;
        margin: 0 auto;
        /*gap: 37.5px 75px;*/
        /*padding: 0 40px;*/
        transition: all 0.35s ease-in-out;
    }

    /*---------detailProduct------------------*/
    .container_productDetail{

    }
    .info_productDetail{
        width:90%;
        margin: 0 auto;
        border-radius: 12px;
        display: flex;
        flex-wrap: wrap;
        gap:35px;
        padding: 0 25px 25px 25px;
        /*box-shadow: 0 0 250px rgba(91, 209, 252, 0.3);*/
    }

    .container_productDetail>h1{
        text-align: center;
        padding: 25px 0;
        font-size: 45px;
    }

    .sideLeft{
        /*width: 90%;*/
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        align-self: center;
    }
    .topLeft{
        transition: all 0.35s ease-in-out;
    }
    .topLeft>img{
        width: 100%;
        border-radius: 12px;
        transition: all 0.35s ease-in-out;
        aspect-ratio: 1/1;
        object-position: center;
        object-fit: cover;
    }
    .botLeft{
        display: flex;
        justify-content: space-evenly;
        /*gap: 0 3%;*/
        padding: 0 15px;
        width: 100%;
        border-radius: 12px;
        transition: all 0.35s ease-in-out;
    }
    .botLeft>img{
        width: 30%;
        object-fit: cover;
        aspect-ratio: 1/1;
        border-radius: 12px;
    }
    .sideRight{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        margin-top: 35px;
    }
    .sideRight>h2{
        /*width: 80%;*/
        /*margin: 0 auto;*/

    }
    .priceStar{
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
    }
    #estrellas{
        display: flex;
        gap: 0 5px;
        list-style: none;
    }

    .middleInfo{
        display: flex;
        justify-content: space-between;
        /*gap: 0 50%;*/
    }
    .bottomInfo{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        justify-content: center;
        width: 90%;
        margin: 25px auto 0 auto;
    }
    .bottomInfo>ul{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        padding-left: 25px;
    }

    .lastMove {
        display: flex;
        width: 90%;
        transform: translateY(50%);
        margin: 0 auto;
        justify-content: space-between;
        /*gap: 300px;*/
        gap: calc(5vw + 15px);
    }
    .lastMove>button{
        padding: 0 20px;
        border: 1px solid transparent;
        border-radius: 7.5px;
        transition: border 0.35s ease-in-out;
        width: 105px;
        height: 35px;
    }
    .lastMove>button:hover{
        border: 1px solid gray;
    }

    .containerMarcas>div{
        font-size: 35px;
    }
    .containerMarcas>div:hover{
        font-size: 45px;
    }

    .marcas>h1{
        width: 90%;
        margin: 0 auto;
        font-size: 35px;
        padding: 0;
    }
    .containerMarcas{
        width: 80%;
        grid-template-columns: repeat(auto-fit,minmax(290px,1fr));
        justify-content: center;
        grid-template-areas:
        "marca_1"
        "marca_2"
        "marca_3"
        "marca_4"
        "marca_5"
        "marca_6"
        "marca_7"
        "marca_8"
        "marca_9"
        "marca_10";
        grid-auto-rows: 200px;
    }


    .masVendidos{
        padding: 25px 0;
    }

    .catalogo{
        padding-bottom: 55px;
    }

    .catalogoElements>div{
        width: 300px;
    }

}
@media (min-width: 481px) and (max-width: 640px){


    .containerMarcas > div:nth-of-type(2){
        background-position: center 90%;
    }
    .containerMarcas > div:nth-of-type(3){
        background-position: center 65%;
    }
    .containerMarcas > div:nth-of-type(4){
        background-position: 30% 10%;
    }
    .containerMarcas > div:nth-of-type(6){
        background-position: center 70%;
    }
    .containerMarcas > div:nth-of-type(7){
        background-position: center 15%;
    }
    .containerMarcas > div:nth-of-type(8){
        background-position: center 60%;
    }
    .containerMarcas > div:nth-of-type(10){
        background-position: center 25%;
    }

    /*-------containeArrows----------*/
    #containerArrows{
        padding: 0 10px;
    }
    #containerArrows>li{
        width: 40px;
        height: 40px;
    }
    #containerArrows>li>svg{
        width: 40px;
        height: 40px;
    }
    #containerArrows>li:nth-of-type(2)>svg{
        transform: translateX(25%);
    }
    /*-------------------*/
    .containerYapePlin{
        width: 450px;
        min-width: 450px;
        padding: 60px 25px;
    }
    /*padding: 60px 50px;*/
    .yape,.plin{
        width: 200px;
        height: 200px;
        border-radius: 7.5px;
    }

    /*---containerElementsCompra---*/
    .couriers{
        flex-wrap:wrap;
        /*flex: 1;*/
        gap: 0;
    }
    .couriers>button{
        white-space: nowrap;
    }
    .productsAndPay{
        width: 90%;
    }
    .containerElementsCompra{
    }
    .pasarelaPago{
        width: 450px;
    }
    /*-------buttonsFinalizar---------*/
    .buttonsFinalizar{
        border-radius: 12px;
        width: 80%;
        flex-direction: column;
    }

    /*--arrowsLeftSide---*/
    .arrowsLeftSide{
        position: absolute;
        top: 50%;
        display: flex;
        justify-content: space-between;
        width: 115%;
        transform: translateY(-50%);
    }
    .iconsBusqueda{
        width: 90%;
        margin: 0 auto;
    }
    /*----------infoCenter-----------*/
    .infoCenter{
        width: 90%;
        align-items: center;
        justify-content: center;
        padding: 35px 25px 25px 25px;
        gap: calc(10px + 1vw);
    }
    .elementInfo_one,.elementInfo_two{
        gap: calc(10px + 1vw);
        flex-direction: column;
    }

    .elementInfo_one>div,
    .elementInfo_two>div{
        width: calc(150px + 10vw);
        height: calc(150px + 10vw);
        gap: 5px;
        padding: 0 15px;
    }
    .elementInfo_one>div>b,
    .elementInfo_two>div>b{
        font-size: 19px;
    }
    .elementInfo_one>div>small,
    .elementInfo_two>div>small{
        font-size: 13.5px;
    }
    .elementInfo_one>div>svg,
    .elementInfo_two>div>svg{
        width: 45px;
        height: 45px;
    }

    #iconsNav>li:nth-of-type(3)>svg{
        pointer-events: auto;
    }
    .containerMenuSmallWindow{
        width: 275px;
    }


    /*searAndProducts*/
    .searchAndOptions{

    }
    .searchAndOptions>ul>li{
        gap: 25px;
    }
    .searchAndOptions>ul>li>div{
        flex-direction: column;
        align-items: start;
    }
    .searchAndOptions>ul>li>span:nth-of-type(1){
        align-self: end;
        transform: translateY(-70%);
    }
    .iconsBusqueda>svg{
        width: 40px;
        height: 40px;
    }

    /*-------------navegador-------------------*/
    /*-----infoCenter------*/



    /*------menu---------------*/

    .menu{
        /*display: flex;*/
        align-items: center;
        width: 90%;
        padding: 25px 0;
        justify-content: space-evenly;
        margin: 0 auto;
        /*gap: 0 25px;*/
        /*opacity: 0;*/
        display: none;
    }

    /*-----productsRecomended-------*/
    .containerElementsRecomended{
        width: 90%;
        display: grid;
        grid-template-columns: repeat(auto-fit,290px);
        justify-content: center;
        margin: 0 auto;
        /*gap: 37.5px 75px;*/
        /*padding: 0 40px;*/
        transition: all 0.35s ease-in-out;
    }

    /*---------detailProduct------------------*/
    .container_productDetail{

    }
    .info_productDetail{
        width:90%;
        margin: 0 auto;
        border-radius: 12px;
        display: flex;
        flex-wrap: wrap;
        gap:35px;
        padding: 0 25px 25px 25px;
        /*box-shadow: 0 0 250px rgba(91, 209, 252, 0.3);*/
    }

    .container_productDetail>h1{
        text-align: center;
        padding: 25px 0;
        font-size: 45px;
    }

    .sideLeft{
        width: 85%;
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        align-self: center;
        margin: 0 auto;
    }
    .topLeft{
        transition: all 0.35s ease-in-out;
        display: flex;
        justify-content: center;
    }
    .topLeft>img{
        /*width: 100%;*/
        /*width: 350px;*/
        /*border-radius: 12px;*/
        /*transition: all 0.35s ease-in-out;*/


        width: 100%;
        border-radius: 12px;
        transition: all 0.35s ease-in-out;
        aspect-ratio: 1/1;
        object-position: center;
        object-fit: cover;
    }
    .botLeft{
        display: flex;
        justify-content: space-evenly;
        /*gap: 0 3%;*/
        gap: 15px;
        padding: 0 15px;
        width: 100%;
        border-radius: 12px;
        transition: all 0.35s ease-in-out;
    }
    .botLeft>img{
        width: 30%;
        object-fit: cover;
        aspect-ratio: 1/1;
        border-radius: 12px;
    }
    .arrowsLeftSide{
        width: 112.5%;
    }
    .arrowsLeftSide>svg{
        width: 35px;
        height: 35px;
    }
    .sideRight{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        margin-top: 35px;
    }
    .sideRight>h2{
        /*width: 80%;*/
        /*margin: 0 auto;*/

    }

    .priceStar{
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
    }
    #estrellas{
        display: flex;
        gap: 0 5px;
        list-style: none;
    }

    .middleInfo{
        display: flex;
        justify-content: space-between;
        /*gap: 0 50%;*/
    }
    .bottomInfo{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        justify-content: center;
        width: 90%;
        margin: 25px auto 0 auto;
    }
    .bottomInfo>ul{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        padding-left: 25px;

    }

    .lastMove {
        display: flex;
        width: 80%;
        transform: translateY(50%);
        margin: 0 auto;
        justify-content: space-between;
        /*gap: 300px;*/
        gap: calc(5vw + 15px);
    }
    .lastMove>button{
        padding: 0 20px;
        border: 1px solid transparent;
        border-radius: 7.5px;
        transition: border 0.35s ease-in-out;
        width: 105px;
        height: 35px;
    }
    .lastMove>button:hover{
        border: 1px solid gray;
    }


    .productsRecomended{
    }

    /*-------nav-------*/
    .navegador{
        width: 100%;
        padding: 25px 0;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

    }
    .navegador>div{
        margin: 0 auto;
        width: 80%;
        display:flex;
        justify-content: space-between;
    }
    .busquedaInteractiva{
        width: 425px;
    }
    .iconsBusqueda>input{
        width: 500px;
    }

    .containerMarcas>div{
        font-size: 35px;
    }
    .containerMarcas>div:hover{
        font-size: 45px;
    }
    .marcas>h1{
        width: 80%;
        margin: 0 auto;
        font-size: 40px;
        /*padding: 0;*/
    }
    .containerMarcas{
        padding: 0;
        width: 80%;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        justify-content: center;
        grid-template-areas:
        "marca_1"
        "marca_2"
        "marca_3"
        "marca_4"
        "marca_5"
        "marca_6"
        "marca_7"
        "marca_8"
        "marca_9"
        "marca_10";
        grid-auto-rows: 200px;
    }

    .masVendidos{
        padding-bottom: 25px;
    }
    .masVendidos>h1 {
        padding: 25px 0;
        width: 80%;
        margin: 0 auto;
        font-size: 40px;
    }
    /*---------catalogo-----------*/
    .catalogo{
        padding-bottom: 55px;
    }
    .catalogo>h1{
        font-size: 40px;
        padding: 55px 0;
    }

}
@media (min-width: 641px) and (max-width: 768px){

    .containerMarcas > div:nth-of-type(4){
        background-position: 45% center;
    }


    .marca>div{
        font-size: 50px;
        /*border: 5px solid red;*/
    }
    .marca:nth-of-type(3){
        display: flex;
        flex-direction: column;
        /*border: 10px solid orange;*/
    }
    .buttonsFinalizar{
        width: 90%;
    }
    .buttonsFinalizar>h2{
        white-space: nowrap;
    }

   .couriers>button{
       white-space: nowrap;
   }
    /*---containerElementsCompra---*/
    .productsAndPay{
        width: 90%;
    }
    .containerElementsCompra{
    }


    /*--arrowsLeftSide---*/
    .arrowsLeftSide{
        position: absolute;
        top: 50%;
        display: flex;
        justify-content: space-between;
        width: 112.5%;
        transform: translateY(-50%);
    }
    .arrowsLeftSide>svg{
        width: 35px;
        height: 35px;
    }
    /*----------infoCenter-----------*/
    .infoCenter{
        width: 90%;
        align-items: center;
        justify-content: center;
        padding: 35px 25px 25px 25px;
        gap: calc(10px + 2vw);
    }
    .elementInfo_one,.elementInfo_two{
        gap: calc(10px + 2vw);
        flex-direction: column;
    }

    .elementInfo_one>div,
    .elementInfo_two>div{
        width: calc(175px + 10vw);
        height: calc(175px + 10vw);
        gap: 10px;
        padding: 0 10px;
    }
    .elementInfo_one>div>b,
    .elementInfo_two>div>b{
        font-size: 20px;
    }
    .elementInfo_one>div>small,
    .elementInfo_two>div>small{
        font-size: 15px;
    }
    .elementInfo_one>div>svg,
    .elementInfo_two>div>svg{
        width: 60px;
        height: 60px;
    }
    .containerMenuSmallWindow{
        width: 275px;
    }

    #iconsNav>li:nth-of-type(3)>svg{
        pointer-events: auto;
    }

    .menu{
        /*display: flex;*/
        align-items: center;
        width: 90%;
        padding: 25px 0;
        justify-content: space-evenly;
        margin: 0 auto;
        /*gap: 0 25px;*/
        /*opacity: 0;*/
        display: none;
    }

    .containerElementsRecomended{
        width: 80%;
        display: grid;
        grid-template-columns: repeat(auto-fit,290px);
        justify-content:center;
        margin: 0 auto;
        /*gap:37.5px  75px;*/
        /*padding: 0 40px;*/
        transition: all 0.35s ease-in-out;
    }
    /*---------detailProduct------------------*/
    .container_productDetail{

    }
    .info_productDetail{
        width:80%;
        margin: 0 auto;
        border-radius: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 75px;
        padding: 0 25px 25px 25px;
        position: relative;
        /*box-shadow: 0 0 250px rgba(91, 209, 252, 0.3);*/
    }

    .container_productDetail>h1{
        text-align: center;
        padding: 25px 0;
        font-size: 45px;
    }

    .sideLeft{
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 10px 0;
        /*width: 50%;*/
        align-self: center;
    }
    .topLeft{

    }
    .topLeft>img{
        width: 100%;
        border-radius: 12px;
        transition: all 0.35s ease-in-out;
        aspect-ratio: 1/1;
        object-position: center;
        object-fit: cover;
    }
    .botLeft{
        display: flex;
        justify-content: space-evenly;
        /*gap: 0 3%;*/
        gap: 10px;
        padding: 0 15px;
        width: 100%;
        border-radius: 12px;

    }
    .botLeft>img{
        width: 30%;
        object-fit: cover;
        aspect-ratio: 1/1;
        border-radius: 12px;

    }
    .arrowsLeftSide{
        width: 110%;
    }
    .arrowsLeftSide>svg{
        width: 40px;
        height: 40px;
    }
    .sideRight{
        /*width:50%;*/
        display: flex;
        flex-direction: column;
        gap: 15px 0;
    }
    .sideRight>h2{
    }
    .priceStar{
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
    }

    #estrellas{
        display: flex;
        gap: 0 5px;
        list-style: none;
    }

    .middleInfo{
        display: flex;
        justify-content: space-between;
    }
    .bottomInfo{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        justify-content: center;
        padding: 0 25px;
        width: 90%;
        margin: 25px auto 0 auto;
    }
    .bottomInfo>ul{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        padding-left: 25px;

    }

    .lastMove {
        display: flex;
        width: 80%;
        transform: translateY(50%);
        margin: 0 auto;
        justify-content: space-between;
    }
    .lastMove>button{
        /*flex: 1;*/
        width: 105px;
        height: 35px;
        padding: 0 20px;
        border: 1px solid transparent;
        border-radius: 7.5px;
        transition: border 0.35s ease-in-out;
    }
    .lastMove>button:hover{
        border: 1px solid gray;
    }


    .productsRecomended{
    }

    /*-------nav-------*/
    .navegador{
        width: 90%;
        padding: 25px 0;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

    }
    .navegador>div{
        margin: 0 auto;
        width: 80%;
        display:flex;
        justify-content: space-between;
    }

    .containerMarcas>div{
        font-size: 35px;
    }
    .containerMarcas>div:hover{
        font-size: 45px;
    }

    .marcas>h1{
        width: 90%;
        margin: 0 auto;
        font-size: 48px;
        padding: 25px 0;
    }
    .containerMarcas{
        width: 80%;
        grid-template-areas:
        "marca_1 marca_1 marca_3"
        "marca_4 marca_2 marca_3"
        "marca_4 marca_5 marca_6"
        "marca_7 marca_5 marca_10"
        "marca_7 marca_8 marca_10"
        "marca_9 marca_8 marca_10";
        grid-auto-rows: 200px;
    }

    .masVendidos{
        padding-bottom: 50px;
    }
    .masVendidos>h1{
        padding: 25px 0;
        width: 80%;
        margin: 0 auto;
        font-size: 40px;
    }


    /*---------catalogo-----------*/
    .catalogo{
        padding-bottom: 55px;
    }
    .catalogo>h1{
        font-size: 40px;
        width: 70%;
        padding: 55px 0;
    }

}
@media (min-width: 769px) and (max-width: 1024px){

    .containerMarcas > div:nth-of-type(4){
        background-position: 45% center;
    }

    .marca>div{
        font-size: 50px;
        /*border: 5px solid red;*/
    }
    .marca:nth-of-type(3){
        display: flex;
        flex-direction: column;
        /*border: 10px solid red;*/
    }
    .menu{
        width: 100%;
        gap: 0;
    }

    .buttonsFinalizar{
        width: 75%;
    }
    .buttonsFinalizar>h2{
        white-space: nowrap;
    }

    /*----------infoCenter-----------*/
    .infoCenter{
        width: 90%;
        align-items: center;
        justify-content: center;
        padding: 35px 25px 25px 25px;
        gap: calc(10px + 2vw);
    }
    .elementInfo_one,.elementInfo_two{
        gap: calc(10px + 2vw);
        flex-direction: column;
    }

    .elementInfo_one>div,
    .elementInfo_two>div{
        width: calc(175px + 5vw);
        height: calc(175px + 5vw);
        gap: 5px;
        padding: 0 10px;
    }
    .elementInfo_one>div>b,
    .elementInfo_two>div>b{
        font-size: 20px;
    }
    .elementInfo_one>div>small,
    .elementInfo_two>div>small{
        font-size: 15px;
    }
    .elementInfo_one>div>svg,
    .elementInfo_two>div>svg{
        width: 60px;
        height: 60px;
    }

    .containerMenuSmallWindow{
        width: 275px;
    }
    #iconsNav>li:nth-of-type(3)>svg{
        pointer-events: none;
    }

    .navegador{
        border-bottom: 1px solid black;
    }

    .containerElementsRecomended{
        width: 90%;
        display: grid;
        grid-template-columns: repeat(auto-fit,290px);
        justify-content: center;
        margin: 0 auto;
        /*gap: 37.5px 75px;*/
        /*padding: 0 40px;*/
        transition: all 0.35s ease-in-out;
    }
    /*---------detailProduct------------------*/
    .container_productDetail{

    }
    .info_productDetail{
        width:90%;
        margin: 0 auto;
        border-radius: 12px;
        display: flex;
        gap: 0 50px;
        padding: 0 25px 25px 25px;
        position: relative;
        /*box-shadow: 0 0 250px rgba(91, 209, 252, 0.3);*/
    }

    .container_productDetail>h1{
        text-align: center;
        padding: 25px 0;
        font-size: 45px;
    }

    .sideLeft{
        display: flex;
        flex-direction: column;
        gap: 10px 0;
        width: 50%;
        align-self: center;
    }
    .topLeft{

    }
    .topLeft>img{
        width: 100%;
        border-radius: 12px;
        transition: all 0.35s ease-in-out;
        aspect-ratio: 1/1;
        object-position: center;
        object-fit: cover;
    }

    .botLeft{
        display: flex;
        justify-content: space-evenly;
        /*gap: 0 3%;*/
        gap: 10px;
        padding: 0 15px;
        width: 100%;
        border-radius: 12px;
    }

    .botLeft>img{
        width: 30%;
        object-fit: cover;
        aspect-ratio: 1/1;
        border-radius: 12px;
    }
    .arrowsLeftSide{
        width: 112.5%;
    }
    .arrowsLeftSide>svg{
        width: 35px;
        height: 35px;
    }
    .sideRight{
        width:50%;
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        align-self: center;
    }
    .sideRight>h2{
        /*width: 80%;*/
        /*margin: 0 auto;*/

    }
    .priceStar{
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
    }
    #estrellas{
        display: flex;
        gap: 0 5px;
        list-style: none;
    }

    .middleInfo{
        display: flex;
        justify-content: space-between;
        /*gap: 0 50%;*/
    }
    .bottomInfo{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        justify-content: center;
        /*padding: 0 25px;*/
        width: 85%;
        margin: 50px auto 0 auto;
    }
    .bottomInfo>ul{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        padding-left: 25px;

    }

    .lastMove {
        display: flex;
        width: 95%;
        transform: translateY(50%);
        margin: 0 auto;
        justify-content: space-between;
        gap: 50px;
    }
    .lastMove>button{
     padding: 0 20px;
     height: 35px;
     width: 105px;
     border: 1px solid transparent;
     border-radius: 7.5px;
     transition: border 0.35s ease-in-out;
    }
    .lastMove>button:hover{
        border: 1px solid gray;
    }


    .productsRecomended{
    }

    /*-------nav-------*/
    .navegador{
        width: 90%;
        padding: 25px 0;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

    }
    .navegador>div{
        margin: 0 auto;
        width: 80%;
        display:flex;
        justify-content: space-between;
    }

    .containerMarcas>div{
        font-size: 35px;
    }
    .containerMarcas>div:hover{
        font-size: 45px;
    }
    .marcas{


    }
    .marcas>h1{
        font-size: 45px;
        width: 80%;
        margin: 0 auto;
        padding: 25px 0 25px 0;
    }
    .containerMarcas{
        padding: 25px 0 0 0;
        width: 80%;
        grid-template-areas:
        "marca_1 marca_1 marca_3"
        "marca_4 marca_2 marca_3"
        "marca_4 marca_5 marca_6"
        "marca_7 marca_5 marca_10"
        "marca_7 marca_8 marca_10"
        "marca_9 marca_8 marca_10";
        grid-auto-rows: 200px;
    }

    .masVendidos>h1{
        padding: 25px 0;
        width: 80%;
        margin: 0 auto;
        font-size: 45px;
    }

    .catalogo{
        padding-bottom: 55px;
    }
    .catalogo>h1{
        font-size: 45px;
        width: 70%;
        padding: 25px 0 55px 0;
    }
    .catalogoElements>div{
        width: 300px;
    }
}
@media (min-width: 1025px) and (max-width: 1280px){

    .containerMarcas > div:nth-of-type(2){
        background-position: center 90%;
    }
    .containerMarcas > div:nth-of-type(3){
        background-position: center 60%;
    }
    .containerMarcas > div:nth-of-type(4){
        background-position: center 40%;
    }
    .containerMarcas > div:nth-of-type(6){
        background-position: center 65%;
    }
    .containerMarcas > div:nth-of-type(7){
        background-position: center 10%;
    }

    .marca>div{
        font-size: 60px;
    }
    /*-----pasarelaPago-----*/
    .productsAndPay{
        width: 80%;
        gap: 25px;
        flex-direction: row;
    }
    /*---------buttonsFinalizar-----------*/
    .buttonsFinalizar{
        width: 70%;
    }
    .buttonsFinalizar>h2{
        white-space: nowrap;
    }
    /*----------infoCenter-----------*/
    .infoCenter{
        width: 90%;
        align-items: center;
        justify-content: center;
        padding: 35px 25px 25px 25px;
        gap: calc(10px + 2vw);
    }
    .elementInfo_one,.elementInfo_two{
        gap: calc(10px + 2vw);
        flex-direction: column;
    }
    .elementInfo_one>div,
    .elementInfo_two>div{
        width: calc(175px + 5vw);
        height: calc(175px + 5vw);
        gap: 10px;
        padding: 0 5px;
    }
    .elementInfo_one>div>b,
    .elementInfo_two>div>b{
        font-size: 20px;
        padding: 0 10px;
    }
    .elementInfo_one>div>small,
    .elementInfo_two>div>small{
        font-size: 15px;
        padding: 0 10px;
    }
    .elementInfo_one>div>svg,
    .elementInfo_two>div>svg{
        width: 60px;
        height: 60px;
    }

    /*--------------------*/

    #iconsNav>li:nth-of-type(3)>svg{
        pointer-events: none;
    }
    /*------------navegador-----------------*/
    .navegador{
        border-bottom: 1px solid black;
    }

    /*-----productsRecomended-------*/
    .containerElementsRecomended{
        width: 90%;
        display: grid;
        grid-template-columns: repeat(auto-fit,290px);
        justify-content: center;
        margin: 0 auto;
        /*gap: 37.5px 75px;*/
        /*padding: 0 40px;*/
        transition: all 0.35s ease-in-out;
    }
    /*---detailProduct--*/
    .container_productDetail{

    }
    .info_productDetail{
        width:80%;
        margin: 0 auto;
        border-radius: 12px;
        display: flex;
        gap: 0 50px;
        padding: 0 25px 25px 25px;
        /*box-shadow: 0 0 250px rgba(91, 209, 252, 0.3);*/
    }
    .container_productDetail>h1{
        text-align: center;
        padding: 25px 0;
        font-size: 45px;
    }

    .sideLeft{
        display: flex;
        flex-direction: column;
        gap: 12.5px 0;
        width: 50%;
        align-self: center;
    }
    .topLeft{

    }
    .topLeft>img{
        width: 100%;
        border-radius: 12px;
        transition: all 0.35s ease-in-out;
        aspect-ratio: 1/1;
        object-position: center;
        object-fit: cover;

    }
    .botLeft{
        display: flex;
        justify-content: space-evenly;
        /*gap: 0 3%;*/
        gap: 15px;
        padding: 0 15px;
        width: 100%;
        border-radius: 12px;
    }
    .botLeft>img{
        width: 30%;
        object-fit: cover;
        aspect-ratio: 1/1;
        border-radius: 12px;

    }
    .arrowsLeftSide{
        width: 115%;
    }
    .arrowsLeftSide>svg{
        width: 40px;
        height: 40px;
    }
    .sideRight{
        width:50%;
        display: flex;
        flex-direction: column;
        gap: 15px 0;
    }
    .sideRight>h2{
        /*width: 80%;*/
        /*margin: 0 auto;*/

    }
    .priceStar{
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
    }
    #estrellas{
        display: flex;
        gap: 0 5px;
        list-style: none;
    }

    .middleInfo{
        display: flex;
        justify-content: space-between;
        /*gap: 0 50%;*/
    }
    .bottomInfo{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
    }
    .bottomInfo>ul{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        padding-left: 25px;

    }
    .lastMove {
        display: flex;
        width: 80%;
        transform: translateY(50%);
        margin: 0 auto;
        justify-content: space-between;
        /*gap: 300px;*/
        /*gap: calc(4vw + 15px);*/
    }
    .lastMove>button{
        padding: 0 20px;
        border-radius: 7.5px;
        border: 1px solid transparent;
        height: 35px;
        width: 105px;
        transition: all 0.35s ease-in-out;
    }
    .lastMove>button:hover{
        border: 1px solid gray;
    }




    /*---nav-------*/
    .navegador{
        width: 90%;
        padding: 25px 0;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

    }
    .navegador>div{
        margin: 0 auto;
        width: 80%;
        display:flex;
        justify-content: space-between;
    }

    .containerMarcas>div{
        font-size: 35px;
    }
    .containerMarcas>div:hover{
        font-size: 45px;
    }

    .marcas>h1{
        font-size:40px;
        width: 80%;
        margin: 0 auto;
        padding: 25px 0;
    }
    .containerMarcas{
        width: 80%;
        grid-auto-rows: 200px;
    }

    /*-----------Productos más vendidos---*/
    .masVendidos>h1{
        padding:0 0 25px 0;
        font-size: 45px;
        width: 80%;
        margin: 0 auto;
    }

    /*---------catalogo-----------*/
    .catalogo{
        padding-bottom: 55px;
    }
    .catalogo>h1{
        font-size: 45px;
        padding: 25px 0 55px 0;
        width: 70%;

    }
    .catalogoElements>div{
        width: 300px;
    }
}
@media (min-width: 1281px) and (max-width: 1440px){
    .containerMarcas > div:nth-of-type(2){
        background-position: center 90%;
    }
    .containerMarcas > div:nth-of-type(3){
        background-position: center 60%;
    }
    .containerMarcas > div:nth-of-type(4){
        background-position: center 40%;
    }
    .containerMarcas > div:nth-of-type(6){
        background-position: center 65%;
    }
    .containerMarcas > div:nth-of-type(7){
        background-position: center 10%;
    }
    .productsRecomended{
        margin-top: 50px;
    }
    .marca>div{
        font-size: 60px;
    }
    .productsAndPay{
        width: 80%;
        gap: 25px;
        flex-direction: row;
    }
    /*--------buttonsFinalizar-------*/
    .buttonsFinalizar{
        width: 50%;
    }
    /*-----pasarelaPago-----*/
    .productsAndPay{
        flex-direction: row;
    }

    /*----------infoCenter-----------*/
    .infoCenter{
        width: 90%;
        align-items: center;
        justify-content: center;
        padding: 50px 25px 25px 25px;
        gap: calc(10px + 2vw);
    }
    .elementInfo_one,.elementInfo_two{
        gap: calc(10px + 2vw);
        flex-wrap: nowrap;
    }

    .elementInfo_one>div,
    .elementInfo_two>div{
        width: calc(175px + 5vw);
        height: calc(175px + 5vw);
        gap: 10px;
        padding: 0 10px;
    }
    .elementInfo_one>div>b,
    .elementInfo_two>div>b{
        font-size: 22.5px;
    }
    .elementInfo_one>div>small,
    .elementInfo_two>div>small{
        font-size: 15px;
    }
    .elementInfo_one>div>svg,
    .elementInfo_two>div>svg{
        width: 60px;
        height: 60px;
    }

    /*--------------------*/
    #iconsNav>li:nth-of-type(3)>svg{
        pointer-events: none;
    }
    /*--------------navegador----------------*/
    .navegador{
        border-bottom: 1px solid black;
    }

    /*-----productsRecomended-------*/
    .containerElementsRecomended{
        width: 80%;
        display: grid;
        grid-template-columns: repeat(auto-fit,290px);
        justify-content: center;
        margin: 0 auto;
        /*gap: 37.5px 75px;*/
        /*padding: 0 40px;*/
        transition: all 0.35s ease-in-out;
    }
    /*------productDetail----------*/
    .container_productDetail{

    }
    .info_productDetail{
        width:80%;
        margin: 0 auto;
        border-radius: 12px;
        display: flex;
        gap: 0 50px;
        padding: 0 25px 25px 25px;
        /*box-shadow: 0 0 250px rgba(91, 209, 252, 0.3);*/
    }
    .container_productDetail>h1{
        text-align: center;
        padding: 25px 0;
        font-size: 45px;
    }

    .sideLeft{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        width: 50%;
        align-self: center;
    }
    .topLeft{

    }
    .topLeft>img{
        width: 100%;
        border-radius: 12px;
        transition: all 0.35s ease-in-out;
        aspect-ratio: 1/1;
        object-position: center;
        object-fit: cover;

    }
    .botLeft{
        display: flex;
        justify-content: space-evenly;
        /*gap: 0 3%;*/
        gap: 15px;
        padding: 0 15px;
        width: 100%;
        border-radius: 12px;

    }
    .botLeft>img{
        width: 30%;
        object-fit: cover;
        aspect-ratio: 1/1;
        border-radius: 12px;
    }
    .arrowsLeftSide{
        width: 110%;
    }
    .arrowsLeftSide>svg{
        width: 40px;
        height: 40px;
    }
    .sideRight{
        width:50%;
        display: flex;
        flex-direction: column;
        gap: 15px 0;
    }
    .sideRight>h2{
        /*width: 80%;*/
        /*margin: 0 auto;*/

    }
    .priceStar{
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
    }
    #estrellas{
        display: flex;
        gap: 0 5px;
        list-style: none;
    }

    .middleInfo{
        display: flex;
        justify-content: space-between;
        /*gap: 0 50%;*/
    }
    .bottomInfo{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
    }
    .bottomInfo>ul{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        padding-left: 25px;

    }
    .lastMove {
        display: flex;
        width: 80%;
        transform: translateY(50%);
        margin: 0 auto;
        justify-content: space-between;
        /*gap: 300px;*/
        gap: calc(5vw + 15px);
    }
    .lastMove>button{
        padding: 0 20px;
        border-radius: 7.5px;
        border: 1px solid transparent;
        /*flex: 1;*/height: 35px;
        width: 105px;
        transition: all 0.35s ease-in-out;
    }
    .lastMove>button:hover{
        border: 1px solid gray;
    }



    /*----nav---*/
    .navegador{
        width: 90%;
        padding: 25px 0;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

    }
    .navegador>div{
        margin: 0 auto;
        width: 80%;
        display:flex;
        justify-content: space-between;
    }

    .carouselImages{
        overflow: hidden;
        position: relative;
        width: 100%;
    }
    .containerImages{
        display: flex;
        /*overflow:hidden;*/
        width: 100%;
        height: 600px;

    }
    .containerImages>img{
        min-width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;

    }




    #lista_circulos{
        display: flex;
        list-style: none;
        gap: 0 7.5px;
        position: absolute;
        top: 100%;
        right: 50%;
        transform: translate(50%,-175%);
    }
    .circulo_contador{
        width: 20px;
        height: 20px;
        border:1px solid black;
        border-radius: 50%;
    }
    #containerArrows{
        width: 100%;
        padding: 0 25px;
        list-style: none;
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        justify-content: space-between;

        /*pointer-events: none;*/
    }
    #containerArrows>li{
        display: flex;
        align-items: center;
        justify-content: center;

    }
    #containerArrows>li:hover{
    }
    #containerArrows>li>svg{
        height: 60px;
        width: 60px;
    }

    .containerMarcas>div{
        font-size: 35px;
    }
    .containerMarcas>div:hover{
        font-size: 45px;
    }
    .marcas{


    }
    .marcas>h1{
        width: 80%;
        margin: 0 auto;
        font-size: 50px;
        padding: 25px 0 25px 0;
    }
    .containerMarcas{
        width: 80%;
    }

    .masVendidos>h1{
        padding: 0 0 25px 0;
        font-size: 50px;
        width: 80%;
        margin: 0 auto;
    }


    /*---------catalogo-----------*/
    .catalogo{
        padding-bottom: 55px;
    }
    .catalogo>h1{
        font-size: 45px;
        width: 70%;
        padding: 25px 0 55px 0;

    }
    .catalogoElements{
        width: 80%;
    }
    .catalogoElements>div{
        width: 300px;
    }

}
@media (min-width: 1441px) and (max-width: 1536px){

    .containerMarcas > div:nth-of-type(2){
        background-position: center 90%;
    }
    .containerMarcas > div:nth-of-type(3){
        background-position: center 60%;
    }
    .containerMarcas > div:nth-of-type(4){
        background-position: center 40%;
    }
    .containerMarcas > div:nth-of-type(6){
        background-position: center 65%;
    }
    .containerMarcas > div:nth-of-type(7){
        background-position: center 10%;
    }

    .productsRecomended{
        margin-top: 50px;
    }
    .marca>div{
        font-size: 60px;
    }

    .productsAndPay{
        width: 80%;
        gap: 50px;
        flex-direction: row;
    }
    /*----------infoCenter-----------*/
    .infoCenter{
        width: 80%;
        align-items: center;
        justify-content: center;
        padding: 50px 25px 25px 25px;
        gap: calc(10px + 2vw);
    }
    .elementInfo_one,.elementInfo_two{
        gap: calc(10px + 2vw);
        flex-wrap: nowrap;
    }

    .elementInfo_one>div,
    .elementInfo_two>div{
        width: calc(200px + 5vw);
        height: calc(200px + 5vw);
        gap: 15px;
        padding: 0 15px;
    }
    .elementInfo_one>div>b,
    .elementInfo_two>div>b{
        font-size: 22.5px;
    }
    .elementInfo_one>div>small,
    .elementInfo_two>div>small{
        font-size: 15px;
    }
    .elementInfo_one>div>svg,
    .elementInfo_two>div>svg{
        width: 60px;
        height: 60px;
    }

    /*--------------------*/

    #iconsNav>li:nth-of-type(3)>svg{
        pointer-events: none;
    }

    /*------------navegador------------------*/
    .navegador{
        border-bottom: 1px solid black;
    }
    /*-----productsRecomended-------*/
    .containerElementsRecomended{
        width: 80%;
        display: grid;
        grid-template-columns: repeat(auto-fit,290px);
        justify-content: center;
        margin: 0 auto;
        /*gap: 37.5px 75px;*/
        /*padding: 0 40px;*/
        transition: all 0.35s ease-in-out;
    }


    .container_productDetail{

    }
    .container_productDetail>h1{
        text-align: center;
        padding: 25px 0;
        font-size: 45px;
    }
    .info_productDetail{
        width:75%;
        margin: 0 auto;
        border-radius: 12px;
        display: flex;
        /*gap: cal(5wh+20px);*/
        padding: 0 25px 25px 25px;
        gap: 0 45px;
        /*box-shadow: 0 0 250px rgba(91, 209, 252, 0.3);*/
    }

    .sideLeft{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        width: 50%;
        align-self: center;
    }
    .topLeft{

    }
    .topLeft>img{
        width: 100%;
        border-radius: 12px;
        transition: all 0.35s ease-in-out;
        aspect-ratio: 1/1;
        object-position: center;
        object-fit: cover;
    }
    .botLeft{
        display: flex;
        justify-content: space-evenly;
        /*gap: 0 3%;*/
        padding: 0 15px;
        width: 100%;
        border-radius: 12px;

    }
    .botLeft>img{
        width: 30%;
        object-fit: cover;
        aspect-ratio: 1/1;
        border-radius: 12px;
    }
    .arrowsLeftSide{
        width: 110%
    }
    .arrowsLeftSide>svg{
    }
    .sideRight{
        width:50%;
        display: flex;
        flex-direction: column;
        gap: 15px 0;
    }
    .sideRight>h2{
        /*width: 80%;*/
        /*margin: 0 auto;*/

    }
    .priceStar{
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
    }
    #estrellas{
        display: flex;
        gap: 0 5px;
        list-style: none;
    }

    .middleInfo{
        display: flex;
        justify-content: space-between;
        /*gap: 0 50%;*/
    }
    .bottomInfo{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
    }
    .bottomInfo>ul{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        padding-left: 25px;

    }
    .lastMove {
        display: flex;
        width: 70%;
        transform: translateY(50%);
        margin: 0 auto;
        justify-content: space-between;
        /*gap: 300px;*/
        gap: calc(5vw + 15px);
    }

    .lastMove>button{
        padding: 0 20px;
        border-radius: 7.5px;
        width: 105px;
        height: 35px;
        border: 1px solid transparent;
        transition: all 0.35s ease-in-out;
    }
    .lastMove>button:hover{
        border: 1px solid gray;
    }


    /*-----nav------*/
    .navegador{
        width: 90%;
        padding: 25px 0;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

    }
    .navegador>div{
        margin: 0 auto;
        width: 80%;
        display:flex;
        justify-content: space-between;
    }

    .carouselImages{
        overflow: hidden;
        position: relative;
        width: 100%;
    }
    .containerImages{
        display: flex;
        /*overflow:hidden;*/
        width: 100%;
        height: 700px;
    }
    .containerImages>img{
        min-width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }
    #lista_circulos{
        display: flex;
        list-style: none;
        gap: 0 7.5px;
        position: absolute;
        top: 100%;
        right: 50%;
        transform: translate(50%,-175%);
    }
    .circulo_contador{
        width: 20px;
        height: 20px;
        border:1px solid black;
        border-radius: 50%;
    }
    #containerArrows{
        width: 100%;
        padding: 0 25px;
        list-style: none;
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        justify-content: space-between;

        /*pointer-events: none;*/
    }
    #containerArrows>li{
        display: flex;
        align-items: center;
        justify-content: center;

    }
    #containerArrows>li:hover{
    }
    #containerArrows>li>svg{
        height: 60px;
        width: 60px;
        /*pointer-events: none;*/
    }

    .containerMarcas>div{
        font-size: 35px;
    }
    .containerMarcas>div:hover{
        font-size: 45px;
    }

    .marcas{


    }
    .marcas>h1{
        font-size: 50px;
        padding: 25px 0 55px 0;
    }
    .containerMarcas{
        width: 75%;
    }


    .masVendidos>h1{
        padding: 0 0 25px 0;
        width: 80%;
        margin : 0 auto;
        font-size: 50px;
    }

    /*---------catalogo-----------*/
    .catalogo{
        padding-bottom: 55px;
    }
    .catalogo>h1{
        font-size: 45px;
        width: 70%;
        padding: 25px 0 55px 0;
    }
    .catalogoElements{
        width: 80%;
        gap: 35px;
    }
    .catalogoElements>div{
        width: 300px;
    }

}
@media (min-width: 1537px){

    .containerMarcas > div:nth-of-type(2){
        background-position: center 90%;
    }
    .containerMarcas > div:nth-of-type(3){
        background-position: center 60%;
    }
    .containerMarcas > div:nth-of-type(4){
        background-position: center 40%;
    }
    .containerMarcas > div:nth-of-type(6){
        background-position: center 65%;
    }
    .containerMarcas > div:nth-of-type(7){
        background-position: center 10%;
    }
    .arrowsLeftSide{
        width: 110%;
    }
    .arrowsLeftSide>svg{
        width: 40px;
        height: 40px;
    }


    .productsRecomended{
        margin-top: 50px;
    }

    .marca>div{
        font-size: 65px;
    }

    .productsAndPay{
        width: 70%;
        gap: 50px;
        flex-direction: row;
    }
    /*----------infoCenter-----------*/
    .infoCenter{
        width: 90%;
        align-items: center;
        justify-content: center;
        padding: 50px 25px 35px 25px;
        gap: calc(10px + 2vw);
    }
    .elementInfo_one,.elementInfo_two{
        gap: calc(10px + 2vw);
        flex-wrap: nowrap;
    }

    .elementInfo_one>div,
    .elementInfo_two>div{
        width: calc(200px + 5vw);
        height: calc(200px + 5vw);
        gap: 20px;
        padding: 0 15px;
    }
    .elementInfo_one>div>b,
    .elementInfo_two>div>b{
        font-size: 22.5px;
    }
    .elementInfo_one>div>small,
    .elementInfo_two>div>small{
        font-size: 15px;
    }

    .elementInfo_one>div>svg,
    .elementInfo_two>div>svg{
        width: 65px;
        height: 65px;
    }

    /*--------------------*/


    #iconsNav>li:nth-of-type(3)>svg{
        pointer-events: none;
    }

    /*--------navegador--------*/
    .navegador{
        border-bottom: 1px solid black;
    }
    /*-----productsRecomended-------*/
    .containerElementsRecomended{
        width: 80%;
        display: grid;
        grid-template-columns: repeat(auto-fit,290px);
        justify-content: center;
        justify-items: center;
        margin: 0 auto;
        /*gap: 37.5px 75px;*/
        transition: all 0.35s ease-in-out;
    }



    .container_productDetail{

    }
    .container_productDetail>h1{
        text-align: center;
        padding: 25px 0;
        font-size: 45px;
    }
    .info_productDetail{
        /*width:70%;*/
        width: 1200px;
        margin: 0 auto;
        border-radius: 12px;
        display: flex;
        gap: 0 50px;
        padding: 0 25px 25px 25px;
        /*box-shadow: 0 0 250px rgba(91, 209, 252, 0.3);*/
    }
    .sideLeft{
        display: flex;
        flex-direction: column;
        gap: 25px 0;
        width: 50%;
        align-self: center;
    }
    .topLeft{
        display: flex;
        justify-content: center;
    }
    .topLeft>img{
        width: 100%;
        border-radius: 12px;
        transition: all 0.35s ease-in-out;
        aspect-ratio: 1/1;
        object-position: center;
        object-fit: cover;
    }
    .botLeft{
        display: flex;
        justify-content: space-evenly;
        /*gap: 0 3%;*/
        padding: 0 25px;
        width: 100%;
        border-radius: 12px;
        gap: 25px;
    }
    .botLeft>img{
        /*width:150px;*/
        /*height: 150px;*/
        width: 30%;
        object-fit: cover;
        aspect-ratio: 1/1;
        border-radius: 12px;
        /*flex: 1;*/
    }
    .sideRight{
        width:50%;
        display: flex;
        flex-direction: column;
        gap: 15px 0;
    }
    .sideRight>h2{
        /*width: 80%;*/
        /*margin: 0 auto;*/

    }
    .priceStar{
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
    }
    #estrellas{
        display: flex;
        gap: 0 5px;
        list-style: none;
    }

    .middleInfo{
        display: flex;
        justify-content: space-between;
        /*gap: 0 50%;*/
    }
    .bottomInfo{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
    }
    .bottomInfo>ul{
        display: flex;
        flex-direction: column;
        gap: 15px 0;
        padding-left: 25px;

    }
    .lastMove{
        display: flex;
        width: 70%;
        transform: translateY(50%);
        margin: 0 auto;
        justify-content: space-between;
        /*gap: 300px;*/
        gap: calc(5vw + 15px);
    }
    .lastMove>button{
        padding: 0 20px;
        border-radius: 7.5px;
        border: 1px solid transparent;
        /*flex: 1;*/
        transition: all 0.35s ease-in-out;
        width: 105px;
        height: 35px;
        /*white-space: nowrap;*/
    }
    .lastMove>button:hover{
        border: 1px solid gray;
    }




    /*--nav---*/
    .navegador{
        width: 90%;
        padding: 25px 0;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

    }
    .navegador>div{
        margin: 0 auto;
        width: 70%;
        display:flex;
        justify-content: space-between;
    }

    .carouselImages{
        overflow: hidden;
        position: relative;
        width: 100%;
    }
    .containerImages{
        display: flex;
        /*overflow:hidden;*/
        width: 100%;
        height: 850px;
    }
    .containerImages>img{
        min-width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }
    #lista_circulos{
        display: flex;
        list-style: none;
        gap: 0 7.5px;
        position: absolute;
        top: 100%;
        right: 50%;
        transform: translate(50%,-175%);
    }
    .circulo_contador{
        width: 20px;
        height: 20px;
        border:1px solid black;
        border-radius: 50%;
    }
    #containerArrows{
        width: 100%;
        padding: 0 25px;
        list-style: none;
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        justify-content: space-between;

        /*pointer-events: none;*/
    }
    #containerArrows>li{
        display: flex;
        align-items: center;
        justify-content: center;

    }
    #containerArrows>li:hover{
    }
    #containerArrows>li>svg{
        height: 60px;
        width: 60px;
        /*pointer-events: none;*/
    }





    .carouselImages{

    }
    .containerImages{

    }

    .containerMarcas>div{
        font-size: 35px;
    }
    .containerMarcas>div:hover{
        font-size: 45px;
    }

    .marcas{


    }

    .masVendidos>h1{
        padding: 25px 0;
        width: 80%;
        margin: 0 auto;
        font-size: 50px;
    }

    .catalogo{
        padding-bottom: 55px;
    }
    .catalogo>h1{
        font-size: 45px;
        width: 70%;
        padding: 25px 0 55px 0;
    }
    .catalogoElements>div{
        width: 300px;
    }

}