@arroyavecommerce/theme-kinetic 0.2.0

package/src/blocks/editorial-banner.tsx

@@ -0,0 +1,205 @@
+import { z } from "zod"
+import type { BlockDefinition } from "@arroyavecommerce/cms-core"
+import { linkSchema } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+import { resolverFondo, type Fondo, FONDOS } from "./_shared"
+
+export type EditorialBannerProps = {
+  posicionImagen: "derecha" | "izquierda" | "fondo"
+  /**
+   * Fondo del panel en las variantes con imagen al lado (`derecha`,
+   * `izquierda`). La variante `fondo` (imagen a sangre) NO se ve afectada.
+   * Default `superficie`: resuelve a los mismos tokens que ya se usaban, así el
+   * render actual no cambia.
+   */
+  fondo: Fondo
+  titulo: string
+  texto: string
+  imagenUrl: string
+  enlace: { texto: string; href: string }
+}
+
+const editorialBannerSchema: z.ZodType<EditorialBannerProps> = z.object({
+  posicionImagen: z.enum(["derecha", "izquierda", "fondo"]),
+  fondo: z.enum(FONDOS),
+  titulo: z.string().min(1),
+  texto: z.string(),
+  imagenUrl: z.string(),
+  enlace: linkSchema,
+})
+
+const editorialBannerDefaults: EditorialBannerProps = {
+  posicionImagen: "derecha",
+  fondo: "superficie",
+  titulo: "Cómo armar un uniforme urbano con 5 piezas",
+  texto: "Guía de estilo: combinaciones para la semana completa sin repetir look.",
+  imagenUrl: "",
+  enlace: { texto: "Descubrir", href: "/collections/editorial" },
+}
+
+function Etiqueta({ children }: { children: string }) {
+  return (
+    <div
+      className="text-[11px] font-semibold tracking-[0.16em]"
+      style={{ fontFamily: "var(--cms-fuente-mono)", color: "var(--cms-acento)" }}
+    >
+      {children}
+    </div>
+  )
+}
+
+/** Único heading de sección del bloque: `<h2>` (no `<h1>`, ese es del hero). */
+function Titulo({ children, className }: { children: string; className?: string }) {
+  return (
+    <h2
+      className={`m-0 text-2xl leading-[1.15] md:text-[34px] ${className ?? ""}`}
+      style={{
+        fontFamily: "var(--cms-fuente-titulo)",
+        fontWeight: "var(--cms-titulo-peso)",
+        textTransform: "var(--cms-titulo-transform)",
+        letterSpacing: "var(--cms-titulo-espaciado)",
+      }}
+    >
+      {children}
+    </h2>
+  )
+}
+
+/** Enlace no acepta `style`: la variable de tema va en clases arbitrarias de Tailwind. */
+function BotonSecundario({
+  texto,
+  href,
+  ctx,
+  className,
+}: {
+  texto: string
+  href: string
+  ctx: RenderContext
+  className?: string
+}) {
+  const { Enlace } = ctx.componentes
+  return (
+    <Enlace
+      href={href}
+      className={`inline-block px-[22px] py-[11px] text-center text-[11.5px] font-semibold uppercase tracking-[0.08em] [border:1.5px_solid_currentColor] [border-radius:var(--cms-radio)] [font-family:var(--cms-fuente-texto)] ${className ?? ""}`}
+    >
+      {texto}
+    </Enlace>
+  )
+}
+
+function Contenido({
+  props,
+  ctx,
+  className,
+}: {
+  props: EditorialBannerProps
+  ctx: RenderContext
+  className?: string
+}) {
+  const f = resolverFondo(props.fondo)
+  return (
+    <div className={`flex flex-col justify-center gap-3 px-6 py-8 md:gap-3.5 md:px-12 md:py-[52px] ${className ?? ""}`}>
+      <Etiqueta>EDITORIAL</Etiqueta>
+      <Titulo>{props.titulo}</Titulo>
+      <p className="m-0 max-w-[420px] text-sm leading-relaxed" style={{ color: f.colorSuave }}>
+        {props.texto}
+      </p>
+      <div>
+        <BotonSecundario texto={props.enlace.texto} href={props.enlace.href} ctx={ctx} />
+      </div>
+    </div>
+  )
+}
+
+function Derecha({ props, ctx }: { props: EditorialBannerProps; ctx: RenderContext }) {
+  const { Imagen } = ctx.componentes
+  const f = resolverFondo(props.fondo)
+  return (
+    <div
+      className="grid w-full grid-cols-1 overflow-hidden md:grid-cols-[1.1fr_1fr]"
+      style={{
+        background: f.background,
+        color: f.color,
+        border: `var(--cms-grosor-borde) solid ${f.borde}`,
+        borderRadius: "var(--cms-radio)",
+      }}
+    >
+      <Contenido props={props} ctx={ctx} className="order-2 md:order-1" />
+      <Imagen
+        src={props.imagenUrl}
+        alt={props.titulo}
+        className="order-1 aspect-[4/3] w-full object-cover md:order-2 md:aspect-auto md:min-h-[320px]"
+      />
+    </div>
+  )
+}
+
+function Izquierda({ props, ctx }: { props: EditorialBannerProps; ctx: RenderContext }) {
+  const { Imagen } = ctx.componentes
+  const f = resolverFondo(props.fondo)
+  return (
+    <div
+      className="grid w-full grid-cols-1 overflow-hidden md:grid-cols-[1fr_1.1fr]"
+      style={{
+        background: f.background,
+        color: f.color,
+        border: `var(--cms-grosor-borde) solid ${f.borde}`,
+        borderRadius: "var(--cms-radio)",
+      }}
+    >
+      <Imagen
+        src={props.imagenUrl}
+        alt={props.titulo}
+        className="aspect-[4/3] w-full object-cover md:aspect-auto md:min-h-[320px]"
+      />
+      <Contenido props={props} ctx={ctx} />
+    </div>
+  )
+}
+
+function Fondo({ props, ctx }: { props: EditorialBannerProps; ctx: RenderContext }) {
+  const { Imagen } = ctx.componentes
+  return (
+    <div className="relative min-h-[320px] w-full overflow-hidden md:min-h-[420px]" style={{ borderRadius: "var(--cms-radio)" }}>
+      <Imagen
+        src={props.imagenUrl}
+        alt={props.titulo}
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      <div
+        className="absolute inset-x-0 bottom-0 flex flex-col gap-3 px-6 pb-8 pt-16 text-white md:gap-3.5 md:px-12 md:pb-10 md:pt-24"
+        style={{ background: "linear-gradient(transparent, rgba(0,0,0,.72))" }}
+      >
+        <Etiqueta>EDITORIAL</Etiqueta>
+        <Titulo className="text-white">{props.titulo}</Titulo>
+        <p className="m-0 max-w-[420px] text-sm leading-relaxed text-white/80">{props.texto}</p>
+        <div>
+          <BotonSecundario
+            texto={props.enlace.texto}
+            href={props.enlace.href}
+            ctx={ctx}
+            className="border-white text-white"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const editorialBannerBlock: BlockDefinition<EditorialBannerProps, RenderContext> = {
+  label: "Banda editorial",
+  schema: editorialBannerSchema,
+  defaults: editorialBannerDefaults,
+  Component: ({ props, ctx }) => {
+    switch (props.posicionImagen) {
+      case "izquierda":
+        return <Izquierda props={props} ctx={ctx} />
+      case "fondo":
+        return <Fondo props={props} ctx={ctx} />
+      case "derecha":
+      default:
+        return <Derecha props={props} ctx={ctx} />
+    }
+  },
+}

package/src/blocks/faq.test.tsx

@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { faqBlock } from "./faq"
+import { FONDOS } from "./_shared"
+import { mockCtx } from "../test/mock-ctx"
+
+describe("faqBlock", () => {
+  it("defaults pasan el schema", () => {
+    expect(faqBlock.schema.safeParse(faqBlock.defaults).success).toBe(true)
+  })
+
+  it.each(FONDOS)("renderiza sin crash con fondo %s", (fondo) => {
+    const props = { ...faqBlock.defaults, fondo }
+    expect(faqBlock.schema.safeParse(props).success).toBe(true)
+    const html = renderToStaticMarkup(<faqBlock.Component props={props} ctx={mockCtx()} />)
+    for (const item of faqBlock.defaults.items) {
+      expect(html).toContain(item.pregunta)
+      expect(html).toContain(item.respuesta)
+    }
+  })
+
+  it("usa <details>/<summary> nativos (accesible, sin JS)", () => {
+    const html = renderToStaticMarkup(<faqBlock.Component props={faqBlock.defaults} ctx={mockCtx()} />)
+    expect((html.match(/<details/g) ?? []).length).toBe(faqBlock.defaults.items.length)
+    expect((html.match(/<summary/g) ?? []).length).toBe(faqBlock.defaults.items.length)
+  })
+
+  it("renderiza un item por pregunta (editable)", () => {
+    const props = {
+      fondo: "claro" as const,
+      titulo: "FAQ",
+      items: [
+        { pregunta: "P1", respuesta: "R1" },
+        { pregunta: "P2", respuesta: "R2" },
+        { pregunta: "P3", respuesta: "R3" },
+      ],
+    }
+    const html = renderToStaticMarkup(<faqBlock.Component props={props} ctx={mockCtx()} />)
+    expect((html.match(/<details/g) ?? []).length).toBe(3)
+  })
+
+  it("item sin pregunta o respuesta no pasa el schema", () => {
+    expect(
+      faqBlock.schema.safeParse({ fondo: "claro", items: [{ pregunta: "", respuesta: "x" }] }).success
+    ).toBe(false)
+    expect(
+      faqBlock.schema.safeParse({ fondo: "claro", items: [{ pregunta: "x", respuesta: "" }] }).success
+    ).toBe(false)
+  })
+
+  it("titulo opcional: sin titulo no pinta <h2>", () => {
+    const html = renderToStaticMarkup(
+      <faqBlock.Component props={{ fondo: "claro", items: [{ pregunta: "P", respuesta: "R" }] }} ctx={mockCtx()} />
+    )
+    expect(html).not.toContain("<h2")
+  })
+
+  it("respeta prefers-reduced-motion (apaga la transición del chevron)", () => {
+    const html = renderToStaticMarkup(<faqBlock.Component props={faqBlock.defaults} ctx={mockCtx()} />)
+    expect(html).toContain("prefers-reduced-motion: reduce")
+    expect(html).toContain("transition:none")
+  })
+
+  it("no usa <h1>", () => {
+    const html = renderToStaticMarkup(<faqBlock.Component props={faqBlock.defaults} ctx={mockCtx()} />)
+    expect(html).not.toMatch(/<h1[ >]/)
+  })
+})

package/src/blocks/faq.tsx

@@ -0,0 +1,122 @@
+import { z } from "zod"
+import type { BlockDefinition } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+import { Seccion, TituloSeccion, resolverFondo, type Fondo, FONDOS } from "./_shared"
+
+/**
+ * Preguntas frecuentes: acordeón accesible construido con `<details>/<summary>`
+ * nativos — sin JS, funciona con teclado y lectores de pantalla por defecto. El
+ * chevron rota con una transición sutil que se apaga bajo `prefers-reduced-motion`.
+ */
+
+export type FaqItem = {
+  pregunta: string
+  respuesta: string
+}
+
+export type FaqProps = {
+  fondo: Fondo
+  titulo?: string
+  items: FaqItem[]
+}
+
+const faqItemSchema: z.ZodType<FaqItem> = z.object({
+  pregunta: z.string().min(1),
+  respuesta: z.string().min(1),
+})
+
+const faqSchema: z.ZodType<FaqProps> = z.object({
+  fondo: z.enum(FONDOS),
+  titulo: z.string().optional(),
+  items: z.array(faqItemSchema),
+})
+
+const faqDefaults: FaqProps = {
+  fondo: "claro",
+  titulo: "Preguntas frecuentes",
+  items: [
+    {
+      pregunta: "¿Cuánto tarda el envío?",
+      respuesta: "Despachamos en 24–48h hábiles a toda Colombia. El envío es gratis desde $150.000.",
+    },
+    {
+      pregunta: "¿Puedo cambiar o devolver una prenda?",
+      respuesta: "Sí, tenés 30 días para cambios y devoluciones. Escribinos por chat o WhatsApp y lo gestionamos.",
+    },
+    {
+      pregunta: "¿Qué métodos de pago aceptan?",
+      respuesta: "Aceptamos PSE, tarjeta de crédito/débito y pago en efectivo contra entrega en ciudades principales.",
+    },
+    {
+      pregunta: "¿Cómo elijo mi talla?",
+      respuesta: "Cada producto tiene su guía de tallas. Ante la duda, escribinos y te ayudamos a elegir.",
+    },
+  ],
+}
+
+/** CSS del chevron: rota al abrir; se desactiva bajo prefers-reduced-motion. */
+const CSS_FAQ =
+  ".cms-faq summary{list-style:none;cursor:pointer}" +
+  ".cms-faq summary::-webkit-details-marker{display:none}" +
+  ".cms-faq-chevron{transition:transform .25s ease}" +
+  ".cms-faq[open] .cms-faq-chevron{transform:rotate(180deg)}" +
+  "@media (prefers-reduced-motion: reduce){.cms-faq-chevron{transition:none}}"
+
+function Chevron({ color }: { color: string }) {
+  return (
+    <svg
+      className="cms-faq-chevron shrink-0"
+      viewBox="0 0 24 24"
+      width="18"
+      height="18"
+      fill="none"
+      stroke={color}
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M6 9l6 6 6-6" />
+    </svg>
+  )
+}
+
+export const faqBlock: BlockDefinition<FaqProps, RenderContext> = {
+  label: "Preguntas frecuentes",
+  schema: faqSchema,
+  defaults: faqDefaults,
+  Component: ({ props }) => {
+    const f = resolverFondo(props.fondo)
+    return (
+      <Seccion fondo={props.fondo} ariaLabel={props.titulo || "Preguntas frecuentes"}>
+        <style dangerouslySetInnerHTML={{ __html: CSS_FAQ }} />
+        <div className="mx-auto w-full max-w-3xl">
+          {props.titulo ? <TituloSeccion className="mb-8 text-center">{props.titulo}</TituloSeccion> : null}
+          <div className="flex flex-col">
+            {props.items.map((item, i) => (
+              <details
+                key={i}
+                className="cms-faq group"
+                style={{ borderTop: `var(--cms-grosor-borde) solid ${f.borde}` }}
+              >
+                <summary className="flex items-center justify-between gap-4 py-5">
+                  <span
+                    className="text-[15px] font-semibold md:text-base"
+                    style={{ fontFamily: "var(--cms-fuente-texto)" }}
+                  >
+                    {item.pregunta}
+                  </span>
+                  <Chevron color={f.acento} />
+                </summary>
+                <p className="m-0 pb-5 text-[14px] leading-relaxed" style={{ color: f.colorSuave }}>
+                  {item.respuesta}
+                </p>
+              </details>
+            ))}
+          </div>
+        </div>
+      </Seccion>
+    )
+  },
+}

package/src/blocks/featured-collection.test.tsx

@@ -0,0 +1,80 @@
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import type { HttpTypes } from "@medusajs/types"
+import { featuredCollectionBlock } from "./featured-collection"
+import { FONDOS } from "./_shared"
+import { mockCtx } from "../test/mock-ctx"
+
+const productos = [
+  { id: "p1", title: "Sneaker Runner", handle: "sneaker-runner", thumbnail: null, collection_id: "col_1", variants: [] },
+  { id: "p2", title: "Hoodie Heavy", handle: "hoodie-heavy", thumbnail: null, collection_id: "col_2", variants: [] },
+] as unknown as HttpTypes.StoreProduct[]
+
+describe("featuredCollectionBlock", () => {
+  it("defaults pasan el schema", () => {
+    expect(featuredCollectionBlock.schema.safeParse(featuredCollectionBlock.defaults).success).toBe(true)
+  })
+
+  it.each(FONDOS)("renderiza sin crash con fondo %s", (fondo) => {
+    const props = { ...featuredCollectionBlock.defaults, fondo }
+    expect(featuredCollectionBlock.schema.safeParse(props).success).toBe(true)
+    const html = renderToStaticMarkup(
+      <featuredCollectionBlock.Component props={props} ctx={mockCtx({ products: productos })} />
+    )
+    expect(html).toContain(featuredCollectionBlock.defaults.titulo)
+    expect(html).toContain("Sneaker Runner")
+  })
+
+  it("es un carrusel con snap horizontal", () => {
+    const html = renderToStaticMarkup(
+      <featuredCollectionBlock.Component
+        props={featuredCollectionBlock.defaults}
+        ctx={mockCtx({ products: productos })}
+      />
+    )
+    expect(html).toContain("snap-x")
+    expect(html).toContain("snap-start")
+    expect(html).toContain("overflow-x-auto")
+  })
+
+  it("filtra por coleccionId cuando se indica", () => {
+    const props = { ...featuredCollectionBlock.defaults, coleccionId: "col_1" }
+    const html = renderToStaticMarkup(
+      <featuredCollectionBlock.Component props={props} ctx={mockCtx({ products: productos })} />
+    )
+    expect(html).toContain("Sneaker Runner")
+    expect(html).not.toContain("Hoodie Heavy")
+  })
+
+  it("muestra el enlace 'ver todos'", () => {
+    const html = renderToStaticMarkup(
+      <featuredCollectionBlock.Component
+        props={featuredCollectionBlock.defaults}
+        ctx={mockCtx({ products: productos })}
+      />
+    )
+    expect(html).toContain(featuredCollectionBlock.defaults.verTodos.texto)
+    expect(html).toContain(`href="${featuredCollectionBlock.defaults.verTodos.href}"`)
+  })
+
+  it("sin productos muestra estado vacío en vez de romper", () => {
+    const html = renderToStaticMarkup(
+      <featuredCollectionBlock.Component
+        props={featuredCollectionBlock.defaults}
+        ctx={mockCtx({ products: [] })}
+      />
+    )
+    expect(html).toContain("Pronto verás productos")
+  })
+
+  it("titulo es <h2>, nunca <h1>", () => {
+    const html = renderToStaticMarkup(
+      <featuredCollectionBlock.Component
+        props={featuredCollectionBlock.defaults}
+        ctx={mockCtx({ products: productos })}
+      />
+    )
+    expect(html).toContain("<h2")
+    expect(html).not.toMatch(/<h1[ >]/)
+  })
+})

package/src/blocks/featured-collection.tsx

@@ -0,0 +1,97 @@
+import { z } from "zod"
+import type { BlockDefinition } from "@arroyavecommerce/cms-core"
+import { linkSchema } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+import { TarjetaProducto, type CardVariant } from "../catalog/product-card"
+import { CLASE_REVEAL, Seccion, TituloSeccion, resolverFondo, type Fondo, FONDOS } from "./_shared"
+import { Carrusel } from "./carrusel"
+
+/**
+ * Carrusel horizontal de productos (distinto de la grilla estática): slider con
+ * flechas + snap, scrollbar oculto. Reusa `TarjetaProducto`. `coleccionId`
+ * filtra `ctx.products`.
+ *
+ * Nota: `coleccionId` es texto (igual que `productGrid`) porque los campos de
+ * Puck son estáticos y no tienen acceso a `ctx` para poblar un picker en vivo.
+ */
+
+export const CARDS_FEATURED = ["minimal", "quick-add", "tallas", "quick-view"] as const
+
+export type FeaturedCollectionProps = {
+  fondo: Fondo
+  titulo: string
+  coleccionId: string
+  card: CardVariant
+  verTodos: { texto: string; href: string }
+}
+
+const featuredCollectionSchema: z.ZodType<FeaturedCollectionProps> = z.object({
+  fondo: z.enum(FONDOS),
+  titulo: z.string().min(1),
+  coleccionId: z.string(),
+  card: z.enum(CARDS_FEATURED),
+  verTodos: linkSchema,
+})
+
+const featuredCollectionDefaults: FeaturedCollectionProps = {
+  fondo: "claro",
+  titulo: "Lo más buscado",
+  coleccionId: "",
+  card: "minimal",
+  verTodos: { texto: "Ver todo", href: "/catalogo" },
+}
+
+export const featuredCollectionBlock: BlockDefinition<FeaturedCollectionProps, RenderContext> = {
+  label: "Colección destacada",
+  schema: featuredCollectionSchema,
+  defaults: featuredCollectionDefaults,
+  Component: ({ props, ctx }) => {
+    const f = resolverFondo(props.fondo)
+    const { Enlace } = ctx.componentes
+    const productos = props.coleccionId
+      ? ctx.products.filter((product) => product.collection_id === props.coleccionId)
+      : ctx.products
+
+    return (
+      <Seccion fondo={props.fondo} ariaLabel={props.titulo}>
+        <div className="mx-auto w-full max-w-6xl">
+          <div className="flex items-baseline justify-between gap-4">
+            <TituloSeccion>{props.titulo}</TituloSeccion>
+            {props.verTodos.texto ? (
+              <Enlace
+                href={props.verTodos.href}
+                className="shrink-0 text-[12px] font-semibold uppercase tracking-[0.08em] underline underline-offset-4"
+              >
+                {props.verTodos.texto}
+              </Enlace>
+            ) : null}
+          </div>
+
+          {productos.length ? (
+            <div className="mt-6">
+              <Carrusel
+                ariaLabel={props.titulo}
+                colorFlecha={f.color}
+                bordeFlecha={f.borde}
+                fondoFlecha={f.background}
+              >
+                {productos.map((product) => (
+                  <li
+                    key={product.id}
+                    className={`${CLASE_REVEAL} w-[62vw] shrink-0 snap-start sm:w-[240px] md:w-[260px]`}
+                  >
+                    <TarjetaProducto product={product} card={props.card} ctx={ctx} />
+                  </li>
+                ))}
+              </Carrusel>
+            </div>
+          ) : (
+            <p className="mt-6 text-[13px]" style={{ color: f.colorSuave }}>
+              Pronto verás productos en esta colección.
+            </p>
+          )}
+        </div>
+      </Seccion>
+    )
+  },
+}

package/src/blocks/features.test.tsx

@@ -0,0 +1,71 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { featuresBlock, ICONOS_FEATURE } from "./features"
+import { FONDOS } from "./_shared"
+import { mockCtx } from "../test/mock-ctx"
+
+describe("featuresBlock", () => {
+  it("defaults pasan el schema", () => {
+    expect(featuresBlock.schema.safeParse(featuresBlock.defaults).success).toBe(true)
+  })
+
+  it.each(FONDOS)("renderiza sin crash con fondo %s", (fondo) => {
+    const props = { ...featuresBlock.defaults, fondo }
+    expect(featuresBlock.schema.safeParse(props).success).toBe(true)
+
+    const html = renderToStaticMarkup(<featuresBlock.Component props={props} ctx={mockCtx()} />)
+
+    for (const item of featuresBlock.defaults.items) {
+      expect(html).toContain(item.titulo)
+      expect(html).toContain(item.texto)
+    }
+  })
+
+  it("renderiza un item por cada entrada del array (editable)", () => {
+    const props = {
+      fondo: "claro" as const,
+      items: [
+        { icono: "envio" as const, titulo: "Uno", texto: "T1" },
+        { icono: "calidad" as const, titulo: "Dos", texto: "T2" },
+      ],
+    }
+    const html = renderToStaticMarkup(<featuresBlock.Component props={props} ctx={mockCtx()} />)
+    expect(html).toContain("Uno")
+    expect(html).toContain("Dos")
+    expect((html.match(/<svg/g) ?? []).length).toBe(2)
+  })
+
+  it("acepta todos los iconos del enum", () => {
+    for (const icono of ICONOS_FEATURE) {
+      const props = { fondo: "claro" as const, items: [{ icono, titulo: "X", texto: "y" }] }
+      expect(featuresBlock.schema.safeParse(props).success).toBe(true)
+      const html = renderToStaticMarkup(<featuresBlock.Component props={props} ctx={mockCtx()} />)
+      expect(html).toContain("<svg")
+    }
+  })
+
+  it("los titulos son <h3>, nunca <h1> (ese heading es del hero)", () => {
+    const html = renderToStaticMarkup(
+      <featuresBlock.Component props={featuresBlock.defaults} ctx={mockCtx()} />
+    )
+    expect(html).not.toMatch(/<h1[ >]/)
+    expect(html).toContain("<h3")
+  })
+
+  it("emite motion respetando prefers-reduced-motion", () => {
+    const html = renderToStaticMarkup(
+      <featuresBlock.Component props={featuresBlock.defaults} ctx={mockCtx()} />
+    )
+    expect(html).toContain("prefers-reduced-motion")
+    expect(html).toContain("cms-reveal")
+  })
+
+  it("no emite <img> ni <a> directos en el fuente", () => {
+    const ruta = fileURLToPath(new URL("./features.tsx", import.meta.url))
+    const fuente = readFileSync(ruta, "utf-8")
+    expect(fuente).not.toMatch(/<img[\s>]/)
+    expect(fuente).not.toMatch(/<a[\s>]/)
+  })
+})