CANCHA — sitio de agencia (estudio de producto)

Fecha: 2026-08-09 Archivo: ~/nef/agencia/index.html (un solo archivo, sin build, sin deps) Origen: hilo de X sobre diseño de producto (16 puntos) + brief “sitio de agencia”.

---

Dirección (decidida, no negociada después)

• Sujeto: estudio de producto. No “agencia web”, no “diseño y desarrollo”.
• Audiencia: fundador con prototipo de IA / Figma y sin producto usado.
• Trabajo de la página: una sola acción — pedir el diagnóstico de 30 min.
• Lectura estética: el hilo dice “los productos digitales ya son eSports”. El sitio es la cancha: verde de campo, líneas de gis, marcador ámbar.

Diales

VARIANCE media-alta (grid asimétrico 12 col) · MOTION baja (un reveal, sin loops) · DENSITY media.

Firma

Las faltas del hilo convertidas en tarjetas rojas y amarillas reales (3 rojas = lo que mata el producto, 3 amarillas = lo que lo enferma). Ahí se gasta toda la audacia; el resto queda callado.

Defaults evitados a propósito

Nada de crema/serif/terracota, nada de negro + verde ácido, nada de gradiente morado-IA, nada de tres cards iguales genéricas, nada de Inter + slate.

---

Tokens

--field   #0E2A20   fondo campo
--field-2 #123528   banda alterna
--field-3 #0A1F18   marcador / tinta sobre gis
--chalk   #F1F4EC   gis
--score   #FFC53D   ámbar de marcador (acento único)
--card-red#D2402F   tarjeta roja

Tipografía: Archivo variable (wdth 118–125, wght 800) para display — condensada institucional, lee deportivo sin ser Bebas. IBM Plex Mono para números, eyebrows y chips de fecha (dígitos de marcador).

---

Estructura (6 bloques, nada más)

#	Bloque	Principio del hilo que traduce
—	Hero + marcador “lo que crees 0 : 1 lo que hacen”	13 (observar uso real)
01	Tesis (3 columnas asimétricas)	2, 4, 10
02	Faltas — 6 tarjetas roja/amarilla	4, 3, 8, 6, 13, 13-bis
03	Método — 4 tiempos con fecha límite	3, 9, 6, 11, 12
04	Pruebas — 3 casos con número	15
05	Cierre invertido (fondo gis) + CTA mailto	—

Nota bajo faltas: “la UI no la inventamos, copiamos con criterio” = principio 7 (shu-ha-ri). Footer = principio 14.

---

Revisión 2026-08-10 — el quinto partido

Tono subido a algo entrañable y anclado al Mundial 2026 real (ver 2026-08-10-diccionario-mundial-2026.md).

• Nueva tesis: todos llegan a octavos, nosotros venimos por el quinto partido. Prototipo = octavos. Producto que alguien usa solo = quinto partido. México lleva 40 años sin cruzarlo; en 2026 se cayó otra vez en octavos, 3-2 con Inglaterra, en el Azteca.
• §04 Pruebas → §04 Diccionario de la ilusión. Los casos con [corchetes] se eliminaron: eran placeholder y, peor, iban a tentar a inventar métricas. En su lugar, nueve frases reales del torneo con su lectura en producto. Es contenido honesto, compartible, y hace el trabajo que hacían los casos (demostrar criterio) sin fingir historial.
• CSS nuevo, sin JS obligatorio: animation-timeline: view() para los reveals, animation-timeline: scroll(root) para la barra de avance del nav, @property --draw para que las líneas de gis se pinten al entrar, ::details-content + interpolate-size: allow-keywords para el acordeón del diccionario (crece a auto de verdad), linear() de rebote en hover, text-wrap: balance/pretty. El JS quedó solo dentro de @supports not (animation-timeline: view()).

Pendientes para Nef

1. Nombre. CANCHA es placeholder defendible, no sagrado. Si cambia, solo tocar .brand y el <title>.
2. Verificar el marcador México-Inglaterra y la ronda antes de publicar; las fuentes no coincidían (§04, entrada “El quinto partido”).
3. Falta prueba propia. El sitio ya no miente, pero sigue sin un caso real. Cuando exista uno con número, va entre §03 y §04.
4. CTA apunta a mailto:[ID-EMAIL] con cuerpo pre-llenado (4 preguntas que ya filtran cliente). Cambiar a Cal.com si se quiere agenda directa.
5. Deploy: archivo estático. Cloudflare Pages o Netlify drop. Sin build.

Verificado

• Sin overflow horizontal en 375 / 768 / 1280.
• Tarjetas: aspect-ratio 5/7 en desktop, altura automática < 640px.
• prefers-reduced-motion honrado (reveal e inclinación de tarjetas se apagan).
• Focus visible ámbar en todo lo interactivo.
• Fuentes vía Google Fonts <link> — si se publica bajo CSP estricta, hay que auto-hospedar los .woff2.

La pregunta incómoda

Este sitio no tiene casos reales todavía. Antes de pulir tipografía: ¿a quién se lo enseñas esta semana? Un fundador viendo §02 y diciendo “esa roja soy yo” vale más que otra pasada de diseño.