# Criterios de diseño AutoChiro

Las bases sobre las que construir, no un reglamento. Lo que está aquí es lo que hace que
dos piezas hechas por personas distintas se parezcan; el resto es tu criterio.

Solo tres cosas son cerradas: **la marca**, **el uso del logo** y **la accesibilidad
mínima**. Lo demás son puntos de partida buenos, no vallas.

---

## Cerrado · La marca

- Manda `brand/`: la hoja oficial y los vectores del logo, por encima de cualquier web,
  deck o diseño anterior.
- Cuatro colores: `#FF4A36`, `#FFAF69`, `#373E42`, blanco. Un gradiente,
  `135deg, #FF4A36 → #FFAF69`, y una sola vez por pieza.
- Poppins (o Montserrat) en titulares, Inter en cuerpo. Nada más. En piezas sin acceso a
  red —artifacts, email— hay que embeberlas con `fuentes.css`: si no, la tipografía de
  marca no carga y se cae a la del sistema.
- **El naranja de interfaz no es el de marca.** `#FF4A36` tiene tono 6° y en un botón lee
  rojo; `--ac-action` (`#FF6745`) es el punto 0,29 de ese gradiente. `--ac-orange` queda
  para logo, gradiente y hover del botón.
- Si te falta un color, casi siempre lo que te falta es carbón a otra luz. Si de verdad no
  está, añádelo a `tokens.css` — no a la pieza.

## Cerrado · El logo

- Por defecto, el logotipo horizontal. El isotipo suelto solo cuando la marca ya está
  clara: avatar, favicon, esquina de slide.
- La variante la decide el fondo: claro → `logo-horizontal.svg` · oscuro → `-inverso.svg` ·
  color o foto → `-blanco.svg` · una tinta → `-negro.svg`.
- Zona de respeto ≥ la altura del isotipo. Alto mínimo 24 px.
- No deformar, no recolorear, no rotar, no añadir sombras ni marcos.

## Cerrado · Accesibilidad mínima

- Todo lo clicable tiene `hover`, `focus-visible` y `active`. Nunca `outline: none` sin
  sustituto, y el foco se marca en carbón: el naranja ya está ocupado por el botón.
- Área táctil mínima 44×44 px. Texto de lectura a 16 px; 14 px solo para etiquetas y
  cabeceras de tabla, nunca por debajo.
- El error va junto al campo y en texto, no solo en color, y no borra lo ya escrito.
- Respeta `prefers-reduced-motion`.
- El naranja no vale para texto corrido: da 3,1–3,3:1. Sirve para glifos, líneas, iconos y
  etiquetas cortas; el cuerpo va en carbón.

---

## Puntos de partida

**Superficie.** La página es blanca. El color entra por bloques —tibio o carbón—, no como
fondo general. El carbón, una vez por pieza, normalmente en el cierre.

**Jerarquía.** Una cosa domina cada pantalla. Si dos elementos compiten, baja uno. El
titular gana por tamaño; el botón, por color.

**Naranja.** Sólido es acción, tintado es marca. Un botón primario por pantalla y el resto
ceden: cada uso decorativo del naranja sólido le resta fuerza al botón.

**Movimiento.** 150–200 ms, y solo `transform`, `opacity` y `color`. Si algo tarda más de
100 ms, estado de carga explícito y botón bloqueado para evitar el doble envío.

**Voz.** Segunda persona, directa, orientada a resultado. Cifras concretas siempre que
existan, cero adjetivos sin dato detrás. Español para ES/LATAM, inglés para UK/AU/US.

**Landings.** Una promesa, un objetivo, un formulario, sin enlaces de salida. La primera
pantalla es un contrato: qué consigues (titular = resultado del cliente, con cifra), cómo
(el mecanismo en una frase), qué hago ahora (un CTA) y por qué creerte (una prueba). Orden
que funciona: promesa → prueba → cómo funciona → para quién y para quién no → precio →
objeciones → CTA final. La prueba va pegada a lo que sostiene, no apilada al final. El CTA
se repite con el mismo texto —verbo + resultado, nunca «Enviar»— y debajo una línea que
quite miedo. Cada campo del formulario cuesta conversión. Descualificar convierte. La
longitud la marca la objeción más cara.

**Iconos.** Una sola familia, la de `iconos.svg`. Si falta uno, se dibuja en ese lienzo y
se da de alta ahí; no se pega un SVG suelto ni se mezcla con emojis.

**Dataviz.** Cuatro series como máximo, en orden y empezando por el naranja. El verde y el
rojo solo comunican estado. Cifras con `tabular-nums`.

**Presentaciones.** Portada en el gradiente con texto blanco; carbón para el cierre y para
la idea que hay que recordar; blanco o tibio en el cuerpo. Una idea por slide, y el titular
como conclusión en vez de etiqueta del tema. Antes de exportar a Adobe Express, ejecutar
`html_export_readiness_skill`.

---

## Cómo se cambia el sistema

- **Un nombre publicado es un contrato.** Piezas de fuera del repo enlazan `diseno.css`,
  así que renombrar o borrar una clase o un token las rompe sin avisar. Añadir es libre;
  quitar exige comprobar antes quién lo usa. Si algo queda obsoleto, se marca como alias
  hacia el valor bueno y se retira más adelante.
- **El contraste se comprueba solo.** `construccion/comprobar-contraste.py` corre en cada
  despliegue y bloquea si un par de texto deja de cumplir. El equilibrio del naranja se
  sostiene con décimas: es la parte que más fácil se rompe sin que se note.
- **La versión se declara en `tokens.css` y solo ahí.** Las páginas la reciben inyectada.
- Todo lo publicado se genera. Editar un HTML del sitio no sirve de nada: se regenera.

---

*Pendiente: alinear el STYLE_GUIDE del dashboard (PracticeHub/Studio Stats) con estos tokens.*