@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  scroll-behavior: smooth;
  font-family: 'Montserrat', sans-serif;
}

article,
div,
section {
  scroll-margin-top: 220px;
}

.swiper-slide-stock {
  width: auto !important;
}

.swiper-efectivo {
  width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.swiper-efectivo .swiper-slide {
  width: auto !important;
  min-width: 280px !important;
}

@media (min-width: 640px) {
  .swiper-efectivo .swiper-slide {
    min-width: 300px !important;
  }
}

.swiper-tarjeta-credito {
  width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.swiper-tarjeta-credito .swiper-slide {
  width: auto !important;
  min-width: 280px !important;
}

@media (min-width: 640px) {
  .swiper-tarjeta-credito .swiper-slide {
    min-width: 300px !important;
  }
}

.gradient {
  background: #d1d9e3; /* Fallback para navegadores sin soporte */
  background: -webkit-linear-gradient(135deg, #c8d5e8 0%, #e8c8d5 100%);
  background: -moz-linear-gradient(135deg, #c8d5e8 0%, #e8c8d5 100%);
  background: -o-linear-gradient(135deg, #c8d5e8 0%, #e8c8d5 100%);
  background: linear-gradient(135deg, #c8d5e8 0%, #e8c8d5 100%); /* Alternativa usando palabras clave */
  background: linear-gradient(to bottom right, #c8d5e8, #e8c8d5); /* Versión con múltiples puntos de color */
  background: linear-gradient(135deg, #c8d5e8 0%, #d5d1e8 25%, #e8d1d5 75%, #e8c8d5 100%);
}

.breathe {
  animation: breathe 2s infinite;
}

/* Animation breathe but with opacity */
@keyframes breathe {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Estilos para el loader */
.loader-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 10;
}

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Animación de fade para los carruseles */
.carousel-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Contenedor relativo para el loader */
.carousels-container {
  position: relative;
  min-height: 500px;
}