04 · Sistema Visual — Play! Board Game Store

Sección 01

Fundamentos de Marca

Personalidad visual

Lúdica, rápida, confiable. Más editorial que tienda genérica. El sitio debe transmitir energía y entusiasmo por los juegos sin caer en lo infantil.

El "!" como identidad

El signo de exclamación rojo es el elemento más reconocible de Play!. Se usa como acento gráfico en fondos oscuros, máscaras decorativas y en el logo. Nunca sobre fondos claros.

Regla editorial

Titulares siempre en UPPERCASE (Barlow Condensed). El cuerpo en Poppins, nunca uppercase. Los precios y datos siempre en DM Mono para diferenciar información "de sistema" de contenido editorial.

3 Personas — recordatorio rápido

Persona	Perfil	Lo que el diseño debe hacer por ella
Andrea Mamá que regala	38, NSE B, Jesús María. No sabe qué juego comprar.	Quiz prominente en homepage. Filters por edad en catálogo. Cards con "Jugadores: 2-4, Edad: 8+" claramente visibles. Sin fricción en checkout con Yape.
Sebastián Gamer de grupo	27, NSE B+, Miraflores. Ya sabe qué quiere.	Búsqueda rápida. Stock en tiempo real. Cuotas PowerPay visibles antes del ATC. Sort por precio en catálogo. Checkout sin sorpresas.
Mathias Coleccionista Pokémon	19, NSE B/C, San Miguel. FOMO, preventas, originales.	Badge "100% Original · Distribuidor Autorizado" en todas las fichas TCG. Botón Pre-order visible. "Avísame cuando llegue" en agotados. Sección TCG claramente diferenciada en nav y palette.

9 Restricciones absolutas del sistema

#	Restricción	Por qué
1	No usar `transition: all`	Provoca repaints innecesarios — solo propiedades específicas
2	No font-size <16px en inputs	iOS Safari hace auto-zoom en inputs con font-size menor — destruye la UX mobile
3	No placeholders como labels	El texto desaparece al escribir — la persona pierde el contexto del campo
4	No auto-ocultar la navbar al scroll	Play! vende por categorías y búsqueda — la nav debe estar siempre accesible
5	No add-to-cart en hover (desktop solamente)	En mobile, hover no existe — el botón debe estar siempre visible en la card o en la PDP
6	No infinite scroll	Imposible compartir URL de producto "a mitad de página", rompe el historial del navegador
7	No validar en tiempo real (keystroke)	Genera estrés — validar solo al salir del campo (blur)
8	No `--play-green` en texto ≤13px sobre blanco	Ratio de contraste 3.1:1, falla WCAG AA (requiere 4.5:1)
9	No elemento decorativo sobre el producto estrella	La imagen del juego es el producto — el "!" decorativo va solo en fondos oscuros como overlays

Sección 02

Tokens — Color

──────
play-red
#E42528

──────
play-black
#0A0A0D

──────
play-paper
#F5F3EE

──────
play-ink
#101114

──────
play-mid
#6F665B

──────
play-rule
#D9D1C3

──────
play-card
#16181D

──────
play-green
#26B56C

──────
play-yellow
#FFCB05

Token	Dónde se usa	Dónde NO se usa
`--play-red`	Botones ATC (primario), badges "Nuevo"/"Oferta"(bg), links activos, titulares en PDP, "!" del logo, borders de focus	Texto corrido (fatiga visual), fondos de página entera
`--play-black`	Footer, hero bg, announcement bar, botón pre-order, fondos de cards destacados, texto del logo en header	—
`--play-paper`	Fondo del sitio, fondo de cards, filtros sidebar, carrito (bg)	—
`--play-ink`	Todo el texto principal sobre fondos claros	Sobre fondos oscuros (usar blanco)
`--play-mid`	Labels, captions, metadata, placeholders, hints de formulario	Texto principal (demasiado suave)
`--play-rule`	Todos los bordes y divisores del sitio	Texto (contraste insuficiente)
`--play-card`	Cards sobre fondo oscuro (carrusel, nav destacados)	—
`--play-green`	Badge "Oferta" (bg verde + texto blanco), dot de stock OK, toast éxito, íconos ≥16px	Texto ≤13px sobre #fff (ratio 3.1:1, falla WCAG AA)
`--play-yellow`	Exclusivo sección Pokémon TCG: badges, stars de rating, detalles decorativos	Cualquier sección no-TCG — contamina la identidad de marca

Sección 03

Tokens — Tipografía

Display — Barlow Condensed 700/900

Titulares H1–H3. Siempre UPPERCASE. letter-spacing 0.01–0.04em. Genera impacto visual y velocidad de lectura.

Cuerpo — Poppins 400/500

Body copy, descripciones, botones, nav items. Elegido sobre Barlow para cuerpo: mejor legibilidad en 12-14px, contraste óptico más fuerte contra los titulares Condensed.

Datos — DM Mono 400/500

Precios, badges de estado, datos de juego (jugadores/duración), códigos de cupón. La tipografía monospace separa la "información de sistema" del contenido editorial.

Display XL Barlow Condensed 900
64px / 52px mobile
UPPERCASE

Juegos
para todos

Display LG Barlow Condensed 900
48px / 38px mobile

Novedades de la semana

Heading 2 Barlow Condensed 700
28px / 24px mobile

Catan — El Juego de Colonos

Body LG Poppins 400
16px, lh 1.65

Construye asentamientos, recluta recursos y domina la isla en este clásico del juego moderno.

Body SM Poppins 400
13px, lh 1.55

Envío gratis desde S/150 · Recojo en Jesús María · Pago en cuotas sin intereses

Mono LG — Precio DM Mono 500
20px

S/189.90 o 3 cuotas de S/63.30

Mono SM — Badge DM Mono 400
10-11px

Nuevo –20% 2–4 jugadores · 60 min · 10+

Sección 04

Tokens — Espaciado, Radio, Sombras y Transiciones

Border Radius

xs · 4px
badges, inputs

sm · 6px
inputs, selects

md · 10px
cards, botones

lg · 14px
mega cards, hero

pill · 9999px
pills, search bar

Justificación: el cliente usa esquinas redondeadas en su brand actual. Las puntas angulosas transmiten agresividad — no calidez. Andrea (mamá que regala) necesita un sitio que invite. La escala 4/6/10/14 da consistencia sin dejar de ser reconocible.

Espaciado — escala 4px

Token	Valor	Uso típico
`--sp-1`	4px	Gap mínimo entre icono y texto en badges
`--sp-2`	8px	Padding horizontal de badges, gap entre chip y ×
`--sp-3`	12px	Padding compacto (nav items, chips, cart icon)
`--sp-4`	16px	Padding base de componentes (cards, inputs)
`--sp-5`	20px	Gap entre botones en un mismo grupo
`--sp-6`	24px	Padding interno de cards grandes, mega menu cols
`--sp-7`	32px	Gap entre secciones relacionadas (data bar ↔ ATC)
`--sp-8`	40px	Margen entre bloques de página (reseñas, related)
`--sp-9`	56px	Padding vertical de secciones homepage
`--sp-10`	80px	Spacing mayor, hero padding vertical

