# Capa Creativa — Post Krafter (Bienes Raíces)

> Biblioteca de composición para generar posts inmobiliarios en HTML/CSS que luego se
> renderizan a imagen (PNG). Este documento es el **cerebro**: define los movimientos de
> diseño pre-aprobados para que la creatividad sea **controlada, no aleatoria**, y siempre
> dentro del design system del cliente.
>
> Modelado sobre `web-design-med/references/section-library.md`, pero para posts, no sitios.
> **Alcance: solo bienes raíces.**

---

## 0. Regla de oro

El pipeline separa en capas y **nunca** mezcla:

1. **Píxeles reales** (fotos de la propiedad, logo) → entran como archivos, jamás se generan ni se recrean.
2. **Layout y marca** (estructura, color, tipografía, íconos, textos) → HTML/CSS con los tokens del cliente.
3. **Capa generativa opcional** (fondos con textura) → solo como fondo detrás del layout, controlado.

Todo color, fuente, radio y espaciado sale de `brand/tokens.css` del cliente. **Nunca hex sueltos en el HTML del post.**

---

## 1. Reglas "never" (anti-genérico)

- Nunca una sola fuente para todo el post (se lee "de sistema"). Emparejar **serif display + sans**.
- Nunca la foto cruda si el diseño pide elegancia: considerar overlay suave, duotono o degradado.
- Nunca meter todos los datos posibles. Creativo suele ser **menos**, no más.
- Nunca íconos emoji. Solo Tabler webfont (`ti ti-*`).
- Nunca óvalos para fotos (fuera de moda). Sí círculos, arcos, redondeados, rectos.
- Nunca centrar todo por default. Buscar asimetría y jerarquía.
- Nunca texto blanco sobre foto sin un scrim/overlay que garantice legibilidad.
- Nunca repetir el mismo esqueleto dos posts seguidos del mismo cliente.

---

## 2. Formatos (lienzos)

| Formato | Medida px | Uso |
|---|---|---|
| Feed vertical | 1080 × 1350 | Instagram/Facebook feed (default) |
| Cuadrado | 1080 × 1080 | Feed clásico, catálogos |
| Story / Reel | 1080 × 1920 | Stories, portadas de reel |

El mismo post se re-renderiza a los tres tamaños con CSS responsivo (ventaja sobre Canva/generativo).
Render: Edge headless `--force-device-scale-factor=2` → PNG @2x. Subir `--virtual-time-budget` (~25s) para que carguen webfonts (Tabler, serif).

---

## 3. Gramática de composición

Cada post = **1 esqueleto (A) + forma (B) + marco (C) + acento (D) + specs (E) + tratamiento de foto (F/G)**.
Piezas combinables tipo Lego. Abajo cada perilla.

### A · Esqueletos de foto

| Nombre | Fotos | Cuándo usarlo |
|---|---|---|
| `mosaico-4` | 4 en cuadrícula (2×2 o 1 grande + 3) | Mostrar variedad de espacios; propiedad estándar con buenas fotos de interiores |
| `hero-tira` | 1 grande arriba + 3 en fila abajo | Fachada protagonista + adelanto de interiores |
| `hero-lateral` | 1 grande + 3 pequeñas a un lado (izq/der) | Editorial con jerarquía fuerte; tipo "Property Features" |
| `dueto` | 2 fotos + más texto | Cuando hay más que contar que mostrar (copy, oferta) |
| `hero-solo` | 1 foto full-bleed | **Propiedad de lujo / fachada fina.** Puro drama + datos mínimos (ver §6) |

### B · Forma de foto (aplica al set)

- `recto` — esquinas cuadradas. Look arquitectónico, moderno, masculino.
- `redondeado` — 16:9 con esquinas suaves (radio `--r-lg`/`--r-xl`). **Default.**
- `circulo` — círculos. Para acentos (3 fotos de apoyo), no para la principal.
- `arco` — arco superior (`border-radius: 50% 50% 0 0 / 30% 30% 0 0` o clip-path). Muy "inmobiliaria premium".

### C · Marco del diseño (opcional)

- `ninguno` — default.
- `completo` — línea fina alrededor de todo el lienzo (margen interior + `border`).
- `lateral` — barra/marco en un solo lado (izq, der, arriba o abajo). Puede ser color sólido de marca.
- `curva` — corte curvo entre foto y zona de textos (clip-path / SVG wave).

