# EMPIROGY
## Manual de identidad visual y especificación web para Claude

Versión 1.0 · 16 septiembre 2026 · Idioma del documento: español

**Dirección definida:** elegancia editorial, tipografía serif fina, verde bosque, marfil y acentos verde neón. Fotografía de montañas, lagos y arquitectura contemporánea. Logotipo tipográfico sin hojas.

Este archivo es un manual operativo autocontenido, organizado en nueve capítulos. Markdown no tiene paginación fija: los capítulos equivalen a las secciones de un manual, no a nueve páginas de un PDF. Su finalidad es guiar el diseño y la implementación de una web real, no mostrar el manual como página pública.

## 01. Fundamentos y dirección de marca

### Identidad

| Campo | Definición |
|---|---|
| Nombre comercial | Empirogy |
| Escritura del logotipo | EMPIROGY |
| Dominios aportados por la propietaria | empirogy.com y empirogy.ca |
| Actividad | Consultoría de inteligencia artificial, automatizaciones, agentes, integraciones, sistemas a medida, ERP y desarrollo de SaaS |
| Personalidad | Estratégica, precisa, elegante, cercana y contemporánea |
| Idea central | Convertir procesos complejos en sistemas claros y útiles |
| Frase principal propuesta | Sistemas inteligentes. Nuevas posibilidades. |

La existencia de los dominios no implica que estén configurados para el despliegue. No cambiar DNS ni publicar por interpretar este documento.

### Decisiones de la propietaria que deben respetarse

1. La propuesta elegida es **Bosque editorial**, no la propuesta de logotipo sans serif neón.
2. La tipografía debe sentirse fina y elegante. Evitar letras pesadas, toscas o excesivamente gruesas.
3. Eliminar la hoja de la E y cualquier símbolo botánico del logotipo.
4. Conservar la atmósfera de montañas y arquitectura contemporánea.
5. Incorporar verde neón de forma visible y deliberada, junto al verde bosque.
6. Entregar una identidad que pueda aplicarse de manera consistente a una web y otras piezas.

### Relación con el manual CAMM

El documento CAMM aportado inspira el método: versiones de logo, jerarquía tipográfica, paleta base y de acentos, grilla, fotografía y aplicaciones. Retomar su orden, su aire visual y sus líneas finas. No copiar su logotipo, sus textos, sus caracteres ni su sistema de colores completo.

La naturaleza es una referencia estética y territorial. No implica certificación ambiental ni que el servicio de IA sea ecológico. Las propuestas de donaciones siguen siendo ideas, no compromisos aprobados.

### Criterio de diseño

La primera impresión debe combinar la sofisticación de una publicación editorial con la claridad de una consultora de tecnología. La frase de servicios debe aparecer en el primer bloque para que el paisaje no haga confundir la marca con hotelería, arquitectura o turismo.

## 02. Logotipo, monograma y versiones

### Logotipo principal

Construir **EMPIROGY** en mayúsculas con Cormorant Garamond Light, peso 300, espaciado inicial de `0.10em` y ajuste óptico posterior. Su E es una E serif convencional, con brazo central horizontal. No agregar hojas, ramas, gotas, circuitos ni adornos dentro de la letra.

La referencia generada es una exploración visual; no constituye un archivo maestro vectorial ni garantiza una reproducción exacta de una fuente. Para la implementación inicial usar texto real con la fuente indicada. Para producción del logo, convertir la composición aprobada a contornos SVG en una herramienta vectorial y revisar manualmente kerning y contornos.

### Monograma

Una **E** de la misma familia y peso, sin elementos decorativos. Usar en favicon, avatar y espacios pequeños. Si los trazos desaparecen en tamaños reducidos, usar peso 400 en el monograma pequeño, conservando el mismo dibujo tipográfico. No engrosar todo el logotipo por esa excepción.

