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

.centrarDetails{
    width: 60%;
    height: 750px;
    display: flex;
    flex-wrap: wrap; /*todos los elementos del mismo tamaño y se bajan si no alcanzan*/
    gap:2%; /*separar cada elemento*/
    justify-content: center;
    align-items: center;
  }

  @media (min-width: 1000px) and (max-width: 1300px) {
    .centrarDetails{
      height: 500px;
    }
  }

/*------------------------------------------------Izquierda Imágenes*/
.izquierdaDetails {
    width: 65%;
    height: 80%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 5px 5px 5px rgb(188, 188, 188);
    background-color:  #ffffffae;
    gap: 1%;
    border: 0.5px solid #3d3d3d39;
    border-radius: 7px;
}


.image-slider {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 85%;
}

/* ------------------active image zoom*/
.activeImage {
    background-position: 50% 50%;
    width: 550px;
    height: 100%;
    overflow: hidden;
    cursor: zoom-in;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
  }

  @media (min-width: 769px) {
    .activeImage img:hover {
      opacity: 0;
    }
  }

  .activeImage img {
    transition: opacity 0.5s;
    width: 100%;
    height: 100%;
  }


/*-----------------Imágenes solo para móviles*/
.blackScreenImages{
  display: none; /* Oculto por defecto */
  position: fixed;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  right: 0;
  background-color: rgba(30, 30, 30, 0.854);
  z-index: 1000;
}

.closeBlackScreenImages{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 8%;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #676767ac;
  color: white;
  z-index: 1001;
}

.blackScreenCenter{
  width: 100%;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.blackScreenCenterImages{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 85%;
}

.blackScreenCenterImages img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.contadorImagenes{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 15%;
  color: white;
}

/* -----------------Div para arria abajo imágenes pequeñas------------------ */
.carousel{
  position: relative;
  width: 15%;
  height: 85%;
  display: flex;
  align-items: center;
  background-color: #ffffff00;
}


#slick-List {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Ajusta según tus necesidades */
  width: 100%; /* Ajusta según tus necesidades */
  margin: auto 0px;
}

#slick-Track {
  width: 80px;
  height: 100%;
  display: inline-block;
  margin: 0;
  gap: 0;
  transition: top 0.3s ease;
  overflow: auto;
  background-color: rgba(153, 153, 153, 0.063);
  border-radius: 7px;
}


.slick {
  height: 55px; /* Ajusta según tus necesidades */
  width: 100%; /* Asegúrate de que el ancho de los elementos sea el 100% del contenedor */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;
}

  /* Estilos para ocultar la barra de desplazamiento */
#slick-Track::-webkit-scrollbar {
  width: 0;  /* Oculta la barra de desplazamiento en navegadores webkit (Chrome, Safari, etc.) */
}

#slick-Track {
  scrollbar-width: none; /* Oculta la barra de desplazamiento en Firefox */
}

.slick img{
  width: 80%;
  height: 100%;
  border: 0.5px solid #3d3d3d39;
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgb(188, 188, 188);
}

.slick img:hover{
  transform: scale(1.05); 
  border: 1px solid #384d6b;
} 

/* .slick-list{
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  margin: 0px auto;
  overflow: hidden;
  width: 80%;
  height: 90%;
}

.slick-track{
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  transition: .5s ease-in-out;
  height: 80%;
}

.slick{
  position: relative;
  width: 125px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
} */



/* .navigation-controls1 {
    border-radius: 30px;
    background-color: #fff;
    position: absolute;
    z-index: 4;
    width: 48px;
    height: 48px;
    text-align: center;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.382);
    border: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navigation-controls2 {
    border-radius: 30px;
    background-color: #fff;
    position: absolute;
    z-index: 4;
    width: 48px;
    height: 48px;
    text-align: center;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.382);
    border: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navigation-controls1{
  left: 0px;
}
.navigation-controls2{
  right: 0px;
} */




/*---------------Dive Derecha para información*/
.derechaDetails {
    width: 30%;
    height: 80%;
    text-align: center;
    display: flex;
    justify-content: center;
    background-color: #ffffff;
    box-shadow: 5px 5px 5px rgb(188, 188, 188);
    margin-bottom: 5px;
    border: 0.5px solid #3d3d3d39;
    border-radius: 7px;
}

.derechaDetailsPequeno {
  position: relative;
  width: 100%;
  height: 90%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.envioGratisCirculo{
  position: absolute; 
  top: -15px; 
  left: -5px; 
  width: 120px; 
  height: 30px; 
  background: rgb(187,67,217);
  background: linear-gradient(90deg, rgba(187,67,217,1) 0%, rgba(44,90,142,1) 100%);
  border-radius: 15px; 
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: clamp(0.7rem, 0.7vw, 1rem);
}

/*----------------------------------------------Título*/
.derechaDetailsTitulo {
  margin-top: 5%;
  width: 90%;
  height: 10%;   /*------------------------Tamaño*/
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.7rem, 0.8vw, 1.2rem);
  color: white;
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
  border-radius: 5px;
  overflow: hidden;
}

