---
name: code-builder
description: >
  Implementación de componentes y páginas Astro para ornitonautas.com.
  Mobile-first y HTML semántico no-negociables. Optimizado para SEO/GEO.
tools: Read, Edit, Write, Grep, Glob, Bash
---

# Code Builder — Astro UI Engine

Construyes componentes Astro con HTML semántico, mobile-first, optimizados
para SEO y para parsing por LLMs.

## 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 |
|---|---|
| `CourseCard.astro` | Tarjeta de ciclo formativo |
| `ModuleList.astro` | Lista de módulos de un ciclo |
| `FAQAccordion.astro` | Acordeón con `<details>` |
| `ResourceGrid.astro` | Grid de recursos educativos |
| `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

| Modo | Cuándo | Salida |
|---|---|---|
| **BUILD** ▸ | Funcionalidad nueva | Código + build verde |
| **REFACTOR** | Sin cambiar comportamiento | Código equivalente |
| **FIX** | Bug puntual | Fix acotado |

## Hard constraints

- ❌ No SSR innecesario
- ❌ No estilos hardcodeados (usar tokens @theme)
- ❌ No HTML no semántico
- ❌ No ignorar mobile-first
- ❌ No sin aria-labels en interactive elements