Equipos
Los productos principales del catálogo: lo que el cliente viene a comprar.
- Equipo base · línea estándar
- Equipo profesional · alto rendimiento
- Equipo compacto · espacios reducidos
Catálogo del sitio
Productos: el catálogo completo
Explora el catálogo por categoría, abre la ficha de cada producto y cotiza por WhatsApp. Precios claros, atención directa y documentación cuando tu proyecto la necesita.
Cada producto vive como una ficha con su imagen, especificaciones, aplicaciones y certificaciones. Lo que ves aquí se genera solo desde una colección Markdown: agregar o quitar un producto no toca código, solo contenido.
El modelo es WhatsApp-first: sin carrito ni cifras infladas. Si un precio depende de volumen o configuración, lo trabajamos «bajo cotización» y te damos la cifra exacta de tu caso.
Cómo funciona
¿Qué es este catálogo?
Un catálogo data-driven: cada producto es un archivo Markdown, la vitrina se regenera sola y ninguna ficha nueva requiere tocar código.
El catálogo es el segundo nivel de la arquitectura del sitio: el punto donde el visitante elige qué familia de producto le interesa antes de entrar a la ficha. En esta plantilla no es una pantalla fabricada a mano; se genera desde la colección src/content/productos/. Cada .md define su categoría en el frontmatter; la vitrina agrupa los productos y levanta las cards sola.
La página también es una landing de venta: TrustBar, guía de selección, proceso, FAQs y formulario comparten el espacio con la vitrina para que el visitante encuentre la siguiente acción sin buscarla. Cada módulo es el mismo que ya vive en el home —documentado allá, usado aquí—, y se activa o desactiva según el giro del cliente sin construir nada desde cero.
El catálogo
Explora por categoría
Cada tarjeta abre una categoría con sus productos. Las categorías salen de la propia colección: nunca hay una vacía, y cada ficha hereda su categoría del esquema.
Esto es el catálogo funcionando: cada categoría enlaza a su landing y a las fichas que contiene. La misma CategoryCard que el resto del sitio —presentación pura, sin schema propio— mantiene la rejilla pareja.
En un sitio real reemplazas los .md DEMO por los productos del cliente y la vitrina se regenera sola, con sus categorías, sub-links y fichas.
El catálogo a fondo
Cada categoría, por dentro
La vitrina te muestra las cards; aquí abrimos cada categoría: qué contiene, para quién es y qué respalda cada producto de esa familia.
Cada categoría del catálogo tiene su lógica propia: los equipos son el núcleo, los accesorios redondean la compra y la categoría general acomoda lo que no tiene familia fija. Aquí se explica esa lógica para que el visitante sepa a qué sección entrar antes de ver las fichas.
Es el mismo bloque «a fondo» del catálogo del home —información a la izquierda, galería a la derecha, idéntico para cada categoría—. Reusar el patrón es, otra vez, la lección: el sitio se arma con piezas que ya existen.
La categoría a fondo
Equipos
Los equipos son el núcleo del catálogo: la pieza principal que el cliente viene a comprar. Cada ficha incluye especificaciones técnicas, aplicaciones y, cuando aplica, las certificaciones del fabricante, para que el visitante llegue informado a la conversación y el tiempo de cotización baje a la mitad.
El catálogo distingue entre línea estándar y línea pro para orientar al cliente según su proyecto, sin obligarlo a pedir asesoría solo para entender la diferencia. El detalle fino se cierra por WhatsApp o formulario, con precio y disponibilidad reales.
- Fichas completas: specs, aplicaciones y certificaciones del fabricante
- Línea estándar y pro claramente diferenciadas para orientar sin fricción
- Cotización directa por WhatsApp con disponibilidad y tiempos reales
- Compatible con accesorios del catálogo: ninguna compra queda incompleta
La categoría a fondo
General
La categoría general recibe todo lo que no cabe en equipos ni en accesorios: productos sin familia fija, artículos de temporada o referencias que el cliente pide por nombre. Es el cajón flexible del catálogo real.
Una ficha válida aquí puede ser tan simple como título, descripción, categoría e imagen —los cuatro campos obligatorios del esquema—. Los campos extra (precio, specs, galería) se agregan cuando el producto los merece, sin huecos que el visitante note.
- Para productos sin familia fija: referencias por nombre, artículos de temporada
- Ficha mínima válida con solo 4 campos obligatorios (título, desc, categoría, imagen)
- Campos extra (precio, specs, galería) solo cuando el producto los necesita
- Bloques opcionales: si no tienen datos, no se pintan; cero huecos visibles
La categoría a fondo
Accesorios
Los accesorios redondean la compra: son las piezas de montaje, protección y complemento que el cliente necesita junto al equipo principal y que, sin esta sección, tendría que buscar por separado. Agruparlos en su propia categoría elimina el faltante a media instalación.
Cada accesorio indica su compatibilidad con la línea de equipos del catálogo, sin ambigüedades. Los kits empaquetan varias piezas a mejor precio; el cliente elige si quiere lo mínimo o llegar con todo desde el primer pedido.
- Compatibilidad declarada en cada ficha: sin sorpresas al instalar
- Kits que agrupan piezas sueltas: mejor precio y sin faltantes
- Instalación sin herramienta especial en la mayoría de los accesorios
- Refacciones disponibles: protege la inversión en el equipo principal
Responsive y móvil
El catálogo, en el teléfono
La vitrina, los bloques de categoría y el FAQ+formulario no se «encogen»: se reordenan. Mobile-first en cada capa, sin diseñar dos veces.
El catálogo tiene tres bloques con comportamiento responsive propio: la vitrina de cards (3 columnas → 1), los bloques CategoryDetail de 2 columnas que se apilan verticalmente, y el par FAQ+formulario que pasa de 2 columnas a una sola. Los tres son mobile-first: el caso base es el teléfono y el escritorio solo añade columnas.
Los tokens del sistema central (mobile.css) aportan lo demás: imágenes fluidas que nunca desbordan su caja, áreas táctiles de 44 px en botones y chips, y ancho al 100 % en móvil. Sin media queries duplicadas por componente y sin diseñar dos veces el mismo layout.
E
Ver categoría → Ver categoría →
1 · De cuatro por fila a una columna
La vitrina es mobile-first: arranca en una columna y suma columnas al haber más ancho —2 en tablet, 4 en escritorio—. El catálogo escala hasta 4 categorías sin tocar código. Las cards no se reescalan: solo cambia cuántas caben por fila.
/* productos/index.astro · vitrina mobile-first: 1 → 2 → 4 por fila.
El caso base (el teléfono) es el más simple; el escritorio solo añade columnas.
Con 4 columnas el catálogo escala limpio hasta 4 categorías sin tocar código. */
.showcase { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 640px) { .showcase { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .showcase { grid-template-columns: repeat(4, 1fr); } } E
Ver Equipos →
2 · CategoryDetail apilado
En escritorio cada bloque «a fondo» muestra info y galería en 2 columnas paralelas. En el teléfono se apila: la información aparece primero, la galería debajo. El orden es siempre natural —información antes que imagen—, sin inversión en ningún caso.
/* CategoryDetail.astro · mobile-first: apila en móvil, 2 cols en escritorio.
Info siempre primero (orden natural), galería debajo. Sin reverse en ningún caso. */
.cdetail { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 768px) {
.cdetail { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
} E
▾
▴
▾ Cotizar →
3 · FAQ y formulario en columna única
En escritorio el FAQ y el formulario de cotización van en 2 columnas (1.1fr · 0.9fr). En el teléfono pasan a columna única: FAQ primero para resolver la duda, formulario debajo para pedir el dato. La jerarquía no cambia, solo el eje.
/* productos/index.astro · FAQ+formulario: 1 columna en móvil → 2 en escritorio.
Jerarquía constante: FAQ primero (resuelve la duda), formulario después (pide el dato). */
.faqgrid { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); align-items: start; }
@media (min-width: 900px) {
.faqgrid { grid-template-columns: 1.1fr .9fr; gap: var(--sp-8); }
}Guía de selección
Elige según
tu necesidad
Una tabla que orienta al visitante hacia la opción correcta — y abre la conversación.
Cuando el cliente no sabe qué pedir, una tabla de selección lo guía y reduce la fricción: ve su caso reflejado y entiende qué le toca.
El detalle fino se cierra con un diagnóstico; por eso la tabla termina con un CTA a WhatsApp.
| Nivel | Para quién | Incluye | Complementos |
|---|---|---|---|
| Básico | Negocios pequeños y locales | Lo esencial para arrancar | Extras opcionales |
| Intermedio | Comercios y oficinas medianas | Cobertura estándar completa | Personalización |
| Completo | Empresas e inmuebles grandes | Solución integral | Soporte y seguimiento |
Respaldo
Lo que te
respalda
No vendes solo un producto: vendes tranquilidad y cumplimiento.
Una tabla de respaldo (garantías, normas, comprobantes) convierte porque responde la pregunta silenciosa: «¿y si algo sale mal?».
Dilo con precisión: el rigor es señal de autoridad y mejora tu SEO.
| Respaldo | Qué cubre | Aplica a |
|---|---|---|
| Garantía | Respaldo del producto entregado | Todo el catálogo |
| Factura | Comprobante fiscal a tu nombre | Quien lo requiera |
| Norma aplicable | El estándar que rige tu giro | Según el tipo de producto |
Adapta las filas a tu giro: garantías, normas oficiales aplicables, certificaciones reales, comprobantes. Nunca cites una norma o certificación que no tengas.
Cómo trabajamos
De tu mensaje
al producto entregado
Un proceso claro reduce el miedo a dar el primer paso.
Mostrar el proceso en pasos numerados le dice al visitante exactamente qué pasa si te escribe. Menos incertidumbre, más mensajes.
Descríbelo honesto: sin prometer tiempos que no puedas cumplir.
-
Cuéntanos
Nos dices qué producto necesitas por WhatsApp o formulario.
-
Cotización
Te enviamos precio, disponibilidad y tiempos de entrega.
-
Confirmación
Cierras el pedido con todo por escrito, sin sorpresas.
-
Entrega
Recibes el producto con su documentación completa.
-
Seguimiento
Quedamos disponibles para refacciones y lo que surja.
Preguntas frecuentes
¿Cómo cotizo un producto del catálogo?
Entra a la ficha del producto y usa el botón «Cotizar por WhatsApp», o llena el formulario de esta página. Te respondemos con precio, disponibilidad y tiempos de entrega.
¿Por qué algunas fichas no muestran precio?
Cuando el precio depende de volumen, configuración o entrega, trabajamos «bajo cotización»: pides el contacto y te damos la cifra exacta de tu caso, en lugar de un número que no aplica.
¿Los productos vienen con documentación?
Sí. Cada ficha indica sus especificaciones, aplicaciones y certificaciones cuando corresponde. La documentación del fabricante se entrega con el producto.
¿Hacen envíos y entregas?
Atendemos tu ciudad y la zona metropolitana, con envíos según el producto. Confírmanos tu ubicación al cotizar y te damos el tiempo exacto.
¿Los datos de este catálogo son reales?
No. Es una plantilla-guía: los productos y las reseñas son DEMO. Reemplaza los .md de src/content/productos/ y los testimonios de la colección casos antes de publicar un sitio real.