# Sistema visual · Creators Latam y Martín Velasco

**Versión 1 · septiembre de 2026.** La guía del sistema visual: color, modo oscuro, letra, retícula, interruptor, logo, íconos, teléfono, componentes, gráficos, fotografía, personaje y movimiento, cada regla con su motivo y sus valores. Los mismos valores están en `tokens.css` (web) y `tokens.json` (formato DTCG, un estándar que leen Style Dictionary, Tokens Studio y otras herramientas). Los contrastes son WCAG 2.x.

---

## 0. El sistema en doce líneas

1. **Un motivo para todo:** el botón del interruptor es un hueco sin luz propia. Por eso casi todo es blanco y gris, y el azul aparece solo en lo que hay que mirar ahora.
2. **Siete colores y un error de formulario.** Blanco, Papel, Línea, Apagado, Pizarra, Tinta y Encendido, más su tinte (Encendido suave). No hay colores de apoyo nuevos: los datos usan los tres estados del interruptor.
3. **Tres estados, en todo el sistema:** Apagado `#8A919C` (lo que espera), Hecho en tinta (lo que ya quedó) y Ahora en azul (lo que miras hoy, uno por pieza).
4. **Un solo elemento encendido por pieza fija**, y ≤ 5 % del área. Si hay botón, el botón es ese elemento. En la web: el botón y, como máximo, un elemento editorial por pantalla.
5. **Oscuro = la reja abajo.** Fondo tinta `#1D1D1F`, texto Papel. Solo «fuera de horario» (con una hora de noche escrita) o «escenario». Como máximo 1 de cada 5 posts. La pantalla del teléfono sigue clara.
6. **Helvetica Neue en dos pesos, 400 y 700**, como el wordmark. En la web, «CL Sans» (Helvetica Neue local o TeX Gyre Heros). Nunca Inter.
7. **Una escala:** 12 · 15 · 17 · 19 · 24 · 30 · 42 · 58 · 80 · 112 · 160 px, con un papel fijo para cada paso en cada formato. En A4, su equivalente en pt.
8. **El tracking se elige por el tamaño al que se ve la letra**, no por el número del archivo: un 80 px de un post se ve como 27 px en el celular y se espacia como tal.
9. **Todo lo que abre algo cuelga el título de la línea del 30 %**, en cualquier formato fijo (la web no). Márgenes de 80 px en lámina, post e historia.
10. **El interruptor:** vertical, 1 : 3,076, botón calado, tres configuraciones (suelto, hilera y par) y nunca para personas.
11. **Una sola marca nuestra por pieza, abajo a la izquierda**, en tinta o Papel (Apagado en los pies), nunca en azul. Arriba a la derecha queda para el anfitrión o el cliente.
12. **Nada se mueve dos veces.** La perilla sube en 15 fotogramas con un clic; el azul llega al final; nada queda en bucle.

---

## 1. Color

### 1.1 La paleta

| Nombre | Hex | RGB | Impreso | Qué es en la idea | Rol |
|---|---|---|---|---|---|
| **Blanco** | `#FFFFFF` | 255 255 255 | papel | Un cuarto con la luz prendida: parejo, sin nada que compita. | Fondo por defecto. Los datos y los interruptores van siempre sobre Blanco. |
| **Papel** | `#F6F7F8` | 246 247 248 | K 4 (se omite) | La superficie donde se apoya lo que se ve. | Tarjetas, bandas, pantalla del teléfono, avatar y favicon. En oscuro, el texto principal. |
| **Línea** | `#E5E7EB` | 229 231 235 | K 12 | El borde que separa sin adornar. | Único separador, 1 px (2 px en el lienzo de 1080, 0,5 pt en A4). En gráficos, «sin dato». Nunca texto. |
| **Apagado** | `#8A919C` | 138 145 156 | K 45 | Literalmente el color del interruptor abajo. | Lo que espera y el contexto: interruptor apagado, series de contexto, logo del pie, borde de campos. Como texto, solo desde 24 px (o 19 px Bold) y sobre Blanco. |
| **Pizarra** | `#5F6672` | 95 102 114 | K 70 | El rótulo de la llave. | Eyebrows, pies, bajadas y texto secundario a cualquier tamaño. Nunca sobre oscuro. |
| **Tinta** | `#1D1D1F` | 29 29 31 | K 100 | Lo que ya está hecho. De noche, el fondo. | Texto principal, logo, estado «hecho», la persona que aprueba. |
| **Encendido** | `#007AFF` | 0 122 255 | no se imprime | Lo único que hay que mirar ahora. | Un elemento por pieza: el botón, el segundo tiempo del titular principal, la barra o la cifra que nombra el título, el día de hoy, el interruptor «ahora». |
| **Encendido suave** | `#F2F8FF` | 242 248 255 | — | El fondo del único elemento encendido. | Burbuja del seguimiento, chip activo, tarjeta o nodo encendido. Nunca decorativo. |
| Error | `#D70015` | 215 0 21 | — | — | Solo errores de formulario en la web. No existe en piezas. |

**Por qué estos y no más.** Martín dijo que los tres colores base estaban bien y que se admiten complementarios solo de apoyo. La idea tiene tres estados (apagado, hecho, ahora); un cuarto tono no tendría trabajo. Los «complementarios de apoyo» son, entonces, los neutros con nombre (Papel, Línea, Apagado, Pizarra) y el Encendido suave: cada uno tiene un trabajo concreto y ninguno es adorno. Si algún día hace falta otro color, tiene que entrar con un trabajo que ningún neutro pueda hacer y pasar por este documento.

### 1.2 Proporción

| Blanco + Papel | Tinta + grises | Encendido |
|---|---|---|
| **≈ 80 %** del área | **≈ 15 %** | **≤ 5 %**, en un solo elemento |

La proporción se revisa con la pieza reducida a la mitad: si el azul se ve en dos lugares, sobra uno. El pañuelo azul del personaje no cuenta: es ropa, no un estado.

**Cuánto azul, según la pieza**:

| Pieza | Encendido | Si hay botón |
|---|---|---|
| Fija (post, anuncio, lámina, portada, historia, miniatura) | **Un elemento** | El botón es ese elemento: el titular va en tinta y su segundo tiempo en Apagado. |
| Web | Por pantalla, **el botón** (que es interfaz) **y como máximo un elemento editorial** | — |
| Nivel 0 (precio, propuesta, cotización, contrato) | **Ninguno** | Donde el dueño decide, el interruptor es suyo. |
| Anuncio de Meta o Google | Un elemento; **no se dibuja botón** | Lo pone la plataforma. |
| A4 impreso | Ninguno: lo encendido va en tinta | El azul se pierde en una impresora en blanco y negro. |

### 1.3 Qué es encendido y qué es apagado

| Estado | Qué significa | Claro | Oscuro | Dónde se ve |
|---|---|---|---|---|
| **Apagado** | Lo que espera, lo pendiente, el contexto | `#8A919C` | `#8A919C` (el mismo) | Interruptor con el botón abajo, días que faltan, serie de contexto, «Día 1» |
| **Hecho** | Lo que ya quedó | Tinta `#1D1D1F` | Papel `#F6F7F8` | Interruptor arriba en tinta, días pasados, segunda serie, el total |
| **Ahora** | Lo que miras hoy | `#007AFF` | `#0A84FF` (relleno) · `#409CFF` (texto) | El día de hoy, la barra que nombra el título, el botón. **Uno por pieza** |
| Sin dato | Nada | Línea `#E5E7EB` | `#3A3A3C` | Riel, retícula, filetes. Nunca una serie |

**Motivo.** En un tablero no miras las llaves que ya están arriba: miras la que acabas de subir. Si todo lo encendido fuera azul, el día 13 del piloto tendría 13 azules y el azul dejaría de significar algo. Por eso «encendido» tiene dos colores: tinta para lo hecho y azul para lo de ahora. El logo va siempre en un solo color, tinta o Papel, y **nunca en azul**: es la firma, no un estado.

### 1.4 Colores de apoyo para datos y estados

**Datos (gráficos, reportes, hileras).** Los tres estados de §1.3 y nada más. Si un gráfico pide una cuarta serie, se parte en dos gráficos chicos. Rojo, verde y ámbar no entran nunca, tampoco en el reporte: un vendedor en rojo es un vendedor acusado, y el rojo con el verde se confunden con deuteranopía.

**Estados de interfaz (web y formularios).**

| Estado | Cómo se ve | Contraste |
|---|---|---|
| Normal | Botón `#007AFF`, texto blanco Bold desde 19 px | 4,02:1 (texto grande) |
| Al pasar el mouse | El mismo botón con `filter: brightness(.92)` en 150 ms. No es un color nuevo | 4,65:1 |
| Foco del teclado | Anillo de 2 px `#007AFF` a 2 px del control | 4,02:1 contra blanco |
| Activo (elegido) | Fondo Encendido suave, borde `#007AFF` de 1,5 px, texto en tinta | Tinta 15,75:1 · borde 3,76:1 |
| Deshabilitado | Fondo Línea, texto Apagado | 2,57:1 (los controles deshabilitados están exentos) |
| Hecho o incluido | Check de Lucide en tinta. **No hay verde de éxito** | 16,83:1 |
| Error de formulario | Texto y borde `#D70015` con una frase que dice qué corregir | 5,38:1 |
| Advertencia | **No existe.** Lo que en otras marcas es una alerta, aquí es un número con su hora: «7 sin responder al cierre» | — |
| Campo de formulario | Borde 1 px Apagado, radio 8 | 3,18:1 (pasa el 3:1 de WCAG 1.4.11) |

### 1.5 Contraste medido (WCAG 2.x)

**Tema claro** (umbral AA: 4,5:1 para texto normal; 3:1 para texto grande, desde 24 px o 18,66 px Bold, y para elementos gráficos).

