Lead cualificado antes del contacto
Quien llega a WhatsApp ya leyó qué incluye y cómo se cotiza. La negociación comienza en el punto correcto: «quiero esto» en lugar de «¿qué hacen exactamente?». El tiempo de cierre baja.
Guía de servicios · El alcance
El alcance: entregables claros antes de contratar
El alcance honesto es la lista de lo que el cliente va a recibir, escrita antes de que empiece el trabajo. Establece expectativas, cualifica el lead y reduce malentendidos.
El campo includes[] del frontmatter alimenta la sección «Qué incluye» de la ficha: cada ítem es un entregable concreto —algo que el cliente puede verificar al final—. La lista de checkmarks convierte la promesa en un acuerdo visible.
La nota de precio (pricing.note) complementa el alcance: explica el modelo de cobro sin inventar una cifra que no aplica a todos los casos. «Bajo cotización según el alcance» retiene al lead correcto para la conversación; una tarifa fija incorrecta lo aleja antes de hablar.
Definición
¿Qué es el alcance del servicio?
La lista de entregables concretos (includes[]) y la nota de precio (pricing.note) que aparecen en la ficha del servicio. Establecen qué recibirá el cliente antes de contratar.
El alcance del servicio es la respuesta a «¿qué recibo exactamente?». En este sistema vive en el frontmatter del .md: el campo includes[] es un array de strings donde cada uno es un entregable verificable —«Propuesta por escrito con tiempos y costo», no «Atención personalizada»—. La ficha de detalle los mapea con checkmarks en la sección «Qué incluye».
La pricing.note complementa el alcance: no fuerza un número, sino que explica el modelo. «Bajo cotización según el alcance» es honesto para servicios por proyecto; «Desde $X MXN por mes» es honesto para servicios de mantenimiento. El campo no existe si el servicio ya tiene precio fijo en includes[].
Función e importancia
¿Para qué sirve?
Establece expectativas antes de contratar, cualifica el lead y reduce malentendidos. El alcance escrito es el primer paso de un trato claro.
El alcance escrito hace tres trabajos: primero, establece expectativas antes del trabajo —el cliente sabe qué pedir y el equipo sabe qué entregar—; segundo, cualifica el lead —quien llega a WhatsApp ya leyó qué incluye—; tercero, reduce malentendidos en la entrega —no «yo creí que incluía X» sino «está en la página».
La nota de precio hace un cuarto trabajo: retener el lead correcto. Una tarifa fija que no aplica a todos los casos aleja antes de la conversación; una nota que explica el modelo invita a contactar para saber exactamente cuánto cuesta el proyecto específico.
Expectativas escritas antes de empezar
Un entregable escrito en la página es el primer paso de un trato claro. Cuando el alcance está por escrito, el cliente sabe qué pedir y el equipo sabe qué entregar. Los malentendidos ocurren cuando el alcance vive solo en conversaciones de WhatsApp.
Precio honesto sin perder leads
La nota de precio (pricing.note) establece el modelo sin espantar con una cifra que no aplica a todos los casos. «Bajo cotización según el alcance» retiene al lead para el siguiente paso; un precio fijo incorrecto lo aleja antes de la conversación.
Anatomía
Las 4 partes del bloque de alcance
SectionHeading (encabezado de la sección) + lista includes[] con checkmarks + pricing.note opcional + cuerpo Markdown del .md si lo hay.
El bloque «Qué incluye» tiene cuatro capas: el SectionHeading que contextualiza la sección, la lista de includes[] con checkmarks, la pricing.note opcional y el cuerpo Markdown del .md para la descripción larga. Las últimas dos solo se pintan si traen datos.
El SectionHeading layout="duo" sigue la regla de títulos de sección de contenido: eyebrow + title con el nombre del servicio + desc + body[2] que amplían. El título es específico: «Qué resuelve Consultoría», no «Qué incluye el servicio».
Qué incluye Qué resuelve Consultoría
- ✓Diagnóstico de tu necesidad y objetivos
- ✓Recomendación de alcance en lenguaje claro
- ✓Propuesta por escrito con tiempos y costo
includes[] — la lista de entregables
El array de strings en el frontmatter que alimenta la sección «Qué incluye» de la ficha. Cada ítem es un entregable concreto —algo que el cliente puede verificar al final del trabajo. Campo opcional; si no viene, la sección no se pinta.
Dato includes?: string[] — cada ítem = un entregable verificable
pricing.note — la nota de precio honesta
Un string libre que explica el modelo de precio sin inventar una cifra fija. «Bajo cotización según el alcance», «Desde $X MXN por mes», «Incluido en la implementación». Aparece bajo la lista de includes. Campo opcional.
Dato pricing?: { note?: string } — modelo de precio, no cifra forzada
SectionHeading — el encabezado de la sección
La sección «Qué incluye» abre con un SectionHeading (eyebrow + title + desc + body). El título nombra el servicio: «Qué resuelve Consultoría». El cuerpo (body[]) amplía con el lede del servicio y la descripción del proceso.
Dato SectionHeading layout="duo" — eyebrow + title + desc + body[2]
Marcador visual — checkmark ✓
Cada ítem de includes[] se presenta con un checkmark circular en color primary: señal visual de que el ítem está confirmado e incluido. La lista es .incluye con .incluye__item y .incluye__check. Máx. 6–8 ítems para mantener la legibilidad.
Dato .incluye__check — círculo primary + checkmark; máx. 6–8 ítems
Variantes
Configuraciones del alcance
Desde la lista mínima hasta la ficha rica con precio estimado y cuerpo Markdown. Todas válidas con el mismo slug.astro y el mismo CSS.
La variante correcta depende del servicio y de quién es el cliente. Un servicio de entrada puede ir con 3 ítems sin precio; uno estratégico necesita 6–8 ítems, rango de precio y cuerpo Markdown con especificaciones.
El sistema escala sin cambiar el componente: se ajustan los datos en el .md.
- Qué incluye✓ Entregable 1 ✓ Entregable 2
- Qué incluye✓ Entregable 1 ✓ Entregable 2Bajo cotización según el alcance
- Qué incluye✓ Entregable 1 ✓ Entregable 2Bajo cotización según el alcance
- Qué incluye✓ Entregable 1 ✓ Entregable 2 ✓ Entregable 3 ✓ Entregable 4
- Qué incluye✓ Entregable 1 ✓ Entregable 2
- Qué incluye✓ Entregable 1 ✓ Entregable 2Bajo cotización según el alcance
Responsive y móvil
El alcance, en el teléfono
La lista de checkmarks es full-width en móvil: max-width desaparece y el texto ajusta solo. Los checkmarks mantienen área táctil mínima.
La lista .incluye tiene max-width: 60ch en escritorio para mantener la legibilidad. En móvil quita ese máximo y ocupa el ancho disponible. Los checkmarks son círculos de 24×24 px —suficiente área táctil— y el texto ajusta su line-height automáticamente.
La pricing.note tiene font-size: var(--text-sm): legible en todos los tamaños sin ocupar más espacio del necesario. El gap entre ítems (--sp-3) mantiene la separación en cualquier pantalla.
Qué incluye
✓ Diagnóstico y objetivos ✓ Recomendación de alcance ✓ Propuesta por escrito
Bajo cotización según alcance Lista full-width en móvil
La lista de includes es max-width: 60ch en escritorio. En móvil quita ese límite y ocupa el ancho disponible. Sin cambios en el componente.
/* La lista de includes es mobile-first: max-width en escritorio,
full-width en teléfono. El gap se mantiene; el texto ajusta solo. */
.incluye { max-width: 60ch; }
@media (max-width: 768px) { .incluye { max-width: 100%; } }
/* Checkmark táctil: área suficiente en el teléfono */
.incluye__check { min-width: 24px; min-height: 24px; }Posición
¿Dónde vive el bloque de alcance?
En la primera sección del cuerpo de la ficha L3, justo después del Hero. Es lo primero que lee el visitante que ya confirmó que llegó al lugar correcto.
El bloque «Qué incluye» es la primera sección de contenido de la ficha, después del Hero. El visitante ya pasó el primer filtro (el hero le dijo «sí, esto es para ti»); ahora pregunta «¿qué recibo exactamente?». El alcance responde esa pregunta antes de explicar el proceso o las FAQs.
En el slug.astro, la sección es la primera bajo el Hero: section → container → SectionHeading → lista .incluye → pricing.note. Las secciones siguientes (proceso, FAQs) van en las secciones section--surface y section alternadas para separación visual.
Implementación
Cómo se construye
Tres piezas: el frontmatter del .md (includes[] + pricing.note), el HTML del slug.astro (SectionHeading + lista .incluye) y el CSS (tokens + checkmark + responsive).
El frontmatter define los datos; el slug.astro los mapea en HTML; el CSS los presenta. Los tres son independientes: cambiar el includes[] en el .md actualiza la página sin tocar el componente; ajustar el CSS afecta todos los servicios de una vez.
---
# src/content/servicios/implementacion.md
title: "Implementación: ejecutamos el trabajo acordado"
description: "De la propuesta a la entrega: ejecutamos lo acordado con proceso claro,
comunicación en cada paso y resultado documentado que puedes verificar."
category: "instalacion"
image: "/images/servicios/implementacion-deploy-sitio-astro.avif"
pricing:
unit: "servicio"
note: "Bajo cotización según el alcance definido en la propuesta."
includes:
- "Ejecución del alcance acordado"
- "Comunicación clara en cada etapa"
- "Entrega documentada y verificación final"
order: 2
---{/* src/pages/servicios/[...slug].astro — sección «Qué incluye» */}
<section class="section">
<div class="container">
<SectionHeading
layout="duo"
eyebrow="Qué incluye"
title={`Qué resuelve ${label}`}
desc="El alcance concreto del servicio: lo que recibes y por qué importa."
body={[det.lede, 'Te lo entregamos por escrito antes de empezar.']}
/>
<ul class="incluye">
{det.incluye.map((it) => (
<li class="incluye__item">
<span class="incluye__check" aria-hidden="true">✓</span>
<span>{it}</span>
</li>
))}
</ul>
{pricingNote && <p class="pricing-note">{pricingNote}</p>}
</div>
</section>/* CSS del bloque «Qué incluye» — scoped al slug.astro */
.incluye {
list-style: none; margin: var(--sp-6) 0 0; padding: 0;
display: grid; gap: var(--sp-3); max-width: 60ch;
}
.incluye__item {
display: flex; gap: var(--sp-3); align-items: start;
font-size: var(--text-base); line-height: var(--leading-relaxed);
color: var(--c-ink-2);
}
.incluye__check {
flex-shrink: 0; display: grid; place-items: center;
width: 24px; height: 24px; border-radius: var(--radius-full);
background: var(--c-primary-light); color: var(--c-primary);
font-weight: var(--weight-bold); font-size: var(--text-sm);
}
.pricing-note {
margin: var(--sp-4) 0 0; font-size: var(--text-sm); color: var(--c-muted);
}
El dato (includes[]) vive en el .md; el presentador (la lista con checkmarks)
vive en el slug.astro; el estilo (colores, gap, checkmark) vive en el CSS scoped. Esa
separación es lo que permite que cambiar «Propuesta por escrito» por «Propuesta detallada»
sea editar una línea en el .md, sin tocar nada más. Y añadir un nuevo entregable es
añadir un string al array.
Buenas prácticas
Qué hacer y qué evitar
El error más común es confundir actividades con entregables: «Reuniones de seguimiento» es una actividad; «Informe de avance semanal» es un entregable. El cliente solo puede verificar el segundo.
El alcance funciona cuando el cliente puede usar la lista para verificar la entrega. Si algún ítem de includes[] no se puede verificar —«Atención personalizada», «Enfoque en tus necesidades»—, no es un entregable: es una promesa de calidad. Las promesas de calidad van en el copy del hero; los entregables van en el alcance.
Sí conviene
- Cada ítem de includes[] debe ser un entregable verificable: «Propuesta por escrito con tiempos y costo» es concreto; «Atención personalizada» no es un entregable.
- Usa entre 3 y 8 ítems. Menos de 3 no establece expectativas; más de 8 satura y el cliente deja de leer.
- La pricing.note explica el MODELO de precio, no una cifra. «Bajo cotización», «Desde $X», «Incluido en el paquete». Si vas a poner una cifra, que sea el mínimo real del servicio.
- Si el servicio no tiene includes[] en el frontmatter, la sección «Qué incluye» no se pinta — usa el mapa DETALLE del slug.astro como respaldo genérico.
- El SectionHeading de la sección lleva el nombre del servicio en el título: «Qué resuelve Implementación», no «Qué incluye el servicio». Específico, no genérico.
Mejor evita
- NO pongas adjetivos sin entregable: «Atención de calidad», «Servicio integral», «Acompañamiento continuo» no son ítems de alcance — son promesas sin verificación.
- NO inventes una cifra fija en pricing.note si la tarifa varía por proyecto: «Desde $5,000 MXN» cuando el proyecto más simple cuesta $12,000 genera descarte inmediato y desconfianza.
- NO pongas más de 8 ítems en includes[]: la lista pierde jerarquía y el cliente deja de leer después del quinto. Si necesitas más, agrúpalos.
- NO dejes la sección vacía con un placeholder: si el servicio no tiene alcance definido todavía, usa draft:true hasta tenerlo. Una sección vacía en producción rompe la credibilidad.
- NO uses la misma lista genérica para todos los servicios: el cliente compara servicios; si todos dicen «Comunicación en cada etapa», deja de distinguirlos.
Continúa con la guía
Las siguientes piezas del flujo.