diff --git a/posgrados/assets/css/posgrados.css b/posgrados/assets/css/posgrados.css
index ff62285..f2366d3 100644
--- a/posgrados/assets/css/posgrados.css
+++ b/posgrados/assets/css/posgrados.css
@@ -640,6 +640,7 @@ Hero
   top: 15px;
   left: 8px;
   border-radius: 5px;
+  opacity: 0.7;
 }
 #hero #hero_container #information #box-information2 #information-2-card::after {
   content: '';
@@ -651,6 +652,7 @@ Hero
   bottom: 15px;
   right: 8px;
   border-radius: 5px;
+  opacity: 0.7;
 }
 @media (max-width: 768px) {
   #hero #hero_container {
@@ -782,6 +784,84 @@ Main
   }
 }
 /* ==========
+Last section
+========== */
+#section {
+  min-height: 70vh;
+}
+#section #section_container {
+  min-height: 65vh;
+}
+#section #section_container #section_container_col {
+  min-height: 65vh;
+}
+#section #section_container #section_container_col #degree1 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#section #section_container #section_container_col #degree1 .vertical-bar {
+  width: 100%;
+  /* Aumentado para acomodar el texto y 4 items */
+  height: 20rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+#section #section_container #section_container_col #degree1 .vertical-bar .bar-item {
+  flex: 1;
+  cursor: pointer;
+  position: relative;
+  border-right: 3px solid rgba(35, 70, 131, 0.5);
+  /* Opacidad por defecto del borde derecho */
+  transition: border-right-color 0.3s ease, color 0.3s ease;
+  /* Transición para borde y texto */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+}
+#section #section_container #section_container_col #degree1 .vertical-bar .bar-item .bar-item:last-child {
+  border-bottom: none;
+}
+#section #section_container #section_container_col #degree1 .vertical-bar .bar-item .bar-item:last-child .bar-item p {
+  margin: 0;
+  color: rgba(35, 70, 131, 0.5);
+  /* Color del texto por defecto */
+  transition: color 0.3s ease;
+  /* Transición para el color del texto */
+}
+#section #section_container #section_container_col #degree2 .info-display {
+  padding: 20px;
+  background-color: #fff;
+  flex: 1;
+  min-height: 100%;
+}
+#section #section_container #section_container_col #degree2 .info-display #info-title {
+  padding: 1rem 0;
+  border-bottom: 0.3rem solid #bb8800;
+  width: 70%;
+  color: #234683;
+  /* Color del título */
+}
+#section #section_container #section_container_col #degree2 .info-display #info-text {
+  color: #234683;
+  /* Color del texto */
+}
+#section #section_container #section_container_col #degree2 .info-display ul {
+  padding-left: 20px;
+  margin: 2rem 0;
+  color: #234683;
+  /* Color de la lista */
+}
+#section #section_container #section_container_col #degree2 .info-display ul li {
+  margin: 1rem 0;
+  /* Espaciado entre elementos de la lista */
+}
+/* ==========
+Last section
+========== */
+/* ==========
 Footer
 ========== */
 #footer {
diff --git a/posgrados/assets/css/posgrados.less b/posgrados/assets/css/posgrados.less
index ed4fef1..69da5f0 100644
--- a/posgrados/assets/css/posgrados.less
+++ b/posgrados/assets/css/posgrados.less
@@ -766,6 +766,7 @@ Hero
 						top: 15px;
 						left: 8px;
 						border-radius: 5px;
+						opacity: 0.7;
 					}
 	
 					&::after{
@@ -778,6 +779,7 @@ Hero
 						bottom: 15px;
 						right: 8px;
 						border-radius: 5px;
+						opacity: 0.7;
 					}
 					
 				}
@@ -967,6 +969,90 @@ Main
 }
 
 