| Texto \ fondo | Blanco | Papel | Encendido suave | Lectura |
|---|---|---|---|---|
| Tinta | 16,83 | 15,69 | 15,75 | Todo |
| Pizarra | 5,78 | 5,39 | 5,41 | Cualquier tamaño |
| Apagado | **3,18** | **2,96** | 2,97 | Texto grande **solo sobre Blanco**; interruptor y ejes |
| Encendido | **4,02** | 3,75 | 3,76 | Titulares, cifras, relleno del botón; nunca texto chico |
| Error | 5,38 | 5,02 | 5,04 | Solo formularios |
| Línea | 1,24 | 1,15 | 1,16 | Solo separadores |

**Tema oscuro.**

| Texto \ fondo | Tinta `#1D1D1F` | Tarjeta `#2C2C2E` | Escenario `#000` |
|---|---|---|---|
| Papel `#F6F7F8` | 15,69 | 12,99 | 19,58 |
| `#AEAEB2` | 7,61 | 6,30 | 9,50 |
| Apagado `#8A919C` | 5,30 | 4,39 | 6,61 |
| `#409CFF` (texto azul) | 5,94 | 4,92 | 7,42 |
| `#0A84FF` (relleno azul) | 4,61 | 3,82 | 5,76 |
| Pizarra `#5F6672` | **2,91** | 2,41 | 3,63 |
| Borde `#3A3A3C` | 1,48 | 1,23 | 1,85 |

**Pares que deciden componentes.**

| Par | Contraste | Consecuencia |
|---|---|---|
| Blanco sobre `#007AFF` | 4,02 | Texto del botón en Bold desde 19 px |
| Blanco sobre `#0A84FF` | 3,65 | Igual en oscuro |
| Tinta sobre `#F2F8FF` | 15,75 | La burbuja encendida lleva texto en tinta: se lee a cualquier tamaño |
| Borde `#007AFF` sobre `#F2F8FF` | 3,76 | Pasa el 3:1 de elemento gráfico |
| Papel sobre `#1A2D43` · borde `#0A84FF` sobre `#1A2D43` | 13,05 · 3,84 | La burbuja encendida en oscuro funciona igual |
| Hueco blanco en cápsula Apagado · hueco Papel en cápsula Apagado | 3,18 · **2,96** | El interruptor va sobre Blanco, nunca sobre Papel |
| Apagado junto a azul | **1,26** | Se distinguen por tono, no por luz: nunca se tocan (2 px de aire; 4 en el lienzo) |
| Tinta junto a azul · tinta junto a Apagado | 4,19 · 5,30 | Se distinguen siempre, también impresos |
| Pantalla Papel contra fondo tinta · contra marco `#3A3A3C` | 15,69 · 10,58 | En la pieza oscura, el teléfono es lo más luminoso: ahí se mira |
| Tinta contra el negro de Instagram · contra la tarjeta del LinkedIn oscuro `#1B1F23` | 1,25 · 1,02 | La pieza oscura se separa en Instagram; en LinkedIn se funde, así que lleva un titular claro grande |

**Qué texto va en qué tamaño (claro).** Tinta y Pizarra, a cualquier tamaño. Apagado y Encendido, solo desde 24 px Regular o 19 px Bold, y Apagado solo sobre Blanco. Los enlaces dentro de un párrafo van en tinta con subrayado de 1 px, no en azul.

**Qué texto va en qué tamaño (oscuro).** Papel, `#AEAEB2` y `#409CFF`, a cualquier tamaño y sobre cualquier fondo oscuro. Apagado pasa a cualquier tamaño solo sobre la tinta (5,30); sobre la tarjeta `#2C2C2E` da 4,39 y sobre `#3A3A3C`, 3,57: ahí, igual que en claro, solo desde 24 px o 19 px Bold.

### 1.6 Lo que no entra

El rosado y cualquier degradado de la marca vieja · un segundo azul (`#0066D6`, `#0066CC`) · tintes de ilustración (`#99CAFF`, `#D9EBFF`, `#DBEAFE`) · grises de datos por debajo de Apagado (`#D1D5DB` da 1,47:1) · rojo, verde o ámbar en piezas · el verde de WhatsApp fuera de una captura real · sombras · luz cálida o amarilla · colores de clientes o de TamiBot y DOXS.AI.

---

## 2. Tema oscuro

### 2.1 Qué significa

**La reja abajo.** El oscuro no es un estilo: es una hora. Significa **«fuera de horario»** (el local cerró y los clientes siguen escribiendo) o **«escenario»** (una charla en pantalla LED o en sala a media luz), y nada más. Toda pieza oscura lleva una hora de noche escrita («MARTES · 10:47 P. M.») o es de escenario. Un oscuro puesto para «verse premium» es justo el gesto que Martín critica.

### 2.2 Tokens exactos

| Rol | Claro | Oscuro | Contraste en oscuro |
|---|---|---|---|
| Fondo | Blanco `#FFFFFF` | **Tinta `#1D1D1F`** (de noche, la tinta es el papel) | — |
| Fondo de escenario (solo LED) | — | `#000000` | — |
| Superficie (tarjeta) | Papel `#F6F7F8` | `#2C2C2E` | 1,21 contra el fondo |
| Elevado (burbuja o chip dentro de tarjeta) | Blanco | `#3A3A3C`, sin borde | — |
| Texto | Tinta | **Papel `#F6F7F8`** | 15,69 |
| Texto secundario, eyebrows | Pizarra | **`#AEAEB2`** | 7,61 |
| Texto terciario | Apagado | Apagado (el mismo) | 5,30 |
| Borde | Línea | `#3A3A3C` | 1,48 |
| Relleno encendido | `#007AFF` | **`#0A84FF`** | 4,61 |
| Texto encendido | `#007AFF` | **`#409CFF`** | 5,94 |
| Fondo encendido | `#F2F8FF` | **`#1A2D43`** (`#0A84FF` al 16 % sobre la tinta) | — |
| Texto del botón | Blanco | Blanco, Bold desde 19 px | 3,65 |
| Interruptor apagado · hecho · ahora | Apagado · Tinta · `#007AFF` | Apagado · Papel · `#0A84FF` | 5,30 · 15,69 · 4,61 |
| Logo · logo del pie | Tinta · Apagado | Papel · Apagado | 15,69 · 5,30 |
| Marco del teléfono | Tinta | `#3A3A3C` | — |
| Pantalla del teléfono | Papel | **Papel (sigue clara)** | — |

En `tokens.css`, el oscuro es `[data-theme="dark"]` y el escenario, `[data-theme="dark"][data-escenario]`. La pantalla del teléfono vuelve a claro con `data-theme="light"` dentro de la pieza oscura.

### 2.3 Cuándo sí y cuándo no

| Medio | Por defecto | Oscuro solo cuando | Tope |
|---|---|---|---|
| Feed de Instagram | Claro | Pieza «fuera de horario» o charla | 1 de cada 5 posts; nunca dos en la misma fila de tres |
| Historias | Claro | Cuenta regresiva o en vivo de una charla; historia de noche sobre fuera de horario | 1 de cada 3 en días de evento |
| Anuncios de Meta | Claro (la versión principal) | Una variante de prueba con el ángulo «fuera de horario» | 1 variante por prueba |
| LinkedIn de Martín | Claro | Resumen de charla con foto de escenario | 1 de cada 5 |
| Miniaturas de YouTube | Claro | Charla grabada, con el título en Papel ocupando al menos un tercio del ancho | — |
| Charlas | Claro con proyector y sala iluminada | Pantalla LED o sala a media luz: el deck entero en oscuro | **Un deck es claro u oscuro; no mezcla** |
| Video | Claro | Un capítulo «de noche» dentro del video | 2 cambios de tema por video |
| Landing | **Siempre clara, no sigue el modo oscuro del teléfono** | Una sola banda «fuera de horario» | 1 banda por página |
| Precios, propuestas, informes, contratos, correos, decks comerciales, imagen OG, impresos | Claro | **Nunca** (salvo el reverso de un roll-up de escenario) | 0 % |

Antes de cada charla se pregunta al organizador: ¿pantalla LED o proyector? ¿Cómo estará la luz? ¿Se va a grabar? Con LED, media luz o pantalla detrás de Martín en la grabación: oscuro. Si no hay respuesta, se llevan los dos (con los tokens es cambiar un atributo).

### 2.4 El teléfono en oscuro

- **Solo en piezas «fuera de horario»**; en el escenario manda la frase.
- **La pantalla sigue clara:** Papel, burbujas blancas con borde Línea, la misma interfaz que de día. El local cerró, pero el cliente sigue escribiendo; la noche la cuentan el fondo y la hora («10:47» en la barra de estado).
- Marco `#3A3A3C`, sin borde extra, sin sombra ni resplandor.
- **Nunca un seguimiento saliendo de noche:** el seguimiento sale en horario de atención. Lo que se ve de noche son chats que llegan y esperan en orden, cada uno con su vendedor.
- Las capturas de Kommo van claras dentro de un marco de radio 12 con borde `#3A3A3C`. Nunca el tema oscuro de Kommo (azul marino, un color que el sistema no tiene) ni una captura invertida con filtros.

### 2.5 Letra, logo, foto, gráficos y personaje en oscuro

- **Letra:** los mismos tamaños y pesos. El claro sobre oscuro engorda, así que los titulares suman **+0,005 em** al tracking y el texto de 19 px visibles o menos suma **+0,01 em** (tokens `--trk-ajuste-titular` y `--trk-ajuste-texto`). El cuerpo siempre en Regular.
- **Logo:** Papel; en el pie, Apagado. Nunca sobre azul (los huecos se llenan de azul), nunca con resplandor.
- **Foto:** la de escenario es el material natural del oscuro. La foto B/N de Martín con fondo claro no va suelta: va en una tarjeta `#2C2C2E` con borde `#3A3A3C`.
- **Gráficos:** resto Apagado, hecho Papel, ahora `#0A84FF`, etiquetas `#AEAEB2`, retícula `#3A3A3C`; como máximo 5 barras y 2 series. Los gráficos completos van en claro.
- **Personaje:** sobre la tinta el saco azul marino y el pelo se funden (1,1 a 1,6:1, medido en 05 y 07 sobre `#111113`, un fondo casi igual). **Las piezas oscuras van sin personaje** hasta que existan las poses con luz de contorno; cuando existan, se prueban sobre `#1D1D1F`, directo sobre el fondo y nunca sobre una tarjeta gris.

