{"id":4953,"date":"2025-12-08T17:00:23","date_gmt":"2025-12-08T17:00:23","guid":{"rendered":"https:\/\/utelvt.edu.ec\/biblioteca\/?page_id=4953"},"modified":"2025-12-10T19:08:21","modified_gmt":"2025-12-10T19:08:21","slug":"capacitaciones-2","status":"publish","type":"page","link":"https:\/\/utelvt.edu.ec\/biblioteca\/capacitaciones-2\/","title":{"rendered":"CAPACITACIONES"},"content":{"rendered":"\n<!-- VIDEO DE FONDO (al fondo) -->\n<div class=\"video-fondo\">\n  <video autoplay muted loop playsinline>\n    <source src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/VIDEO-FONDO1.mp4\" type=\"video\/mp4\">\n    Tu navegador no soporta video en HTML5.\n  <\/video>\n<\/div>\n\n<!-- CAPA BLANCA (por encima del video, debajo del contenido) -->\n<div class=\"overlay-blanca\"><\/div>\n\n<style>\n\/* Video ocupando toda la pantalla *\/\n.video-fondo {\n  position: fixed;\n  inset: 0;\n  z-index: -2;           \/* m\u00e1s al fondo *\/\n  overflow: hidden;\n}\n\n.video-fondo video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n\/* Capa blanca encima del video *\/\n.overlay-blanca {\n  position: fixed;\n  inset: 0;\n  background-color: rgba(255, 255, 255, 0.7);  \/* 70% *\/\n  z-index: -1;          \/* encima del video, debajo del contenido *\/\n  pointer-events: none; \/* no bloquea clics *\/\n}\n\n\/* Asegura que tu contenido est\u00e9 por encima *\/\nbody {\n  position: relative;\n  z-index: 0; \/* contenido normal queda encima de -1 y -2 *\/\n}\n\n<\/style>\n\n<header id=\"encabezado\">\n  <!-- Logo izquierda -->\n  <div style=\"flex: 1;\">\n    <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/\">\n      <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/11\/UTELVTE-LOGO-scaled.png\" \n           alt=\"Logo UTELVT\" class=\"logo-principal\">\n    <\/a>\n  <\/div>\n\n  <!-- T\u00edtulo centrado -->\n  <div style=\"flex: 1; text-align: center;\">\n    <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/\" style=\"text-decoration: none; color: inherit;\">\n      <p class=\"titulo\">BIBLIOTECA GENERAL<\/p>\n    <\/a>\n  <\/div>\n\n<!-- Logos + hamburguesa derecha -->\n<div style=\"flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 2rem;\">\n  \n  <!-- Grupo de logos juntos -->\n  <div style=\"display: flex; align-items: center; gap: 1.5rem;\">\n    <!-- SIAD -->\n    <a href=\"https:\/\/estudiante.utelvt.edu.ec\/login\" class=\"logo-boton siad\" data-tooltip=\"SIAD\">\n      <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/SIAD-LOGO1.png\" alt=\"SIAD\" class=\"logo-img siad\">\n    <\/a>\n\n    <!-- Aula Virtual -->\n    <a href=\"https:\/\/aulavirtual.utelvt.edu.ec\/login\/index.php\" class=\"logo-boton aula\" data-tooltip=\"Aula Virtual\">\n      <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/AULA-VIRTUAL-LOGO1.png\" alt=\"Aula Virtual\" class=\"logo-img aula\">\n    <\/a>\n  <\/div>\n\n  <!-- Hamburguesa -->\n  <button class=\"hamburguesa\" onclick=\"togglePanel()\">\n    <svg class=\"icono-hamburguesa\" viewBox=\"0 0 100 80\">\n      <rect class=\"linea\" width=\"100\" height=\"6\" y=\"0\"><\/rect>\n      <rect class=\"linea\" width=\"100\" height=\"6\" y=\"30\"><\/rect>\n      <rect class=\"linea\" width=\"100\" height=\"6\" y=\"60\"><\/rect>\n    <\/svg>\n  <\/button>\n<\/div>\n<\/div>\n\n<\/header>\n\n<style>\n\/* Hamburguesa *\/\n.hamburguesa {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n}\n.icono-hamburguesa {\n  height: 34px;   \/* &#x1f511; m\u00e1s grande *\/\n  width: 34px;\n  display: block;\n  transition: all 0.6s ease-in-out; \/* suavidad *\/\n}\n\n.icono-hamburguesa .linea {\n  fill: #008000;\n  rx: 3;\n  height: 8px;    \/* &#x1f511; m\u00e1s gorditas (antes 6px) *\/\n  transition: all 0.6s ease-in-out; \/* suavidad *\/\n}\n.hamburguesa:hover .linea:nth-child(1) {\n  transform: translateX(5px);\n  fill: #00b300;\n}\n.hamburguesa:hover .linea:nth-child(2) {\n  transform: scaleX(0.8);\n  fill: #00b300;\n}\n.hamburguesa:hover .linea:nth-child(3) {\n  transform: translateX(-5px);\n  fill: #00b300;\n}\n\n\/* Logos *\/\n.logo-img {\n  height: 26px;   \/* tama\u00f1o base *\/\n  width: auto;\n  display: block;\n  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out, filter 0.6s ease-in-out;\n}\n\n.logo-img.siad,\n.logo-img.aula {\n  height: 24px;   \/* &#x1f511; un poquito m\u00e1s peque\u00f1os *\/\n  width: auto;\n}\n\n.logo-boton {\n  position: relative;\n  display: inline-block;\n}\n\n.logo-boton:hover .logo-img {\n  transform: scale(1.1);\n  filter: brightness(1.2);\n}\n\n.logo-boton::after {\n  content: attr(data-tooltip);\n  position: absolute;\n  bottom: -22px;\n  left: 50%;\n  transform: translateX(-50%);\n  color: black;\n  font-size: 0.75rem;\n  opacity: 0;\n  transition: opacity 0.6s ease-in-out;\n  white-space: nowrap;\n}\n\n.logo-boton:hover::after {\n  opacity: 1;\n}\n\n\/* Header base *\/\n#encabezado {\n  background-image: url('https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/11\/FONDO-ENCABEZADO.png');\n  background-size: cover;\n  background-position: center;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem;\n  font-family: sans-serif;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  height: 120px;   \/* tama\u00f1o inicial *\/\n  width: 100%;\n  transition: all 0.6s ease-in-out; \/* suavidad *\/\n}\n\n\/* Logo base *\/\n.logo-principal {\n  height: 80px;\n  margin-left: 30px;\n  transition: all 0.6s ease-in-out; \/* suavidad *\/\n}\n\n\/* Texto base *\/\n.titulo {\n  margin: 0;\n  font-size: 1.2rem;\n  color: #008000;\n  font-weight: bold;\n  transition: opacity 0.6s ease-in-out;\n}\n\n\/* Estado reducido al hacer scroll *\/\n#encabezado.scroll {\n  height: 80px;                \/* header m\u00e1s peque\u00f1o *\/\n  padding: 0.5rem 1.5rem;\n}\n\n#encabezado.scroll .logo-principal {\n  height: 50px;                \/* logo m\u00e1s peque\u00f1o *\/\n  margin-left: 60px;           \/* se mueve a la derecha *\/\n}\n\n#encabezado.scroll .titulo,\n#encabezado.scroll .logo-img.siad,\n#encabezado.scroll .logo-img.aula {\n  opacity: 0;                  \/* desaparecen texto e \u00edconos *\/\n}\n\n                      \/* Opciones men\u00fa alineadas a la izquierda *\/\n\n                      .opcion-menu {\n                        position: relative;\n                        display: flex;\n                        align-items: center;\n                        justify-content: flex-start;\n                        \/* alineado a la izquierda *\/\n                        gap: 8px;\n                        \/* espacio entre flecha y texto *\/\n                        padding: 14px 20px;\n                        color: white;\n                        font-weight: bold;\n                        text-decoration: none;\n                        transition: background-color 0.3s ease;\n                        overflow: hidden;\n                        text-align: left;\n                        \/* asegura alineaci\u00f3n de texto *\/\n                      }\n\n                      .opcion-menu:hover {\n                        background-color: rgba(255, 255, 255, 0.2);\n                      }\n\n                      \/* L\u00edneas r\u00e1pidas arriba\/abajo *\/\n\n                      .opcion-menu::before,\n                      .opcion-menu::after {\n                        content: \"\";\n                        position: absolute;\n                        left: 0;\n                        right: 0;\n                        height: 2px;\n                        background: white;\n                        transform: scaleX(0);\n                        transition: transform 0.3s ease;\n                      }\n\n                      .opcion-menu::before {\n                        top: 0;\n                      }\n\n                      .opcion-menu::after {\n                        bottom: 0;\n                      }\n\n                      .opcion-menu:hover::before,\n                      .opcion-menu:hover::after {\n                        transform: scaleX(1);\n                      }\n\n                      \/* Flecha a la izquierda, volteada *\/\n\n                      .flecha {\n                        display: inline-block;\n                        transform: scaleX(-1);\n                        \/* la voltea para apuntar al lado opuesto *\/\n                        animation: moverFlechaIzq 1s infinite alternate;\n                      }\n\n                      \/* Movimiento sutil hacia la izquierda *\/\n\n                      @keyframes moverFlechaIzq {\n                        from {\n                          transform: scaleX(-1) translateX(0);\n                        }\n                        to {\n                          transform: scaleX(-1) translateX(-5px);\n                        }\n                      }\n\n                      .boton-cerrar {\n                        background: none;\n                        border: none;\n                        font-size: 1.5rem;\n                        color: white;\n                        cursor: pointer;\n                        transition: transform 0.4s ease;\n                      }\n\n                      .boton-cerrar:hover {\n                        transform: rotate(180deg);\n                      }\n\n                      @keyframes slideIn {\n                        from {\n                          transform: translateX(20px);\n                          opacity: 0;\n                        }\n                        to {\n                          transform: translateX(0);\n                          opacity: 1;\n                        }\n                      }\n\n                      .cerrar-tarjeta-btn {\n                        margin-top: 2rem;\n                        padding: 12px 24px;\n                        font-size: 0.95rem;\n                        font-weight: bold;\n                        color: white;\n                        background-color: #008000;\n                        \/* verde institucional *\/\n                        border: 2px solid #008000;\n                        \/* borde verde *\/\n                        border-radius: 8px;\n                        \/* bordes redondeados *\/\n                        cursor: pointer;\n                        transition: all 0.3s ease;\n                      }\n\n                      .cerrar-tarjeta-btn:hover {\n                        background-color: white;\n                        \/* se vuelve blanco *\/\n                        color: #008000;\n                        \/* texto verde *\/\n                        border: 2px solid #008000;\n                        \/* mantiene borde verde *\/\n                        transform: scale(1.05);\n                        \/* animaci\u00f3n suave *\/\n                      }\n\n                    <\/style>\n\n                    <!-- Fondo verde -->\n                    <div id=\"fondo-verde\" style=\"\n  position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n  background-color: rgba(0,128,0,0.3); display: none; z-index: 900;\">\n                    <\/div>\n\n                    <!-- Panel lateral -->\n                    <div id=\"panel-lateral\" style=\"\n  position: fixed; top: 0; right: -260px; width: 260px; height: 100%;\n  background-color: #008000; transition: right 0.3s ease;\n  z-index: 1000; padding-top: 20px; box-shadow: -2px 0 8px rgba(0,0,0,0.2);\">\n                      <div style=\"text-align: left; padding: 0 16px;\">\n                        <button onclick=\"togglePanel()\" class=\"boton-cerrar\">\u2715<\/button>\n                      <\/div>\n\n                      <!-- Opciones con estructura uniforme -->\n                      <a href=\"#\" onclick=\"mostrarTarjetaLateral('vision')\" class=\"opcion-menu\">\n                        <span class=\"flecha\">\u27a4<\/span><span>Visi\u00f3n<\/span>\n                      <\/a>\n                      <a href=\"#\" onclick=\"mostrarTarjetaLateral('mision')\" class=\"opcion-menu\">\n                        <span class=\"flecha\">\u27a4<\/span><span>Misi\u00f3n<\/span>\n                      <\/a>\n                      <a href=\"https:\/\/utelvt.edu.ec\/admision\/\" class=\"opcion-menu\">\n                        <span class=\"flecha\" style=\"visibility: hidden;\">\u27a4<\/span><span>Admisi\u00f3n<\/span>\n                      <\/a>\n                    <\/div>\n\n                    <!-- Admisi\u00f3n sin flecha -->\n                    <a href=\"https:\/\/tupagina.edu.ec\/admisiones\" class=\"opcion-menu\">\n                      Admisi\u00f3n\n                    <\/a>\n\n\n                    <!-- Tarjeta lateral -->\n                    <div id=\"tarjeta-lateral\" style=\"\n  position: fixed; top: 0; right: 260px; width: 300px; height: 100%;\n  background-color: white; border-left: 4px solid #008000;\n  box-shadow: -4px 0 12px rgba(0,0,0,0.2); z-index: 1001;\n  display: none; animation: slideIn 0.4s ease forwards;\n  padding: 1.5rem; text-align: center;\">\n                      <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/11\/UTELVTE-LOGO-scaled.png\" alt=\"Logo UTELVT\" style=\"display: block; margin: 0 auto 1rem auto; max-width: 120px;\">\n\n                      <h2 id=\"titulo-tarjeta-lateral\" style=\"color: #008000; margin-bottom: 1rem;\">T\u00edtulo<\/h2>\n                      <p id=\"contenido-tarjeta-lateral\" style=\"font-size: 0.9rem; color: #333; text-align: justify;\">\n                        Aqu\u00ed ir\u00e1 el contenido institucional de la opci\u00f3n seleccionada.\n                      <\/p>\n                      <button onclick=\"cerrarTarjetaLateral()\" class=\"cerrar-tarjeta-btn\">\n                        \u2715 Cerrar\n                      <\/button>\n                    <\/div>\n\n<script>\n\/\/ Animaci\u00f3n del encabezado al hacer scroll\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  \/\/ Animaci\u00f3n del encabezado al hacer scroll\n  window.addEventListener(\"scroll\", function() {\n    const header = document.getElementById(\"encabezado\");\n    if (!header) return;\n    const shouldShrink = window.scrollY > 50;\n    header.classList.toggle(\"scroll\", shouldShrink);\n  });\n\n  \/\/ Panel lateral\n  window.togglePanel = function() {\n    const panel = document.getElementById('panel-lateral');\n    const fondo = document.getElementById('fondo-verde');\n    const tarjeta = document.getElementById('tarjeta-lateral');\n    if (!panel || !fondo) return;\n\n    const abierto = panel.style.right === '0px';\n    panel.style.right = abierto ? '-260px' : '0px';\n\n    if (abierto) {\n      \/\/ Fade out suave\n      fondo.style.opacity = '0';\n      setTimeout(() => { fondo.style.display = 'none'; }, 600); \/\/ coincide con CSS\n    } else {\n      fondo.style.display = 'block';\n      fondo.style.opacity = '1';\n    }\n\n    if (abierto && tarjeta) {\n      tarjeta.style.display = 'none';\n      tarjeta.dataset.tipo = '';\n    }\n  };\n\n  window.mostrarTarjetaLateral = function(tipo) {\n    const tarjeta = document.getElementById('tarjeta-lateral');\n    const titulo = document.getElementById('titulo-tarjeta-lateral');\n    const contenido = document.getElementById('contenido-tarjeta-lateral');\n    if (!tarjeta || !titulo || !contenido) return;\n\n    if (tarjeta.style.display === 'block' && tarjeta.dataset.tipo === tipo) {\n      tarjeta.style.display = 'none';\n      tarjeta.dataset.tipo = '';\n      return;\n    }\n\n    tarjeta.style.display = 'block';\n    tarjeta.dataset.tipo = tipo;\n\n    if (tipo === 'vision') {\n      titulo.textContent = 'Visi\u00f3n';\n      contenido.textContent = 'Consolidarse como un centro de informaci\u00f3n moderno, innovador y referente en la provincia de Esmeraldas, reconocido por la calidad de sus servicios, el uso estrat\u00e9gico de tecnolog\u00edas y su aporte al fortalecimiento del conocimiento. Aspiramos a ser un espacio din\u00e1mico, inclusivo y orientado a promover la cultura investigativa y el pensamiento cr\u00edtico en la formaci\u00f3n de profesionales competentes.';\n    } else if (tipo === 'mision') {\n      titulo.textContent = 'Misi\u00f3n';\n      contenido.textContent = 'Brindar servicios bibliogr\u00e1ficos, tecnol\u00f3gicos y acad\u00e9micos que faciliten el acceso equitativo a la informaci\u00f3n, apoyando los procesos de aprendizaje, docencia, investigaci\u00f3n y vinculaci\u00f3n de la Universidad T\u00e9cnica Luis Vargas Torres de Esmeraldas. La Biblioteca General se compromete a ofrecer recursos actualizados, espacios adecuados y atenci\u00f3n profesional que fomenten el desarrollo integral de la comunidad universitaria.';\n    }\n  };\n\n  window.cerrarTarjetaLateral = function() {\n    const tarjeta = document.getElementById('tarjeta-lateral');\n    if (!tarjeta) return;\n    tarjeta.style.display = 'none';\n    tarjeta.dataset.tipo = '';\n  };\n\n  \/\/ Cerrar panel y tarjeta al hacer clic fuera\n  document.addEventListener('click', function(e) {\n    const panel = document.getElementById('panel-lateral');\n    const fondo = document.getElementById('fondo-verde');\n    const tarjeta = document.getElementById('tarjeta-lateral');\n    const dentroPanel = e.target.closest('#panel-lateral');\n    const dentroTarjeta = e.target.closest('#tarjeta-lateral');\n    const boton = e.target.closest('.hamburguesa, .boton-cerrar');\n\n    if (!dentroPanel && !dentroTarjeta && !boton) {\n      if (panel) panel.style.right = '-260px';\n      if (fondo) {\n        fondo.style.opacity = '0';\n        setTimeout(() => { fondo.style.display = 'none'; }, 600);\n      }\n      if (tarjeta) tarjeta.style.display = 'none';\n    }\n  });\n}); \/\/ &#x1f511; cierre correcto del DOMContentLoaded\n<\/script>\n\n\n\n                    <style>\n                      .ajuste-encabezado {\n                        margin-top: -180px;\n                        \/* igual al height del header *\/\n                      }\n\n                      .carrusel {\n                        position: relative;\n                        width: 100%;\n                        height: 300px;\n                        margin-top: 215px;\n                        \/* \u2190 compensa la altura del header *\/\n                        overflow: hidden;\n                      }\n\n                      .carrusel img {\n                        width: 100%;\n                        height: 100%;\n                        object-fit: cover;\n                        display: none;\n                        transition: opacity 0.5s ease-in-out;\n                      }\n\n                      .carrusel img.active {\n                        display: block;\n                      }\n                    <\/style>\n                    <div class=\"ajuste-encabezado\">\n                      <!-- Aqu\u00ed va tu carrusel de im\u00e1genes -->\n                    <\/div>\n                    <div class=\"carrusel\">\n                      <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/11\/carrusel1.png\" class=\"active\" alt=\"Imagen 1\">\n                      <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/11\/carrusel2.png\" alt=\"Imagen 2\">\n\n                    <\/div>\n\n                    <script>\n                      document.addEventListener(\"DOMContentLoaded\", function() {\n                        const carrusel = document.querySelector('.carrusel');\n                        const imagenes = carrusel.querySelectorAll('img');\n                        let indice = 0;\n                        let intervalo;\n\n                        function moverCarrusel(direccion = 1) {\n                          imagenes[indice].classList.remove('active');\n                          indice = (indice + direccion + imagenes.length) % imagenes.length;\n                          imagenes[indice].classList.add('active');\n                        }\n\n                        \/\/ Avance autom\u00e1tico cada 5 segundos\n                        function iniciarAutoPlay() {\n                          intervalo = setInterval(() => moverCarrusel(1), 5000);\n                        }\n\n                        function detenerAutoPlay() {\n                          clearInterval(intervalo);\n                        }\n\n                        \/\/ Avanza cuando el usuario pasa el mouse\n                        carrusel.addEventListener('mouseenter', () => moverCarrusel(1));\n\n                        iniciarAutoPlay();\n                      });\n                    <\/script>\n\n<!-- Secci\u00f3n Capacitaciones -->\n<section class=\"capacitaciones-section\">\n  \n  <!-- Columna izquierda: t\u00edtulo + imagen -->\n  <div class=\"columna-izquierda\">\n    <h4 class=\"titulo-biblioteca\">Biblioteca<\/h4>\n    <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/CAPACITACIONES.png\" \n         alt=\"Capacitaciones\" \n         class=\"imagen-capacitacion\">\n  <\/div>\n\n  <!-- Columna derecha: contenido -->\n  <div class=\"columna-derecha\">\n    <h3 class=\"titulo-servicio\">Capacitaciones<\/h3>\n    <span class=\"etiqueta-gratuito\">Gratuito<\/span>\n    <p class=\"descripcion-servicio\">\n      Los programas de capacitaci\u00f3n est\u00e1n orientados a fortalecer las competencias de los usuarios en la b\u00fasqueda, selecci\u00f3n y manejo especializado de la informaci\u00f3n acad\u00e9mica y cient\u00edfica.\n    <\/p>\n  <\/div>\n<\/section>\n\n<!-- Estilos personalizados -->\n<style>\n  \/* Contenedor principal *\/\n  .capacitaciones-section {\n    width: 90%;\n    margin: 2rem 0 2rem auto;\n    font-family: sans-serif;\n    display: flex;\n    background-color: #008000; \/* verde institucional *\/\n    border: none;\n    border-radius: 0;\n    color: #fff;\n    min-height: 300px; \/* asegura altura fija *\/\n  }\n\n  \/* Columna izquierda *\/\n  .columna-izquierda {\n    flex: 0 0 35%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start; \/* controla alineaci\u00f3n horizontal *\/\n    justify-content: flex-start; \/* controla alineaci\u00f3n vertical *\/\n    padding: 1rem;\n  }\n\n\/* Texto \"Biblioteca\" *\/\n.titulo-biblioteca {\n  font-size: 1rem;\n  margin-bottom: 0.5rem;\n  text-align: left;\n  color: #fff;\n  margin-top: 20px;   \/* &#x1f53d; mueve hacia abajo *\/\n  margin-left: 30px;  \/* &#x1f53d; mueve hacia la derecha *\/\n}\n\n\n  \/* Imagen *\/\n  .imagen-capacitacion {\n    width: 70%; \/* &#x1f53d; reduce tama\u00f1o de la imagen *\/\n    height: auto;\n    object-fit: cover;\n    margin-left: 30px; \/* &#x1f53d; mueve hacia la derecha *\/\n  }\n\n  \/* Columna derecha *\/\n  .columna-derecha {\n    flex: 1;\n    padding: 1.5rem;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .titulo-servicio {\n    font-size: 1.6rem;\n    margin: 0 0 0.5rem;\n    text-align: left;\n    color: #fff;\n  }\n\n  .etiqueta-gratuito {\n    font-size: 1rem;\n    font-weight: bold;\n    margin-bottom: 1rem;\n    display: block;\n    color: #fff;\n  }\n\n  .descripcion-servicio {\n    font-size: 1rem;\n    line-height: 1.6;\n    text-align: justify;\n    margin: 0;\n    color: #fff;\n  }\n<\/style>\n\n<!-- Encabezado Biblioteca \/ Capacitaciones -->\n<div class=\"encabezado-superior\">\n  <a href=\"\/biblioteca\" class=\"enlace-gris fino\">Biblioteca<\/a> \/\n  <a href=\"\/capacitaciones\" class=\"enlace-verde negrita\">Capacitaciones<\/a>\n<\/div>\n\n<!-- Bloque: Descripci\u00f3n -->\n<section class=\"bloque\">\n  <div class=\"bloque-izquierda\"><h3>Descripci\u00f3n<\/h3><\/div>\n  <div class=\"bloque-derecha\">\n    <p>\n      La Biblioteca General ofrece programas de capacitaci\u00f3n dise\u00f1ados para fortalecer las competencias informacionales de la comunidad universitaria. Estas iniciativas buscan que estudiantes, docentes y personal administrativo desarrollen habilidades para localizar, evaluar y utilizar de manera efectiva fuentes de informaci\u00f3n acad\u00e9mica y cient\u00edfica.\n    <\/p>\n    <p>\n      A trav\u00e9s de talleres, asesor\u00edas y recursos formativos, se promueve el uso responsable y cr\u00edtico de la informaci\u00f3n, el manejo adecuado de herramientas digitales y la autonom\u00eda en los procesos de investigaci\u00f3n. Nuestro objetivo es acompa\u00f1ar a los usuarios en la construcci\u00f3n de conocimiento, impulsando su desempe\u00f1o acad\u00e9mico y su crecimiento profesional dentro y fuera de la Universidad T\u00e9cnica Luis Vargas Torres de Esmeraldas.\n    <\/p>\n  <\/div>\n<\/section>\n\n<!-- Bloque: Servicios -->\n<section class=\"bloque\">\n  <div class=\"bloque-izquierda\"><h3>Servicios<\/h3><\/div>\n  <div class=\"bloque-derecha\">\n    <div class=\"servicios-header\">\n      <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/CAPACITACIONES-LOGO.png\" \n           alt=\"Logo Capacitaciones\" \n           class=\"logo-capacitaciones\">\n      <h4>Capacitaciones<\/h4>\n    <\/div>\n    <p>Temas de capacitaci\u00f3n:<\/p>\n    <ul>\n      <li>Base de datos<\/li>\n      <li>Biblioteca digital<\/li>\n      <li>Cat\u00e1logo electr\u00f3nico<\/li>\n      <li>Repositorios<\/li>\n    <\/ul>\n  <\/div>\n<\/section>\n\n<!-- Bloque: Lugar -->\n<section class=\"bloque\">\n  <div class=\"bloque-izquierda\"><h3>Lugar<\/h3><\/div>\n  <div class=\"bloque-derecha\">\n    <p>\n      \u2192 Campus Nuevos Horizontes \u2013 Esmeraldas (Presencial)<br>\n      \u2192 Campus M\u00fatile \u2013 Esmeraldas (Presencial)<br>\n      \u2192 Campus La Concordia (Presencial)<br>\n      \u2192 Modalidad virtual (videollamada)\n    <\/p>\n  <\/div>\n<\/section>\n\n<!-- Bloque: Proceso -->\n<section class=\"bloque\">\n  <div class=\"bloque-izquierda\"><h3>Proceso<\/h3><\/div>\n  <div class=\"bloque-derecha\">\n    <p>Para solicitar una capacitaci\u00f3n, considere estos pasos:<\/p>\n    <ul>\n      <li>Env\u00ede un correo electr\u00f3nico a la biblioteca con el asunto: \u00abSolicitud de Capacitaci\u00f3n\u00bb.<\/li>\n      <li>Incluya en el cuerpo del correo la siguiente informaci\u00f3n:\n        <ul>\n          <li>Tem\u00e1tica requerida para la capacitaci\u00f3n.<\/li>\n          <li>Fecha y hora propuesta.<\/li>\n        <\/ul>\n      <\/li>\n      <li>Nuestro equipo revisar\u00e1 la solicitud y le responder\u00e1 con la confirmaci\u00f3n o ajustes necesarios para programar la sesi\u00f3n.<\/li>\n    <\/ul>\n  <\/div>\n<\/section>\n\n<!-- Bloque: Contacto -->\n<section class=\"bloque\">\n  <div class=\"bloque-izquierda\"><h3>Contacto<\/h3><\/div>\n  <div class=\"bloque-derecha\">\n    <p>Email: bibliotecageneral@utelvt.edu.ec<\/p>\n  <\/div>\n<\/section>\n\n<!-- Estilos personalizados -->\n<style>\n\/* Encabezado superior Biblioteca \/ Capacitaciones *\/\n.encabezado-superior {\n  width: 90%;\n  margin: 0 auto;\n  padding: 0.5rem 0;\n  text-align: left;\n}\n\n.enlace-gris {\n  font-size: 0.9rem;\n  color: #555;\n  text-decoration: none;\n  padding: 0.2rem 0.4rem;\n  border: 2px solid transparent;\n  transition: all 0.3s ease;\n  font-weight: 300;\n}\n\n.enlace-gris:hover {\n  background-color: #008000;\n  color: #fff;\n  border: 2px solid #008000;\n}\n\n.enlace-verde {\n  font-size: 0.9rem;\n  color: #008000;\n  text-decoration: none;\n  padding: 0.2rem 0.4rem;\n  border: 2px solid transparent;\n  transition: all 0.3s ease;\n  font-weight: normal;\n}\n\n.enlace-verde:hover {\n  background-color: #008000;\n  color: #fff;\n  border: 2px solid #008000;\n}\n\n.negrita {\n  font-weight: bold;\n}\n\n\/* Bloques con estilo *\/\n.bloque {\n  width: 90%;\n  margin: 2rem auto;\n  display: flex;\n  background: #fff;\n  background-image: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%), \n                    repeating-linear-gradient(45deg, rgba(0,128,0,0.05) 0px, rgba(0,128,0,0.05) 2px, transparent 2px, transparent 6px);\n  border-left: 6px solid #008000; \/* borde verde institucional *\/\n  box-shadow: 0 6px 14px rgba(0,0,0,0.12); \/* sombra m\u00e1s marcada *\/\n  border-radius: 12px;\n  padding: 2rem;\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.bloque:hover {\n  transform: translateY(-4px); \/* efecto de elevaci\u00f3n *\/\n  box-shadow: 0 10px 20px rgba(0,0,0,0.18);\n}\n\n\n.bloque-izquierda {\n  flex: 0 0 25%;\n  padding-right: 1rem;\n}\n\n.bloque-izquierda h3 {\n  font-size: 1.2rem;\n  color: #008000;\n  margin: 0.5rem 0 0;\n  border-bottom: 2px solid #008000; \/* subrayado verde *\/\n  padding-bottom: 0.3rem;\n}\n\n.bloque-derecha {\n  flex: 1;\n  margin-left: 3rem; \/* separa del t\u00edtulo *\/\n}\n\n\n.bloque-derecha p,\n.bloque-derecha ul {\n  font-size: 1rem;\n  line-height: 1.6;\n  margin: 0.5rem 0;\n  color: #000;\n}\n\n\/* Vi\u00f1etas nivel 2 (listas anidadas) *\/\n.bloque-derecha ul ul {\n  margin-top: 0.5rem;\n  margin-left: 1.5rem;\n}\n\n.bloque-derecha ul ul li {\n  padding-left: 1.2rem;\n}\n\n.bloque-derecha ul ul li::before {\n  content: \"\u2022\";\n  color: #ffffff;\n  display: inline-block;\n  width: 1rem;\n  margin-right: 0.5rem;\n  font-weight: bold;\n}\n\n\n\n\/* Logo de Capacitaciones *\/\n.servicios-header {\n  display: flex;\n  flex-direction: column; \/* logo arriba, texto abajo *\/\n  align-items: flex-start;\n  margin-bottom: 0.5rem;\n}\n\n.servicios-header h4 {\n  margin: 0.3rem 0 0;\n  font-size: 1.1rem;\n  color: #000;\n}\n\n.logo-capacitaciones {\n  height: 60px; \/* m\u00e1s grande *\/\n  margin-bottom: 0.3rem;\n}\n<\/style>\n\n\n\n\n                    <!-- Separaci\u00f3n visual entre secci\u00f3n y footer -->\n                    <div style=\"height: 3rem;\"><\/div>\n\n                    <style>\n                      \/* Contenedor principal *\/\n\n                      .footer-utlvte {\n                        background-color: #008000;\n                        color: #fff;\n                        padding: 2rem 0;\n                        font-family: sans-serif;\n                      }\n\n                      .footer-utlvte * {\n                        color: #fff !important;\n                      }\n\n                      .footer-grid {\n                        width: 80%;\n                        margin: 0 auto;\n                        display: grid;\n                        grid-template-columns: repeat(2, 1fr);\n                        \/* mantiene 2 columnas *\/\n                        gap: 2rem;\n                      }\n\n                      .footer-grid h4,\n                      .footer-grid p {\n                        margin: 0;\n                      }\n\n                      .footer-grid h4 {\n                        font-size: 1rem;\n                        margin-bottom: 1rem;\n                        text-align: left;\n                      }\n\n                      .footer-grid p {\n                        font-size: 0.9rem;\n                        line-height: 1.6;\n                        text-align: left;\n                        \/* se mantiene como estaba *\/\n                      }\n\n                      .footer-grid a {\n                        text-decoration: none;\n                      }\n\n                      .footer-grid a:hover {\n                        text-decoration: underline;\n                      }\n\n                      \/* Animaci\u00f3n acreditaci\u00f3n *\/\n\n                      .logo-acreditacion {\n                        width: 130px;\n                        \/* un poco m\u00e1s grande *\/\n                        margin: 0 auto 1rem auto;\n                        \/* centrado horizontal *\/\n                        margin-left: 90px;\n                        \/* mueve 10px hacia la izquierda *\/\n                        animation: bounce 3s infinite ease-in-out;\n                        display: block;\n                      }\n\n                      @keyframes bounce {\n                        0%,\n                        100% {\n                          transform: translateY(0);\n                        }\n                        50% {\n                          transform: translateY(-10px);\n                        }\n                      }\n\n                      \/* Redes con animaci\u00f3n *\/\n\n                      .social-icons {\n                        display: flex;\n                        gap: 1rem;\n                      }\n\n                      .social-icons a {\n                        display: inline-flex;\n                        align-items: center;\n                        justify-content: center;\n                        width: 48px;\n                        height: 48px;\n                        \/* m\u00e1s grandes *\/\n                        border-radius: 50%;\n                        transition: transform 0.25s ease, filter 0.25s ease, background-color 0.25s ease;\n                        background-color: rgba(255, 255, 255, 0.1);\n                      }\n\n                      .social-icons a:hover {\n                        transform: scale(1.15);\n                        filter: brightness(1.3);\n                      }\n\n                      .social-icons img {\n                        width: 36px;\n                        height: 36px;\n                        display: block;\n                      }\n\n                      .footer-copy {\n                        text-align: center;\n                        margin-top: 2rem;\n                        font-size: 0.8rem;\n                      }\n                    <\/style>\n\n                    <footer class=\"footer-utlvte\">\n                      <div class=\"footer-grid\">\n                        <!-- Columna 1 -->\n                        <div>\n                          <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/11\/ACREDITACION.png\" alt=\"Logo UTELVT\" class=\"logo-acreditacion\">\n                          <p>\n                            Universidad T\u00e9cnica Luis Vargas Torres de Esmeraldas\n                            <br> 1970 \u2013 2025 | 55 a\u00f1os de compromiso acad\u00e9mico\n                          <\/p>\n                          <h4 style=\"margin-top: 1.5rem;\">Contacto<\/h4>\n                          <p>Email: bibliotecageneral@utelvt.edu.ec<\/p>\n                        <\/div>\n\n                        <!-- Columna 2 -->\n                        <div>\n                          <h4>Campus UTELVT<\/h4>\n                          <p>\n                            Matriz: Barrio Nuevos Horizontes \u2013 Esmeraldas\n                            <br> La Concordia: Campus La Concordia\n                            <br> M\u00fatile (San Mateo): Campus M\u00fatile \u2013 Esmeraldas\n                          <\/p>\n\n                          <h4 style=\"margin: 1.5rem 0 1rem;\">S\u00edguenos<\/h4>\n                          <div class=\"social-icons\">\n                            <a href=\"https:\/\/www.facebook.com\/UniversidadTecnicaLuisVargasTorres\" target=\"_blank\">\n                              <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/11\/FACEBOOK-LOGO.png\" alt=\"Facebook\">\n                            <\/a>\n                            <a href=\"https:\/\/www.youtube.com\/@UTLVTE\" target=\"_blank\">\n                              <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/11\/YOUTUBE-LOGO.png\" alt=\"YouTube\">\n                            <\/a>\n                            <a href=\"https:\/\/www.instagram.com\/utlvte\" target=\"_blank\">\n                              <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/11\/INSTAGRAM-LOGO.png\" alt=\"Instagram\">\n                            <\/a>\n                          <\/div>\n                        <\/div>\n                      <\/div>\n\n                      <div class=\"footer-copy\">\n                        \u00a9 2025 Universidad T\u00e9cnica Luis Vargas Torres de Esmeraldas. Todos los derechos reservados.\n                      <\/div>\n                    <\/footer>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tu navegador no soporta video en HTML5. BIBLIOTECA GENERAL \u2715 \u27a4Visi\u00f3n \u27a4Misi\u00f3n \u27a4Admisi\u00f3n Admisi\u00f3n T\u00edtulo Aqu\u00ed ir\u00e1 el contenido institucional de la opci\u00f3n seleccionada. \u2715 Cerrar Biblioteca Capacitaciones Gratuito Los programas de capacitaci\u00f3n est\u00e1n orientados a fortalecer las competencias de los usuarios en la b\u00fasqueda, selecci\u00f3n y manejo especializado de la informaci\u00f3n acad\u00e9mica y cient\u00edfica. [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width-page.php","meta":{"footnotes":""},"class_list":["post-4953","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/utelvt.edu.ec\/biblioteca\/wp-json\/wp\/v2\/pages\/4953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/utelvt.edu.ec\/biblioteca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/utelvt.edu.ec\/biblioteca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/utelvt.edu.ec\/biblioteca\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/utelvt.edu.ec\/biblioteca\/wp-json\/wp\/v2\/comments?post=4953"}],"version-history":[{"count":20,"href":"https:\/\/utelvt.edu.ec\/biblioteca\/wp-json\/wp\/v2\/pages\/4953\/revisions"}],"predecessor-version":[{"id":5329,"href":"https:\/\/utelvt.edu.ec\/biblioteca\/wp-json\/wp\/v2\/pages\/4953\/revisions\/5329"}],"wp:attachment":[{"href":"https:\/\/utelvt.edu.ec\/biblioteca\/wp-json\/wp\/v2\/media?parent=4953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}