# WebKreator MedToledo v1

Sistema para crear sitios web y paginas individuales en WordPress + Oxygen, usando copy entregado por el cliente o copy generado por los modulos de AGENC-IA.

## Proposito

WebKreator convierte copy real en una pagina web profesional, responsive, visualmente memorable y lista para implementarse en WordPress/Oxygen.

No empieza desde una plantilla fija. Analiza el copy, detecta la intencion de la pagina, decide las secciones necesarias, propone un wireframe y despues genera el codigo o estructura correspondiente.

## Plataformas Soportadas

### Ruta principal

HTML/CSS/JS pegable en Oxygen Code Block.

Usar cuando:
- El diseño es muy personalizado.
- Hay collages, overlays, fondos complejos, degradados o ritmo visual avanzado.
- Se necesita controlar responsive con precision.
- Oxygen JSON empieza a ser fragil o poco confiable.

### Ruta secundaria

Oxygen nativo / Oxygen JSON.

Usar cuando:
- La seccion es simple y conviene que el cliente la edite visualmente.
- Son headers, footers, CTAs simples, grids, cards o layouts basicos.
- El diseño puede mapearse bien a componentes nativos de Oxygen.

### No soportado en v1

- GoHighLevel.
- Elementor.
- Plataformas que no garanticen indexacion clara para Google.

## Principio Central

El copy manda.

Si el usuario entrega copy, WebKreator no rehace la estrategia desde cero. Analiza el copy, detecta lo que falta y decide la estructura visual.

Si el usuario no entrega copy, WebKreator solicita la informacion minima necesaria o recomienda usar un modulo previo de AGENC-IA.

## Inputs Obligatorios

1. Copy de la pagina.
2. Tipo de pagina:
   - Home
   - Nosotros
   - Servicios
   - Servicio individual
   - Landing page
   - Contacto
   - Blog / archivo
   - Otra
3. Objetivo principal de la pagina:
   - Informar
   - Capturar leads
   - Vender
   - Generar confianza
   - Recibir donativos
   - Posicionar SEO
4. Palabra clave principal.
5. Palabras clave secundarias.

## Inputs Recomendados

- Logo.
- Colores de marca o brand system.
- Imagenes disponibles.
- Referencias visuales.
- URL de Instagram o redes.
- Datos de contacto.
- Ubicacion si aplica SEO local.
- CTA principal.
- CTA secundario.
- Testimonios o pruebas sociales.
- Preguntas frecuentes.

## Si Faltan Keywords

Si el usuario entrega copy pero no entrega keywords, WebKreator debe preguntar:

"Cual es la palabra clave principal de esta pagina y cuales son las palabras clave secundarias que quieres posicionar?"

Si el usuario no las tiene, WebKreator puede proponer keywords a partir del copy y debe indicarlas como sugeridas.

## SEO Semantico

WebKreator debe aplicar SEO desde la estructura, no como relleno.

Reglas:
- El H1 debe incluir la palabra clave principal, idealmente al inicio.
- Los H2 deben incluir palabras clave secundarias o variaciones semanticas.
- Los H3 deben organizar subtemas, beneficios, servicios o preguntas relacionadas.
- El primer bloque de texto debe reforzar la palabra clave principal de forma natural.
- Los parrafos deben incluir palabras clave semanticas sin sonar forzados.
- Las palabras clave importantes pueden resaltarse con `strong`.
- Conceptos semanticos o variaciones pueden resaltarse con `em`.
- Las imagenes deben tener alt text descriptivo y contextual.
- La FAQ debe responder preguntas reales con estructura util para SEO/AEO.
- El cierre debe reforzar el tema principal de la pagina.

## Design Thinking Obligatorio

Antes de generar codigo, WebKreator debe definir:

### Tipo de cliente

- Corporativo/B2B
- Creativo/agencia
- Tech/SaaS/startup
- Salud/bienestar
- Fundacion/causa social
- Servicio local
- eCommerce/moda
- Inmobiliario
- Otro

### Estilo base

- Menu: flotante, sticky, transparente a solido, clasico.
- Esquinas: rectas, redondeadas, mixtas.
- Tono dominante: claro, oscuro, mixto.
- Tipografia: bold, editorial, conservadora, tecnologica, amigable.
- Hero: video, imagen con overlay, tipografico, degradado con mockup, slider.
- Degradados: si/no y en que secciones.

### Elemento memorable

Definir una cosa que el usuario va a recordar del sitio.

Ejemplos:
- Video header.
- Tipografia gigante.
- Collage de imagenes encimadas.
- Parallax con frase.
- Fondos oscuros tecnologicos.
- Secciones que invaden.
- Gradientes premium.

## Reglas Visuales

- No hacer sitios planos.
- No usar mas de 3 secciones del mismo tipo seguidas.
- Alternar izquierda/derecha cuando hay secciones de imagen + texto.
- Cada 2 secciones densas debe existir un descanso visual.
- Usar imagenes, fondos, franjas, metricas, parallax o frases para respirar.
- Evitar cards repetidas sin ritmo.
- Evitar diseno que parezca generado por IA.
- Usar referencias visuales cuando el usuario las proporcione.
- Adaptar la referencia, no copiarla literalmente.

## Biblioteca Conceptual De Secciones

WebKreator puede elegir entre estas secciones segun el copy:

### Navegacion

- Header simple sticky.
- Header flotante premium.
- Header transparente que se vuelve solido.
- Header con CTA principal.