### 2.6 Paso de claro a oscuro en video

De claro a oscuro, **fundido lineal de 12 fotogramas**; el texto salta de tinta a Papel en el fotograma 6, a mitad del cambio, para que nunca haya texto gris sobre gris. De oscuro a claro, **corte seco** en un cambio de frase: un fundido hacia el blanco se siente como un fogonazo en un teléfono de noche.

---

## 3. Tipografía

### 3.1 Qué letra va en cada lugar

| Canal | Letra | Por qué |
|---|---|---|
| PNG, JPG, PDF y video exportados desde la Mac | **Helvetica Neue** | La licencia de macOS permite mostrarla e incrustarla en PDF (`fsType` 0). Es la letra de la señalética y del libro de caja: dice dónde está cada cosa sin opinar. |
| Web (landing, CRM, correo HTML) | **«CL Sans»**: `local("Helvetica Neue")` y, si no está, TeX Gyre Heros autoalojada en WOFF2 (licencia GUST, US$ 0), solo 400 y 700; después Arial (en Android, que no la trae, sale Roboto: por eso los WOFF2 no son opcionales) | Medida: TeX Gyre Heros mide entre −1,2 % y +0,1 % respecto de Helvetica Neue y corta las líneas en las mismas palabras. En un Mac no se descarga nada. |
| El .pptx que exige un organizador | Arial | Solo a pedido. Nunca es la fuente de trabajo. |
| **Nunca** | Inter, Roboto como elección, SF Pro, Light, Thin, Medium, itálicas y condensadas | Inter mide 2,6-5,1 % más, corta distinto y es la letra que hoy delata el diseño hecho por IA. |

### 3.2 Dos pesos

| Peso | Qué dice | Para qué | Nunca |
|---|---|---|---|
| **Bold 700** | Quién y cuánto | Titulares, cifras, eyebrows, botones, el nombre del vendedor en el chip, una frase de énfasis en el cuerpo | Párrafos enteros |
| **Regular 400** | La conversación | Cuerpo, bajadas, pies, fuentes, texto de chips y burbujas | — |

**Motivo.** El wordmark ya estaba hecho así: «Creators» en Bold y «Latam» en Regular. Dos pesos, dos estados. Además, el Medium no existe en tres de las cinco letras que ven nuestros clientes: con tres pesos la misma pieza se vería distinta según el equipo.

### 3.3 Una escala, un papel por paso

**12 · 15 · 17 · 19 · 24 · 30 · 42 · 58 · 80 · 112 · 160 px.** Sube de a ×1,25 de 12 a 30 (12 · 15 · 19 · 24 · 30), con el 17 intercalado para el cuerpo de la web, y de a ×1,4 desde 30 (redondeado: 42 · 58 · 80 · 112 · 160), y conserva los valores que ya usan los decks (12, 15, 19, 42, 58). **Motivo:** una luz pareja para todos los formatos. Los tamaños grandes del lienzo de 1080 no son exageración: un post se ve a 360 dp de ancho, así que 42 px del lienzo son 14 dp en el celular y 30 px son 10 dp, el mínimo que se lee.

### 3.4 Escala por formato

R = Regular, B = Bold. Todos los valores salen de la escala; en A4, de su equivalente en pt (ver nota).

| Papel | Lámina deck 1280 × 720 | Lámina charla 1280 × 720 | Post, carrusel, anuncio 1080 × 1350 | Historia, reel 1080 × 1920 | Banner LinkedIn Martín 1584 × 396 | Banner página 1512 × 256 | Miniatura YouTube 1280 × 720 | OG 1200 × 630 | Web escritorio | Web celular | A4 (pt) |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Pie, fuente, legal | 12 R | 15 R | 30 R | 30 R | — | — | — | 19 R | 12 R | 12 R | 7 R |
| Eyebrow | **15 B** | 19 B | 30 B | 30 B | — | — | 30 B | 19 B | 12 B | 12 B | 7 B |
| Texto chico (chip, tabla, eje) | 12 R | 19 R | 30 R | 30 R | — | — | — | — | 15 R | 15 R | 9 R |
| Cuerpo | 15 R | 24 R | 42 R | 42 R | — | — | — | — | 17 R | 17 R | 10 R |
| Bajada (hasta 2 líneas) | 19 R | 24 R | 58 R | 58 R | 24 R | 24 R | — | 30 R | 24 R | 19 R | 12 R |
| Título de tarjeta | 19 B | 30 B | 42 B | 42 B | — | — | — | — | 24 B | 19 B | 12 B |
| Título | 42 B | 58 B | 80 B | 80 B | 42 B | 42 B | 80 B | 80 B (58 si no entra) | 58 B | 30 B | 20 B |
| Portada, titular corto (≤ 4 palabras) | 58 B | 80 B | 112 B | 112 B | — | — | 112 B (≤ 10 caracteres por línea) | — | 80 B (el H1) | 42 B | 36 B |
| Cifra protagonista | 112 B (58 B en fila de 3-4) | 160 B | 160 B | 160 B | — | — | — | — | 58 B (precio) | 42 B | 48 B (28 B en tarjeta; 14 B en tabla) |
| Botón | 19 B, alto 48 | — | 42 B, alto 96 | 42 B, alto 96 | — | — | — | — | 19 B, alto 52 | 19 B, alto 52 | — |

**Notas que deciden.**
- **Lámina de deck frente a lámina de charla.** El deck se lee en pantalla o en PDF; la charla se proyecta. En la charla, todo lo que la sala tiene que leer va desde 24 px (36 px en 1920 × 1080, el mínimo para proyección) y nada baja de 15 px.
- **Bajada del lienzo en 58 R, hasta dos líneas** (≈ 35 caracteres por línea en 920 px). Si pasa de dos líneas, no es bajada: es cuerpo, en 42 R.
- **Miniatura de YouTube en 80 B por defecto, hasta 15 caracteres por línea.** Medido con HarfBuzz y el tracking de §3.5 (÷ 3): a 112 px, «Dónde se pierde» mide 842 px y no entra en los 640 de la zona de texto; a 80 px, «Dónde se pierde» mide 607 px y entra, pero «Asigna cada chat» (16 caracteres) mide 641 px y ya no. 112 B solo si cada línea tiene 10 caracteres o menos. Cada línea se mide antes de exportar.
- **Banner de Martín en 42 B y dos líneas**, porque su titular es el descriptor en primera persona: «Ordeno las ventas por WhatsApp / de equipos comerciales.» mide 659 y 488 px (tracking 0: 42 ÷ 3 = 14 px visibles) en una zona de 804. En 58 px, la primera línea mide 893 y no entra.
- **A4 en pt: 7 · 9 · 10 · 12 · 14 · 20 · 28 · 36 · 48.** Cada tamaño ocupa el papel de un paso de la escala de pantalla. El ancla es el cuerpo: 10 pt leídos a 35 cm ocupan 0,58° de la vista, lo mismo que 17 px en un celular a 30 cm (0,59°, calculado). Por debajo de 7 pt no se imprime nada.

### 3.5 Tracking e interlineado

**Tracking: por el tamaño visible.** La letra se espacia según el tamaño al que la ve la persona, no según el número del archivo. En la web y la lámina, el tamaño es tal cual. En las piezas de redes (lienzo de 1080, miniatura de YouTube, OG y banners), que se ven a un tercio o menos, se divide entre 3. En A4 se multiplica el pt por 1,7 (la equivalencia del cuerpo de §3.4). Si el tamaño visible cae entre dos pasos, se usa el menor (un 80 px de post se ve de 26,7 px y toma el −0,015 del 24).

| Tamaño visible | ≤ 17 | 19 | 24 | 30 | 42 | 58 | 80 | 112 | 160 | Eyebrow |
|---|---|---|---|---|---|---|---|---|---|---|
| Tracking | 0 | −0,01 em | −0,015 em | −0,02 em | −0,028 em | −0,035 em | −0,04 em | −0,045 em | −0,05 em | **+0,10 em** |

Aplicado (calculado con esta regla):

| Papel | Lámina deck | Lámina charla | Post e historia (÷ 3) | Web escritorio | Web celular | A4 (× 1,7) |
|---|---|---|---|---|---|---|
| Cuerpo | 15 → 0 | 24 → −0,015 | 42 → 0 | 17 → 0 | 17 → 0 | 10 → 0 |
| Bajada | 19 → −0,01 | 24 → −0,015 | 58 → −0,01 | 24 → −0,015 | 19 → −0,01 | 12 → −0,01 |
| Título | 42 → −0,028 | 58 → −0,035 | 80 → **−0,015** | 58 → −0,035 | 30 → −0,02 | 20 → −0,02 |
| Portada | 58 → −0,035 | 80 → −0,04 | 112 → −0,02 | 80 → −0,04 | 42 → −0,028 | 36 → −0,035 |
| Cifra | 112 → −0,045 | 160 → −0,05 | 160 → −0,028 | 58 → −0,035 | 42 → −0,028 | 48 → −0,04 |

**Por qué.** Helvetica Neue no tiene tamaños ópticos: su espaciado está pensado para texto y se abre en los tamaños grandes. Un titular de 80 px en un post se ve de 27 px en el celular; con −0,04 em las letras se pegan en la pantalla donde de verdad se lee.

**Interlineado: por papel.**