| Versión | Fondo | Logo | Uso |
|---|---|---|---|
| Principal | Marfil o blanco | Bosque | Cabecera, propuestas y documentos |
| Invertida | Bosque o tinta | Marfil | Footer, portadas oscuras |
| Monocroma | Blanco | Negro | Impresión de una tinta |
| Acento | Neón | Tinta | Piezas puntuales, nunca versión principal permanente |

### Área de protección y tamaños

- Definir `H` como la altura visible de las mayúsculas del logo.
- Reservar como mínimo `0.5 × H` libre a cada lado. Para el monograma, `0.25 × H`.
- Logo digital: ancho objetivo 200–240 px en escritorio y 150–180 px en móvil; mínimo provisional 140 px, sujeto a prueba de legibilidad con el archivo final.
- Monograma: mínimo 24 px para interfaces. Favicon: versiones revisadas a 16, 32 y 48 px.
- Impresión: ancho inicial mínimo de 35 mm para el wordmark; probar sobre el soporte real.
- No estirar, inclinar, comprimir ni aplicar sombras, biseles o degradados al logo.
- No colocar sobre ramas, montañas o zonas fotográficas que atraviesen los trazos. Usar un panel sólido cuando sea necesario.
- No añadir ™ o ®: no se ha definido una indicación de registro.

## 03. Sistema cromático

### Paleta oficial de esta especificación

| Token | Nombre | HEX | Función |
|---|---|---|---|
| `--color-forest` | Bosque | `#123C32` | Logo, títulos, bloques oscuros y estructura |
| `--color-neon` | Neón | `#39FF88` | CTA principal, indicadores y acentos visibles |
| `--color-ivory` | Marfil | `#F6F5F0` | Fondo principal |
| `--color-white` | Blanco | `#FFFFFF` | Formularios y superficies puntuales |
| `--color-ink` | Tinta | `#202524` | Texto de lectura |
| `--color-mineral` | Mineral | `#BFCBC5` | Fondos secundarios y divisores decorativos |
| `--color-muted` | Texto secundario | `#53645D` | Descripciones y etiquetas sobre fondos claros |
| `--color-error` | Error funcional | `#A62929` | Errores de formulario, no color de marca |

**El neón elegido es verde, no amarillo limón.** No sustituir por `#C7F928`. No reemplazar el bosque por neón en todos los elementos.

### Proporciones orientativas

En superficies gráficas, sin contar fotografía: 65% marfil/blanco, 25% bosque/tinta, 7% mineral y 3% neón. Estas proporciones orientan la composición; no son una cuota de píxeles. El neón debe verse al abrir la página: al menos en el CTA principal del hero. Puede repetirse en el CTA final y en pequeños indicadores.

### Combinaciones de texto

| Fondo | Texto recomendado | Regla |
|---|---|---|
| Marfil o blanco | Tinta, bosque o texto secundario | Lectura principal |
| Bosque o tinta | Marfil, blanco o neón | Bloques oscuros |
| Neón | Tinta o bosque | Botones y etiquetas |
| Mineral | Tinta o bosque | Nunca texto blanco fino |

No usar neón para párrafos sobre blanco, ni texto blanco sobre neón. Mineral es un tono de superficie, no un color para texto pequeño sobre marfil. Los límites de campos e indicadores esenciales requieren contraste propio; usar `--color-muted`, no depender de un divisor tenue.

Los códigos HEX son el criterio digital, no los colores muestreados desde imágenes generadas. En impresión, un verde muy luminoso puede requerir tinta especial; no inventar un Pantone ni prometer equivalencia exacta con CMYK.

## 04. Tipografía y jerarquía

| Rol | Familia | Peso | Estilo |
|---|---|---|---|
| Logo y grandes títulos | Cormorant Garamond | 300 | Serif editorial, fina |
| H3 o títulos serif pequeños | Cormorant Garamond | 400 | Mejor presencia en tamaño pequeño |
| Cuerpo y navegación | Inter | 400 | Claro y legible |
| Botones y etiquetas funcionales | Inter | 500 | Jerarquía sin pesadez |
| Énfasis puntual en texto | Inter | 600 | Solo frases o palabras breves |

