/*-----------------------------------------------------------------------------------------------------------------*/
  /*Efecto de carga para el inicio de la pagina*/
  .fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out forwards;
}

.delay-1 {
  animation-delay: 0.3s;
}

.delay-2 {
  animation-delay: 0.6s;
}

.delay-3 {
  animation-delay: 0.9s;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*-----------------------------------------------------------------------------------------------------------------------*/
/*Efecto para deslizar las letras en los contenedores*/
@keyframes slidein {
  from {
    transform: translateX(20%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animated-text {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  overflow: hidden;
  opacity: 0; 
  transform: translateX(30%); 
}

.animated-text.show {
  animation: slidein 1.5s ease-out forwards;
}

.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.03),
      rgba(0, 0, 0, 0.03) 2px,
      transparent 2px,
      transparent 10px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0, 0, 0, 0.03),
      rgba(0, 0, 0, 0.03) 2px,
      transparent 2px,
      transparent 10px
    );
  z-index: -1;
  opacity: 1;
}