html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background-color: #fdfcff;
  color: #1b1b4b;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
.font-heading {
  font-family: "Lexend", sans-serif;
  letter-spacing: -0.02em;
}

/* Animaciones originales */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(251, 199, 17, 0.4);
  }

  50% {
    box-shadow: 0 0 20px 8px rgba(251, 199, 17, 0.2);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

#hero {
  background:
    url("fondo.webp"),
    linear-gradient(
      90deg,
      #061a2e 0%,
      rgba(21, 21, 22, 0.25) 35%,
      rgba(21, 21, 22, 0.08) 100%
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Estilo para Navbar al hacer scroll */
.nav-scrolled {
  background: rgba(253, 252, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e6e6fa;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Ajuste para que las flechas no se salgan del contenedor en pantallas pequeñas */
.swiper-button-next,
.swiper-button-prev {
  top: 50% !important;
  transform: translateY(-50%);
}
/* Asegura que el contenedor de Swiper tenga espacio para la paginación */
.services-swiper {
  padding-bottom: 40px !important;
  padding-left: 5px;
  padding-right: 5px;
}
/* Estilo para truncar textos largos y mantener uniformidad */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Ocultar el icono por defecto de Swiper */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: "" !important;
}

/* Centrar las flechas si Swiper las mueve */
.swiper-button-next,
.swiper-button-prev {
  top: 50% !important;
  margin-top: 0 !important;
  transform: translateY(-50%) !important;
}

/* Asegurar que las flechas no se salgan del borde en pantallas grandes */
.swiper-button-prev {
  left: -10px !important;
}
.swiper-button-next {
  right: -10px !important;
}

/* Estilos del carrusel ya mencionados */
.services-swiper {
  padding-bottom: 50px !important;
  padding-top: 10px !important;
}

#how-it-works
  .w-20.h-20.rounded-2xl.bg-primary\/10.flex.items-center.justify-center.mb-6.z-10.relative {
  background:
    linear-gradient(rgb(82 67 205 / 0.1), rgb(82 67 205 / 0.1)), white;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Se mueve hacia la izquierda el 50% del ancho total (que es un set completo) */
    transform: translateX(-50%);
  }
}

.animate-marquee {
  display: flex;
  animation: marquee 30s linear infinite;
}

/* Opcional: Pausar al poner el mouse encima para que los clientes vean bien las fotos */
.animate-marquee:hover {
  animation-play-state: paused;
}