# 10 ESTILOS · dirección de arte "POST-DIGITAL LUXURY" para asra.quest

**Umbral común (master prompt de Andrey):** precisión Apple × inteligencia futurista × lujo digital × interacción experimental. Tipografía editorial, materiales con intención, movimiento cinematográfico con causa, iPhone primero, 60 fps, `prefers-reduced-motion` respetado. Nada genérico: ni plantilla SaaS, ni dashboard, ni efectos pegados encima.

**Cada estilo es un sistema completo** que se aplica a las cuatro páginas (home, workout, nutrición, fantasy). Así Andrey puede elegir UN estilo para todo el ecosistema, o mezclar por página. Dentro de un estilo, las cuatro páginas deben sentirse hermanas (mismos tokens, misma nav, mismos botones, misma firma de movimiento). Entre estilos, deben verse **radicalmente distintos**: paleta, tipografía, composición, materiales y firma de movimiento diferentes. Comparten solo el contenido real, los logos y la base técnica (`_assets/pro/base2.css` + `fx2.js`).

**Identidad ASRA que no cambia:** logo ASRA Workout (`_assets/logo-asra-workout.svg`, versión blanca `-blanco.svg`), marcas "ASRA Workout" / "ASRA Nutrición" / "ASRA Fantasy World" / "Zeiknawn", español de México, tono directo y humano ("te contesto yo"), precios reales. Nunca Avena ni NutrIA como marca; nunca Mercado Pago.

## Matriz de distinción (para no converger)

| # | Estilo | Fondo | Tipografía titular | Material | Firma de movimiento | Composición |
|---|---|---|---|---|---|---|
| e01 | Titanio | titanio claro `#f5f5f7` | `-apple-system`/Inter 600, tracking −0.035em | aluminio anodizado, sombras ambientales suaves, hairlines | media fijada que se frota con el scroll (`--ps`), specs que se encienden una a una | centrado, secuencia de producto, mucho aire |
| e02 | Obsidiana | negro profundo `#050507` | Geist 500 | vidrio esmerilado multicapa, bordes iluminados, niebla shader | luz puntual que sigue al puntero (desktop) y al scroll (móvil); dock inferior iOS | tarjetas de vidrio sobre fondo vivo |
| e03 | Cristal | la fotografía de la página, desenfocada, como entorno | Manrope 600 | ventanas translúcidas flotantes (visionOS), profundidad por capas | parallax por puntero e inclinación 3D de ventanas; capas que se separan al hacer scroll | ventanas superpuestas en z, composición espacial |
| e04 | Suizo | papel `#fbfbfa`, tinta `#0b0b0b` | Inter 700 apretado + Space Grotesk para etiquetas | tinta sobre papel, filetes de 1px, retícula visible | máscaras tipográficas por línea, líneas de retícula que se dibujan, numeración que corre | retícula de 12 columnas expuesta, índices 01–04 |
| e05 | Aurora | azul-negro `#07070f` | Syne 600 (titulares), Inter (texto) | gradientes atmosféricos (shader aurora), bloom controlado | aurora reactiva al scroll y al puntero; elementos que flotan lento | pantallas completas, texto grande sobre luz |
| e06 | Monolito | hueso `#efece6`, negro `#0e0e0e` | Bricolage Grotesque 800 enorme (o Unbounded 700) | ninguno: solo tipografía y fotografía | contorno→relleno al hacer scroll, stagger por letra, botones magnéticos | una idea por pantalla, foto como objeto, márgenes brutales |
| e07 | Cómputo | grafito `#121316`, verde-cian de instrumento `#5cf2c5` | JetBrains Mono (datos/etiquetas) + Space Grotesk 500 (titulares) | líneas técnicas, retícula de puntos, números tabulares | diagramas SVG que se trazan (`stroke-dashoffset`), contadores, valores que se actualizan en vivo | módulos/paneles con cabecera técnica |
| e08 | Lumen | blanco luminoso `#ffffff`→`#eef1f6` | Manrope 600 / Geist | cristal líquido, radios grandes (28–36px), sombras de luz | brillo líquido que sigue al dedo/puntero sobre tarjetas, controles segmentados con resorte, tarjetas que se apilan | tarjetas grandes, dock flotante, aire blanco |
| e09 | Película | negro cálido `#0d0b0a` | Instrument Serif itálica (titulares) + Inter (texto) | grano fílmico (`.grain`), letterbox, viñeta | capítulos por scroll con crossfade de media, carril de progreso con números, scrub de video | pantalla ancha, títulos de crédito, silencio |
| e10 | Órbita | violeta-negro `#0a0812` | Space Grotesk 500 + Fraunces itálica para contrapuntos | superficies oscuras con brillos espectrales | anillo 3D de tarjetas que gira con scroll/arrastre, tramo de scroll horizontal, distorsión al hover, cursor con etiqueta | diagonal, elementos orbitando, asimetría |

