/* Ocultar scrollbar en todo el documento pero permitir scroll */
html,
body {
  overflow: auto; /* mantiene el scroll activo */
  -ms-overflow-style: none; /* IE y Edge */
  scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Animación desde abajo */
.reveal-up {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 1s ease-out;
}
.reveal-up.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Animación desde izquierda */
/* Ejemplo para .reveal-left */

.reveal-left {
  opacity: 0;
  transform: translateX(500px) scale(0.95); /* ESTADO INICIAL */
  transition: all 0.8s ease-out;
}
.reveal-left.active {
  opacity: 1;
  transform: translateX(0) scale(1); /* Posición final */
}

/* Animación desde derecha */
/* Nuevo CSS para 'reveal-right' si quieres que venga desde la IZQUIERDA */
.reveal-right {
  opacity: 0;
  transform: translateX(-500px) scale(0.95);
  transition: all 0.8s ease-out;
}

/* SOLUCIÓN: Estado Final (Activo): Visible y en posición normal */
.reveal-right.active {
  opacity: 1; /* Completamente visible */
  transform: translateX(0) scale(1); /* Vuelve a la posición original */
}

/* scroll con animacion para las sociales */

/* CSS Base para el Header */
/* CSS para TRANSICIÓN y OCULTAR la barra social */

/* PASO 1: Asegura la transición en el elemento a mover */
#social {
  /* Agrega una transición de 0.3 segundos para que el movimiento sea suave */
  transition: transform 0.3s ease-in-out;
}

/* PASO 2: La clase que oculta el elemento */
.social-oculto {
  /* Mueve la barra social 100% de su propia altura hacia arriba */
  transform: translateY(-100%);
}

/* Animación desde abajo (ya existía) */
.reveal-up {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 1s ease-out;
}
.reveal-up.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ... (mantener reveal-left y reveal-right) ... */

/* ------------------------------------------------ */
/* NUEVAS ANIMACIONES - Se configuran para usar .active */
/* ------------------------------------------------ */

/* Base para .animate-fadeIn */
.animate-fade-in-base {
  opacity: 0;
  transform: scale(1.1); /* Estado inicial de tu keyframe fadeIn */
  transition: all 1.2s ease-out; /* Duración de tu keyframe fadeIn */
}
.animate-fade-in-base.active {
  opacity: 1;
  transform: scale(1);
}

/* Base para .animate-zoomIn */
.animate-zoom-in-base {
  opacity: 0;
  transform: scale(0); /* Estado inicial de tu keyframe zoomIn */
  transition: all 3s ease-out; /* Duración de tu keyframe zoomIn */
}
.animate-zoom-in-base.active {
  opacity: 1;
  transform: scale(1);
}

@keyframes zoomIn {
  from {
    transform: translateX(0px) scale(0);
    opacity: 0;
  }
  to {
    transform: translateX(0px) scale(1);
    opacity: 1;
  }
}

.animate-zoomIn-1 {
  /* ESTADO INICIAL: Invisible y pequeño. 
     Importante: NO debe haber ninguna propiedad 'animation' aquí. */
  transform: translateX(00px) scale(0);
  opacity: 0;
}

.animate-zoomIn-1.active {
  /* ESTADO DE ACTIVACIÓN: ¡Aquí se dispara la animación! */
  animation: zoomIn 1s ease-out forwards;
}

/* Base para .animate-fadeInUp */
.animate-fade-in-up-base {
  opacity: 0;
  transform: translateY(30px) scale(0.8); /* Combinando tu keyframe fadeInUp y un poco de translateY */
  transition: all 0.8s ease-out; /* Duración de tu keyframe fadeInUp */
}
.animate-fade-in-up-base.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* NOTA: NO USES los keyframes originales. Estás convirtiendo esas animaciones a transiciones de clase */
/* Transición simple para el dropdown de servicios */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-5px); /* Inicia ligeramente arriba */
}
/* Sobrescribe LightGallery para que esté por encima de Z-index: 10000 */
.lg-outer,
.lg-backdrop {
  /* Usamos 10001 para que esté definitivamente sobre el header (10000) */
  z-index: 10001 !important;
}

html {
  scroll-padding-top: 70px;
  scroll-behavior: smooth;
}