/* ============================================
   HealthCore - Estilos personalizados mínimos
   Tailwind CSS v4 se carga vía CDN
   ============================================ */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Animación de entrada para el hero */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-up-delay {
  animation: fadeInUp 0.8s ease-out 0.3s forwards;
  opacity: 0;
}

.animate-fade-in-up-delay-2 {
  animation: fadeInUp 0.8s ease-out 0.6s forwards;
  opacity: 0;
}

/* Animación para las tarjetas de características */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scale-in {
  animation: scaleIn 0.5s ease-out forwards;
}

/* Hover suave en tarjetas */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Línea decorativa */
.gradient-line {
  height: 4px;
  width: 60px;
  background: linear-gradient(90deg, #2563EB, #14B8A6);
  border-radius: 2px;
}

/* Botón con efecto de escala */
.btn-scale {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-scale:hover {
  transform: scale(1.03);
}

.btn-scale:active {
  transform: scale(0.98);
}