Reparto de tono: claro = e01, e04, e06, e08 · oscuro = e02, e05, e07, e09, e10 · medio/fotográfico = e03. Ninguna pareja comparte fuente de titular ni firma de movimiento.

## Firmas que Andrey ya aprobó (se incorporan en TODOS los estilos, reinterpretadas)

- **Fantasy:** hero de día con el dispositivo (teléfono) mostrando `fondo-noche.webp` para que el contraste día/noche se sienta de inmediato; en algún punto la página cruza de día a noche. Modos de juego, oleadas, cooperativo, duelo, controles, skins.
- **Workout:** cierre "¿Listo para empezar?" como pieza tipográfica grande y memorable (contorno/outline, trazo, relleno progresivo o lo que dicte el estilo) con el botón de WhatsApp real. Planes con toggle 1 mes / trimestral. Tabla Full Body real.
- **Nutrición:** `hero-food.mp4` (con poster) como apertura y `reel.mp4` más abajo; "del cálculo al plato" como narrativa; recetas reales en galería; tres planes; credenciales (UADY, cédula, SMAE 5.ª).
- **Home:** el contraste de dos mundos (ASRA Salud / día ↔ Zeiknawn / noche) en algún gesto de la página; enlaces reales a los subdominios con candado en los privados; bloques [PENDIENTE] conservados y visibles.

---

## e01 · Titanio — precisión Apple

**Concepto.** Página de producto de Apple pero para un servicio humano: el plan, el plato, el mundo del juego son "el producto". Silencio, aire, un titular por pantalla y media que se fija y se transforma con el scroll. La sofisticación está en la contención.

**Tokens.**
```css
--bg:#f5f5f7;--bg-2:#ffffff;--fg:#1d1d1f;--fg-2:#6e6e73;--acc:#0a66d6;--line:rgba(29,29,31,.1);
--fs:-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;--fd:var(--fs);--r:22px;
```
Modo oscuro opcional por sección ("bloque negro" `#000` con texto `#f5f5f7`) para alternar ritmo, como hace Apple.

**Tipografía.** Titulares 600, `clamp(40px,8vw,96px)`, tracking −0.035em, interlineado 1.02. Subtítulos 400 `#6e6e73`. Números de precio 600 tabulares. Etiquetas 12px 600 tracking .06em en mayúsculas.

**Materiales.** Superficies lisas, sombras ambientales muy suaves (`0 30px 80px -40px rgba(0,0,0,.25)`), hairlines, radios 22–28px. Nada de vidrio ni neón. Fotos con esquinas redondeadas grandes, "objeto" sobre fondo plano.

**Composición.** Centrado. Hero: titular + subtítulo + dos CTA (lleno y texto con flecha). Secciones alternas claro/negro. Specs/tabla en retícula de 3 con hairlines. Planes en tarjetas blancas grandes con la elegida marcada por un borde `--acc` fino.

**Movimiento firma.** (1) Media fijada (`position:sticky`) dentro de un contenedor de 250–300vh: la imagen/video se escala de 1.08→1 y la máscara se abre mientras el texto de los pasos se enciende uno a uno con `--ps`. (2) Entradas con `data-rv="blur"` suaves (14px→0). (3) Hover de tarjetas: elevación 2px + sombra. (4) Botón: escala .97 al pulsar. Nada flota, nada vibra.

**Firma por página.** Home: tres "productos" (Nutrición, Entrenamiento, Fantasy) en secuencia fijada con cambio de color de fondo (claro→negro para Zeiknawn). Workout: el método en 4 pasos con foto fijada; el cierre "¿Listo para empezar?" como tipografía gigante gris-titanio que se rellena a negro con el scroll. Nutrición: video a sangre arriba, "del cálculo al plato" como specs numeradas; recetas en carrusel suave. Fantasy: el teléfono como objeto centrado (marco oscuro con `fondo-noche`), el mundo de día detrás a sangre; al hacer scroll la página pasa a bloque negro.

