body {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 4rem; /* Ajusta según la altura de tu navbar */
}

@font-face {
  font-family: 'hatton';
  src: url('/fonts/hatton/ultralight.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'hatton-bold';
  src: url('/fonts/hatton/bold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'hatton-medium';
  src: url('/fonts/hatton/medium.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'lato';
  src: url('/fonts/Lato/Lato-Light.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'lato-medium';
  src: url('/fonts/Lato/Lato-Regular.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'lato-bold';
  src: url('/fonts/Lato/Lato-Bold.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}



.nav-link {
  color: rgb(55 65 81 / var(--tw-text-opacity, 1)); /* gray-700 en tema claro */
}
/* Estilo para el enlace activo */
.nav-link.active {
  /*color: rgb(0, 170, 255); /* Color primario */
  color: #0ea5e9
}

/* 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 */
}