### D · Acento editorial (el detalle que sube el nivel)

- **Serif itálica** en el titular (la capa que más falta — ver §7). Empareja con sans para datos.
- **Versalitas con tracking** — `EN VENTA`, `NUEVO`, `REF: OO2546`. Mayúsculas, `letter-spacing` alto, tamaño chico.
- **Regla fina** divisoria (líneas de `--line`).
- **Badge traslapado** — un badge que invade el borde de la foto (profundidad).

### E · Barra de specs (firma de bienes raíces)

Íconos Tabler: `ti-bed` (rec), `ti-bath` (baños), `ti-car` / `ti-car-garage` (cochera), `ti-ruler-2` (m²),
`ti-stairs` (plantas), `ti-pool` (alberca), `ti-tree` (jardín), `ti-elevator`, `ti-tools-kitchen-2` (cocina), `ti-sofa` (sala).

Variantes de estilo:
- `circular` — ícono en círculo slate, label debajo.
- `chip` — chip con borde redondeado, ícono acento + texto.
- `barra-solida` — todo en un bloque slate con divisores.
- `separado` — solo ícono + número con divisor fino (minimal).

Orientación: `horizontal` (default) o `vertical` (columna lateral, tipo panel "Property Features").

### F · Degradados y overlays

- `overlay-suave` — capa oscura de baja opacidad sobre la foto para legibilidad. **Sutil = elegante.**
- `scrim-degradado` — degradado de transparente→oscuro (o →color de marca) en el borde donde va el texto.
- `foto-a-barra` — la foto se desvanece hacia una barra sólida de marca donde viven specs/precio.
- `texto-sobre-foto` — sin panel aparte: se oscurece **un lado** de la foto con scrim degradado y el texto blanco va directo encima. Deja ver la casa completa. Muy elegante (ref. "PERFECT HOME"). Combina bien con `hero-solo` o `hero-lateral`.

Regla: opacidad baja, transición larga. Un overlay pesado se ve barato.

### G · Anillo/marco desfasado de acento

Un segundo contorno del color de acento montado **por detrás y corrido** de la foto (efecto sombra dura de color).
Da profundidad. Perilla de forma: `circulo`, `cuadrado` o `rectangulo`. CSS: `box-shadow` sólido offset o pseudo-elemento desplazado.

### H · Lenguaje de curvas (ondas, arcos, cortes)

Formas orgánicas: divisores de onda entre foto y texto, máscaras de arco, cortes curvos en paneles, bandas curvas de color. CSS: `clip-path`, `border-radius`, `path` de SVG.

Reglas para que se vean **premium y no infantiles**:

1. **Un solo motivo curvo por diseño** — no mezclar onda + arco + blob. Elegir uno y repetirlo (ritmo).
2. **Amplitud contenida** — curva sutil = premium; onda muy marcada = juguetona. Nodo (lujo) → sutil/media.
3. **Dirección con intención** — la curva guía el ojo hacia el foco (precio, fachada), no lo saca.
4. **Contraste con lo recto** — las curvas resaltan contra elementos geométricos. Todo curvo = mushy. Balancear orgánico + recto.
5. **Rima de formas** — que la curva rime con otro elemento (radio de fotos que ecoa la onda del divisor).
6. **Encuentro limpio (tangente)** — donde la curva toca un borde, que lo toque limpio.
7. **Evitar blobs muy orgánicos** en inmobiliaria premium — preferir arcos y ondas suaves.

---

## 4. Piezas inmobiliarias (opcionales, combinables)

- **Listón de estatus** — `EN VENTA` · `VENDIDO` · `PREVENTA` · `EN RENTA` · `OPORTUNIDAD`. Píldora o diagonal en esquina. Lo primero que busca el ojo.
- **Badge de precio** — variantes: precio directo · `Desde $…` · `$… a tratar` · `Precio a consultar`. Estilos: cajita blanca flotante · sello starburst · barra inferior.
- **Píldora de ubicación** — `ti-map-pin` + colonia, ciudad.
- **Tarjeta de asesor** — foto redonda + nombre + teléfono. Personaliza y da confianza.
- **Dato estrella** — un número gigante como protagonista ("461 m² de terreno"), no escondido en la barra.
- **Marca de agua** — logo semitransparente sobre la foto, para proteger la imagen al repostearse.