| Papel | Interlineado |
|---|---|
| Cifra o titular de una sola línea | 1,0 |
| Titular de 58 px o más, en dos o más líneas | **1,03**, el piso: en Bold, una minúscula con tilde más un descendente suman 1,002 em (08; «ú» 0,785 + «ç» 0,217). **Excepción medida:** una mayúscula con tilde (Á É Í Ó Ú) llega a 0,955 em y, debajo de un descendente, suma 1,17 em. Si una línea empieza con «Él», «Éxito», «Área», «Ángela»…, se corta distinto o ese titular sube a 1,18 |
| Título de 42 px | 1,08 |
| Título de 30 px | 1,15 |
| Título de 19 y 24 px | 1,25 |
| Eyebrow | 1,2 |
| Cuerpo y bajada de piezas (lienzo, historia, lámina), textos de hasta 3 líneas | 1,35 |
| Bajada de la web | 1,4 |
| Texto corrido en pantalla | 1,5 |
| A4 | Sobre la línea base de 5 mm: cuerpo 10/14,17 · tabla 9/12 (filas de 10 mm) · bajada 12/17 · título 20/24 · portada 36/38 |

**Largo de línea:** cuerpo hasta 32 em (≈ 70 caracteres); bajada hasta 40 em. Titulares con `text-wrap: balance`; párrafos con `text-wrap: pretty`, sin guiones de corte.

### 3.6 Eyebrows (antesalas)

| Regla | Valor | Motivo |
|---|---|---|
| Forma | **MAYÚSCULAS con tilde, Bold, +0,10 em** | Es el rótulo de la llave: dice qué es y cuándo antes de mostrar el estado. |
| Color | **Pizarra** en claro, **`#AEAEB2`** en oscuro. Nunca Apagado, nunca azul | Apagado a 12 px da 3,18:1 y no se lee; un eyebrow azul gasta el único acento. |
| Largo | Hasta **4 palabras**, más un número o una fecha separados por « · » | «SEGUIMIENTO · DÍA 9» · «PROPUESTA · CLÍNICA DENTAL NORTE» (con 3 palabras no entraban los nombres de clientes). |
| La fecha | En portadas, la fecha de publicación va **abajo a la derecha**, no en el eyebrow. En escenas, **la hora de la escena sí va en el eyebrow**: «MARTES · 10:47 P. M.» | La fecha de una portada es un dato de archivo; la hora de una escena es el contenido. |
| Tamaño | Lámina 15 · charla 19 · lienzo 30 · web 12 · OG 19 · A4 7 pt | Uno por formato, igual en portada e interiores. |
| Nunca | Emojis, íconos, minúscula inicial, dos eyebrows en la misma pieza | — |
| En HTML | Se escribe en minúsculas con tilde y se usa `text-transform: uppercase` | La tilde se conserva y el texto se puede copiar bien. |

### 3.7 Titular en dos tiempos y puntuación

- **Dos tiempos, cada uno con su punto y con 6 palabras como máximo:** primero lo que el dueño ya sabe (tinta), después lo que ahora ve. Son los dos interruptores del símbolo en palabras.
- **El segundo tiempo va en azul solo en el titular principal** (portada, inicio de la landing, cierre) **y solo si la pieza no tiene otro elemento encendido** (botón, burbuja, barra, interruptor «ahora»). En la web el botón no cuenta, porque es interfaz (§1.2): el inicio de la landing lleva el segundo tiempo en azul y el botón, y ese segundo tiempo es el único elemento editorial encendido de la pantalla. Si no, va en **Apagado**; si el fondo no es Blanco o el tamaño es menor de 24 px, en Pizarra. En oscuro, azul `#409CFF` o Apagado.
- **En nivel 0** (propuesta, precio, contrato), el segundo tiempo va en Apagado: sin azul.
- **Punto final en todo titular que sea una oración**, sea una o sean dos. **Sin punto:** botones, eyebrows, etiquetas, nombres de sección que no son oración («Preguntas frecuentes», «Qué encendemos en tus chats») y preguntas, que cierran con «?». El punto es parte de la voz: afirmamos sin gritar.
- Mayúscula solo al inicio: «Pedir piloto gratis», no «Pedir Piloto Gratis». Nunca titulares en mayúsculas sostenidas.

### 3.8 Números y caracteres

- **Espacio duro** (U+00A0, ` `) entre la cifra y su unidad o símbolo: «10 %», «US$ 45», «S/ 120», «9:00 a. m.», «12 500».
- **Miles** con espacio desde cinco cifras («12 500»); con cuatro, junto («1500»). Nunca «42,000». Hora: «7:05 p. m.»; en ejes de gráficos, 24 h («18:00»).
- **Cifras:** Helvetica Neue ya las trae tabulares (miden 556/1000 en todos los pesos), así que las tablas y la columna de la hora se alinean solas; en la web igual se declara `font-variant-numeric: tabular-nums`. En cifras protagonistas de 58 px o más, `proportional-nums`, para que el «1» no deje un hueco.
- **Flechas y checks, siempre en SVG.** Helvetica Neue no tiene «→» ni «✓» en ningún peso (comprobado otra vez el 29-sep con fontTools): tipeados, Chrome los dibuja en Arial y mezcla letras en el PDF. Sí tiene «×», «−», «·», «« »», «¿», «¡» y «…».

---

## 4. Retícula y espaciado

### 4.1 Sistema de 8

Toda caja (margen, relleno, separación, alto de botón) mide un múltiplo de 8, con 4 y 12 como medios pasos: **4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 80 · 96 · 128 · 160**. Tres altos de control son múltiplos de 4 y no de 8, y están fijados así: chip 28, mínimo tocable 44 y botón web 52. El texto se apoya en su interlineado, no en la retícula. Relaciones fijas en pantalla y lámina: dentro de una tarjeta, 24; entre tarjetas, 16 (lámina) o 24 (web); del título al contenido, 32-48. En el lienzo de 1080: relleno de tarjeta 48, entre tarjetas 32, entre bloques 64-80.

### 4.2 La línea del 30 %

**Toda pieza que abre algo cuelga el borde superior de su título de la línea del 30 % del alto**, redondeada a múltiplo de 8: portada de deck, charla e informe, propuesta A4, portada de carrusel, post suelto, anuncio, historia, reel, miniatura, newsletter y banners. **Las páginas de adentro** (láminas interiores, láminas 2 en adelante del carrusel, páginas A4 interiores) ponen el título arriba, debajo del eyebrow.

**Motivo.** Cinco de las seis portadas propias ya ponían el título entre el 27 % y el 36 % del alto; faltaba fijarlo. Una línea fija es lo que hacían el Unigrid de Vignelli y la retícula de Marber para Penguin: con eso, una miniatura, una historia y una propuesta impresa se reconocen como familia aunque midan distinto. El 30 % cae dentro de todas las zonas seguras.

### 4.3 Cuatro esquinas, siempre las mismas

| Posición | Responde | Qué va |
|---|---|---|
| Arriba a la izquierda | ¿Qué es? | El eyebrow |
| Arriba a la derecha | ¿Con quién? | Logo del anfitrión, del cliente o del aliado, o «N.º 07». **Nunca nuestro logo** |
| Línea del 30 % | ¿Qué te llevas? | El título en dos tiempos y, debajo, la bajada |
| Un tercio o la mitad | ¿Cómo se ve? | **Una sola imagen:** foto B/N, teléfono, cifra o personaje |
| Abajo a la izquierda | ¿Quién firma? | Nuestro logo, o L1/L2 en piezas de Martín |
| Abajo a la derecha | ¿Cuándo o dónde? | Mes y año en portadas; «03 / 14» en láminas; la hilera de paginación en carruseles (la lámina con personaje va sin ella, §13.1); nada en YouTube (ahí va la duración) |

### 4.4 Retícula por formato

| Formato | Márgenes | Columnas | Zona segura o útil | Línea del título (portada) | Logo |
|---|---|---|---|---|---|
| **Lámina 1280 × 720** (PDF 960 × 540 pt; 1920 × 1080 = × 1,5) | 80 lados · 56 arriba · 64 abajo | 12 de 64, medianil 32 (1120 útiles). c*n* empieza en 80 + 96 (*n* − 1); *k* columnas miden 96*k* − 32 | Contenido interior en y 272-632 | y 216 | Pie: logo de 16 px en Apagado, línea base en y 696; «03 / 14» a la derecha. La portada no lleva pie: firma con logo de 24 px en tinta, y 632-656 |
| **Post, carrusel, anuncio 1080 × 1350** | 80 a los cuatro lados | 6 de 120, medianil 40 (920 útiles) | La grilla 3:4 del perfil recorta ≈ 34 px por lado: con 80 quedan 46 de aire | y 408 (432 en 1080 × 1440) | Abajo a la izquierda, 32 px de alto, termina en y 1270 |
| **Historia, reel 1080 × 1920** | 80 a los lados | 6 de 120, medianil 40 | **Texto, logo y botón solo en x 80-1000, y 272-1248**, sea orgánica o pagada. Foto, teléfono y personaje pueden salirse. La portada del reel se ve recortada a y 240-1680 | y 576 | 32 px, termina en y 1248 |
| **Banner LinkedIn Martín 1584 × 396** | 80 | — | x 700-1504, y 80-316 (la foto de perfil tapa abajo a la izquierda; en el celular se recortan los costados) | y 120 | Ninguno: firma el perfil |
| **Banner página 1512 × 256** | — | — | Fondo Papel; x 760-1432, y 56-200 | y 80 | Lo pone LinkedIn |
| **Miniatura YouTube 1280 × 720** (exportar a 3840 × 2160) | 80 | Las de la lámina | Texto en x 80-720; imagen a sangre en x 768-1280; x ≥ 1060, y ≥ 600 libre para la duración | y 216 | Símbolo solo, 48 px, en x 80, termina en y 648 |
| **Banner del canal de YouTube 2560 × 1440** | — | — | Fondo Papel. **Todo lo que se lee, en x 507-2053, y 508-931** (1546 × 423): es lo único que se ve en el celular. La computadora muestra la franja de 2560 × 423 (y 508-931) y la TV, el lienzo entero; fuera del centro, solo fondo | Ninguna: el texto va centrado en alto dentro de la zona | Ninguno: firma el canal (el nombre y la foto van debajo) |
| **OG 1200 × 630** | 80 | — | Una por dominio | y 192 | Logo de 32 px, termina en y 550; dominio abajo a la derecha |
| **Web** | Escritorio ≥ 48 (contenedor 1200) · tableta 40 · celular 24 | 12 de 78 con medianil 24 · 8 con 24 · 4 con 16 | Cabecera 64; antes del inicio, 96 (48 en celular); entre secciones **128 y 80** | — | Cabecera a la izquierda; pie con la frase de marca |
| **A4 210 × 297 mm** | 20 arriba · 20 lados · 22 abajo | **6 de 25 mm con medianil de 4** (se subdividen en 12 de 10,5 para tablas); c1 20 · c2 49 · c3 78 · c4 107 · c5 136 · c6 165 | Párrafos en c2-c5 (≈ 65 caracteres); tablas en c2-c6; línea base de 5 mm | y 90 mm | Portada de propuesta: abajo a la izquierda, 5 mm. Carta, cotización, informe mensual: membrete arriba, x 20 · y 15, 5 mm. Interiores: pie, 3 mm en Apagado |

