# Monolito · Workout
Palabras de piedra: ENTRENAMIENTO CLARO. de borde a borde, la foto lo invade y lo invierte; numeral 01→04 fijado y un ¿LISTO PARA EMPEZAR? que se llena sobre magnesio.

## Momentos firma
- Hero: "ENTRENAMIENTO / CLARO." ajustado al ancho exacto (unidades `cqi`, sin JS); la losa fotográfica (hero-1…4 con cortes duros de `clip-path`, pausa y siguiente) invade "CLARO." y las letras se vuelven hueso justo donde cruzan la foto. "CLARO." entra letra por letra.
- Método: "fotocopia." y "humo." en contorno que se rellenan con el scroll; después, un numeral monumental 0 + rodillo 1→4 fijado (resorte) con los cuatro pasos literales y barra de progreso.
- Ficha Full Body como losa negra: tabla real con números tabulares gigantes, pestañas Split A/B/C con indicador de resorte y semana tipo en bloques llenos (fuerza) o en contorno (descanso/cardio).
- Planes como lista vertical gigante (nombre y precio en la misma línea en escritorio), Ritmo en losa negra con "Más elegido" bermellón, marquesina de nombres a 11vw y toggle 1 mes / Trimestral −15% con rodillo de precio; el WhatsApp de cada plan cambia con la modalidad.
- Cierre "¿LISTO / PARA / EMPEZAR?" ajustado al ancho, en contorno limpio que se llena de abajo arriba línea por línea con el scroll, sobre polvo de magnesio (canvas 2D, partículas cuadradas que reaccionan al puntero, al scroll y al toque); al completarse, el magnesio estalla. Botón WhatsApp bermellón magnético con el número visible.

## Decisiones
- Paleta exacta de e06 (hueso `#efece6`, negro `#0e0e0e`, `#5b5852`, bermellón `#e63b1f`). El acento solo aparece en "Más elegido", la barra "/" de la marquesina, el foco y el botón final; texto negro sobre bermellón (4.6:1).
- Bricolage Grotesque 800, tracking −0.05em declarado en cada elemento que cambia de tamaño: si se hereda, el `em` llega en px y deforma el ajuste. Ancho ajustado con `font-size: calc(100cqi / em)` usando anchos medidos; "CLARO." con `font-kerning:none` para que mida igual con y sin el split de fx2.
- La fuente variable trae contornos superpuestos y `-webkit-text-stroke` los dibujaba (líneas dentro de L, T, P). Se usa `paint-order: stroke fill` con relleno del color del fondo: el contorno queda limpio. El relleno es una copia `aria-hidden` dentro de una ventana que se desplaza con `transform`, así que solo trabaja el compositor y no se repinta texto gigante en cada cuadro.
- Nav con `mix-blend-mode:difference` (oscura sobre hueso, clara sobre negro). Se esconde al bajar y vuelve al subir o al recibir foco. En móvil, menú monumental a pantalla completa (`100dvh`, foco atrapado, Esc).
- Tabla semántica con roles explícitos. Debajo de 760px cada fila pasa a dos líneas (nombre, y luego los 4 valores con etiqueta), sin ocultar columnas ni cambiar valores. Las fichas B y C van en pestañas; sin JS se ven las tres.
- Los `mock-*.jpg` son marcos de relleno, así que no se usan: la ficha está hecha en HTML con la tabla real y el logo, y se dejó [PENDIENTE] de capturas reales. `cta-bg.jpg` y `entreno-poster.webp` no se usan; el cierre es negro puro con magnesio.
- Nutrición: la foto del plato va como una "palabra" dentro del titular ("Planes de [plato] nutrición"), con `alt=""` porque es decorativa en esa posición.
- Para quién: `gym-barbell.jpg` como objeto con filete de 2px. Al pasar el puntero se revela la kettlebell debajo (escala 1.03); en táctil se queda la foto principal.
- El cuestionario es una frase con huecos (selects tipográficos). Solo abre WhatsApp: sin fetch ni almacenamiento.
- Movimiento reducido: sin fijados (lista estática con numerales en contorno), rellenos completos, sin canvas, sin autoplay (la foto arranca en pausa con botón de reproducir). Sin JS todo se lee.
- Rendimiento: 1 solo canvas animado, que se pausa fuera de vista, con DPR ≤ 1.5 y pintado por lotes de opacidad (6 llamadas por cuadro). El parallax de la foto va con `transform`. Hay un revelado de respaldo para saltos de ancla. En la pasada final el fps indicativo de escritorio en headless fue de 37 a 46 (bajó a 21 con los otros constructores corriendo QA a la vez).

- Ronda de correcciones tras la revisión externa: el rodillo del numeral lleva holgura (`padding-right:.14em` con margen negativo) para que el 2 y el 4 no se rebanen; el magnesio se reanuda al volver a la pestaña (`enVista` del IntersectionObserver); la frase del cuestionario va en dos cláusulas (`.cl`) sin partirse y con selects de ancho propio (en móvil, etiqueta arriba y select a todo el ancho).
- Cierre con tracking −0.035em (`--em` 2.98 · 2.60 · 5.04 · "¿LISTO PARA" 5.97): las letras ya no se montan ni dejan filete oscuro al rellenarse. En el hero, "CLARO." baja a 56 % del ancho y la foto crece a 50cqi para que siga invadiéndolo; así los tres datos caben en 1440×900.
- Planes: bajo 520px el precio siempre va en segunda fila; `.pr` con −0.03em para que la coma no se aplaste. Textos informativos a 16px (`.nota`, `.seg-hint`, `.h-meta dd`, `.c-nota`), legales a 15px. Nav con el complemento del hueso (`#e1ded8`) para que `difference` dé negro neutro. `[PENDIENTE]` sin amarillo: filete punteado del color del texto. Imágenes hero-2…4 con `loading="lazy"` y prioridad baja (se fuerzan a eager al pedir la siguiente).

## Pendientes marcados
- [PENDIENTE: capturas reales del PDF ASRA WORKOUT y de la rutina en la app]
- [PENDIENTE — se confirma por WhatsApp; no publicada] (CLABE / banco para SPEI)
- [PENDIENTE: foto de Andrey]

## Avisos de QA aceptados
- ninguno