@arroyavecommerce/theme-kinetic 0.2.0

package/src/blocks/promo-countdown.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+/** Descompone un intervalo (ms) en días/horas/min/seg de dos dígitos. */
+function partes(ms: number): { d: string; h: string; m: string; s: string } {
+  const total = Math.max(0, Math.floor(ms / 1000))
+  const dd = (n: number) => String(n).padStart(2, "0")
+  return {
+    d: dd(Math.floor(total / 86400)),
+    h: dd(Math.floor((total % 86400) / 3600)),
+    m: dd(Math.floor((total % 3600) / 60)),
+    s: dd(total % 60),
+  }
+}
+
+/**
+ * Contador regresivo SSR-safe. Antes de montar (servidor + primer render del
+ * cliente) `restante` es null y se pintan guiones; el intervalo arranca en un
+ * efecto, así el markup inicial es idéntico en ambos lados.
+ *
+ * Vive en su propio módulo `"use client"` para que `promo.tsx` (que exporta
+ * constantes como `PROMO_FONDOS` y el block def, consumidos por `puck-config`
+ * en contexto servidor/RSC) NO sea un módulo cliente — si lo fuera, esos exports
+ * se volverían referencias de cliente y romperían el eval del servidor.
+ */
+export function Contador({
+  objetivo,
+  color,
+  colorSuave,
+}: {
+  objetivo: number
+  color: string
+  colorSuave: string
+}) {
+  const [restante, setRestante] = useState<number | null>(null)
+
+  useEffect(() => {
+    const tick = () => setRestante(Math.max(0, objetivo - Date.now()))
+    tick()
+    const id = setInterval(tick, 1000)
+    return () => clearInterval(id)
+  }, [objetivo])
+
+  const p = restante === null ? null : partes(restante)
+  const segmentos: { valor: string; etiqueta: string }[] = [
+    { valor: p?.d ?? "––", etiqueta: "días" },
+    { valor: p?.h ?? "––", etiqueta: "hrs" },
+    { valor: p?.m ?? "––", etiqueta: "min" },
+    { valor: p?.s ?? "––", etiqueta: "seg" },
+  ]
+
+  return (
+    <div
+      className="flex items-center gap-2.5"
+      role="timer"
+      aria-label="Tiempo restante de la promoción"
+      style={{ color }}
+    >
+      {segmentos.map((seg, i) => (
+        <div key={i} className="flex flex-col items-center">
+          <span
+            className="text-lg font-bold tabular-nums leading-none md:text-xl"
+            style={{ fontFamily: "var(--cms-fuente-mono)" }}
+          >
+            {seg.valor}
+          </span>
+          <span className="mt-1 text-[10px] uppercase tracking-[0.12em]" style={{ color: colorSuave }}>
+            {seg.etiqueta}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/blocks/promo.test.tsx

@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { promoBlock, PROMO_FONDOS } from "./promo"
+import { mockCtx } from "../test/mock-ctx"
+
+describe("promoBlock", () => {
+  it("defaults pasan el schema", () => {
+    expect(promoBlock.schema.safeParse(promoBlock.defaults).success).toBe(true)
+  })
+
+  it("incluye 'degradado' entre los fondos", () => {
+    expect(PROMO_FONDOS).toContain("degradado")
+  })
+
+  it.each(PROMO_FONDOS)("renderiza sin crash con fondo %s", (fondo) => {
+    const props = { ...promoBlock.defaults, fondo }
+    expect(promoBlock.schema.safeParse(props).success).toBe(true)
+    const html = renderToStaticMarkup(<promoBlock.Component props={props} ctx={mockCtx()} />)
+    expect(html).toContain(promoBlock.defaults.titulo)
+  })
+
+  it("sin fecha de cuenta regresiva NO muestra el contador", () => {
+    const html = renderToStaticMarkup(
+      <promoBlock.Component props={{ ...promoBlock.defaults, cuentaRegresiva: "" }} ctx={mockCtx()} />
+    )
+    expect(html).not.toContain('role="timer"')
+  })
+
+  it("con fecha ISO válida muestra el contador (SSR-safe: render inicial estable con guiones)", () => {
+    const futuro = new Date(Date.now() + 3 * 86400_000).toISOString()
+    const html = renderToStaticMarkup(
+      <promoBlock.Component props={{ ...promoBlock.defaults, cuentaRegresiva: futuro }} ctx={mockCtx()} />
+    )
+    expect(html).toContain('role="timer"')
+    // Render inicial (pre-mount) muestra guiones deterministas, no números de Date.now().
+    expect(html).toContain("––")
+  })
+
+  it("con fecha inválida NO muestra el contador", () => {
+    const html = renderToStaticMarkup(
+      <promoBlock.Component props={{ ...promoBlock.defaults, cuentaRegresiva: "no-es-fecha" }} ctx={mockCtx()} />
+    )
+    expect(html).not.toContain('role="timer"')
+  })
+
+  it("texto opcional: sin texto no rompe", () => {
+    const props = { fondo: "acento" as const, titulo: "T", enlace: { texto: "Ir", href: "/x" } }
+    expect(promoBlock.schema.safeParse(props).success).toBe(true)
+    const html = renderToStaticMarkup(<promoBlock.Component props={props} ctx={mockCtx()} />)
+    expect(html).toContain("T")
+  })
+
+  it("renderiza el enlace con su href", () => {
+    const html = renderToStaticMarkup(<promoBlock.Component props={promoBlock.defaults} ctx={mockCtx()} />)
+    expect(html).toContain(`href="${promoBlock.defaults.enlace.href}"`)
+    expect(html).toContain(promoBlock.defaults.enlace.texto)
+  })
+
+  it("emite motion respetando prefers-reduced-motion, sin <h1>", () => {
+    const html = renderToStaticMarkup(<promoBlock.Component props={promoBlock.defaults} ctx={mockCtx()} />)
+    expect(html).toContain("prefers-reduced-motion")
+    expect(html).toContain("cms-reveal")
+    expect(html).not.toMatch(/<h1[ >]/)
+  })
+
+  it("titulo vacío no pasa el schema", () => {
+    expect(
+      promoBlock.schema.safeParse({ ...promoBlock.defaults, titulo: "" }).success
+    ).toBe(false)
+  })
+})

package/src/blocks/promo.tsx

@@ -0,0 +1,120 @@
+import { z } from "zod"
+import type { BlockDefinition } from "@arroyavecommerce/cms-core"
+import { linkSchema } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+import { CLASE_REVEAL, EstiloMotion, resolverFondo, FONDOS, type Fondo } from "./_shared"
+import { Contador } from "./promo-countdown"
+
+/**
+ * Banda promocional: título + texto + enlace, con un contador regresivo
+ * opcional. Extiende el enum `fondo` con `degradado` (la banda ES el color).
+ *
+ * Este módulo es server-safe (NO `"use client"`): sus exports (`PROMO_FONDOS`,
+ * `promoBlock`) los consume `puck-config` en contexto servidor/RSC. La única
+ * parte cliente (el contador con hooks) vive en `./promo-countdown`.
+ */
+
+export const PROMO_FONDOS = [...FONDOS, "degradado"] as const
+export type PromoFondo = (typeof PROMO_FONDOS)[number]
+
+export type PromoProps = {
+  fondo: PromoFondo
+  titulo: string
+  texto?: string
+  enlace: { texto: string; href: string }
+  /** Fecha ISO (opcional). Si viene vacía o inválida, no se muestra el contador. */
+  cuentaRegresiva?: string
+}
+
+const promoSchema: z.ZodType<PromoProps> = z.object({
+  fondo: z.enum(PROMO_FONDOS),
+  titulo: z.string().min(1),
+  texto: z.string().optional(),
+  enlace: linkSchema,
+  cuentaRegresiva: z.string().optional(),
+})
+
+const promoDefaults: PromoProps = {
+  fondo: "degradado",
+  titulo: "Rebajas de temporada: hasta 40% off",
+  texto: "Solo por tiempo limitado en prendas seleccionadas.",
+  enlace: { texto: "Ver ofertas", href: "/collections/sale" },
+  cuentaRegresiva: "",
+}
+
+type EstiloBanda = { background: string; color: string; colorSuave: string; borde: string; acento: string }
+
+function resolverFondoPromo(fondo: PromoFondo): EstiloBanda {
+  if (fondo === "degradado") {
+    return {
+      background: "var(--cms-degradado,linear-gradient(120deg,#3b2bff,#ff3b2e))",
+      color: "var(--cms-primario-texto,#ffffff)",
+      colorSuave: "color-mix(in srgb, var(--cms-primario-texto,#ffffff) 82%, transparent)",
+      borde: "color-mix(in srgb, var(--cms-primario-texto,#ffffff) 32%, transparent)",
+      acento: "currentColor",
+    }
+  }
+  const f = resolverFondo(fondo as Fondo)
+  return { background: f.background, color: f.color, colorSuave: f.colorSuave, borde: f.borde, acento: f.acento }
+}
+
+/** Devuelve el timestamp objetivo si la fecha ISO es válida; si no, null. */
+function objetivoValido(iso?: string): number | null {
+  if (!iso) return null
+  const t = Date.parse(iso)
+  return Number.isNaN(t) ? null : t
+}
+
+export const promoBlock: BlockDefinition<PromoProps, RenderContext> = {
+  label: "Banda promocional",
+  schema: promoSchema,
+  defaults: promoDefaults,
+  Component: ({ props, ctx }) => {
+    const b = resolverFondoPromo(props.fondo)
+    const { Enlace } = ctx.componentes
+    const objetivo = objetivoValido(props.cuentaRegresiva)
+    return (
+      <section
+        aria-label={props.titulo}
+        className="w-full px-5 py-8 md:px-8 md:py-10"
+        style={{ background: b.background, color: b.color, borderRadius: "var(--cms-radio)" }}
+      >
+        <EstiloMotion />
+        <div
+          className={`${CLASE_REVEAL} mx-auto flex w-full max-w-6xl flex-col items-start gap-5 md:flex-row md:items-center md:justify-between`}
+        >
+          <div className="flex flex-col gap-1.5">
+            <h2
+              className="m-0 text-xl leading-tight md:text-2xl"
+              style={{
+                fontFamily: "var(--cms-fuente-titulo)",
+                fontWeight: "var(--cms-titulo-peso)",
+                textTransform: "var(--cms-titulo-transform)",
+                letterSpacing: "var(--cms-titulo-espaciado)",
+              }}
+            >
+              {props.titulo}
+            </h2>
+            {props.texto ? (
+              <p className="m-0 text-[14px] leading-relaxed" style={{ color: b.colorSuave }}>
+                {props.texto}
+              </p>
+            ) : null}
+          </div>
+
+          <div className="flex flex-wrap items-center gap-5">
+            {objetivo !== null ? <Contador objetivo={objetivo} color={b.color} colorSuave={b.colorSuave} /> : null}
+            {props.enlace.texto ? (
+              <Enlace
+                href={props.enlace.href}
+                className="inline-block whitespace-nowrap 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)]"
+              >
+                {props.enlace.texto}
+              </Enlace>
+            ) : null}
+          </div>
+        </div>
+      </section>
+    )
+  },
+}

package/src/blocks/rich-text.test.tsx

@@ -0,0 +1,67 @@
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { richTextBlock, ALINEACIONES } from "./rich-text"
+import { FONDOS } from "./_shared"
+import { mockCtx } from "../test/mock-ctx"
+
+describe("richTextBlock", () => {
+  it("defaults pasan el schema", () => {
+    expect(richTextBlock.schema.safeParse(richTextBlock.defaults).success).toBe(true)
+  })
+
+  it.each(FONDOS)("renderiza sin crash con fondo %s", (fondo) => {
+    const props = { ...richTextBlock.defaults, fondo }
+    expect(richTextBlock.schema.safeParse(props).success).toBe(true)
+    const html = renderToStaticMarkup(<richTextBlock.Component props={props} ctx={mockCtx()} />)
+    expect(html).toContain("<section")
+  })
+
+  it("renderiza un <p> por línea del cuerpo (saltos de línea → párrafos)", () => {
+    const props = {
+      fondo: "claro" as const,
+      alineacion: "izquierda" as const,
+      cuerpo: "Uno\nDos\nTres",
+    }
+    const html = renderToStaticMarkup(<richTextBlock.Component props={props} ctx={mockCtx()} />)
+    expect((html.match(/<p /g) ?? []).length).toBe(3)
+    expect(html).toContain("Uno")
+    expect(html).toContain("Dos")
+    expect(html).toContain("Tres")
+  })
+
+  it("descarta líneas vacías entre párrafos", () => {
+    const props = {
+      fondo: "claro" as const,
+      alineacion: "izquierda" as const,
+      cuerpo: "Uno\n\n\nDos",
+    }
+    const html = renderToStaticMarkup(<richTextBlock.Component props={props} ctx={mockCtx()} />)
+    expect((html.match(/<p /g) ?? []).length).toBe(2)
+  })
+
+  it.each(ALINEACIONES)("aplica la alineación %s", (alineacion) => {
+    const props = { ...richTextBlock.defaults, alineacion }
+    const html = renderToStaticMarkup(<richTextBlock.Component props={props} ctx={mockCtx()} />)
+    expect(html).toContain(alineacion === "centro" ? "text-center" : "text-left")
+  })
+
+  it("limita el ancho de lectura (~65ch)", () => {
+    const html = renderToStaticMarkup(<richTextBlock.Component props={richTextBlock.defaults} ctx={mockCtx()} />)
+    expect(html).toContain("max-w-[65ch]")
+  })
+
+  it("titulo opcional: sin titulo no pinta <h2>", () => {
+    const html = renderToStaticMarkup(
+      <richTextBlock.Component
+        props={{ fondo: "claro", alineacion: "izquierda", cuerpo: "Solo cuerpo" }}
+        ctx={mockCtx()}
+      />
+    )
+    expect(html).not.toContain("<h2")
+  })
+
+  it("no usa <h1>", () => {
+    const html = renderToStaticMarkup(<richTextBlock.Component props={richTextBlock.defaults} ctx={mockCtx()} />)
+    expect(html).not.toMatch(/<h1[ >]/)
+  })
+})

package/src/blocks/rich-text.tsx

@@ -0,0 +1,75 @@
+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"
+
+/**
+ * Texto libre: un título opcional + cuerpo editable (textarea). Los saltos de
+ * línea del cuerpo se renderizan como párrafos separados y el ancho se limita a
+ * ~65ch para una lectura cómoda. No va en el home por defecto: queda disponible
+ * en Puck para páginas de contenido (Sobre nosotros, políticas, etc.).
+ */
+
+export const ALINEACIONES = ["izquierda", "centro"] as const
+export type Alineacion = (typeof ALINEACIONES)[number]
+
+export type RichTextProps = {
+  fondo: Fondo
+  alineacion: Alineacion
+  titulo?: string
+  cuerpo: string
+}
+
+const richTextSchema: z.ZodType<RichTextProps> = z.object({
+  fondo: z.enum(FONDOS),
+  alineacion: z.enum(ALINEACIONES),
+  titulo: z.string().optional(),
+  cuerpo: z.string(),
+})
+
+const richTextDefaults: RichTextProps = {
+  fondo: "claro",
+  alineacion: "izquierda",
+  titulo: "Nuestra historia",
+  cuerpo:
+    "Somos una marca independiente de moda urbana nacida en Colombia.\n" +
+    "Diseñamos prendas de tirada corta con materiales que duran, pensadas para el día a día.\n" +
+    "Cada drop cuenta una historia y se produce en cantidades limitadas.",
+}
+
+/** Divide el cuerpo en párrafos por saltos de línea, descartando líneas vacías. */
+function aParrafos(cuerpo: string): string[] {
+  return cuerpo
+    .split(/\n+/)
+    .map((linea) => linea.trim())
+    .filter((linea) => linea.length > 0)
+}
+
+export const richTextBlock: BlockDefinition<RichTextProps, RenderContext> = {
+  label: "Texto libre",
+  schema: richTextSchema,
+  defaults: richTextDefaults,
+  Component: ({ props }) => {
+    const f = resolverFondo(props.fondo)
+    const parrafos = aParrafos(props.cuerpo)
+    const centrado = props.alineacion === "centro"
+    return (
+      <Seccion fondo={props.fondo} ariaLabel={props.titulo || "Texto"}>
+        <div className={`mx-auto w-full max-w-[65ch] ${centrado ? "text-center" : "text-left"}`}>
+          {props.titulo ? <TituloSeccion className={`mb-5 ${centrado ? "text-center" : ""}`}>{props.titulo}</TituloSeccion> : null}
+          <div className="flex flex-col gap-4">
+            {parrafos.map((parrafo, i) => (
+              <p
+                key={i}
+                className="m-0 text-[15px] leading-relaxed md:text-base"
+                style={{ fontFamily: "var(--cms-fuente-texto)", color: f.color }}
+              >
+                {parrafo}
+              </p>
+            ))}
+          </div>
+        </div>
+      </Seccion>
+    )
+  },
+}

package/src/blocks/spacer.test.tsx

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { spacerBlock, TAMANOS_SPACER } from "./spacer"
+import { mockCtx } from "../test/mock-ctx"
+
+describe("spacerBlock", () => {
+  it("defaults pasan el schema", () => {
+    expect(spacerBlock.schema.safeParse(spacerBlock.defaults).success).toBe(true)
+  })
+
+  it.each(TAMANOS_SPACER)("renderiza sin crash con tamaño %s", (tamano) => {
+    const props = { ...spacerBlock.defaults, tamano }
+    expect(spacerBlock.schema.safeParse(props).success).toBe(true)
+    const html = renderToStaticMarkup(<spacerBlock.Component props={props} ctx={mockCtx()} />)
+    expect(html).toContain("height:")
+  })
+
+  it("cada tamaño produce una altura distinta", () => {
+    const alturas = TAMANOS_SPACER.map((tamano) => {
+      const html = renderToStaticMarkup(
+        <spacerBlock.Component props={{ tamano, divisor: false }} ctx={mockCtx()} />
+      )
+      return html.match(/height:([^;"]+)/)?.[1]
+    })
+    expect(new Set(alturas).size).toBe(TAMANOS_SPACER.length)
+  })
+
+  it("sin divisor no pinta línea", () => {
+    const html = renderToStaticMarkup(
+      <spacerBlock.Component props={{ tamano: "md", divisor: false }} ctx={mockCtx()} />
+    )
+    expect(html).not.toContain("<hr")
+  })
+
+  it("con divisor pinta una línea con var(--cms-borde)", () => {
+    const html = renderToStaticMarkup(
+      <spacerBlock.Component props={{ tamano: "md", divisor: true }} ctx={mockCtx()} />
+    )
+    expect(html).toContain("<hr")
+    expect(html).toContain("var(--cms-borde")
+  })
+
+  it("es decorativo (aria-hidden) y nunca usa <h1>", () => {
+    const html = renderToStaticMarkup(
+      <spacerBlock.Component props={{ tamano: "lg", divisor: true }} ctx={mockCtx()} />
+    )
+    expect(html).toContain('aria-hidden="true"')
+    expect(html).not.toMatch(/<h1[ >]/)
+  })
+
+  it("tamano inválido no pasa el schema", () => {
+    expect(spacerBlock.schema.safeParse({ tamano: "gigante", divisor: false }).success).toBe(false)
+  })
+})

package/src/blocks/spacer.tsx

@@ -0,0 +1,56 @@
+import { z } from "zod"
+import type { BlockDefinition } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+
+/**
+ * Control de aire: inserta espacio vertical entre bloques, con un divisor
+ * opcional (línea `var(--cms-borde)`). No usa el enum `fondo` porque no pinta
+ * superficie: es puro espaciado. No va en el home por defecto.
+ */
+
+export const TAMANOS_SPACER = ["xs", "sm", "md", "lg", "xl"] as const
+export type TamanoSpacer = (typeof TAMANOS_SPACER)[number]
+
+/** Altura por tamaño. `md` toma el token de sección del tema (con fallback). */
+const ALTURA: Record<TamanoSpacer, string> = {
+  xs: "1rem",
+  sm: "2rem",
+  md: "var(--cms-espaciado-seccion, 3.5rem)",
+  lg: "5rem",
+  xl: "8rem",
+}
+
+export type SpacerProps = {
+  tamano: TamanoSpacer
+  divisor: boolean
+}
+
+const spacerSchema: z.ZodType<SpacerProps> = z.object({
+  tamano: z.enum(TAMANOS_SPACER),
+  divisor: z.boolean(),
+})
+
+const spacerDefaults: SpacerProps = {
+  tamano: "md",
+  divisor: false,
+}
+
+export const spacerBlock: BlockDefinition<SpacerProps, RenderContext> = {
+  label: "Espaciador",
+  schema: spacerSchema,
+  defaults: spacerDefaults,
+  Component: ({ props }) => {
+    const altura = ALTURA[props.tamano]
+    if (props.divisor) {
+      return (
+        <div className="flex w-full items-center" style={{ height: altura }} aria-hidden="true">
+          <hr
+            className="w-full border-0"
+            style={{ borderTop: `var(--cms-grosor-borde, 1px) solid var(--cms-borde, #e6e4df)` }}
+          />
+        </div>
+      )
+    }
+    return <div className="w-full" style={{ height: altura }} aria-hidden="true" />
+  },
+}

package/src/blocks/testimonials.test.tsx

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { testimonialsBlock } from "./testimonials"
+import { FONDOS } from "./_shared"
+import { mockCtx } from "../test/mock-ctx"
+
+describe("testimonialsBlock", () => {
+  it("defaults pasan el schema", () => {
+    expect(testimonialsBlock.schema.safeParse(testimonialsBlock.defaults).success).toBe(true)
+  })
+
+  it.each(FONDOS)("renderiza sin crash con fondo %s", (fondo) => {
+    const props = { ...testimonialsBlock.defaults, fondo }
+    expect(testimonialsBlock.schema.safeParse(props).success).toBe(true)
+    const html = renderToStaticMarkup(<testimonialsBlock.Component props={props} ctx={mockCtx()} />)
+    for (const item of testimonialsBlock.defaults.items) {
+      expect(html).toContain(item.autor)
+      expect(html).toContain(item.cita)
+    }
+  })
+
+  it("renderiza una tarjeta por item (editable)", () => {
+    const props = {
+      fondo: "claro" as const,
+      titulo: "Reseñas",
+      items: [
+        { cita: "Genial", autor: "A", rating: 5 },
+        { cita: "Muy bueno", autor: "B" },
+      ],
+    }
+    const html = renderToStaticMarkup(<testimonialsBlock.Component props={props} ctx={mockCtx()} />)
+    expect((html.match(/<figure/g) ?? []).length).toBe(2)
+  })
+
+  it("rating opcional: con rating pinta estrellas accesibles, sin rating no", () => {
+    const con = renderToStaticMarkup(
+      <testimonialsBlock.Component
+        props={{ fondo: "claro", titulo: "T", items: [{ cita: "c", autor: "a", rating: 4 }] }}
+        ctx={mockCtx()}
+      />
+    )
+    expect(con).toContain('aria-label="4 de 5 estrellas"')
+
+    const sin = renderToStaticMarkup(
+      <testimonialsBlock.Component
+        props={{ fondo: "claro", titulo: "T", items: [{ cita: "c", autor: "a" }] }}
+        ctx={mockCtx()}
+      />
+    )
+    expect(sin).not.toContain("de 5 estrellas")
+  })
+
+  it("rating fuera de rango no pasa el schema", () => {
+    const props = { fondo: "claro" as const, titulo: "T", items: [{ cita: "c", autor: "a", rating: 9 }] }
+    expect(testimonialsBlock.schema.safeParse(props).success).toBe(false)
+  })
+
+  it("usa <h2> y <blockquote>, nunca <h1>", () => {
+    const html = renderToStaticMarkup(
+      <testimonialsBlock.Component props={testimonialsBlock.defaults} ctx={mockCtx()} />
+    )
+    expect(html).toContain("<h2")
+    expect(html).toContain("<blockquote")
+    expect(html).not.toMatch(/<h1[ >]/)
+  })
+
+  it("emite motion respetando prefers-reduced-motion", () => {
+    const html = renderToStaticMarkup(
+      <testimonialsBlock.Component props={testimonialsBlock.defaults} ctx={mockCtx()} />
+    )
+    expect(html).toContain("prefers-reduced-motion")
+    expect(html).toContain("cms-reveal")
+  })
+})