{"id":988,"date":"2026-02-10T16:38:55","date_gmt":"2026-02-10T16:38:55","guid":{"rendered":"http:\/\/192.168.0.100\/wordpress\/?page_id=988"},"modified":"2026-04-15T22:30:47","modified_gmt":"2026-04-15T22:30:47","slug":"cocodi","status":"publish","type":"page","link":"https:\/\/metropoli.edu.mx\/index.php\/cocodi\/","title":{"rendered":"COCODI"},"content":{"rendered":"\n<style>\n    \/* --- DEFINICI\u00d3N DE COLORES --- *\/\n    :root {\n        --color-dorado: #bf9000;\n        --color-negro: #000000;\n        --color-gris-fondo: #f8f9fb;\n    }\n\n    \/* --- ANIMACIONES --- *\/\n    @keyframes fadeInUp {\n        from { opacity: 0; transform: translateY(30px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n\n    .animate-pop {\n        opacity: 0;\n        animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\n    }\n\n    .delay-1 { animation-delay: 0.1s; }\n    .delay-2 { animation-delay: 0.2s; }\n    .delay-3 { animation-delay: 0.3s; }\n    .delay-4 { animation-delay: 0.4s; }\n    .delay-5 { animation-delay: 0.5s; } \/* Agregado para el tercer PDF *\/\n\n    \/* --- CONTENEDOR PRINCIPAL --- *\/\n    .cocodi-wrapper {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n        max-width: 1300px; \n        margin: 0 auto;\n        padding: 60px 40px;\n        background-color: var(--color-gris-fondo);\n        border-radius: 16px;\n        box-shadow: 0 20px 40px -10px rgba(0,0,0,0.05); \n        color: #333;\n    }\n\n    \/* --- ESTILOS DE VIDEO --- *\/\n    .cocodi-video-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));\n        gap: 40px;\n        margin-bottom: 60px;\n    }\n\n    .video-card {\n        background: #ffffff;\n        border-radius: 12px;\n        overflow: hidden;\n        box-shadow: 0 4px 6px rgba(0,0,0,0.02);\n        border: 1px solid rgba(0,0,0,0.04);\n        transition: all 0.3s ease;\n        display: flex;\n        flex-direction: column;\n        position: relative; \n    }\n\n    .video-card:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n        border-color: rgba(191, 144, 0, 0.3); \n    }\n\n    \/* --- EL CAMBIO EST\u00c1 AQU\u00cd --- *\/\n    .custom-video-player {\n        width: 100%;\n        height: 100%; \n        aspect-ratio: 4 \/ 3; \n        object-fit: contain; \n        display: block;\n        background: #000;\n        outline: none;\n    }\n\n    .video-info {\n        padding: 25px;\n        text-align: center;\n        background: white;\n        z-index: 2;\n        border-top: 1px solid #f0f0f0;\n    }\n\n    .video-title {\n        font-size: 20px;\n        font-weight: 700;\n        color: #1f2937;\n        margin: 0;\n        line-height: 1.4;\n    }\n\n    \/* --- T\u00cdTULO SECCI\u00d3N PITI --- *\/\n    .section-header {\n        display: flex;\n        align-items: center;\n        margin-top: 60px;\n        margin-bottom: 30px;\n    }\n\n    .cocodi-section-title {\n        font-size: 26px;\n        color: var(--color-dorado); \n        font-weight: 800;\n        margin: 0;\n        padding-right: 20px;\n        white-space: nowrap;\n        text-transform: uppercase; \n        letter-spacing: 1px;\n    }\n\n    .section-line {\n        height: 3px; \n        background: var(--color-negro); \n        width: 100%;\n        border-radius: 2px;\n        opacity: 0.8;\n    }\n\n    \/* --- ESTILOS DE LINKS PDF --- *\/\n    .cocodi-links-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n        gap: 20px;\n    }\n\n    .pdf-link-card {\n        display: flex;\n        align-items: center;\n        background-color: #ffffff;\n        padding: 16px 20px;\n        border-radius: 12px;\n        text-decoration: none;\n        color: #4b5563;\n        border: 1px solid #f3f4f6;\n        box-shadow: 0 2px 5px rgba(0,0,0,0.02);\n        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n        position: relative;\n        overflow: hidden;\n    }\n\n    .pdf-link-card:hover {\n        border-color: #e5e7eb;\n        transform: translateY(-3px);\n        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);\n        color: #111827;\n        border-left: 4px solid var(--color-dorado); \n    }\n\n    .icon-box {\n        background-color: #f3f4f6;\n        color: #6b7280;\n        width: 44px;\n        height: 44px;\n        border-radius: 10px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-right: 15px;\n        flex-shrink: 0;\n        transition: all 0.3s ease;\n    }\n\n    .pdf-link-card:hover .icon-box {\n        background-color: var(--color-dorado); \n        color: #ffffff;\n    }\n\n    .link-content {\n        display: flex;\n        flex-direction: column;\n        flex-grow: 1;\n    }\n\n    .link-text {\n        font-weight: 600;\n        font-size: 16px;\n    }\n    \n    .link-subtext {\n        font-size: 12px;\n        color: #9ca3af;\n        margin-top: 2px;\n        font-weight: 500;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        transition: color 0.3s ease;\n    }\n\n    .pdf-link-card:hover .link-subtext {\n        color: var(--color-dorado); \n    }\n\n    .arrow-icon {\n        opacity: 0;\n        transform: translateX(-10px);\n        transition: all 0.3s ease;\n        color: var(--color-dorado); \n    }\n\n    .pdf-link-card:hover .arrow-icon {\n        opacity: 1;\n        transform: translateX(0);\n    }\n\n    \/* Responsive *\/\n    @media (max-width: 640px) {\n        .cocodi-wrapper { padding: 40px 20px; }\n        .cocodi-video-grid, .cocodi-links-grid { grid-template-columns: 1fr; }\n        .section-header { flex-direction: column; align-items: flex-start; }\n        .section-line { margin-top: 10px; }\n    }\n<\/style>\n\n<div class=\"cocodi-wrapper\">\n\n    <div class=\"cocodi-video-grid\">\n        \n        <div class=\"video-card animate-pop delay-1\">\n            <video class=\"custom-video-player\" controls preload=\"metadata\">\n                <source src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/Curso-PTARI-2022.mp4\" type=\"video\/mp4\">\n                Tu navegador no soporta la reproducci\u00f3n de video.\n            <\/video>\n            <div class=\"video-info\">\n                <h3 class=\"video-title\">Curso PTARI 2024<\/h3>\n            <\/div>\n        <\/div>\n\n        <div class=\"video-card animate-pop delay-2\">\n            <video class=\"custom-video-player\" controls preload=\"metadata\">\n                <source src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/Curso-de-Sensibilizacion-COCODI.mp4\" type=\"video\/mp4\">\n                Tu navegador no soporta la reproducci\u00f3n de video.\n            <\/video>\n            <div class=\"video-info\">\n                <h3 class=\"video-title\">Curso de Sensibilizaci\u00f3n COCODI<\/h3>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"section-header animate-pop delay-3\">\n        <h3 class=\"cocodi-section-title\">PITI<\/h3>\n        <div class=\"section-line\"><\/div>\n    <\/div>\n\n    <div class=\"cocodi-links-grid\">\n        \n        <a href=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/04\/22.-PITI-Firma.pdf\" class=\"pdf-link-card animate-pop delay-3\">\n            <div class=\"icon-box\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path>\n                    <polyline points=\"14 2 14 8 20 8\"><\/polyline>\n                <\/svg>\n            <\/div>\n            <div class=\"link-content\">\n                <span class=\"link-text\">PITI-Firma<\/span>\n                <span class=\"link-subtext\">Visualizar PDF<\/span>\n            <\/div>\n            <svg class=\"arrow-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n                <polyline points=\"12 5 19 12 12 19\"><\/polyline>\n            <\/svg>\n        <\/a>\n\n        <a href=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/04\/22.-Informe-trimestralTI.pdf\" class=\"pdf-link-card animate-pop delay-4\">\n            <div class=\"icon-box\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path>\n                    <polyline points=\"14 2 14 8 20 8\"><\/polyline>\n                    <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line>\n                    <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line>\n                    <polyline points=\"10 9 9 9 8 9\"><\/polyline>\n                <\/svg>\n            <\/div>\n            <div class=\"link-content\">\n                <span class=\"link-text\">Informe Trimestral TI<\/span>\n                <span class=\"link-subtext\">Visualizar PDF<\/span>\n            <\/div>\n            <svg class=\"arrow-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n                <polyline points=\"12 5 19 12 12 19\"><\/polyline>\n            <\/svg>\n        <\/a>\n\n        <a href=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/04\/PITI-2026.pdf\" class=\"pdf-link-card animate-pop delay-5\">\n            <div class=\"icon-box\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path>\n                    <polyline points=\"14 2 14 8 20 8\"><\/polyline>\n                <\/svg>\n            <\/div>\n            <div class=\"link-content\">\n                <span class=\"link-text\">PITI 2026<\/span>\n                <span class=\"link-subtext\">Visualizar PDF<\/span>\n            <\/div>\n            <svg class=\"arrow-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n                <polyline points=\"12 5 19 12 12 19\"><\/polyline>\n            <\/svg>\n        <\/a>\n\n    <\/div>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Tu navegador no soporta la reproducci\u00f3n de video. Curso PTARI 2024 Tu navegador no soporta la reproducci\u00f3n de video. Curso de Sensibilizaci\u00f3n COCODI PITI PITI-Firma Visualizar PDF Informe Trimestral TI Visualizar PDF PITI 2026 Visualizar PDF<\/p>\n","protected":false},"author":1,"featured_media":1001,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-988","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/pages\/988","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=988"}],"version-history":[{"count":13,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/pages\/988\/revisions"}],"predecessor-version":[{"id":2105,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/pages\/988\/revisions\/2105"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/media\/1001"}],"wp:attachment":[{"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/media?parent=988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}