// ============================================================ // ImpactSection — "El valor de separar bien" // Sits between HowItWorks (stepper) and PlansSection. // Soft contrast background (var(--resi-bg-soft)) since neighbors are white. // // EXACT colors fixed by spec (no tokenizing, no variations, NO gradients): // Verde principal #4CA548 // Azul oscuro #2D2147 // Naranja alerta #F26A2C // Banner bg #FFF8F0 // Pill bg #F5F0E8 // Texto secundario #6B7280 // Surfaces/borders/radii/shadows/type use design tokens. // ============================================================ const IMP_GREEN = "#4CA548"; const IMP_NAVY = "#2D2147"; const IMP_ORANGE = "#F26A2C"; const IMP_TEXT_2 = "#6B7280"; const ImpactSection = () => { const isMobile = useIsMobile(); const goToCalc = () => { const el = document.getElementById("calculadora"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY, behavior: "smooth" }); }; return (
{/* Eyebrow */}
Impacto
{/* Title — two colors */}

separados, serían ahorros

{/* Subtitle */}

Con una tasa de reciclaje sostenida y medida, tu copropiedad puede acceder al descuento por tarifa multiusuario. Así se ve en un edificio tipo:

{/* Edificio tipo pill */}
Edificio tipo · 50 hogares · Estrato 3
{/* Impact grid */}
{/* Main dark card */}
Ahorro anual proyectado
$216.000
con tasa de reciclaje del 30% medida
Tarifa multiusuario aplicada
{/* Two stacked white cards */}
{/* Recycling-rate bar */}
Tasa de reciclaje del edificio tipo 30% alcanzado con resi
{/* Floating 30% indicator */}
30%
{/* Track */}
{/* 50% max marker */}
{/* Labels */}
0%
sin reciclaje
50%máximo potencial
100%
total residuos
{/* Pain notice — collapsible, relocated before the CTA */} {/* CTA */}
{/* Transparency note */}

* El ahorro real depende de la tasa de reciclaje efectiva del edificio y del cobro actual de la empresa de aseo. Resi no garantiza el descuento, pero sí el sistema para lograrlo.

); }; const PainNotice = () => { const isMobile = useIsMobile(); const [open, setOpen] = React.useState(false); return (
{open && (
Solo funciona cuando el edificio recicla de verdad y tiene la trazabilidad para demostrarlo. Resi te da exactamente eso. Muchos edificios han solicitado este modelo y terminaron pagando más — porque creyeron que reciclar era suficiente sin medir ni certificar.
)}
); }; const ImpactSmall = ({ label, num, desc }) => (
{label}
{num}
{desc}
); const ImpactCta = ({ onClick, full }) => { const [hover, setHover] = React.useState(false); return ( ); }; window.ImpactSection = ImpactSection;