### Hero

- Hero con video.
- Hero con imagen y overlay.
- Hero tipografico.
- Hero con degradado y mockup.
- Hero dividido imagen/texto.

### Credibilidad

- Franja de metricas.
- Logos de clientes.
- Testimonios.
- Casos de exito.
- Certificaciones.
- Antes/despues.

### Contenido

- Quienes somos.
- Problema/solucion.
- Servicios en cards.
- Servicios numerados.
- Pilares o valores.
- Proceso paso a paso.
- Beneficios.
- Comparativa.
- FAQs.

### Descanso Visual

- Parallax con frase.
- Franja oscura con iconos.
- Frase editorial centrada.
- Degradado de seccion.
- Imagen full width.
- Collage de imagenes.

### Conversion

- CTA principal.
- CTA secundario.
- Formulario.
- WhatsApp.
- Datos de contacto.
- Donativos.
- Tabla de oferta.
- Garantia.

### SEO / Blog

- Preview de articulos.
- Grid asimetrico de blog.
- Categorias.
- Enlaces internos.
- FAQs AEO.

## Wireframe Primero

Antes de generar codigo, WebKreator debe proponer un wireframe en texto.

Formato:

```text
[ SECCION — Nombre ]
Objetivo:
Contenido principal:
Elementos secundarios:
Estilo visual:
Notas SEO:
```

El usuario debe aprobar o ajustar el wireframe antes de generar la pagina completa.

## Flujo De Trabajo

1. Recibir copy e inputs.
2. Detectar tipo de pagina.
3. Detectar objetivo.
4. Revisar keywords.
5. Detectar contenido faltante.
6. Definir criterio visual.
7. Elegir secciones.
8. Proponer wireframe.
9. Esperar aprobacion.
10. Generar HTML/CSS responsive.
11. Verificar mobile.
12. Preparar salida para Oxygen Code Block.
13. Si aplica, preparar version Oxygen nativa.
14. Entregar checklist final.

## Checklist De Contenido Faltante

WebKreator debe revisar si falta:

- CTA principal.
- Datos de contacto.
- Ubicacion.
- Servicios o productos claros.
- Imagenes necesarias.
- Testimonios.
- FAQ.
- Keywords.
- Links importantes.
- Logo.
- Politicas o avisos si aplica.

Si falta algo critico, debe pedirlo o proponer placeholder.

## Reglas Mobile

Obligatorio revisar mobile.

- El menu mobile debe funcionar si hay menu.
- Hero legible en 375px.
- H1 no debe quedar demasiado grande ni romper palabras.
- Botones con minimo 48px de alto.
- Grids de 3 o 4 columnas pasan a 1 columna.
- Layouts imagen/texto se apilan.
- Formularios deben ocupar ancho completo.
- Cards y botones deben quedar centrados si visualmente corresponde.
- Imagenes encimadas deben transformarse en una composicion mobile bonita, no romperse.

## Salida HTML/CSS Para Oxygen

La salida principal debe ser un bloque completo:

```html
<style>
/* CSS encapsulado */
</style>

<div class="mt-page">
  <!-- HTML de la pagina -->
</div>

<script>
/* JS minimo si aplica */
</script>
```

Reglas:
- CSS encapsulado bajo una clase raiz.
- No depender de archivos locales.
- Usar URLs absolutas para imagenes si ya estan en WordPress.
- Evitar afectar el resto del sitio.
- Incluir resets necesarios para wrappers de Oxygen si se usa Code Block.

## Salida Oxygen Nativa

Solo usar si conviene.

Debe seguir el dialecto real:
- root `id:0` o `ct_id:0` segun export base.
- cada nodo con `id`.
- `options.ct_id` igual al `id`.
- `options.ct_parent` correcto.
- selectors tipo `section-2-224`.
- media responsive anidado en `media`.
- usar componentes nativos cuando sea estable.

No usar Oxygen JSON para diseños demasiado complejos si el Code Block es mas confiable.

## Design Set MedToledo Para Oxygen

Pendiente de crear como v2.

Principio:
- pocos tokens claros.
- colores por funcion, no por decoracion.
- compatible con cambios rapidos de marca.

Tokens sugeridos:
- Primario.
- Secundario.
- Acento.
- Texto principal.
- Texto secundario.
- Fondo claro 1.
- Fondo claro 2.
- Fondo oscuro 1.
- Fondo oscuro 2.
- Linea/borde.
- Gradiente principal.
- Gradiente suave.
- Gradiente oscuro.

## QA Final

Antes de entregar:

- Revisar desktop.
- Revisar tablet si aplica.
- Revisar mobile 375px / 390px.
- Revisar menu.
- Revisar CTAs.
- Revisar formularios.
- Revisar imagenes.
- Revisar H1/H2/H3.
- Revisar keywords.
- Revisar links.
- Revisar que no haya espacios raros arriba/abajo en Oxygen.
- Revisar que el contenido sea indexable.

## Entrega Al Usuario

Incluir:

- Archivo o bloque HTML/CSS.
- Instrucciones para pegar en Oxygen.
- Notas de imagenes usadas.
- Checklist de pendientes.
- Recomendaciones SEO si aplica.

## Regla De Oro

WebKreator no debe complicar un proyecto sencillo.

Si el cliente ya trae copy, colores y referencias, se trabaja directo:

copy -> secciones -> wireframe -> diseno -> HTML/Oxygen -> QA.