+/* ==========
+Last section
+========== */
+
+#section{
+	min-height: 70vh;
+	#section_container{
+		min-height: 65vh;
+		#section_container_col{
+			min-height: 65vh;
+
+			#degree1{
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				.vertical-bar {
+					width: 100%; /* Aumentado para acomodar el texto y 4 items */
+					height: 20rem;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					.bar-item {
+						flex: 1;
+						cursor: pointer;
+						position: relative;
+						border-right: 3px solid rgba(35, 70, 131, 0.5); /* Opacidad por defecto del borde derecho */
+						transition: border-right-color 0.3s ease, color 0.3s ease; /* Transición para borde y texto */
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						font-size: 1.5rem;
+						.bar-item:last-child {
+							border-bottom: none;
+							
+					.bar-item p {
+						margin: 0;
+						color: rgba(35, 70, 131, 0.5); /* Color del texto por defecto */
+						transition: color 0.3s ease; /* Transición para el color del texto */
+						
+					}
+						}
+					}
+				}
+			}
+
+			#degree2{
+				
+				.info-display {
+					padding: 20px;
+					background-color: #fff;
+					flex: 1;
+					min-height: 100%;
+					#info-title {
+						padding: 1rem 0;
+						border-bottom: 0.3rem solid @color-prin;
+						width: 70%;
+						color: #234683; /* Color del título */
+
+					}
+					#info-text {
+						color: #234683; /* Color del texto */
+
+					}
+					ul {
+						padding-left: 20px;
+						margin: 2rem 0;
+						color: #234683; /* Color de la lista */
+					}
+					ul li {
+						margin: 1rem 0; /* Espaciado entre elementos de la lista */
+
+					}
+					
+				}
+			}
+		}
+	}
+}
+
+
+/* ==========
+Last section
+========== */
+
 /* ==========
 Footer
 ========== */
diff --git a/posgrados/assets/js/bar.js b/posgrados/assets/js/bar.js
new file mode 100644
index 0000000..dfa28b2
--- /dev/null
+++ b/posgrados/assets/js/bar.js
@@ -0,0 +1,74 @@
+document.querySelectorAll('.bar-item').forEach((item, index) => {
+    item.addEventListener('click', function() {
+        // Eliminar la opacidad de 0.9 de todos los elementos y aplicar opacidad 0.5 por defecto
+        document.querySelectorAll('.bar-item').forEach(el => {
+            el.style.borderRightColor = 'rgba(35, 70, 131, 0.5)'; // Restablecer opacidad del borde a 0.5
+            el.querySelector('p').style.color = 'rgba(35, 70, 131, 0.5)'; // Restablecer color del texto a 0.5
+        });
+
+        // Cambiar la opacidad del borde derecho del elemento clicado a 0.9
+        const selectedOpacity = this.getAttribute('data-opacity');
+        this.style.borderRightColor = `rgba(35, 70, 131, ${selectedOpacity})`;
+
+        // Cambiar el color del texto del elemento clicado
+        this.querySelector('p').style.color = `rgba(35, 70, 131, ${selectedOpacity})`;
+
+        // Actualizar la información en el div de la derecha
+        const title = this.getAttribute('data-title');
+        const info = this.getAttribute('data-info');
+        const list1 = this.getAttribute('data-list1').split(', ');
+        const list2 = this.getAttribute('data-list2').split(', ');
+
+        document.getElementById('info-title').innerText = title;
+        document.getElementById('info-text').innerText = info;
+
+        // Actualizar la primera lista
+        const infoList1 = document.getElementById('info-list1');
+        infoList1.innerHTML = ''; // Limpiar lista
+        list1.forEach(item => {
+            const li = document.createElement('li');
+            li.innerText = item;
+            infoList1.appendChild(li);
+        });
+
+        // Actualizar la segunda lista
+        const infoList2 = document.getElementById('info-list2');
+        infoList2.innerHTML = ''; // Limpiar lista
+        list2.forEach(item => {
+            const li = document.createElement('li');
+            li.innerText = item;
+            infoList2.appendChild(li);
+        });
+    });
+
+    // Inicializar el primer elemento con color sin opacidad y agregar la clase activa
+    if (index === 0) {
+        item.style.borderRightColor = 'rgba(35, 70, 131, 0.9)'; // Primer div con opacidad 0.9
+        item.querySelector('p').style.color = 'rgba(35, 70, 131, 0.9)'; // Primer div con color 0.9
+
+        // Inicializar la información en el div de la derecha
+        const title = item.getAttribute('data-title');
+        const info = item.getAttribute('data-info');
+        const list1 = item.getAttribute('data-list1').split(', ');
+        const list2 = item.getAttribute('data-list2').split(', ');
+
+        document.getElementById('info-title').innerText = title;
+        document.getElementById('info-text').innerText = info;
+
+        // Actualizar la primera lista
+        const infoList1 = document.getElementById('info-list1');
+        list1.forEach(item => {
+            const li = document.createElement('li');
+            li.innerText = item;
+            infoList1.appendChild(li);
+        });
+
+        // Actualizar la segunda lista
+        const infoList2 = document.getElementById('info-list2');
+        list2.forEach(item => {
+            const li = document.createElement('li');
+            li.innerText = item;
+            infoList2.appendChild(li);
+        });
+    }
+});
diff --git a/posgrados/index.html b/posgrados/index.html
index be56e7a..a08d45d 100644
--- a/posgrados/index.html
+++ b/posgrados/index.html
@@ -103,8 +103,7 @@
               <h2><span><i class="bi bi-file-person-fill"></i>  Contacto</span></h2>
 
               <div>
