/* Improvements for animations */
.animate__animated {
  --animate-duration: 0.6s;
}

.animate__faster {
  --animate-duration: 0.3s;
}

/* Improvements for the form */
.error-message {
  @apply text-red-600 text-sm mt-2 animate__animated animate__fadeIn;
}

.input-error {
  @apply border-red-500 ring-2 ring-red-200;
}

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

/* Performance improvements for animations */
.hover-lift {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Añadir al final del archivo */
/* Sistema unificado de espaciado */
.section {
  @apply py-16 sm:py-24;
}

.section-sm {
  @apply py-12 sm:py-16;
}

.section-lg {
  @apply py-20 sm:py-32;
}

/* Espaciado consistente entre elementos */
.section > div > * + * {
  @apply mt-8 sm:mt-12;
}

.card > * + * {
  @apply mt-4;
}
/* Sistema unificado de bordes redondeados */
.rounded-hayax-sm {
  @apply rounded-lg;
}

.rounded-hayax-md {
  @apply rounded-xl;
}

.rounded-hayax-lg {
  @apply rounded-2xl;
}

/* Apply to all elements that need rounded borders */
.card, .form-container, .cta-button {
  @apply rounded-hayax-md;
}

.icon-container, .feature-box {
  @apply rounded-hayax-lg;
}

.input, .button-secondary {
  @apply rounded-hayax-sm;
}