.elementor-58 .elementor-element.elementor-element-6fb8206{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-58 .elementor-element.elementor-element-a74686c{width:100%;max-width:100%;}.elementor-58 .elementor-element.elementor-element-9c3006d{--display:flex;}.elementor-58 .elementor-element.elementor-element-8aed46d{--swiper-slides-gap:10px;}/* Start custom CSS for html, class: .elementor-element-a74686c */.custom-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
}
.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.slide {
  min-width: 100%;
  position: relative;
}
.slide img {
  width: 100%;
  height: auto;
  display: block;
}
.buy-btn {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%); /* Se queda igual */
  background: #FFF;
  color: #03B0C7;
  padding: 8px 15px;
  border-radius: 2px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: background 0.3s, color 0.3s;
  
  /* 1. AGREGAR ESTA LÍNEA */
  animation: parpadearBoton 1.5s infinite ease-in-out;
}

/* 2. AGREGAR ESTA REGLA */
@keyframes parpadearBoton {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5; /* Se vuelve semi-transparente a la mitad del tiempo */
  }
}
.buy-btn:hover {
  background: #03B0C7;
  color: #FFF;
}
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 25px;
  border-radius: 50%;
  z-index: 10;
}
.prev { left: 10px; }
.next { right: 10px; }

.dots {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 15px;
  z-index: 10;
}
.dot {
  display: inline-block;
  height: 12px;
  width: 12px;
  background: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}
.dot.active {
  background: #ff3c00;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fb8206 */.custom-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
}
.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.slide {
  min-width: 100%;
  position: relative;
}
.slide img {
  width: 100%;
  height: auto;
  display: block;
}
.buy-btn {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: #FFF;
  color: #03B0C7;
  padding: 8px 15px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: background 0.3s, color 0.3s;
}
.buy-btn:hover {
  background: #03B0C7;
  color: #FFF;
}
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 25px;
  border-radius: 50%;
  z-index: 10;
}
.prev { left: 10px; }
.next { right: 10px; }

.dots {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 15px;
  z-index: 10;
}
.dot {
  display: inline-block;
  height: 12px;
  width: 12px;
  background: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}
.dot.active {
  background: #ff3c00;
}

/* ==========================================
   ¡NUEVO!: AJUSTES EXCLUSIVOS PARA MÓVILES
   Se activa en pantallas menores a 768px
   ========================================== */
@media (max-width: 767px) {
  
  /* Reducir el tamaño general del botón en móviles */
  .buy-btn {
    font-size: 0.85rem; /* Fuente más pequeña */
    padding: 8px 18px; /* Relleno mucho más compacto */
    bottom: 25px; /* Subimos el botón para que no tape el borde inferior o el producto */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra más sutil */
    max-width: 80%; /* Asegura que no ocupe todo el ancho en móviles grandes */
  }

  /* Opcional: Si el botón sigue tapando contenido vital en una imagen específica, 
     puedes ajustarlo usando una clase específica en el slide, por ejemplo:
     .slide-con-cara .buy-btn { bottom: 60px; } 
  */

  /* Ajustes menores para flechas y dots en móvil (opcional pero recomendado) */
  .arrow {
    padding: 8px 12px;
    font-size: 14px;
  }
  
  .prev { left: 8px; }
  .next { right: 8px; }
  
  .dots {
    bottom: 10px;
  }
  
  .dot {
    height: 8px;
    width: 8px;
    margin: 0 3px;
  }
  
  .dot.active {
    width: 18px;
  }/* End custom CSS */