{"id":3967,"date":"2025-12-01T20:39:31","date_gmt":"2025-12-01T20:39:31","guid":{"rendered":"https:\/\/utelvt.edu.ec\/biblioteca\/?page_id=3967"},"modified":"2026-02-05T15:25:25","modified_gmt":"2026-02-05T15:25:25","slug":"biblioteca","status":"publish","type":"page","link":"https:\/\/utelvt.edu.ec\/biblioteca\/","title":{"rendered":"BIBLIOTECA GENERAL"},"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\/biblioteca\/noticias-biblioteca\/\" class=\"opcion-menu\">\n  <span class=\"flecha\" style=\"visibility: hidden;\">\u27a4<\/span><span>Noticias<\/span>\n<\/a>\n\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\/12\/PORTADA-BIBLIOTECA-1.png\" class=\"active\" alt=\"Imagen 1\">\n                      <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/PORTADA-BIBLIOTECA-3.png\" alt=\"Imagen 2\">\n                      <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/PORTADA-BIBLIOTECA-2.png\" alt=\"Imagen 3\">\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                    <section style=\"text-align: center; padding: 2rem 1rem; font-family: sans-serif;\">\n                      <h2 style=\"font-size: 2rem; margin-bottom: 0.5rem; color: black; font-weight: bold;\">\n                        Biblioteca UTELVT\n                      <\/h2>\n                      <p style=\"font-size: 1.2rem; margin: 0; color: black;\">\n                        Recursos Acad\u00e9micos y Servicios Digitales\n                      <\/p>\n                      <hr class=\"linea-verde\">\n                    <\/section>\n\n                    <style>\n                      .linea-verde {\n                        margin: 1rem auto 0 auto !important;\n                        border: none !important;\n                        height: 4px !important;\n                        background-color: #008000 !important;\n                        width: 500px !important;\n                        display: block !important;\n                      }\n                    <\/style>\n\n                    <style>\n.fila-servicios {\n  background-color: #008000;\n  padding: 2rem;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 1200px; \/* ancho m\u00e1ximo centrado *\/\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); \/* un poco m\u00e1s ancho *\/\n  gap: 1.5rem;\n  font-family: sans-serif;\n  border-radius: 10px;\n  justify-items: center;   \/* centra cada \u00edtem en su celda *\/\n  align-items: center;     \/* centra verticalmente *\/\n  place-content: center;   \/* &#x1f512; centra toda la grilla *\/\n  text-align: center;\n}\n\n.servicio {\n  text-decoration: none;\n  transition: transform 0.3s ease;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.servicio:hover {\n  transform: scale(1.05);\n}\n\n.servicio img {\n  width: 60px;\n  height: 60px;\n  object-fit: contain;\n  margin-bottom: 0.5rem;\n}\n\n.servicio p {\n  margin: 0;\n  font-weight: bold;\n  color: white;\n  font-size: 0.85rem;\n  text-transform: uppercase;\n  text-align: center;\n}\n\n\n                    <\/style>\n\n                    <div class=\"fila-servicios\">\n\n                      <a href=\"http:\/\/reservabiblioteca.utlvte.int\/site\/login\" class=\"servicio\">\n                        <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/SISTEMA-DE-GESTION.png\" alt=\"Sistema de gesti\u00f3n\">\n                        <p>Sistema de gesti\u00f3n<\/p>\n                      <\/a>\n\n                      <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/base-de-datos-suscritas\" class=\"servicio\">\n                        <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/RECURSOS-ELECTRONICOS-LOGO1.png\" alt=\"Recursos electr\u00f3nicos\">\n                        <p>Recursos electr\u00f3nicos<\/p>\n                      <\/a>\n\n                      <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/base-de-datos-suscritas\/#seccion-suscritos\" class=\"servicio\">\n                        <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/11\/BD-SUSCRITAS.png\" alt=\"BD Suscritas\">\n                        <p>Base de Datos Suscritas<\/p>\n                      <\/a>\n\n                      <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/base-de-datos-suscritas\/#seccion-interbibliotecarios\" class=\"servicio\">\n                        <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/11\/INTERBIBLIOTECARIO.png\" alt=\"Interbibliotecario\">\n                        <p>Interbibliotecario<\/p>\n                      <\/a>\n\n                      <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/base-de-datos-suscritas\/#seccion-gratuitas\" class=\"servicio\">\n                        <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/11\/BD-ABIERTAS.png\" alt=\"BD Gratuitas\">\n                        <p>Base de Datos Gratuitas<\/p>\n                      <\/a>\n\n                      <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/base-de-datos-suscritas\/#seccion-repositorios\" class=\"servicio\">\n                        <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/11\/REPOSITORIO.png\" alt=\"Repositorio Institucional\">\n                        <p>Repositorio Institucional<\/p>\n                      <\/a>\n\n                      <a href=\"https:\/\/app.compilatio.net\/app\/\" class=\"servicio\">\n                        <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/SISTEMAANTIPLAGIO-LOGO1.png\" alt=\"Sistema antiplagio\">\n                        <p>Sistema antiplagio<\/p>\n                      <\/a>\n\n                    <\/div>\n\n\n<section class=\"descripcion-general\">\n  <h2>Descripci\u00f3n General<\/h2>\n\n  <!-- Imagen flotada a la derecha -->\n  <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/SALAS-DE-LECTURA.png\" \n       alt=\"Salas de Lectura UTELVT\" class=\"imagen-descripcion\">\n\n  <!-- Texto que fluye a la izquierda y debajo -->\n  <p>\n    La Biblioteca General de la Universidad T\u00e9cnica Luis Vargas Torres de Esmeraldas ofrece a la comunidad universitaria un conjunto integral de recursos f\u00edsicos y digitales dise\u00f1ados para apoyar los procesos de aprendizaje, investigaci\u00f3n y formaci\u00f3n profesional.\n  <\/p>\n  <p>\n    En su infraestructura f\u00edsica, la biblioteca dispone de salas de lectura equipadas con computadoras, conexi\u00f3n Wi-Fi y espacios adecuados para el estudio individual. Cuenta tambi\u00e9n con un \u00e1rea infantil destinada a ni\u00f1as y ni\u00f1os desde los 8 a\u00f1os, pensada para fomentar la lectura y el desarrollo creativo. Los usuarios pueden acceder libremente a la colecci\u00f3n a trav\u00e9s del servicio de estanter\u00edas abiertas, que permite explorar y seleccionar directamente los materiales bibliogr\u00e1ficos disponibles.\n  <\/p>\n  <p>\n    La biblioteca complementa estos servicios presenciales con un s\u00f3lido ecosistema de recursos digitales. A trav\u00e9s de eLibro, los usuarios pueden consultar libros electr\u00f3nicos con herramientas avanzadas como lectura en voz alta, notas, subrayados, descarga de contenido para uso offline, referencias bibliogr\u00e1ficas autom\u00e1ticas y b\u00fasqueda r\u00e1pida en diccionarios y mapas. Asimismo, la Biblioteca Digital Magisterio ofrece contenido especializado en educaci\u00f3n y pedagog\u00eda, disponible en l\u00ednea las 24 horas, con acceso a libros, revistas y materiales acad\u00e9micos pensados para el desarrollo docente y estudiantil.\n  <\/p>\n  <p>\n    Como parte de sus servicios de cooperaci\u00f3n bibliotecaria, la instituci\u00f3n cuenta con acceso a redes interbibliotecarias como REDBAALC y REBUEP, que ampl\u00edan el alcance de consulta y recuperaci\u00f3n de informaci\u00f3n. Adem\u00e1s, se ponen a disposici\u00f3n varias bases de datos de libre acceso que fortalecen la investigaci\u00f3n acad\u00e9mica, entre ellas: Google Acad\u00e9mico, SciELO, Dialnet, DOAJ, IICA y El Libro Total.\n  <\/p>\n  <p>\n    La combinaci\u00f3n de estos recursos f\u00edsicos y virtuales garantiza a estudiantes, docentes e investigadores un acceso amplio, actualizado y confiable a la informaci\u00f3n. El equipo bibliotecario ofrece acompa\u00f1amiento y asesor\u00eda personalizada para orientar en la b\u00fasqueda, uso y organizaci\u00f3n de los recursos disponibles, promoviendo el aprendizaje aut\u00f3nomo, la investigaci\u00f3n y el desarrollo acad\u00e9mico dentro de la universidad.\n  <\/p>\n  <p><strong>Horarios:<\/strong><br>Lunes a viernes de 08h00 a 17h00.<\/p>\n<\/section>\n\n<style>\n.descripcion-general {\n  width: 80%;              \/* ocupa el 80% *\/\n  margin: 2rem auto;       \/* centrado *\/\n  font-family: sans-serif;\n  line-height: 1.6;\n  text-align: justify;\n  color: #000000;          \/* &#x1f511; texto negro *\/\n}\n\n.descripcion-general h2 {\n  color: #008000;          \/* verde institucional *\/\n  margin-bottom: 1rem;\n  text-align: left;        \/* &#x1f511; t\u00edtulo alineado a la izquierda *\/\n}\n\n.imagen-descripcion {\n  float: right;            \/* &#x1f511; coloca la imagen a la derecha *\/\n  max-width: 400px;        \/* tama\u00f1o moderado *\/\n  margin: 0 0 1rem 1.5rem; \/* espacio con el texto *\/\n  height: auto;\n  box-shadow: 0 4px 12px rgba(0,0,0,0.2); \/* sombra elegante *\/\n}\n\n.contenedor-descripcion {\n  display: flex;\n  flex-direction: column;  \/* &#x1f511; imagen arriba, texto debajo *\/\n  align-items: center;\n}\n\n.texto-descripcion {\n  width: 100%;\n  text-align: justify;\n}\n.descripcion-general p {\n  color: #000000;          \/* &#x1f511; fuerza el texto en negro *\/\n}\n\n<\/style>\n\n\n\n\n                    <!-- T\u00edtulo FACULTADES -->\n<section id=\"facultades\" style=\"\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgba(255,255,255,0.0); \/* fondo transparente *\/\n  padding: 1.5rem 0;\n  margin-top: 1rem;\n\">\n  <h2 style=\"\n    font-size: 2rem;\n    color: #008000; \/* verde institucional *\/\n    margin: 0;\n    font-weight: 700;\n    font-family: 'Segoe UI', sans-serif;\n    letter-spacing: 1px;\n    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); \/* contorno suave *\/\n    text-transform: uppercase;\n  \">\n    FACULTADES\n  <\/h2>\n<\/section>\n\n\n                    <style>\n                      .tarjeta-catalogos {\n                        background-color: #f9f9f9;\n                        border-radius: 12px;\n                        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);\n                        padding: 2rem;\n                        width: 95%;\n                        margin: 2rem auto;\n                        font-family: sans-serif;\n                        border-left: 6px solid #008000;\n                        position: relative;\n                      }\n\n                      .contenido-catalogos h2 {\n                        font-size: 1.4rem;\n                        color: #0b1f3f;\n                        margin-bottom: 0.25rem;\n                        font-family: sans-serif;\n                      }\n\n                      .contenido-catalogos h2::after {\n                        content: \"\";\n                        display: block;\n                        width: 60px;\n                        height: 3px;\n                        background-color: #008000;\n                        margin-top: 6px;\n                      }\n\n                      .contenido-catalogos .descripcion {\n                        font-size: 1rem;\n                        color: #333;\n                        margin-top: 0.6rem;\n                        line-height: 1.7;\n                        text-align: justify;\n                      }\n\n                      \/* Flecha principal (grande) *\/\n\n                      .chevron-flecha {\n                        width: 50px;\n                        height: auto;\n                        display: block;\n                        margin: 1.2rem auto 0 auto;\n                        cursor: pointer;\n                        animation: flechaBajaPrincipal 1.6s infinite;\n                        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));\n                      }\n\n                      \/* Contenedores de flechas internas *\/\n\n                      .flecha-expandir-card,\n                      .flecha-cerrar-card {\n                        height: 70px;\n                        min-height: 70px;\n                        max-height: 70px;\n                        background-color: #008000;\n                        display: flex;\n                        justify-content: center;\n                        align-items: center;\n                      }\n\n                      .chevron-flecha-card {\n                        width: 28px !important;\n                        max-width: 28px !important;\n                        height: auto !important;\n                        flex-shrink: 0;\n                        cursor: pointer;\n                        animation: flechaBajaCard 1.6s infinite;\n                        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));\n                      }\n\n                      \/* Animaciones *\/\n\n                      @keyframes flechaBajaPrincipal {\n                        0%,\n                        100% {\n                          transform: translateY(0);\n                        }\n                        50% {\n                          transform: translateY(10px);\n                        }\n                      }\n\n                      @keyframes flechaBajaCard {\n                        0%,\n                        100% {\n                          transform: translateY(0);\n                        }\n                        50% {\n                          transform: translateY(4px);\n                        }\n                      }\n\n                      \/* Grid de facultades *\/\n\n.facultades-grid {\n  display: none;   \/* &#x1f511; oculto al cargar *\/\n  margin-top: 1.5rem;\n  grid-template-columns: repeat(4, minmax(220px, 1fr));\n  gap: 1.5rem;\n  align-items: start;        \/* cada tarjeta crece independiente *\/\n  grid-auto-rows: auto;      \/* altura autom\u00e1tica por tarjeta *\/\n}\n\n\n                      @media (max-width: 1200px) {\n                        .facultades-grid {\n                          grid-template-columns: repeat(3, minmax(220px, 1fr));\n                        }\n                      }\n\n                      @media (max-width: 900px) {\n                        .facultades-grid {\n                          grid-template-columns: repeat(2, minmax(220px, 1fr));\n                        }\n                      }\n\n                      @media (max-width: 600px) {\n                        .facultades-grid {\n                          grid-template-columns: 1fr;\n                        }\n                      }\n\n                      \/* Tarjeta de facultad *\/\n\n                      .facultad-card {\n                        background: #008000;\n                        border-radius: 16px;\n                        overflow: hidden;\n                        color: #fff;\n                        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n                        transition: transform 0.3s ease, box-shadow 0.3s ease;\n                      }\n\n                      .facultad-card:hover {\n                        transform: translateY(-4px);\n                        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);\n                      }\n\n                      \/* Contenedor imagen + subt\u00edtulo *\/\n\n                      .imagen-subtitulo-wrapper {\n                        background-color: #008000;\n                        border-radius: 16px;\n                        overflow: hidden;\n                        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);\n                      }\n\n                      .imagen-subtitulo-wrapper img {\n                        width: 100%;\n                        display: block;\n                        border: 8px solid #008000;\n                        \/* borde verde grueso *\/\n                        border-radius: 0;\n                        border-radius: 16px;\n                        \/* esquinas redondeadas *\/\n                        object-fit: cover;\n                      }\n\n                      .imagen-subtitulo-wrapper .subtitulo {\n                        font-size: 1rem;\n                        \/* tama\u00f1o uniforme *\/\n                        font-weight: 600;\n                        background: rgba(0, 0, 0, 0.2);\n                        color: #fff;\n                        margin: 0;\n                        \/* centrado absoluto *\/\n                        display: flex;\n                        justify-content: center;\n                        align-items: center;\n                        text-align: center;\n                        \/* altura fija para todos *\/\n                        height: 116px;\n                        \/* ajustado al texto m\u00e1s largo *\/\n                        padding: 0 1rem;\n                        \/* espacio horizontal para textos largos *\/\n                        box-sizing: border-box;\n                      }\n\n                      \/* Lista de carreras *\/\n\n  .carreras-lista {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.35s ease;\n  display: flex;\n  flex-direction: column;\n}\n\n                      .carreras-lista a {\n                        position: relative;\n                        display: block;\n                        width: 100%;\n                        padding: 1rem;\n                        background-color: #006600;\n                        color: #fff;\n                        font-weight: 600;\n                        text-decoration: none;\n                        box-shadow: inset 0 -1px rgba(255, 255, 255, 0.2);\n                        transition: background-color 0.3s ease;\n                        overflow: hidden;\n                      }\n\n                      .carreras-lista a::before {\n                        content: \"\";\n                        position: absolute;\n                        top: 0;\n                        left: -100%;\n                        width: 100%;\n                        height: 100%;\n                        background: rgba(255, 255, 255, 0.2);\n                        transform: skewX(-20deg);\n                        transition: left 0.5s ease;\n                      }\n\n                      .carreras-lista a:hover::before {\n                        left: 100%;\n                      }\n\n                      .carreras-lista a:hover {\n                        background-color: #004d00;\n                      }\n\n                      .flecha-cierre-catalogo {\n                        text-align: center;\n                        margin-top: 1.5rem;\n                      }\n                    <\/style>\n\n                    <div class=\"tarjeta-catalogos\" id=\"catalogo\">\n                      <div class=\"contenido-catalogos\">\n                        <h2>CAT\u00c1LOGO DE LIBROS F\u00cdSICOS<\/h2>\n                        <p class=\"descripcion\">\n                          Esta secci\u00f3n re\u00fane los t\u00edtulos disponibles en nuestras bibliotecas f\u00edsicas, organizados por facultad y carrera. Aqu\u00ed encontrar\u00e1s libros impresos de referencia, obras fundamentales y textos especializados que respaldan cada plan de estudios. Selecciona\n                          una facultad para desplegar sus carreras y acceder directamente al cat\u00e1logo de libros que corresponde a cada \u00e1rea de formaci\u00f3n.\n                        <\/p>\n                      <\/div>\n\n\n<!-- Buscador institucional tipo bot\u00f3n -->\n<div class=\"buscador-wrapper\">\n  <a href=\"http:\/\/reservabiblioteca.utlvte.int\/libro\/catalogo\" class=\"buscador-btn\">\n    <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/LUPA.png\" alt=\"Buscar\" class=\"icono-lupa\">\n    <span>Buscar en el cat\u00e1logo<\/span>\n  <\/a>\n<\/div>\n\n<style>\n.buscador-wrapper {\n  display: flex;\n  justify-content: flex-start; \/* &#x1f511; alineado a la izquierda *\/\n  margin-top: 1rem;\n}\n\n.buscador-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.6rem;\n  background: #008000; \/* verde institucional *\/\n  color: #fff;\n  font-weight: 600;\n  font-family: 'Segoe UI', sans-serif;\n  text-decoration: none;\n  padding: 0.6rem 1rem; \/* &#x1f511; m\u00e1s peque\u00f1o *\/\n  border-radius: 25px;\n  box-shadow: 0 3px 8px rgba(0,0,0,0.2);\n  transition: all 0.3s ease;\n}\n\n.buscador-btn:hover {\n  background: #006600; \/* verde m\u00e1s oscuro al hover *\/\n  transform: scale(1.03);\n  box-shadow: 0 5px 12px rgba(0,0,0,0.3);\n}\n\n.icono-lupa {\n  width: 18px;  \/* &#x1f511; tama\u00f1o peque\u00f1o *\/\n  height: auto;\n}\n<\/style>\n\n\n\n\n                      <!-- Flecha principal -->\n                      <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FLECHA-2-scaled.png\" alt=\"Expandir cat\u00e1logo por facultades\" class=\"chevron-flecha\" id=\"flechaExpandir\" onclick=\"toggleFacultades(true)\">\n\n                      <!-- Contenedor expandible -->\n                      <div class=\"facultades-grid\" id=\"facultadesGrid\">\n\n                        <!-- FACI -->\n                        <div class=\"facultad-card\" id=\"faciCard\">\n                          <div class=\"imagen-subtitulo-wrapper\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FACULTAD-FACI.jpg\" alt=\"FACI\">\n                            <div class=\"subtitulo\">Conoce los libros de la Facultad de Ingenier\u00edas<\/div>\n                          <\/div>\n                          <div class=\"flecha-expandir-card\" id=\"contenedorExpandirFaci\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FLECHA-TARJETAS-ABAJO-BLANCA.png\" alt=\"Expandir carreras FACI\" class=\"chevron-flecha-card\" id=\"flechaFaciExpandir\" onclick=\"toggleFaci(true)\">\n                          <\/div>\n                          <div class=\"carreras-lista\" id=\"faciCarreras\">\n                            <a href=\"LINK_MECANICA\">Mec\u00e1nica<\/a>\n                            <a href=\"LINK_ELECTRICIDAD\">Electricidad<\/a>\n                            <a href=\"LINK_QUIMICA\">Ingenier\u00eda Qu\u00edmica<\/a>\n                            <a href=\"LINK_TI\">Tecnolog\u00edas de la Informaci\u00f3n<\/a>\n                          <\/div>\n                          <div class=\"flecha-cerrar-card\" id=\"contenedorCerrarFaci\" style=\"display:none;\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FLECHA-TARJETAS-ARRIBA-BLANCA.png\" alt=\"Cerrar carreras FACI\" class=\"chevron-flecha-card\" id=\"flechaFaciCerrar\" onclick=\"toggleFaci(false)\">\n                          <\/div>\n                        <\/div>\n\n                        <!-- FACAE -->\n                        <div class=\"facultad-card\" id=\"facaeCard\">\n                          <div class=\"imagen-subtitulo-wrapper\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FACULTAD-FACAE.jpg\" alt=\"FACAE\">\n                            <div class=\"subtitulo\">Conoce los libros de la Facultad de Ciencias Administrativas y Econ\u00f3micas<\/div>\n                          <\/div>\n                          <div class=\"flecha-expandir-card\" id=\"contenedorExpandirFacae\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FLECHA-TARJETAS-ABAJO-BLANCA.png\" alt=\"Expandir carreras FACAE\" class=\"chevron-flecha-card\" id=\"flechaFacaeExpandir\" onclick=\"toggleFacae(true)\">\n                          <\/div>\n                          <div class=\"carreras-lista\" id=\"facaeCarreras\">\n                            <a href=\"LINK_ADMINISTRACION\">Administraci\u00f3n de Empresas<\/a>\n                            <a href=\"LINK_CONTABILIDAD\">Contabilidad y Auditor\u00eda<\/a>\n                            <a href=\"LINK_COMERCIO\">Comercio<\/a>\n                          <\/div>\n                          <div class=\"flecha-cerrar-card\" id=\"contenedorCerrarFacae\" style=\"display:none;\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FLECHA-TARJETAS-ARRIBA-BLANCA.png\" alt=\"Cerrar carreras FACAE\" class=\"chevron-flecha-card\" id=\"flechaFacaeCerrar\" onclick=\"toggleFacae(false)\">\n                          <\/div>\n                        <\/div>\n\n                        <!-- FACAP -->\n                        <div class=\"facultad-card\" id=\"facapCard\">\n                          <div class=\"imagen-subtitulo-wrapper\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FACULTAD-FACAP.jpg\" alt=\"FACAP\">\n                            <div class=\"subtitulo\">Conoce los libros de la Facultad de Ciencias Agropecuarias<\/div>\n                          <\/div>\n                          <div class=\"flecha-expandir-card\" id=\"contenedorExpandirFacap\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FLECHA-TARJETAS-ABAJO-BLANCA.png\" alt=\"Expandir carreras FACAP\" class=\"chevron-flecha-card\" id=\"flechaFacapExpandir\" onclick=\"toggleFacap(true)\">\n                          <\/div>\n                          <div class=\"carreras-lista\" id=\"facapCarreras\">\n                            <a href=\"LINK_AGRONOMIA\">Agronom\u00eda<\/a>\n                            <a href=\"LINK_ZOOTECNIA\">Zootecnia<\/a>\n                            <a href=\"LINK_Ingenieria_forestal\">Ingenier\u00eda Forestal<\/a>\n                          <\/div>\n                          <div class=\"flecha-cerrar-card\" id=\"contenedorCerrarFacap\" style=\"display:none;\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FLECHA-TARJETAS-ARRIBA-BLANCA.png\" alt=\"Cerrar carreras FACAP\" class=\"chevron-flecha-card\" id=\"flechaFacapCerrar\" onclick=\"toggleFacap(false)\">\n                          <\/div>\n                        <\/div>\n\n                        <!-- FACPED -->\n                        <div class=\"facultad-card\" id=\"facpedCard\">\n                          <div class=\"imagen-subtitulo-wrapper\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FACULTAD-FACPED.jpg\" alt=\"FACPED\">\n                            <div class=\"subtitulo\">Conoce los libros de la Facultad de Ciencias Pedag\u00f3gicas<\/div>\n                          <\/div>\n                          <div class=\"flecha-expandir-card\" id=\"contenedorExpandirFacped\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FLECHA-TARJETAS-ABAJO-BLANCA.png\" alt=\"Expandir carreras FACPED\" class=\"chevron-flecha-card\" id=\"flechaFacpedExpandir\" onclick=\"toggleFacped(true)\">\n                          <\/div>\n                          <div class=\"carreras-lista\" id=\"facpedCarreras\">\n                            <a href=\"PEDAGOG\u00cdA DE LAS MATEM\u00c1TICAS Y LA F\u00cdSICA\">Pedagog\u00eda de las Matem\u00e1ticas y la F\u00edsica<\/a>\n                            <a href=\"PEDAGOG\u00cdA DE LA QU\u00cdMICA Y BIOLOG\u00cdA\">Pedagog\u00eda de la Qu\u00edmica y Biolog\u00eda<\/a>                            \n                            <a href=\"PEDAGOG\u00cdA DE LA LENGUA Y LITERATURA\">Pedagog\u00eda de la Lengua y Literatura<\/a>                            \n                            <a href=\"PEDAGOG\u00cdA DE LA ACTIVIDAD F\u00cdSICA Y DEPORTE\">Pedagog\u00eda de la Actividad F\u00edsica<\/a>\n                            <a href=\"LICENCIATURA EN EDUCACI\u00d3N INICIAL\">Licenciatura en Educaci\u00f3n Inicial<\/a>\n                            <a href=\"LICENCIATURA EN EDUCACI\u00d3N B\u00c1SICA\">Licenciatura en Educaci\u00f3n B\u00e1sica<\/a>\n                          <\/div>\n                          <div class=\"flecha-cerrar-card\" id=\"contenedorCerrarFacped\" style=\"display:none;\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FLECHA-TARJETAS-ARRIBA-BLANCA.png\" alt=\"Cerrar carreras FACPED\" class=\"chevron-flecha-card\" id=\"flechaFacpedCerrar\" onclick=\"toggleFacped(false)\">\n                          <\/div>\n                        <\/div>\n\n                        <!-- FACSOS -->\n                        <div class=\"facultad-card\" id=\"facsosCard\">\n                          <div class=\"imagen-subtitulo-wrapper\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FACULTAD-FACSOS.jpg\" alt=\"FACSOS\">\n                            <div class=\"subtitulo\">Conoce los libros de la Facultad de Ciencias Sociales<\/div>\n                          <\/div>\n                          <div class=\"flecha-expandir-card\" id=\"contenedorExpandirFacsos\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FLECHA-TARJETAS-ABAJO-BLANCA.png\" alt=\"Expandir carreras FACSOS\" class=\"chevron-flecha-card\" id=\"flechaFacsosExpandir\" onclick=\"toggleFacsos(true)\">\n                          <\/div>\n                          <div class=\"carreras-lista\" id=\"facsosCarreras\">\n                            <a href=\"LINK_Turismo\">Turismo<\/a>\n                            <a href=\"LINK_Sociolog\u00eda\">Sociolog\u00eda<\/a>\n                            <a href=\"LINK_Trabajo Social\">Trabajo Social<\/a>\n                          <\/div>\n    \n  <!-- CORREGIDO: img correctamente cerrado -->\n  <div class=\"flecha-cerrar-card\" id=\"contenedorCerrarFacsos\" style=\"display:none;\">\n    <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FLECHA-TARJETAS-ARRIBA-BLANCA.png\"\n         alt=\"Cerrar carreras FACSOS\"\n         class=\"chevron-flecha-card\"\n         id=\"flechaFacsosCerrar\"\n         onclick=\"toggleFacsos(false)\">\n  <\/div>\n<\/div>\n\n\n                        <!-- La Concordia -->\n                        <div class=\"facultad-card\" id=\"laconcordiaCard\">\n                          <div class=\"imagen-subtitulo-wrapper\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FACULTAD-LA-CONCORDIA.jpg\" alt=\"La Concordia\">\n                            <div class=\"subtitulo\">Conoce los libros de la Extensi\u00f3n La Concordia<\/div>\n                          <\/div>\n                          <div class=\"flecha-expandir-card\" id=\"contenedorExpandirLaconcordia\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FLECHA-TARJETAS-ABAJO-BLANCA.png\" alt=\"Expandir carreras La Concordia\" class=\"chevron-flecha-card\" id=\"flechaLaconcordiaExpandir\" onclick=\"toggleLaconcordia(true)\">\n                          <\/div>\n                          <div class=\"carreras-lista\" id=\"laconcordiaCarreras\">\n                            <a href=\"LINK_ADMINISTRACION\">Administraci\u00f3n de Empresas<\/a>\n                            <a href=\"LINK_CONTABILIDAD\">Contabilidad y Auditoria<\/a>\n                            <a href=\"LINK_AGRONOMIA\">Tecnolog\u00edas de la Informaci\u00f3n<\/a>\n                          <\/div>\n                          <div class=\"flecha-cerrar-card\" id=\"contenedorCerrarLaconcordia\" style=\"display:none;\">\n                            <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FLECHA-TARJETAS-ARRIBA-BLANCA.png\" alt=\"Cerrar carreras La Concordia\" class=\"chevron-flecha-card\" id=\"flechaLaconcordiaCerrar\" onclick=\"toggleLaconcordia(false)\">\n                          <\/div>\n                        <\/div>\n                      <\/div>\n\n                      <!-- Flecha cerrar cat\u00e1logo completo -->\n                      <div class=\"flecha-cierre-catalogo\">\n                        <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/FLECHA-VOLTEADA1-scaled.png\" alt=\"Cerrar cat\u00e1logo\" class=\"chevron-flecha\" id=\"flechaCerrar\" style=\"display:none; margin-top:2rem;\" onclick=\"toggleFacultades(false)\">\n                      <\/div>\n                    <\/div>\n\n                    <script>\n                      function toggleFacultades(expandir) {\n                        const grid = document.getElementById(\"facultadesGrid\");\n                        const flechaExpandir = document.getElementById(\"flechaExpandir\");\n                        const flechaCerrar = document.getElementById(\"flechaCerrar\");\n                        if (expandir) {\n                          grid.style.display = \"grid\";\n                          flechaExpandir.style.display = \"none\";\n                          flechaCerrar.style.display = \"block\";\n                        } else {\n                          grid.style.display = \"none\";\n                          flechaExpandir.style.display = \"block\";\n                          flechaCerrar.style.display = \"none\";\n                        }\n                      }\n\nfunction toggleFaci(expandir) {\n  const carreras = document.getElementById(\"faciCarreras\");\n  const contenedorExpandir = document.getElementById(\"contenedorExpandirFaci\");\n  const contenedorCerrar = document.getElementById(\"contenedorCerrarFaci\");\n\n  if (expandir) {\n    cerrarTodasLasFacultades(); \/\/ &#x1f511; primero cierra todas\n    carreras.style.maxHeight = \"400px\";\n    contenedorExpandir.style.display = \"none\";\n    contenedorCerrar.style.display = \"flex\";\n  } else {\n    carreras.style.maxHeight = \"0px\";\n    contenedorExpandir.style.display = \"flex\";\n    contenedorCerrar.style.display = \"none\";\n  }\n}\nfunction toggleFacae(expandir) {\n  const carreras = document.getElementById(\"facaeCarreras\");\n  const contenedorExpandir = document.getElementById(\"contenedorExpandirFacae\");\n  const contenedorCerrar = document.getElementById(\"contenedorCerrarFacae\");\n\n  if (expandir) {\n    cerrarTodasLasFacultades();\n    carreras.style.maxHeight = \"400px\";\n    contenedorExpandir.style.display = \"none\";\n    contenedorCerrar.style.display = \"flex\";\n  } else {\n    carreras.style.maxHeight = \"0px\";\n    contenedorExpandir.style.display = \"flex\";\n    contenedorCerrar.style.display = \"none\";\n  }\n}\nfunction toggleFacap(expandir) {\n  const carreras = document.getElementById(\"facapCarreras\");\n  const contenedorExpandir = document.getElementById(\"contenedorExpandirFacap\");\n  const contenedorCerrar = document.getElementById(\"contenedorCerrarFacap\");\n\n  if (expandir) {\n    cerrarTodasLasFacultades();\n    carreras.style.maxHeight = \"400px\";\n    contenedorExpandir.style.display = \"none\";\n    contenedorCerrar.style.display = \"flex\";\n  } else {\n    carreras.style.maxHeight = \"0px\";\n    contenedorExpandir.style.display = \"flex\";\n    contenedorCerrar.style.display = \"none\";\n  }\n}\nfunction toggleFacped(expandir) {\n  const carreras = document.getElementById(\"facpedCarreras\");\n  const contenedorExpandir = document.getElementById(\"contenedorExpandirFacped\");\n  const contenedorCerrar = document.getElementById(\"contenedorCerrarFacped\");\n\n  if (expandir) {\n    cerrarTodasLasFacultades();\n    carreras.style.maxHeight = \"400px\";\n    contenedorExpandir.style.display = \"none\";\n    contenedorCerrar.style.display = \"flex\";\n  } else {\n    carreras.style.maxHeight = \"0px\";\n    contenedorExpandir.style.display = \"flex\";\n    contenedorCerrar.style.display = \"none\";\n  }\n}\nfunction toggleFacsos(expandir) {\n  const carreras = document.getElementById(\"facsosCarreras\");\n  const contenedorExpandir = document.getElementById(\"contenedorExpandirFacsos\");\n  const contenedorCerrar = document.getElementById(\"contenedorCerrarFacsos\");\n\n  if (expandir) {\n    cerrarTodasLasFacultades();\n    carreras.style.maxHeight = \"400px\";\n    contenedorExpandir.style.display = \"none\";\n    contenedorCerrar.style.display = \"flex\";\n  } else {\n    carreras.style.maxHeight = \"0px\";\n    contenedorExpandir.style.display = \"flex\";\n    contenedorCerrar.style.display = \"none\";\n  }\n}\nfunction toggleLaconcordia(expandir) {\n  const carreras = document.getElementById(\"laconcordiaCarreras\");\n  const contenedorExpandir = document.getElementById(\"contenedorExpandirLaconcordia\");\n  const contenedorCerrar = document.getElementById(\"contenedorCerrarLaconcordia\");\n\n  if (expandir) {\n    cerrarTodasLasFacultades();\n    carreras.style.maxHeight = \"400px\";\n    contenedorExpandir.style.display = \"none\";\n    contenedorCerrar.style.display = \"flex\";\n  } else {\n    carreras.style.maxHeight = \"0px\";\n    contenedorExpandir.style.display = \"flex\";\n    contenedorCerrar.style.display = \"none\";\n  }\n}\n                      function cerrarTodasLasFacultades() {\n                        const todas = [{\n                            id: \"faciCarreras\",\n                            expandir: \"contenedorExpandirFaci\",\n                            cerrar: \"contenedorCerrarFaci\"\n                          },\n                          {\n                            id: \"facaeCarreras\",\n                            expandir: \"contenedorExpandirFacae\",\n                            cerrar: \"contenedorCerrarFacae\"\n                          },\n                          {\n                            id: \"facapCarreras\",\n                            expandir: \"contenedorExpandirFacap\",\n                            cerrar: \"contenedorCerrarFacap\"\n                          },\n                          {\n                            id: \"facpedCarreras\",\n                            expandir: \"contenedorExpandirFacped\",\n                            cerrar: \"contenedorCerrarFacped\"\n                          },\n                          {\n                            id: \"facsosCarreras\",\n                            expandir: \"contenedorExpandirFacsos\",\n                            cerrar: \"contenedorCerrarFacsos\"\n                          },\n                          {\n                            id: \"laconcordiaCarreras\",\n                            expandir: \"contenedorExpandirLaconcordia\",\n                            cerrar: \"contenedorCerrarLaconcordia\"\n                          }\n                        ];\n\n                        todas.forEach(fac => {\n                          document.getElementById(fac.id).style.maxHeight = \"0px\";\n                          document.getElementById(fac.expandir).style.display = \"flex\";\n                          document.getElementById(fac.cerrar).style.display = \"none\";\n                        });\n                      }\n                    <\/script>\n\n\n<section style=\"width: 95%; margin: 2rem auto; font-family: sans-serif;\">\n  <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;\">\n    \n    <!-- Columna izquierda -->\n    <div style=\"display: flex; flex-direction: column; justify-content: flex-start; height: 100%;\">\n      <div>\n        <h3 style=\"font-size: 1.4rem; color: #008000; margin-bottom: 0.75rem;\">Bases de datos cient\u00edficas<\/h3>\n        <p style=\"font-size: 1rem; line-height: 1.6; text-align: justify; margin-bottom: 1rem;\">\n          La Biblioteca Institucional UTELVT ofrece acceso a recursos especializados y multidisciplinarios con contenido cient\u00edfico-t\u00e9cnico: art\u00edculos de revistas, tesis de grado y posgrado, conferencias, libros, ponencias, im\u00e1genes, videos y m\u00e1s. Entre nuestras\n          bases suscritas se encuentran <strong>eLibro<\/strong> y <strong>Magisterio Editorial<\/strong>, accesibles con credenciales institucionales.\n        <\/p>\n        <!-- Bloque credenciales bajado -->\n       <p style=\"font-size: 0.95rem; line-height: 1.6; background: #f5f5f5; padding: 0.75rem 0.9rem; border-radius: 8px; margin-top: 2rem;\">\n  <strong>Acceso a eLibro<\/strong><br>\n  <strong>Usuario:<\/strong> Correo institucional (ej: ericka.nazareno@utelvt.edu.ec)<br>\n  <strong>Contrase\u00f1a:<\/strong> B+Documento de identidad (ej: B0803485241)<br>\n<\/p>\n\n<p style=\"font-size: 0.95rem; line-height: 1.6; background: #f5f5f5; padding: 0.75rem 0.9rem; border-radius: 8px; margin-top: 2rem;\">\n  <strong>Acceso a Magisterio Editorial<\/strong><br>\n  <strong>Usuario:<\/strong> UTELVT<br>\n  <strong>Contrase\u00f1a:<\/strong> Educacion123!<br>\n<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- Columna derecha -->\n    <div style=\"display: flex; flex-direction: column; justify-content: flex-start; height: 100%;\">\n      <div>\n        <h3 style=\"font-size: 1.4rem; color: #008000; margin-bottom: 0.75rem;\">Pr\u00e9stamos Interbibliotecarios<\/h3>\n        <p style=\"font-size: 1rem; line-height: 1.6; text-align: justify; margin-bottom: 1rem;\">\n          UTELVT participa en redes de cooperaci\u00f3n para facilitar el acceso a material bibliogr\u00e1fico no disponible localmente. A nivel nacional a trav\u00e9s de <strong>REBUEP<\/strong> y a nivel internacional mediante <strong>REDBAALC<\/strong>.\n        <\/p>\n      <\/div>\n      <div style=\"margin-top: 0.1rem;\">\n        <div style=\"display: flex; gap: 1rem;\">\n          <!-- Bloque REBUEP -->\n          <div style=\"display: flex; flex-direction: column; gap: 0.8rem; flex: 1;\">\n            <a href=\"https:\/\/www.rebuep.net\/\" class=\"boton-verde vertical\">\n              <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/11\/REBUEP-LOGO.png\" alt=\"REBUEP\" class=\"logo-boton\">\n              <span>ACCEDER A REBUEP<\/span>\n            <\/a>\n            <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/1.-Convenio-con-la-RED.pdf\" class=\"boton-verde vertical\">\n              <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/11\/REBUEP-LOGO.png\" alt=\"REBUEP\" class=\"logo-boton\">\n              <span>VER CONVENIO CON REBUEP<\/span>\n            <\/a>\n          <\/div>\n\n          <!-- Bloque REDBAALC -->\n          <div style=\"flex: 1;\">\n            <a href=\"https:\/\/redbaalc.udualc.org\/\" class=\"boton-verde vertical\">\n              <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/11\/RED-BAALC-LOGO.png\" alt=\"REDBAALC\" class=\"logo-boton\">\n              <span>ACCEDER A REDBAALC<\/span>\n            <\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n\n<style>\n.boton-verde {\n  background-color: #ffffff !important;   \/* &#x1f511; siempre blanco *\/\n  color: #008000 !important;              \/* &#x1f511; texto verde *\/\n  text-decoration: none;\n  font-weight: bold;\n  padding: 1rem;\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.6rem;\n  border: 2px solid #008000 !important;   \/* &#x1f511; contorno verde *\/\n  transition: all 0.4s ease-in-out;       \/* animaci\u00f3n suave *\/\n  font-size: 0.9rem;\n  text-align: center;\n  width: 100%;\n  margin-top: 1.7rem;                     \/* &#x1f511; par\u00e1metro para bajarlos *\/\n}\n\n.boton-verde.vertical {\n  flex-direction: column; \/* logo arriba, texto abajo *\/\n  gap: 0.8rem;\n}\n\n.boton-verde:hover {\n  background-color: #ffffff;              \/* sigue blanco *\/\n  color: #008000;                         \/* sigue verde *\/\n  border: 2px solid #008000;\n  box-shadow: 0 0 12px rgba(0, 128, 0, 0.4); \/* sombra verde *\/\n  transform: scale(1.05);                 \/* efecto de crecimiento *\/\n}\n\n.logo-boton {\n  height: 22px;\n  width: auto;\n  display: block;\n  margin: 0 auto;\n}\n<\/style>\n\n                    <style>\n                      .tarjeta-repositorio {\n                        background-color: #f9f9f9;\n                        border-left: 6px solid #008000;\n                        border-radius: 12px;\n                        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);\n                        padding: 2rem;\n                        width: 95%;\n                        margin: 4rem auto 2rem auto;\n                        \/* separaci\u00f3n superior aumentada *\/\n                        font-family: sans-serif;\n                        display: flex;\n                        flex-wrap: wrap;\n                        justify-content: space-between;\n                        align-items: center;\n                        gap: 2rem;\n                      }\n\n                      .contenido-repositorio {\n                        flex: 2;\n                        min-width: 300px;\n                      }\n\n                      .contenido-repositorio h3 {\n                        font-size: 1.6rem;\n                        color: #008000;\n                        margin-bottom: 1rem;\n                      }\n\n                      .contenido-repositorio p {\n                        font-size: 1rem;\n                        line-height: 1.6;\n                        text-align: justify;\n                        margin-bottom: 1.5rem;\n                      }\n\n                      .boton-repositorio {\n                        flex: 1;\n                        min-width: 200px;\n                        display: flex;\n                        justify-content: center;\n                        align-items: center;\n                      }\n\n                      .boton-repositorio a {\n                        background-color: #008000;\n                        color: white;\n                        padding: 0.8rem 1.5rem;\n                        text-decoration: none;\n                        font-weight: bold;\n                        border-radius: 6px;\n                        text-align: center;\n                        transition: all 0.3s ease;\n                        border: 2px solid #008000;\n                      }\n\n                      .boton-repositorio a:hover {\n                        background-color: white;\n                        color: #008000;\n                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n                        transform: translateY(-2px);\n                      }\n                    <\/style>\n\n                    <div class=\"tarjeta-repositorio\">\n                      <div class=\"contenido-repositorio\">\n                        <h3>Repositorio Institucional<\/h3>\n                        <p>\n                          El Repositorio Institucional de la Universidad T\u00e9cnica Luis Vargas Torres de Esmeraldas preserva, organiza y difunde en acceso abierto los trabajos de titulaci\u00f3n, investigaciones y producci\u00f3n acad\u00e9mica generada por la comunidad universitaria. Este espacio\n                          permite consultar documentos a texto completo, fortaleciendo la visibilidad cient\u00edfica y el acceso libre al conocimiento.\n                        <\/p>\n                      <\/div>\n\n                      <div class=\"boton-repositorio\">\n                        <a href=\"https:\/\/repositorio.utelvt.edu.ec\">ACCEDER AL REPOSITORIO<\/a>\n                      <\/div>\n                    <\/div>\n\n\n<section style=\"width: 90%; margin: 3rem auto; font-family: sans-serif; display: flex; flex-wrap: wrap; gap: 2rem;\">\n  <!-- Columna izquierda: T\u00edtulo institucional -->\n  <div style=\"flex: 1 1 25%; display: flex; align-items: flex-start; justify-content: center;\">\n    <h3 style=\"font-size: 1.8rem; color: #008000; margin-top: 0;\">Servicios Bibliotecarios<\/h3>\n  <\/div>\n\n  <!-- Columna derecha: Contenedores de servicios -->\n  <div style=\"flex: 1 1 70%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem;\">\n    \n    <!-- Servicio 1 -->\n    <div style=\"border: none; padding: 0;\">\n      <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/capacitaciones-2\/\">\n        <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/CAPACITACION-1.png\" alt=\"Capacitaciones\" style=\"width: 100%; aspect-ratio: 4\/3; object-fit: cover; border-radius: 6px; cursor:pointer;\">\n      <\/a>\n      <h4 style=\"margin: 0.8rem 0 0.4rem; font-size: 1.2rem; color: #008000;\">Capacitaciones<\/h4>\n      <p style=\"font-size: 0.95rem; line-height: 1.5; text-align: justify;\">Sesiones formativas sobre uso de recursos, normativas y herramientas acad\u00e9micas.<\/p>\n      <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/capacitaciones-2\/\" class=\"ver-mas\">\n        Ver m\u00e1s <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/felcha-derecha-logo.png\" alt=\"flecha\" class=\"flecha-icono\">\n      <\/a>\n    <\/div>\n\n    <!-- Servicio 2 -->\n    <div style=\"border: none; padding: 0;\">\n      <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/salas-de-lectura-2\/\">\n        <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/SALAS-DE-LECTURA.png\" alt=\"Salas de lectura\" style=\"width: 100%; aspect-ratio: 4\/3; object-fit: cover; border-radius: 6px; cursor:pointer;\">\n      <\/a>\n      <h4 style=\"margin: 0.8rem 0 0.4rem; font-size: 1.2rem; color: #008000;\">Salas de lectura<\/h4>\n      <p style=\"font-size: 0.95rem; line-height: 1.5; text-align: justify;\">Espacios grupales e individuales para el estudio y consulta de materiales.<\/p>\n      <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/salas-de-lectura-2\/\" class=\"ver-mas\">\n        Ver m\u00e1s <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/felcha-derecha-logo.png\" alt=\"flecha\" class=\"flecha-icono\">\n      <\/a>\n    <\/div>\n\n    <!-- Servicio 3 -->\n    <div style=\"border: none; padding: 0;\">\n      <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/estanterias-abiertas\/\">\n        <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/ESTANTERIA-ABIERTA-scaled.jpg\" alt=\"Estanter\u00eda abierta\" style=\"width: 100%; aspect-ratio: 4\/3; object-fit: cover; border-radius: 6px; cursor:pointer;\">\n      <\/a>\n      <h4 style=\"margin: 0.8rem 0 0.4rem; font-size: 1.2rem; color: #008000;\">Estanter\u00eda abierta<\/h4>\n      <p style=\"font-size: 0.95rem; line-height: 1.5; text-align: justify;\">Acceso libre a colecciones f\u00edsicas para exploraci\u00f3n directa por parte del usuario.<\/p>\n      <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/estanterias-abiertas\/\" class=\"ver-mas\">\n        Ver m\u00e1s <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/felcha-derecha-logo.png\" alt=\"flecha\" class=\"flecha-icono\">\n      <\/a>\n    <\/div>\n\n    <!-- Servicio 4 -->\n    <div style=\"border: none; padding: 0;\">\n      <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/area-infantil-2\/\">\n        <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/SALA-LECURA-INFANTIL5-scaled.jpg\" alt=\"\u00c1rea infantil\" style=\"width: 100%; aspect-ratio: 4\/3; object-fit: cover; border-radius: 6px; cursor:pointer;\">\n      <\/a>\n      <h4 style=\"margin: 0.8rem 0 0.4rem; font-size: 1.2rem; color: #008000;\">Sala de Lectura Infantil<\/h4>\n      <p style=\"font-size: 0.95rem; line-height: 1.5; text-align: justify;\">Zona dedicada a la lectura y actividades para ni\u00f1os y ni\u00f1as en edad escolar.<\/p>\n      <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/area-infantil-2\/\" class=\"ver-mas\">\n        Ver m\u00e1s <img decoding=\"async\" src=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/felcha-derecha-logo.png\" alt=\"flecha\" class=\"flecha-icono\">\n      <\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- Estilos -->\n<style>\n.ver-mas {\n  display: flex;\n  justify-content: flex-end; \/* &#x1f511; alinea a la derecha *\/\n  align-items: center;\n  margin-top: 0.5rem;\n  font-size: 0.9rem;\n  color: #008000;\n  font-weight: bold;\n  text-decoration: none;\n  gap: 0.4rem;\n}\n\n.ver-mas:hover .flecha-icono {\n  transform: translateX(5px); \/* &#x1f511; animaci\u00f3n al hover *\/\n}\n\n.flecha-icono {\n  width: 16px;\n  height: auto;\n  transition: transform 0.3s ease;\n}\n<\/style>\n\n\n\n                    <style>\n                     \/* Botones Normativas (separados, con la misma animaci\u00f3n) *\/\n.boton-normativa {\n  background-color: #008000;\n  color: white;\n  text-decoration: none;\n  font-weight: bold;\n  padding: 1rem 10rem;   \/* &#x1f511; m\u00e1s ancho: aumenta el padding horizontal *\/\n  border-radius: 8px;\n  display: inline-block;\n  border: 2px solid #008000;\n  transition: all 0.3s ease;\n  font-size: 1rem;\n}\n\n.boton-normativa:hover {\n  background-color: white;\n  color: #008000;\n  border: 2px solid #008000;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  transform: translateY(-2px);\n}\n\n\n\n\/* Bloque Normativas *\/\n.bloque-normativas {\n  width: 80%;\n  margin: 3rem auto;\n  font-family: sans-serif;\n}\n\n.fila-normativas {\n  display: flex;\n  justify-content: space-between;\n  gap: 2rem;\n  margin-top: 2rem;\n}\n\n.columna-normativa {\n  flex: 1;\n  text-align: center;\n}\n\n.columna-normativa p {\n  font-size: 1rem;\n  margin-bottom: 1rem;\n  font-weight: bold;\n}\n\n\/* Ajuste solo para el bot\u00f3n de la primera columna (VER POL\u00cdTICAS) *\/\n.columna-normativa:first-child .boton-normativa {\n  margin-top: 1.7rem;\n}\n.fila-normativas .columna-normativa:last-child {\n  margin-top: 1.5rem;   \/* &#x1f511; ajusta el valor: 1rem, 1.5rem, 2rem *\/\n}\n\n                    <\/style>\n\n\n                   <section class=\"bloque-normativas\">\n  <h3 style=\"font-size: 1.6rem; color: #008000; margin-bottom: 1rem;\">Normativas<\/h3>\n\n  <div class=\"fila-normativas\">\n    <!-- Columna 1: Pol\u00edticas y procedimientos -->\n    <div class=\"columna-normativa\" style=\"margin-top: 1.5rem;\">\n      <p>Pol\u00edticas y procedimientos de biblioteca<\/p>\n      <div class=\"boton-wrapper\">\n        <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/Politicas_procedimientos-de-biblioteca.pdf\" class=\"boton-normativa\">\n          VER POL\u00cdTICAS\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- Columna 2: Reglamento -->\n    <div class=\"columna-normativa\">\n      <p>Reglamento del Uso del Software o la Herramienta de Prevenci\u00f3n Plagio Acad\u00e9mico<\/p>\n      <div class=\"boton-wrapper\">\n        <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/wp-content\/uploads\/2025\/12\/Reglamento-del-Uso-del-Software-o-la-Herramienta-de-Prevencion-Plagio-Academico.pdf\" class=\"boton-normativa\">\n          VER REGLAMENTO\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n                    <section id=\"contador-visitas\" style=\"text-align:center; margin:3rem 0; font-family:'Segoe UI', sans-serif;\">\n                      <h4 style=\"color:#008000; font-size:1.4rem; margin-bottom:0.5rem; font-weight:600;\">Total de visitantes<\/h4>\n                      <p id=\"visitas\" style=\"font-size:2.8rem; font-weight:bold; color:#008000;\">Cargando&#8230;<\/p>\n                    <\/section>\n\n                    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@supabase\/supabase-js@2\"><\/script>\n                    <script>\n                      const supabaseUrl = \"https:\/\/bmymenlkmcpfmuhkaixb.supabase.co\";\n                      const supabaseKey = \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJteW1lbmxrbWNwZm11aGthaXhiIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQ3OTQ2OTUsImV4cCI6MjA4MDM3MDY5NX0.mwc2j6ez8QO0thJeqqfXxxEi5PD70uzNXRwQsyePuTs\";\n                      const client = supabase.createClient(supabaseUrl, supabaseKey);\n                      const visitasEl = document.getElementById(\"visitas\");\n\n                      \/\/ Incrementar visitas al cargar la p\u00e1gina (solo una vez por hora)\n                      async function incrementarVisita() {\n                        const ahora = Date.now();\n                        const ultimaVisita = localStorage.getItem(\"ultimaVisita\");\n\n                        \/\/ Si no hay registro o ya pas\u00f3 m\u00e1s de 1 hora (3600000 ms)\n                        if (!ultimaVisita || (ahora - parseInt(ultimaVisita)) > 3600000) {\n                          localStorage.setItem(\"ultimaVisita\", ahora.toString());\n\n                          const {\n                            data,\n                            error\n                          } = await client\n                            .from(\"visitas\")\n                            .select(\"contador\")\n                            .eq(\"id\", 1)\n                            .single();\n\n                          if (error || !data) {\n                            visitasEl.textContent = \"Error\";\n                            console.error(\"Lectura fallida:\", error);\n                            return;\n                          }\n\n                          const nuevoContador = data.contador + 1;\n\n                          const {\n                            error: updateError\n                          } = await client\n                            .from(\"visitas\")\n                            .update({\n                              contador: nuevoContador\n                            })\n                            .eq(\"id\", 1);\n\n                          if (updateError) {\n                            visitasEl.textContent = \"Error\";\n                            console.error(\"Actualizaci\u00f3n fallida:\", updateError);\n                            return;\n                          }\n\n                          visitasEl.textContent = nuevoContador.toLocaleString(\"es-ES\");\n                        } else {\n                          \/\/ Solo mostrar el valor actual sin sumar\n                          const {\n                            data\n                          } = await client\n                            .from(\"visitas\")\n                            .select(\"contador\")\n                            .eq(\"id\", 1)\n                            .single();\n\n                          if (data) {\n                            visitasEl.textContent = data.contador.toLocaleString(\"es-ES\");\n                          }\n                        }\n                      }\n\n                      \/\/ Suscripci\u00f3n en tiempo real: escucha cambios en la tabla\n                      client\n                        .channel('contador-channel')\n                        .on(\n                          'postgres_changes', {\n                            event: 'UPDATE',\n                            schema: 'public',\n                            table: 'visitas',\n                            filter: 'id=eq.1'\n                          },\n                          (payload) => {\n                            const nuevo = payload.new.contador;\n                            visitasEl.textContent = nuevo.toLocaleString(\"es-ES\");\n                          }\n                        )\n                        .subscribe();\n\n                      \/\/ Ejecutar al cargar la p\u00e1gina\n                      incrementarVisita();\n                    <\/script>\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>\n                      <a href=\"https:\/\/utelvt.edu.ec\/biblioteca\/biblioteca-general-index-principal\/\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a>\n                    <\/p>\n\n\n\n<p><\/p>\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 \u27a4Noticias \u27a4Admisi\u00f3n Admisi\u00f3n T\u00edtulo Aqu\u00ed ir\u00e1 el contenido institucional de la opci\u00f3n seleccionada. \u2715 Cerrar Biblioteca UTELVT Recursos Acad\u00e9micos y Servicios Digitales Sistema de gesti\u00f3n Recursos electr\u00f3nicos Base de Datos Suscritas Interbibliotecario Base de Datos Gratuitas Repositorio Institucional Sistema antiplagio Descripci\u00f3n General La [&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-3967","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/utelvt.edu.ec\/biblioteca\/wp-json\/wp\/v2\/pages\/3967","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=3967"}],"version-history":[{"count":20,"href":"https:\/\/utelvt.edu.ec\/biblioteca\/wp-json\/wp\/v2\/pages\/3967\/revisions"}],"predecessor-version":[{"id":6485,"href":"https:\/\/utelvt.edu.ec\/biblioteca\/wp-json\/wp\/v2\/pages\/3967\/revisions\/6485"}],"wp:attachment":[{"href":"https:\/\/utelvt.edu.ec\/biblioteca\/wp-json\/wp\/v2\/media?parent=3967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}