# Titanio · Workout
Página de producto estilo Apple: la barra pasa de tarjeta a sangre, el método se enciende paso a paso y «¿Listo para empezar?» pasa de titanio a negro.

## Momentos firma
- Hero «producto»: titular a dos tonos centrado sobre titanio claro y, debajo, la foto como objeto con esquinas de 28px que se fija y se abre a sangre con `clip-path` (escala 1.08→1) mientras corre una secuencia de fotogramas hero-4→3→2→1 (cámara que se aleja) y las tres specs del hero (App + PDF · Sesiones ~1:15–1:30 h · Mérida + Online) se encienden una a una.
- Método en bloque negro: hero-5 fijada cuya máscara se abre; los 4 pasos literales se encienden en cascada con una barra de progreso azul por paso (tipo historias), todo guiado por `--ps`.
- La ficha «PDF ASRA WORKOUT» como objeto: entra inclinada 14° y se endereza con el scroll; control segmentado iOS (Full Body · Torso/Pierna · Empuje) con indicador de resorte; tabla Full Body real visible por defecto y semana tipo en barras.
- Planes: control segmentado 1 mes / Trimestral −15% con indicador de resorte + rodillo de precio; la etiqueta, la nota y el prellenado de WhatsApp de cada plan cambian con el control; Ritmo con borde fino de acento e insignia «Más elegido».
- Cierre aprobado reinterpretado: «¿Listo para empezar?» gigante en titanio cepillado (gradiente gris con brillo que se desplaza) que se rellena de negro línea por línea con el scroll, y el botón «Abrir WhatsApp · +52 999 528 7252».

## Decisiones
- Fuente del sistema (SF en Apple, Inter de respaldo) a 600 con tracking −0.035em; titulares a dos tonos (negro + `#6e6e73`) como recurso Apple, un solo acento `#0a66d6` (`#2997ff` en negro). Sin vidrio, grano, gradientes de color ni cursor propio (`data-cursor="off"` para que fx2 no lo cree).
- Ritmo claro/negro/blanco alternado: hero titanio → método negro → ficha blanca → planes titanio (tarjetas blancas) → nutrición blanca → «Para quién» negro → FAQ y cuestionario titanio → cierre blanco. La barra local se vuelve negra sobre los bloques negros (IntersectionObserver con franja = altura real de la barra, recalculada en resize; `theme-color` la sigue) y su logo se invierte con `filter:invert(1)` para no usar el SVG blanco con caja `#161411`.
- En iPhone la tarjeta del hero es de ~42svh de alto (`--c:.42`), anclada en el puño izquierdo (`--it:29svh`, `--fx:.28`), y crece a pantalla completa moviendo la foto con translate + scale. El bloque fijado mide lvh (la barra de Safari se contrae al scrollear) y las specs se anclan en svh (`bottom:calc(100lvh - 100svh)`), así no queda franja clara bajo la foto. En escritorio, la tarjeta ocupa el contenedor de 1160px y se abre a sangre.
- La tabla en ≤639px pasa a filas de dos líneas (ejercicio arriba, Series/Reps/RIR/Descanso con etiqueta debajo) con roles ARIA explícitos; ningún valor oculto ni abreviado. Sin JS se ven las tres tablas apiladas.
- El «teléfono/PDF» no usa los `mock-*.jpg` (son marcos con texto y uno dice Hexfit): la ficha se construye en HTML con la tabla real y el logo ASRA WORKOUT.
- Media: hero-1…4 en la secuencia, hero-5 en el método, hero-6 (kettlebell, casa/viaje) bajo la tarjeta de Andrey, plato-metodo en el teaser de nutrición. Sin duplicados juntos. Peso total 1.47 MB.
- Entradas: `data-rv="blur"` solo en tipografía (8px, .75s); bloques grandes con revelado normal (menos coste de `filter`). Se anula el `clip-path:inset(0)` que base2 deja en `[data-rv].in` porque recortaba la insignia, las sombras y los anillos de foco.
- Salvaguarda propia: al saltar con anclas o con scroll muy rápido, lo que quedó por encima del viewport se revela (`ASRA.onFrame`, cada 280ms).
- Movimiento reducido y sin JS: `--ps:1!important` y alturas automáticas en los tramos fijados (estado final, sin scroll muerto), cierre en negro sólido, ficha plana, sin animación de pestañas ni acordeón.
- Cuestionario breve incluido (demo): chips de radio accesibles, abre WhatsApp con el mensaje del original; sin `fetch` ni almacenamiento. Sin JS, el formulario hace GET a wa.me con la nota como `text`.
- Revisión del jurado: la nav sigue el orden de la página (Método · Ejemplos · Planes · Contacto); los planes llevan «ASRA · » en el kicker y en el nombre accesible del h3; el ancla #contacto cae a 72vh del cierre (titular casi relleno); el rótulo de precio va siempre bajo la cifra; eyebrow del hero en dos líneas limpias en móvil; pie en cuadrícula de 2 columnas; contraste del [PENDIENTE] sobre negro; textos de condiciones a 15px; zonas táctiles de enlaces en línea de 44px.
- Precios de nutrición del teaser tomados del brief (sección 2, cross-sell); «app de un socio», nunca la marca prohibida. FAQ 5 reescrita sin la marca de pago prohibida.

- Revisión de dirección de arte (diferenciar de Lumen): el azul sale de todo salvo el CTA principal (hero, plan Ritmo, cierre). Nav, enlaces, checks, iconos, insignia «Más elegido», borde del plan elegido, foco, ×-15% y envío del cuestionario pasan a grafito/blanco; los demás planes llevan botón de contorno grafito. Titulares: la segunda frase (`.g`, subtítulo del hero) pasa a titanio cepillado gris (`--ti-d` en claro, `--ti-l` en el bloque negro `#000` del método) con `background-clip:text` que se desplaza con el puntero; contraste ≥3:1 en texto grande. Barras y numerales de los pasos del método en titanio claro. Tokens nuevos `--ink`, `--ti-d`, `--ti-l` anotados en el kit.

## Pendientes marcados
- [PENDIENTE — se confirma por WhatsApp; no publicada] (CLABE / banco, en la nota de pago bajo los planes; viene del original)
- [PENDIENTE: foto de Andrey] (en la tarjeta de «Para quién», junto al marcador de avatar)
- [PENDIENTE: capturas reales del PDF ASRA WORKOUT y de la rutina en la app] (bajo la ficha construida en HTML)

## Avisos de QA aceptados
- QA completo: 0 fallos, 0 avisos en 375/393/430/1440 y movimiento reducido.
- Memoria de texturas del hero en iPhone (will-change de los fotogramas): se quitó `will-change` de f2–f4 en móvil, pero no se recortó la secuencia a 3 fotogramas ni se pudo medir en iPhone real (Chromium headless no da cifras). Queda pendiente medir con Web Inspector (Layers/Memory) en dispositivo.
- Comportamiento lvh/svh con la barra de Safari: la lógica se verificó por CSS y en Chromium (donde lvh = svh); falta confirmarlo en Safari real con la barra expandida y contraída. Se revisaron capturas intermedias del hero (ps≈.5 y .9) en 375 y 430 con un script propio, porque qa.mjs no las incluye y no es de esta carpeta.
- Tamaño de cuerpo ≥16px: `.hint`, `.pl-notas`, `.cu-s p` quedaron en 15px (notas secundarias en bloques estrechos; 16px las haría competir con el cuerpo) y `.ft` en 14px; las etiquetas de semana tipo subieron a 12px.