/* codigos predeterminados */ 

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    :root{
        --gra: linear-gradient(45deg, cyan, royalblue,)
    }
}

body{
    font-family: "Kanit", sans-serif;
    background-color: black;
     color: white;
}




html{
    scroll-behavior: smooth;
}


/* barra de navegacion y encabezado */


/* Personaliza la barra de desplazamiento para todo el documento */
::-webkit-scrollbar {
    width: 5px; /* o el grosor que prefieras */
   
}

/* Personaliza el riel de la barra de desplazamiento */
::-webkit-scrollbar-track {
    background: #884ea0; /* color de fondo del riel */
}

/* Personaliza el aspecto del control deslizante de la barra de desplazamiento */
::-webkit-scrollbar-thumb {
    background: linear-gradient(rgb(255, 255, 255), rgb(247, 245, 243)); /* gradiente para el control deslizante */
}

/* Personaliza el aspecto del control deslizante al pasar el mouse */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(#884ea0, rgb(245, 245, 245)); /* gradiente para el hover */
}



/* Contenedor del preloader */

.contenedor-carga {
    background-color: rgba(0, 0, 0); 
    background-image: linear-gradient(225deg, rgba(0, 0, 0, 0.5) 0%, rgba(14, 2, 26, 0.5) 33%, rgba(0, 0, 0, 0.5) 66%, rgba(17, 6, 20, 0.5) 100%);
    height: 100vh;
    width: 100vw;
    position: fixed;
    transition: opacity 1s ease-in-out, visibility 0s 1s; /* Visibilidad espera hasta que la opacidad termine */
    will-change: opacity, visibility;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    z-index: 100002;
    
}



/* Bola rebotando */

.bola {
    width: 50px;
    height: 50px;
    background-color: #5c2275; 
    border-radius: 50%;
    animation: rebotar 2s ease infinite;
    margin-bottom: 50px;
}

/* Animación de la bola rebotando */

@keyframes rebotar {
    0%, 100% {
        transform: translateY(0);
        transform: scale(0.5);
    }
    50% {
        transform: translateY(-100px); /* Altura del rebote */
        transform: scale(1.5);
    }
}







/* Texto del preloader */
/* Estilos para la palabra 'BOHEMIA' que cambia de color y tamaño */
.loading-text {
    position: relative;
    overflow: hidden;
    color: rgb(255, 255, 255);
    font-size: 80px;
    letter-spacing: 14px;
    font-weight: bold;
    
}


.loading-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(21, 2, 31, 0.4), transparent);
    animation: shine 2s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

/* Porcentaje de carga grande */
.porcentaje-carga {
    font-size: 140px;
    color: white;
    font-weight: bold;
    margin-top: 20px;
}

/* Efecto de desvanecimiento */
.desvanecer {
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s 1.5s, opacity 1.5s ease;
}

/* Párpados */
.parpado {
    position: fixed;
    background-color: rgba(0, 0, 0); /* Negro con 50% de transparencia */
    background-image: linear-gradient(225deg, rgba(0, 0, 0, 0.5) 0%, rgba(16, 3, 27, 0.5) 33%, rgba(0, 0, 0, 0.5) 66%, rgba(11, 4, 14, 0.5) 100%);
    width: 100%;
    height: 50%;
    transition: transform 1s ease;
    will-change: transform;
    z-index: 10001;
}

.parpado.arriba {
    top: 0;
    transform: translateY(0);
}

.parpado.abajo {
    bottom: 0;
    transform: translateY(0);
}

/* Animación de abrir párpados */
.abrir .parpado.arriba {
    transform: translateY(-100%);
}

.abrir .parpado.abajo {
    transform: translateY(100%);
}

/* Contenido principal oculto inicialmente */
.contenido {
    display: none;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.activar-transicion {
    display: block;
    opacity: 1;
}



/* flecha subir */ 

.ir {
    display: none;
}
.arriba2 {
    color: #884ea0;
    border: 2px solid rgb(250, 249, 249);
    padding: 10px;
    width: 50px;
    text-align: center;
    border-radius: 20px;
    font-size: 20px;
    font-weight: bold;
    position: fixed;
    bottom: 15px;
    right: 20px;
    transition: 0.5s all ease;
    animation: subir 1s infinite alternate;
    cursor: pointer;
    z-index: 4;
}
.arriba2:hover {
    background-color: #512DA8;
    color: rgb(250, 250, 250);;
}
@keyframes subir {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-15px);
    }
}






/* ///////////////////////////claro - oscuro */

.claro-oscuro{
    position: fixed;
    right: 70px;
    top: 150px;
    z-index: 440;
   
}

.switch{
    width: 70px;
    height: 30px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-radius: 100px;
    border: solid 2px rgb(75, 15, 72);
    background-color: rgb(0, 0, 0);

}


body.active .switch{
    border: solid 2px rgb(75, 15, 72);
    background-color: rgb(252, 252, 252);
}



.switch i{
    color: #e2e2e2;
}



body.active .switch i {
    color: #000000;
}


.claro-oscuro li:last-child::before{
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background-color: #874ea0b4;
    border: solid thin black;
    left: 0;
    right: unset;
}





.claro-oscuro li:last-child.active::before{
    right: 0;
    left: unset;
    border: solid thin rgb(0, 0, 0);
}










header {
    width: 100%;
    height: 100vh;
    
}

