CategoryFeature: el spotlight de categoría que convierte en Astro

Hay una diferencia entre mostrar un catálogo y vender una categoría. El grid de CategoryCard muestra: ocho tarjetas, ocho nombres, ocho imágenes, ocho CTAs que dicen «ver más». El visitante recorre la vista de izquierda a derecha, asiente, y sigue bajando sin detenerse en ninguna. La información está, pero no convence. Para convencer, hace falta un módulo que abra UNA categoría y la defienda: que diga por qué esta y no las demás, que muestre el catálogo con una galería real y que ponga el CTA cuando el visitante aún tiene la argumentación fresca.

Eso es lo que resuelve CategoryFeature.

Qué problema resuelve

En una home típica de negocio local, el flujo es el siguiente: el hero presenta la promesa general, el grid de categorías ofrece el menú, y el visitante elige. Pero si el negocio tiene una categoría que representa el 60 % de sus ventas —extintores, sistemas contra incendio, instalación de alarmas, lo que sea— esa categoría necesita más que una tarjeta. Necesita argumentación.

CategoryFeature entra justo después del grid de categorías como un spotlight. Su trabajo no es repetir lo que ya dice la tarjeta: es profundizar en UNA categoría antes de que el visitante decida entrar a su página. Si el visitante llega a la home con intención de comprar equipos contra incendio y ve un bloque con cuatro bullets de por qué este catálogo, las marcas que maneja y una galería de tres fotos del producto, el porcentaje que entra a la página de la categoría sube. Menos rebote, más profundidad de visita.

Anatomía del componente

El componente se divide en dos columnas en desktop, apiladas en móvil:

Columna izquierda (texto):

1. Eyebrow con barra lateral en color de marca — sitúa el bloque en su contexto.
2. Título en H2 con acento opcional (titleAccent) — la segunda parte del título en color de marca, sin CSS extra.
3. Description — párrafo de contexto que no repite los bullets.
4. features[] — lista de puntos con ícono check en caja de color de marca. Cada ítem: label en negrita + desc breve.
5. brands? — fila de pills con nombre de marca y nota opcional. Array vacío oculta el bloque.
6. CTA con flecha — botón de fondo sólido con ícono de flecha que viaja en hover.

Columna derecha (galería): 7. imgMain — imagen grande, aspect-ratio 16/10. 8. imgA + imgB — dos imágenes pequeñas en grid de 2 columnas, aspect-ratio 4/3.

<CategoryFeature
  eyebrow="NOM-154 · A·B·C"
  title="Extintores para"
  titleAccent="cada clase de fuego"
  description="El catálogo más completo de extintores portátiles: agua, PQS, CO₂ y espuma. Te ayudamos a elegir el modelo correcto según tu tipo de inmueble y el riesgo que necesitas cubrir."
  features={[
    { label: 'Norma NOM-154',           desc: 'Certificación obligatoria en CDMX para todo extintor.' },
    { label: 'Entrega e instalación',   desc: 'Incluye montaje, señalización y capacitación básica.' },
    { label: 'Recarga y mantenimiento', desc: 'Servicio periódico para mantener vigencia normativa.' },
    { label: 'Documentación incluida',  desc: 'Ficha técnica y constancia para Protección Civil.' },
  ]}
  brands={[
    { name: 'Marca A' },
    { name: 'Marca B', note: 'recomendado' },
    { name: 'Marca C' },
  ]}
  ctaLabel="Ver catálogo de extintores"
  ctaHref="/productos/extintores"
  imgMain={{ src: '/images/productos/extintor-principal.avif',  alt: 'Extintor PQS 6 kg para uso general' }}
  imgA={{ src: '/images/productos/extintor-co2.avif',           alt: 'Extintor CO₂ para equipos eléctricos' }}
  imgB={{ src: '/images/productos/extintor-agua.avif',          alt: 'Extintor de agua para clase A' }}
/>

El patrón flip: dos spotlights sin monotonía

Cuando la home tiene dos categorías principales que merecen spotlight, usar el mismo layout dos veces seguidas (texto izquierda, galería derecha) crea una página monótona. La prop flip={true} invierte el orden: la galería va a la izquierda y el texto a la derecha, alternando el ritmo visual sin cambiar nada más.

<!-- Primera categoría: texto izq, galería der (default) -->
<CategoryFeature
  eyebrow="Categoría principal"
  title="Extintores portátiles"
  ...
/>

<!-- Segunda categoría: galería izq, texto der (flip) -->
<CategoryFeature
  eyebrow="Segunda categoría"
  title="Sistemas de detección"
  ...
  surface={true}
  flip={true}
/>

En móvil, flip no tiene efecto: siempre apila galería encima de texto, sin importar el valor. Esto es intencional: en pantallas estrechas el orden de lectura natural (imagen → argumentación → CTA) no debe cambiar.

Cuándo usar CategoryFeature vs CategoryDetail

La confusión más común entre los dos módulos de 2 columnas:

CategoryDetail amplía una categoría con texto largo y galería. Es el módulo de «más información» para quien ya mostró interés y está dentro de la página de la categoría (L2) o en un bloque «a fondo» en la home.

CategoryFeature es un spotlight: vende la categoría antes de que el visitante entre. Bullets escaneables, marcas como prueba social, CTA prominente. Va en la home o en una landing, no dentro de la página de la categoría.

Regla práctica: si ya estás DENTRO de la página de la categoría, usa CategoryDetail. Si estás en la home y quieres convencer antes de que el visitante entre, usa CategoryFeature.

Props que hacen el trabajo

Prop	Tipo	Descripción
eyebrow	string	Etiqueta corta con barra lateral en color de marca.
title	string	Primera parte del H2.
titleAccent	string?	Segunda parte del H2, en color de marca.
description	string	Párrafo de contexto — no repite los bullets.
features	{label, desc}[]	Bullets con check.
brands	{name, note?}[]?	Pills de marcas. Array vacío oculta el bloque.
ctaLabel	string	Texto del botón CTA.
ctaHref	string	Destino del CTA.
imgMain	{src, alt}	Imagen principal (16/10).
imgA	{src, alt}	Imagen secundaria A (4/3).
imgB	{src, alt}	Imagen secundaria B (4/3).
surface	boolean?	Fondo gris claro (--c-surface). Default: fondo blanco.
flip	boolean?	Galería a la izquierda, texto a la derecha.

Reglas de uso

Haz esto:

• Una instancia de CategoryFeature por cada 2-3 CategoryCard del grid para dar ritmo.
• flip={true} cuando hay dos spotlights seguidos.
• Deja brands vacío si el negocio no trabaja marcas comerciales — el bloque desaparece.
• Mantén features entre 3 y 5 ítems. Más de 5 convierte el spotlight en una ficha.

Evita esto:

• No uses CategoryFeature para TODAS las categorías — es un spotlight, no un grid. El grid usa CategoryCard.
• No repitas en description lo que ya dicen los features.
• No inventes marcas para el array brands. Si llega vacío, la sección se oculta sola.
• No uses titleAccent en el mismo texto de title — son props separadas por diseño.

Dónde vive en la plantilla

El componente vive en src/components/CategoryFeature.astro. La página de módulo está en src/pages/modulos/category-feature.astro con dos instancias en vivo, anatomía completa, beneficios y Do’s & Don’ts. En la home (src/pages/index.astro) hay una instancia después del bloque de módulos «a fondo».