ASRA · 10 estilos × 4 páginas

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.

• 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».

Negro obsidiana y una sola luz azul que te sigue: revela las manos en la barra, enciende el método, escanea la tabla Full Body y pasa detrás de «¿Listo para empezar?».

• Hero «linterna»: las fotos hero-1…4 (Ken Burns lento, carrusel 01/04) solo se ven con nitidez donde cae la luz; en escritorio la luz sigue al puntero, en iPhone deriva sola, baja con el scroll y va adonde tocas. «claro.» brilla con su propio halo.
• Método con fibra de luz: una línea azul se llena con el scroll y, al pasar por cada nodo, enciende la tarjeta de vidrio del paso (borde, número y nodo iluminados).
• Ficha de vidrio con la tabla Full Body real: al entrar, un escáner de luz recorre las filas y cada fila se enciende en orden; las pestañas (Full Body · Torso/Pierna · Empuje) tienen indicador con resorte y vuelven a disparar el escáner. En iPhone cada fila muestra Series/Reps/RIR/Descanso sin ocultar nada.
• Planes: toggle 1 mes / Trimestral −15 % con indicador de resorte, rodillo de precio y etiqueta «MXN pago único» ↔ «MXN / 3 meses (prov.)»; Ritmo lleva un arco de luz que orbita su borde. El WhatsApp de cada plan cambia con la modalidad.
• Cierre «¿Listo para empezar?»: letras en contorno blanco; la luz pasa por detrás y solo se ve a través de las letras (mezcla darken), con polvo de magnesio que brilla cerca de la luz. Botón grande «Marco de luz» (rectángulo sin relleno con un arco de luz que orbita el borde) «Abrir WhatsApp · +52 999 528 7252». Dock inferior estilo iOS con indicador que se desliza con resorte a la sección activa.

Un gimnasio espacial: la foto de las manos con magnesio se vuelve el entorno y la interfaz son ventanas de cristal a distintas profundidades.

• Portal del hero: una ventana muestra el slideshow nítido (cada foto entra con un enfoque de 1.8 s y se mueve al revés del marco, como mirar por una ventana) flotando dentro de su propio entorno desenfocado; la ventana de texto la pisa ~12 % y los tres datos flotan como ornamentos a otra profundidad.
• Arco de ventanas de la ficha: la tabla Full Body real al centro; la hoja PDF y la semana tipo a los lados se despliegan en arco (rotateY ±15°) con el scroll; las tres responden a las mismas pestañas (Full Body / Torso-Pierna / Empuje).
• Planes en profundidad: Ritmo adelante con insignia "Más elegido" y canto hielo, los otros dos hundidos en Z; toggle 1 mes / Trimestral −15 % como ornamento de cristal con disco de resorte (pegajoso y compacto en iPhone: se esconde al bajar entre las tarjetas y vuelve al subir; termina antes de las notas), rodillo de precio, etiqueta "MXN / 3 meses (prov.)" y WhatsApp de cada plan reescrito con precio y modalidad.
• Entorno vivo: cada sección cambia la foto del espacio (oro → concreto → oro → plato → acero → noche) con crossfade de 1.2 s; parallax por profundidad (puntero en escritorio, scroll en iPhone) y barra de ventana visionOS bajo las ventanas principales.
• Cierre: "¿Listo para empezar?" gigante en contorno que se rellena con el scroll, con la ventana de WhatsApp asomando solo por su base (la ventana no pisa la última palabra a 1100, 1280 ni 1440 px), con polvo de magnesio en profundidad (motas finas lejos, bokeh tenue cerca).

Pliego tipográfico suizo: retícula que se dibuja, tinta sobre papel y un azul eléctrico; la ficha Full Body manda y «¿LISTO PARA EMPEZAR?» se rellena por columnas.

• Hero-póster: H1 en las cuatro líneas del original con máscara por línea; "claro." gigante en azul (en iPhone ocupa el ancho entero); foto B/N que entra por cortinilla y cambia por barrido vertical (hero-1…4) con bloque azul "01 / 04" y botones numerados.
• Numeración que corre: contador de sección fijo en la nav (odómetro 01→09) y método fijado con un "0N" gigante cuyo dígito azul rueda 01→04 mientras los pasos se encienden y la barra se llena.
• La ficha como documento: tabla Full Body real con cifras de 52 px, cabecera ASRA WORKOUT, tempo marcado en azul y semana tipo en retícula de 7 (días de fuerza en tinta); pestañas A/B/C con indicador que se desliza.
• Planes como tabla de verdad: columna de rótulos + tres columnas alineadas por subgrid, Ritmo en bloque azul plano con "Más elegido"; toggle 1 mes / Trimestral −15% con bloque que se desliza, rodillo de precio y WhatsApp que cambia de texto.
• Cierre "¿LISTO PARA EMPEZAR?" en contorno de 1 px que se rellena de tinta columna a columna con el scroll (ventanas por columna movidas solo con transform) y botón azul con el número a 26 px.

Un cielo de aurora verde-azul que se vuelve ámbar tenue al bajar: llena toda la pantalla, cambia en cada capítulo y llega a su pico de luz en "¿Listo para empezar?".

