@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans&display=swap");

.gallery__previus{
    background-color: hsl(223, 64%, 98%);
    width: 40px;
    height: 40px;
    padding: 12px;
    border-radius: 50%;
    position: absolute;
    top: 190px;
    left: 5px;
}

.gallery__previus{
@media(min-width: 1115px){
    display: none;
}}

.gallery__previus:hover{
   cursor: pointer;

}
.gallery__next{

    background-color: hsl(223, 64%, 98%);
    width: 40px;
    height: 40px;
    padding: 12px;
    border-radius: 50%;
    position: absolute;
    top: 190px;
    left: 310px;
 
}
.gallery__next{
@media(min-width: 1115px){
    display: none;
}}
.gallery__next:hover{
    cursor: pointer;

}

.gallery__thumnails{

   display: none;
}
.gallery__thumnails{
 @media(min-width: 1115px){
  position: relative;
        display: flex;
       gap: 20px;
       left: 40px;
    }
}
.gallery__thumnail {
 
  width: 120px;
  height: 120px; /* Define una altura proporcional al ancho */
  border-radius: 16px;
  object-fit: cover; /* Ajusta la imagen para que se mantenga proporcional y llena el espacio */
  image-rendering: auto; /* Asegura una mejor calidad de renderizado */
}

.gallery__thumnail:hover{
 cursor: pointer;
 border: 2px solid orange;
}

.details{
    
    padding:44px;

}
.details__company{
   color: orange;
   text-transform: uppercase;
   font-size: 0.8em;
   letter-spacing: 1px;
   margin-bottom: 12px;
}
.details__title{
    font-size: 1.7em;
    margin-bottom: 16px;
}
.details__description{
  position: relative;
    font-size: 0.94em;
    line-height: 24px;
    margin-bottom: 24px;
    bottom: 50px;
}


.details__prices {
  position: relative;
  bottom: 30px;
  display: flex!important;

  gap: 10px; /* Espacio entre los elementos */
  flex-wrap: nowrap !important; /* Evita que se vayan a una nueva línea */
}
@media (max-width: 768px) { 
  .details__prices {
    top: 3px; /* Lo mueve más abajo en pantallas pequeñas */
  }
}

.details__now {

  gap: 25px!important;
  color:rgb(2 195 152);

  font-size: 1.7rem!important;
  font-weight: 700!important;
  display: flex!important;
  align-items: center;
  gap: 5px; /* Espacio entre precio y descuento */
}


.details__before {
  position: relative;
  text-decoration: line-through!important;
  color: rgb(116, 115, 115);
  font-size: 1rem!important;
  bottom: 20px;
  
}
@media (max-width: 768px) { 
  .details__before {
   
    position:absolute;
    top: 40px; /* Lo mueve más abajo en pantallas pequeñas */
    right: 241px!important;
  }
}

.details__discount {

  display: inline-flex; /* Mantiene la flecha y el texto alineados */
  align-items: center; /* Centra la flecha y el texto verticalmente */
  background-color:#7a00ff; /* Color de fondo morado */
  color: white; /* Color de texto blanco */
  font-weight:600!important;
  font-size: 12PX;
  border-radius: 30px; /* Bordes redondeados */
  padding: 2px 6px; /* Espaciado interno */
  gap: 5px; /* Espaciado entre la flecha y el texto */
}

.details__discount i {
  position: relative;
  font-size: 0.6rem; /* Tamaño de la flecha */
  top: 1.2px;
  left: 2px;
}





.input{
  height: 57px;
  display: flex;
  justify-content: space-between;
  
 
}
.input__minus{
 width: 25px;
 height: 100%;
 padding: 24px 5px;
 background-color:hsl(0, 0%, 100%);
}
.input__minus:hover{
 cursor: pointer;
   }
.input__plus{
 width: 25px;
 height: 100%;
 padding: 19px 3px;
 background-color:hsl(0, 0%, 100%);
}
.input__plus:hover{
    cursor: pointer;
      }
