Los módulos: las piezas del sitio
Un sitio profesional no es una página suelta: es un puñado de piezas reutilizables —topbar, header, hero, menú, footer— que se repiten y se combinan. Aquí están todas, cada una con su página de detalle.
Esta página no es una lista de enlaces: es el mapa de todo el sistema. Cada módulo se abre y se explica a la misma profundidad —qué problema resuelve, de qué piezas se compone, dónde encaja en el layout y cómo está construido—, del criterio de diseño a la implementación. Antes de entrar a cualquiera, aquí ves cómo encajan todas las piezas.
Y todas descansan en un mismo principio: una única fuente de verdad. El contenido y el diseño van por separado —los datos en site.ts, la apariencia en el componente—; cada pieza se diseña una sola vez y se reutiliza idéntica en cada página, así que un ajuste se propaga sin sorpresas y nada se construye dos veces.
Concepto
¿Qué es un módulo?
Una pieza con una función clara que se construye una vez y se reutiliza: el ladrillo con el que se arma el sitio.
Un módulo es una parte del sitio con un trabajo concreto —el topbar acerca el contacto, el header guía, el hero presenta, el footer cierra—. Cada uno se diseña y se programa una sola vez, y luego se reutiliza en todas las páginas. Pensar el sitio en módulos, y no como pantallas sueltas, es lo que lo mantiene coherente y fácil de mantener.
La ventaja es doble. Para quien lo usa, todo se ve y se comporta igual en cada rincón del sitio. Para quien lo edita, un cambio en un módulo se refleja en todas partes a la vez —sin perseguir copias dispersas—. En esta plantilla cada módulo tiene su página: qué es, para qué sirve, qué lleva, dónde va y cómo está construido.
El índice
Todos los módulos del sitio
Estos son los módulos de la serie. 15 de 16 ya documentados; el resto se irá publicando con el mismo molde.
Cada tarjeta es una pieza real del sitio: foto, etiqueta de estado, nombre, qué hace y los elementos que lo componen. Es el MISMO card del catálogo —no inventamos un diseño aparte—, porque la coherencia es justo lo que esta serie enseña.
Entra a cualquiera para verlo a fondo: qué problema resuelve, de qué piezas se compone, dónde encaja en el layout y cómo se construye. El primero (Topbar) ya marca el molde; el resto llega con la misma plantilla.
Migas de pan
Dónde estás y el camino de vuelta: el rastro de navegación en páginas internas.
Ver móduloTarjeta de servicio
La ficha breve del catálogo de servicios: ícono o foto + CTA dual (ficha o WhatsApp).
Ver móduloWhatsApp flotante
El botón de WhatsApp siempre visible, fijo en una esquina.
- Botón
- Fijo
- Mensaje
Por dentro
Cada módulo, por dentro
El índice te dice qué es cada pieza; aquí la abrimos. Mismo formato para todas: qué resuelve, de qué partes se compone y en qué se fija al construirla.
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 módulo—. Reusar el patrón es, otra vez, la lección: el sitio se arma con piezas que ya existen.
Empezamos por el Topbar, que marca el molde. Los demás módulos se irán sumando aquí con la misma estructura, a medida que se documentan.
El módulo a fondo
Topbar
El topbar es la franja delgada que corona el sitio, por encima del menú. No vende: acerca. En ese espacio mínimo caben las señales que un visitante busca antes de decidir —un teléfono, un horario, un WhatsApp—, para que contactarte nunca esté a más de un vistazo de distancia, en cualquier página.
Por eso su contenido es deliberado y corto: a la izquierda, una frase de posicionamiento o un dato de confianza; a la derecha, los accesos de contacto. El logotipo NO va aquí —vive en el header, justo debajo—. Y como todo en la plantilla, sus datos salen de site.ts (CONTACT, waUrl): se escriben una vez y se actualizan solos en todo el sitio.
- Contacto directo: teléfono con clic-para-llamar y WhatsApp con mensaje pre-armado
- Señal de confianza: el horario de atención, que se oculta en móvil para priorizar la acción
- Datos desde site.ts (CONTACT · waUrl): se escriben una vez y se propagan a todo el sitio
- El logotipo NO va aquí: su lugar es el header, en la fila de abajo
El módulo a fondo
Header
El header es la barra de navegación principal, justo bajo el topbar: el mapa del sitio que viaja en cada página. A la izquierda el logotipo —ancla de identidad y atajo a la home—; a la derecha, las secciones. Su trabajo es que cualquiera sepa, en todo momento, dónde está y a dónde puede ir.
No se escribe a mano: todo el menú —escritorio, paneles desplegables y versión móvil— se genera desde NAV en site.ts, una sola fuente. Agregar o quitar una sección actualiza los tres a la vez, y los hijos (productos, servicios…) salen de la taxonomía, así el menú nunca se desincroniza del contenido real.
- Logotipo a la izquierda: identidad y «volver al inicio» que todos esperan
- Navegación data-driven desde NAV: escritorio y móvil de la misma fuente
- Paneles mega/dropdown con el contenido de la taxonomía, no listas aparte
- CTA de conversión (Cotizar) siempre visible a la derecha
El módulo a fondo
Migas de pan
Las migas de pan son el rastro fino que aparece en las páginas internas, bajo el header: Inicio › Sección › Página. En una línea le dicen al visitante dónde está parado y, sobre todo, le dan el camino de vuelta a cualquier nivel sin recurrir al botón del navegador.
Más allá de la comodidad, ordenan la jerarquía del sitio para las personas y para los buscadores, que muestran esa ruta en los resultados. Se arman solas a partir de la ubicación de la página, así que reflejan siempre la estructura real, sin mantenerse a mano.
- Ubicación clara: «dónde estoy» de un vistazo, en páginas internas
- Camino de vuelta a cada nivel superior, sin usar el botón atrás
- Jerarquía legible para personas y para buscadores (rich results)
- Se generan desde la ruta de la página: nunca se escriben a mano
El módulo a fondo
Hero
El hero es lo primero que se ve: la franja de apertura con un H1 único que dice, en lenguaje claro, qué ofreces y para quién. Tienes pocos segundos y aquí se decide si el visitante se queda. Por eso manda el mensaje, no la decoración —el logotipo vive en el header, no aquí—.
Debajo del título, una sola frase de apoyo que suma el beneficio o despeja la duda más común. La acción (uno o dos botones) se movió a la franja de abajo: regla canónica «el hero presenta, la franja convierte». Todo sale de unas pocas props reutilizables en cualquier página.
- Un solo H1 con la propuesta de valor y la palabra clave principal
- Subtítulo de apoyo: una frase, sin tecnicismos
- El logotipo NO va aquí —su lugar es el header—
- «El hero presenta, la franja convierte»: los CTAs viven debajo
El módulo a fondo
Menú de secciones
Es la franja de botones que va justo bajo el hero: atajos a las secciones de la página para que el visitante salte a lo que busca sin volver al header. Es el patrón de los catálogos —entras y, de inmediato, ves por dónde moverte—.
Es data-driven: los botones se generan desde NAV, la misma fuente del header, así que agregar o quitar una sección actualiza el menú y esta franja a la vez. El último botón es el CTA de conversión (WhatsApp), armado con waUrl(): de nuevo, el hero presenta y la franja convierte.
- Atajos a cada sección, justo debajo del hero
- Mismos datos que el header (NAV): nunca se desincroniza
- Último botón = CTA de conversión (WhatsApp con waUrl)
- Copa el ancho disponible y se apila en móvil
El módulo a fondo
Encabezado de sección
Es el encabezado que abre cada bloque del sitio: un eyebrow con barra de acento, el título (H2) y una descripción. Da contexto antes del contenido y mantiene la jerarquía —un solo H1 en el hero, H2 en cada sección— para que personas y buscadores se ubiquen.
Un único componente para TODOS los títulos: en su variante «duo» reparte el bloque en dos columnas —título a la izquierda, dos párrafos que explican la sección a la derecha—. Reusarlo evita inventar un diseño por título y mantiene el sitio coherente, con menos CSS que mantener.
- Eyebrow + título (H2) + descripción: contexto antes del contenido
- Mantiene la jerarquía H1 → H2 → H3 del sitio
- Variante «duo»: título a la izquierda, 2 párrafos a la derecha
- Un solo componente para todos los títulos: cero diseño duplicado
El módulo a fondo
Tarjeta de categoría
Son las tarjetas de la vitrina del catálogo: cada categoría presentada como un producto —foto real, etiqueta de gancho, título, texto de venta breve y atajos a las subcategorías—. Convierten una lista larga en un mapa que se entiende de un vistazo.
Se generan desde una sola lista (SHOWCASE en site.ts): agregar o quitar una tarjeta actualiza la vitrina sin tocar la página. Cada parte cumple su función —el título es H3, la imagen lleva alt descriptivo, las subcategorías son enlaces internos reales—, así sirve a la persona y al SEO.
- Foto + etiqueta + título (H3) + texto + chips de subcategorías
- Data-driven desde SHOWCASE: la vitrina se arma sola
- Subcategorías = enlaces internos con anchor text real
- Cuatro por fila en escritorio, con alturas iguales
El módulo a fondo
Categoría a fondo
Es el bloque de dos columnas que amplía UNA categoría: a la izquierda la información detallada (título, párrafos, puntos clave y CTA); a la derecha una galería con una imagen grande y dos debajo. Refuerza la categoría antes de que el visitante entre a su página.
Es justo el bloque que estás leyendo ahora. Reutilizable y data-driven: el título y la imagen principal pueden salir del catálogo para no duplicar datos. La regla del sitio: todos idénticos —info a la izquierda, galería a la derecha—, sin alternar lados ni fondos, para que la lectura sea predecible.
- Dos columnas: info detallada a la izquierda, galería a la derecha
- Galería de apoyo: una imagen grande y dos pequeñas
- Refuerza la categoría antes de entrar a su página
- Todos idénticos, sin zig-zag (regla dura del sitio)
El módulo a fondo
Tarjeta de producto
Es la ficha breve del catálogo: cada producto presentado como una card uniforme con imagen 16:9, badge (norma o categoría), título H3, descripción corta y un CTA inline. Todo dentro de un único enlace que vuelve la card entera clic-en-cualquier-lado, así el visitante escanea y entra a la ficha de un solo gesto.
Vive en un componente con API pequeña (title, href, image?, badge?, description?, ctaLabel?, index?, priority?) y se alimenta desde getCollection('productos') —una colección Markdown validada por Zod—. No emite Product JSON-LD: el schema vive centralizado en lib/seo.ts y solo lo invoca la ficha L4. El grid del padre emite ItemList vía directorySchema. Regla B3: un solo emisor de schema por página.
- Imagen 16:9 con width/height fijos (cero CLS) + badge opcional + título H3
- Las 4 primeras cards cargan en eager, las demás en lazy (auto por index)
- priority=true en la primera del grid → LCP cuidado (fetchpriority=high)
- Cero schema en la card: ItemList lo emite el padre, Product solo la ficha L4
El módulo a fondo
Tarjeta de servicio
Es la ficha breve del catálogo de servicios: cada servicio como una card uniforme con ÍCONO SVG por defecto (no foto, porque las fotos de servicios suelen ser genéricas), título H3, descripción corta y un CTA dual. La foto 16:9 solo entra cuando aporta algo concreto —un evento, una instalación— y reemplaza al ícono. El badge va inline o sobre la foto, según el modo.
La novedad respecto a la tarjeta de producto: el CTA es DUAL. Por defecto enlaza a la ficha L4 («Ver servicio»); si pasas whatsapp={true}, muta a un botón verde con el ícono de WhatsApp y abre wa.me con mensaje pre-armado. Útil para servicios consultivos donde el siguiente paso real es chatear, no leer. La card no emite Service schema: vive en lib/seo.ts y solo lo invoca la ficha L4. Regla B3: un solo emisor por página.
- Modo ícono por defecto (caja 56×56 roja clara) o modo imagen 16:9 con overlay
- Badge opcional: inline arriba del título (modo ícono) o absoluto sobre la foto (modo vitrina)
- CTA dual: enlace «Ver servicio» a la ficha L4, o botón verde WhatsApp con waUrl()
- Cero schema en la card: ItemList lo emite el grid padre, Service solo la ficha L4
El módulo a fondo
Reseñas
Son las tarjetas de prueba social: opiniones de clientes con su calificación, nombre y rol. Llegan en el momento en que el visitante duda y responden la pregunta que no hace en voz alta —«¿le funcionó a alguien como yo?»— con la voz de un tercero, que pesa más que la tuya.
Cada reseña es una tarjeta uniforme (ReviewCard) alimentada por datos, así que se ven y se comportan igual en todo el sitio. En un sitio real, reseñas verdaderas y atribuibles; aquí, ejemplos. La clave es la honestidad: prueba social que se pueda sostener, nunca inventada.
- Cita + calificación de 5 estrellas + nombre y rol del cliente
- Avatar con iniciales (sin peso de imagen, uniforme y profesional)
- Tarjetas uniformes (ReviewCard), data-driven desde el frontmatter
- Schema Review opcional en lib/seo.ts, gateado por SITE.allowSelfReviews (regla B4)
El módulo a fondo
Preguntas frecuentes
Es el acordeón de dudas comunes: preguntas que se despliegan para mostrar su respuesta, al cierre de la página. Resuelve las objeciones típicas antes de que frenen la conversión y, de paso, baja la carga de soporte respondiendo lo que todos preguntan.
Además del valor para la persona, centraliza el esquema FAQPage (JSON-LD) para que los buscadores puedan mostrar las preguntas en los resultados. Recibe una lista de pregunta y respuesta, y arma todo: el acordeón accesible y el schema, sin duplicar nada.
- Acordeón de preguntas frecuentes, al cierre de la página
- Resuelve objeciones y baja la carga de soporte
- Esquema FAQPage (JSON-LD) centralizado para rich results
- Data-driven: lista de pregunta/respuesta → acordeón + schema
El módulo a fondo
CTA banner
El CTA banner es la franja de cierre que convierte: un heading breve, una descripción de una línea y uno o dos botones tipados que no dejan dudas sobre el siguiente paso. Cada página termina pidiendo algo —cotizar por WhatsApp, ver el catálogo, ir a contacto— y el banner es ese cierre, repetido con intención y la misma forma visual en todo el sitio.
El componente vive en CTABanner.astro con tres variantes (red · dark · light) y un array de presets en cta-presets.ts (PRESET_GENERAL para home/landing, PRESET_CATEGORIA para fichas, PRESET_CONTACTO para cierres claros). Los botones son tipados (icon: wa | arrow | phone | catalog | info | quote, primary, external) y los enlaces a WhatsApp se arman con waUrl(WA_MESSAGES.cotizacion). Cero hardcoding del número (regla D4): la SSoT es CONTACT.whatsapp de site.ts.
- Heading + descripción + badge de confianza + btns[] tipados con íconos SVG inline
- Tres variantes de fondo: red (sólido) · dark (gradiente) · light (gris claro con bordes)
- 3 presets canónicos en cta-presets.ts (general · categoría · contacto) — cero copy repetido
- WhatsApp con waUrl(WA_MESSAGES.x); foco visible AA; mobile-first full-width al ≤560
El módulo a fondo
Formulario de contacto
Es el formulario que recoge al visitante listo para hablar. En esta plantilla NO manda correos ni golpea un backend: arma un mensaje y abre WhatsApp con el texto pre-cargado —respuesta inmediata, sin fricción ni bandejas que revisar—. Tres campos accesibles (nombre, asunto, mensaje), labels asociados por for/id, inputs a 16 px para no disparar el zoom de iOS y botón en verde WhatsApp consistente con el flotante.
Su SSoT es CONTACT.whatsapp en site.ts: el componente lo lee como data-attribute y waUrl() lo formatea. NUNCA hardcodea un número (regla D4). El componente vive aislado (cero schema, cero estilos globales) y se incrusta donde se necesite, casi siempre al cierre de páginas como /contacto, o en columna junto al FAQ. Para sitios con backend real, el patrón es reemplazar el handler de submit por POST a una Cloudflare Pages Function con honeypot + Turnstile + rate-limit en el edge.
- Convierte a WhatsApp con el mensaje pre-armado, sin correo ni backend
- Tres campos (nombre · asunto · mensaje) con labels asociados y validación HTML5
- Inputs a 16 px (anti-zoom iOS) + autocomplete + área táctil cómoda en el botón
- Número y mensajes desde site.ts (CONTACT.whatsapp · WA_MESSAGES) vía waUrl()
El módulo a fondo
Footer
El footer es el pie de TODAS las páginas del sitio: la red de seguridad de la navegación y, sobre todo, un activo de SEO global —cada enlace que vive aquí aparece en miles de URLs y reparte equity interno al sitio entero—. Cinco zonas en orden estricto: banda CTA pre-footer (último intento de conversión), cuerpo de marca + 4 columnas data-driven (Productos, Servicios+Sectores, Cobertura, Empresa), banda opcional de cumplimiento, barra inferior con copyright dinámico + legales + scroll-top, y la barra de acento decorativa.
Vive en un único componente que se monta UNA sola vez en PageLayout —cada página hereda el footer sin hacer nada—. La data llega íntegra de site.ts (CONTACT, PRODUCT_CATEGORIES, SERVICES, SECTORS, COVERAGE_STATES, BRANCHES, SOCIAL, LEGAL); el JSON-LD Organization vive en lib/seo.ts → organizationSchema() y lo emite UNA vez buildSchema desde BaseLayout (regla B3, un único emisor). El componente NO toca el grafo: es presentación, no SEO.
- Cinco zonas: CTA + cuerpo NAP + cumplimiento + barra inferior + acento
- Activo SEO global: cada enlace aparece en miles de URLs (reparte equity)
- NAP consistente entre Topbar, Footer y JSON-LD Organization (SSoT en CONTACT)
- Schema Organization centralizado en lib/seo.ts; el componente NO emite JSON-LD
El módulo a fondo
WhatsApp flotante
Es el botón de WhatsApp fijo en una esquina, siempre visible mientras el visitante recorre el sitio. Quita la fricción del «¿cómo los contacto?»: la respuesta está a un toque, en cualquier página y en cualquier punto del scroll, sin volver al header ni al footer.
Lleva un mensaje pre-armado para que la conversación empiece con contexto, armado con waUrl() desde el número en site.ts. Discreto pero presente: no estorba la lectura y, cuando aparece la intención de contactar, ya está ahí esperando.
- Botón de WhatsApp fijo, visible en todo el scroll
- Contacto a un toque desde cualquier página
- Mensaje pre-armado con waUrl() (número en site.ts)
- Discreto: presente sin estorbar la lectura
Responsive y móvil
La vitrina, en el teléfono
La rejilla de módulos no «se encoge»: se reordena. De cuatro por fila a una sola columna, con cards que se tocan cómodo y fotos que nunca desbordan.
La misma vitrina del catálogo (.showcase) está pensada mobile-first: nace en una columna y va sumando columnas conforme hay ancho —2 en tablet, 4 en escritorio—. Nunca al revés: así el caso base (el teléfono) es el más simple y robusto, y el escritorio solo añade.
Lo demás lo resuelve el sistema central: las imágenes son fluidas (jamás desbordan su caja), las cards y sus chips crecen al área táctil de 44 px, y el ancho del contenido pasa a 100% en móvil para no perder espacio. Cada patrón, abajo, con su vista en el teléfono y su receta.
1 · De cuatro por fila a una columna
La vitrina es mobile-first: declara una columna y crece con min-width (2 en tablet, 4 en escritorio). Es el mismo .showcase del catálogo —no se duplica diseño— y baja a una columna sin tocar la card.
/* La vitrina es mobile-first: 1 → 2 → 4 por fila.
Arranca en UNA columna y CRECE con min-width (nunca al revés). */
.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); } }2 · Fotos que nunca desbordan
Cada imagen lleva max-width: 100% y height: auto: ocupa el ancho de la card y escala manteniendo su proporción, sin desbordar el viewport ni deformarse. Las fotos son AVIF optimizadas y cargan en lazy salvo las primeras.
/* tokens.css + mobile.css · imágenes fluidas, sin desbordar ni deformar. */
img, picture, video, canvas, svg { max-width: 100%; } /* nunca más anchas que su caja */
@media (max-width: 768px) {
img, video { height: auto; } /* escala manteniendo la proporción */
}3 · Cards cómodas de tocar
En el teléfono se toca con el dedo, no con un cursor: los chips de subcategoría y el botón «Ver módulo» crecen al área táctil de 44 px, y todo elemento tocable lleva un realce de toque suave para confirmar el tap.
/* mobile.css · la card entera se toca cómodo en el teléfono. */
@media (max-width: 1024px) {
a, button, [role="button"], label {
-webkit-tap-highlight-color: rgba(91, 61, 245, .15); /* feedback al tap */
}
}
@media (max-width: 768px) {
/* chips de subcategoría con altura tappable */
.ccard__sub { min-height: 40px; display: inline-flex; align-items: center; }
}