@keyframes aparicion-header {
    0% {
        opacity: 0;
        transform: translate(-150px);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}




header::before {
    content: "";
    background-image: var(--background-image, url(../imagenes/logo/fondo1.jpg)); /* Imagen predeterminada */
    background-position: center center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.2;
    z-index: -10;
    filter: blur(0px);
    position: fixed;
    
}

body.active header::before {
    background-image: var(--background-image, url(../imagenes/logo/fondo5.jpg)); /* Imagen predeterminada en modo oscuro */
    opacity: 0.4;
   
}


header nav {
    margin-top: 30px;
    margin-bottom: 20vh;
    height: 80px;
    display: flex;
    justify-content: space-between;
    opacity: 0; /* Inicialmente oculto */
    animation: aparicion-nav 0.3s ease-in-out 0.2s forwards; /* Añade 'forwards' para mantener el estado final */
    z-index: 100;
  
  
}

@keyframes aparicion-nav {
    0% {
        opacity: 0;
        transform: translate(-150px);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}




.icono{
    display: none;
}

.enlaces {
    display: flex;
    height: 100%; 
    width: 60%;
    justify-content:center;
    align-items: center;
    margin: auto; 
    margin-top: auto; 
    margin-bottom: auto; 
    cursor: pointer;
   
}


.enlaces a {
    color: white;
    padding: 10px 10px;
    font-size: 18px;
    margin: 10px;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    text-transform: capitalize;
}





.enlaces a:hover{
    border-bottom: 3px solid #884ea0;
    transition: 500ms ease;
}





nav .logo{
    height: 100%;;
    margin-left: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}


nav .logo img {
    object-fit: cover;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    
}

nav .logo .txt-empresa{
    margin-left: 10px;
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.boton-registro{
    background-color: #884ea0;
    border-radius: 10px;
    padding: 10px;
    font-style: italic;
}

.boton-registro:hover{
    background-color: rgba(2, 2, 2, 0.2);
    color: white;
    
}


/* titulo y portada  */ 


.contenedor-titulo-imagen-principal{
    width: 100%;
    margin-top: -50px;
    z-index: 5;
   
    
}




.titulo-principal p{
    text-align: center;
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: 200;
    animation: aparicion-subtitulo 0.5s ease-in-out .5s forwards; /* Añade 'forwards' para mantener el estado final */;
    opacity: 0;
    z-index: -1;

}


@keyframes aparicion-subtitulo{
    0%{
        opacity: 0;
        transform: translateX(-150px);
    }
    100%{
        opacity: 1;
        transform: translateX(0px)
    }
}




.titulo-principal h1{
    margin-top: 20px;
    font-size: 140px;
    font-weight: 400;
    text-align: center;
    animation: aparicion-titulo 0.9s ease-in-out .9s forwards; /* Añade 'forwards' para mantener el estado final */;
    opacity: 0;
    z-index: -1;
    letter-spacing: 14px;
    
}


@keyframes aparicion-titulo{
    0%{
        opacity: 0;
        transform: translateY(-150px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px)
    }
}


.titulo-principal h2{
    margin-top: 20px;
    font-size: 40px;
    font-weight: 200;
    text-align: center; 
    animation: aparicion-titulo2 1.4s ease-in-out .9s forwards; /* Añade 'forwards' para mantener el estado final */;
    opacity: 0;
}


@keyframes aparicion-titulo2{
    0%{
        opacity: 0;
        transform: translateY(-150px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px)
    }
}




.contenedor-boton-titulo{
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: aparicion-botton 1s ease-in-out 1s forwards; /* Añade 'forwards' para mantener el estado final */;
    opacity: 0;
    z-index: -1;
}



@keyframes aparicion-botton{
    0%{
        opacity: 0;
        transform: translateY(150px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px)
    }
}

.titulo-principal .button-principal {
    background-color: #884ea0;
    font-size: 32px;
    letter-spacing: 3px;
    padding: 10px;
    position: relative;
    cursor: pointer;
    margin-top: 80px;
    
   
}






.titulo-principal .button-principal::before {
    content: "";
    position: absolute;
    border: 2px solid #884ea0;
    left: 10px;
    width: calc(100% - 8px);
    height: calc(100% + 1px);
    bottom: -8px;
    border-radius: 0px;
    z-index: -1;
    transition: border-color 300ms ease; /* Agrega la transición */
}

.titulo-principal .button-principal:hover::before {
    border-color: transparent; /* Cambia el color del borde al estar en hover */
}



.titulo-principal i {
    color: white;
    margin-right: 20px;
}






/* ///////////////////////////////////////////// BARRA SOCIAL */

.container-bar {
    width: 100%;
    max-width: 55px;
    position: fixed;
    left: 0;
    top: 22%;
    z-index: 10212;
    transition: transform 0.4s ease;  /* Agregar transición para la animación de aparición */
}

#btn-social:checked ~ .container-bar {
    transform: translateX(0); /* Mostrar barra social al hacer clic en la flecha */
}

.container-bar a {
    display: block;
    padding: 10px;
    margin: 20px 0px;
    font-size: 17px;
    position: relative;
    transition: all 500ms ease;
    color: #ffffff;
}

.container-bar a:hover {
    background: rgb(0, 0, 0);
}

.container-bar i {
    font-size: 25px;
    color: #e3dee6;
}

.container-bar .stt {
    position: fixed;
    background: #000000d2;
    padding: 6px;
    border-radius: 3px;
    font-size: 15px;
    margin-top: -5px;
    transition: all 500ms ease;
    opacity: 0;
    visibility: hidden;
}

.container-bar a:hover .stt {
    opacity: 1;
    visibility: visible;
    margin-left: 30px;
}

.container-bar .stt::after {
    position: absolute;
    content: '';
    border-left: 7px solid transparent;
    border-right: 6px solid #884ea0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    right: 100%;
    top: 8px;
}

#btn-social {
    display: none;
}

.fa-arrow-right {
    cursor: pointer;
    transition: all 0.4s;
    font-size: 5px;
    margin-bottom: 12px;
    display: inline-block;
    transform: rotate(180deg);
    color: #874ea085;
    margin-left: 10px;
}

#btn-social:checked + label .fa-arrow-right {
    transform: rotate(0deg);
}

.icon-social {
    transition: all 0.4s;
    transform: translateX(0%);
}

#btn-social:checked ~ .icon-social {
    transform: translateX(-100%);
}

.fa-square-whatsapp {
    color: #b205fc;
}

.stt1:hover {
    background-color: #884ea0;
    color: white;
    transition: 0.3s ease;
}

.fa-square-instagram {
    color: #884ea0;
}

.stt2:hover {
    background-color: #884ea0;
    color: white;
    transition: 0.3s ease;
}

.fa-linkedin {
    color: #884ea0;
}

.stt3:hover {
    background-color: #884ea0;
    color: white;
    transition: 0.3s ease;
}

.fa-facebook {
    color: #884ea0;
}

.stt4:hover {
    background-color: #884ea0;
    color: white;
    transition: 0.3s ease;
}









/*  ********************* seccion ofertas ************* */

.section-1{
    margin-top:-5vh;
   overflow: hidden;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-perspective: 1000px;
   perspective: 1000px;
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
   padding-bottom: 10vh ;


}





/* ///////////////////////////////////////// carrousel principal ////////////////////////// /*/ 
#drag-container, #spin-container{
    width: 100%;
    height: 800px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: auto;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-10deg);
    transform: rotateX(0deg);
   
}

#drag-container img, #drag-container video {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 00px;
    font-size: 30px;
    text-align: center;
    -webkit-box-shadow: 0 0 8px pink;
    box-shadow: 0 0 pink;
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
    object-fit: cover;

}




#drag-container img:hover, #drag-container video:hover{
    -webkit-box-shadow: 0 0 5px #884ea0;
    box-shadow: 0 0 5px #884ea0;
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
}


#drag-container p{
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50% - 50%) rotateX(90deg);
    transform: translate(-50% - 50%) rotateX(90deg);
}


#ground{
    width: 100%;
    height: 900%;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotateX(90deg);
    transform: translate(-50%, -50%) rotateX(90deg);
    background: -webkit-radial-gradient(center center, farthest-side, transparent);
}



@-webkit-keyframes spin{
    from{
        -webkit-transform: rotateY(0deg);
        transform:rotateY(0deg);
    }
    to{
        -webkit-transform: rotateY(360deg);
        transform:  rotateY(360deg);
    }
}

@keyframes spin{
    from{
        -webkit-transform: rotateY(0deg);
        transform:rotateY(0deg);
    }
    to{
        -webkit-transform: rotateY(360deg);
        transform:  rotateY(360deg);
    }
}

@-webkit-keyframes spinRevert{
    from{
        -webkit-transform: rotateY(360deg);
        transform:  rotateY(360deg);
    }
    to{
        -webkit-transform: rotateY(0deg);
        transform:rotateY(0deg);
    }
}

@keyframes spinRevert{
    from{
        -webkit-transform: rotateY(360deg);
        transform:  rotateY(360deg);
    }
    to{
        -webkit-transform: rotateY(0deg);
        transform:rotateY(0deg);
    }
}

/* ****************************** MODAL ********************** */

/* Modal Styles */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.9); 
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;  /* Cambia este valor si deseas reducir aún más el tamaño */
    max-width: 500px;  /* Establece el tamaño máximo deseado */
    height: auto; /* Esto asegura que la imagen mantenga su proporción */
}

.modal-content {
    animation: zoom 0.6s;
}

@keyframes zoom {
    from {transform: scale(0.1)} 
    to {transform: scale(1)}
}

/* Close Button */
.close {
    position: absolute;
    top: 50px;
    right: 35px;
    color: #884ea0;
    font-size: 60px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}



/* ///////////////////////////////////// INDUMENTARIA //////////////////// */

/* titulo y sub titulo*/
@keyframes neon {
    0%, 100% {
        color: #ffffff;
    }
    50% {
        color: #535353;
    }
}

.contenedor-tt-indumentaria h3 {
    color: #535353;
    font-size: 100px;
    font-weight: 100;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 5vh;
}

.contenedor-tt-indumentaria h3 span {
    animation: neon 3.5s infinite alternate;
    animation-delay: calc(var(--i) * 0.2s);
}

.contenedor-tt-indumentaria h3 span:nth-child(1) { --i: 1; }
.contenedor-tt-indumentaria h3 span:nth-child(2) { --i: 2; }
.contenedor-tt-indumentaria h3 span:nth-child(3) { --i: 3; }
.contenedor-tt-indumentaria h3 span:nth-child(4) { --i: 4; }
.contenedor-tt-indumentaria h3 span:nth-child(5) { --i: 5; }
.contenedor-tt-indumentaria h3 span:nth-child(6) { --i: 6; }
.contenedor-tt-indumentaria h3 span:nth-child(7) { --i: 7; }
.contenedor-tt-indumentaria h3 span:nth-child(8) { --i: 8; }
.contenedor-tt-indumentaria h3 span:nth-child(9) { --i: 9; }
.contenedor-tt-indumentaria h3 span:nth-child(10) { --i: 10; }
.contenedor-tt-indumentaria h3 span:nth-child(11) { --i: 11; }
.contenedor-tt-indumentaria h3 span:nth-child(12) { --i: 12; }



.contenedor-sub-indu{
    font-size: 20px;
    color: white;
    font-weight: lighter;
    text-align: center;
    margin-bottom: 50px;
}




