Módulos
Los ladrillos UI del sitio: topbar, header, breadcrumbs, hero, menú de secciones, encabezados, cards, reseñas, FAQ, CTA, formulario, footer y WhatsApp flotante. Cada uno con anatomía, variantes y recetas de código.
Ver la serie Guías del sistema
Las guías del sistema: 5 series, un solo camino
Todo lo que necesitas para construir un sitio Astro profesional con contenido en Markdown: las piezas UI, la jerarquía de páginas y los tres flujos de contenido. Cada serie, a fondo.
El sistema está organizado en dos capas. La capa de arquitectura —Módulos y Niveles— documenta las piezas con las que se arma cada página y los tipos de página que existen. La capa de contenido —Productos, Servicios y Blog— documenta cómo llenar esas páginas con datos reales.
Cada serie es autónoma y tiene su hub con el molde canónico de 10 secciones por pieza: qué es, para qué sirve, anatomía, variantes, responsive, dónde va, cómo se construye, buenas prácticas, navegación y relacionados. Lee en orden o entra directamente al flujo que necesitas.
El sistema
Dos capas, cinco series
El sistema separa la arquitectura (qué piezas hay y cómo se jerarquizan) del contenido (cómo se crean los datos reales). Cada capa tiene sus guías propias.
La capa de arquitectura responde preguntas de diseño y estructura: ¿qué módulo UI resuelve este problema? ¿En qué nivel de profundidad debería ir esta página? Módulos documenta cada pieza del chrome y del cuerpo; Niveles documenta los cuatro tipos de página y qué plantilla, migas de pan y rol le corresponde a cada uno.
La capa de contenido responde preguntas de flujo y creación: ¿cómo creo un producto? ¿Cómo armo la página de un servicio? ¿Cómo estructuro el blog? Las tres guías —Productos, Servicios, Blog— documentan cada decisión del camino: desde el archivo Markdown hasta el schema JSON-LD. La misma lógica, tres flujos distintos.
Las series
Las 5 guías del sistema
Una tarjeta por serie: qué documenta, cuántas piezas tiene y cuáles son sus conceptos clave. Entra a cualquiera para ver su hub completo con todas las piezas.
Cada tarjeta abre el hub de una serie. Allí encontrarás todas las piezas como cards, cada una desplegada «a fondo» con información y galería, y la serie completa con variantes, patrones responsive y FAQ. Es el MISMO card del catálogo —coherencia en todo el sistema—.
Las dos primeras series (Módulos y Niveles) son la base: úsalas para entender las piezas disponibles y la jerarquía antes de crear contenido. Las tres últimas son los flujos de creación: úsalas cuando tengas claro qué tipo de contenido vas a añadir.
Niveles
Los 4 tipos de página según su profundidad en el árbol del sitio: L1 home, L2 índice de sección, L3 detalle de entidad y L4 sub-ficha. Qué migas de pan lleva cada uno y qué plantilla usa.
Ver la serie
Anatomía del blog
Cómo está hecho el blog por dentro: sidebar con enlaces internos, paginación automática, artículos en MDX, tarjetas del listado, archivos de categoría y etiqueta, y bloque de artículos relacionados.
Ver la serie
Guía de productos
El camino completo de crear un producto en el sitio: colección Markdown validada por Zod, categorías con enum cerrado, imágenes AVIF optimizadas, precio opcional, ficha generada sola y schema JSON-LD automático.
Ver la serie
Guía de servicios
El camino completo de crear una página de servicio profesional: colección Markdown, propuesta de valor en el hero, alcance honesto, proceso predecible, FAQ de objeciones y cierre WhatsApp-first.
Ver la seriePor dónde empezar
El camino recomendado
No es obligatorio leer las 5 series. Si empiezas desde cero, sigue el orden de las capas: arquitectura primero, contenido después.
Empieza por Módulos: entiende qué piezas UI están disponibles y cómo se combinan. Luego lee Niveles: sabrás en qué tipo de página va cada módulo y qué migas de pan debe llevar. Con esa base, cualquiera de los tres flujos de contenido —Productos, Servicios, Blog— se puede leer en el orden que tu proyecto lo necesite.
Si ya sabes cómo funciona Astro y solo quieres resolver un problema concreto —"¿cómo agrego un producto?" o "¿cómo estructuro el FAQ de un servicio?"— entra directamente a la pieza que responde esa pregunta. Cada serie es autónoma: sus SectionMenus de cierre te llevan a las series hermanas cuando las necesitas.
Capa 1 · Arquitectura
Preguntas frecuentes sobre el sistema
¿En qué orden leo las guías?
El orden recomendado es por capas: primero Módulos (qué piezas hay), luego Niveles (cómo se organiza el árbol), y después los flujos de contenido según lo que vayas a crear —Productos si montas un catálogo, Servicios si armas páginas de servicio, Blog si publicas artículos—. No necesitas leer todas antes de empezar: elige la que resuelve tu siguiente decisión.
¿Necesito leer las 5 series antes de empezar a construir?
No. Cada serie es autónoma y se puede leer de forma independiente. Si ya entiendes cómo funciona Astro y solo quieres saber cómo crear productos, ve directamente a /productos/guia. Las series se enlazan entre sí en sus SectionMenus para que puedas saltar cuando algo te haga falta.
¿Por qué 5 series separadas en vez de una sola guía?
Porque responden preguntas distintas. Módulos responde «¿qué piezas UI están disponibles?»; Niveles responde «¿qué tipo de página debo crear aquí?»; las guías de contenido responden «¿cómo creo un producto/servicio/artículo concreto?». Una sola guía mezclada sería más difícil de consultar.
¿Qué es el SSoT (Single Source of Truth) que mencionan las guías?
Es el principio de que cada dato vive en un solo lugar y se lee desde ahí en todas partes. En este sistema, src/config/site.ts es el SSoT de la navegación, las taxonomías y los mensajes de WhatsApp. Cambiar un dato ahí lo actualiza en el menú, el footer, el schema y todos los componentes sin tocar nada más.
¿Puedo usar solo una parte del sistema?
Sí. El sistema está diseñado en capas desacopladas. Puedes usar el chrome (topbar+header+footer) sin el blog, crear un catálogo de productos sin una sección de servicios, o tener un blog sin catálogo. Cada parte está suficientemente aislada para funcionar sola. Lo único que es global e indivisible es site.ts y los estilos base (tokens.css, mobile.css).