Sombras

Token	Valor CSS	Cuándo usar
`--shadow-rest`	`0 0 0 1px var(--play-rule)`	Cards en estado de reposo (catálogo, homepage). No usar sombra real — genera demasiado "peso" visual en grids de 4 columnas.
`--shadow-raised`	`0 4px 16px rgba(10,10,13,0.10)`	Hover de cards, modales pequeños, dropdowns — indica elevación interactiva.
`--shadow-float`	`0 8px 32px rgba(10,10,13,0.18)`	Cart drawer, mega menu, WhatsApp FAB, toast notifications — máxima elevación.

Transiciones

Token	Valor	Uso
`--t-micro`	100ms	Hover de color de fondo, cambios de opacidad sutiles
`--t-fast`	150ms	Hover transform (cards), color de botones
`--t-base`	200ms	Delay de mega menu, toggles, checkboxes
`--t-mid`	250ms	Entrada de modales y drawers
`--t-slow`	300ms	Salida de cart drawer, backdrop de modales. Máximo según Nielsen NN Group para no sentirse lento.

Easing	Valor	Cuándo usar
`--ease-out`	`cubic-bezier(0.0, 0.0, 0.2, 1.0)`	Entradas — el elemento llega rápido y frena suavemente
`--ease-in`	`cubic-bezier(0.4, 0.0, 1.0, 1.0)`	Salidas — el elemento sale rápido (exit faster than enter)
`--ease-spring`	`cubic-bezier(0.34, 1.56, 0.64, 1)`	Micro-bounces de confirmación: cart add, toggle on, checkbox mark

Sección 05

Sistema de Íconos

Librería: Lucide Icons

MIT license. 1,400+ íconos. Stroke 2px, round cap/join. currentColor — el color se controla con CSS. Consistente en todos los breakpoints. Indistinguible de íconos custom en producción.

Por qué no emojis en UI

Los emojis renderizan diferente en iOS, Android y Windows — el 🚗 de Cuy Games es un ejemplo real. No se pueden estilizar con CSS. Señalan "hecho en casa" a nivel de percepción de marca.

Por qué no íconos en nav horizontal

Nike, ASOS, Gymshark, Pokémon Center, Zatu Games — todos usan texto solo en el nav principal. Ícono + texto × 7 aplana la jerarquía visual y genera ruido. Los íconos van en mega menu interior y mobile drawer.

Escala de tamaños

Tamaño	Cuándo usar	Stroke
16px	Inline con texto (labels, badges, mensajes de estado)	1.5px
20px	Componentes medianos (nav desktop, data bar, botones con ícono)	2px
24px	Ítems del mobile drawer, empty states, iconos destacados	2px
32px+	Ilustrativos en secciones de contenido (quiz, empty states grandes)	1.5px

Mapa de íconos — todos los usados en el theme

Search
búsqueda

ShoppingCart
carrito nav

User
cuenta

Menu
hamburguesa

X
cerrar / eliminar

Heart
wishlist

Truck
envío

MapPin
tiendas / recojo

Clock
duración

Users
jugadores

UserRound
edad

Gauge
complejidad

Globe
idioma

SlidersHorizontal
filtros

ArrowUpDown
ordenar

Bell
avísame

Plus
cantidad +

Minus
cantidad −

Check
éxito / agregado

ChevronDown
nav dropdown

ChevronRight
accordion / link

Star (filled)
rating