Autohospedar los archivos de fuente cuando estén disponibles y conservar sus licencias. Usar WOFF2 y `font-display: swap`. No fingir que una fuente está instalada si no lo está: documentar la ausencia. Fallback serif: Georgia; fallback sans: system-ui. No sustituir silenciosamente por una tipografía pesada.

| Nivel | Escritorio | Móvil | Interlineado | Ancho máximo |
|---|---|---|---|---|
| H1 | 64–88 px | 42–54 px | 1.04 | 14–17 caracteres por línea según composición |
| H2 | 44–60 px | 34–42 px | 1.10 | 22 caracteres aproximadamente |
| H3 | 28–36 px | 26–30 px | 1.20 | Según columna |
| Texto introductorio | 20 px | 18 px | 1.60 | 55 caracteres |
| Cuerpo | 17–18 px | 16–17 px | 1.65 | 65 caracteres |
| Navegación / botón | 14–16 px | 16 px | 1.30 | Sin truncar |
| Eyebrow / metadatos | 12–13 px | 12 px | 1.50 | Frases cortas |

Grandes títulos serif con espaciado normal o ligeramente negativo, nunca el tracking amplio del logo. Etiquetas cortas en mayúsculas pueden llevar `0.12em` de tracking. Párrafos en caja normal. No escribir párrafos completos en mayúsculas.

## 05. Grilla, fotografía y lenguaje gráfico

### Grilla

- Contenedor máximo: 1280 px, centrado.
- Márgenes laterales: 64 px en escritorio amplio, 32 px en tablet, 20 px en móvil.
- Escritorio desde 1024 px: 12 columnas, gap 32 px.
- Tablet de 768 a 1023 px: 8 columnas, gap 24 px.
- Móvil hasta 767 px: 4 columnas, gap 20 px; contenido mayoritariamente en una columna.
- Espaciado base: 4, 8, 12, 16, 24, 32, 48, 64, 96 y 128 px.
- Separación entre secciones: 96 px escritorio, 72 px tablet, 56 px móvil.
- Divisores: 1 px, sólidos, mineral sobre claro y marfil al 20% sobre oscuro. Son decorativos.
- Radios: 0–4 px. Formularios hasta 4 px. Evitar que toda la web parezca una colección de tarjetas redondeadas.
- Sombras: ausentes en la estructura; sutiles solo en menús flotantes u otros elementos que lo requieran.

### Dirección fotográfica

Montañas, bosques, lagos, niebla suave y arquitectura de vidrio o concreto. Composición amplia, luz natural, colores fríos/neutros y detalle realista. Usar paisaje como atmósfera y acompañarlo de lenguaje claro sobre sistemas e IA.

No son imágenes de una oficina real de Empirogy ni de proyectos realizados. No identificarlas como una ubicación concreta sin comprobarlo. Evitar robots, cerebros, manos holográficas, circuitos luminosos, estética gamer y bancos de fotos de ejecutivos genéricos.

Hero de escritorio: imagen horizontal 4:3 o 3:2 dentro de una composición dividida. Reservar el texto principal en marfil sólido. En móvil: texto primero, imagen después, recorte 4:3 y punto focal adaptado para conservar paisaje y arquitectura.

Usar WebP o AVIF con versiones responsivas; cargar de forma diferida las imágenes bajo el primer bloque. Definir dimensiones para evitar saltos. La fotografía principal puede tener prioridad de carga. No descargar ni reutilizar imágenes sin derecho de uso.

Las imágenes anteriores son referencias de dirección artística. No usar una captura del board como fondo, logo, página completa ni interfaz. Reconstruir los componentes en HTML/CSS y usar fotografías separadas. Si no se aportan fotos definitivas, dejar un recurso provisional claramente señalado en la documentación de desarrollo.

### Iconos y motivos

