Intento de texto typing 2

posgrados/assets/css/posgrados.css

@@ -775,7 +775,8 @@ Main
   overflow: hidden;
   white-space: nowrap;
   border-right: 2px solid rgba(0, 0, 0, 0.75); /* Cursor effect */
-  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+  animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
+  opacity: 0;
 }
 
 @keyframes typing {
@@ -788,6 +789,11 @@ Main
   50% { border-color: rgba(0, 0, 0, 0.75); }
 }
 
+.typing-finished {
+  border-right: none; /* Remove cursor */
+  opacity: 1; /* Make text visible */
+}
+
 @media (max-width: 300px) {
   #main #main_container #main_information {
     margin-bottom: 2rem;

posgrados/assets/js/main.js

@@ -0,0 +1,13 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const lines = document.querySelectorAll(".typing-effect");
+  
+    lines.forEach((line, index) => {
+      line.style.animationDelay = `${index * 2.7}s`;
+      line.style.opacity = '1';
+  
+      line.addEventListener("animationend", function() {
+        line.classList.add("typing-finished");
+      });
+    });
+  });
+  

posgrados/index.html

@@ -143,8 +143,8 @@
             <span class="typing-effect">Profesionales ya titulados con formación</span><br>
             <span class="typing-effect">en torno a la imagen estática o en movimiento,</span><br>
             <span class="typing-effect">las artes y artes visuales así como disciplinas</span><br>
-            <span class="typing-effect">afines con la educación</span>
-            <span class="typing-effect">y desarrollos plásticos en tercera dimensión</span>
+            <span class="typing-effect">afines con la educación</span><br>
+            <span class="typing-effect">y desarrollos plásticos en tercera dimensión</span><br>
           </p>
         </div>
 
@@ -381,7 +381,7 @@
   <script src="../assets/Ext/owl.carousel/owl.carousel.min.js"></script>
   <script src="../assets/Ext/aos/aos.js"></script>
   <script src="./assets/js/bar.js"></script>
-
+  <script src="./assets/js/main.js"></script>
   <!-- Main JS -->
   <script src="../assets/js/main.js"></script>