**Evita.** Vidrio, gradientes de color, grano, cursor personalizado, tipografía serif, más de un acento.

## e02 · Obsidiana — negro profundo y luz

**Concepto.** Interfaz de una generación futura: negro absoluto, superficies de vidrio multicapa y una sola fuente de luz azul espectral que responde a ti. Dock inferior como en iOS. La espectacularidad vive en la luz; el resto es disciplina.

**Tokens.**
```css
--bg:#050507;--bg-2:#0c0d12;--fg:#f2f3f7;--fg-2:#9a9db0;--acc:#8fd3ff;--acc-2:#5b7cff;--line:rgba(255,255,255,.1);
--fs:"Geist","Inter",system-ui,sans-serif;--fd:var(--fs);--r:20px;--glass-bg:#ffffff;--glass-edge:#ffffff;
```
**Tipografía.** Geist 500 para titulares `clamp(38px,7.5vw,92px)`, tracking −0.03em; texto 400 17px; etiquetas mono opcional (JetBrains Mono 12px) para microdatos.

**Materiales.** `.glass` sobre fondo con shader `ASRA.shaders.fog({bg:'#050507',c1:'#101626',c2:'#8fd3ff'})` (fallback: gradiente radial CSS). Bordes iluminados: `border:1px solid` + pseudo-elemento con `conic-gradient` que gira al hover. Resplandor de la luz: `radial-gradient(600px at var(--mx) var(--my), rgba(143,211,255,.14), transparent 60%)` fijo en una capa `position:fixed` (en móvil, la luz se mueve con `--scroll`).

**Composición.** Dock inferior fijo (`.dock` + `.glass`, 4 destinos, respeta `--sab`), cabecera mínima con logo blanco. Hero a pantalla completa con titular y una tarjeta de vidrio con el dato clave. Secciones en tarjetas de vidrio sobre el fondo vivo; tablas con filas que se iluminan al pasar.

**Movimiento firma.** (1) Luz que sigue al puntero/scroll. (2) Tarjetas con `[data-light]`: brillo especular local en `--lx/--ly`. (3) Entrada: `data-rv="scale"` con desenfoque de fondo que se aclara. (4) Dock: el indicador se desliza con resorte entre destinos (`--tab`). (5) Press: la tarjeta se hunde 2px y su borde se enciende.

**Firma por página.** Home: los dos mundos como dos tarjetas de vidrio enormes; al llegar a Zeiknawn la luz cambia de azul a violeta. Workout: tabla Full Body como panel de vidrio con filas que se encienden; "¿Listo para empezar?" en contorno blanco con la luz pasando por detrás de las letras. Nutrición: video a sangre bajo una capa de vidrio con el titular; las recetas como fichas de vidrio con la foto detrás. Fantasy: el teléfono de noche brilla como si fuera la fuente de luz de la página; HUD real en capturas dentro de vidrio.

**Evita.** Fondos grises planos, tipografía serif, grano, colores cálidos salvo en las fotos.

## e03 · Cristal — espacial (visionOS)

**Concepto.** La página es un espacio: el entorno es la fotografía real desenfocada y en movimiento lento, y la interfaz son ventanas de cristal que flotan a distintas profundidades. Al mover el puntero o inclinar la vista, las capas se desplazan a ritmos distintos.

**Tokens.**
```css
--bg:#101216;--fg:#ffffff;--fg-2:rgba(255,255,255,.72);--acc:#9ad8ff;--line:rgba(255,255,255,.18);
--fs:"Manrope","Inter",system-ui,sans-serif;--fd:var(--fs);--r:28px;--glass-bg:#0a0a0e;--glass-edge:#ffffff;--glass-blur:28px;
```
Ventanas: `background:rgba(12,12,16,.55)`, `backdrop-filter:blur(28px) saturate(1.6)`, borde `rgba(255,255,255,.18)`, sombra profunda. Texto blanco siempre (contraste garantizado por el vidrio oscuro).

**Tipografía.** Manrope 600 `clamp(36px,7vw,84px)`, tracking −0.02em; texto 400/500 17px; etiquetas 12px 700 tracking .08em.

