@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #f5f5f4;
  color: #1a1a1a;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@layer components {
  /* Botón negro píldora limpio */
  .btn-primary {
    @apply bg-[#1a1a1a] text-white px-6 py-2.5 rounded-full text-sm font-normal tracking-wide transition-all duration-200 hover:bg-zinc-700 inline-block cursor-pointer;
  }
  /* Botón outline */
  .btn-outline {
    @apply border border-[#1a1a1a]/20 text-[#1a1a1a] px-6 py-2.5 rounded-full text-sm font-normal tracking-wide transition-all duration-200 hover:border-[#1a1a1a]/60 inline-block cursor-pointer;
  }
  /* Títulos de sección */
  .section-label {
    @apply text-xs font-normal tracking-[0.2em] text-zinc-400 uppercase;
  }
  /* Tarjeta */
  .card {
    @apply bg-white rounded-2xl p-8 border border-zinc-100;
  }
}