{"id":1188,"date":"2026-09-11T09:50:57","date_gmt":"2026-09-11T14:50:57","guid":{"rendered":"https:\/\/imct.gov.co\/gestioninstitucional\/?page_id=1188"},"modified":"2026-09-11T09:50:57","modified_gmt":"2026-09-11T14:50:57","slug":"servimos-2","status":"publish","type":"page","link":"https:\/\/imct.gov.co\/gestioninstitucional\/index.php\/servimos-2\/","title":{"rendered":"Servimos"},"content":{"rendered":"\n<!-- =========================================================\n     PROGRAMA SERVIMOS\n     VIDEO + GALER\u00cdA + EMPRESAS PARTICIPANTES\n     ========================================================= -->\n\n<section class=\"servimos-pro\">\n\n  <!-- =====================================================\n       BLOQUE SUPERIOR\n       VIDEO + 10 FOTOGRAF\u00cdAS\n       ===================================================== -->\n\n  <div class=\"servimos-galeria\">\n\n    <!-- VIDEO -->\n    <div class=\"servimos-video-principal\">\n      <video controls preload=\"metadata\" playsinline>\n        <source\n          src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/WhatsApp-Video-2026-09-10-at-3.26.46-PM.mp4\"\n          type=\"video\/mp4\"\n        >\n        Tu navegador no soporta video HTML5.\n      <\/video>\n    <\/div>\n\n\n    <!-- FOTO 1 -->\n    <button\n      class=\"servimos-foto servimos-foto-1\"\n      type=\"button\"\n      data-servimos-img=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/3af4151c-3ab8-4ca1-af11-00526059c5f2.jpg\"\n      aria-label=\"Ampliar fotograf\u00eda 1\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/3af4151c-3ab8-4ca1-af11-00526059c5f2.jpg\"\n        alt=\"Programa Servimos - Fotograf\u00eda 1\"\n      >\n    <\/button>\n\n\n    <!-- FOTO 2 -->\n    <button\n      class=\"servimos-foto servimos-foto-2\"\n      type=\"button\"\n      data-servimos-img=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/78070b42-f640-475c-84de-a3971e5b48d3.jpg\"\n      aria-label=\"Ampliar fotograf\u00eda 2\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/78070b42-f640-475c-84de-a3971e5b48d3.jpg\"\n        alt=\"Programa Servimos - Fotograf\u00eda 2\"\n      >\n    <\/button>\n\n\n    <!-- FOTO 3 -->\n    <button\n      class=\"servimos-foto servimos-foto-3\"\n      type=\"button\"\n      data-servimos-img=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/d9dd2d92-5285-4ed6-897f-46dc1566748a.jpg\"\n      aria-label=\"Ampliar fotograf\u00eda 3\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/d9dd2d92-5285-4ed6-897f-46dc1566748a.jpg\"\n        alt=\"Programa Servimos - Fotograf\u00eda 3\"\n      >\n    <\/button>\n\n\n    <!-- FOTO 4 -->\n    <button\n      class=\"servimos-foto servimos-foto-4\"\n      type=\"button\"\n      data-servimos-img=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/0870dca6-bb4f-4e21-8bc5-3b15062aa248.jpg\"\n      aria-label=\"Ampliar fotograf\u00eda 4\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/0870dca6-bb4f-4e21-8bc5-3b15062aa248.jpg\"\n        alt=\"Programa Servimos - Fotograf\u00eda 4\"\n      >\n    <\/button>\n\n\n    <!-- FOTO 5 -->\n    <button\n      class=\"servimos-foto servimos-foto-5\"\n      type=\"button\"\n      data-servimos-img=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/37efb7e9-bd20-46bd-b0e5-5f66da01b141.jpg\"\n      aria-label=\"Ampliar fotograf\u00eda 5\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/37efb7e9-bd20-46bd-b0e5-5f66da01b141.jpg\"\n        alt=\"Programa Servimos - Fotograf\u00eda 5\"\n      >\n    <\/button>\n\n\n    <!-- FOTO 6 -->\n    <button\n      class=\"servimos-foto servimos-foto-6\"\n      type=\"button\"\n      data-servimos-img=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/613edf0b-d73f-4302-8c5f-6f42d9f97848.jpg\"\n      aria-label=\"Ampliar fotograf\u00eda 6\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/613edf0b-d73f-4302-8c5f-6f42d9f97848.jpg\"\n        alt=\"Programa Servimos - Fotograf\u00eda 6\"\n      >\n    <\/button>\n\n\n    <!-- FOTO 7 -->\n    <button\n      class=\"servimos-foto servimos-foto-7\"\n      type=\"button\"\n      data-servimos-img=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/14da8fa2-6155-4ddf-8ec3-d1428ffa5d41.jpg\"\n      aria-label=\"Ampliar fotograf\u00eda 7\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/14da8fa2-6155-4ddf-8ec3-d1428ffa5d41.jpg\"\n        alt=\"Programa Servimos - Fotograf\u00eda 7\"\n      >\n    <\/button>\n\n\n    <!-- FOTO 8 -->\n    <button\n      class=\"servimos-foto servimos-foto-8\"\n      type=\"button\"\n      data-servimos-img=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/c990fd74-2e50-49a9-94a1-bdc1e3e512d9.jpg\"\n      aria-label=\"Ampliar fotograf\u00eda 8\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/c990fd74-2e50-49a9-94a1-bdc1e3e512d9.jpg\"\n        alt=\"Programa Servimos - Fotograf\u00eda 8\"\n      >\n    <\/button>\n\n\n    <!-- FOTO 9 -->\n    <button\n      class=\"servimos-foto servimos-foto-9\"\n      type=\"button\"\n      data-servimos-img=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/21ad921a-3ddc-4e57-80da-ad291f129e22.jpg\"\n      aria-label=\"Ampliar fotograf\u00eda 9\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/21ad921a-3ddc-4e57-80da-ad291f129e22.jpg\"\n        alt=\"Programa Servimos - Fotograf\u00eda 9\"\n      >\n    <\/button>\n\n\n    <!-- FOTO 10 -->\n    <button\n      class=\"servimos-foto servimos-foto-10\"\n      type=\"button\"\n      data-servimos-img=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/8da91af0-bd2d-47e2-b488-6d397506b55d.jpg\"\n      aria-label=\"Ampliar fotograf\u00eda 10\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/8da91af0-bd2d-47e2-b488-6d397506b55d.jpg\"\n        alt=\"Programa Servimos - Fotograf\u00eda 10\"\n      >\n    <\/button>\n\n  <\/div>\n\n\n  <!-- =====================================================\n       EMPRESAS QUE PARTICIPARON\n       ===================================================== -->\n\n  <div class=\"servimos-empresas\">\n\n    <h2>Empresas que participaron<\/h2>\n\n    <div class=\"servimos-carousel\">\n\n      <!-- FLECHA IZQUIERDA -->\n      <button\n        class=\"servimos-carousel-btn servimos-carousel-prev\"\n        type=\"button\"\n        aria-label=\"Ver empresas anteriores\"\n      >\n        \u2039\n      <\/button>\n\n\n      <div class=\"servimos-carousel-ventana\">\n\n        <div class=\"servimos-carousel-track\">\n\n          <!-- GRUPO 1 -->\n          <div class=\"servimos-carousel-slide\">\n\n            <div class=\"servimos-empresa-img\">\n              <img decoding=\"async\"\n                src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/1col.png\"\n                alt=\"Empresa participante 1\"\n              >\n            <\/div>\n\n            <div class=\"servimos-empresa-img\">\n              <img decoding=\"async\"\n                src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/2col.png\"\n                alt=\"Empresa participante 2\"\n              >\n            <\/div>\n\n          <\/div>\n\n\n          <!-- GRUPO 2 -->\n          <div class=\"servimos-carousel-slide\">\n\n            <div class=\"servimos-empresa-img\">\n              <img decoding=\"async\"\n                src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/3col.png\"\n                alt=\"Empresa participante 3\"\n              >\n            <\/div>\n\n            <div class=\"servimos-empresa-img\">\n              <img decoding=\"async\"\n                src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/4col.png\"\n                alt=\"Empresa participante 4\"\n              >\n            <\/div>\n\n          <\/div>\n\n\n          <!-- GRUPO 3 -->\n          <div class=\"servimos-carousel-slide\">\n\n            <div class=\"servimos-empresa-img\">\n              <img decoding=\"async\"\n                src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/5col.png\"\n                alt=\"Empresa participante 5\"\n              >\n            <\/div>\n\n            <div class=\"servimos-empresa-img\">\n              <img decoding=\"async\"\n                src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/09\/6col.png\"\n                alt=\"Empresa participante 6\"\n              >\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- FLECHA DERECHA -->\n      <button\n        class=\"servimos-carousel-btn servimos-carousel-next\"\n        type=\"button\"\n        aria-label=\"Ver siguientes empresas\"\n      >\n        \u203a\n      <\/button>\n\n    <\/div>\n\n\n    <!-- INDICADORES -->\n    <div class=\"servimos-carousel-dots\">\n\n      <button\n        type=\"button\"\n        class=\"servimos-dot activo\"\n        data-slide=\"0\"\n        aria-label=\"Grupo 1\"\n      ><\/button>\n\n      <button\n        type=\"button\"\n        class=\"servimos-dot\"\n        data-slide=\"1\"\n        aria-label=\"Grupo 2\"\n      ><\/button>\n\n      <button\n        type=\"button\"\n        class=\"servimos-dot\"\n        data-slide=\"2\"\n        aria-label=\"Grupo 3\"\n      ><\/button>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- =========================================================\n     VISOR DE FOTOGRAF\u00cdAS\n     ========================================================= -->\n\n<div\n  class=\"servimos-lightbox\"\n  id=\"servimosLightbox\"\n  aria-hidden=\"true\"\n>\n\n  <button\n    class=\"servimos-lightbox-close\"\n    type=\"button\"\n    aria-label=\"Cerrar fotograf\u00eda\"\n  >\n    \u00d7\n  <\/button>\n\n  <div class=\"servimos-lightbox-contenido\">\n\n    <img decoding=\"async\"\n      id=\"servimosLightboxImg\"\n      src=\"\"\n      alt=\"Fotograf\u00eda ampliada\"\n    >\n\n  <\/div>\n\n<\/div>\n\n\n\n<style>\n\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@600;700;800;900&display=swap');\n\n\n  \/* =====================================================\n     GENERAL\n     ===================================================== *\/\n\n  .servimos-pro,\n  .servimos-pro *,\n  .servimos-lightbox,\n  .servimos-lightbox * {\n    box-sizing: border-box;\n  }\n\n\n  .servimos-pro {\n    width: 100%;\n    max-width: 1600px;\n    margin: 0 auto;\n    padding: 25px 0 45px;\n    font-family: 'Nunito', Arial, sans-serif;\n  }\n\n\n\n  \/* =====================================================\n     GALER\u00cdA SUPERIOR\n     ===================================================== *\/\n\n  .servimos-galeria {\n    width: 100%;\n    display: grid;\n\n    grid-template-columns:\n      repeat(4, minmax(0, 1fr));\n\n    gap: 18px;\n\n    align-items: stretch;\n  }\n\n\n\n  \/* =====================================================\n     VIDEO\n     ===================================================== *\/\n\n  .servimos-video-principal {\n    grid-column: 1;\n    grid-row: 1 \/ span 2;\n\n    width: 100%;\n    height: 100%;\n\n    min-height: 100%;\n\n    overflow: hidden;\n\n    border-radius: 18px;\n\n    background: #000;\n\n    box-shadow:\n      0 10px 28px\n      rgba(0, 0, 0, 0.14);\n  }\n\n\n  .servimos-video-principal video {\n    width: 100%;\n    height: 100%;\n\n    min-height: 100%;\n\n    display: block;\n\n    object-fit: cover;\n\n    background: #000;\n  }\n\n\n\n  \/* =====================================================\n     FOTOGRAF\u00cdAS\n     TODAS EXACTAMENTE DEL MISMO TAMA\u00d1O\n     ===================================================== *\/\n\n  .servimos-foto {\n    width: 100%;\n\n    aspect-ratio: 4 \/ 3;\n\n    display: block;\n\n    margin: 0;\n    padding: 0;\n\n    position: relative;\n\n    overflow: hidden;\n\n    border: 0;\n    border-radius: 16px;\n\n    background: #ecefec;\n\n    cursor: zoom-in;\n\n    box-shadow:\n      0 8px 23px\n      rgba(0, 0, 0, 0.11);\n\n    transition:\n      transform 0.25s ease,\n      box-shadow 0.25s ease;\n  }\n\n\n  .servimos-foto img {\n    width: 100%;\n    height: 100%;\n\n    display: block;\n\n    object-fit: cover;\n\n    \/*\n      MUY IMPORTANTE:\n      las im\u00e1genes verticales se recortan\n      desde el centro, repartiendo el\n      recorte arriba y abajo.\n    *\/\n    object-position: center center;\n\n    transition:\n      transform 0.4s ease,\n      filter 0.4s ease;\n  }\n\n\n  .servimos-foto:hover {\n    transform: translateY(-4px);\n\n    box-shadow:\n      0 15px 32px\n      rgba(0, 0, 0, 0.17);\n  }\n\n\n  .servimos-foto:hover img {\n    transform: scale(1.045);\n  }\n\n\n\n  \/* =====================================================\n     POSICI\u00d3N EXACTA SEG\u00daN EL BOCETO\n     ===================================================== *\/\n\n\n  \/* FILA 1 *\/\n\n  .servimos-foto-1 {\n    grid-column: 2;\n    grid-row: 1;\n  }\n\n  .servimos-foto-2 {\n    grid-column: 3;\n    grid-row: 1;\n  }\n\n  .servimos-foto-3 {\n    grid-column: 4;\n    grid-row: 1;\n  }\n\n\n  \/* FILA 2 *\/\n\n  .servimos-foto-4 {\n    grid-column: 2;\n    grid-row: 2;\n  }\n\n  .servimos-foto-5 {\n    grid-column: 3;\n    grid-row: 2;\n  }\n\n  .servimos-foto-6 {\n    grid-column: 4;\n    grid-row: 2;\n  }\n\n\n  \/* FILA 3 *\/\n\n  .servimos-foto-7 {\n    grid-column: 1;\n    grid-row: 3;\n  }\n\n  .servimos-foto-8 {\n    grid-column: 2;\n    grid-row: 3;\n  }\n\n  .servimos-foto-9 {\n    grid-column: 3;\n    grid-row: 3;\n  }\n\n  .servimos-foto-10 {\n    grid-column: 4;\n    grid-row: 3;\n  }\n\n\n\n  \/* =====================================================\n     EMPRESAS QUE PARTICIPARON\n     ===================================================== *\/\n\n  .servimos-empresas {\n    width: 100%;\n\n    margin-top: 65px;\n\n    padding: 0;\n\n    background: transparent;\n\n    text-align: center;\n  }\n\n\n  .servimos-empresas h2 {\n    margin: 0 0 30px;\n\n    color: #004225;\n\n    font-size:\n      clamp(27px, 2.6vw, 40px);\n\n    font-weight: 900;\n\n    line-height: 1.1;\n\n    letter-spacing: -0.6px;\n  }\n\n\n\n  \/* =====================================================\n     CARRUSEL\n     ===================================================== *\/\n\n  .servimos-carousel {\n    width: 100%;\n\n    display: grid;\n\n    grid-template-columns:\n      55px\n      minmax(0, 1fr)\n      55px;\n\n    align-items: center;\n\n    gap: 15px;\n  }\n\n\n  .servimos-carousel-ventana {\n    width: 100%;\n\n    overflow: hidden;\n  }\n\n\n  .servimos-carousel-track {\n    width: 100%;\n\n    display: flex;\n\n    transition:\n      transform 0.7s\n      cubic-bezier(\n        0.22,\n        0.61,\n        0.36,\n        1\n      );\n  }\n\n\n  .servimos-carousel-slide {\n    width: 100%;\n\n    flex: 0 0 100%;\n\n    display: grid;\n\n    grid-template-columns:\n      repeat(2, minmax(0, 1fr));\n\n    gap: 28px;\n\n    align-items: center;\n  }\n\n\n\n  \/* =====================================================\n     CADA IMAGEN DE EMPRESA\n     ===================================================== *\/\n\n  .servimos-empresa-img {\n    width: 100%;\n\n    height: 260px;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    padding: 10px 18px;\n\n    overflow: hidden;\n\n    background: transparent;\n  }\n\n\n  .servimos-empresa-img img {\n    width: 100%;\n    height: 100%;\n\n    display: block;\n\n    object-fit: contain;\n\n    object-position: center;\n\n    \/*\n      NO se permite ampliar.\n      NO se recorta.\n    *\/\n\n    user-select: none;\n\n    pointer-events: none;\n  }\n\n\n\n  \/* =====================================================\n     FLECHAS CARRUSEL\n     ===================================================== *\/\n\n  .servimos-carousel-btn {\n    width: 48px;\n    height: 48px;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    padding: 0 0 6px;\n\n    border: none;\n\n    border-radius: 50%;\n\n    background: #087a43;\n\n    color: #ffffff;\n\n    font-family: Arial, sans-serif;\n\n    font-size: 38px;\n\n    font-weight: 400;\n\n    line-height: 1;\n\n    cursor: pointer;\n\n    box-shadow:\n      0 8px 20px\n      rgba(8, 122, 67, 0.25);\n\n    transition:\n      background 0.25s ease,\n      transform 0.25s ease;\n  }\n\n\n  .servimos-carousel-btn:hover {\n    background: #004225;\n\n    transform: scale(1.08);\n  }\n\n\n\n  \/* =====================================================\n     PUNTOS\n     ===================================================== *\/\n\n  .servimos-carousel-dots {\n    margin-top: 23px;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    gap: 9px;\n  }\n\n\n  .servimos-dot {\n    width: 11px;\n    height: 11px;\n\n    margin: 0;\n    padding: 0;\n\n    border: none;\n\n    border-radius: 50%;\n\n    background: #cad8d0;\n\n    cursor: pointer;\n\n    transition:\n      width 0.25s ease,\n      border-radius 0.25s ease,\n      background 0.25s ease;\n  }\n\n\n  .servimos-dot.activo {\n    width: 29px;\n\n    border-radius: 999px;\n\n    background: #087a43;\n  }\n\n\n\n  \/* =====================================================\n     LIGHTBOX\n     ===================================================== *\/\n\n  .servimos-lightbox {\n    position: fixed;\n\n    inset: 0;\n\n    z-index: 9999999;\n\n    width: 100%;\n    height: 100%;\n\n    display: none;\n\n    align-items: center;\n\n    justify-content: center;\n\n    padding: 35px;\n\n    background:\n      rgba(0, 0, 0, 0.88);\n\n    backdrop-filter:\n      blur(7px);\n  }\n\n\n  .servimos-lightbox.activo {\n    display: flex;\n\n    animation:\n      servimosLightboxEntrada\n      0.22s ease;\n  }\n\n\n  @keyframes servimosLightboxEntrada {\n\n    from {\n      opacity: 0;\n    }\n\n    to {\n      opacity: 1;\n    }\n\n  }\n\n\n  .servimos-lightbox-contenido {\n    width: 100%;\n    height: 100%;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n  }\n\n\n  .servimos-lightbox-contenido img {\n    max-width: 92vw;\n\n    max-height: 88vh;\n\n    width: auto;\n    height: auto;\n\n    display: block;\n\n    object-fit: contain;\n\n    border-radius: 12px;\n\n    box-shadow:\n      0 20px 60px\n      rgba(0, 0, 0, 0.45);\n  }\n\n\n  .servimos-lightbox-close {\n    position: fixed;\n\n    top: 22px;\n    right: 25px;\n\n    z-index: 3;\n\n    width: 52px;\n    height: 52px;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    padding: 0 0 5px;\n\n    border: none;\n\n    border-radius: 50%;\n\n    background: #ffffff;\n\n    color: #004225;\n\n    font-family: Arial, sans-serif;\n\n    font-size: 38px;\n\n    line-height: 1;\n\n    cursor: pointer;\n\n    box-shadow:\n      0 8px 25px\n      rgba(0, 0, 0, 0.30);\n\n    transition:\n      transform 0.2s ease,\n      background 0.2s ease;\n  }\n\n\n  .servimos-lightbox-close:hover {\n    transform: scale(1.08);\n\n    background: #eef7f2;\n  }\n\n\n  body.servimos-lightbox-abierto {\n    overflow: hidden;\n  }\n\n\n\n  \/* =====================================================\n     TABLET\n     ===================================================== *\/\n\n  @media (max-width: 1050px) {\n\n    .servimos-galeria {\n      grid-template-columns:\n        repeat(3, minmax(0, 1fr));\n    }\n\n\n    .servimos-video-principal {\n      grid-column: 1;\n\n      grid-row: 1 \/ span 2;\n    }\n\n\n    .servimos-foto-1 {\n      grid-column: 2;\n      grid-row: 1;\n    }\n\n    .servimos-foto-2 {\n      grid-column: 3;\n      grid-row: 1;\n    }\n\n    .servimos-foto-3 {\n      grid-column: 2;\n      grid-row: 2;\n    }\n\n    .servimos-foto-4 {\n      grid-column: 3;\n      grid-row: 2;\n    }\n\n\n    .servimos-foto-5,\n    .servimos-foto-6,\n    .servimos-foto-7,\n    .servimos-foto-8,\n    .servimos-foto-9,\n    .servimos-foto-10 {\n      grid-column: auto;\n      grid-row: auto;\n    }\n\n\n    .servimos-empresa-img {\n      height: 220px;\n    }\n\n  }\n\n\n\n  \/* =====================================================\n     M\u00d3VIL\n     ===================================================== *\/\n\n  @media (max-width: 700px) {\n\n    .servimos-pro {\n      padding:\n        15px 0 35px;\n    }\n\n\n    .servimos-galeria {\n      grid-template-columns:\n        repeat(2, minmax(0, 1fr));\n\n      gap: 12px;\n    }\n\n\n    \/*\n      En m\u00f3vil el video ocupa todo\n      el ancho antes de las fotograf\u00edas.\n    *\/\n\n    .servimos-video-principal {\n      grid-column: 1 \/ -1;\n\n      grid-row: auto;\n\n      aspect-ratio: 16 \/ 9;\n\n      height: auto;\n\n      min-height: 0;\n\n      border-radius: 14px;\n    }\n\n\n    .servimos-video-principal video {\n      width: 100%;\n      height: 100%;\n\n      object-fit: contain;\n    }\n\n\n    .servimos-foto-1,\n    .servimos-foto-2,\n    .servimos-foto-3,\n    .servimos-foto-4,\n    .servimos-foto-5,\n    .servimos-foto-6,\n    .servimos-foto-7,\n    .servimos-foto-8,\n    .servimos-foto-9,\n    .servimos-foto-10 {\n      grid-column: auto;\n      grid-row: auto;\n    }\n\n\n    .servimos-foto {\n      border-radius: 12px;\n    }\n\n\n    .servimos-empresas {\n      margin-top: 48px;\n    }\n\n\n    .servimos-empresas h2 {\n      margin-bottom: 22px;\n\n      font-size: 28px;\n    }\n\n\n    .servimos-carousel {\n      grid-template-columns:\n        38px\n        minmax(0, 1fr)\n        38px;\n\n      gap: 7px;\n    }\n\n\n    .servimos-carousel-btn {\n      width: 36px;\n      height: 36px;\n\n      font-size: 29px;\n    }\n\n\n    \/*\n      IMPORTANTE:\n      contin\u00faan apareciendo DOS\n      im\u00e1genes simult\u00e1neamente.\n    *\/\n\n    .servimos-carousel-slide {\n      grid-template-columns:\n        repeat(2, minmax(0, 1fr));\n\n      gap: 10px;\n    }\n\n\n    .servimos-empresa-img {\n      height: 140px;\n\n      padding: 5px;\n    }\n\n\n    .servimos-lightbox {\n      padding: 15px;\n    }\n\n\n    .servimos-lightbox-close {\n      top: 12px;\n      right: 12px;\n\n      width: 44px;\n      height: 44px;\n\n      font-size: 32px;\n    }\n\n  }\n\n\n\n  \/* =====================================================\n     M\u00d3VIL PEQUE\u00d1O\n     ===================================================== *\/\n\n  @media (max-width: 430px) {\n\n    .servimos-galeria {\n      gap: 9px;\n    }\n\n\n    .servimos-empresa-img {\n      height: 115px;\n    }\n\n\n    .servimos-carousel {\n      grid-template-columns:\n        34px\n        minmax(0, 1fr)\n        34px;\n    }\n\n\n    .servimos-carousel-btn {\n      width: 32px;\n      height: 32px;\n\n      font-size: 25px;\n    }\n\n  }\n\n<\/style>\n\n\n\n<script>\n\n(function () {\n\n  \/* =====================================================\n     LIGHTBOX DE FOTOS\n     ===================================================== *\/\n\n  const fotos =\n    document.querySelectorAll(\n      '.servimos-foto[data-servimos-img]'\n    );\n\n  const lightbox =\n    document.getElementById(\n      'servimosLightbox'\n    );\n\n  const lightboxImg =\n    document.getElementById(\n      'servimosLightboxImg'\n    );\n\n  const cerrarLightbox =\n    document.querySelector(\n      '.servimos-lightbox-close'\n    );\n\n\n  function abrirFoto(url) {\n\n    if (!lightbox || !lightboxImg) {\n      return;\n    }\n\n    lightboxImg.src = url;\n\n    lightbox.classList.add(\n      'activo'\n    );\n\n    lightbox.setAttribute(\n      'aria-hidden',\n      'false'\n    );\n\n    document.body.classList.add(\n      'servimos-lightbox-abierto'\n    );\n\n  }\n\n\n  function cerrarFoto() {\n\n    if (!lightbox) {\n      return;\n    }\n\n    lightbox.classList.remove(\n      'activo'\n    );\n\n    lightbox.setAttribute(\n      'aria-hidden',\n      'true'\n    );\n\n    document.body.classList.remove(\n      'servimos-lightbox-abierto'\n    );\n\n    setTimeout(function () {\n\n      if (lightboxImg) {\n        lightboxImg.src = '';\n      }\n\n    }, 220);\n\n  }\n\n\n  fotos.forEach(function (foto) {\n\n    foto.addEventListener(\n      'click',\n      function () {\n\n        const url =\n          foto.getAttribute(\n            'data-servimos-img'\n          );\n\n        abrirFoto(url);\n\n      }\n    );\n\n  });\n\n\n  if (cerrarLightbox) {\n\n    cerrarLightbox.addEventListener(\n      'click',\n      cerrarFoto\n    );\n\n  }\n\n\n  if (lightbox) {\n\n    lightbox.addEventListener(\n      'click',\n      function (event) {\n\n        if (\n          event.target === lightbox ||\n          event.target.classList.contains(\n            'servimos-lightbox-contenido'\n          )\n        ) {\n\n          cerrarFoto();\n\n        }\n\n      }\n    );\n\n  }\n\n\n  document.addEventListener(\n    'keydown',\n    function (event) {\n\n      if (\n        event.key === 'Escape' &&\n        lightbox &&\n        lightbox.classList.contains(\n          'activo'\n        )\n      ) {\n\n        cerrarFoto();\n\n      }\n\n    }\n  );\n\n\n\n  \/* =====================================================\n     CARRUSEL EMPRESAS\n     ===================================================== *\/\n\n  const track =\n    document.querySelector(\n      '.servimos-carousel-track'\n    );\n\n  const slides =\n    document.querySelectorAll(\n      '.servimos-carousel-slide'\n    );\n\n  const botonAnterior =\n    document.querySelector(\n      '.servimos-carousel-prev'\n    );\n\n  const botonSiguiente =\n    document.querySelector(\n      '.servimos-carousel-next'\n    );\n\n  const dots =\n    document.querySelectorAll(\n      '.servimos-dot'\n    );\n\n\n  let indiceActual = 0;\n\n  let intervalo = null;\n\n\n  function mostrarSlide(indice) {\n\n    if (!track || !slides.length) {\n      return;\n    }\n\n\n    if (indice >= slides.length) {\n      indice = 0;\n    }\n\n\n    if (indice < 0) {\n      indice =\n        slides.length - 1;\n    }\n\n\n    indiceActual = indice;\n\n\n    track.style.transform =\n      'translateX(-' +\n      (indiceActual * 100) +\n      '%)';\n\n\n    dots.forEach(\n      function (dot, indiceDot) {\n\n        dot.classList.toggle(\n          'activo',\n          indiceDot === indiceActual\n        );\n\n      }\n    );\n\n  }\n\n\n  function siguienteSlide() {\n\n    mostrarSlide(\n      indiceActual + 1\n    );\n\n  }\n\n\n  function anteriorSlide() {\n\n    mostrarSlide(\n      indiceActual - 1\n    );\n\n  }\n\n\n  function iniciarAutomatico() {\n\n    detenerAutomatico();\n\n\n    intervalo =\n      setInterval(\n        siguienteSlide,\n        4500\n      );\n\n  }\n\n\n  function detenerAutomatico() {\n\n    if (intervalo) {\n\n      clearInterval(intervalo);\n\n      intervalo = null;\n\n    }\n\n  }\n\n\n  if (botonSiguiente) {\n\n    botonSiguiente.addEventListener(\n      'click',\n      function () {\n\n        siguienteSlide();\n\n        iniciarAutomatico();\n\n      }\n    );\n\n  }\n\n\n  if (botonAnterior) {\n\n    botonAnterior.addEventListener(\n      'click',\n      function () {\n\n        anteriorSlide();\n\n        iniciarAutomatico();\n\n      }\n    );\n\n  }\n\n\n  dots.forEach(\n    function (dot) {\n\n      dot.addEventListener(\n        'click',\n        function () {\n\n          const indice =\n            parseInt(\n              dot.getAttribute(\n                'data-slide'\n              ),\n              10\n            );\n\n          mostrarSlide(indice);\n\n          iniciarAutomatico();\n\n        }\n      );\n\n    }\n  );\n\n\n  \/*\n    Si el usuario pone el mouse\n    encima del carrusel se detiene.\n  *\/\n\n  const carousel =\n    document.querySelector(\n      '.servimos-carousel'\n    );\n\n\n  if (carousel) {\n\n    carousel.addEventListener(\n      'mouseenter',\n      detenerAutomatico\n    );\n\n\n    carousel.addEventListener(\n      'mouseleave',\n      iniciarAutomatico\n    );\n\n  }\n\n\n  mostrarSlide(0);\n\n  iniciarAutomatico();\n\n\n})();\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Tu navegador no soporta video HTML5. Empresas que participaron \u2039 \u203a \u00d7<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1188","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/imct.gov.co\/gestioninstitucional\/index.php\/wp-json\/wp\/v2\/pages\/1188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imct.gov.co\/gestioninstitucional\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/imct.gov.co\/gestioninstitucional\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/imct.gov.co\/gestioninstitucional\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imct.gov.co\/gestioninstitucional\/index.php\/wp-json\/wp\/v2\/comments?post=1188"}],"version-history":[{"count":1,"href":"https:\/\/imct.gov.co\/gestioninstitucional\/index.php\/wp-json\/wp\/v2\/pages\/1188\/revisions"}],"predecessor-version":[{"id":1189,"href":"https:\/\/imct.gov.co\/gestioninstitucional\/index.php\/wp-json\/wp\/v2\/pages\/1188\/revisions\/1189"}],"wp:attachment":[{"href":"https:\/\/imct.gov.co\/gestioninstitucional\/index.php\/wp-json\/wp\/v2\/media?parent=1188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}