# Rutas de stack

> El criterio de diseño es el mismo en las cuatro rutas. Sólo cambia el empaque.
> Se elige stack **después** de aprobar copy y dirección de arte, nunca antes.

---

## Cómo elegir

| Situación | Ruta |
|---|---|
| Cliente sin sitio, quiere algo rápido y controlado | **HTML/CSS/JS puro** |
| Cliente necesita blog, o va a editar contenido solo | **WordPress** |
| Ya tienes el proyecto en Oxygen | **Oxygen** |
| El cliente está en el ecosistema GHL (CRM + embudos) | **GHL** |

**Por defecto: HTML/CSS/JS.** Es portable, rápido y no depende de nadie. Las demás
son opcionales según lo que el proyecto realmente requiera.

---

## 1. HTML / CSS / JS portable

La salida principal.

- HTML semántico
- CSS modular con variables (custom properties) para los tokens
- JavaScript mínimo, sin framework salvo que el proyecto lo justifique
- **Encapsular los estilos bajo una clase raíz específica** del proyecto, para que
  el bloque se pueda pegar en cualquier lado sin colisionar
- Mobile-first
- Un solo archivo cuando es un bloque; separados cuando es un sitio

```
proyecto/
├── index.html
├── assets/
│   ├── css/estilos.css
│   ├── js/main.js
│   └── img/
└── README.md          ← notas de implementación y QA
```

---

## 2. WordPress — tema Med Toledo Kreator

**→ Detalle completo en `wordpress.md`.** Abrirlo antes de construir.

Usar cuando el cliente va a editar contenido por su cuenta, necesita blog, o ya
está en el ecosistema WordPress.

La arquitectura en una frase:

> **Header y footer se definen UNA vez para todo el sitio. Cada página es una
> plantilla propia que hereda esos globales.**

- Tema propio y standalone: `medtoledo-kreator.zip`
- `header.php` y `footer.php` = secciones globales, se tocan una sola vez
- Una plantilla por página en `page-templates/`
- Landings y diseño custom → `pagina-personalizada.php` (canvas en blanco,
  sin `wpautop`)
- Publicación vía REST API, siempre en `draft` primero
- **Credenciales en variables de entorno** (`WP_URL`, `WP_USER`,
  `WP_APP_PASSWORD`), nunca en un archivo del proyecto
- Verificar el ping antes de trabajar: `GET {sitio}/wp-json/mdk/v1/ping`
- Para el registro operativo de cada sitio, encadenar con `webkreator-medtoledo`

---

## 3. Oxygen

- El HTML/CSS aprobado se pega en un Code Block, o se convierte a estructura
  nativa según lo que pida el proyecto
- Encapsular estilos bajo clase raíz para no contaminar el resto del sitio
- Encadenar con `webkreator-medtoledo` para el detalle de la conversión

---

## 4. GoHighLevel

- Bloques HTML/CSS pegables en secciones de GHL
- Cuidado con los estilos globales de GHL: encapsular todo bajo clase raíz
- Los formularios usan los nativos de GHL para que el lead entre al CRM
- Nada de JavaScript que pelee con el constructor

---

## Reglas comunes a las cuatro

1. **Sin fuentes, íconos, imágenes ni claims sin autorización.**
2. **Móvil declarado por sección**, no asumido.
3. **CTA mínimo 48px** de alto.
4. **`min-h-dvh` en vez de `100vh`.**
5. **Contraste AA** en todo texto, incluido el que va sobre imágenes.
6. **`prefers-reduced-motion`** en toda animación.
7. **El gate de `gate-preflight.md` se corre igual**, sin importar la ruta.

---

## Entrega por ruta

| Ruta | Se entrega |
|---|---|
| HTML/CSS/JS | Carpeta completa + README de implementación |
| WordPress | Bloque o plantilla + pasos de instalación |
| Oxygen | Código para Code Block + notas de clases |
| GHL | Bloques por sección + instrucciones de pegado |

En las cuatro: wireframe aprobado, activos aprobados, notas SEO/AEO, tabla del
gate llena, y checklist de QA móvil, visual, accesibilidad, rendimiento y conversión.