**Materiales.** Entorno: `img`/`video` a sangre con `filter:blur(18px) saturate(1.2)` y escala 1.1, cambia por sección (crossfade). Ventanas con `tilt` (`.tilt` + `data-tilt="6"`), reflejo especular en `--lx/--ly`. Elementos "ornamento" (chips, badges) flotando a −40px/+40px en z (parallax por puntero `--px/--py`).

**Composición.** Ventanas superpuestas con solape intencional (una ventana de texto y otra de media que se pisan 10–15%). Nav como una barra de cristal flotante arriba. En móvil las ventanas se apilan con solapes verticales suaves y el parallax pasa a depender del scroll.

**Movimiento firma.** (1) Capas con parallax por puntero: fondo ×0.2, ventana ×0.5, ornamentos ×1. (2) Al hacer scroll, cada ventana entra desde su profundidad (`data-rv="scale"` + desenfoque). (3) El entorno cambia por sección con crossfade de 1.2s. (4) Hover: la ventana se inclina y el borde refleja luz. (5) Botones de cristal con brillo que se desliza al pasar.

**Firma por página.** Home: entorno de día (foto de entrenamiento/nutrición) que al llegar a Zeiknawn cambia a `fondo-noche` con las ventanas volviéndose más oscuras. Workout: ventana con la tabla Full Body sobre el entorno de gimnasio; "¿Listo para empezar?" como texto gigante en contorno detrás de una ventana con el botón de WhatsApp. Nutrición: entorno = `hero-food.mp4` desenfocado; las recetas son ventanas pequeñas en órbita. Fantasy: entorno = `fondo-dia` nítido arriba; el teléfono con `fondo-noche` es una ventana más, flotando con tilt real.

**Evita.** Fondos planos, retículas visibles, tipografía mono, colores saturados fuera del acento.

## e04 · Suizo — editorial

**Concepto.** Estilo Internacional llevado a pantalla: retícula de 12 columnas visible, tinta negra, papel, un único acento eléctrico, jerarquía por tamaño y posición, no por decoración. Las animaciones son tipográficas y geométricas.

**Tokens.**
```css
--bg:#fbfbfa;--fg:#0b0b0b;--fg-2:#5a5a57;--acc:#0a3dff;--line:#0b0b0b;--line-2:rgba(11,11,11,.14);
--fs:"Inter",system-ui,sans-serif;--fd:"Inter";--fm:"Space Grotesk","JetBrains Mono",monospace;--r:0px;
```
**Tipografía.** Inter 700 muy apretada (`letter-spacing:-.05em`) en `clamp(44px,10vw,140px)`, interlineado .9; texto 400 17px/1.55 en columnas de 40–60 caracteres; etiquetas Space Grotesk 12px mayúsculas con tracking .12em; numeración "01 / 04".

**Materiales.** Ninguno: papel y tinta. Filetes de 1px negros, bloques de acento azul planos, fotografías en blanco y negro con un `mix-blend-mode:multiply` sutil (y a color al pasar el puntero).

**Composición.** Retícula de 12 columnas con líneas verticales visibles (pseudo-elementos, opacidad .08). Titulares que cruzan 8–12 columnas, texto en 4–5, media en 6–7. Numeración de secciones en la columna 1. Tablas de precios como tablas de verdad (filas y columnas con filetes). Nav superior: logo a la izquierda, índice a la derecha, ambos en mono.

**Movimiento firma.** (1) Titulares por líneas (`data-split="lines"`) con máscara. (2) Líneas de la retícula que se dibujan al entrar (scaleY desde arriba). (3) Números que corren (`data-count`) y contador de sección fijo que cambia al hacer scroll. (4) Hover sobre fotos: de blanco y negro a color con 400ms. (5) Botón: rectángulo negro; al pasar, el texto se desplaza arriba y entra una copia desde abajo (máscara).

**Firma por página.** Home: tres columnas-índice (01 Nutrición, 02 Entrenamiento, 03 Fantasy World) con el bloque de Zeiknawn invertido (fondo negro, texto papel). Workout: la tabla Full Body es la protagonista, tipografía gigante; "¿LISTO PARA EMPEZAR?" en contorno negro de 1px rellenándose columna a columna. Nutrición: recetas como índice numerado 01–20 con la foto que aparece al pasar; video en un bloque 8/12 con marco de filetes. Fantasy: capturas en retícula estricta; el teléfono de noche ocupa 4 columnas a la derecha del hero de día.

