Redes Planta-Insecto: Un An\u00e1lisis Interactivo<\/title><br \/>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <br \/>\n <br \/>\n <br \/>\n <\/p>\n<style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #FDFBF8;\n color: #4A4A4A;\n }\n .nav-link {\n transition: color 0.3s, border-bottom-color 0.3s;\n border-bottom: 2px solid transparent;\n }\n .nav-link:hover, .nav-link.active {\n color: #38A169; \/* green-600 *\/\n border-bottom-color: #38A169;\n }\n .card {\n background-color: #FFFFFF;\n border: 1px solid #E2E8F0;\n border-radius: 0.75rem;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n transition: transform 0.3s, box-shadow 0.3s;\n }\n .card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n }\n .tab-button {\n transition: all 0.3s;\n }\n .tab-button.active {\n background-color: #38A169;\n color: #FFFFFF;\n box-shadow: 0 4px 14px 0 rgba(56, 161, 105, 0.39);\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 500px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 400px;\n }\n }\n <\/style>\n<p><\/head><br \/>\n<body class=\"antialiased\"><\/p>\n<p> <\/p>\n<header class=\"bg-white\/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm\">\n<nav class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\n<div class=\"text-2xl font-bold text-gray-800\">\n <span class=\"text-green-600\">Eco<\/span>Redes\n <\/div>\n<div class=\"hidden md:flex space-x-8\">\n <a href=\"#fundamentos\" class=\"nav-link text-gray-600 font-semibold pb-1\">Fundamentos<\/a><br \/>\n <a href=\"#metricas\" class=\"nav-link text-gray-600 font-semibold pb-1\">M\u00e9tricas<\/a><br \/>\n <a href=\"#amenazas\" class=\"nav-link text-gray-600 font-semibold pb-1\">Amenazas<\/a><br \/>\n <a href=\"#modelado\" class=\"nav-link text-gray-600 font-semibold pb-1\">Modelado<\/a>\n <\/div>\n<p> <button id=\"mobile-menu-button\" class=\"md:hidden focus:outline-none\"><br \/>\n <svg class=\"w-6 h-6 text-gray-600\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path d=\"M4 6h16M4 12h16m-7 6h7\"><\/path>\n <\/svg><br \/>\n <\/button><br \/>\n <\/nav>\n<p> <\/p>\n<div id=\"mobile-menu\" class=\"hidden md:hidden px-6 pb-4\">\n <a href=\"#fundamentos\" class=\"block py-2 text-gray-600\">Fundamentos<\/a><br \/>\n <a href=\"#metricas\" class=\"block py-2 text-gray-600\">M\u00e9tricas<\/a><br \/>\n <a href=\"#amenazas\" class=\"block py-2 text-gray-600\">Amenazas<\/a><br \/>\n <a href=\"#modelado\" class=\"block py-2 text-gray-600\">Modelado<\/a>\n <\/div>\n<\/header>\n<p> <br \/>\n <main class=\"container mx-auto px-6 py-12\"><\/p>\n<p> <\/p>\n<section class=\"text-center mb-20\">\n<h1 class=\"text-4xl md:text-6xl font-extrabold text-gray-800 mb-4\">La Arquitectura Oculta de la Biodiversidad<\/h1>\n<p class=\"text-lg md:text-xl text-gray-600 max-w-3xl mx-auto\">\n Una exploraci\u00f3n interactiva de las redes planta-insecto, su importancia cr\u00edtica, las m\u00e9tricas que las definen y las amenazas que enfrentan en un mundo cambiante.\n <\/p>\n<\/section>\n<p> <\/p>\n<section id=\"fundamentos\" class=\"mb-24 scroll-mt-20\">\n<h2 class=\"text-3xl font-bold text-center mb-4 text-gray-800\">Fundamentos de las Interacciones<\/h2>\n<p class=\"text-center text-gray-600 mb-12 max-w-2xl mx-auto\">Las interacciones entre plantas e insectos son la base de los ecosistemas terrestres. Se dividen principalmente en dos tipos: mutualistas, donde ambos se benefician, y antag\u00f3nicas, donde uno se beneficia a expensas del otro. Comprender esta dualidad es clave para analizar la estructura y salud del ecosistema.<\/p>\n<div class=\"grid md:grid-cols-2 gap-10\">\n<div class=\"card p-8 text-center\">\n<div class=\"text-5xl mb-4\">\ud83e\udd1d<\/div>\n<h3 class=\"text-2xl font-bold mb-3 text-green-700\">Mutualismo: Polinizaci\u00f3n<\/h3>\n<p class=\"text-gray-600\">Una relaci\u00f3n de beneficio mutuo. Las plantas logran la reproducci\u00f3n y diversidad gen\u00e9tica a trav\u00e9s de la dispersi\u00f3n de polen, mientras los insectos obtienen recursos vitales como n\u00e9ctar y polen. Este servicio ecosist\u00e9mico es responsable de m\u00e1s de un tercio de los alimentos que consumimos.<\/p>\n<\/p><\/div>\n<div class=\"card p-8 text-center\">\n<div class=\"text-5xl mb-4\">\u2694\ufe0f<\/div>\n<h3 class=\"text-2xl font-bold mb-3 text-red-700\">Antagonismo: Herbivor\u00eda<\/h3>\n<p class=\"text-gray-600\">Una relaci\u00f3n de conflicto. Los insectos consumen tejidos vegetales para su sustento, lo que impacta negativamente la supervivencia y reproducci\u00f3n de la planta. Como respuesta, las plantas han desarrollado complejas defensas f\u00edsicas y qu\u00edmicas para disuadir a los herb\u00edvoros.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p> <\/p>\n<section id=\"metricas\" class=\"mb-24 scroll-mt-20\">\n<h2 class=\"text-3xl font-bold text-center mb-4 text-gray-800\">Anatom\u00eda de una Red Ecol\u00f3gica<\/h2>\n<p class=\"text-center text-gray-600 mb-12 max-w-2xl mx-auto\">Para entender la complejidad de estas redes, los ec\u00f3logos utilizan diversas m\u00e9tricas que describen su estructura y robustez. Estas m\u00e9tricas nos ayudan a cuantificar la salud del ecosistema y predecir su respuesta a las perturbaciones. Explora las m\u00e9tricas clave a continuaci\u00f3n.<\/p>\n<div class=\"grid lg:grid-cols-2 gap-12 items-center\">\n<div class=\"chart-container\">\n <canvas id=\"metricsChart\"><\/canvas>\n <\/div>\n<div>\n<div id=\"metrics-controls\" class=\"flex flex-wrap justify-center gap-3 mb-6\">\n <button data-metric=\"conectancia\" class=\"metric-btn px-4 py-2 rounded-full text-sm font-semibold bg-gray-200 text-gray-700\">Conectancia<\/button><br \/>\n <button data-metric=\"anidamiento\" class=\"metric-btn px-4 py-2 rounded-full text-sm font-semibold bg-gray-200 text-gray-700\">Anidamiento<\/button><br \/>\n <button data-metric=\"modularidad\" class=\"metric-btn px-4 py-2 rounded-full text-sm font-semibold bg-gray-200 text-gray-700\">Modularidad<\/button><br \/>\n <button data-metric=\"especializacion\" class=\"metric-btn px-4 py-2 rounded-full text-sm font-semibold bg-gray-200 text-gray-700\">Especializaci\u00f3n<\/button>\n <\/div>\n<div id=\"metric-description\" class=\"card p-6 min-h-[180px]\">\n<h3 id=\"metric-title\" class=\"text-xl font-bold mb-2 text-blue-700\">Selecciona una m\u00e9trica<\/h3>\n<p id=\"metric-text\" class=\"text-gray-600\">Haz clic en los botones de arriba para explorar cada m\u00e9trica y ver su representaci\u00f3n en una red hipot\u00e9tica. Cada m\u00e9trica revela una faceta diferente de la estructura y estabilidad de la red.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p> <\/p>\n<section id=\"amenazas\" class=\"mb-24 scroll-mt-20\">\n<h2 class=\"text-3xl font-bold text-center mb-4 text-gray-800\">Amenazas en un Mundo Cambiante<\/h2>\n<p class=\"text-center text-gray-600 mb-12 max-w-2xl mx-auto\">Las actividades humanas ejercen una presi\u00f3n sin precedentes sobre estas delicadas redes. La p\u00e9rdida de h\u00e1bitat, el cambio clim\u00e1tico, los pesticidas y las especies invasoras alteran su estructura, amenazando su estabilidad y los servicios ecosist\u00e9micos que proporcionan.<\/p>\n<div class=\"flex flex-col lg:flex-row gap-8\">\n<div class=\"lg:w-1\/3\">\n<div id=\"threats-tabs\" class=\"flex lg:flex-col gap-2\">\n <button data-threat=\"habitat\" class=\"tab-button w-full text-left p-4 rounded-lg flex items-center gap-4 active\"><br \/>\n <span class=\"text-2xl\">\ud83c\udfde\ufe0f<\/span> <span class=\"font-semibold\">P\u00e9rdida de H\u00e1bitat<\/span><br \/>\n <\/button><br \/>\n <button data-threat=\"clima\" class=\"tab-button w-full text-left p-4 rounded-lg flex items-center gap-4\"><br \/>\n <span class=\"text-2xl\">\ud83c\udf21\ufe0f<\/span> <span class=\"font-semibold\">Cambio Clim\u00e1tico<\/span><br \/>\n <\/button><br \/>\n <button data-threat=\"pesticidas\" class=\"tab-button w-full text-left p-4 rounded-lg flex items-center gap-4\"><br \/>\n <span class=\"text-2xl\">\ud83e\uddea<\/span> <span class=\"font-semibold\">Uso de Pesticidas<\/span><br \/>\n <\/button><br \/>\n <button data-threat=\"invasoras\" class=\"tab-button w-full text-left p-4 rounded-lg flex items-center gap-4\"><br \/>\n <span class=\"text-2xl\">\ud83e\udd97<\/span> <span class=\"font-semibold\">Especies Invasoras<\/span><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<div class=\"lg:w-2\/3 card p-6\">\n<div id=\"threat-content\">\n \n <\/div>\n<div class=\"mt-6\">\n<h4 class=\"font-bold text-center mb-2\">Impacto Relativo en la Red<\/h4>\n<div class=\"chart-container h-64 md:h-80\">\n <canvas id=\"threatsChart\"><\/canvas>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p> <\/p>\n<section id=\"modelado\" class=\"scroll-mt-20\">\n<h2 class=\"text-3xl font-bold text-center mb-4 text-gray-800\">Modelado, Resiliencia y Futuro<\/h2>\n<p class=\"text-center text-gray-600 mb-12 max-w-2xl mx-auto\">La modelaci\u00f3n matem\u00e1tica es una herramienta crucial para predecir c\u00f3mo responder\u00e1n las redes a las perturbaciones y para dise\u00f1ar estrategias de conservaci\u00f3n efectivas. Entender la resiliencia nos permite “cambiar para resistir” y asegurar el futuro de estos sistemas vitales.<\/p>\n<div id=\"resilience-accordion\" class=\"space-y-4\">\n<div class=\"card overflow-hidden\">\n <button class=\"accordion-header w-full text-left p-5 font-semibold text-lg flex justify-between items-center\" data-target=\"content-1\"><br \/>\n <span>Reconfiguraci\u00f3n de la Red (Rewiring)<\/span><br \/>\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span><br \/>\n <\/button><\/p>\n<div id=\"content-1\" class=\"accordion-content p-5 pt-0\" style=\"display: none;\">\n<p class=\"text-gray-600\">Este mecanismo implica que las especies cambian sus interacciones en respuesta a perturbaciones. Estructuras como la modularidad (grupos densos de interacci\u00f3n) y el anidamiento (especialistas interactuando con generalistas) pueden amortiguar la propagaci\u00f3n de impactos negativos, fomentando la resiliencia del sistema.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"card overflow-hidden\">\n <button class=\"accordion-header w-full text-left p-5 font-semibold text-lg flex justify-between items-center\" data-target=\"content-2\"><br \/>\n <span>Aumento de la Heterogeneidad<\/span><br \/>\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span><br \/>\n <\/button><\/p>\n<div id=\"content-2\" class=\"accordion-content p-5 pt-0\" style=\"display: none;\">\n<p class=\"text-gray-600\">La diversidad, tanto a nivel de especies (funcional) como dentro de las especies (gen\u00e9tica), es clave para la estabilidad. Una mayor diversidad de rasgos y genes en la comunidad aumenta la capacidad de la red para resistir y recuperarse de las perturbaciones, como las defensas variadas contra herb\u00edvoros.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"card overflow-hidden\">\n <button class=\"accordion-header w-full text-left p-5 font-semibold text-lg flex justify-between items-center\" data-target=\"content-3\"><br \/>\n <span>Modelos Predictivos<\/span><br \/>\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span><br \/>\n <\/button><\/p>\n<div id=\"content-3\" class=\"accordion-content p-5 pt-0\" style=\"display: none;\">\n<p class=\"text-gray-600\">Los modelos matem\u00e1ticos, como los de Ecuaciones Diferenciales (ej. SEI\/SEDI) o los eco-epid\u00e9micos, son esenciales. Permiten simular la din\u00e1mica de plagas, la efectividad de las defensas vegetales y el impacto del cambio clim\u00e1tico, guiando estrategias de manejo integrado y conservaci\u00f3n basadas en evidencia cuantitativa.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p> <\/main><\/p>\n<footer class=\"bg-gray-800 text-white mt-20\">\n<div class=\"container mx-auto px-6 py-8 text-center\">\n<p>© 2025 EcoRedes. Un proyecto de visualizaci\u00f3n de datos ecol\u00f3gicos.<\/p>\n<p class=\"text-sm text-gray-400 mt-2\">Basado en el informe “Redes de Interacci\u00f3n Planta-Insecto: Polinizaci\u00f3n, Herbivor\u00eda, Din\u00e1micas, M\u00e9tricas e Impacto Antropog\u00e9nico”.<\/p>\n<\/p><\/div>\n<\/footer>\n<p> <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Mobile Menu\n const mobileMenuButton = document.getElementById('mobile-menu-button');\n const mobileMenu = document.getElementById('mobile-menu');\n mobileMenuButton.addEventListener('click', () => {\n mobileMenu.classList.toggle('hidden');\n });<\/p>\n<p> \/\/ Smooth scrolling for nav links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n if(mobileMenu.classList.contains('hidden') === false){\n mobileMenu.classList.add('hidden');\n }\n });\n });<\/p>\n<p> \/\/ Active nav link on scroll\n const sections = document.querySelectorAll('section');\n const navLinks = document.querySelectorAll('.nav-link');\n window.onscroll = () => {\n let current = '';\n sections.forEach(section => {\n const sectionTop = section.offsetTop;\n if (pageYOffset >= sectionTop - 100) {\n current = section.getAttribute('id');\n }\n });<\/p>\n<p> navLinks.forEach(link => {\n link.classList.remove('active');\n if (link.getAttribute('href').includes(current)) {\n link.classList.add('active');\n }\n });\n };<\/p>\n<p> \/\/ Metrics Chart Logic\n const metricsData = {\n conectancia: {\n title: 'Conectancia',\n text: 'Mide la densidad de interacciones. Es la proporci\u00f3n de enlaces observados frente a todos los posibles. Una conectancia muy alta o muy baja puede ser perjudicial; un valor intermedio a menudo indica una red robusta pero no tan interconectada como para que las perturbaciones se propaguen instant\u00e1neamente.',\n values: [8, 4, 5, 3]\n },\n anidamiento: {\n title: 'Anidamiento',\n text: 'Describe un patr\u00f3n donde los especialistas interact\u00faan con un subconjunto de las especies con las que interact\u00faan los generalistas. Un alto anidamiento promueve la resiliencia al ofrecer \"respaldos\" a las especies especialistas, aumentando la coexistencia.',\n values: [4, 9, 6, 7]\n },\n modularidad: {\n title: 'Modularidad',\n text: 'Indica la presencia de grupos (m\u00f3dulos) de especies que interact\u00faan m\u00e1s entre s\u00ed que con el resto de la red. La modularidad puede amortiguar las perturbaciones, conteni\u00e9ndolas dentro de un m\u00f3dulo y protegiendo la estabilidad general de la red.',\n values: [5, 6, 9, 5]\n },\n especializacion: {\n title: 'Especializaci\u00f3n',\n text: 'Refleja el grado de dependencia entre especies. Una alta especializaci\u00f3n puede indicar coevoluci\u00f3n, pero tambi\u00e9n aumenta la vulnerabilidad. Si un socio desaparece, el especialista queda en grave riesgo. Las redes con una mezcla de especialistas y generalistas suelen ser m\u00e1s estables.',\n values: [3, 7, 4, 9]\n }\n };<\/p>\n<p> const metricsCtx = document.getElementById('metricsChart').getContext('2d');\n let metricsChart = new Chart(metricsCtx, {\n type: 'radar',\n data: {\n labels: ['Estabilidad', 'Resiliencia', 'Robustez', 'Vulnerabilidad'],\n datasets: [{\n label: 'M\u00e9trica seleccionada',\n data: [0, 0, 0, 0],\n backgroundColor: 'rgba(56, 161, 105, 0.2)',\n borderColor: 'rgba(56, 161, 105, 1)',\n borderWidth: 2,\n pointBackgroundColor: 'rgba(56, 161, 105, 1)'\n }]\n },\n options: {\n maintainAspectRatio: false,\n scales: {\n r: {\n angleLines: {\n color: '#E2E8F0'\n },\n grid: {\n color: '#E2E8F0'\n },\n pointLabels: {\n font: {\n size: 14,\n weight: 'bold'\n },\n color: '#4A5568'\n },\n ticks: {\n beginAtZero: true,\n max: 10,\n stepSize: 2,\n backdropColor: 'rgba(253, 251, 248, 0.75)'\n }\n }\n },\n plugins: {\n legend: {\n display: false\n }\n }\n }\n });<\/p>\n<p> const metricButtons = document.querySelectorAll('.metric-btn');\n const metricTitleEl = document.getElementById('metric-title');\n const metricTextEl = document.getElementById('metric-text');<\/p>\n<p> function updateMetricInfo(metricKey) {\n const data = metricsData[metricKey];\n metricTitleEl.textContent = data.title;\n metricTextEl.textContent = data.text;\n metricsChart.data.datasets[0].data = data.values;\n metricsChart.data.datasets[0].label = data.title;\n metricsChart.update();<\/p>\n<p> metricButtons.forEach(btn => {\n btn.classList.remove('bg-blue-500', 'text-white');\n btn.classList.add('bg-gray-200', 'text-gray-700');\n });\n const activeBtn = document.querySelector(`.metric-btn[data-metric=\"${metricKey}\"]`);\n activeBtn.classList.add('bg-blue-500', 'text-white');\n activeBtn.classList.remove('bg-gray-200', 'text-gray-700');\n }<\/p>\n<p> metricButtons.forEach(button => {\n button.addEventListener('click', (e) => {\n const metricKey = e.target.dataset.metric;\n updateMetricInfo(metricKey);\n });\n });<\/p>\n<p> \/\/ Threats Chart Logic\n const threatsData = {\n habitat: {\n title: 'P\u00e9rdida y Fragmentaci\u00f3n de H\u00e1bitat',\n text: 'La causa fundamental del declive de polinizadores. La destrucci\u00f3n de h\u00e1bitats reduce la disponibilidad de flores y sitios de anidaci\u00f3n. La fragmentaci\u00f3n a\u00edsla poblaciones, disminuye el flujo gen\u00e9tico y provoca la p\u00e9rdida de interacciones especializadas, haciendo las redes m\u00e1s simples y fr\u00e1giles.',\n values: [9, 7, 8, 5]\n },\n clima: {\n title: 'Cambio Clim\u00e1tico',\n text: 'Altera la sincron\u00eda entre plantas y polinizadores (desacoplamiento fenol\u00f3gico). Si las flores abren antes de que los insectos est\u00e9n activos, la polinizaci\u00f3n falla. El aumento de temperaturas y sequ\u00edas tambi\u00e9n reduce la calidad y cantidad de n\u00e9ctar, afectando la salud de los polinizadores.',\n values: [7, 9, 6, 8]\n },\n pesticidas: {\n title: 'Uso de Pesticidas',\n text: 'Los insecticidas, fungicidas y herbicidas tienen efectos letales y subletales. Afectan la memoria, navegaci\u00f3n y forrajeo de los polinizadores, debilitando las interacciones. La exposici\u00f3n cr\u00f3nica puede llevar a un colapso abrupto de la comunidad (punto de inflexi\u00f3n).',\n values: [8, 6, 9, 7]\n },\n invasoras: {\n title: 'Especies Invasoras',\n text: 'Las plantas invasoras pueden competir con las nativas por polinizadores, mientras que los insectos invasores pueden da\u00f1ar directamente a las plantas. Reconfiguran las redes, usurpan interacciones y pueden introducir enfermedades, desestabilizando todo el ecosistema.',\n values: [6, 8, 7, 9]\n }\n };<\/p>\n<p> const threatsCtx = document.getElementById('threatsChart').getContext('2d');\n let threatsChart = new Chart(threatsCtx, {\n type: 'bar',\n data: {\n labels: ['P\u00e9rdida de Interacciones', 'Desacoplamiento', 'Toxicidad Directa', 'Competencia'],\n datasets: [{\n label: 'Impacto de la Amenaza',\n data: [0,0,0,0],\n backgroundColor: [\n 'rgba(239, 68, 68, 0.6)',\n 'rgba(249, 115, 22, 0.6)',\n 'rgba(132, 204, 22, 0.6)',\n 'rgba(59, 130, 246, 0.6)'\n ],\n borderColor: [\n 'rgba(239, 68, 68, 1)',\n 'rgba(249, 115, 22, 1)',\n 'rgba(132, 204, 22, 1)',\n 'rgba(59, 130, 246, 1)'\n ],\n borderWidth: 1\n }]\n },\n options: {\n maintainAspectRatio: false,\n indexAxis: 'y',\n scales: {\n x: {\n beginAtZero: true,\n max: 10,\n grid: {\n color: '#F3F4F6'\n }\n },\n y: {\n grid: {\n display: false\n }\n }\n },\n plugins: {\n legend: {\n display: false\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n let label = context.dataset.label || '';\n if (label) {\n label += ': ';\n }\n if (context.parsed.x !== null) {\n label += context.parsed.x + ' \/ 10';\n }\n return label;\n }\n }\n }\n }\n }\n });<\/p>\n<p> const threatTabs = document.querySelectorAll('.tab-button');\n const threatContentEl = document.getElementById('threat-content');<\/p>\n<p> function updateThreatInfo(threatKey) {\n const data = threatsData[threatKey];\n threatContentEl.innerHTML = `<\/p>\n<h3 class=\"text-2xl font-bold mb-3 text-gray-800\">${data.title}<\/h3>\n<p class=\"text-gray-600\">${data.text}<\/p>\n<p> `;\n threatsChart.data.datasets[0].data = data.values;\n threatsChart.update();<\/p>\n<p> threatTabs.forEach(tab => tab.classList.remove('active'));\n document.querySelector(`.tab-button[data-threat=\"${threatKey}\"]`).classList.add('active');\n }<\/p>\n<p> threatTabs.forEach(tab => {\n tab.addEventListener('click', (e) => {\n const threatKey = e.currentTarget.dataset.threat;\n updateThreatInfo(threatKey);\n });\n });<\/p>\n<p> \/\/ Accordion Logic\n const accordionHeaders = document.querySelectorAll('.accordion-header');\n accordionHeaders.forEach(header => {\n header.addEventListener('click', () => {\n const content = document.getElementById(header.dataset.target);\n const icon = header.querySelector('span:last-child');<\/p>\n<p> if (content.style.display === 'block') {\n content.style.display = 'none';\n icon.style.transform = 'rotate(0deg)';\n } else {\n content.style.display = 'block';\n icon.style.transform = 'rotate(180deg)';\n }\n });\n });<\/p>\n<p> \/\/ Initial state\n updateMetricInfo('conectancia');\n updateThreatInfo('habitat');\n document.querySelector('.accordion-header').click();<\/p>\n<p> });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Redes Planta-Insecto: Un An\u00e1lisis Interactivo EcoRedes Fundamentos M\u00e9tricas Amenazas Modelado Fundamentos M\u00e9tricas Amenazas Modelado La Arquitectura Oculta de la Biodiversidad Una exploraci\u00f3n interactiva de las redes planta-insecto, su importancia cr\u00edtica, las m\u00e9tricas que las definen y las amenazas que enfrentan en un mundo cambiante. Fundamentos de las Interacciones Las interacciones entre plantas e insectos son […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/citro-uv.com\/website_7fbf7d4f\/wp-json\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/citro-uv.com\/website_7fbf7d4f\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/citro-uv.com\/website_7fbf7d4f\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/citro-uv.com\/website_7fbf7d4f\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/citro-uv.com\/website_7fbf7d4f\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":7,"href":"https:\/\/citro-uv.com\/website_7fbf7d4f\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":233,"href":"https:\/\/citro-uv.com\/website_7fbf7d4f\/wp-json\/wp\/v2\/pages\/15\/revisions\/233"}],"wp:attachment":[{"href":"https:\/\/citro-uv.com\/website_7fbf7d4f\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":15,"date":"2025-08-12T04:16:01","date_gmt":"2025-08-12T04:16:01","guid":{"rendered":"https:\/\/gas.mif.mybluehost.me\/website_7fbf7d4f\/?page_id=15"},"modified":"2025-08-14T21:51:54","modified_gmt":"2025-08-14T21:51:54","slug":"artefactos","status":"publish","type":"page","link":"https:\/\/citro-uv.com\/website_7fbf7d4f\/artefactos\/","title":{"rendered":"Artefactos didacticos"},"content":{"rendered":"

