{"id":5370,"date":"2025-12-16T23:20:50","date_gmt":"2025-12-16T23:20:50","guid":{"rendered":"https:\/\/petrolera.umsa.edu.bo\/?page_id=5370"},"modified":"2026-02-28T19:56:39","modified_gmt":"2026-02-28T23:56:39","slug":"revistas-inspet","status":"publish","type":"page","link":"https:\/\/petrolera.umsa.edu.bo\/index.php\/revistas-inspet\/","title":{"rendered":"Revistas"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n INSPET - Header<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n html, body {\r\n overflow-x: hidden;\r\n max-width: 100%;\r\n }\r\n\r\n :root {\r\n --primary-color: #3a4e5c;\r\n --secondary-color: #2a7f62;\r\n --white: #ffffff;\r\n --text-dark: #333333;\r\n }\r\n\r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\r\n }\r\n\r\n \/* Header Principal *\/\r\n .header-container {\r\n background: transparent;\r\n position: sticky;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 1001;\r\n padding: 1.1rem 0;\r\n }\r\n\r\n .header-content {\r\n width: 100%;\r\n margin: 0;\r\n padding: 0 2rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 1.5rem;\r\n }\r\n\r\n \/* Secci\u00f3n de Logos *\/\r\n .logos-section {\r\n display: flex;\r\n align-items: center;\r\n gap: 1.5rem;\r\n flex: 0 1 auto;\r\n min-width: 0;\r\n }\r\n\r\n .logo-link {\r\n display: flex;\r\n align-items: center;\r\n text-decoration: none;\r\n transition: transform 0.3s ease;\r\n flex-shrink: 0;\r\n }\r\n\r\n .logo-link:hover {\r\n transform: scale(1.05);\r\n }\r\n\r\n .logo-pet {\r\n height: 75px !important;\r\n max-height: 75px !important;\r\n width: auto;\r\n display: block;\r\n object-fit: contain;\r\n }\r\n\r\n .separator {\r\n width: 3px;\r\n height: 60px;\r\n background: rgba(58, 78, 92, 0.25);\r\n flex-shrink: 0;\r\n }\r\n\r\n .logo-inspet-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n min-width: 0;\r\n overflow: hidden;\r\n }\r\n\r\n .logo-inspet-container:hover {\r\n transform: translateY(-2px);\r\n }\r\n \r\n .logo-inspet-container:hover .logo-inspet {\r\n transform: scale(1.05);\r\n }\r\n\r\n .logo-inspet {\r\n height: 75px !important;\r\n max-height: 75px !important;\r\n width: auto;\r\n display: block;\r\n flex-shrink: 0;\r\n object-fit: contain;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .institute-info {\r\n min-width: 0;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n height: 75px;\r\n }\r\n\r\n .institute-info h1 {\r\n font-size: 1rem;\r\n font-weight: 700;\r\n color: var(--primary-color);\r\n line-height: 1.3;\r\n margin-bottom: 0.3rem;\r\n }\r\n\r\n .institute-info .title-line {\r\n display: block;\r\n }\r\n \r\n .institute-info .title-line:last-child {\r\n color: var(--secondary-color);\r\n font-weight: 700;\r\n }\r\n\r\n .institute-info p {\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n color: var(--secondary-color);\r\n letter-spacing: 0.5px;\r\n white-space: nowrap;\r\n }\r\n\r\n \/* Men\u00fa de Navegaci\u00f3n *\/\r\n .nav-menu {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .nav-menu ul {\r\n display: flex;\r\n list-style: none;\r\n gap: 0.5rem;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n .nav-item {\r\n position: relative;\r\n }\r\n\r\n .nav-link {\r\n display: block;\r\n padding: 0.85rem 1.3rem;\r\n color: var(--primary-color);\r\n text-decoration: none;\r\n font-size: 1.05rem;\r\n font-weight: 500;\r\n border-radius: 6px;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n white-space: nowrap;\r\n }\r\n\r\n .nav-link:hover {\r\n background: rgba(42, 127, 98, 0.1);\r\n color: var(--secondary-color);\r\n }\r\n\r\n \/* Men\u00fa Mobile Toggle *\/\r\n .mobile-toggle {\r\n display: none;\r\n background: transparent;\r\n border: 2px solid rgba(58, 78, 92, 0.2);\r\n color: var(--primary-color);\r\n font-size: 0;\r\n padding: 0.6rem;\r\n cursor: pointer;\r\n border-radius: 8px;\r\n transition: all 0.3s ease;\r\n flex-shrink: 0;\r\n width: 48px;\r\n height: 48px;\r\n position: relative;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .mobile-toggle:hover {\r\n background: rgba(42, 127, 98, 0.08);\r\n border-color: var(--secondary-color);\r\n }\r\n \r\n .mobile-toggle:active {\r\n transform: scale(0.95);\r\n }\r\n \r\n \/* L\u00edneas del hamburguesa *\/\r\n .mobile-toggle::before,\r\n .mobile-toggle::after,\r\n .mobile-toggle .hamburger-line {\r\n content: '';\r\n position: absolute;\r\n width: 24px;\r\n height: 3px;\r\n background: var(--primary-color);\r\n border-radius: 2px;\r\n transition: all 0.3s ease;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n }\r\n \r\n .mobile-toggle::before {\r\n top: 14px;\r\n }\r\n \r\n .mobile-toggle .hamburger-line {\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n opacity: 1;\r\n }\r\n \r\n .mobile-toggle::after {\r\n bottom: 14px;\r\n }\r\n \r\n .mobile-toggle:hover::before,\r\n .mobile-toggle:hover::after,\r\n .mobile-toggle:hover .hamburger-line {\r\n background: var(--secondary-color);\r\n }\r\n \r\n \/* Animaci\u00f3n a X cuando el men\u00fa est\u00e1 activo *\/\r\n .mobile-toggle.active::before {\r\n top: 50%;\r\n transform: translate(-50%, -50%) rotate(45deg);\r\n }\r\n \r\n .mobile-toggle.active .hamburger-line {\r\n opacity: 0;\r\n transform: translate(-50%, -50%) scale(0);\r\n }\r\n \r\n .mobile-toggle.active::after {\r\n bottom: 50%;\r\n transform: translate(-50%, 50%) rotate(-45deg);\r\n }\r\n\r\n \/* RESPONSIVE DESIGN *\/\r\n \r\n \/* Tablets y pantallas medianas *\/\r\n @media (max-width: 1024px) {\r\n .header-content {\r\n padding: 0 1.5rem;\r\n gap: 1.2rem;\r\n }\r\n\r\n .logos-section {\r\n gap: 1.2rem;\r\n }\r\n\r\n .logo-pet {\r\n height: 65px !important;\r\n max-height: 65px !important;\r\n }\r\n\r\n .logo-inspet {\r\n height: 65px !important;\r\n max-height: 65px !important;\r\n }\r\n\r\n .separator {\r\n height: 52px;\r\n }\r\n\r\n .logo-inspet-container {\r\n gap: 0.85rem;\r\n }\r\n\r\n .institute-info {\r\n height: 65px;\r\n }\r\n\r\n .institute-info h1 {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .nav-link {\r\n padding: 0.75rem 1.15rem;\r\n font-size: 0.95rem;\r\n }\r\n }\r\n\r\n \/* Tablets peque\u00f1as *\/\r\n @media (max-width: 900px) {\r\n .header-content {\r\n padding: 0 1.25rem;\r\n }\r\n\r\n .logos-section {\r\n gap: 1rem;\r\n }\r\n\r\n .logo-pet {\r\n height: 58px !important;\r\n max-height: 58px !important;\r\n }\r\n\r\n .logo-inspet {\r\n height: 58px !important;\r\n max-height: 58px !important;\r\n }\r\n\r\n .separator {\r\n height: 46px;\r\n }\r\n\r\n .logo-inspet-container {\r\n gap: 0.75rem;\r\n }\r\n\r\n .institute-info {\r\n height: 58px;\r\n }\r\n\r\n .institute-info h1 {\r\n font-size: 0.8rem;\r\n }\r\n }\r\n\r\n \/* M\u00f3viles - Men\u00fa hamburguesa *\/\r\n @media (max-width: 768px) {\r\n .header-container {\r\n position: relative;\r\n }\r\n\r\n .header-content {\r\n padding: 0 1.15rem;\r\n gap: 1.2rem;\r\n }\r\n\r\n .logos-section {\r\n gap: 1.1rem;\r\n }\r\n\r\n .logo-pet {\r\n height: 68px !important;\r\n max-height: 68px !important;\r\n }\r\n\r\n .logo-inspet {\r\n height: 68px !important;\r\n max-height: 68px !important;\r\n }\r\n\r\n .separator {\r\n height: 54px;\r\n }\r\n\r\n .logo-inspet-container {\r\n gap: 0.9rem;\r\n }\r\n\r\n .institute-info {\r\n height: 68px;\r\n }\r\n\r\n .institute-info h1 {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .mobile-toggle {\r\n display: flex !important;\r\n }\r\n\r\n .nav-menu {\r\n display: none;\r\n position: fixed;\r\n top: calc(1.1rem + 68px + 1.1rem);\r\n left: 0;\r\n right: 0;\r\n width: 100vw;\r\n background: rgba(255, 255, 255, 0.98);\r\n backdrop-filter: blur(10px);\r\n box-shadow: 0 8px 20px rgba(42, 127, 98, 0.12);\r\n border-radius: 0;\r\n border: none;\r\n overflow-y: visible;\r\n overflow-x: hidden;\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n transition: opacity 0.3s ease, transform 0.3s ease;\r\n z-index: 999;\r\n margin: 0;\r\n }\r\n\r\n .nav-menu.active {\r\n display: block;\r\n animation: slideDown 0.3s ease forwards;\r\n }\r\n \r\n @keyframes slideDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .nav-menu ul {\r\n flex-direction: column;\r\n gap: 0;\r\n }\r\n\r\n .nav-link {\r\n padding: 1.35rem 1.65rem;\r\n border-radius: 0;\r\n border-bottom: 1px solid rgba(58, 78, 92, 0.08);\r\n transition: all 0.3s ease;\r\n position: relative;\r\n font-size: 1.08rem;\r\n }\r\n \r\n .nav-link::before {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n bottom: 0;\r\n width: 0;\r\n background: var(--secondary-color);\r\n transition: width 0.3s ease;\r\n }\r\n \r\n .nav-link:hover::before {\r\n width: 4px;\r\n }\r\n }\r\n\r\n \/* M\u00f3viles peque\u00f1os *\/\r\n @media (max-width: 480px) {\r\n .header-content {\r\n padding: 0 0.75rem;\r\n gap: 0.65rem;\r\n }\r\n\r\n .logos-section {\r\n gap: 0.6rem;\r\n }\r\n\r\n .logo-pet {\r\n height: 44px !important;\r\n max-height: 44px !important;\r\n }\r\n\r\n .logo-inspet {\r\n height: 44px !important;\r\n max-height: 44px !important;\r\n }\r\n\r\n .separator {\r\n height: 36px;\r\n }\r\n\r\n .logo-inspet-container {\r\n gap: 0.5rem;\r\n }\r\n\r\n .institute-info {\r\n height: 44px;\r\n }\r\n\r\n .institute-info h1 {\r\n font-size: 0.72rem;\r\n }\r\n\r\n .mobile-toggle {\r\n font-size: 1.3rem;\r\n padding: 0.5rem 0.7rem;\r\n }\r\n }\r\n\r\n \/* M\u00f3viles muy peque\u00f1os *\/\r\n @media (max-width: 360px) {\r\n .logo-pet {\r\n height: 38px !important;\r\n max-height: 38px !important;\r\n }\r\n\r\n .logo-inspet {\r\n height: 38px !important;\r\n max-height: 38px !important;\r\n }\r\n\r\n .separator {\r\n height: 32px;\r\n }\r\n\r\n .institute-info {\r\n height: 38px;\r\n }\r\n\r\n .institute-info h1 {\r\n font-size: 0.66rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <header class=\"header-container\">\r\n <div class=\"header-content\">\r\n <!-- Logos Section -->\r\n <div class=\"logos-section\">\r\n <!-- Logo PET -->\r\n <a href=\"https:\/\/petrolera.umsa.edu.bo\" class=\"logo-link\" aria-label=\"Logo Petrolera UMSA\">\r\n <img decoding=\"async\" src=\"https:\/\/petrolera.umsa.edu.bo\/wp-content\/uploads\/2025\/07\/logo-PET_cuadrado.png\" \r\n alt=\"Logo Petrolera UMSA\" \r\n class=\"logo-pet\">\r\n <\/a>\r\n\r\n <!-- Separador -->\r\n <div class=\"separator\"><\/div>\r\n\r\n <!-- Logo INSPET con Texto -->\r\n <a href=\"https:\/\/petrolera.umsa.edu.bo\/index.php\/inspet\" class=\"logo-inspet-container\" aria-label=\"INSPET\">\r\n <img decoding=\"async\" src=\"https:\/\/petrolera.umsa.edu.bo\/wp-content\/uploads\/2026\/02\/logo-inspet-fondo-transparente.png\" \r\n alt=\"Logo INSPET\" \r\n class=\"logo-inspet\">\r\n <div class=\"institute-info\">\r\n <h1>\r\n <span class=\"title-line\">Instituto de Investigaciones en Ingenier\u00eda Petrolera<\/span>\r\n <span class=\"title-line\">INSPET - UMSA<\/span>\r\n <\/h1>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- Mobile Menu Toggle -->\r\n <button class=\"mobile-toggle\" onclick=\"toggleMobileMenu()\" aria-label=\"Men\u00fa\">\r\n <span class=\"hamburger-line\"><\/span>\r\n <\/button>\r\n\r\n <!-- Navigation Menu -->\r\n <nav class=\"nav-menu\" id=\"navMenu\">\r\n <ul>\r\n <li class=\"nav-item\">\r\n <a href=\"https:\/\/petrolera.umsa.edu.bo\/index.php\/inspet\" class=\"nav-link\">\r\n Sobre Nosotros\r\n <\/a>\r\n <\/li>\r\n\r\n <li class=\"nav-item\">\r\n <a href=\"https:\/\/petrolera.umsa.edu.bo\/index.php\/revistas-inspet\" class=\"nav-link\">\r\n Revistas\r\n <\/a>\r\n <\/li>\r\n\r\n <li class=\"nav-item\">\r\n <a href=\"https:\/\/petrolera.umsa.edu.bo\/index.php\/investigaciones-inspet\" class=\"nav-link\">\r\n Investigaciones\r\n <\/a>\r\n <\/li>\r\n\r\n <li class=\"nav-item\">\r\n <a href=\"https:\/\/petrolera.umsa.edu.bo\/index.php\/inspet\" class=\"nav-link\">\r\n Servicios\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/nav>\r\n <\/div>\r\n <\/header>\r\n\r\n <script>\r\n \/\/ Toggle mobile menu\r\n function toggleMobileMenu() {\r\n const navMenu = document.getElementById('navMenu');\r\n const mobileToggle = document.querySelector('.mobile-toggle');\r\n \r\n navMenu.classList.toggle('active');\r\n mobileToggle.classList.toggle('active');\r\n }\r\n\r\n \/\/ Cerrar men\u00fa mobile al hacer clic fuera\r\n document.addEventListener('click', function(event) {\r\n const navMenu = document.getElementById('navMenu');\r\n const mobileToggle = document.querySelector('.mobile-toggle');\r\n const headerContent = document.querySelector('.header-content');\r\n \r\n if (!headerContent.contains(event.target)) {\r\n navMenu.classList.remove('active');\r\n mobileToggle.classList.remove('active');\r\n }\r\n });\r\n\r\n \/\/ Ajustar comportamiento al cambiar tama\u00f1o de ventana\r\n window.addEventListener('resize', function() {\r\n const navMenu = document.getElementById('navMenu');\r\n const mobileToggle = document.querySelector('.mobile-toggle');\r\n if (window.innerWidth > 768) {\r\n navMenu.classList.remove('active');\r\n mobileToggle.classList.remove('active');\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1e4fdf5 e-flex e-con-boxed e-con e-parent\" data-id=\"1e4fdf5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dcd90e5 elementor-widget elementor-widget-heading\" data-id=\"dcd90e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">REVISTAS<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0b081d9 elementor-widget elementor-widget-text-editor\" data-id=\"0b081d9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h6 style=\"text-align: center;\"><span style=\"color: #ffffff;\">En esta secci\u00f3n se publican todas las revistas oficiales. Mantente atento a esta secci\u00f3n para no perderte ning\u00fan comunicado relevante.<\/span><\/h6>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e0f4eec e-flex e-con-boxed e-con e-parent\" data-id=\"e0f4eec\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a3b9553 elementor-widget elementor-widget-html\" data-id=\"a3b9553\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Revista de Recursos Energ\u00e9ticos<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!--\r\n \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n \u2551 VISOR AISLADO \u2014 Shadow DOM \u2551\r\n \u2551 \u2022 Los estilos internos NO afectan al resto de la p\u00e1gina \u2551\r\n \u2551 \u2022 Los estilos externos NO afectan a este componente \u2551\r\n \u2551 \u2022 Los IDs internos NO colisionan con IDs externos \u2551\r\n \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n-->\r\n\r\n<!-- 1) PDF.js PRIMERO \u2014 debe estar disponible antes de que el custom element arranque -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.min.js\"><\/script>\r\n\r\n<script>\r\n(function () {\r\n 'use strict';\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n TEMPLATE INTERNO (HTML + CSS completamente encapsulados)\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n const TEMPLATE = document.createElement('template');\r\n TEMPLATE.innerHTML = `\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Jost:wght@200;300;400&display=swap');\r\n\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n:host {\r\n --ink: #1c1a16;\r\n --accent: #7a3b10;\r\n --muted: #a09b95;\r\n --paper: #fdfaf3;\r\n --bg: #f4f0e6;\r\n display: block;\r\n position: relative;\r\n font-family: 'Jost', sans-serif;\r\n font-weight: 300;\r\n color: var(--ink);\r\n}\r\n\r\n#loadScreen {\r\n position: absolute; inset: 0; z-index: 99;\r\n background: transparent;\r\n display: flex; flex-direction: column;\r\n align-items: center; justify-content: center;\r\n gap: 28px; padding: 40px 20px;\r\n transition: opacity .45s ease;\r\n}\r\n#loadScreen.hidden { opacity: 0; pointer-events: none; }\r\n\r\n.load-title {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-weight: 300; font-style: italic;\r\n font-size: clamp(1.2rem, 3vw, 1.8rem);\r\n color: var(--ink); letter-spacing: .06em;\r\n text-align: center;\r\n}\r\n.load-sub {\r\n font-size: 10px; letter-spacing: .34em; text-transform: uppercase;\r\n color: var(--accent); margin-top: -16px;\r\n}\r\n.load-bar-wrap {\r\n width: 180px; height: 1px;\r\n background: rgba(28,26,22,.12);\r\n}\r\n.load-bar {\r\n height: 1px; background: var(--accent);\r\n width: 0%; transition: width .25s ease;\r\n}\r\n.load-pct {\r\n font-size: 9px; letter-spacing: .3em; color: var(--muted);\r\n text-transform: uppercase; margin-top: 10px; text-align: center;\r\n}\r\n.load-pages-dots {\r\n display: flex; gap: 4px; flex-wrap: wrap;\r\n justify-content: center; max-width: 240px;\r\n}\r\n.load-dot {\r\n width: 4px; height: 4px; border-radius: 50%;\r\n background: rgba(28,26,22,.15); transition: background .2s;\r\n}\r\n.load-dot.done { background: var(--accent); }\r\n\r\n.rvb {\r\n width: 100%;\r\n padding: 48px 20px 64px;\r\n position: relative;\r\n min-height: 400px;\r\n}\r\n\r\n.rvb-header { text-align: center; margin-bottom: 40px; animation: rdown .7s ease both; }\r\n.rvb-eyebrow {\r\n display: block; font-size: 11px; letter-spacing: .38em;\r\n text-transform: uppercase; color: var(--accent);\r\n margin-bottom: 12px; line-height: 1.8;\r\n}\r\n.rvb-title {\r\n font-family: 'Cormorant Garamond', serif; font-weight: 300;\r\n font-size: clamp(1.5rem, 3.5vw, 2.6rem);\r\n letter-spacing: .02em; line-height: 1.2;\r\n display: block;\r\n}\r\n.rvb-rule { width: 34px; height: 1px; background: var(--accent); margin: 14px auto 0; display: block; }\r\n\r\n.rvb-scene {\r\n display: flex; justify-content: center; align-items: center;\r\n perspective: 2000px; margin-bottom: 36px;\r\n}\r\n.rvb-mag {\r\n position: relative;\r\n width: min(880px, 92vw);\r\n aspect-ratio: 2 \/ 1.42;\r\n transform: rotateX(2deg) rotateY(-1deg);\r\n transform-style: preserve-3d;\r\n transition: transform .6s cubic-bezier(.25,.46,.45,.94);\r\n}\r\n.rvb-mag:hover { transform: rotateX(0deg) rotateY(0deg); }\r\n.rvb-mag::before {\r\n content: '';\r\n position: absolute; bottom: -9px; left: 5px; right: 5px; height: 9px;\r\n transform: rotateX(-90deg); transform-origin: bottom center;\r\n background: repeating-linear-gradient(to right,#c8bca8 0,#c8bca8 1px,#e2d8c6 1px,#e2d8c6 3px);\r\n border-bottom: 1px solid #b0a490; border-left: 1px solid #c0b4a0; border-right: 1px solid #c0b4a0;\r\n}\r\n.rvb-mag::after {\r\n content: '';\r\n position: absolute; top: 5px; bottom: -5px; right: -9px; width: 9px;\r\n transform: rotateY(90deg); transform-origin: right center;\r\n background: repeating-linear-gradient(to bottom,#c8bca8 0,#c8bca8 1px,#e2d8c6 1px,#e2d8c6 3px);\r\n border-right: 1px solid #b0a490; border-top: 1px solid #c0b4a0; border-bottom: 1px solid #b0a490;\r\n}\r\n.rvb-shadow {\r\n position: absolute; bottom: -36px; left: 4%; right: 4%; height: 36px;\r\n background: radial-gradient(ellipse at 50% 0%,rgba(0,0,0,.3) 0%,transparent 80%);\r\n filter: blur(10px); transform: scaleY(.55); transform-origin: top center; pointer-events: none;\r\n}\r\n.rvb-book {\r\n position: absolute; inset: 0; display: flex;\r\n background: var(--paper); border-radius: 2px; overflow: hidden;\r\n box-shadow:\r\n 0 0 0 1px rgba(0,0,0,.13),\r\n 3px 5px 22px rgba(0,0,0,.20),\r\n -1px 2px 8px rgba(0,0,0,.10),\r\n inset 0 1px 0 rgba(255,255,255,.55),\r\n inset 0 -1px 0 rgba(0,0,0,.08);\r\n}\r\n.rvb-glare {\r\n position: absolute; inset: 0;\r\n background: linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.06) 32%,transparent 58%);\r\n pointer-events: none; z-index: 60; border-radius: inherit;\r\n}\r\n.rvb-center-shadow {\r\n position: absolute; left: 50%; top: 0; bottom: 0; width: 14px; transform: translateX(-50%);\r\n background: linear-gradient(to right,rgba(0,0,0,.16) 0%,rgba(0,0,0,.03) 40%,rgba(0,0,0,.03) 60%,rgba(0,0,0,.12) 100%);\r\n z-index: 20; pointer-events: none;\r\n}\r\n.rvb-panel {\r\n width: 50%; height: 100%; overflow: hidden;\r\n background: var(--paper);\r\n display: flex; align-items: center; justify-content: center;\r\n flex-shrink: 0; position: relative;\r\n}\r\n.rvb-panel canvas {\r\n display: block; width: 100%; height: 100%;\r\n object-fit: contain; object-position: center;\r\n user-select: none; transition: opacity .28s;\r\n}\r\n.rvb-panel canvas.rvb-hidden { opacity: 0; }\r\n.rvb-blank {\r\n width: 100%; height: 100%;\r\n background: var(--paper);\r\n background-image:\r\n repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(28,26,22,.04) 39px,rgba(28,26,22,.04) 40px),\r\n repeating-linear-gradient(180deg,transparent,transparent 39px,rgba(28,26,22,.035) 39px,rgba(28,26,22,.035) 40px);\r\n}\r\n\r\n.rvb-flip-wrap {\r\n position: absolute; top: 0; bottom: 0;\r\n z-index: 30; pointer-events: none; display: none;\r\n}\r\n.rvb-flip-leaf {\r\n position: absolute; inset: 0;\r\n background: var(--paper); overflow: hidden;\r\n backface-visibility: hidden; will-change: transform;\r\n}\r\n.rvb-flip-leaf canvas {\r\n display: block; width: 100%; height: 100%;\r\n object-fit: contain; user-select: none;\r\n}\r\n.rvb-flip-leaf::after {\r\n content: ''; position: absolute; top: 0; bottom: 0; width: 36px; right: 0;\r\n background: linear-gradient(to right,transparent,rgba(0,0,0,.18));\r\n pointer-events: none;\r\n}\r\n@keyframes rfwd {\r\n 0% { transform: rotateY(0deg); }\r\n 48% { transform: rotateY(-92deg); }\r\n 52% { transform: rotateY(-92deg); }\r\n 100% { transform: rotateY(-180deg); }\r\n}\r\n@keyframes rbwd {\r\n 0% { transform: rotateY(-180deg); }\r\n 48% { transform: rotateY(-92deg); }\r\n 52% { transform: rotateY(-92deg); }\r\n 100% { transform: rotateY(0deg); }\r\n}\r\n\r\n\/* MOBILE *\/\r\n.rvb-mob-scene {\r\n display: none; justify-content: center; align-items: center;\r\n perspective: 1200px; margin-bottom: 28px;\r\n}\r\n.rvb-mob-mag {\r\n position: relative; width: min(310px, 82vw);\r\n transform: rotateX(1.5deg) rotateY(-1deg);\r\n transform-style: preserve-3d;\r\n transition: transform .5s cubic-bezier(.25,.46,.45,.94);\r\n}\r\n.rvb-mob-mag:active { transform: none; }\r\n.rvb-mob-mag::before {\r\n content: ''; position: absolute; bottom: -6px; left: 3px; right: 3px; height: 6px;\r\n transform: rotateX(-90deg); transform-origin: bottom center;\r\n background: repeating-linear-gradient(to right,#c8bca8 0,#c8bca8 1px,#e2d8c6 1px,#e2d8c6 3px);\r\n border-bottom: 1px solid #b0a490;\r\n}\r\n.rvb-mob-mag::after {\r\n content: ''; position: absolute; top: 3px; bottom: -3px; right: -6px; width: 6px;\r\n transform: rotateY(90deg); transform-origin: right center;\r\n background: repeating-linear-gradient(to bottom,#c8bca8 0,#c8bca8 1px,#e2d8c6 1px,#e2d8c6 3px);\r\n border-right: 1px solid #b0a490;\r\n}\r\n.rvb-mob-shadow {\r\n position: absolute; bottom: -24px; left: 5%; right: 5%; height: 24px;\r\n background: radial-gradient(ellipse at 50% 0%,rgba(0,0,0,.24) 0%,transparent 80%);\r\n filter: blur(6px); transform: scaleY(.5); transform-origin: top center; pointer-events: none;\r\n}\r\n.rvb-mob-cover {\r\n position: relative; border-radius: 2px; overflow: hidden;\r\n box-shadow:\r\n 0 0 0 1px rgba(0,0,0,.12),\r\n 2px 4px 16px rgba(0,0,0,.18),\r\n inset 0 1px 0 rgba(255,255,255,.5),\r\n inset 0 -1px 0 rgba(0,0,0,.08);\r\n max-height: 62vh;\r\n display: flex; align-items: center; justify-content: center;\r\n}\r\n.rvb-mob-glare {\r\n position: absolute; inset: 0;\r\n background: linear-gradient(135deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 35%,transparent 60%);\r\n pointer-events: none; z-index: 5;\r\n}\r\n.rvb-mob-cover canvas {\r\n display: block; max-width: 100%; max-height: 62vh;\r\n width: auto; height: auto;\r\n user-select: none; transition: opacity .22s;\r\n}\r\n.rvb-mob-cover canvas.rvb-hidden { opacity: 0; }\r\n.rvb-mob-badge {\r\n position: absolute; bottom: 9px; right: 11px;\r\n font-size: 9px; letter-spacing: .2em; text-transform: uppercase;\r\n color: rgba(28,26,22,.32); user-select: none; pointer-events: none; z-index: 6;\r\n}\r\n\r\n\/* CONTROLES *\/\r\n.rvb-controls {\r\n display: flex; align-items: center; justify-content: center;\r\n gap: 12px; flex-wrap: nowrap; animation: rup .8s .25s ease both;\r\n}\r\n.rvb-btn {\r\n background: transparent; border: 1px solid rgba(28,26,22,.22);\r\n color: var(--ink); font-family: 'Jost', sans-serif; font-weight: 300;\r\n font-size: 10px; letter-spacing: .28em; text-transform: uppercase;\r\n padding: 9px 16px; cursor: pointer; border-radius: 1px;\r\n display: inline-flex; align-items: center; gap: 6px;\r\n transition: background .2s, color .2s, border-color .2s;\r\n line-height: 1; white-space: nowrap; flex-shrink: 0;\r\n}\r\n.rvb-btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }\r\n.rvb-btn:disabled { opacity: .22; cursor: default; }\r\n.rvb-btn svg { width: 12px; height: 12px; flex-shrink: 0; }\r\n.rvb-btn-icon { padding: 9px 11px; }\r\n.rvb-btn-icon svg { width: 14px; height: 14px; }\r\n.rvb-info {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 14px; font-style: italic; font-weight: 300;\r\n color: var(--muted); min-width: 76px; text-align: center;\r\n letter-spacing: .04em; user-select: none;\r\n}\r\n\r\n.rvb-thumbs {\r\n display: flex; justify-content: center; gap: 6px;\r\n flex-wrap: wrap; margin-top: 20px;\r\n}\r\n.rvb-thumb {\r\n width: 32px; height: 44px;\r\n border-radius: 1px; cursor: pointer;\r\n opacity: .38; border: 1.5px solid transparent;\r\n transition: opacity .2s, border-color .2s, transform .18s;\r\n flex-shrink: 0; overflow: hidden; background: #ddd;\r\n display: flex; align-items: center; justify-content: center;\r\n}\r\n.rvb-thumb canvas { width: 100%; height: 100%; object-fit: cover; display: block; }\r\n.rvb-thumb:hover { opacity: .72; }\r\n.rvb-thumb.rvb-active { opacity: 1; border-color: var(--accent); transform: translateY(-2px); }\r\n\r\n\/* FULLSCREEN *\/\r\n:host(:fullscreen) .rvb,\r\n:host(:-webkit-full-screen) .rvb {\r\n background: #0e0b08;\r\n display: flex; flex-direction: column;\r\n align-items: center; justify-content: center;\r\n padding: 0; overflow: hidden;\r\n width: 100vw; height: 100vh;\r\n}\r\n:host(:fullscreen) .rvb-header, :host(:-webkit-full-screen) .rvb-header,\r\n:host(:fullscreen) .rvb-controls, :host(:-webkit-full-screen) .rvb-controls,\r\n:host(:fullscreen) .rvb-thumbs, :host(:-webkit-full-screen) .rvb-thumbs\r\n{ display: none !important; }\r\n:host(:fullscreen) .rvb-scene, :host(:-webkit-full-screen) .rvb-scene\r\n{ flex: 1; width: 100%; margin-bottom: 0 !important; display: flex !important; }\r\n:host(:fullscreen) .rvb-mag, :host(:-webkit-full-screen) .rvb-mag\r\n{ width: min(96vw, calc(92vh * 2 \/ 1.42)) !important; transform: none !important; }\r\n\r\n\/* RESPONSIVE *\/\r\n@media (max-width: 600px) {\r\n .rvb { padding: 24px 10px 40px; }\r\n .rvb-eyebrow { font-size: 8px; letter-spacing: .2em; }\r\n .rvb-scene { display: none; }\r\n .rvb-mob-scene { display: flex; }\r\n .rvb-btn-icon { display: none; }\r\n .rvb-btn { font-size: 9px; padding: 8px 11px; letter-spacing: .18em; }\r\n .rvb-info { min-width: 54px; font-size: 13px; }\r\n .rvb-mob-mag { width: min(92vw, 320px); }\r\n}\r\n\r\n@keyframes rdown { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }\r\n@keyframes rup { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }\r\n<\/style>\r\n\r\n<div class=\"rvb\">\r\n\r\n <div id=\"loadScreen\">\r\n <div class=\"load-title\">Revista de Recursos Energ\u00e9ticos<\/div>\r\n <div class=\"load-sub\">Universidad Mayor de San Andr\u00e9s<\/div>\r\n <div style=\"text-align:center;\">\r\n <div class=\"load-bar-wrap\"><div class=\"load-bar\" id=\"loadBar\"><\/div><\/div>\r\n <div class=\"load-pct\" id=\"loadPct\">Cargando\u2026<\/div>\r\n <\/div>\r\n <div class=\"load-pages-dots\" id=\"loadDots\"><\/div>\r\n <\/div>\r\n\r\n <div id=\"rvbContent\" style=\"visibility:hidden;\">\r\n\r\n <header class=\"rvb-header\">\r\n <span class=\"rvb-eyebrow\">Universidad Mayor de San Andr\u00e9s \u00b7 Ingenier\u00eda Petrolera<\/span>\r\n <span class=\"rvb-title\">Revista de Recursos Energ\u00e9ticos<\/span>\r\n <span class=\"rvb-title\">PROXIMAMENTE<\/span>\r\n <span class=\"rvb-rule\"><\/span>\r\n <\/header>\r\n\r\n <!-- DESKTOP -->\r\n <div class=\"rvb-scene\">\r\n <div style=\"position:relative;\">\r\n <div class=\"rvb-mag\" id=\"rvbMag\">\r\n <div class=\"rvb-book\">\r\n <div class=\"rvb-panel\" id=\"rvbPanelL\"><\/div>\r\n <div class=\"rvb-panel\" id=\"rvbPanelR\"><\/div>\r\n <div class=\"rvb-center-shadow\"><\/div>\r\n <div class=\"rvb-glare\"><\/div>\r\n <div class=\"rvb-flip-wrap\" id=\"rvbFlipWrap\">\r\n <div class=\"rvb-flip-leaf\" id=\"rvbFlipLeaf\">\r\n <canvas id=\"rvbFlipCanvas\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"rvb-shadow\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- MOBILE -->\r\n <div class=\"rvb-mob-scene\">\r\n <div style=\"position:relative;\">\r\n <div class=\"rvb-mob-mag\">\r\n <div class=\"rvb-mob-cover\" id=\"rvbMobCover\">\r\n <canvas id=\"rvbMobCanvas\"><\/canvas>\r\n <div class=\"rvb-mob-glare\"><\/div>\r\n <span class=\"rvb-mob-badge\" id=\"rvbMobBadge\">1<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"rvb-mob-shadow\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Controles -->\r\n <div class=\"rvb-controls\">\r\n <button class=\"rvb-btn\" id=\"rvbPrev\" disabled>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>\r\n Anterior\r\n <\/button>\r\n <span class=\"rvb-info\" id=\"rvbInfo\">\u2014 \u2014<\/span>\r\n <button class=\"rvb-btn\" id=\"rvbNext\">\r\n Siguiente\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\r\n <\/button>\r\n <button class=\"rvb-btn rvb-btn-icon\" id=\"rvbFS\" title=\"Pantalla completa\">\r\n <svg id=\"rvbFSIcon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n <path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"\/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"rvb-thumbs\" id=\"rvbThumbs\"><\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n`;\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n CUSTOM ELEMENT\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n class RevistaVisor extends HTMLElement {\r\n constructor() {\r\n super();\r\n this._shadow = this.attachShadow({ mode: 'open' });\r\n this._shadow.appendChild(TEMPLATE.content.cloneNode(true));\r\n }\r\n\r\n connectedCallback() {\r\n this._init();\r\n }\r\n\r\n _init() {\r\n const host = this; \/\/ referencia al elemento para fullscreen\r\n const S = this._shadow;\r\n\r\n const PDF_URL = 'https:\/\/petrolera.umsa.edu.bo\/wp-content\/uploads\/2026\/02\/Recursos-energeticos-revista.pdf';\r\n const RENDER_DPR = Math.min(window.devicePixelRatio || 1, 2);\r\n const RENDER_W = 900;\r\n const FLIP_MS = 680;\r\n\r\n let pages = [];\r\n let total = 0;\r\n let deskSpread = 0;\r\n let mobPage = 0;\r\n let busy = false;\r\n\r\n \/\/ Helpers de acceso al shadow DOM\r\n const $ = id => S.getElementById(id);\r\n const $$ = sel => S.querySelector(sel);\r\n\r\n const loadScreen = $('loadScreen');\r\n const loadBar = $('loadBar');\r\n const loadPct = $('loadPct');\r\n const loadDots = $('loadDots');\r\n const panelL = $('rvbPanelL');\r\n const panelR = $('rvbPanelR');\r\n const flipWrap = $('rvbFlipWrap');\r\n const flipLeaf = $('rvbFlipLeaf');\r\n const flipCanvas = $('rvbFlipCanvas');\r\n const btnPrev = $('rvbPrev');\r\n const btnNext = $('rvbNext');\r\n const elInfo = $('rvbInfo');\r\n const thumbBar = $('rvbThumbs');\r\n const mobCanvas = $('rvbMobCanvas');\r\n const mobBadge = $('rvbMobBadge');\r\n const mag = $('rvbMag');\r\n const btnFS = $('rvbFS');\r\n const fsIcon = $('rvbFSIcon');\r\n const mobCover = $('rvbMobCover');\r\n\r\n \/* \u2500\u2500 FS Overlay en document.body (singleton) \u2500\u2500 *\/\r\n let fsOverlay = document.getElementById('rvb-fs-overlay-singleton');\r\n if (!fsOverlay) {\r\n fsOverlay = document.createElement('div');\r\n fsOverlay.id = 'rvb-fs-overlay-singleton';\r\n fsOverlay.style.cssText = \"display:none;position:fixed;inset:0;pointer-events:none;z-index:9998;font-family:'Jost',sans-serif;\";\r\n fsOverlay.innerHTML = `\r\n<style>\r\n #rvb-fs-overlay-singleton button {\r\n position:absolute; pointer-events:all;\r\n background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);\r\n color:rgba(255,255,255,.72); cursor:pointer;\r\n display:flex; align-items:center; justify-content:center;\r\n transition:background .18s,color .18s;\r\n }\r\n #rvb-fs-overlay-singleton button:hover { background:rgba(255,255,255,.18); color:#fff; }\r\n #rvb-fs-overlay-singleton button:disabled { opacity:.2; pointer-events:none; }\r\n #rvb-fs-overlay-singleton .fsa { top:50%; transform:translateY(-50%); width:46px; height:76px; border-radius:2px; }\r\n #rvb-fs-overlay-singleton .fsc { top:16px; right:16px; width:38px; height:38px; border-radius:50%; }\r\n #rvb-fs-overlay-singleton .fsl {\r\n position:absolute; bottom:18px; left:50%; transform:translateX(-50%);\r\n font-size:10px; font-weight:300; letter-spacing:.3em; text-transform:uppercase;\r\n color:rgba(255,255,255,.35); white-space:nowrap; pointer-events:none;\r\n }\r\n<\/style>\r\n<button class=\"fsa\" id=\"rvbFsPrev\" style=\"left:18px\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>\r\n<\/button>\r\n<button class=\"fsa\" id=\"rvbFsNext\" style=\"right:18px\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\r\n<\/button>\r\n<button class=\"fsc\" id=\"rvbFsClose\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M18 6 6 18M6 6l12 12\"\/><\/svg>\r\n<\/button>\r\n<span class=\"fsl\" id=\"rvbFsLabel\"><\/span>`;\r\n document.body.appendChild(fsOverlay);\r\n }\r\n const fsPrev = document.getElementById('rvbFsPrev');\r\n const fsNext = document.getElementById('rvbFsNext');\r\n const fsClose = document.getElementById('rvbFsClose');\r\n const fsLabel = document.getElementById('rvbFsLabel');\r\n\r\n \/* \u2500\u2500 Helpers de l\u00f3gica \u2500\u2500 *\/\r\n const isMob = () => window.innerWidth <= 600;\r\n const dTotal = () => Math.ceil(total \/ 2);\r\n const spreadPages = si => ({\r\n L: si * 2 < total ? si * 2 : null,\r\n R: si * 2 + 1 < total ? si * 2 + 1 : null\r\n });\r\n\r\n function setPanel(panel, pageIdx) {\r\n panel.innerHTML = '';\r\n if (pageIdx === null || pages[pageIdx] == null) {\r\n const b = document.createElement('div');\r\n b.className = 'rvb-blank';\r\n panel.appendChild(b);\r\n return;\r\n }\r\n const src = pages[pageIdx];\r\n const cv = document.createElement('canvas');\r\n cv.width = src.width;\r\n cv.height = src.height;\r\n cv.style.cssText = 'width:100%;height:100%;object-fit:contain;display:block;';\r\n cv.getContext('2d').drawImage(src, 0, 0);\r\n panel.appendChild(cv);\r\n }\r\n\r\n function pageLabel() {\r\n if (isMob()) return `${mobPage + 1} \u00b7 ${total}`;\r\n const { L, R } = spreadPages(deskSpread);\r\n const lp = L !== null ? L + 1 : null;\r\n const rp = R !== null ? R + 1 : null;\r\n if (lp && rp) return `${lp} \\u2014 ${rp} \\xb7 ${total}`;\r\n return `${lp != null ? lp : rp} \\xb7 ${total}`;\r\n }\r\n\r\n function updateUI() {\r\n const lbl = pageLabel();\r\n elInfo.textContent = lbl;\r\n fsLabel.textContent = lbl;\r\n mobBadge.textContent = `${mobPage + 1} \\xb7 ${total}`;\r\n\r\n if (isMob()) {\r\n btnPrev.disabled = mobPage === 0;\r\n btnNext.disabled = mobPage >= total - 1;\r\n fsPrev.disabled = mobPage === 0;\r\n fsNext.disabled = mobPage >= total - 1;\r\n } else {\r\n btnPrev.disabled = deskSpread === 0;\r\n btnNext.disabled = deskSpread >= dTotal() - 1;\r\n fsPrev.disabled = deskSpread === 0;\r\n fsNext.disabled = deskSpread >= dTotal() - 1;\r\n }\r\n\r\n S.querySelectorAll('.rvb-thumb').forEach((t, i) => {\r\n t.classList.toggle('rvb-active',\r\n isMob() ? i === mobPage : Math.floor(i \/ 2) === deskSpread\r\n );\r\n });\r\n }\r\n\r\n function renderSpread(si) {\r\n const { L, R } = spreadPages(si);\r\n setPanel(panelL, L);\r\n setPanel(panelR, R);\r\n deskSpread = si;\r\n }\r\n\r\n async function dNav(si, dir) {\r\n if (busy) return;\r\n busy = true;\r\n\r\n if (dir) {\r\n const cur = spreadPages(deskSpread);\r\n const flipIdx = dir === 'fwd' ? cur.R : cur.L;\r\n\r\n if (flipIdx !== null) {\r\n const src = pages[flipIdx];\r\n flipCanvas.width = src.width;\r\n flipCanvas.height = src.height;\r\n flipCanvas.getContext('2d').drawImage(src, 0, 0);\r\n }\r\n\r\n if (dir === 'fwd') {\r\n Object.assign(flipWrap.style, { left:'50%', right:'0', width:'50%', top:'0', bottom:'0' });\r\n flipLeaf.style.transformOrigin = 'left center';\r\n } else {\r\n Object.assign(flipWrap.style, { left:'0', right:'50%', width:'50%', top:'0', bottom:'0' });\r\n flipLeaf.style.transformOrigin = 'right center';\r\n }\r\n\r\n flipWrap.style.display = 'block';\r\n flipLeaf.style.animation = 'none';\r\n void flipLeaf.offsetWidth;\r\n flipLeaf.style.animation = `${dir === 'fwd' ? 'rfwd' : 'rbwd'} ${FLIP_MS}ms cubic-bezier(.4,0,.2,1) forwards`;\r\n\r\n setTimeout(() => renderSpread(si), FLIP_MS * 0.42);\r\n setTimeout(() => {\r\n flipWrap.style.display = 'none';\r\n flipLeaf.style.animation = 'none';\r\n busy = false;\r\n }, FLIP_MS + 50);\r\n } else {\r\n renderSpread(si);\r\n busy = false;\r\n }\r\n\r\n deskSpread = si;\r\n updateUI();\r\n }\r\n\r\n function renderMob(idx) {\r\n const src = pages[idx];\r\n if (!src) return;\r\n mobCanvas.width = src.width;\r\n mobCanvas.height = src.height;\r\n mobCanvas.getContext('2d').drawImage(src, 0, 0);\r\n }\r\n\r\n function mNav(idx) {\r\n if (busy) return;\r\n busy = true;\r\n mobCanvas.classList.add('rvb-hidden');\r\n setTimeout(() => {\r\n mobPage = idx;\r\n renderMob(idx);\r\n mobCanvas.classList.remove('rvb-hidden');\r\n updateUI();\r\n setTimeout(() => { busy = false; }, 80);\r\n }, 200);\r\n }\r\n\r\n const goNext = () => {\r\n if (busy) return;\r\n if (isMob()) { if (mobPage < total - 1) mNav(mobPage + 1); }\r\n else { if (deskSpread < dTotal() - 1) dNav(deskSpread + 1, 'fwd'); }\r\n };\r\n const goPrev = () => {\r\n if (busy) return;\r\n if (isMob()) { if (mobPage > 0) mNav(mobPage - 1); }\r\n else { if (deskSpread > 0) dNav(deskSpread - 1, 'bwd'); }\r\n };\r\n\r\n btnNext.addEventListener('click', goNext);\r\n btnPrev.addEventListener('click', goPrev);\r\n fsNext.addEventListener('click', goNext);\r\n fsPrev.addEventListener('click', goPrev);\r\n\r\n \/\/ Swipe m\u00f3vil\r\n let swX = 0, swT = 0;\r\n mobCover.addEventListener('touchstart', e => { swX = e.touches[0].clientX; swT = Date.now(); }, { passive: true });\r\n mobCover.addEventListener('touchend', e => {\r\n const dx = e.changedTouches[0].clientX - swX;\r\n const dt = Date.now() - swT;\r\n if (Math.abs(dx) > 42 && dt < 400) {\r\n if (dx < 0 && mobPage < total - 1) mNav(mobPage + 1);\r\n else if (dx > 0 && mobPage > 0) mNav(mobPage - 1);\r\n }\r\n }, { passive: true });\r\n\r\n \/\/ Teclado\r\n document.addEventListener('keydown', e => {\r\n if (e.key === 'ArrowRight') goNext();\r\n if (e.key === 'ArrowLeft') goPrev();\r\n if (e.key === 'F11') { e.preventDefault(); isFS() ? exitFS() : enterFS(); }\r\n if (e.key === 'Escape' && isFS()) exitFS();\r\n });\r\n\r\n \/\/ Rebuild completo de todos los thumbs (usado al final del proceso)\r\n function buildThumbs() {\r\n thumbBar.innerHTML = '';\r\n pages.forEach((src, i) => {\r\n if (src) buildThumb(i);\r\n });\r\n }\r\n\r\n \/\/ Tilt 3D\r\n mag.addEventListener('mousemove', e => {\r\n if (isFS()) return;\r\n const r = mag.getBoundingClientRect();\r\n const nx = (e.clientX - r.left) \/ r.width - 0.5;\r\n const ny = (e.clientY - r.top) \/ r.height - 0.5;\r\n mag.style.transform = `rotateX(${-ny * 4}deg) rotateY(${nx * 6}deg)`;\r\n });\r\n mag.addEventListener('mouseleave', () => {\r\n mag.style.transform = 'rotateX(2deg) rotateY(-1deg)';\r\n });\r\n\r\n \/\/ Fullscreen \u2014 usar 'host' en lugar de 'this' (arrow fn no tiene su propio this)\r\n const iconEnter = `<path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"\/>`;\r\n const iconExit = `<path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3\"\/>`;\r\n\r\n const isFS = () => !!(document.fullscreenElement || document.webkitFullscreenElement);\r\n\r\n function enterFS() {\r\n const fn = host.requestFullscreen || host.webkitRequestFullscreen;\r\n if (fn) fn.call(host);\r\n }\r\n function exitFS() {\r\n const fn = document.exitFullscreen || document.webkitExitFullscreen;\r\n if (fn) fn.call(document);\r\n }\r\n\r\n btnFS.addEventListener('click', () => isFS() ? exitFS() : enterFS());\r\n fsClose.addEventListener('click', () => exitFS());\r\n\r\n ['fullscreenchange', 'webkitfullscreenchange'].forEach(ev =>\r\n document.addEventListener(ev, () => {\r\n const fs = isFS();\r\n fsIcon.innerHTML = fs ? iconExit : iconEnter;\r\n fsOverlay.style.display = fs ? 'block' : 'none';\r\n if (fs) updateUI();\r\n })\r\n );\r\n\r\n window.addEventListener('resize', updateUI);\r\n\r\n \/* \u2500\u2500 Carga PDF optimizada \u2500\u2500 *\/\r\n async function loadPDF() {\r\n pdfjsLib.GlobalWorkerOptions.workerSrc =\r\n 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.worker.min.js';\r\n\r\n let pdf;\r\n try {\r\n pdf = await pdfjsLib.getDocument({\r\n url: PDF_URL,\r\n cMapPacked: true,\r\n \/\/ Habilitar rangos parciales para no descargar el PDF completo antes de empezar\r\n rangeChunkSize: 65536,\r\n disableAutoFetch: false,\r\n disableStream: false,\r\n }).promise;\r\n } catch (e) {\r\n showError(e);\r\n return;\r\n }\r\n\r\n total = pdf.numPages;\r\n \/\/ Pre-poblar el array con nulls para poder indexar directamente\r\n pages = new Array(total).fill(null);\r\n\r\n \/\/ Dots de progreso\r\n const dotEls = [];\r\n for (let i = 0; i < total; i++) {\r\n const d = document.createElement('div');\r\n d.className = 'load-dot';\r\n loadDots.appendChild(d);\r\n dotEls.push(d);\r\n }\r\n\r\n let rendered = 0;\r\n function onPageDone(idx) {\r\n rendered++;\r\n dotEls[idx].classList.add('done');\r\n loadBar.style.width = Math.round(rendered \/ total * 100) + '%';\r\n loadPct.textContent = `P\\xe1gina ${rendered} de ${total}`;\r\n\r\n \/\/ En cuanto las 2 primeras p\u00e1ginas est\u00e9n listas \u2192 mostrar el visor\r\n if (rendered === Math.min(2, total)) {\r\n loadScreen.classList.add('hidden');\r\n setTimeout(() => { loadScreen.style.display = 'none'; }, 480);\r\n $('rvbContent').style.visibility = 'visible';\r\n renderSpread(0);\r\n renderMob(0);\r\n updateUI();\r\n }\r\n\r\n \/\/ Thumbs: a\u00f1adir de uno en uno conforme llegan\r\n buildThumb(idx);\r\n\r\n \/\/ Si ya termin\u00f3 alguna p\u00e1gina que estaba en pantalla, refrescarla\r\n refreshVisibleIfNeeded(idx);\r\n }\r\n\r\n async function renderPage(pageNum) {\r\n const idx = pageNum - 1;\r\n const pg = await pdf.getPage(pageNum);\r\n const vp = pg.getViewport({ scale: RENDER_W \/ pg.getViewport({ scale: 1 }).width * RENDER_DPR });\r\n const cv = document.createElement('canvas');\r\n cv.width = vp.width;\r\n cv.height = vp.height;\r\n await pg.render({ canvasContext: cv.getContext('2d'), viewport: vp }).promise;\r\n pages[idx] = cv;\r\n onPageDone(idx);\r\n }\r\n\r\n \/\/ Orden de prioridad: primero p\u00e1ginas visibles (0,1), luego el resto en paralelo\r\n \/\/ Fase 1 \u2014 p\u00e1ginas del spread inicial (cr\u00edticas, secuenciales para no bloquear)\r\n await renderPage(1);\r\n if (total > 1) await renderPage(2);\r\n\r\n \/\/ Fase 2 \u2014 el resto en paralelo con concurrencia = 4\r\n const CONCURRENCY = 4;\r\n const queue = [];\r\n for (let i = 3; i <= total; i++) queue.push(i);\r\n\r\n async function runQueue() {\r\n while (queue.length) {\r\n const batch = queue.splice(0, CONCURRENCY);\r\n await Promise.all(batch.map(renderPage));\r\n }\r\n }\r\n \/\/ No bloqueamos: lanzamos en background y terminamos\r\n runQueue().then(() => {\r\n \/\/ Asegurarse de que los thumbs finales y el spread actual est\u00e9n al d\u00eda\r\n buildThumbs();\r\n updateUI();\r\n });\r\n }\r\n\r\n \/* Thumbs individuales (se a\u00f1aden conforme llegan las p\u00e1ginas) *\/\r\n function buildThumb(idx) {\r\n \/\/ Si ya existe el thumb para este \u00edndice, lo reemplazamos\r\n const existing = thumbBar.children[idx];\r\n const src = pages[idx];\r\n if (!src) return;\r\n\r\n const wrap = document.createElement('div');\r\n wrap.className = 'rvb-thumb';\r\n const cv = document.createElement('canvas');\r\n const ratio = src.height \/ src.width;\r\n cv.width = 64;\r\n cv.height = Math.round(64 * ratio);\r\n cv.getContext('2d').drawImage(src, 0, 0, cv.width, cv.height);\r\n cv.style.cssText = 'width:100%;height:100%;object-fit:cover;display:block;';\r\n wrap.appendChild(cv);\r\n wrap.title = `P\\xe1gina ${idx + 1}`;\r\n wrap.addEventListener('click', () => {\r\n if (busy) return;\r\n if (isMob()) { if (idx !== mobPage) mNav(idx); }\r\n else {\r\n const si = Math.floor(idx \/ 2);\r\n if (si !== deskSpread) dNav(si, si > deskSpread ? 'fwd' : 'bwd');\r\n }\r\n });\r\n\r\n if (existing) {\r\n thumbBar.replaceChild(wrap, existing);\r\n } else {\r\n \/\/ Insertar en la posici\u00f3n correcta aunque lleguen fuera de orden\r\n const ref = thumbBar.children[idx];\r\n if (ref) thumbBar.insertBefore(wrap, ref);\r\n else thumbBar.appendChild(wrap);\r\n }\r\n\r\n \/\/ Marcar activo si corresponde\r\n wrap.classList.toggle('rvb-active',\r\n isMob() ? idx === mobPage : Math.floor(idx \/ 2) === deskSpread\r\n );\r\n }\r\n\r\n \/* Refresca el spread\/p\u00e1gina m\u00f3vil visible si una p\u00e1gina que acaba de renderizar\r\n es la que est\u00e1 en pantalla actualmente *\/\r\n function refreshVisibleIfNeeded(idx) {\r\n if (isMob()) {\r\n if (idx === mobPage) renderMob(idx);\r\n } else {\r\n const { L, R } = spreadPages(deskSpread);\r\n if (idx === L || idx === R) renderSpread(deskSpread);\r\n }\r\n }\r\n\r\n function showError(e) {\r\n console.error('RevistaVisor error:', e);\r\n \/\/ Usar estilos inline para no depender de clases CSS en innerHTML din\u00e1mico\r\n loadScreen.innerHTML = `\r\n <div style=\"text-align:center;padding:40px 24px;\">\r\n <p style=\"font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:#a09b95;margin-bottom:18px;line-height:1.5;\">\r\n No se pudo cargar el PDF.<br>Verifica tu conexi\\xf3n.\r\n <\/p>\r\n <a href=\"${PDF_URL}\" target=\"_blank\" rel=\"noopener\"\r\n style=\"display:inline-flex;align-items:center;gap:8px;background:#7a3b10;color:#fff;\r\n font-size:10px;letter-spacing:.28em;text-transform:uppercase;\r\n padding:10px 20px;border-radius:1px;text-decoration:none;\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/>\r\n <polyline points=\"7 10 12 15 17 10\"\/>\r\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/>\r\n <\/svg>\r\n Descargar PDF\r\n <\/a>\r\n <\/div>`;\r\n loadScreen.style.display = 'flex';\r\n loadScreen.classList.remove('hidden');\r\n }\r\n\r\n loadPDF();\r\n } \/\/ _init\r\n } \/\/ RevistaVisor\r\n\r\n if (!customElements.get('revista-visor')) {\r\n customElements.define('revista-visor', RevistaVisor);\r\n }\r\n\r\n})();\r\n<\/script>\r\n\r\n<!-- Elemento anfitri\u00f3n: col\u00f3calo donde necesites en tu p\u00e1gina -->\r\n<revista-visor><\/revista-visor>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3cedd40 e-flex e-con-boxed e-con e-parent\" data-id=\"3cedd40\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-54d16f9 elementor-widget elementor-widget-html\" data-id=\"54d16f9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \u00cdNDICE RECURSOS ENERG\u00c9TICOS \u2014 Shadow DOM aislado -->\r\n<!-- Pegar este bloque donde se necesite; no afecta ni es afectado por estilos externos -->\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Mono:wght@300;400&family=Crimson+Pro:ital,wght@0,300;0,400;1,300&display=swap\" rel=\"stylesheet\">\r\n\r\n<revista-indice><\/revista-indice>\r\n\r\n<script>\r\nclass RevistaIndice extends HTMLElement {\r\n connectedCallback() {\r\n const shadow = this.attachShadow({ mode: 'open' });\r\n\r\n shadow.innerHTML = `\r\n <style>\r\n *, *::before, *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n :host {\r\n display: block;\r\n --ink: #3A4E5C;\r\n --accent: #2A7F62;\r\n --muted: #6a8494;\r\n --rule: #b0c4ce;\r\n font-family: 'Crimson Pro', Georgia, serif;\r\n color: var(--ink);\r\n }\r\n\r\n .wrap {\r\n width: 100%;\r\n max-width: 760px;\r\n margin: 0 auto;\r\n padding: 56px 32px;\r\n }\r\n\r\n .header {\r\n margin-bottom: 48px;\r\n opacity: 0;\r\n transform: translateY(14px);\r\n animation: fadeUp 0.7s ease forwards;\r\n }\r\n\r\n .issue-tag {\r\n display: inline-block;\r\n font-family: 'DM Mono', monospace;\r\n font-size: 10px;\r\n font-weight: 400;\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n color: var(--accent);\r\n border: 1px solid var(--accent);\r\n padding: 4px 10px;\r\n margin-bottom: 18px;\r\n }\r\n\r\n h1 {\r\n font-family: 'Playfair Display', serif;\r\n font-size: clamp(1.9rem, 5vw, 3rem);\r\n font-weight: 700;\r\n line-height: 1.05;\r\n letter-spacing: -0.02em;\r\n color: var(--ink);\r\n }\r\n\r\n h1 em {\r\n font-style: italic;\r\n color: var(--accent);\r\n }\r\n\r\n .subtitle {\r\n font-family: 'DM Mono', monospace;\r\n font-size: 10.5px;\r\n color: var(--muted);\r\n letter-spacing: 0.12em;\r\n line-height: 1.2;\r\n text-transform: uppercase;\r\n margin-top: 10px;\r\n }\r\n\r\n .divider-double {\r\n height: 4px;\r\n border-top: 1px solid var(--ink);\r\n border-bottom: 1px solid var(--ink);\r\n margin: 0 0 36px;\r\n }\r\n\r\n .contents-label {\r\n font-family: 'DM Mono', monospace;\r\n font-size: 10px;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: var(--muted);\r\n margin-bottom: 6px;\r\n opacity: 0;\r\n animation: fadeIn 0.6s 0.35s ease forwards;\r\n }\r\n\r\n ul {\r\n list-style: none;\r\n }\r\n\r\n li {\r\n position: relative;\r\n overflow: hidden;\r\n border-bottom: 1px solid var(--rule);\r\n opacity: 0;\r\n transform: translateX(-8px);\r\n animation: slideIn 0.45s ease forwards;\r\n }\r\n\r\n li:first-child { border-top: 1px solid var(--rule); }\r\n\r\n li:nth-child(1) { animation-delay: 0.30s; }\r\n li:nth-child(2) { animation-delay: 0.40s; }\r\n li:nth-child(3) { animation-delay: 0.50s; }\r\n li:nth-child(4) { animation-delay: 0.60s; }\r\n li:nth-child(5) { animation-delay: 0.70s; }\r\n li:nth-child(6) { animation-delay: 0.80s; }\r\n li:nth-child(7) { animation-delay: 0.90s; }\r\n\r\n li::before {\r\n content: '';\r\n position: absolute;\r\n left: 0; top: 0; bottom: 0;\r\n width: 3px;\r\n background: var(--accent);\r\n transform: scaleY(0);\r\n transform-origin: bottom;\r\n transition: transform 0.25s ease;\r\n }\r\n\r\n li:hover::before {\r\n transform: scaleY(1);\r\n transform-origin: top;\r\n }\r\n\r\n .entry {\r\n display: grid;\r\n grid-template-columns: 42px 1fr;\r\n gap: 0 18px;\r\n align-items: start;\r\n padding: 20px 0 20px 4px;\r\n cursor: default;\r\n }\r\n\r\n .num {\r\n font-family: 'Playfair Display', serif;\r\n font-size: 1.55rem;\r\n font-style: italic;\r\n font-weight: 400;\r\n color: var(--rule);\r\n line-height: 1;\r\n padding-top: 2px;\r\n transition: color 0.25s;\r\n user-select: none;\r\n }\r\n\r\n li:hover .num {\r\n color: var(--accent);\r\n }\r\n\r\n .body {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n }\r\n\r\n .title {\r\n font-family: 'Crimson Pro', serif;\r\n font-size: 1.08rem;\r\n font-weight: 400;\r\n line-height: 1.38;\r\n color: var(--ink);\r\n transition: padding 0.18s ease;\r\n }\r\n\r\n li:hover .title {\r\n padding-left: 3px;\r\n }\r\n\r\n .tag {\r\n font-family: 'DM Mono', monospace;\r\n font-size: 9px;\r\n letter-spacing: 0.14em;\r\n text-transform: uppercase;\r\n color: var(--muted);\r\n }\r\n\r\n .footer {\r\n margin-top: 36px;\r\n display: flex;\r\n align-items: center;\r\n opacity: 0;\r\n animation: fadeIn 0.6s 1.05s ease forwards;\r\n }\r\n\r\n .footer-brand {\r\n font-family: 'Playfair Display', serif;\r\n font-style: italic;\r\n font-size: 0.95rem;\r\n color: var(--muted);\r\n white-space: nowrap;\r\n }\r\n\r\n .footer-line {\r\n flex: 1;\r\n height: 1px;\r\n background: var(--rule);\r\n margin: 0 18px;\r\n }\r\n\r\n .footer-year {\r\n font-family: 'DM Mono', monospace;\r\n font-size: 10px;\r\n letter-spacing: 0.1em;\r\n color: var(--muted);\r\n }\r\n\r\n @keyframes fadeUp {\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n @keyframes fadeIn {\r\n to { opacity: 1; }\r\n }\r\n @keyframes slideIn {\r\n to { opacity: 1; transform: translateX(0); }\r\n }\r\n <\/style>\r\n\r\n <div class=\"wrap\">\r\n\r\n <header class=\"header\">\r\n <div class=\"issue-tag\">\u00cdndice \u00b7<\/div>\r\n <h1>Recursos Energ\u00e9ticos<\/h1>\r\n <p class=\"subtitle\">Instituto de Investigaciones en Ingenier\u00eda Petrolera - INSPET<\/p>\r\n <p class=\"subtitle\">Carrera de Ingenier\u00eda Petrolera<\/p>\r\n <p class=\"subtitle\">Universidad Mayor de San Andr\u00e9s<\/p> \r\n \r\n <\/header>\r\n\r\n <div class=\"divider-double\"><\/div>\r\n <p class=\"contents-label\">Contenidos de esta edici\u00f3n<\/p>\r\n\r\n <ul>\r\n <li>\r\n <div class=\"entry\">\r\n <span class=\"num\">1<\/span>\r\n <div class=\"body\">\r\n <span class=\"title\">Simulaci\u00f3n De Un Sistema Fotovoltaico Para La Irrigaci\u00f3n Autom\u00e1tica De Un Cultivo Vertical Hidrop\u00f3nico De <em>Lactuca Sativa<\/em>, En El Municipio De El Alto<\/span>\r\n <span class=\"tag\">Energ\u00eda Solar \u00b7 Agronom\u00eda<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <li>\r\n <div class=\"entry\">\r\n <span class=\"num\">2<\/span>\r\n <div class=\"body\">\r\n <span class=\"title\">Implicaciones de mezclas de etanol en combustibles para Motores de combusti\u00f3n interna, una revisi\u00f3n te\u00f3rica<\/span>\r\n <span class=\"tag\">Combustibles \u00b7 Motores<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <li>\r\n <div class=\"entry\">\r\n <span class=\"num\">3<\/span>\r\n <div class=\"body\">\r\n <span class=\"title\">Transici\u00f3n energ\u00e9tica: Una revisi\u00f3n del rol de los biocombustibles e hidr\u00f3geno verde en Bolivia<\/span>\r\n <span class=\"tag\">Transici\u00f3n Energ\u00e9tica \u00b7 Hidr\u00f3geno<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <li>\r\n <div class=\"entry\">\r\n <span class=\"num\">4<\/span>\r\n <div class=\"body\">\r\n <span class=\"title\">Econom\u00eda pol\u00edtica del colapso gas\u00edfero y las rutas hacia una transici\u00f3n energ\u00e9tica sostenible en Bolivia<\/span>\r\n <span class=\"tag\">Econom\u00eda \u00b7 Gas Natural<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <li>\r\n <div class=\"entry\">\r\n <span class=\"num\">5<\/span>\r\n <div class=\"body\">\r\n <span class=\"title\">Detecci\u00f3n en \u00c1reas de potencial geot\u00e9rmico mediante t\u00e9cnicas y teledetecci\u00f3n remota en el parque nacional Sajama<\/span>\r\n <span class=\"tag\">Geotermia \u00b7 Teledetecci\u00f3n<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <li>\r\n <div class=\"entry\">\r\n <span class=\"num\">6<\/span>\r\n <div class=\"body\">\r\n <span class=\"title\">Geolog\u00eda del Petr\u00f3leo: Potencial Hidrocarbur\u00edfero del Subandino Sur Boliviano<\/span>\r\n <span class=\"tag\">Geolog\u00eda \u00b7 Hidrocarburos<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <li>\r\n <div class=\"entry\">\r\n <span class=\"num\">7<\/span>\r\n <div class=\"body\">\r\n <span class=\"title\">Uranio: Geoqu\u00edmica, mineralog\u00eda, tipos de dep\u00f3sitos a nivel mundial y ocurrencia en Bolivia<\/span>\r\n <span class=\"tag\">Geoqu\u00edmica \u00b7 Mineralog\u00eda<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n\r\n <footer class=\"footer\">\r\n <span class=\"footer-brand\">Recursos Energ\u00e9ticos<\/span>\r\n <div class=\"footer-line\"><\/div>\r\n <span class=\"footer-year\">2026<\/span>\r\n <\/footer>\r\n\r\n <\/div>\r\n `;\r\n }\r\n}\r\n\r\ncustomElements.define('revista-indice', RevistaIndice);\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>INSPET – Header Instituto de Investigaciones en Ingenier\u00eda Petrolera INSPET – UMSA Sobre Nosotros Revistas Investigaciones Servicios REVISTAS En esta […]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5370","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/pages\/5370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/comments?post=5370"}],"version-history":[{"count":314,"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/pages\/5370\/revisions"}],"predecessor-version":[{"id":10113,"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/pages\/5370\/revisions\/10113"}],"wp:attachment":[{"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/media?parent=5370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}