**Evita.** Sombras, radios, vidrio, gradientes, más de un color.

## e05 · Aurora — atmósfera luminosa

**Concepto.** Una atmósfera viva: gradientes profundos que se mueven lentos como una aurora y reaccionan al scroll y al puntero. Todo lo demás es tipografía grande y clara, con elementos que flotan a cámara lenta. Futurista y cálido a la vez.

**Tokens.**
```css
--bg:#07070f;--fg:#eef0ff;--fg-2:#a9adc9;--acc:#a78bfa;--acc-2:#67e8f9;--line:rgba(255,255,255,.12);
--fs:"Inter",system-ui,sans-serif;--fd:"Syne","Inter",sans-serif;--r:24px;
```
Shader: `ASRA.shaders.aurora({bg:'#07070f',c1:'#2b2a86',c2:'#0e7490',c3:'#a78bfa'})` en un canvas fijo detrás de todo; fallback CSS: dos `radial-gradient` animados con `@keyframes` lentos (desactivados en `html.rm`).

**Tipografía.** Syne 600 `clamp(40px,8.5vw,112px)` con tracking −0.02em; texto Inter 400 17–18px; etiquetas 12px 600.

**Materiales.** Bloom: textos clave con `text-shadow:0 0 40px rgba(167,139,250,.35)`; tarjetas semitransparentes (`rgba(255,255,255,.06)` + borde `.12`) sin desenfoque fuerte (el fondo ya es suave); separadores como líneas de luz (`linear-gradient` horizontal que se desvanece).

**Composición.** Secciones a pantalla completa con un titular y un dato; media en formato "ventana" flotante con sombra de color. Nav mínima. Planes en tres columnas con la del medio ligeramente elevada.

**Movimiento firma.** (1) Aurora reactiva (scroll cambia la fase, puntero desplaza las bandas). (2) Elementos que flotan: `@keyframes flotar` 6–9s con desfases, solo decorativos (desactivados en rm). (3) Titulares `data-split="words"` con `--st:.06s`. (4) Hover: la tarjeta gana un halo del color de la aurora. (5) Transición entre secciones: el color dominante de la aurora cambia (uniform via `opts.uniforms` leyendo `--scroll`).

**Firma por página.** Home: aurora azul-violeta de día que vira a violeta-rosa al llegar a Zeiknawn. Workout: la aurora se vuelve ámbar tenue en la sección de planes; "¿Listo para empezar?" como texto gigante con relleno de aurora (`background-clip:text`). Nutrición: video del hero con la aurora fundiéndose sobre él (`mix-blend-mode:screen` en una capa); recetas como ventanas flotantes. Fantasy: la aurora ES el cielo del juego; el teléfono de noche flota con sombra de color; capturas en ventanas.

**Evita.** Bordes duros, tipografía mono o serif, blanco puro como fondo, retículas visibles.

## e06 · Monolito — tipografía monumental

**Concepto.** Lujo brutalista: palabras enormes, hueso y negro, fotografía como objeto escultórico y silencio. Una idea por pantalla. La única "decoración" es el movimiento de las letras y los botones que te persiguen.

**Tokens.**
```css
--bg:#efece6;--fg:#0e0e0e;--fg-2:#5b5852;--acc:#e63b1f;--line:rgba(14,14,14,.14);
--fs:"Inter",system-ui,sans-serif;--fd:"Bricolage Grotesque","Unbounded",sans-serif;--r:0px;
```
**Tipografía.** Bricolage Grotesque 800 `clamp(56px,14vw,220px)`, interlineado .86, tracking −0.05em; palabras clave en contorno (`-webkit-text-stroke:1.5px var(--fg); color:transparent`) que se rellenan al hacer scroll. Texto Inter 400 18px en columnas estrechas. Etiquetas 11px 700 tracking .16em.

**Materiales.** Ninguno. Fotos con recorte duro y, como máximo, un filete negro de 2px. Bloques negros a sangre para invertir.

**Composición.** Márgenes grandes, titulares que rompen el contenedor y tocan el borde, foto flotante que invade el titular, numeración enorme. Planes como lista vertical gigante (nombre y precio en la misma línea, filete abajo), no tarjetas.