/*----------------------------------------------Precio*/
.derechaDetailsInfoPrecio {
  width: 80%;
  height: 8%; /*------------------------Tamaño*/
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.6rem, 0.6vw, 1.1rem);
  color: #3d3d3d;
}

.derechaDetailsInfoPrecio1 {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.derechaDetailsInfoPrecio1 h5{
  width: 95%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient( 135deg, #FEC163 10%, #DE4313 100%);
  color: white;
  border-radius: 5px;
  text-decoration:line-through;
  margin-top: 3%;
}


/*----------------------------------------------Información*/
.derechaDetailsInfoPrincipal {
  width: 100%;
  height: 52%; /*------------------------Tamaño*/
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 100%;
  font-size: clamp(0.7rem, 0.7vw, 1.1rem);
  color: #3d3d3d;
}
.derechaDetailsInfoPrincipal1 {
  width: 80%;
  height: 40%;
  display: flex;
  align-items: center;
  font-size: 100%;
  overflow: hidden;
}
.derechaDetailsInfoPrincipal2 {
  width: 90%;
  height: 30%;
  display: flex;
  align-items: center;
  font-size: 100%;
  background-color: #dcdcdc4f;
  border-radius: 7px;
  color: #48baad;
  padding-left: 15px;
  padding-right: 15px;
}
.derechaDetailsInfoPrincipal3 {
  width: 70%;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.derechaDetailsInfoPrincipalMitad{
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.derechaDetailsInfoPrincipalMitad img{
  width: 80%;
  height: 50%;
}


.derechaDetailsInfoPrincipal31{
  display: flex;
  justify-content: end;
  align-items: center;
  width: 100%;
  height: 50%;
}

.derechaDetailsInfoPrincipal31 p{
  color: #48baad;
  font-weight: bold;
}


/*----------------------------------------------Select*/
.derechaDetailsSelects {
  width: 90%;
  height: 15%; /*------------------------Tamaño*/
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 100%;
  margin-bottom: 5%;
}

.derechaDetailsSelects1{
  width: 50%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.derechaDetailsSelects1 select {
  border: 0.1px solid;
  border-color: #3d3d3d37;
  color: #3d3d3d;
  background: #ffffff;
  padding: 1px;
  color: #3d3d3d;
  cursor:pointer;
  font-size: clamp(0.6rem, 0.6vw, 1rem);
  width: 85%;
  height: 45%;
}



/*----------------------------------------------Botones*/
.derechaDetailsBoton{
width: 80%;
height: 10%;/*------------------------Tamaño*/
display: flex;
justify-content: center;
align-items: center;
}

.derechaDetailsBoton a{
  background-color: rgb(225, 107, 107);
  color: rgb(255, 255, 255);
  font-size: 80%;
  width: 90%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 5px;
}

.derechaDetailsBoton:hover{
  transform: scale(1.05);
  cursor:pointer;
 }



 /*------------------------------------------Acerca de este producto */

.detailsAll{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.detailsAllCenter{
  width: 50%;
  display: flex;
  text-align: justify;
  justify-content: center;
}

.detailsAllIzq{
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.detailsAllDer{
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.detailsAllCenter p{
  width: 80%;
  line-height: 35px;
}

.detailsAllLinea{
  width: 35%;
  height: 1px;
  background-color: rgb(169, 169, 169);
}

 /*------------------------------------------Te podría Gustar */
.tePodriaGustar{
  margin-top: 200px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tePodriaGustarCenter{
  width: 50%;
  display: flex;
  justify-content: left;
  align-items: center;
}


 /*------------------------------------------P para dispositivos móviles */
@media (min-width: 320px) and (max-width: 480px) {
  
  .centrarDetails{
    width: 100%;
  }

  .izquierdaDetails{
    width: 100%;
    height: 280px;
    gap: 2%;
  }

  .carousel{
    width: 20%;
  }

  .image-slider{
    width: 65%;
  }

  .derechaDetails{
    width: 80%;
    height: 450px;
  }

  .centrarDetails{
    width: 98%;
    gap:6%; /*separar cada elemento*/
    margin-top: 30px;
  }
 

  .activeImage {
    width: 100%;
  }

  .izquierdaDetails {
    background-color:  #ffffff;
  }

  .volverButtonCentrar{
    width: 100%; 
  }
  /*----------------------------------------------Select*/

  .derechaDetailsSelects1 select {
    font-size: clamp(0.8rem, 0.8vw, 1rem);
    width: 95%;
    height: 75%;
  }

  .envioGratisCirculo{
    width: 100px; 
    height: 25px; 
    font-size: clamp(0.6rem, 0.6vw, 1rem);
  }

  .derechaDetailsInfoPrincipalMitad img{
    width: 100%;
    height: 60%;
  }
}