{"id":810,"date":"2026-02-03T15:54:57","date_gmt":"2026-02-03T15:54:57","guid":{"rendered":"http:\/\/192.168.0.100\/wordpress\/?page_id=810"},"modified":"2026-07-09T17:15:05","modified_gmt":"2026-07-09T17:15:05","slug":"seguimiento-a-egresados","status":"publish","type":"page","link":"https:\/\/metropoli.edu.mx\/index.php\/seguimiento-a-egresados\/","title":{"rendered":"SEGUIMIENTO A EGRESADOS"},"content":{"rendered":"\n<style>\n    \/* --- VARIABLES DE COLOR --- *\/\n    :root {\n        --color-primary: #0097a7;    \n        --color-primary-dark: #006978; \n        --color-accent: #cddc39;     \n        --color-text-dark: #37474f;  \n        --color-text-light: #78909c; \n        --color-bg-main: #f0f4f7;    \n        --color-bg-card: #ffffff;    \n        --radius-card: 16px;         \n        --shadow-soft: 0 8px 24px rgba(149, 157, 165, 0.15);\n    }\n\n    .egresados-container-pro {\n        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;\n        background-color: var(--color-bg-main);\n        padding: 50px 20px;\n        color: var(--color-text-dark);\n        line-height: 1.6;\n    }\n\n    .egresados-grid {\n        display: grid;\n        grid-template-columns: 350px 1fr; \n        gap: 30px;\n        max-width: 1100px;\n        margin: 0 auto;\n        align-items: start;\n    }\n\n    \/* --- ESTILOS GENERALES PARA ICONOS SVG --- *\/\n    .icon-svg {\n        width: 32px;\n        height: 32px;\n        fill: currentColor;\n        display: inline-block;\n        vertical-align: middle;\n    }\n\n    \/* --- COLUMNA 1: OBJETIVO --- *\/\n    .info-card-pro {\n        background: var(--color-bg-card);\n        padding: 35px 30px;\n        border-radius: var(--radius-card);\n        box-shadow: var(--shadow-soft);\n        border-top: 5px solid var(--color-primary);\n        height: 100%; \n    }\n    .info-header {\n        display: flex;\n        align-items: center;\n        margin-bottom: 25px;\n        color: var(--color-primary);\n    }\n    .info-header .icon-svg {\n        width: 36px;\n        height: 36px;\n        margin-right: 12px;\n    }\n    .info-card-pro h3 {\n        margin: 0;\n        font-size: 1.3rem;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n    }\n    .info-card-pro p {\n        font-size: 0.95rem;\n        color: var(--color-text-light);\n        margin-bottom: 20px;\n    }\n    .highlight-box {\n        background: #e0f2f1;\n        padding: 20px;\n        border-radius: 12px;\n        border-left: 4px solid var(--color-primary);\n    }\n    .highlight-box strong {\n        color: var(--color-primary-dark);\n        display: block;\n        margin-bottom: 8px;\n    }\n\n    \/* --- COLUMNA 2: HISTORIA (CARRUSEL) --- *\/\n    .story-card-pro {\n        background: var(--color-bg-card);\n        border-radius: var(--radius-card);\n        box-shadow: var(--shadow-soft);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n    .story-header-pro {\n        background: linear-gradient(135deg, var(--color-text-dark) 0%, #546e7a 100%);\n        color: white;\n        padding: 20px 30px;\n        text-align: center;\n    }\n    .story-header-pro h2 {\n        margin: 0;\n        font-size: 1.5rem;\n        font-weight: 700;\n        text-transform: uppercase;\n        letter-spacing: 1.2px;\n    }\n\n    \/* Envoltura relativa para posicionar las flechas *\/\n    .carousel-wrapper {\n        position: relative;\n        width: 100%;\n    }\n\n    .carousel-track {\n        display: flex;\n        overflow-x: auto;\n        scroll-snap-type: x mandatory;\n        scroll-behavior: smooth;\n        -webkit-overflow-scrolling: touch;\n        \/* Ocultar barra de scroll para un look m\u00e1s limpio ya que tenemos flechas *\/\n        scrollbar-width: none; \/* Firefox *\/\n    }\n    .carousel-track::-webkit-scrollbar {\n        display: none; \/* Chrome, Safari, Edge *\/\n    }\n\n    .story-content-pro {\n        flex: 0 0 100%; \n        scroll-snap-align: start; \n        padding: 40px 60px; \/* Aument\u00e9 el padding lateral para que las flechas no tapen el texto *\/\n        display: flex;\n        gap: 35px;\n        align-items: center; \n        box-sizing: border-box; \n    }\n\n    .story-img-wrapper {\n        flex-shrink: 0;\n        position: relative;\n    }\n    .story-img-pro {\n        width: 200px; \n        height: 200px;\n        object-fit: cover;\n        border-radius: 50%;\n        border: 5px solid white;\n        box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n        position: relative;\n        z-index: 1;\n    }\n    .story-img-wrapper::before {\n        content: '';\n        position: absolute;\n        top: -10px; left: -10px;\n        width: 220px; height: 220px;\n        border-radius: 50%;\n        border: 3px dashed var(--color-accent);\n        z-index: 0;\n    }\n    .story-text-pro { flex-grow: 1; }\n    .story-title {\n        color: var(--color-primary);\n        font-size: 1.5rem;\n        margin: 0 0 20px 0;\n        font-weight: 700;\n    }\n    .company-name { font-weight: 700; color: var(--color-primary-dark); }\n    .quote-pro {\n        position: relative;\n        background: #f9fbe7;\n        padding: 25px 30px;\n        border-radius: 12px;\n        margin: 30px 0 0 0;\n        font-style: italic;\n        color: #555;\n        font-size: 1.1rem; \n    }\n    .quote-icon {\n        position: absolute;\n        top: -20px; left: 20px;\n        width: 40px; height: 40px;\n        fill: var(--color-accent);\n        opacity: 0.5;\n    }\n\n    \/* --- FLECHAS DE NAVEGACI\u00d3N --- *\/\n    .nav-arrow {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        background-color: var(--color-primary);\n        color: white;\n        border: none;\n        border-radius: 50%;\n        width: 40px;\n        height: 40px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        z-index: 10;\n        box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n        transition: background-color 0.3s ease, transform 0.2s ease;\n    }\n    .nav-arrow:hover {\n        background-color: var(--color-primary-dark);\n        transform: translateY(-50%) scale(1.1);\n    }\n    .nav-arrow:active {\n        transform: translateY(-50%) scale(0.95);\n    }\n    .nav-arrow svg {\n        width: 24px;\n        height: 24px;\n        fill: currentColor;\n    }\n    .arrow-left { left: 15px; }\n    .arrow-right { right: 15px; }\n\n    \/* RESPONSIVE *\/\n    @media (max-width: 900px) {\n        .egresados-grid { grid-template-columns: 1fr; max-width: 600px; }\n        .story-content-pro { flex-direction: column; text-align: center; padding: 40px 30px; }\n        .story-img-wrapper { margin: 0 auto 25px auto; }\n        \/* Ocultamos las flechas en m\u00f3vil para que el usuario deslice con el dedo (swipe) *\/\n        .nav-arrow { display: none; } \n    }\n<\/style>\n\n<div class=\"egresados-container-pro\">\n    <div class=\"egresados-grid\">\n\n        <div class=\"info-card-pro\">\n            <div class=\"info-header\">\n                <svg class=\"icon-svg\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z\"\/><\/svg>\n                <h3>Objetivo y Vinculaci\u00f3n<\/h3>\n            <\/div>\n            <p>Nuestro objetivo principal es promover y vincular estrat\u00e9gicamente a nuestros egresados en el mercado laboral competitivo.<\/p>\n            <p>Trabajamos para mantener tus datos actualizados y ofrecerte cursos de capacitaci\u00f3n continua de alto valor.<\/p>\n            <div class=\"highlight-box\">\n                <strong>\u00a1Estimado egresado!<\/strong>\n                Tu trayectoria e informaci\u00f3n son vitales para medir el impacto de nuestros servicios y crear nuevas y mejores oportunidades para ti.\n            <\/div>\n        <\/div>\n\n        <div class=\"story-card-pro\">\n            <div class=\"story-header-pro\">\n                <h2>Historias de \u00c9xito<\/h2>\n            <\/div>\n            \n            <div class=\"carousel-wrapper\">\n                <button class=\"nav-arrow arrow-left\" onclick=\"moverCarrusel(-1)\" aria-label=\"Historia anterior\">\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\/><\/svg>\n                <\/button>\n\n                <div class=\"carousel-track\" id=\"carruselHistorias\">\n                    \n                    <div class=\"story-content-pro\">\n                        <div class=\"story-img-wrapper\">\n                            <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/300x300?text=Foto+Alumno+1\" alt=\"Jes\u00fas Giovani Rodr\u00edguez\" class=\"story-img-pro\">\n                        <\/div>\n                        <div class=\"story-text-pro\">\n                            <h3 class=\"story-title\">Ex Alumno Jes\u00fas Giovani Rodr\u00edguez<\/h3>\n                            <p>Como resultado de nuestro programa de Seguimiento a Egresados, visitamos a Jes\u00fas Giovani. Derivado de su sobresaliente Estad\u00eda Profesional, logr\u00f3 una colocaci\u00f3n laboral directa en <span class=\"company-name\">Holiday Inn La Noria, Puebla.<\/span><\/p>\n                            <div class=\"quote-pro\">\n                                <svg class=\"quote-icon\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z\"\/><\/svg>\n                                &#8220;Resaltamos el gran desempe\u00f1o, compromiso y profesionalismo que ha mostrado nuestro Ex UPMP.&#8221;\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"story-content-pro\">\n                        <div class=\"story-img-wrapper\">\n                            <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/300x300?text=Foto+Alumno+2\" alt=\"Wendolyn Moreno Sosa\" class=\"story-img-pro\">\n                        <\/div>\n                        <div class=\"story-text-pro\">\n                            <h3 class=\"story-title\">Ex Alumna Wendolyn Moreno Sosa<\/h3>\n                            <p>Gracias a las habilidades adquiridas durante su carrera y su proactividad, Wendolyn lidera actualmente el departamento de innovaci\u00f3n en <span class=\"company-name\">Tech Solutions.<\/span><\/p>\n                            <div class=\"quote-pro\">\n                                <svg class=\"quote-icon\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 10.3303 21 7.0166 21H5.0166Z\"\/><\/svg>\n                                &#8220;La visi\u00f3n t\u00e9cnica y el liderazgo de los egresados ha impulsado nuestros proyectos clave.&#8221;\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n\n                <button class=\"nav-arrow arrow-right\" onclick=\"moverCarrusel(1)\" aria-label=\"Siguiente historia\">\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z\"\/><\/svg>\n                <\/button>\n            <\/div>\n            \n        <\/div>\n        \n    <\/div>\n<\/div>\n\n<script>\n    function moverCarrusel(direccion) {\n        const track = document.getElementById('carruselHistorias');\n        const anchoSlide = track.clientWidth;\n        track.scrollBy({ left: anchoSlide * direccion, behavior: 'smooth' });\n    }\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Objetivo y Vinculaci\u00f3n Nuestro objetivo principal es promover y vincular estrat\u00e9gicamente a nuestros egresados en el mercado laboral competitivo. Trabajamos para mantener tus datos actualizados y ofrecerte cursos de capacitaci\u00f3n continua de alto valor. \u00a1Estimado egresado! Tu trayectoria e informaci\u00f3n son vitales para medir el impacto de nuestros servicios y crear nuevas y mejores oportunidades [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2377,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-810","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/pages\/810","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/comments?post=810"}],"version-history":[{"count":9,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/pages\/810\/revisions"}],"predecessor-version":[{"id":2014,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/pages\/810\/revisions\/2014"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/media\/2377"}],"wp:attachment":[{"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/media?parent=810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}