MessageCircle
WhatsApp (#25D366)

Lock
pre-order / seguro

Package
producto / recojo

ChevronLeft
carrusel / prev

ChevronUp
acordeón cerrar

AlertCircle
error / validación

Info
tooltip / aviso

Eye
mostrar contraseña

EyeOff
ocultar contraseña

ZoomIn
lightbox galería

ArrowRight
CTA "Ver todos →"

Mail
newsletter / contacto

Phone
tiendas / contacto

Calendar
eventos / fechas

Tag
cupón / descuento

ExternalLink
BGG / Google Maps

Ícono Lucide	Elemento del theme	Tamaño	Color
`Search`	Barra de búsqueda nav, search modal	20px	`--play-mid` (reposo) → `--play-ink` (focus)
`ShoppingCart`	Ícono del carrito en nav	20px	#fff (sobre nav negro)
`User`	Cuenta / login en nav	20px	#fff
`Menu`	Hamburguesa mobile	24px	#fff
`X`	Cerrar drawer, cerrar modal, eliminar chip	20px	`--play-mid`
`Heart`	Wishlist en cards	20px	`--play-rule` (vacío) → `--play-red` (activo, filled)
`Truck`	Info de envío en PDP y carrito	16px	`--play-mid`
`MapPin`	Tiendas, recojo en Jesús María	16px	`--play-red`
`Clock`	Product data bar — duración	20px	`--play-mid`
`Users`	Product data bar — jugadores	20px	`--play-mid`
`UserRound`	Product data bar — edad	20px	`--play-mid`
`Gauge`	Product data bar — complejidad	20px	`--play-mid`
`Globe`	Product data bar — idioma	20px	`--play-mid`
`SlidersHorizontal`	Botón filtros en mobile catálogo	20px	`--play-ink`
`ArrowUpDown`	Sort dropdown	16px	`--play-mid`
`Bell`	Botón "Avísame cuando llegue"	16px	`--play-mid`
`Plus / Minus`	Quantity selector +/−	16px	`--play-ink`
`Check`	Estado success en botón ATC, checkbox	16px	#fff (sobre verde)
`ChevronDown`	Nav items con mega menu, acordeones	16px	inherit
`ChevronRight`	Links de acción, breadcrumb separator	16px	inherit
`ChevronLeft`	Carrusel prev, paginación ‹, galería anterior	16px	inherit
`ChevronUp`	Acordeón cerrar (estado expandido)	16px	inherit
`Star`	Rating (filled + color `--play-yellow`)	14px	`--play-yellow` filled
`MessageCircle`	WhatsApp FAB y CTA en PDP	24px	#25D366 (color oficial WhatsApp)
`Lock`	Botón pre-order, trust signal checkout	16px	#fff
`Package`	Sección recojo en tienda	20px	`--play-mid`
`Loader2`	Spinner de carga (CSS `animation: spin 1s linear infinite`)	16px	inherit
`AlertCircle`	Toast de error, validación de formulario, mensaje de stock 0	16px	`--play-red`
`Info`	Toast informativo, tooltip de ayuda	16px	`--play-mid`
`Eye / EyeOff`	Mostrar/ocultar contraseña en login y registro	16px	`--play-mid`
`ZoomIn`	Trigger del lightbox en galería de producto	20px	#fff (sobre overlay oscuro)
`ArrowRight`	CTAs inline "Ver todos →", links de sección	16px	inherit
`Mail`	Input newsletter en footer, página de contacto	16px	`--play-mid`
`Phone`	Store locator — teléfono de cada tienda	16px	`--play-mid`
`Calendar`	Event cards — fecha del evento (blog/eventos)	16px	`--play-mid`
`Tag`	Campo de cupón en el carrito	16px	`--play-mid`
`ExternalLink`	Link a BoardGameGeek, Google Maps desde tiendas	14px	`--play-mid`

Excepción: Brand Icons — Simple Icons

Lucide no incluye logos de marca. Para Instagram, Facebook y TikTok se usa Simple Icons (MIT license, simpleicons.org). Es la única excepción a la regla Lucide. Estos íconos son filled, no stroke — estilo diferente justificado porque son logos, no UI icons.

Instagram
Simple Icons

Facebook
Simple Icons

TikTok
Simple Icons

Ícono	Librería	Uso en theme	Tamaño	Color
`Instagram`	Simple Icons	Footer redes sociales, página "Síguenos"	20px	`--play-mid` → `--play-ink` hover
`Facebook`	Simple Icons	Footer redes sociales	20px	`--play-mid` → `--play-ink` hover
`TikTok`	Simple Icons	Footer redes sociales	20px	`--play-mid` → `--play-ink` hover

Regla de oro: Un solo ícono de Lucide siempre se ve mejor que el emoji equivalente. El emoji 🚚 y el SVG Truck de Lucide hacen lo mismo — pero el SVG escala perfectamente, se colorea con CSS, y no cambia entre dispositivos. Nunca mezclar: si el theme arranca con Lucide, todos los íconos UI son Lucide. Los logos de redes sociales (Instagram, Facebook, TikTok) son la única excepción documentada — se usan desde Simple Icons.

Sección 06

Fotografía e Ilustración

Cuy Games — su apuesta

Mascota ilustrada en cada banner de campaña (Semana Santa, PowerPay, Black Friday). El cuy hace algo diferente en cada fecha. Requiere un ilustrador pagado por campaña, ~4-6 veces al año.

Funciona porque sus productos (juegos casuales, puzzles) son visualmente similares entre sí — necesitan personalidad extra para diferenciarse.

Play! — nuestra apuesta

El producto es el héroe visual. Las cajas de juegos de mesa son arte editorial — Catan, Dixit, Twilight Imperium cuestan miles de dólares en ilustración de packaging. La UI los deja brillar.

Ilustración solo en 5-6 momentos clave de alta conversión. El resto es fotografía bien producida + tipografía.

Tipo 1 — Banners del Hero (homepage slider)

!

NUEVA EXPANSIÓN

Catan
Seafarers

Ver ficha

PNG
PRODUCTO

POKÉMON TCG

Temporal
Forces

Ver colección

PNG
PRODUCTO

Propiedad	Especificación
Fondo	Siempre `--play-black` o variante muy oscura. Nunca fondo blanco en el hero — señala genérico.
Elemento decorativo	El "!" gigante como marca de agua (opacity 0.04–0.07). Solo sobre fondo oscuro.
Imagen de producto	PNG con transparencia del juego estrella — recortada, colocada a la derecha, escala libre. Sin sombras ni marcos.
Tipografía	Barlow Condensed 900, uppercase, máximo 3 líneas. CTA en botón rojo (primario) o amarillo (TCG).
Actualización	El equipo de Play! cambia las imágenes y textos desde el Theme Editor sin tocar código.
Proporción	Desktop: 100% ancho × 520px alto. Mobile: 100% ancho × 380px alto. Imagen de producto: `object-fit: contain`.

Tipo 2 — Fotografía de Producto (cards y PDP)

✓ Correcto

Caja 3/4 · fondo neutral

✓ Correcto

PNG transparente

BAJA RESOLUCIÓN

✗ Evitar

Imagen borrosa / <800px

✗ Evitar

Ángulo inconsistente

Especificación	Valor
Ángulo estándar	3/4 view (vista diagonal frontal) — muestra la profundidad de la caja. Consistente en todo el catálogo.
Fondo	PNG con transparencia (preferido) o JPG con fondo blanco/neutral `#F0EDE6`. Nunca fondos de color diferentes por producto.
Resolución mínima	800×1066px (ratio 3:4). Ideal: 1200×1600px. Shopify genera los srcsets automáticamente.
Fotos adicionales	PDP: mínimo 3 fotos. 1) Caja frontal · 2) Componentes desplegados · 3) Juego en acción (lifestyle). La segunda foto es la que aparece en hover de la card (Gymshark pattern).
Fuente	1) Imágenes de alta resolución del proveedor/editorial · 2) Fotos tomadas por Play! con fondo blanco + luz natural. No usar imágenes de Google o Amazon.

Tipo 3 — Fotografía Lifestyle (homepage, blog, quiz)

REFERENCIA VISUAL

Familia jugando Catan
→ captura Andrea

Escena	Persona objetivo	Dónde se usa
Familia en mesa (4 personas, juego desplegado, risa)	Andrea	Homepage quiz block, blog, about
Grupo de amigos jóvenes (party game, noche)	Sebastián	Hero alternativo, categoría Party
Par de manos sosteniendo cartas TCG (foco en el arte)	Mathias	Hero TCG, categoría Pokémon
Juego desplegado en flatlay (componentes articulados)	Sebastián	Categoría Estrategia, blog
Interior de tienda Play! con producto en mano	Todos	Página Nuestras Tiendas, About

Lo que Cuy Games no puede hacer: fotografía lifestyle real de sus tiendas Play! con clientes y productos. Eso es imposible de comprar o generar con IA — es autenticidad de marca. Cada foto real de Play! vale más que cualquier ilustración de un cuy genérico.

Tipo 4 — Flatlays de Categoría (collection headers, mega menu)

props: dados · tokens · tablero

Juegos de Mesa
fondo oscuro

props: cartas fanned · sobres

Pokémon TCG
acento amarillo

props: piezas esparcidas

Rompecabezas
fondo neutro

Los flatlays se disparan una vez por categoría principal. Son reutilizables de temporada en temporada — no requieren actualización constante como las ilustraciones de Cuy. Setup básico: mesa de madera oscura + luz natural lateral + los componentes del juego más icónico de la categoría.

Ilustración Selectiva — los 6 momentos

Solo 6 piezas ilustradas en todo el sitio. Cada una en un momento de alta conversión o alta emoción. El estilo: flat vector, palette reducida de tokens Play! (rojo, negro, papel, verde), trazos limpios. Herramientas: Figma + Midjourney como base de referencia visual.