**Otros formatos que salen de estos.** Anuncio de Meta 9:16: la historia. Documento de LinkedIn: el post. Google Ads: 1200 × 628, 1200 × 1200 y 960 × 1200; en búsqueda, display y Demand Gen, **foto real sin texto ni logo encima** (Google rechaza lo demás), y en PMax, como máximo 1 de cada 3 imágenes puede ser una lámina de marca, sin botón ni logo; logo 1:1 con el símbolo y logo 4:1 con el logo completo de 900 px de ancho. Newsletter 1920 × 1080: la gramática dentro de una caja central de 1152 × 648. Fondo de videollamada 1920 × 1080: Papel liso, logo de 40 px arriba a la derecha dentro de la zona 4:3 (x 240-1680); sin logo en llamadas donde Martín firma como autor.

### 4.5 Radios y bordes

| Elemento | Pantalla y lámina | Lienzo de 1080 | A4 |
|---|---|---|---|
| Botón, chip, interruptor | Píldora | Píldora | Píldora |
| Campo, miniatura | 8 | 16 | 2 mm |
| Captura, panel dentro de tarjeta | 12 | 32 | 3 mm |
| Tarjeta, foto en tarjeta | **16** | **40** | 4 mm |
| Borde | 1 px | 2 px | 0,5 pt |
| Borde del elemento encendido | 1,5 px `#007AFF` | 3 px | 1 pt tinta (impreso) |

**Radios concéntricos:** el de adentro es el de afuera menos el relleno, cuando el relleno es menor que el radio. Con el relleno de tarjeta (24, o 48 en el lienzo), la resta da negativo: ahí el elemento de adentro usa su propio radio de esta tabla (panel o captura 12, o 32 en el lienzo). **Motivo del 40 en el lienzo:** un post se ve a un tercio, y 40 px ahí son unos 13 px en la pantalla, cerca del 16 de la web.

---

## 5. El interruptor

### 5.1 Construcción, medida en `simbolo.svg`

Unidad ***w*** = ancho de una cápsula = 38,75 unidades del SVG.

| Parte | En el SVG | En *w* |
|---|---|---|
| Cápsula | 38,75 × 119,19, extremos semicirculares de radio 19,375 | **1 × 3,076** |
| Botón (círculo calado) | Ø 35,30 | 0,911 |
| Aire entre botón y borde | 1,73 | 0,045 |
| Recorrido del botón | 80,43 (centro de 99,81 a 19,38) | 2,076 |
| Separación entre cápsulas (par e hilera) | 14,50 | 0,374 (≈ 3/8) |
| Separación entre las filas de la hilera | — | 1 |
| Símbolo completo | 92 × 119,19 | 2,374 × 3,076 |

**El botón es un hueco**, no un círculo pintado: toma el color del fondo. Sobre blanco se ve blanco; sobre la tinta, tinta. De ahí sale la idea: el interruptor no tiene luz propia, deja ver lo que hay detrás. **Siempre vertical, arriba es encendido**: es un interruptor de pared o la llave de un tablero, no el toggle horizontal de una app. **La proporción no se redondea** (ni 1 : 3 ni 1 : 3,1): es lo que lo hace nuestro frente al `switch.2` de Apple y al logo de Nintendo Switch.

Solo dos posiciones: botón arriba o abajo. Nunca a medio camino como estado quieto; el avance se cuenta con la hilera.

### 5.2 Estados y color

| Estado | Cápsula | Botón | Claro | Oscuro |
|---|---|---|---|---|
| **Apagado** | Llena en Apagado, **nunca en contorno** | Abajo | `#8A919C` | `#8A919C` |
| **Hecho** | Llena en tinta | Arriba | `#1D1D1F` | `#F6F7F8` |
| **Ahora** (uno por pieza) | Llena en azul | Arriba | `#007AFF` | `#0A84FF` |
| **Logo** | Las dos cápsulas del mismo color | Izquierda abajo, derecha arriba | Tinta (Apagado en pies) | Papel |

**Siempre sobre Blanco** (o sobre la tinta en oscuro): sobre Papel, el hueco de la cápsula apagada queda en 2,96:1. Si la pieza es Papel, el interruptor va dentro de un panel blanco. **El color nunca es la única señal:** la posición del botón y un rótulo dicen lo mismo.

### 5.3 Tres configuraciones y ninguna más

| Configuración | Qué es | Dice | Dónde |
|---|---|---|---|
| **Suelto** | Una cápsula | Un estado del sistema: «Seguimiento automático · encendido» | Rótulos de estado; encabezado de columna en «Sin sistema / Con Kommo»; «Qué encendemos en tus chats» (tres sueltos que pasan a «hecho» en tinta) |
| **Hilera** | Varias cápsulas separadas 0,374 *w* | Avance | Los 14 días del piloto en **dos filas de 7** (separadas 1 *w*); la paginación del carrusel; los pasos del formulario (una hilera de 2) |
| **Par** | Las dos cápsulas del símbolo | La marca | **Solo como logo**, con o sin nombre |

**Prohibido** (vale para el suelto y la hilera; el par, que es el logo, sigue las reglas de §6 y sí convive con el personaje, el A4 y los precios): horizontal, girado, inclinado o en perspectiva · en contorno · con sombra, brillo, degradado o borde · como viñeta, separador, patrón, textura o marca de agua · el par agrandado de fondo · fotos recortadas en cápsula · estados intermedios quietos · para calificar a una persona («Ana · apagada» no existe) · como nodo de un diagrama o unido por cables · junto a una línea de tiempo · junto al personaje en el mismo cuadro · en precios, propuestas, contratos y documentos A4 · en piezas que Martín firma como autor.

«Antes y después» se hace con **dos interruptores sueltos verticales** con su rótulo, nunca con un control horizontal. El ciclo diario de la landing va en una tarjeta de radio 16, no en una cápsula acostada.

### 5.4 Tamaños

| Medio | Suelto (*w* × alto) | Hilera | Nota |
|---|---|---|---|
| Web | 24 × 74 | 16 × 49 (fila de 7: 148 px) | Mínimo 12 × 37 |
| Lámina deck | 24 × 74 | 24 × 74 (fila de 7: 222 px) | — |
| Lámina charla | 40 × 123 | 40 × 123 | — |
| Lienzo de 1080 (post, historia) | 56 × 172 | 56 × 172 (fila de 7: 518 px) | Paginación del carrusel: 16 × 49 |
| Impreso | — | — | No va en A4; en otros impresos, mínimo 3 mm de ancho |

**Ancho mínimo: 12 px.** Por debajo, el botón deja de verse y la cápsula parece una barra: ahí va el punto azul.

### 5.5 Presupuesto por pieza

| Nivel | Qué entra | Dónde |
|---|---|---|
| 0 · Silencio | Logo, letra, línea fina. Sin azul decorativo ni interruptor | Precios, propuestas, cotizaciones, contratos, textos legales |
| 1 · Señal | Punto azul, check, chips, una palabra en azul (solo en titulares desde 24 px o 19 px Bold; en un párrafo, nunca) | Por defecto: láminas, posts, landing, correos |
| 2 · Estado | Un interruptor suelto o una hilera | Antes y después, avance del piloto, «Qué encendemos» |
| 3 · Momento | La animación de encendido | Cierre de videos, apertura de charlas |

Por pieza: un azul que manda, un elemento de producto (teléfono, tarjeta o línea de tiempo) y un solo nivel por encima del 1. Si pide más, se parte en dos.

### 5.6 Lo que sale del interruptor

La gramática de formas en una línea: **lo que se toca o se rotula es cápsula; lo que contiene es rectángulo; lo que marca un estado es círculo.** La cápsula es el cuerpo del interruptor y el círculo, su botón.

| Elemento | Qué significa | Construcción |
|---|---|---|
| **Punto azul** (el botón, liberado) | Lo que importa ahora, en línea con el texto | Círculo lleno `#007AFF`: 8 px junto a texto de 15-17; 12 junto a títulos de 42-58; 16-20 en el lienzo. Uno por pieza (en la web, es el elemento editorial de la pantalla); nunca viñeta ni parpadeo |
| **Check** | Hecho, incluido, aprobado por ti | El `check` de Lucide en tinta, trazo 1,75. En círculo azul lleno solo para el hito final («Día 14 · Tú decides»). **Nunca doble**: dos checks son el «leído» de WhatsApp |
| **Círculo hueco del cable** | De dónde sale un flujo | Ø 8 (16 en el lienzo), con el trazo del cable y relleno del fondo |
| **Línea de tiempo** | Qué pasa cada día | Línea 1,5 px Línea; nodos de Ø 10: pendiente = anillo Apagado, hecho = tinta lleno, hito final = azul de 12 con check. Hasta 7 nodos. **Nunca en la misma pieza que la hilera**: la línea explica qué pasa cada día; la hilera dice en qué día vamos |

