.gradient-overlay {
      background: linear-gradient(45deg, rgba(236, 72, 153, 0.8), rgba(147, 51, 234, 0.8));
    }
    
    .shimmer {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
    }
    
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }


    /* Texto animado que se recorre */
    @keyframes scroll-1 {
      0% { transform: translateX(0%); }
      100% { transform: translateX(100%); }
    }
    @keyframes scroll-2 {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(0%); }
    }
    .animate-scroll-1 {
      animation: scroll-1 40s linear infinite;
    }
    .animate-scroll-2 {
      animation: scroll-2 40s linear infinite;
    }


/* section 1 */
 .carousel-container {
    position: relative;
  }
  
  .carousel-btn {
    border: 1px solid #e5e7eb;
    color: #6b7280;
  }
  
  .carousel-btn:hover {
    color: #374151;
    border-color: #d1d5db;
  }
  
  .indicator.active {
    background-color: #ec4899;
  }
  
@media (max-width: 640px) {
  .carousel-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
  
  .carousel-btn {
    display: none;
  }
}

/* Estilos personalizados para Swiper */
.swiper-button-prev,
.swiper-button-next {
    color: #ec4899 !important;
    background: white;
    border-radius: 50%;
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.swiper-button-prev:after,
.swiper-button-next:after {
    font-size: 16px !important;
    font-weight: bold;
}

.swiper-pagination-bullet {
    background: #ec4899 !important;
}

.swiper-pagination {
    bottom: -40px !important;
}

/* Contenido adicional para demostrar el scroll */
.demo-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* FADE IN */
    
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in-start {
  opacity: 0;
  transform: translateY(20px);
}

/* Animaciones personalizadas */
.fade-in {
  animation: fadeIn 0.7s ease-in;
}