{"id":683,"date":"2026-06-22T21:29:58","date_gmt":"2026-06-23T02:29:58","guid":{"rendered":"https:\/\/imct.gov.co\/gestioninstitucional\/?page_id=683"},"modified":"2026-08-12T15:43:47","modified_gmt":"2026-08-12T20:43:47","slug":"actividades-sst","status":"publish","type":"page","link":"https:\/\/imct.gov.co\/gestioninstitucional\/index.php\/actividades-sst\/","title":{"rendered":"Actividades SST"},"content":{"rendered":"\n<!-- =========================================================\n     M\u00d3DULO SEGURIDAD Y SALUD EN EL TRABAJO - 4 TARJETAS\n     ========================================================= -->\n\n<section class=\"sst-imct-pro\">\n\n  <div class=\"sst-imct-grid\">\n\n    <!-- TARJETA 1: PREVENCI\u00d3N DE TABAQUISMOS -->\n    <button\n      class=\"sst-imct-card sst-imct-video-card\"\n      type=\"button\"\n      data-video=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/08\/lv_0_20260710112128.mp4\"\n      aria-label=\"Ver Prevenci\u00f3n de tabaquismos\"\n    >\n\n      <div class=\"sst-imct-img\">\n        <img decoding=\"async\"\n          src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/08\/Copia-de-Copia-de-Copia-de-Portada-7.png\"\n          alt=\"Prevenci\u00f3n de tabaquismos\"\n        >\n      <\/div>\n\n      <div class=\"sst-imct-body\">\n        <h3>Prevenci\u00f3n de tabaquismos<\/h3>\n      <\/div>\n\n    <\/button>\n\n\n    <!-- TARJETA 2: SEMANA DE SEGURIDAD Y SALUD EN EL TRABAJO -->\n    <a\n      class=\"sst-imct-card\"\n      href=\"#\"\n      target=\"_self\"\n    >\n\n      <div class=\"sst-imct-img\">\n        <img decoding=\"async\"\n          src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/08\/Copia-de-Copia-de-Copia-de-Portada-8.png\"\n          alt=\"Semana de seguridad y salud en el trabajo\"\n        >\n      <\/div>\n\n      <div class=\"sst-imct-body\">\n        <h3>Semana de seguridad y salud en el trabajo<\/h3>\n      <\/div>\n\n    <\/a>\n\n\n    <!-- TARJETA 3: PREPARACI\u00d3N PARA ATENDER EMERGENCIAS -->\n    <button\n      class=\"sst-imct-card sst-imct-video-card\"\n      type=\"button\"\n      data-video=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/08\/lv_0_20260810144245.mp4\"\n      aria-label=\"Ver Preparaci\u00f3n para atender emergencias\"\n    >\n\n      <div class=\"sst-imct-img\">\n        <img decoding=\"async\"\n          src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/08\/Copia-de-Copia-de-Copia-de-Portada-9.png\"\n          alt=\"Preparaci\u00f3n para atender emergencias\"\n        >\n      <\/div>\n\n      <div class=\"sst-imct-body\">\n        <h3>Preparaci\u00f3n para atender emergencias<\/h3>\n      <\/div>\n\n    <\/button>\n\n\n    <!-- TARJETA 4: H\u00c1BITOS DE VIDA SALUDABLE -->\n    <a\n      class=\"sst-imct-card\"\n      href=\"#\"\n      target=\"_self\"\n    >\n\n      <div class=\"sst-imct-img\">\n        <img decoding=\"async\"\n          src=\"https:\/\/imct.gov.co\/gestioninstitucional\/wp-content\/uploads\/2026\/08\/Copia-de-Copia-de-Copia-de-Portada-10.png\"\n          alt=\"H\u00e1bitos de vida saludable\"\n        >\n      <\/div>\n\n      <div class=\"sst-imct-body\">\n        <h3>H\u00e1bitos de vida saludable<\/h3>\n      <\/div>\n\n    <\/a>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n     MODAL DE VIDEO\n     ========================================================= -->\n\n<div\n  class=\"sst-video-modal\"\n  id=\"sstVideoModal\"\n  aria-hidden=\"true\"\n>\n\n  <div class=\"sst-video-backdrop\"><\/div>\n\n  <div\n    class=\"sst-video-container\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Reproductor de video\"\n  >\n\n    <button\n      class=\"sst-video-close\"\n      id=\"sstVideoClose\"\n      type=\"button\"\n      aria-label=\"Cerrar video\"\n    >\n      \u00d7\n    <\/button>\n\n    <div class=\"sst-video-frame\">\n\n      <video\n        id=\"sstVideoPlayer\"\n        controls\n        playsinline\n        preload=\"metadata\"\n      >\n        Tu navegador no soporta reproducci\u00f3n de video.\n      <\/video>\n\n    <\/div>\n\n  <\/div>\n\n<\/div>\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  .sst-imct-pro,\n  .sst-imct-pro *,\n  .sst-video-modal,\n  .sst-video-modal * {\n    box-sizing: border-box;\n  }\n\n\n  .sst-imct-pro {\n    width: 100%;\n    max-width: 1600px;\n    margin: 0 auto;\n    padding: 22px 0 35px;\n\n    font-family:\n      'Nunito',\n      Arial,\n      Helvetica,\n      sans-serif;\n  }\n\n\n  \/* =========================================================\n     4 TARJETAS EN UNA SOLA FILA\n     ========================================================= *\/\n\n  .sst-imct-grid {\n    width: 100%;\n\n    display: grid;\n\n    grid-template-columns:\n      repeat(4, minmax(0, 1fr));\n\n    gap: 20px;\n\n    align-items: stretch;\n  }\n\n\n  \/* =========================================================\n     TARJETAS\n     ========================================================= *\/\n\n  .sst-imct-card {\n    width: 100%;\n    min-width: 0;\n    min-height: 300px;\n\n    margin: 0;\n    padding: 0;\n\n    display: flex;\n    flex-direction: column;\n\n    position: relative;\n\n    overflow: hidden;\n\n    appearance: none;\n    -webkit-appearance: none;\n\n    background: #ffffff;\n\n    border:\n      1px solid rgba(0, 66, 37, 0.11);\n\n    border-radius: 19px;\n\n    color: inherit;\n\n    font: inherit;\n\n    text-align: inherit;\n\n    text-decoration: none !important;\n\n    cursor: pointer;\n\n    box-shadow:\n      0 11px 28px rgba(0, 0, 0, 0.11);\n\n    transition:\n      transform 0.25s ease,\n      box-shadow 0.25s ease,\n      border-color 0.25s ease;\n  }\n\n\n  .sst-imct-card::after {\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    pointer-events: none;\n\n    border-radius: inherit;\n\n    box-shadow:\n      inset 0 0 0 1px\n      rgba(255, 255, 255, 0.35);\n  }\n\n\n  .sst-imct-card:hover {\n    transform: translateY(-6px);\n\n    border-color:\n      rgba(8, 122, 67, 0.30);\n\n    box-shadow:\n      0 20px 42px\n      rgba(0, 0, 0, 0.16);\n  }\n\n\n  .sst-imct-card:focus {\n    outline: none;\n  }\n\n\n  .sst-imct-card:focus-visible {\n    outline:\n      4px solid\n      rgba(8, 122, 67, 0.28);\n\n    outline-offset: 4px;\n  }\n\n\n  \/* =========================================================\n     IM\u00c1GENES\n     ========================================================= *\/\n\n  .sst-imct-img {\n    width: 100%;\n    height: 205px;\n\n    overflow: hidden;\n\n    flex-shrink: 0;\n\n    background: #e8eeeb;\n  }\n\n\n  .sst-imct-img img {\n    width: 100%;\n    height: 100%;\n\n    display: block;\n\n    object-fit: cover;\n    object-position: center;\n\n    transition:\n      transform 0.4s ease;\n  }\n\n\n  .sst-imct-card:hover\n  .sst-imct-img img {\n    transform: scale(1.045);\n  }\n\n\n  \/* =========================================================\n     T\u00cdTULO\n     ========================================================= *\/\n\n  .sst-imct-body {\n    flex: 1;\n\n    min-height: 95px;\n\n    padding:\n      17px 14px 19px;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    text-align: center;\n  }\n\n\n  .sst-imct-body h3 {\n    width: 100%;\n\n    margin: 0;\n\n    color: #004225;\n\n    font-family:\n      'Nunito',\n      Arial,\n      Helvetica,\n      sans-serif;\n\n    font-size:\n      clamp(17px, 1.25vw, 21px);\n\n    font-weight: 900;\n\n    line-height: 1.15;\n\n    letter-spacing: -0.2px;\n\n    text-wrap: balance;\n  }\n\n\n\n  \/* =========================================================\n     MODAL DE VIDEO\n     ========================================================= *\/\n\n  .sst-video-modal {\n    width: 100%;\n    height: 100%;\n\n    position: fixed;\n\n    inset: 0;\n\n    z-index: 999999;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    padding: 35px;\n\n    opacity: 0;\n\n    visibility: hidden;\n\n    pointer-events: none;\n\n    transition:\n      opacity 0.28s ease,\n      visibility 0.28s ease;\n  }\n\n\n  .sst-video-modal.activo {\n    opacity: 1;\n\n    visibility: visible;\n\n    pointer-events: auto;\n  }\n\n\n  \/* FONDO OSCURO *\/\n\n  .sst-video-backdrop {\n    position: absolute;\n\n    inset: 0;\n\n    background:\n      rgba(0, 20, 12, 0.86);\n\n    backdrop-filter:\n      blur(7px);\n\n    -webkit-backdrop-filter:\n      blur(7px);\n  }\n\n\n  \/* CONTENEDOR DEL VIDEO *\/\n\n  .sst-video-container {\n    width:\n      min(1050px, 94vw);\n\n    max-height: 90vh;\n\n    position: relative;\n\n    z-index: 2;\n\n    padding: 10px;\n\n    background: #ffffff;\n\n    border:\n      1px solid\n      rgba(255, 255, 255, 0.4);\n\n    border-radius: 23px;\n\n    box-shadow:\n      0 30px 90px\n      rgba(0, 0, 0, 0.52);\n\n    transform:\n      translateY(18px)\n      scale(0.97);\n\n    transition:\n      transform 0.30s ease;\n  }\n\n\n  .sst-video-modal.activo\n  .sst-video-container {\n    transform:\n      translateY(0)\n      scale(1);\n  }\n\n\n  \/* =========================================================\n     VIDEO\n     ========================================================= *\/\n\n  .sst-video-frame {\n    width: 100%;\n\n    max-height:\n      calc(90vh - 20px);\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    overflow: hidden;\n\n    background: #000000;\n\n    border-radius: 16px;\n  }\n\n\n  .sst-video-frame video {\n    width: 100%;\n\n    max-width: 100%;\n\n    max-height:\n      calc(90vh - 20px);\n\n    display: block;\n\n    background: #000000;\n\n    border-radius: 16px;\n\n    object-fit: contain;\n  }\n\n\n  \/* =========================================================\n     BOT\u00d3N CERRAR\n     ========================================================= *\/\n\n  .sst-video-close {\n    width: 48px;\n    height: 48px;\n\n    position: absolute;\n\n    top: -19px;\n    right: -19px;\n\n    z-index: 10;\n\n    padding: 0 0 4px;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    appearance: none;\n    -webkit-appearance: none;\n\n    background: #ffffff;\n\n    border:\n      2px solid\n      rgba(0, 66, 37, 0.15);\n\n    border-radius: 50%;\n\n    color: #004225;\n\n    font-family:\n      Arial,\n      Helvetica,\n      sans-serif;\n\n    font-size: 33px;\n\n    font-weight: 400;\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.22s ease,\n      background 0.22s ease,\n      color 0.22s ease;\n  }\n\n\n  .sst-video-close:hover {\n    transform:\n      rotate(90deg);\n\n    background: #087a43;\n\n    color: #ffffff;\n  }\n\n\n\n  \/* =========================================================\n     RESPONSIVE\n     ========================================================= *\/\n\n  @media (max-width: 1100px) {\n\n    .sst-imct-grid {\n      grid-template-columns:\n        repeat(2, minmax(0, 1fr));\n\n      gap: 18px;\n    }\n\n\n    .sst-imct-img {\n      height: 230px;\n    }\n\n  }\n\n\n  @media (max-width: 650px) {\n\n    .sst-imct-pro {\n      padding:\n        18px 0 30px;\n    }\n\n\n    .sst-imct-grid {\n      grid-template-columns:\n        1fr;\n\n      gap: 18px;\n    }\n\n\n    .sst-imct-card {\n      min-height: 310px;\n    }\n\n\n    .sst-imct-img {\n      height: 230px;\n    }\n\n\n    .sst-imct-body h3 {\n      font-size: 21px;\n    }\n\n\n    .sst-video-modal {\n      padding: 16px;\n    }\n\n\n    .sst-video-container {\n      width: 96vw;\n\n      padding: 6px;\n\n      border-radius: 17px;\n    }\n\n\n    .sst-video-frame,\n    .sst-video-frame video {\n      border-radius: 12px;\n    }\n\n\n    .sst-video-close {\n      width: 43px;\n      height: 43px;\n\n      top: -14px;\n      right: -8px;\n\n      font-size: 30px;\n    }\n\n  }\n\n<\/style>\n\n\n<script>\n\n(function () {\n\n  const modal =\n    document.getElementById(\n      'sstVideoModal'\n    );\n\n  const player =\n    document.getElementById(\n      'sstVideoPlayer'\n    );\n\n  const cerrar =\n    document.getElementById(\n      'sstVideoClose'\n    );\n\n  const fondo =\n    modal.querySelector(\n      '.sst-video-backdrop'\n    );\n\n  const tarjetasVideo =\n    document.querySelectorAll(\n      '.sst-imct-video-card[data-video]'\n    );\n\n\n  \/* =========================================================\n     ABRIR VIDEO\n     ========================================================= *\/\n\n  function abrirVideo(url) {\n\n    if (!url) return;\n\n\n    player.pause();\n\n    player.src = url;\n\n\n    modal.classList.add(\n      'activo'\n    );\n\n\n    modal.setAttribute(\n      'aria-hidden',\n      'false'\n    );\n\n\n    document.body.style.overflow =\n      'hidden';\n\n\n    player.load();\n\n\n    const promesa =\n      player.play();\n\n\n    if (\n      promesa !== undefined\n    ) {\n\n      promesa.catch(\n        function () {\n\n          \/*\n           * Si el navegador bloquea\n           * el autoplay con sonido,\n           * el usuario podr\u00e1 iniciarlo\n           * mediante los controles.\n           *\/\n\n        }\n      );\n\n    }\n\n  }\n\n\n  \/* =========================================================\n     CERRAR VIDEO\n     ========================================================= *\/\n\n  function cerrarVideo() {\n\n    player.pause();\n\n\n    player.removeAttribute(\n      'src'\n    );\n\n\n    player.load();\n\n\n    modal.classList.remove(\n      'activo'\n    );\n\n\n    modal.setAttribute(\n      'aria-hidden',\n      'true'\n    );\n\n\n    document.body.style.overflow =\n      '';\n\n  }\n\n\n  \/* =========================================================\n     TARJETAS CON VIDEO\n     ========================================================= *\/\n\n  tarjetasVideo.forEach(\n    function (tarjeta) {\n\n      tarjeta.addEventListener(\n        'click',\n        function () {\n\n          const url =\n            tarjeta.getAttribute(\n              'data-video'\n            );\n\n\n          abrirVideo(url);\n\n        }\n      );\n\n    }\n  );\n\n\n  \/* =========================================================\n     BOT\u00d3N X\n     ========================================================= *\/\n\n  cerrar.addEventListener(\n    'click',\n    cerrarVideo\n  );\n\n\n  \/* =========================================================\n     CLIC SOBRE EL FONDO\n     ========================================================= *\/\n\n  fondo.addEventListener(\n    'click',\n    cerrarVideo\n  );\n\n\n  \/* =========================================================\n     TECLA ESC\n     ========================================================= *\/\n\n  document.addEventListener(\n    'keydown',\n    function (evento) {\n\n      if (\n        evento.key === 'Escape' &&\n        modal.classList.contains(\n          'activo'\n        )\n      ) {\n\n        cerrarVideo();\n\n      }\n\n    }\n  );\n\n})();\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Prevenci\u00f3n de tabaquismos Semana de seguridad y salud en el trabajo Preparaci\u00f3n para atender emergencias H\u00e1bitos de vida saludable \u00d7 Tu navegador no soporta reproducci\u00f3n de video.<\/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-683","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/imct.gov.co\/gestioninstitucional\/index.php\/wp-json\/wp\/v2\/pages\/683","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=683"}],"version-history":[{"count":5,"href":"https:\/\/imct.gov.co\/gestioninstitucional\/index.php\/wp-json\/wp\/v2\/pages\/683\/revisions"}],"predecessor-version":[{"id":959,"href":"https:\/\/imct.gov.co\/gestioninstitucional\/index.php\/wp-json\/wp\/v2\/pages\/683\/revisions\/959"}],"wp:attachment":[{"href":"https:\/\/imct.gov.co\/gestioninstitucional\/index.php\/wp-json\/wp\/v2\/media?parent=683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}