#	Momento	Descripción de la ilustración	Impacto
1	Opciones del Quiz (4 ilustraciones)	Una ilustración por respuesta. Ej: "Para toda la familia" → mesa con 4 siluetas. "Para amigos gamers" → manos sosteniendo cartas. Flat, cálido, sin detalles complejos.	Alta — el quiz es la propuesta diferencial de Play!. Una opción visual auto-avanza mejor que texto solo.
2	Resultados del Quiz	Celebración: el "!" con mini confetti o estrellas. Aparece cuando se muestran las 3 recomendaciones. Micro-animación de entrada (scale 0→1, ease-spring).	Alta — momento emocional clave. Captura email de Klaviyo en este estado.
3	Empty Cart	Una caja de juego vacía / abierta con el "!" dentro. Texto: "Tu carrito está vacío". CTA al quiz o al catálogo.	Media — retención en momento de abandono potencial.
4	No results (búsqueda vacía)	Dado con signo de interrogación en la cara. "No encontramos juegos con esos filtros." CTA: Limpiar filtros.	🟡 Medio — evita que el usuario abandone el catálogo.
5	Página 404	El "!" tumbado / caído. "Esta página no existe, ¿pero por qué no buscar un juego?" CTA al homepage.	🟡 Medio — recuperación de sesión. Cuy Games tiene una 404 completamente genérica.
6	Newsletter / captura email	Sobre con el "!" como sello de lacre. "Entérate primero de preventas y eventos." Aparece en footer y modal.	Baja-media — mejora tasa de suscripción vs. formulario desnudo.

Resumen competitivo: Cuy Games invierte en ilustración continua de campañas — es su diferenciador para un mercado casual. Play! invierte en fotografía de producto de calidad + 6 ilustraciones estratégicas. Menor costo, mayor impacto en el segmento de mayor valor (Sebastián comprando Twilight Imperium, Mathias coleccionando Pokémon, Andrea guiada por el quiz). El producto es el héroe — la UI lo presenta.

Sección 07

Componentes Base

5.1 Botones — 6 tipos + estados

Primary

Secondary

Ghost

Ghost Dark

Pre-Order

Text / Danger

Estado	Especificación
Default	Según tipo. Min-height 44px (toque seguro). Poppins 600. Border-radius 10px (md).
Hover	Primary: background oscurece 8%, `translateY(-1px)`, sombra roja 0.28. Secondary: bg más claro. Ghost: bg rgba(red, 0.06). Transición 150ms.
Active / Pressed	`translateY(0)`, sombra desaparece. Sensación de "clic físico".
Focus visible	`outline: 3px solid var(--play-red); outline-offset: 3px`. Solo con teclado (:focus-visible).
Disabled	Background `--play-rule`, texto `--play-mid`, cursor not-allowed. No opacity — el contraste con opacity puede fallar WCAG.
Loading	Opacity 0.7, cursor wait, texto cambia a "Agregando…" (spinner SVG inline).
Success (post-cart-add)	Background cambia a `--play-green`, ícono ✓ + "Agregado". Dura 2s, luego vuelve al estado default con `ease-spring`.
Pre-order	Background `--play-black` (nunca rojo) — diferencia visualmente de una compra inmediata. Texto "Reservar · Pre-Order".

Regla icono+texto: el ícono siempre precede al texto (izquierda). Gap 6px. Nunca ícono solo en botones con texto visible — solo en el botón de carrito en la nav (icon + badge de cantidad).

5.2 Inputs

Nombre completo

Email

Código de descuento Se aplicará en el checkout

Número de DNI Debe tener 8 dígitos

Regla	Especificación
Font-size	16px mínimo obligatorio. iOS Safari hace zoom automático en inputs con font-size menor a 16px — rompe la UX mobile.
Label	Siempre visible encima del input. Nunca usar placeholder como label: desaparece al escribir, el usuario pierde contexto.
Validación	Solo al salir del campo (blur), nunca por keystroke. El error aparece debajo con `DM Mono 10px #C00`.
Focus	Border-color cambia a `--play-red` + box-shadow `0 0 0 3px rgba(228,37,40,0.12)`.
Border-radius	6px (sm). El search bar usa pill (9999px).

5.3 Checkbox, Radio y Toggle

✓

Familiar

Estrategia

2–4 jugadores

5–8 jugadores

Envíos activos

Notificaciones

Tap target mínimo 44×44px para todos los controles de formulario en mobile — el área clickeable excede la visual. Usar padding en el label envolvente para ampliar la zona.

5.4 Badges y Tags

Nuevo –20% Agotado Pre-Order Pokémon 100% Original Distribuidor Autorizado Staff Pick

Badge	Cuándo se muestra	Posición en card
Nuevo	Producto creado hace ≤30 días (lógica automática por Shopify)	Top-left sobre imagen
Oferta	compare_at_price > price	Top-left, apilado debajo de "Nuevo" si aplica
Agotado	stock = 0	Badge gris sobre imagen + overlay semitransparente
Pre-Order	tag = `pre-order`	Top-left, color negro
100% Original	Todas las fichas TCG/Pokémon — siempre	Debajo del título en PDP

5.5 Toasts y Alertas

¡Agregado al carrito! Catan — El Juego de Colonos × 1

×

Stock insuficiente Solo quedan 2 unidades disponibles

×

¡Envío gratis desbloqueado! Tu pedido supera S/150

×

Propiedad	Valor
Posición	Bottom-right en desktop / bottom-center en mobile. Sobre WhatsApp FAB (z-index superior).
Auto-dismiss	4 segundos. Siempre con botón × para cerrar manualmente.
Stacking	Máximo 3 simultáneos. El más nuevo empuja los anteriores hacia arriba.
Animación	Entrada: `translateY(100%) → translateY(0)`, 250ms ease-out. Salida: opacidad a 0, 200ms ease-in.
ARIA	`role="status" aria-live="polite"` para éxito. `role="alert" aria-live="assertive"` para errores.

5.6 Skeleton Loaders

Los skeletons preservan exactamente el layout del componente real — mismas dimensiones, mismo aspect-ratio. Animación shimmer de izquierda a derecha, 1.6s, infinita. Se respeta prefers-reduced-motion: reduce — sin animación, fondo estático.

5.7 Empty States

Tu carrito está vacío

¿No sabes qué comprar? Prueba el quiz.

Sin resultados

No encontramos juegos con esos filtros.

Sin reseñas aún

¡Sé el primero en reseñar este juego!

El componente "Vistos recientemente" no se renderiza si hay menos de 2 productos en el historial — evitar mostrar una fila de 1 card que parezca un error de layout.

Sección 08

Navegación

6.1 Announcement Bar

Envío gratis desde S/150

Recojo en Jesús María

3 cuotas sin intereses con PowerPay

Background #000. 3 mensajes rotativos o estáticos. Poppins 11px. La barra desaparece al scroll (única excepción a la regla de no-auto-ocultar — porque es decorativa, no navegacional).

6.2 Header / Nav Principal (Desktop)

Envío gratis desde S/150 3 cuotas sin intereses

Play!

Buscar juegos, expansiones, accesorios…

3

