/*
 * tailwind.css
 * CSS complementario para la landing.
 *
 * Tailwind se carga en index.html mediante Play CDN para que el archivo
 * pueda abrirse directamente sin proceso de compilación.
 */

html {
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.hero-wave {
  position: absolute;
  left: -10%;
  width: 120%;
  border-radius: 50%;
  transform: rotate(-4deg);
}

.hero-wave-1 {
  bottom: -195px;
  height: 330px;
  background: #eef6fc;
}

.hero-wave-2 {
  bottom: -245px;
  height: 280px;
  background: #f7fbff;
}

.hero-wave-3 {
  bottom: -290px;
  height: 280px;
  background: #ffffff;
}

@media (max-width: 640px) {
  .hero-wave-1 {
    bottom: -220px;
    height: 300px;
  }

  .hero-wave-2 {
    bottom: -255px;
    height: 260px;
  }

  .hero-wave-3 {
    bottom: -285px;
    height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}