\n
\n
\n
\n
\n Redes Planta-Insecto: Un An\u00e1lisis Interactivo<\/title><br \/>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <br \/>\n <br \/>\n <br \/>\n <\/p>\n<style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #FDFBF8;\n color: #4A4A4A;\n }\n .nav-link {\n transition: color 0.3s, border-bottom-color 0.3s;\n border-bottom: 2px solid transparent;\n }\n .nav-link:hover, .nav-link.active {\n color: #38A169; \/* green-600 *\/\n border-bottom-color: #38A169;\n }\n .card {\n background-color: #FFFFFF;\n border: 1px solid #E2E8F0;\n border-radius: 0.75rem;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n transition: transform 0.3s, box-shadow 0.3s;\n }\n .card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n }\n .tab-button {\n transition: all 0.3s;\n }\n .tab-button.active {\n background-color: #38A169;\n color: #FFFFFF;\n box-shadow: 0 4px 14px 0 rgba(56, 161, 105, 0.39);\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 500px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 400px;\n }\n }\n <\/style>\n<p><\/head><br \/>\n<body class=\"antialiased\"><\/p>\n<p> <\/p>\n<header class=\"bg-white\/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm\">\n<nav class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\n<div class=\"text-2xl font-bold text-gray-800\">\n <span class=\"text-green-600\">Eco<\/span>Redes\n <\/div>\n<div class=\"hidden md:flex space-x-8\">\n <a href=\"#fundamentos\" class=\"nav-link text-gray-600 font-semibold pb-1\">Fundamentos<\/a><br \/>\n <a href=\"#metricas\" class=\"nav-link text-gray-600 font-semibold pb-1\">M\u00e9tricas<\/a><br \/>\n <a href=\"#amenazas\" class=\"nav-link text-gray-600 font-semibold pb-1\">Amenazas<\/a><br \/>\n <a href=\"#modelado\" class=\"nav-link text-gray-600 font-semibold pb-1\">Modelado<\/a>\n <\/div>\n<p> <button id=\"mobile-menu-button\" class=\"md:hidden focus:outline-none\"><br \/>\n <svg class=\"w-6 h-6 text-gray-600\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path d=\"M4 6h16M4 12h16m-7 6h7\"><\/path>\n <\/svg><br \/>\n <\/button><br \/>\n <\/nav>\n<p> <\/p>\n<div id=\"mobile-menu\" class=\"hidden md:hidden px-6 pb-4\">\n <a href=\"#fundamentos\" class=\"block py-2 text-gray-600\">Fundamentos<\/a><br \/>\n <a href=\"#metricas\" class=\"block py-2 text-gray-600\">M\u00e9tricas<\/a><br \/>\n <a href=\"#amenazas\" class=\"block py-2 text-gray-600\">Amenazas<\/a><br \/>\n <a href=\"#modelado\" class=\"block py-2 text-gray-600\">Modelado<\/a>\n <\/div>\n<\/header>\n<p> <br \/>\n <main class=\"container mx-auto px-6 py-12\"><\/p>\n<p> <\/p>\n<section class=\"text-center mb-20\">\n<h1 class=\"text-4xl md:text-6xl font-extrabold text-gray-800 mb-4\">La Arquitectura Oculta de la Biodiversidad<\/h1>\n<p class=\"text-lg md:text-xl text-gray-600 max-w-3xl mx-auto\">\n Una exploraci\u00f3n interactiva de las redes planta-insecto, su importancia cr\u00edtica, las m\u00e9tricas que las definen y las amenazas que enfrentan en un mundo cambiante.\n <\/p>\n<\/section>\n<p> <\/p>\n<section id=\"fundamentos\" class=\"mb-24 scroll-mt-20\">\n<h2 class=\"text-3xl font-bold text-center mb-4 text-gray-800\">Fundamentos de las Interacciones<\/h2>\n<p class=\"text-center text-gray-600 mb-12 max-w-2xl mx-auto\">Las interacciones entre plantas e insectos son la base de los ecosistemas terrestres. Se dividen principalmente en dos tipos: mutualistas, donde ambos se benefician, y antag\u00f3nicas, donde uno se beneficia a expensas del otro. Comprender esta dualidad es clave para analizar la estructura y salud del ecosistema.<\/p>\n<div class=\"grid md:grid-cols-2 gap-10\">\n<div class=\"card p-8 text-center\">\n<div class=\"text-5xl mb-4\">\ud83e\udd1d<\/div>\n<h3 class=\"text-2xl font-bold mb-3 text-green-700\">Mutualismo: Polinizaci\u00f3n<\/h3>\n<p class=\"text-gray-600\">Una relaci\u00f3n de beneficio mutuo. Las plantas logran la reproducci\u00f3n y diversidad gen\u00e9tica a trav\u00e9s de la dispersi\u00f3n de polen, mientras los insectos obtienen recursos vitales como n\u00e9ctar y polen. Este servicio ecosist\u00e9mico es responsable de m\u00e1s de un tercio de los alimentos que consumimos.<\/p>\n<\/p><\/div>\n<div class=\"card p-8 text-center\">\n<div class=\"text-5xl mb-4\">\u2694\ufe0f<\/div>\n<h3 class=\"text-2xl font-bold mb-3 text-red-700\">Antagonismo: Herbivor\u00eda<\/h3>\n<p class=\"text-gray-600\">Una relaci\u00f3n de conflicto. Los insectos consumen tejidos vegetales para su sustento, lo que impacta negativamente la supervivencia y reproducci\u00f3n de la planta. Como respuesta, las plantas han desarrollado complejas defensas f\u00edsicas y qu\u00edmicas para disuadir a los herb\u00edvoros.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p> <\/p>\n<section id=\"metricas\" class=\"mb-24 scroll-mt-20\">\n<h2 class=\"text-3xl font-bold text-center mb-4 text-gray-800\">Anatom\u00eda de una Red Ecol\u00f3gica<\/h2>\n<p class=\"text-center text-gray-600 mb-12 max-w-2xl mx-auto\">Para entender la complejidad de estas redes, los ec\u00f3logos utilizan diversas m\u00e9tricas que describen su estructura y robustez. Estas m\u00e9tricas nos ayudan a cuantificar la salud del ecosistema y predecir su respuesta a las perturbaciones. Explora las m\u00e9tricas clave a continuaci\u00f3n.<\/p>\n<div class=\"grid lg:grid-cols-2 gap-12 items-center\">\n<div class=\"chart-container\">\n <canvas id=\"metricsChart\"><\/canvas>\n <\/div>\n<div>\n<div id=\"metrics-controls\" class=\"flex flex-wrap justify-center gap-3 mb-6\">\n <button data-metric=\"conectancia\" class=\"metric-btn px-4 py-2 rounded-full text-sm font-semibold bg-gray-200 text-gray-700\">Conectancia<\/button><br \/>\n <button data-metric=\"anidamiento\" class=\"metric-btn px-4 py-2 rounded-full text-sm font-semibold bg-gray-200 text-gray-700\">Anidamiento<\/button><br \/>\n <button data-metric=\"modularidad\" class=\"metric-btn px-4 py-2 rounded-full text-sm font-semibold bg-gray-200 text-gray-700\">Modularidad<\/button><br \/>\n <button data-metric=\"especializacion\" class=\"metric-btn px-4 py-2 rounded-full text-sm font-semibold bg-gray-200 text-gray-700\">Especializaci\u00f3n<\/button>\n <\/div>\n<div id=\"metric-description\" class=\"card p-6 min-h-[180px]\">\n<h3 id=\"metric-title\" class=\"text-xl font-bold mb-2 text-blue-700\">Selecciona una m\u00e9trica<\/h3>\n<p id=\"metric-text\" class=\"text-gray-600\">Haz clic en los botones de arriba para explorar cada m\u00e9trica y ver su representaci\u00f3n en una red hipot\u00e9tica. Cada m\u00e9trica revela una faceta diferente de la estructura y estabilidad de la red.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p> <\/p>\n<section id=\"amenazas\" class=\"mb-24 scroll-mt-20\">\n<h2 class=\"text-3xl font-bold text-center mb-4 text-gray-800\">Amenazas en un Mundo Cambiante<\/h2>\n<p class=\"text-center text-gray-600 mb-12 max-w-2xl mx-auto\">Las actividades humanas ejercen una presi\u00f3n sin precedentes sobre estas delicadas redes. La p\u00e9rdida de h\u00e1bitat, el cambio clim\u00e1tico, los pesticidas y las especies invasoras alteran su estructura, amenazando su estabilidad y los servicios ecosist\u00e9micos que proporcionan.<\/p>\n<div class=\"flex flex-col lg:flex-row gap-8\">\n<div class=\"lg:w-1\/3\">\n<div id=\"threats-tabs\" class=\"flex lg:flex-col gap-2\">\n <button data-threat=\"habitat\" class=\"tab-button w-full text-left p-4 rounded-lg flex items-center gap-4 active\"><br \/>\n <span class=\"text-2xl\">\ud83c\udfde\ufe0f<\/span> <span class=\"font-semibold\">P\u00e9rdida de H\u00e1bitat<\/span><br \/>\n <\/button><br \/>\n <button data-threat=\"clima\" class=\"tab-button w-full text-left p-4 rounded-lg flex items-center gap-4\"><br \/>\n <span class=\"text-2xl\">\ud83c\udf21\ufe0f<\/span> <span class=\"font-semibold\">Cambio Clim\u00e1tico<\/span><br \/>\n <\/button><br \/>\n <button data-threat=\"pesticidas\" class=\"tab-button w-full text-left p-4 rounded-lg flex items-center gap-4\"><br \/>\n <span class=\"text-2xl\">\ud83e\uddea<\/span> <span class=\"font-semibold\">Uso de Pesticidas<\/span><br \/>\n <\/button><br \/>\n <button data-threat=\"invasoras\" class=\"tab-button w-full text-left p-4 rounded-lg flex items-center gap-4\"><br \/>\n <span class=\"text-2xl\">\ud83e\udd97<\/span> <span class=\"font-semibold\">Especies Invasoras<\/span><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<div class=\"lg:w-2\/3 card p-6\">\n<div id=\"threat-content\">\n \n <\/div>\n<div class=\"mt-6\">\n<h4 class=\"font-bold text-center mb-2\">Impacto Relativo en la Red<\/h4>\n<div class=\"chart-container h-64 md:h-80\">\n <canvas id=\"threatsChart\"><\/canvas>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p> <\/p>\n<section id=\"modelado\" class=\"scroll-mt-20\">\n<h2 class=\"text-3xl font-bold text-center mb-4 text-gray-800\">Modelado, Resiliencia y Futuro<\/h2>\n<p class=\"text-center text-gray-600 mb-12 max-w-2xl mx-auto\">La modelaci\u00f3n matem\u00e1tica es una herramienta crucial para predecir c\u00f3mo responder\u00e1n las redes a las perturbaciones y para dise\u00f1ar estrategias de conservaci\u00f3n efectivas. Entender la resiliencia nos permite “cambiar para resistir” y asegurar el futuro de estos sistemas vitales.<\/p>\n<div id=\"resilience-accordion\" class=\"space-y-4\">\n<div class=\"card overflow-hidden\">\n <button class=\"accordion-header w-full text-left p-5 font-semibold text-lg flex justify-between items-center\" data-target=\"content-1\"><br \/>\n <span>Reconfiguraci\u00f3n de la Red (Rewiring)<\/span><br \/>\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span><br \/>\n <\/button><\/p>\n<div id=\"content-1\" class=\"accordion-content p-5 pt-0\" style=\"display: none;\">\n<p class=\"text-gray-600\">Este mecanismo implica que las especies cambian sus interacciones en respuesta a perturbaciones. Estructuras como la modularidad (grupos densos de interacci\u00f3n) y el anidamiento (especialistas interactuando con generalistas) pueden amortiguar la propagaci\u00f3n de impactos negativos, fomentando la resiliencia del sistema.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"card overflow-hidden\">\n <button class=\"accordion-header w-full text-left p-5 font-semibold text-lg flex justify-between items-center\" data-target=\"content-2\"><br \/>\n <span>Aumento de la Heterogeneidad<\/span><br \/>\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span><br \/>\n <\/button><\/p>\n<div id=\"content-2\" class=\"accordion-content p-5 pt-0\" style=\"display: none;\">\n<p class=\"text-gray-600\">La diversidad, tanto a nivel de especies (funcional) como dentro de las especies (gen\u00e9tica), es clave para la estabilidad. Una mayor diversidad de rasgos y genes en la comunidad aumenta la capacidad de la red para resistir y recuperarse de las perturbaciones, como las defensas variadas contra herb\u00edvoros.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"card overflow-hidden\">\n <button class=\"accordion-header w-full text-left p-5 font-semibold text-lg flex justify-between items-center\" data-target=\"content-3\"><br \/>\n <span>Modelos Predictivos<\/span><br \/>\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span><br \/>\n <\/button><\/p>\n<div id=\"content-3\" class=\"accordion-content p-5 pt-0\" style=\"display: none;\">\n<p class=\"text-gray-600\">Los modelos matem\u00e1ticos, como los de Ecuaciones Diferenciales (ej. SEI\/SEDI) o los eco-epid\u00e9micos, son esenciales. Permiten simular la din\u00e1mica de plagas, la efectividad de las defensas vegetales y el impacto del cambio clim\u00e1tico, guiando estrategias de manejo integrado y conservaci\u00f3n basadas en evidencia cuantitativa.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p> <\/main><\/p>\n<footer class=\"bg-gray-800 text-white mt-20\">\n<div class=\"container mx-auto px-6 py-8 text-center\">\n<p>© 2025 EcoRedes. Un proyecto de visualizaci\u00f3n de datos ecol\u00f3gicos.<\/p>\n<p class=\"text-sm text-gray-400 mt-2\">Basado en el informe “Redes de Interacci\u00f3n Planta-Insecto: Polinizaci\u00f3n, Herbivor\u00eda, Din\u00e1micas, M\u00e9tricas e Impacto Antropog\u00e9nico”.<\/p>\n<\/p><\/div>\n<\/footer>\n<p> <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Mobile Menu\n const mobileMenuButton = document.getElementById('mobile-menu-button');\n const mobileMenu = document.getElementById('mobile-menu');\n mobileMenuButton.addEventListener('click', () => {\n mobileMenu.classList.toggle('hidden');\n });<\/p>\n<p> \/\/ Smooth scrolling for nav links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n if(mobileMenu.classList.contains('hidden') === false){\n mobileMenu.classList.add('hidden');\n }\n });\n });<\/p>\n<p> \/\/ Active nav link on scroll\n const sections = document.querySelectorAll('section');\n const navLinks = document.querySelectorAll('.nav-link');\n window.onscroll = () => {\n let current = '';\n sections.forEach(section => {\n const sectionTop = section.offsetTop;\n if (pageYOffset >= sectionTop - 100) {\n current = section.getAttribute('id');\n }\n });<\/p>\n<p> navLinks.forEach(link => {\n link.classList.remove('active');\n if (link.getAttribute('href').includes(current)) {\n link.classList.add('active');\n }\n });\n };<\/p>\n<p> \/\/ Metrics Chart Logic\n const metricsData = {\n conectancia: {\n title: 'Conectancia',\n text: 'Mide la densidad de interacciones. Es la proporci\u00f3n de enlaces observados frente a todos los posibles. Una conectancia muy alta o muy baja puede ser perjudicial; un valor intermedio a menudo indica una red robusta pero no tan interconectada como para que las perturbaciones se propaguen instant\u00e1neamente.',\n values: [8, 4, 5, 3]\n },\n anidamiento: {\n title: 'Anidamiento',\n text: 'Describe un patr\u00f3n donde los especialistas interact\u00faan con un subconjunto de las especies con las que interact\u00faan los generalistas. Un alto anidamiento promueve la resiliencia al ofrecer \"respaldos\" a las especies especialistas, aumentando la coexistencia.',\n values: [4, 9, 6, 7]\n },\n modularidad: {\n title: 'Modularidad',\n text: 'Indica la presencia de grupos (m\u00f3dulos) de especies que interact\u00faan m\u00e1s entre s\u00ed que con el resto de la red. La modularidad puede amortiguar las perturbaciones, conteni\u00e9ndolas dentro de un m\u00f3dulo y protegiendo la estabilidad general de la red.',\n values: [5, 6, 9, 5]\n },\n especializacion: {\n title: 'Especializaci\u00f3n',\n text: 'Refleja el grado de dependencia entre especies. Una alta especializaci\u00f3n puede indicar coevoluci\u00f3n, pero tambi\u00e9n aumenta la vulnerabilidad. Si un socio desaparece, el especialista queda en grave riesgo. Las redes con una mezcla de especialistas y generalistas suelen ser m\u00e1s estables.',\n values: [3, 7, 4, 9]\n }\n };<\/p>\n<p> const metricsCtx = document.getElementById('metricsChart').getContext('2d');\n let metricsChart = new Chart(metricsCtx, {\n type: 'radar',\n data: {\n labels: ['Estabilidad', 'Resiliencia', 'Robustez', 'Vulnerabilidad'],\n datasets: [{\n label: 'M\u00e9trica seleccionada',\n data: [0, 0, 0, 0],\n backgroundColor: 'rgba(56, 161, 105, 0.2)',\n borderColor: 'rgba(56, 161, 105, 1)',\n borderWidth: 2,\n pointBackgroundColor: 'rgba(56, 161, 105, 1)'\n }]\n },\n options: {\n maintainAspectRatio: false,\n scales: {\n r: {\n angleLines: {\n color: '#E2E8F0'\n },\n grid: {\n color: '#E2E8F0'\n },\n pointLabels: {\n font: {\n size: 14,\n weight: 'bold'\n },\n color: '#4A5568'\n },\n ticks: {\n beginAtZero: true,\n max: 10,\n stepSize: 2,\n backdropColor: 'rgba(253, 251, 248, 0.75)'\n }\n }\n },\n plugins: {\n legend: {\n display: false\n }\n }\n }\n });<\/p>\n<p> const metricButtons = document.querySelectorAll('.metric-btn');\n const metricTitleEl = document.getElementById('metric-title');\n const metricTextEl = document.getElementById('metric-text');<\/p>\n<p> function updateMetricInfo(metricKey) {\n const data = metricsData[metricKey];\n metricTitleEl.textContent = data.title;\n metricTextEl.textContent = data.text;\n metricsChart.data.datasets[0].data = data.values;\n metricsChart.data.datasets[0].label = data.title;\n metricsChart.update();<\/p>\n<p> metricButtons.forEach(btn => {\n btn.classList.remove('bg-blue-500', 'text-white');\n btn.classList.add('bg-gray-200', 'text-gray-700');\n });\n const activeBtn = document.querySelector(`.metric-btn[data-metric=\"${metricKey}\"]`);\n activeBtn.classList.add('bg-blue-500', 'text-white');\n activeBtn.classList.remove('bg-gray-200', 'text-gray-700');\n }<\/p>\n<p> metricButtons.forEach(button => {\n button.addEventListener('click', (e) => {\n const metricKey = e.target.dataset.metric;\n updateMetricInfo(metricKey);\n });\n });<\/p>\n<p> \/\/ Threats Chart Logic\n const threatsData = {\n habitat: {\n title: 'P\u00e9rdida y Fragmentaci\u00f3n de H\u00e1bitat',\n text: 'La causa fundamental del declive de polinizadores. La destrucci\u00f3n de h\u00e1bitats reduce la disponibilidad de flores y sitios de anidaci\u00f3n. La fragmentaci\u00f3n a\u00edsla poblaciones, disminuye el flujo gen\u00e9tico y provoca la p\u00e9rdida de interacciones especializadas, haciendo las redes m\u00e1s simples y fr\u00e1giles.',\n values: [9, 7, 8, 5]\n },\n clima: {\n title: 'Cambio Clim\u00e1tico',\n text: 'Altera la sincron\u00eda entre plantas y polinizadores (desacoplamiento fenol\u00f3gico). Si las flores abren antes de que los insectos est\u00e9n activos, la polinizaci\u00f3n falla. El aumento de temperaturas y sequ\u00edas tambi\u00e9n reduce la calidad y cantidad de n\u00e9ctar, afectando la salud de los polinizadores.',\n values: [7, 9, 6, 8]\n },\n pesticidas: {\n title: 'Uso de Pesticidas',\n text: 'Los insecticidas, fungicidas y herbicidas tienen efectos letales y subletales. Afectan la memoria, navegaci\u00f3n y forrajeo de los polinizadores, debilitando las interacciones. La exposici\u00f3n cr\u00f3nica puede llevar a un colapso abrupto de la comunidad (punto de inflexi\u00f3n).',\n values: [8, 6, 9, 7]\n },\n invasoras: {\n title: 'Especies Invasoras',\n text: 'Las plantas invasoras pueden competir con las nativas por polinizadores, mientras que los insectos invasores pueden da\u00f1ar directamente a las plantas. Reconfiguran las redes, usurpan interacciones y pueden introducir enfermedades, desestabilizando todo el ecosistema.',\n values: [6, 8, 7, 9]\n }\n };<\/p>\n<p> const threatsCtx = document.getElementById('threatsChart').getContext('2d');\n let threatsChart = new Chart(threatsCtx, {\n type: 'bar',\n data: {\n labels: ['P\u00e9rdida de Interacciones', 'Desacoplamiento', 'Toxicidad Directa', 'Competencia'],\n datasets: [{\n label: 'Impacto de la Amenaza',\n data: [0,0,0,0],\n backgroundColor: [\n 'rgba(239, 68, 68, 0.6)',\n 'rgba(249, 115, 22, 0.6)',\n 'rgba(132, 204, 22, 0.6)',\n 'rgba(59, 130, 246, 0.6)'\n ],\n borderColor: [\n 'rgba(239, 68, 68, 1)',\n 'rgba(249, 115, 22, 1)',\n 'rgba(132, 204, 22, 1)',\n 'rgba(59, 130, 246, 1)'\n ],\n borderWidth: 1\n }]\n },\n options: {\n maintainAspectRatio: false,\n indexAxis: 'y',\n scales: {\n x: {\n beginAtZero: true,\n max: 10,\n grid: {\n color: '#F3F4F6'\n }\n },\n y: {\n grid: {\n display: false\n }\n }\n },\n plugins: {\n legend: {\n display: false\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n let label = context.dataset.label || '';\n if (label) {\n label += ': ';\n }\n if (context.parsed.x !== null) {\n label += context.parsed.x + ' \/ 10';\n }\n return label;\n }\n }\n }\n }\n }\n });<\/p>\n<p> const threatTabs = document.querySelectorAll('.tab-button');\n const threatContentEl = document.getElementById('threat-content');<\/p>\n<p> function updateThreatInfo(threatKey) {\n const data = threatsData[threatKey];\n threatContentEl.innerHTML = `<\/p>\n<h3 class=\"text-2xl font-bold mb-3 text-gray-800\">${data.title}<\/h3>\n<p class=\"text-gray-600\">${data.text}<\/p>\n<p> `;\n threatsChart.data.datasets[0].data = data.values;\n threatsChart.update();<\/p>\n<p> threatTabs.forEach(tab => tab.classList.remove('active'));\n document.querySelector(`.tab-button[data-threat=\"${threatKey}\"]`).classList.add('active');\n }<\/p>\n<p> threatTabs.forEach(tab => {\n tab.addEventListener('click', (e) => {\n const threatKey = e.currentTarget.dataset.threat;\n updateThreatInfo(threatKey);\n });\n });<\/p>\n<p> \/\/ Accordion Logic\n const accordionHeaders = document.querySelectorAll('.accordion-header');\n accordionHeaders.forEach(header => {\n header.addEventListener('click', () => {\n const content = document.getElementById(header.dataset.target);\n const icon = header.querySelector('span:last-child');<\/p>\n<p> if (content.style.display === 'block') {\n content.style.display = 'none';\n icon.style.transform = 'rotate(0deg)';\n } else {\n content.style.display = 'block';\n icon.style.transform = 'rotate(180deg)';\n }\n });\n });<\/p>\n<p> \/\/ Initial state\n updateMetricInfo('conectancia');\n updateThreatInfo('habitat');\n document.querySelector('.accordion-header').click();<\/p>\n<p> });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Redes Planta-Insecto: Un An\u00e1lisis Interactivo EcoRedes Fundamentos M\u00e9tricas Amenazas Modelado Fundamentos M\u00e9tricas Amenazas Modelado La Arquitectura Oculta de la Biodiversidad Una exploraci\u00f3n interactiva de las redes planta-insecto, su importancia cr\u00edtica, las m\u00e9tricas que las definen y las amenazas que enfrentan en un mundo cambiante. Fundamentos de las Interacciones Las interacciones entre plantas e insectos son […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/citro-uv.com\/website_7fbf7d4f\/wp-json\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/citro-uv.com\/website_7fbf7d4f\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/citro-uv.com\/website_7fbf7d4f\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/citro-uv.com\/website_7fbf7d4f\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/citro-uv.com\/website_7fbf7d4f\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":7,"href":"https:\/\/citro-uv.com\/website_7fbf7d4f\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":233,"href":"https:\/\/citro-uv.com\/website_7fbf7d4f\/wp-json\/wp\/v2\/pages\/15\/revisions\/233"}],"wp:attachment":[{"href":"https:\/\/citro-uv.com\/website_7fbf7d4f\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}