/* /////////////////////////////////// swiper cards mas vendidos */ 

.swiper{
    width: 80%;
    padding: 150px 0 50px 0; 
    margin: auto ;
}
.swiper-wrapper {
    display: flex;
    width: auto !important;   /* Asegura que no se expanda a todo el ancho */
}
.swiper-slide{
    width: 500px !important; /* Forzamos el ancho específico */
    flex-shrink: 0;  /* Evitamos que se reduzca el tamaño de las diapositivas */
    min-height: 500px;
    background-color: rgba(0, 0, 0, 0.8); /* Negro con 50% de transparencia */
    background-image: linear-gradient(225deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 33%, rgb(14, 13, 13) 66%, rgb(8, 2, 10) 100%);
    padding: 40px;
    text-align: center;
    opacity: 0;
    transform: translateY(50px);  /* Las cartas empiezan 50px más abajo */
    transition: opacity 1s ease-out, transform 1s ease-out;
    border-radius: 20px;
}

body.active .swiper-slide {
    background-color: rgba(255, 255, 255, 0.8); /* Negro con 50% de transparencia */
    background-image: linear-gradient(225deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 33%, rgb(253, 253, 253) 66%, rgb(252, 252, 252) 100%);
}

/* Cuando se añade la clase "show", la carta aparecerá */
.swiper-slide.show {
    opacity: 1;
    transform: translateY(0);  /* La carta se mueve a su posición final */
}
.icons{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.icons i{
    font-size: 20px;
    color: #884ea0;

}

.icons img {
    width: 120px;
}





.product-content{
    display: flex;
    justify-content: space-between;

}


.product-txt{
    flex-basis: 50%;
    text-align: left;

}

.product-txt span {
    font-size: 25px;
    color: #884ea0;
    font-weight: bold;
}

.product-txt h3{
    font-size: 20px;
    color: white;
    text-transform: uppercase;
}


body.active .product-txt h3{
    color: black;
}

.product-txt p {
    font-size: 14px;
    color: gray;
}


body.active .product-txt p{
    color: black;
}

.product-img{
    margin-top: 40px;
    flex-basis: 50%;
    text-align: right;
}

.product-img img {
    width: 290px;
}

.btn-1{
    display: inline-block;
    padding: 13px 55px;
    border: 1px solid #ffffff;
    border-radius: 25px;
    color: #884ea0;
    text-decoration: none;
    margin-top: 50px;
    transition: 0.3s ease-in;
}


body.active .btn-1{
    border: 1px solid black;
    color: black;
}

.btn-1:hover{
    border: 1px solid #884ea0;
    color: white;
}

body.active .btn-1:hover{
    border: 1px solid #884ea0;
    color: #512DA8;
    font-weight: bold;
}




/* /////////////////////////////// indumentaria 2 seccion ///////////// /*/

.indumentaria2{
   
    margin-top: 7vh;
}

.contenido-indu{
    padding-top: 2vh;
    max-width: 82%;
    width: 100%;
    margin: 40px auto;
    display: flex;
    
   
}

.mostrador{
    width: 100%;
    transition: 0.5s ease;
    
}

.mostrador .fila{
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    scroll-behavior: smooth; /* Para asegurar desplazamiento suave */
}

.mostrador .fila .item {
    max-width: 400px;
    padding: 70px;
    height: 420px;
    text-align: center;
    margin: 0 10px;
    cursor: pointer;
    border-radius: 20px;
    transition: 0.5s ease;
    background-color: rgba(0, 0, 0, 0.8); /* Negro con 50% de transparencia */
    background-image: linear-gradient(225deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 33%, rgb(14, 13, 13) 66%, rgb(8, 2, 10) 100%);
   
}


body.active .mostrador .fila .item{
    background-color: rgba(253, 250, 250, 0.8); /* Negro con 50% de transparencia */
    background-image: linear-gradient(225deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 33%, rgb(255, 255, 255) 66%, rgb(255, 255, 255) 100%);
}


.mostrador .fila .item:hover{
    background-color: #030303;
    background-image: linear-gradient(17deg, #201c20 0%, #884ea0 100%);
}


body.active .mostrador .fila .item:hover{
    background-color: #030303;
    background-image: linear-gradient(17deg, #201c20 0%, #884ea0 100%);
}

.mostrador .fila .item img {
    width: 100%;
    max-height: 300px;
    margin: -45px 0;
    object-fit: cover;

    /* Aquí agregamos el efecto hover */
    transition: box-shadow 0.3s ease; /* Transición suave para el efecto */

    &:hover {
        
        transform: scale(1.05); /* Aumento de tamaño sutil */
    }
}

.mostrador .fila .item .descripcion{
    margin-top: 10px;
    color: white;
    font-weight: lighter;
    margin-bottom: 20px;
    font-size: 24px;
}


body.active .mostrador .fila .item .descripcion{
    color: black;
    font-weight: bold;
}


.mostrador .fila .item .precio{
   
    color: white;
    font-weight: bold;
    font-size: 20px;
    margin-top: -10px;
   
}



body.active .mostrador .fila .item .precio{
    color: black;
}

.seleccion{
    transition: 0.5s ease;
    opacity: 1;
    width: 0%;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.8); /* Negro con 50% de transparencia */
    background-image: linear-gradient(225deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 33%, rgb(14, 13, 13) 66%, rgb(8, 2, 10) 100%);
 
}



body.active .seleccion{
    background-color: rgba(255, 252, 252, 0.8); /* Negro con 50% de transparencia */
    background-image: linear-gradient(225deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 33%, rgb(255, 255, 255) 66%, rgb(255, 255, 255) 100%);
}



.cerrar{
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}


body.active .cerrar{
    color: black;
    font-weight: bold;
}
.info{
    padding: 20px;
}

.info img{
    display: block;
    margin: 50px;
    width: 80%;
}

.info h2{
    color: #ffffff;
    margin-bottom: 10px;
}

body.active .info h2{
    color: black;
}

.info p {
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 10px;
}

body.active .info p{
    color: black;
}

.info .precio{
    font-size: 30px;
    font-weight: bold;
    color: #fdfdfd;
    margin-bottom: 10px;
    display: block;
}

body.active .info .precio{
    color: black;
}

.info .fila {
    display: flex;
    align-items: flex-end;
 
}


.info .fila label{
    display: block;
    margin-bottom: 10px;
}

.info .fila select{
    width: 70px;
    font-size: 18px;
    padding: 6px;
    margin-right: 30px;
   
}

.info .fila button{
    height: 40px;
    border: none;
    padding: 0 10px;
    color: #e4dddf;
    background-color: #884ea0;
}





/* ///////////////////////////////// bijoteria */


.cateroriasb{
    width: 85%;
    height: 100px;
    border-bottom: 4px solid #884ea0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: auto;
}

.cateroriasb ul li {
    list-style: none;
    padding: 20px;
    margin: 10px;
    float: left;
    font-size: 20px;
    border-radius: 35px;
}

.cateroriasb ul li a{
    color: inherit;
    text-decoration: none;
}

.cateroriasb ul li.active-bijou{
    background: #884ea0
}

.cateroriasb ul li.active-bijou a {
    color: white;
    font-weight: bold;
}

.filter-condition{
    padding: 20px;
    height: 100px;
    font-size: 20px;
    font-weight: 20px;
}

.filter-condition select{
    width: 120px;
    padding: 0 0 0 10px;
    border: none;
    outline: none;
    font-weight: bold;
    color: #884ea0;
    background: transparent;
    cursor: pointer;
}


.product-field{
    padding: 00px 80px;

}

.product-field ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.product-field ul li{
    list-style: none;
    width: 23%;
    height: 450px;
    transition: 0.5s all;
    background-color: rgba(0, 0, 0, 0.8); /* Negro con 50% de transparencia */
    background-image: linear-gradient(225deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 33%, rgb(14, 13, 13) 66%, rgb(8, 2, 10) 100%);
    border-radius: 20px;
    padding: 10px;
    margin: 300px 10px 0 15px;
    position: relative;
}


body.active .product-field ul li{
    background-color: rgba(255, 255, 255, 0.8); /* Negro con 50% de transparencia */
    background-image: linear-gradient(225deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 33%, rgb(255, 255, 255) 66%, rgb(255, 255, 255) 100%);
}


.product-field ul li:hover picture img{
     /* Aquí agregamos el efecto hover */
     transition: box-shadow 0.3s ease; /* Transición suave para el efecto */

     &:hover {
         
         transform: scale(1.3); /* Aumento de tamaño sutil */
         transform: skewY(-15deg);
    padding: 25px 0 0 0;
     }

}

picture{
    background-color: rgba(0, 0, 0, 0.8); /* Negro con 50% de transparencia */
    background-image: linear-gradient(225deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 33%, rgb(14, 13, 13) 66%, rgb(8, 2, 10) 100%);
    padding: 5px;
    position: absolute;
    right: 0;
    bottom: 41%;
    width: 75%;
    height: 85%;
    border-radius: 50px 20px 0 20px;
    transform: skewY(20deg);
    overflow: hidden;
    box-shadow: 0 1px #00000020, -1px 0 0 #000000;
}

body.active picture {
    background-color: rgba(255, 255, 255, 0.8); /* Negro con 50% de transparencia */
    background-image: linear-gradient(225deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 33%, rgb(255, 255, 255) 66%, rgb(255, 255, 255) 100%);
}

picture img{
    width: 95%;
    z-index: 202;
    transform: skewY(-20deg);
    padding: 25px 0 0 0;
}

.detail{
    width: 100%;
    height: 100%;
}

.detail .icon{
    width: 30%;
    height: 55%;
    padding: 20px 5px;
}

.icon span{
    background: #17011aec;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50px;
    text-align: center;
    padding: 0;
    margin: 0 0 20px 5px;
    font-size: 20px;
    color: #ffffff;
}

.icon span:hover{
    background: rgb(255, 255, 255);
    cursor: pointer;
    color: #884ea0;
}

.detail>strong{
    display: inherit;
    margin: 20px;
    font-size: 30px;
    letter-spacing: 2px;
    color: #ffffff;
}

.detail>span{
    display: inherit;
    padding: 0 20px;
    width: 80%;
    color: #3b3939;
}

.detail>small{
    display: inline-block;
    padding: 8px 20px;
    margin: 15px;
    font-weight: bold;
    border-radius: 6px;
    border: 1px solid #ffffff;
    cursor: pointer;
    color: rgb(255, 255, 255);
}

.detail>small:hover{
    background-color: #884ea0;
    color: white;
}

li h4 {
    position: absolute;
    right: 10px;
    top: 50%;
    font-size: 20px;
    color: #884ea0;
    text-shadow: 1px 1px 2px black;
}




/* Contacto */



.contacto{
    margin-top: 20vh;
    margin-bottom: 20vh;
    width: 100%;
    margin: auto auto;
}



.contenedor-tt-cont h1{
    font-family: 'Figtree', sans-serif;
    color: #b2b2b2;
    font-size: 150px;
    letter-spacing: 15px;
    opacity: 0.3;
    font-weight: 900;
    text-align: center;
}
.caja-padre{
    margin-top: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: auto auto;
  
}


.contenedor-contacto{
    margin-top: 0vh;
    display: grid;
    grid-template-columns: repeat(2,50%);
    padding: 20px;
    gap: 10px;
    width: 1100px;
}

.box-info {
    color: white;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.box-info >  h1 {
    text-align: left;
    letter-spacing: 5px;
}

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


.data > p > i {
    color: #512DA8;
    margin-right: 10px;
    font-size: 25px;
}

.links {
    display: flex;
    gap: 15px;
}

.links > a {
    text-decoration: none;
    width: 40px;
    height: 40px;
    background-color: black;
    text-align: center;
    transition: 1s ease-in-out;
}


.links > a > i {
    color: white;
    line-height: 40px;
    font-size: 20px;
}

form {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 15px;

}


.input-box {
    position: relative;
}


.input-box > input {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    outline: none;
    background: rgba(255, 255, 255, 0.1);
    border: 3px solid transparent;
    letter-spacing: 1px;
    transition: .3s;
    color: white;
}

.input-box > input:focus,
.input-box > textarea:focus{
    border-bottom: 3px solid #512DA8;
    animation: shake .2s ease;
}

.input-box > input::placeholder,
.input-box > textarea::placeholder{
    color: #323232
}


.input-box > input:focus::placeholder,
.input-box > textarea:focus::placeholder{
    color: transparent;
}

.input-box textarea {
    width: 100%;
    height: 130px;
    background: rgba(255, 255, 255, 0.1);
    border: 3px solid transparent;
    letter-spacing: 1px;
    transition: .3s;
    color: white;
    padding: 10px;
}

.input-box > i {
    color: rgba(255, 255, 255, 0.3);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    transition: .3s ease;

}


.input-box > input:focus ~ i {
    color: #512DA8;
}

form > button {
    background: #512DA8;
    color: white;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 10px;
    transition: .2s;
}

form > button:hover,
.links > a:hover {
    background-color: #330066;
}



@keyframes shake {
    0%, 100% { transform: translateX(0);}
    10%, 30%, 50%, 70%, 90%{ transform: translateX(-10px);}
    20%, 40%, 60% , 80% {transform: translateX(10px);}
}







/* efectos js */

/*sobre nosotros effect*/
.animado, .animado2 {
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    will-change: opacity, transform;
}

.mostrarArriba { 
    animation: mostrarArriba 0.8s ease-in-out forwards;
}

@keyframes mostrarArriba{
    0%{
        transform: translateY(100px);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}

.mostrarIzquierda {
    animation: mostrarIzquierda 0.8s ease-in-out forwards;
}

@keyframes mostrarIzquierda{
    0%{
        transform: translateX(-100px);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}












/* //////////////////////////////// footer */

footer{
    margin-top:7vh ;
    width: 100%;
    height: 100%;
    background-color: #060007;
    color: #fcfcfc;
    padding: 100px 0px 30px;
    font-size: 13px;
    line-height: 20px;
}



footer .row{
    width: 85%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}


footer .col {
    flex-basis: 25%;
    padding: 10px;
}

footer .col:nth-child(2), footer .col:nth-child(3){
    flex-basis: 15%;
}

footer .logo-footer{
    width: 80px;
    margin-bottom: 30px;
}


footer .col h3{
    width: fit-content;
    margin-bottom: 40px;
    position: relative;
}

.email-id {
    width: fit-content;
    border-bottom: 1px solid rgb(32, 2, 32);
    margin: 20px 0;
}


footer ul li {
    margin-bottom: 12px;
}

footer ul li a {
    text-decoration: none;
    color: white;
}




footer form {
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
    position: relative;

    
}


footer form .fa-solid{
    font-size: 18px;
    margin-right: 10px;
    position: absolute;
    top: 0;
    left: 0;
 
}

footer form input {
    width: 100%;
    background: transparent;
    color: white;
    border: 0;
    outline: none;
    margin-left: 80px;
}





footer form button {
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
}


footer form button .fa-solid{
    font-size: 16px;
    color: white;
    position: absolute;
    right: 0;
}





footer .social-icons .fa-brands{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: rgb(2, 2, 2);
    background-color: white;
    margin-right: 15px;
    cursor: pointer;

}




hr{
    width: 90%;
    border: 0;
    border-bottom: 1px solid #884ea0;
    margin: 20px auto;
}






footer .copyright {
    text-align: center;


}





footer .underline{
    width: 100%;
    height: 5px;
    background: #767676;
    border-radius: 3px;
    position: absolute;
    top: 25px;
    left: 0;
    overflow: hidden;
}



footer .underline span {
    width: 15px;
    height: 100%;
    background-color: #884ea0;
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 10px;
    animation: moving 2s linear infinite;
}


@keyframes moving {
    0%{
        left: -20px;
    }
    100%{
        left: 100%;
    }   
}



/* ////////////////////////// RESPONSIVE TABLET CELULAR //////////////////// /*/ 

@media screen and (max-width:1100px) {
        /* Contenedor del preloader */

        .contenedor-carga {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
    
        }
    
        /* Texto del preloader */
        /* Estilos para la palabra 'BOHEMIA' que cambia de color y tamaño */
        .loading-text {
            position: relative;
            overflow: hidden;
            color: rgb(255, 255, 255);
            font-size: 40px;
            letter-spacing: 4px;
            font-weight: bold;
            
        }
    
    
        /* Porcentaje de carga grande */
        .porcentaje-carga {
            font-size: 40px;
            color: white;
            font-weight: bold;
            margin-top: 20px;
        }





    /* menu y header */
    header nav {
        margin-top: 0;
        z-index: 1000;
        position: fixed;
        top: 0;
        right: 0;
    }

    .icono {
        display: flex;
        justify-content: center;
        height: 70px;
        align-items: center;
        color: white;
        padding: 20px;
        z-index: 6001;
        cursor: pointer;
        margin-right: 40px;
    }

    .enlaces {
        position: fixed;
        right: 0;
        height: 105vh;
        width: 400px;
        border-left: 1px solid #512DA8;
        flex-direction: column;
        background-color: rgba(0, 0, 0); /* Aumentar un poco la opacidad */
        z-index: 6000;
        clip-path: circle(0% at 100% 0);
        opacity: 0; /* Empieza siendo invisible */
        transform: translateX(100%); /* Empieza fuera de la vista */
        transition: clip-path 0.6s ease, opacity 0.6s ease, transform 0.6s ease; /* Mejorar la transición */
    }

    .enlaces.dos {
        clip-path: circle(150% at 100% 0);
        opacity: 1; /* Aparece */
        transform: translateX(0); /* Entra en vista */
    }

    header nav .logo {
        z-index: 6002;
    }


    .logo{
        margin-right: 37px;
      
    }


        /* swich claro oscuro */

        .claro-oscuro{
            left: 20px;
            top: 20px;
            z-index: 4;
           
        }
    


    /* titulo y sub titulo principal */

    .contenedor-titulo-imagen-principal{
        margin-top: 25vh;
        
    }

    .titulo-principal p{
        font-size: 18px;
    }

    .titulo-principal h1{
        margin-top: 20px;
        font-size: 120px;
    }

    /* carrusel 3D*/
    .section-1{
        margin-top:-50vh;
        padding-bottom: 2vh;
        display: none;
    }
    
    /* /////////////////////////////////// indumentaria 1 */ 

    .indumentaria{

        margin-top: -25vh;
    }

/* /////////////////////////////////// swiper cards mas vendidos */ 

    .swiper{
        width: 80%;
        padding: 150px 0 50px 0; 
        margin: auto ;
    }
    .swiper-wrapper {
        display: flex;
        width: auto !important;   /* Asegura que no se expanda a todo el ancho */
    }
    .swiper-slide{
        width: 400px !important; /* Forzamos el ancho específico */
        flex-shrink: 0;  /* Evitamos que se reduzca el tamaño de las diapositivas */
        min-height: 400px;
        background-color: rgba(0, 0, 0, 0.8); /* Negro con 50% de transparencia */
        background-image: linear-gradient(225deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 33%, rgb(14, 13, 13) 66%, rgb(8, 2, 10) 100%);
        padding: 40px;
        text-align: center;
        opacity: 0;
        transform: translateY(50px);  /* Las cartas empiezan 50px más abajo */
        transition: opacity 1s ease-out, transform 1s ease-out;
        border-radius: 20px;
    }

    body.active .swiper-slide {
        background-color: rgba(255, 255, 255, 0.8); /* Negro con 50% de transparencia */
        background-image: linear-gradient(225deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 33%, rgb(253, 253, 253) 66%, rgb(252, 252, 252) 100%);
    }

    /* Cuando se añade la clase "show", la carta aparecerá */
    .swiper-slide.show {
        opacity: 1;
        transform: translateY(0);  /* La carta se mueve a su posición final */
    }
    .icons{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;
    }

    .icons i{
        font-size: 20px;
        color: #884ea0;

    }

    .icons img {
        width: 120px;
    }


    .product-content{
        display: flex;
        justify-content: center;
       position: relative;

    }

    .product-txt {
        position: absolute;
        top: calc(0% - 10px); /* Ajusta la posición vertical */
        left: 50%;
        transform: translate(-50%, 0); /* Mantiene el centrado horizontal */
        text-align: center;
        width: 100%;
    }
    
    
    .product-txt span {
        font-size: 25px;
        color: #884ea0;
        font-weight: bold;
    }

    .product-txt h3{
        font-size: 20px;
        color: white;
        text-transform: uppercase;
     
    }


    body.active .product-txt h3{
        color: black;
    }

    .product-txt p {
        font-size: 14px;
        color: gray;
        display: none;
    }


    body.active .product-txt p{
        color: black;
    }

    .product-img{
        margin-top: 70px;
        flex-basis: 50%;
        text-align: center;
    }

    .product-img img {
        width: 200px;
        height: 100%;
    }

    .btn-1{
        display: inline-block;
        padding: 13px 55px;
        border: 1px solid #ffffff;
        border-radius: 25px;
        color: #884ea0;
        text-decoration: none;
        margin-top: 50px;
        transition: 0.3s ease-in;
    }


    body.active .btn-1{
        border: 1px solid black;
        color: black;
    }

    .btn-1:hover{
        border: 1px solid #884ea0;
        color: white;
    }

    body.active .btn-1:hover{
        border: 1px solid #884ea0;
        color: #512DA8;
        font-weight: bold;
    }



/* /////////////////////////////// indumentaria 2 seccion ///////////// /*/

    .indumentaria2{
    
        margin-top: 0vh;
       
    }



    .contenedor-tt-indumentaria{
  
        margin-top: -5vh;
    }
    .contenido-indu{
        max-width: 90%;
        width: 100%;
        margin: 20px auto;
    }


    .mostrador .fila .item {
        max-width: 200px;
        padding: 20px;
        height: 320px;

    
    }


    .mostrador .fila .item img {
        width: 100%;
        max-height: 300px;
        margin: -25px 0;
        object-fit: cover;
    }

    .mostrador .fila .item .descripcion{
        margin-top: 15px;
        color: white;
        font-weight: lighter;
        margin-bottom: 20px;
        font-size: 20px;
    }



    .mostrador .fila .item .precio{
        color: white;
        font-weight: bold;
        font-size: 18px;
        margin-top: -10px;
    
    }



    
/* ///////////////////////////////// bijoteria */


    .cateroriasb{
        width: 90%;
        height: 100px;
        border-bottom: 4px solid #884ea0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cateroriasb ul li {
        list-style: none;
        padding: 10px;
        margin: 10px;
        font-size: 20px;
        border-radius: 35px;
        
    }

    .filter-condition{
 
        display: none;
    }

    .filter-condition select{
        width: 120px;
        padding: 0 0 0 10px;
        border: none;
        outline: none;
        font-weight: bold;
        color: #884ea0;
        cursor: pointer;
    }


    .product-field{
        width: 90%;
        padding: 10px;
        margin: auto    ;

    }

    .product-field ul{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .product-field ul li{
        width: 40%;
        height: 450px;
        margin: 200px 10px 0 15px;
        position: relative;
    }


    picture{
        background-color: rgba(0, 0, 0, 0.8); /* Negro con 50% de transparencia */
        background-image: linear-gradient(225deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 33%, rgb(14, 13, 13) 66%, rgb(8, 2, 10) 100%);
        padding: 5px;
        position: absolute;
        right: 0;
        bottom: 41%;
        width: 75%;
        height: 85%;
        border-radius: 50px 20px 0 20px;
        transform: skewY(20deg);
        overflow: hidden;
        box-shadow: 0 1px #00000020, -1px 0 0 #000000;
    }

    body.active picture {
        background-color: rgba(255, 255, 255, 0.8); /* Negro con 50% de transparencia */
        background-image: linear-gradient(225deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 33%, rgb(255, 255, 255) 66%, rgb(255, 255, 255) 100%);
    }

    picture img{
        width: 95%;
        z-index: 202;
        transform: skewY(-20deg);
        padding: 25px 0 0 0;
    }

    .detail{
        width: 100%;
        height: 100%;
    }

    .detail .icon{
        width: 30%;
        height: 55%;
        padding: 20px 5px;
    }

    .icon span{
        background: #17011aec;
        display: inline-block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        text-align: center;
        padding: 0;
        margin: 0 0 20px 5px;
        font-size: 20px;
        color: #ffffff;
    }

    .icon span:hover{
        background: rgb(255, 255, 255);
        cursor: pointer;
        color: #884ea0;
    }

    .detail>strong{
        display: inherit;
        margin: 20px;
        font-size: 30px;
        letter-spacing: 2px;
        color: #ffffff;
    }

    .detail>span{
        display: inherit;
        padding: 0 20px;
        width: 80%;
        color: #3b3939;
    }

    .detail>small{
        display: inline-block;
        padding: 8px 20px;
        margin: 15px;
        font-weight: bold;
        border-radius: 6px;
        border: 1px solid #ffffff;
        cursor: pointer;
        color: rgb(255, 255, 255);
    }

    .detail>small:hover{
        background-color: #884ea0;
        color: white;
    }

    li h4 {
        position: absolute;
        right: 10px;
        top: 50%;
        font-size: 20px;
        color: #884ea0;
        text-shadow: 1px 1px 2px black;
    }




}



@media screen and (max-width:850px){
    
    /* fondo dinamico */    
    header::before {

        background-image: var(--background-image, url(../imagenes/logo/vertical1.jpg)); /* Imagen predeterminada */

    }

    body.active header::before {
        background-image: var(--background-image, url(../imagenes/logo/vertical5.jpg)); /* Imagen predeterminada en modo oscuro */
        opacity: 0.8;
    
    }

    
    /* titulo y sub titulo principal */

    .contenedor-titulo-imagen-principal{
        margin-top: 25vh;
        
    }

    .titulo-principal p{
        font-size: 18px;
    }

    .titulo-principal h1{
        margin-top: 20px;
        font-size: 90px;
    }

    .titulo-principal h2{
        margin-top: 20px;
        font-size: 30px;

    }
    


    /* indumentaria */

    .contenedor-tt-indumentaria h3 {
        color: #535353;
        font-size: 70px;
 
    }

    /* productos mas vendidos */

    .swiper-slide{
        width: 320px !important; /* Forzamos el ancho específico */
 
    }


    .icons img {
        width: 80px;
    }


/* /////////////////////////////// indumentaria 2 seccion ///////////// /*/
.indumentaria2{ 
    margin-top: 7vh;
}

.contenido-indu{
    max-width: 90%;
    width: 100%;
    margin: 20px auto;
  
}

.mostrador{
    width: 100%;
    transition: 0.5s ease;
    
}

.mostrador .fila{
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    scroll-behavior: smooth; /* Para asegurar desplazamiento suave */
    flex-wrap: wrap;
    padding: 40px;
}

.mostrador .fila .item {
    max-width: 350px;
    padding: 0px;
    height: 320px;
    margin: 10px 20px;

}



body.active .mostrador .fila .item{
    background-color: rgba(253, 250, 250, 0.8); /* Negro con 50% de transparencia */
    background-image: linear-gradient(225deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 33%, rgb(255, 255, 255) 66%, rgb(255, 255, 255) 100%);
}


.mostrador .fila .item:hover{
    background-color: #030303;
    background-image: linear-gradient(17deg, #201c20 0%, #884ea0 100%);
}


body.active .mostrador .fila .item:hover{
    background-color: #030303;
    background-image: linear-gradient(17deg, #201c20 0%, #884ea0 100%);
}

.mostrador .fila .item img {
    width: 100%;
    max-height: 300px;
    margin: -45px 0;
    object-fit: cover;

    /* Aquí agregamos el efecto hover */
    transition: box-shadow 0.3s ease; /* Transición suave para el efecto */

    &:hover {
        
        transform: scale(1.05); /* Aumento de tamaño sutil */
    }
}


.mostrador .fila .item .descripcion{
    margin-top: 15px;
    color: white;
    font-weight: lighter;
    margin-bottom: 20px;
    font-size: 20px;
}



body.active .mostrador .fila .item .descripcion{
    color: black;
    font-weight: bold;
}


.mostrador .fila .item .precio{
    color: white;
    font-weight: bold;
    font-size: 18px;
    margin-top: -10px;

}



body.active .mostrador .fila .item .precio{
    color: black;
}

.seleccion{
    transition: 0.5s ease;
    opacity: 1;
    width: 0%;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.8); /* Negro con 50% de transparencia */
    background-image: linear-gradient(225deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 33%, rgb(14, 13, 13) 66%, rgb(8, 2, 10) 100%);
 
}



body.active .seleccion{
    background-color: rgba(255, 252, 252, 0.8); /* Negro con 50% de transparencia */
    background-image: linear-gradient(225deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 33%, rgb(255, 255, 255) 66%, rgb(255, 255, 255) 100%);
}



.cerrar{
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}


body.active .cerrar{
    color: black;
    font-weight: bold;
}
.info{
    padding: 20px;
}

.info img{
    display: block;
    margin: 50px;
    width: 80%;
}

.info h2{
    color: #ffffff;
    margin-bottom: 10px;
}

body.active .info h2{
    color: black;
}

.info p {
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 10px;
}

body.active .info p{
    color: black;
}

.info .precio{
    font-size: 30px;
    font-weight: bold;
    color: #fdfdfd;
    margin-bottom: 10px;
    display: block;
}

body.active .info .precio{
    color: black;
}

.info .fila {
    display: flex;
    align-items: flex-end;
 
}


.info .fila label{
    display: block;
    margin-bottom: 10px;
}

.info .fila select{
    width: 70px;
    font-size: 18px;
    padding: 6px;
    margin-right: 30px;
   
}

.info .fila button{
    height: 40px;
    border: none;
    padding: 0 10px;
    color: #e4dddf;
    background-color: #884ea0;
}




/* bijouteria */

/* ///////////////////////////////// bijoteria */


.cateroriasb{
    width: 90%;
    height: 100px;
    border-bottom: 4px solid #884ea0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cateroriasb ul li {
    list-style: none;
    padding: 5px;
    margin: 10px;
    font-size: 18px;
    border-radius: 20px;  
    
}

.filter-condition{

    display: none;
}

.filter-condition select{
    width: 120px;
    padding: 0 0 0 10px;
    border: none;
    outline: none;
    font-weight: bold;
    color: #884ea0;
    cursor: pointer;
}


.product-field{
    width: 90%;
    padding: 10px;
    margin: auto;
}

.product-field ul{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.product-field ul li{
    width: 40%;
    height: 550px;
    margin: 100px 10px 0 15px;
    position: relative;
}


picture{
    background-color: rgba(0, 0, 0, 0.8); /* Negro con 50% de transparencia */
    background-image: linear-gradient(225deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 33%, rgb(14, 13, 13) 66%, rgb(8, 2, 10) 100%);
    padding: 5px;
    position: absolute;
    right: 0;
    bottom: 41%;
    width: 65%;
    height: 65%;
    border-radius: 50px 20px 0 20px;
    transform: skewY(20deg);
    overflow: hidden;
    box-shadow: 0 1px #00000020, -1px 0 0 #000000;
}

body.active picture {
    background-color: rgba(255, 255, 255, 0.8); /* Negro con 50% de transparencia */
    background-image: linear-gradient(225deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 33%, rgb(255, 255, 255) 66%, rgb(255, 255, 255) 100%);
}

picture img{
    width: 95%;
    z-index: 202;
    transform: skewY(-20deg);
    padding: 25px 0 0 0;
}

.detail{
    width: 100%;
    height: 100%;
}

.detail .icon{
    width: 30%;
    height: 55%;
    padding: 20px 5px;
}

.icon span{
    background: #17011aec;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50px;
    text-align: center;
    padding: 0;
    margin: 0 0 20px 5px;
    font-size: 20px;
    color: #ffffff;
}

.icon span:hover{
    background: rgb(255, 255, 255);
    cursor: pointer;
    color: #884ea0;
}

.detail>strong{
    display: inherit;
    margin: 20px;
    font-size: 30px;
    letter-spacing: 2px;
    color: #ffffff;
}

.detail>span{
    display: inherit;
    padding: 0 20px;
    width: 80%;
    color: #3b3939;
}

.detail>small{
    display: inline-block;
    padding: 8px 20px;
    margin: 15px;
    font-weight: bold;
    border-radius: 6px;
    border: 1px solid #ffffff;
    cursor: pointer;
    color: rgb(255, 255, 255);
}

.detail>small:hover{
    background-color: #884ea0;
    color: white;
}

li h4 {
    position: absolute;
    right: 10px;
    top: 50%;
    font-size: 20px;
    color: #884ea0;
    text-shadow: 1px 1px 2px black;
}



}

@media screen and (max-width:750px){
        /* carrusel 3D*/
        .section-1{
            margin-top:-45vh;
            padding-bottom: 2vh;

        }
}

@media (max-width:700px){




    footer {
        bottom: unset;
    }

    footer .col {
        flex-basis: 100%;
      
    }
    
    footer .col:nth-child(2), footer .col:nth-child(3){
        flex-basis: 100%;
    }
}



@media screen and (max-width:650px){
    

    /* ///////////////////////////////////////////// BARRA SOCIAL */

    .container-bar {
        width: 100%;
        max-width: 55px;
        position: fixed;
        left: 0;
        top: 12%;
        z-index: 10212;
        transition: transform 0.4s ease;  /* Agregar transición para la animación de aparición */
    }

    #btn-social:checked ~ .container-bar {
        transform: translateX(0); /* Mostrar barra social al hacer clic en la flecha */
    }

    .container-bar a {
        display: block;
        padding: 10px;
        margin: 20px 0px;
        font-size: 17px;
        position: relative;
        transition: all 500ms ease;
        color: #ffffff;
    }

    .container-bar a:hover {
        background: rgb(0, 0, 0);
    }

    .container-bar i {
        font-size: 15px;
        color: #e3dee6;
    }

    .container-bar .stt {
        position: fixed;
        background: #000000d2;
        padding: 6px;
        border-radius: 3px;
        font-size: 15px;
        margin-top: -5px;
        transition: all 500ms ease;
        opacity: 0;
        visibility: hidden;
    }


    /* titulo y sub titulo principal */

    .contenedor-titulo-imagen-principal{
        margin-top: 22vh;
        
    }

    .titulo-principal p{
        font-size: 18px;
    }

    .titulo-principal h1{
        margin-top: 20px;
        font-size: 70px;
    }

    .titulo-principal h2{
        margin-top: 20px;
        font-size: 24px;

    }

    .titulo-principal .button-principal {
        background-color: #884ea0;
        font-size: 25px;
        letter-spacing: 3px;
        padding: 10px;
        position: relative;
        cursor: pointer;
        margin-top: 80px;
        
       
    }

      /* carrusel 3D*/
      .section-1{
        margin-top:-60vh;
        padding-bottom: -2vh;

    }



    
    /* indumentaria */

    .contenedor-tt-indumentaria h3 {
        color: #535353;
        font-size: 55px;
 
    }

    
/* /////////////////////////////////// swiper cards mas vendidos */ 

    .swiper{
        width: 85%;
        padding: 150px 0 50px 0; 
        margin: auto ;
    }

    .swiper-slide{
        width: 300px !important; /* Forzamos el ancho específico */
        flex-shrink: 0;  /* Evitamos que se reduzca el tamaño de las diapositivas */
        min-height: 400px;
        background-color: rgba(0, 0, 0, 0.8); /* Negro con 50% de transparencia */
        background-image: linear-gradient(225deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 33%, rgb(14, 13, 13) 66%, rgb(8, 2, 10) 100%);
        padding: 40px;
        text-align: center;
        opacity: 0;
        transform: translateY(50px);  /* Las cartas empiezan 50px más abajo */
        transition: opacity 1s ease-out, transform 1s ease-out;
        border-radius: 20px;
    }

    /* /////////////////////////////// indumentaria 2 seccion ///////////// /*/
    .indumentaria2{ 
        margin-top: 7vh;
    }

    .contenido-indu{
        max-width: 90%;
        width: 100%;
        margin: 10px auto;
    
    }

    .mostrador{
        width: 100%;
        transition: 0.5s ease;
        
    }

    .mostrador .fila{
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
        scroll-behavior: smooth; /* Para asegurar desplazamiento suave */
        flex-wrap: wrap;
        padding: 40px;
    }

    .mostrador .fila .item {
        max-width: 350px;
        width: 100%;
        height: 35  0px;
        margin: 45px 20px;

    }



    body.active .mostrador .fila .item{
        background-color: rgba(253, 250, 250, 0.8); /* Negro con 50% de transparencia */
        background-image: linear-gradient(225deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 33%, rgb(255, 255, 255) 66%, rgb(255, 255, 255) 100%);
    }


    .mostrador .fila .item:hover{
        background-color: #030303;
        background-image: linear-gradient(17deg, #201c20 0%, #884ea0 100%);
    }


    body.active .mostrador .fila .item:hover{
        background-color: #030303;
        background-image: linear-gradient(17deg, #201c20 0%, #884ea0 100%);
    }

    .mostrador .fila .item img {
        width: 100%;
        max-height: 300px;
        margin: -55px 0;
        object-fit: cover;

        /* Aquí agregamos el efecto hover */
        transition: box-shadow 0.3s ease; /* Transición suave para el efecto */

        &:hover {
            
            transform: scale(1.05); /* Aumento de tamaño sutil */
        }
    }


    .mostrador .fila .item .descripcion{
        margin-top: 30px;
        color: white;
        font-weight: lighter;
        margin-bottom: 20px;
        font-size: 20px;
    }



    body.active .mostrador .fila .item .descripcion{
        color: black;
        font-weight: bold;
    }


    .mostrador .fila .item .precio{
        color: white;
        font-weight: bold;
        font-size: 18px;
        margin-top: -30px;


    }



    body.active .mostrador .fila .item .precio{
        color: black;
    }

    .seleccion{
        transition: 0.5s ease;
        opacity: 1;
        width: 0%;
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.8); /* Negro con 50% de transparencia */
        background-image: linear-gradient(225deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 33%, rgb(14, 13, 13) 66%, rgb(8, 2, 10) 100%);
    
    }



    body.active .seleccion{
        background-color: rgba(255, 252, 252, 0.8); /* Negro con 50% de transparencia */
        background-image: linear-gradient(225deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 33%, rgb(255, 255, 255) 66%, rgb(255, 255, 255) 100%);
    }



    .cerrar{
        position: absolute;
        right: 20px;
        top: 20px;
        cursor: pointer;
    }


    body.active .cerrar{
        color: black;
        font-weight: bold;
    }
    .info{
        padding: 20px;
    }

    .info img{
        display: block;
        margin: 10px;
        width: 80%;
    }

    .info h2{
        color: #ffffff;
        margin-bottom: 10px;
    }

    body.active .info h2{
        color: black;
    }

    .info p {
        font-size: 12px;
        color: #ffffff;
        margin-bottom: 10px;
    }

    body.active .info p{
        color: black;
    }

    .info .precio{
        font-size: 20px;
        font-weight: bold;
        color: #fdfdfd;
        margin-bottom: 10px;
        display: block;
    }

    body.active .info .precio{
        color: black;
    }

    .info .fila {
        display: flex;
        align-items: flex-end;
    
    }


    .info .fila label{
        display: block;
        margin-bottom: 10px;
    }

    .info .fila select{
        width: 70px;
        font-size: 18px;
        padding: 6px;
        margin-right: 30px;
    
    }

    .info .fila button{
        height: 40px;
        border: none;
        padding: 0 10px;
        color: #e4dddf;
        background-color: #884ea0;
        font-size: 12px;
    }


/* bijouteria */

/* ///////////////////////////////// bijoteria */


    .cateroriasb{
        width: 80%;
        height: 100px;
        border-bottom: 4px solid #884ea0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cateroriasb ul li {
        list-style: none;
        padding: 5px;
        margin: 5px;
        font-size: 14px;
        border-radius: 20px;  
        
    }

    .filter-condition{

        display: none;
    }

    .filter-condition select{
        width: 120px;
        padding: 0 0 0 10px;
        border: none;
        outline: none;
        font-weight: bold;
        color: #884ea0;
        cursor: pointer;
    }


    .product-field{
        width: 90%;
        padding: 10px;
        margin: auto;
    }

    .product-field ul{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .product-field ul li{
        width: 80%;
        height: 550px;
        margin: 100px 10px 0 15px;
        position: relative;
    }


    picture{
        background-color: rgba(0, 0, 0, 0.8); /* Negro con 50% de transparencia */
        background-image: linear-gradient(225deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 33%, rgb(14, 13, 13) 66%, rgb(8, 2, 10) 100%);
        padding: 5px;
        position: absolute;
        right: 0;
        bottom: 41%;
        width: 65%;
        height: 65%;
        border-radius: 50px 20px 0 20px;
        transform: skewY(20deg);
        overflow: hidden;
        box-shadow: 0 1px #00000020, -1px 0 0 #000000;
    }

    body.active picture {
        background-color: rgba(255, 255, 255, 0.8); /* Negro con 50% de transparencia */
        background-image: linear-gradient(225deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 33%, rgb(255, 255, 255) 66%, rgb(255, 255, 255) 100%);
    }

    picture img{
        width: 95%;
        z-index: 202;
        transform: skewY(-20deg);
        padding: 25px 0 0 0;
    }

    .detail{
        width: 100%;
        height: 100%;
    }

    .detail .icon{
        width: 30%;
        height: 55%;
        padding: 20px 5px;
    }

    .icon span{
        background: #17011aec;
        display: inline-block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        text-align: center;
        padding: 0;
        margin: 0 0 20px 5px;
        font-size: 20px;
        color: #ffffff;
    }

    .icon span:hover{
        background: rgb(255, 255, 255);
        cursor: pointer;
        color: #884ea0;
    }

    .detail>strong{
        display: inherit;
        margin: 20px;
        font-size: 30px;
        letter-spacing: 2px;
        color: #ffffff;
    }

    .detail>span{
        display: inherit;
        padding: 0 20px;
        width: 80%;
        color: #3b3939;
    }

    .detail>small{
        display: inline-block;
        padding: 8px 20px;
        margin: 15px;
        font-weight: bold;
        border-radius: 6px;
        border: 1px solid #ffffff;
        cursor: pointer;
        color: rgb(255, 255, 255);
    }

    .detail>small:hover{
        background-color: #884ea0;
        color: white;
    }

    li h4 {
        position: absolute;
        right: 10px;
        top: 50%;
        font-size: 20px;
        color: #884ea0;
        text-shadow: 1px 1px 2px black;
    }


    .contenedor-contacto{
        width: 95%;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .box-info{
        gap: 15px;
    }

    .box-info >h1 {
        font-size: 1.5rem;
    }
}



@media screen and (max-width:520px){

     /* titulo y sub titulo principal */

     .contenedor-titulo-imagen-principal{
        margin-top: 22vh;
        
    }

    .titulo-principal p{
        font-size: 18px;
    }

    .titulo-principal h1{
        margin-top: 20px;
        font-size: 50px;
    }

    .titulo-principal h2{
        margin-top: 20px;
        font-size: 20px;

    }

    .titulo-principal .button-principal {
        background-color: #884ea0;
        font-size: 20px;
        letter-spacing: 3px;
        padding: 10px;
        position: relative;
        cursor: pointer;
        margin-top: 80px;
        
       
    }

        /* carrusel 3D*/
        .section-1{
            margin-top:-68vh;
            padding-bottom: -5vh;
    
        }

        #drag-container p{
            display: none;
        }

            /* indumentaria */

    .contenedor-tt-indumentaria h3 {
        color: #535353;
        font-size: 40px;
 
    }

    
    .swiper{
        width: 85%;
        padding: 150px 0 50px 0; 
        margin: auto ;
    }

    .swiper-slide{
        width: 250px !important; /* Forzamos el ancho específico */
        flex-shrink: 0;  /* Evitamos que se reduzca el tamaño de las diapositivas */
        min-height: 400px;
        background-color: rgba(0, 0, 0, 0.8); /* Negro con 50% de transparencia */
        background-image: linear-gradient(225deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 33%, rgb(14, 13, 13) 66%, rgb(8, 2, 10) 100%);
        padding: 40px;
        text-align: center;
        opacity: 0;
        transform: translateY(50px);  /* Las cartas empiezan 50px más abajo */
        transition: opacity 1s ease-out, transform 1s ease-out;
        border-radius: 20px;
    }

}



@media screen and (max-width:450px){



    /* Porcentaje de carga grande */
    .porcentaje-carga {
        font-size: 40px;
        color: white;
        font-weight: bold;
        margin-top: 20px;
    }

    /* menu y header */
    header nav {
        margin-top: 0;
        z-index: 1000;
        position: fixed;
        top: 0;
        right: 0;
    
    }

    .icono {
        display: flex;
        justify-content: center;
        height: 75px;
        align-items: center;
        color: white;
        padding: 20px;
        z-index: 6001;
        cursor: pointer;
        margin-right: 40px;
    }

    .enlaces {
        position: fixed;
        right: 0;
        height: 105vh;
        width: 400px;
        border-left: 1px solid #512DA8;
        flex-direction: column;
        background-color: rgba(0, 0, 0); /* Aumentar un poco la opacidad */
        z-index: 6000;
        clip-path: circle(0% at 100% 0);
        opacity: 0; /* Empieza siendo invisible */
        transform: translateX(100%); /* Empieza fuera de la vista */
        transition: clip-path 0.6s ease, opacity 0.6s ease, transform 0.6s ease; /* Mejorar la transición */
        
    }

    .enlaces.dos {
        clip-path: circle(150% at 100% 0);
        opacity: 1; /* Aparece */
        transform: translateX(0); /* Entra en vista */
    }

    header nav .logo {
        z-index: 6002;
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: right;
        margin-right: 60px;
    }

  /* ///////////////////////////////////////////// BARRA SOCIAL */

    .container-bar {
        width: 100%;
        max-width: 55px;
        position: fixed;
        left: 0;
        top: 8%;
        z-index: 20;
        transition: transform 0.4s ease, opacity 0.5s;  /* Agregar transición para la animación de aparición y opacidad */
        opacity: 1; /* Empieza siendo visible */
    }

    #btn-social:checked ~ .container-bar {
        transform: translateX(0); /* Mostrar barra social al hacer clic en la flecha */
    }

    .container-bar a {
        display: block;
        padding:10px;
        margin: 0px 0px;
        font-size: 12px;
        position: relative;
        transition: all 500ms ease;
        color: #ffffff;
    }

    .container-bar a:hover {
        background: rgb(0, 0, 0);
    }

    .container-bar i {
        font-size: 12px;
        color: #e3dee6;
    }

    .container-bar .stt {
        position: fixed;
        background: #000000d2;
        padding: 6px;
        border-radius: 3px;
        font-size: 15px;
        margin-top: -5px;
        transition: all 500ms ease;
        opacity: 0;
        visibility: hidden;
    }

    /* claro - oscuro */

    .claro-oscuro {
        position: fixed;
        left: 40%;
        top: 120px;
        z-index: 140;
        transition: opacity 0.5s;
       
    }
    
    
    .switch{
        width: 70px;
        height: 30px;
        padding: 0 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        border-radius: 100px;
        border: solid 2px rgb(75, 15, 72);
        background-color: rgb(0, 0, 0);
    
    }
    
    
    body.active .switch{
        border: solid 2px rgb(75, 15, 72);
        background-color: rgb(252, 252, 252);
    }
    
    
    
    .switch i{
        color: #e2e2e2;
        font-size: 12px;
        padding: 5px 5px;
    }
    
    
    
    body.active .switch i {
        color: #000000;
    }
    
    
    .claro-oscuro li:last-child::before{
        content: "";
        position: absolute;
        height: 22px;
        width: 22px;
        border-radius: 50%;
        background-color: #874ea0b4;
        border: solid thin black;
        left: 0;
        right: unset;
    }
    
    
    
    
    
    .claro-oscuro li:last-child.active::before{
        right: 0;
        left: unset;
        border: solid thin rgb(0, 0, 0);
    }
    
    
    

    /* titulo principal*/
    .contenedor-titulo-imagen-principal{
        margin-top: 30vh;
    }


    /* seleccion de item ventana emergente */

    .seleccion{
        transition: 0.5s ease;
        opacity: 1;
        width: 0%;
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        background-color: rgba(2, 2, 2, 0.986); /* Negro con 50% de transparencia */
        background-image: linear-gradient(225deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 33%, rgb(14, 13, 13) 66%, rgb(8, 2, 10) 100%);
     
    
    }


    .seleccion .info{
        
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .seleccion .info h2{
        font-size: 12px;
    }

    .seleccion .info p {
        font-size: 10px;
    }
    .seleccion .info .fila{
        
        padding-bottom: 20px;
        
    }

    .seleccion .info .size {
        font-family: 8px;
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        margin-right: 10px;
    }

    .seleccion .info select {
        border: none;
        outline: none;
        font-size: 8px;
        margin-left: 10px;
    }

    .seleccion .info label {
        font-size: 12px;
    }

    .seleccion .info button{
        font-size: 10px;
        padding: 0px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin-top: 10px;
    
    }

    .cerrar{
        position: absolute;
        right:10px;
        top: 10px;
        cursor: pointer;
        z-index: 5000;
    }
}