@import "tailwindcss";

@theme {
  --color-obra-50: #eff6ff;
  --color-obra-100: #dbeafe;
  --color-obra-500: #3b82f6;
  --color-obra-600: #2563eb;
  --color-obra-700: #1d4ed8;
  --color-obra-900: #1e3a8a;

  --color-salud-50: #ecfdf5;
  --color-salud-100: #d1fae5;
  --color-salud-500: #10b981;
  --color-salud-600: #059669;
  --color-salud-700: #047857;
  --color-salud-900: #064e3b;
    
  --font-sans: 'Inter', 'sans-serif';
}

@layer components {
  .card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  
  @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
      animation: fadeIn 0.8s ease-out forwards;
      opacity: 0;
  }
  .delay-200 { animation-delay: 0.2s; }
  .delay-400 { animation-delay: 0.4s; }
}