// Animación conceptual: qué le hace la inflación al margen de un plato const MONTHS = ['Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic', 'Ene', 'Feb']; const BASE_COST = 5597, BASE_PRICE = 22000; const INFL = [0, .035, .072, .098, .141, .186, .215, .262, .298, .331, .378, .412]; // acumulada const InflationAnim = () => { const [t, setT] = React.useState(0); const [playing, setPlaying] = React.useState(true); const ref = React.useRef(null); // Solo corre cuando la sección está a la vista React.useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver(([e]) => setPlaying(e.isIntersecting), { threshold: 0.25 }); io.observe(ref.current); return () => io.disconnect(); }, []); React.useEffect(() => { if (!playing) return; const id = setInterval(() => setT(v => (v + 0.045) % 12), 90); return () => clearInterval(id); }, [playing]); const i = Math.min(11, Math.floor(t)); const f = t - i; const infl = INFL[i] + (INFL[Math.min(11, i + 1)] - INFL[i]) * f; const costo = BASE_COST * (1 + infl); // Sin control: el precio de carta nunca se toca const fcSin = (costo / BASE_PRICE) * 100; // Con Gajo: cuando la alerta salta (>30%), se reajusta el precio const priceAt = (upTo) => { let p = BASE_PRICE, n = 0; for (let k = 0; k <= upTo; k++) { if ((BASE_COST * (1 + INFL[k]) / p) * 100 > 29.5) { p = Math.ceil((BASE_COST * (1 + INFL[k])) / 0.25 / 500) * 500; n++; } } return { price: p, fired: n }; }; const { price: priceCon, fired } = priceAt(i); const fcCon = (costo / priceCon) * 100; const justFired = ((BASE_COST * (1 + INFL[i]) / priceCon) * 100) > 29.5; // Cifra de cierre: fija al mes 12, no al frame actual const costo12 = BASE_COST * (1 + INFL[11]); const gap12 = priceAt(11).price - BASE_PRICE; return (
Por qué importa

No sube el plato. Sube el costo.

Un mismo plato, doce meses, sin cambiar ni un gramo de la receta. A la izquierda nadie mira la incidencia. A la derecha, el sistema avisa cuando se pasa de 30% y el precio se reajusta a tiempo.

{MONTHS[i]} · inflación de insumos acumulada {(infl * 100).toFixed(1)}%
1 ? 's' : ''} a tiempo` : 'Vigilando la incidencia'} price={priceCon} costo={costo} fc={fcCon} alert={justFired}/>
Diferencia de contribución al mes 12
{ars(gap12)} por plato vendido
Ejemplo ilustrativo con un plato de entrada. Costo base {ars(BASE_COST)}, margen objetivo 25%. Al mes 12 el costo llega a {ars(costo12)}.
); }; const Lane = ({ title, sub, price, costo, fc, dim, alert }) => { const s = semaforo(fc); const costPct = Math.min(100, (costo / price) * 100); return (
{title}
{sub}
{alert && (
Alerta
)}
35 ? '#EE8A7C' : fc > 30 ? '#F0C173' : '#8FD0AA') : '#8FD0AA', }}>{fc.toFixed(1)}%
incidencia
35 ? '#EE8A7C' : fc > 30 ? '#F0C173' : '#8FD0AA' }}>{s.label}
{/* Barra: costo vs contribución sobre el precio de carta */}
35 ? '#B8483A' : fc > 30 ? '#C08A32' : 'var(--accent)', transition: 'width 140ms linear, background 400ms ease', }}/>
costo {ars(costo)} contrib. {ars(price - costo)}
Precio en carta {ars(price)}
); }; window.InflationAnim = InflationAnim;