**Movimiento firma.** (1) Contorno→relleno ligado al scroll (`--p` → `background-size` de un gradiente con `background-clip:text`, o `clip-path` sobre una copia rellena). (2) `data-split="chars"` en la palabra clave del hero con `--st:.03s`. (3) `.mag` en todos los botones (fuerza .35) y cursor personalizado con etiqueta ("Ver", "Abrir"). (4) Marquesina `.mq` con los nombres de los planes/recetas en 11vw. (5) Hover en fotos: escala 1.03 y la foto siguiente se revela debajo.

**Firma por página.** Home: "SALUD" en contorno que se rellena de negro, y "ZEIKNAWN" en bloque invertido (negro con letras hueso). Workout: "¿LISTO PARA EMPEZAR?" es el ADN de este estilo: contorno con partículas sutiles en canvas detrás (magnesio) y relleno al llegar; es la versión definitiva del efecto que Andrey eligió. Nutrición: "COMIDA REAL." en 16vw con la foto del plato invadiendo la O; recetas como marquesina de nombres y una sola foto grande que cambia. Fantasy: "FANTASY WORLD" en contorno, el teléfono de noche como único objeto en una pantalla hueso; al hacer scroll la pantalla se invierte a negro.

**Evita.** Sombras, radios, vidrio, gradientes de color, más de un acento, tarjetas.

## e07 · Cómputo — elegancia computacional

**Concepto.** La interfaz de un instrumento de precisión: datos tabulares, etiquetas técnicas, diagramas que se trazan, cabeceras con coordenadas. El lujo está en la exactitud. Humano gracias a las fotos reales, que aparecen como "muestras".

**Tokens.**
```css
--bg:#121316;--bg-2:#17181c;--fg:#e6e8eb;--fg-2:#8b9099;--acc:#5cf2c5;--acc-2:#f2b35c;--line:rgba(230,232,235,.12);--grid:rgba(230,232,235,.06);
--fs:"Inter",system-ui,sans-serif;--fd:"Space Grotesk","Inter",sans-serif;--fm:"JetBrains Mono",monospace;--r:6px;
```
**Tipografía.** Space Grotesk 500 `clamp(36px,7vw,88px)` tracking −0.02em; JetBrains Mono 12–13px para etiquetas, unidades, coordenadas y tablas (`.tnum`); texto Inter 16–17px.

**Materiales.** Retícula de puntos de fondo (`radial-gradient(circle, var(--grid) 1px, transparent 1px)` cada 24px), paneles con borde 1px y cabecera mono ("MÓDULO 02 · PLANES"), esquinas marcadas con pequeñas cruces/ángulos (pseudo-elementos), líneas de conexión SVG entre paneles.

**Composición.** Paneles modulares en retícula de 6/12 con etiquetas de estado, barra superior tipo instrumento (logo + hora local + "MÉRIDA, YUC."). Tablas reales para precios y para la tabla Full Body (ejercicios × series × reps), con filas que se iluminan.

**Movimiento firma.** (1) Diagramas SVG que se trazan al entrar (`stroke-dasharray/offset` con transición en `.in`): distribución de macronutrientes (sin inventar cifras: ejemplo marcado como "ejemplo de distribución" o derivado del brief), semana de entrenamiento, línea de oleadas del juego. (2) Contadores `data-count` con unidades mono. (3) Texto que "se escribe" en etiquetas (chars con `--st:.02s`). (4) Hover en paneles: la cabecera cambia a `--acc` y aparece una coordenada. (5) Cursor con cruz fina (en lugar de círculo): redefine `.cur` como dos líneas.

**Firma por página.** Home: mapa de módulos del ecosistema (cada subdominio es un nodo con línea de conexión; privados con icono de candado). Workout: tabla Full Body como instrumento central con totales calculados en vivo (series totales, etc., calculados por JS del contenido real); "¿LISTO PARA EMPEZAR?" en contorno mono gigante con un cursor de terminal parpadeando. Nutrición: "del cálculo al plato" como pipeline de 4 nodos; recetas como "muestras" con ficha técnica (solo los datos reales que existan; si no hay macros, no inventarlos). Fantasy: specs del juego (motor WebGL/WebGPU, modos, jugadores, controles) como panel técnico; teléfono de noche con etiquetas de HUD apuntando a elementos reales de la captura.

