Equipo Docente<\/title>\r\n <style>\r\n \/* ESTILOS ENCAPSULADOS - Solo afectan al contenedor principal *\/\r\n \r\n .equipo-docente-container {\r\n --primary-color: #00453c;\r\n --secondary-color: #ffcc00;\r\n --card-shadow: 0 4px 6px rgba(0, 69, 60, 0.1);\r\n --card-shadow-hover: 0 12px 24px rgba(0, 69, 60, 0.2);\r\n }\r\n\r\n .equipo-docente-container * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .equipo-docente-container {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\r\n width: 100%;\r\n max-width: 100%;\r\n padding: 40px 20px;\r\n }\r\n\r\n .docentes-section {\r\n width: 100%;\r\n max-width: 100%;\r\n margin: 0;\r\n }\r\n\r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .section-title {\r\n font-size: 2.5rem;\r\n color: var(--primary-color);\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n position: relative;\r\n display: inline-block;\r\n }\r\n\r\n .section-title::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 80px;\r\n height: 4px;\r\n background: var(--secondary-color);\r\n border-radius: 2px;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 1.1rem;\r\n color: #666;\r\n margin-top: 20px;\r\n }\r\n\r\n .loader {\r\n text-align: center;\r\n padding: 60px 20px;\r\n }\r\n\r\n .loader-spinner {\r\n width: 50px;\r\n height: 50px;\r\n border: 5px solid #f3f3f3;\r\n border-top: 5px solid var(--primary-color);\r\n border-radius: 50%;\r\n animation: docentes-spin 1s linear infinite;\r\n margin: 0 auto 20px;\r\n }\r\n\r\n @keyframes docentes-spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n .loader-text {\r\n color: var(--primary-color);\r\n font-size: 1.1rem;\r\n }\r\n\r\n .error-message {\r\n background: #ffebee;\r\n border-left: 4px solid #c62828;\r\n padding: 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n color: #c62828;\r\n }\r\n\r\n .docentes-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n gap: 30px;\r\n margin-top: 40px;\r\n opacity: 0;\r\n animation: docentes-fadeIn 0.5s ease forwards;\r\n width: 100%;\r\n max-width: 100%;\r\n }\r\n\r\n @keyframes docentes-fadeIn {\r\n to { opacity: 1; }\r\n }\r\n\r\n .docente-card {\r\n background: white;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: var(--card-shadow);\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n animation: docentes-slideUp 0.5s ease forwards;\r\n opacity: 0;\r\n will-change: transform;\r\n }\r\n\r\n @keyframes docentes-slideUp {\r\n from {\r\n transform: translateY(30px);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .docente-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: var(--card-shadow-hover);\r\n }\r\n\r\n .docente-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .docente-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .photo-wrapper {\r\n padding: 30px 30px 15px;\r\n background: white;\r\n }\r\n\r\n .photo-container {\r\n position: relative;\r\n width: 200px;\r\n height: 200px;\r\n margin: 0 auto;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n background: linear-gradient(135deg, var(--primary-color) 0%, #006b5c 100%);\r\n border: 4px solid var(--secondary-color);\r\n box-shadow: 0 4px 12px rgba(0, 69, 60, 0.2);\r\n }\r\n\r\n .photo-img {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .photo-img.loaded {\r\n opacity: 1;\r\n }\r\n\r\n .initials-placeholder {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n color: var(--secondary-color);\r\n font-size: 3.5rem;\r\n font-weight: bold;\r\n text-align: center;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .card-content {\r\n padding: 20px;\r\n text-align: center;\r\n }\r\n\r\n .docente-name {\r\n font-size: 1.3rem;\r\n color: var(--primary-color);\r\n font-weight: 600;\r\n margin-bottom: 8px;\r\n line-height: 1.4;\r\n }\r\n\r\n .docente-bio {\r\n font-size: 0.9rem;\r\n color: #666;\r\n line-height: 1.6;\r\n margin-bottom: 12px;\r\n text-align: justify;\r\n }\r\n\r\n .docente-materias {\r\n font-size: 0.85rem;\r\n color: #555;\r\n line-height: 1.5;\r\n padding: 10px;\r\n background: #f8f8f8;\r\n border-radius: 6px;\r\n border-left: 3px solid var(--secondary-color);\r\n margin-top: 10px;\r\n text-align: left;\r\n }\r\n\r\n .docente-materias strong {\r\n color: var(--primary-color);\r\n font-weight: 600;\r\n }\r\n\r\n @media (max-width: 1400px) {\r\n .docentes-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .section-title {\r\n font-size: 2rem;\r\n }\r\n\r\n .docentes-grid {\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n }\r\n\r\n .photo-container {\r\n width: 160px;\r\n height: 160px;\r\n }\r\n\r\n .initials-placeholder {\r\n font-size: 2.8rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .equipo-docente-container {\r\n padding: 20px 0;\r\n }\r\n\r\n .section-title {\r\n font-size: 1.6rem;\r\n }\r\n\r\n .section-subtitle {\r\n font-size: 1rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div class=\"equipo-docente-container\">\r\n <section class=\"docentes-section\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Nuestro Equipo Docente<\/h2>\r\n <p class=\"section-subtitle\">Conoce a nuestros profesionales acad\u00e9micos<\/p>\r\n <\/div>\r\n\r\n <div id=\"loader\" class=\"loader\">\r\n <div class=\"loader-spinner\"><\/div>\r\n <p class=\"loader-text\">Cargando informaci\u00f3n de docentes...<\/p>\r\n <\/div>\r\n\r\n <div id=\"errorContainer\"><\/div>\r\n\r\n <div id=\"docentesGrid\" class=\"docentes-grid\" style=\"display: none;\"><\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/papaparse@5.4.1\/papaparse.min.js\"><\/script>\r\n <script>\r\n \/\/ ID de la hoja de Google Sheets publicada\r\n const SHEET_ID = '2PACX-1vQFmQuMWFVA-LFAy9qJhjpzHedzCzgD8ZaBlWn_NBzZFbN36aA-qQrd3-UmWEgNJt_S66XpXefHJSzF';\r\n const CSV_URL = `https:\/\/docs.google.com\/spreadsheets\/d\/e\/${SHEET_ID}\/pub?output=csv`;\r\n\r\n function cleanText(text) {\r\n if (!text) return '';\r\n return String(text).trim();\r\n }\r\n\r\n function getInitials(name) {\r\n const words = name.split(' ').filter(w => w.length > 0);\r\n if (words.length >= 2) {\r\n return (words[0][0] + words[words.length - 1][0]).toUpperCase();\r\n }\r\n return words[0] ? words[0].substring(0, 2).toUpperCase() : '??';\r\n }\r\n\r\n function convertDriveUrl(url) {\r\n if (!url || url.trim() === '') return '';\r\n \r\n url = url.trim();\r\n let fileId = '';\r\n \r\n \/\/ Extraer ID de diferentes formatos de URL de Google Drive\r\n if (url.includes('drive.google.com\/file\/d\/')) {\r\n const match = url.match(\/\\\/d\\\/([^\\\/\\?]+)\/);\r\n if (match) fileId = match[1];\r\n }\r\n else if (url.includes('drive.google.com\/open?id=')) {\r\n const match = url.match(\/id=([^&]+)\/);\r\n if (match) fileId = match[1];\r\n }\r\n else if (url.includes('id=')) {\r\n const match = url.match(\/id=([^&]+)\/);\r\n if (match) fileId = match[1];\r\n }\r\n \r\n \/\/ Convertir a URL de thumbnail optimizada\r\n if (fileId) {\r\n return `https:\/\/drive.google.com\/thumbnail?id=${fileId}&sz=w400`;\r\n }\r\n \r\n \/\/ Si ya es una URL directa de imagen\r\n if (url.startsWith('http')) {\r\n return url;\r\n }\r\n \r\n return '';\r\n }\r\n\r\n async function loadDocentesData() {\r\n const loader = document.getElementById('loader');\r\n const errorContainer = document.getElementById('errorContainer');\r\n const grid = document.getElementById('docentesGrid');\r\n\r\n try {\r\n Papa.parse(CSV_URL, {\r\n download: true,\r\n header: false,\r\n skipEmptyLines: true,\r\n complete: function(results) {\r\n try {\r\n const rows = results.data;\r\n \r\n if (!rows || rows.length < 2) {\r\n throw new Error('No hay datos en la hoja de Google Sheets.');\r\n }\r\n\r\n console.log('\u2705 Docentes cargados desde Google Sheets:', rows.length - 1);\r\n \r\n generateCards(rows);\r\n \r\n loader.style.display = 'none';\r\n grid.style.display = 'grid';\r\n \r\n } catch (error) {\r\n throw error;\r\n }\r\n },\r\n error: function(error) {\r\n throw new Error('Error al conectar con Google Sheets: ' + error.message);\r\n }\r\n });\r\n\r\n } catch (error) {\r\n console.error('\u274c Error:', error);\r\n loader.style.display = 'none';\r\n \r\n errorContainer.innerHTML = `\r\n <div class=\"error-message\">\r\n <strong>\u26a0\ufe0f Error al cargar los datos<\/strong><br><br>\r\n ${error.message}<br><br>\r\n Verifica que la hoja de Google Sheets est\u00e9 publicada correctamente.\r\n <\/div>\r\n `;\r\n }\r\n }\r\n\r\n function generateCards(rows) {\r\n const grid = document.getElementById('docentesGrid');\r\n grid.innerHTML = '';\r\n\r\n \/\/ Iterar desde la fila 2 (\u00edndice 1) para saltar encabezados\r\n for (let i = 1; i < rows.length; i++) {\r\n const row = rows[i];\r\n \r\n \/\/ Validar que haya un nombre\r\n if (!row[0] || row[0].trim() === '') continue;\r\n \r\n const nombre = cleanText(row[0]) || 'Sin nombre';\r\n const fotoUrlOriginal = cleanText(row[1]) || '';\r\n const biografia = cleanText(row[2]) || 'Docente universitario con amplia trayectoria acad\u00e9mica.';\r\n const materias = cleanText(row[3]) || '';\r\n\r\n const fotoUrl = convertDriveUrl(fotoUrlOriginal);\r\n\r\n const card = createCard({\r\n nombre,\r\n fotoUrl,\r\n biografia,\r\n materias\r\n }, i);\r\n\r\n grid.appendChild(card);\r\n }\r\n }\r\n\r\n function createCard(data, index) {\r\n const card = document.createElement('div');\r\n card.className = 'docente-card';\r\n card.style.animationDelay = `${index * 0.05}s`;\r\n\r\n const materiasHTML = data.materias ? `\r\n <div class=\"docente-materias\">\r\n <strong>Materias:<\/strong> ${data.materias}\r\n <\/div>\r\n ` : '';\r\n\r\n const initials = getInitials(data.nombre);\r\n\r\n let imageHTML = '';\r\n if (data.fotoUrl && data.fotoUrl.trim() !== '') {\r\n \/\/ Si hay URL de foto de Google Drive\r\n imageHTML = `\r\n <img decoding=\"async\" src=\"${data.fotoUrl}\" \r\n alt=\"Foto de ${data.nombre}\" \r\n class=\"photo-img\"\r\n loading=\"lazy\"\r\n onload=\"this.classList.add('loaded'); this.nextElementSibling.style.display='none';\"\r\n onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\r\n <div class=\"initials-placeholder\">${initials}<\/div>\r\n `;\r\n } else {\r\n \/\/ Si no hay foto, mostrar iniciales\r\n imageHTML = `<div class=\"initials-placeholder\">${initials}<\/div>`;\r\n }\r\n\r\n card.innerHTML = `\r\n <div class=\"photo-wrapper\">\r\n <div class=\"photo-container\">\r\n ${imageHTML}\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-content\">\r\n <h3 class=\"docente-name\">${data.nombre}<\/h3>\r\n <p class=\"docente-bio\">${data.biografia}<\/p>\r\n ${materiasHTML}\r\n <\/div>\r\n `;\r\n\r\n return card;\r\n }\r\n\r\n \/\/ Cargar datos cuando el DOM est\u00e9 listo\r\n document.addEventListener('DOMContentLoaded', loadDocentesData);\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-b2df95a e-flex e-con-boxed e-con e-parent\" data-id=\"b2df95a\" 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-bac5a8f elementor-widget elementor-widget-html\" data-id=\"bac5a8f\" 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>Secci\u00f3n de Navegaci\u00f3n<\/title>\r\n <style>\r\n .navigation-section {\r\n width: 100%;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 60px 20px;\r\n }\r\n\r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .section-header h2 {\r\n color: #00453C;\r\n font-size: 2.5rem;\r\n font-weight: 700;\r\n margin-bottom: 15px;\r\n position: relative;\r\n display: inline-block;\r\n }\r\n\r\n .section-header h2::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -12px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 100px;\r\n height: 4px;\r\n background: #ffcc00;\r\n border-radius: 2px;\r\n }\r\n\r\n .section-header p {\r\n color: #666;\r\n font-size: 1.1rem;\r\n margin-top: 25px;\r\n line-height: 1.6;\r\n }\r\n\r\n .nav-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n width: 100%;\r\n }\r\n\r\n .nav-card {\r\n position: relative;\r\n background: white;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n border: 3px solid transparent;\r\n cursor: pointer;\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);\r\n aspect-ratio: 1 \/ 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .nav-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(135deg, #00453C 0%, #006b5a 100%);\r\n z-index: 0;\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n .nav-card:hover::before {\r\n transform: scale(1.08);\r\n }\r\n\r\n .nav-card:hover {\r\n transform: translateY(-12px);\r\n box-shadow: 0 20px 45px rgba(0, 69, 60, 0.35);\r\n border-color: #ffcc00;\r\n }\r\n\r\n .nav-card-content {\r\n position: relative;\r\n z-index: 1;\r\n padding: 7%;\r\n text-align: center;\r\n color: white;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: space-between;\r\n height: 100%;\r\n width: 100%;\r\n }\r\n\r\n .nav-icon {\r\n width: 16%;\r\n height: 16%;\r\n max-width: 60px;\r\n max-height: 60px;\r\n min-width: 35px;\r\n min-height: 35px;\r\n margin: 0 auto;\r\n background: #ffcc00;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: clamp(1rem, 4.5vw, 1.7rem);\r\n transition: all 0.4s ease;\r\n box-shadow: 0 6px 20px rgba(255, 204, 0, 0.35);\r\n flex-shrink: 0;\r\n }\r\n\r\n .nav-card:hover .nav-icon {\r\n transform: rotateY(360deg) scale(1.1);\r\n background: #ffd633;\r\n box-shadow: 0 10px 30px rgba(255, 204, 0, 0.55);\r\n }\r\n\r\n .nav-text-content {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n margin: 4% 0;\r\n overflow: hidden;\r\n }\r\n\r\n .nav-card h3 {\r\n font-size: clamp(0.7rem, 2.2vw, 0.95rem);\r\n margin-bottom: 2%;\r\n font-weight: 600;\r\n color: white;\r\n line-height: 1.15;\r\n }\r\n\r\n .nav-card p {\r\n font-size: clamp(0.55rem, 1.5vw, 0.7rem);\r\n color: rgba(255, 255, 255, 0.92);\r\n line-height: 1.25;\r\n }\r\n\r\n .nav-btn {\r\n display: inline-block;\r\n padding: clamp(6px, 2.5%, 10px) clamp(14px, 5%, 22px);\r\n background: #ffcc00;\r\n color: #00453C;\r\n text-decoration: none;\r\n border-radius: 20px;\r\n font-weight: 600;\r\n font-size: clamp(0.6rem, 1.8vw, 0.8rem);\r\n transition: all 0.3s ease;\r\n border: 2px solid #ffcc00;\r\n flex-shrink: 0;\r\n white-space: nowrap;\r\n }\r\n\r\n .nav-btn:hover {\r\n background: transparent;\r\n color: #ffcc00;\r\n transform: scale(1.05);\r\n }\r\n\r\n \/* Animaci\u00f3n de entrada *\/\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .nav-card {\r\n animation: fadeInUp 0.7s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n .nav-card:nth-child(1) { animation-delay: 0.1s; }\r\n .nav-card:nth-child(2) { animation-delay: 0.2s; }\r\n .nav-card:nth-child(3) { animation-delay: 0.3s; }\r\n .nav-card:nth-child(4) { animation-delay: 0.4s; }\r\n\r\n \/* Tablet *\/\r\n @media (max-width: 1024px) {\r\n .nav-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n }\r\n\r\n \/* Mobile - 2 columnas *\/\r\n @media (max-width: 768px) {\r\n .navigation-section {\r\n padding: 30px 12px;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: 25px;\r\n }\r\n\r\n .section-header h2 {\r\n font-size: 1.5rem;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .section-header h2::after {\r\n width: 60px;\r\n height: 3px;\r\n bottom: -8px;\r\n }\r\n\r\n .section-header p {\r\n font-size: 0.85rem;\r\n margin-top: 15px;\r\n line-height: 1.4;\r\n }\r\n\r\n .nav-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 12px;\r\n }\r\n\r\n .nav-card {\r\n border-radius: 12px;\r\n border-width: 2px;\r\n }\r\n\r\n .nav-card:hover {\r\n transform: translateY(-6px);\r\n }\r\n\r\n .nav-card-content {\r\n padding: 6%;\r\n }\r\n }\r\n\r\n \/* Mobile muy peque\u00f1o *\/\r\n @media (max-width: 480px) {\r\n .navigation-section {\r\n padding: 25px 10px;\r\n }\r\n\r\n .section-header h2 {\r\n font-size: 1.3rem;\r\n }\r\n\r\n .section-header p {\r\n font-size: 0.8rem;\r\n }\r\n\r\n .nav-grid {\r\n gap: 10px;\r\n }\r\n\r\n .nav-card-content {\r\n padding: 5%;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"navigation-section\">\r\n <div class=\"section-header\">\r\n <h2>Accesos R\u00e1pidos<\/h2>\r\n <p>Encuentra toda la informaci\u00f3n acad\u00e9mica que necesitas<\/p>\r\n <\/div>\r\n\r\n <div class=\"nav-grid\">\r\n <div class=\"nav-card\">\r\n <div class=\"nav-card-content\">\r\n <div class=\"nav-icon\">\ud83d\udd50<\/div>\r\n <div class=\"nav-text-content\">\r\n <h3>Horarios Pregrado<\/h3>\r\n <p>Consulta los horarios acad\u00e9micos de todas los semestres y Aulas<\/p>\r\n <\/div>\r\n <a href=\"#horarios\" class=\"nav-btn\">Ver Horarios<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"nav-card\">\r\n <div class=\"nav-card-content\">\r\n <div class=\"nav-icon\">\ud83d\udcda<\/div>\r\n <div class=\"nav-text-content\">\r\n <h3>Plan de Estudios Pregrado<\/h3>\r\n <p>Conoce la estructura curricular y malla acad\u00e9mica completa<\/p>\r\n <\/div>\r\n <a href=\"https:\/\/petrolera.umsa.edu.bo\/index.php\/plan-de-estudios\" class=\"nav-btn\">Explorar Plan<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"nav-card\">\r\n <div class=\"nav-card-content\">\r\n <div class=\"nav-icon\">\ud83d\udcd6<\/div>\r\n <div class=\"nav-text-content\">\r\n <h3>Biblioteca<\/h3>\r\n <p>Accede al cat\u00e1logo digital y recursos bibliogr\u00e1ficos, Pr\u00e1cticas de Campo, Proyectos de Grado, Proyectos de Maestr\u00eda y mucho m\u00e1s en l\u00ednea<\/p>\r\n <\/div>\r\n <a href=\"https:\/\/petrolera.umsa.edu.bo\/index.php\/biblioteca\" class=\"nav-btn\">Ir a Biblioteca<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"nav-card\">\r\n <div class=\"nav-card-content\">\r\n <div class=\"nav-icon\">\ud83d\udd2c<\/div>\r\n <div class=\"nav-text-content\">\r\n <h3>Instituto de Investigaciones en Ingenier\u00eda Petrolera<\/h3>\r\n <p>Proyectos,Revistas publicaciones y avances cient\u00edficos institucionales<\/p>\r\n <\/div>\r\n <a href=\"https:\/\/petrolera.umsa.edu.bo\/index.php\/inspet\" class=\"nav-btn\">Conocer M\u00e1s<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ Efecto parallax suave solo en desktop\r\n if (window.innerWidth > 768) {\r\n document.addEventListener('mousemove', (e) => {\r\n const cards = document.querySelectorAll('.nav-card');\r\n const x = e.clientX \/ window.innerWidth;\r\n const y = e.clientY \/ window.innerHeight;\r\n \r\n cards.forEach((card, index) => {\r\n if (!card.matches(':hover')) {\r\n const speed = (index + 1) * 1.5;\r\n const xOffset = (x - 0.5) * speed;\r\n const yOffset = (y - 0.5) * speed;\r\n card.style.transform = `translate(${xOffset}px, ${yOffset}px)`;\r\n }\r\n });\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Nuestros Docentes El equipo de docentes de la Carrera de Ingenier\u00eda Petrolera de la Universidad\u00a0 Mayor de San Andr\u00e9s est\u00e1 […]<\/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-1924","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/pages\/1924","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=1924"}],"version-history":[{"count":132,"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/pages\/1924\/revisions"}],"predecessor-version":[{"id":10203,"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/pages\/1924\/revisions\/10203"}],"wp:attachment":[{"href":"https:\/\/petrolera.umsa.edu.bo\/index.php\/wp-json\/wp\/v2\/media?parent=1924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}