El cliente contrata con más confianza cuando sabe qué pasa después de escribir por WhatsApp. El proceso documentado convierte ese primer clic en el paso 1 de algo predecible.
El grid de proceso son 3 artículos con número, título y descripción: Diagnóstico → Propuesta y ejecución → Entrega y seguimiento. El molde canónico del sistema. Simple, memorable, honesto.
El proceso no está para impresionar: está para reducir la incertidumbre. Cuando el cliente sabe exactamente qué sigue, el primer clic de conversión es más fácil de dar.
Definición
El bloque visual que muestra los pasos del trabajo de principio a fin. Predecible, reproducible y documentado. Responde «¿cómo funciona?» antes de que el cliente tenga que preguntar.
El proceso del servicio es la sección que muestra los pasos del trabajo, en orden, con su número, nombre y descripción. No es el proceso interno del equipo —con herramientas, metodologías y cronogramas—; es el proceso del CLIENTE: qué experimenta desde el primer contacto hasta la entrega.
El molde canónico del sistema son 3 pasos: Diagnóstico (entender el objetivo), Propuesta y ejecución (hacer el trabajo) y Entrega y seguimiento (cerrar y acompañar). Tres es el número que cabe en la memoria y en el grid de 3 columnas. Más de 4 y el proceso deja de parecer simple.
Función e importancia
Convierte el primer clic de conversión en algo predecible, reduce las preguntas de soporte y sostiene la confianza del cliente cuando ocurren imprevistos.
El proceso hace tres trabajos: primero, convierte el clic en «Cotizar» en el paso 1 de algo conocido —el cliente ya sabe qué sigue—; segundo, responde en la página las preguntas que de otro modo llegarían al chat («¿cuánto tarda?», «¿cómo me mantendrán informado?»); tercero, da credibilidad al servicio: un proceso documentado dice que el equipo lo ha hecho antes.
El tercer trabajo es el más sutil pero el más poderoso: cuando ocurre un imprevisto en el trabajo real, haber publicado el proceso y haberlo cumplido es lo que sostiene la confianza del cliente. El imprevisto no es un fracaso del proceso —es una etapa que ambas partes ya conocían.
Cuando el proceso está visible en la página, el visitante sabe exactamente qué pasa después de presionar «Cotizar por WhatsApp». Ese primer clic deja de parecer un salto al vacío y se convierte en el paso 1 de algo predecible.
Las preguntas «¿qué hacen exactamente?», «¿cuánto tarda?» y «¿cómo me mantendrán informado?» se responden en la página antes de llegar al chat. El asesor entra en la conversación con el cliente ya orientado, no desde cero.
Cuando ocurre un imprevisto —y en cualquier proyecto ocurre—, tener el proceso visible y haberlo cumplido es lo que sostiene la confianza del cliente. No es una sorpresa: es una etapa que ambas partes conocían de antemano.
Anatomía
Número ordinal (.paso__n) + título del paso (.paso__t) + descripción (.paso__d) + grid de 3 columnas (.proceso) en sección con fondo surface.
Cada paso es un article con tres elementos: el número (grande, en color primary, sirve de ancla visual), el título (el nombre del paso, ≤4 palabras) y la descripción (qué hace el equipo en ese paso, con verbos en primera persona plural). Tres elementos por paso, sin adornos.
El grid .proceso es section--surface (fondo gris) para separación visual de las secciones vecinas (alcance arriba, FAQs abajo). Las tarjetas .paso son fondo blanco sobre el gris: contraste sin sombras.
El identificador ordinal del paso: «01», «02», «03». Grande, en color primary, en font-heading black. No es un icono: el número es suficiente y más directo. Da jerarquía visual y permite referencias («en el paso 2 te comunicamos el avance»).
Dato .paso__n — font-heading black, color primary, font-size xl
Un sustantivo o frase corta que nombra el paso: «Diagnóstico», «Propuesta y ejecución», «Entrega y seguimiento». Sin verbo en imperativo; sin «paso» en el nombre. ≤4 palabras. Es el nombre que el cliente usará para referirse al paso.
Dato .paso__t — font-heading bold, ≤4 palabras, sin imperativos
Una o dos frases que explican qué ocurre en ese paso: qué hace el equipo, qué recibe el cliente, cuánto tarda si aplica. Verbos en primera persona plural: «Analizamos», «Ejecutamos», «Entregamos». ≤40 palabras.
Dato .paso__d — text-base, color ink-2, verbos «Analizamos» / «Entregamos»
Los pasos se muestran en un grid de 3 columnas en escritorio (repeat(3, 1fr)) que baja a 1 columna en móvil. Cada paso es un article con borde, fondo blanco y border-radius. La sección es section--surface (fondo gris) para separación visual.
Dato .proceso — grid 1fr×3 en desk → 1 col en móvil; fondo surface en sección
Variantes
Desde el proceso canónico de 3 pasos hasta variantes con tiempos, entregables por paso o procesos cíclicos para servicios de soporte.
El molde de 3 pasos es el correcto para la mayoría de servicios. Las variantes son extensiones justificadas: más pasos cuando el servicio tiene una fase intermedia real; tiempos cuando el cliente los necesita para decidir; entregables por paso cuando el proyecto es de alto valor.
Responsive y móvil
El grid de 3 columnas baja a 1 columna en móvil. Los pasos se leen de arriba a abajo, en el mismo orden. Sin cambios en los artículos .paso.
El grid .proceso es la parte responsive más simple de la página: de 3 columnas en escritorio a 1 columna en móvil. Las tarjetas .paso ocupan el ancho completo; el orden de lectura es el mismo (01, 02, 03 de arriba a abajo).
El número de paso (.paso__n) ya es grande por tokens; en pantallas pequeñas añade peso visual extra con font-size 2xl. El título y la descripción ajustan solos su line-height.
El grid de proceso baja a 1 columna en el teléfono. Los pasos se leen de arriba a abajo, en orden, sin cambios en el markup.
/* El grid de 3 pasos baja a 1 columna en móvil.
La tarjeta ocupa el ancho completo; la lectura es de arriba a abajo. */
.proceso { grid-template-columns: 1fr; }
@media (min-width: 768px) { .proceso { grid-template-columns: repeat(3, 1fr); } }
/* El número de paso ya es grande por tokens; en móvil agrega más peso visual. */
@media (max-width: 640px) { .paso__n { font-size: var(--text-2xl); } }Posición
En la segunda sección del cuerpo de la ficha L3, después del alcance (includes[]). Es section--surface para separación visual de las secciones vecinas.
El orden de lectura en la ficha de servicio es: hero → alcance → proceso → FAQs → cierre. El proceso va después del alcance porque la pregunta «¿cómo funciona?» viene después de «¿qué recibo?». Alguien que todavía no sabe qué incluye el servicio no está listo para entender el proceso.
El fondo surface de la sección (section--surface) alterna con el fondo blanco de las secciones vecinas. La alternancia crea separación visual sin bordes ni sombras.
Implementación
El array proceso[] vive en el slug.astro (o en el frontmatter si el servicio lo necesita personalizar). HTML del grid y CSS de las tarjetas.
El proceso es casi siempre igual para todos los proyectos de un servicio, así que vive en el slug.astro como constante local —no en el frontmatter—. Si algún servicio necesita un proceso específico, se puede añadir un campo proceso[] al frontmatter y pasarlo al componente.
// src/pages/servicios/[...slug].astro — sección «Cómo trabajamos»
// El array proceso[] es genérico por servicio y vive en el slug.astro.
// Puede venir del frontmatter si el servicio lo necesita personalizar.
const proceso = [
{
n: '01',
t: 'Diagnóstico',
d: 'Entendemos el objetivo y el contexto para proponer con fundamento, no a ciegas.',
},
{
n: '02',
t: 'Propuesta y ejecución',
d: 'Definimos el alcance y los entregables claros, y ejecutamos sobre un proceso probado.',
},
{
n: '03',
t: 'Entrega y seguimiento',
d: 'Entregamos documentado y acompañamos para que puedas operar con autonomía.',
},
]{/* HTML del grid de proceso en el slug.astro */}
<section class="section section--surface">
<div class="container">
<SectionHeading
eyebrow="Cómo trabajamos"
title="Un proceso claro en tres"
titleAccent="pasos"
desc="El mismo método para todo servicio: diagnosticar, ejecutar y acompañar."
/>
<div class="proceso">
{proceso.map((p) => (
<article class="paso">
<span class="paso__n">{p.n}</span>
<h3 class="paso__t">{p.t}</h3>
<p class="paso__d">{p.d}</p>
</article>
))}
</div>
</div>
</section>/* CSS del grid de proceso — scoped al slug.astro */
.proceso {
display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-6);
}
@media (min-width: 768px) { .proceso { grid-template-columns: repeat(3, 1fr); } }
.paso {
padding: var(--sp-5); background: var(--c-white);
border: 1px solid var(--c-border); border-radius: var(--radius-lg);
}
.paso__n {
font-family: var(--font-heading); font-size: var(--text-xl);
font-weight: var(--weight-black); color: var(--c-primary);
}
.paso__t {
font-family: var(--font-heading); font-size: var(--text-lg);
font-weight: var(--weight-bold); color: var(--c-ink); margin: var(--sp-2) 0;
}
.paso__d {
font-size: var(--text-base); line-height: var(--leading-relaxed);
color: var(--c-ink-2); margin: 0;
}
El grid es repeat(3, 1fr) en escritorio y 1fr en móvil: una
media query, sin lógica extra. Las tarjetas .paso son blancas sobre el fondo surface de
la sección: contraste limpio sin sombras. El número de paso (.paso__n) es
el ancla visual —grande, en color primary— y lo primero que el lector escanea.
Buenas prácticas
El proceso falla cuando describe lo que el EQUIPO hace internamente en lugar de lo que el CLIENTE experimenta. El cliente no necesita saber que usan Jira; necesita saber qué sigue después de contratar.
La regla más importante: escribe el proceso desde la perspectiva del cliente, no del equipo. «Usamos metodología ágil con sprints de 2 semanas» describe el proceso interno; «Recibirás un avance cada dos semanas con la oportunidad de dar retroalimentación» describe lo que el cliente experimenta. Son el mismo proceso visto desde ángulos distintos.
Las siguientes piezas del flujo.