{"id":4111,"date":"2026-08-22T14:54:26","date_gmt":"2026-08-22T14:54:26","guid":{"rendered":"https:\/\/metropoli.edu.mx\/?page_id=4111"},"modified":"2026-08-22T15:00:23","modified_gmt":"2026-08-22T15:00:23","slug":"tsu-en-entornos-virtuales-y-negocios-digitales","status":"publish","type":"page","link":"https:\/\/metropoli.edu.mx\/index.php\/tsu-en-entornos-virtuales-y-negocios-digitales\/","title":{"rendered":"ingenieria en tecnolog\u00edas de la informaci\u00f3n e innovaci\u00f3n digital"},"content":{"rendered":"\n<div class=\"carrera-container sistemas-theme\">\n    <style>\n        \/* --- TEMA VISUAL: SISTEMAS (Institucional: Vino\/Oscuro) --- *\/\n        .sistemas-theme {\n            --color-principal: #580E45; \n            --color-acento: #1a1a1a;    \n            --texto-oscuro: #333;\n            --blanco: #ffffff;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            max-width: 1240px; margin: 0 auto; padding: 20px;\n            color: var(--texto-oscuro);\n        }\n\n        \/* --- BOTONES SUPERIORES (SOLO POSTULAR) --- *\/\n        .acciones-header { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 20px 0 40px 0; }\n        .btn-carrera {\n            padding: 12px 25px; font-size: 0.9rem; font-weight: 700; text-transform: uppercase;\n            text-decoration: none !important; border-radius: 50px; transition: all 0.3s ease;\n            display: inline-flex; align-items: center; justify-content: center; cursor: pointer;\n        }\n        .btn-postular { background: var(--color-acento); color: white !important; border: 2px solid var(--color-acento); }\n        .btn-carrera:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }\n\n        \/* --- TABS PRINCIPALES --- *\/\n        .tabs-header { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; }\n        .tab-button {\n            background: white; border: 2px solid var(--color-acento); color: var(--color-acento);\n            padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 700; text-transform: uppercase; font-size: 0.8rem;\n            transition: all 0.3s;\n        }\n        .tab-button:hover { background: #eee; }\n        .tab-button.active { background: var(--color-acento); color: white; }\n        \n        .tab-content { display: none; animation: fadeIn 0.5s ease; }\n        .tab-content.active { display: block; }\n\n        \/* --- SELECTOR DE TSU Y BOT\u00d3N DIN\u00c1MICO --- *\/\n        .tsu-selector {\n            text-align: center; margin-bottom: 25px; padding: 25px; background: #fffbf2; \n            border-radius: 10px; border: 1px solid var(--color-principal);\n            display: flex; flex-direction: column; align-items: center; gap: 20px;\n        }\n        .tsu-title { font-weight: 800; color: var(--color-acento); text-transform: uppercase; letter-spacing: 1px; }\n        .tsu-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }\n        .tsu-btn {\n            background: white; border: 2px solid var(--color-principal); color: var(--color-principal);\n            padding: 8px 15px; border-radius: 20px; cursor: pointer; font-weight: bold; font-size: 0.8rem;\n            transition: all 0.3s;\n        }\n        .tsu-btn:hover, .tsu-btn.active { background: var(--color-principal); color: white; transform: scale(1.05); }\n\n        \/* Estilo para el bot\u00f3n de descarga din\u00e1mico *\/\n        .btn-descarga-dinamico {\n            background-color: var(--color-principal); color: white !important;\n            padding: 10px 30px; border-radius: 5px; text-decoration: none; font-weight: bold;\n            font-size: 0.85rem; display: inline-flex; align-items: center; gap: 8px;\n            box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: background 0.3s;\n        }\n        .btn-descarga-dinamico:hover { background-color: #3f0a31; transform: translateY(-2px); }\n\n        \/* --- CARRUSEL Y TARJETAS --- *\/\n        .carousel-viewport { width: 100%; overflow-x: auto; padding: 20px 0 60px 0; }\n        .cards-track { display: flex; gap: 25px; width: max-content; padding: 0 20px; }\n        \n        .flip-card { width: 280px; height: 400px; perspective: 1000px; flex-shrink: 0; } \n        .flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; border-radius: 12px; box-shadow: 0 8px 15px rgba(0,0,0,0.1); }\n        .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }\n        \n        .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 12px; display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; }\n        \n        .flip-card-front { background: var(--color-principal); color: white; border: 4px solid white; outline: 2px solid var(--color-principal); align-items: center; justify-content: center; }\n        .front-number { font-size: 3.5rem; font-weight: 800; line-height: 1; }\n        .front-text { color: white; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; margin-top: 5px; font-weight: 700; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }\n        \n        .flip-card-back { background: white; transform: rotateY(180deg); border: 2px solid var(--color-principal); overflow-y: auto; text-align: left; }\n        .back-header { border-bottom: 2px solid var(--color-principal); padding-bottom: 8px; font-weight: 700; color: var(--color-acento); text-align: center; font-size: 0.85rem; margin-bottom: 10px; }\n        \n        .materia-list { list-style: none; padding: 0; margin: 0; width: 100%; }\n        .materia-item { font-size: 0.75rem; padding: 6px 0; border-bottom: 1px solid #eee; display: flex; align-items: flex-start; line-height: 1.3; }\n        .materia-item::before { content: '\u2022'; color: var(--color-principal); font-weight: bold; margin-right: 6px; flex-shrink: 0; }\n        \n        .flip-card.card-prope .flip-card-front { background: #B08500; outline-color: #B08500; }\n        .flip-card.card-ing .flip-card-front { background: var(--color-acento); outline-color: var(--color-acento); }\n        \n        \/* --- GALER\u00cdA --- *\/\n        .galeria-carrera-wrapper { margin: 60px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }\n        .galeria-item { position: relative; height: 250px; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-bottom: 4px solid var(--color-principal); }\n        .galeria-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }\n        .galeria-item:hover img { transform: scale(1.1); }\n\n        \/* --- CLAUSTRO --- *\/\n        .section-divider { display: flex; align-items: center; text-align: center; margin: 50px 0; }\n        .section-divider::before, .section-divider::after { content: ''; flex: 1; border-bottom: 1px solid #ddd; }\n        .director-card { max-width: 450px; margin: 0 auto 30px; background: white; border-radius: 15px; padding: 20px; text-align: center; border: 2px solid var(--color-principal); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }\n        .ptc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }\n        .ptc-card { background: white; padding: 20px; border-radius: 12px; text-align: center; border-top: 4px solid var(--color-acento); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }\n        .staff-name { font-size: 1.1rem; font-weight: 700; color: var(--color-acento); margin: 5px 0; }\n        .staff-role { font-size: 0.8rem; color: var(--color-principal); text-transform: uppercase; font-weight: 700; }\n\n        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n        .carousel-viewport::-webkit-scrollbar, .flip-card-back::-webkit-scrollbar { height: 6px; width: 6px; }\n        .carousel-viewport::-webkit-scrollbar-thumb, .flip-card-back::-webkit-scrollbar-thumb { background: var(--color-principal); border-radius: 10px; }\n        \n        @media (max-width: 768px) { \n            .ptc-grid, .galeria-carrera-wrapper { grid-template-columns: 1fr; }\n            .galeria-item { height: 200px; }\n        }\n    <\/style>\n\n    <div class=\"acciones-header\">\n        <a href=\"#\" class=\"btn-carrera btn-postular\">Postularme Ahora<\/a>\n    <\/div>\n\n    <div class=\"tabs-header\">\n        <button class=\"tab-button active\" onclick=\"openTab(event, 'mision')\">Misi\u00f3n y Visi\u00f3n<\/button>\n        <button class=\"tab-button\" onclick=\"openTab(event, 'perfiles')\">Perfiles<\/button>\n        <button class=\"tab-button\" onclick=\"openTab(event, 'mapa')\">Mapa Curricular<\/button>\n    <\/div>\n\n    <div id=\"mision\" class=\"tab-content active\">\n        <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;\">\n            <div>\n                <h3 style=\"border-left:4px solid var(--color-principal); padding-left:15px; color:var(--color-acento);\">Misi\u00f3n<\/h3>\n                <p style=\"text-align:justify; color:#555;\">Formar profesionistas competitivos en el \u00e1rea de Tecnolog\u00edas de la Informaci\u00f3n, con s\u00f3lidos conocimientos cient\u00edficos, tecnol\u00f3gicos y valores \u00e9ticos.<\/p>\n            <\/div>\n            <div>\n                <h3 style=\"border-left:4px solid var(--color-principal); padding-left:15px; color:var(--color-acento);\">Visi\u00f3n<\/h3>\n                <p style=\"text-align:justify; color:#555;\">Ser un programa acad\u00e9mico reconocido por su excelencia educativa, calidad acreditada y pertinencia social.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div id=\"perfiles\" class=\"tab-content\">\n        <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;\">\n            <div>\n                <h3 style=\"border-left:4px solid var(--color-principal); padding-left:15px; color:var(--color-acento);\">Ingreso<\/h3>\n                <p style=\"text-align:justify; color:#555;\">Inter\u00e9s por matem\u00e1ticas y tecnolog\u00eda. Capacidad de an\u00e1lisis y s\u00edntesis. Creatividad e imaginaci\u00f3n.<\/p>\n            <\/div>\n            <div>\n                <h3 style=\"border-left:4px solid var(--color-principal); padding-left:15px; color:var(--color-acento);\">Egreso<\/h3>\n                <p style=\"text-align:justify; color:#555;\">Profesionista biling\u00fce capaz de dirigir proyectos de tecnolog\u00edas de la informaci\u00f3n y desarrollar software multiplataforma.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div id=\"mapa\" class=\"tab-content\">\n        \n        <div class=\"tsu-selector\">\n            <div class=\"tsu-title\">Selecciona tu Especialidad (TSU):<\/div>\n            \n            <div class=\"tsu-tabs\">\n                <button class=\"tsu-btn active\" onclick=\"cargarMateriasSys('software', this)\">Software Multiplataforma<\/button>\n                <button class=\"tsu-btn\" onclick=\"cargarMateriasSys('redes', this)\">Redes Digitales<\/button>\n                <button class=\"tsu-btn\" onclick=\"cargarMateriasSys('datos', this)\">Ciencia de Datos<\/button>\n                <button class=\"tsu-btn\" onclick=\"cargarMateriasSys('ia', this)\">Inteligencia Artificial<\/button>\n                <button class=\"tsu-btn\" onclick=\"cargarMateriasSys('entornos', this)\">Entornos Virtuales<\/button>\n            <\/div>\n\n            <a href=\"#\" id=\"btn-descarga-pdf\" class=\"btn-descarga-dinamico\" target=\"_blank\">\n                <span>\u2b07<\/span> Descargar Brochure\n            <\/a>\n        <\/div>\n\n        <div class=\"carousel-viewport\">\n            <div class=\"cards-track\">\n                \n                <div class=\"flip-card card-prope\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\"><div class=\"front-number\">0<\/div><div class=\"front-text\">Proped\u00e9utico<\/div><\/div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"back-header\">INICIACI\u00d3N<\/div>\n                            <ul class=\"materia-list\">\n                                <li class=\"materia-item\">Introducci\u00f3n a la Lengua Inglesa<\/li>\n                                <li class=\"materia-item\">Competencias Globales<\/li>\n                                <li class=\"materia-item\">Desarrollo Sostenible<\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\"><div class=\"front-number\">1\u00ba<\/div><div class=\"front-text\">Cuatrimestre<\/div><\/div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"back-header\">TRONCO COM\u00daN<\/div>\n                            <ul class=\"materia-list\">\n                                <li class=\"materia-item\">Ingl\u00e9s I<\/li>\n                                <li class=\"materia-item\">Desarrollo Humano<\/li>\n                                <li class=\"materia-item\">Fundamentos Matem\u00e1ticos<\/li>\n                                <li class=\"materia-item\">Fundamentos de Redes<\/li>\n                                <li class=\"materia-item\">Fundamentos de Programaci\u00f3n<\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\"><div class=\"front-number\">2\u00ba<\/div><div class=\"front-text\">Cuatrimestre<\/div><\/div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"back-header\">TRONCO COM\u00daN<\/div>\n                            <ul class=\"materia-list\">\n                                <li class=\"materia-item\">Ingl\u00e9s II<\/li>\n                                <li class=\"materia-item\">C\u00e1lculo Diferencial<\/li>\n                                <li class=\"materia-item\">Conmutaci\u00f3n de Redes<\/li>\n                                <li class=\"materia-item\">Probabilidad y Estad\u00edstica<\/li>\n                                <li class=\"materia-item\">Programaci\u00f3n Estructurada<\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\"><div class=\"front-number\">3\u00ba<\/div><div class=\"front-text\">Cuatrimestre<\/div><\/div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"back-header\">TRONCO COM\u00daN<\/div>\n                            <ul class=\"materia-list\">\n                                <li class=\"materia-item\">Ingl\u00e9s III<\/li>\n                                <li class=\"materia-item\">C\u00e1lculo Integral<\/li>\n                                <li class=\"materia-item\">Bases de Datos<\/li>\n                                <li class=\"materia-item\">Programaci\u00f3n Orientada a Objetos<\/li>\n                                <li class=\"materia-item\" style=\"font-weight:bold; color:var(--color-principal);\">Proyecto Integrador I<\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\"><div class=\"front-number\">4\u00ba<\/div><div class=\"front-text\">Especialidad<\/div><\/div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"back-header\">ESPECIALIDAD TSU<\/div>\n                            <ul class=\"materia-list\" id=\"lista-sys-4\">\n                                <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"flip-card\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\"><div class=\"front-number\">5\u00ba<\/div><div class=\"front-text\">Especialidad<\/div><\/div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"back-header\">ESPECIALIDAD TSU<\/div>\n                            <ul class=\"materia-list\" id=\"lista-sys-5\">\n                                <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"flip-card card-ing\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\"><div class=\"front-number\">TSU<\/div><div class=\"front-text\">Estad\u00eda<\/div><\/div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"back-header\">ESTAD\u00cdA PROFESIONAL<\/div>\n                            <p style=\"font-size:0.75rem; text-align:center; padding-top:10px; font-weight:700;\" id=\"texto-estadia-tsu\"><\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"flip-card card-ing\">\n                    <div class=\"flip-card-inner\">\n                        <div class=\"flip-card-front\"><div class=\"front-number\">ING<\/div><div class=\"front-text\">Licenciatura<\/div><\/div>\n                        <div class=\"flip-card-back\">\n                            <div class=\"back-header\">CONTINUIDAD DE ESTUDIOS<\/div>\n                            <p style=\"font-size:0.8rem; text-align:center; padding:10px;\">Acceso a la Ingenier\u00eda en Tecnolog\u00edas de la Informaci\u00f3n (7\u00ba a 10\u00ba Cuatrimestre).<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"galeria-carrera-wrapper\">\n        <div class=\"galeria-item\">\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1571171637578-41bc2dd41cd2?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=80\" alt=\"Software\">\n        <\/div>\n        <div class=\"galeria-item\">\n            <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-08-at-10.44.06-AM.jpeg\" alt=\"Redes\">\n        <\/div>\n        <div class=\"galeria-item\">\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1531482615713-2afd69097998?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=80\" alt=\"Clase\">\n        <\/div>\n    <\/div>\n\n    <div class=\"section-divider\">\n        <span style=\"padding:0 15px; color:var(--color-principal);\">\u2726<\/span>\n        <span style=\"font-size:1.5rem; color:var(--color-acento); font-weight:700;\">Direcci\u00f3n Acad\u00e9mica<\/span>\n        <span style=\"padding:0 15px; color:var(--color-principal);\">\u2726<\/span>\n    <\/div>\n    \n    <div class=\"claustro-section\">\n        <div class=\"director-card\">\n            <div class=\"staff-role\">Director de TI<\/div>\n            <div class=\"staff-name\">Ing. Nombre Director<\/div>\n        <\/div>\n        <div class=\"ptc-grid\">\n            <div class=\"ptc-card\"><div class=\"staff-role\">Coordinador Software<\/div><div class=\"staff-name\">Mtro. Docente 1<\/div><\/div>\n            <div class=\"ptc-card\"><div class=\"staff-role\">Coordinador Redes<\/div><div class=\"staff-name\">Mtro. Docente 2<\/div><\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        function openTab(evt, tabName) {\n            var i, tabcontent, tablinks;\n            tabcontent = document.getElementsByClassName(\"tab-content\");\n            for (i = 0; i < tabcontent.length; i++) { tabcontent[i].classList.remove(\"active\"); }\n            tablinks = document.getElementsByClassName(\"tab-button\");\n            for (i = 0; i < tablinks.length; i++) { tablinks[i].classList.remove(\"active\"); }\n            document.getElementById(tabName).classList.add(\"active\");\n            if(evt) evt.currentTarget.classList.add(\"active\");\n        }\n\n        \/* --- IMPORTANTE: CAMBIA LAS RUTAS \"pdf\" POR TUS ARCHIVOS REALES --- *\/\n        const dbMaterias = {\n            'software': {\n                nombre: \"Software\",\n                pdf: \"descargas\/plan_software.pdf\", \/\/ <--- Poner ruta real aqu\u00ed\n                estadia: \"TSU EN DESARROLLO DE SOFTWARE MULTIPLATAFORMA\",\n                c4: [\"Ingl\u00e9s IV\", \"\u00c9tica Profesional\", \"C\u00e1lculo\", \"Aplicaciones Web\", \"Estructura de Datos\", \"Apps M\u00f3viles\", \"Dise\u00f1o Software\"],\n                c5: [\"Ingl\u00e9s V\", \"Liderazgo\", \"Ecuaciones Diferenciales\", \"Web Orientada a Servicios\", \"BD Avanzadas\", \"M\u00e9tricas Software\", \"Proyecto Integrador II\"]\n            },\n            'redes': {\n                nombre: \"Redes\",\n                pdf: \"descargas\/plan_redes.pdf\", \/\/ <--- Poner ruta real aqu\u00ed\n                estadia: \"TSU EN INFRAESTRUCTURA DE REDES DIGITALES\",\n                c4: [\"Ingl\u00e9s IV\", \"\u00c9tica Profesional\", \"C\u00e1lculo\", \"Escalabilidad\", \"Programaci\u00f3n Redes\", \"Data Center\", \"Redes Voz\/Video\"],\n                c5: [\"Ingl\u00e9s V\", \"Liderazgo\", \"Ecuaciones Diferenciales\", \"Redes WAN\", \"Cloud Computing\", \"Seguridad Redes\", \"Proyecto Integrador II\"]\n            },\n            'datos': {\n                nombre: \"Ciencia de Datos\",\n                pdf: \"descargas\/plan_datos.pdf\", \/\/ <--- Poner ruta real aqu\u00ed\n                estadia: \"TSU EN CIENCIA DE DATOS\",\n                c4: [\"Ingl\u00e9s IV\", \"\u00c9tica Profesional\", \"C\u00e1lculo\", \"Programaci\u00f3n Espec\u00edfica\", \"Procesamiento Info\", \"Prog. L\u00f3gica\", \"Aprendizaje Computacional\"],\n                c5: [\"Ingl\u00e9s V\", \"Liderazgo\", \"Ecuaciones Diferenciales\", \"C\u00f3mputo Alto Rendimiento\", \"Visualizaci\u00f3n\", \"Servicios Nube\", \"Proyecto Integrador II\"]\n            },\n            'ia': {\n                nombre: \"Inteligencia Artificial\",\n                pdf: \"descargas\/plan_ia.pdf\", \/\/ <--- Poner ruta real aqu\u00ed\n                estadia: \"TSU EN INTELIGENCIA ARTIFICIAL\",\n                c4: [\"Ingl\u00e9s IV\", \"\u00c9tica Profesional\", \"C\u00e1lculo\", \"Deep Learning\", \"Metodolog\u00eda No Code\", \"Optimizaci\u00f3n\", \"Sistemas Embebidos\"],\n                c5: [\"Ingl\u00e9s V\", \"Liderazgo\", \"Ecuaciones Diferenciales\", \"Miner\u00eda de Datos\", \"Machine Learning\", \"Visi\u00f3n por Computadora\", \"Proyecto Integrador II\"]\n            },\n            'entornos': {\n                nombre: \"Entornos Virtuales\",\n                pdf: \"descargas\/plan_entornos.pdf\", \/\/ <--- Poner ruta real aqu\u00ed\n                estadia: \"TSU EN ENTORNOS VIRTUALES Y NEGOCIOS DIGITALES\",\n                c4: [\"Ingl\u00e9s IV\", \"\u00c9tica Profesional\", \"C\u00e1lculo\", \"Modelado 3D\", \"Edici\u00f3n Audio\/Video\", \"Apps Web\", \"Marketing Digital\"],\n                c5: [\"Ingl\u00e9s V\", \"Liderazgo\", \"Ecuaciones Diferenciales\", \"Realidad Aumentada\", \"Realidad Virtual\", \"Frameworks Web\", \"Proyecto Integrador II\"]\n            }\n        };\n\n        function cargarMateriasSys(clave, btn) {\n            \/\/ Activar bot\u00f3n visualmente\n            if(btn) {\n                document.querySelectorAll('.tsu-btn').forEach(b => b.classList.remove('active'));\n                btn.classList.add('active');\n            }\n            \n            const data = dbMaterias[clave];\n            if(!data) return;\n\n            \/\/ 1. ACTUALIZAR BOT\u00d3N DE DESCARGA (NUEVO)\n            const btnPdf = document.getElementById('btn-descarga-pdf');\n            if(btnPdf) {\n                btnPdf.href = data.pdf; \/\/ Asigna el link del PDF\n                btnPdf.innerHTML = `<span>\u2b07<\/span> Descargar Plan de ${data.nombre}`; \/\/ Cambia el texto\n            }\n\n            \/\/ 2. Llenar Listas de materias\n            const ul4 = document.getElementById('lista-sys-4');\n            if(ul4) {\n                ul4.innerHTML = ''; \n                data.c4.forEach(m => {\n                    let li = document.createElement('li');\n                    li.className = 'materia-item';\n                    li.innerText = m;\n                    ul4.appendChild(li);\n                });\n            }\n\n            const ul5 = document.getElementById('lista-sys-5');\n            if(ul5) {\n                ul5.innerHTML = ''; \n                data.c5.forEach(m => {\n                    let li = document.createElement('li');\n                    li.className = 'materia-item';\n                    if(m.includes(\"Proyecto\")) { li.style.fontWeight=\"bold\"; li.style.color=\"var(--color-principal)\"; }\n                    li.innerText = m;\n                    ul5.appendChild(li);\n                });\n            }\n\n            \/\/ 3. Texto Estad\u00eda\n            const divEstadia = document.getElementById('texto-estadia-tsu');\n            if(divEstadia) divEstadia.innerText = data.estadia;\n        }\n\n        document.addEventListener(\"DOMContentLoaded\", function() {\n            \/\/ Cargar Software por defecto\n            const firstBtn = document.querySelector('.tsu-btn');\n            cargarMateriasSys('software', firstBtn); \n        });\n    <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Postularme Ahora Misi\u00f3n y Visi\u00f3n Perfiles Mapa Curricular Misi\u00f3n Formar profesionistas competitivos en el \u00e1rea de Tecnolog\u00edas de la Informaci\u00f3n, con s\u00f3lidos conocimientos cient\u00edficos, tecnol\u00f3gicos y valores \u00e9ticos. Visi\u00f3n Ser un programa acad\u00e9mico reconocido por su excelencia educativa, calidad acreditada y pertinencia social. Ingreso Inter\u00e9s por matem\u00e1ticas y tecnolog\u00eda. Capacidad de an\u00e1lisis y s\u00edntesis. Creatividad [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":394,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4111","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/pages\/4111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/comments?post=4111"}],"version-history":[{"count":3,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/pages\/4111\/revisions"}],"predecessor-version":[{"id":4115,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/pages\/4111\/revisions\/4115"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/media\/394"}],"wp:attachment":[{"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/media?parent=4111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}