.input__number{

  border-radius: 20px;
    width: 100%;
    border: none;
    background-color: #ebfaf7;
    font-size: 1.2em !important;
    font-weight: 700 !important;
    text-align: center;
    outline: none;
}

.details__button{ 
    position: relative;
    bottom: 80px;
    background-color: rgb(2 195 152);
    width: 100%;
    height: 57px;
    border-radius: 8px;
    border: none;
    color: azure;
    font-size: 0.9em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

@media (max-width: 768px) { 
  .details__button {
    top: 40px; /* Lo mueve más abajo en pantallas pequeñas */
  }
}

.details__button img {
 
 position: relative;
  bottom: 7px; /* Ajusta para moverlo más arriba */
}

.details__button:hover{
   cursor: pointer;
   opacity: 0.6;

}
.cart-modal{
display: none;
width: 390px;
height: auto;
border-radius: 8px;
box-shadow: 3px 3px 10px;
position: absolute;
right: 115px;
top: 125px;

background-color:  hsl(223, 64%, 98%);

}
@media screen and (max-width: 600px) { /* Ajusta según el tamaño deseado */
  .cart-modal {
      left: 0px; /* Mueve más a la derecha */
      top: 170px; /* Opcional: ajustar la altura si es necesario */
  }
}
.cart-modal__title{
font-weight: 700;
padding: 24px;
border-bottom: 1px solid black;
}

.cart-modal__details-container{
flex-grow: 1;
display: flex;
align-items: center;
justify-content:space-between ;
margin-bottom: 30px;

}

.cart-modal__image{
width: 50px;
border-radius: 4px;
margin-bottom: 10px;
}
.cart-modal__chekout-container{
padding: 24px;
margin-bottom: -30px;
}
.cart-modal__price span{
color: black;
font-weight: 700;
}
.cart-modal__delete:hover{
cursor: pointer;
}
.cart-modal__chekount{
    text-decoration: none;
    background-color: rgb(2 195 152);
    width: 90%;
    height: 57px;
    border-radius: 8px;
    border: none;
    color:  hsl(223, 64%, 98%);
    font-size: 0.9em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-left: 20px;
    margin-bottom: 20px;
    
}
.cart-modal__chekount:hover{
    color:hsl(0, 0%, 100%);
    
}
.cart-modal__product{
   
    margin: 0;
    margin-bottom: 0px;
    color:hsl(219, 9%, 45%);
  }

.cart-modal__price {
   color:hsl(26, 9%, 45%);
   
}
.cart-modal__delete{
   margin-bottom: -7px;

    width: 20px; /* Ajusta el ancho según lo necesario */
    height: 20px; /* Ajusta la altura según lo necesario */
     margin-top: 6px;
    
  }
  .details__button img{
    margin-bottom: -7px;
 
     width: 20px; /* Ajusta el ancho según lo necesario */
     height: 20px; /* Ajusta la altura según lo necesario */
      margin-top: 6px;
     
   }
   .contents{
    @media(min-width: 1115px){
        display: flex;
        padding: 90px 50px;
        gap: 124px;
    }
} 

.details{
    @media(min-width: 1115px){
        padding-top: 60px;
        width: 446px;
    }

}
.details__title{
    @media(min-width: 1115px){
       font-size: 2.7em; 
       margin-bottom: 48px;
   }
}

.details__description{
   @media(min-width: 1115px){
    font-size: 0.9em;
    margin-bottom: 37px;
   }
}
.details__prices{
    @media(min-width: 1115px){
    flex-direction: column;
    align-items: flex-start;
  }
}
.gallery{
    @media(min-width: 1115px){
    width: 446px;
    margin-left: 60px; /* O una cantidad específica */
}
}
.details_product-quantity{
    @media(min-width: 1115px){
    display: flex;
    gap: 32px;
}
}

.gallery__image-container{
    
      border: 1px solid greenyellow;
    border-radius: 16px;
    width: 346px;
    height: 346px;
    margin-bottom: 32px;
    background-position-y: 0;
}



.gallery{
    @media(min-width: 1115px){
    width: 446px;
   
}
}
.show{
    display: block;
}

.cart-empty{
    
    font-weight: 700;
    
    text-align: center;
    margin-top: 30px;
}

.price_final{
    margin-left: 80px
}
.car-modal__chekount{
    text-decoration: none;
  }
  
/* Ocultar flechas en Chrome, Safari, Edge, Opera */
.input__number::-webkit-outer-spin-button,
.input__number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Ocultar flechas en Firefox */
.input__number[type="number"] {
    -moz-appearance: none;
    appearance: none;
}


 


/*---------------------
  Header
-----------------------*/
.header {
    height: 165px; /* Ajusta según lo que necesites */
    border: 1px solid red;
    background: #f08632;
  }
  
  .header__top {
    
    position: relative;
    background: #ffffff;
  }
  
  .header__top__inner {
    height: 102px;
    padding-top: 38px;
  }
  
  .header__top__left {
    float: left;
  }
  
  .header__top__left ul li {
    
    font-size: 14px;
    color: #111111;
    list-style: none;
    display: inline-block;
    margin-right: 30px;
    position: relative;
    padding: 2px 0;
    cursor: pointer;
  }
  
  .header__top__left ul li a {
    color: #111111;
  }
  
  .header__top__left ul li:hover ul {
    
    top: 24px;
    opacity: 1;
    visibility: visible;
  }
  
  .header__top__left ul li ul {
    
    background: #111111;
    display: inline-block;
    padding: 2px 0;
    position: absolute;
    left: 0;
    top: 44px;
    opacity: 0;
    visibility: hidden;
    z-index: 3;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  
  .header__top__left ul li ul li {
    
    list-style: none;
    font-size: 13px;
    color: #ffffff;
    padding: 2px 15px;
    cursor: pointer;
  }
  
  .header__top__left ul li ul li:after {
    display: none;
  }
  
  .header__top__left ul li:after {
    position: absolute;
    right: -19px;
    top: 1px;
    content: "|";
    color: #bbbbbb;
  }
  
  .header__top__left ul li:last-child {
    margin-right: 0;
  }
  
  .header__top__left ul li:last-child:after {
    display: none;
  }
  
  .header__top__left ul li span {
    color: #888888;
  }
  
  .header__logo {
    position: absolute;
    left: 50%;
    top: 25px;
    margin-left: -60px;
  }
  
  .header__logo a {
    display: inline-block;
  }
  
  .header__top__right {
    float: right;
  }
  
  .header__top__right__links {
    display: inline-block;
    margin-right: 25px;
  }
  
  .header__top__right__links a {
    display: inline-block;
    margin-right: 56px;
    position: relative;
  }
  
  .header__top__right__links a:after {
    position: absolute;
    right: -32px;
    top: 0px;
    content: "|";
    font-size: 16px;
    color: #bababa;
  }
  
  .header__top__right__links a:last-child {
    margin-right: 0;
  }
  
  .header__top__right__links a:last-child:after {
    display: none;
  }
  
  .header__top__right__cart {
    display: inline-block;
  }
  
  .header__top__right__cart a {
    position: relative;
    display: inline-block;
    margin-right: 6px;
  }
  
  .header__top__right__cart a span {
    font-size: 15px;
    color: #111111;
    font-weight: 600;
    position: absolute;
    left: 7px;
    top: 4px;
  }
  
  .header__top__right__cart .cart__price {
    display: inline-block;
    color: #888888;
    font-size: 15px;
    font-weight: 600;
    position: relative;
    top: 4px;
  }
  
  .header__top__right__cart .cart__price span {
    color: #111111;
  }
  
  .header__menu {
    text-align: center;
  }
  
  .header__menu ul li {
    list-style: none;
    display: inline-block;
    position: relative;
    margin-right: -5px;
  }
  
  .header__menu ul li.active a {
    background: #111111;
  }
  
  .header__menu ul li:hover a {
    background: #111111;
  }
  
  .header__menu ul li:hover .dropdown {
    top: 62px;
    opacity: 1;
    visibility: visible;
  }
  
  .header__menu ul li:last-child {
    margin-right: 0;
  }
  
  .header__menu ul li .dropdown {
    position: absolute;
    left: 0;
    top: 82px;
    width: 150px;
    background: #111111;
    text-align: left;
    padding: 5px 0;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  
  .header__menu ul li .dropdown li {
    display: block;
    margin-right: 0;
  }
  
  .header__menu ul li .dropdown li a {
    font-size: 14px;
    color: #ffffff;
    font-weight: 400;
    padding: 5px 20px;
    text-transform: capitalize;
  }
  
  .header__menu ul li .dropdown li a:after {
    display: none;
  }
  
  .header__menu ul li a {
    
    font-size: 16px;
    color: #ffffff;
    display: block;
    font-weight: 600;
    padding: 20px 35px 18px;
    letter-spacing: 1px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  
  .canvas__open {
    display: none;
  }

  .contents{
    
    @media(min-width: 1115px){
        display: flex;
        padding: 90px 50px;
        gap: 124px;
    }
}


/*para los estilos  de estrellas agregados */
.details__rating {
  position: relative;
  bottom: 50px;

  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px!important;
  font-weight: bold!important;
}
@media (max-width: 768px) { 
  .details__rating {
    top: 15px; /* Lo mueve más abajo en pantallas pequeñas */
  }
}

.details__stars {

  color: #ffcc00;
  font-size: 22px!important;
}

.star.full {
  color: #ffcc00;
}

.star.half {
  color: #ffcc00;
  position: relative;
}

.star.empty {
  color: lightgray;
}

.details__score {
  position: relative;
  top: 9px;

  color: #615a5a;
  font-size: 16px!important;
  font-weight: bold!important;
}
/*para los estilos agregados */


/* Cpara el producto info*/

.product-info {
  position: relative;
  bottom: 90px;
  background-color: #f2f2f5; /* Color gris claro */
  padding: 15px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  
  color: #333;
}
@media (max-width: 768px) { 
  .product-info {
    top: 25px; /* Lo mueve más abajo en pantallas pequeñas */
  }
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px!important;
}

.info-item img {
  width: 20px; /* Ajusta según el tamaño deseado */
  height: 20px;
}

.green-text {
  color:rgb(2 195 152); /* Verde para "Envío Gratis" */
  font-weight: bold;
  font-size: 14px
}

.blue-text {
  color:#0086ff; /* Azul para los títulos */
  
  font-size: 14px;
}

/* fin para el producto info*/


.offer-section {

  position: relative;
  font-family: Arial, sans-serif;
  color: #777;
  font-size: 16px;
 bottom: 45px;
}


.offer-options {
  display: flex ;
  flex-direction:column; /* Coloca los elementos en una columna (vertical) */
  gap: 10px; /* Espaciado vertical entre los botones */
}
@media (max-width: 768px) { 
  .offer-options {
    position: relative;
    top: 35px; /* Lo mueve más abajo en pantallas pequeñas */
  }
}


.offer-btn {
  padding: 10px 15px;
  border: 2px solid #dadada;
  background: white;
  border-radius: 20px;
  font-size: 14px;
  color: #777;
  cursor: pointer!important;
  transition: all 0.3s ease-in-out;
  outline: none; /* Evita el borde azul predeterminado en algunos navegadores */
  outline: none !important;
}


.offer-btn.selected {
  background-color: #f4efff;
  border-color: #a855f7!important;
  color: #874dff;
  font-weight: bold;
}
/* Evitar borde negro cuando se hace clic */
/* Evitar borde negro al hacer clic en algunos navegadores */


.product-details {
  border-radius: 30px;
 
  position: relative;
  display: flex;
  flex-direction: column; /* Coloca los elementos en columnas (uno debajo del otro) */
  gap: 20px; /* Añade un espacio entre los elementos */
  top: 5px;
}

.contents {
  display: flex;
  gap: 20px;
  grid-template-columns: 1fr 1fr; /* Dos columnas */
  grid-template-areas:
      "gallery cart"
      "description cart"; /* Descripción debajo solo de la galería */

}

/* Diseño móvil */
@media (max-width: 768px) {
  .contents {
    display: flex;
    flex-direction: column; /* Apila los elementos en una sola columna */
  }

  .product-details-one {
    order: 1; /* Se mantiene primero */
  }

  .cart-container {
    order: 2; /* Se coloca en segundo lugar */
    width: 100%;
    position: relative !important;
top:-110px!important;
border-radius: 0px!important;
padding-bottom: 50px!important;
  }

  .product-details-two {
    order: 3; /* Se mueve al final */
    width: 100%;
    margin-top: 20px;
  }
}

/* Ajustes de estructura */
.product-details {
  flex: 2 !important;
}

.cart-container {
  

  border-radius: 30px;
  background-color: #ffffff;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center; /* Centra horizontalmente */


}


.sticky {
 
  position: sticky;
  top: 20px;
  
  width: 100%; /* O usa un valor específico como 500px */
  max-width: 600px; /* Para limitar el tamaño máximo */
  height: auto; /* O usa min-height si quieres un tamaño mínimo */
  min-height: 300px; /* Asegura que crezca */
  
  padding: 20px; /* Más espacio interno */
}
body, html {
  height: 100%;
  background-color: #f7f7f7;
}

.navbar {
  background-color: white;
}

/* Ajuste de galería */
.gallery.photos {
  position: relative;
  top: 10px;
  width: 600px;
  margin: 0 auto;
}

/* Ajustes de descripción */
.details-info {
  position: relative;
  top: 70px;
}

/* Galería */
.product-details-one {
  order: 1;
  bottom: 5px;
  padding: 130px;
  background-color: #ffffff;
  position: relative;
  border-radius: 30px;
  grid-area: gallery;
}

/* Ajustes en móvil */
@media (max-width: 768px) {
  .product-details-one {
    margin: 0 auto;
    padding: 40px;
    border-radius: 0px;
    top:10px;
  }
}

/* Ajustes en móvil para la galería */
@media (max-width: 768px) {
  .gallery__image-container {
    margin-top: 30px !important;
    width: 360px !important;
    height: 420px !important;
    bottom: 40px!important;
    position: relative !important;
    margin-left: -79px !important;
  }
}

/* Descripción */
.product-details-two {
  
  grid-area: description;
  padding: 0px 60px;
  background-color: #ffffff;
  position: relative;
  top: 10px;
  border-radius: 30px;
}
@media (max-width: 768px) {
  .product-details-two {

    position: relative;
    top: -130px;
    border-radius: 0px;
  }
}
/* Evita desplazamiento horizontal */
html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* ✅ CORRECCIÓN: Asegurar que el layout se aplique correctamente en escritorio */
@media (min-width: 1024px) {
  .contents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "gallery cart"
        "description cart"; /* Descripción solo debajo de la galería */
    gap: 20px;
  }
  
  .product-details-one {
    grid-area: gallery;
  }

  .cart-container {
    grid-area: cart;
  }

  .product-details-two {
    grid-area: description;
    width: 100%;
  }
}

/* para la barra en movimiento*/
.details-info h3 {
  font-weight: bold;
  text-align: center;
  font-family: 'Poppins', sans-serif; /* Cambia a la fuente que desees */
}

.details-info p {
  margin: 10px 0;
  font-family: 'Roboto', sans-serif; /* Fuente para el párrafo */
  font-size: 16px !important;
  color: #555; /* Color de texto suave */
}
.details-info img {
  display: block;
  margin: 20px auto!important;
  
}

.details-info-second h3 {
  font-weight: bold;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: #333;
  margin: 15px 0;
}

.details-info-second h3:first-child {
  font-size: 20px;
  color: #222;
  margin-bottom: 10px;
}

.details-info-second p {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #555;
  margin: 5px 0 15px;
}
.details-info-second img {
  display: block;
  margin: 20px auto!important;
}

.revolution-section {
  text-align: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
}

.revolution-section h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  color: #333;
  font-weight: bold;
  margin-bottom: 10px;
}

.revolution-section p {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}
/*  INICIO para la barra en movimiento*/
.thin-bar {
  position: absolute;
  width: calc(100% + 120px); /* Se extiende más allá de los costados */
  height: 40px; /* Altura de la barra */
  background-color: #4e4c4c; /* Color negro */
  color: #ffffff; /* Color del texto */
  left: -60px; /* La mitad del extra de ancho, para que sobresalga */
 
  bottom: -10px; /* Ajusta según sea necesario para bajarla un poco */
  display: flex;
  align-items: center;
  overflow: hidden; /* Oculta el texto que se sale del área */
  white-space: nowrap; /* Evita que el texto se divida en varias líneas */
  
}

.thin-bar span {
  display: inline-block;
  min-width: 100%;
  padding-left: 0;
  animation: marquee 5s linear infinite;
}

@media (max-width: 768px) {
  

  .thin-bar span {
    display: inline-block;
    min-width: 220%; /* Hace que el texto tenga suficiente espacio */
    animation: marquee 8s linear infinite; /* Ajusta la velocidad para móviles */
  }
}

@keyframes marquee {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}
/*  fin para la barra en movimiento*/


/*  style para reseñas*/
.testimonials {
  position: relative;
  bottom: 100px;
 
  border-radius: 30px;
  background-color: white;
  padding: 20px 80px; /* Menor padding para ajustar la altura */
  max-width: 93%;   /* Asegura que no se desborde */
  box-sizing: border-box; /* Incluye padding y borde en el cálculo del tamaño */
}

.barra{

width: 250px;
}
.reseña{
 
 padding: 0;
margin: 0px;
  }

  .reseña-general{
    position: relative;
    padding-right: 330px!important;
   
    position: relative;
    right: 200px!important;
   
    }
    @media (max-width: 768px) {
      .reseña-general {
        left: 20px !important; /* Ajusta este valor para moverlo más a la derecha */
      }
    }

    .reseña-contenedor{
      position: relative;
      right:35px;
      
      }
@media (max-width: 768px) {
      .reseña-contenedor{
        position: relative;
        right:-15px;
        top: 20px;
        
        }
      }
/*  fin style para reseñas*/
/*  para testimonios*/
.review-container {
 
  display: flex;
  gap: 20px;

}

@media (max-width: 768px) {
  .review-container {
    display: flex;
    flex-wrap: nowrap; /* Evita que los elementos salten de línea */
    overflow-x: auto; /* Permite el desplazamiento lateral */
    scroll-snap-type: x mandatory; /* Suaviza el scroll */
    padding-bottom: 10px;
    
    justify-content: flex-start;
    width: 70vw; /* Ocupa todo el ancho de la pantalla */
    position: relative;
    right: -30px;
  }

  .contenedorone {
    min-width: 0vw; /* Haz que cada tarjeta ocupe más espacio */
    flex: 0 0 auto;
    max-width: 100%; /* Evita que sea más grande que la pantalla */
  }
}

@media (max-width: 768px) {
  .testimonials {
    width: 100vw; /* Ocupará toda la pantalla */
    margin-left: 15;
    margin-right: 0;
    padding: 0;
    overflow-x: hidden; /* Evita desbordamientos no deseados */
  }

  .contenedoro {
    width: 100vw !important; /* Asegura que ocupe toda la pantalla */
    overflow-x: auto !important; /* Permite desplazamiento lateral */
    scroll-snap-type: x mandatory; /* Suaviza el scroll */
    padding-bottom: 10px;
    display: flex;
    justify-content: center; /* Centrar los elementos */
  }

  .product-container {
    display: flex !important;
    flex-wrap: nowrap !important; /* Evita que los productos salten de línea */
    overflow-x: auto !important; /* Permite el desplazamiento lateral */
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    width: 100vw !important; /* Asegura que se expanda correctamente */
  }

  .contenedorone {
    min-width: 85vw !important; /* Expande cada tarjeta */
    flex: 0 0 auto;
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  #quizas {
    left:20px;
  }
}


.review-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.verified {
  color: green!important;
  font-weight: bold!important;
}



.stars {
  display: flex;
  gap: 2px; /* Espacio entre las estrellas */
  flex-wrap: nowrap; /* No permite que las estrellas se desplacen a una nueva línea */
  justify-content: center; /* Centra las estrellas si es necesario */
  align-items: center;
}

@media (max-width: 768px) {
  .stars {
    position: relative;
    left: 23px;
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
  }
}


/* fin para testimonios*/

.rating-stars {
  color: #FFA800; /* Color naranja */
  font-size: 1.2rem; /* Ajusta el tamaño si lo deseas */
}
.price-current {
  color: rgb(2, 195, 152); /* Verde turquesa */
  font-weight: bold;
  font-size: 1.2rem; /* Ajusta el tamaño si es necesario */
}

.price-old {
  color: #999; /* Gris para el precio anterior */
  text-decoration: line-through;
  font-size: 1rem;
}


.card {
  border: 1px solid rgb(226, 223, 223)!important;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
  width: 100%;
  height: auto;
  max-width: 320px; /* Puedes ajustar este valor según tu diseño */
}
@media (max-width: 768px) {
  .card {
    width: 100%;
    height: auto;
  }
}






.carousel-wrapper {
  overflow: hidden;
  width: 100%;
}

#carouselContainer {
  display: flex;
  transition: transform 0.5s ease-in-out;
}


@media (max-width: 768px) {
  .contenedorone  {
    width: calc(100% / 1); /* Mostrar 4 productos en móviles y escritorio */
    flex: 0 0 auto;
  
  }
}



.custom-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 10;
}

