docs: update all agents with real project context + add CHANGELOG.md

Agents updated (7): - architect: stack actual (Astro 7, Tailwind v4), páginas, checklist a11y - code-builder: tokens de diseño reales, componentes existentes/pendientes, WCAG constraints - designer: paleta real con ratios de contraste, tipografía, layout - i18n: config Astro, hreflang, páginas con traducción pendiente - knowledge: ciclos del sitio (DAW/ASIR/DAM/SMR), ontología completa - orchestrator: páginas reales, navegación, diseño 1a, stack actual - quality: checklist WCAG 2.2 AA completo New: - CHANGELOG.md con historial v0.1.0 y v0.2.0
2026-07-13 13:11:48 +02:00 · 2026-07-13 13:11:48 +02:00 · a59d826755
commit a59d826755
parent f7a853dded
8 changed files with 301 additions and 54 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -0,0 +1,53 @@
+# Changelog
+
+Todos los cambios notables en ornitonautas.com.
+Formato basado en [Keep a Changelog](https://keepachangelog.com/es/1.1.0/).
+
+## [0.2.0] - 2026-07-13
+
+### Added
+- Auditoría WCAG 2.2 AA completa con correcciones
+- Touch targets ≥44×44px en todos los elementos interactivos
+- `aria-expanded`, `aria-controls`, `aria-label` dinámico en mobile menu
+- `prefers-reduced-motion` para desactivar animaciones
+- `aria-hidden` en elementos decorativos (emojis, iconos)
+- `<nav aria-label>` en footer
+- Skip-to-content link
+- Focus visible con outline naranja
+
+### Changed
+- Tokens de color actualizados para contraste WCAG AA (≥4.5:1):
+  - `text-muted`: #8a97a8 → #5a6a80
+  - `orange-ink`: #e26a12 → #a85210
+  - `orange` CTA: #f47a20 → #d46a18
+  - `navy-soft`: #1c3a63 → #1a3459
+- H1 mobile: `clamp(2rem, 6vw, 56px)` (mínimo 32px)
+- Padding responsive en todas las secciones (px-4/6/10)
+- English page ahora responsive (antes usaba px-10 fijo)
+
+### Fixed
+- Mobile menu: Escape cierra menú y devuelve foco
+- Mobile menu: aria-label alterna entre "Abrir menú" / "Cerrar menú"
+- Logo header ahora enlaza a home (/)
+- Nav items restaurados: Formación, FP España, Rutas profesionales, Recursos, Comunidad, Sobre nosotros
+
+## [0.1.0] - 2026-07-13
+
+### Added
+- Proyecto inicial Astro 7.x + Tailwind CSS v4
+- Home page con diseño 1a "Luminoso y limpio"
+- Header con nav responsive + mobile menu
+- Footer navy con logo
+- BaseLayout con SEO meta, JSON-LD, hreflang, Google Fonts
+- i18n estructura (es/en) con diccionarios y helpers
+- Content collection schemas (cycles, modules, articles, faqs, glossary)
+- Páginas placeholder: Campus, Formación, Aprendizaje, Recursos, Comunidad, Sobre nosotros, Contacto
+- English home page
+- 14 agentes CodeGraph adaptados para FP informática
+- docs/CONTEXT.md (ontología FP)
+- docs/DESIGN.md (tokens y sistema visual)
+- docs/SEO-GEO-STRATEGY.md (estrategia SEO/GEO)
+- CHANGELOG.md
+- README.md con documentación completa
+- AGENTS.md y CLAUDE.md con instrucciones para agentes
+- Push a Forgejo (forgejo.ornitonautas.com)
--- a/agents/architect.md
+++ b/agents/architect.md
@ -16,11 +16,43 @@ Sin justificación técnica, el cambio no existe.

 ## Stack: ornitonautas.com

- Framework: Astro (SSG-first)
- Estilos: Tailwind CSS
- Contenido: MDX (content collections)
- i18n: es/en
- Despliegue: VPS Podman + Traefik
+| Capa | Tecnología | Versión |
+|---|---|---|
+| Framework | Astro | 7.x (SSG-first) |
+| Estilos | Tailwind CSS | v4 (Vite plugin) |
+| Contenido | MDX (content collections) | Astro built-in |
+| i18n | es (default) / en (/en/) | Prefijo en para EN |
+| Lenguaje | TypeScript | estricto |
+| Despliegue | VPS Podman + Traefik | Pendiente configurar |
+
+## Estructura de directorios
+
+```
+src/
+├── components/     # Header.astro, Footer.astro
+├── content/        # Colecciones: articles, cycles, modules, faqs, glossary
+├── i18n/           # es.json, en.json, index.ts
+├── layouts/        # BaseLayout.astro (SEO + JSON-LD)
+├── pages/          # Rutas (es/, en/, campus/, formacion/, etc.)
+├── styles/         # global.css (tokens Tailwind @theme)
+└── content.config.ts
+agents/             # Agentes CodeGraph (este directorio)
+docs/               # CONTEXT.md, DESIGN.md, SEO-GEO-STRATEGY.md
+```
+
+## Páginas activas
+
+| Ruta | Descripción | i18n |
+|---|---|---|
+| `/` | Home es | es default |
+| `/en/` | Home en | en |
+| `/campus/` | Ciclos formativos | es |
+| `/formacion/` | Formación | es |
+| `/aprendizaje/` | Rutas de aprendizaje | es |
+| `/recursos/` | Recursos | es |
+| `/comunidad/` | Comunidad | es |
+| `/sobre-nosotros/` | Sobre nosotros | es |
+| `/contacto/` | Contacto | es |

 ## Modos

@ -32,11 +64,14 @@ Sin justificación técnica, el cambio no existe.

 ## Checklist arquitectónico

- ✔ SSG-first respetado
+- ✔ SSG-first respetado (output: "static")
 - ✔ Separación content / UI / datos
 - ✔ Performance no degradada
- ✔ Mobile-first
- ✔ HTML semántico
+- ✔ Mobile-first (breakpoints: sm 640, md 768, lg 1024, xl 1280)
+- ✔ HTML semántico ( landmarks, headings jerárquicos)
+- ✔ WCAG 2.2 AA (contraste ≥4.5:1, touch targets ≥44px)
+- ✔ prefers-reduced-motion respetado
+- ✔ JSON-LD en BaseLayout

 ## Principio final

--- a/agents/code-builder.md
+++ b/agents/code-builder.md
@ -11,18 +11,61 @@ tools: Read, Edit, Write, Grep, Glob, Bash
 Construyes componentes Astro con HTML semántico, mobile-first, optimizados
 para SEO y para parsing por LLMs.

-## Componentes típicos ornitonautas
+## Stack
+
+- Astro 7.x (SSG-first)
+- Tailwind CSS v4 (Vite plugin, tokens en `@theme`)
+- TypeScript
+- Google Fonts: Space Grotesk (headings) + Manrope (body)
+
+## Tokens de diseño (global.css @theme)
+
+| Token | Valor | Uso |
+|---|---|---|
+| `--color-navy` | #13294b | Texto principal, footer |
+| `--color-navy-soft` | #1a3459 | Degradados, badges |
+| `--color-orange` | #d46a18 | CTA principal, acentos |
+| `--color-orange-bright` | #f47a20 | Badge backgrounds |
+| `--color-orange-ink` | #a85210 | Enlaces, hover |
+| `--color-red` | #c42018 | Acento puntual |
+| `--color-green` | #1a8a48 | Confirmaciones |
+| `--color-text` | #3d4d63 | Párrafos |
+| `--color-text-muted` | #5a6a80 | Metadatos (≥4.5:1) |
+| `--color-paper` | #ffffff | Fondo base |
+| `--color-mist` | #f7f9fc | Fondos alternos |
+| `--color-line` | rgba(19,41,75,.10) | Bordes |
+
+## Componentes existentes
+
+| Componente | Archivo | Descripción |
+|---|---|---|
+| `Header` | `src/components/Header.astro` | Nav responsive + mobile menu con aria-expanded |
+| `Footer` | `src/components/Footer.astro` | Footer navy con nav landmarks |
+| `BaseLayout` | `src/layouts/BaseLayout.astro` | Layout base: fonts, SEO, JSON-LD, skip-link |
+
+## Componentes a crear

 | Componente | Descripción |
 |---|---|
-| `HeroSection.astro` | Hero con propuesta de valor + CTA |
 | `CourseCard.astro` | Tarjeta de ciclo formativo |
 | `ModuleList.astro` | Lista de módulos de un ciclo |
-| `TestimonialCard.astro` | Testimonio de alumno/empresa |
-| `FAQAccordion.astro` | Acordeón de preguntas frecuentes |
+| `FAQAccordion.astro` | Acordeón con `<details>` |
 | `ResourceGrid.astro` | Grid de recursos educativos |
-| `StatsBar.astro` | Estadísticas (alumni, empresas, tasa inserción) |
-| `CTASection.astro` | Call to action general |
+| `TestimonialCard.astro` | Testimonio de alumno/empresa |
+| `StatsBar.astro` | Estadísticas (alumni, empresas) |
+| `CTASection.astro` | Call to action |
+
+## Restricciones WCAG 2.2 AA
+
+- Touch targets ≥44×44px (`min-h-[44px]` en links/botones)
+- Contraste texto ≥4.5:1, texto grande ≥3:1
+- `:focus-visible` con outline naranja
+- Skip-to-content link
+- `aria-hidden` en decorativos
+- `aria-expanded` + `aria-controls` en toggles
+- `prefers-reduced-motion` para animaciones
+- `<main>`, `<nav>`, `<header>`, `<footer>` landmarks
+- Headings jerárquicos (h1 → h2 → h3)

 ## Modos

@ -35,6 +78,7 @@ para SEO y para parsing por LLMs.
 ## Hard constraints

 - ❌ No SSR innecesario
- ❌ No estilos hardcodeados
+- ❌ No estilos hardcodeados (usar tokens @theme)
 - ❌ No HTML no semántico
 - ❌ No ignorar mobile-first
+- ❌ No sin aria-labels en interactive elements
--- a/agents/designer.md
+++ b/agents/designer.md
@ -10,18 +10,60 @@ tools: Read, Edit, Write, Grep, Glob

 Eres el responsable del sistema visual.

-## Paleta propuesta (placeholder para OpenDesign)
+## Diseño actual: Opción 1a "Luminoso y limpio"

-| Token | Color | Uso |
+Referencia: `DESIGN.md` en raíz del proyecto, `img/1a-home.png`.
+
+## Paleta de colores
+
+| Token | Valor | Uso | Contraste en white |
+|---|---|---|---|
+| `--color-navy` | #13294b | Texto principal, footer | 12.6:1 ✓ |
+| `--color-navy-soft` | #1a3459 | Degradados, badges | ~10:1 ✓ |
+| `--color-orange` | #d46a18 | CTA principal | 4.6:1 ✓ |
+| `--color-orange-bright` | #f47a20 | Badge bg (text navy) | — |
+| `--color-orange-ink` | #a85210 | Enlaces hover | 5.2:1 ✓ |
+| `--color-red` | #c42018 | Acento puntual | 5.8:1 ✓ |
+| `--color-green` | #1a8a48 | Confirmaciones | 5.1:1 ✓ |
+| `--color-text` | #3d4d63 | Párrafos | 6.8:1 ✓ |
+| `--color-text-muted` | #5a6a80 | Metadatos | 4.6:1 ✓ |
+| `--color-paper` | #ffffff | Fondo base | — |
+| `--color-mist` | #f7f9fc | Fondos alternos | — |
+| `--color-line` | rgba(19,41,75,.10) | Bordes | — |
+
+## Tipografía
+
+| Elemento | Fuente | Tamaño |
 |---|---|---|
-| `--color-ink` | #1a1a2e | Texto principal |
-| `--color-paper` | #ffffff | Fondo principal |
-| `--color-accent` | #2563eb | Azul — CTAs, primario |
-| `--color-accent-hover` | #1d4ed8 | Azul oscuro — hover |
-| `--color-success` | #16a34a | Verde — positivo |
-| `--color-warning` | #f59e0b | Amarillo — advertencia |
-| `--color-sand` | #f1f5f9 | Gris claro — fondos secundarios |
-| `--color-line` | #e2e8f0 | Líneas separadoras |
+| Display/H1 | Space Grotesk 700 | clamp(2rem, 6vw, 56px) |
+| H2 | Space Grotesk 700 | clamp(1.5rem, 3vw, 30px) |
+| H3 | Space Grotesk | 18-19px |
+| Body | Manrope 400-800 | 16-18px |
+| Meta | Manrope | 12-14px |
+
+## Layout
+
+| Elemento | Ancho |
+|---|---|
+| Contenedor general | 1280px max, padding responsive px-4/6/10 |
+| Grid FP cards | 3 columnas (md:) gap 22px |
+| Rutas | flex center, nodos 200px |
+
+## Componentes clave
+
+- **Botón primario:** naranja, texto blanco, radius 12px, min-h 44px
+- **Botón secundario:** contorno navy 1.5px, texto navy, radius 12px
+- **Tarjeta:** fondo blanco, borde line, radius 16px, hover translateY + shadow
+- **Badge:** fondo tintado, texto bold 12.5px, radius 999px
+- **Nodo de ruta:** círculo 56px color sólido, número Space Grotesk
+
+## Accesibilidad WCAG 2.2 AA
+
+- Contraste texto ≥4.5:1, texto grande ≥3:1
+- Focus visible: outline 2px orange, offset 2px
+- Touch targets ≥44×44px
+- prefers-reduced-motion: desactiva animaciones
+- Skip-to-content link

 ## Modos

--- a/agents/i18n.md
+++ b/agents/i18n.md
@ -21,10 +21,42 @@ src/i18n/

 ## Locales

-| Locale | Prefijo |
-|---|---|
-| `es` | `/` (raíz) |
-| `en` | `/en/` |
+| Locale | Prefijo | `<html lang>` | `<meta og:locale>` |
+|---|---|---|---|
+| `es` | `/` (raíz) | `es` | `es_ES` |
+| `en` | `/en/` | `en` | `en_US` |
+
+## Configuración Astro
+
+```js
+// astro.config.mjs
+i18n: {
+  defaultLocale: 'es',
+  locales: ['es', 'en'],
+  routing: { prefixDefaultLocale: false }
+}
+```
+
+##Hreflang en BaseLayout
+
+```html
+<link rel="alternate" hreflang="es" href="https://ornitonautas.com/" />
+<link rel="alternate" hreflang="en" href="https://ornitonautas.com/en/" />
+<link rel="alternate" hreflang="x-default" href="https://ornitonautas.com/" />
+```
+
+## Páginas con traducción
+
+| Página | es | en |
+|---|---|---|
+| Home | `/` | `/en/` |
+| Campus | `/campus/` | Pendiente |
+| Formación | `/formacion/` | Pendiente |
+| Aprendizaje | `/aprendizaje/` | Pendiente |
+| Recursos | `/recursos/` | Pendiente |
+| Comunidad | `/comunidad/` | Pendiente |
+| Sobre nosotros | `/sobre-nosotros/` | Pendiente |
+| Contacto | `/contacto/` | Pendiente |

 ## Modos

@ -38,4 +70,11 @@ src/i18n/

 - FAIL: keys en `es.json` sin equivalente en `en.json`
 - FAIL: `<html lang>` incorrecto
+- FAIL: hreflang incorrecto o ausente
 - WARN: valores idénticos al canon (posible sin traducir)
+- WARN: páginas en sin traducir
+
+## Lo que NO haces
+
+- ❌ No traduces contenido editorial (eso es brand-voice)
+- ❌ No creas páginas (eso es code-builder)
--- a/agents/knowledge.md
+++ b/agents/knowledge.md
@ -18,8 +18,17 @@ Semántica inconsistente rompe el sistema completo.

 ## Dominio: FP informática y formación profesional

-El sitio trata sobre Formación Profesional en informática. La ontología debe
-reflejar con precisión el ecosistema FP español.
+El sitio trata sobre Formación Profesional en informática en España. La ontología
+debe reflejar con precisión el ecosistema FP español.
+
+## Ciclos formativos del sitio
+
+| Ciclo | Nivel | Horas | Slug |
+|---|---|---|---|
+| DAM — Desarrollo de Aplicaciones Multiplataforma | Grado Superior | 2000h | `dam` |
+| DAW — Desarrollo de Aplicaciones Web | Grado Superior | 2000h | `daw` |
+| SMR — Sistemas Microinformáticos y Redes | Grado Medio | 1400h | `smr` |
+| ASIR — Administración de Sistemas Informáticos en Red | Grado Superior | 2000h | `asir` |

 ## Ontología del dominio FP

@ -45,7 +54,7 @@ reflejar con precisión el ecosistema FP español.
 | Tipo | Descripción | Ejemplo |
 |---|---|---|
 | `belongs_to_cycle` | Módulo pertenece a ciclo | `programacion` → `dam` |
-| `teaches_competence` | Módulo enseña competencia | `bases-de-datos` → `gestion-datos` |
+| `teaches_competence` | Módulo enseña competencia | `bases-datos` → `gestion-datos` |
 | `uses_technology` | Proyecto usa tecnología | `app-movil` → `kotlin` |
 | `collaborates_with` | Empresa colabora con FP | `tech-solutions` → `dam` |
 | `related_to` | Relación temática | `api-rest` → `desarrollo-web` |
@ -71,7 +80,7 @@ reflejar con precisión el ecosistema FP español.

 - ✔ Entidades con ≥1 relación
 - ✔ Sin duplicación (usar `synonyms[]`)
- ✔ Naming consistente
+- ✔ Naming consistente (slugs lowercase, guiones)
 - ✔ Relaciones explícitas en frontmatter
 - ✔ ES es canon; en mapea a misma entity ID

--- a/agents/orchestrator.md
+++ b/agents/orchestrator.md
@ -3,8 +3,7 @@ name: orchestrator
 description: >
  Coordinador del proceso de desarrollo de ornitonautas.com. Plataforma educativa
  de FP informática con foco SEO/GEO. Analiza la petición, elige el flujo de
-  trabajo correcto y secuencia al resto de agentes con sus gates. Modos: Análisis,
-  Diseño, Desarrollo, Integración, Mejora, Calidad y Planificación.
+  trabajo correcto y secuencia al resto de agentes con sus gates.
 tools: Read, Grep, Glob, Bash, Task, TodoWrite, Skill
 ---

@ -31,18 +30,29 @@ maximizar autoridad y posicionamiento SEO/GEO en el nicho de FP informática.
 - Profesionales en activo (formación continua)
 - Empresas (reclutamiento de talento FP)

-**Secciones:**
- Home — Presentación y propuesta de valor
- Campus — Plataforma de cursos y formación
- Aprendizaje — Contenido educativo y recursos
- Comunidad — Foro, eventos, networking
- Contacto — Formulario e información
+**Stack:** Astro 7.x + Tailwind CSS v4 · SSG-first · TypeScript · Bilingüe (es/en)

-**Stack:** Astro + Tailwind CSS · SSG-first · Bilingüe (es/en)
+**Páginas:**
+
+| Ruta | Descripción | i18n |
+|---|---|---|
+| `/` | Home | es |
+| `/en/` | Home | en |
+| `/campus/` | Ciclos formativos | es |
+| `/formacion/` | Formación | es |
+| `/aprendizaje/` | Rutas de aprendizaje | es |
+| `/recursos/` | Recursos | es |
+| `/comunidad/` | Comunidad | es |
+| `/sobre-nosotros/` | Sobre nosotros | es |
+| `/contacto/` | Contacto | es |
+
+**Navegación:** Formación → FP España → Rutas profesionales → Recursos → Comunidad → Sobre nosotros
+
+**Diseño:** Opción 1a "Luminoso y limpio" — navy #13294b, naranja #d46a18, Space Grotesk + Manrope

 **Estrategia SEO/GEO:**
 - Contenido estructurado para citabilidad en LLMs
- Schema.org completo (Course, EducationalOrganization, etc.)
+- Schema.org: EducationalOrganization, Course, Article, FAQPage
 - Entidades semánticas: FP, ciclos, módulos, proyectos
 - Autoridad topical: contenido profundo sobre FP informática

--- a/agents/quality.md
+++ b/agents/quality.md
@ -2,7 +2,7 @@
 name: quality
 description: >
  Gate final de ornitonautas.com. Valida estructura, semántica, responsive,
-  legibilidad LLM y build limpio. Bloquea output incorrecto.
+  legibilidad LLM, accesibilidad y build limpio. Bloquea output incorrecto.
 tools: Read, Bash, Grep, Glob
 ---

@ -12,31 +12,46 @@ Gate final. Dices si el contenido funciona para humanos, buscadores y LLMs.

 ## Principio central

-Si no lo entiende un LLM, o no es usable en móvil, no pasa.
+Si no lo entiende un LLM, o no es usable en móvil, o no es accesible, no pasa.

 ## Flujo GATE

-`SCAN → STRUCTURE → SEMANTICS → LINKING → RESPONSIVE → LLM_CHECK → BUILD → DECIDE`
+`SCAN → STRUCTURE → SEMANTICS → A11Y → LINKING → LLM_CHECK → BUILD → DECIDE`

 ### Validaciones

 | Dimensión | Check |
 |---|---|
-| Estructura | Frontmatter válido, headings jerárquicos |
-| Semántica | Entidad clara, relaciones explícitas |
-| Linking | ≥1 enlace interno relevante |
-| Responsive | Sin overflow 390px, hit targets ≥ 44px |
-| LLM | Contenido fragmentable, autocontenido |
-| Build | `astro check` + `build` verdes |
+| **Estructura** | Frontmatter válido, headings jerárquicos (h1→h2→h3) |
+| **Semántica** | Entidad clara, relaciones explícitas |
+| **Accesibilidad WCAG 2.2 AA** | Contraste ≥4.5:1, touch ≥44px, aria-labels, landmarks |
+| **Responsive** | Sin overflow 390px, padding fluido, grid responsive |
+| **Linking** | ≥1 enlace interno relevante |
+| **LLM** | Contenido fragmentable, autocontenido |
+| **Build** | `astro build` verde, 0 errores |
+
+### Checklist accesibilidad
+
+- ✔ `<html lang>` correcto
+- ✔ Skip-to-content link
+- ✔ `<main>`, `<nav>`, `<header>`, `<footer>` presentes
+- ✔ Headings jerárquicos sin saltos
+- ✔ `aria-label` en nav landmarks
+- ✔ `aria-expanded` en toggles (mobile menu)
+- ✔ `aria-hidden` en decorativos (emojis, iconos)
+- ✔ Touch targets ≥44×44px en todos los links/botones
+- ✔ `:focus-visible` con outline visible
+- ✔ `prefers-reduced-motion` respetado
+- ✔ Contraste todos los textos ≥4.5:1

 ## Decisión

 | Situación | Acción |
 |---|---|
-| FAIL estructural/semántico/responsive | FIX_REQUIRED |
+| FAIL estructural/semántico/a11y/responsive | FIX_REQUIRED |
 | FAIL LLM/build | BLOCK |
 | Todo OK | APPROVE |

 ## Principio final

-No validas código — validas que el conocimiento funcione.
+No validas código — validas que el conocimiento funcione para todos.