<div id=”labcd-container-final”>
</div>

<script>
(function() {
var htmlContent = `
<div class=”labcd-infografico”>
<div class=”labcd-nucleo”>
<div class=”nucleo-aura”></div>
<span>LabCD</span>
</div>
<div class=”labcd-grid”>
<div class=”lab-item blue”><div class=”c-icon”><svg viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2″><path d=”M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z”/></svg></div><p>Ferramentas e metodologias</p></div>
<div class=”lab-item green”><div class=”c-icon”><svg viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2″><path d=”M11 5L6 9H2v6h4l5 4V5zM19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07″/></svg></div><p>Ações de mobilização</p></div>
<div class=”lab-item red”><div class=”c-icon”><svg viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2″><circle cx=”11″ cy=”11″ r=”8″/><path d=”M21 21l-4.35-4.35″/></svg></div><p>Pesquisas</p></div>
<div class=”lab-item pink”><div class=”c-icon”><svg viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2″><path d=”M22 10L12 5L2 10L12 15L22 10Z”/><path d=”M6 12V17C6 17 8.5 20 12 20C15.5 20 18 17 18 17V12″/></svg></div><p>Formações</p></div>
<div class=”lab-item gold”><div class=”c-icon”><svg viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2″><polyline points=”16 18 22 12 16 6″/><polyline points=”8 6 2 12 8 18″/></svg></div><p>Plataformas livres</p></div>
</div>
</div>
<style>
.labcd-infografico { position: relative; width: 100%; max-width: 800px; height: 500px; margin: 40px auto; font-family: inherit; }
.labcd-nucleo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; background: #CC913E; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; color: white; font-weight: 800; box-shadow: 0 5px 15px rgba(204,145,62,0.3); }
.nucleo-aura { position: absolute; width: 100%; height: 100%; border: 2px solid #CC913E; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.lab-item { position: absolute; width: 160px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.c-icon { width: 55px; height: 55px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.c-icon svg { width: 25px; height: 25px; }
.lab-item p { font-weight: 700!important; font-size: 1rem!important; line-height: 1.2!important; margin: 0!important; }
.blue .c-icon { border: 3px solid #0078B7; color: #0078B7; } .blue p { color: #0078B7; }
.green .c-icon { border: 3px solid #20766B; color: #20766B; } .green p { color: #20766B; }
.red .c-icon { border: 3px solid #D2454A; color: #D2454A; } .red p { color: #D2454A; }
.pink .c-icon { border: 3px solid #ED6A8E; color: #ED6A8E; } .pink p { color: #ED6A8E; }
.gold .c-icon { border: 3px solid #CC913E; color: #CC913E; } .gold p { color: #CC913E; }
.lab-item.blue { top: 0; left: 10%; } .lab-item.green { top: 0; right: 10%; }
.lab-item.red { top: 50%; left: -5%; transform: translateY(-50%); }
.lab-item.pink { top: 50%; right: -5%; transform: translateY(-50%); }
.lab-item.gold { bottom: 0; left: 50%; transform: translateX(-50%); }
@media (max-width: 768px) {
.labcd-infografico { height: auto; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.lab-item, .labcd-nucleo { position: relative!important; transform: none!important; top: auto!important; left: auto!important; right: auto!important; }
}
</style>
`;
document.getElementById(‘labcd-container-final’).innerHTML = htmlContent;
})();
</script>