Iconos lineales de una sola familia, trazo 1.5 px a tamaño 24 px, formas sencillas. Conexiones entre nodos, módulos o líneas pueden ilustrar integraciones de forma discreta. Evitar hojas, gotas y símbolos de reciclaje en la identidad principal. No añadir patrones detrás de textos de lectura.

## 06. Arquitectura web y contenido propuesto

### Alcance inicial

Una página principal completa, responsive y con navegación por anclas. Preparar contenido para futura traducción ES/EN, pero mostrar selector solo cuando ambas versiones existan. Español es el idioma inicial de esta especificación; no inferir idioma a partir del dominio. No asignar una estrategia de redirección o URL canónica entre .com y .ca sin definir cuál será el sitio principal.

### Orden de secciones

| Orden | ID | Contenido y composición |
|---|---|---|
| 1 | Cabecera | Logo, Servicios, Enfoque, Proceso, Contacto y CTA |
| 2 | `inicio` | Hero editorial dividido, texto claro y fotografía |
| 3 | `servicios` | Seis servicios en una grilla editorial con divisores |
| 4 | `enfoque` | Explicación del trabajo a medida, bloque bosque |
| 5 | `proceso` | Cuatro pasos numerados |
| 6 | `contacto` | Invitación a conversar y formulario |
| 7 | Footer | Logo, navegación y enlaces reales disponibles |

No publicar testimonios, marcas de clientes, proyectos, premios, estadísticas ni porcentajes de ahorro inventados. Una sección de casos se incorpora solo cuando existan casos documentados.

### Hero

- Eyebrow: `CONSULTORÍA IA · AUTOMATIZACIÓN · DESARROLLO`
- H1: `Sistemas inteligentes. Nuevas posibilidades.`
- Descripción: `Diseñamos automatizaciones, agentes de IA y software a medida para conectar tus herramientas y simplificar la operación de tu negocio.`
- CTA principal neón: `Conversemos sobre tu proyecto` → `#contacto`.
- CTA secundario: `Explorar servicios` → `#servicios`.
- Composición escritorio: texto 5 columnas, fotografía 7 columnas. En pantallas intermedias admitir 6/6 si mejora lectura.
- Altura por contenido, sin forzar 100vh ni cortar el texto en móviles.

### Servicios

Título: `Tecnología diseñada alrededor de tu negocio.`

| Servicio | Texto propuesto |
|---|---|
| Consultoría de IA | Identificamos oportunidades y definimos una hoja de ruta para aplicar inteligencia artificial a tus procesos. |
| Automatizaciones | Conectamos tareas y herramientas para reducir trabajo repetitivo y ordenar flujos operativos. |
| Agentes de IA | Diseñamos asistentes y agentes con funciones, permisos y puntos de supervisión definidos. |
| Integraciones | Conectamos plataformas y datos mediante APIs y flujos adaptados a tu operación. |
| Sistemas a medida y ERP | Diseñamos soluciones para centralizar información y coordinar procesos internos. |
| Desarrollo de SaaS | Convertimos una idea de software en un producto, desde su alcance inicial hasta su implementación. |

Presentación: tres columnas por dos filas en escritorio, dos columnas en tablet y una en móvil. Número pequeño, título, descripción y divisor. Evitar seis cajas con sombras e iconos gigantes.

### Enfoque

Título: `Primero entendemos tu operación. Después diseñamos el sistema.`

Texto: `Cada negocio tiene herramientas, personas y procesos distintos. Partimos de ese contexto para proponer una solución con un alcance claro, integraciones útiles y una experiencia sencilla de usar.`

Tres principios: `Claridad en el alcance`, `Sistemas conectados`, `Supervisión donde importa`.

Fondo bosque, título marfil y una línea neón corta. Texto de lectura en marfil, nunca verde tenue.

### Proceso

1. **Entender:** revisar necesidades, herramientas y puntos de fricción.
2. **Diseñar:** definir alcance, flujos, prioridades y criterios de éxito.
3. **Construir:** desarrollar, integrar y validar la solución acordada.
4. **Acompañar:** documentar y definir la entrega y el soporte según el proyecto.