### 5.7 Movimiento del interruptor

| Papel | Video (30 fps) | Web |
|---|---|---|
| **Gesto de marca** (logo en la apertura A01 y el cierre A12) | Las dos cápsulas quietas 3 f; la perilla derecha sube en **15 f (500 ms)**, curva `estado` (0.4, 0, 0, 1), sin rebote; al llegar, **un clic suave a −20 dB**, el único sonido de la marca. El logo no cambia de color | — |
| **Interruptor como dato** (hilera, antes y después) | El botón llega en **6 f** (curva `micro`) y **el color llega en los 6 f siguientes**, cuando el botón ya está arriba | **150 ms**, curva `micro`, una sola vez al entrar en pantalla o por una acción; con «reducir movimiento», fundido de 150 ms |

Para animar el logo se usa una versión con la perilla como máscara (un círculo que se mueve), porque en el SVG del logo la perilla es un hueco del trazado.

---

## 6. Logo

### 6.1 Construcción

| Medida (de `creators-logo.svg`) | Valor |
|---|---|
| Logo completo | 989,59 × 119,19 → **8,303 : 1**. El alto del logo es el alto del símbolo |
| Símbolo | 92 × 119,19 → 0,772 : 1 |
| Wordmark | «Creators» en Bold y «Latam» en Regular, con la misma línea base (y 102,77) |
| Altura de mayúscula del wordmark | 86,52 → 0,726 del alto del logo |
| El símbolo respecto del nombre | Sobresale 16,25 arriba de la mayúscula y 16,42 debajo de la línea base: **está centrado en la altura de mayúscula** |
| Separación entre símbolo y nombre | 42,18 → 1,089 *w* (0,354 del alto) |

Nada de esto se redibuja ni se reespacia: el logo se usa siempre desde el archivo.

### 6.2 Versiones

Nuestro logo es un **imagotipo**: símbolo y nombre que funcionan juntos y se pueden separar. El símbolo solo es el **isotipo**; en el equipo le decimos «símbolo». No hay isologo (símbolo y texto fundidos) ni versión apilada: no hace falta.

| Versión | Archivo | Cuándo |
|---|---|---|
| **Logo completo** | `creators-logo.svg` | Siempre que haya espacio. Es la versión por defecto de toda pieza y documento |
| **Símbolo** | `simbolo.svg` | Solo donde el nombre ya está al lado o el espacio es cuadrado: avatares, favicon, esquina de la miniatura de YouTube, logo 1:1 de Google Ads, reverso de tarjeta, solapa de sobre. **Nunca solo en una portada**, salvo la miniatura de YouTube (§6.6) |
| **Símbolo óptico** | `simbolo-optico.svg` | El símbolo solo que se va a ver **a menos de 72 px de alto**: avatar, favicon, marca de agua de YouTube, logo 1:1 de Google. Anillo del botón en 0,12 *w* (en vez de 0,045) y botón de Ø 0,76 *w*; la cápsula no cambia |
| Negativo | `*-negativo.svg` | En Papel `#F6F7F8`, sobre la tinta |

**Motivo de la versión óptica.** El aire entre el botón y el borde mide 0,045 *w*: recién desde 69 px de alto del símbolo llega a 1 px en una pantalla 1x (calculado). Por debajo, el anillo desaparece y el botón, que es un hueco, se ve como un mordisco. El óptico no cambia el logo: es el ajuste que muchos manuales reservan para tamaños chicos.

### 6.3 Color

| Fondo | Logo | Contraste |
|---|---|---|
| Blanco o Papel | Tinta | 16,83 · 15,69 |
| Pie de lámina, pie de páginas A4 interiores, firma discreta | Apagado | 3,18 sobre Blanco |
| Tinta (oscuro) | Papel | 15,69 |
| Pie en oscuro | Apagado | 5,30 |
| Foto | Solo sobre una zona limpia y pareja de la foto, en tinta o Papel, con al menos 3:1 | — |
| Impreso | K 100 (negro solo, no compuesto); pie en K 45 | — |

**Nunca en azul**, ni un instante en una animación. Nunca sobre azul, en degradado, con sombra, contorno o resplandor.

### 6.4 Área de respeto

**Alrededor del logo queda libre el ancho del símbolo: 0,772 veces el alto del logo**, medido desde el borde del símbolo y del nombre. Con el logo de 32 px de un post, 25 px; con el de 16 px del pie de una lámina, 12 px; con el de 5 mm de una propuesta, 3,9 mm. **Motivo:** se mide con el propio símbolo, sin reglas aparte. Ningún texto, borde, logo ajeno ni imagen entra en esa zona.

### 6.5 Tamaños mínimos

| Versión | Pantalla | Impreso |
|---|---|---|
| Logo completo | **16 px de alto** (≈ 133 px de ancho). Ahí el asta de la «L» mide 1,47 px | **3 mm de alto** (≈ 25 mm de ancho) |
| Símbolo original | 72 px visibles; por debajo, el óptico | 10 mm (reverso de tarjeta); 8 mm (solapa) |
| Símbolo óptico | 16 px | — |

Por debajo de 16 px no se usa el logo: se escribe «Creators Latam».

### 6.6 Dónde va

**Una sola marca nuestra por pieza, abajo a la izquierda**, en la esquina que responde «¿quién firma?» (§4.3). Dos marcas propias en la misma pieza compiten entre sí. Excepciones, cada una con su motivo: el **membrete** arriba en la carta, la cotización y el informe mensual (documentos que empiezan sin portada); el fondo de **videollamada**, arriba a la derecha (la cabeza ocupa el centro y abajo); la **miniatura de YouTube**, con el símbolo solo abajo a la izquierda (YouTube ya muestra el nombre del canal al lado); y la **web**, que no es una pieza fija: el logo va en la cabecera, arriba a la izquierda (es navegación), y se repite en el pie con la frase de marca.

**Marca personal de Martín.** Todo el sistema es compartido (letra, color, retícula, titular en dos tiempos, punto azul, check, tarjetas, foto, personaje), **menos el símbolo y el interruptor**, que son de Creators Latam. Van en las piezas de Martín solo cuando hablan de Creators (con el lockup L2 o el logo chico al pie). En lo que Martín firma como autor (posts y carruseles de LinkedIn, newsletter, web personal, clases, DOXS.AI), esa esquina es L1: foto F2 en círculo de 48 px (64 en el lienzo) + «Martín Velasco» Bold + cargo Regular en Pizarra. **Si la pieza lleva al personaje, L1 va sin foto**, solo con el nombre y el cargo: foto y personaje nunca van juntos (§13.1). El símbolo nunca es el avatar de Martín.

### 6.7 Co-marca

| Caso | Cómo |
|---|---|
| **Anfitrión o cliente en una portada** | Su logo **arriba a la derecha**, en su versión monocroma oficial (o en gris solo con permiso escrito), 32 px de alto en lámina y 40 px en charla. Dos logos ajenos se separan con un filete vertical de 1 px Línea y 24 px de aire |
| **Colaboración con otra marca** | Nuestro logo + **filete vertical de 1 px Línea, del alto del logo** + su logo, cada lado a un área de respeto del filete. Los dos logos con el mismo alto óptico (un logo cuadrado mide lo mismo que nuestro alto). Si la otra marca no permite su logo en la versión que la pieza necesita, la pieza va en claro. Sin «×» |
| **Kommo** | «Partner certificado de Kommo» en texto, en el pie legal y en «Por qué nosotros». El sello oficial solo en la lámina de cierre del deck (L15) y en esa página, 8 mm o 40 px de alto, en su versión original. Nunca en la cabecera ni al lado de nuestro logo |
| **Martín en piezas de Creators** | L2: «Martín Velasco» Bold + filete vertical de 1 px + logo con la misma altura de mayúscula · L3: «con Martín Velasco, fundador» · L4: tercio inferior de video · L5: firma de correo en texto |
| **Canales** | WhatsApp, Instagram y Facebook se escriben con su nombre. El logo oficial, en su color y más chico que el nuestro, solo si es imprescindible. Meta no permite recolorearlos |

### 6.8 Qué no hacer

Cambiar la proporción o el espacio entre símbolo y nombre · el nombre sin el símbolo · el logo en azul · dentro de una caja o una píldora · centrado arriba de una portada · rotado · con contorno, sombra o brillo · sobre una foto con zonas claras y oscuras · el símbolo agrandado como fondo · el personaje o el nombre de Martín fundidos con el símbolo · los interruptores del símbolo en distintos colores.

---

## 7. Íconos

**Set: una selección cerrada de 28 íconos de Lucide 1.48** (ISC; los heredados de Feather, MIT), con nuestras reglas. «Propio» es la selección y las reglas, no el dibujo: los sistemas que dibujan su set (IBM, Dropbox) lo hacen para llevar a los íconos el detalle de una tipografía propia, y Helvetica no es nuestra. Nuestro rasgo es el extremo redondo de la cápsula, y Lucide ya lo tiene en sus remates.

| Regla | Valor | Motivo |
|---|---|---|
| Trazo | **1,75 sobre la retícula de 24**, en todos los tamaños y en los dos temas | Con el ícono a 1,17 veces el cuerpo, 1,75 iguala el asta del Regular |
| Tamaño | **1,17 × el cuerpo del texto**: web 17 → 20 px · lámina 15 → 18 · charla 24 → 28 · lienzo 42 → 48 · A4 10 → 12 pt. Mínimo 16 px | Ícono y palabra con el mismo gris |
| Alineación | `display:flex; align-items:center`, sin correcciones a mano | El error medido es menor de 1 px |
| Color | El de su texto; Pizarra en listas y navegación; **azul solo en el activo, uno por pantalla**; apagado en Apagado (también en oscuro) | — |
| Uso | **La palabra siempre está**; el ícono la acompaña a la izquierda. Nunca en titulares ni en el botón principal. Nada de tarjetas con un ícono grande arriba (la huella más reconocible del diseño hecho por IA). Anuncio: 0 o 1; post o lámina: 3 como máximo | — |