Propiedad	Especificación
Estructura	Doble fila. Fila superior 56px (logo + search + iconos). Fila nav 40px (categorías). Total: 96px.
Background	`#fff` en ambas filas. Position: sticky top:0. z-index: 1000. Sombra `0 1px 4px rgba(0,0,0,.08)` al scroll.
Barra de búsqueda	Background `--play-paper`. Ancho máximo 420px, centrado. Es el elemento principal de la fila superior — invita a buscar en catálogo amplio.
Indicador activo	Border-bottom 2px `--play-red` en el ítem de la sección actual. Color texto: `--play-black`.
CTA "Encuentra tu Juego"	Último ítem del nav, alineado a la derecha. Color `--play-red`, font-weight 600. Sin borde — se distingue por color, no por forma.
Iconos user + carrito	Color `rgba(0,0,0,0.4)` en reposo. Badge del carrito: círculo `--play-red` + número en blanco. Badge visible solo si hay items.
Skip link	`<a href="#main-content" class="skip-link">` — visible solo con foco de teclado.
Íconos en la barra de nav	No. El texto solo se escanea más rápido (patrón F). Los íconos añaden ruido sin mejorar conversión en la barra horizontal. Los íconos van dentro del mega menu (subcategorías), no en los ítems del nav principal. Zatu Games, Miniature Market, Cool Stuff Inc — todos siguen esta regla.
Blog y Eventos	Agrupados bajo Comunidad ▾ — un solo slot de nav que abre mega menu con: Blog, Eventos, Guías de juego. No merecen slots propios: son contenido, no categorías de compra.
Landings de campaña	Fuera del nav. Se acceden desde hero, banners, email y ads. Si son evergreen ("Para Regalar") viven como colecciones dentro del mega menu de Juegos de Mesa → Por ocasión.

6.3 Mega Menu — Juegos de Mesa

Propiedad	Especificación
Trigger hover	80ms delay antes de abrir — evita activación accidental al cruzar el cursor. Luego 200ms de fade-in.
Diagonal mouse problem	Al pasar de un mega menu a otro, 80ms de tolerancia antes de cambiar el panel activo. Esto permite que el usuario mueva el cursor en diagonal sin que el panel cierre y abra otro en el medio (patrón Amazon).
Cerrar	Click fuera del área, Escape, o mover el cursor fuera completamente (200ms delay).
ARIA	`role="navigation" aria-label="Menú principal"`. Items con `aria-haspopup="true" aria-expanded="false/true"`.
Imagen destacada	App Globo Mega Menu (o similar). Cuadrado con el juego del mes — editable desde Shopify Theme Editor.

6.4 Mega Menu — Comunidad

Blog, Eventos y Guías comparten un solo slot "Comunidad ▾" en la barra de nav. El mega menu los organiza en columnas con el próximo evento destacado a la derecha.

Elemento	Decisión
Slot en nav	"Comunidad ▾" — un solo ítem agrupa Blog + Eventos + Guías. No se divide en slots separados.
Evento destacado	Siempre visible en la tercera columna del mega menu. Editable desde el blog de Shopify filtrando por tag `evento`.
Blog en Shopify	Blog nativo de Shopify. Tags: `reseña` · `guia` · `evento` · `top`. Las colecciones del blog se filtran por tag.

6.5 Menú Mobile

Propiedad	Especificación
Tipo	Overlay completo desde la izquierda (drawer lateral, no bottom sheet). 100% del viewport.
Animación	Entrada: `translateX(-100%) → translateX(0)`, 250ms ease-out. Salida: 200ms ease-in.
Submenús	Acordeón con CSS grid: `grid-template-rows: 0fr → 1fr` — NUNCA max-height (causa reflows). Transición 200ms ease-out.
Header del drawer	Logo + botón de cerrar (X) con min 44×44px.
Bottom del drawer	Links secundarios: Mis pedidos, Contáctanos, WhatsApp. Siempre visibles sin scroll.
Overlay	Backdrop semitransparente (rgba(0,0,0,0.5)) sobre el contenido. Clic en backdrop cierra el menú.

6.6 Breadcrumbs

Marcado Schema.org BreadcrumbList para SEO. En mobile: solo muestra el nivel anterior (← Estrategia) para ahorrar espacio. DM Mono 11px. Separador › (no /).

6.7 Paginación (Load More)

…

Decisión: paginación por páginas, no infinite scroll. Razón: el usuario puede compartir una URL específica del catálogo, el historial del navegador funciona correctamente, y el estado de scroll se preserva al volver desde una PDP (via sessionStorage). 24 productos por carga.

6.8 Footer

Back to top: Es un enlace de texto en el footer (↑ Volver arriba), no un FAB flotante. Decisión: evitar conflicto de posición con el WhatsApp FAB que siempre ocupa el bottom-right. Un botón flotante adicional genera "ruido visual" en el stack de elementos fijos.

Sección 09

Componentes de Producto

7.1 Product Card — 4 estados

Nuevo

Catan — El Juego de Colonos

Asmodee · Familiar

En stock

S/189.90

o 3 cuotas de S/63.30

En stock

–15%

Dixit — Odyssey

Libellud · Party

¡Últimas 3 unidades!

S/120.00 S/102.00

o 3 cuotas de S/34.00

Poco stock

Agotado

No disponible

Pandemic Legacy — Temporada 1

Z-Man · Cooperativo

Agotado

S/280.00

—

Agotado

Pre-Order

Twilight Imperium IV

Fantasy Flight · Estrategia

Preventa activa

S/650.00

o 3 cuotas de S/216.67

Pre-Order

Regla	Especificación
Aspect ratio de imagen	3:4 — caja de producto estándar. Todos los juegos de mesa tienen packaging vertical.
Hover desktop	Card: `translateY(-3px)` + `shadow-raised`. La imagen principal hace crossfade a la segunda foto del producto (Gymshark pattern). Transición 200ms.
ATC en card	Botón siempre visible abajo. NO ocultar y mostrar en hover — en mobile el hover no existe y el botón desaparecería.
Precio con oferta	Precio original tachado + precio nuevo en `--play-red`. Porcentaje de descuento en badge verde.
Cuotas PowerPay	Siempre visible debajo del precio. Formato exacto: "o 3 cuotas de S/XX.XX". DM Mono 10px, `--play-mid`.
Pre-order background	--play-black, nunca rojo — diferencia la reserva de una compra inmediata. El rojo implica acción disponible ahora.
Agotado	Overlay semitransparente + badge gris + botón "Avísame cuando llegue" (Back in Stock app). El precio se muestra en gris para orientar la expectativa.

7.2 Product Data Bar

2–4 Jugadores

60–90 Minutos

10+ Edad

Media Complejidad

ES Idioma

Solo para templates product.board-game.json. Datos servidos desde metafields custom.players_min/max, custom.duration_minutes, custom.age_recommendation, custom.complexity_level, custom.language. Si un campo está vacío, la columna no se renderiza.

7.3 Quantity Selector

1

3

El botón – se desactiva en qty=1 (mínimo)

Mínimo: 1 (− deshabilitado en 1). Máximo: el stock disponible (+ deshabilitado al alcanzar el stock). Validación instant al escribir directamente en el campo. Input de número también acepta escritura directa.

7.4 Stock Indicator

En stock

¡Últimas 3 unidades!

Agotado

Estado	Threshold	Color	Mensaje
En stock	qty ≥ 4	`--play-green`	"En stock"
Poco stock	1 ≤ qty ≤ 3	#E67300 (naranja)	"¡Últimas X unidades!"
Agotado	qty = 0	`--play-mid`	"Agotado"
Pre-order	tag = pre-order	`--play-yellow`	"Preventa activa"