No prometer soporte permanente, plazos ni precios que no estén acordados.

### Contacto

Título: `Conversemos sobre lo que quieres construir.`

Texto: `Cuéntanos qué proceso quieres mejorar o qué producto tienes en mente.`

Campos: nombre, email y descripción del proyecto obligatorios; empresa opcional. Botón: `Enviar consulta`. Etiquetas visibles, validación por campo y mensajes claros. No inventar dirección, teléfono, correo de recepción, disponibilidad ni calendario de reservas.

Un formulario no está terminado por mostrar una notificación: requiere destino real y manejo de errores. Si falta backend o proveedor, documentar la integración pendiente y no simular un envío exitoso. En una vista de desarrollo puede quedar deshabilitado con una explicación visible.

### Impacto y comunidad: bloque opcional, oculto inicialmente

La propietaria ha explorado donaciones, reforestación, agua o voluntariado. No se ha confirmado organización, monto, programa ni mecanismo. No publicar promesas como “un árbol por dólar”, contadores de impacto o mensajes de neutralidad ambiental.

Si se define un programa, el bloque deberá indicar organización, aporte, periodicidad, destino y evidencia. Tratarlo como contribución concreta. No presentarlo como compensación del agua o energía de la IA sin una metodología verificable.

## 07. Componentes, interacción y accesibilidad

### Cabecera y navegación

Altura orientativa 88 px escritorio y 72 px móvil; permitir crecimiento si el contenido lo exige. Fondo marfil, logo bosque, navegación Inter. En móvil, menú accesible con botón etiquetado, estado `aria-expanded`, cierre mediante Escape y gestión del foco. No mostrar un icono sin nombre accesible.

Si la cabecera es sticky, usar fondo opaco y establecer `scroll-margin-top` en los destinos de anclas. El contenido enfocado no debe quedar oculto.

### Botones

| Estado | CTA principal |
|---|---|
| Normal | Fondo neón `#39FF88`, texto tinta |
| Hover | Fondo `#2DE878`, texto tinta; sin brillo |
| Active | Fondo `#24D56D`, texto tinta |
| Focus | Contorno visible contrastado con el fondo, separación 3 px |
| Disabled | Superficie mineral, texto tinta, estado semántico deshabilitado |

Altura mínima de controles 48 px, padding horizontal 24 px, radio 2 px. CTA secundario como enlace subrayado o botón de borde bosque. Usar enlaces para navegación y botones para acciones. En móvil los CTA pueden ocupar todo el ancho.

### Formularios y feedback

- Etiquetas persistentes; placeholder solo como ejemplo adicional.
- Fuente de entrada al menos 16 px y altura mínima 48 px.
- Borde normal en texto secundario para que el campo sea perceptible.
- Error: texto explicativo, asociación con `aria-describedby` y estado `aria-invalid`; no depender solo del rojo.
- Envío: estado de progreso, prevención de duplicados y confirmación solo tras respuesta real del servidor.
- Mantener lo escrito si ocurre un error. No exponer claves del proveedor en el cliente.

### Accesibilidad

Objetivo de implementación: WCAG 2.2 AA; validar en la web construida, no asumir cumplimiento por este manual. Contraste de texto normal al menos 4.5:1; texto grande al menos 3:1; controles e indicadores esenciales al menos 3:1. Revisar también texto sobre fotografía.

Un H1, jerarquía de títulos coherente, landmarks semánticos, enlace de salto al contenido y navegación por teclado. Fotografía puramente decorativa con `alt=""`; imagen informativa con descripción útil y sin atribuirle una ubicación inventada. No insertar texto importante dentro de imágenes.

Probar zoom al 200%, reflujo a 320 px, foco visible, menú móvil, formulario y preferencia de movimiento reducido. El logo puede ser fino; los textos funcionales deben seguir siendo legibles.

