-21%Foto 1:1 — pendiente
SMART TV SAMSUNG 55" CRYSTAL UHD 4K
Gs. 3.299.000
Gs. 4.150.000
12x Gs. 274.917
Foundation v2 · QA del sistema
El sistema,
a la vista.
Primer artefacto del proyecto nuevo: tokens, tipografía, material, motion y componentes de FOUNDATION.md — verificables acá antes de construir la home. Cambiá el tema y el modo arriba: todo lo que ves se re-tematiza en cascada, sin tocar un componente.
demo · empezá arriba: tema, claro/oscuro, motion e idioma ES/PT/EN
01 · Tokens — §1
Capa 1 · Primitivos tematizables
Los 25 tokens que un tema de ocasión redefine (v2: el acento dejó de ser tematizable). Los valores de abajo se leen en vivo del tema activo.
Ramp brand — tematizable
Acento — constante entre temas A1 v2 · como status y sectores: el ámbar se repite en los 4 temas
Papel · línea · noche
01b · Tokens — §1.2–1.3
Capa 2 · Semánticos
Nunca cambian por tema; el dark mode re-mapea solo esta capa. El chip muestra el valor resuelto en vivo; la flecha, el mapeo en light.
Superficies y texto
Marca, acento y foco
Precio y status — no se tematizan
01c · Sectores — §1.2
Identidad de sector
Gramática del comprador, constante entre temas (solo ajusta luz en dark). PASE A: la foto del sector vive centrada sobre el color y al hover crece y se escapa del marco — recorte PNG pendiente.
02 · Tipografía — §2
Escala fluida
Bricolage Grotesque para display, Poppins para UI, JetBrains Mono para números. El display es deliberadamente zarpado.
--fs-display · Bricolage opsz 96 · clamp(2.9rem → 5.4rem)
Tu compra, en serio.
--fs-h1 · clamp(2.05rem → 2.55rem)
Tecnología que rinde en guaraníes
--fs-h2 · clamp(1.55rem → 1.95rem)
Ofertas de la semana
--fs-h3 · 1.25rem
Marcas exclusivas
--fs-bodyL · 1.125rem / body · 1rem · line-height 1.55
Comprá hoy y retirá en sucursal, o recibilo en todo el país.
Poppins regular para cuerpo y UI. Antialiased, text-wrap: pretty, sin sorpresas. Los párrafos largos respiran con line-height 1.55.
--fs-small · 0.875rem / --fs-caption · 0.75rem
Texto small para metadatos y soporte.
Caption para labels y notas al pie.
.eyebrow — firma de sección (mono · .22em · tick de acento)
Sectores más visitados
.mono — obligatorio en precios, cuotas, specs, IDs, counts (tabular-nums)
Gs. 3.299.000 · 12x Gs. 274.917 · US$ 429 · SKU 048-2215
.db-title — título ALL-CAPS heredado de la DB, con tracking y peso medio
Smart TV Samsung 55" Crystal UHD 4K UN55DU7700
03 · Espaciado y capas — §3
Escala, radios, escalera z
Spacing
Radios
sm·4
md·8
lg·12
pill
Contenedor
.wrap · max-width 1180px · padding 0 var(--sp-6).
Touch targets ≥ 44px · load-more ≥ 52px.
body: overflow-x clip (contrato QA mobile).
Escalera z — única
- --z-toast100
- --z-overlay-panel81
- --z-overlay80
- --z-fab70
- --z-header50
- --z-sticky40
Nadie inventa un z-index fuera de esta lista. Alturas fijas: header 118 · toolbar 54 · secnav 56.
04 · Material — §4
Hairlines · grain · glass · elevación · auras
El grain de doble capa ya está activo sobre toda esta página (multiply en light, screen en dark). Mirá de cerca un fondo plano.
--e1 · reposo
--e2 · hover / paneles
--e3 · overlays
e1 + hairline interna — firma de card
R2 · Glass
Fallback sólido primero; blur 4–6px solo si @supports backdrop-filter. Scrim único rgba(8,16,32,.48).
Auras — §4.5
Doble radial ámbar/navy, blur 80px, respira 7.5s. Spot interactivo sigue al cursor (solo pointer fine). Pausa el breathe al hover.
05 · Motion — §5
Firmas de movimiento
El gate vive en UN script JS (§5.1): motion corre por defecto, PRM solo aplica sin override, y no existe @media (prefers-reduced-motion) en el CSS. Esta página entera revela con stagger 90ms (cap 540ms) — eso es la firma Reveals.
gate: —
R1 · Magnetic CTA
Explorar CatálogoPULL .22/.32 · CAP 10/7px · un listener delegado · retorno spring .35s. Blacklist: quickAdd, nav, filtros, coverflow.
R4 · Add-to-cart coreografiado
Ripple scale 6 → press spring 240ms → «✓ Agregado» 1400ms → countBump 550ms → bagBump 850ms + glowPulse hasta abrir el drawer. Sin toast. El carrito actualiza igual sin motion.
Coverflow físico — §5.6 motor [T/P] INTOCABLE
demo · agarrá una campaña y arrastrá →
Motor transplantado byte-fiel de la RECETA: medición por offsetLeft (jamás el rect transformado) · carry v·88 clamp ±32% · proyección de intención v·300 · settle críticamente amortiguado k=7.2 banda 500–556ms · carryFade t(1−t)^2.4 · clamp no-overshoot · recycle in-flight · pill líquida CENTRO-FIJO gain .18/decay .66 (el strip de dots viaja debajo; la pill se desplaza ±1 paso y vuelve). Look [G] 21:9: −10° · scale −.06 · translateZ 1.1em · dim −.45. Puntero fino = física 3D · touch = scroll nativo · ←/→ = ±1 card · guard click-vs-drag 6px. Sin JS cae a rail nativo plano.
Arte de campaña — pendiente
Días Tech
Ver campaña → Arte de campaña — pendienteVuelta al Cole
Ver campaña → Arte de campaña — pendienteHogar & Deco
Ver campaña → Arte de campaña — pendienteSemana del Gamer
Ver campaña → Arte de campaña — pendientePerfumería Importada
Ver campaña → Arte de campaña — pendienteCamping & Outdoor
Ver campaña →offers-marquee — loop 32s, pausa en hover · bullets pulsantes desfasados (2.4s, stagger 5n)
Ofertas de la semanaEnvíos a todo el país12 cuotas sin interésRetirá en Salto del GuairáAtención por WhatsApp
Tokens de duración y easing
- --sc-dur-fast / base / slow150 · 220 · 420ms
- --sc-ease-outcubic-bezier(.2,.7,.2,1)
- --sc-springcubic-bezier(.34,1.56,.64,1)
- --sc-motion-springlinear() overshoot real
- --sc-settle / fast / microlinear() muestreados
v2-theme-iris
Cambiá el tema arriba: con View Transitions + fullMotion, el tema nuevo entra como círculo de 600ms desde el botón clickeado. Sin soporte → swap instantáneo. One-shot, nunca loop.
Disciplina
transform / opacity / filter only · rAF único por sistema · IO en vez de scroll listeners · will-change se setea al interactuar y se limpia en transitionend.
05b · FX de página — §5.7
Celebración disparada por acción
Una acción significativa → UNA celebración de página completa → se va. Nunca ambient, nunca loop, nunca en hover — delight puntual, con criterio. Canvas único efímero, un rAF, se autodestruye al morir la última partícula. Gate vivo: sin motion la acción ocurre igual, sin fiesta.
FX1 · Fireworks — entrar a Ofertas
clic aquí ↓3 ráfagas ámbar / navy / rojo · ~1.6s y muere. También dispara el «Ofertas» del cat-nav (06).
FX2 · Serpentinas — pedido confirmado
Tiras que caen del borde superior con flutter · ~2.5s. También dispara el «Finalizar Compra» del cart-drawer.
Criterio anti-slop
- disparaUNA acción del usuario
- dónde síofertas · pedido confirmado
- dónde NOhover · scroll · add-to-cart · ambient
- presupuesto≤420 partículas · canvas único
- vidaone-shot — el canvas se autodestruye
- colorestokens vivos (tematizable gratis)
06 · Componentes — §6
header + cat-nav + search
demo · clic en el carrito: abre el drawer real con cross-sell
B3 · v2 / PASE1: botón Categorías a la IZQUIERDA del logo (abre el menú) + cat-nav con iconos del sprite, «Ofertas» como primer ítem y «Ver todos» al final. El scroll del cat-nav es scroll-premium: sin barra nativa, drag de mouse, wheel, ←/→ con el contenedor en foco y fade-mask de estado en los bordes. El header real es sticky con --z-header; carrito y menú abren los overlays reales (scroll-lock §5.4 corregido). B7 · v3 / PASE1: el wordmark colapsa a «SC» YA desde tablet (≤900); <600 la búsqueda pasa a toggle y queda UN solo botón de categorías — [Categorías] [SC] … [buscar] [carrito] — vivo acá mismo si angostás la ventana, y en 06f con el frame.
06b · Botones, badges, precio
Acciones y gramática de precio
Botones
Navy sobre ámbar, nunca blanco sobre ámbar. El CTA dispara R4. Focus visible con --sc-focus-ring (probá con Tab).
Badges y status
-21%
Nuevo
En stock · 14 unidades
Sin stock
Jerarquía de precio — inviolable
Gs. 3.299.000
Gs. 4.150.000
-21%
12x Gs. 274.917 sin interés
US$ 429 · ref.
venta > tachado > %off > cuotas > US$ · mono tabular siempre.
06c · product-card — §8.1
Variantes --rail · --grid · --feature
Mismo DOM, modificador de clase. Stretched-link al PDP + islas (marca, wish, quickAdd) en todas. Hover: lift + sheen diagonal a CARD COMPLETA — PASE A: el sheen subió a z3 y barre por encima de foto, badge y texto (antes el texto lo opacaba).
--rail · ancho fijo clamp(200px, 56vw, 248px) · quickAdd icon-only · B4: flechas + auto-advance mobile (uno por vez, STOP al final) · B8 v3: sin scrollbar nativo — el progreso vive en el indicador de abajo
Foto 1:1 — pendiente
NOTEBOOK LENOVO 15.6" RYZEN 7 16GB 512GB SSD
Gs. 5.890.000
12x Gs. 490.833
-23%Foto 1:1 — pendiente
AURICULARES SONY INALÁMBRICOS NOISE CANCELLING
Gs. 689.000
Gs. 890.000
6x Gs. 114.833
--grid · B9 v4: mobile-first 1 col ancha → 2 → 3 → 4 (precio + cuotas completos, <900 el price-block apila) + --feature · span completo, media 4:3, specs mono
Foto 4:3 — pendiente
Consola portátil OLED 7" · 1TB, edición limitada
- Pantalla OLED 7" · 90Hz
- 1TB NVMe ampliable
- Hasta 12h de batería
Gs. 4.690.000
12x Gs. 390.833 sin interés
-23%Foto 1:1 — pendiente
CAFETERA OSTER ESPRESSO 20 BAR ACERO
Gs. 1.245.000
Gs. 1.620.000
12x Gs. 103.750
Foto 1:1 — pendiente
PARLANTE JBL PORTÁTIL BLUETOOTH IP67
Gs. 758.000
6x Gs. 126.333
--list · B4 v2: fila compacta para resultados densos y comparación · mismo DOM, modificador de clase
Foto 1:1 — pendiente
SMARTWATCH AMAZFIT GTS 4 GPS
Gs. 890.000
6x Gs. 148.333
-13%Foto 1:1 — pendiente
TECLADO LOGITECH MX KEYS ESPAÑOL
Gs. 690.000
Gs. 790.000
--cat · PASE B: card de CATÁLOGO mobile — 2 por fila SIEMPRE. Insight de negocio (CDE): el cliente llega a la tienda física con el CÓDIGO anotado; la web es el catálogo para encontrarlo rápido. Jerarquía inviolable: 1 código-ref (chip mono) · 2 nombre · 3 precio · 4 CTA según producto (quickAdd / sin stock / consultar) — la foto es apoyo: chica y con zoom recortado. La grid de categoría mobile usa esta card. Marco demo 390px:
demo · buscá por código, como en la tienda de CDE
-21%Foto zoom — pendiente
Foto zoom — pendiente
-23%Foto zoom — pendiente
Foto zoom — pendiente
06d · toolbar · breadcrumb · secnav · reviews
Refinamiento y orientación
Samsung
Gs. 1M – 5M
breadcrumb + section-nav (PDP)
reviews-honest
Barras scaleX al revelar; sin JS quedan en su valor final. Nunca un stat inventado: «—» antes que mentir.
06e · tiles · banners · financiación · seals
Elección y confianza
D · §4.6 — dos arquetipos de media, nunca al revés: el PRODUCTO flota (contain + aura sobre papel); la MARCA/CAMPAÑA va a sangre (cover + scrim). Tiles y banners usan el segundo.
Foto categoría — pendiente
Televisores38 productos
Foto categoría — pendiente
Perfumería52 productos
Pagá en cuotas, sin interés.
12cuotas máx.
0%interés
215productos mock
26categorías
Garantía oficial de tienda
Retiro en sucursal o envío nacional
Pagos protegidos
06f · Cómo se transforma — §3.2
Desktop → mobile, en vivo
Los componentes no solo escalan: CAMBIAN. Elegí un viewport y mirá el antes/después — el frame usa container queries que espejan los mismos cortes de layout (600 / 900 / 1200) que las @media de producción.
header — Categorías a la izquierda · ≤900 wordmark→SC · <600 search→toggle, quedan buscar + carrito
toolbar — 5 facetas + sort → pill «Filtros» + sort
coverflow — escalera del slide: 4:3 · min(340px, 86vw)16:9 · min(470px, 72vw)16:9 · min(500px, 56vw)21:9 · min(580px, 42vw)
cards — B9 v4: 1 col ancha → 2 → 3 → 4 · precio completo sin cortar
-21%Foto 1:1 — pendiente
SMART TV SAMSUNG 55" CRYSTAL UHD 4K
Gs. 3.299.000
Foto 1:1 — pendiente
NOTEBOOK LENOVO 15.6" RYZEN 7 16GB
Gs. 5.890.000
-23%Foto 1:1 — pendiente
AURICULARES SONY NOISE CANCELLING
Gs. 689.000
Foto 1:1 — pendiente
PARLANTE JBL PORTÁTIL BLUETOOTH IP67
Gs. 758.000
06h · PDP: resumen — §IA-2.3
Gallery sticky + buy-box
Simetría 50/50: la galería queda FIJA mientras el buy-box scrollea — la foto es protagonista hasta la decisión. PASE B re-decide §8.2: «Ver 360°» abre el viewer de SECUENCIA DE FOTOS — arrastrá izq→der para recorrer los 12 frames (←/→ también). NO hay GLB: son las fotos reales del producto, y el botón existe solo con ≥3 fotos.
Foto principal — pendiente
v360 gate: …
demo · clic en «Ver 360°» y arrastrá la fotoSmart TV Samsung 55" Crystal UHD 4K
Gs. 3.299.000
Gs. 4.150.000
-21%
12x Gs. 274.917 sin interés
US$ 429 · ref.
Tamaño
- Garantía oficial de tienda 12 meses
- Retiro en sucursal o envío nacional
- Simulá tus cuotas antes de comprar
Especificaciones
- Pantalla 55" Crystal UHD 4K · 60Hz
- HDR10+ · PurColor · Motion Xcelerator
- 3× HDMI · 1× USB · WiFi 5 · BT 5.2
- Tizen OS · asistentes integrados
Entrega y retiro
- Retiro en Salto del Guairá: hoy mismo
- Envío nacional: 24–72h según zona
Garantía
- 12 meses de garantía oficial de tienda
- Soporte por WhatsApp
06h2 · PDP: opiniones ricas + login-gate
Reviews con cara y fecha
Prueba social honesta: compra verificada, fecha, voto de utilidad. Opinar requiere sesión — el gate abre un stub declarado (no hay auth real; decisión abierta IA §6).
Resumen
login-gate: abre sc-modal con trap + retorno de foco · sin JS las reviews quedan visibles igual.
Marta R.
12 may 2026
Llegó al día siguiente a Ciudad del Este
La imagen es muy superior a mi TV anterior. El retiro en sucursal fue rápido y el embalaje impecable.
Compra verificada
Diego A.
28 abr 2026
Buena relación precio-calidad
El control podría ser mejor, pero en 12 cuotas no se consigue otra igual. El simulador de cuotas ayuda a decidir.
Compra verificada07 · Inventario — §6
Los componentes del sistema
Tier BASE funciona sin JS; PE es enhancement con gate declarado y fallback. Abajo: los estados que la tabla promete, visibles. Lo que no tiene demo viva acá (gallery, buy-box, simulador, filter-drawer, skin-cursor…) se construye en su vista.
| Componente | Variantes / estados | Tier · gate | Fallback |
|---|---|---|---|
| header | Categorías | logo | search | acciones · tablet ≤900: wordmark→SC · <600: search→toggle, quedan buscar + carrito (§3.2) · sticky, theme-toggle | BASE sticky PE | header estático, completo |
| cat-nav | iconos del sprite + «Ofertas» primero · activa, hover · scroll-premium: drag/wheel/←→ + fade-mask de estado | BASE gestos BASE JS | scroll nativo |
| search | inline desktop · toggle mobile · focus, glass | BASE glass PE @supports | fondo sólido |
| hero-signature | entrance, aura breathe, zoom hover | BASE | estático |
| offers-marquee | loop 32s, pausa hover | PE fullMotion | fila scrolleable |
| campaigns-coverflow | motor [T/P] de la RECETA: carry v·88 ±32% · proyección v·300 · settle k=7.2 (500–556ms) · recycle in-flight · pill líquida · ←/→ · guard 6px · look [G] 4:3→16:9→21:9 | PE fullMotion+JS · física INTOCABLE | rail snap nativo |
| page-fx | fireworks («Ofertas») · serpentinas («pedido confirmado») — canned one-shot, canvas único, ≤420 partículas, se autodestruye | PE fullMotion+JS | la acción ocurre igual, sin fiesta |
| category-tiles | lift, zoom | BASE | — |
| sectores | 6 tiles color propio · foto «sale-afuera» al hover | BASE pop PE | tile estático clickeable |
| product-card | --rail · --grid · --feature · --list · --cat (catálogo 2-col, código-ref) · is-sale · hover, wish, quickAdd, is-added | BASE motion PE | card estática clickeable |
| rail / grid-cards | snap, cmp-arrows, scrollbar nativo oculto · FLIP reorder | BASE FLIP PE | reorder instantáneo |
| toolbar + facet-bar | 5 dropdowns + sort · pill Filtros mobile · open, chips | BASE | — |
| filter-drawer | drawer desktop · sheet mobile · trap, lock | BASE JS sc-overlay | — |
| load-more | disabled, hasMore | BASE JS | grid completa |
| marcas-exclusivas | 3 banners · brand-go magnetic | BASE R1 PE | — |
| financiacion-band | count-up | BASE PE | números estáticos |
| trust-band / seals | — | BASE | — |
| breadcrumb / section-nav | scrollspy is-active | BASE spy PE IO | anchors sin highlight |
| gallery + lightbox | zoom, trap | BASE JS | imagen estática |
| buy-box | stock 0, variantes, add R4 | BASE R4 PE | add sin coreografía |
| simulador-cuotas | sheet · trap, settle | BASE JS | — |
| mobile-buybar | sticky reveal | BASE PE | visible fijo |
| reviews-honest | scaleX / count-up | BASE PE | valores finales |
| relacionados (.xadd) | R4 en add | BASE | — |
| cart-drawer / menu-drawer | panel desktop · sheet mobile · trap, lock, foot reveal | BASE JS sc-overlay | — |
| mini-cart / backdrop | glass | PE @supports | scrim sólido |
| footer | columnas + contacto + pagos + legal (06g) · navy del header | BASE | — |
| wa-fab | magnetic, footer-guard | BASE PE IO | fijo sin guard |
| theme-switcher | tap = light/dark · long-press 550ms o «⋯» = popup de temas · aria-pressed, iris | BASE JS iris PE VT | swap sin transición |
| skin-cursor | dot+ring, is-magnetic | PE hover+fine | cursor nativo |
| cat-nav premium | snap + máscara fade + «Ver más» · botón Categorías + usuario | BASE | scroll nativo sin máscara |
| ship-bar (cart) | progreso a envío gratis · is-free | BASE anim PE | barra en valor final |
| cart-xsell | recomendados · add R4 · merge de líneas | BASE JS | — |
| product-card--list | fila compacta · mismas islas | BASE | — |
| rail-nav | flechas prev/next por card | BASE JS | scroll nativo |
| rail-indicator | thumb de progreso que sigue el scroll del rail | BASE JS | oculto (rail = scroll nativo) |
| rail auto-advance | mobile · uno por vez · STOP al final · cancela al primer gesto | PE fullMotion + <600 | rail estático |
| parallax sutil | ±5–7px translate3d · rAF único | PE fullMotion | estático |
| icon-sprite | 22 UI + 26 categorías · un solo trazo | BASE | — |
| media-archetypes | m-product contain+aura · m-brand cover+scrim (§4.6) | BASE regla | — |
| pdp-gallery sticky | sticky ≥900 · simetría 50/50 con buy-box · thumbs | BASE | columna normal (stack) |
| reviews ricas + login-gate | verificada, fecha, útil · modal stub sc-modal | BASE JS sc-overlay | reviews visibles, sin modal |
| v360-viewer | secuencia de fotos draggable izq→der · dial de ángulo · gate de contenido ≥3 fotos — NO GLB (PASE B) | BASE JS lazy al click | gallery intacta · vista 360 |
Estados visibles — B6
Islas de card
quickAdd · reposo / is-added
wish · off / on
brandline · isla que filtra por marca
Refinamiento
facet-btn · reposo / is-open
chips activos + limpiar
Samsung
load-more · hasMore / disabled
Carrito
stepper · islas que no navegan
ship-bar · en progreso / is-free
Status y badges
oferta · nuevo · stock
-21%
Nuevo
En stock · 14 unidades
Sin stock
rating · estrella del sprite
08 · Iconografía — C1/C2
Set propio, un solo trazo
Sprite <symbol> compartido: retícula 24px, trazo 1.8, terminales redondas, esquinas suaves. Todo ícono del sitio sale de acá — nada de sets mezclados ni genéricos.
UI
Las 26 categorías — contrato del sitio
Taxonomía real del catálogo (heredada del fable V2): cada categoría con su ícono y su slug para category.html?cat=…. Las estacionales quedan marcadas.
09 · Arquitectura de información — IA §1–§4
El template, mapeado
Sitemap, flujos y mapa clickeable→destino del sitio real. Cada vista linkea a los componentes de este showcase que la construyen; entre vistas la navegación son links reales con query params (contrato multi-archivo, IA §4).
Sitemap — 3 vistas + overlays
HOME
index.html- header + cat-nav
- offers-marquee
- campañas (coverflow)
- hero-signature
- category-tiles · sectores
- rails + grids de producto
- marcas · financiación · seals
- footer
CATEGORY
category.html?cat=…- h1 dinámico + count
- toolbar facetas / pill Filtros
- filter-drawer (8 facetas · bottom-sheet <768)
- product-grid 1→2→3→4
- load-more (52px)
PDP
pdp.html?sku=…- breadcrumb + section-nav scrollspy
- gallery sticky + buy-box
- especificaciones (details)
- opiniones ricas
- relacionados (.xadd)
- mobile-buybar sticky
overlays: cart-drawermenu-drawerfilter-drawerlightboxsimulador-cuotaslogin-gate (stub)global: header sticky · wa-fab · theme · footer
Los 3 flujos
Compra
HOME→CATEGORY→PDP→add R4→cart-drawer→checkout — abierto IA §6
Búsqueda
search (inline / toggle)→CATEGORY con queryvista propia — abierta
Tema · modo
tap = light/dark→long-press / «⋯» = temas→iris 600ms (VT + fullMotion)8 combinaciones válidas
Mapa: qué-clickeable → qué-destino
| Clickeable | Destino / acción | Tipo | Demo |
|---|---|---|---|
| logo header | HOME | link | 06 |
| cat-nav item · «Ver todos» | CATEGORY · categoría real | link | 06 |
| search submit | CATEGORY · query aplicada | link + estado | 06f |
| coverflow card | CATEGORY · campaña | link (no interfiere drag) | 05 |
| category-tile · sector | CATEGORY · esa categoría | link | 06e |
| product-card (cuerpo) | PDP del producto | stretched-link | 06c |
| └ brandline · rating | CATEGORY filtrada | islas | B6 |
| └ quickAdd · wish | acción local — NO navegan | islas | B6 |
| brand-banner | CATEGORY · por marca | link (R1) | 06e |
| breadcrumb · secnav (PDP) | retorno / anchors scrollspy | links | 06h |
| «Escribir una opinión» | login-gate (stub honesto) | botón → modal | 06h2 |
| cart item (nombre) | PDP del item + cierra drawer | botón isla | cart-drawer |
| «Finalizar Compra» | ABIERTO — checkout no existe | CTA terminal | cart-drawer |
| wa-fab · footer links | wa.me · vistas / legales | links | 06g |
Patrón rector: stretched-link + islas (INTOCABLE §5.6). En el showcase los destinos llevan a la sección que demuestra el componente; en el sitio, a category.html / pdp.html con query params.
10 · i18n — es / pt / en
Un atributo, un diccionario, un fallback
Triple frontera: el cliente habla español, portugués o inglés. El DOM en español ES el contenido; pt/en viven en un diccionario por claves. Lo que no está traducido cae SIEMPRE a español — jamás a una auto-traducción.
Mecanismo
- marcadata-i18n="clave" · data-i18n-ph (placeholder)
- fuenteel español del DOM (cacheado en data-i18n-es)
- diccionarioI18N.pt / I18N.en — solo claves traducidas
- fallbackclave ausente → español, SIEMPRE
- auto-traducciónNO existe — humano o nada
- JSscI18n.t(clave, fallbackEs)
- persistencialocalStorage sc-lang · ?lang=
- lang attres-PY · pt-BR · en
Demo en vivo
Cambiá ES/PT/EN en la barra: header (06), «Ofertas», buscador, drawers y CTAs se re-escriben. Esta muestra también:
Retirá en Salto del Guairá o recibilo en todo el país.
lang: —
La frase de muestra existe SOLO en pt a propósito — pasá a EN y mirala caer a español: ese es el fallback trabajando.
Reglas de claves
- namingdominio.acción — nav.offers · cta.add · search.ph
- alcanceUI cromada se traduce · datos de DB no
- preciosGs. mono NUNCA se traduce ni convierte
- ptpt-BR de frontera, no pt-PT
- coberturaparcial es VÁLIDO — el fallback la hace segura
Iniciá sesión para opinar
Las opiniones se publican con compra verificada: necesitás tu cuenta para escribir una.
STUB — auth no implementada a propósito (decisión abierta IA §6: cuenta/login). El gate, el trap y el retorno de foco son los reales.