Sección 10

Catálogo / Colecciones

8.1 Layout de grilla

Breakpoint	Columnas	Gap
Desktop ≥1200px	4 columnas	20px
Tablet 768–1199px	3 columnas	16px
Mobile <768px	2 columnas	10px

El filter sidebar de desktop ocupa 240px fijos (sticky top 76px). El grid de productos ocupa el espacio restante. En mobile, el sidebar desaparece — los filtros se abren desde un bottom sheet.

8.2 Filter Sidebar (Desktop)

Propiedad	Especificación
Ancho	240px fijo. Sticky `top: 76px` (altura navbar + 20px). Siempre visible — nunca colapsable en desktop.
Grupos de filtros	Tipo de juego, Jugadores, Duración, Edad, Complejidad, Idioma, Precio (rangos). Cada grupo es un acordeón (abierto por defecto en desktop).
Tipo de filtro	Checkboxes con el count de productos entre paréntesis. Ej: "Familiar (12)".
Aplicación	Real-time en desktop — al hacer clic en un filtro, los resultados se actualizan sin recargar la página (Shopify Search & Discovery).
Filtros activos	Aparecen como chips removibles encima del grid (ver sección 8.4).

8.3 Filter Bottom Sheet (Mobile)

Propiedad	Especificación
Trigger	Botón "Filtros (N)" en la barra de sort. N = número de filtros activos.
Tipo	Bottom sheet que llega desde abajo. No modal centrado — en mobile la mano opera desde el borde inferior.
Altura	85% del viewport. Drag handle visible en la parte superior para gestos de cierre.
Aplicación	Los filtros NO se aplican en tiempo real en mobile (evita re-renders frecuentes). Botón "Ver 24 resultados" al pie del drawer aplica todos.
Animación	Entrada: `translateY(100%) → translateY(0)`, 300ms ease-out. Salida: 200ms ease-in.
Cierre	Drag hacia abajo, overlay tap, botón ×, Escape.

8.4 Filter Chips Activos

Familiar × 2-4 jugadores × Baja complejidad ×

Los chips aparecen solo cuando hay filtros activos. "Limpiar todo" aparece con ≥2 filtros. Al eliminar el último chip, la barra completa desaparece.

8.5 Sort Dropdown

Opciones: Relevancia (default) · Precio: menor a mayor · Precio: mayor a menor · Más vendidos · Novedades · Mejor valorados. Shopify Search & Discovery lo maneja nativamente. Sin botones de grid/lista — siempre grid (las listas no convierten en moda/juguetes).

Sección 11

Carrito

9.1 Cart Drawer

Propiedad	Desktop	Mobile
Tipo	Drawer lateral desde la derecha, 400px de ancho	Full-screen (100vw × 100vh) — el drawer lateral en mobile es demasiado estrecho
Overlay	Backdrop semitransparente sobre el contenido	No aplica (full-screen)
Animación entrada	`translateX(100%) → translateX(0)`, 300ms ease-out	Igual
Animación salida	`translateX(0) → translateX(100%)`, 200ms ease-in	Igual
Header	"Tu carrito (N)" + botón × para cerrar	Igual
Footer fijo	Barra de progreso de envío gratis + Checkout button — siempre visible, no scrollea	Igual

9.2 Cart Item

Catan — El Juego de Colonos

Edición 2024 · DM Mono 10px

1

S/189.90

Eliminar

Dixit — Odyssey

Edición Estándar

2

S/204.00

Eliminar

9.3 Barra de Progreso — Envío Gratis

¡Agrega S/56.10 más para envío gratis!

¡Envío gratis desbloqueado!

Este es el elemento de mayor impacto en conversión del carrito. Threshold: S/150. El progreso siempre visible en la parte inferior del drawer, encima del botón de checkout. Al desbloquearse: animación de confetti o flash verde, toast de celebración. Formato: "Agrega S/XX más para envío gratis" → "¡Envío gratis desbloqueado!" (nunca "Falta S/XX").

9.4 Cupón / Código de Descuento

Campo colapsable con acordeón (CSS grid). El texto dice "¿Tienes un código de descuento?". Al expandir: input + botón "Aplicar". El campo se aplica en el checkout de Shopify — el descuento aparece en el drawer solo si la API lo confirma. Nunca mostrar el campo expandido por defecto (ocupa espacio valioso en el drawer).

9.5 Checkout Button

Subtotal S/393.90

Pago seguro · Visa · PowerPay · Yape

Full-width, primary red, 52px de altura (btn-lg). Siempre al final del drawer, fijo. El subtotal mostrado excluye envío (que puede ser S/0 si superó S/150). Trust signals debajo: "Pago seguro + logos de pasarelas".

Sección 12

Formularios

10.1 Search Bar con Autocompletado

Catan — El Juego de Colonos

S/189.90 · En stock

Catan — Ciudades y Caballeros

S/149.90 · Últimas 2 unidades

Autocomplete powered by Shopify Search & Discovery. Muestra: imagen miniatura + nombre + precio + stock. Máximo 5 resultados en el dropdown. "Ver todos los resultados" al final. Activado a partir de 2 caracteres.

10.2 Quiz "Encuentra tu Juego" — 4 preguntas

Pregunta 1 de 4

¿Para quién es el juego?

Para toda la familia

Para amigos gamers

Para 2 personas

Es un regalo

Pregunta	Opciones clave
1. ¿Para quién?	Familia / Amigos gamers / 2 personas / Es un regalo
2. ¿Cuánto tiempo tienen?	<30 min / 30–60 min / 1–2 horas / Sin límite
3. ¿Qué tanto saben jugar?	Primera vez / Jugamos a veces / Somos fans / Experiencia compleja
4. ¿Cuál es el presupuesto?	Hasta S/80 / S/80–150 / S/150–300 / Sin límite

Auto-advance (patrón Typeform): Al seleccionar una opción, el quiz avanza solo a la siguiente pregunta. Sin botón "Continuar". Mejora la tasa de completación un 20–40% según benchmarks de conversión. La página de resultados muestra 3 productos + captura de email para Klaviyo ("Quiero más recomendaciones").

10.3 "Avísame cuando llegue" (Back in Stock)

Estado del producto	Qué ve el usuario
En stock	Botón "Agregar al carrito" (normal)
Agotado en PDP	Botón "Agregar al carrito" reemplazado por input de email + "Avísame cuando llegue" (App: Appikon Back in Stock). El botón ATC desaparece completamente.
Agotado en card	Botón "Avísame cuando llegue" con ícono `Bell` Lucide 13px (border style)

Sección 13

Reseñas (Judge.me)

11.1 Review Card

AC

Andrea C.

★★★★★

Hace 3 días · Lima

"Perfecto para las noches de juego con mi familia. Lo compramos para el cumpleaños de mi hija y fue un éxito total. La entrega llegó en 2 días."

SR

Sebastián R.

★★★★★

Hace 1 semana · Miraflores

"Muy buena experiencia de compra. El juego llegó en perfecto estado y las cuotas sin intereses con PowerPay lo hacen muy accesible."