---

## 5. Cómo se compone una receta (fórmula)

```
receta = esqueleto(A) + forma(B) + marco(C) + acento(D) + specs(E) + tratamiento(F/G) + piezas(§4)
```

Mapeo de las referencias que analizamos, para calibrar:

| Referencia | Esqueleto | Forma | Tratamiento | Acento |
|---|---|---|---|---|
| "WHERE TRUST, MEETS HOME" | `hero-solo` | recto | overlay-suave | serif itálica, mucho aire |
| "MODERN HOUSE FOR SALE" | `hero-solo` | recto | scrim-degradado | badges blancos flotantes |
| "Discover Your Dream" | `hero-lateral` | redondeado | — | barra specs vertical + badge precio |
| "SITIOGENIAL – EN VENTA" | `hero-tira` | circulo + anillo desfasado (G) | — | listón estatus + starburst precio |

---

## 6. ★ Capa de criterio (la inteligencia que elige)

Antes de componer, **analizar la propiedad** (fotos + datos) y decidir el tratamiento.
Esto es lo que un diseñador humano hace y una plantilla de Canva NO puede.

Árbol de decisión:

1. **¿Precio alto (≈ arriba de $10M MXN) O fachada fina/arquitectónica?**
   → `hero-solo` + overlay/scrim suave + datos mínimos. Editorial de lujo. Menos es más.
2. **¿Propiedad estándar con buenas fotos de interiores?**
   → `mosaico-4` o `hero-tira` para mostrar variedad.
3. **¿Hay más que contar que mostrar (oferta, financiamiento, ubicación)?**
   → `dueto` + copy.
4. **¿Estatus especial (preventa, vendido, oportunidad)?**
   → agregar listón de estatus, prioridad visual alta.

Al analizar fotos, evaluar: calidad de la fachada, iluminación, si hay tomas de interiores decentes,
y elegir como foto principal la más impactante (normalmente la fachada o la mejor exterior).

### Encuadre inteligente (analizar el "aire" de la foto)

Antes de montar, **analizar dónde está el sujeto** (la casa) dentro de la foto y cuánto aire tiene:

- Fotos de fachada suelen traer **mucho cielo arriba** y la casa abajo. Si se encuadra al centro, la casa queda baja y la banda/onda **se la come**, dejando puro cielo.
- Solución: ajustar `object-position` en Y para **subir el sujeto** al marco visible (arriba de la banda). Regla práctica: si hay mucho cielo, `object-position: center 60–70%` (muestra la parte baja donde está la casa) en vez del default `center`.
- Verificar en el render: la fachada debe verse **completa** por encima de la onda/banda; el titular puede ir sobre el cielo/scrim superior, no sobre la casa.
- Aplica igual a interiores: centrar el foco del cuarto, no el techo vacío.

Esto es exactamente lo que un fotógrafo llama corregir el "aire" (espacio negativo mal repartido). El sistema debe hacerlo por foto, no asumir un encuadre fijo.

---

## 7. Tipografía

**Pareja elegida para Nodo:** `Playfair Display` (titulares, `--f-display`) + `Inter` (datos/UI, `--f-sans`).
Playfair = lujo clásico de alto contraste, la voz que el mercado inmobiliario reconoce. Fraunces queda de reserva para piezas editoriales especiales.

### Escala tipográfica — "variada con estilo"

Regla: **saltos grandes entre niveles** (no tres textos de tamaño parecido). El contraste de tamaños ES un recurso de diseño. Referencia de escala (feed 1080×1350, ajustar por formato):

| Nivel | Tamaño aprox. | Fuente | Uso |
|---|---|---|---|
| Micro-label | 13–16px, versalitas, tracking `0.12–0.18em` | Inter 600 | `EN VENTA`, `DISCOUNT`, `REF:` |
| Sub-label | 20–26px | Inter 600 / Playfair | segunda línea, subtítulo |
| Titular display | 48–72px | Playfair 600 (italic en palabra clave) | el gancho ("Descubre la casa de tus **sueños**") |
| Dato estrella / precio | 56–96px | Playfair 700 o Inter 800 | el número protagonista, normalmente el más grande |
| Cuerpo | 16–18px, `line-height 1.6` | Inter 400 | descripción |
| Specs | 14–17px | Inter 500/600 | barra de características |

