body {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: calc(var(--navbar-height, 3rem)); /* Ajusta dinámicamente según la altura del navbar */
}

:root {
  --navbar-height: 2rem; /* Ajusta a la altura real de tu navbar */
}

.disabled {
  pointer-events: none; /* Desactiva clics */
  opacity: 0.7; /* Cambia la apariencia */
  cursor: not-allowed; /* Indica visualmente que está deshabilitado */
}

/* Animación Fade Up */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(100px); /* Mayor recorrido */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  opacity: 0;
  transform: translateY(100px);
  position: relative; /* Asegura que solo afecta al elemento */
  z-index: auto; /* Mantén el z-index predeterminado */
  transition: opacity 0.4s, transform 0.4s ease-out; /* Más rápida */
}

.fade-up.is-visible {
  animation: fadeUp 0.6s ease-out forwards; /* Más rápida */
}

/* Animación Fade Left */
@keyframes fadeLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px); /* Mayor recorrido */
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-left {
  opacity: 0;
  transform: translateX(-100px);
  position: relative; /* Asegura que no afecta a elementos fuera */
  z-index: auto; /* Evita interferencia con otros elementos */
  transition: opacity 0.4s, transform 0.4s ease-out; /* Más rápida */
}

.fade-left.is-visible {
  animation: fadeLeft 0.6s ease-out forwards; /* Más rápida */
}

/* Animación Fade Right */
@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(100px); /* Mayor recorrido */
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-right {
  opacity: 0;
  transform: translateX(100px) translateZ(0); /* Crea un nuevo contexto de composición */
  position: relative;
  transition: opacity 0.4s, transform 0.4s ease-out;
}

.fade-right.is-visible {
  animation: fadeRight 0.6s ease-out forwards; /* Más rápida */
}

.animation-container {
  overflow: hidden; /* Aísla el contenido animado */
  position: relative; /* Asegura el aislamiento */
}