Color del avatar: determinístico por inicial del nombre (hash → paleta de 8 colores fijos). Nunca aleatorio — el mismo usuario siempre tiene el mismo color. Esto evita asignar avatares de fondo rojo a reseñas negativas por azar.

11.2 Bloque de Rating Agregado

4.8

★★★★★

basado en 127 reseñas

5

104

4

15

3

5

2

1

Las barras de distribución son clickeables — filtran las reseñas por ese puntaje. Rating de BGG (custom.bgg_rating) se muestra también en la PDP como prueba social externa, diferenciado con el logo de BGG y el texto "Puntuación en BoardGameGeek".

Sección 14

Páginas Principales

12.1 Homepage — Secciones en orden

#	Sección	Especificación visual clave
01	Announcement Bar	Background #000. 3 mensajes separados por divisores. Poppins 11px. Se oculta al hacer scroll (única excepción al sticky).
02	Header + Mega Menu	Background `--play-black`. 56px altura fija. Logo + 6 nav items + search pill + cart badge.
03	Hero	Background `--play-black`. Slider de 3 banners editables desde Theme Editor. Título Barlow Condensed 900, 64px desktop / 40px mobile. 3 CTAs visuales: "Juegos de Mesa" · "Pokémon TCG" · "No sé → Quiz". El "!" como elemento decorativo en el fondo (opacity 0.06). LCP: imagen hero con `loading="eager"` y preload.
04	Colecciones Destacadas	Grid 4 cols (desktop) / 2 cols (mobile). Cards con imagen de fondo + título Barlow Condensed. 6–8 categorías principales.
05	Más Vendidos / Novedades	Carrusel de cards con tabs: "Más Vendidos" / "Novedades". 8–10 productos. Scroll snap en mobile.
06	Quiz Promo Block	Background `--play-black`. Headline grande: "¿No sabes qué juego elegir?". Botón CTA ghost-dark. Captura Andrea.
07	Nuestras Tiendas	4 cards con foto de tienda, dirección, horario, botón Google Maps, WhatsApp. Badge en Jesús María: "Recojo online disponible".
08	Reseñas	4–6 review cards en slider. Rating aggregate visible. Powered by Judge.me.
09	Eventos / Comunidad	3 blog posts recientes con tag "evento". Card con imagen + fecha prominente + título + CTA.
10	Marcas Autorizadas	Strip con logos en escala de grises. "Distribuidor Autorizado" visible. Devir, Hasbro, Pokémon, Ravensburger.
11	Footer	Background `--play-black`. 4 columnas. Libro de Reclamaciones siempre visible.

12.2 PDP — Orden exacto de elementos (Info Block)

#	Elemento	Especificación
1	Breadcrumb	DM Mono 11px. Inicio › Colección › Nombre del producto.
2	Badge "100% Original" (solo TCG)	Badge negro + amarillo. Siempre visible en product.tcg.json.
3	Título del producto	Barlow Condensed 700, 32px desktop / 26px mobile. UPPERCASE.
4	Rating de Judge.me (stars + conteo)	★★★★☆ 4.7 · 42 reseñas. Clickeable → scroll a sección de reviews.
5	Rating BGG (si existe)	BGG: 7.8/10 · con logo BGG. Solo si `custom.bgg_id` tiene valor.
6	Precio principal	DM Mono 500, 24px. Con oferta: precio original tachado + precio nuevo en rojo.
7	Cuotas PowerPay	DM Mono 12px, gris. "o 3 cuotas de S/XX.XX con PowerPay BBVA". Link al widget del banco.
8	Product Data Bar	Jugadores · Duración · Edad · Complejidad · Idioma. Solo product.board-game.json.
9	Selector de variante	Si aplica. Buttons visuales, no dropdown.
10	Quantity Selector	+/− con mín 1, máx según stock.
11	Stock Indicator	Verde/naranja/gris según threshold.
12	Botón Add to Cart / Avísame / Pre-order	Full-width, 52px altura. Estado según disponibilidad.
13	Botón "Recojo en Jesús María"	Secondary, full-width. Solo si en stock.
14	Delivery info inline	Ícono camión · "Envío: S/12 (3-4 días) · Gratis desde S/150".
15	WhatsApp CTA	"¿Tienes preguntas? Escríbenos" → abre WhatsApp con el producto pre-rellenado.

12.3 Sticky Bottom Bar (Mobile PDP)

S/189.90

3 × S/63.30

Aparece cuando el botón ATC original queda fuera de la pantalla al hacer scroll (IntersectionObserver). Se oculta cuando el ATC original vuelve a ser visible. Z-index sobre el contenido. Padding-bottom: env(safe-area-inset-bottom) para iPhone con home indicator.

Sección 15

Mobile — Reglas Específicas

Regla	Implementación	Por qué
Font-size inputs ≥16px	Todos los `<input>`, `<select>`, `<textarea>` deben tener font-size ≥16px	iOS Safari hace zoom automático si el font-size es menor — rompe la experiencia
Tap targets ≥44×44px	Todos los elementos interactivos. Ampliar con padding si el visual es más pequeño.	Apple HIG: mínimo 44×44pt. Dedos grandes pierden precisión en pantallas pequeñas.
-webkit-tap-highlight-color	`-webkit-tap-highlight-color: transparent` en el reset CSS	El highlight azul/gris del sistema en iOS/Android interrumpe la visual del diseño propio
Momentum scroll	`-webkit-overflow-scrolling: touch` en contenedores scroll (carrito, filtros)	Activa la inercia nativa del scroll en iOS
Safe area insets	`padding-bottom: env(safe-area-inset-bottom)` en: navbar, sticky bar, WhatsApp FAB, cart drawer footer	iPhone X en adelante tiene home indicator que tapa los elementos fijos en la parte inferior
Gallery en PDP mobile	Scroll snap horizontal nativo. Dots indicator. Sin thumbnails (demasiado pequeños para tap).	Gestos nativos — no librería JS extra.
Stack de elementos fijos	Nav: top-0. WhatsApp FAB: bottom-16 + safe-area. Sticky PDP bar: aparece cuando FAB está activo → FAB sube 64px automáticamente (transition 200ms).	Evitar que elementos fijos se superpongan entre sí.
No bottom navigation bar	No agregar tab bar de 4-5 íconos en la parte inferior	Shopify no es app nativa. Añadir una bottom nav falsa genera confusión de plataforma y compite con los gestos del sistema iOS/Android.
Zoom prevention en pinch	`<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">` — SOLO en páginas de checkout donde el zoom rompería el layout. En el resto del sitio, permitir zoom (accesibilidad).	Bloquear el zoom globalmente es una mala práctica de accesibilidad — usuarios con baja visión lo necesitan.

Sección 16

Accesibilidad

Target: WCAG 2.1 nivel AA. El 15% de la población peruana tiene alguna discapacidad según CONADIS. Además, la accesibilidad mejora el SEO y la experiencia de todos los usuarios.

