# Análisis de partakefoods.com/pages/about (observado con navegador, 20/09/2026)

Página corta (~3100 px a 1440). Capturas en `img/orig-*.jpg`. Los textos e imágenes de Partake NO se reutilizan.

## Secuencia de módulos (arriba abajo) — observado
1. Anuncio + cabecera (logo, menú, botones con sombra dura).
2. `image_banner`: foto a sangre 720 px, titular Bold + entradilla abajo-izquierda.
3. `marquee`: banda naranja con 3 palabras y puntos, desplazamiento continuo.
4. `timeline` (EL SLIDER, 7 slides, 822 px): años, texto centrado, 2 fotos inclinadas enmarcadas.
5. `split_content`: panel turquesa redondeado, foto (recorte) + titular + párrafo.
6. `marquee` de cierre.
7. Footer azul (enlaces, newsletter, sellos).

## Ficha técnica del slider — timeline
- Librería: **Swiper 11** (cdn jsdelivr, CSS/JS externos) + GSAP/ScrollTrigger cargados en la página (no comprobado si el slider los usa; el desplazamiento es Swiper).
- Config leída de `swiper.params`: `slidesPerView:1`, `spaceBetween:30`, `speed:500`, `effect:slide`, `autoHeight:true`, `loop:false`, `autoplay` desactivado, `keyboard` DESACTIVADO (la flecha del teclado no hace nada: probado), `mousewheel` off, `grabCursor` off, touch on.
- Transición: traslado horizontal 500 ms; el easing lo lleva Swiper (CSS `ease`). Las fotos tienen `transition: transform .3s`.
- Controles: (a) flechas circulares azules a los lados (desktop, sobre el slide) y debajo (móvil); prev `disabled` en el primero y next en el último; `aria-label` "Previous/Next slide". (b) Pestañas por año (`ul.timeline-navigation`, píldoras con sombra dura; la activa se rellena). (c) Línea de progreso con punto: `.timeline-progress-bar` crece en % (0 → 16,7 → 66,7 → 100) y el punto marca el año activo. Sin contador numérico; sin dots clásicos.
- Cada slide: `role=group aria-label="n / 7"`; `aria-live=polite` en el wrapper.
- Fotos: dos por slide, `rotate(±10deg)` y la segunda con `translate(0,-15%)`; marco azul con sombra dura y destellos decorativos.
- Móvil (390): 1 slide a pantalla completa + 30 px de hueco (SIN peek de la siguiente); fotos arriba en fila, título y texto debajo; las pestañas pasan a scroll horizontal (710/380 px); flechas se colocan bajo las pestañas; swipe táctil nativo de Swiper. Observado en captura `orig-390-slider.jpg`.
- Interacción probada: clic en next (2017, barra 16,7 %), clic en pestaña (2020-22, 66,7 %), clic en "TODAY" (100 %, next deshabilitado). Arrastre con ratón: no probado en el original (grabCursor off).
- INFERIDO, no observado: que el tilt de las fotos se anime al entrar (hay `transition: transform`).

## Diferencias que decidí en nuestra versión (ver README implícito en el resumen)
- Mismo funcionamiento (flechas + pestañas + línea con punto + 1 slide + sin autoplay) con **scroll-snap nativo**, ~70 líneas de JS, sin librería.
- Sumamos teclado (flechas/Inicio/Fin), arrastre con ratón y `prefers-reduced-motion`; Partake no tiene teclado.
- La duración de nuestro desplazamiento la decide el navegador (`scroll-behavior: smooth`), no 500 ms exactos; la barra y el punto sí usan 500 ms.