• Hero "Entrenamiento claro.": la palabra "claro." va en blanco cálido con bloom suave (sin degradado) y se monta sobre una ventana flotante con las fotos hero-1…4 en Ken Burns. No es texto centrado sobre una foto oscurecida.
• Método en cuatro capítulos fijados con el scroll: número gigante Syne 800 con su propio color, contador 0X / 04 y barras de progreso. La aurora cambia de paleta en cada capítulo (verde, cian-azul, ámbar, coral de amanecer).
• Ficha "un día dentro de tu plan" como hoja ASRA WORKOUT: tabla Full Body real visible sin tocar nada y pestañas Torso/Pierna y Empuje con indicador de resorte. Incluye la semana tipo de cada split en píldoras de luz.
• Planes bajo una aurora ámbar tenue: toggle 1 mes / Trimestral −15% con resorte, rodillo de precio ($399/$599/$1,499 ↔ $1,017/$1,527/$3,822), etiqueta "MXN pago único" ↔ "MXN / 3 meses (prov.)" y enlaces de WhatsApp que cambian con la modalidad. Ritmo va elevado, con borde degradado y "Más elegido".
• Cierre "¿Listo para empezar?": la frase pasa de contorno a relleno de colores de aurora lentos (verde menta, teal y ámbar suave; se desliza con el scroll), sobre el pico de la aurora y un "polvo de luz" (reinterpretación del magnesio de v3) que se aparta del dedo o del puntero. Botón grande "Abrir WhatsApp · +52 999 528 7252".

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.

• 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.

Un instrumento de precisión: las fotos reales son muestras analizadas, la ficha Full Body calcula sus totales en vivo y el cierre se rellena como una terminal.

• Visor de muestras en el hero: hero-1…4 con enfoque óptico, retícula que inspecciona muñequera / barra · moleteado / magnesio (sigue al puntero en escritorio), lecturas X/Y y contador 01/04 tocable.
• Método en cuatro paneles con diagramas SVG que se trazan: variables → revisión → plan; 3 × 8–12 con RIR 1 (fila real de la prensa); pierna primero → tren superior (orden real de la ficha A); ciclo N → N+1 (= patrones, Δ variantes y carga).
• Ficha Full Body como instrumento central: tabla real 5 × 5 con barritas de rango, Σ series / Σ reps / rangos calculados por JS desde las celdas, pestañas A/B/C con resorte y semana tipo de cada split en barras.
• Planes con toggle 1 mes / Trimestral −15%: rodillo de precio, etiqueta "MXN pago único" ↔ "MXN / 3 meses (prov.)", fórmula visible "399 × 3 × 0.85 ≈ 1,017" y WhatsApp prellenado que cambia con la modalidad.
• Cierre "¿LISTO PARA EMPEZAR?" en mono 800 de contorno que se rellena línea a línea con cabezal de escaneo y cursor de terminal; polvo de magnesio en canvas (puntos y cruces) que se aparta del dedo o del puntero.

Una app nativa hecha de luz: el hero retrocede bajo una hoja de iOS, controles de cristal con resorte, tarjetas que se apilan y un «¿Listo para empezar?» que se llena de luz.

• Hero como vista de iOS que retrocede cuando sube la hoja (escala .93, esquinas que se redondean, velo frío; la hoja asoma con su grabber desde el primer pantallazo). Dentro, la foto de las manos con magnesio en Ken Burns y una Live Activity de cristal que recorre, ejercicio por ejercicio, los 5 de la Full Body real.
• Controles segmentados de cristal líquido con física de resorte real (`ASRA.spring`) y estiramiento de gota según la velocidad: pestañas Full Body / Torso-Pierna / Empuje, toggle 1 mes / Trimestral −15% con rodillo de precio (y el WhatsApp de cada plan cambia con la modalidad) e indicador del dock.
• Método en cuatro tarjetas que se apilan como notificaciones (sticky escalonado; la anterior se encoge y se vela al quedar cubierta), cada una con un widget iOS del paso: chips sobre la kettlebell, tres series, pierna → tren superior, interruptor de patrones.
• Luz líquida: brillo radial que sigue al puntero o al dedo sobre las tarjetas, barrido de luz atado al scroll en el método y mesh WebGL luminoso que respira detrás del hero.
• Cierre «¿Listo para empezar?» en contorno azul: las letras entran con resorte y se llenan de luz líquida de abajo arriba con el scroll, sobre motas de magnesio a contraluz (canvas 2D que se aparta del puntero) y una pill verde propia de WhatsApp con el número.

Una película en una página: obturador y letterbox, Ken Burns de apertura, cuatro escenas fijadas con fundido, cartelera de planes y créditos finales con "¿Listo para empezar?" en serif.

• Apertura: el letterbox se cierra como obturador al cargar y se abre con el scroll; hero-1..4 hacen Ken Burns con fundido cruzado (en pausa fuera de vista); hero-6 abre el método.
• Método en cuatro escenas (01 a 04) fijadas a 350svh: el media cruza con fundido según `--ps`, el numeral gigante en contorno y el texto como subtítulo.
• Carril de capítulos I a VIII (desde 1360px) y botón "Escenas" con menú tipo DVD (iPhone), numeral activo en dorado.
• Planes como cartelera con toggle 1 mes / Trimestral −15% (rodillo de precio) y la tabla Full Body real a la vista como hoja del día.
• Cierre: "¿Listo para empezar?" en contorno que se rellena con luz al avanzar el scroll, polvo de magnesio en canvas y el WhatsApp como última línea de créditos.

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.

• 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.