Principio: si el texto más chico y el más grande se parecen, falta drama. Buscar contraste fuerte entre el micro-label y el dato estrella.

### Escala modular (por qué se ve elegante)

Los tamaños siguen una **razón matemática**, no se eligen al azar. Base 16px × razón fija:

- `1.25` (tercera mayor) — elegante, conservadora.
- `1.333` (cuarta justa) — con drama, editorial. **Default.**
- `1.618` (áureo) — máximo contraste, lujo.

Escala 1.333 desde 16: `16 → 21 → 28 → 38 → 50 → 67 → 89 px`. El precio/dato estrella puede romper la escala hacia arriba a propósito. El ojo percibe el ritmo aunque no sepa por qué.

### Emparejamiento (font pairing)

- Máximo **2 familias** (Playfair display + Inter). 3 solo en casos raros.
- Se emparejan **por contraste** (serif con carácter + sans neutra), nunca dos decorativas juntas.
- Una manda (display), otra sirve (datos). No compiten.

### Énfasis tipográfico — 5 dimensiones

1. **Itálica** — la palabra emocional/aspiracional. **Una sola por titular** ("*sueños*", "*Jacarandas*").
2. **Peso** — el más grueso, reservado al dato focal (precio).
3. **Caja + tracking** — MAYÚSCULAS espaciadas solo para micro-labels.
4. **Color** — ámbar en UNA cosa, nunca regado.
5. **Tamaño** — vía la escala modular.

**Regla de oro:** variar solo 1–2 dimensiones a la vez. Itálica + grande YA es suficiente; no sumarle además color + mayúsculas. Exceso de énfasis = cero énfasis.

---

## 8. Composición, balance y "aire"

Se llama **composición gráfica**. Los principios de la fotografía aplican al diseño. El "aire" (término de foto en México) = **espacio negativo / espacio en blanco**.

| Principio | Equivalente en foto | Regla para el post |
|---|---|---|
| Regla de los tercios | Tercios | Punto focal y bloques de texto sobre las líneas/intersecciones de la grid 3×3, no al centro muerto |
| Espacio negativo ("aire") | Aire arriba/abajo | 30–40% del lienzo respira. Nada pegado al borde. Titular y precio con room alrededor |
| Peso visual y balance | Balance/peso | Foto pesada de un lado ↔ texto + aire del otro (balance asimétrico, dinámico). El ámbar pesa mucho: contrapeso puntual, no regado |
| Punto focal único | El sujeto | Una cosa manda (fachada o precio); el resto la apoya |
| Flujo de lectura (patrón Z) | Recorrido del ojo | Entra arriba-izq, sale abajo-der. Logo arriba, precio/CTA abajo |
| Proximidad (Gestalt) | Agrupación | Agrupar lo relacionado (specs juntos, contacto junto); separar con aire |
| Alineación y márgenes | Encuadre | Todo alinea a retícula. Margen de seguridad ≥ 40px |

**Reglas checkables:**
- Margen de seguridad ≥ 40px (feed); ≥ 64px laterales en editorial. Ningún texto pegado al borde.
- 30–40% del lienzo con aire.
- Un solo punto focal dominante.
- Contrapeso: si la foto va a un lado, el texto + aire equilibran el otro.
- Story 1080×1920: dejar ~15% inferior libre de datos clave (tapa la UI de Instagram).
- Ámbar solo como acento/contrapeso, nunca como masa dominante.

---

## 9. Checklist de revisión (antes de entregar)

- ¿La foto principal es la más impactante de la propiedad?
- ¿Hay una pareja tipográfica (no solo sans)?
- ¿El tratamiento de foto corresponde al nivel de la propiedad (§6)?
- ¿Los datos (precio, specs, ubicación) son los reales del listing?
- ¿Colores, logo y radios salen de los tokens del cliente?
- ¿El post se siente diseñado, no ensamblado?
- ¿Se lee bien el texto sobre la foto (scrim/overlay suficiente)?
- ¿Íconos Tabler cargaron (no cuadros vacíos)?