#prevBtn {
  left: -40px;
}

#nextBtn {
  right: -40px;
}

.details_product-quantitytotal{
  position: relative;
  bottom: 40px;
}


/* Mostrar MODAL CUANDO EL USUARIO AÑADE AL CARRITO */
/* Estilos del modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contenedor del modal */
.modal-content {
  width: 420px; /* Un tamaño más equilibrado */
  background: white;
  padding: 20px; /* Añade espacio interno */
  border-radius: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Estilos para pantallas pequeñas (móviles) */
@media (max-width: 600px) {
  .modal-content {
    width: 320px; /* Ajusta el ancho en móviles */
  }
}
/* Loader animado */
.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

/* Animación de giro */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Contenedor de los botones */
/* Contenedor del mensaje y botones */
#cartMessage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px; /* Espacio entre los botones */
  width: 100%;
  padding-top: 10px;
}

/* Botones */
#cartMessage button {
  width: 100%; /* Que ocupen todo el ancho disponible */
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
}

/* Botón "Sí" */
#goToCart {
  background-color: #3498db;
  color: white;
}

#goToCart:hover {
  background-color: #2980b9;
}

/* Botón "Seguir comprando" */
#closeModal {
  background-color: rgb(2 195 152);
  color: white;
}

#closeModal:hover {
  background-color: rgb(2, 170, 130); /* Un poco más oscuro */
}


