# Órbita · Workout
Violeta-negro espectral: anillo 3D de fotos y datos que gira con scroll y dedo, planes en tramo horizontal fijado y cierre en contorno espectral con letras en órbita.

## Momentos firma
- Hero en diagonal: titular a la izquierda y anillo 3D de 10 tarjetas (5 fotos reales `.rc.foto` y 5 datos del plan `.rc.fx`) que gira con el scroll, se arrastra con el dedo/ratón o con las flechas, con resorte (`ASRA.spring`), órbitas SVG con satélites y nebulosa WebGL alineada al anillo. En iPhone el anillo va entre el titular y el texto, entero en la primera pantalla; las tarjetas de datos, de espaldas, solo dejan el degradado (sin texto en espejo).
- Planes en tramo horizontal fijado (escritorio ≥1000×840): la sección se fija y una fila de tres tarjetas viaja con `--ps`, con medidas en `vh` para que quepa; con Tab, el scroll vertical sigue al foco. En iPhone, carril con snap que arranca centrado en Ritmo y puntos de 44 px. Toggle 1 mes / Trimestral −15% con rodillo de precio.
- Ficha "un día del plan": pestañas Full Body / Torso-Pierna / Empuje (un solo panel visible), tabla real (5 filas × 5 columnas; en móvil nombre arriba y 4 datos con su etiqueta, valores intactos) y "semana tipo" dibujada como satélites en órbita.
- Cierre "¿LISTO PARA EMPEZAR?": titular enorme en contorno espectral que se rellena con el scroll, letras que orbitan y se desplazan contra el puntero, polvo de magnesio en canvas 2D y botón de WhatsApp con borde espectral giratorio.
- Cursor con etiqueta (`data-cursor`: Arrastra, Abrir...) y nav flotante en píldora con barra de progreso espectral.

## Decisiones
- Anillo de 10 tarjetas (rotateY(k·36°)) que alterna 5 fotos reales con 5 datos verificables del brief (3×, 3–6, PDF, 1:15, pierna primero): cuenta el método sin inventar cifras y se reduce a 116×152 px en 375.
- Corrección de revisión externa: las fases del Método pasan de `.ph` a `.fase` (la colisión con `.rc.ph` reducía las fotos del anillo a círculos de 56 px); se añade `.panel[hidden]{display:none}` (las pestañas no cambiaban nada); el texto de las tarjetas traseras se oculta por JS (`.bk`) porque `backface-visibility` no aplica a hijos aplanados.
- El tramo horizontal solo se fija con JS, escritorio (≥1000×840) y sin movimiento reducido; padding superior = nav + 84 px, h2 en una línea y tarjetas/gaps con `clamp(…vh…)`. Medido a 1440×900/840, 1280×860, 1024×840, 1920×1080 y 1024×1366 (sin desborde, etiqueta bajo la nav, barra de progreso visible). Por debajo (1366×768, 1024×768) cae a la rejilla estática de tres tarjetas. En iPhone/RM, carril táctil con snap. Nada esencial depende del hover.
- Hero iPhone: orden label → h1 → anillo → lead → CTAs → datos; los datos pasan a una columna a 15 px por debajo de 560 px. `Mérida / online` con espacios sin salto.
- Tabla móvil de 2 líneas con etiqueta por celda (`data-l`); el `thead` queda solo para lectores de pantalla. Descanso siempre visible, valores literales del brief.
- `overflow-x:clip` en `.sec`, `.planes`, `.rail` y `.pie` para que los halos y anillos decorativos no creen scroll horizontal; `.pie` usa `env(safe-area-inset-bottom)`.
- Ritmo vertical más ceñido (`--sec` máx. 136 px; Planes y Cierre con más aire). Tarjeta Ritmo en <420 px con la insignia en su propia fila y `.kick` sin partir.
- Nutrición: el `clip-path` de `data-rv` recortaba la sombra y los anillos del planeta (de ahí el "rectángulo"); se anula en `.planet` y los anillos suben de grosor/opacidad. Botones `.mag` con `data-rv` sin el retraso de 0.9 s.
- Rendimiento: halos y brillos pausados fuera de vista (IntersectionObserver); 4 fotos del anillo con `loading="lazy"`.
- Accesibilidad: anillo como `role="group"` con `aria-roledescription`; texto secundario a 15–16 px (solo el aviso legal del pie queda en 13 px).
- Tipografía: Space Grotesk 500 con un contrapunto Fraunces itálica por titular (`<i>`); sin serif en titulares.
- Pago solo por SPEI/transferencia; "Hexfit" aparece con su aviso legal de terceros; nutrición = "app de un socio".

## 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, en la nota de pago; aparece dos veces porque hay versión móvil y de escritorio)
- [PENDIENTE: foto de Andrey]

## Avisos de QA aceptados
- "N elementos [data-rv]/[data-split] nunca se revelaron" (iphone-375/393/430 y desktop-1440): artefacto del recorrido de QA, que salta de a ~1 pantalla en una página de ~11 000 px. Con un recorrido continuo solo quedan sin revelar unos pocos (p. ej. el `.pl-lead` de escritorio, oculto a propósito en el modo fijado). Sin JS o con movimiento reducido todo se ve.
- Fotos del anillo (JPG 1920 px de 100–325 KB para tarjetas de 116–176 px): `_assets` es de solo lectura y no hay versiones reducidas; incrustar miniaturas en base64 inflaría el HTML. Se mitiga con `loading="lazy"` en las 4 fotos no iniciales. Pendiente de producción: exportar versiones de ~480 px.
- Los 13 px del aviso legal del pie se mantienen (texto legal, no contenido).