Categoría	Especificación
Contraste de color	✓ `--play-red` (#E42528) sobre blanco: ratio 4.51:1 (pasa AA mínimo para texto normal) ✓ `--play-ink` (#101114) sobre `--play-paper`: ratio 16.8:1 (AAA) ✓ Texto blanco sobre `--play-red`: ratio 4.51:1 (pasa AA) ✗ `--play-green` (#26B56C) sobre blanco: ratio 3.1:1 → FALLA AA para texto normal. Solo usar en: badge con bg verde + texto blanco (OK), íconos ≥16px, dots.
Focus visible	Todos los elementos interactivos tienen `:focus-visible { outline: 3px solid var(--play-red); outline-offset: 3px; }`. Nunca `outline: none` sin un reemplazo visual equivalente.
Skip link	`<a href="#main-content" class="skip-link">Ir al contenido principal</a>` — primer elemento del DOM. Visible solo al recibir foco de teclado (`position: absolute; left: -9999px;` → visible con `:focus-visible`).
Alt text	Productos: "[Nombre del juego] — [descripción breve de la imagen]". Decorativas: `alt=""`. Nunca "image.jpg" o "product-photo-1".
ARIA patterns	Nav principal: `role="navigation" aria-label="Menú principal"` Cart drawer: `role="dialog" aria-modal="true" aria-label="Tu carrito"` Toasts: `role="status" aria-live="polite"` (éxito) / `role="alert" aria-live="assertive"` (error) Star rating: `aria-label="4.7 de 5 estrellas"` Mega menu items: `aria-haspopup="true" aria-expanded="false"`
prefers-reduced-motion	`@media (prefers-reduced-motion: reduce) { , ::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }` Aplica a: skeletons, carousel auto-play, todas las transiciones. La función se preserva — solo la animación se elimina.
Semántica HTML	`<nav>` para navegación principal y breadcrumbs `<main id="main-content">` para el contenido principal `<article>` para product cards `<h1>` único por página (nombre del producto en PDP, título de colección en catálogo)

Sección 17

Performance / Core Web Vitals

Métrica	Target	Cómo lo logramos
LCP (Largest Contentful Paint)	<2.5s	Imagen del hero: `loading="eager" fetchpriority="high"` + `<link rel="preload">`. Resto del catálogo: `loading="lazy"`.
CLS (Cumulative Layout Shift)	<0.1	Todos los `<img>` con atributos `width` y `height` explícitos. Fonts con `font-display: swap` + fallback system font de dimensiones similares.
INP (Interaction to Next Paint)	<200ms	No bloquear el main thread: sin JS sync en el critical path. Debounce en filtros (300ms). Defer de scripts de terceros.

Técnica	Implementación
srcset + sizes	Todas las imágenes de producto con srcset 200/400/600/800/1200w. Sizes: "(max-width: 768px) 50vw, (max-width: 1200px) 33vw, 25vw".
Font loading	`<link rel="preconnect" href="https://fonts.googleapis.com">` en el `<head>`. `font-display: swap` en todas las fuentes. Fallback: "system-ui, -apple-system, sans-serif" para Poppins.
Animaciones CSS	Solo `transform` y `opacity` en transiciones — estas propiedades no causan layout recalculation. Nunca animar `width`, `height`, `top`, `left`, `margin`.
Scripts de terceros	Orden de carga: 1) Shopify core → 2) Izipay → 3) Judge.me → 4) Klaviyo → 5) Smile.io/Joy → 6) Chat/WhatsApp widget. Analytics y marketing scripts: `defer` o `type="module"`.
Acordeón CSS Grid	Animación de acordeón: `grid-template-rows: 0fr → 1fr` con CSS transition. NUNCA `max-height` — causa reflows y la animación se ve desigual si el contenido varía en tamaño.

Sección 18

Metafields que alimentan el Theme

Juegos de Mesa — obligatorios en arranque

Metafield	Tipo	Dónde se usa en el theme
`custom.players_min/max`	number_integer	Product Data Bar (`Users` Lucide 20px + rango)
`custom.duration_minutes`	number_integer	Product Data Bar (`Clock` Lucide 20px + minutos)
`custom.age_recommendation`	single_line_text	Product Data Bar (`UserRound` Lucide 20px + edad), filtros
`custom.complexity_level`	single_line_text	Product Data Bar (`Gauge` Lucide 20px + Baja/Media/Alta), filtros
`custom.language`	single_line_text	Product Data Bar (`Globe` Lucide 20px + idioma)
`custom.bgg_id`	number_integer	Link directo a BoardGameGeek en PDP
`custom.bgg_rating`	number_decimal	Badge "BGG: 7.8/10" en PDP — prueba social externa. Zatu Games lo usa con efecto positivo.
`custom.giftable`	boolean	Colección automática "Para Regalar" — se llena sola si el equipo marca true

Todos los productos

Metafield	Tipo	Uso
`custom.badge_text`	single_line_text	Badge libre: "Recomendado", "Edición Especial"
`custom.short_pitch`	multi_line_text	Resumen de 1-2 líneas para cards en homepage carruseles
`custom.pickup_notice`	single_line_text	Mensaje personalizado de recojo/entrega en PDP

Sección 19

Apps y Dependencias del Theme

App	Qué componente del theme depende de ella	Prioridad
Search & Discovery (Shopify)	Filtros de catálogo, búsqueda con autocompletado, sort	Día 1 — gratis
Judge.me	Review cards, star rating, aggregate block, review form post-compra	Día 1 — gratis
Klaviyo	Quiz → captura email en resultados. Newsletter footer. Abandono de carrito.	Día 1
Shop Quiz / RevenueHunt	Quiz "Encuentra tu Juego" (página completa)	Día 1
Appikon Back in Stock	Botón "Avísame cuando llegue" en productos agotados	Semana 1
Timesact Pre-Order	Botón "Reservar" + badge "Pre-Order" + colección "Próximamente"	Semana 1
PowerPay (BBVA)	Widget de cuotas en PDP y en carrito ("3 × S/XX.XX")	Día 1
Globo Mega Menu	Imágenes en el flyout del mega menu (el nativo de Shopify no soporta imágenes)	Semana 1
Smile.io o Joy	Widget de puntos (acumulación/canje). Badge en nav: "Tus puntos: 120"	Semana 2-3

SistemaVisual

Fundamentos de Marca

Personalidad visual

El "!" como identidad

Regla editorial

Tokens — Color

Tokens — Tipografía

Display — Barlow Condensed 700/900

Cuerpo — Poppins 400/500

Datos — DM Mono 400/500

Tokens — Espaciado, Radio, Sombras y Transiciones

Sistema de Íconos

Librería: Lucide Icons

Por qué no emojis en UI

Por qué no íconos en nav horizontal

Fotografía e Ilustración

Componentes Base

Navegación

Componentes de Producto

Catálogo / Colecciones

Carrito

Formularios

Reseñas (Judge.me)

Páginas Principales

Mobile — Reglas Específicas

Accesibilidad

Performance / Core Web Vitals

Metafields que alimentan el Theme

Apps y Dependencias del Theme

Sistema
Visual