### Movimiento

Transiciones de 160–220 ms para color y estados. Apariciones opcionales de 250–350 ms con desplazamiento máximo de 8 px. No parallax, cursor personalizado, scroll secuestrado, vídeo automático ni animaciones continuas. Con `prefers-reduced-motion`, quitar movimientos y scroll suave. Todo contenido debe ser visible aunque falle la animación.

## 08. Tokens y especificación técnica de implementación

El siguiente CSS es una base normativa del sistema visual, no una aplicación completa. Integrarlo al stack existente. No instalar un framework nuevo si el proyecto ya tiene uno adecuado.

```css
:root {
  --color-forest: #123c32;
  --color-neon: #39ff88;
  --color-neon-hover: #2de878;
  --color-neon-active: #24d56d;
  --color-ivory: #f6f5f0;
  --color-white: #ffffff;
  --color-ink: #202524;
  --color-mineral: #bfcbc5;
  --color-muted: #53645d;
  --color-error: #a62929;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --container: 1280px;
  --gutter: 20px;
  --section-space: 56px;
  --radius: 2px;
  --focus-color: var(--color-forest);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-ivory);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.container {
  width: min(calc(100% - 2 * var(--gutter)), var(--container));
  margin-inline: auto;
}
.section { padding-block: var(--section-space); }
.wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.10em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
h1, h2, h3 { font-family: var(--font-display); color: var(--color-forest); }
h1 { font-size: clamp(2.625rem, 5.8vw, 5.5rem); line-height: 1.04; font-weight: 300; }
h2 { font-size: clamp(2.125rem, 4vw, 3.75rem); line-height: 1.10; font-weight: 300; }
h3 { font-size: clamp(1.625rem, 2.5vw, 2.25rem); line-height: 1.20; font-weight: 400; }
p { max-width: 65ch; }
img { display: block; max-width: 100%; height: auto; }
.eyebrow { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-neon);
  color: var(--color-ink);
  font: 500 1rem/1.3 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease;
}
.button-primary:hover { background: var(--color-neon-hover); }
.button-primary:active { background: var(--color-neon-active); }
.button-primary:disabled { background: var(--color-mineral); cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 3px; }
.surface-dark {
  background: var(--color-forest);
  color: var(--color-ivory);
  --focus-color: var(--color-neon);
}
.surface-dark :is(h1, h2, h3) { color: var(--color-ivory); }
[id] { scroll-margin-top: 100px; }
@media (min-width: 768px) {
  :root { --gutter: 32px; --section-space: 72px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 64px; --section-space: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}
```

### Assets y organización propuesta

```text
public/
  brand/
    empirogy-wordmark-forest.svg
    empirogy-wordmark-ivory.svg
    empirogy-monogram.svg
    favicon.svg
  images/
    empirogy-mountain-architecture-hero.webp
  fonts/
    [archivos WOFF2 reales y licencias]
```

Estos nombres son una estructura propuesta; los archivos no se incluyen en este Markdown ni debe suponerse que existen. No enlazar rutas inexistentes en la versión entregada. Hasta contar con SVG revisados, usar el wordmark como texto accesible y el monograma tipográfico.

### Requisitos funcionales y de calidad

- Componentes separados para Header, Hero, Services, Approach, Process, Contact y Footer.
- Contenido separado de presentación para permitir traducción futura.
- Evitar dependencias grandes para iconos, animaciones o interacciones sencillas.
- No publicar datos ficticios para llenar huecos. Enumerar las integraciones pendientes en la documentación de entrega.
- Meta title propuesto: `Empirogy | IA, automatización y sistemas a medida`.
- Meta description propuesta: `Consultoría de inteligencia artificial, automatizaciones, agentes, integraciones, ERP y desarrollo de SaaS adaptados a tu negocio.`
- Configurar canonical, Open Graph y sitemap con el dominio de producción confirmado. No referenciar una imagen social inexistente.
- No añadir rastreadores, pagos, donaciones o captación de datos ajenos al formulario solicitado por defecto.
- Validar layout a 360, 768, 1024 y 1440 px, además de reflujo a 320 px. Corregir desbordamientos, cortes de títulos y recortes fotográficos.