**Los 28.** Conceptos: `message-circle` (chats) · `inbox` (todo en un lugar) · `user-round` (vendedor) · `user-round-check` (chat asignado) · `users-round` (equipo) · `message-circle-reply` (seguimiento automático) · `message-circle-check` (mensaje aprobado) · **`message-circle-more`** (sin responder, esperando) · `timer` (tiempo de respuesta) · `chart-bar` (reporte) · `square-kanban` (etapas de venta) · `contact-round` (ficha del cliente) · `store` (negocio del cliente) · `receipt-text` (venta) · `tag` (precio) · `calendar-check` (piloto) · `calendar-clock` (cita) · `bot-message-square` (asistente, siempre con «opcional» o «nivel 2») · `wrench` (instalación) · `presentation` (capacitación) · `headset` (soporte) · `globe` (tu web). Interfaz, los únicos que van sin palabra: `arrow-right` · `arrow-up-right` · `check` · `x` · `plus` · `chevron-down`.

**Lo que no entra.** `eye` («Supervisar»): el ojo se lee como vigilancia, y «ves cada conversación» lo dice el dato mismo, con `inbox`. Tampoco `message-circle-warning`: el triángulo de alerta sube el volumen a alguien que ya está desbordado; para «sin responder» se usa `message-circle-more`, la burbuja con tres puntos.

**Nunca:** ojo, campana, lupa, foco, `sparkles`, cohete, diana, apretón de manos, rayo, trofeo, cerebro, engranaje · logos de canales de librería · íconos rellenos, de color o 3D · SF Symbols (la licencia de Apple los limita a apps de sus plataformas).

**Destacadas de Instagram:** lienzo 1080 × 1920 en Papel, ícono de 560 px en tinta centrado en (540, 960), sin texto. Solo «Piloto» (`calendar-check`) en azul. «Martín» usa `user-round`, para que las seis sean una familia; la cara del personaje queda para el contenido.

---

## 8. Teléfono

**Sí, pero no todo el tiempo** (decisión de Martín): aparece cuando la pieza trata de un chat concreto. Si trata de una persona, va una foto; si trata del equipo, la tarjeta del reporte.

| Regla | Valor |
|---|---|
| Construcción | **Ancho W, alto 2 W**; radio exterior 0,16 W; bisel 0,04 W; radio de pantalla 0,12 W. Los valores que ya usan los decks (con W = 260: 42 / 10 / 32) |
| Genérico | Sin isla, muesca, botones laterales ni logo (Apple prohíbe copiar detalles únicos de sus equipos) |
| Posición | De frente, **recto**, sin inclinación, reflejos ni sombra. **Uno por pieza.** Puede salirse por abajo del formato |
| Marco | Tinta; `#3A3A3C` en oscuro |
| Pantalla | **Papel, siempre**, también en la pieza oscura |
| Barra de estado | **La hora firma: 7:05**, la hora del reporte, cuando la escena no tiene hora propia; **10:47** en las piezas «fuera de horario». Si la escena tiene hora, esa hora, y la misma en el eyebrow. Nunca una hora cualquiera (el mismo recurso de Apple con las 9:41) |
| Cabecera del chat | Nombre del cliente y, en Pizarra, «Ejemplo» durante toda la escena |
| Tamaño | Lámina: W 256 (3 columnas, c10-c12) · lienzo 1080 (post, historia): **W 600** (4 columnas) · web: W 320 en escritorio y 256 en celular · miniatura: W 256 |
| Texto dentro | **Nunca por debajo del mínimo del formato**: 12 px en lámina y web, 30 px en el lienzo. Si no entra, se muestran menos burbujas, no letra más chica. Es la prueba de las 7 p. m. |
| Nunca | En precios ni propuestas · con el personaje tapándolo · con la interfaz verde de WhatsApp · inclinado o en perspectiva |

**Qué va adentro.** Nuestra conversación estilizada, no una copia de WhatsApp. Dentro de una **captura real** (Kommo), la interfaz se muestra como es, incluidos sus controles; en lo que dibujamos, nada horizontal.

---

## 9. Tarjetas, chips y burbujas

**Una sola receta para lo encendido.** Chip activo, tarjeta destacada, burbuja del seguimiento y nodo encendido de un diagrama se hacen igual: **fondo Encendido suave, borde `#007AFF` de 1,5 px (3 px en el lienzo), texto en tinta**. En oscuro: `#1A2D43`, borde `#0A84FF`, texto Papel. Así lo encendido se reconoce en cualquier pieza sin aprender una regla por componente.

| Componente | Construcción | Encendido | Nota |
|---|---|---|---|
| **Tarjeta** | Blanca con borde 1 px Línea, o Papel sin borde. Radio 16 (40 en el lienzo), relleno 24 (48), **sin sombra** | La receta; una por pieza | Nada de ícono grande arriba |
| **Tarjeta de la persona que aprueba** | **Relleno tinta, texto Papel.** En oscuro se invierte, como «hecho» en §1.3: relleno Papel, texto tinta (15,69:1); relleno tinta sobre fondo tinta no se ve | — | El bloque negro significa siempre «tú apruebas» o «tu líder de cuenta». Nada más va relleno de tinta |
| **Tarjeta del reporte** (la pieza más vista) | Título, cifras por persona en **orden alfabético**, el punto azul solo en la cifra que el dueño puede arreglar. En 1080 × 1350: título 80 B, filas 42 R, etiquetas 30 R, 4 personas como máximo. «Ejemplo» hasta que exista B1 | El punto azul | Si no se lee en un Android a la hora del cierre, no entra |
| **Chip** | Píldora de 28 px de alto (56 en el lienzo), borde 1 px Línea, texto Regular en Pizarra | La receta | «WhatsApp», «Día 14», «Ejemplo» |
| **Chip del vendedor** | «Asignado a **Ana**»: el nombre en Bold tinta, el resto en Pizarra. **Todo chat de nuestras piezas tiene nombre** | La receta, cuando es lo que la pieza explica | Una pieza con chats sin nombre se devuelve |
| **Burbuja** | **Todas blancas con borde Línea**; cliente a la izquierda, equipo a la derecha; radio 0,04 W del teléfono (16 en uno de 390, 24 en el de 600 del lienzo) con la esquina de quien habla en 4; ancho máximo 75 %; hasta 4 visibles; hora en Pizarra; checks grises y nunca dobles | **Solo la del seguimiento automático**, con la receta; debajo, en Pizarra: «Seguimiento automático · aprobado por ti» | Burbujas propias todas en azul se parecen a iMessage y gastan el acento; texto blanco sobre `#007AFF` (4,02:1) no se lee en la letra chica del teléfono |
| **Columna de la hora** | En listas, líneas de tiempo y reportes, la hora a la izquierda en Pizarra con cifras tabulares, el contenido a la derecha: «10:47 p. m. │ Entra el chat de Rosa, asignado a Ana» | — | La luz importa cuando el dueño no mira, y eso tiene hora |
| **Línea fina** | 1 px Línea (`#3A3A3C` en oscuro) | — | El único separador |

---

## 10. Botones y campos

| Botón | Construcción | Dónde |
|---|---|---|
| **Principal** | Píldora `#007AFF` (`#0A84FF` en oscuro), texto blanco Bold. Web: 19 px, alto 52, relleno lateral 24 · lámina: 19 px, alto 48 · lienzo: 42 px, alto 96, relleno lateral 48. **Uno por pantalla o pieza**, y es el elemento encendido | Landing, historias orgánicas, cierre de deck |
| Principal, al pasar el mouse | `filter: brightness(.92)` en 150 ms, curva `micro` | Web |
| Foco | Anillo de 2 px `#007AFF` a 2 px | Web |
| **Secundario** | Sin caja: texto tinta Bold + flecha SVG `arrow-right` | «Ver cómo funciona» |
| **De formulario** (cancelar, volver) | Píldora blanca con borde 1 px Apagado, texto tinta | Solo formularios |
| Deshabilitado | Fondo Línea, texto Apagado | — |
| **Nunca** | Botón dibujado en anuncios de Meta o Google (lo pone la plataforma) · botón falso en una imagen OG · ícono en el principal · sombra · «¡Contáctanos ya!» | — |

Texto del botón: verbo y objeto, con mayúscula solo al inicio y sin punto: «Pedir piloto gratis» (158 px a 19 B con −0,01 em; 356 px a 42 B en el lienzo, con tracking 0).

**Campos de formulario:** radio 8, borde 1 px Apagado (3,18:1), etiqueta arriba en 15 R tinta, foco con borde 2 px `#007AFF`, error en `#D70015` con una frase que dice qué corregir. Alto mínimo tocable: 44 px.

---

## 11. Gráficos y diagramas

Aquí se fijan las reglas de los gráficos y los diagramas.

**Color: los tres estados y nada más** (§1.3). Uno solo en azul: lo que dice el título. El número junto a una barra azul va en tinta Bold, no en azul. Azul y Apagado nunca se tocan. **Nada de datos sobre Papel:** el gráfico va en un panel blanco (radio 12 dentro de una tarjeta Papel). **En A4 impreso, lo encendido va en tinta.** Sin tortas ni donas, sin 3D, sin degradados, sin semáforos.

**Anatomía, siempre en este orden:** eyebrow · **título-conclusión** con verbo, número y punto («Ana atendió 26 de los 64 chats de ayer.») · bajada que dice qué, de quién, cuándo y en qué unidad · datos con etiquetas pegadas (sin leyenda hasta tres series, sin texto girado, barras siempre desde cero) · fuente con fecha o «Ejemplo ·» en Pizarra, abajo a la izquierda · lectura opcional (filete de 3 px en tinta, sin fondo, solo en láminas de gráfico y tabla). En redes, además, un chip «Ejemplo» arriba a la derecha del panel.

