Orientación antes que persuasión
El hero responde «¿estoy en el lugar correcto?» antes de intentar vender. Un visitante orientado que decide seguir leyendo convierte más que uno que recibió 3 botones antes de saber qué ofreces.
Guía de servicios · El copy
El copy: propuesta de valor en 5 segundos
El visitor decide si sigue leyendo en los primeros 5 segundos. El hero tiene cuatro piezas —badge, title+accent, subtitle y descRight— y ninguna de ellas lleva un botón de venta.
El copy del servicio no describe el proceso desde adentro: presenta el problema que el cliente vino a resolver y por qué este servicio lo resuelve. La diferencia es de perspectiva: desde el cliente, no desde el proveedor.
Esta pieza documenta cómo se arma cada elemento del Hero para un servicio: qué función cumple, cómo se escribe y qué errores conviene evitar. El hero orienta; el cierre convierte.
Definición
¿Qué es el copy del servicio?
El texto del Hero que comunica qué resuelve el servicio y para quién, en los primeros 5 segundos de la visita. No enumera tareas ni describe procesos: orienta la decisión del cliente.
El copy del servicio es el conjunto de textos del Hero: badge, title+accent, subtitle y descRight. No es la descripción completa del servicio —eso va en el alcance y el proceso—; es la primera capa, la que responde «¿esto es lo que necesito?» antes de que el visitante decida si sigue leyendo o cierra la pestaña.
La diferencia entre un hero efectivo y uno que no convierte suele estar en la perspectiva: el inefectivo describe el servicio desde adentro («Ofrecemos implementación con tecnología de punta»); el efectivo lo presenta desde el problema del cliente («Del acuerdo al sitio publicado, con un proceso claro y sin sorpresas»). Mismo servicio, distinto ángulo.
Función e importancia
¿Para qué sirve?
Orienta al visitante, valida que llegó al lugar correcto y le da suficiente contexto para decidir si quiere seguir leyendo. No vende — eso lo hace el cierre.
El hero cumple un único trabajo: que el visitante correcto se quede. No tiene que convencer a todos —solo a quienes el servicio les resuelve algo. Un hero honesto que describe exactamente para quién es el servicio reduce el rebote de visitantes mal cualificados y retiene a los que sí pueden contratar.
El segundo trabajo es SEO: el title+accent es el H1 de la página y la keyword principal del servicio debe ir en las primeras palabras. Así carga el peso de ranking y el CTR en el resultado de Google. Pero entra de forma natural en la propuesta —no apilada al inicio—.
Keyword-first sin spam
El title+accent lleva la keyword principal del servicio en las primeras palabras —así sobrevive el truncado en Google y carga el peso de ranking—, pero entra de forma natural en la propuesta de valor, sin apilar términos.
descRight = el argumento, no el resumen
Los dos párrafos complementan lo que el subtitle no puede decir en una frase: profundizan en el problema, explican el método y anticipan el resultado. No repiten el subtitle —amplían desde otro ángulo.
Anatomía
Las 4 piezas del Hero de servicio
Badge, title+accent, subtitle y descRight. Cada una con una función específica. El hero funciona cuando las cuatro hacen su trabajo sin solaparse.
Las cuatro piezas se leen en cascada: el badge da contexto («Servicio»), el title+accent da nombre a la entidad, el subtitle responde «¿es esto para mí?» y el descRight amplía para quien quiere más detalle antes de comprometerse. La cascada funciona si cada pieza hace su trabajo sin robarle el de la siguiente.
Abajo, cada pieza con su función y su regla de escritura. El ejemplo en vivo muestra cómo se ven juntas en la página.
Servicio · Consultoría ⟵ Sin botones aquí
Consultoría: asesoría honesta
Antes de invertir, definimos contigo qué necesitas y por qué — diagnóstico claro, sin venderte de más.
Descripción del problema que resuelve el servicio. Qué pasa cuando no se resuelve y por qué este servicio lo aborda de forma correcta.
Qué sigue: cómo funciona el servicio, qué recibirá el cliente al final del proceso. El siguiente paso natural.
Badge — contexto de sección
Etiqueta corta que ubica al visitante: «Servicio», «Guía de servicios · El copy». Aparece sobre el título, en mayúsculas pequeñas. Da contexto sin consumir jerarquía tipográfica.
Dato badge: string — «Servicio» | «Servicio · Consultoría»
title + accent — la entidad central
El H1 de la página. title es la parte principal (color ink); accent es el fragmento destacado (color primary). Juntos forman la propuesta de valor breve: «Consultoría:» + «asesoría honesta». Lleva la keyword principal.
Dato title: string + accent: string → <h1>title <em>accent</em></h1>
subtitle — la propuesta de valor en una frase
Una sola frase directa que responde: ¿qué resuelve este servicio y para quién? No describe el proceso —eso va en el cuerpo—; orienta al visitante sobre si esto es para él. 15–25 palabras.
Dato subtitle: string — 1 frase directa, ≤25 palabras, sin CTAs
descRight — 2 párrafos complementarios
Dos párrafos que amplían el subtitle SIN repetirlo. El primero profundiza en el problema que resuelve; el segundo explica qué sigue (cómo funciona, qué recibirá). NUNCA llevan CTAs ni botones de venta.
Dato descRight: [string, string] — amplían, complementan, cero CTAs
Variantes
Tipos de hero según el servicio
El molde es el mismo para todos —badge, title+accent, subtitle, descRight—; lo que cambia es el ángulo del copy según el tipo de servicio. Seis variantes reales del sistema.
No hay un copy universal: hay un molde universal con textos que varían según lo que el cliente viene a resolver. Un servicio técnico habla de resultados concretos; uno de acompañamiento habla de decisiones; uno continuo habla de tranquilidad en el tiempo.
Abajo, seis variantes —todas válidas con el mismo Hero component—. Solo cambia el texto, no el componente.
- Servicio
- Servicio
- Servicio
- Servicio
- Servicio
- Servicio
Responsive y móvil
El hero, en el teléfono
El hero de 2 columnas (title izq · descRight der) apila en el teléfono: title arriba, descRight abajo. El Hero component lo resuelve sin código extra.
El Hero component ya está construido para apilar en móvil: las 2 columnas de escritorio se convierten en 1 columna con el mismo orden. El badge, el H1, el subtitle y el descRight se leen de arriba a abajo de forma natural —mismo flujo que en escritorio, adaptado al ancho del teléfono.
La regla de «sin CTAs en el hero» aplica con más fuerza en móvil: la pantalla es pequeña y un botón en el hero compite con el H1 por la atención. El botón de WhatsApp flotante ya está siempre visible; el CTA principal del cierre cierra la página.
Servicio
Hero 2 col → 1 col en móvil
title izq + descRight der en escritorio → apilados en móvil. El componente ya lo resuelve. Sin código extra ni breakpoints en la página.
---
// src/pages/servicios/[...slug].astro — el hero de cada servicio
// Los textos del hero salen del frontmatter del .md (o del mapa DETALLE local).
// Regla: cero CTAs en el hero. El subtitle = propuesta de valor directa.
---
<Hero
badge="Servicio"
title={label} {/* keyword principal del servicio */}
accent="" {/* parte destacada del H1 en color primary */}
subtitle={det.lede} {/* propuesta de valor, ≤25 palabras, sin CTAs */}
descRight={[
desc, {/* qué resuelve (el problema) */}
'Aquí encuentras lo concreto: qué incluye, cómo trabajamos y las dudas frecuentes.',
{/* qué sigue: cómo funciona, qué recibirá */}
]}
/> ✓ badge contextual ✓ keyword en H1 ✓ subtitle ≤25 palabras ✓ descRight = 2 ángulos ✗ sin CTAs en hero
Checklist del copy antes de publicar
Cinco preguntas que validan el copy del hero antes de subir la página. Si alguna falla, la pieza que no cumple necesita revisión.
/* Checklist del copy del hero de servicio:
✓ badge → «Servicio» | «Servicio · Categoría»
✓ title → nombre del servicio (keyword principal)
✓ accent → resultado o matiz destacado (en color primary)
✓ subtitle → propuesta de valor ≤25 palabras, desde el problema del cliente
✓ descRight → [qué resuelve, qué sigue] — nunca el mismo ángulo dos veces
✗ NO button/CTA en el hero
✗ NO adjetivos vacíos (profesional, integral, de calidad)
✗ NO repetir el subtitle en descRight */Posición
¿Dónde vive el copy del servicio?
En el Hero de la ficha L3 del servicio (/servicios/<slug>). El hero es siempre el primer componente de la página, antes del alcance, el proceso y las FAQs.
El copy del servicio vive en el Hero de la ficha de detalle. En el sistema, el hero es siempre el primer componente de la página —antes del breadcrumb anidado, antes del alcance, antes del proceso—. Es lo primero que ve el visitante y lo que determina si sigue leyendo.
Para el hub /servicios (L2), el hero también es el primero, pero el copy es distinto: no presenta un servicio específico sino el catálogo completo. La propuesta de valor es «qué tipo de trabajo ofrece la empresa», no «qué resuelve este servicio».
Implementación
Cómo se escribe y se construye
El copy se escribe en el .md o en el mapa DETALLE del slug.astro; el Hero component lo renderiza. Cuatro props de texto; cero lógica extra en el componente.
El copy del hero viene de dos fuentes: si el servicio tiene ficha en la colección (src/content/servicios/), el title sale de entry.data.title y el lede de entry.data.description; si no, vienen del mapa DETALLE local del slug.astro (el respaldo genérico). En ambos casos, el Hero component recibe cuatro props de texto.
El componente no tiene lógica de conversión: no decide si mostrar un CTA o no, no evalúa si el servicio está featured. Recibe texto y lo renderiza. La decisión de NO poner CTAs en el hero es del autor de la página, no del componente.
---
// src/pages/servicios/[...slug].astro — el hero de cada servicio
// Los textos del hero salen del frontmatter del .md (o del mapa DETALLE local).
// Regla: cero CTAs en el hero. El subtitle = propuesta de valor directa.
---
<Hero
badge="Servicio"
title={label} {/* keyword principal del servicio */}
accent="" {/* parte destacada del H1 en color primary */}
subtitle={det.lede} {/* propuesta de valor, ≤25 palabras, sin CTAs */}
descRight={[
desc, {/* qué resuelve (el problema) */}
'Aquí encuentras lo concreto: qué incluye, cómo trabajamos y las dudas frecuentes.',
{/* qué sigue: cómo funciona, qué recibirá */}
]}
/>/* Checklist del copy del hero de servicio:
✓ badge → «Servicio» | «Servicio · Categoría»
✓ title → nombre del servicio (keyword principal)
✓ accent → resultado o matiz destacado (en color primary)
✓ subtitle → propuesta de valor ≤25 palabras, desde el problema del cliente
✓ descRight → [qué resuelve, qué sigue] — nunca el mismo ángulo dos veces
✗ NO button/CTA en el hero
✗ NO adjetivos vacíos (profesional, integral, de calidad)
✗ NO repetir el subtitle en descRight */La regla canónica del hero de servicio: orientar, no vender. El visitante llegó porque tiene una necesidad; el hero la valida y le dice «sí, estás en el lugar correcto». Los CTAs de conversión van al SectionMenu de cierre y al CTABanner, donde el visitante ya leyó lo que necesitaba y está listo para actuar. Un hero que presiona antes de informar sube el rebote sin aumentar las conversiones.
Buenas prácticas
Qué hacer y qué evitar
Casi todo el copy falla por el mismo motivo: se escribe desde el servicio, no desde el cliente. La regla de oro es ponerse en el lugar del visitante que llega sin saber si esto es para él.
Los errores más comunes no son de redacción: son de perspectiva. Un subtitle que describe el proceso en lugar de la propuesta, un descRight que repite el subtitle en otras palabras, un hero con tres botones compitiendo. La corrección es siempre la misma: volver al cliente.
Sí conviene
- Escribe el subtitle desde el problema del cliente: «Antes de invertir, conviene saber exactamente qué necesitas y por qué» es mejor que «Ofrecemos un servicio de consultoría».
- La keyword principal del servicio va en title o accent (primeras palabras del H1). Así carga el ranking y el CTR en el resultado de Google.
- descRight[0] = qué resuelve (el problema, el dolor). descRight[1] = qué sigue (cómo funciona, qué recibirá). Dos párrafos distintos, no el mismo ángulo dos veces.
- Mantén el subtitle en ≤25 palabras. Si necesitas más, estás describiendo el proceso, no la propuesta: mueve ese texto a descRight.
- La regla es una: sin CTAs en el hero. No «Cotiza aquí», no «Escríbenos», no «Ver precios». El hero orienta; el cierre convierte.
Mejor evita
- NO pongas CTAs ni botones de venta en el hero. El hero no es la zona de conversión — el SectionMenu de cierre y el CTABanner sí lo son.
- NO repitas el subtitle en descRight con otras palabras: amplía, no parafrasea. «Antes de invertir…» no puede reaparecer en otra forma en el párrafo siguiente.
- NO describas el proceso en el subtitle: guárdalo para el alcance y el proceso. El subtitle responde «¿es esto para mí?», no «¿cómo lo hacen?».
- NO dejes el accent vacío: si no hay parte destacada natural, únela al title. Un accent vacío genera un H1 incompleto y roto tipográficamente.
- NO uses adjetivos vacíos: «profesional», «de calidad», «integral». Cada adjetivo debe ser respaldable y específico; si no, elimínalo.
Continúa con la guía
Las siguientes piezas del flujo.