{"id":5049,"date":"2025-12-09T01:17:08","date_gmt":"2025-12-09T01:17:08","guid":{"rendered":"https:\/\/utelvt.edu.ec\/biblioteca\/?page_id=5049"},"modified":"2025-12-16T14:01:06","modified_gmt":"2025-12-16T14:01:06","slug":"estanterias-abiertas","status":"publish","type":"page","link":"https:\/\/utelvt.edu.ec\/biblioteca\/estanterias-abiertas\/","title":{"rendered":"ESTANTERIAS ABIERTAS"},"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<style>\n  .ajuste-encabezado {\n    margin-top: -180px; \/* igual al height del header *\/\n  }\n\n  .carrusel {\n    position: relative;\n    width: 100%;\n    height: 300px; \/* mismo alto que el carrusel *\/\n    margin-top: 215px; \/* compensa la altura del header *\/\n    overflow: hidden;\n  }\n\n  .carrusel video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover; \/* mantiene proporci\u00f3n y recorte *\/\n    display: block;\n  }\n\n  \/* Galer\u00eda miniatura dentro del contenedor *\/\n  .galeria-mini {\n    position: relative;\n    width: 80%;        \/* tama\u00f1o horizontal de la galer\u00eda *\/\n    height: 80%;       \/* tama\u00f1o vertical de la galer\u00eda *\/\n    margin-left: 30px; \/* mueve hacia la derecha *\/\n    margin-right: 20px;\/* mueve hacia la izquierda *\/\n    margin-bottom: 25px; \/* espacio abajo *\/\n    margin-top: 0;     \/* pegado arriba *\/\n    overflow: hidden;\n  }\n\n  .galeria-mini img,\n  .galeria-mini video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    opacity: 0;\n    transition: opacity 1s ease-in-out;\n    z-index: 1;\n  }\n\n  .galeria-mini img.active,\n  .galeria-mini video.active {\n    opacity: 1;\n  }\n\n  \/* Overlay al pasar el mouse *\/\n  .galeria-mini .overlay {\n    position: absolute;\n    inset: 0;\n    background: rgba(0,0,0,0.4);\n    color: #fff;\n    font-weight: bold;\n    font-size: 1.2rem;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    cursor: pointer;\n    z-index: 2;\n  }\n\n  .galeria-mini:hover .overlay {\n    opacity: 1;\n  }\n\n  \/* Modal Lightbox *\/\n  .lightbox {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(15, 15, 15, 0.8);\n    backdrop-filter: blur(6px);\n    display: none;\n    justify-content: center;\n    align-items: center;\n    z-index: 9999;\n    animation: fadeIn 0.4s ease;\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; transform: scale(0.95); }\n    to { opacity: 1; transform: scale(1); }\n  }\n\n  .lightbox-content {\n    position: relative;\n    width: 80%;\n    height: 80%;\n    background: #111;\n    border-radius: 12px;\n    box-shadow: 0 8px 30px rgba(0,0,0,0.6);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    padding: 10px;\n  }\n\n  .lightbox-content img,\n  .lightbox-content video {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n    margin: auto;\n    border-radius: 0;\n    transform: translateX(20px); \/* mueve un poco a la derecha *\/\n  }\n\n  \/* Bot\u00f3n cerrar *\/\n  .lightbox .cerrar {\n    position: absolute;\n    top: 15px;\n    right: 20px;\n    background: rgba(255,255,255,0.15);\n    border: none;\n    color: #fff;\n    font-size: 1.8rem;\n    cursor: pointer;\n    border-radius: 50%;\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.3s ease;\n  }\n  .lightbox .cerrar:hover {\n    background: rgba(255,255,255,0.35);\n  }\n\n  \/* Flechas navegaci\u00f3n *\/\n  .lightbox .flecha {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    background: rgba(255,255,255,0.15);\n    border: none;\n    color: #fff;\n    font-size: 2rem;\n    cursor: pointer;\n    border-radius: 50%;\n    width: 50px;\n    height: 50px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    transition: background 0.3s ease;\n  }\n  .lightbox .flecha:hover {\n    background: rgba(255,255,255,0.35);\n  }\n\n  .lightbox .flecha.izq {\n    left: 15px;\n    top: 48%;\n  }\n\n  .lightbox .flecha.der {\n    right: 15px;\n    top: 48%;\n  }\n<\/style>\n\n<!-- Carrusel con video portada -->\n<div class=\"ajuste-encabezado\"><\/div>\n<div class=\"carrusel\">\n  <video autoplay muted loop playsinline>\n    <source src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/ESTANTERIA-ABIERTA-VIDEO-PORTADA.mp4\" type=\"video\/mp4\">\n    Tu navegador no soporta la reproducci\u00f3n de video.\n  <\/video>\n<\/div>\n\n<!-- Secci\u00f3n Estanter\u00eda Abierta -->\n<section class=\"capacitaciones-section\">\n\n  <!-- Columna izquierda: t\u00edtulo + galer\u00eda -->\n  <div class=\"columna-izquierda\">\n    <h4 class=\"titulo-biblioteca\">Biblioteca<\/h4>\n\n    <div class=\"galeria-mini\" id=\"galeriaMiniEstanteria\">\n      <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/ESTANTERIA-ABIERTA-1-scaled.jpg\" class=\"active\" alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/ESTANTERIA-ABIERTA-2-scaled.jpg\" alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/ESTANTERIA-ABIERTA-scaled.jpg\" alt=\"\">\n      <video loop controls>\n        <source src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/ESTANTERIA-ABIERTA-VIDEO.mp4\" type=\"video\/mp4\">\n      <\/video>\n      <div class=\"overlay\">Ver m\u00e1s<\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Columna derecha: contenido -->\n  <div class=\"columna-derecha\">\n    <h3 class=\"titulo-servicio\">Estanter\u00eda Abierta<\/h3>\n    <span class=\"etiqueta-gratuito\">Gratuito<\/span>\n    <p class=\"descripcion-servicio\">\n      La estanter\u00eda abierta es un servicio que brinda a los usuarios la posibilidad de recorrer libremente los estantes de la biblioteca para identificar, revisar y elegir los materiales que necesiten. Este sistema favorece la b\u00fasqueda independiente de informaci\u00f3n,\n      permitiendo explorar el contenido disponible de manera directa y sin intermediaci\u00f3n.\n    <\/p>\n  <\/div>\n<\/section>\n\n<!-- Lightbox -->\n<div class=\"lightbox\" id=\"lightboxEstanteria\">\n  <button type=\"button\" class=\"cerrar\" id=\"btnCerrarEstanteria\" aria-label=\"Cerrar\">&times;<\/button>\n  <button type=\"button\" class=\"flecha izq\" id=\"btnPrevEstanteria\" aria-label=\"Anterior\">&#10095;<\/button>\n  <button type=\"button\" class=\"flecha der\" id=\"btnNextEstanteria\" aria-label=\"Siguiente\">&#10094;<\/button>\n  <div class=\"lightbox-content\" id=\"lightboxContentEstanteria\"><\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n  const miniImages = Array.from(document.querySelectorAll('#galeriaMiniEstanteria img'));\n  const miniVideo  = document.querySelector('#galeriaMiniEstanteria video');\n  const overlayBtn = document.querySelector('#galeriaMiniEstanteria .overlay');\n\n  const lightbox   = document.getElementById('lightboxEstanteria');\n  const content    = document.getElementById('lightboxContentEstanteria');\n  const btnCerrar  = document.getElementById('btnCerrarEstanteria');\n  const btnPrev    = document.getElementById('btnPrevEstanteria');\n  const btnNext    = document.getElementById('btnNextEstanteria');\n\n  \/\/ Lista completa para el lightbox (imagenes + video)\n  const allItems = [...miniImages, miniVideo];\n  let currentIndex = 0;\n\n  \/\/ \u00cdndice activo en miniaturas (solo im\u00e1genes)\n  function getActiveIndex() {\n    const i = miniImages.findIndex(el => el.classList.contains('active'));\n    return i >= 0 ? i : 0;\n  }\n\n  \/\/ Renderiza imagen o video en el lightbox\n  function renderLightbox() {\n    content.innerHTML = '';\n    const el = allItems[currentIndex];\n    if (el.tagName.toLowerCase() === 'img') {\n      const img = document.createElement('img');\n      img.src = el.src;\n      img.alt = 'Vista';\n      img.style.maxWidth = '100%';\n      img.style.maxHeight = '100%';\n      img.style.objectFit = 'contain';\n      content.appendChild(img);\n    } else {\n      const video = document.createElement('video');\n      video.controls = true;\n      video.autoplay = true;\n      video.style.maxWidth = '100%';\n      video.style.maxHeight = '100%';\n      video.style.objectFit = 'contain';\n      const source = document.createElement('source');\n      source.src  = el.querySelector('source').src;\n      source.type = 'video\/mp4';\n      video.appendChild(source);\n      content.appendChild(video);\n    }\n  }\n\n  \/\/ Abrir modal desde overlay\n  overlayBtn.addEventListener('click', () => {\n    currentIndex = getActiveIndex();\n    renderLightbox();\n    lightbox.style.display = 'flex';\n  });\n\n  \/\/ Cerrar modal\n  btnCerrar.addEventListener('click', () => {\n    lightbox.style.display = 'none';\n    content.innerHTML = '';\n  });\n\n  \/\/ Cerrar clic en fondo oscuro\n  lightbox.addEventListener('click', (e) => {\n    if (e.target === lightbox) {\n      btnCerrar.click();\n    }\n  });\n\n  \/\/ Flechas navegaci\u00f3n\n  btnPrev.addEventListener('click', () => {\n    currentIndex = (currentIndex - 1 + allItems.length) % allItems.length;\n    renderLightbox();\n  });\n\n  btnNext.addEventListener('click', () => {\n    currentIndex = (currentIndex + 1) % allItems.length;\n    renderLightbox();\n  });\n\n  \/\/ Teclado: Esc, \u2190, \u2192\n  document.addEventListener('keydown', (e) => {\n    if (lightbox.style.display === 'flex') {\n      if (e.key === 'Escape') btnCerrar.click();\n      if (e.key === 'ArrowLeft') btnPrev.click();\n      if (e.key === 'ArrowRight') btnNext.click();\n    }\n  });\n\n  \/\/ Auto-slide en miniatura (solo im\u00e1genes)\n  let i = getActiveIndex();\n  setInterval(() => {\n    miniImages[i].classList.remove('active');\n    i = (i + 1) % miniImages.length;\n    miniImages[i].classList.add('active');\n  }, 4000);\n});\n<\/script>\n\n\n                    <!-- Encabezado Biblioteca \/ Estanter\u00eda Abierta -->\n                    <div class=\"encabezado-superior\">\n                      <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/\" class=\"enlace-gris fino\">Biblioteca<\/a> \/\n                      <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/estanterias-abiertas\/\" class=\"enlace-verde negrita\">Estanter\u00eda Abierta<\/a>\n                    <\/div>\n\n                    <!-- Bloque: Descripci\u00f3n -->\n                    <section class=\"bloque\">\n                      <div class=\"bloque-izquierda\">\n                        <h3>Descripci\u00f3n<\/h3>\n                      <\/div>\n                      <div class=\"bloque-derecha\">\n                        <p>\n                          El servicio de estanter\u00edas abiertas permite a los usuarios acceder directamente a la colecci\u00f3n f\u00edsica de la biblioteca, recorriendo libremente cada secci\u00f3n para explorar los materiales disponibles. Esta modalidad facilita la consulta inmediata de libros,\n                          revistas, documentos y otros recursos, ofreciendo la oportunidad de seleccionar personalmente aquello que se ajuste a sus necesidades acad\u00e9micas o intereses personales.\n                        <\/p>\n                        <p>\n                          El acceso directo fomenta la b\u00fasqueda aut\u00f3noma de informaci\u00f3n, el descubrimiento de nuevos contenidos y un contacto m\u00e1s cercano con la diversidad del acervo bibliogr\u00e1fico. Adem\u00e1s, esta experiencia contribuye al desarrollo de habilidades como la selecci\u00f3n\n                          cr\u00edtica, la organizaci\u00f3n y el manejo independiente de la informaci\u00f3n.\n                        <\/p>\n                        <p>\n                          Las estanter\u00edas abiertas se consolidan as\u00ed como un espacio din\u00e1mico, accesible y pensado para enriquecer el aprendizaje, estimulando la curiosidad y fortaleciendo el v\u00ednculo entre los usuarios y los recursos que la biblioteca pone a su disposici\u00f3n.\n                        <\/p>\n                      <\/div>\n                    <\/section>\n\n                    <!-- Bloque: Servicios -->\n                    <section class=\"bloque\">\n                      <div class=\"bloque-izquierda\">\n                        <h3>Servicios<\/h3>\n                      <\/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\/ESTANTERIA-ABIERTA.png\" alt=\"Logo Estanter\u00eda Abierta\" class=\"logo-capacitaciones\">\n                          <h4>Estanter\u00eda Abierta<\/h4>\n                        <\/div>\n                        <p>Servicios disponibles:<\/p>\n                        <ul>\n                          <li>Explora de manera libre y aut\u00f3noma los libros bibliogr\u00e1ficos disponibles<\/li>\n                          <li>T\u00edtulos directamente desde los estantes y seleccionar aquellos recursos que mejor adapten a sus intereses y necesidades<\/li>\n                          <li>Libros y revistas, hasta mapas y recursos multimedia<\/li>\n                        <\/ul>\n                      <\/div>\n                    <\/section>\n\n                    <!-- Bloque: Lugar -->\n                    <section class=\"bloque\">\n                      <div class=\"bloque-izquierda\">\n                        <h3>Lugar<\/h3>\n                      <\/div>\n                      <div class=\"bloque-derecha\">\n                        <p>\n                          \u2192 Campus Nuevos Horizontes \u2013 Esmeraldas\n                          <br> \u2192 Campus M\u00fatile \u2013 Esmeraldas\n                          <br> \u2192 Campus La Concordia\n                        <\/p>\n                      <\/div>\n                    <\/section>\n\n                    <!-- Bloque: Contacto -->\n                    <section class=\"bloque\">\n                      <div class=\"bloque-izquierda\">\n                        <h3>Contacto<\/h3>\n                      <\/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 \/ Estanter\u00eda Abierta *\/\n\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                      \/* Tarjeta verde introductoria *\/\n\n                      .capacitaciones-section {\n                        width: 90%;\n                        margin: 2rem 0 2rem auto;\n                        font-family: sans-serif;\n                        display: flex;\n                        background-color: #008000;\n                        \/* verde institucional *\/\n                        border: none;\n                        border-radius: 0;\n                        color: #fff;\n                        min-height: 300px;\n                      }\n\n                      .columna-izquierda {\n                        flex: 0 0 35%;\n                        display: flex;\n                        flex-direction: column;\n                        align-items: flex-start;\n                        justify-content: flex-start;\n                        padding: 1rem;\n                      }\n\n                      .titulo-biblioteca {\n                        font-size: 1rem;\n                        margin-bottom: 0.5rem;\n                        text-align: left;\n                        color: #fff;\n                        margin-top: 20px;\n                        margin-left: 30px;\n                      }\n\n                      .imagen-capacitacion {\n                        width: 70%;\n                        height: auto;\n                        object-fit: cover;\n                        margin-left: 30px;\n                      }\n\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\n                      \/* Bloques con estilo *\/\n\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%), 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;\n                        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);\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);\n                        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);\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;\n                        padding-bottom: 0.3rem;\n                      }\n\n                      .bloque-derecha {\n                        flex: 1;\n                        margin-left: 3rem;\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\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: #008000;\n                        display: inline-block;\n                        width: 1rem;\n                        margin-right: 0.5rem;\n                        font-weight: bold;\n                      }\n\n                      \/* Logo de Estanter\u00eda Abierta *\/\n\n                      .servicios-header {\n                        display: flex;\n                        flex-direction: column;\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;\n                        \/* tama\u00f1o del logo *\/\n                        margin-bottom: 0.3rem;\n                      }\n                    <\/style>\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 Tu navegador no soporta la reproducci\u00f3n de video. Biblioteca Ver m\u00e1s Estanter\u00eda Abierta Gratuito La estanter\u00eda abierta es un servicio que brinda a los usuarios la posibilidad de recorrer [&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-5049","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/utelvt.edu.ec\/biblioteca\/wp-json\/wp\/v2\/pages\/5049","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=5049"}],"version-history":[{"count":8,"href":"https:\/\/utelvt.edu.ec\/biblioteca\/wp-json\/wp\/v2\/pages\/5049\/revisions"}],"predecessor-version":[{"id":5486,"href":"https:\/\/utelvt.edu.ec\/biblioteca\/wp-json\/wp\/v2\/pages\/5049\/revisions\/5486"}],"wp:attachment":[{"href":"https:\/\/utelvt.edu.ec\/biblioteca\/wp-json\/wp\/v2\/media?parent=5049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}