**Personas en orden alfabético, nunca por valor.** El reporte es una lista, no un podio. Canales, horas y etapas sí se ordenan por valor o por su orden propio.

| Medida | Lámina | Post e historia | A4 | Web | Oscuro |
|---|---|---|---|---|---|
| Barra: grosor / aire | 24 / 16 | 56 / 32 | 3,5 / 1,5 mm | 20 / 12 | Igual |
| Línea de datos · punto | 2 px · Ø 12 | 4 px · Ø 24 | 1,25 pt · Ø 2,5 mm | 2 px · Ø 10 | Igual |
| Línea base (cero) | 1 px tinta | 2 px tinta | 0,5 pt | 1 px | Papel |
| Retícula (solo si no hay valores) | 1 px Línea, ≤ 4 | 2 px Línea, ≤ 4 | 0,25 pt | 1 px | `#3A3A3C` |
| Máximo | 8 barras, 3 series | 6 barras (5 en historia), 2 series | 10 filas | 6 barras | 5 barras, 2 series |

**Diagramas: tres formas y un cable.** Nodo = rectángulo blanco, borde 1 px Línea, radio 16 · persona que aprueba = relleno tinta · lo que explica la pieza = la receta encendida, uno por diagrama · lo opcional o lo que no existe todavía (el asistente de IA) = borde punteado Apagado (guion 4, espacio 4). **El cable** es de 1,5 px Apagado (3 px en el lienzo, 0,75 pt en A4), **siempre gris**, ortogonal con esquinas de radio 12, nace en un círculo hueco (el botón del interruptor, en chico) y termina en una punta abierta en SVG. Izquierda a derecha en lámina y web; arriba abajo en post, historia y celular. **La línea punteada significa siempre «no pasó (todavía)»**, nunca un dato real.

---

## 12. Fotografía: «Pequeños oficios»

| Regla | Valor | Motivo |
|---|---|---|
| Tratamiento | **Blanco y negro: negro a 29/255 (la tinta), blanco a 246/255 (el Papel), curva en S suave de 20, sin grano.** En Lightroom: salida de negros al 11 %, de blancos al 96 % | La foto muestra lo que hay, sin filtro que la embellezca, y deja el color para lo que se enciende: la interfaz. Nunca queda más oscura que el texto; el grano se vuelve ruido al recomprimir |
| Qué se fotografía | Quien vende, con su herramienta (el celular), como Irving Penn en *Small Trades* y con la tradición del B/N de Martín Chambi. Luz natural pareja | Personas que trabajan, no modelos |
| Mirada | **Nadie mira a cámara**, salvo el retrato de Martín y quien da un testimonio. Nada de fotos por encima del hombro con la pantalla «pillada» | — |
| Chip sobre la foto | **Nombre y rol, nunca cifras:** «Lucía · asesora de ventas» | Las cifras de una persona real no se publican |
| Interfaz sobre la foto | En una tarjeta plana, borde fino, sin sombra, sobre la zona limpia. El azul va en la tarjeta, nunca en la foto | — |
| Colocación | Una imagen por pieza, en **1/3 o 1/2** del lienzo; a sangre o en tarjeta de radio 16 (40 en el lienzo). Texto en la otra parte, **nunca sobre caras ni capturas** | — |
| En Google Ads | En búsqueda, display y Demand Gen, foto real sin texto, logo ni marco: es obligatoria, no un adorno | Google rechaza lo demás |
| Nunca | Fotos de banco con personas · personas generadas con IA (la IA solo para ambientes sin personas identificables) · sepia, color, filtros · la foto de Martín junto al personaje | — |

**Autorización escrita siempre** (Código Civil, art. 15). Pantallas con la cuenta demo de Kommo y datos inventados.

---

## 13. Personaje: Martín en 3D

**Qué es:** el personaje oficial, estilo Memoji de iOS, con 14 poses aprobadas. En piezas se llama «Martín» o «el personaje», nunca «Memoji». **Su papel:** el colega que te enseña dónde está la llave; no es la llave.

### 13.1 Dónde se ubica

| Regla | Valor |
|---|---|
| **Uno por pieza** | Excepción: un antes y después, con dos poses a la misma escala y sobre el mismo piso |
| **Mira o señala hacia el contenido** | Con el texto a la izquierda, el personaje va en el tercio derecho mirando a la izquierda. **No se espeja:** si hace falta el otro lado, se genera esa pose |
| **Apoyado, nunca flotando** | Los pies sobre la línea del margen inferior (y 1270 en el post, y 656 en la lámina) o cortado contra el borde del lienzo, a la altura de la cadera o de medio muslo. Nunca cortado en cuello, rodillas, tobillos o muñecas; nunca recortado dentro de una tarjeta |
| **Aire** | Media cabeza libre alrededor de la silueta: ahí no entra texto, logo, tarjeta ni botón |
| **Tamaño** | Cuerpo entero desde 160 px de alto (30 mm impreso); cara desde 48 px. Hasta el 40 % del alto en redes y el 60 % en lámina o banner, y como máximo el 15 % del área. Landing: **240 px en escritorio y 160 en celular** |
| **Fondos** | Blanco o Papel. Nunca sobre azul, foto, degradado ni en oscuro (§2.5) |
| **Nunca en el mismo cuadro que** | El interruptor suelto o la hilera (o habla la persona o habla el sistema; el logo de la firma sí convive) · la foto real de Martín · el logo de una universidad o de Kommo · el teléfono tapado |

### 13.2 Dónde sí y dónde no

| Va el personaje | Va la foto real de Martín | No va ninguno |
|---|---|---|
| Historias, cierre de carrusel, stickers, videos explicativos | Perfiles, lámina de ponente, one-pager, portada de charla, prensa, «Quién está detrás» | Precios, propuestas, contratos, cotizaciones |
| Landing: en «Cómo funciona», junto a «Tú apruebas cada mensaje antes de que salga.», y con el formulario enviado; más la página 404 | Colaboraciones con otras personas, casos con el logo del cliente | El reporte que recibe el cliente, mensajes de falla o disculpa |
| Lámina de cierre del deck (L15), a la derecha, 360-420 px, solo si esa L15 no lleva QR ni el sello de Kommo (§6.7; §13.1: nunca junto al logo de Kommo) | Firma de propuestas (sin foto: nombre y cargo) | Anuncios de LinkedIn, piezas con cifras, credenciales |
| Cabecera del newsletter, una pose por edición | — | El inicio y el precio de la landing |

**Acompaña; no vende:** no dice la oferta ni el precio. Si habla, una burbuja como máximo, en primera persona y de hasta 12 palabras, blanca con borde 2 px Línea. El pañuelo es `#007AFF` y no cuenta para la regla del azul. La pose con lupa sale (se lee como detective); en su lugar, la del reporte o la de palmas abiertas.

**Poses nuevas:** una o dos sueltas en la **app de ChatGPT** con la cabeza y el cuerpo oficiales como referencia. Cada pose la aprueba Martín y se anota con fecha, uso, modelo y referencias. Movimiento en §14.

---

## 14. Movimiento

### 14.1 Curvas y duraciones

| Curva | `cubic-bezier` | Para qué |
|---|---|---|
| `entrada` | (0.05, 0.7, 0.1, 1) | Todo lo que entra: llega rápido y se asienta despacio |
| `estado` | (0.4, 0, 0, 1) | Algo que ya está cambia: la perilla, una barra, un empuje |
| `salida` | (0.3, 0, 0.8, 0.15) | Todo lo que sale |
| `micro` | (0.2, 0, 0, 1) | Color, clic, conteo, interruptor como dato |
| `lineal` | (0, 0, 1, 1) | Solo opacidad |

Sin rebote nunca. En resortes: `bounce: 0` en SwiftUI; en Remotion, `spring({damping: 20, stiffness: 120, mass: 1, overshootClamping: true})`.

| Duración | Video (30 fps) | Web |
|---|---|---|
| `micro` | 6 f · 200 ms | **150 ms** |
| `fundido` | 9 f · 300 ms | 200 ms |
| `salida` | 8 f · 267 ms | 150 ms |
| `entrada` | 14 f · 467 ms | 300 ms |
| `estado` y gesto de marca | 15 f · 500 ms | 300 ms |
| `cámara` (zoom a un detalle) | 21 f · 700 ms | — |
| `dato` (barras, conteos) | 24 f · 800 ms (nunca más de 1 s) | 800 ms, una vez |

A 60 fps se duplican los fotogramas; los milisegundos no cambian. En video los tiempos son más largos porque el espectador no controla nada.

### 14.2 Reglas

1. **Coreografía:** primero lo quieto, después el contenido y al final lo encendido. **El azul llega siempre último**, en el único elemento que hay que mirar.
2. **Una vez y quieto.** Sin loops, pulsos, contadores que suben solos, globos rojos ni «pop» en las burbujas. El dueño vive entre notificaciones que parpadean; lo nuestro se mueve una vez y queda quieto.
3. **Cortes secos entre horas.** «La vida de un chat» salta de las 10:47 p. m. a las 9:05 a. m. sin transición: el tiempo pasó.
4. **Entradas:** fundido + 8 px hacia arriba, curva `entrada` (el chip, el texto). Titular palabra por palabra: 4 f entre palabras.
5. **Barras:** entran en 24 f con `estado`, escalonadas 3 f; con más de 6 barras, todas a la vez; el azul al final, en 6 f `micro`.
6. **Personaje:** entra en 14 f (467 ms), sale en 8 f, cambia de pose con corte seco. No se anima con IA de video.
7. **Logo:** el gesto de marca de §5.7 cierra todos los videos de Creators Latam; en los de Martín como autor, la perilla no se anima.
8. **Reducir movimiento:** todo pasa a fundidos de 150-200 ms, sin desplazamiento.
9. **Sonido:** un solo clic suave a −20 dB, cuando la perilla del logo llega arriba. Nunca la grabación de un interruptor real.