` | Notas del presentador (se ven con tecla N) | | `#n` en la URL | Deep link a una lámina exacta (`deck.html#12`) | | Teclas | ← → espacio navegar · F pantalla completa · N notas · I índice · Home/End | **Reglas de interacción (no negociables):** 1. **El hover complementa, jamás esconde lo esencial**: el argumento debe leerse completo sin mover el mouse (PDF y móvil incluidos). Tooltip = 1 línea de detalle (inversión, base n, fuente). 2. **Un toggle por lámina**, con máximo 2–3 vistas. La vista activa por defecto es la que sale en PDF; si ambas vistas importan impresas, usar dos láminas. 3. **Scroll interno solo para anexos** (letra chica, glosarios, listados de consulta) — nunca para el argumento principal. ⚠ **En PDF se imprime cortado**: toda lámina con `.scrollpane` DEBE llevar (a) la nota visible "↓ El panel desliza…" bajo el panel y (b) el banner `.print-warn` que aparece automáticamente al imprimir. La plantilla además muestra un aviso emergente al exportar a PDF si detecta scroll, iframes o campos editados. Si el contenido debe quedar completo en papel: láminas adicionales, no scroll. 4. **Imágenes**: viven en una carpeta `img/` junto al archivo del deck (ruta relativa `img/nombre.jpg`), JPG o WebP < 500 KB, siempre con caption y fuente. Si falta el archivo, la plantilla muestra un placeholder con la instrucción. 5. **Iframes (contenido vivo)**: cargan al click, nunca automáticamente. Solo con internet garantizado y SIEMPRE con captura de respaldo en `img/`. En PDF se imprime una nota con la URL. Sirven para dashboards (Looker Studio), YouTube (`/embed/`), la web del cliente o mapas. 6. Botones dentro de láminas: estilo `.btn` (pill menta); una acción por lámina. **Exportación (dos formatos, ambos incluidos en la plantilla):** - **PDF** — `Cmd/Ctrl+P`: una lámina por página, sin animaciones; en cada toggle se imprime la vista activa. Al imprimir, el deck **avisa automáticamente** (alert) si hay anexos con scroll, contenido vivo o campos editados, y las láminas afectadas llevan banners de advertencia impresos. - **HTML editado** — tecla **E**: descarga una copia autónoma del archivo con todo lo escrito en el navegador ya incorporado al HTML (los acuerdos dejan de depender del localStorage de ese computador). Es la forma correcta de guardar o compartir una sesión de trabajo. La copia se descarga como `[nombre]-editado.html` y funciona igual que el original. **Patrón oficial de planes de servicio** (lámina tipo en la plantilla): máximo 3 planes en cards · el diferencial es el nivel de involucramiento (pilar), no "más reuniones" · precios grandes con "+ IVA / mes" · lista de servicios con bullets cuadrados; los planes 2 y 3 parten con "Todo el plan anterior, más:" · plan destacado solo con borde menta + chip, y únicamente si hay decisión explícita de recomendar · toggle opcional de periodicidad (mensual/semestral) · condiciones al pie. Detalle fino de un servicio → `data-tip`, no párrafos. **Reglas de animación (no negociables):** 1. Solo animaciones **de entrada**: fade-up, dibujo de trazo SVG, crecimiento de barras, contadores. Duración 400–1100 ms, easing suave, escalonado ≤150 ms entre elementos. 2. Nada gira, rebota ni parpadea. La única excepción: el "pop" del check en la lámina de éxito. 3. Todo debe **leerse perfecto sin movimiento**: en PDF, con movimiento reducido (`prefers-reduced-motion`) y en pestañas en segundo plano las animaciones se desactivan o asientan solas (clase `settled` a los 1,7 s) — el contenido nunca depende de la animación. 4. La lámina de acuerdos editables se congela a PDF o se borra antes de enviar el archivo. **Soporte**: Chrome, Edge y Safari modernos · móvil en horizontal (swipe) · funciona abierto como archivo local (las fuentes requieren internet la primera vez) · compartir como archivo, URL o PDF impreso. ## 9.1 Dashboards vivos **Cuándo dashboard y cuándo deck**: el deck cuenta una historia y pide una decisión (reunión); el dashboard muestra el estado de las cosas y se consulta solo (link permanente). Reportes mensuales de clientes = dashboard vivo + reunión con deck si hay decisiones. **Dos plantillas, dos usos:** | Plantilla | Cuándo | Datos | |---|---|---| | `plantilla-dashboard.html` | Reporte curado simple: el analista elige qué mostrar, bloque a bloque | Sheet con bloques (`kpi`, `barras`, `linea`…) | | `plantilla-dashboard-pro.html` | **Explorador analítico**: el lector filtra, compara y navega solo | Sheet **diaria**: `fecha,canal,campana,inversion,ingresos,conversiones,clics,impresiones,sesiones` | **Capacidades del explorador pro:** - **Filtros**: período con presets (hoy, ayer, últimos 7/14/30/90, esta semana, este mes, mes pasado, este año, personalizado con fechas) · checkbox "incluir hoy" (por defecto NO: el día en curso tiene datos incompletos) · canales por checklist multi-select · campaña por búsqueda de texto · selector de métrica para la curva (ROAS, ingresos, inversión, conversiones, CPA, CTR, sesiones) · botón limpiar. La barra de filtros es sticky. - **Comparaciones**: sin comparación · período anterior · semana anterior (WoW) · mes anterior por fecha · mes anterior alineado por día de semana (−28d) · año anterior por fecha · año anterior alineado por día de semana (−364d) · personalizada. DoD = preset "ayer" + período anterior; MoM/YoY = sus modos. Los deltas de KPI y la línea punteada de comparación aparecen solo si existen datos del período comparado — **nunca se inventa la comparación**. - **Catálogo de gráficos**: combo barras + curva suavizada con **doble eje Y** · **apilado por canal** (diario ≤21 días, semanal si más) · **dona de participación** · barras horizontales top campañas · tabla multicolumna con Δ vs comparación, búsqueda y scroll automático. Todos con hover/tooltip de marca en barras, puntos, curvas y segmentos. - **Registro de métricas**: cada métrica declara si es suma o ratio (ROAS=ingresos/inversión, CPA=inversión/conversiones, CTR=clics/impresiones) y si **subir es bueno** — los deltas se pintan solos (CPA que baja = verde). - **Motor de gráficos**: Chart.js (CDN) **tematizado con los tokens AB**: Figtree, tooltips tinta/crema, grillas `#EFE9DE` sin caja, curvas tension 0.35, rellenos planos translúcidos (menta al 8% — jamás gradientes decorativos), paleta categórica dentro de la familia (mentas + tinta + gris cálido; rosa reservado para atención). En los DECKS los gráficos siguen siendo SVG propios (pocos datos, narrativa); Chart.js es solo para dashboards. - ⚠ Requiere internet al abrir (CDN + fuentes). **Formato de la Sheet del reporte simple** (`plantilla-dashboard.html`): - **Fuente de datos**: Google Sheet publicada como CSV (Archivo → Compartir → Publicar en la web → CSV) con 5 columnas: `bloque,etiqueta,valor,extra,detalle`. Bloques soportados: `config` (titulo/periodo/fuente), `kpi` (máx 4), `barras`, `linea`, `split` (2 filas A/B), `embudo`, `tabla`. Números planos: sin puntos de miles, decimal con punto. La URL va en `CONFIG.sheetCSV`; instrucciones completas en el comentario inicial del archivo. - **Estados honestos**: chip verde "En vivo" (datos de la Sheet) · chip rosa "Datos demo" (sin Sheet conectada) · "Sin conexión" (falla el fetch; mantiene el último dato). Siempre visible con hora de actualización y botón ↻. - **Convención de deltas**: verde = mejora, rosa = atención. Para métricas donde bajar es bueno (CPA, CAC, rebote), el delta lleva `!` en la Sheet (`-15!`) y se pinta verde. - Los gráficos de la casa aplican igual que en §8 (una protagonista menta, contexto pálido, ganador del split calculado y sellado en rosa, embudo con % del inicio) — **y con su interactividad**: todos los puntos y barras llevan tooltip; el bloque `linea` soporta **series múltiples vía la columna `extra`** (ej: filas con extra=ROAS y filas con extra=CPA) y el dashboard genera solo el toggle para alternarlas; tablas de más de 10 filas activan scroll interno automático con aviso (y se imprimen completas en PDF). - **⚠ Privacidad**: una Sheet publicada es accesible para cualquiera con la URL. Solo métricas agregadas — jamás datos personales, márgenes confidenciales ni información nominada. Si el cliente exige datos sensibles: fase con API autenticada, no Sheet pública. - Auto-refresco opcional (`CONFIG.autoRefreshMin`); imprimible a PDF como reporte (cards sin cortar). ## 9.2 La web **Arquitectura MVP** (mockup en `Web/mockup-home.html`): one-pager con anclas — hero → método (el loop en 4 pasos con la familia de instrumentos) → servicios (patrón de 3 planes) → casos (split antes/después) → nosotros (la tesis + las dos personas) → contacto (fondo tinta, único bloque oscuro). Páginas futuras: `/casos/[cliente]`, blog "experimentos". **Reglas de diseño web:** - Layout: contenido a **máx. 1180 px**, secciones con aire (96 px desktop / 56 móvil), una idea por sección. Secciones alternan crema y blanco con hairlines; **solo contacto va en tinta** (el cierre oscuro, herencia de "la decisión" de los decks). - Nav sticky en crema con hairline (sin blur ni transparencias), logo a la izquierda, anclas al centro-derecha y **un solo CTA** menta ("Hablemos"). - Hero: H1 Fraunces ≤2 líneas con énfasis en itálica verde, bajada ≤3 líneas, CTA primario menta + secundario ghost. El matraz como pieza visual con chips de experimento flotando (EXP-001, Δ, ✓ GANADOR) — la marca contando lo que hace. - CTAs: verbo primero ("Hablemos", "Conversemos"), máximo un primario visible por pantalla. - Los headlines de la web son copy iterable (¡se pueden testear A/B, obvio!) — no son tagline oficial; la marca sigue sin tagline. - Formularios: campos grandes (radio 12, foco menta), sin asteriscos agresivos; el mockup no tiene backend (conectar Formspree/API cuando exista dominio). - Accesibilidad: pares AA del §2, foco visible, alt en toda imagen. SEO básico: title + meta description + OG image con el matraz. Performance: preconnect de fuentes, imágenes WebP < 300 KB, lazy loading; sin librerías salvo necesidad real. - La web hereda TODO de `assets/ab-tokens.css` — si un valor no está en tokens, no entra a la web. ## 10. Reglas duras (resumen imperativo para IAs) 1. Fondo crema `#FFFDF8`, nunca blanco puro de página ni fondos oscuros (salvo lámina de cierre o card negativa puntual en tinta). 2. Solo Fraunces (titulares) y Figtree (todo lo demás). Ninguna otra fuente. 3. Solo colores de la tabla de tokens. Rosa máximo 1 vez por pieza. 4. Logo desde `assets/`, nunca redibujado ni recoloreado. 5. Bullets cuadrados menta; nunca flechas ni emojis como bullets. 6. Sin sombras, gradientes, brillos ni esquinas mixtas. 7. Números en tabular-nums; datos siempre con contexto (período, fuente o base n). 8. Tono: tú, directo, simple; sin tagline; sin promesas absolutas. 9. Si la pieza necesita algo que este archivo no resuelve: proponerlo como "variante B", no improvisar en silencio. ## 11. Mapa de archivos ``` ab-agency/ ├── CLAUDE.md ← instrucciones para sesiones de IA en este repo ├── MEMORIA.md ← histórico y decisiones del proyecto ├── Design system/ │ ├── BRAND.md ← este archivo (contexto de marca para IAs) │ ├── manual-agencia-ab.html ← manual navegable (para humanos) │ ├── plantilla-deck.html ← base para toda presentación nueva │ ├── plantilla-dashboard.html ← dashboard reporte simple (bloques curados desde Sheet CSV) │ ├── plantilla-dashboard-pro.html ← explorador analítico (datos diarios, filtros y comparaciones) │ └── assets/ │ ├── ab-tokens.css / ab-tokens.json │ ├── ab-matraz-*.svg ← logo (5 versiones) │ └── ab-familia-instrumentos.svg ├── Propuestas/ ← propuestas comerciales └── Documentos legales/ ``` ## 12. Bloque de instrucciones para pegar a una IA ``` Eres el equipo de diseño de Agencia AB. Antes de crear cualquier pieza, aplica su marca: tipografías Fraunces (titulares, énfasis en itálica verde #0A7A4C) y Figtree (todo lo demás); fondo crema #FFFDF8, texto tinta #26221B, acento menta #0FBE73 usado con disciplina (regla 90/10), rosa #F2779A solo UNA vez por pieza para marcar lo que ganó o cambió. Cards blancas, borde #EFE9DE, radio 12-18px, sin sombras ni gradientes. Bullets cuadrados menta. Tono: de tú, directo, simple, con datos en contexto; sin tagline. Gráficos: una serie protagonista en menta, contexto en #E2F8ED, el dato clave en rosa como texto. El logo es el "matraz A/B" (usar SVGs provistos, no redibujar). Si algo no está definido en BRAND.md, propónlo como "variante B" antes de aplicarlo. ```