{/* Sub-tree (drops down from the active parent when it has children) */}
{hasSubs && (
)}
);
}
/* SubTree — branching row of sub-stage nodes beneath the active parent. */
function SubTree({ subs, active, onSelect, accent, dark, parentCenterPct, parentLabel }) {
const text = dark ? '#e8edf4' : '#0b1f3a';
const sub = dark ? 'rgba(232,237,244,0.55)' : '#64748b';
const dim = dark ? 'rgba(232,237,244,0.3)' : '#94a3b8';
const card = dark ? 'rgba(255,255,255,0.025)' : '#fff';
const border = dark ? 'rgba(255,255,255,0.08)' : '#e6e7eb';
const N = subs.length;
// Sub row spans the full width minus side padding (~6%).
// Each sub column center is at (i + 0.5)/N within that inner band.
const inset = 6; // % padding on each side
const inner = 100 - 2 * inset;
const subCenter = (i) => inset + ((i + 0.5) / N) * inner;
const firstC = subCenter(0);
const lastC = subCenter(N - 1);
return (
{/* Vertical drop from parent node into the trunk */}
{/* Horizontal trunk spanning from first to last sub center */}
{/* Small stubs from trunk down to each sub-node */}
{subs.map((_, i) => (
))}
{/* Parent label chip — small "FAENA / sub-procesos" indicator on the trunk */}
);
}
/* ============================================================
* LiveAppSheet — phone-shaped frame containing a real iframe.
* Slots into the AppSheet embed body the same way MockAppSheet did.
* ============================================================ */
function LiveAppSheet({ src, stage, accent, dark }) {
const border = dark ? 'rgba(255,255,255,0.10)' : '#dfe3ea';
const bg = dark ? '#0e1620' : '#fff';
return (
{/* tablet top bar — minimal, no URL */}
{/* iframe */}
);
}
/* LiveDashboard — full-bleed iframe for BI tablero embed slot. */
function LiveDashboard({ src, stage, dark }) {
return (
);
}
Object.assign(window, {
CADENA, SERVICIOS, PROCESO, STACK, INDUSTRIAS,
StageIcon, LogoMark, LogoLockup,
HeroBackground, ParticleField, EmbedPlaceholder,
MockAppSheet, MockDashboard, ChainFlow,
LiveAppSheet, LiveDashboard,
hexAlpha,
});
/* ===== v3-data.jsx ===== */
/* v3-data.jsx — content sourced from the Datalogia brief */
const DL_TAGLINE = 'Business Intelligence & Data Analytics — para industria, agro y ganadería.';
const DL_SLOGAN = 'Información clara · Decisiones inteligentes · Resultados reales.';
const DL_HERO = {
eyebrow: 'CONSULTORA · BI & DATA ANALYTICS',
title1: 'De tus datos,',
title2: 'a decisiones',
title3: 'rentables.',
body:
'En Datalogia ayudamos a empresas, industrias y agro a transformar sus datos en información accionable. Creamos aplicaciones móviles y de escritorio. Diseñamos dashboards, integraciones y automatizaciones que permiten decidir con velocidad, precisión y rentabilidad.',
primaryCta: 'Solicitá un diagnóstico de datos',
secondaryCta: 'Ver servicios',
};
const DL_PILLARS = [
{
title: 'Centralizamos',
desc: 'Conectamos planillas, ERP, CRM, aplicaciones en un único tablero confiable.',
icon: 'merge',
},
{
title: 'Automatizamos',
desc: 'Eliminamos el trabajo manual: los datos llegan solos, los tableros se actualizan y las alertas obligan a reaccionar.',
icon: 'auto',
},
{
title: 'Decidimos',
desc: 'KPIs claros y modelos predictivos para anticipar, no reaccionar.',
icon: 'decide',
},
];
const DL_SERVICIOS = [
{
code: 'bi',
title: 'Business Intelligence',
blurb: 'Dashboards ejecutivos y reportería que la gerencia mira todos los días.',
items: [
'Dashboards en Power BI y Looker Studio',
'KPIs operativos y estratégicos',
'Reporting gerencial automatizado',
'Data storytelling y visualización',
],
},
{
code: 'eng',
title: 'Ingeniería e Integración de Datos',
blurb: 'Las fuentes correctas, modeladas y conectadas para que todo lo demás funcione.',
items: [
'Integración de múltiples fuentes',
'Modelado de datos',
'ETL y automatización',
'Calidad y gobernanza de datos',
],
},
{
code: 'apps',
title: 'Automatización y Apps',
blurb: 'Aplicaciones internas y flujos que digitalizan la operación diaria.',
items: [
'Automatización de reportes',
'Apps internas y workflows (AppSheet)',
'Alertas y monitoreo',
'Integración con sistemas centrales',
],
},
{
code: 'ai',
title: 'Analítica Avanzada & IA',
blurb: 'Más que mirar el pasado: anticipar el negocio que viene.',
items: [
'Forecasting',
'Modelos predictivos',
'Segmentación y análisis avanzado',
'IA aplicada a procesos y reporting',
],
},
];
const DL_PARA_QUIEN = [
{ tag: 'PYMES', desc: 'Empresas que quieren ordenar su gestión y ver el negocio con claridad.' },
{ tag: 'INDUSTRIAS', desc: 'Plantas y operaciones que necesitan control en tiempo real.' },
{ tag: 'GERENCIAS', desc: 'Decisores que requieren reportes ejecutivos confiables, sin Excel.' },
{ tag: 'CORPORATIVOS', desc: 'Áreas que buscan unificar datos entre sistemas y filiales.' },
];
const DL_INDUSTRIAS = [
{
name: 'Industria',
icon: 'industry',
desc: 'OEE, producción por turno, mantenimiento, calidad y trazabilidad.',
bullets: ['Producción y rendimientos', 'Mantenimiento preventivo', 'Calidad y no conformidades'],
},
{
name: 'Agro & Ganadería',
icon: 'agro',
desc: 'Cosecha, hacienda, alimento, lluvia, lotes y costos por hectárea.',
bullets: ['Trazabilidad de campo', 'Costos por lote / hectárea', 'Productividad por ciclo'],
primary: true,
},
{
name: 'Retail & Distribución',
icon: 'retail',
desc: 'Stock, ventas por sucursal, pedidos, márgenes y reposición.',
bullets: ['Ventas por sucursal', 'Stock y reposición', 'Análisis de canasta'],
},
{
name: 'Finanzas',
icon: 'finance',
desc: 'Tablero financiero ejecutivo, conciliaciones, cashflow y forecasting.',
bullets: ['Cashflow y forecast', 'Conciliaciones automáticas', 'Reporte financiero ejecutivo'],
},
];
const DL_LOGROS = [
{ value: '−70%', label: 'Horas manuales de reporting' },
{ value: '100%', label: 'Información unificada' },
{ value: '24/7', label: 'KPIs en tiempo real' },
{ value: 'x3', label: 'Velocidad de decisión gerencial' },
{ value: '0', label: 'Versiones encontradas del mismo número' },
{ value: '+', label: 'Control financiero y operativo' },
];
const DL_CASOS = [
{
sector: 'AVÍCOLA',
titulo: 'Cadena avícola end-to-end',
desc: 'Trazabilidad desde la planta de incubación hasta la planta de subproductos. 5 etapas, 6 apps en Faena, tableros por proceso.',
stats: [
{ v: '5', l: 'Etapas operativas' },
{ v: '11', l: 'Apps integradas' },
{ v: '24/7', l: 'Datos en línea' },
],
link: { label: 'Ver demo interactiva', href: '#demo' },
primary: true,
},
{
sector: 'AGRO',
titulo: 'Tablero ejecutivo de cosecha',
desc: 'Rendimiento por lote, costos y proyección de margen. Integración con planilla de campo y datos climáticos.',
stats: [
{ v: '−65%', l: 'Tiempo reporting' },
{ v: '+12%', l: 'Margen detectado' },
],
link: { label: 'Caso de uso', href: '#contacto' },
},
{
sector: 'INDUSTRIA',
titulo: 'Control de planta en línea',
desc: 'OEE por línea, mantenimientos y calidad consolidados en un solo tablero gerencial.',
stats: [
{ v: '+8 p.p.', l: 'OEE promedio' },
{ v: '−40%', l: 'NC repetidas' },
],
link: { label: 'Caso de uso', href: '#contacto' },
},
];
const DL_PROCESO = [
{ n: '01', t: 'Diagnóstico', d: 'Entendemos el negocio, mapeamos fuentes y detectamos los quick-wins de mayor impacto.' },
{ n: '02', t: 'Diseño', d: 'Definimos KPIs, mockups de tableros y reglas de negocio. Validamos con usuarios reales.' },
{ n: '03', t: 'Implementación', d: 'Integraciones, modelado, dashboards y apps — entregamos valor desde la 2ª semana.' },
{ n: '04', t: 'Adopción', d: 'Capacitamos in-situ. La herramienta vive sólo si la gente la usa todos los días.' },
{ n: '05', t: 'Mejora continua', d: 'Acompañamos en evolución: nuevos tableros, automatizaciones y casos analíticos.' },
];
const DL_QUOTES = [
{
text: 'El analista de datos es el puente entre tecnología y negocio — un traductor entre el mundo de los datos y el de las decisiones.',
where: 'NUESTRO ENFOQUE',
},
{
text: 'Las empresas no quieren un análisis. Quieren tomar decisiones rentables.',
where: 'POR QUÉ EXISTIMOS',
},
{
text: 'El futuro de tu negocio comienza con un buen dato.',
where: 'FILOSOFÍA',
},
];
const DL_HERO_QUOTE = {
text: 'En el mundo de los negocios, es sabio quien no tiene herramientas y las busca, y es necio quien las tiene y no las aplica.',
attrib: '— Sabiduría operativa',
};
const DL_CONTACT = {
email: 'contactodatalogia@gmail.com',
whatsapp: '+54 9 351 6629820',
linkedin: 'datalogiaconsulting',
web: 'www.datalogia.com.ar',
};
Object.assign(window, {
DL_TAGLINE, DL_SLOGAN, DL_HERO, DL_PILLARS, DL_SERVICIOS,
DL_PARA_QUIEN, DL_INDUSTRIAS, DL_LOGROS, DL_CASOS, DL_PROCESO,
DL_QUOTES, DL_HERO_QUOTE, DL_CONTACT,
});
const DL_BI_REPORTS = [
{
id: 'mercado',
titulo: 'Mercado avícola argentino',
desc: 'Panorama nacional: producción, exportaciones, consumo per cápita y series de tiempo. Fuente: organismos oficiales argentinos.',
src: 'https://app.powerbi.com/view?r=eyJrIjoiMmQ5MzBhMDgtZWMxMy00NjUyLThhODQtMGI0NDFlZjY5ODgzIiwidCI6IjUxMWViZjg2LTY2YzctNDU4OS05MDNhLTcxZmQyY2YxYTFhNyIsImMiOjR9',
tags: ['Mercado', 'Series temporales', 'Nacional'],
},
{
id: 'catedra',
titulo: 'Cátedra avícola — precios',
desc: 'Tablero de seguimiento de precios del pollo en Argentina. Curva, comparativos y proyecciones por categoría.',
src: 'https://app.powerbi.com/view?r=eyJrIjoiZmFkY2E4YjktNzYwYS00NTM0LThmOTYtZTAyODAwYjI2NDc1IiwidCI6IjUxMWViZjg2LTY2YzctNDU4OS05MDNhLTcxZmQyY2YxYTFhNyIsImMiOjR9',
tags: ['Precios', 'Cátedra', 'Histórico'],
},
];
Object.assign(window, { DL_BI_REPORTS });
/* ===== v3-theme.jsx ===== */
/* v3-theme.jsx — themes + Theme controls UI for Datalogia v3 */
(function () {
// Light + dark palettes. The "wire" of the brand mark stays petrol-teal in
// both modes; only the surrounding ambience changes. Accent colors drive
// the inner glow / CTAs / KPI gauges.
const V3_THEMES = {
light: {
mode: 'light',
bg: '#f5f1e8', // warm cream like the logo prints
panel: '#ffffff',
panelAlt: '#ece7da',
text: '#0e2a2a', // dark teal-ink for headings
sub: 'rgba(14,42,42,0.66)',
dim: 'rgba(14,42,42,0.4)',
border: 'rgba(14,42,42,0.10)',
subtle: 'rgba(14,42,42,0.04)',
subtler: '#fbf8f1',
navBg: 'rgba(245,241,232,0.85)',
wire: '#3aaaa8', // brand teal real (matches logo image)
wordmark1: '#0e2a2a', // DATA — heavy ink
wordmark2: '#3aaaa8', // LOGIA — teal del logo
onAccent: '#ffffff',
shadow: '0 24px 60px -28px rgba(14,42,42,0.25)',
},
dark: {
mode: 'dark',
bg: '#072426', // deep petrol like image 3
panel: '#0c3134',
panelAlt: '#072e30',
text: '#eaf4f3',
sub: 'rgba(234,244,243,0.70)',
dim: 'rgba(234,244,243,0.42)',
border: 'rgba(255,255,255,0.10)',
subtle: 'rgba(255,255,255,0.04)',
subtler: 'rgba(255,255,255,0.025)',
navBg: 'rgba(7,36,38,0.78)',
wire: '#5fc9c7',
wordmark1: '#ffffff',
wordmark2: '#5fc9c7',
onAccent: '#031618',
shadow: '0 30px 70px -20px rgba(0,0,0,0.55)',
},
};
// Accent palettes — each defines a primary + a complement for glows.
// Designed to live next to the petrol wire of the brand mark.
const V3_ACCENTS = {
cyan: { name: 'Cyan', hex: '#22d3ee', soft: '#67e8f933' },
teal: { name: 'Teal', hex: '#14b8a6', soft: '#5eead433' },
mint: { name: 'Mint', hex: '#34d399', soft: '#6ee7b733' },
azul: { name: 'Azul', hex: '#38bdf8', soft: '#7dd3fc33' },
};
/* ────────── ThemeBar — sticky control sitting in the right of the nav ────────── */
function ThemeBar({ mode, accentKey, onModeChange, onAccentChange }) {
return (
{/* accent dots */}
{Object.entries(V3_ACCENTS).map(([k, a]) => {
const sel = k === accentKey;
return (
{/* mode toggle */}
);
}
function SunIcon() {
return (
);
}
function MoonIcon() {
return (
);
}
Object.assign(window, { V3_THEMES, V3_ACCENTS, ThemeBar });
})();
/* ===== v3-icons.jsx ===== */
/* v3-icons.jsx — Brand mark + service category icons for Datalogia v3 */
(function () {
/* DatalogiaMark — esfera 3D interactiva (drag para rotar) con auto-rotación.
* Mesh denso, nodos con volumen, glow central. Mucho más cercano al logo.
* Props:
* size — px del SVG
* wire, glow — colores
* interactive — si true: drag + auto-rotate + hover halt
* autoSpin — radianes/segundo de auto-rotación (default 0.25)
* detail — 'lo' | 'hi' (default 'hi')
*/
function DatalogiaMark({
size = 56, wire = '#3aaaa8', glow = '#22d3ee',
interactive = false, autoSpin = 0.25, detail = 'hi',
}) {
const uid = React.useMemo(() => 'dm' + Math.floor(Math.random() * 1e6), []);
const cx = 50, cy = 50, R = 36;
// Mesh density
const LATS = detail === 'hi' ? 7 : 5;
const LONS = detail === 'hi' ? 16 : 12;
// Build sphere points (lat × lon) + poles, in 3D unit-sphere coords.
const pts = React.useMemo(() => {
const a = [];
for (let i = 1; i <= LATS; i++) {
const phi = (i / (LATS + 1)) * Math.PI;
const y = -Math.cos(phi);
const r = Math.sin(phi);
for (let j = 0; j < LONS; j++) {
const lam = (j / LONS) * Math.PI * 2;
a.push({ x: r * Math.cos(lam), y, z: r * Math.sin(lam) });
}
}
a.push({ x: 0, y: -1, z: 0 }); // north pole
a.push({ x: 0, y: 1, z: 0 }); // south pole
return a;
}, [LATS, LONS]);
// Edges: parallels + meridians + DIAGONALS (triangulación) + pole connections.
const edges = React.useMemo(() => {
const e = [];
// parallels (same lat, j → j+1)
for (let i = 1; i <= LATS; i++) {
for (let j = 0; j < LONS; j++) {
e.push([(i - 1) * LONS + j, (i - 1) * LONS + ((j + 1) % LONS)]);
}
}
// meridians (same lon, lat → lat+1)
for (let i = 1; i < LATS; i++) {
for (let j = 0; j < LONS; j++) {
e.push([(i - 1) * LONS + j, i * LONS + j]);
}
}
// DIAGONALS — both directions, forms triangulated faces like the
// reference image. (i,j) ↔ (i+1, j+1) AND (i,j+1) ↔ (i+1, j).
for (let i = 1; i < LATS; i++) {
for (let j = 0; j < LONS; j++) {
const a = (i - 1) * LONS + j;
const b = i * LONS + ((j + 1) % LONS);
const c = (i - 1) * LONS + ((j + 1) % LONS);
const d = i * LONS + j;
e.push([a, b]);
e.push([c, d]);
}
}
// pole connections (already triangulate naturally with parallels)
const N = LATS * LONS, S = N + 1;
for (let j = 0; j < LONS; j++) {
e.push([N, j]);
e.push([S, (LATS - 1) * LONS + j]);
}
return e;
}, [LATS, LONS]);
// Rotation state (radians). yaw = around Y, pitch = around X.
const [yaw, setYaw] = React.useState(0.35);
const [pitch, setPitch] = React.useState(-0.18);
const yawRef = React.useRef(yaw);
const pitchRef = React.useRef(pitch);
yawRef.current = yaw;
pitchRef.current = pitch;
const dragRef = React.useRef(null);
const hoverRef = React.useRef(false);
const rafRef = React.useRef(0);
const lastTRef = React.useRef(0);
// Auto-rotate
React.useEffect(() => {
if (!interactive) return;
const loop = (t) => {
const dt = (t - lastTRef.current) / 1000 || 0;
lastTRef.current = t;
if (!dragRef.current && !hoverRef.current) {
setYaw((y) => y + autoSpin * dt);
}
rafRef.current = requestAnimationFrame(loop);
};
rafRef.current = requestAnimationFrame(loop);
return () => cancelAnimationFrame(rafRef.current);
}, [interactive, autoSpin]);
const onPointerDown = (e) => {
if (!interactive) return;
e.currentTarget.setPointerCapture(e.pointerId);
dragRef.current = { x: e.clientX, y: e.clientY, yaw: yawRef.current, pitch: pitchRef.current };
};
const onPointerMove = (e) => {
if (!dragRef.current) return;
const dx = e.clientX - dragRef.current.x;
const dy = e.clientY - dragRef.current.y;
setYaw(dragRef.current.yaw + dx * 0.012);
setPitch(Math.max(-1.2, Math.min(1.2, dragRef.current.pitch + dy * 0.012)));
};
const onPointerUp = (e) => {
dragRef.current = null;
try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (_) {}
};
// Project 3D → 2D applying yaw then pitch.
const sinY = Math.sin(yaw), cosY = Math.cos(yaw);
const sinP = Math.sin(pitch), cosP = Math.cos(pitch);
const P = pts.map((p) => {
// yaw around Y
let x1 = p.x * cosY + p.z * sinY;
let z1 = -p.x * sinY + p.z * cosY;
let y1 = p.y;
// pitch around X
let y2 = y1 * cosP - z1 * sinP;
let z2 = y1 * sinP + z1 * cosP;
let x2 = x1;
return { x: cx + x2 * R, y: cy + y2 * R, z: z2 };
});
const front = (i) => P[i].z >= 0;
const edgeMidZ = ([a, b]) => (P[a].z + P[b].z) / 2;
// Sort edges back-to-front for proper layering
const sortedEdges = [...edges].sort((a, b) => edgeMidZ(a) - edgeMidZ(b));
// Sort nodes back-to-front for the same reason
const nodeOrder = pts.map((_, i) => i).sort((a, b) => P[a].z - P[b].z);
return (
);
}
/* Wordmark — "DATA" pesado + "LOGIA" liviano. Match logo: DATA en
* ink oscuro, LOGIA en teal (mismo color de la esfera). */
function DatalogiaWordmark({ size = 28, primary = '#0e2a2a', secondary = '#3aaaa8' }) {
return (
DATALOGIA
);
}
function DatalogiaLockup({ size = 36, theme, accent }) {
// Wordmark "LOGIA" debe coincidir con el teal de la esfera para fidelidad.
return (
);
}
/* Service / industry / pillar icons — clean monoline */
function V3Icon({ name, size = 22, color = 'currentColor', stroke = 1.6 }) {
const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
switch (name) {
// pillars
case 'merge': return ;
case 'auto': return ;
case 'decide': return ;
// service codes
case 'bi': return ;
case 'eng': return ;
case 'apps': return ;
case 'ai': return ;
// industries
case 'industry': return ;
case 'agro': return ;
case 'retail': return ;
case 'finance': return ;
// contact
case 'mail': return ;
case 'wa': return ;
case 'linkedin': return ;
case 'globe': return ;
case 'arrow': return ;
default: return null;
}
}
Object.assign(window, { DatalogiaMark, DatalogiaWordmark, DatalogiaLockup, V3Icon });
})();
/* ===== v3-bg.jsx ===== */
/* v3-bg.jsx — Decorative animated background for Datalogia v3.
* A canvas-based particle network with depth, parallax-tilted by scroll.
* Mounted behind the hero and "sobre" sections; lightweight (~80 nodes).
*/
(function () {
function AnimatedNetworkBG({ accent = '#22d3ee', wire = '#3aaaa8', density = 70, height = '100%', opacity = 0.7 }) {
const ref = React.useRef(null);
React.useEffect(() => {
const cvs = ref.current; if (!cvs) return;
const ctx = cvs.getContext('2d');
let raf, w = 0, h = 0;
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const N = density;
const pts = Array.from({ length: N }, () => ({
x: Math.random(), y: Math.random(),
vx: (Math.random() - 0.5) * 0.00018,
vy: (Math.random() - 0.5) * 0.00018,
r: 0.6 + Math.random() * 1.4,
phase: Math.random() * Math.PI * 2,
}));
const resize = () => {
const r = cvs.getBoundingClientRect();
w = r.width; h = r.height;
cvs.width = w * dpr; cvs.height = h * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
};
resize();
const ro = new ResizeObserver(resize);
ro.observe(cvs);
const wireRgb = hexRgb(wire);
const accentRgb = hexRgb(accent);
const loop = (t) => {
ctx.clearRect(0, 0, w, h);
const ts = t / 1000;
for (const p of pts) {
p.x += p.vx; p.y += p.vy;
if (p.x < -0.05) p.x = 1.05; if (p.x > 1.05) p.x = -0.05;
if (p.y < -0.05) p.y = 1.05; if (p.y > 1.05) p.y = -0.05;
}
ctx.lineWidth = 1;
for (let i = 0; i < N; i++) {
for (let j = i + 1; j < N; j++) {
const dx = (pts[i].x - pts[j].x) * w;
const dy = (pts[i].y - pts[j].y) * h;
const d = Math.hypot(dx, dy);
if (d < 170) {
const a = (1 - d / 170) * 0.32;
ctx.strokeStyle = `rgba(${wireRgb},${a})`;
ctx.beginPath();
ctx.moveTo(pts[i].x * w, pts[i].y * h);
ctx.lineTo(pts[j].x * w, pts[j].y * h);
ctx.stroke();
}
}
}
for (const p of pts) {
const pulse = 0.5 + 0.5 * Math.sin(ts * 1.6 + p.phase);
const r = p.r * (1 + pulse * 0.35);
// glow
ctx.fillStyle = `rgba(${accentRgb},${0.06 + pulse * 0.12})`;
ctx.beginPath();
ctx.arc(p.x * w, p.y * h, r * 4, 0, Math.PI * 2);
ctx.fill();
// node
ctx.fillStyle = `rgba(${wireRgb},${0.7 + pulse * 0.3})`;
ctx.beginPath();
ctx.arc(p.x * w, p.y * h, r, 0, Math.PI * 2);
ctx.fill();
}
raf = requestAnimationFrame(loop);
};
raf = requestAnimationFrame(loop);
return () => { cancelAnimationFrame(raf); ro.disconnect(); };
}, [accent, wire, density]);
return (
);
}
function hexRgb(hex) {
const h = hex.replace('#', '');
return [
parseInt(h.slice(0, 2), 16),
parseInt(h.slice(2, 4), 16),
parseInt(h.slice(4, 6), 16),
].join(',');
}
/* AuroraBlobs — slow morphing blurred blobs behind sections, accent-tinted.
* Cuando va como background fijo a full-page, los blobs se distribuyen
* a lo alto del viewport (no solo en una zona) para que el efecto se vea
* cubriendo toda la altura de scroll. */
function AuroraBlobs({ accent = '#22d3ee', wire = '#3aaaa8', opacity = 0.6 }) {
return (
);
}
Object.assign(window, { AnimatedNetworkBG, AuroraBlobs });
})();
/* ===== v3-demo.jsx ===== */
/* v3-demo.jsx — "Demo interactiva · Cadena avícola" section embedded in v3.
*
* Reuses CADENA + ChainFlow + LiveAppSheet + LiveDashboard from shared.jsx,
* but rewrites the chrome/description card to match the v3 theme tokens
* (no `dark` boolean — uses theme.panel, theme.border, etc.).
*
* Top-of-section tab toggles between two views:
* APLICACIONES → cadena chain flow + AppSheet embeds per stage
* TABLEROS BI → embedded Power BI public reports
*/
(function () {
const { useState, useEffect, useMemo } = React;
function Demo({ theme, accent }) {
const [tab, setTab] = useState('apps'); // 'apps' | 'bi'
const [active, setActive] = useState('granjas');
const stage = useMemo(() => CADENA.find((s) => s.id === active) || CADENA[0], [active]);
const [activeSub, setActiveSub] = useState(null);
useEffect(() => {
if (stage.subStages && stage.subStages.length) {
setActiveSub(stage.subStages[0].id);
} else {
setActiveSub(null);
}
}, [stage]);
const effectiveStage = useMemo(() => {
if (!stage.subStages || !activeSub) return stage;
const found = stage.subStages.find((s) => s.id === activeSub);
if (!found) return stage;
return {
...stage, ...found,
nombre: stage.nombre, parentShort: stage.short, isSubView: true,
};
}, [stage, activeSub]);
const isDark = theme.mode === 'dark';
return (
{/* Section head + tab switcher */}
Demo interactiva · Cadena avícola
La operación completa, paso por paso
Cada eslabón con su app y su tablero. Cambiá entre las aplicaciones que diseñamos para cada planta y los tableros BI de mercado nacional creado por nosotros que complementan la operación diaria y las decisiones a tomar.
POWER BI · TABLEROS PÚBLICOS · ACTUALIZACIÓN AUTOMÁTICA
);
}
/* ───────────────── CÁLCULOS view ───────────────── */
function CalcView({ theme, accent }) {
const sheets = [
{ code: '01', name: 'Pollo Vivo', desc: 'Modelo de costos por etapa y por unidad — directos, indirectos, depreciaciones y mortalidad.' },
{ code: '02', name: 'Eviscerado', desc: 'Rendimientos, mermas, costos por kilo terminado y composición del costo final.' },
{ code: '03', name: 'Equilibrio', desc: 'Punto de equilibrio operativo: cuántas unidades hay que vender para cubrir costos fijos.' },
{ code: '04', name: 'Contrib. marginal', desc: 'Aporte de cada producto al margen total — qué tirar primero, qué cuidar.' },
{ code: '05', name: 'PE varios productos',desc: 'Punto de equilibrio multi-producto con mezcla de ventas.' },
{ code: '06', name: 'VAN / TIR', desc: 'Evaluación de inversiones: valor actual neto, tasa interna de retorno y payback.' },
{ code: '07', name: 'Competencia perfecta',desc: 'Análisis bajo supuestos de mercado competitivo — precio, cantidad óptima.' },
{ code: '08', name: 'EERR', desc: 'Estado de resultados proyectado que recoge todo el modelo, con sensibilidad.' },
];
return (
{/* Hero block describing the calculator */}
Demo · Lo que se puede modelar
Calculadora de costos · cadena avícola
Ejemplo en vivo de los cálculos que armamos para una empresa avícola — modelado de costos, equilibrio, contribución marginal, VAN/TIR y EERR. Editá cualquier celda y mirá cómo todo se recalcula al instante. Los mismos cálculos se pueden modelar para cualquier negocio que entendamos en profundidad.
Somos la consultora que entiende primero tu negocio y después tus datos. Diseñamos automatismos, apps, integraciones, dashboards ejecutivos y modelos analíticos para mejorar la toma de decisiones, optimizar procesos y detectar oportunidades de crecimiento.
Trabajamos integrando información operativa, financiera y productiva con herramientas modernas de analytics y automatización.