Good. Now I have full context. Let me also check what WhatsApp icon is available and where the phone number issue is in the footer:

Now I understand all issues clearly:

1. DemoAnimation on mobile: Steps can't be changed via swipe. Need to add touch swipe detection and increase the auto-advance interval from 3.5s to 4.5s per step.
2. IntegrationCta: Uses MessageCircle (a speech bubble) instead of the actual WhatsApp icon. Need to create a proper WhatsApp SVG icon. Also need to remove the WhatsApp number from the "call" action (WhatsApp number is 5611125024, phone number for calls is 5559124761).
3. Footer: Has the WhatsApp number (5611125024) listed as a phone link to call - need to remove that and keep only the actual phone number (5559124761) for calls.

Let me implement all three:

Now rewrite the DemoAnimation with touch swipe support and slower timing:

Now update IntegrationCta - replace MessageCircle with WhatsApp icon and remove WhatsApp number from phone call:

Now fix the Footer - remove the WhatsApp number from phone calls, use proper WhatsApp icon, keep only 5559124761 for calls:

Now remove the WhatsApp number from phone links - keep only 5559124761 for calls:

Now let me also update the Hero and Navbar CTAs to use the WhatsApp icon instead of MessageCircle:

Now update the Navbar WhatsApp button too:

Now let me also check the pricing.tsx for the same MessageCircle issue:

Good, now I'll fix both files in parallel:

Let me verify there are no remaining MessageCircle usages left:

All MessageCircle icons have been replaced. Here's the summary of changes:

1. Swipe en mobile para pasos del proceso - El componente DemoAnimation ahora detecta gestos de swipe horizontal (onTouchStart/onTouchEnd con umbral de 40px) y muestra flechas izquierda/derecha como controles adicionales en mobile. En desktop se mantiene la lista lateral de pasos clickeable. El auto-avance se pausa 10 segundos tras cualquier interaccion manual.
2. Tiempo de lectura aumentado - El intervalo de auto-avance pasó de 3.5s a 4.5s por paso.
3. Icono de WhatsApp real - Se creó components/icons/whatsapp.tsx con el SVG oficial de WhatsApp y se reemplazó MessageCircle (burbuja de chat genérica) en todos los componentes: hero, pricing, solution, integration-cta, footer y demo-animation.
4. Número de WhatsApp eliminado de llamadas - El footer ahora solo muestra el 55 5912 4761 como numero telefónico para llamadas; el enlace de WhatsApp va directo al chat sin exponer el número.

Let me first save the screenshots, then check where the current images are used so I can generate new composites that blend the real product shots with the existing design style.

Now let me read the hero and solution components to see the full image context:

Now I understand the full picture. The hero uses hero-dashboard.jpg (a generic AI-generated mockup) and the solution uses mobile-signature.jpg (another generic stock photo). I need to blend the real screenshots into these compositions. I'll update both components to show the real screenshots alongside the existing design elements - creating a layered composition where the real product is showcased within the styled context.

For the hero, I'll show the real dashboard screenshot as the main image with the floating stats still overlaid. For the solution, I'll create a dual-device composition showing both the app (biometrics) and the desktop platform stacked/overlapping.

Now update the Solution section with a dual-device composition - desktop in back, mobile in front:

Ambas secciones ahora combinan las capturas reales del producto con el diseno existente. En el hero, la captura del dashboard de "Generacion y Firmado de Titulos" es la imagen principal con la app movil (biometria) flotando en la esquina inferior izquierda y la tarjeta "Validados SEP 100%" arriba a la derecha. En la solucion, la composicion muestra el dashboard de escritorio como fondo con la app movil de activacion biometrica flotando al frente en la esquina inferior derecha, y la tarjeta de "Firma verificada / No repudio garantizado" arriba a la izquierda.