/* Espaciado entre botones */
#goToCart,
#closeModal {
  margin: 5px 0; /* Separa los botones verticalmente */
}


/* Estilo para el mensaje del modal */
#cartMessage p {
  font-size: 18px !important; /* Aumenta el tamaño de la letra */
  font-weight: bold !important; /* Hace que el texto sea más llamativo */
  color: #686767; /* Color de texto más oscuro para mejor lectura */
  text-align: center; /* Centra el texto */
  margin-bottom: 15px; /* Espacio debajo del texto */
  line-height: 1.4; /* Mejora la separación entre líneas */
}


/* FIN DE  MODAL CUANDO EL USUARIO AÑADE AL CARRITO */

/* Contenedor principal de la imagen */
.img-container {
  position: relative;
  display: inline-block;
}

/* Estilos de la imagen */
.oferta-img {
  width: 380px; /* Mantiene el tamaño deseado */
  height: auto;
  display: block;
  margin: 10px auto; /* Centra la imagen */
  border-radius: 5px;
}

/* Cuadro "Ver info del regalo" */
.info-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px; /* Reduce tamaño */
  border-radius: 3px; 
  font-size: 12px !important; 
  opacity: 0;
  transition: opacity 0.3s ease-in-out, background-color 0.3s, transform 0.2s;
  pointer-events: auto;
  text-align: center;
  width: auto;
  min-width: 80px;
}

