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

/* Animaciones personalizadas */
@layer utilities {
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-fade-in {
    animation: fade-in 1.2s ease-out both;
  }

  #mensaje {
  margin-top: 1rem;
  font-weight: 500;
  transition: all 0.3s ease-in-out;
}
.clip-diagonal {
  clip-path: none;
}

/* En escritorio (768px+): aplicar el recorte diagonal */
@media (min-width: 768px) {
  .clip-diagonal {
    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
  }
}


}