@font-face {
  font-family: "Nasalization";
  src: url('../fonts/nasalization-rg.otf') format('embedded-opentype');
}

/* Estilos base */
.side-content {
  font-family: 'Nasalization', 'Montserrat', sans-serif;
  color: #f8f8f8;
  z-index: 3;
  font-size: 4em;
  /*transform: translateX(100px);*/
  height: 90vh;
  position: absolute;
  left: 10%;
}

/* Animación de entrada para cada línea de texto */
.side-content p {
  opacity: 0;
  animation: fadeInLeft 1s ease forwards;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.indentation-1,
.indentation-2,
.indentation-3,
.indentation-4 {
  background-color: rgb(37, 5, 49);
  /* Fondo color negro */
  margin-left: 20px;
  /* Identación a la derecha */
  display: inline-block;
  /* Hace que el bloque sea un contenedor en línea */
}

/*on the class side-content appply a 20px margin-left to 1st child .indentation 40px to 2st child an so on*/
.indentation-1 {
  margin-left: 20px;
}

.indentation-2 {
  margin-left: 40px;
}

.indentation-3 {
  margin-left: 60px;
}

.indentation-4 {
  margin-left: 80px;
}

/* Animación para la palabra 'convergen' */
.animated-word-2 {
  animation: rotateAnimation 2s infinite linear, pulseAnimation 1.5s linear infinite;
  /*text-shadow: 0 0 5px #fff2f2;
  /* Sombra tipo luz */
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes pulseAnimation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}

/* Animación iridiscente/arcoiris para la palabra 'espectro' */
.animated-word-3 {
  background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: iridescent 6s linear infinite;
  background-size: 400% 100%;
  /* Ajusta el tamaño del degradado */
}

@keyframes iridescent {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 100% 0;
  }
}

a.highlighted-word {
  color: #c57de4;
  /* Cambia el color al pasar el cursor */
  font-weight: bold;
  /* Resalta la palabra */
  text-decoration: none;
  /* Agrega subrayado al pasar el cursor */
}

/* Estilos adicionales al posicionar el cursor sobre la palabra 'soluciones' */
.highlighted-word:hover {
  color: #7700ff;
  /* Cambia el color al pasar el cursor */
  font-weight: bold;
  /* Resalta la palabra */
  text-decoration: underline;
  /* Agrega subrayado al pasar el cursor */
  transform: scale(1.2);
}





/*make .side/content responsive*/
@media (max-width: 768px) {
  .side-content {
    font-size: 2.5em;
    /*transform: translateX(10px);*/
    transform: translateY(200px);
    position: inherit;
  }

  .indentation-1,
  .indentation-2,
  .indentation-3,
  .indentation-4 {
    background-color: rgb(37, 5, 49);
    /* Fondo color negro */
    margin-left: 20px;
    /* Identación a la derecha */
    display: inline-block;
    /* Hace que el bloque sea un contenedor en línea */
  }

  /*on the class side-content appply a 20px margin-left to 1st child .indentation 40px to 2st child an so on*/
  .indentation-1 {
    margin-left: 10px;
  }

  .indentation-2 {
    margin-left: 20px;
  }

  .indentation-3 {
    margin-left: 30px;
  }

  .indentation-4 {
    margin-left: 40px;
  }

}

@media (max-width: 767px) {
  .side-content {
    font-size: 1.5em;
    transform: translateX(10px);
    transform: translateY(200px);
    position: inherit;
  }

  .indentation-1,
  .indentation-2,
  .indentation-3,
  .indentation-4 {
    background-color: rgb(37, 5, 49);
    /* Fondo color negro */
    margin-left: 20px;
    /* Identación a la derecha */
    display: inline-block;
    /* Hace que el bloque sea un contenedor en línea */
  }

  /*on the class side-content appply a 20px margin-left to 1st child .indentation 40px to 2st child an so on*/
  .indentation-1 {
    margin-left: 2px;
  }

  .indentation-2 {
    margin-left: 4px;
  }

  .indentation-3 {
    margin-left: 6px;
  }

  .indentation-4 {
    margin-left: 8px;
  }

}

.texto-con-fondo-video {
  background-image: url('videos/4kPrism.mp4');
  /* Ruta al video */
  background-clip: text;
  /* Recorta el fondo según el texto */
  -webkit-background-clip: text;
  /* Recorta el fondo según el texto (para navegadores WebKit) */
  background-size: cover;
  /* Ajusta el tamaño del fondo */
  animation: playVideo 10s infinite alternate;
  /* Reproducir el video en bucle */
}

@keyframes playVideo {
  0% {
    background-position: center;
  }

  100% {
    background-position: bottom right;
  }
}