5 px arriba/abajo y 10 px a los lados en móvil. Safe-area medido una vez y congelado.
Todo lo que diseñamos, en un solo lugar.
Esta vitrina usa exactamente los archivos del framework que consumen Agenda, Vende, Entrena y cualquier deployable nuevo. Si algo se mejora aquí, se mejora en todos.
Marco, header y footer como filtro
El documento nunca hace scroll: solo se mueve el contenido dentro de la ventana redondeada. Arriba del header y abajo del dock el contenido desaparece; detrás de ellos se ve desenfocado. La altura usa svh/lvh, así que no cambia cuando Safari muestra u oculta sus barras.
Máscara en el scroller: transparente hasta pasar el radio del header, luego 10 px de desvanecido. Sin cortes a 90°.
Ventana en 100svh, lienzo en 100lvh. Nada de vh, dvh ni innerHeight.
Superficies que se desprenden
Slider de categorías
Las píldoras brotan del borde inferior del header, se funden al bajar y vuelven a brotar al subir, en cascada de izquierda a derecha.
IxGoo.headerRail → Botón del footerEn la página de producto, “Agregar al carrito” se desprende del dock al bajar y se reabsorbe al subir.
IxGoo.footerAction →Abrir, cerrar, expandir
Modales que crecen desde el botón que los abrió, menú en cascada, productos que se expanden desde su tarjeta y toasts que suben desde el dock. Todo con las mismas curvas y respetando “reducir movimiento”.
Ver componentes