#agro-ecosystem-container {
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
background: #003400; /* Fondo verde sólido */
position: relative;
overflow: hidden;
box-sizing: border-box;
}
#agro-ecosystem {
position: relative;
width: 650px;
height: 650px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
margin: auto;
}
#agro-ecosystem .agro-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #2E7D32;
color: #fff;
width: 180px;
height: 180px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 16px;
font-weight: bold;
text-align: center;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
z-index: 10;
}
#agro-ecosystem .agro-module {
position: absolute;
width: 140px;
height: 140px;
background: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px;
font-size: 14px;
color: #333;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s;
flex-direction: column;
opacity: 0;
transform: scale(0);
animation: agroRadialIn 0.8s ease forwards;
cursor: pointer;
}
#agro-ecosystem .agro-module:hover {
transform: scale(1.2);
background: #e8f5e9;
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
#agro-ecosystem .agro-module span {
display: block;
font-size: 26px;
margin-bottom: 8px;
color: #2E7D32;
}
/* Tooltip */
#agro-tooltip {
position: absolute;
background: #2E7D32;
color: #fff;
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
display: none;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
z-index: 999999;
}
/* Posiciones radiales */
#agro-ecosystem .m1 { top: 20px; left: 50%; transform: translate(-50%, 0); animation-delay: 0.3s; }
#agro-ecosystem .m2 { top: 130px; right: 50px; animation-delay: 0.6s; }
#agro-ecosystem .m3 { bottom: 130px; right: 50px; animation-delay: 0.9s; }
#agro-ecosystem .m4 { bottom: 20px; left: 50%; transform: translate(-50%, 0); animation-delay: 1.2s; }
#agro-ecosystem .m5 { bottom: 130px; left: 50px; animation-delay: 1.5s; }
#agro-ecosystem .m6 { top: 130px; left: 50px; animation-delay: 1.8s; }
#agro-ecosystem .agro-line {
position: absolute;
background: #2E7D32;
height: 2px;
transform-origin: left;
z-index: 1;
width: 0;
transition: width 0.8s ease;
}
@keyframes agroRadialIn {
0% { opacity: 0; transform: scale(0); }
100% { opacity: 1; transform: scale(1); }
}
/* Modal */
#agro-modal {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: none;
justify-content: center;
align-items: center;
z-index: 100000;
}
#agro-modal .agro-modal-content {
background: #fff;
padding: 20px;
border-radius: 12px;
width: 90%;
max-width: 450px;
text-align: center;
position: relative;
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
#agro-modal .agro-close {
position: absolute;
top: 10px;
right: 15px;
font-size: 22px;
cursor: pointer;
color: #555;
}
Agro-Works
Ecosistema Digital
🛒 Comercio
Electrónico
🌱 Gestión
Agrícola
📊 Analytics + IA
🎯 Segmentación
🔍 Trazabilidad
💬 Agro-Talk
(function(){
const container = document.getElementById('agro-ecosystem');
const center = container.querySelector('.agro-center');
const modules = container.querySelectorAll('.agro-module');
const tooltip = document.getElementById('agro-tooltip');
const modal = document.getElementById('agro-modal');
const modalTitle = document.getElementById('agro-modal-title');
const modalText = document.getElementById('agro-modal-text');
const closeBtn = modal.querySelector('.agro-close');
// Crear conectores animados
modules.forEach((module, index) => {
const line = document.createElement('div');
line.classList.add('agro-line');
container.appendChild(line);
setTimeout(() => {
const rectCenter = center.getBoundingClientRect();
const rectModule = module.getBoundingClientRect();
const dx = rectModule.left - rectCenter.left;
const dy = rectModule.top - rectCenter.top;
const length = Math.sqrt(dx*dx + dy*dy);
const angle = Math.atan2(dy, dx) * 180 / Math.PI;
line.style.top = center.offsetTop + center.offsetHeight / 2 + 'px';
line.style.left = center.offsetLeft + center.offsetWidth / 2 + 'px';
line.style.transform = `rotate(${angle}deg)`;
setTimeout(() => {
line.style.width = length + 'px';
}, index * 300);
}, 200);
});
// Tooltip dinámico
modules.forEach(module => {
module.addEventListener('mouseenter', e => {
tooltip.textContent = module.getAttribute('data-info');
tooltip.style.display = 'block';
tooltip.style.opacity = '1';
});
module.addEventListener('mousemove', e => {
tooltip.style.top = (e.pageY - 40) + 'px';
tooltip.style.left = (e.pageX + 10) + 'px';
});
module.addEventListener('mouseleave', () => {
tooltip.style.opacity = '0';
setTimeout(() => tooltip.style.display = 'none', 300);
});
// Click abre modal con descripción completa
module.addEventListener('click', () => {
modalTitle.textContent = module.getAttribute('data-title');
modalText.textContent = module.getAttribute('data-info');
modal.style.display = 'flex';
});
});
// Modal cerrar
closeBtn.addEventListener('click', () => modal.style.display = 'none');
modal.addEventListener('click', e => {
if(e.target === modal) modal.style.display = 'none';
});
})();
