.fade-in {
  opacity: 0;
  transform: translateY(10px); 
  animation: aparecer 1s ease-out forwards;
  animation-delay: 0.5s;
  will-change: opacity, transform; 
  position: relative; 
}

@keyframes aparecer {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; 
  overflow-y: hidden; 
}

body.loading {
  overflow: hidden;
  height: 100vh;
}