* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Esta clase utiliza el pseudo-elemento ::before para crear el fondo */
.bg-half-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* ESTO ES LO CLAVE: Altura del 50% de la section parent */
  height: 60%;

  /* Reemplaza esta URL por la de tu imagen de fondo */
  background-image: url('../assets/seccion_5/Background.png');

  /* Ajustes de imagen estándar */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Aseguramos que esté detrás del contenido principal (z-0 o z-[-1]) */
  z-index: 0;
}


.bg-half-bottom::before {
  content: "";
  position: absolute;
  /* Cambiamos top por bottom para que empiece abajo */
  bottom: 0;
  left: 0;
  width: 100%;
  /* Ajustamos la altura. 
           Un 60% o 70% suele cubrir desde el final del texto hasta la mitad de la imagen 
           dependiendo del largo del párrafo. */
  height: 65%;

  background-image: url('../assets/seccion_5/Background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Animaciones de Texto */
/* Estado inicial: invisible y un poco desplazado hacia abajo */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1.5s ease-out;
}

/* Estado activo: visible y en su posición original */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Retrasos opcionales para elementos en cascada */
.delay-200 {
  transition-delay: 0.2s;
}

.delay-400 {
  transition-delay: 0.4s;
}

/*Animacion para imagen */
/* Definimos la luz como un degradado diagonal */
.efecto-luz {
  background: linear-gradient(to top,
      /* Dirección: hacia arriba */
      rgba(255, 255, 255, 0) 0%,
      /* Transparente abajo */
      rgba(255, 255, 255, 0.8) 50%,
      /* Luz brillante al centro */
      rgba(255, 255, 255, 0) 100%
      /* Transparente arriba */
    );
  /* Posición inicial: completamente debajo de la imagen */
  transform: translateY(100%);
}

/* Definimos la animación */
@keyframes brilloDeAbajoHaciaArriba {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  20% {
    opacity: 1;
    /* Aparece rápido al iniciar */
  }

  80% {
    opacity: 1;
    /* Se mantiene visible */
  }

  100% {
    /* Posición final: completamente encima de la imagen */
    transform: translateY(-100%);
    opacity: 0;
    /* Desaparece al final */
  }
}

/* Esta clase activa la animación */
.animar-destello {
  animation: brilloDeAbajoHaciaArriba 1.5s ease-in-out;
}

/* Animación de texto con brillo */
.esperando-brillo, .esperando-brillo span {
    background-size: 200% auto;
    background-position: 100% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* Asegura que el gradiente se aplique bien */
}

/* El degradado para el texto naranja */
.esperando-brillo {
    background-image: linear-gradient(to right, #ea580c 0%, #ea580c 40%, #ffffff 50%, #ea580c 60%, #ea580c 100%);
}

/* El degradado para el span AGM */
.esperando-brillo span {
    background-image: linear-gradient(to right, #13124e 0%, #13124e 40%, #ffffff 50%, #13124e 60%, #13124e 100%);
}

/* Esta clase se activará con JS */
.animar-ahora {
    animation: shineOnce 5s ease-out forwards;
}

@keyframes shineOnce {
    0% { background-position: 100% center; }
    100% { background-position: -80% center; }
}