/* Muestra el cuadro al pasar el mouse sobre la imagen */
.img-container:hover .info-box {
  opacity: 1;
}

/* Efecto al pasar el mouse sobre el cuadro */
.info-box:hover {

  transform: translate(-50%, -50%) scale(1.1); /* Hace zoom */
}

/* Estilo del enlace dentro del cuadro */
.info-box a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
  display: block;
  font-size: 11px; 
}
/* FIN Cuadro "Ver info del regalo" */
/* Sección "Oferta de la Semana" */
.oferta-semana {
  background: linear-gradient(90deg, #ffcc00, #ff9900);
  color: #333;
  padding: 15px;
  font-size: 16px !important;
  text-align: center;
  border-radius: 18px;
  margin-top: -40px;
  font-weight: bold !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Botón de oferta */
.btn-oferta {
  display: block !important;
  width: fit-content;
  background-color: #ff6600;
  color: white;
  padding: 8px 12px;
  margin: 10px auto 0; 
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold !important;
  animation: vibrar 0.3s infinite alternate !important;
  cursor: default; /* Hace que el botón tenga manito */
}

/* Mantiene el color al pasar el cursor */
.btn-oferta:hover {

  color: white !important;
}

/* Animación de vibración */
@keyframes vibrar {
  0% { transform: translateX(-2px); }
  100% { transform: translateX(2px); }
}

/* Clase para la vibración */
.vibracion {
  display: inline-block;
  animation: vibrar 0.3s infinite alternate;
}

/* 🔹 MEDIA QUERY para dispositivos móviles */
@media screen and (max-width: 768px) {
  .oferta-semana {
    margin-top: 55px; /* Baja la sección en móviles */
    padding: 10px;
    font-size: 14px !important;
  }

  .oferta-img {
    width: 250px; /* Imagen más pequeña */
  }

  .btn-oferta {
    padding: 6px 10px;
    font-size: 14px;
  }
}


/* temporizador */
.contador {
  background: linear-gradient(90deg, #ff5f6d, #ff9966);
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 15px;
  border-radius: 10px;
  width: fit-content;
  margin: 15px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.contador-items {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.contador-item {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  min-width: 70px;
}



/* temporizador */
.contador {
  background: linear-gradient(90deg, #ff5f6d, #ff9966);
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 15px;
  border-radius: 10px;
  width: fit-content;
  margin: 15px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.contador-items {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.contador-item {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  min-width: 70px;
}

/* finalizar pedido por whasap */
.whatsapp-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25D366;
  color: #fff !important; /* Asegura que el texto sea blanco siempre */
  font-size: 16px!important;
  font-weight: bold!important;
  padding: 12px 15px;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 10px;
  width: 100%;
  text-align: center;
  transition: background 0.3s ease-in-out, transform 0.2s;
  bottom: 80px;
}
@media (max-width: 768px) {
.whatsapp-button {
  top:40px;

}
}

.whatsapp-button i {
  margin-right: 8px;
  font-size: 20px!important;
}

.whatsapp-button:hover {
  background-color: #1ebe5d;
  transform: scale(1.05);
  color: #fff !important; /* Evita que el color cambie a azul */
}

.whatsapp-button:active {
  transform: scale(0.95);
}


/*fin finalizar pedido por whasap */