## 09. Aplicaciones, control de consistencia y encargo para Claude

### Aplicaciones de marca

| Pieza | Tratamiento |
|---|---|
| Tarjeta | Frente marfil con logo bosque; reverso bosque con monograma marfil y una línea neón discreta |
| Propuesta comercial | Portada editorial, título serif fino, información Inter, fotografía panorámica y acento neón |
| Redes sociales | Alternar contenidos editoriales claros y fotografía; títulos legibles, logo consistente y neón en marcadores |
| Presentaciones | Una idea por slide, márgenes amplios, títulos serif, cuerpo Inter, diagramas simples y tablas legibles |
| Firma de correo | Nombre y cargo reales en Inter o fallback, wordmark discreto y enlaces verificados |

No convertir el sistema en una marca de bienestar, ecología o turismo. El contenido debe explicar tecnología y servicios; el paisaje aporta personalidad.

### Checklist de aceptación

- [ ] Nombre escrito Empirogy; wordmark EMPIROGY.
- [ ] Dirección Bosque editorial conservada.
- [ ] E convencional sin hoja en todas las aplicaciones.
- [ ] Cormorant Garamond Light en logo y grandes títulos; Inter en lectura e interfaces.
- [ ] Verde bosque `#123C32` y neón `#39FF88` presentes.
- [ ] CTA del primer bloque visible en neón con texto oscuro.
- [ ] Marfil, aire visual, divisores finos y jerarquía consistente.
- [ ] Montañas/arquitectura usadas como fotografía separada, no captura del board.
- [ ] Servicios de IA, automatización, agentes, integraciones, ERP y SaaS identificables.
- [ ] Sitio usable en móvil, teclado y movimiento reducido.
- [ ] Contraste comprobado en estados normales, hover, foco y errores.
- [ ] Enlaces reales, sin `href="#"` como acción final ni archivos rotos.
- [ ] Formulario conectado y verificado, o identificado como pendiente sin simular éxito.
- [ ] Sin testimonios, datos de clientes, ahorros o credenciales inventados.
- [ ] Sin promesas de donaciones o compensación ambiental no confirmadas.
- [ ] Código estructurado, assets existentes y decisiones pendientes documentadas.

### Instrucción lista para Claude / Claude Code

> Lee este manual completo y úsalo como fuente de verdad para construir la web de Empirogy. Implementa la dirección Bosque editorial: Cormorant Garamond Light para logo y grandes títulos, Inter para lectura, marfil y verde bosque como base y verde neón #39FF88 visible en los CTA. La E no tiene hojas. Conserva la fotografía de montañas y arquitectura como atmósfera y comunica claramente los servicios tecnológicos. Construye una web responsive y semántica con las secciones, textos, tokens y estados definidos aquí. No conviertas este Markdown en una página de documentación ni uses una imagen del board como interfaz. Revisa el proyecto existente antes de elegir herramientas. Si faltan fotos o vectores finales, implementa componentes reales y documenta los assets pendientes; nunca inventes archivos disponibles. No inventes clientes, métricas, credenciales, datos de contacto, programas ambientales ni envíos de formulario exitosos. Comprueba la web en escritorio y móvil y entrega los archivos editados, las verificaciones realizadas y los pendientes concretos. Preparar la web no autoriza publicar ni cambiar dominios.

### Prioridad y cambios futuros

Las decisiones explícitas posteriores de la propietaria prevalecen sobre este manual. Mientras no existan cambios, no sustituir la propuesta elegida por una estética genérica de SaaS, una tipografía gruesa o una paleta azul/violeta. Los valores de este documento prevalecen sobre variaciones de color o texto de las imágenes conceptuales anteriores.