**Evita.** Serif, vidrio, gradientes, radios grandes, colores cálidos fuera del ámbar de alerta.

## e08 · Lumen — blanco luminoso

**Concepto.** Lo más cercano a una app nativa premium de iOS: blanco luminoso, cristal líquido, radios grandes, controles segmentados, dock flotante. Todo responde con resorte. La luz se desliza por las superficies como si fueran de verdad.

**Tokens.**
```css
--bg:#ffffff;--bg-2:#eef1f6;--fg:#0f1222;--fg-2:#5c6378;--acc:#1f4fd8;--glow-1:#9bdcff;--glow-2:#d9c9ff;--line:rgba(15,18,34,.08);
--fs:"Manrope","Inter",system-ui,sans-serif;--fd:var(--fs);--r:32px;--glass-bg:#ffffff;--glass-edge:#ffffff;
```
Fondo: `ASRA.shaders.mesh({a:'#ffffff',b:'#e9f3ff',c:'#f3edff',d:'#e6fbff'})` muy suave, o gradiente CSS equivalente.

**Tipografía.** Manrope 700 `clamp(36px,7vw,80px)` tracking −0.03em; texto 500 17px; etiquetas 12px 700 tracking .04em. Números tabulares.

**Materiales.** Tarjetas blancas con borde de luz (`box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 20px 60px -30px rgba(31,79,216,.25)`), highlight líquido: pseudo-elemento con `radial-gradient` en `--lx/--ly` (`[data-light]`). Controles segmentados con indicador que se desliza con resorte (`--tab`). Dock flotante `.glass` claro con iconos SVG propios (trazados a mano, 24px, 1.75px de trazo).

**Composición.** Tarjetas grandes apiladas con 16px de separación; el hero es una tarjeta a sangre con la foto y el titular encima; planes como tarjetas con el control segmentado 1 mes/trimestral arriba. En móvil, dock inferior con 3–4 destinos.

**Movimiento firma.** (1) Brillo líquido que sigue al dedo. (2) Control segmentado con resorte y rodillo de precio. (3) Tarjetas que se apilan (`position:sticky` escalonado con escala .96 de la anterior). (4) Press con `.press` y sombra que se contrae. (5) Entradas con `data-rv="scale"` y `--dur:.7s`.

**Firma por página.** Home: dos tarjetas-mundo; la de Zeiknawn es la única oscura (negro azulado) y "enciende" un brillo violeta al entrar. Workout: tabla Full Body como tarjeta con filas-pill; "¿Listo para empezar?" grande en azul `--acc` con las letras entrando con resorte y el botón WhatsApp como pill verde propia. Nutrición: video en tarjeta con esquinas 32px; recetas como pila de tarjetas apiladas que se van revelando. Fantasy: el teléfono es literalmente la tarjeta hero (marco con `fondo-noche`), fondo de día desenfocado y claro detrás.

**Evita.** Negros planos, tipografía serif o mono, texturas, bordes duros.

## e09 · Película — cinematográfico

**Concepto.** Una película en una página: grano, letterbox, títulos en serif itálica, capítulos numerados y un carril de progreso. El media manda y el texto son créditos. Oscuro, cálido, pausado.

**Tokens.**
```css
--bg:#0d0b0a;--fg:#f3ece4;--fg-2:#a89f94;--acc:#d9a765;--line:rgba(243,236,228,.14);
--fs:"Inter",system-ui,sans-serif;--fd:"Instrument Serif","Fraunces",serif;--r:4px;--grain:.08;
```
**Tipografía.** Instrument Serif itálica `clamp(44px,9vw,120px)` interlineado .95 (sin tracking negativo: la serif respira); créditos en Inter 12–13px mayúsculas tracking .14em; texto Inter 400 17px/1.6.

**Materiales.** `.grain` sobre `body` (overlay), viñeta en el hero (`radial-gradient` oscuro en los bordes), franjas letterbox de 6vh arriba/abajo en el hero que se abren al hacer scroll, media con `filter:contrast(1.05) saturate(.9)` para unificar.

**Composición.** Capítulos 01–04 a pantalla completa con media a sangre y un título; carril de progreso vertical fijo a la derecha (números de capítulo que se iluminan); texto en bloques estrechos centrados o en esquina inferior izquierda como subtítulo.