-                <p><strong>Responsable del posgrado en Artes y Diseño (FES Acatlán)</strong></p>
-                <p><strong>Dr. Omar Lezáma Galindo</strong></p>
+                <p><strong>Responsable del posgrado en Artes y Diseño (FES Acatlán): <br>Dr. Omar Lezáma Galindo</strong></p>
                 <p><strong>Teléfono y fax:</strong> 56-23-17-50 ext.38860. Cubículo 36 primer piso del edifcio de Posgrado</p>
                 <p><strong>Correo Electrónico: <br></strong> <a href="">pada@acatlan.unam.mx</a></p>
               </div>
@@ -188,6 +187,66 @@
 
   </main><!-- End #main -->
 
+
+  <section id="section">
+      <div class="container-md" id="section_container">
+          <div class="row flex-row" id="section_container_col">
+            <div class="col-md-4" id="degree1" data-aos="flip-left">
+
+              <div class="vertical-bar">
+                <div class="bar-item" data-opacity="0.9" 
+                     data-title="Línea de investigación" 
+                     data-info="Información sobre Item 1"
+                     data-list1="Elemento 1A, Elemento 1B"
+                     data-list2="Elemento 1C, Elemento 1D, Elemento 1E">
+                    <p>Línea de investigación</p>
+                </div>
+                <div class="bar-item" data-opacity="0.9" 
+                     data-title="Perfiles" 
+                     data-info="Información sobre Item 2"
+                     data-list1="Elemento 2A, Elemento 2B"
+                     data-list2="Elemento 2C, Elemento 2D, Elemento 2E, Elemento 2F">
+                    <p>Perfiles</p>
+                </div>
+                <div class="bar-item" data-opacity="0.9" 
+                     data-title="Requisitos de ingreso" 
+                     data-info="Información sobre Item 3"
+                     data-list1="Elemento 3A, Elemento 3B"
+                     data-list2="Elemento 3C, Elemento 3D, Elemento 3E, Elemento 3F">
+                    <p>Requisitos de ingreso</p>
+                </div>
+                <div class="bar-item" data-opacity="0.9" 
+                     data-title="Obtención del grado" 
+                     data-info="Información sobre Item 4"
+                     data-list1="Elemento 4A, Elemento 4B"
+                     data-list2="Elemento 4C, Elemento 4D, Elemento 4E, Elemento 4F">
+                    <p>Obtención del grado</p>
+                </div>
+            </div>
+              
+            </div>
+            <div class="col" id="degree2" data-aos="fade-down"
+            data-aos-easing="linear"
+            data-aos-duration="1000">
+
+              <div class="info-display">
+                <h2 id="info-title">Item 1</h2>
+                <ul id="info-list1">
+                    <!-- Lista 1 -->
+                </ul>
+                <p id="info-text">Información sobre Item 1</p>
+                <ul id="info-list2">
+                    <!-- Lista 2 -->
+                </ul>
+            </div>
+             
+            </div>
+          </div>
+      </div>
+  </section>
+
+<!--End #last section-->
+
   <!-- ======= Footer ======= -->
   <footer id="footer">
     <div class="footer-top">
@@ -260,6 +319,7 @@
   <script src="../assets/Ext/jquery.easing/jquery.easing.min.js"></script>
   <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>
 
   <!-- Main JS -->
   <script src="../assets/js/main.js"></script>