Steren México · Design System 2026 · extensión formal

Multimedia & Art Direction Design System

La guía que gobierna todo el contenido multimedia del sitio: heroes, bandas, tiles, fotografía de producto, escenas, fotografía humana, video, movimiento, decoración y derivados. Un sistema reproducible de decisiones de diseño: qué diseñar, cómo componerlo, qué dimensiones y zonas respetar, cómo se comporta en desktop, tablet y móvil, cómo preparar los assets y cómo saber si una pieza cumple.

Versiónv1.0 · 11 de septiembre de 2026
Capítulos13
Fichas44 componentes (H · B · T · P · M · V · D · S)
Assets15 tipos (A01–A15)
Fuente de verdadDesign System 2026 (documento 32)
Descargar el PDF (11.0 MB) Así sí / así no Fichas por componente Checklist QA Art direction
Índice de la guía
  1. 00 · Cómo usar esta guía
  2. 01 · Lo que ya manda: herencia del Design System
  3. 02 · Taxonomía e inventario
  4. 03 · Reglas generales transversales
  5. 04 · Art Direction System — así se ve Steren
  6. 05 · Blueprints por componente
  7. 06 · Responsive Art Direction — desktop → tablet → móvil
  8. 07 · Especificaciones técnicas de assets
  9. 08 · Accesibilidad de la multimedia
  10. 09 · Performance y entrega
  11. 10 · Design QA — checklist PASS / WARNING / FAIL
  12. 11 · Gobernanza, excepciones y deuda de desarrollo
  13. 12 · Así sí / así no — galería de comprobación

00Cómo usar esta guía

Qué es. La extensión formal del Steren México Design System 2026 (32-design-system-2026.md, v2.0) que gobierna todo el contenido multimedia del sitio: heroes, bandas, tiles, fotografía de producto, escenas, fotografía humana, video, movimiento, decoración y derivados (OG, feeds). No es un sistema paralelo: cada regla dice de dónde sale y, si es nueva, lo dice.

Para qué. Que una persona nueva —diseño, marketing, contenido, frontend o QA— produzca mañana un hero, un tile o una foto que sea reconociblemente Steren, respete el DS, responda bien en desktop, tablet y móvil, sea implementable, accesible y rápida, conserve la intención comercial y tenga calidad consistente sin depender de su criterio subjetivo.

Mapa de lectura por rol

Si eres… Empieza por Después Al entregar
Diseño / dirección de arte 04 Art Direction System · 12 Así sí / así no 05 Blueprints del componente que vas a hacer · 06 Responsive 12 Así sí / así no (comprobación rápida) · 10 Checklist QA (columna diseño)
Marketing / campañas 02 Taxonomía (qué existe y qué no) · 12 Así sí / así no 03 Reglas generales · 05 Blueprint H01/B02 · 07 Paquete de entrega 12 Así sí / así no · 10 Checklist QA
Contenido / copy 03 Reglas generales (contrato del slot) 05 Content rules de cada ficha · 08 Accesibilidad (alt) 10 Checklist QA (columna contenido)
Frontend 07 Especificaciones técnicas · 09 Performance 05 Blueprints (dimensiones, srcset, LCP) · 11 Deuda de desarrollo 10 Checklist QA (columna técnica)
QA de diseño 10 Checklist QA 05 Blueprints · 06 Responsive Hoja de veredicto PASS / WARNING / FAIL
Producto / negocio 01 Lo que ya manda · 11 Gobernanza 02 Taxonomía (estado real) —

Cómo leer una ficha de componente (blueprint)

Todas las fichas del capítulo 05 tienen los mismos 15 campos en el mismo orden, para que siempre sepas dónde mirar:

# Campo Qué responde
1 Purpose Para qué existe la pieza
2 Use cases Cuándo usarla
3 Do not use when Cuándo NO usarla (y qué usar en su lugar)
4 Anatomy Todas sus partes: media, kicker, título, precio, CTA, velo, badges, controles
5 Layout blueprint El plano técnico: lienzo, container, retícula, zonas, cotas
6 Dimensions Render por viewport, ratio, asset a entregar
7 Safe areas Dónde puede vivir lo crítico (sujeto, texto, CTA)
8 Focal point Cómo se fija y se conserva el centro de interés
9 Crop behavior Qué se ve y qué se pierde en cada ancho
10 Responsive behavior Desktop → tablet → móvil: qué permanece, cambia, se mueve, desaparece, se recorta o exige otro asset
11 Content rules Límites de copy por campo
12 Contrast & legibility Texto sobre media: velos, pares, prohibiciones
13 Asset specifications Formato, resolución, peso, color, naming
14 Accessibility Alt, contraste, movimiento, foco
15 Performance Entrega técnica: picture/srcset, LCP, lazy, CLS

Cierra cada ficha un Do / Don't y, en las piezas importantes, un Art Direction Board: la pieza terminada y correctamente diseñada, con su par GOOD / BAD.

Leyenda de los planos

Los planos usan siempre la misma clave visual. El lienzo gris es el asset (con la cota de entrega), el borde punteado oscuro es el container 1440, las bandas celestes son columnas de la retícula:

Zona segura — todo lo crítico (sujeto, texto, CTA) cabe aquí en todos los anchos Zona de texto/CTA del sistema — la imagen debe quedar limpia debajo Punto focal — el centro de interés que sobrevive a cualquier recorte Se pierde — franja que un viewport recorta (nunca lleve nada crítico) Sujeto/producto — dónde se posiciona la pieza protagonista Aire obligatorio — espacio negativo que no se ocupa

Las cotas son medidas reales del asset o del render, nunca del dibujo. Cuando un plano dice «2880×720» es el archivo que entregas; cuando dice «1440×360» es lo que pinta el sistema en una pantalla de 1440 px.

Marcas que verás en toda la guía

Marca Significado
Existente Regla que ya está en el DS o en la spec (se cita)
Derivada Se deduce de forma consistente del sistema (se dice de qué)
Nueva Propuesta de esta guía: entra al DS por enmienda (§12.6)
Construido · Hueco · Spec · No autorizado Estado real del slot en el tema a 2026-09-10
PASS WARNING FAIL Veredicto de QA: publica · publica con nota · no publica

Lo que esta guía NO hace

  • No cambia tokens, tipografía, colores ni componentes del DS. Donde encontró contradicciones entre documentos, las resuelve y lo dice (capítulo 01, tabla X-1…X-15).
  • No sustituye a la spec de artes (pulido-ce/11) ni al manual de operación de contenido (tema-2026/manual-home-y-categorias-v1.0): los absorbe y los referencia.
  • No autoriza slots nuevos. El catálogo de slots de campaña es cerrado (C6): un slot nuevo es una enmienda, no una excepción.

01Lo que ya manda: herencia del Design System

Esta guía se construye sobre el DS v2.0 y sobre lo que el tema 2026 ya construyó y midió. Antes de proponer nada, esto es lo que existe. Cada fila dice de dónde sale.

Corpus (por capas)

Capa Documento Qué legisla sobre multimedia
Tokens y reglas 32-design-system-2026.md (DS v2.0) color AA calculado, Heebo, espaciado 4 px, radios ≤12, elevación e0-e3, breakpoints 768/1024/1280, grids; §7 Imagen, §10 anti-slop, §12.5 CMS solo datos, §6 onda, §1c bandas cian
Tokens reales web/css/tokens.css del tema espejo del DS + supersedes: container 1440 (Tona 2026-08-20), --st-hdr-alto 120/110, tinte SterenCard (enmienda STE-SM-0225)
Componentes 33-componentes-spec.md C6 catálogo cerrado de slots de campaña; contrato de datos (kicker · título · precio · CTA · vigencia · imagen desktop + móvil + alt); sin autoplay; máx 4 láminas
Dirección de marca pulido-ce/01-esencia-steren.md E1-E8 (esencia verificable), ES-1..ES-14 (onda, cian como luz, ES-6 fotos humanas, ES-11 dirección de arte, ES-13 motion), voz V1-V5
Artes pulido-ce/11-especificacion-artes.md reglas de entrega (sin texto en imagen, sRGB, 2×, nomenclatura) y entregables A1-A11; cap de 3 fotos humanas
Landing pulido-ce/22-landing-categoria-alcance.md D1 escenas solo en héroe y medio; banner dentro del mosaico; sin carrusel; CLS 0
Lo construido tema-2026/00-ESTADO.md (39 caps) + manual-home-y-categorias-v1.0 medidas reales, gramática premium (cap.27-29), gradientes con criterio de Tona, orden vinculante del home, huecos sin campo
Marca audit/25-marca-activos.md packshots 1200×1200 sobre blanco (intocables), formatos actuales de producción, «campaña con paleta libre / chrome sobrio»

Tokens que gobiernan la multimedia

Familia Valor Consecuencia para las piezas
Container 1440 px · gutter 16 (<1024) / 24 bandas, mosaicos y carruseles viven dentro; el hero es full-bleed
Breakpoints 768 · 1024 · 1280 tres estados de arte: <768 móvil · 768-1023 tablet · ≥1024 desktop (verificar a 1440 y 1920)
Grids mosaico home 2 col (filas 172) → 4 col (filas 208) · landing igual · PLP 2/3/4 · PDP 8/4 toda imagen entra en una caja de alto fijo: CLS 0 por construcción
Espaciado 4 8 12 16 20 24 32 40 48 64 panel del hero a 64/16 px; aire interior de tiles 8/12/20; reserva del cintillo 104 (héroe) / 72-74 (chico)
Radios 4 · 8 · 12 (tiles, panel del hero, tarjeta SterenCard) · pill ninguna imagen con radio mayor de 12
Elevación e0 reposo · e1 · e2 · e3 techo «bordes > sombras» en cards de producto; en tiles con foto la caja la define la sombra (cap.27/28: e1 reposo → e2 hover, filete n200 o ninguno)
Superficies bg · bg-subtle · cyan-tint (máx 2 bandas/página, nunca PDP/checkout) · navy (footer, SterenCard, panel del hero, banda de categoría, banner de landing) las únicas superficies sobre las que se compone texto e imagen; no existen fondos fotográficos
On-dark blanco 13.60:1 · cian 5.49:1 (cifras y links) · sale-on-dark · ring-inverse los únicos colores de texto sobre navy y sobre el velo
Texto sobre media kicker 12 uppercase 600 · h2 hero clamp(16px, 1.8vw, 22px) · precio-héroe 28 px w800 cian · CTA 44 px · display 40 (máx 1/página) todo es HTML del sistema; nada se rasteriza
Presupuestos LCP ≤2.0 s · CLS ≤0.05 · imagen LCP ≤200 KB (gate 150) · tile ≤120 KB · thumb ≤40 KB · above-the-fold ≤1 MB contrato intocable; techos por talla

Reglas existentes Existente

# Regla Fuente
E-01 La imagen NO porta texto. Titulares, precios, CTAs y legales viven en HTML; un arte con texto rasterizado se regresa DS §7 · C6 · 11 §1.1 · ES-11 · cap.4 («SIN texto»), cap.15/22/27.3
E-02 Slot tipado con datos obligatorios: imagen desktop + móvil + alt + vigencia; sin uno de ellos no se publica; vencido se auto-oculta; vacío no renderiza DS §12.5 · C6
E-03 El catálogo de slots de campaña es cerrado: hero · cintillo · coleccion · mosaico · countdown C6 «no hay slot #47»
E-04 Hero: máx 4 láminas, rotación manual (dots + flechas + swipe), sin autoplay, ARIA carousel; lámina 1 = LCP con fetchpriority=high; crop móvil art-directed por <picture>, «nunca el desktop recortado» DS §7 · C6 · home.js
E-05 ES-11: producto real en contexto mexicano real (interiores de casa mexicana con muros de color, mesas de taller, changarros, manos operando el producto). Prohibido: stock extranjero, IA, renders que fingen foto, texto rasterizado ES-11 · 11 §1.2
E-06 ES-6: máximo 3 fotos humanas en el funnel (tarjeta «Pregunta, Steren responde» · lámina de tiendas · Q&A del PDP); personal real con gafete, mostrador o taller real, luz natural cálida, altura de los ojos; nunca modelos ni stock; ≤120 KB, lazy ES-6 · R11 · 11 §2-3
E-07 Fotografía de producto: 1:1 sobre blanco puro, 1200×1200, estudio uniforme; se usa tal cual; alt = nombre del producto; sin fondos de color en PLP/PDP DS §7 · 25 §6 y §9.2
E-08 El arte de campaña conserva paleta libre dentro del slot; el chrome permanece azul/blanco; semánticos (buy/sale/success) nunca decorativos DS §7 · 25 §7.2 · DS §1
E-09 Anti-slop: sin gradientes de moda, glassmorphism decorativo, neumorfismo, sombras gigantes, radios >12, emojis, «AI-hero-illustrations»; «la imagen de este sitio es su fotografía de producto real»; sin dark mode; cero dark patterns DS §10
E-10 La onda es firma, no wallpaper: 5 usos cerrados; nunca textura, viñeta ni marca de agua DS §6 · ES-1
E-11 Cian = luz: nunca texto sobre claro; sí gráfico redundante, cifras/links sobre navy, tinte como superficie (máx 2 bandas, nunca PDP/checkout) DS §1c · ES-2/3
E-12 Motion: prefers-reduced-motion en todo; solo transform/opacity; ES-13 ≤1.2 KB JS; carrusel sin autoplay; video nunca al cargar (YouTube solo on-click, Terrific con póster y retirada a 8 s) DS §5 · ES-13 · cap.3/33
E-13 Toda <img> con alto reservado (atributos, aspect-ratio o filas fijas); lazy salvo above-the-fold; AVIF/WebP con fallback (objetivo) DS §7 · cap.16
E-14 Entrega de artes: JPG máxima calidad / PNG / TIFF, sRGB, sin marca de agua, tamaños 2× del render; YYYY-MM_campaña_slot_variante.ext, una carpeta por campaña 11 §1
E-15 Landing: 2 escenas por categoría (héroe + medio), packshot sobre blanco en los 1×1; banner dentro del mosaico (máx 1); ni un producto; sin carrusel; héroe = LCP eager 22 D1-D3
E-16 Gramática premium (cap.27-29): la foto es protagonista sobre hueco blanco (el mismo blanco del render); viñeta radial en tinte de marca (navy 5 %); el cuerpo sobre foto es un cintillo con velo (bg 92-96 % + desenfoque 10 px + máscara) que solo existe donde hay foto; la caja la define la sombra (e1 → e2), filete insetado; cero hex fuera de tokens.css cap.27.1, 28, 29.2
E-17 Producto sobre navy va en moneda blanca con aro, nunca a sangre («un JPG de catálogo a sangre sobre navy se lee como un parche recortado») cap.29.3
E-18 Gradientes: «cuida el uso de gradientes, son muy típicos de IA» (Tona). Un degradado necesita superficie y solo se queda si hace trabajo: velo + máscara del cintillo (legibilidad), radial del módulo SterenCard a 1380 px (luz), luz de progreso primary→cyan (progreso). Bandas comerciales y banner de landing: sin degradados cap.29.0-29.3 · cap.19
E-19 Los estados no mienten: un slot sin arte es mudo en producción (nunca «próximamente», nunca esqueleto); banda de Terrific se retira a los 8 s; reels «4+ miniaturas reales o no existen» cap.16 · cap.29.4 · cap.33
E-20 Home cerrado con orden vinculante: hero → valor → mosaico → videos → banda 1 → favoritos → banda 2 → patrimonio → Aprende → SterenCard; cualquier cambio de arte entra por dato (config, landing_image, Terrific), no por diseño cap.29 · cap.33 · Tona 2026-09-03
E-21 Medidas reales del manual v1.0: hero 1440×360 (1920×360) → entrega 2880×720 4:1, zona segura 2520×405 central + tercio izquierdo despejado; móvil 1440×1080; categoría 800×800; escena 1400×880; archivo 1800×600; mostrador 1600×900 manual §5
E-22 Subida hoy: solo JPG/PNG/GIF; el peso que subes es el peso que descarga el cliente (sin resize ni compresión en campaña y categoría) manual §5 · inventario §3
E-23 Voz V1-V5 sobre cualquier pieza: tuteo imperativo; spec → beneficio con dato; siempre el motivo; humor solo en bajo riesgo; cero anglicismos DS §8 · ES-14

Reglas derivadas Derivada

# Regla Se deriva de
D-01 Todo raster se entrega a 2× de su render máximo y con el ratio exacto del slot; el sistema nunca estira 11 §1.4 · manual §5
D-02 Tres estados de arte, no dos: desktop ≥1024 (recorte vertical a partir de 1920), tablet 768-1023 (mismo arte, alto 240-287 → recorte lateral hasta 20 %), móvil <768 (asset 4:3, copy debajo) clamp(240px, 28vw, 360px) + cover; center
D-03 El punto focal se define en el arte desktop y se conserva en el 4:3 por re-encuadre, no por recorte: A02 es «el mismo concepto re-encuadrado» 11 §2 A2 · DS §7
D-04 La zona de copy del sistema es una franja del arte que debe quedar limpia: hero = panel a 64/16 px de máx 400×~200; tiles = banda inferior del cintillo (104 / 72-74 px) home.css · catalogo.css · manual §5.1
D-05 Texto sobre foto solo con el velo del sistema (navy 92 % + blur 10 px en el hero; bg 92-96 % + blur + máscara en tiles); nunca sobre la foto desnuda ni con degradados propios cap.27/28 · DS §1 on-dark
D-06 La foto de categoría es un packshot representativo sobre blanco, no una composición: el sistema la pinta contain con aire propio, de 38 px (chip) a 646×306 (héroe) home.css · manual §2.4 · 25 §6
D-07 Escala óptica coherente entre tiles vecinos: el producto ocupa una fracción comparable del lienzo (la landing de producción falla por «foco enorme, router diminuto») 22 §2
D-08 Máx 2 etiquetas sobre una imagen de producto en listado (3 en ficha); más = ninguna DS §5 · cap.27.3
D-09 Ninguna imagen es un enlace mudo: el tile entero es un solo foco (tile-cover), el nombre porta el texto, el alt no lo duplica DS §5 · cap.31.2
D-10 Un solo naranja buy por vista: el CTA de un hero o banda es button-primary (o sterencard sobre navy), nunca buy DS §5 registro del naranja
D-11 La ornamentación folclórica vive solo en el tema de temporada (capa, encendida por admin); el arte de campaña no la hereda E5 vs cap.31 (Tona)
D-12 Toda foto de persona muestra gafete/uniforme Steren y va con nombre real ES-6 · cap.22
D-13 Ningún video reproduce solo con sonido ni se embebe al cargar; todo video reserva su alto y tiene póster real cap.3 · cap.29.4 · cap.33 · galeria.phtml
D-14 Un degradado permitido tiene una de tres funciones (legibilidad · luz sobre banda ≥1000 px · progreso); cualquier otro es un bug cap.29

Lo que faltaba (y esta guía define) Nueva

# Hueco Dónde lo cierra la guía
H-01 Zonas seguras y punto focal por componente y por breakpoint (solo existía el hero a 1440) 05 (campos 7-9 de cada ficha) · 06
H-02 Tablet (768-1023) sin definir para ningún arte 05 · 06
H-03 Composición del 4:3 móvil (existe la medida, no la dirección) 04 · 05 H01
H-04 Gramática de las tomas secundarias del producto (_x2.._x5) 04 · 05 P02
H-05 Dirección de arte de la imagen de categoría (800×800): representante, escala, aire 04 · 05 P07/T01
H-06 Escenas de landing (1.6:1): safe area, focal, ejemplo 05 T03/T04
H-07 Video: banda Terrific, video de producto, reels, institucional 05 V01-V03/P05
H-08 Video hero / motion banner: ni autorizado ni prohibido por escrito 02 (no autorizado) · 11 (ruta de enmienda)
H-09 Imagen para compartir (OG) de categoría y campañas 05 S01
H-10 Tratamiento de color, saturación y contraste del arte (solo «paleta libre») 04
H-11 Cantidad de elementos, profundidad, iluminación, personas, escenarios, texturas, gráficos 04
H-12 Política de IA generativa (prohibida para foto; nada sobre retoque/extensión/previs) 04 §IA
H-13 Nomenclatura para assets no-campaña 07
H-14 Peso «hoy» vs «objetivo» (los techos AVIF no aplican sin pipeline) 07 · 09
H-15 Checklist de QA de diseño con PASS / WARNING / FAIL 10
H-16 Estado y backlog de los slots sin campo (A2, A3, A4, A6, A12, avatar, OG de categoría) 02 · 11

Contradicciones resueltas (ninguna regla contradice otra sin excepción documentada)

# Contradicción Resolución de esta guía
X-1 Container 1280 (DS §4) vs 1440 (tokens.css, Tona 2026-08-20) 1440 manda. Enmienda pendiente a DS §4
X-2 Hero 1350×340 + 720×540 (DS/C6) → etiqueta del slot 2700×680 (= 2× DS) vs render medido 1440×360 → entrega 2880×720 (manual) Manda lo construido y medido: 2880×720 (4:1) y 1440×1080 (4:3). Un 2700×680 se escala +6.7 % a 1440 y rompe D-01. Enmienda a DS §7, C6 y a la etiqueta del ph-slot
X-3 «Bordes > sombras; reposo borde n300 + e0» (DS §3) vs «la caja la define la sombra» (cap.27/28) Excepción E-1: en tiles con foto (home, landing) manda cap.27/28 (e1 → e2, filete n200 o ninguno); cards de producto (cards.css) conservan DS §3 hasta el «siguiente pase de acabado» declarado
X-4 «Nada de glassmorphism/blur gratuito» (DS §10) vs velo con desenfoque del cintillo y del panel del hero Excepción E-2: el velo es un scrim funcional de legibilidad con receta única del sistema (§03 R-08); prohibido como decoración
X-5 AVIF/WebP por pipeline (DS §7, 11 §1) vs subida solo JPG/PNG/GIF sin compresión Dos columnas HOY / OBJETIVO en todas las specs (07); ningún techo «AVIF» se exige sin pipeline; deuda de desarrollo (11)
X-6 Tile 700×800 (DS §7) vs catálogo cerrado C6 sin tile No se producen tiles 7:8 hasta que exista el slot (T07 spec sin slot)
X-7 «Prohibido papel picado» (E5) vs tema patrio (cap.31, Tona) D-11: solo en el tema de temporada; nunca en arte ni chrome base
X-8 Cap de 3 fotos humanas «en todo el funnel» (ES-6) vs retrato en Tech Services (cap.22) El cap aplica al funnel de compra (home → PDP); páginas de servicio: máx 1 retrato por página, registro propio
X-9 «ilustración limpia» permitida (11 §1.1) vs «ni AI-hero-illustrations» (DS §10) Fotografía es la norma; ilustración = solo SVG monolínea del sistema (404/503, tarjeta SterenCard, iconografía)
X-10 «Luz natural cálida» (ES-6) vs retrato de estudio sobre navy (Tech Services) Dos registros: mostrador/taller (documental, luz natural) y retrato de servicio (estudio, recorte sobre navy); ambos con gafete y nombre real
X-11 width/height en el 100 % de <img> (DS §7) vs tiles de landing sin atributos con filas fijas (CLS 0 medido) Regla de fondo: alto reservado antes de cargar por cualquiera de los tres medios
X-12 «Cintillo» = slot de campaña 1440×120 (DS §7) vs «cintillo» = velo sobre foto (cap.27-29) Glosario: B01 cintillo de texto (slot, no construido) · cintillo de tile (velo). Nunca sin apellido
X-13 A3 «1600×1200 crop 16/9» y escenas «1600×1200» (expediente) vs slots medidos 16:9 y 1.6:1 (manual) Manda el ratio del slot: A07 1600×900 · A04 1400×880; un máster 4:3 se recorta con dirección
X-14 «Cero !important» (DS §10) vs interruptor global de reduced-motion con !important Excepción técnica declarada (única, global, comentada)
X-15 Hero LCP con fetchpriority + preload (DS §7) vs código: fetchpriority sí, preload no, srcset/<source> no Regla en 09 + deuda de desarrollo (preload, <source> 4:3, srcset)

02Taxonomía e inventario

Identificador: [Familia][NN] — una letra + dos dígitos (H01). Ocho familias: H héroes · B bandas y banners · T tiles · P producto · M editorial y marca · V video y movimiento · D decoración, fondos y temporada · S derivados fuera de página. Un ID se crea solo cuando existe (o se aprueba) un slot; los archivos que alimentan varios slots se catalogan aparte como assets A01…A15, porque una misma foto de categoría sirve a T01, T02, T05 y T08.

Estado real medido el 2026-09-10 sobre el tema Industrias/steren2026 (código y HTML servido): construido = el slot se pinta y tiene campo de carga · hueco = el slot se pinta como espacio reservado sin campo (en producción, superficie muda) · spec = especificado, no construido · dato = vive en el catálogo · no autorizado = fuera del catálogo cerrado.

Componentes

IDComponenteFamiliaDónde viveEstadoAsset principal
H01Hero de campañaHéroesHome · láminas 1-2 (config home_hero_1/2)Construido en el temaA01 arte 4:1 (2880×720) + A02 4:3 (1440×1080; sin campo)
H02Lámina de sistema «600+ tiendas»HéroesHome · lámina fijaHueco reservado sin campo de cargaA08 foto humana b (mostrador/taller) 4:1 + 4:3
H03Lámina de sistema SterenCardHéroesHome · lámina fija (si el programa está activo)Construido en el temaarte del sistema (tarjeta CSS/SVG, onda); sin raster
H04Cabecera de servicio con retratoHéroesTech Services (/steren-tech-services)Construido en el temaA10 retrato 4:5 (tecnico.webp 518×626)
H05Cabecera de landing SterenCardHéroesLanding del programa (C5c)Especificado, no construidotarjeta dibujada + display; sin raster
B01Cintillo de textoBandasHome/landings bajo el hero (C6)Especificado, no construidosin imagen (icono + texto HTML + link)
B02Banda de categoríaBandasHome ×2 (home_carrusel_1/2)Construido en el temaA05 packshot en moneda 108 px + carrusel
B03Banner tile de landingBandasDentro del mosaico de landing (máx 1)Construido en el temasin imagen (navy + texto)
B04Countdown de campañaBandasHome (C6)Especificado, no construidosin imagen (fecha real)
B05Banda de patrimonioBandasHomeHueco reservado sin campo de cargaA11 imagen de archivo 3:1 (1800×600)
B06Banda «Aprende con Steren»BandasHome (cyan-tint 2/2)Hueco reservado sin campo de cargaA07 foto de mostrador 16:9 (1600×900) en el tile 3
T01Tile de departamento héroe (2×2)TilesHome · mosaicoConstruido en el temaA03 imagen de categoría 1:1 (800×800) → insignia → glifo
T02Tile de departamento estándar (1×1)TilesHome · mosaicoConstruido en el temaA03 imagen de categoría 1:1
T03Tile de familia héroe (escena)TilesLanding · mosaico (2×2)Hueco reservado sin campo de cargaA04 escena 1.6:1 (1400×880); hoy packshot provisional
T04Tile de familia medio (panel lateral)TilesLanding · mosaico (2×1)Hueco reservado sin campo de cargaA04 escena o A03 packshot en el 42 % izquierdo
T05Tile de familia 1×1TilesLanding · mosaicoConstruido en el temaA03 packshot de familia sobre blanco
T06Tile de tipo (sin foto)TilesLanding/home · fallbackConstruido en el temaglifo del set sobre tinte
T07Tile de campaña 7:8Tiles— (DS §7; sin slot en C6)Especificado, no construido700×800 — no se produce hasta que exista el slot
T08Miniaturas y chips de familiaTilesLanding «Todo en…», chips del home, drawerConstruido en el temaA03 en moneda de 40 px (38 px útiles)
P01Packshot principal _x1ProductoPLP, PDP, carruseles, feeds, OGVive en el catálogo (dato)A05 1200×1200 blanco puro (intocable)
P02Tomas secundarias _x2.._x5ProductoGalería PDP, galería en tarjetaVive en el catálogo (dato)A06 1200×1200 (gramática nueva)
P03Tarjeta de productoProductoPLP, carruseles, carritoConstruido en el temaA05 vía category_page_grid 480² (PLP) / original (carruseles)
P04Galería del PDP + visorProductoPDPConstruido en el temaA05/A06 vía medium 1000² · small 160² · large 1600²
P05Video de productoProductoGalería PDP (facade)Construido en el temaA12 Vimeo/YouTube + póster real
P06Variantes de colorProductoPDP, PLP (pastillas + imagen por color)Construido en el temaA05 por variante; swatch = color sólido
P07Imagen de categoríaProductoAlimenta T01/T02/T05/T08 (landing_image)Vive en el catálogo (dato)A03 800×800 (hoy 129/131 a 400×400)
M01Imagen de archivo — catálogo impresoEditorialB05Hueco reservado sin campo de cargaA11 3:1
M02Foto de mostrador «Pregunta, Steren responde»EditorialB06 · tile 3Hueco reservado sin campo de cargaA07 16:9
M03Avatar del asesorEditorialPDP «Pregúntale a Steren» (64 px)Hueco reservado sin campo de cargaA09 1:1 (800×800 → 128 px)
M04Retrato de servicioEditorialH04Construido en el temaA10 4:5
M05Página de marca «Nosotros»EditorialNosotrosConstruido en el temaV03 video + glifos; sin fotografía propia
V01Banda de videos comprables (Terrific)Video/motionHome (mosaico → banda 1) · PLP/landing al finalConstruido en el temaA13 playlist vertical (panel de Terrific)
V02Reels «Así se usa»Video/motionHomeHueco reservado sin campo de cargaA12 videos verticales + póster real 1080×1920 (apagado: sin miniaturas)
V03Video institucionalVideo/motionNosotrosConstruido en el temaVimeo 871912462 (iframe eager, sin facade)
V04Motion del sistemaVideo/motionHero, tiles, paneles, esqueletos, luz, ES-13Construido en el temaCSS/JS con reduced-motion
V05Video hero / motion bannerVideo/motion—No autorizado por el catálogo cerradovideo autoplay — fuera del catálogo C6
D01Onda — firma gráficaDecoración5 usos cerradosConstruido en el temaSVG icon-st-onda currentColor
D02Superficies y fondosDecoraciónTodo el sitioConstruido en el temabg · bg-subtle · cyan-tint · navy; sin fondos fotográficos
D03Tema de temporadaDecoraciónChild theme steren2026-patrio (apagado)Construido en el temapapel picado, cinta, onda tricolor, fuegos (SVG/CSS)
D04Glifos del set propio como imagenDecoraciónT06, PDP, mega-menú, 404/503Construido en el temasprite SVG 24-grid trazo 1.75
D05Estados: 404 · 503 · vacíosDecoraciónPáginas de estadoConstruido en el temaSVG monolínea sin letras + voz V4
S01Imagen para compartir (OG)DerivadosProducto (1:1) · categoría/home (sin imagen)Hueco reservado sin campo de cargaA14 1200×630 (propuesta) / packshot 1200×1200 (hoy)
S02Imagen en feeds (Merchant, Meta)DerivadosIndustrias_FeedsVive en el catálogo (dato)A05
S03Correos transaccionalesDerivadosCorreosConstruido en el temalogo blanco 150 px; sin imagen de campaña

Assets (lo que se entrega)

ID Asset Ratio Entrega (2×) Alimenta
A01 Arte de campaña desktop 4:1 2880×720 H01, H02
A02 Arte de campaña móvil (re-encuadre, no recorte) 4:3 1440×1080 H01, H02
A03 Imagen de categoría (departamento y familia) 1:1 800×800 T01, T02, T05, T08, mega-menú
A04 Escena de landing 1.6:1 1400×880 T03, T04
A05 Packshot de producto _x1 1:1 1200×1200 P01, P03, P04, B02, S01, S02
A06 Tomas secundarias _x2.._x5 1:1 1200×1200 P02, P04
A07 Foto humana a — mostrador 16:9 1600×900 M02 (B06)
A08 Foto humana b — tiendas/taller (hero) 4:1 + 4:3 2880×720 + 1440×1080 H02
A09 Foto humana c — retrato del asesor 1:1 800×800 M03
A10 Retrato de servicio 4:5 1200×1500 M04 (H04)
A11 Imagen de archivo — catálogo impreso 3:1 1800×600 M01 (B05)
A12 Video de producto / reel 16:9 · 9:16 Vimeo + póster 1280×720 / 1080×1920 P05, V02
A13 Playlist Terrific 9:16 en el panel de Terrific V01
A14 Imagen OG 1.91:1 1200×630 S01
A15 Logo SVG maestro + onda — SVG chrome, D01, H03, S03

Mapa por página: qué componentes multimedia tiene cada plantilla

Página Orden de arriba a abajo LCP esperado
Home (orden vinculante cap.29 + cap.33) H01/H02/H03 (hero, máx 4 láminas) → fila de valor (D02 cyan-tint 1/2) → T01+T02 mosaico (5 tiles) + chips T08 → V01 «Míralo en video» → B02 banda 1 → P03 favoritos → B02 banda 2 → B05 patrimonio (M01) → B06 Aprende (M02) → módulo SterenCard (D02 navy) → newsletter → footer arte del hero (lámina 1) en ≥768; en <768 hoy el panel navy
Landing de departamento (nivel 2) portada tipográfica → mosaico T03/T04/T05/T06 + B03 banner → «¿No sabes cuál necesitas?» → «Todo en…» T08 chips → banda guía → V01 (si la categoría lo enciende) tile héroe T03
Familia / PLP (nivel 3) y búsqueda P03 tarjetas (con galería en tarjeta y etiquetas) → banda guía → V01 primera tarjeta P03
PDP P04 galería (+ P05 video) · P06 variantes · M03 avatar en «Pregúntale a Steren» · P03 en «También te puede servir» · S01 og:image tile 0 de la galería
Tech Services H04 cabecera con M04 retrato → secciones con glifos D04 tecnico.webp
Nosotros cabecera → V03 video institucional → filosofía sobre navy con D04 texto
SterenCard hoy página legal; landing H05 (spec) —
404 / 503 D05 ilustración monolínea + buscador + departamentos texto
Tema de temporada D03 sobre cualquier página (capa) sin cambio

El catálogo es cerrado

Los slots de campaña son exactamente los de C6 — hero · cintillo · coleccion · mosaico · countdown — más los slots de sistema que el tema construyó (bandas de categoría, patrimonio, Aprende, Terrific, retrato de servicio). No hay slot #47. Lo que no aparece en la tabla de arriba no se diseña: se propone como enmienda (capítulo 11) con su ficha completa, y solo entonces existe. Esto aplica en particular a los tres candidatos recurrentes:

Candidato Estado Por qué
Video hero / motion banner (V05) no autorizado DS §7 «estáticos o rotación manual»; T2 de la esencia: la espectacularidad se compra con arte, no con autoplay
Tile de campaña 7:8 (T07) spec sin slot DS §7 lo hereda del arte actual, pero C6 no lo lista y el tema no tiene dónde pintarlo
Cintillo raster (CintilloWeb_1920x150) reemplazado B01 es texto HTML con icono y link; el JPG sin link ni alt de producción es justo lo que se retira

Estado actual (capturas del local, 2026-09-10)

Lo que el tema pinta hoy con los datos reales del catálogo y sin artes del cliente: los huecos mudos son exactamente los slots marcados «hueco» arriba (hero sin arte, crop móvil, patrimonio, mostrador).

Home a 1440 px
Home a 1440: hero sin arte (panel navy sobre gris mudo), mosaico de departamentos con packshots, bandas de categoría, patrimonio y Aprende con huecos.
Landing Smart Home a 1440 px
Landing de departamento: mosaico ponderado con packshots (las escenas T03/T04 aún son `render`), banner navy, escenarios y lista densa.
Home a 390 px
Home a 390: el hero muestra el hueco 4:3 gris sobre el bloque navy (DEV-06/07); mosaico a 2 columnas sin chips.
Tech Services a 1440 px
Tech Services: cabecera navy con retrato de servicio (H04/M04) — la única foto humana publicada hoy.

03Reglas generales transversales

Las reglas que aplican a toda pieza multimedia antes de bajar a la ficha de su componente. Numeradas R-nn; cada una dice de dónde sale, cómo se verifica y qué es PASS / WARNING / FAIL. Las fichas del capítulo 05 las asumen y solo añaden lo específico.

R-01 · El contrato del slot: la imagen es muda, el sistema habla

# Regla Marca Verificación Veredicto
R-01 La imagen NO porta texto. Titulares, precios, %, CTA, legales, cupones, logos de terceros y el logo Steren viven en HTML o en el chrome; el arte llega mudo [E] DS §7 · C6 · 11 §1.1 · ES-11 OCR (tesseract) sobre el archivo = 0 cadenas que no estén sobre un objeto físico (empaque, gafete, fachada) FAIL ≥ 1 cadena ●
R-02 Todo slot de campaña captura datos tipados: imagen desktop + imagen móvil + alt + vigencia (desde/hasta) + kicker + título + SKU (precio vivo) + CTA (texto + URL). Sin uno de ellos no se publica; vencido, desaparece; vacío, no renderiza [E] DS §12.5 · C6 · HomeHero.php Campos llenos en config; al día siguiente de vigente_hasta el slide no está en el DOM FAIL campo faltante ● · FAIL «Próximamente» o hueco gris ●
R-03 El catálogo de slots es cerrado. Lo que no está en la taxonomía (capítulo 02) no se diseña: se propone como enmienda con ficha completa (capítulo 11) [E] C6 «no hay slot #47» El ID de la pieza existe en la tabla del capítulo 02 FAIL slot inexistente ●
R-04 Los estados no mienten: un slot sin arte es mudo (ph-slot--mudo), nunca esqueleto, gris «disfrazado», «próximamente» ni «imagen no disponible»; un tercero que no responde se retira fuera del viewport [E] cap.16 · cap.29.4 · cap.33 HTML servido en producción sin Próximamente|pendiente|no disponible dentro de .hero, .dtile, .mtile FAIL
R-05 Un solo mensaje por pieza: un producto o familia, un beneficio, un CTA, ≤ 1 cifra-héroe (la que el sistema calcula) [D] C6 · DS §2 (registro del 800) · I-16 · D-18/D-20 Contar: kicker + título nombran ≤ 2 sustantivos-objeto; 1 .btn; 1 elemento con font-weight: 800 FAIL ≥ 2 mensajes, ≥ 2 CTAs o ≥ 2 cifras 800
R-06 El precio siempre es vivo (campo sku → priceInfo), pintado como cifra-héroe 28/800 cian con centavos en superíndice; nunca tecleado, nunca en el arte; la oferta se nombra como ahorro («Ahorra $X (Y %)») donde hay línea de precio y como kicker + vigencia en el hero [E] manual §2.1 · C6 · DS §5 A12 · I-10/I-12 Cambiar el precio en admin + cache:flush → el hero cambia solo; $/% en titulo/kicker = 0 FAIL cifra tecleada o en el arte ●
R-07 Urgencia solo con reloj o inventario real: countdown = vigente_hasta; escasez solo con el dato de stock del endpoint [E] DS §10 · C6 · I-14 Fecha del countdown == vigente_hasta; frase de escasez acompañada de número de stock FAIL «últimas piezas», «solo hoy» sin fecha, «N personas viendo» ●

R-08 · Geometría, DPR y los tres estados

# Regla Marca Verificación Veredicto
R-08 Entrega a 2× del render máximo de desktop y con el ratio exacto del slot (±0.5 %); el sistema nunca estira ni deforma [E] 11 §1.4 · D-01 · C-17 identify: dimensiones ≥ tabla A01-A15; ratio PASS ≥ 2× a 1440 · WARNING 1.5-2× (o a 1920/2560) · FAIL < 1.5× o ratio distinto
R-09 Tres estados, siete anchos de verificación: móvil <768 (360, 390) · tablet 768-1023 (768, 1023) · desktop ≥1024 (1440, 1920; +2560 en el hero). Se diseña y se prueba en los siete con el asset real [D] tokens 768/1024/1280 · clamp del hero · C-01 Capturas en los 7 anchos PASS 7/7 · WARNING falta 1023 o 360 · FAIL falta otro
R-10 Móvil no es el desktop encogido ni recortado: donde el ratio cambia de verdad (hero 4:1 → 4:3) el asset es alterno (A02) con el mismo concepto re-encuadrado; donde la caja es fija (tiles, bandas, tarjetas) el mismo asset se compone para su intersección de ventanas [E] DS §7 · C6 R4 · ES-11 · C-06/C-08 Móvil probado con A02 real; escena con sujeto en x 25-75 % · y 12-62 % FAIL A02 ausente o desktop escalado ●
R-11 Focal point y subject box declarados en fracciones del lienzo en la ficha de cada asset, y la subject box dentro de la intersección de todas las ventanas menos las zonas de UI [H] C-03 (extiende D-3) Overlay de ventanas de la ficha sobre el arte PASS dentro 7/7 · WARNING roza ≤ 2 % en un ancho · FAIL bajo panel, flecha, dots, badge o velo
R-12 Toda imagen tiene alto reservado antes de cargar (width/height, aspect-ratio o filas fijas) → CLS 0; también lo que llega tarde (Terrific, facade de video) [E] DS §7 · X-11 · D-10 Lighthouse CLS ≤ 0.03 a 390 y 1440 con caché fría PASS ≤ 0.03 · WARNING 0.03-0.05 · FAIL > 0.05
R-13 El sujeto mide ≥ 48 px en su render más chico; en chips ≤ 40 px la imagen es decorativa y solo exige silueta ≥ 24 px con contraste ≥ 3:1 contra blanco [H] C-09 (umbral = touch.target-min) Render más chico × fracción del sujeto (tabla del capítulo 06) PASS ≥ 48 · WARNING 36-47 · FAIL < 36
R-14 Recortes circulares (moneda 108/76, chip 40, avatar 64): el sujeto cabe en el 70 % central [D] C-13 Círculo guía sobre el lienzo FAIL esquinas del producto cortadas

R-15 · Texto sobre media: el velo del sistema, y nada más

# Regla Marca Verificación Veredicto
R-15 Único mecanismo de texto sobre imagen: el velo del sistema. Navy (hero): color-mix(navy 96 %) (DEV-01; hoy 92 %) + backdrop-filter: blur(10px) saturate(1.15) + radio 12 + e2; texto blanco / cian. Blanco (cintillo de tile): bg 96 → 92 → 0 + mismo blur + máscara al 46 %; texto n900 / n700 / n600. Friso (retrato H04): navy 92 → 0 sin blur (excepción E-8) [E] cap.27/28 · home.css:48-52, 211-228 · X-4 (excepción E-2) · D-08 grep backdrop-filter|color-mix|mask-image del componente = receta; captura sin línea recta a media foto FAIL texto sobre foto desnuda, text-shadow, contorno, velo con otros valores, velo sin máscara ●
R-16 Sin foto debajo no hay velo: el cuerpo vuelve a base opaca (hero <768 navy; tile sin foto blanco; tile chico de landing <1024) [E] home.css:114-117, 231-232 · catalogo.css:258-266 · D-09 backdrop-filter solo donde hay <img> debajo FAIL blur sobre superficie plana (glass gratuito)
R-17 La zona de copy queda limpia en el arte: hero = unión de paneles x 2.5-58 % · y 12-96 % + franja de dots x 43-57 % · y ≥ 71 % + vigencia + flechas; tiles = banda inferior del cintillo (104 / 92 / 72-74 px); el sujeto termina ≥ 8 px por encima de la reserva [D] D-04 · D-10 · D-11 · C-04 Overlay de la plantilla de zonas sobre el arte ×1 PASS · WARNING detalle fino bajo el panel · FAIL sujeto o rostro bajo panel/velo/dots ●
R-18 Contraste medido sobre el peor píxel, no sobre el token: kicker y precio cian necesitan fondo de medio tono bajo y alrededor del panel (L* 40-60); dots con arte de L* ≤ 60 bajo el chip [D] cap.29 «sobre el píxel» · D-14/D-17 · G · L-01/L-02 Cuentagotas 5 puntos (promedio L*) en la zona del panel y de los dots del arte ×1 PASS 40-60 · WARNING 60-75 o 30-40 · FAIL > 75 o < 30
R-19 Los controles sobre media llevan su propio chip (flechas: círculo blanco 92 % + n300; dots: chip n900 60 % (DEV-02); vigencia: navy 75 %) y nunca dependen del arte [E] home.css:88-105 · D-13 Computed styles FAIL control sin chip
R-20 Etiquetas sobre packshot: listado ≤ 2 (Oferta primero), ficha ≤ 3, solo .corner (esquina superior izquierda), texto 12/600, sin sellos ni PNG; en <768 una sola sobre la foto (la segunda al cuerpo); nunca sobre fotos de categoría ni sobre el arte del hero; área tapada ≤ 10 % del producto [E] DS §5 · cap.27.3 · [H] C-18/L-25 · D-21 Contar; caja del badge ∩ producto / producto ≤ 0.10 FAIL > 2/3, 2 filas en móvil, PNG/sello, > 15 %

R-21 · Fotografía: la convención medida

# Regla Marca Verificación Veredicto
R-21 Packshot canónico: 1:1, ≥ 1200×1200, sRGB, fondo #FFFFFF (perímetro ≥ 99 % de píxeles con lum ≥ 253, esquinas 255), producto centrado (0.50 ± 0.02) con su lado largo al 90 % del lienzo (aire 5 %), sin sombra (banda inferior ≥ 246), sin altas luces recortadas (≤ 0.5 %), negros con textura (≤ 3 % a ≤ 3), sin viñeta ni filtro [D] medido sobre 34 packshots (E-01…E-08) · [E] DS §7 · 25 §6 bbox, histograma, cuentagotas PASS 0.86-0.92 · WARNING 0.80-0.86 / 0.92-0.95 · FAIL < 0.80 («router diminuto») o > 0.95 sin cable que salga
R-22 La sombra y el aire los pone el sistema (padding, viñeta radial navy 5 %, e1 → e2): el archivo no trae nada que el sistema ya haga [D] cap.27/28 · B · E-06/E-08 Esquinas = centro del fondo (255/255) FAIL sombra, viñeta o halo en el archivo
R-23 Escala óptica coherente entre vecinos: en una fila o mosaico la ocupación de los productos difiere ≤ 0.12 [D] 22 §2 («foco enorme, router diminuto») · D-07 · E-04 Ocupación de cada imagen visible; máx − mín PASS ≤ 0.12 · WARNING 0.12-0.20 · FAIL > 0.20
R-24 Contexto mexicano real (ES-11): ≥ 2 anclas de lugar (muro pintado de color saturado, loseta o mosaico de pasta, azotea con tinaco, ventana de herrería, mesa de taller con herramienta usada, mostrador o changarro real, contacto/apagador mexicano, manos operando el producto) y 0 marcadores nórdicos (parquet + monstera + muro blanco, casa de vidrio, estadio, calle con bokeh genérico, sofá de catálogo); nunca stock extranjero, modelos, renders ni IA [E] ES-11 · E5 · [H] las listas (E-11) Checklist de anclas; referencia GOOD: reels del vivo (cap29/t3-VIVO-reels.png) PASS ≥ 2 / 0 · WARNING 1 · FAIL 0 anclas o ≥ 1 nórdico ●
R-25 Color del arte: fidelidad del producto a su packshot (neutros R≈G≈B ±10; tono ±10°, saturación ±15 pts en el mismo punto físico); fuera del producto ≤ 3 colores dominantes (≥ 8 % tras cuantizar a 16); saturación media 0.20-0.45; sin naranja 15-45° ni rojo 345-15° dominantes (compiten con buy/sale); sin amarillo neón; sin degradado liso como fondo [H] B-11 · E-12…E-14 · L-28 Cuantización PIL; cuentagotas; histograma HSV PASS · WARNING 4 colores / 0.45-0.55 · FAIL ≥ 5 colores / > 0.55 / degradado de fondo
R-26 Personas: solo personal real de Steren con gafete y nombre real; 3 fotos en el funnel (tarjeta «Pregunta, Steren responde» · lámina de tiendas · Q&A del PDP) + 1 retrato por página de servicio; dos registros: documental (mostrador/taller, luz natural cálida, manos ocupadas, cliente sin rostro) y retrato de estudio (fondo igualado al navy); rostro ≥ 48 px y gafete ≥ 16 px en el render más chico [E] ES-6 · R11 · X-8/X-10 · [H] C-22 · E-20…E-25 Conteo de fotos humanas por página; gafete legible; EXIF de cámara FAIL modelo/stock/IA, 4.ª foto en el funnel, sin gafete ●
R-27 Procedencia y retoque declarados: original de cámara con EXIF para toda escena o persona; _retoque.csv + máscaras por operación; sin declaración = «sin retoque»; retoque no declarado = FAIL de la tanda [H] E-38 (ENM-05) exiftool; existencia del CSV PASS · WARNING sin EXIF (pedir) · FAIL retoque no declarado
R-28 IA generativa: prohibido generar o alterar producto, personas (manos incluidas), escenas o fondos que pretendan ser fotografía, relighting, cambio de cielo, upscale generativo; permitido con condiciones y declaración: limpieza de fondo, extensión de fondo neutro y uniforme (σ ≤ 6) para re-encuadrar, upscale no generativo ≤ 1.6× (SSIM ≥ 0.95), previsualización no publicada; 10 indicios de detección en QA (capítulo 04) [E] ES-11 · 11 §1.2 · DS §10 · [H] E-36…E-39 (ENM-05) Checklist de 10 indicios; metadatos C2PA/XMP FAIL cualquier generación; WARNING 1 indicio (2)-(10) → pedir original ●

R-29 · Superficies, decoración y movimiento

# Regla Marca Verificación Veredicto
R-29 Solo cuatro superficies bajo o alrededor de la media: bg (el hueco de la foto es el mismo blanco del render), bg-subtle, cyan-tint (≤ 2 bandas/página, nunca PDP ni checkout; micro-superficies solo badge-60min y chip de tienda) y navy (footer, SterenCard, panel del hero, banda de categoría, banner de landing, cabeceras de servicio). Nunca fondo fotográfico de sección, nunca onda o patrón como textura [E] DS §1c · §6 · §10 · cap.27 · D-24 background-image: url() fuera de <img> = 0; contar bandas tint FAIL
R-30 Registro cerrado de overlays y degradados (10 entradas, capítulo 04 §6): cada uno tiene función (legibilidad · luz sobre banda ≥ 600 px · profundidad · progreso · control) y superficie; fuera del registro = FAIL; en el arte, ningún degradado [E] cap.29 «un degradado necesita superficie y hace trabajo» · D-23 · D-14 grep gradient|backdrop-filter|rgba( por componente contra la tabla FAIL overlay nuevo · WARNING receta desviada
R-31 Anti-slop: sin mesh/aurora, glass decorativo, neumorfismo, sombras fuera de e1-e3, radios > 12 en imagen, viñetas «cine» > 5 %, neones, outlines 3D, cifras gigantes con efectos, collage de recortes sin escala común, emojis, ilustración figurativa como hero [E] DS §10 · B-16 · 25 §7.2 Inspección + box-shadow ∈ {e1,e2,e3}; border-radius ≤ 12 FAIL
R-32 Onda = firma, no wallpaper: 5 usos (subrayado de títulos · check del ATC · loader · arte SterenCard · badge fabricante); prohibida como textura, viñeta o marca de agua; ornamento folclórico solo en el tema de temporada (capa apagable) [E] DS §6 · ES-1 · X-7 (E-6) Inspección FAIL
R-33 Nada se mueve solo: hero de rotación manual (swap instantáneo; solo el panel entra en 240 ms); carruseles con scroll-snap y flechas; video nunca antes del gesto ni con sonido; GIF = 1 fotograma; prefers-reduced-motion en toda animación (apaga / 120 ms / estado final / conserva tiempo); solo transform, opacity y color; sin parallax, Ken Burns, zoom > 1.09, entradas por scroll (salvo la onda ES-13d) ni fondos animados; video hero no autorizado [E] DS §5/§7/§10 · ES-13 · C6 · F-01…F-08 · F-33…F-49 · L-17 grep setInterval = 0; n_frames = 1; emulación reduce; captura, no temporizador FAIL autoplay, GIF animado, motion sobre la imagen del hero ●

R-34 · Copy, alt y voz

# Regla Marca Verificación Veredicto
R-34 Límites por campo (medidos sobre el tema real, I-01): kicker ≤ 24 · título hero ≤ 60 / 2 líneas · CTA ≤ 18 caracteres / ≤ 3 palabras · uso de tile ≤ 40 (≤ 60 héroe) · familia ≤ 28 + conteo · chip ≤ 14 (landing) / ≤ 20 (home) · título de banda ≤ 50 · banner ≤ 44 · nombre de departamento ≤ 30 · cintillo ≤ 70 + link ≤ 18 · panel del hero ≤ 204 px [D] I-01 · D-16 · L-21 offsetHeight/offsetWidth del campo a 1440 / 1024 / 768 / 390 PASS · WARNING 1 línea de más a 1440 · FAIL clamp con puntos suspensivos, 3 líneas a ≤ 1024, CTA en 2 líneas
R-35 Fórmulas de headline: F1 uso con verbo («Enciende la casa desde el celular») · F2 beneficio con dato del SKU («90 min de respaldo para el módem») · F3 pregunta del mostrador («¿No sabes cuál necesitas?») · F0 escenario (situación + respuesta con motivo + «Ver [familia]»). Kicker = nombre de campaña, departamento o temporada; nunca cifra ni verbo [E] V1-V5 · 22 §4.2 · E4 · [H] I-03 Primera palabra = imperativo (F1); cifra en atributo del SKU (F2) FAIL fuera de fórmula
R-36 Prohibido en headline, kicker y CTA: superlativos vacíos (mejor, increíble, espectacular, premium, exclusivo, único, imperdible), anglicismos fuera de nombre de tecnología (off, sale, deal, setup…), mayúsculas tecleadas y signos repetidos, folclor («¡órale!»), «usted»/plural corporativo, cifra de descuento o precio tecleada, urgencia sin fecha, relleno sin objeto («Descubre nuestra…»), humor en piezas de dinero, CTA muerto («Ver más», «Clic aquí», «Compra ya») [E] V1/V4/V5 · E5 · DS §10 · [H] regex de I-04 Regex de QA sobre los campos FAIL match
R-37 CTA: un solo botón por pieza; imperativo + destino (Ver · Explora · Elige · Arma · Compara · Recógelo · Actívala · Suscríbete · Conoce); el botón lo decide la superficie (navy → btn-primary en el hero, btn-sterencard en territorio SterenCard; nunca buy fuera de la compra); destino = PLP filtrado, landing o PDP del SKU anunciado (nunca la raíz, CMS de campaña ni otro SKU); data-st + data-campaign [E] DS §5/§9 · 22 §4.2 · Tona 2026-09-03 («el hero no agrega al carrito») · I-05…I-09 getComputedStyle(cta).backgroundColor ∈ { #006B9E, #00B2E3 }; URL contiene el url_key/SKU; producto en la primera fila del destino FAIL naranja, dos botones, «Ver más», destino raíz
R-38 El copy se sostiene sin el arte y el arte sin el copy; la escena no promete lo que el producto no hace (cada elemento narrativo ↔ un atributo del SKU) [D] I-18/I-19 · V2/V3 Ocultar la imagen y leer el panel; tabla elemento ↔ atributo FAIL «como ves», «el de la foto»; lluvia sin protección IP
R-39 alt es contenido: describe lo que muestra («No break Steren encendido bajo la tele de una sala, durante una tormenta»), ≤ 125 caracteres, sin «imagen de», sin precio ni CTA; alt="" sancionado en tiles, tarjetas y monedas cuando el nombre es el enlace adyacente; banner sin alt no se publica [E] DS §7 · D-9 · [H] I-24 (plantillas por tipo) Lector de pantalla; validador de plantillas FAIL sin alt en hero/escena/persona; alt que repite el título ●
R-40 Prueba de los 5 segundos (gate de contenido): tres personas ajenas, 5 s a 1440 y 5 s a 390: ¿qué vendo? ¿para qué o a quién? ¿qué hago después? [H] I-21 (complementa el test «logo tapado» de 01 §11) Respuestas por escrito PASS ≥ 2/3 aciertan las tres · WARNING producto y CTA sin beneficio · FAIL alguna no identifica el producto

R-41 · Assets y entrega (resumen; detalle en 07 y 09)

# Regla Marca Verificación Veredicto
R-41 Dos columnas siempre: HOY / OBJETIVO. HOY (sin pipeline): JPG progresivo q70-80 (PNG solo con transparencia real; GIF solo 1 fotograma), sRGB, sin metadatos, al peso máximo de la tabla A01-A15; OBJETIVO: AVIF/WebP + srcset cuando exista el pipeline. Ningún techo «AVIF» se exige hoy [E] X-5 · DS §7 · manual §5 · H identify, wc -c FAIL formato que el admin rechaza (WebP/AVIF hoy) o peso > máximo ●
R-42 Si el arte no cabe en el peso a 2×, se baja resolución (mínimo 1.5×), nunca calidad < q60 [H] H-10 identify + wc -c WARNING 1.5-2× · FAIL < 1.5× o q < 60
R-43 Nomenclatura: campañas AAAA-MM_campaña_slot_variante[_SKU].ext; no-campaña {tipo}_{id}_{ratio}.ext (cat_smart-home_1x1.jpg, esc_smart-home-hero_16x10.jpg, retrato_rodrigo-hernandez_4x5.jpg, mostrador_satelite_16x9.jpg, archivo_catalogo-2026_3x1.jpg, og_producto_SKU_1200x630.jpg); versión = nuevo nombre, nunca ?v= [E] 11 §1.5 · [H] L-30 Regex sobre el nombre FAIL
R-44 La imagen LCP de cada plantilla (hero lámina 1 · tile héroe de landing · primera tarjeta del PLP · tile 0 de la galería) va eager con fetchpriority="high" y width/height; todo lo demás loading="lazy" + decoding="async"; nunca un iframe antes del gesto [E] DS §7 · cap.16 · X-15 · H Markup servido; Lighthouse FAIL LCP lazy o iframe eager
R-45 Presupuesto del contrato (intocable): LCP ≤ 2.0 s móvil · CLS ≤ 0.05 · imagen LCP ≤ 200 KB (gate 150) · above-the-fold ≤ 1 MB · ≤ 50 requests. Hoy el coste dominante son los originales 1200² servidos en miniaturas (3.5 MB de <img> en el home): deuda P0 del capítulo 09 [E] DS §12 · H §3.3 Lighthouse móvil throttled; Network FAIL rompe el contrato ●

Cómo se aplican

  1. Identifica el componente por ID (capítulo 02) → su ficha (05) dice lo específico.
  2. Antes de producir el arte: overlay de las ventanas y zonas de la ficha sobre el lienzo (R-11, R-17).
  3. Antes de entregar: R-01 (OCR), R-21…R-28 (fotografía), R-41…R-43 (archivo).
  4. Antes de publicar: R-34…R-40 (copy), R-44/R-45 (entrega), capítulo 10 (checklist completo, veredicto).

04Art Direction System — así se ve Steren

Tesis operativa. La imagen de Steren es su fotografía de producto real: 33 de 34 packshots del catálogo miden blanco 255/255/255 exacto, producto centrado (0.50, 0.50) al 90 % del eje mayor, cero sombra en el archivo y neutros con desviación R/G/B mediana 0 (B §0, E §1). Ese archivo es el patrón, y el sistema pone lo demás: el aire (contain + 8/12/20 px), la sombra (e1 → e2), la viñeta navy 5 %, el velo y todo el texto (E-16, D-05). De ahí la regla madre de este capítulo: la foto no trae nada que el sistema ya pone. El arte llega mudo —0 caracteres, 0 logos, 0 cifras (E-01, B-12)— y deja limpia la zona donde el sistema escribe. Cuando hay contexto es contexto mexicano real (muro pintado, loseta, tinaco, mesa de taller, changarro, manos operando) y no stock, render ni IA (E-05, ES-11). Producción actual es el negativo medible de todo esto (13/13 piezas con texto raster, 8-78 % de píxeles vivos, hasta 6 dominantes) y por eso cierra el capítulo como catálogo del BAD (§9). Cada criterio trae número, herramienta y veredicto; lo que es propuesta nueva va marcado [H] y se recalibra con las diez primeras piezas aprobadas (B T-8, E T-12).

Vocabulario medible (método PIL de B §6.2, sin dependencias): «vivos» = píxeles con S>0.5 ∧ V>0.6 · «neón» = S>0.8 ∧ V>0.85 (HSV sobre sRGB, imagen reducida a 240 px de lado) · «dominante» = color que cubre ≥5 % del área tras cuantizar a 8 (quantize(8, MEDIANCUT)) · «cromático» = S>0.35 ∧ V>0.35 · «bbox» = píxeles con luminancia <245 · «blanco» = 8 puntos (4 esquinas + 4 centros de borde) · «neutro» = |max(R,G,B) − min(R,G,B)| · «L*» = luminancia perceptual (medio tono = 50).

Los 25 criterios, operacionalizados

Un criterio = una regla AD-nn. La marca dice si la regla ya existía [E], se deriva de lo medido [D] o es nueva [H]; la fuente cita al especialista (B-nn, E-nn, D-nn, C-nn) y la decisión del Lead (L-nn) que la fija. Las cifras del hero se dan sobre el lienzo A01 2880×720; las de la escena sobre A04 1400×880; las del packshot sobre 1200×1200 / 800×800.

Composición y espacio

Criterio Regla reproducible (con números) Marca + fuente · aplica a Cómo se verifica (herramienta / umbral) PASS / WARNING / FAIL
AD-01 Composición Compón un sujeto y una dirección de lectura. Hero A01: sujeto dentro de x 58-84 % · y 22-78 %, focal (72 %, 50 %); el 58 % izquierdo es fondo continuo (muro, mesa, aire). Escena A04: sujeto en x 25-75 % · y 12-62 %, focal (50 %, 40 %). 1:1 y 4:3: centro de masa en 0.45-0.55 (A02: 0.50 ±0.06, sujeto al 55-80 % del ancho). Horizonte y superficie a nivel ±2° [E] manual §5.1 · 22 §4.3 · [D] D-04, 34/34 packshots centrados · B-01 · C-03/C-16 · E-16/E-17 · L-06, L-10 · A01 A02 A04 A07 A08 · H01 H02 T03 T04 S01 Overlay de tercios + caja de sujeto sobre el lienzo de entrega; bbox por umbral 245 (PS/GIMP); regla-nivel sobre la superficie PASS dentro de la caja y ±2° · WARNING el sujeto invade ≤10 % del tercio izquierdo o inclinación 2-4° · FAIL sujeto bajo el panel, fuera de la zona segura o cortado por el borde (CCTV: cámara cortada abajo)
AD-02 Posición del producto Muestra el producto entero (ningún lado del bbox toca el borde) y apoyado o en uso (superficie, soporte real o mano): nunca flotando ni recortado sobre fondo. Centro de masa: hero 4:1 x 0.58-0.80 · y 0.40-0.62 (B-03 ∩ L-06); 4:3 x 0.40-0.60 · y 0.35-0.65; escena 1.6:1 x 0.35-0.75 · y 0.25-0.60; packshot 0.50 ±0.05 [E] ES-11 «manos operando» · manual §5.1 · [D] cap.29.3 «a sangre = parche» · B-03 · E-03 · H01 H02 T01-T05 T08 P01 P02 P07 S01 bbox por umbral; distancia a cada borde ≥5 % en 1:1 (solo cables, cordones o mástiles salen, y por un borde: E-03); prueba de apoyo: la sombra propia toca una superficie visible PASS · WARNING bbox dentro del 5 % de tolerancia de la zona segura; cable por 2 bordes · FAIL cortado, flotando o bajo el panel («Ambientes saludables»: 3 recortes flotando)
AD-03 Escala Escala el producto de A03 y del packshot al 90 % del eje mayor (aire 5 %; el sistema añade el suyo). Hero 4:1: alto del producto 25-56 % del lienzo (180-405 px de 720). Escena 1.6:1 y 4:3: 35-60 % del alto. Mostrador 16:9: persona 60-90 % del alto. Entre tiles vecinos: ratio bbox mayor/menor ≤1.5 (ocupación difiere ≤0.12). Identificable a 122 px (tile chico) y 30 px (chip) [D] medido 0.90 ±0.01 en 30/34 · [E] D-07, 22 §2, manual §5 · B-04 · E-02/E-04 · C-07 · L-09 · A03 A05 P01 P07 T01 T02 T05 T08 H01 T03 T04 bbox/lienzo; hoja de tiles del mosaico a escala real; miniatura a 122 y 30 px con 3 revisores A03 (L-09): PASS 86-92 % · WARNING 80-86 % · FAIL <80 % («router diminuto») o >92 % (el hover ×1.09 lo corta). Hero: PASS 25-56 % · WARNING 20-25 % · FAIL <20 % o >56 %. Tiles: WARNING ratio 1.5-2 · FAIL >2 o ilegible a 122 px
AD-04 Espacio negativo Deja vacío donde el sistema escribe; el vacío no es relleno. Mínimos: packshot 5 % del eje mayor; hero 4:1 el 58 % izquierdo limpio y ≥25 % del área sin detalle; escena 1.6:1 ≥25 % incluida la franja inferior de 104 px (cintillo); 4:3 móvil ≥40 % (el copy va debajo, pero el producto respira); mostrador 16:9 ≥10 % de margen [E] manual §5.1 · [D] D-04 (padding-bottom 104/72), aire 5 % medido · B-08 · [H] porcentajes de área · todos los slots con arte Mapa de bordes (Sobel / «encontrar bordes»): % de área con gradiente bajo; overlay de la zona de copy PASS ≥ umbral · WARNING 15-25 % (hero/escena) · FAIL <15 % o cintillo lleno borde a borde (04_CintilloWeb 1920×150: 0 %)
AD-05 Cantidad de elementos Limita la pieza a 3 elementos: 1 sujeto (producto o persona-con-producto) + 1 contexto (muro/mesa/mostrador) + 1 apoyo opcional (mano, accesorio del kit, 2.º producto de la misma familia). Productos ≤2 en hero/escena (un kit cuenta 1 en escala real), 1 en categoría; ≤5 objetos además del producto; logos/iconos de terceros = 0 (bancos y pagos viven en pagos-fila.phtml) [E] D-08 · DS §10 · 33 §5 · [D] producción 8-12 elementos · B-13 · E-12 · D-18 · [H] el cap · A01-A08 A14 · H01 H02 T03 T04 Plantilla sujeto/contexto/apoyo; conteo; OCR para logos PASS ≤3 · WARNING 4 · FAIL ≥5 o cualquier logo/icono ajeno (MP: 10+; CCTV: sello + 4 iconos sociales + lupa)
AD-06 Jerarquía Ordena la lectura producto → copy del sistema → contexto, por tamaño (el producto es el mayor elemento no-fondo, ≥2× el área de cualquier apoyo), foco (único plano nítido) y contraste local (el mayor contraste del lienzo está en el producto). El fondo nunca tiene más detalle que el sujeto [E] DS §0/§10 (jerarquía por tamaño/peso) · 26 §2 · C6 (precio en HTML) · B-14 · D-02 · H01 H02 T03 T04 M02 Blur test: gaussiano 20 px → la mancha más contrastada es el producto; prueba de 3 miradas (qué vieron primero) PASS producto primero 3/3 · WARNING 2/3 · FAIL el fondo o una cifra gana (LLUVIAS: «20 % OFF» gana 3/3; no hay producto)

Luz y color

Criterio Regla reproducible (con números) Marca + fuente · aplica a Cómo se verifica (herramienta / umbral) PASS / WARNING / FAIL
AD-07 Iluminación Ilumina con una fuente principal suave arriba-lateral (30-60°), sombra propia hacia abajo; especulares quemados (255 dentro del producto) <1 %; sin luz de color, gel, rim light cian/naranja «tech», flash frontal ni contraluz. Registros: packshot = estudio uniforme neutro, banda del 8 % bajo el sujeto ≥246; escena = ventana/puerta o lámpara de trabajo, cálida permitida (blanco de referencia R ≥ B+8 y ≤ B+30) con el producto en ±6; persona = clave:relleno ≤3:1, gafete R−B entre +5 y +20; retrato de servicio = estudio neutro 2-3 luces, clave:relleno 2:1-3:1, catchlight en ambos ojos [E] 25 §6 «estudio uniforme» · ES-6 «luz natural cálida» · X-10 · [D] p98 medido · B-06 · E-06/E-22/E-23 · [H] rangos (calibrar en la 1.ª sesión) · A01-A11 Histograma del recorte del producto (p98 ≤250 salvo blancos); dirección de la sombra propia; cuentagotas 5×5 en un gris del producto y en las dos mejillas; buscar sombra dura en el muro PASS · WARNING especular 1-3 %, sombra lateral pura, clave:relleno 3-4:1, R−B +20..+30 · FAIL luz de color, contraluz, quemados >3 %, G>R (fluorescente), flash frontal (LLUVIAS: lámparas quemadas + rayo)
AD-08 Profundidad Produce la profundidad con la óptica (un plano nítido + fondo real con desenfoque que crece con la distancia, f/2-f/4 equivalente) y con el sistema (viñeta navy 5 %, sombra e1 → e2). Máximo 2 planos (un 3.º de contexto medio solo si tapa <10 % del producto). Prohibido: outlines, extrusión 3D, bisel, sombra proyectada dura, desenfoque uniforme detrás de un recorte, capas de recortes apiladas, niebla o bokeh sintético [E] DS §10 (sombras gigantes, glassmorphism) · DS §3 e3 techo · cap.27 viñeta · [D] cap.29 «parche recortado» · B-05 · E-15 · H01 H02 T03 T04 M02 A01-A08 Conteo de planos; a 200 % el borde del sujeto sin halo claro/oscuro de 1-3 px; el desenfoque es mayor lejos que cerca del sujeto (uniforme = recorte pegado) PASS ≤2 planos, borde natural · WARNING 3 planos o desenfoque uniforme · FAIL outline/3D/halo/collage («20 % OFF» con outline 3D; ROUTERS: 3 recortes + escena)
AD-09 Fondos Usa solo el catálogo cerrado: (a) blanco 255/255/255 — packshot, A03, chips, moneda; (b) superficies del sistema (bg, bg-subtle, cyan-tint, navy) alrededor de la imagen, nunca dentro del archivo; (c) en escenas, fondo real fotografiado (muro, mesa, mostrador) con ≤2 dominantes cromáticos. Prohibido: degradado sintético (producción: 42-76 % del lienzo en la familia 180°), ciclorama de color, patrones, bokeh de luces genérico, rings de onda, PNG transparente sobre el color del slot [E] DS §7 · 25 §6/§9.2 · DS §10 · D-02 · cap.27 «hueco blanco = blanco del render» · [D] 255 en 33/34 · B-07 · D-24/D-25 · E-13 · L-28 · P01 P02 P07 T05 T08 S01 (blanco) · H01 H02 T03 T04 M02 (real) Cuentagotas en 4 esquinas + 4 centros de borde: 255 exacto (packshot) / ≥250 (A03); cuantización a 8 → dominantes fuera del bbox; test de gradiente sintético: perfil de 5 puntos en línea con variación monótona uniforme (rampa con desviación local <2 niveles sobre >30 % del ancho) = sintético PASS · WARNING blanco 242-254 (renivelar: cctv-235) · FAIL color/gradiente/textura/transparencia
AD-10 Saturación Contén la saturación fuera del producto: píxeles vivos ≤25 % del lienzo y neón ≤2 %; saturación media HSV de la escena 0.20-0.45; el producto conserva la de su packshot (ΔS ≤0.10 en su color dominante). Referencia medida: capturas del sistema 0-2 % vivos / ≤1 % neón; packshots 0-22 %; producción 8-78 % / 2-49 % [E] DS §1 pixel-budget (neutrales 70-90 %) · DS §10 · Tona cap.29 «cuida los gradientes» · [D] mediciones · B-09 · E-13 · [H] umbrales; recalibrar con las 10 primeras piezas aprobadas (T-8) · A01 A02 A04 A07 A08 A14 · P01 pantallas Script HSV (PIL, imagen a 240 px) o Photoshop → Selección → Gama de colores (saturación alta) → % de píxeles; cuentagotas en el color dominante del producto vs packshot PASS ≤25 % / ≤2 % / S 0.20-0.45 · WARNING 25-40 % / 2-5 % / S 0.45-0.55 (un muro real de color con el producto separado ≥3:1) · FAIL >40 % / >5 % / S >0.55 (producción: 7/13 FAIL por vivos, 11/13 por neón)
AD-11 Contraste Conserva el rango tonal sin clipping en el sujeto (p2 ≥8, p98 ≤250) y separa sujeto/fondo ≥3:1 en luminancia relativa (gris medio del producto vs fondo detrás de él); producto blanco en escena → fondo con luminancia ≤70 % (en packshot el blanco sobre blanco es norma de catálogo: se separa por su silueta ≤240, E-07); texto del sistema sobre foto solo con el velo y ≥4.5:1 medido sobre el píxel (el velo 92-96 % da ≥10:1) [E] DS §1 · cap.27 (velo ≥10:1) · extracción §3.25 «medir sobre el píxel» · [D] D-05 · B-10 · E-07 · D-08 · [H] 3:1 · todos; H01 T03 T04 (velo) Histograma; cuentagotas + calculadora WCAG sobre la captura a 1440 y 390 PASS · WARNING separación 2.5-3:1 · FAIL clipping, sujeto que se funde con el fondo (ROUTERS móvil: 20 % del lienzo ≤15), texto sobre foto desnuda
AD-12 Tratamiento de color Reproduce el color del producto fiel a su packshot: neutros R≈G≈B ±6 (catálogo: desviación mediana 0), color propio ±12 por canal en el mismo punto físico (±10° de tono / ±15 pts de S tras balancear la escena); corrección solo global; sin LUT ni «look» (un producto negro con p2 >30 está lavado: catálogo p2 6-18); negro aplastado (luminancia ≤8) ≤3 % del lienzo. La paleta de campaña es libre dentro del slot con las reglas de §4 (AD-26, AD-27) [E] DS §7 · 25 §7.2 · DS §1 («nunca #000 puro») · DS §9.5 · cap.28 · [D] mediciones · B-11 · E-14 · A01 A02 A04 A07 A08 A14 · P01 P02 B02 Cuentagotas 5×5 en 3 puntos idénticos packshot vs pieza (Info en RGB/HSV); conteo de píxeles con luminancia ≤8 PASS · WARNING neutros ±7-12, color ±13-24, negro aplastado 3-5 % · FAIL neutros >12, LUT, negro aplastado >5 % (ROUTERS: 7-14 %)

Integración

Criterio Regla reproducible (con números) Marca + fuente · aplica a Cómo se verifica (herramienta / umbral) PASS / WARNING / FAIL
AD-13 Integración texto/imagen Entrega el arte mudo: 0 caracteres, 0 logotipos (ni el de Steren: lo pone el chrome; única excepción declarada E-4: el SVG oficial en la OG A14, ≤8 % del alto, abajo a la derecha, porque la pieza vive fuera del sitio — L-15), 0 cifras, 0 legales, 0 CTA, 0 marca de agua, 0 formas-botón. Deja limpia la zona muda: hero a 1440 → x 4.5-32.4 % · y 39-95 % (unión de estados ≥768: x 2.5-58 % · y 12-96 %), franja de dots x 1300-1580 · y 630-720 y esquina de vigencia x ≥2620 · y ≥660 del lienzo 2880×720; tiles con cintillo → franja inferior 104/72 px, producto ≥8 px por encima; escena → 104 px. Bajo el panel: fondo calmado (σ de luminancia ≤25) y medio tono L* 40-60. La foto continúa detrás del velo; overlap panel/producto = 0 %; el texto y sus colores son tokens on-navy, nunca «a juego» con la foto [E] DS §7 · C6 · 11 §1.1 · ES-11 · cap.27-28 · [D] D-04/D-05, geometría medida (panel 398×202 a 64/18 px) · B-12 · D-10/D-11/D-12 · E-16/E-19 · C-04/C-11 · L-01 · todos los assets; H01 H02 T01-T05 B02 OCR (tesseract o lectura a 200 %) = 0; overlay del panel a 1440 y 1920 sobre el arte; σ de luminancia y L* medio bajo el panel (5 puntos); overlap con el bbox del producto PASS 0 texto, 0 overlap, zona muda lisa, σ ≤25 · WARNING textura/borde que ensucia el velo; σ 25-40 · FAIL cualquier texto/logo/cifra raster; overlap >0; σ >40 (producción 13/13; home-top.jpeg: título HTML sobre «$995» raster = doble texto)
AD-14 Gráficos Deja los gráficos al sistema (HTML/SVG): glifos del sprite (24-grid, trazo 1.75, currentColor), ilustración monolínea solo en 404/503, tarjeta SterenCard dibujada. En el raster: 0 gráficos — sin iconos de redes, logos de bancos, flechas, pictogramas, lupas ni pantallas de app compuestas encima. Excepción: la pantalla real del producto con su propia UI fotografiada. Ilustración figurativa como hero: nunca (X-9) [E] DS §6 · ES-4 · cap.15/31.4 («sin una sola letra») · X-9 · cap.22 (14 PNG → texto + glifos) · B-23 · D-37 · A01-A14 · D04 D05 OCR = 0; si el arte llega en capas (PSD/TIFF), 0 capas vectoriales; conteo de pictogramas PASS 0 · WARNING pictograma horneado en la única landing_image real (SMART_HOME.jpg: ondas Wi-Fi + app compuesta → «provisional» hasta la sesión, E-34) · FAIL iconos/logos/flechas (CCTV: TikTok/IG/FB/Shorts)
AD-15 Elementos decorativos Deja la onda al sistema (5 usos, §6, siempre SVG) y nunca dentro del raster. En el arte: 0 ornamentos — sin olas bajo el producto, rings, confeti, partículas, rayos, lluvia, marcos, cintas ni sellos («Lo + viral» es, si acaso, un badge de texto del sistema). Papel picado, tricolor y fuegos solo en D03 (tema de temporada, capa apagable) y solo en el chrome: ningún asset A01-A14 los hereda [E] DS §6 · ES-1 («firma, no wallpaper») · E5 · cap.31 · D-11/X-7 · DS §10 · B-22 · excepción E-6 · todos los assets; D01 D03 Conteo de elementos no fotográficos en el arte = 0; buscar curvas azules/rings a 50 % de zoom PASS 0 · FAIL ≥1, sin WARNING (un ornamento es un ornamento: CCTV rings; LLUVIAS marca de agua; ROUTERS ola)
AD-16 Texturas No añadas texturas de fondo: grano, papel, ruido, halftone, mallas, «tech grids», circuitos, hexágonos, patrones repetidos. La única textura permitida es la del material real fotografiado (rejilla del bafle, tela, madera, block). La viñeta en tinte y el velo no son texturas; las superficies de UI son planas (tokens) [E] DS §6 («texturas repetidas de fondo») · DS §10 · cap.27-28 · B-24 · todos los assets; D02 Zoom 200 % sobre fondo liso: sin patrón; desviación estándar de un parche liso de 100×100 px ≤3 niveles PASS · WARNING grano de cámara visible (ISO alto) · FAIL textura añadida o patrón

Fotografía

Criterio Regla reproducible (con números) Marca + fuente · aplica a Cómo se verifica (herramienta / umbral) PASS / WARNING / FAIL
AD-17 Fotografía Fotografía con cámara real, foco en el producto (único plano nítido), sin grano añadido ni ruido visible en sombras, sin HDR/«clarity», filtro ni LUT; sRGB IEC61966-2.1, sin marca de agua; sin viñeta, halo de enfoque ni fringe propios (transición del borde ≤2 px en silueteados); blancos del producto neutros ±6 aun con escena cálida [E] ES-11 · ES-6 · 11 §1.2-1.4 · 25 §6 · [D] neutros mediana 0 · B-02 · E-08/E-09 · A01-A11 A14 Zoom 100 % sobre el producto: bordes sin halo >2 px; histograma del recorte: p2 ≥8 y p98 ≤250 (salvo blancos/negros por naturaleza: cctv-241 p2=7 aceptado); esquinas vs centro del fondo; cuentagotas en un blanco/gris del producto PASS · WARNING halo 2-4 px, ruido leve en sombras, blanco 250-254, esquinas 250-254 · FAIL filtro/LUT, HDR, clipping >0.5 % del producto, grano añadido, viñeta propia, render que pretende ser foto
AD-18 Producto aislado Aísla P01/A03 sobre 255 exacto en todo el perímetro, sin sombra en el archivo (fila bajo el bbox = 255; banda del 8 % ≥246), producto entero, centrado 0.50 ±0.02, 90 % del eje mayor, frente o 3/4 alto (cámara 10-25°, verticales ±1°) con el logo Steren visible; kits en escala real con el principal ≥2× el área del accesorio; pantallas con UI propia o imagen neutra; JPG sRGB 1200×1200 (800×800 A03); nunca PNG transparente. Set canónico _x2.._x5: detalle funcional · escala (en mano real ≤40 % del cuadro, o cotas solo en _x3 con fila en specs: excepción E-3) · contenido del paquete (separación ≥4 %) · en uso sobre blanco; variantes de color con bbox ±1 %; terceros re-lienzados a la convención sin generar píxeles [E] DS §7 · 25 §6 · D-06 · H-04 · manual §5 · [D] 34 packshots medidos · B-20 · E-01…E-10 · E-31…E-35 · L-09, L-12 · P01 P02 P03 P04 P06 P07 T05 T08 S01 S02 Script: 8 puntos = 255, bbox 0.86-0.92, centro ±0.02, fila bajo el bbox = 255; logo legible a 233 px; superposición de bbox entre variantes; A03: reducir a 122 y 30 px con 3 revisores PASS · WARNING blanco 242-254, bbox 80-86 / 92-95 %, sombra 235-246, accesorio >50 % del principal, pantalla viva >20 % (mnt-027), composición como A03 (SMART_HOME.jpg) · FAIL fondo no blanco, sombra <235, cortado, transparente, texto, persona ajena en pantalla, cotas fuera de _x3, 400×400
AD-19 Lifestyle Muestra uso, no aspiración: producto funcionando (encendido, conectado, en la mano) en la casa, negocio o taller donde se usa, con las cosas reales alrededor (cables, herramientas, mostrador). Seis «no»: modelo, familia-en-sofá, exterior genérico (playa, estadio, calle europea, bosque), marca ajena legible, mascota, rostro de cliente. Los reels del vivo son el registro correcto (fig. 3); su texto quemado y el degradado bajo el nombre, no [E] ES-11 · 11 §1.2 · E5 · [D] cap29/t3-VIVO-reels.png (GOOD) vs t1-VIVO-tarjetas-con-foto.png (BAD) · B-19 · E-11 · H01 H02 T03 T04 A13 P02 «en mano» Lista de 6 «no»; prueba «¿podría ser un catálogo de IKEA/Amazon?» → sí = FAIL PASS 0 «no» · WARNING 1 (marca ajena desenfocada) · FAIL ≥2 o modelo (vivo: surfista con cámara deportiva, pareja en sofá)
AD-20 Escenarios Sitúa la escena en uno de 4 escenarios: (a) interior de casa mexicana · (b) mesa de taller · (c) changarro/negocio · (d) mostrador Steren (solo con personal). Cada uno = 1 muro + 1 superficie + producto, con ≥2 anclas de lugar y 0 marcadores nórdicos (listas en §5), ≤2 dominantes, ninguna palabra legible ajena [E] ES-11 · E5 · 11 §1.2 · D-12 · B-21 · E-11 · [H] listas · H01 H02 T03 T04 M02 A13 Inventario de props contra la lista negra = 0; conteo de anclas; prueba de reconocimiento: 3 personas dicen «casa / taller / tienda… de aquí» sin ningún símbolo folclórico PASS ≥2 anclas, 0 lista negra · WARNING 1 ancla o un prop ambiguo (cortina estampada protagonista) · FAIL 0 anclas, prop de lista negra o señal extranjera (LLUVIAS: casa de vidrio; ROUTERS: café con bokeh)
AD-21 Uso de personas Fotografía solo personal real de Steren con gafete/uniforme visible y nombre real en HTML, en mostrador/taller real, cámara a la altura de los ojos (±10 cm), haciendo algo (manos en el producto; solo A09/A10 miran a cámara). Cupo: 3 en el funnel (H02/A08, M02/A07, M03/A09) + 1 retrato por página de servicio (M04/A10, X-8). Encuadre: mostrador → plano medio, ojos en 35-45 % del alto, rostro ≥44 % del alto en A07 (≥48 px a 768) y gafete ≥16 px de render; retrato 4:5 → coronilla 4-10 %, ojos 22-30 %, manos dentro del 67 % superior, 20 % inferior libre (velo + nombre). Fondo del retrato igualado al navy (≤25 RGB de #002F57) o gris neutro de recorte (lum 100-160), a ≥60 RGB del uniforme. Prohibido: modelos, stock, IA, pose de banco (frontal, brazos cruzados, sonrisa a cámara fuera de A10), clientes con rostro [E] ES-6 · 11 §1.3 · D-12 · X-8 · X-10 · 26 §2 · [D] tecnico.webp (fondo #1157E6, 72 % vivos, 55 % neón) · B-18 · E-20…E-25 · C-22 · L-14 · H02 M02 M03 M04 M05 · A07-A10 Checklist gafete/nombre/lugar/EXIF de la sesión propia; prueba «¿podemos poner su nombre y tienda debajo?»; conteo de fotos humanas ≤3; overlay de ojos/rostro; cuentagotas en fondo y uniforme PASS · WARNING retrato con fondo no-token (tecnico.webp: WARNING aceptado hasta la re-sesión, L-14), rostro/ojos fuera de rango, gafete parcial · FAIL modelo/stock/IA, sin gafete, 4.ª foto en el funnel, pose de banco, cliente identificable, picado >10° (MP: joven con audífonos)
AD-22 Storytelling Cuenta una situación de uso real, en presente, reconocible en ≤5 s con una frase con verbo («alguien conecta el repetidor en el pasillo»); la historia la completa el copy V2 (beneficio con dato), no el arte. Sin metáfora de campaña (tormenta, estadio, «sé parte del juego»), sin efectos atmosféricos (lluvia, rayos, humo, chispas), sin personajes-modelo ni poses [E] ES-11 · V2 · E5 · 25 §7.2 (Mundial = BAD) · B-15 · H01 H02 T03 T04 A13 Prueba de la frase: si necesita la campaña para entenderse («porque llueve») = FAIL PASS frase con verbo y producto · WARNING la frase nombra el lugar pero no la acción · FAIL metáfora/efecto/sin producto (LLUVIAS)

Percepción

Criterio Regla reproducible (con números) Marca + fuente · aplica a Cómo se verifica (herramienta / umbral) PASS / WARNING / FAIL
AD-23 Percepción premium Puntúa «premium» con 8 propiedades medibles y 7 destructores (§3); no es un adjetivo. Una pieza pasa con ≥7/8 y ningún destructor [E] caps 27-29 · DS §10 · DS §1 · [D] mediciones · B-16 · [H] la tabla · todas las piezas Tabla 8/8 con la medición de cada línea; lista de destructores PASS ≥7/8, 0 destructores · WARNING 6/8 sin destructor · FAIL ≤5/8 o ≥1 destructor (producción: 13/13 con ≥2)
AD-24 Consistencia Mantén la campaña o familia en una sola gramática: dirección de luz (±15°), temperatura (blancos ±6), fondo/superficie, escala relativa del producto (±10 % del alto), altura de cámara (frontal o 3/4 elevada 10-20°) y tratamiento de color. A01 y A02 son la misma sesión (cambia solo el encuadre: A02 sujeto centrado 0.50 ±0.06 al 55-80 % del ancho, nunca el 4:1 recortado). Variantes de color: encuadre idéntico (bbox ±1-3 %). Entre campañas cambia la paleta, nunca la gramática [E] 11 A2 «mismo concepto re-encuadrado» · 25 §6 «alta y consistente» · DS §1 · [D] aud-7840 az/bl/ne/ve: bbox 0.90×0.76, centro 0.50/0.50 las cuatro · B-17 · E-17 · E-31 · A01+A02 A03 (los 5 tiles) P06 T01-T05 Tira de contacto de la campaña a la misma escala; media de luminancia ±10 % entre piezas; superposición de bbox en variantes PASS · WARNING una tolerancia excedida · FAIL A02 de otra sesión o desktop recortado; variantes con bbox distinto; luz opuesta entre tiles vecinos

IA generativa

Criterio Regla reproducible (con números) Marca + fuente · aplica a Cómo se verifica (herramienta / umbral) PASS / WARNING / FAIL
AD-25 IA generativa Aplica la política en tres niveles (§7): prohibido · permitido con condiciones y declaración · obligatorio declarar. Toda escena o persona llega con origen de cámara verificable (RAW o JPEG con EXIF Make/Model/DateTimeOriginal), _retoque.csv y máscara por operación. QA aplica los 10 indicios de E-39 [E] ES-11 · 11 §1.2 · DS §10 (prohibición sin matiz) · [H] B-25 · E-36…E-39 · L-16 → ENM-05 · todos los assets fotográficos exiftool / PIL.getexif(); existencia del CSV y las máscaras; checklist de 10 indicios con recorte al 200 %; comparación original/editado PASS origen de cámara + declaración (vacía o nivel 2 verificada) · WARNING nivel 2/3 sin declarar, sin EXIF (pedir original), 1 indicio de (2)-(10) · FAIL nivel 1, sin original, indicio (1) positivo o ≥2 indicios (LLUVIAS, ROUTERS, MP: ≥3 cada una)

Percepción premium: qué la produce y qué la destruye

Detalle de AD-23. «Premium» es lo que producen el packshot medido y el sistema construido (caps 27-29: hueco blanco, viñeta, «la caja la define la sombra», «un degradado necesita superficie y hace trabajo», moneda blanca). Se puntúa línea por línea; ningún adjetivo entra en la tabla.

# Propiedad Umbral medible Herramienta Fuente
1 Aire ≥25 % del lienzo sin detalle (packshot: 5 % de aire propio; el resto lo pone contain) mapa de bordes B-08 · AD-04
2 Un solo sujeto 1 sujeto, ≤3 elementos, 0 logos ajenos plantilla sujeto/contexto/apoyo B-13 · AD-05
3 Luz uniforme sin quemados p98 del producto ≤250; especulares <1 % histograma del bbox B-06 · AD-07
4 Blanco real o superficie de token fondo 255/255/255 (8 puntos) o bg / bg-subtle / cyan-tint / navy alrededor cuentagotas B-07 · AD-09
5 Sombra: ninguna en el archivo fila bajo el bbox = 255 (medido 6/6; banda del 8 % ≥246 en 31/34) — la sombra es del sistema: e1 → e2 y viñeta navy 5 % cuentagotas B-16 · E-06 · X-3 / excepción E-1
6 Cero efectos 0 outlines, 0 glow, 0 3D, 0 bisel, 0 gradiente sintético, 0 rings zoom 200 % + perfil de 5 puntos B-05 · B-22 · AD-08 / AD-15
7 Tipografía solo del sistema 0 caracteres raster (OCR = 0); el texto vive en tokens on-navy o n900 sobre velo OCR B-12 · AD-13
8 Color fiel y contenido neutros ±6, color ±12; vivos ≤25 %, neón ≤2 % cuentagotas + HSV B-11 · B-09 · AD-10 / AD-12
# Destructor (cualquiera = FAIL) Umbral Cómo se detecta Ejemplo de producción
1 Neón >2 % de píxeles con S>0.8 ∧ V>0.85 HSV a 240 px 04_CintilloWeb: 49 %
2 Outline / 3D / glow ≥1 zoom 200 % «20 % OFF» de LLUVIAS y «Ambientes saludables»
3 Cifra rasterizada >20 % del alto del lienzo OCR + bbox de la cifra «15 % OFF» y «MSI» de MP
4 Gradiente de moda mesh, aurora, radial cian: rampa lisa >30 % del ancho (D-25) perfil de 5 puntos MP: 48 % del lienzo en 180°
5 Collage ≥2 recortes sobre fondo, o desenfoque uniforme tras un recorte conteo de planos + halo ROUTERS: 3 recortes + escena
6 Stock encubierto modelo, stock o IA; bokeh genérico (0 anclas de AD-29) checklist B-18 + E-11 MP: joven con audífonos; ROUTERS: café
7 Negro aplastado luminancia ≤8 en >5 % del lienzo histograma ROUTERS móvil: 14 %

B-16 enumera ocho señales; «modelo/stock» y «bokeh genérico» se agrupan aquí como un solo destructor (stock encubierto: las dos son ausencia de lugar y de persona reales), y el gate queda en 8 + 7 como lo resume B §0. Veredicto: PASS ≥7/8 y 0 destructores · WARNING 6/8 · FAIL ≤5/8 o ≥1 destructor. Referencia GOOD del sistema: la banda comercial cap29/t2 (moneda, navy plano, packshot fiel) = 8/8; el slider MP de producción = 0/8 con 6 destructores.

Color de campaña: libre dentro del slot, con reglas

AD-26 Paleta de campaña. [E] DS §7 · 25 §7.2 «campaña con paleta libre / chrome sobrio» · DS §1 (semánticos = significado, nunca decorativos) · [D] B-11 · E-12/E-13 · D-36 · [H] tolerancias y tonos. La paleta es libre solo dentro del raster: el panel, la vigencia, los dots, las flechas y el chrome nunca se tintan y los semánticos no cambian. Aplica a A01 A02 A04 A07 A08 A14 · H01 T03 T04 S01.

Regla Umbral Verificación PASS / WARNING / FAIL
Fidelidad del producto al packshot neutros R≈G≈B ±6 · color propio ±12 por canal (±10° de tono / ±15 pts de S) en el mismo punto físico de la _x1 cuentagotas 5×5 en 3 puntos PASS · WARNING ±7-12 / ±13-24 · FAIL >12 / >24 («el foco se ve amarillo»)
Dominantes cromáticos fuera del producto ≤2 con quantize(8) y cobertura ≥5 % (equivale a ≤3 con quantize(16) y ≥8 %, E-12); de ellos ≤1 «vivo» cuantización sobre la escena sin el bbox PASS ≤2 · WARNING 3 · FAIL ≥4 (MP: 5; LLUVIAS: rojo + azul + amarillo)
Naranja 15-45° y rojo 345-15° nunca dominantes: compiten con buy #C74B00 / accent-promo #FF6A00 y con sale #E01218 (badge OFERTA); solo acento ≤5 % del área y nunca junto al CTA tabla de dominantes con H/S/V; distancia al CTA PASS ≤5 % y lejos del CTA · WARNING 5-10 % · FAIL dominante (LLUVIAS: rojo 11-17 %)
Amarillo neón 50-65° (S>0.8 · V>0.9) prohibido en cualquier proporción (firma de producción: «15 % OFF», «VER MÁS») HSV PASS 0 · FAIL >0
Cian/azul 190-215° saturado fuera del producto choca con el panel navy y el chrome azul HSV, % del lienzo PASS ≤15 % · WARNING >15 % (producción: 42-74 % en 9/13)
Formas que compiten con los semánticos ninguna forma-botón (pill o rectángulo de alto contraste ≥44 px) ni buy como forma dentro del arte inspección PASS 0 · FAIL ≥1 (D-36)
Fondo de escena sin degradado liso de dos colores; lum <5 ≤2 % y >250 ≤2 % fuera de especulares muestreo de 5 puntos + histograma PASS · WARNING 2-4 % · FAIL degradado «de moda» o >4 %

AD-27 Franja del panel y de los controles. [H] B-11 (luminancia ≥40 %) + D-14 (L* ≤60) → L-01: alrededor del panel navy del hero, en una franja de 120 px, el arte es medio tono L* 40-60 —ni blanco (el kicker cian cae a 4.35:1) ni navy (el panel desaparece)— y el velo sube al 96 % (DEV-01, 4.93:1 con arte blanco). Franja de dots (x 1300-1580 · y 630-720 del A01): L* ≤60 y scrim del chip al 60 % (L-02, DEV-02). Si la campaña es «noche», la parte oscura va a la derecha y el panel se apoya sobre la zona clara; una escena nocturna entera no va al hero, va a T03/T04, sin panel lateral (B T-11). Verificación: cuentagotas en 5 puntos de la franja sobre el arte ×1, promedio de L*. PASS 40-60 · WARNING 30-40 o 60-75 · FAIL <30 o >75. Aplica a A01 A08 · H01 H02.

Personas, lifestyle y escenarios

AD-28 Dos registros de foto humana, un cupo. [E] ES-6 · X-8 · X-10 · D-12 · [D] B-18 · E-20…E-25 · L-14.

Registro Dónde Encuadre Luz Fondo Cupo
Mostrador / taller (documental) A07 (M02 «Aprende»), A08 (H02 «600+ tiendas»), A09 (M03 avatar) plano medio, ojos en 35-45 % del alto (A07/A08), rostro ≥44 % del alto en A07; manos en el producto; no mira a cámara (salvo A09) natural cálida: ventana o luz de la tienda, clave:relleno ≤3:1, gafete R−B +5..+20, nunca G>R ni flash frontal mostrador/taller real, producto de tienda desenfocado al fondo 3 en el funnel (home → PDP); los reels de Terrific no cuentan (video)
Retrato de servicio (estudio) A10 (M04/H04 Tech Services) 4:5 medio cuerpo, mirada a cámara permitida, coronilla 4-10 %, ojos 22-30 %, corte a la cintura, a sangre por abajo; 20 % inferior libre estudio neutro 2-3 luces, 2:1-3:1, catchlights, gafete R≈G≈B ±6 liso igualado al navy (≤25 RGB) o gris neutro de recorte (lum 100-160), a ≥60 del uniforme; tecnico.webp (degradado #1157E6, 55 % neón) = WARNING aceptado hasta la re-sesión (CONT-01) 1 por página de servicio, registro aparte del funnel

Verificación: checklist gafete + nombre HTML + lugar + EXIF; conteo ≤3 en el funnel; overlay de ojos. PASS 4/4 · WARNING fondo no-token o rostro fuera de rango · FAIL modelo/stock/IA, sin gafete, 4.ª foto, pose de banco.

AD-29 Anclas mexicanas y lista negra. [E] ES-11 · E5 · [H] E-11 · B-21. Una escena PASS trae ≥2 anclas, 0 marcadores nórdicos y 0 símbolos folclóricos:

  • Anclas (lista blanca): muro pintado de un solo color mate (el color real del lugar, incluido rosa, azul o amarillo) · piso de loseta o mosaico de pasta · azotea con tinaco o tanque estacionario · ventana o cortina de herrería · mesa de taller con herramienta usada (cautín, pinzas, multímetro, lámpara de trabajo, tornillos en frasco) · mostrador, vitrina o caja de changarro · contacto/apagador mexicano, multicontacto y cables visibles · cocina o mesa de madera real · manos operando el producto.
  • Marcadores nórdicos (lista negra): parquet claro + monstera + muro blanco · casa de vidrio, piedra o madera con ventanal (LLUVIAS) · loft con sofá blanco o sofá de catálogo · bosque, nieve, playa · estadio · calle o café con bokeh genérico (ROUTERS) · letreros con tipografía pseudo-latina.
  • Folclor prohibido (E5 ampliada): papel picado · sarape · sombrero · alebrije · talavera como prop · calaveras · banderas o tricolor · cactus decorativo · «¡órale!» · Frida · mariachi. Viven solo en D03 (tema de temporada), nunca en un asset.

Verificación: inventario de props; 3 personas dicen «de aquí» sin símbolo. PASS ≥2 / 0 / 0 · WARNING 1 ancla o 1 prop ambiguo · FAIL 0 anclas, ≥1 nórdico o ≥1 folclórico.

AD-30 Manos sí, rostros de cliente no. [E] ES-11 «manos operando» · ES-6 · [H] E-21 · E-32 · B-18. Manos reales adultas, sin joyería ni esmalte, operando el producto; en tomas sobre blanco (_x3 en mano, _x5 en uso) la mano ocupa ≤40 % del cuadro, piel en neutros ±6 y el producto sigue al 60-90 %. Clientes solo de espaldas o fuera de foco: un rostro identificable sin consentimiento es stock encubierto. Verificación: bbox de la mano; inspección de rostros. PASS · WARNING mano 40-50 % · FAIL escena en vez de blanco, mano generada, cliente identificable.

AD-31 Mexicanidad operativa, no folclor. [E] E5 · ES-11 · [D] B-21 (T-3) · B-09 · L-11. El color del lugar pasa; el color añadido no. Un muro real pintado de rosa, azul o amarillo es un ancla (AD-29) aunque lleve el lienzo a 25-40 % de vivos: queda en WARNING de AD-10 si el producto se separa ≥3:1. El mismo color puesto en post (tinte, gradiente, forma «mexican pink» decorativa) es FAIL de AD-09 y AD-15. Verificación: test de gradiente sintético de AD-09 (un muro real no es una rampa monótona perfecta) y original de cámara de AD-25 (el muro aparece con su color en el RAW). Hasta DEV-08 (clase --escena + cover), una escena real en T03/T04 se pinta contain con bandas blancas → FAIL C-21: no se publica y el tile usa el packshot render (L-11).

Elementos decorativos, gráficos y texturas

AD-32 La onda es firma, no wallpaper. [E] DS §6 · ES-1 · E-10 · [D] B-22. Cinco usos cerrados, siempre SVG del sistema (A15): 1 subrayado de sección · 2 check de «agregado al carrito» · 3 loader · 4 arte de la tarjeta SterenCard (H03) · 5 badge de fabricante. Nunca textura, viñeta, rings de fondo ni marca de agua; nunca dentro de un raster. Verificación: conteo en el arte = 0; el SVG de la onda fuera de los 5 usos = 0. PASS 0 · FAIL ≥1 (CCTV: rings; LLUVIAS: marca de agua sobre la casa).

AD-33 El tema de temporada es la única capa folclórica. [E] cap.31 (Tona) · D-11 · X-7 · excepción E-6. Papel picado, fuegos y onda tricolor viven solo en D03, capa encendida por admin y apagable, sobre el chrome; ningún asset A01-A14 los hereda ni los anticipa. Verificación: con el tema apagado, cero ornamento en la página; con el tema encendido, cero ornamento dentro de las imágenes. PASS · FAIL ornamento en un asset o en el chrome base.

AD-34 Registro cerrado de overlays y degradados. [E] cap.29 (Tona: «un degradado necesita superficie y tiene que hacer trabajo; son muy típicos de IA») · D §2e · D-14 · L-28 · L-26. Operacionalizado: función ∈ {legibilidad, luz, profundidad, progreso, control}; un radial de luz exige lado mayor ≥600 px y ΔL* entre extremos ≤12; un velo exige texto encima; fuera de la tabla = FAIL; en el ARTE, ningún degradado liso como fondo (E-13; rampa monótona con desviación local <2 niveles sobre >30 % del ancho, D-25).

# Overlay / degradado Receta Función Superficie Estado
1 Velo navy del hero navy 92 % + blur 10 + e2 → 96 % por L-01 legibilidad panel ≤400 px (H01, H02) [E] registrado · DEV-01
2 Velo blanco del cintillo + máscara bg 96→92→0 + blur 10 + máscara 46 % legibilidad 72-104 px de alto (T01-T05) [E] registrado
3 Viñeta de tile radial navy 5 % (118 % 88 % at 50 % 32 %) profundidad media del tile; nunca hero, galería ni tarjetas (D-27) [E] home.css:192-194
4 Radial .sc-module luz a 88 % 0 % sobre navy luz 1380×250 (5.49:1 conservado bajo el kicker) [E] cap.28
5 Luz de progreso 3 px primary→cyan, scroll() progreso ancho de página [E] cap.19
6 Chip de flechas bg 92 % + n300 control 44 px [E]
7 Chip de dots n900 30 % → 60 % por L-02 control ~132×44 [E] · DEV-02
8 Velo «+N» / contador P04 navy 70 % / 82 % control · legibilidad tile / pastilla [E]
9 Friso del retrato H04 navy 92→0, sin blur ni máscara legibilidad 420×~120, solo retrato de estudio [E] en código → excepción E-8 (L-26)
10 Tinte del tile tipo T06 linear-gradient(158deg, cyan-tint, bg-subtle 72%) ninguna registrada 232×208 [E] en código → aplanar a bg-subtle (DEV-16)

Verificación: buscar gradient, backdrop-filter y rgba( por componente y cotejar contra la tabla; en el arte, perfil de luminancia de 5 puntos. PASS receta exacta y en su superficie · WARNING receta desviada · FAIL overlay nuevo, velo sin texto, blur sobre superficie plana, degradado como fondo del arte (ROUTERS: onda azul→oscuro; .mtile--banner con radial «se lee como mancha», cap.29.0). Gráficos y texturas: AD-14 y AD-16. La ilustración existe en un solo registro —monolínea del sistema en 404/503 (D05), sin letras, sobre tokens (X-9)—, el sprite de glifos (D04) es la única iconografía, ningún raster lleva pictogramas y la única textura es la del material fotografiado.

IA generativa: política en tres niveles

[H] Enmienda ENM-05 (L-16): la prohibición literal de ES-11 / 11 §1.2 hoy se viola en silencio (retoque, extensión, upscale) y no se puede auditar; esta política no relaja la prohibición de fotografía generada: la hace verificable. Sin la enmienda rige la prohibición plana (el nivel 2 pasa a FAIL); la declaración y el original son obligatorios en cualquiera de los dos mundos (B T-10).

Nivel Regla Qué incluye Condiciones Verificación Veredicto
1 · Prohibido AD-35 generar la fotografía (producto, escena, persona) total o parcialmente; renders 3D que pretendan ser foto; inpainting que añada objetos, manos, personas o productos; generar fondos o escenarios; alterar color, forma, logo, puertos o antenas del producto; relighting, cambio de cielo, transferencia de estilo; «mejorar» rostros; upscaling generativo que inventa textura; cualquier pieza sin origen de cámara verificable ninguna AD-38 + declaración FAIL en cualquier caso; la tanda se regresa
2 · Permitido con condiciones y declaración AD-36 (a) limpieza de fondo fuera del producto (polvo, arrugas del ciclorama, cables del set, objeto ajeno) ≤5 % del área, solo sobre píxeles de fondo, sin tocar la silueta · (b) extensión de fondo liso y neutro (blanco, ciclorama, muro de un color) para completar el ratio, ≤15 % del ancho, zona extendida uniforme (σ de luminancia ≤6), sin objetos ni continuación de textura, nunca sobre el producto · (c) upscale legacy 750→1200 no generativo (Lanczos/bicúbico ≤1.6×, SSIM ≥0.95 contra el bicúbico en un recorte 200×200 del producto) · (d) reducción de ruido leve en fondo · (e) previs/moodboard para el brief de sesión, nunca publicados se conserva el original de cámara y se entrega junto al editado con el campo retoque_ia = ninguno / limpieza / extension y una máscara PNG de 1 bit por operación máscara + σ de la zona extendida + SSIM; el revisor compara original/editado PASS con declaración · WARNING σ 6-10, SSIM 0.90-0.95, o sin declarar (se regresa a declarar) · FAIL objeto inventado, silueta tocada, sin máscara
3 · Obligatorio declarar (también sin IA) AD-37 retoque de piel en fotos humanas (solo luz/color global, sin suavizado); upscaling clásico >1.5× para llegar al 2×; composición de dos tomas de la misma sesión (producto encendido + escena) _retoque.csv por carpeta (archivo · operación · herramienta · máscara · original) + original de cámara con EXIF Make/Model/DateTimeOriginal; archivo sin declaración = «sin retoque» exiftool / PIL.getexif(); existencia del CSV PASS · WARNING sin EXIF (pedir original) · FAIL retoque no declarado detectado → FAIL de la tanda completa

AD-38 Detección en QA — 10 indicios [H] E-39 (absorbe los 8 artefactos de B-25): (1) metadatos: manifiesto C2PA, XMP DigitalSourceType=trainedAlgorithmicMedia, Software de Midjourney/DALL·E/Firefly/SD, o ausencia total de EXIF de cámara · (2) manos: dedos, falanges, uñas · (3) letras deformes en objetos o logo Steren distinto al del packshot (comparar píxel a píxel) · (4) geometría del producto vs _x1: puertos, botones, número de antenas (ROUTERS: antenas inconsistentes) · (5) sombras en direcciones distintas, reflejos que no corresponden · (6) texturas repetidas o simétricas en el fondo · (7) ojos, dientes o aretes asimétricos; piel sin poro a 100 % en captura ≥20 Mpx · (8) halo o pelo «untado» en el borde sujeto/fondo · (9) arquitectura imposible: lámparas sin cable, vidrio sin marco, puertas sin manija (LLUVIAS: casa de vidrio con familia) · (10) lugar, hora y luz no identificables (0 anclas de AD-29). Verificación: checklist con evidencia (recorte al 200 %). PASS 0 · WARNING 1 indicio de (2)-(10) → pedir original · FAIL (1) positivo o ≥2 indicios, aunque se alegue foto.

Test de pertenencia «¿es Steren?»

AD-39 [D] B §6.1. Catorce preguntas binarias sobre cualquier pieza antes de publicarla. 14/14 pertenece · 12-13 se corrige · ≤11 no es Steren (se rehace, no se retoca).

  1. Con el logo tapado, ¿2 de 3 personas dicen «Steren» o «tienda de electrónica de aquí» en 5 s? (ES §11)
  2. ¿El sujeto es un producto real de Steren, entero, con su forma y logo reconocibles? (AD-02, AD-18)
  3. ¿Es una fotografía (no collage) con ≤3 elementos? (AD-05, AD-08)
  4. ¿Cero texto, cifras, logos, iconos y marcas de agua dentro del raster? (AD-13, AD-14, AD-15)
  5. ¿El fondo es 255 exacto o un lugar real (no gradiente, ciclorama, patrón, bokeh genérico)? (AD-09, AD-16)
  6. ¿Los neutros del producto leen R≈G≈B ±6 y su color ±12 respecto al packshot? (AD-12)
  7. ¿Vivos ≤25 % y neón ≤2 % fuera del producto? (AD-10)
  8. ¿La zona muda del sistema (58 % izquierdo / franja inferior) está limpia, en medio tono, y la foto continúa bajo el velo? (AD-13, AD-27)
  9. ¿Las personas, si las hay, son personal Steren con gafete y nombre real, dentro del cupo? (AD-21, AD-28)
  10. ¿El escenario se reconoce como casa/taller/negocio de aquí (≥2 anclas) sin un solo símbolo de la lista negra ni señal extranjera? (AD-20, AD-29)
  11. ¿Cero efectos: outline, glow, 3D, bisel, rings, lluvia, partículas, gradiente sintético? (AD-23, AD-15)
  12. ¿La foto no trae sombra ni aire «de diseño» (los pone el sistema) y el producto ocupa 86-92 % / 25-56 % / 35-60 % según formato? (AD-03, AD-18)
  13. ¿Tiene origen de cámara verificable (EXIF) y declaración de retoque? (AD-25, AD-37)
  14. Puesta junto a un packshot de catálogo y al chrome (navy/cian/blanco), ¿comparte luz, blanco, escala y fidelidad? (AD-24, AD-23)

Verificación: hoja de 14 casillas firmada por quien revisa; la pregunta 1 con 3 personas ajenas al proyecto. PASS 14/14 · WARNING 12-13 (se corrige la pieza y se repite el test) · FAIL ≤11.

Lo que NO se hace: producción como catálogo del BAD

AD-40 Producción actual no es referencia: es el negativo medido. [D] B §4.2 · E §1 · D §4. Las 13 piezas de trabajo/produccion-actual/ fallan las 8 propiedades de §3 con ≥2 destructores cada una (13/13 con texto rasterizado; vivos 8-78 %, mediana 42 %; neón 2-49 %; hasta 6 dominantes; 8-12 elementos). Se conservan solo como catálogo de lo que no se hace; ninguna se re-encuadra ni se «limpia» para el sitio nuevo.

Pieza Qué viola (medido) Reglas
01_SlideWeb_1920x500mpseptiembre.jpg degradado cian→azul (48 % del lienzo en 180°), «15 % OFF» amarillo neón con outline, «MSI» blanco gigante, cupón pill, tira de 5 logos bancarios, 3 líneas de legal, CTA amarillo, joven con audífonos (stock/IA, sin producto Steren), logo Steren fantasma duplicado; 47 % vivos / 30 % neón; 5 dominantes; 10+ elementos AD-09 AD-10 AD-26 AD-13 AD-05 AD-06 AD-23 AD-21 AD-19 AD-15 AD-25
03_SlideMobile_450X450mpsetiembre.jpg lo mismo apilado en 1200×1200; foto abajo, legal de 5 líneas; 42 % vivos / 24 % neón; 0 % de aire ídem + AD-04
04_CintilloWeb_1920x150mpseptiembre.jpg la campaña entera en 150 px: 8 elementos, foto en franja, 62 % vivos / 49 % neón (la pieza más neón), sin link ni alt AD-04 AD-10 AD-13 AD-05 · contrato B01 (cintillo = texto HTML)
05_CintilloMobile_687x150mpseptiembre.jpg ídem ídem
BOTON_Category_Banner_1000x300-2_1lluvias.jpg radial azul con rings, 3 recortes flotando sin sombra a escalas incoherentes (raqueta = lámpara), «20 % OFF» blanco con outline 3D sobre mancha roja, CTA amarillo; 4 dominantes AD-02 AD-03 AD-08 AD-09 AD-26 AD-13 AD-05 AD-23 AD-15
BOTON_Category_Banner_300x410-2_1lluvias.jpg ídem vertical ídem
CCTV-DIY_Slider-Web_1920x500px.jpg rings de onda como fondo, inset circular con lupa, producto cortado por el borde inferior, título raster, sello «Lo + viral» con TikTok/IG/FB/Shorts, «$895» neón, CTA; 35 % vivos / 18 % neón AD-01 AD-02 AD-08 AD-09 AD-10 AD-26 AD-13 AD-05 AD-15 AD-14
CCTV-DIY_Slider-Mobile_450x450px.jpg ídem ídem + AD-04
Envio_Gratis_Cintillo_1200x60px0406.jpg tira de texto raster sobre gradiente, «$499» amarillo neón con outline, legal «Excepto zonas extendidas», sin link; 78 % vivos AD-09 AD-10 AD-26 AD-13 · contrato B01 (texto + vigencia + link)
LLUVIAS-SEPT-26_SlideHome_1920x500px.jpg casa de piedra/madera con ventanal y familia en sofá (marcador nórdico; ≥3 indicios de IA: lámparas quemadas, rayo, lluvia sobre el lente, arquitectura sin lugar), ningún producto, «20 % OFF» con outline 3D sobre mancha roja (rojo 11 % del lienzo), legal de 2 líneas, CTA, onda como marca de agua sobre la casa; negro aplastado 3-4.5 % AD-07 AD-26 AD-13 AD-06 AD-22 AD-23 AD-19 AD-20 AD-15 AD-25
LLUVIAS-SEPT-26_SliderMobile_900x900px.jpg ídem con banda roja superior de 1/3 (rojo 17 %) ídem + AD-04
ROUTERS_SLIDE_Mobile2026.jpg café con bokeh genérico y router sin logo (indicios de IA), el mismo producto dos veces (en escena + recorte pegado abajo), ola azul como base, texto raster, CTA; negro aplastado 14 % (20 % del lienzo ≤15) AD-02 AD-08 AD-11 AD-12 AD-13 AD-05 AD-20 AD-15 AD-25
ROUTERS_Slider_Web_1920x500px2026.jpg 3 recortes a la izquierda sobre ola azul + escena a la derecha + texto; 4 productos a escalas mezcladas; negro aplastado 7 % ídem + AD-03

Fuera de la carpeta, dos piezas más del antecesor confirman el patrón: analisis-produccion/home-top.jpeg (hero del vivo con «$995» y «VER MÁS» raster y encima el título HTML + CTA del sistema: doble texto, AD-13) y cap29/t1-VIVO-tarjetas-con-foto.png (lifestyle de banco: modelo barbudo, surfista, pareja en sofá, texto quemado sobre degradado: AD-19, AD-21, AD-13).

Slide de producción LLUVIAS-SEPT-26, 1920×500
Fig. 1 — BAD: LLUVIAS-SEPT-26_SlideHome_1920x500px.jpg. Ningún producto (AD-06, AD-22); casa de vidrio y familia en sofá = marcador nórdico y ≥3 indicios de IA: lámparas quemadas sin cable, rayo, lluvia sobre el lente, arquitectura sin lugar (AD-20, AD-25, AD-38); tres tamaños de titular, legal de 2 líneas y «VER MÁS» amarillo neón rasterizados (AD-13, AD-26); «20 % OFF» con outline 3D sobre mancha roja, rojo dominante 11 % (AD-08, AD-26); onda como marca de agua sobre la casa (AD-15, AD-32); efectos atmosféricos y lámparas quemadas (AD-07); 8 elementos (AD-05); el texto del tercio izquierdo cae bajo el panel del sistema y el «20 % OFF» bajo la flecha derecha a 768 (AD-13). Premium: 0/8 con 5 destructores.
Cintillo de producción Mercado Pago, 1920×150
Fig. 2 — BAD: 04_CintilloWeb_1920x150mpseptiembre.jpg. La campaña entera comprimida en 150 px: logo Steren, sello Mercado Pago, titular, «15 % OFF» amarillo neón con outline, cupón, «MSI», foto de modelo y CTA = 8 elementos y 0 % de aire (AD-04, AD-05); 62 % de píxeles vivos y 49 % neón, la pieza más neón del corpus (AD-10, AD-26); degradado cian como fondo (AD-09, AD-34); modelo con audífonos sin lugar ni gafete (AD-21, AD-19); 0 enlaces y 0 alt: el cintillo del sistema (B01) es texto HTML con icono, vigencia y link.
Carril de reels del sitio vivo: gente real usando productos Steren en su casa
Fig. 3 — GOOD (referencia, no archivo): reels del sitio vivo, tema-2026/evidencias/cap29/t3-VIVO-reels.png. Gente real en su casa usando el producto: azotea con tinaco, pasillo de loseta, cortina de encaje, manos instalando un sensor, una abuela con la cámara en la mano (≥2 anclas, 0 marcadores nórdicos: AD-19, AD-20, AD-29). Es el norte visual de A04/A07/A08 y las fotos deben salir del mismo equipo (E T-11). Dos fallas que no se heredan: nombre del producto quemado sobre el video y degradado oscuro bajo el nombre (AD-13, AD-34): el título lo pone el sistema.

Boards GOOD / BAD

Tres pares dibujados con las recetas reales del tema y packshots del catálogo (assets/productos/); el BAD reproduce el hábito de producción a propósito para que el defecto se vea, no se describa.

(a) Hero de campaña: packshot compuesto sobre muro de color vs degradado con texto y sello (AD-01, AD-09, AD-13, AD-26, AD-27).

✓ Así sí — muro real + packshot + panel del sistema
Cámara Wi-Fi Steren sobre una mesa de madera, muro rosa real
Seguridad

Mira tu casa desde donde estés

$89900
Ver cámaras
Vigencia: 1–30 sep 2026
58 % izquierdo limpio · muro L* ≈ 50sujeto en x 58-84 %, apoyado, ≤2 dominantes
  • Un sujeto (packshot fiel), un contexto (muro + mesa reales), cero apoyo: 2 elementos
  • El arte llega mudo; kicker, título, precio vivo, CTA y vigencia son HTML sobre el velo navy
  • Bajo y alrededor del panel, medio tono (L* 40-60): el kicker cian conserva ≥4.5:1
  • Muro de un solo color mate = ancla mexicana; vivos ≈ 0 %, neón 0 %, 2 dominantes
✕ Así no — el patrón de producción
MES DE LA SEGURIDAD
Vigila tu casa
Cámaras Wi-Fi con hasta…
20%OFF
VER MÁS ›››
Promoción válida del 10 al 24 de septiembre de 2026 en productos seleccionados. No aplica con otras promociones. Consulta términos en steren.com.mx
texto, cifra y legales rasterizadosproducto centrado = bajo el panel
  • Degradado de moda como fondo: 0 anclas, rampa lisa = «típico de IA» (AD-09, AD-34)
  • Sello «20 % OFF» con outline y CTA amarillo neón: dos destructores (AD-23, AD-26)
  • Texto y legales en el JPG: no se traducen, no se leen, no sobreviven el recorte (AD-13)
  • Producto centrado bajo la zona del panel: overlap >0 y sin apoyo (AD-01, AD-02)

(b) Mosaico: escala coherente vs escala rota (AD-03, AD-24).

✓ Así sí — escala óptica coherente
Seguridad
Seguridad
136 productos
Cámaras Wi-FiAlarmasTimbres
Smart Home
Smart Home
168 productos
Audio
Audio
304 productos
Redes
Redes
58 productos
TV y video
TV y video
296 productos
  • Los cinco A03 al 86-92 % del lienzo: ratio bbox mayor/menor ≤1.5 (ocupación difiere ≤0.12)
  • El sistema pone el aire (contain + padding), la viñeta y la sombra e1→e2; el archivo no trae nada de eso
  • Un solo producto por tile, silueta canónica de la familia, legible a 122 px y a 30 px en el chip
  • Fondo 255 en el archivo = el mismo blanco del tile: el borde del JPG no existe
✕ Así no — escala rota
Seguridad
Seguridad
136 productos
Cámaras Wi-FiAlarmasTimbres
Smart Home
Smart Home
168 productos
Audio
Audio
304 productos
Redes
Redes
58 productos
TV y video
TV y video
296 productos
  • «Foco enorme, router diminuto»: ratio entre tiles >2 = FAIL AD-03 (la falla medida en la landing de producción, 22 §2)
  • A 0.42 el foco mide ≈36 px en el tile chico de 390: bajo el piso de 48 px (C-09)
  • El héroe a 1.65 toca los bordes y el hover ×1.09 lo corta (L-09: FAIL >92 %)
  • La escala rota se lee como cinco fotógrafos distintos: FAIL AD-24 (consistencia)

(c) Banda de categoría: producto en moneda vs packshot a sangre sobre navy (AD-02, AD-09, E-17, E-29).

✓ Así sí — moneda blanca con aro
Ofertas en

Cámaras de seguridad Wi-Fi

10 %
de descuento máximo
Ver todas →
OFERTACámara Wi-Fi cubo 2K
Cámara Wi-Fi cubo 2K
SKU: CCTV-203
$999.00$899.00
● En stock
Agregar al carrito
OFERTAVideo timbre Wi-Fi
Video timbre Wi-Fi
SKU: CCTV-0960
$1,499.00$1,299.00
● En stock
Agregar al carrito
Cámara robotizada Wi-Fi
Cámara robotizada Wi-Fi
SKU: CCTV-219
$1,199.00
● En stock
Agregar al carrito
Cámara exterior PTZ
Cámara exterior PTZ
SKU: CCTV-235
$1,599.00
● En stock
Agregar al carrito
  • Producto sobre navy siempre en moneda blanca con aro: la misma _x1, ≥12 px de blanco alrededor, sujeto en el 70 % central
  • Navy plano sin degradado; una sola cifra (88 px cian, calculada por el sistema); el packshot no se retoca
  • El carril blanco de al lado es el contraste: no se le pone fondo
  • Vivos y neón del panel: 0 % (el color vive en los productos)
✕ Así no — packshot a sangre
Ofertas en

Cámaras de seguridad Wi-Fi

10 %
de descuento máximo
Ver todas →
JPG a sangre = parche
OFERTACámara Wi-Fi cubo 2K
Cámara Wi-Fi cubo 2K
SKU: CCTV-203
$999.00$899.00
● En stock
Agregar al carrito
OFERTAVideo timbre Wi-Fi
Video timbre Wi-Fi
SKU: CCTV-0960
$1,499.00$1,299.00
● En stock
Agregar al carrito
Cámara robotizada Wi-Fi
Cámara robotizada Wi-Fi
SKU: CCTV-219
$1,199.00
● En stock
Agregar al carrito
Cámara exterior PTZ
Cámara exterior PTZ
SKU: CCTV-235
$1,599.00
● En stock
Agregar al carrito
  • El mismo packshot pegado como cuadrado blanco sobre el navy: «se lee como un parche recortado» (cap.29.3, E-17)
  • El blanco del archivo compite con el panel: FAIL AD-09 (superficie del sistema dentro del raster)
  • Sin aro ni plato, la esquina del JPG corta la composición: FAIL D-26 / E-29
  • Nada cambia en el arte para arreglarlo: es la misma _x1; cambia el contenedor (moneda)

05Blueprints por componente

Cada ficha tiene los 15 campos en el mismo orden (ver «Cómo usar esta guía»). Las fichas con Art Direction Board muestran además la pieza terminada y su par «así no». Las cifras de geometría vienen del inventario técnico del tema; las de arte, de los especialistas y de las decisiones del Lead; las que no constan dicen «medir en calidad2».

Índice de fichas

Familia Fichas Con board
H Héroes H01 hero de campaña · H02 «600+ tiendas» · H03 SterenCard · H04 cabecera de servicio · H05 landing SterenCard H01
B Bandas B01 cintillo de texto · B02 banda de categoría · B03 banner de landing · B04 countdown · B05 patrimonio · B06 Aprende B02
T Tiles T01 departamento héroe · T02 departamento chico · T03 familia héroe (escena) · T04 familia medio · T05 familia 1×1 · T06 tipo · T07 campaña 7:8 · T08 chips T01/T02 · T03-T05
P Producto P01 packshot _x1 · P02 tomas secundarias · P03 tarjeta · P04 galería + visor · P05 video · P06 variantes · P07 imagen de categoría P01 · P03
M Editorial M01 archivo 3:1 · M02 mostrador 16:9 · M03 avatar · M04 retrato de servicio · M05 Nosotros —
V Video y motion V01 Terrific · V02 reels · V03 institucional · V04 motion del sistema · V05 video hero (no autorizado) —
D Decoración D01 onda · D02 superficies · D03 temporada · D04 glifos · D05 estados —
S Derivados S01 OG · S02 feeds · S03 correos —
H01

Hero de campaña

Construido en el temaHome · láminas 1-2 (config home_hero_1/2)

La primera imagen del sitio. Arte de campaña SIN texto + panel navy del sistema (kicker · título · precio vivo · CTA · vigencia). Dos assets obligatorios: 4:1 y 4:3.

1 · Purpose — para qué existe

Abrir el home con la campaña vigente y llevar al visitante a la categoría o colección donde está lo anunciado. Es la imagen LCP del home en ≥768 y el único lugar del sitio donde el arte tiene paleta libre.

2 · Use cases — cuándo usarlo

  • Campaña con vigencia real (temporada, lanzamiento, evento comercial) y un destino claro (PLP filtrado o colección)
  • Una categoría o familia que se quiere empujar con un producto ancla (el precio sale del SKU)
  • Máximo 2 láminas de campaña (config home_hero_1/2) + las 2 láminas de sistema (H02, H03)

3 · Do not use when — cuándo no

  • Para un mensaje sin destino (aviso, legal, «próximamente»): eso no es un hero
  • Para más de un producto o dos mensajes en la misma lámina: se parte en dos láminas o va a B02
  • Como banner de terceros/bancos (MSI, PayPal): los pagos viven en la línea de precio y en checkout, no en el hero
  • Sin el asset 4:3: no se publica (E-02)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Media A01Arte 4:1 full-bleed, object-fit: cover; center, alto clamp(240px, 28vw, 360px)obligatorio · sin texto
Media A02Arte 4:3 para <768 (hoy sin campo: hueco gris)obligatorio por contrato · deuda de desarrollo
Panelhero-copy a 64 px del borde izquierdo y 16 px del inferior; máx 400 px / 72 %; navy 92 % + backdrop-filter: blur(10px) saturate(1.15); radio 12; e2sistema
Kicker12 px uppercase 600 cian (link-on-navy)≤ 24 caracteres · 1 línea
Título h2clamp(16px, 1.8vw, 22px) blanco 700≤ 2 líneas
Preciocifra-héroe 28 px w800 cian, centavos en superíndice; sale vivo del SKU (campo sku), jamás se tecleaopcional
CTAbtn-primary 44 px azul #006B9E (nunca buy); data-st="hero-cta" (+ data-campaign, DEV-14)1 por lámina · ≤ 18 caracteres · ≤ 3 palabras
Vigencia12 px sobre navy 75 %, abajo a la derecha (móvil: arriba); la lámina se retira sola al vencerobligatoria
Controlesflechas 44 px en círculo blanco 92 % a 10 px de los bordes (≥768); dots 44×44 con scrim n900 60 % (DEV-02; hoy 30 %) abajo al centro; swipesistema
alt= título de la lámina (campo titulo)obligatorio

5 · Layout blueprint — plano técnico

H01 · A01 arte de campaña desktop — lienzo de entrega 2880×720 (4:1, 2×) pinta 1440×360 se pierde a 2560 (−22 %) se pierde a 2560 (−22 %) se pierde a 1920 (−12.5 %) se pierde a 1920 (−12.5 %) −10 % a 768 −10 % a 768 PANEL a 768 (52 % del ancho) — limpio PANEL a 1440 (400×200) — limpio ZONA SEGURA 768 → 2560 SUJETO x 58-84 % flecha 768 flecha 768 dots vigencia focal 2880 px 720 px Entrega 2880×720 sRGB. El sistema lo escala a 1440×360; a 1920 recorta 12.5 % arriba y abajo; a 2560 ve el 56 % del alto. En tablet (768-1023) el alto baja a 240-287 px y el recorte es LATERAL (hasta 10 % por lado); el panel de 400 px crece hasta el 52 % del ancho. Regla: el sujeto vive en x 58-84 % · y 22-78 % (la única caja que sobrevive 768 → 2560 con el panel y la flecha derecha a 768: C-01) y el 58 % izquierdo se lee limpio (muro, mesa, aire). Zonas de control (D-10): franja de dots x 1300-1580 · y 630-720 y esquina de vigencia x ≥2620 · y ≥660 del lienzo 2880×720 también quedan limpias.
H01 · A02 arte de campaña móvil — lienzo de entrega 1440×1080 (4:3, 2×) pinta 390×293; el copy va DEBAJO en bloque navy ZONA SEGURA (6 % de aire por lado) SUJETO — re-encuadre del mismo concepto, no recorte focal 1440 px 1080 px Ningún texto del sistema se monta sobre el 4:3: el panel navy va debajo (kicker · h2 16 px · precio · CTA · dots). Hoy el campo de carga de A02 NO existe: en móvil se pinta un hueco gris 390×292 (deuda de desarrollo).

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440 (y 1920)1440×360 → 1920×3604:1 → 5.33:1A01 2880×720a 1920 se ve el 75 % del alto; a 2560 el 56 %
1024–12791024×287 → 1280×3583.57:1A01recorte lateral ≈5 %
768–1023768×240 → 1023×2863.2:1 → 3.57:1A01alto mínimo 240; recorte lateral hasta 10 % por lado; el panel ocupa el 52 % del ancho
<768 (390)390×293 imagen + bloque navy debajo4:3A02 1440×1080hoy sin campo de carga: se pinta hueco gris

7 · Safe areas — zonas seguras

Desktop/tablet (A01): zona segura = franja central del 56 % del alto (y 22 %→78 %) × 80 % del ancho (x 10 %→90 %; la «2520×405» del manual solo vale desde 834 px). Dentro de ella, el sujeto vive en x 58 %→84 % (751×405 px del lienzo): a 768 el panel llega hasta x 58 % y la flecha derecha cae en x 84-89 %. El 58 % izquierdo queda limpio: muro, mesa, aire, textura sin detalle — ahí se monta el panel en todos los anchos (28 % a 1440, 52 % a 768). Bajo y alrededor del panel (franja de 120 px) el fondo es un medio tono, L* entre 40 y 60: ni blanco (mata el kicker cian, D-14) ni navy (el panel desaparece, B-11).

Móvil (A02): todo el 4:3 es visible; aire mínimo 6 % por lado; sujeto centrado ocupando 45-60 % del alto.

Nada crítico (producto, manos, marca del producto) toca los bordes: lo que esté en el 12.5 % superior o inferior desaparece a 1920.

8 · Focal point — punto focal

El focal es el producto (o las manos que lo operan), fijado en el arte desktop en (72 %, 50 %) del lienzo — cruce del tercio derecho con la línea media. Se conserva en A02 re-encuadrando (mover cámara/recorte del máster para que el mismo producto quede en (50 %, 46 %)), nunca encogiendo el 4:1. Verificación: en las tres capturas (1440, 768, 390) el producto se ve entero y su tamaño en pantalla es ≥ 22 % del alto del hero (≥ 80 px a 1440, ≥ 53 px a 768, ≥ 110 px a 390).

9 · Crop behavior — qué pasa entre ratios

object-fit: cover; object-position: center sobre un alto fijo por clamp: el ratio de la caja va de 3.2:1 (768) a 5.33:1 (1920) y 7.1:1 (2560). Con el 4:1 nativo a 1440, hacia arriba se pierde alto (12.5 % por lado a 1920; 22 % a 2560) y hacia abajo se pierde ancho (5 % por lado a 1024, 10 % a 768). Por eso la zona segura es una cruz: centro del alto y centro-derecha del ancho.

Asset 2880×720 — lo que se ve según el ancho de pantalla (cover; anclaje por ventana) 1 1 · 1440 px (viewport 1440×360) ve 2880×720 px del asset → sin recorte 2 2 · 1920 px (viewport 1920×360) ve 2880×540 px del asset → recorte vertical 25% 3 3 · 2560 px (viewport 2560×360) ve 2880×405 px del asset → recorte vertical 44% 4 4 · 1024 px (viewport 1024×287) ve 2569×720 px del asset → recorte lateral 11% 5 5 · 768 px (viewport 768×240) ve 2304×720 px del asset → recorte lateral 20%

10 · Responsive behavior — desktop → tablet → móvil

Desktop ≥1024 (1440) panel safe 1440×360 • A01 4:1 completo • panel sobre la foto, con velo • flechas 44 px a 10 px del borde Tablet 768–1023 panel safe 768×240 • MISMO A01, alto 240 (clamp) • recorte lateral 10 % por lado • panel = 52 % del ancho Móvil <768 (390) A02 4:3 (390×293) bloque navy: copy + dots 390×443 • asset ALTERNO 4:3 • copy DEBAJO, no encima • sin flechas: dots 44 px

Móvil no es el desktop encogido. Bajo 768 el sistema oculta el <picture> y muestra el asset 4:3 (A02) con el copy debajo en bloque navy opaco (sin velo: no hay foto debajo). Sin A02 el hero móvil es un hueco.

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
ArteA01 4:1 completo (recorte vertical desde 1920)A01 4:1, alto 240-287, recorte lateral ≤10 %/ladoA02 4:3 (asset alterno)
Panel de copysobre la foto, 64/16 px, ≤400 px (28 %)sobre la foto, hasta el 52 % del anchodebajo, bloque navy opaco, h2 16 px
Precio28 px cian28 px cian28 px cian
CTA44 px, en el panel44 px44 px, en el bloque
Flechas44 px a 10 px de los bordes44 pxdesaparecen (swipe + dots)
Dotsabajo al centro, sobre scrimigualdentro del bloque navy
Vigenciaabajo derechaabajo derechaarriba
Focal(72 %, 50 %)(78 %, 50 %) del área visible(50 %, 46 %)
Safe areax 10-90 % · y 22-78 %x 0-100 % visible · y 22-78 %6 % de aire por lado

11 · Content rules — límites de copy

CampoLímiteRegla
Kicker≤ 24 caracteres · 1 línea (I-01, medido; WARNING 25-30)Nombre de campaña, departamento o temporada en sentence case (el CSS lo pone en mayúsculas); nunca cifra ni verbo; nunca repite el título
Título≤ 2 líneas · ≤ 60 caracteres (≈30 por línea a 22 px; ≈40 por línea a 16 px)Beneficio con verbo, voz V1 («Que la fiesta se oiga hasta la banqueta»). El «hasta 20 %» se dice en texto, nunca como cifra-héroe (D-34). Sin anglicismos ni superlativos vacíos
Preciocampo skuNunca tecleado. Si el SKU se agota o cambia, el hero deja de mentir solo
CTA≤ 18 caracteres · ≤ 3 palabras · 1 por lámina (offsetWidth ≤ 160 px; WARNING 19-22)Imperativo + destino: Ver · Explora · Elige · Arma · Compara («Ver bafles», «Explora Smart Home»). Prohibidos: Compra/Comprar (el hero no agrega al carrito), «Ver más» (fallback del código), «Clic aquí». Destino: PLP filtrado, landing o PDP del SKU; nunca la raíz
Alto del panel≤ 204 px (medido 203)A 768 la lámina mide 240: con 3 líneas de título el panel se come el aire (D-16)
Vigenciadesde / hasta AAAA-MM-DDReal. Sin vigencia no se publica; al vencer desaparece
Legales0 en la piezaLas condiciones viven en la PLP/PDP o en la página de campaña, nunca en el arte ni en el panel

12 · Contrast & legibility — texto sobre media

  • El texto nunca depende del arte: va sobre el velo navy 96 % (DEV-01; hoy 92 %) → blanco ≥10.79:1 incluso sobre arte blanco; botón azul #006B9E con blanco 5.84:1
  • Kicker y precio en cian: 5.49:1 sobre navy opaco, pero 4.35-4.40:1 sobre el velo si el arte de abajo es blanco (D-14, G). Decisión L-01: regla de arte «bajo y alrededor del panel el fondo es medio tono, L 40-60» (PASS · WARNING 60-75 o 30-40 · FAIL >75 o <30) y* velo del panel al 96 % (DEV-01, 4.93:1 con arte blanco)
  • Dots: el chip n900 30 % cae a 1.86-2.03:1 sobre arte claro (D-17, G): scrim al 60 % (DEV-02, 4.12:1) y franja x 1300-1580 · y 630-720 del lienzo con L* ≤ 60
  • Foco: el CTA del hero está sobre navy sin .on-navy → ring azul 2.33:1 (DEV-04): debe usar focus.ring-inverse blanco (13.60:1)
  • Prohibido: texto directo sobre la foto, sombras de texto, outlines, degradado propio en el arte para «hacer legible»
  • Controles: flecha n900 sobre círculo blanco 92 %; dots blancos sobre scrim n900 60 % (DEV-02; hoy 30 %) → medir sobre el píxel de la captura con el arte real (≥3:1, 1.4.11)
  • Si el arte es muy claro bajo el panel (blanco > 60 %), el velo sigue garantizando 13.60:1: no se ajusta el velo, se ajusta el arte (más contexto, menos blanco) solo por composición

13 · Asset specifications

PropiedadValor
A01 desktop2880×720 px (4:1) · sRGB · sin texto ni logos de campaña rasterizados · HOY: JPG progresivo q65-75, ≤ 150 KB objetivo / ≤ 200 KB máximo (contrato del DS; el «300 KB» del manual se corrige, DOC-01); si no cabe con dignidad → 2400×600 (mín 1.5×), nunca q < 60 · OBJETIVO: AVIF ≤ 150 KB (gate) / ≤ 200 KB (contrato) + srcset 1440/2160/2880
A02 móvil1440×1080 px (4:3) · mismo concepto re-encuadrado · HOY JPG q60-70 ≤ 150 / ≤ 200 KB (si no cabe → 1200×900) · OBJETIVO AVIF ≤ 150 KB
FuenteMáster en alta (≥ 4000 px de lado mayor) conservado por el cliente; se entregan los dos crops finales
NombreAAAA-MM_campaña_hero_desktop.jpg · AAAA-MM_campaña_hero_movil.jpg (una carpeta por campaña)
Datos que acompañankicker · título · SKU · texto y URL del CTA · vigencia desde/hasta · alt (= título)
Formato que acepta el admin hoyjpg / jpeg / gif / png (WebP y AVIF rechazados por Backend\Image); sin límite de peso en el campo → el peso es responsabilidad de quien sube

14 · Accessibility

  • alt = título de la lámina; describe la campaña, no la foto («Bafles Steren: que la fiesta se oiga hasta la banqueta»)
  • Carrusel manual: aria-roledescription="carrusel", flechas <button aria-label>, dots con aria-current; nada se mueve solo
  • Panel: reflow a 320 px sin truncar el título (2 líneas); zoom 200 % validado
  • Entrada del panel 240 ms solo con prefers-reduced-motion: no-preference
  • Ninguna información vive solo en la imagen (E-01): precio, vigencia y CTA son texto

15 · Performance — entrega técnica

  • Lámina 1 = LCP: fetchpriority="high", eager; deuda: <link rel="preload" as="image" imagesrcset imagesizes> y <source media="(max-width: 767px)"> reales para el 4:3
  • HOY el archivo se sirve tal cual (sin resize ni compresión): el peso entregado ES el peso descargado → ≤ 200 KB (contrato LCP)
  • OBJETIVO: <picture> con AVIF/WebP + JPG, srcset 1440w/2880w y sizes="100vw"
  • CLS 0 por alto fijo (clamp); láminas 2-4 lazy
  • Guardar la config no purga FPC: cache:flush tras cambiar arte (manual §2.6)

Do

  • Producto real en contexto mexicano real, un solo sujeto, en el 40 % derecho
  • Muro o mesa lisa en el 58 % izquierdo para que el panel respire
  • Dos crops del mismo concepto (4:1 y 4:3) entregados juntos
  • Precio por SKU, vigencia real, CTA a PLP filtrado

Don't

  • Texto, precio, %OFF, logos de campaña o legales dentro de la imagen
  • El 4:1 encogido como móvil
  • Producto centrado o a la izquierda (queda bajo el panel)
  • Degradados de moda, neones, sellos con outline, collage de recortes
  • Sin autoplay ni video; nunca más de 4 láminas

Art Direction Board — H01

✓ Así sí (H01 a 1440)
Bafle amplificado Steren sobre una mesa de taller
Audio

Que la fiesta se oiga hasta la banqueta

$2,99000
Ver bafles
Vigencia: 1–30 sep 2026
58 % izquierdo limpiosujeto en el 40 % derecho
  • Un sujeto, un mensaje, un CTA
  • El precio es un campo (SKU vivo) pintado como cifra-héroe cian
  • Contexto: muro de color + mesa, sin degradados
  • El arte llega SIN texto; el panel navy con velo lo pone el sistema
  • Vigencia real en HTML
✕ Así no (el patrón de producción)
¡SÚPER OFERTA!
Sonido a otro nivel
Bafles y bocinas con hasta…
20%OFF
VER MÁS ›››
Promoción válida en productos seleccionados del 10 al 24 de septiembre 2026. No aplica con otras promociones. Consulta términos en steren.com.mx
texto rasterizadolegales en la imagen
  • Texto, precio y legales quemados en el JPG: no se traducen, no se leen con lector de pantalla, no se recortan bien
  • Degradado de moda y sello 20 % con outline: «típico de IA»
  • Dos CTAs y tres mensajes: no hay jerarquía
  • El precio no es vivo: miente al primer cambio
Bafle
Audio

Que la fiesta se oiga hasta la banqueta

$2,99000
Ver bafles

Móvil (390): el MISMO concepto re-encuadrado a 4:3 (A02), sujeto centrado y más grande; el copy va debajo en bloque navy con los dots. Nunca el 4:1 encogido: a 390 px el bafle mediría 40 px.

Fuentes: DS §7 Imagen · C6 campaign-slots · manual v1.0 §2.1, §5, §5.1, §6 · home.css:39-122 · hero.phtml:35-55 · system.xml home_hero_1/2 · 11 §2 A1-A2 · ES-11 · X-2, X-15

H02

Lámina de sistema «600+ tiendas»

Hueco reservado sin campo de cargaHome · lámina fija

La lámina fija de la red de tiendas: la única foto humana del hero (registro documental de mostrador/taller) bajo el mismo panel navy que H01. Hoy es un hueco reservado.

1 · Purpose — para qué existe

Poner al mostrador real en el fold («hay una persona real detrás», E2): 600+ tiendas y recogida en 60 min como hecho, no como frase. Consume una de las tres fotos humanas del funnel (ES-6).

2 · Use cases — cuándo usarlo

  • Siempre que exista la foto A08: lámina fija del carrusel del hero (no caduca, no tiene vigencia)

3 · Do not use when — cuándo no

  • Con modelos, stock o IA (ES-6/ES-11): sin foto real la lámina es muda, nunca un gris disfrazado
  • Para promociones: el copy es fijo del sistema
  • Como cuarta foto humana: si entra otra, sale una (cap 3)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Media A08foto humana 4:1 (2880×720) + 4:3 (1440×1080); misma caja clamp(240px, 28vw, 360px), cover centerobligatoria · hoy sin campo
Paneligual que H01 (navy 92 % → 96 % con DEV-01, blur, 64/16 px)sistema
Kicker · h2 · CTA«600+ tiendas» · «Recógelo hoy en 60 min — te lo tiene listo una persona real» (58 caracteres, 2 líneas) · «Elige tu tienda» (<button> que abre el drawer de tiendas, data-open-stores)fijos
Controleslos del carrusel (flechas 44, dots 44)sistema
altplantilla I-24: «[Persona con gafete] [acción] en [mostrador/taller] de Steren [sucursal]»obligatorio cuando exista el campo

5 · Layout blueprint — plano técnico

H02 · A08 foto humana de tiendas/taller — lienzo 2880×720 (misma geometría que H01) el sujeto es una persona con gafete −22 % a 2560 −22 % a 2560 −10 % a 768 −10 % a 768 PANEL a 768 — limpio PANEL a 1440 PERSONA: rostro + gafete + manos OJOS y 35-46 % focal 2880 px 720 px Persona real de Steren con gafete, en mostrador o taller real, manos en el producto; rostro ≥ 144 px del lienzo (≥ 48 px a 768) y gafete ≥ 48 px (≥ 16 px en pantalla). Mismos recortes que H01: la persona vive en x 58-84 % · y 22-78 %; el cliente, si aparece, de espaldas o fuera de foco. Hoy: sin `<img>` ni campo (hueco). El panel fijo dice «600+ tiendas · Recógelo hoy en 60 min — te lo tiene listo una persona real · Elige tu tienda».

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥10241440×360 → 1920×360 (recorte vertical desde 1536)4:1 → 5.33:1A08 2880×720= H01
768-1023768×240 → 1023×2863.2:1A08recorte lateral ≤10 %/lado; panel al 52 %
<768390×293 + bloque navy4:3A08-móvil 1440×1080re-encuadre: persona centrada, rostro ≥ 177 px del lienzo

7 · Safe areas — zonas seguras

Como H01 (x 58-84 % · y 22-78 %) con dos exigencias más: ojos en y 35-46 % del lienzo, rostro nunca bajo el panel ni bajo los dots; gafete legible fuera de la zona limpia.

8 · Focal point — punto focal

El rostro y las manos sobre el producto, en (70 %, 40 %). En el 4:3 la persona va centrada (0.50 ± 0.06) al 55-80 % del ancho.

9 · Crop behavior — qué pasa entre ratios

Idéntico a H01 (ver ficha H01 §9). El riesgo específico: cortar la cabeza a 1920/2560 si los ojos suben del 22 % del alto.

10 · Responsive behavior — desktop → tablet → móvil

Igual que H01. Sin flechas <768; el copy fijo baja al bloque navy.

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
FotoA08 4:1A08 4:1 (lateral −10 %)A08 4:3 alterno
Rostro≥ 48 px≥ 48 px≥ 48 px
Panelsobre la fotosobre la foto (52 %)debajo

11 · Content rules — límites de copy

CampoLímiteRegla
Kicker · h2 · CTAfijos del sistema (58 caracteres el h2)No se editan; el CTA abre el drawer (única excepción de destino no-catálogo, I-08)

12 · Contrast & legibility — texto sobre media

  • Como H01; además el rostro no queda bajo el velo (el blur lo convierte en mancha)
  • Luz natural cálida: clave:relleno ≤ 3:1, gafete R−B +5..+20, sin flash frontal (E-22)

13 · Asset specifications

PropiedadValor
A082880×720 + 1440×1080 · sRGB · personal real con gafete y nombre real · luz natural o de la tienda · HOY JPG q65-75 ≤ 150 / ≤ 200 KB (contrato) · OBJETIVO AVIF ≤ 150 KB
Procedenciaoriginal de cámara con EXIF + _retoque.csv (E-38); consentimiento de imagen del personal; clientes sin rostro
Dónde se subehoy en ningún sitio (DEV: campo A4 en config + campo móvil)
Nombrehumano_tiendas_4x1.jpg · humano_tiendas_4x3.jpg (L-30 / cap.07 A08; con varias tomas: humano_tiendas-<sucursal>_4x1.jpg)

14 · Accessibility

  • alt descriptivo (no repite el h2)
  • El CTA es un <button> real con nombre accesible; foco ring-inverse sobre navy (DEV-04)
  • Rostro ≥ 48 px y gafete ≥ 16 px en el render más chico (C-22)

15 · Performance — entrega técnica

  • Lámina 2+: loading="lazy"; nunca es LCP
  • HOY se serviría original: ≤ 200 KB (contrato); OBJETIVO <picture> + AVIF

Do

  • Mostrador o taller real de una sucursal identificable, persona atendiendo o instalando
  • Ojos a la altura de la cámara, horizonte a plomo

Don't

  • Pose de banco (brazos cruzados mirando a cámara: eso es el retrato de servicio H04)
  • Grupo posando, cliente identificable, stock, IA

Fuentes: hero.phtml:56-64 · home.css:73-76 · ES-6 · 11 §2 A4 · R11 · C §3.2 · E-20…E-22 · I-24

H03

Lámina de sistema SterenCard

Construido en el temaHome · lámina fija (si el programa está activo)

La lámina fija del programa de lealtad: territorio navy con la tarjeta dibujada por el sistema (CSS/SVG + onda) y la cifra «10 %». Cero raster, cero campos: solo aparece si el programa está activo.

1 · Purpose — para qué existe

Que el mayor activo CRM (3M tarjetas) sea visible en el fold sin fotografía: el arte del sistema (navy + cian + onda) es la identidad de la sub-marca (DS §9).

2 · Use cases — cuándo usarlo

  • Automáticamente cuando Promesa::activa(); siempre como lámina fija (última o penúltima)

3 · Do not use when — cuándo no

  • Con foto o ilustración figurativa: la tarjeta se dibuja, no se fotografía
  • Con «Desde 1956» en la cara de la tarjeta (ES-10: el programa no tiene 70 años)
  • Con CTA naranja: en territorio SterenCard la acción es cian

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Fondo.hero-slide.hero-sys navy; .hero-sys-wrap max 1440, padding 20/72, flex, gap 32sistema
Copykicker «Programa de lealtad» · h2 clamp(20px, 2.2vw, 28px) ≤ 18ch («El 10% de cada compra, de vuelta», 32 caracteres) · CTA btn-sterencard 44 px cian/navy «Conoce SterenCard»fijo (porcentaje desde config)
Tarjeta.sc-card-visual role="img": min(300px, 38%), aspect-ratio 1.586, máx 380, radio 12, borde cian 50 %, fondo color-mix(logo-cyan 12 %, navy), e3, onda 128 px al 35 %, .pct 32/800 ciansistema (D01 uso d)
Tensiónel h2 (20-28) grita más que el de campaña (16-22): la lámina del sistema no debe pesar más que la campaña (D tensión 9) → igualar a 22DEV-17

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1024tarjeta 300×189 en fila (copy | tarjeta)1.586:1sin asset
768292×1841.586:1sin asset
<768columna: copy arriba, tarjeta min(300px, 100 %)1.586:1sin assetpadding 20/16/44 (dots)

7 · Safe areas — zonas seguras

—

8 · Focal point — punto focal

La cifra «10 %» (32/800 cian sobre navy, 5.49:1) es la única cifra-héroe de la lámina.

9 · Crop behavior — qué pasa entre ratios

No aplica (sin raster).

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Copy | tarjetaen filaen filaen columna
CTAcian 44cian 44cian 44

11 · Content rules — límites de copy

CampoLímiteRegla
h2≤ 36 caracteres · 2 líneas (max-width 18ch)Claim del programa; sin «Desde 1956»
CTA≤ 18 («Conoce SterenCard» = 17)único verbo permitido «Conoce» en la sub-marca

12 · Contrast & legibility — texto sobre media

  • Blanco sobre navy 13.60:1; cian 5.49:1 (cifras/links); CTA navy sobre cian 5.49:1
  • Foco: ring-inverse blanco (hoy falta .on-navy → DEV-04)

13 · Asset specifications

PropiedadValor
Ningunoarte del sistema; el porcentaje sale de la config del programa

14 · Accessibility

  • role="img" con aria-label que dice el porcentaje; el CTA es enlace real
  • Sin movimiento salvo la entrada del panel (240 ms, reduced-motion la apaga)

15 · Performance — entrega técnica

  • 0 KB de imagen; ~45 nodos

Do

  • Navy + cian + onda, plano (la única banda que conserva luz radial es el módulo del pie, no esta lámina)

Don't

  • Foto de tarjeta física, degradados de moda, «Desde 1956», naranja buy

Fuentes: hero.phtml:65-80 · home.css:79-132 · DS §9 · ES-10 · C5c · D tensión 9 · I-01

H04

Cabecera de servicio con retrato

Construido en el temaTech Services (/steren-tech-services)

La cabecera navy de Tech Services: retrato del instalador (persona real, gafete, nombre y puesto en friso) como panel fotográfico a la derecha del H1 y los CTAs de contacto. Registro «retrato de servicio»: 1 por página de servicio, fuera del cap del funnel.

1 · Purpose — para qué existe

Que el servicio tenga cara: «un técnico va a tu domicilio» se demuestra con el técnico (E2). Es la LCP de la página.

2 · Use cases — cuándo usarlo

  • Páginas de servicio (Tech Services y futuras): exactamente un retrato por página

3 · Do not use when — cuándo no

  • En el funnel de compra (home → PDP): ahí el cap es de 3 fotos documentales, no de retratos
  • Con modelo, stock o IA; con fondo saturado nuevo (L-14 solo tolera el actual)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Media A10figure.ts-foto > img 518×626 WebP 24 KB (en el tema, versionado) fetchpriority="high", alt="" + figcaption «Rodrigo Hernández · instalador»obligatorio
Frisofigcaption absoluto con linear-gradient(to top, rgba(0,47,87,.92), rgba(0,47,87,0)), nombre 14/600 blanco, puesto 12 al 80 % — variante «friso» del velo (excepción E-8)sistema
Panel.ts-hero navy; grid 1fr 300px (≥768) → 1fr 420px gap 48 (≥1024); foto con cantos superiores 12, a sangre por abajosistema
Copyh1 28→40 px max-width 15ch · lead 18→20 px max-width 46ch · fila de confianzasistema
CTAsbtn-buy 48 (Llamar) + ts-btn-linea (WhatsApp): dos acciones de contacto distintas, admitidas por no ser campaña (D §3)sistema
Iconografía13 glifos SVG en rejilla de 48, trazo 2.4, lavado de color bajo el trazo (sprite local de la landing)sistema

5 · Layout blueprint — plano técnico

H04 · A10 retrato de servicio — lienzo de entrega 1200×1500 (4:5, 2×) pinta 420×508 (≥1024) · 358×300 cover top (<768) se pierde <768 (cover top 358×300 muestra el 67 % superior) FRISO navy 92→0: nombre · puesto coronilla 4-10 % OJOS 22-30 % GAFETE 30-52 % cabeza, hombros y manos dentro del 67 % focal 1200 px 1500 px Retrato de estudio (registro E-7): 2-3 luces, clave:relleno 2-3:1, catchlights, balance neutro; fondo liso IGUALADO AL NAVY (≤ 25 RGB) o gris de recorte. `tecnico.webp` actual: fondo azul saturado con degradado (a 169 RGB del navy, a 13.6 de la camiseta) → no recortable, se usa como panel: WARNING aceptado (L-14). Cantos superiores redondeados 12 px en móvil: nada en las esquinas superiores.

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1024420×508 (height:auto; max-height 520)0.83A10 1200×1500100 % visible
768-1023300×3630.83A10100 % visible
<768358×300 cover, object-position: 50% 01.19A10se ve el 67 % superior; friso sobre y 56-69 % del lienzo

7 · Safe areas — zonas seguras

Coronilla al 4-10 %, ojos al 22-30 %, gafete en y 30-52 % (fuera del 33 % perdido en móvil y fuera del friso), manos dentro del 67 % superior; el 20 % inferior queda para el friso: sin rostro ni texto del gafete ahí.

8 · Focal point — punto focal

Los ojos (50 %, 26 %). El recorte móvil es top-anchored: el focal no se mueve, se recorta el pie.

9 · Crop behavior — qué pasa entre ratios

Solo <768 (cover top: pierde el 31-33 % inferior). Un solo asset resuelve los tres estados si el gafete queda por encima del 52 %.

Asset 1200×1500 — lo que se ve según el ancho de pantalla (cover; anclaje por ventana) 1 1 · ≥1024 · 420×508 (viewport 420×508) ve 1200×1451 px del asset → recorte vertical 3% 2 2 · 768 · 300×363 (viewport 300×363) ve 1200×1452 px del asset → recorte vertical 3% 3 3 · <768 · 358×300 (cover top) (viewport 358×300, anclado arriba) ve 1200×1006 px del asset → recorte vertical 33%

10 · Responsive behavior — desktop → tablet → móvil

≥1024 · 420×508 friso gafete 420×508 • retrato entero • columna derecha 768 · 300×363 friso gafete 300×363 • retrato entero • columna 300 <768 · 358×300 friso gafete 358×300 • cover top: −33 % abajo • apilado sobre el copy
ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Retrato420×508 entero300×363 entero358×300 recortado por abajo
Friso20 % inferior20 % inferiorsobre y 56-69 % del lienzo
AssetA10A10A10 (mismo)

11 · Content rules — límites de copy

CampoLímiteRegla
figcaptionnombre real · puesto (≤ 24 + ≤ 16)Consentimiento de imagen del personal
h1≤ 15ch por línea (2 líneas)«Te ayudamos con la instalación»
lead≤ 46ch por líneaVoz V1-V3

12 · Contrast & legibility — texto sobre media

  • Nombre blanco sobre friso navy 92 % → ≥ 8.6:1 en la base; medir a la altura del texto (el friso se desvanece)
  • Fondo del retrato a ≥ 60 RGB del uniforme para que la silueta se lea (E-23)

13 · Asset specifications

PropiedadValor
A101200×1500 (4:5) · sRGB · estudio neutro · fondo igualado al navy (≤ 25 RGB) o gris de recorte · HOY WebP/JPG ≤ 120 KB (estático del tema, versionado) · OBJETIVO igual + srcset 600/1200
Actualtecnico.webp 518×626 (0.83), 24.6 KB — 1.23× a 420 px (< 2×, WARNING C-17) y fondo azul saturado (WARNING aceptado L-14)
Nombreretrato_{nombre-apellido}_4x5.jpg

14 · Accessibility

  • alt="" + figcaption con nombre y puesto (patrón correcto)
  • Foco sobre navy con ring-inverse (DEV-04)
  • Rostro ≥ 48 px y gafete ≥ 16 px en el render más chico (358×300)

15 · Performance — entrega técnica

  • LCP de la página: fetchpriority="high" ✓; width/height 518×626 ✓; sin srcset (deuda)

Do

  • Mirada a cámara permitida (es retrato), medio cuerpo, uniforme y gafete
  • Fondo liso que se funde con el navy

Don't

  • Recortar a 1:1 el retrato para otro slot
  • Texto en la foto (el nombre va en HTML)
  • Degradado de color detrás

Fuentes: servicio.css:41-52, 100-112 · steren-tech-services.html:45-48 · cap.22 · E-23, E-24 · C §3.4 · L-14 · E-8

H05

Cabecera de landing SterenCard

Especificado, no construidoLanding del programa (C5c)

La portada de la landing del programa (spec C5c, no construida): tarjeta dibujada + claim en display 40 + simulador. Sin raster. Hoy /steren-card es la página legal.

1 · Purpose — para qué existe

Explicar el programa con la gramática Payboo: beneficio en cifra, simulador, pasos, reglas claras.

2 · Use cases — cuándo usarlo

  • Cuando se construya la landing (dependencia: seguridad del monedero, 01 §8.4)

3 · Do not use when — cuándo no

  • Con foto de tarjeta física ni «Desde 1956»; con naranja buy

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Tarjetacara única del sistema (misma de H03)sistema
Claimdisplay 40/1.15 w700 — el único de la página≤ 36
CTAssobre navy btn-sterencard; sobre claro btn-primarysistema

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
—spec; sin medidas construidas—sin asset

7 · Safe areas — zonas seguras

—

8 · Focal point — punto focal

La cifra «10 %».

9 · Crop behavior — qué pasa entre ratios

—

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Tabla comparativacompletacompletaoverflow-x: auto + primera columna sticky

11 · Content rules — límites de copy

CampoLímiteRegla
Claim≤ 36 caracteres«El 10% de cada compra, de vuelta.»
Subtítulouna vez«Un programa de Steren — 70 años de mostrador»

12 · Contrast & legibility — texto sobre media

  • Pares on-navy del DS §9

13 · Asset specifications

PropiedadValor
Ninguno

14 · Accessibility

  • Tabla con encabezados; foco inverso sobre navy

15 · Performance — entrega técnica

  • 0 KB de imagen

Do

  • Cifras reales del programa (cap, exclusiones) en texto

Don't

  • Ilustración figurativa, foto de tarjeta, promesas sin regla

Fuentes: C5c · DS §9 · ES-10, ES-12

B01

Cintillo de texto

Especificado, no construidoHome/landings bajo el hero (C6)

La franja delgada de texto HTML (icono + mensaje + link) de 40-48 px bajo el hero: reemplaza a los JPG CintilloWeb_1920x150 de producción. Especificada en C6, no construida.

1 · Purpose — para qué existe

Un aviso comercial transversal (envío gratis, pagos, campaña) con vigencia, enlace y alt por construcción — lo que los cintillos raster nunca tuvieron.

2 · Use cases — cuándo usarlo

  • Mensajes de una línea con vigencia real y destino (condiciones, T&C, PLP)
  • Co-branding de pagos en TEXTO («Hasta 15 % con Mercado Pago a MSI · del 7 al 11 de sep»)

3 · Do not use when — cuándo no

  • Como imagen (JPG/PNG): un cintillo raster es FAIL
  • Con logos de bancos, cupones dibujados, % como cifra-héroe, dos mensajes

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Iconoglifo del set 16-20 pxsistema
Mensaje13-14 px, 1 línea ≥768, ≤ 2 líneas a 390≤ 70 caracteres
Linkbutton-quiet subrayado o btn-primary si hay acción≤ 18
Fondotoken (cyan-tint cuenta como banda 1/2 si se usa; bg-subtle; navy)sistema
Vigenciaobligatoria (desde/hasta); se retira solaobligatoria

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
todosalto 40-48 px · ancho .wrap—sin rasterC6

7 · Safe areas — zonas seguras

—

8 · Focal point — punto focal

—

9 · Crop behavior — qué pasa entre ratios

—

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Mensaje1 línea1 línea≤ 2 líneas
Alto40-4840-48hasta 2 líneas

11 · Content rules — límites de copy

CampoLímiteRegla
Mensaje≤ 70 caracteresVoz V1-V3; fórmula F2 con dato; sin urgencia sin fecha
Link≤ 18«Condiciones», «Ver reguladores»

12 · Contrast & legibility — texto sobre media

  • Pares del DS según el fondo elegido (n900 sobre cyan-tint 13.59:1; blanco sobre navy 13.60:1)

13 · Asset specifications

PropiedadValor
Ninguno0 imágenes; los wordmarks de terceros solo en la fila de pagos del sistema (D-37)

14 · Accessibility

  • Texto real; link con nombre; no es role="marquee": nada se mueve

15 · Performance — entrega técnica

  • ~10 nodos; 0 KB

Do

  • Un mensaje, una fecha, un link

Don't

  • 04_CintilloWeb_1920x150: logo + 15 % OFF + cupón + 5 bancos + VER MÁS en un JPG sin link ni alt

Fuentes: C6 cintillo · DS §7 (1440×120 → texto) · I-01, I-14 · D-37 · 25 §7.1

B02

Banda de categoría

Construido en el temaHome ×2 (home_carrusel_1/2)

La banda que vende: panel navy con una cifra medida por el sistema (mayor descuento real o mejor calificación) + carrusel de 4-12 tarjetas de la categoría. El único raster es el packshot del primer producto en la moneda.

1 · Purpose — para qué existe

Convertir una categoría con señal comercial en una fila de compra con ATC directo; la cifra es honesta porque la calcula el sistema (10 % real, 4.2★ de N opiniones).

2 · Use cases — cuándo usarlo

  • Dos por home (home_carrusel_1/2), categoría elegida en config o semilla automática; mínimo 4 productos

3 · Do not use when — cuándo no

  • Con cifra tecleada, % de campaña o «hasta»
  • Pegada a otro carrusel («el cliente nunca ve dos carruseles pegados»)
  • Con fondo tintado o degradado en el panel

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Panel.catband-head navy #002F57, radio 12, padding 20 (16 <1024), e2; columna 300 px ≥1024 (grid 300px minmax(0,1fr) gap 20); apilado <1024sistema
Kicker12/600 uppercase cian: «Ofertas en» / «Lo mejor valorado en» (automático)sistema
Título20/700 blanco (18 <1024): nombre de la categoría o override≤ 50 caracteres · ≤ 2 líneas
Cifra.cb-pct-n 88/800 cian letter-spacing -.04em (56 <1024) + unidad 34 (24) + pie 13 blanco 85 % ≤ 22ch1 por banda · medida
Moneda.cb-art 108 px (76 <1024) abajo-derecha (16/16), fondo blanco, aro cian 45 % + e2, img contain padding 12 → 84 px (52) de foto = small_image ORIGINAL del 1.er productoA05 vía dato
CTAbtn-sterencard 44 cian/navy «Ver todas»≤ 18
Carril4-12 tarjetas P03 de 220 px (≥768) / min(40vw, 240px) (156 a 390) con scroll-snap, flechas .st-circ 44 solo ≥1024; imágenes ORIGINALES (deuda de resize)sistema
Hoverpanel translateY(-2px) + e3; reduced-motion lo anulasistema

5 · Layout blueprint — plano técnico

B02 · Panel de la banda de categoría — 300×535 a 1440 (alto = el del carril) navy plano · padding 20 · radio 12 · e2 kicker 12 cian + título 20/700 blanco (≤ 50 car.) CIFRA 88/800 cian + unidad 34 + pie 13 (≤ 22ch) CTA cian 44 «Ver todas» MONEDA 108: packshot en 84 px focal 300 px 535 px El panel es navy PLANO (sin degradado, cap.29.3); la única cifra-héroe es la que mide el sistema (10 % real o 4.2★). El producto va en la moneda blanca con aro cian 45 % + e2, nunca a sangre: ≥ 12 px de blanco alrededor (E-29). <1024: el panel se apila sobre el carril (736 / 358 de ancho), cifra 56, moneda 76 (52 px de foto: solo silueta).

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1024panel 300 × alto del carril (≈535) · moneda 108 (foto 84)—A05 (dato)el texto nunca va sobre foto
768-1023panel 736 apilado · moneda 76 (foto 52) · cifra 56—A05carril 220
<768panel 358 apilado · moneda 76 · carril 156 con asomo—A05flechas ocultas

7 · Safe areas — zonas seguras

La moneda es un círculo: el producto vive en el 70 % central del packshot (círculo inscrito, C-13); a 52 px solo sobrevive la silueta → un cable o una tira LED como primer producto es WARNING de dato (lo elige HomeCarruseles).

8 · Focal point — punto focal

La cifra. El packshot es acento, centrado en la moneda.

9 · Crop behavior — qué pasa entre ratios

Ninguno: contain + círculo. Cambia la escala (84 → 52 px).

10 · Responsive behavior — desktop → tablet → móvil

≥1024 · panel 300 + carril panel navy moneda carril 220 px 1392×535 • cifra 88 • flechas 44 ≥1024 768 · apilado panel navy moneda 76 carril 220 736×660 • cifra 56 • sin flechas 390 · apilado panel navy moneda 76 carril 156 + asomo 358×760 • foto 52 px: silueta • dos tarjetas + asomo
ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Panelcolumna 300banda apilada 736banda apilada 358
Cifra88/80056/80056/800
Moneda / foto108 / 8476 / 5276 / 52
Flechas44 pxocultasocultas
Tarjeta220220156 (asomo)

11 · Content rules — límites de copy

CampoLímiteRegla
Título (override)≤ 50 caracteres · ≤ 2 líneas a 1440Nombre real de la categoría; nunca «¡¡OFERTAS INCREÍBLES!!» (el kicker ya dice «Ofertas en»)
Cifra · pieautomáticosNo editables
CTA«Ver todas» (fijo)

12 · Contrast & legibility — texto sobre media

  • Blanco sobre navy 13.60:1 · cifra cian 5.49:1 · pie blanco 85 % ≥ 9:1 · CTA navy sobre cian 5.49:1
  • Sin velo: no hay foto bajo el texto
  • Foco del panel-enlace: ring-inverse (DEV-04)

13 · Asset specifications

PropiedadValor
A05el packshot _x1 del primer producto, sin versión especial (E-29); HOY se sirve el original (hasta 2 MB para 84 px) → DEV resize small_image 320
Tarjetasoriginales de 1200×1200 para 194 px (p90 291 KB) → DEV resize/srcset

14 · Accessibility

  • Panel entero como enlace con nombre («Ofertas en Smart TV Box…»); alt="" en la moneda (decorativa)
  • Carrusel: flechas <button aria-label> con aria-disabled en extremos; sin autoplay
  • Cifra + pie en texto (nunca solo el número)

15 · Performance — entrega técnica

  • Todo lazy (bajo el pliegue); 12 originales por banda: deuda de resize; CLS 0 por tracks fijos de tarjeta (18/26/20/47, 84→98)

Do

  • Una cifra, un título, un CTA, una moneda
  • Categoría con ≥ 4 productos con oferta real o reseñas

Don't

  • JPG a sangre en el panel
  • Degradado en el panel (solo el módulo SterenCard de 1380 px conserva luz)
  • Cifra tecleada

Art Direction Board — B02

✓ Así sí
Ofertas en

Smart TV Box y controles remoto

10%
de descuento máximo
Ver todas →
OFERTAAndroid TV Box Google Certificado
Android TV Box Google Certificado
SKU: INTV-1000
$1,390.00$1,251.00
● En stock
Agregar al carrito
OFERTAControl remoto universal Wi-Fi
Control remoto universal Wi-Fi
SKU: SHOME-160
$249.00$224.10
● En stock
Agregar al carrito
OFERTAAndroid TV Stick Google Certificado
Android TV Stick Google Certificado
SKU: INTV-900
$895.00$805.50
● En stock
Agregar al carrito
OFERTATeclado inalámbrico con touch pad
Teclado inalámbrico con touch pad
SKU: RM-325
$199.00$179.10
● En stock
Agregar al carrito
  • Una cifra-héroe (88/800 cian), medida por el sistema
  • Producto en moneda blanca con aro: el JPG blanco no se ve
  • Panel navy plano; el carril blanco es el contraste
  • CTA cian (territorio navy), «Ver todas» ≤ 18
✕ Así no
¡¡OFERTAS INCREÍBLES!!

Smart TV Box y controles remoto

10% · $1,251 · 4.5★
hasta 20 % OFF en TODO
Comprar ya →
OFERTAAndroid TV Box Google Certificado
Android TV Box Google Certificado
SKU: INTV-1000
$1,390.00$1,251.00
● En stock
Agregar al carrito
OFERTAControl remoto universal Wi-Fi
Control remoto universal Wi-Fi
SKU: SHOME-160
$249.00$224.10
● En stock
Agregar al carrito
OFERTAAndroid TV Stick Google Certificado
Android TV Stick Google Certificado
SKU: INTV-900
$895.00$805.50
● En stock
Agregar al carrito
OFERTATeclado inalámbrico con touch pad
Teclado inalámbrico con touch pad
SKU: RM-325
$199.00$179.10
● En stock
Agregar al carrito
  • Tres cifras compitiendo en 800: ninguna manda
  • Packshot a sangre sobre navy: «un parche recortado»
  • Radial sin superficie (166-300 px): «se lee como mancha»
  • Kicker gritado y CTA de compra en una banda que no compra

Fuentes: home.css:410-479 · carrusel-categoria.phtml:57-69 · HomeCarruseles.php:161-241 · cap.29.3 · D-06, D-20, D-26, D-31 · C §3.6 · I-01, I-11 · E-29

B03

Banner tile de landing

Construido en el temaDentro del mosaico de landing (máx 1)

El banner de SterenCard dentro del mosaico de la landing, como un tile más: navy plano, kicker + título + link con flecha. Máximo uno por mosaico. Sin imagen.

1 · Purpose — para qué existe

Que el banner no parta la página (la falla medida en producción): vive en la retícula con el mismo radio y la misma sombra que los tiles.

2 · Use cases — cuándo usarlo

  • Automáticamente si el programa está activo; una vez por mosaico

3 · Do not use when — cuándo no

  • Como banner de oferta o campaña («¡APROVECHA! Hasta 20 % OFF»): el banner de landing es institucional
  • Con degradado (cap.29.0) o imagen

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Caja.mtile--banner navy plano, 332×208 (≥1024) / 166×172 (<768), radio 12, e1; hover borde ciansistema
Kicker12 cian «SterenCard»fijo
Título13/700 blanco≤ 44 caracteres (2 líneas a 390)
Link12 cian + flecha SVG → nav/url_sterencard≤ 16

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1024332×208 (span 1 o 2 según el mapa)1.6:1sin raster
<768166×172≈1:1sin raster

7 · Safe areas — zonas seguras

—

8 · Focal point — punto focal

El título.

9 · Crop behavior — qué pasa entre ratios

—

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Título≤ 2 líneas≤ 2 líneas≤ 2 líneas a 166 px

11 · Content rules — límites de copy

CampoLímiteRegla
Título≤ 44 caracteres«El 10 % de lo que compras, de vuelta»
Link≤ 16«Cómo funciona»

12 · Contrast & legibility — texto sobre media

  • Blanco 13.60:1 y cian 5.49:1 sobre navy plano (medido 4.81/4.62 con el radial retirado → ahora 5.49)

13 · Asset specifications

PropiedadValor
Ninguno

14 · Accessibility

  • Un enlace; ring-inverse; texto real

15 · Performance — entrega técnica

  • 0 KB

Do

  • Navy plano, un mensaje

Don't

  • Franja full-width que parte el mosaico
  • Radial sin superficie
  • Promociones con %

Fuentes: catalogo.css:346-354 · landing.phtml:60-64 · 22 §4.3 · cap.29.0 · I-01

B04

Countdown de campaña

Especificado, no construidoHome (C6)

Franja de urgencia con fecha REAL de fin de campaña; reutiliza la vigencia y la gramática de las etiquetas («Termina en N días → mañana → N h → N min»). Especificada en C6, no construida.

1 · Purpose — para qué existe

Urgencia honesta: solo con reloj real; nada de «últimas piezas» sin inventario (DS §10).

2 · Use cases — cuándo usarlo

  • Campañas con vigente_hasta real

3 · Do not use when — cuándo no

  • Sin fecha; con contadores que se reinician; con escasez inventada

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Texto«[Campaña] · Termina en N días · Vigencia: al d/m/aaaa»≤ 60
RelojJS en cliente (lo que depende del reloj no se hornea); al vencer hiddensistema

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
todosfranja 40-48 px—sin raster

7 · Safe areas — zonas seguras

—

8 · Focal point — punto focal

—

9 · Crop behavior — qué pasa entre ratios

—

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Texto1 línea1 línea≤ 2 líneas

11 · Content rules — límites de copy

CampoLímiteRegla
Fecha= vigente_hasta del slotFAIL sin fecha real

12 · Contrast & legibility — texto sobre media

  • Pares del DS según fondo

13 · Asset specifications

PropiedadValor
Ninguno

14 · Accessibility

  • El reloj no parpadea; aria-live="off" (no anunciar cada minuto)

15 · Performance — entrega técnica

  • ~12 nodos

Do

  • Fecha real, retiro automático

Don't

  • «Solo hoy», «N personas viendo», contador que se reinicia

Fuentes: C6 countdown · DS §10 · etiquetas.js:31-48 · I-14

B05

Banda de patrimonio

Hueco reservado sin campo de cargaHome

«Fabricamos lo que vendemos — desde 1956»: display + tres cifras-héroe + el scan del catálogo impreso (3:1). Hoy el scan es un hueco reservado y la banda se ve blanca «a propósito» (decisión sellada).

1 · Purpose — para qué existe

Patrimonio como hecho presente, no museo (E8): 70 años en cifra y en documento real.

2 · Use cases — cuándo usarlo

  • Siempre en el home (orden vinculante); una sola por página

3 · Do not use when — cuándo no

  • Con sepia, filtros «envejecido», fotos del catálogo sobre una mesa
  • Con texto añadido al scan (el texto impreso es contenido, no mensaje)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Titulardisplay clamp(28px, 3.4vw, 40px) — el único de la página≤ 44
Cifras3 × 800 clamp(28px, 2.6vw, 36px) con pie 13 ≤ 24ch («70 años», «600+ tiendas», «3M SterenCard»)fijas
Media A11.patri-archivo .ph-slot aspect-ratio 3/1, fondo transparente, z-index 1; detrás .patri-fallback «1956 → 2026» n300hueco (sin campo)
Retícula.patri-grid 1.2fr 1fr ≥768; apilado <768sistema

5 · Layout blueprint — plano técnico

B05 · A11 imagen de archivo — lienzo de entrega 1800×600 (3:1, 2×) pinta 622×207 (1440) · 324×108 (768) · 358×119 (390) ZONA SEGURA (radio 4 en el slot) ELEMENTO PRINCIPAL ≥ 40 % del alto (portada o fila de productos del catálogo) focal 1800 px 600 px Scan real del catálogo impreso: ≥ 300 dpi, enderezado (±0.5°), descreenado, papel neutro (lum 228-246, R≈G≈B ±8), sin sepia ni «vintage», sin mesa ni manos (E-26). A 108-207 px de alto no se lee ningún texto del scan: se compone COMO FORMA (una portada, una fila de productos), nunca como página a leer. Un catálogo no es 3:1: el recorte lo dirige diseño. Entregar OPACO (el fallback «1956 → 2026» vive detrás con z-index 1).

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440622×2073:1A11 1800×6002.9×
1280 / 1024549×183 / 433×1443:1A11
768324×1083:1A11render más chico
390358×1193:1A11apilado

7 · Safe areas — zonas seguras

x 3-97 % · y 5-95 % (radio 4); el elemento principal ocupa ≥ 40 % del alto para leerse a 108 px.

8 · Focal point — punto focal

La portada o el producto protagonista del pliego (35 %, 50 %).

9 · Crop behavior — qué pasa entre ratios

Ninguno (ratio fijo): el asset se entrega exactamente 3:1 ±0.5 %; el recorte del catálogo lo hace diseño antes de entregar.

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Scan622×207324×108358×119
Cifras3 en fila3 en fila (≥1024) / apiladasapiladas
AssetA11A11A11

11 · Content rules — límites de copy

CampoLímiteRegla
Titular y cifrasfijos del sistema«70 años» y «600+ tiendas» son cifras a congelar con negocio

12 · Contrast & legibility — texto sobre media

  • Texto del sistema sobre blanco; el scan no lleva texto encima ni velo

13 · Asset specifications

PropiedadValor
A111800×600 (3:1) máster · servido 1250×417 · sRGB · scan real ≥ 300 dpi · papel neutro · HOY JPG q75 ≤ 60 / ≤ 80 KB (el «250» del manual se corrige, DOC-01) · OBJETIVO AVIF ≤ 40 KB · opaco
Dónde se subehoy en ningún sitio (DEV: campo A6)
Nombrearchivo_catalogo-{año}_3x1.jpg

14 · Accessibility

  • alt «Portada del catálogo Steren de [año]» (I-24)
  • Las cifras van con su pie en texto

15 · Performance — entrega técnica

  • loading="lazy" (bajo el pliegue); alto reservado por aspect-ratio

Do

  • Documento real, papel neutro, compuesto como forma

Don't

  • Sepia, moiré, inclinado, manos en cuadro, fondo transparente

Fuentes: home.css:302-316 · patrimonio.phtml:29-32 · ES-9 · E-26 · C §3.8 · cap.28 (banda sellada)

B06

Banda «Aprende con Steren»

Hueco reservado sin campo de cargaHome (cyan-tint 2/2)

La banda cian «Aprende con Steren» (2/2): tres tiles blancos; el tercero («Pregunta, Steren responde») lleva la foto de mostrador 16:9 y una cita real del Q&A. Hoy la foto es un hueco.

1 · Purpose — para qué existe

Cultura maker y escuela (E6) + el mostrador que te resuelve (E2): la única foto humana del home fuera del hero.

2 · Use cases — cuándo usarlo

  • Siempre (orden vinculante); la foto solo cuando exista A07

3 · Do not use when — cuándo no

  • Con fotos de stock o de modelos; con texto sobre la foto; con más de una foto en la banda

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Bandacyan-tint (banda 2 de 2 del home), .learn-grid 3 columnas ≥768sistema
Tileblanco, radio 12, e1 sin filete, padding 20; hover −2 px + e2sistema
Media A07.learn-photo.ph-slot aspect-ratio 16/9 padding 12 en el tile 3hueco (sin campo)
Citadel módulo de Preguntas (citaDestacada()), debajo de la foto, con sello «Respuesta oficial de Steren · nombre · fecha»dato
Tiles 1-2kit y guía del fixture (home-merch.json): icono 32 + h3 18/600 + p 13 + linkcuraduría

5 · Layout blueprint — plano técnico

B06 · A07 foto de mostrador — lienzo de entrega 1600×900 (16:9, 2×) pinta 413×232 (1440) · 195×110 (768) · 318×179 (390) ZONA SEGURA (aire 6 %) PERSONA + MANOS + PRODUCTO ≥ 30 % del alto OJOS 35-45 % focal 1600 px 900 px Registro documental (E-7 no aplica): personal con gafete atendiendo, manos en el producto, mostrador real, luz de ventana/tienda (clave:relleno ≤ 3:1). A 768 el tile mide 195×110: el rostro debe medir ≥ 48 px → ≥ 44 % del alto del lienzo (plano medio corto) o [H-C4] dos columnas en tablet. Sin texto encima (la cita del Q&A va DEBAJO, en el tile): no hay velo.

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440413×23216:9A07 1600×9003.9×
1280 / 1024360×203 / 275×15516:9A07
768195×11016:9A07rostro ≥ 44 % del alto o [H-C4] 2 columnas
390318×17916:9A071 columna

7 · Safe areas — zonas seguras

Aire 6 %; rostro + manos + producto ≥ 30 % del alto; ojos en y 35-45 %; a 768 el rostro mide ≥ 48 px solo si ocupa ≥ 44 % del alto del lienzo.

8 · Focal point — punto focal

Las manos sobre el producto y el rostro (40 %, 40 %).

9 · Crop behavior — qué pasa entre ratios

Ninguno (16:9 fijo); el máster 4:3 (1600×1200) se recorta a 16:9 con dirección (X-13).

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Columnas33 (foto 195×110) — [H-C4] 21
Foto413×232195×110318×179
AssetA07A07A07

11 · Content rules — límites de copy

CampoLímiteRegla
h3 del tile≤ 30 caracteres · 1 línea«Pregunta, Steren responde»
Citadel Q&A real, con nombre y fechaNo se inventa

12 · Contrast & legibility — texto sobre media

  • Texto del sistema sobre blanco dentro del tile; la foto no lleva texto

13 · Asset specifications

PropiedadValor
A071600×900 (16:9) máster · servido 840×473 · sRGB · personal real con gafete · luz natural cálida · HOY JPG q78 ≤ 60 / ≤ 80 KB (ES-6 ≤ 120 = contrato) · OBJETIVO AVIF ≤ 40 KB · lazy
Dónde se subehoy en ningún sitio (DEV: campo A3)
Nombrehumano_mostrador-<sucursal>_16x9.jpg (L-30; el mismo archivo que describe M02)

14 · Accessibility

  • alt «Asesor de Steren con gafete atendiendo en el mostrador» (nombre solo con consentimiento)
  • Rostro ≥ 48 px, gafete ≥ 16 px en el render más chico

15 · Performance — entrega técnica

  • loading="lazy" (nunca LCP); alto reservado por aspect-ratio

Do

  • Persona haciendo algo con el producto, mostrador real reconocible

Don't

  • Pose de banco, cliente identificable, plano tan abierto que el rostro mida 30 px a 768

Fuentes: home.css:319-361 · aprende.phtml:56-57 · ES-6 (a) · E-20…E-22 · C §3.9 · X-13

T01

Tile de departamento héroe (2×2)

Construido en el temaHome · mosaico

El tile grande del mosaico «Compra por departamento»: la cara del departamento (imagen de categoría 1:1 sobre blanco) con nombre, conteo y tres atajos sobre cintillo.

1 · Purpose — para qué existe

Convertir el departamento en un destino reconocible de un vistazo: una foto que dice qué se vende ahí («un glifo de 40 px y un conteo no le dicen a nadie qué se vende», cap.29) y tres atajos a familias. El héroe lo elige el sistema por señal comercial (videos + ofertas × 2), no el tamaño del cajón.

2 · Use cases — cuándo usarlo

  • Siempre: el mosaico tiene exactamente 5 tiles (héroe 2×2 + 4 chicos) y el héroe es el departamento con más señal comercial
  • La cara sale de landing_image de la categoría (el ÚNICO control de contenido); si no hay, del producto insignia; si no, glifo

3 · Do not use when — cuándo no

  • Para campañas o promociones: el tile no lleva badges ni precios (eso es H01/B02)
  • Con una escena/lifestyle: hoy el sistema pinta contain sobre blanco y la escena se vería con bandas (T03 es el tile de escena, en la landing)
  • Con más de 3 chips o con un nombre de 3 líneas

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Mediaimagen de categoría 1:1 object-fit: contain, padding 20/20/104, ×1.04; sobre blanco bgA03 800×800
Fuente de la cara1) landing_image → 2) small_image del producto insignia (con video → precio → reseñas; sin repetir cara) → 3) glifo 48 px primary-text con cuerpo opacodato de catálogo
Viñetaradial navy 5 % (118% 88% at 50% 32%, transparente 0-56 %) sobre la media: la única viñeta del sistemasistema
Cintillo (velo blanco)bg 96 % → 92 % → 0 + backdrop-filter: blur(10px) saturate(1.15) + máscara 46 %; texto n900/n700; solo existe donde hay foto; en el sm <1024 el cuerpo vuelve a base opacasistema
Nombre.dt-name 20/700 (≥1024, sentence case); 14/700 uppercase en <1024; line-clamp: 2≤ 2 líneas · ≤ 56 caracteres
Conteo12 px n700 «168 productos»sistema
Chips≤ 3 atajos a familias, 12 px pill; solo en el héroe; ocultos <768≤ 3
Enlacetodo el tile es UN enlace (.dt-name::after estirado); alt="" porque el nombre porta el textosistema
HovertranslateY(-2px) + e2 + borde n300; foto ×1.09 (.45 s); con reduced-motion sin transición y ×1.04sistema

5 · Layout blueprint — plano técnico

T01 · Tile de departamento héroe — caja 688×432 a 1440 (span 2×2) foto útil 646×306 · cintillo 104 px ÁREA ÚTIL DE FOTO 646×306 (padding 20/20/104) RESERVA DEL CINTILLO 104 px — nombre 20/700 · conteo 12 · chips packshot 1:1 contain → 306×306 SUJETO (packshot al 90 %, base ≥8 px sobre el cintillo) focal 688 px 432 px Asset A03 800×800 sobre blanco puro: el sistema lo pinta CONTENIDO (306×306) sobre el mismo blanco → el borde del archivo desaparece. Cara en tres fuentes: `landing_image` del departamento → packshot del producto insignia → glifo (cuerpo opaco). Sin foto NO hay cintillo. Lifestyle: hoy se pinta también `contain` (la clase de `cover` no se emite) — una escena en T01 mostraría bandas blancas.
A03 · Imagen de categoría — lienzo de entrega 800×800 (1:1, 2×) sirve a T01, T02, T05, T08 y al mega-menú PRODUCTO: lado mayor al 85-90 % del lienzo (convención medida del packshot) aire 5 % aire 5 % focal 800 px 800 px Es la `_x1` del producto representativo bajada a 800×800 — no se fotografía nada nuevo. Fondo blanco puro 255/255/255 en todo el perímetro; centro en (0.50, 0.50). SIN sombra en el archivo (31/34 packshots medidos: ≥246 bajo el sujeto): la sombra y el aire los pone el sistema (e1→e2, padding). Un solo producto, el representativo de la familia; escala coherente con los tiles vecinos (D-07). Sin texto, sin badge, sin fondo de color. Hoy 129 de 131 miden 400×400 y se sirven originales hasta 2500×2500: entregar 800×800 ≤ 100 KB (JPG q80) y nada mayor.

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440caja 688×432 · foto útil 646×306 → packshot 306×306caja 1.6:1 · foto 1:1A03 800×800filas de 208 + gap 16
1280608×432 · 566×3061.4:1A03
1024480×432 · 438×3061.1:1A03
768736×356 · 694×230 → 230×2302.07:1A032 columnas: el héroe ocupa el ancho; nombre 14 uppercase
390358×356 · 316×230 → 230×2301:1A03sin chips

7 · Safe areas — zonas seguras

En el asset A03 (800×800): es el packshot _x1 del representante: lado mayor del producto al 85-90 % del lienzo, centrado (0.50/0.50), 5 % de aire, fondo 255 en todo el perímetro, sin sombra en el archivo (convención medida en 34 packshots reales). En el tile: la foto entra contenida en la caja útil; el producto queda ≥8 px por encima de la reserva del cintillo (104 px) — la máscara arranca al 46 % del cintillo, así que los ~14 px superiores del velo ya son degradado sobre foto (D-11). El nombre nunca invade la foto: si necesita 3 líneas, el nombre está mal, no el tile.

8 · Focal point — punto focal

El focal es el producto entero, centrado en el cuadrado de la foto (50 %, 38 % de la caja). No hay re-encuadre por breakpoint: el mismo A03 se contiene en cajas de 230 a 306 px. Verificación: en 1440, 768 y 390 el producto se ve completo, mide ≥ 200 px de alto y no toca el velo.

9 · Crop behavior — qué pasa entre ratios

No hay recorte (contain): la foto 1:1 cabe entera en todas las cajas y el resto es blanco (el mismo blanco del render). Lo que cambia es la escala del packshot: 306 px (≥1024) → 230 px (<1024). Por eso el producto debe ocupar 85-90 % del asset: a 90 % se pinta a ~77 px en el tile chico de 390 (piso de legibilidad ≥48 px, C-09); un packshot «con aire generoso» al 50 % sería un timbre de 43 px → WARNING.

10 · Responsive behavior — desktop → tablet → móvil

Desktop 1440 (héroe 2×2) foto 306² cintillo 104 688×432 • nombre 20/700 + conteo + 3 chips • sub-links solo aquí Tablet 768 (héroe 2×2 en 2 col) foto 230² cintillo 104 736×356 • mismo asset, foto 230 px • nombre 14 uppercase Móvil 390 (héroe 2×2) foto 230² cintillo 358×356 • mismo asset • sin chips (<768) el tile ocupa las 2 • columnas

El mosaico pasa de 4 columnas (filas 208) a 2 (filas 172); el héroe conserva el span 2×2 y sus sub-links; los chips desaparecen bajo 768; el nombre baja a 14 px en mayúsculas.

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Foto306×306 contenida230×230230×230
Cintillo104 px, velo104 px, velo104 px, velo
Nombre20/700 sentence case, ≤2 líneas14/700 uppercase14/700 uppercase
Chips≤3≤3desaparecen
Focal / safe(50 %, 38 %) · producto enteroigualigual
AssetA03A03 (mismo)A03 (mismo)

11 · Content rules — límites de copy

CampoLímiteRegla
Nombre≤ 30 caracteres (1 línea a ≥1024; 2 líneas fijas a 390; I-01)Nombre real de la categoría (nunca «MICROFONOS INFLUENCER» sobre bafles); sentence case, el CSS decide mayúsculas; los nombres largos del árbol («Movilidad (tecnología portátil)») necesitan etiqueta corta
Conteosistema«N productos»: sale del catálogo
Chips3 · ≤ 20 caracteres cada uno · suma ≤ 50 (una fila a 1024)Nombres de familia reales; enlazan a la familia

12 · Contrast & legibility — texto sobre media

  • Texto n900 sobre cintillo 92 % → ≥ 12.5:1 incluso sobre foto negra; conteo n700 7.8:1 (por eso el cintillo usa n700, no n500)
  • El velo NO tinta: la foto de abajo sigue siendo blanca → el cintillo se lee como continuación del hueco
  • Sin foto: cuerpo opaco blanco, glifo primary-text

13 · Asset specifications

PropiedadValor
A03800×800 (1:1) · sRGB · fondo blanco puro · un producto representativo · HOY JPG progresivo q80 ≤ 60 KB objetivo / ≤ 100 KB máx (packshot sobre blanco a 800² pesa 23-88 KB medido; el «200» del manual se corrige, DOC-01) · OBJETIVO AVIF + srcset 80/160/320/640
Dónde se subeCatálogo → Categorías → (departamento) → Content → «Imagen de categoría» (landing_image, GLOBAL, 4 MB); el admin promete WebP pero el servidor lo rechaza: solo JPG/PNG/GIF
Nombrecat_<slug-departamento>_1x1.jpg (p. ej. cat_smart-home_1x1.jpg, L-30)
Realidadse sirve el ORIGINAL sin redimensionar (también a 38 px en chips): un 2500×2500 de 632 KB baja por cada chip. No subir nada mayor de 800×800

14 · Accessibility

  • alt="" (decorativo-redundante): el nombre del departamento es el enlace y porta el texto; un solo foco por tile
  • Contraste del cintillo garantizado por receta; hover no cambia el significado (el color del nombre a primary-text 4.9:1 sobre velo)
  • Reduced-motion: sin lift ni zoom (×1.04 fijo)

15 · Performance — entrega técnica

  • Héroe loading="eager" sin fetchpriority (con el hero sin arte es la LCP probable del home): deuda → fetchpriority="high" cuando sea LCP
  • Chicos loading="lazy", decoding="async", width/height 640×480 / 320×240 declarados; CLS 0 por filas fijas
  • Sin srcset: el original se sirve a 230-306 px → 800×800 es el techo de entrega (D-01: 2× de 306 = 612; 800 cubre DPR 2.6)

Do

  • La _x1 del producto representativo, al 85-90 % del lienzo, sobre blanco puro y sin sombra
  • Misma escala óptica que los tiles vecinos
  • Cargar landing_image en los 13 departamentos (hoy solo Smart Home; SMART_HOME.jpg es una composición celular+foco a 400×400 → WARNING)

Don't

  • Escenas o fondos de color en landing_image (se pintan con bandas)
  • Texto, badge o precio dentro de la imagen
  • Nombres de 3 líneas o 4 chips
  • Subir 2500×2500 «por si acaso»

Art Direction Board — T01/T02 (mosaico del home)

✓ Así sí
Smart Home
Smart Home
168 productos
Cámaras Wi-FiApagadoresIluminación
TV y video
TV y video
296 productos
Audio
Audio
304 productos
Seguridad
Seguridad
136 productos
Energía
427 productos
  • Packshots sobre el mismo blanco del tile: el borde del archivo no existe
  • Escala óptica coherente: cada packshot al 85-90 % de su lienzo, misma ocupación entre vecinos (±0.12)
  • Cintillo con velo solo donde hay foto; el tile sin foto se lee elegido (glifo sobre tinte, cuerpo opaco)
  • Nombre 1 línea en los chicos; chips solo en el héroe
✕ Así no
Smart Home
¡NUEVO!
Smart Home
168 productos
Cámaras Wi-FiApagadoresIluminación
TV y video
TV y video
296 productos
Audio
Audio
304 productos
Seguridad
Seguridad
136 productos
Energía
Energía
427 productos
  • Escala rota: foco enorme, TV box diminuto (la falla medida en producción)
  • Texto quemado en la foto de categoría
  • Zócalo opaco con costura que corta la foto (it.14, superseded)
  • Tinte degradado como fondo del arte

Fuentes: home.css:173-266 · mosaico.phtml:39-72 · HomeDepartamentos.php:116-298 · cap.28-29 · manual §2.4, §5, §7 · D-04, D-05, D-11, D-19

T02

Tile de departamento estándar (1×1)

Construido en el temaHome · mosaico

Los cuatro tiles chicos del mosaico del home: misma cara (imagen de categoría) en una caja de 336×208 con cintillo de 72 px.

1 · Purpose — para qué existe

Cubrir los otros cuatro departamentos con más señal comercial en una fila de alto fijo; el usuario reconoce el departamento por el producto, no por el icono.

2 · Use cases — cuándo usarlo

  • Siempre en el mosaico (4 chicos + 1 héroe = la retícula cierra sin huecos en 2 y 4 columnas)

3 · Do not use when — cuándo no

  • Para promociones, campañas o badges
  • Con nombres de 2 líneas: en 72 px de reserva solo cabe una

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Mediaimagen de categoría 1:1 contain, padding 12/12/72, ×1.04A03 800×800
Fuente de la caraigual que T01 (landing_image → insignia → glifo 40 px)dato
Viñetaradial navy 5 % (118% 88% at 50% 32%, transparente 0-56 %) sobre la media: la única viñeta del sistemasistema
Cintillo (velo blanco)bg 96 % → 92 % → 0 + backdrop-filter: blur(10px) saturate(1.15) + máscara 46 %; texto n900/n700; solo existe donde hay foto; en el sm <1024 el cuerpo vuelve a base opacasistema
Nombre14/700 uppercase .02em, line-clamp: 2 pero presupuesto 1 línea≤ 36 caracteres
Conteo12 px n700sistema
Chipsninguno0
HovertranslateY(-2px) + e2 + borde n300; foto ×1.09 (.45 s); con reduced-motion sin transición y ×1.04sistema

5 · Layout blueprint — plano técnico

T02 · Tile de departamento estándar — caja 336×208 a 1440 foto útil 310×122 · cintillo 72 px área útil 310×122 (padding 12/12/72) CINTILLO 72 px — nombre 14/700 uppercase (1 línea) + conteo packshot contain → 122×122 focal 336 px 208 px El producto se pinta a 122 px: por eso A03 exige que ocupe 85-90 % del lienzo (a 90 % = 110 px legibles; a 50 % serían 61). 1 línea de nombre: 14×1.3 + 4 + 12×1.4 + 20 + 12 = 71 ≤ 72. Con 2 líneas (89 px) el velo invade la foto (D-05).

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440336×208 · foto útil 310×122 → 122×1221.6:1A03 800×800
1280296×208 · 270×1221.4:1A03
1024232×208 · 206×1221.1:1A03
768362×172 · 336×86 → 86×862.1:1A032 columnas
390173×172 · 147×86 → 86×861:1A03

7 · Safe areas — zonas seguras

Como T01: packshot al 85-90 % del asset, ≥8 px sobre el cintillo. En 390 el producto se pinta a ~77-86 px (piso ≥48 px): el packshot debe leerse como silueta clara a ese tamaño (sin detalles finos que importen).

8 · Focal point — punto focal

Producto entero centrado (50 %, 35 %). Sin re-encuadre; solo escala.

9 · Crop behavior — qué pasa entre ratios

No hay recorte (contain). Escala: 122 px (≥1024) → 86 px (<1024).

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Foto122×12286×8686×86
Cintillo72 px velo72 px velo72 px velo
Nombre14 uppercase, 1 líneaigualigual
AssetA03A03A03

11 · Content rules — límites de copy

CampoLímiteRegla
Nombre≤ 30 caracteres (WARNING 31-34 · FAIL >34: el clamp corta con puntos suspensivos); presupuesto visual 1 líneaNombre real de la categoría o etiqueta corta
Conteosistema

12 · Contrast & legibility — texto sobre media

  • Igual que T01 (cintillo n900 ≥12.5:1, n700 7.8:1)

13 · Asset specifications

PropiedadValor
A03el mismo archivo que T01: 800×800 sobre blanco, ≤ 60 / ≤ 100 KB JPG hoy
Nombrecat_<slug>_1x1.jpg

14 · Accessibility

  • alt=""; enlace único por tile; reduced-motion sin lift

15 · Performance — entrega técnica

  • loading="lazy" + decoding="async" + 320×240 declarados; original sin resize (deuda: srcset 400/800)

Do

  • Silueta clara a 86 px
  • Nombre de una línea

Don't

  • Productos alargados horizontales que a 86 px son una raya (elegir otro representante)
  • Dos líneas de nombre

Fuentes: home.css:173-266 · inventario 02 §S4 · D-05

T03

Tile de familia héroe (escena)

Hueco reservado sin campo de cargaLanding · mosaico (2×2)

El tile grande del mosaico de la landing de departamento: la ÚNICA escena (foto de contexto) de la página, con el uso como titular, la familia + conteo como enlace y 2-3 atajos a PLP filtrado.

1 · Purpose — para qué existe

Convertir «quiero domotizar mi casa» en «voy a Iluminación inteligente» en un clic: la escena dice el uso, el titular lo nombra con verbo, el enlace lleva a la familia. Es la imagen LCP de la landing.

2 · Use cases — cuándo usarlo

  • Una escena por landing en el héroe (D1: «escena solo en el héroe» + el tile medio); el resto de tiles usa packshot sobre blanco
  • Solo con curaduría (landing_position) Y material real; sin escena real el tile héroe se pinta con el packshot de la familia (render), nunca con un gris

3 · Do not use when — cuándo no

  • Con una familia de ≤2 productos (va a la lista densa)
  • Para productos: la landing es 100 % navegación (D2)
  • Con texto, precio o % en la escena (E-01); con stock extranjero, modelos o IA (ES-11)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Mediaescena 1.6:1 a sangre (cover, focal declarado) o packshot 1:1 contain (variante render)A04 1400×880 (o A03)
Viñetaradial navy 5 % (118% 88% at 50% 32%, transparente 0-56 %) sobre la media: la única viñeta del sistemasistema
Cintillo (velo blanco)bg 96 % → 92 % → 0 + backdrop-filter: blur(10px) saturate(1.15) + máscara 46 %; texto n900/n700; solo existe donde hay foto; en el sm <1024 el cuerpo vuelve a base opacasistema
Título-uso.mt-uso 20/700 (≥1024) con verbo: «Enciende la casa desde el celular»≤ 2 líneas · ≤ 56 caracteres
Familia + conteo.mt-fam 12 px n700 sobre cintillo: «Iluminación inteligente · 23» — esto es el enlacesistema
Chips2-3 atajos a PLP ya filtrado (12 px pill)≤ 3
Estado sin materialph-slot mudo en producción o packshot render; nunca esqueletosistema
HovertranslateY(-2px) + e2 + borde n300; foto ×1.09 (.45 s); con reduced-motion sin transición y ×1.04sistema

5 · Layout blueprint — plano técnico

T03 · A04 escena de landing — lienzo de entrega 1400×880 (1.6:1, 2×) pinta 688×432 (cover) · cintillo inferior 104 px bajo el CINTILLO (104/432) — sin detalle relevante −19 % a 390 (caja 1:1) −19 % a 390 −22 % a 768 (caja 2.07:1) ZONA SEGURA ÚNICA T03+T04 — sobrevive 390 (1:1), 768 (2.07:1), el medio (0.87:1) y el cintillo PRODUCTO EN USO focal 1400 px 880 px `cover` sobre cajas de 1.6:1 (1440) · 2.07:1 (768) · 1:1 (390): la escena vive en la cruz central; lo que esté en los bordes se va. El cintillo tapa el cuarto inferior: horizonte, mesa y producto en el 70 % superior. El velo blanco garantiza ≥12.5:1 aunque la foto sea negra. Dirección ES-11: interior mexicano real (muro de color, mesa de taller, changarro) + manos operando el producto; nada de stock extranjero ni IA.

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440688×432 (cover)1.6:1A04 1400×880cintillo 104 px inferior
1280 / 1024608×432 / 480×4321.4:1 / 1.1:1A04recorte lateral 12 % / 31 %
768736×3562.07:1A04recorte vertical 22 %
390358×3561:1A04recorte lateral 19 % por lado

7 · Safe areas — zonas seguras

Sobre el asset A04 (1400×880): cuadro central x 25 %→75 % · y 12 %→62 % — la intersección de las 12 ventanas de T03 y T04 (caja 1:1 de 390, 2.07:1 de 768, panel lateral 0.87:1 del medio) menos el velo de 104/92 px. Un solo asset sirve a los dos tiles solo si el sujeto vive ahí. Horizonte, mesa, manos y producto dentro; el cuarto inferior (y >76 %) queda bajo el velo: puede ser mesa o suelo, nunca el producto.

8 · Focal point — punto focal

El producto en uso (o las manos que lo operan), en (50 %, 40 %) del asset. Se conserva por object-position: center — un solo asset resuelve los tres estados solo si el focal está en el centro; un producto en el tercio derecho desaparecería a 390. Verificación: capturas a 1440, 768 y 390: el producto se ve entero y mide ≥ 25 % del alto del tile.

9 · Crop behavior — qué pasa entre ratios

cover sobre tres proporciones distintas: a 1440 el asset entra casi nativo (1.6:1 vs 1.59:1); a 768 la caja es más ancha (2.07:1) y se pierde el 22 % del alto; a 390 la caja es cuadrada y se pierde el 19 % de cada lado. [H] Hoy el tile pinta contain (el CSS espera una clase por origen que la plantilla no emite): con una escena real aparecerían bandas blancas → deuda de desarrollo: cover + object-position para la variante escena.

Asset 1400×880 — lo que se ve según el ancho de pantalla (cover; anclaje por ventana) 1 1 · 1440 (688×432) (viewport 688×432) ve 1400×879 px del asset → sin recorte 2 2 · 768 (736×356) (viewport 736×356) ve 1400×677 px del asset → recorte vertical 23% 3 3 · 390 (358×356) (viewport 358×356) ve 885×880 px del asset → recorte lateral 37%

10 · Responsive behavior — desktop → tablet → móvil

Desktop 1440 (héroe 2×2) safe cintillo 104 688×432 • escena 1.6:1 a sangre (cover) • título-uso 20/700 + familia + chips Tablet 768 (2 col) safe cintillo 104 736×356 • cover recorta 22 % arriba/abajo • mismo asset Móvil 390 (2 col) safe cintillo 358×356 cover recorta 19 % por • lado • mismo asset (cruz central) chips en 1 fila (el héroe • los conserva)

El asset es el mismo en los tres estados (no hay variante móvil): por eso el focal va al centro y la zona segura es un cuadro central. El héroe conserva cintillo (92 px <1024) y chips en todos los anchos (solo el mosaico del home los oculta <768); el título baja de 20 a 13-16 px.

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Escenacover 1.6:1cover 2.07:1 (−22 % vertical)cover 1:1 (−19 % lateral)
Cintillo104 px velo92 px velo92 px velo
Título-uso20/700 ≤2 líneas13-16 px13-16 px
Chips≤3≤3≤3 (1 fila)
Focal(50 %, 40 %)igualigual
AssetA04A04A04

11 · Content rules — límites de copy

CampoLímiteRegla
Título-uso≤ 60 caracteres · ≤ 2 líneas (I-01: PASS ≤ 48 px de alto a 1440)Fórmula F1: imperativo + qué logra + desde dónde («Enciende la casa desde el celular»); nunca el nombre de la familia; sin adjetivos
Familia + conteoetiqueta ≤ 28 caracteres + « · N productos» automáticoNombre real; viaja también en aria-label. El enlace visible es el uso (L-23)
Chips2-3 · ≤ 14 caracteres cada uno (1 fila a 390)Filtros reales de la PLP («E27», «Regulables», «Exterior») → deben apuntar al PLP filtrado (DEV-13)

12 · Contrast & legibility — texto sobre media

  • Cintillo blanco: n900 ≥12.5:1 y n700 ≥7.8:1 sobre cualquier foto (medido sobre negro)
  • Sin velo no hay texto: el título nunca va sobre la escena desnuda
  • El detalle fino bajo el velo se vuelve mancha por el blur: la escena no pone nada importante en el cuarto inferior

13 · Asset specifications

PropiedadValor
A041400×880 (1.6:1) · sRGB · escena real (ES-11) · sin texto · HOY JPG progresivo q70-78 ≤ 120 KB objetivo / ≤ 150 KB máx (el «250» del manual se corrige, DOC-01) · OBJETIVO AVIF ≤ 120 KB (tile) + srcset 700/1050/1400
Mástersi el cliente entrega 4:3 (1600×1200), el recorte 1.6:1 lo dirige diseño con el focal al centro
Dónde se subehoy en ningún sitio: la variante escena solo lee el fixture landing-merch.json → deuda de desarrollo (campo landing_scene por categoría)
Nombreesc_<slug-familia>-hero_16x10.jpg · esc_<slug-familia>-med_16x10.jpg (L-30)

14 · Accessibility

  • alt = el uso («Foco inteligente encendido desde el celular en una sala»), no el título (que ya es texto); un solo enlace por tile
  • Contraste por receta; sin movimiento salvo el lift (reduced-motion lo apaga)

15 · Performance — entrega técnica

  • Es la LCP de la landing: loading="eager" sin fetchpriority ni width/height hoy → deuda: fetchpriority="high" + width/height + srcset 700/1400
  • HOY el archivo se sirve original: ≤ 150 KB
  • CLS 0 por filas fijas del grid

Do

  • Interior mexicano real: muro de color, mesa de taller, changarro; manos operando el producto
  • Producto en la cruz central, sobre el cintillo
  • Luz natural, un solo producto protagonista (≤2 secundarios)

Don't

  • Stock nórdico, modelos posando, renders o IA
  • Texto, precio, logos en la escena
  • Producto en un borde (desaparece a 390)
  • Fondo degradado «de moda» en lugar de un lugar real

Art Direction Board — T03/T04/T05 (mosaico de la landing)

✓ Así sí
Enciende la casa desde el celular
Enciende la casa desde el celular
Iluminación inteligente · 23
Foco E27Regulables
Mira tu casa desde donde estés
Mira tu casa desde donde estés
Cámaras Wi-Fi · 33
Que el Wi-Fi llegue hasta el fondo
Que el Wi-Fi llegue hasta el fondo
Repetidores · 12
Cambia el apagador, no la instalación
Apagadores · 24
  • Escena solo en el héroe (y el medio): muro de color + mesa, producto en la cruz central, sobre el cintillo
  • Los 1×1 llevan packshot sobre blanco: la tipografía carga el significado
  • Título = USO con verbo; la familia + conteo es el enlace; chips solo en héroe y medio
  • Banner navy plano como un tile más (máx 1); tile tipo con glifo cuando no hay foto
✕ Así no
Iluminación inteligente
Iluminación inteligente
Foco inteligente RGB Wi-Fi 10 W E27 · 23 productos
Foco E27RegulablesExteriorVintage
Cámaras
Cámaras
Cámaras Wi-Fi · 33
Repetidores Wi-Fi extensores de señal de largo alcance
Repetidores Wi-Fi extensores de señal de largo alcance
Repetidores · 12
Kits
Kits
Kits · 2
  • Degradado de moda como escena y título = nombre de familia (sin uso)
  • Título de 2-3 líneas en un 1×1: el velo invade la foto
  • Familia con 2 productos como tile (regla: ≤2 productos no puede ser tile)
  • Banner con promoción y %: el banner de landing es SterenCard, no una oferta

Fuentes: catalogo.css:156-332 · landing.phtml:60-78 · Landing.php:110-183 · 22 D1-D3 §4 · cap.27.1 · manual §5 · D-05, D-11, D-19 · X-13

T04

Tile de familia medio (panel lateral)

Hueco reservado sin campo de cargaLanding · mosaico (2×1)

El tile horizontal de la landing: foto en el 42 % izquierdo (escena o packshot) y cuerpo con filete insetado a la derecha; el segundo tile de escena permitido por D1.

1 · Purpose — para qué existe

Segundo escaparate de la landing: la familia con más señal después del héroe, con espacio para 2-3 atajos.

2 · Use cases — cuándo usarlo

  • Como segundo tile de escena (D1) o con packshot cuando no hay escena
  • Con familias de ≥3 productos

3 · Do not use when — cuándo no

  • Con títulos de 3 líneas o más de 3 chips
  • Con una escena cuyo sujeto no esté en el centro (a 390 la foto mide 150×172 y cover recorta el 45 % lateral)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Media.mt-media flex 0 0 42 %; escena cover (focal centro) o packshot contain padding 12A04 o A03
Cuerpoa la derecha, filete insetado 12 px, título 16/700 ≤2 líneas, familia 12, chips ≤3sistema
Viñetaradial navy 5 % (118% 88% at 50% 32%, transparente 0-56 %) sobre la media: la única viñeta del sistemasistema
HovertranslateY(-2px) + e2 + borde n300; foto ×1.09 (.45 s); con reduced-motion sin transición y ×1.04sistema

5 · Layout blueprint — plano técnico

T04 · Tile de familia medio — caja 688×208 a 1440 (foto en el 42 % izquierdo) 289×208 de foto · cuerpo con filete insetado FOTO 289×208 (1.39:1) cuerpo: título 16/700 · familia · chips safe de la escena (1:1 útil) focal 688 px 208 px Sin cintillo: el cuerpo vive al lado, no encima. Escena 1.6:1 con `cover` pierde 13 % lateral a 1440, 45 % a 390 (150×172). Packshot: `contain` con padding 12 → 184×184 a 1440.

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440688×208 · foto 289×2081.39:1A04 1400×880 / A03
1280 / 1024608×208 · 255×208 / 480×208 · 202×2081.23:1 / 0.97:1A04/A03
768736×172 · 309×1721.8:1A04/A03
390358×172 · 150×1720.87:1A04/A03cover recorta 45 % lateral

7 · Safe areas — zonas seguras

Escena: la misma zona única de T03 (x 25-75 % · y 12-62 %): así un solo A04 sirve a los dos tiles. Packshot: como A03.

8 · Focal point — punto focal

(50 %, 40 %) del asset; el sistema centra por object-position.

9 · Crop behavior — qué pasa entre ratios

cover (escena) sobre cajas de 0.87:1 a 1.8:1: recorte lateral fuerte en móvil, vertical leve en tablet. [H] Hoy pinta contain: con escena aparecen bandas blancas de 13 px (tensión D-10 del especialista visual) → cover + focal para la variante escena.

Asset 1400×880 — lo que se ve según el ancho de pantalla (cover; anclaje por ventana) 1 1 · 1440 (289×208) (viewport 289×208) ve 1223×880 px del asset → recorte lateral 13% 2 2 · 768 (309×172) (viewport 309×172) ve 1400×779 px del asset → recorte vertical 11% 3 3 · 390 (150×172) (viewport 150×172) ve 767×880 px del asset → recorte lateral 45%

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Foto289×208309×172150×172
Cuerpoa la derechaa la derechaa la derecha (58 %)
Título16/700 ≤2 líneas13 px13 px
Chips≤3≤3ocultos

11 · Content rules — límites de copy

CampoLímiteRegla
Título-uso≤ 40 caracteres (FAIL > 46: el clamp corta a 390)Fórmula F1, uso con verbo
Familia≤ 28 + conteo automático
Chips2-3 · ≤ 14 caracteres (≤ 2 filas a 390)filtros reales → PLP filtrado

12 · Contrast & legibility — texto sobre media

  • Texto sobre blanco (no hay velo): n900 / n600 estándar del DS

13 · Asset specifications

PropiedadValor
A04 o A03escena 1400×880 con sujeto centrado (≤ 120 / ≤ 150 KB), o packshot 800×800 (≤ 60 / ≤ 100 KB)
Nombreesc_<slug>-med_16x10.jpg / cat_<slug>_1x1.jpg

14 · Accessibility

  • alt = uso; enlace único por tile

15 · Performance — entrega técnica

  • loading="lazy" (eager si trae arte), sin width/height hoy; original sin resize → deuda srcset

Do

  • Sujeto centrado que sobrevive el corte a 150 px de ancho

Don't

  • Escenas panorámicas con el producto en un extremo

Fuentes: catalogo.css:175-176, 214 · inventario 02 §S5 · D-16

T05

Tile de familia 1×1

Construido en el temaLanding · mosaico

El tile chico de la landing (336×208): packshot de la familia sobre blanco, título-uso de una línea, familia + conteo; bajo 1024 pierde el cintillo y el cuerpo baja bajo la foto.

1 · Purpose — para qué existe

Cubrir el resto del escaparate (6-8 tiles en total) con el render que ya existe: la tipografía carga el significado (D1).

2 · Use cases — cuándo usarlo

  • Para toda familia curada con ≥3 productos que no sea héroe ni medio

3 · Do not use when — cuándo no

  • Con escena (las escenas son solo héroe y medio)
  • Con títulos de 2 líneas (reserva 74 px)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Mediapackshot 1:1 contain, padding 8/8/74 (≥1024) · 8 (<1024), ×1.04A03
Viñetaradial navy 5 % (118% 88% at 50% 32%, transparente 0-56 %) sobre la media: la única viñeta del sistemasistema
Cintillo (velo blanco)bg 96 % → 92 % → 0 + backdrop-filter: blur(10px) saturate(1.15) + máscara 46 %; texto n900/n700; solo existe donde hay foto; en el sm <1024 el cuerpo vuelve a base opacasistema
Título-uso14/700 1 línea ≥1024; 13 px <1024 en cuerpo opaco≤ 36 caracteres
Familia + conteo12 px; es el enlacesistema
HovertranslateY(-2px) + e2 + borde n300; foto ×1.09 (.45 s); con reduced-motion sin transición y ×1.04sistema

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440336×208 · foto útil 320×126 → 126×1261.6:1A03 800×800
1024232×208 · 216×1261.1:1A03
768362×172 · cuerpo opaco bajo la foto (~90-110 px de foto)2.1:1A03sin cintillo
390173×1721:1A03sin cintillo

7 · Safe areas — zonas seguras

Como T02: packshot al 85-90 % del asset; a 390 se pinta a ~90 px.

8 · Focal point — punto focal

Producto entero centrado.

9 · Crop behavior — qué pasa entre ratios

Sin recorte (contain); solo escala 126 → ~90 px.

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Foto126×126 con cintillo~100 px, cuerpo opaco debajo~90 px, cuerpo opaco debajo
Título14/700 1 línea13 px13 px
AssetA03A03A03

11 · Content rules — límites de copy

CampoLímiteRegla
Título-uso≤ 40 caracteres (FAIL > 46); presupuesto visual 1 línea a ≥1024Fórmula F1 («Pídelo en voz alta»)
Familia≤ 28 + conteo automático

12 · Contrast & legibility — texto sobre media

  • Cintillo (≥1024) por receta; cuerpo opaco (<1024) sobre blanco

13 · Asset specifications

PropiedadValor
A03800×800 sobre blanco, ≤ 60 / ≤ 100 KB; un producto representativo de la FAMILIA (no del departamento)

14 · Accessibility

  • alt=""; enlace único

15 · Performance — entrega técnica

  • lazy; original sin resize; sin width/height (fila fija)

Do

  • Silueta legible a 90 px

Don't

  • Dos líneas de título
  • Escenas

Fuentes: catalogo.css:206-266 · 22 §4-6 · D-05

T06

Tile de tipo (sin foto)

Construido en el temaLanding/home · fallback

El tile sin foto: glifo del set propio sobre tinte y cuerpo opaco. Fallback honesto, no un hueco.

1 · Purpose — para qué existe

Que una familia sin landing_image «se lea elegida» (cap.28) en vez de vacía; nunca un gris ni un esqueleto.

2 · Use cases — cuándo usarlo

  • Automáticamente cuando la categoría no tiene imagen; también en el home (dtile--sinfoto)

3 · Do not use when — cuándo no

  • Como decisión de diseño para «variar» el mosaico: la foto siempre gana al placeholder (regla it.14 V1)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Glifoicono del set (24-grid, trazo 1.75) a 40 px, primary / primary-textsistema
Fondolanding: linear-gradient(158deg, cyan-tint, bg-subtle 72%); home: cuerpo opaco blancotensión: tercer uso del tinte y degradado sin función registrada (D-23) → aplanar a bg-subtle o enmendar
Cuerpoopaco, sin velo (no hay foto)sistema

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
todosmisma caja que el tile que sustituye (T02/T05)—sin asset

7 · Safe areas — zonas seguras

—

8 · Focal point — punto focal

—

9 · Crop behavior — qué pasa entre ratios

—

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Glifo40 px40 px40 px

11 · Content rules — límites de copy

CampoLímiteRegla
Títuloigual que el tile que sustituye

12 · Contrast & legibility — texto sobre media

  • Glifo primary 3.45:1 sobre blanco (decorativo-redundante: el texto porta la información)

13 · Asset specifications

PropiedadValor
Ningunoel glifo viene del sprite del tema

14 · Accessibility

  • Glifo aria-hidden; el nombre es el enlace

15 · Performance — entrega técnica

  • 0 KB de imagen

Do

  • Cargar la foto de categoría cuanto antes: 13 departamentos sin foto es lo primero que cambia la cara del sitio (manual §7)

Don't

  • Convertir el tile tipo en un tile decorativo permanente

Fuentes: catalogo.css:272-278 · home.css:229-232 · cap.28-29 · D-23 tensión 5

T07

Tile de campaña 7:8

Especificado, no construido— (DS §7; sin slot en C6)

El tile promocional 700×800 heredado del arte actual: está en el DS §7 pero no existe en el catálogo cerrado de C6 ni en el tema. No se produce.

1 · Purpose — para qué existe

Registrar el hueco para que nadie diseñe un tile 7:8 que no tiene dónde pintarse.

2 · Use cases — cuándo usarlo

  • Nunca, mientras no exista el slot (enmienda §12.6 con ficha completa)

3 · Do not use when — cuándo no

  • Como «tile de campaña» en el home (el home está cerrado y el mosaico es de departamentos)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
—sin anatomía definida

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
—700×800 (DS §7)7:8no se entregaX-6

7 · Safe areas — zonas seguras

—

8 · Focal point — punto focal

—

9 · Crop behavior — qué pasa entre ratios

—

10 · Responsive behavior — desktop → tablet → móvil

11 · Content rules — límites de copy

12 · Contrast & legibility — texto sobre media

—

13 · Asset specifications

PropiedadValor
—no se produce

14 · Accessibility

—

15 · Performance — entrega técnica

—

Do

—

Don't

  • Producir artes 7:8 «por si acaso»

Fuentes: DS §7 · C6 · X-6

T08

Miniaturas y chips de familia

Construido en el temaLanding «Todo en…», chips del home, drawer

La moneda blanca de 40 px con la imagen de categoría a 38 px: chips «Todo en…» de la landing, fila B del home, mega-menú. Texto siempre al lado, nunca encima.

1 · Purpose — para qué existe

Reconocer la familia en una lista densa por su silueta, sin gastar un tile.

2 · Use cases — cuándo usarlo

  • Listas densas de familias y chips de atajo

3 · Do not use when — cuándo no

  • Con imágenes que no sean packshot sobre blanco (una escena a 38 px es una mancha)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Moneda40 px, fondo blanco, aro n300 (cian 45 % sobre navy)sistema
Imagen38×38 contain padding 4 → 30 px útilesA03
Texto12-13 px al ladosistema

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
todos40 px moneda · 38 px imagen · ~30 px de producto1:1A03 800×800se sirve el ORIGINAL (hasta 2500×2500 de 632 KB) para 38 px → deuda de resize

7 · Safe areas — zonas seguras

El producto ocupa 60-80 % del A03: a 30 px solo sobrevive la silueta.

8 · Focal point — punto focal

centro

9 · Crop behavior — qué pasa entre ratios

ninguno (contain)

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Moneda404040

11 · Content rules — límites de copy

CampoLímiteRegla
Textonombre real de la familia

12 · Contrast & legibility — texto sobre media

  • Aro n300 decorativo; el texto adyacente porta la información

13 · Asset specifications

PropiedadValor
A03el mismo archivo; la silueta debe leerse a 30 px

14 · Accessibility

  • alt="", aria-hidden en la moneda; el chip es el enlace

15 · Performance — entrega técnica

  • loading="lazy", 38×38 declarados; 12 originales por landing para 38 px: deuda de srcset/resize (80/160)

Do

  • Elegir el representante con silueta clara

Don't

  • Cables enrollados o productos alargados que a 30 px son una línea

Fuentes: catalogo.css:411-417 · landing.phtml:130-144 · inventario 02 huecos 5

P01

Packshot principal `_x1`

Vive en el catálogo (dato)PLP, PDP, carruseles, feeds, OG

La foto de producto sobre blanco puro que alimenta todo: PLP, PDP, carruseles, moneda, feeds y OG. Es un DATO del catálogo (intocable): la guía no lo rediseña, lo mide y lo verifica.

1 · Purpose — para qué existe

Mostrar el producto real, entero y reconocible en cualquier talla, del zoom de 1600 px al buybar de 40 px, sin que el sistema tenga que recortar, escalar ni maquillar nada. «La imagen de este sitio es su fotografía de producto real» (DS §10): un solo archivo 1:1 resuelve los 28 image id del tema porque nunca se recorta.

2 · Use cases — cuándo usarlo

  • Siempre como image/small_image de cada SKU (la _x1): tarjeta, galería tile 0, carruseles, buybar, #juntos, sugeridos, feeds, og:image
  • Como cara de categoría bajada a 800×800 (P07) y en la moneda blanca de B02/T08 (E-29)
  • Packshots de terceros (Echo, Roku, Amazon) solo después de re-lienzar a la convención (E-10): re-lienzo sobre blanco, sin generar píxeles

3 · Do not use when — cuándo no

  • Como póster de video: solo es el fallback aceptado (WARNING, L-20) mientras no exista el fotograma real
  • Con fondo de color, escena, mesa o sombra «de estudio» (E-30): la calidez entra por A07-A10, nunca tintando el producto
  • Como PNG transparente en lugar del blanco (B-20): el sistema pinta lienzo blanco, no lo necesita, y el resize lo aplana
  • Con texto, sello, badge o cinta dibujados (E-19): las etiquetas son HTML (.corner)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Lienzo1200×1200 px (mín.), 1:1, sRGB 8 bits, fondo 255/255/255 en todo el perímetro; esquinas 5×5 = 255E-01 · PASS ≥99 % del perímetro ≥253
Productolado largo al 90 % (1080 px), aire 5 % en los dos lados apretados, centro del bbox 0.50/0.50 ±0.02E-02 · PASS 0.86-0.92 · WARNING 0.80-0.86 / 0.92-0.95 · FAIL <0.80
Salidas de cuadrosolo cable, cordón, mástil o cadena, por UN borde, con el cuerpo dentro y su aire ≥5 %E-03 · WARNING 2 bordes · FAIL cuerpo cortado
Ángulofrente o 3/4 alto (cámara 10-25° sobre el plano), verticales ±1°, cara con logo/controles a cámaraE-05
Luzuniforme, sin sombra de contacto (banda 8 % bajo el sujeto lum ≥246), altas luces recortadas ≤0.5 %, negros con textura (≤3 ≤3 %)E-06
Producto blancop95 del bbox ≤246 y silueta ≤240 junto al 255 del fondo (no se funde)E-07
Tratamientoninguno: sin viñeta, LUT, HDR, halo ni marca de agua; recorte mate ≤2 px sin fringeE-08, E-09
PantallasUI propia del producto o imagen neutra; nunca personas ajenas ni texto promocionalB-20 · WARNING wallpaper vivo >20 %
Kitsconjunto completo al 90 % del conjunto con el principal dominante (≥2× el área del accesorio)B-20, E §3.2
alt= nombre del producto en PDP tile 0, visor y og:image:alt; alt="" en tarjeta, carrusel y moneda (nombre adyacente)G-06

5 · Layout blueprint — plano técnico

P01 · A05 packshot `_x1` — lienzo de entrega 1200×1200 (1:1) convención medida en 34 packshots: 90 % · aire 5 % · centro 0.50 · sin sombra aire 5 % (60 px) — fondo 255 en todo el perímetro aire 5 % PRODUCTO: lado largo al 90 % (1080 px) · bbox centrado 0.50/0.50 ±0.02 verificación P03: sujeto x 10-90 % · y 15-90 % (badges y dots) focal 1200 px 1200 px Fondo #FFFFFF puro (perímetro ≥99 % con lum ≥253, esquinas 255/255/255, R−B ≤1): tarjeta, tile y moneda pintan el mismo blanco. Solo cable, cordón o mástil salen del cuadro, por UN borde, con el cuerpo dentro (E-03). Frente o 3/4 alto, verticales ±1°, logo a cámara (E-05). Sin sombra de contacto (banda de 8 % bajo el sujeto con lum ≥246), sin viñeta ni halo: la viñeta la pone el sistema en los tiles (E-06, E-08). Escala en pantalla: 1600 (zoom) · 605 (héroe PDP) · 233 (PLP) · 138 (carrusel 390) · 84 (moneda) · 40 (buybar) — por eso el 90 % no se negocia.

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440 · PLP233×233 (búsqueda sin aside 304) · lista 1601:1A05 1200×1200 → caché category_page_grid 480²480² = 2.06× a 233 ✓ · 1.58× a 304 (C-17 WARNING)
≥1440 · PDPhéroe 605 · tile 299 · única 560 · thumb 64 · zoom 175 %1:1medium 1000² · small 160² · large 1600²1000² = 1.65× en el héroe (WARNING C-17); el zoom exige nitidez real a 1600²
1280 / 1024PLP 193 / 189 · PDP héroe 534 / 392 · tile 263 / 1921:1mismos idsaside de facetas 260 desde 1024
768PLP 203 (3 col) · PDP héroe 488 · tile 2401:1mismos ids
<768 (390 / 360)PLP 153 / 138 · lista 112 · PDP tile 358 / 328 (carrusel 100 %)1:1mismos ids3.1× desde 480² en tarjeta; 2.8× desde 1000² en PDP
Carruseles y monedas (todos)194 (≥768) / 138 (390) · moneda 84 (≥1024) / 52 · buybar 40 · #juntos 56 · sugeridos 761:1ORIGINAL small_image sin resizehueco 4: hasta 2 MB para una caja de 40-194 px

7 · Safe areas — zonas seguras

Toda la imagen se ve siempre: 1:1 sin recorte en los 28 image id de view.xml (_keepAspectRatio + _keepFrame blanco) y en todos los slots (contain). La zona útil del producto es el cuadrado x 5 %→95 % · y 5 %→95 % (E-02). Verificación adicional para la tarjeta (P03): el sujeto vive en x 10-90 % · y 15-90 % para no quedar bajo los badges .corner (10/10, 1 fila ≈24 px = 10 % de la foto a 233) ni bajo los dots de la galería en tarjeta (pie ≈6 %); un producto que llena la esquina superior izquierda (cajas, monitores) queda bajo «OFERTA» en todos los anchos → WARNING C-05, y se resuelve en el badge, nunca retocando el packshot. En recortes circulares (moneda 108/76, chip 40, avatar 64) sobrevive el círculo inscrito: el 70 % central (C-13).

8 · Focal point — punto focal

El centro geométrico (0.50, 0.50): el producto entero es el sujeto y no hay re-encuadre por breakpoint, solo escala. Verificación: bbox del no-blanco (cualquier canal <245) → lado largo/1200 entre 0.86 y 0.92 y centro ±0.02 (Q2). En variantes de color el bbox es idéntico entre las _x1 (±1 %, E-31; medido ±3 % en aud-7840, B-17).

9 · Crop behavior — qué pasa entre ratios

No hay recorte en ningún consumidor: object-fit: contain en tarjeta, tile, moneda y galería; el resize nativo conserva el ratio y rellena con blanco (_keepFrame, fondo [255,255,255]), y _constrainOnly nunca agranda (un 750×750 legacy se sirve a 750: E-33 upscale no generativo, ≤1.6×). Lo que cambia es la escala: de 1600 px (zoom 175 %) a 40 px (buybar). Un packshot al 45 % «con aire generoso» pinta un router de 55 px a 122 y una mancha a 40. La tarjeta no escala al hover (cards.css e1); los tiles de categoría sí (×1.09), por eso la A03 topa en 92 %.

10 · Responsive behavior — desktop → tablet → móvil

El mismo archivo en todos los estados: el sistema cambia la caja, nunca el asset. Solo la galería del PDP cambia de gramática (collage → carrusel) y la tarjeta de columnas (4 → 3 → 2).

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Tarjeta PLP233 (1440) · 193 (1280) · 189 (1024)203153 / 138
Galería PDPhéroe 605-392 · tile 299-192héroe 488 · tile 240carrusel 358 (100 %)
Carrusel / #rel194 (original)194138
Moneda B02 (foto útil)845252
Focal / safe(50 %, 50 %) · x 5-95 %igualigual
AssetA05 → 480² / 1000² / 1600²mismosmismos

11 · Content rules — límites de copy

CampoLímiteRegla
alt= nombre del producto (h1) en PDP tile 0, visor y og:image:alt; alt="" en tarjeta, carrusel, carrito y moneda con el nombre adyacente como enlace (G-06)Nunca nombre de archivo, SKU ni «imagen de»; ≤125 caracteres
Texto en la imagen0 cadenas (E-19, G-21)Solo el texto físicamente impreso en el producto o su empaque; sin cotas (eso es _x3, L-12)
Etiquetas encima0 en el archivo; en tarjeta ≤2 (listado) / ≤3 (ficha) como HTML (D-21, I-30)El «-20 %» vive en la línea de precio («Ahorra $X (Y %)»), jamás sobre la foto
Nombre de archivo{sku}_x1.jpg (L-30)hoy baf-0890r_x1_200924_1.jpg: los sufijos de versión se toleran; el alta nueva usa el patrón limpio

12 · Contrast & legibility — texto sobre media

  • No lleva texto encima salvo los badges .corner (P03) y el velo «+N» (P04): sobre foto blanca, «Oferta» blanco/sale 4.92:1 ✓; .badge-new blanco sobre primary 3.45:1 ✗ → texto sobre primary-text (5.84) o navy (L-03, DEV-03)
  • Producto blanco vs fondo: p95 ≤246 y silueta ≤240 para que no se funda con el 255 (E-07: PASS ≤246 · WARNING 247-250 · FAIL >250)
  • Play de video 48 px: blanco sobre navy 70 % sobre foto blanca 5.43:1 ✓ (G-19)
  • Color fiel: neutros del producto R≈G≈B ±6 (B-20) y ±10 respecto al mismo punto físico en escenas (E-14)

13 · Asset specifications

PropiedadValor
A051200×1200 (mín.) · 1:1 · sRGB IEC61966-2.1 · máster TIFF/JPG q≥95; entrega JPG · fondo 255 · sin sombra, viñeta ni marca de agua · 1 fotograma
Formato que acepta el admin hoyjpg / jpeg / gif / png (Gallery/Upload.php:33-38); WebP y AVIF rechazados; sin validación de dimensiones; un GIF animado = video no autorizado (F-08: 1 fotograma)
Pipeline HOYresize nativo solo en PLP (category_page_grid 480²), galería en tarjeta, swatches, PDP (medium 1000² · small 160² · large 1600²) y og (1200²): mismo formato del original, JPEG q80, lienzo blanco; carruseles, mosaico, buybar, #juntos, sugeridos y moneda sirven el original tal cual
Pipeline OBJETIVOAVIF/WebP con fallback JPG + srcset/sizes por image id; techos del DS §7 por talla: thumb PLP ≤25 KB (contrato 40) · principal PDP ≤80 KB · zoom ≤180 KB · tile ≤120 KB — ningún techo AVIF se exige sin pipeline (X-5)
Peso HOYel original ES lo que se descarga en carruseles, buybar y monedas (hueco 4): entregar JPG q80-85 ≤80 KB (techo PDP del DS aplicado al original; WARNING ≤105 KB, +33 % de contrato) — hoy p50 111 KB, p90 291 KB, máx 2 018 KB; 4.9 % del catálogo a 2500×2500
Peso OBJETIVOAVIF/WebP: thumb ≤25 KB · PDP ≤80 KB · zoom ≤180 KB, con srcset 480/960 (tarjeta) y 1000/1600 (galería)
Nombre{sku}_x1.jpg; variantes de color: una _x1 por hijo (P06)
Datos que acompañannombre del producto (= alt), SKU, label de la toma («frente») para G-07

14 · Accessibility

  • alt = nombre del producto donde la foto es la única representación (PDP tile 0, visor, OG); alt="" + pcard-foto tabindex="-1" aria-hidden en tarjeta: un solo tab-stop por tarjeta (pcard-link) (G-06)
  • Ninguna <img> sin atributo alt (G-01); ninguna información vive solo en la foto: color, medidas y contenido van en la ficha (E-33)
  • Sin controles sobre la foto salvo la galería en tarjeta (:focus-within revela; flechas y bolitas con aria-label)

15 · Performance — entrega técnica

  • PLP: LCP = 1.ª tarjeta con fetchpriority="high" (imagenes-smoke.php vigila que sea una sola); 4 primeras eager, resto lazy; width/height 480 + aspect-ratio 1/1 → CLS 0
  • PDP: tile 0 fetchpriority="high" (LCP del PDP), 1-2 eager, ≥3 lazy; width/height 600
  • Deuda: decoding="async" ausente en PLP, carruseles y PDP; sin srcset; carruseles del home (hasta 32 tarjetas), #rel, buybar, #juntos y sugeridos sirven el original (hueco 4) → resize de small_image en esos slots
  • Galería en tarjeta on-demand (hover 120 ms / foco / IntersectionObserver en táctil), GET /catalogo/api/galeria ≤12 ids, max-age=86400, precarga solo la vecina
  • El peso del original importa aunque el PLP lo redimensione: es el mismo archivo que baja en el carrusel del home

Do

  • Entregar la _x1 medida: 90 %, centro 0.50, blanco 255, sin sombra, ≥1200²
  • Un solo archivo por SKU que sirva del zoom al buybar
  • Re-lienzar packshots de terceros a la convención antes de cargar
  • Nombre del producto como alt donde la foto está sola; vacío donde el nombre ya es el enlace

Don't

  • Sombra de contacto, reflejo de mesa, fondo gris o «flotando» con halo
  • Producto al 45 % «para que respire» o tocando dos bordes
  • PNG transparente, GIF animado, texto, sello o badge dentro del archivo
  • Subir 2500×2500 de 600 KB «por si acaso»: baja entero en cada carrusel

Art Direction Board — P01 (packshot `_x1`)

✓ Así sí (P01 tal cual llega)
Proyector Steren
aire 5 %fondo 255 · sin sombralado largo = 90 %
  • Lado largo al 90 % del lienzo, centrado; 5 % de aire en los lados apretados (medido: 30/34 packshots)
  • Blanco puro en todo el perímetro: el borde del archivo desaparece en tarjeta, tile y moneda
  • Luz uniforme: negros con textura, altas luces sin recortar, ninguna sombra de contacto
  • Frente o 3/4 alto, verticales a plomo, logo y controles hacia cámara
✕ Así no
viñeta en el archivosombra duraproducto al 42 %
  • Viñeta y fondo gris dentro del archivo: en la tarjeta blanca se ve el cuadro del JPG (E-08 FAIL)
  • Sombra dura y proyectada: lum <235 bajo el sujeto (E-06 FAIL); en la moneda navy flota como recorte
  • Producto al 42 % «con aire generoso»: a 122 px mide 51 px y a 40 px es una mancha (E-02 FAIL)
  • Halo de recorte y borde «sticker» (E-09)

Fuentes: DS §7 Imagen, §10 · 25 §6, §9.2 · 11 §1.4 · E-01…E-10, E-14, E-19, E-30, §3.1 A05 · B-20 · C-09, C-13, C-17 · G-06 · D-21, D-33 · inventario 02 §S9-S11, §2, §3, §6.4-6.7 · L-03, L-12, L-30

P02

Tomas secundarias `_x2.._x5`

Vive en el catálogo (dato)Galería PDP, galería en tarjeta

Las tomas que acompañan a la _x1 en la galería del PDP (y en la galería en tarjeta): detalle funcional, escala, contenido del paquete y uso, siempre sobre el mismo blanco. Hoy el 57 % del catálogo tiene una sola foto; la gramática del set es la regla nueva H-4.

1 · Purpose — para qué existe

Responder en la galería lo que el packshot frontal no responde: ¿qué puertos tiene?, ¿qué tan grande es?, ¿qué viene en la caja?, ¿cómo se ve encendido? Cada toma existe por una pregunta; cinco frentes girados 15° no son un set.

2 · Use cases — cuándo usarlo

  • En toda alta nueva: set mínimo exigible _x1 + _x2 + (_x3 o _x4); _x5 cuando el producto se enciende o se conecta (E §3.2)
  • Tomas de escala con mano real («en mano») para accesorios <8 cm: obligatoria
  • Cotas dibujadas únicamente como _x3 y con la fila correspondiente en specs (L-12)

3 · Do not use when — cuándo no

  • Como escena o lifestyle fuera del blanco (eso es A04, y vive en la landing, no en el PDP)
  • Empaque como _x1 o _x2: el empaque cierra el set, nunca lo abre
  • Cinco ángulos del mismo frente; capturas de app o UI inventada en pantallas
  • Manos generadas o retocadas (E-36): FAIL de la tanda completa

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
_x2 detalle funcionalreverso/lateral con puertos, compartimento, antena; el detalle llena el 90 %obligatoria en el set mínimo
_x3 escalaen mano real adulta (≤40 % del cuadro, sin joyería/esmalte, piel neutra) o cotas (E-33: Heebo n700 sobre blanco, flechas 1 px n400, ≤3 cotas)_x3 o _x4 obligatoria; en accesorios <8 cm la mano es obligatoria
_x4 contenido del paqueteproducto + cables/soportes/pilas incluidos, separación ≥4 % entre piezas, misma escala_x3 o _x4
_x5 en uso (sobre blanco)encendido: LEDs, pantalla con contenido real, luz RGB; conectado a un puerto real (tramo del aparato en cuadro)cuando se enciende o se conecta
Cables y conectores_x1 curva en S con los dos conectores · _x2 macro del conector · _x3 longitud por cotas o referencia (nunca regla ni moneda) · _x5 conectadoE §3.2
Kits_x1 conjunto al 90 % · _x2 pieza individual · _x3 detalle · _x4 accesorios · _x5 montadoE §3.2
Continuidadmisma sesión que la _x1: mismo esquema de luz (neutros ±6 entre tomas), mismo fondo, misma escala relativaE §3.1 A06 · B-17
label de galeríatoma canónica en el campo label de Magento («detalle del conector», «en mano», «contenido del paquete») → aria-label="Vista N de M: {toma}"G-07 · PASS ≥80 % con label
Orden en galeríafoto principal → videos → resto de fotos (galeria.phtml:72-76); el video nunca es el tile 0F-17

5 · Layout blueprint — plano técnico

P02 · A06 toma de escala «en mano» — lienzo 1200×1200 (1:1) misma luz, fondo y temperatura que la `_x1`; la mano ≤40 % del cuadro; el producto sigue al 60-90 % aire 5 % aire 5 % PRODUCTO 60-90 % del lado, entero, nítido, color fiel a la `_x1` (E-14) MANO real adulta ≤40 % del cuadro · sin joyería ni esmalte · piel neutra el detalle que importa llena el centro: legible a 64 px (thumb del visor) focal 1200 px 1200 px Todas las tomas cumplen E-01…E-09 como la `_x1`: fondo 255, sin sombra, sin viñeta. «Lifestyle moderado» = dentro del lienzo blanco (25 §6), nunca una escena. Set canónico (E-31): `_x2` detalle funcional · `_x3` escala (en mano o cotas) · `_x4` contenido del paquete (separación ≥4 %) · `_x5` en uso sobre blanco (encendido, conectado). Cotas dibujadas SOLO en `_x3` y solo si las medidas viven en la tabla de specs: Heebo n700 sobre blanco, ≤3 cotas, alt con las medidas (excepción E-3, L-12).

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440 · PDP collagetile 299 · (héroe 605 solo para la _x1) · thumb del visor 64×64 · zoom 175 %1:1A06 1200×1200 → medium 1000² · small 160² · large 1600²el 6.º tile queda bajo el velo «+N»: ahí va la toma menos importante
1280 / 1024tile 263 / 1921:1mismos idsn=4 → 4 columnas; n=5 el 4.º tile span 2
768tile 2401:1mismos ids1 columna
<768 (390)carrusel snap: cada toma 358×358 con contador «N / M»1:1mismos ids2.8× desde 1000²
Galería en tarjeta (PLP)233 / 203 / 153 al hover, foco o scroll táctil; tope 8 tomas1:1category_page_grid 480² vía /catalogo/api/galeriala toma se ve a 153 px sin zoom: el detalle debe leerse ahí

7 · Safe areas — zonas seguras

Como la _x1: cuadrado x 5-95 % · y 5-95 %, fondo 255 en el perímetro. El detalle relevante vive en el 50 % central porque su render más chico es la miniatura de 64 px del visor (#visor-strip) y la galería en tarjeta a 153 px: un puerto USB fotografiado «con contexto» al 30 % del cuadro mide 19 px en el thumb. En «contenido del paquete» ninguna pieza toca otra (separación ≥4 % del lado).

8 · Focal point — punto focal

Cada toma tiene su propio focal, siempre en el centro del lienzo: el conector en la macro, el puerto en el reverso, el producto (no la mano) en la de escala. Verificación: reducir a 64 px y a 153 px; la toma se reconoce sin leer el label (Q21: 3/3 revisores).

9 · Crop behavior — qué pasa entre ratios

Ninguno (contain 1:1 en tile, carrusel móvil, visor y thumb). El visor amplía al 175 % con pan nativo (pdp.css:117-119): la nitidez a 1600² es real, no upscale generativo (E-37c: Lanczos ≤1.6×, SSIM ≥0.95). Con n=6 el sexto tile queda entero bajo el velo navy 70 % «+N fotos»: esa foto es decorativa hasta que se abre el visor.

10 · Responsive behavior — desktop → tablet → móvil

Mismo asset en los tres estados. Lo que cambia es el orden de lectura: en desktop el collage muestra hasta 6 tomas a la vez (héroe + 5); en móvil se recorren una a una con snap y contador, sin velo ni hover-zoom.

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Toma en collage299 (tile) · 605 (héroe, solo _x1)240358 una a una
Thumb del visor646464 (tira bajo el slide)
Velo «+N»6.º tile6.º tiledesaparece (contador)
Galería en tarjetahover 120 ms / foco: flechas 28 + dots 6foco / IOIO + swipe ≥40 px, contador
AssetA06 → 1000² / 1600² / 160²mismosmismos

11 · Content rules — límites de copy

CampoLímiteRegla
label de la toma≤ 40 caracteres, del set canónico: frente · tres cuartos · detalle de [parte] · escala / en mano · contenido del paquete · en usoSe emite como aria-label="Vista N de M: {toma}" y como alt del slide del visor (G-07); sin label el sistema dice «Vista N de M» (estado actual: FAIL G-07)
Cotas (_x3)≤ 3 cotas · Heebo n700 sobre blanco · alt = «Medidas: 21 × 26 × 20,5 cm»Solo si las tres medidas viven en la tabla de specs (E-33, excepción E-3); sin fila en specs = FAIL
Texto en la imagen0 salvo las cotas de _x3 y lo impreso en producto/empaqueE-19
Nombre de archivo{sku}_x2.jpg … {sku}_x5.jpg (L-30)el sufijo dice la posición, no la toma: la toma va en label

12 · Contrast & legibility — texto sobre media

  • Igual que P01: nada de texto sobre la toma salvo el velo «+N» (navy 70 % → 5.43:1 ✓ con blanco) en el 6.º tile y el play 48 px si hay video
  • Cotas de _x3: n700 sobre blanco 9.7:1 (Heebo 700) — la única tipografía admitida dentro de una imagen de producto
  • Producto blanco: E-07 (p95 ≤246); mano y producto en la misma temperatura (neutros ±6)

13 · Asset specifications

PropiedadValor
A061200×1200 · 1:1 · sRGB · fondo 255 · mismo esquema de luz que la _x1 · JPG · 1 fotograma
Set mínimo al alta_x1 + _x2 + (_x3 o _x4); _x5 si se enciende/conecta (Q23: PASS completo · WARNING falta una · FAIL 5 frentes)
Formato que acepta el admin hoyjpg / jpeg / gif / png (Gallery/Upload.php:33-38); WebP y AVIF rechazados; sin validación de dimensiones; un GIF animado = video no autorizado (F-08: 1 fotograma)
Pipeline HOYresize nativo solo en PLP (category_page_grid 480²), galería en tarjeta, swatches, PDP (medium 1000² · small 160² · large 1600²) y og (1200²): mismo formato del original, JPEG q80, lienzo blanco; carruseles, mosaico, buybar, #juntos, sugeridos y moneda sirven el original tal cual
Pipeline OBJETIVOAVIF/WebP con fallback JPG + srcset/sizes por image id; techos del DS §7 por talla: thumb PLP ≤25 KB (contrato 40) · principal PDP ≤80 KB · zoom ≤180 KB · tile ≤120 KB — ningún techo AVIF se exige sin pipeline (X-5)
PesoHOY JPG ≤80 KB por toma (techo PDP; el original baja entero en la galería en tarjeta si el hover lo pide) · OBJETIVO AVIF ≤80 KB PDP / ≤180 KB zoom
Nombre{sku}_x2.jpg … _x5.jpg; variantes de color comparten _x2.._x5 del modelo (P06)
Declaración_retoque.csv + original de cámara para la toma «en mano» (E-38): una mano generada es FAIL de la tanda

14 · Accessibility

  • Tile 0 alt = nombre; tiles 1..N aria-label="Vista N de M: {toma}" con el label de galería (G-07); miniaturas del visor <button><img alt=""> → añadir aria-label="Vista N: toma"
  • Las cotas de _x3 se repiten como texto en specs y en el alt: la información nunca vive solo en la imagen (1.4.5)
  • Galería en tarjeta: bolitas aria-label="Foto N de M", flechas aria-label; hit-area de las bolitas 6×16 → WARNING G-47 (fix: padding a 24×24)

15 · Performance — entrega técnica

  • Tiles 1-2 eager, ≥3 lazy (width/height 600); visor lazy salvo el actual + precarga de vecinos (pdp.js:422-424)
  • Galería en tarjeta: URLs a demanda (/catalogo/api/galeria, 12 ids, 120/min por IP), redimensionadas a 480²; stSklReset al cambiar src
  • Sin srcset ni decoding="async" (deuda); CLS 0 por aspect-ratio

Do

  • Una pregunta por toma: puertos, tamaño, contenido, encendido
  • Misma sesión, misma luz, mismo blanco que la _x1
  • Mano real solo como referencia de escala, ≤40 % del cuadro
  • label de la toma en la galería de Magento para que el visor la nombre

Don't

  • Cinco frentes; empaque como primera toma
  • Lifestyle fuera del blanco, mesas, texturas
  • Cotas sin fila en specs o en cualquier toma que no sea _x3
  • Mano generada, retocada o con joyería

Fuentes: 25 §6 · E-31…E-33, E §3.1 A06, §3.2 · B-20 (set canónico), B-17 · G-07, G-47 · F-17 · inventario 02 §S9 (galería en tarjeta), §S11 · expediente 01 L143 (57 % = 1 foto) · L-12 / excepción E-3 · H-04 (cap.01)

P03

Tarjeta de producto

Construido en el temaPLP, carruseles, carrito

La unidad de la PLP, los carruseles y el carrito: packshot 1:1 contain sobre blanco, badges de texto en la esquina, nombre-enlace debajo y galería en tarjeta a demanda. Lo único construido que la guía verifica sobre el packshot (dato).

1 · Purpose — para qué existe

Que el producto se reconozca y se compare en una rejilla de 2 a 4 columnas sin abrir la ficha: la foto es la mitad del alto de la tarjeta y la única parte que no es texto. Es la imagen LCP de toda PLP (primera tarjeta).

2 · Use cases — cuándo usarlo

  • PLP (rejilla y vista lista), búsqueda, carruseles del home (favoritos, bandas de categoría), #rel del PDP, sugeridos del carrito
  • Con galería en tarjeta cuando el producto tiene ≥2 fotos (data-gal, tope 8)
  • Con etiquetas de texto: «Oferta» + ≤1 en listado (etiqueta_campana, «Por tiempo limitado» + countdown, «Nuevo», «Outlet», «Solo en línea»)

3 · Do not use when — cuándo no

  • Con video: el listado NUNCA muestra video (system.xml:120)
  • Con badge gráfico, sello, cinta diagonal o PNG sobre la foto (D-21); con % o $ en la etiqueta (I-30)
  • Con fondos de color, escena o lifestyle en la foto (E-30)
  • Con el packshot como enlace propio: el foco es uno, el nombre (C-24)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Caja.pcard borde 1 px n300, radio 8, padding 12 (8 <768), columna flex; .img-wrap img { aspect-ratio 1/1; object-fit: contain }sistema · DS §3 (bordes > sombras; e1 solo al hover)
Fotocategory_page_grid 480×480 JPG q80 lienzo blanco; width/height 480; sin escala al hoverA05 vía resize · alt=""
Badges.corner { top/left/right 10; flex-wrap }: «Oferta» (sale/blanco) primero + máx 1 etiqueta más (list.phtml:143-152); 12/600, radio 4, padding 2 8≤2 listado · ≤3 ficha · 1 sobre la foto en <768 (L-25)
Galería en tarjetadata-gal-wrap data-pid data-gal: URLs por /catalogo/api/galeria (480²); hover sostenido 120 ms / foco / IO táctil; flechas 28 px .gal-nav (solo hover), bolitas 6 px .gal-dot (activa 18 primary), contador en <768; swipe ≥40 px; stSklResetsistema · tope 8
Nombreenlace pcard-link bajo la foto: el único tab-stop; la foto es pcard-foto tabindex="-1" aria-hiddensistema
Precio y descuentotachado n500 + «Ahorra $X (Y %)» sale 13/600 en el cuerpo; nunca un % sobre la fotoD-35
Swatchespastillas de color sólido 28 px bajo el nombre (P06); cambiar de color cambia la foto ($sel['imagen'], 480²)sistema
Hoverbox-shadow: e1 en la tarjeta; sin transform ni zoom de imagensistema
Sin imagenplaceholder nativo Magento_Catalog::images/product/placeholder/small_image.jpg (no configurado); carrusel: src=""sistema · «los estados no mienten» pide un placeholder mudo del tema (deuda)

5 · Layout blueprint — plano técnico

P03 · Tarjeta de producto — caja de foto 233×233 a 1440 (4 columnas, aside 260) packshot 480² contain · badges `.corner` 10/10 · dots de la galería al pie BADGES .corner 10/10 — 1 fila ≈24 px (10 %): «Oferta» + ≤1 packshot: el 90 % del archivo cae en x 5-95 % SUJETO x 10-90 % · y 15-90 % (fuera de badges y dots) dots 6 px (activa 18) — solo con galería flecha 28 flecha 28 focal 233 px 233 px La tarjeta no recorta ni escala la foto (contain, sin zoom al hover): lo único que se le monta encima son los badges y, con galería, los controles. A 153 px (390) dos badges envuelven a 2 filas = 62 px = 40 % de la foto → L-25: 1 badge sobre la foto en <768, el segundo al cuerpo (DEV-15). Un producto que llena la esquina superior izquierda queda bajo «OFERTA» en todos los anchos: WARNING C-05 — el packshot es dato; se corrige el badge, no la foto.

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440 (y 1920)foto 233×233 · búsqueda sin aside 304 · lista 1601:1A05 → 480² caché (JPG q80)4 columnas + aside 260; 480² = 2.06× ✓ (búsqueda 1.58×: C-17 WARNING)
12801931:1480²4 columnas
10241891:1480²3 columnas + aside 260 desde 1024
7682031:1480²3 columnas, gap 24; dos badges caben en una fila (≈150 de 183)
<768 (390 / 360)153 / 138 · lista 1121:1480²2 columnas gap 16, padding 8; 3.1×; 1 badge sobre la foto
Carrusel (favoritos, bandas, #rel)194 (≥768, track 220) / 138 (390, track min(40vw,240) = 156)1:1ORIGINAL small_imagesin resize (hueco 4): hasta 2 MB por tarjeta; solo «Oferta» en .corner

7 · Safe areas — zonas seguras

Sobre la foto de 233 px: los badges ocupan la franja y 4-14 % (10 px de margen + 24 px de fila) desde x 4 %; los dots de la galería el pie y 92-98 % al centro; las flechas 28 px a media altura en los bordes (solo hover). El sujeto del packshot debe quedar en x 10-90 % · y 15-90 % (C §3.17) — se verifica, no se retoca: el packshot es dato. En <768 la fila de badges mide 24 de 153 px (16 %) y con dos badges envuelve a 62 px (40 %): por eso solo uno va sobre la foto (L-25, DEV-15). Vista lista (112/160 px): mismos badges, con salto de línea (D-21).

8 · Focal point — punto focal

El centro de la foto (50 %, 52 %): producto entero, contenido. No hay re-encuadre por breakpoint ni por vista; solo cambia la caja (233 → 153) y el número de columnas. Verificación: a 138 px (360) el producto mide ≥48 px (C-09: cualquier packshot al 90 % pasa; ≥35 % del cuadro basta).

9 · Crop behavior — qué pasa entre ratios

Ninguno: aspect-ratio 1/1 + contain + resize con lienzo blanco. Lo que se pierde entre estados no es foto sino espacio: a 153 px con dos badges, el 40 % superior de la foto queda bajo pastillas (C-18) — el sistema debe mover la segunda al cuerpo. Sin zoom al hover (a diferencia de los tiles): el 90 % del packshot no corre riesgo de tocar bordes.

10 · Responsive behavior — desktop → tablet → móvil

Desktop 1440 (4 col) 2 badges · 1 fila safe 233×233 • 480² = 2.06× • Oferta + 1 badge • flechas 28 solo al hover Tablet 768 (3 col) 2 badges · 1 fila safe 203×203 • 2 badges ≈150 px caben en 183 • sin flechas (táctil) Móvil 390 (2 col) 1 badge · 1 fila safe 153×153 • 3.1× desde 480² • 2.º badge al cuerpo (L-25) • contador en vez de dots

Permanece: 1:1, contain, badges arriba-izquierda, nombre como único enlace. Cambia: 4 → 3 → 2 columnas; carrusel 220 → 156 px («dos tarjetas + asomo»). Se mueve: el 2.º badge a fila nueva (<768) → al cuerpo (L-25). Desaparece: flechas de la galería en táctil (quedan swipe + contador). Se recorta: nada.

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Foto233 (búsqueda 304) · 193 · 189203153 / 138
Badges sobre la foto≤2 en 1 fila (≈24 px)≤2 en 1 fila1 (el 2.º al cuerpo)
Galería en tarjetahover 120 ms / foco: flechas 28 + dotsfoco / IO: dotsIO + swipe: contador
Carrusel194 (track 220), flechas 44 ≥1024194138 (track 156)
Padding de tarjeta12128
Asset480² caché (carrusel: original)igualigual

11 · Content rules — límites de copy

CampoLímiteRegla
Etiquetas≤ 2 en listado contando «Oferta» (siempre primero) · ≤ 3 en ficha · 1 sobre la foto en <768 (L-25)Solo texto en .corner; prioridad y cupo los fija Etiquetas.php; nunca sello, cinta ni PNG (D-21, I-30)
etiqueta_campana≤ 16 caracteres · sin % ni $«Por tiempo limitado» (19) es la fija más larga y siempre va con su «Termina en…» (I-25); se retira al vencer
Nombre del productocampo del catálogo; es el enlace (pcard-link)El alt de la foto es "" porque el nombre está adyacente (G-06)
Descuentotachado + «Ahorra $X (Y %)» en el cuerpoNunca un segundo precio mudo ni un % sobre la foto (D-35)
Altalt="" en rejilla, carrusel y carritoFAIL si alt="" sin nombre adyacente (caso 24 §2.3)

12 · Contrast & legibility — texto sobre media

  • Badge «Oferta» blanco sobre sale 4.92:1 ✓ sobre la tarjeta blanca (la foto es blanca detrás)
  • .badge-new blanco sobre primary 3.45:1 ✗ → texto primary-text 5.84:1 o navy (L-03, DEV-03 steren.css:479)
  • «Por tiempo limitado» blanco/buy + aro: solo sobre tarjeta blanca (4.31 sobre bg-subtle ✗, D-33); «Solo en línea» cyan-tint/primary-text 5.29 ✓; Outlet navy/blanco ✓
  • Dots de la galería: activa 18 px primary sobre blanco (decorativa, contador en táctil); flechas 28 px sobre círculo blanco
  • Sin velo ni texto sobre la foto: no hay nada que medir con arte oscuro

13 · Asset specifications

PropiedadValor
FuenteA05 _x1 del catálogo (+ _x2.._x5 para la galería en tarjeta); el sistema pide category_page_grid 480×480
Formato que acepta el admin hoyjpg / jpeg / gif / png (Gallery/Upload.php:33-38); WebP y AVIF rechazados; sin validación de dimensiones; un GIF animado = video no autorizado (F-08: 1 fotograma)
Pipeline HOYresize nativo solo en PLP (category_page_grid 480²), galería en tarjeta, swatches, PDP (medium 1000² · small 160² · large 1600²) y og (1200²): mismo formato del original, JPEG q80, lienzo blanco; carruseles, mosaico, buybar, #juntos, sugeridos y moneda sirven el original tal cual
Pipeline OBJETIVOAVIF/WebP con fallback JPG + srcset/sizes por image id; techos del DS §7 por talla: thumb PLP ≤25 KB (contrato 40) · principal PDP ≤80 KB · zoom ≤180 KB · tile ≤120 KB — ningún techo AVIF se exige sin pipeline (X-5)
Peso HOYPLP: 480² JPG q80 generado por Magento (el peso lo fija el resize); carruseles: el original (p50 111 KB, p90 291 KB) → entregar _x1 ≤80 KB
Peso OBJETIVOthumb ≤25 KB (contrato 40) en AVIF/WebP + srcset 480/960 (2× de 233 = 466; búsqueda 304 pide 608 → 960)
Nombre{sku}_x1.jpg (L-30)
category_page_list480² declarado en view.xml:13-16 sin consumidor: la vista lista reutiliza category_page_grid (hueco 19)

14 · Accessibility

  • <img alt=""> + pcard-foto tabindex="-1" aria-hidden; pcard-link con el nombre = único tab-stop (G-06, C-24); ring alrededor del texto, no de la foto
  • Galería en tarjeta revela con :focus-within; flechas aria-label, bolitas aria-label="Foto N de M"; hit-area 6×16 → WARNING G-47 (fix: padding a 24×24, visual intacto)
  • Badges = texto real (1.4.5); «Por tiempo limitado» acoplado a su countdown; dots sin transition con reduced-motion
  • Swatches 28 px: legal (≥24) pero bajo el token 44 → WARNING G-48; nombre del color como texto/aria-label (1.4.1)

15 · Performance — entrega técnica

  • LCP de la PLP = 1.ª tarjeta: fetchpriority="high" solo en ella (imagenes-smoke.php:84-99), 4 primeras eager, resto lazy; reserva <template id="plp-reserva"> siempre lazy
  • width/height 480 + aspect-ratio 1/1 → CLS 0; content-visibility: auto; contain-intrinsic-size: auto 420px por tarjeta
  • Galería en tarjeta on-demand: nada se pide hasta hover/foco/IO; coalescencia 60 ms; precarga solo la vecina; Cache-Control: public, max-age=86400
  • Deuda: decoding="async" ausente; sin srcset; carruseles del home (hasta 32 tarjetas) y #rel sirven originales (hueco 4)
  • Con color preseleccionado la foto sigue siendo 480² (Variantes.php:321): sin coste extra

Do

  • Packshot al 90 % sobre blanco, tal cual; etiquetas como texto en .corner
  • Escala óptica igualada entre vecinos (E-04 ≤0.12)
  • Un badge sobre la foto en móvil; el resto al cuerpo
  • label de galería en las tomas para que la galería en tarjeta las nombre

Don't

  • Sello «-20 %», cinta, PNG o cualquier gráfico sobre la foto
  • Tres pastillas en listado; % o $ en la etiqueta
  • Fondo de color, sombra o texto dentro del packshot
  • Zoom o velo sobre la foto de tarjeta (no existen en el sistema)

Art Direction Board — P03 (tarjeta de producto en PLP)

✓ Así sí
OFERTACámara Wi-Fi Full HD con visión nocturna
Cámara Wi-Fi Full HD con visión nocturna
SKU: CCTV-203
$899.00$699.00
● En stock
Agregar al carrito
Android TV Box 4K con control por voz
Android TV Box 4K con control por voz
SKU: INTV-1000
$1,299.00
● En stock
Agregar al carrito
1 badge en la esquina 10/10packshot al 90 %: misma escala óptica
  • Packshot tal cual, sobre el mismo blanco de la tarjeta; el producto se lee entero a 233 y a 153 px
  • Escala coherente entre vecinos: la ocupación difiere ≤0.12 (E-04)
  • Una etiqueta de texto en `.corner`; el descuento vive en la línea de precio (tachado + «Ahorra»)
  • Nada encima de la foto: ni velo, ni texto, ni sello
✕ Así no
OFERTANUEVOPOR TIEMPO LIMITADO
-20%OFF
Cámara Wi-Fi Full HD
SKU: CCTV-203
$699.00
● En stock
Agregar al carrito
¡NUEVO!
Android TV Box 4K
SKU: INTV-1000
$1,299.00
● En stock
Agregar al carrito
3 badges en 2 filas: 40 % de la fotopackshot al 45 %fondo de color + sombra + texto
  • Packshot al 45 % «con aire generoso»: a 153 px el producto mide 69 px y las etiquetas lo tapan
  • Tercera pastilla y dos filas de badges (FAIL D-21 / L-25); sello «-20 %» con outline: el % va en la línea de precio (D-35)
  • Fondo de color, sombra dura y «¡NUEVO!» quemado en la foto (E-30, E-19): no se traduce, no se lee, no se recorta
  • Escala rota entre vecinos (E-04 FAIL)

Fuentes: cards.css:10-80, 172-214 · catalogo.css:105-108, 457, 619-738 · list.phtml:128-167, 259-261 · galeria-tarjeta.js · GaleriaTarjeta.php · Galeria.php · steren.css:477-494 · DS §3, §5 · cap.27.3 · C-05, C-09, C-18, C-24, §3.17 · D-21, D-33, D-35 · E-04, E-30 · G-06, G-47, G-48 · I-25, I-30 · L-03, L-25 · inventario 02 §S9, §S10, §S21

P04

Galería del PDP + visor

Construido en el temaPDP

La galería del PDP: collage de héroe 2×2 + tiles 1:1 (desktop/tablet) que en móvil se vuelve carrusel con snap y contador, y un visor a pantalla completa con zoom 175 % y tira de miniaturas de 64 px. Consume P01/P02 (dato) en tres tallas del resize nativo; el único lugar del sitio donde una foto de producto se ve a 1600 px.

1 · Purpose — para qué existe

Que el visitante vea el producto entero a 605 px sin abrir nada, reconozca de un vistazo cuántas tomas hay (collage) y llegue al detalle real (visor + zoom) con dos gestos. Es la imagen LCP del PDP (tile 0 con fetchpriority="high").

2 · Use cases — cuándo usarlo

  • En todo PDP: foto única (.gal-solo, el caso normal: 57 % del catálogo tiene 1 foto) o collage de 2 a 6 ítems (data-n), con velo «+N» a partir de 6
  • Con el video de producto como tile 1 (P05), justo detrás de la foto principal
  • Con label de galería en cada toma para que el visor y el lector la nombren («Vista 3 de 5: detalle del conector», G-07)

3 · Do not use when — cuándo no

  • Con fotos fuera de la convención P01/P02 (escena, fondo de color, sombra): el collage pinta blanco alrededor y el tile «se ve con marco» (E-30)
  • Con el video como tile 0 o en el listado (F-17; system.xml:120)
  • Con más de 6 ítems visibles: el 7.º en adelante viven solo en el visor (el velo «+N» lo anuncia); el orden lo decide la posición de la galería, no el diseño
  • Con un póster de video gris «VIDEO» (md5 5e30bff8…): FAIL (L-20)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Collage.gal-collage grid gap 8, 3 columnas (data-n=2 → 2; data-n=4 → 4; data-n=5 → 4.º tile span 2); role="group" aria-label="Galería del producto — N elementos"sistema
Héroetile 0 = _x1 con grid-column 1/3; grid-row 1/3 (n=3,5,6) o 1/4 × 1/4 (n=4); 605 px a 1440; fetchpriority="high", alt = nombreA05 vía medium 1000²
Tilebutton.gal-tile aspect-ratio 1/1, borde 1 n200, radio 8, blanco, cursor: zoom-in; <img src="{medium}" width="600" height="600" object-fit: contain>; data-ixA05/A06 vía medium 1000²
Foto única.gal-tile.gal-solo (.main-img img { aspect-ratio 1/1; contain; max-height: 560px })sistema
Velo «+N».gal-mas-velo navy 70 % sobre el 6.º tile entero (data-plus): «+N fotos / videos / más»; desaparece <768sistema · 5.43:1
Play.gal-play 48 px (#i-play) centrado en el tile de video (gal-tile-video)P05
Contador móvil.gal-cont «1 / N» en pastilla navy .82 abajo a la derecha del slide (12.1:1 medido, cap.17)sistema · <768
Visor.drawer.visor a todo lo ancho: stage padding 16 72 (16 en <768, flechas 44 ocultas), pista #visor-scroll con slides flex 0 0 100% + scroll-snap; slide <img src="{full || src}" alt="{nombre}"> (lazy salvo el actual, precarga de vecinos); zoom .zoomed img { width: 175% } con pan por scroll nativo; tira #visor-strip de <button><img thumb 64×64 alt=""> (borde 1 n300 · activo 2 primary-text); Esc, ←/→, Home/End, trampa de Tab, foco devuelto al cerrarsistema · large 1600² · small 160²
Isla de datos#data-galeria {nombre, media:[{t, src, thumb, full, embed, archivo, prov, title}], video}sistema
Hover.gal-tile img { transition: transform 200ms ease-out } → scale(1.03); reduced-motion lo anula; scroll del visor smooth salvo reduced-motionsistema
alt / nombre accesibletile 0 alt = nombre del producto (= h1); tiles 1..N aria-label="Vista N de M: {toma}" con el label de galería (hoy «Vista N de M» sin toma: FAIL G-07)G-06 · G-07

5 · Layout blueprint — plano técnico

P04 · Collage de la galería del PDP — columna 912×912 a 1440 (héroe 605 + 5 tiles de 299, gap 8) n=6: el 6.º tile lleva el velo «+N» HÉROE 605 · tile 0 = `_x1` · fetchpriority=high packshot contain 90 % = 545 px · 1000² = 1.65× (C-17) tile 1 · video (P05) · eager póster: sujeto x/y 15-85 % play 48 tile 2 · 299 — eager tile 3 · 299 — lazy tile 4 · 299 — lazy 6.º: velo «+N» navy .70 focal 912 px 912 px Héroe = tile 0 con `grid-column 1/3; grid-row 1/3` (n=3,5,6); el 6.º tile lleva el velo «+N fotos» navy 70 % sobre el tile ENTERO. El sistema pinta `_x1`/`_x2.._x5` `contain` sobre blanco: el packshot sobre blanco NO necesita safe area propia (C §3.18). Las únicas reglas de composición son las del 6.º tile (íntegro bajo el velo: ahí va la toma menos importante) y las del póster de video (P05). Orden fijo (F-17): foto principal → videos → resto de fotos. El video nunca es el tile 0 (LCP) ni aparece en el listado. Fuentes: `src` = medium 1000² · `thumb` = small 160² · `full` = large 1600² (view.xml:18-29). El héroe de 605 recibe 1000² = 1.65× (WARNING C-17); el zoom del visor (175 %) exige nitidez real a 1600² (E-37c: sin upscale generativo). n=2 → 2 columnas; n=4 → 4 columnas con héroe 1/4 × 1/4; n=5 → el 4.º tile `span 2`; foto única (57 % del catálogo) → `.gal-solo` `max-height 560`.

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440 (y 1920)columna 912 · tile 299 · héroe 605 · única 560 · thumb 64 · zoom 175 %1:1A05/A06 1200×1200 → medium 1000² · small 160² · large 1600²1000² = 1.65× en el héroe (WARNING C-17); 160² = 2.5× en el thumb; 1600² solo en el visor
1280columna 805 · tile 263 · héroe 5341:1mismos ids1000² = 1.87× en el héroe
1024columna 592 (la columna de compra pide 360) · tile 192 · héroe 3921:1mismos ids2.55× en el héroe
768columna 736 (1 columna) · tile 240 · héroe 488 · única 5601:1mismos ids2.05×
<768 (390 / 360)carrusel snap: cada foto 358 / 328 (100 %) · única 358 · contador navy .821:1mismos ids2.8× desde 1000²; sin velo, sin hover
Visor (todos)slide 100 % (stage −144 px ≥768; −32 <768) · zoom 175 % · thumbs 64×641:1large 1600² / small 160²un 750×750 legacy se sirve a 750 (_constrainOnly): en el zoom se nota → E-33 (upscale no generativo ≤1.6×)

7 · Safe areas — zonas seguras

El packshot sobre blanco no necesita zona segura propia (C §3.18): no hay texto ni control sobre la foto salvo tres casos, y los tres son del sistema. (1) 6.º tile: queda íntegro bajo el velo navy 70 % — esa foto es decorativa hasta abrir el visor, así que en la posición 6 va la toma menos informativa (nunca el detalle que responde una pregunta). (2) Póster de video (P05): el play de 48 px cubre el 16 % central a 299 px y el 13 % a 358: el sujeto vive en x 15-85 % · y 15-85 % y el centro queda sin texto ni detalle clave. (3) Contador móvil: pastilla en x 82-97 % · y 92-98 % del slide; con el packshot al 90 % centrado esa esquina es blanco (el 5 % de aire más el borde del producto), por eso la convención P01 no se negocia. Además, cada toma secundaria debe leerse en la miniatura de 64 px del visor: el detalle relevante en el 50 % central (P02).

8 · Focal point — punto focal

El centro (0.50, 0.50) de cada 1:1: el producto entero en la _x1, el detalle en cada _x2.._x5. El collage no re-encuadra nada: el focal de la galería es el héroe (tile 0) y el sistema solo cambia la caja (605 → 358) y la gramática (collage → carrusel). Verificación: a 1440, 768 y 390 el producto del tile 0 se ve entero y mide ≥ 48 px en su render más chico (C-09: cualquier packshot al 90 % pasa: 322 px a 358); en el visor al 175 % la arista del producto sigue nítida (1600² real).

9 · Crop behavior — qué pasa entre ratios

Ninguno: contain 1:1 en tile, slide, visor y thumb; el resize nativo conserva el ratio y rellena con blanco (_keepFrame) y nunca agranda (_constrainOnly). Lo que cambia entre estados es la escala (605 → 488 → 358 el héroe; 299 → 240 → 358 los tiles: en móvil las tomas crecen) y la lectura (6 a la vez → una a una). El zoom del visor (175 % con pan nativo) es el único lugar donde se ve el archivo de 1600²: un legacy de 750 px se sirve a 750 y se nota; la salida es re-fotografiar o el upscale no generativo de E-37c (Lanczos ≤ 1.6×, SSIM ≥ 0.95), nunca IA.

10 · Responsive behavior — desktop → tablet → móvil

Desktop 1440 · collage 912 (héroe 605 + tiles 299) héroe 605 299 · P05 play 299 299 299 6.º: velo «+N» .70 912×912 • sticky top 120 + 76 • hover zoom 1.03 (200 ms) • 1280: 534/263 · 1024: 392/192 Tablet 768 · collage 736 (héroe 488 + tiles 240) héroe 488 240 240 240 240 6.º: velo «+N» 736×736 • 1 columna (la galería ya no es sticky junto a la compra) • misma rejilla, tiles 240 • foto única 560 Móvil 390 · carrusel snap (cada foto 358) slide 100 % = 358 (328 a 360) póster safe 15-85 play 48 = 13 % contador 358×358 • sin velo «+N» ni hover-zoom contador «1 / N» pastilla • navy .82 (x 82-97 · y 92-98) swipe ≥ 40 px; 2.8× desde • 1000²

Permanece: 1:1 contain, orden foto → videos → resto, alt/aria-label, visor con zoom y tira. Cambia: columna 912 → 736 → 358; collage de 3 columnas → carrusel con snap. Se mueve: la galería deja de ser sticky junto a la compra (<1024, 1 columna). Desaparece: velo «+N» y hover-zoom en <768 (los sustituye el contador); flechas del visor en <768 (swipe + snap). Se recorta: nada.

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Gramáticacollage 3 columnas (héroe 2×2)collage 3 columnascarrusel snap, una foto por slide
Héroe / tile605 / 299 (1440) · 534 / 263 · 392 / 192488 / 240358 (328 a 360): cada foto es «héroe»
Velo «+N»6.º tile, navy .706.º tiledesaparece → contador «1 / N» navy .82
Hoverscale(1.03) 200 msscale(1.03) (sin hover táctil)ninguno
Visorstage −144, flechas 44 (hit 60), cerrar 44igualstage −32, flechas ocultas, swipe + snap
Thumb del visor646464 (tira bajo el slide)
Assetmedium 1000² · small 160² · large 1600²mismosmismos

11 · Content rules — límites de copy

CampoLímiteRegla
alt del tile 0= nombre del producto (h1) · ≤ 125 caracteresTambién alt del slide del visor y og:image:alt (G-06); nunca nombre de archivo, SKU ni «imagen de»
aria-label de los tiles 1..N«Vista N de M: {toma}» con el label de galería (≤ 40 caracteres, set canónico: frente · tres cuartos · detalle de [parte] · escala / en mano · contenido del paquete · en uso)Sin label el sistema dice «Vista N de M» (estado actual: FAIL G-07 en el 100 %); PASS ≥ 80 % con toma en 20 PDP muestreados
Velo «+N»«+N fotos» / «+N videos» / «+N más» (automático)N = ítems no visibles; nunca se teclea
Contador«1 / N» (automático, aria-live en el visor)—
Título del videodescriptivo de la acción (G-31)Viaja en #data-galeria.media[].title y en el <b> del visor; ver P05
Texto en la foto0 cadenas salvo cotas de _x3 (excepción E-3)E-19 / G-21
Ordenfoto principal → videos → resto (galeria.phtml:72-76)Lo fija la posición de la galería de Magento: la _x1 en 1, el video en 2, la toma menos importante en 6

12 · Contrast & legibility — texto sobre media

  • Velo «+N»: blanco sobre navy 70 % sobre foto blanca = 5.43:1 ✓ (G-19; 12.1:1 medido sobre foto blanca real); contador móvil blanco sobre navy .82 = 7.95:1 calculado / 12.1 medido ✓
  • Play 48 px: blanco sobre navy 70 % sobre foto blanca 5.43:1 ✓; sobre un fotograma real se mide sobre el píxel (G-12) y se certifica con póster claro y oscuro (G-13)
  • Miniatura activa del visor: borde 2 px primary-text (identificación por relleno/aro, 1.4.11)
  • Sin texto sobre la foto: no hay nada más que medir con arte oscuro; el tile es blanco por construcción (E-30)
  • Foco: el tile-botón dibuja el ring sobre blanco ✓; en el visor el ring se mide sobre su fondo (medir en calidad2)

13 · Asset specifications

PropiedadValor
FuenteA05 _x1 (tile 0) + A06 _x2.._x5 del catálogo, tal cual (dato); el sistema pide medium 1000² · small 160² · large 1600²
Formato que acepta el admin hoyproducto: jpg / jpeg / gif / png (Gallery/Upload.php:33-38); categoría: el cliente promete webp (category_form.xml:33) y el servidor lo rechaza (di.xml:226-243); WebP y AVIF fuera en toda la cadena; un GIF animado = video no autorizado (F-08)
Pipeline HOYgalería/visor del PDP: product_page_image_medium 1000² · _small 160² · _large 1600² (view.xml:18-29), JPEG q80, lienzo blanco _keepFrame, _constrainOnly (nunca agranda); sin WebP/AVIF, sin srcset, sin decoding="async"
Pipeline OBJETIVOAVIF/WebP con fallback JPG + srcset/sizes por image id; product_page_image_medium 1000 → 1200 (2× de 605) + tallas 600/900 (H P2); techos del DS §7: PDP ≤ 80 KB · zoom ≤ 180 KB · thumb ≤ 25 KB — ningún techo AVIF se exige sin pipeline (X-5)
Peso HOY (caché medida)1000² p50 37 / p90 76 KB, máx 1 162 KB (≈10 % de la caché > 80) · 160² p50 3 / p90 4 KB · 1600²: medir en calidad2 → techo PDP ≤ 80 KB por talla medium (contrato DS; WARNING por producto si > 80) · zoom ≤ 180 KB · thumb ≤ 25 KB (contrato 40)
Peso OBJETIVOAVIF/WebP + srcset 600/900/1200 con sizes="(min-width:1440px) 605px, (min-width:1280px) 534px, (min-width:1024px) 392px, (min-width:768px) 488px, calc(100vw - 32px)" (héroe) y 299/192/240 (tiles); visor 1600 (≤ original); tira 160
Nombre{sku}_x1.jpg … {sku}_x5.jpg (L-30); el sufijo dice la posición, la toma va en label
Datos que acompañannombre del producto (= alt), label de cada toma (G-07), title del video (P05)
Realidad medida (PDP 1440)13 <img> → 1 066 KB: galería 3 × medium = 35 + 35 + 48 KB; buybar 471 KB (original para 40 px) y #rel 6 originales = 466 KB (DEV-22)

14 · Accessibility

  • Tile 0 alt = nombre; tiles 1..N aria-label="Vista N de M: {toma}" (G-07: hoy sin toma → DEV-G9); miniaturas del visor <button><img alt=""> → añadir aria-label="Vista N: toma"
  • Visor role="dialog" aria-modal + contador aria-live ✓; Esc / ← / → / Home / End, trampa de Tab y retorno de foco (pdp.js:595-613) ✓
  • Collage role="group" con nombre ✓; carrusel móvil: el swipe no es el único camino (visor con teclado y snap; G-40) — verificar en calidad2 que el snap se alcanza sin gesto
  • Targets: flechas del visor 44 + hit-area 60, cerrar 44, miniaturas 64, play 48 dentro de un tile ≥ 192 (G-46 ✓)
  • Reduced-motion: sin hover-zoom, scroll auto en visor y pista ✓ (G-26)

15 · Performance — entrega técnica

  • LCP del PDP = tile 0: fetchpriority="high" ✓, eager, width/height 600 + aspect-ratio 1/1 → CLS 0; sin <link rel="preload"> (PF-02: WARNING) y sin decoding="async" (DEV-24)
  • Tiles 1-2 eager, ≥ 3 lazy; visor lazy salvo el actual + precarga solo de los vecinos (pdp.js:422-424); el 1600² baja únicamente al abrir el visor
  • Sin srcset: el héroe de 605 recibe 1000² (1.65×) y el tile de 192 recibe el mismo 1000² (5.2×) → product_page_image_medium 1000 → 1200 + tallas 600/900 + srcset/sizes (H P2)
  • Medido a 1440: galería = 117 KB (3 × medium; LCP 35 KB); el peso del PDP lo rompen buybar (471 KB por 40 px) y #rel (466 KB), no la galería → DEV-22 (mini_80, category_page_grid 480²)
  • Con Save-Data nada cambia en la galería (imágenes); el video sí (preload="none", F-53)

Do

  • _x1 medida (90 %, blanco 255, ≥ 1200²) en la posición 1 y el video en la 2
  • Un label canónico por toma para que el visor la nombre
  • La toma menos importante en la posición 6 (bajo el velo)
  • Tomas que se leen a 64 px (thumb) y a 358 px (móvil) sin zoom

Don't

  • Escenas, fondos de color o sombras en la galería: se pintan con marco blanco
  • Cinco frentes girados 15° para «llenar» el collage
  • Póster gris «VIDEO» o video como tile 0
  • Confiar en el zoom para un 750×750 legacy (se sirve a 750: E-33)

Fuentes: galeria.phtml:21-134 · visor.phtml · pdp.css:11-21, 42-92, 93-154 · pdp.js:286-502, 595-613 · view.xml:18-29 · inventario 02 §S11, §2, §3, §6.7 · expediente 01 §2.12 (L143-144, L1306-1323, L1546-1548) · C §3.18, C-09, C-17 · F-17, F-48 · G-06, G-07, G-19, G-26, G-39, G-40, G-46, §3 · E-30, E-33, E-37c · H §1.1, H-02, H-13, §3 P04 · L-20, L-30, L-31

P05

Video de producto

Construido en el temaGalería PDP (facade)

El video de producto dentro de la galería: un tile-botón con póster real + play de 48 px (facade) que crea el reproductor al pulsar y lo destruye al salir. Hoy 377 de 378 videos son Vimeo sin póster: el sistema cae a la _x1 (WARNING aceptado hasta el cron oEmbed, DEV-12).

1 · Purpose — para qué existe

Demostrar el uso del producto («spec traducida a beneficio») sin que el video cueste un byte antes del gesto ni reproduzca solo. Vive en la posición 2 de la galería; nunca es LCP ni aparece en el listado.

2 · Use cases — cuándo usarlo

  • Productos con video de demostración de uso (instalación, encendido, conexión) de 20-90 s, con voz subtitulada o mudo con title descriptivo
  • Como tile 1 del collage (detrás de la _x1) y como slide del visor; en móvil como slide del carrusel
  • Con sin_cookies = 1 (dnt / nocookie) y controls nativos del proveedor (F-21)

3 · Do not use when — cuándo no

  • Como tile 0, en la PLP, en la tarjeta ni en carruseles (F-17; el listado NUNCA muestra video)
  • Como spot (producto < 60 % del tiempo), con precio, %, CTA, legales o logos quemados (F-07, F-20)
  • Con póster placeholder «VIDEO», negro, con logo o con play dibujado (F-05, E-27: FAIL)
  • Con autoplay o sonido antes del gesto (F-01); con GIF animado como «video ligero» (F-08)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Tile-botónbutton.gal-tile.gal-tile-video[data-ix data-video-embed | data-video-archivo] con <img src="{póster}" width="600" height="600" alt=""> + .gal-play 48 px (#i-play); aria-label="Reproducir video: {título}" (sin título: «Reproducir video del producto»)sistema · G-08
Facadeel reproductor nace al pulsar: iframe.video-vivo (allow="autoplay; encrypted-media; picture-in-picture; fullscreen", referrerpolicy, title) o <video controls autoplay playsinline preload="none"> para archivo; muere al salir (pararVideos): ≤ 1 vivo por página (F-02, F-03)sistema
Comportamientoindustrias_video/general/comportamiento = en_sitio (reproduce en el tile; valor real en local) · visor_auto · visor_manual; autoplay del admin solo arranca el reproductor que el usuario pidióconfig
Póster A12cascada: póster del proveedor (YouTube hqdefault) → fotograma por oEmbed (cron, DEV-12) → foto _x1 (fallback sancionado, WARNING L-20); el gráfico gris «VIDEO» de la galería se ignora a propósitohoy _x1 en 377/378
ProveedoresYouTube · Vimeo (póster null) · Wistia · Dailymotion · Custom (CAT/etc/di.xml:9-19); fuentes: galería nativa external-video + atributo heredado videos (JSON YouTube, 14 productos)dato
Visor.visor-video con <b> título; reproductor .visor-slide > .video-vivo { aspect-ratio 16/9; max-width 960 } → un 9:16 queda pillarboxed (F-22 → DEV-28: aspect-ratio del proveedor vía oEmbed)sistema
Contenido del videodemo de uso: producto ≥ 80 % del tiempo · 20-90 s · ≤ 1 cartón ≤ 2 s · sin música sola > 2 s · texto quemado = subtítulos (F-07, F-20); primer fotograma = póster (F-19)F-19 · F-20
SubtítulosCC es-MX si hay voz (F-06 / G-30); mudo → title que describe la acción (G-31)gate editorial
Ordenfoto principal → videos → resto (galeria.phtml:72-76)F-17

5 · Layout blueprint — plano técnico

P05 · A12 póster de video — fotograma REAL 1280×720 (16:9, 2×) tile 1:1 de la galería (299) · visor 16:9 ≤ 960 CUADRADO CENTRAL x 280-1000: sobrevive el recorte 1:1 PRODUCTO ≥ 20 % del ancho (≥ 256 px) · en uso · nítido play 48 · radio 40 px sin detalle banda lateral: solo en el visor 16:9 — aire aire, nada crítico focal 1280 px 720 px El play de 48 px del sistema cae en el centro (≈ 16 % del tile a 299): sin texto ni detalle clave en un radio de 40 px del lienzo. Fotograma real del video (E-27, F-05, F-18): hash del póster ≠ hash de la `_x1`; luminancia media 0.35-0.75; sin play ni texto quemados (el sistema pinta su play de 48 px). La `_x1` es el ÚNICO fallback aceptado (WARNING, L-20); el placeholder gris «VIDEO» (md5 5e30bff8…, 36 504 bytes) = FAIL. En el tile 1:1 el 16:9 se pinta `contain` con bandas ≈ 22 % arriba y abajo (F-51); en el visor se ve entero a 16:9 hasta 960 px; en móvil 358×201 centrado. Continuidad póster → video (F-19): el video arranca donde el póster termina (desplazamiento del producto ≤ 10 % del ancho); primer fotograma = producto sobre fondo limpio y estático, nunca negro ni logo. Contenido (F-20): demostración de uso, no spot — producto en cuadro ≥ 80 % del tiempo, 20-90 s, ≤ 1 cartón de cierre ≤ 2 s, sin música sola > 2 s; texto quemado = solo subtítulos (F-07).

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440 (y 1920)tile 299 (póster 16:9 contain → 299×168 + bandas 22 %) · reproductor en_sitio en el tile · visor 16:9 ≤ 9601:1 tile · 16:9 visorA12 1280×720 (póster) + video del proveedorel póster _x1 de hoy entra 1:1 sin bandas; el fotograma real entra con bandas
1280 / 1024tile 263 / 1921:1A12
768tile 240 · visor 16:9 (stage 768 − 144)1:1 · 16:9A12
<768 (390)tile 358 → video 358×201 centrado (22 % de negro arriba y abajo) · contador navy .821:1 → 16:9 dentroA12[H] aspect-ratio 16/9 para el tile en reproducción o abrir en visor (C §3.19)
Reel 9:16 (V02 → PDP)visor 16:9 ≤ 960 fijo → pillarbox9:16A12 1080×1920WARNING (estado actual) → DEV-28

7 · Safe areas — zonas seguras

Sobre el póster 1280×720: el sujeto vive en el cuadrado central x 280-1000 (E-27) — es lo que sobrevive a cualquier recorte 1:1 (proveedor o pipeline) — y, más fino, en x 15-85 % · y 15-85 % (C §3.19). El centro (círculo de radio 40 px del lienzo; el play de 48 px cubre el 16 % del tile a 299 y el 13 % a 358) no lleva texto ni el detalle que importa: el producto lo atraviesa, pero su pantalla, conector o botón quedan fuera de ese círculo. En el tile 1:1 las bandas de 22 % arriba y abajo son del sistema (contain), no del arte: el póster no dibuja barras negras. En móvil, el contador ocupa x 82-97 % · y 92-98 % del slide.

8 · Focal point — punto focal

El producto en uso, en (0.50, 0.50) del póster: el mismo punto donde el sistema pinta el play, por eso el detalle clave se corre del centro (radio 40 px) sin que el producto deje de estar centrado. Se conserva en los tres estados porque nada recorta: 16:9 contain en tile, 16:9 en visor. Verificación: hash del póster ≠ hash de la _x1; bbox del producto ≥ 20 % del ancho; luminancia media 0.35-0.75; el fotograma 0 del video coincide con el póster (desplazamiento ≤ 10 %).

9 · Crop behavior — qué pasa entre ratios

No hay recorte: el 16:9 se pinta contain en el tile 1:1 (bandas ≈ 22 % arriba y abajo entre 192 y 605 px) y entero en el visor (≤ 960). Si el póster entra por la galería de Magento pasa por medium 1000² con lienzo blanco (bandas blancas, no negras); si es URL del proveedor (hqdefault) se pinta tal cual (talla: medir en calidad2). Un video 9:16 en el visor 16:9 fijo queda pillarboxed (F-22 WARNING → DEV-28). En móvil el reproductor mide 358×201 dentro de un tile de 358: 22 % de negro arriba y abajo → propuesta [H] aspect-ratio 16/9 del tile en reproducción.

10 · Responsive behavior — desktop → tablet → móvil

Desktop 1440 · tile 299 (1:1) banda 22 % póster / video 16:9 contain = 299×168 banda 22 % play 48 299×299 • `en_sitio`: reproduce en el tile • visor: 16:9 ≤ 960 (stage −144) • 1280: 263 · 1024: 192 Tablet 768 · tile 240 banda 16:9 = 240×135 banda play 48 = 20 % 240×240 • mismo póster • tap = reproduce; swipe = cambia Móvil 390 · tile 358 → video 358×201 negro 22 % video 358×201 centrado negro 22 % play 48 = 13 % 358×358 [H] `aspect-ratio 16/9` en reproducción o abrir en visor (evita • 22 % de negro) • `preload="none"`; 0 peticiones antes del tap

Permanece: facade (0 peticiones antes del gesto), play 48, controls, orden. Cambia: tile 299 → 240 → 358; visor ≤ 960 → 624 → pantalla completa sin flechas. Desaparece: hover-zoom del tile en móvil. Se recorta: nada; un 9:16 pierde ancho (pillarbox) hasta DEV-28. En táctil el gesto vertical es scroll y el horizontal cambia de slide; el tap reproduce; el video nunca captura el gesto antes del tap (F-54).

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Póstertile 299 (16:9 contain: 299×168)240 (240×135)358 (358×201)
Reproductoren el tile (en_sitio) o visor 16:9 ≤ 960tile o visor (stage −144)358×201 en el tile; visor a pantalla completa
Play48 px = 16 % del tile48 = 20 %48 = 13 %
Gestoclic · teclado (Enter, Esc)tap · tecladotap; swipe cambia de slide (F-54)
AssetA12 1280×720 + videomismomismo (preload="none")

11 · Content rules — límites de copy

CampoLímiteRegla
Título del videodescriptivo de la acción («Cómo instalar el contacto inteligente»); ≤ 125 caracteres como los alt (I-24)G-31: WARNING si = nombre del producto · FAIL sin título; alimenta el aria-label «Reproducir video: {título}» y el <b> del visor; hoy el iframe title es genérico «Video del producto» (F-21) → descriptivo
Texto quemadosolo subtítulos (≤ 2 líneas, legibles a 390: letra ≥ 3.5 % del alto)Sin precio, oferta, %, CTA, legales ni logos de terceros (F-07); el nombre del producto va en HTML
Duración20-90 s (WARNING 90-120 · FAIL > 120)F-20; producto en cuadro ≥ 80 % del tiempo (WARNING 60-79)
Póster0 texto, 0 play dibujado, 0 logoE-27; fotograma real (F-18)
SubtítulosCC es-MX si hay voz; N/A si solo música (dicho en el título)F-06 / G-30: sin CC no se publica
Sonidoapagado hasta el gesto; con audio: voz o ambiente, −16 LUFS ±2, pico ≤ −1 dBTPF-12

12 · Contrast & legibility — texto sobre media

  • Play: blanco sobre navy 70 % sobre foto blanca = 5.43:1 ✓ (G-19); sobre un fotograma real se mide sobre el píxel (G-12) y se certifica con póster claro y oscuro (G-13): el disco navy 70 % es el que garantiza el ≥ 3:1, no el arte
  • El póster no lleva texto: nada que medir salvo los subtítulos dentro del video (legibles a 100 % en 390)
  • Foco del tile-botón: ring primary-text sobre el blanco del tile ✓; tras el clic el foco debe pasar al reproductor (G-33) — hoy el iframe nace dentro del <button> (DEV-27)
  • Contador y velo: como P04

13 · Asset specifications

PropiedadValor
A12 póster1280×720 (16:9) · fotograma real del video · sRGB · sin texto ni play · producto ≥ 20 % del ancho en x 280-1000 · lum media 0.35-0.75 · 1 fotograma
Video16:9 ≥ 1280×720 (Q-08); demo de uso 20-90 s; audio mudo por defecto, −16 LUFS ±2 (F-12); alojado en Vimeo (377/378) o YouTube (1/378: www.youtube-nocookie.com falta en la CSP → DEV-18); 9:16 solo para reels (V02) y con DEV-28
Póster HOYsin campo: Vimeo devuelve null → la _x1 (medium 1000², JPG q80) es el póster (WARNING L-20, 377/378); YouTube → hqdefault; el gris «VIDEO» de la galería (md5 5e30bff8…) se ignora = FAIL si llegara a pintarse
Póster OBJETIVOcron oEmbed de Vimeo (DEV-12) descarga el fotograma 1280×720 → JPG q75 ≤ 80 KB (techo PDP, F-52) / ≤ 120 KB máx (contrato tile) · AVIF ≤ 60 / ≤ 120 + srcset 640w/1280w
Dónde se subegalería nativa del producto → «Añadir video» (external-video: proveedor + id + título) o atributo videos (JSON heredado); el póster real no tiene campo hasta DEV-12
Nombre{sku}_video-poster_16x9.jpg (cap.07 §Nomenclatura; patrón L-30 {tipo}_{id}_{ratio} para el 9:16: _9x16)
Datos que acompañantítulo descriptivo (G-31), proveedor + id, pista CC es-MX en el proveedor, sin_cookies = 1

14 · Accessibility

  • <button aria-label="Reproducir video: {título}"> real sobre póster con alt="" (G-08) — nunca <div onclick>
  • 0 iframes antes del clic (F-02 / G-35); tras Enter el foco entra al reproductor y Tab recorre play / pausa / volumen / CC; Esc cierra el visor y devuelve el foco (G-33) — hoy el <video>/iframe nace dentro del <button> (anidamiento inválido: DEV-27)
  • CC es-MX si hay voz (G-30); mudo → title descriptivo (G-31); sin autoplay sonoro jamás (G-29)
  • controls nativos (exentos del target 44: G-49); play 48 px dentro de un tile ≥ 192 ✓ (G-46); iframe title descriptivo (F-21)
  • Reduced-motion: sin hover-zoom, scroll auto; el clic sigue reproduciendo (gesto explícito)

15 · Performance — entrega técnica

  • Facade ✓: 0 peticiones a player.vimeo.com / youtube* / *.mp4 antes del clic (PF-13 / H-15); <video preload="none" playsinline> ✓; el reproductor muere al salir (pararVideos, F-03) → ≤ 1 vivo
  • El póster es el tile 1: eager (nunca high); width/height 600 + aspect-ratio 1/1 → CLS 0 (F-04); en el visor aspect-ratio 16/9
  • sin_cookies = 1 recomendado (dnt / nocookie; WARNING si 0, F-21); CSP: player.vimeo.com la aporta Magento_ProductVideo, www.youtube-nocookie.com no está (DEV-18)
  • Datos móviles: preload="none" ✓; con Save-Data nada más cambia (el póster es una imagen del pliegue)
  • Deuda: póster real vía cron (DEV-12) — hoy el «póster» es la _x1 de 1000² (35-48 KB); visor con aspect-ratio del proveedor (DEV-28); iframe fuera del <button> (DEV-27)

Do

  • Fotograma real como póster, producto en el cuadrado central y el detalle fuera del play
  • Demo de uso de 20-90 s que arranca donde el póster termina
  • CC es-MX y título que dice qué se ve
  • sin_cookies = 1; el video en la posición 2 de la galería

Don't

  • Packshot duplicado o gris «VIDEO» como póster
  • Precio, %, CTA o logos quemados; intro de logo; arranque en negro
  • Autoplay, sonido antes del gesto, GIF animado
  • Reels 9:16 en el visor sin DEV-28 (pillarbox)

Fuentes: galeria.phtml:41-60, 72-76, 96-124 · pdp.js:306-342, 376-385 · pdp.css:57, 69, 141 · CAT/Model/Video/* · Proveedor/Vimeo.php:59-63 · Proveedor/YouTube.php:51-54 · CAT/etc/adminhtml/system.xml:110-155 · inventario 02 §S11 (video), §6.16 · expediente 01 §2.12 (L143-144, L1308, L1313) · E-27, E §3.1 A12 · F-01…F-08, F-17…F-22, F-48, F-51…F-54, §3 P05, T-4, T-6, T-10 · G-08, G-19, G-29…G-31, G-33, G-35, G-46, G-49, §3 P05 · C §3.19 · I-24 · H-15, §3 P05 · L-17, L-20, L-29 · DEV-12, DEV-18, DEV-27, DEV-28

P06

Variantes de color

Construido en el temaPDP, PLP (pastillas + imagen por color)

Las pastillas de color bajo el nombre (28 px en tarjeta, 40 en PDP) que cambian la foto al elegir: círculo de color sólido, no miniatura — con la fotografía de Steren, a 22 px las cuatro variantes se ven idénticas (misma silueta sobre blanco). Una _x1 por color con el mismo encuadre; sin galería por variante (deuda de datos).

1 · Purpose — para qué existe

Que el cliente vea el color que va a recibir sin abrir cada hijo: el swatch dice el color, la foto lo confirma. La preselección es el color de la foto del modelo («es el que el cliente ya está viendo»).

2 · Use cases — cuándo usarlo

  • Configurables por color (atributo con eav_attribute_option_swatch.type = color); en tarjeta, carrusel (track propio), PDP y faceta

3 · Do not use when — cuándo no

  • Con miniatura de producto como swatch (use_product_image_for_swatch): los 148 swatches de imagen del vivo eran texturas, no fotos de producto
  • Con la pastilla pintada del color (superseded por «blanca + punto»)
  • Como galería por variante: al elegir color cambia la foto héroe (y la de la tarjeta), no las 6 del collage — los hijos no tienen galería propia importada

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Swatchcírculo de color sólido (variantes.phtml, colores.phtml, variantes.js); hex del atributo: 8 heredados del vivo menos el guinda #800000; paleta limpia de 12dato · 28 px tarjeta / 40 PDP
Miniatura (no usada para color)img.vars-mini 40×40 lazy alt="" → CSS 22 px (tarjeta) / 32 (PDP): solo si el atributo trae imagencards.css:320,356
Pastilla de faceta«blanca + punto» con palomita dentro del punto; auto-fill mín 118 → 127×38 px; «el diseño correcto mató 40 líneas de código»sistema
Foto por coloruna _x1 por hijo, misma cámara y escala: bbox idéntico ±1 % (E-31; B-17 tolera ±3 %: medido en aud-7840 az/bl/ne/ve bbox 0.90×0.76, centro 0.50/0.50 las cuatro); _x2.._x5 compartidas del modeloA05 por hijo
Cambio de fototarjeta: $sel['imagen'] = category_page_grid 480² del hijo (Variantes.php:321); PDP: imagen_pdp = product_page_image_large 1600² (:336); stSklReset al cambiar srcsistema
Preselecciónel color de la foto del modelo, si existe; trampa ETL: al modelo AUD-7410 le copiaron la foto de un hijo (aud-7410az_x1eee.jpg)dato
Nombre del colortexto real o aria-label (1.4.1); radios nativos vars-radio:focus-visible + label; seleccionado = aro primary 2 px (3.45:1 ✓ no textual)G §3 P06

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
todosswatch 28 (tarjeta; área de toque 28×28 a 390) · 40 (PDP) · faceta 127×381:1sin raster propio (color)la foto del hijo: 480² tarjeta / 1600² PDP

7 · Safe areas — zonas seguras

Como P01 para cada _x1; entre variantes el bbox no se mueve (±1 %): al cambiar color el producto no «salta».

8 · Focal point — punto focal

Centro; idéntico entre hijos.

9 · Crop behavior — qué pasa entre ratios

Ninguno. Al cambiar color en el PDP el héroe recibe large 1600² (no medium 1000²): peso del cambio → medir en calidad2.

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Swatch28 tarjeta / 40 PDPigual28 (toque 28×28)
Foto al elegir480² / 1600²igualigual

11 · Content rules — límites de copy

CampoLímiteRegla
Nombre del colortexto real («Azul», «Negro»); nunca hex ni código1.4.1: el color no es la única señal
alt de la fotocomo P01/P03 (alt="" con nombre adyacente; nombre en PDP)

12 · Contrast & legibility — texto sobre media

  • Aro del seleccionado primary 2 px = 3.45:1 ✓ (no textual, 1.4.11); pastilla blanca + punto sobre blanco: el punto porta el estado

13 · Asset specifications

PropiedadValor
A05 por hijo{sku-hijo}_x1.jpg · bbox ±1 % (PASS ≤ 1 · WARNING 1-3 · FAIL > 3, E-31 / B-17) · misma sesión y luz (neutros ±6)
Galería_x2.._x5 del modelo (sin galería por variante: deuda de datos)

14 · Accessibility

  • Radios nativos con label; nombre del color como texto/aria-label (1.4.1)
  • Swatch 28 / 40 px: legal (≥ 24) pero bajo el token 44 → WARNING G-48 (excepción documentada)

15 · Performance — entrega técnica

  • Cambiar color = nueva src 480² en tarjeta (sin coste extra); en PDP large 1600² → medir; stSklReset mantiene el esqueleto honesto

Do

  • Una _x1 por color con encuadre clavado
  • Preseleccionar el color de la foto del modelo

Don't

  • Miniaturas de 22 px como swatch
  • Pastilla pintada del color; guinda #800000
  • Prometer galería por variante

Fuentes: expediente 01 §2.14 (L691-741, L787-789, L809, L821-830, L845-858) · variantes.phtml:71-72 · Variantes.php:205-216, 321, 336 · cards.css:314-320, 354-356 · inventario 02 §S21 · E-31, E §3.2 (variantes) · B-17, B §3 P06 · G-48, G §3 P06 · AD-24 (cap.04)

P07

Imagen de categoría

Vive en el catálogo (dato)Alimenta T01/T02/T05/T08 (landing_image)

La cara de cada departamento y familia: la _x1 del producto representativo, bajada a 800×800 sobre blanco puro, cargada en landing_image de la categoría. Un solo archivo alimenta T01, T02, T05, T08 y el mega-menú de 688 px a 30 px. Hoy 129 de 131 miden 400×400 y se sirven originales.

1 · Purpose — para qué existe

Que el visitante reconozca qué se vende en un departamento por un producto real, no por un glifo ni por un conteo (cap.29); y que ese producto tenga la misma escala óptica que sus vecinos. No se fotografía nada: se elige.

2 · Use cases — cuándo usarlo

  • En las 13 categorías-departamento del home (hoy solo Smart Home tiene landing_image: CONT-03) y en todas las familias curadas de la landing
  • Como la _x1 del representante canónico (E-34) bajada a 800×800 ≤ 100 KB; packshots de terceros solo re-lienzados a la convención (E-10) o no elegibles (T-8 E)

3 · Do not use when — cuándo no

  • Con composiciones (celular + foco + ondas), capturas de app, escenas o fondos de color: SMART_HOME.jpg (400×400, composición) = WARNING; una escena en landing_image se pinta contain con bandas (DEV-08)
  • Con texto, badge, precio o sello dentro del archivo (E-19)
  • Con productos que a 122 px son una raya (cables sin conector, pilas, tornillería: E-35)
  • Repitiendo cara entre tiles de la misma vista o eligiendo por «el más caro»: el algoritmo insignia es fallback, no criterio

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Lienzo800×800 (1:1) sRGB, fondo 255/255/255 en todo el perímetro, esquinas 255E-01
Productolado mayor al 85-90 % del lienzo (680-720 px), centrado 0.50/0.50, un solo producto; sin sombra (banda inferior ≥ 246), sin viñeta, sin haloL-09 · E-02 · E-06 · E-08
Eleccióncriterio E-34 (silueta canónica · marca propia · stock ≥ 90 días · sin repetir cara · legible a 122 y 30 px); fallback landing_image → insignia (video + más caro) → glifo (T06)editorial
ConsumidoresT01 héroe 646×306 útiles (contain, padding 20/20/104, ×1.04) · T02 310×122 · T05 320×126 · T08 moneda 40 (38 con padding 4 → 30 útiles) · mega-menú (talla: medir en calidad2)sistema
Hovertiles scale(1.09) (.45 s): el producto no toca los bordes → tope 92 %C-12
Campolanding_image (varchar, input=image, backend Category\Attribute\Backend\Image, GLOBAL); uploader catalog/category_image/upload 4 MB sin validar dimensiones; el cliente admite webp, el servidor solo jpg/jpeg/gif/png (DEV-21)category_form.xml:10-38 · di.xml:226-243
altalt="" en todos los consumidores: el nombre del departamento/familia es el enlace adyacente (G-05)sistema

5 · Layout blueprint — plano técnico

P07 · A03 imagen de categoría — lienzo de entrega 800×800 (1:1, 2×) · la elección del representante un solo producto, la `_x1` bajada a 800: no se fotografía nada nuevo aire 5 % (40 px) — fondo 255 en todo el perímetro aire 5 % PRODUCTO al 85-90 % (680-720 px) · PASS 86-92 · WARN 80-86 · FAIL <80 / >92 (L-09) círculo inscrito 70 % (moneda T08 · mega-menú) focal 800 px 800 px L-09: el lado mayor del producto al 85-90 % del lienzo (PASS 86-92 % · WARNING 80-86 % · FAIL < 80 % o > 92 % por el hover ×1.09), sin sombra en el archivo, fondo 255; el círculo inscrito del 70 % es lo que sobrevive en la moneda de 40 (T08) y en el mega-menú. Criterio editorial E-34 (en este orden): (1) silueta canónica de la familia — lo que uno dibuja al nombrarla: foco, cámara domo, contacto, cable en S; (2) marca Steren si la familia la tiene; (3) en stock y con ≥ 90 días de vida esperada; (4) sin repetir cara en la misma vista (los 5 tiles del home, los 6-8 de la landing); (5) legible a 122 px y distinguible de las otras familias del departamento a 30 px. Fallback en orden: `landing_image` → insignia (video + más caro) → glifo: el algoritmo es red de seguridad, no criterio (T-10 E: elige aspiradora + control para Casa y oficina, monitor para Movilidad). E-35: prohibidos como cara los productos que a 122 px son una línea o una mancha (cables solos sin conector, pilas sueltas, tornillería): usa el conector en macro o el blíster real. Hoy 129 de 131 miden 400×400 (FAIL: 0.63× en DPR 2) y se sirven originales hasta 2500×2500 (uno de 632 KB, otro 1500² de 856 KB) para el tile de 688 y el chip de 38 (DEV-23).

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440 (y 1920)T01 306×306 · T02 122 · T05 126 · chip 30 (moneda 40)1:1A03 800×800 → servido ORIGINAL800 = 2.6× de 306 (D-01 pide 612; 800 cubre DPR 2.6); hoy 400×400 = 1.3× → FAIL AS-01
1280 / 1024T01 306 (cajas 566 / 438 de ancho) · T02 122 · T05 1261:1A03solo cambia el blanco lateral de la caja
768T01 230 · T02 86 · T05 ≈ 100 (cuerpo opaco) · chip 301:1A032 columnas
<768 (390)T01 230 · T02 86 · T05 ≈ 90 · chip 301:1A03a 86 px solo sobrevive la silueta (C-09: ≥ 48 px ⇒ producto ≥ 54 % del lienzo → regla 85-90 %)
Chips y mega-menú (todos)38 px (30 útiles) · mega-menú: medir en calidad21:1A03 original (hasta 2500²)12 chips = 235 KB medidos en /cables (DEV-23: resize 80/160)

7 · Safe areas — zonas seguras

En el asset: cuadrado x 5-95 % · y 5-95 % para el producto (E-02) y, para los recortes circulares (moneda de T08, mega-menú), el círculo inscrito del 70 % central (C-13): esquinas del producto fuera de ese círculo se cortan a 30 px. En los tiles el sistema reserva el cintillo por padding (104 / 72-74 px): el producto nunca queda bajo el velo porque la foto se pinta contenida en el área útil, no a sangre. El tope del 92 % existe por el hover ×1.09 (C-12): a 92 % × 1.09 = 100 %.

8 · Focal point — punto focal

El producto entero, centrado (0.50, 0.50); no hay re-encuadre por consumidor, solo escala (306 → 30). Verificación E-34 / Q21: reducir a 122 px y a 30 px — 3 revisores reconocen la familia y la distinguen de las vecinas del departamento (PASS 3/3 · WARNING 2/3 · FAIL ≤ 1/3); ocupación entre tiles vecinos difiere ≤ 0.12 (E-04).

9 · Crop behavior — qué pasa entre ratios

Ninguno (contain en tile, chip y moneda): la imagen entra entera y el resto es el mismo blanco del tile. Cambia la escala: 306 (héroe 1440) → 230 (768/390) → 122 → 86 → 30. Por eso el producto ocupa 85-90 %: a 90 % se pinta a 77 px en el chico de 390 (piso ≥ 48 px) y a 27 px en el chip (silueta); un packshot «con aire generoso» al 50 % sería 43 px → WARNING, y a 30 px una mancha. Una escena en landing_image se vería contenida con bandas blancas (hueco 8, DEV-08): la cara de categoría es packshot, no escena.

10 · Responsive behavior — desktop → tablet → móvil

Desktop 1440 · T01 héroe 306 (T02 122 · T05 126) producto 85-90 % círculo 70 % 306×306 • 800² = 2.6× de 306 • hover ×1.09: por eso ≤ 92 % • chip T08: 30 px útiles Tablet 768 · T01 héroe 230 (T02 86) producto círculo 70 % 230×230 • mismo archivo • T02/T05 a 86-100 px Móvil 390 · T02 chico 86 (T05 ≈ 90 · chip 30) silueta ≥ 48 px 86×86 • a 90 % = 77 px (PASS C-09) • a 50 % = 43 px (WARNING) chip: silueta ≥ 24 px, ≥ • 3:1

Un solo archivo para todos los estados y consumidores; el sistema cambia la caja y la escala, nunca el asset. Lo que sí cambia por estado es el render mínimo que debe sobrevivir: 306 px en el héroe, 86-90 px en los chicos <1024, 30 px en el chip siempre.

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
T01 héroe306×306 contenido en 646×306230 en 694×230230 en 316×230
T02 chico122 (área 310×122)86 (336×86)86 (147×86)
T05 landing 1×1126 con cintillo≈ 100, cuerpo opaco≈ 90, cuerpo opaco
T08 chip / mega-menú30 útiles (moneda 40)3030
AssetA03 800² originalmismomismo

11 · Content rules — límites de copy

CampoLímiteRegla
Nombre de archivocat_<slug>_1x1.jpg (p. ej. cat_smart-home_1x1.jpg; L-30)Sin sufijos de campaña ni versión por ?v=; la fecha versiona (AS-13)
altalt="" (nombre adyacente en el tile, chip y menú)G-05; un alt no vacío aquí = lectura doble
Texto en la imagen0 cadenasE-19 / G-21: nada de badges, precios, ondas ni logos de campaña
Un producto1 (kits: el conjunto como un solo objeto, principal ≥ 2× el área del accesorio)E-34: sin composiciones, capturas de app ni ondas (SMART_HOME.jpg = WARNING)
Etiqueta corta de la categoría≤ 30 caracteres (T01/T02)Va en el tile, no en la imagen; nombres largos del árbol necesitan etiqueta corta (CONT-07)

12 · Contrast & legibility — texto sobre media

  • La imagen no lleva texto; el cintillo del tile (n900 ≥ 12.5:1, n700 7.8:1) y el cuerpo opaco de T05 <1024 van por receta
  • Producto blanco: p95 ≤ 246 y silueta ≤ 240 para no fundirse con el 255 del tile (E-07); en el chip de 30 px la silueta necesita ≥ 3:1 contra blanco (C-09b): un producto blanco o transparente como cara = FAIL
  • Sin viñeta ni fondo en el archivo: la viñeta navy 5 % la pone el tile (E-08)

13 · Asset specifications

PropiedadValor
A03800×800 (1:1) · sRGB · fondo 255 · sin sombra · un producto al 85-90 % · JPG progresivo q80 · 1 fotograma
Peso HOY≤ 60 KB objetivo / ≤ 100 KB máx (L-31; el «200» del manual se corrige, DOC-01); un packshot sobre blanco a 800² pesa 23-88 KB medido; hoy p50 23 / p90 37 KB a 400×400, máx 854 KB
Peso OBJETIVOAVIF + srcset 80/160/320/640 con resize de landing_image (DEV-23) — hasta entonces 800² es el techo de entrega, jamás 2500²
Formato que acepta el admin hoyproducto: jpg / jpeg / gif / png (Gallery/Upload.php:33-38); categoría: el cliente promete webp (category_form.xml:33) y el servidor lo rechaza (di.xml:226-243); WebP y AVIF fuera en toda la cadena; un GIF animado = video no autorizado (F-08)
Dónde se subeCatálogo → Categorías → (categoría) → Content → «Imagen de categoría» (landing_image, GLOBAL, 4 MB); sin curaduría de admin para el resto de la landing (fixture landing-merch.json)
Realidad HOYse sirve el original sin Helper\Image en tile héroe (688), tiles, chips (38) y mega-menú: 129/131 a 400×400 (FAIL AS-01), 1 de 1500² (856 KB) y 1 de 2500² (632 KB) bajan enteros por cada chip (DEV-23)
Fuentela _x1 del representante (dato del catálogo) bajada a 800 con re-muestreo no generativo; terceros re-lienzados sobre blanco sin generar píxeles (E-10) o descartados si su marca lo prohíbe (T-8 E)
Nombrecat_<slug>_1x1.jpg (L-30)

14 · Accessibility

  • alt="" en tile, chip y mega-menú: el enlace adyacente nombra la categoría (G-05); un solo foco por tile (C-24)
  • Sin texto rasterizado (G-21); silueta ≥ 24 px y ≥ 3:1 contra blanco en el chip (C-09b)
  • El contraste del texto del tile no depende de la imagen (cintillo por receta)

15 · Performance — entrega técnica

  • Héroe del mosaico: loading="eager" sin fetchpriority → con el hero sin arte es la LCP probable del home en ≥ 768 (DEV-24: fetchpriority="high" cuando sea LCP); landing héroe eager sin width/height (DEV-26)
  • Chicos lazy + decoding="async" + 320×240 declarados; chips lazy 38×38; CLS 0 por filas fijas
  • Servido original en todos los consumidores: el peso subido ES el descargado → 800² ≤ 100 KB es el techo; 12 chips por landing = 235 KB medidos con 400² → con 800² sin resize se duplicaría: DEV-23 antes de repoblar a 800² (resize 80/160/320/640)
  • Uploader sin validación de dimensiones ni peso más allá de 4 MB: QA con identify antes de subir (AS-01)

Do

  • Elegir la silueta canónica de la familia (E-34), marca propia, en stock; bajar su _x1 a 800² ≤ 100 KB
  • Probar a 122 y 30 px con 3 revisores antes de cargar
  • Cargar las 13 caras del home (CONT-03): es lo primero que cambia la cara del sitio
  • Misma escala óptica entre las caras de una vista (E-04 ≤ 0.12)

Don't

  • Composiciones, capturas de app, ondas, texto o badges
  • Escenas o fondos de color en landing_image (se pintan con bandas)
  • Cables solos, pilas, tornillería como cara
  • Subir 400×400 (0.63× en DPR 2) o 2500×2500 «por si acaso» (baja entero en cada chip)

Fuentes: HomeDepartamentos.php:116-243 · Landing.php:110-183 · landing.phtml:72-78, 130-144 · home.css:173-266 · catalogo.css:156-215, 411-417 · AddCategoryLandingImageAndShortDescription.php:36-50 · category_form.xml:10-38 · di.xml:226-243 · inventario 02 §S4, §S5, §3, §6.5-6.6 · E-01…E-10, E-34, E-35, §3.1 A03, T-8, T-9, T-10 · C-07, C-09, C-12, C-13, §3.24 · G-05, G-21 · H §1.1 (`/cables`), H-13 · manual §2.4, §5, §7 · D-06, D-07 · L-09, L-30, L-31 · DEV-08, DEV-21, DEV-23, DEV-24, DEV-26 · CONT-03, CONT-07

M01

Imagen de archivo — catálogo impreso

Hueco reservado sin campo de cargaB05

El scan del catálogo impreso que ilustra «Fabricamos lo que vendemos — desde 1956» (B05): un documento real a 3:1, compuesto como forma, opaco. Hoy es un hueco reservado (ph-slot mudo; se ve el fallback tipográfico «1956 → 2026»).

1 · Purpose — para qué existe

Patrimonio como hecho presente, no museo (E8): el catálogo existe, se escanea, se muestra. Sin filtro, sin mesa, sin sepia.

2 · Use cases — cuándo usarlo

  • En B05, una sola pieza; cuando exista el campo (DEV-20) y el scan cumpla E-26

3 · Do not use when — cuándo no

  • Con sepia, «envejecido», moiré, mesa o manos en cuadro; con texto añadido al scan
  • Como página a leer: a 108-207 px de alto no se lee ningún renglón

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Scancatálogo impreso real a ≥ 300 dpi, enderezado (±0.5°), descreenado, papel neutro (R≈G≈B ±8, lum 228-246: papel, no #FFF)E-26
Composiciónel recorte 3:1 toma la cabecera del pliego: una portada o una fila de productos como forma; el elemento principal ocupa ≥ 40 % del alto; nada esencial en el 8 % de los bordesE-26 · C §3.8
Opacidadarchivo opaco: el fallback «1956 → 2026» vive detrás (z-index 1, fondo transparente del slot)sistema
Slot.patri-archivo .ph-slot aspect-ratio 3/1, radio 4 → ver B05hueco (DEV-20)

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440622×2073:1A11 máster 1800×600 · servido 1250×4172.9× hoy / 2× servido
1280 / 1024549×183 / 433×1443:1A11
768324×1083:1A11render más chico: el título del pliego se lee solo como forma
390358×1193:1A11apilado

7 · Safe areas — zonas seguras

x 3-97 % · y 5-95 % (radio 4 del slot); elemento principal ≥ 40 % del alto.

8 · Focal point — punto focal

La portada o el producto protagonista del pliego (35 %, 50 %).

9 · Crop behavior — qué pasa entre ratios

Ninguno (ratio fijo): se entrega exactamente 3:1 ±0.5 %; el recorte del catálogo lo dirige diseño antes de entregar (un catálogo no es 3:1).

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Scan622×207324×108358×119
AssetA11A11A11

11 · Content rules — límites de copy

CampoLímiteRegla
alt«Portada del catálogo impreso Steren de [año]: [contenido legible]» ≤ 125 (G-09, I-24)Imagen de texto esencial (documento): el alt resume lo legible; «catálogo» a secas = FAIL
Textosolo el impreso en el documentoE-19 / G-21

12 · Contrast & legibility — texto sobre media

  • Sin texto encima ni velo; el scan no compite con el titular (display) ni con las cifras del sistema

13 · Asset specifications

PropiedadValor
A11máster 1800×600 (3:1) scan ≥ 300 dpi · servido 1250×417 · sRGB · papel neutro · opaco
PesoHOY JPG q75 ≤ 60 objetivo / ≤ 80 KB máx (L-31; el «250» del manual se corrige, DOC-01) · OBJETIVO AVIF ≤ 40 / ≤ 120 + srcset 640w/1250w
Dónde se subehoy en ningún sitio: campo A6 (DEV-20)
Nombrearchivo_catalogo-<año>_3x1.jpg (L-30)

14 · Accessibility

  • alt informativo con año (G-09); el fallback tipográfico va aria-hidden
  • Nada esencial solo en la imagen: las cifras «70 años · 600+ tiendas · 3M» son texto

15 · Performance — entrega técnica

  • loading="lazy" (bajo el pliegue), alto reservado por aspect-ratio 3/1; ≤ 80 KB

Do

  • Documento real, papel neutro, enderezado, compuesto como forma

Don't

  • Sepia, moiré, inclinación > 0.5°, entorno visible, fondo transparente

Fuentes: patrimonio.phtml:29-32 · home.css:302-316 · inventario 02 §S13, §6.1, §6.17 · E-26, E §3.1 A11 · C §3.8, C §3.24, C T-9 · G-09 · I-24 · ES-9 · L-30, L-31 · DEV-20

M02

Foto de mostrador «Pregunta, Steren responde»

Hueco reservado sin campo de cargaB06 · tile 3

La única foto humana del home fuera del hero: una persona de Steren con gafete atendiendo en un mostrador real, a 16:9, en el tercer tile de «Aprende con Steren» con una cita real del Q&A debajo. Consume una de las tres fotos humanas del funnel (ES-6). Hoy es un hueco sin campo.

1 · Purpose — para qué existe

Demostrar «el mostrador que te resuelve» (E2) con una persona real haciendo algo real; junto a la cita del Q&A, es la prueba de que detrás de la respuesta hay alguien.

2 · Use cases — cuándo usarlo

  • Solo en B06 tile 3 (una por home) cuando exista A07 y el campo (DEV-20)
  • Con personal real con gafete, en su mostrador o taller, manos en un producto; nombre solo con consentimiento

3 · Do not use when — cuándo no

  • Con modelos, stock, IA o renders (ES-6 / ES-11: FAIL de la tanda)
  • Con pose de banco (brazos cruzados mirando a cámara: eso es el retrato M04) o cliente identificable
  • Con texto, velo o degradado sobre la foto; con flash frontal o luz de fluorescente (G>R)
  • Como cuarta foto humana del funnel: si entra otra, sale una (cap 3)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Personapersonal real de Steren con gafete y uniforme visibles, atendiendo o instalando, manos en el producto; cámara a la altura de los ojos (±10 cm), sin picado > 10°; horizonte del mostrador a plomo (±1°)E-20 · E-21 · D-12
Encuadreplano medio: rostro + manos + producto ≥ 30 % del alto; ojos en y 35-45 %; rostro ≥ 44 % del alto para 768; aire 6 % por ladoE §3.1 A07 · C-22
Luznatural cálida (ventana o luz de la tienda): clave:relleno ≤ 3:1; gafete R−B +5..+20 (cálido, no naranja); nunca G>R; sin sombra dura en el muroE-22 (calibrar en la primera sesión)
Fondo y profundidadmostrador real con producto de tienda desenfocado; ≤ 3 planos, desenfoque solo óptico (f/2-f/4 eq.), producto en foco; ≤ 3 colores dominantes fuera del sujeto; sin degradadoE-12 · E-13 · E-15
Contextoescenario (d) mostrador Steren (solo con personal): ≥ 2 anclas de lugar (mostrador, gafete, producto Steren, contacto MX), 0 marcadores «nórdicos»E-11
Slot.learn-photo.ph-slot aspect-ratio 16/9 padding 12 dentro del tile blanco (radio 12, e1) sobre la banda cyan-tint; cita del Q&A debajo → ver B06hueco (DEV-20)
alt«Asesor de Steren con gafete atendiendo en el mostrador» (54); nombre solo con consentimiento; no repite el h3G-03 · I-24

5 · Layout blueprint — plano técnico

M02 · A07 foto de mostrador — lienzo de entrega 1600×900 (16:9, 2×) pinta 413×232 (1440) · 195×110 (768) · 318×179 (390) · servido 840×473 ZONA SEGURA — aire 6 % PERSONA: rostro + manos + producto ≥ 30 % del alto ROSTRO ≥ 44 % del alto → 48 px a 768 OJOS y 35-45 % MANOS EN EL PRODUCTO (foco) fondo: mostrador real, producto desenfocado focal 1600 px 900 px Zona segura = aire 6 % (x 96-1504 · y 54-846); persona (rostro + manos + producto) ≥ 30 % del alto (≥ 270 px); rostro ≥ 44 % del alto (≥ 396 px) para medir ≥ 48 px en el render de 195×110. Registro documental (X-10): personal real con gafete y uniforme atendiendo, manos en el producto, cámara a la altura de los ojos (±10 cm), mostrador a plomo (E-20, E-21); el cliente, si aparece, de espaldas o fuera de foco. Luz natural cálida = luz de ventana o de la tienda: clave:relleno ≤ 3:1, piel sin canal a 255, gafete con R−B entre +5 y +20, nunca G>R ni flash frontal (E-22; umbrales [H], calibrar en la primera sesión). A 768 el tile mide 195×110: para que el rostro mida ≥ 48 px debe ocupar ≥ 44 % del alto del lienzo (plano medio corto) — o [H-C4] dos columnas en tablet. Sin texto encima: la cita del Q&A va DEBAJO, en el tile; no hay velo. ≤ 3 colores dominantes fuera de la persona y el producto (E-12); sin degradado como fondo (E-13).

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440 (y 1920)413×23216:9A07 máster 1600×900 · servido 840×4733.9× desde el máster / 2× servido
1280 / 1024360×203 / 275×15516:9A07
768195×11016:9A07render más chico: rostro ≥ 48 px solo si ≥ 44 % del alto del lienzo; [H-C4] 2 columnas en 768-1023
<768 (390)318×17916:9A071 columna

7 · Safe areas — zonas seguras

Aire 6 % por lado (x 96-1504 · y 54-846 del lienzo). Rostro + manos + producto dentro de ese marco y ≥ 30 % del alto; ojos en y 35-45 %; el rostro ocupa ≥ 44 % del alto (≥ 396 px) para medir ≥ 48 px en el render de 195×110, y el gafete ≥ 16 px de render (≥ 130 px en el lienzo). Nada del sujeto toca los bordes; el fondo (mostrador, anaquel) puede llenar el resto. Sin zona de texto: la cita va en el tile, debajo.

8 · Focal point — punto focal

Las manos sobre el producto y el rostro, en (0.40, 0.40) del lienzo (≈ 640, 360). Ratio fijo: el focal no se mueve entre estados, solo se encoge (413 → 195 → 318 px de ancho). Verificación: a 768 el rostro mide ≥ 48 px y el gafete se reconoce como forma (C-22); ojos dentro de la banda 35-45 %.

9 · Crop behavior — qué pasa entre ratios

Ninguno: el slot es aspect-ratio 16/9 fijo en los tres estados (C-10). Lo que se entrega es exactamente 16:9 (±0.5 %). El máster puede ser 4:3 (1600×1200, como pedía el expediente) o 3:2: el recorte a 1600×900 lo dirige diseño con el focal en (0.40, 0.40) — manda el ratio del slot (X-13 / L-13); el máster se conserva para otros usos.

10 · Responsive behavior — desktop → tablet → móvil

Desktop 1440 · 413×232 persona ojos 413×232 • 3 columnas; rostro ≈ 102 px • servido 840×473 = 2× Tablet 768 · 195×110 rostro ≥ 48 195×110 • render más chico • rostro ≥ 44 % del alto → 48 px • [H-C4] 2 columnas Móvil 390 · 318×179 persona ojos 318×179 • 1 columna • mismo asset; rostro ≈ 79 px

Tres columnas ≥ 768, una en móvil: el tile de la foto es el más chico a 768 (195×110), no en móvil (318×179). Por eso la regla del rostro se calcula sobre tablet. Permanece: 16:9, sin texto encima, cita debajo. Cambia: solo la escala. Se recorta: nada.

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Columnas33 (foto 195×110) — [H-C4] 21
Foto413×232195×110318×179
Rostro (44 % del alto)≈ 102 px≥ 48 px≈ 79 px
AssetA07A07A07

11 · Content rules — límites de copy

CampoLímiteRegla
alt«Asesor de Steren con gafete atendiendo en el mostrador» · 40-125 caracteresG-03 / I-24: no repite el h3 «Pregunta, Steren responde»; nombre solo con consentimiento; sin «imagen de»
Texto en la foto0 salvo lo impreso en gafete, producto o fachada real de SterenE-19 / G-21
Citadel Q&A real, con nombre y fecha, debajo de la fotoNo se inventa; es dato del módulo de Preguntas (B06)
Procedenciaoriginal de cámara con EXIF + _retoque.csv; consentimiento de imagen del personalE-38: retoque no declarado = FAIL de la tanda; manos generadas = FAIL (E-36)

12 · Contrast & legibility — texto sobre media

  • Sin texto sobre la foto: nada que medir con velo. El tile blanco vive sobre cyan-tint (n900 13.59:1 en el texto del tile)
  • Luz: clave:relleno ≤ 3:1 medido en las dos mejillas (PASS ≤ 3:1 · WARNING 3-4:1 · FAIL > 4:1); gafete R−B +5..+20 (WARNING +20..+30 · FAIL > 30 o G>R)
  • Fidelidad del producto en escena: neutros ±10 y tono ±10° respecto a su _x1 (E-14)

13 · Asset specifications

PropiedadValor
A07máster 1600×900 (16:9) · servido 840×473 (2× de 413) · sRGB · personal real con gafete · luz natural cálida · 1 fotograma
Peso HOYJPG progresivo q78 ≤ 60 KB objetivo / ≤ 80 KB máx (L-31; ES-6 ≤ 120 = contrato) · lazy
Peso OBJETIVOAVIF ≤ 40 / ≤ 120 KB + srcset 420w/840w
Mástersi el cliente entrega 4:3 (1600×1200) o 3:2, el recorte 16:9 lo dirige diseño (L-13); se conserva el máster
ProcedenciaRAW o JPEG directo con EXIF (Make, Model, DateTimeOriginal) + _retoque.csv + máscaras de las operaciones declaradas (E-37/E-38); tarjeta gris al inicio de la sesión para balancear (E §3.4)
Dónde se subehoy en ningún sitio: campo A3 en config (DEV-20); mientras, ph-slot mudo
Nombrehumano_mostrador-<tienda>_16x9.jpg (cap.07 §Nomenclatura, L-30; el mismo archivo que consume B06)

14 · Accessibility

  • alt humano informativo (G-03) que no repite el h3 ni la cita; sin figcaption de nombre salvo consentimiento (entonces alt="")
  • Rostro ≥ 48 px y gafete ≥ 16 px en el render más chico (195×110): C-22 / RS-22
  • Ninguna información vive solo en la foto: la cita, el nombre y la fecha son texto

15 · Performance — entrega técnica

  • loading="lazy" + decoding="async" (nunca LCP: bajo el pliegue, banda 9 de 10); alto reservado por aspect-ratio 16/9 → CLS 0
  • HOY se serviría original: subir la versión web 840×473 ≤ 80 KB, no el máster (AS-12)
  • OBJETIVO: srcset 420w/840w + sizes por columna (413 / 195 / 318 px)

Do

  • Persona haciendo algo con el producto en un mostrador reconocible; plano medio corto (rostro ≥ 44 % del alto)
  • Luz de ventana o de la tienda; horizonte a plomo; ≤ 3 colores fuera del sujeto
  • Original con EXIF y declaración de retoque; consentimiento firmado

Don't

  • Pose de banco, modelo, stock, IA, cliente con rostro
  • Plano tan abierto que el rostro mida 30 px a 768
  • Flash frontal, fluorescente verdoso, degradado o texto sobre la foto
  • Entregar el máster 4:3 sin el recorte 16:9 dirigido

Fuentes: aprende.phtml:56-57 · home.css:319-361 · inventario 02 §S14, §6.1, §6.17 · ES-6 (a), ES-11 · E-11…E-15, E-20…E-22, E-36…E-38, §3.1 A07, T-3 · C-10, C-22, §3.9, §3.24, T-10 ([H-C4]) · G-03, G-21 · I-24 · H §3 (A07) · X-10, X-13 · L-13, L-30, L-31 · DEV-20

M03

Avatar del asesor

Hueco reservado sin campo de cargaPDP «Pregúntale a Steren» (64 px)

El rostro del asesor junto a la respuesta oficial en el Q&A del PDP: círculo de 64 px con un retrato 1:1 (A09 800×800 máster, servido 192²). Hoy no hay <img>: el círculo pinta las iniciales «St» sobre primary (hueco sin campo, DEV-20). Tercera foto humana del funnel (ES-6).

1 · Purpose — para qué existe

Que la «respuesta oficial de Steren» tenga una cara real con nombre (ES-7): a 64 px solo sobrevive un rostro grande y bien iluminado.

2 · Use cases — cuándo usarlo

  • Solo en preguntas.phtml (.qa-photo 64×64, border-radius 50%), una persona por PDP, con su nombre en texto al lado

3 · Do not use when — cuándo no

  • Con busto entero, grupo, fondo con ruido, filtro o logo: a 64 px es una mancha
  • Con modelo, stock o IA; sin consentimiento
  • Como cuarta foto humana del funnel

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Encuadreretrato 1:1 (800×800): rostro 55-70 % del ancho, ojos al 45-50 % del alto (E-25); cabeza = 70-80 % del alto, hombros al borde inferior (C §3.20); mirada a cámara permitida (E-21); sonrisa natural; el gafete puede quedar fuera (el nombre va en HTML)E-25 · C §3.20
Círculosujeto dentro del círculo inscrito (70 % central): nada del rostro en las esquinas (C-13)C-13
Fondo y luzfondo liso (muro de tienda o bg-subtle), luz suave 2:1-3:1, balance neutro; recorte con alpha solo si hace falta (PNG-24, AS-08)E §3.1 A09 · E-23
Slot.qa-photo 64×64, border-radius 50%, bg primary #0093D0, «St» 20/600 blanco (pdp.css:668-670); aria-hidden hoy; spec anotada «asesor con gafete, 400×400 WebP» (preguntas.phtml:32)hueco (DEV-20)
altalt="" si nombre y rol son texto visible al lado; si no, «Foto de [Nombre], asesor de Steren»G-04 · I-24

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
todos64×64 circular (igual en 1440 y 390)1:1A09 máster 800×800 · servido 192×192 (3×)a 64 px el rostro debe medir ≥ 36 px (E-25: PASS ≥ 36 · WARNING 30-36 · FAIL < 30); con cabeza al 70-80 % mide ≈ 48 (C-22 justo)

7 · Safe areas — zonas seguras

Círculo inscrito (70 % central): rostro centrado, ojos en y 45-50 %, coronilla dentro del círculo; nada crítico en las esquinas del cuadrado.

8 · Focal point — punto focal

Los ojos (0.50, 0.47).

9 · Crop behavior — qué pasa entre ratios

Ninguno por estado (64 px siempre); recorte circular por CSS: se pierden las esquinas del 1:1.

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Avatar646464
AssetA09 192²igualigual

11 · Content rules — límites de copy

CampoLímiteRegla
altalt="" con nombre y rol al lado; si no, «Foto de [Nombre], asesor de Steren» ≤ 125G-04: binario
Nombrereal, en texto junto al avatar (sello «Respuesta oficial de Steren · nombre · fecha»)D-12 · ES-7; consentimiento

12 · Contrast & legibility — texto sobre media

  • Sin texto sobre la foto; el aro/fondo del círculo no porta información; hoy «St» blanco sobre primary = 3.45:1 (texto 20/600: bajo AA, pero es decorativo-redundante y aria-hidden)

13 · Asset specifications

PropiedadValor
A09máster 800×800 (1:1) · servido 192×192 · JPG q80 (PNG-24 solo con recorte alpha) · fondo liso · 1 fotograma
PesoHOY ≤ 10 KB objetivo / ≤ 20 KB máx (cap.07; ES-7 ≤ 80 = contrato; 240² medido 4.7-8.4 KB) · OBJETIVO AVIF ≤ 3 / ≤ 80 + srcset 128w/192w sizes="64px"
Dónde se subehoy en ningún sitio: el módulo Industrias_Preguntas no declara campo de foto (DEV-20)
Nombrehumano_asesor-<nombre>_1x1.jpg (cap.07 §Nomenclatura, L-30)
Procedenciaoriginal con EXIF + consentimiento (E-38)

14 · Accessibility

  • G-04 (alt="" con nombre adyacente); rostro ≥ 36 px a 64 (E-25) / ≥ 48 ideal (C-22)
  • El avatar no es enlace ni control

15 · Performance — entrega técnica

  • lazy + decoding="async"; 64×64 declarados (CLS 0); ≤ 20 KB; srcset 128w/192w cuando exista el campo

Do

  • Rostro grande, ojos a media altura, fondo liso, luz suave
  • Probar a 64 px antes de cargar

Don't

  • Busto entero, foto de grupo recortada, fondo de tienda con ruido, filtro
  • Iniciales como solución permanente

Fuentes: preguntas.phtml:31-34 · pdp.css:668-670 · inventario 02 §S15, §6.1 · E-21, E-23, E-25, §3.1 A09 · C-13, C-22, §3.20, §3.24 · G-04 · I-24 · ES-6, ES-7 · AS-08 (cap.07) · L-30 · DEV-20

M04

Retrato de servicio

Construido en el temaH04

El retrato del instalador que da cara a Tech Services: persona real de Steren, medio cuerpo, gafete, sobre fondo que se funde con el navy, a 4:5 (1200×1500 máster, servido 840×1050). Hoy tecnico.webp 518×626 (1.23×, fondo azul saturado): WARNING aceptado (L-14). El slot es H04; esta ficha es el asset.

1 · Purpose — para qué existe

«Un técnico va a tu domicilio» se demuestra con el técnico (E2): un retrato de estudio con nombre y puesto, uno por página de servicio, fuera del cap del funnel (X-8).

2 · Use cases — cuándo usarlo

  • Páginas de servicio (Tech Services y futuras): exactamente un retrato por página, con nombre real y puesto en figcaption
  • Con la geometría del slot H04: columna 420 (≥1024) / 300 (768) y cover anclado arriba en móvil (358×300)

3 · Do not use when — cuándo no

  • En el funnel de compra (home → PDP): el cap de 3 fotos humanas es documental, no de retratos
  • Con modelo, stock o IA; con fondo saturado nuevo (L-14 solo tolera el actual); con degradado detrás
  • Recortado a 1:1 u otro ratio para reutilizarlo en otro slot
  • Con texto en la foto (nombre, puesto o teléfono): eso es HTML

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Sujetopersonal real de Steren, medio cuerpo, uniforme y gafete visibles, mirada a cámara permitida (es retrato, E-21), corte a la cintura, a sangre por abajo; nombre real en el pie (D-12)E-20 · E-21
Encuadre 4:5coronilla al 4-10 %, ojos al 22-30 %, gafete en y 30-52 %, manos y brazos dentro del 67 % superior; 20 % inferior libre de rostro y de texto del gafete (friso)E-24
Luzestudio neutro: 2-3 luces, clave:relleno 2:1-3:1, catchlight en ambos ojos, balance neutro (gafete R≈G≈B ±6)E-23
Fondoliso, igualado al navy (≤ 25 RGB de #002F57 en 3 muestras) o gris medio neutro para recorte (lum 100-160 ±4); a ≥ 60 RGB del uniforme para que la silueta se lea; sin sombra en el fondoE-23 (PASS · WARNING 25-60 del navy · FAIL saturado ajeno, degradado, < 60 del uniforme)
Frisofigcaption absoluto con linear-gradient(to top, rgba(0,47,87,.92), rgba(0,47,87,0)), nombre 14/600 blanco, puesto 12 al 80 %: variante «friso» del velo (excepción E-8, solo H04)sistema
Archivo actualtecnico.webp WebP VP8 518×626, 24.6 KB, versionado en TEMA/web/images/tech-services/ (único WebP del sitio; funciona por ser estático, no pasa por uploader); cambiarlo = despliegueWARNING C-17 (1.23×) + WARNING L-14 (fondo)
Procedenciaoriginal de cámara con EXIF + _retoque.csv; consentimiento de imagen; retoque solo de limpieza de fondo (E-37a), jamás «embellecer» (E-36)E-38 · E-39

5 · Layout blueprint — plano técnico

M04 · A10 retrato de servicio — lienzo de entrega 1200×1500 (4:5, 2×) · encuadre pinta 420×508 (≥1024) · 300×363 (768) · 358×300 cover top (<768) · servido 840×1050 SE PIERDE <768 (cover top 358×300: 67 % visible) línea del 67 % 20 % INFERIOR: friso navy 92→0 — nombre · puesto coronilla 4-10 % OJOS 22-30 % (WARNING 18-22 / 30-34) GAFETE 30-52 % (fuera del móvil y del friso) cabeza, hombros y manos dentro del 67 % canto 12 px canto 12 px focal 1200 px 1500 px Recorte móvil: `object-position: 50% 0` muestra el 67 % superior (358×300); el 20 % inferior queda para el friso (nombre · puesto): sin rostro ni texto del gafete. Registro «retrato de servicio» (X-10, excepción E-7): estudio neutro, 2-3 luces, clave:relleno 2:1-3:1, catchlight en ambos ojos, balance neutro (gafete R≈G≈B ±6); medio cuerpo, mirada a cámara permitida, corte a la cintura, a sangre por abajo. Fondo liso IGUALADO AL NAVY (distancia RGB a #002F57 ≤ 25 en 3 muestras) o gris medio neutro para recorte (lum 100-160, ±4), y a ≥ 60 RGB del uniforme (E-23). `tecnico.webp` actual: degradado (39,118,235) → (1,32,163), a 169 del navy y a 13.6 de la camiseta: no recortable, se usa como panel fotográfico → WARNING aceptado (L-14) hasta la re-sesión (CONT-01). Cantos superiores redondeados 12 px en móvil: nada en las esquinas superiores. El nombre y el puesto van en HTML (`figcaption`), nunca en la foto.

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1024 (1440 / 1920)420×508 (height:auto; max-height 520)0.83 (4:5)A10 máster 1200×1500 · servido 840×1050100 % visible; hoy 518×626 = 1.23× (WARNING C-17)
768-1023300×3630.83A10100 % visible; rostro ≥ 192 px de lienzo (escala 0.25) para ≥ 48 px
<768 (390)358×300 cover, object-position: 50% 01.19A10 (mismo)se ve el 67 % superior; el friso cae sobre y 56-69 % del lienzo; cantos superiores 12 px

7 · Safe areas — zonas seguras

Sobre el lienzo 1200×1500: coronilla 4-10 % (60-150 px), ojos 22-30 % (330-450 px), gafete y 30-52 % (450-780 px: fuera del 33 % que pierde el móvil y fuera del friso), manos y brazos dentro del 67 % superior (≤ 1005 px), cabeza y hombros en x 10-90 %. El 20 % inferior (≥ 1200 px) queda para el friso: sin rostro ni texto del gafete. Esquinas superiores libres (radio 12 en móvil). Un solo asset resuelve los tres estados si el gafete queda por encima del 52 %.

8 · Focal point — punto focal

Los ojos, en (0.50, 0.26). El recorte móvil es top-anchored: el focal no se mueve, se recorta el pie. Verificación: superponer las líneas del 67 % y del 80 %; a 358×300 el rostro mide ≥ 48 px y el gafete ≥ 16 px (C-22); catchlights visibles al 100 %.

9 · Crop behavior — qué pasa entre ratios

Solo <768: cover con object-position: 50% 0 sobre una caja 358×300 muestra el 67 % superior del 4:5 (pierde el 31-33 % inferior). En ≥768 el retrato se ve entero (0.83, height:auto). El plano de ventanas de abajo dibuja la ventana móvil anclada arriba (y 0-67 %), igual que el tema; las dos de ≥768 casi coinciden con el asset. Ver H04 §9-10 para el slot.

Asset 1200×1500 — lo que se ve según el ancho de pantalla (cover; anclaje por ventana) 1 1 · ≥1024 420×508 (viewport 420×508) ve 1200×1451 px del asset → recorte vertical 3% 2 2 · 768 300×363 (viewport 300×363) ve 1200×1452 px del asset → recorte vertical 3% 3 3 · <768 358×300 cover top (viewport 358×300, anclado arriba) ve 1200×1006 px del asset → recorte vertical 33%

10 · Responsive behavior — desktop → tablet → móvil

La geometría del slot (columna 1fr 300px → 1fr 420px, apilado en móvil, friso, cantos) está en la ficha H04; aquí solo lo que le pasa al asset: entero en ≥768, recortado por abajo en <768. Sin asset alterno: el friso es top-anchored.

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Retrato420×508 entero300×363 entero358×300: 67 % superior
Rostro (lienzo → render)≥ 192 px → 67≥ 192 px → 48 (escala 0.25)≥ 192 px → 57
Friso20 % inferior20 % inferiorsobre y 56-69 % del lienzo
AssetA10A10A10 (mismo)

11 · Content rules — límites de copy

CampoLímiteRegla
figcaptionnombre real · puesto (≤ 40 caracteres)Consentimiento de imagen del personal; «Rodrigo Hernández · instalador»
altalt=""I-24 / G-03: el figcaption porta nombre y rol; un alt que los repita = lectura doble
Texto en la foto0 (solo lo impreso en el gafete)E-19 / G-21
Procedenciaoriginal con EXIF + _retoque.csv + máscara si hubo limpieza de fondoE-38: sin declaración = «sin retoque»; si QA detecta lo contrario, FAIL

12 · Contrast & legibility — texto sobre media

  • Nombre blanco sobre el friso navy 92 % ≥ 7:1 en la zona ≥ 75 % del degradado (G §3 H04): medir que los renglones no suban al fundido
  • Fondo del retrato a ≥ 60 RGB del uniforme (E-23) para que la silueta se lea; a ≤ 25 RGB del navy para que el retrato «flote» en el panel sin costura
  • Piel sin canal a 255; catchlights en ambos ojos; sin sombra proyectada en el fondo
  • Foco de los CTAs del panel: .on-navy (DEV-04) — del slot, ver H04

13 · Asset specifications

PropiedadValor
A10máster 1200×1500 (4:5) · servido 840×1050 (2× de 420) · sRGB · estudio neutro · fondo igualado al navy (≤ 25 RGB) o gris de recorte · 1 fotograma
Peso HOYWebP q80 840×1050 ≤ 70 KB objetivo / ≤ 120 KB máx (cap.07 A10; estático del tema: WebP sí funciona ahí; tecnico.webp 0.076 B/px → ≈ 67 KB estimado) · JPG q75 si vive en pub/media
Peso OBJETIVOAVIF ≤ 40 / ≤ 120 KB + srcset 420w/840w
Actualtecnico.webp 518×626 (0.83), 24.6 KB, fetchpriority="high": 1.23× a 420 px (WARNING C-17) y fondo azul saturado con degradado (WARNING aceptado L-14 → CONT-01 re-sesión)
Dónde se subeversionado en el tema (TEMA/web/images/tech-services/): cambiarlo = despliegue; sin campo. La página legacy instalaciones referencia /media/tech_services/tech.jpg y lineup.jpg que no existen
Nombreretrato_<nombre-apellido>_4x5.jpg (L-30; .webp si vive como estático del tema)
ProcedenciaRAW o JPEG con EXIF + _retoque.csv + consentimiento (E-38)

14 · Accessibility

  • alt="" + figcaption con nombre y puesto: patrón correcto (G-03, I-24)
  • Rostro ≥ 48 px y gafete ≥ 16 px en el render más chico (358×300): C-22
  • Nombre y puesto son texto; el friso no tapa el gafete (E-24)
  • Foco sobre navy con ring-inverse (DEV-04): del slot H04

15 · Performance — entrega técnica

  • Es la LCP de Tech Services: fetchpriority="high" ✓, eager, width/height 518×626 ✓; sin <link rel="preload"> (PF-02 WARNING) y sin srcset (H P2 ítem 14: 840×1050 + srcset 420w/840w)
  • HOY 24.6 KB (sub-resolución 0.62× en DPR 2); con 840×1050 WebP ≈ 67 KB estimado ≤ 120 KB contrato
  • Estático del tema: no pasa por uploader ni por caché de resize; el formato lo decide diseño (WebP/AVIF posibles)

Do

  • Medio cuerpo, gafete en y 30-52 %, ojos en 22-30 %, 20 % inferior libre
  • Fondo liso que se funde con el navy (≤ 25 RGB) o gris de recorte; luz de estudio 2:1-3:1 con catchlights
  • Entregar 1200×1500 + original con EXIF; producir la versión web 840×1050

Don't

  • Fondo azul saturado con degradado (el actual: solo tolerado hasta la re-sesión)
  • Recortar a 1:1 el retrato para otro slot
  • Texto en la foto; gafete bajo el friso; rostro cortado en el 67 %
  • «Embellecer» rostro o piel con IA (E-36: FAIL de la tanda)

Fuentes: steren-tech-services.html:45-48 · servicio.css:41-52, 100-112 · inventario 02 §S16, §3, §6.18 · E-20, E-21, E-23, E-24, E-36…E-39, §3.1 A10, T-4 · C-17, C-22, §3.4, §3.24 · G-03, G §3 H04 · I-24, I §3 · H §1.1, H §3 (A10), H P2 ítem 14 · AD-21 (cap.04) · X-8, X-10 · L-14, L-26 (E-8), L-30 · CONT-01, DEV-04 · ficha H04 (slot)

M05

Página de marca «Nosotros»

Construido en el temaNosotros

La página de marca: el video institucional (Vimeo 871912462) sube al principio bajo la cabecera y la filosofía se despega sobre navy — misión/visión en dos columnas y cuatro valores en cuatro discos con glifos monolínea. Sin fotografía propia: cero fotos humanas, y el video hoy carga eager sin facade.

1 · Purpose — para qué existe

Contar quién es Steren con lo que ya tiene (video + palabra + iconografía propia), sin stock ni ilustración figurativa (X-9). La multimedia de la página es el video: su ficha es V03.

2 · Use cases — cuándo usarlo

  • Como está: video V03 + texto + glifos del sprite (24-grid, trazo 1.75; +5 símbolos de la filosofía; i-shield ya existía, no se duplica)
  • Propuesta [H] (B T-4): registro aparte para páginas de marca — 1 foto documental (mostrador, fábrica o CEDIS) bajo B-18, fuera del cap del funnel (misma lógica que X-8), si algún día la página lleva foto humana

3 · Do not use when — cuándo no

  • Con fotos de stock, banco o IA para «humanizar» la página
  • Con el video como autoplay o como fondo (V05 no autorizado, L-17)
  • Con ilustración figurativa: solo SVG monolínea del sistema (X-9)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Video.marca-video extraído del CMS (legales/nosotros.html:40) y subido bajo la cabecera (marca.phtml:37-41, 103-105); iframe Vimeo width 960 height 540, allow="autoplay; fullscreen; picture-in-picture", title="master_steren (2160p)", sin loading="lazy", sin facade, sin póster→ V03 (DEV-11)
Filosofíasobre navy con tokens on-navy: misión y visión en dos columnas; cuatro valores en cuatro discos con glifos monolínea 24-grid trazo 1.75 (marca.phtml:48-77); el mapa de glifos vive en la plantilla, no en el contenidosistema · D04
Otras imágenesninguna (texto + glifos del sprite)—
Trampasel limpiador del CMS borraba todas las imágenes; los <img> del vivo usaban srcset sin src; Vimeo responde 401 fuera de steren.com.mx (en local el video es una caja negra)expediente §2.25

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1024video 891×501 (.marca-int--ancho max 891)16:9V03: póster 1782×1002 + iframe al clicprint: oculto
768736×41416:9V03
<768358×20116:9V03

7 · Safe areas — zonas seguras

Del póster V03: sujeto en el centro, play ≥ 44 px al centro (F-29).

8 · Focal point — punto focal

El video (primera pieza bajo la cabecera).

9 · Crop behavior — qué pasa entre ratios

Ninguno (caja aspect-ratio 16/9, radio 12, fondo n900).

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Video891×501736×414358×201
Filosofía2 columnas + 4 discos2 columnasapilado

11 · Content rules — límites de copy

CampoLímiteRegla
iframe title«Video institucional de Steren» (hoy «master_steren (2160p)»)G-32 / F-31
Transcripciónplegable bajo el video, etiquetada como alternativa; CC es-MX en VimeoG-32 / F-31 (FAIL hoy)
Duraciónsin dato: obtener con oEmbedF §3 V03

12 · Contrast & legibility — texto sobre media

  • Blanco 13.60:1 y cian 5.49:1 sobre navy plano en la filosofía; glifos aria-hidden decorativos

13 · Asset specifications

PropiedadValor
Ninguno propiovideo en Vimeo + póster V03 (fotograma real 1782×1002 ≤ 150 KB, clase hero) cuando exista la facade (DEV-11)
Foto documental [H]si se aprueba el registro de marca: A07-like 16:9 bajo B-18 y E-20…E-22, fuera del cap ES-6

14 · Accessibility

  • G-32: facade con <button> y póster real, title en español, CC + transcripción; hoy FAIL (iframe eager, title de archivo)
  • Glifos aria-hidden focusable="false" (G-10); texto real para misión, visión y valores

15 · Performance — entrega técnica

  • LCP hoy = h1 (texto); el iframe de Vimeo es un tercero eager (0 → 1 petición a player.vimeo.com sin gesto: FAIL F-02 / PF-13) → facade DEV-11; con facade la LCP pasa a ser el póster (fetchpriority="high")
  • CSP: player.vimeo.com lo aporta Magento_ProductVideo (frame-src), no el tema (F T-4 corrige al inventario)

Do

  • Facade V03 + póster real + transcripción
  • Glifos del set propio para la filosofía

Don't

  • Stock, IA o «equipo sonriendo» de banco
  • Iframe eager, autoplay, video de fondo

Fuentes: marca.phtml:37-41, 48-77, 103-105 · marca.css:37-39, 106-107, 123-125 · legales/nosotros.html:40 · inventario 02 §S17, §6.14 · expediente 01 §2.25 (L1774-1779, L1823-1826, L1898-1906, L4466-4467) · B §3 M05, B T-4, B-18 · F-29…F-32, F §3 V03, F T-4 · G-10, G-32 · X-8, X-9 · L-17, L-19 · DEV-11

V01

Banda de videos comprables (Terrific)

Construido en el temaHome (mosaico → banda 1) · PLP/landing al final

La banda «Míralo en video» (home, y al final de PLP/landing): video comprable de mercadotecnia servido por el SDK de Terrific. El tema decide si se pinta, con qué playlist y dónde; formato, póster, controles, autoplay y carrusel los decide el SDK — por eso esta ficha es un contrato con el contenido y con el proveedor, verificable en el panel de Terrific y en calidad2.

1 · Purpose — para qué existe

Mostrar producto real en uso, en vertical, dentro de una banda que no compite con el hero ni con los carruseles de producto («al no ser carrusel de producto no rompe la regla de ritmo», EXP L4423-4424). Es la única pieza del home que carga un tercero antes del gesto: solo terrific-sdk.js, nunca media.

2 · Use cases — cuándo usarlo

  • Home: entre el mosaico y la banda de categoría 1 (cms_index_index.xml:64-68), orden cerrado por Tona (E-20); config industrias_tema/home_videos/activo + embedding_id
  • Categoría: al final del contenido (PLP tras la guía y la isla de filtros; landing tras el mosaico) con videos_activo + videos_embedding_id por categoría (GLOBAL, grupo Content) — hoy «los de categoría no existen todavía en la cuenta» (EXP L4605)
  • Solo con una playlist viva: sin iframe a los 8 s la banda se retira sola (E-19)

3 · Do not use when — cuándo no

  • Como sustituto del hero ni como primera pantalla: es una banda, no la campaña
  • En el PDP (ahí vive P05, el video del producto, con facade propia)
  • Más de una banda por página; ni una playlist con piezas horizontales o cuadradas (F-09)
  • Con contenido tipo spot: precio, %OFF, CTA o legales quemados (F-07) — se regresa

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Encabezadoh2.st-heading-onda «Míralo en video» (onda uso (a), D01); en categoría .plp-videos h2 { font-size: var(--st-fs-h) } — --st-fs-h no existe → cae al h2 base 24 px (catalogo.css:744-745)sistema · hueco 15
Contenedor.hv-embed > div[data-source=terrific][embedding-id] (home) · .pv-embed dentro de .plp-videos { padding-block: 24px 32px } (categoría); sin CSS de alto → el iframe mide lo que decida el SDKDEV-10: min-height por breakpoint cuando se mida
SDK<script defer src="https://terrific.live/terrific-sdk.js" storeId="DqUXwEIwVO2mYFektfm0">; «el iframe del carrusel lo sirve Firebase, no terrific.live» (EXP L4434-4436)único tercero antes del gesto
Iframe del SDKcarrusel de miniaturas 9:16 (6 visibles a 1440 en calidad2, EXP L4457); pósters, previews, controles y autoplay: del SDK, no del temarequisitos F-13 / F-16
Retiradahome.js:116-122 / videos.js:8-14: si a los 8 s no hay <iframe> dentro, banda.hidden = true — hoy sin condición de viewportF-15: retirar solo fuera de vista (DEV-10)
CSPTHEME/etc/csp_whitelist.xml: script/connect/img/media/frame para terrific.live, *.terrific.live, storage.googleapis.com, terrific-live-polls.web.app; «CSP report-only miente para bien» (EXP L4461-4464)verificar en enforce (Q-27)
Contenido (A13)playlist en el panel de Terrific: video 9:16 1080×1920, 15-45 s, producto en t=0, mudo por defectoF-09 … F-14

5 · Layout blueprint — plano técnico

V01 · contenido 9:16 1080×1920 — safe area 14 % superior ≈270 px — UI del SDK 35 % inferior ≈672 px: nada crítico 20 % inferior ≈384 px — UI / tarjeta 6 % 6 % ZONA ÚTIL ≈950×975 SUJETO x 20-80 % · y 15-65 % subtítulos: y 65-80 % 1080 px 1920 px Franjas F-14 [H]: corregir con la UI real del SDK medida en calidad2 (local2 da 403, nunca renderiza). Póster = fotograma 0 (F-11) · sin texto (F-07).

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1440alto del iframe: medir en calidad2 (6 miniaturas visibles, EXP L4457)banda del SDK · contenido 9:16A13 playlist 9:16 1080×1920 en el panel de Terrificreservar min-height cuando se mida (DEV-10)
1024–1279medir en calidad29:16 por miniaturaA13sin CSS propio
768–1023medir en calidad2 (≈4 miniaturas, probable — C §3.21)9:16A13
<768 (390)medir en calidad2 (≈2,2 miniaturas, probable — C §3.21)9:16A13el colapso a los 8 s debe reflowear sin salto bajo el pliegue

7 · Safe areas — zonas seguras

Sobre el contenido 9:16 (1080×1920), plantilla F-14 [H] (práctica estándar de formatos verticales, a ajustar con la UI real del reproductor de Terrific medida en calidad2): sujeto y subtítulos fuera del 14 % superior (≈270 px), del 20 % inferior (≈384 px) y del 6 % lateral (≈65 px); nada crítico en el 35 % inferior (≈672 px), donde el SDK monta botones y tarjeta de producto. Zona útil ≈950×975 centrada. Caja del sujeto: x 20-80 % · y 15-65 % (C §3.21 ∩ F-14). Los subtítulos abiertos viven entre y 65 % y 80 %: si rozan la banda inferior es WARNING; producto o texto bajo la UI del reproductor es FAIL. Verificación: superponer la plantilla sobre 3 fotogramas (0 s, mitad, final) y registrar en calidad2 dónde pinta el SDK botones/tarjeta.

8 · Focal point — punto focal

No consta en ninguna fuente. Hasta medir la UI del SDK: el producto en uso ocupa el centro de la caja del sujeto — (50 %, 40 %) del cuadro, centro geométrico de x 20-80 % · y 15-65 % [H]. Debe ser reconocible en t=0 (sin intro de logo ni fundido desde negro, F-10): el fotograma 0 es el póster (F-11).

9 · Crop behavior — qué pasa entre ratios

El tema no recorta nada: el SDK pinta la miniatura 9:16 (a confirmar en calidad2: si escala, recorta o añade barras). Lo que sí «recorta» es la UI del reproductor sobre el 35 % inferior y el 14 % superior — de ahí la safe area. Un 16:9 girado, con barras o recortado a vertical es FAIL F-09 (letterbox = filas negras superiores/inferiores = 0). El sentido de «pósters de 3 s» (EXP L4576) — ¿previews en movimiento o pósters que tardan 3 s? — se mide, no se supone (F-13, T-5): captura a 0 / 1 / 3 / 6 s.

10 · Responsive behavior — desktop → tablet → móvil

Sin tira: no hay caja que dibujar mientras el alto del iframe no se mida (L-18). Lo que cambia por breakpoint lo decide el SDK; lo que el tema debe garantizar es alto reservado y retirada sin salto.

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Miniaturas visibles6 (medido en calidad2 a 1440, EXP L4457)≈4 — probable, medir≈2,2 — probable, medir
Alto del iframemedir en calidad2medirmedir
Encabezado.st-heading-onda; en categoría 24 px (token roto)igualigual
Retirada a 8 shidden sin condición → debe ser solo fuera del viewport (DEV-10)igualigual: la banda suele estar bajo el pliegue
Save-Data / reduced-dataSDK carga siempre con defer (WARNING F-53)igualigual — [H] no cargar el SDK con Save-Data: on

11 · Content rules — límites de copy

CampoLímiteRegla
Formato9:16 exacto, 1080×1920, 25/30 fps, H.264/AAC (WARNING 720×1280 · FAIL horizontal/cuadrado)F-09: ffprobe -show_streams; sin letterbox. Resolución/fps [H]: confirmar límites del panel de Terrific
Duración15-45 s (WARNING 45-60 · FAIL >60)F-10
Arranqueproducto reconocible en t=0 (WARNING 2-3 s · FAIL intro >2 s o negro)F-10: fotogramas 0 / 1 / 2 s; luminancia del fotograma 0 ≥25 %
Póster= fotograma 0: nítido, producto sobre fondo real (ES-11), sin texto, luminancia 25-85 %, sin barridoF-11: ffmpeg -vframes 1; si el SDK toma otro fotograma, documentar cuál (WARNING)
Sonidomudo por defecto; con audio: voz o ambiente (nunca solo música), −16 LUFS ±2, pico ≤ −1 dBTPF-12 [H] niveles: ffmpeg -af ebur128; en calidad2 el <video> del SDK carga muted
Texto quemadosolo subtítulos ≤2 líneas; 0 precio / oferta / % / CTA / legales / logos de tercerosF-07: muestreo a 1 fps; el nombre del producto va en HTML (etiqueta del SDK/sistema)
SubtítulosCC del proveedor o abiertos en es-MX si hay voz; letra ≥3.5 % del alto del cuadro a 390 pxF-06 / G-30: sin subtítulos con voz no se publica
Previews del SDKmudos, ≤3 s, sin bucle sonoro, se paran con reduced-motion (WARNING bucle mudo · FAIL con audio o ignorando reduce)F-13; G-25: si auto-avanzan >5 s, botón «Pausar/ocultar videos» del sistema

12 · Contrast & legibility — texto sobre media

  • Lo que pinta el SDK sobre el fotograma (título, precio, play) no lo controla el tema: medir en calidad2 contraste y tamaño de sus overlays (C §3.21); play del proveedor ≥3:1 sobre el fotograma (G-19)
  • El encabezado es texto del sistema sobre bg: n900 estándar; la banda no lleva velo ni fondo propio
  • Fotograma 0 con luminancia 25-85 % (ni negro ni blanco): condición para que cualquier overlay del SDK se lea (F-11)

13 · Asset specifications

PropiedadValor
A13playlist vertical en el panel de Terrific · home embedding_id default 10EKNgMzTAlT6ZdtkImM (THEME/etc/config.xml:52-55) · storeId DqUXwEIwVO2mYFektfm0 (CategoriaVideos::STORE_ID)
Video9:16 1080×1920 · 25/30 fps · H.264/AAC · 15-45 s · mudo por defecto · producto en t=0 · sin texto salvo subtítulos
Pósterel fotograma 0 (no se entrega archivo aparte); si el SDK elige otro, se documenta en esta ficha (F-11)
Nombrevideo_<sku>_9x16.mp4 (L-30 con tipo video, ENM-11); el panel de Terrific lleva el SKU en el título
Confighome: industrias_tema/home_videos/activo + embedding_id (system.xml:155-166) · categoría: videos_activo (boolean, default 0) + videos_embedding_id (varchar) — AddCategoryVideos.php:39-69, category_form.xml:129-164
Dónde se vecalidad2 y producción; local2 nunca («Terrific restringe por dominio/esquema — en local2 (http) da 403 y la banda se va», EXP L4431-4432)

14 · Accessibility

  • Checklist de terceros antes de encender (G-34): Tab alcanza play/pausa/siguiente, Esc cierra overlays, sin trampa de foco, subtítulos, muted, reduced-motion, iframe title en español, targets ≥24; lo que el proveedor no cumpla va a la declaración de accesibilidad y se escala
  • iframe title del SDK: obtener (G §3); el h2 da nombre a la banda
  • Movimiento >5 s que arranca solo (auto-avance, previews) exige pausa/ocultar visible y por teclado (G-25); hidden a la banda cuenta como «ocultar»
  • El embed no roba el foco (document.activeElement sigue en body), no inyecta position: fixed fuera de .home-videos ni role=dialog ajenos (F-16)
  • Nunca audio sin gesto (G-29 / F-01)

15 · Performance — entrega técnica

  • Antes del gesto solo terrific-sdk.js (defer): 0 peticiones de media (F-01/F-53); con Save-Data hoy el SDK carga igual → WARNING
  • Alto reservado: .hv-embed/.pv-embed con min-height por breakpoint medido en calidad2 (F-15, DEV-10); Layout Instability con y sin Terrific respondiendo → CLS 0 (Q-04)
  • Retirada a los 8 s solo cuando la banda no está en el viewport (F-15/F-55); hoy hidden = true sin condición desplaza lo que esté en vista
  • Medir getBoundingClientRect().height del contenedor a 0 / 3 / 8 / 10 s (F-55)
  • CSP en enforce con los 4 hosts (Q-27); --st-fs-h a definir o sustituir (hueco 15)

Do

  • Producto en uso desde el primer fotograma, en contexto mexicano real (ES-11)
  • Vertical nativo 1080×1920, 15-45 s, mudo por defecto, subtítulos si hay voz
  • Sujeto en x 20-80 % · y 15-65 %; el 35 % inferior sin nada crítico
  • Medir en calidad2 antes de escribir cifras: alto del iframe, previews, overlays del SDK

Don't

  • 16:9 recortado o con barras como «vertical»
  • Intro de logo, fundido desde negro, música sola
  • Precio, %OFF, CTA o legales quemados en el video
  • Reservar el alto «a ojo» o dejar que la banda desaparezca a media pantalla
  • Probar en local2 y concluir que la banda «no funciona» (es el 403 de Terrific)

Fuentes: F-01…F-16, F-51, F-53, F-55 · inventario 02 §S8, hueco 15 · expediente 01 §2.10 (L4423-4436, L4457, L4576, L4605) · C §3.21 (C-23) · G-25, G-26, G-29, G-34 · L-18, L-29 (DEV-10, DEV-18) · E-12, E-19, E-20

V02

Reels «Así se usa»

Hueco reservado sin campo de cargaHome

Tira de pósters verticales 9:16 con play que llevan al PDP: producto real en casa real, en vertical. Construida y apagada: HomeReels devuelve vacío mientras 377/378 videos (Vimeo) tengan el placeholder gris «VIDEO» como miniatura. Se publica con 4+ pósters reales o no existe (E-19).

1 · Purpose — para qué existe

Convertir el video de producto que ya existe (378 videos) en una puerta al PDP desde el home, sin incrustar «un iframe de terceros en la página más medida del sitio» (HomeReels.php). El póster es la pieza: nada suena ni se mueve en la banda.

2 · Use cases — cuándo usarlo

  • Cuando el cron oEmbed de Vimeo (DEV-12) entregue miniaturas reales y getReels() devuelva ≥4 (10 máx, orden por reseñas)
  • Con el carrusel compartido (§0.3): un solo sistema de carrusel en el sitio (F-28)
  • Con videos que cumplan F-25 (15-30 s, gancho ≤2 s) y póster 1080×1920 real

3 · Do not use when — cuándo no

  • Con <4 pósters reales o con cualquier «VIDEO» gris: la banda no se pinta
  • Como reproductor en el home (0 iframe/<video> en .home-reels, F-23)
  • Dentro del mosaico de la landing («carrusel prohibido — render destructivo», 22 §8)
  • Con nombre, precio o CTA quemados en el póster (F-07/F-26)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Tira.carousel compartido: grid-auto-flow: column, gap 16, scroll-snap-type: x mandatory; grid-auto-columns: 220px (≥768) / min(40vw, 240px) (<768); flechas .carr-btn.st-circ 44 px solo ≥1024 con scrollBy(clientWidth − 220) smooth (auto con reduce); sin autoplay, sin bucle (aria-disabled en extremos)F-28 · cards.css:172-181,248-257 · steren.js:537-555
Tarjeta9:16: 220×391 (≥768) · 156×277 (<768); un solo enlace entero al PDP (.tile-cover)F-51 [D]: alto = ancho × 16/9
Póster<img width height loading="lazy"> 1080×1920 real por video, cover (ratio fijo → sin recorte)F-24 · FAIL placeholder
Play48 px al centro (#i-play, mismo .gal-play de pdp.css:69), aria-hiddenF-27
Etiquetanombre del producto en HTML, abajo, sobre velo del sistema: color-mix navy 92 % + backdrop-filter: blur(10px) + máscara (receta de home.css:211-232); excepción funcional E-2, no se abre otra (T-9)F-26 · ≥4.5:1 sobre el píxel
DatosCAT/ViewModel/HomeReels.php::getReels(): orden por reseñas, CUANTOS = 10, count < 4 → [] (el template se va sin pintar un nodo)E-19
Estadohueco: sin layout ni plantilla que consuma el ViewModel (solo dev/home-smoke.php); miniaturas de Vimeo no derivables sin oEmbedDEV-12 (desbloquea P05 y V02 a la vez, L-20)
DestinoPDP: el reel se reproduce en el visor, una vez, con controles, sin loop (F-21/F-25); hoy el visor es 16:9 ≤960 → un 9:16 queda pillarboxed (F-22, T-10)deuda del visor

5 · Layout blueprint — plano técnico

V02 · póster 9:16 1080×1920 (A12) SUJETO x 10-90 % · y 10-70 % PLAY 48 px · círculo 20 % del ancho VELO + etiqueta HTML (y 75-100 %) 20 % inferior: sin rostro ni producto focal 1080 px 1920 px Ratio fijo en los tres estados: sin recorte. El nombre va en HTML sobre el velo (F-26). Vivo medido: etiqueta ≈60/344 px = 17 % (F §3).

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1024 (1440)tarjeta 220×391 · 5 tarjetas + flechas 44 px9:16A12 póster 1080×1920carrusel compartido, grid-auto-columns: 220px
768–1023220×391 · 3 tarjetas + asomo9:16A12 (mismo)flechas ocultas (<1024): scroll + snap
<768 (390)156×277 · 2 tarjetas + asomo9:16A12 (mismo)min(40vw, 240px); sin scrollbar
Vivo (referencia)tarjetas 188-195 px · gap 20 · ≈344 px de alto (0.56 ≈ 9:16)9:16—cap29/t3-VIVO-reels.png a 1425 px, PIL (F §3)

7 · Safe areas — zonas seguras

Sobre el póster 1080×1920: caja del sujeto x 10-90 % · y 10-70 % (C §3.22). El 20 % inferior queda libre de rostro y producto (F-27): lo cubre el velo con la etiqueta (en el vivo ≈60 px de 344 = 17 %; en el blueprint el velo va de y 75 % a 100 %, C). El play de 48 px ocupa el centro: nada esencial en un círculo del 20 % del ancho al centro (y 44-56 %). Medir el velo real del componente cuando se construya y actualizar la plantilla (F-27 [H] porcentajes).

8 · Focal point — punto focal

(50 %, 40 %) del póster (C §3.22): el producto en uso, o las manos que lo operan, arriba del play y fuera del velo. Se conserva en los tres estados porque el ratio no cambia (solo escala: 220 → 156 px de ancho). Verificación: a 390 el producto se ve entero y no queda bajo el play ni bajo la etiqueta.

9 · Crop behavior — qué pasa entre ratios

Sin recorte: la tarjeta es 9:16 en desktop, tablet y móvil, y el póster 9:16 entra cover a ratio idéntico. Lo que cambia es la escala (391 → 277 px de alto) y lo que «tapa»: play (48 px fijos = 22 % del ancho a 220, 31 % a 156) y velo (25 % inferior). En el PDP el reel se reproduce en un visor 16:9 ≤960 → pillarbox (WARNING F-22) hasta que el visor use el aspect-ratio del proveedor.

10 · Responsive behavior — desktop → tablet → móvil

Desktop ≥1024 · 5 × 220×391 + flechas sujeto play 48 velo + etiqueta HTML 220×391 • póster 1080×1920 cover, sin recorte • flechas .st-circ 44 px, scrollBy(clientWidth − 220) Tablet 768–1023 · 3 × 220×391 + asomo sujeto play 48 velo + etiqueta HTML 220×391 • misma tarjeta y mismo póster • sin flechas: scroll + snap Móvil 390 · 2 × 156×277 + asomo sujeto play 48 velo + etiqueta HTML 156×277 • min(40vw, 240px) = 156 • velo y 75-100 %

Tres estados, una sola geometría: la tarjeta 9:16 conserva la proporción y solo se encoge en móvil (156 px); los pósters son los mismos archivos; las flechas desaparecen bajo 1024 y el gesto es scroll con snap («dos tarjetas + asomo»).

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Tarjeta220×391220×391156×277
Tarjetas visibles5 + flechas 44 px3 + asomo2 + asomo
Play48 px (22 % del ancho)48 px48 px (31 % del ancho)
EtiquetaHTML sobre velo, y 75-100 %igualigual — [H] medir líneas sobre 156 px
Navegaciónflechas .st-circ + scrollscroll + snapscroll + snap, sin scrollbar
Focal / safe(50 %, 40 %) · x 10-90 · y 10-70 %igualigual

11 · Content rules — límites de copy

CampoLímiteRegla
Duración15-30 s (WARNING 30-45 · FAIL >60 o loop con audio)F-25
Ganchoproducto en uso desde t=0, ≤2 sF-25 / F-10
Póster1080×1920 real (WARNING 720×1280 · FAIL <4 reales o «VIDEO» gris); sin texto; luminancia 25-85 %F-24 / F-05
Etiquetanombre real del producto en HTML; sin cifra de caracteres en las fuentes → medir cuántas líneas caben sobre 156 pxF-26: innerText, ≥4.5:1 sobre el píxel
Cantidad y orden4-10 reels, orden por reseñasHomeReels (CUANTOS = 10)
title por reelacción descriptiva («Cómo instalar el contacto inteligente»), no solo el nombreG-31 (WARNING título = nombre)
Texto quemadosolo subtítulos; 0 precio / % / CTA / legalesF-07 (WARNING rótulo de nombre duplicado)

12 · Contrast & legibility — texto sobre media

  • Etiqueta blanca sobre velo navy 96 % (DEV-01; hoy la receta del cintillo usa 92 %): ≥10:1 por receta (EXP L2826-2828); se mide sobre el píxel de la captura ≥4.5:1 (F-26; WARNING 3-4.5)
  • Play blanco sobre el fotograma: ≥3:1 (G-19) → póster con luminancia 25-85 % y sin blanco puro bajo el centro
  • Vivo medido: el velo llega a luminancia ≈15/255 en el 5 % inferior — lo que hay debajo se vuelve mancha: nada relevante ahí (F §3)

13 · Asset specifications

PropiedadValor
A12 póster1080×1920 (9:16) · fotograma real del video (producto sobre fondo real) · sin texto · HOY JPG ≤120 KB (clase tile, F-52) · OBJETIVO AVIF/WebP con pipeline
Video9:16 · 15-30 s · gancho ≤2 s · sin loop=1 · mudo por defecto; controles nativos en el PDP (F-21)
Origen del póstercron oEmbed de Vimeo + descarga de miniaturas (DEV-12); el póster no es la _x1 (esa es el fallback sancionado de P05, no de V02)
Nombrevideo video_<sku>_9x16.mp4 · póster <sku>_video-poster_9x16.jpg (A12 9:16, cap.07 §Nomenclatura; L-30 / ENM-11)
Dóndevideo del producto en catálogo (377 Vimeo + 1 YouTube) → HomeReels; sin campo nuevo

14 · Accessibility

  • Un enlace entero por tarjeta con nombre accesible = nombre del producto; play aria-hidden; póster alt="" (el nombre porta el texto, D-09)
  • CC en el PDP para todo reel con voz (G-30); title descriptivo por reel (G-31)
  • Carrusel manual: flechas aria-disabled en extremos, sin autoplay (G-24/G-25); nada se mueve en la banda
  • Reduced-motion: sin hover zoom (hereda pieza 4 del catálogo V04), scroll auto

15 · Performance — entrega técnica

  • Pósters loading="lazy" con width/height declarados: alto reservado, CLS 0 (F-04)
  • 0 iframe/<video> en el home; 0 peticiones a Vimeo antes del clic en el PDP (F-23/F-02)
  • ≤120 KB por póster; 1080 px sirve hasta 540 px de ancho a 2× — sin srcset (deuda general)
  • Reusa .carousel/initCarrusel: cero JS de carrusel nuevo (F-28)

Do

  • Persona real usando el producto en su casa, en vertical, gancho en 2 s
  • Póster = fotograma real 1080×1920; nombre en HTML sobre el velo
  • 4-10 reels ordenados por reseñas; con menos de 4, la banda no existe
  • Tarjeta del carrusel compartido: 220×391 / 156×277

Don't

  • Reproductor o autoplay en la banda
  • Nombre, precio o CTA quemados en el póster
  • El placeholder gris «VIDEO» o la _x1 como póster de reel
  • Un carrusel propio o dentro del mosaico
  • Reels horizontales recortados a vertical

Fuentes: F-23…F-28, F-47, F-51, F-52 y §3 V02 · inventario 02 §0.3, §S8, huecos 14-16 · expediente 01 §2.11 (L3149-3150, L3229-3251) · C §3.22 · G-24, G-30, G-31 · L-20 (DEV-12), T-9, T-10 · E-19, 22 §8

V03

Video institucional

Construido en el temaNosotros

La única pieza de marca en movimiento: el video institucional (Vimeo 871912462) en «Nosotros». Hoy es un iframe eager sin póster, con title="master_steren (2160p)". Regla: facade obligatoria (póster real 1782×1002 ≤150 KB + play ≥44 px + duración), CC + transcripción + title descriptivo; el iframe nace al clic (L-19).

1 · Purpose — para qué existe

Contar la marca en Nosotros sin que un tercero cargue con la página: 0 peticiones a player.vimeo.com hasta el gesto, alto reservado, y una alternativa accesible (subtítulos + transcripción) para acogerse a WCAG 1.2.2/1.2.3.

2 · Use cases — cuándo usarlo

  • Solo en Nosotros (/nosotros), una vez, bajo la cabecera (marca.phtml:37-41,103-105 sube el .marca-video del contenido CMS)
  • Con póster real (fotograma) + play + duración; CC en Vimeo; transcripción plegable en HTML

3 · Do not use when — cuándo no

  • Con autoplay o preview en movimiento (F-01/F-32)
  • En el home o en cualquier slot de campaña (V05 no autorizado)
  • Con iframe en el DOM antes del clic (estado actual = FAIL F-02/F-29)
  • Con póster = logo, cartel, negro o _x1 de un producto

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Caja.marca-video { aspect-ratio: 16/9; border-radius: 12; background: n900; margin-top: 32 } dentro de .marca-int--ancho { max-width: 891px }; iframe { position: absolute; inset: 0; width/height: 100% }construido (marca.css:37-39,123-125)
Póster (facade)fotograma real 16:9, entrega 1782×1002 (2× de 891×501), ≤150 KB clase hero; <button aria-label> sobre el pósterobligatorio · DEV-11 (hoy no existe)
Play≥44 px, glifo ≥3:1 sobre el fotograma (G-19); foco con focus.ring-media propuesto para controles sobre foto (ENM-01)DEV-11
Duraciónvisible en la facade; sin dato en las fuentes → obtener con oEmbed durationDEV-11
Reproductoral clic: iframe player.vimeo.com/video/871912462 con allow="autoplay; fullscreen; picture-in-picture" y title="Video institucional de Steren"; hoy eager, autopause=0, title="master_steren (2160p)", sin loading="lazy" (nosotros.html:40)F-02 / F-29 · FAIL hoy
Subtítulospista CC es-MX en Vimeo (texttracks)F-06 / F-31 / G-30
Transcripciónbloque plegable en HTML bajo el video, etiquetado como alternativa («Este video cuenta lo que dice el texto de esta página»); si el video narra lo que el texto no dice → pista de audiodescripciónF-31 (WARNING sin ella) · G-32
Fallbackante 401/403 (Vimeo restringe fuera de steren.com.mx, EXP L4466-4467): póster + enlace «Ver en Vimeo», nunca un rectángulo negroF-30
Impresiónoculto (marca.css:106-107)construido
CSPplayer.vimeo.com en frame-src vía Magento_ProductVideo (csp_whitelist.xml:28-31), no por el tema (el inventario S17 lo daba por ausente: corrección T-4); www.youtube-nocookie.com falta en todas (DEV-18)L-29

5 · Layout blueprint — plano técnico

V03 · póster de la facade — entrega 1782×1002 (16:9, 2×) pinta 891×501 · el iframe nace al clic PLAY ≥44 px (88 px en el 2×) sin recorte entre 390 y 1440: el póster se ve entero (16:9 fijo) 1782 px 1002 px Fotograma REAL del video (F-05): ni cartel, ni logo, ni negro; ≤150 KB (clase hero, F-29). Duración y título en HTML sobre la facade, no quemados; nada esencial bajo el círculo del play. Radio 12 y fondo n900 los pone la caja `.marca-video`; ante 401 se sigue viendo el póster + «Ver en Vimeo» (F-30).

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥1024891×50116:9póster 1782×1002 ≤150 KBmax-width: 891px; radio 12; fondo n900
768–1023736×41416:9mismo póster
<768 (390)358×20116:9mismo pósterel play se mantiene en 44 px
Impresiónoculto——marca.css:106-107

7 · Safe areas — zonas seguras

El 16:9 se ve entero en todos los anchos (la caja es aspect-ratio 16/9 y el póster entra a ratio idéntico): no hay franjas de recorte. Lo que sí tapa es el play (≥44 px al centro, 88 px en el archivo 2×) y, en la esquina que se decida en el build, el chip de duración: nada esencial del fotograma bajo el play; esquinas de radio 12 px (24 px en el 2×) sin detalle fino. Con Save-Data o reduced-motion se ve exactamente lo mismo: el póster.

8 · Focal point — punto focal

No consta cifra en las fuentes: el focal es el fotograma elegido (F-05, real, no cartel), que debe leerse nítido al 100 % a 358 px de ancho y no poner su centro de interés bajo el play. La continuidad manda: el video arranca donde el póster termina (F-19, criterio de P05 aplicable).

9 · Crop behavior — qué pasa entre ratios

Sin recorte (16:9 fijo en 390 / 768 / 1024+): la caja mide 358×201 → 736×414 → 891×501 y el póster 1782×1002 se escala completo. El único cambio entre estados es la escala; el play y el chip de duración son tamaño fijo, así que a 358 px cubren proporcionalmente más (44 px = 12 % del ancho). Un póster que no sea 16:9 exacto se pintaría con bandas → entregar 1782×1002 exacto.

10 · Responsive behavior — desktop → tablet → móvil

Desktop ≥1024 · 891×501 play 891×501 • facade: póster + play ≥44 + duración • 0 peticiones a Vimeo antes del clic Tablet 768–1023 · 736×414 play 736×414 • mismo póster 1782×1002 • alto reservado por aspect-ratio 16/9 Móvil 390 · 358×201 play 358×201 • play sigue en 44 px transcripción plegable • debajo

Un solo archivo de póster y una sola caja 16:9; el iframe hereda la caja al nacer. La transcripción plegable va debajo en todos los anchos.

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Caja891×501736×414358×201
Póster1782×1002 (2×)mismomismo (a 2× sobra: sin srcset hoy)
Play≥44 px≥44 px≥44 px (12 % del ancho)
Duraciónvisible en la facadeigualigual
Transcripciónplegable debajoigualigual

11 · Content rules — límites de copy

CampoLímiteRegla
title del iframedescriptivo, en español: «Video institucional de Steren»nunca el nombre del archivo (master_steren (2160p), hoy) — G-32
Duraciónsin dato: obtener con oEmbed durationse muestra como texto en la facade
Texto quemadosolo subtítulosF-07
Transcripcióncubre lo que dice la voz; etiquetada como alternativaG-32 (excepción 1.2.3/1.2.5 solo si el texto de la página dice lo mismo)
Botón de la facadearia-label = «Reproducir video institucional de Steren» [D] de G-08/G-35el texto visible puede ser solo el play + duración

12 · Contrast & legibility — texto sobre media

  • Play sobre el póster: glifo ≥3:1 sobre cualquier fotograma (G-19); si el fotograma es claro bajo el centro, elegir otro fotograma, no oscurecer con velo (los velos son solo para texto, E-2)
  • Foco del botón sobre foto: propuesta focus.ring-media de doble trazo (blanco + #006B9E), ENM-01 (L-04)
  • Duración y título: texto HTML, fuera del póster o en chip del sistema — nunca quemados
  • Sin póster (fallo de carga) se ve n900 de la caja: con F-30 se ve el póster + enlace, nunca negro

13 · Asset specifications

PropiedadValor
Póster1782×1002 (16:9) · fotograma real del video · sRGB · HOY JPG ≤150 KB (clase hero, DS §7 vía F-29/F-52) · OBJETIVO AVIF/WebP con pipeline
VideoVimeo 871912462 (badge=0&autopause=0&quality_selector=1&progress_bar=1); privacidad por dominio: 401 fuera de steren.com.mx
Duraciónsin dato en las fuentes: oEmbed duration
Nombrevideo_institucional-poster_16x9.jpg (L-30 con tipo video, ENM-11)
Dóndecontenido CMS legales/nosotros.html:40 (editable), extraído por marca.phtml; la facade es cambio de plantilla (DEV-11)

14 · Accessibility

  • iframe title en español y descriptivo; facade con <button aria-label> y póster real (G-32/G-35); hoy FAIL
  • Teclado (G-33): Enter en la facade → el foco pasa al reproductor y Tab recorre play/pausa/volumen/CC; el reproductor no nace dentro del <button> (anidamiento inválido, mismo hallazgo que P05)
  • CC es-MX en Vimeo + transcripción en la página; audiodescripción si narra lo que el texto no dice (G-32)
  • Reduced-motion (F-32): el clic sigue reproduciendo (gesto explícito), pero la facade no anima (sin zoom del póster, fundido ≤120 ms) y no hay preview en movimiento
  • Nunca autoplay sonoro (G-29)

15 · Performance — entrega técnica

  • Carga fría de /nosotros: 0 peticiones a player.vimeo.com; tras el clic: 1 iframe con title (F-29)
  • Alto reservado por aspect-ratio 16/9 antes del iframe (F-04/F-55): CLS 0
  • El póster entra en el pliegue: clase hero ≤150 KB; hoy la LCP probable es el h1/entradilla (S17) — medir si el póster la desplaza
  • Ante 401/403 del proveedor la caja no cambia de alto (F-30)
  • www.youtube-nocookie.com a frame-src del tema (DEV-18) aunque V03 sea Vimeo: es la CSP de todo el video

Do

  • Póster = fotograma real y nítido, ≤150 KB, con play ≥44 px y duración
  • Iframe solo tras el clic; title en español
  • CC + transcripción plegable etiquetada como alternativa
  • Póster + «Ver en Vimeo» cuando el proveedor conteste 401

Don't

  • Iframe eager (estado actual)
  • Autoplay, preview animado o zoom del póster
  • Caja negra o error del reproductor visible
  • title = nombre de archivo
  • Reutilizar el video en el home o en un hero

Fuentes: F-02, F-04, F-05, F-06, F-29…F-32, F-51, F-52, F-55 y §3 V03 · inventario 02 §S17, hueco 14 · expediente 01 (L1774-1778, L4466-4467) · G-19, G-29, G-32, G-33, G-35 · L-04 (ENM-01), L-19 (DEV-11), L-29 (DEV-18), T-4 · E-12, D-13

V04

Motion del sistema

Construido en el temaHero, tiles, paneles, esqueletos, luz, ES-13

Todo lo que se mueve en el tema, medido en código: 26 piezas, todas transform/opacity/color, todas con prefers-reduced-motion. Cualquier animación que no esté en este catálogo es una enmienda, no una excepción. El interruptor global (steren.css:17-20, .01ms !important) solo alcanza CSS: WAAPI, rAF, scrollTo e IntersectionObserver llevan guarda JS propia.

1 · Purpose — para qué existe

Que el movimiento informe (cambio de capa, progreso, confirmación) y nunca decore: presupuesto ES-13 (≤1.2 KB JS + ≤1 KB CSS para sus 4 piezas), cero librerías, CLS por motion = 0, y una conducta declarada por pieza bajo reduced-motion.

2 · Use cases — cuándo usarlo

  • Solo las 26 piezas del catálogo, con sus valores; una pieza nueva entra por enmienda §12.6 con fila en esta tabla (propiedad, duración, curva, disparo, conducta reduce, fuente)
  • Cuatro conductas bajo reduced-motion (F-35), obligatorias en toda animación nueva: se apaga lo decorativo · 120 ms en fundido lo que informa de un cambio de capa · estado final lo que entrega un dato · se conserva lo que informa tiempo

3 · Do not use when — cuándo no

  • Para «dar vida» a una imagen: nada anima el arte (F-44/F-46) — la única animación del hero es la entrada del panel
  • Entradas por scroll, parallax, reveal en cascada (F-40): solo la onda ES-13d y el countUp ES-13c usan IO
  • Sobre precio o stock, salvo fundido ≤180 ms (F-49)
  • Con librerías de animación (F-34)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
1 · Hero: entrada del panel de copyopacity 0→1 + translateY 8→0 px · 240 ms · ease-out, fill backwards · disparo: des-ocultar [hidden] (cambio de lámina) y primer pintadoreduce: no existe (@media (prefers-reduced-motion: no-preference)) — home.css:56-59; C6 L585
2 · Hero: cambio de láminaninguna (swap [hidden]) · 0 ms · disparo: click / dot / swipe ≥48 px con dominancia 1.5:1igual — home.js:30-66
3 · Tiles T01-T05 (caja)box-shadow e1→e2, border n200→n300, translateY −2 px · 250 ms · ease · hoverreduce: transition: none; sin translate — home.css:178-181,246; catalogo.css:162-165,299
4 · Tiles T01-T05 (foto)scale 1.04→1.09 · 450 ms · cubic-bezier(.2,.7,.3,1) · hoverreduce: se queda en 1.04 — home.css:196-197,262-266; catalogo.css:300,303-307
5 · Drawer / panel — entradatranslateX 100→0 % (sheet: translateY) · 340 ms · cubic-bezier(.22,1,.36,1) (out-quint) · is-in tras dos rAFreduce: opacity 120 ms linear, sin desplazamiento — steren.css:764-776; steren.js:66-77
6 · Drawer / panel — salidatranslateX 0→100 % · 200 ms (SALIDA_MS) · cubic-bezier(.32,0,.67,0) (in-cubic); [hidden] diferido · quitar is-inreduce: 120 ms opacity; temporizador 0 — steren.css:764; steren.js:53,79-82
7 · Velo (scrim)opacity · 260 ms in / 200 ms out («un poco más rápido que el panel») · mismas curvas · con el panelreduce: 120 ms — steren.css:762-763,773
8 · Modalscale .98→1 + opacity · 200 ms · in-cubic · is-ininterruptor global — steren.css:781-787
9 · Esqueleto de imagenbackground-color transparente→n200, luego n200↔bg-subtle · entra 160 ms tras 150 ms; pulso 1.4 s ∞ desde 310 ms · linear / ease-in-out · img[loading=lazy] sin is-readyreduce: entra en 1 ms tras 150 ms, sin pulso — steren.css:136-149
10 · Luz de progreso (3 px)scaleX 0→1, degradado primary→logo-cyan · = recorrido (animation-timeline: scroll(root block)); respaldo JS --st-luz · linear · scrollreduce: display: none + JS no registra — steren.css:566-577; steren.js:518-520
11 · Onda de encabezado (ES-13d)stroke-dashoffset 20.5→0 · 500 ms, retardo 100 ms · ease-out · IO umbral .5 → st-onda-visreduce: no existe (no-preference) — steren.css:157-162; steren.js:559-571
12 · Morph ATC (ES-13b)check-onda scale .4→1 + opacity · 200 ms · ease-out · is-addedinterruptor global (aparece sin pop) — steren.css:166-171
13 · Onda-loader (ES-13a)opacity .3↔1 · 1.1 s ∞ · ease-in-out · is-loading / .st-onda-loaderreduce: animation: none; opacity: 1 — steren.css:200-205
14 · countUp SterenCard (ES-13c)textContent · 600 ms · easeOutCubic (rAF) · input / IO umbral .5reduce: pinta el valor final; IO no se registra — home.js:73-109
15 · Carrusel compartidoscrollLeft · nativo (smooth) · flechas scrollBy(clientWidth − 220); scroll-snap-type: x mandatoryreduce: behavior: 'auto' — steren.js:537-555; cards.css:172-181
16 · Visor PDPscrollTo al slide · nativo (smooth) · flechas / teclado / tirareduce: auto — pdp.js:397
17 · Tile de galería PDPscale 1→1.03 · 200 ms · ease-out · hoverreduce: transition: none — pdp.css:57-59,151-154
18 · Galería en tarjetadots width/background · flechas opacity · 180 ms · 150 ms · ease · hover 120 ms sostenido / foco / IO táctilreduce: transition: none — cards.css:54,68,78-79
19 · Aviso (toast)translate 12 px + opacity; reloj scaleX 1→0 · entrada/salida CSS; reloj 15 000 ms (--aviso-dur), pausable · linear · mostrarreduce: sin transform, opacity 150 ms; reloj: T-2 (se agota por el interruptor global — verificar con captura, DEV-19) — steren.css:280-302
20 · CTA pegajoso PDPtranslateY 105→0 % + visibility · 200 ms · ease · scroll (buybox fuera de vista)interruptor global — cards.css:270
21 · Autocompletadoopacity + translateY −5→0 px · 150 ms · out-quint · abrirreduce: animation: none — steren.css:620-622
22 · .st-circ (flechas, volver arriba)color / box-shadow; :active scale .94 · hover / activereduce: transition: none — steren.css:340-342
23 · Coreografía del carrito (cap.25)is-added → encoge → entra con lavado cian · ≈180 / 550 / 900 ms (≈1 s) · añadirtodo apagado — EXP L2423-2427 (no leído en código)
24 · Fuga de tachado / «Ahorra» (cap.23)max-height + opacity + margin −6 px + visibility (retardo .22 s) · cambio de preciointerruptor global — EXP L2219-2223 (no leído en código; WARNING F-33 por max-height)
25 · Fuegos patrios (D03)translate/scale .4→1→.25 + opacity · 900-1400 ms por partícula; ráfagas a 0 / 320 / 660 ms (+≤90 ms); total ≤2.2 s; 62 partículas de 9 px · cubic-bezier(.15,.75,.35,1), fill forwards · DOMContentLoaded en checkout_onepage_success, una sola vezJS: matchMedia → return antes de crear el lienzo; CSS .pt-fuegos { display: none }; también oculto en @media print — patrio-fuegos.js arranca(); patrio.css:175-204
26 · Documentoscroll-behavior: smooth · nativo · anclasreduce: auto — steren.css:15-18

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
todossin raster: CSS/JS del tema——6 archivos: steren.css/js, home.css/js, catalogo.css, cards.css, pdp.css/js, patrio.css + patrio-fuegos.js

7 · Safe areas — zonas seguras

—

8 · Focal point — punto focal

—

9 · Crop behavior — qué pasa entre ratios

—

10 · Responsive behavior — desktop → tablet → móvil

El motion no cambia por breakpoint; cambian los disparadores: flechas del carrusel solo ≥1024, swipe del hero en táctil, CTA pegajoso del PDP por scroll.

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Hero: cambio de láminaclick / dots / flechasigualswipe ≥48 px, dominancia 1.5:1 (touch-action: pan-y)
Carruselflechas .st-circ 44 px + scrollBy smoothscroll + snap (sin flechas)scroll + snap
Pieza 1 y LCP——[H] la LCP <768 es el panel navy que entra con opacity 0→1: si desplaza la LCP ≥50 ms, exceptuar la primera pintura (F-49, T-11)

11 · Content rules — límites de copy

CampoLímiteRegla
Micro / hover≤250 msF-38 (clases derivadas de las 26 piezas, ningún valor nuevo); WARNING +25 % · FAIL >2× o bucle decorativo
Entrada de capa≤340 msdrawer, panel, sheet
Salida≤200 ms y siempre < entradadrawer, modal
Zoom de foto≤450 ms; hover zoom ≤1.09tiles
Dibujo de firma≤500 msonda ES-13d
Contador≤600 mscountUp
Celebración≤2.2 s, una vez, solo en success, ≤62 partículas, bajo el contenidofuegos (F-42); solo tema de temporada
Bucles infinitossolo loader (1.1 s) y esqueleto (1.4 s), solo mientras dura la esperaF-38; periodo ≥0.34 s → <3 destellos/s (G-28)
Curvasease-out micro · cubic-bezier(.22,1,.36,1) entrar · cubic-bezier(.32,0,.67,0) salir · cubic-bezier(.2,.7,.3,1) foto · cubic-bezier(.15,.75,.35,1) partículas · linear progreso; y1/y2 ∈ [0,1]F-39: prohibido overshoot, elastic y bounce

12 · Contrast & legibility — texto sobre media

  • Destellos: ninguna pieza cambia de luminancia >3 veces por segundo (G-28): esqueleto 0.7 Hz ✓, lavado cian ≤1 ✓, fuegos 3 ráfagas / 2 s = 1.5/s ✓ (G-27)
  • Nada que se mueva solo >5 s sin pausa/ocultar visible y por teclado (G-25); exentos: esqueleto, luz (la mueve el scroll), countUp ≤2 s, delta «+$139» 4 s, fuegos 2 s
  • El reloj del aviso (pieza 19) informa tiempo: se conserva bajo reduce — pero hoy el interruptor global lo agota en el primer fotograma (T-2): verificar con captura a 0 / 5 / 10 s (Q-28, DEV-19)

13 · Asset specifications

PropiedadValor
Tokens de motion [H]el DS no tiene ninguno (grep dur|ease|motion → 0): propuesta F-39 de tokenizar sin cambiar un valor: --st-ease-out · --st-ease-in · --st-ease-foto y --st-dur-1..6 = 120 / 200 / 240 / 340 / 450 / 600 ms (enmienda §12.6, T-8)
PresupuestoES-13: ≤1.2 KB JS + ≤1 KB CSS para sus 4 piezas (onda-loader, morph ATC, countUp, onda-draw); el resto del motion no tiene cifra → medir gzip -c archivo | wc -c por bloque y publicar la tabla en esta ficha (F-34; WARNING sin tabla)
Librerías0 (grep -c "import\|require(" *.js = 0)
Interruptor globalsteren.css:17-20: animation-duration/transition-duration: .01ms !important a * — excepción declarada E-5 / X-14, única y comentada

14 · Accessibility

  • Política F-35 por pieza (las cuatro conductas) — registro completo en la anatomía; G-26: emular reduce y grabar 10 s de home/PLP/PDP/éxito: nada se mueve salvo video iniciado por el usuario
  • Guarda JS propia matchMedia('(prefers-reduced-motion: reduce)') en todo lo que no sea CSS: WAAPI, rAF, scrollTo/scrollBy smooth, IO que dispara motion (F-36); el interruptor CSS no alcanza a Element.animate()
  • Animaciones guiadas por scroll: display: none bajo reduce, nunca dejadas al interruptor (se agotan en el primer píxel y mienten, F-37)
  • Foco y teclado no dependen de ninguna animación: los estados finales existen sin transición

15 · Performance — entrega técnica

  • Solo transform, opacity y color (background/border/stroke): nunca width/height/top/left/margin/max-height ni filter/backdrop-filter animados (F-33); DevTools → Layout Shift Regions durante la animación
  • CLS por motion = 0: todo fuera de flujo o composited (fixed + scaleX: CLS imposible, steren.css:557); PerformanceObserver('layout-shift') sin entradas durante hover/paneles/scroll (F-50)
  • will-change solo en los 62 nodos de los fuegos durante ≤2.2 s: es el techo de partículas del sistema (F-42)
  • Verificación con captura (antes / durante / después) o revisión humana: setTimeout/rAF sobre el display :99 dan resultados FALSOS (F-41, EXP L2246-2252)
  • Hero: grep -c setInterval home.js = 0 (vigilado por home-smoke.php:58); .hero-slide img sin transition

Do

  • Una fila del catálogo por animación: propiedad, duración, curva, disparo, conducta reduce, fuente
  • Curvas del catálogo, duraciones dentro de su clase
  • Guarda JS en todo lo que no sea CSS
  • Evidencia visual en cada verificación

Don't

  • Parallax
  • Ken Burns / zoom lento de foto
  • Autoplay de láminas
  • Entradas por scroll (salvo ES-13d)
  • Hover zoom >1.09
  • Animación sobre precio o stock (salvo fundido ≤180 ms)
  • Marquee / ticker
  • Fondos o degradados animados
  • Blur animado
  • Transiciones sobre el elemento LCP ([H] medir en <768)
  • Overshoot, elastic, bounce
  • Bucles decorativos

Fuentes: F §2.6 (catálogo, medido 2026-09-10) y F-33…F-42, F-46, F-49, F-50 · expediente 01 §2.31 (L2246-2252, L1728) · inventario 02 §0.2, §0.3, §S22 · G-25…G-28 · ES-13, DS §5 L408, C6 L585 · L-29 (DEV-19), T-2, T-7, T-8, T-11 · E-5 / X-14, E-12

V05

Video hero / motion banner

No autorizado por el catálogo cerrado—

No autorizado. Ningún <video>, GIF animado, APNG, Lottie, canvas o iframe en H01-H05, B01-B06, T01-T08, M01-M05: el catálogo de C6 es cerrado («no hay slot #47») y el DS pide láminas «estáticas o de rotación manual»; T2 rechaza el autoplay como espectacularidad. Un cinemagraph o motion banner es video aunque sea mudo, corto o en bucle (F-44).

1 · Purpose — para qué existe

Cerrar por escrito el hueco H-08 (ni autorizado ni prohibido) y dejar una sola puerta: las 11 condiciones de F-45, todas a la vez, como enmienda §12.6.

2 · Use cases — cuándo usarlo

  • Nunca, hoy. Solo por enmienda §12.6 que cumpla 11/11 condiciones (cualquier FAIL = sigue no autorizado)

3 · Do not use when — cuándo no

  • Como «hero con vida», cinemagraph, Ken Burns o crossfade sobre el arte (F-44/F-46)
  • Como GIF animado subido a cualquier slot de imagen: los uploaders aceptan gif → F-08 exige exactamente 1 fotograma (puerta trasera cerrada, T-12)
  • Bajo 768 o con Save-Data, aunque existiera la enmienda

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
(1) Sin audio0 streams de audio en el archivo (no solo muted)ffprobe → 0 audio streams
(2) Bucle≤6 sffprobe duration
(3) Peso≤400 KB (H.264/AV1), 1440×360 máxwc -c
(4) Póster= primer fotograma exactodiff ≤2 % de píxeles
(5) Pausacontrol visible ≥44 px, persistenteinspección + teclado
(6) Reduced-motionsolo póster; sin petición del videoemulación reduce + Network
(7) LCPsigue siendo el póster <img> ≤150 KB; el <video> se inserta tras load, con preload="none"Lighthouse LCP
(8) CLS0: misma caja clamp(240px, 28vw, 360px)Layout Instability
(9) Sin textoF-07; y sin producto que dependa del movimiento para entendersemuestreo de fotogramas
(10) Alcancesolo lámina 1, una por página, nunca <768 ni con Save-Dataemulación Save-Data a 390
(11) Enmienda simultáneaa C6, DS §7 y T2, con este documento como cálculo§12.6

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
—sin anatomía hasta que exista la enmienda—no se produceF-43 / L-17

7 · Safe areas — zonas seguras

—

8 · Focal point — punto focal

—

9 · Crop behavior — qué pasa entre ratios

—

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Video en hero/tiles/bandas000 (ni con enmienda)

11 · Content rules — límites de copy

CampoLímiteRegla
Ruta de enmiendaC6 + DS §7 + T2 + §12.6, con F-45 como cálculo11 condiciones, sin excepción
GIF / APNG en cualquier slot1 fotograma exactoF-08: PIL Image.n_frames = 1; FAIL >1

12 · Contrast & legibility — texto sobre media

—

13 · Asset specifications

PropiedadValor
—no se produce; el póster hipotético heredaría A01 (2880×720) y sus reglas

14 · Accessibility

  • G-24 (carrusel sin autoplay), G-29 (nunca autoplay sonoro; V05 no autorizado)
  • Si algún día existiera: pausa ≥44 px persistente y solo póster bajo reduce (condiciones 5 y 6)

15 · Performance — entrega técnica

  • document.querySelectorAll('.hero video, .hero canvas, .hero iframe, [class*=tile] video').length = 0 (F-43)
  • @keyframes/transition que toquen .hero-slide img = 0 (F-44)

Do

  • Hero estático con el panel navy (pieza 1 del catálogo V04 como única animación)
  • Pasar F-08 (1 fotograma) a todo raster subido

Don't

  • Video, GIF animado, APNG, Lottie o canvas en cualquier slot de campaña o tile
  • Zoom, pan, fundido o Ken Burns sobre el arte
  • Argumentar «es mudo y corto» — sigue siendo video

Fuentes: F-08, F-43…F-45, F-46 y §3 V05 · C6 L581, L585 · DS §7 L449 · T2 (`01-esencia` §10) · G-24, G-29 · L-17 · H-08 (cap.01) · inventario 02 §3 (uploaders aceptan gif)

D01

Onda — firma gráfica

Construido en el tema5 usos cerrados

El símbolo de 3 franjas quebradas del logo, extraído como asset del sprite (icon-st-onda, currentColor en logo-cyan, ~400 bytes). Lista cerrada de 5 usos (DS §6 es el único registro del sistema): firma, no wallpaper.

1 · Purpose — para qué existe

Dar carácter Steren con un solo gesto repetido en pocos sitios; cualquier uso nuevo es enmienda al DS, y como textura, viñeta o marca de agua deja de ser firma (E-10).

2 · Use cases — cuándo usarlo

  • (a) Subrayado de títulos de sección en home/landings: 3 trazos de 24×8 px en logo-cyan bajo el h2 (.st-heading-onda: «Míralo en video», «¿No sabes cuál necesitas?»)
  • (b) Check de confirmación del morph del botón ATC
  • (c) Loader del sistema (sustituye a cualquier spinner genérico): disponibilidad PDP, form de pregunta, revalidación SterenCard, total del carrito, procesando pago
  • (d) Arte de la tarjeta SterenCard (H03/H05)
  • (e) Badge «Diseñado y fabricado por Steren» del PDP

3 · Do not use when — cuándo no

  • Sello de respuesta oficial del Q&A (su check va en primary)
  • Texturas repetidas de fondo, viñetas de listas, marcas de agua (DS §6, E-10)
  • Dentro del arte de campaña o de cualquier raster: el ornamento no viaja en la imagen
  • Vestida de temporada fuera del child theme (D-11)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Asseticon-st-onda del sprite global: 3 franjas quebradas, currentColor en logo-cyan, ~400 bytesSVG del sistema, nunca raster
(a) Subrayado24×8 px bajo el h2; se dibuja al entrar al viewport (pieza 11: stroke-dashoffset 20.5→0, 500 ms, retardo 100 ms, IO umbral .5)reduce: no anima (no-preference)
(b) Check ATCmorph del botón (pieza 12): check-onda scale .4→1 + opacity, 200 ms ease-outreduce: aparece sin pop
(c) Loader.st-onda-loader (pieza 13): opacity .3↔1, 1.1 s ∞reduce: animation: none; opacity: 1
(d) SterenCardarte de la tarjeta dibujada (CSS/SVG), sin rasterH03 / H05
(e) Badge fabricantePDP «Diseñado y fabricado por Steren»solo ese sello
Temporadaonda tricolor por máscara CSS 26×8 (patrio.css:117-128): «se viste el símbolo que YA existe»solo child theme (D03, E-6)
ph-slotfuera de producción el espacio reservado pinta la onda a 28 px con etiqueta; en producción el slot es mudo, sin ondano es un uso público

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
todos24×8 px (subrayado) · al tamaño del control (check, loader) · 28 px (ph-slot, solo fuera de producción)3:1 (24×8)SVG icon-st-onda ~400 bytescurrentColor en logo-cyan

7 · Safe areas — zonas seguras

—

8 · Focal point — punto focal

—

9 · Crop behavior — qué pasa entre ratios

—

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Subrayado (a)24×8 bajo el h2igualigual
Loader (c)en el controligualigual

11 · Content rules — límites de copy

12 · Contrast & legibility — texto sobre media

  • logo-cyan sobre blanco es gráfico decorativo-redundante (E-11 / DS §1c): nunca porta información, por eso no se le exige 3:1
  • Sobre navy (SterenCard) la onda va en cian 5.49:1 como acento

13 · Asset specifications

PropiedadValor
SVGicon-st-onda en el sprite global (A15), 3 franjas quebradas, ~400 bytes
Patriomáscara 26×8 tricolor sobre el mismo símbolo (patrio.css:117-128)
Rasterninguno: la onda no se exporta a JPG/PNG

14 · Accessibility

  • aria-hidden en los 5 usos; el título, el botón o el sello portan el texto (G §3 D01: PASS)
  • Dibujo al entrar al viewport solo con no-preference (pieza 11); loader estático bajo reduce (pieza 13)

15 · Performance — entrega técnica

  • ~400 bytes dentro del sprite above-the-fold (≤8 KB, DS §6 L422); 0 raster
  • Onda-draw y onda-loader caben en el presupuesto ES-13 (≤1.2 KB JS + ≤1 KB CSS para las 4 micro-interacciones)

Do

  • Los 5 usos, siempre como SVG del sistema
  • Vestirla (patrio) en vez de dibujar otra
  • Subrayado bajo h2 de sección, no bajo cualquier título

Don't

  • Onda como textura, patrón de fondo, viñeta de lista o marca de agua
  • Onda dentro del arte de campaña o del packshot
  • Rings, olas o sellos «inspirados» en la onda
  • Un sexto uso sin enmienda al DS

Fuentes: DS §6 L428-436 (registro único de usos) · E-10, E-11 (cap.01) · ES-1, ES-13 · expediente 01 §2.30, §0.1 del inventario 02 · F §2.6 piezas 11-13 · D-11 / X-7 / E-6 · G §3 (D01)

D02

Superficies y fondos

Construido en el temaTodo el sitio

Lista cerrada de fondos: bg (el hueco de la foto es el mismo blanco del render), bg-subtle (bandas), cyan-tint (≤2 bandas por página, nunca PDP/checkout; micro-superficie solo badge-60min y chip de tienda) y navy (territorios). Sin fondos fotográficos de sección. Y un registro cerrado de 10 overlays/degradados con función y superficie: fuera del registro = FAIL (L-28).

1 · Purpose — para qué existe

Que la foto sea protagonista sobre superficies planas del sistema y que cada degradado que sobrevive haga trabajo (legibilidad · luz · progreso · profundidad · control): «cuida el uso de gradientes, son muy típicos de IA» (Tona, E-18/D-14).

2 · Use cases — cuándo usarlo

  • bg: alrededor de toda media de producto (tiles, tarjetas, galería, monedas)
  • bg-subtle: bandas y estados (404 departamentos, ph-slot, img.is-fail)
  • cyan-tint: ≤2 bandas por página (Aprende 2/2; ayuda del 404), nunca PDP/checkout; micro-superficies solo badge-60min y chip de tienda
  • navy: footer, SterenCard, panel del hero, B02, B03, H04 (territorios); producto sobre navy siempre en moneda blanca con aro (D-26/E-17)

3 · Do not use when — cuándo no

  • Fondo fotográfico de sección u onda/patrón como textura (background-image: url() fuera de <img> = 0, D-24)
  • Degradado liso como fondo del arte: rampa monótona sobre >30 % del ancho = decorativo (D-25, L-28)
  • Mesh / aurora / «trust gradients», glass decorativo (blur sin texto), neumorfismo, sombras fuera de e1-e3, radios >12 en imagen, viñetas «cine» >5 %
  • Un overlay nuevo, o uno de los 10 con otra receta, sin enmienda §12.6 (D-23)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito

1 Velo navy del hero

navy 92 % + backdrop-filter: blur(10px) + e2 · legibilidad · panel ≤400 px[E] registrado · sube a 96 % (DEV-01, L-01: 4.93:1 con arte blanco); solo con texto encima (E-2)

2 Velo blanco del cintillo + máscara

bg 96→92→0 + blur 10 + máscara 46 % · legibilidad · 72-104 px de alto[E] registrado · excepción E-2 (scrim funcional, receta única); DEV-05 padding-top ≥50 % para escenas (L-05)

3 Viñeta de tile

radial navy 5 % (118% 88% at 50% 32%, transparente 0-56 %) · profundidad · media del tile[E] home.css:192-194 · la única viñeta (D-27): nunca en hero, galería ni tarjetas

4 Radial .sc-module

luz a 88 % 0 % sobre navy · luz · 1380×250[E] cap.28 (5.49 conservado bajo el kicker) · un radial de luz exige lado mayor ≥600 px y ΔL* ≤12 (D §2e)

5 Luz de progreso

3 px primary→cyan, animation-timeline: scroll() · progreso · ancho de página[E] cap.19 · bajo reduce display: none (F-37)

6 Chip de flechas

bg 92 % + n300 · control · 44 px[E]

7 Chip de dots

n900 30 % · control · ~132×44[E] · 1.86-2.03:1 sobre arte claro → 60 % (DEV-02, L-02: 4.12:1) + franja del arte x 1300-1580 · y 630-720 con L* ≤60

8 Velo «+N» / contador P04

navy 70 % (tile) · 82 % (pastilla) · control / legibilidad[E] · 5.43:1 sobre foto blanca · 12.1:1 (EXP L1547-1548)

9 Friso del retrato H04

rgba(0,47,87,.92)→0 sin blur ni máscara · legibilidad · 420×~120[E] en código sin receta del sistema → registrado como variante del velo (E-8, ENM-07, L-26): navy 92→0, solo H04, solo retrato de estudio; medir el pie a la altura del texto (zona ≥75 % del degradado)

10 Tinte del tile tipo T06

linear-gradient(158deg, cyan-tint, bg-subtle 72%) · sin función registrada, tercer uso del tinte · 232×208[E] catalogo.css:272-273 → aplanar a bg-subtle (DEV-16, L-26) o enmendar DS §1c

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
todossuperficies por token; overlays según la tabla—sin asset (0 bytes)cero hex fuera de tokens.css (E-16); color-mix() sustituyó los ocho rgba() sueltos de home.css (EXP L3044, L3098)

7 · Safe areas — zonas seguras

—

8 · Focal point — punto focal

—

9 · Crop behavior — qué pasa entre ratios

—

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
cyan-tint≤2 bandas por página≤2≤2
Velo del cintillo (#2)72-104 px, solo donde hay fotoigualel tile sm <1024 vuelve a cuerpo opaco (sin velo)
Chip de dots (#7)n900 30 → 60 % sobre el arteigualdentro del bloque navy: sin scrim
Velo del hero (#1)sobre la foto, 92 → 96 %igualbloque navy opaco (no hay foto debajo)

11 · Content rules — límites de copy

12 · Contrast & legibility — texto sobre media

  • Sobre cyan-tint: n900 13.59:1 · sobre navy puro: blanco 13.60, cian 5.49 (G Anexo A)
  • Velo navy 92 % con arte blanco debajo: el cian cae a 4.35-4.40 → velo 96 % (4.93) y arte medio tono L* 40-60 bajo el panel (L-01)
  • Chip de dots n900 30 % sobre arte claro: 1.86-2.03 (FAIL 1.4.11) → 60 % = 4.12:1 (L-02)
  • Cintillo 92-96 %: ≥10:1 (EXP L2826-2828); n900 ≥12.5 · n700 7.8 incluso sobre foto negra
  • Velo «+N» navy 70 %: 5.43 sobre foto blanca; contador navy 82 %: 12.1:1

13 · Asset specifications

PropiedadValor
Tokensbg · bg-subtle · cyan-tint · navy (+ n900 en scrims de control) de tokens.css
Overlayslas 10 recetas de la tabla con color-mix(); backdrop-filter solo en #1 y #2 (excepción E-2)
Fondos fotográficosninguno; las escenas viven en <img> de T03/T04 (A04), no en background-image

14 · Accessibility

  • Un velo existe solo con texto encima (E-2): sin texto es decoración → FAIL
  • El contraste se mide sobre el píxel del compuesto, no sobre el token (G Anexo A)
  • Foco sobre superficies navy: .on-navy / focus.ring-inverse (DEV-04); sobre foto: propuesta focus.ring-media (ENM-01)

15 · Performance — entrega técnica

  • backdrop-filter nunca se anima (F-33): los velos son estáticos
  • Las superficies pesan 0 bytes: cero background-image raster
  • Un solo radial fuera de tiles (.sc-module); la viñeta solo en .dt-media/.mt-media (grep radial-gradient = 0 en el resto, D-27)

Do

  • Un fondo del sistema por sección
  • Velo solo con texto encima y con la receta única
  • Aplanar T06 (DEV-16), velo del hero a 96 % (DEV-01), dots a 60 % (DEV-02)

Don't

  • Fondo fotográfico o patrón de sección
  • Degradado liso como fondo del arte
  • Mesh, aurora, glass decorativo, neumorfismo
  • Overlay nuevo o receta desviada
  • cyan-tint en PDP/checkout o en una tercera banda

Fuentes: D §2e (D-23…D-27) y §3 D02 · L-01, L-02, L-05, L-26, L-28 (E-2, E-8, ENM-07, DEV-01/02/05/16) · E-16, E-17, E-18, D-14 (cap.01) · expediente 01 §2.32 · G Anexo A · DS §1c, §6, §10 · F-33, F-37

D03

Tema de temporada

Construido en el temaChild theme steren2026-patrio (apagado)

Child theme Industrias/steren2026-patrio (6 archivos, 22 KB, sin raster): cinta tricolor, papel picado, onda tricolor, sombrero en el ATC y fuegos en la confirmación. Capa encendida/apagada por admin; hoy apagada («espera su temporada»). Es el único lugar del sistema donde vive el ornamento folclórico (E-6 / D-11): el arte de campaña no lo hereda.

1 · Purpose — para qué existe

Vestir el chrome en temporada sin tocar un solo slot de imagen ni los colores semánticos: la fiesta es una capa CSS/JS sobre el tema padre, no arte.

2 · Use cases — cuándo usarlo

  • Solo en temporada (Fiestas Patrias), encendido desde Diseño → Configuración o Programación
  • Sobre el chrome: header (cinta + papel picado), onda de títulos, botones con #i-cart, página de éxito (fuegos)

3 · Do not use when — cuándo no

  • En el arte de campaña, imágenes de categoría o packshots (D-11 / X-7): «prohibido papel picado» sigue vigente fuera del child theme
  • Sobre el naranja de compra/pago, el azul de marca ni las superficies de estado
  • Fuegos fuera de checkout_onepage_success, en bucle, o sobre cifras (F-42)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Cinta tricolor#site-header::before, 4 px; pseudo-elemento absoluto («un bloque de 4 px empujaría la página»)patrio.css:53-100
Papel picado#site-header::after, SVG data-URI 144×26 repeat-x (108×18 en <768), top: 100% (no ocupa alto); 3 banderitas con calado y cordel; hueco pagado por #site-header { margin-bottom: 26px } (18 px bajo 768)ocupa y 120→146 a 1440; miga a y 146 (1440) / 128 (390)
Onda tricolormáscara CSS 26×8 sobre la onda del sistema (los 3 trazos viven en un shadow tree)patrio.css:117-128 · D01 vestida, no un asset nuevo
Sombrero en ATCmáscara 18 px en botones con #i-cart, hereda currentColorpatrio.css:149-158 · solo esos botones
FuegosWAAPI (Element.animate), 62 partículas de 9 px, 3 ráfagas a 0 / 320 / 660 ms (+≤90 ms), 900-1400 ms por partícula, cubic-bezier(.15,.75,.35,1), fill forwards, total ≤2.2 s, una sola vez en checkout_onepage_success; lienzo z-index: 0, pointer-events: none, aria-hidden, se borra soloreduce: matchMedia → return antes de crear el lienzo y .pt-fuegos { display: none }; oculto en @media print (patrio-fuegos.js arranca(), patrio.css:175-212)
Encendidoclase st-patrio en <body> + css/patrio.css (default.xml); checkout_onepage_success.xml carga patrio-fuegos.js; suite patrio-smoke 27admin · apagado hoy (es el tema activo en local)
Lo que no tocanaranja de compra/pago, azul de marca, superficies de estado, ningún slot de imagen del padreE-8 · D-11

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
≥768cinta 4 px · papel picado 144×26 · onda 26×8 · sombrero 18 px · fuegos 62 × 9 px—SVG data-URI / CSS / WAAPI — sin rastermargin-bottom: 26px en el header
<768papel picado 108×18 · margen 18 px—mismomiga a y 128 (390)

7 · Safe areas — zonas seguras

—

8 · Focal point — punto focal

—

9 · Crop behavior — qué pasa entre ratios

—

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Papel picado144×26 · margen 26144×26 · margen 26108×18 · margen 18
Cinta4 px4 px4 px
Fuegos62 partículas ≤2.2 s, una vezigualigual: el lienzo se desborda a los lados para estallar sobre blanco

11 · Content rules — límites de copy

CampoLímiteRegla
Encendidoadmin: Diseño → Configuración / Programacióncapa, no arte
Fuegos≤2.2 s · 3 ráfagas · ≤62 partículas · una vez · solo successF-42 / G-27

12 · Contrast & legibility — texto sobre media

  • Cinta y papel picado no portan información (G): decorativos
  • Fuegos siempre sobre blanco: detrás de la tarjeta navy eran invisibles → «el lienzo se desborda a los lados y los estallidos se plantan donde sólo hay blanco» (EXP L4025-4028)
  • El sombrero hereda currentColor: no altera el contraste del texto del botón

13 · Asset specifications

PropiedadValor
Child themeIndustrias/steren2026-patrio hijo de Industrias/steren2026: patrio.css, patrio-fuegos.js, default.xml, checkout_onepage_success.xml
Papel picadoSVG en línea (data-URI) de 3 banderitas, repeat-x — no es imagen subida
Rasterninguno: «no toca ningún slot de imagen del padre»

14 · Accessibility

  • Pseudo-elementos fuera del árbol; fuegos aria-hidden, pointer-events: none, bajo el contenido (z-index: 0)
  • G-27: ≤2 s, una sola vez, sin botón de parar (≤5 s); 3 ráfagas / 2 s = 1.5 destellos/s < 3 y área muy por debajo del 25 % del viewport (2.3.1)
  • Reduced-motion por la vía correcta: guarda JS (matchMedia) + CSS display: none — el interruptor global no alcanza a WAAPI (F-36)
  • El header crece 26 px (G-41): la miga sigue visible (y 146 / 128)

15 · Performance — entrega técnica

  • 22 KB en total; 0 raster; will-change: transform, opacity en 62 nodos durante ≤2.2 s = techo de partículas del sistema (F-42)
  • Cinta y papel picado son pseudo-elementos absolutos: no empujan la página; el hueco lo paga el margen del header
  • Trampa: position: relative en el header mata el sticky (EXP L4012-4015)

Do

  • Encender solo en temporada, desde el admin
  • Vestir lo que ya existe (onda, ATC) en vez de añadir piezas
  • Fuegos solo en la confirmación, sobre blanco, una vez

Don't

  • Papel picado, cintas o fuegos en el arte de campaña o en el chrome base
  • Tocar naranja buy, azul de marca o estados
  • Raster de temporada (banderas JPG, GIF animados: F-08)
  • Fuegos en otra página o en bucle

Fuentes: inventario 02 §S22 · expediente 01 §2.23 (L3857-3880, L3954-3976, L4012-4028, L4216-4233) · F §2.6 pieza 25, F-36, F-42 · G-27, G-41 · E-6, D-11, X-7 (cap.01)

D04

Glifos del set propio como imagen

Construido en el temaT06, PDP, mega-menú, 404/503

El icono como imagen: sprite SVG global monolínea 24-grid, trazo 1.75, 65+ símbolos, un glifo por concepto; sprites locales cuando una landing necesita los suyos (Tech Services: 13 glifos 48-grid, trazo 2.4). Donde no hay foto, el glifo es la cara honesta (T06 mtile--tipo / dtile--sinfoto), nunca un hueco ni una ilustración.

1 · Purpose — para qué existe

Que la iconografía sea sistema (una retícula, un trazo, un mapa glifo↔texto en la plantilla) y no arte: el glifo es decorativo-redundante, el texto porta el significado.

2 · Use cases — cuándo usarlo

  • Tile tipo (T06) cuando la categoría no tiene landing_image: 40 px (landing) / 48 px (héroe del home) en primary / primary-text
  • Chrome: drawer y mega-menú (13/13 departamentos a 24 px en primary), tabs móviles del PDP (i-info · i-list · i-chat · i-book · i-star), contador de galería i-grid, #i-check del sello, camión de envío
  • Páginas: 404 (13 tarjetas de departamento), Nosotros (4 discos de valores), Tech Services (sprite local con --ts-wash)

3 · Do not use when — cuándo no

  • Como ilustración de campaña o «AI-hero-illustration»: la ilustración es solo SVG monolínea del sistema (X-9)
  • Duplicando un concepto con dos glifos (i-shield ya existía: no se duplica)
  • Como raster: Tech Services pasó de 14 PNG a texto + tecnico.webp + 13 glifos
  • Con texto dentro del SVG (404/503: sin una sola letra)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Sprite globalSVG monolínea 24-grid, trazo 1.75; 51 → 64 → 65 símbolos (+5 de la filosofía); glifos a 24 px en primary; above-the-fold ≤8 KB (UI de chrome, onda y specs frecuentes)un glifo por concepto, nunca repetido
Sprites localesTech Services: 13 glifos 48-grid, trazo 2.4 + #ts-lockup (lockup vectorizado con potrace, currentColor), fill="var(--ts-wash)" (lavado bajo el trazo); «son de esta landing y el sprite global lo paga toda la tienda»servicio.phtml · EXP L1973-1975
Tile tipoT06: mtile--tipo (landing) / dtile--sinfoto (home): glifo 40 / 48 px sobre tinte (a aplanar, DEV-16) o cuerpo opacofallback automático, no decisión de diseño
PDPtabs móviles por glifo; contador de galería i-grid en pastilla navy .82 (12.1:1); #i-box/#i-check en el rótulo de volumenel mapa glifo↔texto vive en la PLANTILLA (EXP L1906)
Mega-menú / drawer13/13 departamentos a 24 px en primary #0093D0chrome
40413 tarjetas con glifo primary («manda el DS» sobre el rulebook de «acento en 2 usos», EXP L1415-1417)D05
Nosotrosmisión/visión/valores: 4 discos con glifos 24-grid 1.75 (5 símbolos nuevos al sprite)M05

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
Chrome24 px1:1sprite global 24-gridtrazo 1.75
Tile tipo40 px (landing) · 48 px (héroe home)1:1sprite globalprimary sobre tinte · primary-text sobre blanco
Tech Services48-grid, trazo 2.41:1sprite local de la plantilla--ts-wash

7 · Safe areas — zonas seguras

—

8 · Focal point — punto focal

—

9 · Crop behavior — qué pasa entre ratios

—

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Glifo del tile tipo40 / 48 px40 px40 px
Tabs del PDPtextotextoglifo + etiqueta accesible

11 · Content rules — límites de copy

CampoLímiteRegla
Mapa glifo↔textoen la plantilla, no en el contenidoEXP L1906-1908
Conceptoun glifo, nunca duplicadoEXP L1558-1560, L1898-1900

12 · Contrast & legibility — texto sobre media

  • primary sobre blanco 3.45:1 y sobre tinte 3.13:1: válido porque es decorativo-redundante — el texto porta la información (G §3 T06)
  • Sobre navy (Nosotros) glifos con tokens on-navy

13 · Asset specifications

PropiedadValor
Sprite globalSVG 24-grid, trazo 1.75, 65+ símbolos; above-the-fold ≤8 KB (DS §6 L422)
Sprite localTech Services: 13 glifos 48-grid + #ts-lockup
Raster0

14 · Accessibility

  • aria-hidden en todo glifo decorativo; el nombre viaja en el texto adyacente (G §3 D04: PASS)
  • Tabs móviles por glifo: etiqueta accesible obligatoria (el glifo no es el nombre)

15 · Performance — entrega técnica

  • Sprite above-the-fold ≤8 KB; los sprites locales los paga solo su landing
  • 0 KB de imagen en el tile tipo

Do

  • Un glifo por concepto, en la retícula y el trazo del sprite
  • Sprite local cuando una landing necesita glifos propios
  • Cargar la foto de categoría cuanto antes: el glifo es fallback (manual §7)

Don't

  • PNG/JPG de iconos
  • Ilustraciones «de IA» o glifos de otra retícula/trazo
  • Glifo como decoración permanente donde debería haber foto
  • Duplicar símbolos

Fuentes: expediente 01 §2.26, §3 (18), L1415-1417, L1558-1560, L1898-1908, L1973-1975, L2003-2005 · inventario 02 §S16, §S17, §S18 · DS §6 L422 · G §3 (D04, T06) · X-9 (cap.01) · ficha T06 · L-26 (DEV-16)

D05

Estados: 404 · 503 · vacíos

Construido en el temaPáginas de estado

404, 503/mantenimiento y los vacíos del sistema: ilustración SVG en línea, monolínea 24-grid, sobre tokens y sin una sola letra («una clavija y un contacto que no se alcanzan»; en 503 «el mismo contacto de pared con la placa ladeada y un desarmador puesto»), voz V4 (humor solo en bajo riesgo). Los slots sin arte son mudos: nunca «próximamente», nunca esqueleto (E-19).

1 · Purpose — para qué existe

Que un error o un hueco se lean como parte del sistema (tokens, glifos, voz) y ofrezcan salida real («sólo se ofrece lo que sigue de pie»), sin un raster con el texto quemado (el antes: 404_page_V2.jpg, 1004×480).

2 · Use cases — cuándo usarlo

  • 404: cms_noroute_index.xml (NOINDEX,NOFOLLOW, <title>Página no encontrada), 3 bandas: disculpa (blanca) → 13 departamentos con glifos (bg-subtle) → ayuda (cyan-tint); buscador 56 px
  • 503 / 404 duro / nocache / report: skin pub/errors/steren/ (design.xml → <skin>steren</skin>); MantenimientoConCara fuerza 503.php también en developer; Retry-After: 600
  • Vacío de slot: ph-slot--mudo en producción (aria-hidden, sin texto); ph-slot con onda 28 px + etiqueta solo fuera de producción

3 · Do not use when — cuándo no

  • Raster con texto (el antes)
  • «Próximamente», esqueletos o grises disfrazados de contenido en un slot vacío
  • Humor en momentos de riesgo (pago, error de pedido): V4 solo en bajo riesgo
  • Recursos de pub/static/ en el skin 503 («sale desnuda»)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
404 · ilustraciónSVG en línea viewBox="0 0 340 190", fill="none", trazos en tokens (--st-color-navy, n300, cyan-tint), monolínea 24-grid como el sprite, sin letras, aria-hiddenerror.phtml:47-65
404 · tamañomax-width 460px (≥1024: 2.ª columna de minmax(0,620px) minmax(0,1fr), gap 64 → 460×257) · 320 px (768-1023) · 248 px y order: -1 (<768)404.css:65-74 · sin raster, sin campos
404 · bandasdisculpa (blanca) → 13 departamentos con glifos (bg-subtle) → ayuda (cyan-tint); buscador 56 px; 404.css 8.4 KB, «namespace .e404-*, cero hex»EXP L1356-1362
503 · skinpub/errors/steren/: page.phtml con Heebo <link rel="preload">, logo images/logo.png (PNG 300×80 → 120×32), favicon propio 16×16 (md5 88733ee5…, distinto del de la tienda); 14 tokens copiados con guarda de deriva; datos de contacto congelados en datos.php«si pide algo de pub/static/ sale desnuda» (EXP L3829)
503 · ilustraciónSVG en línea viewBox="118 6 200 180" (200:180), .e-ilu { max-width: 380px }, misma rejilla minmax(0,620px) minmax(0,1fr) gap 64; hermana del 404 (mismo kicker, mismo display)503.phtml:41-63 · css/styles.css:110
VozV4: humor solo en momentos de bajo riesgo; «sólo se ofrece lo que sigue de pie»E-23
Vacíos (slots sin arte)ph-slot fuera de producción: bg-subtle, borde 1 px dashed n300, radio 4, padding 16, min-height 96, onda 28 px + etiqueta «Espacio reservado para material del cliente: …» (role="img"); en producción ph-slot--mudo: sin borde, sin padding, min-height 0, aria-hiddenE-19 · Slot.php:32-56 · cards.css:296-305
Imagen fallidaimg.is-fail { background: bg-subtle }; esqueleto solo mientras carga (pieza 9)steren.css:143

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
404 ≥1024ilustración 460×257340:190SVG en línea (sin asset)2.ª columna del grid
404 768–1023320 px340:190SVG
404 <768248 px, order: -1 (arriba)340:190SVG
503.e-ilu ≤380 px; logo 120×32; favicon 16×16200:180SVG en línea del skin + logo.png 300×80skin autocontenido

7 · Safe areas — zonas seguras

—

8 · Focal point — punto focal

—

9 · Crop behavior — qué pasa entre ratios

—

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Ilustración 404460 px320 px248 px, arriba (order: -1)
Bandas 404333
Ilustración 503≤380 pxigualigual

11 · Content rules — límites de copy

CampoLímiteRegla
Copyvoz V4: motivo + salida; humor solo en bajo riesgoE-23
Texto en la ilustración0SVG sin letras
Ayudasolo lo que sigue de pie; contacto congelado en datos.php (503)EXP L3822, L3830

12 · Contrast & legibility — texto sobre media

  • Trazos en navy, n300, cyan-tint sobre blanco: decorativos (aria-hidden); el texto del sistema lleva el mensaje
  • «cero degradados … cero negro puro» (autocrítica del 404, EXP L1412)
  • Skin 503 con los 14 tokens copiados: mismos contrastes que el tema

13 · Asset specifications

PropiedadValor
404SVG en línea viewBox 0 0 340 190 — error.phtml:47-65
503SVG en línea viewBox 118 6 200 180 — 503.phtml:41-63; logo.png PNG 300×80 a 120×32; favicon.ico 16×16 propio
Vacíosph-slot / ph-slot--mudo (cards.css:296-305), sin imagen
Raster0 en 404; en 503 solo logo + favicon del skin

14 · Accessibility

  • Ilustraciones aria-hidden (no portan información) — G §3 D05: PASS
  • ph-slot fuera de producción: role="img" + aria-label; en producción aria-hidden
  • Salida por teclado: buscador de 56 px y 13 departamentos

15 · Performance — entrega técnica

  • 404: sin raster; 404.css 8.4 KB (breakpoints 768/1024/1280)
  • 503: skin autocontenido (fuente, hoja, logo, favicon); report.phtml no probado en modo producción (EXP L4058-4060)
  • img.is-fail: una imagen rota se ve como superficie bg-subtle, no como icono roto

Do

  • SVG monolínea sin letras, sobre tokens, voz V4
  • Slot vacío = mudo en producción
  • Skin 503 con tokens copiados y guarda de deriva

Don't

  • JPG con el texto quemado (el antes)
  • Esqueleto o «próximamente» como estado
  • Ilustración de otra retícula, con degradados o negro puro
  • Humor en flujos de riesgo

Fuentes: inventario 02 §0.1, §0.2, §S18 · expediente 01 §2.21, §2.22 (L1356-1420, L3811-3832, L4058-4060) · E-19, E-23, X-9 (cap.01) · G §3 (D05)

S01

Imagen para compartir (OG)

Hueco reservado sin campo de cargaProducto (1:1) · categoría/home (sin imagen)

La imagen que viaja fuera del sitio (WhatsApp, Meta, LinkedIn, X). Hoy: og:image = packshot 1200×1200 solo en PDP, sin og:image:width/height/alt; categoría, home y CMS sin imagen. Regla: derivar una 1200×630 (A14) sin texto, con el sujeto en el cuadrado central; el mensaje viaja en og:title / og:description.

1 · Purpose — para qué existe

Que un enlace compartido muestre producto, categoría o campaña reconocibles en la vista previa de cualquier canal sin que la plataforma recorte lo importante: FB/LinkedIn recortan el 1:1 actual al centro (pierden el 48 % del alto) y WhatsApp vista chica recorta 1:1 del centro de un 1.91:1.

2 · Use cases — cuándo usarlo

  • Producto: _x1 (P01) derivada a 1200×630, producto al 85 % del alto sobre blanco (E-28)
  • Categoría: A04 (escena de la landing) recortada al centro a 1.91:1 — pierde 17 % de alto, la ventana T03 (x 25-75 % · y 12-62 %) sobrevive
  • Campaña: ventana 1.91:1 (1375×720) del A01 anclada a la derecha (x 52.3-100 %): contiene la caja del sujeto 58-84 % y deja fuera el tercio de copy (C-19)
  • Home/CMS: og:* completo pendiente (hoy sin og:*; «asset social 1200×630» pendiente, EXP §2.28)

3 · Do not use when — cuándo no

  • El 1:1 sin derivar (FB/LinkedIn recortan 48 % del alto: el producto que llene >52 % del alto pierde arriba y abajo)
  • Con texto, precio, %OFF o vigencia en la imagen (E-01, I-29): WhatsApp y Meta cachean la vista previa y el precio caduca
  • Collage o varios productos; el A01 4:1 entero (dentro de 1.91:1 pierde el 52 % del ancho)
  • Wordmark rasterizado o logo >8 % del alto: la única excepción es el SVG oficial (E-4)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
og:imageA14 1200×630 (1.91:1) JPG; hoy product_base_image 1200×1200 (ProductoSeo.php:57-64, view.xml:30-33, pasa por el resize nativo) — verificado cache/a68cd9…/5/0/506-034_x1_11.jpgDEV-09 (derivada para producto, categoría y campaña)
og:image:width / height1200 / 630hoy ausentes
og:image:altnombre del producto · nombre de categoría · plantilla del hero (I-24) para campañashoy ausente · FAIL (G-06)
og:title≤60: nombre del producto · nombre de categoría · título de campañaI-29
og:description≤155: beneficio + vigencia («Que la lluvia no te apague: 90 min de respaldo. Vigencia: del 10 al 24 de septiembre»), sin precioI-29
og:type / og:locale / og:site_nameproduct (PDP) · website (categoría); es_MXconstruido (og.phtml:17-29, seo.phtml:19-27)
twitter:cardsummary_large_image en PDP; en categoría hoy summary → también summary_large_imageI-29
JSON-LDProduct.image usa hoy la misma URL del packshot (ProductoSeo.php:93-96); qué imagen lleva cuando la OG sea 1200×630 se decide en DEV-09dato
Logo (opcional)SVG oficial (A15) ≤8 % del alto (≤50 px), abajo a la derecha, fuera del cuadrado centralúnica excepción de texto (E-4 / L-15, ENM-04)

5 · Layout blueprint — plano técnico

S01 · A14 OG 1200×630 (1.91:1) — derivada, no fotografiada producto = _x1 al 85 % del alto sobre blanco CUADRADO CENTRAL 630×630 — lo que ve WhatsApp (C-19) PRODUCTO al 85 % del alto (≈535 px, E-28) aire ≥7 % aire ≥7 % logo SVG ≤8 % del alto (≤50 px), abajo-derecha (E-4) focal 1200 px 630 px Sin texto: og:title / og:description llevan el mensaje (I-29). Única excepción: el logotipo SVG oficial (A15) ≤8 % del alto (L-15). Todo lo esencial dentro del cuadrado central x 23.7-76.3 %: sobrevive el recorte 1:1 de la vista chica de WhatsApp. Debe leerse a 400×209 (E-28). Categoría = A04 recortada al centro a 1.91:1; campaña = ventana del A01 (plano siguiente).
S01 · campaña: ventana 1.91:1 sobre el A01 2880×720 1375×720 anclada a la derecha → 1200×628 se pierde: tercio de copy + panel (x 0-52 %) VENTANA OG 1375×720 (x 52.3-100 %) SUJETO x 58-84 % (caja de H01) focal 2880 px 720 px El A01 entero no sirve: 4:1 dentro de 1.91:1 pierde el 52 % del ancho (C §3.23). La ventana contiene la caja del sujeto 58-84 % y deja fuera la zona limpia del panel: el focal (72 %, 50 %) cae en x 41 % de la OG. Cuando exista el campo A02 (DEV-07), E-28/I-29 documentan la ruta alterna: el 4:3 recortado al centro a 1.91:1.

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
FB / LinkedIn / X (summary_large_image)1200×630 entera; del 1:1 actual solo se ve y 23.7-76.3 %1.91:1A14 1200×630recorte central de la plataforma
WhatsApp vista chicacuadrado central x 23.7-76.3 % de la A14; legible a 400×2091:1 / 1.91:1 reducidoA14 (mismo archivo)por eso el sujeto vive en el cuadrado central (C-19)
Hoy · PDPog:image 1200×12001:1P01 vía resize nativo (JPEG q80)sin width/height/alt
Hoy · categoría / home / CMSsin og:image (home/CMS sin og:*)——hueco 13; sin atributo de categoría para el raster (seo.phtml:4, PlpSeo.php:11-12)

7 · Safe areas — zonas seguras

Cuadrado central x 23.7 % → 76.3 % (630×630): todo lo esencial dentro (C-19) — es lo que muestra WhatsApp en vista chica y lo que sobrevive a cualquier recorte 1:1. Producto: alto = 85 % del lienzo (≈535 px), aire ≥7 % lateral, blanco 255 alrededor (E-28; WARNING <75 % de alto). Categoría: la ventana 1.91:1 sobre el A04 (1400×733) conserva x 25-75 % · y 12-62 % del T03. Campaña: la ventana anclada a la derecha del A01 conserva la caja del sujeto x 58-84 % · y 22-78 %. El logo, si va, en la esquina inferior derecha, fuera del cuadrado central y ≤8 % del alto.

8 · Focal point — punto focal

(50 %, 50 %) del 1200×630 para producto (centrado, E-28). Categoría: el focal del A04 (50 %, 40 %) se conserva por recorte central (solo se pierde alto). Campaña: el focal del A01 (72 %, 50 %) cae en x 41 % de la ventana [(0.72 − 0.523) / 0.477], dentro del cuadrado central. Verificación: reducir a 400×209 y comprobar que el sujeto se reconoce (E-28).

9 · Crop behavior — qué pasa entre ratios

Las plataformas recortan, no escalan: FB/LinkedIn muestran 1.91:1 → del 1:1 actual se ve y 23.7-76.3 % (48 % del alto perdido); WhatsApp vista chica recorta 1:1 del centro de un 1.91:1 → x 23.7-76.3 %. Por eso el asset es 1.91:1 con el sujeto en el cuadrado central, y por eso no sirve ni el 1:1 sin derivar ni el 4:1 entero. Ruta alterna documentada (E-28 / I-29) cuando exista el campo A02 (DEV-07): el 4:3 re-encuadrado, recortado al centro a 1440×754 → 1200×628.

Asset 1200×1200 — lo que se ve según el ancho de pantalla (cover; anclaje por ventana) 1 1 · 1.91:1 FB/LinkedIn (viewport 1200×630) ve 1200×630 px del asset → recorte vertical 48% 2 2 · 1:1 WhatsApp chico (viewport 630×630) ve 1200×1200 px del asset → sin recorte
Asset 1200×630 — lo que se ve según el ancho de pantalla (cover; anclaje por ventana) 1 1 · 1.91:1 FB/LinkedIn (entero) (viewport 1200×630) ve 1200×630 px del asset → sin recorte 2 2 · 1:1 WhatsApp chico (viewport 630×630) ve 630×630 px del asset → recorte lateral 48%

10 · Responsive behavior — desktop → tablet → móvil

No depende del viewport sino del canal: un solo archivo 1200×630 sirve a la vista grande (1.91:1 entera) y a la chica (cuadrado central). Los canales cachean la vista previa (I-29): la imagen no lleva nada que caduque.

11 · Content rules — límites de copy

CampoLímiteRegla
og:title≤60 caracterestítulo de campaña, nombre de categoría o de producto (I-29)
og:description≤155 caracteres, sin «$»beneficio + vigencia; nunca precio (I-29: la vista previa se cachea)
og:image:altnombre del producto / categoría; plantilla del hero para campañasG-06 · I-24
Texto en la imagen0 (salvo logo SVG ≤8 % del alto)E-01 · E-4 / L-15
Legibilidadreconocible a 400×209E-28

12 · Contrast & legibility — texto sobre media

  • Sin texto: no hay contraste que medir; el logo SVG, si va, sobre zona limpia de la esquina (blanco en producto; muro/mesa en escena), nunca sobre el producto
  • El producto sobre blanco 255 se lee en cualquier vista previa clara u oscura; en categoría/campaña la escena manda (sin velo: no hay texto que proteger)

13 · Asset specifications

PropiedadValor
A141200×630 · 1.91:1 · sRGB · JPG · sin texto · derivada, no fotografiada (E-28); WARNING producto <75 % del alto · FAIL 1:1 sin derivar o texto
Productode la _x1 (P01 1200×1200): alto del producto = 85 % (≈535 px), centrada, blanco 255
Categoríadel A04 1400×880: recorte central 1400×733 → 1200×630
Campañadel A01 2880×720: ventana 1375×720 anclada a la derecha (x 52.3-100 %) → 1200×628
Pesosin techo propio en las fuentes; hoy el og:image sale del resize nativo (JPEG q80)
Nombreog_producto_SKU_1200x630.jpg · og_cat_<slug>_1200x630.jpg · AAAA-MM_campaña_og_1200x630.jpg (L-30)
Dóndeproducto: derivada automática (DEV-09); categoría: hoy sin atributo; home/CMS: hoy sin og:*

14 · Accessibility

  • og:image:alt obligatorio (G-06): nombre del producto / categoría / plantilla del hero — hoy ausente (FAIL)
  • Nada esencial vive solo en la imagen (E-01): título, descripción y vigencia son metadatos de texto

15 · Performance — entrega técnica

  • Una derivada por entidad generada en servidor (DEV-09), no a mano; las plataformas la cachean (I-29): cambiar el arte exige purgar en el depurador de Meta
  • Verificación: depurador de Meta y vista previa de WhatsApp muestran imagen + título + descripción; og:description sin «$» (I-29)
  • Hoy el PDP ya sirve la URL cacheada del resize nativo: la derivada 1.91:1 entra en la misma cadena

Do

  • 1200×630 derivada: producto al 85 % del alto sobre blanco
  • Sujeto dentro del cuadrado central; leer a 400×209
  • OG completo: title ≤60, description ≤155 sin precio, image:width/height/alt
  • Campaña: ventana del A01 anclada a la derecha

Don't

  • Compartir el packshot 1:1 tal cual
  • Texto, precio, vigencia o %OFF en la imagen
  • Logo rasterizado o >8 % del alto
  • El A01 4:1 entero o el panel de copy dentro de la OG

Fuentes: inventario 02 §S12, hueco 13 · expediente 01 §2.28 · C §3.23 (C-19) · D §3 S01 · E-28, E T-5 · I-29 (I-24) · G-06 / G §3 S01 · L-15 (E-4, ENM-04, DEV-09), L-30 · E-01 (cap.01)

S02

Imagen en feeds (Merchant, Meta)

Vive en el catálogo (dato)Industrias_Feeds

La imagen de producto en los feeds (Google Merchant, Meta) es el packshot P01 _x1 tal cual (1200×1200, blanco puro, intocable): sin versión especial, sin texto, sin badge.

1 · Purpose — para qué existe

Que el mismo archivo que gobierna PLP/PDP alimente los feeds sin una segunda verdad: lo que cumple E-07 cumple lo que piden las plataformas.

2 · Use cases — cuándo usarlo

  • Siempre que el producto tenga _x1 conforme a E-07 (1:1, blanco puro 255, estudio uniforme)

3 · Do not use when — cuándo no

  • Con packshots retocados para el feed (fondo de color, marca de agua, badge, texto): las plataformas los rechazan y el sitio no los usa
  • Con la _x1 de un SKU sin foto propia (fallback de otro producto)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
Fuentepackshot P01 _x1 1200×1200 sobre blanco puro (A05), sin sombra ni textodato (intocable)
EmisorIndustrias_Feeds (taxonomía S02)dato
Requisitos de plataforma [H]≥800 px de lado, fondo blanco, sin texto / marca de agua / promos — práctica de las plataformas, verificar en el panel de Merchant (no consta en las fuentes del tema)gate editorial

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
Feed1200×1200 (la _x1)1:1A05sin derivar

7 · Safe areas — zonas seguras

—

8 · Focal point — punto focal

—

9 · Crop behavior — qué pasa entre ratios

—

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Imagenla misma _x1——

11 · Content rules — límites de copy

CampoLímiteRegla
Texto en la imagen0E-01 / E-07

12 · Contrast & legibility — texto sobre media

  • Producto sobre blanco 255: sin velo ni texto

13 · Asset specifications

PropiedadValor
A05packshot _x1 1200×1200, blanco puro; el mismo archivo de P01/P03/P04/S01

14 · Accessibility

  • El nombre del producto viaja en el feed como texto; la imagen no lleva información

15 · Performance — entrega técnica

  • Sin proceso propio: el feed toma la URL de la _x1 ya publicada

Do

  • _x1 conforme a E-07 para todo SKU
  • Verificar en el panel de Merchant los rechazos por imagen

Don't

  • Versiones «para feed» con texto, fondo o badge
  • Collage de variantes

Fuentes: taxonomía 00 (S02, P01) · E-07 (cap.01) · E-30 · inventario 02 §0.4 (pipeline nativo)

S03

Correos transaccionales

Construido en el temaCorreos

El único raster de todo TEMA/**/email/ es el logo blanco de 150 px en la cabecera navy; ninguna plantilla emite miniaturas de producto ni imagen de campaña. Fuera del alcance de esta guía: la spec vive en tema-2026/correos-transaccionales.md.

1 · Purpose — para qué existe

Registrar que el correo no consume ningún asset de campaña ni de producto, para que nadie diseñe un «hero de correo» que no tiene dónde pintarse.

2 · Use cases — cuándo usarlo

  • Cabecera del cascarón: logo-blanco.png a 150 px sobre #002F57

3 · Do not use when — cuándo no

  • Imagen de campaña, hero o banner en correos (no existe el slot)
  • Miniaturas de producto en pedido/cliente/newsletter (las plantillas no emiten <img>)

4 · Anatomy — partes

ParteQué es y cómo se comportaRequisito
CascarónMagento_Email/email/header.html:38-45: tabla 600 px; <td style="background-color:#002F57; padding:22px 24px"> con <img src="images/logo-blanco.png" width="150" style="display:block; height:auto; width:150px; max-width:150px">, alt = nombre de la tiendaúnico raster
Logologo-blanco.png PNG RGBA 300×80 (4,2 KB) → 150 px (2×)el mismo del footer
CuerpoMagento_Sales, Magento_Customer, Magento_Newsletter, Magento_Contact: sin <img>design/email/logo vacío
Piesolo texto (footer.html)
Alcancefuera de esta guía: tema-2026/correos-transaccionales.md (fase 0 = cascarón Industrias_Correos con tokens en línea; 17 bloques Mailchimp pegados a mano, hex fuera de tokens)EXP §2.29

6 · Dimensions — por viewport

ViewportRender en pantallaRatioAsset a entregar (2×)Notas
Correo (600 px)logo 150×40300×80 (15:4)logo-blanco.png 300×80sin imagen de campaña ni miniaturas (hueco 21)

7 · Safe areas — zonas seguras

—

8 · Focal point — punto focal

—

9 · Crop behavior — qué pasa entre ratios

—

10 · Responsive behavior — desktop → tablet → móvil

ElementoDesktop ≥1024Tablet 768–1023Móvil <768
Logo150 px150 px150 px (max-width)

11 · Content rules — límites de copy

12 · Contrast & legibility — texto sobre media

  • Logo blanco sobre navy #002F57 (hex en línea del correo; el tema usa tokens): decorativo con alt del nombre de la tienda

13 · Asset specifications

PropiedadValor
Logoimages/logo-blanco.png 300×80 RGBA, 4,2 KB
Campaña / productoninguno

14 · Accessibility

  • alt = nombre de la tienda en el logo; todo lo demás es texto

15 · Performance — entrega técnica

  • Un solo raster de 4,2 KB por correo

Do

  • Dejar el correo en texto + logo hasta que exista la spec de correos

Don't

  • Hero de campaña o packshots en el correo «porque hay arte»
  • Un segundo logo (SVG no existe: hueco 12)

Fuentes: inventario 02 §S19, §S20, huecos 12 y 21 · expediente 01 §2.29 · tema-2026/correos-transaccionales.md (fuera de alcance)

06Responsive Art Direction — desktop → tablet → móvil

Tesis. El sistema tiene tres estados de arte (<768 móvil · 768-1023 tablet · ≥1024 desktop; tokens.css:6, container 1440) y esta guía los verifica en siete anchos: 360, 390, 768, 1023, 1440, 1920 y —solo para el hero— 2560. Móvil no es un recorte: el hero cambia de asset (A02 4:3), los tiles cambian de rejilla (2 columnas, filas 172), el panel del hero baja a bloque navy estático, los chips y las flechas desaparecen. Un solo slot recorta de verdad: el hero (object-fit: cover, home.css:39-41) — lateral en tablet (10 %/lado a 768), nativo a 1440, vertical desde 1536 (75 % visible a 1920, 56 % a 2560). Todo lo demás vive en cajas de ratio fijo (filas 208/172, aspect-ratio) o pinta contain sobre blanco: ahí el riesgo no es el recorte sino el tamaño mínimo del sujeto (86-92 px de foto en tiles chicos móviles, 52 px en la moneda móvil, 30 px en chips). Coordenadas: fracciones del lienzo del asset (x de izquierda a derecha, y de arriba abajo). «W» = ancho útil dentro de .wrap: 1392 (≥1464) · 976 (1024) · 736 (768) · 358 (390) · 328 (360). Toda cifra de recorte sale de la fórmula de cover (ventana = ratio caja ÷ ratio asset) sobre las cajas del inventario 02 §5; lo no medido dice «medir en calidad2».

Estado Anchos de verificación Qué cambia en el arte
Desktop ≥1024 1440 · 1920 (+2560 solo hero) Hero 4:1 nativo a 1440; desde 1536 pierde alto (12,5 % arriba/abajo a 1920; 22 % a 2560). Mosaico 4 col × 208; PLP 4 col (233); galería collage con héroe 605
Tablet 768-1023 768 · 1023 Hero alto 240-287, recorte lateral ≤10 %/lado; el panel de 400 px ocupa 52 %×81 % (768). Mosaico 2 col × 172 (packshot 86-89 px); PLP 3 col (203); T05 pierde el cintillo (<1024)
Móvil <768 390 · 360 Hero = A02 4:3 + bloque navy debajo, sin flechas (hoy: hueco gris). Mosaico 2 col; PLP 2 col (153/138); galería → carrusel snap 358; 1 badge sobre foto; header 110

Reglas RS-01…RS-24

# Regla Marca · fuente Verificación PASS · WARNING · FAIL Aplica
RS-01 Diseña y verifica todo componente con media en tres estados y siete anchos. [D] tokens.css:6 + clamp del hero + manual §5 Capturas a 360, 390, 768, 1023, 1440, 1920 (+2560 solo hero) con el asset real PASS 7/7 sin sujeto cortado ni control encima · WARNING falta 1023 o 360 · FAIL falta cualquier otro ancho todos
RS-02 Calcula la ventana de recorte antes de producir el arte. Ventana = ratio caja ÷ ratio asset; caja más ancha → se pierde alto (1 − ratio asset/ratio caja)/2 arriba y abajo; más estrecha → ancho por lado [D] object-fit: cover (home.css:41) Overlay de las 6 ventanas del hero (§ ventanas) sobre el arte en el archivo de diseño PASS sujeto y copy dentro de la intersección · FAIL sujeto fuera en cualquier ventana H01, H02, H04 (móvil), T03, T04, V02, S01
RS-03 Declara focal point y subject box en fracciones del lienzo; la subject box vive dentro de la intersección de todas las ventanas menos las zonas de UI [H] extiende D-03 y manual §5.1 (L-07: la zona «siempre» es 2304×405; 2520 desde 834 px) La ficha del asset trae las dos coordenadas; se superponen en los 7 anchos PASS dentro 7/7 · WARNING toca una zona de UI en un solo ancho ≤2 % del sujeto · FAIL sujeto bajo panel, flecha, dots, badge o velo A01, A02, A04, A07, A08, A10, A12, A14
RS-04 Deja la zona de copy del sistema limpia de sujeto y de detalle. [D] D-04 + home.css:48-67 (panel left:64; bottom:16; max-width:min(400px,72%)), :211-232, catalogo.css:217-248 (cintillo 104/92/72/74) H01: unión x 2,5-58 % · y 12-96 %; T03: y 68-100 % PASS nada relevante bajo la zona · FAIL producto o rostro bajo panel o velo en cualquier estado H01, H02, T01, T02, T03, T05, V02
RS-05 Deja limpia la zona de controles. [D] home.css:100-105 (dots 44×44 abajo al centro), :118 (flechas 44 px a 10 px del borde, top:50%), :88-89 (vigencia abajo-derecha), cards.css:18-19 (badges), pdp.css (play 48, contador, velo «+N») Overlay de controles en cada estado PASS · WARNING control sobre fondo o contexto · FAIL control sobre el sujeto o un rostro H01, H02, P03, P04, P05, V02
RS-06 Valida móvil con el asset alterno, nunca con el desktop encogido ni recortado. [E] DS §7, C6 R4, ES-11; hero.phtml:37-45 (picture{display:none} <768) Captura a 390 y 360 con A02 cargado; <source media="(max-width:767px)"> sirve A02 PASS A02 real · FAIL A02 ausente (hoy) o A01 escalado H01, H02
RS-07 Un solo 1:1 (A03 800×800) alimenta T01/T02/T05/T08: la _x1 del representante al 85-90 % del lienzo, sin sombra, fondo 255 [H] C-07 arbitrado por L-09 (renders 318/239/129/89/30 px + hover ×1,09) Bounding box del sujeto en el archivo (herramienta de selección) PASS 86-92 % · WARNING 80-86 % · FAIL <80 % (ilegible a 89 px) o >92 % (toca bordes en hover) A03, P07; P01 usado como cara: WARNING de dato
RS-08 Un solo 1.6:1 (A04 1400×880) sirve al tile héroe y al medio si el sujeto vive en x 25-75 % · y 12-62 %, focal (50 %, 40 %) [H] C-08 ∩ E-18 = L-10 (sin asset alterno) Overlay de las 12 ventanas (6 anchos × 2 tiles) PASS · WARNING sujeto en x 20-25 % o 75-80 % (se pierde solo a 360) · FAIL fuera A04, T03, T04
RS-09 El sujeto mide ≥48 px en su render más chico; en chips ≤40 px la imagen es decorativa: silueta ≥24 px y contraste ≥3:1 contra blanco [H] umbral = DS touch.target-min 44/48 Render más chico × fracción del sujeto (tabla de legibilidad) PASS ≥48 px · WARNING 36-47 · FAIL <36 (o chip con producto blanco/transparente) T01, T02, T05, T08, B02, B06, M03, P03
RS-10 Ratio fijo = sin recorte: entrega el asset al ratio exacto del slot (±0,5 %) y verifica el render mínimo, no la ventana [D] aspect-ratio en B05 3:1, B06 16:9, P03/P04 1:1, H03 1,586, S01 1,91:1 Ratio del archivo contra el del slot PASS exacto · FAIL distinto (el sistema deforma o contain deja bandas) A05, A06, A07, A11, A14
RS-11 El arte no dibuja su propio panel, scrim, viñeta ni «hueco para texto»: el texto lo pone el sistema donde el sistema dice [E] DS §7, C6, cap.27/28 (velo único) + [D] D-05 El archivo no contiene degradado plano ni rectángulo oscuro en la zona de copy FAIL si existe (velo del sistema sobre scrim propio = doble oscurecimiento) A01, A02, A04, A08, A12
RS-12 En tiles con hover scale(1.09) el sujeto no toca los bordes: ≤92 % del lienzo [D] home.css:246-248, catalogo.css:299-307; techo 92 % por L-09 (C pedía ≤85 %) Hover en 1440 y 1024; reduced-motion sin escala PASS · FAIL sujeto recortado en hover T01, T02, T03, T04, T05
RS-13 En recortes circulares (moneda 108/76, chip 40, avatar 64) el sujeto cabe en el círculo inscrito: 70 % central [D] border-radius:50% en .cb-art (home.css:410-474), .cr-thumb (catalogo.css:411-417), .qa-photo (pdp.css:668-670) Círculo guía al 100 % del lienzo; nada del sujeto fuera PASS · FAIL esquinas del producto cortadas B02, T08, M03 (A09)
RS-14 Toda imagen tiene alto reservado en los tres estados (CLS 0). [E] DS §7 + X-11 + D-10 Lighthouse CLS ≤0,03 a 390 y 1440 con caché fría PASS · FAIL salto de layout todos; V01 hoy sin reserva (hueco 15) → RS-23
RS-15 El primer pliegue móvil muestra el CTA del hero sin desplazamiento. [D] header 110 (tokens.css:109) + picado 18 (patrio.css) + A02 390×292 + panel ≈211 = 631 < 844; 110+18+270+≈200 = 598 < 640 Captura a 390×844 y 360×640 sin scroll PASS CTA completo · WARNING cortado <8 px · FAIL fuera H01, H02, H03
RS-16 Hero en tablet (768-1023): el sujeto vive en x 58-84 % · y 22-78 % del A01, focal (72 %, 50 %); título ≤2 líneas (≤60 caracteres); panel ≤204 px. [D] L-06 (panel 400 px = 52 %×81 % a 768; flecha derecha x 84-89 %). [H-C1] = ENM-02: panel como franja inferior de 72 px en 768-1023 (.hero-copy{left:0;right:0;bottom:0;max-width:none;display:flex;padding:12px 64px}) → libera x 32-84 % Captura a 768 y 1023 PASS sujeto fuera de panel y flechas · FAIL panel sobre el sujeto H01, H02
RS-17 La entrega es ≥2× del render máximo del estado desktop; si un estado sirve <2× se declara. [E] 11 §1.4 + D-01 Densidad por asset (A01 a 2560 = 1,1×; galería héroe 605 desde 1000² = 1,65×) PASS ≥2× a 1440 · WARNING 1,5-2× en 1920/2560 · FAIL <1,5× a 1440 A01-A14
RS-18 En <768 solo 1 badge sobre la foto de tarjeta; el segundo va al cuerpo. [H] L-25 (ENM-06 · DEV-15): a 153 px dos badges envuelven a dos filas = 62 px = 40 % de la foto Captura PLP a 390 con producto de 2 etiquetas PASS ≤1 fila sobre la foto · FAIL 2 filas P03
RS-19 La imagen OG lleva el sujeto en el cuadrado central (x 25-75 %) y dentro de y 10-90 %. [H] WhatsApp muestra un 1:1 del centro en la vista chica y 1,91:1 en la grande (DEV-09) Previsualizar en WhatsApp y Facebook Debugger PASS sujeto entero en ambas vistas · FAIL cortado S01 (A14)
RS-20 Ningún estado miente: sin arte no hay hueco gris. Mientras A02 no tenga campo, en <768 el hero colapsa a panel navy (DEV-06). Ruta alterna solo por excepción escrita: cover del A01 en caja 4:3 con object-position: 80% 50% (ventana = 33,3 % del ancho desde x = 0,667·p → x 53-87 %, contiene la subject box; válido p 77-87 %; con 72 % cortaría el borde derecho) [E] it.16 («el ph-slot queda MUDO») + [H-C2] arbitrado por L-08 (contradice DS §7 «nunca el desktop recortado»: no es default) Captura a 390 en producción FAIL rectángulo gris 390×292 (estado actual) H01, H02
RS-21 Escena = cover a sangre con focal declarado; packshot = contain sobre blanco; el sistema distingue por dato, no por adivinanza. Hasta el fix, una escena real es FAIL y no se publica en T03/T04: se usa render [D] home.css:188-189 + 22 D1 + [H-C3] = L-11 / DEV-08 (dtile--escena/mtile--escena-img con object-fit:cover; padding:0) landing_image 1.6:1 se ve a sangre con cintillo encima; 1:1 contenida FAIL escena contenida con blanco alrededor (hoy, hueco 8) T01 (cara landing_image), T03, T04
RS-22 Rostro ≥48 px y gafete ≥16 px de alto en el render más chico de toda foto humana. [H] ES-6 exige gafete visible; sin tamaño no es verificable B06 a 768 (195×110 → rostro ≥44 % del alto del lienzo); H04 móvil 358×300; M03 64 px PASS · FAIL rostro <36 px o gafete ilegible como forma A07, A08, A09, A10
RS-23 La banda de video reserva su alto en los tres estados y no cambia de alto al cargar el SDK. [H] hueco 15 (.hv-embed sin CSS) · L-18 · DEV-10 Medir en calidad2 el alto real del iframe a 1440/768/390 y fijar min-height por breakpoint (cifras: medir, no constan) FAIL si CLS >0 al llegar el iframe o al retirarse la banda a los 8 s V01
RS-24 La imagen es un solo foco y no porta ningún control propio. [E] D-09 + .tile-cover + alt="" en tiles y tarjetas Tab recorre 1 foco por tile; el ring (2 px primary-text, offset 2) rodea el tile, no la foto PASS · FAIL foco sobre la <img> o sobre un chip encima de la foto T01-T08, P03

Matriz de transformación por componente

ID Permanece Cambia Se mueve Desaparece Se recorta Asset alterno Focal Safe area
H01 hero de campaña arte 4:1 cover, panel navy 92 % + blur, kicker/h2/precio/CTA, dots alto 240→360; ventana lateral→vertical; panel del 52 % (768) al 16 % (2560) del ancho <768 el copy baja bajo la imagen; dots entran al bloque navy flechas <768; blur en móvil; vigencia (posición móvil: medir en calidad2) A01 lateral hasta 10 %/lado (768); vertical hasta 44 % (2560) sí: A02 4:3 obligatorio <768 (hoy sin campo) (72, 50) desktop/tablet → (50, 45) móvil A01: x 10-90 · y 22-78 (2304×405); sujeto x 58-84 · y 22-78. A02: x/y 10-90, sujeto 40-60 % del ancho, sin franja oscura en el 10 % inferior
H02 «600+ tiendas» = H01 (mismos estados, zonas y ventanas; hero.phtml:56-64) = H01 = H01 = H01 = H01 sí: A08 trae los dos crops (4:1 + 4:3); hoy slot mudo (hueco 1) rostro en la subject box rostro ≥48 px a 768 (≥144 px de lienzo), gafete ≥16 px (≥48 px); A02-b rostro ≥177 px de lienzo
H03 SterenCard tarjeta CSS/SVG 1,586 (onda 128 px al 35 %) 300×189 (1440) · 292×184 (768) · 300×189 en columna (390) nada nada nada (sin raster) no — solo RS-15 y que 300 < 328 a 360
H04 cabecera con retrato retrato A10 4:5 sobre navy, friso navy .92→0 (E-8) ancho 420 (max-height:520) → 300 → 358; rejilla 1fr 300px → apilado columna izquierda → apilado <768 nada solo <768: cover + object-position:50% 0 → se ve y 0-69 % (−31 % inferior) no (friso top-anchored resuelve) rostro; cabeza y hombros y 5-45 % gafete y 30-52 % (fuera del 31 % perdido y del caption y 56-69 %); nada relevante y >69 %; esquinas superiores 12 px libres
B02 banda de categoría navy + cifra + moneda blanca con packshot contain panel columna 300×≈535 (padding 20) → banda apilada W (736/358, padding 16); cifra 88→56; moneda 108→76; foto útil 84→52 carril debajo del panel <1024 flechas del carril <1024 nada (contain + círculo inscrito) no (P01 small_image del 1.er producto: dato) centro del packshot 70 % central del packshot: 59 px (≥1024) / 36 px (<1024); CTA x 20-150 y moneda x 176-284 no se cruzan (358: 16-140 / 266-342)
B03 banner de landing navy plano: kicker 12 + título 13/700 + cta 12 332×208 (≥1024) → 166×172 (tile 1×1 de 173/158) nada nada nada (sin media) no — título ≤3 líneas a 158 px (medir en calidad2)
B05 patrimonio 3:1 aspect-ratio 622×207 (≥1440) · 549×183 · 433×144 · 324×108 (768) · 358×119 · 328×109; columna → apilado <768 (orden imagen/texto: medir en calidad2) nada nada nada (ratio fijo; escala 2,9× a 1440) no; recorte dirigido «como forma» (T-9) elemento principal ≥40 % del alto x 3-97 · y 5-95 (radio 4); entregar opaco (el fallback «1956 → 2026» asoma tras un PNG transparente)
B06 Aprende tile 3 16:9, tile con sombra e1, cita debajo (sin texto encima) 413×232 (≥1440) · 360×203 · 275×155 · 195×110 (768) · 318×179 · 288×162; 3 → 1 columnas <768 nada nada nada (ratio fijo; 3,9×) no ([H-C4]: 2 columnas en 768-1023 → 320×180) rostro a la izquierda o centro x 5-95 · y 5-95; rostro ≥44 % del alto del lienzo (≥396 px de 900), gafete ≥131 px
T01 tile departamento héroe 2×2, cintillo 104, un solo enlace .tile-cover, viñeta navy 5 % caja 688×432 → 736×356 → 358×356; packshot 318 → 239 px; nombre 20 → 14 uppercase; padding 20/20/104 fijo nada chips <768 (home.css:254-261); hover en reduced-motion nada (contain); si la cara fuera escena cover, ventanas de T03 y el cintillo tapa el 24 % inferior no centro del packshot packshot al 85-90 % del A03 (L-09), ≥8 px sobre el cintillo
T02 tile departamento chico 1×1, cintillo 72 fila 208 → 172; área 310×122 → 336×86 / 147×86; packshot 127 → 89 px nada nada (no hay chips) nada no = T01 = T01; a 89 px el relleno decide: 60 % = 53 px PASS · 45 % = 40 WARNING · 35 % = 30 FAIL
T03 tile familia héroe (escena) 1.6:1, cintillo 104/92, chips caja 1,6:1 (1440) → 1,41 (1280) → 1,11 (1024) → 2,07 (768) → 1,006 (390) → 0,92 (360); uso 20 → 13-16 px nada nada en la foto (C §3.12: chips visibles a 390; el mosaico del home sí los oculta) hasta 25 %/lado (390/360) o 11 % arriba/abajo (768); velo de 92 px = 26 % de la ventana a 768 no (L-10) (50, 40) subject box x 25-75 · y 12-62 (L-10); y 68-100 % bajo velo o halo
T04 tile familia medio 1.6:1 en el 42 % izquierdo (.mt-media{flex:0 0 42%}), panel a la derecha sin velo media 289×206 → 255 → 202×206 → 309×170 → 150×170 → 137×170; ratio 1,40 → 0,98 → 1,82 → 0,81 nada (el panel sigue a la derecha en móvil; foto de 150 px a la izquierda) nada en la foto hasta 25 %/lado (390/360); 6 % arriba/abajo (768) no (L-10) (50, 40) = T03; packshot provisional contain: 182 (1440) → 146 (768) → 126 (390)
T05 tile familia 1×1 1×1 packshot contain cintillo 74 (≥1024) → cuerpo opaco <1024 (catalogo.css:258-266); foto 129 → ≈90 px (medir en calidad2) el texto baja bajo la foto <1024 el cintillo <1024 (lo decide el sistema, no el arte) nada no centro = T02 (relleno 85-90 %)
T08 miniaturas y chips moneda 40, <img width=38>, padding 4 → 30 px pintados; fila B/drawer 40-124 nada entre estados (solo el tamaño de la moneda por contexto) nada nada círculo inscrito (RS-13) no centro silueta ≥24 px (relleno ≥80 %) y contraste ≥3:1 contra blanco; producto blanco/transparente = FAIL de dato
P03 tarjeta de producto 1:1 contain (480²), badges .corner arriba-izquierda (10,10) 4 → 3 → 2 columnas: foto 233 (búsqueda 304) → 203 → 153 (138 a 360); lista 112/160; carrusel 220 → 156 («dos tarjetas + asomo») el 2.º badge a fila nueva <768 → RS-18: al cuerpo flechas de galería en táctil (solo hover a 1440, 28 px) nada no (P01 dato) centro sujeto x 10-90 · y 15-90 (badges y dots); badges 1 fila ≈24 px = 10 % de la foto; 2 filas = 62 px = 40-45 %
P04 galería PDP + zoom 1:1 contain; thumbs 64×64; zoom 175 % columna 912 → 805 → 592 → 736: héroe 605 → 534 → 392 → 488; tile 299 → 263 → 192 → 240; <768 carrusel snap 100 % = 358/328; foto única 560 contador a pastilla navy .82 abajo-derecha (x 82-97 · y 92-98 del tile) <768 velo «+N» navy .70 y hover-zoom en móvil nada no centro sin safe area propia (packshot sobre blanco); 6.º tile íntegro bajo el velo (decorativo); póster P05: centro 16 % (299) / 13 % (358) sin texto
P05 video de producto iframe 16:9 + póster real 1280×720 en tile 1:1 → bandas ≈22 % arriba/abajo (299-605); visor 16:9 hasta 960; móvil 358×201 centrado nada nada nada no centro (el play 48 lo tapa) póster: sujeto x 15-85 · y 15-85, sin texto; [H] aspect-ratio:16/9 en <768 (evita 22 % de negro en 358)
M03 avatar del asesor 64 px circular (pdp.css:668-670), A09 800×800 nada por estado (64 px en 1440 y 390) nada nada círculo inscrito (esquinas) no rostro centrado cabeza = 70-80 % del alto, hombros al borde inferior; rostro ≈48 px (PASS RS-22 justo)
V01 banda Terrific h2 con onda + panel del SDK (playlist 9:16) (probable) 6 → 4 → 2,2 miniaturas visibles: medir en calidad2 (alto del iframe y overlays a 1440/768/390) nada la banda a los 8 s sin iframe (home.js:116-122): el colapso no debe saltar medir en calidad2 no póster: (50, 40) póster 9:16: x 20-80 · y 15-65; 30 % inferior libre (título/precio del SDK); min-height por breakpoint pendiente (RS-23)
V02 reels «Así se usa» 9:16, póster 1080×1920 cover, play 48 al centro (y 44-56 %) 220×391 (≥768) → 156×277 (390); carril §0.3 nada nada (hoy apagado: sin miniaturas) nada (ratio fijo) no (50, 40) subject box x 10-90 · y 10-70; nombre en cintillo inferior y 75-100 % bajo velo
S01 imagen para compartir 1,91:1 (A14 1200×630) la vista: 1,91:1 (Facebook/LinkedIn) vs 1:1 del centro (WhatsApp chica) nada nada hoy el 1200² del PDP pierde y 23,7-76,3 % en 1,91:1; WhatsApp ve x 23,7-76,3 % sí: A14 derivada (DEV-09): packshot contenido ≤80 % del alto; categoría: A03 igual; campaña: ventana 1375×720 del A01 anclada a la derecha (x 52,3-100 %) centro cuadrado central x 25-75 · y 10-90; sin texto salvo logo SVG ≤8 % del alto abajo-derecha (E-4)

Ventanas de recorte calculadas

Hero (A01 2880×720 · A02 1440×1080). Caja clamp(240px, 28vw, 360px) full-bleed, cover center (home.css:39-41); panel :48-67; móvil :108-122.

Estado · ancho Caja px Ratio caja Ventana visible del A01 Pérdida Copy
Móvil 360 / 390 A02 360×270 / 390×292 4:3 A02 completo (A01 oculto, picture{display:none}); hoy sin campo: ph-slot gris 4:3 0 bloque navy estático bajo la imagen, padding 12 16 44, h2 16 px, dots dentro del bloque; sin flechas
Tablet 768 768×240 3,2:1 x 10-90 % · y 0-100 % 10 %/lado panel 400×≈194 a (64, 16) = 52 % del ancho, 81 % del alto; flechas 44 px visibles
Tablet 1023 (y 857-1285) 1023×286 3,57:1 x 5,4-94,6 % · y 0-100 % 5,4 %/lado panel 400×≈200 = 39 % × 70 %
Desktop 1280 1280×358 3,57:1 x 5,4-94,6 % 5,4 %/lado panel 400×≈204 = 31 % × 57 %
Desktop 1366 1366×360 3,79:1 x 2,6-97,4 % 2,6 %/lado idem
Desktop 1440 1440×360 4:1 100 % (nativo, escala 0,5) 0 panel 400×204 a (64, 16) = 28 % × 57 % (medido en cap28/t4-hero-panel.png)
Desktop 1536 1536×360 4,27:1 y 3,1-96,9 % 3 % arriba y abajo panel 21 % × 57 %
Desktop 1920 1920×360 5,33:1 y 12,5-87,5 % (75 % del alto) 12,5 % arriba y abajo panel 21 % × 57 %
Desktop 2560 2560×360 7,11:1 y 21,9-78,1 % (56 % del alto) 22 % arriba y abajo; escala 0,89 = 1,1× (RS-17 WARNING) panel 16 % × 57 %
Zona de UI (fracciones del A01) 768 1440 1920 2560 Unión ≥768
Panel de copy (≈204 px ⇔ título ≤2 líneas; a 3 líneas ≈230 px y la zona crece 7 puntos) x 16,7-58,3 · y 12,5-93,3 x 4,4-32,2 · y 38,9-95,6 x 3,3-24,2 · y 40,6-84,2 x 2,5-18,1 · y 42,9-75,6 x 2,5-58,3 · y 12,5-95,6
Flechas 44 px (top:50%, a 10 px del borde) izquierda x 0,4-15,6 · derecha x 84,4-99,6 · y 41-59 (todos los anchos ≥768)
Dots (cápsula centrada abajo) x 43-57 (3 láminas; x 39-61 con 4) · y 71,5-100
Vigencia (abajo-derecha) ≈ x 72-99 · y 89-96 (offset exacto: medir en calidad2; home.css:88-89 no da px)
Subject box (RS-03/RS-16) x 58,3-84,4 · y 21,9-78,1 = 751×405 px del lienzo (375×202 en pantalla a 1440; 250×135 a 768) · focal (72 %, 50 %) · con ENM-02 crece a x 32,2-84,4
Safe (L-07) vertical y 21,9-78,1 = 405 px (sobrevive 2560) · horizontal x 10-90 = 2304 px (sobrevive 768); 2520×405 vale desde 834 px
Asset 2880×720 — lo que se ve según el ancho de pantalla (cover; anclaje por ventana) 1 1 · 768 (viewport 768×240) ve 2304×720 px del asset → recorte lateral 20% 2 2 · 1024 (viewport 1024×287) ve 2569×720 px del asset → recorte lateral 11% 3 3 · 1440 (viewport 1440×360) ve 2880×720 px del asset → sin recorte 4 4 · 1920 (viewport 1920×360) ve 2880×540 px del asset → recorte vertical 25% 5 5 · 2560 (viewport 2560×360) ve 2880×405 px del asset → recorte vertical 44%

Escena (A04 1400×880) en T03 — media = tile − borde, cover propuesto (RS-21), cintillo 104/92:

Estado Media Ratio Ventana del A04 Bajo el velo (≥92 %) / halo Copy
1440/1920 686×430 1,595 ≈100 % (nativo) y 87-100 % / y 76-87 % cintillo 104: uso 20 px, familia 12, chips
1280 606×430 1,41 x 5,9-94,1 % idem idem
1024 478×430 1,11 x 15,3-84,7 % idem idem
768 734×354 2,07 y 11,4-88,6 % y 77,8-88,6 % / 68,5-77,8 % (velo de 92 px = 26 % de la ventana de 77 %) cintillo 92: uso 13-16 px, chips visibles
390 356×354 1,006 x 18,6-81,4 % idem cintillo 92 (el héroe lo conserva); chips visibles
360 326×354 0,92 x 21,2-78,8 % idem idem

Escena en T04 — .mt-media{flex:0 0 42%}, sin velo:

Estado Media (42 % × alto) Ratio Ventana del A04 Copy
1440/1920 289×206 1,40 x 6,1-93,9 % panel derecho 58 %: uso 16 px, familia, chips
1280 255×206 1,24 x 11,3-88,7 % idem
1024 202×206 0,98 x 19,4-80,6 % idem
768 309×170 1,82 y 6-94 % panel derecho
390 150×170 0,88 x 22,4-77,6 % panel derecho (uso 13 px)
360 137×170 0,81 x 24,8-75,2 % idem

Intersección de las 12 ventanas = x 24,8-75,2 % · y 11,4-88,6 %; menos el velo del héroe (y ≥68,5 % en algún estado) y la caja de E-18 → subject box x 25-75 % · y 12-62 % (L-10), focal (50 %, 40 %). Lo que queda fuera es contexto que solo se ve a 1440. Un «producto abajo a la derecha» (hábito de producción) se pierde a 1024 y en móvil: FAIL RS-08. Con packshot provisional (render, contain): héroe 302 px (≥1024) / 246 (<1024); medio 182 (1440) · 178 (1024) · 146 (768) · 126 (390).

Asset 1400×880 — lo que se ve según el ancho de pantalla (cover; anclaje por ventana) 1 1 · T03 1440 (viewport 688×432) ve 1400×879 px del asset → sin recorte 2 2 · T03 768 (viewport 736×356) ve 1400×677 px del asset → recorte vertical 23% 3 3 · T03 390 (viewport 358×356) ve 885×880 px del asset → recorte lateral 37% 4 4 · T04 1440 (viewport 289×208) ve 1223×880 px del asset → recorte lateral 13% 5 5 · T04 390 (viewport 150×172) ve 767×880 px del asset → recorte lateral 45%

OG (S01). Hoy el PDP manda el packshot 1200×1200 (og.phtml:26-28); categoría, home y CMS no tienen og:image.

Vista Recorte de la plataforma Qué se ve del 1200² actual Regla con A14 1200×630 (RS-19)
Facebook / LinkedIn (grande) 1,91:1 al centro y 23,7-76,3 % (el producto pierde arriba y abajo si llena >52 % del alto) packshot contenido ≤80 % del alto (504 px), centrado; categoría: A03 contenida igual
WhatsApp (chica) 1:1 del centro de un 1,91:1 x 23,7-76,3 % sujeto en el cuadrado central x 25-75 % · y 10-90 %
Campaña idem el A01 entero no sirve: 4:1 dentro de 1,91:1 pierde el 52 % del ancho ventana 1,91:1 de 1375×720 px del A01 anclada a la derecha (x 52,3-100 %): contiene la subject box 58-84 % y deja fuera el tercio de copy

Sin texto; única excepción el logotipo SVG ≤8 % del alto abajo-derecha (E-4, L-15).

Tiras desktop → tablet → móvil

Las tiras de H01 y T01-T04 viven en sus fichas: ver ficha H01 §10 (tira 1440/768/390 + planos A01/A02 en §5 y ventanas en §9), ficha T01 §10 (mosaico del home; T02 hereda su geometría a 122 → 86 px, tabla en T02 §10) y ficha T03 §10 (escena de la landing; T04 §9-10 y T05 §10 con sus tablas). Aquí van las seis restantes.

B02 · Banda de categoría — el texto nunca toca la foto; la moneda es contain + círculo inscrito.

Desktop 1440 · panel 300×535 cifra 88 · título 20 · pie 13 CTA 44 moneda 108 safe 59 300×535 • carril 220 a la derecha del panel • el texto nunca toca la foto • foto útil 84 · sujeto 70 % = 59 px Tablet 768 · panel apilado 736×215 sobre el carril cifra 56 · título 18 CTA 44 moneda 76 36 736×215 • carril 220 debajo del panel • flechas del carril desaparecen <1024 • foto útil 52 px: silueta, no detalle Móvil 390 · panel 358×215 + carril 156 cifra 56 · título 18 CTA 44 moneda 76 36 358×215 • carril 156 debajo: dos tarjetas + asomo • CTA x 16-140 · moneda x 266-342 • 52 px: WARNING de dato si relleno <60 %

P03 · Tarjeta de producto — la foto es dato (contain); lo que cambia es la zona de badges.

Desktop 1440 · foto 233 (4 col) safe x 10-90 · y 15-90 packshot badges 1 fila 24 px = 10 % dots ← → 233×233 • 2 badges ≈150 px en una fila • flechas 28 px solo en hover • dots 6 px al pie ≈6 % Tablet 768 · foto 203 (3 col) safe packshot badges 1 fila dots 203×203 • 2 badges caben en 183 px • sin flechas en táctil Móvil 390 · foto 153 (2 col; 138 a 360) safe packshot 2 filas = 62 px = 40 % dots 153×153 • 2 badges = 2 filas: 40 % de foto tapado • RS-18 (L-25): 1 badge; el 2.º al cuerpo • carrusel 220 → 156

P04 · Galería del PDP — collage → carrusel; el packshot sobre blanco no necesita safe area, el póster de video sí.

Desktop 1440 · collage 912 (héroe 605 + 5 tiles 299) héroe 605 (1,65× desde 1000²) 299 · P05 póster safe 15-85 play 299 299 299 6.º: velo «+N» navy .70 912×912 • packshot sobre blanco: sin safe area propia • 6.º tile íntegro bajo el velo (decorativo) • play 48 = 16 % del tile de 299: centro del póster sin texto Tablet 768 · collage 736 (héroe 488 + 240) héroe 488 240 240 240 240 6.º: velo «+N» 736×736 • misma rejilla, tiles 240 • foto única 560 Móvil 390 · carrusel snap 358 slide 100 % = 358 póster safe x/y 15-85 play 48 = 13 % contador 358×358 • carrusel: sin velo ni zoom • contador x 82-97 · y 92-98 • swipe ≥40 px · 328 a 360

H04 · Cabecera de servicio con retrato — un solo A10 4:5; en móvil cover anclado arriba con friso.

Desktop ≥1024 · 420×508 (A10 al 100 %) cabeza y hombros y 5-45 gafete y 30-52 friso navy .92→0 ≈56 px (medir) 420×508 • retrato 4:5 entero, columna izquierda • friso = velo navy 92→0 sin blur (E-8) • nada relevante en y >69 % Tablet 768 · 300×363 (100 %) cabeza y hombros gafete friso ≈56 (medir) 300×363 • rejilla 1fr 300px • rostro ≥192 px de lienzo (escala 0,25) Móvil 390 · 358×300 cover top (A10 y 0-69 %) cabeza y hombros (y 5-45 del A10) gafete (y 30-52 del A10) caption sobre y 56-69 del A10 358×300 • object-position 50% 0: se pierde el 31 % inferior • cantos superiores 12 px: nada en las esquinas • asset alterno: no hace falta (friso top-anchored)

B06 · Aprende con Steren, tile 3 — ratio fijo 16:9: nada se recorta, todo se encoge; el rostro manda.

Desktop 1440 · 413×232 (3 col) safe x/y 5-95 rostro ≥44 % del alto gafete ≥131 px de lienzo 413×232 • sin recorte: ratio fijo (A07 1600×900, 3,9×) • sin texto encima: la cita va debajo • mostrador real como contexto (ES-6) Tablet 768 · 195×110 safe rostro 48 gafete 16 195×110 • 3 col de 234 − padding 40 • rostro ≥48 px ⇒ ≥44 % del alto • [H-C4] 2 col → rostro ≥27 % Móvil 390 · 318×179 (1 col) safe rostro gafete 318×179 • 3 → 1 columnas <768 • 288×162 a 360

V02 · Reels «Así se usa» — 9:16 de ratio fijo (hoy apagado); geometría [H] para cuando haya miniaturas reales.

Desktop ≥1024 · 220×391 (9:16) subject box x 10-90 · y 10-70 producto en uso play 48 cintillo · nombre del producto 220×391 • póster 1080×1920 cover • carril §0.3 reutilizado • cintillo y 75-100 bajo velo Tablet 768 · 220×391 (igual) subject box producto play 48 cintillo 220×391 • mismo tamaño que desktop • ratio fijo: sin recorte Móvil 390 · 156×277 subject box producto play 48 cintillo 156×277 • play 48 = 31 % del ancho • dos tarjetas + asomo • hoy apagado: sin reels

Tabla de legibilidad: render más chico y relleno mínimo del sujeto

Umbral RS-09/RS-22: sujeto ≥48 px (rostro ≥48, gafete ≥16). La columna «relleno» es el mínimo aritmético para llegar a 48 px; la regla vigente para A03 es L-09: 85-90 % del lienzo (PASS 86-92 · WARNING 80-86 · FAIL <80 o >92), que cubre de sobra el mínimo.

Componente Render más chico (px) Estado Relleno del sujeto para ≥48 px Regla
T01 héroe home 239 768/390 ≥20 % (cualquier packshot pasa) RS-07 por hover, no por legibilidad
T02 chico home 89 768/390/360 ≥54 % → A03 al 85-90 % (L-09) RS-07
T05 1×1 landing ≈90 (medir en calidad2) <1024 ≥54 % → 85-90 % (L-09) RS-07
T04 medio (packshot provisional) 126 390 ≥38 % —
T08 chip 30 todos silueta ≥24 px → ≥80 % (decorativo) RS-09 b
B02 moneda 52 <1024 ≥92 % — imposible con aire → decorativo, silueta ≥31 px con relleno 60 % WARNING de dato
B06 foto mostrador 195×110 768 rostro ≥44 % del alto RS-22 / [H-C4]
B05 scan 324×108 768 elemento principal ≥40 % del alto matriz B05
H01 A01 subject box 250×135 en pantalla 768 producto ≥48 px ⇒ ≥36 % de la subject box RS-03
H02/H04 rostro 250×135 / 300×363 768 / 768 rostro ≥144 px de lienzo A01 (escala 0,333); ≥192 px de lienzo A10 (render 300 = escala 0,25; a 390 son 161 px, a 1440 137 px) RS-22
M03 avatar 64 todos cabeza 70-80 % RS-22
P03 tarjeta 138 360 ≥35 % (fotos 25 §6 pasan) verificación
Densidad (RS-17) A01 a 2560 = 1,1× · galería héroe 1440 = 1,65× · A04 a 686 = 2,04× · A03 a 318 = 2,5× · A11 a 622 = 2,9× · A07 a 413 = 3,9× — — WARNING los dos primeros

Cuándo un solo asset NO basta

  • H01 / H02 exigen A01 + A02 (E-02, RS-06): el 4:1 no sirve a <768 — picture{display:none}, y encogido a 390 el sujeto mediría 40 px. A02 = el mismo concepto re-encuadrado (D-03), sujeto centrado en x/y 10-90 %, 40-60 % del ancho, focal (50 %, 45 %); A08 (H02) entrega los dos crops. Hoy no hay campo para A02: DEV-07.
  • A04 único para T03 + T04 (L-10): subject box x 25-75 % · y 12-62 %, focal (50 %, 40 %). No se pide asset alterno (serían 52 archivos más); lo que vive fuera de la caja es contexto que solo se ve a 1440.
  • A03 único para T01/T02/T05/T08 al 85-90 % (L-09): de 318 a 30 px con el mismo archivo; a 30 px solo sobrevive la silueta (RS-09 b); un producto blanco o transparente en chip es FAIL de dato, no de arte.
  • A10 único para H04 con friso top-anchored: desktop y tablet lo muestran entero; móvil cover + object-position:50% 0 pierde el 31 % inferior — por eso el gafete vive en y 30-52 % y nada relevante en y >69 %.
  • A11 3:1 como recorte dirigido: un catálogo impreso es 3:4 o 3:2, nunca 3:1 (T-9); el scan se compone «como forma» (portada o fila de productos, elemento principal ≥40 % del alto), entregado opaco y al ratio exacto (RS-10).
  • A07 16:9 único para B06: ratio fijo, sin recorte; el precio es el rostro ≥44 % del alto para sobrevivir 195×110 (o [H-C4]: 2 columnas en tablet).
  • OG derivada 1,91:1 (A14, DEV-09) con el sujeto en el cuadrado central: el 1200² de hoy pierde el 24 % arriba y abajo; producto y categoría = packshot contenido ≤80 % del alto; campaña = ventana 1375×720 del A01 anclada a la derecha (x 52,3-100 %); logo SVG ≤8 % como única excepción (E-4).
  • Excepción escrita del hero móvil (L-08): el default mientras A02 no tenga campo es colapsar el slot a panel navy (DEV-06). La ruta «cover del A01 en caja 4:3 con object-position: 80% 50%» (ventana x 53-87 %, contiene la subject box; válido p 77-87 %) solo se usa con excepción escrita en el ticket, porque contradice DS §7 «nunca el desktop recortado».
  • V01 no se decide hasta medir (L-18): alto del iframe, miniaturas visibles y overlays del SDK a 1440/768/390 en calidad2; mientras, el póster 9:16 respeta x 20-80 % · y 15-65 % y deja libre el 30 % inferior.

Checklist responsive

# Ítem PASS WARNING FAIL
Q-RS-01 Crop del hero probado a 768 · 1024 · 1440 · 1920 · 2560 (overlay o captura) 5/5 falta 2560 falta otro
Q-RS-02 Móvil probado a 390 y 360 con A02 cargado ambos, A02 real falta 360 A02 ausente o desktop encogido/recortado
Q-RS-03 Focal point y subject box declarados en la ficha del asset (fracciones) sí solo focal ninguno
Q-RS-04 Sujeto dentro de la subject box en los tres estados (H01: x 58-84 %, y 22-78 %; A04: x 25-75 %, y 12-62 %) 3/3 roza ≤2 % en un estado fuera
Q-RS-05 Nada relevante bajo el panel de copy (unión x 2,5-58 %, y 12-96 %) limpio detalle secundario producto/rostro
Q-RS-06 Nada relevante bajo flechas (x <16 % y >84 %, y 41-59 %), dots (x 43-57 %, y >71 %), vigencia limpio contexto sujeto
Q-RS-07 Copy del hero ≤2 líneas a 22 px (panel ≤204 px) ≤2 3 líneas >3
Q-RS-08 CTA del hero visible sin scroll a 390×844 y 360×640 sí cortado <8 px fuera
Q-RS-09 A02 4:3: sujeto centrado en x 10-90 %, y 10-90 %, 40-60 % del ancho sí 30-40 % o 60-70 % fuera
Q-RS-10 A02 no lleva franja oscura en el 10 % inferior (se funde con el bloque navy) sí leve sí
Q-RS-11 El arte no trae scrim, panel ni texto propio limpio viñeta leve scrim/texto
Q-RS-12 Packshot A03: relleno del sujeto 85-90 % (L-09) 86-92 % 80-86 % <80 % o >92 %
Q-RS-13 Sujeto ≥48 px en el render más chico (T02/T05 89-90 px; B02 52; B06 110 de alto) ≥48 36-47 <36
Q-RS-14 Chip 30 px: silueta ≥24 px y contraste ≥3:1 contra blanco sí silueta 18-24 producto blanco/transparente
Q-RS-15 Hover 1,09 no recorta el sujeto (tiles) sí — recorta
Q-RS-16 Escena A04 renderiza cover a sangre (no contenida con blanco); hasta DEV-08 la escena real no se publica (L-11) sí — contenida (hueco 8)
Q-RS-17 Recortes circulares: sujeto en el 70 % central sí esquina de sombra fuera producto cortado
Q-RS-18 Ratio de entrega exacto en slots de ratio fijo (3:1, 16:9, 1:1, 1,91:1) ±0,5 % exacto — distinto
Q-RS-19 Entrega ≥2× del render máximo a 1440 ≥2× 1,5-2× (o 2560/1920) <1,5×
Q-RS-20 CLS 0 en 390 y 1440 con el asset real (incluida la retirada de V01 a los 8 s) ≤0,03 0,03-0,05 >0,05
Q-RS-21 Badges sobre foto en <768: 1 fila (L-25) 1 fila — 2 filas
Q-RS-22 Rostro ≥48 px y gafete ≥16 px en el render más chico (H02 768, H04 390, B06 768, M03 64) sí rostro 36-47 menor o gafete fuera del crop
Q-RS-23 H04 móvil: gafete en y 30-52 % (fuera del 31 % perdido y del caption) sí roza el caption bajo el caption o perdido
Q-RS-24 OG: sujeto entero en la vista 1,91:1 y en la 1:1 (WhatsApp) ambas solo 1,91 cortado
Q-RS-25 Ningún estado pinta hueco gris sin arte (hero móvil hoy; L-08: colapso o excepción escrita) sin hueco — hueco visible en producción
Q-RS-26 Terrific: alto reservado por breakpoint medido en calidad2 (1440/768/390) medido y fijado medido, no fijado sin medir

07Especificaciones técnicas de assets

Tesis. El cliente entrega fuente en alta a 2× del render máximo y con el ratio exacto del slot (11 §1.4, D-01). Lo que pesa el archivo que baja el cliente HOY lo decide quien sube: no hay pipeline — el hero, las categorías y ocho emisores de producto sirven el archivo tal cual entró (manual §5, E-22, inventario §3). OBJETIVO: el pipeline en el borde produce tallas y formato (AVIF/WebP por Accept) y el máster en origen sigue siendo JPEG/PNG (H-08). Por eso toda spec lleva dos columnas HOY / OBJETIVO (X-5) y ningún techo AVIF se exige sin pipeline. Entre el máster y el navegador hay un solo paso que hoy no existe: la versión web (H-20) — la produce diseño con la receta de este capítulo y la verifica QA; el dueño definitivo lo nombra el cap.11.

Convención de cifras (heredada de H): [medido] con el comando indicado · [estimado] a partir de una medición · [fuente] citada. Lo que no consta: «medir en calidad2».

Tabla maestra A01-A15

Reglas comunes a toda la tabla (H §3.1): color sRGB IEC61966-2.1, 8 bits (perfil ICC sRGB opcional ≤1 KB; jamás Adobe RGB / ProPhoto / CMYK / 16 bits) · chroma 4:2:0 en JPG/WebP/AVIF (4:4:4 = +30 % sin ganancia visible en foto [medido]; el texto rasterizado que lo necesitaría está prohibido, E-01) · JPG progresivo (interlace=JPEG; en <10 KB da igual: −5 % [medido]) · sin metadatos (-auto-orient antes de -strip; se tolera solo copyright) · transparencia solo en A15 (SVG) y en PNG con alpha real; nunca PNG para fotografía · GIF prohibido (animación = video, L-17) · «render» = píxeles pintados de la imagen (dentro de contain y su padding), no la caja.

Tabla A — geometría, entrega, nombre (render por viewport 390 / 768 / 1024 / 1440 / 1920; nombre según L-30)

ID Asset Ratio Entrega (máster, 2×) Render máx pintado Alimenta Nombre de archivo (L-30)
A01 Arte de campaña desktop 4:1 2880×720 (2× de 1440; a 1920 DPR2 sirve 1,5×: decisión de presupuesto, H T-10) oculto / 768×240 (cover −10 % por lado) / 1024×287 (−5 %) / 1440×360 / 1920×360 (−25 % del alto) H01 2026-11_buen-fin_hero_desktop.jpg
A02 Arte de campaña móvil (re-encuadre) 4:3 1440×1080 (1,9× a 767; 3,7× a 390) 390×293 … 767×575 (100vw <768) / — H01 2026-11_buen-fin_hero_movil.jpg
A03 Imagen de categoría 1:1 800×800 (2,5× del máx 318) [E manual §5]; hoy 129/131 a 400² = 0,63× en DPR2 (FAIL) tile héroe 239 / 239 / 318 / 318 / 318 · sm home 90 / 90 / 127 · sm landing 160 / 160 / 129 · lista densa 124 · chip 38 (contain ×1,04) T01 T02 T05 T08, mega-menú cat_smart-home_1x1.jpg
A04 Escena de landing 1.6:1 1400×880 (2× del héroe a sangre 688×432) caja héroe 358×356 (1:1) / 736×356 / 480×432 / 688×432 / 688×432 · caja med 150×172 / 309×172 / 202×208 / 289×208 · con el CSS actual (contain + padding 104) se pinta a 486×304 en 1440 → L-11: cover + focal (DEV-08) T03 T04 esc_smart-home-hero_16x10.jpg · esc_smart-home-med_16x10.jpg
A05 Packshot _x1 1:1 1200×1200 máster [E intocable]; tallas por pipeline tarjeta PLP 153 / 203 / 189 / 233 / 233 (búsqueda 304) · carrusel 138 / 194 · galería tile 358 / 240 / 192 / 299 · héroe collage — / 488 / 392 / 605 · zoom ≈1 400 · miniaturas 40-76 P01 P03 P04 B02 S01 S02 intv-900_x1.jpg (sku_x1, [E])
A06 Tomas _x2.._x5 1:1 1200×1200 = A05 (galería / visor) P02 P04 intv-900_x2.jpg … _x5.jpg [E]
A07 Humano a — mostrador 16:9 (L-13) máster 1600×900; servido HOY 840×473 (2× de 413) 318×179 / 195×110 / 275×155 / 413×232 / 413×232 M02 (B06) humano_mostrador-<tienda>_16x9.jpg
A08 Humano b — tiendas (hero) 4:1 + 4:3 2880×720 + 1440×1080 = A01 + A02 H02 humano_tiendas_4x1.jpg · humano_tiendas_4x3.jpg
A09 Humano c — asesor 1:1 máster 800×800; servido 192×192 (3× de 64) 64 (círculo) M03 humano_asesor-<nombre>_1x1.jpg
A10 Retrato de servicio 4:5 máster 1200×1500; servido 840×1050 (hoy tecnico.webp 518×626 = 1,23×: sub-resolución) 358×300 (cover, friso) / 300×363 / 420×508 / 420×508 / 420×508 M04 (H04) retrato_rodrigo-hernandez_4x5.jpg (.webp si vive como estático del tema)
A11 Archivo — catálogo impreso 3:1 máster 1800×600 [E]; servido 1250×417 358×119 / 324×108 / 433×144 / 549×183 / 622×207 M01 (B05) archivo_catalogo-1971_3x1.jpg
A12 Póster de video 16:9 · 9:16 1280×720 (P05, con el cron oEmbed) · 1080×1920 (V02) · 1782×1002 (V03) tile de galería (= A05) · visor ≤960 · reel 156×277 / 220×391 · V03 358×201 / 736×414 / 891×501 (F-51) P05 V02 V03 intv-900_video-poster_16x9.jpg · _9x16.jpg
A13 Playlist Terrific 9:16 fuera del sitio (panel de Terrific): 1080×1920 (F-09) lo fija el SDK — medir en calidad2 (L-18) V01 —
A14 Imagen OG 1.91:1 1200×630 (derivada, E-28) no se pinta en el sitio (0 bytes); legible a 400×209 S01 og_producto_intv-900_1200x630.jpg · og_cat_smart-home_1200x630.jpg · 2026-11_buen-fin_og_1200x630.jpg
A15 Logo, onda, favicon — SVG maestro [E 11 §2 A7] header 127×34 / 105×28 · footer 98×26 · favicon 16-32, touch 180, manifest 192/512 chrome, D01, H03, S03 marca_logo.svg · marca_onda.svg · marca_favicon.svg

Tabla B — formato y peso: HOY (lo que el pipeline permite) / OBJETIVO (AVIF + srcset, deuda de desarrollo)

ID HOY: formato servido HOY: peso objetivo / máx (KB) Base HOY OBJETIVO: formato · tallas srcset OBJETIVO: gate / contrato (DS §7) Color Chroma Metadatos Alpha
A01 JPG prog. q65-75, 2880×720 ≤150 / ≤200 (contrato LCP); si no cabe → 2400×600 (AS-04) q70 = 176-321; arte limpio 176-197; 2400×600 q70 = 122-223 [estimado B/px] AVIF q50-65 (WebP/JPG por Accept) · 1440w · 2160w · 2880w ≤150 gate / ≤200 contrato (warning documentado) — AVIF q55 = 60-189 [estimado] sRGB 8 b 4:2:0 strip no
A02 JPG prog. q60-70, 1440×1080 ≤150 / ≤200; si no cabe → 1200×900 q65 = 124-205; limpio 132-148 a q70 [estimado] AVIF · 780w · 1170w · 1440w ≤150 / ≤200 — AVIF q55 ≈121 el cargado [estimado] sRGB 8 b 4:2:0 strip no
A03 JPG prog. q80, 800×800 (un archivo para 38-318 px) ≤60 / ≤100 (el manual dice 200: T-1) 800² sobre blanco = 22,9-88,2 [medido] AVIF · 80w · 160w · 320w · 640w (800 = máster, no se sirve) chip ≤2 · sm ≤6 · héroe ≤15 (tile ≤120 = contrato) — 640² AVIF 3,6-20 [medido] sRGB 8 b 4:2:0 strip no
A04 JPG prog. q70-78, 1400×880 ≤120 / ≤150 (manual 250: T-1) q70 = 105-191 [estimado] AVIF · 700w · 1050w · 1400w ≤120 tile — AVIF q55 = 36-112 [estimado] sRGB 8 b 4:2:0 strip no
A05 / A06 máster Q92 no se toca; servido = caché Magento JPEG q80: 160² · 480² · 1000² · 1600² · 1200² (og) thumb ≤40 (p90 real 27 ✓) · PDP ≤80 (p90 real 76 ✓; máx 1 162 → WARNING por producto) · zoom ≤180 · mini ≤5 caché medida: 480² p50 13 / p90 27 · 1000² p50 37 / p90 76 [medido] AVIF · mini 80/120/160w · tarjeta 240/320/480w · galería 600/900/1200w · zoom 1600 · tira 160 thumb ≤25 · PDP ≤80 · zoom ≤180 — 480² AVIF 2,9-8,7 · 1200² 5,3-25,3 [medido] sRGB 8 b (ICC 456 B en el máster ✓) 4:2:0 strip no (17 PNG de 7 790: revisar)
A07 JPG q78, 840×473 ≤60 / ≤80 (ES-6 ≤120 = contrato) 0,4 Mpx × 0,10-0,18 = 40-72 [estimado] AVIF · 420w · 840w ≤40 / ≤120 — 12-36 [estimado] sRGB 8 b 4:2:0 strip no
A08 = A01 / A02 = A01 / A02 — = A01 / A02 = A01 / A02 sRGB 8 b 4:2:0 strip no
A09 JPG q80, 192² (PNG solo si recorte con alpha) ≤10 / ≤20 (ES-7 ≤80 = contrato) 240² JPG 4,7-8,4 [medido] AVIF · 128w · 192w ≤3 / ≤80 — 1,5-3,8 [medido a 240] sRGB 8 b 4:2:0 strip solo recorte
A10 WebP q80, 840×1050 (estático del tema: WebP sí funciona ahí) ≤70 / ≤120 tecnico.webp 0,076 B/px → 840×1050 ≈67 [estimado sobre medido] AVIF · 420w · 840w ≤40 / ≤120 sRGB 8 b 4:2:0 strip no
A11 JPG q75, 1250×417 ≤60 / ≤80 (manual 250: T-1) 0,52 Mpx × 0,092-0,168 = 48-88 [estimado] AVIF · 640w · 1250w ≤40 / ≤120 (ES-9 / PF-2) — 15-47 [estimado] sRGB 8 b 4:2:0 strip no
A12 JPG q75, 1280×720 (póster) · 1080×1920 (reel) · 1782×1002 (V03) P05 ≤80 / ≤120 (tile) · V02 ≤120 · V03 ≤150 (clase hero) (F-52) 0,92 Mpx × 0,092-0,168 = 85-155 → q70 y arte limpio para ≤80 [estimado] AVIF · 640w · 1280w ≤60 / ≤120 — 27-84 [estimado] sRGB 8 b 4:2:0 strip no
A13 SDK 10,6 KB gz defer + iframe + pósters/mp4 (medir en prod) terceros ≤100 / ≤150 (PF-1) SDK [medido]; resto pendiente — igual — — — —
A14 JPG siempre, q80, 1200×630 ≤100 / ≤200 [H] packshot sobre blanco 0,03-0,06 B/px → 23-45; arte 78-142 [estimado] JPG (excepción H-08: los rastreadores de mensajería no garantizan AVIF/WebP) · una sola talla igual sRGB 8 b 4:2:0 strip no
A15 PNG 4,3 KB (hoy, logo.png 300×80) — [medido] SVG inline logo ≤3 KB gz · favicon SVG ≤2 KB + ICO 32 ≤5 KB — — sin metadatos de editor sí (SVG)

El arte fotográfico no cabe «gratis» a 2× (H §1.1, §3.1). Bytes por píxel medidos sobre el proxy de producción (sliders 1920×500 recortados a 4:1; el arte con texto quemado, comprime peor que uno limpio): JPG q70 0,085-0,155 · q75 0,092-0,168 · q80 0,103-0,188. A 2880×720 (2,07 Mpx) eso son 176-321 KB a q70 y 213-390 KB a q80 [estimado]: el contrato de 200 KB para la imagen LCP solo se cumple HOY con arte limpio a q65-75 o bajando resolución. De ahí la regla H-10 (AS-04): si no cabe a 2× se baja resolución (mínimo 1,5×), nunca la calidad por debajo de q60. Escalera del hero: 2880×720 → 2400×600 (1,67×) → 2160×540 (1,5×); móvil 1440×1080 → 1200×900. Con AVIF (OBJETIVO) el mismo arte pesa 60-189 KB a q55 [estimado]: el gate de 150 tampoco lo cumple el arte más cargado — «arte cargado» = «arte que no cabe» mientras no exista pipeline (H T-2).

Tensión T-1 (H) → enmienda al manual, no al DS. El manual v1.0 §5 fija techos (hero 300 KB; móvil, escena y archivo 250; categoría y mostrador 200; producto 150) por encima del contrato (LCP ≤200 / gate 150; tile ≤120; thumb ≤40). Esta guía aplica los de la tabla B; el manual es documento del cliente y se corrige por su canal (propuesta H: hero ≤200 · móvil ≤200 · escena ≤150 · categoría ≤100 · archivo ≤80 · mostrador ≤80 · producto no se sube: pipeline).

Reglas AS-01 … AS-13

ID Regla Marca · fuente Verificación PASS · WARNING · FAIL Aplica
AS-01 Entrega cada raster a 2× de su render máximo y con el ratio exacto del slot (tabla A); el sistema nunca estira. [E] 11 §1.4 · manual §5 · [D] D-01 identify -format "%wx%h" = entrega de la tabla A (o escalera AS-04); ratio exacto ±1 px; naturalWidth ≥ render máx × 2 PASS exactas · WARNING ≥1,5× con ratio exacto · FAIL ratio distinto, <1,5× o upscale (A03 a 400² = 0,63× en DPR2) A01-A12, A14
AS-02 Formato HOY: JPG progresivo q65-80, 4:2:0, sRGB 8 bits, sin EXIF/XMP; PNG solo con transparencia real; GIF nunca. Se sube la versión web, no el máster. [E] manual §5 (solo JPG/PNG/GIF) · [H] receta H-07 identify -format (recetas) → JPEG Q≤80 sRGB depth=8 interlace=JPEG sub=2x2,1x1,1x1; exiftool vacío PASS todo · WARNING Q 81-85, baseline, PNG-8 en plano · FAIL PNG de foto, 4:4:4 en foto, Q>85, CMYK/Adobe RGB/16 bits, EXIF con GPS, GIF A01-A04, A07-A12, A14
AS-03 Respeta los techos de peso de la tabla B en su columna: HOY (JPG/PNG) u OBJETIVO (AVIF) según exista pipeline. [E] DS §7/§12 · PF-1 · [H] columna HOY (H-09) stat -c %s archivo o %b de identify; en CI, gate sobre el archivo subido PASS ≤ objetivo · WARNING ≤ máximo (LCP 150-200 solo con nota de campaña, DS §7) · FAIL > máximo → no se publica A01-A15
AS-04 Si el arte no cabe en su techo a 2×, reduce la resolución (mínimo 1,5×), nunca la calidad por debajo de q60. Escalera: 2880×720 → 2400×600 → 2160×540; móvil 1440×1080 → 1200×900. [H] H-10; base: B/px medidos (H §1.1) identify: dimensiones ∈ escalera, peso ≤ techo, Q ≥60 PASS 2× dentro del techo · WARNING 1,5-2× · FAIL <1,5× o Q<60 A01 A02 A04 A08 A11
AS-05 Color sRGB IEC61966-2.1, 8 bits; perfil sRGB incrustado opcional (≤1 KB) o ninguno; jamás Adobe RGB / ProPhoto / CMYK / 16 bits. Sin tratamiento: ni viñeta, filtro, LUT, HDR, halos ni marca de agua — la viñeta la pone el sistema (.dt-media::after). [E] 11 §1.4 · DS §10 · E-08 · [H] umbrales H §3.1 / E-08 identify: %[colorspace] = sRGB, depth=8; exiftool -ICC_Profile:ProfileDescription; esquinas 5×5 vs centro del fondo (packshot: 255 en ambos); fringe ≤1 px al 300 % PASS sRGB 8 b sin diferencia esquinas/centro · WARNING esquinas 250-254 o perfil >1 KB · FAIL otro espacio, 16 bits, viñeta, halo HDR, marca de agua todos los A
AS-06 Packshot (A05/A06) y categoría (A03): 1:1 sobre #FFFFFF puro, 1200×1200 (A03: 800×800), sin viñeta ni cast, sin sombra de contacto, sin altas luces recortadas, negros con textura. [E] DS §7 · 25 §6 · [D] E-01 / E-06 (corpus: sombra ≥246 en 31/34, clip 0-0,1 %) perímetro: % píxeles lum ≥253; 4 esquinas 5×5 = 255/255/255; R−B del fondo; banda 8 % bajo el sujeto lum ≥246; % ≥254 dentro del producto; % ≤3 PASS ≥99 % · 255 · R−B ≤1 · ≥246 · ≤0,5 % · ≤3 % — WARNING 97-99 % / 250-252 / 235-246 / ≤1 % / ≤5 % — FAIL <97 %, cast ≥2, <235 (sombra visible), >1 %, >5 % o <1200 px A05 A06 A03
AS-07 Metadatos: -auto-orient y después -strip; ningún bloque EXIF / XMP / IPTC / Photoshop en el archivo servido — se tolera solo copyright; jamás GPS. Es regla de color y privacidad, no de peso (−0,5 KB [medido]). [H] H-07 · H §1.1 exiftool -a -G1 -s f \| grep -E "^\[(EXIF\|XMP\|IPTC\|Photoshop)\]" \| grep -vi copyright vacío; Orientation ausente o 1 PASS vacío (o solo copyright) · WARNING otros campos sin GPS · FAIL GPS, Orientation ≠ 1 sin aplicar A01-A12, A14
AS-08 Transparencia solo en PNG con alpha real (opaque=False: A09 recortado) y en SVG (A15); nunca PNG para fotografía (PNG-24 de una foto 480² = 53,6 KB vs JPG q80 12,0 KB: 4,5× [medido]). [E] H-07 · [medido] H §1.1 identify -format "%[opaque] %[channels]"; PNG con opaque=True = sin razón de ser PASS · WARNING PNG-8 plano · FAIL PNG opaco de foto A09, A15 (excepción); resto prohibición
AS-09 Toda imagen subida tiene exactamente 1 fotograma: un GIF/APNG animado es un video no autorizado (L-17). [D] F-08 · DS §7 «estáticos» · C6 python -c "from PIL import Image; print(getattr(Image.open('f'),'n_frames',1))" = 1 PASS 1 · FAIL >1 A01-A04, A07-A12
AS-10 Pósters de video: uno por video, a 2× de su mayor render — V02 1080×1920 · P05 1280×720 (foto medium 1000² mientras no exista el cron) · V03 1782×1002 — y siempre un fotograma real: nunca el gris «VIDEO» (md5 5e30bff8…), nunca texto ni play quemados; la _x1 es el único fallback aceptado. [D] F-52 · F-05 · E-27 · L-20 identify dimensiones; wc -c; md5 ≠ placeholder y ≠ _x1; sujeto dentro del cuadrado central x 280-1000 (E-27); lum media 0,35-0,75 PASS ≤ techo y fotograma real · WARNING ≤ contrato (+33 %) o fallback _x1 (estado actual 377/378) · FAIL > contrato, placeholder, negro, texto o play quemado A12 (P05 V02 V03)
AS-11 Formato OBJETIVO: AVIF (q50-65) negociado por Accept en el borde, con WebP y JPEG de respaldo; el máster en origen sigue en JPEG/PNG; og:image siempre JPG. [E] DS §7 · PF-3.1 · [H] excepción OG (H-08) curl -sI -H "Accept: image/avif,image/webp,*/*" URL \| grep -i content-type → image/avif; sin Accept → image/jpeg; Vary: Accept PASS · FAIL JPEG a un cliente AVIF, o og:image no JPG todos; A14 exceptuado
AS-12 Máster ≠ versión web. El cliente entrega máster (JPG ≥q95 / TIFF, sRGB, 2×, 11 §1.4); antes de subir, diseño produce la versión web con la receta AS-02 (Squoosh o magick) y QA la verifica con identify. Hoy no existe otro paso entre el máster y el navegador. [H] H-20 (dueño definitivo: cap.11) identify sobre el archivo que está en pub/media: Q ≤80 y peso ≤ techo PASS · FAIL máster subido tal cual (Q ≥90 o peso > techo) A01-A04, A07-A12
AS-13 Nombre según L-30 (§Nomenclatura) y versión por nombre: nunca sobrescribir un archivo conservando el nombre, nunca ?v=. [E] 11 §1.5 · L-30 · [H] H-17 / H-19 regex de §Nomenclatura; mtime del archivo en pub/media/industrias, catalog/category = primera publicación PASS · FAIL nombre fuera de regex (no se sube) o archivo reescrito con el mismo nombre A01-A04, A07-A12, A14-A15

Cómo verificar un archivo (recetas)

Comandos probados por H el 2026-09-10 (ImageMagick 7.1.2, exiftool). Se corren sobre el archivo que se va a subir, no sobre el máster.

```bash

1. Ficha técnica: formato, calidad estimada, color, alpha, progresivo, subsampling, bytes

identify -format "%f | %wx%h | %m | Q=%Q | %[colorspace] | depth=%[bit-depth] | ch=%[channels] | opaque=%[opaque] | interlace=%[interlace] | sub=%[jpeg:sampling-factor] | %b\n" archivo.jpg

PASS AS-02: JPEG · Q≤80 · sRGB · depth=8 · interlace=JPEG · sub=2x2,1x1,1x1 · peso ≤ techo (tabla B)

2. Metadatos que no deben existir (salida vacía = PASS AS-07; se tolera solo copyright)

exiftool -a -G1 -s archivo.jpg | grep -E "^[(EXIF|XMP|IPTC|Photoshop)]" | grep -vi copyright

3. Un solo fotograma (AS-09): 1 = PASS

python3 -c "from PIL import Image; print(getattr(Image.open('archivo.gif'), 'n_frames', 1))"

4. Versión web HOY (JPG progresivo, 4:2:0, sRGB, sin metadatos) desde el máster — hero desktop

magick master.jpg -auto-orient -strip -resize 2880x720 -colorspace sRGB -sampling-factor 2x2 -interlace JPEG -quality 72 2026-11_buen-fin_hero_desktop.jpg

móvil: -resize 1440x1080 -quality 65 · categoría: -resize 800x800 -quality 80 · escena: -resize 1400x880 -quality 74

si el peso supera el techo: baja un peldaño de la escalera AS-04 (2400x600), no la calidad por debajo de 60

5. Variantes OBJETIVO (las hará el borde; a mano solo para validar techos de la tabla B)

magick master.jpg -auto-orient -strip -resize 480x480 -define heic:speed=4 -quality 55 tarjeta-480.avif magick master.jpg -auto-orient -strip -resize 480x480 -define webp:method=6 -quality 80 tarjeta-480.webp

6. Peso y nombre (AS-03, AS-13)

stat -c "%s %n" archivo.jpg ```

Squoosh (diseño, en el navegador): MozJPEG q70-80, progressive, chroma subsampling 2x2, remove metadata; AVIF q≈50-60. Las escalas de calidad de Squoosh, Photoshop e ImageMagick no coinciden: se verifica por peso y por comparación visual al 200 %, no por el número (H §3.1).

Qué mirar sin terminal (Photoshop / Figma):

Qué Photoshop Figma Debe leerse
Tamaño en píxeles Imagen → Tamaño de imagen (sin remuestrear al alza) frame al tamaño de render; exportar a 2× = entrega de la tabla A (2880×720, 1440×1080, 800×800…)
Ratio recorte con proporción fija del slot frame con el ratio del slot exacto (4:1, 4:3, 1:1, 1.6:1, 16:9, 4:5, 3:1)
Perfil y profundidad Edición → Convertir en perfil → sRGB IEC61966-2.1; Imagen → Modo → 8 bits/canal perfil de color del archivo: sRGB (no Display P3) sRGB · 8 bits
Exportar JPG Guardar para Web (heredado): JPEG, Calidad 65-80, Progresivo ✓, Convertir a sRGB ✓, perfil opcional, Metadatos: Ninguno (o Copyright) exporta PNG a 2× y produce el JPG en Squoosh (Figma no controla calidad, subsampling ni progresivo) peso ≤ techo (tabla B)
PNG solo PNG-24 con transparencia real (A09 recortado) idem opaque=False; nunca una foto
Animación ninguna (un GIF con línea de tiempo = FAIL AS-09) — 1 fotograma
Verificación visual vista al 200 % antes/después de comprimir idem en Squoosh sin bloques ni halos en aristas del producto

Paquete de entrega por campaña

Una carpeta por campaña (11 §1.5, E-14), nombrada AAAA-MM_campaña/. Sin uno de los obligatorios no se publica (E-02): el A02 se entrega aunque hoy no tenga campo (DEV-07) — el arte móvil no es opcional, es el que ven los clientes de <768.

text 2026-11_buen-fin/ ├── web/ 2026-11_buen-fin_hero_desktop.jpg (A01 2880×720, versión web AS-02, ≤200 KB) │ 2026-11_buen-fin_hero_movil.jpg (A02 1440×1080, ≤200 KB) │ 2026-11_buen-fin_og_1200x630.jpg (A14 derivada del A02, E-28; si la campaña se comparte) ├── master/ mismos nombres, JPG ≥q95 o TIFF, sRGB embebido, 8 bits, sin capas ni rutas ├── camara/ RAW o JPEG directo con EXIF (Make, Model, DateTimeOriginal) de cada escena / persona ├── retoque/ _retoque.csv + máscaras PNG 1 bit (una por operación declarada) ├── referencia/ cuadro con tarjeta gris de la sesión (no se publica) ├── copy.md kicker · título · SKU · CTA texto · CTA URL · vigencia desde / hasta · alt └── qa/ capturas del hero con el arte cargado a 390 · 767 · 768 · 1024 · 1280 · 1440 · 1920

Pieza Obligatoria Qué se entrega Verifica
A01 + A02 (versión web) sí JPG progresivo con la receta AS-02, nombre L-30, dentro del techo (tabla B) AS-01…AS-04, AS-13
A08 (en vez de A01/A02) si la lámina es humana mismo par 4:1 + 4:3, personal real con gafete (E-20) + E-20…E-22 (cap.04)
Máster sí JPG ≥q95 / TIFF, sRGB IEC61966-2.1 embebido, 8 bits, al tamaño de la tabla A o mayor (E §3.4) AS-05
Original de cámara con EXIF escenas y personas RAW o JPEG directo (Make, Model, DateTimeOriginal, ExposureTime) — prueba de procedencia (E-38 / E-39) exiftool; sin EXIF = WARNING y solicitud
_retoque.csv + máscaras sí (archivo ausente = «sin retoque») columnas archivo · operación (limpieza-fondo, extensión-fondo, upscale, reencuadre-tercero) · herramienta · máscara.png · original; máscaras PNG 1 bit del tamaño del máster (E-37 / E-38) existencia del CSV; σ de la zona extendida ≤6; SSIM ≥0,95 en upscale
Referencia de color escenas y personas cuadro con tarjeta gris/neutra al inicio de la sesión (E §3.4) permite medir E-14 / E-22
Copy por campo sí tabla siguiente I-01 (L-21), I-06 (L-22), I-24 (L-24)
Capturas de verificación sí el hero con el arte cargado en local2/calidad2 a 7 anchos: 390 · 767 (tope móvil) · 768 · 1024 · 1280 · 1440 · 1920 — los extremos de los tres estados de arte (D-02) sujeto dentro de la ventana E-16 / E-17; panel ≤204 px

Copy por campo (límites medidos sobre el tema, L-21; los campos existen en home_hero_n salvo alt, DEV-14):

Campo Límite Regla
kicker ≤24 caracteres 12 px uppercase cian; nombra la campaña
título ≤60 caracteres / 2 líneas h2 clamp(16px, 1.8vw, 22px); sin precio dentro
SKU 1 el precio es vivo (priceInfo); nunca rasterizado ni escrito
CTA texto ≤18 caracteres / ≤3 palabras (WARNING 19-22) verbos I-06: Ver, Explora, Elige, Arma, Compara, Recógelo, Actívala, Suscríbete, Conoce; prohibidos «Compra/Comprar», «Ver más», «Clic aquí»
CTA URL 1 destino real sin destino la lámina no se publica (S1)
vigencia desde / hasta AAAA-MM-DD hasta obligatorio cuando kicker o título nombran campaña (L-24); vencida se auto-oculta (E-02)
alt plantilla I-24 campo propio, no repite el título (L-24); describe el arte, no el copy

Paquete para assets que no son de campaña (mismo esqueleto web/ master/ camara/ retoque/, sin copy.md):

Asset Web (lo que se sube) Máster Extra obligatorio
A03 categoría cat_<familia>_1x1.jpg 800×800 q80 ≤100 KB — es la _x1 del representante canónico reducida (E-34): no se fotografía nada nuevo — (el máster es el _x1) prueba de legibilidad a 122 y 30 px (E-34)
A04 escena esc_<familia>-hero_16x10.jpg + _med 1400×880 ≤150 KB JPG ≥q95 / TIFF original de cámara + _retoque.csv; anclas E-11 anotadas
A07 / A08 / A09 humano humano_…_16x9 840×473 · humano_tiendas_4x1 + _4x3 · humano_asesor-…_1x1 192² 1600×900 · 2880×720 + 1440×1080 · 800×800 original con EXIF; nombre real y gafete en el pie (D-12); _retoque.csv
A10 retrato retrato_<nombre>_4x5 840×1050 ≤120 KB 1200×1500 fondo igualado al navy ≤25 RGB o gris de recorte (E-23, L-14)
A11 archivo archivo_<pieza>_3x1.jpg 1250×417 ≤80 KB scan ≥300 dpi 1800×600 (E-26) lectura del título a 622 px
A12 póster <sku>_video-poster_16x9.jpg 1280×720 ≤80 KB · _9x16 1080×1920 ≤120 KB fotograma del video (ffmpeg -ss t -vframes 1) md5 ≠ _x1; producto en el cuadrado central (E-27)
A14 OG og_<tipo>_<id>_1200x630.jpg ≤200 KB, JPG derivada (E-28), no se fotografía legible a 400×209; logo SVG ≤8 % del alto abajo-derecha como única excepción (E-4)
A15 marca marca_logo.svg · marca_onda.svg · marca_favicon.svg SVG maestro del cliente (11 §2 A7) logo ≤3 KB gz; favicon SVG ≤2 KB + ICO 32

Nomenclatura

Convención única (L-30; forma H-19: minúsculas, ASCII, guiones dentro del segmento, _ entre segmentos, sin espacios ni acentos; sin sufijo de talla en el máster — la talla la escribe el pipeline).

Tipo Patrón Ejemplos
Campaña [E] 11 §1.5 AAAA-MM_campaña_slot_variante[_sku].ext 2026-11_buen-fin_hero_desktop.jpg · 2026-11_buen-fin_hero_movil.jpg · 2026-11_buen-fin_hero_desktop_intv-900.jpg · 2026-11_buen-fin_og_1200x630.jpg
No-campaña [L-30] {tipo}_{id}_{ratio}.ext con tipo ∈ cat · esc · humano · retrato · archivo · og · marca · video (ENM-11) cat_smart-home_1x1.jpg · esc_smart-home-hero_16x10.jpg · esc_smart-home-med_16x10.jpg · humano_mostrador-tlalpan_16x9.jpg · retrato_rodrigo-hernandez_4x5.jpg · archivo_catalogo-1971_3x1.jpg · og_producto_intv-900_1200x630.jpg · og_cat_smart-home_1200x630.jpg · video_intv-900_9x16.mp4 (V01/V02) · video_institucional-poster_16x9.jpg (V03)
Producto [E] intocable {sku}_x{n}.jpg intv-900_x1.jpg … intv-900_x5.jpg; el _11 de 506-034_x1_11.jpg lo añade Magento al deduplicar — no es versión
Póster de video [H] H-19 {sku}_video-poster_{ratio}.jpg intv-900_video-poster_16x9.jpg · _9x16.jpg
Marca (vector) [D] L-30 sin ratio marca_{id}.svg marca_logo.svg · marca_onda.svg · marca_favicon.svg

```text

Regex de aceptación (AS-13; el backend del campo la aplica al subir, H-21)

campaña: ^\d{4}-\d{2}[a-z0-9-]+[a-z0-9-]+[a-z0-9-]+([a-z0-9-]+)?.(jpg|png)$ no-campaña: ^(cat|esc|humano|retrato|archivo|og|video)[a-z0-9-]+([a-z0-9-]+)?\d+x\d+(\d{4}-\d{2})?.(jpg|png|webp|mp4)$ marca: ^marca_[a-z0-9-]+.svg$ ```

Versionado por nombre, nunca ?v= (H-17, H-19, H §3.5): /media/ se sirve con caché de un año, así que un cambio de contenido es un archivo nuevo — nunca «reemplazar» por SFTP ni por el uploader conservando el nombre. La versión es la fecha: en campañas, el prefijo AAAA-MM (una re-entrega lleva el mes de la re-entrega; la carpeta de la campaña no cambia); en no-campaña, la primera entrega va sin fecha y toda re-entrega del mismo asset añade _AAAA-MM al final (cat_smart-home_1x1_2026-12.jpg) — [D] de L-30 + H-19 («la fecha es la versión»). ?v= está prohibido porque Magento no lo escribe, un editor no lo mantendrá y no invalida lo que ya está en el navegador. Que Magento renombre a _1, _2 cuando el nombre ya existe (CABLES_HDMI_Y_DE_VIDEO_1.jpg) no es versionado: es una colisión que delata una re-subida sin fecha nueva (FAIL AS-13). Lo que hoy hay en el catálogo (CABLES_DE_ALIMENTACI_N_INTERLOCK__1.jpg, aud-7840az_x1asas.jpg) es el BAD medido (H §1).

Formatos que acepta el admin hoy

Inventario §3 (código leído el 2026-09-10). El peso que subes es el peso que descarga el cliente (E-22): salvo donde Helper\Image redimensiona, no hay resize ni compresión.

Origen Acepta la subida Validación de tamaño ¿Redimensiona? Formato servido
Imagen de producto (galería nativa) jpg, jpeg, gif, png (Gallery/Upload.php:33-38) ninguna en dimensiones solo donde se usa Helper\Image: PLP, galería en tarjeta, swatches, galería/visor PDP, og — no en carruseles, mosaico, buybar, #juntos, panel de banda, sugeridos mismo formato del original; JPEG q80 sobre lienzo blanco (config.xml:80)
landing_image de categoría (A03) servidor jpg, jpeg, gif, png (di.xml:230-242); el cliente del tema promete además webp (category_form.xml:33) → desalineado 4 MB (category_form.xml:34); sin dimensiones nunca (héroe 688×432, tiles, chips de 38 px) original tal cual (en local ya hay un 2500² de 632 KB y un 1500² de 856 KB)
Arte del hero (industrias_tema/home_hero_n/imagen, A01) jpg, jpeg, gif, png (Backend/Image.php:25) ninguna: sin max_file_size (manda upload_max_filesize de PHP) nunca; sin variante móvil (A02 sin campo) original tal cual — un JPG de varios MB se serviría en la LCP sin queja (hueco 22)
Estáticos del tema (logo.png, logo-blanco.png, tecnico.webp) n/a (versionados con el tema; cambiarlos = despliegue) n/a no PNG · WebP (el único del sitio: funciona porque no pasa por ningún uploader)
Terrific · Vimeo fuera del sitio — lo decide el SDK / proveedor externo

Qué pasa si subes WebP o AVIF hoy: producto → rechazado por MIME; categoría → pasa el filtro del navegador y muere en el POST; hero → rechazado por extensión; AVIF → cero presencia en código, config o media (la palabra solo vive en las etiquetas de los ph-slot). Magento tampoco los genera (GD2 solo conoce GIF/JPEG/PNG). Con pipeline en el borde no hará falta aceptarlos: los másters siguen en JPEG/PNG (H T-11 → retirar la promesa webp del uploader). GIF sí se acepta en los tres: el gate AS-09 (1 fotograma) es lo único que hoy cierra la puerta al «video hero» por GIF (F T-12).

Checklist de assets

Ítems de archivo (H §6, E §6, F §6). I = identify / exiftool · P = PIL · G = regex / grep · S = shell (stat, md5sum, mtime). «Bloquea» = FAIL impide subir/publicar.

# Ítem Umbral PASS WARNING FAIL Herr. Bloquea
Q-AS-01 Dimensiones y ratio = spec del asset (tabla A) o escalera AS-04 exactas / ≥1,5× exactas ≥1,5× con ratio exacto ratio distinto, <1,5×, upscale I Sí
Q-AS-02 Peso ≤ techo (tabla B, columna HOY u OBJETIVO según pipeline) objetivo / máximo ≤ objetivo ≤ máximo (LCP 150-200 con nota) > máximo I/S Sí
Q-AS-03 Formato y receta: JPG prog. 4:2:0 sRGB 8 bits; PNG solo con alpha; OG en JPG todo todo Q 81-85, baseline, PNG-8 plano PNG de foto, 4:4:4, CMYK/Adobe RGB/16 bits, GIF I Sí
Q-AS-04 Metadatos: EXIF/XMP/IPTC/Photoshop vacíos (solo copyright); Orientation aplicada vacío vacío otros campos sin GPS GPS u orientación sin aplicar I Sí (GPS)
Q-AS-05 Sin tratamiento: esquinas vs centro; fringe; marca de agua 0 / ≤1 px sin diferencia esquinas 250-254 viñeta, halo HDR, marca de agua I + visual 300 % Sí
Q-AS-06 Packshot / A03: fondo 255, sin sombra de contacto, sin clipping E-01 / E-06 ≥99 % · ≥246 · ≤0,5 % 97-99 % · 235-246 · ≤1 % <97 %, <235, >1 % P Sí
Q-AS-07 Un solo fotograma (GIF/APNG) 1 1 — >1 P Sí
Q-AS-08 Póster de video: talla 2×, techo, fotograma real F-52 / E-27 real y ≤ techo _x1 o ≤ contrato placeholder, negro, texto, > contrato S/I Sí
Q-AS-09 Nombre según L-30 (regex) regex cumple — no cumple G Sí (no sube)
Q-AS-10 Versión por nombre: mtime = primera publicación; sin ?v=; sin _1 por colisión sí sí — archivo reescrito o renombrado por colisión S Sí
Q-AS-11 Versión web ≠ máster (Q ≤80 y peso ≤ techo en pub/media) AS-12 sí — máster subido tal cual (Q ≥90) I Sí
Q-AS-12 Paquete completo: máster + original con EXIF + _retoque.csv + máscaras + copy + capturas 7 anchos E-38 completo sin EXIF (pedir original) retoque no declarado S Sí (retoque)
Q-AS-13 Copy dentro de I-01: kicker ≤24 · título ≤60/2 líneas · CTA ≤18 car. / ≤3 palabras · hasta si nombra campaña · alt propio L-21 / L-24 dentro CTA 19-22 fuera, verbo prohibido, sin vigencia G Sí
Q-AS-14 Formato aceptado por el admin (jpg/jpeg/png) — WebP/AVIF no suben hoy inventario §3 jpg/png — webp/avif/gif I Sí (no sube)

08Accesibilidad de la multimedia

Objetivo. El DS §12.3 fija WCAG 2.2 AA como criterio de aceptación y axe-core en CI como guardia. axe no ve la multimedia: sobre una imagen reporta «incomplete», no mide un velo, no oye un video ni cuenta destellos. Este capítulo cubre lo que axe no cubre, sobre cuatro premisas:

  1. Se mide sobre el píxel de la captura, nunca sobre el token. El 5.49:1 del cian sobre navy vale sobre navy puro; sobre el velo al 92 % con arte claro debajo cae a 4.40:1 (medido en cap28/t4-hero-panel.png). Toda cifra de contraste de este capítulo dice si es calculada (compuesto velo × arte de prueba blanco/gris/negro) o medida (PIL o cuentagotas sobre el PNG), y se toma en tres vistas: 1440 · 1024 · 390.
  2. Nada esencial vive solo en la imagen: precio, vigencia, condiciones y CTA son HTML del slot; el arte pasa por OCR y devuelve vacío. Quien no ve el arte no pierde la oferta.
  3. La base construida ya resuelve el 80 % de la auditoría 24 (hero manual, dots 44×44 con aria-current, un foco por tile, ring como token, interruptor global de reduced-motion, facade de video con <button> nombrado): las reglas de abajo la fijan por escrito para que nadie la «arregle».
  4. Tres FAIL medidos hoy —kicker cian 4.40, dots 2.03, ring sobre navy 1.85-2.33— más el .badge-new 3.45 del Lead tienen resolución vinculante (L-01…L-05) y ticket (DEV-01…DEV-05).

Umbral de texto grande: ≥24 px, o ≥19 px con peso ≥700 (Heebo 600 no cuenta como bold). Target mínimo AA (2.5.8): 24×24 CSS px; el token del DS es 44. Técnicas de verificación usadas en todo el capítulo: axe (CI: home/PLP/PDP/landing) · CG cuentagotas sobre captura · TEC teclado · SR lector de pantalla (NVDA + Chrome / VoiceOver + Safari) · OCR tesseract · REC grabación de 10 s · DOM inspección o grep del HTML servido.

Reglas AC-01…AC-49

Numeración 1:1 con el especialista: AC-nn = G-nn. Cada regla: frase imperativa · marca + fuente (G, DS, código, decisión del Lead, criterio WCAG) · verificación · veredicto · componentes.

Texto alternativo (AC-01…AC-10)

ID Regla Marca · fuente Verificación PASS · WARNING · FAIL Componentes
AC-01 Da a todo <img> un atributo alt decidido; sin alt no se publica. [E] G-01 · DS §7 · WCAG 1.1.1 axe image-alt + DOM: <img sin alt= en el HTML servido = 0 PASS 0 faltantes · FAIL falta el atributo o el valor es nombre de archivo/campaña todos
AC-02 Escribe el alt del arte de campaña con la plantilla «[producto] [acción/estado] en [escenario]», 40-125 caracteres, ≠ título, ≠ kicker, sin precio, %, vigencia, CTA ni «imagen/foto/banner de». [E] G-02 · DS §7 · [H] validador · L-24 · 1.1.1 Validador del campo: longitud 40-125; normalize(alt) ≠ normalize(titulo); 0 coincidencias de precio, %, «OFF», «hasta», «vigen», «clic», «ver más», extensión de archivo, _x + dígito o fecha; revisión editorial: «¿distingue esta campaña de otra con el mismo título?» PASS plantilla + validador · WARNING alt válido pero = h2 (hoy hero.phtml:39) · FAIL vacío, nombre de campaña, con precio o CTA H01 (A01 + A02: un solo alt)
AC-03 Describe la foto humana informativa como «[persona con rol] [acción] en [lugar real]», sin nombre salvo que el pie lo diga; con figcaption de nombre y rol, alt="". [D] G-03 ← ES-6 · 1.1.1 SR: nombre y rol se oyen una sola vez PASS · FAIL alt que repite el pie · FAIL sin pie y alt="" cuando el texto adyacente no dice que hay una persona real H02, M02, M04
AC-04 Avatar del asesor: alt="" si nombre y rol son texto visible junto a él; si no, «Nombre Apellido, asesor Steren». [D] G-04 ← ES-7 · 1.1.1 DOM + SR PASS · FAIL (binario) M03
AC-05 En un tile con un solo enlace (tile-cover + .dt-name::after / .mt-link) pon alt=""; el nombre accesible es la categoría (+ uso + conteo). Un alt no vacío aquí es un bug de lectura doble. [E] G-05 · mosaico.phtml:44-49 · landing.phtml:70-92 · D-09 · 1.1.1 / 2.4.4 axe link-name en .dt-name/.mt-link; TEC: 1 parada por tile (+ chips); SR anuncia «Smart Home, 168 productos» una vez PASS · FAIL alt duplicado, <img> sin atributo o 2 paradas al mismo destino T01-T05, T08
AC-06 Packshot: en tarjeta, carrusel, carrito y moneda alt="" con el nombre como enlace adyacente y el enlace de la foto fuera del tab-order (tabindex=-1 aria-hidden); en PDP tile 0, visor y OG el alt (og:image:alt) = nombre del producto. [E] G-06 · DS §7 · list.phtml:161-167 · galeria.phtml:98,115 · [D] og:image:alt · 1.1.1 DOM: cada <img alt=""> de producto tiene un <a> con el nombre en la misma tarjeta; PDP: alt del tile 0 = h1 PASS · FAIL alt="" huérfano (24 §2.3: 152 imágenes) P01, P03, P04, B02, S01
AC-07 Carga el label de la galería con la toma canónica (frente · tres cuartos · detalle de [parte] · escala/en mano · contenido del paquete · en uso) y emítelo como aria-label="Vista N de M: {toma}" del botón y alt del slide del visor; sin label, «Vista N de M». [D] G-07 ← galeria.phtml:121 · [H] set canónico (cierra H-04) · 1.1.1 DOM: muestreo de 20 PDP, ≥80 % de tomas con label del set; SR distingue «detalle del conector» de «frente» PASS ≥80 % · WARNING 50-80 % · FAIL «Vista 2 de 5» en el 100 % (hoy) P02, P04
AC-08 Video de producto: póster real (nunca el gris «VIDEO»), alt="", y <button> con nombre «Reproducir video: {título}» (sin título: «Reproducir video del producto»). [E] G-08 · galeria.phtml:40-59, 96-100 · L-20 · 1.1.1 / 4.1.2 DOM: button[aria-label^="Reproducir"]; md5 del póster ≠ 5e30bff8… PASS · FAIL placeholder gris · FAIL <div onclick> P05, V02
AC-09 Imagen de archivo: alt informativo con año y contenido («Portada del catálogo impreso Steren de 19XX: …», ≤125); es imagen de texto esencial y el alt resume lo legible. [D] G-09 ← ES-9 · 1.4.5 (excepción «esencial») DOM: alt ≠ titular de la banda; año presente PASS · FAIL «catálogo» a secas M01, B05
AC-10 Saca del árbol iconos y ornamentos: SVG aria-hidden="true" focusable="false"; botón solo-icono con aria-label; ph-slot mudo con aria-hidden en producción; papel picado y cinta como pseudo-elementos. [E] G-10 · sprite · Slot.php:49 · patrio.css · 1.1.1 / 4.1.2 axe svg-img-alt, button-name; SR: cero «gráfico» sueltos PASS · FAIL <svg> sin aria-hidden con <title> como único nombre D01, D03, D04, D05, T06, B01

Gate «banner sin alt no se publica» (DS §7) traducido: (1) campo alt obligatorio en el slot del hero —hoy no existe en system.xml → DEV-14; mientras tanto el hero es WARNING permanente—; (2) validador de AC-02 al guardar; (3) Q-AC-01…04 antes de encender activo.

Contraste sobre media (AC-11…AC-19)

ID Regla Marca · fuente Verificación PASS · WARNING · FAIL Componentes
AC-11 Compón texto sobre imagen solo con el velo del sistema: panel navy 96 % + blur 10 (hero) o cintillo bg 96→92 % + blur + máscara (tiles). Nunca sobre foto desnuda ni con degradado propio del arte. [E] G-11 · cap.27/28 · D-05 · E-2 · L-01 · 1.4.3 DOM/CSS: texto solo en .hero-copy, .dt-body, .mt-body; ningún color sobre .dt-media img PASS · FAIL texto fuera del velo H01, H02, T01-T05, H04
AC-12 Mide el contraste sobre el píxel de la captura en 1440 · 1024 · 390: 5 puntos detrás de los glifos (4 esquinas de la caja + centro) más el píxel más claro y el más oscuro de la caja; manda el peor punto. axe reporta «incomplete» sobre imágenes y no sustituye esta medición. [E] G-12 · 01-extr. §3.25 · [H] protocolo · 1.4.3 CG: cuentagotas de DevTools (muestra el ratio), CCA o PIL sobre el PNG PASS ≥4.5 normal / ≥3 grande · WARNING 4.5-5.0 (sin margen para arte claro) · FAIL <4.5 todo texto sobre media
AC-13 Certifica cada componente con velo una sola vez con un JPG blanco puro y uno negro puro en el slot; si pasa con ambos, cualquier campaña pasa (las reales solo se muestrean). Obligatorio para T03/T04 con escena antes de publicar. [H] G-13 · L-05 · 1.4.3 CG: subir test-blanco.jpg y test-negro.jpg al slot; medir con AC-12 PASS ambos · FAIL uno H01, H02, T03, T04
AC-14 Sobre el panel del hero el texto es blanco (10.79:1 peor caso; 10.91 medido). El cian va en el precio 28 px/800 (grande: 4.35-5.80 ≥3) y en el kicker 12 px solo con las dos capas de L-01: velo a 96 % (4.93:1 con arte blanco; DEV-01) y franja de 120 px bajo y alrededor del panel en medio tono (L* 40-60, ni blanco ni navy). Con velo 92 % el kicker cian falla (4.40 medido, 4.35 peor caso). [E] G-14 · DS §1 on-dark (5.49 es sobre navy puro) · L-01 · 1.4.3 CG sobre cap28/t4-hero-panel.png; kicker con arte de prueba blanco tras DEV-01; L* de la franja medido sobre el A01 entregado FAIL hoy (kicker 4.40 con velo 92 %) · PASS h2, CTA y vigencia · PASS kicker con DEV-01 + arte L* 40-60 H01, H02
AC-15 Usa sale-on-dark #FFD9A8 cuando un kicker de oferta pida color: 8.09:1 peor caso sobre el panel. [D] G-15 · compuesto · 1.4.3 CG con AC-12 PASS H01
AC-16 Vigencia 12 px blanca sobre navy 75 % sin blur: 6.33:1 peor caso; sobre arte con textura fina mide (sin blur el detalle pasa). [E] G-16 · home.css:88-89 · 1.4.3 CG en 3 puntos de la pastilla PASS ≥4.5 · WARNING <5 H01
AC-17 Sobre el cintillo usa solo n900 (≥12.57:1 en la zona opaca), n700 (7.84), n600 (5.04) y primary-text (4.90); n500 (3.86) y sale (4.13) prohibidos. [E] G-17 · cap.27 «≥10:1» · 1.4.3 DOM/CSS: tokens de .dt-body y .mt-body dentro de n900 · n700 · n600 · primary-text PASS · FAIL n500 o sale T01-T05
AC-18 Mantén el texto del cintillo en la zona ≥92 % del velo, nunca en el fundido de la máscara (velo efectivo 20-32 % → 1.2-1.9:1 sobre pie oscuro; 5.3-6.3 sobre gris medio). Con packshots sobre blanco no hay riesgo; con escenas T03/T04 el fundido queda dentro del padding-top (DEV-05: ≥50 % del alto del cintillo cuando la media es escena) o la franja inferior de la escena (104/72 px) mide ≥ #808080 en la zona de texto; certificación AC-13 obligatoria. [E] G-18 · D-04 · L-05 · [H] fix · 1.4.3 CG: AC-13 con arte negro en T03/T04, píxel detrás de la altura-x del primer renglón ≥ #8F8F8F (n900 ≥4.5) PASS · WARNING hoy (sin escenas) · FAIL con escena oscura T03, T04 (y T01/T02 si landing_image fuera lifestyle)
AC-19 Da ≥3:1 a todo componente no textual sobre arte por su glifo o relleno (no exige borde). Flechas: círculo blanco 92 % + glifo n700 = 9.35 medido. Dots: scrim n900 a 60 % (4.12 peor caso; DEV-02) y franja de dots del A01 (x 1300-1580 · y 630-720) con L* ≤ 60; estado activo/inactivo también ≥3:1. Play 48 px blanco sobre navy 70 % = 5.43. [E] G-19 · DS §1 · home.css:91-105 · pdp.css:69-71 · L-02 · 1.4.11 CG sobre el aro del dot y el chip con arte blanco y negro PASS ≥3 · FAIL <3 (dots hoy: 2.03 medido con scrim 30 %) H01 controles, P05 play, V02

Badges sobre foto (P03): badge-promo blanco sobre sale 4.92 PASS; .badge-new blanco sobre primary 3.45 FAIL → texto sobre primary-text (5.84) o navy (L-03 · DEV-03 steren.css:479).

Contenido esencial nunca solo en la imagen (AC-20…AC-23)

ID Regla Marca · fuente Verificación PASS · WARNING · FAIL Componentes
AC-20 Publica precio, vigencia, condiciones y CTA siempre como HTML del slot; el precio sale del SKU (priceInfo) y nunca se teclea. [E] G-20 · DS §7 · C6 · cap.4 · 24 §5.5 · 1.1.1 DOM: .hero-precio con sr-only «Precio:», .hero-vigencia, a.btn; sin texto en el raster (AC-21) PASS · FAIL precio o CTA solo en el arte H01, B01, B04, T07
AC-21 Entrega arte sin texto rasterizado: el OCR del asset no devuelve texto salvo logotipos/wordmarks (excepción de logotipo) y el escaneo del catálogo (esencial, AC-09). [E] G-21 · 11 §1.1 · ES-11 · DS §10 · [H] OCR como gate · 1.4.5 OCR: tesseract arte.jpg - -l spa → vacío o solo marcas; inspección visual de «20 % OFF», legales y «$» PASS · WARNING texto ilegible o accidental (letrero real de fondo, ≤3 palabras) · FAIL precio, %, vigencia, legales, claim o CTA A01-A04, A07, A08, A11, A14
AC-22 Escribe las condiciones que cambian la oferta («hasta agotar existencias», «solo con SterenCard») como texto en el slot o en la primera pantalla del destino; la vigencia visible es la misma que auto-oculta el slot. [D] G-22 ← C6 vigencia + V3 + DS §10 anti-dark-pattern · 1.1.1 DOM: leer el slot con img en visibility:hidden: la oferta se entiende completa PASS · FAIL condición solo en el arte o inexistente H01, B04
AC-23 Redacta el CTA único y con destino («Explora Smart Home», verbos I-06), nunca «Ver más» ni «Clic aquí», y sin depender de posición o color del arte («el de la derecha», «en rojo»). [D] G-23 ← V1 · L-22 · 2.4.4 / 1.3.3 axe link-name; DOM: lista de CTAs del home sin duplicados con distinto href PASS · FAIL genérico o sensorial H01-H03, B02, B03
Slider de producción actual de 1920 por 500 con precio, legales y oferta dibujados dentro del JPG
BAD para AC-21: el slider de producción actual lleva precio, legales y oferta dentro del JPG; el OCR devuelve texto → FAIL. En el tema 2026 ese contenido vive en el panel HTML del hero y el arte llega limpio.

Movimiento (AC-24…AC-29)

ID Regla Marca · fuente Verificación PASS · WARNING · FAIL Componentes
AC-24 Rota el carrusel solo a mano (flechas, dots, swipe); un setInterval o autoplay en el hero es FAIL. [E] G-24 · DS §7 · C6 · home.js:23-67 · home-smoke.php:58 · 2.2.2 DOM: grep setInterval/autoplay en home.js = 0; REC 30 s sin interacción = 0 cambios PASS · FAIL H01-H03, V05
AC-25 Todo lo que se mueva solo >5 s y arranque solo tiene pausar/parar/ocultar visible y por teclado. Exentos: esqueleto (carga), luz de progreso (la mueve el scroll), countUp ≤2 s, delta «+$139» 4 s, fuegos 2 s. Terrific no está exento: si auto-avanza o auto-reproduce >5 s, botón «Pausar/ocultar videos» del sistema (hidden a la banda cuenta como ocultar). [E] G-25 · 24 §5.4 · ES-13 · [H] terceros · 2.2.2 REC: cronometrar la banda 10 s sin tocarla en calidad2; TEC: Tab llega a la pausa PASS · FAIL movimiento >5 s sin control V01, V02, V04, D03
AC-26 Declara para cada animación su conducta bajo prefers-reduced-motion (se apaga · fundido 120 ms · estado final · conserva tiempo, ver la tabla de piezas); el interruptor global .01ms !important es la única excepción (X-14 / E-5). [E] G-26 · DS §5 · ES-13 · steren.css:17-20 · F-35 · 2.3.3 (AAA, adoptado por el DS) REC: DevTools → Rendering → emular reduce; 10 s de home/PLP/PDP/éxito: nada se mueve salvo video pedido PASS · WARNING tercero sin respuesta a la media query · FAIL movimiento residual V04, D03, V01
AC-27 Fuegos del tema patrio: ≤2 s, una sola vez, aria-hidden, pointer-events:none, apagados con reduce; 3 ráfagas/2 s = 1.5/s <3 y área muy por debajo del 25 % del viewport; no requieren botón de parar (≤5 s). [E] G-27 · cap.31.6 · patrio-fuegos.js:35 · 2.2.2 / 2.3.1 REC: estallidos por segundo ≤3; duración ≤5 s; PEAT si cambia el efecto PASS · FAIL >5 s o >3 destellos/s D03
AC-28 Ningún parpadeo o destello >3 por segundo en ninguna pieza (esqueleto 0.7 Hz, lavado cian ≤1); un efecto nuevo con >3 cambios de luminancia/s se rechaza. [D] G-28 ← 2.3.1 DOM: @keyframes con infinite de periodo ≥0.34 s; REC PASS · FAIL V04
AC-29 Nunca autoplay sonoro: autoplay solo silenciado y ≤5 s o con pausa; el <video autoplay> del facade arranca tras el clic; V05 no autorizado (L-17). [E] G-29 · D-13 · pdp.js:312-318 · F-01 · 1.4.2 Cargar PDP y home con volumen: 0 audio sin clic; previews de Terrific muted (verificar en calidad2) PASS · FAIL audio sin acción del usuario P05, V01, V02, V03, V05

Video (AC-30…AC-35)

ID Regla Marca · fuente Verificación PASS · WARNING · FAIL Componentes
AC-30 Publica subtítulos es-MX en todo video con voz (pista CC .vtt del proveedor o abiertos quemados: única excepción legítima de «texto en imagen»); sin subtítulos no se publica. [D] G-30 · F-06 · DS §12.3 · [H] gate editorial · 1.2.2 Player: botón CC presente y activable; Vimeo texttracks; muestreo de 10 reels PASS · WARNING solo autogenerados · FAIL video con voz sin CC · N/A solo música (dicho en el título) P05, V01, V02, V03
AC-31 Video sin voz (demo muda): alternativa textual = title que describe la acción («Cómo instalar el contacto inteligente») + descripción del producto en la ficha. [D] G-31 ← 1.2.1 DOM: title en la isla #data-galeria no vacío y descriptivo PASS · WARNING título = nombre del producto · FAIL sin título P05, V02
AC-32 Institucional: subtítulos + transcripción plegable en la página etiquetada como alternativa («Este video cuenta lo que dice el texto de esta página»); si narra cosas ausentes del texto, pista de audiodescripción; iframe title="Video institucional de Steren"; facade con <button> y póster real 1782×1002; player.vimeo.com en la CSP. [D] G-32 · F-29 · F-31 · L-19 · DS §5 i18n · 1.2.2 / 1.2.3 / 1.2.5 Player: menú CC de Vimeo (verificar en calidad2); DOM: párrafo de etiqueta y iframe[title] en español FAIL hoy (title="master_steren (2160p)", iframe eager, sin facade) · WARNING sin transcripción · PASS con DEV-11 M05, V03
AC-33 Haz operable el reproductor por teclado con foco gestionado: Enter en el facade → el foco pasa al reproductor; Tab recorre play/pausa/volumen/CC; Esc cierra el visor y devuelve el foco. [E] G-33 · pdp.js:595-613 · F-21 · 2.1.1 / 2.4.3 / 4.1.2 TEC + SR en PDP con video: Enter → Tab → «Reproducir» del player → Esc PASS · FAIL foco perdido o controles inalcanzables (hoy el iframe nace dentro del <button>: DEV-G7) P05, V03
AC-34 Antes de encender una banda de Terrific pasa el checklist de tercero: Tab alcanza play/pausa/siguiente, Esc cierra el overlay, sin trampa de foco, subtítulos, muted, reduced-motion, iframe title en español, target ≥24; lo que el proveedor no cumpla se declara en la declaración de accesibilidad y se escala. [H] G-34 · H-07 · L-18 · 2.1.1 / 2.1.2 / 1.2.2 / 2.5.8 Sesión manual en calidad2 (local2 da 403) con TEC + SR; REC con reduce PASS · WARNING con declaración · FAIL trampa de foco o autoplay sonoro V01
AC-35 Póster y facade: imagen real ≤ presupuesto, <button aria-label> (AC-08), glifo play ≥3:1 (AC-19), 0 iframe hasta el clic; el póster gris «VIDEO» no existe y la _x1 es el único fallback aceptado. [E] G-35 · F-02 · F-05 · L-20 · 1.1.1 / 1.4.11 DOM antes del clic: 0 iframe; md5 del póster PASS · WARNING fallback _x1 · FAIL placeholder o iframe eager P05, V02, V03

Foco y teclado (AC-36…AC-41)

ID Regla Marca · fuente Verificación PASS · WARNING · FAIL Componentes
AC-36 Pon .on-navy (ring-inverse blanco: 13.60:1 sobre navy, 10.79:1 sobre el velo) en toda superficie navy con foco: .hero-copy, .hero-sys, .catband-head, .mtile--banner, .ts-hero. Sin ella el ring #006B9E da 1.85-2.33:1. [E] G-36 · DS §1 / §5 · steren.css:51 · L-04 · 2.4.7 / 1.4.11 TEC por home, landing y Tech Services + CG sobre el anillo FAIL hoy en 5 superficies · PASS con DEV-04 H01-H04, B02, B03
AC-37 Usa el token propuesto focus.ring-media en controles sobre foto arbitraria: doble trazo outline: 2px solid #FFF + box-shadow: 0 0 0 4px #006B9E (5.84:1 entre sí, siempre un trazo ≥3 contra cualquier píxel). Aplica a .hero-ctrl, .hero-dots button y todo control futuro sobre media. [H] G-37 · L-04 · ENM-01 · 2.4.7 / 1.4.11 CG con AC-13 (arte blanco y negro): en cada uno, al menos un trazo ≥3:1 contra el arte PASS · FAIL un solo trazo H01, H02, V01
AC-38 Un foco por tile: tile-cover con tabindex=-1 aria-hidden, enlace del nombre estirado (::after / .mt-link), chips como foco propio; el anillo se dibuja alrededor del texto sobre el cintillo (ring claro 4.90 peor caso), no de la foto. [E] G-38 · cap.31.2 · cards.css:228 · mosaico.phtml:56-59 · 2.4.7 / 2.4.3 TEC: tile = 1 parada (+N chips); anillo visible sobre el cintillo PASS · FAIL 2 paradas al mismo destino o anillo invisible T01-T05, T08
AC-39 Completa el carrusel ARIA: section aria-roledescription="carrusel" + aria-label; cada lámina role="group" aria-roledescription="lámina" aria-label="N de M"; contenedor aria-live="polite" (rotación manual, APG); flechas <button aria-label>; dots aria-label="Ir a promoción N" + aria-current; láminas ocultas con [hidden]. [E] G-39 · hero.phtml:32-33, 83-91 · DS §5 · 24 §5.4 · [D] group + live · 4.1.2 / 2.4.3 axe aria-roledescription; SR: al pulsar «siguiente» se anuncia «lámina 2 de 3: …» PASS · WARNING hoy (sin group ni live) · FAIL flechas <div> o tab-stops en láminas ocultas H01-H03, P04, V02
AC-40 Ofrece el swipe como alternativa, nunca como único camino (dots y flechas cubren la función); dispara en pointerup con umbral 48 px; flechas ocultas <768 y dots de 44 como control táctil. [E] G-40 · home.js:53-66 · home.css:118 · 2.5.1 / 2.5.7 / 2.5.2 TEC móvil sin swipe: los dots llegan a todas las láminas PASS · FAIL solo-swipe H01, P04
AC-41 Mantén scroll-padding-top = --st-hdr-alto + 4 (124/114 px); en PDP móvil añade scroll-padding-bottom = alto de la barra de compra pegada; con tema patrio el header suma 26/18 px de papel picado y no debe tapar entero un elemento enfocado. [E] G-41 · steren.css:14 · DS YAML focus.scroll-padding-top · [D] bottom · 2.4.11 TEC: Tab hasta un elemento bajo header o barra: visible al menos parcialmente PASS · WARNING parcialmente tapado · FAIL oculto todo; D03

Zoom y reflow (AC-42…AC-45)

ID Regla Marca · fuente Verificación PASS · WARNING · FAIL Componentes
AC-42 Conserva el viewport width=device-width, initial-scale=1 sin maximum-scale ni user-scalable=no. [E] G-42 · default_head_blocks.xml:7 · 24 §3.1 · 1.4.4 DOM: grep del <meta viewport> PASS (hoy) · FAIL todo
AC-43 A 320 px no hay scroll horizontal ni arte del hero recortado: el slide pasa a panel navy + slot 4:3; hasta que exista el campo A02 el slot colapsa (L-08) y nunca pinta un recuadro gris. [E] G-43 · home.css:108-121 · cap.31 min-width:0 · L-08 · 1.4.10 320×568: document.scrollingElement.scrollWidth === 320; captura del hero PASS · WARNING recuadro gris visible · FAIL scroll horizontal H01-H03, B02, T01-T05
AC-44 Nunca recortes el panel del hero a 200 %: el slide es overflow:hidden con alto mínimo 240 px y el panel cabe con 16 px de margen. Presupuesto editorial (manda I-01): kicker ≤24 · h2 ≤60 caracteres / 2 líneas · CTA ≤18 (WARNING 19-22) · vigencia ≤30 · panel ≤204 px. Un h2 de 3 líneas ≈228 px + 16 > 240 se recorta por arriba. [D] G-44 ← home.css:40, 48-67 + DS §2 «zoom 200 % = criterio» · L-21 · 1.4.4 Chrome 1280×800 a 100/150/200 % y 1024×768 a 150 %: panel completo (borde superior visible), sin elipsis; validador de longitud del campo PASS · WARNING h2 61-75 · FAIL recorte o >75 H01, H02
AC-45 Nombres sobre tiles sin truncar a 320 px y 200 %: line-clamp: 2 solo con etiqueta corta (≤20 caracteres en tile sm de 138 px; ≤32 en héroe). Hoy «MOVILIDAD (TECNOLOGÍA…» se trunca a 390 (estado-local/home-390.png) → etiqueta corta de la categoría (manual §4.1). [E] G-45 · home.css:233-236 · [H] presupuesto · 1.4.10 / 1.4.4 Capturas 390 y 320: ningún .dt-name / .mt-uso con elipsis; 200 % en 1280 PASS · WARNING elipsis en ≤1 tile (info en destino) · FAIL en héroe o ≥2 tiles T01-T05

Target size (AC-46…AC-49)

ID Regla Marca · fuente Verificación PASS · WARNING · FAIL Componentes
AC-46 Controles sobre media a 44×44: flechas del hero 44, dots 44 (visual 12), .st-circ / .carr-btn 44, visor flechas 44 + hit-area 60, cerrar 44, miniaturas del visor 64, play 48 dentro de un tile ≥192. [E] G-46 · DS YAML touch.target-min · home.css:91-99 · pdp.css:99,121,146 · 2.5.8 DOM: getBoundingClientRect() de cada control ≥44 en 390 PASS ≥44 · WARNING 24-43 · FAIL <24 sin equivalente H01, B02, P04, P05
AC-47 Galería en tarjeta: gal-nav 28 px (legal ≥24, token ✗) y gal-dot 6×16 (<24; la excepción de espaciado no aplica con gap 5) valen solo por equivalencia (flechas + PDP) → WARNING; fix: hit-area 24×24 por padding con visual de 6 px intacto. En táctil las bolitas son contador no interactivo. [E] G-47 · cards.css:26-30, 45-52 · galeria-tarjeta.js:143-148 · 2.5.8 Medir en 1280 con hover; en 390 confirmar gal-dots--contador WARNING hoy · PASS con hit-area 24 P03
AC-48 Swatches 28 px (tarjeta) / 40 (PDP): legales, token 44 ✗ → WARNING; chips: cat-resto-list a 52, .dt-chips a ≈28, .mt-chips a ≈24 (medir: padding 2 px); vecinos con gap 6 cumplen la excepción de espaciado. [E] G-48 · cards.css:314-315, 354 · home.css:256-258 · catalogo.css:325-327 · 2.5.8 DOM: alto real de .mt-chips a a 1440 (≥24) PASS ≥24 · WARNING 24-43 · FAIL <24 P06, T01, T03, T08
AC-49 Terceros y <video controls>: lo nativo del UA está exento; el SDK de Terrific debe ofrecer play y siguiente ≥24 (ideal 44). [D] G-49 ← 2.5.8 excepción UA · [H] tercero Medir en calidad2 PASS · WARNING · FAIL <24 V01, P05

Plantillas de alt por tipo de asset

Un alt="" es una decisión, no una omisión: en tiles, tarjetas, moneda y miniaturas el enlace adyacente ya nombra el contenido (enlace redundante, D-09); «arreglarlo» con un alt descriptivo produce lectura doble y es FAIL de AC-05/AC-06. Tope: 125 caracteres (los lectores truncan más allá; verificar con NVDA/VoiceOver).

Asset · componente Plantilla Ejemplo Longitud Estado en código
A01/A02 arte del hero · H01 «[Producto] [acción/estado] en [contexto mexicano concreto]»; un solo alt para ambos crops; ≠ título, ≠ kicker; sin «imagen de», precio, %, vigencia ni CTA «No break Steren encendido bajo la tele de una sala, durante una tormenta» (72) · «Foco inteligente Steren encendido en una sala con muros de color, controlado desde un celular» (93) 40-125 WARNING: alt = titulo (hero.phtml:39); sin campo → DEV-14
A08 foto de tiendas · H02 «[Persona con gafete] [acción] en [mostrador/taller] de Steren [sucursal]»; sin nombre «Asesora con gafete Steren entregando un pedido en el mostrador de la tienda Satélite» (84) 40-125 sin campo (hueco)
A03 foto de departamento o familia · T01-T05, T08 alt="": el nombre de categoría (+ uso + conteo) es el enlace adyacente — 0 correcto (mosaico.phtml:44-47, landing.phtml:73): no se «arregla»
A04 escena · T03/T04 alt="" por defecto; alt corto «[Producto de la familia] [acción] en [lugar]» solo si la escena aporta lo que el texto no dice «Cámara Wi-Fi montada en el muro de un patio, de día» (51) 0 o ≤125 ph-slot sin <img> (hueco); .mt-link aria-label="uso — familia, N productos" ya construido
A05 packshot _x1 en tarjeta, carrusel, carrito y moneda · P01, P03, B02 alt="" + nombre como enlace adyacente; enlace de la foto con tabindex=-1 aria-hidden — 0 correcto (list.phtml:161-167): no se «arregla»
A05 en PDP tile 0, visor y OG · P04, S01 nombre del producto (= h1); og:image:alt con el mismo valor — ≤125 PDP correcto (galeria.phtml:98,115); og:image:alt no emitido (og.phtml) → DEV-G10
A06 tomas _x2.._x5 · P02, P04 campo label de la galería con la toma canónica —frente · tres cuartos · detalle de [parte] · escala/en mano · contenido del paquete · en uso— emitido como aria-label="Vista N de M: {toma}" del botón y alt del slide del visor «Vista 3 de 5: detalle del conector» (34) ≤125 hoy «Vista N de M» sin toma en el 100 % (FAIL AC-07) → DEV-G9
A12 póster de video · P05, V02 alt=""; nombre accesible del <button> «Reproducir video: {título}» «Reproducir video: Cómo instalar el contacto inteligente» (55) ≤125 correcto (galeria.phtml:96-100); póster _x1 = WARNING (L-20 · DEV-12)
A10 retrato de servicio · M04/H04 alt="" + figcaption «Nombre · puesto» «Rodrigo Hernández · instalador» 0 correcto (steren-tech-services.html:45-48)
A07 foto de mostrador · M02/B06 «Asesor de Steren con gafete atendiendo en el mostrador» (nombre solo con consentimiento); no repite «Pregunta, Steren responde» «Asesor de Steren con gafete atendiendo en el mostrador» (54) 40-125 sin campo (hueco)
A09 avatar · M03 alt="" si el nombre va al lado; si no, «Foto de [Nombre], asesor de Steren» — 0 o ≤125 hoy iniciales «St» (preguntas.phtml:31-34)
A11 archivo · M01/B05 «Portada del catálogo impreso Steren de [año]: [contenido legible]» «Portada del catálogo impreso Steren de 19XX: …» ≤125 sin campo (hueco)
Iconos, onda, glifos, ph-slot · D01, D04, D05, T06 sin alt: aria-hidden="true" focusable="false"; botón solo-icono con aria-label — — correcto (sprite; Slot.php:49)
Video institucional · V03 iframe title descriptivo «Video institucional de Steren» (29) ≤125 FAIL: title="master_steren (2160p)" (nosotros.html:40) → DEV-11

Matriz de contraste sobre media

Fuente única: anexo A de G. Calculado = fórmula WCAG sobre el compuesto velo × arte de prueba; medido = píxel de cap28/t4-hero-panel.png (arte = bg-subtle) con PIL. La columna «resolución» es la decisión vinculante del Lead.

Par Superficie Calc. arte blanco · gris 50 % · negro Medido Umbral Veredicto Resolución
blanco / panel navy 92 % H01 h2, CTA 10.79 · 12.58 · 14.37 10.91 (#FFF vs #143F64) 4.5 PASS —
cian #00B2E3 / panel navy 92 % H01 kicker 12 px 4.35 · 5.08 · 5.80 4.40 4.5 FAIL L-01 → DEV-01 velo 96 % (home.css:49) + arte L* 40-60 en 120 px alrededor del panel
cian / panel navy 92 % H01 precio 28 px 800 (grande) 4.35 · 5.08 · 5.80 4.40 3 PASS —
cian / velo 94 · 96 · 98 % (arte blanco) alternativa de AC-14 4.66 · 4.93 · 5.21 — 4.5 PASS desde 96 % DEV-01 fija 96 %
cian / navy puro H03, B02 cifra, kickers sin foto 5.49 — 4.5 PASS —
sale-on-dark #FFD9A8 / panel 92 % kicker de oferta (opción) 8.09 · 9.43 · 10.77 — 4.5 PASS —
blanco / navy 75 % sin blur H01 vigencia 12 px 6.33 · 10.31 · 15.95 — 4.5 PASS —
n900 / cintillo bg 92 % (zona opaca) T01-T05 nombre ∞ · 13.75 · 12.57 — 4.5 PASS —
n700 · n600 · primary-text / bg 92 % T01-T05 conteo, familia, link 7.84 · 5.04 · 4.90 (negro) — 4.5 PASS —
n500 · sale / bg 92 % prohibidos sobre cintillo 3.86 · 4.13 (negro) — 4.5 FAIL AC-17: no se usan
n900 / cintillo en el fundido (velo efectivo 20-32 %) primer renglón sobre escena ∞ · 5.3-6.3 · 1.2-1.9 — 4.5 FAIL con pie oscuro L-05 → DEV-05 padding del cintillo ≥50 % con escena; certificación blanco/negro
dot blanco / scrim n900 30 % H01 dots 1.86 · 5.82 · 19.59 2.03 activo · 1.91 aro inactivo 3 FAIL L-02 → DEV-02 scrim 60 % (home.css:101) + franja de dots L* ≤ 60
dot blanco / scrim n900 50 · 60 % fix de dots 3.08 · 4.12 (blanco) · 7.62 · 8.77 (gris) · 18.5 · 17.9 (negro) — 3 PASS desde 60 % DEV-02 fija 60 %
glifo n700 / círculo blanco 92 % H01 flechas 9.35 · 8.58 · 7.84 9.35 (#44474A vs #FFF) 3 PASS —
blanco / play navy 70 % P05 play 5.43 — 3 PASS —
blanco / velo «+N» navy 70 · 82 % P04 5.43 · 7.95 12.1 (cap.17, sobre foto blanca real) 4.5 PASS —
blanco / primary (.badge-new) P03 badge sobre foto 3.45 — 4.5 FAIL L-03 → DEV-03 texto sobre primary-text (5.84) o navy (steren.css:479)
blanco / sale (badge-promo) P03 badge sobre foto 4.92 — 4.5 PASS —
ring #006B9E / arte foco sobre foto 5.84 · 1.48 · 3.60 — 3 FAIL en gris L-04 → ENM-01 focus.ring-media
ring blanco / arte foco sobre foto 1.00 · 3.95 · 21.0 — 3 FAIL en claro L-04 → ENM-01 focus.ring-media
ring #006B9E / panel navy 92 % · navy puro CTA del hero, SterenCard, catband, banner, Tech Services 1.85 · 2.15 · 2.46 · 2.33 (puro) — 3 FAIL L-04 → DEV-04 .on-navy en las 5 superficies
ring blanco / panel navy 92 % · navy puro con .on-navy 10.79 · 12.58 · 14.37 · 13.60 (puro) — 3 PASS DEV-04
blanco / #006B9E (entre trazos del ring dual) AC-37 5.84 en todo arte — 3 PASS siempre ENM-01
n900 · n600 · primary-text · primary / cyan-tint T06, B06 13.59 · 5.45 · 5.29 · 3.13 — 4.5 / 3 icono PASS —
aro cian 45 % / navy · / blanco B02 moneda (decorativo) 2.27 · 6.00 — n/a decorativo —
blanco .8 / pie navy 92 % H04 figcaption ≥7 — 4.5 PASS en zona ≥75 % medir que los renglones no suban al fundido

Geometría de la fila del fundido: héroe 1440 con chips 113 px (padding-top 24); tile de 2 líneas 89 px; tile sm 74 px (padding-top 20). Máscara opaca desde el 46 % del alto; gradiente 96 % (0 %) → 92 % (54 %) → 0 (100 %); velo efectivo = máscara × gradiente.

Movimiento y reduced-motion por pieza

Política F-35, obligatoria en toda animación nueva: se apaga lo decorativo · fundido de 120 ms lo que informa de un cambio de capa · estado final lo que entrega un dato · conserva lo que informa tiempo. Criterios: 2.2.2 (pausar, parar u ocultar lo que se mueve solo >5 s), 2.3.1 (≤3 destellos/s), 2.3.3 (animación por interacción: AAA, adoptado por el DS vía prefers-reduced-motion). Toda animación fuera de CSS lleva guarda JS matchMedia propia (F-36); las guiadas por scroll se apagan con display:none (F-37).

# Pieza (catálogo V04) Conducta bajo reduce Guarda WCAG Veredicto
1 Hero: entrada del panel (opacity + translateY 8 px, 240 ms) se apaga (no existe) @media (prefers-reduced-motion: no-preference) home.css:56-59 2.3.3 PASS
2 Hero: cambio de lámina (swap [hidden], 0 ms) estado final (igual) — (home.js:30-66) 2.2.2 (manual, AC-24) PASS
3 Tiles T01-T05 caja (sombra, borde, translateY −2 px) se apaga transition: none; sin translate 2.3.3 PASS
4 Tiles T01-T05 foto (scale 1.04→1.09, 450 ms) se apaga (se queda en 1.04) CSS 2.3.3 PASS
5 Drawer / panel — entrada (340 ms) fundido 120 ms sin desplazamiento steren.css:772-776 2.3.3 PASS
6 Drawer / panel — salida (200 ms) fundido 120 ms; temporizador 0 steren.js:53,79-82 2.3.3 PASS
7 Velo (scrim) del panel fundido 120 ms steren.css:773 2.3.3 PASS
8 Modal (scale .98→1 + opacity) fundido (interruptor global X-14 / E-5) steren.css:17-20 2.3.3 PASS
9 Esqueleto de imagen (pulso 1.4 s) estado final: entra en 1 ms tras 150 ms, sin pulso steren.css:145-149 2.2.2 (carga, exento) · 2.3.1 (0.7 Hz) PASS
10 Luz de progreso (animation-timeline: scroll) se apaga: display:none + JS no registra steren.css:577; steren.js:518-520 2.2.2 (la mueve el scroll) · 2.3.3 PASS
11 Onda de encabezado (stroke-dashoffset, 500 ms) se apaga (no existe) no-preference steren.css:157-162 2.3.3 PASS
12 Morph ATC (check-onda, 200 ms) estado final: aparece sin pop interruptor global 2.3.3 PASS
13 Onda-loader (opacity .3↔1, 1.1 s ∞) estado final: animation: none; opacity: 1 steren.css:205 2.2.2 (espera, exento) · 2.3.1 PASS
14 countUp SterenCard (600 ms) estado final por input; se apaga por IO (no se registra) home.js:76,98 2.2.2 (≤2 s) · 2.3.3 PASS
15 Carrusel compartido (scrollLeft smooth) estado final: behavior: 'auto' steren.js:537-555 2.3.3 PASS
16 Visor PDP (scrollTo smooth) estado final: auto pdp.js:397 2.3.3 PASS
17 Tile de galería PDP (scale 1.03) se apaga transition: none pdp.css:151-154 2.3.3 PASS
18 Galería en tarjeta (dots, flechas) se apaga transition: none cards.css:54,68,78-79 2.3.3 PASS
19 Aviso (toast): entrada/salida + reloj 15 000 ms pausable fundido 150 ms sin transform; conserva el reloj (informa tiempo) steren.css:280-302 2.2.2 (pausable) · 2.3.3 WARNING: reloj bajo reduce → DEV-19 (L-29)
20 CTA pegajoso PDP (translateY 105→0 %) fundido (interruptor global) cards.css:270 2.3.3 PASS
21 Autocompletado (opacity + translateY −5 px) se apaga: animation: none steren.css:620-622 2.3.3 PASS
22 .st-circ (flechas, volver arriba) se apaga transition: none steren.css:340-342 2.3.3 PASS
23 Coreografía del carrito (≈1 s, lavado cian) se apaga (todo) cap.25 — no leído en código 2.2.2 (≈1 s) · 2.3.1 (lavado ≤1/s) WARNING: verificar en código
24 Fuga de tachado / «Ahorra» (max-height + opacity) interruptor global cap.23 — no leído en código; max-height es WARNING de F-33 2.3.3 WARNING: verificar en código
25 Fuegos patrios (62 partículas, ≤2.2 s, una vez) se apaga: JS matchMedia → return antes del lienzo + .pt-fuegos { display: none } patrio-fuegos.js arranca(); patrio.css:202-204 2.2.2 (≤2.2 s) · 2.3.1 (1.5/s) PASS
26 Documento (scroll-behavior: smooth) estado final: auto steren.css:15-18 2.3.3 PASS

Fuera del catálogo: la banda de Terrific (V01) no responde a la media query por sí sola; si el SDK auto-avanza >5 s, el sistema pone el botón «Pausar/ocultar videos» (AC-25 · DEV-G14) y el resto se verifica en calidad2 (L-18). Un video pedido por el usuario sigue reproduciéndose bajo reduce (gesto explícito, F-32); lo que no anima es la facade (sin zoom ni fundido >120 ms).

Video accesible

Componente Facade y póster Subtítulos y alternativa title y nombre accesible Teclado y foco Autoplay y reduce Estado hoy
P05 video de producto (Vimeo/YouTube en la galería) <button aria-label> real sobre póster; 0 iframe antes del clic (F-02); póster = fotograma real 16:9 ≥1280×720 vía oEmbed (cron); _x1 único fallback (WARNING, 377/378) CC es-MX si hay voz (AC-30; 378 videos: verificar en calidad2); mudo → title descriptivo (AC-31) + ficha aria-label="Reproducir video: {título}"; iframe title hoy genérico «Video del producto» (F-21) → descriptivo tile-botón enfocable; Esc/←/→/Home/End y retorno de foco (pdp.js:595-613); el iframe/<video> nace dentro del <button> (pdp.js:335-340): anidamiento inválido controls nativos; autoplay solo tras el clic; sin_cookies = 1 recomendado (dnt/nocookie); un solo reproductor vivo (F-03); alto reservado (F-04) WARNING (póster _x1, title genérico, DEV-G7)
V02 reels «Así se usa» (9:16) como P05 con póster real 1080×1920; «4+ miniaturas reales o no existen» CC por reel (AC-30); title por reel «Reproducir video: {título}» como P05; visor con aspect-ratio del proveedor (F-22) sin autoplay; sin preview animado bajo reduce hueco (apagado)
V03 institucional (Vimeo 871912462, Nosotros) facade obligatoria: póster 1782×1002 (fotograma real, ≤150 KB) + play ≥44 px + duración visible; fallback 401/403 = póster + «Ver en Vimeo» (F-30) CC en Vimeo (verificar en calidad2) + transcripción plegable en HTML etiquetada como alternativa; audiodescripción si narra lo que el texto no dice (1.2.5) iframe title="Video institucional de Steren" (hoy master_steren (2160p)) Enter en la facade → foco al reproductor; controles de Vimeo por teclado tras la carga iframe eager hoy; player.vimeo.com en la CSP; facade sin zoom ni fundido >120 ms bajo reduce (F-32) FAIL (AC-32) → DEV-11
V01 banda Terrific (SDK) póster, geometría y previews: verificar en calidad2 (local2 da 403) CC del proveedor: verificar en calidad2 iframe title del SDK en español: obtener checklist AC-34: Tab a play/pausa/siguiente, Esc cierra, sin trampa preview mudo ≤3 s = WARNING (F-01); >5 s sin pausa → botón del sistema (DEV-G14); muted obligatorio obtener (L-18)

Texto quemado en video: solo subtítulos (F-07); nada de precio, oferta, %, CTA ni legales. GIF animado = video no autorizado: toda imagen subida tiene exactamente 1 fotograma (F-08); el video hero (V05) no está autorizado (L-17). DEV: al activar la facade del PDP, sustituir el <button> por un contenedor y mover el foco al reproductor, aria-label con título (DEV-G7, T-14 de G).

Ejemplos GOOD/BAD a dibujar

# Ejemplo Qué mostrar Qué anotar
1 Alt del hero BAD ×3: alt="Vacaciones MX 2026" · alt="" · alt="{titulo}" con la lectura del SR («gráfico», «Tu hogar más inteligente empieza con un foco» ×2); GOOD: «Foco inteligente Steren encendido en una sala con muros de color, controlado desde un celular» precio, vigencia y CTA en HTML al lado; 40-125 caracteres; validador AC-02
2 Panel sobre arte claro vs oscuro el mismo panel sobre arte blanco y negro; cuentagotas sobre kicker (4.35 / 5.80), precio (grande, ✓ ambos), h2 (10.79 / 14.37) umbral 4.5; salida L-01: velo 96 % + franja L* 40-60
3 Dots tres chips: scrim 30 % sobre arte blanco (1.86 ✗) · scrim 60 % (4.12 ✓) · dot de doble trazo sobre blanco y negro (≥3 en uno de los bordes) estado activo/inactivo también ≥3 (hoy 2.03 vs 1.91); DEV-02
4 Anillo de foco sobre foto flecha del hero enfocada sobre arte gris medio: ring #006B9E (1.48 ✗) vs ring-media doble (blanco 3.95 ✓); sobre arte blanco: ring blanco solo (1.00 ✗) vs doble (#006B9E 5.84 ✓) ENM-01; siempre un trazo ≥3
5 Cintillo y fundido corte vertical de un tile con escena de pie oscuro: línea del 46 % (máscara) y del 54 % (92 %); primer renglón en la zona 20-32 % con su ratio (1.9 ✗) vs fundido dentro del padding (12.6 ✓); segundo panel: packshot sobre blanco = sin riesgo DEV-05; certificación con arte negro (AC-13)
6 Texto rasterizado slider de producción 1920×500 con «$995», legales y «20 % OFF» dentro del JPG (trabajo/produccion-actual/*.jpg) con la salida de tesseract al lado (FAIL) vs arte limpio + panel HTML (tesseract vacío, PASS) excepción: el logotipo de Hot Sale dentro del arte sí puede
7 Facade de video BAD: <div class="play" onclick> sobre el gris «VIDEO» sin CC; GOOD: <button aria-label="Reproducir video: Cómo instalar el contacto inteligente"> sobre la foto real, play 48 navy .70, botón CC visible en el player «el iframe nace al clic y el foco entra al reproductor»
8 Zoom 200 % hero a 1280 con 150 %: título de 3 líneas recortado por el borde superior del slide (FAIL) vs 2 líneas ≤60 caracteres (PASS); tile sm a 390 con «MOVILIDAD (TECNOLOGÍA…» (WARNING) vs etiqueta corta «Movilidad» presupuestos AC-44 / AC-45
9 Un foco por tile tile con 3 enlaces anidados (foto, nombre, tile) y 3 paradas de Tab (BAD) vs tile-cover aria-hidden + nombre estirado + chips (1+3 paradas, anillo alrededor del nombre sobre el cintillo) AC-38
10 Superficies navy y .on-navy panel de banda de categoría enfocado con ring claro (2.33, invisible) vs ring-inverse blanco (13.60) DEV-04: .hero-copy, .hero-sys, .catband-head, .mtile--banner, .ts-hero

Checklist de accesibilidad

Bloqueante = un FAIL impide publicar la pieza o encender el slot. Técnica según la leyenda del inicio (axe · CG · TEC · SR · OCR · REC · DOM).

# Ítem Técnica PASS WARNING FAIL Bloq.
Q-AC-01 Toda <img> del componente tiene atributo alt axe, DOM 100 % — falta 1 Sí
Q-AC-02 Alt del arte de campaña: plantilla, 40-125, ≠ título, sin precio/%/CTA/archivo DOM + validador cumple = título (deuda de campo) vacío / campaña / precio Sí
Q-AC-03 Alt humano describe rol + acción + lugar y no repite el pie SR ✓ adjetivos vacíos repite el pie o alt="" sin pie Sí
Q-AC-04 Imagen en tile con enlace único → alt="" y nombre accesible = categoría axe link-name, SR 1 lectura — lectura doble / 2 tab-stops Sí
Q-AC-05 Packshot: alt="" + nombre adyacente, o alt = nombre (PDP/OG) DOM ✓ — alt="" huérfano Sí
Q-AC-06 Tomas secundarias con label de toma («Vista N de M: toma») DOM, muestreo 20 PDP ≥80 % 50-80 % <50 % No
Q-AC-07 Iconos, onda y ph-slot fuera del árbol (aria-hidden) axe, SR 0 «gráfico» — ≥1 Sí
Q-AC-08 Texto sobre media solo dentro del velo del sistema DOM/CSS ✓ — texto sobre foto desnuda o degradado propio Sí
Q-AC-09 Contraste del texto sobre media medido en 5 puntos + extremos, 3 vistas CG ≥4.5 / ≥3 grande 4.5-5.0 <4.5 / <3 Sí
Q-AC-10 Certificación con arte de prueba blanco y negro CG ambos pasan — uno falla Sí (una vez por componente)
Q-AC-11 Kicker del panel ≥4.5 (velo 96 % + arte L* 40-60) · precio cian ≥3 (grande) CG ✓ — cian 12 px <4.5 Sí
Q-AC-12 Primer renglón del cintillo en zona ≥92 % (arte negro) CG ≥4.5 3-4.5 <3 Sí para T03/T04
Q-AC-13 Dots: aro y relleno ≥3:1 contra el chip sobre arte blanco y negro; estado distinguible CG ≥3 — <3 Sí
Q-AC-14 Flechas y play ≥3:1 por glifo o relleno sobre arte blanco y negro CG ≥3 — <3 Sí
Q-AC-15 OCR del arte vacío (salvo logotipos y escaneo de archivo) OCR + visual vacío ≤3 palabras accidentales precio/%/vigencia/CTA/legal Sí
Q-AC-16 Precio vivo del SKU, vigencia visible, CTA <a>/<button> con destino y texto único DOM ✓ CTA genérico precio tecleado / sin vigencia Sí
Q-AC-17 Sin autoplay en carrusel; nada se mueve >5 s sin pausa/ocultar REC 30 s, TEC 0 movimiento tercero con botón de ocultar movimiento >5 s sin control Sí
Q-AC-18 Emulando prefers-reduced-motion: reduce, nada se mueve salvo video pedido REC 10 s por página ✓ tercero sin respuesta animación residual Sí
Q-AC-19 Fuegos ≤2 s, una vez, ≤3 destellos/s, aria-hidden, apagados con reduce REC ✓ — >5 s o >3/s Sí
Q-AC-20 Video: 0 iframe antes del clic; 0 audio sin acción DOM, oído ✓ — autoplay sonoro Sí
Q-AC-21 Video con voz: CC activable; mudo: title descriptivo player ✓ título = nombre del producto sin CC Sí
Q-AC-22 Institucional: title en español, facade, transcripción o AD DOM, página ✓ AD ausente con texto etiquetado title interno / eager sin alternativa Sí
Q-AC-23 Tras activar el facade, Tab recorre los controles del reproductor; Esc devuelve el foco TEC, SR ✓ — foco perdido Sí
Q-AC-24 Focus ring visible ≥3:1 en cada control sobre media o navy (arte blanco y negro) TEC + CG ✓ — <3 Sí
Q-AC-25 Un foco por tile; chips como paradas propias TEC (contar) 1+N — ≥2 al mismo destino Sí
Q-AC-26 Carrusel: roledescription, láminas group «N de M», aria-live polite, flechas y dots nombrados, ocultas con [hidden] axe, SR ✓ sin group/live flechas <div> / tab-stops en láminas ocultas Sí (FAIL)
Q-AC-27 Swipe con alternativa (dots/flechas) y disparo en pointerup TEC móvil ✓ — solo swipe Sí
Q-AC-28 scroll-padding top/bottom cubre header pegado (+ picado) y barra de compra TEC visible parcialmente tapado oculto No (WARNING) / Sí (FAIL)
Q-AC-29 Viewport sin bloqueo de zoom DOM ✓ — user-scalable=no Sí
Q-AC-30 320 px: sin scroll horizontal; hero móvil sin arte recortado ni recuadro gris captura 320 ✓ recuadro gris scroll horizontal Sí (FAIL)
Q-AC-31 Panel del hero completo a 100/150/200 % (1280) y 150 % (1024); h2 ≤60 caracteres captura ✓ 61-75 recorte Sí
Q-AC-32 Nombres de tile sin elipsis a 390/320 y 200 % captura ✓ 1 tile héroe o ≥2 No
Q-AC-33 Targets: hero/dots/flechas/visor/play ≥44; swatches y chips ≥24 getBoundingClientRect ≥44 24-43 <24 sin equivalente Sí (FAIL)
Q-AC-34 og:image:alt presente en PDP; categoría con og:image + alt DOM ✓ — ausente No
Q-AC-35 Ningún nombre accesible (alt, aria-label, title) en inglés DOM grep 0 — ≥1 Sí
Q-AC-36 Tercero (Terrific) pasa Q-AC-17…21, 23, 24 y 33 en calidad2; lo que no, en la declaración de accesibilidad sesión manual ✓ declarado trampa de foco / autoplay sonoro Sí

Deudas de desarrollo derivadas

Ninguna es de diseño de arte: todas son código o contenido. Cuando coinciden con el backlog del Lead se citan con su DEV-nn / ENM-nn; el detalle vive en el capítulo 11.

# Deuda Regla Lead Tamaño
DEV-G1 Campo alt propio en industrias_tema/home_hero_n con validador de AC-02 (hoy alt = titulo) AC-02 DEV-14 (alt / vigencia / campaign_id del hero, L-24) S
DEV-G2 .on-navy en .hero-copy, .hero-sys, .catband-head, .mtile--banner, .ts-hero (+ lint: toda clase con background: navy exige .on-navy) AC-36 DEV-04 (L-04) XS
DEV-G3 Token --st-focus-ring-media (doble trazo) aplicado a .hero-ctrl y .hero-dots button AC-37 ENM-01 (L-04) XS (enmienda DS §12.6)
DEV-G4 Dots del hero: scrim n900 30 → 60 % (home.css:101) + franja de dots del A01 con L* ≤ 60 AC-19 DEV-02 (L-02) XS
DEV-G5 Cintillo: fundido de máscara/gradiente dentro del padding-top (home.css, catalogo.css); ≥50 % del alto cuando la media es escena AC-18 DEV-05 (L-05) S
— Velo del panel del hero navy 92 → 96 % (home.css:49) AC-14 DEV-01 (L-01) XS
— .badge-new: texto sobre primary-text o navy (steren.css:479) matriz DEV-03 (L-03) XS
DEV-G6 Láminas del hero: role="group" aria-roledescription="lámina" aria-label="N de M" + aria-live="polite" en el contenedor AC-39 nuevo (cap.11) XS
DEV-G7 Facade de video del PDP: al activar, sustituir el <button> por contenedor y mover el foco al reproductor; aria-label con título; iframe title descriptivo AC-08, AC-33 nuevo (cap.11); pósters reales vía DEV-12 (L-20) S
DEV-G8 Nosotros: facade + póster 1782×1002, iframe title="Video institucional de Steren", player.vimeo.com en CSP, párrafo «alternativa en video» + transcripción plegable AC-32 DEV-11 (L-19); CSP hermana de DEV-18 (L-29) S
DEV-G9 Galería: label de la toma como aria-label / alt (tile y visor), fallback «Vista N de M» AC-07 nuevo (cap.11) + contenido (set canónico en catálogo) S
DEV-G10 og:image:alt en PDP; og:image + alt en categoría AC-06 junto con DEV-09 (OG 1200×630 derivada, L-15) XS
DEV-G11 Bolitas de la galería en tarjeta: hit-area 24×24 por padding AC-47 nuevo (cap.11) XS
DEV-G12 scroll-padding-bottom = alto de la barra de compra pegada (PDP móvil) AC-41 nuevo (cap.11) XS
DEV-G13 Etiqueta corta de categoría consumida por los tiles (sin elipsis a 320) AC-45 nuevo (cap.11) + contenido XS + contenido
DEV-G14 Banda Terrific: botón «Pausar/ocultar videos» si el SDK no ofrece pausa; verificación AC-34 en calidad2 AC-25, AC-34 junto con DEV-10 (alto de Terrific, L-18) S (depende del proveedor)
DEV-19 Reloj del aviso bajo prefers-reduced-motion (debe conservarse: informa tiempo) AC-26 DEV-19 (L-29) XS

09Performance y entrega

Tesis. El contrato de rendimiento del DS §12 (PF-1.1) no se toca: LCP ≤2,0 s (gate 1,8) · CLS ≤0,05 (gate 0,03) · above-the-fold ≤1 MB (gate 700 KB) · requests iniciales ≤50 (gate 30) · imagen LCP ≤200 KB (gate 150 en AVIF) · terceros ≤150 KB (objetivo 100) · DOM ≤1 800 nodos. Se vigila con un gate en CI (PF-5, PF-19) que hoy no existe: ni Lighthouse CI ni budgets.json en el repo del tema, sin RUM (H §1). Mientras tanto rige la regla más simple del sistema: el peso que subes es el peso que descarga el cliente (E-22) — no hay resize, compresión ni variantes fuera de Helper\Image (inventario §3).

El coste dominante hoy no es el hero (no hay arte): son los originales 1200×1200 servidos en cajas de 40-194 px [medido H §1.1, curl sobre local2 el 2026-09-10]. Home: 3,5 MB de <img> únicos — 2,7 MB en 27 tarjetas de carrusel (32-328 KB, mediana ≈92) y 0,8 MB en 4 tiles sm del mosaico con el small_image del insignia — contra un gate ATF total de 700 KB. PDP: 1,07 MB, de los que 0,94 MB son un thumb de 40 px en la buybar (471 KB) y 6 relacionados en original. El resize nativo ya existe (category_page_grid 480², JPEG q80: p50 13 / p90 27 KB): usarlo en los emisores que lo esquivan recorta −84 % en el home y −88 % en el PDP sin pipeline nuevo (deuda P0).

Convención de cifras (de H): [medido] · [estimado] (método indicado) · [fuente]. Lo que no consta: «medir en calidad2».

Reglas PF-01 … PF-22

Carga y prioridad

ID Regla Marca · fuente Verificación PASS · WARNING · FAIL Aplica
PF-01 Ninguna imagen carga sin alto reservado: width/height (el reset img{height:auto} no los anula: el navegador deriva aspect-ratio de los atributos), aspect-ratio en CSS o fila de alto fijo. [E] DS §7 · E-13 · X-11 DevTools → Rendering → Layout Shift Regions durante la carga; Lighthouse unsized-images; consola: [...document.images].filter(i=>!i.getAttribute('width')&&getComputedStyle(i).aspectRatio==='auto'&&!i.closest('[style*="grid-auto-rows"],.dept-mosaic,.cat-mosaic')) = vacío PASS CLS ≤0,03 y lista vacía · WARNING CLS 0,03-0,05 · FAIL CLS >0,05 o una imagen sin reserva todos
PF-02 Una sola imagen prioritaria por plantilla: la LCP. fetchpriority="high", eager y declarada en <head> con <link rel="preload" as="image"> (con imagesrcset / imagesizes / media cuando hay candidatos). Nada más lleva high. LCP por plantilla: home = hero lámina 1 (sin arte → tile héroe del mosaico) · landing = tile héroe · PLP = 1.ª tarjeta · PDP = tile 0 · Tech Services = retrato · Nosotros = póster del video. [E] DS §7 · C6 · E-04 · X-15 · [D] imagenes-smoke.php («solo una high») extendido a todas las plantillas grep -c 'fetchpriority="high"' en el HTML servido = 1; grep -c 'rel="preload" as="image"' ≥1; Lighthouse LCP element = el nodo previsto; Network: prioridad Highest, iniciador preload PASS 1 y coincide · WARNING 1 sin preload (estado actual) · FAIL 0, >1, o LCP en otro nodo (p. ej. el panel navy) H01 H02 H04 T01 T03 P03 P04 V03
PF-03 Todo lo que no es LCP va loading="lazy" + decoding="async"; la LCP deja decoding por defecto. Excepciones eager: LCP y los 3 logos. [E] DS §7 (lazy) · [H] decoding (hoy solo en mosaico, landing y cb-art) <img> sin loading fuera de LCP y logos = 0; sin decoding="async" = 0 PASS 0 / 0 · WARNING 1-2 decoding ausentes · FAIL cualquier eager fuera de la lista todos
PF-04 El presupuesto de carga inicial incluye lo «lazy» que cae a <1 250 px del viewport (4G; <2 500 px en 3G): Chrome lo descarga sin scroll. Se mide sin interacción hasta networkidle. [H] · [fuente] web.dev «Browser-level image lazy loading» DevTools Network filtro Img, sin scroll, hasta networkidle → bytes y requests (tabla §Presupuesto) PASS ≤ carga inicial de la página · WARNING ≤ +20 % · FAIL > +20 % B02 T01 T02 P03 y todo carrusel del primer pliegue extendido
PF-05 Talla servida = pintada × DPR: sobre-resolución ≤2,2×, sub-resolución ≥1,25× en DPR2. «Pintada» = la imagen dentro de object-fit: contain y su padding, no la caja (el 1:1 del tile héroe se pinta a 318 px, no a 688). [D] 11 §1.4 (2×) + manual §5 consola: [...document.images].map(i=>({src:i.currentSrc.split('/').pop(),r:+(i.naturalWidth/(i.clientWidth*devicePixelRatio)).toFixed(2)})) PASS 1,25-2,2 · WARNING 2,2-3 o 1,0-1,25 · FAIL >3 (hoy carrusel 6,2× a DPR1, chips 10,5×) o <1,0 (hoy 129/131 categorías a 400² → 0,63× en DPR2) todos los raster
PF-06 srcset + sizes derivados del CSS real (tabla §Estrategia); <picture> solo para dirección de arte (4:1 / 4:3 del hero). El formato lo negocia el borde por Accept (PF-3.2), no <source type>. [E] DS §7 · PF-3.2 · 22 §8 Lighthouse uses-responsive-images ahorro = 0 KB; cada sizes vs clientWidth real ±10 % en 390 / 768 / 1024 / 1440 / 1920 PASS ahorro <10 KB por página · WARNING <50 KB · FAIL ≥50 KB o sizes ausente con srcset todos los raster
PF-07 Presupuesto de imagen above-the-fold por plantilla (tabla §Presupuesto): gate ATF 700 KB − CSS 50 − JS 120 − doc 60 − fuente 45 − terceros ≤100 → ≈300 KB para imagen en el home; menos en el resto. [D] PF-1.1 WebPageTest (Moto G4, 4G) bytes in hasta LCP; o DevTools Network hasta load sin scroll, filtro Img, ordenado por Time PASS ≤ presupuesto · WARNING ≤ +20 % · FAIL > +20 % por plantilla
PF-08 Requests de imagen ATF: ≤6 home · ≤5 landing y PDP · ≤6 PLP (4 tarjetas + logos). srcset y <picture> no añaden requests. [D] PF-1.1 (el gate global ≤30 choca con los carruseles dentro del umbral lazy: H T-6 → contar hasta load, no hasta networkidle) DevTools Network filtro Img hasta LCP PASS ≤ cifra · WARNING +2 · FAIL +3 o más por plantilla
PF-09 Ninguna plantilla sirve catalog/product/… sin /cache/: todo small_image pasa por Helper\Image con la talla del slot. Tallas nuevas en view.xml: mini_80 (buybar, chips) · mini_120 (#juntos) · mini_160 (sugeridos, tira del visor) · moneda_240 (panel de banda) · category_page_grid 480 para toda tarjeta 1:1. [D] view.xml + inv. §0.4; hoy incumplido en 8 emisores grep -c 'media/catalog/product/[^c]' HTML = 0 PASS 0 · FAIL ≥1 B02, P03, P04 (buybar, #rel, #juntos), T01/T02 (insignia), sugeridos del carrito
PF-10 landing_image se sirve por talla: 80 (chip 38 px) · 160 / 320 (tile sm, moneda) · 640 (tile héroe); el 800×800 es máster y no se sirve. [H] requiere desarrollo: Magento no redimensiona categorías URL con talla o /cache/; PF-05 ≤2,2× PASS · FAIL un chip de 38 px descarga ≥400² T01 T02 T05 T08
PF-11 LCP lab móvil ≤1,8 s (gate) / ≤2,0 s (contrato), con el elemento previsto (PF-02) y su imagen ≤150 / ≤200 KB transferidos. En <768 hoy la LCP del home es el panel navy (0 px de campaña); con el campo A02 (DEV-07) pasa a la imagen. [E] DS §12 · PF-1.1 · [medido] inv. S1 Lighthouse móvil throttled, 3 corridas, mediana (npx @lhci/cli autorun, PF-5.1) → LCP element; Network → bytes del recurso LCP; new PerformanceObserver(l=>console.log(l.getEntries())).observe({type:'largest-contentful-paint',buffered:true}) → element, url, size PASS ≤1,8 s y ≤150 KB · WARNING 1,8-2,0 s o 150-200 KB con nota de campaña (DS §7) · FAIL >2,0 s, >200 KB o LCP en otro nodo por plantilla
PF-12 CLS ≤0,03 (gate) / ≤0,05 (contrato), medido también con Terrific activa y con una imagen rota. El tema reserva por construcción (hero clamp, filas fijas, aspect-ratio) → PASS [medido]; el único hueco es la banda Terrific: contenedor de alto 0 y retirada a 8 s. [E] DS §12 · [medido] H §0 · inv. S8 Lighthouse CLS; new PerformanceObserver(l=>l.getEntries().filter(e=>!e.hadRecentInput)).observe({type:'layout-shift',buffered:true}) durante carga, hover, apertura de paneles y a los 8 s; Layout Shift Regions PASS ≤0,03 · WARNING 0,03-0,05 · FAIL >0,05 todos

Entrega, terceros, caché y CI

ID Regla Marca · fuente Verificación PASS · WARNING · FAIL Aplica
PF-13 Video: nunca un reproductor antes del gesto. Póster real (nunca el gris «VIDEO»), <video preload="none" playsinline> o iframe creado al clic; alto reservado por aspect-ratio; el reproductor muere al salir del cuadro; sin autoplay con sonido. [E] D-13 · galería PDP (facade) · Terrific (retirada) · [H] Nosotros (hoy iframe eager) Network filtros Media + Doc (iframe) antes de cualquier clic = 0 requests de player; document.querySelectorAll('iframe[src*="vimeo"],iframe[src*="youtube"],video[preload]:not([preload="none"])').length = 0 al cargar PASS 0 · FAIL ≥1 P05 V01 V02 V03
PF-14 SDK de terceros de video: defer, carga por proximidad (IntersectionObserver a <1 viewport, no en <head> de todas las páginas), CSP en allowlist, retirada sin salto, dentro de los ≤150 KB de terceros (objetivo ≤100). Terrific: 10,6 KB gz [medido] + iframe Firebase + pósters/mp4 «3-sec» (medir en prod, WebPageTest). [E] PF-1.1 terceros · inv. S8 · csp_whitelist.xml · [H] proximidad y reserva Network: terrific-sdk.js no aparece antes de acercarse a la banda; CLS con la banda activa (calidad2) ≤0,03; consola sin violaciones CSP PASS · WARNING SDK en <head> con defer (estado actual) · FAIL bloqueante, CLS >0,05 atribuible, o violación CSP V01 (A13)
PF-15 Datos móviles: <video preload="none">; ningún iframe ni media antes del gesto; pósters loading="lazy" fuera del pliegue; con Save-Data: on o prefers-reduced-data no se carga ni el SDK de Terrific ni previews (hoy el SDK carga siempre con defer). [E] pdp.js reproductorHtml (preload="none") · ES-6 (lazy) · [H] Save-Data (F-53) Network en carga fría a 390 con Save-Data: on: 0 bytes de video/SDK; sin Save-Data: solo terrific-sdk.js PASS · WARNING SDK con Save-Data (estado actual) · FAIL media antes del gesto V01 V02 V03 P05
PF-16 Alto reservado también para lo que llega tarde: .hv-embed / .pv-embed con min-height por breakpoint medido en calidad2 (L-18, DEV-10) y la facade V03 con caja 16:9 antes del iframe; si el tercero no responde, la caja se retira solo fuera del viewport (CLS cuenta lo visible). [E] F-04 · F-15 · F-55 · [H] el min-height (ninguna fuente lo tiene) getBoundingClientRect().height del contenedor a 0 / 3 / 8 / 10 s; Layout Instability con hadRecentInput=false PASS constante o retirada fuera de vista · WARNING alto reservado ±8 px · FAIL salto visible (hoy .hv-embed sin CSS) V01 V03
PF-17 Caché de raster: 1 año + immutable, con nombre único por versión. Cache-Control: public, max-age=31536000, immutable en /media/ y /static/; prohibido ?v=; prohibido sobrescribir un archivo conservando el nombre (SFTP, «reemplazar»): un cambio de contenido es un archivo nuevo con fecha nueva (AS-13). [E] nginx.conf.sample (/static/ ya lo hace) · [H] immutable en /media/ y regla de nombre (H-17) curl -sI URL → cache-control: public, max-age=31536000, immutable; auditoría: ningún archivo de pub/media/industrias ni catalog/category con mtime posterior a su primera publicación PASS · WARNING sin immutable (estado actual de /media/) · FAIL max-age <1 año, no-store, o archivo reescrito todos
PF-18 Pipeline en el borde: la URL de la variante lleva talla y format=auto; Vary: Accept la emite el borde; Varnish sigue en pass para /media/; la purga es por nombre (no hace falta purgar: el nombre cambia). Candidato PF-3: Cloudflare Image Transformations (/cdn-cgi/image/width=480,quality=70,format=auto/media/catalog/product/…); plan B: imgproxy detrás de nginx con proxy_cache clave = URL + Accept normalizado (avif / webp / jpeg). [E] PF-3.1 · VCL de Magento (pass) · calidad-construccion.md (Cloudflare proxied) AS-11; curl -sI a la variante → Vary: Accept y cf-cache-status: HIT (o X-Cache: HIT en imgproxy) en la 2.ª petición PASS · FAIL la variante no cachea, o el origen convierte por petición sin caché todos (OBJETIVO)
PF-19 Lint y gate en CI. Falla el PR si: <img> sin loading o decoding fuera de la LCP/logos; <img> sin alto reservado (PF-01); >1 fetchpriority="high"; src de catalog/product sin /cache/; iframe de video sin facade. Falla la subida (backend del campo) si dimensiones ≠ spec, peso > techo, formato fuera de lista, nombre fuera de regex (AS-13). Lighthouse CI con budgets.json image ≤ presupuesto de la página. [E] PF-5.3 · THEME/dev/imagenes-smoke.php · [H] validaciones de subida (H-21) el lint corre en cada PR; npx @lhci/cli autorun (PF-5.1) con budgets.json PASS / FAIL binario todos
PF-20 Logotipo y favicon vectoriales: logo SVG inline (≤3 KB gz) en header, footer, checkout y 503; favicon <link rel="icon" type="image/svg+xml"> + favicon.ico 32 px + apple-touch-icon 180 PNG + manifest 192/512; nunca PNG del logo a DPR3 (hoy 0,79×). [H] H-22 · A15 pendiente del cliente (11 §2 A7) · [medido] inv. S19 (favicon = el de Magento, md5 643d3106…) curl -sI /favicon.ico → md5 ≠ 643d3106…; ratio PF-05 del logo en DPR3 ≥1 PASS · WARNING PNG ≥2× · FAIL favicon de Magento o logo <1× en algún DPR A15 D01 H03
PF-21 Coste DOM de la entrega, declarado: <picture> + 1 <source media> + <img> = 3 nodos por lámina (hoy 2); 2 <link rel="preload"> en <head>; srcset / sizes = 0 nodos; contenedor reservado de Terrific = 0 nodos nuevos. Home: +4 láminas × 1 + 2 = +6 nodos sobre el conteo de A15. [D] 33 §A15 (H-23) conteo DOM PF-5.3 ≤1 800 PASS ≤ declarado · WARNING +10 % · FAIL más H01 H02 V01
PF-22 Los estados de carga no mueven nada: esqueleto que pulsa color (nunca geometría), ph-slot mudo con la misma caja que el arte, imagen fallida con fondo bg-subtle en la misma caja. [E] inv. §0.1-0.2 · E-19 (H-24) @keyframes st-skl-* solo background-color; Layout Shift Regions vacío al fallar una imagen (src roto a propósito) PASS · FAIL cualquier @keyframes con height / width / transform en esqueletos todos

Estrategia de entrega por componente

Los sizes salen del CSS del tema (.wrap 1440 / gutter 16-24, breakpoints 768 / 1024 / 1280, tracks de cards.css, paddings de home.css / catalogo.css / pdp.css; medidas del inventario §1). Formato: negociado por Accept (AS-11); <picture> solo en H01/H02. ✓ = ya construido · deuda = pendiente (§Deuda).

Componente loading / prioridad / preload OBJETIVO: <picture> · srcset · sizes (px reales del CSS) HOY (sin pipeline) Reserva de alto (CLS) Formato HOY → OBJETIVO Estado
H01 hero (lámina 1) eager + high + 2 preloads en <head> (desktop media="(min-width:768px)", móvil (max-width:767px)); láminas 2-4 lazy sin high (van [hidden]: lazy no las descarga) <picture> con <source media="(max-width:767px)"> 780w · 1170w · 1440w y <img> 1440w · 2160w · 2880w, sizes="100vw", width="1440" height="360" <source media> con el A02 en src simple + <img> A01; quitar picture{display:none} de home.css:110 cuando exista el campo; width/height 1440×360 (hoy 1200×360, H T-13) .hero-slide{height:clamp(240px,28vw,360px)} [E]; <768 aspect-ratio:4/3 [E] JPG q65-75 → AVIF high ✓ · preload, <source>, campo A02: deuda (DEV-07)
H02 tiendas (A08) lámina fija: lazy (no es lámina 1) = H01 = H01 = H01 = H01 hueco (sin campo)
H03 SterenCard — sin raster (SVG onda currentColor) igual aspect-ratio:1.586 [E] — ✓
H04 retrato de servicio (A10) eager + high (LCP de Tech Services) srcset 420w · 840w, sizes="(min-width:1024px) 420px, (min-width:768px) 300px, calc(100vw - 32px)" [D] inv. S16 tecnico.webp 518×626 (1,23×: sub-resolución) width/height 518×626 [E] WebP → AVIF high ✓ · talla: deuda
B02 panel (moneda, A05) lazy + async srcset 120w · 240w, sizes="(min-width:1024px) 84px, 52px", width/height 108 Helper\Image talla moneda_240 (PF-09) .cb-art 108 / 76 px fijos [E] JPG q80 → AVIF original 1200² (134 KB por 2): deuda P0
B02 tarjetas de carrusel (= P03) lazy + async — entran en la carga inicial si la banda queda a <1 250 px (PF-04) srcset 240w · 320w · 480w, sizes="(min-width:768px) 194px, calc(40vw - 18px)" category_page_grid 480² (PF-09) aspect-ratio:1/1 + width/height 480 [E] JPG q80 → AVIF original (p50 111 KB, hasta 2 MB): deuda P0
B05 patrimonio (A11) lazy + async srcset 640w · 1250w, sizes="(min-width:1440px) 622px, (min-width:768px) 45vw, calc(100vw - 32px)" JPG 1250×417 (campo pendiente) aspect-ratio:3/1 [E] JPG q75 → AVIF hueco (sin campo)
B06 Aprende (A07) lazy + async srcset 420w · 840w, sizes="(min-width:1440px) 413px, (min-width:768px) 30vw, calc(100vw - 72px)" JPG 840×473 (campo pendiente) aspect-ratio:16/9 [E] JPG q78 → AVIF hueco (sin campo)
T01 tile héroe home (A03) eager; high solo cuando el hero no tiene arte (bandera del ViewModel, PF-02) srcset 320w · 480w · 640w, sizes="(min-width:1024px) 318px, 239px" resize de categoría 640 (PF-10); insignia por Helper\Image 480 filas 208 / 172 px [E] JPG q80 → AVIF eager ✓ · high: deuda
T02 tile sm home lazy + async (2 de 4 caen en el viewport de 1440: cuentan en ATF) srcset 160w · 320w, sizes="(min-width:1024px) 127px, 90px" resize 320 filas fijas [E] JPG q80 → AVIF original 1200² del insignia (813 KB): deuda P0
T03 tile héroe landing (A04) eager + high (LCP de la landing) + preload a sangre (cover, L-11): srcset 700w · 1050w · 1400w, sizes="(min-width:1440px) 688px, (min-width:1024px) calc(50vw - 32px), calc(100vw - 32px)" JPG 1400×880 (campo pendiente); packshot provisional → como T01 fila 2×208+16 [E]; añadir width="1400" height="880" (hoy sin atributos) JPG q70-78 → AVIF eager ✓ · high, width/height, cover: deuda (DEV-08)
T04 tile med (escena) lazy + async srcset 350w · 700w, sizes="(min-width:1024px) 289px, 42vw" (cover) idem fila 208 [E] idem hueco
T05 tile 1×1 landing (A03) lazy + async srcset 160w · 320w, sizes="(min-width:1024px) 129px, 160px" resize 320 (PF-10) fila fija [E] JPG q80 → AVIF original: deuda
T06 tipo · T07 7:8 — sin raster · spec sin slot (X-6): si se aprueba, 350w · 700w, AVIF ≤120 KB — — — ✓ · —
T08 chips / lista densa (A03) lazy + async chip: srcset 80w · 120w, sizes="38px", width/height 38; lista densa: 240w · 320w, sizes="124px" resize 80 / 240 (PF-10) — hoy un 400² (o 2500²) por chip de 38 px moneda 40 px fija [E] JPG q80 → AVIF original: deuda P0
P03 tarjeta PLP 4 primeras eager, 1.ª high [E] + preload de la 1.ª; resto lazy; content-visibility:auto [E] srcset 240w · 320w · 480w, sizes="(min-width:1280px) 233px, (min-width:768px) 203px, calc(50vw - 42px)"; búsqueda (.plp-layout--solo): (min-width:1280px) 304px, … ya 480² [E]; añadir decoding="async" aspect-ratio:1/1 + 480×480 [E] JPG q80 → AVIF ✓ salvo preload, srcset, async
P04 galería PDP tile 0 high + preload; 1-2 eager; ≥3 lazy [E]; async en todos menos tile 0 héroe: srcset 600w · 900w · 1200w, sizes="(min-width:1440px) 605px, (min-width:1280px) 534px, (min-width:1024px) 392px, (min-width:768px) 488px, calc(100vw - 32px)"; tiles: sizes="(min-width:1440px) 299px, (min-width:1024px) 192px, (min-width:768px) 240px, calc(100vw - 32px)"; visor 1600 al abrir; tira 160 product_page_image_medium 1000 → 1200 (2× de 605) + tallas 600 / 900 en view.xml aspect-ratio:1/1 + 600×600 [E] JPG q80 → AVIF high ✓ · buybar (471 KB por 40 px) y #rel en original: deuda P0
P05 video de producto póster lazy salvo si es tile 0; iframe / <video preload="none"> al clic [E] facade: póster A12 (srcset 640w · 1280w) + botón póster = foto del producto mientras Vimeo no dé póster (cron, DEV-12) tile 1:1 / 16:9 en visor [E] JPG q75 → AVIF facade ✓ · póster real: deuda
M03 avatar (A09) lazy + async srcset 128w · 192w, sizes="64px" JPG 192² (campo pendiente) 64 px círculo [E] JPG q80 → AVIF hueco (iniciales «St»)
V01 Terrific defer [E]; SDK inyectado por IntersectionObserver a <1 viewport; retirada a 8 s solo fuera del viewport (H T-5) contenedor .hv-embed{min-height:<medido en calidad2>} (o aspect-ratio si el SDK es proporcional) antes del iframe igual (medir en calidad2, L-18) min-height [H] — hoy 0 — deuda (DEV-10)
V02 reels apagado hasta tener pósters reales [E]; si se enciende: pósters lazy, <video preload="none" playsinline poster> póster 9:16 srcset 540w · 1080w; 720×1280 H.264 ≤2,5 Mbps ≤20 s (≤6 MB) [H], sin autoplay — aspect-ratio:9/16 JPG ≤120 KB → AVIF hueco (DEV-12)
V03 Nosotros póster eager + high (bajo la cabecera → LCP); iframe al clic con loading="lazy" y title facade: póster 1782×1002 (srcset 900w · 1600w, sizes="(min-width:1024px) 891px, calc(100vw - 32px)") + play ≥44 px; youtube-nocookie a csp_whitelist.xml (DEV-18) igual (póster JPG) aspect-ratio:16/9 [E] JPG ≤150 KB → AVIF iframe eager sin póster: deuda (DEV-11)
S01 OG no carga en la página og:image JPG 1200×630 + og:image:width/height/type/alt producto ✓ (1200² cache); categoría y home sin og:image — JPG (AS-11) deuda (DEV-09)

Snippet de referencia del hero (OBJETIVO, con borde format=auto; las URLs de talla las construye el ViewModel). HOY, sin pipeline: los dos <link> con href simple y el mismo media, y el <source> con el A02 en srcset sin descriptores.

html <link rel="preload" as="image" fetchpriority="high" media="(min-width:768px)" imagesrcset="/img/w=1440/{hero} 1440w, /img/w=2160/{hero} 2160w, /img/w=2880/{hero} 2880w" imagesizes="100vw"> <link rel="preload" as="image" fetchpriority="high" media="(max-width:767px)" imagesrcset="/img/w=780/{movil} 780w, /img/w=1170/{movil} 1170w, /img/w=1440/{movil} 1440w" imagesizes="100vw"> … <picture> <source media="(max-width:767px)" sizes="100vw" srcset="/img/w=780/{movil} 780w, /img/w=1170/{movil} 1170w, /img/w=1440/{movil} 1440w"> <img src="/img/w=1440/{hero}" sizes="100vw" width="1440" height="360" alt="{alt}" fetchpriority="high" srcset="/img/w=1440/{hero} 1440w, /img/w=2160/{hero} 2160w, /img/w=2880/{hero} 2880w"> </picture>

Candidato elegido por dispositivo (con sizes="100vw"): 390@2× → 780w · 390@3× → 1170w · 767@2× → 1440w móvil · 768@2× y 1024@2× → 2160w · 1440@1× → 1440w · 1440@2× → 2880w · 1920@1× → 2160w · 1920@2× → 2880w (1,5×: se acepta por presupuesto, H T-10).

Presupuesto por página

HOY = [medido] sobre local2 (sin arte de hero subido; «+hero» = lo que añadiría un arte al techo del manual). Carga inicial = ATF + lazy a <1 250 px, sin scroll (PF-04). OBJETIVO = tallas de la tabla anterior en AVIF con los pesos medidos (H §1.1). Red equivalente: throughput de Lighthouse «Slow 4G» 1,6 Mbps ≈ 200 KB/s [estimado]. El tiempo LCP no está medido en ninguna fuente: se mide en calidad2 (gate 1,8 s / contrato 2,0 s); aquí va el elemento LCP previsto.

Página · viewport ATF HOY (img) Carga inicial HOY Req. img inicial HOY Red equivalente HOY [estimado] ATF OBJETIVO Carga inicial OBJETIVO Presupuesto (PF-07 / PF-08) LCP esperado
Home 1440×900 507 KB (logo 4 + héroe tile 21 + 2 tiles sm en viewport 482) · +hero ≤200 (contrato, L-31) → ≈707 ≈2,4 MB (+ tiles sm 3-4 330, panel 80, banda 1 686, favoritos 825; con la banda Terrific delante, favoritos queda fuera → ≈1,6 MB) ≈24 ATF ≈2,5 s · inicial ≈12 s ≈175 KB (hero 150 + logo SVG 2 + héroe 640w ≤12 + 2 sm 320w ≤10) ≈250 KB ATF ≤300 KB · inicial ≤400 KB · ≤6 req. ATF hero lámina 1; sin arte: tile héroe del mosaico (hoy sin high)
Home 390×844 25 KB (logo + héroe tile que asoma) — 0 px de campaña visibles ≈1,6 MB (4 tiles sm 813 + panel 80 + banda 1 686) ≈14 inicial ≈8 s ≈170 KB (A02 150 + tile 480w ≤5 + logo) ≈215 KB (+ sm 160/320w ≈15, panel 1, banda 1 ≈28) ATF ≤200 KB · inicial ≤300 KB hoy el panel navy (texto); con A02, la imagen
Landing /cables 1440 83 KB (héroe 19 + med 23 + 2 sm 40) 350 KB (18 categorías 400² + 12 chips 235) — si se repueblan a 800²: ≈810 KB (18 × ≈45) 20 inicial ≈1,8 s (≈4 s a 800²) 25-135 KB (héroe packshot 640w ≤15 o escena 1400w ≤120; med ≤40; 2 sm ≤12) ≈50-190 KB (chips 12 × ≤1 KB) ATF ≤200 KB · inicial ≤250 KB · ≤5 req. ATF tile héroe (hoy eager sin high)
PLP 1440 49 KB (4 eager; LCP 16 KB) ≈214 KB (≈18 tarjetas dentro del umbral × 11,9 KB) · total página 891 KB / 75 img ≈20 inicial ≈1,1 s ≈16 KB (4 × ≈4) ≈72 KB · total ≈300 KB ATF ≤60 KB · inicial ≤120 KB · ≤6 req. 1.ª tarjeta (high ✓)
PLP 390 2 tarjetas eager ≈25 KB ≈120 KB (≈10 tarjetas) ≈12 inicial ≈0,6 s ≈8 KB (320w) ≈35 KB idem 1.ª tarjeta
PDP 1440 117 KB (3 tiles medium; LCP 35 KB) + buybar 471 KB (thumb de 40 px, lazy pero en el DOM del primer pliegue) 1 066 KB (+ #rel 466 si cae en el umbral) 13 inicial ≈5,3 s (buybar sola ≈2,4 s) ≈40 KB (3 × 1200w ≤25, típico ≈10) + buybar 80w ≈1,5 ≈65 KB (+ #rel 6 × ≈4) ATF ≤100 KB · inicial ≤150 KB · ≤5 req. tile 0 de la galería (high ✓)

«Lazy» no es «no se descarga» (PF-04): Chrome carga en la carga inicial toda imagen loading="lazy" a <1 250 px del viewport en 4G (2 500 en 3G) [fuente web.dev]. En el home eso incluye el mosaico completo y la primera banda de categoría: ≈1,6 MB en móvil sin ver un solo píxel de campaña, ≈2,4 MB en desktop [estimado sobre medido]. Por eso el presupuesto tiene dos cifras (ATF y carga inicial) y por eso el orden del home —cerrado por Tona (E-20)— no se mueve: se arregla el peso de lo que cae dentro del umbral, no su posición.

Impacto cuantificado de los huecos (sobre las cifras medidas de H §1.1):

# Hueco HOY Con el resize nativo (480², q80) Con AVIF + srcset
1 Carruseles con originales (S10): 27 tarjetas 2 726 KB ≈430 KB (−84 %, −2,3 MB; ≈11 s de red liberados) ≈120 KB (−96 %)
2 Mosaico sm con el small_image del insignia (4 tiles) 813 KB ≈64 KB ≈16 KB (320w, −98 %)
3 Panel de banda (moneda de 84 px útiles, ×2) 134 KB ≈8 KB (240²) ≈2 KB
4 PDP buybar (40 px) · #rel (6 originales) 471 KB · 466 KB ≈1,5 KB (80², −99,7 %) · ≈96 KB — · ≈24 KB
5 Chips de landing (12 × 38 px) 235 KB ≈12 KB (80², −95 %) — repoblar a 800² sin resize de categoría sube la landing a ≈810 KB y el chip a 21× de sobre-resolución ≈12 × ≤1 KB
6 Hero 0 KB (sin arte) un arte al techo del manual (300 KB) lleva la ATF del home de ≈0,5 a ≈0,8 MB y la LCP a 1,5× el contrato AVIF 60-189 KB [estimado]
7 Móvil el arte de campaña no se ve (0 px) pero bajan ≈1,6 MB de imágenes que no son campaña ≈0,2 MB ≈0,2 MB

Video

Pieza Regla Marca · fuente Cifra / verificación
Facade universal Póster (<img> con srcset, techo de tile ≤120 KB contrato; objetivo A12 ≤60 AVIF / ≤80 JPG) + botón ≥44 px; el reproductor nace al gesto y muere al salir del cuadro; uno vivo por página [E] galería PDP (pdp.js facade, pararVideos) · D-13 · F-02 / F-03 Network antes del clic: 0 requests a player.vimeo.com / youtube.com / *.mp4; .video-vivo ≤1
<video> propio preload="none" playsinline controls, sin autoplay, poster obligatorio; H.264 High 720p (reels 720×1280) ≤2,5 Mbps, ≤20 s → ≤6 MB [H]; muted solo si además hay controles [E] preload="none" en PDP · [H] bitrate / duración (sin dato en fuentes: validar con la muestra de Vimeo cuando exista el cron) ffprobe -show_format: bit_rate ≤2 500 000, duration ≤20
Iframes (Vimeo / YouTube) Solo on-click; loading="lazy"; title descriptivo obligatorio (no «master_steren (2160p)»); allow="autoplay; encrypted-media; picture-in-picture; fullscreen"; nocookie / dnt según industrias_video/general/sin_cookies [E] PDP · [H] Nosotros (L-19) iframe[src*="player.vimeo"] = 0 al cargar Nosotros; iframe[title] legible
Lite-embed sin JS propio (alternativa) <iframe srcdoc="…<a href='https://player.vimeo.com/video/ID?autoplay=1'><img src='poster'><span>▶</span></a>" src="https://player.vimeo.com/video/ID" loading="lazy" title>: el navegador pinta solo el póster del srcdoc y al clic navega al player [H] patrón estándar, 0 KB de JS mismo criterio que la facade
Vimeo restringido por dominio 401 fuera de steren.com.mx [medido]: el coste del player (JS/CSS/HLS) solo se mide en producción con WebPageTest; hasta entonces cuenta como «tercero pendiente». La facade muestra póster + «Ver en Vimeo», nunca un rectángulo negro (F-30) [fuente] calidad2 §2 · F-30 WebPageTest en prod: bytes de vimeocdn.com tras el clic
Pósters con techo Un póster por video a 2× de su mayor render: V02 1080×1920 · P05 1280×720 · V03 1782×1002; HOY V02 ≤120 · V03 ≤150 · P05 ≤80 KB; fotograma real, _x1 como único fallback (WARNING) [D] F-52 · F-05 · L-20 (AS-10) identify; wc -c; md5 ≠ 5e30bff8…
Póster de Vimeo = null (377/378) Hasta el cron oEmbed (DEV-12), el póster es la foto del producto [E]; el gris «VIDEO» de 36,5 KB jamás se sirve [E] inv. S11 · expediente 2.11 placeholders servidos = 0
Terrific (V01) SDK 31,5 KB raw / 10,6 KB gz, defer ✓, max-age=3600 (se revalida cada hora) [medido]; iframe de terrific-live-polls.web.app, pósters/mp4 «3-sec» de live-cdn.terrific.live [fuente calidad2 §1]. Reglas: (a) min-height del contenedor medido en calidad2 antes de inyectar (DEV-10); (b) SDK inyectado por proximidad, no en <head> global; (c) retirada a 8 s [E] sin salto visible: solo fuera del viewport (H T-5, F-15); (d) preconnect no (está bajo el pliegue); (e) CSP: mantener csp_whitelist.xml (script / connect / img / media / frame) y verificar en enforce; (f) previews del SDK solo mudos, ≤3 s, sin bucle sonoro, y quietos bajo reduced-motion (F-13: medir en calidad2) [E] inv. S8 · [H] a-b-d-f CLS con la banda activa ≤0,03; terrific-sdk.js ausente en Network hasta acercarse; consola sin Refused to…; capturas a 0 / 1 / 3 / 6 s
Ratios por breakpoint (390 / 768 / 1024 / 1440) V03 16:9 → 358×201 / 736×414 / 891×501 / 891×501 · P05 póster 1:1 en tile (358 / 240 / 192 / 299) y reproductor 16:9 ≤960 en el visor (9:16 según F-22) · V02 póster 9:16 → 156×277 (<768) / 220×391 (≥768) · V01 lo fija el SDK (a medir) [E] marca.css:37-39 · pdp.css:57,141 · cards.css:172-181 (F-51) medir cajas en los 4 anchos; PASS ±2 px
Save-Data / datos móviles Con Save-Data: on o prefers-reduced-data: ni SDK ni previews (hoy el SDK carga siempre); <video preload="none">; pósters lazy fuera del pliegue (PF-15) [E] pdp.js · [H] F-53 Network a 390 con Save-Data: 0 bytes de video/SDK
Alto reservado para lo tardío La banda Terrific y la facade V03 tienen caja antes del iframe; si el tercero no responde, la caja se retira solo fuera del viewport (PF-16) [E] F-04 · F-55 getBoundingClientRect().height a 0 / 3 / 8 / 10 s: constante
Video hero / motion banner / cinemagraph (V05) No autorizado (L-17); GIF animado = video (AS-09). Única ruta: enmienda §12.6 con las 11 condiciones de F-45 (sin pista de audio; bucle ≤6 s; ≤400 KB H.264/AV1 1440×360; póster = primer fotograma; pausa ≥44 px; reduced-motion → solo póster; LCP = el póster <img> ≤150 KB, <video> tras load con preload="none"; CLS 0 en la misma caja; sin texto; solo lámina 1, nunca <768 ni con Save-Data; enmienda simultánea a C6 + DS §7 + T2) [E] C6 catálogo cerrado · DS §7 · [H] F-45 solo PASS 11/11; cualquier FAIL = sigue no autorizado

CDN y caché

Capa HOY [medido / fuente] OBJETIVO Marca
nginx /media/* Cache-Control: max-age=31536000 + Cache-Control: public (dos cabeceras: add_header … "public" + expires +1y), Expires, ETag, Last-Modified; sin immutable Cache-Control: public, max-age=31536000, immutable (una cabecera) — solo con la regla de nombre único (PF-17 / AS-13); ETag se mantiene [E] / [H]
nginx /static/version…/* public, max-age=31536000, immutable ✓ (versión en la ruta) igual [E]
Varnish (calidad / prod; VCL generado por Magento 2.4.9) req.url ~ "^/(pub/)?(media\|static)/" → return (pass): Varnish no cachea imágenes; las sirve nginx; beresp.grace = 3d y TTL solo aplican al HTML Se deja en pass (PF-6.2: VCL nuevo desde 2.4.9, no copiar el de 2.4.3). Cachear media en Varnish solo tendría sentido sin CDN; con Cloudflare delante es redundante [E] VCL
Cloudflare (calidad / prod, proxied) Caché de borde por extensión (jpg / png / gif / svg / ico / webp / avif / css / js / woff2) respetando el Cache-Control del origen; Rocket Loader fichado como rompedor del checkout (1) Image Transformations /cdn-cgi/image/width=480,quality=70,format=auto/media/catalog/product/… (PF-3 candidato primario): negocia AVIF / WebP / JPEG por Accept, redimensiona bajo demanda y cachea la variante; el origen conserva los másters JPEG/PNG; (2) regla de caché: 1 año para /media/* y /cdn-cgi/image/*; (3) no activar Polish / WebP si se usa (1) (doble conversión); (4) purga innecesaria si el nombre cambia — cache:flush de Magento purga Varnish, no Cloudflare [E] PF-3.1 · [H] 2-4
format=auto y <picture> No aplica (no hay negociación) Con format=auto en el borde no hace falta <picture> por formato (H T-8): <source type> sobra, −1 nodo por lámina, y el <link rel="preload" imagesrcset> usa una sola familia de URL. <picture> queda solo para dirección de arte (4:1 / 4:3 del hero). Si el pipeline fuera estático (archivos .avif / .webp generados), <source type> volvería a ser necesario [E] PF-3.2 · [H]
Plan B (sin Cloudflare Images) — imgproxy en contenedor delante de pub/media: nginx location /img/ con proxy_pass a imgproxy, proxy_cache con clave $uri$is_args$args$accept_norm, add_header Vary Accept, y map $http_accept $accept_norm → avif / webp / jpeg (3 variantes por URL, no una por Accept literal) [E] PF-3.1 plan B · [H] detalle
Vary / Accept No aplica Vary: Accept en toda variante negociada; Cloudflare lo gestiona internamente en (1); en imgproxy lo emite nginx. Sin Vary, un proxy intermedio serviría AVIF a un Safari viejo [H]
og:image JPG 1200×1200 (producto) JPG siempre aunque todo lo demás sea AVIF: los rastreadores de WhatsApp / Meta / Slack no garantizan AVIF ni WebP (H T-9, AS-11); 1200×630 derivada (DEV-09) [H]
Versionado catalog/product/cache/<hash>/… cambia de hash al cambiar view.xml ✓; catalog/category/*.jpg e industrias/home/*.jpg no llevan versión: Magento añade _1, _2 si el nombre ya existe, pero un reemplazo por SFTP con el mismo nombre queda un año en caché Fecha en el nombre (AS-13) = versión; prohibido ?v= (Cloudflare y los navegadores tratan la query como clave distinta, pero Magento no la escribe y un editor no la mantendrá) [E] / [H]
Compresión de transporte gzip para texto (nginx sample); imágenes no se comprimen (ya lo están) igual; brotli solo texto (PF-6.3) [E]

Deuda de desarrollo priorizada

H §3.6 mapeada al backlog del Lead (00-decisiones-lead §D). Orden del Lead; donde H proponía otra prioridad se indica entre paréntesis. «inv.» = deuda del inventario técnico que el Lead lista sin número: el cap.11 la numera. Impacto sobre las cifras de H §1.1 / §3.3.

Prioridad Deuda Impacto (LCP / CLS / bytes) Esfuerzo DEV
P0 Resize de small_image en los emisores que esquivan Helper\Image: pcard-carrusel.phtml, rel.phtml, carrusel-categoria.phtml (panel), buybar.phtml, juntos.phtml, cart/sugeridos.phtml, HomeDepartamentos.php (insignia) + ids mini_80 / 120 / 160, moneda_240 en view.xml (PF-09) bytes: home −2,3 MB (−84 %), PDP −0,9 MB (−88 %) [estimado sobre medido]; LCP: libera el ancho de banda que hoy compite con la LCP en el primer pliegue extendido; CLS: 0 ½-1 día (7 emisores, 1 view.xml) inv. (resize small_image en carruseles / moneda / buybar)
P0 Resize de landing_image (servicio propio con Magento\Framework\Image + caché en catalog/category/cache/<talla>/; Magento no lo trae) antes de repoblar las 131 fotos a 800² (PF-10) bytes: landing −0,2 MB hoy; evita +0,45 MB y 21× de sobre-resolución en chips al repoblar; bloquea la recomendación #2 del manual (13 fotos de departamento + 131 a 800²) medio: 1-2 días inv. (resize landing_image en chips)
P1 Hero completo: campo imagen_movil (A02) + alt propio + max_file_size + validación de dimensiones (2880×720 / 1440×1080) y peso (≤200 KB) en Backend\Image; <source media> real; 2 <link rel="preload"> desde head.additional; quitar picture{display:none}; width/height 1440×360 (H T-13) LCP: en móvil el arte pasa de 0 px a LCP real; en desktop el preload adelanta la petición frente a 221 KB de HTML (gate doc 60 KB: hoy el hero llega tarde en el parser); bytes: evita un JPG de varios MB en la LCP (hoy sin límite, hueco 22) medio: 1-2 días DEV-07 (+ DEV-06 colapso móvil, DEV-14 alt / vigencia / campaign_id) (H: P0)
P1 fetchpriority="high" condicional en el tile héroe del mosaico (sin hero con arte) y en el tile héroe de landing; width/height en los tiles de landing (PF-02 / PF-01) LCP de landing y de home-sin-arte hoy sin prioridad; CLS ya 0 por filas fijas (los atributos cuestan 0 bytes y aportan aspect-ratio, H T-7) trivial: horas inv. (fetchpriority del héroe de mosaico y landing; width/height en tiles de landing) (H: P0)
P1 Campos de carga faltantes: A07 (Aprende), A08 («600+ tiendas»), A09 (avatar), A11 (patrimonio), A04 ×2 por categoría (landing_scene_hero / _med), og_image de categoría y de home; con validación de peso / dimensiones / nombre en cada uno (PF-19) bytes: 0 hasta que exista arte; con arte y sin validación, el peso lo decide quien sube medio: 2-3 días inv. (campos A3 / A4 / A6 / A12 / avatar) + DEV-09 (OG 1200×630)
P1 Uploader de categoría: retirar webp de allowedExtensions del cliente (category_form.xml:33) mientras el servidor no lo acepte; con pipeline en el borde no hace falta aceptar WebP (H T-11) evita subidas que mueren en el POST trivial inv. (uploader WebP) (H: P2)
P1 Terrific: min-height de .hv-embed / .pv-embed medido en calidad2; SDK por proximidad; retirada solo fuera del viewport; --st-fs-h inexistente (catalogo.css:745) (PF-14 / PF-16) CLS de la banda (hoy no medido: contenedor de alto 0 → salto al llegar el iframe y otro a los 8 s) bajo: ½ día DEV-10
P1 Nosotros: facade con póster real 1782×1002 + play + transcripción; www.youtube-nocookie.com en csp_whitelist.xml (player.vimeo.com ya lo cubre Magento_ProductVideo) (PF-13) evita cargar el player de Vimeo al abrir la página (coste a medir en prod) y un bloqueo CSP en enforce bajo: ½ día DEV-11 + DEV-18
P1 Cron oEmbed de Vimeo (pósters reales para P05 y V02) póster real ≤80 KB en vez de la foto medium 1000²; desbloquea V02 (4+ pósters) — (cron) DEV-12
P1 Lint CI (PF-19): extender THEME/dev/imagenes-smoke.php + Lighthouse CI con budgets.json image por página (PF-5) impide la regresión de todo lo anterior bajo: 1 día sin DEV asignado — cap.11
P2 srcset / sizes en P03 / P04 / T01-T05 / T08 / B02 (tallas 240 / 320 / 480, 600 / 900 / 1200, 80 / 120 / 160 / 320 / 640) (PF-06) bytes: −50 % adicional en DPR1 y móvil (320w vs 480w); PDP héroe pasa de 1,65× a 2× (1200) medio: 2-3 días (después de los P0) inv. (srcset en todos los slots) (H: P1)
P2 Pipeline en el borde (PF-3: Cloudflare Image Transformations o imgproxy) + constructor de URL en un ViewModel único (PF-18, AS-11) bytes: −60-75 % sobre JPEG q80 (480²: 11-22 → 3-9 KB; 1200²: 38-86 → 5-25 KB [medido]); hero 2880×720 de 176-321 KB (JPG q70) a 60-189 (AVIF q55) [estimado] infra (decisión E1) + 2-3 días de plantillas sin DEV asignado — cap.11 (H: P1)
P2 decoding="async" global: hero (láminas 2-4), PLP, carruseles, PDP (tiles ≥1) (PF-03) evita que la decodificación de 27 originales bloquee el hilo principal trivial: horas sin DEV asignado — cap.11 (H: P0)
P2 Favicon propio (Magento_Theme/web/favicon.ico + SVG + touch + manifest) y logo SVG inline (A15) (PF-20) nitidez a DPR3 (hoy 0,79×); −2 KB; identidad (hoy el favicon de Magento) bajo (al llegar el SVG del cliente) inv. (favicon y logo SVG) (H: P1)
P2 product_page_image_medium 1000 → 1200 y tallas 600 / 900; retirar category_page_list (sin consumidor) héroe de galería a 2× real; una caché huérfana menos trivial (con el srcset) —
P2 tecnico.webp 518×626 → 840×1050 + srcset 420w / 840w (con la re-sesión sobre navy, L-14) sub-resolución 0,62× en DPR2 en la LCP de Tech Services trivial CONT-01 (re-sesión)
P2 og:image en home / CMS (S01) + og:image:width/height/alt en PDP compartir con imagen; 0 bytes en página bajo DEV-09

Checklist de performance

Ítems de página y entrega (H §6, F §6). L = Lighthouse móvil throttled (3 corridas, mediana) · W = WebPageTest (Moto G4 / 4G) · D = DevTools (Network Img / Media / Doc; Performance → Layout Shifts; Rendering → Layout Shift Regions) · C = consola (snippets PF-01 / PF-05 / PF-11 / PF-12) · G = grep sobre el HTML servido · K = curl -sI. Los ítems de archivo viven en el cap.07 (Q-AS).

# Ítem Umbral / criterio PASS WARNING FAIL Herr. Bloquea publicar
Q-PF-01 Elemento LCP = el previsto por plantilla (PF-02) Lighthouse LCP element coincide — otro nodo (panel navy, texto, tile equivocado) L Sí
Q-PF-02 LCP lab móvil gate 1,8 s / contrato 2,0 s ≤1,8 1,8-2,0 >2,0 L Sí (>2,0)
Q-PF-03 Imagen LCP: bytes transferidos ≤150 / ≤200 KB ≤150 150-200 con nota de campaña >200 D / W Sí
Q-PF-04 fetchpriority="high" exactamente 1 y en la LCP 1 1 — 0 o >1 G Sí
Q-PF-05 <link rel="preload" as="image"> de la LCP (con media por crop) presente, prioridad Highest sí ausente (estado actual) preload de otra imagen G / D No (WARNING)
Q-PF-06 Resto de raster loading="lazy" + decoding="async" 0 excepciones fuera de LCP / logos 0 1-2 decoding ausentes cualquier eager fuera de lista G Sí (eager)
Q-PF-07 Alto reservado en toda imagen (PF-01) lista vacía + Layout Shift Regions limpio vacío — ≥1 C / D Sí
Q-PF-08 CLS (también con Terrific activa y con una imagen rota) gate 0,03 / contrato 0,05 ≤0,03 0,03-0,05 >0,05 L / D Sí (>0,05)
Q-PF-09 Sobre-resolución (PF-05) natural/(client×DPR) ≤2,2 ≤2,2 2,2-3 >3 C No / Sí si >3 en ATF
Q-PF-10 Sub-resolución en DPR2 ≥1,25 ≥1,25 1,0-1,25 <1,0 C No
Q-PF-11 srcset + sizes correctos (PF-06) uses-responsive-images ahorro <10 KB <50 KB ≥50 KB o sizes ausente L No (OBJETIVO: Sí)
Q-PF-12 Ninguna URL catalog/product/ sin /cache/ (PF-09) 0 0 — ≥1 G Sí (tras la deuda P0)
Q-PF-13 Imagen de categoría servida por talla (PF-10) chip 80 · sm 320 · héroe 640 sí 800 en héroe 400 / 800 / 2500 en chip G / C Sí (tras la deuda P0)
Q-PF-14 Bytes de imagen ATF (tabla §Presupuesto) ≤ presupuesto ≤ ≤ +20 % > +20 % D / W Sí
Q-PF-15 Bytes de imagen en carga inicial sin scroll (PF-04) ≤ presupuesto ≤ ≤ +20 % > +20 % D No (WARNING)
Q-PF-16 Requests de imagen ATF (PF-08) home ≤6 · landing / PDP ≤5 · PLP ≤6 ≤ +2 ≥ +3 D No
Q-PF-17 Lighthouse: modern-image-formats, uses-optimized-images, offscreen-images, unsized-images, prioritize-lcp-image, lcp-lazy-loaded ahorro potencial <50 KB y sin fallos binarios 50-200 KB >200 KB o lcp-lazy-loaded fallido L Sí (binarios)
Q-PF-18 Video: 0 reproductores antes del gesto; póster real; preload="none"; alto reservado (PF-13) 0 requests Media / Doc de player 0 — ≥1, autoplay con sonido o póster gris D / G Sí
Q-PF-19 Terrific: SDK defer, por proximidad, sin CLS, sin violaciones CSP (PF-14) CLS banda ≤0,03; consola limpia sí SDK en <head> (estado actual) bloqueante, CLS >0,05, CSP D / C No / Sí si CSP
Q-PF-20 Terceros de video ≤100 / ≤150 KB (PF-1) bytes hasta load ≤100 ≤150 >150 W Sí (>150)
Q-PF-21 Save-Data: 0 bytes de video / SDK; preload="none" (PF-15) Network a 390 con Save-Data sí SDK con Save-Data (estado actual) media antes del gesto D No (WARNING)
Q-PF-22 Caja de video constante a 0 / 3 / 8 / 10 s; retirada solo fuera de vista (PF-16) getBoundingClientRect().height constante ±8 px salto visible C Sí
Q-PF-23 Cache-Control en /media/ y /static/ (PF-17) 1 año (+ immutable) immutable sin immutable (hoy /media/) <1 año o no-store K No
Q-PF-24 Borde: format=auto sirve AVIF a Accept: image/avif y JPEG sin Accept; Vary: Accept; HIT en 2.ª petición (PF-18) los 3 los 3 HIT ausente JPEG a cliente AVIF o sin Vary K Sí (OBJETIVO)
Q-PF-25 Coste DOM de la entrega ≤ declarado (PF-21) +3 / lámina, +2 head ≤ +10 % > C No
Q-PF-26 Esqueleto / ph-slot / fallo de imagen sin salto (PF-22) Layout Shift Regions limpio con src roto limpio — salto D Sí
Q-PF-27 Logo / favicon vectorial (PF-20) favicon ≠ Magento; logo ≥1× en DPR3 sí PNG ≥2× favicon de Magento o <1× K / C No
Q-PF-28 Lint CI y budgets.json presentes y en verde (PF-19) PR bloqueado ante FAIL verde — sin lint (estado actual) o rojo CI Sí (cuando exista)

Bloquea publicar (resumen): FAIL en Q-PF-01, 02 (>2,0 s), 03, 04, 06 (eager fuera de lista), 07, 08 (>0,05), 12-13 (cuando exista el resize), 14, 17 (binarios), 18, 20 (>150 KB), 22, 24 (en OBJETIVO), 26. Todo WARNING se registra con dueño y fecha en el expediente de la pieza; un WARNING de peso en la LCP (150-200 KB) exige la nota de campaña de DS §7.

10Design QA — checklist PASS / WARNING / FAIL

Herramienta de revisión pieza por pieza. No repite las reglas (03, 04, 06-09): las convierte en casillas con número, herramienta y veredicto. Todo ítem lleva ID Q-…; los bloques de responsive, assets, accesibilidad y performance ya viven en sus capítulos (Q-RS, Q-AS, Q-AC, Q-PF) y aquí solo se remiten.

Cómo se usa

Paso Qué haces Con qué
1 Identifica el componente por ID (H01…S03, capítulo 02) y su ficha (05). Sin ID no hay revisión: es una enmienda (11) tabla de taxonomía · ficha del componente
2 Corre las checklists en este orden: base (toda pieza) → la de su familia (§Checklists por componente) → las de disciplina que apliquen (§Por disciplina) → los bloques referidos (Q-RS / Q-AS / Q-AC / Q-PF) paquete de entrega (§Lo que QA necesita) · capturas en 7 anchos
3 Veredicto con la regla de agregación y acta (§Hoja de veredicto): ítems FAIL y WARNING por ID, ticket, revisor, fecha hoja de veredicto
Veredicto Significado Qué pasa con la pieza
PASS Cumple el umbral de PASS en todos los ítems que le aplican Se publica
WARNING Cumple, pero al menos un ítem cae en la banda WARNING (deuda conocida, tolerancia declarada, dato por medir) Se publica con nota en el expediente y ticket con dueño y fecha
FAIL Al menos un ítem cae en FAIL No se publica. Se regresa con la lista de IDs; se repite la revisión sobre la versión nueva (nombre nuevo, Q-AS-10)

Regla de agregación

  • Cualquier FAIL bloqueante ● = FAIL de la pieza. Un FAIL no bloqueante también es FAIL de la pieza: no hay «FAIL menor»; lo que cambia es que el bloqueante no admite excepción escrita ni revisión de dirección de arte.
  • ≥ 3 WARNING = revisión de dirección de arte antes de publicar (aunque cada uno por separado sea publicable).
  • Ítems bloqueantes ●: texto / precio / legales dentro de la imagen · slot sin alt, sin vigencia o sin asset móvil · asset ausente o con ratio distinto · autoplay o video no autorizado · precio tecleado · contraste < 4.5:1 en texto normal · foto humana sin gafete o generada por IA · peso > contrato. A ellos se suman los que el capítulo 03 ya marca ●: slot inexistente (R-03), urgencia sin fecha o stock (R-07), texto sobre foto desnuda (R-15), sujeto o rostro bajo panel / velo / dots (R-17) y stock, modelo o escenario nórdico (R-24).
  • Los bloques Q-RS / Q-AS / Q-AC / Q-PF conservan su propia columna «Bloquea»: un FAIL marcado «Sí» allí bloquea igual que un ● de aquí.
  • Un umbral marcado [H] sin calibrar (11 §1.3) se puntúa WARNING hasta las tres primeras entregas reales; después, lo que diga su tabla.

Checklist base (toda pieza)

Se corre completa sobre cualquier pieza con media (imagen, escena, foto humana, póster, OG). Herramientas: identify / exiftool / stat (archivo) · PIL (color) · tesseract (OCR) · overlay de la ficha (zonas) · cuentagotas + calculadora WCAG (contraste) · DevTools / Lighthouse (DOM, LCP, CLS) · axe + lector de pantalla (a11y) · captura (evidencia; nunca «medido con timer»).

ID Ítem Cómo se verifica (herramienta) PASS WARNING FAIL ●
Q-00-01 Componente autorizado: el ID existe en la taxonomía (02) y su ficha (05) tabla 02: ID y estado ID existe; estado construido, o hueco con campo hueco sin campo (se produce el arte; se publica cuando exista el campo, DEV-20) ID inexistente, T07 (spec sin slot) o V05 (no autorizado) ● R-03
Q-00-02 Aspect ratio exacto del slot (tabla A del 07) identify -format "%wx%h"; ratio ±0.5 % exacto — distinto (el sistema estira o deja bandas) ●
Q-00-03 Entrega a 2× del render máximo a 1440 identify contra la tabla A; escalera AS-04 ≥ 2× 1.5-2× (o solo a 1920 / 2560) < 1.5× o upscale —
Q-00-04 Safe area / subject box respetada en todas las ventanas de recorte overlay de las ventanas de la ficha (06) sobre el arte ×1 sujeto entero dentro 7/7 roza ≤ 2 % en un solo ancho fuera o cortado en cualquier ancho —
Q-00-05 Focal point declarado y correcto (fracciones del lienzo, sobre el sujeto) ficha del asset; overlay: H01 (72 %, 50 %) · A02 (50 %, 45 %) · A04 (50 %, 40 %) · packshot = centro focal + subject box declarados y sobre el sujeto solo focal, sin subject box ninguno, o focal fuera del sujeto —
Q-00-06 Móvil validado con el asset alterno (nunca desktop encogido ni recortado) captura a 390 y 360 con A02 real por <source media="(max-width:767px)">; tiles y bandas: el mismo asset compuesto para la intersección de ventanas A02 real / intersección respetada falta el ancho 360 A02 ausente, A01 escalado o recortado ● R-10
Q-00-07 Contraste válido sobre el píxel, no sobre el token cuentagotas 5 puntos + extremos, en 3 vistas (1440 / 768 / 390), con arte de prueba blanco y negro ≥ 4.5:1 texto normal · ≥ 3:1 texto grande y controles 4.5-5.0 en texto normal < 4.5 texto normal · < 3 grande o control ● (< 4.5 texto normal)
Q-00-08 Copy dentro de límites (I-01, L-21) offsetHeight / offsetWidth del campo a 1440 · 1024 · 768 · 390; conteo kicker ≤ 24 · título hero ≤ 60 / 2 líneas · CTA ≤ 18 / 3 palabras · uso de tile ≤ 40 (≤ 60 héroe) · familia ≤ 28 · chip ≤ 14 (landing) / ≤ 20 (home) · banda ≤ 50 · banner ≤ 44 · departamento ≤ 30 · panel ≤ 204 px 1 línea de más solo a 1440 · CTA 19-22 clamp con «…», 3 líneas a ≤ 1024, CTA en 2 líneas —
Q-00-09 CTA legible, único e imperativo (detalle Q-CO-03 / Q-CO-04) contar .btn; primera palabra ∈ {Ver, Explora, Elige, Arma, Compara, Recógelo, Actívala, Suscríbete, Conoce}; getComputedStyle ∈ {#006B9E, #00B2E3} 1 botón · verbo permitido · 44 px · destino PLP filtrado / landing / PDP del SKU infinitivo («Explorar…») · PLP raíz de la familia 2 botones · «Ver más» / «Comprar» / «Clic aquí» · naranja buy · destino / o CMS —
Q-00-10 Asset optimizado (formato y receta HOY) identify (receta AS-02) + exiftool vacío JPG progresivo q65-80 · 4:2:0 · sRGB 8 bits · sin EXIF / XMP; PNG solo con alpha real Q 81-85 · baseline · PNG-8 plano · metadatos sin GPS WebP / AVIF / GIF (el admin los rechaza) · PNG de foto · CMYK / 16 bits · GPS · > 1 fotograma — (no sube)
Q-00-11 Peso dentro del presupuesto (L-31: manda el contrato del DS; los 300 / 250 / 200 KB del manual v1.0 no aplican, DOC-01) stat -c %s sobre el archivo que se sube ≤ objetivo (KB): hero 150 · escena 120 · categoría 60 · archivo y mostrador 60 · retrato 70 · póster 80 · OG 100 ≤ máximo: hero 200 (con nota de campaña, DS §7) · escena 150 · categoría 100 · archivo y mostrador 80 · retrato 120 · póster 120 · OG 200 > máximo ●
Q-00-12 Accesibilidad validada: foco, movimiento, targets axe · Tab · emulación prefers-reduced-motion: reduce · getBoundingClientRect 1 foco por pieza con ring ≥ 3:1 · nada se mueve bajo reduce · controles ≥ 44 (chips ≥ 24) ring inverso ausente sobre navy (DEV-04, deuda conocida) · target 24-43 foco perdido o doble · animación residual · < 24 sin equivalente —
Q-00-13 Cero información crítica dentro del raster (OCR = 0) tesseract sobre el archivo + ojo a 200 % 0 cadenas ajenas (el texto de un objeto físico —empaque, gafete, fachada— no cuenta) ≤ 3 palabras accidentales de fondo (letrero lejano) cualquier título, precio, %, CTA, legal, cupón o logo (incluido el de Steren; única excepción E-4 en la OG) ● R-01
Q-00-14 Crop probado en 7 anchos con el asset real capturas a 360 · 390 · 768 · 1023 · 1440 · 1920 (+ 2560 solo hero) 7/7 falta 1023 o 360 falta cualquier otro —
Q-00-15 Performance validado (LCP / CLS) (detalle Q-PF-01…08) Lighthouse móvil throttled ×3 (mediana) a 390 y 1440, caché fría LCP ≤ 1.8 s · CLS ≤ 0.03 · elemento LCP = el previsto · fetchpriority="high" ×1 LCP 1.8-2.0 · CLS 0.03-0.05 LCP > 2.0 · CLS > 0.05 · imagen LCP lazy — (Q-PF marca «Sí»)
Q-00-16 Vigencia real vigente_desde / vigente_hasta en config; countdown y cintillo coinciden; al día siguiente de hasta la lámina no está en el DOM dos fechas reales, visibles cuando kicker o título nombran campaña solo fecha de fin ausente en campaña · fecha pasada · «solo hoy» sin fecha ● R-02
Q-00-17 alt presente y con plantilla (I-24) validador de plantillas · NVDA / VoiceOver 40-125 caracteres · describe lo que muestra · ≠ título · sin «imagen de», precio ni CTA; alt="" sancionado en tile, tarjeta y moneda con nombre adyacente alt = título (deuda DEV-14) · 126-160 vacío en hero / escena / persona · con precio o CTA · en inglés ● R-39
Q-00-18 El slot no miente grep del HTML servido en producción: Próximamente, pendiente, no disponible, campaña terminada dentro de .hero, .dtile, .mtile = 0; captura a 390 sin arte = mudo (ph-slot--mudo) · vencido = ausente · sin material = sin banda — hueco gris (hero móvil hoy, 390×292), esqueleto o «próximamente» en producción (Q-AC-30 lo puntúa WARNING solo como ítem de reflow; el veredicto de la pieza lo fija R-02 / Q-RS-25) ● R-02
Q-00-19 Nomenclatura L-30 y versión por nombre regex: campañas AAAA-MM_campaña_slot_variante[_SKU].ext · no-campaña {tipo}_{id}_{ratio}.ext; mtime = primera publicación cumple — fuera de regex · ?v= · archivo reescrito con el mismo nombre — (no sube)
Q-00-20 Procedencia y retoque declarados (EXIF + _retoque.csv) exiftool (Make · Model · DateTimeOriginal) sobre el original de cámara; existencia del CSV y de las máscaras PNG 1 bit completo (o «sin retoque» con original entregado) sin EXIF → pedir el original retoque no declarado (FAIL de la tanda completa) — R-27
Q-00-21 10 indicios de IA (AD-38) checklist con recorte al 200 %; C2PA / XMP DigitalSourceType; Software 0 indicios 1 indicio de (2)-(10) → pedir original (1) positivo, ≥ 2 indicios o cualquier generación de nivel 1 ● R-28
Q-00-22 Test de pertenencia «¿es Steren?» (§ al final) hoja de 14 casillas firmada; pregunta 1 con 3 personas ajenas 14/14 12-13 → se corrige y se repite ≤ 11 → se rehace —
Q-00-23 Prueba de 5 segundos de contenido (I-21) 3 personas ajenas · 5 s a 1440 y 5 s a 390 · por escrito: ¿qué vendo? ¿para qué o a quién? ¿qué hago después? ≥ 2/3 aciertan las tres aciertan producto y CTA, no el beneficio alguien no identifica el producto —
Q-00-24 Escala coherente entre vecinos (fila, mosaico, carril) ocupación del producto (bbox / lienzo) en cada tile visible; máx − mín ≤ 0.12 0.12-0.20 > 0.20 («foco enorme, router diminuto») —
Q-00-25 Nada bajo panel / dots / velo / badge / flechas / vigencia overlay de la plantilla de zonas (06) sobre el arte ×1 en los 7 anchos limpio; sujeto termina ≥ 8 px por encima de la reserva del cintillo; overlap panel / producto 0 % detalle fino o contexto bajo el panel o un control sujeto o rostro bajo panel, velo, dots, flecha o badge ● R-17
Q-00-26 Un solo mensaje y precio vivo kicker + título nombran ≤ 2 sustantivos-objeto · 1 .btn · 1 elemento con font-weight: 800 · cambiar el precio en admin + cache:flush → cambia solo · $ / % en campos = 0 1 producto o familia + 1 beneficio + 1 CTA; precio desde sku 2 sustantivos-objeto ≥ 2 mensajes, CTAs o cifras 800 · precio tecleado en un campo o en el arte ● R-06
Q-00-27 Urgencia solo con reloj o inventario real fecha del countdown == vigente_hasta; escasez acompañada del stock del endpoint — — «últimas piezas», «solo hoy» sin fecha, «N personas viendo» ● R-07
Q-00-28 Asset presente en todos los estados y sin movimiento propio <img> desktop y móvil en el DOM · PIL n_frames = 1 · grep setInterval = 0 · 0 iframes antes del gesto estático y presente — asset ausente en un estado · GIF / APNG animado · autoplay · <video>, canvas o iframe en H / B / T / M (V05) ● R-33

Por disciplina

Cada bloque fusiona los ítems de su especialista con los del capítulo correspondiente y quita lo que ya cubre la base. Cuando dos especialistas medían lo mismo con cifras distintas, la fila dice qué decisión del Lead manda (L-01, L-02, L-09, L-10, L-21, L-31) y qué cifra quedó fuera.

Dirección de arte (Q-AD, de B §6.2 y del capítulo 04)

ID Ítem (regla) Herramienta PASS WARNING FAIL ●
Q-AD-01 Composición: un sujeto y una dirección de lectura (AD-01). H01: sujeto en x 58-84 % · y 22-78 %, focal (72 %, 50 %); A04: x 25-75 % · y 12-62 %, focal (50 %, 40 %) (L-10: intersección de C y E); A02: centro 0.50 ±0.06, sujeto al 55-80 % del ancho; horizonte ±2° overlay de tercios + caja; bbox por umbral 245; nivel dentro de la caja y ±2° invade ≤ 10 % del tercio izquierdo · 2-4° bajo el panel, fuera de la caja o cortado por el borde —
Q-AD-02 Producto entero y apoyado o en uso (AD-02): ningún lado del bbox toca el borde; sombra propia sobre una superficie visible bbox; distancia a bordes ≥ 5 % en 1:1 entero y apoyado dentro de la tolerancia del 5 % · cable por 2 bordes cortado, flotando o bajo el panel —
Q-AD-03 Escala (AD-03): A03 al 85-90 % del lienzo (L-09; C pedía 60-85 %, B 85-95 %) · hero: alto del producto 25-56 % · escena y 4:3: 35-60 % del alto · mostrador: persona 60-90 % bbox / lienzo; hoja de tiles a escala real A03 86-92 % · hero 25-56 % · tiles ratio bbox ≤ 1.5 A03 80-86 % · hero 20-25 % · tiles 1.5-2 A03 < 80 % o > 92 % (hover ×1.09) · hero < 20 % o > 56 % · tiles > 2 o ilegible a 122 px —
Q-AD-04 Aire sin detalle (AD-04) mapa de bordes (Sobel) ≥ 25 % (4:1 y 1.6:1, incluida la franja de 104 px) · ≥ 40 % (4:3) · packshot 5 % · mostrador ≥ 10 % 15-25 % < 15 % o cintillo lleno borde a borde —
Q-AD-05 Cantidad de elementos (AD-05; absorbe D-Q19): 1 sujeto + 1 contexto + 1 apoyo; productos ≤ 2 en hero / escena, 1 en categoría; logos e iconos ajenos = 0 plantilla sujeto / contexto / apoyo; conteo; OCR ≤ 3 elementos, 1 sujeto principal 4 elementos · 3 sujetos ≥ 5, 0 sujetos, ≥ 4 sujetos o cualquier logo ajeno —
Q-AD-06 Jerarquía — blur test (AD-06) gaussiano 20 px; 3 miradas el producto gana 3/3 2/3 el fondo o una cifra gana —
Q-AD-07 Iluminación (AD-07): una fuente suave 30-60°; packshot banda del 8 % ≥ 246; escena R ≥ B + 8 y ≤ B + 30; persona clave:relleno ≤ 3:1, gafete R − B + 5..+ 20; retrato 2:1-3:1 con catchlights histograma del bbox; dirección de la sombra; cuentagotas 5×5 especulares < 1 %, p98 ≤ 250 especular 1-3 % · sombra lateral pura · clave:relleno 3-4:1 · R − B + 20..+ 30 luz de color, contraluz, quemados > 3 %, G > R, flash frontal —
Q-AD-08 Profundidad y borde (AD-08 / AD-17) conteo de planos; zoom 200 % ≤ 2 planos; borde sin halo (≤ 2 px) 3 planos · desenfoque uniforme · halo 2-4 px outline, 3D, halo, collage de recortes —
Q-AD-09 Fondo del catálogo cerrado (AD-09; fusiona B-1 con E-Q1 → la medición de perímetro vive en Q-AS-06) cuentagotas 8 puntos; cuantización 8; perfil de 5 puntos 255 exacto (packshot) / ≥ 250 (A03) · o lugar real con ≤ 2 dominantes blanco 242-254 (renivelar) color, degradado sintético, ciclorama, patrón, bokeh genérico, transparencia —
Q-AD-10 Saturación fuera del producto (AD-10; fusiona B-7 / B-8 con E-Q13) HSV sobre la imagen a 240 px vivos ≤ 25 % · neón ≤ 2 % · S media 0.20-0.45 · ΔS del producto ≤ 0.10 25-40 % · 2-5 % · 0.45-0.55 (muro real de color con producto separado ≥ 3:1) > 40 % · > 5 % · > 0.55 —
Q-AD-11 Separación sujeto / fondo y rango tonal (AD-11) luminancia WCAG; histograma ≥ 3:1 · p2 ≥ 8 · p98 ≤ 250 2.5-3:1 < 2.5:1 · clipping · sujeto fundido con el fondo —
Q-AD-12 Fidelidad de color al packshot (AD-12; B pedía ±6 / ±12, E ±10 / ±10° / ±15: el PASS conserva a B y el WARNING absorbe a E) cuentagotas 5×5 en 3 puntos idénticos vs _x1; conteo lum ≤ 8 neutros ±6 · color ±12 por canal (±10° tono / ±15 S) · negro aplastado ≤ 3 % ±7-12 · ±13-24 · 3-5 % > 12 · > 24 · LUT · > 5 % —
Q-AD-13 Paleta de campaña dentro del slot (AD-26) cuantización 8 sin el bbox; H / S / V ≤ 2 dominantes (= ≤ 3 con quantize(16) ≥ 8 %, E-Q12) · naranja 15-45° y rojo 345-15° ≤ 5 % y lejos del CTA · amarillo neón 50-65° = 0 · cian 190-215° ≤ 15 % 3 dominantes · naranja / rojo 5-10 % · cian > 15 % ≥ 4 dominantes · naranja / rojo dominante · amarillo neón > 0 · forma-botón dentro del arte —
Q-AD-14 Gráficos, ornamentos y texturas (AD-14 / 15 / 16 / 32) conteo de elementos no fotográficos; zoom 200 % sobre fondo liso (σ ≤ 3) 0 pictogramas · 0 ornamentos (onda, rings, confeti, rayos, marcos, sellos) · 0 texturas añadidas pictograma horneado en la única landing_image real («provisional») · grano de cámara ≥ 1 (ornamento: sin WARNING) —
Q-AD-15 Lifestyle y escenario (AD-19 / 20 / 29 / 31) lista de 6 «no»; inventario de props; 3 personas dicen «de aquí» 0 «no» · ≥ 2 anclas · 0 nórdicos · 0 folclor 1 «no» (marca ajena desenfocada) · 1 ancla o prop ambiguo ≥ 2 «no», modelo, 0 anclas, ≥ 1 nórdico o folclórico ● R-24
Q-AD-16 Storytelling (AD-22): situación de uso real en presente prueba de la frase con verbo en 5 s frase con verbo y producto nombra el lugar, no la acción metáfora, efecto atmosférico o sin producto —
Q-AD-17 Percepción premium (AD-23): 8 propiedades + 7 destructores tabla del capítulo 04 ≥ 7/8 y 0 destructores 6/8 sin destructor ≤ 5/8 o ≥ 1 destructor —
Q-AD-18 Consistencia de campaña (AD-24) tira de contacto; bbox de variantes; luminancia media ±10 % A01 y A02 misma sesión · luz ±15° · blancos ±6 · escala ±10 % · variantes bbox ±1-3 % 1 tolerancia excedida A02 de otra sesión o 4:1 recortado · bbox distinto · luz opuesta entre vecinos —

Fotografía (Q-FO, de E §6)

Lo que E mide y ya cubre la base o Q-AS no se repite: E-Q1 / Q4 / Q5 / Q7 / Q9 → Q-AS-01 / 05 / 06; E-Q8 → Q-00-24; E-Q10 → Q-00-13; E-Q11 / Q12 / Q13 / Q14 → Q-AD-15 / 13 / 10 / 12; E-Q15 → Q-00-04; E-Q22 → Q-MV-04; E-Q24 / Q25 → Q-00-20 / 21.

ID Ítem (regla) Herramienta PASS WARNING FAIL ●
Q-FO-01 Ocupación y centrado del packshot (E-02; B-2 / B-3 daban 0.85-0.95 y ±0.05: manda lo medido sobre 34 packshots) bbox: lado largo / lienzo; centro 0.86-0.92 · centro 0.50 ±0.02 (A03: 86-92 %, L-09) 0.80-0.86 / 0.92-0.95 · ±0.02-0.10 < 0.80 o > 0.95 (packshot; A03 > 0.92) · centro > 0.10 —
Q-FO-02 Sujeto que sale del cuadro (E-03) bordes tocados por el bbox 0-1 borde, solo cable, cordón o mástil 2 bordes cuerpo del producto cortado —
Q-FO-03 Sombra de contacto (E-06; B-4 exige 255 en la fila inmediata bajo el bbox; el umbral de banda es el medido en 31/34) luminancia mínima de la banda del 8 % bajo el sujeto; fila bajo el bbox banda ≥ 246 y fila = 255 235-246 · fila 250-254 < 235 (sombra visible) —
Q-FO-04 Altas luces y negros dentro del bbox (E-05 + B-13) % ≥ 254 / % ≤ 3; p2 / p98 ≤ 0.5 % / ≤ 3 % · p2 ≥ 8 · p98 ≤ 250 ≤ 1 % / ≤ 5 % · ±3 > 1 % / > 5 % · fuera —
Q-FO-05 Producto blanco separado del fondo (E-07) p95 del bbox; silueta p95 ≤ 246 · silueta ≤ 240 247-250 > 250 (se funde) —
Q-FO-06 Recorte mate en silueteados (E-26) transición y fringe al 300 % ≤ 2 px, sin orla 2-4 px orla, fringe o halo —
Q-FO-07 Fondo calmado bajo el panel del hero (E-16) σ de luminancia en x 128-928 · y 288-688 del A01 ≤ 25 25-40 > 40 —
Q-FO-08 A02 4:3 = re-encuadre, no recorte (E-17; complementa Q-AD-18) comparar con el 4:1; bbox mismo concepto, sujeto entero descentrado 0.06-0.10 archivo recortado o sujeto partido ● R-10
Q-FO-09 Persona real con gafete, altura de ojos y actividad (E-20 / E-21) gafete legible; ojos en 35-45 % del alto; manos ocupadas 3/3 gafete parcial · ojos 30-35 % modelo, stock, sin gafete, picado > 10° ● R-26
Q-FO-10 Luz de persona, registro documental (E-22) clave:relleno; R − B en el gafete; sombra dura ≤ 3:1 · + 5..+ 20 3-4:1 · + 20..+ 30 > 4:1 · G > R (fluorescente) · flash frontal —
Q-FO-11 Retrato de servicio: encuadre y fondo (E-23 / E-24, AD-21) overlay de ojos; distancia RGB a navy #002F57 y al uniforme coronilla 4-10 % · ojos 22-30 % · manos en el 67 % superior · fondo ≤ 25 de navy o gris lum 100-160, ≥ 60 del uniforme fondo a 25-60 (tecnico.webp: WARNING aceptado hasta CONT-01, L-14) · rostro fuera de rango fondo saturado ajeno o degradado · < 60 del uniforme · pose de banco —
Q-FO-12 Cupo y registro de fotos humanas (AD-28) conteo por página y por funnel ≤ 3 en el funnel (H02 · M02 · M03) + 1 retrato por página de servicio — 4.ª foto en el funnel · retrato fuera de página de servicio · cliente identificable ● R-26
Q-FO-13 Manos (AD-30): adultas, sin joyería ni esmalte, operando el producto bbox de la mano mano ≤ 40 % del cuadro · piel neutros ±6 · producto al 60-90 % mano 40-50 % mano generada · escena en vez de blanco en _x3 / _x5 —
Q-FO-14 Legibilidad a talla mínima (E-35) reducir a 122 y 30 px (A03) · 64 (A06 / A09) · 622 (A11) · 400×209 (A14); 3 revisores 3/3 2/3 ≤ 1/3 —
Q-FO-15 Set de tomas secundarias (E-31) presencia de _x2 + (_x3 o _x4); _x5 si se enciende o conecta; neutros ±6 entre tomas completo falta una toma 5 frentes · lifestyle fuera del blanco · cotas fuera de _x3 —

Comunicación visual (Q-CV, de D §6)

Cubiertos por la base y no repetidos: D-Q2 / Q27 → Q-00-26; D-Q4 / Q5 / Q6 / Q7 / Q8 → Q-CO; D-Q11 / Q14 → Q-00-25; D-Q15 → Q-00-07; D-Q18 / Q29 → Q-00-13; D-Q19 → Q-AD-05.

ID Ítem (regla) Herramienta PASS WARNING FAIL ●
Q-CV-01 Niveles contiguos de lectura distinguibles (D-01) tamaño · peso · color ≥ 2 de 3 propiedades en todos los pares un par con 1/3 dos niveles idénticos —
Q-CV-02 display por página (D-04) conteo ≤ 1 — ≥ 2 —
Q-CV-03 Texto sobre foto solo con el velo del sistema (R-15 / D-Q9): navy 96 % + blur 10 (DEV-01; hoy 92 %) · blanco 96 → 92 → 0 + blur + máscara 46 % · friso E-8 grep backdrop-filter, color-mix, mask-image = receta receta exacta valores desviados sin velo · text-shadow · contorno · velo sin máscara ● R-15
Q-CV-04 Velo sin foto debajo = blur gratuito (R-16 / D-Q10) backdrop-filter solo con <img> debajo 0 — ≥ 1 —
Q-CV-05 Franja del panel del hero (120 px) en medio tono (L-01: fusiona B-22 «≥ 40 %» y D-Q12 «≤ 60») cuentagotas 5 puntos, promedio L* sobre el arte ×1 L* 40-60 30-40 o 60-75 < 30 o > 75 —
Q-CV-06 Arte bajo el chip de dots (x 43-57 % · y ≥ 71 %) (L-02: scrim del chip al 60 %) cuentagotas; computed style del chip L* ≤ 60 y chip n900 60 % 60-75 · chip al 30 % (estado actual, DEV-02) > 75 —
Q-CV-07 Pares de badges (D-Q16, L-03) calculadora WCAG todos ≥ 4.5 — .badge-new blanco sobre primary 3.45 (hasta DEV-03) —
Q-CV-08 Texto mínimo sobre media (D-Q17) computed styles 0 textos < 12 px sobre media; 0 de 12 px / 400 sobre velo — ≥ 1 —
Q-CV-09 Etiquetas sobre packshot (R-20 / D-Q20 / I-Q23; L-25) conteo; caja del badge ∩ producto ≤ 2 en listado (Oferta primero) · ≤ 3 en ficha · solo .corner · texto 12 / 600 · área tapada ≤ 10 % · campaña ≤ 16 sin % ni $ · < 768: 1 sobre la foto área 10-15 % > 2 / 3 · 2 filas en móvil · PNG o sello · > 15 % · «Por tiempo limitado» sin countdown —
Q-CV-10 Overlays y degradados del registro cerrado (AD-34 / D-Q21, 10 entradas) grep gradient, backdrop-filter, rgba( por componente contra la tabla receta exacta en su superficie receta desviada (T06 158°, insets 10 px) overlay nuevo · velo sin texto · blur sobre superficie plana —
Q-CV-11 Degradado como fondo del arte (D-Q22 / E-13): rampa monótona con desviación local < 2 niveles perfil de 5 puntos 0 % del ancho 10-30 % > 30 % del ancho —
Q-CV-12 Anti-slop (R-31 / D-Q23) box-shadow ∈ {e1, e2, e3}; border-radius ≤ 12 en imagen; inspección 100 % — mesh / aurora · glass decorativo · neumorfismo · sombra fuera de e1-e3 · radio > 12 · neones · emojis · viñeta «cine» > 5 % —
Q-CV-13 Superficies (R-29 / D-Q24) background-image: url() fuera de <img> = 0; contar bandas solo bg · bg-subtle · cyan-tint (≤ 2 bandas, nunca PDP ni checkout) · navy — fondo fotográfico de sección · 3 bandas tint · tint no listado · onda como textura —
Q-CV-14 Controles sobre media con chip propio (R-19) computed styles flechas bg 92 % + n300 · dots n900 60 % · vigencia navy 75 % — control sin chip (depende del arte) —
Q-CV-15 Insets sobre media en escala de 4 y panel alineado al container (D-Q25 / D-Q26; DEV-17) medir ∈ escala · Δ ≤ 4 px a ≥ 1520 10 px heredado · Δ 4-40 otro · Δ > 40 —
Q-CV-16 Chrome sin color de campaña; sin forma-botón ni buy dentro del arte (AD-26 / D-Q28) inspección 0 — ≥ 1 —
Q-CV-17 Producto sobre navy en moneda blanca con aro, nunca a sangre (E-17 / D-Q30) inspección 100 % — JPG a sangre sobre navy («parche recortado») —

Contenido (Q-CO, de I §6)

Cubiertos por la base: I-Q3 / Q10 / Q29 → Q-00-26; I-Q7 → Q-00-16; I-Q8 → Q-00-27; I-Q9 → Q-00-13; I-Q14 → Q-00-23; I-Q23 → Q-CV-09; I-Q24 → Q-00-17; I-Q25 → Q-00-18.

ID Ítem (regla) Herramienta PASS WARNING FAIL ●
Q-CO-01 Kicker (I-Q1) (L-21: I-01 manda; D-Q6 «≤ 40» queda fuera) offsetHeight = 18 px; regex I-04 ≤ 24 caracteres · 1 línea · nombre de campaña, departamento o temporada · sin cifra ni verbo 25-30 > 30 · 2 líneas · cifra · «!» —
Q-CO-02 Título del hero y alto del panel (I-Q2 / Q15 + D-Q4 / Q5) offsetHeight ≤ 53 / 45 / 39 px (1440 / 1024 / 768); alto del panel ≤ 60 caracteres · ≤ 2 líneas en 1440 / 1024 / 768 / 390 · panel ≤ 204 px · a 768 el sujeto se ve completo 61-70 · 3 líneas solo a 1440 · panel 205-220 > 70 · 3 líneas a ≤ 1024 · panel > 220 · a 768 el panel tapa al sujeto —
Q-CO-03 CTA: texto y botón (I-Q4 / Q5; D pedía ≤ 24: manda I-01) offsetWidth ≤ 160 · alto 44 · regex · color calculado verbo imperativo permitido · ≤ 18 caracteres · ≤ 3 palabras · btn-primary (hero) / btn-sterencard (territorio SterenCard) 19-22 «Ver más», «Comprar», «Clic aquí» · > 22 · 2 líneas · naranja buy en H / B / T —
Q-CO-04 CTA: destino (I-Q6) abrir el destino a 1440 y 390 PLP filtrado, landing o PDP del SKU anunciado; el producto del arte en la primera fila PLP raíz de la familia /, CMS, externo o SKU distinto —
Q-CO-05 Producto visible = producto anunciado (I-Q11) packshot _x1 del SKU vs sujeto del arte; SKU en el nombre de archivo mismo modelo mismo modelo, otro color otro producto u otra marca —
Q-CO-06 Promesa de la escena (I-Q12 / R-38) tabla elemento narrativo ↔ atributo del SKU cada elemento tiene atributo 1 elemento decorativo sin atributo elemento que contradice al producto (lluvia sin IP) —
Q-CO-07 Copy autosuficiente (I-Q13) ocultar <img> en DevTools y leer el panel las tres respuestas de I-21 se leen sin el arte — «este modelo», «como ves», «el de la foto» —
Q-CO-08 Fórmula del headline y prohibiciones (I-Q16 / Q17, R-35 / R-36) regex I-04 + lectura F1 uso con verbo · F2 beneficio con dato del SKU · F3 pregunta del mostrador · F0 escenario beneficio sin dato («Internet hasta el último rincón») superlativo, anglicismo, «usted», folclor, relleno, mayúsculas tecleadas, humor en pieza de dinero —
Q-CO-09 Nombre de departamento T01 / T02 (I-Q18; D-Q7 «1 línea» queda fuera por L-21) offsetHeight ≤ 35 px a 390 ≤ 30 caracteres · ≤ 2 líneas a 390 (line-clamp: 2) 31-34 > 34 (el clamp corta) —
Q-CO-10 Uso de tile T03-T06 (I-Q19) offsetHeight ≤ 34 px a 390 verbo imperativo primero · ≤ 60 héroe / ≤ 40 medio y sm 41-46 en medio y sm > 46 o sin verbo —
Q-CO-11 Familia + conteo (I-Q20) captura a 390 etiqueta ≤ 28 · ≤ 2 líneas a 390 · conteo automático 3 líneas a 390 4 líneas · conteo tecleado · paréntesis del catálogo —
Q-CO-12 Atajos (I-Q21, L-23) captura + URL 2-3 chips ≤ 14 (landing) / ≤ 20 (home) · 1 fila a 1024 · destino PLP filtrado 2 filas en tile medio a 390 · misma URL del tile (hasta DEV-13) 2 filas a 1024 · atajo a la raíz de la familia —
Q-CO-13 Título de banda B02 (I-Q22) (L-21: ≤ 50; el «≤ 44» de D-Q8 es el banner B03) offsetHeight ≤ 48 px a 1440 ≤ 50 · sin «ofertas» ni «mejor» (lo dice el kicker) · sin cifra 3 líneas a 1440 cifra tecleada · superlativo —
Q-CO-14 OG (I-Q26) depurador de Meta; vista previa de WhatsApp og:title ≤ 60 · og:description ≤ 155 sin precio y con vigencia · og:image 1200×630 sin texto · og:image:alt falta og:image:alt sin og:image · precio en la descripción —
Q-CO-15 Enlace visible del tile (I-Q27, L-23) HTML servido el texto visible del <a> contiene la familia (el uso ES el enlace; familia en aria-label) solo en aria-label (estado actual) tile sin enlace —
Q-CO-16 Medición (I-Q28) HTML servido; evento campaign_slot_click data-st en cada CTA · data-campaign en campañas · hero-sc-cta en la lámina SterenCard hero-cta sin distinguir arte / SterenCard (DEV-14) CTA sin data-st —
Q-CO-17 Formato de los campos y semillas de config (I-Q30, CONT-02) lectura de system.xml y del admin imperativo · sentence case · sin «!» infinitivo («Explorar…») mayúsculas tecleadas —

Motion y video (Q-MV, de F §6)

Cubiertos por otros bloques: F-Q04 → Q-PF-22 / Q-RS-20; F-Q14 → Q-AS-07; F-Q25 → Q-PF-21; F-Q27 → Q-PF-19 (DEV-18); F-Q28 → DEV-19.

ID Ítem (regla) Herramienta PASS WARNING FAIL ●
Q-MV-01 Nada reproduce ni existe reproductor antes del gesto (F-01 / F-02; = Q-AC-20, Q-PF-18) DevTools Network + querySelectorAll('iframe, video') en carga fría 0 preview mudo de un tercero ≤ 3 s ≥ 1 iframe, media o autoplay ● R-33
Q-MV-02 Reproductores vivos tras cambiar de lámina o cerrar el visor (F-03) .video-vivo en el DOM; oído 0 — ≥ 1 o audio residual —
Q-MV-03 V05 y motion sobre la imagen del hero (F-43 / F-46, L-17) grep setInterval = 0; querySelectorAll en H / B / T / M; captura 0 · solo el panel entra en 240 ms · imagen sin transición — timer, crossfade, Ken Burns, <video>, canvas, iframe o GIF animado en H / B / T / M ● R-33
Q-MV-04 Póster real (F-05 / E-27, AS-10; F daba luminancia 25-85 %: manda la ficha AS-10) md5 ≠ 5e30bff8… y ≠ _x1; bbox en el cuadrado central x 280-1000; luminancia media fotograma real · producto visible · 0.35-0.75 fallback _x1 (estado actual 377 / 378) · ≤ 10 % fuera del cuadrado placeholder gris, negro, logo, texto o play quemado —
Q-MV-05 Texto quemado en video (F-07) muestreo a 1 fps solo subtítulos rótulo con el nombre del producto precio, oferta, CTA o legal ● R-01
Q-MV-06 Subtítulos es-MX y transcripción (F-06; = Q-AC-21 / 22) panel de Vimeo / YouTube; página CC + transcripción (V03) solo autogenerados sin CC con voz —
Q-MV-07 Ratio y resolución de entrega (F-09 / F-51) ffprobe V01 / V02 1080×1920 · V03 16:9 1782×1002 · P05 ≥ 1280×720 −1 escalón (720p) otro ratio o letterbox —
Q-MV-08 Producto reconocible al inicio y duración (F-10 / F-20 / F-25) fotogramas a 0 / 1 / 2 s; ffprobe ≤ 2 s · V01 15-45 s · V02 15-30 s · P05 20-90 s 2-3 s · + 33 % > 3 s o intro de logo · > 2× —
Q-MV-09 Sonido (F-12) ffmpeg ebur128 mudo por defecto · −16 LUFS ±2 · pico ≤ −1 dBTP ±4 LUFS audio sin gesto · > −10 LUFS ● R-33
Q-MV-10 Safe area vertical del 9:16 (F-14 / F-27 + C-23): 14 % / 6 % / 20 % / 35 %; póster con sujeto en x 20-80 % · y 15-65 % y el 30 % inferior libre plantilla sobre 3 fotogramas libre subtítulos rozan sujeto o texto bajo la UI del SDK —
Q-MV-11 Reels (F-24 / F-26) getReels() + identify ≥ 4 pósters reales 1080×1920 ≤ 120 KB · etiqueta en HTML 720×1280 < 4, placeholder o nombre quemado (la banda no existe) —
Q-MV-12 Propiedades, curvas y duraciones del motion del sistema (F-33 / F-38 / F-39 / F-40) grep de transition, @keyframes, cubic-bezier, IntersectionObserver solo transform / opacity / color · curvas ⊆ catálogo · ≤ 250 / 340 / 200 / 450 / 500 / 600 ms · celebración ≤ 2.2 s · 0 entradas por scroll fuera de ES-13c / d max-height o visibility en fugas · curva nueva documentada · + 25 % width / height / top / left / blur · overshoot · > 2× o bucle · parallax, zoom > 1.09, fondo animado —
Q-MV-13 prefers-reduced-motion por pieza (F-35 / F-36 / F-37; = Q-AC-18) emulación + captura; grep matchMedia en WAAPI / rAF / smooth / IO matriz respetada (apaga / 120 ms / estado final / conserva tiempo) · guarda JS 100 % · scroll-animaciones display: none conducta distinta justificada · tercero sin respuesta pieza sin reduce · una guarda ausente · barra «agotada» —
Q-MV-14 Fuegos patrios (F-42; Q-AC-19 redondea a ≤ 2 s, ambos bajo el techo de 5 s) captura + código solo success, una vez, ≤ 2.2 s, ≤ 3 destellos / s, bajo el contenido, aria-hidden, guardas JS + CSS — otra página · bucle · sobre cifras · > 5 s o > 3 / s —
Q-MV-15 Evidencia de motion (F-41) captura o video de pantalla adjunta al acta — «medido con timer» —

Bloques referidos (una fila por bloque; el detalle vive en su capítulo)

Bloque Capítulo · ítems Qué cubre Bloqueantes (FAIL = no publica)
Responsive Q-RS-01…26 06 · 26 7 anchos, ventanas de recorte, subject box, zonas de UI, A02, legibilidad del sujeto, hover, ratio fijo, CLS, huecos Q-RS-02 A02 ausente o desktop encogido · Q-RS-04 sujeto fuera de la subject box · Q-RS-05 producto o rostro bajo el panel · Q-RS-16 escena contain (L-11: no se publica) · Q-RS-18 ratio distinto · Q-RS-21 2 filas de badges en móvil · Q-RS-25 hueco gris en producción
Assets Q-AS-01…14 07 · 14 dimensiones, peso HOY / OBJETIVO, receta JPG, metadatos, packshot, fotograma único, pósters, nombre, versión, máster ≠ web, paquete Q-AS-01 ratio distinto, < 1.5× o upscale · Q-AS-02 peso > máximo · Q-AS-03 / 14 formato que el admin rechaza · Q-AS-07 > 1 fotograma · Q-AS-08 póster placeholder · Q-AS-09 nombre fuera de regex · Q-AS-12 retoque no declarado · Q-AS-13 copy fuera de I-01
Accesibilidad Q-AC-01…36 08 · 36 alt, contraste sobre media, contenido no solo en imagen, movimiento, video, foco, zoom, targets, OG, tercero Q-AC-01 / 02 alt ausente o con precio · Q-AC-09 contraste < 4.5 / < 3 · Q-AC-16 precio tecleado o sin vigencia · Q-AC-17 / 18 autoplay o movimiento sin control · Q-AC-20 iframe o audio sin gesto · Q-AC-24 focus ring < 3 · Q-AC-26 carrusel sin ARIA · Q-AC-33 target < 24
Performance Q-PF-01…28 09 · 28 LCP, bytes, prioridad, lazy, alto reservado, CLS, resolución, srcset, caché de Magento, presupuesto ATF, video, Terrific, CDN, lint Q-PF-02 LCP > 2.0 s · Q-PF-03 imagen LCP > 200 KB · Q-PF-04 fetchpriority ≠ 1 · Q-PF-07 imagen sin alto reservado · Q-PF-08 CLS > 0.05 · Q-PF-14 bytes ATF > + 20 % · Q-PF-18 video antes del gesto · Q-PF-22 caja de video que salta

Checklists por componente

Lista corta de lo que aplica a esa pieza además de la base; cada ítem remite a su ID y umbral. Marca ● = bloqueante.

H01 · Hero de campaña (A01 4:1 + A02 4:3)

Ítem Umbral · veredicto
Q-AS-01 / 04 · assets A01 2880×720 y A02 1440×1080 (±0.5 %); si no cabe en peso: 2400×600 / 1200×900 (WARNING 1.5-2×); A02 ausente = FAIL ●
Q-00-11 · peso (L-31) A01 y A02 ≤ 150 KB objetivo · ≤ 200 máx con nota de campaña (JPG q65-75, nunca q < 60) · > 200 = FAIL ●
Q-RS-04 / 09 · subject box y focal A01: x 58-84 % · y 22-78 %, focal (72 %, 50 %) · A02: centro 0.50 ±0.06, sujeto 55-80 % del ancho, x / y 10-90 %, focal (50 %, 45 %) · fuera = FAIL
Q-00-25 · zona muda paneles x 2.5-58 % · y 12-96 % · dots x 43-57 % · y ≥ 71 % · flechas x < 16 % y > 84 % · y 41-59 % · vigencia abajo-derecha; overlap panel / producto 0 %; sujeto o rostro debajo = FAIL ●
Q-CV-05 / 06 · Q-FO-07 · fondo bajo panel y dots franja de 120 px L 40-60 (L-01) · σ ≤ 25 · bajo dots L ≤ 60 con chip al 60 % (L-02); WARNING 30-40 / 60-75; FAIL < 30 / > 75
Q-AD-03 / 04 · escala y aire alto del producto 25-56 % del lienzo (WARNING 20-25 %) · aire ≥ 25 % en 4:1 y ≥ 40 % en A02 (WARNING 15-25 %)
Q-CO-01…04 · Q-00-26 · copy kicker ≤ 24 · título ≤ 60 / 2 líneas · panel ≤ 204 px · CTA ≤ 18 / 3 palabras btn-primary → landing / PLP filtrado / PDP del SKU · precio desde sku (tecleado = FAIL ●)
Q-AC-09…14 · contraste sobre el píxel h2 blanco y kicker cian ≥ 4.5 (velo 96 %, DEV-01) · precio cian ≥ 3 · dots y flechas ≥ 3 · con arte blanco y negro; < 4.5 en texto normal = FAIL ●
Q-00-16 / 17 · vigencia y alt vigente_desde / hasta visibles cuando nombra campaña (ausente = FAIL ●) · alt con plantilla A01 40-125 ≠ título (hoy alt = título: WARNING hasta DEV-14)
Q-MV-03 · Q-AC-26 · Q-RS-08 · rotación y ARIA setInterval = 0 · solo el panel entra 240 ms · roledescription + group «N de M» + aria-live · 1 tab-stop por lámina · CTA visible sin scroll a 390×844 y 360×640
Q-PF-01…08 · LCP lámina 1 eager con fetchpriority="high" ×1 y width/height · LCP ≤ 1.8 s (≤ 2.0) · CLS ≤ 0.03 (≤ 0.05) · imagen LCP ≤ 150 / 200 KB
Q-RS-02 / 25 · Q-00-18 · móvil A02 real por <source media>; sin campo A02 el slot colapsa a panel navy (DEV-06); hueco gris 390×292 en producción = FAIL ● (L-08)
Q-RS-01 / 19 · anchos 360 · 390 · 768 · 1023 · 1440 · 1920 · 2560 (a 2560 la entrega es 1.1×: WARNING declarado)
Q-AD-18 · Q-00-22 / 23 · gramática A01 y A02 de la misma sesión · «¿es Steren?» 14/14 · prueba de 5 s ≥ 2/3

H02 · Lámina «600+ tiendas» (A08 = geometría de H01, persona con gafete)

Ítem Umbral · veredicto
Toda la lista de H01 mismos assets (2880×720 + 1440×1080), zonas, peso, contraste, rotación y anchos; hoy hueco sin <img> ni campo → slot mudo, nunca gris (Q-00-18 ●)
Q-FO-09 / 10 · registro documental personal real de Steren con gafete, en mostrador o taller real; manos en el producto; no mira a cámara; luz natural cálida, clave:relleno ≤ 3:1, gafete R − B + 5..+ 20; modelo o sin gafete = FAIL ●
Q-RS-04 · Q-00-25 · rostro dentro de la subject box x 58-84 % · y 22-78 %; nunca bajo panel ni dots; ojos en y 250-330 px del lienzo 4:1 (35-46 %)
Q-RS-22 · legibilidad rostro ≥ 48 px a 768 ⇒ ≥ 144 px en el lienzo 2880×720; gafete ≥ 16 px ⇒ ≥ 48 px de lienzo; en el 4:3 rostro ≥ 177 px de lienzo
Q-FO-12 · cupo cuenta como 1 de las 3 fotos humanas del funnel (H02 · M02 · M03); 4.ª = FAIL ●
Q-AC-03 · alt humano rol + acción + lugar, sin nombre: «Persona con gafete Steren atendiendo en el mostrador de una tienda»; no repite el título
I §3 · copy fijo «600+ tiendas» · «Recógelo hoy en 60 min — te lo tiene listo una persona real» · «Elige tu tienda» → btn-primary abre el drawer de tiendas (hero-tiendas); la cifra 600+ se congela con negocio
Q-AD-15 / 20 · Q-FO-13 · escenario mostrador o taller real (escenario d), ≥ 2 anclas, 0 nórdicos; clientes solo de espaldas o fuera de foco; manos reales
Q-00-20 / 21 · procedencia original de cámara con EXIF + _retoque.csv; retoque de piel solo luz / color global (AD-37); 0 indicios de IA (● si ≥ 2 o (1))
Q-AD-18 · consistencia los dos crops (4:1 y 4:3) de la misma toma o sesión; luz ±15°, blancos ±6

T01 / T02 · Tiles de departamento (A03 1:1 800×800, contain, cintillo 104 / 72)

Ítem Umbral · veredicto
Q-AS-01 / 02 · asset 800×800 exacto, JPG q80 ≤ 60 KB (≤ 100 máx); hoy 129 / 131 a 400² = 0.63× en DPR2 = FAIL de dato (CONT-03)
Q-RS-12 / 15 · Q-AD-03 · relleno (L-09) _x1 del representante canónico al 85-90 %: PASS 86-92 · WARNING 80-86 · FAIL < 80 o > 92 (el hover ×1.09 lo corta)
Q-AS-06 · Q-FO-03 · fondo 255 exacto (perímetro ≥ 99 % lum ≥ 253), sin sombra (banda 8 % ≥ 246), sin viñeta ni halo: la viñeta navy 5 % y la sombra e1 → e2 las pone el tile
Q-RS-13 · sujeto ≥ 48 px T01 render mínimo 239 px (cualquier packshot pasa) · T02 89 px ⇒ relleno ≥ 54 % (cubierto por L-09)
Q-00-24 · escala entre los 5 tiles ocupación máx − mín ≤ 0.12 · WARNING 0.12-0.20 · FAIL > 0.20
Q-00-25 · Q-RS-21 · reserva del cintillo producto ≥ 8 px por encima de los 104 / 72 px (el padding-bottom lo garantiza con contain); si la cara fuera escena: ventanas de T03 y cover (DEV-08)
Q-AC-12 · contraste del cintillo n900 ≥ 12.5 y n700 7.84 en la zona opaca; primer renglón fuera del fundido
Q-CO-09 / 12 · copy nombre ≤ 30 (≤ 2 líneas a 390, offsetHeight ≤ 35 px) · conteo automático · 3 atajos ≤ 20 c/u (suma ≤ 50) solo en héroe ≥ 768 → PLP filtrado
Q-AC-04 / 25 · foco y alt alt="" + nombre adyacente · 1 foco por tile (.tile-cover) + 3 chips solo héroe · ring 4.90 sobre el cintillo
Q-00-18 · sin foto glifo 40 / 48 primary-text + cuerpo opaco; nunca gris ni «próximamente» ●
Q-PF-06 / 07 / 13 · entrega lazy + decoding="async" (héroe del mosaico: candidato a fetchpriority, DEV-24) · filas fijas 172 / 208 ⇒ CLS 0 · servido por talla chip 80 · sm 320 · héroe 640 tras DEV-23
Q-AS-09 · nombre cat_<slug>_1x1.jpg (L-30)

T03 / T04 · Tiles de familia con escena (A04 1.6:1 1400×880)

Ítem Umbral · veredicto
Q-AS-01 / 02 · asset 1400×880 (1.6:1 ±0.5 %), JPG q70-78 ≤ 120 KB (≤ 150 máx, L-31); ratio distinto = FAIL ●
Q-RS-04 / 08 · un solo A04 (L-10) subject box x 25-75 % · y 12-62 %, focal (50 %, 40 %) sirve al héroe y al medio; WARNING sujeto en x 20-25 % o 75-80 %; fuera = FAIL
Q-RS-16 · cover (L-11) escena = cover a sangre con focal; hasta DEV-08 la escena real se pinta contain con bandas blancas → FAIL: no se publica, el tile usa render
Q-00-25 · cintillo del héroe el 24 % inferior (104 / 432) queda bajo el velo: horizonte y producto en el 70 % superior, sujeto ≥ 8 px sobre la reserva; a 390 se ve el 63 % central, a 768 el 77 % del alto
Q-AD-03 / 04 · escala y aire alto del producto 35-60 % · producto ≥ 25 % del ancho de la ventana · aire ≥ 25 % incluida la franja de 104 px
Q-AD-15 / 16 · escenario escenario (a) casa · (b) taller · (c) changarro; ≥ 2 anclas, 0 nórdicos, 0 folclor; producto instalado o en uso, 1 producto, manos permitidas; stock o nórdico = FAIL ●
Q-AD-10 / 12 / 13 · color vivos ≤ 25 % · neón ≤ 2 % · S 0.20-0.45 · ≤ 2 dominantes · neutros ±6 y color ±12 vs la _x1 de la familia · sin degradado de fondo
Q-AC-10 / 12 · texto sobre la escena primer renglón del cintillo en zona ≥ 92 %, certificado con arte de prueba blanco y negro (≥ 4.5; < 3 = FAIL ●); T04 sin velo (foto en el 42 % izquierdo, cuerpo a la derecha)
Q-CO-10 / 11 / 12 / 15 · copy uso F1 con verbo ≤ 60 héroe / ≤ 40 medio · familia ≤ 28 + conteo automático · 2-3 atajos ≤ 14 → PLP filtrado (DEV-13) · la familia es enlace visible
Q-AC · alt alt="" por defecto; alt corto solo si la escena aporta lo que el texto no dice; .mt-link aria-label="uso — familia, N productos"
Q-RS-15 · Q-MV-13 · hover escala 1.09 sin recortar el sujeto; sin escala bajo reduce
Q-00-20 / 21 · Q-PF-01 / 04 · procedencia y LCP original con EXIF + _retoque.csv, 0 indicios de IA ●; T03 = LCP de la landing: eager + fetchpriority="high"

B02 · Banda de categoría (packshot A05 en moneda)

Ítem Umbral · veredicto
Q-CV-17 · moneda círculo blanco con aro: 108 px (≥ 1024, foto útil 84) · 76 px (< 1024, foto útil 52); producto a sangre sobre navy = FAIL
Q-RS-13 / 17 · sujeto en el círculo sujeto en el 70 % central del packshot (59 px a 1440); relleno < 60 % (cable, tira LED) = WARNING de dato — el producto lo elige HomeCarruseles, no diseño
Q-AS-06 · packshot _x1 sin cambios: 1200×1200, 255, sin sombra; ninguna versión «para moneda»
Q-CV-10 / 13 · Q-00-26 · panel navy plano sin degradado ni foto de fondo · cifra 88 / 800 cian (56 en < 1024) única · título 20 · pie 13 ≤ 22ch
Q-AC-11 · contraste sobre navy puro: cifra cian 5.49 · pie blanco ≥ 10 · sin velo (no hay foto debajo del texto)
Q-CO-13 · copy título ≤ 50 (2 líneas a 1440, offsetHeight ≤ 48 px) · override sin «ofertas» ni «mejor» · sin cifra tecleada
Q-CO-03 / 04 · CTA «Ver todas» btn-sterencard → la categoría; home-cat{N}-head; nunca buy (un solo naranja por vista)
Q-AC-24 / 05 · foco y alt panel = un <a>; ring .on-navy (hoy ausente: WARNING DEV-04) · flechas .st-circ 44 px con aria-disabled en extremos · moneda alt=""
Q-MV-12 / 13 · Q-PF-12 · carril scroll-snap sin autoplay · scroll auto bajo reduce · tarjetas lazy servidas a 480² por category_page_grid (DEV-22)
Q-00-18 / 27 · estados y oferta sin material vigente no existe la banda · modo oferta solo con reglas de catálogo reales («hasta 10 %») · urgencia solo con vigente_hasta ●

B05 / B06 · Patrimonio (A11 3:1) y Aprende (A07 16:9)

Ítem Umbral · veredicto
Q-AS-01 / 02 · assets (L-31) A11 1800×600 servido 1250×417, JPG q75 ≤ 60 (≤ 80) · A07 1600×900 servido 840×473, q78 ≤ 60 (≤ 80); el manual decía 250 / 200: no aplica
Q-RS-10 / 18 · ratio fijo sin recorte: B05 622×207 → 324×108 (768) · B06 413×232 → 195×110 (768); ratio distinto = FAIL ●
C §3.8 · E A11 · scan como forma portada o fila de productos, elemento principal ≥ 40 % del alto · nada esencial en el 8 % de los bordes · papel lum 228-246, sin sepia ni «vintage» · entregado opaco (si el fallback «1956 → 2026» asoma = FAIL)
Q-00-13 · texto del scan el texto impreso del catálogo es contenido del objeto (excepción física): no se añade texto, velo ni badge (D §3)
Q-FO-09 · Q-RS-22 · persona de A07 atendiendo con gafete, manos en el producto, ojos 35-45 %, rostro ≥ 44 % del alto (≥ 396 px de 900 ⇒ ≥ 48 px a 768), gafete ≥ 131 px de lienzo; sin gafete = FAIL ●
Q-FO-10 · luz de A07 natural cálida de ventana o tienda · clave:relleno ≤ 3:1 · gafete R − B + 5..+ 20 · mostrador real · cliente sin rostro
Q-AD-04 · Q-CV-04 · aire y velo A07 aire 6 % (x 96-1504 · y 54-846) · sin copy encima: la cita va debajo, sin velo
Q-FO-12 · cupo M02 = 1 de las 3 fotos humanas del funnel ●
Q-AC-03 · Q-00-17 · alt B05 «Portada del catálogo Steren de [año]» · B06 rol + acción + lugar sin repetir «Pregunta, Steren responde»
Q-CO · copy B05 cifras fijas (70 años · 600+ tiendas · 3M SterenCard) = registro 800 con gobernanza · B06 h3 ≤ 30 · cuerpo ≤ 140 · links con verbo
Q-00-18 · Q-PF-06 / 07 · estado y entrega hoy hueco sin campo (DEV-20): slot mudo, fallback tipográfico aria-hidden · lazy + decoding="async" · aspect-ratio 3/1 y 16/9 reservan alto
Q-00-19 / 20 · nombre y procedencia archivo_catalogo-<año>_3x1.jpg · humano_mostrador-<tienda>_16x9.jpg · A07 con EXIF + _retoque.csv, 0 indicios de IA ●

P01 / P07 · Packshot _x1 (A05 1200×1200) e imagen de categoría (A03 800×800)

Ítem Umbral · veredicto
Q-AS-01 · geometría P01 1200×1200 (máster Q92 intocable) · P07 800×800; 400×400 = FAIL de dato
Q-AS-06 · Q-AD-09 · fondo perímetro ≥ 99 % lum ≥ 253 · esquinas 255 · R − B ≤ 1 (WARNING 97-99 % / 250-252 · FAIL < 97 % o cast ≥ 2)
Q-FO-01 · ocupación P01 0.86-0.92 del eje mayor, centro 0.50 ±0.02 (WARNING 0.80-0.86 / 0.92-0.95 · FAIL < 0.80 o > 0.95) · P07 86-92 % (L-09: > 92 = FAIL por hover)
Q-FO-03 · Q-AS-05 · sombra y tratamiento banda 8 % ≥ 246 y fila bajo el bbox 255 (WARNING 235-246 · FAIL < 235) · sin viñeta, halo ni fringe (≤ 1 px al 300 %)
Q-FO-04 / 05 · rango tonal altas luces ≤ 0.5 % (≥ 254) · negros ≤ 3 % (≤ 3) · p2 ≥ 8, p98 ≤ 250 · producto blanco: p95 ≤ 246, silueta ≤ 240
Q-AD-02 / 18 · Q-FO-02 · encuadre entero, frente o 3/4 alto (cámara 10-25°, verticales ±1°), logo Steren legible a 233 px; solo cables o mástiles salen y por 1 borde
Q-AD-18 / 24 · kits, pantallas, variantes kit en escala real (principal ≥ 2× el área del accesorio) · pantalla con UI propia o imagen neutra (viva > 20 % = WARNING) · variantes de color con bbox ±1 %
Q-AD-12 · color neutros R≈G≈B ±6 · negro aplastado ≤ 3 % · sin LUT; producto negro con p2 > 30 está lavado
Q-00-13 · texto y cotas 0 texto; cotas solo en _x3 (excepción E-3: ≤ 3 cotas, Heebo n700 sobre blanco, fila en specs, alt con las medidas) ●
Q-FO-15 · set mínimo _x1 + _x2 + (_x3 o _x4); _x5 si se enciende o conecta; misma temperatura entre tomas (neutros ±6)
Q-FO-14 · Q-AD-14 · P07 _x1 del representante canónico, 1 producto, sin composición (celular + foco + ondas = FAIL AD-14); legible a 122 y 30 px con 3 revisores
Q-AS-02 / 07 / 08 · Q-AC-05 / 06 · formato y alt JPG sRGB; nunca PNG transparente ni GIF; 1 fotograma; sin metadatos · alt = nombre en PDP / OG, alt="" + nombre adyacente en tarjeta y tile · tomas «Vista N de M: toma»

P03 · Tarjeta de producto

Ítem Umbral · veredicto
Q-PF-12 / 13 · talla servida packshot vía category_page_grid 480² en PLP; carruseles sirven hoy el 1200² original: WARNING de deuda (DEV-22), FAIL cuando exista el resize
Q-RS-13 · C §3.17 · sujeto en x 10-90 % · y 15-90 % del packshot (evita badge arriba-izquierda y dots del pie); render mínimo 138 px a 360 ⇒ relleno ≥ 35 %
Q-CV-09 · etiquetas ≤ 2 en listado (Oferta primero), .corner, texto 12 / 600, sin PNG ni sello, área tapada ≤ 10 % (WARNING 10-15 %), campaña ≤ 16 sin % ni $
Q-RS-21 · móvil (L-25) < 768 un solo badge sobre la foto, el segundo al cuerpo; 2 filas (62 px = 40 % de la foto) = FAIL (DEV-15)
Q-00-27 · urgencia «Por tiempo limitado» solo con countdown de vigente_hasta; se retira al vencer ●
Q-CV-07 · contraste de badges ≥ 4.5: badge-promo blanco / sale 4.92 ✓ · .badge-new blanco / primary 3.45 = FAIL hasta DEV-03
Q-CV-03 / 12 · superficie sin velo, texto ni degradado sobre la foto; card conserva «bordes > sombras» (borde n300 + e0, DS §3)
Q-AC-04 / 25 / 27 · foco y galería alt="" + pcard-foto tabindex=-1 aria-hidden · pcard-link único tab-stop · galería revela con :focus-within, flechas aria-label, bolitas «Foto N de M» · swipe ≥ 40 px con alternativa
Q-AC-33 · Q-MV-13 · controles dots 6 px / flechas 28 px solo hover ≥ 1024: targets ≥ 24 (WARNING 24-43) · transición off bajo reduce
Q-PF-01 / 04 / 06 · Q-00-26 · LCP y precio primera tarjeta del PLP eager + fetchpriority="high", resto lazy + decoding="async" + width/height · precio vivo con centavos en superíndice, único buy de la vista

P04 / P05 · Galería del PDP y video de producto

Ítem Umbral · veredicto
Q-RS-19 · Q-AD-25 · tallas tiles 1:1 contain desde medium 1000² (héroe del collage 605 = 1.65× → WARNING declarado) · small 160² · large 1600² para el zoom 175 % con nitidez real, sin upscale generativo
Q-PF-01 / 04 / 06 · LCP tile 0 eager + fetchpriority + width/height; resto lazy; collage → carrusel snap < 768
Q-CV-10 · overlays velo «+N» navy 70 % (5.43 sobre blanco) solo en el 6.º tile (esa foto es decorativa) · contador móvil navy 82 % abajo-derecha
Q-CV-09 · etiquetas ≤ 3 en .pdp-etiquetas, nunca sobre la foto
Q-AC-05 / 06 / 23 · alt, tomas y visor tile 0 alt = nombre · resto aria-label="Vista N de M: toma" (≥ 80 % de 20 PDP) · visor role=dialog aria-modal, Esc / ← / → / Home / End, trampa y retorno de foco · miniaturas 64×64 con aria-label
Q-MV-13 · reduce hover-zoom 1.03 y scroll smooth apagados
Q-MV-04 · Q-AS-10 · póster P05 1280×720, fotograma real (md5 ≠ placeholder ≠ _x1), producto ≥ 20 % del ancho dentro del cuadrado central x 280-1000, luminancia 0.35-0.75, sin texto ni play quemado; nada clave en el radio de 40 px del centro (el play de 48 px lo pinta el sistema); _x1 = único fallback (WARNING)
Q-MV-01 / 02 · Q-PF-18 · gesto 0 iframes y 0 peticiones al proveedor antes del clic · preload="none" · arranca solo tras el gesto · pararVideos al salir del visor ●
Q-MV-05…09 · contenido del video producto reconocible ≤ 2 s · 20-90 s · mudo por defecto, −16 LUFS ±2 · texto quemado solo subtítulos · CC en Vimeo · ≥ 1280×720
Q-AC-21 / 23 / 33 · a11y button aria-label="Reproducir video: título" · play ≥ 44 px y ≥ 3:1 · iframe fuera del <button> (DEV-27) · Tab recorre el reproductor, Esc devuelve el foco
Q-RS · Q-PF-22 · caja tile 1:1 con letterbox 22 % · visor 16:9 ≤ 960 · reels 9:16 sin pillarbox (DEV-28) · caja constante a 0 / 3 / 8 / 10 s (salto = bloquea) · póster ≤ 80 / ≤ 120 KB

M02 / M04 · Foto de mostrador (A07) y retrato de servicio (A10 4:5)

Ítem Umbral · veredicto
Q-FO-09 / 10 · M02 documental mostrador o taller real · luz natural cálida, clave:relleno ≤ 3:1, gafete R − B + 5..+ 20 (G > R = FAIL) · ojos 35-45 % · rostro ≥ 44 % del alto · manos en el producto · no mira a cámara · sin gafete = FAIL ●
Q-FO-11 · M04 estudio 1200×1500 servido 840×1050 · medio cuerpo, mirada a cámara permitida · coronilla 4-10 % · ojos 22-30 % · manos en el 67 % superior · 20 % inferior libre para friso y nombre
Q-FO-11 · fondo del retrato (L-14) liso igualado al navy (≤ 25 RGB de #002F57) o gris de recorte (lum 100-160), a ≥ 60 del uniforme; tecnico.webp (degradado #1157E6, 55 % neón) = WARNING aceptado hasta CONT-01
Q-AD-07 · luz de estudio 2-3 luces, clave:relleno 2:1-3:1, catchlight en ambos ojos; gafete R≈G≈B ±6
Q-RS-22 / 23 · gafete y nombre M04 figcaption «Nombre · puesto» ≤ 40 · M02 alt humano sin nombre · gafete ≥ 16 px en el render más chico; M04 a 390 (358×300, cover top): gafete en y 30-52 %, nada relevante en y > 69 %
Q-FO-12 · cupo M02 en el funnel (3) · M04 = 1 por página de servicio, registro aparte (X-8) ●
Q-00-20 / 21 · retoque piel solo luz / color global, sin suavizado, declarado en _retoque.csv · original con EXIF · 0 indicios de IA (dedos, ojos, piel sin poro) ●
Q-CV-10 · friso (E-8) navy 92 → 0 sin blur · nombre 14 / 600 y rol 12 al 80 % dentro de la zona ≥ 75 % del degradado (≥ 7:1) · cantos superiores 12 px libres
Q-AS-02 · peso A10 WebP q80 ≤ 70 (≤ 120); hoy 518×626 = 1.23× sub-resolución → WARNING · A07 ≤ 60 (≤ 80), lazy
Q-AD-21 · prohibido modelos, stock, IA, pose de banco (frontal, brazos cruzados, sonrisa fuera de A10), cliente identificable, picado > 10° ●

V01 / V02 · Banda Terrific y reels «Así se usa»

Ítem Umbral · veredicto
Q-RS-26 · L-18 · caja de V01 alto del iframe y miniaturas a 1440 / 768 / 390 medidos en calidad2 y fijados en min-height (DEV-10); sin medir = WARNING «medir», nunca cifra inventada
Q-MV-10 · póster 9:16 sujeto x 20-80 % · y 15-65 % · 30 % inferior libre (título y precio del SDK) · safe area 14 / 6 / 20 / 35 %
Q-MV-01 · Q-PF-19 · gesto 0 media antes del gesto; solo terrific-sdk.js defer; preview mudo ≤ 3 s = WARNING; autoplay con sonido = FAIL ●
Q-PF-22 · Q-RS-20 · retirada banda retirada a los 8 s solo fuera del viewport; CLS de la banda ≤ 0.03 (> 0.05 = FAIL)
Q-PF-19 · CSP terrific.live, *.terrific.live, storage.googleapis.com, terrific-live-polls.web.app en frame-src; consola limpia
Q-MV-06…09 · contenido V01 15-45 s · V02 15-30 s (hook 2 s) · producto ≤ 2 s · mudo, −16 LUFS ±2, pico ≤ −1 dBTP · CC o subtítulos abiertos es-MX · 1080×1920
Q-AC-36 · tercero V01 pasa Q-AC-17…21, 23, 24 y 33 en calidad2; lo que no, en la declaración de accesibilidad; trampa de foco = FAIL ●
Q-MV-11 · reels ≥ 4 pósters reales 1080×1920 ≤ 120 KB o la banda no existe (getReels() < 4 → vacío); etiqueta del producto en HTML sobre velo del sistema, nunca quemada
C §3.22 · póster del reel subject box x 10-90 % · y 10-70 %, focal (50 %, 40 %) · play 48 px al centro (y 44-56 %) · velo inferior y 75-100 % · enlace entero .tile-cover al PDP · lazy + width/height
Q-AD-15 / 19 · Q-AS-07 · registro gente real en su casa usando el producto (el norte: reels del vivo), ≥ 2 anclas; texto quemado y degradado bajo el nombre no se heredan · GIF animado = video no autorizado ●

S01 · Imagen para compartir (A14 1200×630)

Ítem Umbral · veredicto
Q-AS-01 / 03 / 11 · archivo 1200×630 (1.91:1 ±0.5 %) · JPG siempre q80 · ≤ 100 KB (≤ 200 máx) · sRGB · sin metadatos
Q-RS-19 / 24 · dos vistas sujeto en el cuadrado central x 25-75 % y en y 10-90 %: entero en la vista 1.91:1 (Facebook) y en la 1:1 (WhatsApp); cortado = FAIL
C-19 · composición producto y categoría: packshot o A03 contenido ≤ 80 % del alto (504 px), centrado sobre blanco · campaña: ventana 1375×720 del A01 anclada a la derecha (x 52.3-100 %), que contiene la subject box y deja fuera el tercio de copy
Q-00-13 · E-4 (L-15) · texto sin texto: og:title lo pone el canal; única excepción el logotipo SVG oficial ≤ 8 % del alto, abajo a la derecha; cualquier otro texto = FAIL ●
Q-FO-14 · legibilidad legible a 400×209 (3/3 revisores)
Q-CO-14 · Q-AC-34 · metadatos og:title ≤ 60 · og:description ≤ 155 sin precio y con vigencia · og:image:width / height · og:image:alt = nombre o categoría (falta alt = WARNING; sin og:image = FAIL)
Q-00-18 · estado hoy el PDP manda el 1200² (se pierde y 23.7-76.3 %); categoría y home sin imagen → DEV-09; mientras, ningún precio ni campaña rasterizados en el 1200²
Q-AS-09 / 10 · nombre og_producto_<sku>_1200x630.jpg · og_cat_<slug>_1200x630.jpg · AAAA-MM_campaña_og_1200x630.jpg; versión por nombre
I-Q26 · verificación no se pinta en el sitio (0 bytes en página): comprobar con el depurador de Meta y la vista previa de WhatsApp
Q-AD-13 · Q-AD-05 · arte paleta de campaña con reglas AD-26 · sin collage · sin 1:1 sin derivar

Test de pertenencia «¿es Steren?»

Las 14 preguntas binarias de AD-39 (B §6.1; texto completo en el capítulo 04). 14/14 pertenece · 12-13 se corrige y se repite · ≤ 11 no es Steren: se rehace, no se retoca. Hoja de 14 casillas firmada; la pregunta 1 con 3 personas ajenas al proyecto.

# · pregunta (sí / no) # · pregunta (sí / no)
1 · Con el logo tapado, ¿2 de 3 personas dicen «Steren» o «tienda de electrónica de aquí» en 5 s? 8 · ¿La zona muda (58 % izquierdo / franja inferior) está limpia, en medio tono, y la foto continúa bajo el velo? (AD-13, AD-27)
2 · ¿El sujeto es un producto real de Steren, entero, con forma y logo reconocibles? (AD-02, AD-18) 9 · ¿Las personas son personal Steren con gafete y nombre real, dentro del cupo? (AD-21, AD-28)
3 · ¿Es una fotografía (no collage) con ≤ 3 elementos? (AD-05, AD-08) 10 · ¿El escenario es casa / taller / negocio de aquí (≥ 2 anclas) sin lista negra ni señal extranjera? (AD-20, AD-29)
4 · ¿Cero texto, cifras, logos, iconos y marcas de agua en el raster? (AD-13, AD-14, AD-15) 11 · ¿Cero efectos: outline, glow, 3D, bisel, rings, lluvia, partículas, gradiente sintético? (AD-23, AD-15)
5 · ¿El fondo es 255 exacto o un lugar real (no gradiente, ciclorama, patrón, bokeh)? (AD-09, AD-16) 12 · ¿Sin sombra ni aire «de diseño», y el producto ocupa 86-92 % / 25-56 % / 35-60 % según formato? (AD-03, AD-18)
6 · ¿Neutros del producto R≈G≈B ±6 y color ±12 respecto al packshot? (AD-12) 13 · ¿Origen de cámara verificable (EXIF) y declaración de retoque? (AD-25, AD-37)
7 · ¿Vivos ≤ 25 % y neón ≤ 2 % fuera del producto? (AD-10) 14 · Junto a un packshot y al chrome (navy / cian / blanco), ¿comparte luz, blanco, escala y fidelidad? (AD-24, AD-23)

Hoja de veredicto

Acta de QA por pieza: la columna vacía es la plantilla; la tercera, un ejemplo con una pieza ficticia de la campaña 2026-11_buen-fin. Un ítem se cita siempre por ID; un WARNING lleva ticket con dueño y fecha.

Campo Acta Ejemplo · 2026-11_buen-fin_hero
Pieza Hero de campaña Buen Fin 2026, lámina 1 (config home_hero_1)
ID H01 (A01 + A02)
Campaña · campaign_id 2026-11_buen-fin
Versión del asset v2: 2026-11_buen-fin_hero_desktop.jpg 2880×720 · JPG q70 · 187 KB — 2026-11_buen-fin_hero_movil.jpg 1440×1080 · q68 · 141 KB (v1 regresada: FAIL Q-00-25 ●, cable del kit bajo la franja de dots; re-encuadrada)
Copy verificado (Q-CO) kicker «Buen Fin 2026» (13) · título «Cubre la casa entera con Wi-Fi» (30, F1, 1 línea) · CTA «Ver el kit mesh» (15 / 3 palabras, btn-primary) → PDP del SKU mesh-300 · precio desde sku · vigencia 2026-11-13 → 2026-11-17 · alt propuesto «Kit mesh Steren instalado en el pasillo de una casa, junto a una ventana de herrería» (85)
Fecha 2026-10-28
Revisor QA de diseño (iniciales y firma)
Anchos probados 360 · 390 · 768 · 1023 · 1440 · 1920 · 2560 (7/7, con A02 real en calidad2)
Ítems FAIL (ID) ninguno en v2
Ítems WARNING (ID) Q-00-11 (A01 187 KB: entre 150 y 200, nota de campaña DS §7) · Q-00-17 / Q-AC-02 (en el DOM alt = título hasta DEV-14)
Veredicto PASS / WARNING / FAIL WARNING — publica con nota; 2 WARNING (< 3: sin revisión de dirección de arte)
Ticket STE-SM-0240 (ficticio): nota de peso en el expediente de campaña + campo alt propio (DEV-14)

Lo que QA necesita para revisar

Sin el paquete completo no se abre acta: lo que falte se pide antes de medir nada.

Entregable Formato Sirve para
Archivos web por slot ratio exacto y nombre L-30 (2026-11_buen-fin_hero_desktop.jpg 2880×720 · _movil.jpg 1440×1080 · esc_<familia>-hero_16x10.jpg 1400×880 · cat_<slug>_1x1.jpg 800×800 …), JPG progresivo q65-80, sRGB, sin metadatos Q-00-02 / 03 / 10 / 11 / 19 · Q-AS
Máster en alta TIFF o JPG ≥ q95, sRGB IEC61966-2.1, 8 bits, ≥ 2× de la tabla A, sin capas Q-AS-12 (máster ≠ web); re-encuadres futuros
Original de cámara RAW o JPEG directo con EXIF Make · Model · DateTimeOriginal, para toda escena y persona (A01 / A02 / A04 / A07-A10 / A12) Q-00-20 / 21 · Q-AD-25
_retoque.csv + máscaras columnas archivo · operación · herramienta · máscara · original; PNG 1 bit por operación, al tamaño del máster; sin CSV = «sin retoque» Q-00-20 · AD-36 / 37
Ficha del asset focal point y subject box en fracciones del lienzo; en personas, posición de ojos y gafete Q-00-04 / 05 · Q-RS-03
Copy por campo kicker · título · CTA (texto) · CTA (URL) · alt propuesto · vigente_desde / vigente_hasta · campaign_id; en tiles: uso · familia · atajos Q-00-08 / 09 / 16 / 17 · Q-CO
SKU y su _x1 SKU del producto anunciado (precio vivo) y packshot _x1 para cotejar sujeto y color Q-00-26 · Q-CO-05 · Q-AD-12
Destino del CTA URL exacta: PLP filtrado, landing o PDP del SKU; nunca raíz ni CMS Q-CO-04
Capturas en los 7 anchos 360 · 390 · 768 · 1023 · 1440 · 1920 (+ 2560 hero) con el asset real, y con arte de prueba blanco y negro para velo, dots y flechas Q-00-14 · Q-RS-01 · Q-AC-10
Referencia de color cuadro con tarjeta gris o neutra al inicio de la sesión (no se publica) Q-AD-07 / 12 · Q-FO-10
Evidencia de motion / video captura o video de pantalla (no timers); ffprobe y ebur128 del archivo Q-MV-07 / 09 / 15
Slot de destino campo concreto: home_hero_1/2, landing_image, arte de la landing, embedding_id de Terrific Q-00-01 · Q-00-18

11Gobernanza, excepciones y deuda de desarrollo

Cómo se amplía esta guía

  1. Nada nuevo se disfraza de existente. Toda regla de esta guía está marcada E (existente), D (derivada) o H (propuesta). Las H entran al DS por el proceso §12.6: PR con cálculo (ratio, medida, captura antes/después) y este documento como fuente.
  2. Un slot nuevo es una enmienda, no una excepción. Se propone con la ficha completa de 15 campos (capítulo 05), su plano, su costo DOM, su contrato de datos y su checklist; entra a la taxonomía (02) con ID y estado, y a C6.
  3. Una cifra nueva se calibra antes de ser FAIL. Los umbrales marcados H (saturación, luz de personas, safe areas de Terrific) son WARNING hasta calibrarse con las tres primeras entregas reales; después se fijan por enmienda.
  4. La guía se versiona como el DS. Cambio de regla = nueva versión con changelog; los assets ya aprobados no se re-evalúan retroactivamente salvo FAIL bloqueante.
  5. Fuente única: redesign-2026/70-multimedia-art-direction/ (contenido/, datos/, build/). El PDF y el HTML se generan de ahí; nadie edita el PDF.

Registro de excepciones declaradas (las únicas)

Excepción Qué permite Límite Origen
E-1 Sombra define la caja tiles con foto (home, landing): e1 → e2, filete n200 o ninguno las cards de producto conservan «bordes > sombras» (DS §3) X-3
E-2 Velo funcional scrim de legibilidad con receta única (navy 96 % + blur 10 · bg 96→92→0 + blur + máscara 46 %) solo con texto encima; nunca decorativo X-4
E-3 Cotas en _x3 dimensiones dibujadas sobre blanco solo _x3, con fila en la tabla de specs, ≤ 3 cotas, Heebo n700, alt con las medidas L-12
E-4 Logo en OG logotipo SVG oficial ≤ 8 % del alto, abajo-derecha solo A14 L-15
E-5 !important de reduced-motion interruptor global único, comentado en código X-14
E-6 Ornamento folclórico papel picado, cinta tricolor, onda tricolor, fuegos solo tema de temporada (capa apagable); nunca arte ni chrome base X-7
E-7 Retrato de estudio luz de estudio, fondo neutro sobre navy solo páginas de servicio, 1 por página, gafete y nombre real X-8 / X-10
E-8 Friso del retrato velo navy 92 → 0 sin blur ni máscara solo H04 L-26
E-9 Hero móvil por cover object-position: 80% 50% del A01 en caja 4:3 solo por escepción escrita mientras no exista el campo A02; contradice DS §7 L-08
E-10 Dos CTAs de contacto btn-buy (llamar) + contorno (WhatsApp) en la cabecera de servicio acciones de contacto, no de campaña; solo H04 D §3

Enmiendas propuestas al DS (para el proceso §12.6)

ENM Qué cambia Documento Cálculo/evidencia
ENM-01 focus.ring-media: doble trazo blanco + #006B9E para controles sobre foto DS YAML focus G: ningún ring existente sobrevive a una foto arbitraria (1.48 sobre gris; 1.0 sobre claro)
ENM-02 Panel del hero como franja inferior de 72 px en 768-1023 DS §7 / C6 C-16: hoy el panel cubre 52 % × 81 % de la lámina a 768
ENM-03 Excepción E-3 (cotas en _x3) DS §7/§10 E-33
ENM-04 Excepción E-4 (logo en OG) DS §7 E-28 / I-29
ENM-05 Política de IA en tres niveles + 10 indicios ES-11 / DS §10 E-36…E-39, B-25
ENM-06 «Máx 2 badges» → «≤ 2 en listado, 1 sobre la foto en <768» DS §5 C-18: 2 filas = 40 % de la foto a 153 px
ENM-07 Registro de overlays (10 entradas) y variante «friso» DS §10 D §2e
ENM-08 Container 1440; hero 2880×720 / 1440×1080; alto reservado por cualquiera de tres medios; glosario «cintillo» DS §4, §7 X-1, X-2, X-11, X-12
ENM-09 Tokens de motion (--st-dur-1..6, --st-ease-*) sin cambiar valores DS YAML F-39: 26 piezas medidas
ENM-10 Aplanar T06 a bg-subtle o registrar un cuarto uso del tinte DS §1c D tensión 5
ENM-11 Nomenclatura no-campaña (L-30): el tipo video entra en la lista (video_<sku>_9x16.mp4, video_institucional-poster_16x9.jpg); el póster de producto sigue siendo <sku>_video-poster_{ratio}.jpg DS §11 §1.5 / cap.07 §Nomenclatura Lead: V01-V03 y B06/H02 usaban cuatro patrones distintos para el mismo esqueleto

Deuda de desarrollo (consolidada; la prioridad de performance se detalla en 09)

ID Deuda Impacto Origen
DEV-01 Velo del panel del hero 92 → 96 % kicker cian 4.35 → 4.93:1 sobre arte claro L-01
DEV-02 Scrim de dots n900 30 → 60 % 1.86 → 4.12:1 L-02
DEV-03 .badge-new sobre primary-text 3.45 → 5.84:1 L-03
DEV-04 .on-navy (ring inverso) en CTA del hero, lámina SterenCard, panel de banda, banner de landing, cabecera de servicio foco visible sobre navy L-04
DEV-05 padding-top del cintillo ≥ 50 % de su alto cuando la media es escena texto fuera del fundido de la máscara L-05
DEV-06 Colapsar el hero móvil sin A02 (hoy hueco gris 390×292) «los estados no mienten» L-08
DEV-07 Campo A02 en config + <source media="(max-width:767px)"> + <link rel="preload"> del hero móvil con arte; LCP L-08, X-15
DEV-08 Clase por origen --escena + object-fit: cover en T01/T03/T04 escenas sin bandas blancas L-11
DEV-09 OG 1200×630 derivada (producto, categoría, home) + og:image:width/height/alt compartir con imagen correcta L-15
DEV-10 min-height por breakpoint de .hv-embed/.pv-embed (medido en calidad2); retirada solo fuera del viewport; token --st-fs-h inexistente CLS de Terrific L-18
DEV-11 Facade de Vimeo en Nosotros (póster + play + CC + transcripción + title) 0 iframes eager L-19
DEV-12 Cron oEmbed de Vimeo para pósters reales (377/378) → desbloquea P05 y V02 video con póster real; reels L-20
DEV-13 Atajos de tiles a PLP filtrado (landing.phtml:97) conversión de la landing L-23
DEV-14 Campo alt propio del hero; vigente_hasta obligatorio con campaña; data-campaign; hero-sc-cta AT, vigencia, medición L-24
DEV-15 Un badge sobre la foto en <768 40 % de foto tapada L-25
DEV-16 T06 sin degradado registro de overlays L-26
DEV-17 Panel del hero alineado al container ≥ 1520; insets 10 → 8/12; h2 de la lámina SterenCard a 22 consistencia L-27
DEV-18 www.youtube-nocookie.com en CSP video YouTube con sin_cookies L-29
DEV-19 Reloj del aviso bajo reduced-motion (cascada del interruptor global) el reloj miente L-29
DEV-20 Campos de carga para A3 (Aprende), A4 (tiendas), A6 (patrimonio), A12 (escena), avatar del Q&A slots publicables sin despliegue inventario huecos 1
DEV-21 Uploader de categoría: aceptar WebP en el servidor o dejar de prometerlo en el cliente subida coherente inventario huecos 6
DEV-22 Resize de small_image en carruseles del home, #rel, panel de banda, buybar, #juntos, sugeridos (usar category_page_grid 480²) −84 % home / −88 % PDP de bytes de imagen H P0
DEV-23 Resize de landing_image (tile 688, chip 38) antes de repoblar a 800² evita 21× de sobre-resolución en chips H P0
DEV-24 srcset/sizes en todos los slots; decoding="async" en hero, PLP, carruseles, PDP; fetchpriority en el héroe del mosaico y de la landing LCP, bytes H P1/P2
DEV-25 Favicon propio (hoy el de Magento) y logo SVG (hoy PNG 300×80: 0.79× a DPR 3) marca inventario huecos 11-12
DEV-26 width/height en tiles de landing; max_file_size en el campo del hero CLS defensivo; peso acotado inventario huecos 10, 22
DEV-27 Iframe del facade de video nace dentro del <button> (pdp.js:335-340) anidamiento inválido; foco G
DEV-28 Visor del PDP con aspect-ratio del proveedor (reels 9:16 quedarían pillarboxed) video vertical F-22

Deuda de contenido (no de código): CONT-01 re-sesión del retrato de servicio sobre navy · CONT-02 CTA «Explora Smart Home» · CONT-03 13 fotos de departamento (landing_image) · CONT-04 2 escenas por categoría (A12) · CONT-05 fotos A3/A4/A6 y avatar · CONT-06 embedding_id de Terrific por categoría · CONT-07 etiquetas cortas de familia para nombres largos del árbol.

Deuda documental: DOC-01 manual v1.0 §5.1 (2304×405 «siempre», 2520 desde 834) y §5 (techos 300/250/200 KB por encima del contrato) · DOC-02 etiquetas de los ph-slot (2700×680 → 2880×720; A3 1600×1200 → 1600×900; A12 1600×1200 → 1400×880) · DOC-03 enmiendas ENM-01…10 al DS.

Glosario

Término Significado en esta guía
Slot Espacio del tema que pinta un medio con contrato de datos (imagen, alt, vigencia, copy). Catálogo cerrado (02)
ph-slot Espacio reservado sin arte; en producción es mudo (ph-slot--mudo), fuera de producción muestra la etiqueta de entrega
Packshot Foto de producto 1:1 sobre blanco puro, sin sombra, lado largo al 90 % (_x1); las secundarias _x2.._x5
Escena Foto de contexto (producto en uso en un lugar mexicano real) para T03/T04 (1.6:1) y el hero (4:1 / 4:3)
Cintillo de texto (B01) Franja HTML de 40-48 px bajo el hero. Cintillo de tile = el velo blanco con máscara sobre el pie de la foto (cap.27). Nunca «cintillo» sin apellido
Velo Scrim del sistema para texto sobre foto: navy (hero) o blanco (tile); receta única (R-15)
Friso Variante del velo en el retrato de servicio (navy 92 → 0 sin blur) — excepción E-8
Moneda Círculo blanco con aro que aloja un packshot sobre navy (108/76 px en B02; 40 px en chips)
Zona segura (safe area) Fracción del asset que sobrevive a todas las ventanas de recorte y a las zonas de UI
Subject box Rectángulo del asset donde vive el sujeto (producto, rostro) para sobrevivir todos los estados
Punto focal Centro de interés del asset (fracciones x, y) que el sistema conserva con object-position
Ventana de recorte Parte del asset visible en una caja dada (object-fit: cover): ratio caja ÷ ratio asset
Tres estados móvil <768 · tablet 768-1023 · desktop ≥1024 (siete anchos de verificación)
HOY / OBJETIVO Lo que el pipeline real permite (JPG/PNG sin resize en campaña y categoría) / lo que el DS promete (AVIF/WebP + srcset)
Tema de temporada Child theme (steren2026-patrio) que viste el sitio como capa apagable; única superficie de ornamento folclórico
A01…A15 Catálogo de assets (02 §Assets); un asset alimenta uno o varios slots
E / D / H · X · L · DEV · ENM Marcas: existente / derivada / propuesta · contradicción resuelta · decisión del Lead · deuda de desarrollo · enmienda al DS

Changelog

Versión Fecha Cambios
1.0 2026-09-10 Primera versión: auditoría del DS, taxonomía (40 componentes, 15 assets), reglas generales R-01…R-45, art direction system (25 criterios), 40 fichas, responsive, assets, accesibilidad, performance, QA (PASS/WARNING/FAIL), gobernanza. Equipo: Lead + 8 especialistas

12Así sí / así no — galería de comprobación

Solo los pares GOOD / BAD de la guía, uno tras otro, con lo mínimo para saber qué se está viendo, en qué parte de la página vive y qué comprobar antes de dar una pieza por buena. Cada bloque enlaza a la ficha completa (plano, medidas, safe areas, assets, accesibilidad, performance); el veredicto formal PASS / WARNING / FAIL sigue siendo el del capítulo 10.

Cómo usarla: localiza el componente por su ID (H héroes · B bandas · T tiles · P producto), compara tu pieza con el par, y recorre la lista «Comprueba que…» / «Descarta si…». Si algo cae en «Descarta si…», la pieza no se entrega.

H01 · Hero de campaña

Construido en el tema Dónde: Home · láminas 1-2 (config home_hero_1/2) · Cubre: H01 · Ficha completa H01 →

La primera imagen del sitio. Arte de campaña SIN texto + panel navy del sistema (kicker · título · precio vivo · CTA · vigencia). Dos assets obligatorios: 4:1 y 4:3.

✓ Así sí (H01 a 1440)
Bafle amplificado Steren sobre una mesa de taller
Audio

Que la fiesta se oiga hasta la banqueta

$2,99000
Ver bafles
Vigencia: 1–30 sep 2026
58 % izquierdo limpiosujeto en el 40 % derecho
  • Un sujeto, un mensaje, un CTA
  • El precio es un campo (SKU vivo) pintado como cifra-héroe cian
  • Contexto: muro de color + mesa, sin degradados
  • El arte llega SIN texto; el panel navy con velo lo pone el sistema
  • Vigencia real en HTML
✕ Así no (el patrón de producción)
¡SÚPER OFERTA!
Sonido a otro nivel
Bafles y bocinas con hasta…
20%OFF
VER MÁS ›››
Promoción válida en productos seleccionados del 10 al 24 de septiembre 2026. No aplica con otras promociones. Consulta términos en steren.com.mx
texto rasterizadolegales en la imagen
  • Texto, precio y legales quemados en el JPG: no se traducen, no se leen con lector de pantalla, no se recortan bien
  • Degradado de moda y sello 20 % con outline: «típico de IA»
  • Dos CTAs y tres mensajes: no hay jerarquía
  • El precio no es vivo: miente al primer cambio
Bafle
Audio

Que la fiesta se oiga hasta la banqueta

$2,99000
Ver bafles

Móvil (390): el MISMO concepto re-encuadrado a 4:3 (A02), sujeto centrado y más grande; el copy va debajo en bloque navy con los dots. Nunca el 4:1 encogido: a 390 px el bafle mediría 40 px.

Hero de campaña: packshot compuesto sobre muro de color vs degradado con texto y sello (AD-01, AD-09, AD-13, AD-26, AD-27)

✓ Así sí — muro real + packshot + panel del sistema
Cámara Wi-Fi Steren sobre una mesa de madera, muro rosa real
Seguridad

Mira tu casa desde donde estés

$89900
Ver cámaras
Vigencia: 1–30 sep 2026
58 % izquierdo limpio · muro L* ≈ 50sujeto en x 58-84 %, apoyado, ≤2 dominantes
  • Un sujeto (packshot fiel), un contexto (muro + mesa reales), cero apoyo: 2 elementos
  • El arte llega mudo; kicker, título, precio vivo, CTA y vigencia son HTML sobre el velo navy
  • Bajo y alrededor del panel, medio tono (L* 40-60): el kicker cian conserva ≥4.5:1
  • Muro de un solo color mate = ancla mexicana; vivos ≈ 0 %, neón 0 %, 2 dominantes
✕ Así no — el patrón de producción
MES DE LA SEGURIDAD
Vigila tu casa
Cámaras Wi-Fi con hasta…
20%OFF
VER MÁS ›››
Promoción válida del 10 al 24 de septiembre de 2026 en productos seleccionados. No aplica con otras promociones. Consulta términos en steren.com.mx
texto, cifra y legales rasterizadosproducto centrado = bajo el panel
  • Degradado de moda como fondo: 0 anclas, rampa lisa = «típico de IA» (AD-09, AD-34)
  • Sello «20 % OFF» con outline y CTA amarillo neón: dos destructores (AD-23, AD-26)
  • Texto y legales en el JPG: no se traducen, no se leen, no sobreviven el recorte (AD-13)
  • Producto centrado bajo la zona del panel: overlap >0 y sin apoyo (AD-01, AD-02)

✓ Comprueba que…

  • Producto real en contexto mexicano real, un solo sujeto, en el 40 % derecho
  • Muro o mesa lisa en el 58 % izquierdo para que el panel respire
  • Dos crops del mismo concepto (4:1 y 4:3) entregados juntos
  • Precio por SKU, vigencia real, CTA a PLP filtrado

✕ Descarta si…

  • Texto, precio, %OFF, logos de campaña o legales dentro de la imagen
  • El 4:1 encogido como móvil
  • Producto centrado o a la izquierda (queda bajo el panel)
  • Degradados de moda, neones, sellos con outline, collage de recortes
  • Sin autoplay ni video; nunca más de 4 láminas

B02 · Banda de categoría

Construido en el tema Dónde: Home ×2 (home_carrusel_1/2) · Cubre: B02 · Ficha completa B02 →

La banda que vende: panel navy con una cifra medida por el sistema (mayor descuento real o mejor calificación) + carrusel de 4-12 tarjetas de la categoría. El único raster es el packshot del primer producto en la moneda.

✓ Así sí
Ofertas en

Smart TV Box y controles remoto

10%
de descuento máximo
Ver todas →
OFERTAAndroid TV Box Google Certificado
Android TV Box Google Certificado
SKU: INTV-1000
$1,390.00$1,251.00
● En stock
Agregar al carrito
OFERTAControl remoto universal Wi-Fi
Control remoto universal Wi-Fi
SKU: SHOME-160
$249.00$224.10
● En stock
Agregar al carrito
OFERTAAndroid TV Stick Google Certificado
Android TV Stick Google Certificado
SKU: INTV-900
$895.00$805.50
● En stock
Agregar al carrito
OFERTATeclado inalámbrico con touch pad
Teclado inalámbrico con touch pad
SKU: RM-325
$199.00$179.10
● En stock
Agregar al carrito
  • Una cifra-héroe (88/800 cian), medida por el sistema
  • Producto en moneda blanca con aro: el JPG blanco no se ve
  • Panel navy plano; el carril blanco es el contraste
  • CTA cian (territorio navy), «Ver todas» ≤ 18
✕ Así no
¡¡OFERTAS INCREÍBLES!!

Smart TV Box y controles remoto

10% · $1,251 · 4.5★
hasta 20 % OFF en TODO
Comprar ya →
OFERTAAndroid TV Box Google Certificado
Android TV Box Google Certificado
SKU: INTV-1000
$1,390.00$1,251.00
● En stock
Agregar al carrito
OFERTAControl remoto universal Wi-Fi
Control remoto universal Wi-Fi
SKU: SHOME-160
$249.00$224.10
● En stock
Agregar al carrito
OFERTAAndroid TV Stick Google Certificado
Android TV Stick Google Certificado
SKU: INTV-900
$895.00$805.50
● En stock
Agregar al carrito
OFERTATeclado inalámbrico con touch pad
Teclado inalámbrico con touch pad
SKU: RM-325
$199.00$179.10
● En stock
Agregar al carrito
  • Tres cifras compitiendo en 800: ninguna manda
  • Packshot a sangre sobre navy: «un parche recortado»
  • Radial sin superficie (166-300 px): «se lee como mancha»
  • Kicker gritado y CTA de compra en una banda que no compra

Banda de categoría: producto en moneda vs packshot a sangre sobre navy (AD-02, AD-09, E-17, E-29)

✓ Así sí — moneda blanca con aro
Ofertas en

Cámaras de seguridad Wi-Fi

10 %
de descuento máximo
Ver todas →
OFERTACámara Wi-Fi cubo 2K
Cámara Wi-Fi cubo 2K
SKU: CCTV-203
$999.00$899.00
● En stock
Agregar al carrito
OFERTAVideo timbre Wi-Fi
Video timbre Wi-Fi
SKU: CCTV-0960
$1,499.00$1,299.00
● En stock
Agregar al carrito
Cámara robotizada Wi-Fi
Cámara robotizada Wi-Fi
SKU: CCTV-219
$1,199.00
● En stock
Agregar al carrito
Cámara exterior PTZ
Cámara exterior PTZ
SKU: CCTV-235
$1,599.00
● En stock
Agregar al carrito
  • Producto sobre navy siempre en moneda blanca con aro: la misma _x1, ≥12 px de blanco alrededor, sujeto en el 70 % central
  • Navy plano sin degradado; una sola cifra (88 px cian, calculada por el sistema); el packshot no se retoca
  • El carril blanco de al lado es el contraste: no se le pone fondo
  • Vivos y neón del panel: 0 % (el color vive en los productos)
✕ Así no — packshot a sangre
Ofertas en

Cámaras de seguridad Wi-Fi

10 %
de descuento máximo
Ver todas →
JPG a sangre = parche
OFERTACámara Wi-Fi cubo 2K
Cámara Wi-Fi cubo 2K
SKU: CCTV-203
$999.00$899.00
● En stock
Agregar al carrito
OFERTAVideo timbre Wi-Fi
Video timbre Wi-Fi
SKU: CCTV-0960
$1,499.00$1,299.00
● En stock
Agregar al carrito
Cámara robotizada Wi-Fi
Cámara robotizada Wi-Fi
SKU: CCTV-219
$1,199.00
● En stock
Agregar al carrito
Cámara exterior PTZ
Cámara exterior PTZ
SKU: CCTV-235
$1,599.00
● En stock
Agregar al carrito
  • El mismo packshot pegado como cuadrado blanco sobre el navy: «se lee como un parche recortado» (cap.29.3, E-17)
  • El blanco del archivo compite con el panel: FAIL AD-09 (superficie del sistema dentro del raster)
  • Sin aro ni plato, la esquina del JPG corta la composición: FAIL D-26 / E-29
  • Nada cambia en el arte para arreglarlo: es la misma _x1; cambia el contenedor (moneda)

✓ Comprueba que…

  • Una cifra, un título, un CTA, una moneda
  • Categoría con ≥ 4 productos con oferta real o reseñas

✕ Descarta si…

  • JPG a sangre en el panel
  • Degradado en el panel (solo el módulo SterenCard de 1380 px conserva luz)
  • Cifra tecleada

T01 · Tile de departamento héroe (2×2)

Construido en el tema Dónde: Home · mosaico · Cubre: T01 · T02 (mosaico del home) · Ficha completa T01 →

El tile grande del mosaico «Compra por departamento»: la cara del departamento (imagen de categoría 1:1 sobre blanco) con nombre, conteo y tres atajos sobre cintillo.

✓ Así sí
Smart Home
Smart Home
168 productos
Cámaras Wi-FiApagadoresIluminación
TV y video
TV y video
296 productos
Audio
Audio
304 productos
Seguridad
Seguridad
136 productos
Energía
427 productos
  • Packshots sobre el mismo blanco del tile: el borde del archivo no existe
  • Escala óptica coherente: cada packshot al 85-90 % de su lienzo, misma ocupación entre vecinos (±0.12)
  • Cintillo con velo solo donde hay foto; el tile sin foto se lee elegido (glifo sobre tinte, cuerpo opaco)
  • Nombre 1 línea en los chicos; chips solo en el héroe
✕ Así no
Smart Home
¡NUEVO!
Smart Home
168 productos
Cámaras Wi-FiApagadoresIluminación
TV y video
TV y video
296 productos
Audio
Audio
304 productos
Seguridad
Seguridad
136 productos
Energía
Energía
427 productos
  • Escala rota: foco enorme, TV box diminuto (la falla medida en producción)
  • Texto quemado en la foto de categoría
  • Zócalo opaco con costura que corta la foto (it.14, superseded)
  • Tinte degradado como fondo del arte

Mosaico: escala coherente vs escala rota (AD-03, AD-24)

✓ Así sí — escala óptica coherente
Seguridad
Seguridad
136 productos
Cámaras Wi-FiAlarmasTimbres
Smart Home
Smart Home
168 productos
Audio
Audio
304 productos
Redes
Redes
58 productos
TV y video
TV y video
296 productos
  • Los cinco A03 al 86-92 % del lienzo: ratio bbox mayor/menor ≤1.5 (ocupación difiere ≤0.12)
  • El sistema pone el aire (contain + padding), la viñeta y la sombra e1→e2; el archivo no trae nada de eso
  • Un solo producto por tile, silueta canónica de la familia, legible a 122 px y a 30 px en el chip
  • Fondo 255 en el archivo = el mismo blanco del tile: el borde del JPG no existe
✕ Así no — escala rota
Seguridad
Seguridad
136 productos
Cámaras Wi-FiAlarmasTimbres
Smart Home
Smart Home
168 productos
Audio
Audio
304 productos
Redes
Redes
58 productos
TV y video
TV y video
296 productos
  • «Foco enorme, router diminuto»: ratio entre tiles >2 = FAIL AD-03 (la falla medida en la landing de producción, 22 §2)
  • A 0.42 el foco mide ≈36 px en el tile chico de 390: bajo el piso de 48 px (C-09)
  • El héroe a 1.65 toca los bordes y el hover ×1.09 lo corta (L-09: FAIL >92 %)
  • La escala rota se lee como cinco fotógrafos distintos: FAIL AD-24 (consistencia)

✓ Comprueba que…

  • La _x1 del producto representativo, al 85-90 % del lienzo, sobre blanco puro y sin sombra
  • Misma escala óptica que los tiles vecinos
  • Cargar landing_image en los 13 departamentos (hoy solo Smart Home; SMART_HOME.jpg es una composición celular+foco a 400×400 → WARNING)

✕ Descarta si…

  • Escenas o fondos de color en landing_image (se pintan con bandas)
  • Texto, badge o precio dentro de la imagen
  • Nombres de 3 líneas o 4 chips
  • Subir 2500×2500 «por si acaso»

T03 · Tile de familia héroe (escena)

Hueco reservado sin campo de carga Dónde: Landing · mosaico (2×2) · Cubre: T03 · T04 · T05 (mosaico de la landing) · Ficha completa T03 →

El tile grande del mosaico de la landing de departamento: la ÚNICA escena (foto de contexto) de la página, con el uso como titular, la familia + conteo como enlace y 2-3 atajos a PLP filtrado.

✓ Así sí
Enciende la casa desde el celular
Enciende la casa desde el celular
Iluminación inteligente · 23
Foco E27Regulables
Mira tu casa desde donde estés
Mira tu casa desde donde estés
Cámaras Wi-Fi · 33
Que el Wi-Fi llegue hasta el fondo
Que el Wi-Fi llegue hasta el fondo
Repetidores · 12
Cambia el apagador, no la instalación
Apagadores · 24
  • Escena solo en el héroe (y el medio): muro de color + mesa, producto en la cruz central, sobre el cintillo
  • Los 1×1 llevan packshot sobre blanco: la tipografía carga el significado
  • Título = USO con verbo; la familia + conteo es el enlace; chips solo en héroe y medio
  • Banner navy plano como un tile más (máx 1); tile tipo con glifo cuando no hay foto
✕ Así no
Iluminación inteligente
Iluminación inteligente
Foco inteligente RGB Wi-Fi 10 W E27 · 23 productos
Foco E27RegulablesExteriorVintage
Cámaras
Cámaras
Cámaras Wi-Fi · 33
Repetidores Wi-Fi extensores de señal de largo alcance
Repetidores Wi-Fi extensores de señal de largo alcance
Repetidores · 12
Kits
Kits
Kits · 2
  • Degradado de moda como escena y título = nombre de familia (sin uso)
  • Título de 2-3 líneas en un 1×1: el velo invade la foto
  • Familia con 2 productos como tile (regla: ≤2 productos no puede ser tile)
  • Banner con promoción y %: el banner de landing es SterenCard, no una oferta

✓ Comprueba que…

  • Interior mexicano real: muro de color, mesa de taller, changarro; manos operando el producto
  • Producto en la cruz central, sobre el cintillo
  • Luz natural, un solo producto protagonista (≤2 secundarios)

✕ Descarta si…

  • Stock nórdico, modelos posando, renders o IA
  • Texto, precio, logos en la escena
  • Producto en un borde (desaparece a 390)
  • Fondo degradado «de moda» en lugar de un lugar real

P01 · Packshot principal _x1

Vive en el catálogo (dato) Dónde: PLP, PDP, carruseles, feeds, OG · Cubre: P01 · Ficha completa P01 →

La foto de producto sobre blanco puro que alimenta todo: PLP, PDP, carruseles, moneda, feeds y OG. Es un DATO del catálogo (intocable): la guía no lo rediseña, lo mide y lo verifica.

✓ Así sí (P01 tal cual llega)
Proyector Steren
aire 5 %fondo 255 · sin sombralado largo = 90 %
  • Lado largo al 90 % del lienzo, centrado; 5 % de aire en los lados apretados (medido: 30/34 packshots)
  • Blanco puro en todo el perímetro: el borde del archivo desaparece en tarjeta, tile y moneda
  • Luz uniforme: negros con textura, altas luces sin recortar, ninguna sombra de contacto
  • Frente o 3/4 alto, verticales a plomo, logo y controles hacia cámara
✕ Así no
viñeta en el archivosombra duraproducto al 42 %
  • Viñeta y fondo gris dentro del archivo: en la tarjeta blanca se ve el cuadro del JPG (E-08 FAIL)
  • Sombra dura y proyectada: lum <235 bajo el sujeto (E-06 FAIL); en la moneda navy flota como recorte
  • Producto al 42 % «con aire generoso»: a 122 px mide 51 px y a 40 px es una mancha (E-02 FAIL)
  • Halo de recorte y borde «sticker» (E-09)

✓ Comprueba que…

  • Entregar la _x1 medida: 90 %, centro 0.50, blanco 255, sin sombra, ≥1200²
  • Un solo archivo por SKU que sirva del zoom al buybar
  • Re-lienzar packshots de terceros a la convención antes de cargar
  • Nombre del producto como alt donde la foto está sola; vacío donde el nombre ya es el enlace

✕ Descarta si…

  • Sombra de contacto, reflejo de mesa, fondo gris o «flotando» con halo
  • Producto al 45 % «para que respire» o tocando dos bordes
  • PNG transparente, GIF animado, texto, sello o badge dentro del archivo
  • Subir 2500×2500 de 600 KB «por si acaso»: baja entero en cada carrusel

P03 · Tarjeta de producto

Construido en el tema Dónde: PLP, carruseles, carrito · Cubre: P03 · Ficha completa P03 →

La unidad de la PLP, los carruseles y el carrito: packshot 1:1 contain sobre blanco, badges de texto en la esquina, nombre-enlace debajo y galería en tarjeta a demanda. Lo único construido que la guía verifica sobre el packshot (dato).

✓ Así sí
OFERTACámara Wi-Fi Full HD con visión nocturna
Cámara Wi-Fi Full HD con visión nocturna
SKU: CCTV-203
$899.00$699.00
● En stock
Agregar al carrito
Android TV Box 4K con control por voz
Android TV Box 4K con control por voz
SKU: INTV-1000
$1,299.00
● En stock
Agregar al carrito
1 badge en la esquina 10/10packshot al 90 %: misma escala óptica
  • Packshot tal cual, sobre el mismo blanco de la tarjeta; el producto se lee entero a 233 y a 153 px
  • Escala coherente entre vecinos: la ocupación difiere ≤0.12 (E-04)
  • Una etiqueta de texto en `.corner`; el descuento vive en la línea de precio (tachado + «Ahorra»)
  • Nada encima de la foto: ni velo, ni texto, ni sello
✕ Así no
OFERTANUEVOPOR TIEMPO LIMITADO
-20%OFF
Cámara Wi-Fi Full HD
SKU: CCTV-203
$699.00
● En stock
Agregar al carrito
¡NUEVO!
Android TV Box 4K
SKU: INTV-1000
$1,299.00
● En stock
Agregar al carrito
3 badges en 2 filas: 40 % de la fotopackshot al 45 %fondo de color + sombra + texto
  • Packshot al 45 % «con aire generoso»: a 153 px el producto mide 69 px y las etiquetas lo tapan
  • Tercera pastilla y dos filas de badges (FAIL D-21 / L-25); sello «-20 %» con outline: el % va en la línea de precio (D-35)
  • Fondo de color, sombra dura y «¡NUEVO!» quemado en la foto (E-30, E-19): no se traduce, no se lee, no se recorta
  • Escala rota entre vecinos (E-04 FAIL)

✓ Comprueba que…

  • Packshot al 90 % sobre blanco, tal cual; etiquetas como texto en .corner
  • Escala óptica igualada entre vecinos (E-04 ≤0.12)
  • Un badge sobre la foto en móvil; el resto al cuerpo
  • label de galería en las tomas para que la galería en tarjeta las nombre

✕ Descarta si…

  • Sello «-20 %», cinta, PNG o cualquier gráfico sobre la foto
  • Tres pastillas en listado; % o $ en la etiqueta
  • Fondo de color, sombra o texto dentro del packshot
  • Zoom o velo sobre la foto de tarjeta (no existen en el sistema)
MADS v1.0 · generado el 11 de septiembre de 2026 desde contenido/ + datos/ con build.py --cms (redesign-2026/70-multimedia-art-direction) · extensión formal del Design System 2026 · Steren México