**Movimiento firma.** (1) Capítulos fijados con crossfade de media según `--ps` (dos capas de imagen, opacidad calculada). (2) Scrub de video con el scroll donde exista video (`video[data-scrub]` dentro de un contenedor de 300vh) con fallback autoplay. (3) Letterbox que se abre. (4) Títulos con `data-split="lines"` y `--dur:1.2s`. (5) Carril de progreso con el número activo en `--acc`.

**Firma por página.** Home: "Capítulo I: de día" (Salud) / "Capítulo II: de noche" (Zeiknawn) con el media cambiando de las fotos cálidas a `fondo-noche`. Workout: slideshow Ken Burns de los heros (`hero-1..6.jpg`) como título de apertura; "¿Listo para empezar?" como título final de créditos en serif gigante, con el teléfono de WhatsApp como última línea de créditos. Nutrición: `hero-food.mp4` con scrub; `reel.mp4` en un capítulo propio; recetas como fotogramas de contacto (tira de película). Fantasy: `t32-intro-cinematica.png` como primer fotograma; el teléfono de noche entra como "escena 2" con el cielo cruzando de día a noche en el fondo.

**Evita.** Blancos, vidrio, radios grandes, neón, retículas visibles.

## e10 · Órbita — experimental

**Concepto.** La versión Awwwards: elementos que orbitan, un tramo de scroll horizontal, un anillo 3D de tarjetas que gira con el scroll o el arrastre, distorsión sutil al pasar sobre las imágenes y un cursor que habla ("Ver", "Jugar", "Abrir"). Violeta-negro con brillos espectrales.

**Tokens.**
```css
--bg:#0a0812;--bg-2:#120f1f;--fg:#f1ecff;--fg-2:#a89fc6;--acc:#c9b3ff;--sp-1:#b388ff;--sp-2:#5ee7ff;--sp-3:#ff7ad9;--line:rgba(241,236,255,.12);
--fs:"Space Grotesk","Inter",system-ui,sans-serif;--fd:var(--fs);--fi:"Fraunces",serif;--r:16px;
```
**Tipografía.** Space Grotesk 500 `clamp(40px,8vw,104px)` tracking −0.03em con una palabra en Fraunces itálica 400 como contrapunto (`<i>`); texto 16–17px; etiquetas 11px mayúsculas tracking .18em.

**Materiales.** Superficies oscuras con brillos espectrales (gradiente cónico `--sp-1→--sp-2→--sp-3` a opacidad .5 en bordes/halos), órbitas dibujadas (círculos SVG finos) detrás del hero, imágenes con máscara redondeada irregular.

**Composición.** Diagonal: el hero tiene el titular a la izquierda y un anillo 3D de tarjetas (fotos reales) girando a la derecha; en móvil el anillo pasa abajo y se arrastra con el dedo. Un tramo de scroll horizontal (contenedor fijado de 300vh que traslada una fila de tarjetas con `--ps`) para planes o recetas. Nav flotante con pill y el cursor con etiqueta.

**Movimiento firma.** (1) Anillo 3D: tarjetas en `transform: rotateY(i*36deg) translateZ(Rpx)` dentro de un contenedor con `transform-style:preserve-3d` que gira con `--scroll`/arrastre (resorte `ASRA.spring`). (2) Scroll horizontal fijado. (3) Distorsión al hover: la imagen escala 1.06 y se desplaza contra el puntero (`--lx/--ly`); opcional canvas 2D con desplazamiento tipo "ripple" sencillo. (4) Cursor con etiqueta `data-cursor`. (5) Halos espectrales que rotan lentos (`conic-gradient` + `@keyframes`, desactivados en rm).

**Firma por página.** Home: el anillo mezcla fotos de Salud (día) y capturas de Zeiknawn (noche); al girar hacia la mitad nocturna, el fondo se oscurece y los halos pasan a rosa. Workout: planes en el tramo horizontal; "¿LISTO PARA EMPEZAR?" en contorno espectral (gradiente en el trazo mediante dos capas) con las letras orbitando levemente al mover el puntero. Nutrición: anillo de 10 recetas reales (fotos) que gira con el scroll; video del hero con máscara irregular. Fantasy: anillo de capturas del juego; el teléfono de noche en el centro del anillo como eje.

**Evita.** Fondos claros, tipografía serif en titulares (solo el contrapunto itálico), retículas visibles, tarjetas blancas.